# Web 前端界面优化建议 V1

> 审查人：Car.Lin / AI 工程审查
> 日期：2026-08-30
> 目标：让 Web 端更简洁、直观、便于仿真工程师操作。
> 依据：代码审查（`web/frontend/src` 全量通读）+ README / 设计方案 V2.0 / 交付总结中的开发记录。

---

## 0. 审查范围与方法

通读了以下文件并逐条核对证据：

| 类别 | 文件 |
|---|---|
| 路由与布局 | `router/index.ts`（15 条路由）、`layouts/MainLayout.vue`、`style.css` |
| 核心工作流 | `ProjectList.vue`、`ProjectDetail.vue`、`PlanDetail.vue`（1129 行） |
| 执行与监控 | `TaskManager.vue`、`MonitorDashboard.vue`、`ExecutorMonitor.vue` |
| 分析 | `Dashboard.vue`、`AdvancedVisualization.vue`、`ExperienceList.vue` |
| AI 页面 | `ai/PlanGenerator.vue`、`ai/AdaptiveOptimize.vue`、`ai/L0Prescreen.vue`、`ai/ResultAnalysis.vue`、`ai/FidelityCalibration.vue`、`ai/ExperienceEnhance.vue` |
| 数据层 | `api/index.ts`、`api/ai.ts` |
| 后端对照 | `services/fixed_params_template.py`、`services/plan_generator.py`（别名映射） |

---

## 1. 现状诊断（问题 → 证据 → 影响）

| # | 问题 | 代码证据 | 对仿真工程师的影响 |
|---|---|---|---|
| D1 | **导航 14+ 项平铺，无工作流分组** | `MainLayout.vue` 侧栏 7 项平铺 + AI 子菜单 6 项 | "我下一步该去哪"不清晰；低频 AI 功能（L0预筛选/多保真度校准/经验库增强）与日常功能并列，制造菜单噪音 |
| D2 | **监控类页面功能重叠** | `MonitorDashboard` 与 `ExecutorMonitor` 都有统计卡 + 活动任务表 + 5s 自动刷新；`TaskManager` 与之高度重合 | 同一件事三个入口，工程师无法确定"看进度该进哪个" |
| D3 | **面包屑过弱** | `MainLayout` 只有「首页 / 当前页」两级 | 深链打开方案页（如 `/plans/5`）无法感知所属项目与上下文 |
| D4 | **PlanDetail 单页信息过载** | `PlanDetail.vue` 1129 行：进度卡 + 4 统计卡 + AI思路 + 边界条件表 + 固定参数表(36项×8类) + 扫描变量表 + 验收标准 + AI分析区 + 结果表，全部纵向堆叠 | 核心编辑页需要长时间滚动；边界条件/固定参数/扫描变量三张表字段列相似，极易混淆 |
| D5 | **参数三套命名口径并存** | ①`ProjectDetail` 存 `current_a/speed_rpm/magnet_temp_c`；②`PlanDetail` BC 模板用 `rated_current_a/rated_speed_rpm`；③固定参数/扫描变量用 Motor-CAD 名 `RMSCurrent/Shaft_Speed/Magnet_Temperature`；前端 `SCAN_PARAM_CN`、`categoryCnMap`、`BC_TEMPLATE`、`ALL_FIXED_PARAM_TEMPLATE` 四处手写 | 同一物理量在不同页面出现三种写法，工程师需脑内映射；后端 `plan_generator.py` 已有 `_VARIABLE_NAME_MAP` 别名兜底，恰恰说明命名漂移已成现实问题 |
| D6 | **边界条件与固定参数"同一物理量双份设置"** | 额定电流既在 BC（`rated_current_a`）又在固定参数（`RMSCurrent`）；转速、温度、冷却方式同理。后端 `build_default_fixed_params` 从 BC 推断固定参数，但**读取的是 `rated_current_a` 而非 `ProjectDetail` 存储的 `current_a`**（需验证完整调用链） | 工程师可能在两处填了不同值，无法确定哪个真正写入 Motor-CAD |
| D7 | **固定参数 36 项默认全量铺开** | `PlanDetail.vue` 模板补齐逻辑把 `ALL_FIXED_PARAM_TEMPLATE` 全部 push 进表格 | 90% 参数用默认值即可，却逐项展示为可编辑表，注意力被稀释 |
| D8 | **工作流步骤条是纯展示** | `ProjectDetail` 的 `el-steps` 只算 `currentStep`，不可点击、无"缺什么"提示 | 无法从步骤条获得可执行引导 |
| D9 | **"AI分析→迭代→提取经验"三按钮割裂** | `PlanDetail.vue` 三个独立按钮 `runAIAnalysis / generateIteration / extractExperience` | 本是一组串联动作，缺一键闭环 |
| D10 | **预估时间硬编码** | `PlanDetail.vue` `estimatedTimeMin = points * 3`（3 分钟/点） | 单点真实耗时 90~150s，100 点方案预估偏差 1.5~2 倍（README 已列为待办，前端未落实） |
| D11 | **创建任务需手填 JSON** | `TaskManager.vue` 创建弹窗要求输入 `plan_data_json` / `parameters_json` | 违背"工程师友好"目标；应改为从方案下拉选择自动带出 |
| D12 | **公共样式重复手写、轻微漂移** | `stat-card` 在 `ProjectList/PlanDetail/Dashboard/ExecutorMonitor` 四处重复定义，边框/圆角/字号细节不一 | 视觉不统一，改动成本高 |
| D13 | **轮询间隔不一致** | PlanDetail 5s、AdaptiveOptimize 3s、Monitor 5s | 无统一节奏，维护与体验都不一致 |
| D14 | **结果表列固定** | `PlanDetail` / `Dashboard` 各一份硬编码列 | 指标已扩到 35 项（P5-M6），无法按需显示会越来越挤 |

---

## 2. 优化建议（按优先级）

### P0 — 影响最大、投入相对可控

#### P0-1 信息架构重排（解决 D1/D2/D3）

**目标**：侧栏按"工程师工作流"分组，一眼定位。

- 侧栏改为 4 组 + 可折叠：
  - **工作台**：项目管理（列表 / 详情）
  - **执行**：任务管理（合并 `实时监控` + `执行器监控` 为单页 Tab：任务列表 / 执行器状态 / 汇总图表）
  - **分析**：结果分析（`Dashboard` 与 `高级可视化` 合并或互为 Tab）
  - **AI 智能**：仅保留 方案生成 / 自适应优化 / AI结果分析 三个高频项可见；L0预筛选、多保真度校准、经验库AI增强 收进「高级功能」折叠子组
  - **知识**：经验库
- 面包屑升级为 **项目 → 方案 → 任务** 层级链；深链进入 `PlanDetail` 时自动带出上级链。
- 顶部 Header 加**全局任务状态条**：任意页面可见"运行中 N 个任务"，点击直达任务管理（复用现有 `/api/tasks`、`/api/executor/status`，纯前端改动）。

#### P0-2 PlanDetail 分层重构（解决 D4/D7/D9/D14）

**目标**：核心编辑页从"一页长卷"改为"分页签，各司其职"。

用 `el-tabs` 拆为 4 个页签：

| 页签 | 内容 | 默认 |
|---|---|---|
| **概览** | 统计卡 + AI 设计思路 + 验收标准 + 最新结果摘要 + 主操作按钮（启动/停止仿真） | 是 |
| **方案参数** | 扫描变量表（主）+ 固定参数（折叠态） | — |
| **仿真结果** | 结果表 + 分析图表（趋势/Pareto/敏感性） | — |
| **AI 闭环** | "分析 → 迭代 → 提取经验"一键向导（合并 D9 三按钮），步骤化呈现执行结果摘要 | — |

固定参数表默认态：
- 仅展示「用户修改过 / 与基线默认值不同」的行；
- 其余按分类折叠进「更多参数…」，提供"全部展开/全部折叠"；
- 这样 36 项里通常只有个位数参数需要工程师关注。

结果表：
- 列可配置（Element Plus `show-overflow-tooltip` + 列设置），默认只显示核心指标（平均转矩/效率/脉动/总损耗/状态），其余指标折叠可选。

#### P0-3 参数目录单一事实源（解决 D5/D6）

**目标**：消灭三套命名口径，前端从同一目录渲染。

- 后端（或共享层 `src/afmcore`）暴露一份 **参数目录**：`{ key, motorcad_var, name_cn, unit, category, description }`，覆盖边界条件、固定参数、扫描变量三类；前端统一从该目录渲染，删除 `ProjectDetail.bcFields` / `PlanDetail.BC_TEMPLATE` / `ALL_FIXED_PARAM_TEMPLATE` / `SCAN_PARAM_CN` / `categoryCnMap` 等手写副本。
- 边界条件与固定参数的**同义关系**（如 `rated_current_a ⇄ RMSCurrent`、`rated_speed_rpm ⇄ Shaft_Speed`）在目录中显式声明；PlanDetail 在"边界条件"栏对同义参数标注"将写入固定参数 RMSCurrent（当前值 21.0A）"，并提示以固定参数为最终写入值。
- 在方案参数页签增加 **"变量写入预览"** 面板：列出本次仿真实际 `set_variable` 的清单（变量名 → 值），让工程师在点"启动"前能核对真正写进 Motor-CAD 的内容。这是当前"双份设置"最直接的兜底。
- 需先验证 D6 调用链：确认 `ProjectDetail` 保存的 `current_a` 是否会经归一化流入 `build_default_fixed_params`（其目前读取 `rated_current_a`）。若不会，属数据一致性 Bug，应一并修复。

### P1 — 提升效率与信任感

#### P1-1 流程引导（解决 D8/D10）

- `ProjectDetail` 步骤条改为**可交互向导**：每步显示"缺什么 / 下一步做什么"+ 快捷按钮（如无方案 → "AI 一键生成"；无执行器在线 → 启动指引）。
- 新增**仿真前检查清单**（复用已有 API）：
  - 模型路径是否存在；
  - 固定参数中是否有"变量名需确认"项（README 已知：`Max_Speed / Winding_Connection / Current_Density / Magnet_Remanence / Insulation_Class`），列出并允许工程师确认跳过；
  - 是否至少 1 个扫描变量；
  - 本地执行器是否在线。
  - 全绿才可点"启动仿真"，红项点击直接定位到对应位置。
- **预估时间校准**：用真实单点耗时。任务完成后将 `solve_time_s` 均值回写，前端显示"预计 X~Y 分钟（基于最近 N 次单点 ~Xs/点）"，替代硬编码 `points*3`。

#### P1-2 任务体验（解决 D11）

- `TaskManager` 创建任务改为**从方案下拉选择**：选方案 → 自动带出参数与模型，JSON 输入折叠为"高级选项"。
- 监控页合并后的单页，统一轮询节奏（建议全局 5s，可配置）。

### P2 — 视觉与一致性（解决 D12/D13）

- 抽取全局组件：`StatCard` / `SectionCard` / `PageHeader`，删除四处重复样式。
- 统一轮询间隔、统一"最后更新"时间显示。
- 深色侧栏保留，但宽度 220px 固定 → 支持折叠（collapse）适配窄屏。
- 配色维持现有蓝/白/灰体系即可（工程师场景不需要过度装饰），重点把"任务状态"用更醒目的全局方式呈现。

---

## 3. 建议实施批次（可独立验收）

| 批次 | 内容 | 主要涉及 | 回归要求 |
|---|---|---|---|
| **B1 信息架构** | 侧栏分组 + 面包屑层级 + 全局任务条 + 监控页合并 | 纯前端（`MainLayout`、`router`、`MonitorDashboard`/`ExecutorMonitor`/`TaskManager` 合并） | `npm run build` 全绿（vue-tsc 0 错误）；手动点检全部路由 |
| **B2 PlanDetail 重构** | Tabs 化 + 固定参数折叠 + 变量写入预览 + 结果列设置 | 前端为主（`PlanDetail.vue`），需后端小字段（变量写入预览基于现有 plan_data 即可） | build 全绿；对旧方案数据兼容（补齐逻辑已有） |
| **B3 参数目录统一** | 前后端共享参数目录 + 同义映射 + D6 调用链验证 | 前后端协同 + `src/afmcore` 或 backend service | 需回归：AI 生成方案 → 边界条件 → 固定参数推断链路（可复用现有 `test_*.py` 回归脚本） |
| **B4 流程引导** | 步骤向导 + 仿真前检查清单 + 耗时校准 | 前端 + 少量后端（单点耗时已有 `solve_time_s` 字段） | build 全绿 + 手动验证检查清单各分支 |

> 建议顺序：B1 → B2 → B3 → B4。每批完成按项目纪律更新 README 与 TEST_RECORDS，代码提交与文档同步。

---

## 4. 项目纪律提醒（实施时遵守）

- 前端改动后 `npm run build`（vue-tsc && vite）必须零错误（P5-M1 已建立基线，勿回退）。
- `.py/.ps1` 纯 ASCII；中文字段名用 `\uXXXX`（`fixed_params_template.py` 现有写法即规范）。
- 实际启动 Motor-CAD 求解前先 git commit；`output/`、`dist/` 不入库。
- 原始 `.mot` 只读；参数写入保持回读校验。
- 每批测试留痕到 `docs/TEST_RECORDS.md`。

---

## 5. 未验证项（诚实声明）

- D6 中"`ProjectDetail` 的 `current_a` 能否流入 `build_default_fixed_params`（其读取 `rated_current_a`）"完整调用链未逐一追踪，需结合 `ai_plan.py` / `plans.py` 路由确认后定论。
- 前端页面实际渲染效果未在本机浏览器打开验证（本次为静态代码审查），B 批次落地后需人工点检。
- 单点耗时 90~150s 为 README/KNOWLEDGE_BASE 记录值，前端校准需以本机实测 `solve_time_s` 为准。