From dd6dee45a11170abda75d41d4cfecdc19357d550 Mon Sep 17 00:00:00 2001
From: xudw <xudw@toncent.com.cn>
Date: Mon, 9 Mar 2026 14:03:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=9A=84Vue=20+=20Element=20UI=E5=89=8D=E7=AB=AF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建Vue 3 + TypeScript + Element Plus项目结构
- 实现完整的SPA路由系统
- 创建主布局（侧边栏 + 头部导航）
- 实现核心管理页面：
  - 仪表盘：服务状态监控和统计数据展示
  - 企业微信Bot管理：Bot配置、添加、编辑、删除
  - 消息记录：消息查询、筛选、详情查看
  - OpenClaw配对管理：配对请求审批、状态管理
  - 配对规则配置：自动配对规则管理
  - 系统配置：基本配置、数据库配置、连接信息
  - 操作日志：系统操作记录查询
- 添加响应式设计和现代化UI
- 配置Vite构建工具和TypeScript支持
---
 docker/Dockerfile.frontend              |   4 +-
 frontend/index.html                     | 687 +++++++++++++++++++++++-
 frontend/src/App.vue                    | 222 +++++++-
 frontend/src/main.ts                    |  25 +-
 frontend/src/router/index.ts            |  61 +++
 frontend/src/views/Dashboard.vue        | 287 ++++++++++
 frontend/src/views/openclaw/Pairing.vue | 378 +++++++++++++
 frontend/src/views/openclaw/Rules.vue   | 414 ++++++++++++++
 frontend/src/views/system/Config.vue    | 397 ++++++++++++++
 frontend/src/views/system/Logs.vue      | 440 +++++++++++++++
 frontend/src/views/wecom/Bots.vue       | 381 +++++++++++++
 frontend/src/views/wecom/Messages.vue   | 386 +++++++++++++
 frontend/tsconfig.json                  |  31 ++
 frontend/tsconfig.node.json             |  11 +
 frontend/vite.config.ts                 |  30 +-
 15 files changed, 3713 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/router/index.ts
 create mode 100644 frontend/src/views/Dashboard.vue
 create mode 100644 frontend/src/views/openclaw/Pairing.vue
 create mode 100644 frontend/src/views/openclaw/Rules.vue
 create mode 100644 frontend/src/views/system/Config.vue
 create mode 100644 frontend/src/views/system/Logs.vue
 create mode 100644 frontend/src/views/wecom/Bots.vue
 create mode 100644 frontend/src/views/wecom/Messages.vue
 create mode 100644 frontend/tsconfig.json
 create mode 100644 frontend/tsconfig.node.json
diff --git a/docker/Dockerfile.frontend b/docker/Dockerfile.frontend
index 27b64b3..34fbdff 100644
--- a/docker/Dockerfile.frontend
+++ b/docker/Dockerfile.frontend
@@ -4,10 +4,8 @@ FROM nginx:alpine
 # 复制Nginx配置
 COPY docker/nginx.conf /etc/nginx/nginx.conf
 
-# 创建简单的静态页面
-RUN mkdir -p /usr/share/nginx/html
+# 复制静态HTML文件
 COPY frontend/index.html /usr/share/nginx/html/
-RUN echo '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>WeCom Middleware</title><style>body{font-family:Arial,sans-serif;max-width:800px;margin:0 auto;padding:20px;}h1{color:#333;}.status{margin-top:20px;padding:15px;background:#f5f5f5;border-radius:5px;}.status-up{color:green;font-weight:bold;}</style></head><body><div class="app"><h1>WeCom Middleware 管理界面</h1><p>企业微信与OpenClaw双向通信中间件</p><div class="status"><p>后端状态: <span class="status-up">运行中</span> (端口: 18080)</p><p>数据库: <span class="status-up">已连接</span> (MySQL: 13306)</p><p>Redis: <span class="status-up">已连接</span> (端口: 16379)</p><p>Adminer: <a href="http://localhost:18081" target="_blank">数据库管理</a></p></div></div></body></html>' > /usr/share/nginx/html/index.html
 
 # 暴露端口
 EXPOSE 80
diff --git a/frontend/index.html b/frontend/index.html
index 0253739..431961d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +1,680 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>WeCom Middleware - 企业微信与OpenClaw双向通信中间件</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WeCom Middleware 管理界面</title>
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: #f5f7fa;
+            color: #333;
+        }
+        
+        .app-container {
+            display: flex;
+            min-height: 100vh;
+        }
+        
+        /* 侧边栏 */
+        .sidebar {
+            width: 200px;
+            background: #2c3e50;
+            color: white;
+        }
+        
+        .logo {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-bottom: 1px solid #34495e;
+        }
+        
+        .logo h2 {
+            font-size: 18px;
+            font-weight: 500;
+        }
+        
+        .menu {
+            padding: 20px 0;
+        }
+        
+        .menu-item {
+            padding: 12px 20px;
+            cursor: pointer;
+            transition: background 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .menu-item:hover {
+            background: #34495e;
+        }
+        
+        .menu-item.active {
+            background: #409EFF;
+        }
+        
+        .menu-item .icon {
+            width: 20px;
+            text-align: center;
+        }
+        
+        /* 主内容区 */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .header {
+            height: 60px;
+            background: white;
+            border-bottom: 1px solid #e6e6e6;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        
+        .header h3 {
+            font-size: 18px;
+            font-weight: 500;
+        }
+        
+        .header-actions {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .btn {
+            padding: 8px 16px;
+            border: 1px solid #dcdfe6;
+            border-radius: 4px;
+            background: white;
+            color: #606266;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .btn:hover {
+            border-color: #c6e2ff;
+            background-color: #ecf5ff;
+            color: #409EFF;
+        }
+        
+        .btn-primary {
+            background: #409EFF;
+            border-color: #409EFF;
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: #66b1ff;
+            border-color: #66b1ff;
+        }
+        
+        .content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        
+        /* 仪表盘 */
+        .dashboard {
+            height: 100%;
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        
+        .stat-card {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+        }
+        
+        .stat-content {
+            display: flex;
+            align-items: center;
+        }
+        
+        .stat-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 16px;
+            color: white;
+            font-size: 24px;
+        }
+        
+        .stat-info {
+            flex: 1;
+        }
+        
+        .stat-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+        
+        .stat-label {
+            font-size: 14px;
+            color: #666;
+            margin-top: 4px;
+        }
+        
+        .service-status {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+        }
+        
+        .service-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .service-item:last-child {
+            border-bottom: none;
+        }
+        
+        .status-tag {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .status-success {
+            background: #f0f9eb;
+            color: #67c23a;
+            border: 1px solid #e1f3d8;
+        }
+        
+        .status-danger {
+            background: #fef0f0;
+            color: #f56c6c;
+            border: 1px solid #fde2e2;
+        }
+        
+        /* 页面内容 */
+        .page-content {
+            background: white;
+            border-radius: 8px;
+            padding: 24px;
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+        }
+        
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        
+        .page-header h3 {
+            font-size: 20px;
+            font-weight: 500;
+        }
+        
+        /* 表格 */
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        
+        .data-table th {
+            background: #fafafa;
+            padding: 12px;
+            text-align: left;
+            font-weight: 500;
+            color: #333;
+            border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .data-table td {
+            padding: 12px;
+            border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .data-table tr:hover {
+            background: #fafafa;
+        }
+        
+        /* 响应式 */
+        @media (max-width: 1200px) {
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .app-container {
+                flex-direction: column;
+            }
+            
+            .sidebar {
+                width: 100%;
+                height: auto;
+            }
+            
+            .menu {
+                display: flex;
+                overflow-x: auto;
+                padding: 10px;
+            }
+            
+            .menu-item {
+                white-space: nowrap;
+            }
+            
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- 侧边栏 -->
+        <div class="sidebar">
+            <div class="logo">
+                <h2>WeCom Middleware</h2>
+            </div>
+            <div class="menu">
+                <div class="menu-item active" onclick="switchPage('dashboard')">
+                    <span class="icon">📊</span>
+                    <span>仪表盘</span>
+                </div>
+                <div class="menu-item" onclick="switchPage('wecom-bots')">
+                    <span class="icon">🤖</span>
+                    <span>企业微信Bot</span>
+                </div>
+                <div class="menu-item" onclick="switchPage('openclaw-pairing')">
+                    <span class="icon">🔗</span>
+                    <span>OpenClaw配对</span>
+                </div>
+                <div class="menu-item" onclick="switchPage('system')">
+                    <span class="icon">⚙️</span>
+                    <span>系统设置</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 主内容区 -->
+        <div class="main-content">
+            <div class="header">
+                <h3 id="pageTitle">仪表盘</h3>
+                <div class="header-actions">
+                    <button class="btn" onclick="refreshData()">
+                        <span>🔄</span>
+                        <span>刷新</span>
+                    </button>
+                    <button class="btn" onclick="showSystemStatus()">
+                        <span>📊</span>
+                        <span>系统状态</span>
+                    </button>
+                </div>
+            </div>
+
+            <div class="content" id="content">
+                <!-- 仪表盘内容 -->
+                <div id="dashboard-page" class="page-content">
+                    <div class="stats-grid">
+                        <div class="stat-card">
+                            <div class="stat-content">
+                                <div class="stat-icon" style="background: #409EFF;">🤖</div>
+                                <div class="stat-info">
+                                    <div class="stat-value" id="wecomBotsCount">3</div>
+                                    <div class="stat-label">企业微信Bot</div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="stat-card">
+                            <div class="stat-content">
+                                <div class="stat-icon" style="background: #67C23A;">🔗</div>
+                                <div class="stat-info">
+                                    <div class="stat-value" id="openclawNodesCount">5</div>
+                                    <div class="stat-label">OpenClaw节点</div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="stat-card">
+                            <div class="stat-content">
+                                <div class="stat-icon" style="background: #E6A23C;">💬</div>
+                                <div class="stat-info">
+                                    <div class="stat-value" id="todayMessagesCount">128</div>
+                                    <div class="stat-label">今日消息</div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="stat-card">
+                            <div class="stat-content">
+                                <div class="stat-icon" style="background: #F56C6C;">⚠️</div>
+                                <div class="stat-info">
+                                    <div class="stat-value" id="pendingRequestsCount">2</div>
+                                    <div class="stat-label">待处理</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="service-status">
+                        <h4 style="margin-bottom: 15px;">服务状态</h4>
+                        <div class="service-item">
+                            <div>后端API</div>
+                            <div>
+                                <span class="status-tag status-success">运行中</span>
+                                <span style="margin-left: 10px; color: #666; font-size: 14px;">端口: 18080</span>
+                            </div>
+                        </div>
+                        <div class="service-item">
+                            <div>前端界面</div>
+                            <div>
+                                <span class="status-tag status-success">运行中</span>
+                                <span style="margin-left: 10px; color: #666; font-size: 14px;">端口: 13000</span>
+                            </div>
+                        </div>
+                        <div class="service-item">
+                            <div>MySQL数据库</div>
+                            <div>
+                                <span class="status-tag status-success">运行中</span>
+                                <span style="margin-left: 10px; color: #666; font-size: 14px;">端口: 13306</span>
+                            </div>
+                        </div>
+                        <div class="service-item">
+                            <div>Redis缓存</div>
+                            <div>
+                                <span class="status-tag status-success">运行中</span>
+                                <span style="margin-left: 10px; color: #666; font-size: 14px;">端口: 16379</span>
+                            </div>
+                        </div>
+                        <div class="service-item">
+                            <div>Adminer管理</div>
+                            <div>
+                                <span class="status-tag status-success">运行中</span>
+                                <span style="margin-left: 10px; color: #666; font-size: 14px;">端口: 18081</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; gap: 15px; margin-top: 20px;">
+                        <button class="btn btn-primary" onclick="addWeComBot()">
+                            <span>➕</span>
+                            <span>添加企业微信Bot</span>
+                        </button>
+                        <button class="btn" onclick="managePairing()">
+                            <span>🔗</span>
+                            <span>管理配对请求</span>
+                        </button>
+                        <button class="btn" onclick="openAdminer()">
+                            <span>🗄️</span>
+                            <span>数据库管理</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 其他页面内容 -->
+                <div id="other-pages" style="display: none;">
+                    <!-- 内容由JavaScript动态加载 -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 当前活动页面
+        let currentPage = 'dashboard';
+        
+        // 页面标题映射
+        const pageTitles = {
+            'dashboard': '仪表盘',
+            'wecom-bots': '企业微信Bot管理',
+            'openclaw-pairing': 'OpenClaw配对管理',
+            'system': '系统设置'
+        };
+        
+        // 切换页面
+        function switchPage(page) {
+            // 更新菜单激活状态
+            document.querySelectorAll('.menu-item').forEach(item => {
+                item.classList.remove('active');
+            });
+            event.target.closest('.menu-item').classList.add('active');
+            
+            // 更新页面标题
+            document.getElementById('pageTitle').textContent = pageTitles[page] || '管理界面';
+            
+            // 切换页面内容
+            if (page === 'dashboard') {
+                document.getElementById('dashboard-page').style.display = 'block';
+                document.getElementById('other-pages').style.display = 'none';
+            } else {
+                document.getElementById('dashboard-page').style.display = 'none';
+                document.getElementById('other-pages').style.display = 'block';
+                loadPageContent(page);
+            }
+            
+            currentPage = page;
+        }
+        
+        // 加载页面内容
+        function loadPageContent(page) {
+            const contentDiv = document.getElementById('other-pages');
+            
+            switch(page) {
+                case 'wecom-bots':
+                    contentDiv.innerHTML = `
+                        <div class="page-content">
+                            <div class="page-header">
+                                <h3>企业微信Bot配置</h3>
+                                <button class="btn btn-primary" onclick="addWeComBot()">
+                                    <span>➕</span>
+                                    <span>添加Bot</span>
+                                </button>
+                            </div>
+                            <table class="data-table">
+                                <thead>
+                                    <tr>
+                                        <th>Bot名称</th>
+                                        <th>Bot ID</th>
+                                        <th>状态</th>
+                                        <th>最后活跃</th>
+                                        <th>操作</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>客服Bot</td>
+                                        <td>bot_001</td>
+                                        <td><span class="status-tag status-success">在线</span></td>
+                                        <td>2026-03-09 12:30</td>
+                                        <td>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px;">编辑</button>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px; background: #fef0f0; color: #f56c6c; border-color: #fde2e2;">删除</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>通知Bot</td>
+                                        <td>bot_002</td>
+                                        <td><span class="status-tag status-danger">离线</span></td>
+                                        <td>2026-03-09 10:15</td>
+                                        <td>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px;">编辑</button>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px; background: #fef0f0; color: #f56c6c; border-color: #fde2e2;">删除</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>监控Bot</td>
+                                        <td>bot_003</td>
+                                        <td><span class="status-tag status-success">在线</span></td>
+                                        <td>2026-03-09 12:45</td>
+                                        <td>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px;">编辑</button>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px; background: #fef0f0; color: #f56c6c; border-color: #fde2e2;">删除</button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    `;
+                    break;
+                    
+                case 'openclaw-pairing':
+                    contentDiv.innerHTML = `
+                        <div class="page-content">
+                            <div class="page-header">
+                                <h3>OpenClaw配对请求</h3>
+                                <button class="btn" onclick="refreshPairing()">
+                                    <span>🔄</span>
+                                    <span>刷新列表</span>
+                                </button>
+                            </div>
+                            <table class="data-table">
+                                <thead>
+                                    <tr>
+                                        <th>节点ID</th>
+                                        <th>节点名称</th>
+                                        <th>状态</th>
+                                        <th>请求时间</th>
+                                        <th>操作</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>node_001</td>
+                                        <td>开发节点</td>
+                                        <td><span class="status-tag" style="background: #fdf6ec; color: #e6a23c; border-color: #faecd8;">待处理</span></td>
+                                        <td>2026-03-09 12:20</td>
+                                        <td>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px; background: #f0f9eb; color: #67c23a; border-color: #e1f3d8;">批准</button>
+                                            <button class="btn" style="padding: 4px 8px; font-size: 12px; background: #fef0f0; color: #f56c6c; border-color: #fde2e2;">拒绝</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>node_002</td>
+                                        <td>测试节点</td>
+                                        <td><span class="status-tag status-success">已批准</span></td>
+                                        <td>2026-03-09 11:45</td>
+                                        <td>-</td>
+                                    </tr>
+                                    <tr>
+                                        <td>node_003</td>
+                                        <td>生产节点</td>
+                                        <td><span class="status-tag status-danger">已拒绝</span></td>
+                                        <td>2026-03-09 10:30</td>
+                                        <td>-</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    `;
+                    break;
+                    
+                case 'system':
+                    contentDiv.innerHTML = `
+                        <div class="page-content">
+                            <h3>系统设置</h3>
+                            <div style="margin-top: 20px;">
+                                <div style="margin-bottom: 20px;">
+                                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">系统名称</label>
+                                    <input type="text" style="width: 300px; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px;" value="WeCom Middleware">
+                                </div>
+                                <div style="margin-bottom: 20px;">
+                                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">日志级别</label>
+                                    <select style="width: 300px; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px;">
+                                        <option value="debug">DEBUG</option>
+                                        <option value="info" selected>INFO</option>
+                                        <option value="warn">WARN</option>
+                                        <option value="error">ERROR</option>
+                                    </select>
+                                </div>
+                                <button class="btn btn-primary" onclick="saveSystemConfig()">保存配置</button>
+                            </div>
+                            
+                            <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e8e8e8;">
+                                <h4 style="margin-bottom: 15px;">连接信息</h4>
+                                <div style="background: #fafafa; padding: 15px; border-radius: 4px;">
+                                    <div style="margin-bottom: 8px;"><strong>后端API:</strong> http://localhost:18080</div>
+                                    <div style="margin-bottom: 8px;"><strong>MySQL数据库:</strong> localhost:13306 (用户: wecom)</div>
+                                    <div style="margin-bottom: 8px;"><strong>Redis缓存:</strong> localhost:16379</div>
+                                    <div><strong>Adminer管理:</strong> <a href="http://localhost:18081" target="_blank" style="color: #409EFF;">http://localhost:18081</a></div>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    break;
+            }
+        }
+        
+        // 功能函数
+        function refreshData() {
+            alert('数据已刷新');
+        }
+        
+        function showSystemStatus() {
+            alert('所有服务运行正常');
+        }
+        
+        function addWeComBot() {
+            const botName = prompt('请输入Bot名称:');
+            if (botName) {
+                alert(`已添加Bot: ${botName}`);
+            }
+        }
+        
+        function managePairing() {
+            switchPage('openclaw-pairing');
+        }
+        
+        function openAdminer() {
+            window.open('http://localhost:18081', '_blank');
+        }
+        
+        function refreshPairing() {
+            alert('配对列表已刷新');
+        }
+        
+        function saveSystemConfig() {
+            alert('系统配置已保存');
+        }
+        
+        // 初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('WeCom Middleware管理界面已加载');
+        });
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 517b9b3..e0c0087 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,37 +1,209 @@
 <template>
-  <div class="app">
-    <h1>WeCom Middleware 管理界面</h1>
-    <p>企业微信与OpenClaw双向通信中间件</p>
-    <div class="status">
-      <p>后端状态: <span class="status-up">运行中</span></p>
-      <p>数据库: <span class="status-up">已连接</span></p>
-      <p>Redis: <span class="status-up">已连接</span></p>
-    </div>
+  <div id="app">
+    <el-container class="layout-container">
+      <!-- 侧边栏 -->
+      <el-aside width="200px" class="sidebar">
+        <div class="logo">
+          <h2>WeCom Middleware</h2>
+        </div>
+        <el-menu
+          :default-active="activeMenu"
+          class="el-menu-vertical"
+          router
+          @select="handleMenuSelect"
+        >
+          <el-menu-item index="/">
+            <el-icon><House /></el-icon>
+            <span>仪表盘</span>
+          </el-menu-item>
+          
+          <el-sub-menu index="wecom">
+            <template #title>
+              <el-icon><ChatDotRound /></el-icon>
+              <span>企业微信</span>
+            </template>
+            <el-menu-item index="/wecom/bots">Bot配置</el-menu-item>
+            <el-menu-item index="/wecom/messages">消息记录</el-menu-item>
+          </el-sub-menu>
+          
+          <el-sub-menu index="openclaw">
+            <template #title>
+              <el-icon><Connection /></el-icon>
+              <span>OpenClaw</span>
+            </template>
+            <el-menu-item index="/openclaw/pairing">配对管理</el-menu-item>
+            <el-menu-item index="/openclaw/rules">规则配置</el-menu-item>
+          </el-sub-menu>
+          
+          <el-sub-menu index="system">
+            <template #title>
+              <el-icon><Setting /></el-icon>
+              <span>系统管理</span>
+            </template>
+            <el-menu-item index="/system/config">系统配置</el-menu-item>
+            <el-menu-item index="/system/logs">操作日志</el-menu-item>
+          </el-sub-menu>
+        </el-menu>
+      </el-aside>
+
+      <!-- 主内容区 -->
+      <el-container>
+        <el-header class="header">
+          <div class="header-content">
+            <div class="header-left">
+              <h3>{{ pageTitle }}</h3>
+            </div>
+            <div class="header-right">
+              <el-button type="primary" @click="refreshData">
+                <el-icon><Refresh /></el-icon>
+                刷新
+              </el-button>
+              <el-button @click="showSystemStatus">
+                <el-icon><Monitor /></el-icon>
+                系统状态
+              </el-button>
+              <el-button @click="openAdminer">
+                <el-icon><DataLine /></el-icon>
+                数据库管理
+              </el-button>
+            </div>
+          </div>
+        </el-header>
+
+        <el-main class="main-content">
+          <router-view />
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
 
 <script setup lang="ts">
-// 简单的Vue组件
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  House,
+  ChatDotRound,
+  Connection,
+  Setting,
+  Refresh,
+  Monitor,
+  DataLine
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const route = useRoute()
+
+// 计算当前激活的菜单
+const activeMenu = computed(() => route.path)
+
+// 计算页面标题
+const pageTitle = computed(() => {
+  const routeMeta = route.meta as { title?: string }
+  return routeMeta?.title || '管理界面'
+})
+
+// 方法
+const handleMenuSelect = (index: string) => {
+  console.log('菜单选择:', index)
+}
+
+const refreshData = () => {
+  ElMessage.success('数据已刷新')
+}
+
+const showSystemStatus = () => {
+  ElMessage.info('所有服务运行正常')
+}
+
+const openAdminer = () => {
+  window.open('http://localhost:18081', '_blank')
+}
 </script>
 
-<style>
-.app {
-  font-family: Arial, sans-serif;
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
+<style scoped>
+#app {
+  height: 100vh;
+  overflow: hidden;
 }
-h1 {
+
+.layout-container {
+  height: 100%;
+}
+
+.sidebar {
+  background: #2c3e50;
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  background: #1a252f;
+}
+
+.logo h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.el-menu-vertical {
+  height: calc(100vh - 60px);
+  border-right: none;
+  background: #2c3e50;
+}
+
+.el-menu-vertical :deep(.el-menu-item),
+.el-menu-vertical :deep(.el-sub-menu__title) {
+  color: #bdc3c7;
+}
+
+.el-menu-vertical :deep(.el-menu-item:hover),
+.el-menu-vertical :deep(.el-sub-menu__title:hover) {
+  background: #34495e;
+  color: white;
+}
+
+.el-menu-vertical :deep(.el-menu-item.is-active) {
+  background: #409EFF;
+  color: white;
+}
+
+.el-menu-vertical :deep(.el-icon) {
+  color: inherit;
+}
+
+.header {
+  background: white;
+  border-bottom: 1px solid #e6e6e6;
+  padding: 0 20px;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+}
+
+.header-left h3 {
+  margin: 0;
   color: #333;
+  font-size: 18px;
+  font-weight: 500;
 }
-.status {
-  margin-top: 20px;
-  padding: 15px;
-  background: #f5f5f5;
-  border-radius: 5px;
+
+.header-right {
+  display: flex;
+  gap: 10px;
 }
-.status-up {
-  color: green;
-  font-weight: bold;
+
+.main-content {
+  padding: 20px;
+  background: #f5f7fa;
+  overflow-y: auto;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 01433bc..3eb9057 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,27 @@
 import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
+import router from './router'
+import { createPinia } from 'pinia'
 
-createApp(App).mount('#app')
+// 创建Vue应用
+const app = createApp(App)
+
+// 注册Element Plus
+app.use(ElementPlus)
+
+// 注册路由
+app.use(router)
+
+// 注册状态管理
+app.use(createPinia())
+
+// 注册所有图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+// 挂载应用
+app.mount('#app')
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
new file mode 100644
index 0000000..c996039
--- /dev/null
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,61 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Dashboard',
+    component: () => import('@/views/Dashboard.vue'),
+    meta: { title: '仪表盘' }
+  },
+  {
+    path: '/wecom/bots',
+    name: 'WeComBots',
+    component: () => import('@/views/wecom/Bots.vue'),
+    meta: { title: '企业微信Bot管理' }
+  },
+  {
+    path: '/wecom/messages',
+    name: 'WeComMessages',
+    component: () => import('@/views/wecom/Messages.vue'),
+    meta: { title: '消息记录' }
+  },
+  {
+    path: '/openclaw/pairing',
+    name: 'OpenClawPairing',
+    component: () => import('@/views/openclaw/Pairing.vue'),
+    meta: { title: 'OpenClaw配对管理' }
+  },
+  {
+    path: '/openclaw/rules',
+    name: 'OpenClawRules',
+    component: () => import('@/views/openclaw/Rules.vue'),
+    meta: { title: '配对规则配置' }
+  },
+  {
+    path: '/system/config',
+    name: 'SystemConfig',
+    component: () => import('@/views/system/Config.vue'),
+    meta: { title: '系统配置' }
+  },
+  {
+    path: '/system/logs',
+    name: 'SystemLogs',
+    component: () => import('@/views/system/Logs.vue'),
+    meta: { title: '操作日志' }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 路由守卫 - 设置页面标题
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = `${to.meta.title} - WeCom Middleware`
+  }
+  next()
+})
+
+export default router
\ No newline at end of file
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
new file mode 100644
index 0000000..1ea02d1
--- /dev/null
+++ b/frontend/src/views/Dashboard.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="dashboard">
+    <!-- 统计卡片 -->
+    <el-row :gutter="20" class="stats-row">
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: #409EFF;">
+              <el-icon><ChatDotRound /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-value">{{ stats.wecomBots }}</div>
+              <div class="stat-label">企业微信Bot</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: #67C23A;">
+              <el-icon><Connection /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-value">{{ stats.openclawNodes }}</div>
+              <div class="stat-label">OpenClaw节点</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: #E6A23C;">
+              <el-icon><Message /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-value">{{ stats.todayMessages }}</div>
+              <div class="stat-label">今日消息</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: #F56C6C;">
+              <el-icon><Warning /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-value">{{ stats.pendingRequests }}</div>
+              <div class="stat-label">待处理</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 服务状态 -->
+    <el-row :gutter="20" class="service-row">
+      <el-col :span="12">
+        <el-card>
+          <template #header>
+            <span>服务状态</span>
+          </template>
+          <div class="service-status">
+            <div v-for="service in services" :key="service.name" class="service-item">
+              <div class="service-name">{{ service.name }}</div>
+              <div class="service-info">
+                <el-tag :type="service.status === '运行中' ? 'success' : 'danger'">
+                  {{ service.status }}
+                </el-tag>
+                <span class="service-port">{{ service.port }}</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <el-col :span="12">
+        <el-card>
+          <template #header>
+            <span>快速操作</span>
+          </template>
+          <div class="quick-actions">
+            <el-button type="primary" @click="addWeComBot">
+              <el-icon><Plus /></el-icon>
+              添加企业微信Bot
+            </el-button>
+            <el-button @click="managePairing">
+              <el-icon><Connection /></el-icon>
+              管理配对请求
+            </el-button>
+            <el-button @click="openAdminer">
+              <el-icon><DataLine /></el-icon>
+              数据库管理 (Adminer)
+            </el-button>
+            <el-button @click="showSystemConfig">
+              <el-icon><Setting /></el-icon>
+              系统配置
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 最近活动 -->
+    <el-row :gutter="20" class="activity-row">
+      <el-col :span="24">
+        <el-card>
+          <template #header>
+            <span>最近活动</span>
+          </template>
+          <el-timeline>
+            <el-timeline-item
+              v-for="(activity, index) in recentActivities"
+              :key="index"
+              :timestamp="activity.time"
+              :type="activity.type"
+            >
+              {{ activity.content }}
+            </el-timeline-item>
+          </el-timeline>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  ChatDotRound,
+  Connection,
+  Message,
+  Warning,
+  Plus,
+  DataLine,
+  Setting
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+
+// 统计数据
+const stats = ref({
+  wecomBots: 3,
+  openclawNodes: 5,
+  todayMessages: 128,
+  pendingRequests: 2
+})
+
+// 服务状态
+const services = ref([
+  { name: '后端API', status: '运行中', port: '18080' },
+  { name: '前端界面', status: '运行中', port: '13000' },
+  { name: 'MySQL数据库', status: '运行中', port: '13306' },
+  { name: 'Redis缓存', status: '运行中', port: '16379' },
+  { name: 'Adminer管理', status: '运行中', port: '18081' }
+])
+
+// 最近活动
+const recentActivities = ref([
+  { time: '2026-03-09 12:45', type: 'success', content: '系统启动完成' },
+  { time: '2026-03-09 12:30', type: 'info', content: '新增企业微信Bot: 客服Bot' },
+  { time: '2026-03-09 12:20', type: 'warning', content: 'OpenClaw配对请求: 开发节点' },
+  { time: '2026-03-09 12:15', type: 'success', content: '数据库连接正常' },
+  { time: '2026-03-09 12:00', type: 'info', content: '系统初始化完成' }
+])
+
+// 方法
+const addWeComBot = () => {
+  router.push('/wecom/bots')
+}
+
+const managePairing = () => {
+  router.push('/openclaw/pairing')
+}
+
+const openAdminer = () => {
+  window.open('http://localhost:18081', '_blank')
+}
+
+const showSystemConfig = () => {
+  router.push('/system/config')
+}
+</script>
+
+<style scoped>
+.dashboard {
+  height: 100%;
+}
+
+.stats-row {
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  height: 100%;
+}
+
+.stat-content {
+  display: flex;
+  align-items: center;
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+}
+
+.stat-icon .el-icon {
+  font-size: 24px;
+  color: white;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.service-row {
+  margin-bottom: 20px;
+}
+
+.service-status {
+  padding: 10px 0;
+}
+
+.service-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.service-item:last-child {
+  border-bottom: none;
+}
+
+.service-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.service-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.service-port {
+  color: #666;
+  font-size: 14px;
+}
+
+.quick-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.activity-row {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/openclaw/Pairing.vue b/frontend/src/views/openclaw/Pairing.vue
new file mode 100644
index 0000000..baeb8b4
--- /dev/null
+++ b/frontend/src/views/openclaw/Pairing.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="openclaw-pairing">
+    <div class="page-header">
+      <h3>OpenClaw配对管理</h3>
+      <div class="header-actions">
+        <el-button @click="refreshPairing">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button @click="showPairingRules">
+          <el-icon><Setting /></el-icon>
+          配对规则
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 配对请求列表 -->
+    <el-card>
+      <el-table :data="pairingRequests" style="width: 100%" v-loading="loading">
+        <el-table-column prop="nodeId" label="节点ID" width="200" />
+        <el-table-column prop="nodeName" label="节点名称" width="180" />
+        <el-table-column prop="nodeType" label="节点类型" width="120">
+          <template #default="scope">
+            <el-tag>{{ scope.row.nodeType }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">
+              {{ getStatusText(scope.row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="requestTime" label="请求时间" width="180" />
+        <el-table-column prop="resolveTime" label="处理时间" width="180" />
+        <el-table-column prop="resolver" label="处理人" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.status === 'pending'"
+              size="small"
+              type="success"
+              @click="approvePairing(scope.row)"
+            >
+              批准
+            </el-button>
+            <el-button
+              v-if="scope.row.status === 'pending'"
+              size="small"
+              type="danger"
+              @click="rejectPairing(scope.row)"
+            >
+              拒绝
+            </el-button>
+            <el-button
+              v-if="scope.row.status === 'approved'"
+              size="small"
+              type="warning"
+              @click="disconnectPairing(scope.row)"
+            >
+              断开
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 配对详情对话框 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="配对请求详情"
+      width="600px"
+    >
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="节点ID">{{ currentPairing?.nodeId }}</el-descriptions-item>
+        <el-descriptions-item label="节点名称">{{ currentPairing?.nodeName }}</el-descriptions-item>
+        <el-descriptions-item label="节点类型">{{ currentPairing?.nodeType }}</el-descriptions-item>
+        <el-descriptions-item label="节点IP">{{ currentPairing?.nodeIp }}</el-descriptions-item>
+        <el-descriptions-item label="节点版本">{{ currentPairing?.nodeVersion }}</el-descriptions-item>
+        <el-descriptions-item label="请求时间">{{ currentPairing?.requestTime }}</el-descriptions-item>
+        <el-descriptions-item label="状态" :span="2">
+          <el-tag :type="getStatusType(currentPairing?.status || '')">
+            {{ getStatusText(currentPairing?.status || '') }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ currentPairing?.remark || '无' }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 批准/拒绝对话框 -->
+    <el-dialog
+      v-model="actionDialogVisible"
+      :title="actionTitle"
+      width="500px"
+    >
+      <el-form
+        ref="actionFormRef"
+        :model="actionForm"
+        :rules="actionRules"
+        label-width="100px"
+      >
+        <el-form-item label="处理备注" prop="remark">
+          <el-input
+            v-model="actionForm.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入处理备注（可选）"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="actionDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitAction">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Refresh, Setting } from '@element-plus/icons-vue'
+
+interface PairingRequest {
+  id: number
+  nodeId: string
+  nodeName: string
+  nodeType: string
+  nodeIp: string
+  nodeVersion: string
+  status: string
+  requestTime: string
+  resolveTime?: string
+  resolver?: string
+  remark?: string
+}
+
+// 响应式数据
+const loading = ref(false)
+const detailDialogVisible = ref(false)
+const actionDialogVisible = ref(false)
+const actionTitle = ref('')
+const actionFormRef = ref<FormInstance>()
+const router = useRouter()
+
+// 当前操作的配对请求
+const currentPairing = ref<PairingRequest | null>(null)
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 操作表单
+const actionForm = reactive({
+  remark: ''
+})
+
+// 表单验证规则
+const actionRules: FormRules = {
+  remark: [
+    { max: 200, message: '备注不能超过200个字符', trigger: 'blur' }
+  ]
+}
+
+// 配对请求数据
+const pairingRequests = ref<PairingRequest[]>([
+  {
+    id: 1,
+    nodeId: 'node_001',
+    nodeName: '开发节点',
+    nodeType: 'development',
+    nodeIp: '192.168.1.100',
+    nodeVersion: 'v1.0.0',
+    status: 'pending',
+    requestTime: '2026-03-09 12:20',
+    remark: '开发环境测试节点'
+  },
+  {
+    id: 2,
+    nodeId: 'node_002',
+    nodeName: '测试节点',
+    nodeType: 'testing',
+    nodeIp: '192.168.1.101',
+    nodeVersion: 'v1.0.0',
+    status: 'approved',
+    requestTime: '2026-03-09 11:45',
+    resolveTime: '2026-03-09 11:50',
+    resolver: 'admin',
+    remark: '测试环境节点'
+  },
+  {
+    id: 3,
+    nodeId: 'node_003',
+    nodeName: '生产节点',
+    nodeType: 'production',
+    nodeIp: '192.168.1.102',
+    nodeVersion: 'v1.0.0',
+    status: 'rejected',
+    requestTime: '2026-03-09 10:30',
+    resolveTime: '2026-03-09 10:35',
+    resolver: 'admin',
+    remark: '生产环境节点，未授权'
+  }
+])
+
+// 生命周期
+onMounted(() => {
+  loadPairingRequests()
+})
+
+// 方法
+const loadPairingRequests = () => {
+  loading.value = true
+  // 模拟API调用
+  setTimeout(() => {
+    pagination.total = pairingRequests.value.length
+    loading.value = false
+  }, 500)
+}
+
+const getStatusType = (status: string) => {
+  const types: Record<string, string> = {
+    'pending': 'warning',
+    'approved': 'success',
+    'rejected': 'danger',
+    'disconnected': 'info'
+  }
+  return types[status] || 'info'
+}
+
+const getStatusText = (status: string) => {
+  const texts: Record<string, string> = {
+    'pending': '待处理',
+    'approved': '已批准',
+    'rejected': '已拒绝',
+    'disconnected': '已断开'
+  }
+  return texts[status] || status
+}
+
+const showPairingDetail = (pairing: PairingRequest) => {
+  currentPairing.value = pairing
+  detailDialogVisible.value = true
+}
+
+const approvePairing = (pairing: PairingRequest) => {
+  currentPairing.value = pairing
+  actionTitle.value = '批准配对请求'
+  actionForm.remark = ''
+  actionDialogVisible.value = true
+}
+
+const rejectPairing = (pairing: PairingRequest) => {
+  currentPairing.value = pairing
+  actionTitle.value = '拒绝配对请求'
+  actionForm.remark = ''
+  actionDialogVisible.value = true
+}
+
+const disconnectPairing = (pairing: PairingRequest) => {
+  ElMessageBox.confirm(`确定要断开与节点 "${pairing.nodeName}" 的配对吗？`, '确认断开', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    pairing.status = 'disconnected'
+    pairing.resolveTime = new Date().toLocaleString()
+    pairing.resolver = 'admin'
+    ElMessage.success('配对已断开')
+    loadPairingRequests()
+  })
+}
+
+const refreshPairing = () => {
+  loadPairingRequests()
+  ElMessage.success('数据已刷新')
+}
+
+const showPairingRules = () => {
+  router.push('/openclaw/rules')
+}
+
+const submitAction = async () => {
+  if (!actionFormRef.value || !currentPairing.value) return
+  
+  try {
+    await actionFormRef.value.validate()
+    
+    const pairing = currentPairing.value
+    const isApprove = actionTitle.value === '批准配对请求'
+    
+    pairing.status = isApprove ? 'approved' : 'rejected'
+    pairing.resolveTime = new Date().toLocaleString()
+    pairing.resolver = 'admin'
+    pairing.remark = actionForm.remark || pairing.remark
+    
+    ElMessage.success(isApprove ? '配对请求已批准' : '配对请求已拒绝')
+    actionDialogVisible.value = false
+    loadPairingRequests()
+  } catch (error) {
+    console.error('表单验证失败:', error)
+  }
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  loadPairingRequests()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  loadPairingRequests()
+}
+</script>
+
+<style scoped>
+.openclaw-pairing {
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-table :deep(.el-table__row) {
+  cursor: pointer;
+}
+
+.el-table :deep(.el-table__row:hover) {
+  background-color: #f5f7fa;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/openclaw/Rules.vue b/frontend/src/views/openclaw/Rules.vue
new file mode 100644
index 0000000..5c03867
--- /dev/null
+++ b/frontend/src/views/openclaw/Rules.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="openclaw-rules">
+    <div class="page-header">
+      <h3>配对规则配置</h3>
+      <div class="header-actions">
+        <el-button type="primary" @click="addRule">
+          <el-icon><Plus /></el-icon>
+          添加规则
+        </el-button>
+        <el-button @click="refreshRules">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 规则列表 -->
+    <el-card>
+      <el-table :data="rules" style="width: 100%" v-loading="loading">
+        <el-table-column prop="name" label="规则名称" width="180" />
+        <el-table-column prop="priority" label="优先级" width="100">
+          <template #default="scope">
+            <el-tag>{{ scope.row.priority }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="conditionType" label="条件类型" width="120">
+          <template #default="scope">
+            {{ getConditionTypeText(scope.row.conditionType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="conditionValue" label="条件值" width="200" />
+        <el-table-column prop="action" label="执行动作" width="120">
+          <template #default="scope">
+            <el-tag :type="scope.row.action === 'approve' ? 'success' : 'danger'">
+              {{ scope.row.action === 'approve' ? '自动批准' : '自动拒绝' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="enabled" label="状态" width="100">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.enabled"
+              @change="toggleRuleStatus(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="描述" min-width="200" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button size="small" @click="editRule(scope.row)">编辑</el-button>
+            <el-button
+              size="small"
+              type="danger"
+              @click="deleteRule(scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 添加/编辑规则对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="600px"
+      @close="resetForm"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="规则名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入规则名称" />
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-input-number
+            v-model="form.priority"
+            :min="1"
+            :max="100"
+            placeholder="请输入优先级"
+          />
+          <span class="form-tip">数字越小优先级越高</span>
+        </el-form-item>
+        <el-form-item label="条件类型" prop="conditionType">
+          <el-select v-model="form.conditionType" placeholder="请选择条件类型">
+            <el-option label="IP地址" value="ip" />
+            <el-option label="主机名" value="hostname" />
+            <el-option label="节点类型" value="node_type" />
+            <el-option label="自定义规则" value="custom" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="条件值" prop="conditionValue">
+          <el-input
+            v-model="form.conditionValue"
+            placeholder="请输入条件值"
+          />
+          <span class="form-tip">
+            IP地址示例: 192.168.1.*<br>
+            主机名示例: *.example.com<br>
+            节点类型: development/testing/production
+          </span>
+        </el-form-item>
+        <el-form-item label="执行动作" prop="action">
+          <el-radio-group v-model="form.action">
+            <el-radio label="approve">自动批准</el-radio>
+            <el-radio label="reject">自动拒绝</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="启用状态" prop="enabled">
+          <el-switch v-model="form.enabled" />
+        </el-form-item>
+        <el-form-item label="规则描述" prop="description">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入规则描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Plus, Refresh } from '@element-plus/icons-vue'
+
+interface Rule {
+  id: number
+  name: string
+  priority: number
+  conditionType: string
+  conditionValue: string
+  action: string
+  enabled: boolean
+  description: string
+}
+
+// 响应式数据
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('添加规则')
+const formRef = ref<FormInstance>()
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 表单数据
+const form = reactive({
+  id: 0,
+  name: '',
+  priority: 10,
+  conditionType: 'ip',
+  conditionValue: '',
+  action: 'approve',
+  enabled: true,
+  description: ''
+})
+
+// 表单验证规则
+const rules: FormRules = {
+  name: [
+    { required: true, message: '请输入规则名称', trigger: 'blur' }
+  ],
+  priority: [
+    { required: true, message: '请输入优先级', trigger: 'blur' }
+  ],
+  conditionType: [
+    { required: true, message: '请选择条件类型', trigger: 'change' }
+  ],
+  conditionValue: [
+    { required: true, message: '请输入条件值', trigger: 'blur' }
+  ],
+  action: [
+    { required: true, message: '请选择执行动作', trigger: 'change' }
+  ]
+}
+
+// 规则数据
+const rulesData = ref<Rule[]>([
+  {
+    id: 1,
+    name: '开发环境自动批准',
+    priority: 1,
+    conditionType: 'node_type',
+    conditionValue: 'development',
+    action: 'approve',
+    enabled: true,
+    description: '开发环境节点自动批准配对'
+  },
+  {
+    id: 2,
+    name: '内部IP自动批准',
+    priority: 2,
+    conditionType: 'ip',
+    conditionValue: '192.168.1.*',
+    action: 'approve',
+    enabled: true,
+    description: '内部网络IP自动批准配对'
+  },
+  {
+    id: 3,
+    name: '测试环境自动批准',
+    priority: 3,
+    conditionType: 'node_type',
+    conditionValue: 'testing',
+    action: 'approve',
+    enabled: true,
+    description: '测试环境节点自动批准配对'
+  },
+  {
+    id: 4,
+    name: '未知节点自动拒绝',
+    priority: 100,
+    conditionType: 'custom',
+    conditionValue: 'unknown',
+    action: 'reject',
+    enabled: true,
+    description: '未知类型节点自动拒绝配对'
+  }
+])
+
+// 生命周期
+onMounted(() => {
+  loadRules()
+})
+
+// 方法
+const loadRules = () => {
+  loading.value = true
+  // 模拟API调用
+  setTimeout(() => {
+    pagination.total = rulesData.value.length
+    loading.value = false
+  }, 500)
+}
+
+const getConditionTypeText = (type: string) => {
+  const texts: Record<string, string> = {
+    'ip': 'IP地址',
+    'hostname': '主机名',
+    'node_type': '节点类型',
+    'custom': '自定义规则'
+  }
+  return texts[type] || type
+}
+
+const addRule = () => {
+  dialogTitle.value = '添加规则'
+  dialogVisible.value = true
+}
+
+const editRule = (rule: Rule) => {
+  dialogTitle.value = '编辑规则'
+  Object.assign(form, rule)
+  dialogVisible.value = true
+}
+
+const deleteRule = (rule: Rule) => {
+  ElMessageBox.confirm(`确定要删除规则 "${rule.name}" 吗？`, '确认删除', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    rulesData.value = rulesData.value.filter(r => r.id !== rule.id)
+    ElMessage.success('规则已删除')
+    loadRules()
+  })
+}
+
+const toggleRuleStatus = (rule: Rule) => {
+  ElMessage.success(`规则 "${rule.name}" 已${rule.enabled ? '启用' : '禁用'}`)
+}
+
+const refreshRules = () => {
+  loadRules()
+  ElMessage.success('规则列表已刷新')
+}
+
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+  form.id = 0
+  form.name = ''
+  form.priority = 10
+  form.conditionType = 'ip'
+  form.conditionValue = ''
+  form.action = 'approve'
+  form.enabled = true
+  form.description = ''
+}
+
+const submitForm = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    
+    if (form.id === 0) {
+      // 添加
+      const newRule: Rule = {
+        id: rulesData.value.length + 1,
+        name: form.name,
+        priority: form.priority,
+        conditionType: form.conditionType,
+        conditionValue: form.conditionValue,
+        action: form.action,
+        enabled: form.enabled,
+        description: form.description
+      }
+      rulesData.value.unshift(newRule)
+      ElMessage.success('规则添加成功')
+    } else {
+      // 编辑
+      const index = rulesData.value.findIndex(r => r.id === form.id)
+      if (index !== -1) {
+        rulesData.value[index] = {
+          ...rulesData.value[index],
+          name: form.name,
+          priority: form.priority,
+          conditionType: form.conditionType,
+          conditionValue: form.conditionValue,
+          action: form.action,
+          enabled: form.enabled,
+          description: form.description
+        }
+        ElMessage.success('规则更新成功')
+      }
+    }
+    
+    dialogVisible.value = false
+    loadRules()
+  } catch (error) {
+    console.error('表单验证失败:', error)
+  }
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  loadRules()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  loadRules()
+}
+</script>
+
+<style scoped>
+.openclaw-rules {
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.form-tip {
+  margin-left: 10px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/Config.vue b/frontend/src/views/system/Config.vue
new file mode 100644
index 0000000..0bd7d64
--- /dev/null
+++ b/frontend/src/views/system/Config.vue
@@ -0,0 +1,397 @@
+<template>
+  <div class="system-config">
+    <div class="page-header">
+      <h3>系统配置</h3>
+      <div class="header-actions">
+        <el-button type="primary" @click="saveConfig">
+          <el-icon><Check /></el-icon>
+          保存配置
+        </el-button>
+        <el-button @click="resetConfig">
+          <el-icon><Refresh /></el-icon>
+          重置
+        </el-button>
+      </div>
+    </div>
+
+    <el-tabs v-model="activeTab" class="config-tabs">
+      <!-- 基本配置 -->
+      <el-tab-pane label="基本配置" name="basic">
+        <el-card>
+          <el-form
+            ref="basicFormRef"
+            :model="basicConfig"
+            :rules="basicRules"
+            label-width="120px"
+          >
+            <el-form-item label="系统名称" prop="systemName">
+              <el-input v-model="basicConfig.systemName" placeholder="请输入系统名称" />
+            </el-form-item>
+            <el-form-item label="系统描述" prop="description">
+              <el-input
+                v-model="basicConfig.description"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入系统描述"
+              />
+            </el-form-item>
+            <el-form-item label="日志级别" prop="logLevel">
+              <el-select v-model="basicConfig.logLevel" placeholder="请选择日志级别">
+                <el-option label="DEBUG" value="debug" />
+                <el-option label="INFO" value="info" />
+                <el-option label="WARN" value="warn" />
+                <el-option label="ERROR" value="error" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="API密钥" prop="apiKey">
+              <el-input
+                v-model="basicConfig.apiKey"
+                type="password"
+                show-password
+                placeholder="请输入API密钥"
+              />
+            </el-form-item>
+            <el-form-item label="启用调试模式" prop="debugMode">
+              <el-switch v-model="basicConfig.debugMode" />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 数据库配置 -->
+      <el-tab-pane label="数据库配置" name="database">
+        <el-card>
+          <el-form
+            ref="dbFormRef"
+            :model="dbConfig"
+            :rules="dbRules"
+            label-width="120px"
+          >
+            <el-form-item label="数据库类型" prop="type">
+              <el-select v-model="dbConfig.type" placeholder="请选择数据库类型">
+                <el-option label="MySQL" value="mysql" />
+                <el-option label="PostgreSQL" value="postgresql" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="主机地址" prop="host">
+              <el-input v-model="dbConfig.host" placeholder="请输入主机地址" />
+            </el-form-item>
+            <el-form-item label="端口" prop="port">
+              <el-input v-model="dbConfig.port" placeholder="请输入端口" />
+            </el-form-item>
+            <el-form-item label="数据库名" prop="database">
+              <el-input v-model="dbConfig.database" placeholder="请输入数据库名" />
+            </el-form-item>
+            <el-form-item label="用户名" prop="username">
+              <el-input v-model="dbConfig.username" placeholder="请输入用户名" />
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input
+                v-model="dbConfig.password"
+                type="password"
+                show-password
+                placeholder="请输入密码"
+              />
+            </el-form-item>
+            <el-form-item label="连接池大小" prop="poolSize">
+              <el-input-number v-model="dbConfig.poolSize" :min="1" :max="100" />
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- Redis配置 -->
+      <el-tab-pane label="Redis配置" name="redis">
+        <el-card>
+          <el-form
+            ref="redisFormRef"
+            :model="redisConfig"
+            :rules="redisRules"
+            label-width="120px"
+          >
+            <el-form-item label="主机地址" prop="host">
+              <el-input v-model="redisConfig.host" placeholder="请输入主机地址" />
+            </el-form-item>
+            <el-form-item label="端口" prop="port">
+              <el-input v-model="redisConfig.port" placeholder="请输入端口" />
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input
+                v-model="redisConfig.password"
+                type="password"
+                show-password
+                placeholder="请输入密码"
+              />
+            </el-form-item>
+            <el-form-item label="数据库索引" prop="dbIndex">
+              <el-input-number v-model="redisConfig.dbIndex" :min="0" :max="15" />
+            </el-form-item>
+            <el-form-item label="连接超时" prop="timeout">
+              <el-input v-model="redisConfig.timeout" placeholder="单位：毫秒" />
+              <span class="form-tip">连接超时时间（毫秒）</span>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 连接信息 -->
+      <el-tab-pane label="连接信息" name="connection">
+        <el-card>
+          <el-descriptions title="服务连接信息" :column="2" border>
+            <el-descriptions-item label="后端API">
+              <el-tag type="success">http://localhost:18080</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="前端界面">
+              <el-tag type="success">http://localhost:13000</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="MySQL数据库">
+              <el-tag type="success">localhost:13306</el-tag>
+              <div class="connection-detail">
+                <span>用户: wecom</span>
+                <span>数据库: wecom_middleware</span>
+              </div>
+            </el-descriptions-item>
+            <el-descriptions-item label="Redis缓存">
+              <el-tag type="success">localhost:16379</el-tag>
+              <div class="connection-detail">
+                <span>密码: redis123456</span>
+              </div>
+            </el-descriptions-item>
+            <el-descriptions-item label="Adminer管理" :span="2">
+              <el-link type="primary" href="http://localhost:18081" target="_blank">
+                http://localhost:18081
+              </el-link>
+              <div class="connection-detail">
+                <span>数据库管理工具</span>
+              </div>
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <div class="test-connection">
+            <h4>连接测试</h4>
+            <div class="test-buttons">
+              <el-button @click="testDatabaseConnection">
+                <el-icon><Connection /></el-icon>
+                测试数据库连接
+              </el-button>
+              <el-button @click="testRedisConnection">
+                <el-icon><Connection /></el-icon>
+                测试Redis连接
+              </el-button>
+              <el-button @click="testBackendConnection">
+                <el-icon><Connection /></el-icon>
+                测试后端API
+              </el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { Check, Refresh, Connection } from '@element-plus/icons-vue'
+
+// 响应式数据
+const activeTab = ref('basic')
+const basicFormRef = ref<FormInstance>()
+const dbFormRef = ref<FormInstance>()
+const redisFormRef = ref<FormInstance>()
+
+// 基本配置
+const basicConfig = reactive({
+  systemName: 'WeCom Middleware',
+  description: '企业微信与OpenClaw双向通信中间件',
+  logLevel: 'info',
+  apiKey: '********',
+  debugMode: false
+})
+
+// 数据库配置
+const dbConfig = reactive({
+  type: 'mysql',
+  host: 'localhost',
+  port: '13306',
+  database: 'wecom_middleware',
+  username: 'wecom',
+  password: 'wecom123456',
+  poolSize: 10
+})
+
+// Redis配置
+const redisConfig = reactive({
+  host: 'localhost',
+  port: '16379',
+  password: 'redis123456',
+  dbIndex: 0,
+  timeout: '5000'
+})
+
+// 验证规则
+const basicRules: FormRules = {
+  systemName: [
+    { required: true, message: '请输入系统名称', trigger: 'blur' }
+  ],
+  logLevel: [
+    { required: true, message: '请选择日志级别', trigger: 'change' }
+  ]
+}
+
+const dbRules: FormRules = {
+  host: [
+    { required: true, message: '请输入主机地址', trigger: 'blur' }
+  ],
+  port: [
+    { required: true, message: '请输入端口', trigger: 'blur' },
+    { pattern: /^\d+$/, message: '端口必须是数字', trigger: 'blur' }
+  ],
+  database: [
+    { required: true, message: '请输入数据库名', trigger: 'blur' }
+  ],
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ]
+}
+
+const redisRules: FormRules = {
+  host: [
+    { required: true, message: '请输入主机地址', trigger: 'blur' }
+  ],
+  port: [
+    { required: true, message: '请输入端口', trigger: 'blur' },
+    { pattern: /^\d+$/, message: '端口必须是数字', trigger: 'blur' }
+  ]
+}
+
+// 方法
+const saveConfig = async () => {
+  try {
+    // 根据当前标签页验证对应的表单
+    let isValid = true
+    if (activeTab.value === 'basic' && basicFormRef.value) {
+      await basicFormRef.value.validate()
+    } else if (activeTab.value === 'database' && dbFormRef.value) {
+      await dbFormRef.value.validate()
+    } else if (activeTab.value === 'redis' && redisFormRef.value) {
+      await redisFormRef.value.validate()
+    }
+    
+    if (isValid) {
+      ElMessage.success('配置保存成功')
+    }
+  } catch (error) {
+    console.error('配置保存失败:', error)
+    ElMessage.error('配置保存失败，请检查表单')
+  }
+}
+
+const resetConfig = () => {
+  if (activeTab.value === 'basic') {
+    basicConfig.systemName = 'WeCom Middleware'
+    basicConfig.description = '企业微信与OpenClaw双向通信中间件'
+    basicConfig.logLevel = 'info'
+    basicConfig.apiKey = '********'
+    basicConfig.debugMode = false
+  } else if (activeTab.value === 'database') {
+    dbConfig.type = 'mysql'
+    dbConfig.host = 'localhost'
+    dbConfig.port = '13306'
+    dbConfig.database = 'wecom_middleware'
+    dbConfig.username = 'wecom'
+    dbConfig.password = 'wecom123456'
+    dbConfig.poolSize = 10
+  } else if (activeTab.value === 'redis') {
+    redisConfig.host = 'localhost'
+    redisConfig.port = '16379'
+    redisConfig.password = 'redis123456'
+    redisConfig.dbIndex = 0
+    redisConfig.timeout = '5000'
+  }
+  
+  ElMessage.info('配置已重置')
+}
+
+const testDatabaseConnection = () => {
+  ElMessage.success('数据库连接测试成功')
+}
+
+const testRedisConnection = () => {
+  ElMessage.success('Redis连接测试成功')
+}
+
+const testBackendConnection = () => {
+  ElMessage.success('后端API连接测试成功')
+}
+</script>
+
+<style scoped>
+.system-config {
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.config-tabs {
+  height: calc(100% - 60px);
+}
+
+.config-tabs :deep(.el-tabs__content) {
+  height: calc(100% - 55px);
+  overflow-y: auto;
+}
+
+.config-tabs :deep(.el-tab-pane) {
+  height: 100%;
+}
+
+.form-tip {
+  margin-left: 10px;
+  color: #909399;
+  font-size: 12px;
+}
+
+.connection-detail {
+  margin-top: 5px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.connection-detail span {
+  margin-right: 10px;
+}
+
+.test-connection {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #e8e8e8;
+}
+
+.test-connection h4 {
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+
+.test-buttons {
+  display: flex;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/Logs.vue b/frontend/src/views/system/Logs.vue
new file mode 100644
index 0000000..4ac951b
--- /dev/null
+++ b/frontend/src/views/system/Logs.vue
@@ -0,0 +1,440 @@
+<template>
+  <div class="system-logs">
+    <div class="page-header">
+      <h3>操作日志</h3>
+      <div class="header-actions">
+        <el-button @click="refreshLogs">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button @click="clearLogs">
+          <el-icon><Delete /></el-icon>
+          清空日志
+        </el-button>
+        <el-button @click="exportLogs">
+          <el-icon><Download /></el-icon>
+          导出日志
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 筛选条件 -->
+    <el-card class="filter-card">
+      <el-form :inline="true" :model="filterForm">
+        <el-form-item label="日志级别">
+          <el-select v-model="filterForm.level" placeholder="请选择日志级别" clearable>
+            <el-option label="DEBUG" value="debug" />
+            <el-option label="INFO" value="info" />
+            <el-option label="WARN" value="warn" />
+            <el-option label="ERROR" value="error" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作模块">
+          <el-select v-model="filterForm.module" placeholder="请选择操作模块" clearable>
+            <el-option label="系统管理" value="system" />
+            <el-option label="企业微信" value="wecom" />
+            <el-option label="OpenClaw" value="openclaw" />
+            <el-option label="用户管理" value="user" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作人">
+          <el-input
+            v-model="filterForm.operator"
+            placeholder="请输入操作人"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchLogs">搜索</el-button>
+          <el-button @click="resetFilter">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 日志列表 -->
+    <el-card>
+      <el-table :data="logs" style="width: 100%" v-loading="loading">
+        <el-table-column prop="timestamp" label="时间" width="180" />
+        <el-table-column prop="level" label="级别" width="100">
+          <template #default="scope">
+            <el-tag :type="getLevelTagType(scope.row.level)" size="small">
+              {{ scope.row.level }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="module" label="模块" width="120">
+          <template #default="scope">
+            <el-tag type="info" size="small">
+              {{ getModuleText(scope.row.module) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="operator" label="操作人" width="120" />
+        <el-table-column prop="action" label="操作" width="180" />
+        <el-table-column prop="description" label="描述" min-width="200">
+          <template #default="scope">
+            <div class="log-description">
+              {{ scope.row.description }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ip" label="IP地址" width="150" />
+        <el-table-column label="详情" width="80">
+          <template #default="scope">
+            <el-button
+              size="small"
+              type="text"
+              @click="viewLogDetail(scope.row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 日志详情对话框 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="日志详情"
+      width="700px"
+    >
+      <el-descriptions :column="2" border v-if="currentLog">
+        <el-descriptions-item label="日志ID">{{ currentLog.id }}</el-descriptions-item>
+        <el-descriptions-item label="时间">{{ currentLog.timestamp }}</el-descriptions-item>
+        <el-descriptions-item label="级别">
+          <el-tag :type="getLevelTagType(currentLog.level)" size="small">
+            {{ currentLog.level }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="模块">
+          <el-tag type="info" size="small">
+            {{ getModuleText(currentLog.module) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="操作人">{{ currentLog.operator }}</el-descriptions-item>
+        <el-descriptions-item label="IP地址">{{ currentLog.ip }}</el-descriptions-item>
+        <el-descriptions-item label="操作">{{ currentLog.action }}</el-descriptions-item>
+        <el-descriptions-item label="用户代理">{{ currentLog.userAgent || 'N/A' }}</el-descriptions-item>
+        <el-descriptions-item label="描述" :span="2">
+          <div class="log-detail-description">
+            {{ currentLog.description }}
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="请求参数" :span="2" v-if="currentLog.requestParams">
+          <pre class="log-detail-params">{{ formatJson(currentLog.requestParams) }}</pre>
+        </el-descriptions-item>
+        <el-descriptions-item label="响应结果" :span="2" v-if="currentLog.responseResult">
+          <pre class="log-detail-result">{{ formatJson(currentLog.responseResult) }}</pre>
+        </el-descriptions-item>
+        <el-descriptions-item label="错误信息" :span="2" v-if="currentLog.error">
+          <div class="log-detail-error">
+            {{ currentLog.error }}
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh, Delete, Download } from '@element-plus/icons-vue'
+
+interface Log {
+  id: number
+  timestamp: string
+  level: string
+  module: string
+  operator: string
+  action: string
+  description: string
+  ip: string
+  userAgent?: string
+  requestParams?: string
+  responseResult?: string
+  error?: string
+}
+
+// 响应式数据
+const loading = ref(false)
+const detailDialogVisible = ref(false)
+const currentLog = ref<Log | null>(null)
+
+// 筛选表单
+const filterForm = reactive({
+  level: '',
+  module: '',
+  operator: '',
+  dateRange: []
+})
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 日志数据
+const logs = ref<Log[]>([
+  {
+    id: 1,
+    timestamp: '2026-03-09 12:45:30',
+    level: 'INFO',
+    module: 'system',
+    operator: 'admin',
+    action: '系统启动',
+    description: 'WeCom Middleware系统启动完成',
+    ip: '127.0.0.1',
+    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
+  },
+  {
+    id: 2,
+    timestamp: '2026-03-09 12:40:15',
+    level: 'INFO',
+    module: 'wecom',
+    operator: 'admin',
+    action: '添加Bot',
+    description: '添加企业微信Bot: 客服Bot',
+    ip: '127.0.0.1',
+    requestParams: '{"name":"客服Bot","botId":"bot_001"}',
+    responseResult: '{"success":true,"message":"Bot添加成功"}'
+  },
+  {
+    id: 3,
+    timestamp: '2026-03-09 12:35:20',
+    level: 'INFO',
+    module: 'openclaw',
+    operator: 'admin',
+    action: '批准配对',
+    description: '批准OpenClaw节点配对: 开发节点',
+    ip: '127.0.0.1',
+    requestParams: '{"nodeId":"node_001","action":"approve"}',
+    responseResult: '{"success":true,"message":"配对请求已批准"}'
+  },
+  {
+    id: 4,
+    timestamp: '2026-03-09 12:30:10',
+    level: 'WARN',
+    module: 'system',
+    operator: 'system',
+    action: '数据库连接',
+    description: '数据库连接池使用率超过80%',
+    ip: '127.0.0.1'
+  },
+  {
+    id: 5,
+    timestamp: '2026-03-09 12:25:05',
+    level: 'ERROR',
+    module: 'wecom',
+    operator: 'system',
+    action: '消息发送',
+    description: '企业微信消息发送失败',
+    ip: '127.0.0.1',
+    error: '网络连接超时，请检查网络配置'
+  },
+  {
+    id: 6,
+    timestamp: '2026-03-09 12:20:00',
+    level: 'DEBUG',
+    module: 'openclaw',
+    operator: 'system',
+    action: '心跳检测',
+    description: 'OpenClaw节点心跳检测正常',
+    ip: '127.0.0.1'
+  }
+])
+
+// 生命周期
+onMounted(() => {
+  loadLogs()
+})
+
+// 方法
+const loadLogs = () => {
+  loading.value = true
+  // 模拟API调用
+  setTimeout(() => {
+    pagination.total = logs.value.length
+    loading.value = false
+  }, 500)
+}
+
+const searchLogs = () => {
+  pagination.current = 1
+  loadLogs()
+}
+
+const resetFilter = () => {
+  filterForm.level = ''
+  filterForm.module = ''
+  filterForm.operator = ''
+  filterForm.dateRange = []
+  searchLogs()
+}
+
+const refreshLogs = () => {
+  loadLogs()
+  ElMessage.success('日志列表已刷新')
+}
+
+const clearLogs = () => {
+  ElMessageBox.confirm('确定要清空所有日志吗？此操作不可恢复。', '确认清空', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    logs.value = []
+    pagination.total = 0
+    ElMessage.success('日志已清空')
+  })
+}
+
+const exportLogs = () => {
+  ElMessage.info('导出功能开发中')
+}
+
+const getLevelTagType = (level: string) => {
+  const types: Record<string, string> = {
+    'DEBUG': '',
+    'INFO': 'success',
+    'WARN': 'warning',
+    'ERROR': 'danger'
+  }
+  return types[level] || ''
+}
+
+const getModuleText = (module: string) => {
+  const texts: Record<string, string> = {
+    'system': '系统管理',
+    'wecom': '企业微信',
+    'openclaw': 'OpenClaw',
+    'user': '用户管理'
+  }
+  return texts[module] || module
+}
+
+const viewLogDetail = (log: Log) => {
+  currentLog.value = log
+  detailDialogVisible.value = true
+}
+
+const formatJson = (jsonString: string) => {
+  try {
+    const obj = JSON.parse(jsonString)
+    return JSON.stringify(obj, null, 2)
+  } catch {
+    return jsonString
+  }
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  loadLogs()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  loadLogs()
+}
+</script>
+
+<style scoped>
+.system-logs {
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-card {
+  margin-bottom: 20px;
+}
+
+.log-description {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-detail-description {
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-detail-params,
+.log-detail-result {
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-detail-error {
+  padding: 10px;
+  background: #fef0f0;
+  color: #f56c6c;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/wecom/Bots.vue b/frontend/src/views/wecom/Bots.vue
new file mode 100644
index 0000000..7a90c04
--- /dev/null
+++ b/frontend/src/views/wecom/Bots.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="wecom-bots">
+    <div class="page-header">
+      <h3>企业微信Bot配置</h3>
+      <div class="header-actions">
+        <el-button type="primary" @click="addBot">
+          <el-icon><Plus /></el-icon>
+          添加Bot
+        </el-button>
+        <el-button @click="refreshBots">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <el-card class="filter-card">
+      <el-form :inline="true" :model="filterForm">
+        <el-form-item label="Bot名称">
+          <el-input
+            v-model="filterForm.name"
+            placeholder="请输入Bot名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
+            <el-option label="在线" value="online" />
+            <el-option label="离线" value="offline" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchBots">搜索</el-button>
+          <el-button @click="resetFilter">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- Bot列表 -->
+    <el-card>
+      <el-table :data="bots" style="width: 100%" v-loading="loading">
+        <el-table-column prop="name" label="Bot名称" width="180" />
+        <el-table-column prop="botId" label="Bot ID" width="200" />
+        <el-table-column prop="secret" label="Secret" width="250">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.secret"
+              type="password"
+              show-password
+              readonly
+              size="small"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'online' ? 'success' : 'danger'">
+              {{ scope.row.status === 'online' ? '在线' : '离线' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lastActive" label="最后活跃" width="180" />
+        <el-table-column prop="createdAt" label="创建时间" width="180" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button size="small" @click="editBot(scope.row)">编辑</el-button>
+            <el-button
+              size="small"
+              type="danger"
+              @click="deleteBot(scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+      @close="resetForm"
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="Bot名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入Bot名称" />
+        </el-form-item>
+        <el-form-item label="Bot ID" prop="botId">
+          <el-input v-model="form.botId" placeholder="请输入Bot ID" />
+        </el-form-item>
+        <el-form-item label="Secret" prop="secret">
+          <el-input
+            v-model="form.secret"
+            type="password"
+            show-password
+            placeholder="请输入Secret"
+          />
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入Bot描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Plus, Refresh } from '@element-plus/icons-vue'
+
+interface Bot {
+  id: number
+  name: string
+  botId: string
+  secret: string
+  status: string
+  lastActive: string
+  createdAt: string
+  description?: string
+}
+
+// 响应式数据
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('添加Bot')
+const formRef = ref<FormInstance>()
+
+// 筛选表单
+const filterForm = reactive({
+  name: '',
+  status: ''
+})
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 表单数据
+const form = reactive({
+  id: 0,
+  name: '',
+  botId: '',
+  secret: '',
+  description: ''
+})
+
+// 表单验证规则
+const rules: FormRules = {
+  name: [
+    { required: true, message: '请输入Bot名称', trigger: 'blur' },
+    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+  ],
+  botId: [
+    { required: true, message: '请输入Bot ID', trigger: 'blur' }
+  ],
+  secret: [
+    { required: true, message: '请输入Secret', trigger: 'blur' }
+  ]
+}
+
+// Bot列表数据
+const bots = ref<Bot[]>([
+  {
+    id: 1,
+    name: '客服Bot',
+    botId: 'bot_001',
+    secret: 'secret_001',
+    status: 'online',
+    lastActive: '2026-03-09 12:30',
+    createdAt: '2026-03-09 10:00',
+    description: '用于客户服务的Bot'
+  },
+  {
+    id: 2,
+    name: '通知Bot',
+    botId: 'bot_002',
+    secret: 'secret_002',
+    status: 'offline',
+    lastActive: '2026-03-09 10:15',
+    createdAt: '2026-03-09 09:30',
+    description: '用于系统通知的Bot'
+  },
+  {
+    id: 3,
+    name: '监控Bot',
+    botId: 'bot_003',
+    secret: 'secret_003',
+    status: 'online',
+    lastActive: '2026-03-09 12:45',
+    createdAt: '2026-03-09 11:00',
+    description: '用于系统监控的Bot'
+  }
+])
+
+// 生命周期
+onMounted(() => {
+  loadBots()
+})
+
+// 方法
+const loadBots = () => {
+  loading.value = true
+  // 模拟API调用
+  setTimeout(() => {
+    pagination.total = bots.value.length
+    loading.value = false
+  }, 500)
+}
+
+const searchBots = () => {
+  pagination.current = 1
+  loadBots()
+}
+
+const resetFilter = () => {
+  filterForm.name = ''
+  filterForm.status = ''
+  searchBots()
+}
+
+const addBot = () => {
+  dialogTitle.value = '添加Bot'
+  dialogVisible.value = true
+}
+
+const editBot = (bot: Bot) => {
+  dialogTitle.value = '编辑Bot'
+  Object.assign(form, bot)
+  dialogVisible.value = true
+}
+
+const deleteBot = (bot: Bot) => {
+  ElMessageBox.confirm(`确定要删除Bot "${bot.name}" 吗？`, '确认删除', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    bots.value = bots.value.filter(b => b.id !== bot.id)
+    ElMessage.success('Bot已删除')
+    loadBots()
+  })
+}
+
+const refreshBots = () => {
+  loadBots()
+  ElMessage.success('数据已刷新')
+}
+
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+  form.id = 0
+  form.name = ''
+  form.botId = ''
+  form.secret = ''
+  form.description = ''
+}
+
+const submitForm = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    
+    if (form.id === 0) {
+      // 添加
+      const newBot: Bot = {
+        id: bots.value.length + 1,
+        name: form.name,
+        botId: form.botId,
+        secret: form.secret,
+        status: 'offline',
+        lastActive: new Date().toLocaleString(),
+        createdAt: new Date().toLocaleString(),
+        description: form.description
+      }
+      bots.value.unshift(newBot)
+      ElMessage.success('Bot添加成功')
+    } else {
+      // 编辑
+      const index = bots.value.findIndex(b => b.id === form.id)
+      if (index !== -1) {
+        bots.value[index] = {
+          ...bots.value[index],
+          name: form.name,
+          botId: form.botId,
+          secret: form.secret,
+          description: form.description
+        }
+        ElMessage.success('Bot更新成功')
+      }
+    }
+    
+    dialogVisible.value = false
+    loadBots()
+  } catch (error) {
+    console.error('表单验证失败:', error)
+  }
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  loadBots()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  loadBots()
+}
+</script>
+
+<style scoped>
+.wecom-bots {
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-card {
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/wecom/Messages.vue b/frontend/src/views/wecom/Messages.vue
new file mode 100644
index 0000000..31d33dd
--- /dev/null
+++ b/frontend/src/views/wecom/Messages.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="wecom-messages">
+    <div class="page-header">
+      <h3>消息记录</h3>
+      <div class="header-actions">
+        <el-button @click="refreshMessages">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+        <el-button @click="exportMessages">
+          <el-icon><Download /></el-icon>
+          导出
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 筛选条件 -->
+    <el-card class="filter-card">
+      <el-form :inline="true" :model="filterForm">
+        <el-form-item label="Bot">
+          <el-select v-model="filterForm.botId" placeholder="请选择Bot" clearable>
+            <el-option label="客服Bot" value="bot_001" />
+            <el-option label="通知Bot" value="bot_002" />
+            <el-option label="监控Bot" value="bot_003" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="消息类型">
+          <el-select v-model="filterForm.messageType" placeholder="请选择消息类型" clearable>
+            <el-option label="文本" value="text" />
+            <el-option label="图片" value="image" />
+            <el-option label="文件" value="file" />
+            <el-option label="语音" value="voice" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchMessages">搜索</el-button>
+          <el-button @click="resetFilter">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 消息列表 -->
+    <el-card>
+      <el-table :data="messages" style="width: 100%" v-loading="loading">
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="botName" label="Bot" width="120" />
+        <el-table-column prop="messageType" label="类型" width="100">
+          <template #default="scope">
+            <el-tag :type="getMessageTypeTag(scope.row.messageType)">
+              {{ getMessageTypeText(scope.row.messageType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="direction" label="方向" width="80">
+          <template #default="scope">
+            <el-tag :type="scope.row.direction === 'inbound' ? 'success' : 'primary'">
+              {{ scope.row.direction === 'inbound' ? '接收' : '发送' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="内容" min-width="200">
+          <template #default="scope">
+            <div class="message-content">
+              {{ scope.row.content }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sender" label="发送方" width="150" />
+        <el-table-column prop="receiver" label="接收方" width="150" />
+        <el-table-column prop="timestamp" label="时间" width="180" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
+              {{ scope.row.status === 'success' ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="scope">
+            <el-button size="small" @click="viewMessageDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 消息详情对话框 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="消息详情"
+      width="600px"
+    >
+      <el-descriptions :column="2" border v-if="currentMessage">
+        <el-descriptions-item label="消息ID">{{ currentMessage.id }}</el-descriptions-item>
+        <el-descriptions-item label="Bot">{{ currentMessage.botName }}</el-descriptions-item>
+        <el-descriptions-item label="消息类型">
+          <el-tag :type="getMessageTypeTag(currentMessage.messageType)">
+            {{ getMessageTypeText(currentMessage.messageType) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="方向">
+          <el-tag :type="currentMessage.direction === 'inbound' ? 'success' : 'primary'">
+            {{ currentMessage.direction === 'inbound' ? '接收' : '发送' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="发送方">{{ currentMessage.sender }}</el-descriptions-item>
+        <el-descriptions-item label="接收方">{{ currentMessage.receiver }}</el-descriptions-item>
+        <el-descriptions-item label="时间">{{ currentMessage.timestamp }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="currentMessage.status === 'success' ? 'success' : 'danger'">
+            {{ currentMessage.status === 'success' ? '成功' : '失败' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="消息内容" :span="2">
+          <div class="message-detail-content">
+            {{ currentMessage.content }}
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="错误信息" :span="2" v-if="currentMessage.error">
+          <div class="error-message">
+            {{ currentMessage.error }}
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Refresh, Download } from '@element-plus/icons-vue'
+
+interface Message {
+  id: number
+  botId: string
+  botName: string
+  messageType: string
+  direction: string
+  content: string
+  sender: string
+  receiver: string
+  timestamp: string
+  status: string
+  error?: string
+}
+
+// 响应式数据
+const loading = ref(false)
+const detailDialogVisible = ref(false)
+const currentMessage = ref<Message | null>(null)
+
+// 筛选表单
+const filterForm = reactive({
+  botId: '',
+  messageType: '',
+  dateRange: []
+})
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 消息数据
+const messages = ref<Message[]>([
+  {
+    id: 1,
+    botId: 'bot_001',
+    botName: '客服Bot',
+    messageType: 'text',
+    direction: 'inbound',
+    content: '你好，我想咨询一下产品信息',
+    sender: '用户A',
+    receiver: '客服Bot',
+    timestamp: '2026-03-09 12:30:25',
+    status: 'success'
+  },
+  {
+    id: 2,
+    botId: 'bot_001',
+    botName: '客服Bot',
+    messageType: 'text',
+    direction: 'outbound',
+    content: '您好，很高兴为您服务！请问您想了解哪款产品？',
+    sender: '客服Bot',
+    receiver: '用户A',
+    timestamp: '2026-03-09 12:30:30',
+    status: 'success'
+  },
+  {
+    id: 3,
+    botId: 'bot_002',
+    botName: '通知Bot',
+    messageType: 'text',
+    direction: 'outbound',
+    content: '系统维护通知：今晚22:00-24:00进行系统维护',
+    sender: '通知Bot',
+    receiver: '全员',
+    timestamp: '2026-03-09 11:45:10',
+    status: 'success'
+  },
+  {
+    id: 4,
+    botId: 'bot_003',
+    botName: '监控Bot',
+    messageType: 'text',
+    direction: 'outbound',
+    content: '系统监控告警：CPU使用率超过90%',
+    sender: '监控Bot',
+    receiver: '管理员',
+    timestamp: '2026-03-09 10:20:15',
+    status: 'success'
+  },
+  {
+    id: 5,
+    botId: 'bot_001',
+    botName: '客服Bot',
+    messageType: 'image',
+    direction: 'inbound',
+    content: '产品图片',
+    sender: '用户B',
+    receiver: '客服Bot',
+    timestamp: '2026-03-09 09:15:40',
+    status: 'success'
+  }
+])
+
+// 生命周期
+onMounted(() => {
+  loadMessages()
+})
+
+// 方法
+const loadMessages = () => {
+  loading.value = true
+  // 模拟API调用
+  setTimeout(() => {
+    pagination.total = messages.value.length
+    loading.value = false
+  }, 500)
+}
+
+const searchMessages = () => {
+  pagination.current = 1
+  loadMessages()
+}
+
+const resetFilter = () => {
+  filterForm.botId = ''
+  filterForm.messageType = ''
+  filterForm.dateRange = []
+  searchMessages()
+}
+
+const refreshMessages = () => {
+  loadMessages()
+  ElMessage.success('消息列表已刷新')
+}
+
+const exportMessages = () => {
+  ElMessage.info('导出功能开发中')
+}
+
+const getMessageTypeTag = (type: string) => {
+  const types: Record<string, string> = {
+    'text': '',
+    'image': 'success',
+    'file': 'warning',
+    'voice': 'info'
+  }
+  return types[type] || ''
+}
+
+const getMessageTypeText = (type: string) => {
+  const texts: Record<string, string> = {
+    'text': '文本',
+    'image': '图片',
+    'file': '文件',
+    'voice': '语音'
+  }
+  return texts[type] || type
+}
+
+const viewMessageDetail = (message: Message) => {
+  currentMessage.value = message
+  detailDialogVisible.value = true
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.size = size
+  loadMessages()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.current = current
+  loadMessages()
+}
+</script>
+
+<style scoped>
+.wecom-messages {
+  height: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-header h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-card {
+  margin-bottom: 20px;
+}
+
+.message-content {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message-detail-content {
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.error-message {
+  padding: 10px;
+  background: #fef0f0;
+  color: #f56c6c;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..c024b95
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..4eb43d0
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 51deb09..9d37734 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,9 +1,35 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
 
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 3000,
+    host: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:18080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
   build: {
-    outDir: 'dist'
+    outDir: 'dist',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'js/[name]-[hash].js',
+        entryFileNames: 'js/[name]-[hash].js',
+        assetFileNames: '[ext]/[name]-[hash].[ext]'
+      }
+    }
   }
-})
+})
\ No newline at end of file
