cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/ChatPanel.vue

@@ -1,937 +0,0 @@
-<template>
-  <aside
-    class="aichat"
-    :class="{ 'is-open': visible }"
-    :style="{ width: panelWidth + 'px' }"
-    role="complementary"
-    aria-label="AI 开发助手"
-    @keydown.esc="onEscape"
-  >
-    <!-- 左缘拖拽把手：调宽（双击恢复默认 33%） -->
-    <div
-      class="aichat__grip"
-      :class="{ 'is-dragging': resizing }"
-      title="拖拽调整宽度（双击恢复默认）"
-      @pointerdown.prevent="startResize"
-      @dblclick.prevent="resetWidth"
-    ></div>
-
-    <!-- 头部：标题 + 当前卡片 / 模型 + 清空 / 设置 / 关闭 -->
-    <header class="aichat__head">
-      <span class="aichat__logo">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-sparkles" /></svg>
-      </span>
-      <span class="aichat__titles">
-        <span class="aichat__title">AI 开发助手</span>
-        <span class="aichat__sub">
-          <template v-if="cardId">{{ cardName || cardId }}</template>
-          <template v-else>未选择卡片</template>
-          <template v-if="config.model"> · {{ config.model }}</template>
-        </span>
-      </span>
-      <span class="aichat__acts">
-        <button type="button" class="aichat__iconbtn" title="清空本卡片对话记录" :disabled="!messages.length || busy" @click="askClear">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-trash" /></svg>
-        </button>
-        <button type="button" class="aichat__iconbtn" title="模型设置" @click="openSettings">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-settings" /></svg>
-        </button>
-        <button type="button" class="aichat__iconbtn" title="关闭（Esc）" @click="$emit('close')">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-x" /></svg>
-        </button>
-      </span>
-    </header>
-
-    <!-- 未配置模型：常驻提示条，一键打开设置 -->
-    <div v-if="!configReady" class="aichat__banner">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
-      <span>尚未配置模型，无法对话。</span>
-      <button type="button" class="aichat__banner-btn" @click="openSettings">去设置</button>
-    </div>
-
-    <!-- 消息区：滚动容器与悬浮「回到底部」共处一个定位上下文，按钮只贴消息区底缘，
-         输入区拖高 / 反馈条出现都不会把它盖住或悬空 -->
-    <div class="aichat__scroll">
-      <div ref="listEl" class="aichat__list" @scroll="onScroll">
-        <div v-if="loadingHistory" class="aichat__loading">正在加载对话记录…</div>
-
-        <div v-else-if="!messages.length" class="aichat__empty">
-          <span class="aichat__empty-logo">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-sparkles" /></svg>
-          </span>
-          <p class="aichat__empty-title">让 AI 直接改这张卡</p>
-          <p class="aichat__empty-desc">
-            描述需求即可，AI 会调用卡片工具读改校验并截图自检；也可以把设计稿标注目录、参考图拖进来，只传本机路径不上传。
-          </p>
-          <div class="aichat__suggests">
-            <button v-for="s in suggestions" :key="s.text" type="button" class="aichat__suggest" @click="useSuggestion(s)">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use :href="s.icon" /></svg>
-              <span>{{ s.label }}</span>
-            </button>
-          </div>
-        </div>
-
-        <template v-else>
-          <ChatMessage
-            v-for="(msg, idx) in messages"
-            :key="msg.id"
-            :msg="msg"
-            :streaming="busy && idx === messages.length - 1"
-            :can-regenerate="msg.role === 'assistant' && idx === messages.length - 1"
-            @regenerate="regenerate"
-            @approval="onApproval"
-            @continue="onContinue"
-          />
-          <div v-if="busy" class="aichat__live">生成中… 可随时终止</div>
-        </template>
-      </div>
-
-      <!-- 回到底部：脱离底部吸附时出现 -->
-      <button v-show="!pinned && messages.length" type="button" class="aichat__jump" title="回到底部" @click="scrollToBottom(true)">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-arrow-down" /></svg>
-      </button>
-    </div>
-
-    <!-- 操作反馈（附件解析失败 / 历史保存失败等） -->
-    <div v-if="notice" class="aichat__notice" :class="`aichat__notice--${notice.type}`">
-      <span>{{ notice.text }}</span>
-      <button type="button" class="aichat__notice-x" title="关闭" @click="notice = null">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-x" /></svg>
-      </button>
-    </div>
-
-    <ChatComposer
-      ref="composerEl"
-      :busy="busy"
-      :model="config.model"
-      :attachments="draftAttachments"
-      :placeholder="configReady ? '描述你要改的卡片，Enter 发送 / Shift+Enter 换行' : '请先在设置中配置模型…'"
-      :context="contextUsage"
-      @send="onSend"
-      @stop="stop"
-      @pick="onPick"
-      @add-path="onAddPath"
-      @remove-attachment="removeAttachment"
-      @drop-files="onDropFiles"
-      @paste-image="onPasteImage"
-      @escape="onEscape"
-    />
-
-    <!-- 模型设置（面板内浮层，不额外抬 z-index） -->
-    <AiSettings v-if="settingsOpen" :config="config" @close="settingsOpen = false" @saved="onConfigSaved" />
-
-    <ConfirmDialog
-      :visible="confirmClear"
-      title="清空对话记录"
-      :message="`将删除卡片「${cardName || cardId || '当前卡片'}」的全部对话记录，此操作不可撤销。`"
-      confirm-text="清空"
-      severity="danger"
-      @confirm="doClear"
-      @cancel="confirmClear = false"
-    />
-  </aside>
-</template>
-
-<script>
-import ChatMessage from './ChatMessage.vue'
-import ChatComposer from './ChatComposer.vue'
-import AiSettings from './AiSettings.vue'
-import ConfirmDialog from './ConfirmDialog.vue'
-import {
-  fetchAiConfig,
-  loadChatHistory,
-  saveChatHistory,
-  clearChatHistory,
-  approveToolCall,
-  pickLocalPaths,
-  statLocalPath,
-  locateDroppedFile,
-  stashPastedImage,
-  streamChat,
-} from '../runtime/ai-api.js'
-
-const WIDTH_KEY = 'cardbuddy:ai-panel-width'
-/** 宽度约束：不小于 320px、不大于视口 50%，默认 33% */
-const MIN_WIDTH = 320
-const MAX_RATIO = 0.5
-const DEFAULT_RATIO = 0.33
-
-let _seq = 0
-function uid(prefix = 'm') {
-  _seq += 1
-  return `${prefix}${Date.now().toString(36)}-${_seq}`
-}
-
-/** 建议问法：点一下即填入输入框（不自动发送，留给用户改写） */
-const SUGGESTIONS = [
-  { label: '解释这张卡的结构与数据来源', icon: '#icon-search', text: '读取当前卡片 schema，用中文解释它的结构、关键绑定与数据来源，指出可能的问题。' },
-  { label: '校验并修复当前卡片', icon: '#icon-check', text: '对当前卡片执行校验，列出全部错误并按规则修复，修完再校验一次确认清零。' },
-  { label: '截图自检还原度', icon: '#icon-image', text: '给当前卡片截图，检查布局、字号、间距与配色是否协调，指出需要调整的地方。' },
-  { label: '按标注目录建卡', icon: '#icon-folder-plus', text: '我会挂载一份 Sketch MeaXure 标注导出目录，请按标注生成卡片 schema 并自检。' },
-]
-
-export default {
-  name: 'ChatPanel',
-  components: { ChatMessage, ChatComposer, AiSettings, ConfirmDialog },
-  props: {
-    visible: { type: Boolean, default: false },
-    /** 当前卡片 id：对话记录按它分档保存 */
-    cardId: { type: String, default: '' },
-    /** 当前卡片名（头部展示） */
-    cardName: { type: String, default: '' },
-  },
-  emits: ['close'],
-  data() {
-    return {
-      messages: [],
-      draftAttachments: [],
-      busy: false,
-      loadingHistory: false,
-      settingsOpen: false,
-      confirmClear: false,
-      notice: null,
-      config: { baseUrl: '', model: '', hasKey: false, apiKeyMasked: '' },
-      widthPx: 0,
-      winW: typeof window !== 'undefined' ? window.innerWidth : 1280,
-      resizing: false,
-      pinned: true,
-      /** 上下文占用（后端每轮 context-usage 回传）：{ used, total, window }，输入框圆环的数据源 */
-      contextUsage: null,
-      suggestions: SUGGESTIONS,
-      _abort: null,
-      _saveTimer: 0,
-      _loadedCard: '',
-    }
-  },
-  computed: {
-    configReady() {
-      return Boolean(this.config.baseUrl && this.config.model && this.config.hasKey)
-    },
-    /** 面板宽度：夹取到 [320, 视口 50%]，未设置时取视口 33% */
-    panelWidth() {
-      const vw = this.winW || 1280
-      const max = Math.max(MIN_WIDTH, Math.floor(vw * MAX_RATIO))
-      const fallback = Math.round(vw * DEFAULT_RATIO)
-      const w = this.widthPx || fallback
-      return Math.max(MIN_WIDTH, Math.min(max, w))
-    },
-  },
-  watch: {
-    visible(val) {
-      if (val) {
-        this.refreshConfig()
-        this.ensureHistory()
-        this.$nextTick(() => {
-          this.scrollToBottom(true)
-          this.$refs.composerEl?.focus()
-        })
-      } else if (this.busy) {
-        // 关面板不打断生成：继续跑完并落盘，重开可见结果
-        this.flushHistory()
-      }
-    },
-    cardId(newId, oldId) {
-      // 切卡：先把「旧卡」未落盘的消息按旧卡 ID 落盘（此刻 this.cardId 已是新卡，
-      // 直接 flush 会把旧卡消息写进新卡的历史文件），再清空视图加载新卡记录
-      if (this._saveTimer) {
-        clearTimeout(this._saveTimer)
-        this._saveTimer = 0
-      }
-      const pending = this._dirtyFor === oldId ? this.serialize() : null
-      this._dirtyFor = null
-      this.draftAttachments = []
-      this.messages = []
-      if (pending && oldId) this.flushHistory(oldId, pending)
-      this.ensureHistory()
-    },
-  },
-  mounted() {
-    this.loadWidth()
-    window.addEventListener('resize', this.onWinResize)
-    this.refreshConfig()
-    this.ensureHistory()
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.onWinResize)
-    this.stopTickers()
-    this.flushHistory()
-    if (this._abort) this._abort.abort()
-  },
-  methods: {
-    // ---------- 宽度 ----------
-    onWinResize() {
-      this.winW = window.innerWidth
-    },
-    loadWidth() {
-      try {
-        const v = localStorage.getItem(WIDTH_KEY)
-        if (v != null) {
-          const px = parseInt(v, 10)
-          if (!Number.isNaN(px) && px >= MIN_WIDTH) this.widthPx = px
-        }
-      } catch {
-        /* localStorage 不可用时用默认比例 */
-      }
-    },
-    saveWidth() {
-      try {
-        if (this.widthPx) localStorage.setItem(WIDTH_KEY, String(Math.round(this.panelWidth)))
-        else localStorage.removeItem(WIDTH_KEY)
-      } catch {
-        /* 忽略 */
-      }
-    },
-    startResize(ev) {
-      const el = ev && ev.currentTarget
-      if (!el) return
-      this.resizing = true
-      document.body.style.cursor = 'col-resize'
-      document.body.style.userSelect = 'none'
-      const pointerId = ev.pointerId
-      try {
-        el.setPointerCapture(pointerId)
-      } catch {
-        /* 不支持捕获时退化为元素级监听 */
-      }
-      const move = (e) => {
-        const max = Math.max(MIN_WIDTH, Math.floor(window.innerWidth * MAX_RATIO))
-        this.widthPx = Math.max(MIN_WIDTH, Math.min(max, Math.round(window.innerWidth - e.clientX)))
-      }
-      const finish = () => {
-        el.removeEventListener('pointermove', move)
-        el.removeEventListener('pointerup', finish)
-        el.removeEventListener('pointercancel', finish)
-        window.removeEventListener('blur', finish)
-        try {
-          if (el.hasPointerCapture?.(pointerId)) el.releasePointerCapture(pointerId)
-        } catch {
-          /* 已释放 */
-        }
-        this.resizing = false
-        document.body.style.cursor = ''
-        document.body.style.userSelect = ''
-        this.saveWidth()
-      }
-      el.addEventListener('pointermove', move)
-      el.addEventListener('pointerup', finish)
-      el.addEventListener('pointercancel', finish)
-      window.addEventListener('blur', finish) // 失焦兜底，避免拖拽态卡死
-    },
-    resetWidth() {
-      this.widthPx = 0
-      this.saveWidth()
-    },
-
-    // ---------- 配置 ----------
-    async refreshConfig() {
-      try {
-        const cfg = await fetchAiConfig()
-        // 兼容旧版后端：无 hasKey 字段、直接回明文 apiKey，按「有 key」归一，避免误报「尚未配置」
-        this.config = { ...cfg, hasKey: Boolean(cfg.hasKey || cfg.apiKey) }
-      } catch {
-        this.config = { baseUrl: '', model: '', hasKey: false, apiKeyMasked: '' }
-      }
-    },
-    onConfigSaved(cfg) {
-      if (cfg) this.config = cfg
-      this.settingsOpen = false
-      this.refreshConfig()
-    },
-
-    // ---------- 历史 ----------
-    async ensureHistory() {
-      const cardId = this.cardId
-      if (!cardId || this._loadedCard === cardId) return
-      this._loadedCard = cardId
-      this.loadingHistory = true
-      try {
-        const data = await loadChatHistory(cardId)
-        // 期间可能已切卡：只有仍是同一张卡才落地
-        if (this.cardId !== cardId) return
-        const loaded = (data.messages || []).map((m) => this.revive(m))
-        // 历史是异步落地的，而面板一打开就能发消息：若这期间用户已经发过（甚至正在生成），
-        // 整体替换会把这轮对话从视图里抹掉（请求还在跑，界面却像凭空消失）。
-        // 故按 id 去重后把「已加载的历史」拼在当前会话消息之前。
-        const seen = new Set(loaded.map((m) => m.id))
-        const live = this.messages.filter((m) => !seen.has(m.id))
-        this.messages = [...loaded, ...live]
-        this.contextUsage = null // 换卡后旧卡的占用数字没有意义，等新一轮回传
-        this._dirtyFor = null // 视图与落盘一致，切卡时不必再回写
-        this.$nextTick(() => this.scrollToBottom(true))
-      } catch {
-        if (this.cardId === cardId) this.messages = []
-        this._dirtyFor = null
-      } finally {
-        if (this.cardId === cardId) this.loadingHistory = false
-      }
-    },
-    /** 落盘前剥离易失字段（流式态 / 计时器 / base64 截图） */
-    serialize() {
-      return this.messages.map((m) => {
-        const out = {
-          id: m.id,
-          role: m.role,
-          content: m.content || '',
-          ts: m.ts,
-        }
-        if (m.role === 'assistant') {
-          out.reasoning = m.reasoning || ''
-          out.reasoningMs = m.reasoningMs || 0
-          out.error = m.error || ''
-          out.status = m.status === 'streaming' ? 'aborted' : m.status || 'done'
-          // 收尾原因一并落盘（死循环熔断 / 墙钟 / 用户自设硬顶）
-          if (m.budget?.message) out.budget = { reason: m.budget.reason || '', message: m.budget.message }
-          if (m.toolCalls?.length) {
-            out.toolCalls = m.toolCalls.map((tc) => ({
-              toolCallId: tc.toolCallId,
-              toolName: tc.toolName,
-              args: tc.args || {},
-              result: tc.result,
-              error: tc.error || '',
-              ms: tc.ms || 0,
-              // 审批 / 免确认痕迹一并落盘：重开面板后仍看得见「当时跑了什么命令、是谁批的」
-              command: tc.command || '',
-              approvalNote: tc.approvalNote || '',
-              autoApproved: Boolean(tc.autoApproved),
-            }))
-          }
-        } else if (m.attachments?.length) {
-          out.attachments = m.attachments.map((a) => ({
-            path: a.path,
-            name: a.name,
-            isDir: Boolean(a.isDir),
-            isImage: Boolean(a.isImage),
-            size: a.size || 0,
-            entryCount: a.entryCount || 0,
-            exists: a.exists !== false,
-          }))
-        }
-        return out
-      })
-    },
-    /** 读回时补默认值，保证旧记录也能渲染 */
-    revive(m) {
-      return {
-        id: m.id || uid(),
-        role: m.role === 'user' ? 'user' : 'assistant',
-        content: m.content || '',
-        reasoning: m.reasoning || '',
-        reasoningMs: m.reasoningMs || 0,
-        toolCalls: Array.isArray(m.toolCalls)
-          ? m.toolCalls.map((tc) =>
-              // 被终止的轮次可能留下「参数 / 结果没等到」的悬空调用：读回时钉成终止态，
-              // 否则前端会永远转圈显示「参数生成中…」
-              (m.status === 'aborted' || m.status === 'streaming') && tc && !tc.error && tc.result == null
-                ? { ...tc, error: '已终止：该调用未拿到结果（轮次被中断）' }
-                : tc,
-            )
-          : [],
-        attachments: Array.isArray(m.attachments) ? m.attachments : [],
-        error: m.error || '',
-        status: m.status || 'done',
-        // 收尾原因（死循环 / 墙钟 / 步数硬顶）：重开面板仍要看得见这轮为什么停
-        budget: m.budget?.message ? { reason: m.budget.reason || '', message: m.budget.message } : undefined,
-        ts: m.ts || 0,
-      }
-    },
-    persist() {
-      if (!this.cardId) return
-      this._dirtyFor = this.cardId
-      if (this._saveTimer) clearTimeout(this._saveTimer)
-      this._saveTimer = setTimeout(() => this.flushHistory(), 500)
-    },
-    async flushHistory(cardId = this.cardId, snapshot = null) {
-      if (this._saveTimer) {
-        clearTimeout(this._saveTimer)
-        this._saveTimer = 0
-      }
-      if (!cardId) return
-      try {
-        await saveChatHistory(cardId, snapshot || this.serialize())
-        if (this._dirtyFor === cardId) this._dirtyFor = null
-      } catch (e) {
-        this.notify('warn', `对话记录保存失败：${e.message || e}`)
-      }
-    },
-    askClear() {
-      if (!this.messages.length) return
-      this.confirmClear = true
-    },
-    async doClear() {
-      this.confirmClear = false
-      const cardId = this.cardId
-      this.messages = []
-      this.contextUsage = null
-      this._loadedCard = cardId
-      this._dirtyFor = null
-      if (this._saveTimer) {
-        clearTimeout(this._saveTimer)
-        this._saveTimer = 0
-      }
-      try {
-        await clearChatHistory(cardId)
-        this.notify('ok', '已清空本卡片的对话记录')
-      } catch (e) {
-        this.notify('warn', `清空失败：${e.message || e}`)
-      }
-    },
-
-    // ---------- 附件 ----------
-    async onPick(kind) {
-      try {
-        const res = await pickLocalPaths(kind)
-        if (res.cancelled) return
-        for (const item of res.items || []) this.pushAttachment(item)
-        if (!res.items?.length) this.notify('warn', '未选到可用文件')
-      } catch (e) {
-        this.notify('warn', e.message || '无法调起系统选择器，可改用拖拽或粘贴路径')
-      }
-    },
-    async onAddPath(rawPath) {
-      try {
-        const info = await statLocalPath(rawPath)
-        this.pushAttachment(info)
-      } catch (e) {
-        this.notify('warn', `路径不可用：${rawPath}（${e.message || e}）`)
-      }
-    },
-    async onPasteImage(dataUrl) {
-      try {
-        const info = await stashPastedImage(dataUrl)
-        this.pushAttachment(info, '粘贴的截图已存到本机 .cache/ai-attachments/')
-      } catch (e) {
-        this.notify('warn', `截图保存失败：${e.message || e}`)
-      }
-    },
-    /**
-     * 拖入文件 / 文件夹：浏览器不给绝对路径，先按「名字 + 大小」请后端反查；
-     * 文件夹则递归收集一层清单交给 AI（仍只传路径，不上传内容）。
-     */
-    async onDropFiles(dataTransfer) {
-      const items = Array.from(dataTransfer.items || [])
-      const entries = items.map((it) => (it.webkitGetAsEntry ? it.webkitGetAsEntry() : null)).filter(Boolean)
-      const files = Array.from(dataTransfer.files || [])
-      const jobs = []
-
-      if (entries.length) {
-        for (const entry of entries) {
-          jobs.push(this.resolveEntry(entry))
-        }
-      } else {
-        for (const file of files) {
-          jobs.push(this.resolveFile(file))
-        }
-      }
-      if (!jobs.length) {
-        this.notify('warn', '没有识别到可挂载的文件')
-        return
-      }
-      const results = await Promise.all(jobs)
-      const missed = results.filter((r) => !r).length
-      if (missed) {
-        this.notify('warn', `${missed} 项未能定位本机路径，可改用「粘贴路径」添加`)
-      }
-    },
-    async resolveEntry(entry) {
-      if (entry.isDirectory) {
-        const file = await this.firstFileInDir(entry)
-        return this.resolveByName(entry.name, entry.fullPath || entry.name, file?.size ?? -1)
-      }
-      const file = await this.entryToFile(entry)
-      if (file) return this.resolveFile(file)
-      return this.resolveByName(entry.name, entry.fullPath || entry.name, -1)
-    },
-    async resolveFile(file) {
-      return this.resolveByName(file.name, file.webkitRelativePath || file.name, file.size)
-    },
-    async resolveByName(name, relPath, size) {
-      const chip = { path: '', name, isDir: false, isImage: false, pending: true }
-      this.draftAttachments = [...this.draftAttachments, chip]
-      try {
-        const info = await locateDroppedFile({ name, relPath, size })
-        this.draftAttachments = this.draftAttachments.filter((a) => a !== chip)
-        this.pushAttachment(info)
-        return info
-      } catch {
-        this.draftAttachments = this.draftAttachments.filter((a) => a !== chip)
-        return null
-      }
-    },
-    entryToFile(entry) {
-      return new Promise((resolve) => {
-        try {
-          entry.file((f) => resolve(f), () => resolve(null))
-        } catch {
-          resolve(null)
-        }
-      })
-    },
-    /** 文件夹拖入：取第一个文件的大小做匹配特征（目录本身没有 size） */
-    firstFileInDir(entry) {
-      return new Promise((resolve) => {
-        try {
-          const reader = entry.createReader()
-          reader.readEntries(async (list) => {
-            for (const ent of list || []) {
-              if (!ent.isDirectory) {
-                const f = await this.entryToFile(ent)
-                if (f) return resolve(f)
-              }
-            }
-            resolve(null)
-          }, () => resolve(null))
-        } catch {
-          resolve(null)
-        }
-      })
-    },
-    pushAttachment(info, note) {
-      if (!info?.path) return
-      if (this.draftAttachments.some((a) => a.path === info.path)) return
-      this.draftAttachments = [...this.draftAttachments, { ...info, note }]
-      if (note) this.notify('ok', note)
-    },
-    removeAttachment(pathToRemove) {
-      this.draftAttachments = this.draftAttachments.filter((a) => a.path !== pathToRemove || a.pending)
-    },
-
-    // ---------- 对话 ----------
-    useSuggestion(s) {
-      this.$refs.composerEl?.setText(s.text)
-    },
-    async onSend({ text, attachments }) {
-      if (this.busy) return
-      if (!(await this.ensureConfig())) return
-      this.notice = null
-      this.messages.push({
-        id: uid('u'),
-        role: 'user',
-        content: text,
-        attachments: attachments.map((a) => ({ ...a })),
-        ts: Date.now(),
-      })
-      this.draftAttachments = []
-      this.pinned = true
-      await this.runTurn()
-    },
-    /** 打开设置面板前刷新一次：窗口探测缓存等「服务端认知」可能已被对话或探测按钮更新 */
-    openSettings() {
-      this.settingsOpen = true
-      this.refreshConfig()
-    },
-    async ensureConfig() {
-      await this.refreshConfig()
-      if (!this.configReady) {
-        this.settingsOpen = true
-        this.notify('warn', '请先配置 Base URL / API Key / 模型名')
-        return false
-      }
-      return true
-    },
-    /** 熔断收尾后一键续跑：等价于用户手打「继续」，上下文（含工具结果）都还在 */
-    onContinue() {
-      if (this.busy) return
-      this.onSend({ text: '继续', attachments: [] })
-    },
-    /** 重新生成：丢掉最后一条助手回答，按同样的上下文再跑一轮 */
-    async regenerate(msg) {
-      if (this.busy) return
-      const idx = this.messages.findIndex((m) => m.id === msg.id)
-      if (idx > 0) this.messages = this.messages.slice(0, idx)
-      await this.runTurn()
-    },
-    async runTurn() {
-      this.messages.push({
-        id: uid('a'),
-        role: 'assistant',
-        content: '',
-        reasoning: '',
-        reasoningMs: 0,
-        toolCalls: [],
-        error: '',
-        status: 'streaming',
-        ts: Date.now(),
-      })
-      // 关键：改的必须是「reactive 数组里的代理对象」。若沿用 push 前的原始对象，
-      // 写入不会触发任何依赖 —— 流式期间界面会一直停在「正在思考」，直到回合结束
-      // 父组件因 busy 变化重渲染，才把累积的全文一次性刷出来（看着像卡死后吐一大坨）。
-      const asst = this.messages[this.messages.length - 1]
-      const asstId = asst.id
-      this.busy = true
-      this.pinned = true
-      const ctl = new AbortController()
-      this._abort = ctl
-      const thinkStartedAt = Date.now()
-      const freezeThinking = () => {
-        if (asst.reasoning && !asst.reasoningMs) asst.reasoningMs = Date.now() - thinkStartedAt
-      }
-
-      try {
-        await streamChat({
-          messages: this.toWire(this.messages.filter((m) => m.id !== asstId)),
-          cardContext: this.cardId ? { id: this.cardId } : undefined,
-          attachments: this.lastAttachments(),
-          signal: ctl.signal,
-          onEvent: (evt) => this.onEvent(evt, asst, freezeThinking),
-        })
-        if (asst.status === 'streaming') asst.status = 'done'
-      } catch (e) {
-        const aborted = ctl.signal.aborted || /abort/i.test(String(e?.message || e))
-        freezeThinking()
-        if (aborted) {
-          asst.status = 'aborted'
-        } else {
-          asst.error = String(e?.message || e)
-          asst.status = 'error'
-        }
-      } finally {
-        freezeThinking()
-        if (asst.status === 'streaming') asst.status = 'done'
-        this.busy = false
-        this._abort = null
-        this.persist()
-        this.$nextTick(() => this.scrollToBottom())
-      }
-    },
-    onEvent(evt, asst, freezeThinking) {
-      switch (evt.type) {
-        case 'reasoning-delta':
-          asst.reasoning += evt.text || ''
-          break
-        case 'text-delta':
-          freezeThinking()
-          asst.content += evt.text || ''
-          break
-        // 工具名先到、参数还在流式拼装：先占一行「调用中」，参数齐了由 tool-call 补齐
-        case 'tool-call-start':
-          freezeThinking()
-          if (!this.findToolRow(asst, evt)) {
-            asst.toolCalls.push({
-              toolCallId: evt.toolCallId || uid('tc'),
-              toolName: evt.toolName,
-              args: {},
-              pending: true,
-              result: undefined,
-              error: '',
-              startedAt: Date.now(),
-              ms: 0,
-            })
-          }
-          break
-        case 'tool-call': {
-          freezeThinking()
-          const row = this.findToolRow(asst, evt)
-          if (row) {
-            if (evt.toolCallId) row.toolCallId = evt.toolCallId
-            if (evt.toolName) row.toolName = evt.toolName
-            row.args = evt.args || {}
-            row.pending = false
-          } else {
-            asst.toolCalls.push({
-              toolCallId: evt.toolCallId || uid('tc'),
-              toolName: evt.toolName,
-              args: evt.args || {},
-              result: undefined,
-              error: '',
-              startedAt: Date.now(),
-              ms: 0,
-            })
-          }
-          break
-        }
-        case 'tool-result': {
-          const tc = asst.toolCalls.find((t) => t.toolCallId === evt.toolCallId || (!evt.toolCallId && t.toolName === evt.toolName && t.result === undefined))
-          if (tc) {
-            tc.result = evt.result ?? ''
-            tc.truncated = Boolean(evt.truncated)
-            if (evt.error) tc.error = String(evt.error)
-            if (evt.image) tc.image = evt.image
-            tc.ms = Date.now() - (tc.startedAt || Date.now())
-          }
-          break
-        }
-        case 'approval-request': {
-          // skill_exec / shell_exec：先占行再等用户点确认，后端流在此期间挂起
-          const row = this.findToolRow(asst, evt) || asst.toolCalls[asst.toolCalls.length - 1]
-          if (row && row.toolName === evt.toolName && row.result === undefined) {
-            row.approvalId = evt.approvalId
-            // 只补 command（命令原文），不覆盖真实参数：evt.args 是审批用的 {command} 精简体
-            if (evt.command) row.command = evt.command
-            row.needsApproval = true
-          } else {
-            asst.toolCalls.push({
-              toolCallId: evt.toolCallId || uid('tc'),
-              toolName: evt.toolName,
-              args: evt.args || {},
-              command: evt.command || '',
-              approvalId: evt.approvalId,
-              needsApproval: true,
-              result: undefined,
-              error: '',
-              startedAt: Date.now(),
-              ms: 0,
-            })
-          }
-          break
-        }
-        case 'approval-decided': {
-          const row = (asst.toolCalls || []).find((t) => t.approvalId === evt.approvalId)
-          if (row) {
-            row.needsApproval = false
-            row.approvalNote = evt.ok
-              ? evt.scope === 'turn'
-                ? '已允许，本回合后续同类执行不再询问…'
-                : '已允许，执行中…'
-              : '已拒绝执行'
-          }
-          break
-        }
-        case 'approval-auto': {
-          // 免确认策略命中：后端没弹审批就直接执行了，这里把命令原文与说明补到对应工具行，
-          // 用户照样看得见「跑了什么」——免确认不等于无痕迹（后端另写 .cache/ai-audit.log）
-          const row =
-            this.findToolRow(asst, evt) ||
-            [...(asst.toolCalls || [])].reverse().find((t) => t.toolName === evt.toolName && t.result === undefined)
-          if (row) {
-            if (evt.command) row.command = evt.command
-            row.autoApproved = true
-            row.approvalNote = '按设置免确认执行'
-          }
-          break
-        }
-        case 'notice':
-          this.notify('warn', evt.message || '')
-          break
-        case 'context-usage':
-          // 输入框圆环：本轮实际送进网关的上下文 token / 预算（有网关窗口认知时环按窗口算）
-          this.contextUsage = { used: Number(evt.used) || 0, total: Number(evt.total) || 0, window: Number(evt.window) || 0 }
-          break
-        case 'turn-ended':
-          // 熔断 / 硬顶收尾：横幅 6 秒就没了，这里落进消息本体，重开面板仍看得见「这轮为什么停」
-          asst.budget = { reason: String(evt.reason || ''), message: String(evt.message || '') }
-          break
-        case 'error':
-          asst.error = asst.error ? `${asst.error}\n${evt.message}` : String(evt.message || '')
-          asst.status = 'error'
-          break
-        case 'aborted':
-          asst.status = 'aborted'
-          break
-        case 'done':
-          break
-        default:
-          break
-      }
-      this.$nextTick(() => this.scrollToBottom())
-    },
-    /** 审批回落：把用户的允许（一次 / 本回合）或拒绝交给挂起中的后端流 */
-    async onApproval({ tc, ok, scope = 'once' }) {
-      if (!tc?.approvalId) return
-      tc.needsApproval = false
-      tc.approvalNote = ok ? (scope === 'turn' ? '已允许，本回合后续同类执行不再询问…' : '已允许，执行中…') : '已拒绝执行'
-      try {
-        await approveToolCall({ approvalId: tc.approvalId, ok, scope })
-      } catch (e) {
-        this.notify('warn', `审批提交失败：${e.message}`)
-      }
-    },
-    /**
-     * 工具行定位：优先按 toolCallId，其次认「同名且仍在等参数」的占位行。
-     * 占位行的 id 是本地生成的，参数齐了会被真实 id 覆盖，故两条路径都能对上。
-     */
-    findToolRow(asst, evt) {
-      const list = asst.toolCalls || []
-      if (evt.toolCallId) {
-        const byId = list.find((t) => t.toolCallId === evt.toolCallId)
-        if (byId) return byId
-      }
-      return list.find((t) => t.pending && t.toolName === evt.toolName) || null
-    },
-    stop() {
-      if (!this._abort) return
-      this._abort.abort()
-      this.notify('ok', '已终止本次生成')
-    },
-    onEscape() {
-      if (this.settingsOpen) {
-        this.settingsOpen = false
-        return
-      }
-      if (this.busy) {
-        this.stop()
-        return
-      }
-      this.$emit('close')
-    },
-    /** 最近一条用户消息挂载的附件（后端会写进 system prompt 的「本地文件」段） */
-    lastAttachments() {
-      for (let i = this.messages.length - 1; i >= 0; i--) {
-        const m = this.messages[i]
-        if (m.role === 'user') return (m.attachments || []).map((a) => ({ path: a.path, name: a.name, isDir: a.isDir, isImage: a.isImage }))
-      }
-      return []
-    },
-    /**
-     * 组装上行 messages：用户消息把附件路径写成清单（路径即上下文，不上传文件），
-     * 助手消息保留 toolCalls 供后端还原 tool_calls / tool 结果，续聊上下文才合法。
-     */
-    toWire(list) {
-      return list.map((m) => {
-        if (m.role === 'user') {
-          const atts = m.attachments || []
-          let content = m.content || ''
-          if (atts.length) {
-            const lines = atts.map((a) => `- ${a.isDir ? '文件夹' : a.isImage ? '图片' : '文件'}：${a.path}`)
-            content = `${content}${content ? '\n\n' : ''}[已挂载本地文件（仅本机路径，未上传；需要内容请用工具读取）]\n${lines.join('\n')}`
-          }
-          return { role: 'user', content }
-        }
-        // 被中止的轮次：只回传「真正执行过」的工具调用（有结果或报错），
-        // 参数还没流完就被中止的调用从未执行，回传会骗模型说它拿到了空结果。
-        const calls = (m.toolCalls || [])
-          .filter((tc) => tc.result !== undefined || tc.error)
-          .map((tc) => ({
-            toolCallId: tc.toolCallId,
-            toolName: tc.toolName,
-            args: tc.args || {},
-            result: typeof tc.result === 'string' ? tc.result.slice(0, 4000) : tc.result,
-            error: tc.error || '',
-          }))
-        // 中止标记只进上下文、不进界面：让模型知道上一轮被打断、做到哪了，
-        // 用户说「继续」时能接着干而不是从零重来（空 assistant 消息对模型等于没有信息）。
-        let content = m.content || ''
-        if (m.status === 'aborted') {
-          content = content
-            ? `${content}\n\n[本轮生成被用户手动中止，以上为已完成部分；未完成的步骤没有执行，请从中断处继续。]`
-            : '[上一轮被用户手动中止于思考/工具阶段，没有产出可用内容；请重新规划并继续完成用户的目标。]'
-        }
-        return { role: 'assistant', content, toolCalls: calls }
-      })
-    },
-
-    // ---------- 滚动 ----------
-    onScroll() {
-      const el = this.$refs.listEl
-      if (!el) return
-      this.pinned = el.scrollHeight - el.scrollTop - el.clientHeight < 48
-    },
-    scrollToBottom(force = false) {
-      const el = this.$refs.listEl
-      if (!el) return
-      if (!force && !this.pinned) return
-      el.scrollTop = el.scrollHeight
-    },
-    stopTickers() {
-      if (this._saveTimer) clearTimeout(this._saveTimer)
-      this._saveTimer = 0
-    },
-    notify(type, text) {
-      this.notice = { type, text }
-      if (this._noticeTimer) clearTimeout(this._noticeTimer)
-      this._noticeTimer = setTimeout(() => {
-        this.notice = null
-      }, 6000)
-    },
-  },
-}
-</script>