GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(front): clean up unused action handlers in FileShareDrawer and TextShareDrawer components

Browse Source
This commit is contained in:
keven1024
2025-05-31 17:17:47 +08:00
parent a4557a6626
commit 744dc614ce
2 changed files with 170 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
front/components/Drawer/FileShareDrawer.vue
View File

@@ -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>

102
front/components/Drawer/TextShareDrawer.vue
View File

@@ -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>