Files
NotesAgentic/frontend/src/services/pluginCommandForm.ts
T
saint f273fef235 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 全部通过。
2026-09-05 10:04:17 +08:00

153 lines
5.1 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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>)
: {}
}
/**
* 把命令的 parametersobject schema)摊平成表单字段。
*
* 后端只接受 type=object 的 schemacontributions.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('命令执行完成。')
}
}