ud

components/In18FormDialog.vue

@@ -20,7 +20,7 @@
             </div>
         </template>
         <el-form :key="forceUpdateKey" v-if="show" ref="formRef" :model="formData" :rules="formRules"
-            label-position="left" v-loading="detailLoading">
+            label-position="left" v-loading="detailLoading" style="border-top: 1px solid var(--el-border-color);">
 
             <div v-if="normalFields.length" class="in18-form-top">
                 <el-form-item v-for="item in normalFields" :key="item.key" :prop="item.key">
@@ -37,28 +37,28 @@
                             :value="opt.key" />
                     </el-select>
                     <div v-else-if="isUploadMediaType(item.type)" style="width:100%;">
-                        <div class="upload-group">
+                        <div class="upload-group" v-if="item.type.includes('image')">
                             <div class="upload-label">图片</div>
                             <UploadInput :value="formData[item.key].image"
                                 :type="item.type.includes('images') ? 'images' : 'image'" :uploadFile="uploadFun"
-                                @updateValue="(val: any) => {
+                                hideUploadButton :onUpdateValue="(val: any) => {
                                     if (!formData[item.key]) formData[item.key] = { image: [], video: [] };
                                     formData[item.key].image = val.map((item: any) => item.url).filter(Boolean);
                                 }" />
                         </div>
-                        <div class="upload-group">
+                        <div class="upload-group" v-if="item.type.includes('video')">
                             <div class="upload-label">视频</div>
                             <UploadInput :value="formData[item.key]?.video" type="video" :uploadFile="uploadFun"
-                                @updateValue="(val: any) => {
+                                :onUpdateValue="(val: any) => {
                                     if (!formData[item.key]) formData[item.key] = { image: [], video: [] };
                                     formData[item.key].video = val.map((item: any) => item.url).filter(Boolean);
                                 }" />
                         </div>
                     </div>
                     <div v-else-if="item.type === 'upload:file'" style="width:100%;" class="upload-file">
-                        <UploadInput :value="formData[item.key]" type="file" :accept="item.accept || '*'"
+                        <UploadInput :value="formData[item.key] && [{ url: formData[item.key], name: formData[item.key] }]" type="file" :accept="item.accept || '*'"
-                            :uploadFile="uploadFun"
+                            :uploadFile="uploadFun" hideUploadButton
-                            @updateValue="(val: any) => { formData[item.key] = val[0]?.url || '' }" />
+                            :onUpdateValue="(val: any) => { formData[item.key] = val[0]?.url || '' }" />
                     </div>
                 </el-form-item>
             </div>
@@ -90,15 +90,10 @@
                             v-model="formData.translations[primaryLocaleKey][item.key]" type="textarea" :rows="4"
                             :placeholder="`请输入${item.name}`" />
                         <WangEditor v-else-if="item.type === 'richtext'"
-                            :content="formData.translations[primaryLocaleKey][item.key]"
+                            :content="formData.translations[primaryLocaleKey][item.key]" :maxHeight="300"
-                            :maxHeight="300" 
+                            style="z-index: 9999" :key="item.key" :upload-file="uploadFun" @update:content="(val: string) => {
-                            style="z-index: 9999" 
-                            :key="item.key" 
-                            :upload-file="uploadFun"
-                            @update:content="(val: string) => {
                                 formData.translations[primaryLocaleKey][item.key] = val;
-                            }"
+                            }">
-                            >
                         </WangEditor>
                         <el-select v-else-if="item.type === 'select'"
                             v-model="formData.translations[primaryLocaleKey][item.key]" :placeholder="`请选择${item.name}`"
@@ -106,6 +101,11 @@
                             <el-option v-for="opt in getSelectItems(item)" :key="opt.key" :label="opt.name"
                                 :value="opt.key" />
                         </el-select>
+                        <div v-else-if="item.type === 'upload:file'" style="width:100%;" class="upload-file">
+                            <UploadInput :value="formData.translations[primaryLocaleKey][item.key]" type="file"
+                                :accept="item.accept || '*'" :uploadFile="uploadFun" hideUploadButton
+                                :onUpdateValue="(val: any) => { formData.translations[primaryLocaleKey][item.key] = val[0]?.url || '' }" />
+                        </div>
                     </el-form-item>
                 </div>
                 <div class="in18-form-center">
@@ -132,16 +132,11 @@
                             </el-button>
                         </div>
                         <div v-else-if="item.type === 'richtext'" class="field-with-translate">
-                            <WangEditor 
+                            <WangEditor :content="formData.translations[activeSecondaryLocale?.key || ''][item.key]"
-                            :content="formData.translations[activeSecondaryLocale?.key || ''][item.key]"
+                                :maxHeight="300" style="z-index: 9999" :key="item.key" :upload-file="uploadFun"
-                                :maxHeight="300" 
-                                style="z-index: 9999" 
-                                :key="item.key" 
-                                :upload-file="uploadFun"
                                 @update:content="(val: string) => {
                                     formData.translations[activeSecondaryLocale?.key || ''][item.key] = val;
-                                }"
+                                }">
-                                >
                             </WangEditor>
                             <el-button link size="small" class="translate-icon"
                                 :loading="translatingFieldKey === item.key" @click="handleTranslateField(item.key)"
@@ -157,6 +152,11 @@
                             <el-option v-for="opt in getSelectItems(item)" :key="opt.key" :label="opt.name"
                                 :value="opt.key" />
                         </el-select>
+                        <div v-else-if="item.type === 'upload:file'" style="width:100%;" class="upload-file">
+                            <UploadInput :value="formData.translations[activeSecondaryLocale?.key || ''][item.key]" type="file"
+                                :accept="item.accept || '*'" :uploadFile="uploadFun" hideUploadButton
+                                :onUpdateValue="(val: any) => { formData.translations[activeSecondaryLocale?.key || ''][item.key] = val[0]?.url || '' }" />
+                        </div>
                     </el-form-item>
                 </div>
             </div>
@@ -174,7 +174,7 @@ import { reactive, computed, watch, ref, nextTick } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { Close, Promotion, FullScreen, CopyDocument } from '@element-plus/icons-vue'
-import UploadInput from "lib/components/UploadInput.vue";
+import UploadInput from "./UploadInput.vue";
 import WangEditor from "lib/components/WangEditor.vue";
 type FormItemType =
     | 'input'
@@ -206,7 +206,7 @@ type LocaleItem = {
 
 const props = withDefaults(
     defineProps<{
-        fullscreen: boolean
+        fullscreen?: boolean
         show: boolean
         id: string | number
         title?: string
@@ -239,7 +239,7 @@ const normalFields = computed(() => props.form.filter((f) => !f.shouldTranslate)
 const translateFields = computed(() => props.form.filter((f) => f.shouldTranslate))
 
 function isUploadMediaType(type: string): boolean {
-    return type === 'upload:images,video' || type === 'upload:image,video'
+    return type === 'upload:images,video' || type === 'upload:image,video' || type === 'upload:image' || type === 'upload:video'
 }
 
 function getSelectItems(item: FormItem): { key: string; name: string }[] {
@@ -250,6 +250,68 @@ function parseTranslateResult(res: any): string {
     return res?.data?.text ?? res?.data ?? res?.result ?? (typeof res === 'string' ? res : '')
 }
 
+function extractMediaFromHtml(html: string): { textWithPlaceholders: string; mediaParts: string[] } {
+    if (!html || typeof html !== 'string') {
+        return { textWithPlaceholders: html || '', mediaParts: [] }
+    }
+    if (!html.includes('<')) {
+        return { textWithPlaceholders: html, mediaParts: [] }
+    }
+    const div = document.createElement('div')
+    div.innerHTML = html
+    const mediaParts: string[] = []
+    const mediaElements = Array.from(div.querySelectorAll('img, video, iframe, audio'))
+    mediaElements.forEach((el, index) => {
+        mediaParts.push((el as HTMLElement).outerHTML)
+        // 使用类 HTML 占位符，翻译 API 通常会原样保留
+        const placeholder = document.createTextNode(`<x-media id="${index}"/>`)
+        el.parentNode?.replaceChild(placeholder, el)
+    })
+    return {
+        textWithPlaceholders: div.innerHTML,
+        mediaParts
+    }
+}
+
+// 方案二：占位符不发给翻译 API。用于 split 时保留分隔符
+const PLACEHOLDER_SPLIT_REGEX = /(&lt;x-media\s+id\s*=\s*["']?\d+["']?\s*\/&gt;)/gi
+
+function reassembleHtmlWithMedia(translatedText: string, mediaParts: string[]): string {
+    if (!mediaParts.length) return translatedText
+    let result = translatedText
+    mediaParts.forEach((media, index) => {
+        // 只匹配我们产生的占位符（未经过 API，格式确定）
+        const placeholderRegex = new RegExp(
+            `&lt;x-media\\s+id\\s*=\\s*["']?${index}["']?\\s*\\/&gt;`,
+            'gi'
+        )
+        result = result.replace(placeholderRegex, media)
+    })
+    return result
+}
+
+/** 方案二：按占位符拆分，只翻译文本段落，占位符不发给 API */
+async function translateRichtextBySegments(
+    textWithPlaceholders: string,
+    mediaParts: string[],
+    fromKey: string,
+    toKey: string
+): Promise<string> {
+    const segments = textWithPlaceholders.split(PLACEHOLDER_SPLIT_REGEX)
+    const placeholderTest = /^&lt;x-media\s+id\s*=\s*["']?\d+["']?\s*\/&gt;$/i
+    const translatedSegments: string[] = []
+    for (const seg of segments) {
+        if (seg === '' || placeholderTest.test(seg)) {
+            translatedSegments.push(seg)
+        } else {
+            const res = await props.translateApi({ text: seg, from: fromKey, to: toKey })
+            translatedSegments.push(parseTranslateResult(res) || seg)
+        }
+    }
+    const concatenated = translatedSegments.join('')
+    return reassembleHtmlWithMedia(concatenated, mediaParts)
+}
+
 const formRef = ref<FormInstance>()
 
 const formRules = computed<FormRules>(() => {
@@ -391,12 +453,17 @@ async function handleTranslate() {
 
     const fromKey = primaryLocale.value.key
     const toKey = activeSecondaryLocale.value.key
-    const texts: { key: string; text: string }[] = []
+    const texts: { key: string; text: string; type: FormItemType; mediaParts?: string[] }[] = []
 
     translateFields.value.forEach((item) => {
         const val = formData.translations?.[fromKey]?.[item.key]
-        if (val != null && String(val).trim()) {
+        if (val != null && String(val).trim() && !val.startsWith('http')) {
-            texts.push({ key: item.key, text: String(val).trim() })
+            if (item.type === 'richtext') {
+                const { textWithPlaceholders, mediaParts } = extractMediaFromHtml(String(val).trim())
+                texts.push({ key: item.key, text: textWithPlaceholders, type: item.type, mediaParts })
+            } else {
+                texts.push({ key: item.key, text: String(val).trim(), type: item.type })
+            }
         }
     })
 
@@ -405,9 +472,15 @@ async function handleTranslate() {
     translating.value = true
     try {
         const results = await Promise.allSettled(
-            texts.map(async ({ key, text }) => {
+            texts.map(async ({ key, text, type, mediaParts }) => {
+                let translated: string
+                if (type === 'richtext' && mediaParts && mediaParts.length > 0) {
+                    translated = await translateRichtextBySegments(text, mediaParts, fromKey, toKey)
+                } else {
                     const res = await props.translateApi({ text, from: fromKey, to: toKey })
-                return { key, translated: parseTranslateResult(res) }
+                    translated = parseTranslateResult(res)
+                }
+                return { key, translated }
             })
         )
         let failCount = 0
@@ -438,10 +511,25 @@ async function handleTranslateField(itemKey: string) {
     const toKey = activeSecondaryLocale.value.key
     const text = formData.translations?.[fromKey]?.[itemKey]
     if (text == null || !String(text).trim()) return
+    const item = translateFields.value.find((f) => f.key === itemKey)
+    const isRichtext = item?.type === 'richtext'
+    let textToTranslate = String(text).trim()
+    let mediaParts: string[] = []
+    if (isRichtext) {
+        const extracted = extractMediaFromHtml(textToTranslate)
+        textToTranslate = extracted.textWithPlaceholders
+        mediaParts = extracted.mediaParts
+    }
     translatingFieldKey.value = itemKey
     try {
-        const res = await props.translateApi({ text: String(text).trim(), from: fromKey, to: toKey })
+        let translated: string
-        if (formData.translations[toKey]) formData.translations[toKey][itemKey] = parseTranslateResult(res)
+        if (isRichtext && mediaParts.length > 0) {
+            translated = await translateRichtextBySegments(textToTranslate, mediaParts, fromKey, toKey)
+        } else {
+            const res = await props.translateApi({ text: textToTranslate, from: fromKey, to: toKey })
+            translated = parseTranslateResult(res)
+        }
+        if (formData.translations[toKey]) formData.translations[toKey][itemKey] = translated
     } catch (e) {
         console.error('Translate failed:', e)
         ElMessage.error('翻译失败')

components/JsonFormDialog.vue

@@ -73,8 +73,8 @@ import {
     ElCollapse, ElCollapseItem, ElIcon, ElMessage
 } from 'element-plus'
 import { translateApi } from 'src/api/common'
-import UploadInput from 'lib/components/UploadInput.vue'
+import UploadInput from './UploadInput.vue'
-
+import WangEditor from 'lib/components/WangEditor.vue'
 const props = withDefaults(defineProps<{
     show: boolean
     title?: string
@@ -298,19 +298,23 @@ const NodeEditor: Component = defineComponent({
             }
 
             if (typeof value === 'string') {
+                // 含任意 HTML 闭合标签（如 </p>、</div>）时用富文本编辑器
+                const hasHtmlClosingTag = /<\/[a-zA-Z][\w:-]*\s*>/i.test(value)
+
                 // const isLong = value.length > 50
                  
-                const needUpload = value.startsWith('http')
+                // const needUpload = value.startsWith('http')
-                const isImage = needUpload && value.includes('.jpg') || value.includes('.png') || value.includes('.jpeg') || value.includes('.gif') || value.includes('.bmp') || value.includes('.webp')
+                const isImage = value.includes('.jpg') || value.includes('.png') || value.includes('.jpeg') || value.includes('.gif') || value.includes('.bmp') || value.includes('.webp')
-                const isVideo = needUpload && value.includes('.mp4') || value.includes('.avi') || value.includes('.mov') || value.includes('.wmv') || value.includes('.flv') || value.includes('.mkv')
+                const isVideo = value.includes('.mp4') || value.includes('.avi') || value.includes('.mov') || value.includes('.wmv') || value.includes('.flv') || value.includes('.mkv')
-                const isFile = needUpload && value.includes('.pdf') || value.includes('.doc') || value.includes('.docx') || value.includes('.xls') || value.includes('.xlsx') || value.includes('.ppt') || value.includes('.pptx')
+                const isFile = value.includes('.pdf') || value.includes('.doc') || value.includes('.docx') || value.includes('.xls') || value.includes('.xlsx') || value.includes('.ppt') || value.includes('.pptx')
 
                 let uploadNode = null;
-                if (needUpload && (isFile || isImage || isVideo)) {
+                if ((isFile || isImage || isVideo)) {
                     uploadNode = h(UploadInput, {
                         value: [{url: value}],
                         type: isImage ? 'image' : isVideo ? 'video' : 'file',
                         uploadFile: props.uploadFile,
+                        hideUploadButton: true,
                         transport: `#jfd-${key}`,
                         onUpdateValue: (v: any) => { 
                             if(v.length > 0) {
@@ -325,8 +329,19 @@ const NodeEditor: Component = defineComponent({
                     'onUpdate:modelValue': (v: string) => { p.parent[key] = v },
                 })
 
+                const wangEditor = h(WangEditor, {
+                    content: value,
+                    showSaveButton: false,
+                    transport: `#jfd-${key}`,
+                    'onUpdate:content': (v: any) => {
+                        if(v.length > 0) {
+                            p.parent[key] = v || ''
+                        }
+                    },
+                })
+
                 const formItemNode = [
-                 uploadNode || inputNode,
+                    uploadNode || (hasHtmlClosingTag ? wangEditor : inputNode),
                 ]
 
 
@@ -367,9 +382,26 @@ const NodeEditor: Component = defineComponent({
                             const zhStr = Array.isArray(zhArr) && typeof zhArr[i] === 'string' ? zhArr[i] : undefined
                             const showBtn = p.lang === 'EN' && zhStr && hasChinese(zhStr)
 
-
+                            const isImage = value[i].includes('.jpg') || value[i].includes('.png') || value[i].includes('.jpeg') || value[i].includes('.gif') || value[i].includes('.bmp') || value[i].includes('.webp')
+                            const isVideo = value[i].includes('.mp4') || value[i].includes('.avi') || value[i].includes('.mov') || value[i].includes('.wmv') || value[i].includes('.flv') || value[i].includes('.mkv')
+                            const isFile = value[i].includes('.pdf') || value[i].includes('.doc') || value[i].includes('.docx') || value[i].includes('.xls') || value[i].includes('.xlsx') || value[i].includes('.ppt') || value[i].includes('.pptx')
+                            let uploadNode = null;
+                            if ((isFile || isImage || isVideo)) {
+                                uploadNode = h(UploadInput, {
+                                    value: [{url: value[i], name: value[i]}],
+                                    type: isImage ? 'image' : isVideo ? 'video' : 'file',
+                                    uploadFile: props.uploadFile,
+                                    hideUploadButton: true,
+                                    transport: `#jfd-${key}`,
+                                    onUpdateValue: (v: any) => { 
+                                        if(v.length > 0) {
+                                            value[i] = v[0].url || ''
+                                        }
+                                    },
+                                })
+                            }
                             return h('div', { class: 'jfd-string-item', key: i }, [
-                                h(ElInput, {
+                                uploadNode || h(ElInput, {
                                     modelValue: value[i],
                                     'onUpdate:modelValue': (v: string) => { value[i] = v },
                                 }),
@@ -392,7 +424,7 @@ const NodeEditor: Component = defineComponent({
                                 h(ElButton, {
                                     size: 'small', type: 'danger', link: true,
                                     onClick: () => value.splice(i, 1),
-                                }, () => h(ElIcon, { size: 14 }, () => h(Delete)))
+                                }, () => h(ElIcon, { size: 14 }, () => h(Delete))),
                             ])
                         })
                     ])
@@ -424,12 +456,12 @@ const NodeEditor: Component = defineComponent({
                                     const zhItem = Array.isArray(zhArr) ? zhArr[i] : undefined
                                     return h(NodeEditor, { parent: item, fieldKey: k, fieldMap: fm, depth: depth + 1, key: k, lang: p.lang, zhParent: zhItem })
                                 }),
-                                h('div', { class: 'jfd-item-actions' },
+                                // h('div', { class: 'jfd-item-actions' },
-                                    h(ElButton, {
+                                //     h(ElButton, {
-                                        size: 'small', type: 'danger',
+                                //         size: 'small', type: 'danger',
-                                        onClick: () => value.splice(i, 1),
+                                //         onClick: () => value.splice(i, 1),
-                                    }, () => [h(ElIcon, { size: 14 }, () => h(Delete)), ' 删除此项'])
+                                //     }, () => [h(ElIcon, { size: 14 }, () => h(Delete)), ' 删除此项'])
-                                )
+                                // )
                             ])
                         })
                     )
@@ -572,4 +604,5 @@ const NodeEditor: Component = defineComponent({
 .jfd-obj-array .el-collapse-item__header {
     font-size: 13px;
 }
+
 </style>

components/UploadInput.vue

@@ -0,0 +1,260 @@
+<template>
+    <div v-loading="isUploading" element-loading-text="上传中..." class="upload-loading-wrapper">
+      <el-upload ref="uploadRef" v-model:file-list="fileList" action="*" :on-preview="handlePictureCardPreview"
+        v-bind="options" :http-request="handleHttpRequest" :on-change="handleChange"
+        :class="isMaxCount ? 'max-count' : ''" style="width: 100%">
+        <el-icon v-show="['image', 'images'].includes(type)">
+          <Plus />
+        </el-icon>
+        <div v-show="['file', 'files', 'video', 'videos'].includes(type)">
+          <el-icon class="el-icon--upload">
+            <upload-filled />
+          </el-icon>
+          <div class="el-upload__text">拖拽到这里或者 <em>点击上传</em></div>
+        </div>
+      </el-upload>
+      <el-button v-show="showUploadButton" type="primary" @click="handleUpload">上传</el-button>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import {
+    computed,
+    ref,
+    createVNode,
+    render,
+  } from "vue";
+  import { Plus } from "@element-plus/icons-vue";
+  import type { UploadFile, UploadFiles, UploadUserFile } from "element-plus";
+  import { ElImageViewer } from "element-plus";
+  import utils from "lib/utils";
+  
+  interface Props {
+    value: {
+      data?: FormData;
+      uid?: string;
+      url: string;
+      name?: string;
+      id?: string;
+    }[];
+    uploadFile: (file: FormData) => Promise<any>;
+    type?: "image" | "images" | "file" | "files" | "video" | "videos";
+    transport?: string;
+    accept?: string;
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    type: "image",
+    transport: "",
+    accept: "*",
+    value: [] as any,
+    uploadFile: () => Promise.resolve({ url: "" }),
+  });
+  
+  const showUploadButton = computed(() => {
+    return options.value.autoUpload === false;
+  });
+  
+  const emit = defineEmits(["updateValue"])
+  
+  const fileList = ref<UploadUserFile[]>([...props.value] as any);
+  const uploadRef = ref<any>(null);
+  const options = computed(() => {
+    switch (props.type) {
+      case "image":
+        return {
+          limit: 1,
+          listType: "picture-card" as const, // 明确指定为字面量类型
+          accept: "image/*",
+        };
+      case "images":
+        return {
+          limit: 9,
+          listType: "picture-card" as const, // 明确指定为字面量类型
+          accept: "image/*",
+          multiple: true,
+          autoUpload: false,
+        };
+      case "video":
+        return {
+          limit: 1,
+          listType: "text" as const, // 明确指定为字面量类型
+          accept: "video/*",
+        };
+      case "videos":
+        return {
+          limit: 9,
+          listType: "text" as const, // 明确指定为字面量类型
+          accept: "video/*",
+          multiple: true,
+          autoUpload: false,
+        };
+      case "file":
+        return {
+          limit: 1,
+          accept: props.accept,
+          drag: true,
+          listType: "text" as const, // 为文件类型添加合适的 listType
+        };
+      case "files":
+        return {
+          limit: 10,
+          accept: props.accept,
+          drag: true,
+          listType: "text" as const, // 为文件类型添加合适的 listType
+          multiple: true,
+          autoUpload: false,
+        };
+      default:
+        return {
+          limit: 1,
+          listType: "picture-card" as const,
+          accept: props.accept,
+        };
+    }
+  });
+  
+  const isMaxCount = computed(() => {
+    return fileList.value.length >= options.value.limit;
+  });
+  
+  const isUploading = ref(false);
+
+  
+  interface UploadRequestOptions {
+    file: File & { uid?: number; raw?: File, url?: string };
+    filename: string;
+    onSuccess: (res: any) => void;
+    onError: (err: any) => void;
+  }
+  
+  const handleHttpRequest = async (options: UploadRequestOptions) => {
+    isUploading.value = true;
+    const formData = new FormData();
+    const rawFile = options.file?.raw ?? options.file;
+    formData.append(options.filename || "file", rawFile, rawFile.name);
+    try {
+      const res = await props.uploadFile(formData);
+      const url = res?.data?.url ?? res?.url;
+      if (url) {
+        options.file.url = url;
+      }
+      options.onSuccess(res);
+      isUploading.value = false;
+    } catch (err) {
+      console.log('err', err)
+      options.onError(err as any);
+      isUploading.value = false;
+    }
+  };
+  
+  const handleRemove = async (uploadFile: UploadFile) => {
+    // props.onFileChange(uploadFile);
+    // emit("onUpdateValue", fileList.value.filter((f: any) => f.uid !== uploadFile.uid));
+  };
+  
+  const handleChange = (file: any, list: any) => {
+    const updateList = fileList.value
+      .filter((f: any) => f.status === 'success')
+      .map((f: any) => {
+        return {
+          url: f.raw?.url,
+          uid: f.raw?.uid,
+          name: f.raw?.name,
+          id: f.raw?.id,
+        }
+      })
+    emit("updateValue", updateList);
+  }
+  
+  
+  const handlePictureCardPreview = (file: any) => {
+    const imageUrl = file.url;
+    if (["file", "files"].includes(props.type)) {
+      // 下载文件
+  
+      utils.downloadfile(imageUrl, imageUrl, "image/png");
+      return;
+    }
+    // 如果是视频，打开标签页
+    if (["video", "videos"].includes(props.type)) {
+      window.open(imageUrl, "_blank");
+      return;
+    }
+    if (!imageUrl) return;
+  
+    // 创建一个用于挂载 el-image-viewer 的容器
+    const container = document.createElement("div");
+    const parentNode =
+      document.querySelector(props.transport || "body") || document.body;
+    parentNode.appendChild(container);
+    // 创建并挂载 el-image-viewer 节点
+    const vnode = createVNode(ElImageViewer as any, {
+      urlList: [imageUrl],
+      onClose: () => {
+        render(null, container);
+        parentNode.removeChild(container);
+      },
+    });
+  
+    render(vnode, container);
+  };
+  
+  const handleUpload = () => {
+    uploadRef.value.submit();
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  .upload-loading-wrapper {
+    position: relative;
+    min-height: 100px;
+  }
+  
+  :deep(.el-upload--picture-card) {
+    --el-upload-picture-card-size: 100px;
+  }
+  
+  :deep(.el-upload-list--picture-card) {
+    --el-upload-list-picture-card-size: 100px;
+  }
+  
+  :deep(.el-icon--close-tip) {
+    display: none !important;
+  }
+  
+  // 设置上传中进度条的大小
+  :deep(.el-upload-list__item.is-uploading .el-progress) {
+    .el-progress-circle {
+      transform: scale(0.7);
+    }
+  }
+  
+  .max-count {
+    :deep(.el-upload--picture-card) {
+      display: none;
+    }
+  
+    :deep(.el-upload) {
+      display: none;
+    }
+  }
+  
+  :deep(.el-upload.el-upload--text) {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    width: 100%;
+    min-height: 100px;
+  
+    &>div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  
+      .el-icon.el-icon--upload {
+        font-size: 20px;
+      }
+    }
+  }
+  </style>
+  

views/config/list.tsx

@@ -55,6 +55,7 @@ const data: TableData = {
     (self: any) => {
       return self.bean && <JsonFormDialog
         uploadFile={async (file: FormData) => {
+          console.log('-------')
           return await self.api?.upload(file)
         }}
         show={self.bean.showJsonFormDialog}

views/document/list.tsx

@@ -28,12 +28,23 @@ const data: TableData = {
           onSubmit={async (data) => {
             const params = {
               ...data,
-              id: data.id ? String(data.id) : '',
               category_id: data.category_id ? String(data.category_id) : '',
+              id: data.id ? String(data.id) : '',
             }
+
+            params.translations.EN.path = params.path
+            params.translations.ZH.path = params.path
+            delete params.path
+
+            params.translations.ZH.cover = params.cover.image[0] || ''
+            params.translations.EN.cover = params.cover.image[0] || ''
+            delete params.cover
+
+            
             if(data.id) {
               await self.api?.updateData(params)
             } else {
+              delete params.id
               await self.api?.addData(params)
             }
             self.bean.showEditorDialog = false;
@@ -51,6 +62,9 @@ const data: TableData = {
                 if(fieldKey === 'name') {
                   data[langKey]['file_name'] = langData[fieldKey]
                 }
+                if(fieldKey === 'cover') {
+                  data[langKey]['cover'] = {image: data[langKey]['cover'] ? [{url: data[langKey]['cover']}] : []}
+                }
                 if (!field) return;
                 data[langKey][fieldKey] = langData[fieldKey];
               })
@@ -173,7 +187,7 @@ const data: TableData = {
     {
       key: 'cover',
       name: '封面',
-      type: 'input',
+      width: '80px',
       image: true,
     },
     {

views/news/list.tsx

@@ -26,6 +26,10 @@ const data: TableData = {
               ...data,
               id: data.id ? String(data.id) : undefined,
               category_id: data.category_id ? String(data.category_id) : undefined,
+              cover_resource: {
+                image: data.cover_resource.image.map((i: any) => (i.url || i)),
+                video: data.cover_resource.video.map((i: any) => (i.url || i)),
+              }
             }
             if(data.id) {
               await self.api?.updateData(params)
@@ -132,7 +136,6 @@ const data: TableData = {
         [self.bean.newsTypes] = results.map(
           (res) => toOptions(res?.data?.items ?? [])
         )
-        console.log('newsTypes', self.bean.newsTypes)
       }
     }
   ],