From 4c42260a2902d6ad2cb433824db102d4b0f3f545 Mon Sep 17 00:00:00 2001
From: wsb1224 <shuobo1224@qq.com>
Date: Fri, 31 Jul 2026 17:20:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4UI=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../poster/workspace/PosterActionBar.vue      |  47 +-
 .../poster/workspace/PosterConfigRail.vue     |  26 +-
 .../poster/workspace/PosterCreativePanel.vue  |  11 +-
 .../poster/workspace/PosterInspector.vue      |  32 +-
 .../poster/workspace/PosterProductPanel.vue   |   7 +
 .../poster/workspace/PosterSourcePanel.vue    |  16 +-
 .../poster/workspace/PosterStage.vue          |  32 +-
 .../poster/workspace/PosterToolbar.vue        |  52 +-
 frontend/src/pages/PosterPage.vue             | 157 +++--
 frontend/src/pages/PptPage.vue                | 448 +++++++++-----
 .../pages/components/ppt/PptDataReview.vue    | 557 +++++++-----------
 .../pages/components/ppt/PptWorkspaceNav.vue  |  68 ++-
 12 files changed, 847 insertions(+), 606 deletions(-)

diff --git a/frontend/src/components/poster/workspace/PosterActionBar.vue b/frontend/src/components/poster/workspace/PosterActionBar.vue
index 72e8e87..f534c6a 100644
--- a/frontend/src/components/poster/workspace/PosterActionBar.vue
+++ b/frontend/src/components/poster/workspace/PosterActionBar.vue
@@ -80,20 +80,21 @@ const isGenerating = computed(() =>
 
 const canAct = computed(() => {
   if (isGenerating.value) return false
+  if (props.actionState === 'generate-poster' && !props.canGenerate) return false
   return props.actionState !== 'generating'
 })
 </script>
 
 <style scoped>
 .poster-action-bar {
-  height: 56px;
-  padding: 0 20px;
+  min-height: 64px;
+  padding: 10px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   border-top: 1px solid var(--poster-border);
-  background: #fff;
+  background: rgb(255 255 255 / 97%);
   flex-shrink: 0;
 }
 
@@ -119,15 +120,15 @@ const canAct = computed(() => {
 }
 
 .dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   background: #e5e7eb;
   transition: background 0.2s;
 }
 
 .dot.done {
-  background: #16a34a;
+  background: var(--poster-accent);
 }
 
 .action-buttons {
@@ -137,13 +138,45 @@ const canAct = computed(() => {
   flex-shrink: 0;
 }
 
+.action-buttons :deep(.el-button) {
+  min-height: 38px;
+  border-radius: 10px;
+}
+
+.action-buttons :deep(.el-button--primary) {
+  min-width: 112px;
+  --el-button-bg-color: var(--poster-accent);
+  --el-button-border-color: var(--poster-accent);
+  --el-button-hover-bg-color: var(--poster-accent-hover);
+  --el-button-hover-border-color: var(--poster-accent-hover);
+}
+
 @media (max-width: 767px) {
   .status-text {
     display: none;
   }
 
   .poster-action-bar {
-    padding: 0 12px;
+    min-height: 68px;
+    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
+  }
+
+  .progress-dots {
+    display: none;
+  }
+
+  .action-status {
+    display: none;
+  }
+
+  .action-buttons {
+    width: 100%;
+    justify-content: flex-end;
+    overflow-x: auto;
+  }
+
+  .action-buttons :deep(.el-button--primary) {
+    flex: 1;
   }
 }
 </style>
diff --git a/frontend/src/components/poster/workspace/PosterConfigRail.vue b/frontend/src/components/poster/workspace/PosterConfigRail.vue
index a2e2976..b61090e 100644
--- a/frontend/src/components/poster/workspace/PosterConfigRail.vue
+++ b/frontend/src/components/poster/workspace/PosterConfigRail.vue
@@ -2,6 +2,7 @@
   <aside class="config-rail">
     <div class="rail-scroll">
       <PosterProductPanel
+        ref="productPanelRef"
         :product-id="draft.productId"
         :product-source-type="draft.productSourceType"
         :product-source-id="draft.productSourceId"
@@ -13,6 +14,7 @@
       <el-divider class="panel-divider" />
 
       <PosterSourcePanel
+        ref="sourcePanelRef"
         :product-id="draft.productId"
         :product-source-type="draft.productSourceType"
         :product-source-id="draft.productSourceId"
@@ -32,6 +34,7 @@
       <el-divider class="panel-divider" />
 
       <PosterCreativePanel
+        ref="creativePanelRef"
         :scenario="draft.scenario"
         :output-mode="draft.outputMode"
         :export-size="draft.exportSize"
@@ -54,12 +57,17 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import type { PosterDraft } from '@/composables/usePosterWorkspace'
 import PosterProductPanel from './PosterProductPanel.vue'
 import PosterSourcePanel from './PosterSourcePanel.vue'
 import PosterCreativePanel from './PosterCreativePanel.vue'
 import PosterReferencePanel from './PosterReferencePanel.vue'
 
+const productPanelRef = ref<InstanceType<typeof PosterProductPanel> | null>(null)
+const sourcePanelRef = ref<InstanceType<typeof PosterSourcePanel> | null>(null)
+const creativePanelRef = ref<InstanceType<typeof PosterCreativePanel> | null>(null)
+
 const props = defineProps<{ draft: PosterDraft }>()
 const emit = defineEmits<{ 'update:draft': [patch: Partial<PosterDraft>] }>()
 
@@ -96,6 +104,13 @@ function onProductSourceUpdate(source: {
     } : {}),
   })
 }
+
+defineExpose({
+  openProductSelector: () => productPanelRef.value?.openSelector(),
+  openSourceUpload: () => sourcePanelRef.value?.openUpload(),
+  openSourceReview: () => sourcePanelRef.value?.openReview(),
+  openTemplates: () => creativePanelRef.value?.openTemplates(),
+})
 </script>
 
 <style scoped>
@@ -103,22 +118,25 @@ function onProductSourceUpdate(source: {
   width: 300px;
   min-width: 280px;
   max-width: 320px;
-  border-right: 1px solid var(--poster-border);
-  background: #fafbfc;
+  border: 1px solid var(--poster-border);
+  border-radius: var(--poster-radius);
+  background: var(--poster-surface);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  box-shadow: var(--poster-shadow);
 }
 
 .rail-scroll {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 16px;
+  padding: 18px;
 }
 
 .panel-divider {
-  margin: 12px 0;
+  margin: 14px 0;
+  border-color: #edf1ee;
 }
 
 @media (max-width: 1023px) {
diff --git a/frontend/src/components/poster/workspace/PosterCreativePanel.vue b/frontend/src/components/poster/workspace/PosterCreativePanel.vue
index 68834eb..561698a 100644
--- a/frontend/src/components/poster/workspace/PosterCreativePanel.vue
+++ b/frontend/src/components/poster/workspace/PosterCreativePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="creative-panel">
+  <div ref="panelRoot" class="creative-panel">
     <div class="panel-header" @click="expanded = !expanded">
       <div class="header-left">
         <el-icon :size="16"><Brush /></el-icon>
@@ -200,6 +200,15 @@ const templates = ref<any[]>([])
 const showCustom = ref(false)
 const customW = ref(1024)
 const customH = ref(1792)
+const panelRoot = ref<HTMLElement | null>(null)
+
+function openTemplates() {
+  expanded.value = true
+  panelRoot.value?.scrollIntoView({ block: 'start' })
+  if (templates.value.length > 6) drawerVisible.value = true
+}
+
+defineExpose({ openTemplates })
 
 // ── 尺寸预设 ──────────────────────────
 // ── 尺寸预设（根据输出模式切换）──────────
diff --git a/frontend/src/components/poster/workspace/PosterInspector.vue b/frontend/src/components/poster/workspace/PosterInspector.vue
index 95abdd9..42f8db1 100644
--- a/frontend/src/components/poster/workspace/PosterInspector.vue
+++ b/frontend/src/components/poster/workspace/PosterInspector.vue
@@ -18,7 +18,7 @@
           @update:copy-content="$emit('update:draft', { copyContent: $event })"
           @update:ai-raw-content="$emit('update:draft', { aiRawContent: $event })"
           @update:compliance="$emit('update:draft', {
-            complianceStatus: $event.status,
+            complianceStatus: normalizeComplianceStatus($event.status),
             complianceIssues: $event.issues,
             complianceRevision: $event.revision,
           })"
@@ -52,6 +52,17 @@ defineProps<{ draft: PosterDraft }>()
 defineEmits<{ 'update:draft': [patch: Partial<PosterDraft>] }>()
 
 const activeTab = ref('copy')
+
+function openTab(tab: 'copy' | 'layout' | 'delivery') {
+  activeTab.value = tab
+}
+
+defineExpose({ openTab })
+
+function normalizeComplianceStatus(status: string): PosterDraft['complianceStatus'] {
+  if (status === 'pass' || status === 'warn' || status === 'block') return status
+  return 'unchecked'
+}
 </script>
 
 <style scoped>
@@ -59,11 +70,13 @@ const activeTab = ref('copy')
   width: 320px;
   min-width: 300px;
   max-width: 360px;
-  border-left: 1px solid var(--poster-border);
-  background: #fff;
+  border: 1px solid var(--poster-border);
+  border-radius: var(--poster-radius);
+  background: var(--poster-surface);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  box-shadow: var(--poster-shadow);
 }
 
 .inspector-tabs {
@@ -76,14 +89,23 @@ const activeTab = ref('copy')
 .inspector-tabs :deep(.el-tabs__header) {
   margin: 0;
   padding: 0 16px;
-  background: #fafbfc;
+  background: #f8faf8;
   border-bottom: 1px solid var(--poster-border);
 }
 
 .inspector-tabs :deep(.el-tabs__content) {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: 18px;
+}
+
+.inspector-tabs :deep(.el-tabs__item.is-active) {
+  color: var(--poster-accent);
+  font-weight: 600;
+}
+
+.inspector-tabs :deep(.el-tabs__active-bar) {
+  background-color: var(--poster-accent);
 }
 
 .inspector-tabs :deep(.el-tab-pane) {
diff --git a/frontend/src/components/poster/workspace/PosterProductPanel.vue b/frontend/src/components/poster/workspace/PosterProductPanel.vue
index 627f240..ad21433 100644
--- a/frontend/src/components/poster/workspace/PosterProductPanel.vue
+++ b/frontend/src/components/poster/workspace/PosterProductPanel.vue
@@ -161,6 +161,13 @@ const materialDialogVisible = ref(false)
 const editingMaterial = ref<any | null>(null)
 const manualUploadEnabled = ref(true)
 
+function openSelector() {
+  expanded.value = true
+  drawerVisible.value = true
+}
+
+defineExpose({ openSelector })
+
 const typeMap: Record<string, string> = {
   savings: '储蓄',
   ci: '重疾',
diff --git a/frontend/src/components/poster/workspace/PosterSourcePanel.vue b/frontend/src/components/poster/workspace/PosterSourcePanel.vue
index a367d57..c74e3f4 100644
--- a/frontend/src/components/poster/workspace/PosterSourcePanel.vue
+++ b/frontend/src/components/poster/workspace/PosterSourcePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="source-panel">
+  <div ref="panelRoot" class="source-panel">
     <div class="panel-header" @click="expanded = !expanded">
       <div class="header-left">
         <el-icon :size="16"><Document /></el-icon>
@@ -166,6 +166,20 @@ const expanded = ref(true)
 const editingFields = ref(false)
 const confirming = ref(false)
 const localPassword = ref('')
+const panelRoot = ref<HTMLElement | null>(null)
+
+function openUpload() {
+  expanded.value = true
+  panelRoot.value?.scrollIntoView({ block: 'start' })
+}
+
+function openReview() {
+  expanded.value = true
+  editingFields.value = true
+  panelRoot.value?.scrollIntoView({ block: 'start' })
+}
+
+defineExpose({ openUpload, openReview })
 
 const localFields = ref({
   age: null, gender: null, currency: null, sum_assured: null,
diff --git a/frontend/src/components/poster/workspace/PosterStage.vue b/frontend/src/components/poster/workspace/PosterStage.vue
index 47ddd7c..07ed3ff 100644
--- a/frontend/src/components/poster/workspace/PosterStage.vue
+++ b/frontend/src/components/poster/workspace/PosterStage.vue
@@ -118,7 +118,14 @@ const canvasStyle = computed(() => {
   justify-content: center;
   overflow: hidden;
   position: relative;
-  background: #f5f6f8;
+  border: 1px solid var(--poster-border);
+  border-radius: var(--poster-radius);
+  background:
+    linear-gradient(90deg, rgb(23 107 77 / 3%) 1px, transparent 1px),
+    linear-gradient(rgb(23 107 77 / 3%) 1px, transparent 1px),
+    #edf2ef;
+  background-size: 24px 24px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
 }
 
 .stage-toolbar {
@@ -126,18 +133,34 @@ const canvasStyle = computed(() => {
   top: 12px;
   right: 12px;
   z-index: 10;
+  padding: 4px;
+  border: 1px solid var(--poster-border);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 92%);
+  box-shadow: 0 8px 22px rgb(24 61 44 / 10%);
 }
 
 .stage-canvas {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: 32px;
   width: 100%;
   height: 100%;
   overflow: auto;
 }
 
+@media (max-width: 767px) {
+  .stage-canvas {
+    padding: 18px 10px 24px;
+  }
+
+  .stage-toolbar {
+    top: 8px;
+    right: 8px;
+  }
+}
+
 /* ── 加载状态 ──────────────────────── */
 .canvas-loading {
   position: absolute;
@@ -200,3 +223,8 @@ const canvasStyle = computed(() => {
   box-shadow: 0 4px 16px rgb(15 23 42 / 12%);
 }
 </style>
+  padding: 4px;
+  border: 1px solid var(--poster-border);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 92%);
+  box-shadow: 0 8px 22px rgb(24 61 44 / 10%);
diff --git a/frontend/src/components/poster/workspace/PosterToolbar.vue b/frontend/src/components/poster/workspace/PosterToolbar.vue
index e94a752..da38147 100644
--- a/frontend/src/components/poster/workspace/PosterToolbar.vue
+++ b/frontend/src/components/poster/workspace/PosterToolbar.vue
@@ -78,14 +78,15 @@ function onCommand(cmd: string) {
 
 <style scoped>
 .poster-toolbar {
-  height: 56px;
-  padding: 0 20px;
+  height: 68px;
+  min-height: 68px;
+  padding: 0 22px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   border-bottom: 1px solid var(--poster-border);
-  background: #fff;
+  background: rgb(255 255 255 / 97%);
   flex-shrink: 0;
 }
 
@@ -102,8 +103,9 @@ function onCommand(cmd: string) {
 }
 
 .title-input :deep(.el-input__inner) {
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 17px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
   color: var(--poster-text);
   border: none;
   padding: 0;
@@ -113,12 +115,12 @@ function onCommand(cmd: string) {
 .title-input :deep(.el-input__wrapper) {
   box-shadow: none !important;
   padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: 9px;
 }
 
 .title-input :deep(.el-input__wrapper:hover),
 .title-input :deep(.el-input__wrapper:focus-within) {
-  background: #f5f7fa;
+  background: var(--poster-accent-light);
 }
 
 .save-indicator {
@@ -152,4 +154,40 @@ function onCommand(cmd: string) {
   gap: 4px;
   flex-shrink: 0;
 }
+
+.toolbar-right :deep(.el-button) {
+  min-height: 36px;
+  border-radius: 10px;
+  color: var(--poster-muted);
+}
+
+.toolbar-right :deep(.el-button:hover) {
+  color: var(--poster-accent);
+  background: var(--poster-accent-light);
+}
+
+@media (max-width: 767px) {
+  .poster-toolbar {
+    height: 56px;
+    min-height: 56px;
+    padding: 0 12px;
+  }
+
+  .title-input {
+    max-width: min(48vw, 220px);
+  }
+
+  .title-input :deep(.el-input__inner) {
+    font-size: 15px;
+  }
+
+  .toolbar-right :deep(.el-button span) {
+    display: none;
+  }
+
+  .toolbar-right :deep(.el-button) {
+    width: 36px;
+    padding: 8px;
+  }
+}
 </style>
diff --git a/frontend/src/pages/PosterPage.vue b/frontend/src/pages/PosterPage.vue
index 8982d0d..6be1135 100644
--- a/frontend/src/pages/PosterPage.vue
+++ b/frontend/src/pages/PosterPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="poster-workspace" :class="{ 'mobile-mode': isMobile }">
+  <div ref="workspaceRef" class="poster-workspace" :class="{ 'mobile-mode': isMobile }">
     <!-- 顶部工具栏 -->
     <PosterToolbar
       :title="posterTitle || ws.draft.value.productName || '未命名海报'"
@@ -23,6 +23,7 @@
 
       <!-- 左栏：配置区 -->
       <PosterConfigRail
+        ref="configRailRef"
         v-show="!isMobile || mobileTab === 'config'"
         :draft="ws.draft.value"
         @update:draft="onDraftUpdate"
@@ -41,7 +42,9 @@
 
       <!-- 右栏：文案与发布（三栏模式直接显示，双栏模式隐藏） -->
       <PosterInspector
-        v-if="!hideInspector"
+        v-if="isMobile || !hideInspector"
+        ref="inlineInspectorRef"
+        v-show="!isMobile || mobileTab === 'inspector'"
         :draft="ws.draft.value"
         @update:draft="onDraftUpdate"
       />
@@ -67,6 +70,7 @@
       :z-index="100"
     >
       <PosterInspector
+        ref="drawerInspectorRef"
         :draft="ws.draft.value"
         @update:draft="onDraftUpdate"
       />
@@ -113,26 +117,33 @@ const router = useRouter()
 const route = useRoute()
 const ws = usePosterWorkspace()
 const { isMobile } = useMobile()
+const workspaceRef = ref<HTMLElement | null>(null)
 const stageRef = ref<InstanceType<typeof PosterStage> | null>(null)
+const configRailRef = ref<InstanceType<typeof PosterConfigRail> | null>(null)
+const inlineInspectorRef = ref<InstanceType<typeof PosterInspector> | null>(null)
+const drawerInspectorRef = ref<InstanceType<typeof PosterInspector> | null>(null)
 
 // 独立标题（不污染 productName）
 const posterTitle = ref('')
 
 const showTasksDrawer = ref(false)
 const showInspectorDrawer = ref(false)
-const mobileTab = ref<'config' | 'stage' | 'inspector'>('stage')
+const mobileTab = ref<'config' | 'stage' | 'inspector'>('config')
 
 // ── 布局模式 ─────────────────────────────
-const workspaceWidth = ref(window.innerWidth - 220)
+const workspaceWidth = ref(0)
+let workspaceObserver: ResizeObserver | null = null
 
-function updateWorkspaceWidth() {
-  workspaceWidth.value = window.innerWidth - 220
-}
+onMounted(() => {
+  if (!workspaceRef.value) return
+  workspaceWidth.value = workspaceRef.value.clientWidth
+  workspaceObserver = new ResizeObserver(entries => {
+    workspaceWidth.value = entries[0]?.contentRect.width || workspaceRef.value?.clientWidth || 0
+  })
+  workspaceObserver.observe(workspaceRef.value)
+})
 
-onMounted(() => window.addEventListener('resize', updateWorkspaceWidth))
-onBeforeUnmount(() => window.removeEventListener('resize', updateWorkspaceWidth))
-
-const hideInspector = computed(() => workspaceWidth.value < 900)
+const hideInspector = computed(() => workspaceWidth.value > 0 && workspaceWidth.value < 900)
 
 // ── 草稿更新 ─────────────────────────────
 function onDraftUpdate(patch: Record<string, any>) {
@@ -160,53 +171,64 @@ async function onAction() {
 
   switch (state) {
     case 'select-product':
-      // 移动端切到配置 tab
       if (isMobile.value) mobileTab.value = 'config'
-      // 产品面板内部的"选择产品"按钮会打开抽屉
-      ElMessage.info('请点击左栏"产品资料"中的"选择产品"按钮')
+      await nextTick()
+      configRailRef.value?.openProductSelector()
       break
 
     case 'upload-data':
       if (isMobile.value) mobileTab.value = 'config'
-      ElMessage.info('请在左栏"计划书与数据"中上传计划书')
+      await nextTick()
+      configRailRef.value?.openSourceUpload()
       break
 
     case 'confirm-data':
       if (isMobile.value) mobileTab.value = 'config'
-      ElMessage.info('请在左栏"计划书与数据"中确认解析数据')
+      await nextTick()
+      configRailRef.value?.openSourceReview()
       break
 
     case 'select-template':
       if (isMobile.value) mobileTab.value = 'config'
-      ElMessage.info('请在左栏"场景与模板"中选择海报模板')
+      await nextTick()
+      configRailRef.value?.openTemplates()
       break
 
     case 'generate-copy':
-      // 打开右侧栏/抽屉并切到文案 tab
-      if (hideInspector.value) {
-        showInspectorDrawer.value = true
-      }
-      if (isMobile.value) mobileTab.value = 'inspector'
-      ElMessage.info('请在右栏"文案"标签中生成文案')
+      await openInspectorTab('copy')
       break
 
     case 'confirm-compliance':
-      // 打开右侧栏/抽屉并切到发布 tab
-      if (hideInspector.value) {
-        showInspectorDrawer.value = true
-      }
-      if (isMobile.value) mobileTab.value = 'inspector'
-      // 自动勾选合规确认（用户已走到这一步说明前面都通过了）
-      await nextTick()
-      ElMessage.info('请在"发布"标签中勾选合规确认')
+      await openInspectorTab('delivery')
       break
 
     case 'generate-poster':
       await onGenerate()
       break
+
+    case 'download-poster':
+      await onDownload()
+      break
   }
 }
 
+async function openInspectorTab(tab: 'copy' | 'layout' | 'delivery') {
+  if (isMobile.value) {
+    mobileTab.value = 'inspector'
+    await nextTick()
+    inlineInspectorRef.value?.openTab(tab)
+    return
+  }
+  if (hideInspector.value) {
+    showInspectorDrawer.value = true
+    await nextTick()
+    drawerInspectorRef.value?.openTab(tab)
+    return
+  }
+  await nextTick()
+  inlineInspectorRef.value?.openTab(tab)
+}
+
 // ── 生成海报 ─────────────────────────────
 let pollTimer: ReturnType<typeof setInterval> | null = null
 let documentSaveTimer: ReturnType<typeof setTimeout> | null = null
@@ -661,6 +683,8 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  workspaceObserver?.disconnect()
+  workspaceObserver = null
   stopPolling()
   if (documentSaveTimer) clearTimeout(documentSaveTimer)
   if (ws.draft.value.posterUrl) {
@@ -675,32 +699,42 @@ onBeforeUnmount(() => {
 <style scoped>
 /* ── 主题变量 ───────────────────────── */
 .poster-workspace {
-  --poster-accent: #3b7a57;
-  --poster-accent-light: #f0f7f3;
-  --poster-border: #e5eaf3;
-  --poster-text: #172033;
-  --poster-muted: #667085;
+  --poster-accent: #176b4d;
+  --poster-accent-hover: #10583f;
+  --poster-accent-light: #eaf5ef;
+  --poster-border: #dfe7e2;
+  --poster-text: #17251e;
+  --poster-muted: #66756d;
+  --poster-surface: #fff;
+  --poster-bg: #f3f7f4;
+  --poster-radius: 14px;
+  --poster-shadow: 0 12px 34px rgb(24 61 44 / 8%);
 
   height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: #fff;
+  background: var(--poster-bg);
   position: relative;
+  color-scheme: light;
+  container-type: inline-size;
 }
 
 /* ── 工作区主体：三栏 grid ────────────── */
 .workspace-body {
   flex: 1;
   display: grid;
-  grid-template-columns: minmax(240px, 280px) 1fr minmax(260px, 320px);
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 320px);
+  gap: 12px;
+  padding: 12px;
   overflow: hidden;
   min-height: 0;
 }
 
 /* ── 隐藏第三栏（inspector）在双栏模式 ── */
 .workspace-body.hide-inspector {
-  grid-template-columns: minmax(240px, 280px) 1fr;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
 }
 
 /* ── 右侧栏浮动按钮 ────────────────── */
@@ -711,39 +745,47 @@ onBeforeUnmount(() => {
   z-index: 90;
   width: 44px;
   height: 44px;
-  box-shadow: 0 4px 16px rgb(59 122 87 / 30%);
+  box-shadow: 0 10px 28px rgb(23 107 77 / 24%);
 }
 
 /* ── 移动端标签页 ────────────────────── */
 .mobile-tabs {
   display: flex;
-  border-bottom: 1px solid var(--poster-border);
-  background: #fafbfc;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--poster-border);
+  border-radius: 12px;
+  background: #e9efeb;
   flex-shrink: 0;
 }
 
 .mobile-tabs button {
   flex: 1;
-  padding: 10px;
+  min-height: 38px;
+  padding: 8px 10px;
   border: none;
-  background: none;
-  font-size: 14px;
+  border-radius: 9px;
+  background: transparent;
+  font-size: 13px;
   color: var(--poster-muted);
   cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: all 0.15s;
+  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
 }
 
 .mobile-tabs button.active {
   color: var(--poster-accent);
-  border-bottom-color: var(--poster-accent);
+  background: #fff;
   font-weight: 600;
+  box-shadow: 0 2px 8px rgb(24 61 44 / 8%);
 }
 
 /* ── 移动端布局 ─────────────────────── */
 .mobile-mode .workspace-body {
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
+  gap: 8px;
+  padding: 8px;
+  padding-bottom: 8px;
 }
 
 .mobile-mode .workspace-body :deep(.config-rail),
@@ -752,16 +794,25 @@ onBeforeUnmount(() => {
   min-width: 0;
   max-width: none;
   border: none;
+  border-radius: var(--poster-radius);
 }
 
 .mobile-mode .workspace-body :deep(.config-rail) {
-  border-bottom: 1px solid var(--poster-border);
+  border: 1px solid var(--poster-border);
 }
 
-/* ── 双栏响应式 ──────────────────────── */
-@media (max-width: 768px) {
-  .workspace-body:not(.mobile-tabs-visible) {
-    grid-template-columns: 1fr;
+@container (max-width: 899px) {
+  .workspace-body {
+    grid-template-columns: 280px minmax(0, 1fr);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .poster-workspace *,
+  .poster-workspace *::before,
+  .poster-workspace *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
   }
 }
 </style>
diff --git a/frontend/src/pages/PptPage.vue b/frontend/src/pages/PptPage.vue
index 81f65fa..09c4f73 100644
--- a/frontend/src/pages/PptPage.vue
+++ b/frontend/src/pages/PptPage.vue
@@ -37,21 +37,48 @@
     <!-- ===== 工作区主体 ===== -->
     <template v-else>
       <div class="ppt-ws__main">
-        <!-- 移动端：步骤导航为横向条（桌面端通过 CSS 隐藏） -->
+        <!-- 移动端：只展示当前步骤，完整步骤放入抽屉，避免小屏横向拥挤 -->
         <div class="ppt-ws__mobile-nav">
-          <template v-for="(s, idx) in steps" :key="idx">
+          <button class="ppt-ws__mobile-current" type="button" @click="mobileStepsOpen = true">
+            <span class="ppt-ws__mobile-copy">
+              <span class="ppt-ws__mobile-meta">步骤 {{ currentStep + 1 }} / {{ steps.length }}</span>
+              <strong>{{ steps[currentStep].title }}</strong>
+            </span>
+            <span class="ppt-ws__mobile-open">
+              查看流程
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+          </button>
+          <div class="ppt-ws__mobile-progress" aria-hidden="true">
+            <span :style="{ width: mobileProgress }" />
+          </div>
+        </div>
+
+        <el-drawer
+          v-model="mobileStepsOpen"
+          title="PPT 生成流程"
+          direction="btt"
+          size="auto"
+          class="ppt-ws__step-drawer"
+        >
+          <div class="ppt-ws__drawer-steps">
             <button
-              class="ppt-ws__mobile-step"
+              v-for="(s, idx) in steps"
+              :key="idx"
+              type="button"
+              class="ppt-ws__drawer-step"
               :class="{ active: idx === currentStep, done: idx < currentStep }"
               :disabled="idx > maxAccessibleStep"
               @click="goToStep(idx)"
             >
-              <span class="ppt-ws__mobile-step-num">{{ idx + 1 }}</span>
-              <span class="ppt-ws__mobile-step-name">{{ s.title }}</span>
+              <span class="ppt-ws__drawer-num">{{ idx < currentStep ? '✓' : idx + 1 }}</span>
+              <span>
+                <strong>{{ s.title }}</strong>
+                <small>{{ s.description }}</small>
+              </span>
             </button>
-            <span v-if="idx < steps.length - 1" class="ppt-ws__mobile-step-sep" :class="{ done: idx < currentStep }" />
-          </template>
-        </div>
+          </div>
+        </el-drawer>
 
         <!-- 左侧步骤导航（桌面端） -->
         <PptWorkspaceNav
@@ -74,7 +101,7 @@
           </div>
 
           <!-- 底部操作栏 -->
-          <PptWorkspaceActions :current-step="currentStep" back-label="返回上一步" @back="goToStep(currentStep - 1)">
+          <PptWorkspaceActions v-if="showWorkspaceActions" :current-step="currentStep" back-label="返回上一步" @back="goToStep(currentStep - 1)">
             <template #right>
               <span v-if="sessionId" class="ppt-ws__step-hint">
                 第 {{ currentStep + 1 }} / {{ steps.length }} 步 · {{ steps[currentStep].title }}
@@ -84,61 +111,61 @@
         </div>
 
         <!-- 右侧上下文面板（仅大屏，可通过关闭按钮隐藏；核对步骤自动隐藏进入专注模式） -->
-        <aside v-if="sessionId && rightPanelOpen && currentStep !== 2" class="ppt-ws__aside">
-          <div class="ppt-ws__aside-header">
-            <span>上下文</span>
-            <el-icon class="ppt-ws__aside-close" @click="rightPanelOpen = false"><Close /></el-icon>
-          </div>
+<!--        <aside v-if="sessionId && rightPanelOpen && currentStep !== 2" class="ppt-ws__aside">-->
+<!--          <div class="ppt-ws__aside-header">-->
+<!--            <span>上下文</span>-->
+<!--            <el-icon class="ppt-ws__aside-close" @click="rightPanelOpen = false"><Close /></el-icon>-->
+<!--          </div>-->
 
-          <!-- 步骤 0：上传 — 文件信息（暂无 session 时不显示） -->
-          <div v-if="currentStep === 0" class="ppt-ws__aside-section">
-            <p class="ppt-ws__aside-hint">上传文件后，此处显示文件摘要和配置信息。</p>
-          </div>
+<!--          &lt;!&ndash; 步骤 0：上传 — 文件信息（暂无 session 时不显示） &ndash;&gt;-->
+<!--          <div v-if="currentStep === 0" class="ppt-ws__aside-section">-->
+<!--            <p class="ppt-ws__aside-hint">上传文件后，此处显示文件摘要和配置信息。</p>-->
+<!--          </div>-->
 
-          <!-- 步骤 1：解析 — 解析进度 -->
-          <div v-else-if="currentStep === 1" class="ppt-ws__aside-section">
-            <h4>解析进度</h4>
-            <el-progress :percentage="ws.parseProgress.value" :stroke-width="6" />
-            <p class="ppt-ws__aside-status">{{ ws.serverStatus.value || '等待中' }}</p>
-          </div>
+<!--          &lt;!&ndash; 步骤 1：解析 — 解析进度 &ndash;&gt;-->
+<!--          <div v-else-if="currentStep === 1" class="ppt-ws__aside-section">-->
+<!--            <h4>解析进度</h4>-->
+<!--            <el-progress :percentage="ws.parseProgress.value" :stroke-width="6" />-->
+<!--            <p class="ppt-ws__aside-status">{{ ws.serverStatus.value || '等待中' }}</p>-->
+<!--          </div>-->
 
-          <!-- 步骤 2：数据核对 — 校验状态 -->
-          <div v-else-if="currentStep === 2" class="ppt-ws__aside-section">
-            <h4>校验状态</h4>
-            <div class="ppt-ws__aside-stat">
-              <span class="stat-label">错误</span>
-              <span class="stat-value" :class="{ error: stepErrors[2] > 0 }">{{ stepErrors[2] }}</span>
-            </div>
-            <div class="ppt-ws__aside-stat">
-              <span class="stat-label">警告</span>
-              <span class="stat-value" :class="{ warn: stepWarnings[2] > 0 }">{{ stepWarnings[2] }}</span>
-            </div>
-          </div>
+<!--          &lt;!&ndash; 步骤 2：数据核对 — 校验状态 &ndash;&gt;-->
+<!--          <div v-else-if="currentStep === 2" class="ppt-ws__aside-section">-->
+<!--            <h4>校验状态</h4>-->
+<!--            <div class="ppt-ws__aside-stat">-->
+<!--              <span class="stat-label">错误</span>-->
+<!--              <span class="stat-value" :class="{ error: stepErrors[2] > 0 }">{{ stepErrors[2] }}</span>-->
+<!--            </div>-->
+<!--            <div class="ppt-ws__aside-stat">-->
+<!--              <span class="stat-label">警告</span>-->
+<!--              <span class="stat-value" :class="{ warn: stepWarnings[2] > 0 }">{{ stepWarnings[2] }}</span>-->
+<!--            </div>-->
+<!--          </div>-->
 
-          <!-- 步骤 3：生成 — 配置摘要 -->
-          <div v-else-if="currentStep === 3" class="ppt-ws__aside-section">
-            <h4>生成配置</h4>
-            <div class="ppt-ws__aside-stat">
-              <span class="stat-label">任务 ID</span>
-              <span class="stat-value mono">{{ ws.latestTaskId.value || '—' }}</span>
-            </div>
-          </div>
+<!--          &lt;!&ndash; 步骤 3：生成 — 配置摘要 &ndash;&gt;-->
+<!--          <div v-else-if="currentStep === 3" class="ppt-ws__aside-section">-->
+<!--            <h4>生成配置</h4>-->
+<!--            <div class="ppt-ws__aside-stat">-->
+<!--              <span class="stat-label">任务 ID</span>-->
+<!--              <span class="stat-value mono">{{ ws.latestTaskId.value || '—' }}</span>-->
+<!--            </div>-->
+<!--          </div>-->
 
-          <!-- 步骤 4：结果 — 质量状态 -->
-          <div v-else-if="currentStep === 4" class="ppt-ws__aside-section">
-            <h4>质量状态</h4>
-            <p class="ppt-ws__aside-hint">详情请查看右侧质量检查面板。</p>
-          </div>
-        </aside>
+<!--          &lt;!&ndash; 步骤 4：结果 — 质量状态 &ndash;&gt;-->
+<!--          <div v-else-if="currentStep === 4" class="ppt-ws__aside-section">-->
+<!--            <h4>质量状态</h4>-->
+<!--            <p class="ppt-ws__aside-hint">详情请查看右侧质量检查面板。</p>-->
+<!--          </div>-->
+<!--        </aside>-->
       </div>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, provide, onUnmounted } from 'vue'
+import { computed, onMounted, ref, provide, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Bell, Clock, RefreshLeft, ArrowLeft, Close } from '@element-plus/icons-vue'
+import { Bell, Clock, RefreshLeft, ArrowLeft, ArrowDown, Close } from '@element-plus/icons-vue'
 import { usePptWorkspace } from '@/composables/useWorkspace'
 import { useAutoSave } from '@/composables/useAutoSave'
 import DraftIndicator from '@/components/DraftIndicator.vue'
@@ -156,6 +183,7 @@ const ws = usePptWorkspace()
 const { sessionId, currentStep } = ws
 const activeSection = ref<'workspace' | 'tasks'>('workspace')
 const rightPanelOpen = ref(true)
+const mobileStepsOpen = ref(false)
 
 // 自动保存
 const autoSave = useAutoSave({ endpoint: () => `/workspace/ppt/workspaces/${sessionId.value}/draft` })
@@ -205,6 +233,8 @@ const steps = [
 const stepErrors = ref<number[]>([0, 0, 0, 0, 0])
 const stepWarnings = ref<number[]>([0, 0, 0, 0, 0])
 const maxAccessibleStep = ref(0)
+const mobileProgress = computed(() => `${((currentStep.value + 1) / steps.length) * 100}%`)
+const showWorkspaceActions = computed(() => currentStep.value !== 0 && currentStep.value !== 2)
 
 // 刷新恢复
 onMounted(async () => {
@@ -223,6 +253,7 @@ function toggleSection() {
 function goToStep(idx: number) {
   if (idx >= 0 && idx <= maxAccessibleStep.value) {
     ws.goToStep(idx)
+    mobileStepsOpen.value = false
   }
 }
 
@@ -267,23 +298,27 @@ function resetAll() {
 <style scoped>
 /* ===== CSS 自定义属性 ===== */
 .ppt-ws {
-  --ws-accent: #3B7A57;
-  --ws-accent-soft: #f0f7f3;
-  --ws-border: #e5e7eb;
-  --ws-text: #1a2e23;
-  --ws-muted: #6b7280;
-  --ws-bg: #f5f5f5;
+  --ws-accent: #176b4d;
+  --ws-accent-hover: #10583f;
+  --ws-accent-soft: #eaf5ef;
+  --ws-border: #dfe7e2;
+  --ws-text: #17251e;
+  --ws-muted: #66756d;
+  --ws-bg: #f3f7f4;
   --ws-panel: #fff;
-  --ws-radius: 12px;
-  --ws-radius-sm: 8px;
+  --ws-radius: 14px;
+  --ws-radius-sm: 10px;
+  --ws-shadow: 0 12px 34px rgb(24 61 44 / 8%);
 
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   background: var(--ws-bg);
   font-size: 14px;
   color: var(--ws-text);
   container-type: inline-size;
+  color-scheme: light;
 }
 
 /* ===== 顶栏 ===== */
@@ -292,12 +327,14 @@ function resetAll() {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 0 20px;
-  height: 64px;
-  min-height: 64px;
-  background: var(--ws-panel);
+  padding: 0 22px;
+  height: 68px;
+  min-height: 68px;
+  background: rgb(255 255 255 / 96%);
   border-bottom: 1px solid var(--ws-border);
   flex-shrink: 0;
+  position: relative;
+  z-index: 5;
 }
 
 .ppt-ws__toolbar-left {
@@ -308,13 +345,17 @@ function resetAll() {
 }
 
 .ppt-ws__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   font-size: 18px;
   color: var(--ws-muted);
   flex-shrink: 0;
-  padding: 4px;
-  border-radius: 6px;
-  transition: background 0.15s;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  transition: background 0.16s ease, color 0.16s ease;
 }
 
 .ppt-ws__back:hover {
@@ -323,8 +364,9 @@ function resetAll() {
 }
 
 .ppt-ws__title {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 17px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -338,12 +380,26 @@ function resetAll() {
   flex-shrink: 0;
 }
 
+.ppt-ws__toolbar-right :deep(.el-button) {
+  min-height: 36px;
+  border-radius: 10px;
+}
+
+.ppt-ws__toolbar-right :deep(.el-button--primary) {
+  --el-button-bg-color: var(--ws-accent);
+  --el-button-border-color: var(--ws-accent);
+  --el-button-hover-bg-color: var(--ws-accent-hover);
+  --el-button-hover-border-color: var(--ws-accent-hover);
+}
+
 /* ===== 主区域（三栏） ===== */
 .ppt-ws__main {
   display: flex;
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  gap: 12px;
+  padding: 12px;
 }
 
 /* ===== 中间区域 ===== */
@@ -353,8 +409,10 @@ function resetAll() {
   flex-direction: column;
   min-width: 0;
   background: var(--ws-panel);
-  border-left: 1px solid var(--ws-border);
-  border-right: 1px solid var(--ws-border);
+  border: 1px solid var(--ws-border);
+  border-radius: var(--ws-radius);
+  box-shadow: var(--ws-shadow);
+  overflow: hidden;
 }
 
 .ppt-ws__content {
@@ -380,7 +438,9 @@ function resetAll() {
   width: 240px;
   flex-shrink: 0;
   background: var(--ws-panel);
-  border-left: 1px solid var(--ws-border);
+  border: 1px solid var(--ws-border);
+  border-radius: var(--ws-radius);
+  box-shadow: var(--ws-shadow);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -390,7 +450,7 @@ function resetAll() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 16px 10px;
+  padding: 15px 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ws-muted);
@@ -464,6 +524,131 @@ function resetAll() {
   display: none;
 }
 
+.ppt-ws__mobile-current {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0;
+  border: 0;
+  color: var(--ws-text);
+  background: transparent;
+  text-align: left;
+}
+
+.ppt-ws__mobile-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ppt-ws__mobile-copy strong {
+  font-size: 15px;
+}
+
+.ppt-ws__mobile-meta {
+  color: var(--ws-muted);
+  font-size: 11px;
+}
+
+.ppt-ws__mobile-open {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ws-accent);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ppt-ws__mobile-progress {
+  width: 100%;
+  height: 3px;
+  margin-top: 10px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: #e4ece7;
+}
+
+.ppt-ws__mobile-progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ws-accent);
+  transition: width 0.2s ease;
+}
+
+:global(.ppt-ws__step-drawer) {
+  border-radius: 18px 18px 0 0;
+}
+
+:global(.ppt-ws__step-drawer .el-drawer__header) {
+  margin-bottom: 8px;
+  padding: 18px 18px 8px;
+  color: #17251e;
+  font-weight: 650;
+}
+
+:global(.ppt-ws__step-drawer .el-drawer__body) {
+  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
+}
+
+.ppt-ws__drawer-steps {
+  display: grid;
+  gap: 6px;
+}
+
+.ppt-ws__drawer-step {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--ws-text);
+  text-align: left;
+}
+
+.ppt-ws__drawer-step:disabled {
+  opacity: 0.42;
+}
+
+.ppt-ws__drawer-step.active {
+  border-color: #b8d8c7;
+  background: var(--ws-accent-soft);
+}
+
+.ppt-ws__drawer-step > span:last-child {
+  display: flex;
+  flex-direction: column;
+}
+
+.ppt-ws__drawer-step small {
+  margin-top: 2px;
+  color: var(--ws-muted);
+}
+
+.ppt-ws__drawer-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: #edf2ef;
+  color: var(--ws-muted);
+  font-weight: 700;
+}
+
+.ppt-ws__drawer-step.active .ppt-ws__drawer-num,
+.ppt-ws__drawer-step.done .ppt-ws__drawer-num {
+  background: var(--ws-accent);
+  color: #fff;
+}
+
 /* ===== 任务中心铺满 ===== */
 .ppt-ws__tasks {
   flex: 1;
@@ -486,15 +671,12 @@ function resetAll() {
   }
 
   .ppt-ws__mobile-nav {
-    display: flex;
-    align-items: center;
-    gap: 0;
-    padding: 10px 12px;
+    display: block;
+    padding: 11px 14px 10px;
     background: var(--ws-panel);
-    border-bottom: 1px solid var(--ws-border);
-    overflow-x: auto;
+    border: 1px solid var(--ws-border);
+    border-radius: 12px;
     flex-shrink: 0;
-    -webkit-overflow-scrolling: touch;
   }
 
   .ppt-ws__center {
@@ -507,78 +689,36 @@ function resetAll() {
     min-height: 56px;
   }
 
-  .ppt-ws__toolbar-right .el-button span {
+  .ppt-ws__toolbar-right :deep(.el-button span) {
     display: none;
   }
 
+  .ppt-ws__toolbar-right {
+    gap: 4px;
+  }
+
+  .ppt-ws__toolbar-right :deep(.el-button) {
+    width: 36px;
+    margin-left: 0;
+    padding: 8px;
+  }
+
+  .ppt-ws__title {
+    max-width: min(34vw, 180px);
+    font-size: 15px;
+  }
+
+  .ppt-ws__main {
+    gap: 8px;
+    padding: 8px;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+
   .ppt-ws__content {
     padding: 12px;
   }
 }
 
-.ppt-ws__mobile-step {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--ws-muted);
-  white-space: nowrap;
-  transition: background 0.15s, color 0.15s;
-}
-
-.ppt-ws__mobile-step:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.ppt-ws__mobile-step.active {
-  background: var(--ws-accent-soft);
-  color: var(--ws-accent);
-  font-weight: 600;
-}
-
-.ppt-ws__mobile-step.done {
-  color: var(--ws-accent);
-}
-
-.ppt-ws__mobile-step-num {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #e8efe9;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.ppt-ws__mobile-step.active .ppt-ws__mobile-step-num {
-  background: var(--ws-accent);
-  color: #fff;
-}
-
-.ppt-ws__mobile-step.done .ppt-ws__mobile-step-num {
-  background: #d1fae5;
-  color: var(--ws-accent);
-}
-
-.ppt-ws__mobile-step-sep {
-  width: 12px;
-  height: 1px;
-  background: var(--ws-border);
-  flex-shrink: 0;
-}
-
-.ppt-ws__mobile-step-sep.done {
-  background: var(--ws-accent);
-}
-
 /* ===== 兼容无 container query 的浏览器：fallback 媒体查询 ===== */
 @supports not (container-type: inline-size) {
   @media (max-width: 959px) {
@@ -588,18 +728,26 @@ function resetAll() {
     .ppt-ws__main { flex-direction: column; }
     .ppt-ws__main > :first-child:not(.ppt-ws__center) { display: none; }
     .ppt-ws__mobile-nav {
-      display: flex;
-      align-items: center;
-      gap: 0;
-      padding: 10px 12px;
+      display: block;
+      padding: 11px 14px 10px;
       background: var(--ws-panel);
-      border-bottom: 1px solid var(--ws-border);
-      overflow-x: auto;
+      border: 1px solid var(--ws-border);
+      border-radius: 12px;
       flex-shrink: 0;
     }
     .ppt-ws__center { border: none; }
     .ppt-ws__toolbar { padding: 0 12px; height: 56px; min-height: 56px; }
+    .ppt-ws__main { gap: 8px; padding: 8px; }
     .ppt-ws__content { padding: 12px; }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ppt-ws *,
+  .ppt-ws *::before,
+  .ppt-ws *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
 </style>
diff --git a/frontend/src/pages/components/ppt/PptDataReview.vue b/frontend/src/pages/components/ppt/PptDataReview.vue
index 7a4e82e..ee8fa95 100644
--- a/frontend/src/pages/components/ppt/PptDataReview.vue
+++ b/frontend/src/pages/components/ppt/PptDataReview.vue
@@ -7,25 +7,7 @@
     </div>
 
     <template v-else>
-      <!-- 顶部摘要条 -->
-      <div class="review-topbar">
-        <div class="topbar-status" :class="validationStatus">
-          <span class="status-icon">{{ statusMark }}</span>
-          <span class="status-text">{{ statusTitle }}</span>
-          <el-tag :type="validationTagType" size="small" effect="plain">{{ validationLabel }}</el-tag>
-        </div>
-        <div class="topbar-metrics">
-          <span class="topbar-metric">{{ extractions.length }} 产品</span>
-          <span class="topbar-metric" :class="{ error: errorCount > 0 }">{{ errorCount }} 错误</span>
-          <span class="topbar-metric" :class="{ warn: warnCount > 0 }">{{ warnCount }} 警告</span>
-          <span class="topbar-metric">{{ totalRows }} 行数据</span>
-          <el-button size="small" :type="showPdfPreview ? 'primary' : 'default'" plain @click="showPdfPreview = !showPdfPreview">
-            {{ showPdfPreview ? '隐藏 PDF' : '显示 PDF' }}
-          </el-button>
-        </div>
-      </div>
-
-      <!-- 三栏主体 -->
+      <!-- 核对主体：产品切换 + 宽数据编辑区 -->
       <div class="review-body">
         <!-- 左栏：产品列表 -->
         <aside class="review-products">
@@ -55,18 +37,7 @@
           </button>
         </aside>
 
-        <!-- 中栏：PDF 预览（可折叠） -->
-        <div v-if="showPdfPreview && currentExt" class="review-pdf">
-          <PdfPagePreview
-            :session-id="props.sessionId"
-            :extraction-index="selectedIdx"
-            :page-number="previewPage"
-            :pdf-name="currentExt.pdfName"
-            @page-change="previewPage = $event"
-          />
-        </div>
-
-        <!-- 中栏：当前产品编辑区 -->
+        <!-- 当前产品编辑区 -->
         <div class="review-editor" v-if="currentExt">
           <div class="editor-header">
             <el-tag :type="typeTagMap[currentExt.planType] || 'info'" size="small">
@@ -88,37 +59,67 @@
 
           <!-- 标签页切换 -->
           <el-tabs v-model="activeTab" class="editor-tabs">
-            <el-tab-pane label="关键字段" name="fields">
+            <el-tab-pane :label="tabLabel('关键字段', 'fields')" name="fields">
               <el-form label-position="top" size="default" class="fields-form">
                 <div class="fields-grid">
-                  <el-form-item label="产品名称">
+                  <el-form-item
+                    label="产品名称"
+                    :class="fieldIssueClass('product_name', 'product name')"
+                    :data-issue="fieldIssueMessage('product_name', 'product name')"
+                  >
                     <el-input v-model="currentExt.data.product_name" />
                   </el-form-item>
-                  <el-form-item label="产品类型">
+                  <el-form-item
+                    label="产品类型"
+                    :class="fieldIssueClass('product_type', 'product type')"
+                    :data-issue="fieldIssueMessage('product_type', 'product type')"
+                  >
                     <el-select v-model="currentExt.data.product_type" style="width: 100%">
                       <el-option label="储蓄险" value="savings" />
                       <el-option label="重疾险" value="ci" />
                       <el-option label="IUL" value="iul" />
                     </el-select>
                   </el-form-item>
-                  <el-form-item label="被保人年龄">
+                  <el-form-item
+                    label="被保人年龄"
+                    :class="fieldIssueClass('insured.age', 'age')"
+                    :data-issue="fieldIssueMessage('insured.age', 'age')"
+                  >
                     <el-input-number v-model="currentExt.data.insured.age" :min="0" :max="120" />
                   </el-form-item>
-                  <el-form-item label="被保人性别">
+                  <el-form-item
+                    label="被保人性别"
+                    :class="fieldIssueClass('insured.gender', 'gender')"
+                    :data-issue="fieldIssueMessage('insured.gender', 'gender')"
+                  >
                     <el-select v-model="currentExt.data.insured.gender" style="width: 100%">
                       <el-option label="男" value="male" />
                       <el-option label="女" value="female" />
                       <el-option label="未知" value="unknown" />
                     </el-select>
                   </el-form-item>
-                  <el-form-item label="吸烟状态" :class="{ 'field-missing': currentExt.data.insured.smoker === 'unknown' }">
+                  <el-form-item
+                    label="吸烟状态"
+                    :class="[
+                      { 'field-missing': currentExt.data.insured.smoker === 'unknown' },
+                      fieldIssueClass('insured.smoker', 'smoker'),
+                    ]"
+                    :data-issue="fieldIssueMessage('insured.smoker', 'smoker')"
+                  >
                     <el-select v-model="currentExt.data.insured.smoker" style="width: 100%">
                       <el-option label="吸烟" value="yes" />
                       <el-option label="不吸烟" value="no" />
                       <el-option label="未知（可继续生成）" value="unknown" />
                     </el-select>
                   </el-form-item>
-                  <el-form-item label="币种" :class="{ 'field-missing': !currentExt.data.policy.currency }">
+                  <el-form-item
+                    label="币种"
+                    :class="[
+                      { 'field-missing': !currentExt.data.policy.currency },
+                      fieldIssueClass('policy.currency', 'currency'),
+                    ]"
+                    :data-issue="fieldIssueMessage('policy.currency', 'currency')"
+                  >
                     <el-select v-model="currentExt.data.policy.currency" filterable clearable style="width: 100%">
                       <el-option label="美元（USD）" value="USD" />
                       <el-option label="港币（HKD）" value="HKD" />
@@ -128,13 +129,28 @@
                       <el-option label="英镑（GBP）" value="GBP" />
                     </el-select>
                   </el-form-item>
-                  <el-form-item label="年缴保费">
+                  <el-form-item
+                    label="年缴保费"
+                    :class="fieldIssueClass('annual_premium', 'annual premium')"
+                    :data-issue="fieldIssueMessage('annual_premium', 'annual premium')"
+                  >
                     <el-input-number v-model="currentExt.data.policy.annual_premium" :min="0" :step="1000" />
                   </el-form-item>
-                  <el-form-item label="缴费年期">
+                  <el-form-item
+                    label="缴费年期"
+                    :class="fieldIssueClass('premium_payment_period', 'payment period')"
+                    :data-issue="fieldIssueMessage('premium_payment_period', 'payment period')"
+                  >
                     <el-input-number v-model="currentExt.data.policy.premium_payment_period" :min="1" :max="50" />
                   </el-form-item>
-                  <el-form-item label="保额" :class="{ 'field-missing': !currentExt.data.policy.sum_insured }">
+                  <el-form-item
+                    label="保额"
+                    :class="[
+                      { 'field-missing': !currentExt.data.policy.sum_insured },
+                      fieldIssueClass('sum_insured', 'sum assured'),
+                    ]"
+                    :data-issue="fieldIssueMessage('sum_insured', 'sum assured')"
+                  >
                     <el-input-number v-model="currentExt.data.policy.sum_insured" :min="0" :step="10000" placeholder="请输入保额" />
                   </el-form-item>
                   <el-form-item label="基本计划年保费">
@@ -150,7 +166,7 @@
               </el-form>
             </el-tab-pane>
 
-            <el-tab-pane :label="`利益演示（${getBenefitRows(currentExt).length} 行）`" name="benefit">
+            <el-tab-pane :label="tabLabel(`利益演示 · ${getBenefitRows(currentExt).length} 行`, 'benefit')" name="benefit">
               <div class="table-toolbar">
                 <el-button size="small" type="primary" plain @click="addBenefitRow(currentExt)">新增年度</el-button>
                 <el-button size="small" plain @click="sortRows(getBenefitRows(currentExt))">按年度排序</el-button>
@@ -251,7 +267,7 @@
               </el-table>
             </el-tab-pane>
 
-            <el-tab-pane :label="`退保提取（${getWithdrawalRows(currentExt).length} 行）`" name="withdrawal">
+            <el-tab-pane :label="tabLabel(`退保提取 · ${getWithdrawalRows(currentExt).length} 行`, 'withdrawal')" name="withdrawal">
               <div class="table-toolbar">
                 <el-button size="small" type="primary" plain @click="addWithdrawalRow(currentExt)">新增退保行</el-button>
                 <el-button size="small" plain @click="sortRows(getWithdrawalRows(currentExt))">按年度排序</el-button>
@@ -261,6 +277,7 @@
                 stripe border size="small"
                 max-height="420"
                 style="width: 100%"
+                :cell-class-name="getCellClass"
               >
                 <el-table-column prop="policy_year" label="保单年度" width="86" fixed="left">
                   <template #default="{ row }">
@@ -299,37 +316,6 @@
           <el-empty v-if="currentExt.status === 'error'" :description="currentExt.error || '解析失败'" />
         </div>
 
-        <!-- 右栏：校验面板 -->
-        <aside class="review-issues">
-          <h4 class="panel-label">
-            校验状态
-            <el-tag v-if="errorCount > 0" type="danger" size="small" effect="plain">{{ errorCount }}</el-tag>
-            <el-tag v-else-if="warnCount > 0" type="warning" size="small" effect="plain">{{ warnCount }}</el-tag>
-            <el-tag v-else type="success" size="small" effect="plain">通过</el-tag>
-          </h4>
-
-          <div v-if="issues.length" class="issue-list">
-            <button
-              v-for="(issue, idx) in issues"
-              :key="idx"
-              type="button"
-              class="issue-item"
-              :class="issue.severity"
-              @click="jumpToIssue(issue)"
-            >
-              <el-icon v-if="issue.severity === 'error'" color="#dc2626"><CircleCloseFilled /></el-icon>
-              <el-icon v-else color="#b45309"><WarningFilled /></el-icon>
-              <span class="issue-text">
-                <span class="issue-field">{{ issue.field || '待确认' }}</span>
-                <span class="issue-msg">{{ issue.message }}</span>
-              </span>
-            </button>
-          </div>
-          <div v-else class="issues-clean">
-            <el-icon color="#16a34a" :size="20"><CircleCheckFilled /></el-icon>
-            <span>未发现阻断问题</span>
-          </div>
-        </aside>
       </div>
 
       <!-- 底部操作栏 -->
@@ -352,11 +338,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, inject, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, inject, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { DataAnalysis, Loading, CircleCloseFilled, WarningFilled, CircleCheckFilled } from '@element-plus/icons-vue'
+import { Loading } from '@element-plus/icons-vue'
 import { pptApi } from '@/utils/ppt-api'
-import PdfPagePreview from './PdfPagePreview.vue'
 
 // 自动保存（由父组件 PptPage 注入）
 const autoSave = inject<{ scheduleSave: (data: Record<string, any>) => void; registerFlush?: (fn: () => Promise<void>) => void } | null>('pptAutoSave', null)
@@ -364,7 +349,9 @@ const autoSave = inject<{ scheduleSave: (data: Record<string, any>) => void; reg
 // 注册 flush 回调，父组件 beforeunload 时可强制保存
 onMounted(() => {
   if (autoSave?.registerFlush) {
-    autoSave.registerFlush(() => handleSave(true))
+    autoSave.registerFlush(async () => {
+      await handleSave(true)
+    })
   }
 })
 
@@ -381,8 +368,6 @@ const emit = defineEmits<{
 const loading = ref(true)
 const saving = ref(false)
 const tableReadonly = ref(true)  // 默认只读模式，减少视觉噪音
-const showPdfPreview = ref(true)  // 默认显示 PDF 预览
-const previewPage = ref(1)  // PDF 预览当前页码
 const extractions = ref<any[]>([])
 const issues = ref<Array<{ field: string; severity: string; message: string; extractionIndex?: number; path?: string; section?: string; pdfName?: string }>>([])
 const originalJson = ref('')
@@ -411,34 +396,16 @@ const warnCount = computed(() => issues.value.filter(i => i.severity !== 'error'
 watch([errorCount, warnCount], ([errors, warnings]) => {
   emit('validation-update', { errors, warnings })
 }, { immediate: true })
-const totalRows = computed(() => extractions.value.reduce((sum, ext) => sum + getBenefitRows(ext).length, 0))
 const validationStatus = computed(() => {
   if (errorCount.value) return 'error'
   if (warnCount.value) return 'warn'
   return 'pass'
 })
-const validationTagType = computed(() => {
-  if (validationStatus.value === 'error') return 'danger'
-  if (validationStatus.value === 'warn') return 'warning'
-  return 'success'
-})
-const validationLabel = computed(() => {
-  if (validationStatus.value === 'error') return '有错误'
-  if (validationStatus.value === 'warn') return '需确认'
-  return '可生成'
-})
-const statusMark = computed(() => {
-  if (validationStatus.value === 'error') return '!'
-  if (validationStatus.value === 'warn') return '?'
-  return '✓'
-})
-const statusTitle = computed(() => {
-  if (validationStatus.value === 'error') return '存在阻断问题'
-  if (validationStatus.value === 'warn') return '可以继续，但建议先核对'
-  return '数据通过基础校验'
-})
 
 const currentExt = computed(() => extractions.value[selectedIdx.value] || null)
+const currentIssues = computed(() =>
+  issues.value.filter(issue => issueBelongsToProduct(issue, selectedIdx.value))
+)
 const currentMetrics = computed(() => {
   if (!currentExt.value) return []
   return getKeyMetrics(currentExt.value)
@@ -446,75 +413,76 @@ const currentMetrics = computed(() => {
 const isDirty = computed(() => JSON.stringify(extractions.value) !== originalJson.value)
 
 function productIssueCount(idx: number, severity: string): number {
-  // 简单匹配：按产品索引过滤 issues（后端 field 格式通常含产品名或索引）
-  const ext = extractions.value[idx]
-  if (!ext) return 0
-  const name = ext.productName || ext.data?.product_name || ''
   return issues.value.filter(i => {
-    if (i.severity !== severity) return false
-    if (name && i.field?.includes(name)) return true
-    if (i.field?.includes(`[${idx}]`)) return true
-    return false
+    const severityMatched = severity === 'error'
+      ? i.severity === 'error'
+      : i.severity !== 'error'
+    return severityMatched && issueBelongsToProduct(i, idx)
   }).length
 }
 
+function issueBelongsToProduct(issue: { field?: string; extractionIndex?: number }, idx: number): boolean {
+  if (issue.extractionIndex !== undefined) return issue.extractionIndex === idx
+  const ext = extractions.value[idx]
+  if (!ext) return false
+  const name = ext.productName || ext.data?.product_name || ''
+  if (name && issue.field?.includes(name)) return true
+  if (issue.field?.includes(`[${idx}]`)) return true
+  return extractions.value.length === 1
+}
+
+function findFieldIssue(...tokens: string[]) {
+  const normalizedTokens = tokens.map(token => token.toLowerCase())
+  return currentIssues.value.find(issue => {
+    const haystack = [issue.field, issue.path, issue.section, issue.message]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+    return normalizedTokens.some(token => haystack.includes(token))
+  })
+}
+
+function fieldIssueClass(...tokens: string[]): Record<string, boolean> {
+  const issue = findFieldIssue(...tokens)
+  return {
+    'field-has-error': issue?.severity === 'error',
+    'field-has-warn': !!issue && issue.severity !== 'error',
+  }
+}
+
+function fieldIssueMessage(...tokens: string[]): string {
+  return findFieldIssue(...tokens)?.message || ''
+}
+
+function issueSection(issue: { field?: string; path?: string; section?: string; message?: string }): 'fields' | 'benefit' | 'withdrawal' {
+  const haystack = [issue.field, issue.path, issue.section, issue.message]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase()
+  if (haystack.includes('withdrawal') || haystack.includes('提取')) return 'withdrawal'
+  if (
+    haystack.includes('benefit')
+    || haystack.includes('利益')
+    || haystack.includes('surrender')
+    || haystack.includes('cash_value')
+  ) return 'benefit'
+  return 'fields'
+}
+
+function sectionIssueCount(section: 'fields' | 'benefit' | 'withdrawal'): number {
+  return currentIssues.value.filter(issue => issueSection(issue) === section).length
+}
+
+function tabLabel(label: string, section: 'fields' | 'benefit' | 'withdrawal'): string {
+  const count = sectionIssueCount(section)
+  return count ? `${label} · ${count} 项待核对` : label
+}
+
 function selectProduct(idx: number) {
   selectedIdx.value = idx
   activeTab.value = 'fields'
 }
 
-function jumpToIssue(issue: { field: string; severity: string; message: string; extractionIndex?: number; section?: string; path?: string }) {
-  // 优先使用后端返回的 extractionIndex 精确定位
-  if (issue.extractionIndex !== undefined && issue.extractionIndex >= 0 && issue.extractionIndex < extractions.value.length) {
-    selectedIdx.value = issue.extractionIndex
-  } else {
-    // 回退：用产品名字符串匹配
-    for (let i = 0; i < extractions.value.length; i++) {
-      const ext = extractions.value[i]
-      const name = ext.productName || ext.data?.product_name || ''
-      if (name && issue.field?.includes(name)) {
-        selectedIdx.value = i
-        break
-      }
-    }
-  }
-
-  // 使用 section 字段精确切换 tab
-  const section = issue.section || ''
-  const field = issue.field || ''
-  if (section === 'benefitRows' || field.includes('benefit') || field.includes('退保') || field.includes('surrender') || field.includes('premium')) {
-    activeTab.value = 'benefit'
-  } else if (section === 'withdrawalRows' || field.includes('withdrawal') || field.includes('提取')) {
-    activeTab.value = 'withdrawal'
-  } else {
-    activeTab.value = 'fields'
-  }
-
-  // 滚动到对应字段（如果 path 存在）
-  if (issue.path) {
-    nextTick(() => {
-      const target = document.querySelector(`[data-field="${issue.path}"]`)
-      if (target) {
-        target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        target.classList.add('field-highlight')
-        setTimeout(() => target.classList.remove('field-highlight'), 2000)
-      }
-    })
-  }
-
-  // PDF 预览跳转：尝试从 benefitRows[path] 获取 source_page
-  if (showPdfPreview.value) {
-    const rowMatch = issue.path?.match(/benefitRows\[(\d+)\]/)
-    if (rowMatch) {
-      const rowIdx = parseInt(rowMatch[1])
-      const rows = currentExt.value?.data?.benefit_illustration || []
-      if (rows[rowIdx]?.source_page) {
-        previewPage.value = rows[rowIdx].source_page
-      }
-    }
-  }
-}
-
 onMounted(async () => {
   try {
     const [sessionRes, validateRes]: any[] = await Promise.all([
@@ -601,11 +569,27 @@ function formatMoney(value: any): string {
   return num.toLocaleString('zh-CN', { maximumFractionDigits: 0 })
 }
 
-function getCellClass({ row, column }: { row: any; column: any }): string {
+function getCellClass({ row, column, rowIndex }: { row: any; column: any; rowIndex: number }): string {
   const field = column.property
   if (!field) return ''
   const val = row[field]
   if (val == null || val === '') return 'cell-issue-missing'
+
+  const sectionTokens = activeTab.value === 'withdrawal'
+    ? ['withdrawal', '提取']
+    : ['benefit', '利益', 'surrender']
+  const issue = currentIssues.value.find(item => {
+    const haystack = [item.field, item.path, item.section, item.message]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+    const sectionMatched = sectionTokens.some(token => haystack.includes(token))
+    const fieldMatched = haystack.includes(String(field).toLowerCase())
+    const rowMatched = !item.path || item.path.includes(`[${rowIndex}]`)
+    return sectionMatched && fieldMatched && rowMatched
+  })
+  if (issue?.severity === 'error') return 'cell-issue-error'
+  if (issue) return 'cell-issue-warn'
   return ''
 }
 
@@ -840,83 +824,30 @@ async function handleConfirm() {
 <style scoped>
 .ppt-data-review {
   width: 100%;
+  height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
-/* ===== 顶部摘要条 ===== */
-.review-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 10px 16px;
-  border-radius: 10px;
-  background: #f8fafc;
-  border: 1px solid #e5e7eb;
-  flex-shrink: 0;
-}
-
-.topbar-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.status-icon {
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: #3B7A57;
-  font-size: 14px;
-  font-weight: 800;
-  flex-shrink: 0;
-}
-
-.topbar-status.error .status-icon { background: #dc2626; }
-.topbar-status.warn .status-icon { background: #d97706; }
-.topbar-status.pass .status-icon { background: #16a34a; }
-
-.status-text {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a2e23;
-}
-
-.topbar-metrics {
-  display: flex;
-  gap: 16px;
-}
-
-.topbar-metric {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.topbar-metric.error { color: #dc2626; font-weight: 600; }
-.topbar-metric.warn { color: #d97706; font-weight: 600; }
-
-/* ===== 三栏主体 ===== */
+/* ===== 核对主体 ===== */
 .review-body {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
 /* ===== 左栏：产品列表 ===== */
 .review-products {
-  width: 200px;
+  width: 190px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 12px;
+  padding: 10px;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   background: #fff;
@@ -925,11 +856,9 @@ async function handleConfirm() {
 
 .panel-label {
   margin: 0 0 8px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  color: #47564e;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -956,8 +885,8 @@ async function handleConfirm() {
 }
 
 .product-item.active {
-  background: #f0f7f3;
-  border-color: #3B7A57;
+  background: #eaf5ef;
+  border-color: #176b4d;
   font-weight: 600;
 }
 
@@ -1003,21 +932,14 @@ async function handleConfirm() {
 .product-badge.error { background: #fef2f2; color: #dc2626; }
 .product-badge.warn { background: #fffbeb; color: #d97706; }
 
-/* ===== PDF 预览面板 ===== */
-.review-pdf {
-  width: 360px;
-  min-width: 280px;
-  flex-shrink: 0;
-}
-
-/* ===== 中栏：编辑区 ===== */
+/* ===== 数据编辑区 ===== */
 .review-editor {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   min-width: 0;
-  padding: 16px;
+  padding: 16px 18px;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   background: #fff;
@@ -1040,7 +962,7 @@ async function handleConfirm() {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  padding: 8px 0;
+  padding: 4px 0 8px;
 }
 
 .metric-chip {
@@ -1073,8 +995,8 @@ async function handleConfirm() {
 
 .fields-form .fields-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 14px 16px;
 }
 
 .table-toolbar {
@@ -1083,82 +1005,6 @@ async function handleConfirm() {
   margin-bottom: 8px;
 }
 
-/* ===== 右栏：校验面板 ===== */
-.review-issues {
-  width: 240px;
-  flex-shrink: 0;
-  padding: 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  background: #fff;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.issue-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.issue-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 6px 8px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  font-size: 12px;
-  transition: background 0.12s;
-  width: 100%;
-}
-
-.issue-item:hover {
-  background: #f9fafb;
-}
-
-.issue-item.error { background: #fef2f240; }
-.issue-item.error:hover { background: #fef2f2; }
-
-.issue-item.warn { background: #fffbeb40; }
-.issue-item.warn:hover { background: #fffbeb; }
-
-.issue-item .el-icon {
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.issue-text {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-}
-
-.issue-field {
-  font-weight: 600;
-  color: #374151;
-}
-
-.issue-msg {
-  color: #6b7280;
-  line-height: 1.4;
-}
-
-.issues-clean {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 12px 8px;
-  color: #16a34a;
-  font-size: 13px;
-  font-weight: 500;
-}
-
 /* ===== 加载态 ===== */
 .loading-state {
   display: flex;
@@ -1190,8 +1036,7 @@ async function handleConfirm() {
 
 /* ===== 响应式 ===== */
 @media (max-width: 1100px) {
-  .review-issues { width: 200px; }
-  .review-products { width: 170px; }
+  .review-products { width: 180px; }
 }
 
 @media (max-width: 900px) {
@@ -1214,48 +1059,53 @@ async function handleConfirm() {
     padding: 6px 12px;
   }
 
-  .review-issues {
-    width: 100%;
-    max-height: 200px;
-  }
-
   .review-editor {
     min-height: 400px;
   }
 }
 
-/* 缺失字段高亮 */
-.field-missing :deep(.el-form-item__label) {
-  color: #f56c6c;
+/* 字段级校验：问题直接贴在数据上，不再占用独立侧栏 */
+.field-missing :deep(.el-form-item__label),
+.field-has-error :deep(.el-form-item__label) {
+  color: #c93636;
   font-weight: 600;
 }
 
-.field-missing :deep(.el-input-number) {
-  border-color: #f56c6c;
+.field-has-warn :deep(.el-form-item__label) {
+  color: #a65a00;
+  font-weight: 600;
 }
 
-/* 问题跳转字段高亮动画 */
-.field-highlight {
-  animation: highlight-pulse 2s ease-out;
+.field-missing :deep(.el-input__wrapper),
+.field-has-error :deep(.el-input__wrapper) {
+  background: #fff8f8;
+  box-shadow: 0 0 0 1px #dc6262 inset !important;
 }
 
-@keyframes highlight-pulse {
-  0% { background-color: #fef0f0; box-shadow: 0 0 0 2px #f56c6c; }
-  100% { background-color: transparent; box-shadow: none; }
+.field-has-warn :deep(.el-input__wrapper) {
+  background: #fffaf1;
+  box-shadow: 0 0 0 1px #d79534 inset !important;
+}
+
+.field-has-error::after,
+.field-has-warn::after {
+  display: block;
+  width: 100%;
+  margin-top: -12px;
+  font-size: 12px;
+  line-height: 1.45;
+  content: attr(data-issue);
+}
+
+.field-has-error::after {
+  color: #b42318;
+}
+
+.field-has-warn::after {
+  color: #9a5b0a;
 }
 
 @media (max-width: 767px) {
-  .review-topbar {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-    padding: 10px 12px;
-  }
-
-  .topbar-metrics {
-    justify-content: space-between;
-  }
-
   .fields-form .fields-grid {
     grid-template-columns: 1fr;
   }
@@ -1287,4 +1137,17 @@ async function handleConfirm() {
 :deep(.cell-issue-missing) {
   background-color: #fef0f0 !important;
 }
+
+:deep(.cell-issue-error) {
+  color: #b42318;
+  font-weight: 600;
+  background-color: #fff0f0 !important;
+}
+
+:deep(.cell-issue-warn) {
+  color: #8a4b00;
+  font-weight: 600;
+  background-color: #fff7e8 !important;
+}
 </style>
+  min-height: 28px;
diff --git a/frontend/src/pages/components/ppt/PptWorkspaceNav.vue b/frontend/src/pages/components/ppt/PptWorkspaceNav.vue
index 3f912ab..25300d2 100644
--- a/frontend/src/pages/components/ppt/PptWorkspaceNav.vue
+++ b/frontend/src/pages/components/ppt/PptWorkspaceNav.vue
@@ -45,13 +45,17 @@ export interface StepDef {
   icon: Component
 }
 
-defineProps<{
+withDefaults(defineProps<{
   currentStep: number
   maxAccessibleStep: number
   compact?: boolean
   stepErrors?: number[]
   stepWarnings?: number[]
-}>()
+}>(), {
+  compact: false,
+  stepErrors: () => [0, 0, 0, 0, 0],
+  stepWarnings: () => [0, 0, 0, 0, 0],
+})
 
 defineEmits<{
   'select-step': [step: number]
@@ -70,14 +74,14 @@ const steps: StepDef[] = [
 .ws-nav {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 12px 8px;
-  min-width: 180px;
+  gap: 6px;
+  padding: 8px 4px;
+  min-width: 196px;
   flex-shrink: 0;
 }
 
 .ws-nav.collapsed {
-  min-width: 52px;
+  min-width: 58px;
   align-items: center;
 }
 
@@ -85,43 +89,47 @@ const steps: StepDef[] = [
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 10px;
+  min-height: 48px;
+  padding: 9px 12px;
+  border: 1px solid transparent;
+  border-radius: 12px;
   background: transparent;
   cursor: pointer;
   text-align: left;
-  transition: background 0.15s, color 0.15s;
-  color: #5f7a69;
+  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
+  color: #607168;
   font-size: 14px;
   line-height: 1.4;
   position: relative;
 }
 
 .ws-nav__item:hover:not(:disabled) {
-  background: #f0f7f3;
-  color: #1a2e23;
+  background: #fff;
+  border-color: #dfe7e2;
+  color: #17251e;
 }
 
 .ws-nav__item.active {
-  background: #f0f7f3;
-  color: #3B7A57;
+  background: #fff;
+  border-color: #bdd9ca;
+  color: #176b4d;
   font-weight: 600;
+  box-shadow: 0 8px 24px rgb(24 61 44 / 7%);
 }
 
 .ws-nav__item.active::before {
   content: '';
   position: absolute;
   left: 0;
-  top: 6px;
-  bottom: 6px;
+  top: 10px;
+  bottom: 10px;
   width: 3px;
-  border-radius: 0 2px 2px 0;
-  background: #3B7A57;
+  border-radius: 3px;
+  background: #176b4d;
 }
 
 .ws-nav__item.completed {
-  color: #3B7A57;
+  color: #176b4d;
 }
 
 .ws-nav__item.locked {
@@ -141,22 +149,22 @@ const steps: StepDef[] = [
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: #e8efe9;
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  background: #e8efeb;
   font-size: 15px;
   flex-shrink: 0;
 }
 
 .ws-nav__item.active .ws-nav__icon {
-  background: #3B7A57;
+  background: #176b4d;
   color: #fff;
 }
 
 .ws-nav__item.completed .ws-nav__icon {
-  background: #d1fae5;
-  color: #3B7A57;
+  background: #dff2e7;
+  color: #176b4d;
 }
 
 .ws-nav__item.has-error .ws-nav__icon {
@@ -183,7 +191,7 @@ const steps: StepDef[] = [
 
 .ws-nav__desc {
   font-size: 12px;
-  color: #8b9e93;
+  color: #84938b;
   font-weight: 400;
 }
 
@@ -212,7 +220,9 @@ const steps: StepDef[] = [
 }
 
 .collapsed .ws-nav__item {
-  padding: 10px;
+  width: 48px;
+  min-height: 48px;
+  padding: 8px;
   justify-content: center;
 }