From 304422e37e7fc5646616e451f812c45cae663126 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Sat, 21 Dec 2024 14:35:18 +0800
Subject: [PATCH] feat: enhance dependency setup and UI components

- Removed unnecessary condition from confirm button in DependencySetupDialog.
- Adjusted CSS in NavActionGroup to prevent wrapping of items.
- Added custom scrollbar styles in NavActions for better visibility.
- Introduced new 'Install Envs' action in dependency management with corresponding labels and tooltips in English and Chinese.
- Updated interface definitions to include 'installEnvironments' for better type safety.
- Refined label selector in ListLayout for improved styling consistency.
- Added a new button for installing environments in useDependencyList with appropriate actions.
---
 .../core/dependency/DependencySetupDialog.vue |  1 -
 src/components/ui/nav/NavActionGroup.vue      |  1 -
 src/components/ui/nav/NavActions.vue          | 24 +++++++++++++++++++
 src/i18n/lang/en/views/env.ts                 |  4 ++++
 src/i18n/lang/zh/views/env.ts                 |  4 ++++
 src/interfaces/i18n/views/env.d.ts            |  4 ++++
 src/layouts/content/list/ListLayout.vue       |  2 +-
 .../dependency/list/useDependencyList.tsx     | 16 +++++++++++++
 8 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/components/core/dependency/DependencySetupDialog.vue b/src/components/core/dependency/DependencySetupDialog.vue
index 8642f0bb3fcd0..c9c138c7516d9 100644
--- a/src/components/core/dependency/DependencySetupDialog.vue
+++ b/src/components/core/dependency/DependencySetupDialog.vue
@@ -33,7 +33,6 @@ const loading = computed(() => state.setupLoading);
 
 const confirmButtonDisabled = computed(() => {
   if (loading.value) return true;
-  if (!activeConfigSetup.value?._id) return true;
   return toInstallNodes.value.length === 0;
 });
 const onConfirm = async () => {
diff --git a/src/components/ui/nav/NavActionGroup.vue b/src/components/ui/nav/NavActionGroup.vue
index f1db845952759..3c515a63df0ea 100644
--- a/src/components/ui/nav/NavActionGroup.vue
+++ b/src/components/ui/nav/NavActionGroup.vue
@@ -20,7 +20,6 @@ defineOptions({ name: 'ClNavActionGroup' });
   align-items: start;
   gap: 10px;
   box-sizing: border-box;
-  flex-wrap: wrap;
   position: relative;
   margin-right: 10px;
 
diff --git a/src/components/ui/nav/NavActions.vue b/src/components/ui/nav/NavActions.vue
index 51c201d37a7ff..46119db079801 100644
--- a/src/components/ui/nav/NavActions.vue
+++ b/src/components/ui/nav/NavActions.vue
@@ -45,5 +45,29 @@ defineOptions({ name: 'ClNavActions' });
   &.unmounted {
     position: absolute;
   }
+
+  &:hover {
+    &::-webkit-scrollbar {
+      display: block;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    height: 4px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: var(
+      --el-scrollbar-bg-color,
+      var(--el-text-color-secondary)
+    );
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 2px;
+    background-color: var(--el-fill-color-light);
+  }
 }
 </style>
diff --git a/src/i18n/lang/en/views/env.ts b/src/i18n/lang/en/views/env.ts
index cc1366c08c576..155d1eae0b1ef 100644
--- a/src/i18n/lang/en/views/env.ts
+++ b/src/i18n/lang/en/views/env.ts
@@ -30,6 +30,10 @@ const env: LViewsEnv = {
           label: 'Search Dependencies',
           tooltip: 'Search and install dependencies',
         },
+        installEnvironments: {
+          label: 'Install Envs',
+          tooltip: 'Install dependency environments (or programming languages)',
+        },
       },
       tabs: {
         installed: 'Installed',
diff --git a/src/i18n/lang/zh/views/env.ts b/src/i18n/lang/zh/views/env.ts
index 00325e0b7a193..3536fb695b329 100644
--- a/src/i18n/lang/zh/views/env.ts
+++ b/src/i18n/lang/zh/views/env.ts
@@ -30,6 +30,10 @@ const env: LViewsEnv = {
           label: '搜索依赖',
           tooltip: '搜索并安装依赖',
         },
+        installEnvironments: {
+          label: '安装环境',
+          tooltip: '安装依赖环境（或编程语言）',
+        },
       },
       tabs: {
         installed: '已安装',
diff --git a/src/interfaces/i18n/views/env.d.ts b/src/interfaces/i18n/views/env.d.ts
index 45380355d0977..ec80416b1f082 100644
--- a/src/interfaces/i18n/views/env.d.ts
+++ b/src/interfaces/i18n/views/env.d.ts
@@ -20,6 +20,10 @@ interface LViewsEnv {
           label: string;
           tooltip: string;
         };
+        installEnvironments: {
+          label: string;
+          tooltip: string;
+        };
       };
       tabs: {
         installed: string;
diff --git a/src/layouts/content/list/ListLayout.vue b/src/layouts/content/list/ListLayout.vue
index 30c5b0c6e6b7b..ec062cb2dd2c1 100644
--- a/src/layouts/content/list/ListLayout.vue
+++ b/src/layouts/content/list/ListLayout.vue
@@ -289,7 +289,7 @@ defineOptions({ name: 'ClListLayout' });
           width: 200px;
         }
 
-        &:deep(.label) {
+        &:deep(label.label) {
           margin-right: 5px;
           font-size: 14px;
         }
diff --git a/src/views/dependency/list/useDependencyList.tsx b/src/views/dependency/list/useDependencyList.tsx
index 8587ec95aa374..5447b052a3c07 100644
--- a/src/views/dependency/list/useDependencyList.tsx
+++ b/src/views/dependency/list/useDependencyList.tsx
@@ -158,6 +158,22 @@ const useDependencyList = () => {
             store.commit(`${ns}/showDialog`, 'config');
           },
         },
+        {
+          className: 'setup-btn',
+          buttonType: 'label',
+          label: t('views.env.deps.repos.actions.installEnvironments.label'),
+          tooltip: t(
+            'views.env.deps.repos.actions.installEnvironments.tooltip'
+          ),
+          icon: ['fa', 'server'],
+          onClick: async () => {
+            store.commit(`${ns}/setSetupForm`, {
+              mode: 'all',
+              version: state.config?.default_version,
+            });
+            store.commit(`${ns}/showDialog`, 'setup');
+          },
+        },
       ],
     },
   ]);