From cd3084817d41e4d57615502c193274d0d914c774 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Mon, 3 Apr 2023 09:39:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(home):=20=E6=94=AF=E6=8C=81=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6=E6=98=BE=E7=A4=BA=E9=A1=BA=E5=BA=8F?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/t-pool.vue |  1 +
 src/pages/Home.vue        | 25 ++++++++++++++++++++---
 src/store/modules/home.ts | 42 ++++++++++++++++++++++++++++++++++++---
 3 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/components/t-pool.vue b/src/components/t-pool.vue
index 2b5ab17f..304d3144 100644
--- a/src/components/t-pool.vue
+++ b/src/components/t-pool.vue
@@ -148,6 +148,7 @@ async function toPost(pool: GachaCard) {
 	width: 100%;
 	background: #546d8b;
 	border-radius: 10px;
+	margin-top: 10px;
 }
 
 .pool-grid {
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 7fbc4a21..a0db73df 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,11 +1,10 @@
 <template>
-	<t-pool v-if="homeStore.pool.show" />
-	<t-position v-if="homeStore.position.show" />
-	<t-calendar v-if="homeStore.calendar.show" />
+	<component v-for="item in components" :is="item" :key="item" />
 </template>
 
 <script lang="ts" setup>
 // vue
+import { shallowRef, onMounted } from "vue";
 import TPool from "../components/t-pool.vue";
 import TPosition from "../components/t-position.vue";
 import TCalendar from "../components/t-calendar.vue";
@@ -13,4 +12,24 @@ import TCalendar from "../components/t-calendar.vue";
 import useHomeStore from "../store/modules/home";
 
 const homeStore = useHomeStore();
+const showItems = homeStore.getShowValue();
+const components = shallowRef([] as any[]);
+
+onMounted(() => {
+	showItems.map(item => {
+		switch (item) {
+			case "限时祈愿":
+				components.value.push(TPool);
+				break;
+			case "近期活动":
+				components.value.push(TPosition);
+				break;
+			case "素材日历":
+				components.value.push(TCalendar);
+				break;
+			default:
+				break;
+		}
+	});
+});
 </script>
diff --git a/src/store/modules/home.ts b/src/store/modules/home.ts
index 16deb601..fb6f6131 100644
--- a/src/store/modules/home.ts
+++ b/src/store/modules/home.ts
@@ -50,12 +50,48 @@ const useHomeStore = defineStore({
 			if (this.calendar.show) showValue.push("素材日历");
 			if (this.pool.show) showValue.push("限时祈愿");
 			if (this.position.show) showValue.push("近期活动");
+			showValue.sort((a, b) => {
+				return this.getItemOrder(a) - this.getItemOrder(b);
+			});
 			return showValue;
 		},
+		getItemOrder(item: string) {
+			switch (item) {
+				case "素材日历":
+					return this.calendar.order;
+				case "限时祈愿":
+					return this.pool.order;
+				case "近期活动":
+					return this.position.order;
+				default:
+					return 4;
+			}
+		},
 		setShowValue(value: string[]) {
-			this.calendar.show = value.includes("素材日历");
-			this.pool.show = value.includes("限时祈愿");
-			this.position.show = value.includes("近期活动");
+			// 遍历 value
+			value.forEach(item => {
+				if (!this.getShowItem().includes(item)) {
+					throw new Error("传入的值不在可选范围内");
+				}
+				// 获取 item 在 value 中的索引
+				const index = value.indexOf(item);
+				switch (item) {
+					case "素材日历":
+						this.calendar.order = index;
+						this.calendar.show = true;
+						break;
+					case "限时祈愿":
+						this.pool.order = index;
+						this.pool.show = true;
+						break;
+					case "近期活动":
+						this.position.order = index;
+						this.position.show = true;
+						break;
+					default:
+						break;
+				}
+			});
 		},
 	},
 	persist: true,