Files
insar-management-system-v2/docs/FRONTEND_PRODUCTION_UI_REFINEMENT.md
T

12 KiB
Raw Blame History

Frontend Production UI Refinement

定位

本前端面向科研工程单位的 InSAR 生产、分析和运维场景。界面设计服务于长期、高频、可审计的工程工作流,不做营销化展示页。

语言策略

  • 默认并长期采用中文界面。
  • 不再维护完整英文界面和运行时 DOM 翻译。
  • 专业术语按行业习惯保留英文或中英混写,例如 InSAR、D-InSAR、SBAS、Gamma、LandSAR、ENVI、SARscape、IDL、Ollama、DB、Worker、Task、Run、Catalog、AOI、DEM、GeoTIFF、WebP。
  • 操作、状态、错误、提示使用中文,要求准确、短句、可执行。
  • 后续新增前端文案直接写中文,不再添加 language === 'en' 分支。

视觉原则

  • 气质:冷静、精密、可审计,像科研生产控制台,而不是通用 SaaS 后台。
  • 色彩:以蓝灰中性色为基础,蓝色只用于主操作、选中态、地图覆盖层和关键状态,不做装饰性大面积渐变。
  • 信息密度:允许密集,但必须靠分组、标题、状态标签和对齐建立秩序。
  • 控件:同类按钮、标签、面板、表单行使用一致样式。避免在 JSX 中散落大段 inline style。
  • 动效:只表达状态变化,不做页面级展示动画。进度条可即时更新,避免无意义的 width 动画。

优先修整项

  1. 固定中文运行时,移除顶部语言切换。
  2. 修复已损坏或乱码的核心文案,优先顺序:全局顶栏、登录页、导航常量、生产工作台、雷达数据面板、运维自检。
  3. 收敛视觉反模式:粗侧边强调线、装饰渐变、过宽阴影、过圆卡片。
  4. 抽取基础 UI 词汇:按钮、状态标签、面板段落、工具栏、字段行。
  5. 重塑生产工作台为流程导向:数据准备 -> 配对/栈规划 -> 生产运行 -> 质量检查 -> 成果发布。

当前决策

  • I18nProvider 保留兼容 API,但固定返回 language: 'zh't(text) 原样返回。
  • 暂不一次性删除所有英文分支,避免大面积回归风险;后续按面板逐步清理。
  • 后端服务无需停止。只修改前端文件时,Vite 可热更新;必要时刷新浏览器即可。

2026-06-21 修整记录

  • 固定中文运行时,移除顶部语言切换入口,保留 useI18n 兼容层以降低改动范围。
  • 修复登录页、全局状态栏、地图底图常量、生产管理常量、雷达数据面板和共享加载态的中文文案。
  • 将生产管理入口重塑为流程型工作台,突出数据准备、规划、运行、质量检查与成果发布,弱化营销式 hero 和装饰性渐变。
  • 调整基础视觉规则:减少大阴影、过圆卡片、装饰渐变和无意义进度动画;保留更克制的工程控制台气质。
  • 已通过 npm run build,并对本轮触碰文件做了乱码与视觉反模式扫描。

2026-06-21 页眉与生产面板补充

  • 页眉移除 DB、Worker、IDL、Ollama、Nginx 等运行状态灯,系统健康状态集中放在“运行维护”模块。
  • 页眉改为单位 logo、单位名称、系统名称、授权摘要、任务摘要和用户操作。
  • 单位名、系统名、页眉标语和 logo URL 支持通过 VITE_APP_* 环境变量配置,默认使用 frontend/src/logo.jpg
  • 新增 PRODUCT.md,记录系统面向科研工程单位的产品定位:科研、专业、克制,同时要求严谨、稳定、工程化。
  • SBAS 生产面板中高曝光的 Runtime Status、Task queue、Workflow 说明文案改为中文表达,保留必要英文术语。

2026-06-21 运行维护页设计

  • 将“运行维护”定位为页眉移除健康灯后的主健康入口,顶部摘要直接回答生产是否就绪、阻断项数量、最近检查和一致性异常。
  • 保留所有现有检查项,但按职责分组:核心服务、结果目录与生产索引、数据资产与运行时、一致性与精轨、维护操作。
  • 固定中文运行路径,HealthCheckPanel 不再依赖 language === 'en' 进入英文界面。
  • 视觉上减少阴影和卡片堆叠感,改为分组式生产控制台;状态不只靠颜色表达,同时显示“正常/异常”和具体数量。

2026-06-21 面板一致性策略

  • 当前前端的主要观感问题来自多个面板各自生长:宽度、卡片高度、标题层级和内边距不一致,造成“碎”和“忽宽忽高”的感觉。
  • 后续按页处理,不先做大规模重构:每轮选择一个高频页面,统一壳层、摘要、分区标题、最大宽度和关键文案;全量走完后再做一次整体审阅。
  • D-InSAR 生产页先完成第一轮结构归整:增加生产摘要,按“引擎与能力 / 任务准备与提交 / 运行监控与审计记录”分区,页面最大宽度收敛到生产控制台尺度。
  • 独立面板轻量收敛:去掉装饰背景,降低独立页头部高度和标题字号,让页面主体而不是壳层成为视觉中心。

2026-06-21 D-InSAR 结果目录第一轮

  • D-InSAR 结果页从“结果提取与标准目录”的说明块,调整为成果归档控制台:顶部直接显示操作模式、产物任务、提取源和日志策略。
  • 提取、重扫和任务日志归为“成果提取与任务监控”,下方标准目录归为“标准目录与资产详情”,降低页面碎片感。
  • 页面最大宽度与 D-InSAR 生产运行页统一到 1280px,减少超宽屏下横向拉伸;卡片圆角、边框、内边距跟随当前生产控制台节奏。
  • 保留现有后端接口、任务监控和目录组件行为,本轮只做前端结构、文案和壳层修整。

2026-06-21 SBAS-InSAR 结果目录第一轮

  • SBAS 成果页顶部从普通 section 调整为结果目录控制台:显示操作模式、目录状态、登记产品数和问题数。
  • 保留原有刷新、目录重建、检索、预览、时序曲线、资产下载等业务能力,只收敛外层壳、标题和主工作区比例。
  • 主工作区增加“结果检索与资产复核”分区说明,左侧列表宽度从 380px 收敛到 360px,避免与详情区争抢空间。
  • 与 D-InSAR 成果页保持 1280px 最大宽度和同一套状态摘要视觉词汇,形成 D-InSAR / SBAS 成果发布链路的一致入口。

2026-06-21 工程痕迹文案清理第一轮

  • 前端不再把已经退出主流程的 ISCE2/MintPy 能力作为生产入口说明、下拉选项或运维自检对象展示。
  • 运行维护页的精轨检查聚焦当前生产 TXT 池;前端不再把 ISCE2 XML 池纳入健康判断、计数摘要、修复按钮或结果说明。
  • 任务中心与导航文案去掉“旧 / legacy / 停用”等工程开发痕迹,历史任务使用中性中文标签表达。
  • SBAS / D-InSAR 高曝光结果文案改为面向业务人员的表达,避免把兼容层、桥接层和弃用路径暴露成用户概念。

2026-06-21 资产库存页第一轮

  • 资产库存页定位为台账查看与质量复核入口,不再在顶部暴露“全部扫描 / LT-1 扫描 / S1 扫描 / 精轨扫描”等运维扫描按钮。
  • 资产扫描能力仍保留在数据接入与运维流程中;资产库存页保留刷新和压缩包完整性审计,避免普通台账页面变成操作面板。
  • 页面壳层收敛到 1280px,标题说明改为“查看源产品、精密轨道、绑定状态和开放问题”,指标区改为五列台账摘要。

2026-06-21 应用壳与导航第一轮

  • 左侧一级任务线调整为“数据资产 / 生产管理 / 形变分析 / 灾害分析 / 运行维护”,减少泛化后台感。
  • 数据域入口改为“数据接入 / 资产台账 / 影像检索 / 灾害点库”,对应接入、台账、检索和空间对象管理四类任务。
  • 形变分析入口改为“D-InSAR 结果判读 / D-InSAR 专题分析 / SBAS 形变分析”,让分析链路更贴近科研业务表达。
  • 独立工作区页头不再使用统一兜底说明,按模块显示专业描述,帮助用户理解当前页面在任务线中的位置。
  • 左侧导航视觉从胶囊按钮堆叠调整为更克制的分层按钮,减少碎片感并强化一级任务线。

2026-06-21 数据接入页第一轮

  • 数据接入页从“数据监控面板”调整为接入控制台:顶部显示配置状态、接入任务、源数据池和可用存储。
  • 页面任务线梳理为接入路径与生产目录、本机存储状态、LT-1/Sentinel-1 源数据与精轨登记、GF3 回传成果登记、接入任务记录。
  • 将“扫描压缩包 / 扫描精轨”等工程按钮文案改为“登记源压缩包 / 登记精轨”,更贴合生产数据接入语义。
  • 移除接入页顶部装饰渐变提示,改为状态提示条;保留现有后端接口和任务调用路径。

2026-06-22 应用壳与综合统计调整

  • 右侧全局日志栏不再作为主界面常驻区域展示,地图和左侧任务栏获得更完整的横向空间;各业务页内部的任务记录、审计记录和运行维护能力继续保留。
  • “统计”从影像检索页按钮提升为一级导航“综合统计”,与数据资产、生产管理、形变分析、灾害分析同级,避免把生产统计能力误放在单一检索任务里。
  • 综合统计页从遮罩弹窗改为全宽工作页,按源影像、D-InSAR 成果、质量判读、缓存一致性四类信息组织;图表使用克制的科研控制台风格,减少装饰色和弹窗遮挡。
  • 影像检索页顶部仅保留检索相关动作,统计入口由导航承担,任务线更清晰:先接入和检索数据,再进入生产和成果分析,最终在综合统计中复核总体状态。

2026-06-22 接入页与统计口径回收

  • 左侧主栏固定到 620px,不再保留拖拽宽度;右侧日志栏移除后,主界面直接形成“宽任务栏 + 地图工作区”的稳定布局。
  • 数据接入页的“接入路径与生产目录”默认折叠。该区主要是服务器部署目录核对,不应占据日常接入操作的首屏。
  • 接入页补充“开放问题复核”区,直接读取资产台账开放 issue;底部日志明确为任务执行日志,避免把 “Extracting source archive metadata...” 这类过程日志误认为问题结论。
  • 综合统计暂时改为一级入口占位页,不再接临时 /statistics 图表。具体统计口径和图表方案记录在 docs/STATISTICS_DASHBOARD_DESIGN.md,后续先设计再实现。

2026-06-23 综合统计命名与覆盖图修正

  • 综合统计页标题调整为“InSAR 数据与生产统计”,不再使用“生产态势驾驶舱”这类展示大屏语义。
  • 覆盖图从经纬度散点图调整为“源数据空间覆盖密度”,按场景中心点聚合成网格热力图,不再显示笛卡尔经纬度坐标轴。
  • 当前覆盖密度图只表达中心点密度,不等同于真实 footprint 面状覆盖;正式面积覆盖、行政区覆盖率和空白区判断需要后续基于有序角点/footprint 的后端聚合。
  • 综合统计继续使用手动刷新,不做自动轮询,避免统计页持续打生产服务。

2026-06-23 综合统计热力格网升级

  • 覆盖热力不再由前端临时聚合点位,而是由 /api/statistics/dashboard 返回后端格网单元,前端只负责渲染。
  • 覆盖统计分成“源数据”和“成果”两个对象:源数据统计 LT-1 / Sentinel-1 / GF3,成果统计 result_products 中 D-InSAR / SBAS 等已登记产品。
  • 源数据优先用 sar_scene_geometry_profiles.footprint_polygon,缺失时退回中心点;成果优先用 result_products.coverage_polygon,缺失时退回 bbox。
  • 当前热力图仍是工程态势图,不作为正式面积统计或行政区覆盖率结论。