zant-admin 1.0.0

package/src/views/console.vue

@@ -0,0 +1,771 @@
+<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>