feat: 系统设置

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>

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 = () => {

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;

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>

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
 };

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: {
     // 折叠菜单

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>