Domů Procházet Nápověda
Registrovat se Přihlásit se
carlin
/
pcb-afm-simulation-system
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Strom: b8dab74ec7
Větve Značky
pcb-afm-simu...
/
docs
/
前端界面优化建议_V1.md

前端界面优化建议_V1.md 12 KB
Historie Surový

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 为准。