fix(frontend): 修复 PR #18 审阅问题并补充回归测试
审阅意见逐项修复： 1. 主题包安装丢弃用户 CSS inspectThemePackage 之前只解析 YAML 清单，ThemesView 安装时另外 生成一套硬编码调色板，用户提供的 CSS 被整份丢掉。现在定义单文件 格式（YAML 清单 + `---` + CSS），parseThemePackage 取出真实 CSS 并原样安装；CSS 安全校验提前到预览阶段；按内容识别并拒绝 ZIP。 2. 主题恢复竞态导致页面无 data-theme initTheme 之前没有 await loadCustomThemes，自定义主题还没进 allThemes，applyTheme 找不到主题直接 return。现在先同步落一个 内置主题兜底（不写 localStorage，避免冲掉用户存的自定义主题 id）， 加载完成后再切到真正保存的那个；主题失效或列表加载失败时回退并 通过 themeLoadWarning 告知用户，不再静默。 3. Trace 建树依赖事件相邻顺序 后端真实顺序是 ModelCallStarted → ModelCallCompleted → Usage → ToolCall/ToolResult，工具在模型调用完成后才执行且并发跑，相邻性 不可用。改为按 model_call_id / parent_model_call_id / tool_call_id 关联；ToolResult 回填 ToolCall 的状态与耗时，结束后不再显示 running；SSE 断点恢复的孤立事件退回顶层而不是丢弃。 4. Trace 叶子节点无法查看数据 行的 click 是 `children.length && toggleExpand`，而详情 v-if 又 要求 `children.length === 0`，两个条件互斥。拆成 expandedNodes 与 detailNodes 两个状态集合；展开箭头改为独立按钮，行支持键盘 与 aria-expanded；引用节点补「定位」按钮。同时修正 Usage 卡片 字段（后端只发累计 token_usage）。 5. 引用定位逻辑三处重复且各自有缺陷 抽出 navigateToCitation（依赖注入，可独立测试）+ useCitationNavigation。 调用顺序固化：必须先 await loadFile 再 highlightBlock，否则 editor store 的 loadFile 末尾会把高亮清掉；loadFile 失败时不跳转。 AgentView / ChatView / AppShell 统一走这一处。 6. 插件命令 UI 重复实现 抽出 PluginCommandPanel 复用 PluginMcpPanel 的 schema 驱动表单， 删除 PluginsView 里的劣化副本。effect 现在真的执行 navigate / refresh（此前只拼成文本显示）；补上必填校验与布尔字段初始值， 修正「显示否但不提交该键」的不一致。 补充回归测试 64 项（相关 spec 由 25 项增至 89 项），并对 2、3、4 三项 缺陷做了变异验证：把修复回退成原写法后对应测试确实失败。 涉及 traceService / theme store / themePackageService / pluginCommandForm / useCitationNavigation / TraceTimeline，其中后三个为新增文件。 vue-tsc -b、vitest（32 文件 182 项）、vite build 全部通过。
This commit is contained in:
@@ -0,0 +1,170 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { AgentEvent, AgentEventType } from '@/contracts'
|
||||
import TraceTimeline from './TraceTimeline.vue'
|
||||
|
||||
let sequence = 0
|
||||
|
||||
function event(type: AgentEventType, data: Record<string, unknown> = {}): AgentEvent {
|
||||
return {
|
||||
event: type,
|
||||
sequence: ++sequence,
|
||||
run_id: 'run-1',
|
||||
data,
|
||||
timestamp: '2026-01-01T00:00:00.000Z',
|
||||
}
|
||||
}
|
||||
|
||||
/** 一次带工具调用的运行：模型调用有子节点，Usage / 引用是叶子。 */
|
||||
function sampleEvents(): AgentEvent[] {
|
||||
return [
|
||||
event('RunStarted'),
|
||||
event('ModelCallStarted', { model_call_id: 'mc-1', model: 'mock-1' }),
|
||||
event('ModelCallCompleted', { model_call_id: 'mc-1', duration_ms: 800 }),
|
||||
event('ToolCall', { tool_call_id: 'tc-1', name: 'read_note', parent_model_call_id: 'mc-1' }),
|
||||
event('ToolResult', { tool_call_id: 'tc-1', name: 'read_note', success: true, parent_model_call_id: 'mc-1' }),
|
||||
event('Citation', { file_path: 'notes/a.md', block_id: 'blk-1', heading_path: 'A > B' }),
|
||||
event('RunCompleted'),
|
||||
]
|
||||
}
|
||||
|
||||
function mountTree(events: AgentEvent[]) {
|
||||
const wrapper = mount(TraceTimeline, { props: { events } })
|
||||
return wrapper
|
||||
}
|
||||
|
||||
async function switchToTree(wrapper: ReturnType<typeof mountTree>) {
|
||||
const treeButton = wrapper.findAll('button').find((b) => b.text() === '树形')
|
||||
await treeButton!.trigger('click')
|
||||
return wrapper
|
||||
}
|
||||
|
||||
describe('TraceTimeline 树形视图', () => {
|
||||
it('叶子节点点击后能看到自己的数据', async () => {
|
||||
// 回归：之前行的 click 是 `children.length && toggleExpand(id)`，
|
||||
// 而详情 v-if 又要求 children.length === 0 —— 两个条件互斥，
|
||||
// 叶子节点永远打不开详情。
|
||||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||||
|
||||
const rows = wrapper.findAll('.node-row')
|
||||
const citationRow = rows.find((row) => row.text().includes('引用来源'))
|
||||
expect(citationRow).toBeTruthy()
|
||||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||||
|
||||
await citationRow!.trigger('click')
|
||||
|
||||
const detail = wrapper.find('.node-detail')
|
||||
expect(detail.exists()).toBe(true)
|
||||
expect(detail.text()).toContain('notes/a.md')
|
||||
})
|
||||
|
||||
it('有子节点的节点也能查看自己的数据，不只是展开子树', async () => {
|
||||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||||
|
||||
const modelRow = wrapper.findAll('.node-row').find((row) => row.text().includes('模型调用'))
|
||||
await modelRow!.trigger('click')
|
||||
|
||||
const detail = wrapper.find('.node-detail')
|
||||
expect(detail.exists()).toBe(true)
|
||||
expect(detail.text()).toContain('mc-1')
|
||||
})
|
||||
|
||||
it('展开箭头只切子树，不会连带打开详情', async () => {
|
||||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||||
|
||||
// 初始只有顶层节点：运行开始、模型调用、引用、运行完成
|
||||
expect(wrapper.findAll('.node-row')).toHaveLength(4)
|
||||
|
||||
const arrow = wrapper.find('.expand-icon:not(.placeholder)')
|
||||
expect(arrow.exists()).toBe(true)
|
||||
await arrow.trigger('click')
|
||||
|
||||
// 子节点出现，但没有任何详情面板被打开
|
||||
expect(wrapper.findAll('.node-row')).toHaveLength(5)
|
||||
expect(wrapper.text()).toContain('工具调用：read_note')
|
||||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('键盘 Enter 与空格可以打开详情', async () => {
|
||||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||||
const row = wrapper.findAll('.node-row').find((r) => r.text().includes('运行开始'))!
|
||||
|
||||
await row.trigger('keydown.enter')
|
||||
expect(wrapper.find('.node-detail').exists()).toBe(true)
|
||||
|
||||
await row.trigger('keydown.space')
|
||||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('行的 aria-expanded 跟随详情开合', async () => {
|
||||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||||
const row = wrapper.findAll('.node-row').find((r) => r.text().includes('运行开始'))!
|
||||
|
||||
expect(row.attributes('aria-expanded')).toBe('false')
|
||||
await row.trigger('click')
|
||||
expect(row.attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('引用节点带「定位」按钮，点击后抛出 open-citation 且不打开详情', async () => {
|
||||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||||
|
||||
const locate = wrapper.find('.node-locate')
|
||||
expect(locate.exists()).toBe(true)
|
||||
await locate.trigger('click')
|
||||
|
||||
const emitted = wrapper.emitted('open-citation')
|
||||
expect(emitted).toHaveLength(1)
|
||||
expect((emitted![0][0] as Record<string, unknown>).file_path).toBe('notes/a.md')
|
||||
// @click.stop 生效，行的详情不该被顺带打开
|
||||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('引用缺少 file_path 时不显示定位按钮', async () => {
|
||||
const wrapper = await switchToTree(mountTree([event('Citation', { heading_path: 'A' })]))
|
||||
|
||||
expect(wrapper.find('.node-locate').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('TraceTimeline 时间线视图', () => {
|
||||
it('Usage 卡片读后端真实字段 token_usage', () => {
|
||||
// 后端只发累计的 token_usage（runtime.py），没有 input/output/total_tokens。
|
||||
const wrapper = mountTree([event('Usage', { token_usage: 1024 })])
|
||||
|
||||
expect(wrapper.find('.event-usage').text()).toContain('1024')
|
||||
})
|
||||
|
||||
it('Usage 缺字段时显示占位符而不是 undefined', () => {
|
||||
const wrapper = mountTree([event('Usage', {})])
|
||||
|
||||
const text = wrapper.find('.event-usage').text()
|
||||
expect(text).toContain('-')
|
||||
expect(text).not.toContain('undefined')
|
||||
})
|
||||
|
||||
it('点击引用卡片抛出 open-citation', async () => {
|
||||
const wrapper = mountTree([event('Citation', { file_path: 'notes/a.md', heading_path: 'A' })])
|
||||
|
||||
await wrapper.find('.event-citation').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('open-citation')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('工具调用统计按 ToolResult 显示最终状态，不停在 running', () => {
|
||||
const wrapper = mountTree([
|
||||
event('ToolCall', { tool_call_id: 'tc-9', name: 'write_note' }),
|
||||
event('ToolResult', { tool_call_id: 'tc-9', name: 'write_note', success: false, error_code: 'TOOL_DENIED' }),
|
||||
])
|
||||
|
||||
const item = wrapper.find('.tool-call-item')
|
||||
expect(item.classes()).toContain('error')
|
||||
expect(item.text()).toContain('失败')
|
||||
})
|
||||
|
||||
it('没有事件时显示等待态', () => {
|
||||
const wrapper = mountTree([])
|
||||
|
||||
expect(wrapper.find('.empty-state').text()).toContain('等待执行轨迹')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user