From 8ccb73c04d78427220daa5305930487a20adb72d Mon Sep 17 00:00:00 2001
From: kubeops <kubeops@163.com>
Date: Sun, 7 Jul 2024 12:29:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89RightPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Settings/SelectLayoutMode.vue  | 103 ------------------
 src/layouts/components/Settings/index.vue     |  86 ---------------
 src/layouts/components/index.ts               |   1 -
 src/layouts/index.vue                         |   8 +-
 4 files changed, 4 insertions(+), 194 deletions(-)
 delete mode 100644 src/layouts/components/Settings/SelectLayoutMode.vue
 delete mode 100644 src/layouts/components/Settings/index.vue

diff --git a/src/layouts/components/Settings/SelectLayoutMode.vue b/src/layouts/components/Settings/SelectLayoutMode.vue
deleted file mode 100644
index 28ff95ec..00000000
--- a/src/layouts/components/Settings/SelectLayoutMode.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<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/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
deleted file mode 100644
index a932ed20..00000000
--- a/src/layouts/components/Settings/index.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script lang="ts" setup>
-import { watchEffect } from "vue"
-import { storeToRefs } from "pinia"
-import { useSettingsStore } from "@/store/modules/settings"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
-import { resetConfigLayout } from "@/utils"
-import SelectLayoutMode from "./SelectLayoutMode.vue"
-import { Refresh } from "@element-plus/icons-vue"
-
-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>
-
-<template>
-  <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>
-</template>
-
-<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/index.ts b/src/layouts/components/index.ts
index c6a9ab27..3c2f9d2e 100644
--- a/src/layouts/components/index.ts
+++ b/src/layouts/components/index.ts
@@ -1,6 +1,5 @@
 export { default as AppMain } from "./AppMain.vue"
 export { default as NavigationBar } from "./NavigationBar/index.vue"
-export { default as Settings } from "./Settings/index.vue"
 export { default as Sidebar } from "./Sidebar/index.vue"
 export { default as TagsView } from "./TagsView/index.vue"
 export { default as RightPanel } from "./RightPanel/index.vue"
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index fb2712da..c0c35e45 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -9,7 +9,7 @@ import { useLayoutMode } from "@/hooks/useLayoutMode"
 import LeftMode from "./LeftMode.vue"
 import TopMode from "./TopMode.vue"
 import LeftTopMode from "./LeftTopMode.vue"
-import { Settings, RightPanel } from "./components"
+// import { Settings, RightPanel } from "./components"
 import { getCssVariableValue, setCssVariableValue } from "@/utils"
 
 /** Layout 布局响应式 */
@@ -19,7 +19,7 @@ const { setWatermark, clearWatermark } = useWatermark()
 const { isMobile } = useDevice()
 const { isLeft, isTop, isLeftTop } = useLayoutMode()
 const settingsStore = useSettingsStore()
-const { showSettings, showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
+const { showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
 
 const classes = computed(() => {
   return {
@@ -53,9 +53,9 @@ watchEffect(() => {
     <!-- 混合模式 -->
     <LeftTopMode v-else-if="isLeftTop" />
     <!-- 右侧设置面板 -->
-    <RightPanel v-if="showSettings">
+    <!-- <RightPanel v-if="showSettings">
       <Settings />
-    </RightPanel>
+    </RightPanel> -->
   </div>
 </template>