From e91c9ec94bc53c26f2dd8332068fc669905e2a45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=AF=BB=E6=AC=A2?= <lxh@cxh.cn>
Date: Mon, 7 Apr 2025 16:55:43 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E6=9B=B4=E6=96=B0=E6=9C=BA=E5=99=A8?=
 =?UTF-8?q?=E4=BA=BA=E7=8A=B6=E6=80=81=E7=BB=9F=E8=AE=A1=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E5=89=8D=E7=AB=AF=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=EF=BC=8C=E4=BC=98=E5=8C=96=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/handler/robot.go      |  16 +++++
 internal/view/robot/index.html | 107 +++++++++------------------------
 2 files changed, 45 insertions(+), 78 deletions(-)

diff --git a/internal/handler/robot.go b/internal/handler/robot.go
index 5623dde..fc6d0c0 100644
--- a/internal/handler/robot.go
+++ b/internal/handler/robot.go
@@ -25,9 +25,25 @@ func ListRobots(c *fiber.Ctx) error {
 		return fiber.NewError(fiber.StatusInternalServerError, "获取机器人列表失败")
 	}
 
+	total := len(robots)
+	online := 0
+	offline := 0
+	for _, robot := range robots {
+		if robot.Status == model.RobotStatusOnline {
+			online++
+		} else {
+			offline++
+		}
+	}
+
 	return c.Render("robot/index", fiber.Map{
 		"Title":  "机器人列表",
 		"Robots": robots,
+		"Status": map[string]int{
+			"Total":   total,
+			"Online":  online,
+			"Offline": offline,
+		},
 	})
 }
 
diff --git a/internal/view/robot/index.html b/internal/view/robot/index.html
index 649c03e..2648c12 100644
--- a/internal/view/robot/index.html
+++ b/internal/view/robot/index.html
@@ -37,23 +37,23 @@
 
   <!-- 统计信息 -->
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-    <div class="clean-card px-6 py-4 flex items-center">
-      <div class="w-12 h-12 rounded-full bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-500 mr-4">
-        <i class="fas fa-check-circle text-xl"></i>
-      </div>
-      <div>
-        <p class="text-sm text-gray-600">在线机器人</p>
-        <p class="text-2xl font-semibold text-gray-800" id="online-count">{{.OnlineCount}}</p>
-      </div>
-    </div>
-
     <div class="clean-card px-6 py-4 flex items-center">
       <div class="w-12 h-12 rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center text-blue-500 mr-4">
         <i class="fas fa-robot text-xl"></i>
       </div>
       <div>
         <p class="text-sm text-gray-600">总机器人</p>
-        <p class="text-2xl font-semibold text-gray-800" id="filtered-count">{{len .Robots}}</p>
+        <p class="text-2xl font-semibold text-gray-800" id="filtered-count">{{.Status.Total}}</p>
+      </div>
+    </div>
+
+    <div class="clean-card px-6 py-4 flex items-center">
+      <div class="w-12 h-12 rounded-full bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-500 mr-4">
+        <i class="fas fa-check-circle text-xl"></i>
+      </div>
+      <div>
+        <p class="text-sm text-gray-600">在线机器人</p>
+        <p class="text-2xl font-semibold text-gray-800" id="online-count">{{.Status.Online}}</p>
       </div>
     </div>
 
@@ -63,7 +63,7 @@
       </div>
       <div>
         <p class="text-sm text-gray-600">离线机器人</p>
-        <p class="text-2xl font-semibold text-gray-800" id="offline-count">{{.OfflineCount}}</p>
+        <p class="text-2xl font-semibold text-gray-800" id="offline-count">{{.Status.Offline}}</p>
       </div>
     </div>
   </div>
@@ -75,7 +75,7 @@
       <div class="robot-card bg-white rounded-lg shadow-sm overflow-hidden border border-gray-50 transition-all duration-300 hover:shadow-md">
         <!-- 状态指示条 -->
         <div class="h-1 {{if eq .Status "online"}}bg-green-500{{else}}bg-gray-300{{end}} w-full"></div>
-        
+
         <!-- 卡片内容 -->
         <div class="p-6">
           <div class="flex items-center">
@@ -94,7 +94,7 @@
               </div>
             </div>
           </div>
-          
+
           <!-- 机器人信息 -->
           <div class="mt-4 border-t border-gray-50 pt-4">
             <div class="flex justify-between items-center text-sm text-gray-500 mb-2">
@@ -107,7 +107,7 @@
             </div>
           </div>
         </div>
-        
+
         <!-- 操作区域 -->
         <div class="bg-gray-50 px-6 py-3 flex justify-between items-center">
           <span class="text-xs text-gray-500">微信状态: {{if eq .Status "online"}}在线{{else}}离线{{end}}</span>
@@ -115,7 +115,7 @@
             <a href="/admin/robots/{{.ID}}" class="p-1.5 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900" title="查看详情">
               <i class="fas fa-eye"></i>
             </a>
-            
+
             {{if eq .Status "offline"}}
             <a href="/admin/robots/{{.ID}}/login" class="p-1.5 rounded-md text-blue-600 hover:bg-blue-50 hover:text-blue-700" title="登录微信">
               <i class="fas fa-sign-in-alt"></i>
@@ -127,7 +127,7 @@
               </button>
             </form>
             {{end}}
-            
+
             <a href="#" class="p-1.5 rounded-md text-red-600 hover:bg-red-50 hover:text-red-700 delete-robot" data-id="{{.ID}}" data-robot-name="{{.Nickname}}" title="删除">
               <i class="fas fa-trash"></i>
             </a>
@@ -150,55 +150,6 @@
   </div>
 </div>
 
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // 计算不同状态机器人数量
-    let onlineCount = 0;
-    let offlineCount = 0;
-    let errorCount = 0;
-
-    document.querySelectorAll('.robot-card').forEach(card => {
-      const status = card.dataset.status;
-      if (status === 'online') {
-        onlineCount++;
-      } else if (status === 'error') {
-        errorCount++;
-      } else {
-        offlineCount++;
-      }
-    });
-
-    // 更新统计数字
-    document.getElementById('online-count').textContent = onlineCount;
-    document.getElementById('offline-count').textContent = offlineCount;
-    document.getElementById('error-count').textContent = errorCount;
-
-    // 删除机器人确认
-    document.querySelectorAll('.delete-robot').forEach(btn => {
-      btn.addEventListener('click', async function(e) {
-        e.preventDefault();
-        const robotId = this.dataset.id;
-        const robotName = this.dataset.robotName || '此机器人';
-        
-        if (window.confirm(`确定要删除 ${robotName} 吗？此操作不可恢复！`)) {
-          // 使用fetch API发送DELETE请求
-          fetch(`/admin/robots/${robotId}`, { method: 'DELETE' })
-            .then(response => {
-              if (response.ok) {
-                window.location.reload();
-              } else {
-                throw new Error('删除失败');
-              }
-            })
-            .catch(error => {
-              console.error('Error:', error);
-              alert('删除失败: ' + error.message);
-            });
-        }
-      });
-    });
-  });
-</script>
 
 <script>
     document.addEventListener('DOMContentLoaded', function() {
@@ -208,7 +159,7 @@
                 e.preventDefault();
                 const robotId = this.dataset.id;
                 const robotName = this.dataset.robotName || '此机器人';
-                
+
                 // 使用美观的确认对话框代替原生的window.confirm
                 if (typeof confirmDialog === 'function') {
                     // 使用confirmDialog函数
@@ -216,21 +167,21 @@
                         `确定要删除 ${robotName} 吗？此操作不可恢复！`,
                         { type: 'danger', title: '确认删除' }
                     );
-                    
+
                     if (confirmed) {
                         // 显示加载状态
                         this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                         this.disabled = true;
-                        
+
                         try {
                             // 使用fetch API发送DELETE请求
-                            const response = await fetch(`/admin/robots/${robotId}`, { 
+                            const response = await fetch(`/admin/robots/${robotId}`, {
                                 method: 'DELETE',
                                 headers: {
                                     'Content-Type': 'application/json'
                                 }
                             });
-                            
+
                             if (response.ok) {
                                 // 删除成功，刷新页面
                                 window.location.reload();
@@ -242,7 +193,7 @@
                         } catch (error) {
                             console.error('Error:', error);
                             alert('删除失败: ' + error.message);
-                            
+
                             // 恢复按钮状态
                             this.innerHTML = '<i class="fas fa-trash"></i>';
                             this.disabled = false;
@@ -280,7 +231,7 @@
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
-  
+
   .robot-card:hover {
     box-shadow: 0 8px 30px rgba(0,0,0,0.12); /* 保留悬停时的阴影效果 */
     z-index: 10;
@@ -292,28 +243,28 @@
   .robot-card:before {
     display: none; /* 完全移除左侧的灰色条 */
   }
-  
+
   /* 移除悬停时的左侧边框装饰线 */
   .robot-card:hover:before {
     display: none;
   }
-  
+
   /* 同样移除基于状态的左侧边框装饰线 */
   .robot-card:has(.bg-green-100):hover:before,
   .robot-card:has(.bg-gray-100):hover:before {
     display: none;
   }
-  
+
   /* 保留其他有用的样式 */
   .robot-card a, .robot-card button {
     transition: all 0.2s ease;
   }
-  
+
   .robot-card:hover a, .robot-card:hover button {
     transform: scale(1.15);
     filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
   }
-  
+
   /* 移除每个卡片的间隔装饰线 */
   .robot-card td:first-child:before {
     display: none;