From 9710c359af55299d8f286eea4aa106b2106342ba Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 7 Jul 2023 15:25:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=A8=A1=E5=BC=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Settings/SelectLayoutMode.vue  | 106 ++++++++++++++++++
 src/layouts/components/Settings/index.vue     |   8 +-
 2 files changed, 109 insertions(+), 5 deletions(-)
 create mode 100644 src/layouts/components/Settings/SelectLayoutMode.vue

diff --git a/src/layouts/components/Settings/SelectLayoutMode.vue b/src/layouts/components/Settings/SelectLayoutMode.vue
new file mode 100644
index 0000000..1ecf104
--- /dev/null
+++ b/src/layouts/components/Settings/SelectLayoutMode.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import { storeToRefs } from "pinia"
+import { useSettingsStore } from "@/store/modules/settings"
+
+const settingsStore = useSettingsStore()
+
+const { layoutMode } = storeToRefs(settingsStore)
+
+const isLeft = computed(() => layoutMode.value === "left")
+const isTop = computed(() => layoutMode.value === "top")
+const isLeftTop = computed(() => layoutMode.value === "left-top")
+</script>
+
+<template>
+  <div class="select-layout-mode">
+    <el-tooltip content="左侧模式">
+      <el-container class="layout-mode left" :class="{ active: isLeft }" @click="layoutMode = '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="layoutMode = 'top'">
+        <el-header />
+        <el-main />
+      </el-container>
+    </el-tooltip>
+    <el-tooltip content="混合模式">
+      <el-container class="layout-mode left-top" :class="{ active: isLeftTop }" @click="layoutMode = 'left-top'">
+        <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 #00000000;
+  &: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-border-color);
+  }
+  .el-aside {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color);
+  }
+}
+
+.top {
+  .el-header {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color);
+  }
+}
+
+.left-top {
+  .el-header {
+    background-color: var(--el-border-color);
+  }
+  .el-aside {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color);
+  }
+}
+</style>
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index 6b89e2a..03bf710 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -3,6 +3,7 @@ import { watchEffect } from "vue"
 import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
 import { resetConfigLayout } from "@/utils"
+import SelectLayoutMode from "./SelectLayoutMode.vue"
 import { Refresh } from "@element-plus/icons-vue"
 
 const settingsStore = useSettingsStore()
@@ -43,11 +44,8 @@ watchEffect(() => {
 <template>
   <div class="setting-container">
     <h4>布局配置</h4>
-    <el-radio-group v-model="layoutMode">
-      <el-radio label="left">左侧模式</el-radio>
-      <el-radio label="top">顶部模式（开发中）</el-radio>
-      <el-radio label="left-top">混合模式</el-radio>
-    </el-radio-group>
+    <SelectLayoutMode />
+    <el-divider />
     <h4>功能配置</h4>
     <div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
       <span class="setting-name">{{ settingName }}</span>