From 8d496d1515d8296a618940b7947aeb567f5fc396 Mon Sep 17 00:00:00 2001 From: HaHafeng Date: Fri, 20 Feb 2026 14:46:45 +0800 Subject: [PATCH] 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 --- .../modules/ssa/executor/RClientService.ts | 26 + .../src/modules/ssa/routes/analysis.routes.ts | 54 +- .../SSA-智能统计分析/00-模块当前状态与开发指南.md | 17 +- .../03-UI设计/SSA-Pro UX方案对比与技术选型报告.md | 102 + .../SSA-智能统计分析/03-UI设计/V11.html | 600 +++++ .../03-UI设计/产品原型图V8双屏版.html | 470 ++++ .../04-开发计划/05-前端UI改进开发计划-V8双屏版.md | 796 +++++++ .../06-开发记录/SSA-Pro 前端 UI 改进计划审查报告.md | 103 + .../06-开发记录/SSA-Pro 前端UI改进计划-审查回应.md | 244 ++ .../SSA-Pro-V11-UI-Development-Summary-2026-02-20.md | 239 ++ .../06-开发记录/UI遮挡Bug终极修复指南.md | 88 + .../aia/protocol-agent/ProtocolAgentPage.tsx | 2 +- frontend-v2/src/modules/ssa/SSAWorkspace.tsx | 90 + .../src/modules/ssa/components/APATable.tsx | 130 - .../ssa/components/ExecutionProgress.tsx | 42 - .../modules/ssa/components/ExecutionTrace.tsx | 90 - .../src/modules/ssa/components/ModeSwitch.tsx | 50 - .../src/modules/ssa/components/PlanCard.tsx | 105 - .../src/modules/ssa/components/ResultCard.tsx | 177 -- .../ssa/components/SAPDownloadButton.tsx | 79 - .../src/modules/ssa/components/SAPPreview.tsx | 74 - .../modules/ssa/components/SSAChatPane.tsx | 442 ++++ .../modules/ssa/components/SSACodeModal.tsx | 108 + .../src/modules/ssa/components/SSASidebar.tsx | 137 ++ .../src/modules/ssa/components/SSAToast.tsx | 47 + .../ssa/components/SSAWorkspacePane.tsx | 655 ++++++ .../src/modules/ssa/components/TypeWriter.tsx | 81 + .../src/modules/ssa/components/index.ts | 22 +- frontend-v2/src/modules/ssa/hooks/index.ts | 1 + .../src/modules/ssa/hooks/useAnalysis.ts | 333 ++- .../modules/ssa/hooks/useArtifactParser.ts | 90 + frontend-v2/src/modules/ssa/index.tsx | 289 +-- .../src/modules/ssa/stores/ssaStore.ts | 195 +- .../src/modules/ssa/styles/ssa-workspace.css | 2095 +++++++++++++++++ frontend-v2/src/modules/ssa/types/index.ts | 40 +- .../components/Layout/ResizableSplitPane.tsx | 202 ++ .../src/shared/components/Layout/index.ts | 5 + r-statistics-service/tools/t_test_ind.R | 9 +- 38 files changed, 7255 insertions(+), 1074 deletions(-) create mode 100644 docs/03-业务模块/SSA-智能统计分析/03-UI设计/SSA-Pro UX方案对比与技术选型报告.md create mode 100644 docs/03-业务模块/SSA-智能统计分析/03-UI设计/V11.html create mode 100644 docs/03-业务模块/SSA-智能统计分析/03-UI设计/产品原型图V8双屏版.html create mode 100644 docs/03-业务模块/SSA-智能统计分析/04-开发计划/05-前端UI改进开发计划-V8双屏版.md create mode 100644 docs/03-业务模块/SSA-智能统计分析/06-开发记录/SSA-Pro 前端 UI 改进计划审查报告.md create mode 100644 docs/03-业务模块/SSA-智能统计分析/06-开发记录/SSA-Pro 前端UI改进计划-审查回应.md create mode 100644 docs/03-业务模块/SSA-智能统计分析/06-开发记录/SSA-Pro-V11-UI-Development-Summary-2026-02-20.md create mode 100644 docs/03-业务模块/SSA-智能统计分析/06-开发记录/UI遮挡Bug终极修复指南.md create mode 100644 frontend-v2/src/modules/ssa/SSAWorkspace.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/APATable.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/ExecutionProgress.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/ExecutionTrace.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/ModeSwitch.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/PlanCard.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/ResultCard.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/SAPDownloadButton.tsx delete mode 100644 frontend-v2/src/modules/ssa/components/SAPPreview.tsx create mode 100644 frontend-v2/src/modules/ssa/components/SSAChatPane.tsx create mode 100644 frontend-v2/src/modules/ssa/components/SSACodeModal.tsx create mode 100644 frontend-v2/src/modules/ssa/components/SSASidebar.tsx create mode 100644 frontend-v2/src/modules/ssa/components/SSAToast.tsx create mode 100644 frontend-v2/src/modules/ssa/components/SSAWorkspacePane.tsx create mode 100644 frontend-v2/src/modules/ssa/components/TypeWriter.tsx create mode 100644 frontend-v2/src/modules/ssa/hooks/useArtifactParser.ts create mode 100644 frontend-v2/src/modules/ssa/styles/ssa-workspace.css create mode 100644 frontend-v2/src/shared/components/Layout/ResizableSplitPane.tsx create mode 100644 frontend-v2/src/shared/components/Layout/index.ts diff --git a/backend/src/modules/ssa/executor/RClientService.ts b/backend/src/modules/ssa/executor/RClientService.ts index 5604767a..5fcc5918 100644 --- a/backend/src/modules/ssa/executor/RClientService.ts +++ b/backend/src/modules/ssa/executor/RClientService.ts @@ -30,10 +30,14 @@ export class RClientService { async execute(sessionId: string, plan: any, session: any): Promise { const startTime = Date.now(); + // 从 OSS Key 或 session title 提取原始文件名 + const originalFilename = this.extractFilename(session); + // 构建请求体（使用统一存储服务） const requestBody = { data_source: await this.buildDataSource(session), params: plan.params, + original_filename: originalFilename, guardrails: plan.guardrails || { check_normality: true, auto_fix: true @@ -127,6 +131,28 @@ export class RClientService { }; } + /** + * 从 session 提取原始文件名 + */ + private extractFilename(session: any): string { + // 优先从 title 获取（上传时会设置为文件名） + if (session.title) { + // 如果 title 不包含扩展名，添加 .csv + if (!session.title.match(/\.(csv|xlsx|xls)$/i)) { + return `${session.title}.csv`; + } + return session.title; + } + + // 从 OSS Key 提取 + if (session.dataOssKey) { + const parts = session.dataOssKey.split('/'); + return parts[parts.length - 1] || 'data.csv'; + } + + return 'data.csv'; + } + async healthCheck(): Promise { try { const res = await this.client.get('/health'); diff --git a/backend/src/modules/ssa/routes/analysis.routes.ts b/backend/src/modules/ssa/routes/analysis.routes.ts index f308fe7f..c3134df7 100644 --- a/backend/src/modules/ssa/routes/analysis.routes.ts +++ b/backend/src/modules/ssa/routes/analysis.routes.ts @@ -155,8 +155,9 @@ export default async function analysisRoutes(app: FastifyInstance) { }); // 返回前端期望的 AnalysisPlan 格式（camelCase） + const planId = `plan_${Date.now()}`; const mockPlan = { - id: `plan_${Date.now()}`, + id: planId, toolCode: 'ST_T_TEST_IND', toolName: '独立样本 T 检验', description: `根据您的数据特征和分析需求"${query}"，推荐使用独立样本 T 检验，比较 ${groupVar} 分组下 ${valueVar} 的差异。`, @@ -171,7 +172,27 @@ export default async function analysisRoutes(app: FastifyInstance) { confidence: 0.85 }; - logger.info('[SSA:Analysis] Plan generated', { sessionId: id, query, toolCode: mockPlan.toolCode, params: mockPlan.parameters }); + // 保存用户查询消息 + await prisma.ssaMessage.create({ + data: { + sessionId: id, + role: 'user', + contentType: 'text', + content: { text: query } + } + }); + + // 保存 plan 消息（支持多任务历史） + await prisma.ssaMessage.create({ + data: { + sessionId: id, + role: 'assistant', + contentType: 'plan', + content: { ...mockPlan, query } // 保存原始查询以便后续关联 + } + }); + + logger.info('[SSA:Analysis] Plan generated and saved', { sessionId: id, planId, query, toolCode: mockPlan.toolCode, params: mockPlan.parameters }); return reply.send(mockPlan); }); @@ -265,7 +286,34 @@ export default async function analysisRoutes(app: FastifyInstance) { } }); - return reply.send(result); + // 转换 R 服务返回的 snake_case 为前端期望的 camelCase + const transformedResult = { + status: result.status, + message: result.message, + warnings: result.warnings, + results: result.results ? { + method: result.results.method, + statistic: result.results.statistic, + df: result.results.df, + pValue: result.results.p_value, + pValueFmt: result.results.p_value_fmt, + confInt: result.results.conf_int, + estimate: result.results.estimate, + groupStats: result.results.group_stats, + effectSize: result.results.effect_size, + } : null, + plots: result.plots?.map((p: any) => + typeof p === 'string' + ? { type: 'chart', title: '统计图表', imageBase64: p } + : p + ), + traceLog: result.trace_log, + reproducibleCode: result.reproducible_code, + guardrailResults: result.guardrail_results, + executionMs: result.executionMs, + }; + + return reply.send(transformedResult); } catch (error: any) { logger.error('[SSA:Analysis] Execute failed', { diff --git a/docs/03-业务模块/SSA-智能统计分析/00-模块当前状态与开发指南.md b/docs/03-业务模块/SSA-智能统计分析/00-模块当前状态与开发指南.md index 42e82360..5df9be32 100644 --- a/docs/03-业务模块/SSA-智能统计分析/00-模块当前状态与开发指南.md +++ b/docs/03-业务模块/SSA-智能统计分析/00-模块当前状态与开发指南.md @@ -1,10 +1,10 @@ # SSA智能统计分析模块 - 当前状态与开发指南 -> **文档版本：** v1.5 +> **文档版本：** v1.6 > **创建日期：** 2026-02-18 -> **最后更新：** 2026-02-19 +> **最后更新：** 2026-02-20 > **维护者：** 开发团队 -> **当前状态：** 🎉 **T 检验端到端测试通过！MVP Phase 1 核心完成 85%** +> **当前状态：** 🎉 **V11 UI 前后端联调测试通过！MVP Phase 1 核心完成 95%** > **文档目的：** 快速了解SSA模块状态，为新AI助手提供上下文 > > **🎉 里程碑（2026-02-18）：** @@ -21,6 +21,15 @@ > - ✅ **文件名动态生成**：`{toolName}_{dataName}_{MMDD}_{HHmm}.R` > - ✅ **前端模块激活**：智能统计分析入口可用 > - ✅ **用户会话隔离**：不同用户数据正确隔离 +> +> **🎉 V11 UI 前后端联调测试通过（2026-02-20）：** +> - ✅ **🎉 V11 UI 像素级还原**：Gemini 风格对话界面，全屏沉浸式体验 +> - ✅ **多任务支持**：单会话内可执行多个分析任务，独立管理状态 +> - ✅ **单页滚动布局**：分析计划 → 执行日志 → 分析结果，步骤进度条导航 +> - ✅ **Word 报告导出**：完整统计报告，包含数据描述、方法、结果、图表、结论 +> - ✅ **输入框遮挡修复**：Scroll Spacer 方案，解决 Flexbox padding-bottom 问题 +> - ✅ **代码清理完成**：删除旧版 V8/V9 组件，精简代码结构 +> - ✅ **前后端完整联调**：数据上传 → 计划生成 → 执行分析 → 结果展示 → 报告导出 > > **🆕 v1.5 新增特性（专家配置体系）：** > - 🆕 **统计决策表**：(Goal, Y, X, Design) 四维匹配精准选工具，替代简单 RAG @@ -42,7 +51,7 @@ | **商业价值** | ⭐⭐⭐⭐⭐ 极高 | | **独立性** | ⭐⭐⭐⭐ 高（可独立使用，也可与其他模块协同） | | **目标用户** | 临床研究人员、生物统计师 | -| **开发状态** | 🚀 **MVP Phase 1 开发中（Week 1 完成 ~80%）** | +| **开发状态** | 🚀 **MVP Phase 1 开发中（Week 1 完成 ~95%）** | ### 核心目标 diff --git a/docs/03-业务模块/SSA-智能统计分析/03-UI设计/SSA-Pro UX方案对比与技术选型报告.md b/docs/03-业务模块/SSA-智能统计分析/03-UI设计/SSA-Pro UX方案对比与技术选型报告.md new file mode 100644 index 00000000..fd9c4d05 --- /dev/null +++ b/docs/03-业务模块/SSA-智能统计分析/03-UI设计/SSA-Pro UX方案对比与技术选型报告.md @@ -0,0 +1,102 @@ +# **SSA-Pro 智能工作台 V7 vs V8 深度对比与技术选型报告** + +**分析对象：** V7 (单流沉浸式 \- 方案A) vs V8 (双屏工作台 \- 方案C) + +**编写目的：** 为前端研发团队提供 UI/UX 选型依据与技术实现路径指导。 + +**核心结论：** **强烈推荐采用 V8（双屏版）** 作为 SSA-Pro 的最终形态，并**深度复用 AIA 模块已有的双屏组件资产**。 + +## **1\. 核心观点与倾向性建议** + +**我个人的强烈倾向是：选择 V8（双屏版）。** + +### **为什么 V8 更符合用户需求？** + +1. **科研场景的天然属性**：医生做统计分析，不是为了“聊天”，而是为了“要结果（图/表/代码）”。V7 会把复杂的统计图表挤在狭窄的聊天气泡里，阅读体验极差；而 V8 给了结果最大的展示空间（右侧 60% 屏幕）。 +2. **多线程工作能力**：在 V8 中，用户可以看着右侧的“分析计划书 (SAP)”，在左侧继续对 AI 提出修改意见（“把正态性检验去掉”）。而在 V7 中，一旦继续聊天，计划书就被顶到上面看不见了。 +3. **专业信任感**：V8 的布局极具“现代桌面软件”的既视感（类似于 RStudio、VS Code 或 Notion），这能极大地提升医生对该系统“严谨性”的信任。 + +## **2\. 体验与需求契合度对比 (UX Comparison)** + +| 维度 | V7 (单流沉浸式 \- 类似 ChatGPT) | V8 (双屏工作台 \- 类似 Claude Artifacts) | 胜出者 | +| :---- | :---- | :---- | :---- | +| **空间利用率** | 低。大量屏幕两侧留白，宽表必须横向滚动。 | **极高**。完美适配 1080p 以上宽屏，图表展示极其舒展。 | 🏆 V8 | +| **上下文记忆** | 差。旧卡片会被新消息顶出屏幕。 | **极佳**。右侧工作区状态独立，左侧聊天随便滚，右侧不动。 | 🏆 V8 | +| **代码/文档阅读** | 差。需弹窗或在狭窄气泡内阅读。 | **极佳**。右侧面板就是完美的文档/代码阅读器。 | 🏆 V8 | +| **移动端适配** | **极佳**。天然的移动端流式布局。 | 差。双屏在手机上无法并排显示。 | 🏆 V7 | +| **学习成本** | 极低（所有人都会用微信）。 | 较低（需理解左右协同逻辑）。 | 🏆 V7 | + +*结论：除非我们首发主打手机端（这在医学统计场景几乎不可能），否则 PC 端的 V8 完胜。* + +## **3\. 实现难度与技术路径差异 (Implementation Complexity)** + +最初评估时，V8 的代价是前端开发难度直线上升。**但鉴于本平台 AIA 模块（Protocol Agent）已成功交付类似架构，V8 的实际落地成本已大幅降低。** + +### **3.1 状态管理 (State Management) 的差异** + +* **V7 (简单)**：状态是局部的、线性的。整个页面就是一个 MessageList\[\] 数组。每个 AI 回复的卡片组件，只需要接收自己那一条的 props 即可渲染，组件之间不需要通信。 +* **V8 (复杂但已攻克)**：状态是全局的、分离的。左侧聊天框里的点击动作必须触发右侧面板的状态切换（跨面板状态同步）。目前可直接复用平台已有的状态管理最佳实践。 + +### **3.2 渲染机制 (Rendering Logic) 的差异** + +* **V7 (流式)**：新消息永远 push 到列表最下方，浏览器自动处理滚动。 +* **V8 (插槽式)**：右侧是一个动态插槽（Dynamic Slot / View）。需要维护一个 ActiveArtifact 状态，根据左侧的焦点，不断替换右侧挂载的 React 组件（是渲染 SAPViewer 还是 ResultViewer？）。 + +## **4\. V8 架构所需的核心技术栈与路线 (Tech Stack Support)** + +要完美实现 V8，前端团队必须引入以下技术路线： + +### **4.1 全局状态管理库 (必须)** + +* **推荐**：Zustand 或 Redux Toolkit。 +* **用途**：定义一个全局 Store，包含： + interface WorkspaceStore { + chatHistory: Message\[\]; // 控制左侧 + activePane: 'empty' | 'sap' | 'execution' | 'result'; // 控制右侧视图 + currentArtifactData: any; // 右侧正在展示的数据 (JSON) + setPane: (pane, data) \=\> void; // 左侧按钮调用的方法 + } + +### **4.2 布局伸缩库 (推荐与复用)** + +* **推荐**：直接复用 AIA 模块已实现的 ResizableSplitPane 组件。 +* **用途**：允许用户拖拽中间的分割线，自由调整左侧（Chat）和右侧（Workspace）的宽度比例（这是高级桌面工具的标配）。 + +### **4.3 渲染优化技术 (关键)** + +* **推荐**：React.memo / useMemo。 +* **用途**：隔离左右两侧的渲染。当左侧用户正在打字时，绝不能导致右侧包含几千个 DOM 节点的复杂数据表格发生不必要的重渲染（Re-render），否则输入会严重卡顿。 + +## **5\. 跨模块资产复用分析：AIA Protocol Agent 带来的架构红利** + +通过审查 00-模块当前状态与开发指南.md，我们发现 **Protocol Agent 的 V3.1 MVP 已经完美实现了“聊天+文档”的双屏形态**。这为 SSA-Pro 的 V8 方案提供了极其宝贵的基础设施。 + +### **5.1 Protocol Agent 布局与 SSA V8 布局的对比度** + +| 核心特性 | Protocol Agent (AIA) 现有实现 | SSA-Pro (V8) 需求期望 | 一致性评估 | +| :---- | :---- | :---- | :---- | +| **整体架构** | 左侧 Chat \+ 右侧 DocumentPanel (A4纸张预览) | 左侧 Chat \+ 右侧 Artifacts (图表/表格/代码) | 🟢 **高度一致**。同属 "Left Brain, Right Hand" 模式。 | +| **面板控制** | ResizableSplitPane 动态双面板布局，可拖拽调整 | 需要中间可拖拽的分割线调整视窗大小 | 🟢 **完全吻合**。可 100% 照搬该组件。 | +| **状态联动** | 5阶段流程状态面板折叠/展开 | 计划/执行/结果等阶段状态栏的切换 | 🟡 **逻辑相似**。基于 Zustand 的联动机制可复用。 | +| **结果导出** | Word 导出服务集成 \+ 一键下载 | 代码下载 \+ 报告导出 | 🟢 **直接复用**。Python 的 pypandoc 导出服务可直接为 SSA 的 SAP 文档导出服务。 | + +### **5.2 复用策略与哪个“更好”？** + +**结论：它们不是互斥的选项，而是“前辈”与“后继者”的关系。复用 Protocol Agent 的架构来实现 V8 是最优解。** + +1. **底层 Layout 无缝复用**：前端团队**无需从零开发**左右分屏和拖拽逻辑，直接将 Protocol Agent 中经过 V3.1 验证的 ResizableSplitPane 提取到 frontend-v2/src/shared/components/Layout 供全局使用。 +2. **右侧面板 (Right Pane) 的多态化扩展**： + * Protocol Agent 的右侧是 DocumentPanel（渲染 Markdown 和 A4 纸效果）。 + * SSA-Pro V8 只需要在此基础上扩展右侧面板的内容类型：除了渲染 SAP 文档，新增 ChartPanel（渲染 Base64 图表）和 TablePanel（渲染三线表）即可。 +3. **消除技术债务与风险**：原本 V8 最大的风险在于“复杂的交互状态管理和窗口重绘性能”，既然 AIA 团队已经在 \~8500 行代码的迭代中解决了滚动条显示、状态联动等 Bug，SSA 团队直接站在巨人的肩膀上，**将原本需要 2 周的基建时间压缩至 2 天**。 + +## **6\. 最终开发实施建议** + +1. **确立 V8 为唯一方向**：全面转向左右双屏架构，放弃气泡内展示复杂图表的念头。 +2. **组件下沉与复用 (Day 1 任务)**：前端负责同学第一步应与 AIA 团队对齐，将 ResizableSplitPane 等双屏布局基建下沉为系统级 Common 组件。 +3. **组件解耦开发**： + * 同学 A 专门负责开发右侧的 ResultTable、PlotViewer、ExecutionTree 组件（只需接收 JSON props 即可，纯展示组件）。 + * 同学 B 复用 AIStreamChat 组件负责左侧的指令解析。 + * 最后通过全局 Store 将两人拼装在一起。 + +**总结：V8 难在起步的架构搭建，但由于 Protocol Agent 已经替我们蹚平了道路，我们获得了巨大的“后发优势”。实施 V8 架构不仅风险极低，而且能保证整个 AI Clinical Research 平台（从写方案到做统计）的 UI 体验高度统一、专业感拉满。** \ No newline at end of file diff --git a/docs/03-业务模块/SSA-智能统计分析/03-UI设计/V11.html b/docs/03-业务模块/SSA-智能统计分析/03-UI设计/V11.html new file mode 100644 index 00000000..483f075c --- /dev/null +++ b/docs/03-业务模块/SSA-智能统计分析/03-UI设计/V11.html @@ -0,0 +1,600 @@ + + + + + + SSA-Pro 智能统计工作台 V11.0 (V9 Visuals + V10 Features) + + + + + + + + + +
+ + + + + + + + + +
+ + + + + +
+ + +
+
心血管药物疗效研究
+
+ R Engine Ready +
+
+ + +
+ +
+ + +
+
+
+ 你好！我是 SSA-Pro 智能统计助手。
你可以直接描述研究目标，我将为你生成分析方案；或者点击下方 📎 上传数据文件，我们将直接开始分析。 +
+
+ + +
+
+
+ 我在研究一种新药，收集了实验组和对照组患者的血压下降值数据。我想知道新药是否有效。 +
+
+ + +
+
+
+ 理解了。针对“两组独立样本疗效对比”，如果是连续数值型变量，通常推荐使用 独立样本 T 检验 (T-Test)。

+ 💡 请上传数据文件，我将根据实际列名生成可执行的方案并展示在右侧工作区。 +
+
+ +
+
+
+ + +
+
+ + +
+ + + + + +
+ + + + + +
+
+
+ AI 可能会犯错，请核实生成的统计结论。 +
+
+
+
+ + + + +
+ +
+ + +
+
+ + Planning + + 统计分析计划 (SAP) +
+
+ + +
+
+ + +
+
+ + +
+

研究课题：新药治疗高血压疗效对比

+ +
+
+

1. 推荐统计方法

+
+
+ 首选：独立样本 T 检验 (Independent T-Test) +
+
+
+
自变量 (X)
+
Group
(分类) +
+
+
因变量 (Y)
+
BP_Change
(数值) +
+
+
+
+ +
+

2. 统计护栏与执行策略

+
    +
  • + +
    + 正态性假设检验 (Shapiro-Wilk)
    + 系统将在核心计算前执行检查。若 P < 0.05，将触发降级策略，自动改用 Wilcoxon 秩和检验 以保证结果严谨性。 +
    +
    • +
+
+ + +
+ +
+
+
+ + + + + + + +
+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/03-业务模块/SSA-智能统计分析/03-UI设计/产品原型图V8双屏版.html b/docs/03-业务模块/SSA-智能统计分析/03-UI设计/产品原型图V8双屏版.html new file mode 100644 index 00000000..46c9e1a3 --- /dev/null +++ b/docs/03-业务模块/SSA-智能统计分析/03-UI设计/产品原型图V8双屏版.html @@ -0,0 +1,470 @@ + + + + + + SSA-Pro 智能统计工作台 V8.0 (Dual-Pane Workspace) + + + + + + + + + + + + +
+ +
+
心血管药物疗效研究
+
+ Engine Ready +
+
+ + +
+ +
+
+
+ 你好！你可以直接描述研究目标，我将为你生成分析方案；或者上传数据，我们将直接开始智能分析。 +
+
+ + +
+
+
+ 我在研究一种新药，收集了实验组和对照组患者的血压下降值数据。我想知道新药是否有效。 +
+
+ + +
+
+
+ 理解了，针对“两组独立样本疗效对比”，我为您制定了统计分析计划（SAP）。 + + + 确认方案无误后，请上传数据文件。 +
+
+ +
+
+ + +
+ + + +
+ + + +
+
+
+ + +
+ + +
+ +

分析方案、执行过程与图表将在这里展示

+
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/03-业务模块/SSA-智能统计分析/04-开发计划/05-前端UI改进开发计划-V8双屏版.md b/docs/03-业务模块/SSA-智能统计分析/04-开发计划/05-前端UI改进开发计划-V8双屏版.md new file mode 100644 index 00000000..71b3e5ba --- /dev/null +++ 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 +// 使用方式 +} + rightPanel={} +/> +``` + +### 5.2 SSAWorkspace（主页面） + +```tsx +// modules/ssa/SSAWorkspace.tsx +const SSAWorkspace: React.FC = () => { + const { activePane, setActivePane } = useSSAStore(); + + return ( +
+ {/* 全局导航 */} + + + {/* 主工作区 */} +
+ } + rightPanel={} + defaultLeftRatio={35} + /> +
+
+ ); +}; +``` + +### 5.3 GlobalNav（全局导航） + +```tsx +// modules/ssa/components/GlobalNav.tsx +const GlobalNav: React.FC = () => { + return ( + + ); +}; +``` + +### 5.4 ChatPane（对话控制区） + +```tsx +// modules/ssa/components/ChatPane.tsx +const ChatPane: React.FC = () => { + const { mountedFile, setMountedFile } = useSSAStore(); + + return ( +
+ {/* 头部 */} +
+ 新的统计分析 + +
+ + {/* 消息列表 */} +
+ {/* AI 欢迎语 */} + {/* 用户消息 */} + {/* AI 回复 + 交互卡片 */} +
+ + {/* 输入区 */} +
+ {/* 数据挂载区 */} + {mountedFile && } + + {/* 输入框 */} +
+ +