feat(ssa): Complete V11 UI development and frontend-backend integration - Pixel-perfect V11 UI, multi-task support, Word export, input overlay fix, code cleanup. MVP Phase 1 core 95% complete.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-20 14:46:45 +08:00
parent 49b5c37cb1
commit 8d496d1515
38 changed files with 7255 additions and 1074 deletions
--- a/docs/03-业务模块/SSA-智能统计分析/04-开发计划/05-前端UI改进开发计划-V8双屏版.md
+++ b/docs/03-业务模块/SSA-智能统计分析/04-开发计划/05-前端UI改进开发计划-V8双屏版.md
@@ -0,0 +1,796 @@
+# SSA-Pro 前端 UI 改进开发计划 - V8 双屏版
+
+> **文档版本：** v1.1  
+> **创建日期：** 2026-02-20  
+> **最后更新：** 2026-02-20（根据审查反馈更新）  
+> **预计工时：** 3-4 天（前端）  
+> **依赖文档：** 
+> - `03-UI设计/产品原型图V8双屏版.html`
+> - `03-UI设计/SSA-Pro UX方案对比与技术选型报告.md`
+> - `docs/03-业务模块/AIA-AI智能问答/00-模块当前状态与开发指南.md`
+> - `frontend-v2/src/shared/components/Chat/README.md`（流式响应能力）
+
+---
+
+## 1. 背景与目标
+
+### 1.1 背景
+
+当前 SSA 前端已实现基础功能（Phase 1 完成 85%），但 UI/UX 存在以下问题：
+
+| 问题 | 影响 |
+|------|------|
+| 单列布局 | 统计结果（表格、图表）展示空间狭窄 |
+| 对话被结果顶开 | 用户无法同时查看计划和结果 |
+| 缺乏专业感 | 不像 RStudio/SPSS 等专业统计软件 |
+| 交互割裂 | 数据上传、分析、结果分散在不同卡片 |
+
+### 1.2 目标
+
+采用 **V8 双屏工作台** 架构（类似 Claude Artifacts），实现：
+
+1. **左右分屏**：左侧对话控制 + 右侧工作区（60%+ 空间）
+2. **上下文保持**：对话和结果独立展示，互不干扰
+3. **专业信任感**：类似 RStudio 的布局，提升医生信任
+4. **完整流程可视化**：SAP → 执行日志 → 结果报告
+
+---
+
+## 2. 架构设计
+
+### 2.1 整体布局
+
+```
+┌────────┬─────────────────────────┬──────────────────────────────────────┐
+│ 64px   │     400-450px           │            剩余空间                   │
+│        │                         │                                       │
+│ 全局   │    对话控制区            │         工作区 (Artifacts)            │
+│ 导航   │    (ChatPane)           │         (ArtifactPane)                │
+│        │                         │                                       │
+│ ┌───┐  │ ┌─────────────────────┐ │  ┌─────────────────────────────────┐ │
+│ │新建│ │ │ AI 欢迎语           │ │  │  视图标题 + 操作按钮            │ │
+│ └───┘  │ │ 用户消息             │ │  └─────────────────────────────────┘ │
+│ ┌───┐  │ │ AI 回复 + 交互卡片   │ │  ┌─────────────────────────────────┐ │
+│ │历史│ │ │ 数据挂载确认         │ │  │                                  │ │
+│ └───┘  │ │ 执行状态提示         │ │  │  动态内容区域                    │ │
+│ ┌───┐  │ └─────────────────────┘ │  │  - SAP 文档                       │ │
+│ │设置│ │                         │  │  - 执行日志                       │ │
+│ └───┘  │ ┌─────────────────────┐ │  │  - 结果报告（表格 + 图表）       │ │
+│        │ │ 📎 数据挂载区        │ │  │                                  │ │
+│        │ │ ────────────────── │ │  └─────────────────────────────────┘ │
+│        │ │ 输入框 + 发送按钮    │ │                                       │
+│        │ └─────────────────────┘ │                                       │
+└────────┴─────────────────────────┴──────────────────────────────────────┘
+```
+
+### 2.2 右侧工作区三种视图
+
+| 视图 | 触发条件 | 内容 |
+|------|---------|------|
+| **empty** | 初始状态 | 空状态提示（图标 + 文案） |
+| **sap** | 生成 SAP 后 | 研究目的、推荐方法、统计护栏 |
+| **execution** | 执行分析时 | 实时日志（护栏检查、自动降级） |
+| **result** | 执行完成后 | AI 解读、三线表、图表、R 代码 |
+
+### 2.3 状态管理设计
+
+```typescript
+// stores/ssaStore.ts 扩展
+interface SSAWorkspaceState {
+  // 现有状态
+  mode: SSAMode;
+  currentSession: SSASession | null;
+  currentPlan: AnalysisPlan | null;
+  executionResult: ExecutionResult | null;
+  traceSteps: TraceStep[];
+  
+  // 🆕 新增：右侧面板状态
+  activePane: 'empty' | 'sap' | 'execution' | 'result';
+  currentArtifact: {
+    type: 'sap' | 'trace' | 'result';
+    data: any;
+  } | null;
+  
+  // 🆕 新增：数据挂载状态
+  mountedFile: {
+    name: string;
+    size: number;
+    rowCount: number;
+  } | null;
+  
+  // 🆕 新增：动作
+  setActivePane: (pane: 'empty' | 'sap' | 'execution' | 'result') => void;
+  setArtifact: (artifact: { type: string; data: any } | null) => void;
+  setMountedFile: (file: { name: string; size: number; rowCount: number } | null) => void;
+  
+  // 🆕 新增：历史记录状态恢复（审查反馈 - 盲区二）
+  hydrateFromHistory: (session: SSASession) => void;
+}
+```
+
+**历史记录状态恢复逻辑**：
+
+```typescript
+// hydrateFromHistory 实现
+hydrateFromHistory: (session: SSASession) => {
+  // 根据 session 状态恢复右侧面板
+  if (session.executionResult) {
+    set({ 
+      activePane: 'result', 
+      currentArtifact: { type: 'result', data: session.executionResult } 
+    });
+  } else if (session.currentPlan) {
+    set({ 
+      activePane: 'sap', 
+      currentArtifact: { type: 'sap', data: session.currentPlan } 
+    });
+  } else {
+    set({ activePane: 'empty', currentArtifact: null });
+  }
+  
+  // 恢复数据挂载状态
+  if (session.dataSchema) {
+    set({
+      mountedFile: {
+        name: session.title,
+        size: 0,
+        rowCount: session.dataSchema.rowCount,
+      }
+    });
+  }
+}
+```
+
+---
+
+## 3. 组件复用分析
+
+### 3.1 可复用的 AIA 组件
+
+| 组件 | 来源路径 | 复用程度 | 改造需求 |
+|------|---------|----------|----------|
+| **ResizableSplitPane** | `aia/protocol-agent/components/` | 🟢 100% | 直接复用 |
+| **AIStreamChat** | `shared/components/Chat/` | 🟢 90% | 定制欢迎语 |
+| **ThinkingBlock** | `shared/components/Chat/` | 🟢 100% | 直接复用 |
+| **ViewSwitcher** | `aia/protocol-agent/components/` | 🟡 70% | 修改视图选项 |
+| **MarkdownContent** | `aia/protocol-agent/components/` | 🟢 100% | SAP 文档渲染 |
+
+### 3.2 SSA 现有组件保留/改造
+
+| 组件 | 当前路径 | 处理方式 | 说明 |
+|------|---------|---------|------|
+| **ModeSwitch** | `ssa/components/` | ⏸️ 暂时移除 | V8 聚焦智能分析模式 |
+| **PlanCard** | `ssa/components/` | 🔄 改造 | 移入 ChatPane 作为交互卡片 |
+| **ExecutionTrace** | `ssa/components/` | 🔄 改造 | 移入 ArtifactPane |
+| **ResultCard** | `ssa/components/` | 🔄 重构 | 拆分为独立组件 |
+| **APATable** | `ssa/components/` | ✅ 保留 | 三线表核心组件 |
+
+### 3.3 需要新开发的组件
+
+| 组件 | 说明 | 预估工时 |
+|------|------|----------|
+| **SSAWorkspace** | 双屏布局主页面 | 4h |
+| **GlobalNav** | 左侧全局导航栏 | 2h |
+| **ChatPane** | 左侧对话控制区 | 3h |
+| **DataMountZone** | 数据挂载区（嵌入式） | 2h |
+| **ArtifactPane** | 右侧工作区容器 | 2h |
+| **SAPViewer** | SAP 文档视图 | 3h |
+| **ExecutionViewer** | 执行日志视图 | 2h |
+| **ResultViewer** | 结果报告视图 | 4h |
+| **SciTable** | 三线表组件（科学格式） | 2h |
+| **ChartViewer** | 图表展示组件 | 2h |
+| **CodeModal** | R 代码预览模态框 | 1h |
+
+---
+
+## 4. 详细开发任务
+
+### 4.1 Day 1: 架构搭建 + 组件下沉
+
+| 任务 | 预估 | 说明 |
+|------|------|------|
+| 下沉 `ResizableSplitPane` 到 shared | 1h | 提取为系统级 Common 组件 |
+| 创建 `SSAWorkspace` 骨架 | 2h | 双屏布局 + 状态联动 |
+| 改造 `ssaStore.ts` | 1.5h | 新增 activePane、artifact 状态 |
+| 创建 `GlobalNav` 组件 | 1.5h | 新建/历史/设置图标 |
+| 样式文件创建 | 1h | `ssa-workspace.css` |
+
+**Day 1 交付物：**
+- [ ] 双屏布局可拖拽
+- [ ] 左侧空白区域 + 右侧空白区域
+- [ ] 全局状态管理就绪
+
+### 4.2 Day 2: 左侧对话区 + 流式联动
+
+| 任务 | 预估 | 说明 |
+|------|------|------|
+| 创建 `ChatPane` 组件 | 2h | 消息列表 + 输入区 |
+| 创建 `DataMountZone` 组件 | 2h | 嵌入式数据挂载 |
+| 改造 `PlanCard` 为交互卡片 | 1.5h | 点击触发右侧 SAP 展示 |
+| 集成 `AIStreamChat` | 1.5h | 咨询模式对话 |
+| 🆕 实现流式 Artifact 标记解析 | 2h | **审查反馈 - 盲区一** |
+| 左侧区域样式精调 | 1h | 参考原型图 |
+
+**Day 2 交付物：**
+- [ ] 数据上传 → 挂载区显示文件信息
+- [ ] 输入分析需求 → 生成 SAP
+- [ ] 点击 SAP 卡片 → 右侧展示详情
+- [ ] 🆕 AI 流式输出中解析 Artifact 标记，自动切换右侧面板
+
+### 4.3 Day 3: 右侧工作区
+
+| 任务 | 预估 | 说明 |
+|------|------|------|
+| 创建 `ArtifactPane` 容器 | 1h | 动态视图切换 |
+| 创建 `SAPViewer` 组件 | 2.5h | 研究目的、推荐方法、护栏 |
+| 创建 `ExecutionViewer` 组件 | 2h | 实时日志 + 动画 |
+| 创建 `SciTable` 组件 | 2h | 三线表科学格式 |
+| 创建 `ChartViewer` 组件 | 1.5h | Base64 图片展示 |
+
+**Day 3 交付物：**
+- [ ] SAP 文档视图完整
+- [ ] 执行日志实时展示
+- [ ] 三线表科学格式
+
+### 4.4 Day 4: 结果展示 + 联调
+
+| 任务 | 预估 | 说明 |
+|------|------|------|
+| 创建 `ResultViewer` 组件 | 2.5h | AI 解读 + 表格 + 图表 |
+| 创建 `CodeModal` 组件 | 1h | R 代码预览模态框 |
+| 下载功能完善 | 1.5h | 代码下载 + 报告下载 |
+| 端到端联调测试 | 2h | 完整流程验证 |
+| UI 样式精调 | 1h | 对齐原型图 |
+
+**Day 4 交付物：**
+- [ ] 结果报告完整展示
+- [ ] R 代码一键下载
+- [ ] 端到端流程通过
+
+---
+
+## 5. 组件详细设计
+
+### 5.1 ResizableSplitPane（复用）
+
+直接从 `aia/protocol-agent/components/ResizableSplitPane.tsx` 复制到 `shared/components/Layout/`。
+
+```typescript
+// 使用方式
+<ResizableSplitPane
+  defaultLeftRatio={35}      // 左侧 35%
+  minLeftRatio={25}
+  maxLeftRatio={50}
+  enableDrag={true}
+  storageKey="ssa-split-ratio"
+  leftPanel={<ChatPane />}
+  rightPanel={<ArtifactPane />}
+/>
+```
+
+### 5.2 SSAWorkspace（主页面）
+
+```tsx
+// modules/ssa/SSAWorkspace.tsx
+const SSAWorkspace: React.FC = () => {
+  const { activePane, setActivePane } = useSSAStore();
+  
+  return (
+    <div className="ssa-workspace">
+      {/* 全局导航 */}
+      <GlobalNav />
+      
+      {/* 主工作区 */}
+      <main className="ssa-main">
+        <ResizableSplitPane
+          leftPanel={<ChatPane />}
+          rightPanel={<ArtifactPane activePane={activePane} />}
+          defaultLeftRatio={35}
+        />
+      </main>
+    </div>
+  );
+};
+```
+
+### 5.3 GlobalNav（全局导航）
+
+```tsx
+// modules/ssa/components/GlobalNav.tsx
+const GlobalNav: React.FC = () => {
+  return (
+    <nav className="ssa-global-nav">
+      <div className="nav-logo">
+        <BarChart3 size={24} />
+      </div>
+      <div className="nav-actions">
+        <button title="新建分析"><Plus /></button>
+        <button title="历史记录"><History /></button>
+        <button title="配置中心"><Settings /></button>
+      </div>
+    </nav>
+  );
+};
+```
+
+### 5.4 ChatPane（对话控制区）
+
+```tsx
+// modules/ssa/components/ChatPane.tsx
+const ChatPane: React.FC = () => {
+  const { mountedFile, setMountedFile } = useSSAStore();
+  
+  return (
+    <div className="ssa-chat-pane">
+      {/* 头部 */}
+      <header className="chat-header">
+        <span className="session-title">新的统计分析</span>
+        <StatusBadge status="ready" />
+      </header>
+      
+      {/* 消息列表 */}
+      <div className="chat-messages">
+        {/* AI 欢迎语 */}
+        {/* 用户消息 */}
+        {/* AI 回复 + 交互卡片 */}
+      </div>
+      
+      {/* 输入区 */}
+      <div className="chat-input-area">
+        {/* 数据挂载区 */}
+        {mountedFile && <DataMountZone file={mountedFile} />}
+        
+        {/* 输入框 */}
+        <div className="input-container">
+          <UploadButton />
+          <TextArea placeholder="描述您的分析需求..." />
+          <SendButton />
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+### 5.5 DataMountZone（数据挂载区）
+
+```tsx
+// modules/ssa/components/DataMountZone.tsx
+interface DataMountZoneProps {
+  file: { name: string; size: number; rowCount: number };
+  onRemove: () => void;
+}
+
+const DataMountZone: React.FC<DataMountZoneProps> = ({ file, onRemove }) => {
+  return (
+    <div className="data-mount-zone">
+      <FileIcon type="csv" />
+      <div className="file-info">
+        <span className="file-name">{file.name}</span>
+        <span className="file-meta">{file.rowCount} rows • {formatFileSize(file.size)}</span>
+      </div>
+      <button className="remove-btn" onClick={onRemove}>
+        <X size={14} />
+      </button>
+    </div>
+  );
+};
+```
+
+### 5.6 ArtifactPane（工作区容器）
+
+```tsx
+// modules/ssa/components/ArtifactPane.tsx
+interface ArtifactPaneProps {
+  activePane: 'empty' | 'sap' | 'execution' | 'result';
+}
+
+const ArtifactPane: React.FC<ArtifactPaneProps> = ({ activePane }) => {
+  const { currentArtifact } = useSSAStore();
+  
+  // 空状态
+  if (activePane === 'empty') {
+    return (
+      <div className="artifact-empty">
+        <Layers size={64} />
+        <p>分析方案、执行过程与图表将在这里展示</p>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="artifact-pane">
+      {/* 头部 */}
+      <header className="artifact-header">
+        <ArtifactIcon type={activePane} />
+        <h2>{getArtifactTitle(activePane)}</h2>
+        <div className="artifact-actions">
+          {activePane === 'result' && <CodeButton />}
+          <DownloadButton />
+        </div>
+      </header>
+      
+      {/* 内容区 */}
+      <div className="artifact-content">
+        {activePane === 'sap' && <SAPViewer data={currentArtifact?.data} />}
+        {activePane === 'execution' && <ExecutionViewer />}
+        {activePane === 'result' && <ResultViewer data={currentArtifact?.data} />}
+      </div>
+    </div>
+  );
+};
+```
+
+### 5.7 SciTable（三线表）
+
+```tsx
+// modules/ssa/components/SciTable.tsx
+interface SciTableProps {
+  headers: string[];
+  rows: (string | number)[][];
+  caption?: string;
+}
+
+const SciTable: React.FC<SciTableProps> = ({ headers, rows, caption }) => {
+  return (
+    <div className="sci-table-container">
+      {caption && <caption>{caption}</caption>}
+      <table className="sci-table">
+        <thead>
+          <tr>
+            {headers.map((h, i) => <th key={i}>{h}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i}>
+              {row.map((cell, j) => <td key={j}>{cell}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+```
+
+**三线表样式（科学格式）：**
+
+```css
+.sci-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.sci-table th {
+  border-top: 2px solid #1e293b;
+  border-bottom: 1px solid #1e293b;
+  padding: 10px 12px;
+  text-align: left;
+  font-weight: 600;
+}
+
+.sci-table td {
+  border-bottom: 1px solid #e2e8f0;
+  padding: 10px 12px;
+}
+
+.sci-table tr:last-child td {
+  border-bottom: 2px solid #1e293b;
+}
+```
+
+---
+
+## 6. 与后端对接
+
+### 6.1 现有 API（无需修改）
+
+| API | 说明 |
+|-----|------|
+| `POST /api/v1/ssa/sessions` | 创建会话（上传数据） |
+| `POST /api/v1/ssa/sessions/:id/plan` | 生成分析计划 |
+| `POST /api/v1/ssa/sessions/:id/execute` | 执行分析 |
+| `GET /api/v1/ssa/sessions/:id/code` | 下载 R 代码 |
+
+### 6.2 返回数据结构适配
+
+```typescript
+// 执行结果返回结构（后端已实现）
+interface ExecutionResult {
+  success: boolean;
+  tool_code: string;
+  method_used: string;
+  
+  // 表格数据（用于 SciTable）
+  result_table: {
+    headers: string[];
+    rows: (string | number)[][];
+  };
+  
+  // 图表数据（用于 ChartViewer）
+  plots?: {
+    type: 'boxplot' | 'histogram' | 'scatter';
+    data: string; // Base64
+  }[];
+  
+  // AI 解读
+  interpretation: string;
+  
+  // R 代码
+  reproducible_code: string;
+}
+```
+
+---
+
+## 6.3 🆕 流式响应与数据流技术方案（审查反馈 - 盲区一、四）
+
+### 已有能力
+
+| 能力 | 位置 | 状态 |
+|------|------|------|
+| **useAIStream Hook** | `shared/components/Chat/hooks/useAIStream.ts` | ✅ 已实现 |
+| **StreamingService** | `backend/src/common/streaming/` | ✅ 已实现 |
+| **traceSteps 状态管理** | `ssaStore.ts` | ✅ 已实现 |
+
+### 流式 Artifact 标记解析
+
+AI 在对话流中输出结构化标记，前端实时解析并触发右侧面板切换：
+
+```typescript
+// AI 输出示例
+"我已为您生成分析方案：<Artifact type='sap' id='plan-001' />"
+
+// useAIStream 扩展：解析 Artifact 标记
+const handleChunk = (chunk: string) => {
+  // 正常内容追加
+  setContent(prev => prev + chunk);
+  
+  // 检测 Artifact 标记
+  const artifactMatch = chunk.match(/<Artifact type='(\w+)' id='([^']+)' \/>/);
+  if (artifactMatch) {
+    const [_, type, id] = artifactMatch;
+    ssaStore.setActivePane(type as 'sap' | 'execution' | 'result');
+    ssaStore.loadArtifact(type, id);
+  }
+};
+```
+
+### 执行日志数据流方案
+
+| 方案 | 说明 | MVP 采用 |
+|------|------|---------|
+| **方案 A** | 对话流内嵌执行状态（复用 useAIStream） | ✅ 推荐 |
+| **方案 B** | 独立 SSE 端点 | Phase 2 |
+| **方案 C** | 同步返回 + 伪进度 | 备选 |
+
+**推荐方案 A 示例**：
+
+```
+// AI 对话流中输出执行状态
+data: {"choices":[{"delta":{"content":"🔍 正在检验正态性..."}}]}
+data: {"choices":[{"delta":{"content":"✅ Shapiro-Wilk p=0.32，符合正态分布"}}]}
+data: {"choices":[{"delta":{"content":"📊 正在执行独立样本 T 检验..."}}]}
+data: {"choices":[{"delta":{"content":"<Artifact type='result' id='xxx' />"}}]}
+```
+
+**优势**：直接复用 `AIStreamChat` 组件和 `useAIStream` Hook，无需额外开发 SSE 端点。
+
+---
+
+## 7. 样式规范
+
+### 7.1 颜色方案
+
+```css
+:root {
+  /* 主色 */
+  --ssa-primary: #4F46E5;      /* Indigo */
+  --ssa-primary-light: #EEF2FF;
+  
+  /* 状态色 */
+  --ssa-success: #22C55E;
+  --ssa-warning: #F59E0B;
+  --ssa-error: #EF4444;
+  
+  /* 中性色 */
+  --ssa-bg: #F1F5F9;
+  --ssa-card: #FFFFFF;
+  --ssa-border: #E2E8F0;
+  --ssa-text: #334155;
+  --ssa-text-secondary: #64748B;
+}
+```
+
+### 7.2 间距规范
+
+```css
+--spacing-xs: 4px;
+--spacing-sm: 8px;
+--spacing-md: 16px;
+--spacing-lg: 24px;
+--spacing-xl: 32px;
+```
+
+### 7.3 动画规范
+
+```css
+/* 淡入 */
+.fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+/* 滑入 */
+.slide-up {
+  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* 弹出 */
+.pop-in {
+  animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+```
+
+---
+
+## 8. 验收标准
+
+### 8.1 功能验收
+
+| 功能 | 验收标准 |
+|------|---------|
+| 双屏布局 | 左右面板可拖拽调整，比例记忆 |
+| 数据上传 | 上传后在挂载区显示文件信息 |
+| SAP 生成 | 点击卡片在右侧展示完整 SAP |
+| 执行日志 | 实时展示护栏检查、自动降级 |
+| 结果展示 | AI 解读 + 三线表 + 图表 |
+| 代码下载 | 点击按钮下载 .R 文件 |
+
+### 8.2 UI 验收
+
+- [ ] 100% 还原 V8 原型图布局
+- [ ] 三线表符合科学论文格式
+- [ ] 动画流畅（60fps）
+- [ ] 响应式（1280px+ 宽屏）
+
+### 8.3 性能验收
+
+- [ ] 首屏加载 < 2s
+- [ ] 拖拽无卡顿
+- [ ] 大表格（1000行）渲染 < 500ms
+
+---
+
+## 9. 风险与应对
+
+| 风险 | 概率 | 应对策略 |
+|------|------|---------|
+| ResizableSplitPane 复用不兼容 | 低 | 预留 1h 调试时间 |
+| 三线表样式与原型有差异 | 中 | 参考科学论文格式，与设计师沟通 |
+| 大数据量表格性能问题 | 中 | 使用虚拟滚动（react-window） |
+| 后端返回数据结构不一致 | 低 | 已确认现有 API 结构 |
+
+### 9.1 🆕 Phase 2 延后任务（审查反馈 - 盲区三）
+
+**响应式降级策略**：MVP 阶段聚焦 PC 端宽屏（1280px+），小屏幕降级方案延后至 Phase 2。
+
+| 屏幕宽度 | MVP 处理 | Phase 2 计划 |
+|---------|---------|-------------|
+| ≥ 1280px | ✅ 正常双屏 | - |
+| 1024-1280px | ⚠️ 可用但略挤 | 调整比例 |
+| < 1024px | ❌ 不支持 | Drawer/Modal 降级 |
+
+**Phase 2 降级方案预留设计**：
+
+```css
+@media (max-width: 1024px) {
+  .ssa-workspace {
+    .artifact-pane { display: none; }
+    .chat-pane { width: 100%; }
+  }
+  
+  .artifact-drawer {
+    position: fixed;
+    right: 0;
+    width: 90vw;
+    height: 100vh;
+  }
+}
+```
+
+---
+
+## 10. 相关文档
+
+| 文档 | 路径 |
+|------|------|
+| 产品原型图 V8 | `03-UI设计/产品原型图V8双屏版.html` |
+| UX 对比报告 | `03-UI设计/SSA-Pro UX方案对比与技术选型报告.md` |
+| AIA 组件文档 | `docs/03-业务模块/AIA-AI智能问答/00-模块当前状态与开发指南.md` |
+| Chat 组件文档 | `frontend-v2/src/shared/components/Chat/README.md` |
+| 任务清单 | `04-开发计划/01-任务清单与进度追踪.md` |
+| 🆕 审查报告 | `06-开发记录/SSA-Pro 前端 UI 改进计划审查报告.md` |
+| 🆕 审查回应 | `06-开发记录/SSA-Pro 前端UI改进计划-审查回应.md` |
+
+---
+
+## 11. 附录：文件结构（V11 最终版）
+
+```
+frontend-v2/src/modules/ssa/
+├── index.tsx                    # 模块入口
+├── SSAWorkspace.tsx             # V11 主工作区（全屏 Gemini 风格）
+├── components/
+│   ├── SSASidebar.tsx           # 左侧抽屉栏（可展开/收起）
+│   ├── SSAChatPane.tsx          # 中间对话区
+│   ├── SSAWorkspacePane.tsx     # 右侧工作区（SAP/执行/结果视图）
+│   ├── SSACodeModal.tsx         # R 代码模态框
+│   ├── SSAToast.tsx             # Toast 通知
+│   ├── TypeWriter.tsx           # 打字机效果组件
+│   └── index.ts                 # 组件导出
+├── stores/
+│   └── ssaStore.ts              # Zustand 状态管理
+├── hooks/
+│   ├── useAnalysis.ts           # 分析相关 API 调用
+│   ├── useArtifactParser.ts     # 流式 Artifact 标记解析
+│   └── index.ts
+├── styles/
+│   └── ssa-workspace.css        # V11 完整样式（~1900 行）
+└── types/
+    └── index.ts                 # 类型定义
+```
+
+## 12. 端到端测试清单
+
+### 12.1 基本功能测试
+
+| 序号 | 测试项 | 预期结果 | 状态 |
+|------|--------|---------|------|
+| 1 | 打开 SSA 模块 | 全屏显示，左侧收起的抽屉栏，中间欢迎消息 | ⬜ |
+| 2 | 点击汉堡菜单 | 左侧抽屉栏展开，显示 Logo、新建按钮、历史记录 | ⬜ |
+| 3 | 点击回形针上传数据 | 显示上传进度，成功后显示文件信息 | ⬜ |
+| 4 | 输入分析查询并发送 | 显示 AI 响应，右侧工作区自动打开 SAP 视图 | ⬜ |
+| 5 | 点击"开始执行分析" | 切换到执行视图，显示实时日志 | ⬜ |
+| 6 | 执行完成 | 切换到结果视图，显示统计表格、图表、AI 解读 | ⬜ |
+| 7 | 点击"查看代码" | 弹出代码模态框，显示 R 代码 | ⬜ |
+| 8 | 点击"下载 .R 文件" | 下载真实的分析代码文件 | ⬜ |
+| 9 | 点击"导出报告" | 下载 HTML 格式的分析报告 | ⬜ |
+| 10 | 按 Esc 键 | 关闭代码模态框/工作区 | ⬜ |
+| 11 | 按 Ctrl+B | 切换左侧抽屉栏 | ⬜ |
+| 12 | 按 Ctrl+N | 新建分析（重置状态） | ⬜ |
+| 13 | 点击返回按钮 | 返回上一页 | ⬜ |
+
+### 12.2 错误处理测试
+
+| 序号 | 测试项 | 预期结果 | 状态 |
+|------|--------|---------|------|
+| 1 | 上传无效文件格式 | 显示错误提示卡片 | ⬜ |
+| 2 | R 服务不可用时执行 | 显示执行失败视图，可点击重试 | ⬜ |
+| 3 | 网络断开时操作 | 显示错误 Toast | ⬜ |
+
+### 12.3 UI/UX 测试
+
+| 序号 | 测试项 | 预期结果 | 状态 |
+|------|--------|---------|------|
+| 1 | 对话区滚动 | 内容可滚动，输入框不遮挡按钮 | ⬜ |
+| 2 | AI 消息打字机效果 | 文字逐字显示，带闪烁光标 | ⬜ |
+| 3 | 动态引擎状态 | 根据状态显示 Ready/Processing/Running | ⬜ |
+| 4 | 历史记录加载 | 展开抽屉时加载历史，显示加载状态 | ⬜ |
+
+---
+
+## 13. 版本更新记录
+
+| 版本 | 日期 | 更新内容 |
+|------|------|---------|
+| v1.0 | 2026-02-20 | 初始版本 |
+| v1.1 | 2026-02-20 | 根据审查反馈更新：<br>• 盲区一：新增流式 Artifact 标记解析任务<br>• 盲区二：补充 hydrateFromHistory 状态恢复逻辑<br>• 盲区三：风险章节注明响应式降级延后至 Phase 2<br>• 盲区四：新增 6.3 节，说明流式响应技术方案 |
+| v2.0 | 2026-02-20 | **V11 升级：**<br>• 全屏 Gemini 风格布局<br>• 删除 22 个旧版组件<br>• 新增 6 个 V11 核心组件<br>• 完善报告/代码导出功能<br>• 实现流式 Artifact 标记解析框架<br>• 更新文件结构和测试清单 |
+
+---
+
+**文档维护者：** SSA 开发团队  
+**最后更新：** 2026-02-20  
+**审查状态：** ✅ 已通过（2026-02-20）