zrd-nb666/campus_health_app/docs/diagrams/report-business-flow-new.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>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        h1 { color: #333; text-align: center; }
        h2 { color: #666; border-bottom: 2px solid #3b82f6; padding-bottom: 10px; }
        .mermaid { background: white; padding: 20px; border-radius: 8px; margin: 20px 0; }
        .description { background: white; padding: 15px; border-radius: 8px; margin: 10px 0; }
    </style>
</head>
<body>
    <h1>📊 数智健调 - 业务流程图</h1>
    
    <h2>1. 体重管理业务流程</h2>
    <div class="mermaid">
flowchart TD
    A[用户打开体重管理页面] --> B{是否有历史记录?}
    B -->|是| C[展示体重趋势图表]
    B -->|否| D[显示引导页面]
    C --> E[展示统计数据]
    D --> E
    E --> F[用户点击添加记录]
    F --> G[填写体重数据]
    G --> H[保存到本地存储]
    H --> I{网络可用?}
    I -->|是| J[同步到后端服务器]
    I -->|否| K[标记为待同步]
    J --> L[更新同步状态]
    K --> L
    L --> M[更新图表和统计]
    M --> N[检测异常变化]
    N --> O{存在异常?}
    O -->|是| P[显示异常提醒]
    O -->|否| Q[完成]
    P --> Q
    </div>
    
    <h2>2. 用户认证流程</h2>
    <div class="mermaid">
flowchart TD
    A[用户访问应用] --> B{已登录?}
    B -->|是| C[进入首页]
    B -->|否| D[显示登录页面]
    D --> E{用户选择}
    E -->|登录| F[输入账号密码]
    E -->|注册| G[输入手机号]
    E -->|忘记密码| H[输入手机号]
    F --> I[验证凭据]
    I --> J{验证成功?}
    J -->|是| K[保存登录状态]
    J -->|否| L[显示错误提示]
    K --> C
    L --> D
    G --> M[获取验证码]
    M --> N[验证手机号]
    N --> O[设置密码]
    O --> P[创建账户]
    P --> K
    H --> Q[验证身份]
    Q --> R[重置密码]
    R --> D
    </div>
    
    <h2>3. 数据同步流程</h2>
    <div class="mermaid">
sequenceDiagram
    participant U as 用户
    participant F as 前端应用
    participant L as LocalStorage
    participant B as 后端API
    participant D as MySQL数据库
    
    U->>F: 添加体重记录
    F->>L: 保存到本地(pending)
    F->>F: 检测网络状态
    alt 网络可用
        F->>B: POST /api/weight/records
        B->>D: INSERT记录
        D-->>B: 返回结果
        B-->>F: 返回成功
        F->>L: 更新状态(synced)
    else 网络不可用
        F->>L: 保持pending状态
        F->>F: 监听网络恢复
    end
    F-->>U: 显示操作结果
    </div>
    
    <div class="description">
        <h3>流程说明</h3>
        <ul>
            <li><strong>体重管理流程</strong>：从数据录入到异常检测的完整业务流程</li>
            <li><strong>用户认证流程</strong>：支持登录、注册、找回密码三种场景</li>
            <li><strong>数据同步流程</strong>：LocalStorage + 后端API双重持久化策略</li>
        </ul>
    </div>
</body>
</html>