add layout setting ui
This commit is contained in:
huzhushan
parent
4ea866e38d
commit
fc6d8f317d
15
src/App.vue
15
src/App.vue
@ -24,7 +24,7 @@
|
||||
* @version:
|
||||
* @Date: 2021-04-20 11:06:21
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-04-21 12:48:43
|
||||
* @LastEditTime: 2021-07-23 15:12:50
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
@ -33,7 +33,20 @@
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
<layout-settings />
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import LayoutSettings from '@/components/LayoutSettings/index.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
LayoutSettings,
|
||||
},
|
||||
setup() {},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
html,
|
||||
body,
|
||||
|
||||
@ -60,15 +60,16 @@
|
||||
type="primary"
|
||||
icon="el-icon-delete"
|
||||
@click="clearAll"
|
||||
>Clear All</el-button
|
||||
>
|
||||
Clear All
|
||||
</el-button>
|
||||
</template>
|
||||
<el-table :data="errorLogs" border>
|
||||
<el-table-column label="Message">
|
||||
<template #default="{ row }">
|
||||
<div style="margin-bottom:10px">
|
||||
<span class="message-title" style="padding-right: 16px;"
|
||||
>页面:
|
||||
<span class="message-title" style="padding-right: 16px;">
|
||||
页面:
|
||||
</span>
|
||||
<el-tag type="success">
|
||||
{{ row.url }}
|
||||
@ -90,8 +91,8 @@
|
||||
</div>
|
||||
|
||||
<div v-if="row.err && row.err.config">
|
||||
<span class="message-title" style="padding-right: 16px;"
|
||||
>接口地址:
|
||||
<span class="message-title" style="padding-right: 16px;">
|
||||
接口地址:
|
||||
</span>
|
||||
<el-tag type="info">
|
||||
{{ row.err && row.err.config && row.err.config.url }}
|
||||
|
||||
112
src/components/LayoutSettings/index.vue
Normal file
112
src/components/LayoutSettings/index.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* 佛曰:
|
||||
* 写字楼里写字间，写字间里程序员；
|
||||
* 程序人员写程序，又拿程序换酒钱。
|
||||
* 酒醒只在网上坐，酒醉还来网下眠；
|
||||
* 酒醉酒醒日复日，网上网下年复年。
|
||||
* 但愿老死电脑间，不愿鞠躬老板前；
|
||||
* 奔驰宝马贵者趣，公交自行程序员。
|
||||
* 别人笑我忒疯癫，我笑自己命太贱；
|
||||
* 不见满街漂亮妹，哪个归得程序员？
|
||||
*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Date: 2021-07-23 15:04:58
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-23 16:54:26
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
|
||||
-->
|
||||
<template>
|
||||
<el-button
|
||||
class="btn-switch"
|
||||
type="primary"
|
||||
icon="el-icon-setting"
|
||||
@click="drawer = true"
|
||||
></el-button>
|
||||
<el-drawer title="布局设置" :size="320" v-model="drawer" destroy-on-close>
|
||||
<div class="box">
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div>内容宽度</div>
|
||||
<el-select class="select" size="mini" v-model="layout.isFluid">
|
||||
<el-option :value="true" label="流式布局" />
|
||||
<el-option :value="false" label="固定宽度" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>菜单栏排列方式</div>
|
||||
<el-select class="select" size="mini" v-model="menus.mode">
|
||||
<el-option value="horizontal" label="水平排列" />
|
||||
<el-option value="vertical" label="垂直排列" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="item">
|
||||
<div>显示标签栏</div>
|
||||
<el-switch v-model="tagsbar.isShow" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>显示面包屑导航</div>
|
||||
<el-switch v-model="breadcrumbs.isShow" />
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="item">
|
||||
<div>固定头部</div>
|
||||
<el-switch v-model="topbar.isFixed" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, reactive, ref, toRaw, toRefs, watch } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const drawer = ref(false)
|
||||
const settings = reactive({
|
||||
...store.state.layoutSettings,
|
||||
})
|
||||
watch(settings, value => {
|
||||
store.commit('layoutSettings/SAVE_SETTINGS', toRaw(value))
|
||||
})
|
||||
return {
|
||||
drawer,
|
||||
...toRefs(settings),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btn-switch {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: -6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.box {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.list {
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
.item {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.select {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -73,8 +73,9 @@
|
||||
v-for="option of item.options"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
>{{ option.name }}</el-radio
|
||||
>
|
||||
{{ option.name }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-radio-group
|
||||
v-model="searchModel[item.name]"
|
||||
@ -85,8 +86,9 @@
|
||||
v-for="option of item.options"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
>{{ option.name }}</el-radio-button
|
||||
>
|
||||
{{ option.name }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group
|
||||
v-model="searchModel[item.name]"
|
||||
@ -97,8 +99,9 @@
|
||||
v-for="option of item.options"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
>{{ option.name }}</el-checkbox
|
||||
>
|
||||
{{ option.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-checkbox-group
|
||||
v-model="searchModel[item.name]"
|
||||
@ -109,8 +112,9 @@
|
||||
v-for="option of item.options"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
>{{ option.name }}</el-checkbox-button
|
||||
>
|
||||
{{ option.name }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<el-date-picker
|
||||
v-else-if="item.type === 'date'"
|
||||
@ -182,12 +186,12 @@
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-btn">
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button @click="handleReset" icon="el-icon-refresh-right"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="handleReset" icon="el-icon-refresh-right">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
* @version:
|
||||
* @Date: 2021-04-20 11:06:21
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-23 14:39:22
|
||||
* @LastEditTime: 2021-07-23 16:48:37
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
@ -68,15 +68,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, inject, computed } from 'vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useTags } from './hooks/useTags'
|
||||
import { useContextMenu } from './hooks/useContextMenu'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Tagsbar',
|
||||
setup() {
|
||||
const defaultSettings = inject('defaultSettings')
|
||||
const isTagsbarShow = computed(() => defaultSettings.tagsbar.isShow)
|
||||
const store = useStore()
|
||||
const defaultSettings = computed(() => store.state.layoutSettings)
|
||||
const isTagsbarShow = computed(() => defaultSettings.value.tagsbar.isShow)
|
||||
|
||||
const tags = useTags()
|
||||
const contextMenu = useContextMenu(tags.tagList)
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
* @version:
|
||||
* @Date: 2021-04-20 11:06:21
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-23 14:13:23
|
||||
* @LastEditTime: 2021-07-23 17:22:14
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
@ -38,7 +38,11 @@
|
||||
<el-breadcrumb
|
||||
separator-class="el-icon-arrow-right"
|
||||
class="breadcrumb"
|
||||
:class="{ mobile: device === 'mobile', show: isHorizontalMenu }"
|
||||
:class="{
|
||||
mobile: device === 'mobile',
|
||||
show: isHorizontalMenu,
|
||||
hide: breadcrumbs.length <= 1,
|
||||
}"
|
||||
>
|
||||
<el-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbs"
|
||||
@ -51,28 +55,20 @@
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
watch,
|
||||
inject,
|
||||
} from 'vue'
|
||||
import { defineComponent, computed, ref, onBeforeMount, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
setup(props, { emit }) {
|
||||
const store = useStore()
|
||||
const device = computed(() => store.state.app.device)
|
||||
const router = useRouter()
|
||||
const route = router.currentRoute // 这里不使用useRoute获取当前路由，否则下面watch监听路由的时候会有警告
|
||||
const breadcrumbs = ref([])
|
||||
|
||||
const defaultSettings = inject('defaultSettings')
|
||||
const defaultSettings = computed(() => store.state.layoutSettings)
|
||||
const isHorizontalMenu = computed(
|
||||
() => defaultSettings.menus.mode === 'horizontal'
|
||||
() => defaultSettings.value.menus.mode === 'horizontal'
|
||||
)
|
||||
|
||||
const getBreadcrumbs = route => {
|
||||
@ -92,9 +88,16 @@ export default defineComponent({
|
||||
breadcrumbs.value = getBreadcrumbs(route.value)
|
||||
})
|
||||
|
||||
watch(route, newRoute => {
|
||||
watch(
|
||||
route,
|
||||
newRoute => {
|
||||
breadcrumbs.value = getBreadcrumbs(newRoute)
|
||||
})
|
||||
emit('on-breadcrumbs-change', breadcrumbs.value.length > 1)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
device,
|
||||
@ -132,6 +135,9 @@ export default defineComponent({
|
||||
padding: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
* @version:
|
||||
* @Date: 2021-04-21 09:18:32
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-23 13:42:10
|
||||
* @LastEditTime: 2021-07-23 16:49:39
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, computed, inject } from 'vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import Logo from '@/layout/components/Sidebar/Logo.vue'
|
||||
import Hamburger from './Hamburger.vue'
|
||||
import Breadcrumbs from './Breadcrumbs.vue'
|
||||
@ -79,13 +79,13 @@ export default defineComponent({
|
||||
ErrorLog,
|
||||
},
|
||||
setup() {
|
||||
const defaultSettings = inject('defaultSettings')
|
||||
|
||||
const store = useStore()
|
||||
const defaultSettings = computed(() => store.state.layoutSettings)
|
||||
|
||||
const device = computed(() => store.state.app.device)
|
||||
|
||||
const isHorizontalMenu = computed(
|
||||
() => defaultSettings.menus.mode === 'horizontal'
|
||||
() => defaultSettings.value.menus.mode === 'horizontal'
|
||||
)
|
||||
|
||||
const isShowLogo = computed(
|
||||
@ -95,7 +95,7 @@ export default defineComponent({
|
||||
const isShowHamburger = computed(() => !isHorizontalMenu.value)
|
||||
|
||||
const isShowBreadcrumbs = computed(
|
||||
() => defaultSettings.breadcrumbs.isShow && !isHorizontalMenu.value
|
||||
() => defaultSettings.value.breadcrumbs.isShow && !isHorizontalMenu.value
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
* @version:
|
||||
* @Date: 2021-04-20 11:06:21
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-23 14:39:15
|
||||
* @LastEditTime: 2021-07-23 17:19:35
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
@ -42,16 +42,19 @@
|
||||
<topbar />
|
||||
<menus mode="horizontal" v-if="isHorizontalMenu" />
|
||||
<tagsbar />
|
||||
<breadcrumbs v-if="isBreadcrumbsShow" />
|
||||
<breadcrumbs
|
||||
v-if="isBreadcrumbsShow"
|
||||
@on-breadcrumbs-change="handleBreadcrumbsChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="main" :class="{ pt0: isBreadcrumbsShow }">
|
||||
<div class="main" :class="{ pt0: isBreadcrumbsShow && paddingFlag }">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, computed, inject } from 'vue'
|
||||
import { defineComponent, ref, computed } from 'vue'
|
||||
import Sidebar from './components/Sidebar/index.vue'
|
||||
import Topbar from './components/Topbar/index.vue'
|
||||
import Menus from './components/Sidebar/Menus.vue'
|
||||
@ -59,6 +62,7 @@ import Tagsbar from './components/Tagsbar/index.vue'
|
||||
import Breadcrumbs from './components/Topbar/Breadcrumbs.vue'
|
||||
import Content from './components/Content/index.vue'
|
||||
import { useResizeHandler } from './hooks/useResizeHandler'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layout',
|
||||
@ -72,22 +76,28 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
useResizeHandler()
|
||||
|
||||
const defaultSettings = inject('defaultSettings')
|
||||
const isFluid = computed(() => defaultSettings.layout.isFluid)
|
||||
const isTopbarFixed = computed(() => defaultSettings.topbar.isFixed)
|
||||
const store = useStore()
|
||||
const defaultSettings = computed(() => store.state.layoutSettings)
|
||||
const isFluid = computed(() => defaultSettings.value.layout.isFluid)
|
||||
const isTopbarFixed = computed(() => defaultSettings.value.topbar.isFixed)
|
||||
const isHorizontalMenu = computed(
|
||||
() => defaultSettings.menus.mode === 'horizontal'
|
||||
() => defaultSettings.value.menus.mode === 'horizontal'
|
||||
)
|
||||
const isBreadcrumbsShow = computed(
|
||||
() => isHorizontalMenu.value && defaultSettings.breadcrumbs.isShow
|
||||
() => isHorizontalMenu.value && defaultSettings.value.breadcrumbs.isShow
|
||||
)
|
||||
const paddingFlag = ref(true)
|
||||
const handleBreadcrumbsChange = boo => {
|
||||
paddingFlag.value = boo
|
||||
}
|
||||
|
||||
return {
|
||||
isFluid,
|
||||
isTopbarFixed,
|
||||
isHorizontalMenu,
|
||||
isBreadcrumbsShow,
|
||||
paddingFlag,
|
||||
handleBreadcrumbsChange,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
* @version:
|
||||
* @Date: 2021-04-20 11:06:21
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-22 18:04:34
|
||||
* @LastEditTime: 2021-07-23 16:50:08
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
@ -58,10 +58,6 @@ import './permission'
|
||||
// 引入svg图标注册脚本
|
||||
import 'vite-plugin-svg-icons/register'
|
||||
|
||||
// 引入全局设置
|
||||
import defaultSettings from './defaultSettings'
|
||||
app.provide('defaultSettings', defaultSettings)
|
||||
|
||||
// 注册全局组件
|
||||
import * as Components from './global-components'
|
||||
Object.entries(Components).forEach(([key, component]) => {
|
||||
|
||||
50
src/store/modules/layoutSettings.js
Normal file
50
src/store/modules/layoutSettings.js
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* _______________#########_______________________
|
||||
* ______________############_____________________
|
||||
* ______________#############____________________
|
||||
* _____________##__###########___________________
|
||||
* ____________###__######_#####__________________
|
||||
* ____________###_#######___####_________________
|
||||
* ___________###__##########_####________________
|
||||
* __________####__###########_####_______________
|
||||
* ________#####___###########__#####_____________
|
||||
* _______######___###_########___#####___________
|
||||
* _______#####___###___########___######_________
|
||||
* ______######___###__###########___######_______
|
||||
* _____######___####_##############__######______
|
||||
* ____#######__#####################_#######_____
|
||||
* ____#######__##############################____
|
||||
* ___#######__######_#################_#######___
|
||||
* ___#######__######_######_#########___######___
|
||||
* ___#######____##__######___######_____######___
|
||||
* ___#######________######____#####_____#####____
|
||||
* ____######________#####_____#####_____####_____
|
||||
* _____#####________####______#####_____###______
|
||||
* ______#####______;###________###______#________
|
||||
* ________##_______####________####______________
|
||||
*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Date: 2021-07-23 16:10:49
|
||||
* @LastEditors: huzhushan@126.com
|
||||
* @LastEditTime: 2021-07-23 16:19:35
|
||||
* @Author: huzhushan@126.com
|
||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
|
||||
*/
|
||||
|
||||
import { getItem, setItem } from '@/utils/storage' //getItem和setItem是封装的操作localStorage的方法
|
||||
import defaultSettings from '@/defaultSettings'
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: getItem('defaultSettings') || defaultSettings,
|
||||
mutations: {
|
||||
SAVE_SETTINGS(state, data) {
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
state[key] = value
|
||||
})
|
||||
setItem('defaultSettings', data)
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -48,7 +48,8 @@
|
||||
<h1 class="title">
|
||||
⚡ 屏幕已锁定
|
||||
<div class="unlock-btn" @click="handleUnlock">
|
||||
<i class="el-icon-unlock"></i>解锁
|
||||
<i class="el-icon-unlock"></i>
|
||||
解锁
|
||||
</div>
|
||||
</h1>
|
||||
<div class="unlock-modal" v-show="showModal">
|
||||
|
||||
@ -38,8 +38,9 @@
|
||||
type="primary"
|
||||
class="btn"
|
||||
@click="submit"
|
||||
>{{ btnText }}</el-button
|
||||
>
|
||||
{{ btnText }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
<template>
|
||||
<h2>该页面入口不在菜单中显示</h2>
|
||||
<div>
|
||||
如果不需要在菜单中显示：<br />
|
||||
如果不需要在菜单中显示：
|
||||
<br />
|
||||
需要配置路由增加属性hidden: true，注意不是在meta中增加该属性，而是跟meta同级
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user