From 4ccef05aebc8bd62674c94c0c7637f0fdef28c7b Mon Sep 17 00:00:00 2001
From: mac <mac@macdebijibendiannao.local>
Date: Fri, 27 Mar 2026 18:30:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9AI=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/activity/hongbao/list.vue           |    2 +-
 .../videoList/components/AddOrEdit.vue        |   29 +-
 .../videoList/components/index.vue            | 1159 +++++++++++++++++
 3 files changed, 1188 insertions(+), 2 deletions(-)
 create mode 100644 src/views/videoManagement/videoList/components/index.vue

diff --git a/src/views/activity/hongbao/list.vue b/src/views/activity/hongbao/list.vue
index 4fe2302..d7fa27d 100644
--- a/src/views/activity/hongbao/list.vue
+++ b/src/views/activity/hongbao/list.vue
@@ -41,7 +41,7 @@ const tableColumns = (_this) => [
   { name: '用户昵称', key: 'nickname' },
   { name: '日期', key: 'day' },
   { name: '奖励类型', key: 'prizeType', valueHandler: (val) => (prizeTypeOptions.find(v => v.value == val) || {}).label },
-  { name: '奖励数量(金币)', key: 'amount', valueHandler: (val) => val / 100 },
+  { name: '奖励数量(金币)', key: 'amount', valueHandler: (val) => val },
   { name: '领取时间', key: 'createdAt', valueHandler: (val) => BeiJingTime(val) }
 ]
 
diff --git a/src/views/videoManagement/videoList/components/AddOrEdit.vue b/src/views/videoManagement/videoList/components/AddOrEdit.vue
index 14c317d..127cef7 100644
--- a/src/views/videoManagement/videoList/components/AddOrEdit.vue
+++ b/src/views/videoManagement/videoList/components/AddOrEdit.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
   <el-dialog :title="title" :visible.sync="Visible" width="1200px" top="50px" center class="ac-dialog"
     :close-on-click-modal="false" @close="close">
     <el-form :inline="true" :model="form" :rules="rules" class="demo-form-inline" label-width="120px"
@@ -113,6 +114,9 @@
         <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
           <el-form-item label="封面">
             <UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg"></UploadImg>
+            <el-button type="primary" plain size="small" style="margin-top: 8px; display: block" @click="openAiCoverEditor">
+              AI 编辑
+            </el-button>
           </el-form-item>
         </el-col>
         <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
@@ -181,10 +185,18 @@
     </div>
     <AddVideo :data="form" v-if="addVisible" @close="closeVideoInfo" @closeAll="close" @submit="videoInfo"></AddVideo>
   </el-dialog>
+  <AIImageEditorDialog
+    v-if="aiCoverVisible"
+    :image="form.coverImg || ''"
+    @close="closeAiCoverEditor"
+    @success="onAiCoverSuccess"
+  />
+  </div>
 </template>
 <script>
 import UploadImg from '@/components/UploadImg/index'
 import AddVideo from './addVideo'
+import AIImageEditorDialog from './index.vue'
 import moment from 'moment'
 import { stringToArry, arryToString, changeMoneyYuan, changeMoneyFen } from '@/filters/index'
 import { MediaSatusList } from '@/filters/videoManagement/videoList'
@@ -199,7 +211,8 @@ export default {
   components: {
     UploadImg,
     AddVideo,
-    TagSelectV2
+    TagSelectV2,
+    AIImageEditorDialog
   },
 
   data() {
@@ -213,6 +226,7 @@ export default {
       videoLocationList: videoLocationList(),
       chooseVideoType: [], // 过滤后的视频主题
       addVisible: false,
+      aiCoverVisible: false,
       mediatagCategoryId: null,
       form: {
         location: undefined, // 视频所属位置
@@ -387,6 +401,19 @@ export default {
       this.form.coverImg = data
     },
 
+    openAiCoverEditor() {
+      this.aiCoverVisible = true
+    },
+
+    closeAiCoverEditor() {
+      this.aiCoverVisible = false
+    },
+
+    onAiCoverSuccess(path) {
+      this.form.coverImg = path
+      this.aiCoverVisible = false
+    },
+
     // 关闭不通过原因弹框
     closeVideoInfo() {
       this.addVisible = false
diff --git a/src/views/videoManagement/videoList/components/index.vue b/src/views/videoManagement/videoList/components/index.vue
new file mode 100644
index 0000000..75bedd9
--- /dev/null
+++ b/src/views/videoManagement/videoList/components/index.vue
@@ -0,0 +1,1159 @@
+<template>
+  <el-dialog
+    title="AI编辑封面"
+    :visible.sync="visible"
+    width="1280px"
+    center
+    append-to-body
+    class="ai-image-editor-dialog"
+    :close-on-click-modal="false"
+    @close="close">
+    <div class="ai-image-editor">
+      <div class="editor-header">
+        <h1>AI-IMAGE-RS</h1>
+        <p>版本: V1.1</p>
+      </div>
+
+      <div class="token-bar">
+        <div :class="['token-dot', { active: !!globalToken }]"></div>
+        <span class="token-label">补充Token</span>
+        <el-input v-model.trim="globalToken" placeholder="可留空，填写 hf_xxxx Token"></el-input>
+        <span class="token-hint">留空 = 内置默认</span>
+      </div>
+
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="编辑" name="edit">
+          <div class="editor-layout">
+            <div class="editor-card">
+              <div class="card-title">输入</div>
+              <div class="field-label">源图 - 可用画笔在图上标注区域</div>
+              <div
+                ref="editCanvasWrap"
+                :class="['canvas-wrap', { 'has-image': !!editBgImage }]"
+                @click="handleCanvasWrapClick('edit', $event)"
+                @dragover.prevent
+                @drop.prevent="handleCanvasDrop('edit', $event)">
+                <div v-if="!editBgImage" class="empty-hint">点击上传图片</div>
+                <canvas
+                  v-show="editBgImage"
+                  ref="editCanvas"
+                  @mousedown="handleEditDown"
+                  @mousemove="handleEditMove"
+                  @mouseup="handleEditUp"
+                  @mouseleave="handleEditLeave"></canvas>
+              </div>
+              <input ref="editFileInput" class="hidden-input" type="file" accept="image/*" @change="handleSelectFile('edit', $event)">
+
+              <div v-if="editBgImage" class="brush-bar">
+                <div
+                  v-for="item in editColors"
+                  :key="item.value"
+                  :class="['color-dot', { active: editBrushColor === item.value }]"
+                  :style="{ background: item.value, borderColor: item.borderColor || 'transparent' }"
+                  @click="editBrushColor = item.value"></div>
+                <div class="brush-sep"></div>
+                <div class="brush-size-wrap">
+                  <span>大小</span>
+                  <el-slider v-model="editBrushSize" :min="2" :max="40" :show-tooltip="false"></el-slider>
+                  <span>{{ editBrushSize }}</span>
+                </div>
+                <div class="brush-sep"></div>
+                <el-button size="mini" @click="clearEditDraw">清除涂抹</el-button>
+                <el-button size="mini" @click="$refs.editFileInput.click()">更换图片</el-button>
+              </div>
+              <div class="brush-tip">红绿蓝黄紫白可用于标注区域，提示词里可写“去掉红色区域”等。</div>
+
+              <div class="field">
+                <div class="field-label">参考图（可选）</div>
+                <div class="upload-zone" :class="{ filled: !!refPreview }" @click="$refs.refFileInput.click()" @dragover.prevent @drop.prevent="handleRefDrop">
+                  <img v-if="refPreview" :src="refPreview" alt="ref">
+                  <span v-else>点击或拖拽参考图</span>
+                </div>
+                <input ref="refFileInput" class="hidden-input" type="file" accept="image/*" @change="handleSelectRefFile">
+              </div>
+
+              <div class="field">
+                <div class="field-label">编辑提示词 Prompt</div>
+                <el-input
+                  v-model.trim="editForm.prompt"
+                  type="textarea"
+                  :rows="3"
+                  placeholder='例如：去掉红色标注区域的文字，或 将"A2.com"改为"B3.com"'></el-input>
+              </div>
+
+              <el-collapse class="advanced-box">
+                <el-collapse-item title="高级设置" name="edit-advanced">
+                  <div class="field">
+                    <div class="field-label">Negative Prompt</div>
+                    <el-input v-model="editForm.negativePrompt" type="textarea" :rows="3"></el-input>
+                  </div>
+                  <div class="adv-grid">
+                    <div class="adv-item">
+                      <label>Seed</label>
+                      <el-input-number v-model="editForm.seed" :min="0" controls-position="right"></el-input-number>
+                    </div>
+                    <div class="adv-item adv-checkbox">
+                      <el-checkbox v-model="editForm.randomSeed">随机 Seed</el-checkbox>
+                    </div>
+                    <div class="adv-item">
+                      <label>Guidance Scale</label>
+                      <el-slider v-model="editForm.guidanceScale" :min="1" :max="10" :step="0.1" :show-tooltip="false"></el-slider>
+                      <span class="adv-value">{{ editForm.guidanceScale }}</span>
+                    </div>
+                    <div class="adv-item">
+                      <label>Steps</label>
+                      <el-slider v-model="editForm.steps" :min="1" :max="50" :step="1" :show-tooltip="false"></el-slider>
+                      <span class="adv-value">{{ editForm.steps }}</span>
+                    </div>
+                  </div>
+                </el-collapse-item>
+              </el-collapse>
+
+              <el-button class="run-btn" type="primary" :loading="runningEdit" @click="runEdit">开始 AI 编辑</el-button>
+              <div v-if="editStatus.text" :class="['status-box', editStatus.type]">{{ editStatus.text }}</div>
+            </div>
+
+            <div class="editor-card sticky-card">
+              <div class="card-title">结果</div>
+              <div v-if="!editResultUrl" class="result-placeholder">
+                <span class="placeholder-icon">🎨</span>
+                <span>编辑结果将显示在这里</span>
+              </div>
+              <div v-else class="result-img-wrap">
+                <img :src="editResultUrl" alt="edit-result">
+                <a class="dl-btn" :href="editResultUrl" download="ai_edit.png">下载结果</a>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="PNG贴图" name="png">
+          <div class="editor-layout">
+            <div class="editor-card">
+              <div class="card-title">输入</div>
+              <div class="intro-text">上传底图后用画笔涂抹放置区域，再上传 PNG，点击 Apply。PNG 会等比缩放到涂抹区域大小后居中贴入。</div>
+              <div class="field-label">底图 - 涂抹出放置区域</div>
+              <div
+                ref="pngCanvasWrap"
+                :class="['canvas-wrap', { 'has-image': !!pngBgImage }]"
+                @click="handleCanvasWrapClick('png', $event)"
+                @dragover.prevent
+                @drop.prevent="handleCanvasDrop('png', $event)">
+                <div v-if="!pngBgImage" class="empty-hint">点击上传底图</div>
+                <canvas
+                  v-show="pngBgImage"
+                  ref="pngCanvas"
+                  @mousedown="handlePngDown"
+                  @mousemove="handlePngMove"
+                  @mouseup="handlePngUp"
+                  @mouseleave="handlePngLeave"></canvas>
+              </div>
+              <input ref="pngBaseFileInput" class="hidden-input" type="file" accept="image/*" @change="handleSelectFile('png', $event)">
+
+              <div v-if="pngBgImage" class="brush-bar">
+                <div class="brush-size-wrap">
+                  <span>画笔大小</span>
+                  <el-slider v-model="pngBrushSize" :min="4" :max="60" :show-tooltip="false"></el-slider>
+                  <span>{{ pngBrushSize }}</span>
+                </div>
+                <div class="brush-sep"></div>
+                <el-button size="mini" @click="clearPngDraw">清除涂抹</el-button>
+                <el-button size="mini" @click="$refs.pngBaseFileInput.click()">更换底图</el-button>
+              </div>
+
+              <div class="field">
+                <div class="field-label">要贴入的 PNG（支持透明背景）</div>
+                <div class="upload-zone" :class="{ filled: !!pngOverlayPreview }" @click="$refs.pngOverlayFileInput.click()" @dragover.prevent @drop.prevent="handlePngOverlayDrop">
+                  <img v-if="pngOverlayPreview" :src="pngOverlayPreview" alt="png-overlay">
+                  <span v-else>点击或拖拽 PNG</span>
+                </div>
+                <input ref="pngOverlayFileInput" class="hidden-input" type="file" accept="image/png,image/*" @change="handleSelectPngOverlay">
+              </div>
+
+              <el-button class="run-btn" type="primary" :loading="runningPng" @click="runPng">Apply 贴入</el-button>
+              <div v-if="pngStatus.text" :class="['status-box', pngStatus.type]">{{ pngStatus.text }}</div>
+            </div>
+
+            <div class="editor-card sticky-card">
+              <div class="card-title">结果</div>
+              <div v-if="!pngResultUrl" class="result-placeholder">
+                <span class="placeholder-icon">🖼️</span>
+                <span>贴图结果将显示在这里</span>
+              </div>
+              <div v-else class="result-img-wrap">
+                <img :src="pngResultUrl" alt="png-result">
+                <a class="dl-btn" :href="pngResultUrl" download="png_placement.png">下载结果</a>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" :disabled="!currentResultBlob || confirming" :loading="confirming" @click="confirmReplace">确定替换封面</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { handleVerAutoImg } from '@/utils/index'
+
+const SPACE = 'https://fdsgsfjsfg-bianji123.hf.space'
+const DEFAULT_TOKEN = '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'
+
+export default {
+  name: 'AIImageEditorDialog',
+  props: {
+    image: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      activeTab: 'edit',
+      globalToken: '',
+      runningEdit: false,
+      runningPng: false,
+      confirming: false,
+      editStatus: { type: '', text: '' },
+      pngStatus: { type: '', text: '' },
+      editForm: {
+        prompt: '',
+        negativePrompt: 'worst quality, low quality, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, jpeg artifacts, signature, watermark, username, blurry',
+        seed: 0,
+        randomSeed: true,
+        guidanceScale: 1,
+        steps: 4
+      },
+      editColors: [
+        { value: '#FF0000' },
+        { value: '#00CC00' },
+        { value: '#0066FF' },
+        { value: '#FFFF00', borderColor: '#e2e8f0' },
+        { value: '#FF00FF' },
+        { value: '#FFFFFF', borderColor: '#e2e8f0' }
+      ],
+      editBrushColor: '#FF0000',
+      editBrushSize: 10,
+      editBgImage: null,
+      editDrawOffscreen: null,
+      editDrawing: false,
+      editLastX: 0,
+      editLastY: 0,
+      editCursorX: 0,
+      editCursorY: 0,
+      editOnCanvas: false,
+      refFile: null,
+      refPreview: '',
+      pngBgImage: null,
+      pngMaskOffscreen: null,
+      pngDrawing: false,
+      pngLastX: 0,
+      pngLastY: 0,
+      pngCursorX: 0,
+      pngCursorY: 0,
+      pngOnCanvas: false,
+      pngBrushSize: 20,
+      pngOverlayFile: null,
+      pngOverlayPreview: '',
+      editResultUrl: '',
+      pngResultUrl: '',
+      currentResultBlob: null,
+      tempObjectUrls: []
+    }
+  },
+  computed: {
+    imageDomain() {
+      return this.$store.getters.getSystemConfig.webImgReq || ''
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.image) {
+        this.loadInitialImage()
+      }
+    })
+  },
+  beforeDestroy() {
+    this.revokeObjectUrls()
+  },
+  methods: {
+    async loadInitialImage() {
+      const url = await this.resolveImageUrl(this.image)
+      this.loadImageFromUrl(url, 'edit')
+      this.loadImageFromUrl(url, 'png')
+    },
+    async resolveImageUrl(path) {
+      if (!path) {
+        return ''
+      }
+      if (/^blob:|^data:|^https?:\/\//.test(path)) {
+        return path
+      }
+      return handleVerAutoImg(`${this.imageDomain}${path}`)
+    },
+    registerObjectUrl(url) {
+      if (url && url.indexOf('blob:') === 0) {
+        this.tempObjectUrls.push(url)
+      }
+      return url
+    },
+    revokeObjectUrls() {
+      this.tempObjectUrls.forEach((url) => {
+        try {
+          URL.revokeObjectURL(url)
+        } catch (e) {
+          console.log(e)
+        }
+      })
+      this.tempObjectUrls = []
+    },
+    close() {
+      this.visible = false
+      this.$emit('close')
+    },
+    async confirmReplace() {
+      if (!this.currentResultBlob) {
+        this.$message.warning('请先生成 AI 结果')
+        return
+      }
+      this.confirming = true
+      try {
+        const path = await this.uploadToProject(this.currentResultBlob, `ai-cover-${Date.now()}.png`)
+        this.$message.success('封面替换成功')
+        this.$emit('success', path)
+      } catch (error) {
+        this.$message.error(error.message || '上传失败')
+      } finally {
+        this.confirming = false
+      }
+    },
+    async uploadToProject(blob, fileName) {
+      const formData = new FormData()
+      formData.append('file', blob, fileName)
+      const response = await fetch('/api/web/file/uploadImg', {
+        method: 'POST',
+        headers: {
+          Authorization: getToken()
+        },
+        body: formData
+      })
+      const data = await response.json()
+      if (!response.ok || data.code !== 200) {
+        throw new Error((data && data.msg) || '上传失败')
+      }
+      return data.data.path
+    },
+    getHfHeaders(isJson) {
+      const token = (this.globalToken || '').trim() || DEFAULT_TOKEN
+      const headers = {
+        Authorization: `Bearer ${token}`
+      }
+      if (isJson) {
+        headers['Content-Type'] = 'application/json'
+      }
+      return headers
+    },
+    handleCanvasWrapClick(type) {
+      if (type === 'edit' && !this.editBgImage) {
+        this.$refs.editFileInput.click()
+      }
+      if (type === 'png' && !this.pngBgImage) {
+        this.$refs.pngBaseFileInput.click()
+      }
+    },
+    handleCanvasDrop(type, event) {
+      const file = event.dataTransfer.files[0]
+      if (!file || file.type.indexOf('image/') !== 0) {
+        return
+      }
+      this.loadImageFromFile(file, type)
+    },
+    handleSelectFile(type, event) {
+      const file = event.target.files[0]
+      if (file) {
+        this.loadImageFromFile(file, type)
+      }
+      event.target.value = ''
+    },
+    handleSelectRefFile(event) {
+      const file = event.target.files[0]
+      if (file) {
+        this.setRefFile(file)
+      }
+      event.target.value = ''
+    },
+    handleRefDrop(event) {
+      const file = event.dataTransfer.files[0]
+      if (file) {
+        this.setRefFile(file)
+      }
+    },
+    setRefFile(file) {
+      this.refFile = file
+      this.refPreview = this.registerObjectUrl(URL.createObjectURL(file))
+    },
+    handleSelectPngOverlay(event) {
+      const file = event.target.files[0]
+      if (file) {
+        this.setPngOverlay(file)
+      }
+      event.target.value = ''
+    },
+    handlePngOverlayDrop(event) {
+      const file = event.dataTransfer.files[0]
+      if (file) {
+        this.setPngOverlay(file)
+      }
+    },
+    setPngOverlay(file) {
+      this.pngOverlayFile = file
+      this.pngOverlayPreview = this.registerObjectUrl(URL.createObjectURL(file))
+    },
+    loadImageFromFile(file, type) {
+      const url = this.registerObjectUrl(URL.createObjectURL(file))
+      this.loadImageFromUrl(url, type)
+    },
+    loadImageFromUrl(url, type) {
+      if (!url) {
+        return
+      }
+      const img = new Image()
+      img.onload = () => {
+        if (type === 'edit') {
+          this.setupEditCanvas(img)
+        } else {
+          this.setupPngCanvas(img)
+        }
+      }
+      img.src = url
+    },
+    setupEditCanvas(img) {
+      const canvas = this.$refs.editCanvas
+      const wrap = this.$refs.editCanvasWrap
+      const maxWidth = wrap.clientWidth || 520
+      const scale = Math.min(1, maxWidth / img.naturalWidth)
+      canvas.width = Math.round(img.naturalWidth * scale)
+      canvas.height = Math.round(img.naturalHeight * scale)
+      this.editBgImage = img
+      this.editDrawOffscreen = document.createElement('canvas')
+      this.editDrawOffscreen.width = canvas.width
+      this.editDrawOffscreen.height = canvas.height
+      this.editRedraw()
+    },
+    setupPngCanvas(img) {
+      const canvas = this.$refs.pngCanvas
+      const wrap = this.$refs.pngCanvasWrap
+      const maxWidth = wrap.clientWidth || 520
+      const scale = Math.min(1, maxWidth / img.naturalWidth)
+      canvas.width = Math.round(img.naturalWidth * scale)
+      canvas.height = Math.round(img.naturalHeight * scale)
+      this.pngBgImage = img
+      this.pngMaskOffscreen = document.createElement('canvas')
+      this.pngMaskOffscreen.width = canvas.width
+      this.pngMaskOffscreen.height = canvas.height
+      this.pngRedraw()
+    },
+    getCanvasPos(canvas, event) {
+      const rect = canvas.getBoundingClientRect()
+      return [
+        (event.clientX - rect.left) * (canvas.width / rect.width),
+        (event.clientY - rect.top) * (canvas.height / rect.height)
+      ]
+    },
+    drawCursorCircle(ctx, x, y, size) {
+      const radius = Math.max(1, size / 2)
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, Math.PI * 2)
+      ctx.strokeStyle = 'rgba(255,255,255,0.9)'
+      ctx.lineWidth = 2
+      ctx.stroke()
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, Math.PI * 2)
+      ctx.strokeStyle = 'rgba(0,0,0,0.7)'
+      ctx.lineWidth = 1
+      ctx.setLineDash([4, 4])
+      ctx.stroke()
+      ctx.restore()
+    },
+    editRedraw() {
+      if (!this.editBgImage || !this.$refs.editCanvas) {
+        return
+      }
+      const canvas = this.$refs.editCanvas
+      const ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(this.editBgImage, 0, 0, canvas.width, canvas.height)
+      if (this.editDrawOffscreen) {
+        ctx.drawImage(this.editDrawOffscreen, 0, 0)
+      }
+      if (this.editOnCanvas) {
+        this.drawCursorCircle(ctx, this.editCursorX, this.editCursorY, this.editBrushSize)
+      }
+    },
+    pngRedraw() {
+      if (!this.pngBgImage || !this.$refs.pngCanvas) {
+        return
+      }
+      const canvas = this.$refs.pngCanvas
+      const ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(this.pngBgImage, 0, 0, canvas.width, canvas.height)
+      if (this.pngMaskOffscreen) {
+        ctx.save()
+        ctx.globalAlpha = 0.45
+        ctx.drawImage(this.pngMaskOffscreen, 0, 0)
+        ctx.restore()
+      }
+      if (this.pngOnCanvas) {
+        this.drawCursorCircle(ctx, this.pngCursorX, this.pngCursorY, this.pngBrushSize)
+      }
+    },
+    clearEditDraw() {
+      if (!this.editDrawOffscreen) {
+        return
+      }
+      this.editDrawOffscreen.getContext('2d').clearRect(0, 0, this.editDrawOffscreen.width, this.editDrawOffscreen.height)
+      this.editRedraw()
+    },
+    clearPngDraw() {
+      if (!this.pngMaskOffscreen) {
+        return
+      }
+      this.pngMaskOffscreen.getContext('2d').clearRect(0, 0, this.pngMaskOffscreen.width, this.pngMaskOffscreen.height)
+      this.pngRedraw()
+    },
+    handleEditDown(event) {
+      if (!this.editBgImage) {
+        return
+      }
+      this.editDrawing = true
+      const position = this.getCanvasPos(this.$refs.editCanvas, event)
+      this.editLastX = position[0]
+      this.editLastY = position[1]
+    },
+    handleEditMove(event) {
+      if (!this.editBgImage) {
+        return
+      }
+      const position = this.getCanvasPos(this.$refs.editCanvas, event)
+      this.editCursorX = position[0]
+      this.editCursorY = position[1]
+      this.editOnCanvas = true
+      if (this.editDrawing) {
+        const ctx = this.editDrawOffscreen.getContext('2d')
+        ctx.strokeStyle = this.editBrushColor
+        ctx.lineWidth = this.editBrushSize
+        ctx.lineCap = 'round'
+        ctx.lineJoin = 'round'
+        ctx.globalAlpha = 0.85
+        ctx.beginPath()
+        ctx.moveTo(this.editLastX, this.editLastY)
+        ctx.lineTo(position[0], position[1])
+        ctx.stroke()
+        this.editLastX = position[0]
+        this.editLastY = position[1]
+      }
+      this.editRedraw()
+    },
+    handleEditUp() {
+      this.editDrawing = false
+    },
+    handleEditLeave() {
+      this.editDrawing = false
+      this.editOnCanvas = false
+      this.editRedraw()
+    },
+    handlePngDown(event) {
+      if (!this.pngBgImage) {
+        return
+      }
+      this.pngDrawing = true
+      const position = this.getCanvasPos(this.$refs.pngCanvas, event)
+      this.pngLastX = position[0]
+      this.pngLastY = position[1]
+    },
+    handlePngMove(event) {
+      if (!this.pngBgImage) {
+        return
+      }
+      const position = this.getCanvasPos(this.$refs.pngCanvas, event)
+      this.pngCursorX = position[0]
+      this.pngCursorY = position[1]
+      this.pngOnCanvas = true
+      if (this.pngDrawing) {
+        const ctx = this.pngMaskOffscreen.getContext('2d')
+        ctx.fillStyle = '#FF6B35'
+        ctx.strokeStyle = '#FF6B35'
+        ctx.lineWidth = this.pngBrushSize
+        ctx.lineCap = 'round'
+        ctx.beginPath()
+        ctx.arc(position[0], position[1], this.pngBrushSize / 2, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.beginPath()
+        ctx.moveTo(this.pngLastX, this.pngLastY)
+        ctx.lineTo(position[0], position[1])
+        ctx.stroke()
+        this.pngLastX = position[0]
+        this.pngLastY = position[1]
+      }
+      this.pngRedraw()
+    },
+    handlePngUp() {
+      this.pngDrawing = false
+    },
+    handlePngLeave() {
+      this.pngDrawing = false
+      this.pngOnCanvas = false
+      this.pngRedraw()
+    },
+    fileData(path, name, mime) {
+      return {
+        path,
+        orig_name: name,
+        mime_type: mime,
+        meta: {
+          _type: 'gradio.FileData'
+        }
+      }
+    },
+    async uploadBlobToSpace(blobOrFile, name) {
+      const formData = new FormData()
+      formData.append('files', blobOrFile, name)
+      const response = await fetch(`${SPACE}/gradio_api/upload`, {
+        method: 'POST',
+        headers: this.getHfHeaders(false),
+        body: formData
+      })
+      if (!response.ok) {
+        throw new Error(`上传失败 ${response.status}`)
+      }
+      const data = await response.json()
+      return Array.isArray(data) ? data[0] : data
+    },
+    async callSpace(fn, data) {
+      const response = await fetch(`${SPACE}/gradio_api/call/${fn}`, {
+        method: 'POST',
+        headers: this.getHfHeaders(true),
+        body: JSON.stringify({ data })
+      })
+      if (!response.ok) {
+        const body = await response.text().catch(() => '')
+        throw new Error(`请求失败 ${response.status}${body ? `: ${body.slice(0, 120)}` : ''}`)
+      }
+      return response.json()
+    },
+    async pollResult(eventId, fn) {
+      const response = await fetch(`${SPACE}/gradio_api/call/${fn}/${eventId}`, {
+        headers: this.getHfHeaders(false)
+      })
+      if (!response.ok) {
+        throw new Error(`轮询失败 ${response.status}`)
+      }
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+      const deadline = Date.now() + 300000
+      let waiting = true
+      while (waiting) {
+        if (Date.now() > deadline) {
+          throw new Error('超时（5分钟），请重试')
+        }
+        const chunk = await reader.read()
+        if (chunk.value) {
+          buffer += decoder.decode(chunk.value, { stream: !chunk.done })
+        }
+        const lines = buffer.split('\n')
+        buffer = chunk.done ? '' : (lines.pop() || '')
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines[i]
+          if (!line.trim() || line.indexOf('data:') !== 0) {
+            continue
+          }
+          const raw = line.slice(5).trim()
+          if (!raw || raw === 'null') {
+            continue
+          }
+          let parsed
+          try {
+            parsed = JSON.parse(raw)
+          } catch (e) {
+            parsed = null
+          }
+          const result = Array.isArray(parsed) ? parsed : (parsed && Array.isArray(parsed.data) ? parsed.data : null)
+          if (result && result.length && result[0] !== null) {
+            return result
+          }
+          const errorMessage = parsed && (parsed.error || parsed.message || parsed.detail)
+          if (errorMessage) {
+            throw new Error(String(errorMessage))
+          }
+        }
+        if (chunk.done) {
+          waiting = false
+          throw new Error('连接已关闭，未收到结果，请重试')
+        }
+      }
+    },
+    async applyResult(type, fileInfo) {
+      const filePath = typeof fileInfo === 'string' ? fileInfo : fileInfo.path
+      const mimeType = (fileInfo && fileInfo.mime_type) || 'image/png'
+      const response = await fetch(`${SPACE}/gradio_api/file=${filePath}`, {
+        headers: this.getHfHeaders(false)
+      })
+      if (!response.ok) {
+        throw new Error(`结果下载失败 ${response.status}`)
+      }
+      const blob = await response.blob()
+      const resultBlob = new Blob([blob], { type: mimeType })
+      const url = this.registerObjectUrl(URL.createObjectURL(resultBlob))
+      if (type === 'edit') {
+        this.editResultUrl = url
+      } else {
+        this.pngResultUrl = url
+      }
+      this.currentResultBlob = resultBlob
+      this.activeTab = type
+    },
+    exportEditComposite() {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        canvas.width = this.editBgImage.naturalWidth
+        canvas.height = this.editBgImage.naturalHeight
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(this.editBgImage, 0, 0)
+        if (this.editDrawOffscreen) {
+          ctx.drawImage(this.editDrawOffscreen, 0, 0, canvas.width, canvas.height)
+        }
+        canvas.toBlob(resolve, 'image/png')
+      })
+    },
+    exportPngBackground() {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        canvas.width = this.pngBgImage.naturalWidth
+        canvas.height = this.pngBgImage.naturalHeight
+        canvas.getContext('2d').drawImage(this.pngBgImage, 0, 0)
+        canvas.toBlob(resolve, 'image/png')
+      })
+    },
+    exportPngMask() {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        canvas.width = this.pngBgImage.naturalWidth
+        canvas.height = this.pngBgImage.naturalHeight
+        const ctx = canvas.getContext('2d')
+        if (this.pngMaskOffscreen) {
+          ctx.drawImage(this.pngMaskOffscreen, 0, 0, canvas.width, canvas.height)
+        }
+        canvas.toBlob(resolve, 'image/png')
+      })
+    },
+    async runEdit() {
+      if (!this.editBgImage) {
+        this.$message.warning('请先上传图片')
+        return
+      }
+      if (!this.editForm.prompt) {
+        this.$message.warning('请输入提示词')
+        return
+      }
+      this.runningEdit = true
+      this.editStatus = { type: 's-running', text: '上传中...' }
+      try {
+        const compositeBlob = await this.exportEditComposite()
+        const compositePath = await this.uploadBlobToSpace(compositeBlob, 'source.png')
+        let refPath = null
+        if (this.refFile) {
+          refPath = await this.uploadBlobToSpace(this.refFile, this.refFile.name || 'ref.png')
+        }
+        this.editStatus = { type: 's-running', text: 'AI 处理中，请稍候...' }
+        const payload = [
+          {
+            background: this.fileData(compositePath, 'source.png', 'image/png'),
+            layers: [],
+            composite: this.fileData(compositePath, 'source.png', 'image/png')
+          },
+          refPath ? this.fileData(refPath, this.refFile.name || 'ref.png', this.refFile.type || 'image/png') : null,
+          this.editForm.prompt,
+          this.editForm.negativePrompt,
+          this.editForm.seed,
+          this.editForm.randomSeed,
+          this.editForm.guidanceScale,
+          this.editForm.steps
+        ]
+        const inferResp = await this.callSpace('infer', payload)
+        const result = await this.pollResult(inferResp.event_id, 'infer')
+        await this.applyResult('edit', result[0])
+        this.editStatus = { type: 's-success', text: '编辑完成' }
+      } catch (error) {
+        this.editStatus = { type: 's-error', text: error.message || 'AI 编辑失败' }
+      } finally {
+        this.runningEdit = false
+      }
+    },
+    async runPng() {
+      if (!this.pngBgImage) {
+        this.$message.warning('请先上传底图')
+        return
+      }
+      if (!this.pngOverlayFile) {
+        this.$message.warning('请上传要贴入的 PNG 文件')
+        return
+      }
+      this.runningPng = true
+      this.pngStatus = { type: 's-running', text: '处理中，请稍候...' }
+      try {
+        const result = await Promise.all([
+          this.uploadBlobToSpace(await this.exportPngBackground(), 'background.png'),
+          this.uploadBlobToSpace(await this.exportPngMask(), 'mask.png'),
+          this.uploadBlobToSpace(this.pngOverlayFile, this.pngOverlayFile.name || 'overlay.png')
+        ])
+        const payload = [
+          {
+            background: this.fileData(result[0], 'background.png', 'image/png'),
+            layers: [this.fileData(result[1], 'mask.png', 'image/png')],
+            composite: null
+          },
+          this.fileData(result[2], this.pngOverlayFile.name || 'overlay.png', this.pngOverlayFile.type || 'image/png')
+        ]
+        const inferResp = await this.callSpace('paste_png_into_mask', payload)
+        const inferResult = await this.pollResult(inferResp.event_id, 'paste_png_into_mask')
+        await this.applyResult('png', inferResult[0])
+        this.pngStatus = { type: 's-success', text: '贴图完成' }
+      } catch (error) {
+        this.pngStatus = { type: 's-error', text: error.message || 'PNG 贴图失败' }
+      } finally {
+        this.runningPng = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-image-editor {
+  max-height: 72vh;
+  overflow-y: auto;
+  padding: 0 8px;
+}
+
+.editor-header {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.editor-header h1 {
+  font-size: 22px;
+  color: #1a1a2e;
+  font-weight: 700;
+}
+
+.editor-header p {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.token-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 18px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  margin-bottom: 16px;
+}
+
+.token-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #cbd5e1;
+}
+
+.token-dot.active {
+  background: #22c55e;
+}
+
+.token-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+}
+
+.token-hint {
+  font-size: 11px;
+  color: #94a3b8;
+  white-space: nowrap;
+}
+
+.editor-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 20px;
+}
+
+.editor-card {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 14px;
+  padding: 24px;
+}
+
+.sticky-card {
+  position: sticky;
+  top: 0;
+}
+
+.card-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  margin-bottom: 14px;
+}
+
+.field,
+.advanced-box,
+.run-btn,
+.status-box {
+  margin-top: 16px;
+}
+
+.field-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 6px;
+}
+
+.intro-text,
+.brush-tip {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.6;
+}
+
+.brush-tip {
+  margin-top: 6px;
+}
+
+.hidden-input {
+  display: none;
+}
+
+.canvas-wrap,
+.upload-zone {
+  border: 2px dashed #cbd5e1;
+  border-radius: 10px;
+  background: #f8fafc;
+  transition: border-color .2s, background .2s;
+}
+
+.canvas-wrap {
+  position: relative;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: crosshair;
+}
+
+.canvas-wrap:hover,
+.upload-zone:hover {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+.canvas-wrap.has-image {
+  border-style: solid;
+}
+
+.empty-hint {
+  color: #cbd5e1;
+  font-size: 14px;
+  text-align: center;
+}
+
+.canvas-wrap canvas {
+  display: block;
+  max-width: 100%;
+}
+
+.upload-zone {
+  min-height: 96px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.upload-zone.filled {
+  border-style: solid;
+  padding: 6px;
+}
+
+.upload-zone img {
+  display: block;
+  width: 100%;
+  max-height: 140px;
+  object-fit: contain;
+  border-radius: 6px;
+}
+
+.brush-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+.color-dot {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 3px solid transparent;
+  flex-shrink: 0;
+}
+
+.color-dot.active {
+  border-color: #1e293b !important;
+}
+
+.brush-sep {
+  width: 1px;
+  height: 24px;
+  background: #e2e8f0;
+}
+
+.brush-size-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 220px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.brush-size-wrap .el-slider {
+  flex: 1;
+}
+
+.adv-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.adv-item label {
+  display: block;
+  font-size: 11px;
+  color: #64748b;
+  margin-bottom: 4px;
+}
+
+.adv-checkbox {
+  display: flex;
+  align-items: center;
+  padding-top: 20px;
+}
+
+.adv-value {
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.run-btn {
+  width: 100%;
+}
+
+.status-box {
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.s-running {
+  background: #fef9c3;
+  color: #854d0e;
+}
+
+.s-success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.s-error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.result-placeholder {
+  min-height: 420px;
+  border: 2px dashed #e2e8f0;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #cbd5e1;
+  font-size: 13px;
+}
+
+.placeholder-icon {
+  font-size: 36px;
+}
+
+.result-img-wrap img {
+  width: 100%;
+  display: block;
+  border-radius: 10px;
+}
+
+.dl-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+@media (max-width: 1200px) {
+  .editor-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .sticky-card {
+    position: static;
+  }
+}
+</style>