feat: added delete git spider

crawlab-team · Nov 19, 2024 · 8979bca · 8979bca
1 parent 2814ef0
commit 8979bca
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 47 deletions.
diff --git a/src/components/core/git/CreateGitSpiderDialog.vue b/src/components/core/git/CreateGitSpiderDialog.vue
@@ -15,6 +15,7 @@ const nsGit: ListStoreNamespace = 'git';
 const nsSpider: ListStoreNamespace = 'spider';
 const store = useStore<RootStoreState>();
 const { git: gitState, spider: spiderState } = store.state as RootStoreState;
+
 const { activeId } = useGitDetail();
 
 const formRef = ref();
@@ -50,6 +51,7 @@ const onConfirm = async () => {
         </span>
       </>
     );
+    await store.dispatch(`${nsSpider}/getAllList`, { id: activeId.value });
   } catch (e) {
     ElMessage.error((e as Error).message);
   } finally {

diff --git a/src/components/ui/file/FileEditor.vue b/src/components/ui/file/FileEditor.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   defaultExpandedKeys: string[];
   navMenuLoading?: boolean;
 }>();
+
 const emit = defineEmits<{
   (e: 'content-change', item: string): void;
   (e: 'node-click', item: FileNavItem): void;
@@ -28,6 +29,7 @@ const emit = defineEmits<{
   (e: 'ctx-menu-clone', item: FileNavItem, name: string): void;
   (e: 'ctx-menu-delete', item: FileNavItem): void;
   (e: 'ctx-menu-create-spider', item: FileNavItem): void;
+  (e: 'ctx-menu-delete-spider', item: FileNavItem): void;
   (e: 'tab-click', tab: FileNavItem): void;
   (e: 'save-file', item: FileNavItem): void;
   (e: 'drop-files', files: InputFile[]): void;
@@ -209,6 +211,10 @@ const onContextMenuCreateSpider = (item: FileNavItem) => {
   emit('ctx-menu-create-spider', item);
 };
 
+const onContextMenuDeleteSpider = (item: FileNavItem) => {
+  emit('ctx-menu-delete-spider', item);
+};
+
 const onContentChange = (content: string) => {
   if (!activeFileItem.value) return;
   emit('content-change', content);
@@ -364,6 +370,7 @@ defineOptions({ name: 'ClFileEditor' });
       @ctx-menu-clone="onContextMenuClone"
       @ctx-menu-delete="onContextMenuDelete"
       @ctx-menu-create-spider="onContextMenuCreateSpider"
+      @ctx-menu-delete-spider="onContextMenuDeleteSpider"
       @drop-files="onDropFiles"
       @search="onFileSearch"
       @toggle-nav-menu="onToggleNavMenu"

diff --git a/src/components/ui/file/FileEditorNavMenu.vue b/src/components/ui/file/FileEditorNavMenu.vue
@@ -37,6 +37,7 @@ const emit = defineEmits<{
   (e: 'ctx-menu-clone', item: FileNavItem, name: string): void;
   (e: 'ctx-menu-delete', item: FileNavItem): void;
   (e: 'ctx-menu-create-spider', item: FileNavItem): void;
+  (e: 'ctx-menu-delete-spider', item: FileNavItem): void;
   (e: 'node-drop', draggingItem: FileNavItem, dropItem: FileNavItem): void;
   (e: 'drop-files', files: InputFile[]): void;
   (e: 'search', value: string): void;
@@ -226,6 +227,10 @@ const onNodeContextMenuCreateSpider = async (item: FileNavItem) => {
   emit('ctx-menu-create-spider', item);
 };
 
+const onNodeContextMenuDeleteSpider = async (item: FileNavItem) => {
+  emit('ctx-menu-delete-spider', item);
+};
+
 const onNodeDragEnter = (_: Node, dropNode: Node) => {
   const item = dropNode.data as FileNavItem;
   if (!item.path) return;
@@ -451,6 +456,7 @@ defineOptions({ name: 'ClFileEditorNavMenu' });
             @clone="onNodeContextMenuClone(data)"
             @delete="onNodeContextMenuDelete(data)"
             @create-spider="onNodeContextMenuCreateSpider(data)"
+            @delete-spider="onNodeContextMenuDeleteSpider(data)"
           >
             <div
               v-bind="getBindDir(data)"
@@ -481,12 +487,7 @@ defineOptions({ name: 'ClFileEditorNavMenu' });
                   {{ data.name }}
                 </span>
               </div>
-            </div>
-            <template v-if="highlightTagFn?.(data)">
-              <el-tooltip
-                :content="highlightTagFn?.(data)?.tooltip"
-                :disabled="!highlightTagFn?.(data)?.tooltip"
-              >
+              <template v-if="highlightTagFn?.(data)">
                 <div
                   class="nav-item-suffix"
                   @click="
@@ -496,13 +497,20 @@ defineOptions({ name: 'ClFileEditorNavMenu' });
                     }
                   "
                 >
-                  <cl-icon
-                    :icon="highlightTagFn?.(data)?.icon"
-                    :color="highlightTagFn?.(data)?.color"
-                  />
+                  <el-tooltip
+                    :content="highlightTagFn?.(data)?.tooltip"
+                    :disabled="!highlightTagFn?.(data)?.tooltip"
+                  >
+                    <span class="icon-wrapper">
+                      <cl-icon
+                        :icon="highlightTagFn?.(data)?.icon"
+                        :color="highlightTagFn?.(data)?.color"
+                      />
+                    </span>
+                  </el-tooltip>
                 </div>
-              </el-tooltip>
-            </template>
+              </template>
+            </div>
           </cl-file-editor-nav-menu-context-menu>
         </template>
       </el-tree-v2>
@@ -598,16 +606,21 @@ defineOptions({ name: 'ClFileEditorNavMenu' });
               margin-right: 5px;
             }
           }
-        }
 
-        .nav-item-suffix {
-          position: absolute;
-          height: 100%;
-          top: 0;
-          right: 10px;
-          display: flex;
-          align-items: center;
-          z-index: 100;
+          .nav-item-suffix {
+            position: absolute;
+            height: 100%;
+            top: 0;
+            right: 10px;
+            display: flex;
+            align-items: center;
+            z-index: 1000;
+            pointer-events: auto;
+
+            & * {
+              pointer-events: auto;
+            }
+          }
         }
       }
     }
@@ -644,4 +657,9 @@ defineOptions({ name: 'ClFileEditorNavMenu' });
 .file-editor-nav-menu:deep(.el-tree .el-tree-node *) {
   transition: none;
 }
+
+.file-editor-nav-menu:deep(.el-tree .el-tree-node .icon .atom-material-icon) {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/src/components/ui/file/FileEditorNavMenuContextMenu.vue b/src/components/ui/file/FileEditorNavMenuContextMenu.vue
@@ -20,6 +20,7 @@ const emit = defineEmits<{
   (e: 'clone'): void;
   (e: 'delete'): void;
   (e: 'create-spider'): void;
+  (e: 'delete-spider'): void;
 }>();
 
 const t = translate;
@@ -76,6 +77,12 @@ const items = computed<ContextMenuItem[]>(() => {
         className: 'delete',
         action: () => emit('delete'),
       },
+      {
+        title: t('components.file.editor.navMenu.deleteSpider'),
+        icon: ['fa', 'trash'],
+        className: 'delete-spider',
+        action: () => emit('delete-spider'),
+      },
     ] as ContextMenuItem[]
   ).filter(item =>
     contextMenuItemVisibleFn ? contextMenuItemVisibleFn(item, activeItem) : true

diff --git a/src/components/ui/file/FileTab.vue b/src/components/ui/file/FileTab.vue
@@ -20,6 +20,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'file-change', value: string): void;
   (e: 'create-spider', item: FileNavItem): void;
+  (e: 'delete-spider', item: FileNavItem): void;
 }>();
 
 // i18n
@@ -171,6 +172,10 @@ const onContextMenuCreateSpider = async (item: FileNavItem) => {
   emit('create-spider', item);
 };
 
+const onContextMenuDeleteSpider = async (item: FileNavItem) => {
+  emit('delete-spider', item);
+};
+
 const onContentChange = (value: string) => {
   const { ns } = props;
   store.commit(`${ns}/setFileContent`, value);
@@ -241,6 +246,7 @@ onBeforeUnmount(() => {
   store.commit(`${ns}/resetDefaultFilePaths`);
   store.commit(`${ns}/resetFileNavItems`);
 });
+
 defineOptions({ name: 'ClFileTab' });
 </script>
 
@@ -264,6 +270,7 @@ defineOptions({ name: 'ClFileTab' });
     @ctx-menu-clone="onContextMenuClone"
     @ctx-menu-delete="onContextMenuDelete"
     @ctx-menu-create-spider="onContextMenuCreateSpider"
+    @ctx-menu-delete-spider="onContextMenuDeleteSpider"
     @drop-files="onDropFiles"
     @create-with-ai="onCreateWithAi"
     @tab-click="onTabClick"

diff --git a/src/i18n/lang/en/components/file.ts b/src/i18n/lang/en/components/file.ts
@@ -14,6 +14,7 @@ const file: LComponentsFile = {
       duplicate: 'Duplicate',
       delete: 'Delete',
       createSpider: 'Create Spider',
+      deleteSpider: 'Delete Spider',
     },
     sidebar: {
       search: {

diff --git a/src/i18n/lang/zh/components/file.ts b/src/i18n/lang/zh/components/file.ts
@@ -14,6 +14,7 @@ const file: LComponentsFile = {
       duplicate: '复制',
       delete: '删除',
       createSpider: '新建爬虫',
+      deleteSpider: '删除爬虫',
     },
     sidebar: {
       search: {

diff --git a/src/interfaces/i18n/components/file.d.ts b/src/interfaces/i18n/components/file.d.ts
@@ -14,6 +14,7 @@ interface LComponentsFile {
       duplicate: string;
       delete: string;
       createSpider: string;
+      deleteSpider: string;
     };
     sidebar: {
       search: {

diff --git a/src/interfaces/store/index.d.ts b/src/interfaces/store/index.d.ts
@@ -11,6 +11,7 @@ export declare global {
   interface RootStoreState {
     common: CommonStoreState;
     layout: LayoutStoreState;
+    file: FileStoreState;
     node: NodeStoreState;
     project: ProjectStoreState;
     spider: SpiderStoreState;

diff --git a/src/views/git/detail/GitDetail.vue b/src/views/git/detail/GitDetail.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { computed, watch, onBeforeUnmount, onBeforeMount, provide } from 'vue';
+import {
+  computed,
+  watch,
+  onBeforeUnmount,
+  onBeforeMount,
+  provide,
+  ComputedRef,
+} from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import {
@@ -12,6 +19,10 @@ import { debounce, translate } from '@/utils';
 import useGitDetail from '@/views/git/detail/useGitDetail';
 import useGit from '@/components/core/git/useGit';
 import type { TagProps } from '@/components/ui/tag/types';
+import type {
+  ContextMenuItem,
+  FileEditorContextMenuItemVisibleFn,
+} from '@/components/ui/context-menu/types';
 
 const t = translate;
 
@@ -63,6 +74,8 @@ const spidersDict = computed<{ [key: string]: Spider }>(() => {
   return dict;
 });
 
+provide<ComputedRef<{ [key: string]: Spider }>>('spiders-dict', spidersDict);
+
 provide<{ (item: FileNavItem): TagProps | undefined }>(
   'highlight-tag-fn',
   (item: FileNavItem) => {
@@ -77,6 +90,7 @@ provide<{ (item: FileNavItem): TagProps | undefined }>(
     } as TagProps;
   }
 );
+
 provide<{ (item: FileNavItem): void }>(
   'highlight-click-fn',
   (item: FileNavItem) => {
@@ -86,6 +100,27 @@ provide<{ (item: FileNavItem): void }>(
     router.push(`/spiders/${spider._id}`);
   }
 );
+
+provide<FileEditorContextMenuItemVisibleFn>(
+  'context-menu-item-visible-fn',
+  (
+    contextMenuItem: ContextMenuItem,
+    activeFileNavItem?: FileNavItem
+  ): boolean => {
+    if (!activeFileNavItem) return false;
+    const spider = spidersDict.value[activeFileNavItem.path!];
+    switch (contextMenuItem.className) {
+      case 'create-spider':
+        if (spider) return false;
+        return !!activeFileNavItem.is_dir;
+      case 'delete-spider':
+        return !!spider;
+      default:
+        return true;
+    }
+  }
+);
+
 defineOptions({ name: 'ClGitDetail' });
 </script>