From 744dc614ce88021063ea21b579269d950713d856 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sat, 31 May 2025 17:17:47 +0800
Subject: [PATCH] refactor(front): clean up unused action handlers in
 FileShareDrawer and TextShareDrawer components

---
 front/components/Drawer/FileShareDrawer.vue | 171 ++++++++++++--------
 front/components/Drawer/TextShareDrawer.vue | 102 +++++++-----
 2 files changed, 170 insertions(+), 103 deletions(-)

diff --git a/front/components/Drawer/FileShareDrawer.vue b/front/components/Drawer/FileShareDrawer.vue
index 19705b1..e5cbb0f 100644
--- a/front/components/Drawer/FileShareDrawer.vue
+++ b/front/components/Drawer/FileShareDrawer.vue
@@ -1,77 +1,120 @@
 <script setup lang="ts">
-import { LucideShare, LucideImage, LucideBot, LucideLanguages, LucideFileText, LucideImageMinus, LucideArrowRightLeft, LucideImagePlus, LucideAudioLines, LucideListMusic } from 'lucide-vue-next'
-import { cx } from 'class-variance-authority'
-import { isObject } from 'lodash-es';
-import showDrawer from '@/lib/showDrawer';
-import FileShareHandle from '@/components/Preprocessing/FileShareHandle.vue';
+import {
+  LucideShare,
+  LucideImage,
+  LucideBot,
+  LucideLanguages,
+  LucideFileText,
+  LucideImageMinus,
+  LucideArrowRightLeft,
+  LucideImagePlus,
+  LucideAudioLines,
+  LucideListMusic,
+} from "lucide-vue-next";
+import { cx } from "class-variance-authority";
+import { isObject } from "lodash-es";
+import showDrawer from "@/lib/showDrawer";
+import FileShareHandle from "@/components/Preprocessing/FileShareHandle.vue";
 
 const props = defineProps<{
-    hide: () => void
-    file: File
-    onFileHandle: ({ type, config }: { type: string, config: any }) => void
-}>()
+  hide: () => void;
+  file: File;
+  onFileHandle: ({ type, config }: { type: string; config: any }) => void;
+}>();
 
-const isImage = computed(() => props.file.type.startsWith('image/'))
-const isVideo = computed(() => props.file.type.startsWith('video/'))
-const isAudio = computed(() => props.file.type.startsWith('audio/'))
-const isMedia = computed(() => isImage.value || isVideo.value || isAudio.value)
+const isImage = computed(() => props.file.type.startsWith("image/"));
+const isVideo = computed(() => props.file.type.startsWith("video/"));
+const isAudio = computed(() => props.file.type.startsWith("audio/"));
+const isMedia = computed(() => isImage.value || isVideo.value || isAudio.value);
 
-const isPDF = computed(() => props.file.type.startsWith('application/pdf'))
-const isDOC = computed(() => props.file.type.startsWith('application/msword'))
-const isXLS = computed(() => props.file.type.startsWith('application/vnd.ms-excel'))
-const isPPT = computed(() => props.file.type.startsWith('application/vnd.ms-powerpoint'))
-const isDocument = computed(() => isPDF.value || isDOC.value || isXLS.value || isPPT.value)
+const isPDF = computed(() => props.file.type.startsWith("application/pdf"));
+const isDOC = computed(() => props.file.type.startsWith("application/msword"));
+const isXLS = computed(() =>
+  props.file.type.startsWith("application/vnd.ms-excel"),
+);
+const isPPT = computed(() =>
+  props.file.type.startsWith("application/vnd.ms-powerpoint"),
+);
+const isDocument = computed(
+  () => isPDF.value || isDOC.value || isXLS.value || isPPT.value,
+);
 const actions = [
-    {
-        label: '分享文件', icon: LucideShare, className: 'bg-green-300', onClick: () => {
-            showDrawer({ render: ({ hide }) => h(FileShareHandle, { ...props, hide }) })
-        }
+  {
+    label: "分享文件",
+    icon: LucideShare,
+    className: "bg-green-300",
+    onClick: () => {
+      showDrawer({
+        render: ({ hide }) => h(FileShareHandle, { ...props, hide }),
+      });
     },
-    isImage.value && {
-        label: '图片压缩', icon: LucideImageMinus, className: 'bg-red-300', onClick: () => {
-            console.log('复制链接')
-        }
+  },
+  isImage.value && {
+    label: "图片压缩",
+    icon: LucideImageMinus,
+    className: "bg-red-300",
+    onClick: () => {
+      props.onFileHandle({ type: "file-image-compress", config: {} });
     },
-    isImage.value && {
-        label: '图片翻译', icon: LucideLanguages, className: 'bg-orange-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-    isImage.value && {
-        label: '图片超分', icon: LucideImagePlus, className: 'bg-cyan-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-    (isAudio.value || isVideo.value) && {
-        label: '转文本', icon: LucideListMusic, className: 'bg-cyan-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-    isAudio.value && {
-        label: '语音克隆', icon: LucideAudioLines, className: 'bg-cyan-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-    (isDocument.value || isMedia.value) && {
-        label: '格式转换', icon: LucideArrowRightLeft, className: 'bg-purple-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-]?.filter(isObject) as { label: string, icon: any, className: string, onClick: () => void }[]
-
+  },
+  // isImage.value && {
+  //     label: '图片翻译', icon: LucideLanguages, className: 'bg-orange-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+  // isImage.value && {
+  //     label: '图片超分', icon: LucideImagePlus, className: 'bg-cyan-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+  // (isAudio.value || isVideo.value) && {
+  //     label: '转文本', icon: LucideListMusic, className: 'bg-cyan-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+  // isAudio.value && {
+  //     label: '语音克隆', icon: LucideAudioLines, className: 'bg-cyan-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+  // (isDocument.value || isMedia.value) && {
+  //     label: '格式转换', icon: LucideArrowRightLeft, className: 'bg-purple-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+]?.filter(isObject) as {
+  label: string;
+  icon: any;
+  className: string;
+  onClick: () => void;
+}[];
 </script>
 <template>
-    <div class="flex flex-col gap-5 p-5">
-        <div class="flex flex-row gap-5">
-            <div v-for="item in actions" :key="item.label" class="flex flex-col items-center gap-2" @click="() => {
-                props?.hide()
-                item?.onClick()
-            }">
-                <div :class="cx('size-14 flex justify-center items-center rounded-full', item?.className)">
-                    <component :is="item?.icon" />
-                </div>
-                <div class="text-sm">{{ item?.label }}</div>
-            </div>
+  <div class="flex flex-col gap-5 p-5">
+    <div class="flex flex-row gap-5">
+      <div
+        v-for="item in actions"
+        :key="item.label"
+        class="flex flex-col items-center gap-2"
+        @click="
+          () => {
+            props?.hide();
+            item?.onClick();
+          }
+        "
+      >
+        <div
+          :class="
+            cx(
+              'size-14 flex justify-center items-center rounded-full',
+              item?.className,
+            )
+          "
+        >
+          <component :is="item?.icon" />
         </div>
+        <div class="text-sm">{{ item?.label }}</div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/front/components/Drawer/TextShareDrawer.vue b/front/components/Drawer/TextShareDrawer.vue
index d36656c..6ca2683 100644
--- a/front/components/Drawer/TextShareDrawer.vue
+++ b/front/components/Drawer/TextShareDrawer.vue
@@ -1,49 +1,73 @@
 <script setup lang="ts">
-import { LucideShare, LucideImage, LucideBot, LucideLanguages } from 'lucide-vue-next'
-import { cx } from 'class-variance-authority'
-import showDrawer from '@/lib/showDrawer';
-import TextShareHandle from '@/components/Preprocessing/TextShareHandle.vue';
+import {
+  LucideShare,
+  LucideImage,
+  LucideBot,
+  LucideLanguages,
+} from "lucide-vue-next";
+import { cx } from "class-variance-authority";
+import showDrawer from "@/lib/showDrawer";
+import TextShareHandle from "@/components/Preprocessing/TextShareHandle.vue";
 
 const props = defineProps<{
-    hide: () => void
-    text: string
-    onTextHandle: ({ type, config }: { type: string, config: any }) => void
-}>()
+  hide: () => void;
+  text: string;
+  onTextHandle: ({ type, config }: { type: string; config: any }) => void;
+}>();
 const actions = [
-    {
-        label: '分享文本', icon: LucideShare, className: 'bg-green-300', onClick: () => {
-            showDrawer({ render: ({ hide }) => h(TextShareHandle, { ...props, hide }) })
-        }
+  {
+    label: "分享文本",
+    icon: LucideShare,
+    className: "bg-green-300",
+    onClick: () => {
+      showDrawer({
+        render: ({ hide }) => h(TextShareHandle, { ...props, hide }),
+      });
     },
-    {
-        label: '生成配图', icon: LucideImage, className: 'bg-red-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-    {
-        label: '问大模型', icon: LucideBot, className: 'bg-blue-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-    {
-        label: '文本翻译', icon: LucideLanguages, className: 'bg-orange-300', onClick: () => {
-            console.log('复制链接')
-        }
-    },
-]
+  },
+  // {
+  //     label: '生成配图', icon: LucideImage, className: 'bg-red-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+  // {
+  //     label: '问大模型', icon: LucideBot, className: 'bg-blue-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+  // {
+  //     label: '文本翻译', icon: LucideLanguages, className: 'bg-orange-300', onClick: () => {
+  //         console.log('复制链接')
+  //     }
+  // },
+];
 </script>
 <template>
-    <div class="flex flex-col gap-5 p-5">
-        <div class="flex flex-row gap-5">
-            <div v-for="item in actions" :key="item.label" class="flex flex-col items-center gap-2" @click="() => {
-                props?.hide()
-                item?.onClick()
-            }">
-                <div :class="cx('size-14 flex justify-center items-center rounded-full', item?.className)">
-                    <component :is="item?.icon" />
-                </div>
-                <div class="text-sm">{{ item?.label }}</div>
-            </div>
+  <div class="flex flex-col gap-5 p-5">
+    <div class="flex flex-row gap-5">
+      <div
+        v-for="item in actions"
+        :key="item.label"
+        class="flex flex-col items-center gap-2"
+        @click="
+          () => {
+            props?.hide();
+            item?.onClick();
+          }
+        "
+      >
+        <div
+          :class="
+            cx(
+              'size-14 flex justify-center items-center rounded-full',
+              item?.className,
+            )
+          "
+        >
+          <component :is="item?.icon" />
         </div>
+        <div class="text-sm">{{ item?.label }}</div>
+      </div>
     </div>
+  </div>
 </template>