test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-11-29 18:48:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor!: 配置项 menu.menuMode 变更为 menu.mode

Browse Source
This commit is contained in:
Hooray Hu 2024-06-24 17:16:27 +08:00
parent 3c8b4881b4
commit 57fcd2785c
13 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -20,7 +20,7 @@ const isAuth = computed(() => {
// 侧边栏主导航当前实际宽度
const mainSidebarActualWidth = computed(() => {
let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
if (settingsStore.settings.menu.menuMode === 'single' || (settingsStore.settings.menu.menuMode === 'head' && settingsStore.mode !== 'mobile')) {
if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
actualWidth = 0
}
return `${actualWidth}px`

14
src/layouts/components/AppSetting/index.vue
View File

@ -17,7 +17,7 @@ const menuStore = useMenuStore()
const isShow = ref(false)
watch(() => settingsStore.settings.menu.menuMode, (value) => {
watch(() => settingsStore.settings.menu.mode, (value) => {
if (value === 'single') {
menuStore.setActived(0)
}
@ -103,17 +103,17 @@ function handleCopy() {
</div>
<div v-if="settingsStore.mode === 'pc'" class="menu-mode">
<HTooltip text="侧边栏模式 (含主导航)" placement="bottom" :delay="500">
<div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
<div class="mode mode-side" :class="{ active: settingsStore.settings.menu.mode === 'side' }" @click="settingsStore.settings.menu.mode = 'side'">
<div class="mode-container" />
</div>
</HTooltip>
<HTooltip text="顶部模式" placement="bottom" :delay="500">
<div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
<div class="mode mode-head" :class="{ active: settingsStore.settings.menu.mode === 'head' }" @click="settingsStore.settings.menu.mode = 'head'">
<div class="mode-container" />
</div>
</HTooltip>
<HTooltip text="侧边栏模式 (不含主导航)" placement="bottom" :delay="500">
<div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
<div class="mode mode-single" :class="{ active: settingsStore.settings.menu.mode === 'single' }" @click="settingsStore.settings.menu.mode = 'single'">
<div class="mode-container" />
</div>
</HTooltip>
@ -128,7 +128,7 @@ function handleCopy() {
<SvgIcon name="i-ri:question-line" />
</HTooltip>
</div>
<HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
<HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
</div>
<div class="setting-item">
<div class="label">
@ -155,7 +155,7 @@ function handleCopy() {
<div class="label">
是否启用快捷键
</div>
<HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
<HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
</div>
<div class="divider">
顶栏
@ -380,7 +380,7 @@ function handleCopy() {
}
.mode-container {
--at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
--at-apply: bg-ui-primary/20 border-width-1.5 border-dashed border-ui-primary;
&::before {
--at-apply: content-empty absolute w-full h-full;

2
src/layouts/components/Header/index.vue
View File

@ -27,7 +27,7 @@ function handlerMouserScroll(event: WheelEvent) {
<template>
<Transition name="header">
<header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
<header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
<div class="header-container">
<Logo class="title" />
<div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">

2
src/layouts/components/HotkeysIntro/index.vue
View File

@ -38,7 +38,7 @@ onMounted(() => {
</li>
</ul>
</div>
<div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)">
<div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)">
<h2 class="m-0 text-lg font-bold">
主导航
</h2>

2
src/layouts/components/MainSidebar/index.vue
View File

@ -15,7 +15,7 @@ const { switchTo } = useMenu()
<template>
<Transition name="main-sidebar">
<div v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
<div v-if="settingsStore.settings.menu.mode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.mode !== 'single')" class="main-sidebar-container">
<Logo :show-title="false" class="sidebar-logo" />
<!-- 侧边栏模式（含主导航） -->
<div class="menu w-full flex flex-col of-hidden transition-all">

4
src/layouts/components/SubSidebar/index.vue
View File

@ -47,8 +47,8 @@ onMounted(() => {
}"
>
<Logo
:show-logo="settingsStore.settings.menu.menuMode === 'single'" class="sidebar-logo" :class="{
'sidebar-logo-bg': settingsStore.settings.menu.menuMode === 'single',
:show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
'sidebar-logo-bg': settingsStore.settings.menu.mode === 'single',
}"
/>
<div

2
src/layouts/components/Topbar/Toolbar/index.vue
View File

@ -15,7 +15,7 @@ const settingsStore = useSettingsStore()
<div class="h-full flex items-center of-hidden pl-2 pr-16" style="mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);">
<LeftSide />
</div>
<div v-show="['side', 'single'].includes(settingsStore.settings.menu.menuMode)" class="h-full flex items-center px-2">
<div v-show="['side', 'single'].includes(settingsStore.settings.menu.mode)" class="h-full flex items-center px-2">
<RightSide />
</div>
</div>

2
src/layouts/components/Topbar/index.vue
View File

@ -11,7 +11,7 @@ const settingsStore = useSettingsStore()
const enableToolbar = computed(() => {
return !(
settingsStore.settings.menu.menuMode === 'head' && (
settingsStore.settings.menu.mode === 'head' && (
!settingsStore.settings.toolbar.breadcrumb || settingsStore.settings.app.routeBaseOn === 'filesystem'
)
)

2
src/router/index.ts
View File

@ -30,7 +30,7 @@ router.beforeEach(async (to, from, next) => {
// 是否已根据权限动态生成并注册路由
if (routeStore.isGenerate) {
// 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
settingsStore.settings.menu.menuMode !== 'single' && menuStore.setActived(to.path)
settingsStore.settings.menu.mode !== 'single' && menuStore.setActived(to.path)
// 如果已登录状态下，进入登录页会强制跳转到主页
if (to.name === 'login') {
next({

2
src/settings.default.ts
View File

@ -20,7 +20,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
},
menu: {
baseOn: 'frontend',
menuMode: 'side',
mode: 'side',
switchMainMenuAndPageJump: false,
subMenuUniqueOpened: true,
subMenuCollapse: false,

2
src/store/modules/menu.ts
View File

@ -23,7 +23,7 @@ const useMenuStore = defineStore(
function convertRouteToMenu(routes: Route.recordMainRaw[]): Menu.recordMainRaw[] {
const returnMenus: Menu.recordMainRaw[] = []
routes.forEach((item) => {
if (settingsStore.settings.menu.menuMode === 'single') {
if (settingsStore.settings.menu.mode === 'single') {
returnMenus.length === 0 && returnMenus.push({
meta: {},
children: [],

2
src/store/modules/settings.ts
View File

@ -40,7 +40,7 @@ const useSettingsStore = defineStore(
}
}
watch(() => settings.value.menu.menuMode, (val) => {
watch(() => settings.value.menu.mode, (val) => {
document.body.setAttribute('data-menu-mode', val)
}, {
immediate: true,

2
src/types/global.d.ts vendored
View File

@ -76,7 +76,7 @@ declare namespace Settings {
* @可选值 `'head'` 顶部模式
* @可选值 `'single'` 侧边栏模式（无主导航）
*/
menuMode?: 'side' | 'head' | 'single'
mode?: 'side' | 'head' | 'single'
/**
* 切换主导航是否跳转页面
* @默认值 `false`