智能药箱管家

作品简介

一句话描述

拍一张药品包装或药盒，AI自动识别药品名称、规格、有效期，生成药品库存，支持手动录入、有效期提醒、用药计划与统计管理。

功能要求

┌───────────┬──────────────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐

│ 优先级 │ 功能 │ 说明 │

├───────────┼──────────────────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤

│ P0 │ 手动录入 │ 输入药品名称、规格（如"10mg×20片"）、主治类别（感冒、消化、慢性病等）、有效期、添加备注（如"饭前服用""每日一次"） │

│ P2(低优） │ 拍照识别 │ 通过相机拍照或从相册选择药品包装/药盒图片，AI自动识别药品名称、规格、有效期、推荐主治类别 │

│ P0 │ 药品库存列表 │ 按有效期剩余天数排序（临近过期在最前） │

│ P1 │ 统计图表 │ 展示近12个月过期药品数量趋势（折线图）和当前库存药品类别占比（饼图） │

│ P1 │ 分类管理 │ 用户可自定义主治类别 │

│ P1 │ 数据持久化 │ 关闭App重新打开数据不丢失 │

│ P2 │ 识别纠错 │ 拍照识别后进入确认页面，用户可手动修正药品信息 │

│ P2 │ 有效期提醒 │ 可设置提前提醒天数，当药品剩余有效期 ≤ 提醒天数时推送提醒 │

│ P3 │ 用药提醒（可选） │ 用户可为特定药品设置用药计划和提醒时间 │

└───────────┴──────────────────┴───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

实现完成报告

技术方案

- 前端框架：React 19 + TypeScript + Vite 6

- UI 样式：TailwindCSS 4（@tailwindcss/vite 插件）

- 数据存储：Dexie 4 (IndexedDB) - 浏览器原生持久化

- 图表库：Recharts 2 - 饼图 + 折线图

- 路由：React Router 7

- 图标：lucide-react

- 构建环境：Node.js + Vite

功能实现状态

┌────────┬──────────────────────────────────────────────────────────┬──────────────────────┐

│ 优先级 │ 功能 │ 状态 │

├────────┼──────────────────────────────────────────────────────────┼──────────────────────┤

│ P0 │ 手动录入（药品名称、规格、主治类别、有效期、备注） │ ✅ 已完成 │

│ P0 │ 药品库存列表（按有效期排序，颜色标识过期状态，搜索筛选） │ ✅ 已完成 │

│ P1 │ 统计图表（饼图：类别占比；折线图：12月到期趋势） │ ✅ 已完成 │

│ P1 │ 分类管理（8个默认分类 + 用户自定义增删） │ ✅ 已完成 │

│ P1 │ 数据持久化（IndexedDB，关闭重开不丢失） │ ✅ 已完成 │

│ P2 │ 拍照识别（相机拍照/相册选择） │ 未实现（按计划跳过） │

│ P2 │ 识别纠错 │ 未实现（按计划跳过） │

│ P2 │ 有效期提醒 │ 未实现（按计划跳过） │

└────────┴──────────────────────────────────────────────────────────┴──────────────────────┘

项目结构

~/work/medicine-cabinet/

├── src/

│ ├── main.tsx # 入口，seed 默认分类

│ ├── App.tsx # 路由 + 布局

│ ├── app.css # TailwindCSS 4 入口

│ ├── models/types.ts # 类型定义

│ ├── lib/constants.ts # 默认分类、颜色阈值

│ ├── lib/utils.ts # 日期计算、过期状态

│ ├── db/index.ts # Dexie 数据库定义

│ ├── db/seed.ts # 默认 8 分类 seed

│ ├── hooks/ # useMedicines, useCategories, useStats

│ ├── components/ # 布局/UI/功能组件

│ └── pages/ # 5 个页面

├── package.json

├── vite.config.ts

└── tsconfig.json

核心设计

- 数据流：Page → Hook → Dexie → IndexedDB，useLiveQuery 自动响应式更新

- 过期色标：红色（已过期）/ 黄色（30天内）/ 绿色（安全）

- 排序：按到期剩余天数升序，最快过期排最前

- 移动端优先：h-dvh 全屏、底部导航固定、原生 date picker、卡片布局

项目亮点

- 移动端优先设计：底部导航、卡片布局、触摸优化

- 完善的数据管理：增删改查 + 搜索筛选

- 可视化统计：饼图 + 折线图，直观展示药品状态

- 过期状态颜色标识：红色（已过期）、黄色（30天内）、绿色（安全）

- 数据安全：本地 IndexedDB 存储，隐私无忧

- 类型安全：全程 TypeScript 开发

- TypeScript 类型检查通过，零错误

创作时间：