From ff86b1a4a9ce81f319ee6a230859dceece35a5b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Mon, 4 Sep 2023 20:54:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E6=B7=B7=E5=90=88=E3=80=81?=
=?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=A8=A1=E5=BC=8F?=
=?UTF-8?q?=E5=9B=BA=E5=AE=9A`header`=E4=B8=8B=E9=97=B4=E8=B7=9D=EF=BC=8C?=
=?UTF-8?q?=E6=B7=B7=E5=90=88=E6=A8=A1=E5=BC=8F=E5=B7=A6=E4=BE=A7=E8=8F=9C?=
=?UTF-8?q?=E5=8D=95=E9=AB=98=E5=BA=A6=E4=B8=8D=E5=9B=BA=E5=AE=9A=E7=AD=89?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Former-commit-id: 63df66449582f41a710f761457e4afd21113aeb7
---
src/layout/components/AppMain.vue | 29 ++++++++++++++++++++++++-
src/layout/components/Sidebar/Logo.vue | 4 +++-
src/layout/index.vue | 22 ++++---------------
src/layout/main.vue | 30 ++++++++++++++++++++++++++
src/settings.ts | 27 ++++++++++-------------
src/store/modules/settings.ts | 9 ++++----
src/styles/sidebar.scss | 13 +++++------
7 files changed, 86 insertions(+), 48 deletions(-)
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 0de8378a..14a64e9e 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -28,7 +28,7 @@ const tagsViewStore = useTagsViewStore();
}
.fixed-header + .app-main {
- padding-top: 50px;
+ padding-top: 34px;
}
.hasTagsView {
@@ -42,4 +42,31 @@ const tagsViewStore = useTagsViewStore();
padding-top: 84px;
}
}
+
+.isMix {
+ .app-main {
+ height: calc(100vh - 50px);
+ overflow-y: auto;
+ }
+
+ .hasTagsView {
+ .app-main {
+ /* 84 = navbar + tags-view = 50 + 34 */
+ height: calc(100vh - 84px);
+ }
+
+ .fixed-header + .app-main {
+ min-height: calc(100vh - 50px);
+ padding-top: 34px;
+ }
+ }
+}
+
+.isTop {
+ .hasTagsView {
+ .fixed-header + .app-main {
+ padding-top: 34px;
+ }
+ }
+}
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 3f4c6401..25fb65aa 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -10,6 +10,8 @@ defineProps({
},
});
+const layout = computed(() => settingsStore.layout);
+
const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
@@ -25,7 +27,7 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
to="/"
>
![]()
- vue3-element-admin
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c96ef8b7..6548189d 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -124,23 +124,6 @@ function toggleSideBar() {
}
}
-.fixed-header {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 9;
- width: calc(100% - #{$sideBarWidth});
- transition: width 0.28s;
-}
-
-.hideSidebar .fixed-header {
- width: calc(100% - 54px);
-}
-
-.mobile .fixed-header {
- width: 100%;
-}
-
.drawer-bg {
position: absolute;
top: 0;
@@ -231,8 +214,11 @@ function toggleSideBar() {
.openSidebar {
.mix-wrap {
- .el-menu {
+ .left-wrap {
width: $sideBarWidth;
+ }
+
+ .el-menu {
border: none;
}
}
diff --git a/src/layout/main.vue b/src/layout/main.vue
index 653e7d1f..26e233a7 100644
--- a/src/layout/main.vue
+++ b/src/layout/main.vue
@@ -55,3 +55,33 @@ watchEffect(() => {
+
+
diff --git a/src/settings.ts b/src/settings.ts
index 02920e10..8531e7ca 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,10 +1,11 @@
-// 系统设置
+/**
+ * 系统设置
+ */
interface DefaultSettings {
/**
* 系统title
*/
title: string;
-
/**
* 是否显示设置
*/
@@ -22,21 +23,21 @@ interface DefaultSettings {
*/
sidebarLogo: boolean;
/**
- * 导航栏布局
+ * 导航栏布局(left|top|mix)
*/
layout: string;
/**
- * 主题模式
+ * 主题模式(dark|light)
*/
theme: string;
/**
- * 布局大小
+ * 布局大小(default |large |small)
*/
size: string;
/**
- * 语言
+ * 语言( zh-cn| en)
*/
language: string;
}
@@ -47,16 +48,10 @@ const defaultSettings: DefaultSettings = {
tagsView: true,
fixedHeader: false,
sidebarLogo: true,
- layout: "mix",
- /**
- * 主题模式
- *
- * dark:暗黑模式
- * light: 明亮模式
- */
- theme: "dark",
- size: "default", // default |large |small
- language: "zh-cn", // zh-cn| en
+ layout: "mix", // 默认混合模式
+ theme: "dark", // 默认暗黑模式
+ size: "default",
+ language: "zh-cn",
};
export default defaultSettings;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 908359c3..1caaed74 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,15 +1,18 @@
import { defineStore } from "pinia";
import defaultSettings from "@/settings";
-import { useStorage } from "@vueuse/core";
export const useSettingsStore = defineStore("setting", () => {
// state
const tagsView = useStorage("tagsView", defaultSettings.tagsView);
const showSettings = ref(defaultSettings.showSettings);
- const fixedHeader = ref(defaultSettings.fixedHeader);
const sidebarLogo = ref(defaultSettings.sidebarLogo);
+ const fixedHeader = useStorage(
+ "fixedHeader",
+ defaultSettings.fixedHeader
+ );
+
const layout = useStorage("layout", defaultSettings.layout);
// actions
@@ -31,8 +34,6 @@ export const useSettingsStore = defineStore("setting", () => {
case "layout":
layout.value = value;
break;
- default:
- break;
}
}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 66958b81..7e0a26c2 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -83,14 +83,11 @@
}
}
- .left-wrap {
- .svg-icon {
- margin-top: -2px;
- margin-right: 12px;
- }
- }
-
.hideSidebar {
+ .left-wrap {
+ width: 54px;
+ }
+
.sidebar-container {
width: 54px !important;
@@ -100,7 +97,7 @@
.header {
.logo-wrap {
- width: 63px !important;
+ width: 54px !important;
transition: transform 0.28s;
}
}