更新
This commit is contained in:
@@ -69,6 +69,39 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// ==================== 暗色主题样式 ====================
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
// Element Plus 暗色主题变量
|
||||
--el-bg-color: #141414;
|
||||
--el-bg-color-page: #0a0a0a;
|
||||
--el-bg-color-overlay: #1d1e1f;
|
||||
--el-text-color-primary: #e5eaf3;
|
||||
--el-text-color-regular: #cfd3dc;
|
||||
--el-text-color-secondary: #a3a6ad;
|
||||
--el-text-color-placeholder: #8d9096;
|
||||
--el-text-color-disabled: #6c6e72;
|
||||
--el-border-color: #4c4d4f;
|
||||
--el-border-color-light: #414243;
|
||||
--el-border-color-lighter: #363637;
|
||||
--el-border-color-extra-light: #2b2b2c;
|
||||
--el-border-color-dark: #58585b;
|
||||
--el-border-color-darker: #636466;
|
||||
--el-fill-color: #2b2b2c;
|
||||
--el-fill-color-light: #262727;
|
||||
--el-fill-color-lighter: #212121;
|
||||
--el-fill-color-extra-light: #191919;
|
||||
--el-fill-color-dark: #303030;
|
||||
--el-fill-color-darker: #363637;
|
||||
--el-fill-color-blank: transparent;
|
||||
--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.2);
|
||||
--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
|
||||
--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.54);
|
||||
--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px rgba(0, 0, 0, 0.36);
|
||||
--el-border-color-base: #4c4d4f;
|
||||
}
|
||||
|
||||
.pages {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export default {
|
||||
APP_NAME: 'vueadmin',
|
||||
LOGO: '',
|
||||
DASHBOARD_URL: '/dashboard',
|
||||
|
||||
// 白名单路由（不需要登录即可访问）
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<template><el-breadcrumb separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
|
||||
<span v-if="index === breadcrumbs.length - 1" class="no-redirect">
|
||||
{{ item.meta?.title }}
|
||||
</span>
|
||||
<a v-else class="redirect" @click.prevent="handleLink(item)">
|
||||
{{ item.meta?.title }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb></template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from '@/hooks/useI18n'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutBreadcrumb',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
// 面包屑列表
|
||||
const breadcrumbs = computed(() => {
|
||||
const matched = route.matched.filter((item) => item.meta && item.meta.title)
|
||||
|
||||
const first = matched[0]
|
||||
|
||||
if (!first || !first.meta?.title) {
|
||||
return []
|
||||
}
|
||||
|
||||
// 如果第一个不是首页，添加首页
|
||||
if (first.path !== '/') {
|
||||
matched.unshift({
|
||||
path: '/',
|
||||
meta: { title: t('menu.home') || '首页' },
|
||||
})
|
||||
}
|
||||
|
||||
return matched
|
||||
})
|
||||
|
||||
// 处理点击
|
||||
const handleLink = (item) => {
|
||||
const { redirect, path } = item
|
||||
if (redirect) {
|
||||
router.push(redirect)
|
||||
return
|
||||
}
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-breadcrumb {
|
||||
display: inline-block;
|
||||
line-height: 60px;
|
||||
font-size: 14px;
|
||||
|
||||
.no-redirect {
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.redirect {
|
||||
color: var(--el-text-color-primary);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
47
src/layouts/components/menu-item.vue
Normal file
47
src/layouts/components/menu-item.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template><template v-for="menu in menuList" :key="menu.path">
|
||||
<!-- 有子菜单 -->
|
||||
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
||||
<template #title>
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
<!-- 递归渲染子菜单 -->
|
||||
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template></template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'MenuItem',
|
||||
})
|
||||
|
||||
defineProps({
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
parentPath: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 判断是否有子菜单
|
||||
const hasChildren = (menu) => {
|
||||
return menu.children && menu.children.length > 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template><el-menu :default-active="activeMenu" :mode="menuMode" :collapse="isCollapse" :unique-opened="uniqueOpened"
|
||||
:router="true" :collapse-transition="false" @select="handleSelect">
|
||||
<template v-for="menu in menuList" :key="menu.path">
|
||||
<!-- 有子菜单 -->
|
||||
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
||||
<template #title>
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
<!-- 递归渲染子菜单 -->
|
||||
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span>{{ menu.meta?.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu></template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import MenuItem from './menu-item.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutMenu',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'vertical',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const layoutStore = useLayoutStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 菜单模式
|
||||
const menuMode = computed(() => props.mode)
|
||||
|
||||
// 是否折叠
|
||||
const isCollapse = computed(() => layoutStore.sidebarCollapsed)
|
||||
|
||||
// 是否只展开一个子菜单
|
||||
const uniqueOpened = computed(() => true)
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = route
|
||||
if (meta?.activeMenu) {
|
||||
return meta.activeMenu
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
// 菜单列表
|
||||
const menuList = computed(() => {
|
||||
const menus = userStore.getMenu() || []
|
||||
|
||||
// 如果是默认布局（双栏布局），只显示当前选中的父菜单的子菜单
|
||||
if (layoutStore.layoutMode === 'default' && layoutStore.selectedParentMenu) {
|
||||
const selectedMenu = menus.find((m) => m.path === layoutStore.selectedParentMenu.path)
|
||||
return selectedMenu?.children || []
|
||||
}
|
||||
|
||||
// 其他布局显示所有菜单
|
||||
return menus
|
||||
})
|
||||
|
||||
// 判断是否有子菜单
|
||||
const hasChildren = (menu) => {
|
||||
return menu.children && menu.children.length > 0
|
||||
}
|
||||
|
||||
// 菜单选择处理
|
||||
const handleSelect = (index) => {
|
||||
console.log('Menu selected:', index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
495
src/layouts/components/setting.vue
Normal file
495
src/layouts/components/setting.vue
Normal file
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<!-- 设置按钮 -->
|
||||
<div class="setting-btn" @click="showDrawer = true">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 设置抽屉 -->
|
||||
<el-drawer v-model="showDrawer" title="系统设置" :size="300" :close-on-click-modal="false">
|
||||
<div class="setting-content">
|
||||
<!-- 布局模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">布局模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="layoutMode" @change="handleLayoutModeChange">
|
||||
<el-radio label="default">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-default">
|
||||
<div class="layout-aside-left"></div>
|
||||
<div class="layout-aside-right"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>双栏布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="menu">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-menu">
|
||||
<div class="layout-aside"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>菜单布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="top">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-top">
|
||||
<div class="layout-header"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>顶部布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题色 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题色</div>
|
||||
<div class="setting-value">
|
||||
<div class="color-picker-wrapper">
|
||||
<el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors"
|
||||
@change="handleThemeColorChange" />
|
||||
</div>
|
||||
<div class="color-presets">
|
||||
<div v-for="color in predefineColors" :key="color" class="color-preset"
|
||||
:class="{ active: themeColor === color }" :style="{ backgroundColor: color }"
|
||||
@click="handleColorPresetClick(color)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="isDark" @change="handleThemeModeChange">
|
||||
<el-radio :label="false">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色
|
||||
</el-radio>
|
||||
<el-radio :label="true">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签栏 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示标签栏</span>
|
||||
<el-tooltip content="开启后页面顶部显示标签页" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示面包屑</span>
|
||||
<el-tooltip content="开启后页面顶部显示面包屑导航" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="setting-actions">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon>
|
||||
<RefreshLeft />
|
||||
</el-icon>
|
||||
重置默认
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
Setting,
|
||||
Sunny,
|
||||
Moon,
|
||||
QuestionFilled,
|
||||
Check,
|
||||
RefreshLeft,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutSetting',
|
||||
})
|
||||
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
// 抽屉显示状态
|
||||
const showDrawer = ref(false)
|
||||
|
||||
// 预定义颜色
|
||||
const predefineColors = [
|
||||
'#1890ff',
|
||||
'#409eff',
|
||||
'#67c23a',
|
||||
'#e6a23c',
|
||||
'#f56c6c',
|
||||
'#909399',
|
||||
'#722ed1',
|
||||
'#eb2f96',
|
||||
'#52c41a',
|
||||
'#1890ff',
|
||||
'#2f54eb',
|
||||
'#722ed1',
|
||||
'#f5222d',
|
||||
'#fa541c',
|
||||
'#fa8c16',
|
||||
'#faad14',
|
||||
'#fadb14',
|
||||
'#a0d911',
|
||||
'#52c41a',
|
||||
'#13c2c2',
|
||||
'#1890ff',
|
||||
'#2f54eb',
|
||||
'#722ed1',
|
||||
]
|
||||
|
||||
// 布局模式
|
||||
const layoutMode = computed({
|
||||
get: () => layoutStore.layoutMode,
|
||||
set: (val) => layoutStore.setLayoutMode(val),
|
||||
})
|
||||
|
||||
// 主题色
|
||||
const themeColor = ref(layoutStore.themeColor)
|
||||
|
||||
// 主题模式（深色/浅色）
|
||||
const isDark = ref(document.documentElement.classList.contains('dark'))
|
||||
|
||||
// 显示标签栏
|
||||
const showTags = computed({
|
||||
get: () => layoutStore.showTags,
|
||||
set: (val) => layoutStore.setShowTags(val),
|
||||
})
|
||||
|
||||
// 显示面包屑
|
||||
const showBreadcrumb = computed({
|
||||
get: () => layoutStore.showBreadcrumb,
|
||||
set: (val) => layoutStore.setShowBreadcrumb(val),
|
||||
})
|
||||
|
||||
// 布局模式变化
|
||||
const handleLayoutModeChange = (value) => {
|
||||
console.log('Layout mode changed:', value)
|
||||
}
|
||||
|
||||
// 主题色变化
|
||||
const handleThemeColorChange = (value) => {
|
||||
if (value) {
|
||||
layoutStore.setThemeColor(value)
|
||||
}
|
||||
}
|
||||
|
||||
// 预定义颜色点击
|
||||
const handleColorPresetClick = (color) => {
|
||||
themeColor.value = color
|
||||
layoutStore.setThemeColor(color)
|
||||
}
|
||||
|
||||
// 主题模式变化
|
||||
const handleThemeModeChange = (value) => {
|
||||
if (value) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
|
||||
// 标签栏显示变化
|
||||
const handleShowTagsChange = (value) => {
|
||||
layoutStore.setShowTags(value)
|
||||
}
|
||||
|
||||
// 面包屑显示变化
|
||||
const handleShowBreadcrumbChange = (value) => {
|
||||
layoutStore.setShowBreadcrumb(value)
|
||||
}
|
||||
|
||||
// 保存配置
|
||||
const handleSave = () => {
|
||||
ElMessage.success('配置已保存')
|
||||
showDrawer.value = false
|
||||
}
|
||||
|
||||
// 重置配置
|
||||
const handleReset = () => {
|
||||
layoutStore.resetTheme()
|
||||
themeColor.value = layoutStore.themeColor
|
||||
isDark.value = false
|
||||
document.documentElement.classList.remove('dark')
|
||||
ElMessage.success('已重置为默认配置')
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
themeColor.value = layoutStore.themeColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-container {
|
||||
|
||||
// 设置按钮
|
||||
.setting-btn {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--el-color-primary);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 6px 0 0 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 9999;
|
||||
transition: all 0.3s;
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 56px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置内容
|
||||
.setting-content {
|
||||
padding: 20px;
|
||||
|
||||
.setting-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.setting-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
|
||||
// 布局选项
|
||||
:deep(.el-radio-group) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.el-radio {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-radio__label {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--el-border-color);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// 布局预览
|
||||
.layout-preview {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border: 2px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.layout-default {
|
||||
.layout-aside-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.layout-aside-right {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 25px;
|
||||
background: var(--el-color-primary-light-5);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 45px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-menu {
|
||||
.layout-aside {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 25px;
|
||||
background: var(--el-color-primary-light-5);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 25px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-top {
|
||||
.layout-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12px;
|
||||
background: var(--el-color-primary-light-5);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 12px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 颜色选择器
|
||||
.color-picker-wrapper {
|
||||
margin-bottom: 12px;
|
||||
|
||||
:deep(.el-color-picker__trigger) {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-presets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
|
||||
.color-preset {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--el-color-primary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.setting-actions {
|
||||
margin-top: 32px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="tags-view-container">
|
||||
<el-scrollbar class="tags-view-wrapper">
|
||||
<router-link v-for="tag in visibleTags" :key="tag.fullPath" :class="isActive(tag) ? 'active' : ''"
|
||||
class="tags-view-item" :to="{ path: tag.fullPath }" @click.middle="closeTag(tag)"
|
||||
@contextmenu.prevent="openMenu(tag, $event)">
|
||||
{{ tag.title || tag.meta?.title }}
|
||||
<el-icon v-if="!tag.meta?.affix" class="el-icon-close" @click.prevent.stop="closeTag(tag)">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</router-link>
|
||||
</el-scrollbar>
|
||||
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
刷新
|
||||
</li>
|
||||
<li v-if="!selectedTag?.meta?.affix" @click="closeSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
关闭
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<el-icon>
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
关闭其他
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<el-icon>
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
关闭全部
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import { Close, Refresh, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutTags',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
// 右键菜单
|
||||
const visible = ref(false)
|
||||
const top = ref(0)
|
||||
const left = ref(0)
|
||||
const selectedTag = ref(null)
|
||||
const affixTags = ref([])
|
||||
|
||||
// 可见的标签
|
||||
const visibleTags = computed(() => {
|
||||
return layoutStore.viewTags || []
|
||||
})
|
||||
|
||||
// 判断是否激活
|
||||
const isActive = (tag) => {
|
||||
return tag.fullPath === route.fullPath
|
||||
}
|
||||
|
||||
// 过滤固定的标签
|
||||
const filterAffixTags = (routes, basePath = '/') => {
|
||||
let tags = []
|
||||
routes.forEach((route) => {
|
||||
if (route.meta?.affix) {
|
||||
const tagPath = basePath + route.path
|
||||
tags.push({
|
||||
name: route.name,
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
title: route.meta?.title,
|
||||
meta: route.meta,
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path + '/')
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}
|
||||
|
||||
// 初始化标签
|
||||
const initTags = () => {
|
||||
affixTags.value = filterAffixTags(route.matched)
|
||||
for (const tag of affixTags.value) {
|
||||
if (tag.name) {
|
||||
layoutStore.updateViewTags(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加标签
|
||||
const addTags = () => {
|
||||
if (route.name && !route.meta?.hidden) {
|
||||
layoutStore.updateViewTags({
|
||||
name: route.name,
|
||||
path: route.path,
|
||||
fullPath: route.fullPath,
|
||||
title: route.meta?.title,
|
||||
meta: route.meta,
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 关闭标签
|
||||
const closeTag = (tag) => {
|
||||
layoutStore.removeViewTags(tag.fullPath)
|
||||
if (isActive(tag)) {
|
||||
toLastView(tag)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭选中的标签
|
||||
const closeSelectedTag = (tag) => {
|
||||
closeTag(tag)
|
||||
}
|
||||
|
||||
// 跳转到最后一个标签
|
||||
const toLastView = (tag) => {
|
||||
const views = visibleTags.value
|
||||
const latestView = views.slice(-1)[0]
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
} else {
|
||||
// 如果没有标签，跳转到首页
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他标签
|
||||
const closeOthersTags = () => {
|
||||
router.push(selectedTag.value.fullPath)
|
||||
layoutStore.clearViewTags()
|
||||
addTags()
|
||||
for (const tag of affixTags.value) {
|
||||
layoutStore.updateViewTags(tag)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭所有标签
|
||||
const closeAllTags = () => {
|
||||
layoutStore.clearViewTags()
|
||||
for (const tag of affixTags.value) {
|
||||
layoutStore.updateViewTags(tag)
|
||||
}
|
||||
if (affixTags.value.length > 0) {
|
||||
router.push(affixTags.value[0].fullPath)
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新选中的标签
|
||||
const refreshSelectedTag = (tag) => {
|
||||
layoutStore.refreshTag()
|
||||
router.replace({ path: tag.fullPath })
|
||||
}
|
||||
|
||||
// 打开右键菜单
|
||||
const openMenu = (tag, e) => {
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = e.clientX - container.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = container.offsetWidth - 100
|
||||
const maxLeft = offsetWidth - menuMinWidth
|
||||
left.value = offsetLeft > maxLeft ? maxLeft : offsetLeft
|
||||
top.value = e.clientY
|
||||
visible.value = true
|
||||
selectedTag.value = tag
|
||||
}
|
||||
|
||||
// 关闭右键菜单
|
||||
const closeMenu = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 容器引用
|
||||
let container = null
|
||||
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
addTags()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 监听右键菜单可见性
|
||||
watch(visible, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', closeMenu)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
addTags()
|
||||
initTags()
|
||||
container = document.querySelector('.tags-view-container')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
background: var(--el-fill-color-blank);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
|
||||
.tags-view-wrapper {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
height: 34px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__bar.is-horizontal) {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
color: var(--el-text-color-regular);
|
||||
background: var(--el-fill-color-blank);
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: var(--el-bg-color);
|
||||
z-index: 3000;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--el-text-color-regular);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<div class="userbar-container">
|
||||
<!-- 全屏切换 -->
|
||||
<el-tooltip content="全屏" placement="bottom">
|
||||
<div class="icon-btn" @click="toggleFullScreen">
|
||||
<el-icon v-if="!isFullScreen">
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Aim />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 语言切换 -->
|
||||
<el-dropdown trigger="click" @command="handleLanguageChange">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Location />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :disabled="currentLanguage === 'zh-CN'" command="zh-CN">
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="currentLanguage === 'en-US'" command="en-US">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 主题设置 -->
|
||||
<el-dropdown trigger="click">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="setTheme('light')">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色主题
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="setTheme('dark')">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色主题
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-tooltip content="消息" placement="bottom">
|
||||
<div class="icon-btn">
|
||||
<el-badge :value="messageCount" :hidden="messageCount === 0" :max="99">
|
||||
<el-icon>
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<div class="avatar-wrapper">
|
||||
<el-avatar v-if="userStore.userInfo?.avatar" :src="userStore.userInfo.avatar" />
|
||||
<el-avatar v-else>
|
||||
<UserFilled />
|
||||
</el-avatar>
|
||||
<span class="username">{{ userStore.userInfo?.username || 'Admin' }}</span>
|
||||
<el-icon class="el-icon-caret-bottom">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="home">
|
||||
<el-icon>
|
||||
<HomeFilled />
|
||||
</el-icon>
|
||||
首页
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="profile">
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="settings">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
系统设置
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">
|
||||
<el-icon>
|
||||
<SwitchButton />
|
||||
</el-icon>
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import {
|
||||
ArrowDown,
|
||||
HomeFilled,
|
||||
User,
|
||||
Setting,
|
||||
SwitchButton,
|
||||
FullScreen,
|
||||
Aim,
|
||||
Location,
|
||||
Sunny,
|
||||
Moon,
|
||||
Bell,
|
||||
UserFilled,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useI18nStore } from '@/stores/modules/i18n'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutUserbar',
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const i18nStore = useI18nStore()
|
||||
|
||||
// 全屏状态
|
||||
const isFullScreen = ref(false)
|
||||
|
||||
// 消息数量
|
||||
const messageCount = ref(0)
|
||||
|
||||
// 当前语言
|
||||
const currentLanguage = computed(() => i18nStore.locale)
|
||||
|
||||
// 处理下拉菜单命令
|
||||
const handleCommand = (command) => {
|
||||
switch (command) {
|
||||
case 'home':
|
||||
router.push('/')
|
||||
break
|
||||
case 'profile':
|
||||
router.push('/profile')
|
||||
break
|
||||
case 'settings':
|
||||
router.push('/settings')
|
||||
break
|
||||
case 'logout':
|
||||
handleLogout()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
userStore.logout()
|
||||
router.push('/login')
|
||||
ElMessage.success('退出成功')
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消退出
|
||||
})
|
||||
}
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullScreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
isFullScreen.value = true
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
isFullScreen.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听全屏变化
|
||||
const handleFullScreenChange = () => {
|
||||
isFullScreen.value = !!document.fullscreenElement
|
||||
}
|
||||
|
||||
// 语言切换
|
||||
const handleLanguageChange = (lang) => {
|
||||
i18nStore.setLocale(lang)
|
||||
ElMessage.success('语言切换成功')
|
||||
}
|
||||
|
||||
// 设置主题
|
||||
const setTheme = (theme) => {
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
ElMessage.success('主题切换成功')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('fullscreenchange', handleFullScreenChange)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', handleFullScreenChange)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.userbar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-regular);
|
||||
transition: transform 0.3s;
|
||||
|
||||
.avatar-wrapper:hover & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-badge__content) {
|
||||
transform: translateY(-8px) translateX(8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,59 +1,426 @@
|
||||
<template><el-container class="app-wrapper" :class="layoutClass">
|
||||
<!-- 默认布局：左侧双栏布局 -->
|
||||
<template v-if="layoutMode === 'default'">
|
||||
<el-aside width="60px">
|
||||
<!-- logo -->
|
||||
<div class="logo"></div>
|
||||
<!-- 一级菜单 -->
|
||||
<!-- 一级菜单栏 (窄侧边栏) -->
|
||||
<el-aside width="60px" class="first-sidebar">
|
||||
<div class="logo-mini">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span v-else class="logo-text-mini">{{ logoText }}</span>
|
||||
</div>
|
||||
<div class="menu-list">
|
||||
<div class="item">
|
||||
图标
|
||||
文字
|
||||
<div v-for="menu in parentMenus" :key="menu.path" class="menu-item"
|
||||
:class="{ active: selectedParentMenu?.path === menu.path }" @click="handleParentMenuClick(menu)">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span class="menu-text">{{ menu.meta?.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-aside>
|
||||
<el-menu default-active="2" @open="handleOpen" @close="handleClose">
|
||||
<menu />
|
||||
</el-menu>
|
||||
|
||||
<!-- 二级菜单栏 -->
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="second-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<breadcrumb />
|
||||
<userbar />
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main><router-view /></el-main>
|
||||
<el-main class="app-main">
|
||||
<tags v-if="showTags" />
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<!-- Menu布局：左侧菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'menu'">
|
||||
<el-aside>
|
||||
<!-- logo+系统名称 -->
|
||||
<div class="logo"></div>
|
||||
<el-menu default-active="2" @open="handleOpen" @close="handleClose">
|
||||
<menu />
|
||||
</el-menu>
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="menu-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<breadcrumb />
|
||||
<userbar />
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main><router-view /></el-main>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<!-- Top布局：顶部菜单栏布局 -->
|
||||
<template v-else-if="layoutMode === 'top'">
|
||||
<el-header>
|
||||
<breadcrumb />
|
||||
<userbar />
|
||||
</el-header>
|
||||
<el-main><router-view /></el-main>
|
||||
<el-container class="main-container">
|
||||
<el-header class="top-header">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<menu-component mode="horizontal" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="refreshKey" />
|
||||
<iframe v-else :src="route.meta.link" class="iframe-container" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
</el-container></template>
|
||||
</el-container>
|
||||
|
||||
<!-- 设置组件 -->
|
||||
<setting />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import MenuComponent from './components/menu.vue'
|
||||
import Breadcrumb from './components/breadcrumb.vue'
|
||||
import Tags from './components/tags.vue'
|
||||
import Userbar from './components/userbar.vue'
|
||||
import Setting from './components/setting.vue'
|
||||
import config from '@/config'
|
||||
|
||||
defineOptions({
|
||||
name: 'AppLayouts',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const layoutStore = useLayoutStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// Logo 配置
|
||||
const logo = config.LOGO
|
||||
const logoText = config.APP_NAME
|
||||
|
||||
// 布局相关状态
|
||||
const layoutMode = computed(() => layoutStore.layoutMode)
|
||||
const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
|
||||
const showTags = computed(() => layoutStore.showTags)
|
||||
const showBreadcrumb = computed(() => layoutStore.showBreadcrumb)
|
||||
const selectedParentMenu = computed(() => layoutStore.selectedParentMenu)
|
||||
const refreshKey = computed(() => layoutStore.refreshKey)
|
||||
const viewTags = computed(() => layoutStore.viewTags)
|
||||
|
||||
// 布局样式类
|
||||
const layoutClass = computed(() => {
|
||||
return {
|
||||
[`layout-${layoutMode.value}`]: true,
|
||||
'sidebar-collapsed': sidebarCollapsed.value,
|
||||
}
|
||||
})
|
||||
|
||||
// 缓存的视图
|
||||
const cachedViews = computed(() => {
|
||||
return viewTags.value
|
||||
.filter((tag) => tag.meta?.keepAlive)
|
||||
.map((tag) => tag.name)
|
||||
})
|
||||
|
||||
// 父级菜单（一级菜单）
|
||||
const parentMenus = computed(() => {
|
||||
const menus = userStore.getMenu() || []
|
||||
return menus.filter((menu) => !menu.meta?.hidden && menu.children && menu.children.length > 0)
|
||||
})
|
||||
|
||||
// 切换侧边栏
|
||||
const toggleSidebar = () => {
|
||||
layoutStore.toggleSidebar()
|
||||
}
|
||||
|
||||
// 处理父菜单点击
|
||||
const handleParentMenuClick = (menu) => {
|
||||
// 如果点击的是当前选中的父菜单，不重复操作
|
||||
if (selectedParentMenu.value?.path === menu.path) {
|
||||
return
|
||||
}
|
||||
|
||||
// 设置选中的父菜单
|
||||
layoutStore.setSelectedParentMenu(menu)
|
||||
|
||||
// 如果父菜单有 redirect，跳转
|
||||
if (menu.redirect) {
|
||||
router.push(menu.redirect)
|
||||
return
|
||||
}
|
||||
|
||||
// 如果有子菜单，跳转到第一个子菜单
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const firstChild = menu.children.find((child) => !child.meta?.hidden) || menu.children[0]
|
||||
if (firstChild) {
|
||||
router.push(firstChild.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听路由变化，自动更新选中的父菜单
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (layoutMode.value === 'default') {
|
||||
const menus = userStore.getMenu() || []
|
||||
for (const parentMenu of menus) {
|
||||
if (
|
||||
parentMenu.children &&
|
||||
parentMenu.children.some((child) => route.path.startsWith(child.path))
|
||||
) {
|
||||
layoutStore.setSelectedParentMenu(parentMenu)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新视图标签
|
||||
if (route.name && !route.meta?.hidden) {
|
||||
layoutStore.updateViewTags({
|
||||
name: route.name,
|
||||
path: route.path,
|
||||
fullPath: route.fullPath,
|
||||
title: route.meta?.title,
|
||||
meta: route.meta,
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-wrapper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
// 通用侧边栏样式
|
||||
.el-aside {
|
||||
transition: width 0.28s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--el-menu-bg-color);
|
||||
border-right: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
// Logo 样式
|
||||
.logo {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-mini {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-text-mini {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Header 样式
|
||||
.el-header {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background-color: var(--el-bg-color);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
.header-left,
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-regular);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main 样式
|
||||
.el-main {
|
||||
padding: 0;
|
||||
background-color: var(--el-bg-color-page);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认布局样式
|
||||
.layout-default {
|
||||
.first-sidebar {
|
||||
.menu-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
|
||||
.menu-item {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-regular);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.second-sidebar {
|
||||
.menu-scrollbar {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu 布局样式
|
||||
.layout-menu {
|
||||
.menu-sidebar {
|
||||
.menu-scrollbar {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top 布局样式
|
||||
.layout-top {
|
||||
.top-header {
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.logo {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边栏折叠状态
|
||||
.sidebar-collapsed {
|
||||
.logo-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user