xuyunhui
/
aquagreen_wechat_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698
							<!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.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

    body {
      font-family: 'Noto Sans SC', sans-serif;
    }

    .glass {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(56, 189, 248, 0.15);
    }

    .glow-text {
      text-shadow: 0 0 20px rgba(56, 189, 248, 0.5), 0 0 40px rgba(56, 189, 248, 0.2);
    }

    .gradient-border {
      position: relative;
    }

    .gradient-border::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(56,189,248,0.8), rgba(168,85,247,0.4), rgba(56,189,248,0.1));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: radial-gradient(ellipse at center, #0f172a 0%, #020617 100%);
    }

    .tech-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 40px -10px rgba(56, 189, 248, 0.3);
    }

    .mermaid-wrapper {
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(56, 189, 248, 0.1);
      border-radius: 0.75rem;
      padding: 1.5rem;
      min-height: 500px;
    }

    .mermaid {
      display: flex;
      justify-content: center;
      font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif !important;
    }

    .mermaid svg {
      cursor: grab;
      max-width: none !important;
      filter: drop-shadow(0 0 8px rgba(15, 23, 42, 0.1));
    }

    .mermaid svg:active {
      cursor: grabbing;
    }

    .diagram-hint {
      text-align: center;
      color: #94a3b8;
      font-size: 14px;
      margin-top: 12px;
    }

    .zoom-controls {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 12px;
    }

    .zoom-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(56, 189, 248, 0.3);
      background: rgba(15, 23, 42, 0.6);
      color: #38bdf8;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .zoom-btn:hover {
      background: rgba(56, 189, 248, 0.2);
      border-color: rgba(56, 189, 248, 0.6);
    }

    .zoom-btn.reset {
      width: auto;
      padding: 0 14px;
      font-size: 13px;
    }
  </style>
</head>
<body class="text-slate-200 antialiased overflow-x-hidden">
  <canvas id="bg-canvas"></canvas>

  <!-- Hero -->
  <header class="relative min-h-[70vh] flex flex-col justify-center items-center px-6 text-center">
    <div class="absolute inset-0 bg-gradient-to-b from-cyan-500/5 via-transparent to-transparent pointer-events-none"></div>
    <div class="glass rounded-2xl px-8 py-12 max-w-4xl w-full gradient-border">
      <div class="mb-4 text-cyan-400 text-sm tracking-[0.3em] uppercase">System Architecture Report</div>
      <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-cyan-300 via-blue-400 to-purple-400 bg-clip-text text-transparent glow-text">
        清道夫系统
      </h1>
      <p class="text-xl md:text-2xl text-slate-300 mb-8">环境服务管理平台 · 系统架构汇报</p>
      <div class="flex flex-wrap justify-center gap-4 text-sm">
        <span class="px-4 py-2 rounded-full glass text-cyan-300"><i class="fa fa-mobile mr-2"></i>uni-app + Vue3 + TypeScript</span>
        <span class="px-4 py-2 rounded-full glass text-purple-300"><i class="fa fa-users mr-2"></i>销售 / 调度 / 施工 三端协同</span>
        <span class="px-4 py-2 rounded-full glass text-emerald-300"><i class="fa fa-sitemap mr-2"></i>54 个页面 · 4 个分包</span>
      </div>
    </div>
    <div class="absolute bottom-10 animate-bounce text-cyan-400/60">
      <i class="fa fa-chevron-down text-2xl"></i>
    </div>
  </header>

  <!-- Overview -->
  <section class="py-20 px-6">
    <div class="max-w-6xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-cyan-300">项目概况</h2>
        <p class="text-slate-400 max-w-3xl mx-auto text-lg">清道夫系统面向环境服务行业，覆盖销售、调度、施工三大角色，实现从项目立项、任务发布、调度派单、SOP 施工到验收结算的全流程数字化管理。</p>
      </div>
      <div class="grid md:grid-cols-3 gap-6">
        <div class="glass rounded-xl p-6 tech-card transition duration-300 gradient-border">
          <div class="w-12 h-12 rounded-lg bg-cyan-500/20 flex items-center justify-center mb-4">
            <i class="fa fa-handshake-o text-cyan-300 text-xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">销售端</h3>
          <p class="text-slate-400 text-sm">项目库管理、任务发布、进度跟踪、消息通知、知识库查询，支撑一线销售快速响应客户需求。</p>
        </div>
        <div class="glass rounded-xl p-6 tech-card transition duration-300 gradient-border">
          <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-4">
            <i class="fa fa-calendar-check-o text-purple-300 text-xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">调度端</h3>
          <p class="text-slate-400 text-sm">任务审核、排班派车、人员/车辆/班组管理、可视化大屏，实现资源高效调配。</p>
        </div>
        <div class="glass rounded-xl p-6 tech-card transition duration-300 gradient-border">
          <div class="w-12 h-12 rounded-lg bg-emerald-500/20 flex items-center justify-center mb-4">
            <i class="fa fa-wrench text-emerald-300 text-xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-2">施工端</h3>
          <p class="text-slate-400 text-sm">uni-app 微信小程序，支持每日检查、SOP 施工流程、照片分组上传、电子签名验收。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Overall Architecture -->
  <section class="py-20 px-6">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-cyan-300">总体系统架构</h2>
        <p class="text-slate-400">基于 Mermaid.js 渲染，支持拖拽与缩放查看</p>
      </div>

      <div class="glass rounded-2xl p-4 md:p-8 gradient-border">
        <div class="zoom-controls">
          <button class="zoom-btn" onclick="zoomOut('diagram-overall')" title="缩小"><i class="fa fa-minus"></i></button>
          <button class="zoom-btn" onclick="zoomIn('diagram-overall')" title="放大"><i class="fa fa-plus"></i></button>
          <button class="zoom-btn reset" onclick="resetZoom('diagram-overall')" title="重置"><i class="fa fa-compress mr-1"></i> 重置</button>
        </div>

        <div class="overflow-x-auto mermaid-wrapper">
          <div id="diagram-overall" class="mermaid interactive-diagram" style="min-width: 1300px;">
graph LR
    subgraph 用户层["用户层"]
        U1[销售人员]
        U2[调度管理员]
        U3[施工人员]
    end

    WX[微信客户端]

    MP[清道夫小程序
    <span style='font-size:15px'>uni-app + Vue3 + TypeScript</span>]

    subgraph 后端服务["后端服务"]
        API[API 网关]
        Auth[认证中心]
        BS[业务服务层
        <span style='font-size:15px'>项目 / 任务 / 排班 / 车辆 / 人员 / 通知 / 统计</span>]
    end

    subgraph 数据层["数据层"]
        DB[(关系型数据库)]
        OSS[文件存储]
        Cache[(Redis 缓存)]
    end

    subgraph 第三方服务["第三方服务"]
        MAP[腾讯地图]
        PUSH[微信推送]
    end

    U1 --> WX
    U2 --> WX
    U3 --> WX
    WX --> MP
    MP --> API
    API --> Auth
    API --> BS
    BS --> DB
    BS --> OSS
    BS --> Cache
    MP --> MAP
    BS --> PUSH

    style 用户层 fill:#f1f5f9,stroke:#38bdf8,stroke-width:2px
    style 后端服务 fill:#f1f5f9,stroke:#a855f7,stroke-width:2px
    style 数据层 fill:#f1f5f9,stroke:#34d399,stroke-width:2px
    style 第三方服务 fill:#f1f5f9,stroke:#f472b6,stroke-width:2px
          </div>
        </div>
        <p class="diagram-hint">💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制</p>
      </div>

      <div class="mt-6 grid md:grid-cols-2 gap-4 text-sm text-slate-400">
        <div class="glass rounded-lg p-4">
          <strong class="text-cyan-300">交互说明：</strong>鼠标拖拽可平移图表，滚轮可缩放查看细节，点击“重置”恢复初始视图。
        </div>
        <div class="glass rounded-lg p-4">
          <strong class="text-cyan-300">架构特点：</strong>前后端分离、多角色终端、RESTful 接口、JWT 认证、数据与文件分离存储。
        </div>
      </div>
    </div>
  </section>

  <!-- Frontend Page Structure -->
  <section class="py-20 px-6">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-cyan-300">前端页面与分包结构</h2>
        <p class="text-slate-400">主包 + 分包策略，实现按需加载与三端隔离</p>
      </div>

      <div class="glass rounded-2xl p-4 md:p-8 gradient-border">
        <div class="zoom-controls">
          <button class="zoom-btn" onclick="zoomOut('diagram-pages')" title="缩小"><i class="fa fa-minus"></i></button>
          <button class="zoom-btn" onclick="zoomIn('diagram-pages')" title="放大"><i class="fa fa-plus"></i></button>
          <button class="zoom-btn reset" onclick="resetZoom('diagram-pages')" title="重置"><i class="fa fa-compress mr-1"></i> 重置</button>
        </div>

        <div class="overflow-x-auto mermaid-wrapper">
          <div id="diagram-pages" class="mermaid interactive-diagram" style="min-width: 1100px;">
graph TB
    Root[小程序页面结构
    <span style='font-size:15px'>主包 + 分包</span>]

    Root --> Main[主包 pages/]
    Root --> Sub[分包 subPackages/]

    Main --> P1[首页 home]
    Main --> P2[任务 task]
    Main --> P3[排班 schedule]
    Main --> P4[我的 my]
    Main --> P5[登录 login]

    Sub --> Common[pages-common
    <span style='font-size:15px'>通用分包</span>]
    Sub --> Sales[pages-sales
    <span style='font-size:15px'>销售分包</span>]
    Sub --> Dispatch[pages-dispatch
    <span style='font-size:15px'>调度分包</span>]
    Sub --> Construction[pages-construction
    <span style='font-size:15px'>施工分包</span>]

    Common --> C1[项目库]
    Common --> C2[任务详情]
    Common --> C3[通知公告]
    Common --> C4[帮助中心]

    Sales --> S1[任务提醒]
    Sales --> S2[消息通知]
    Sales --> S3[知识库]

    Dispatch --> D1[排班管理]
    Dispatch --> D2[车辆人员]
    Dispatch --> D3[应急班组]
    Dispatch --> D4[可视化大屏]

    Construction --> CO1[每日任务]
    Construction --> CO2[历史任务]
    Construction --> CO3[明日任务]
          </div>
        </div>
        <p class="diagram-hint">💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制</p>
      </div>

      <div class="mt-6 glass rounded-lg p-4 text-sm text-slate-400">
        <strong class="text-cyan-300">分包说明：</strong>主包包含 5 个 Tab/入口页面；subPackages 下按业务维度划分为 pages-common（通用页面）、pages-sales（销售端）、pages-dispatch（调度端）、pages-construction（施工端）四个分包，实现按需加载。
      </div>
    </div>
  </section>

  <!-- Frontend Technical Architecture -->
  <section class="py-20 px-6">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-cyan-300">前端技术架构</h2>
        <p class="text-slate-400">视图层 → 状态层 → 接口层的分层设计</p>
      </div>

      <div class="glass rounded-2xl p-4 md:p-8 gradient-border">
        <div class="zoom-controls">
          <button class="zoom-btn" onclick="zoomOut('diagram-tech')" title="缩小"><i class="fa fa-minus"></i></button>
          <button class="zoom-btn" onclick="zoomIn('diagram-tech')" title="放大"><i class="fa fa-plus"></i></button>
          <button class="zoom-btn reset" onclick="resetZoom('diagram-tech')" title="重置"><i class="fa fa-compress mr-1"></i> 重置</button>
        </div>

        <div class="overflow-x-auto mermaid-wrapper">
          <div id="diagram-tech" class="mermaid interactive-diagram" style="min-width: 1100px;">
graph LR
    subgraph 视图层["视图层"]
        V1[pages 页面]
        V2[components 组件]
        V3[高级组件
        <span style='font-size:15px'>图片上传 / 地图 / 签名 / 图表</span>]
    end

    S1[Pinia Store]

    subgraph 接口层["接口层"]
        A1[request.ts 请求封装]
        A2[业务 API 模块]
    end

    B1[后端 RESTful API]

    V1 --> V2
    V2 --> V3
    V1 --> S1
    V2 --> S1
    V3 --> S1
    S1 --> A1
    A1 --> A2
    A2 --> B1

    style 视图层 fill:#f1f5f9,stroke:#38bdf8,stroke-width:2px
    style 接口层 fill:#f1f5f9,stroke:#a855f7,stroke-width:2px
          </div>
        </div>
        <p class="diagram-hint">💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制</p>
      </div>

      <div class="mt-6 glass rounded-lg p-4 text-sm text-slate-400">
        <strong class="text-cyan-300">前端说明：</strong>视图层由页面和组件构成，通用组件与业务组件分离；状态管理使用 Pinia，按业务领域拆分 Store；API 层统一封装 HTTP 请求并按模块组织接口函数，最终调用后端 RESTful API。
      </div>
    </div>
  </section>

  <!-- Data Flow -->
  <section class="py-20 px-6">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-cyan-300">核心业务流程</h2>
        <p class="text-slate-400">任务全生命周期数据流转</p>
      </div>

      <div class="glass rounded-2xl p-4 md:p-8 gradient-border">
        <div class="zoom-controls">
          <button class="zoom-btn" onclick="zoomOut('diagram-flow')" title="缩小"><i class="fa fa-minus"></i></button>
          <button class="zoom-btn" onclick="zoomIn('diagram-flow')" title="放大"><i class="fa fa-plus"></i></button>
          <button class="zoom-btn reset" onclick="resetZoom('diagram-flow')" title="重置"><i class="fa fa-compress mr-1"></i> 重置</button>
        </div>

        <div class="overflow-x-auto mermaid-wrapper">
          <div id="diagram-flow" class="mermaid interactive-diagram" style="min-width: 1100px;">
flowchart TB
    subgraph 调度阶段["调度阶段"]
        A[销售端
        <span style='font-size:16px'>发布任务</span>] --> B[调度端
        <span style='font-size:16px'>审核任务</span>]
        B --> C[调度端
        <span style='font-size:16px'>安排排班</span>]
        C --> D[分配车辆
        <span style='font-size:16px'>与人员</span>]
        D --> E[施工端
        <span style='font-size:16px'>接收任务</span>]
    end

    subgraph 施工阶段["施工阶段"]
        F[施工端
        <span style='font-size:16px'>出车</span>] --> G[到达现场
        <span style='font-size:16px'>签到</span>]
        G --> H[现场勘验]
        H --> I[施工作业]
        I --> J[上传照片
        <span style='font-size:16px'>电子签名</span>]
        J --> K[任务完成
        <span style='font-size:16px'>待验收</span>]
    end

    E --> F
    K --> L[调度端
    <span style='font-size:16px'>确认验收</span>]

    style A fill:#dbeafe,stroke:#2563eb,stroke-width:3px
    style B fill:#fef3c7,stroke:#d97706,stroke-width:3px
    style E fill:#dcfce7,stroke:#16a34a,stroke-width:3px
    style K fill:#fce7f3,stroke:#db2777,stroke-width:3px
    style L fill:#f3e8ff,stroke:#9333ea,stroke-width:3px
    style 调度阶段 fill:#f8fafc,stroke:#38bdf8,stroke-width:2px
    style 施工阶段 fill:#f8fafc,stroke:#16a34a,stroke-width:2px
          </div>
        </div>
        <p class="diagram-hint">💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制</p>
      </div>

      <div class="mt-6 glass rounded-lg p-4 text-sm text-slate-400">
        <strong class="text-cyan-300">流程说明：</strong>销售人员在项目基础上发布服务任务；调度管理员审核任务并安排排班，分配车辆和施工人员；施工人员通过小程序接收任务，按 SOP 流程执行出车、到场、勘验、施工、拍照签字等步骤；最终由调度端确认验收，形成业务闭环。
      </div>
    </div>
  </section>

  <!-- Tech Stack -->
  <section class="py-20 px-6">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center text-cyan-300">核心技术栈</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-cyan-400 font-bold text-lg">uni-app</div>
          <div class="text-slate-500 text-xs mt-1">小程序框架</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-cyan-400 font-bold text-lg">Vue 3</div>
          <div class="text-slate-500 text-xs mt-1">前端视图层</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-cyan-400 font-bold text-lg">TypeScript</div>
          <div class="text-slate-500 text-xs mt-1">类型安全开发</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-cyan-400 font-bold text-lg">Vite</div>
          <div class="text-slate-500 text-xs mt-1">构建工具</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-purple-400 font-bold text-lg">Pinia</div>
          <div class="text-slate-500 text-xs mt-1">状态管理</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-purple-400 font-bold text-lg">Tailwind CSS</div>
          <div class="text-slate-500 text-xs mt-1">样式方案</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-emerald-400 font-bold text-lg">RESTful API</div>
          <div class="text-slate-500 text-xs mt-1">后端接口</div>
        </div>
        <div class="glass rounded-lg p-4 text-center tech-card transition duration-300 gradient-border">
          <div class="text-emerald-400 font-bold text-lg">JWT Token</div>
          <div class="text-slate-500 text-xs mt-1">身份认证</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Layer Details -->
  <section class="py-20 px-6">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center text-cyan-300">架构分层说明</h2>
      <div class="space-y-6">
        <div class="glass rounded-xl p-6 md:flex items-start gap-6 gradient-border">
          <div class="w-14 h-14 rounded-xl bg-cyan-500/20 flex items-center justify-center shrink-0 mb-4 md:mb-0">
            <i class="fa fa-desktop text-cyan-300 text-2xl"></i>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-2 text-cyan-200">接入层</h3>
            <p class="text-slate-400 text-sm leading-relaxed">面向三类终端用户提供交互界面。销售端、调度端、施工端均为微信小程序，基于 uni-app + Vue3 + TypeScript + Tailwind CSS 开发；统一使用 uni-ui 及自定义组件，适配移动端操作习惯。</p>
          </div>
        </div>
        <div class="glass rounded-xl p-6 md:flex items-start gap-6 gradient-border">
          <div class="w-14 h-14 rounded-xl bg-purple-500/20 flex items-center justify-center shrink-0 mb-4 md:mb-0">
            <i class="fa fa-server text-purple-300 text-2xl"></i>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-2 text-purple-200">网关层</h3>
            <p class="text-slate-400 text-sm leading-relaxed">后端通过 RESTful API 提供统一服务入口，Base URL 为 http://localhost:8080/api。前端 request.ts 统一封装 HTTP 请求，自动注入 Bearer Token，处理 401 过期跳转。</p>
          </div>
        </div>
        <div class="glass rounded-xl p-6 md:flex items-start gap-6 gradient-border">
          <div class="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center shrink-0 mb-4 md:mb-0">
            <i class="fa fa-cogs text-blue-300 text-2xl"></i>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-2 text-blue-200">服务层</h3>
            <p class="text-slate-400 text-sm leading-relaxed">按业务领域划分为认证、项目、任务、排班、车辆、人员、通知、统计等模块。任务服务支持状态流转、催单、取消、日志等核心能力；排班服务支持按日期查询与班组资源分配。</p>
          </div>
        </div>
        <div class="glass rounded-xl p-6 md:flex items-start gap-6 gradient-border">
          <div class="w-14 h-14 rounded-xl bg-emerald-500/20 flex items-center justify-center shrink-0 mb-4 md:mb-0">
            <i class="fa fa-database text-emerald-300 text-2xl"></i>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-2 text-emerald-200">数据层</h3>
            <p class="text-slate-400 text-sm leading-relaxed">关系型数据库存储业务数据，Redis 缓存热点数据，对象存储承载施工照片、视频、电子签名等多媒体文件。核心实体包括用户、项目、任务、排班、车辆、人员、通知等。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="py-12 text-center text-slate-500 text-sm">
    <p>清道夫系统项目组 · 2026</p>
    <p class="mt-2">基于 uni-app + Vue3 + TypeScript 构建</p>
  </footer>

  <script>
    // Canvas particle background
    const canvas = document.getElementById('bg-canvas');
    const ctx = canvas.getContext('2d');
    let width, height, particles = [];

    function resize() {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    class Particle {
      constructor() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.vx = (Math.random() - 0.5) * 0.3;
        this.vy = (Math.random() - 0.5) * 0.3;
        this.size = Math.random() * 2 + 0.5;
        this.alpha = Math.random() * 0.5 + 0.2;
      }
      update() {
        this.x += this.vx;
        this.y += this.vy;
        if (this.x < 0) this.x = width;
        if (this.x > width) this.x = 0;
        if (this.y < 0) this.y = height;
        if (this.y > height) this.y = 0;
      }
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(56, 189, 248, ${this.alpha})`;
        ctx.fill();
      }
    }

    for (let i = 0; i < 80; i++) particles.push(new Particle());

    function animate() {
      ctx.clearRect(0, 0, width, height);
      particles.forEach(p => { p.update(); p.draw(); });
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < 120) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(56, 189, 248, ${0.12 * (1 - dist / 120)})`;
            ctx.lineWidth = 0.6;
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            ctx.stroke();
          }
        }
      }
      requestAnimationFrame(animate);
    }
    animate();

    // Pan / Zoom instances storage
    const panZoomInstances = {};

    // Mermaid init
    mermaid.initialize({
      startOnLoad: false,
      theme: 'dark',
      themeCSS: `
        .node rect, .node circle, .node polygon, .node path {
          stroke-width: 2.5px !important;
        }
        .node .label, .nodeLabel {
          font-size: 20px !important;
          font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif !important;
          font-weight: 500 !important;
          fill: #e2e8f0 !important;
        }
        .edgeLabel {
          font-size: 18px !important;
          font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif !important;
          background-color: rgba(15, 23, 42, 0.9) !important;
          color: #e2e8f0 !important;
          padding: 3px 8px !important;
          border-radius: 4px !important;
        }
        .cluster rect {
          stroke-width: 2.5px !important;
          fill: rgba(30, 41, 59, 0.6) !important;
        }
        .cluster .label {
          font-size: 22px !important;
          font-weight: bold !important;
          font-family: 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif !important;
          fill: #38bdf8 !important;
        }
      `,
      flowchart: {
        useMaxWidth: false,
        htmlLabels: true,
        curve: 'basis',
        padding: 24,
        nodeSpacing: 100,
        rankSpacing: 120,
        diagramPadding: 24
      },
      graph: {
        useMaxWidth: false,
        diagramPadding: 24
      }
    });

    document.addEventListener('DOMContentLoaded', async function() {
      try {
        await mermaid.run({
          querySelector: '.mermaid'
        });

        document.querySelectorAll('.interactive-diagram svg').forEach(function(svg) {
          const container = svg.closest('.interactive-diagram');
          const id = container ? container.id : null;
          if (!id) return;

          panZoomInstances[id] = svgPanZoom(svg, {
            zoomEnabled: true,
            controlIconsEnabled: false,
            fit: true,
            center: true,
            minZoom: 0.3,
            maxZoom: 5,
            dblClickZoomEnabled: false
          });
        });
      } catch (err) {
        console.error('Mermaid 渲染失败:', err);
      }
    });

    function zoomIn(id) {
      if (panZoomInstances[id]) {
        panZoomInstances[id].zoomIn();
      }
    }

    function zoomOut(id) {
      if (panZoomInstances[id]) {
        panZoomInstances[id].zoomOut();
      }
    }

    function resetZoom(id) {
      if (panZoomInstances[id]) {
        panZoomInstances[id].reset();
        panZoomInstances[id].center();
      }
    }
  </script>
</body>
</html>