vue2-client 1.22.19 → 1.22.21

package/src/components/MarkdownEditor/index.vue

@@ -1,590 +1,590 @@
-<template>
-  <div :style="{height: height}" class="markdown-editor-wrapper">
-    <mavon-editor
-      ref="md"
-      v-model="editorContent"
-      :toolbars="toolbars"
-      :html="false"
-      :subfield="subfield"
-      :defaultOpen="defaultOpen"
-      :placeholder="placeholder"
-      :imageFilter="imageFilter"
-      @fullScreen="fullScreen"
-      @imgAdd="handleImageUpload"
-      @imgDel="handleImageDelete"
-      @change="handleContentChange"
-      @save="handleSave"
-    />
-  </div>
-</template>
-
-<script>
-import { mavonEditor } from 'mavon-editor'
-import 'mavon-editor/dist/css/index.css'
-import { mapState } from 'vuex'
-import { upload, fileDeleteV4 } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'MarkdownEditor',
-  components: { mavonEditor },
-
-  props: {
-    value: { type: String, default: '' },
-    height: { type: String, default: '600px' },
-    placeholder: { type: String, default: '开始编写内容...' },
-    subfield: { type: Boolean, default: true },
-    defaultOpen: { type: String, default: 'edit' },
-    serviceName: { type: String, default: undefined },
-    imgPrefix: { type: String, default: '' },
-    resUploadMode: { type: String, default: 'server' },
-    pathKey: { type: String, default: 'Default' },
-    resUploadStock: { type: Number, default: 1 },
-    maxImageSize: { type: Number, default: 5 },
-    formType: { type: String, default: 'image' },
-    useType: { type: String, default: 'Default' },
-    autoDetectDelete: { type: Boolean, default: true },
-    deleteDebounce: { type: Number, default: 1000 }
-  },
-
-  data() {
-    return {
-      editorContent: this.value,
-      previousContent: this.value,
-      pendingDeletions: [],
-      deleteTimer: null,
-      isFullScreen: false,
-      previewImage: '',
-      previewImageName: '',
-
-      // ===== 图片列表 =====
-      imageList: [],
-
-      xssOptions: {
-        whiteList: {
-          img: ['src', 'alt', 'title', 'width', 'height', 'style', 'class'],
-          a: ['href', 'title', 'target'],
-          div: ['class', 'style'],
-          span: ['class', 'style'],
-          p: ['class', 'style'],
-          br: [],
-          strong: [],
-          b: [],
-          em: [],
-          i: [],
-          u: [],
-          strike: [],
-          code: ['class'],
-          pre: ['class'],
-          blockquote: ['class'],
-          ol: ['class'],
-          ul: ['class'],
-          li: ['class'],
-          table: ['class', 'style'],
-          thead: ['class'],
-          tbody: ['class'],
-          tr: ['class'],
-          th: ['class', 'colspan', 'rowspan'],
-          td: ['class', 'colspan', 'rowspan'],
-          h1: ['class', 'style'],
-          h2: ['class', 'style'],
-          h3: ['class', 'style'],
-          h4: ['class', 'style'],
-          h5: ['class', 'style'],
-          h6: ['class', 'style']
-        },
-        stripIgnoreTag: true,
-        whiteListCss: {
-          'width': true,
-          'height': true,
-          'max-width': true,
-          'max-height': true,
-          'margin': true,
-          'padding': true,
-          'border': true,
-          'border-radius': true,
-          'text-align': true,
-          'color': true,
-          'background-color': true,
-          'font-size': true,
-          'font-weight': true,
-          'font-family': true
-        }
-      },
-
-      toolbars: {
-        bold: true,
-        italic: true,
-        header: true,
-        underline: true,
-        strikethrough: true,
-        mark: true,
-        superscript: true,
-        subscript: true,
-        quote: true,
-        ol: true,
-        ul: true,
-        link: true,
-        imagelink: true,
-        code: true,
-        table: false,
-        fullscreen: true,
-        preview: true,
-        htmlcode: true,
-        help: true,
-        undo: true,
-        redo: true,
-        trash: true,
-        alignleft: true,
-        aligncenter: true,
-        alignright: true,
-      }
-    }
-  },
-
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['compatible'])
-  },
-
-  watch: {
-    value(newVal) {
-      if (newVal !== this.editorContent) {
-        this.editorContent = newVal
-        this.previousContent = newVal
-      }
-    }
-  },
-
-  methods: {
-    // ============================================================
-    //  工具方法
-    // ============================================================
-    getUrlParam(url, key) {
-      if (!url) return null
-      const queryString = url.split('?')[1]
-      if (!queryString) return null
-      const params = new URLSearchParams(queryString)
-      return params.get(key)
-    },
-
-    getBaseUrl(url) {
-      return url ? url.split('?')[0] : ''
-    },
-
-    // ===== 关键修复：从内容中提取图片 URL =====
-    extractImageUrls(content) {
-      if (!content) return []
-      const urls = []
-      // 匹配 ![](url) 或 ![alt](url) 格式
-      const regex = /!\[[^\]]*\]\(([^)]+)\)/g
-      let match
-      while ((match = regex.exec(content)) !== null) {
-        // match[1] 是 URL
-        const fullUrl = match[1]
-        // 保留完整 URL（包含 ?id=xxx 参数）
-        urls.push(fullUrl)
-      }
-      console.log('提取到的图片 URL:', urls)
-      return urls
-    },
-
-    // ============================================================
-    //  图片列表管理
-    // ============================================================
-
-    addImageToList(imageData) {
-      this.imageList.push({
-        pos: imageData.pos,
-        file: imageData.file,
-        relativePath: imageData.relativePath,
-        f_downloadpath: imageData.f_downloadpath,
-        id: imageData.id,
-        name: imageData.file.name,
-        uploadTime: Date.now()
-      })
-      console.log('图片已添加到列表，当前数量:', this.imageList.length)
-      this.$emit('image-list-changed', this.imageList)
-    },
-
-    removeImageFromList(idOrUrl) {
-      const beforeCount = this.imageList.length
-
-      this.imageList = this.imageList.filter(item => {
-        // 通过 ID 匹配
-        if (String(item.id) === String(idOrUrl)) return false
-        // 通过 URL 中的 ID 匹配
-        const itemId = this.getUrlParam(item.relativePath, 'id')
-        if (String(itemId) === String(idOrUrl)) return false
-        // 通过完整 URL 匹配
-        if (item.relativePath === idOrUrl) return false
-        return true
-      })
-
-      if (this.imageList.length < beforeCount) {
-        console.log('图片已从列表中移除，剩余:', this.imageList.length)
-        this.$emit('image-list-changed', this.imageList)
-      }
-    },
-
-    getImageList() {
-      return this.imageList
-    },
-
-    clearImageList() {
-      this.imageList = []
-      this.$emit('image-list-changed', this.imageList)
-    },
-
-    // ============================================================
-    //  删除服务器图片
-    // ============================================================
-    async deleteServerImage(url) {
-      try {
-        const id = this.getUrlParam(url, 'id')
-        if (id) {
-          await fileDeleteV4({
-            id: id,
-            resDeleteMode: this.resUploadMode
-          })
-          console.log('服务器图片删除成功:', id)
-          this.removeImageFromList(id)
-        this.$emit('image-deleted', { id, url })
-          return { success: true, id, url }
-        } else {
-          console.warn('无法从 URL 提取 ID:', url)
-          return { success: false, url, error: 'No ID found' }
-        }
-      } catch (error) {
-        console.error('删除服务器图片失败:', url, error)
-        this.$emit('image-delete-error', { url, error })
-        return { success: false, url, error }
-      }
-    },
-
-    // ============================================================
-    //  批量删除图片
-    // ============================================================
-    async batchDeleteImages() {
-      if (this.pendingDeletions.length === 0) return
-
-      const urls = [...this.pendingDeletions]
-      this.pendingDeletions = []
-
-      console.log('批量删除图片 URLs:', urls)
-
-      // 先从图片列表中移除
-      urls.forEach(url => {
-        const id = this.getUrlParam(url, 'id')
-        if (id) {
-          this.removeImageFromList(id)
-        } else {
-          this.removeImageFromList(url)
-        }
-      })
-
-      const results = await Promise.allSettled(
-        urls.map(url => this.deleteServerImage(url))
-      )
-
-      const successCount = results.filter(r => r.status === 'fulfilled' && r.value?.success).length
-      if (successCount > 0) {
-        this.$message.success(`成功删除 ${successCount} 张图片`)
-      }
-
-      this.$emit('batch-deleted', { urls, results })
-    },
-
-    // ============================================================
-    //  检测被删除的图片（修复版）
-    // ============================================================
-    detectDeletedImages(oldContent, newContent) {
-      if (!this.autoDetectDelete) return
-      if (oldContent === newContent) return
-
-      const oldImages = this.extractImageUrls(oldContent)
-      const newImages = this.extractImageUrls(newContent)
-
-      // 找出被删除的图片 URL
-      const deletedImages = oldImages.filter(url => !newImages.includes(url))
-
-      if (deletedImages.length > 0) {
-        console.log('检测到被删除的图片（编辑区）:', deletedImages)
-
-        // ===== 从图片列表中移除 =====
-        deletedImages.forEach(url => {
-          const id = this.getUrlParam(url, 'id')
-          if (id) {
-            this.removeImageFromList(id)
-          } else {
-            this.removeImageFromList(url)
-          }
-        })
-
-        // 添加到待删除队列（去重）
-        deletedImages.forEach(url => {
-          if (!this.pendingDeletions.includes(url)) {
-            this.pendingDeletions.push(url)
-          }
-        })
-
-        // 防抖
-        clearTimeout(this.deleteTimer)
-        this.deleteTimer = setTimeout(() => {
-          this.batchDeleteImages()
-        }, this.deleteDebounce)
-      }
-    },
-
-    // ============================================================
-    //  全屏事件
-    // ============================================================
-    fullScreen(status, val) {
-      this.isFullScreen = status
-    },
-
-    // ============================================================
-    //  图片上传
-    // ============================================================
-    async handleImageUpload(pos, $file) {
-      if (!$file) return
-
-      if ($file.size > this.maxImageSize * 1024 * 1024) {
-        this.$message.warning(`图片大小不能超过 ${this.maxImageSize}MB`)
-        return
-      }
-
-      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
-      if (!allowedTypes.includes($file.type)) {
-        this.$message.warning('仅支持 JPEG、PNG、GIF、WebP 格式')
-        return
-      }
-
-      try {
-        const formData = new FormData()
-        formData.append('avatar', $file)
-        formData.append('resUploadMode', this.resUploadMode)
-        formData.append('pathKey', this.pathKey)
-        formData.append('formType', this.formType)
-        formData.append('useType', this.useType)
-        formData.append('resUploadStock', this.resUploadStock)
-        formData.append('filename', $file.name)
-        formData.append('filesize', ($file.size / 1024 / 1024).toFixed(4))
-        formData.append('f_operator', this.currUser ? this.currUser.username : '')
-
-        const headers = { 'Content-Type': 'multipart/form-data' }
-        const res = await upload(formData, this.serviceName, {
-          headers,
-          timeout: 600 * 1000,
-          dedupe: false
-        })
-
-        let relativePath = ''
-
-        if (res.success || res.id) {
-          let dataObj
-          if (res.id) {
-            dataObj = res
-          } else if (typeof res.data === 'string') {
-            dataObj = JSON.parse(res.data)
-          } else {
-            dataObj = res.data
-          }
-
-          const downloadPath = `${dataObj.f_downloadpath}${dataObj.f_downloadpath.includes('?') ? '&' : '?'}id=${dataObj.id}`
-
-          if (this.imgPrefix) {
-            relativePath = this.imgPrefix + downloadPath
-          } else {
-            relativePath = downloadPath
-          }
-
-          this.$refs.md.$img2Url(pos, relativePath)
-
-          // 更新 previousContent（避免误删）
-          this.previousContent = this.editorContent
-
-          this.$message.success('图片上传成功！')
-
-          this.addImageToList({
-            pos,
-            file: $file,
-            relativePath,
-            f_downloadpath: dataObj.f_downloadpath,
-            id: dataObj.id
-          })
-
-          this.$emit('upload-success', {
-            pos,
-            file: $file,
-            relativePath,
-            response: dataObj
-          })
-        } else {
-          this.$message.error('上传失败！')
-          this.$emit('upload-error', res.data)
-        }
-      } catch (error) {
-        console.error('图片上传失败:', error)
-        this.$message.error('图片上传失败，请重试')
-        this.$emit('upload-error', error)
-      }
-    },
-
-    // ============================================================
-    //  图片删除（预览区点击 X）
-    // ============================================================
-    handleImageDelete(pos) {
-      if (pos && pos.length === 2) {
-        const url = pos[0]
-        const file = pos[1]
-
-        console.log('预览区删除图片:', url)
-
-        if (typeof url === 'string' && url.startsWith('/resource')) {
-          const id = this.getUrlParam(url, 'id')
-
-          // ===== 先从图片列表中移除 =====
-          if (id) {
-            this.removeImageFromList(id)
-          } else {
-            this.removeImageFromList(url)
-          }
-
-          if (id) {
-            fileDeleteV4({
-              id: id,
-              resDeleteMode: this.resUploadMode
-            }).then(res => {
-              this.removeImageMarkdown(url, file?._name)
-              this.$message.success('图片删除成功！')
-              this.$emit('img-del', { url, file, success: true })
-            }).catch(e => {
-              console.error('服务器删除失败:', e)
-              this.$message.error('图片删除失败，请重试')
-              this.removeImageMarkdown(url, file?._name)
-              this.$emit('img-del', { url, file, success: false, error: e })
-            })
-          } else {
-            this.removeImageMarkdown(url, file?._name)
-          }
-        } else {
-          this.removeImageMarkdown(url, file?._name)
-        }
-      }
-    },
-
-    // ============================================================
-    //  从内容中移除图片标记
-    // ============================================================
-    removeImageMarkdown(url, fileName) {
-      let content = this.editorContent
-
-      const exactMatch = `![${fileName}](${url})`
-      if (content.includes(exactMatch)) {
-        content = content.replace(exactMatch, '')
-      } else {
-        const escapedUrl = url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-        const regex = new RegExp(`\\!\\[[^\\]]*\\]\\(${escapedUrl}(\\?[^)]*)?\\)`, 'g')
-        content = content.replace(regex, '')
-      }
-
-      content = content.replace(/\n{3,}/g, '\n\n')
-      this.editorContent = content
-      this.previousContent = content
-      this.$emit('input', content)
-    },
-
-    // ============================================================
-    //  内容变化 - 核心检测逻辑
-    // ============================================================
-    handleContentChange(value, render) {
-      this.detectDeletedImages(this.previousContent, value)
-
-      this.editorContent = value
-      this.previousContent = value
-      this.$emit('input', value)
-      this.$emit('change', { value, render })
-    },
-
-    // ============================================================
-    //  保存
-    // ============================================================
-    handleSave(value, render) {
-      clearTimeout(this.deleteTimer)
-      this.batchDeleteImages()
-      this.$emit('save', { value, render })
-    },
-
-    // ============================================================
-    //  图片过滤器
-    // ============================================================
-    imageFilter(file) {
-      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
-      if (!allowedTypes.includes(file.type)) {
-        this.$message.warning('仅支持 JPEG、PNG、GIF、WebP 格式')
-        return false
-      }
-      if (file.size > this.maxImageSize * 1024 * 1024) {
-        this.$message.warning(`图片大小不能超过 ${this.maxImageSize}MB`)
-        return false
-      }
-      return true
-    },
-
-    // ============================================================
-    //  对外方法
-    // ============================================================
-    getContent() {
-      return this.editorContent
-    },
-
-    setContent(content) {
-      this.editorContent = content
-      this.previousContent = content
-      this.$emit('input', content)
-      this.$nextTick(() => {
-        const urls = this.extractImageUrls(content)
-        const currentIds = urls.map(url => this.getUrlParam(url, 'id')).filter(Boolean)
-        this.imageList = this.imageList.filter(item => {
-          return currentIds.includes(String(item.id))
-        })
-        this.$emit('image-list-changed', this.imageList)
-      })
-    },
-
-    clear() {
-      this.editorContent = ''
-      this.previousContent = ''
-      this.imageList = []
-      this.$emit('input', '')
-      this.$emit('image-list-changed', [])
-    },
-
-    getHtml() {
-      return this.$refs.md?.$refs?.content?.html || ''
-    },
-
-    insertImage(url, title = '', alt = '') {
-      this.$refs.md.$img2Url(this.editorContent.length, url, title, alt)
-    }
-  },
-
-  beforeDestroy() {
-    clearTimeout(this.deleteTimer)
-    if (this.pendingDeletions.length > 0) {
-      this.batchDeleteImages()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.markdown-editor-wrapper ::v-deep .v-note-wrapper {
-  height: 100%;
-  z-index: auto;
-}
-
-.markdown-editor-wrapper ::v-deep .fullscreen {
-  z-index: 1501 !important;
-}
-</style>
+<template>
+  <div :style="{height: height}" class="markdown-editor-wrapper">
+    <mavon-editor
+      ref="md"
+      v-model="editorContent"
+      :toolbars="toolbars"
+      :html="false"
+      :subfield="subfield"
+      :defaultOpen="defaultOpen"
+      :placeholder="placeholder"
+      :imageFilter="imageFilter"
+      @fullScreen="fullScreen"
+      @imgAdd="handleImageUpload"
+      @imgDel="handleImageDelete"
+      @change="handleContentChange"
+      @save="handleSave"
+    />
+  </div>
+</template>
+
+<script>
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+import { mapState } from 'vuex'
+import { upload, fileDeleteV4 } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'MarkdownEditor',
+  components: { mavonEditor },
+
+  props: {
+    value: { type: String, default: '' },
+    height: { type: String, default: '600px' },
+    placeholder: { type: String, default: '开始编写内容...' },
+    subfield: { type: Boolean, default: true },
+    defaultOpen: { type: String, default: 'edit' },
+    serviceName: { type: String, default: undefined },
+    imgPrefix: { type: String, default: '' },
+    resUploadMode: { type: String, default: 'server' },
+    pathKey: { type: String, default: 'Default' },
+    resUploadStock: { type: Number, default: 1 },
+    maxImageSize: { type: Number, default: 5 },
+    formType: { type: String, default: 'image' },
+    useType: { type: String, default: 'Default' },
+    autoDetectDelete: { type: Boolean, default: true },
+    deleteDebounce: { type: Number, default: 1000 }
+  },
+
+  data() {
+    return {
+      editorContent: this.value,
+      previousContent: this.value,
+      pendingDeletions: [],
+      deleteTimer: null,
+      isFullScreen: false,
+      previewImage: '',
+      previewImageName: '',
+
+      // ===== 图片列表 =====
+      imageList: [],
+
+      xssOptions: {
+        whiteList: {
+          img: ['src', 'alt', 'title', 'width', 'height', 'style', 'class'],
+          a: ['href', 'title', 'target'],
+          div: ['class', 'style'],
+          span: ['class', 'style'],
+          p: ['class', 'style'],
+          br: [],
+          strong: [],
+          b: [],
+          em: [],
+          i: [],
+          u: [],
+          strike: [],
+          code: ['class'],
+          pre: ['class'],
+          blockquote: ['class'],
+          ol: ['class'],
+          ul: ['class'],
+          li: ['class'],
+          table: ['class', 'style'],
+          thead: ['class'],
+          tbody: ['class'],
+          tr: ['class'],
+          th: ['class', 'colspan', 'rowspan'],
+          td: ['class', 'colspan', 'rowspan'],
+          h1: ['class', 'style'],
+          h2: ['class', 'style'],
+          h3: ['class', 'style'],
+          h4: ['class', 'style'],
+          h5: ['class', 'style'],
+          h6: ['class', 'style']
+        },
+        stripIgnoreTag: true,
+        whiteListCss: {
+          'width': true,
+          'height': true,
+          'max-width': true,
+          'max-height': true,
+          'margin': true,
+          'padding': true,
+          'border': true,
+          'border-radius': true,
+          'text-align': true,
+          'color': true,
+          'background-color': true,
+          'font-size': true,
+          'font-weight': true,
+          'font-family': true
+        }
+      },
+
+      toolbars: {
+        bold: true,
+        italic: true,
+        header: true,
+        underline: true,
+        strikethrough: true,
+        mark: true,
+        superscript: true,
+        subscript: true,
+        quote: true,
+        ol: true,
+        ul: true,
+        link: true,
+        imagelink: true,
+        code: true,
+        table: false,
+        fullscreen: true,
+        preview: true,
+        htmlcode: true,
+        help: true,
+        undo: true,
+        redo: true,
+        trash: true,
+        alignleft: true,
+        aligncenter: true,
+        alignright: true,
+      }
+    }
+  },
+
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['compatible'])
+  },
+
+  watch: {
+    value(newVal) {
+      if (newVal !== this.editorContent) {
+        this.editorContent = newVal
+        this.previousContent = newVal
+      }
+    }
+  },
+
+  methods: {
+    // ============================================================
+    //  工具方法
+    // ============================================================
+    getUrlParam(url, key) {
+      if (!url) return null
+      const queryString = url.split('?')[1]
+      if (!queryString) return null
+      const params = new URLSearchParams(queryString)
+      return params.get(key)
+    },
+
+    getBaseUrl(url) {
+      return url ? url.split('?')[0] : ''
+    },
+
+    // ===== 关键修复：从内容中提取图片 URL =====
+    extractImageUrls(content) {
+      if (!content) return []
+      const urls = []
+      // 匹配 ![](url) 或 ![alt](url) 格式
+      const regex = /!\[[^\]]*\]\(([^)]+)\)/g
+      let match
+      while ((match = regex.exec(content)) !== null) {
+        // match[1] 是 URL
+        const fullUrl = match[1]
+        // 保留完整 URL（包含 ?id=xxx 参数）
+        urls.push(fullUrl)
+      }
+      console.log('提取到的图片 URL:', urls)
+      return urls
+    },
+
+    // ============================================================
+    //  图片列表管理
+    // ============================================================
+
+    addImageToList(imageData) {
+      this.imageList.push({
+        pos: imageData.pos,
+        file: imageData.file,
+        relativePath: imageData.relativePath,
+        f_downloadpath: imageData.f_downloadpath,
+        id: imageData.id,
+        name: imageData.file.name,
+        uploadTime: Date.now()
+      })
+      console.log('图片已添加到列表，当前数量:', this.imageList.length)
+      this.$emit('image-list-changed', this.imageList)
+    },
+
+    removeImageFromList(idOrUrl) {
+      const beforeCount = this.imageList.length
+
+      this.imageList = this.imageList.filter(item => {
+        // 通过 ID 匹配
+        if (String(item.id) === String(idOrUrl)) return false
+        // 通过 URL 中的 ID 匹配
+        const itemId = this.getUrlParam(item.relativePath, 'id')
+        if (String(itemId) === String(idOrUrl)) return false
+        // 通过完整 URL 匹配
+        if (item.relativePath === idOrUrl) return false
+        return true
+      })
+
+      if (this.imageList.length < beforeCount) {
+        console.log('图片已从列表中移除，剩余:', this.imageList.length)
+        this.$emit('image-list-changed', this.imageList)
+      }
+    },
+
+    getImageList() {
+      return this.imageList
+    },
+
+    clearImageList() {
+      this.imageList = []
+      this.$emit('image-list-changed', this.imageList)
+    },
+
+    // ============================================================
+    //  删除服务器图片
+    // ============================================================
+    async deleteServerImage(url) {
+      try {
+        const id = this.getUrlParam(url, 'id')
+        if (id) {
+          await fileDeleteV4({
+            id: id,
+            resDeleteMode: this.resUploadMode
+          })
+          console.log('服务器图片删除成功:', id)
+          this.removeImageFromList(id)
+        this.$emit('image-deleted', { id, url })
+          return { success: true, id, url }
+        } else {
+          console.warn('无法从 URL 提取 ID:', url)
+          return { success: false, url, error: 'No ID found' }
+        }
+      } catch (error) {
+        console.error('删除服务器图片失败:', url, error)
+        this.$emit('image-delete-error', { url, error })
+        return { success: false, url, error }
+      }
+    },
+
+    // ============================================================
+    //  批量删除图片
+    // ============================================================
+    async batchDeleteImages() {
+      if (this.pendingDeletions.length === 0) return
+
+      const urls = [...this.pendingDeletions]
+      this.pendingDeletions = []
+
+      console.log('批量删除图片 URLs:', urls)
+
+      // 先从图片列表中移除
+      urls.forEach(url => {
+        const id = this.getUrlParam(url, 'id')
+        if (id) {
+          this.removeImageFromList(id)
+        } else {
+          this.removeImageFromList(url)
+        }
+      })
+
+      const results = await Promise.allSettled(
+        urls.map(url => this.deleteServerImage(url))
+      )
+
+      const successCount = results.filter(r => r.status === 'fulfilled' && r.value?.success).length
+      if (successCount > 0) {
+        this.$message.success(`成功删除 ${successCount} 张图片`)
+      }
+
+      this.$emit('batch-deleted', { urls, results })
+    },
+
+    // ============================================================
+    //  检测被删除的图片（修复版）
+    // ============================================================
+    detectDeletedImages(oldContent, newContent) {
+      if (!this.autoDetectDelete) return
+      if (oldContent === newContent) return
+
+      const oldImages = this.extractImageUrls(oldContent)
+      const newImages = this.extractImageUrls(newContent)
+
+      // 找出被删除的图片 URL
+      const deletedImages = oldImages.filter(url => !newImages.includes(url))
+
+      if (deletedImages.length > 0) {
+        console.log('检测到被删除的图片（编辑区）:', deletedImages)
+
+        // ===== 从图片列表中移除 =====
+        deletedImages.forEach(url => {
+          const id = this.getUrlParam(url, 'id')
+          if (id) {
+            this.removeImageFromList(id)
+          } else {
+            this.removeImageFromList(url)
+          }
+        })
+
+        // 添加到待删除队列（去重）
+        deletedImages.forEach(url => {
+          if (!this.pendingDeletions.includes(url)) {
+            this.pendingDeletions.push(url)
+          }
+        })
+
+        // 防抖
+        clearTimeout(this.deleteTimer)
+        this.deleteTimer = setTimeout(() => {
+          this.batchDeleteImages()
+        }, this.deleteDebounce)
+      }
+    },
+
+    // ============================================================
+    //  全屏事件
+    // ============================================================
+    fullScreen(status, val) {
+      this.isFullScreen = status
+    },
+
+    // ============================================================
+    //  图片上传
+    // ============================================================
+    async handleImageUpload(pos, $file) {
+      if (!$file) return
+
+      if ($file.size > this.maxImageSize * 1024 * 1024) {
+        this.$message.warning(`图片大小不能超过 ${this.maxImageSize}MB`)
+        return
+      }
+
+      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+      if (!allowedTypes.includes($file.type)) {
+        this.$message.warning('仅支持 JPEG、PNG、GIF、WebP 格式')
+        return
+      }
+
+      try {
+        const formData = new FormData()
+        formData.append('avatar', $file)
+        formData.append('resUploadMode', this.resUploadMode)
+        formData.append('pathKey', this.pathKey)
+        formData.append('formType', this.formType)
+        formData.append('useType', this.useType)
+        formData.append('resUploadStock', this.resUploadStock)
+        formData.append('filename', $file.name)
+        formData.append('filesize', ($file.size / 1024 / 1024).toFixed(4))
+        formData.append('f_operator', this.currUser ? this.currUser.username : '')
+
+        const headers = { 'Content-Type': 'multipart/form-data' }
+        const res = await upload(formData, this.serviceName, {
+          headers,
+          timeout: 600 * 1000,
+          dedupe: false
+        })
+
+        let relativePath = ''
+
+        if (res.success || res.id) {
+          let dataObj
+          if (res.id) {
+            dataObj = res
+          } else if (typeof res.data === 'string') {
+            dataObj = JSON.parse(res.data)
+          } else {
+            dataObj = res.data
+          }
+
+          const downloadPath = `${dataObj.f_downloadpath}${dataObj.f_downloadpath.includes('?') ? '&' : '?'}id=${dataObj.id}`
+
+          if (this.imgPrefix) {
+            relativePath = this.imgPrefix + downloadPath
+          } else {
+            relativePath = downloadPath
+          }
+
+          this.$refs.md.$img2Url(pos, relativePath)
+
+          // 更新 previousContent（避免误删）
+          this.previousContent = this.editorContent
+
+          this.$message.success('图片上传成功！')
+
+          this.addImageToList({
+            pos,
+            file: $file,
+            relativePath,
+            f_downloadpath: dataObj.f_downloadpath,
+            id: dataObj.id
+          })
+
+          this.$emit('upload-success', {
+            pos,
+            file: $file,
+            relativePath,
+            response: dataObj
+          })
+        } else {
+          this.$message.error('上传失败！')
+          this.$emit('upload-error', res.data)
+        }
+      } catch (error) {
+        console.error('图片上传失败:', error)
+        this.$message.error('图片上传失败，请重试')
+        this.$emit('upload-error', error)
+      }
+    },
+
+    // ============================================================
+    //  图片删除（预览区点击 X）
+    // ============================================================
+    handleImageDelete(pos) {
+      if (pos && pos.length === 2) {
+        const url = pos[0]
+        const file = pos[1]
+
+        console.log('预览区删除图片:', url)
+
+        if (typeof url === 'string' && url.startsWith('/resource')) {
+          const id = this.getUrlParam(url, 'id')
+
+          // ===== 先从图片列表中移除 =====
+          if (id) {
+            this.removeImageFromList(id)
+          } else {
+            this.removeImageFromList(url)
+          }
+
+          if (id) {
+            fileDeleteV4({
+              id: id,
+              resDeleteMode: this.resUploadMode
+            }).then(res => {
+              this.removeImageMarkdown(url, file?._name)
+              this.$message.success('图片删除成功！')
+              this.$emit('img-del', { url, file, success: true })
+            }).catch(e => {
+              console.error('服务器删除失败:', e)
+              this.$message.error('图片删除失败，请重试')
+              this.removeImageMarkdown(url, file?._name)
+              this.$emit('img-del', { url, file, success: false, error: e })
+            })
+          } else {
+            this.removeImageMarkdown(url, file?._name)
+          }
+        } else {
+          this.removeImageMarkdown(url, file?._name)
+        }
+      }
+    },
+
+    // ============================================================
+    //  从内容中移除图片标记
+    // ============================================================
+    removeImageMarkdown(url, fileName) {
+      let content = this.editorContent
+
+      const exactMatch = `![${fileName}](${url})`
+      if (content.includes(exactMatch)) {
+        content = content.replace(exactMatch, '')
+      } else {
+        const escapedUrl = url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const regex = new RegExp(`\\!\\[[^\\]]*\\]\\(${escapedUrl}(\\?[^)]*)?\\)`, 'g')
+        content = content.replace(regex, '')
+      }
+
+      content = content.replace(/\n{3,}/g, '\n\n')
+      this.editorContent = content
+      this.previousContent = content
+      this.$emit('input', content)
+    },
+
+    // ============================================================
+    //  内容变化 - 核心检测逻辑
+    // ============================================================
+    handleContentChange(value, render) {
+      this.detectDeletedImages(this.previousContent, value)
+
+      this.editorContent = value
+      this.previousContent = value
+      this.$emit('input', value)
+      this.$emit('change', { value, render })
+    },
+
+    // ============================================================
+    //  保存
+    // ============================================================
+    handleSave(value, render) {
+      clearTimeout(this.deleteTimer)
+      this.batchDeleteImages()
+      this.$emit('save', { value, render })
+    },
+
+    // ============================================================
+    //  图片过滤器
+    // ============================================================
+    imageFilter(file) {
+      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+      if (!allowedTypes.includes(file.type)) {
+        this.$message.warning('仅支持 JPEG、PNG、GIF、WebP 格式')
+        return false
+      }
+      if (file.size > this.maxImageSize * 1024 * 1024) {
+        this.$message.warning(`图片大小不能超过 ${this.maxImageSize}MB`)
+        return false
+      }
+      return true
+    },
+
+    // ============================================================
+    //  对外方法
+    // ============================================================
+    getContent() {
+      return this.editorContent
+    },
+
+    setContent(content) {
+      this.editorContent = content
+      this.previousContent = content
+      this.$emit('input', content)
+      this.$nextTick(() => {
+        const urls = this.extractImageUrls(content)
+        const currentIds = urls.map(url => this.getUrlParam(url, 'id')).filter(Boolean)
+        this.imageList = this.imageList.filter(item => {
+          return currentIds.includes(String(item.id))
+        })
+        this.$emit('image-list-changed', this.imageList)
+      })
+    },
+
+    clear() {
+      this.editorContent = ''
+      this.previousContent = ''
+      this.imageList = []
+      this.$emit('input', '')
+      this.$emit('image-list-changed', [])
+    },
+
+    getHtml() {
+      return this.$refs.md?.$refs?.content?.html || ''
+    },
+
+    insertImage(url, title = '', alt = '') {
+      this.$refs.md.$img2Url(this.editorContent.length, url, title, alt)
+    }
+  },
+
+  beforeDestroy() {
+    clearTimeout(this.deleteTimer)
+    if (this.pendingDeletions.length > 0) {
+      this.batchDeleteImages()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.markdown-editor-wrapper ::v-deep .v-note-wrapper {
+  height: 100%;
+  z-index: auto;
+}
+
+.markdown-editor-wrapper ::v-deep .fullscreen {
+  z-index: 1501 !important;
+}
+</style>