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.

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 () => {

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;
 

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>

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',

src/i18n/lang/zh/views/env.ts

@@ -30,6 +30,10 @@ const env: LViewsEnv = {
           label: '搜索依赖',
           tooltip: '搜索并安装依赖',
         },
+        installEnvironments: {
+          label: '安装环境',
+          tooltip: '安装依赖环境（或编程语言）',
+        },
       },
       tabs: {
         installed: '已安装',

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;

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;
         }

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');
+          },
+        },
       ],
     },
   ]);