feat: remove small size from dependency dialog buttons and enhance em…

…pty state messages for dependencies - Removed 'size="small"' from buttons in DependencyInstallDialog, DependencySetupDialog, and DependencyUninstallDialog components. - Added new empty state messages for uninstalled dependencies in English and Chinese, including prompts for Java dependencies. - Updated the dependency utility functions to handle Java and Go repository names. - Enhanced the DependencyList component to display appropriate messages and actions when no dependencies are configured or when Java is selected.
crawlab-team · Dec 20, 2024 · c33f187 · c33f187
1 parent 609129d
commit c33f187
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 53 deletions.
diff --git a/src/components/core/dependency/DependencyInstallDialog.vue b/src/components/core/dependency/DependencyInstallDialog.vue
@@ -73,7 +73,6 @@ defineOptions({ name: 'ClDependencyInstallDialog' });
           class="dep-name"
           type="primary"
           :label="form.name"
-          size="small"
         />
       </cl-form-item>
       <cl-form-item :span="4" :label="t('views.env.deps.dependency.form.mode')">

diff --git a/src/components/core/dependency/DependencySetupDialog.vue b/src/components/core/dependency/DependencySetupDialog.vue
@@ -76,7 +76,6 @@ defineOptions({ name: 'ClDependencySetupDialog' });
           class="dep-name"
           type="primary"
           :label="config?.name"
-          size="small"
         />
       </cl-form-item>
       <cl-form-item

diff --git a/src/components/core/dependency/DependencyUninstallDialog.vue b/src/components/core/dependency/DependencyUninstallDialog.vue
@@ -73,7 +73,6 @@ defineOptions({ name: 'ClDependencyUninstallDialog' });
           class="dep-name"
           type="primary"
           :label="name"
-          size="small"
         />
       </cl-form-item>
       <cl-form-item :span="4" :label="t('views.env.deps.dependency.form.mode')">

diff --git a/src/i18n/lang/en/views/env.ts b/src/i18n/lang/en/views/env.ts
@@ -42,6 +42,27 @@ const env: LViewsEnv = {
         },
         nodes: 'Nodes',
       },
+      empty: {
+        configNotSetup: {
+          title: 'Dependency environment not installed',
+          content:
+            'Please install the dependency environment (or programming language) first',
+          action: {
+            label: 'Install now',
+            tooltip:
+              'Install the dependency environment (or programming language)',
+          },
+        },
+        java: {
+          title: 'Global dependency not supported',
+          content:
+            'Java (Maven) does not support installation/uninstallation of global dependencies. Please manage within spiders.',
+          action: {
+            label: 'Manage within spiders',
+            tooltip: 'Manage in the dependencies tab within spiders',
+          },
+        },
+      },
     },
     lang: {
       python: 'Python',
@@ -82,6 +103,7 @@ const env: LViewsEnv = {
         execCmd: 'Execute Command',
         pkgCmd: 'Package Command',
         proxy: 'Proxy',
+        defaultVersion: 'Default Version',
       },
     },
     configSetup: {

diff --git a/src/i18n/lang/zh/views/env.ts b/src/i18n/lang/zh/views/env.ts
@@ -42,6 +42,24 @@ const env: LViewsEnv = {
         },
         nodes: '节点',
       },
+      empty: {
+        configNotSetup: {
+          title: '依赖环境未安装',
+          content: '请先安装依赖环境（或编程语言）',
+          action: {
+            label: '立即安装',
+            tooltip: '安装依赖环境（或编程语言）',
+          },
+        },
+        java: {
+          title: '不支持全局依赖',
+          content: 'Java（Maven）不支持全局依赖的安装/卸载。请在爬虫内管理。',
+          action: {
+            label: '在爬虫内管理',
+            tooltip: '在爬虫内的依赖选项卡中管理',
+          },
+        },
+      },
     },
     lang: {
       python: 'Python',
@@ -82,6 +100,7 @@ const env: LViewsEnv = {
         execCmd: '执行命令',
         pkgCmd: '依赖管理命令',
         proxy: '代理',
+        defaultVersion: '默认版本',
       },
     },
     configSetup: {

diff --git a/src/interfaces/i18n/views/env.d.ts b/src/interfaces/i18n/views/env.d.ts
@@ -32,6 +32,24 @@ interface LViewsEnv {
         };
         nodes: string;
       };
+      empty: {
+        configNotSetup: {
+          title: string;
+          content: string;
+          action: {
+            label: string;
+            tooltip: string;
+          };
+        };
+        java: {
+          title: string;
+          content: string;
+          action: {
+            label: string;
+            tooltip: string;
+          };
+        };
+      };
     };
     lang: {
       python: string;

diff --git a/src/utils/dependency.ts b/src/utils/dependency.ts
@@ -4,11 +4,29 @@ export const getRepoExternalPath = (repo: DependencyRepo) => {
       return `https://pypi.org/project/${repo.name}`;
     case 'node':
       return `https://www.npmjs.com/package/${repo.name}`;
+    case 'go':
+      return `https://pkg.go.dev/${repo.name}`;
+    case 'java':
+      return `https://mvnrepository.com/artifact/${getRepoName(repo)}`;
     default:
       return '';
   }
 };
 
+export const getRepoName = (repo: DependencyRepo) => {
+  switch (repo.type) {
+    case 'go':
+      if (repo.name!.startsWith('github.com/')) {
+        return repo.name!.split('github.com/')[1];
+      }
+      return repo.name;
+    case 'java':
+      return repo.name!.replaceAll(':', '/');
+    default:
+      return repo.name;
+  }
+};
+
 export const getEmptyDependency = (): Dependency => {
   return {
     version: 'N/A',

diff --git a/src/views/dependency/list/DependencyList.vue b/src/views/dependency/list/DependencyList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useStore } from 'vuex';
 import { useDependencyList } from '@/views';
-import { getIconByAction, translate } from '@/utils';
+import { getIconByAction, getIconByRouteConcept, translate } from '@/utils';
 import { ACTION_FILTER_SEARCH } from '@/constants';
 
 const t = translate;
@@ -10,6 +10,8 @@ const ns: ListStoreNamespace = 'dependency';
 const store = useStore();
 
 const {
+  config,
+  lang,
   actionFunctions,
   navActions,
   tableLoading,
@@ -20,6 +22,8 @@ const {
   repoTabName,
   repoTabItems,
   onClickTableEmptySearch,
+  onClickTableEmptyConfigNotSetup,
+  onClickTableEmptyJava,
 } = useDependencyList();
 
 const onTabSelect = (key: string) => {
@@ -49,13 +53,41 @@ defineOptions({ name: 'ClDependencyList' });
       />
     </template>
     <template #table-empty>
-      <cl-label-button
-        size="large"
-        :icon="getIconByAction(ACTION_FILTER_SEARCH)"
-        :label="t('views.env.deps.repos.actions.search.label')"
-        :tooltip="t('views.env.deps.repos.actions.search.tooltip')"
-        @click="onClickTableEmptySearch"
-      />
+      <template v-if="['installed', 'search'].includes(repoTabName!)">
+        <template v-if="!config?.setup">
+          <h3>{{ t('views.env.deps.repos.empty.configNotSetup.title') }}</h3>
+          <p>{{ t('views.env.deps.repos.empty.configNotSetup.content') }}</p>
+          <cl-label-button
+            size="large"
+            :icon="getIconByRouteConcept('node')"
+            :label="t('views.env.deps.repos.empty.configNotSetup.action.label')"
+            :tooltip="
+              t('views.env.deps.repos.empty.configNotSetup.action.tooltip')
+            "
+            @click="onClickTableEmptyConfigNotSetup"
+          />
+        </template>
+        <template v-else-if="repoTabName === 'installed' && lang === 'java'">
+          <h3>{{ t('views.env.deps.repos.empty.java.title') }}</h3>
+          <p>{{ t('views.env.deps.repos.empty.java.content') }}</p>
+          <cl-label-button
+            size="large"
+            :icon="getIconByRouteConcept('spider')"
+            :label="t('views.env.deps.repos.empty.java.action.label')"
+            :tooltip="t('views.env.deps.repos.empty.java.action.tooltip')"
+            @click="onClickTableEmptyJava"
+          />
+        </template>
+        <template v-else>
+          <cl-label-button
+            size="large"
+            :icon="getIconByAction(ACTION_FILTER_SEARCH)"
+            :label="t('views.env.deps.repos.actions.search.label')"
+            :tooltip="t('views.env.deps.repos.actions.search.tooltip')"
+            @click="onClickTableEmptySearch"
+          />
+        </template>
+      </template>
     </template>
     <template #extra>
       <!-- Dialogs (handled by store) -->
@@ -68,3 +100,11 @@ defineOptions({ name: 'ClDependencyList' });
     </template>
   </cl-list-layout>
 </template>
+
+<style scoped>
+.dependency-list {
+  &:deep(.el-table__empty-text) {
+    line-height: 1.2;
+  }
+}
+</style>