feat(frontend): 第二阶段前端 Agent Trace / 主题包 / Mermaid 能力

实现第二阶段分工表中吉海燕负责的 P0/P1 前端能力。 - Agent Trace 可视化：新增 traceService 将扁平事件流折叠为树（ModelCallStarted 区间内的工具/文本事件挂为子节点，运行级事件保持顶层）， TraceTimeline 支持时间线/树两种视图、耗时统计与引用跳转。 - 主题包：新增 themePackageService（Web Mock Adapter），校验 manifest 必填字段与 theme_id 格式，拒绝远程 css_entry； CSS 侧拒绝 @import / expression() / javascript:，未通过校验的 CSS 不会注入页面。内置主题走 data-theme=light|dark|sepia，自定义主题走 data-theme={theme_id} + 独立 style 节点。 ThemesView 增加“已安装/社区主题”两个标签页与导入、预览、卸载流程。 - Mermaid：新增 mermaidService（securityLevel: strict）与 MermaidBlock， markdown 渲染管线识别 mermaid 代码块；MarkdownContent 随亮/暗主题重渲染（SVG 配色在渲染时烘焙，无法靠 CSS 变量事后调整）。 - 插件贡献 UI：PluginsView 增加“概览/命令/设置”标签页， PluginSettingsPanel 按 Schema 动态生成表单； secret 字段只写不读，仅展示 configured 状态，不进 store 也不回显。与 main 上队友成果的整合（rebase 时处理）： - 命令面板保留队友基于真实后端的实现（when 条件求值、效果白名单、参数命令跳详情页），仅叠加我新增的主题/任务两条内置命令。 - 删除我先前的 pluginContributionService（mock 版），统一改用队友已落地的 pluginService 真实接口；相应修正表单以匹配真实契约（options 为 string[]、min/max 可空、无 placeholder）。 - 移除 contracts 中与队友重复的 PluginHostStatus / PluginCommand / PluginSettingField / PluginSettingsSchema 声明，以队友版本为准。 - PluginsView 概览页保留队友的 PluginMcpPanel，并补回被我改写时丢掉的空状态。顺带修复： - 开启 skipLibCheck —— mermaid 11.17 把 type-fest 泄漏进了发布产物的 .d.ts，但只声明为自身 devDependency，vue-tsc -b 会因此报错。验证：pnpm test 26 文件 / 113 测试通过（新增 traceService、 themePackageService 两个测试文件共 22 项）；pnpm build 通过。
2026-09-04 21:36:47 +08:00
parent 6bdba2c7f9
commit 639f38c1fc
20 changed files with 4487 additions and 669 deletions
@@ -0,0 +1,126 @@
+import mermaid from 'mermaid'
+import { ref, watch } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+
+let initialized = false
+let initTheme: 'light' | 'dark' = 'light'
+
+function ensureInitialized(theme: 'light' | 'dark') {
+  if (!initialized) {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: theme === 'dark' ? 'dark' : 'default',
+      securityLevel: 'strict',
+      fontFamily: 'var(--font-ui-sans)',
+      flowchart: { useMaxWidth: true, htmlLabels: true },
+      sequence: { useMaxWidth: true },
+      gantt: { useMaxWidth: true },
+    })
+    initialized = true
+    initTheme = theme
+    return
+  }
+  if (initTheme !== theme) {
+    mermaid.initialize({
+      theme: theme === 'dark' ? 'dark' : 'default',
+    })
+    initTheme = theme
+  }
+}
+
+export interface MermaidRenderResult {
+  svg: string
+  width: number
+  height: number
+  warnings: string[]
+}
+
+export interface MermaidParseError {
+  message: string
+  line?: number
+  column?: number
+}
+
+let renderCounter = 0
+
+export async function renderMermaid(
+  source: string,
+  options: { theme?: 'light' | 'dark'; mode?: 'interactive' | 'static' } = {}
+): Promise<MermaidRenderResult> {
+  const theme = options.theme ?? 'light'
+  ensureInitialized(theme)
+  const id = `mermaid-${Date.now()}-${++renderCounter}`
+  try {
+    const result = await mermaid.render(id, source)
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(result.svg, 'image/svg+xml')
+    const svg = doc.querySelector('svg')
+    let width = 800
+    let height = 600
+    if (svg) {
+      const viewBox = svg.getAttribute('viewBox')
+      if (viewBox) {
+        const parts = viewBox.split(/\s+/).map(Number)
+        if (parts.length === 4) {
+          width = parts[2]
+          height = parts[3]
+        }
+      }
+      const w = svg.getAttribute('width')
+      const h = svg.getAttribute('height')
+      if (w && !isNaN(parseFloat(w))) width = parseFloat(w)
+      if (h && !isNaN(parseFloat(h))) height = parseFloat(h)
+    }
+    return {
+      svg: result.svg,
+      width,
+      height,
+      warnings: [],
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Mermaid 渲染失败'
+    return {
+      svg: renderErrorSvg(message),
+      width: 400,
+      height: 120,
+      warnings: [message],
+    }
+  }
+}
+
+function renderErrorSvg(message: string): string {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120" viewBox="0 0 400 120">
+  <rect width="400" height="120" fill="var(--color-error-soft, #ffebe9)" rx="6" />
+  <text x="20" y="30" font-family="var(--font-ui-mono, monospace)" font-size="13" fill="var(--color-error, #cf222e)" font-weight="600">Mermaid 渲染错误</text>
+  <text x="20" y="55" font-family="var(--font-ui-mono, monospace)" font-size="12" fill="var(--color-text-secondary, #656d76)">${escapeXml(message).slice(0, 100)}</text>
+  <text x="20" y="90" font-family="var(--font-ui-sans, sans-serif)" font-size="11" fill="var(--color-text-tertiary, #9198a0)">请检查语法是否正确，支持 flowchart、sequenceDiagram、classDiagram 等。</text>
+</svg>`
+}
+
+function escapeXml(str: string): string {
+  return str.replace(/[<>&'"]/g, (c) => {
+    const map: Record<string, string> = { '<': '&lt;', '>': '&gt;', '&': '&amp;', "'": '&apos;', '"': '&quot;' }
+    return map[c] ?? c
+  })
+}
+
+export function useMermaidTheme() {
+  const themeStore = useThemeStore()
+  const mermaidTheme = ref<'light' | 'dark'>(themeStore.isDark ? 'dark' : 'light')
+  watch(() => themeStore.isDark, (isDark) => {
+    mermaidTheme.value = isDark ? 'dark' : 'light'
+    ensureInitialized(mermaidTheme.value)
+  })
+  return { mermaidTheme }
+}
+
+export async function validateMermaid(source: string): Promise<{ valid: boolean; error?: MermaidParseError }> {
+  try {
+    ensureInitialized('light')
+    await mermaid.parse(source)
+    return { valid: true }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : '未知错误'
+    return { valid: false, error: { message } }
+  }
+}