update 后台样式

frontend/admin.html

@@ -9,7 +9,61 @@
         .admin-page {
             min-height: 100vh;
             background: var(--bg-primary);
+            display: flex;
+        }
+
+        .admin-sidebar {
+            width: 240px;
+            background: var(--bg-secondary);
+            border-right: 1px solid var(--border);
+            padding: 20px 0;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+        }
+
+        .admin-logo {
+            padding: 0 20px 20px;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 20px;
+        }
+
+        .admin-logo h2 {
+            font-size: 18px;
+            font-weight: 300;
+            color: var(--text-primary);
+        }
+
+        .admin-nav {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .admin-nav-item {
+            padding: 12px 20px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.2s;
+            border-left: 3px solid transparent;
+        }
+
+        .admin-nav-item:hover {
+            background: var(--bg-primary);
+            color: var(--text-primary);
+        }
+
+        .admin-nav-item.active {
+            background: var(--bg-primary);
+            color: var(--accent);
+            border-left-color: var(--accent);
+        }
+
+        .admin-main {
+            margin-left: 240px;
+            flex: 1;
             padding: 20px;
+            min-width: 800px; /* 设置最小宽度 */
         }
 
         .admin-container {
@@ -21,7 +75,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 40px;
+            margin-bottom: 30px;
             padding-bottom: 20px;
             border-bottom: 1px solid var(--border);
         }
@@ -34,26 +88,26 @@
 
         .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
+            gap: 16px;
-            margin-bottom: 40px;
+            margin-bottom: 30px;
         }
 
         .stat-card {
             background: var(--bg-secondary);
-            border: 1px solid var(--border-bright);
+            border: 1px solid var(--border);
             border-radius: 4px;
-            padding: 24px;
+            padding: 16px;
         }
 
         .stat-label {
-            font-size: 13px;
+            font-size: 12px;
             color: var(--text-secondary);
-            margin-bottom: 8px;
+            margin-bottom: 6px;
         }
 
         .stat-value {
-            font-size: 32px;
+            font-size: 24px;
             font-weight: 300;
             color: var(--accent);
         }
@@ -73,7 +127,7 @@
 
         .search-input {
             flex: 1;
-            padding: 12px 16px;
+            padding: 10px 14px;
             background: var(--bg-secondary);
             border: 1px solid var(--border);
             border-radius: 2px;
@@ -87,7 +141,7 @@
         }
 
         .search-btn {
-            padding: 12px 24px;
+            padding: 10px 20px;
             background: var(--accent);
             border: none;
             border-radius: 2px;
@@ -101,10 +155,27 @@
             box-shadow: 0 0 16px var(--accent-dim);
         }
 
+        .logout-btn {
+            padding: 8px 16px;
+            background: transparent;
+            border: 1px solid var(--border-bright);
+            border-radius: 2px;
+            color: var(--text-secondary);
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+            white-space: nowrap; /* 防止文字换行 */
+        }
+
+        .logout-btn:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+        }
+
         .users-table {
             width: 100%;
             background: var(--bg-secondary);
-            border: 1px solid var(--border-bright);
+            border: 1px solid var(--border);
             border-radius: 4px;
             overflow: hidden;
         }
@@ -116,7 +187,7 @@
 
         .users-table th {
             background: var(--bg-primary);
-            padding: 16px;
+            padding: 12px 16px;
             text-align: left;
             font-size: 13px;
             font-weight: 500;
@@ -125,7 +196,7 @@
         }
 
         .users-table td {
-            padding: 16px;
+            padding: 12px 16px;
             font-size: 14px;
             color: var(--text-primary);
             border-bottom: 1px solid var(--border);
@@ -288,77 +359,97 @@
 
         <!-- 管理页面 -->
         <div v-if="authenticated" class="admin-page">
-            <div class="admin-container">
+            <!-- 侧边栏 -->
-                <div class="admin-header">
+            <div class="admin-sidebar">
-                    <h1 class="admin-title">后台管理</h1>
+                <div class="admin-logo">
-                    <button class="search-btn" @click="logout">退出</button>
+                    <h2>Tradus 管理后台</h2>
                 </div>
+                <ul class="admin-nav">
+                    <li class="admin-nav-item" :class="{active: currentView === 'dashboard'}" @click="currentView = 'dashboard'">
+                        数据统计
+                    </li>
+                    <li class="admin-nav-item" :class="{active: currentView === 'users'}" @click="currentView = 'users'">
+                        用户管理
+                    </li>
+                </ul>
+            </div>
 
-                <!-- 统计卡片 -->
+            <!-- 主内容区 -->
-                <div class="stats-grid">
+            <div class="admin-main">
-                    <div class="stat-card">
+                <div class="admin-container">
-                        <div class="stat-label">用户总数</div>
+                    <div class="admin-header">
-                        <div class="stat-value">{{ stats.total_users }}</div>
+                        <h1 class="admin-title">{{ currentViewTitle }}</h1>
+                        <button class="logout-btn" @click="logout">退出</button>
                     </div>
-                    <div class="stat-card">
+
-                        <div class="stat-label">活跃用户（7天）</div>
+                    <!-- 数据统计视图 -->
-                        <div class="stat-value">{{ stats.active_users }}</div>
+                    <div v-if="currentView === 'dashboard'">
+                        <div class="stats-grid">
+                            <div class="stat-card">
+                                <div class="stat-label">用户总数</div>
+                                <div class="stat-value">{{ stats.total_users }}</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-label">活跃用户（7天）</div>
+                                <div class="stat-value">{{ stats.active_users }}</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-label">对话总数</div>
+                                <div class="stat-value">{{ stats.total_conversations }}</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-label">消息总数</div>
+                                <div class="stat-value">{{ stats.total_messages }}</div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="stat-card">
+
-                        <div class="stat-label">对话总数</div>
+                    <!-- 用户管理视图 -->
-                        <div class="stat-value">{{ stats.total_conversations }}</div>
+                    <div v-if="currentView === 'users'">
+                        <div class="search-bar">
+                            <input
+                                type="text"
+                                class="search-input"
+                                v-model="searchKeyword"
+                                placeholder="搜索手机号..."
+                                @keyup.enter="searchUsers"
+                            >
+                            <button class="search-btn" @click="searchUsers">搜索</button>
+                        </div>
+
+                        <div class="users-table">
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th>ID</th>
+                                        <th>手机号</th>
+                                        <th>注册时间</th>
+                                        <th>最后登录</th>
+                                        <th>状态</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="user in users" :key="user.id">
+                                        <td>{{ user.id }}</td>
+                                        <td>{{ user.phone }}</td>
+                                        <td>{{ formatDate(user.created_at) }}</td>
+                                        <td>{{ formatDate(user.last_login_at) }}</td>
+                                        <td>
+                                            <span :class="['status-badge', user.is_active ? 'status-active' : 'status-inactive']">
+                                                {{ user.is_active ? '正常' : '禁用' }}
+                                            </span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div class="pagination">
+                            <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
+                            <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
+                            <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
+                        </div>
                     </div>
-                    <div class="stat-card">
-                        <div class="stat-label">消息总数</div>
-                        <div class="stat-value">{{ stats.total_messages }}</div>
-                    </div>
-                </div>
-
-                <!-- 用户列表 -->
-                <h2 class="section-title">用户管理</h2>
-
-                <div class="search-bar">
-                    <input
-                        type="text"
-                        class="search-input"
-                        v-model="searchKeyword"
-                        placeholder="搜索手机号..."
-                        @keyup.enter="searchUsers"
-                    >
-                    <button class="search-btn" @click="searchUsers">搜索</button>
-                </div>
-
-                <div class="users-table">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>ID</th>
-                                <th>手机号</th>
-                                <th>注册时间</th>
-                                <th>最后登录</th>
-                                <th>状态</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="user in users" :key="user.id">
-                                <td>{{ user.id }}</td>
-                                <td>{{ user.phone }}</td>
-                                <td>{{ formatDate(user.created_at) }}</td>
-                                <td>{{ formatDate(user.last_login_at) }}</td>
-                                <td>
-                                    <span :class="['status-badge', user.is_active ? 'status-active' : 'status-inactive']">
-                                        {{ user.is_active ? '正常' : '禁用' }}
-                                    </span>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <div class="pagination">
-                    <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
-                    <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
-                    <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
                 </div>
             </div>
         </div>
@@ -375,6 +466,7 @@
                     password: '',
                     errorMessage: '',
                     adminPassword: '',
+                    currentView: 'users', // 当前视图：dashboard 或 users
                     stats: {
                         total_users: 0,
                         active_users: 0,
@@ -389,6 +481,15 @@
                     total: 0
                 };
             },
+            computed: {
+                currentViewTitle() {
+                    const titles = {
+                        'dashboard': '数据统计',
+                        'users': '用户管理'
+                    };
+                    return titles[this.currentView] || '后台管理';
+                }
+            },
             mounted() {
                 // 检查是否已登录
                 const savedPassword = sessionStorage.getItem('admin_password');