mirror of
https://github.com/un-pany/v3-admin-vite.git
synced 2025-04-22 03:49:19 +08:00
导航栏添加设置按钮
This commit is contained in:
kubeops
parent
db82a33c45
commit
5f31094e7e
103
src/components/Settings/SelectLayoutMode.vue
Normal file
103
src/components/Settings/SelectLayoutMode.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<script lang="ts" setup>
|
||||
import { useLayoutMode } from "@/hooks/useLayoutMode"
|
||||
import { LayoutModeEnum } from "@/constants/app-key"
|
||||
|
||||
const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="select-layout-mode">
|
||||
<el-tooltip content="左侧模式">
|
||||
<el-container class="layout-mode left" :class="{ active: isLeft }" @click="setLayoutMode(LayoutModeEnum.Left)">
|
||||
<el-aside />
|
||||
<el-container>
|
||||
<el-header />
|
||||
<el-main />
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="顶部模式">
|
||||
<el-container class="layout-mode top" :class="{ active: isTop }" @click="setLayoutMode(LayoutModeEnum.Top)">
|
||||
<el-header />
|
||||
<el-main />
|
||||
</el-container>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="混合模式">
|
||||
<el-container
|
||||
class="layout-mode left-top"
|
||||
:class="{ active: isLeftTop }"
|
||||
@click="setLayoutMode(LayoutModeEnum.LeftTop)"
|
||||
>
|
||||
<el-header />
|
||||
<el-container>
|
||||
<el-aside />
|
||||
<el-main />
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-layout-mode {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout-mode {
|
||||
width: 60px;
|
||||
flex-grow: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent;
|
||||
&:hover {
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-header {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.left {
|
||||
.el-header {
|
||||
background-color: var(--el-fill-color-darker);
|
||||
}
|
||||
.el-aside {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.el-main {
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
.el-header {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.el-main {
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.left-top {
|
||||
.el-header {
|
||||
background-color: var(--el-fill-color-darker);
|
||||
}
|
||||
.el-aside {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.el-main {
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
src/components/Settings/index.vue
Normal file
97
src/components/Settings/index.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="设置" placement="bottom">
|
||||
<el-button :icon="Setting" circle @click="show = true" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-drawer v-model="show" size="300px" :with-header="false">
|
||||
<div class="setting-container">
|
||||
<h4>布局配置</h4>
|
||||
<SelectLayoutMode />
|
||||
<el-divider />
|
||||
<h4>功能配置</h4>
|
||||
<div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
|
||||
<span class="setting-name">{{ settingName }}</span>
|
||||
<el-switch v-model="settingValue.value" :disabled="!isLeft && settingName === '固定 Header'" />
|
||||
</div>
|
||||
<el-button type="danger" :icon="Refresh" @click="resetConfigLayout">重 置</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
import { watchEffect } from "vue"
|
||||
import { storeToRefs } from "pinia"
|
||||
import { useSettingsStore } from "@/store/modules/settings"
|
||||
import { useLayoutMode } from "@/hooks/useLayoutMode"
|
||||
import { resetConfigLayout } from "@/utils"
|
||||
import { Setting, Refresh } from "@element-plus/icons-vue"
|
||||
import SelectLayoutMode from "./SelectLayoutMode.vue"
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
const { isLeft } = useLayoutMode()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
/** 使用 storeToRefs 将提取的属性保持其响应性 */
|
||||
const {
|
||||
showTagsView,
|
||||
showLogo,
|
||||
fixedHeader,
|
||||
showFooter,
|
||||
showNotify,
|
||||
showThemeSwitch,
|
||||
showScreenfull,
|
||||
showSearchMenu,
|
||||
cacheTagsView,
|
||||
showWatermark,
|
||||
showGreyMode,
|
||||
showColorWeakness
|
||||
} = storeToRefs(settingsStore)
|
||||
|
||||
/** 定义 switch 设置项 */
|
||||
const switchSettings = {
|
||||
显示标签栏: showTagsView,
|
||||
"显示 Logo": showLogo,
|
||||
"固定 Header": fixedHeader,
|
||||
"显示页脚 Footer": showFooter,
|
||||
显示消息通知: showNotify,
|
||||
显示切换主题按钮: showThemeSwitch,
|
||||
显示全屏按钮: showScreenfull,
|
||||
显示搜索按钮: showSearchMenu,
|
||||
是否缓存标签栏: cacheTagsView,
|
||||
开启系统水印: showWatermark,
|
||||
显示灰色模式: showGreyMode,
|
||||
显示色弱模式: showColorWeakness
|
||||
}
|
||||
|
||||
/** 非左侧模式时，Header 都是 fixed 布局 */
|
||||
watchEffect(() => {
|
||||
!isLeft.value && (fixedHeader.value = true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/mixins.scss";
|
||||
|
||||
.setting-container {
|
||||
// padding: 20px;
|
||||
.setting-item {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.setting-name {
|
||||
@extend %ellipsis;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -12,6 +12,7 @@ import Notify from "@/components/Notify/index.vue"
|
||||
import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
|
||||
import Screenfull from "@/components/Screenfull/index.vue"
|
||||
import SearchMenu from "@/components/SearchMenu/index.vue"
|
||||
import Settings from "@/components/Settings/index.vue"
|
||||
import { useDevice } from "@/hooks/useDevice"
|
||||
import { useLayoutMode } from "@/hooks/useLayoutMode"
|
||||
|
||||
@ -21,7 +22,7 @@ const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const { showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
|
||||
const { showSettings, showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
|
||||
|
||||
/** 切换侧边栏 */
|
||||
const toggleSidebar = () => {
|
||||
@ -46,6 +47,7 @@ const logout = () => {
|
||||
<Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" />
|
||||
<Sidebar v-if="isTop && !isMobile" class="sidebar" />
|
||||
<div class="right-menu">
|
||||
<Settings v-if="showSettings" class="right-menu-item" />
|
||||
<SearchMenu v-if="showSearchMenu" class="right-menu-item" />
|
||||
<Screenfull v-if="showScreenfull" class="right-menu-item" />
|
||||
<ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user