From 5f31094e7ec77611010501f216103547734de8f6 Mon Sep 17 00:00:00 2001
From: kubeops <kubeops@163.com>
Date: Sun, 7 Jul 2024 12:28:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/SelectLayoutMode.vue  | 103 ++++++++++++++++++
 src/components/Settings/index.vue             |  97 +++++++++++++++++
 .../components/NavigationBar/index.vue        |   4 +-
 3 files changed, 203 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Settings/SelectLayoutMode.vue
 create mode 100644 src/components/Settings/index.vue

diff --git a/src/components/Settings/SelectLayoutMode.vue b/src/components/Settings/SelectLayoutMode.vue
new file mode 100644
index 00000000..28ff95ec
--- /dev/null
+++ b/src/components/Settings/SelectLayoutMode.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { LayoutModeEnum } from "@/constants/app-key"
+
+const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
+</script>
+
+<template>
+  <div class="select-layout-mode">
+    <el-tooltip content="左侧模式">
+      <el-container class="layout-mode left" :class="{ active: isLeft }" @click="setLayoutMode(LayoutModeEnum.Left)">
+        <el-aside />
+        <el-container>
+          <el-header />
+          <el-main />
+        </el-container>
+      </el-container>
+    </el-tooltip>
+    <el-tooltip content="顶部模式">
+      <el-container class="layout-mode top" :class="{ active: isTop }" @click="setLayoutMode(LayoutModeEnum.Top)">
+        <el-header />
+        <el-main />
+      </el-container>
+    </el-tooltip>
+    <el-tooltip content="混合模式">
+      <el-container
+        class="layout-mode left-top"
+        :class="{ active: isLeftTop }"
+        @click="setLayoutMode(LayoutModeEnum.LeftTop)"
+      >
+        <el-header />
+        <el-container>
+          <el-aside />
+          <el-main />
+        </el-container>
+      </el-container>
+    </el-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-layout-mode {
+  display: flex;
+  justify-content: space-between;
+}
+
+.layout-mode {
+  width: 60px;
+  flex-grow: 0;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  &:hover {
+    border: 2px solid var(--el-color-primary);
+  }
+}
+
+.active {
+  border: 2px solid var(--el-color-primary);
+}
+
+.el-header {
+  height: 12px;
+}
+
+.el-aside {
+  width: 16px;
+}
+
+.left {
+  .el-header {
+    background-color: var(--el-fill-color-darker);
+  }
+  .el-aside {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color-lighter);
+  }
+}
+
+.top {
+  .el-header {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color-lighter);
+  }
+}
+
+.left-top {
+  .el-header {
+    background-color: var(--el-fill-color-darker);
+  }
+  .el-aside {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color-lighter);
+  }
+}
+</style>
diff --git a/src/components/Settings/index.vue b/src/components/Settings/index.vue
new file mode 100644
index 00000000..0040bf8a
--- /dev/null
+++ b/src/components/Settings/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <el-tooltip effect="dark" content="设置" placement="bottom">
+      <el-button :icon="Setting" circle @click="show = true" />
+    </el-tooltip>
+
+    <el-drawer v-model="show" size="300px" :with-header="false">
+      <div class="setting-container">
+        <h4>布局配置</h4>
+        <SelectLayoutMode />
+        <el-divider />
+        <h4>功能配置</h4>
+        <div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
+          <span class="setting-name">{{ settingName }}</span>
+          <el-switch v-model="settingValue.value" :disabled="!isLeft && settingName === '固定 Header'" />
+        </div>
+        <el-button type="danger" :icon="Refresh" @click="resetConfigLayout">重 置</el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+import { watchEffect } from "vue"
+import { storeToRefs } from "pinia"
+import { useSettingsStore } from "@/store/modules/settings"
+import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { resetConfigLayout } from "@/utils"
+import { Setting, Refresh } from "@element-plus/icons-vue"
+import SelectLayoutMode from "./SelectLayoutMode.vue"
+
+const show = ref(false)
+
+const { isLeft } = useLayoutMode()
+const settingsStore = useSettingsStore()
+
+/** 使用 storeToRefs 将提取的属性保持其响应性 */
+const {
+  showTagsView,
+  showLogo,
+  fixedHeader,
+  showFooter,
+  showNotify,
+  showThemeSwitch,
+  showScreenfull,
+  showSearchMenu,
+  cacheTagsView,
+  showWatermark,
+  showGreyMode,
+  showColorWeakness
+} = storeToRefs(settingsStore)
+
+/** 定义 switch 设置项 */
+const switchSettings = {
+  显示标签栏: showTagsView,
+  "显示 Logo": showLogo,
+  "固定 Header": fixedHeader,
+  "显示页脚 Footer": showFooter,
+  显示消息通知: showNotify,
+  显示切换主题按钮: showThemeSwitch,
+  显示全屏按钮: showScreenfull,
+  显示搜索按钮: showSearchMenu,
+  是否缓存标签栏: cacheTagsView,
+  开启系统水印: showWatermark,
+  显示灰色模式: showGreyMode,
+  显示色弱模式: showColorWeakness
+}
+
+/** 非左侧模式时，Header 都是 fixed 布局 */
+watchEffect(() => {
+  !isLeft.value && (fixedHeader.value = true)
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixins.scss";
+
+.setting-container {
+  // padding: 20px;
+  .setting-item {
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+    padding: 5px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .setting-name {
+      @extend %ellipsis;
+    }
+  }
+  .el-button {
+    margin-top: 40px;
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index e8413e93..4b618cf6 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/src/layouts/components/NavigationBar/index.vue
@@ -12,6 +12,7 @@ import Notify from "@/components/Notify/index.vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import Screenfull from "@/components/Screenfull/index.vue"
 import SearchMenu from "@/components/SearchMenu/index.vue"
+import Settings from "@/components/Settings/index.vue"
 import { useDevice } from "@/hooks/useDevice"
 import { useLayoutMode } from "@/hooks/useLayoutMode"
 
@@ -21,7 +22,7 @@ const router = useRouter()
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
-const { showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
+const { showSettings, showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
 
 /** 切换侧边栏 */
 const toggleSidebar = () => {
@@ -46,6 +47,7 @@ const logout = () => {
     <Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" />
     <Sidebar v-if="isTop && !isMobile" class="sidebar" />
     <div class="right-menu">
+      <Settings v-if="showSettings" class="right-menu-item" />
       <SearchMenu v-if="showSearchMenu" class="right-menu-item" />
       <Screenfull v-if="showScreenfull" class="right-menu-item" />
       <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />