feat: rebuild admin shell from reference
This commit is contained in:
Codex
@@ -1,184 +1,126 @@
|
||||
<template>
|
||||
<el-container class="main-layout">
|
||||
<el-aside :width="isCollapse ? '72px' : '220px'" class="sidebar">
|
||||
<div class="brand" :class="{ compact: isCollapse }">
|
||||
<img class="brand-mark" src="/brand/logo-mark.png" alt="" />
|
||||
<div v-if="!isCollapse" class="brand-copy">
|
||||
<div class="admin-scene" :class="{ 'sidebar-collapsed': isCollapse }">
|
||||
<header class="scene-header" aria-label="善缘丹阳公益服务品牌信息">
|
||||
<div class="scene-brand">
|
||||
<img src="/brand/logo-mark.png" alt="善缘丹阳" />
|
||||
<div class="scene-brand-copy">
|
||||
<strong>善缘丹阳</strong>
|
||||
<span>公益婚恋运营平台</span>
|
||||
<span>公益婚恋服务平台</span>
|
||||
</div>
|
||||
<div class="scene-title">
|
||||
<h1>管理端（运营后台）</h1>
|
||||
<p>用专业的服务，帮助更多人遇见对的人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scene-benefits" aria-label="平台服务原则">
|
||||
<span><el-icon><StarFilled /></el-icon><b>公益为本</b><small>不以营利为目的</small></span>
|
||||
<span><el-icon><Lock /></el-icon><b>真实可靠</b><small>严格审核 多重保障</small></span>
|
||||
<span><el-icon><LocationFilled /></el-icon><b>本地服务</b><small>深耕丹阳 服务家乡</small></span>
|
||||
<span><el-icon><Opportunity /></el-icon><b>成就幸福</b><small>让爱在丹阳生根发芽</small></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<el-scrollbar class="menu-scroll">
|
||||
<nav aria-label="管理后台主导航">
|
||||
<el-menu :default-active="activeMenu" :collapse="isCollapse" :router="true" class="sidebar-menu">
|
||||
<el-menu-item index="/dashboard">
|
||||
<el-icon><DataBoard /></el-icon>
|
||||
<template #title>工作台</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item-group v-if="showGroup(['review.view', 'user.view'])" title="用户与资料审核">
|
||||
<el-menu-item v-if="hasPerm('review.view')" index="/review">
|
||||
<el-icon><DocumentChecked /></el-icon>
|
||||
<template #title>资料审核</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('user.view')" index="/users">
|
||||
<el-icon><User /></el-icon>
|
||||
<template #title>用户管理</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item-group v-if="hasPerm('activity.review_registration')" title="匹配与活动服务">
|
||||
<el-menu-item index="/activities/interests">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<template #title>活动与互选</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item-group
|
||||
v-if="showGroup(['counseling.service.view', 'referral.manage'])"
|
||||
title="公益咨询与转介"
|
||||
>
|
||||
<el-menu-item v-if="hasPerm('counseling.service.view')" index="/counseling">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<template #title>婚恋咨询</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('referral.manage')" index="/referral">
|
||||
<el-icon><Connection /></el-icon>
|
||||
<template #title>服务转介</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item-group
|
||||
v-if="showGroup(['service_location.view', 'service_appointment.view', 'service_program.manage'])"
|
||||
title="服务站、预约与专项服务"
|
||||
>
|
||||
<el-menu-item v-if="hasPerm('service_location.view')" index="/service-station">
|
||||
<el-icon><Location /></el-icon>
|
||||
<template #title>善缘服务站</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('service_appointment.view')" index="/service-appointment">
|
||||
<el-icon><Memo /></el-icon>
|
||||
<template #title>服务预约</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('service_program.manage')" index="/service-program">
|
||||
<el-icon><Service /></el-icon>
|
||||
<template #title>专项公益服务</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item-group v-if="showGroup(['banner.view', 'content.view'])" title="Banner 与内容运营">
|
||||
<el-menu-item v-if="hasPerm('banner.view')" index="/banner">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<template #title>首页 Banner</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('content.view')" index="/content">
|
||||
<el-icon><Reading /></el-icon>
|
||||
<template #title>课堂与反诈内容</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item-group
|
||||
v-if="showGroup(['risk.report.view', 'risk.report.process', 'user.view'])"
|
||||
title="举报、申诉与审计"
|
||||
>
|
||||
<el-menu-item v-if="hasPerm('risk.report.view')" index="/risk/reports">
|
||||
<el-icon><Warning /></el-icon>
|
||||
<template #title>举报中心</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('risk.report.process')" index="/appeals">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
<template #title>申诉管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('user.view')" index="/audit">
|
||||
<el-icon><Document /></el-icon>
|
||||
<template #title>操作日志</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item-group
|
||||
v-if="showGroup(['organization.manage', 'permission.manage'])"
|
||||
title="组织、人员与权限"
|
||||
>
|
||||
<el-menu-item v-if="hasPerm('organization.manage')" index="/organizations">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
<template #title>组织管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item v-if="hasPerm('permission.manage')" index="/operators">
|
||||
<el-icon><Setting /></el-icon>
|
||||
<template #title>工作人员</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
<el-menu-item v-if="hasPerm('analytics.view')" index="/analytics">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
<template #title>数据统计</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</nav>
|
||||
</el-scrollbar>
|
||||
|
||||
<button
|
||||
class="collapse-control"
|
||||
type="button"
|
||||
:aria-label="isCollapse ? '展开导航' : '收起导航'"
|
||||
@click="isCollapse = !isCollapse"
|
||||
>
|
||||
<el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
|
||||
<span v-if="!isCollapse">收起导航</span>
|
||||
</button>
|
||||
</el-aside>
|
||||
|
||||
<el-container class="workspace">
|
||||
<el-header class="header">
|
||||
<div class="page-context">
|
||||
<div class="context-kicker">善缘丹阳 · 公益服务</div>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/dashboard' }">工作台</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="currentTitle !== '工作台'">{{ currentTitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<el-container class="admin-shell">
|
||||
<el-aside :width="isCollapse ? '76px' : '208px'" class="admin-sidebar">
|
||||
<div class="brand" :class="{ compact: isCollapse }">
|
||||
<img class="brand-mark" src="/brand/logo-mark.png" alt="" />
|
||||
<div v-if="!isCollapse" class="brand-copy">
|
||||
<strong>善缘丹阳</strong>
|
||||
<span>公益婚恋服务平台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-tools">
|
||||
<el-input
|
||||
v-model="globalSearch"
|
||||
class="global-search"
|
||||
clearable
|
||||
aria-label="搜索后台页面"
|
||||
placeholder="搜索用户、活动、内容…"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<template #prefix><el-icon><Search /></el-icon></template>
|
||||
</el-input>
|
||||
<button class="notification-button" type="button" aria-label="查看系统通知" @click="showNotifications">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<span class="notification-dot" aria-hidden="true"></span>
|
||||
</button>
|
||||
<el-dropdown>
|
||||
<span class="user-info">
|
||||
<el-avatar :size="36">{{ (operator?.name || '工')[0] }}</el-avatar>
|
||||
<span class="user-copy">
|
||||
<el-scrollbar class="menu-scroll">
|
||||
<nav aria-label="管理后台主导航">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:router="true"
|
||||
class="sidebar-menu"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="item in visibleNavigation"
|
||||
:key="item.label"
|
||||
:index="item.path"
|
||||
>
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<template #title>{{ item.label }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</nav>
|
||||
</el-scrollbar>
|
||||
|
||||
<div v-if="!isCollapse" class="sidebar-motto">
|
||||
<el-icon><StarFilled /></el-icon>
|
||||
<span>汇聚善意<br />成就良缘</span>
|
||||
</div>
|
||||
<button
|
||||
class="collapse-control"
|
||||
type="button"
|
||||
:aria-label="isCollapse ? '展开导航' : '收起导航'"
|
||||
@click="isCollapse = !isCollapse"
|
||||
>
|
||||
<el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
|
||||
<span v-if="!isCollapse">收起导航</span>
|
||||
</button>
|
||||
</el-aside>
|
||||
|
||||
<el-container class="workspace">
|
||||
<el-header class="admin-topbar">
|
||||
<div class="page-context">
|
||||
<button class="mobile-collapse" type="button" aria-label="切换导航" @click="isCollapse = !isCollapse">
|
||||
<el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
|
||||
</button>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/dashboard' }">工作台</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="currentTitle !== '工作台'">{{ currentTitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="header-tools">
|
||||
<el-input
|
||||
v-model="globalSearch"
|
||||
class="global-search"
|
||||
clearable
|
||||
aria-label="搜索后台页面"
|
||||
placeholder="搜索用户、活动、内容…"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<template #prefix><el-icon><Search /></el-icon></template>
|
||||
</el-input>
|
||||
<button class="notification-button" type="button" aria-label="查看系统通知" @click="showNotifications">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<span class="notification-badge" aria-hidden="true">{{ notificationCount }}</span>
|
||||
</button>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="user-info">
|
||||
<el-avatar :size="34">{{ (operator?.name || '工')[0] }}</el-avatar>
|
||||
<strong>{{ operator?.name || '工作人员' }}</strong>
|
||||
<small>运营人员</small>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item disabled>{{ currentRoleName }}</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-main class="main-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive><component :is="Component" /></keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
<el-main class="admin-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive><component :is="Component" /></keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<footer class="scene-footer">
|
||||
<strong>善缘丹阳</strong><span>公益婚恋服务平台</span>
|
||||
<small>真实 · 真诚 · 公益 · 幸福</small>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -190,52 +132,86 @@ import {
|
||||
Bell,
|
||||
Calendar,
|
||||
ChatDotRound,
|
||||
CircleCheck,
|
||||
Connection,
|
||||
DataAnalysis,
|
||||
DataBoard,
|
||||
Document,
|
||||
DocumentChecked,
|
||||
Expand,
|
||||
Fold,
|
||||
Location,
|
||||
Memo,
|
||||
OfficeBuilding,
|
||||
Promotion,
|
||||
LocationFilled,
|
||||
Lock,
|
||||
Opportunity,
|
||||
Reading,
|
||||
Search,
|
||||
Service,
|
||||
Setting,
|
||||
TrendCharts,
|
||||
StarFilled,
|
||||
User,
|
||||
UserFilled,
|
||||
Warning,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
interface NavigationItem {
|
||||
label: string
|
||||
path: string
|
||||
permissions: string[]
|
||||
icon: unknown
|
||||
}
|
||||
|
||||
const navigation: NavigationItem[] = [
|
||||
{ label: '工作台', path: '/dashboard', permissions: [], icon: DataBoard },
|
||||
{ label: '用户管理', path: '/users', permissions: ['user.view'], icon: User },
|
||||
{ label: '资料审核', path: '/review', permissions: ['review.view'], icon: DocumentChecked },
|
||||
{ label: '匹配管理', path: '/activities/interests', permissions: ['activity.review_registration'], icon: StarFilled },
|
||||
{ label: '公益红娘', path: '/referral', permissions: ['referral.manage'], icon: Connection },
|
||||
{ label: '公益咨询', path: '/counseling', permissions: ['counseling.service.view'], icon: ChatDotRound },
|
||||
{ label: '活动管理', path: '/activities/interests', permissions: ['activity.review_registration'], icon: Calendar },
|
||||
{ label: '内容管理', path: '/content', permissions: ['content.view'], icon: Reading },
|
||||
{ label: '善缘服务站', path: '/service-station', permissions: ['service_location.view'], icon: Location },
|
||||
{ label: '举报风控', path: '/risk/reports', permissions: ['risk.report.view'], icon: Warning },
|
||||
{ label: '数据统计', path: '/analytics', permissions: ['analytics.view'], icon: DataAnalysis },
|
||||
{ label: '组织人员', path: '/organizations', permissions: ['organization.manage'], icon: UserFilled },
|
||||
{ label: '系统设置', path: '/operators', permissions: ['permission.manage'], icon: Setting },
|
||||
]
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const isCollapse = ref(false)
|
||||
const globalSearch = ref('')
|
||||
const notificationCount = ref(0)
|
||||
|
||||
const activeMenu = computed(() => route.path === '/users/detail' ? '/users' : route.path)
|
||||
const activeMenu = computed(() => {
|
||||
if (route.path === '/users/detail') return '/users'
|
||||
return route.path
|
||||
})
|
||||
const currentTitle = computed(() => (route.meta?.title as string) || '页面')
|
||||
const operator = computed(() => authStore.operator)
|
||||
const permissions = computed(() => authStore.permissions || [])
|
||||
const currentRoleName = computed(() => {
|
||||
if (permissions.value.includes('permission.manage')) return '平台管理员'
|
||||
if (permissions.value.includes('counseling.service.view')) return '公益咨询人员'
|
||||
if (permissions.value.includes('service_appointment.view')) return '服务站运营人员'
|
||||
if (permissions.value.includes('review.view')) return '资料审核人员'
|
||||
return '运营人员'
|
||||
})
|
||||
const visibleNavigation = computed(() => navigation.filter((item) => item.permissions.every(hasPerm)))
|
||||
|
||||
function hasPerm(permission: string) {
|
||||
return (authStore.permissions || []).includes(permission)
|
||||
}
|
||||
|
||||
function showGroup(permissions: string[]) {
|
||||
return permissions.some(hasPerm)
|
||||
return permissions.value.includes(permission)
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
const query = globalSearch.value.trim()
|
||||
if (!query) return
|
||||
if (!query) {
|
||||
ElMessage.info('请输入要查找的页面名称')
|
||||
return
|
||||
}
|
||||
const destination = router.getRoutes().find((item) => {
|
||||
const title = String(item.meta?.title || '')
|
||||
const permissions = (item.meta?.permissions as string[] | undefined) || []
|
||||
return item.path !== '/login' && title.includes(query) && permissions.every(hasPerm)
|
||||
const required = (item.meta?.permissions as string[] | undefined) || []
|
||||
return item.path !== '/login' && title.includes(query) && required.every(hasPerm)
|
||||
})
|
||||
if (!destination) {
|
||||
ElMessage.info('没有找到可访问的相关页面')
|
||||
@@ -246,7 +222,7 @@ function handleSearch() {
|
||||
}
|
||||
|
||||
function showNotifications() {
|
||||
ElMessage.info('当前没有新的系统通知')
|
||||
ElMessage.info(notificationCount.value ? `您有 ${notificationCount.value} 条待处理通知` : '当前没有新的系统通知')
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
@@ -256,58 +232,165 @@ function handleLogout() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-layout {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.admin-scene {
|
||||
min-width: 1100px;
|
||||
min-height: 100vh;
|
||||
padding: 18px 34px 14px;
|
||||
overflow: hidden;
|
||||
background: #fff7f7 url('/brand/admin-danyang-backdrop.jpg') center / cover fixed no-repeat;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.scene-header {
|
||||
display: flex;
|
||||
max-width: 1840px;
|
||||
height: 124px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.scene-brand,
|
||||
.scene-benefits,
|
||||
.scene-benefits span,
|
||||
.scene-brand-copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scene-brand > img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.scene-brand-copy {
|
||||
min-width: 172px;
|
||||
margin-left: 10px;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
color: var(--admin-coral);
|
||||
}
|
||||
|
||||
.scene-brand-copy strong {
|
||||
font-size: 27px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.scene-brand-copy span {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.scene-title {
|
||||
min-width: 370px;
|
||||
margin-left: 28px;
|
||||
padding-left: 28px;
|
||||
border-left: 1px solid rgba(244, 95, 104, 0.22);
|
||||
}
|
||||
|
||||
.scene-title h1 {
|
||||
font-size: clamp(26px, 2.2vw, 38px);
|
||||
line-height: 1.1;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.scene-title p {
|
||||
margin-top: 9px;
|
||||
color: #66717a;
|
||||
}
|
||||
|
||||
.scene-benefits {
|
||||
gap: clamp(14px, 2vw, 34px);
|
||||
}
|
||||
|
||||
.scene-benefits span {
|
||||
display: grid;
|
||||
grid-template-columns: 36px auto;
|
||||
column-gap: 8px;
|
||||
color: var(--admin-coral);
|
||||
}
|
||||
|
||||
.scene-benefits .el-icon {
|
||||
grid-row: 1 / 3;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.scene-benefits b {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.scene-benefits small {
|
||||
margin-top: 2px;
|
||||
color: #7b7f86;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
width: min(1840px, 100%);
|
||||
height: calc(100vh - 174px);
|
||||
min-height: 560px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: var(--admin-shell-bg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: var(--admin-shell-radius);
|
||||
box-shadow: var(--admin-shadow);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
color: var(--admin-sidebar-text);
|
||||
background: var(--admin-sidebar-bg);
|
||||
background: linear-gradient(180deg, #202d38 0%, #192733 100%);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
height: 82px;
|
||||
padding: 17px 16px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: 92px;
|
||||
padding: 20px 18px;
|
||||
gap: 11px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.brand.compact {
|
||||
justify-content: center;
|
||||
padding: 18px 10px;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-copy strong {
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.brand-copy span {
|
||||
margin-top: 4px;
|
||||
color: var(--admin-sidebar-muted);
|
||||
font-size: 11px;
|
||||
color: #b5c0c8;
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.menu-scroll {
|
||||
@@ -315,165 +398,250 @@ function handleLogout() {
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
padding: 12px 10px;
|
||||
padding: 13px 9px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item) {
|
||||
height: 42px;
|
||||
margin: 3px 0;
|
||||
height: 41px;
|
||||
margin: 2px 0;
|
||||
color: var(--admin-sidebar-text);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item:hover) {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
background: var(--admin-sidebar-surface);
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item.is-active) {
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
background: var(--admin-primary);
|
||||
color: #fff;
|
||||
font-weight: 650;
|
||||
background: linear-gradient(135deg, #f45f68, #ee727b);
|
||||
box-shadow: 0 8px 18px rgba(244, 95, 104, 0.26);
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item-group__title) {
|
||||
padding: 18px 12px 5px !important;
|
||||
overflow: hidden;
|
||||
color: var(--admin-sidebar-muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.sidebar-menu :deep(.el-icon) {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.sidebar-motto {
|
||||
display: flex;
|
||||
margin: 8px 15px 2px;
|
||||
padding: 14px 12px;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
color: #ff969c;
|
||||
font-family: KaiTi, STKaiti, serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sidebar-motto .el-icon {
|
||||
font-size: 31px;
|
||||
}
|
||||
|
||||
.collapse-control {
|
||||
display: flex;
|
||||
height: 42px;
|
||||
margin: 2px 10px 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 52px;
|
||||
margin: 10px;
|
||||
gap: 7px;
|
||||
color: var(--admin-sidebar-muted);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.collapse-control:hover {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
.admin-topbar {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height);
|
||||
padding: 0 24px;
|
||||
background: var(--admin-header-bg);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.page-context {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.context-kicker {
|
||||
margin-bottom: 4px;
|
||||
color: var(--admin-primary);
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-bottom: 1px solid #edf0f2;
|
||||
}
|
||||
|
||||
.page-context,
|
||||
.header-tools,
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-context {
|
||||
min-width: 180px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-collapse {
|
||||
display: none;
|
||||
color: #56616a;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.header-tools {
|
||||
gap: 16px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.global-search {
|
||||
width: 260px;
|
||||
width: clamp(220px, 22vw, 320px);
|
||||
}
|
||||
|
||||
.global-search :deep(.el-input__wrapper) {
|
||||
background: #F5F6F7;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0 1px #E8EAED;
|
||||
background: #f6f7f8;
|
||||
border-radius: 9px;
|
||||
box-shadow: inset 0 0 0 1px #e8eaed;
|
||||
}
|
||||
|
||||
.notification-button {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
color: var(--color-text-secondary);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #4f5b65;
|
||||
cursor: pointer;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.notification-dot {
|
||||
.notification-button:hover {
|
||||
background: #f6f7f8;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: var(--admin-primary);
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
right: 1px;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
background: var(--admin-coral);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
gap: 9px;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-info .el-avatar {
|
||||
color: #FFFFFF;
|
||||
background: var(--admin-primary);
|
||||
color: #fff;
|
||||
background: var(--admin-coral);
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-copy strong {
|
||||
.user-info strong {
|
||||
max-width: 92px;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-copy small {
|
||||
margin-top: 2px;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
.admin-content {
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
background: var(--admin-page-bg);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.sidebar {
|
||||
width: 72px !important;
|
||||
.scene-footer {
|
||||
display: flex;
|
||||
max-width: 1840px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
color: #8d8587;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.scene-footer strong {
|
||||
color: var(--admin-coral);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.scene-footer small {
|
||||
margin-left: auto;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1450px), (max-height: 820px) {
|
||||
.admin-scene {
|
||||
padding: 12px 24px 10px;
|
||||
}
|
||||
|
||||
.scene-header {
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.scene-brand > img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.scene-brand-copy strong {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.scene-title {
|
||||
min-width: 310px;
|
||||
margin-left: 18px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.scene-title h1 {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.scene-benefits span:nth-child(-n + 2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
height: calc(100vh - 140px);
|
||||
}
|
||||
|
||||
.scene-footer {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.scene-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-collapse {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
width: 76px !important;
|
||||
}
|
||||
|
||||
.brand-copy,
|
||||
.collapse-control span,
|
||||
.sidebar-menu :deep(.el-menu-item-group__title) {
|
||||
.sidebar-motto {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -483,14 +651,26 @@ function handleLogout() {
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.header {
|
||||
padding: 0 14px;
|
||||
.admin-scene {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-context,
|
||||
.scene-header,
|
||||
.scene-footer,
|
||||
.global-search,
|
||||
.user-copy {
|
||||
.user-info strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user