From 0f6da07db407988682ae5dafd8d2e6e6273a98e4 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Mon, 24 Jun 2024 22:05:45 +0800
Subject: [PATCH] fix: missing key modules

---
 scripts/gen-index.js                          | 13 +++--
 src/components/button/button.ts               | 15 ------
 src/components/date/DateTimeRangePicker.vue   |  2 -
 src/components/date/RangePicker.vue           |  2 -
 src/components/date/date.ts                   |  6 ---
 src/components/ds/DataSourceConnectType.vue   |  1 -
 src/components/ds/DataSourceStatus.vue        |  1 -
 src/components/ds/DataSourceType.vue          |  1 -
 src/components/ds/useDataSource.ts            |  6 +--
 src/components/filter/FilterCondition.vue     | 23 +-------
 src/components/index.ts                       | 50 ++++++++++++++++++
 src/components/node/CreateEditNodeDialog.vue  |  2 +-
 src/components/node/NodeForm.vue              |  2 +-
 src/components/node/NodeRunners.vue           |  1 -
 src/components/node/{node.ts => useNode.ts}   |  3 +-
 .../project/CreateEditProjectDialog.vue       |  2 +-
 src/components/project/ProjectForm.vue        |  2 +-
 .../project/{project.ts => useProject.ts}     | 11 +---
 src/components/schedule/ScheduleCron.vue      |  1 -
 src/components/schedule/ScheduleForm.vue      |  4 +-
 src/components/schedule/useSchedule.ts        | 14 ++---
 .../spider/CreateEditSpiderDialog.vue         |  2 +-
 src/components/spider/RunSpiderDialog.vue     |  4 +-
 src/components/spider/SpiderForm.vue          |  6 +--
 .../spider/{spider.ts => useSpider.ts}        |  7 ---
 src/components/tag/CheckTag.vue               |  1 -
 src/components/tag/LinkTag.vue                |  1 -
 src/components/tag/Tag.vue                    |  1 -
 src/components/tag/tag.ts                     | 19 -------
 src/components/task/TaskCommand.vue           |  4 +-
 src/components/task/TaskForm.vue              |  4 +-
 src/components/task/TaskPriority.vue          |  1 -
 src/components/task/TaskResults.vue           |  2 -
 src/components/task/TaskStatus.vue            |  2 -
 src/components/task/task.ts                   |  7 ---
 src/components/task/useTask.ts                |  2 +-
 src/components/user/CreateEditUserDialog.vue  |  2 +-
 src/components/user/UserForm.vue              |  2 +-
 src/components/user/{user.ts => useUser.ts}   | 11 ++--
 src/directives/index.ts                       |  8 +--
 src/interfaces/components/date/date.d.ts      | 22 ++++++++
 .../components/filter/FilterCondition.d.ts    |  6 ++-
 src/interfaces/components/tag/tag.d.ts        | 20 +++++++
 .../components/task/TaskCommand.d.ts          |  5 --
 src/interfaces/components/task/TaskMode.d.ts  |  3 --
 .../components/task/TaskPriority.d.ts         |  3 --
 src/interfaces/models/index.d.ts              |  1 -
 src/interfaces/models/tag.d.ts                |  7 ---
 src/interfaces/views/task.d.ts                | 11 +++-
 src/layouts/content/index.ts                  |  2 +-
 .../content/list/{list.ts => useList.ts}      |  2 +-
 src/layouts/index.ts                          |  8 ++-
 src/package/make-installer.ts                 |  3 ++
 src/utils/task.ts                             |  1 -
 src/views/deps/task/DependencyTaskList.vue    |  1 -
 .../actions/GitDetailActionsSpiders.vue       |  2 +-
 .../git/detail/tabs/GitDetailTabChanges.vue   |  8 +--
 src/views/index.ts                            | 52 ++++++++++++++++---
 src/views/misc/MySettings.vue                 |  2 +-
 src/views/node/list/useNodeList.ts            |  2 +-
 .../notification/list/useNotificationList.ts  |  2 +-
 src/views/project/list/useProjectList.ts      |  2 +-
 src/views/schedule/list/useScheduleList.ts    |  6 +--
 .../actions/SpiderDetailActionsCommon.vue     |  2 +-
 .../actions/SpiderDetailActionsDataSource.vue |  2 +-
 .../detail/tabs/SpiderDetailTabData.vue       |  2 +-
 src/views/spider/list/useSpiderList.ts        |  4 +-
 .../detail/actions/TaskDetailActionsData.vue  |  2 +-
 src/views/task/list/useTaskList.ts            | 11 ++--
 src/views/token/list/useTokenList.ts          |  2 +-
 src/views/user/list/useUserList.ts            |  4 +-
 71 files changed, 230 insertions(+), 218 deletions(-)
 delete mode 100644 src/components/button/button.ts
 rename src/components/node/{node.ts => useNode.ts} (87%)
 rename src/components/project/{project.ts => useProject.ts} (82%)
 rename src/components/spider/{spider.ts => useSpider.ts} (88%)
 delete mode 100644 src/components/tag/tag.ts
 delete mode 100644 src/components/task/task.ts
 rename src/components/user/{user.ts => useUser.ts} (91%)
 create mode 100644 src/interfaces/components/date/date.d.ts
 create mode 100644 src/interfaces/components/tag/tag.d.ts
 delete mode 100644 src/interfaces/components/task/TaskCommand.d.ts
 delete mode 100644 src/interfaces/components/task/TaskMode.d.ts
 delete mode 100644 src/interfaces/components/task/TaskPriority.d.ts
 delete mode 100644 src/interfaces/models/tag.d.ts
 rename src/layouts/content/list/{list.ts => useList.ts} (98%)

diff --git a/scripts/gen-index.js b/scripts/gen-index.js
index 1babb5ea4cef2..beda406024d2a 100644
--- a/scripts/gen-index.js
+++ b/scripts/gen-index.js
@@ -49,13 +49,18 @@ function processFile(filePath, moduleName) {
     return { importLine, exportLine };
   } else if (
     filePath.endsWith('.ts') &&
-    !['components', 'layouts', 'views'].includes(moduleName) &&
+    // !['components', 'layouts', 'views'].includes(moduleName) &&
     fileName !== INDEX_COMP_NAME
   ) {
     let compName = fileName.replace('.ts', '');
     compName += compName === 'export' ? '_' : '';
 
-    const importLine = `import ${compName} from '${relPath.replace('.ts', '')}';`;
+    let importLine;
+    if (compName.startsWith('use')) {
+      importLine = `import ${compName} from '${relPath.replace('.ts', '')}';`;
+    } else {
+      importLine = `import * as ${compName} from '${relPath.replace('.ts', '')}';`;
+    }
     const exportLine = `${compName} as ${compName},`;
     return { importLine, exportLine };
   }
@@ -141,9 +146,7 @@ function genRootIndex() {
     `export * from './src/utils';`,
     `export * from './src/constants';`,
     `export * from './src/layouts/content';`,
-    `export * from './src/components/form';`,
-    `export { default as useSpider } from './src/components/spider/spider';`,
-    `export { ClSpiderDetail } from './src/views';`,
+    `export * from './src/components/useForm';`,
     `export { installer as default } from './src/package';`,
     `export { default as useRequest } from './src/services/request';`,
   ];
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
deleted file mode 100644
index e3e719a0d2afa..0000000000000
--- a/src/components/button/button.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface ButtonProps {
-  tooltip?: string;
-  type?: BasicType;
-  size?: BasicSize;
-  round?: boolean;
-  circle?: boolean;
-  plain?: boolean;
-  disabled?: boolean;
-  isIcon?: boolean;
-  loading?: boolean;
-  onClick?: () => void;
-  className?: string;
-  id?: string;
-  noMargin?: boolean;
-}
diff --git a/src/components/date/DateTimeRangePicker.vue b/src/components/date/DateTimeRangePicker.vue
index 695f8c6472844..cfdf18585c53e 100644
--- a/src/components/date/DateTimeRangePicker.vue
+++ b/src/components/date/DateTimeRangePicker.vue
@@ -20,8 +20,6 @@ interface RangeItemOption extends SelectOption {
 }
 
 type RangeItemKey = 'custom' | string;
-type RangeItemValue = RangeItemValueFunc | DateRange;
-type RangeItemValueFunc = () => DateRange;
 type RangePickerType = 'daterange' | 'datetimerange';
 
 interface RangePickerProps {
diff --git a/src/components/date/RangePicker.vue b/src/components/date/RangePicker.vue
index 491e194f460bb..9c32b843b8657 100644
--- a/src/components/date/RangePicker.vue
+++ b/src/components/date/RangePicker.vue
@@ -18,8 +18,6 @@ interface RangeItemOption extends SelectOption {
 }
 
 type RangeItemKey = 'custom' | string;
-type RangeItemValue = RangeItemValueFunc | DateRange;
-type RangeItemValueFunc = () => DateRange;
 type RangePickerType = 'daterange' | 'datetimerange';
 
 interface RangePickerProps {
diff --git a/src/components/date/date.ts b/src/components/date/date.ts
index 8c0c9b17aa891..50550ec2c5a42 100644
--- a/src/components/date/date.ts
+++ b/src/components/date/date.ts
@@ -1,9 +1,3 @@
-import {
-  RangeItemKey,
-  RangeItemOption,
-  RangeItemValue,
-} from '@/components/date/RangePicker.vue';
-
 export const getRangeItemOption = (
   label: string,
   key: RangeItemKey,
diff --git a/src/components/ds/DataSourceConnectType.vue b/src/components/ds/DataSourceConnectType.vue
index e8726ca434108..d3f89597bba68 100644
--- a/src/components/ds/DataSourceConnectType.vue
+++ b/src/components/ds/DataSourceConnectType.vue
@@ -7,7 +7,6 @@ import {
   DATA_SOURCE_CONNECT_TYPE_HOSTS,
 } from '@/constants/ds';
 import { useI18n } from 'vue-i18n';
-import { TagProps } from '@/components/tag/tag';
 
 const props = defineProps<{
   dataSource?: DataSource;
diff --git a/src/components/ds/DataSourceStatus.vue b/src/components/ds/DataSourceStatus.vue
index d6969caa9ca56..3bba2696721ac 100644
--- a/src/components/ds/DataSourceStatus.vue
+++ b/src/components/ds/DataSourceStatus.vue
@@ -6,7 +6,6 @@ import {
   DATA_SOURCE_STATUS_ONLINE,
 } from '@/constants/ds';
 import { useI18n } from 'vue-i18n';
-import { TagProps } from '@/components/tag/tag';
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/ds/DataSourceType.vue b/src/components/ds/DataSourceType.vue
index db839e2fabc8b..2eaf294882da3 100644
--- a/src/components/ds/DataSourceType.vue
+++ b/src/components/ds/DataSourceType.vue
@@ -12,7 +12,6 @@ import {
   DATA_SOURCE_TYPE_KAFKA,
 } from '@/constants/ds';
 import { useI18n } from 'vue-i18n';
-import { TagProps } from '@/components/tag/tag';
 
 const props = defineProps<{
   dataSource?: DataSource;
diff --git a/src/components/ds/useDataSource.ts b/src/components/ds/useDataSource.ts
index 54f9556f8face..b823fd4db2303 100644
--- a/src/components/ds/useDataSource.ts
+++ b/src/components/ds/useDataSource.ts
@@ -28,13 +28,13 @@ const t = translate;
 // form component data
 const formComponentData = getDefaultFormComponentData<DataSource>();
 
-export const useDataSource: any = (store: Store<RootStoreState>) => {
+export const useDataSource = (store: Store<RootStoreState>) => {
   // store
   const ns = 'ds' as ListStoreNamespace;
   const { ds: state } = store.state as RootStoreState;
 
   // form rules
-  const formRules = readonly<FormRules>({});
+  const formRules: FormRules = {};
 
   // type options
   const typeOptions = readonly<SelectOption[]>([
@@ -77,7 +77,7 @@ export const useDataSource: any = (store: Store<RootStoreState>) => {
     );
 
     await store.dispatch(`${ns}/changePassword`, { id, password: value });
-    await ElMessage.success(t('common.message.success.save'));
+    ElMessage.success(t('common.message.success.save'));
   };
 
   // on connect type change
diff --git a/src/components/filter/FilterCondition.vue b/src/components/filter/FilterCondition.vue
index 7dc8c24bf9290..261c29ddf7ffd 100644
--- a/src/components/filter/FilterCondition.vue
+++ b/src/components/filter/FilterCondition.vue
@@ -1,27 +1,8 @@
 <script setup lang="ts">
-import { conditionTypesOptions } from '@/components/filter/filter';
-
 defineOptions({ name: 'ClFilterCondition' });
+import { conditionTypesOptions } from '@/components/filter/filter';
 import { computed } from 'vue';
-import {
-  FILTER_OP_CONTAINS,
-  FILTER_OP_EQUAL,
-  FILTER_OP_GREATER_THAN,
-  FILTER_OP_GREATER_THAN_EQUAL,
-  FILTER_OP_LESS_THAN,
-  FILTER_OP_LESS_THAN_EQUAL,
-  FILTER_OP_NOT_CONTAINS,
-  FILTER_OP_NOT_EQUAL,
-  FILTER_OP_NOT_SET,
-  FILTER_OP_REGEX,
-} from '@/constants/filter';
-import { plainClone } from '@/utils/object';
-
-interface FilterConditionData {
-  key?: string;
-  op?: string;
-  value?: any;
-}
+import { FILTER_OP_NOT_SET } from '@/constants/filter';
 
 const props = defineProps<{
   condition?: FilterConditionData;
diff --git a/src/components/index.ts b/src/components/index.ts
index 12f6c82426d2f..f6ffd97487c79 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,20 +11,24 @@ import ContextMenuList from './context-menu/ContextMenuList.vue';
 import DateRangePicker from './date/DateRangePicker.vue';
 import DateTimeRangePicker from './date/DateTimeRangePicker.vue';
 import RangePicker from './date/RangePicker.vue';
+import * as date from './date/date';
 import ConfirmDialog from './dialog/ConfirmDialog.vue';
 import CreateEditDialog from './dialog/CreateEditDialog.vue';
 import Dialog from './dialog/Dialog.vue';
 import DraggableItem from './drag/DraggableItem.vue';
 import DraggableList from './drag/DraggableList.vue';
+import * as drag from './drag/drag';
 import CreateEditDataSourceDialog from './ds/CreateEditDataSourceDialog.vue';
 import DataSourceConnectType from './ds/DataSourceConnectType.vue';
 import DataSourceForm from './ds/DataSourceForm.vue';
 import DataSourceStatus from './ds/DataSourceStatus.vue';
 import DataSourceType from './ds/DataSourceType.vue';
+import useDataSource from './ds/useDataSource';
 import Empty from './empty/Empty.vue';
 import ImgEmpty from './empty/ImgEmpty.vue';
 import CreateEditEnvironmentDialog from './environment/CreateEditEnvironmentDialog.vue';
 import EnvironmentForm from './environment/EnvironmentForm.vue';
+import useEnvironment from './environment/useEnvironment';
 import ExportForm from './export/ExportForm.vue';
 import FileActions from './file/FileActions.vue';
 import FileEditor from './file/FileEditor.vue';
@@ -38,13 +42,18 @@ import FileEditorSettingsDialog from './file/FileEditorSettingsDialog.vue';
 import FileTab from './file/FileTab.vue';
 import FileUpload from './file/FileUpload.vue';
 import UploadFilesDialog from './file/UploadFilesDialog.vue';
+import * as file from './file/file';
+import * as fileEditorDropZone from './file/fileEditorDropZone';
 import FilterCondition from './filter/FilterCondition.vue';
 import FilterConditionList from './filter/FilterConditionList.vue';
 import FilterInput from './filter/FilterInput.vue';
 import FilterSelect from './filter/FilterSelect.vue';
+import * as filter from './filter/filter';
 import Form from './form/Form.vue';
 import FormItem from './form/FormItem.vue';
 import FormTableField from './form/FormTableField.vue';
+import * as formTable from './form/formTable';
+import useForm from './form/useForm';
 import CreateEditGitDialog from './git/CreateEditGitDialog.vue';
 import CreateGitBranchDialog from './git/CreateGitBranchDialog.vue';
 import CreateGitSpiderDialog from './git/CreateGitSpiderDialog.vue';
@@ -53,9 +62,11 @@ import GitFileStatus from './git/GitFileStatus.vue';
 import GitForm from './git/GitForm.vue';
 import GitStatus from './git/GitStatus.vue';
 import UploadGitFilesDialog from './git/UploadGitFilesDialog.vue';
+import useGit from './git/useGit';
 import AtomMaterialIcon from './icon/AtomMaterialIcon.vue';
 import Icon from './icon/Icon.vue';
 import MenuItemIcon from './icon/MenuItemIcon.vue';
+import * as icon from './icon/icon';
 import InputList from './input/InputList.vue';
 import DetailTabList from './list/DetailTabList.vue';
 import NavActionBack from './nav/NavActionBack.vue';
@@ -76,16 +87,20 @@ import NodeForm from './node/NodeForm.vue';
 import NodeRunners from './node/NodeRunners.vue';
 import NodeStatus from './node/NodeStatus.vue';
 import NodeType from './node/NodeType.vue';
+import useNode from './node/useNode';
 import CreateEditNotificationDialog from './notification/CreateEditNotificationDialog.vue';
 import NotificationForm from './notification/NotificationForm.vue';
+import * as notification from './notification/notification';
 import CreateEditProjectDialog from './project/CreateEditProjectDialog.vue';
 import ProjectForm from './project/ProjectForm.vue';
+import useProject from './project/useProject';
 import ResultCell from './result/ResultCell.vue';
 import ResultCellDialog from './result/ResultCellDialog.vue';
 import ResultDedupFieldsDialog from './result/ResultDedupFieldsDialog.vue';
 import CreateEditScheduleDialog from './schedule/CreateEditScheduleDialog.vue';
 import ScheduleCron from './schedule/ScheduleCron.vue';
 import ScheduleForm from './schedule/ScheduleForm.vue';
+import useSchedule from './schedule/useSchedule';
 import CreateEditSpiderDialog from './spider/CreateEditSpiderDialog.vue';
 import RunSpiderDialog from './spider/RunSpiderDialog.vue';
 import SpiderForm from './spider/SpiderForm.vue';
@@ -93,9 +108,11 @@ import SpiderStat from './spider/SpiderStat.vue';
 import SpiderTag from './spider/SpiderTag.vue';
 import SpiderType from './spider/SpiderType.vue';
 import UploadSpiderFilesDialog from './spider/UploadSpiderFilesDialog.vue';
+import useSpider from './spider/useSpider';
 import Switch from './switch/Switch.vue';
 import ActionTab from './tab/ActionTab.vue';
 import Tab from './tab/Tab.vue';
+import * as tab from './tab/tab';
 import Table from './table/Table.vue';
 import TableActions from './table/TableActions.vue';
 import TableCell from './table/TableCell.vue';
@@ -105,6 +122,12 @@ import TableHeaderAction from './table/TableHeaderAction.vue';
 import TableHeaderDialog from './table/TableHeaderDialog.vue';
 import TableHeaderDialogFilter from './table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './table/TableHeaderDialogSort.vue';
+import * as action from './table/action';
+import * as column from './table/column';
+import * as data from './table/data';
+import * as header from './table/header';
+import * as pagination from './table/pagination';
+import * as store from './table/store';
 import CheckTag from './tag/CheckTag.vue';
 import CheckTagGroup from './tag/CheckTagGroup.vue';
 import LinkTag from './tag/LinkTag.vue';
@@ -116,6 +139,7 @@ import TaskMode from './task/TaskMode.vue';
 import TaskPriority from './task/TaskPriority.vue';
 import TaskResults from './task/TaskResults.vue';
 import TaskStatus from './task/TaskStatus.vue';
+import useTask from './task/useTask';
 import Duration from './time/Duration.vue';
 import Time from './time/Time.vue';
 import Transfer from './transfer/Transfer.vue';
@@ -123,6 +147,7 @@ import TransferPanel from './transfer/TransferPanel.vue';
 import CreateEditUserDialog from './user/CreateEditUserDialog.vue';
 import UserForm from './user/UserForm.vue';
 import UserRole from './user/UserRole.vue';
+import useUser from './user/useUser';
 
 export {
   Button as ClButton,
@@ -138,20 +163,24 @@ export {
   DateRangePicker as ClDateRangePicker,
   DateTimeRangePicker as ClDateTimeRangePicker,
   RangePicker as ClRangePicker,
+  date as date,
   ConfirmDialog as ClConfirmDialog,
   CreateEditDialog as ClCreateEditDialog,
   Dialog as ClDialog,
   DraggableItem as ClDraggableItem,
   DraggableList as ClDraggableList,
+  drag as drag,
   CreateEditDataSourceDialog as ClCreateEditDataSourceDialog,
   DataSourceConnectType as ClDataSourceConnectType,
   DataSourceForm as ClDataSourceForm,
   DataSourceStatus as ClDataSourceStatus,
   DataSourceType as ClDataSourceType,
+  useDataSource as useDataSource,
   Empty as ClEmpty,
   ImgEmpty as ClImgEmpty,
   CreateEditEnvironmentDialog as ClCreateEditEnvironmentDialog,
   EnvironmentForm as ClEnvironmentForm,
+  useEnvironment as useEnvironment,
   ExportForm as ClExportForm,
   FileActions as ClFileActions,
   FileEditor as ClFileEditor,
@@ -165,13 +194,18 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
+  file as file,
+  fileEditorDropZone as fileEditorDropZone,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
   FilterSelect as ClFilterSelect,
+  filter as filter,
   Form as ClForm,
   FormItem as ClFormItem,
   FormTableField as ClFormTableField,
+  formTable as formTable,
+  useForm as useForm,
   CreateEditGitDialog as ClCreateEditGitDialog,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
   CreateGitSpiderDialog as ClCreateGitSpiderDialog,
@@ -180,9 +214,11 @@ export {
   GitForm as ClGitForm,
   GitStatus as ClGitStatus,
   UploadGitFilesDialog as ClUploadGitFilesDialog,
+  useGit as useGit,
   AtomMaterialIcon as ClAtomMaterialIcon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
+  icon as icon,
   InputList as ClInputList,
   DetailTabList as ClDetailTabList,
   NavActionBack as ClNavActionBack,
@@ -203,16 +239,20 @@ export {
   NodeRunners as ClNodeRunners,
   NodeStatus as ClNodeStatus,
   NodeType as ClNodeType,
+  useNode as useNode,
   CreateEditNotificationDialog as ClCreateEditNotificationDialog,
   NotificationForm as ClNotificationForm,
+  notification as notification,
   CreateEditProjectDialog as ClCreateEditProjectDialog,
   ProjectForm as ClProjectForm,
+  useProject as useProject,
   ResultCell as ClResultCell,
   ResultCellDialog as ClResultCellDialog,
   ResultDedupFieldsDialog as ClResultDedupFieldsDialog,
   CreateEditScheduleDialog as ClCreateEditScheduleDialog,
   ScheduleCron as ClScheduleCron,
   ScheduleForm as ClScheduleForm,
+  useSchedule as useSchedule,
   CreateEditSpiderDialog as ClCreateEditSpiderDialog,
   RunSpiderDialog as ClRunSpiderDialog,
   SpiderForm as ClSpiderForm,
@@ -220,9 +260,11 @@ export {
   SpiderTag as ClSpiderTag,
   SpiderType as ClSpiderType,
   UploadSpiderFilesDialog as ClUploadSpiderFilesDialog,
+  useSpider as useSpider,
   Switch as ClSwitch,
   ActionTab as ClActionTab,
   Tab as ClTab,
+  tab as tab,
   Table as ClTable,
   TableActions as ClTableActions,
   TableCell as ClTableCell,
@@ -232,6 +274,12 @@ export {
   TableHeaderDialog as ClTableHeaderDialog,
   TableHeaderDialogFilter as ClTableHeaderDialogFilter,
   TableHeaderDialogSort as ClTableHeaderDialogSort,
+  action as action,
+  column as column,
+  data as data,
+  header as header,
+  pagination as pagination,
+  store as store,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
   LinkTag as ClLinkTag,
@@ -243,6 +291,7 @@ export {
   TaskPriority as ClTaskPriority,
   TaskResults as ClTaskResults,
   TaskStatus as ClTaskStatus,
+  useTask as useTask,
   Duration as ClDuration,
   Time as ClTime,
   Transfer as ClTransfer,
@@ -250,4 +299,5 @@ export {
   CreateEditUserDialog as ClCreateEditUserDialog,
   UserForm as ClUserForm,
   UserRole as ClUserRole,
+  useUser as useUser,
 };
diff --git a/src/components/node/CreateEditNodeDialog.vue b/src/components/node/CreateEditNodeDialog.vue
index e23b54056c22f..e6907aec500d1 100644
--- a/src/components/node/CreateEditNodeDialog.vue
+++ b/src/components/node/CreateEditNodeDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditNodeDialog' });
 import { useStore } from 'vuex';
-import useNode from '@/components/node/node';
+import useNode from '@/components/node/useNode';
 
 // store
 const store = useStore();
diff --git a/src/components/node/NodeForm.vue b/src/components/node/NodeForm.vue
index dfe450bddf2ef..d1bc05a016526 100644
--- a/src/components/node/NodeForm.vue
+++ b/src/components/node/NodeForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClNodeForm' });
 import { useStore } from 'vuex';
-import useNode from '@/components/node/node';
+import useNode from '@/components/node/useNode';
 import { useI18n } from 'vue-i18n';
 import { sendEvent } from '@/admin/umeng';
 
diff --git a/src/components/node/NodeRunners.vue b/src/components/node/NodeRunners.vue
index 2f2da83c7464c..80bf89ad16060 100644
--- a/src/components/node/NodeRunners.vue
+++ b/src/components/node/NodeRunners.vue
@@ -2,7 +2,6 @@
 defineOptions({ name: 'ClNodeRunners' });
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { TagProps } from '@/components/tag/tag';
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/node/node.ts b/src/components/node/useNode.ts
similarity index 87%
rename from src/components/node/node.ts
rename to src/components/node/useNode.ts
index 1da4e816e8983..7909cc1274c93 100644
--- a/src/components/node/node.ts
+++ b/src/components/node/useNode.ts
@@ -1,4 +1,3 @@
-import { readonly } from 'vue';
 import { Store } from 'vuex';
 import useForm from '@/components/form/useForm';
 import useNodeService from '@/services/node/nodeService';
@@ -14,7 +13,7 @@ const useNode = (store: Store<RootStoreState>) => {
   const ns = 'node';
 
   // form rules
-  const formRules = readonly<FormRules>({});
+  const formRules: FormRules = {};
 
   return {
     ...useForm(ns, store, useNodeService(store), formComponentData),
diff --git a/src/components/project/CreateEditProjectDialog.vue b/src/components/project/CreateEditProjectDialog.vue
index 8f382682a9aec..8d216bb06637f 100644
--- a/src/components/project/CreateEditProjectDialog.vue
+++ b/src/components/project/CreateEditProjectDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditProjectDialog' });
 import { useStore } from 'vuex';
-import useProject from '@/components/project/project';
+import useProject from '@/components/project/useProject';
 
 // store
 const store = useStore();
diff --git a/src/components/project/ProjectForm.vue b/src/components/project/ProjectForm.vue
index 4f3d60909e321..a38cbf1c3f729 100644
--- a/src/components/project/ProjectForm.vue
+++ b/src/components/project/ProjectForm.vue
@@ -2,7 +2,7 @@
 defineOptions({ name: 'ClProjectForm' });
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
-import useProject from '@/components/project/project';
+import useProject from '@/components/project/useProject';
 
 // i18n
 const { t } = useI18n();
diff --git a/src/components/project/project.ts b/src/components/project/useProject.ts
similarity index 82%
rename from src/components/project/project.ts
rename to src/components/project/useProject.ts
index 128ed38f8bcba..ff81742c53d62 100644
--- a/src/components/project/project.ts
+++ b/src/components/project/useProject.ts
@@ -22,16 +22,7 @@ const useProject = (store: Store<RootStoreState>) => {
   const state = store.state[ns];
 
   // form rules
-  const formRules = readonly<FormRules>({
-    tags: {
-      validator: (_, value, callback) => {
-        if (isDuplicated(value)) {
-          return callback('Duplicated tags');
-        }
-        callback();
-      },
-    },
-  });
+  const formRules: FormRules = {};
 
   // all project select options
   const allProjectSelectOptions = computed<SelectOption[]>(() =>
diff --git a/src/components/schedule/ScheduleCron.vue b/src/components/schedule/ScheduleCron.vue
index 39579f53bc318..c6bdec0bbea9a 100644
--- a/src/components/schedule/ScheduleCron.vue
+++ b/src/components/schedule/ScheduleCron.vue
@@ -9,7 +9,6 @@ import zh from 'dayjs/locale/zh.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import { useI18n } from 'vue-i18n';
 import { getI18n } from '@/i18n';
-import { TagProps } from '@/components/tag/tag';
 
 dayjs.extend(localizedFormat);
 
diff --git a/src/components/schedule/ScheduleForm.vue b/src/components/schedule/ScheduleForm.vue
index 3c971be5234fd..b9d689ea315c3 100644
--- a/src/components/schedule/ScheduleForm.vue
+++ b/src/components/schedule/ScheduleForm.vue
@@ -2,9 +2,9 @@
 defineOptions({ name: 'ClScheduleForm' });
 import { useStore } from 'vuex';
 import useSchedule from '@/components/schedule/useSchedule';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import { TASK_MODE_SELECTED_NODES } from '@/constants/task';
-import useNode from '@/components/node/node';
+import useNode from '@/components/node/useNode';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 import { sendEvent } from '@/admin/umeng';
diff --git a/src/components/schedule/useSchedule.ts b/src/components/schedule/useSchedule.ts
index a3c3db9a693b4..5d2db1f511063 100644
--- a/src/components/schedule/useSchedule.ts
+++ b/src/components/schedule/useSchedule.ts
@@ -1,17 +1,11 @@
-import { computed, readonly, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { Store } from 'vuex';
 import useForm from '@/components/form/useForm';
 import useScheduleService from '@/services/schedule/scheduleService';
 import { getDefaultFormComponentData } from '@/utils/form';
-import {
-  FORM_FIELD_TYPE_INPUT,
-  FORM_FIELD_TYPE_INPUT_WITH_BUTTON,
-  FORM_FIELD_TYPE_SELECT,
-  FORM_FIELD_TYPE_SWITCH,
-} from '@/constants/form';
 import { parseExpression } from 'cron-parser';
 import { getModeOptions } from '@/utils/task';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import { translate } from '@/utils/i18n';
 import useScheduleDetail from '@/views/schedule/detail/useScheduleDetail';
 
@@ -35,7 +29,7 @@ const useSchedule = (store: Store<RootStoreState>) => {
   const modeOptions = getModeOptions();
 
   // form rules
-  const formRules = readonly<FormRules>({
+  const formRules: FormRules = {
     cron: {
       trigger: 'blur',
       validator: (_, value: string, callback) => {
@@ -53,7 +47,7 @@ const useSchedule = (store: Store<RootStoreState>) => {
         }
       },
     },
-  });
+  };
 
   // all schedule select options
   const allScheduleSelectOptions = computed<SelectOption[]>(() =>
diff --git a/src/components/spider/CreateEditSpiderDialog.vue b/src/components/spider/CreateEditSpiderDialog.vue
index 1c5f2d80be912..42feb4ce8f66d 100644
--- a/src/components/spider/CreateEditSpiderDialog.vue
+++ b/src/components/spider/CreateEditSpiderDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditSpiderDialog' });
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 
 // store
 const store = useStore();
diff --git a/src/components/spider/RunSpiderDialog.vue b/src/components/spider/RunSpiderDialog.vue
index 8da4ddb56ee70..15a775eb61f1b 100644
--- a/src/components/spider/RunSpiderDialog.vue
+++ b/src/components/spider/RunSpiderDialog.vue
@@ -2,8 +2,8 @@
 defineOptions({ name: 'ClRunSpiderDialog' });
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
-import useNode from '@/components/node/node';
+import useSpider from '@/components/spider/useSpider';
+import useNode from '@/components/node/useNode';
 import { TASK_MODE_RANDOM, TASK_MODE_SELECTED_NODES } from '@/constants/task';
 import useTask from '@/components/task/useTask';
 import { ElMessage } from 'element-plus';
diff --git a/src/components/spider/SpiderForm.vue b/src/components/spider/SpiderForm.vue
index 4b1a6c3dfe4b7..f15c0a4446771 100644
--- a/src/components/spider/SpiderForm.vue
+++ b/src/components/spider/SpiderForm.vue
@@ -3,9 +3,9 @@ defineOptions({ name: 'ClSpiderForm' });
 
 import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
-import useNode from '@/components/node/node';
-import useProject from '@/components/project/project';
+import useSpider from '@/components/spider/useSpider';
+import useNode from '@/components/node/useNode';
+import useProject from '@/components/project/useProject';
 import { TASK_MODE_SELECTED_NODES } from '@/constants/task';
 import pinyin, { STYLE_NORMAL } from 'pinyin';
 import { isZeroObjectId } from '@/utils/mongo';
diff --git a/src/components/spider/spider.ts b/src/components/spider/useSpider.ts
similarity index 88%
rename from src/components/spider/spider.ts
rename to src/components/spider/useSpider.ts
index df21b02c28e30..bf4c0f37fba4c 100644
--- a/src/components/spider/spider.ts
+++ b/src/components/spider/useSpider.ts
@@ -4,13 +4,6 @@ import { Store } from 'vuex';
 import useForm from '@/components/form/useForm';
 import useSpiderService from '@/services/spider/spiderService';
 import { getDefaultFormComponentData } from '@/utils/form';
-import {
-  FORM_FIELD_TYPE_INPUT,
-  FORM_FIELD_TYPE_INPUT_TEXTAREA,
-  FORM_FIELD_TYPE_INPUT_WITH_BUTTON,
-  FORM_FIELD_TYPE_SELECT,
-} from '@/constants/form';
-import useProject from '@/components/project/project';
 import useRequest from '@/services/request';
 import { FILTER_OP_CONTAINS } from '@/constants/filter';
 import { getModeOptions } from '@/utils/task';
diff --git a/src/components/tag/CheckTag.vue b/src/components/tag/CheckTag.vue
index 96d767f58c273..348141048219c 100644
--- a/src/components/tag/CheckTag.vue
+++ b/src/components/tag/CheckTag.vue
@@ -18,7 +18,6 @@ interface TagProps {
   clickable?: boolean;
   closable?: boolean;
   disabled?: boolean;
-  tag?: Tag;
   className?: string;
 }
 
diff --git a/src/components/tag/LinkTag.vue b/src/components/tag/LinkTag.vue
index ceb34d8c37f1e..2375ebaabbcbe 100644
--- a/src/components/tag/LinkTag.vue
+++ b/src/components/tag/LinkTag.vue
@@ -18,7 +18,6 @@ interface TagProps {
   clickable?: boolean;
   closable?: boolean;
   disabled?: boolean;
-  tag?: Tag;
   className?: string;
 }
 
diff --git a/src/components/tag/Tag.vue b/src/components/tag/Tag.vue
index 5964e8f552620..44ae42e1f0498 100644
--- a/src/components/tag/Tag.vue
+++ b/src/components/tag/Tag.vue
@@ -19,7 +19,6 @@ interface TagProps {
   clickable?: boolean;
   closable?: boolean;
   disabled?: boolean;
-  tag?: Tag;
   className?: string;
 }
 
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
deleted file mode 100644
index 6b69e2dd458bb..0000000000000
--- a/src/components/tag/tag.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export interface TagProps {
-  label?: string;
-  tooltip?: string;
-  type?: BasicType;
-  color?: string;
-  backgroundColor?: string;
-  borderColor?: string;
-  icon?: Icon;
-  suffixIcon?: Icon;
-  size?: BasicSize;
-  spinning?: boolean;
-  width?: string;
-  effect?: BasicEffect;
-  clickable?: boolean;
-  closable?: boolean;
-  disabled?: boolean;
-  tag?: Tag;
-  className?: string;
-}
diff --git a/src/components/task/TaskCommand.vue b/src/components/task/TaskCommand.vue
index 7e02633350bbe..122de862b8b01 100644
--- a/src/components/task/TaskCommand.vue
+++ b/src/components/task/TaskCommand.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClTaskCommand' });
-import { computed, PropType } from 'vue';
-import { emptyObjectFunc } from '@/utils';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { TagProps } from '@/components/tag/tag';
 
 const props = defineProps<{
   task: Task;
diff --git a/src/components/task/TaskForm.vue b/src/components/task/TaskForm.vue
index fbcbe001ac8a6..793e41589980a 100644
--- a/src/components/task/TaskForm.vue
+++ b/src/components/task/TaskForm.vue
@@ -2,8 +2,8 @@
 defineOptions({ name: 'ClTaskForm' });
 import { computed, watch } from 'vue';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
-import useNode from '@/components/node/node';
+import useSpider from '@/components/spider/useSpider';
+import useNode from '@/components/node/useNode';
 import { TASK_MODE_SELECTED_NODES } from '@/constants/task';
 import useRequest from '@/services/request';
 import useTask from '@/components/task/useTask';
diff --git a/src/components/task/TaskPriority.vue b/src/components/task/TaskPriority.vue
index 6a3ab078fa417..a64d41b9f822a 100644
--- a/src/components/task/TaskPriority.vue
+++ b/src/components/task/TaskPriority.vue
@@ -2,7 +2,6 @@
 defineOptions({ name: 'ClTaskPriority' });
 import { computed } from 'vue';
 import { getPriorityLabel } from '@/utils/task';
-import { TagProps } from '@/components/tag/tag';
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/task/TaskResults.vue b/src/components/task/TaskResults.vue
index dd807e33ea431..85af6f2a71388 100644
--- a/src/components/task/TaskResults.vue
+++ b/src/components/task/TaskResults.vue
@@ -4,8 +4,6 @@ import { computed } from 'vue';
 import { isCancellable } from '@/utils/task';
 import { TASK_STATUS_PENDING } from '@/constants/task';
 import { useI18n } from 'vue-i18n';
-import { TaskStatus } from '@/components/task/task';
-import { TagProps } from '@/components/tag/tag';
 
 const props = defineProps<{
   results?: number;
diff --git a/src/components/task/TaskStatus.vue b/src/components/task/TaskStatus.vue
index cca062cd671a7..99baa95426651 100644
--- a/src/components/task/TaskStatus.vue
+++ b/src/components/task/TaskStatus.vue
@@ -10,8 +10,6 @@ import {
   TASK_STATUS_RUNNING,
 } from '@/constants/task';
 import { useI18n } from 'vue-i18n';
-import { TagProps } from '@/components/tag/tag';
-import { TaskStatus } from '@/components/task/task';
 
 const props = defineProps<{
   status: TaskStatus;
diff --git a/src/components/task/task.ts b/src/components/task/task.ts
deleted file mode 100644
index da2ab1630313c..0000000000000
--- a/src/components/task/task.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type TaskStatus =
-  | 'abnormal'
-  | 'cancelled'
-  | 'error'
-  | 'finished'
-  | 'running'
-  | 'pending';
diff --git a/src/components/task/useTask.ts b/src/components/task/useTask.ts
index 914eb3ac8022f..27e42e2009b51 100644
--- a/src/components/task/useTask.ts
+++ b/src/components/task/useTask.ts
@@ -4,7 +4,7 @@ import { Store } from 'vuex';
 import useForm from '@/components/form/useForm';
 import useTaskService from '@/services/task/taskService';
 import { getDefaultFormComponentData } from '@/utils/form';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import {
   getModeOptions,
   getModeOptionsDict,
diff --git a/src/components/user/CreateEditUserDialog.vue b/src/components/user/CreateEditUserDialog.vue
index ebc38e4daa575..d02a94a0c9541 100644
--- a/src/components/user/CreateEditUserDialog.vue
+++ b/src/components/user/CreateEditUserDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditUserDialog' });
 import { useStore } from 'vuex';
-import useUser from '@/components/user/user';
+import useUser from '@/components/user/useUser';
 
 // store
 const store = useStore();
diff --git a/src/components/user/UserForm.vue b/src/components/user/UserForm.vue
index d607b14a9b1cf..3c16e5f7a8cdc 100644
--- a/src/components/user/UserForm.vue
+++ b/src/components/user/UserForm.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { ROLE_ADMIN, ROLE_NORMAL } from '@/constants/user';
-import useUser from '@/components/user/user';
+import useUser from '@/components/user/useUser';
 import useUserDetail from '@/views/user/detail/useUserDetail';
 
 // i18n
diff --git a/src/components/user/user.ts b/src/components/user/useUser.ts
similarity index 91%
rename from src/components/user/user.ts
rename to src/components/user/useUser.ts
index e5363e8245604..9a9813fec7d96 100644
--- a/src/components/user/user.ts
+++ b/src/components/user/useUser.ts
@@ -3,11 +3,6 @@ import { Store } from 'vuex';
 import useForm from '@/components/form/useForm';
 import useUserService from '@/services/user/userService';
 import { getDefaultFormComponentData } from '@/utils/form';
-import {
-  FORM_FIELD_TYPE_INPUT,
-  FORM_FIELD_TYPE_INPUT_PASSWORD,
-  FORM_FIELD_TYPE_SELECT,
-} from '@/constants/form';
 import { getModeOptions } from '@/utils/task';
 import { ROLE_ADMIN, ROLE_NORMAL } from '@/constants/user';
 import { ElMessage, ElMessageBox } from 'element-plus';
@@ -29,7 +24,7 @@ const useUser = (store: Store<RootStoreState>) => {
   const modeOptions = getModeOptions();
 
   // form rules
-  const formRules = readonly<FormRules>({
+  const formRules: FormRules = {
     password: {
       trigger: 'blur',
       validator: (_, value: string, callback) => {
@@ -40,7 +35,7 @@ const useUser = (store: Store<RootStoreState>) => {
         return callback();
       },
     },
-  });
+  };
 
   // all user select options
   const allUserSelectOptions = computed<SelectOption[]>(() =>
@@ -75,7 +70,7 @@ const useUser = (store: Store<RootStoreState>) => {
     sendEvent('click_user_form_change_password');
 
     await store.dispatch(`${ns}/changePassword`, { id, password: value });
-    await ElMessage.success(t('common.message.success.save'));
+    ElMessage.success(t('common.message.success.save'));
   };
 
   const rolesOptions: SelectOption[] = [
diff --git a/src/directives/index.ts b/src/directives/index.ts
index f715b2cd89881..43ea20db2c4fa 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,7 +1,7 @@
-import auth from './auth/auth';
-import export_ from './export/export';
-import locate from './locate/locate';
-import track from './track/track';
+import * as auth from './auth/auth';
+import * as export_ from './export/export';
+import * as locate from './locate/locate';
+import * as track from './track/track';
 
 export {
   auth as auth,
diff --git a/src/interfaces/components/date/date.d.ts b/src/interfaces/components/date/date.d.ts
new file mode 100644
index 0000000000000..afbb7094ea176
--- /dev/null
+++ b/src/interfaces/components/date/date.d.ts
@@ -0,0 +1,22 @@
+import { Dayjs } from 'dayjs';
+
+export declare global {
+  interface DateRange {
+    start: Dayjs;
+    end: Dayjs;
+  }
+
+  interface RangeItem {
+    key: RangeItemKey;
+    value?: DateRange;
+  }
+
+  interface RangeItemOption extends SelectOption {
+    value?: RangeItem;
+  }
+
+  type RangeItemValue = RangeItemValueFunc | DateRange;
+  type RangeItemValueFunc = () => DateRange;
+  type RangeItemKey = 'custom' | string;
+  type RangePickerType = 'daterange' | 'datetimerange';
+}
diff --git a/src/interfaces/components/filter/FilterCondition.d.ts b/src/interfaces/components/filter/FilterCondition.d.ts
index 4ba986dbf503f..7e0971f5a3741 100644
--- a/src/interfaces/components/filter/FilterCondition.d.ts
+++ b/src/interfaces/components/filter/FilterCondition.d.ts
@@ -1,5 +1,7 @@
 export declare global {
-  interface FilterConditionProps {
-    condition?: FilterConditionData;
+  interface FilterConditionData {
+    key?: string;
+    op?: string;
+    value?: any;
   }
 }
diff --git a/src/interfaces/components/tag/tag.d.ts b/src/interfaces/components/tag/tag.d.ts
new file mode 100644
index 0000000000000..2c25ddc4938a2
--- /dev/null
+++ b/src/interfaces/components/tag/tag.d.ts
@@ -0,0 +1,20 @@
+export declare global {
+  interface TagProps {
+    label?: string;
+    tooltip?: string;
+    type?: BasicType;
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    icon?: Icon;
+    suffixIcon?: Icon;
+    size?: BasicSize;
+    spinning?: boolean;
+    width?: string;
+    effect?: BasicEffect;
+    clickable?: boolean;
+    closable?: boolean;
+    disabled?: boolean;
+    className?: string;
+  }
+}
diff --git a/src/interfaces/components/task/TaskCommand.d.ts b/src/interfaces/components/task/TaskCommand.d.ts
deleted file mode 100644
index 73101ac36d29d..0000000000000
--- a/src/interfaces/components/task/TaskCommand.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-interface TaskConfigProps {
-  task: Task;
-  spider?: Spider;
-  size?: BasicSize;
-}
diff --git a/src/interfaces/components/task/TaskMode.d.ts b/src/interfaces/components/task/TaskMode.d.ts
deleted file mode 100644
index b0f0af6197ba9..0000000000000
--- a/src/interfaces/components/task/TaskMode.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-interface TaskModeProps {
-  mode?: TaskMode;
-}
diff --git a/src/interfaces/components/task/TaskPriority.d.ts b/src/interfaces/components/task/TaskPriority.d.ts
deleted file mode 100644
index 9f854555d3499..0000000000000
--- a/src/interfaces/components/task/TaskPriority.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-interface TaskPriorityProps {
-  priority?: number;
-}
diff --git a/src/interfaces/models/index.d.ts b/src/interfaces/models/index.d.ts
index fb9964b511c48..293d001f7b19f 100644
--- a/src/interfaces/models/index.d.ts
+++ b/src/interfaces/models/index.d.ts
@@ -1,7 +1,6 @@
 export declare global {
   interface BaseModel {
     _id?: string;
-    tags?: Tag[];
 
     [field: string]: any;
   }
diff --git a/src/interfaces/models/tag.d.ts b/src/interfaces/models/tag.d.ts
deleted file mode 100644
index aa9dc92210b49..0000000000000
--- a/src/interfaces/models/tag.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export declare global {
-  interface Tag extends BaseModel {
-    name?: string;
-    color?: string;
-    col?: string;
-  }
-}
diff --git a/src/interfaces/views/task.d.ts b/src/interfaces/views/task.d.ts
index f77ffb4d66457..6ce71d3877434 100644
--- a/src/interfaces/views/task.d.ts
+++ b/src/interfaces/views/task.d.ts
@@ -3,9 +3,8 @@ import {
   TASK_MODE_RANDOM,
   TASK_MODE_SELECTED_NODES,
 } from '@/constants/task';
-import { TaskStatus } from '@/components/task/task';
 
-declare global {
+export declare global {
   interface Task extends BaseModel {
     spider_id?: string;
     spider_name?: string;
@@ -43,4 +42,12 @@ declare global {
     | TASK_MODE_RANDOM
     | TASK_MODE_ALL_NODES
     | TASK_MODE_SELECTED_NODES;
+
+  type TaskStatus =
+    | 'abnormal'
+    | 'cancelled'
+    | 'error'
+    | 'finished'
+    | 'running'
+    | 'pending';
 }
diff --git a/src/layouts/content/index.ts b/src/layouts/content/index.ts
index 2f5594fcefada..7985f65a6a7c5 100644
--- a/src/layouts/content/index.ts
+++ b/src/layouts/content/index.ts
@@ -1,4 +1,4 @@
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import useDetail from '@/layouts/content/detail/useDetail';
 
 export { useList, useDetail };
diff --git a/src/layouts/content/list/list.ts b/src/layouts/content/list/useList.ts
similarity index 98%
rename from src/layouts/content/list/list.ts
rename to src/layouts/content/list/useList.ts
index 9a64f2f87f4d9..fd2dce06e59cb 100644
--- a/src/layouts/content/list/list.ts
+++ b/src/layouts/content/list/useList.ts
@@ -92,7 +92,7 @@ const useList = <T = any>(
       );
       sendEvent('click_list_layout_actions_delete_confirm', { ns });
       await store.dispatch(`${ns}/deleteById`, row._id);
-      await ElMessage.success(t('common.message.success.delete'));
+      ElMessage.success(t('common.message.success.delete'));
       await store.dispatch(`${ns}/getList`);
     },
     onHeaderChange: async (column, sort, filter) => {
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 9eedbd2933c3d..b16c1b0dee19c 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,23 +1,27 @@
 import BlankLayout from './BlankLayout.vue';
+import NormalLayout from './NormalLayout.vue';
 import Header from './components/Header.vue';
 import Sidebar from './components/Sidebar.vue';
 import SidebarItem from './components/SidebarItem.vue';
 import TabsView from './components/TabsView.vue';
 import DetailLayout from './content/detail/DetailLayout.vue';
+import useDetail from './content/detail/useDetail';
 import ListLayout from './content/list/ListLayout.vue';
+import useList from './content/list/useList';
 import SidebarLayout from './content/sidebar/SidebarLayout.vue';
 import SimpleLayout from './content/simple/SimpleLayout.vue';
-import NormalLayout from './NormalLayout.vue';
 
 export {
   BlankLayout as ClBlankLayout,
+  NormalLayout as ClNormalLayout,
   Header as ClHeader,
   Sidebar as ClSidebar,
   SidebarItem as ClSidebarItem,
   TabsView as ClTabsView,
   DetailLayout as ClDetailLayout,
+  useDetail as useDetail,
   ListLayout as ClListLayout,
+  useList as useList,
   SidebarLayout as ClSidebarLayout,
   SimpleLayout as ClSimpleLayout,
-  NormalLayout as ClNormalLayout,
 };
diff --git a/src/package/make-installer.ts b/src/package/make-installer.ts
index b03ac740768f0..7506f49c20c80 100644
--- a/src/package/make-installer.ts
+++ b/src/package/make-installer.ts
@@ -12,6 +12,8 @@ import '@/styles/index.scss';
 // fontawesome
 library.add(fab, far, fas);
 
+const COMPONENT_PREFIX = 'Cl';
+
 const makeInstaller = (
   items: [string, ComponentOptionsMixin][] = []
 ): Plugin => {
@@ -33,6 +35,7 @@ const makeInstaller = (
 
     // install components
     items.forEach(([name, component]) => {
+      if (!name.startsWith(COMPONENT_PREFIX)) return;
       component.name = name;
       app.component(`${name}`, component);
     });
diff --git a/src/utils/task.ts b/src/utils/task.ts
index ebe32357039d3..89560415e986f 100644
--- a/src/utils/task.ts
+++ b/src/utils/task.ts
@@ -9,7 +9,6 @@ import {
   TASK_STATUS_RUNNING,
 } from '@/constants/task';
 import { translate } from '@/utils/i18n';
-import { TaskStatus } from '@/components/task/task';
 
 const t = translate;
 
diff --git a/src/views/deps/task/DependencyTaskList.vue b/src/views/deps/task/DependencyTaskList.vue
index e819c62ffa5f8..68726b9267d5b 100644
--- a/src/views/deps/task/DependencyTaskList.vue
+++ b/src/views/deps/task/DependencyTaskList.vue
@@ -16,7 +16,6 @@ import NodeType from '@/components/node/NodeType.vue';
 import TaskStatusComp from '@/components/task/TaskStatus.vue';
 import Tag from '@/components/tag/Tag.vue';
 import Time from '@/components/time/Time.vue';
-import { TaskStatus } from '@/components/task/task';
 
 const t = translate;
 
diff --git a/src/views/git/detail/actions/GitDetailActionsSpiders.vue b/src/views/git/detail/actions/GitDetailActionsSpiders.vue
index 8d5289e3177be..448008b25c6b3 100644
--- a/src/views/git/detail/actions/GitDetailActionsSpiders.vue
+++ b/src/views/git/detail/actions/GitDetailActionsSpiders.vue
@@ -6,7 +6,7 @@ import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import { translate } from '@/utils';
 import useGitDetail from '@/views/git/detail/useGitDetail';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import ClCreateGitSpiderDialog from '@/components/git/CreateGitSpiderDialog.vue';
 
 const t = translate;
diff --git a/src/views/git/detail/tabs/GitDetailTabChanges.vue b/src/views/git/detail/tabs/GitDetailTabChanges.vue
index 4374d1853c69b..8dad97b37992a 100644
--- a/src/views/git/detail/tabs/GitDetailTabChanges.vue
+++ b/src/views/git/detail/tabs/GitDetailTabChanges.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClGitDetailTabChanges' });
-import { computed, h, ref, watch, onBeforeMount, onMounted } from 'vue';
+import { computed, h, ref, watch, onBeforeMount } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import GitFileStatus from '@/components/git/GitFileStatus.vue';
-import Tag, { TagProps } from '@/components/tag/Tag.vue';
+import Tag from '@/components/tag/Tag.vue';
 import Table from '@/components/table/Table.vue';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 import { debounce, translate } from '@/utils';
@@ -121,7 +121,7 @@ const tableColumns = computed<TableColumns<GitChange>>(() => {
                 changes: [row],
               });
               await store.dispatch(`${ns}/getChanges`, { id: activeId.value });
-            } catch (e) {
+            } catch (e: any) {
               ElMessage.error(e.message);
             }
           },
@@ -138,7 +138,7 @@ const tableColumns = computed<TableColumns<GitChange>>(() => {
                 changes: [row],
               });
               await store.dispatch(`${ns}/getChanges`, { id: activeId.value });
-            } catch (e) {
+            } catch (e: any) {
               ElMessage.error(e.message);
             }
           },
diff --git a/src/views/index.ts b/src/views/index.ts
index 4cc4f4297bffb..ac405017fb9e5 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -12,19 +12,24 @@ import LogsView from './deps/task/LogsView.vue';
 import TaskAction from './deps/task/TaskAction.vue';
 import DataSourceDetail from './ds/detail/DataSourceDetail.vue';
 import DataSourceDetailTabOverview from './ds/detail/tabs/DataSourceDetailTabOverview.vue';
+import useDataSourceDetail from './ds/detail/useDataSourceDetail';
 import DataSourceList from './ds/list/DataSourceList.vue';
+import useDataSourceList from './ds/list/useDataSourceList';
 import EnvironmentList from './environment/list/EnvironmentList.vue';
+import useEnvironmentList from './environment/list/useEnvironmentList';
+import GitDetail from './git/detail/GitDetail.vue';
 import GitDetailActionsChanges from './git/detail/actions/GitDetailActionsChanges.vue';
 import GitDetailActionsCommon from './git/detail/actions/GitDetailActionsCommon.vue';
 import GitDetailActionsFiles from './git/detail/actions/GitDetailActionsFiles.vue';
 import GitDetailActionsSpiders from './git/detail/actions/GitDetailActionsSpiders.vue';
-import GitDetail from './git/detail/GitDetail.vue';
 import GitDetailTabChanges from './git/detail/tabs/GitDetailTabChanges.vue';
 import GitDetailTabFiles from './git/detail/tabs/GitDetailTabFiles.vue';
 import GitDetailTabLogs from './git/detail/tabs/GitDetailTabLogs.vue';
 import GitDetailTabOverview from './git/detail/tabs/GitDetailTabOverview.vue';
 import GitDetailTabSpiders from './git/detail/tabs/GitDetailTabSpiders.vue';
+import useGitDetail from './git/detail/useGitDetail';
 import GitList from './git/list/GitList.vue';
+import useGitList from './git/list/useGitList';
 import Home from './home/Home.vue';
 import Login from './login/Login.vue';
 import Disclaimer from './misc/Disclaimer.vue';
@@ -33,44 +38,57 @@ import NodeDetail from './node/detail/NodeDetail.vue';
 import NodeDetailTabOverview from './node/detail/tabs/NodeDetailTabOverview.vue';
 import NodeDetailTabTasks from './node/detail/tabs/NodeDetailTabTasks.vue';
 import NodeList from './node/list/NodeList.vue';
+import useNodeList from './node/list/useNodeList';
 import NotificationDetail from './notification/detail/NotificationDetail.vue';
 import NotificationDetailTabOverview from './notification/detail/tabs/NotificationDetailTabOverview.vue';
 import NotificationDetailTabTemplate from './notification/detail/tabs/NotificationDetailTabTemplate.vue';
 import NotificationDetailTabTriggers from './notification/detail/tabs/NotificationDetailTabTriggers.vue';
+import useNotificationDetail from './notification/detail/useNotificationDetail';
 import NotificationList from './notification/list/NotificationList.vue';
+import useNotificationList from './notification/list/useNotificationList';
 import ProjectDetail from './project/detail/ProjectDetail.vue';
 import ProjectDetailTabOverview from './project/detail/tabs/ProjectDetailTabOverview.vue';
 import ProjectDetailTabSpiders from './project/detail/tabs/ProjectDetailTabSpiders.vue';
 import ProjectList from './project/list/ProjectList.vue';
+import useProjectList from './project/list/useProjectList';
 import ScheduleDetail from './schedule/detail/ScheduleDetail.vue';
 import ScheduleDetailTabOverview from './schedule/detail/tabs/ScheduleDetailTabOverview.vue';
 import ScheduleDetailTabTasks from './schedule/detail/tabs/ScheduleDetailTabTasks.vue';
+import useScheduleDetail from './schedule/detail/useScheduleDetail';
 import ScheduleList from './schedule/list/ScheduleList.vue';
+import useScheduleList from './schedule/list/useScheduleList';
+import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailActionsCommon from './spider/detail/actions/SpiderDetailActionsCommon.vue';
 import SpiderDetailActionsData from './spider/detail/actions/SpiderDetailActionsData.vue';
 import SpiderDetailActionsDataSource from './spider/detail/actions/SpiderDetailActionsDataSource.vue';
 import SpiderDetailActionsFiles from './spider/detail/actions/SpiderDetailActionsFiles.vue';
-import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailTabData from './spider/detail/tabs/SpiderDetailTabData.vue';
 import SpiderDetailTabFiles from './spider/detail/tabs/SpiderDetailTabFiles.vue';
 import SpiderDetailTabOverview from './spider/detail/tabs/SpiderDetailTabOverview.vue';
 import SpiderDetailTabSchedules from './spider/detail/tabs/SpiderDetailTabSchedules.vue';
 import SpiderDetailTabSettings from './spider/detail/tabs/SpiderDetailTabSettings.vue';
 import SpiderDetailTabTasks from './spider/detail/tabs/SpiderDetailTabTasks.vue';
+import useSpiderDetail from './spider/detail/useSpiderDetail';
 import SpiderList from './spider/list/SpiderList.vue';
+import useSpiderList from './spider/list/useSpiderList';
 import SystemDetail from './system/detail/SystemDetail.vue';
+import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskDetailActionsCommon from './task/detail/actions/TaskDetailActionsCommon.vue';
 import TaskDetailActionsData from './task/detail/actions/TaskDetailActionsData.vue';
 import TaskDetailActionsLogs from './task/detail/actions/TaskDetailActionsLogs.vue';
 import TaskDetailTabData from './task/detail/tabs/TaskDetailTabData.vue';
 import TaskDetailTabLogs from './task/detail/tabs/TaskDetailTabLogs.vue';
 import TaskDetailTabOverview from './task/detail/tabs/TaskDetailTabOverview.vue';
-import TaskDetail from './task/detail/TaskDetail.vue';
+import useTaskDetail from './task/detail/useTaskDetail';
 import TaskList from './task/list/TaskList.vue';
+import useTaskList from './task/list/useTaskList';
 import TokenList from './token/list/TokenList.vue';
-import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
+import useTokenList from './token/list/useTokenList';
 import UserDetail from './user/detail/UserDetail.vue';
+import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
+import useUserDetail from './user/detail/useUserDetail';
 import UserList from './user/list/UserList.vue';
+import useUserList from './user/list/useUserList';
 
 export {
   ResultList as ClResultList,
@@ -87,19 +105,24 @@ export {
   TaskAction as ClTaskAction,
   DataSourceDetail as ClDataSourceDetail,
   DataSourceDetailTabOverview as ClDataSourceDetailTabOverview,
+  useDataSourceDetail as useDataSourceDetail,
   DataSourceList as ClDataSourceList,
+  useDataSourceList as useDataSourceList,
   EnvironmentList as ClEnvironmentList,
+  useEnvironmentList as useEnvironmentList,
+  GitDetail as ClGitDetail,
   GitDetailActionsChanges as ClGitDetailActionsChanges,
   GitDetailActionsCommon as ClGitDetailActionsCommon,
   GitDetailActionsFiles as ClGitDetailActionsFiles,
   GitDetailActionsSpiders as ClGitDetailActionsSpiders,
-  GitDetail as ClGitDetail,
   GitDetailTabChanges as ClGitDetailTabChanges,
   GitDetailTabFiles as ClGitDetailTabFiles,
   GitDetailTabLogs as ClGitDetailTabLogs,
   GitDetailTabOverview as ClGitDetailTabOverview,
   GitDetailTabSpiders as ClGitDetailTabSpiders,
+  useGitDetail as useGitDetail,
   GitList as ClGitList,
+  useGitList as useGitList,
   Home as ClHome,
   Login as ClLogin,
   Disclaimer as ClDisclaimer,
@@ -108,42 +131,55 @@ export {
   NodeDetailTabOverview as ClNodeDetailTabOverview,
   NodeDetailTabTasks as ClNodeDetailTabTasks,
   NodeList as ClNodeList,
+  useNodeList as useNodeList,
   NotificationDetail as ClNotificationDetail,
   NotificationDetailTabOverview as ClNotificationDetailTabOverview,
   NotificationDetailTabTemplate as ClNotificationDetailTabTemplate,
   NotificationDetailTabTriggers as ClNotificationDetailTabTriggers,
+  useNotificationDetail as useNotificationDetail,
   NotificationList as ClNotificationList,
+  useNotificationList as useNotificationList,
   ProjectDetail as ClProjectDetail,
   ProjectDetailTabOverview as ClProjectDetailTabOverview,
   ProjectDetailTabSpiders as ClProjectDetailTabSpiders,
   ProjectList as ClProjectList,
+  useProjectList as useProjectList,
   ScheduleDetail as ClScheduleDetail,
   ScheduleDetailTabOverview as ClScheduleDetailTabOverview,
   ScheduleDetailTabTasks as ClScheduleDetailTabTasks,
+  useScheduleDetail as useScheduleDetail,
   ScheduleList as ClScheduleList,
+  useScheduleList as useScheduleList,
+  SpiderDetail as ClSpiderDetail,
   SpiderDetailActionsCommon as ClSpiderDetailActionsCommon,
   SpiderDetailActionsData as ClSpiderDetailActionsData,
   SpiderDetailActionsDataSource as ClSpiderDetailActionsDataSource,
   SpiderDetailActionsFiles as ClSpiderDetailActionsFiles,
-  SpiderDetail as ClSpiderDetail,
   SpiderDetailTabData as ClSpiderDetailTabData,
   SpiderDetailTabFiles as ClSpiderDetailTabFiles,
   SpiderDetailTabOverview as ClSpiderDetailTabOverview,
   SpiderDetailTabSchedules as ClSpiderDetailTabSchedules,
   SpiderDetailTabSettings as ClSpiderDetailTabSettings,
   SpiderDetailTabTasks as ClSpiderDetailTabTasks,
+  useSpiderDetail as useSpiderDetail,
   SpiderList as ClSpiderList,
+  useSpiderList as useSpiderList,
   SystemDetail as ClSystemDetail,
+  TaskDetail as ClTaskDetail,
   TaskDetailActionsCommon as ClTaskDetailActionsCommon,
   TaskDetailActionsData as ClTaskDetailActionsData,
   TaskDetailActionsLogs as ClTaskDetailActionsLogs,
   TaskDetailTabData as ClTaskDetailTabData,
   TaskDetailTabLogs as ClTaskDetailTabLogs,
   TaskDetailTabOverview as ClTaskDetailTabOverview,
-  TaskDetail as ClTaskDetail,
+  useTaskDetail as useTaskDetail,
   TaskList as ClTaskList,
+  useTaskList as useTaskList,
   TokenList as ClTokenList,
-  UserDetailTabOverview as ClUserDetailTabOverview,
+  useTokenList as useTokenList,
   UserDetail as ClUserDetail,
+  UserDetailTabOverview as ClUserDetailTabOverview,
+  useUserDetail as useUserDetail,
   UserList as ClUserList,
+  useUserList as useUserList,
 };
diff --git a/src/views/misc/MySettings.vue b/src/views/misc/MySettings.vue
index a72b933a79fd9..438893e244145 100644
--- a/src/views/misc/MySettings.vue
+++ b/src/views/misc/MySettings.vue
@@ -3,7 +3,7 @@ defineOptions({ name: 'ClMySettings' });
 import { onBeforeMount, ref } from 'vue';
 import { useStore } from 'vuex';
 import { plainClone } from '@/utils/object';
-import useUser from '@/components/user/user';
+import useUser from '@/components/user/useUser';
 import { ROLE_ADMIN, ROLE_NORMAL } from '@/constants/user';
 import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
diff --git a/src/views/node/list/useNodeList.ts b/src/views/node/list/useNodeList.ts
index 64a10be231639..8c57e043726b7 100644
--- a/src/views/node/list/useNodeList.ts
+++ b/src/views/node/list/useNodeList.ts
@@ -5,7 +5,7 @@ import {
   onListFilterChangeByKey,
   setupListComponent,
 } from '@/utils/list';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import NodeType from '@/components/node/NodeType.vue';
 import {
   TABLE_COLUMN_NAME_ACTIONS,
diff --git a/src/views/notification/list/useNotificationList.ts b/src/views/notification/list/useNotificationList.ts
index efcb19067fce3..b42814c399249 100644
--- a/src/views/notification/list/useNotificationList.ts
+++ b/src/views/notification/list/useNotificationList.ts
@@ -1,6 +1,6 @@
 import { computed, h } from 'vue';
 import { useStore } from 'vuex';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import NavLink from '@/components/nav/NavLink.vue';
 import { useRouter } from 'vue-router';
 import { translate } from '@/utils/i18n';
diff --git a/src/views/project/list/useProjectList.ts b/src/views/project/list/useProjectList.ts
index 2b2b2d433a5c9..db8d17f5e4d0b 100644
--- a/src/views/project/list/useProjectList.ts
+++ b/src/views/project/list/useProjectList.ts
@@ -1,7 +1,7 @@
 import { computed, h } from 'vue';
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
 import { useStore } from 'vuex';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import NavLink from '@/components/nav/NavLink.vue';
 import { useRouter } from 'vue-router';
 import { TAB_NAME_SPIDERS } from '@/constants/tab';
diff --git a/src/views/schedule/list/useScheduleList.ts b/src/views/schedule/list/useScheduleList.ts
index cc439386e9acf..262a0e9c53191 100644
--- a/src/views/schedule/list/useScheduleList.ts
+++ b/src/views/schedule/list/useScheduleList.ts
@@ -2,14 +2,14 @@ import { computed, h } from 'vue';
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
 import { useStore } from 'vuex';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import NavLink from '@/components/nav/NavLink.vue';
 import { useRouter } from 'vue-router';
 import { onListFilterChangeByKey, setupListComponent } from '@/utils/list';
 import TaskMode from '@/components/task/TaskMode.vue';
 import ScheduleCron from '@/components/schedule/ScheduleCron.vue';
 import Switch from '@/components/switch/Switch.vue';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import useTask from '@/components/task/useTask';
 import { translate } from '@/utils/i18n';
 import { sendEvent } from '@/admin/umeng';
@@ -213,7 +213,7 @@ const useScheduleList = () => {
           icon: ['fa', 'cog'],
           width: '160',
           value: (row: Schedule) => {
-            return h(TaskMode, { mode: row.mode } as TaskModeProps);
+            return h(TaskMode, { mode: row.mode });
           },
           hasFilter: true,
           allowFilterItems: true,
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsCommon.vue b/src/views/spider/detail/actions/SpiderDetailActionsCommon.vue
index 0c26cfdb9f7c9..fc58220b20e94 100644
--- a/src/views/spider/detail/actions/SpiderDetailActionsCommon.vue
+++ b/src/views/spider/detail/actions/SpiderDetailActionsCommon.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClSpiderDetailActionsCommon' });
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import { useI18n } from 'vue-i18n';
 import { sendEvent } from '@/admin/umeng';
 
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsDataSource.vue b/src/views/spider/detail/actions/SpiderDetailActionsDataSource.vue
index e188322105e51..c6b494f5565c8 100644
--- a/src/views/spider/detail/actions/SpiderDetailActionsDataSource.vue
+++ b/src/views/spider/detail/actions/SpiderDetailActionsDataSource.vue
@@ -6,7 +6,7 @@ import { getStore } from '@/store';
 import { translate } from '@/utils';
 import useRequest from '@/services/request';
 import useDataSource from '@/components/ds/useDataSource';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 
 const { get, post } = useRequest();
 
diff --git a/src/views/spider/detail/tabs/SpiderDetailTabData.vue b/src/views/spider/detail/tabs/SpiderDetailTabData.vue
index 77cb8691e76c1..6b13e52de3776 100644
--- a/src/views/spider/detail/tabs/SpiderDetailTabData.vue
+++ b/src/views/spider/detail/tabs/SpiderDetailTabData.vue
@@ -2,7 +2,7 @@
 defineOptions({ name: 'ClSpiderDetailTabData' });
 import { computed } from 'vue';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 
 // store
 const store = useStore();
diff --git a/src/views/spider/list/useSpiderList.ts b/src/views/spider/list/useSpiderList.ts
index 12d446edadf71..f9193648c918b 100644
--- a/src/views/spider/list/useSpiderList.ts
+++ b/src/views/spider/list/useSpiderList.ts
@@ -3,12 +3,12 @@ import { useStore } from 'vuex';
 import { computed, h } from 'vue';
 import TaskStatus from '@/components/task/TaskStatus.vue';
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import NavLink from '@/components/nav/NavLink.vue';
 import Time from '@/components/time/Time.vue';
 import SpiderStat from '@/components/spider/SpiderStat.vue';
 import { onListFilterChangeByKey, setupListComponent } from '@/utils/list';
-import useProject from '@/components/project/project';
+import useProject from '@/components/project/useProject';
 import { translate } from '@/utils/i18n';
 import { sendEvent } from '@/admin/umeng';
 import {
diff --git a/src/views/task/detail/actions/TaskDetailActionsData.vue b/src/views/task/detail/actions/TaskDetailActionsData.vue
index 0b5c75fc8fe31..8c7dfab2240d2 100644
--- a/src/views/task/detail/actions/TaskDetailActionsData.vue
+++ b/src/views/task/detail/actions/TaskDetailActionsData.vue
@@ -3,7 +3,7 @@ defineOptions({ name: 'ClTaskDetailActionsData' });
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import useSpider from '@/components/spider/spider';
+import useSpider from '@/components/spider/useSpider';
 import useRequest from '@/services/request';
 import { FILTER_OP_EQUAL } from '@/constants';
 import { inferDataFieldTypes } from '@/utils/dataFields';
diff --git a/src/views/task/list/useTaskList.ts b/src/views/task/list/useTaskList.ts
index a0283c0157138..5f7bdb77a6d40 100644
--- a/src/views/task/list/useTaskList.ts
+++ b/src/views/task/list/useTaskList.ts
@@ -3,7 +3,7 @@ import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import { onListFilterChangeByKey, setupListComponent } from '@/utils/list';
 import { translate } from '@/utils/i18n';
 import { sendEvent } from '@/admin/umeng';
@@ -16,8 +16,8 @@ import NodeType from '@/components/node/NodeType.vue';
 import Time from '@/components/time/Time.vue';
 import Duration from '@/components/time/Duration.vue';
 import TaskResults from '@/components/task/TaskResults.vue';
-import useNode from '@/components/node/node';
-import useSpider from '@/components/spider/spider';
+import useNode from '@/components/node/useNode';
+import useSpider from '@/components/spider/useSpider';
 import useTask from '@/components/task/useTask';
 import useSchedule from '@/components/schedule/useSchedule';
 import TaskCommand from '@/components/task/TaskCommand.vue';
@@ -35,7 +35,6 @@ import {
   FILTER_OP_CONTAINS,
   FILTER_OP_EQUAL,
 } from '@/constants';
-import { TaskStatus } from '@/components/task/task';
 
 const { post } = useRequest();
 
@@ -280,7 +279,7 @@ const useTaskList = () => {
           value: (row: Task) => {
             return h(TaskPriority, {
               priority: row.priority,
-            } as TaskPriorityProps);
+            });
           },
           hasSort: true,
           hasFilter: true,
@@ -297,7 +296,7 @@ const useTaskList = () => {
               task: row,
               spider: allSpiderDict.value?.get(row.spider_id as string),
               size: 'small',
-            } as TaskConfigProps);
+            });
           },
         },
         {
diff --git a/src/views/token/list/useTokenList.ts b/src/views/token/list/useTokenList.ts
index 70edce9e7c62b..81f8b60e4f758 100644
--- a/src/views/token/list/useTokenList.ts
+++ b/src/views/token/list/useTokenList.ts
@@ -1,4 +1,4 @@
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
diff --git a/src/views/user/list/useUserList.ts b/src/views/user/list/useUserList.ts
index b9958121caa34..6cf2445dd06b6 100644
--- a/src/views/user/list/useUserList.ts
+++ b/src/views/user/list/useUserList.ts
@@ -1,7 +1,7 @@
 import { computed, h } from 'vue';
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
 import { useStore } from 'vuex';
-import useList from '@/layouts/content/list/list';
+import useList from '@/layouts/content/list/useList';
 import NavLink from '@/components/nav/NavLink.vue';
 import { useRouter } from 'vue-router';
 import UserRole from '@/components/user/UserRole.vue';
@@ -19,7 +19,7 @@ import {
   FILTER_OP_EQUAL,
 } from '@/constants';
 import { onListFilterChangeByKey } from '@/utils';
-import useUser from '@/components/user/user';
+import useUser from '@/components/user/useUser';
 
 // i18n
 const t = translate;