更新

.gitignore

@@ -0,0 +1,2 @@
+logs/stability/
+logs/conversation/

frontend-admin/src/views/ModelsView.vue

@@ -159,6 +159,18 @@
                 <input v-model="form.seed_node" class="form-input" placeholder="自动识别，如 30:3" />
               </div>
             </div>
+            <div class="form-row-2">
+              <div class="form-group">
+                <label>img2img 重绘强度</label>
+                <input v-model.number="form.img2img_denoise" type="number" min="0.01" max="1" step="0.01" class="form-input" />
+                <p class="field-hint">默认 0.45；越低越保留原图，越高变化越明显。</p>
+              </div>
+              <div class="form-group">
+                <label>inpaint 重绘强度</label>
+                <input v-model.number="form.inpaint_denoise" type="number" min="0.01" max="1" step="0.01" class="form-input" />
+                <p class="field-hint">默认 0.72；仅作用于白色遮罩区域。</p>
+              </div>
+            </div>
             <p class="field-hint">
               必须使用 <code>Save (API Format)</code> 导出的 JSON（节点含 class_type）。
               UI Format（含 nodes/links）导入后会秒结束且不出图。
@@ -310,6 +322,8 @@ const form = reactive({
   workflow_json: '',
   prompt_node: '',
   seed_node: '',
+  img2img_denoise: 0.45,
+  inpaint_denoise: 0.72,
   refine_prompt: true,
   system_prompt: ''
 })
@@ -385,14 +399,16 @@ function onProviderChange() {
 }
 
 function parseExtraConfig(extra) {
-  if (!extra) return { workflow_json: '', prompt_node: '', seed_node: '', refine_prompt: true, system_prompt: '' }
+  if (!extra) return { workflow_json: '', prompt_node: '', seed_node: '', img2img_denoise: 0.45, inpaint_denoise: 0.72, refine_prompt: true, system_prompt: '' }
   if (typeof extra === 'string') {
-    try { extra = JSON.parse(extra) } catch { return { workflow_json: '', prompt_node: '', seed_node: '', refine_prompt: true, system_prompt: '' } }
+    try { extra = JSON.parse(extra) } catch { return { workflow_json: '', prompt_node: '', seed_node: '', img2img_denoise: 0.45, inpaint_denoise: 0.72, refine_prompt: true, system_prompt: '' } }
   }
   return {
     workflow_json: extra.workflow ? JSON.stringify(extra.workflow, null, 2) : '',
     prompt_node: extra.prompt_node || '',
     seed_node: extra.seed_node || '',
+    img2img_denoise: Number(extra.img2img_denoise ?? 0.45),
+    inpaint_denoise: Number(extra.inpaint_denoise ?? 0.72),
     refine_prompt: extra.refine_prompt === undefined ? true : !!extra.refine_prompt,
     system_prompt: extra.system_prompt || ''
   }
@@ -437,6 +453,8 @@ function buildExtraConfig() {
   }
   if ((form.prompt_node || '').trim()) config.prompt_node = form.prompt_node.trim()
   if ((form.seed_node || '').trim()) config.seed_node = form.seed_node.trim()
+  config.img2img_denoise = Math.max(0.01, Math.min(1, Number(form.img2img_denoise) || 0.45))
+  config.inpaint_denoise = Math.max(0.01, Math.min(1, Number(form.inpaint_denoise) || 0.72))
   if ((form.system_prompt || '').trim()) config.system_prompt = form.system_prompt.trim()
   config.refine_prompt = !!form.refine_prompt
   return config
@@ -485,7 +503,7 @@ function openCreate() {
     name: '', provider: 'openai', model_id: '', api_base_url: 'https://api.openai.com/v1',
     api_key: '', max_tokens: 4096, temperature: 0.7, is_default: false, enabled: true, support_context: true, support_image: true,
     frequency_penalty: 0, presence_penalty: 0,
-    workflow_json: '', prompt_node: '', seed_node: '', refine_prompt: true, system_prompt: ''
+    workflow_json: '', prompt_node: '', seed_node: '', img2img_denoise: 0.45, inpaint_denoise: 0.72, refine_prompt: true, system_prompt: ''
   })
   showModal.value = true
 }
@@ -510,6 +528,8 @@ function openEdit(m) {
     workflow_json: extra.workflow_json,
     prompt_node: extra.prompt_node,
     seed_node: extra.seed_node,
+    img2img_denoise: extra.img2img_denoise,
+    inpaint_denoise: extra.inpaint_denoise,
     refine_prompt: extra.refine_prompt,
     system_prompt: extra.system_prompt
   })
@@ -540,6 +560,8 @@ async function saveModel() {
   delete payload.workflow_json
   delete payload.prompt_node
   delete payload.seed_node
+  delete payload.img2img_denoise
+  delete payload.inpaint_denoise
   delete payload.refine_prompt
   delete payload.system_prompt
 

frontend/src/components/ChatInput.vue

@@ -39,87 +39,7 @@
       </div>
     </div>
 
-    <div class="input-wrapper" :class="{ 'image-mode': isComfyModel, 'agent-enabled': activeAgent && !isComfyModel }">
+    <div class="input-wrapper" :class="{ 'image-mode': isComfyModel }">
-      <Transition name="agent-panel">
-        <section
-          v-if="showAgentPanel && !isComfyModel"
-          class="agent-panel"
-          aria-label="选择 Agent"
-        >
-          <header class="agent-panel-header">
-            <div>
-              <span class="agent-eyebrow">Agent 工作台</span>
-              <h3>选择处理这项任务的方式</h3>
-              <p>Agent 会为当前请求加入稳定的分析步骤和输出规范。</p>
-            </div>
-            <button
-              class="agent-panel-close"
-              type="button"
-              aria-label="关闭 Agent 面板"
-              @click="showAgentPanel = false"
-            >
-              <IconX :size="18" :stroke-width="1.8" />
-            </button>
-          </header>
-
-          <div class="agent-options">
-            <button
-              v-for="agent in settings.agents"
-              :key="agent.id"
-              class="agent-option"
-              :class="{ selected: activeAgent?.id === agent.id }"
-              type="button"
-              @click="selectAgent(agent)"
-            >
-              <span class="agent-option-icon" :data-accent="agent.accent">
-                <component :is="agentIcon(agent.icon)" :size="20" :stroke-width="1.75" />
-              </span>
-              <span class="agent-option-copy">
-                <span class="agent-option-heading">
-                  <strong>{{ agent.name }}</strong>
-                  <span v-for="tag in agent.tags" :key="tag" class="agent-tag">{{ tag }}</span>
-                </span>
-                <small>{{ agent.description }}</small>
-              </span>
-              <IconCircleCheckFilled
-                v-if="activeAgent?.id === agent.id"
-                class="agent-option-check"
-                :size="18"
-              />
-            </button>
-          </div>
-
-          <footer v-if="activeAgent" class="agent-panel-footer">
-            <div class="agent-starters">
-              <span>快速开始</span>
-              <button
-                v-for="starter in activeAgent.starters"
-                :key="starter"
-                type="button"
-                @click="applyAgentStarter(starter)"
-              >{{ starter }}</button>
-            </div>
-            <button class="agent-disable" type="button" @click="clearAgent">
-              不使用 Agent
-            </button>
-          </footer>
-        </section>
-      </Transition>
-
-      <div v-if="activeAgent && !isComfyModel" class="active-agent-strip">
-        <span class="active-agent-icon" :data-accent="activeAgent.accent">
-          <component :is="agentIcon(activeAgent.icon)" :size="18" :stroke-width="1.8" />
-        </span>
-        <span class="active-agent-copy">
-          <strong>{{ activeAgent.name }}</strong>
-          <small>{{ activeAgent.description }}</small>
-        </span>
-        <button type="button" class="active-agent-adjust" @click="showAgentPanel = true">调整</button>
-        <button type="button" class="active-agent-remove" aria-label="关闭当前 Agent" @click="clearAgent">
-          <IconX :size="16" :stroke-width="1.9" />
-        </button>
-      </div>
-
       <textarea
         ref="textareaRef"
         v-model="content"
@@ -164,21 +84,21 @@
           />
 
           <button
-            v-if="!isComfyModel && settings.agents.length"
+            v-if="settings.agents.length"
             class="agent-trigger"
             :class="{ active: activeAgent }"
             type="button"
-            :title="activeAgent ? `当前 Agent：${activeAgent.name}` : '选择 Agent'"
+            :title="activeAgent ? '关闭 Agent 自动模式' : '开启 Agent 自动模式'"
-            :aria-label="activeAgent ? `当前 Agent：${activeAgent.name}` : '选择 Agent'"
+            :aria-label="activeAgent ? '关闭 Agent 自动模式' : '开启 Agent 自动模式'"
-            :aria-expanded="showAgentPanel"
+            :aria-pressed="!!activeAgent"
-            @click="showAgentPanel = !showAgentPanel"
+            @click="toggleAgent"
           >
             <IconRobot :size="17" :stroke-width="1.8" />
-            <span class="agent-trigger-label">{{ activeAgent?.short_name || 'Agent' }}</span>
+            <span class="agent-trigger-label">Agent</span>
             <span v-if="activeAgent" class="agent-live-dot" aria-hidden="true" />
           </button>
 
-          <div class="mode-switch" role="tablist" aria-label="创作模式">
+          <div v-if="!activeAgent" class="mode-switch" role="tablist" aria-label="创作模式">
             <button
               class="mode-tab"
               :class="{ active: !isComfyModel }"
@@ -207,7 +127,7 @@
             </button>
           </div>
 
-          <label v-if="settings.models.length" class="model-picker" title="选择模型">
+          <label v-if="!activeAgent && settings.models.length" class="model-picker" title="选择模型">
             <IconSparkles :size="16" :stroke-width="1.8" />
             <select
               :value="selectedModelValue"
@@ -243,7 +163,7 @@
             class="send-btn"
             type="button"
             aria-label="发送消息"
-            :disabled="!canSend || sending"
+            :disabled="!canSend || chat.sending"
             @click="handleSend"
           >
             <IconArrowUp :size="19" :stroke-width="2" />
@@ -253,10 +173,13 @@
     </div>
 
     <p v-if="uploadingFiles.length" class="input-hint">正在上传 {{ uploadingFiles.length }} 个文件</p>
-    <p v-else-if="isComfyModel && pendingAttachments.length" class="input-hint input-hint-warn">
+    <p v-else-if="isComfyModel && pendingAttachments.length" class="input-hint">
-      当前工作流仅支持文生图，请移除附件后输入图片描述
+      第一张为原图；需要局部重绘时，第二张请上传同尺寸黑白遮罩（白色区域会被修改）
+    </p>
+    <p v-else-if="isComfyModel" class="input-hint">可直接文生图，也可上传原图进行 img2img / inpaint 图片处理</p>
+    <p v-else-if="activeAgent" class="input-hint">
+      Agent 会自动识别任务，并调用合适的语言或图片生成模型
     </p>
-    <p v-else-if="isComfyModel" class="input-hint">当前是图片生成模式，发送提示词后会在对话中返回图片</p>
     <p v-else-if="auth.isGuest && features.upload_image" class="input-hint input-hint-warn">
       游客模式不支持发送图片，登录后即可上传
     </p>
@@ -266,7 +189,7 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useSettingsStore } from '@/stores/settings'
 import { useAuthStore } from '@/stores/auth'
 import { useChatStore } from '@/stores/chat'
@@ -280,12 +203,7 @@ import IconPaperclip from '@tabler/icons-vue/dist/esm/icons/IconPaperclip.mjs'
 import IconPhoto from '@tabler/icons-vue/dist/esm/icons/IconPhoto.mjs'
 import IconPhotoUp from '@tabler/icons-vue/dist/esm/icons/IconPhotoUp.mjs'
 import IconRobot from '@tabler/icons-vue/dist/esm/icons/IconRobot.mjs'
-import IconRoute from '@tabler/icons-vue/dist/esm/icons/IconRoute.mjs'
-import IconCodeDots from '@tabler/icons-vue/dist/esm/icons/IconCodeDots.mjs'
-import IconPencilBolt from '@tabler/icons-vue/dist/esm/icons/IconPencilBolt.mjs'
-import IconChartDots3 from '@tabler/icons-vue/dist/esm/icons/IconChartDots3.mjs'
 import IconSparkles from '@tabler/icons-vue/dist/esm/icons/IconSparkles.mjs'
-import IconX from '@tabler/icons-vue/dist/esm/icons/IconX.mjs'
 import api from '@/api'
 
 const emit = defineEmits(['send'])
@@ -299,8 +217,6 @@ const content = ref('')
 const pendingAttachments = ref([])
 const uploadingFiles = ref([])
 const showEmoji = ref(false)
-const showAgentPanel = ref(false)
-const sending = ref(false)
 const fileInput = ref(null)
 const textareaRef = ref(null)
 const isDragging = ref(false)
@@ -318,31 +234,30 @@ const activeModel = computed(() => {
   return settings.models.find(m => m.is_default) || settings.models[0] || null
 })
 
-const isComfyModel = computed(() => activeModel.value?.provider === 'comfy')
+const activeAgent = computed(() => {
+  const selected = settings.agents.find(item => item.id === chat.selectedAgentId)
+  if (selected) return selected
+  return chat.selectedAgentId ? settings.agents.find(item => item.id === 'auto') || null : null
+})
+const isComfyModel = computed(() => activeModel.value?.provider === 'comfy' && !activeAgent.value)
 const imageModelOptions = computed(() => settings.models.filter(m => m.provider === 'comfy'))
 const textModelOptions = computed(() => settings.models.filter(m => m.provider !== 'comfy'))
 const selectedModelValue = computed(() => chat.selectedModelId == null ? '' : String(chat.selectedModelId))
-const activeAgent = computed(() => {
-  return settings.agents.find(agent => agent.id === chat.selectedAgentId) || null
-})
-
-const agentIcons = {
-  route: IconRoute,
-  code: IconCodeDots,
-  pencil: IconPencilBolt,
-  chart: IconChartDots3
-}
 
 const inputPlaceholder = computed(() => {
-  if (isComfyModel.value) return '描述你想要的图片，比如场景、主体、风格、镜头和光线'
+  if (isComfyModel.value) return '描述要生成或处理的图片；可上传原图后说“去水印、换背景、修复照片”'
   if (activeAgent.value?.placeholder) return activeAgent.value.placeholder
   return '给我一段需求，我可以继续对话，也可以帮你联动图片生成'
 })
 
 const modelSupportsImage = computed(() => {
-  if (!activeModel.value) return true
+  const model = activeAgent.value && activeModel.value?.provider === 'comfy'
-  if (isComfyModel.value) return false
+    ? textModelOptions.value.find(item => item.is_default) || textModelOptions.value[0]
-  return activeModel.value.support_image !== 0 && activeModel.value.support_image !== false
+    : activeModel.value
+  if (!model) return false
+  if (isComfyModel.value) return true
+  if (activeAgent.value && imageModelOptions.value.length) return true
+  return model.support_image !== 0 && model.support_image !== false
 })
 
 const canUploadImage = computed(() => !auth.isGuest && features.value.upload_image && perms.value.can_upload_image && modelSupportsImage.value)
@@ -373,13 +288,13 @@ const acceptTypes = computed(() => {
 
 const canSend = computed(() => {
   return (content.value.trim() || pendingAttachments.value.length) &&
-    !sending.value &&
+    !chat.sending &&
     !uploadingFiles.value.length
 })
 
 const capabilityText = computed(() => {
-  if (isComfyModel.value) return '已连接图片生成模型'
+  if (activeAgent.value) return `${activeAgent.value.name} · 自动选择语言 / 生图模型`
-  if (activeAgent.value) return `${activeAgent.value.name}已就绪`
+  if (isComfyModel.value) return '已连接图片生成 / 编辑模型'
   return '已连接语言模型'
 })
 
@@ -418,39 +333,15 @@ function autoResize() {
 }
 
 function handleKeydown(e) {
-  if (e.key === 'Escape' && showAgentPanel.value) {
-    e.preventDefault()
-    showAgentPanel.value = false
-    return
-  }
-
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault()
     handleSend()
   }
 }
 
-function agentIcon(icon) {
+function toggleAgent() {
-  return agentIcons[icon] || IconRobot
+  const automaticAgent = settings.agents.find(agent => agent.id === 'auto') || settings.agents[0]
-}
+  chat.setSelectedAgent(activeAgent.value ? null : automaticAgent?.id || null)
-
-function selectAgent(agent) {
-  chat.setSelectedAgent(agent.id)
-}
-
-function clearAgent() {
-  chat.setSelectedAgent(null)
-  showAgentPanel.value = false
-  textareaRef.value?.focus()
-}
-
-async function applyAgentStarter(starter) {
-  content.value = content.value.trim()
-    ? `${content.value.trim()}\n${starter}`
-    : starter
-  showAgentPanel.value = false
-  await nextTick()
-  autoResize()
   textareaRef.value?.focus()
 }
 
@@ -635,7 +526,6 @@ async function handleModelChange(e) {
 
   try {
     await chat.setSelectedModel(value === '' ? null : Number(value))
-    if (targetModel?.provider === 'comfy') showAgentPanel.value = false
   } catch (err) {
     notification.error(err, { title: '模型切换失败' })
   }
@@ -650,19 +540,22 @@ async function switchToImageMode() {
   if (!target) return
   try {
     await chat.setSelectedModel(Number(target.id))
-    showAgentPanel.value = false
   } catch (err) {
     notification.error(err, { title: '图片模式切换失败' })
   }
 }
 
 function preventImageModeSwitchForAttachments() {
-  if (!pendingAttachments.value.length && !uploadingFiles.value.length) return false
+  if (!uploadingFiles.value.length && pendingAttachments.value.every(att => att?.type === 'image')) {
+    return false
+  }
 
   notification.show({
     type: 'error',
-    title: '请先处理已添加的附件',
+    title: '图片模式只接受已上传完成的图片',
-    message: '当前图片仍属于语言模型消息。请先发送给语言模型，或点击缩略图上的 × 移除附件后，再切换到图片生成模式。',
+    message: uploadingFiles.value.length
+      ? '请等待附件上传完成后再切换图片模式。'
+      : '请先移除文档或视频附件；img2img / inpaint 只接受图片。',
     duration: 6000
   })
   textareaRef.value?.focus()
@@ -724,6 +617,18 @@ async function uploadFile(file) {
     return
   }
 
+  if (isComfyModel.value
+    && isImageFile(file)
+    && pendingAttachments.value.length + uploadingFiles.value.length >= 2) {
+    notification.show({
+      type: 'error',
+      title: '图片数量已达上限',
+      message: '图片处理最多使用一张原图和一张黑白遮罩。',
+      duration: 4500
+    })
+    return
+  }
+
   const id = `up-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
   const controller = new AbortController()
   const entry = { id, name: file.name, progress: 0, controller }
@@ -793,14 +698,23 @@ async function handleSend() {
     return
   }
 
-  if (isComfyModel.value && pendingAttachments.value.length) {
+  if (isComfyModel.value && pendingAttachments.value.some(att => att?.type !== 'image')) {
     notification.show({
       type: 'error',
-      title: '当前不支持图生图',
+      title: '图片处理只接受图片附件',
-      message: '当前 ComfyUI 工作流仅支持文字生成图片。请移除附件并输入图片描述；如需识别图片，请切换到语言模型。',
+      message: '请移除文档或视频；第一张图片作为原图，第二张可作为黑白遮罩。',
+      duration: 6000
+    })
+    return
+  }
+
+  if (isComfyModel.value && pendingAttachments.value.length > 2) {
+    notification.show({
+      type: 'error',
+      title: '图片数量过多',
+      message: '最多上传两张图片：第一张原图，第二张同尺寸黑白遮罩。',
       duration: 6000
     })
-    textareaRef.value?.focus()
     return
   }
 
@@ -815,7 +729,6 @@ async function handleSend() {
     return
   }
 
-  sending.value = true
   const text = content.value.trim()
   const attachments = pendingAttachments.value.map(a => ({
     type: a.type,
@@ -840,9 +753,8 @@ async function handleSend() {
   emit('send', {
     content: text,
     attachments,
-    agentId: isComfyModel.value ? null : activeAgent.value?.id || null
+    agentId: activeAgent.value?.id || null
   })
-  sending.value = false
 }
 </script>
 
@@ -1033,324 +945,6 @@ async function handleSend() {
   transition: border-color 0.18s ease, box-shadow 0.18s ease;
 }
 
-.agent-panel {
-  position: absolute;
-  right: 0;
-  bottom: calc(100% + 10px);
-  left: 0;
-  z-index: 40;
-  max-height: min(58dvh, 430px);
-  padding: 18px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border: 1px solid #dce3ec;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.98);
-  box-shadow: 0 24px 64px rgba(31, 49, 78, 0.17), 0 2px 8px rgba(31, 49, 78, 0.06);
-  backdrop-filter: blur(16px);
-}
-
-.agent-panel-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 2px 2px 14px;
-}
-
-.agent-eyebrow {
-  display: block;
-  margin-bottom: 5px;
-  color: var(--accent);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-}
-
-.agent-panel-header h3 {
-  color: var(--text-primary);
-  font-size: 18px;
-  font-weight: 680;
-  letter-spacing: -0.025em;
-  line-height: 1.35;
-}
-
-.agent-panel-header p {
-  margin-top: 4px;
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.agent-panel-close,
-.active-agent-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--text-muted);
-  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
-}
-
-.agent-panel-close {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-}
-
-.agent-panel-close:hover,
-.active-agent-remove:hover {
-  background: #edf1f6;
-  color: var(--text-primary);
-}
-
-.agent-panel-close:active,
-.active-agent-remove:active {
-  transform: scale(0.94);
-}
-
-.agent-options {
-  overflow: hidden;
-  border-top: 1px solid #e8edf3;
-  border-bottom: 1px solid #e8edf3;
-}
-
-.agent-option {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  min-height: 72px;
-  padding: 10px 10px 10px 8px;
-  color: var(--text-primary);
-  text-align: left;
-  transition: background 0.16s ease, transform 0.16s ease;
-}
-
-.agent-option + .agent-option {
-  border-top: 1px solid #edf1f5;
-}
-
-.agent-option::before {
-  position: absolute;
-  top: 13px;
-  bottom: 13px;
-  left: 0;
-  width: 3px;
-  border-radius: 3px;
-  background: var(--accent);
-  content: '';
-  opacity: 0;
-  transform: scaleY(0.55);
-  transition: opacity 0.16s ease, transform 0.18s ease;
-}
-
-.agent-option:hover {
-  background: #f8fafc;
-}
-
-.agent-option:active {
-  transform: scale(0.995);
-}
-
-.agent-option.selected {
-  background: #f2f6fc;
-}
-
-.agent-option.selected::before {
-  opacity: 1;
-  transform: scaleY(1);
-}
-
-.agent-option-icon,
-.active-agent-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background: #eaf1ff;
-  color: #2d66da;
-}
-
-.agent-option-icon {
-  width: 42px;
-  height: 42px;
-  border-radius: 13px;
-}
-
-.agent-option-icon[data-accent='teal'],
-.active-agent-icon[data-accent='teal'] {
-  background: #e7f5f1;
-  color: #177565;
-}
-
-.agent-option-icon[data-accent='amber'],
-.active-agent-icon[data-accent='amber'] {
-  background: #fff3dd;
-  color: #94600b;
-}
-
-.agent-option-icon[data-accent='slate'],
-.active-agent-icon[data-accent='slate'] {
-  background: #edf0f4;
-  color: #4b5b70;
-}
-
-.agent-option-copy {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.agent-option-heading {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.agent-option-heading strong {
-  margin-right: 3px;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.agent-option-copy small {
-  margin-top: 5px;
-  overflow: hidden;
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.4;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agent-tag {
-  padding: 2px 6px;
-  border: 1px solid #e0e6ee;
-  border-radius: 5px;
-  background: #fff;
-  color: #67758a;
-  font-size: 10px;
-  line-height: 1.4;
-}
-
-.agent-option-check {
-  flex-shrink: 0;
-  color: var(--accent);
-}
-
-.agent-panel-footer {
-  display: flex;
-  align-items: flex-end;
-  gap: 18px;
-  padding: 14px 2px 1px;
-}
-
-.agent-starters {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  gap: 7px;
-  min-width: 0;
-}
-
-.agent-starters > span {
-  width: 100%;
-  color: var(--text-muted);
-  font-size: 10px;
-  font-weight: 650;
-  letter-spacing: 0.05em;
-}
-
-.agent-starters button {
-  max-width: 100%;
-  padding: 6px 9px;
-  overflow: hidden;
-  border: 1px solid #dfe6ef;
-  border-radius: 8px;
-  background: #f8fafc;
-  color: var(--text-secondary);
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
-}
-
-.agent-starters button:hover {
-  border-color: #c9d7ed;
-  background: #f1f6fd;
-  color: var(--accent);
-}
-
-.agent-disable {
-  flex-shrink: 0;
-  padding: 7px 4px;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-.agent-disable:hover {
-  color: var(--danger);
-}
-
-.active-agent-strip {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  min-height: 48px;
-  margin: 9px 10px 0;
-  padding: 6px 7px;
-  border: 1px solid #e1e7ef;
-  border-radius: 12px;
-  background: #f7f9fc;
-}
-
-.active-agent-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-}
-
-.active-agent-copy {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.active-agent-copy strong {
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.35;
-}
-
-.active-agent-copy small {
-  margin-top: 2px;
-  overflow: hidden;
-  color: var(--text-muted);
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.active-agent-adjust {
-  padding: 5px 7px;
-  color: var(--accent);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.active-agent-remove {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-}
-
 .agent-trigger {
   position: relative;
   display: inline-flex;
@@ -1393,18 +987,6 @@ async function handleSend() {
   box-shadow: 0 0 0 3px rgba(47, 141, 115, 0.1);
 }
 
-.agent-panel-enter-active,
-.agent-panel-leave-active {
-  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
-  transform-origin: center bottom;
-}
-
-.agent-panel-enter-from,
-.agent-panel-leave-to {
-  opacity: 0;
-  transform: translateY(8px) scale(0.985);
-}
-
 .input-wrapper:focus-within {
   border-color: rgba(45, 102, 218, 0.54);
   box-shadow: 0 0 0 3px rgba(45, 102, 218, 0.09), var(--shadow-composer);
@@ -1652,89 +1234,6 @@ async function handleSend() {
     border-radius: 18px;
   }
 
-  .agent-panel {
-    bottom: calc(100% + 8px);
-    max-height: min(57dvh, 460px);
-    padding: 14px;
-    border-radius: 18px;
-  }
-
-  .agent-panel-header {
-    gap: 12px;
-    padding-bottom: 11px;
-  }
-
-  .agent-panel-header h3 {
-    font-size: 16px;
-  }
-
-  .agent-panel-header p {
-    max-width: 270px;
-    font-size: 11px;
-  }
-
-  .agent-option {
-    min-height: 64px;
-    gap: 10px;
-    padding: 8px 7px 8px 6px;
-  }
-
-  .agent-option-icon {
-    width: 38px;
-    height: 38px;
-    border-radius: 11px;
-  }
-
-  .agent-option-copy small {
-    margin-top: 3px;
-    font-size: 11px;
-  }
-
-  .agent-tag {
-    display: none;
-  }
-
-  .agent-panel-footer {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 6px;
-    padding-top: 11px;
-  }
-
-  .agent-starters {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .agent-starters > span {
-    display: none;
-  }
-
-  .agent-starters button {
-    flex: 0 0 auto;
-    max-width: 86%;
-  }
-
-  .agent-disable {
-    align-self: flex-end;
-  }
-
-  .active-agent-strip {
-    min-height: 44px;
-    margin: 7px 8px 0;
-    padding: 5px 6px;
-  }
-
-  .active-agent-icon {
-    width: 32px;
-    height: 32px;
-  }
-
-  .active-agent-copy small {
-    max-width: 42vw;
-  }
-
   .input-textarea {
     min-height: 66px;
     padding: 14px 12px 8px;
@@ -1841,8 +1340,6 @@ async function handleSend() {
   .mode-tab,
   .model-picker,
   .send-btn,
-  .agent-panel,
-  .agent-option,
   .agent-trigger,
   .upload-progress-fill {
     transition: none;

frontend/src/components/MessageItem.vue

@@ -4,16 +4,25 @@
       <IconUser v-if="message.role === 'user'" :size="16" :stroke-width="1.8" />
       <IconSparkles v-else :size="16" :stroke-width="1.8" />
     </div>
-    <div class="message-body">
+    <div ref="messageBodyRef" class="message-body" :class="{ 'wide-image-message': isAssistantImageGrid || showImageSkeleton }">
-      <div v-if="attachments.length" class="attachments">
+      <div v-if="showImageSkeleton" class="image-loading-grid" aria-label="正在生成四张图片">
+        <span class="generation-progress"><IconSparkles :size="15" :stroke-width="1.8" /> {{ generationProgress }}%</span>
+        <i v-for="index in 4" :key="index" />
+      </div>
+      <div v-if="attachments.length" class="attachments" :class="{ 'image-grid': isAssistantImageGrid }">
         <template v-for="(att, i) in attachments" :key="i">
           <img
             v-if="att?.type === 'image' && features.image && !brokenImages[i]"
             :src="att.url"
             :alt="att.name || '生成图片'"
             class="att-image"
+            role="button"
+            tabindex="0"
+            :aria-label="`放大查看${att.name || '图片'}`"
             @error="markBroken(i)"
-            @click="previewImage(att.url)"
+            @click="previewImage(att)"
+            @keydown.enter="previewImage(att)"
+            @keydown.space.prevent="previewImage(att)"
           />
           <a
             v-else-if="att?.type === 'image'"
@@ -58,11 +67,26 @@
         v-html="renderedContent"
       />
 
-      <div v-if="message.content && !isStreaming" class="message-actions">
+      <div
+        v-if="(message.content || firstImage) && !isStreaming"
+        class="message-actions"
+        :class="{ 'has-image': firstImage }"
+      >
         <button
+          v-if="firstImage"
+          class="message-action-btn image-edit-btn"
+          type="button"
+          aria-label="在 AI 图片工作台中编辑"
+          @click="previewImage(firstImage)"
+        >
+          <IconEdit :size="15" :stroke-width="1.8" />
+          <span>AI 编辑</span>
+        </button>
+        <button
+          v-if="message.content || firstImage"
           class="message-action-btn"
           type="button"
-          :aria-label="copied ? '消息内容已复制' : '复制消息内容'"
+          :aria-label="copied ? '消息图文内容已复制' : '复制消息图文内容'"
           @click="copyContent"
         >
           <IconCheck v-if="copied" :size="15" :stroke-width="2" />
@@ -75,10 +99,11 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, onBeforeUnmount } from 'vue'
+import { computed, reactive, ref, onBeforeUnmount, watch } from 'vue'
 import IconCheck from '@tabler/icons-vue/dist/esm/icons/IconCheck.mjs'
 import IconCopy from '@tabler/icons-vue/dist/esm/icons/IconCopy.mjs'
 import IconFileText from '@tabler/icons-vue/dist/esm/icons/IconFileText.mjs'
+import IconEdit from '@tabler/icons-vue/dist/esm/icons/IconEdit.mjs'
 import IconPhoto from '@tabler/icons-vue/dist/esm/icons/IconPhoto.mjs'
 import IconSparkles from '@tabler/icons-vue/dist/esm/icons/IconSparkles.mjs'
 import IconUser from '@tabler/icons-vue/dist/esm/icons/IconUser.mjs'
@@ -90,22 +115,61 @@ const props = defineProps({
   message: { type: Object, required: true },
   isStreaming: Boolean
 })
+const emit = defineEmits(['preview-image'])
 
 const settings = useSettingsStore()
 const notification = useNotificationStore()
 const features = computed(() => settings.features)
 const copied = ref(false)
+const messageBodyRef = ref(null)
+const generationProgress = ref(4)
+const fourImageLoading = ref(false)
 let copiedTimer = null
+let progressTimer = null
 
 onBeforeUnmount(() => {
   if (copiedTimer) clearTimeout(copiedTimer)
+  if (progressTimer) clearInterval(progressTimer)
 })
 
 const attachments = computed(() => {
   const raw = props.message.attachments
   const list = Array.isArray(raw) ? raw : (raw && typeof raw === 'object' ? Object.values(raw) : [])
-  return list.filter(att => att && typeof att === 'object')
+  return list.filter(att => att && typeof att === 'object' && !att.hidden)
 })
+const firstImage = computed(() => attachments.value.find(att => att?.type === 'image' && att?.url) || null)
+const imageAttachments = computed(() => attachments.value.filter(att => att?.type === 'image' && att?.url))
+const isAssistantImageGrid = computed(() => props.message.role === 'assistant' && imageAttachments.value.length >= 2)
+const pendingImageCount = computed(() => Number(props.message.pending_image_count || 0))
+const showImageSkeleton = computed(() => fourImageLoading.value && !imageAttachments.value.length)
+
+watch(
+  () => [props.isStreaming, props.message.pending_job, pendingImageCount.value, props.message.content, imageAttachments.value.length],
+  ([streaming, pending, count, content, images]) => {
+    if (images) {
+      fourImageLoading.value = false
+      return
+    }
+    if ((pending && Number(count) >= 4) || (streaming && /正在生成\s*4\s*张图片|正在生成图片|图片生成中/u.test(String(content || '')))) {
+      fourImageLoading.value = true
+      return
+    }
+    if (!pending && !streaming) fourImageLoading.value = false
+  },
+  { immediate: true }
+)
+
+watch(showImageSkeleton, active => {
+  if (progressTimer) {
+    clearInterval(progressTimer)
+    progressTimer = null
+  }
+  if (!active) return
+  generationProgress.value = 4
+  progressTimer = setInterval(() => {
+    generationProgress.value = Math.min(92, generationProgress.value + Math.max(1, Math.round((94 - generationProgress.value) * 0.08)))
+  }, 800)
+}, { immediate: true })
 
 const useMarkdown = computed(() => {
   return features.value.markdown && props.message.role === 'assistant'
@@ -131,38 +195,229 @@ function markBroken(index) {
   brokenImages[index] = true
 }
 
-function previewImage(url) {
+function previewImage(attachment) {
-  window.open(url, '_blank', 'noopener')
+  if (!attachment?.url) return
+  emit('preview-image', {
+    url: attachment.url,
+    name: attachment.name || '图片预览'
+  })
 }
 
-function legacyCopy(text) {
+const COPY_STYLE_PROPERTIES = [
-  const textarea = document.createElement('textarea')
+  'background-color', 'border', 'border-collapse', 'border-radius', 'box-shadow',
-  textarea.value = text
+  'color', 'display', 'font-family', 'font-size', 'font-style', 'font-weight',
-  textarea.setAttribute('readonly', '')
+  'height', 'letter-spacing', 'line-height', 'list-style-position', 'list-style-type',
-  textarea.style.position = 'fixed'
+  'margin', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'max-height',
-  textarea.style.inset = '-9999px auto auto -9999px'
+  'max-width', 'min-width', 'padding', 'padding-bottom', 'padding-left', 'padding-right',
-  document.body.appendChild(textarea)
+  'padding-top', 'text-align', 'text-decoration', 'vertical-align', 'white-space', 'width'
-  textarea.select()
+]
+
+function inlineCopyStyles(source, clone) {
+  if (!(source instanceof Element) || !(clone instanceof Element)) return
+  const computedStyle = window.getComputedStyle(source)
+  COPY_STYLE_PROPERTIES.forEach(property => {
+    const value = computedStyle.getPropertyValue(property)
+    if (value) clone.style.setProperty(property, value)
+  })
+
+  clone.removeAttribute('class')
+  clone.removeAttribute('role')
+  clone.removeAttribute('tabindex')
+  clone.removeAttribute('aria-label')
+  if (clone instanceof HTMLImageElement) {
+    const rect = source.getBoundingClientRect()
+    if (rect.width > 0) clone.style.width = `${Math.round(rect.width)}px`
+    clone.style.height = 'auto'
+    clone.style.cursor = 'default'
+  }
+
+  const sourceChildren = Array.from(source.children)
+  const cloneChildren = Array.from(clone.children)
+  sourceChildren.forEach((child, index) => inlineCopyStyles(child, cloneChildren[index]))
+}
+
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result || ''))
+    reader.onerror = () => reject(reader.error || new Error('图片读取失败'))
+    reader.readAsDataURL(blob)
+  })
+}
+
+async function fetchImageBlob(url) {
+  const response = await fetch(url, { credentials: 'include' })
+  if (!response.ok) throw new Error(`图片读取失败（${response.status}）`)
+  const blob = await response.blob()
+  if (!blob.type.startsWith('image/')) throw new Error('附件不是图片')
+  return blob
+}
+
+function imageBlobToPng(blob) {
+  if (blob.type === 'image/png') return Promise.resolve(blob)
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    const objectUrl = URL.createObjectURL(blob)
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      const context = canvas.getContext('2d')
+      if (!context) {
+        URL.revokeObjectURL(objectUrl)
+        reject(new Error('浏览器无法转换图片'))
+        return
+      }
+      context.drawImage(image, 0, 0)
+      URL.revokeObjectURL(objectUrl)
+      canvas.toBlob(result => {
+        if (result) resolve(result)
+        else reject(new Error('浏览器无法转换图片'))
+      }, 'image/png')
+    }
+    image.onerror = () => {
+      URL.revokeObjectURL(objectUrl)
+      reject(new Error('图片解码失败'))
+    }
+    image.src = objectUrl
+  })
+}
+
+function prepareRichCopyPayload() {
+  const sourceBody = messageBodyRef.value
+  const container = document.createElement('div')
+  container.setAttribute('data-ai-chat-message', '')
+  container.style.cssText = 'max-width:720px;color:#1f2937;font-family:Arial,"Microsoft YaHei",sans-serif;font-size:15px;line-height:1.75;'
+
+  if (sourceBody) {
+    Array.from(sourceBody.children).forEach(source => {
+      if (!source.classList.contains('attachments') && !source.classList.contains('message-content')) return
+      const clone = source.cloneNode(true)
+      inlineCopyStyles(source, clone)
+      if (source.classList.contains('attachments')) {
+        clone.style.display = 'block'
+        clone.style.width = '100%'
+      }
+      container.appendChild(clone)
+    })
+  }
+
+  if (!container.children.length && props.message.content) {
+    const content = document.createElement('div')
+    content.innerHTML = renderedContent.value
+    container.appendChild(content)
+  }
+
+  const imageJobs = Array.from(container.querySelectorAll('img')).map((image, index) => {
+    const attachment = imageAttachments.value[index]
+    const url = attachment?.url || image.getAttribute('src') || ''
+    const absoluteUrl = url ? new URL(url, window.location.href).href : ''
+    if (absoluteUrl) image.src = absoluteUrl
+    return { image, url: absoluteUrl }
+  }).filter(job => job.url)
+
+  const textParts = []
+  if (props.message.content) textParts.push(String(props.message.content))
+  if (!props.message.content && imageAttachments.value.length) {
+    textParts.push(...imageAttachments.value.map(att => att.name || '图片'))
+  }
+
+  return {
+    container,
+    text: textParts.join('\n\n'),
+    imageJobs
+  }
+}
+
+async function resolveRichCopyPayload(prepared) {
+  const blobs = []
+  await Promise.all(prepared.imageJobs.map(async ({ image, url }, index) => {
+    try {
+      const blob = await fetchImageBlob(url)
+      blobs[index] = blob
+      image.src = await blobToDataUrl(blob)
+    } catch {
+      // Keep the absolute URL so rich-text targets can still retrieve the image.
+      image.src = url
+    }
+  }))
+
+  return {
+    html: prepared.container.outerHTML,
+    text: prepared.text,
+    primaryImage: blobs.find(Boolean) || null
+  }
+}
+
+function legacyCopy(payload) {
+  const holder = document.createElement('div')
+  holder.contentEditable = 'true'
+  holder.innerHTML = payload.html
+  holder.style.position = 'fixed'
+  holder.style.left = '-10000px'
+  holder.style.top = '0'
+  holder.style.opacity = '0'
+  document.body.appendChild(holder)
+
+  const selection = window.getSelection()
+  const previousRanges = []
+  if (selection) {
+    for (let index = 0; index < selection.rangeCount; index += 1) {
+      previousRanges.push(selection.getRangeAt(index).cloneRange())
+    }
+    selection.removeAllRanges()
+    const range = document.createRange()
+    range.selectNodeContents(holder)
+    selection.addRange(range)
+  }
+
   const success = document.execCommand('copy')
-  textarea.remove()
+  selection?.removeAllRanges()
+  previousRanges.forEach(range => selection?.addRange(range))
+  holder.remove()
   if (!success) throw new Error('浏览器未允许复制')
 }
 
+function writeRichClipboard(prepared) {
+  const immediatePayload = {
+    html: prepared.container.outerHTML,
+    text: prepared.text
+  }
+
+  if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
+    legacyCopy(immediatePayload)
+    return Promise.resolve()
+  }
+
+  // Start the Clipboard API call inside the click event. The payload promises may
+  // finish later, but the browser's transient user activation is retained.
+  const payloadPromise = resolveRichCopyPayload(prepared)
+  const representations = {
+    'text/html': payloadPromise.then(payload => new Blob([payload.html], { type: 'text/html' })),
+    'text/plain': new Blob([prepared.text], { type: 'text/plain' })
+  }
+  if (prepared.imageJobs.length) {
+    representations['image/png'] = payloadPromise.then(payload => {
+      if (!payload.primaryImage) throw new Error('图片数据读取失败')
+      return imageBlobToPng(payload.primaryImage)
+    })
+  }
+
+  return navigator.clipboard.write([new ClipboardItem(representations)])
+}
+
 async function copyContent() {
   const text = String(props.message.content || '')
-  if (!text) return
+  if (!text && !imageAttachments.value.length) return
 
   let success = false
+  const prepared = prepareRichCopyPayload()
   try {
-    if (navigator.clipboard?.writeText) {
+    await writeRichClipboard(prepared)
-      await navigator.clipboard.writeText(text)
-    } else {
-      legacyCopy(text)
-    }
     success = true
   } catch {
     try {
-      legacyCopy(text)
+      legacyCopy({ html: prepared.container.outerHTML, text: prepared.text })
       success = true
     } catch {
       success = false
@@ -240,6 +495,11 @@ async function copyContent() {
   align-items: flex-start;
 }
 
+.message.assistant .message-body.wide-image-message {
+  width: 100%;
+  max-width: 100%;
+}
+
 .message-content {
   display: inline-block;
   max-width: 100%;
@@ -261,6 +521,19 @@ async function copyContent() {
   transition: opacity 0.16s ease;
 }
 
+.image-edit-btn {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.message-actions.has-image {
+  height: auto;
+  margin-top: 7px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
+
 .message.user .message-actions {
   justify-content: flex-end;
 }
@@ -339,6 +612,55 @@ async function copyContent() {
   margin-bottom: 8px;
 }
 
+.attachments.image-grid,
+.image-loading-grid {
+  display: grid;
+  position: relative;
+  width: 100%;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+.attachments.image-grid .att-image {
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: none;
+  aspect-ratio: 1 / 1;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.image-loading-grid i {
+  display: block;
+  aspect-ratio: 1 / 1;
+  background: linear-gradient(115deg, #edf2ff 8%, #f5f1ff 38%, #eaf3ff 64%, #edf2ff 92%);
+  background-size: 240% 100%;
+  animation: image-skeleton 1.8s ease-in-out infinite;
+}
+
+.generation-progress {
+  display: inline-flex;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  left: 10px;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 8px;
+  border: 1px solid rgba(214, 223, 241, .9);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .92);
+  color: #4b5565;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 650;
+  box-shadow: 0 5px 16px rgba(38, 59, 92, .08);
+}
+
 .message.user .attachments {
   justify-content: flex-end;
 }
@@ -407,6 +729,11 @@ async function copyContent() {
   46%, 100% { opacity: 0; }
 }
 
+@keyframes image-skeleton {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
 @media (max-width: 768px) {
   .message {
     gap: 8px;
@@ -445,6 +772,12 @@ async function copyContent() {
     max-height: 420px;
     border-radius: 14px;
   }
+
+  .attachments.image-grid,
+  .image-loading-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    border-radius: 14px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -457,5 +790,9 @@ async function copyContent() {
   .att-document {
     transition: none;
   }
+
+  .image-loading-grid i {
+    animation: none;
+  }
 }
 </style>

frontend/src/components/MessageList.vue

@@ -14,7 +14,7 @@
             <IconSparkles :size="25" :stroke-width="1.7" />
           </div>
           <h2>一个输入框，完成对话与图片创作</h2>
-          <p>选择语言模型或图片生成模型，描述你的需求就可以开始。</p>
+          <p>描述需求即可开始；使用 Agent 时会自动选择语言或图片生成模型。</p>
         </div>
       </div>
 
@@ -28,12 +28,14 @@
         v-for="msg in visibleMessages"
         :key="msg.id"
         :message="msg"
+        @preview-image="openImagePreview"
       />
 
       <MessageItem
         v-if="hasStreaming"
         :message="{ role: 'assistant', content: streaming, content_type: 'mixed', attachments: streamingAttachments }"
         :is-streaming="true"
+        @preview-image="openImagePreview"
       />
 
       <div v-if="sending && !hasStreaming" class="typing-indicator" aria-label="AI 正在回复">
@@ -54,14 +56,19 @@
         <span>回到最新</span>
       </button>
     </Transition>
+
+    <Teleport to="body">
+      <ImageWorkbench v-if="previewedImage" :image="previewedImage" @close="closeImagePreview" />
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, nextTick, computed } from 'vue'
+import { ref, watch, nextTick, computed, onMounted, onBeforeUnmount } from 'vue'
 import IconArrowDown from '@tabler/icons-vue/dist/esm/icons/IconArrowDown.mjs'
 import IconSparkles from '@tabler/icons-vue/dist/esm/icons/IconSparkles.mjs'
 import MessageItem from './MessageItem.vue'
+import ImageWorkbench from './ImageWorkbench.vue'
 
 const props = defineProps({
   messages: { type: Array, default: () => [] },
@@ -74,6 +81,9 @@ const props = defineProps({
 const listRef = ref(null)
 const autoScrollEnabled = ref(true)
 const isAtBottom = ref(true)
+const previewedImage = ref(null)
+let previousBodyOverflow = ''
+let previewLocksBody = false
 let touchY = null
 
 const BOTTOM_EPSILON = 2
@@ -142,6 +152,44 @@ function resumeAutoScroll() {
   scrollToBottom()
 }
 
+function openImagePreview(image) {
+  if (!image?.url) return
+  previewedImage.value = image
+}
+
+function closeImagePreview() {
+  previewedImage.value = null
+}
+
+function handlePreviewKeydown(event) {
+  if (event.key === 'Escape' && previewedImage.value) {
+    closeImagePreview()
+  }
+}
+
+watch(previewedImage, (image, previousImage) => {
+  if (image && !previousImage) {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    previewLocksBody = true
+  } else if (!image && previousImage && previewLocksBody) {
+    document.body.style.overflow = previousBodyOverflow
+    previewLocksBody = false
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', handlePreviewKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handlePreviewKeydown)
+  if (previewLocksBody) {
+    document.body.style.overflow = previousBodyOverflow
+    previewLocksBody = false
+  }
+})
+
 watch(
   () => {
     const last = visibleMessages.value[visibleMessages.value.length - 1]
@@ -235,6 +283,97 @@ watch(
   transform: translateX(-50%) translateY(7px);
 }
 
+.image-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  padding: 58px 28px 22px;
+  background: rgba(12, 19, 31, 0.88);
+  backdrop-filter: blur(14px);
+}
+
+.image-preview-stage {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-preview-full {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 94vw;
+  max-height: calc(100vh - 112px);
+  border-radius: 14px;
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
+  object-fit: contain;
+  user-select: none;
+}
+
+.image-preview-close {
+  position: fixed;
+  top: 18px;
+  right: 20px;
+  z-index: 1;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+  transition: background 0.16s ease, transform 0.16s ease;
+}
+
+.image-preview-close:hover,
+.image-preview-close:focus-visible {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.image-preview-close:active {
+  transform: scale(0.95);
+}
+
+.image-preview-caption {
+  max-width: min(80vw, 720px);
+  margin: 14px auto 0;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-preview-enter-active,
+.image-preview-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.image-preview-enter-active .image-preview-full,
+.image-preview-leave-active .image-preview-full {
+  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+
+.image-preview-enter-from,
+.image-preview-leave-to {
+  opacity: 0;
+}
+
+.image-preview-enter-from .image-preview-full,
+.image-preview-leave-to .image-preview-full {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
 .welcome {
   display: flex;
   align-items: center;
@@ -380,10 +519,28 @@ watch(
     max-width: 310px;
     font-size: 13px;
   }
+
+  .image-preview-overlay {
+    padding: 54px 12px 16px;
+  }
+
+  .image-preview-full {
+    max-width: calc(100vw - 24px);
+    max-height: calc(100vh - 100px);
+    border-radius: 10px;
+  }
+
+  .image-preview-close {
+    top: 12px;
+    right: 12px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .scroll-bottom-btn,
+  .image-preview-overlay,
+  .image-preview-full,
+  .image-preview-close,
   .welcome-panel,
   .loading-state span,
   .typing-indicator span {

frontend/src/stores/chat.js

@@ -193,36 +193,44 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  async function sendMessage(content, attachments = [], agentId = selectedAgentId.value) {
+  async function sendMessage(content, attachments = [], agentId = selectedAgentId.value, options = {}) {
-    if (!currentId.value) {
+    if (sending.value) return
-      await createConversation(selectedModelId.value)
-    } else if (selectedModelId.value != null) {
-      // 发送前确保当前会话已绑定侧边栏所选模型
-      const conv = conversations.value.find(c => c.id === currentId.value)
-      if (conv && Number(conv.model_id) !== Number(selectedModelId.value)) {
-        await setSelectedModel(selectedModelId.value)
-      }
-    }
 
-    const userMsg = {
-      id: Date.now(),
-      role: 'user',
-      content,
-      attachments,
-      created_at: new Date().toISOString()
-    }
-    messages.value.push(userMsg)
     sending.value = true
     streamingContent.value = ''
     streamingAttachments.value = []
+    let userMsg = null
 
     try {
-      await streamChat(content, attachments, agentId)
+      if (!currentId.value) {
+        await createConversation(selectedModelId.value)
+      } else if (selectedModelId.value != null) {
+        // 发送前确保当前会话已绑定侧边栏所选模型
+        const conv = conversations.value.find(c => c.id === currentId.value)
+        if (conv && Number(conv.model_id) !== Number(selectedModelId.value)) {
+          await setSelectedModel(selectedModelId.value)
+        }
+      }
+
+      userMsg = {
+        id: Date.now(),
+        role: 'user',
+        content,
+        attachments,
+        created_at: new Date().toISOString()
+      }
+      messages.value.push(userMsg)
+
+      await streamChat(content, attachments, agentId, options)
       await loadMessages()
     } catch (e) {
       // 连接断开/代理超时：任务可能已落库为 pending，先同步再决定是否抛错
-      messages.value = messages.value.filter(m => m.id !== userMsg.id)
+      const cancelled = e?.name === 'AbortError' || options.signal?.aborted
+      if (userMsg) {
+        messages.value = messages.value.filter(m => m.id !== userMsg.id)
+      }
       await loadMessages().catch(() => {})
+      if (cancelled) throw e
       if (hasPendingJobs(messages.value)) {
         startPendingJobPolling()
         return
@@ -235,7 +243,7 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  async function streamChat(content, attachments, agentId = null) {
+  async function streamChat(content, attachments, agentId = null, options = {}) {
     const token = localStorage.getItem('token')
     const response = await fetch('/api/chat/completions', {
       method: 'POST',
@@ -243,11 +251,13 @@ export const useChatStore = defineStore('chat', () => {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`
       },
+      signal: options.signal,
       body: JSON.stringify({
         conversation_id: currentId.value,
         content,
         attachments,
         agent_id: agentId || null,
+        image_tool: options.imageTool || null,
         stream: true
       })
     })
@@ -268,8 +278,47 @@ export const useChatStore = defineStore('chat', () => {
     const decoder = new TextDecoder()
     let buffer = ''
     let fullContent = ''
+    let receivedContent = ''
     let gotAttachments = false
     let pendingDone = false
+    let agentRenderVersion = 0
+    let agentRenderQueue = Promise.resolve()
+    const isAgentStream = !!agentId
+
+    const appendVisibleContent = (content) => {
+      if (!content) return
+      receivedContent += content
+
+      if (!isAgentStream) {
+        fullContent += content
+        streamingContent.value = fullContent
+        return
+      }
+
+      const version = agentRenderVersion
+      const characters = Array.from(content)
+      const frameCount = Math.min(10, Math.max(2, Math.ceil(characters.length / 8)))
+      const frameSize = Math.ceil(characters.length / frameCount)
+
+      agentRenderQueue = agentRenderQueue.then(async () => {
+        for (let index = 0; index < characters.length; index += frameSize) {
+          if (version !== agentRenderVersion) return
+          fullContent += characters.slice(index, index + frameSize).join('')
+          streamingContent.value = fullContent
+          if (index + frameSize < characters.length) {
+            await new Promise(resolve => setTimeout(resolve, 14))
+          }
+        }
+      })
+    }
+
+    const replaceVisibleContent = (content) => {
+      agentRenderVersion++
+      agentRenderQueue = Promise.resolve()
+      receivedContent = content
+      fullContent = content
+      streamingContent.value = content
+    }
 
     while (true) {
       const { done, value } = await reader.read()
@@ -285,6 +334,7 @@ export const useChatStore = defineStore('chat', () => {
         const { event, data } = parseSseBlock(block)
 
         if (event === 'error') {
+          agentRenderVersion++
           throw new Error(data?.message || 'AI 请求失败')
         }
 
@@ -298,8 +348,11 @@ export const useChatStore = defineStore('chat', () => {
         }
 
         if (event === 'message' && data?.content) {
-          fullContent += data.content
+          appendVisibleContent(data.content)
-          streamingContent.value = fullContent
+        }
+
+        if (event === 'replace' && typeof data?.content === 'string') {
+          replaceVisibleContent(data.content)
         }
 
         if (event === 'done') {
@@ -309,9 +362,8 @@ export const useChatStore = defineStore('chat', () => {
               streamingContent.value = data.content
             }
           }
-          if (data?.content && !fullContent) {
+          if (data?.content && !receivedContent) {
-            fullContent = data.content
+            appendVisibleContent(data.content)
-            streamingContent.value = fullContent
           }
           if (Array.isArray(data?.attachments) && data.attachments.length) {
             streamingAttachments.value = data.attachments
@@ -321,6 +373,8 @@ export const useChatStore = defineStore('chat', () => {
       }
     }
 
+    await agentRenderQueue
+
     if (pendingDone) {
       await loadMessages().catch(() => {})
       startPendingJobPolling()

package.json

@@ -8,6 +8,12 @@
     "build:member": "npm --prefix frontend run build",
     "build:admin": "npm --prefix frontend-admin run build",
     "deploy:static": "node scripts/deploy-static.js",
+    "test:agent:100": "php backend/tests/agent_100_round_regression.php",
+    "test:llm:100": "php backend/tests/llm_100_round_regression.php",
+    "test:image:regression": "php backend/tests/comfy_image_edit_regression.php",
+    "test:image:integration": "php backend/tests/comfy_image_edit_integration.php",
+    "test:stability:1000": "powershell -ExecutionPolicy Bypass -File scripts/run-stability-suite.ps1",
+    "test:conversation:3000": "powershell -NoProfile -ExecutionPolicy Bypass -File scripts/run-conversation-adversarial.ps1 -Rounds 3000",
     "preview:member": "npm --prefix frontend run preview",
     "preview:admin": "npm --prefix frontend-admin run preview"
   }

scripts/run-conversation-adversarial.ps1

@@ -0,0 +1,56 @@
+param(
+  [ValidateScript({ $_ -ge 100 -and $_ % 100 -eq 0 })]
+  [int]$Rounds = 3000
+)
+
+$ErrorActionPreference = "Stop"
+$utf8Encoding = New-Object System.Text.UTF8Encoding($false)
+[Console]::OutputEncoding = $utf8Encoding
+$OutputEncoding = $utf8Encoding
+
+$mutex = New-Object System.Threading.Mutex($false, "Local\AiChat-Conversation-Adversarial")
+$ownsMutex = $false
+
+try {
+  try {
+    $ownsMutex = $mutex.WaitOne(0)
+  } catch [System.Threading.AbandonedMutexException] {
+    $ownsMutex = $true
+  }
+
+  if (!$ownsMutex) {
+    Write-Host ">> Another conversation adversarial run is active; skipping overlap." -ForegroundColor Yellow
+    exit 0
+  }
+
+  $root = Split-Path -Parent $PSScriptRoot
+  $logRoot = Join-Path $root "logs\conversation"
+  if (!(Test-Path $logRoot)) {
+    New-Item -ItemType Directory -Path $logRoot -Force | Out-Null
+  }
+
+  $timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
+  $logFile = Join-Path $logRoot "conversation-adversarial-$timestamp.log"
+  $summaryFile = Join-Path $logRoot "conversation-adversarial-$timestamp.summary.json"
+  $testScript = Join-Path $root "backend\tests\conversation_adversarial_regression.php"
+
+  Write-Host ">> Running $Rounds adversarial conversation rounds" -ForegroundColor Cyan
+  & php $testScript $Rounds $summaryFile 2>&1 | ForEach-Object {
+    $line = [string]$_
+    Write-Host $line
+    Add-Content -Path $logFile -Value $line -Encoding UTF8
+  }
+  $exitCode = $LASTEXITCODE
+
+  if ($exitCode -ne 0) {
+    Write-Error "Conversation adversarial test failed with exit code $exitCode. Log: $logFile"
+    exit $exitCode
+  }
+
+  Write-Host ">> Conversation adversarial test passed. Log: $logFile" -ForegroundColor Green
+} finally {
+  if ($ownsMutex) {
+    $mutex.ReleaseMutex()
+  }
+  $mutex.Dispose()
+}

scripts/run-stability-suite.ps1

@@ -0,0 +1,87 @@
+param(
+  [ValidateRange(1, 1000000)]
+  [int]$Rounds = 1000
+)
+
+$ErrorActionPreference = "Stop"
+$utf8Encoding = New-Object System.Text.UTF8Encoding($false)
+[Console]::OutputEncoding = $utf8Encoding
+$OutputEncoding = $utf8Encoding
+
+$mutex = New-Object System.Threading.Mutex($false, "Local\AiChat-Stability-Suite")
+$ownsMutex = $false
+try {
+  try {
+    $ownsMutex = $mutex.WaitOne(0)
+  } catch [System.Threading.AbandonedMutexException] {
+    $ownsMutex = $true
+  }
+
+  if (!$ownsMutex) {
+    Write-Host ">> Another stability run is already active; skipping this overlapping run." -ForegroundColor Yellow
+    exit 0
+  }
+
+$root = Split-Path -Parent $PSScriptRoot
+$logRoot = Join-Path $root "logs\stability"
+if (!(Test-Path $logRoot)) {
+  New-Item -ItemType Directory -Path $logRoot -Force | Out-Null
+}
+
+$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
+$logFile = Join-Path $logRoot "stability-$timestamp.log"
+$summaryFile = Join-Path $logRoot "stability-$timestamp.summary.json"
+
+function Invoke-StabilitySuite {
+  param(
+    [string]$SuiteName
+  )
+
+  $testScript = Join-Path $root "backend\tests\stability_1000_round.php"
+  Write-Host ">> Running $SuiteName suite ($Rounds rounds)" -ForegroundColor Cyan
+  Add-Content -Path $logFile -Value "===== $SuiteName =====" -Encoding UTF8
+
+  # Windows PowerShell wraps native stderr as ErrorRecord objects. With the
+  # script-wide Stop preference, a failing suite used to abort this runner
+  # before the exit code, remaining suites, and JSON summary were recorded.
+  $previousErrorActionPreference = $ErrorActionPreference
+  try {
+    $ErrorActionPreference = "Continue"
+    & php $testScript $Rounds $SuiteName 2>&1 | ForEach-Object {
+      $line = [string]$_
+      Write-Host $line
+      Add-Content -Path $logFile -Value $line -Encoding UTF8
+    }
+    $exitCode = $LASTEXITCODE
+  } finally {
+    $ErrorActionPreference = $previousErrorActionPreference
+  }
+  Add-Content -Path $logFile -Value "" -Encoding UTF8
+
+  return [PSCustomObject]@{
+    suite = $SuiteName
+    requestedRounds = $Rounds
+    exitCode = $exitCode
+    completedAt = (Get-Date).ToString("s")
+  }
+}
+
+$summary = @()
+foreach ($suite in @("agent", "image", "llm")) {
+  $summary += Invoke-StabilitySuite -SuiteName $suite
+}
+
+$summary | ConvertTo-Json -Depth 4 | Set-Content -Path $summaryFile -Encoding UTF8
+$failedSuites = @($summary | Where-Object { $_.exitCode -ne 0 })
+if ($failedSuites.Count -gt 0) {
+  Write-Error "Stability run failed in $($failedSuites.Count) suite(s). Log: $logFile"
+  exit 1
+}
+
+Write-Host ">> Stability suites completed. Log: $logFile" -ForegroundColor Green
+} finally {
+  if ($ownsMutex) {
+    $mutex.ReleaseMutex()
+  }
+  $mutex.Dispose()
+}