From d55548f5a2287d13840adce54a57647d8ee58080 Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Tue, 25 Nov 2025 16:51:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96UI1.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/dashboard/templates/base.html | 415 +++++++++++++---------------
 1 file changed, 197 insertions(+), 218 deletions(-)

diff --git a/admin/dashboard/templates/base.html b/admin/dashboard/templates/base.html
index 6001681..1604756 100644
--- a/admin/dashboard/templates/base.html
+++ b/admin/dashboard/templates/base.html
@@ -4,218 +4,210 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}机器人管理后台{% endblock %}</title>
-    <!-- 添加favicon -->
-    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
-    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
-    
-    <!-- 添加初始样式，防止闪烁 -->
+
+    <!-- favicon -->
+    <link rel="icon" href="/static/favicon.ico">
+
+    <!-- 极简风格重置 + 全局美化 -->
     <style>
-        /* 初始加载时的样式 */
+        /* ------------------------------
+           GLOBAL RESET
+        ------------------------------ */
+        body {
+            margin: 0;
+            padding: 0;
+            background: #f7f7f8;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                         "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+            color: #333;
+        }
+
+        h1,h2,h3,h4,h5,h6 {
+            font-weight: 600;
+            margin: 0;
+        }
+
+        /* 动画防闪烁 */
         .app-container {
             opacity: 0;
-            transition: opacity 0.3s ease-in-out;
+            transition: opacity .3s ease-in-out;
         }
         .app-container.loaded {
             opacity: 1;
         }
-        /* 其他基础样式 */
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
-        }
-        .app-container {
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
+
+        /* ------------------------------
+           TOP HEADER（极简顶部导航）
+        ------------------------------ */
         .header {
-            background-color: #006af5;
-            color: white;
-            padding: 0 20px;
-            height: 60px;
+            height: 58px;
+            padding: 0 24px;
+            background: #ffffff;
+            border-bottom: 1px solid #e5e6eb;
             display: flex;
             align-items: center;
             justify-content: space-between;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+            position: sticky;
+            top: 0;
+            z-index: 100;
         }
+
         .header-left {
             display: flex;
             align-items: center;
         }
+
         .header-logo {
-            width: 40px;
-            height: 40px;
-            margin-right: 10px;
-        }
-        .main-container {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-        }
-        .sidebar {
-            width: 180px;
-            background-color: #545c64;
-            height: 100%;
-            overflow-y: auto;
-        }
-        .content {
-            flex: 1;
-            padding: 20px;
-            overflow-y: auto;
-            background-color: #f0f2f5;
-            display: flex;
-            flex-direction: column;
-        }
-        .el-menu {
-            border-right: none;
-        }
-        .chart-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 4px;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-        .stats-card {
-            margin-bottom: 20px;
-        }
-        .logout-btn {
-            color: white;
-            cursor: pointer;
-            margin-left: 15px;
+            width: 36px;
+            height: 36px;
+            margin-right: 12px;
         }
+
         .header-right {
             display: flex;
             align-items: center;
         }
+
         .user-info {
-            margin-right: 10px;
+            margin-right: 12px;
+            font-size: 14px;
+            color: #444;
+        }
+
+        .logout-btn {
+            color: #444;
+            font-weight: 500;
+            transition: 0.2s;
+        }
+        .logout-btn:hover {
+            color: #000;
+        }
+
+        /* ------------------------------
+           LAYOUT
+        ------------------------------ */
+        .main-container {
+            display: flex;
+            height: calc(100vh - 58px);
+        }
+
+        /* ------------------------------
+           SIDEBAR（极简风侧栏）
+        ------------------------------ */
+        .sidebar {
+            width: 190px;
+            background: #fafafa;
+            border-right: 1px solid #e5e6eb;
+            box-shadow: 2px 0 4px rgba(0,0,0,0.03);
+        }
+
+        /* Element 菜单自定义美化 */
+        .el-menu {
+            border-right: none !important;
+        }
+
+        .el-menu-item {
+            height: 46px !important;
+            line-height: 46px !important;
+            margin: 4px 8px !important;
+            border-radius: 8px !important;
+            transition: 0.2s !important;
+        }
+        .el-menu-item:hover {
+            background: #e5e6eb55 !important;
+        }
+        .el-menu-item.is-active {
+            background: #e3e6ff !important;
+            color: #2f54eb !important;
+            font-weight: 600;
+        }
+
+        /* ------------------------------
+           CONTENT（内容区）
+        ------------------------------ */
+        .content {
+            flex: 1;
+            padding: 24px;
+            overflow-y: auto;
+        }
+
+        /* 全局卡片样式统一 */
+        .el-card {
+            border-radius: 12px !important;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
+            border: 1px solid #e5e6eb !important;
         }
     </style>
 
     <!-- Element UI CSS -->
     <link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
-    <!-- 图表库 -->
     <script src="/static/js/chart.js"></script>
-    <!-- Vue.js -->
     <script src="/static/js/vue.js"></script>
-    <!-- Element UI JS -->
     <script src="/static/js/element-ui/index.min.js"></script>
-    <!-- Axios -->
     <script src="/static/js/axios.min.js"></script>
 
     {% block head %}{% endblock %}
 </head>
+
 <body>
     <div id="app" class="app-container">
+
+        <!-- HEADER -->
         <header class="header">
             <div class="header-left">
-                <img src="/static/logo.png" alt="Logo" class="header-logo">
-                <h2>机器人管理后台</h2>
+                <img src="/static/logo.png" class="header-logo">
+                <h2 style="font-size:18px;">机器人管理后台</h2>
             </div>
-            <!-- 添加退出登录按钮 -->
+
             <div class="header-right">
                 <span class="user-info">管理员</span>
                 <el-button type="text" class="logout-btn" @click="logout">
-                    <i class="el-icon-switch-button"></i> 退出登录
+                    <i class="el-icon-switch-button"></i> 退出
                 </el-button>
             </div>
         </header>
 
+        <!-- MAIN AREA -->
         <div class="main-container">
-            <!-- 左侧菜单 -->
+
+            <!-- SIDEBAR -->
             <div class="sidebar">
                 <el-menu
                     :default-active="currentView"
-                    class="el-menu-vertical-demo"
-                    background-color="#545c64"
-                    text-color="#fff"
-                    active-text-color="#ffd04b"
+                    background-color="#fafafa"
+                    text-color="#555"
+                    active-text-color="#2f54eb"
                     @select="handleSelect">
-                    <el-menu-item index="1">
-                        <i class="el-icon-s-home"></i>
-                        <span slot="title">首页概览</span>
-                    </el-menu-item>
-                    <el-menu-item index="2">
-                        <i class="el-icon-s-grid"></i>
-                        <span slot="title">插件统计</span>
-                    </el-menu-item>
-                    <el-menu-item index="3">
-                        <i class="el-icon-user"></i>
-                        <span slot="title">用户统计</span>
-                    </el-menu-item>
-                    <el-menu-item index="4">
-                        <i class="el-icon-s-cooperation"></i>
-                        <span slot="title">群组统计</span>
-                    </el-menu-item>
 
-                    <!-- 在左侧菜单中添加群机器人管理选项 -->
-                    <!-- 找到el-menu标签内的菜单项列表，添加以下内容 -->
-                    <el-menu-item index="6">
-                        <i class="el-icon-setting"></i>
-                        <span slot="title">权限管理</span>
-                    </el-menu-item>
-                    <!-- 在左侧菜单中添加消息列表选项 -->
-                    <el-menu-item index="7">
-                        <i class="el-icon-chat-line-square"></i>
-                        <span slot="title">消息列表</span>
-                    </el-menu-item>
-                    <!-- 在导航菜单中添加通讯录管理入口 -->
-                    <el-menu-item index="10">
-                        <i class="el-icon-notebook-1"></i>
-                        <span slot="title">通讯录</span>
-                    </el-menu-item>
-                    <!-- 在导航菜单中添加插件管理选项 -->
-                    <el-menu-item index="11">
-                        <i class="el-icon-s-tools"></i>
-                        <span slot="title">插件管理</span>
-                    </el-menu-item>
-                    <!-- 在导航菜单中添加虚拟群组管理 -->
-                    <el-menu-item index="12">
-                        <i class="el-icon-connection"></i>
-                        <span slot="title">虚拟群组</span>
-                    </el-menu-item>
-                    <!-- 添加定时推送菜单项 -->
-                    <el-menu-item index="16">
-                        <i class="el-icon-time"></i>
-                        <span slot="title">定时推送</span>
-                    </el-menu-item>
-                    <!-- 添加接口文档菜单项 -->
-                    <el-menu-item index="13">
-                        <i class="el-icon-document"></i>
-                        <span slot="title">接口文档</span>
-                    </el-menu-item>
-                    <el-menu-item index="14">
-                        <i class="el-icon-cpu"></i>
-                        <span slot="title">资源监控</span>
-                    </el-menu-item>
+                    <el-menu-item index="1"><i class="el-icon-s-home"></i> 首页概览</el-menu-item>
+                    <el-menu-item index="2"><i class="el-icon-s-grid"></i> 插件统计</el-menu-item>
+                    <el-menu-item index="3"><i class="el-icon-user"></i> 用户统计</el-menu-item>
+                    <el-menu-item index="4"><i class="el-icon-s-cooperation"></i> 群组统计</el-menu-item>
+                    <el-menu-item index="6"><i class="el-icon-setting"></i> 权限管理</el-menu-item>
+                    <el-menu-item index="7"><i class="el-icon-chat-line-square"></i> 消息列表</el-menu-item>
+                    <el-menu-item index="10"><i class="el-icon-notebook-1"></i> 通讯录</el-menu-item>
+                    <el-menu-item index="11"><i class="el-icon-s-tools"></i> 插件管理</el-menu-item>
+                    <el-menu-item index="12"><i class="el-icon-connection"></i> 虚拟群组</el-menu-item>
+                    <el-menu-item index="16"><i class="el-icon-time"></i> 定时推送</el-menu-item>
+                    <el-menu-item index="13"><i class="el-icon-document"></i> 接口文档</el-menu-item>
+                    <el-menu-item index="14"><i class="el-icon-cpu"></i> 资源监控</el-menu-item>
+                    <el-menu-item index="15"><i class="el-icon-folder"></i> 文件浏览</el-menu-item>
+                    <el-menu-item index="9"><i class="el-icon-document"></i> 运行日志</el-menu-item>
+                    <el-menu-item index="5"><i class="el-icon-warning"></i> 错误日志</el-menu-item>
 
-                    <!-- 添加文件浏览器菜单项 -->
-                    <el-menu-item index="15">
-                        <i class="el-icon-folder"></i>
-                        <span slot="title">文件浏览</span>
-                    </el-menu-item>
-
-                    <!-- 运行日志 -->
-                    <el-menu-item index="9">
-                        <i class="el-icon-document"></i>
-                        <span slot="title">运行日志</span>
-                    </el-menu-item>
-                    <el-menu-item index="5">
-                        <i class="el-icon-warning"></i>
-                        <span slot="title">错误日志</span>
-                    </el-menu-item>
                 </el-menu>
             </div>
 
-            <!-- 右侧内容区 -->
+            <!-- CONTENT -->
             <div class="content">
-                <!-- 时间范围选择器 - 只在特定页面显示 -->
-                <el-row :gutter="20" style="margin-bottom: 20px;" v-if="showTimeRangeSelector">
+
+                <!-- 时间范围选择器 -->
+                <el-row v-if="showTimeRangeSelector" :gutter="20" style="margin-bottom:20px;">
                     <el-col :span="24">
                         <el-card shadow="hover">
                             <el-form :inline="true" size="small">
-                                <el-form-item label="统计时间范围">
+                                <el-form-item label="统计区间">
                                     <el-select v-model="timeRange" @change="loadData">
                                         <el-option label="最近7天" value="7"></el-option>
                                         <el-option label="最近30天" value="30"></el-option>
@@ -223,84 +215,71 @@
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item>
-                                    <el-button type="primary" @click="loadData">刷新数据</el-button>
+                                    <el-button type="primary" @click="loadData">刷新</el-button>
                                 </el-form-item>
                             </el-form>
                         </el-card>
                     </el-col>
                 </el-row>
 
-                <!-- 内容区域 -->
                 {% block content %}{% endblock %}
+
             </div>
         </div>
     </div>
 
-    <!-- 基础 Vue 实例 -->
-    <script>
-        const baseApp = {
-            data() {
-                return {
-                    currentView: '1',
-                    timeRange: '7',
-                    charts: {},
-                    showTimeRangeSelector: false
-                }
-            },
-            created() {
-                // 根据当前页面路径决定是否显示时间范围选择器
-                const path = window.location.pathname;
-                this.showTimeRangeSelector = ['/', '/plugins', '/users', '/groups','/robot','/errors'].includes(path);
-            },
-            mounted() {
-                // 添加页面加载完成后的过渡效果
-                document.querySelector('.app-container').classList.add('loaded');
-            },
-            methods: {
-                handleSelect(key, keyPath) {
-                    this.currentView = key;
-                    const routes = {
-                        '1': '/',
-                        '2': '/plugins',
-                        '3': '/users',
-                        '4': '/groups',
-                        '5': '/errors',
-                        '6': '/robot',
-                        '7': '/messages',
-                        '9': '/wx_logs',
-                        '10': '/contacts',
-                        '11': '/plugins_manage',
-                        '12': '/virtual_group',
-                        '13': '/api_docs',
-                        '14': '/system_status',
-                        '15': '/file_browser',
-                        '16': '/message_push'  // 添加定时推送路由
-                    };
-
-                    const currentPath = window.location.pathname;
-                    const targetPath = routes[key];
-                    if (currentPath !== targetPath && targetPath !== undefined) {
-                        window.location.href = targetPath;
-                    }
-                },
-                loadData() {
-                    // 由子组件实现
-                },
-                logout() {
-                    this.$confirm('确认退出登录吗?', '提示', {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning'
-                    }).then(() => {
-                        window.location.href = '/logout';
-                    }).catch(() => {
-                        // 用户点击取消，不做任何操作
-                    });
-                }
+<script>
+    const baseApp = {
+        data() {
+            return {
+                currentView: '1',
+                timeRange: '7',
+                showTimeRangeSelector: false
             }
-        };
-    </script>
+        },
+        created() {
+            const path = window.location.pathname;
+            this.showTimeRangeSelector = ['/', '/plugins', '/users', '/groups','/robot','/errors'].includes(path);
+        },
+        mounted() {
+            document.querySelector('.app-container').classList.add('loaded');
+        },
+        methods: {
+            handleSelect(key) {
+                const routes = {
+                    '1': '/',
+                    '2': '/plugins',
+                    '3': '/users',
+                    '4': '/groups',
+                    '5': '/errors',
+                    '6': '/robot',
+                    '7': '/messages',
+                    '9': '/wx_logs',
+                    '10': '/contacts',
+                    '11': '/plugins_manage',
+                    '12': '/virtual_group',
+                    '13': '/api_docs',
+                    '14': '/system_status',
+                    '15': '/file_browser',
+                    '16': '/message_push'
+                };
+                if (routes[key] && window.location.pathname !== routes[key]) {
+                    window.location.href = routes[key];
+                }
+            },
+            logout() {
+                this.$confirm('确认退出登录吗？', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    window.location.href = '/logout';
+                });
+            }
+        }
+    };
+</script>
 
-    {% block scripts %}{% endblock %}
+{% block scripts %}{% endblock %}
 </body>
-</html>
\ No newline at end of file
+</html>