saint
f21c7861e4
审阅意见逐项修复： 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 全部通过。
104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { useWorkspaceStore } from '@/stores/workspace'
|
||
import { useThemeStore } from '@/stores/theme'
|
||
import { useEditorStore } from '@/stores/editor'
|
||
import { useSettingsStore } from '@/stores/settings'
|
||
import PrimarySidebar from './PrimarySidebar.vue'
|
||
import SecondarySidebar from './SecondarySidebar.vue'
|
||
import StatusBar from './StatusBar.vue'
|
||
import TitleBar from './TitleBar.vue'
|
||
import CommandPalette from './CommandPalette.vue'
|
||
import { navigateToCitation } from '@/composables/useCitationNavigation'
|
||
|
||
defineProps<{
|
||
showSecondarySidebar?: boolean
|
||
}>()
|
||
|
||
const workspaceStore = useWorkspaceStore()
|
||
const themeStore = useThemeStore()
|
||
const editorStore = useEditorStore()
|
||
const settingsStore = useSettingsStore()
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
onMounted(() => { void settingsStore.loadDiagnostics() })
|
||
watch(() => settingsStore.defaultEditorMode, (mode) => editorStore.setMode(mode), { immediate: true })
|
||
watch(() => settingsStore.editorLineWidth, (width) => {
|
||
document.documentElement.style.setProperty('--editor-line-width', `${width}ch`)
|
||
}, { immediate: true })
|
||
|
||
const routeName = computed(() => route.name as string)
|
||
|
||
const secondaryComponent = computed(() => {
|
||
switch (routeName.value) {
|
||
case 'workspace': return 'file-tree'
|
||
case 'search': return 'search-filters'
|
||
case 'chat': return 'conversation-list'
|
||
case 'agent': return 'run-list'
|
||
case 'tasks': return 'task-filters'
|
||
case 'skills':
|
||
case 'plugins': return 'extension-list'
|
||
default: return null
|
||
}
|
||
})
|
||
|
||
function openCitation(_noteId: string, blockId: string, filePath: string) {
|
||
// 走统一的定位流程：必须先 loadFile 再 highlightBlock，
|
||
// 否则 editor store 的 loadFile 会把刚设好的高亮清掉。
|
||
return navigateToCitation(
|
||
{ file_path: filePath, block_id: blockId },
|
||
{
|
||
loadFile: (path) => editorStore.loadFile(path),
|
||
openFile: (path) => workspaceStore.openFile(path),
|
||
highlightBlock: (id) => editorStore.highlightBlock(id),
|
||
navigate: (path) => router.push(path),
|
||
},
|
||
)
|
||
}
|
||
|
||
defineExpose({ openCitation })
|
||
</script>
|
||
|
||
<template>
|
||
<div class="app-shell" :class="{ 'theme-dark': themeStore.isDark }">
|
||
<TitleBar />
|
||
<div class="app-body">
|
||
<PrimarySidebar />
|
||
<SecondarySidebar v-if="secondaryComponent" :component="secondaryComponent" />
|
||
<main class="main-content">
|
||
<slot />
|
||
</main>
|
||
</div>
|
||
<StatusBar />
|
||
<CommandPalette />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.app-shell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
background: var(--color-background-secondary);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.app-body {
|
||
flex: 1;
|
||
display: flex;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
background: var(--color-background-primary);
|
||
isolation: isolate;
|
||
}
|
||
</style>
|