完全实现首页的三大框架基本功能
This commit is contained in:
@@ -1,354 +1,11 @@
|
||||
<template>
|
||||
<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>
|
||||
@@ -153,7 +153,7 @@ const stripHtml = (html: string) => {
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"资源案例" };
|
||||
const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"案例资源" };
|
||||
const response = await fetch(`${API_BASE_URL}/articles/getarticle`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
|
||||
Reference in New Issue
Block a user