fix(frontend): 修复纸页刷新宽度并完善侧栏和图表主题

frontend/src/components/common/MarkdownContent.vue

@@ -11,11 +11,11 @@ let renderVersion = 0
 const diagramTheme = computed<'light' | 'dark'>(() => (themeStore.isDark ? 'dark' : 'light'))
 
 // 主题切换需要重渲染：Mermaid SVG 的配色在渲染时烘焙，无法靠 CSS 变量事后调整。
-watch([() => props.source, diagramTheme], async ([source, theme]) => {
+watch([() => props.source, diagramTheme, () => themeStore.currentThemeId], async ([source, theme]) => {
   const version = ++renderVersion
   const result = await renderMarkdown(source, { theme })
   if (version === renderVersion) html.value = result
-}, { immediate: true })
+}, { immediate: true, flush: 'post' })
 </script>
 
 <template>

frontend/src/components/common/MermaidBlock.vue

@@ -13,7 +13,7 @@ const emit = defineEmits<{
   (e: 'rendered', info: { width: number; height: number }): void
 }>()
 
-const { mermaidTheme } = useMermaidTheme()
+const { mermaidTheme, themeId } = useMermaidTheme()
 const svgHtml = ref('')
 const isLoading = ref(true)
 const hasError = ref(false)
@@ -52,7 +52,7 @@ async function doRender() {
 
 onMounted(doRender)
 
-watch(() => [props.source, mermaidTheme.value], () => { scale.value = 1; doRender() })
+watch(() => [props.source, mermaidTheme.value, themeId.value], () => { scale.value = 1; doRender() }, { flush: 'post' })
 
 function zoomIn() { scale.value = Math.min(scale.value * 1.2, 5) }
 function zoomOut() { scale.value = Math.max(scale.value / 1.2, 0.2) }

frontend/src/components/common/SecondarySidebar.spec.ts

@@ -0,0 +1,23 @@
+// @vitest-environment happy-dom
+import { expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import SecondarySidebar from './SecondarySidebar.vue'
+
+it('resizes by keyboard, clamps bounds and restores the saved width', async () => {
+  localStorage.removeItem('workspace-sidebar-width')
+  const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/', component: { template: '<div />' } }] })
+  await router.push('/')
+  const options = { props: { component: 'file-tree' }, global: { plugins: [router], stubs: { FileTreePanel: true } } }
+  let wrapper = mount(SecondarySidebar, options)
+  await wrapper.get('[role="separator"]').trigger('keydown', { key: 'ArrowRight' })
+  expect(localStorage.getItem('workspace-sidebar-width')).toBe('288')
+  wrapper.unmount()
+  wrapper = mount(SecondarySidebar, options)
+  await wrapper.vm.$nextTick()
+  expect(wrapper.get('aside').attributes('style')).toContain('288px')
+  await wrapper.get('[role="separator"]').trigger('keydown', { key: 'Home' })
+  expect(wrapper.get('aside').attributes('style')).toContain('200px')
+  wrapper.unmount()
+  localStorage.removeItem('workspace-sidebar-width')
+})

frontend/src/components/common/SecondarySidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import FileTreePanel from '@/features/workspace/FileTreePanel.vue'
 import ConversationListPanel from '@/features/chat/ConversationListPanel.vue'
 import RunListPanel from '@/features/agent/RunListPanel.vue'
@@ -15,6 +15,40 @@ const props = defineProps<{
 
 const route = useRoute()
 const routeName = computed(() => route.name as string)
+const sidebar = ref<HTMLElement | null>(null)
+const width = ref(272)
+const maxWidth = ref(520)
+let dragging = false
+function saveWidth() { try { localStorage.setItem('workspace-sidebar-width', String(width.value)) } catch { /* Keep resizing available when storage is unavailable. */ } }
+function clampWidth(value: number) { return Math.max(200, Math.min(maxWidth.value, value)) }
+function updateBounds() {
+  maxWidth.value = Math.max(200, Math.min(520, window.innerWidth - (sidebar.value?.getBoundingClientRect().left ?? 0) - 320))
+  width.value = clampWidth(width.value)
+}
+function beginResize(event: PointerEvent) {
+  if (event.button !== 0) return
+  event.preventDefault()
+  updateBounds()
+  dragging = true
+  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+}
+function resize(event: PointerEvent) {
+  if (dragging) width.value = clampWidth(event.clientX - (sidebar.value?.getBoundingClientRect().left ?? 0))
+}
+function endResize() { if (dragging) { dragging = false; saveWidth() } }
+function resizeWithKeyboard(event: KeyboardEvent) {
+  if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+  event.preventDefault()
+  updateBounds()
+  width.value = event.key === 'Home' ? 200 : event.key === 'End' ? maxWidth.value : clampWidth(width.value + (event.key === 'ArrowLeft' ? -16 : 16))
+  saveWidth()
+}
+onMounted(() => {
+  try { const saved = Number(localStorage.getItem('workspace-sidebar-width')); if (saved >= 200 && Number.isFinite(saved)) width.value = saved } catch { /* Use default width. */ }
+  updateBounds()
+  window.addEventListener('resize', updateBounds)
+})
+onBeforeUnmount(() => { endResize(); window.removeEventListener('resize', updateBounds) })
 
 const sidebarTitle = computed(() => {
   const titles: Record<string, string> = {
@@ -32,7 +66,7 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
 </script>
 
 <template>
-  <aside class="secondary-sidebar">
+  <aside ref="sidebar" class="secondary-sidebar" :style="component === 'file-tree' ? { width: `${width}px` } : undefined">
     <div v-if="component !== 'file-tree'" class="sidebar-header">
       <h3 class="sidebar-title">{{ sidebarTitle }}</h3>
       <div v-if="showSkillToggle" class="sidebar-tabs">
@@ -48,11 +82,13 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
       <TaskFiltersPanel v-else-if="component === 'task-filters'" />
       <ExtensionListPanel v-else-if="component === 'extension-list'" />
     </div>
+    <div v-if="component === 'file-tree'" class="sidebar-resizer" role="separator" aria-orientation="vertical" :aria-label="t('调整文件侧栏宽度', 'Resize file sidebar')" :aria-valuenow="width" :aria-valuemin="200" :aria-valuemax="maxWidth" tabindex="0" @pointerdown="beginResize" @pointermove="resize" @pointerup="endResize" @pointercancel="endResize" @lostpointercapture="endResize" @keydown="resizeWithKeyboard" @dblclick="width = clampWidth(272); saveWidth()" />
   </aside>
 </template>
 
 <style scoped>
 .secondary-sidebar {
+  position: relative;
   width: var(--sidebar-secondary-width);
   background: var(--color-surface-secondary);
   border-right: 1px solid var(--color-border-default);
@@ -111,6 +147,8 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
   overflow-x: hidden;
   scrollbar-gutter: stable;
 }
+.sidebar-resizer { position: absolute; top: 0; bottom: 0; right: -3px; width: 6px; z-index: 20; cursor: col-resize; touch-action: none; }
+.sidebar-resizer:hover, .sidebar-resizer:focus-visible { background: var(--color-accent-secondary); outline: none; }
 .file-sidebar-content { min-height: 0; overflow: hidden; scrollbar-gutter: auto; }
 
 </style>