420 lines
8.6 KiB
Vue
420 lines
8.6 KiB
Vue
<template>
|
|
<div v-if="isLoggedIn">
|
|
<!-- 移动端布局 -->
|
|
<div v-if="isMobile" class="mobile-layout">
|
|
<MobileNav ref="mobileNavRef" />
|
|
<div class="mobile-content">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 桌面端布局 -->
|
|
<a-layout v-else class="desktop-layout">
|
|
<a-layout-header class="header">
|
|
<div class="logo">
|
|
<a-button
|
|
type="text"
|
|
@click="settingsStore.toggleSidebar"
|
|
style="color: white; margin-right: 8px;"
|
|
>
|
|
<menu-unfold-outlined v-if="sidebarCollapsed" />
|
|
<menu-fold-outlined v-else />
|
|
</a-button>
|
|
银行管理后台系统
|
|
</div>
|
|
<div class="user-info">
|
|
<a-dropdown>
|
|
<a-button type="text" style="color: white;">
|
|
<user-outlined />
|
|
{{ userData?.real_name || userData?.username }}
|
|
<down-outlined />
|
|
</a-button>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item key="profile" @click="goToProfile">
|
|
<user-outlined />
|
|
个人中心
|
|
</a-menu-item>
|
|
<a-menu-item key="settings" @click="goToSettings">
|
|
<setting-outlined />
|
|
系统设置
|
|
</a-menu-item>
|
|
<a-menu-divider />
|
|
<a-menu-item key="logout" @click="handleLogout">
|
|
<logout-outlined />
|
|
退出登录
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</div>
|
|
</a-layout-header>
|
|
|
|
<a-layout class="main-layout">
|
|
<a-layout-sider
|
|
class="sidebar"
|
|
width="200"
|
|
:collapsed="sidebarCollapsed"
|
|
collapsible
|
|
>
|
|
<DynamicMenu :collapsed="sidebarCollapsed" />
|
|
</a-layout-sider>
|
|
|
|
<a-layout class="content-layout">
|
|
<a-layout-content class="main-content">
|
|
<div class="content-wrapper">
|
|
<router-view />
|
|
</div>
|
|
</a-layout-content>
|
|
|
|
<a-layout-footer class="footer">
|
|
银行管理后台系统 ©2025
|
|
</a-layout-footer>
|
|
</a-layout>
|
|
</a-layout>
|
|
</a-layout>
|
|
</div>
|
|
<div v-else>
|
|
<router-view />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import DynamicMenu from './components/DynamicMenu.vue'
|
|
import MobileNav from './components/MobileNav.vue'
|
|
import { useUserStore, useSettingsStore } from './stores'
|
|
import {
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
UserOutlined,
|
|
DownOutlined,
|
|
SettingOutlined,
|
|
LogoutOutlined
|
|
} from '@ant-design/icons-vue'
|
|
|
|
// 使用Pinia状态管理
|
|
const userStore = useUserStore()
|
|
const settingsStore = useSettingsStore()
|
|
const router = useRouter()
|
|
|
|
// 移动端导航引用
|
|
const mobileNavRef = ref()
|
|
|
|
// 响应式检测
|
|
const isMobile = ref(false)
|
|
|
|
// 检测屏幕尺寸
|
|
const checkScreenSize = () => {
|
|
isMobile.value = window.innerWidth <= 768
|
|
}
|
|
|
|
// 计算属性
|
|
const isLoggedIn = computed(() => userStore.isLoggedIn)
|
|
const userData = computed(() => userStore.userData)
|
|
const sidebarCollapsed = computed(() => settingsStore.sidebarCollapsed)
|
|
|
|
// 监听多标签页登录状态同步
|
|
const handleStorageChange = (event) => {
|
|
if (event.key === 'bank_token' || event.key === 'bank_user') {
|
|
userStore.checkLoginStatus()
|
|
}
|
|
}
|
|
|
|
// 登出处理
|
|
const handleLogout = async () => {
|
|
try {
|
|
await userStore.logout()
|
|
router.push('/login')
|
|
} catch (error) {
|
|
console.error('登出失败:', error)
|
|
}
|
|
}
|
|
|
|
// 跳转到个人中心
|
|
const goToProfile = () => {
|
|
router.push('/profile')
|
|
}
|
|
|
|
// 跳转到系统设置
|
|
const goToSettings = () => {
|
|
router.push('/settings')
|
|
}
|
|
|
|
onMounted(() => {
|
|
userStore.checkLoginStatus()
|
|
checkScreenSize()
|
|
window.addEventListener('storage', handleStorageChange)
|
|
window.addEventListener('resize', checkScreenSize)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('storage', handleStorageChange)
|
|
window.removeEventListener('resize', checkScreenSize)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 桌面端布局样式 */
|
|
.desktop-layout {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-layout {
|
|
height: calc(100vh - 64px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 头部样式 */
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #001529;
|
|
color: white;
|
|
padding: 0 24px;
|
|
height: 64px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* 侧边栏样式 */
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 64px;
|
|
left: 0;
|
|
height: calc(100vh - 64px);
|
|
background: #001529 !important;
|
|
z-index: 999;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-track {
|
|
background: #001529;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background: #1890ff;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-thumb:hover {
|
|
background: #40a9ff;
|
|
}
|
|
|
|
/* 内容区域样式 */
|
|
.content-layout {
|
|
margin-left: 200px;
|
|
height: calc(100vh - 64px);
|
|
transition: margin-left 0.2s;
|
|
}
|
|
|
|
.main-content {
|
|
height: calc(100vh - 64px - 70px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding: 24px;
|
|
min-height: 100%;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.footer {
|
|
height: 70px;
|
|
line-height: 70px;
|
|
text-align: center;
|
|
background: #fff;
|
|
border-top: 1px solid #f0f0f0;
|
|
color: #666;
|
|
}
|
|
|
|
/* 侧边栏折叠时的样式 */
|
|
.desktop-layout :deep(.ant-layout-sider-collapsed) {
|
|
width: 80px !important;
|
|
min-width: 80px !important;
|
|
max-width: 80px !important;
|
|
flex: 0 0 80px !important;
|
|
}
|
|
|
|
.desktop-layout :deep(.ant-layout-sider-collapsed) + .content-layout {
|
|
margin-left: 80px;
|
|
transition: margin-left 0.2s;
|
|
}
|
|
|
|
/* 响应式支持 */
|
|
@media (max-width: 768px) {
|
|
.content-layout {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.sidebar.ant-layout-sider-collapsed {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* 内容区域滚动条样式 */
|
|
.main-content::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.main-content::-webkit-scrollbar-track {
|
|
background: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.main-content::-webkit-scrollbar-thumb {
|
|
background: #d9d9d9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.main-content::-webkit-scrollbar-thumb:hover {
|
|
background: #bfbfbf;
|
|
}
|
|
|
|
/* 移动端布局样式 */
|
|
.mobile-layout {
|
|
min-height: 100vh;
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
.mobile-content {
|
|
padding: 12px;
|
|
padding-top: 68px; /* 为固定头部留出空间 */
|
|
min-height: calc(100vh - 56px);
|
|
}
|
|
|
|
/* 移动端页面内容优化 */
|
|
.mobile-layout :deep(.page-header) {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.mobile-layout :deep(.search-area) {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mobile-layout :deep(.search-input) {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-layout :deep(.search-buttons) {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mobile-layout :deep(.search-buttons .ant-btn) {
|
|
flex: 1;
|
|
height: 40px;
|
|
}
|
|
|
|
/* 移动端表格优化 */
|
|
.mobile-layout :deep(.ant-table-wrapper) {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-table) {
|
|
min-width: 600px;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-table-thead > tr > th) {
|
|
padding: 8px 4px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-table-tbody > tr > td) {
|
|
padding: 8px 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 移动端模态框优化 */
|
|
.mobile-layout :deep(.ant-modal) {
|
|
margin: 0 !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-modal-content) {
|
|
border-radius: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-modal-body) {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-modal-footer) {
|
|
border-top: 1px solid #f0f0f0;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
/* 移动端卡片优化 */
|
|
.mobile-layout :deep(.ant-card) {
|
|
margin-bottom: 12px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-card-body) {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* 移动端按钮优化 */
|
|
.mobile-layout :deep(.ant-btn) {
|
|
min-height: 40px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-space) {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-space-item) {
|
|
flex: 1;
|
|
}
|
|
|
|
.mobile-layout :deep(.ant-space-item .ant-btn) {
|
|
width: 100%;
|
|
}
|
|
</style> |