refactor(admin): 重构管理员界面并优化用户体验并添加应用图标

- 更新 AdminView.vue 组件结构，使用新的布局和导航设计
- 集成 Element Plus 图标组件，提升界面美观度
- 添加响应式设计支持，适配移动端设备
- 重构 HomeView.vue 组件，改进 Token 查询功能
- 实现自动刷新机制，每5秒更新 Token 信息
- 优化 TokenDetailView.vue 组件，增强数据管理功能
- 添加确认对话框，防止误删操作
- 在 App.vue 中引入全局 CSS 变量和主题系统
- 创建通用组件样式类，统一页面外观
- 优化数据加载逻辑，提升页面性能和用户体验

web/src/App.vue

@@ -1,15 +1,161 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 
+const themeMode = ref('light')
 </script>
 
 <template>
-  <router-view></router-view>
+  <div :class="themeMode" class="app-container">
+    <router-view></router-view>
+  </div>
 </template>
 
-<style scoped>
-html, body, #app {
-  height: 100%;
+<style>
+:root {
+  --primary-color: #409eff;
+  --primary-light: #79bbff;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --danger-color: #f56c6c;
+  --info-color: #909399;
+  --text-primary: #303133;
+  --text-regular: #606266;
+  --text-secondary: #909399;
+  --border-color: #dcdfe6;
+  --bg-page: #f5f7fa;
+  --bg-card: #ffffff;
+  --bg-header: #ffffff;
+}
+
+* {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
-</style>
+
+html, body, #app {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.app-container {
+  min-height: 100vh;
+  background: var(--bg-page);
+  max-width: 100%;
+}
+
+/* 卡片通用样式 */
+.content-card {
+  background: var(--bg-card);
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* 页面标题样式 */
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Section 标题 */
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 20px 0 16px;
+}
+
+/* 按钮组样式 */
+.btn-group {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* 表格工具栏 */
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* Flex 布局工具类 */
+.flex-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* Gap 间距 */
+.gap-sm { gap: 8px; }
+.gap-md { gap: 12px; }
+.gap-lg { gap: 16px; }
+
+/* 间距工具类 */
+.mt-sm { margin-top: 8px; }
+.mt-md { margin-top: 16px; }
+.mt-lg { margin-top: 24px; }
+.mb-sm { margin-bottom: 8px; }
+.mb-md { margin-bottom: 16px; }
+.mb-lg { margin-bottom: 24px; }
+.ml-sm { margin-left: 8px; }
+.ml-md { margin-left: 12px; }
+.ml-lg { margin-left: 16px; }
+.mr-sm { margin-right: 8px; }
+.mr-md { margin-right: 12px; }
+.mr-lg { margin-right: 16px; }
+
+/* 文本工具类 */
+.text-primary { color: var(--text-primary); }
+.text-success { color: var(--success-color); }
+.text-warning { color: var(--warning-color); }
+.text-danger { color: var(--danger-color); }
+.text-info { color: var(--info-color); }
+
+/* 加载动画 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+/* 空状态 */
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  color: var(--text-secondary);
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .content-card {
+    padding: 16px;
+    border-radius: 0;
+  }
+  
+  .hide-on-mobile {
+    display: none;
+  }
+}
+</style>