first commit
This commit is contained in:
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import SidebarMenu from './SidebarMenu.vue'
|
||||
import HeaderBar from './HeaderBar.vue'
|
||||
|
||||
const collapsed = ref(false)
|
||||
|
||||
function toggleCollapse() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<aside class="layout-aside" :class="{ collapsed }">
|
||||
<div class="aside-brand" :class="{ collapsed }">
|
||||
<div class="brand-icon">
|
||||
<el-icon :size="22"><ShoppingBag /></el-icon>
|
||||
</div>
|
||||
<transition name="fade-text">
|
||||
<span v-show="!collapsed" class="brand-title">纸条衣橱管理后台</span>
|
||||
</transition>
|
||||
</div>
|
||||
<SidebarMenu :collapsed="collapsed" />
|
||||
</aside>
|
||||
|
||||
<div class="layout-main">
|
||||
<HeaderBar :collapsed="collapsed" @toggle="toggleCollapse" />
|
||||
<main class="layout-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="page-fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-aside {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--zt-sidebar-bg);
|
||||
transition: width 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-aside.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.aside-brand {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.aside-brand.collapsed {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #4f6ef7, #8b5cf6);
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.fade-text-enter-active,
|
||||
.fade-text-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-text-enter-from,
|
||||
.fade-text-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.page-fade-enter-active,
|
||||
.page-fade-leave-active {
|
||||
transition:
|
||||
opacity 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
.page-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
.page-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { Expand, Fold } from '@element-plus/icons-vue'
|
||||
import { changePassword, logout } from '@/api/auth'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
defineProps<{ collapsed: boolean }>()
|
||||
const emit = defineEmits<{ toggle: [] }>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const displayName = computed(
|
||||
() => authStore.adminInfo?.nickname || authStore.adminInfo?.username || '管理员',
|
||||
)
|
||||
const roleText = computed(() => (authStore.isSuper ? '超级管理员' : '普通管理员'))
|
||||
const pageTitle = computed(() => route.meta.title ?? '')
|
||||
|
||||
/* ---------------- 修改密码 ---------------- */
|
||||
const pwdVisible = ref(false)
|
||||
const pwdFormRef = ref<FormInstance>()
|
||||
const pwdLoading = ref(false)
|
||||
|
||||
const pwdForm = reactive({
|
||||
old_password: '',
|
||||
new_password: '',
|
||||
confirm_password: '',
|
||||
})
|
||||
|
||||
const pwdRules: FormRules = {
|
||||
old_password: [
|
||||
{ required: true, message: '请输入原密码', trigger: 'blur' },
|
||||
{ min: 6, max: 64, message: '密码长度 6~64 位', trigger: 'blur' },
|
||||
],
|
||||
new_password: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 64, message: '密码长度 6~64 位', trigger: 'blur' },
|
||||
],
|
||||
confirm_password: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule, value: string, callback) => {
|
||||
if (value !== pwdForm.new_password) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
function openPwdDialog() {
|
||||
pwdForm.old_password = ''
|
||||
pwdForm.new_password = ''
|
||||
pwdForm.confirm_password = ''
|
||||
pwdVisible.value = true
|
||||
}
|
||||
|
||||
async function submitPassword() {
|
||||
const valid = await pwdFormRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
pwdLoading.value = true
|
||||
try {
|
||||
await changePassword({
|
||||
old_password: pwdForm.old_password,
|
||||
new_password: pwdForm.new_password,
|
||||
})
|
||||
ElMessage.success('密码修改成功，请重新登录')
|
||||
pwdVisible.value = false
|
||||
authStore.clearSession()
|
||||
router.replace('/login')
|
||||
} catch {
|
||||
// 错误提示已由请求层处理
|
||||
} finally {
|
||||
pwdLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- 登出 ---------------- */
|
||||
async function handleLogout() {
|
||||
try {
|
||||
await logout(authStore.refreshToken)
|
||||
} catch {
|
||||
// 登出失败不阻塞本地清理
|
||||
}
|
||||
authStore.clearSession()
|
||||
router.replace('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header-bar">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-btn" :size="20" @click="emit('toggle')">
|
||||
<Expand v-if="collapsed" />
|
||||
<Fold v-else />
|
||||
</el-icon>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>管理后台</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="pageTitle">{{ pageTitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<div class="header-admin">
|
||||
<div class="admin-avatar">
|
||||
{{ displayName.slice(0, 1).toUpperCase() }}
|
||||
</div>
|
||||
<div class="admin-meta">
|
||||
<div class="admin-name">{{ displayName }}</div>
|
||||
<div class="admin-role">{{ roleText }}</div>
|
||||
</div>
|
||||
<el-icon class="admin-caret"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="openPwdDialog">
|
||||
<el-icon><Key /></el-icon>修改密码
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="handleLogout">
|
||||
<el-icon><SwitchButton /></el-icon>退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 修改密码对话框 -->
|
||||
<el-dialog v-model="pwdVisible" title="修改密码" width="420px" :close-on-click-modal="false">
|
||||
<el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-width="88px">
|
||||
<el-form-item label="原密码" prop="old_password">
|
||||
<el-input v-model="pwdForm.old_password" type="password" show-password placeholder="请输入原密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="new_password">
|
||||
<el-input v-model="pwdForm.new_password" type="password" show-password placeholder="6~64 位新密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirm_password">
|
||||
<el-input
|
||||
v-model="pwdForm.confirm_password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="再次输入新密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="pwdVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="pwdLoading" @click="submitPassword">确认修改</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header-bar {
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef0f6;
|
||||
box-shadow: 0 1px 6px rgba(30, 36, 56, 0.04);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
cursor: pointer;
|
||||
color: #5d6685;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.header-admin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.header-admin:hover {
|
||||
background: #f4f6fb;
|
||||
}
|
||||
|
||||
.admin-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #4f6ef7, #8b5cf6);
|
||||
}
|
||||
|
||||
.admin-meta {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.admin-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1f2437;
|
||||
}
|
||||
|
||||
.admin-role {
|
||||
font-size: 11px;
|
||||
color: #9aa3c0;
|
||||
}
|
||||
|
||||
.admin-caret {
|
||||
color: #9aa3c0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
defineProps<{ collapsed: boolean }>()
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
interface MenuLeaf {
|
||||
path: string
|
||||
title: string
|
||||
icon: string
|
||||
superOnly?: boolean
|
||||
}
|
||||
|
||||
interface MenuGroup {
|
||||
groupTitle: string
|
||||
children: MenuLeaf[]
|
||||
}
|
||||
|
||||
const allGroups: MenuGroup[] = [
|
||||
{
|
||||
groupTitle: '总览',
|
||||
children: [{ path: '/dashboard', title: '仪表盘', icon: 'Odometer' }],
|
||||
},
|
||||
{
|
||||
groupTitle: '业务管理',
|
||||
children: [
|
||||
{ path: '/users', title: '用户管理', icon: 'User' },
|
||||
{ path: '/goods', title: '商品管理', icon: 'Goods' },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupTitle: '交易',
|
||||
children: [
|
||||
{ path: '/orders', title: '订单管理', icon: 'Tickets' },
|
||||
{ path: '/refunds', title: '退款审核', icon: 'RefreshLeft' },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupTitle: '内容审核',
|
||||
children: [
|
||||
{ path: '/review/outfits', title: '穿搭审核', icon: 'Collection' },
|
||||
{ path: '/review/clothes', title: '衣物管理', icon: 'ShoppingBag' },
|
||||
{ path: '/review/shares', title: '衣柜分享', icon: 'Share' },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupTitle: '运营',
|
||||
children: [{ path: '/notifications', title: '通知推送', icon: 'Bell' }],
|
||||
},
|
||||
{
|
||||
groupTitle: '系统',
|
||||
children: [{ path: '/admins', title: '管理员管理', icon: 'Setting', superOnly: true }],
|
||||
},
|
||||
]
|
||||
|
||||
/** 按角色过滤超管专属菜单 */
|
||||
const groups = computed(() =>
|
||||
allGroups
|
||||
.map((g) => ({
|
||||
...g,
|
||||
children: g.children.filter((c) => !c.superOnly || authStore.isSuper),
|
||||
}))
|
||||
.filter((g) => g.children.length > 0),
|
||||
)
|
||||
|
||||
const activePath = computed(() => route.path)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar class="sidebar-scroll">
|
||||
<el-menu
|
||||
:default-active="activePath"
|
||||
:collapse="collapsed"
|
||||
:collapse-transition="false"
|
||||
router
|
||||
class="sidebar-menu"
|
||||
unique-opened
|
||||
>
|
||||
<template v-for="group in groups" :key="group.groupTitle">
|
||||
<div v-show="!collapsed" class="menu-group-title">{{ group.groupTitle }}</div>
|
||||
<div v-show="collapsed" class="menu-group-divider"></div>
|
||||
<el-menu-item v-for="item in group.children" :key="item.path" :index="item.path">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<template #title>{{ item.title }}</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.sidebar-menu:not(.el-menu--collapse) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-group-title {
|
||||
padding: 16px 12px 6px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
color: #5d6685;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu-group-divider {
|
||||
height: 1px;
|
||||
margin: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item) {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 8px;
|
||||
color: var(--zt-sidebar-text);
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item:hover) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-menu :deep(.el-menu-item.is-active) {
|
||||
background: linear-gradient(90deg, rgba(79, 110, 247, 0.9), rgba(139, 92, 246, 0.85));
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(79, 110, 247, 0.35);
|
||||
}
|
||||
|
||||
.sidebar-menu.el-menu--collapse :deep(.el-menu-item) {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user