From 1e413c592d0bf1d65c1516ab9dba54724c010d74 Mon Sep 17 00:00:00 2001
From: python395118 <baswa_java@163.com>
Date: Fri, 17 Apr 2026 16:56:36 +0800
Subject: [PATCH 1/3] =?UTF-8?q?-=20ui:=20TensionChart=20ResizeObserver=20?=
 =?UTF-8?q?=E5=88=B7=E7=BA=BFBUG=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/autopilot/TensionChart.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/components/autopilot/TensionChart.vue b/frontend/src/components/autopilot/TensionChart.vue
index 582c2c226..2bad3d126 100644
--- a/frontend/src/components/autopilot/TensionChart.vue
+++ b/frontend/src/components/autopilot/TensionChart.vue
@@ -80,6 +80,7 @@ const loading = ref(false)
 const error = ref<string | null>(null)
 
 let chartInstance: ECharts | null = null
+let resizeObserver: ResizeObserver | null = null
 
 // 张力警戒线
 const tensionThreshold = computed(() => props.threshold ?? 5.0)
@@ -152,6 +153,13 @@ function renderChart() {
 
   if (!chartInstance) {
     chartInstance = init(chartRef.value)
+    // 在 chartRef 确保存在后才初始化 ResizeObserver（解决 onMounted 时 chartRef 为 null 的问题）
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        chartInstance?.resize()
+      })
+      resizeObserver.observe(chartRef.value)
+    }
   }
 
   const chapterNumbers = tensionData.value.map((d) => d.chapter_number)
@@ -319,6 +327,12 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
   if (resizeTimer) clearTimeout(resizeTimer)
+  // 清理 ResizeObserver
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+  // 显式 dispose 旧实例（Vue+ECharts 组件刷新必需）
   chartInstance?.dispose()
   chartInstance = null
 })

From 61084925f30fb135acf6f98a20f065a7bac1e3c1 Mon Sep 17 00:00:00 2001
From: python395118 <baswa_java@163.com>
Date: Fri, 17 Apr 2026 18:04:51 +0800
Subject: [PATCH 2/3] =?UTF-8?q?Revert=20"-=20ui:=20TensionChart=20ResizeOb?=
 =?UTF-8?q?server=20=E5=88=B7=E7=BA=BFBUG=E4=BF=AE=E5=A4=8D"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 1e413c592d0bf1d65c1516ab9dba54724c010d74.
---
 frontend/src/components/autopilot/TensionChart.vue | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/frontend/src/components/autopilot/TensionChart.vue b/frontend/src/components/autopilot/TensionChart.vue
index 2bad3d126..582c2c226 100644
--- a/frontend/src/components/autopilot/TensionChart.vue
+++ b/frontend/src/components/autopilot/TensionChart.vue
@@ -80,7 +80,6 @@ const loading = ref(false)
 const error = ref<string | null>(null)
 
 let chartInstance: ECharts | null = null
-let resizeObserver: ResizeObserver | null = null
 
 // 张力警戒线
 const tensionThreshold = computed(() => props.threshold ?? 5.0)
@@ -153,13 +152,6 @@ function renderChart() {
 
   if (!chartInstance) {
     chartInstance = init(chartRef.value)
-    // 在 chartRef 确保存在后才初始化 ResizeObserver（解决 onMounted 时 chartRef 为 null 的问题）
-    if (!resizeObserver) {
-      resizeObserver = new ResizeObserver(() => {
-        chartInstance?.resize()
-      })
-      resizeObserver.observe(chartRef.value)
-    }
   }
 
   const chapterNumbers = tensionData.value.map((d) => d.chapter_number)
@@ -327,12 +319,6 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
   if (resizeTimer) clearTimeout(resizeTimer)
-  // 清理 ResizeObserver
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
-  // 显式 dispose 旧实例（Vue+ECharts 组件刷新必需）
   chartInstance?.dispose()
   chartInstance = null
 })

From 7b5cd1dfd065e76d87c85c5c8df93536c1501479 Mon Sep 17 00:00:00 2001
From: python395118 <baswa_java@163.com>
Date: Fri, 17 Apr 2026 19:46:35 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(ui):=20=E5=B7=A5=E4=BD=9C=E5=8F=B0?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=8B=96=E6=8B=BD=E6=8A=98=E5=8F=A0=E4=B8=8E?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=A0=87=E9=A2=98=E5=B8=83=E5=B1=80=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 工作台左右面板支持拖拽调整宽度与折叠/展开
- 中间内容区滚动条默认隐藏，悬停时显示
- 故事结构树窄屏时隐藏节点后缀
- 统一各面板标题行布局（标题+标签+按钮同行）
- 监控网格张力图表与实时日志高度一致
- 张力心电图刷新后重新初始化，新增 ResizeObserver 自适应
- 关系图工具栏按钮防换行布局
- 修复 Naive UI 按钮属性冲突（dashed/secondary）
---
 .../src/components/StoryStructureTree.vue     | 117 ++++++--
 .../autopilot/AutopilotDashboard.vue          |  27 +-
 .../components/autopilot/AutopilotPanel.vue   |   3 +-
 .../autopilot/RealtimeLogStream.vue           |  17 +-
 .../src/components/autopilot/TensionChart.vue |  56 +++-
 .../components/graphs/CastGraphCompact.vue    |   8 +-
 .../graphs/LocationGraphCompact.vue           |   8 +-
 .../components/knowledge/KnowledgePanel.vue   |  47 +++-
 frontend/src/components/panels/BiblePanel.vue | 140 +++++-----
 .../workbench/ForeshadowLedgerPanel.vue       |  39 ++-
 .../workbench/HolographicChroniclesPanel.vue  |  32 ++-
 .../src/components/workbench/WorkArea.vue     |  53 +++-
 frontend/src/views/Workbench.vue              | 257 ++++++++++++++----
 13 files changed, 572 insertions(+), 232 deletions(-)

diff --git a/frontend/src/components/StoryStructureTree.vue b/frontend/src/components/StoryStructureTree.vue
index 4eac2d124..804fb3b88 100644
--- a/frontend/src/components/StoryStructureTree.vue
+++ b/frontend/src/components/StoryStructureTree.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h, onMounted, watch } from 'vue'
+import { ref, computed, h, onMounted, onUnmounted, watch } from 'vue'
 import { NTree, NEmpty, NSpin, NTag, NButton, NSpace, NDropdown, NModal, NInput, useMessage, useDialog } from 'naive-ui'
 import { structureApi, type StoryNode } from '@/api/structure'
 import { chapterApi } from '@/api/chapter'
@@ -100,6 +100,10 @@ const emit = defineEmits<{
 const message = useMessage()
 const dialog = useDialog()
 
+// 容器宽度响应式
+const containerWidth = ref(558)
+const isNarrow = computed(() => containerWidth.value < 436)
+
 const loading = ref(false)
 /** 全托管时空侧栏提示：避免与「启动结构规划」主按钮混淆 */
 const autopilotEmptyMode = ref<null | 'planning' | 'review'>(null)
@@ -201,10 +205,20 @@ const convertToTreeNode = (node: StoryNode): any => {
     chapter: '📄',
   }
   const n = node.number
-  const displayName =
-    node.node_type === 'chapter' && typeof n === 'number' && n >= 1
-      ? `第${n}章 ${node.title || ''}`.trim()
-      : node.title
+  const isNarrow = containerWidth.value < 238
+  let displayName = node.title
+
+  if (node.node_type === 'chapter' && typeof n === 'number' && n >= 1) {
+    // 窄屏模式(<238px)章节只显示"第X章"
+    displayName = isNarrow ? `第${n}章` : `第${n}章 ${node.title || ''}`.trim()
+  } else if (isNarrow && node.node_type === 'act' && typeof n === 'number') {
+    // 窄屏模式(<238px)幕只显示"第X幕"
+    displayName = `第${n}幕`
+  } else if (isNarrow && node.node_type === 'part' && typeof n === 'number') {
+    // 窄屏模式(<238px)部只显示"第X部"
+    displayName = `第${n}部`
+  }
+
   return {
     key: node.id,
     label: displayName,
@@ -269,6 +283,9 @@ const loadTree = async () => {
     const hasData = treeData.value.length > 0
     emit('treeLoaded', hasData)
     await syncAutopilotEmptyHint(hasData)
+
+    // 初始化容器宽度
+    updateContainerWidth()
   } catch (e: any) {
     message.error(e?.response?.data?.detail || '加载结构失败')
     emit('treeLoaded', false)
@@ -278,6 +295,14 @@ const loadTree = async () => {
   }
 }
 
+// 更新容器宽度
+const updateContainerWidth = () => {
+  const el = document.querySelector('.story-structure')
+  if (el) {
+    containerWidth.value = el.clientWidth
+  }
+}
+
 /** 从结构树章节节点解析「全书章节号」（与 GET .../chapters/{chapter_number} 一致） */
 function resolveBookChapterNumber(node: StoryNode): number | null {
   if (node.node_type !== 'chapter') return null
@@ -403,13 +428,14 @@ const doAddChild = async () => {
   }
 }
 
-// 渲染节点标签
+// 渲染节点标签（带 tooltip 显示摘要）
 const renderLabel = ({ option }: { option: any }) => {
   const elements: any[] = [
     h('span', { class: 'node-icon' }, option.icon),
     h('span', { class: 'node-title' }, option.display_name),
   ]
-  if (option.node_type === 'chapter') {
+  // 窄屏模式下隐藏 "已收稿" 标签
+  if (option.node_type === 'chapter' && !isNarrow.value) {
     const st = (option as StoryNode & { status?: string }).status
     const hasContent =
       (option.word_count && option.word_count > 0) || st === 'completed'
@@ -422,24 +448,27 @@ const renderLabel = ({ option }: { option: any }) => {
       }, () => (hasContent ? '已收稿' : '未收稿'))
     )
   }
-  return h('span', { class: 'node-label' }, elements)
+  const node = option as StoryNode
+  const hasSummary = node.description && ['part', 'volume', 'act'].includes(node.node_type)
+  return h('span', {
+    class: 'node-label',
+    title: hasSummary ? node.description : undefined,
+  }, elements)
 }
 
-// 渲染节点后缀
+// 渲染节点后缀（仅显示章节范围/字数，摘要通过 tooltip 显示）
 const renderSuffix = ({ option }: { option: any }) => {
   const elements: any[] = []
   const node = option as StoryNode
-  if (node.description && ['part', 'volume', 'act'].includes(node.node_type)) {
-    elements.push(
-      h('span', {
-        class: 'node-description',
-        style: { color: '#999', fontSize: '12px', marginLeft: '8px' },
-      }, node.description)
-    )
+  // 窄屏模式下隐藏 "幕" 和 "章" 后面的统计信息
+  if (isNarrow.value && (node.node_type === 'act' || node.node_type === 'chapter')) {
+    return null
   }
+  // 章节节点显示字数
   if (node.node_type === 'chapter' && node.word_count) {
     elements.push(h('span', { class: 'node-range' }, `${node.word_count}字`))
   }
+  // 部/卷/幕显示章节范围
   if (node.chapter_start && node.chapter_end) {
     elements.push(
       h('span', { class: 'node-range' }, `${node.chapter_start}-${node.chapter_end}章 (${node.chapter_count})`)
@@ -457,7 +486,43 @@ const nodeProps = ({ option }: { option: any }) => {
   }
 }
 
-onMounted(() => { loadTree() })
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  loadTree()
+  // 监听容器宽度变化
+  const el = document.querySelector('.story-structure')
+  if (el) {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerWidth.value = entry.contentRect.width
+      }
+    })
+    resizeObserver.observe(el)
+  }
+})
+
+// 监听宽度变化，窄屏模式切换时重新渲染树
+watch(containerWidth, (newWidth, oldWidth) => {
+  const crossedThreshold = (newWidth < 238 && oldWidth >= 238) || (newWidth >= 238 && oldWidth < 238)
+  if (crossedThreshold && treeData.value.length > 0) {
+    // 重新转换树节点以更新显示名称
+    const refreshTree = (nodes: StoryNode[]): any[] => nodes.map(node => ({
+      ...convertToTreeNode(node),
+      children: node.children ? refreshTree(node.children) : []
+    }))
+    // 从原始数据重新转换
+    const originalNodes = treeData.value.map(n => ({ ...n, children: n.children }))
+    treeData.value = refreshTree(originalNodes)
+  }
+})
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+})
 
 defineExpose({ loadTree })
 </script>
@@ -484,17 +549,25 @@ defineExpose({ loadTree })
 .node-label {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
-.node-icon { font-size: 16px; }
-.node-title { font-size: 13px; }
+.node-icon { font-size: 16px; width: 18px; text-align: center; }
+.node-title { font-size: 14px; }
 .node-range {
-  font-size: 12px;
+  font-size: 11px;
   color: #999;
-  margin-left: 8px;
+  margin-left: 6px;
 }
 .node-level-1 { font-weight: 600; }
 .node-level-2 { font-weight: 500; }
 .node-level-3 { font-weight: normal; }
 .node-level-4 { font-weight: normal; font-size: 13px; }
+
+/* 紧凑布局 */
+:deep(.n-tree-node-content) {
+  padding: 2px 0;
+}
+:deep(.n-tree-node-wrapper) {
+  padding: 1px 0;
+}
 </style>
diff --git a/frontend/src/components/autopilot/AutopilotDashboard.vue b/frontend/src/components/autopilot/AutopilotDashboard.vue
index fdc57a93c..ffc8d7f2f 100644
--- a/frontend/src/components/autopilot/AutopilotDashboard.vue
+++ b/frontend/src/components/autopilot/AutopilotDashboard.vue
@@ -1,10 +1,5 @@
 <template>
   <div class="autopilot-dashboard">
-    <n-alert type="default" :show-icon="false" class="monitor-copy-hint">
-      <n-text depth="3" style="font-size: 12px; line-height: 1.5">
-        <strong>监控说明</strong>：「文风」卡片为按<strong>角色声线</strong>的偏离监测。全书<strong>作者文风指纹</strong>与侧栏「剧本基建」规划为不同能力，与此处互补。
-      </n-text>
-    </n-alert>
     <!-- 监控网格 -->
     <div class="monitor-grid">
       <!-- 第一行：张力图表 + 实时日志 -->
@@ -74,8 +69,7 @@ function handleBreakerReset() {
 
 <style scoped>
 .autopilot-dashboard {
-  height: 100%;
-  overflow-y: auto;
+  /* 高度由内容自然撑开，配合 WorkArea 整体滚动 */
 }
 
 .monitor-copy-hint {
@@ -86,12 +80,27 @@ function handleBreakerReset() {
 .monitor-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(200px, auto); /* 第一行最小200px，自动拉伸 */
+  align-items: stretch; /* 单元格垂直拉伸对齐 */
   gap: 16px;
-  padding: 4px;
+  padding: 8px;
 }
 
 .grid-cell {
-  min-height: 280px;
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.grid-cell > * {
+  flex: 1 1 auto; /* 允许子元素拉伸填充 */
+  min-height: 0;
+}
+
+/* 第一行单元格高度一致 */
+.grid-cell.span-1,
+.grid-cell.span-2 {
+  height: 100%;
 }
 
 .grid-cell.span-1 {
diff --git a/frontend/src/components/autopilot/AutopilotPanel.vue b/frontend/src/components/autopilot/AutopilotPanel.vue
index 8810b667b..38f0e788d 100644
--- a/frontend/src/components/autopilot/AutopilotPanel.vue
+++ b/frontend/src/components/autopilot/AutopilotPanel.vue
@@ -652,7 +652,8 @@ onUnmounted(() => {
   background: linear-gradient(135deg, rgba(24, 160, 88, 0.05) 0%, rgba(24, 160, 88, 0.02) 100%);
   border: 1px solid rgba(24, 160, 88, 0.15);
   border-radius: 12px;
-  padding: 16px 18px;
+  padding: 10px 8px;
+  /* padding: 14px 16px; */
   display: flex;
   flex-direction: column;
   gap: 12px;
diff --git a/frontend/src/components/autopilot/RealtimeLogStream.vue b/frontend/src/components/autopilot/RealtimeLogStream.vue
index 64137127b..4bad83e0e 100644
--- a/frontend/src/components/autopilot/RealtimeLogStream.vue
+++ b/frontend/src/components/autopilot/RealtimeLogStream.vue
@@ -520,9 +520,23 @@ onUnmounted(() => {
 
 <style scoped>
 .realtime-log-stream {
+  height: 100%;
+  min-width: 368px;
   position: relative;
 }
 
+/* 确保卡片高度填满容器 */
+:deep(.n-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.n-card__content) {
+  flex: 1;
+  min-height: 0;
+}
+
 .stream-wrap {
   position: relative;
 }
@@ -700,7 +714,8 @@ onUnmounted(() => {
 
 /* 日志流主体 */
 .stream-body {
-  height: 280px;
+  height: 200px; /* 固定高度，与张力心电图一致 */
+  max-height: 200px;
   overflow-y: auto;
   padding: 12px 16px;
   scroll-behavior: smooth;
diff --git a/frontend/src/components/autopilot/TensionChart.vue b/frontend/src/components/autopilot/TensionChart.vue
index 582c2c226..64d29216e 100644
--- a/frontend/src/components/autopilot/TensionChart.vue
+++ b/frontend/src/components/autopilot/TensionChart.vue
@@ -4,7 +4,7 @@
       <n-tag v-if="hasLowTension" type="warning" size="small">
         ⚠️ 检测到低张力章节
       </n-tag>
-      <n-button v-if="tensionData.length > 0" size="tiny" quaternary @click="loadTensionData">↻</n-button>
+      <n-button v-if="tensionData.length > 0" size="tiny" quaternary @click="refreshChart">↻</n-button>
     </template>
 
     <!-- 加载态 -->
@@ -80,6 +80,7 @@ const loading = ref(false)
 const error = ref<string | null>(null)
 
 let chartInstance: ECharts | null = null
+let resizeObserver: ResizeObserver | null = null
 
 // 张力警戒线
 const tensionThreshold = computed(() => props.threshold ?? 5.0)
@@ -150,8 +151,16 @@ function renderChart() {
     return
   }
 
-  if (!chartInstance) {
+  // 如果实例已被销毁或不存在，重新初始化
+  if (!chartInstance || chartInstance.isDisposed()) {
     chartInstance = init(chartRef.value)
+    // 在 chartRef 确保存在后才初始化 ResizeObserver（解决 onMounted 时 chartRef 为 null 的问题）
+    if (!resizeObserver && chartRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        chartInstance?.resize()
+      })
+      resizeObserver.observe(chartRef.value)
+    }
   }
 
   const chapterNumbers = tensionData.value.map((d) => d.chapter_number)
@@ -297,18 +306,23 @@ function handleResize() {
   chartInstance?.resize()
 }
 
+// 刷新图表：重新加载数据并渲染
+async function refreshChart() {
+  // 先清空数据触发重新加载
+  tensionData.value = []
+  // 销毁旧实例确保重新初始化
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  await nextTick()
+  await loadTensionData()
+}
+
 // ==================== 监听 ====================
 watch(() => props.novelId, () => void loadTensionData())
 
-// 数据变化时重新渲染（防抖）
-let resizeTimer: ReturnType<typeof setTimeout> | null = null
-watch(tensionData, () => {
-  if (resizeTimer) clearTimeout(resizeTimer)
-  resizeTimer = setTimeout(() => {
-    renderChart()
-    resizeTimer = null
-  }, 100)
-})
+// 数据变化时重新渲染（由 loadTensionData 内部处理，避免重复调用）
 
 // ==================== 生命周期 ====================
 onMounted(() => {
@@ -318,7 +332,12 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
-  if (resizeTimer) clearTimeout(resizeTimer)
+  // 清理 ResizeObserver
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+  // 显式 dispose 旧实例（Vue+ECharts 组件刷新必需）
   chartInstance?.dispose()
   chartInstance = null
 })
@@ -328,6 +347,7 @@ onUnmounted(() => {
 .chart-container {
   width: 100%;
   height: 200px;
+  min-height: 200px;
   position: relative;
 }
 
@@ -358,4 +378,16 @@ onUnmounted(() => {
   padding-top: 8px;
   border-top: 1px solid var(--n-border-color, rgba(0,0,0,0.08));
 }
+
+/* 确保卡片高度填满容器 */
+:deep(.n-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.n-card__content) {
+  flex: 1;
+  min-height: 0;
+}
 </style>
diff --git a/frontend/src/components/graphs/CastGraphCompact.vue b/frontend/src/components/graphs/CastGraphCompact.vue
index de31ca28d..5ba01cd60 100644
--- a/frontend/src/components/graphs/CastGraphCompact.vue
+++ b/frontend/src/components/graphs/CastGraphCompact.vue
@@ -209,9 +209,9 @@ onMounted(async () => {
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 6px 10px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.2);
   background: var(--app-surface);
 }
@@ -219,7 +219,9 @@ onMounted(async () => {
 .cgc-hint {
   font-size: 11px;
   line-height: 1.45;
-  max-width: min(100%, 380px);
+  flex: 1;
+  min-width: 0;
+  /* 提示文字可折叠，但不会把按钮挤出行外 */
 }
 
 .cgc-hint code {
diff --git a/frontend/src/components/graphs/LocationGraphCompact.vue b/frontend/src/components/graphs/LocationGraphCompact.vue
index 6c7b80341..58d942bf2 100644
--- a/frontend/src/components/graphs/LocationGraphCompact.vue
+++ b/frontend/src/components/graphs/LocationGraphCompact.vue
@@ -245,9 +245,9 @@ onMounted(async () => {
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 6px 10px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.2);
   background: var(--app-surface);
 }
@@ -255,7 +255,9 @@ onMounted(async () => {
 .lgc-hint {
   font-size: 11px;
   line-height: 1.45;
-  max-width: min(100%, 380px);
+  flex: 1;
+  min-width: 0;
+  /* 提示文字可折叠，但不会把按钮挤出行外 */
 }
 
 .lgc-hint code {
diff --git a/frontend/src/components/knowledge/KnowledgePanel.vue b/frontend/src/components/knowledge/KnowledgePanel.vue
index 628f97abf..9ebd0b892 100644
--- a/frontend/src/components/knowledge/KnowledgePanel.vue
+++ b/frontend/src/components/knowledge/KnowledgePanel.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="kp-root">
-    <header class="kp-hero">
-      <div class="kp-hero-copy">
-        <h3 class="kp-title">侧栏资料</h3>
-        <p class="kp-lead">
-          可在「检索与编辑」「叙事知识」「关系图」间切换：检索与编辑含全书知识检索、三元组图谱与表格编辑；叙事含<strong>分章叙事</strong>与实体状态；<strong>梗概锁定已迁至右侧「剧本基建 → 作品设定」</strong>。<strong>关系图从知识库三元组自动生成</strong>（人物网 / 地点图全页与工作台均可打开「三元组表格」编辑）。书目级梗概以
-          <strong>manifest</strong> 为准。
-        </p>
-      </div>
+    <!-- 标题与按钮行 -->
+    <div class="kp-header-row">
+      <h3 class="kp-title">侧栏资料</h3>
       <n-space v-show="sideTab === 'narrative'" :size="8" align="center" style="flex-shrink:0">
         <n-button
           size="small"
@@ -28,6 +23,15 @@
           保存到全书上下文
         </n-button>
       </n-space>
+    </div>
+
+    <header class="kp-hero">
+      <div class="kp-hero-copy">
+        <p class="kp-lead">
+          可在「检索与编辑」「叙事知识」「关系图」间切换：检索与编辑含全书知识检索、三元组图谱与表格编辑；叙事含<strong>分章叙事</strong>与实体状态；<strong>梗概锁定已迁至右侧「剧本基建 → 作品设定」</strong>。<strong>关系图从知识库三元组自动生成</strong>（人物网 / 地点图全页与工作台均可打开「三元组表格」编辑）。书目级梗概以
+          <strong>manifest</strong> 为准。
+        </p>
+      </div>
     </header>
 
     <n-radio-group v-model:value="sideTab" class="kp-seg" size="small">
@@ -821,17 +825,33 @@ onUnmounted(() => {
   background: linear-gradient(180deg, var(--app-surface-subtle) 0%, var(--app-border) 100%);
 }
 
+/* 标题与按钮行 */
+.kp-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px 6px;
+  flex-shrink: 0;
+}
+
 .kp-hero {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
   margin-bottom: 10px;
   flex-shrink: 0;
+  padding: 0 12px;
+}
+
+.kp-hero-copy {
+  flex: 1;
+  min-width: 0;
 }
 
 .kp-title {
-  margin: 0 0 6px;
+  margin: 0;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.03em;
@@ -843,7 +863,12 @@ onUnmounted(() => {
   font-size: 12px;
   line-height: 1.65;
   color: #475569;
-  max-width: 520px;
+  /* 允许文本折叠，确保按钮始终在同一行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 
 .kp-lead strong {
diff --git a/frontend/src/components/panels/BiblePanel.vue b/frontend/src/components/panels/BiblePanel.vue
index 5ccd97ee3..676fd64da 100644
--- a/frontend/src/components/panels/BiblePanel.vue
+++ b/frontend/src/components/panels/BiblePanel.vue
@@ -1,52 +1,56 @@
 <template>
   <div class="bible-panel">
     <header class="bible-hero">
-      <div class="bible-hero-main">
-        <div class="bible-title-row">
-          <h3 class="bible-title">作品设定</h3>
-          <n-tag size="small" round :bordered="false" class="bible-badge">Story Bible</n-tag>
+      <!-- 标题行：title + badge + 按钮同行 -->
+      <div class="bible-title-row">
+        <h3 class="bible-title">作品设定</h3>
+        <n-tag size="small" round :bordered="false" class="bible-badge">Story Bible</n-tag>
+        <div class="bible-hero-actions">
+          <n-button size="small" secondary :loading="generating" @click="generateBible" title="用 AI 根据小说标题重新生成设定">
+            ✦ AI 生成
+          </n-button>
+          <n-button size="small" type="primary" :loading="saving" @click="save">保存设定</n-button>
         </div>
-        <p class="bible-lead">
-          <strong>梗概锁定</strong>（主线与不可违背设定）与<strong>写作公约</strong>（人称、时态、叙事距离、基调与禁区）——全书的「写什么」与「怎么写」。
-        </p>
-        <div class="bible-roles" aria-label="资料分工">
-          <div class="bible-role-item bible-role-here">
-            <span class="bible-role-k">梗概锁定</span>
-            <span class="bible-role-v">此处 · 主线与不可违背设定（全书上下文）</span>
-          </div>
-          <div class="bible-role-item">
-            <span class="bible-role-k">世界观构建</span>
-            <span class="bible-role-v">世界观 Tab · 5维度框架</span>
-          </div>
-          <div class="bible-role-item bible-role-here">
-            <span class="bible-role-k">写作风格</span>
-            <span class="bible-role-v">此处 · 文风公约</span>
-          </div>
-          <div class="bible-role-item">
-            <span class="bible-role-k">角色与地点</span>
-            <span class="bible-role-v">知识库 · 三元组关系</span>
-          </div>
-          <div class="bible-role-item">
-            <span class="bible-role-k">叙事线索</span>
-            <span class="bible-role-v">故事线/情节弧/时间线</span>
-          </div>
+      </div>
+
+      <!-- 说明文字 -->
+      <p class="bible-lead">
+        <strong>梗概锁定</strong>（主线与不可违背设定）与<strong>写作公约</strong>（人称、时态、叙事距离、基调与禁区）——全书的「写什么」与「怎么写」。
+      </p>
+
+      <!-- 色块：每行两个，自适应宽度 -->
+      <div class="bible-roles" aria-label="资料分工">
+        <div class="bible-role-item bible-role-here">
+          <span class="bible-role-k">梗概锁定</span>
+          <span class="bible-role-v">此处 · 主线与不可违背设定（全书上下文）</span>
+        </div>
+        <div class="bible-role-item">
+          <span class="bible-role-k">世界观构建</span>
+          <span class="bible-role-v">世界观 Tab · 5维度框架</span>
+        </div>
+        <div class="bible-role-item bible-role-here">
+          <span class="bible-role-k">写作风格</span>
+          <span class="bible-role-v">此处 · 文风公约</span>
+        </div>
+        <div class="bible-role-item">
+          <span class="bible-role-k">角色与地点</span>
+          <span class="bible-role-v">知识库 · 三元组关系</span>
         </div>
-        <div class="bible-stats" aria-live="polite">
-          <span class="bible-stat bible-stat-premise" :class="{ 'is-done': stats.premiseOk }">
-            梗概锁定 {{ stats.premiseOk ? '已填' : '待补充' }}
-          </span>
-          <span class="bible-stat-dot" aria-hidden="true" />
-          <span class="bible-stat bible-stat-style" :class="{ 'is-done': stats.styleOk }">
-            文风公约 {{ stats.styleOk ? '已填' : '待补充' }}
-          </span>
+        <div class="bible-role-item">
+          <span class="bible-role-k">叙事线索</span>
+          <span class="bible-role-v">故事线/情节弧/时间线</span>
         </div>
       </div>
-      <n-space class="bible-hero-actions" :size="8" align="center">
-        <n-button size="small" secondary :loading="generating" @click="generateBible" title="用 AI 根据小说标题重新生成设定">
-          ✦ AI 生成
-        </n-button>
-        <n-button size="small" type="primary" :loading="saving" @click="save">保存设定</n-button>
-      </n-space>
+
+      <div class="bible-stats" aria-live="polite">
+        <span class="bible-stat bible-stat-premise" :class="{ 'is-done': stats.premiseOk }">
+          梗概锁定 {{ stats.premiseOk ? '已填' : '待补充' }}
+        </span>
+        <span class="bible-stat-dot" aria-hidden="true" />
+        <span class="bible-stat bible-stat-style" :class="{ 'is-done': stats.styleOk }">
+          文风公约 {{ stats.styleOk ? '已填' : '待补充' }}
+        </span>
+      </div>
     </header>
 
     <n-scrollbar class="bible-scroll">
@@ -482,27 +486,25 @@ onMounted(() => {
 
 .bible-hero {
   flex-shrink: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 14px;
-  padding: 14px 2px 12px;
+  padding: 12px 2px 12px;
   border-bottom: 1px solid rgba(15, 23, 42, 0.07);
 }
 
-.bible-hero-main {
-  min-width: 0;
-  flex: 1;
-}
-
 .bible-title-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
+  gap: 8px;
   margin-bottom: 8px;
 }
 
+.bible-hero-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .bible-title {
   margin: 0;
   font-size: 17px;
@@ -521,11 +523,10 @@ onMounted(() => {
 }
 
 .bible-lead {
-  margin: 0 0 12px;
+  margin: 0 0 10px;
   font-size: 12px;
   line-height: 1.65;
   color: #475569;
-  max-width: 52em;
 }
 
 .bible-lead strong {
@@ -535,12 +536,12 @@ onMounted(() => {
 
 .bible-roles {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px 12px;
-  margin-bottom: 12px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px;
+  margin-bottom: 10px;
 }
 
-@media (max-width: 520px) {
+@media (max-width: 320px) {
   .bible-roles {
     grid-template-columns: 1fr;
   }
@@ -603,28 +604,18 @@ onMounted(() => {
   color: #15803d;
 }
 
-.bible-hero-actions {
-  flex-shrink: 0;
-  padding-top: 2px;
-}
-
 .bible-scroll {
   flex: 1;
   min-height: 0;
 }
 
 .bible-form {
-  padding: 14px 2px 24px;
+  /* padding: 8px 16px 16px; */
   display: flex;
   flex-direction: column;
   gap: 14px;
 }
 
-.bible-scroll {
-  flex: 1;
-  min-height: 0;
-}
-
 .bible-footer {
   flex-shrink: 0;
   padding: 12px 16px;
@@ -632,13 +623,6 @@ onMounted(() => {
   background: var(--app-surface-subtle);
 }
 
-.bible-form {
-  padding: 8px 16px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
 .bible-json-input :deep(textarea) {
   font-family: 'Consolas', 'Monaco', monospace;
   font-size: 12px;
diff --git a/frontend/src/components/workbench/ForeshadowLedgerPanel.vue b/frontend/src/components/workbench/ForeshadowLedgerPanel.vue
index bb75712c5..573da3fe6 100644
--- a/frontend/src/components/workbench/ForeshadowLedgerPanel.vue
+++ b/frontend/src/components/workbench/ForeshadowLedgerPanel.vue
@@ -4,19 +4,19 @@
       与<strong>中栏 · 托管撰稿 · 监控大盘</strong>中的伏笔统计、列表使用<strong>同一套账本数据</strong>（foreshadow-ledger）；此处为编辑与核销入口。
     </n-alert>
     <header class="panel-header">
-      <div class="header-main">
-        <div class="title-row">
-          <h3 class="panel-title">伏笔账本</h3>
-          <n-tag size="small" round :bordered="false">Foreshadow Ledger</n-tag>
+      <!-- 标题行：title + badge + 按钮同行 -->
+      <div class="title-row">
+        <h3 class="panel-title">伏笔账本</h3>
+        <n-tag size="small" round :bordered="false">Foreshadow Ledger</n-tag>
+        <div class="header-actions">
+          <n-button size="small" secondary @click="openCreateModal">+ 添加伏笔</n-button>
+          <n-button size="small" type="primary" :loading="loading" @click="load">刷新</n-button>
         </div>
-        <p class="panel-lead">
-          <strong>写</strong>：人工埋设或章后 NLP 异步入库；<strong>读</strong>：供「本章建议」向量/启发式检索与上下文全局池，监控大盘统计回收率。
-        </p>
       </div>
-      <n-space class="header-actions" :size="8" align="center">
-        <n-button size="small" secondary @click="openCreateModal">+ 添加伏笔</n-button>
-        <n-button size="small" type="primary" :loading="loading" @click="load">刷新</n-button>
-      </n-space>
+      <!-- 说明文字 -->
+      <p class="panel-lead">
+        <strong>写</strong>：人工埋设或章后 NLP 异步入库；<strong>读</strong>：供「本章建议」向量/启发式检索与上下文全局池，监控大盘统计回收率。
+      </p>
     </header>
 
     <div class="panel-tabs">
@@ -49,7 +49,7 @@
                 <n-input v-model:value="matchAnchors[idx].value" placeholder="关键词" style="flex:1" size="small" />
                 <n-button size="tiny" text @click="matchAnchors.splice(idx, 1)">✕</n-button>
               </n-space>
-              <n-button size="tiny" dashed secondary @click="matchAnchors.push({ key: '', value: '' })">+ 添加感官</n-button>
+              <n-button size="tiny" dashed @click="matchAnchors.push({ key: '', value: '' })">+ 添加感官</n-button>
 
               <template v-if="matchResult !== null">
                 <n-divider style="margin:4px 0" />
@@ -186,7 +186,7 @@
                 <n-input v-model:value="anchorRows[idx].value" placeholder="具体描述" style="flex:1" />
                 <n-button size="tiny" secondary @click="removeAnchor(idx)">✕</n-button>
               </n-space>
-              <n-button size="tiny" secondary dashed @click="addAnchor">+ 添加锚点</n-button>
+              <n-button size="tiny" dashed @click="addAnchor">+ 添加锚点</n-button>
             </n-space>
           </n-form-item>
         </n-space>
@@ -394,18 +394,9 @@ watch(foreshadowTick, () => {
   padding: 16px 20px 14px;
   border-bottom: 1px solid var(--aitext-split-border);
   background: var(--app-surface);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-.header-main {
-  flex: 1;
-  min-width: 0;
-}
-
 .title-row {
   display: flex;
   align-items: center;
@@ -431,6 +422,10 @@ watch(foreshadowTick, () => {
 }
 
 .header-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   flex-shrink: 0;
 }
 
diff --git a/frontend/src/components/workbench/HolographicChroniclesPanel.vue b/frontend/src/components/workbench/HolographicChroniclesPanel.vue
index a438ba168..66df556df 100644
--- a/frontend/src/components/workbench/HolographicChroniclesPanel.vue
+++ b/frontend/src/components/workbench/HolographicChroniclesPanel.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="hc-panel">
     <header class="hc-head">
-      <div>
+      <!-- 标题行：title + 按钮同行 -->
+      <div class="hc-title-row">
         <h3 class="hc-title">全息编年史</h3>
-        <p class="hc-lead">
-          中轴为章进度锚点：<strong>左</strong>里世界剧情时间，<strong>右</strong>表世界快照（存档）。
-          悬浮右侧快照节点时高亮本行左侧剧情；回滚将删除快照未包含的章节（不可撤销）。
-        </p>
+        <n-button size="small" type="primary" :loading="loading" @click="load">刷新</n-button>
       </div>
-      <n-button size="small" type="primary" :loading="loading" @click="load">刷新</n-button>
+      <!-- 说明文字 -->
+      <p class="hc-lead">
+        中轴为章进度锚点：<strong>左</strong>里世界剧情时间，<strong>右</strong>表世界快照（存档）。
+        悬浮右侧快照节点时高亮本行左侧剧情；回滚将删除快照未包含的章节（不可撤销）。
+      </p>
     </header>
 
     <n-alert v-if="noteText" type="default" :show-icon="true" class="hc-note" style="font-size: 11px">
@@ -199,16 +201,19 @@ watch(chroniclesTick, () => {
 }
 
 .hc-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
   margin-bottom: 14px;
   flex-shrink: 0;
 }
 
+.hc-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
 .hc-title {
-  margin: 0 0 8px;
+  margin: 0;
   font-size: 18px;
   font-weight: 700;
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
@@ -217,12 +222,15 @@ watch(chroniclesTick, () => {
   background-clip: text;
 }
 
+.hc-title-row .n-button {
+  margin-left: auto;
+}
+
 .hc-lead {
   margin: 0;
   font-size: 12px;
   line-height: 1.6;
   color: var(--n-text-color-3);
-  max-width: 540px;
 }
 
 .hc-note {
diff --git a/frontend/src/components/workbench/WorkArea.vue b/frontend/src/components/workbench/WorkArea.vue
index 64569f8fe..ccf9ef128 100644
--- a/frontend/src/components/workbench/WorkArea.vue
+++ b/frontend/src/components/workbench/WorkArea.vue
@@ -157,6 +157,12 @@
             @chapter-content-update="handleChapterContentUpdate"
           />
         </div>
+        <!-- 监控说明：独立区域，避免被折叠遮挡 -->
+        <n-alert type="default" :show-icon="false" class="monitor-copy-hint">
+          <n-text depth="3" style="font-size: 12px; line-height: 1.5">
+            <strong>监控说明</strong>：「文风」卡片为按<strong>角色声线</strong>的偏离监测。全书<strong>作者文风指纹</strong>与侧栏「剧本基建」规划为不同能力，与此处互补。
+          </n-text>
+        </n-alert>
         <div class="managed-monitor">
           <AutopilotDashboard :novel-id="slug" />
         </div>
@@ -1141,12 +1147,45 @@ defineExpose({ ensureAssistedMode })
   min-height: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow-y: auto; /* 整体垂直滚动 */
+  /* 滚动条默认隐藏，悬停时显示 */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.managed-stack:hover {
+  scrollbar-color: var(--n-scrollbar-color, rgba(0,0,0,0.25)) transparent;
+}
+
+/* WebKit 浏览器滚动条样式 */
+.managed-stack::-webkit-scrollbar {
+  width: 6px;
+}
+
+.managed-stack::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.managed-stack::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.managed-stack:hover::-webkit-scrollbar-thumb {
+  background: var(--n-scrollbar-color, rgba(0,0,0,0.25));
 }
 
 .managed-daemon-hint {
   flex-shrink: 0;
-  margin: 0 16px 10px;
+  margin: 8px 8px 8px 8px;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+/* 监控说明：独立区域，避免被折叠遮挡 */
+.monitor-copy-hint {
+  flex-shrink: 0;
+  /* margin: 0 8px 8px; */
   font-size: 12px;
   line-height: 1.55;
 }
@@ -1163,18 +1202,14 @@ defineExpose({ ensureAssistedMode })
 }
 
 .managed-monitor {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
+  flex-shrink: 0; /* 高度由内容撑开，不压缩 */
   display: flex;
   flex-direction: column;
   background: var(--app-surface);
 }
 
 .managed-monitor :deep(.autopilot-dashboard) {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+  /* 移除 flex:1 和 overflow-y:auto，高度由内容自然撑开 */
 }
 
 .work-header {
@@ -1202,7 +1237,7 @@ defineExpose({ ensureAssistedMode })
 }
 
 .autopilot-container {
-  padding: 16px 20px;
+  padding: 0px 8px 8px 8px;
   background: linear-gradient(to bottom, var(--app-surface) 0%, rgba(24, 160, 88, 0.02) 100%);
   border-bottom: 1px solid var(--aitext-split-border);
 }
diff --git a/frontend/src/views/Workbench.vue b/frontend/src/views/Workbench.vue
index 8fe2bf86f..6c69023ad 100644
--- a/frontend/src/views/Workbench.vue
+++ b/frontend/src/views/Workbench.vue
@@ -4,49 +4,80 @@
 
     <n-spin :show="pageLoading" class="workbench-spin" description="加载工作台…">
       <div class="workbench-inner">
-        <n-split direction="horizontal" :min="0.12" :max="0.30" :default-size="0.18">
-          <template #1>
-            <ChapterList
-              ref="chapterListRef"
-              :slug="slug"
-              :chapters="chapters"
-              :current-chapter-id="currentChapterId"
-              @select="onSidebarChapterSelect"
-              @back="goHome"
-              @refresh="handleChapterUpdated"
-              @plan-act="handlePlanAct"
-            />
-          </template>
-
-          <template #2>
-            <n-split direction="horizontal" :min="0.40" :max="0.75" :default-size="0.60">
-              <template #1>
-                <WorkArea
-                  ref="workAreaRef"
-                  :slug="slug"
-                  :book-title="bookTitle"
-                  :chapters="chapters"
-                  :target-words-per-chapter="targetWordsPerChapter"
-                  :current-chapter-id="currentChapterId"
-                  :chapter-content="chapterContent"
-                  :chapter-loading="chapterLoading"
-                  @set-right-panel="setRightPanel"
-                  @chapter-updated="handleChapterUpdated"
-                />
-              </template>
-
-              <template #2>
-                <SettingsPanel
-                  :slug="slug"
-                  :current-panel="rightPanel"
-                  :bible-key="biblePanelKey"
-                  :current-chapter="currentChapter"
-                  @update:current-panel="onSettingsPanelChange"
-                />
-              </template>
-            </n-split>
-          </template>
-        </n-split>
+
+        <!-- 左侧面板 -->
+        <div
+          class="side-pane left-pane"
+          :style="{ width: leftCollapsed ? '0px' : leftWidth + 'px' }"
+        >
+          <ChapterList
+            ref="chapterListRef"
+            :slug="slug"
+            :chapters="chapters"
+            :current-chapter-id="currentChapterId"
+            @select="onSidebarChapterSelect"
+            @back="goHome"
+            @refresh="handleChapterUpdated"
+            @plan-act="handlePlanAct"
+          />
+        </div>
+
+        <!-- 左侧分割线 + 折叠按钮 -->
+        <div
+          class="divider left-divider"
+          @mousedown="startDragLeft"
+        >
+          <button
+            class="collapse-btn"
+            @mousedown.stop
+            @click="leftCollapsed = !leftCollapsed"
+            :title="leftCollapsed ? '展开左栏' : '收起左栏'"
+          >{{ leftCollapsed ? '›' : '‹' }}</button>
+        </div>
+
+        <!-- 中间主区域 -->
+        <div class="main-pane">
+          <WorkArea
+            ref="workAreaRef"
+            :slug="slug"
+            :book-title="bookTitle"
+            :chapters="chapters"
+            :target-words-per-chapter="targetWordsPerChapter"
+            :current-chapter-id="currentChapterId"
+            :chapter-content="chapterContent"
+            :chapter-loading="chapterLoading"
+            @set-right-panel="setRightPanel"
+            @chapter-updated="handleChapterUpdated"
+          />
+        </div>
+
+        <!-- 右侧分割线 + 折叠按钮 -->
+        <div
+          class="divider right-divider"
+          @mousedown="startDragRight"
+        >
+          <button
+            class="collapse-btn"
+            @mousedown.stop
+            @click="rightCollapsed = !rightCollapsed"
+            :title="rightCollapsed ? '展开右栏' : '收起右栏'"
+          >{{ rightCollapsed ? '‹' : '›' }}</button>
+        </div>
+
+        <!-- 右侧面板 -->
+        <div
+          class="side-pane right-pane"
+          :style="{ width: rightCollapsed ? '0px' : rightWidth + 'px' }"
+        >
+          <SettingsPanel
+            :slug="slug"
+            :current-panel="rightPanel"
+            :bible-key="biblePanelKey"
+            :current-chapter="currentChapter"
+            @update:current-panel="onSettingsPanelChange"
+          />
+        </div>
+
       </div>
     </n-spin>
 
@@ -68,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, computed, ref, watch, type ComponentPublicInstance } from 'vue'
+import { defineAsyncComponent, onMounted, onUnmounted, computed, ref, watch, type ComponentPublicInstance } from 'vue'
 import { useRoute } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import { useWorkbench } from '../composables/useWorkbench'
@@ -94,6 +125,61 @@ const slug = route.params.slug as string
 const chapterListRef = ref<ComponentPublicInstance<{ refreshStoryTree: () => void }> | null>(null)
 const workAreaRef = ref<ComponentPublicInstance<{ ensureAssistedMode: () => void }> | null>(null)
 
+// ━━━ 侧栏宽度 & 折叠 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+const LEFT_MIN = 238
+const LEFT_MAX = 600
+const RIGHT_MIN = 260
+const RIGHT_MAX = 520
+
+const leftWidth = ref(388)
+const rightWidth = ref(512)
+const leftCollapsed = ref(false)
+const rightCollapsed = ref(false)
+
+// 拖拽左侧分割线
+let dragging: 'left' | 'right' | null = null
+let dragStartX = 0
+let dragStartWidth = 0
+
+function startDragLeft(e: MouseEvent) {
+  dragging = 'left'
+  dragStartX = e.clientX
+  dragStartWidth = leftWidth.value
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function startDragRight(e: MouseEvent) {
+  dragging = 'right'
+  dragStartX = e.clientX
+  dragStartWidth = rightWidth.value
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+function onDrag(e: MouseEvent) {
+  if (dragging === 'left') {
+    const delta = e.clientX - dragStartX
+    const next = Math.min(LEFT_MAX, Math.max(LEFT_MIN, dragStartWidth + delta))
+    leftWidth.value = next
+    if (leftCollapsed.value) leftCollapsed.value = false
+  } else if (dragging === 'right') {
+    const delta = dragStartX - e.clientX   // 右侧：向左拖变大
+    const next = Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, dragStartWidth + delta))
+    rightWidth.value = next
+    if (rightCollapsed.value) rightCollapsed.value = false
+  }
+}
+
+function stopDrag() {
+  dragging = null
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+onUnmounted(stopDrag)
+
+// ━━━ Workbench 逻辑 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 async function onSidebarChapterSelect(chapterId: number, title = '') {
   await handleChapterSelect(chapterId, title)
   workAreaRef.value?.ensureAssistedMode?.()
@@ -196,21 +282,94 @@ watch(
 }
 
 .workbench-spin :deep(.n-spin-content) {
-  min-height: 100%;
   height: 100%;
+  min-height: 100%;
 }
 
 .workbench-inner {
   height: 100%;
   min-height: 0;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
 }
 
-.workbench-inner :deep(.n-split) {
-  height: 100%;
+/* ━━━ 侧面板 ━━━ */
+.side-pane {
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+  min-width: 0;
 }
 
-.workbench-inner :deep(.n-split-pane-1) {
-  min-height: 0;
+.left-pane  { border-right: 1px solid var(--aitext-split-border, #e4e4e4); }
+.right-pane { border-left:  1px solid var(--aitext-split-border, #e4e4e4); }
+
+/* 折叠时去掉边框避免 1px 残留 */
+.left-pane[style*="width: 0"]  { border-right: none; }
+.right-pane[style*="width: 0"] { border-left: none; }
+
+/* ━━━ 中间区 ━━━ */
+.main-pane {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
 }
+
+/* ━━━ 分割线 ━━━ */
+.divider {
+  position: relative;
+  flex-shrink: 0;
+  width: 5px;
+  background: transparent;
+  cursor: col-resize;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.divider::after {
+  content: '';
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 2px;
+  width: 1px;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.divider:hover::after {
+  background: var(--n-primary-color, #18a058);
+}
+
+/* ━━━ 折叠按钮 ━━━ */
+.collapse-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+  width: 16px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--aitext-split-border, #ddd);
+  border-radius: 4px;
+  background: var(--app-surface, #fff);
+  cursor: pointer;
+  font-size: 12px;
+  color: #aaa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  user-select: none;
+  line-height: 1;
+}
+
+.collapse-btn:hover {
+  color: var(--n-primary-color, #18a058);
+  background: #f0faf5;
+  border-color: var(--n-primary-color, #18a058);
+}
 </style>