Merge pull request #105 from jiyee/feat-unique-image-name

feat(chrome-extension): add option to use unique name for files

Author: whale4113

.changeset/funny-icons-call.md

@@ -0,0 +1,5 @@
+---
+'@dolphin/chrome-extension': patch
+---
+
+feat: add option to use unique name for files

apps/chrome-extension/package.json

@@ -48,6 +48,7 @@
     "radash": "catalog:prod",
     "reka-ui": "catalog:prod",
     "serialize-error": "catalog:prod",
+    "uuid": "catalog:prod",
     "vee-validate": "catalog:prod",
     "vue": "catalog:prod",
     "vue-i18n": "catalog:prod",

apps/chrome-extension/src/common/settings.ts

@@ -9,6 +9,7 @@ export enum SettingKey {
   DownloadMethod = 'download.method',
   TableWithNonPhrasingContent = 'general.table_with_non_phrasing_content',
   TextHighlight = 'general.text_highlight',
+  DownloadFileWithUniqueName = 'download.file_with_unique_name',
 }
 
 export enum Theme {
@@ -33,6 +34,7 @@ export interface Settings {
   [SettingKey.DownloadMethod]: (typeof DownloadMethod)[keyof typeof DownloadMethod]
   [SettingKey.TableWithNonPhrasingContent]: (typeof TableWithNonPhrasingContent)[keyof typeof TableWithNonPhrasingContent]
   [SettingKey.TextHighlight]: boolean
+  [SettingKey.DownloadFileWithUniqueName]: boolean
 }
 
 export const fallbackSettings: Settings = {
@@ -43,6 +45,7 @@ export const fallbackSettings: Settings = {
     : DownloadMethod.Direct,
   [SettingKey.TableWithNonPhrasingContent]: TableWithNonPhrasingContent.ToHTML,
   [SettingKey.TextHighlight]: true,
+  [SettingKey.DownloadFileWithUniqueName]: false,
 }
 
 export const getSettings = async <Key extends keyof Settings>(

apps/chrome-extension/src/common/utils.ts

@@ -1,6 +1,7 @@
 import { toHast } from 'mdast-util-to-hast'
 import { toHtml } from 'hast-util-to-html'
 import type { InvalidTable } from '@dolphin/lark'
+import { v4 as uuidv4 } from 'uuid'
 
 interface Ref<T> {
   current: T
@@ -71,6 +72,26 @@ export class UniqueFileName {
 
     return newFileName
   }
+
+  generateWithUUID(originFileName: string): string {
+    const startDotIndex = originFileName.lastIndexOf('.')
+    const extension =
+      startDotIndex === -1 ? '' : originFileName.slice(startDotIndex)
+    const uuid = uuidv4()
+    const newFileName = `${uuid}${extension}`
+
+    // Ensure UUID-based names are also unique
+    let finalFileName = newFileName
+    let counter = 1
+    while (this.usedNames.has(finalFileName)) {
+      finalFileName = `${uuid}-${counter.toFixed()}${extension}`
+      counter++
+    }
+
+    this.usedNames.add(finalFileName)
+
+    return finalFileName
+  }
 }
 
 export const transformInvalidTablesToHtml = (

apps/chrome-extension/src/pages/options/download.vue

@@ -25,13 +25,15 @@ import {
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Switch } from '@/components/ui/switch'
 import { SettingKey, DownloadMethod } from '@/common/settings'
 import { useSettings } from '../shared/settings'
 
 const { t } = useI18n()
 
 const schema = z.object({
   [SettingKey.DownloadMethod]: z.enum(DownloadMethod),
+  [SettingKey.DownloadFileWithUniqueName]: z.boolean(),
 })
 
 const { query, mutation } = useSettings()
@@ -43,7 +45,12 @@ const { meta, values, isSubmitting, handleSubmit, resetForm } = useForm({
 
 watch(query.data, newValues => {
   if (newValues) {
-    resetForm({ values: pick(newValues, [SettingKey.DownloadMethod]) })
+    resetForm({
+      values: pick(newValues, [
+        SettingKey.DownloadMethod,
+        SettingKey.DownloadFileWithUniqueName,
+      ]),
+    })
   }
 })
 
@@ -114,6 +121,28 @@ const downloadMethodDescription = computed(() => {
             </Select>
           </Field>
         </VeeField>
+        <VeeField
+          v-slot="{ field, errors }"
+          :name="`[${SettingKey.DownloadFileWithUniqueName}]`"
+        >
+          <Field orientation="horizontal" :data-invalid="!!errors.length">
+            <FieldContent>
+              <FieldLabel for="form-vee-download-file-with-unique-name">{{
+                t('download.file_with_unique_name')
+              }}</FieldLabel>
+              <FieldError v-if="errors.length" :errors="errors" />
+            </FieldContent>
+            <Skeleton v-if="query.isPending.value" class="h-9 w-40" />
+            <Switch
+              v-else
+              id="form-vee-download-file-with-unique-name"
+              :name="field.name"
+              :model-value="field.value"
+              :aria-invalid="!!errors.length"
+              @update:model-value="field.onChange"
+            />
+          </Field>
+        </VeeField>
         <Button
           type="submit"
           class="relative"

apps/chrome-extension/src/pages/shared/i18n.ts

@@ -30,6 +30,8 @@ export const i18n = createI18n({
       'general.table_with_non_phrasing_content.to_html': 'To HTML',
       'general.text_highlight':
         'Preserve text highlighting (font color, font background color)',
+      'download.file_with_unique_name':
+        'Use UUID for image and diagram filenames',
       'download.method': 'Download Method',
       'download.method.placeholder': 'Select download method',
       'download.method.direct': 'Direct Download',
@@ -64,6 +66,7 @@ export const i18n = createI18n({
       'general.table_with_non_phrasing_content.filtered': '过滤块级内容',
       'general.table_with_non_phrasing_content.to_html': '转换为 HTML',
       'general.text_highlight': '保留文本高亮（字体颜色、字体背景颜色）',
+      'download.file_with_unique_name': '图片和图表文件使用 UUID 命名',
       'download.method': '下载方式',
       'download.method.placeholder': '选择下载方式',
       'download.method.direct': '直接下载',

apps/chrome-extension/src/pages/shared/settings.ts

@@ -23,7 +23,8 @@ export const useSettings = <
     | SettingKey.Theme
     | SettingKey.DownloadMethod
     | SettingKey.TableWithNonPhrasingContent
-    | SettingKey.TextHighlight,
+    | SettingKey.TextHighlight
+    | SettingKey.DownloadFileWithUniqueName,
 >(
   options: { keys?: Key[] } = {},
 ): {
@@ -42,6 +43,7 @@ export const useSettings = <
       SettingKey.DownloadMethod,
       SettingKey.TableWithNonPhrasingContent,
       SettingKey.TextHighlight,
+      SettingKey.DownloadFileWithUniqueName,
     ] as Key[],
   } = options
 

apps/chrome-extension/src/scripts/download-lark-docx-as-markdown.ts

@@ -146,11 +146,13 @@ const downloadImage = async (
   image: mdast.Image,
   options: {
     signal?: AbortSignal
+    useUUID?: boolean
+    markdownFileName?: string
   } = {},
 ): Promise<DownloadResult | null> => {
   if (!image.data) return null
 
-  const { signal } = options
+  const { signal, useUUID = false, markdownFileName = '' } = options
 
   const { name: originName, fetchSources, fetchBlob } = image.data
 
@@ -166,7 +168,12 @@ const downloadImage = async (
           const content = await fetchBlob()
           if (!content) return null
 
-          const name = uniqueFileName.generate('diagram.png')
+          const baseName = markdownFileName
+            ? `${markdownFileName}-diagram.png`
+            : 'diagram.png'
+          const name = useUUID
+            ? uniqueFileName.generateWithUUID(baseName)
+            : uniqueFileName.generate(baseName)
           const filename = `images/${name}`
 
           image.url = filename
@@ -185,7 +192,12 @@ const downloadImage = async (
           const sources = await fetchSources()
           if (!sources) return null
 
-          const name = uniqueFileName.generate(originName)
+          const baseName = markdownFileName
+            ? `${markdownFileName}-${originName}`
+            : originName
+          const name = useUUID
+            ? uniqueFileName.generateWithUUID(baseName)
+            : uniqueFileName.generate(baseName)
           const filename = `images/${name}`
 
           const { src } = sources
@@ -263,11 +275,13 @@ const downloadFile = async (
   file: mdast.Link,
   options: {
     signal?: AbortSignal
+    useUUID?: boolean
+    markdownFileName?: string
   } = {},
 ): Promise<DownloadResult | null> => {
   if (!file.data?.name || !file.data.fetchFile) return null
 
-  const { signal } = options
+  const { signal, useUUID = false, markdownFileName = '' } = options
 
   const { name, fetchFile } = file.data
 
@@ -280,7 +294,12 @@ const downloadFile = async (
   const result = await withSignal(
     async () => {
       try {
-        const filename = `files/${uniqueFileName.generate(name)}`
+        const baseName = markdownFileName ? `${markdownFileName}-${name}` : name
+        const filename = `files/${
+          useUUID
+            ? uniqueFileName.generateWithUUID(baseName)
+            : uniqueFileName.generate(baseName)
+        }`
 
         const response = await fetchFile({ signal: controller.signal })
         try {
@@ -352,9 +371,18 @@ const downloadFiles = async (
      */
     batchSize?: number
     signal?: AbortSignal
+    useUUID?: boolean
+    markdownFileName?: string
   } = {},
 ): Promise<DownloadResult[]> => {
-  const { onProgress, onComplete, batchSize = 3, signal } = options
+  const {
+    onProgress,
+    onComplete,
+    batchSize = 3,
+    signal,
+    useUUID = false,
+    markdownFileName = '',
+  } = options
 
   let completeEventCalled = false
   const onCompleteOnce = () => {
@@ -385,8 +413,16 @@ const downloadFiles = async (
             try {
               const result =
                 file.type === 'image'
-                  ? await downloadImage(file, { signal })
-                  : await downloadFile(file, { signal })
+                  ? await downloadImage(file, {
+                      signal,
+                      useUUID,
+                      markdownFileName,
+                    })
+                  : await downloadFile(file, {
+                      signal,
+                      useUUID,
+                      markdownFileName,
+                    })
 
               if (result) {
                 _results.push(result)
@@ -499,6 +535,7 @@ const main = async (options: { signal?: AbortSignal } = {}) => {
     SettingKey.DownloadMethod,
     SettingKey.TableWithNonPhrasingContent,
     SettingKey.TextHighlight,
+    SettingKey.DownloadFileWithUniqueName,
   ])
 
   const { root, images, files, invalidTables } = docx.intoMarkdownAST({
@@ -559,11 +596,15 @@ const main = async (options: { signal?: AbortSignal } = {}) => {
             Toast.remove(TranslationKey.IMAGE)
           },
           signal,
+          useUUID: settings[SettingKey.DownloadFileWithUniqueName],
+          markdownFileName: recommendName,
         }),
         // Diagrams must be downloaded one by one
         downloadFiles(diagrams, {
           batchSize: 1,
           signal,
+          useUUID: settings[SettingKey.DownloadFileWithUniqueName],
+          markdownFileName: recommendName,
         }),
         downloadFiles(files, {
           onProgress: progress => {
@@ -580,6 +621,8 @@ const main = async (options: { signal?: AbortSignal } = {}) => {
             Toast.remove(TranslationKey.FILE)
           },
           signal,
+          useUUID: settings[SettingKey.DownloadFileWithUniqueName],
+          markdownFileName: recommendName,
         }),
       ])
       results.flat(1).forEach(({ filename, content }) => {

pnpm-lock.yaml

@@ -69,6 +69,7 @@ catalogs:
     reka-ui: 2.5.1
     serialize-error: ^12.0.0
     tslib: ^2.8.1
+    uuid: 13.0.0
     vee-validate: 4.15.1
     vue: ^3.5.22
     vue-i18n: 12.0.0-alpha.3