PRD文档

一、页面概述

页面名称：健康护理管理 – 药物与护肤品追踪页面
页面目标：协助用户管理个人健康护理物品（药品/护肤品/其他用品），实现物品添加、查看、筛选和过期提醒功能
适用场景：

• 用户需要记录和管理日常使用的药品和护肤品
• 用户需要跟踪物品有效期，避免使用过期产品
• 用户需要快速查看库存情况，及时补充物品
  页面类型：管理后台类页面（包含表单录入和卡片列表展示）

二、整体布局分析

页面宽度：1200px（居中显示），两侧留白
主要区域划分：

1. 页头区域（20%高度）
2. 主体内容区（80%高度）：
3. 左侧表单区（30%宽度）
4. 右侧列表区（70%宽度）
   布局特点：响应式左右布局（PC端左右分栏，移动端上下堆叠）
   响应式要求：

• ≥768px：左右分栏布局（1:2比例）
• <768px：上下堆叠布局（表单在上，列表在下）

三、页面区域详细描述

1. 页头区域

区域位置：页面顶部
区域尺寸：100%宽度，高度自适应（约200px）
区域功能：展示页面主题和核心价值
包含元素：

• 主标题：
• 元素类型：文本
• 显示内容：“健康护理管理”
• 样式特征：紫色(#6c63ff)、2.5rem、700字重、居中显示
• 副标题：
• 元素类型：文本
• 显示内容：“追踪您的药物、护肤品和其他健康用品，确保及时补充和管理有效期”
• 样式特征：灰色(#666)、1.1rem、最大宽度600px、居中显示

2. 表单添加区（左侧）

区域位置：主体内容区左侧
区域尺寸：100%高度，宽度自适应（响应式变化）
区域功能：新增健康护理物品的表单录入
包含元素：

• 表单标题：
• 元素类型：文本+图标
• 显示内容：“添加新物品”（带加号图标）
• 样式特征：紫色(#6c63ff)、1.5rem、带图标
• 物品名称输入框：
• 元素类型：文本输入框
• 交互行为：必填验证、获取焦点时紫色边框高亮
• 样式特征：圆角8px、内边距12px
• 物品类型下拉框：
• 元素类型：下拉选择框
• 可选值：药品/护肤品/其他用品
• 交互行为：必填验证、选择后触发样式变化
• 数量输入组合：
• 元素类型：数字输入框+单位下拉框
• 交互行为：最小值限制为1、单位联动显示
• 样式特征：flex布局、间距10px
• 有效期日期选择器：
• 元素类型：日期选择器
• 交互行为：默认显示明天日期、日期校验
• 备注文本框：
• 元素类型：多行文本域
• 交互行为：非必填、自适应高度
• 保存按钮：
• 元素类型：提交按钮
• 交互行为：表单验证、点击后触发数据保存
• 样式特征：紫色渐变背景、悬停上浮效果

3. 物品列表区（右侧）

区域位置：主体内容区右侧
区域尺寸：100%高度，宽度自适应（响应式变化）
区域功能：展示已添加物品的卡片式列表
包含元素：

• 列表标题栏：
• 元素类型：标题+搜索框
• 交互行为：搜索框实时过滤列表
• 样式特征：flex布局、两端对齐
• 分类筛选栏：
• 元素类型：按钮组
• 可选值：全部/药品/护肤品/其他
• 交互行为：点击切换激活状态、过滤列表
• 样式特征：圆角20px、激活状态紫色背景
• 物品卡片列表：
• 展示方式：响应式网格布局（最小300px）
• 数据字段：
• 物品名称：文本 – 必填 – 示例”阿司匹林”
• 物品类型：标签 – 必填 – 示例”药品”
• 数量：文本 – 必填 – 示例”10片”
• 添加日期：日期 – 自动生成 – 示例”2023-08-15″
• 有效期：日期 – 必填 – 示例”2024-05-20″
• 备注：文本 – 可选 – 示例”每日两次，每次一片”
• 操作功能：
• 删除按钮：点击后二次确认删除
• 悬停效果：卡片上浮5px
• 空状态提示：
• 元素类型：占位图+提示文本
• 显示条件：列表无数据时
• 样式特征：居中显示、灰色图标

四、交互功能详细说明

1. 添加物品功能

功能描述：录入新健康护理物品信息并保存
触发条件：点击表单提交按钮
操作流程：

1. 用户填写表单各字段（名称、类型、数量、有效期）
2. 点击”保存物品”按钮
3. 系统验证必填字段：
4. 验证通过：保存数据 → 刷新列表 → 显示成功通知
5. 验证失败：标记错误字段 → 阻止提交
   成功反馈：右上角显示3秒绿色通知条”物品已成功添加！”
   失败处理：

• 必填字段为空：红色边框高亮
• 数量小于1：提示”数量必须大于0″

2. 列表筛选功能

功能描述：按类型和关键词筛选物品
触发条件：

• 点击分类筛选按钮
• 在搜索框输入内容
  操作流程：

1. 用户点击分类按钮/输入搜索词
2. 系统实时过滤列表：
3. 分类筛选：显示匹配类型的物品
4. 关键词搜索：显示名称包含关键词的物品
5. 无结果时显示空状态
   状态变化：

• 激活的筛选按钮显示紫色背景
• 搜索框左侧显示放大镜图标

3. 物品删除功能

功能描述：从列表中移除指定物品
触发条件：点击卡片底部删除按钮
操作流程：

1. 用户点击”删除”按钮
2. 弹出确认对话框”确定要删除这个物品吗？”
3. 用户确认后：
4. 从数据中移除该物品
5. 刷新列表
6. 显示红色通知条”物品已成功删除！”
   异常处理：撤销删除则无任何操作

五、数据结构说明

关键数据字段：

六、开发实现要点

样式规范：

• 主色调：#6c63ff（紫色）
• 辅助色：#ff6584（粉色）、#4caf50（绿色）
• 字体规范：
• 标题：2.5rem/700字重
• 正文：1rem/400字重
• 按钮：1.1rem/600字重
• 间距系统：
• 卡片间距：20px
• 内边距：16px
• 表单元素间距：20px
• 组件样式：
• 卡片：圆角12px、顶部4px边框
• 按钮：圆角8px、14px垂直内边距

技术要求：

• 前端框架：提议使用Vue.js/React+TypeScript
• 数据存储：localStorage（需思考数据上限）
• 日期处理：推荐使用date-fns库
• 浏览器兼容：支持Chrome/Firefox/Edge最新2个版本

注意事项：

1. 有效期计算需思考时区问题
2. 移动端需优化表单输入体验（日期选择器适配）
3. 列表排序规则：按有效期升序（最近过期的排前面）
4. 颜色语义：
5. 过期/7天内：红色
6. 30天内：橙色
7. 其他：绿色