# 健康长庆升级 - 高保真交互原型 ## 项目概述 本项目以 HTML 方式生成「健康长庆升级」平台的高保真交互原型，覆盖 Web 管理端、员工端 APP、健康应急 APP 三大终端，用于需求确认、交互评审及后续导入墨刀进行团队协作。 --- ## 一、项目结构规范 ### 1.1 顶层目录结构 ``` prototype-user-app/ ├── web-admin/ # Web 管理端原型 ├── employee-app/ # 员工端 APP 原型 ├── emergency-app/ # 健康应急 APP 原型 ├── shared/ # 共享资源（图标、字体、公共样式） │ ├── styles/ # 公共 CSS │ ├── icons/ # 图标资源 │ └── components/ # 可复用的 HTML 片段 ├── 项目背景.md # 本文件 - 项目约束与规范 └── README.md # 项目说明 ``` ### 1.2 各端内部按核心功能模块分目录 **员工端 APP（employee-app/）** ``` employee-app/ ├── index.html # 入口总览页（含底部Tab导航） ├── health-record/ # 健康档案 ├── health-monitor/ # 健康监测 ├── health-consult/ # 健康咨询 ├── emergency-medical/ # 应急就医 ├── health-intervention/ # 健康干预 ├── weight-management/ # 体重管理 ├── nutrition/ # 营养管理 ├── exercise/ # 运动管理 ├── health-assessment/ # 健康评估 ├── knowledge/ # 知识普及 ├── notification/ # 待办通知 └── profile/ # 个人中心 ``` **Web 管理端（web-admin/）** ``` web-admin/ ├── index.html # 管理端主框架（侧边栏+内容区） ├── user-management/ # 用户管理 ├── role-permission/ # 角色权限 ├── org-structure/ # 组织架构 ├── data-statistics/ # 数据统计报表 ├── health-checkup/ # 体检安排 ├── health-intervention/ # 健康干预活动发布 ├── emergency-dispatch/ # 应急就医调度监控 ├── system-config/ # 系统配置与日志审计 └── health-data/ # 健康数据可视化 ``` **健康应急 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` 文件必须是完整的、可独立在浏览器中打开的自包含文件： ```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 统一设计令牌 ```css /* 品牌色 */ --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 页面间跳转约定 由于每个页面是独立文件，页面间通过相对路径跳转： ```javascript // 同模块内跳转 window.location.href = './detail.html'; // 跨模块跳转 window.location.href = '../health-consult/consult-list.html'; // 弹窗页面（在当前页面中以 iframe 或 overlay 方式展示） // 建议在页面内通过注释标注关联的弹窗文件 // ``` ### 3.3 交互注释标注 在 HTML 中使用注释标注交互说明，便于评审和墨刀导入后的理解： ```html
全部
``` --- ## 四、命名规范 ### 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 风格，简洁明了： ```css .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 管理端 | | 健康体检 | 体检预约、报告管理、历年数据对比 | Web 管理端 / 员工端/Web 管理端 | | 健康监测 | 智能手表采集心率、血压、血氧、睡眠数据 | 员工端 APP/Web 管理端 | | 营养管理 | 用餐记录、膳食指导、营养分析 | 员工端 APP/Web 管理端 | | 体重管理 | 体重记录、目标设定、进度追踪 | 员工端 APP/Web 管理端 | | 知识普及 | 健康资讯、科普文章、视频课程 | 员工端 APP/Web 管理端 | | 运动管理 | 运动数据记录、目标设定、运动计划 | 员工端 APP/Web 管理端 | | 健康档案 | 统一归集健康数据，形成个人健康时间轴 | 员工端 APP/Web 管理端 | | 待办通知 | 待处理事项、系统消息、预警推送 | 全端 |