refactor: ♻️ 主题色、主题、布局等设置重构

src/components/SizeSelect/index.vue

@@ -1,24 +1,7 @@
-<script setup lang="ts">
-import { useAppStore } from "@/store/modules/app";
-
-const appStore = useAppStore();
-
-const sizeOptions = ref([
-  { label: "默认", value: "default" },
-  { label: "大型", value: "large" },
-  { label: "小型", value: "small" },
-]);
-
-function handleSizeChange(size: string) {
-  appStore.changeSize(size);
-  ElMessage.success("切换布局大小成功");
-}
-</script>
-
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
     <div>
-      <svg-icon icon-class="size" />
+      <svg-icon icon-class="size" :size="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
@@ -34,3 +17,26 @@ function handleSizeChange(size: string) {
     </template>
   </el-dropdown>
 </template>
+
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app";
+
+defineProps({
+  size: {
+    type: String,
+    required: false,
+  },
+});
+
+const sizeOptions = ref([
+  { label: "默认", value: "default" },
+  { label: "大型", value: "large" },
+  { label: "小型", value: "small" },
+]);
+
+const appStore = useAppStore();
+function handleSizeChange(size: string) {
+  appStore.changeSize(size);
+  ElMessage.success("切换布局大小成功");
+}
+</script>