refactor: remove unused environment files and enhance dependency mana…

…gement

- Deleted .env.analyze and .env.docker files as they are no longer needed.
- Updated package.json to remove obsolete build scripts related to docker and analyze modes.
- Added 'unrestricted' placeholder text in both English and Chinese localization files for improved user experience.
- Enhanced task management by ensuring log content updates only when necessary, preventing unnecessary state changes.
- Introduced new utility functions for dependency loading status and type determination, improving dependency management logic.
- Refactored dependency list and spider detail components to utilize new utility functions, enhancing clarity and maintainability.
- Improved task detail actions to provide localized messages for user feedback.

These changes streamline the codebase by removing unused configurations and enhancing the functionality and clarity of dependency management.

package.json

@@ -48,11 +48,8 @@
     "postbuild": "pnpm run postbuild:gen",
     "postbuild:gen": "pnpm run gen:interfaces",
     "build": "pnpm run prebuild && pnpm run build:lib && pnpm run postbuild",
-    "build:docker": "vite build --mode docker",
     "build:local": "vite build --mode local",
     "build:lib": "vite build",
-    "build:lib:analyze": "vite build --mode analyze",
-    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit",
     "lint": "vite lint",
     "test": "jest"
   },

src/i18n/lang/en/common.ts

@@ -160,6 +160,7 @@ const common: LCommon = {
   },
   placeholder: {
     empty: 'Empty',
+    unrestricted: 'Unrestricted',
   },
   select: {
     input: {

src/i18n/lang/zh/common.ts

@@ -160,6 +160,7 @@ const common: LCommon = {
   },
   placeholder: {
     empty: '空',
+    unrestricted: '无限制',
   },
   select: {
     input: {

src/interfaces/i18n/common.d.ts

@@ -173,6 +173,7 @@ export declare global {
     };
     placeholder: {
       empty: string;
+      unrestricted: string;
     };
     select: {
       input: {

src/layouts/content/detail/DetailLayout.vue

@@ -122,6 +122,7 @@ defineOptions({ name: 'ClDetailLayout' });
     background-color: var(--cl-container-white-bg);
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 
     .nav-actions {
       height: fit-content;

src/store/modules/task.ts

@@ -12,6 +12,7 @@ import {
 } from '@/constants/tab';
 import { TASK_MODE_RANDOM } from '@/constants/task';
 import { translate } from '@/utils/i18n';
+import { getMd5 } from '@/utils';
 
 // i18n
 const t = translate;
@@ -101,7 +102,9 @@ const actions = {
   ) => {
     const { page, size } = state.logPagination;
     const res = await getList(`/tasks/${id}/logs`, { page, size });
-    commit('setLogContent', res.data?.join('\n'));
+    if (getMd5(state.logContent) !== getMd5(res.data?.join('\n') || '')) {
+      commit('setLogContent', res.data?.join('\n'));
+    }
     commit('setLogTotal', res.total);
     return res;
   },

src/utils/dependency.ts

@@ -52,3 +52,18 @@ export const getNormalizedDependencies = (
   }
   return dependencies;
 };
+
+export const isDependencyLoading = (dep: Dependency) => {
+  return dep.status === 'installing' || dep.status === 'uninstalling';
+};
+
+export const getTypeByDep = (dep: Dependency): BasicType | undefined => {
+  switch (dep.status) {
+    case 'installing':
+    case 'uninstalling':
+      return 'warning';
+    case 'error':
+    case 'abnormal':
+      return 'danger';
+  }
+};

src/utils/index.ts

@@ -28,3 +28,4 @@ export * from './validate';
 export * from './notification';
 export * from './time';
 export * from './icon';
+export * from './dependency';

src/utils/task.ts

@@ -54,6 +54,7 @@ export const priorityOptions: SelectOption[] = [
 export const isCancellable = (status?: TaskStatus): boolean => {
   switch (status) {
     case TASK_STATUS_PENDING:
+    case TASK_STATUS_ASSIGNED:
     case TASK_STATUS_RUNNING:
       return true;
     default:

src/views/dependency/list/useDependencyList.tsx

@@ -38,6 +38,8 @@ import {
   getNormalizedDependencies,
   getRepoExternalPath,
   getRepoName,
+  getTypeByDep,
+  isDependencyLoading,
 } from '@/utils/dependency';
 import type { TagProps } from '@/components/ui/tag/types';
 import { CellStyle } from 'element-plus';
@@ -227,21 +229,6 @@ const useDependencyList = () => {
     store.commit(`${ns}/showDialog`, 'logs');
   };
 
-  const isLoading = (dep: Dependency) => {
-    return dep.status === 'installing' || dep.status === 'uninstalling';
-  };
-
-  const getTypeByDep = (dep: Dependency): BasicType | undefined => {
-    switch (dep.status) {
-      case 'installing':
-      case 'uninstalling':
-        return 'warning';
-      case 'error':
-      case 'abnormal':
-        return 'danger';
-    }
-  };
-
   // table cell style
   const tableCellStyle = computed<CellStyle<any>>(() => {
     const cellStyle: CellStyle<any> = ({ column }): CSSProperties => {
@@ -396,8 +383,8 @@ const useDependencyList = () => {
                   <ClNodeTag
                     key={node._id}
                     node={node}
-                    loading={isLoading(dep)}
-                    hit={isLoading(dep)}
+                    loading={isDependencyLoading(dep)}
+                    hit={isDependencyLoading(dep)}
                     type={getTypeByDep(dep)}
                     clickable
                     onClick={() => {
@@ -702,7 +689,7 @@ const useDependencyList = () => {
     // nodes tab
     const nodesItem: NavItem = {
       id: 'nodes',
-      title: t('views.env.deps.repos.tabs.nodes'),
+      title: `${t('views.env.deps.repos.tabs.nodes')} (${activeNodesSorted.value.length})`,
       icon: ['fas', 'server'],
     };
     items.push(nodesItem);

src/views/spider/detail/tabs/SpiderDetailTabDependencies.vue

@@ -16,10 +16,17 @@ import {
   ClNodeTag,
   useNode,
 } from '@/components';
-import { setupAutoUpdate, translate } from '@/utils';
+import {
+  setupAutoUpdate,
+  translate,
+  isDependencyLoading,
+  getTypeByDep,
+  getMd5,
+} from '@/utils';
 import { ACTION_INSTALL, ACTION_UNINSTALL } from '@/constants';
 
 type SpiderDependenciesResponse = ResponseWithData<{
+  lang: DependencyLang;
   file_type: DependencyFileType;
   requirements: DependencyRequirement[];
 }>;
@@ -32,13 +39,13 @@ const router = useRouter();
 
 const nsDependency: ListStoreNamespace = 'dependency';
 const store = useStore();
-const { dependency: dependencyState } =
-  store.state as RootStoreState;
+const { dependency: dependencyState } = store.state as RootStoreState;
 
 const { activeId } = useSpiderDetail();
 
-const { allDict: allNodeDict } = useNode(store);
+const { activeNodesSorted } = useNode(store);
 
+const lang = ref<DependencyLang>();
 const fileType = ref<DependencyFileType>();
 const requirements = ref<DependencyRequirement[]>([]);
 
@@ -87,14 +94,14 @@ const tableColumns = computed<TableColumns<DependencyRepo>>(() => {
       width: '150',
       value: (row: DependencyRequirement) => (
         <ClTag
-          label={row.version || t('common.placeholder.empty')}
+          label={row.version || t('common.placeholder.unrestricted')}
           clickable
           onClick={onClickRequiredVersion}
         />
       ),
     },
     {
-      key: 'versions',
+      key: 'dependencies',
       label: t('views.env.deps.dependency.form.installedVersion'),
       icon: ['fa', 'tag'],
       width: '150',
@@ -113,25 +120,37 @@ const tableColumns = computed<TableColumns<DependencyRepo>>(() => {
       label: t('views.env.deps.dependency.form.installedNodes'),
       icon: ['fa', 'server'],
       width: '580',
-      value: (row: DependencyRequirement) =>
-        row.dependencies?.map(dep => {
-          const node = allNodeDict.value.get(dep.node_id!);
-          if (!node?.active) return;
+      value: (row: DependencyRequirement) => {
+        return activeNodesSorted.value.map(node => {
+          const dep: Dependency | undefined = row.dependencies?.find(
+            dep => dep.node_id === node._id
+          );
+          if (!dep) return;
           return (
             <ClNodeTag
+              key={node._id}
               node={node}
+              loading={isDependencyLoading(dep)}
+              hit={isDependencyLoading(dep)}
+              type={getTypeByDep(dep)}
               clickable
               onClick={() => {
-                store.commit(`${nsDependency}/setActiveTargetId`, dep._id);
-                store.commit(`${nsDependency}/setActiveTargetName`, dep.name);
-                store.commit(`${nsDependency}/setActiveTargetStatus`, dep.status);
+                store.commit(`${nsDependency}/setActiveTargetId`, dep!._id);
+                store.commit(
+                  `${nsDependency}/setActiveTargetName`,
+                  `${node.name} - ${dep!.name}`
+                );
+                store.commit(
+                  `${nsDependency}/setActiveTargetStatus`,
+                  dep!.status
+                );
                 store.commit(`${nsDependency}/showDialog`, 'logs');
               }}
             >
               {{
                 'extra-items': () => {
                   let color: string;
-                  switch (dep.status) {
+                  switch (dep!.status) {
                     case 'installing':
                     case 'uninstalling':
                       color = 'var(--cl-warning-color)';
@@ -148,11 +167,9 @@ const tableColumns = computed<TableColumns<DependencyRepo>>(() => {
                       color = 'inherit';
                   }
                   return (
-                    <>
+                    <div class="tooltip-wrapper">
                       <div class="tooltip-title">
-                        <label>
-                          {t('layouts.routes.dependencies.list.title')}
-                        </label>
+                        <label>{t('views.env.deps.label')}</label>
                       </div>
                       <div class="tooltip-item">
                         <label>
@@ -163,10 +180,10 @@ const tableColumns = computed<TableColumns<DependencyRepo>>(() => {
                             color,
                           }}
                         >
-                          {t(`views.env.deps.dependency.status.${dep.status}`)}
+                          {t(`views.env.deps.dependency.status.${dep!.status}`)}
                         </span>
                       </div>
-                      {dep.error && (
+                      {dep!.error && (
                         <div class="tooltip-item">
                           <label>
                             {t('views.env.deps.dependency.form.error')}:
@@ -176,25 +193,26 @@ const tableColumns = computed<TableColumns<DependencyRepo>>(() => {
                               color,
                             }}
                           >
-                            {dep.error}
+                            {dep!.error}
                           </span>
                         </div>
                       )}
-                      {dep.version && (
+                      {dep!.version && (
                         <div class="tooltip-item">
                           <label>
                             {t('views.env.deps.dependency.form.version')}:
                           </label>
-                          <span>{dep.version}</span>
+                          <span>{dep!.version}</span>
                         </div>
                       )}
-                    </>
+                    </div>
                   );
                 },
               }}
             </ClNodeTag>
           );
-        }),
+        });
+      },
     },
     {
       key: 'actions',
@@ -232,8 +250,17 @@ const getData = async () => {
     const res = await get<any, SpiderDependenciesResponse>(
       `/dependencies/spiders/${activeId.value}`
     );
+    lang.value = res.data?.lang;
+    store.commit(`${nsDependency}/setLang`, lang.value);
     fileType.value = res.data?.file_type;
-    requirements.value = res.data?.requirements || [];
+
+    // Only update requirements if the md5 hash is different
+    if (
+      getMd5(JSON.stringify(requirements.value)) !==
+      getMd5(JSON.stringify(res.data?.requirements))
+    ) {
+      requirements.value = res.data?.requirements || [];
+    }
   } catch (e: any) {
     ElMessage.error(e.message);
   } finally {
@@ -260,6 +287,7 @@ defineOptions({ name: 'ClSpiderDetailTabDependencies' });
     <template #extra>
       <cl-dependency-install-dialog />
       <cl-dependency-uninstall-dialog />
+      <cl-dependency-logs-dialog />
     </template>
   </cl-list-layout>
 </template>

src/views/task/detail/actions/TaskDetailActionsCommon.vue

@@ -47,7 +47,7 @@ const onCancel = async () => {
     t('common.actions.cancel'),
     { type: 'warning' }
   );
-  ElMessage.info('Attempt to cancel');
+  ElMessage.info(t('common.message.info.cancel'));
   await post(`/tasks/${activeId.value}/cancel`);
   await getForm();
 };

src/views/task/detail/tabs/TaskDetailTabLogs.vue

@@ -97,20 +97,25 @@ const updateLogs = async () => {
 };
 
 // auto update
-let autoUpdateHandle: number;
-const setupDetail = () => {
+let autoUpdateHandle: any;
+const setupDetail = async () => {
+  // Get form data if status is empty
+  if (!form.value?.status) {
+    await getForm();
+  }
+
+  // Set up auto update if status is cancellable
   if (isCancellable(form.value?.status)) {
-    // @ts-ignore
     autoUpdateHandle = setInterval(async () => {
-      // form data
+      // Get form data
       const res = await getForm();
 
-      // logs
+      // Update logs if auto update is enabled
       if (state.logAutoUpdate) {
         await updateLogs();
       }
 
-      // dispose
+      // Dispose auto update if status is not cancellable
       if (!isCancellable(res.data.status)) {
         clearInterval(autoUpdateHandle);
       }