perf: 优化主题色选项风格

package.json

@@ -169,7 +169,7 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-fake-server": "^2.2.2",
     "vite-plugin-remove-console": "^2.2.0",
-    "vite-plugin-router-warn": "^1.0.0",
+    "vite-plugin-router-warn": "^2.0.0",
     "vite-svg-loader": "^5.1.0",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.1.8"

pnpm-lock.yaml

@@ -370,8 +370,8 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
       vite-plugin-router-warn:
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: ^2.0.0
+        version: 2.0.0
       vite-svg-loader:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.25(typescript@5.9.3))
@@ -5247,8 +5247,8 @@ packages:
   vite-plugin-remove-console@2.2.0:
     resolution: {integrity: sha512-qgjh5pz75MdE9Kzs8J0kBwaCfifHV0ezRbB9rpGsIOxam+ilcGV7WOk91vFJXquzRmiKrFh3Hxlh0JJWAmXTbQ==}
 
-  vite-plugin-router-warn@1.0.0:
-    resolution: {integrity: sha512-jnr7faHJPkKxukBXVpg7Ui1UDqhmxD7xU6JGidq8ivSHTsNAPqzSpPpwW8O1PBP/0+Owq4bLfNNk11drOkz4xA==}
+  vite-plugin-router-warn@2.0.0:
+    resolution: {integrity: sha512-Zgg5IUaNtUSHdL+SL+g7YOYQQlTHh1eRqSkmf8c961AQv1eaJxCl/9/8pUZZDcTbwWjAlgbctgAF7iGm2vxNjA==}
 
   vite-svg-loader@5.1.0:
     resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
@@ -10875,7 +10875,7 @@ snapshots:
 
   vite-plugin-remove-console@2.2.0: {}
 
-  vite-plugin-router-warn@1.0.0: {}
+  vite-plugin-router-warn@2.0.0: {}
 
   vite-svg-loader@5.1.0(vue@3.5.25(typescript@5.9.3)):
     dependencies:

src/layout/components/lay-setting/index.vue

@@ -345,8 +345,8 @@ onUnmounted(() => removeMatchMedia);
           @click="setLayoutThemeColor(item.themeColor)"
         >
           <el-icon
-            style="margin: 0.1em 0.1em 0 0"
-            :size="17"
+            class="mt-px"
+            :size="20"
             :color="getThemeColor(item.themeColor)"
           >
             <IconifyIconOffline :icon="Check" />
@@ -538,17 +538,24 @@ onUnmounted(() => removeMatchMedia);
 }
 
 .theme-color {
-  height: 20px;
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
 
   li {
-    float: left;
-    height: 20px;
-    margin-right: 8px;
+    position: relative;
+    width: 21px;
+    height: 21px;
     cursor: pointer;
     border-radius: 4px;
+    box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+    transition: all 0.2s ease;
 
-    &:nth-child(1) {
-      border: 1px solid #ddd;
+    &:hover {
+      box-shadow:
+        rgb(0 0 0 / 25%) 0 0 0 1px inset,
+        0 2px 4px rgb(0 0 0 / 15%);
+      transform: scale(1.1);
     }
   }
 }