修改标题
This commit is contained in:
aaron
parent
7c83fcf310
commit
ef94fbd001
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-layout class="layout">
|
<a-layout class="layout">
|
||||||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
|
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
|
||||||
<div class="logo" />
|
<div class="logo">
|
||||||
|
<h1 class="logo-text">蜂快 · 运营系统</h1>
|
||||||
|
</div>
|
||||||
<a-menu
|
<a-menu
|
||||||
v-model:selectedKeys="selectedKeys"
|
v-model:selectedKeys="selectedKeys"
|
||||||
v-model:openKeys="openKeys"
|
v-model:openKeys="openKeys"
|
||||||
@ -150,9 +152,26 @@ export default defineComponent({
|
|||||||
color: #1890ff;
|
color: #1890ff;
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
height: 32px;
|
height: 64px;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.logo-text {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
:deep(.ant-layout-sider-collapsed) .logo-text {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
.header-right {
|
.header-right {
|
||||||
float: right;
|
float: right;
|
||||||
|
|||||||
@ -1,294 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-layout class="tabs-layout">
|
|
||||||
<a-layout-header class="header">
|
|
||||||
<div class="logo">闪兔到家后台管理系统</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<a-space>
|
|
||||||
<a-button type="link" icon><SearchOutlined /></a-button>
|
|
||||||
<a-button type="link" icon><QuestionCircleOutlined /></a-button>
|
|
||||||
<a-dropdown>
|
|
||||||
<a-button type="link">
|
|
||||||
{{ username }}
|
|
||||||
<DownOutlined />
|
|
||||||
</a-button>
|
|
||||||
<template #overlay>
|
|
||||||
<a-menu>
|
|
||||||
<a-menu-item key="logout" @click="handleLogout">
|
|
||||||
退出登录
|
|
||||||
</a-menu-item>
|
|
||||||
</a-menu>
|
|
||||||
</template>
|
|
||||||
</a-dropdown>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</a-layout-header>
|
|
||||||
|
|
||||||
<a-layout>
|
|
||||||
<a-layout-sider width="256" class="sider">
|
|
||||||
<a-menu
|
|
||||||
mode="inline"
|
|
||||||
:selectedKeys="[activeMenu]"
|
|
||||||
:openKeys="openKeys"
|
|
||||||
@select="handleMenuSelect"
|
|
||||||
@openChange="handleOpenChange"
|
|
||||||
>
|
|
||||||
<a-sub-menu key="user">
|
|
||||||
<template #title>
|
|
||||||
<span>
|
|
||||||
<UserOutlined />
|
|
||||||
<span>用户管理</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<a-menu-item key="/user/list">用户列表</a-menu-item>
|
|
||||||
</a-sub-menu>
|
|
||||||
|
|
||||||
<a-sub-menu key="community">
|
|
||||||
<template #title>
|
|
||||||
<span>
|
|
||||||
<HomeOutlined />
|
|
||||||
<span>小区管理</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<a-menu-item key="/community/list">小区列表</a-menu-item>
|
|
||||||
<a-menu-item key="/community/building">楼栋列表</a-menu-item>
|
|
||||||
</a-sub-menu>
|
|
||||||
|
|
||||||
<a-sub-menu key="station">
|
|
||||||
<template #title>
|
|
||||||
<span>
|
|
||||||
<ShopOutlined />
|
|
||||||
<span>驿站管理</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<a-menu-item key="/station/list">驿站列表</a-menu-item>
|
|
||||||
</a-sub-menu>
|
|
||||||
</a-menu>
|
|
||||||
</a-layout-sider>
|
|
||||||
|
|
||||||
<a-layout-content class="content">
|
|
||||||
<div class="tabs-wrapper">
|
|
||||||
<a-tabs
|
|
||||||
v-model:activeKey="activeTab"
|
|
||||||
type="editable-card"
|
|
||||||
@edit="handleTabEdit"
|
|
||||||
@change="handleTabChange"
|
|
||||||
hide-add
|
|
||||||
>
|
|
||||||
<a-tab-pane
|
|
||||||
v-for="tab in tabs"
|
|
||||||
:key="tab.key"
|
|
||||||
:tab="tab.title"
|
|
||||||
:closable="tab.closable"
|
|
||||||
/>
|
|
||||||
</a-tabs>
|
|
||||||
</div>
|
|
||||||
<div class="content-wrapper">
|
|
||||||
<router-view v-slot="{ Component }">
|
|
||||||
<keep-alive>
|
|
||||||
<component :is="Component" />
|
|
||||||
</keep-alive>
|
|
||||||
</router-view>
|
|
||||||
</div>
|
|
||||||
</a-layout-content>
|
|
||||||
</a-layout>
|
|
||||||
</a-layout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent, ref, watch } from 'vue'
|
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
|
||||||
import {
|
|
||||||
SearchOutlined,
|
|
||||||
QuestionCircleOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
UserOutlined,
|
|
||||||
HomeOutlined,
|
|
||||||
ShopOutlined
|
|
||||||
} from '@ant-design/icons-vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
SearchOutlined,
|
|
||||||
QuestionCircleOutlined,
|
|
||||||
DownOutlined,
|
|
||||||
UserOutlined,
|
|
||||||
HomeOutlined,
|
|
||||||
ShopOutlined
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const router = useRouter()
|
|
||||||
const route = useRoute()
|
|
||||||
const activeTab = ref('')
|
|
||||||
const activeMenu = ref('')
|
|
||||||
const openKeys = ref(['user', 'community'])
|
|
||||||
const username = ref('')
|
|
||||||
|
|
||||||
const tabs = ref([
|
|
||||||
{
|
|
||||||
title: '工作台',
|
|
||||||
key: '/dashboard',
|
|
||||||
closable: false
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// 获取用户信息
|
|
||||||
const getUserInfo = () => {
|
|
||||||
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
|
|
||||||
username.value = userInfo.username || '未登录'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 在组件挂载时获取用户信息
|
|
||||||
getUserInfo()
|
|
||||||
|
|
||||||
// 监听路由变化
|
|
||||||
watch(
|
|
||||||
() => route.path,
|
|
||||||
(newPath) => {
|
|
||||||
activeMenu.value = newPath
|
|
||||||
const existTab = tabs.value.find(tab => tab.key === newPath)
|
|
||||||
if (!existTab) {
|
|
||||||
tabs.value.push({
|
|
||||||
title: route.meta.title,
|
|
||||||
key: newPath,
|
|
||||||
closable: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
activeTab.value = newPath
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
// 处理标签页切换
|
|
||||||
const handleTabChange = (key) => {
|
|
||||||
router.push(key)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理标签页编辑（关闭）
|
|
||||||
const handleTabEdit = (targetKey, action) => {
|
|
||||||
if (action === 'remove') {
|
|
||||||
const targetIndex = tabs.value.findIndex(tab => tab.key === targetKey)
|
|
||||||
if (targetIndex === -1) return
|
|
||||||
|
|
||||||
// 如果关闭的是当前页，需要跳转到其他页面
|
|
||||||
if (targetKey === activeTab.value) {
|
|
||||||
const newActiveKey = tabs.value[targetIndex - 1]?.key || tabs.value[targetIndex + 1]?.key
|
|
||||||
if (newActiveKey) {
|
|
||||||
router.push(newActiveKey)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除标签页
|
|
||||||
tabs.value = tabs.value.filter(tab => tab.key !== targetKey)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理菜单选择
|
|
||||||
const handleMenuSelect = ({ key }) => {
|
|
||||||
router.push(key)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理子菜单展开/收起
|
|
||||||
const handleOpenChange = (keys) => {
|
|
||||||
openKeys.value = keys
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理退出登录
|
|
||||||
const handleLogout = () => {
|
|
||||||
localStorage.removeItem('token')
|
|
||||||
localStorage.removeItem('userInfo')
|
|
||||||
router.push('/login')
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
activeTab,
|
|
||||||
activeMenu,
|
|
||||||
openKeys,
|
|
||||||
tabs,
|
|
||||||
username,
|
|
||||||
handleTabChange,
|
|
||||||
handleTabEdit,
|
|
||||||
handleMenuSelect,
|
|
||||||
handleOpenChange,
|
|
||||||
handleLogout
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.tabs-layout {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 24px;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #1890ff;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sider {
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
background: #f0f2f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs-wrapper {
|
|
||||||
padding: 6px 6px 0;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
padding: 16px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-tabs-nav) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-tabs-tab) {
|
|
||||||
border: none !important;
|
|
||||||
background: transparent !important;
|
|
||||||
padding: 8px 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-tabs-tab-active) {
|
|
||||||
background: #e6f7ff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-tabs-tab-btn) {
|
|
||||||
color: #666 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
||||||
color: #1890ff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-menu-item) {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user