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

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>