yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dc2ba3000ade628eabc7f2c77ab767dbb451cb1b
platform-prototype/项目背景.md
T
冯普andClaude Opus 4.6 212c220dcf fix: 优化PRD截图体积，PNG转JPEG并缩小预览尺寸 
- 截图格式从PNG转为JPEG(质量80%)，设备缩放1x，总体积从3.9MB降至916KB
- md-viewer.html图片最大宽度从375px调整为280px
- 项目背景.md同步更新截图规范参数
- PRD.md中25处图片引用从.png改为.jpg

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-14 16:13:36 +08:00

16 KiB
Raw Blame History

健康长庆升级 - 高保真交互原型

项目概述

本项目以 HTML 方式生成「健康长庆升级」平台的高保真交互原型，覆盖 Web 管理端、员工端 APP、健康应急 APP 三大终端，用于需求确认、交互评审及后续导入墨刀进行团队协作。

一、项目结构规范

1.1 顶层目录结构

prototype-user-app/
├── index.html                  # 全局导航页（项目入口）
├── web-admin/                  # Web 管理端原型
├── employee-app/               # 员工端 APP 原型
├── emergency-app/              # 健康应急 APP 原型
├── shared/                     # 共享资源（图标、字体、公共样式）
│   ├── styles/                 # 公共 CSS
│   ├── icons/                  # 图标资源
│   └── components/             # 可复用的 HTML 片段
├── 项目背景.md                  # 本文件 - 项目约束与规范
└── README.md                   # 项目说明

1.2 全局导航页（index.html）

根目录 index.html 作为项目统一入口，部署到服务器后供研发人员浏览所有原型页面。

  • 通过 Tab 切换三大终端（Web 管理端 / 员工端 APP / 健康应急 APP）
  • 以模块卡片展示各业务模块，点击卡片跳转至该模块主页（index.html）
  • 点击卡片右上角页数徽章，悬浮展示该模块所有页面和弹窗的跳转链接
  • 已有原型的模块卡片带绿色边框呼吸灯动画，待开发模块为虚线灰色卡片
  • 数据驱动：所有模块和页面信息维护在 SITE_MAP JS 对象中
  • 新增原型页面时，必须同步在 index.html 的 SITE_MAP 中添加对应条目

1.3 各端内部按核心功能模块分目录

员工端 APP（employee-app/）17 个模块

employee-app/
├── ai/                         # AI
├── home/                       # 应用主页
├── health-checkup/             # 健康体检
├── weight-management/          # 体重管理
├── nutrition/                  # 营养管理
├── exercise/                   # 运动管理
├── health-monitor/             # 健康监测
├── health-assessment/          # 健康评估
├── cardiovascular/             # 心脑血管病预防
├── diabetes/                   # 糖尿病预防
├── cancer/                     # 癌症预防
├── health-consult/             # 健康咨询
├── emergency-medical/          # 应急就医
├── frontline-medical/          # 一线医疗
├── health-record/              # 健康档案
├── knowledge/                  # 知识普及
└── profile/                    # 个人中心

Web 管理端（web-admin/）16 个模块

web-admin/
├── system-management/          # 系统管理
├── health-checkup/             # 健康体检
├── weight-management/          # 体重管理
├── nutrition/                  # 营养管理
├── exercise/                   # 运动管理
├── health-monitor/             # 健康监测
├── health-assessment/          # 健康评估
├── knowledge/                  # 知识普及
├── health-data/                # 健康数据
├── health-record/              # 健康档案
├── cardiovascular/             # 心脑血管病预防
├── diabetes/                   # 糖尿病预防
├── cancer/                     # 癌症预防
├── health-consult/             # 专家咨询
├── emergency-dispatch/         # 应急就医
└── frontline-medical/          # 一线医疗

健康应急 APP（emergency-app/）

底部固定 5 个 Tab：工作台、知识库、AI助手、消息（即时通讯）、我的。 6 种角色登录后看到的工作台、知识库、我的内容不同，AI助手和消息全角色共享。

角色 英文标识 说明
咨询专家 expert 专业医师/健康管理师，接收咨询、回复问题
应急操作人员 operator 负责应急事件的调度与操作执行
应急工作人员 worker 参与应急响应的一线工作人员
应急驻场人员 onsite 驻扎在现场的应急保障人员
咨询小助手 assistant 辅助答疑、常见问题推送、数据统计
管理员 admin 应急APP端的管理与配置人员

目录按角色优先组织，每个角色包含自己的工作台、知识库、我的页面：

emergency-app/
├── expert/                             # 咨询专家（角色目录）
│   ├── workbench/                      #   工作台页面
│   ├── knowledge/                      #   知识库页面
│   └── profile/                        #   我的页面
├── operator/                           # 应急操作人员
│   ├── workbench/
│   ├── knowledge/
│   └── profile/
├── worker/                             # 应急工作人员
│   ├── workbench/
│   ├── knowledge/
│   └── profile/
├── onsite/                             # 应急驻场人员
│   ├── workbench/
│   ├── knowledge/
│   └── profile/
├── assistant/                          # 咨询小助手
│   ├── workbench/
│   ├── knowledge/
│   └── profile/
├── admin/                              # 管理员
│   ├── workbench/
│   ├── knowledge/
│   └── profile/
│
├── ai-assistant/                       # AI助手（全角色共享）
│   └── index.html
│
└── message/                            # 消息 - 即时通讯聊天（全角色共享）
    ├── index.html
    ├── contacts.html
    └── im-chat.html

二、HTML 原型编写规范

2.1 文件粒度原则（核心约束）

每个独立的页面、弹窗、浮层、操作面板必须是独立的 .html 文件。

这是为了兼容墨刀导入（通过 modao-proto-mcp 的 import_html 工具），墨刀以单个 HTML 文件为粒度创建页面。

  • 页面：每个可导航的页面 → 独立 .html 文件
  • 弹窗/对话框：每个模态弹窗 → 独立 .html 文件，命名如 xxx-dialog.html
  • 浮层/操作面板：底部弹出面板、下拉菜单等 → 独立 .html 文件，命名如 xxx-panel.html
  • 状态变体：同一页面的不同状态（空状态、加载中、错误态）如差异较大 → 独立文件，命名如 xxx-empty.html、xxx-loading.html

2.2 单文件结构规范

每个 .html 文件必须是完整的、可独立在浏览器中打开的自包含文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[模块名] - [页面名] | 健康长庆原型</title>
  <style>
    /* 所有样式内联，不依赖外部 CSS 文件 */
  </style>
</head>
<body>
  <!-- 页面内容 -->
  <script>
    /* 交互逻辑内联，不依赖外部 JS 文件 */
  </script>
</body>
</html>

关键要求：

  • CSS 和 JS 全部内联，禁止引用外部文件（确保墨刀导入兼容性）
  • 图片优先使用 SVG 内联或 CSS 绘制的图形占位，避免外部图片依赖
  • 图标使用 SVG 内联或 Unicode/Emoji 占位

2.3 APP 端原型视觉规范

APP端（员工端、应急端）使用手机壳模拟器包裹：

设备尺寸: 390 x 844 (iPhone 14 逻辑分辨率)
外壳圆角: 44px
状态栏高度: 44px
底部安全区: 34px
导航栏高度: 44px
底部Tab栏高度: 50px + 34px安全区

2.4 Web 端原型视觉规范

Web管理端使用标准后台布局：

最小宽度: 1280px
侧边栏宽度: 240px（折叠态 64px）
顶部导航高度: 56px
内容区内边距: 24px

2.5 统一设计令牌

/* 品牌色 */
--primary: #1890FF;          /* 主色 */
--primary-light: #E6F7FF;    /* 主色浅底 */
--success: #52C41A;          /* 成功 */
--warning: #FAAD14;          /* 警告 */
--danger: #FF4D4F;           /* 危险 */

/* 中性色 */
--text-primary: #333333;     /* 主文字 */
--text-secondary: #666666;   /* 次要文字 */
--text-placeholder: #999999; /* 占位文字 */
--border: #E8E8E8;           /* 边框 */
--background: #F5F7FA;       /* 页面背景 */

/* 字号 */
--font-xs: 11px;
--font-sm: 13px;
--font-base: 15px;
--font-lg: 17px;
--font-xl: 20px;
--font-xxl: 24px;

/* 圆角 */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;

/* 阴影 */
--shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

三、交互效果规范

3.1 必须实现的交互

  • 页面导航：点击按钮/链接可跳转至对应页面（通过 window.location.href 或页内锚点切换）
  • Tab 切换：底部 Tab 栏、顶部 Tab 栏的选中态切换
  • 弹窗展示：点击触发弹窗的元素时，展示弹窗的打开态（弹窗为独立文件，在预览时可用 overlay 模拟）
  • 表单交互：输入框聚焦态、按钮点击态、单选/多选切换
  • 列表滚动：内容区可滚动，导航栏/Tab 栏固定
  • 下拉刷新/加载更多：提供视觉占位表现

3.2 页面间跳转约定

由于每个页面是独立文件，页面间通过相对路径跳转：

// 同模块内跳转
window.location.href = './detail.html';

// 跨模块跳转
window.location.href = '../health-consult/consult-list.html';

// 弹窗页面（在当前页面中以 iframe 或 overlay 方式展示）
// 建议在页面内通过注释标注关联的弹窗文件
// <!-- 关联弹窗: ./filter-dialog.html -->

3.3 交互注释标注

在 HTML 中使用注释标注交互说明，便于评审和墨刀导入后的理解：

<!-- [交互] 点击跳转至: ../health-record/detail.html -->
<div class="card" onclick="location.href='../health-record/detail.html'">

<!-- [交互] 点击打开弹窗: ./filter-dialog.html -->
<button onclick="openDialog()">筛选</button>

<!-- [状态] 当前为: 已选中态 -->
<div class="tab active">全部</div>

四、命名规范

4.1 文件命名

  • 全部使用小写英文 + 短横线连接：consult-detail.html
  • 页面文件：{功能名}.html，如 consult-list.html
  • 弹窗文件：{功能名}-dialog.html，如 filter-dialog.html
  • 面板文件：{功能名}-panel.html，如 sort-panel.html
  • 状态变体：{功能名}-{状态}.html，如 list-empty.html
  • 模块入口：统一使用 index.html

4.2 CSS 类命名

采用 BEM 风格，简洁明了：

.consult-card { }
.consult-card__title { }
.consult-card__status--resolved { }

五、墨刀导入兼容约束

5.1 导入方式

通过已配置的 modao-proto-mcp MCP 服务，使用 import_html 工具将单个 HTML 文件导入墨刀项目。

5.2 兼容性要求

  • 自包含：每个 HTML 不得引用外部 CSS/JS/图片资源
  • 单页面：每个 HTML 文件仅包含一个页面/弹窗的内容
  • 固定尺寸：APP端页面内容区域控制在 390×844 内；Web端不设固定高度
  • 简洁 DOM：避免过度嵌套（建议不超过 8 层），墨刀解析有层级限制
  • 内联 SVG：图标和简单图形使用内联 SVG，复杂图形使用 CSS 绘制或色块占位

六、项目背景参考

6.1 项目背景

原健康长庆项目是长庆油田公司内部使用的综合性员工健康管理服务平台，旨在整合健康咨询、应急就医、健康体检、档案管理、健康监测、系统管理、健康干预、健康评估、一线医疗点及体重管理等多元功能，为油田员工提供全周期的健康保障。

6.2 用户群体

用户角色 角色定义 对应原型端
油田员工 长庆油田一线员工及管理人员 员工端 APP
平台管理员 健康管理部门后台运营人员 Web 管理端
健康咨询专家 专业医师/健康管理师 健康应急 APP
应急就医服务人员 应急调度与协调人员 健康应急 APP

6.3 核心业务模块

模块 业务概述 所属端
系统管理 用户管理、角色权限、组织架构、系统配置 Web 管理端
健康体检 体检预约、报告管理、历年数据对比 员工端 APP / Web 管理端
体重管理 体重记录、目标设定、进度追踪 员工端 APP / Web 管理端
营养管理 用餐记录、膳食指导、营养分析 员工端 APP / Web 管理端
运动管理 运动数据记录、目标设定、运动计划 员工端 APP / Web 管理端
健康监测 智能手表采集心率、血压、血氧、睡眠数据 员工端 APP / Web 管理端
健康评估 健康风险评估报告，识别风险等级 员工端 APP / Web 管理端
知识普及 健康资讯、科普文章、视频课程 员工端 APP / Web 管理端
健康数据 健康数据可视化与统计分析 Web 管理端
健康档案 统一归集健康数据，形成个人健康时间轴 员工端 APP / Web 管理端
心脑血管病预防 心脑血管疾病风险筛查与预防管理 员工端 APP / Web 管理端
糖尿病预防 糖尿病风险筛查与预防管理 员工端 APP / Web 管理端
癌症预防 癌症风险筛查与预防管理 员工端 APP / Web 管理端
健康咨询/专家咨询 在线健康咨询，支持图文与视频咨询 员工端 APP / 健康应急 APP / Web 管理端
应急就医 应急申请、资源调度、进度跟踪的全流程管理 员工端 APP / 健康应急 APP / Web 管理端
一线医疗 一线医疗点服务与管理 员工端 APP / Web 管理端
AI 智能健康助手，AI问答与健康建议 员工端 APP

七、模块文档规范

7.1 文档要求

每个一级功能模块目录下必须创建 doc/ 子目录，维护以下两个文档：

文件 用途 更新时机
doc/CHANGELOG.md 变更记录 每次提交代码前自动整理并追加
doc/PRD.md 产品需求文档 用户明确要求时才编写或更新，不随原型修改自动同步

7.2 CHANGELOG.md 格式规范

  • 按时间倒序排列，最新变更在最前
  • 每条记录格式：## [YYYY-MM-DD] type: 变更摘要
  • type 取值：init（初始化）、feat（新增）、fix（修复）、refactor（重构）
  • 列出涉及的文件及具体变更说明

7.3 PRD.md 编写规范

面向研发人员的产品需求文档，要求简洁、条理清晰，包含以下结构：

  1. 模块概述：一句话说明模块功能 + 页面导航结构树 + 状态流转图（Mermaid）
  2. 页面清单：表格列出所有页面和弹窗
  3. 逐页说明：按业务流程顺序组织，页面与弹窗按流程穿插介绍（不分开罗列），每个页面/弹窗包含以下维度：
    • 页面截图：在标题下方紧跟截图引用（格式见 7.4）
    • 功能说明：页面用途和核心 UI 元素
    • 业务规则：数据逻辑、状态约束、边界条件
    • 交互说明：以文字列表形式描述各元素的交互行为和跳转目标，跳转目标使用中文页面名称（如"跳转到专家主页"），不使用文件名
  4. 表单字段表：含表单提交的页面，以表格列出字段名、类型、是否必填、校验规则

7.4 PRD 页面截图规范

为提升文档可读性，PRD 中每个页面说明需附带页面截图。

截图生成方式：

  • 使用 Playwright 对 HTML 原型文件进行无头浏览器截图
  • APP 端截取 .phone-shell 元素，视口 460×920，设备缩放 1x
  • Web 端截取完整页面，视口 1440×900，设备缩放 1x
  • 输出格式：JPEG（质量 80%），兼顾清晰度与文件体积

截图存放：

  • 统一存放在模块的 doc/screenshots/ 目录下
  • 文件名与原型 HTML 文件名一致（去掉 .html 后缀），如 find-expert.jpg
  • 内嵌于其他页面的弹窗无需单独截图，在页面清单中标注即可

PRD 中引用方式：

  • 在每个页面/弹窗的三级标题下方紧跟插入：![页面截图](screenshots/xxx.jpg)
  • 使用相对路径（基于 doc/ 目录），md-viewer.html 会自动补全为完整路径

截图更新时机：

  • 与 PRD 文档同步，仅在用户明确要求更新 PRD 时重新截取
Reference in New Issue View Git Blame Copy Permalink