fix:顶栏改为全宽单行（系统名+用户信息），材料分类归入配置项子菜单
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
e378bb9e1c
commit
d3ceaded07
|
|
@ -1,38 +1,39 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<div class="logo">
|
||||
<div class="logo-title">房地产新材料选材管理数据系统</div>
|
||||
<div class="logo-sub">管理系统</div>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="active"
|
||||
class="menu"
|
||||
router
|
||||
>
|
||||
<el-menu-item v-if="isAdmin" index="/users">用户管理</el-menu-item>
|
||||
<el-menu-item index="/factories">供应商库</el-menu-item>
|
||||
<el-menu-item v-if="isAdmin" index="/dictionary">材料分类管理</el-menu-item>
|
||||
<el-menu-item index="/materials">材料管理</el-menu-item>
|
||||
<el-menu-item v-if="isAdmin" index="/screen/overview">数据大屏</el-menu-item>
|
||||
</el-menu>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
<div class="breadcrumb">{{ title }}</div>
|
||||
<div class="user">
|
||||
<div class="user-info">
|
||||
<div class="name">{{ user?.username || '用户' }}</div>
|
||||
<div class="role">{{ isAdmin ? '管理员' : '普通账号' }}</div>
|
||||
</div>
|
||||
<el-button size="small" @click="openPassword">修改密码</el-button>
|
||||
<el-button size="small" @click="onLogout">退出</el-button>
|
||||
<header class="topbar">
|
||||
<div class="logo-title">房地产新材料选材管理数据系统</div>
|
||||
<div class="user">
|
||||
<div class="user-info">
|
||||
<div class="name">{{ user?.username || '用户' }}</div>
|
||||
<div class="role">{{ isAdmin ? '管理员' : '普通账号' }}</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="content">
|
||||
<router-view />
|
||||
</section>
|
||||
</main>
|
||||
<el-button size="small" @click="openPassword">修改密码</el-button>
|
||||
<el-button size="small" @click="onLogout">退出</el-button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="body">
|
||||
<aside class="sidebar">
|
||||
<el-menu
|
||||
:default-active="active"
|
||||
class="menu"
|
||||
router
|
||||
>
|
||||
<el-menu-item v-if="isAdmin" index="/users">用户管理</el-menu-item>
|
||||
<el-menu-item index="/factories">供应商库</el-menu-item>
|
||||
<el-menu-item index="/materials">材料管理</el-menu-item>
|
||||
<el-menu-item v-if="isAdmin" index="/screen/overview">数据大屏</el-menu-item>
|
||||
<el-sub-menu v-if="isAdmin" index="config">
|
||||
<template #title>配置项</template>
|
||||
<el-menu-item index="/dictionary">材料分类</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<section class="content">
|
||||
<router-view />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="passwordVisible" title="修改密码" width="420px" class="dialog-scroll">
|
||||
|
|
@ -66,13 +67,6 @@ const router = useRouter()
|
|||
const { state, isAdmin, clearAuth } = useAuth()
|
||||
|
||||
const active = computed(() => route.path)
|
||||
const titleMap = {
|
||||
'/users': '用户管理',
|
||||
'/factories': '供应商库',
|
||||
'/dictionary': '材料分类管理',
|
||||
'/materials': '材料管理'
|
||||
}
|
||||
const title = computed(() => titleMap[`/${route.path.split('/')[1]}`] || '系统首页')
|
||||
const user = computed(() => state.user)
|
||||
|
||||
const passwordVisible = ref(false)
|
||||
|
|
@ -108,36 +102,69 @@ const onLogout = () => {
|
|||
<style scoped>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 24px rgba(15, 26, 42, 0.08);
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--brand-900, #1b2a41);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: right;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.user-info .name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-info .role {
|
||||
font-size: 12px;
|
||||
color: #6b7785;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(180deg, var(--brand-900), var(--brand-950));
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 20px 18px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logo-sub {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.menu {
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
|
|
@ -156,6 +183,24 @@ const onLogout = () => {
|
|||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title) {
|
||||
color: #fff;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title:hover) {
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
|
||||
color: #7cb4e3;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu .el-menu) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -163,34 +208,10 @@ const onLogout = () => {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 24px rgba(15, 26, 42, 0.08);
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue