wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化系统布局

Browse Source
This commit is contained in:
不做码农
2022-05-19 12:16:44 +08:00
parent dc197e57cf
commit 562115c084
23 changed files with 280 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/Navbar.vue
+9 -8
View File
@@ -94,14 +94,15 @@ function setLayout() {
</script>
<style lang="scss" scoped>
// .el-menu {
// // display: inline-table;
// .el-menu-item {
// vertical-align: center;
// }
// }
.el-menu {
// display: inline-table;
border-bottom: none;
.el-menu-item {
vertical-align: center;
}
}
.navbar {
height: 50px;
// height: 50px;
overflow: hidden;
position: relative;
background: var(--base-topBar-background);
@@ -135,7 +136,7 @@ function setLayout() {
.right-menu {
height: 100%;
line-height: 50px;
line-height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
src/layout/components/Settings/index.vue
+38 -22
View File
@@ -4,7 +4,7 @@
<h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
</div>
<div class="setting-drawer-block-checbox">
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
<!-- <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">
<el-icon><Check /></el-icon>
@@ -15,15 +15,22 @@
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<el-icon><Check /></el-icon>
</div>
</div>
<div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
<div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<el-icon><Check /></el-icon>
</div>
<el-icon><moon /></el-icon>
{{ $t('layout.darkMode') }}
</div>
</div>-->
</div>
<div class="drawer-item">
<el-radio-group v-model="mode" size="small">
<el-radio label="dark">{{$t('layout.darkMode')}}</el-radio>
<el-radio label="light">{{$t('layout.lightMode')}}</el-radio>
<el-radio label="cafe">cafe</el-radio>
<!-- <el-radio label="contrast">contrast</el-radio> -->
</el-radio-group>
</div>
<!-- <div class="drawer-item">
<span>暗黑模式</span>
<span class="comp-style">
<el-switch v-model="isDark" class="mt-2" inline-prompt />
</span>
</div> -->
<div class="drawer-item">
<span>{{ $t('layout.themeColor') }}</span>
<span class="comp-style">
@@ -76,9 +83,9 @@
</template>
<script setup>
import variables from '@/assets/styles/variables.module.scss'
import originElementPlus from 'element-plus/theme-chalk/index.css'
import 'element-plus/theme-chalk/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { useDark, useCycleList, useColorMode } from '@vueuse/core'
import { useDynamicTitle } from '@/utils/dynamicTitle'
import { getLightColor } from '@/utils/index'
@@ -90,7 +97,16 @@ const sideTheme = ref(store.state.settings.sideTheme)
const storeSettings = computed(() => store.state.settings)
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
const blackTheme = ref(false)
// 可以手动更改当前值 model.value = 'cafe'
const mode = useColorMode({
modes: {
// custom colors
contrast: 'dark contrast',
cafe: 'cafe',
},
})
const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
const isDark = useDark()
/** 是否需要topnav */
const topNav = computed({
@@ -161,10 +177,12 @@ watch(
watch(
() => sideTheme,
(val) => {
console.log(val.value)
const body = document.documentElement
if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
else body.setAttribute('data-theme', '')
if (val.value == 'theme-black') {
//body.setAttribute('data-theme', 'theme-black')
} else {
//body.setAttribute('data-theme', '')
}
},
{
immediate: true,
@@ -196,8 +214,6 @@ function handleTheme(val) {
const body = document.documentElement
if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
else body.setAttribute('data-theme', '')
console.log('change ' + val)
blackTheme.value = val === 'theme-black'
}
function saveSetting() {
proxy.$modal.loading('正在保存到本地，请稍候...')
@@ -211,7 +227,7 @@ function saveSetting() {
theme: storeSettings.value.theme,
}
localStorage.setItem('layout-setting', JSON.stringify(layoutSetting))
setTimeout(proxy.$modal.closeLoading(), 1000)
setTimeout(proxy.$modal.closeLoading(), 500)
}
function resetSetting() {
proxy.$modal.loading('正在清除设置缓存并刷新，请稍候...')
@@ -230,7 +246,7 @@ defineExpose({
<style lang="scss" scoped>
.setting-drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, 0.85);
color: var(--base-text-color-rgba);
line-height: 22px;
font-weight: bold;
.drawer-title {
@@ -244,7 +260,7 @@ defineExpose({
margin-top: 10px;
margin-bottom: 20px;
.setting-drawer-block-checbox-item {
.item {
position: relative;
margin-right: 16px;
border-radius: 2px;
@@ -278,7 +294,7 @@ defineExpose({
}
.drawer-item {
color: rgba(0, 0, 0, 0.65);
color: var(--base-text-color-rgba);
padding: 12px 0;
font-size: 14px;
src/layout/components/Sidebar/Logo.vue
-1
View File
@@ -14,7 +14,6 @@
</template>
<script setup>
import variables from '@/assets/styles/variables.module.scss'
import logo from '@/assets/logo/logo.png'
defineProps({
src/layout/components/Sidebar/index.vue
-5
View File
@@ -20,7 +20,6 @@
<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
const route = useRoute()
const store = useStore()
@@ -40,7 +39,3 @@ const activeMenu = computed(() => {
return path
})
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
</style>
src/layout/components/TagsView/index.vue
+9 -4
View File
@@ -10,8 +10,7 @@
class="tags-view-item"
:style="activeStyle(tag)"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
>
@contextmenu.prevent="openMenu(tag, $event)">
<span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
<span v-else>{{ tag.title }}</span>
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
@@ -21,7 +20,9 @@
</scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> {{ $t('tagsView.refresh') }}</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}
</li>
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> {{ $t('tagsView.closeOther') }}</li>
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> {{ $t('tagsView.closeLeft') }}</li>
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> {{ $t('tagsView.closeRight') }}</li>
@@ -237,7 +238,7 @@ function handleScroll() {
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #ccc;
// border: 1px solid #ccc;
color: var(--el-text-color-regular);
padding: 0 8px;
font-size: 12px;
@@ -249,6 +250,10 @@ function handleScroll() {
&:last-of-type {
margin-right: 15px;
}
&:hover {
background-color: var(--el-color-primary);
color: #fff;
}
&.active {
background-color: var(--el-color-primary);
border-color: var(--el-color-primary);
src/layout/index.vue
+17 -11
View File
@@ -17,6 +17,9 @@
</transition>
</router-view>
</el-main>
<el-footer>
<div v-html="defaultSettings.copyright"></div>
</el-footer>
<settings ref="settingRef" />
</el-container>
</el-container>
@@ -53,18 +56,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) {
store.dispatch('app/closeSideBar', { withoutAnimation: false })
store.dispatch('app/closeSideBar')
}
if (width.value - 1 < WIDTH) {
store.dispatch('app/toggleDevice', 'mobile')
store.dispatch('app/closeSideBar', { withoutAnimation: true })
store.dispatch('app/closeSideBar')
} else {
store.dispatch('app/toggleDevice', 'desktop')
}
})
function handleClickOutside() {
store.dispatch('app/closeSideBar', { withoutAnimation: false })
store.dispatch('app/closeSideBar')
}
const settingRef = ref(null)
@@ -75,7 +78,6 @@ function setLayout() {
<style lang="scss">
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/variables.module.scss';
.main-container {
min-height: 100%;
@@ -127,16 +129,20 @@ function setLayout() {
.el-header {
--el-header-padding: 0 0px !important;
--el-header-height: 50px !important;
// --el-header-height: 50px !important;
}
.el-footer {
--el-footer-height: var(--base-footer-height);
line-height: var(--base-footer-height);
text-align: center;
color: #ccc;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
// .app-main {
// min-height: calc(100vh - 84px - var(--base-footer-height));
// }
.el-header {
--el-header-height: 84px !important;
--el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
}
}
</style>