zrd-nb666/campus_health_app/docs/diagrams/report-system-architecture.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>整体系统架构</h2>
    <div class="mermaid">
graph TB
    subgraph Client["客户端层"]
        WEB[Web浏览器]
        MOBILE[移动端浏览器]
    end
    
    subgraph Frontend["前端应用 - Angular 20"]
        APP[App Component]
        ROUTER[Router Module]
        subgraph Modules["功能模块"]
            WEIGHT[体重管理]
            DIET[饮食管理]
            EXERCISE[运动管理]
            MONITOR[健康监测]
            SCHOOL[校园服务]
            USER[用户中心]
        end
        subgraph Services["服务层"]
            AUTH_SVC[Auth Service]
            DATA_SVC[Data Service]
            THEME_SVC[Theme Service]
        end
        LOCAL[LocalStorage]
    end
    
    subgraph Backend["后端服务 - Node.js + Express"]
        EXPRESS[Express Server]
        subgraph Middleware["中间件"]
            CORS[CORS]
            AUTH_MW[Auth Middleware]
            ERROR[Error Handler]
        end
        subgraph Controllers["控制器"]
            WEIGHT_CTRL[Weight Controller]
            USER_CTRL[User Controller]
        end
        subgraph BizServices["业务服务"]
            RECORD_SVC[Record Service]
            GOAL_SVC[Goal Service]
            STATS_SVC[Stats Service]
        end
    end
    
    subgraph Database["数据层"]
        TYPEORM[TypeORM]
        MYSQL[(MySQL 8.0)]
    end
    
    WEB --> APP
    MOBILE --> APP
    APP --> ROUTER
    ROUTER --> Modules
    Modules --> Services
    Services --> LOCAL
    Services -->|HTTP/REST| EXPRESS
    EXPRESS --> Middleware
    Middleware --> Controllers
    Controllers --> BizServices
    BizServices --> TYPEORM
    TYPEORM --> MYSQL
    </div>
    
    <div class="description">
        <h3>架构说明</h3>
        <ul>
            <li><strong>客户端层</strong>：支持Web浏览器和移动端浏览器访问</li>
            <li><strong>前端应用</strong>：基于Angular 20框架，采用模块化设计</li>
            <li><strong>后端服务</strong>：Node.js + Express构建RESTful API</li>
            <li><strong>数据层</strong>：TypeORM + MySQL实现数据持久化</li>
        </ul>
    </div>
</body>
</html>