Kronecker/NotesAgentic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 7 Wiki Activity

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

Browse Source 
实现第二阶段分工表中吉海燕负责的 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 通过。
This commit is contained in:
saint
2026-09-04 21:36:47 +08:00
parent 6bdba2c7f9
commit 639f38c1fc
20 changed files with 4487 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/stores/theme.ts
+168 -12
View File
@@ -1,6 +1,7 @@
import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
import type { ThemeConfig } from '@/contracts'
import type { ThemeConfig, ThemeManifest, InstalledTheme, ThemePackageInspection } from '@/contracts'
import * as themePkg from '@/services/themePackageService'
const builtinThemes: ThemeConfig[] = [
{ theme_id: 'light', name: '浅色', version: '1.0.0', description: '默认浅色主题', is_dark: false, builtin: true, code_theme: 'github-light' },
@@ -14,42 +15,77 @@ function isCodeBlockThemePreference(value: unknown): value is CodeBlockThemePref
return value === 'auto' || value === 'github-light' || value === 'github-dark'
}
const builtinToInstalled = (t: ThemeConfig): InstalledTheme => ({
theme_id: t.theme_id,
name: t.name,
version: t.version,
author: 'NotesAgent 团队',
description: t.description,
is_dark: t.is_dark,
builtin: true,
enabled: true,
manifest: {
theme_id: t.theme_id,
name: t.name,
version: t.version,
author: 'NotesAgent 团队',
description: t.description,
min_app_version: '0.1.0',
is_dark: t.is_dark,
css_entry: 'builtin',
},
code_theme: t.code_theme,
})
export const useThemeStore = defineStore('theme', () => {
const themes = ref<ThemeConfig[]>(builtinThemes)
const themes = ref<ThemeConfig[]>([...builtinThemes])
const installedCustomThemes = ref<InstalledTheme[]>([])
const currentThemeId = ref<string>('light')
const fontEditorSize = ref(15)
const fontEditorFamily = ref('system-ui')
const lineHeight = ref(1.7)
const codeBlockTheme = ref<CodeBlockThemePreference>('auto')
const isImporting = ref(false)
const importError = ref<string | null>(null)
const pendingInspection = ref<ThemePackageInspection | null>(null)
let appearanceHydrated = false
const allThemes = computed<InstalledTheme[]>(() => [
...builtinThemes.map(builtinToInstalled),
...installedCustomThemes.value,
])
const currentTheme = computed(() =>
themes.value.find((t) => t.theme_id === currentThemeId.value) || themes.value[0]
allThemes.value.find((t) => t.theme_id === currentThemeId.value) || allThemes.value[0]
)
const isDark = computed(() => currentTheme.value?.is_dark || false)
const resolvedCodeBlockTheme = computed<'github-light' | 'github-dark'>(() => {
if (codeBlockTheme.value !== 'auto') return codeBlockTheme.value
return currentTheme.value?.code_theme ?? (isDark.value ? 'github-dark' : 'github-light')
})
function applyTheme(themeId: string) {
const theme = themes.value.find((t) => t.theme_id === themeId)
const theme = allThemes.value.find((t) => t.theme_id === themeId)
if (!theme) return
currentThemeId.value = themeId
const root = document.documentElement
if (theme.is_dark) {
root.setAttribute('data-theme', 'dark')
} else if (themeId === 'sepia') {
root.setAttribute('data-theme', 'sepia')
if (theme.builtin) {
if (theme.is_dark) {
root.setAttribute('data-theme', 'dark')
} else if (themeId === 'sepia') {
root.setAttribute('data-theme', 'sepia')
} else {
root.setAttribute('data-theme', 'light')
}
} else {
root.setAttribute('data-theme', 'light')
root.setAttribute('data-theme', themeId)
}
localStorage.setItem('theme', themeId)
}
function initTheme() {
// 先恢复外观再开放 watch 持久化，避免 immediate watcher 覆盖本地设置。
const savedAppearance = localStorage.getItem('editor-appearance')
if (savedAppearance) {
try {
@@ -60,10 +96,11 @@ export const useThemeStore = defineStore('theme', () => {
if (isCodeBlockThemePreference(value.codeBlockTheme)) codeBlockTheme.value = value.codeBlockTheme
} catch { localStorage.removeItem('editor-appearance') }
}
void loadCustomThemes()
const saved = localStorage.getItem('theme')
appearanceHydrated = true
persistAppearance()
if (saved && themes.value.find((t) => t.theme_id === saved)) {
if (saved) {
applyTheme(saved)
return
}
@@ -71,6 +108,23 @@ export const useThemeStore = defineStore('theme', () => {
applyTheme(prefersDark ? 'dark' : 'light')
}
async function loadCustomThemes() {
try {
const list = await themePkg.listInstalledThemes()
installedCustomThemes.value = list
themes.value = [...builtinThemes, ...list.map((t) => ({
theme_id: t.theme_id,
name: t.name,
version: t.version,
description: t.description ?? '',
is_dark: t.is_dark,
builtin: false,
author: t.author,
code_theme: t.code_theme,
}))]
} catch { /* keep builtin only */ }
}
function toggleTheme() {
applyTheme(isDark.value ? 'light' : 'dark')
}
@@ -90,8 +144,99 @@ export const useThemeStore = defineStore('theme', () => {
codeBlockTheme: codeBlockTheme.value,
}))
async function inspectThemePackage(packageData: string): Promise<ThemePackageInspection> {
isImporting.value = true
importError.value = null
try {
const result = await themePkg.inspectThemePackage(packageData)
pendingInspection.value = result
if (!result.compatible) {
importError.value = result.warnings[0] ?? '主题包不兼容'
}
return result
} catch (error) {
importError.value = error instanceof Error ? error.message : '导入失败'
throw error
} finally {
isImporting.value = false
}
}
async function installThemeFromInspection(manifest: ThemeManifest, cssContent: string) {
isImporting.value = true
importError.value = null
try {
const installed = await themePkg.installTheme(manifest, cssContent)
const idx = installedCustomThemes.value.findIndex((t) => t.theme_id === installed.theme_id)
if (idx >= 0) installedCustomThemes.value[idx] = installed
else installedCustomThemes.value.push(installed)
const themeConfig: ThemeConfig = {
theme_id: installed.theme_id,
name: installed.name,
version: installed.version,
description: installed.description ?? '',
is_dark: installed.is_dark,
builtin: false,
author: installed.author,
code_theme: installed.code_theme,
}
const existingIdx = themes.value.findIndex((t) => t.theme_id === installed.theme_id)
if (existingIdx >= 0) themes.value[existingIdx] = themeConfig
else themes.value.push(themeConfig)
pendingInspection.value = null
return installed
} catch (error) {
importError.value = error instanceof Error ? error.message : '安装失败'
throw error
} finally {
isImporting.value = false
}
}
async function uninstallTheme(themeId: string) {
await themePkg.uninstallTheme(themeId)
installedCustomThemes.value = installedCustomThemes.value.filter((t) => t.theme_id !== themeId)
themes.value = themes.value.filter((t) => t.theme_id !== themeId || t.builtin)
if (currentThemeId.value === themeId) {
applyTheme('light')
}
}
async function installCommunityTheme(themeId: string) {
isImporting.value = true
importError.value = null
try {
const installed = await themePkg.installCommunityTheme(themeId)
const idx = installedCustomThemes.value.findIndex((t) => t.theme_id === installed.theme_id)
if (idx >= 0) installedCustomThemes.value[idx] = installed
else installedCustomThemes.value.push(installed)
const themeConfig: ThemeConfig = {
theme_id: installed.theme_id,
name: installed.name,
version: installed.version,
description: installed.description ?? '',
is_dark: installed.is_dark,
builtin: false,
author: installed.author,
code_theme: installed.code_theme,
}
const existingIdx = themes.value.findIndex((t) => t.theme_id === installed.theme_id)
if (existingIdx >= 0) themes.value[existingIdx] = themeConfig
else themes.value.push(themeConfig)
return installed
} catch (error) {
importError.value = error instanceof Error ? error.message : '安装失败'
throw error
} finally {
isImporting.value = false
}
}
function isThemeInstalled(themeId: string): boolean {
return themes.value.some((t) => t.theme_id === themeId)
}
watch(resolvedCodeBlockTheme, (theme) => {
// CSS 与 Shiki 共用该属性，确保代码块背景和 token 配色始终成套切换。
document.documentElement.setAttribute('data-code-theme', theme)
}, { immediate: true })
@@ -116,6 +261,7 @@ export const useThemeStore = defineStore('theme', () => {
return {
themes,
installedCustomThemes,
currentThemeId,
currentTheme,
isDark,
@@ -124,9 +270,19 @@ export const useThemeStore = defineStore('theme', () => {
lineHeight,
codeBlockTheme,
resolvedCodeBlockTheme,
isImporting,
importError,
pendingInspection,
allThemes,
applyTheme,
initTheme,
toggleTheme,
resetToDefault,
loadCustomThemes,
inspectThemePackage,
installThemeFromInspection,
uninstallTheme,
installCommunityTheme,
isThemeInstalled,
}
})