240 lines
8.7 KiB
Vue
240 lines
8.7 KiB
Vue
<template>
|
||
<div class="admin-home">
|
||
<!-- 欢迎横幅 -->
|
||
<div class="welcome-banner">
|
||
<div class="welcome-left">
|
||
<h2 class="welcome-title">🎛️ 决策咨询网管理后台</h2>
|
||
<p class="welcome-sub">欢迎回来，{{ adminName }}，今日数据已更新</p>
|
||
</div>
|
||
<div class="welcome-right">
|
||
<a-space>
|
||
<a-tag color="red" style="font-size:13px;padding:4px 12px">超级管理员</a-tag>
|
||
<a-button size="small" @click="loadStats" :loading="loadingStats">
|
||
<template #icon><ReloadOutlined /></template>
|
||
刷新数据
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心数据统计 -->
|
||
<a-row :gutter="[16, 16]">
|
||
<a-col :xs="12" :sm="12" :md="6" v-for="stat in coreStats" :key="stat.label">
|
||
<div class="stat-block" :class="stat.color">
|
||
<div class="stat-block-header">
|
||
<span class="stat-block-icon">{{ stat.icon }}</span>
|
||
<span class="stat-block-label">{{ stat.label }}</span>
|
||
</div>
|
||
<div class="stat-block-value">
|
||
<template v-if="loadingStats">
|
||
<a-skeleton-input :active="true" size="small" style="width:60px" />
|
||
</template>
|
||
<template v-else>{{ stat.value }}</template>
|
||
</div>
|
||
<div class="stat-block-desc">{{ stat.desc }}</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<!-- 待办事项 + 快速入口 -->
|
||
<a-row :gutter="[16, 16]">
|
||
<!-- 待处理事项 -->
|
||
<a-col :xs="24" :md="12">
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">🔔 待处理事项</span>
|
||
</div>
|
||
<div class="todo-list">
|
||
<div
|
||
v-for="todo in todoItems"
|
||
:key="todo.label"
|
||
class="todo-item"
|
||
:class="{ 'todo-item-urgent': todo.urgent }"
|
||
@click="navigateTo(todo.to)"
|
||
>
|
||
<div class="todo-dot" :class="todo.dotColor"></div>
|
||
<div class="todo-content">
|
||
<span class="todo-label">{{ todo.label }}</span>
|
||
<a-tag :color="todo.tagColor">
|
||
<template v-if="loadingStats">...</template>
|
||
<template v-else>{{ todo.value }}</template>
|
||
</a-tag>
|
||
</div>
|
||
<RightOutlined class="todo-arrow" />
|
||
</div>
|
||
<div v-if="!loadingStats && todoItems.every(t => t.value === 0)" class="todo-empty">
|
||
🎉 暂无待处理事项，一切正常！
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 快速导航 -->
|
||
<a-col :xs="24" :md="12">
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">⚡ 快速入口</span>
|
||
</div>
|
||
<div class="quick-grid">
|
||
<div
|
||
v-for="item in quickLinks"
|
||
:key="item.to"
|
||
class="quick-card"
|
||
@click="navigateTo(item.to)"
|
||
>
|
||
<div class="quick-icon" :style="{ background: item.bg }">{{ item.icon }}</div>
|
||
<div class="quick-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ReloadOutlined, RightOutlined } from '@ant-design/icons-vue'
|
||
import { getUserInfo } from '@/api/layout'
|
||
import { getToken } from '@/utils/token-util'
|
||
|
||
definePageMeta({ layout: 'admin' })
|
||
useHead({ title: '管理后台首页' })
|
||
|
||
const adminName = ref('管理员')
|
||
const loadingStats = ref(false)
|
||
|
||
const coreStats = reactive([
|
||
{ icon: '📝', label: '文章总数', value: 0, desc: '全部文章', color: 'blue' },
|
||
{ icon: '👥', label: '用户总数', value: 0, desc: '注册用户', color: 'green' },
|
||
{ icon: '🎓', label: '专家总数', value: 0, desc: '认证专家', color: 'purple' },
|
||
{ icon: '💼', label: '会员总数', value: 0, desc: '企业/个人会员', color: 'orange' },
|
||
])
|
||
|
||
const todoItems = reactive([
|
||
{ label: '待审核专家', value: 0, to: '/admin/experts/review', tagColor: 'orange', dotColor: 'dot-orange', urgent: false },
|
||
{ label: '待审核会员', value: 0, to: '/admin/members/review', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false },
|
||
{ label: '待处理建言', value: 0, to: '/admin/suggestions', tagColor: 'blue', dotColor: 'dot-blue', urgent: false },
|
||
{ label: '待审核文章', value: 0, to: '/admin/articles', tagColor: 'red', dotColor: 'dot-red', urgent: false },
|
||
])
|
||
|
||
const quickLinks = [
|
||
{ to: '/admin/articles', icon: '📝', label: '文章管理', bg: '#fff7ed' },
|
||
{ to: '/admin/categories', icon: '🗂️', label: '栏目管理', bg: '#eff6ff' },
|
||
{ to: '/admin/experts', icon: '🎓', label: '专家管理', bg: '#faf5ff' },
|
||
{ to: '/admin/members', icon: '💼', label: '会员管理', bg: '#f0fdf4' },
|
||
{ to: '/admin/suggestions', icon: '💬', label: '建言管理', bg: '#fdf4ff' },
|
||
{ to: '/admin/users', icon: '👥', label: '用户管理', bg: '#f0f9ff' },
|
||
{ to: '/admin/announcements', icon: '📢', label: '公告管理', bg: '#fff1f2' },
|
||
{ to: '/admin/settings', icon: '⚙️', label: '系统设置', bg: '#f9fafb' },
|
||
]
|
||
|
||
async function loadStats() {
|
||
loadingStats.value = true
|
||
try {
|
||
// TODO: 接入实际API获取统计数据
|
||
// 暂时使用模拟数据
|
||
todoItems[0].value = 0
|
||
todoItems[1].value = 0
|
||
todoItems[2].value = 0
|
||
todoItems[3].value = 0
|
||
} catch { /* ignore */ } finally {
|
||
loadingStats.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const token = getToken()
|
||
if (!token) return
|
||
Promise.allSettled([
|
||
getUserInfo().then(me => {
|
||
adminName.value = me?.nickname?.trim() || me?.username?.trim() || '管理员'
|
||
}),
|
||
loadStats(),
|
||
])
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.admin-home {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* 欢迎横幅 */
|
||
.welcome-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: linear-gradient(135deg, #1a0f0f 0%, #3d1515 100%);
|
||
border-radius: 14px;
|
||
padding: 24px 28px;
|
||
color: #fff;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
.welcome-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 6px; }
|
||
.welcome-sub { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; }
|
||
|
||
/* 核心统计块 */
|
||
.stat-block {
|
||
padding: 18px 20px;
|
||
border-radius: 12px;
|
||
border: 2px solid transparent;
|
||
transition: all 0.2s;
|
||
}
|
||
.stat-block:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
|
||
.stat-block.blue { background: #eff6ff; border-color: #dbeafe; }
|
||
.stat-block.green { background: #f0fdf4; border-color: #bbf7d0; }
|
||
.stat-block.orange { background: #fff7ed; border-color: #fed7aa; }
|
||
.stat-block.purple { background: #faf5ff; border-color: #e9d5ff; }
|
||
|
||
.stat-block-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
|
||
.stat-block-icon { font-size: 18px; }
|
||
.stat-block-label { font-size: 13px; color: rgba(0,0,0,0.55); }
|
||
.stat-block-value { font-size: 32px; font-weight: 800; color: rgba(0,0,0,0.85); line-height: 1.1; margin-bottom: 4px; }
|
||
.stat-block-desc { font-size: 12px; color: rgba(0,0,0,0.4); }
|
||
|
||
/* Panel */
|
||
.panel { background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden; }
|
||
.panel-header { padding: 14px 18px; border-bottom: 1px solid #f5f5f5; }
|
||
.panel-title { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.85); }
|
||
|
||
/* 待办 */
|
||
.todo-list { padding: 8px 0; }
|
||
.todo-item {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 12px 18px; cursor: pointer; transition: background 0.15s;
|
||
}
|
||
.todo-item:hover { background: #f9fafb; }
|
||
.todo-item-urgent .todo-label { font-weight: 600; }
|
||
.todo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
.dot-orange { background: #f97316; }
|
||
.dot-blue { background: #3b82f6; }
|
||
.dot-cyan { background: #06b6d4; }
|
||
.dot-red { background: #ef4444; }
|
||
.todo-content { flex: 1; display: flex; align-items: center; }
|
||
.todo-label { font-size: 14px; color: rgba(0,0,0,0.75); }
|
||
.todo-arrow { font-size: 11px; color: rgba(0,0,0,0.3); }
|
||
.todo-empty { text-align: center; padding: 20px 0; color: rgba(0,0,0,0.4); font-size: 14px; }
|
||
|
||
/* 快速入口九宫格 */
|
||
.quick-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1px;
|
||
background: #f5f5f5;
|
||
}
|
||
.quick-card {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
gap: 8px; padding: 18px 12px; background: #fff;
|
||
cursor: pointer; transition: background 0.15s;
|
||
}
|
||
.quick-card:hover { background: #f9fafb; }
|
||
.quick-icon {
|
||
width: 44px; height: 44px; border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center; font-size: 22px;
|
||
}
|
||
.quick-label { font-size: 13px; color: rgba(0,0,0,0.75); font-weight: 500; }
|
||
</style>
|