panqihua
/
ttsbg-java-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化布局设置使用el-drawer抽屉显示

Browse Source
master
RuoYi 2 years ago
parent 5ec5e1a65d
commit bc8b5f1079
2 changed files with 66 additions and 100 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 43
      ruoyi-ui/src/components/RightPanel/index.vue
  2. 123
      ruoyi-ui/src/layout/components/Settings/index.vue

43
ruoyi-ui/src/components/RightPanel/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> <div ref="rightPanel" class="rightPanel-container">
<div class="rightPanel-background" /> <div class="rightPanel-background" />
<div class="rightPanel"> <div class="rightPanel">
<div class="rightPanel-items"> <div class="rightPanel-items">
@ -10,18 +10,12 @@
</template> </template>
<script> <script>
import { addClass, removeClass } from '@/utils'
export default { export default {
name: 'RightPanel', name: 'RightPanel',
props: { props: {
clickNotClose: { clickNotClose: {
default: false, default: false,
type: Boolean type: Boolean
},
buttonTop: {
default: 250,
type: Number
} }
}, },
computed: { computed: {
@ -35,21 +29,13 @@ export default {
value: val value: val
}) })
} }
}, }
theme() {
return this.$store.state.settings.theme
},
}, },
watch: { watch: {
show(value) { show(value) {
if (value && !this.clickNotClose) { if (value && !this.clickNotClose) {
this.addEventClick() this.addEventClick()
} }
if (value) {
addClass(document.body, 'showRightPanel')
} else {
removeClass(document.body, 'showRightPanel')
}
} }
}, },
mounted() { mounted() {
@ -65,7 +51,7 @@ export default {
window.addEventListener('click', this.closeSidebar) window.addEventListener('click', this.closeSidebar)
}, },
closeSidebar(evt) { closeSidebar(evt) {
const parent = evt.target.closest('.rightPanel') const parent = evt.target.closest('.el-drawer__body')
if (!parent) { if (!parent) {
this.show = false this.show = false
window.removeEventListener('click', this.closeSidebar) window.removeEventListener('click', this.closeSidebar)
@ -80,14 +66,6 @@ export default {
} }
</script> </script>
<style>
.showRightPanel {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.rightPanel-background { .rightPanel-background {
position: fixed; position: fixed;
@ -113,21 +91,6 @@ export default {
z-index: 40000; z-index: 40000;
} }
.show {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.rightPanel {
transform: translate(0);
}
}
.handle-button { .handle-button {
width: 48px; width: 48px;
height: 48px; height: 48px;

123
ruoyi-ui/src/layout/components/Settings/index.vue
Unescape View File

@ -1,78 +1,76 @@
<template> <template>
<div class="drawer-container"> <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
<div> <div class="drawer-container">
<div class="setting-drawer-content"> <div>
<div class="setting-drawer-title"> <div class="setting-drawer-content">
<h3 class="drawer-title">主题风格设置</h3> <div class="setting-drawer-title">
</div> <h3 class="drawer-title">主题风格设置</h3>
<div class="setting-drawer-block-checbox">
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
<img src="@/assets/images/dark.svg" alt="dark">
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
<i aria-label="图标: check" class="anticon anticon-check">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true"
focusable="false" class="">
<path
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
</svg>
</i>
</div>
</div> </div>
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')"> <div class="setting-drawer-block-checbox">
<img src="@/assets/images/light.svg" alt="light"> <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> <img src="@/assets/images/dark.svg" alt="dark">
<i aria-label="图标: check" class="anticon anticon-check"> <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" <i aria-label="图标: check" class="anticon anticon-check">
focusable="false" class=""> <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
<path <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/> </svg>
</svg> </i>
</i> </div>
</div>
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
<img src="@/assets/images/light.svg" alt="light">
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
<i aria-label="图标: check" class="anticon anticon-check">
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
</svg>
</i>
</div>
</div> </div>
</div> </div>
</div>
<div class="drawer-item"> <div class="drawer-item">
<span>主题颜色</span> <span>主题颜色</span>
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
</div>
</div> </div>
</div>
<el-divider/> <el-divider/>
<h3 class="drawer-title">系统布局配置</h3> <h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item"> <div class="drawer-item">
<span>开启 TopNav</span> <span>开启 TopNav</span>
<el-switch v-model="topNav" class="drawer-switch" /> <el-switch v-model="topNav" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>开启 Tags-Views</span> <span>开启 Tags-Views</span>
<el-switch v-model="tagsView" class="drawer-switch" /> <el-switch v-model="tagsView" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>固定 Header</span> <span>固定 Header</span>
<el-switch v-model="fixedHeader" class="drawer-switch" /> <el-switch v-model="fixedHeader" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>显示 Logo</span> <span>显示 Logo</span>
<el-switch v-model="sidebarLogo" class="drawer-switch" /> <el-switch v-model="sidebarLogo" class="drawer-switch" />
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<span>动态标题</span> <span>动态标题</span>
<el-switch v-model="dynamicTitle" class="drawer-switch" /> <el-switch v-model="dynamicTitle" class="drawer-switch" />
</div> </div>
<el-divider/> <el-divider/>
<el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button> <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
<el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button> <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
</div>
</div> </div>
</div> </el-drawer>
</template> </template>
<script> <script>
@ -87,6 +85,11 @@ export default {
}; };
}, },
computed: { computed: {
visible: {
get() {
return this.$store.state.settings.showSettings
}
},
fixedHeader: { fixedHeader: {
get() { get() {
return this.$store.state.settings.fixedHeader return this.$store.state.settings.fixedHeader
@ -232,7 +235,7 @@ export default {
} }
.drawer-container { .drawer-container {
padding: 24px; padding: 20px;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
word-wrap: break-word; word-wrap: break-word;

Write Preview
Loading…
Cancel
Save