From 28bdd3e17e40b106f6bd1667a94ed315dff7952d Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Fri, 3 May 2024 18:05:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/system-settings/index.vue      | 84 +++++++++++++++++++
 src/layout/components/Header/index.vue        | 13 ++-
 src/layout/components/Main/index.vue          | 22 +++--
 src/layout/layout-defaults/index.vue          |  8 +-
 src/router/route-output.ts                    |  9 +-
 src/store/modules/theme-config.ts             |  5 +-
 src/views/home/home.vue                       |  9 +-
 7 files changed, 135 insertions(+), 15 deletions(-)
 create mode 100644 src/layout/components/Header/components/system-settings/index.vue

diff --git a/src/layout/components/Header/components/system-settings/index.vue b/src/layout/components/Header/components/system-settings/index.vue
new file mode 100644
index 0000000..7b6f58e
--- /dev/null
+++ b/src/layout/components/Header/components/system-settings/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <a-drawer :width="340" :visible="props.systemOpen" @ok="handleOk" @cancel="handleCancel" unmount-on-close>
+    <template #title> 系统设置 </template>
+    <div>
+      <div>
+        <div class="title">界面设置</div>
+        <div class="flex-row">
+          <div>菜单折叠</div>
+          <a-switch v-model="collapsed" />
+        </div>
+        <div class="flex-row">
+          <div>面包屑</div>
+          <a-switch v-model="isBreadcrumb" />
+        </div>
+        <div class="flex-row">
+          <div>标签栏</div>
+          <a-switch v-model="isTabs" />
+        </div>
+        <div class="flex-row">
+          <div>底部栏</div>
+          <a-switch v-model="isFooter" />
+        </div>
+      </div>
+      <div>
+        <div class="title">水印设置</div>
+        <div class="flex-row">
+          <div>水印颜色</div>
+          <a-switch />
+        </div>
+        <div class="flex-row">
+          <div>水印文案</div>
+          <a-input :style="{ width: '100px' }" default-value="content" placeholder="请输入" allow-clear />
+        </div>
+        <div class="flex-row">
+          <div>水印大小</div>
+          <a-slider :default-value="50" :style="{ width: '100px' }" />
+        </div>
+        <div class="flex-row">
+          <div>水印角度</div>
+          <a-slider :default-value="50" :style="{ width: '100px' }" />
+        </div>
+        <div class="flex-row">
+          <div>水印间隙</div>
+          <a-slider :default-value="50" :style="{ width: '100px' }" />
+        </div>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
+const themeStore = useThemeConfig();
+const { collapsed, isBreadcrumb, isTabs, isFooter } = storeToRefs(themeStore);
+const props = defineProps({
+  systemOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+const emits = defineEmits(["systemCancel"]);
+const handleOk = () => {
+  emits("systemCancel");
+};
+const handleCancel = () => {
+  emits("systemCancel");
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  color: $color-text-1;
+  font-size: $font-size-title-1;
+  font-weight: bold;
+  margin-bottom: $margin;
+}
+.flex-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $margin;
+}
+</style>
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 428c0bb..a470c9c 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -9,7 +9,7 @@
           </template>
         </a-button>
       </div>
-      <div class="breadcrumb">
+      <div class="breadcrumb" v-if="isBreadcrumb">
         <Breadcrumb />
       </div>
     </div>
@@ -55,7 +55,7 @@
       </a-tooltip>
       <!-- 系统设置 -->
       <a-tooltip :content="$t(`language.system-settings`)">
-        <a-button size="mini" type="text" class="icon_btn">
+        <a-button size="mini" type="text" class="icon_btn" @click="onSystemSetting">
           <template #icon>
             <icon-settings :size="18" />
           </template>
@@ -111,11 +111,13 @@
         </template>
       </a-dropdown>
     </div>
+    <SystemSettings :system-open="systemOpen" @system-cancel="systemOpen = false" />
   </a-layout-header>
 </template>
 <script setup lang="ts">
 import Notice from "@/layout/components/Header/components/notice/index.vue";
 import Breadcrumb from "@/layout/components/Header/components/breadcrumb/index.vue";
+import SystemSettings from "@/layout/components/Header/components/system-settings/index.vue";
 import myImage from "@/assets/img/my-image.jpg";
 import { useI18n } from "vue-i18n";
 import { Modal } from "@arco-design/web-vue";
@@ -126,13 +128,18 @@ import { useThemeConfig } from "@/store/modules/theme-config";
 const i18n = useI18n();
 const router = useRouter();
 const themeStore = useThemeConfig();
-const { collapsed, language, darkMode } = storeToRefs(themeStore);
+const { collapsed, language, darkMode, isBreadcrumb } = storeToRefs(themeStore);
 
 // 折叠
 const onCollapsed = () => {
   themeStore.setCollapsed(!collapsed.value);
 };
 
+// 系统设置
+const systemOpen = ref(false);
+const onSystemSetting = () => {
+  systemOpen.value = true;
+};
 // 全屏
 const fullScreen = ref(true);
 const onFullScreen = () => {
diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue
index 55abf53..287b99a 100644
--- a/src/layout/components/Main/index.vue
+++ b/src/layout/components/Main/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <a-layout-content class="content">
-    <Tabs />
-    <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
+  <a-layout-content :class="isFooter ? 'content' : 'content-no-footer'">
+    <Tabs v-if="isTabs" />
+    <a-scrollbar style="height: 100%; overflow: auto" :outer-class="isTabs ? 'scrollbar' : 'scrollbar-no-tabs'">
       <div class="main">
         <router-view v-slot="{ Component, route }">
           <MainTransition>
@@ -21,22 +21,32 @@ import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { useRoutesListStore } from "@/store/modules/route-list";
 const themeStore = useThemeConfig();
-let { refreshPage } = storeToRefs(themeStore);
+let { refreshPage, isTabs, isFooter } = storeToRefs(themeStore);
 const routerStore = useRoutesListStore();
 const { cacheRoutes } = storeToRefs(routerStore);
 </script>
 
 <style lang="scss" scoped>
 .content {
-  height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
+  height: calc(100vh - 60px - 30px); // 动态切类名-去掉header、footer
 }
+.content-no-footer {
+  height: calc(100vh - 60px); // 动态切类名-去掉footer
+}
+
 .scrollbar {
-  height: calc(100% - 40px);
+  height: calc(100% - 40px); // 去掉tabs的高度
   background: $color-border-1; // 背景颜色
 }
+.scrollbar-no-tabs {
+  height: 100%;
+  background: $color-border-1; // 背景颜色
+}
+
 .main {
   padding: $padding;
 }
+
 // 修改左侧滚动条宽度
 :deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
   width: 4px;
diff --git a/src/layout/layout-defaults/index.vue b/src/layout/layout-defaults/index.vue
index 04cdc23..b152525 100644
--- a/src/layout/layout-defaults/index.vue
+++ b/src/layout/layout-defaults/index.vue
@@ -4,7 +4,7 @@
     <a-layout>
       <Header />
       <Main />
-      <Footer />
+      <Footer v-if="isFooter" />
     </a-layout>
   </a-layout>
 </template>
@@ -14,7 +14,13 @@ import Aside from "@/layout/components/Aside/index.vue";
 import Header from "@/layout/components/Header/index.vue";
 import Main from "@/layout/components/Main/index.vue";
 import Footer from "@/layout/components/Footer/index.vue";
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
+
 defineOptions({ name: "LayoutDefaults" });
+
+const themeStore = useThemeConfig();
+let { isFooter } = storeToRefs(themeStore);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index 13a06d3..0113ad3 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -4,6 +4,7 @@ import { dynamicRoutes } from "@/router/route";
 import { storeToRefs } from "pinia";
 import { useUserInfoStore } from "@/store/modules/user-info";
 import { useRoutesListStore } from "@/store/modules/route-list";
+import { useThemeConfig } from "@/store/modules/theme-config";
 import { deepClone, arrayFlattened } from "@/utils/index";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { loadingPage } from "@/utils/loading-page";
@@ -88,6 +89,8 @@ export const roleBase = (roles: Array<string>) => {
  * @param {object} to 需要跳转的路由
  */
 export const currentlyRoute = (to: any) => {
+  const themeStore = useThemeConfig();
+  const { isTabs } = storeToRefs(themeStore);
   const store = useRoutesListStore(pinia);
   const { tabsList, routeList } = storeToRefs(store);
   // tabs无数据则默认添加首页
@@ -98,9 +101,11 @@ export const currentlyRoute = (to: any) => {
   const { findLinearArray } = useRoutingMethod();
   const find = findLinearArray(to.name);
   if (find === undefined) return;
-  // 存入当前路由
+  // 存入当前路由-高亮
   store.setCurrentRoute(find);
-  store.setTabs(find);
+  // 存入tabs栏数据：如果系统配置里允许展示标签栏则存入
+  if (isTabs.value) store.setTabs(find);
+  // 是否缓存路由
   if (!find.meta.keepAlive) return;
   store.setRouteNames(find.name); // 缓存路由name
 };
diff --git a/src/store/modules/theme-config.ts b/src/store/modules/theme-config.ts
index 7ab9b13..31b5926 100644
--- a/src/store/modules/theme-config.ts
+++ b/src/store/modules/theme-config.ts
@@ -11,7 +11,10 @@ export const useThemeConfig = defineStore("theme-config", {
     collapsed: false, // 是否折叠菜单
     refreshPage: true, // 刷新页面
     language: "zh-CN", // 系统语言
-    darkMode: false // 黑暗模式
+    darkMode: false, // 黑暗模式
+    isBreadcrumb: true, // 面包屑渲染
+    isTabs: true, // 标签栏渲染
+    isFooter: true // 页脚渲染
   }),
   actions: {
     // 折叠菜单
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index d0273e6..502ee02 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -1,7 +1,12 @@
 <template>
-  <div>首页</div>
+  <div class="home">首页</div>
 </template>
 
 <script setup lang="ts"></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home {
+  height: 2000px;
+  border: 1px solid red;
+}
+</style>