xto-fronted 0.4.93 → 0.4.95

package/src/views/dashboard/index.vue

@@ -1,546 +1,546 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Progress } from '@xto/data'
-
-const stats = ref([
-  { title: '用户总数', value: 1234, icon: '👥', color: '#1677ff', trend: '+12.5%', trendUp: true },
-  { title: '今日访问', value: 567, icon: '👀', color: '#52c41a', trend: '+8.2%', trendUp: true },
-  { title: '订单数量', value: 890, icon: '📦', color: '#faad14', trend: '-3.1%', trendUp: false },
-  { title: '销售金额', value: 123456, icon: '💰', color: '#ff4d4f', trend: '+15.8%', trendUp: true }
-])
-
-const activities = ref([
-  { user: '张三', action: '登录系统', time: '2分钟前', type: 'success', avatar: '张' },
-  { user: '李四', action: '修改了用户信息', time: '5分钟前', type: 'warning', avatar: '李' },
-  { user: '王五', action: '创建了新订单', time: '10分钟前', type: 'info', avatar: '王' },
-  { user: '赵六', action: '删除了测试数据', time: '30分钟前', type: 'danger', avatar: '赵' },
-  { user: '钱七', action: '更新了系统配置', time: '1小时前', type: 'primary', avatar: '钱' }
-])
-
-const quickLinks = ref([
-  { title: '用户管理', path: '/system/user', icon: '👤', desc: '管理系统用户' },
-  { title: '角色管理', path: '/system/role', icon: '👥', desc: '角色权限配置' },
-  { title: '菜单管理', path: '/system/menu', icon: '📋', desc: '菜单路由管理' },
-  { title: '系统设置', path: '/system', icon: '⚙️', desc: '系统参数配置' }
-])
-
-const systemInfo = ref([
-  { label: '系统版本', value: 'v1.0.0' },
-  { label: 'Vue 版本', value: '3.4.21' },
-  { label: '构建工具', value: 'Vite 5' },
-  { label: 'UI 组件库', value: 'XTO UI' }
-])
-</script>
-
-<template>
-  <div class="dashboard">
-    <!-- 统计卡片 -->
-    <div class="stats-section">
-      <div v-for="stat in stats" :key="stat.title" class="stat-card">
-        <div class="stat-icon" :style="{ background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)` }">
-          <span>{{ stat.icon }}</span>
-        </div>
-        <div class="stat-content">
-          <div class="stat-title">{{ stat.title }}</div>
-          <div class="stat-value" :style="{ color: stat.color }">
-            {{ stat.value.toLocaleString() }}
-          </div>
-          <div class="stat-trend" :class="{ up: stat.trendUp, down: !stat.trendUp }">
-            <svg v-if="stat.trendUp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M7 17l5-5 5 5M7 7l5 5 5-5"/>
-            </svg>
-            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M7 7l5 5 5-5M7 17l5-5 5 5"/>
-            </svg>
-            <span>{{ stat.trend }}</span>
-          </div>
-        </div>
-        <div class="stat-decoration" :style="{ background: `linear-gradient(135deg, ${stat.color}08 0%, transparent 100%)` }"></div>
-      </div>
-    </div>
-
-    <!-- 主体内容 -->
-    <div class="main-section">
-      <!-- 快捷入口 -->
-      <div class="quick-section">
-        <div class="section-header">
-          <h3>快捷入口</h3>
-          <span class="section-badge">4 个入口</span>
-        </div>
-        <div class="quick-grid">
-          <router-link
-            v-for="link in quickLinks"
-            :key="link.path"
-            :to="link.path"
-            class="quick-card"
-          >
-            <div class="quick-icon">{{ link.icon }}</div>
-            <div class="quick-info">
-              <div class="quick-title">{{ link.title }}</div>
-              <div class="quick-desc">{{ link.desc }}</div>
-            </div>
-            <div class="quick-arrow">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M9 18l6-6-6-6"/>
-              </svg>
-            </div>
-          </router-link>
-        </div>
-      </div>
-
-      <!-- 最近活动 -->
-      <div class="activity-section">
-        <div class="section-header">
-          <h3>最近活动</h3>
-          <a href="#" class="section-link">查看全部</a>
-        </div>
-        <div class="activity-list">
-          <div v-for="(activity, index) in activities" :key="index" class="activity-item">
-            <div class="activity-avatar" :class="activity.type">
-              {{ activity.avatar }}
-            </div>
-            <div class="activity-content">
-              <div class="activity-main">
-                <span class="activity-user">{{ activity.user }}</span>
-                <span class="activity-action">{{ activity.action }}</span>
-              </div>
-              <div class="activity-time">{{ activity.time }}</div>
-            </div>
-            <div class="activity-dot" :class="activity.type"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 系统信息 -->
-    <div class="system-section">
-      <div class="section-header">
-        <h3>系统信息</h3>
-      </div>
-      <div class="system-grid">
-        <div class="system-info-list">
-          <div v-for="info in systemInfo" :key="info.label" class="info-item">
-            <span class="info-label">{{ info.label }}</span>
-            <span class="info-value">{{ info.value }}</span>
-          </div>
-        </div>
-        <div class="system-status">
-          <div class="status-item">
-            <div class="status-header">
-              <span class="status-label">服务器状态</span>
-              <span class="status-value">75%</span>
-            </div>
-            <Progress :percentage="75" status="success" />
-          </div>
-          <div class="status-item">
-            <div class="status-header">
-              <span class="status-label">内存使用</span>
-              <span class="status-value">45%</span>
-            </div>
-            <Progress :percentage="45" />
-          </div>
-          <div class="status-item">
-            <div class="status-header">
-              <span class="status-label">CPU 使用率</span>
-              <span class="status-value">32%</span>
-            </div>
-            <Progress :percentage="32" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.dashboard {
-  padding: 24px;
-  background: var(--bg-color-page);
-  min-height: 100%;
-}
-
-// 统计卡片
-.stats-section {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 24px;
-
-  @media (max-width: 1200px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.stat-card {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  padding: 20px;
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
-  transition: all 0.3s ease;
-  overflow: hidden;
-
-  &:hover {
-    box-shadow: var(--box-shadow-card-hover);
-    transform: translateY(-4px);
-
-    .stat-decoration {
-      opacity: 1;
-    }
-  }
-
-  .stat-icon {
-    width: 52px;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--border-radius-large);
-    flex-shrink: 0;
-
-    span {
-      font-size: 26px;
-    }
-  }
-
-  .stat-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .stat-title {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-    margin-bottom: 8px;
-  }
-
-  .stat-value {
-    font-size: 28px;
-    font-weight: 600;
-    line-height: 1.2;
-    margin-bottom: 8px;
-  }
-
-  .stat-trend {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 12px;
-
-    svg {
-      width: 14px;
-      height: 14px;
-    }
-
-    &.up {
-      color: var(--color-success);
-      background: var(--color-success-lighter);
-    }
-
-    &.down {
-      color: var(--color-danger);
-      background: var(--color-danger-lighter);
-    }
-  }
-
-  .stat-decoration {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-}
-
-// 主体内容
-.main-section {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px;
-  margin-bottom: 24px;
-
-  @media (max-width: 992px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-
-  h3 {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-  }
-
-  .section-badge {
-    font-size: 12px;
-    color: var(--color-text-placeholder);
-    background: var(--color-fill);
-    padding: 4px 10px;
-    border-radius: 12px;
-  }
-
-  .section-link {
-    font-size: 14px;
-    color: var(--color-primary);
-    text-decoration: none;
-    transition: color 0.2s;
-
-    &:hover {
-      color: var(--color-primary-dark-1);
-    }
-  }
-}
-
-// 快捷入口
-.quick-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: 20px;
-  box-shadow: var(--box-shadow-card);
-}
-
-.quick-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.quick-card {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: var(--color-fill-light);
-  border-radius: var(--border-radius-base);
-  text-decoration: none;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: var(--color-primary-light-6);
-    transform: translateX(4px);
-
-    .quick-arrow {
-      color: var(--color-primary);
-      transform: translateX(4px);
-    }
-  }
-
-  .quick-icon {
-    width: 44px;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-color);
-    border-radius: var(--border-radius-base);
-    font-size: 22px;
-    flex-shrink: 0;
-  }
-
-  .quick-info {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .quick-title {
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-    margin-bottom: 4px;
-  }
-
-  .quick-desc {
-    font-size: 13px;
-    color: var(--color-text-secondary);
-  }
-
-  .quick-arrow {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-text-placeholder);
-    transition: all 0.2s ease;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-}
-
-// 最近活动
-.activity-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: 20px;
-  box-shadow: var(--box-shadow-card);
-}
-
-.activity-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.activity-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 0;
-  border-bottom: 1px solid var(--color-border-lighter);
-  position: relative;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.activity-avatar {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 14px;
-  font-weight: 500;
-  flex-shrink: 0;
-
-  &.success { background: var(--color-success-lighter); color: var(--color-success); }
-  &.warning { background: var(--color-warning-lighter); color: var(--color-warning); }
-  &.info { background: var(--color-info-lighter); color: var(--color-info); }
-  &.danger { background: var(--color-danger-lighter); color: var(--color-danger); }
-  &.primary { background: var(--color-primary-light-6); color: var(--color-primary); }
-}
-
-.activity-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.activity-main {
-  margin-bottom: 4px;
-}
-
-.activity-user {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-right: 8px;
-}
-
-.activity-action {
-  font-size: 14px;
-  color: var(--color-text-secondary);
-}
-
-.activity-time {
-  font-size: 12px;
-  color: var(--color-text-placeholder);
-}
-
-.activity-dot {
-  position: absolute;
-  left: -20px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  opacity: 0.6;
-
-  &.success { background: var(--color-success); }
-  &.warning { background: var(--color-warning); }
-  &.info { background: var(--color-info); }
-  &.danger { background: var(--color-danger); }
-  &.primary { background: var(--color-primary); }
-}
-
-// 系统信息
-.system-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: 20px;
-  box-shadow: var(--box-shadow-card);
-}
-
-.system-grid {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr;
-  gap: 24px;
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.system-info-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: var(--color-fill-light);
-  border-radius: var(--border-radius-base);
-
-  .info-label {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-
-  .info-value {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-  }
-}
-
-.system-status {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.status-item {
-  .status-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-
-  .status-label {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-
-  .status-value {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-  }
-}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Progress } from '@xto/data'
+
+const stats = ref([
+  { title: '用户总数', value: 1234, icon: '👥', color: '#1677ff', trend: '+12.5%', trendUp: true },
+  { title: '今日访问', value: 567, icon: '👀', color: '#52c41a', trend: '+8.2%', trendUp: true },
+  { title: '订单数量', value: 890, icon: '📦', color: '#faad14', trend: '-3.1%', trendUp: false },
+  { title: '销售金额', value: 123456, icon: '💰', color: '#ff4d4f', trend: '+15.8%', trendUp: true }
+])
+
+const activities = ref([
+  { user: '张三', action: '登录系统', time: '2分钟前', type: 'success', avatar: '张' },
+  { user: '李四', action: '修改了用户信息', time: '5分钟前', type: 'warning', avatar: '李' },
+  { user: '王五', action: '创建了新订单', time: '10分钟前', type: 'info', avatar: '王' },
+  { user: '赵六', action: '删除了测试数据', time: '30分钟前', type: 'danger', avatar: '赵' },
+  { user: '钱七', action: '更新了系统配置', time: '1小时前', type: 'primary', avatar: '钱' }
+])
+
+const quickLinks = ref([
+  { title: '用户管理', path: '/system/user', icon: '👤', desc: '管理系统用户' },
+  { title: '角色管理', path: '/system/role', icon: '👥', desc: '角色权限配置' },
+  { title: '菜单管理', path: '/system/menu', icon: '📋', desc: '菜单路由管理' },
+  { title: '系统设置', path: '/system', icon: '⚙️', desc: '系统参数配置' }
+])
+
+const systemInfo = ref([
+  { label: '系统版本', value: 'v1.0.0' },
+  { label: 'Vue 版本', value: '3.4.21' },
+  { label: '构建工具', value: 'Vite 5' },
+  { label: 'UI 组件库', value: 'XTO UI' }
+])
+</script>
+
+<template>
+  <div class="dashboard">
+    <!-- 统计卡片 -->
+    <div class="stats-section">
+      <div v-for="stat in stats" :key="stat.title" class="stat-card">
+        <div class="stat-icon" :style="{ background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)` }">
+          <span>{{ stat.icon }}</span>
+        </div>
+        <div class="stat-content">
+          <div class="stat-title">{{ stat.title }}</div>
+          <div class="stat-value" :style="{ color: stat.color }">
+            {{ stat.value.toLocaleString() }}
+          </div>
+          <div class="stat-trend" :class="{ up: stat.trendUp, down: !stat.trendUp }">
+            <svg v-if="stat.trendUp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M7 17l5-5 5 5M7 7l5 5 5-5"/>
+            </svg>
+            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M7 7l5 5 5-5M7 17l5-5 5 5"/>
+            </svg>
+            <span>{{ stat.trend }}</span>
+          </div>
+        </div>
+        <div class="stat-decoration" :style="{ background: `linear-gradient(135deg, ${stat.color}08 0%, transparent 100%)` }"></div>
+      </div>
+    </div>
+
+    <!-- 主体内容 -->
+    <div class="main-section">
+      <!-- 快捷入口 -->
+      <div class="quick-section">
+        <div class="section-header">
+          <h3>快捷入口</h3>
+          <span class="section-badge">4 个入口</span>
+        </div>
+        <div class="quick-grid">
+          <router-link
+            v-for="link in quickLinks"
+            :key="link.path"
+            :to="link.path"
+            class="quick-card"
+          >
+            <div class="quick-icon">{{ link.icon }}</div>
+            <div class="quick-info">
+              <div class="quick-title">{{ link.title }}</div>
+              <div class="quick-desc">{{ link.desc }}</div>
+            </div>
+            <div class="quick-arrow">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 18l6-6-6-6"/>
+              </svg>
+            </div>
+          </router-link>
+        </div>
+      </div>
+
+      <!-- 最近活动 -->
+      <div class="activity-section">
+        <div class="section-header">
+          <h3>最近活动</h3>
+          <a href="#" class="section-link">查看全部</a>
+        </div>
+        <div class="activity-list">
+          <div v-for="(activity, index) in activities" :key="index" class="activity-item">
+            <div class="activity-avatar" :class="activity.type">
+              {{ activity.avatar }}
+            </div>
+            <div class="activity-content">
+              <div class="activity-main">
+                <span class="activity-user">{{ activity.user }}</span>
+                <span class="activity-action">{{ activity.action }}</span>
+              </div>
+              <div class="activity-time">{{ activity.time }}</div>
+            </div>
+            <div class="activity-dot" :class="activity.type"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 系统信息 -->
+    <div class="system-section">
+      <div class="section-header">
+        <h3>系统信息</h3>
+      </div>
+      <div class="system-grid">
+        <div class="system-info-list">
+          <div v-for="info in systemInfo" :key="info.label" class="info-item">
+            <span class="info-label">{{ info.label }}</span>
+            <span class="info-value">{{ info.value }}</span>
+          </div>
+        </div>
+        <div class="system-status">
+          <div class="status-item">
+            <div class="status-header">
+              <span class="status-label">服务器状态</span>
+              <span class="status-value">75%</span>
+            </div>
+            <Progress :percentage="75" status="success" />
+          </div>
+          <div class="status-item">
+            <div class="status-header">
+              <span class="status-label">内存使用</span>
+              <span class="status-value">45%</span>
+            </div>
+            <Progress :percentage="45" />
+          </div>
+          <div class="status-item">
+            <div class="status-header">
+              <span class="status-label">CPU 使用率</span>
+              <span class="status-value">32%</span>
+            </div>
+            <Progress :percentage="32" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dashboard {
+  padding: 24px;
+  background: var(--bg-color-page);
+  min-height: 100%;
+}
+
+// 统计卡片
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
+
+  @media (max-width: 1200px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.stat-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px;
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  transition: all 0.3s ease;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: var(--box-shadow-card-hover);
+    transform: translateY(-4px);
+
+    .stat-decoration {
+      opacity: 1;
+    }
+  }
+
+  .stat-icon {
+    width: 52px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-large);
+    flex-shrink: 0;
+
+    span {
+      font-size: 26px;
+    }
+  }
+
+  .stat-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .stat-title {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 8px;
+  }
+
+  .stat-value {
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin-bottom: 8px;
+  }
+
+  .stat-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 12px;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    &.up {
+      color: var(--color-success);
+      background: var(--color-success-lighter);
+    }
+
+    &.down {
+      color: var(--color-danger);
+      background: var(--color-danger-lighter);
+    }
+  }
+
+  .stat-decoration {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+}
+
+// 主体内容
+.main-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin-bottom: 24px;
+
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .section-badge {
+    font-size: 12px;
+    color: var(--color-text-placeholder);
+    background: var(--color-fill);
+    padding: 4px 10px;
+    border-radius: 12px;
+  }
+
+  .section-link {
+    font-size: 14px;
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--color-primary-dark-1);
+    }
+  }
+}
+
+// 快捷入口
+.quick-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  padding: 20px;
+  box-shadow: var(--box-shadow-card);
+}
+
+.quick-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.quick-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: var(--color-fill-light);
+  border-radius: var(--border-radius-base);
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--color-primary-light-6);
+    transform: translateX(4px);
+
+    .quick-arrow {
+      color: var(--color-primary);
+      transform: translateX(4px);
+    }
+  }
+
+  .quick-icon {
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-color);
+    border-radius: var(--border-radius-base);
+    font-size: 22px;
+    flex-shrink: 0;
+  }
+
+  .quick-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .quick-title {
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 4px;
+  }
+
+  .quick-desc {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  .quick-arrow {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-placeholder);
+    transition: all 0.2s ease;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// 最近活动
+.activity-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  padding: 20px;
+  box-shadow: var(--box-shadow-card);
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--color-border-lighter);
+  position: relative;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.activity-avatar {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: 500;
+  flex-shrink: 0;
+
+  &.success { background: var(--color-success-lighter); color: var(--color-success); }
+  &.warning { background: var(--color-warning-lighter); color: var(--color-warning); }
+  &.info { background: var(--color-info-lighter); color: var(--color-info); }
+  &.danger { background: var(--color-danger-lighter); color: var(--color-danger); }
+  &.primary { background: var(--color-primary-light-6); color: var(--color-primary); }
+}
+
+.activity-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.activity-main {
+  margin-bottom: 4px;
+}
+
+.activity-user {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-right: 8px;
+}
+
+.activity-action {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+.activity-time {
+  font-size: 12px;
+  color: var(--color-text-placeholder);
+}
+
+.activity-dot {
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  opacity: 0.6;
+
+  &.success { background: var(--color-success); }
+  &.warning { background: var(--color-warning); }
+  &.info { background: var(--color-info); }
+  &.danger { background: var(--color-danger); }
+  &.primary { background: var(--color-primary); }
+}
+
+// 系统信息
+.system-section {
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  padding: 20px;
+  box-shadow: var(--box-shadow-card);
+}
+
+.system-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 24px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.system-info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--color-fill-light);
+  border-radius: var(--border-radius-base);
+
+  .info-label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+
+  .info-value {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+  }
+}
+
+.system-status {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.status-item {
+  .status-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .status-label {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+
+  .status-value {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+  }
+}
 </style>