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

feat: 新增切换布局模式组件

Browse Source
This commit is contained in:
pany 2023-07-07 15:25:36 +08:00
parent 135cf8fc1e
commit 9710c359af
2 changed files with 109 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/layouts/components/Settings/SelectLayoutMode.vue Normal file
View File

@ -0,0 +1,106 @@
<script lang="ts" setup>
import { computed } from "vue"
import { storeToRefs } from "pinia"
import { useSettingsStore } from "@/store/modules/settings"
const settingsStore = useSettingsStore()
const { layoutMode } = storeToRefs(settingsStore)
const isLeft = computed(() => layoutMode.value === "left")
const isTop = computed(() => layoutMode.value === "top")
const isLeftTop = computed(() => layoutMode.value === "left-top")
</script>
<template>
<div class="select-layout-mode">
<el-tooltip content="左侧模式">
<el-container class="layout-mode left" :class="{ active: isLeft }" @click="layoutMode = '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="layoutMode = 'top'">
<el-header />
<el-main />
</el-container>
</el-tooltip>
<el-tooltip content="混合模式">
<el-container class="layout-mode left-top" :class="{ active: isLeftTop }" @click="layoutMode = 'left-top'">
<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 #00000000;
&: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-border-color);
}
.el-aside {
background-color: var(--el-color-primary);
}
.el-main {
background-color: var(--el-fill-color);
}
}
.top {
.el-header {
background-color: var(--el-color-primary);
}
.el-main {
background-color: var(--el-fill-color);
}
}
.left-top {
.el-header {
background-color: var(--el-border-color);
}
.el-aside {
background-color: var(--el-color-primary);
}
.el-main {
background-color: var(--el-fill-color);
}
}
</style>

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

@ -3,6 +3,7 @@ import { watchEffect } from "vue"
import { storeToRefs } from "pinia"
import { useSettingsStore } from "@/store/modules/settings"
import { resetConfigLayout } from "@/utils"
import SelectLayoutMode from "./SelectLayoutMode.vue"
import { Refresh } from "@element-plus/icons-vue"
const settingsStore = useSettingsStore()
@ -43,11 +44,8 @@ watchEffect(() => {
<template>
<div class="setting-container">
<h4>布局配置</h4>
<el-radio-group v-model="layoutMode">
<el-radio label="left">左侧模式</el-radio>
<el-radio label="top">顶部模式（开发中）</el-radio>
<el-radio label="left-top">混合模式</el-radio>
</el-radio-group>
<SelectLayoutMode />
<el-divider />
<h4>功能配置</h4>
<div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
<span class="setting-name">{{ settingName }}</span>