diff --git a/architecture_diagram.html b/architecture_diagram.html
index 90b128b..ce885e4 100644
--- a/architecture_diagram.html
+++ b/architecture_diagram.html
@@ -4,141 +4,157 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水务业务系统架构图</title>
+    <!-- 添加Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- 添加Font Awesome图标 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         body {
             font-family: "Microsoft YaHei", Arial, sans-serif;
-            margin: 0;
-            padding: 20px;
             background: #f8f9fa;
+            padding-top: 20px;
+            padding-bottom: 20px;
         }
         .architecture-diagram {
-            max-width: 1000px;
+            max-width: 1200px;
             margin: 0 auto;
             background: white;
-            padding: 20px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
-            border-radius: 5px;
+            padding: 30px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            border-radius: 10px;
         }
         h1 {
             text-align: center;
-            color: #333;
-            margin-bottom: 20px;
+            color: #2c3e50;
+            margin-bottom: 30px;
+            font-weight: 700;
         }
         .layer {
-            padding: 15px;
-            margin-bottom: 15px;
-            border-radius: 5px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 20px;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .layer:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
         }
         .layer-title {
             font-weight: bold;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
             display: flex;
             align-items: center;
+            font-size: 1.2rem;
         }
         .layer-content {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
+            gap: 15px;
         }
         .component {
-            padding: 8px;
-            border-radius: 4px;
-            flex: 1 1 calc(25% - 10px);
-            min-width: 150px;
+            padding: 15px;
+            border-radius: 6px;
+            flex: 1 1 calc(25% - 15px);
+            min-width: 180px;
             box-sizing: border-box;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .component:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
         }
         .component-title {
             font-weight: bold;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
             display: flex;
             align-items: center;
         }
         .component-desc {
-            font-size: 0.8rem;
-            color: #666;
+            font-size: 0.85rem;
+            color: #6c757d;
         }
         .arrow {
             text-align: center;
-            margin: 5px 0;
-            font-size: 20px;
-            color: #666;
+            margin: 10px 0;
+            font-size: 24px;
+            color: #6c757d;
         }
         
         /* 各层颜色样式 */
         .user-layer {
-            background: #f2f2f2;
-            border: 1px solid #666666;
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
         }
         .access-layer {
-            background: #e6f9ff;
-            border: 1px solid #0099cc;
+            background: #e7f5ff;
+            border: 1px solid #a5d8ff;
         }
         .app-layer {
-            background: #e6ffec;
-            border: 1px solid #00cc66;
+            background: #ebfbee;
+            border: 1px solid #8ce99a;
         }
         .middle-layer {
-            background: #fff2e6;
-            border: 1px solid #ff9933;
+            background: #fff9db;
+            border: 1px solid #ffe066;
         }
         .data-layer {
-            background: #f9e6ff;
-            border: 1px solid #9933ff;
+            background: #f3f0ff;
+            border: 1px solid #d0bfff;
         }
         .external-layer {
-            background: #ffe6e6;
-            border: 1px solid #ff3366;
+            background: #fff5f5;
+            border: 1px solid #ffc9c9;
         }
         .security-layer {
-            background: #ffe6e6;
-            border: 2px solid #cc0000;
+            background: #fff5f5;
+            border: 2px solid #ff8787;
         }
         .tenant-layer {
-            background: #e6f7ff;
-            border: 1px solid #3399ff;
+            background: #e7f5ff;
+            border: 1px solid #74c0fc;
         }
         
         /* 组件样式 */
         .user-component {
-            background: #f8f8f8;
-            border: 1px solid #999;
+            background: #f8f9fa;
+            border: 1px solid #ced4da;
         }
         .access-component {
-            background: #f0faff;
-            border: 1px solid #0099cc;
+            background: #e7f5ff;
+            border: 1px solid #a5d8ff;
         }
         .app-component {
-            background: #f0fff4;
-            border: 1px solid #00cc66;
+            background: #ebfbee;
+            border: 1px solid #8ce99a;
         }
         .middle-component {
-            background: #fff9f0;
-            border: 1px solid #ff9933;
+            background: #fff9db;
+            border: 1px solid #ffe066;
         }
         .data-component {
-            background: #fcf0ff;
-            border: 1px solid #9933ff;
+            background: #f3f0ff;
+            border: 1px solid #d0bfff;
         }
         .external-component {
-            background: #fff0f0;
-            border: 1px solid #ff3366;
+            background: #fff5f5;
+            border: 1px solid #ffc9c9;
         }
         .security-component {
-            background: #fff0f0;
-            border: 1px solid #cc0000;
+            background: #fff5f5;
+            border: 1px solid #ff8787;
         }
         .tenant-component {
-            background: #f0f8ff;
-            border: 1px solid #3399ff;
+            background: #e7f5ff;
+            border: 1px solid #74c0fc;
         }
         
         /* 跨层次安全和租户关系 */
         .cross-cutting {
             display: flex;
-            gap: 10px;
-            margin-top: 15px;
+            gap: 20px;
+            margin-top: 20px;
         }
         .cross-cutting .layer {
             flex: 1;
@@ -146,226 +162,249 @@
         
         /* 图标样式 */
         .icon {
-            margin-right: 5px;
+            margin-right: 8px;
+            width: 24px;
+            text-align: center;
+        }
+
+        /* 响应式调整 */
+        @media (max-width: 768px) {
+            .component {
+                flex: 1 1 calc(50% - 15px);
+            }
+            .cross-cutting {
+                flex-direction: column;
+            }
+        }
+        
+        @media (max-width: 576px) {
+            .component {
+                flex: 1 1 100%;
+            }
         }
     </style>
 </head>
 <body>
-    <div class="architecture-diagram">
-        <h1>水务业务系统架构图</h1>
-        
-        <!-- 用户层 -->
-        <div class="layer user-layer">
-            <div class="layer-title"><span class="icon">👥</span> 用户层</div>
-            <div class="layer-content">
-                <div class="component user-component">
-                    <div class="component-title"><span class="icon">🖥️</span> Web用户</div>
-                </div>
-                <div class="component user-component">
-                    <div class="component-title"><span class="icon">📱</span> 移动用户</div>
-                </div>
-                <div class="component user-component">
-                    <div class="component-title"><span class="icon">🏢</span> 营业厅人员</div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="arrow">↓</div>
-        
-        <!-- 接入层 -->
-        <div class="layer access-layer">
-            <div class="layer-title"><span class="icon">🔐</span> 接入层</div>
-            <div class="layer-content">
-                <div class="component access-component">
-                    <div class="component-title"><span class="icon">⚖️</span> 负载均衡</div>
-                </div>
-                <div class="component access-component">
-                    <div class="component-title"><span class="icon">🛡️</span> 防火墙</div>
-                </div>
-                <div class="component access-component">
-                    <div class="component-title"><span class="icon">🔑</span> 单点登录</div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="arrow">↓</div>
-        
-        <!-- 应用层 -->
-        <div class="layer app-layer">
-            <div class="layer-title"><span class="icon">📊</span> 应用层</div>
-            <div class="layer-content">
-                <!-- 平台基础 -->
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">🧩</span> 统一平台</div>
-                    <div class="component-desc">系统管理/流程提醒</div>
-                </div>
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">🔌</span> 接口服务</div>
-                    <div class="component-desc">API市场/权限管理</div>
-                </div>
-                
-                <!-- 业务核心 -->
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">💰</span> 营收系统</div>
-                    <div class="component-desc">抄表/收费/账务/发票</div>
-                </div>
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">🔧</span> 表务系统</div>
-                    <div class="component-desc">工单/仓库/物联网</div>
-                </div>
-                
-                <!-- 客户服务 -->
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">👨‍💼</span> 客户服务</div>
-                    <div class="component-desc">账单/发票</div>
-                </div>
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">📱</span> 抄表APP</div>
-                    <div class="component-desc">抄表/工单管理</div>
-                </div>
-                
-                <!-- 业务管理 -->
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">🏗️</span> 报装管理</div>
-                    <div class="component-desc">报装流程/一户一表</div>
-                </div>
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">🏗️</span> 工程管理</div>
-                    <div class="component-desc">申请/施工/验收</div>
-                </div>
-                
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">📊</span> 统计分析</div>
-                    <div class="component-desc">报表/欠费/用水分析</div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="arrow">↓</div>
-        
-        <!-- 中间层 -->
-        <div class="layer middle-layer">
-            <div class="layer-title"><span class="icon">⚙️</span> 中间层</div>
-            <div class="layer-content">
-                <div class="component middle-component">
-                    <div class="component-title"><span class="icon">🔄</span> 企业服务总线</div>
-                </div>
-                <div class="component middle-component">
-                    <div class="component-title"><span class="icon">📊</span> 统一报表</div>
-                </div>
-                <div class="component middle-component">
-                    <div class="component-title"><span class="icon">⚡</span> 缓存服务</div>
-                </div>
-                <div class="component middle-component">
-                    <div class="component-title"><span class="icon">📑</span> 工作流引擎</div>
-                </div>
-                <div class="component middle-component">
-                    <div class="component-title"><span class="icon">📨</span> 消息队列</div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="arrow">↓</div>
-        
-        <!-- 数据层 -->
-        <div class="layer data-layer">
-            <div class="layer-title"><span class="icon">💾</span> 数据层</div>
-            <div class="layer-content">
-                <div class="component data-component">
-                    <div class="component-title"><span class="icon">🗄️</span> 数据库集群</div>
-                </div>
-                <div class="component data-component">
-                    <div class="component-title"><span class="icon">📂</span> 文件服务器</div>
-                </div>
-                <div class="component data-component">
-                    <div class="component-title"><span class="icon">🔄</span> 数据备份</div>
-                </div>
-                <div class="component data-component">
-                    <div class="component-title"><span class="icon">🔄</span> 数据集成</div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- 外部接口层 -->
-        <div class="arrow">↔️</div>
-        
-        <div class="layer external-layer">
-            <div class="layer-title"><span class="icon">🌐</span> 外部接口层</div>
-            <div class="layer-content">
-                <div class="component external-component">
-                    <div class="component-title"><span class="icon">🏦</span> 银行接口</div>
-                </div>
-                <div class="component external-component">
-                    <div class="component-title"><span class="icon">💳</span> 支付接口</div>
-                </div>
-                <div class="component external-component">
-                    <div class="component-title"><span class="icon">📱</span> 短信接口</div>
-                </div>
-                <div class="component external-component">
-                    <div class="component-title"><span class="icon">📶</span> 物联网接口</div>
-                </div>
-                <div class="component external-component">
-                    <div class="component-title"><span class="icon">🏛️</span> 政务接口</div>
-                </div>
-                <div class="component external-component">
-                    <div class="component-title"><span class="icon">♻️</span> 环卫系统</div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- 跨层次关系 -->
-        <div class="cross-cutting">
-            <!-- 安全层 -->
-            <div class="layer security-layer">
-                <div class="layer-title"><span class="icon">🔐</span> 安全层</div>
+    <div class="container">
+        <div class="architecture-diagram">
+            <h1 class="mb-4">水务业务系统架构图</h1>
+            
+            <!-- 用户层 -->
+            <div class="layer user-layer">
+                <div class="layer-title"><i class="fas fa-users icon"></i> 用户层</div>
                 <div class="layer-content">
-                    <div class="component security-component">
-                        <div class="component-title"><span class="icon">🛡️</span> 网络安全</div>
+                    <div class="component user-component">
+                        <div class="component-title"><i class="fas fa-desktop icon"></i> Web用户</div>
                     </div>
-                    <div class="component security-component">
-                        <div class="component-title"><span class="icon">🔒</span> 数据安全</div>
+                    <div class="component user-component">
+                        <div class="component-title"><i class="fas fa-mobile-alt icon"></i> 移动用户</div>
                     </div>
-                    <div class="component security-component">
-                        <div class="component-title"><span class="icon">🔐</span> 应用安全</div>
+                    <div class="component user-component">
+                        <div class="component-title"><i class="fas fa-building icon"></i> 营业厅人员</div>
                     </div>
                 </div>
             </div>
             
-            <!-- 多租户架构 -->
-            <div class="layer tenant-layer">
-                <div class="layer-title"><span class="icon">🏢</span> 多租户架构</div>
+            <div class="arrow"><i class="fas fa-arrow-down"></i></div>
+            
+            <!-- 接入层 -->
+            <div class="layer access-layer">
+                <div class="layer-title"><i class="fas fa-lock icon"></i> 接入层</div>
                 <div class="layer-content">
-                    <div class="component tenant-component">
-                        <div class="component-title"><span class="icon">🏢</span> 集团</div>
+                    <div class="component access-component">
+                        <div class="component-title"><i class="fas fa-balance-scale icon"></i> 负载均衡</div>
                     </div>
-                    <div class="component tenant-component">
-                        <div class="component-title"><span class="icon">🏪</span> 分公司</div>
+                    <div class="component access-component">
+                        <div class="component-title"><i class="fas fa-shield-alt icon"></i> 防火墙</div>
                     </div>
-                    <div class="component tenant-component">
-                        <div class="component-title"><span class="icon">🏪</span> 营业站点</div>
+                    <div class="component access-component">
+                        <div class="component-title"><i class="fas fa-key icon"></i> 单点登录</div>
                     </div>
                 </div>
             </div>
-        </div>
-        
-        <!-- 技术栈 -->
-        <div class="layer app-layer" style="margin-top: 15px;">
-            <div class="layer-title"><span class="icon">🔧</span> 技术栈</div>
-            <div class="layer-content">
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">⚙️</span> 后端</div>
-                    <div class="component-desc">Spring Boot/MyBatis/Redis</div>
+            
+            <div class="arrow"><i class="fas fa-arrow-down"></i></div>
+            
+            <!-- 应用层 -->
+            <div class="layer app-layer">
+                <div class="layer-title"><i class="fas fa-chart-bar icon"></i> 应用层</div>
+                <div class="layer-content">
+                    <!-- 平台基础 -->
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-puzzle-piece icon"></i> 统一平台</div>
+                        <div class="component-desc">系统管理/流程提醒</div>
+                    </div>
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-plug icon"></i> 接口服务</div>
+                        <div class="component-desc">API市场/权限管理</div>
+                    </div>
+                    
+                    <!-- 业务核心 -->
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-money-bill-wave icon"></i> 营收系统</div>
+                        <div class="component-desc">抄表/收费/账务/发票</div>
+                    </div>
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-wrench icon"></i> 表务系统</div>
+                        <div class="component-desc">工单/仓库/物联网</div>
+                    </div>
+                    
+                    <!-- 客户服务 -->
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-user-tie icon"></i> 客户服务</div>
+                        <div class="component-desc">账单/发票</div>
+                    </div>
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-tablet-alt icon"></i> 抄表APP</div>
+                        <div class="component-desc">抄表/工单管理</div>
+                    </div>
+                    
+                    <!-- 业务管理 -->
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-hard-hat icon"></i> 报装管理</div>
+                        <div class="component-desc">报装流程/一户一表</div>
+                    </div>
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-tools icon"></i> 工程管理</div>
+                        <div class="component-desc">申请/施工/验收</div>
+                    </div>
+                    
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-chart-pie icon"></i> 统计分析</div>
+                        <div class="component-desc">报表/欠费/用水分析</div>
+                    </div>
                 </div>
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">🖥️</span> 前端</div>
-                    <div class="component-desc">Vue 3/Element Plus/Pinia</div>
+            </div>
+            
+            <div class="arrow"><i class="fas fa-arrow-down"></i></div>
+            
+            <!-- 中间层 -->
+            <div class="layer middle-layer">
+                <div class="layer-title"><i class="fas fa-cogs icon"></i> 中间层</div>
+                <div class="layer-content">
+                    <div class="component middle-component">
+                        <div class="component-title"><i class="fas fa-sync-alt icon"></i> 企业服务总线</div>
+                    </div>
+                    <div class="component middle-component">
+                        <div class="component-title"><i class="fas fa-chart-line icon"></i> 统一报表</div>
+                    </div>
+                    <div class="component middle-component">
+                        <div class="component-title"><i class="fas fa-bolt icon"></i> 缓存服务</div>
+                    </div>
+                    <div class="component middle-component">
+                        <div class="component-title"><i class="fas fa-file-alt icon"></i> 工作流引擎</div>
+                    </div>
+                    <div class="component middle-component">
+                        <div class="component-title"><i class="fas fa-envelope icon"></i> 消息队列</div>
+                    </div>
                 </div>
-                <div class="component app-component">
-                    <div class="component-title"><span class="icon">📱</span> 移动端</div>
-                    <div class="component-desc">uni-app/小程序/SDK集成</div>
+            </div>
+            
+            <div class="arrow"><i class="fas fa-arrow-down"></i></div>
+            
+            <!-- 数据层 -->
+            <div class="layer data-layer">
+                <div class="layer-title"><i class="fas fa-database icon"></i> 数据层</div>
+                <div class="layer-content">
+                    <div class="component data-component">
+                        <div class="component-title"><i class="fas fa-server icon"></i> 数据库集群</div>
+                    </div>
+                    <div class="component data-component">
+                        <div class="component-title"><i class="fas fa-folder-open icon"></i> 文件服务器</div>
+                    </div>
+                    <div class="component data-component">
+                        <div class="component-title"><i class="fas fa-redo icon"></i> 数据备份</div>
+                    </div>
+                    <div class="component data-component">
+                        <div class="component-title"><i class="fas fa-exchange-alt icon"></i> 数据集成</div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 外部接口层 -->
+            <div class="arrow"><i class="fas fa-arrows-alt-v"></i></div>
+            
+            <div class="layer external-layer">
+                <div class="layer-title"><i class="fas fa-globe icon"></i> 外部接口层</div>
+                <div class="layer-content">
+                    <div class="component external-component">
+                        <div class="component-title"><i class="fas fa-university icon"></i> 银行接口</div>
+                    </div>
+                    <div class="component external-component">
+                        <div class="component-title"><i class="fas fa-credit-card icon"></i> 支付接口</div>
+                    </div>
+                    <div class="component external-component">
+                        <div class="component-title"><i class="fas fa-sms icon"></i> 短信接口</div>
+                    </div>
+                    <div class="component external-component">
+                        <div class="component-title"><i class="fas fa-wifi icon"></i> 物联网接口</div>
+                    </div>
+                    <div class="component external-component">
+                        <div class="component-title"><i class="fas fa-landmark icon"></i> 政务接口</div>
+                    </div>
+                    <div class="component external-component">
+                        <div class="component-title"><i class="fas fa-recycle icon"></i> 环卫系统</div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 跨层次关系 -->
+            <div class="cross-cutting">
+                <!-- 安全层 -->
+                <div class="layer security-layer">
+                    <div class="layer-title"><i class="fas fa-shield-virus icon"></i> 安全层</div>
+                    <div class="layer-content">
+                        <div class="component security-component">
+                            <div class="component-title"><i class="fas fa-network-wired icon"></i> 网络安全</div>
+                        </div>
+                        <div class="component security-component">
+                            <div class="component-title"><i class="fas fa-database icon"></i> 数据安全</div>
+                        </div>
+                        <div class="component security-component">
+                            <div class="component-title"><i class="fas fa-laptop-code icon"></i> 应用安全</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 多租户架构 -->
+                <div class="layer tenant-layer">
+                    <div class="layer-title"><i class="fas fa-city icon"></i> 多租户架构</div>
+                    <div class="layer-content">
+                        <div class="component tenant-component">
+                            <div class="component-title"><i class="fas fa-building icon"></i> 集团</div>
+                        </div>
+                        <div class="component tenant-component">
+                            <div class="component-title"><i class="fas fa-store icon"></i> 分公司</div>
+                        </div>
+                        <div class="component tenant-component">
+                            <div class="component-title"><i class="fas fa-store-alt icon"></i> 营业站点</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 技术栈 -->
+            <div class="layer app-layer mt-4">
+                <div class="layer-title"><i class="fas fa-tools icon"></i> 技术栈</div>
+                <div class="layer-content">
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-server icon"></i> 后端</div>
+                        <div class="component-desc">Spring Boot/MyBatis/Redis</div>
+                    </div>
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-desktop icon"></i> 前端</div>
+                        <div class="component-desc">Vue 3/Element Plus/Pinia</div>
+                    </div>
+                    <div class="component app-component">
+                        <div class="component-title"><i class="fas fa-mobile-alt icon"></i> 移动端</div>
+                        <div class="component-desc">uni-app/小程序/SDK集成</div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+
+    <!-- 添加Bootstrap JS 和 Popper.js -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/images/architecture_diagram.png b/images/architecture_diagram.png
index 95eb0b2..fb6e77d 100644
Binary files a/images/architecture_diagram.png and b/images/architecture_diagram.png differ