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,137 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  inspectThemePackage,
+  installTheme,
+  listInstalledThemes,
+  uninstallTheme,
+} from './themePackageService'
+import type { ThemeManifest } from '@/contracts'
+
+const validYaml = `
+theme_id: ocean-blue
+name: 海洋蓝
+version: 1.2.0
+author: 测试作者
+min_app_version: 0.1.0
+css_entry: theme.css
+is_dark: false
+`
+
+function manifest(overrides: Partial<ThemeManifest> = {}): ThemeManifest {
+  return {
+    theme_id: 'test-theme',
+    name: '测试主题',
+    version: '1.0.0',
+    author: '作者',
+    min_app_version: '0.1.0',
+    is_dark: false,
+    css_entry: 'theme.css',
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  localStorage.clear()
+  document.head.querySelectorAll('style[id^="theme-style-"]').forEach((el) => el.remove())
+})
+
+describe('inspectThemePackage', () => {
+  it('解析合法的 manifest 并标记为兼容', async () => {
+    const result = await inspectThemePackage(validYaml)
+
+    expect(result.compatible).toBe(true)
+    expect(result.manifest.theme_id).toBe('ocean-blue')
+    expect(result.manifest.name).toBe('海洋蓝')
+    expect(result.manifest.version).toBe('1.2.0')
+    expect(result.error_code).toBeUndefined()
+  })
+
+  it('缺少必填字段时返回 THEME_MANIFEST_INVALID 而不是抛错', async () => {
+    const result = await inspectThemePackage('theme_id: no-name\nversion: 1.0.0\n')
+
+    expect(result.compatible).toBe(false)
+    expect(result.error_code).toBe('THEME_MANIFEST_INVALID')
+  })
+
+  it('theme_id 含非法字符时判定不兼容', async () => {
+    const result = await inspectThemePackage(validYaml.replace('ocean-blue', 'Ocean Blue!'))
+
+    expect(result.compatible).toBe(false)
+    expect(result.error_code).toBe('THEME_MANIFEST_INVALID')
+  })
+
+  it('css_entry 指向远程地址时判定为安全违规', async () => {
+    const result = await inspectThemePackage(
+      validYaml.replace('css_entry: theme.css', 'css_entry: https://evil.example.com/theme.css'),
+    )
+
+    expect(result.compatible).toBe(false)
+    expect(result.error_code).toBe('THEME_SECURITY_VIOLATION')
+  })
+})
+
+describe('installTheme 的 CSS 安全校验', () => {
+  it('拒绝含 @import 的 CSS', async () => {
+    await expect(
+      installTheme(manifest(), '@import url("https://evil.example.com/x.css");'),
+    ).rejects.toThrow(/THEME_SECURITY_VIOLATION/)
+  })
+
+  it('拒绝含 javascript: 的 CSS', async () => {
+    await expect(
+      installTheme(manifest(), '[data-theme="test-theme"] { background: url(javascript:alert(1)); }'),
+    ).rejects.toThrow(/THEME_SECURITY_VIOLATION/)
+  })
+
+  it('拒绝含 expression() 的 CSS', async () => {
+    await expect(
+      installTheme(manifest(), '[data-theme="test-theme"] { width: expression(alert(1)); }'),
+    ).rejects.toThrow(/THEME_SECURITY_VIOLATION/)
+  })
+
+  it('不安全的 CSS 不会被注入页面', async () => {
+    await installTheme(manifest(), '@import "x.css";').catch(() => {})
+
+    expect(document.getElementById('theme-style-test-theme')).toBeNull()
+  })
+})
+
+describe('主题安装生命周期', () => {
+  const safeCss = '[data-theme="test-theme"] { --color-accent-primary: #2f6feb; }'
+
+  it('安装后可列出，且默认不启用', async () => {
+    const installed = await installTheme(manifest(), safeCss)
+
+    expect(installed.builtin).toBe(false)
+    expect(installed.enabled).toBe(false)
+
+    const themes = await listInstalledThemes()
+    expect(themes.map((t) => t.theme_id)).toContain('test-theme')
+  })
+
+  it('安装会把 CSS 注入独立的 style 节点', async () => {
+    await installTheme(manifest(), safeCss)
+
+    const styleEl = document.getElementById('theme-style-test-theme')
+    expect(styleEl?.textContent).toContain('--color-accent-primary')
+  })
+
+  it('重复安装同一 theme_id 只保留一份', async () => {
+    await installTheme(manifest(), safeCss)
+    await installTheme(manifest({ version: '2.0.0' }), safeCss)
+
+    const themes = await listInstalledThemes()
+    expect(themes.filter((t) => t.theme_id === 'test-theme')).toHaveLength(1)
+    expect(themes.find((t) => t.theme_id === 'test-theme')?.version).toBe('2.0.0')
+  })
+
+  it('卸载会同时移除记录与注入的样式', async () => {
+    await installTheme(manifest(), safeCss)
+    await uninstallTheme('test-theme')
+
+    const themes = await listInstalledThemes()
+    expect(themes.map((t) => t.theme_id)).not.toContain('test-theme')
+    expect(document.getElementById('theme-style-test-theme')).toBeNull()
+  })
+})