feat: enhance DependencySetupDialog with browser-specific node setup …

…handling

- Added logic to check for Node.js setup when the language is set to 'browser', prompting users to install Node.js if necessary.
- Introduced a new alert in the UI to inform users about the requirement for Node.js in browser dependency management.
- Updated internationalization files to include new alert messages in both English and Chinese.
- Enhanced the FilterSelect component to watch for changes in the defaultValue prop for better initialization.

These changes improve the user experience by providing clear guidance on Node.js requirements for browser dependencies.

src/components/core/dependency/DependencySetupDialog.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@/utils';
+import useRequest from '@/services/request';
+import { browser } from 'globals';
 
 const t = translate;
 
+const { get } = useRequest();
+
 const ns: ListStoreNamespace = 'dependency';
 const store = useStore();
 const { dependency: state, node: nodeState } = store.state as RootStoreState;
 
 const config = computed(() => state.config);
+const lang = computed(() => state.lang);
 
 const activeConfigSetup = computed(() => state.activeConfigSetup);
 
@@ -40,7 +45,11 @@ const loading = computed(() => state.setupLoading);
 
 const confirmButtonDisabled = computed(() => {
   if (loading.value) return true;
-  return toInstallNodes.value.length === 0;
+  if (toInstallNodes.value.length === 0) return true;
+  if (needsNodeSetupForBrowser.value) {
+    return true;
+  }
+  return false;
 });
 const onConfirm = async () => {
   // Skip if the confirm button is disabled
@@ -71,9 +80,29 @@ watch(visible, async () => {
   if (!visible.value) {
     store.commit(`${ns}/resetSetupForm`);
     store.commit(`${ns}/resetActiveConfigSetup`);
+
+    // special handling for browser
+    if (lang.value === 'browser') {
+      await getNodeConfig();
+    }
   }
 });
 
+const nodeConfig = ref<DependencyConfig>();
+const getNodeConfig = async () => {
+  if (!config.value) return;
+  const res = await get(`/dependencies/configs/node`);
+  nodeConfig.value = res.data;
+};
+watch(lang, async () => {
+  if (lang.value === 'browser') {
+    await getNodeConfig();
+  }
+});
+const needsNodeSetupForBrowser = computed(
+  () => lang.value === 'browser' && !nodeConfig.value?.setup
+);
+
 defineOptions({ name: 'ClDependencySetupDialog' });
 </script>
 
@@ -146,14 +175,43 @@ defineOptions({ name: 'ClDependencySetupDialog' });
           </el-select>
         </cl-form-item>
       </template>
-      <cl-form-item :label="t('views.env.deps.dependency.form.toInstallNodes')">
+      <cl-form-item
+        :label="t('views.env.deps.dependency.form.toInstallNodes')"
+        :span="4"
+      >
         <template v-if="toInstallNodes.length > 0">
           <cl-node-tag v-for="n in toInstallNodes" :key="n.key" :node="n" />
         </template>
         <template v-else>
           <cl-tag type="info" :label="t('common.placeholder.empty')" />
         </template>
       </cl-form-item>
+      <cl-form-item v-if="needsNodeSetupForBrowser" :span="4">
+        <el-alert type="warning" :closable="false">
+          <div>
+            {{
+              t('views.env.deps.config.alert.browser.nodeSetupRequired.content')
+            }}
+          </div>
+          <div>
+            <cl-label-button
+              :icon="['fab', 'node-js']"
+              :label="
+                t(
+                  'views.env.deps.config.alert.browser.nodeSetupRequired.action'
+                )
+              "
+              @click="
+                () => {
+                  store.commit(`${ns}/setLang`, 'node');
+                  store.commit(`${ns}/setRepoTabName`, 'nodes');
+                  store.commit(`${ns}/hideDialog`);
+                }
+              "
+            />
+          </div>
+        </el-alert>
+      </cl-form-item>
     </cl-form>
   </cl-dialog>
 </template>

src/components/ui/filter/FilterSelect.vue

@@ -74,6 +74,7 @@ const initializeModelValue = () => {
 };
 onBeforeMount(initializeModelValue);
 watch(internalOptions, initializeModelValue);
+watch(() => props.defaultValue, initializeModelValue);
 
 const hasIcon = computed(() => {
   return computedOptions.value.some(option => option.icon);

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

@@ -119,6 +119,15 @@ const env: LViewsEnv = {
         proxy: 'Proxy',
         defaultVersion: 'Default Version',
       },
+      alert: {
+        browser: {
+          nodeSetupRequired: {
+            content:
+              'Browser dependency management requires Node.js, which is not set up yet. Please click to install Node.js first.',
+            action: 'Install Node.js',
+          },
+        },
+      },
     },
     configSetup: {
       form: {

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

@@ -115,6 +115,14 @@ const env: LViewsEnv = {
         proxy: '代理',
         defaultVersion: '默认版本',
       },
+      alert: {
+        browser: {
+          nodeSetupRequired: {
+            content: '浏览器依赖管理需要 Node.js，但尚未设置。请先点击安装 Node.js。',
+            action: '安装 Node.js',
+          },
+        },
+      },
     },
     configSetup: {
       form: {

src/interfaces/i18n/views/env.d.ts

@@ -104,6 +104,14 @@ interface LViewsEnv {
         proxy: string;
         defaultVersion: string;
       };
+      alert: {
+        browser: {
+          nodeSetupRequired: {
+            content: string;
+            action: string;
+          };
+        };
+      };
     };
     configSetup: {
       form: {