zant-admin 2.0.2 → 2.0.4

package/src/views/console.vue

@@ -1,821 +1,821 @@
-<template>
-  <div class="console-page">
-    <!-- 页面标题区域 -->
-    <div class="page-header">
-      <div class="header-content">
-        <div class="header-title">
-          <h1>系统控制台</h1>
-          <p>欢迎使用系统控制台，这里可以查看系统概览和重要信息</p>
-        </div>
-        <div class="header-time">
-          <div class="time-display">{{ currentTime }}</div>
-          <div class="date-display">{{ currentDate }}</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 统计卡片区域 -->
-    <div class="stats-container">
-      <div class="stat-card" v-for="(stat, index) in statsData" :key="index">
-        <div class="stat-icon" :style="{ background: stat.gradient }">
-          <component :is="stat.icon" />
-        </div>
-        <div class="stat-content">
-          <div class="stat-value">{{ stat.value }}</div>
-          <div class="stat-label">{{ stat.label }}</div>
-          <div class="stat-trend" :class="stat.trend">
-            <component :is="stat.trendIcon" />
-            {{ stat.change }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 主要内容区域 -->
-    <div class="main-content">
-      <!-- 左侧内容 -->
-      <div class="left-content">
-        <!-- 访问量统计图表 -->
-        <div class="chart-container">
-          <div class="card-header">
-            <h3>访问量统计</h3>
-            <div class="chart-controls">
-              <a-radio-group v-model:value="chartPeriod" size="small">
-                <a-radio-button value="week">本周</a-radio-button>
-                <a-radio-button value="month">本月</a-radio-button>
-                <a-radio-button value="year">本年</a-radio-button>
-              </a-radio-group>
-            </div>
-          </div>
-          <div class="chart-wrapper" ref="visitChartRef"></div>
-        </div>
-
-        <!-- 系统信息 -->
-        <div class="system-info-container">
-          <div class="card-header">
-            <h3>系统信息</h3>
-          </div>
-          <div class="info-grid">
-            <div
-              class="info-item"
-              v-for="(info, index) in systemInfo"
-              :key="index"
-            >
-              <div class="info-label">{{ info.label }}</div>
-              <div class="info-value">{{ info.value }}</div>
-              <div class="info-progress" v-if="info.progress">
-                <div
-                  class="progress-bar"
-                  :style="{ width: info.progress + '%' }"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 右侧内容 -->
-      <div class="right-content">
-        <!-- 前端项目引用 -->
-        <div class="dependencies-container">
-          <div class="card-header">
-            <h3>前端项目引用</h3>
-          </div>
-          <div class="dependencies-list">
-            <div
-              class="dependency-item"
-              v-for="(dep, index) in dependencies"
-              :key="index"
-            >
-              <div class="dep-name">{{ dep.name }}</div>
-              <div class="dep-version">{{ dep.version }}</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 最新通知 -->
-        <div class="notifications-container">
-          <div class="card-header">
-            <h3>最新通知</h3>
-            <a-badge :count="notifications.length" />
-          </div>
-          <div class="notifications-list">
-            <div
-              class="notification-item"
-              v-for="(item, index) in notifications"
-              :key="index"
-            >
-              <div
-                class="notification-icon"
-                :style="{ backgroundColor: item.color }"
-              >
-                {{ item.icon }}
-              </div>
-              <div class="notification-content">
-                <div class="notification-title">{{ item.title }}</div>
-                <div class="notification-desc">{{ item.description }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 最近活动 -->
-        <div class="activities-container">
-          <div class="card-header">
-            <h3>最近活动</h3>
-          </div>
-          <div class="activities-list">
-            <div
-              class="activity-item"
-              v-for="(activity, index) in recentActivities"
-              :key="index"
-            >
-              <ClockCircleOutlined class="activity-icon" />
-              <div class="activity-content">{{ activity.content }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
-import * as baseEcharts from '@/utils/baseEcharts'
-import {
-  UserOutlined,
-  ShoppingCartOutlined,
-  DollarOutlined,
-  MessageOutlined,
-  ClockCircleOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-} from '@ant-design/icons-vue'
-
-// 创建图表容器引用
-const visitChartRef = ref(null)
-// 图表实例
-let visitChart = null
-
-// 图表周期选择
-const chartPeriod = ref('month')
-
-// 当前时间
-const currentTime = ref('')
-const currentDate = ref('')
-
-// 统计数据
-const stats = reactive({
-  userCount: 1256,
-  orderCount: 89,
-  revenue: '12,580',
-  messageCount: 5,
-})
-
-// 统计卡片数据
-const statsData = computed(() => [
-  {
-    label: '用户总数',
-    value: stats.userCount,
-    icon: UserOutlined,
-    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-    trend: 'up',
-    trendIcon: ArrowUpOutlined,
-    change: '12.5%',
-  },
-  {
-    label: '今日订单',
-    value: stats.orderCount,
-    icon: ShoppingCartOutlined,
-    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-    trend: 'up',
-    trendIcon: ArrowUpOutlined,
-    change: '8.2%',
-  },
-  {
-    label: '今日收入',
-    value: `¥${stats.revenue}`,
-    icon: DollarOutlined,
-    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-    trend: 'down',
-    trendIcon: ArrowDownOutlined,
-    change: '3.1%',
-  },
-  {
-    label: '未读消息',
-    value: stats.messageCount,
-    icon: MessageOutlined,
-    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
-    trend: 'up',
-    trendIcon: ArrowUpOutlined,
-    change: '2条',
-  },
-])
-
-// 系统信息
-const systemInfo = ref([
-  { label: '系统版本', value: 'v1.0.0' },
-  { label: '运行时间', value: '15天2小时' },
-  { label: '内存使用率', value: '65%', progress: 65 },
-  { label: 'CPU使用率', value: '23%', progress: 23 },
-  { label: '磁盘空间', value: '85GB/120GB', progress: 70 },
-])
-
-// 前端项目引用
-const dependencies = ref([
-  { name: 'Vue', version: 'v3.5.13' },
-  { name: 'Vue Router', version: 'v4.4.5' },
-  { name: 'Pinia', version: 'v2.2.6' },
-  { name: 'Ant Design Vue', version: 'v4.2.6' },
-  { name: 'Ant Design Icons Vue', version: 'v7.0.1' },
-  { name: 'ECharts', version: 'v6.0.0' },
-  { name: 'Day.js', version: 'v1.11.13' },
-  { name: 'Alova', version: 'v3.2.6' },
-  { name: 'File-saver', version: 'v2.0.5' },
-  { name: 'Vite', version: 'v7.0.6' },
-])
-
-// 通知列表
-const notifications = ref([
-  {
-    title: '系统维护通知',
-    description: '系统将于今晚23:00进行维护，预计耗时2小时',
-    color: '#1890ff',
-    icon: '维',
-  },
-  {
-    title: '新版本发布',
-    description: 'v1.2.0版本已发布，新增多项功能',
-    color: '#52c41a',
-    icon: '新',
-  },
-  {
-    title: '安全提醒',
-    description: '请及时修改默认密码，确保账户安全',
-    color: '#faad14',
-    icon: '安',
-  },
-])
-
-// 最近活动
-const recentActivities = ref([
-  { id: 1, content: '用户张三登录系统' },
-  { id: 2, content: '订单#20231215001创建成功' },
-  { id: 3, content: '报表数据已更新' },
-  { id: 4, content: '系统备份完成' },
-])
-
-// 更新时间函数
-const updateDateTime = () => {
-  const now = new Date()
-
-  // 更新时间
-  currentTime.value = now.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
-
-  // 更新日期
-  currentDate.value = now.toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    weekday: 'long',
-  })
-}
-
-// 初始化图表
-const initChart = () => {
-  // 使用 baseEcharts 工具初始化折线图
-  visitChart = baseEcharts.initLineChart(visitChartRef.value, '访问量')
-
-  // 根据选择的周期获取不同的数据
-  const getChartData = () => {
-    switch (chartPeriod.value) {
-      case 'week':
-        return {
-          xAxis: {
-            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-          },
-          series: [
-            {
-              name: '访问量',
-              data: [320, 450, 380, 420, 580, 620, 590],
-            },
-            {
-              name: '独立访客',
-              data: [220, 320, 280, 350, 480, 520, 490],
-            },
-          ],
-        }
-      case 'month':
-        return {
-          xAxis: {
-            data: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
-          },
-          series: [
-            {
-              name: '访问量',
-              data: Array.from(
-                { length: 30 },
-                () => Math.floor(Math.random() * 1000) + 500,
-              ),
-            },
-            {
-              name: '独立访客',
-              data: Array.from(
-                { length: 30 },
-                () => Math.floor(Math.random() * 800) + 300,
-              ),
-            },
-          ],
-        }
-      case 'year':
-        return {
-          xAxis: {
-            data: [
-              '1月',
-              '2月',
-              '3月',
-              '4月',
-              '5月',
-              '6月',
-              '7月',
-              '8月',
-              '9月',
-              '10月',
-              '11月',
-              '12月',
-            ],
-          },
-          series: [
-            {
-              name: '访问量',
-              data: [
-                820, 932, 901, 934, 1290, 1330, 1320, 1540, 1200, 1100, 1380,
-                1420,
-              ],
-            },
-            {
-              name: '独立访客',
-              data: [
-                620, 732, 701, 734, 1090, 1130, 1120, 1340, 1000, 900, 1180,
-                1220,
-              ],
-            },
-          ],
-        }
-      default:
-        return {
-          xAxis: { data: [] },
-          series: [],
-        }
-    }
-  }
-
-  // 获取数据并更新图表
-  const chartData = getChartData()
-  baseEcharts.updateLineChart({
-    chartInstance: visitChart,
-    data: chartData,
-    shouldShowSlider: chartData.xAxis.data.length > 12,
-  })
-}
-
-// 监听图表周期变化
-const handlePeriodChange = () => {
-  initChart()
-}
-
-onMounted(() => {
-  updateDateTime()
-  // 每秒更新一次时间
-  const timer = setInterval(updateDateTime, 1000)
-  initChart()
-
-  // 模拟数据更新
-  setTimeout(() => {
-    stats.orderCount = 92
-    stats.revenue = '13,200'
-  }, 3000)
-
-  // 每30秒更新一次图表数据
-  const chartTimer = setInterval(() => {
-    initChart()
-  }, 30000)
-
-  // 监听图表周期变化
-  const stopWatch = watch(chartPeriod, handlePeriodChange)
-
-  onUnmounted(() => {
-    clearInterval(timer)
-    clearInterval(chartTimer)
-    if (stopWatch) stopWatch()
-    // 销毁图表实例，释放资源
-    if (visitChart) {
-      visitChart.dispose()
-      visitChart = null
-    }
-  })
-})
-</script>
-
-<style scoped>
-.console-page {
-  background: #f5f7fa;
-  min-height: 100vh;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-    Arial, sans-serif;
-}
-
-/* 页面标题区域 */
-.page-header {
-  margin-bottom: 24px;
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-title h1 {
-  margin: 0;
-  font-size: 28px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.header-title p {
-  margin: 8px 0 0 0;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.header-time {
-  text-align: right;
-}
-
-.time-display {
-  font-size: 24px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.date-display {
-  font-size: 14px;
-  color: #6b7280;
-  margin-top: 4px;
-}
-
-/* 统计卡片区域 */
-.stats-container {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 24px;
-}
-
-.stat-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  display: flex;
-  align-items: center;
-  transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-.stat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-.stat-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  color: white;
-  margin-right: 16px;
-}
-
-.stat-content {
-  flex: 1;
-}
-
-.stat-value {
-  font-size: 28px;
-  font-weight: 600;
-  color: #1f2937;
-  line-height: 1;
-}
-
-.stat-label {
-  margin-top: 4px;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.stat-trend {
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.stat-trend.up {
-  color: #10b981;
-}
-
-.stat-trend.down {
-  color: #ef4444;
-}
-
-.stat-trend svg {
-  margin-right: 4px;
-}
-
-/* 主要内容区域 */
-.main-content {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 24px;
-}
-
-/* 卡片标题样式 */
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-/* 左侧内容 */
-.left-content {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-/* 图表容器 */
-.chart-container {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.chart-wrapper {
-  height: 300px;
-  width: 100%;
-}
-
-/* 系统信息容器 */
-.system-info-container {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-
-.info-item {
-  padding: 12px;
-  border-radius: 8px;
-  background: #f9fafb;
-}
-
-.info-label {
-  font-size: 12px;
-  color: #6b7280;
-  margin-bottom: 4px;
-}
-
-.info-value {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1f2937;
-  margin-bottom: 8px;
-}
-
-.info-progress {
-  height: 4px;
-  background: #e5e7eb;
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
-  border-radius: 2px;
-  transition: width 1s ease;
-}
-
-/* 右侧内容 */
-.right-content {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-/* 依赖信息容器 */
-.dependencies-container {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.dependencies-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.dependency-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  border-radius: 6px;
-  background: #f9fafb;
-  transition: background 0.2s ease;
-}
-
-.dependency-item:hover {
-  background: #f3f4f6;
-}
-
-.dep-name {
-  font-size: 14px;
-  color: #4b5563;
-}
-
-.dep-version {
-  font-size: 12px;
-  color: #6b7280;
-  background: #e5e7eb;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-/* 通知容器 */
-.notifications-container {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.notifications-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.notification-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 12px;
-  border-radius: 8px;
-  background: #f9fafb;
-  transition: background 0.2s ease;
-}
-
-.notification-item:hover {
-  background: #f3f4f6;
-}
-
-.notification-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 14px;
-  margin-right: 12px;
-  flex-shrink: 0;
-}
-
-.notification-content {
-  flex: 1;
-}
-
-.notification-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-  margin-bottom: 4px;
-}
-
-.notification-desc {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-/* 活动容器 */
-.activities-container {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.activities-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.activity-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.activity-item:last-child {
-  border-bottom: none;
-}
-
-.activity-icon {
-  color: #6b7280;
-  margin-right: 12px;
-  font-size: 14px;
-}
-
-.activity-content {
-  font-size: 14px;
-  color: #4b5563;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .main-content {
-    grid-template-columns: 1fr;
-  }
-
-  .stats-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .console-page {
-    padding: 16px;
-  }
-
-  .header-content {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .header-time {
-    text-align: left;
-    margin-top: 12px;
-  }
-
-  .stats-container {
-    grid-template-columns: 1fr;
-  }
-
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .dependencies-list {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+<template>
+  <div class="console-page">
+    <!-- 页面标题区域 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-title">
+          <h1>系统控制台</h1>
+          <p>欢迎使用系统控制台，这里可以查看系统概览和重要信息</p>
+        </div>
+        <div class="header-time">
+          <div class="time-display">{{ currentTime }}</div>
+          <div class="date-display">{{ currentDate }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 统计卡片区域 -->
+    <div class="stats-container">
+      <div class="stat-card" v-for="(stat, index) in statsData" :key="index">
+        <div class="stat-icon" :style="{ background: stat.gradient }">
+          <component :is="stat.icon" />
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+          <div class="stat-trend" :class="stat.trend">
+            <component :is="stat.trendIcon" />
+            {{ stat.change }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 左侧内容 -->
+      <div class="left-content">
+        <!-- 访问量统计图表 -->
+        <div class="chart-container">
+          <div class="card-header">
+            <h3>访问量统计</h3>
+            <div class="chart-controls">
+              <a-radio-group v-model:value="chartPeriod" size="small">
+                <a-radio-button value="week">本周</a-radio-button>
+                <a-radio-button value="month">本月</a-radio-button>
+                <a-radio-button value="year">本年</a-radio-button>
+              </a-radio-group>
+            </div>
+          </div>
+          <div class="chart-wrapper" ref="visitChartRef"></div>
+        </div>
+
+        <!-- 系统信息 -->
+        <div class="system-info-container">
+          <div class="card-header">
+            <h3>系统信息</h3>
+          </div>
+          <div class="info-grid">
+            <div
+              class="info-item"
+              v-for="(info, index) in systemInfo"
+              :key="index"
+            >
+              <div class="info-label">{{ info.label }}</div>
+              <div class="info-value">{{ info.value }}</div>
+              <div class="info-progress" v-if="info.progress">
+                <div
+                  class="progress-bar"
+                  :style="{ width: info.progress + '%' }"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧内容 -->
+      <div class="right-content">
+        <!-- 前端项目引用 -->
+        <div class="dependencies-container">
+          <div class="card-header">
+            <h3>前端项目引用</h3>
+          </div>
+          <div class="dependencies-list">
+            <div
+              class="dependency-item"
+              v-for="(dep, index) in dependencies"
+              :key="index"
+            >
+              <div class="dep-name">{{ dep.name }}</div>
+              <div class="dep-version">{{ dep.version }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 最新通知 -->
+        <div class="notifications-container">
+          <div class="card-header">
+            <h3>最新通知</h3>
+            <a-badge :count="notifications.length" />
+          </div>
+          <div class="notifications-list">
+            <div
+              class="notification-item"
+              v-for="(item, index) in notifications"
+              :key="index"
+            >
+              <div
+                class="notification-icon"
+                :style="{ backgroundColor: item.color }"
+              >
+                {{ item.icon }}
+              </div>
+              <div class="notification-content">
+                <div class="notification-title">{{ item.title }}</div>
+                <div class="notification-desc">{{ item.description }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 最近活动 -->
+        <div class="activities-container">
+          <div class="card-header">
+            <h3>最近活动</h3>
+          </div>
+          <div class="activities-list">
+            <div
+              class="activity-item"
+              v-for="(activity, index) in recentActivities"
+              :key="index"
+            >
+              <ClockCircleOutlined class="activity-icon" />
+              <div class="activity-content">{{ activity.content }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
+import * as baseEcharts from '@/utils/baseEcharts'
+import {
+  UserOutlined,
+  ShoppingCartOutlined,
+  DollarOutlined,
+  MessageOutlined,
+  ClockCircleOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+} from '@ant-design/icons-vue'
+
+// 创建图表容器引用
+const visitChartRef = ref(null)
+// 图表实例
+let visitChart = null
+
+// 图表周期选择
+const chartPeriod = ref('month')
+
+// 当前时间
+const currentTime = ref('')
+const currentDate = ref('')
+
+// 统计数据
+const stats = reactive({
+  userCount: 1256,
+  orderCount: 89,
+  revenue: '12,580',
+  messageCount: 5,
+})
+
+// 统计卡片数据
+const statsData = computed(() => [
+  {
+    label: '用户总数',
+    value: stats.userCount,
+    icon: UserOutlined,
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    trend: 'up',
+    trendIcon: ArrowUpOutlined,
+    change: '12.5%',
+  },
+  {
+    label: '今日订单',
+    value: stats.orderCount,
+    icon: ShoppingCartOutlined,
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    trend: 'up',
+    trendIcon: ArrowUpOutlined,
+    change: '8.2%',
+  },
+  {
+    label: '今日收入',
+    value: `¥${stats.revenue}`,
+    icon: DollarOutlined,
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    trend: 'down',
+    trendIcon: ArrowDownOutlined,
+    change: '3.1%',
+  },
+  {
+    label: '未读消息',
+    value: stats.messageCount,
+    icon: MessageOutlined,
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+    trend: 'up',
+    trendIcon: ArrowUpOutlined,
+    change: '2条',
+  },
+])
+
+// 系统信息
+const systemInfo = ref([
+  { label: '系统版本', value: 'v1.0.0' },
+  { label: '运行时间', value: '15天2小时' },
+  { label: '内存使用率', value: '65%', progress: 65 },
+  { label: 'CPU使用率', value: '23%', progress: 23 },
+  { label: '磁盘空间', value: '85GB/120GB', progress: 70 },
+])
+
+// 前端项目引用
+const dependencies = ref([
+  { name: 'Vue', version: 'v3.5.13' },
+  { name: 'Vue Router', version: 'v4.4.5' },
+  { name: 'Pinia', version: 'v2.2.6' },
+  { name: 'Ant Design Vue', version: 'v4.2.6' },
+  { name: 'Ant Design Icons Vue', version: 'v7.0.1' },
+  { name: 'ECharts', version: 'v6.0.0' },
+  { name: 'Day.js', version: 'v1.11.13' },
+  { name: 'Alova', version: 'v3.2.6' },
+  { name: 'File-saver', version: 'v2.0.5' },
+  { name: 'Vite', version: 'v7.0.6' },
+])
+
+// 通知列表
+const notifications = ref([
+  {
+    title: '系统维护通知',
+    description: '系统将于今晚23:00进行维护，预计耗时2小时',
+    color: '#1890ff',
+    icon: '维',
+  },
+  {
+    title: '新版本发布',
+    description: 'v1.2.0版本已发布，新增多项功能',
+    color: '#52c41a',
+    icon: '新',
+  },
+  {
+    title: '安全提醒',
+    description: '请及时修改默认密码，确保账户安全',
+    color: '#faad14',
+    icon: '安',
+  },
+])
+
+// 最近活动
+const recentActivities = ref([
+  { id: 1, content: '用户张三登录系统' },
+  { id: 2, content: '订单#20231215001创建成功' },
+  { id: 3, content: '报表数据已更新' },
+  { id: 4, content: '系统备份完成' },
+])
+
+// 更新时间函数
+const updateDateTime = () => {
+  const now = new Date()
+
+  // 更新时间
+  currentTime.value = now.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+
+  // 更新日期
+  currentDate.value = now.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'long',
+  })
+}
+
+// 初始化图表
+const initChart = () => {
+  // 使用 baseEcharts 工具初始化折线图
+  visitChart = baseEcharts.initLineChart(visitChartRef.value, '访问量')
+
+  // 根据选择的周期获取不同的数据
+  const getChartData = () => {
+    switch (chartPeriod.value) {
+      case 'week':
+        return {
+          xAxis: {
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+          },
+          series: [
+            {
+              name: '访问量',
+              data: [320, 450, 380, 420, 580, 620, 590],
+            },
+            {
+              name: '独立访客',
+              data: [220, 320, 280, 350, 480, 520, 490],
+            },
+          ],
+        }
+      case 'month':
+        return {
+          xAxis: {
+            data: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
+          },
+          series: [
+            {
+              name: '访问量',
+              data: Array.from(
+                { length: 30 },
+                () => Math.floor(Math.random() * 1000) + 500,
+              ),
+            },
+            {
+              name: '独立访客',
+              data: Array.from(
+                { length: 30 },
+                () => Math.floor(Math.random() * 800) + 300,
+              ),
+            },
+          ],
+        }
+      case 'year':
+        return {
+          xAxis: {
+            data: [
+              '1月',
+              '2月',
+              '3月',
+              '4月',
+              '5月',
+              '6月',
+              '7月',
+              '8月',
+              '9月',
+              '10月',
+              '11月',
+              '12月',
+            ],
+          },
+          series: [
+            {
+              name: '访问量',
+              data: [
+                820, 932, 901, 934, 1290, 1330, 1320, 1540, 1200, 1100, 1380,
+                1420,
+              ],
+            },
+            {
+              name: '独立访客',
+              data: [
+                620, 732, 701, 734, 1090, 1130, 1120, 1340, 1000, 900, 1180,
+                1220,
+              ],
+            },
+          ],
+        }
+      default:
+        return {
+          xAxis: { data: [] },
+          series: [],
+        }
+    }
+  }
+
+  // 获取数据并更新图表
+  const chartData = getChartData()
+  baseEcharts.updateLineChart({
+    chartInstance: visitChart,
+    data: chartData,
+    shouldShowSlider: chartData.xAxis.data.length > 12,
+  })
+}
+
+// 监听图表周期变化
+const handlePeriodChange = () => {
+  initChart()
+}
+
+onMounted(() => {
+  updateDateTime()
+  // 每秒更新一次时间
+  const timer = setInterval(updateDateTime, 1000)
+  initChart()
+
+  // 模拟数据更新
+  setTimeout(() => {
+    stats.orderCount = 92
+    stats.revenue = '13,200'
+  }, 3000)
+
+  // 每30秒更新一次图表数据
+  const chartTimer = setInterval(() => {
+    initChart()
+  }, 30000)
+
+  // 监听图表周期变化
+  const stopWatch = watch(chartPeriod, handlePeriodChange)
+
+  onUnmounted(() => {
+    clearInterval(timer)
+    clearInterval(chartTimer)
+    if (stopWatch) stopWatch()
+    // 销毁图表实例，释放资源
+    if (visitChart) {
+      visitChart.dispose()
+      visitChart = null
+    }
+  })
+})
+</script>
+
+<style scoped>
+.console-page {
+  background: #f5f7fa;
+  min-height: 100vh;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+}
+
+/* 页面标题区域 */
+.page-header {
+  margin-bottom: 24px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-title h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.header-title p {
+  margin: 8px 0 0 0;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.header-time {
+  text-align: right;
+}
+
+.time-display {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.date-display {
+  font-size: 14px;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+/* 统计卡片区域 */
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.stat-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: white;
+  margin-right: 16px;
+}
+
+.stat-content {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1f2937;
+  line-height: 1;
+}
+
+.stat-label {
+  margin-top: 4px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.stat-trend {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.stat-trend.up {
+  color: #10b981;
+}
+
+.stat-trend.down {
+  color: #ef4444;
+}
+
+.stat-trend svg {
+  margin-right: 4px;
+}
+
+/* 主要内容区域 */
+.main-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+}
+
+/* 卡片标题样式 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+/* 左侧内容 */
+.left-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* 图表容器 */
+.chart-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.chart-wrapper {
+  height: 300px;
+  width: 100%;
+}
+
+/* 系统信息容器 */
+.system-info-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.info-item {
+  padding: 12px;
+  border-radius: 8px;
+  background: #f9fafb;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #6b7280;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 8px;
+}
+
+.info-progress {
+  height: 4px;
+  background: #e5e7eb;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
+  border-radius: 2px;
+  transition: width 1s ease;
+}
+
+/* 右侧内容 */
+.right-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* 依赖信息容器 */
+.dependencies-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.dependencies-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.dependency-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: #f9fafb;
+  transition: background 0.2s ease;
+}
+
+.dependency-item:hover {
+  background: #f3f4f6;
+}
+
+.dep-name {
+  font-size: 14px;
+  color: #4b5563;
+}
+
+.dep-version {
+  font-size: 12px;
+  color: #6b7280;
+  background: #e5e7eb;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* 通知容器 */
+.notifications-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.notifications-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.notification-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f9fafb;
+  transition: background 0.2s ease;
+}
+
+.notification-item:hover {
+  background: #f3f4f6;
+}
+
+.notification-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 14px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.notification-content {
+  flex: 1;
+}
+
+.notification-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  margin-bottom: 4px;
+}
+
+.notification-desc {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+/* 活动容器 */
+.activities-container {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.activities-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-icon {
+  color: #6b7280;
+  margin-right: 12px;
+  font-size: 14px;
+}
+
+.activity-content {
+  font-size: 14px;
+  color: #4b5563;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .console-page {
+    padding: 16px;
+  }
+
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .header-time {
+    text-align: left;
+    margin-top: 12px;
+  }
+
+  .stats-container {
+    grid-template-columns: 1fr;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dependencies-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>