更新
This commit is contained in:
@@ -66,7 +66,8 @@ body {
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
// ==================== 暗色主题样式 ====================
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<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 }}
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
<a v-else class="redirect" @click.prevent="handleLink(item)">
|
||||
{{ item.meta?.title }}
|
||||
{{ item.meta.title }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
@@ -14,9 +14,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
// import { useI18n } from '@/hooks/useI18n'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutBreadcrumb',
|
||||
@@ -24,30 +23,36 @@ defineOptions({
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
// const { t } = useI18n()
|
||||
|
||||
// 面包屑列表
|
||||
const breadcrumbs = computed(() => {
|
||||
const matched = route.matched.filter((item) => item.meta && item.meta.title)
|
||||
const levelList = ref([])
|
||||
|
||||
const getBreadcrumb = () => {
|
||||
let matched = route.matched.filter((item) => {
|
||||
if (item.meta && item.meta.title) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
const first = matched[0]
|
||||
|
||||
if (!first || !first.meta?.title) {
|
||||
return []
|
||||
if (!isDashboard(first)) {
|
||||
matched = [{ path: '/dashboard', meta: { title: '首页' } }].concat(matched)
|
||||
}
|
||||
|
||||
// 如果第一个不是首页，添加首页
|
||||
// if (first.path !== '/') {
|
||||
// matched.unshift({
|
||||
// path: '/',
|
||||
// meta: { title: '首页' },
|
||||
// })
|
||||
// }
|
||||
levelList.value = matched.filter(
|
||||
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
|
||||
)
|
||||
}
|
||||
|
||||
return matched
|
||||
})
|
||||
const isDashboard = (route) => {
|
||||
const name = route && route.name
|
||||
if (!name) {
|
||||
return false
|
||||
}
|
||||
return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
|
||||
}
|
||||
|
||||
// 处理点击
|
||||
const handleLink = (item) => {
|
||||
const { redirect, path } = item
|
||||
if (redirect) {
|
||||
@@ -56,52 +61,46 @@ const handleLink = (item) => {
|
||||
}
|
||||
router.push(path)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
getBreadcrumb()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-breadcrumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
:deep(.el-breadcrumb__item) {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.el-breadcrumb__inner {
|
||||
font-weight: 400;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:last-child .el-breadcrumb__inner {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
line-height: 50px;
|
||||
margin-left: 8px;
|
||||
|
||||
.no-redirect {
|
||||
color: var(--el-text-color-primary);
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.redirect {
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-to {
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 无子菜单 -->
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
||||
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path" @click="handleMenuClick(menu)">
|
||||
<el-icon v-if="menu.meta?.icon">
|
||||
<component :is="menu.meta.icon" />
|
||||
</el-icon>
|
||||
@@ -25,8 +25,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
defineOptions({
|
||||
name: 'MenuItem',
|
||||
name: 'LayoutMenuItem',
|
||||
})
|
||||
|
||||
defineProps({
|
||||
@@ -40,60 +43,25 @@ defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 判断是否有子菜单
|
||||
const hasChildren = (menu) => {
|
||||
return menu.children && menu.children.length > 0
|
||||
}
|
||||
|
||||
// 处理菜单点击
|
||||
const handleMenuClick = (menu) => {
|
||||
if (menu.meta?.link) {
|
||||
// 外部链接
|
||||
window.open(menu.meta.link, '_blank')
|
||||
} else if (menu.path) {
|
||||
// 内部路由
|
||||
router.push(menu.path)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 子菜单项样式
|
||||
:deep(.el-sub-menu) {
|
||||
.el-sub-menu__title {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 子菜单内容区
|
||||
.el-menu {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
// 菜单项样式
|
||||
.el-menu-item {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图标样式优化
|
||||
:deep(.el-icon) {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// 箭头图标动画
|
||||
:deep(.el-sub-menu__icon-arrow) {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.el-sub-menu.is-opened > .el-sub-menu__title & {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单文本样式
|
||||
:deep(span) {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
// 菜单项样式继承自 Element Plus
|
||||
</style>
|
||||
|
||||
@@ -1,152 +0,0 @@
|
||||
<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;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// 菜单项样式
|
||||
:deep(.el-menu-item) {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 子菜单样式
|
||||
:deep(.el-sub-menu__title) {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light) !important;
|
||||
}
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
// 图标样式
|
||||
:deep(.el-icon) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// 折叠状态
|
||||
&.el-menu--collapse {
|
||||
:deep(.el-menu-item),
|
||||
:deep(.el-sub-menu__title) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
:deep(.el-icon) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,141 +1,51 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<!-- 设置按钮 -->
|
||||
<div class="setting-btn" @click="showDrawer = true">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
<div class="drawer-container">
|
||||
<el-drawer v-model="drawerVisible" title="布局设置" size="280px">
|
||||
<el-scrollbar>
|
||||
<el-form label-width="100px" label-position="left">
|
||||
<el-form-item label="布局模式">
|
||||
<el-select v-model="layoutMode" placeholder="请选择" @change="handleLayoutModeChange">
|
||||
<el-option label="默认布局" value="default" />
|
||||
<el-option label="菜单布局" value="menu" />
|
||||
<el-option label="顶部布局" value="top" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="主题颜色">
|
||||
<el-color-picker v-model="themeColor" @change="handleThemeChange" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>显示设置</el-divider>
|
||||
|
||||
<el-form-item label="显示标签栏">
|
||||
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="显示面包屑">
|
||||
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider>其他</el-divider>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleReset">重置设置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
|
||||
<div class="setting-btn" @click="drawerVisible = true">
|
||||
<el-icon :size="24">
|
||||
<component :is="'ElIconSetting'" />
|
||||
</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 { ref, computed } from 'vue'
|
||||
import { useLayoutStore } from '../../stores/modules/layout'
|
||||
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',
|
||||
@@ -143,350 +53,94 @@ defineOptions({
|
||||
|
||||
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 drawerVisible = ref(false)
|
||||
|
||||
// 布局模式
|
||||
const layoutMode = computed({
|
||||
get: () => layoutStore.layoutMode,
|
||||
set: (val) => layoutStore.setLayoutMode(val),
|
||||
set: (value) => {
|
||||
layoutStore.setLayoutMode(value)
|
||||
},
|
||||
})
|
||||
|
||||
// 主题色
|
||||
const themeColor = ref(layoutStore.themeColor)
|
||||
|
||||
// 主题模式（深色/浅色）
|
||||
const isDark = ref(document.documentElement.classList.contains('dark'))
|
||||
// 主题颜色
|
||||
const themeColor = computed({
|
||||
get: () => layoutStore.themeColor,
|
||||
set: (value) => {
|
||||
layoutStore.setThemeColor(value)
|
||||
},
|
||||
})
|
||||
|
||||
// 显示标签栏
|
||||
const showTags = computed({
|
||||
get: () => layoutStore.showTags,
|
||||
set: (val) => layoutStore.setShowTags(val),
|
||||
set: (value) => {
|
||||
layoutStore.setShowTags(value)
|
||||
},
|
||||
})
|
||||
|
||||
// 显示面包屑
|
||||
const showBreadcrumb = computed({
|
||||
get: () => layoutStore.showBreadcrumb,
|
||||
set: (val) => layoutStore.setShowBreadcrumb(val),
|
||||
set: (value) => {
|
||||
layoutStore.setShowBreadcrumb(value)
|
||||
},
|
||||
})
|
||||
|
||||
// 布局模式变化
|
||||
const handleLayoutModeChange = (value) => {
|
||||
console.log('Layout mode changed:', value)
|
||||
layoutStore.setLayoutMode(value)
|
||||
ElMessage.success('布局模式已切换')
|
||||
}
|
||||
|
||||
// 主题色变化
|
||||
const handleThemeColorChange = (value) => {
|
||||
if (value) {
|
||||
layoutStore.setThemeColor(value)
|
||||
}
|
||||
// 主题颜色变化
|
||||
const handleThemeChange = (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('已重置为默认配置')
|
||||
ElMessage.success('设置已重置')
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
themeColor.value = layoutStore.themeColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-container {
|
||||
// 设置按钮
|
||||
.drawer-container {
|
||||
.setting-btn {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 9999;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--el-color-primary);
|
||||
background: var(--primary-color);
|
||||
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 cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 56px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.el-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置内容
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,214 +1,278 @@
|
||||
<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>
|
||||
|
||||
<div class="tags-view-wrapper" @wheel="handleWheel">
|
||||
<div
|
||||
ref="scrollRef"
|
||||
class="scroll-content"
|
||||
:style="{ transform: `translateX(${scrollState.translateX}px)`, transition: scrollState.transition }"
|
||||
>
|
||||
<router-link
|
||||
v-for="(tag, index) in visitedViews"
|
||||
:id="`scroll-li-${index}`"
|
||||
:key="tag.path"
|
||||
:class="isActive(tag) ? 'active' : ''"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
class="tags-view-item"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
<el-icon v-if="!isAffix(tag)" class="close-icon" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<ElIconClose />
|
||||
</el-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
<el-icon><ElIconRefresh /></el-icon>
|
||||
刷新
|
||||
</li>
|
||||
<li v-if="!selectedTag?.meta?.affix" @click="closeSelectedTag(selectedTag)">
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<el-icon><ElIconClose /></el-icon>
|
||||
关闭
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<el-icon>
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
<el-icon><ElIconCircleClose /></el-icon>
|
||||
关闭其他
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<el-icon>
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
关闭全部
|
||||
<el-icon><ElIconFolderDelete /></el-icon>
|
||||
关闭所有
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { ref, computed, watch, onMounted, nextTick } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
import { Close, Refresh, CircleClose, CircleCloseFilled } from '@element-plus/icons-vue'
|
||||
import { useLayoutStore } from '../../stores/modules/layout'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutTags',
|
||||
name: 'TagsView',
|
||||
})
|
||||
|
||||
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 selectedTag = ref({})
|
||||
const affixTags = ref([])
|
||||
|
||||
// 可见的标签（去重）
|
||||
const visibleTags = computed(() => {
|
||||
const tags = layoutStore.viewTags || []
|
||||
// 使用 Map 根据 fullPath 去重，保留最后出现的
|
||||
const tagMap = new Map()
|
||||
tags.forEach((tag) => {
|
||||
if (tag.fullPath) {
|
||||
tagMap.set(tag.fullPath, tag)
|
||||
}
|
||||
})
|
||||
return Array.from(tagMap.values())
|
||||
const scrollRef = ref(null)
|
||||
const scrollState = ref({
|
||||
translateX: 0,
|
||||
transition: ''
|
||||
})
|
||||
|
||||
const visitedViews = computed(() => layoutStore.viewTags)
|
||||
const activeTabIndex = computed(() => {
|
||||
const index = visitedViews.value.findIndex(view => view.path === route.path)
|
||||
return index
|
||||
})
|
||||
|
||||
// 判断是否激活
|
||||
const isActive = (tag) => {
|
||||
return tag.fullPath === route.fullPath
|
||||
return tag.path === route.path
|
||||
}
|
||||
|
||||
// 过滤固定的标签
|
||||
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]
|
||||
}
|
||||
const isAffix = (tag) => {
|
||||
return tag.meta && tag.meta.affix
|
||||
}
|
||||
|
||||
// 滚动逻辑
|
||||
const setTransition = () => {
|
||||
scrollState.value.transition = 'transform 0.5s cubic-bezier(0.15, 0, 0.15, 1)'
|
||||
setTimeout(() => {
|
||||
scrollState.value.transition = ''
|
||||
}, 250)
|
||||
}
|
||||
|
||||
const getCurrentTabElement = () => {
|
||||
const index = activeTabIndex.value
|
||||
return index >= 0 ? document.getElementById(`scroll-li-${index}`) : null
|
||||
}
|
||||
|
||||
const calculateScrollPosition = () => {
|
||||
if (!scrollRef.value) return null
|
||||
|
||||
const scrollWrapper = scrollRef.value.parentElement
|
||||
if (!scrollWrapper) return null
|
||||
|
||||
const scrollWidth = scrollWrapper.offsetWidth
|
||||
const ulWidth = scrollRef.value.offsetWidth
|
||||
const curTabEl = getCurrentTabElement()
|
||||
|
||||
if (!curTabEl) return null
|
||||
|
||||
const { offsetLeft, clientWidth } = curTabEl
|
||||
const curTabRight = offsetLeft + clientWidth
|
||||
const targetLeft = scrollWidth - curTabRight
|
||||
|
||||
return {
|
||||
scrollWidth,
|
||||
ulWidth,
|
||||
offsetLeft,
|
||||
clientWidth,
|
||||
curTabRight,
|
||||
targetLeft
|
||||
}
|
||||
}
|
||||
|
||||
const autoPositionTab = () => {
|
||||
const positions = calculateScrollPosition()
|
||||
if (!positions) return
|
||||
|
||||
const { scrollWidth, ulWidth, offsetLeft, curTabRight, targetLeft } = positions
|
||||
const currentTranslateX = scrollState.value.translateX
|
||||
|
||||
if ((offsetLeft > Math.abs(currentTranslateX) && curTabRight <= scrollWidth) ||
|
||||
(currentTranslateX < targetLeft && targetLeft < 0)) {
|
||||
return
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (curTabRight > scrollWidth) {
|
||||
scrollState.value.translateX = Math.max(targetLeft - 6, scrollWidth - ulWidth)
|
||||
} else if (offsetLeft < Math.abs(currentTranslateX)) {
|
||||
scrollState.value.translateX = -offsetLeft
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}
|
||||
|
||||
// 初始化标签
|
||||
const initTags = () => {
|
||||
affixTags.value = filterAffixTags(route.matched)
|
||||
for (const tag of affixTags.value) {
|
||||
if (tag.name) {
|
||||
layoutStore.updateViewTags(tag)
|
||||
}
|
||||
}
|
||||
const adjustPositionAfterClose = () => {
|
||||
const positions = calculateScrollPosition()
|
||||
if (!positions) return
|
||||
|
||||
const { scrollWidth, ulWidth, offsetLeft, clientWidth } = positions
|
||||
const curTabLeft = offsetLeft + clientWidth
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
scrollState.value.translateX = curTabLeft > scrollWidth ? scrollWidth - ulWidth : 0
|
||||
})
|
||||
}
|
||||
|
||||
// 添加标签
|
||||
const addTags = () => {
|
||||
if (route.name && !route.meta?.hidden) {
|
||||
const { name } = route
|
||||
if (name) {
|
||||
layoutStore.updateViewTags({
|
||||
name: route.name,
|
||||
path: route.path,
|
||||
fullPath: route.fullPath,
|
||||
title: route.meta?.title,
|
||||
name: name,
|
||||
title: route.meta.title,
|
||||
meta: route.meta,
|
||||
query: route.query,
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 关闭标签
|
||||
const closeTag = (tag) => {
|
||||
layoutStore.removeViewTags(tag.fullPath)
|
||||
if (isActive(tag)) {
|
||||
toLastView(tag)
|
||||
const closeSelectedTag = (view) => {
|
||||
layoutStore.removeViewTags(view.fullPath)
|
||||
setTransition()
|
||||
nextTick(() => {
|
||||
adjustPositionAfterClose()
|
||||
})
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews.value, view)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭选中的标签
|
||||
const closeSelectedTag = (tag) => {
|
||||
closeTag(tag)
|
||||
const closeOthersTags = () => {
|
||||
router.push(selectedTag.value)
|
||||
layoutStore.viewTags = visitedViews.value.filter((tag) => {
|
||||
return tag.meta && tag.meta.affix || tag.fullPath === selectedTag.value.fullPath
|
||||
})
|
||||
setTransition()
|
||||
}
|
||||
|
||||
// 跳转到最后一个标签
|
||||
const toLastView = (tag) => {
|
||||
const views = visibleTags.value
|
||||
const latestView = views.slice(-1)[0]
|
||||
const closeAllTags = (view) => {
|
||||
layoutStore.viewTags = visitedViews.value.filter((tag) => tag.meta && tag.meta.affix)
|
||||
setTransition()
|
||||
if (view && view.fullPath) {
|
||||
toLastView(visitedViews.value, view)
|
||||
} else {
|
||||
toLastView(layoutStore.viewTags)
|
||||
}
|
||||
}
|
||||
|
||||
const toLastView = (visitedViews, view) => {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
} else {
|
||||
// 如果没有标签，跳转到首页
|
||||
router.push('/')
|
||||
if (view.name === 'Dashboard') {
|
||||
router.replace({ path: '/redirect' + view.fullPath })
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他标签
|
||||
const closeOthersTags = () => {
|
||||
router.push(selectedTag.value.fullPath)
|
||||
layoutStore.clearViewTags()
|
||||
addTags()
|
||||
for (const tag of affixTags.value) {
|
||||
layoutStore.updateViewTags(tag)
|
||||
}
|
||||
const refreshSelectedTag = (view) => {
|
||||
layoutStore.removeViewTags(view.fullPath)
|
||||
const { fullPath } = view
|
||||
layoutStore.updateViewTags({
|
||||
path: view.path,
|
||||
fullPath: view.fullPath,
|
||||
name: view.name,
|
||||
title: view.meta.title,
|
||||
meta: view.meta,
|
||||
query: view.query,
|
||||
})
|
||||
router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭所有标签
|
||||
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 scrollWrapper = scrollRef.value?.parentElement
|
||||
if (!scrollWrapper) return
|
||||
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = e.clientX - container.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = container.offsetWidth - 100
|
||||
const offsetLeft = scrollWrapper.getBoundingClientRect().left || 0
|
||||
const offsetWidth = scrollWrapper.offsetWidth || 0
|
||||
const maxLeft = offsetWidth - menuMinWidth
|
||||
left.value = offsetLeft > maxLeft ? maxLeft : offsetLeft
|
||||
left.value = e.clientX - offsetLeft + 15
|
||||
|
||||
if (left.value > maxLeft) {
|
||||
left.value = maxLeft
|
||||
}
|
||||
|
||||
top.value = e.clientY
|
||||
visible.value = true
|
||||
selectedTag.value = tag
|
||||
}
|
||||
|
||||
// 关闭右键菜单
|
||||
const closeMenu = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 容器引用
|
||||
let container = null
|
||||
const handleWheel = (e) => {
|
||||
const scrollWrapper = scrollRef.value?.parentElement
|
||||
if (!scrollWrapper) return
|
||||
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
addTags()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
const scrollWidth = scrollWrapper.offsetWidth
|
||||
const tagElements = scrollRef.value?.querySelectorAll('.tags-view-item')
|
||||
if (!tagElements || tagElements.length === 0) return
|
||||
|
||||
const ulWidth = scrollRef.value.offsetWidth
|
||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||
const currentScroll = -scrollState.value.translateX
|
||||
const newScroll = Math.max(0, Math.min(currentScroll + eventDelta, scrollWidth - ulWidth))
|
||||
scrollState.value.translateX = -newScroll
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
nextTick(() => {
|
||||
setTransition()
|
||||
autoPositionTab()
|
||||
})
|
||||
})
|
||||
|
||||
// 监听右键菜单可见性
|
||||
watch(visible, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu)
|
||||
@@ -219,8 +283,10 @@ watch(visible, (value) => {
|
||||
|
||||
onMounted(() => {
|
||||
addTags()
|
||||
initTags()
|
||||
container = document.querySelector('.tags-view-container')
|
||||
nextTick(() => {
|
||||
setTransition()
|
||||
autoPositionTab()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -228,152 +294,125 @@ onMounted(() => {
|
||||
.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);
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.tags-view-wrapper {
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
height: 34px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
.scroll-content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--el-border-color-darker);
|
||||
.tags-view-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__bar.is-horizontal) {
|
||||
height: 0;
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
background: #ecf5ff;
|
||||
border-color: #b3d8ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
border-color: #409eff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view-item {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
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 12px;
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 3000;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
min-width: 100px;
|
||||
|
||||
&: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);
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.3);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
display: inline-flex;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
gap: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: var(--el-color-danger);
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,311 +1,187 @@
|
||||
<template>
|
||||
<div class="userbar-container">
|
||||
<!-- 全屏切换 -->
|
||||
<el-tooltip content="全屏" placement="bottom">
|
||||
<div class="icon-btn" @click="toggleFullScreen">
|
||||
<el-icon v-if="!isFullScreen">
|
||||
<FullScreen />
|
||||
<div class="navbar-right">
|
||||
<div class="right-item">
|
||||
<el-tooltip content="全屏" placement="bottom">
|
||||
<el-icon class="icon-btn" @click="toggleFullScreen">
|
||||
<component :is="isFullscreen ? 'ElIconFullScreen' : 'ElIconAim'" />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Aim />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 语言切换 -->
|
||||
<el-dropdown trigger="click" @command="handleLanguageChange">
|
||||
<div class="icon-btn">
|
||||
<el-icon>
|
||||
<Location />
|
||||
<div class="right-item">
|
||||
<el-tooltip content="刷新" placement="bottom">
|
||||
<el-icon class="icon-btn" @click="refreshPage">
|
||||
<component :is="'ElIconRefresh'" />
|
||||
</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-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 主题设置 -->
|
||||
<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 class="right-item">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
<el-avatar :size="32" :src="userInfo.avatar || ''">
|
||||
<el-icon><component :is="'ElIconUser'" /></el-icon>
|
||||
</el-avatar>
|
||||
<span class="username">{{ userInfo.username || '用户' }}</span>
|
||||
<el-icon class="el-icon--right"><component :is="'ElIconArrowDown'" /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="profile">
|
||||
<el-icon><component :is="'ElIconUser'" /></el-icon>
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="settings">
|
||||
<el-icon><component :is="'ElIconSetting'" /></el-icon>
|
||||
设置
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">
|
||||
<el-icon><component :is="'ElIconSwitchButton'" /></el-icon>
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { 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'
|
||||
import { useUserStore } from '../../stores/modules/user'
|
||||
import { useLayoutStore } from '../../stores/modules/layout'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutUserbar',
|
||||
name: 'UserBar',
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const i18nStore = useI18nStore()
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
// 全屏状态
|
||||
const isFullScreen = ref(false)
|
||||
const isFullscreen = ref(false)
|
||||
const userInfo = ref({
|
||||
username: '',
|
||||
avatar: '',
|
||||
})
|
||||
|
||||
// 消息数量
|
||||
const messageCount = ref(0)
|
||||
// 切换全屏
|
||||
const toggleFullScreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
isFullscreen.value = true
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
isFullscreen.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 当前语言
|
||||
const currentLanguage = computed(() => i18nStore.locale)
|
||||
// 刷新页面
|
||||
const refreshPage = () => {
|
||||
layoutStore.refreshTag()
|
||||
router.replace({
|
||||
path: '/redirect' + router.currentRoute.value.fullPath
|
||||
})
|
||||
}
|
||||
|
||||
// 处理下拉菜单命令
|
||||
const handleCommand = (command) => {
|
||||
switch (command) {
|
||||
case 'home':
|
||||
router.push('/')
|
||||
break
|
||||
case 'profile':
|
||||
router.push('/profile')
|
||||
router.push('/ucenter/profile')
|
||||
break
|
||||
case 'settings':
|
||||
router.push('/settings')
|
||||
router.push('/ucenter/settings')
|
||||
break
|
||||
case 'logout':
|
||||
handleLogout()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
userStore.logout()
|
||||
router.push('/login')
|
||||
ElMessage.success('退出成功')
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消退出
|
||||
})
|
||||
userStore.logout()
|
||||
ElMessage.success('退出登录成功')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullScreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen()
|
||||
isFullScreen.value = true
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
isFullScreen.value = false
|
||||
// 获取用户信息
|
||||
const getUserInfo = () => {
|
||||
const info = userStore.userInfo
|
||||
if (info) {
|
||||
userInfo.value = {
|
||||
username: info.username || info.nickName || '用户',
|
||||
avatar: info.avatar || '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听全屏变化
|
||||
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('主题切换成功')
|
||||
const handleFullscreenChange = () => {
|
||||
isFullscreen.value = !!document.fullscreenElement
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('fullscreenchange', handleFullScreenChange)
|
||||
getUserInfo()
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', handleFullScreenChange)
|
||||
document.removeEventListener('fullscreenchange', handleFullscreenChange)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.userbar-container {
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
|
||||
.avatar-wrapper {
|
||||
.right-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.icon-btn {
|
||||
font-size: 20px;
|
||||
color: #5a5e66;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
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 cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.avatar-wrapper:hover & {
|
||||
transform: rotate(180deg);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
color: var(--el-text-color-regular);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
.el-dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #5a5e66;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.username {
|
||||
margin: 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-icon--right {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-badge__content) {
|
||||
transform: translateY(-8px) translateX(8px);
|
||||
border: 2px solid var(--el-bg-color);
|
||||
}
|
||||
|
||||
:deep(.el-badge__content.is-fixed) {
|
||||
transform: translateY(-8px) translateX(8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式优化
|
||||
:deep(.el-dropdown-menu__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,13 @@
|
||||
<img :src="logo" alt="logo" />
|
||||
</div>
|
||||
<div class="menu-list">
|
||||
<div v-for="menu in parentMenus" :key="menu.path" class="menu-item" :class="{ active: selectedParentMenu?.path === menu.path }" @click="handleParentMenuClick(menu)">
|
||||
<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>
|
||||
@@ -19,13 +25,15 @@
|
||||
|
||||
<!-- 二级菜单栏 -->
|
||||
<el-aside :width="sidebarCollapsed ? '60px' : '220px'" class="second-sidebar">
|
||||
<div v-if="!sidebarCollapsed" class="logo logo-only">
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text hidden">{{ logoText }}</span>
|
||||
<div v-if="!sidebarCollapsed && selectedParentMenu" class="second-sidebar-header">
|
||||
<el-icon v-if="selectedParentMenu.meta?.icon" class="menu-icon">
|
||||
<component :is="selectedParentMenu.meta.icon" />
|
||||
</el-icon>
|
||||
<span class="menu-title">{{ selectedParentMenu.meta?.title }}</span>
|
||||
</div>
|
||||
<el-scrollbar class="menu-scrollbar">
|
||||
<menu-component />
|
||||
</el-scrollbar>
|
||||
<el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" :collapse-transition="false">
|
||||
<layout-menu-item :menu-list="childMenus" />
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
@@ -35,14 +43,14 @@
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'ElIconExpand' : 'ElIconFold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
<layout-breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<tags v-if="showTags" />
|
||||
<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" />
|
||||
@@ -60,9 +68,9 @@
|
||||
<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-menu :default-active="activeMenu" :collapse="sidebarCollapsed" :collapse-transition="false">
|
||||
<layout-menu-item :menu-list="allMenus" />
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container class="main-container">
|
||||
<el-header class="app-header">
|
||||
@@ -70,13 +78,13 @@
|
||||
<el-icon class="collapse-icon" @click="toggleSidebar">
|
||||
<component :is="sidebarCollapsed ? 'ElIconExpand' : 'ElIconFold'" />
|
||||
</el-icon>
|
||||
<breadcrumb v-if="showBreadcrumb" />
|
||||
<layout-breadcrumb v-if="showBreadcrumb" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<tags v-if="showTags" />
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<tags v-if="showTags" />
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="cachedViews">
|
||||
@@ -97,14 +105,16 @@
|
||||
<img v-if="logo" :src="logo" alt="logo" />
|
||||
<span class="logo-text">{{ logoText }}</span>
|
||||
</div>
|
||||
<menu-component mode="horizontal" />
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false">
|
||||
<layout-menu-item :menu-list="allMenus" />
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<userbar />
|
||||
</div>
|
||||
</el-header>
|
||||
<tags v-if="showTags" />
|
||||
<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" />
|
||||
@@ -117,60 +127,87 @@
|
||||
</el-container>
|
||||
|
||||
<!-- 设置组件 -->
|
||||
<setting />
|
||||
<layout-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 { useRoute } from 'vue-router'
|
||||
import { useUserStore } from '../stores/modules/user'
|
||||
import { useLayoutStore } from '../stores/modules/layout'
|
||||
import LayoutMenuItem from './components/menu-item.vue'
|
||||
import LayoutBreadcrumb 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'
|
||||
import LayoutSetting from './components/setting.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'AppLayouts',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const layoutStore = useLayoutStore()
|
||||
const userStore = useUserStore()
|
||||
const layoutStore = useLayoutStore()
|
||||
|
||||
// Logo 配置
|
||||
const logo = config.LOGO
|
||||
const logoText = config.APP_NAME
|
||||
// Logo配置
|
||||
const logo = computed(() => {
|
||||
return new URL('../assets/logo.png', import.meta.url).href
|
||||
})
|
||||
|
||||
// 布局相关状态
|
||||
const logoText = computed(() => {
|
||||
return import.meta.env.VITE_APP_TITLE || 'Admin'
|
||||
})
|
||||
|
||||
// 布局相关
|
||||
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 allMenus = computed(() => {
|
||||
return userStore.getMenu() || []
|
||||
})
|
||||
|
||||
const parentMenus = computed(() => {
|
||||
return allMenus.value.filter((menu) => !menu.meta?.hidden)
|
||||
})
|
||||
|
||||
const childMenus = computed(() => {
|
||||
if (!selectedParentMenu.value) {
|
||||
return []
|
||||
}
|
||||
return selectedParentMenu.value.children || []
|
||||
})
|
||||
|
||||
const selectedParentMenu = computed({
|
||||
get: () => layoutStore.selectedParentMenu,
|
||||
set: (value) => layoutStore.setSelectedParentMenu(value),
|
||||
})
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = route
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
// 缓存的视图
|
||||
const cachedViews = computed(() => {
|
||||
return viewTags.value.filter((tag) => tag.meta?.keepAlive).map((tag) => tag.name)
|
||||
return layoutStore.viewTags.map((tag) => tag.name).filter((name) => name)
|
||||
})
|
||||
|
||||
// 父级菜单（一级菜单）
|
||||
const parentMenus = computed(() => {
|
||||
const menus = userStore.getMenu() || []
|
||||
return menus.filter((menu) => !menu.meta?.hidden && menu.children && menu.children.length > 0)
|
||||
// 布局样式类
|
||||
const layoutClass = computed(() => {
|
||||
return {
|
||||
'layout-default': layoutMode.value === 'default',
|
||||
'layout-menu': layoutMode.value === 'menu',
|
||||
'layout-top': layoutMode.value === 'top',
|
||||
'sidebar-collapsed': sidebarCollapsed.value,
|
||||
}
|
||||
})
|
||||
|
||||
// 切换侧边栏
|
||||
@@ -178,380 +215,254 @@ 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)
|
||||
}
|
||||
}
|
||||
selectedParentMenu.value = menu
|
||||
}
|
||||
|
||||
// 监听路由变化，自动更新选中的父菜单
|
||||
// 监听路由变化，自动选择父菜单
|
||||
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
|
||||
const path = route.path
|
||||
const parent = parentMenus.value.find((menu) => {
|
||||
if (menu.path === path || path.startsWith(menu.path + '/')) {
|
||||
return true
|
||||
}
|
||||
if (menu.children) {
|
||||
return menu.children.some((child) => child.path === path || path.startsWith(child.path + '/'))
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
if (parent && (!selectedParentMenu.value || !path.startsWith(selectedParentMenu.value.path + '/'))) {
|
||||
selectedParentMenu.value = parent
|
||||
}
|
||||
}
|
||||
|
||||
// 更新视图标签
|
||||
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 },
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
// 通用侧边栏样式
|
||||
.el-aside {
|
||||
transition: width 0.28s;
|
||||
&.layout-default {
|
||||
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，隐藏名称
|
||||
&.logo-only .logo-text.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.logo-only {
|
||||
justify-content: center;
|
||||
img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.first-sidebar {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
background: #001529;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
|
||||
.menu-item {
|
||||
.logo-mini {
|
||||
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;
|
||||
background: #002140;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
.menu-item {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.second-sidebar {
|
||||
background: #fff;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: width 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.second-sidebar-header {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
background: #fafafa;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.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;
|
||||
.menu-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.second-sidebar {
|
||||
.menu-scrollbar {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.layout-menu {
|
||||
display: flex;
|
||||
|
||||
// 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;
|
||||
.menu-sidebar {
|
||||
background: #fff;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: width 0.3s;
|
||||
|
||||
.logo {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
|
||||
// 侧边栏折叠状态
|
||||
.sidebar-collapsed {
|
||||
.logo-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media screen and (max-width: 768px) {
|
||||
// 小屏幕优化
|
||||
.layout-default {
|
||||
.first-sidebar {
|
||||
width: 50px !important;
|
||||
|
||||
.menu-item {
|
||||
height: 45px;
|
||||
|
||||
.el-icon {
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 10px;
|
||||
&.layout-top {
|
||||
.top-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding: 0 20px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 40px;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-mini img {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.second-sidebar {
|
||||
position: fixed;
|
||||
left: 50px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background: var(--el-bg-color);
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-menu {
|
||||
.menu-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background: var(--el-bg-color);
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Header 优化
|
||||
.el-header {
|
||||
padding: 0 12px;
|
||||
|
||||
.header-left,
|
||||
.header-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.breadcrumb) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tags 优化
|
||||
.tags-view-item {
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
// 超小屏幕优化
|
||||
.layout-default {
|
||||
.first-sidebar {
|
||||
width: 45px !important;
|
||||
}
|
||||
|
||||
.second-sidebar {
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-menu {
|
||||
.menu-sidebar {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Header 优化
|
||||
.el-header {
|
||||
padding: 0 8px;
|
||||
|
||||
.header-left,
|
||||
.header-right {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
padding: 4px 8px;
|
||||
|
||||
.username {
|
||||
display: none;
|
||||
.el-menu {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Logo 优化
|
||||
.logo {
|
||||
img {
|
||||
height: 28px;
|
||||
.main-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.app-header {
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.collapse-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
margin-right: 16px;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
.app-main {
|
||||
flex: 1;
|
||||
background: #f0f2f5;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
|
||||
.iframe-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,9 +48,8 @@ const goHome = () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/assets/style/auth.scss';
|
||||
|
||||
.not-found-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -30,7 +30,6 @@
|
||||
|
||||
<script setup>
|
||||
import { Box } from '@element-plus/icons-vue'
|
||||
import '@/assets/style/auth.scss'
|
||||
|
||||
defineProps({
|
||||
description: {
|
||||
@@ -59,9 +58,8 @@ const handleAction = () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/assets/style/auth.scss';
|
||||
|
||||
.empty-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user