refactor: 后端拆分为 src/server 模块，前端迁移至路由分页（Chat/Skills）；设置改为抽屉、新增工具卡片组件；提交测试用 .env

src/components/MessageBubble.vue

@@ -1,41 +1,70 @@
 <template>
   <div class="bubble" :class="msg.role">
-    <!-- 审批卡片 -->
-    <div v-if="msg.approval" class="approval">
-      <div class="approval-head">⚠️ 需要审批的操作</div>
-      <div class="approval-tool">{{ toolLabel }}</div>
-      <pre class="approval-cmd">{{ msg.approval.command }}</pre>
-      <div class="approval-btns">
-        <button class="allow" @click="$emit('approve')">✅ 允许</button>
-        <button class="deny" @click="$emit('reject')">❌ 拒绝</button>
-      </div>
+    <!-- 工具操作卡片 -->
+    <div v-if="msg.tools?.length" class="tools">
+      <ToolCard
+        v-for="(t, i) in msg.tools"
+        :key="i"
+        :tool="t"
+        @approve="$emit('approve', t)"
+        @reject="$emit('reject', t)"
+      />
+    </div>
+    <div v-else-if="msg.approval" class="tools">
+      <ToolCard
+        :tool="{ tool: msg.approval.tool, args: msg.approval.args, command: msg.approval.command, status: 'approval' }"
+        @approve="$emit('approve', msg)"
+        @reject="$emit('reject', msg)"
+      />
     </div>
 
     <!-- 普通消息（Markdown） -->
-    <div v-else class="md" v-html="rendered"></div>
+    <div v-if="msg.content" class="md" v-html="rendered" @click="onClick"></div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { marked } from "marked";
-import hljs from "highlight.js";
+import hljs from "../lib/hljs";
+import ToolCard from "./ToolCard.vue";
+
+export interface ToolEvent {
+  tool: string;
+  args?: any;
+  command?: string;
+  status: "approval" | "running" | "done" | "failed" | "denied";
+  result?: string;
+}
 
 interface Msg {
   id: number;
   role: "user" | "assistant" | "system";
   content: string;
-  approval?: { tool: string; command: string; args: any };
+  loading?: boolean;
+  tools?: ToolEvent[];
+  approval?: { tool: string; command: string; args: any; tool_call_id: string };
 }
 
 const props = defineProps<{ msg: Msg }>();
-defineEmits<{ approve: []; reject: [] }>();
+defineEmits<{ approve: [payload: any]; reject: [payload: any] }>();
+
+const renderer = new marked.Renderer();
+renderer.code = (code, infostring) => {
+  const lang = (infostring || "").trim().split(/\s+/)[0];
+  const highlighted =
+    lang && hljs.getLanguage(lang)
+      ? hljs.highlight(code, { language: lang }).value
+      : hljs.highlightAuto(code).value;
+  return (
+    `<div class="code-block"><div class="code-head"><span class="code-lang">${lang}</span>` +
+    `<button class="copy-btn" data-code="${encodeURIComponent(code)}">复制</button></div>` +
+    `<pre><code class="hljs">${highlighted}</code></pre></div>`
+  );
+};
 
 marked.setOptions({
-  highlight(code: string, lang: string) {
-    if (lang && hljs.getLanguage(lang)) return hljs.highlight(code, { language: lang }).value;
-    return hljs.highlightAuto(code).value;
-  },
+  renderer,
   breaks: true,
   gfm: true,
 });
@@ -49,13 +78,18 @@ const rendered = computed(() => {
   }
 });
 
-const toolLabel = computed(() => {
-  const map: Record<string, string> = {
-    delete_file: "删除文件",
-    execute_command: "执行命令",
-  };
-  return map[props.msg.approval?.tool || ""] || props.msg.approval?.tool || "";
-});
+async function onClick(e: MouseEvent) {
+  const btn = (e.target as HTMLElement).closest(".copy-btn") as HTMLElement | null;
+  if (!btn) return;
+  const code = decodeURIComponent(btn.dataset.code || "");
+  try {
+    await navigator.clipboard.writeText(code);
+    btn.textContent = "已复制";
+    setTimeout(() => (btn.textContent = "复制"), 1500);
+  } catch {
+    /* 剪贴板不可用时忽略 */
+  }
+}
 </script>
 
 <style scoped>
@@ -63,7 +97,7 @@ const toolLabel = computed(() => {
 .bubble.user :deep(.md) {
   background: var(--user-bubble); color: var(--user-text);
   padding: 10px 14px; border-radius: 14px 14px 4px 14px;
-  border-top-right-radius: 4px; word-break: break-word;
+  word-break: break-word;
 }
 .bubble.assistant :deep(.md) {
   background: var(--assistant-bubble); color: var(--text);
@@ -72,6 +106,10 @@ const toolLabel = computed(() => {
   word-break: break-word;
 }
 
+.tools { display: flex; flex-direction: column; gap: 8px; }
+.bubble.user .tools { align-items: flex-end; }
+.bubble.user .tools :deep(.tool-card) { width: 100%; max-width: 460px; }
+
 /* Markdown 元素 */
 .bubble :deep(p) { margin: 0.5em 0; }
 .bubble :deep(p:first-child) { margin-top: 0; }
@@ -85,12 +123,22 @@ const toolLabel = computed(() => {
   background: var(--surface-2); padding: 1px 6px; border-radius: 5px;
   font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.88em;
 }
+.bubble :deep(.code-block) { margin: 0.6em 0; border-radius: 10px; overflow: hidden; background: var(--code-bg); }
+.bubble :deep(.code-head) {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 6px 12px; background: rgba(255, 255, 255, 0.06);
+}
+.bubble :deep(.code-lang) { font-size: 11px; color: rgba(255, 255, 255, 0.6); text-transform: lowercase; }
+.bubble :deep(.copy-btn) {
+  background: rgba(255, 255, 255, 0.1); border: none; color: rgba(255, 255, 255, 0.8);
+  font-size: 11px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
+}
+.bubble :deep(.copy-btn:hover) { background: rgba(255, 255, 255, 0.2); color: #fff; }
 .bubble :deep(pre) {
   background: var(--code-bg); color: var(--code-text);
-  padding: 14px 16px; border-radius: 10px; overflow-x: auto;
-  margin: 0.6em 0; position: relative;
+  padding: 14px 16px; overflow-x: auto; margin: 0;
 }
-.bubble :deep(pre code) { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.6; }
+.bubble :deep(pre code) { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.6; padding: 0; background: transparent; }
 .bubble :deep(table) {
   border-collapse: collapse; margin: 0.6em 0; font-size: 13px; width: 100%;
 }
@@ -99,27 +147,4 @@ const toolLabel = computed(() => {
 .bubble :deep(blockquote) {
   border-left: 3px solid var(--primary); margin: 0.5em 0; padding: 2px 12px; color: var(--text-dim);
 }
-
-/* 审批卡片 */
-.approval {
-  background: var(--surface); border: 1px solid #f0a020;
-  border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow);
-  max-width: 460px;
-}
-.approval-head { font-weight: 700; color: #d97706; margin-bottom: 8px; }
-.approval-tool { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
-.approval-cmd {
-  background: var(--code-bg); color: var(--code-text); padding: 10px 12px;
-  border-radius: 8px; font-family: monospace; font-size: 12.5px;
-  white-space: pre-wrap; word-break: break-all; margin: 0 0 12px;
-}
-.approval-btns { display: flex; gap: 10px; }
-.approval-btns button {
-  flex: 1; padding: 9px; border: none; border-radius: 9px; cursor: pointer;
-  font-weight: 600; font-size: 13px; transition: 0.15s;
-}
-.approval-btns .allow { background: #16a34a; color: #fff; }
-.approval-btns .allow:hover { background: #15803d; }
-.approval-btns .deny { background: #dc2626; color: #fff; }
-.approval-btns .deny:hover { background: #b91c1c; }
 </style>