优化: token分项显示(in/cache/out/reasoning)+ 详情面板 + base前置

token分项(各计费不同,不显 total):df-ai 解析 provider cache/reasoning(openai_compat prompt_cache_hit/miss/reasoning_tokens + anthropic cache_read/creation)+ TokenUsage 加字段(全构造点)+ AiMessage/AiCompleted/DB V39(ai_messages 加 cache_hit/miss/reasoning 列)+ message_repo 映射(持久化)+ 前端 MessageList 显 in·cache·out·reason(in=cache_miss 全价,reasoning 有才显)+ 点击 token 弹详情面板(完整 usage+缓存命中率+model)+ df-miniapp 同步

base前置(提升 prompt cache 命中率):chat.rs aug 拼 base 后(4处)+ knowledge_inject 知识拼 base 后(固定 base 前缀,cache 命中)

附修:replace_conversation 原 13 列 INSERT 丢消息级 token → 改 18 列

src/components/ai/MessageList.vue

@@ -100,6 +100,50 @@ function formatTokens(n: number): string {
   return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
 }
 
+// ── token 分项显示(2026-08-02):in/cache/out/reason 分计费 + 详情面板 ──
+//
+// 各 provider 计费不同(deepseek:cache 命中低价/未命中全价/输出价高/reasoning 隐藏输出),
+// 故不显 total(三者相加无意义)。in=cache_miss(全价真实),cache=cache_hit(命中),out=completion,
+// reasoning > 0 才显(reason 后缀)。
+//
+// 详情面板(tokenPopoverMsgId 控制显隐):点击 token 区弹出,含完整 usage + 流程(模型/缓存命中率)。
+// 流程数据从 message 取(model 在 msg.model;cache 命中率 = hit/(hit+miss))。
+const tokenPopoverMsgId = ref<string | null>(null)
+
+/** 取消息的 in token(全价输入)= prompt_tokens(总) - cache_hit(命中低价)。
+ *  统一 GLM(无 cache,prompt_tokens 即全价)与 deepseek(prompt=hit+miss,全价=miss=prompt-hit)。
+ *  原 cache_miss ?? prompt 因 agent 设 cache_miss=0(GLM 不报)致 ?? 不触发返 0,改减法。 */
+function tokenInOf(m: AiMessage): number {
+  const prompt = m.tokenUsage?.prompt ?? m.prompt_tokens ?? 0
+  const hit = m.tokenUsage?.cache_hit ?? m.prompt_cache_hit_tokens ?? 0
+  return Math.max(0, prompt - hit)
+}
+/** 取消息的 cache hit token */
+function tokenCacheOf(m: AiMessage): number {
+  return m.tokenUsage?.cache_hit ?? m.prompt_cache_hit_tokens ?? 0
+}
+/** 取消息的 out token */
+function tokenOutOf(m: AiMessage): number {
+  return m.tokenUsage?.completion ?? m.completion_tokens ?? 0
+}
+/** 取消息的 reasoning token */
+function tokenReasonOf(m: AiMessage): number {
+  return m.tokenUsage?.reasoning ?? m.reasoning_tokens ?? 0
+}
+/** 计算 cache 命中率(0-100),hit+miss=0 时返回 null(无 cache 数据) */
+function cacheHitRate(m: AiMessage): number | null {
+  const hit = tokenCacheOf(m)
+  const miss = tokenInOf(m)
+  const sum = hit + miss
+  return sum > 0 ? Math.round((hit / sum) * 100) : null
+}
+/** 切换 token 详情面板显隐(同消息再点关,不同消息切) */
+function toggleTokenPopover(m: AiMessage, e: Event): void {
+  e.stopPropagation()
+  const id = m.id
+  tokenPopoverMsgId.value = tokenPopoverMsgId.value === id ? null : id
+}
+
 // ── 滚动跟随 / 回到底部(B-260618-24 跟随意图锁存,已抽取至 useMessageScroll) ──
 const {
   showBackToBottom,
@@ -616,8 +660,15 @@ watch(() => store.state.activeConversationId, () => {
 // streaming 翻 false 的 watch 已清 rafId,此为中途卸载兜底。
 onBeforeUnmount(() => {
   cancelPendingRaf()
+  document.removeEventListener('click', closeTokenPopoverOnOutsideClick)
 })
 
+// token 详情面板:点击外部关闭(token 区内的 @click.stop 已阻冒泡,故文档级点击必为外部)
+function closeTokenPopoverOnOutsideClick(): void {
+  tokenPopoverMsgId.value = null
+}
+document.addEventListener('click', closeTokenPopoverOnOutsideClick)
+
 // Markdown 预热(父原 loadMarkdown 在 onMounted 调,子组件同样幂等——useMarkdown 单例,
 // 多次调用安全,确保子组件挂载即预热)。
 loadMarkdown()
@@ -761,7 +812,9 @@ defineExpose({
           </div>
 
 
-          <!-- token 用量(显示在每条 assistant 消息底部,有数据时)。
+          <!-- token 分项显示(2026-08-02):in/cache/out/reason 分计费,不显 total(相加无意义)。
+               in=cache_miss(全价真实,非 prompt 总),cache=cache_hit(命中低价),out=completion,
+               reasoning > 0 才显。点击 token 区弹详情面板(完整 usage + 流程:模型/缓存命中率)。
                tokenUsage(内存,AiCompleted 实时)优先;fallback prompt_tokens/completion_tokens
                (DB 持久化字段,reload 自动有)—— 不依赖某个 reload 映射点,压缩/切会话都生效。 -->
           <div
@@ -769,7 +822,53 @@ defineExpose({
             class="ai-token-usage"
           >
             <span class="ai-token-usage-icon">🔣</span>
-            <span>{{ formatTokens(item.msg.tokenUsage?.prompt ?? item.msg.prompt_tokens ?? 0) }} in · {{ formatTokens(item.msg.tokenUsage?.completion ?? item.msg.completion_tokens ?? 0) }} out</span>
+            <button
+              class="ai-token-usage-trigger"
+              :aria-expanded="tokenPopoverMsgId === item.msg.id"
+              @click="toggleTokenPopover(item.msg, $event)"
+            >
+              <span>{{ formatTokens(tokenInOf(item.msg)) }} in</span>
+              <span class="ai-token-sep">·</span>
+              <span>{{ formatTokens(tokenCacheOf(item.msg)) }} cache</span>
+              <span class="ai-token-sep">·</span>
+              <span>{{ formatTokens(tokenOutOf(item.msg)) }} out</span>
+              <template v-if="tokenReasonOf(item.msg) > 0">
+                <span class="ai-token-sep">·</span>
+                <span>{{ formatTokens(tokenReasonOf(item.msg)) }} reason</span>
+              </template>
+            </button>
+            <!-- 详情面板(absolute/right 0/popout 样式,复用 TopBar 风格):完整 usage + 流程 -->
+            <div
+              v-if="tokenPopoverMsgId === item.msg.id"
+              class="ai-token-popover"
+              @click.stop
+            >
+              <div class="ai-token-popover-title">Token 用量详情</div>
+              <div class="ai-token-popover-row">
+                <span class="ai-token-popover-label">输入(未命中,全价)</span>
+                <span class="ai-token-popover-val">{{ formatTokens(tokenInOf(item.msg)) }} ({{ tokenInOf(item.msg) }})</span>
+              </div>
+              <div class="ai-token-popover-row">
+                <span class="ai-token-popover-label">缓存命中(低价)</span>
+                <span class="ai-token-popover-val">{{ formatTokens(tokenCacheOf(item.msg)) }} ({{ tokenCacheOf(item.msg) }})</span>
+              </div>
+              <div class="ai-token-popover-row">
+                <span class="ai-token-popover-label">输出</span>
+                <span class="ai-token-popover-val">{{ formatTokens(tokenOutOf(item.msg)) }} ({{ tokenOutOf(item.msg) }})</span>
+              </div>
+              <div v-if="tokenReasonOf(item.msg) > 0" class="ai-token-popover-row">
+                <span class="ai-token-popover-label">思考(reasoning)</span>
+                <span class="ai-token-popover-val">{{ formatTokens(tokenReasonOf(item.msg)) }} ({{ tokenReasonOf(item.msg) }})</span>
+              </div>
+              <div v-if="cacheHitRate(item.msg) != null" class="ai-token-popover-row">
+                <span class="ai-token-popover-label">缓存命中率</span>
+                <span class="ai-token-popover-val">{{ cacheHitRate(item.msg) }}%</span>
+              </div>
+              <div v-if="item.msg.model" class="ai-token-popover-row">
+                <span class="ai-token-popover-label">模型</span>
+                <span class="ai-token-popover-val">{{ item.msg.model }}</span>
+              </div>
+            </div>
           </div>
 
           <!-- 工具调用卡片(渲染/折叠/审批全下沉到 ToolCardList+ToolCard 子组件,MessageList 仅转发审批) -->
@@ -1128,6 +1227,7 @@ defineExpose({
 
 /* ── token 用量条(克制:右对齐 / 最小字号 / dim / 分隔线,不抢正文焦点) ── */
 .ai-token-usage {
+  position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -1141,6 +1241,64 @@ defineExpose({
   opacity: 0.7;
 }
 .ai-token-usage-icon { font-size: 9px; }
+/* token 分项显示(2026-08-02):trigger 是可点击按钮(无背景,继承 dim 样式) */
+.ai-token-usage-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  opacity: 1;
+}
+.ai-token-usage-trigger:hover {
+  color: var(--df-text);
+  opacity: 1;
+}
+.ai-token-sep {
+  opacity: 0.5;
+}
+/* 详情面板:复用 TopBar popout 风格(absolute / right 0 / bg-card / border / shadow) */
+.ai-token-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  padding: 8px 10px;
+  min-width: 200px;
+  background: var(--df-bg-card, var(--df-bg));
+  border: 0.5px solid var(--df-border);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-family: var(--df-font-mono);
+  font-size: 10px;
+  color: var(--df-text);
+  z-index: 10;
+  text-align: left;
+}
+.ai-token-popover-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+  padding-bottom: 4px;
+  border-bottom: 0.5px solid var(--df-border);
+}
+.ai-token-popover-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 2px 0;
+}
+.ai-token-popover-label {
+  color: var(--df-text-dim);
+}
+.ai-token-popover-val {
+  color: var(--df-text);
+  font-weight: 500;
+}
 
 /* 用户气泡内的图片(多模态消息渲染) */
 .ai-msg-images {