diff --git a/frontend-vue/public/logo.jpg b/frontend-vue/public/logo.jpg
new file mode 100644
index 00000000..ab825d78
Binary files /dev/null and b/frontend-vue/public/logo.jpg differ
diff --git a/frontend-vue/src/pages/brand/components/BrandBrandTab.vue b/frontend-vue/src/pages/brand/components/BrandBrandTab.vue
index 06fad2db..d1fd23be 100644
--- a/frontend-vue/src/pages/brand/components/BrandBrandTab.vue
+++ b/frontend-vue/src/pages/brand/components/BrandBrandTab.vue
@@ -148,8 +148,9 @@ const runMode = ref<'immediate' | 'queue'>('immediate')
 const submitting = ref(false)
 const tasks = ref<BrandTaskItem[]>([])
 
-// 品牌检测由桌面客户端本地执行：以"文件夹选择"桥（Web 降级桥不提供）判定桌面运行时，浏览器下仅可预览
-const hasBridge = computed(() => Boolean(getPywebviewApi()?.select_brand_folder))
+// 品牌检测已服务端化（/api/brand/* 走域名）：浏览器降级桥提供文件选择，Web 端可用；
+// 文件夹选择/模板桥等降级桥未实现的方法在点击时提示"仅桌面端"
+const hasBridge = computed(() => Boolean(getPywebviewApi()))
 const hasUid = computed(() => {
   const raw = typeof window === 'undefined' ? '' : window.localStorage.getItem('uid') || ''
   const numeric = Number(raw.trim())
diff --git a/frontend-vue/src/pages/home/DesktopHomePage.vue b/frontend-vue/src/pages/home/DesktopHomePage.vue
index e1753129..6892bd8d 100644
--- a/frontend-vue/src/pages/home/DesktopHomePage.vue
+++ b/frontend-vue/src/pages/home/DesktopHomePage.vue
@@ -76,10 +76,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { requestGetJson } from '@/shared/api/http'
 import { buildJavaUrl } from '@/shared/api/url'
-import { isDesktopRuntime } from '@/shared/bridges/pywebview'
+import { getPywebviewApi, isDesktopRuntime } from '@/shared/bridges/pywebview'
 import { resolvePageHref } from '@/shared/page-prefix'
 
 const username = ref('')
@@ -90,10 +90,8 @@ const updateReady = ref(false)
 const updateFileUrl = ref('')
 const toastText = ref('')
 
-// 桌面端走 Flask /logout（清 cookie 302 登录页）；Web 独立部署 / dev 跳登录页并清本地 token（login.html?logout=1）
-const logoutHref = computed(() =>
-  isDesktopRuntime.value ? '/logout' : `${resolvePageHref('/new_web_source/login.html')}?logout=1`,
-)
+// 桌面端原 Flask /logout 已随瘦身下线：统一跳登录页并清本地 token（login.html?logout=1）
+const logoutHref = computed(() => `${resolvePageHref('/new_web_source/login.html')}?logout=1`)
 
 type PermissionState = { amazon: boolean; video: boolean; image: boolean }
 const permissionState = ref<PermissionState>({ amazon: false, video: false, image: false })
@@ -252,14 +250,12 @@ async function doUpdate() {
   updateHint.value = '正在下载并准备更新，程序将自动退出...'
   updateReady.value = false
   try {
-    const resp = await window.fetch('/api/update/do', {
-      method: 'POST',
-      credentials: 'same-origin',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ file_url: updateFileUrl.value }),
-    })
-    const result = await resp.json().catch(() => ({}))
-    updateHint.value = result.success ? '更新已启动，程序即将退出...' : (result.error || '更新启动失败')
+    // 版本更新是桌面客户端专属动作：经浏览器桥调用本地 update 下载/启动（服务端化后无 /api/update/do）
+    const bridge = getPywebviewApi()
+    const result = bridge?.do_update_app ? await bridge.do_update_app(updateFileUrl.value) : undefined
+    updateHint.value = result?.success
+      ? '更新已启动，程序即将退出...'
+      : (result?.error || '当前环境不支持自动更新')
   } catch {
     updateHint.value = '请求更新失败，请重试'
   }
@@ -268,10 +264,16 @@ async function doUpdate() {
 onMounted(() => {
   void loadCurrentUser()
   void loadPermissions()
-  // 版本检测/更新由桌面客户端 Flask 提供，Web 版不发起
-  if (isDesktopRuntime.value) {
-    void fetchVersion().catch(() => undefined)
-  }
+  // 版本检测/更新仅桌面客户端（本地 Flask image 蓝图）提供；桌面桥注入后立即拉取
+  watch(
+    isDesktopRuntime,
+    (runtime) => {
+      if (runtime) {
+        void fetchVersion().catch(() => undefined)
+      }
+    },
+    { immediate: true },
+  )
 })
 </script>
 
diff --git a/frontend-vue/src/pages/image/ImageWorkbenchPage.vue b/frontend-vue/src/pages/image/ImageWorkbenchPage.vue
new file mode 100644
index 00000000..0e3148e0
--- /dev/null
+++ b/frontend-vue/src/pages/image/ImageWorkbenchPage.vue
@@ -0,0 +1,1519 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref } from 'vue'
+import './index.css'
+
+import { STORAGE_API_KEY, STORAGE_AUTO_SAVE_PATH } from './workbench-shared'
+
+import TextToImagePanel from './components/panels/TextToImagePanel.vue'
+import MainImagePanel from './components/panels/MainImagePanel.vue'
+import ProductPosterPanel from './components/panels/ProductPosterPanel.vue'
+import ClonePosterPanel from './components/panels/ClonePosterPanel.vue'
+import ClothingDetailPanel from './components/panels/ClothingDetailPanel.vue'
+import ExtremeDetailPanel from './components/panels/ExtremeDetailPanel.vue'
+import CloneDetailPanel from './components/panels/CloneDetailPanel.vue'
+
+interface BuildResult {
+  params?: Record<string, unknown>
+  error?: string
+}
+type PanelApi = { buildParams(): BuildResult }
+
+function asPanelApi(inst: unknown): PanelApi | undefined {
+  const api = inst as PanelApi | undefined
+  return api && typeof api?.buildParams === 'function' ? api : undefined
+}
+
+const logoUrl = '/logo.jpg'
+
+/* ==================== 栏目定义 ==================== */
+const GROUP1 = [
+  { panel: 'textToImage', label: '反推词', maxImages: 0 },
+  { panel: 'productMainImage', label: '产品主图', maxImages: 8 },
+  { panel: 'buyerShow', label: '买家秀', maxImages: 8 },
+]
+const GROUP2 = [
+  { panel: 'productPoster', label: '产品海报', maxImages: 6 },
+  { panel: 'clonePoster', label: '克隆海报', maxImages: 6 },
+]
+const GROUP3 = [
+  { panel: 'clothingDetail', label: '服装详情', maxImages: 8 },
+  { panel: 'extremeDetail', label: '极致详情', maxImages: 8 },
+  { panel: 'cloneDetail', label: '克隆详情', maxImages: 8 },
+]
+
+const HISTORY_TABS = [
+  { value: '', label: '全部' },
+  { value: 'textToImage', label: '反推词' },
+  { value: 'clonePoster', label: '克隆海报' },
+  { value: 'clothingDetail', label: '服装详情' },
+  { value: 'buyerShow', label: '买家秀' },
+  { value: 'productPoster', label: '产品海报' },
+  { value: 'extremeDetail', label: '极致详情' },
+  { value: 'productMainImage', label: '产品主图' },
+  { value: 'cloneDetail', label: '克隆详情' },
+]
+
+const activePanel = ref<'textToImage' | 'productMainImage' | 'buyerShow' | 'productPoster' | 'clonePoster' | 'clothingDetail' | 'extremeDetail' | 'cloneDetail'>('buyerShow')
+
+const mainPanelTarget = computed<'productMainImage' | 'buyerShow'>(() =>
+  activePanel.value === 'buyerShow' ? 'buyerShow' : 'productMainImage',
+)
+
+const showMainPanel = computed(() => activePanel.value === 'productMainImage' || activePanel.value === 'buyerShow')
+
+/* 各面板组件引用（用于取参生成） */
+const textToImageRef = ref<unknown>()
+const productMainRef = ref<unknown>()
+const productPosterRef = ref<unknown>()
+const clonePosterRef = ref<unknown>()
+const clothingDetailRef = ref<unknown>()
+const extremeDetailRef = ref<unknown>()
+const cloneDetailRef = ref<unknown>()
+
+function activePanelApi(): PanelApi | undefined {
+  switch (activePanel.value) {
+    case 'textToImage':
+      return asPanelApi(textToImageRef.value)
+    case 'productMainImage':
+    case 'buyerShow':
+      return asPanelApi(productMainRef.value)
+    case 'productPoster':
+      return asPanelApi(productPosterRef.value)
+    case 'clonePoster':
+      return asPanelApi(clonePosterRef.value)
+    case 'clothingDetail':
+      return asPanelApi(clothingDetailRef.value)
+    case 'extremeDetail':
+      return asPanelApi(extremeDetailRef.value)
+    case 'cloneDetail':
+      return asPanelApi(cloneDetailRef.value)
+    default:
+      return undefined
+  }
+}
+
+/* ==================== 工作台（按栏目保留状态） ==================== */
+interface PanelState {
+  images: string[]
+  imageIds: (string | number | null | undefined)[]
+  stitchOrder: number[] | null
+  manualStitchBarVisible: boolean
+  prompts: string[]
+  longImageUrl: string | null
+}
+
+const panelStates = reactive<Record<string, PanelState>>({})
+
+function stateOf(panel: string): PanelState {
+  if (!panelStates[panel]) {
+    panelStates[panel] = {
+      images: [],
+      imageIds: [],
+      stitchOrder: null,
+      manualStitchBarVisible: false,
+      prompts: [],
+      longImageUrl: null,
+    }
+  }
+  return panelStates[panel]
+}
+
+const currentState = computed(() => stateOf(activePanel.value))
+
+function stitchOrderIndexOf(state: PanelState, i: number): number {
+  const order = state.stitchOrder
+  if (!order || order.length === 0) return 0
+  const pos = order.indexOf(i)
+  return pos >= 0 ? pos + 1 : 0
+}
+
+const generatingWorkspaceIndex = ref(-1)
+const isGenerating = ref(false)
+const previewLoading = ref(false)
+const stitchSaving = ref(false)
+const generatingPanelId = ref<string | null>(null)
+let currentAbortController: AbortController | null = null
+
+const promptCardsOpen = ref(false)
+
+/* 长图前端拼接预览缓存 */
+const stitchCache = new Map<string, string>()
+let stitchDebounceTimer: ReturnType<typeof setTimeout> | null = null
+let stitchBuildSeq = 0
+
+function showPromptCards() {
+  promptCardsOpen.value = true
+}
+function hidePromptCards() {
+  promptCardsOpen.value = false
+}
+
+/* ==================== 设置 ==================== */
+const settingsOpen = ref(false)
+const apiKeyInput = ref('')
+const autoSavePathInput = ref('')
+const settingsVersionText = ref('当前版本: v1.0.0')
+const settingsUpdateHint = ref('')
+const btnDownloadUpdateVisible = ref(false)
+let latestVersionInfo: Record<string, unknown> | null = null
+
+function getApiKey() {
+  return (localStorage.getItem(STORAGE_API_KEY) || '').trim()
+}
+function getAutoSavePath() {
+  return (localStorage.getItem(STORAGE_AUTO_SAVE_PATH) || '').trim()
+}
+
+function openSettings() {
+  apiKeyInput.value = getApiKey()
+  autoSavePathInput.value = getAutoSavePath() || ''
+  settingsOpen.value = true
+}
+function closeSettings() {
+  const key = apiKeyInput.value.trim()
+  localStorage.setItem(STORAGE_API_KEY, key)
+  settingsOpen.value = false
+}
+function onApiKeyInput() {
+  localStorage.setItem(STORAGE_API_KEY, apiKeyInput.value)
+}
+function onAutoSaveInput() {
+  localStorage.setItem(STORAGE_AUTO_SAVE_PATH, autoSavePathInput.value.trim())
+}
+async function chooseFolder() {
+  const w = window as unknown as {
+    pywebview?: { api?: { select_folder?: () => Promise<string> } }
+  }
+  try {
+    const api = w.pywebview?.api
+    if (api?.select_folder) {
+      const path = await api.select_folder()
+      if (path) {
+        autoSavePathInput.value = path
+        localStorage.setItem(STORAGE_AUTO_SAVE_PATH, path)
+      }
+    } else {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.setAttribute('webkitdirectory', '')
+      input.setAttribute('directory', '')
+      input.style.display = 'none'
+      document.body.appendChild(input)
+      input.addEventListener('change', () => {
+        const f = input.files?.[0]
+        if (f) {
+          const p = ((f as File & { path?: string }).path || '').replace(/\\/g, '/').replace(/\/[^/]+$/, '')
+          if (p) {
+            autoSavePathInput.value = p
+            localStorage.setItem(STORAGE_AUTO_SAVE_PATH, p)
+          }
+        }
+        document.body.removeChild(input)
+      })
+      input.click()
+    }
+  } catch (e) {
+    console.warn('选择文件夹失败', e)
+  }
+}
+
+async function checkUpdate() {
+  settingsUpdateHint.value = '正在检测更新...'
+  btnDownloadUpdateVisible.value = false
+  try {
+    const resp = await fetch('/api/version', { credentials: 'same-origin' }).catch(() => null)
+    if (resp && resp.ok) {
+      const data = await resp.json()
+      latestVersionInfo = data
+      const currentVersion = String(data.version || '1.0.0').replace(/^v/i, '')
+      settingsVersionText.value = '当前版本: v' + currentVersion
+      if (data.has_update && data.latest_version) {
+        settingsUpdateHint.value = '发现新版本 v' + data.latest_version + (data.desc ? '：' + data.desc : '')
+        btnDownloadUpdateVisible.value = true
+      } else {
+        settingsUpdateHint.value = '已是最新版本'
+      }
+    } else {
+      settingsUpdateHint.value = '无法连接更新服务，请稍后重试。'
+    }
+  } catch (e) {
+    settingsUpdateHint.value = '检测更新失败'
+  }
+}
+
+async function doUpdate() {
+  const data = (latestVersionInfo || {}) as { file_url?: string }
+  if (!data.file_url) {
+    settingsUpdateHint.value = '暂无下载地址，请关注官方渠道。'
+    return
+  }
+  if (!window.confirm('有更新，是否现在更新？\n更新将下载安装包并重启程序。')) return
+  settingsUpdateHint.value = '正在下载并准备更新，程序将自动退出...'
+  try {
+    // 更新为桌面客户端专属动作：经由桌面桥（do_update_app）下载并启动 update.exe；Web 浏览器无此能力
+    const api = (
+      window as {
+        pywebview?: {
+          api?: { do_update_app?: (url: string) => Promise<{ success?: boolean; error?: string }> }
+        }
+      }
+    ).pywebview?.api
+    const result = api?.do_update_app ? await api.do_update_app(data.file_url) : undefined
+    settingsUpdateHint.value = result?.success
+      ? '更新已启动，程序即将退出...'
+      : (result?.error || '当前环境不支持自动更新')
+  } catch (e) {
+    settingsUpdateHint.value = '请求更新失败，请重试'
+  }
+}
+
+/* ==================== 生成 ==================== */
+function switchPanel(panel: string) {
+  hidePromptCards()
+  activePanel.value = panel as typeof activePanel.value
+  if (panel === 'textToImage' && currentState.value.prompts.length > 0) {
+    showPromptCards()
+  }
+}
+
+function orderedWorkspaceUrls(state: PanelState): string[] {
+  if (state.stitchOrder && state.stitchOrder.length > 0) {
+    return state.stitchOrder.map((idx) => state.images[idx]).filter(Boolean)
+  }
+  return state.images.slice()
+}
+
+function toggleStitchOrder(idx: number) {
+  const s = currentState.value
+  if (!s.stitchOrder || s.stitchOrder.length === 0) {
+    s.stitchOrder = [idx]
+  } else {
+    const pos = s.stitchOrder.indexOf(idx)
+    if (pos >= 0) s.stitchOrder = s.stitchOrder.filter((i) => i !== idx)
+    else s.stitchOrder = s.stitchOrder.concat([idx])
+  }
+  if (!s.stitchOrder || s.stitchOrder.length === 0) s.stitchOrder = null
+  renderStitchedPreview()
+}
+
+async function loadImages(urls: string[]): Promise<HTMLImageElement[]> {
+  return Promise.all(
+    urls.map(
+      (src) =>
+        new Promise<HTMLImageElement>((resolve, reject) => {
+          const img = new Image()
+          img.crossOrigin = 'anonymous'
+          img.onload = () => resolve(img)
+          img.onerror = () => reject(new Error('图片加载失败'))
+          img.src = src
+        }),
+    ),
+  )
+}
+
+function buildStitchedDataUrl(urls: string[]): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (urls.length === 0) {
+      reject(new Error('no images'))
+      return
+    }
+    loadImages(urls)
+      .then((imgs) => {
+        let maxW = 0
+        let totalH = 0
+        imgs.forEach((img) => {
+          const w = img.naturalWidth || img.width
+          const h = img.naturalHeight || img.height
+          if (w > maxW) maxW = w
+          totalH += h
+        })
+        const canvas = document.createElement('canvas')
+        canvas.width = maxW
+        canvas.height = totalH
+        const ctx = canvas.getContext('2d')
+        if (!ctx) throw new Error('canvas unavailable')
+        let y = 0
+        imgs.forEach((img) => {
+          const w = img.naturalWidth || img.width
+          const h = img.naturalHeight || img.height
+          ctx.drawImage(img, 0, y, w, h)
+          y += h
+        })
+        resolve(canvas.toDataURL('image/png'))
+      })
+      .catch(reject)
+  })
+}
+
+async function renderStitchedPreviewNow() {
+  const s = currentState.value
+  const urls = orderedWorkspaceUrls(s)
+  const seq = ++stitchBuildSeq
+  if (urls.length === 0) {
+    s.longImageUrl = null
+    return
+  }
+  // 若服务端已返回长图且顺序未变，直接使用
+  if (s.longImageUrl && JSON.stringify(s.stitchOrder ? s.stitchOrder.map((i) => s.images[i]).filter(Boolean) : s.images.slice()) === JSON.stringify(urls)) {
+    return
+  }
+  const cacheKey = activePanel.value + '\n' + JSON.stringify(urls)
+  if (stitchCache.has(cacheKey)) {
+    s.longImageUrl = stitchCache.get(cacheKey) || null
+    return
+  }
+  try {
+    const dataUrl = await buildStitchedDataUrl(urls)
+    if (seq !== stitchBuildSeq) return
+    stitchCache.set(cacheKey, dataUrl)
+    if (stitchCache.size > 5) {
+      const first = stitchCache.keys().next().value
+      if (first) stitchCache.delete(first)
+    }
+    s.longImageUrl = dataUrl
+  } catch (e) {
+    if (seq === stitchBuildSeq) s.longImageUrl = null
+    console.warn('前端拼接失败', e)
+  }
+}
+
+function renderStitchedPreview() {
+  if (stitchDebounceTimer) clearTimeout(stitchDebounceTimer)
+  stitchDebounceTimer = setTimeout(renderStitchedPreviewNow, 150)
+}
+
+async function urlToDataUrl(src: string): Promise<string> {
+  if (typeof src !== 'string') return ''
+  if (src.startsWith('data:')) return src
+  try {
+    const res = await fetch(src, { mode: 'cors' })
+    const blob = await res.blob()
+    return await new Promise((resolve, reject) => {
+      const r = new FileReader()
+      r.onload = () => resolve(String(r.result || ''))
+      r.onerror = () => reject(r.error || new Error('读取失败'))
+      r.readAsDataURL(blob)
+    })
+  } catch (e) {
+    console.warn('urlToDataUrl failed:', e)
+    return src
+  }
+}
+
+function alertError(err: unknown) {
+  window.alert('生成失败: ' + (err instanceof Error ? err.message : String(err)))
+}
+
+async function generateImagesFallback(params: Record<string, unknown>): Promise<Record<string, unknown>> {
+  const w = window as unknown as {
+    pywebview?: { api?: { generate_images?: (p: unknown) => Promise<Record<string, unknown>> } }
+  }
+  const api = w.pywebview?.api
+  if (api?.generate_images) return api.generate_images(params)
+  throw new Error('浏览器端 /api/generate 不可用')
+}
+
+async function callGenerate(rawParams: Record<string, unknown>) {
+  if (!getApiKey()) {
+    window.alert('请先在设置中配置 API Key 后再进行生成。')
+    openSettings()
+    return
+  }
+  const panelId = activePanel.value
+  const params: Record<string, unknown> = { ...rawParams, panel_type: panelId }
+  generatingPanelId.value = panelId
+  hidePromptCards()
+  const cardIndex = typeof rawParams.generatingCardIndex === 'number' ? rawParams.generatingCardIndex : undefined
+  const useCardLoading = cardIndex !== undefined && cardIndex >= 0
+  currentAbortController = new AbortController()
+  isGenerating.value = true
+  if (useCardLoading) {
+    generatingWorkspaceIndex.value = cardIndex
+  } else {
+    previewLoading.value = true
+  }
+  try {
+    const sendParams: Record<string, unknown> = { ...params }
+    delete sendParams.generatingCardIndex
+    sendParams.api_key = getApiKey()
+    let result: Record<string, unknown>
+    try {
+      const resp = await fetch('/api/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify(sendParams),
+        signal: currentAbortController.signal,
+      })
+      if (resp.status === 401) {
+        window.location.href = '/login'
+        return
+      }
+      result = await resp.json()
+    } catch (fetchErr) {
+      if (fetchErr instanceof DOMException && fetchErr.name === 'AbortError') throw fetchErr
+      result = await generateImagesFallback(sendParams)
+    }
+    previewLoading.value = false
+    generatingWorkspaceIndex.value = -1
+    const panelIdResolved = generatingPanelId.value != null ? generatingPanelId.value : activePanel.value
+    if (result.success) {
+      const isMenu1 = params.menu === 1
+      const promptsArr = Array.isArray(result.prompts) ? result.prompts : []
+      if (isMenu1 && promptsArr.length > 0) {
+        const st = stateOf(panelIdResolved)
+        st.prompts = promptsArr.map(String)
+        if (panelIdResolved === activePanel.value) showPromptCards()
+      } else if (Array.isArray(result.urls) && result.urls.length > 0) {
+        const urls = result.urls as string[]
+        const st = stateOf(panelIdResolved)
+        const isEditReplace = params.menu === 11 && cardIndex !== undefined && cardIndex >= 0
+        if (isEditReplace) {
+          if (st.images.length === 0) {
+            st.images = currentState.value.images.slice()
+            st.imageIds = currentState.value.imageIds.slice()
+          }
+          if (cardIndex < st.images.length) {
+            const longUrl = result.long_image_url
+            st.images[cardIndex] = longUrl && String(longUrl) !== '' ? String(longUrl) : urls[0]
+            if (result.history_id != null) {
+              if (!st.imageIds) st.imageIds = []
+              while (st.imageIds.length <= cardIndex) st.imageIds.push(null)
+              st.imageIds[cardIndex] = result.history_id as string
+            }
+          }
+        } else {
+          st.images = urls.slice()
+          if (result.history_id != null) {
+            st.imageIds = st.images.map(() => result.history_id as string)
+          }
+          const longUrl = result.long_image_url
+          st.longImageUrl = longUrl && String(longUrl) !== '' ? String(longUrl) : null
+        }
+        if (!isEditReplace) {
+          const displayUrl = (result.long_image_url && String(result.long_image_url) !== '' ? String(result.long_image_url) : urls[0]) as string
+          if (displayUrl) prependHistoryItem(displayUrl)
+        }
+        // 自动保存
+        const autoPath = getAutoSavePath()
+        const saveW = window as unknown as {
+          pywebview?: { api?: { save_image_to_folder?: (url: string, dir: string, name: string) => Promise<unknown> } }
+        }
+        if (!isEditReplace && autoPath && urls.length > 0) {
+          const api = saveW.pywebview?.api
+          if (api?.save_image_to_folder) {
+            const ts = new Date().toISOString().replace(/[-:]/g, '').slice(0, 15)
+            urls.forEach((url, i) => {
+              api.save_image_to_folder!(url, autoPath, `生成_${ts}_${i + 1}.png`).catch(() => {})
+            })
+          }
+        }
+        // 普通生成：刷新当前栏目的右侧长图预览（无服务端长图时前端重新拼接）
+        if (!isEditReplace && panelIdResolved === activePanel.value) {
+          renderStitchedPreview()
+        }
+      } else {
+        const errMsg = String(result.error || '生成失败')
+        if (!isMenu1 || promptsArr.length === 0) window.alert(errMsg)
+      }
+    } else {
+      window.alert(String(result.error || '生成失败'))
+    }
+  } catch (err) {
+    previewLoading.value = false
+    generatingWorkspaceIndex.value = -1
+    if (err instanceof DOMException && err.name === 'AbortError') {
+      // 用户取消，不提示
+    } else {
+      alertError(err)
+    }
+  } finally {
+    isGenerating.value = false
+    currentAbortController = null
+    generatingPanelId.value = null
+  }
+}
+
+function onGenerateClick() {
+  if (isGenerating.value) {
+    currentAbortController?.abort()
+    previewLoading.value = false
+    generatingWorkspaceIndex.value = -1
+    isGenerating.value = false
+    currentAbortController = null
+    return
+  }
+  const api = activePanelApi()
+  if (!api) return
+  const res = api.buildParams()
+  if (res.error) {
+    window.alert(res.error)
+    return
+  }
+  void callGenerate(res.params || {})
+}
+
+/* ==================== 历史图库 ==================== */
+interface HistoryItem {
+  id: string | number
+  panel_type: string
+  result_urls: string[]
+  long_image_url?: string | null
+  created_at?: string
+}
+
+const historyItems = ref<HistoryItem[]>([])
+const historyPage = ref(0)
+const historyHasMore = ref(true)
+const historyLoading = ref(false)
+const historyFilter = ref('')
+
+function formatHistoryTime(created_at?: string): string {
+  if (!created_at) return ''
+  if (created_at.length >= 16) return created_at.slice(11, 16)
+  if (created_at.length >= 5) return created_at.slice(-5)
+  return created_at
+}
+
+function thumbOf(item: HistoryItem): string {
+  return item.long_image_url || (item.result_urls[0] || '')
+}
+
+function prependHistoryItem(url: string) {
+  const time = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  historyItems.value.unshift({ id: 'new', panel_type: activePanel.value, result_urls: [url], created_at: time })
+  if (historyItems.value.length > 100) historyItems.value.pop()
+}
+
+async function loadHistoryPage(append: boolean) {
+  if (historyLoading.value) return
+  historyLoading.value = true
+  const page = append ? historyPage.value + 1 : 1
+  const url =
+    `/api/history?page=${page}&page_size=20` +
+    (historyFilter.value ? `&panel_type=${encodeURIComponent(historyFilter.value)}` : '')
+  try {
+    const resp = await fetch(url, { credentials: 'same-origin' })
+    if (resp.status === 401) {
+      window.location.href = '/login'
+      return
+    }
+    const data = await resp.json()
+    if (!data.success) throw new Error(data.error || '加载失败')
+    if (!append) historyItems.value = []
+    const items: HistoryItem[] = (data.items || []).filter((rec: HistoryItem) => (rec.result_urls || []).length > 0)
+    historyItems.value = historyItems.value.concat(items)
+    historyPage.value = data.page
+    historyHasMore.value = (data.page * data.page_size) < (data.total || 0)
+  } catch (err) {
+    console.warn('加载历史失败:', err)
+  } finally {
+    historyLoading.value = false
+  }
+}
+
+function selectHistoryFilter(value: string) {
+  historyFilter.value = value
+  historyPage.value = 0
+  historyHasMore.value = true
+  loadHistoryPage(false)
+}
+
+function openHistoryItem(item: HistoryItem) {
+  const urls = item.result_urls || []
+  const longUrl = item.long_image_url || null
+  const modalUrls = longUrl ? [longUrl].concat(urls) : urls
+  openImageModal(modalUrls, 0, { source: 'history', historyId: item.id })
+}
+
+/* ==================== 查看大图 ==================== */
+interface ModalSourceOpts {
+  source?: 'workspace' | 'history' | 'stitched'
+  historyId?: string | number | null
+}
+const imageModalOpen = ref(false)
+const imageModalImages = ref<string[]>([])
+const imageModalIndex = ref(0)
+const imageModalSource = ref<'workspace' | 'history' | 'stitched'>('history')
+const imageModalHistoryId = ref<string | number | null>(null)
+const modalShow = {
+  restore: false,
+  batchDownload: false,
+  downloadLong: false,
+  workspaceDownload: false,
+  workspaceEdit: false,
+  workspaceRegenerate: false,
+}
+
+function refreshModalFooter() {
+  const src = imageModalSource.value
+  const multi = imageModalImages.value.length > 1
+  modalShow.restore = src === 'history'
+  modalShow.batchDownload = src === 'history' && multi
+  modalShow.downloadLong = (src === 'history' && imageModalImages.value.length > 0) || src === 'stitched'
+  modalShow.workspaceDownload = src === 'workspace'
+  modalShow.workspaceEdit = src === 'workspace'
+  modalShow.workspaceRegenerate = src === 'workspace'
+}
+
+function imageModalVisible(img: string) {
+  return img.startsWith('data:') || img.startsWith('http')
+}
+
+function openImageModal(images: string[], index: number, opts?: ModalSourceOpts) {
+  const o = opts || {}
+  imageModalImages.value = (Array.isArray(images) ? images : [images]).map(String)
+  imageModalIndex.value = index >= 0 ? index : 0
+  imageModalSource.value = o.source || 'history'
+  imageModalHistoryId.value = o.historyId != null ? o.historyId : null
+  if (imageModalImages.value.length === 0) return
+  imageModalOpen.value = true
+  refreshModalFooter()
+}
+function closeImageModal() {
+  imageModalOpen.value = false
+}
+function modalPrev() {
+  if (imageModalImages.value.length <= 1) return
+  imageModalIndex.value = (imageModalIndex.value - 1 + imageModalImages.value.length) % imageModalImages.value.length
+}
+function modalNext() {
+  if (imageModalImages.value.length <= 1) return
+  imageModalIndex.value = (imageModalIndex.value + 1) % imageModalImages.value.length
+}
+
+function restoreToWorkspace() {
+  const srcs = imageModalImages.value
+  if (srcs.length === 0) return
+  hidePromptCards()
+  const st = currentState.value
+  if (imageModalSource.value === 'history') {
+    let longImage: string | null = null
+    const hid = imageModalHistoryId.value
+    const rec = hid != null ? historyItems.value.find((it) => String(it.id) === String(hid)) : null
+    if (rec?.long_image_url) longImage = rec.long_image_url
+    const keep = longImage ? srcs.filter((s) => s !== longImage) : srcs
+    st.images = keep
+    st.imageIds = keep.map(() => hid)
+    st.stitchOrder = null
+    st.longImageUrl = longImage
+    if (!longImage) renderStitchedPreview()
+    closeImageModal()
+    return
+  }
+  const img = srcs[imageModalIndex.value]
+  st.images.push(img)
+  st.imageIds.push(null)
+  st.stitchOrder = null
+  renderStitchedPreview()
+  closeImageModal()
+}
+
+async function downloadImage(src: string, filename: string) {
+  const fn = filename || 'image.png'
+  const w = window as unknown as {
+    pywebview?: { api?: { save_image?: (urlOrData: string, filename: string) => Promise<{ success: boolean; error?: string }> } }
+  }
+  const api = w.pywebview?.api
+  if (api?.save_image) {
+    let urlOrData = src
+    if (src.startsWith('blob:')) {
+      const res = await fetch(src)
+      const blob = await res.blob()
+      urlOrData = await new Promise((resolve) => {
+        const r = new FileReader()
+        r.onload = () => resolve(String(r.result || ''))
+        r.readAsDataURL(blob)
+      })
+    }
+    const ret = await api.save_image(urlOrData, fn)
+    if (!ret?.success) {
+      if (ret?.error !== '用户取消') window.alert('下载失败: ' + (ret?.error || '未知错误'))
+    }
+    return
+  }
+  // 浏览器降级：后端代理下载
+  if (/^https?:\/\//.test(src)) {
+    const proxyUrl = '/api/download?url=' + encodeURIComponent(src) + '&filename=' + encodeURIComponent(fn)
+    const res = await fetch(proxyUrl, { credentials: 'same-origin' })
+    if (!res.ok) throw new Error('下载失败')
+    const blob = await res.blob()
+    triggerBlobDownload(blob, fn)
+    return
+  }
+  try {
+    const res = await fetch(src)
+    const blob = await res.blob()
+    triggerBlobDownload(blob, fn)
+  } catch (err) {
+    console.warn('下载失败:', err)
+    window.alert('下载失败: ' + (err instanceof Error ? err.message : String(err)))
+  }
+}
+
+function triggerBlobDownload(blob: Blob, filename: string) {
+  const blobUrl = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = blobUrl
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(blobUrl)
+}
+
+async function modalDownloadCurrent() {
+  const src = imageModalImages.value[imageModalIndex.value]
+  await downloadImage(src, `原图_${imageModalIndex.value + 1}.png`)
+}
+async function modalBatchDownload() {
+  for (let i = 0; i < imageModalImages.value.length; i++) {
+    await downloadImage(imageModalImages.value[i], `image_${i + 1}.png`)
+    if (i < imageModalImages.value.length - 1) await new Promise((r) => setTimeout(r, 200))
+  }
+}
+async function modalDownloadLong() {
+  await downloadImage(imageModalImages.value[imageModalIndex.value], '长图.png')
+}
+async function modalWorkspaceDownload() {
+  const src = imageModalImages.value[imageModalIndex.value]
+  await downloadImage(src, `原图_${imageModalIndex.value + 1}.png`)
+}
+
+/* ==================== 重新生成 ==================== */
+const regenOpen = ref(false)
+const regenSrc = ref('')
+const regenWorkspaceIndex = ref(-1)
+const regenHistoryId = ref<string | number | null>(null)
+const regenPrompt = ref('')
+
+function openRegenerateModal(src: string, workspaceIndex: number, historyId: string | number | null) {
+  regenSrc.value = src
+  regenWorkspaceIndex.value = workspaceIndex >= 0 ? workspaceIndex : -1
+  regenHistoryId.value = historyId != null && historyId !== '' ? historyId : null
+  regenPrompt.value = ''
+  regenOpen.value = true
+}
+function closeRegenerateModal() {
+  regenOpen.value = false
+}
+function openRegenFromModal() {
+  const src = imageModalImages.value[imageModalIndex.value]
+  const fromWorkspace = imageModalSource.value === 'workspace'
+  const historyId = fromWorkspace ? currentState.value.imageIds[imageModalIndex.value] ?? null : null
+  closeImageModal()
+  openRegenerateModal(src, fromWorkspace ? imageModalIndex.value : -1, historyId)
+}
+async function confirmRegenerate() {
+  const prompt = regenPrompt.value.trim()
+  const dataUrl = await urlToDataUrl(regenSrc.value)
+  if (!dataUrl) {
+    window.alert('当前图片无法用于生成')
+    return
+  }
+  const params: Record<string, unknown> = {
+    ref_images: [dataUrl],
+    menu: 11,
+    prompt: prompt || '提示词',
+  }
+  if (regenWorkspaceIndex.value >= 0) params.generatingCardIndex = regenWorkspaceIndex.value
+  if (regenHistoryId.value != null) {
+    params.history_id = regenHistoryId.value
+    params.history_index = regenWorkspaceIndex.value >= 0 ? regenWorkspaceIndex.value : 0
+  }
+  closeRegenerateModal()
+  await callGenerate(params)
+}
+function saveRegenPreview() {
+  void downloadImage(regenSrc.value, '重新生成预览.png')
+}
+
+/* ==================== 图片编辑（画布） ==================== */
+const editOpen = ref(false)
+const editImgRef = ref<HTMLImageElement | null>(null)
+const editCanvasRef = ref<HTMLCanvasElement | null>(null)
+const editPrompt = ref('')
+const editBrush = ref(20)
+const editSmearOn = ref(true)
+const editMarkerOn = ref(true)
+const editCurrentDataUrl = ref('')
+const editRefDataUrlRegenerate = ref('')
+let editWorkspaceIndex = -1
+let editStrokes: { points: { x: number; y: number }[]; brushSize: number }[] = []
+let editMarkers: { x: number; y: number; num: number }[] = []
+let editUndoStack: ('stroke' | 'marker')[] = []
+let editNaturalW = 0
+let editNaturalH = 0
+const EDIT_GREEN = 'rgba(100, 220, 120, 0.65)'
+
+function editGetXY(e: MouseEvent) {
+  const canvas = editCanvasRef.value
+  if (!canvas) return { x: 0, y: 0 }
+  const r = canvas.getBoundingClientRect()
+  const scaleX = canvas.width / r.width
+  const scaleY = canvas.height / r.height
+  return { x: (e.clientX - r.left) * scaleX, y: (e.clientY - r.top) * scaleY }
+}
+
+function editRedraw() {
+  const canvas = editCanvasRef.value
+  const ctx = canvas?.getContext('2d')
+  if (!canvas || !ctx) return
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  const brushSize = editBrush.value
+  ctx.strokeStyle = EDIT_GREEN
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+  editStrokes.forEach((s) => {
+    ctx.lineWidth = s.brushSize || brushSize
+    ctx.beginPath()
+    s.points.forEach((p, i) => {
+      if (i === 0) ctx.moveTo(p.x, p.y)
+      else ctx.lineTo(p.x, p.y)
+    })
+    ctx.stroke()
+  })
+  editMarkers.forEach((m) => {
+    const radius = Math.max(14, brushSize * 0.8)
+    ctx.fillStyle = EDIT_GREEN
+    ctx.beginPath()
+    ctx.arc(m.x, m.y, radius, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.strokeStyle = 'rgba(0,0,0,0.4)'
+    ctx.lineWidth = 2
+    ctx.stroke()
+    ctx.fillStyle = '#1e1e1e'
+    ctx.font = 'bold ' + Math.round(radius * 1.1) + 'px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(String(m.num), m.x, m.y)
+  })
+}
+
+function editCompositedDataUrl(): Promise<string> {
+  const canvas = editCanvasRef.value
+  if (!canvas) return Promise.resolve(editCurrentDataUrl.value)
+  const w = editNaturalW || editImgRef.value?.naturalWidth || canvas.width
+  const h = editNaturalH || editImgRef.value?.naturalHeight || canvas.height
+  const scaleX = w / canvas.width
+  const scaleY = h / canvas.height
+  return new Promise((resolve) => {
+    const off = document.createElement('canvas')
+    off.width = w
+    off.height = h
+    const ctx = off.getContext('2d')
+    const img = new Image()
+    img.onload = () => {
+      if (ctx) {
+        ctx.drawImage(img, 0, 0, w, h)
+        ctx.strokeStyle = EDIT_GREEN
+        ctx.lineCap = 'round'
+        ctx.lineJoin = 'round'
+        editStrokes.forEach((s) => {
+          ctx.lineWidth = (s.brushSize || 20) * Math.max(scaleX, scaleY)
+          ctx.beginPath()
+          s.points.forEach((p, i) => {
+            const px = p.x * scaleX
+            const py = p.y * scaleY
+            if (i === 0) ctx.moveTo(px, py)
+            else ctx.lineTo(px, py)
+          })
+          ctx.stroke()
+        })
+        const brushSize = editBrush.value
+        const radiusScale = Math.max(scaleX, scaleY)
+        editMarkers.forEach((m) => {
+          const radius = Math.max(14, brushSize * 0.8) * radiusScale
+          ctx.fillStyle = EDIT_GREEN
+          ctx.beginPath()
+          ctx.arc(m.x * scaleX, m.y * scaleY, radius, 0, Math.PI * 2)
+          ctx.fill()
+          ctx.strokeStyle = 'rgba(0,0,0,0.4)'
+          ctx.lineWidth = Math.max(2, radiusScale)
+          ctx.stroke()
+          ctx.fillStyle = '#1e1e1e'
+          ctx.font = 'bold ' + Math.round(radius * 1.1) + 'px sans-serif'
+          ctx.textAlign = 'center'
+          ctx.textBaseline = 'middle'
+          ctx.fillText(String(m.num), m.x * scaleX, m.y * scaleY)
+        })
+      }
+      try {
+        resolve(off.toDataURL('image/png'))
+      } catch (e) {
+        resolve(editCurrentDataUrl.value)
+      }
+    }
+    img.onerror = () => resolve(editCurrentDataUrl.value)
+    img.crossOrigin = 'anonymous'
+    img.src = editCurrentDataUrl.value
+  })
+}
+
+let editDrawing = false
+let editCurrentStroke: { points: { x: number; y: number }[]; brushSize: number } | null = null
+
+function openImageEditModal(currentImageDataUrl: string) {
+  editCurrentDataUrl.value = currentImageDataUrl || ''
+  editStrokes = []
+  editMarkers = []
+  editUndoStack = []
+  editRefDataUrlRegenerate.value = ''
+  editPrompt.value = ''
+  editBrush.value = 20
+  editSmearOn.value = true
+  editMarkerOn.value = true
+  editOpen.value = true
+  nextTick(() => {
+    const img = editImgRef.value
+    const canvas = editCanvasRef.value
+    if (!img || !canvas) return
+    img.onload = () => {
+      editNaturalW = img.naturalWidth
+      editNaturalH = img.naturalHeight
+      canvas.width = img.offsetWidth
+      canvas.height = img.offsetHeight
+      canvas.style.width = canvas.width + 'px'
+      canvas.style.height = canvas.height + 'px'
+      editRedraw()
+    }
+    img.src = editCurrentDataUrl.value
+  })
+}
+function closeImageEditModal() {
+  editOpen.value = false
+}
+function editFromModal() {
+  const src = imageModalImages.value[imageModalIndex.value]
+  void urlToDataUrl(src).then((dataUrl) => {
+    editWorkspaceIndex = imageModalSource.value === 'workspace' ? imageModalIndex.value : -1
+    closeImageModal()
+    openImageEditModal(dataUrl)
+  })
+}
+
+function editMouseDown(e: MouseEvent) {
+  const canvas = editCanvasRef.value
+  if (!canvas) return
+  if (e.button !== 0 && e.button !== 2) return
+  const p = editGetXY(e)
+  if (e.button === 2) {
+    e.preventDefault()
+    const r = editBrush.value * 1.2
+    const idx = editMarkers.findIndex((m) => Math.hypot(m.x - p.x, m.y - p.y) <= r)
+    if (idx >= 0) {
+      editMarkers.splice(idx, 1)
+      editRedraw()
+    }
+    return
+  }
+  if (editSmearOn.value) {
+    editDrawing = true
+    editCurrentStroke = { points: [p], brushSize: editBrush.value }
+    editStrokes.push(editCurrentStroke)
+    editUndoStack.push('stroke')
+  } else if (editMarkerOn.value) {
+    const num = editMarkers.length + 1
+    editMarkers.push({ x: p.x, y: p.y, num })
+    editUndoStack.push('marker')
+    editRedraw()
+  }
+}
+function editMouseMove(e: MouseEvent) {
+  if (!editDrawing || !editCurrentStroke) return
+  editCurrentStroke.points.push(editGetXY(e))
+  editRedraw()
+}
+function editMouseUp() {
+  editDrawing = false
+  editCurrentStroke = null
+}
+function editUndo() {
+  const type = editUndoStack.pop()
+  if (!type) return
+  if (type === 'stroke') editStrokes.pop()
+  else editMarkers.pop()
+  editRedraw()
+}
+function editClear() {
+  editStrokes = []
+  editMarkers = []
+  editUndoStack = []
+  editRedraw()
+}
+function editPickRefImage() {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = '.jpg,.jpeg,.png,.bmp'
+  input.style.display = 'none'
+  document.body.appendChild(input)
+  input.addEventListener('change', () => {
+    const file = input.files?.[0]
+    if (file) {
+      const r = new FileReader()
+      r.onload = () => {
+        editRefDataUrlRegenerate.value = String(r.result || '')
+      }
+      r.readAsDataURL(file)
+    }
+    document.body.removeChild(input)
+  })
+  input.click()
+}
+
+async function confirmEdit() {
+  const prompt = editPrompt.value.trim()
+  if (!editCurrentDataUrl.value) {
+    window.alert('当前图片无效')
+    return
+  }
+  let refImageDataUrl = editCurrentDataUrl.value
+  if (editStrokes.length > 0 || editMarkers.length > 0) {
+    try {
+      refImageDataUrl = await editCompositedDataUrl()
+    } catch (e) {
+      console.warn('合成编辑图失败，使用原图', e)
+    }
+  }
+  closeImageEditModal()
+  const param: Record<string, unknown> = {
+    ref_images: [refImageDataUrl],
+    menu: 11,
+    prompt,
+  }
+  if (editWorkspaceIndex >= 0) param.generatingCardIndex = editWorkspaceIndex
+  if (editRefDataUrlRegenerate.value !== '') param.proc_images = [editRefDataUrlRegenerate.value]
+  await callGenerate(param)
+  editWorkspaceIndex = -1
+}
+
+/* ==================== 工作台操作 ==================== */
+function openWorkspaceThumb(i: number) {
+  const s = currentState.value
+  if (generatingWorkspaceIndex.value === i) return
+  if (s.manualStitchBarVisible) {
+    toggleStitchOrder(i)
+  } else {
+    openImageModal(s.images, i, { source: 'workspace' })
+  }
+}
+function beginManualStitch() {
+  const s = currentState.value
+  if (s.images.length === 0) {
+    window.alert('工作台暂无图片')
+    return
+  }
+  s.manualStitchBarVisible = true
+}
+function cancelManualStitch() {
+  const s = currentState.value
+  s.stitchOrder = null
+  s.manualStitchBarVisible = false
+  renderStitchedPreview()
+}
+async function startManualStitch() {
+  const s = currentState.value
+  const urls = orderedWorkspaceUrls(s)
+  if (!urls || urls.length === 0) {
+    window.alert('请先在左侧选择要拼接的图片及顺序')
+    return
+  }
+  stitchSaving.value = true
+  try {
+    const resp = await fetch('/api/stitch/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      body: JSON.stringify({ urls }),
+    })
+    const res = await resp.json().catch(() => ({}))
+    if (res.success && res.long_image_url) {
+      s.longImageUrl = res.long_image_url
+      s.manualStitchBarVisible = false
+    } else {
+      window.alert(res.error || '拼接保存失败')
+    }
+  } catch (e) {
+    window.alert('请求失败：' + (e instanceof Error ? e.message : '网络错误'))
+  } finally {
+    stitchSaving.value = false
+  }
+}
+async function batchDownloadWorkspace() {
+  const s = currentState.value
+  if (s.images.length === 0) {
+    window.alert('工作台暂无图片')
+    return
+  }
+  for (let i = 0; i < s.images.length; i++) {
+    await downloadImage(s.images[i], `原图_${i + 1}.png`)
+    if (i < s.images.length - 1) await new Promise((r) => setTimeout(r, 200))
+  }
+}
+function clearWorkspace() {
+  const s = currentState.value
+  if (s.images.length === 0) return
+  if (window.confirm('确定清空当前栏目工作台所有图片吗？')) {
+    s.images = []
+    s.imageIds = []
+    s.stitchOrder = null
+    s.manualStitchBarVisible = false
+    s.prompts = []
+    s.longImageUrl = null
+    hidePromptCards()
+  }
+}
+function openStitchedPreview() {
+  const s = currentState.value
+  if (!s.longImageUrl) return
+  openImageModal([s.longImageUrl], 0, { source: 'stitched' })
+}
+
+function copyPrompt(text: string) {
+  void navigator.clipboard.writeText(text)
+}
+
+/* 加载历史第一页 */
+loadHistoryPage(false)
+</script>
+
+<template>
+  <header class="top-bar">
+    <div class="logo-area">
+      <img class="logo" :src="logoUrl" alt="logo" />
+      <span class="app-name">数富AI</span>
+      <a href="/home" class="btn-home" title="返回首页">← 返回首页</a>
+    </div>
+    <nav class="nav-tabs">
+      <span class="nav-tab-group">
+        <button
+          v-for="t in GROUP1"
+          :key="t.panel"
+          class="nav-tab"
+          :class="{ active: activePanel === t.panel }"
+          @click="switchPanel(t.panel)"
+        >
+          {{ t.label }}
+        </button>
+      </span>
+      <span class="nav-tab-sep" aria-hidden="true"></span>
+      <span class="nav-tab-group">
+        <button
+          v-for="t in GROUP2"
+          :key="t.panel"
+          class="nav-tab"
+          :class="{ active: activePanel === t.panel }"
+          @click="switchPanel(t.panel)"
+        >
+          {{ t.label }}
+        </button>
+      </span>
+      <span class="nav-tab-sep" aria-hidden="true"></span>
+      <span class="nav-tab-group">
+        <button
+          v-for="t in GROUP3"
+          :key="t.panel"
+          class="nav-tab"
+          :class="{ active: activePanel === t.panel }"
+          @click="switchPanel(t.panel)"
+        >
+          {{ t.label }}
+        </button>
+      </span>
+    </nav>
+    <div class="top-right">
+      <button type="button" class="btn-settings" title="设置" @click="openSettings">⚙</button>
+    </div>
+  </header>
+
+  <div class="main-content">
+    <!-- 左侧参数面板 -->
+    <aside class="left-panel">
+      <TextToImagePanel v-show="activePanel === 'textToImage'" ref="textToImageRef" />
+      <MainImagePanel v-show="showMainPanel" ref="productMainRef" :panel-id="mainPanelTarget" />
+      <ProductPosterPanel v-show="activePanel === 'productPoster'" ref="productPosterRef" />
+      <ClonePosterPanel v-show="activePanel === 'clonePoster'" ref="clonePosterRef" />
+      <ClothingDetailPanel v-show="activePanel === 'clothingDetail'" ref="clothingDetailRef" />
+      <ExtremeDetailPanel v-show="activePanel === 'extremeDetail'" ref="extremeDetailRef" />
+      <CloneDetailPanel v-show="activePanel === 'cloneDetail'" ref="cloneDetailRef" />
+
+      <button class="btn-generate" :class="{ generating: isGenerating }" @click="onGenerateClick">
+        <span>{{ isGenerating ? '✕' : '✦' }}</span>{{ isGenerating ? '取消生成' : '立即生成' }}
+      </button>
+    </aside>
+
+    <!-- 中央工作台 -->
+    <main class="center-area">
+      <div class="center-toolbar">
+        <button class="btn-manual-stitch" title="选择图片拼接顺序" @click="beginManualStitch">
+          <span>✋</span> 手动拼接
+        </button>
+        <button class="btn-download" title="批量下载原图" @click="batchDownloadWorkspace">
+          <span>↓</span> 批量下载原图
+        </button>
+        <div class="center-toolbar-spacer"></div>
+        <button class="btn-close-preview" title="清空工作台" @click="clearWorkspace">X</button>
+      </div>
+      <div class="workspace-body">
+        <div class="workspace-left">
+          <div v-if="currentState.manualStitchBarVisible && currentState.images.length > 0" class="workspace-stitch-bar">
+            <span class="workspace-stitch-count">已选 {{ currentState.stitchOrder ? currentState.stitchOrder.length : currentState.images.length }} 张</span>
+            <button type="button" class="workspace-stitch-cancel" @click="cancelManualStitch">取消选择</button>
+            <button type="button" class="workspace-stitch-start" @click="startManualStitch">开始拼接</button>
+          </div>
+          <div v-if="currentState.images.length > 0" class="workspace-left-inner">
+            <div
+              v-for="(url, i) in currentState.images"
+              :key="url + '_' + i"
+              class="workspace-thumb"
+              :class="{ 'workspace-thumb-in-stitch': stitchOrderIndexOf(currentState, i) > 0 }"
+              @click="openWorkspaceThumb(i)"
+              @dblclick.prevent="openImageModal(currentState.images, i, { source: 'workspace' })"
+            >
+              <span v-if="stitchOrderIndexOf(currentState, i) > 0" class="workspace-thumb-badge">{{ stitchOrderIndexOf(currentState, i) }}</span>
+              <img :src="url" alt="" />
+              <div v-if="generatingWorkspaceIndex === i" class="workspace-thumb-loading">
+                <div class="spinner"></div>
+                <div class="txt">生成中，请稍候...</div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="workspace-left-empty">生成或恢复到工作台的图片将显示在此处，点击可查看大图</div>
+        </div>
+        <div class="workspace-right">
+          <div v-if="currentState.longImageUrl" class="workspace-stitched-wrap" @click="openStitchedPreview">
+            <img :src="currentState.longImageUrl" alt="拼接效果" />
+          </div>
+          <div v-else class="workspace-right-empty">右侧显示所有图片竖向拼接后的效果，点击可查看大图并保存</div>
+        </div>
+        <div v-if="stitchSaving" class="workspace-stitch-loading">
+          <div class="workspace-stitch-loading-content">
+            <div class="spinner"></div>
+            <div class="loading-text">拼接中，请稍候...</div>
+          </div>
+        </div>
+      </div>
+      <div v-if="previewLoading" class="preview-loading">
+        <div class="preview-loading-content">
+          <div class="spinner"></div>
+          <div class="loading-text">生成中，请稍候...</div>
+        </div>
+      </div>
+      <div v-if="promptCardsOpen" class="preview-prompt-cards" style="position: absolute; padding: 20px;">
+        <div v-for="(text, i) in currentState.prompts" :key="i" class="prompt-card">
+          <div class="prompt-card-content">{{ text }}</div>
+          <button class="prompt-card-copy" @click="copyPrompt(text)">复制</button>
+        </div>
+      </div>
+    </main>
+
+    <!-- 右侧历史图库 -->
+    <aside class="right-panel">
+      <div class="history-header">
+        <div class="history-title">历史图库</div>
+        <div class="history-tabs">
+          <button
+            v-for="tab in HISTORY_TABS"
+            :key="tab.value"
+            type="button"
+            class="history-tab"
+            :class="{ active: historyFilter === tab.value }"
+            @click="selectHistoryFilter(tab.value)"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+      </div>
+      <div class="history-content">
+        <div v-if="historyItems.length > 0" class="history-grid">
+          <div
+            v-for="(item, i) in historyItems"
+            :key="item.id + '_' + i"
+            class="history-item"
+            @click="openHistoryItem(item)"
+          >
+            <div class="history-item-img-wrap">
+              <img :src="thumbOf(item)" alt="" />
+              <span class="history-item-time">{{ formatHistoryTime(item.created_at) }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="historyItems.length === 0 && !historyLoading" class="history-empty" style="padding: 20px; color: #666; font-size: 13px; text-align: center;">
+          暂无历史记录
+        </div>
+        <div v-if="historyHasMore" class="history-load-more">
+          <button class="btn-load-more" @click="loadHistoryPage(true)">加载更多</button>
+        </div>
+      </div>
+    </aside>
+  </div>
+
+  <!-- 设置弹窗 -->
+  <div v-if="settingsOpen" class="settings-overlay" style="display: flex;" @click.self="closeSettings">
+    <div class="settings-modal">
+      <div class="settings-modal-header">
+        <span class="settings-modal-title">设置</span>
+        <button type="button" class="settings-modal-close" @click="closeSettings">×</button>
+      </div>
+      <div class="settings-modal-body">
+        <div class="settings-section">
+          <div class="settings-section-title"><span class="icon">⚙</span> API Key</div>
+          <div class="settings-section-desc">用于生成接口鉴权，必须设置后才能进行生成。仅保存在本机，不会上传。</div>
+          <div class="settings-input-wrap">
+            <input v-model="apiKeyInput" type="password" class="settings-input" placeholder="请输入 API Key" autocomplete="off" @input="onApiKeyInput" />
+          </div>
+        </div>
+        <div class="settings-section">
+          <div class="settings-section-title"><span class="icon">↓</span> 自动保存位置</div>
+          <div class="settings-section-desc">设置后，生图完成后将自动保存副本到此文件夹。</div>
+          <div class="settings-input-wrap">
+            <input
+              v-model="autoSavePathInput"
+              type="text"
+              class="settings-input settings-path-input"
+              placeholder="未设置 (图片将仅显示在软件中)，可手动输入或点击下方选择文件夹"
+              style="width: 100%; margin-bottom: 8px;"
+              @input="onAutoSaveInput"
+            />
+            <button type="button" class="btn-choose-folder" @click="chooseFolder">选择文件夹</button>
+          </div>
+        </div>
+        <div class="settings-section">
+          <div class="settings-section-title"><span class="icon">↻</span> 软件更新</div>
+          <div class="settings-update-block">
+            <span class="settings-version-text">{{ settingsVersionText }}</span>
+            <button type="button" class="btn-check-update" @click="checkUpdate"><span>↻</span> 检测更新</button>
+          </div>
+          <div v-if="settingsUpdateHint" class="settings-section-desc" style="margin-top: 8px;">{{ settingsUpdateHint }}</div>
+          <div v-if="btnDownloadUpdateVisible" class="settings-input-wrap" style="margin-top: 8px;">
+            <button type="button" class="btn-choose-folder" @click="doUpdate">下载更新</button>
+          </div>
+        </div>
+      </div>
+      <div class="settings-modal-footer">
+        <button type="button" class="btn-settings-close" @click="closeSettings">关闭</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 图片查看 -->
+  <div v-if="imageModalOpen" class="image-modal-overlay" style="display: flex;" @click.self="closeImageModal">
+    <div class="image-modal">
+      <div class="image-modal-header">
+        <div class="image-modal-subtitle">查看大图</div>
+      </div>
+      <div class="image-modal-body">
+        <button v-if="imageModalImages.length > 1" class="image-modal-arrow prev" @click="modalPrev">‹</button>
+        <img :src="imageModalImages[imageModalIndex]" alt="" />
+        <button v-if="imageModalImages.length > 1" class="image-modal-arrow next" @click="modalNext">›</button>
+      </div>
+      <div class="image-modal-footer">
+        <button v-if="modalShow.restore" class="image-modal-btn restore" @click="restoreToWorkspace">
+          <span>⊞</span> 恢复到工作台
+        </button>
+        <button v-if="modalShow.batchDownload" class="image-modal-btn batch-download" @click="modalBatchDownload">
+          <span>↓</span> 批量下载全部
+        </button>
+        <button v-if="modalShow.downloadLong" class="image-modal-btn download-long" @click="modalDownloadLong">
+          <span>↓</span> 下载长图
+        </button>
+        <button v-if="modalShow.workspaceDownload" class="image-modal-btn workspace-download" @click="modalWorkspaceDownload">
+          <span>↓</span> 下载原图
+        </button>
+        <button v-if="modalShow.workspaceEdit" class="image-modal-btn workspace-edit" @click="editFromModal">
+          <span>✎</span> 图片编辑
+        </button>
+        <button v-if="modalShow.workspaceRegenerate" class="image-modal-btn workspace-regenerate" @click="openRegenFromModal">
+          <span>↻</span> 重新生成
+        </button>
+        <button class="image-modal-btn close" @click="closeImageModal">
+          <span>×</span> 关闭
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 图片编辑 -->
+  <div v-if="editOpen" class="image-edit-modal-overlay" style="display: flex;" @click.self="closeImageEditModal">
+    <div class="image-edit-modal">
+      <div class="edit-image-wrap">
+        <img ref="editImgRef" :src="editCurrentDataUrl" alt="" />
+        <div class="edit-canvas-wrap">
+          <canvas
+            ref="editCanvasRef"
+            @mousedown="editMouseDown"
+            @mousemove="editMouseMove"
+            @mouseup="editMouseUp"
+            @mouseleave="editMouseUp"
+            @contextmenu.prevent
+          ></canvas>
+        </div>
+      </div>
+      <div class="image-edit-toolbar">
+        <button
+          type="button"
+          class="tool-btn"
+          :class="{ active: editSmearOn }"
+          @click="editSmearOn = !editSmearOn"
+        >
+          {{ editSmearOn ? '🖌 涂抹模式 ON' : '🖌 涂抹模式 OFF' }}
+        </button>
+        <button
+          type="button"
+          class="tool-btn"
+          :class="{ active: editMarkerOn }"
+          @click="editMarkerOn = !editMarkerOn"
+        >
+          {{ editMarkerOn ? '📑 数字标记 ON' : '📑 数字标记 OFF' }}
+        </button>
+        <span class="brush-label">画笔: <span>{{ editBrush }}</span>px</span>
+        <input v-model.number="editBrush" type="range" class="brush-slider" min="5" max="60" step="1" @input="editRedraw" />
+        <button type="button" class="tool-btn secondary" title="撤销" @click="editUndo">↶</button>
+        <button type="button" class="tool-btn secondary" title="清除" @click="editClear">🗑</button>
+      </div>
+      <div class="image-edit-hints">
+        *提示: 红色区域将被重新绘制<br />
+        *提示: 点击图片添加标记,右键删除标记
+      </div>
+      <div class="image-edit-prompt-row">
+        <textarea
+          v-model="editPrompt"
+          class="prompt-textarea"
+          placeholder="如: 移除框选的内容&#10;如: 移除框选的内容 改成**&#10;如: 把**改成**&#10;如果上传了参考图提示词应该写:把图片一的**改成图片二的**..."
+        ></textarea>
+        <button type="button" class="btn-ref-image" @click="editPickRefImage">参考图 □</button>
+      </div>
+      <div class="image-edit-modal-footer">
+        <button type="button" class="btn-cancel" @click="closeImageEditModal">取消</button>
+        <button type="button" class="btn-confirm" @click="confirmEdit">确认生成</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 重新生成 -->
+  <div v-if="regenOpen" class="regenerate-modal-overlay" style="display: flex;">
+    <div class="regenerate-modal">
+      <div class="regenerate-modal-top">
+        <div class="regenerate-preview-title">Just the Right Capacity, Easily Holds Daily Essentials.</div>
+        <div class="regenerate-preview-subtitle">Phone, long wallet, keys, lipstick—all fit in without looking bulky.</div>
+        <div class="regenerate-preview-img-wrap">
+          <img :src="regenSrc" alt="" />
+        </div>
+      </div>
+      <div class="regenerate-modal-bottom">
+        <div class="regenerate-prompt-row">
+          <label class="regenerate-prompt-label">提示词</label>
+          <input v-model="regenPrompt" type="text" class="regenerate-prompt-input" placeholder="请输入提示词" />
+        </div>
+        <div class="regenerate-actions">
+          <button type="button" class="regenerate-btn cancel" @click="closeRegenerateModal">取消</button>
+          <button type="button" class="regenerate-btn confirm" @click="confirmRegenerate">确认生成</button>
+        </div>
+        <div class="regenerate-footer-actions">
+          <button type="button" class="regenerate-footer-btn" @click="saveRegenPreview"><span>保存</span></button>
+          <button type="button" class="regenerate-footer-btn close" @click="closeRegenerateModal"><span>×</span> 关闭</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend-vue/src/shared/api/http.ts b/frontend-vue/src/shared/api/http.ts
index 2193fe25..94f264bf 100644
--- a/frontend-vue/src/shared/api/http.ts
+++ b/frontend-vue/src/shared/api/http.ts
@@ -60,6 +60,17 @@ function createHttpClient(): AxiosInstance {
   })
 
   instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+    // 携带本地登录令牌：桌面端同源 cookie 仍可用；dev(5173) 无 cookie 时靠 Bearer 过 Java 鉴权
+    try {
+      if (config.url && config.url.indexOf('/newApi') === 0 && typeof window !== 'undefined') {
+        const token = window.localStorage.getItem('aiimage_auth_token') || ''
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`
+        }
+      }
+    } catch {
+      /* 忽略读取令牌异常 */
+    }
     return config
   })
 
diff --git a/frontend-vue/src/shared/bridges/pywebview.ts b/frontend-vue/src/shared/bridges/pywebview.ts
index 57e7df09..a50efb69 100644
--- a/frontend-vue/src/shared/bridges/pywebview.ts
+++ b/frontend-vue/src/shared/bridges/pywebview.ts
@@ -1,6 +1,5 @@
-import { ref } from 'vue';
-
 import { webFallbackApi } from './web-fallback';
+import { isDesktopRuntime } from '@/shared/runtime-env';
 
 export interface UploadedJavaFile {
   fileKey: string;
@@ -122,6 +121,8 @@ export interface PywebviewApi {
     not_found?: boolean;
     error?: string;
   }>;
+  /** 版本更新（桌面专属）：下载更新包并启动 update.exe 后退出主程序（原 Flask /api/update/do 桥化） */
+  do_update_app?: (fileUrl: string) => Promise<{ success: boolean; error?: string }>;
   launch_yaoayanui?: () => Promise<{
     success: boolean;
     path?: string;
@@ -197,8 +198,8 @@ declare global {
 let cachedPywebviewApi: PywebviewApi | undefined;
 let pywebviewReadyBound = false;
 
-/** 当前是否运行在桌面客户端（pywebview）运行时；Web 独立部署下恒为 false */
-export const isDesktopRuntime = ref(false);
+/** 当前是否运行在桌面客户端（pywebview）运行时；Web 独立部署下恒为 false（见 runtime-env.ts 注释） */
+export { isDesktopRuntime };
 
 function syncPywebviewApi() {
   cachedPywebviewApi = window.pywebview?.api;
diff --git a/frontend-vue/src/shared/runtime-env.ts b/frontend-vue/src/shared/runtime-env.ts
new file mode 100644
index 00000000..02a5a27c
--- /dev/null
+++ b/frontend-vue/src/shared/runtime-env.ts
@@ -0,0 +1,14 @@
+/**
+ * 桌面运行时环境标志
+ *
+ * 独立模块避免共享模块之间循环依赖（pywebview.ts 写入、各页面读取）。
+ * 桌面客户端窗口加载 Web 版 URL 后 pywebview 桥注入完成即置 true；
+ * 初始为 false，页面在 pywebviewready 之后的交互/挂载阶段读取时已为 true。
+ *
+ * 注意：前端 URL 已全部统一走 https+域名（品牌检测/图片生成已服务端化），
+ * 本地不再有任何 Flask API 回连，无需 LOCAL_API_BASE。
+ */
+import { ref } from 'vue'
+
+/** 桌面客户端（pywebview 桥已注入）运行时标志；Web 独立部署下恒为 false */
+export const isDesktopRuntime = ref(false)
diff --git a/frontend-vue/vite.config.ts b/frontend-vue/vite.config.ts
index cb25a116..e7b9678a 100644
--- a/frontend-vue/vite.config.ts
+++ b/frontend-vue/vite.config.ts
@@ -71,13 +71,15 @@ export default defineConfig({
         'variant-collection': resolve(__dirname, 'variant-collection.html'),
         brand: resolve(__dirname, 'brand.html'),
         'image-video': resolve(__dirname, 'image-video.html'),
+        image: resolve(__dirname, 'image.html'),
         'amazon-console': resolve(__dirname, 'amazon-console.html'),
         home: resolve(__dirname, 'home.html'),
         login: resolve(__dirname, 'login.html'),
       },
       output: {
-        entryFileNames: (chunkInfo) =>
-          chunkInfo.name === 'image-video' ? 'assets/[name]-[hash].js' : 'assets/[name].js',
+        // 入口文件同样带内容 hash：/assets/ 静态服务配了 immutable 长缓存，
+        // 无 hash 的入口文件会导致前端更新对用户永不生效（旧文件名被永久缓存）
+        entryFileNames: 'assets/[name]-[hash].js',
         chunkFileNames: 'assets/[name]-[hash].js',
         assetFileNames: 'assets/[name]-[hash][extname]',
       },