xto-fronted 0.4.85 → 0.4.86

package/src/views/dashboard/index.vue

@@ -1,545 +1,283 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Progress } from '@xto/data'
+import { Card, Tag, 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 }
+  { title: '用户总数', value: 1234, icon: '👥', color: '#409eff' },
+  { title: '今日访问', value: 567, icon: '👀', color: '#67c23a' },
+  { title: '订单数量', value: 890, icon: '📦', color: '#e6a23c' },
+  { title: '销售金额', value: 123456, icon: '💰', color: '#f56c6c' }
 ])
 
 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: '钱' }
+  { 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' }
 ])
 
 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' }
+  { title: '用户管理', path: '/system/user', icon: '👤' },
+  { title: '角色管理', path: '/system/role', icon: '👥' },
+  { title: '菜单管理', path: '/system/menu', icon: '📋' },
+  { title: '系统设置', path: '/system', icon: '⚙️' }
 ])
 </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 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>
-          <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 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>
         </div>
-        <div class="stat-decoration" :style="{ background: `linear-gradient(135deg, ${stat.color}08 0%, transparent 100%)` }"></div>
-      </div>
+      </Card>
     </div>
 
     <!-- 主体内容 -->
-    <div class="main-section">
+    <div class="dashboard__main">
       <!-- 快捷入口 -->
-      <div class="quick-section">
-        <div class="section-header">
-          <h3>快捷入口</h3>
-          <span class="section-badge">4 个入口</span>
-        </div>
-        <div class="quick-grid">
+      <Card class="dashboard__quick">
+        <template #header>
+          <span class="card-title">快捷入口</span>
+        </template>
+        <div class="quick-links">
           <router-link
             v-for="link in quickLinks"
             :key="link.path"
             :to="link.path"
-            class="quick-card"
+            class="quick-link"
           >
-            <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>
+            <span class="quick-link__icon">{{ link.icon }}</span>
+            <span class="quick-link__title">{{ link.title }}</span>
           </router-link>
         </div>
-      </div>
+      </Card>
 
       <!-- 最近活动 -->
-      <div class="activity-section">
-        <div class="section-header">
-          <h3>最近活动</h3>
-          <a href="#" class="section-link">查看全部</a>
-        </div>
+      <Card class="dashboard__activity">
+        <template #header>
+          <span class="card-title">最近活动</span>
+        </template>
         <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>
+            <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>
         </div>
-      </div>
+      </Card>
     </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>
+    <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-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 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>
+        <div class="system-info__item">
+          <span class="system-info__label">内存使用</span>
+          <Progress :percentage="45" />
         </div>
       </div>
-    </div>
+    </Card>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .dashboard {
-  padding: 24px;
-  background: var(--bg-color-page);
-  min-height: 100%;
-}
+  padding: 20px;
 
-// 统计卡片
-.stats-section {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 24px;
+  &__stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+
+    @media (max-width: 1200px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
 
-  @media (max-width: 1200px) {
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__main {
+    display: grid;
     grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+
+    @media (max-width: 992px) {
+      grid-template-columns: 1fr;
+    }
   }
 
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
+  &__quick,
+  &__activity {
+    min-height: 300px;
   }
 }
 
-.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);
+.card-title {
+  font-size: 16px;
+  font-weight: 500;
+}
 
-    .stat-decoration {
-      opacity: 1;
-    }
+.stat-card {
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 15px;
   }
 
-  .stat-icon {
-    width: 52px;
-    height: 52px;
+  &__icon {
+    width: 50px;
+    height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--border-radius-large);
-    flex-shrink: 0;
-
-    span {
-      font-size: 26px;
-    }
+    font-size: 24px;
+    border-radius: var(--border-radius-base);
   }
 
-  .stat-content {
+  &__info {
     flex: 1;
-    min-width: 0;
   }
 
-  .stat-title {
+  &__title {
     font-size: 14px;
     color: var(--color-text-secondary);
-    margin-bottom: 8px;
+    margin-bottom: 5px;
   }
 
-  .stat-value {
-    font-size: 28px;
+  &__value {
+    font-size: 24px;
     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 {
+.quick-links {
   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;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
 
-    &:hover {
-      color: var(--color-primary-dark-1);
-    }
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-// 快捷入口
-.quick-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: 20px;
-  box-shadow: var(--box-shadow-card);
-}
-
-.quick-grid {
+.quick-link {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-}
-
-.quick-card {
-  display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background: var(--color-fill-light);
+  justify-content: center;
+  padding: 20px;
   border-radius: var(--border-radius-base);
+  background-color: var(--color-fill);
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: all var(--transition-duration-fast);
 
   &:hover {
-    background: var(--color-primary-light-6);
-    transform: translateX(4px);
-
-    .quick-arrow {
-      color: var(--color-primary);
-      transform: translateX(4px);
-    }
+    background-color: var(--color-primary-light-9);
+    transform: translateY(-2px);
   }
 
-  .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;
+  &__icon {
+    font-size: 28px;
+    margin-bottom: 10px;
   }
 
-  .quick-title {
-    font-size: 15px;
-    font-weight: 500;
+  &__title {
+    font-size: 14px;
     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: flex-start;
-  gap: 12px;
-  padding: 14px 0;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 15px;
   border-bottom: 1px solid var(--color-border-lighter);
-  position: relative;
 
   &:last-child {
     border-bottom: none;
+    padding-bottom: 0;
   }
-}
-
-.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); }
-}
+  &__action {
+    flex: 1;
+    font-size: 14px;
+    color: var(--color-text-regular);
+  }
 
-// 系统信息
-.system-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: 20px;
-  box-shadow: var(--box-shadow-card);
+  &__time {
+    font-size: 12px;
+    color: var(--color-text-placeholder);
+  }
 }
 
-.system-grid {
+.system-info {
   display: grid;
-  grid-template-columns: 1fr 1.5fr;
-  gap: 24px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
 
   @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 {
+  &__item {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    gap: 10px;
   }
 
-  .status-label {
+  &__label {
     font-size: 14px;
     color: var(--color-text-secondary);
+    min-width: 80px;
   }
 
-  .status-value {
+  &__value {
     font-size: 14px;
-    font-weight: 500;
     color: var(--color-text-primary);
   }
 }