feat(front): add text-translate feature with corresponding UI components and action handlers

front/components/Drawer/TextShareDrawer.vue

@@ -20,6 +20,15 @@ const actionHandlers: Partial<Record<FeatureKey, ActionHandler>> = {
     'text-share': {
         onClick: () => showDrawer({ render: ({ hide }) => h(TextShareHandle, { ...props, hide }) }),
     },
+    'text-translate': {
+        onClick: () =>
+            props.onTextHandle({
+                type: 'text-translate',
+                config: {
+                    source: 'auto',
+                },
+            }),
+    },
     // 'text-image-generate': {
     //     label: '生成配图', icon: LucideImage, className: 'bg-red-300',
     //     onClick: () => { console.log('复制链接') }

front/components/Preprocessing/types.ts

@@ -1,5 +1,5 @@
 export type FileHandleKey = 'file-share' | 'file-image-compress' | 'file-image-convert'
 export type FileShareHandleProps = { type: FileHandleKey; config: Record<string, any> }
 
-export type TextHandleKey = 'text-share'
+export type TextHandleKey = 'text-share' | 'text-translate'
 export type TextShareHandleProps = { type: TextHandleKey; config: Record<string, any> }

front/components/Result/ResultIndexView.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import FileShareResult from '@/components/Result/FileShareResult.vue'
 import TextShareResult from '@/components/Result/TextShareResult.vue'
+import TextTranslateResult from '@/components/Result/TextTranslateResult.vue'
 import ImageCompressResult from '@/components/Result/ImageCompressResult.vue'
 import ImageConvertResult from '@/components/Result/ImageConvertResult.vue'
 import type { filehandleData, handleComponent, handleKey, texthandleData } from './types'
@@ -16,6 +17,7 @@ const emit = defineEmits<{
 const handleList: { component: handleComponent; key: handleKey }[] = [
     { component: FileShareResult, key: 'file-share' },
     { component: TextShareResult, key: 'text-share' },
+    { component: TextTranslateResult, key: 'text-translate' },
     { component: ImageCompressResult, key: 'file-image-compress' },
     { component: ImageConvertResult, key: 'file-image-convert' },
 ]

front/composables/useFeatureMeta.ts

@@ -1,4 +1,4 @@
-import { LucideShare, LucideImageMinus, LucideArrowRightLeft } from 'lucide-vue-next'
+import { LucideShare, LucideImageMinus, LucideArrowRightLeft, LucideLanguages } from 'lucide-vue-next'
 import useMyAppConfig from '@/composables/useMyAppConfig'
 import type { FileHandleKey, TextHandleKey } from '../components/Preprocessing/types'
 import generateRandomColors from '@/lib/generateRandomColors'
@@ -32,15 +32,21 @@ const allFeatureMeta = (t: (key: string) => string): FeatureMeta[] => [
         label: t('page.upload.text.handleType.text-share'),
         icon: LucideShare,
     },
+    {
+        key: 'text-translate',
+        label: t('page.upload.text.handleType.text-translate'),
+        icon: LucideLanguages,
+    },
 ]
 
 export function useFeatureMeta() {
     const { t } = useI18n()
     const appConfig = useMyAppConfig()
+    const builtInFeatureKeys: FeatureKey[] = ['text-translate']
 
     return computed(() => {
         const enabledKeys = appConfig.value?.features ?? []
-        const result = allFeatureMeta(t).filter((meta) => enabledKeys.includes(meta.key))
+        const result = allFeatureMeta(t).filter((meta) => enabledKeys.includes(meta.key) || builtInFeatureKeys.includes(meta.key))
         const colors = generateRandomColors(result.length)
         return result.map((meta, index) => ({ ...meta, style: { backgroundColor: colors[index] } }))
     })