花信 🌸

给老婆用的月经管理应用。简洁大方，内置多种可视化模型。

线上地址： https://47.102.213.175/huaxin/

---

网络拓扑

通过 WireGuard 组网（10.13.13.0/24），本机为 10.13.13.5，服务器为 10.13.13.1。由于 udp2raw 隧道 MTU 限制，部署时通过公网 SSH 进行。

技术栈

• 框架： Vue 3 + Vue Router 4
• 构建： Vite 5
• 图表： Canvas 2D 原生绘制
• 部署： Nginx 静态托管

项目结构

huaxin-uniapp/
├── src/
│   ├── App.vue                # 根组件 + Tab 导航栏
│   ├── main.js                # 入口 + 路由配置
│   ├── pages/
│   │   ├── Home.vue           # 首页：周期状态/预测/快捷记录/迷你趋势图
│   │   ├── Calendar.vue       # 日历：月视图 + 经期标记
│   │   ├── Record.vue         # 记录：流量/症状/情绪/备注
│   │   └── Analytics.vue      # 分析：6种可视化模型
│   ├── components/
│   │   ├── StatusCard.vue     # 状态卡片
│   │   ├── CycleBar.vue       # 周期进度条
│   │   └── QuickActions.vue   # 快捷按钮
│   └── utils/
│       ├── util.js            # 工具函数
│       └── mock.js            # 模拟数据
├── deploy.sh                  # 🚀 自动部署脚本
├── vite.config.js
├── index.html
└── package.json

6种可视化模型

模型	文件	说明
📈 折线图	drawLineChart()	周期长度趋势 + 28天基准线
📊 柱状图	drawBarChart()	每次经期天数对比
🎯 雷达图	drawRadarChart()	症状频率分析
🌊 热力图	generateHeatmap()	12月×31天年度热力分布
🔵 气泡图	drawBubbleChart()	情绪变化趋势
📋 箱线图	drawBoxChart()	流量分布统计

---

🌿 日常开发流程

1. 本地开发

# 启动开发服务器（浏览器 http://localhost:3000）
npm run dev

修改代码后热更新即时生效。

2. 提交代码

# 查看改了什么
git status
git diff

# 提交
git add -A
git commit -m "feat: 添加了xxx功能"
# 或
git commit -m "fix: 修复了xxx问题"
# 或
git commit -m "refactor: 重构了xxx"

3. 发布新版本

# 打标签（版本号自增）
git tag v1.1.0      # 新功能
git tag v1.0.1      # 小修复

# 推送到远程（如果有）
git push origin master --tags

4. 🚀 部署

一行命令搞定：

./deploy.sh

脚本会自动执行：

1. 检查 git 工作区是否干净
2. 读取当前版本号（git tag）
3. 安装依赖 + 构建 (npm run build)
4. 上传到服务器 /var/www/huaxin/
5. 重载 Nginx
6. 验证返回 HTTP 200

---

视觉设计

• 主色： #E893A7 玫瑰粉
• 辅助色： #C4A0D9 薰衣草紫
• 圆角： 12px 卡片风格
• 字体： -apple-system / PingFang SC

TODO

• 接入真实数据（替换 mock.js）
• 微信服务通知提醒
• 云端同步
• 数据导出（CSV）
• 暗黑模式