From a1b4efe9d7063e08d46f14d3626edd7dbe27aeaa Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Tue, 18 Feb 2025 13:23:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/components/LayoutSelect.vue      | 175 ++++++++++--------
 1 file changed, 101 insertions(+), 74 deletions(-)

diff --git a/src/layout/components/Settings/components/LayoutSelect.vue b/src/layout/components/Settings/components/LayoutSelect.vue
index 565dc41d..f259baeb 100644
--- a/src/layout/components/Settings/components/LayoutSelect.vue
+++ b/src/layout/components/Settings/components/LayoutSelect.vue
@@ -1,35 +1,20 @@
 <template>
-  <div class="flex flex-wrap justify-around w-full h-12">
-    <el-tooltip content="左侧模式" placement="bottom">
+  <div class="layout-select">
+    <el-tooltip
+      v-for="item in layoutOptions"
+      :key="item.value"
+      :content="item.label"
+      placement="bottom"
+    >
       <div
-        class="layout-item left"
-        :class="{ 'is-active': modelValue === LayoutEnum.LEFT }"
-        @click="handleLayoutChange(LayoutEnum.LEFT)"
+        role="button"
+        tabindex="0"
+        :class="['layout-item', item.className, { 'is-active': modelValue === item.value }]"
+        @click="handleLayoutChange(item.value)"
+        @keydown.enter.space="handleLayoutChange(item.value)"
       >
-        <div />
-        <div />
-      </div>
-    </el-tooltip>
-
-    <el-tooltip content="顶部模式" placement="bottom">
-      <div
-        class="layout-item top"
-        :class="{ 'is-active': modelValue === LayoutEnum.TOP }"
-        @click="handleLayoutChange(LayoutEnum.TOP)"
-      >
-        <div />
-        <div />
-      </div>
-    </el-tooltip>
-
-    <el-tooltip content="混合模式" placement="bottom">
-      <div
-        class="layout-item mix"
-        :class="{ 'is-active': modelValue === LayoutEnum.MIX }"
-        @click="handleLayoutChange(LayoutEnum.MIX)"
-      >
-        <div />
-        <div />
+        <div class="layout-item-part" />
+        <div class="layout-item-part" />
       </div>
     </el-tooltip>
   </div>
@@ -38,76 +23,118 @@
 <script lang="ts" setup>
 import { LayoutEnum } from "@/enums/LayoutEnum";
 
-const modelValue = defineModel("modelValue", {
-  type: String,
+interface LayoutOption {
+  value: LayoutEnum;
+  label: string;
+  className: string;
+}
+
+const layoutOptions: LayoutOption[] = [
+  { value: LayoutEnum.LEFT, label: "左侧模式", className: "left" },
+  { value: LayoutEnum.TOP, label: "顶部模式", className: "top" },
+  { value: LayoutEnum.MIX, label: "混合模式", className: "mix" },
+];
+
+const modelValue = defineModel<LayoutEnum>("modelValue", {
   required: true,
-  default: () => "",
+  default: () => LayoutEnum.LEFT,
 });
 
-/**
- * 变换布局
- *
- * @param layout
- */
-function handleLayoutChange(layout: string) {
+function handleLayoutChange(layout: LayoutEnum) {
   modelValue.value = layout;
 }
 </script>
 
-<style scoped>
-.layout-selector {
+<style scoped lang="scss">
+.layout-select {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  width: 100%;
-  height: 50px;
+  gap: 10px;
+  justify-content: space-evenly;
+  padding: 10px 0;
+  --layout-primary: #1b2a47;
+  --layout-background: #f0f2f5;
+  --layout-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  --layout-hover: #e3f1f9;
 }
 
 .layout-item {
   position: relative;
   width: 18%;
-  height: 45px;
-  overflow: hidden;
+  height: 50px;
   cursor: pointer;
-  background: #f0f2f5;
-  border-radius: 4px;
+  background: var(--layout-background);
+  border-radius: 8px;
+  box-shadow: var(--layout-shadow);
 
-  &.mix div:nth-child(1),
-  &.top div:nth-child(1) {
-    width: 100%;
-    height: 30%;
-    background: #1b2a47;
-    box-shadow: 0 0 1px #888;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    background-color: var(--layout-hover);
+    transform: scale(1.02); /* 稍微放大，避免过于夸张 */
   }
 
-  &.mix div:nth-child(2) {
+  &:focus-visible {
+    outline: 2px solid var(--el-color-primary);
+  }
+
+  &-part {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 30%;
-    height: 70%;
-    background: #1b2a47;
-    box-shadow: 0 0 1px #888;
+    background: var(--layout-primary);
+    border-radius: 4px; /* 保持和父容器一致的圆角 */
+    box-shadow: var(--layout-shadow);
+    transition: all 0.3s ease;
   }
 
-  &.left div:nth-child(1) {
-    width: 30%;
-    height: 100%;
-    background: #1b2a47;
+  &.left {
+    .layout-item-part {
+      &:first-child {
+        width: 30%;
+        height: 100%;
+        border-radius: 4px 0 0 4px; /* 左边部分圆角 */
+      }
+      &:last-child {
+        top: 0;
+        right: 0;
+        width: 70%;
+        height: 30%;
+        background: #fff;
+        border-radius: 0 4px 4px 0; /* 右边部分圆角 */
+      }
+    }
   }
 
-  &.left div:nth-child(2) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 70%;
-    height: 30%;
-    background: #fff;
-    box-shadow: 0 0 1px #888;
+  &.top {
+    .layout-item-part:first-child {
+      width: 100%;
+      height: 30%;
+      border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
+    }
+  }
+
+  &.mix {
+    .layout-item-part {
+      &:first-child {
+        width: 100%;
+        height: 30%;
+        border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
+      }
+      &:last-child {
+        bottom: 0;
+        left: 0;
+        width: 30%;
+        height: 70%;
+        border-radius: 0 0 4px 4px; /* 底部部分圆角 */
+      }
+    }
   }
 }
 
-.layout-item.is-active {
+.is-active {
+  background-color: var(--layout-hover);
   border: 2px solid var(--el-color-primary);
+  transform: scale(1.05); /* 轻微放大 */
 }
 </style>