feat: 小鑫 AI 助手 - 前端构建打包、DuckDB 处理 Excel、设置与审批级别

2026-08-15 23:07:29 +08:00
commit 3b9991f9f7
23 changed files with 2614 additions and 0 deletions
@@ -0,0 +1,125 @@
+<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>
+
+    <!-- 普通消息（Markdown） -->
+    <div v-else class="md" v-html="rendered"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { marked } from "marked";
+import hljs from "highlight.js";
+
+interface Msg {
+  id: number;
+  role: "user" | "assistant" | "system";
+  content: string;
+  approval?: { tool: string; command: string; args: any };
+}
+
+const props = defineProps<{ msg: Msg }>();
+defineEmits<{ approve: []; reject: [] }>();
+
+marked.setOptions({
+  highlight(code: string, lang: string) {
+    if (lang && hljs.getLanguage(lang)) return hljs.highlight(code, { language: lang }).value;
+    return hljs.highlightAuto(code).value;
+  },
+  breaks: true,
+  gfm: true,
+});
+
+const rendered = computed(() => {
+  if (!props.msg.content) return "";
+  try {
+    return marked.parse(props.msg.content) as string;
+  } catch {
+    return props.msg.content;
+  }
+});
+
+const toolLabel = computed(() => {
+  const map: Record<string, string> = {
+    delete_file: "删除文件",
+    execute_command: "执行命令",
+  };
+  return map[props.msg.approval?.tool || ""] || props.msg.approval?.tool || "";
+});
+</script>
+
+<style scoped>
+.bubble { font-size: 14.5px; line-height: 1.7; }
+.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;
+}
+.bubble.assistant :deep(.md) {
+  background: var(--assistant-bubble); color: var(--text);
+  padding: 12px 16px; border-radius: 14px 14px 14px 4px;
+  border: 1px solid var(--border); box-shadow: var(--shadow);
+  word-break: break-word;
+}
+
+/* Markdown 元素 */
+.bubble :deep(p) { margin: 0.5em 0; }
+.bubble :deep(p:first-child) { margin-top: 0; }
+.bubble :deep(p:last-child) { margin-bottom: 0; }
+.bubble :deep(h1), .bubble :deep(h2), .bubble :deep(h3) { margin: 0.6em 0 0.4em; line-height: 1.3; }
+.bubble :deep(ul), .bubble :deep(ol) { margin: 0.4em 0; padding-left: 1.4em; }
+.bubble :deep(li) { margin: 0.2em 0; }
+.bubble :deep(a) { color: var(--primary); text-decoration: none; }
+.bubble :deep(a:hover) { text-decoration: underline; }
+.bubble :deep(code):not(pre code) {
+  background: var(--surface-2); padding: 1px 6px; border-radius: 5px;
+  font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.88em;
+}
+.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;
+}
+.bubble :deep(pre code) { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.6; }
+.bubble :deep(table) {
+  border-collapse: collapse; margin: 0.6em 0; font-size: 13px; width: 100%;
+}
+.bubble :deep(th), .bubble :deep(td) { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
+.bubble :deep(th) { background: var(--surface-2); font-weight: 600; }
+.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>