From 0fac41dfaebb566eead2acac21884071db88f723 Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Sun, 5 Oct 2025 02:14:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9home=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 management/src/views/HomeView.vue | 352 +++++++++++++++++++++++++++++-
 1 file changed, 351 insertions(+), 1 deletion(-)

diff --git a/management/src/views/HomeView.vue b/management/src/views/HomeView.vue
index 0e9540f4..a02c8b0e 100644
--- a/management/src/views/HomeView.vue
+++ b/management/src/views/HomeView.vue
@@ -1,4 +1,354 @@
 <template>
-123
+  <div class="dashboard">
+    <!-- 顶部导航 -->
+    <el-header class="header">
+      <div class="logo">Admin Dashboard</div>
+      <div class="user-info">
+        <el-avatar src="https://picsum.photos/200/200?random=100" />
+        <span class="username">管理员</span>
+        <el-dropdown>
+          <el-button type="text">
+            <el-icon><Setting /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>个人中心</el-dropdown-item>
+              <el-dropdown-item>退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-header>
 
+    <!-- 数据概览卡片 -->
+    <el-row :gutter="20" class="overview-cards">
+      <el-col :span="6">
+        <el-card class="info-card" hoverable>
+          <div class="card-content">
+            <div class="card-value">2.4k</div>
+            <div class="card-label">总访问量</div>
+            <div class="card-trend">
+              <el-icon color="#27AE60"><ArrowUp /></el-icon>
+              <span>12.5%</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="info-card" hoverable>
+          <div class="card-content">
+            <div class="card-value">568</div>
+            <div class="card-label">新增用户</div>
+            <div class="card-trend">
+              <el-icon color="#27AE60"><ArrowUp /></el-icon>
+              <span>8.3%</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="info-card" hoverable>
+          <div class="card-content">
+            <div class="card-value">32%</div>
+            <div class="card-label">转化率</div>
+            <div class="card-trend">
+              <el-icon color="#E74C3C"><ArrowDown /></el-icon>
+              <span>2.1%</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="info-card" hoverable>
+          <div class="card-content">
+            <div class="card-value">¥12.8k</div>
+            <div class="card-label">总收入</div>
+            <div class="card-trend">
+              <el-icon color="#27AE60"><ArrowUp /></el-icon>
+              <span>15.7%</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="20" class="charts-section">
+      <el-col :span="16">
+        <el-card class="chart-card" hoverable>
+          <div class="card-header">流量趋势</div>
+          <div ref="lineChart" class="chart-container" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="chart-card" hoverable>
+          <div class="card-header">用户分布</div>
+          <div ref="pieChart" class="chart-container" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 快捷操作与最近活动 -->
+    <el-row :gutter="20" class="actions-section">
+      <el-col :span="8">
+        <el-card class="action-card" hoverable>
+          <div class="card-header">快捷操作</div>
+          <div class="actions-list">
+            <el-button type="primary" icon="Plus" class="action-btn">
+              新建内容
+            </el-button>
+            <el-button type="success" icon="Upload" class="action-btn">
+              数据导入
+            </el-button>
+            <el-button type="info" icon="Download" class="action-btn">
+              数据导出
+            </el-button>
+            <el-button type="warning" icon="Setting" class="action-btn">
+              系统设置
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card class="activity-card" hoverable>
+          <div class="card-header">最近活动</div>
+          <el-timeline>
+            <el-timeline-item
+              v-for="(item, index) in activities"
+              :key="index"
+              :timestamp="item.time"
+              placement="top"
+            >
+              <el-card>
+                <h4>{{ item.title }}</h4>
+                <p>{{ item.desc }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import {
+  ArrowUp,
+  ArrowDown,
+  Setting,
+  Plus,
+  Upload,
+  Download,
+} from '@element-plus/icons-vue';
+
+// 模拟最近活动数据
+const activities = ref([
+  {
+    time: '2023-10-01 10:30',
+    title: '系统版本更新',
+    desc: '新增数据导出功能，优化图表加载速度',
+  },
+  {
+    time: '2023-09-28 16:45',
+    title: '用户量突破500',
+    desc: '本月新增用户数达到历史新高，环比增长12.5%',
+  },
+  {
+    time: '2023-09-20 09:15',
+    title: '营销活动上线',
+    desc: '开启“新用户注册送积分”活动，转化率提升8%',
+  },
+]);
+
+// 初始化折线图（流量趋势）
+const lineChart = ref(null);
+const initLineChart = () => {
+  const chart = echarts.init(lineChart.value as unknown as HTMLElement);
+  chart.setOption({
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07'],
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        data: [120, 132, 101, 134, 90, 230, 210],
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#409EFF' },
+      },
+    ],
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  });
+};
+
+// 初始化饼图（用户分布）
+const pieChart = ref(null);
+const initPieChart = () => {
+  if (pieChart.value) {
+    const chart = echarts.init(pieChart.value as HTMLElement);
+    chart.setOption({
+      tooltip: { trigger: 'item' },
+      series: [
+        {
+          type: 'pie',
+          radius: ['40%', '70%'],
+          data: [
+            { value: 35, name: 'Web端' },
+            { value: 25, name: '移动端' },
+            { value: 20, name: '小程序' },
+            { value: 20, name: '其他' },
+          ],
+          itemStyle: {
+            borderRadius: 10,
+            color: (params: any) => {
+              const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
+              return colors[params.dataIndex];
+            },
+          },
+        },
+      ],
+    });
+  }
+};
+
+// 页面挂载后初始化图表
+onMounted(() => {
+  initLineChart();
+  initPieChart();
+});
+</script>
+
+<style scoped>
+.dashboard {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部导航 */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+  color: #409eff;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.username {
+  font-size: 14px;
+}
+
+/* 数据概览卡片 */
+.overview-cards {
+  margin: 20px;
+}
+
+.info-card {
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-content {
+  text-align: center;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.card-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.card-trend {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+/* 图表区域 */
+.charts-section {
+  margin: 0 20px 20px;
+}
+
+.chart-card {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.chart-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+/* 快捷操作与活动 */
+.actions-section {
+  margin: 0 20px 20px;
+}
+
+.action-card,
+.activity-card {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.actions-list {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px;
+}
+
+.action-btn {
+  width: 120px;
+}
+
+.el-timeline {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.el-timeline-item__content {
+  padding-top: 5px !important;
+}
+</style>
\ No newline at end of file