xto-fronted 0.4.72 → 0.4.74

package/src/views/dashboard/index.vue

@@ -1,283 +1,545 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Card, Tag, Progress } from '@xto/data'
+import { Progress } from '@xto/data'
 
 const stats = ref([
-  { title: '用户总数', value: 1234, icon: '👥', color: '#409eff' },
-  { title: '今日访问', value: 567, icon: '👀', color: '#67c23a' },
-  { title: '订单数量', value: 890, icon: '📦', color: '#e6a23c' },
-  { title: '销售金额', value: 123456, icon: '💰', color: '#f56c6c' }
+  { 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' },
-  { user: '李四', action: '修改了用户信息', time: '5分钟前', type: 'warning' },
-  { user: '王五', action: '创建了新订单', time: '10分钟前', type: 'info' },
-  { user: '赵六', action: '删除了测试数据', time: '30分钟前', type: 'danger' },
-  { user: '钱七', action: '更新了系统配置', time: '1小时前', type: 'primary' }
+  { 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: '👤' },
-  { title: '角色管理', path: '/system/role', icon: '👥' },
-  { title: '菜单管理', path: '/system/menu', icon: '📋' },
-  { title: '系统设置', path: '/system', icon: '⚙️' }
+  { 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="dashboard__stats">
-      <Card v-for="stat in stats" :key="stat.title" class="stat-card">
-        <div class="stat-card__content">
-          <div class="stat-card__icon" :style="{ backgroundColor: stat.color + '20' }">
-            {{ stat.icon }}
+    <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-card__info">
-            <div class="stat-card__title">{{ stat.title }}</div>
-            <div class="stat-card__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>
-      </Card>
+        <div class="stat-decoration" :style="{ background: `linear-gradient(135deg, ${stat.color}08 0%, transparent 100%)` }"></div>
+      </div>
     </div>
 
     <!-- 主体内容 -->
-    <div class="dashboard__main">
+    <div class="main-section">
       <!-- 快捷入口 -->
-      <Card class="dashboard__quick">
-        <template #header>
-          <span class="card-title">快捷入口</span>
-        </template>
-        <div class="quick-links">
+      <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-link"
+            class="quick-card"
           >
-            <span class="quick-link__icon">{{ link.icon }}</span>
-            <span class="quick-link__title">{{ link.title }}</span>
+            <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>
-      </Card>
+      </div>
 
       <!-- 最近活动 -->
-      <Card class="dashboard__activity">
-        <template #header>
-          <span class="card-title">最近活动</span>
-        </template>
+      <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">
-            <Tag :type="activity.type as any" size="small">{{ activity.user }}</Tag>
-            <span class="activity-item__action">{{ activity.action }}</span>
-            <span class="activity-item__time">{{ activity.time }}</span>
+            <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>
-      </Card>
+      </div>
     </div>
 
     <!-- 系统信息 -->
-    <Card class="dashboard__system">
-      <template #header>
-        <span class="card-title">系统信息</span>
-      </template>
-      <div class="system-info">
-        <div class="system-info__item">
-          <span class="system-info__label">系统版本</span>
-          <span class="system-info__value">v1.0.0</span>
-        </div>
-        <div class="system-info__item">
-          <span class="system-info__label">Vue 版本</span>
-          <span class="system-info__value">3.4.21</span>
-        </div>
-        <div class="system-info__item">
-          <span class="system-info__label">构建工具</span>
-          <span class="system-info__value">Vite 5</span>
-        </div>
-        <div class="system-info__item">
-          <span class="system-info__label">UI 组件库</span>
-          <span class="system-info__value">xto</span>
-        </div>
-        <div class="system-info__item">
-          <span class="system-info__label">服务器状态</span>
-          <Progress :percentage="75" status="success" />
+    <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-info__item">
-          <span class="system-info__label">内存使用</span>
-          <Progress :percentage="45" />
+        <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>
-    </Card>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .dashboard {
-  padding: 20px;
-
-  &__stats {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
-    margin-bottom: 20px;
-
-    @media (max-width: 1200px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
+  padding: 24px;
+  background: var(--bg-color-page);
+  min-height: 100%;
+}
 
-    @media (max-width: 768px) {
-      grid-template-columns: 1fr;
-    }
-  }
+// 统计卡片
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
 
-  &__main {
-    display: grid;
+  @media (max-width: 1200px) {
     grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
-    margin-bottom: 20px;
-
-    @media (max-width: 992px) {
-      grid-template-columns: 1fr;
-    }
   }
 
-  &__quick,
-  &__activity {
-    min-height: 300px;
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
   }
 }
 
-.card-title {
-  font-size: 16px;
-  font-weight: 500;
-}
-
 .stat-card {
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 15px;
+  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;
+    }
   }
 
-  &__icon {
-    width: 50px;
-    height: 50px;
+  .stat-icon {
+    width: 52px;
+    height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
-    border-radius: var(--border-radius-base);
+    border-radius: var(--border-radius-large);
+    flex-shrink: 0;
+
+    span {
+      font-size: 26px;
+    }
   }
 
-  &__info {
+  .stat-content {
     flex: 1;
+    min-width: 0;
   }
 
-  &__title {
+  .stat-title {
     font-size: 14px;
     color: var(--color-text-secondary);
-    margin-bottom: 5px;
+    margin-bottom: 8px;
   }
 
-  &__value {
-    font-size: 24px;
+  .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;
   }
 }
 
-.quick-links {
+// 主体内容
+.main-section {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 15px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin-bottom: 24px;
 
-  @media (max-width: 768px) {
-    grid-template-columns: repeat(2, 1fr);
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
   }
 }
 
-.quick-link {
+.section-header {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
-  justify-content: 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);
-  background-color: var(--color-fill);
   text-decoration: none;
-  transition: all var(--transition-duration-fast);
+  transition: all 0.2s ease;
 
   &:hover {
-    background-color: var(--color-primary-light-9);
-    transform: translateY(-2px);
+    background: var(--color-primary-light-6);
+    transform: translateX(4px);
+
+    .quick-arrow {
+      color: var(--color-primary);
+      transform: translateX(4px);
+    }
   }
 
-  &__icon {
-    font-size: 28px;
-    margin-bottom: 10px;
+  .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;
   }
 
-  &__title {
-    font-size: 14px;
+  .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;
-  gap: 15px;
 }
 
 .activity-item {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-bottom: 15px;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 0;
   border-bottom: 1px solid var(--color-border-lighter);
+  position: relative;
 
   &:last-child {
     border-bottom: none;
-    padding-bottom: 0;
   }
+}
 
-  &__action {
-    flex: 1;
-    font-size: 14px;
-    color: var(--color-text-regular);
-  }
+.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;
 
-  &__time {
-    font-size: 12px;
-    color: var(--color-text-placeholder);
-  }
+  &.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);
 }
 
-.system-info {
+.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: repeat(2, 1fr);
-  gap: 20px;
+  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;
+}
 
-  &__item {
+.status-item {
+  .status-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 10px;
+    margin-bottom: 8px;
   }
 
-  &__label {
+  .status-label {
     font-size: 14px;
     color: var(--color-text-secondary);
-    min-width: 80px;
   }
 
-  &__value {
+  .status-value {
     font-size: 14px;
+    font-weight: 500;
     color: var(--color-text-primary);
   }
 }