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,152 @@
|
||||
import type { PluginCommand, PluginCommandEffect } from '@/contracts'
|
||||
|
||||
/** 命令参数的 JSON Schema 字段定义（后端用 Draft 2020-12 校验）。 */
|
||||
export interface CommandField {
|
||||
key: string
|
||||
title: string
|
||||
type: string
|
||||
required: boolean
|
||||
enum?: string[]
|
||||
default?: unknown
|
||||
description?: string
|
||||
}
|
||||
|
||||
function asRecord(value: unknown): Record<string, unknown> {
|
||||
return value && typeof value === 'object' && !Array.isArray(value)
|
||||
? (value as Record<string, unknown>)
|
||||
: {}
|
||||
}
|
||||
|
||||
/**
|
||||
* 把命令的 parameters（object schema）摊平成表单字段。
|
||||
*
|
||||
* 后端只接受 type=object 的 schema（contributions.py 里显式拒绝其他形态），
|
||||
* 所以这里只处理 properties + required 两个键，嵌套对象按文本输入兜底。
|
||||
*/
|
||||
export function commandFields(command: PluginCommand): CommandField[] {
|
||||
const schema = asRecord(command.parameters)
|
||||
const properties = asRecord(schema.properties)
|
||||
const requiredKeys = Array.isArray(schema.required) ? schema.required.map(String) : []
|
||||
|
||||
return Object.entries(properties).map(([key, rawDefinition]) => {
|
||||
const definition = asRecord(rawDefinition)
|
||||
return {
|
||||
key,
|
||||
title: typeof definition.title === 'string' && definition.title ? definition.title : key,
|
||||
type: typeof definition.type === 'string' ? definition.type : 'string',
|
||||
required: requiredKeys.includes(key),
|
||||
enum: Array.isArray(definition.enum) ? definition.enum.map(String) : undefined,
|
||||
default: definition.default,
|
||||
description: typeof definition.description === 'string' ? definition.description : undefined,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单初始值。
|
||||
*
|
||||
* 布尔字段必须显式给 false —— 下拉框默认显示「否」，如果参数对象里
|
||||
* 没有这个键，用户看到的和实际提交的就不一致。
|
||||
*/
|
||||
export function initialArguments(command: PluginCommand): Record<string, unknown> {
|
||||
const result: Record<string, unknown> = {}
|
||||
for (const field of commandFields(command)) {
|
||||
if (field.default !== undefined) result[field.key] = field.default
|
||||
else if (field.type === 'boolean') result[field.key] = false
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/** 按字段类型把输入框的字符串转成 schema 期望的类型。 */
|
||||
export function coerceArgument(field: CommandField, raw: string): unknown {
|
||||
if (field.type === 'boolean') return raw === 'true'
|
||||
if (field.type === 'number' || field.type === 'integer') {
|
||||
if (raw.trim() === '') return undefined
|
||||
const parsed = Number(raw)
|
||||
return Number.isNaN(parsed) ? undefined : parsed
|
||||
}
|
||||
return raw
|
||||
}
|
||||
|
||||
function isBlank(value: unknown): boolean {
|
||||
if (value === undefined || value === null) return true
|
||||
return typeof value === 'string' && value.trim() === ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 找出还没填的必填字段。
|
||||
*
|
||||
* 后端会用 JSON Schema 再校验一次，这里做前置检查只为了别让用户
|
||||
* 提交一次才知道少填了什么。布尔的 false 是合法值，不算缺失。
|
||||
*/
|
||||
export function missingRequiredFields(
|
||||
command: PluginCommand,
|
||||
args: Record<string, unknown>,
|
||||
): CommandField[] {
|
||||
return commandFields(command).filter((field) => field.required && isBlank(args[field.key]))
|
||||
}
|
||||
|
||||
/** undefined 的键不该出现在请求体里。 */
|
||||
export function cleanArguments(args: Record<string, unknown>): Record<string, unknown> {
|
||||
const result: Record<string, unknown> = {}
|
||||
for (const [key, value] of Object.entries(args)) {
|
||||
if (value !== undefined) result[key] = value
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/** navigate effect 的路由白名单，与 router/index.ts 的路径一一对应。 */
|
||||
export const EFFECT_ROUTES: Record<string, string> = {
|
||||
'vault-entry': '/',
|
||||
workspace: '/workspace',
|
||||
search: '/search',
|
||||
chat: '/chat',
|
||||
agent: '/agent/runs',
|
||||
tasks: '/tasks',
|
||||
skills: '/extensions/skills',
|
||||
plugins: '/extensions/plugins',
|
||||
themes: '/themes',
|
||||
settings: '/settings',
|
||||
}
|
||||
|
||||
export interface EffectHandlers {
|
||||
navigate: (path: string) => Promise<unknown> | unknown
|
||||
refresh: (scope: 'workspace' | 'commands' | 'settings' | 'plugins') => Promise<unknown> | unknown
|
||||
notify: (message: string) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行命令返回的 effect。
|
||||
*
|
||||
* navigate / refresh 必须真的发生 —— 之前这里只是把 effect 拼成一句话
|
||||
* 显示给用户，命令等于没生效。未知 type 一律按「已完成」处理，
|
||||
* 不猜测语义。
|
||||
*/
|
||||
export async function applyCommandEffect(
|
||||
effect: PluginCommandEffect,
|
||||
handlers: EffectHandlers,
|
||||
): Promise<void> {
|
||||
switch (effect.type) {
|
||||
case 'notification':
|
||||
handlers.notify(effect.payload.message)
|
||||
return
|
||||
case 'navigate': {
|
||||
const path = EFFECT_ROUTES[effect.payload.route]
|
||||
if (!path) {
|
||||
handlers.notify(`命令请求跳转到未知路由「${effect.payload.route}」，已忽略。`)
|
||||
return
|
||||
}
|
||||
await handlers.navigate(path)
|
||||
return
|
||||
}
|
||||
case 'refresh':
|
||||
await handlers.refresh(effect.payload.scope)
|
||||
handlers.notify('相关数据已刷新。')
|
||||
return
|
||||
case 'job':
|
||||
handlers.notify(`已创建后台任务：${effect.payload.job_id}`)
|
||||
return
|
||||
default:
|
||||
handlers.notify('命令执行完成。')
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user