wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-22 03:49:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

去掉RightPanel

Browse Source
This commit is contained in:
kubeops 2024-07-07 12:29:34 +08:00
parent 5f31094e7e
commit 8ccb73c04d
4 changed files with 4 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/layouts/components/Settings/SelectLayoutMode.vue
View File

@ -1,103 +0,0 @@
<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>

86
src/layouts/components/Settings/index.vue
View File

@ -1,86 +0,0 @@
<script lang="ts" setup>
import { watchEffect } from "vue"
import { storeToRefs } from "pinia"
import { useSettingsStore } from "@/store/modules/settings"
import { useLayoutMode } from "@/hooks/useLayoutMode"
import { resetConfigLayout } from "@/utils"
import SelectLayoutMode from "./SelectLayoutMode.vue"
import { Refresh } from "@element-plus/icons-vue"
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>
<template>
<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>
</template>
<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>

1
src/layouts/components/index.ts
View File

@ -1,6 +1,5 @@
export { default as AppMain } from "./AppMain.vue"
export { default as NavigationBar } from "./NavigationBar/index.vue"
export { default as Settings } from "./Settings/index.vue"
export { default as Sidebar } from "./Sidebar/index.vue"
export { default as TagsView } from "./TagsView/index.vue"
export { default as RightPanel } from "./RightPanel/index.vue"

8
src/layouts/index.vue
View File

@ -9,7 +9,7 @@ import { useLayoutMode } from "@/hooks/useLayoutMode"
import LeftMode from "./LeftMode.vue"
import TopMode from "./TopMode.vue"
import LeftTopMode from "./LeftTopMode.vue"
import { Settings, RightPanel } from "./components"
// import { Settings, RightPanel } from "./components"
import { getCssVariableValue, setCssVariableValue } from "@/utils"
/** Layout 布局响应式 */
@ -19,7 +19,7 @@ const { setWatermark, clearWatermark } = useWatermark()
const { isMobile } = useDevice()
const { isLeft, isTop, isLeftTop } = useLayoutMode()
const settingsStore = useSettingsStore()
const { showSettings, showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
const { showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
const classes = computed(() => {
return {
@ -53,9 +53,9 @@ watchEffect(() => {
<!-- 混合模式 -->
<LeftTopMode v-else-if="isLeftTop" />
<!-- 右侧设置面板 -->
<RightPanel v-if="showSettings">
<!-- <RightPanel v-if="showSettings">
<Settings />
</RightPanel>
</RightPanel> -->
</div>
</template>