♻️ 重构祈愿、深渊、角色页面逻辑，支持游戏账号切换

#126
BTMuli · Sep 22, 2024 · 7f84a53 · 7f84a53
1 parent d81add1
commit 7f84a53
Show file tree

Hide file tree

Showing 8 changed files with 356 additions and 292 deletions.
diff --git a/src/components/config/tc-userBadge.vue b/src/components/config/tc-userBadge.vue
@@ -21,7 +21,7 @@
           <v-list-item
             v-for="account in gameAccounts"
             :key="account.gameUid"
-            @click="switchGameAccount(account)"
+            @click="useUserStore().switchGameAccount(account.gameUid)"
           >
             <v-list-item-title>{{ account.nickname }}</v-list-item-title>
             <v-list-item-subtitle>
@@ -406,23 +406,15 @@ async function showMenu(): Promise<void> {
 }
 
 async function showAccounts(): Promise<void> {
-  if (!userStore.uid.value) return;
-  gameAccounts.value = await TSUserAccount.game.getAccount(userStore.uid.value);
-}
-
-async function switchGameAccount(account: TGApp.Sqlite.Account.Game): Promise<void> {
-  if (account.gameUid === userStore.account.value.gameUid) {
-    showSnackbar({ text: "已经登录，无需切换!", color: "warn" });
+  if (!userStore.uid.value) {
+    showSnackbar({ text: "未登录!", color: "error" });
     return;
   }
-  await TSUserAccount.game.switchAccount(account.uid, account.gameUid);
-  const gameAccount = await TSUserAccount.game.getCurAccount(account.uid);
-  if (!gameAccount) {
-    showSnackbar({ text: `无法获取${account.uid}的游戏信息`, color: "warn" });
+  gameAccounts.value = await TSUserAccount.game.getAccount(userStore.uid.value);
+  if (gameAccounts.value.length === 0) {
+    showSnackbar({ text: "未找到账户的游戏数据，请尝试刷新!", color: "warn" });
     return;
   }
-  userStore.account.value = gameAccount;
-  showSnackbar({ text: "成功切换游戏账户!", color: "success" });
 }
 </script>
 <style lang="css" scoped>

diff --git a/src/components/func/confirm.vue b/src/components/func/confirm.vue
@@ -36,7 +36,7 @@ import { nextTick, onMounted, reactive, ref, watch, useTemplateRef } from "vue";
 interface ConfirmProps {
   title: string;
   text?: string;
-  mode: "confirm" | "input";
+  mode?: "confirm" | "input";
   otcancel?: boolean;
 }
 

diff --git a/src/components/userAvatar/tua-avatar-box.vue b/src/components/userAvatar/tua-avatar-box.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="tua-abl-mid">
       <div class="tua-abl-bg">
-        <img v-if="nameCard !== false && isFetterMax" :src="nameCard" alt="nameCard" />
+        <img v-if="isFetterMax" :src="nameCard" alt="nameCard" />
       </div>
       <div class="tua-abl-skills">
         <div v-for="skill in skills" :key="skill.skill_id" class="tua-abl-skill">
@@ -45,7 +45,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, ref } from "vue";
+import { computed } from "vue";
 
 import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
 import { useUserStore } from "../../store/modules/user.js";
@@ -118,12 +118,9 @@ const skills = computed<TGApp.Game.Avatar.Skill[]>(() => {
   return props.modelValue.skills.filter((skill) => skill.skill_type === 1);
 });
 
-const nameCard = ref<string | false>(false);
-
-onMounted(() => {
-  if (!props.modelValue) return;
+const nameCard = computed<string>(() => {
   const cardFind = TSUserAvatar.getAvatarCard(props.modelValue.avatar.id);
-  nameCard.value = `/source/nameCard/profile/${cardFind}.webp`;
+  return `/source/nameCard/profile/${cardFind}.webp`;
 });
 
 function getWeaponTitle(): string {

diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
@@ -56,7 +56,7 @@
             <span>第</span>
             <span>{{ item.id }}</span>
             <span>期 UID</span>
-            <span>{{ user.gameUid }}</span>
+            <span>{{ uidCur }}</span>
             <span>更新于</span>
             <span>{{ item.updated }}</span>
           </div>
@@ -116,7 +116,7 @@ const loadingSub = ref<string>();
 
 // data
 const userTab = ref<number>(0);
-const user = ref<TGApp.Sqlite.Account.Game>(userStore.account.value);
+const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);
 
 const localAbyss = ref<TGApp.Sqlite.Abyss.SingleTable[]>([]);
 const abyssRef = ref<HTMLElement>(<HTMLElement>{});
@@ -152,17 +152,23 @@ async function loadAbyss(): Promise<void> {
 
 async function refreshAbyss(): Promise<void> {
   if (!userStore.cookie.value) {
-    showSnackbar({
-      text: "未登录",
-      color: "error",
-    });
+    showSnackbar({ text: "未登录", color: "error" });
     await TGLogger.Warn("[UserAbyss][getAbyssData] 未登录");
     return;
   }
   if (uidCur.value && uidCur.value !== user.value.gameUid) {
+    const confirmSwitch = await showConfirm({
+      title: "是否切换游戏账户",
+      text: `确认则尝试切换至 ${uidCur.value}`,
+    });
+    if (confirmSwitch) {
+      await useUserStore().switchGameAccount(uidCur.value);
+      await refreshAbyss();
+      return;
+    }
     const confirm = await showConfirm({
       title: "确定刷新？",
-      text: `用户UID-${user.value.gameUid}与当前深渊UID-${uidCur.value}不一致`,
+      text: `用户${user.value.gameUid}与当前UID${uidCur.value}不一致`,
     });
     if (!confirm) {
       showSnackbar({ text: "已取消深渊数据刷新", color: "cancel" });
@@ -228,30 +234,21 @@ async function uploadAbyss(): Promise<void> {
   await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据");
   const abyssData = localAbyss.value.find((item) => item.id === Math.max(...abyssIdList.value));
   if (!abyssData) {
-    showSnackbar({
-      text: "未找到深渊数据",
-      color: "error",
-    });
+    showSnackbar({ text: "未找到深渊数据", color: "error" });
     await TGLogger.Warn("[UserAbyss][uploadAbyss] 未找到深渊数据");
     return;
   }
   const maxFloor = Number(abyssData.maxFloor.split("-")[0]);
   if (isNaN(maxFloor) || maxFloor <= 9) {
-    showSnackbar({
-      text: "尚未完成深渊，请完成深渊后重试！",
-      color: "error",
-    });
+    showSnackbar({ text: "尚未完成深渊，请完成深渊后重试！", color: "error" });
     await TGLogger.Warn(`[UserAbyss][uploadAbyss] 尚未完成深渊 ${abyssData.maxFloor}`);
     return;
   }
   const startTime = new Date(abyssData.startTime).getTime();
   const endTime = new Date(abyssData.endTime).getTime();
   const nowTime = new Date().getTime();
   if (nowTime < startTime || nowTime > endTime) {
-    showSnackbar({
-      text: "非最新深渊数据，请刷新深渊数据后重试！",
-      color: "error",
-    });
+    showSnackbar({ text: "非最新深渊数据，请刷新深渊数据后重试！", color: "error" });
     await TGLogger.Warn("[UserAbyss][uploadAbyss] 非最新深渊数据");
     return;
   }
@@ -274,19 +271,13 @@ async function uploadAbyss(): Promise<void> {
       showSnackbar({ text: res.message ?? "上传深渊数据成功" });
       await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据成功");
     } else {
-      showSnackbar({
-        text: `[${res.retcode}]${res.message}`,
-        color: "error",
-      });
+      showSnackbar({ text: `[${res.retcode}]${res.message}`, color: "error" });
       await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
       await TGLogger.Error(`[UserAbyss][uploadAbyss] ${res.retcode} ${res.message}`);
     }
   } catch (e) {
     if (e instanceof Error) {
-      showSnackbar({
-        text: e.message,
-        color: "error",
-      });
+      showSnackbar({ text: e.message, color: "error" });
       await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
       await TGLogger.Error(`[UserAbyss][uploadAbyss] ${e.message}`);
     }
@@ -301,7 +292,7 @@ async function deleteAbyss(): Promise<void> {
   }
   const confirm = await showConfirm({
     title: "确定删除数据？",
-    text: `将清除 ${uidCur.value} 的所有深渊数据`,
+    text: `将清除${uidCur.value}的所有深渊数据`,
   });
   if (!confirm) {
     showSnackbar({ text: "已取消删除", color: "cancel" });
@@ -312,7 +303,7 @@ async function deleteAbyss(): Promise<void> {
   await TSUserAbyss.delAbyss(uidCur.value);
   await new Promise((resolve) => setTimeout(resolve, 1000));
   loading.value = false;
-  showSnackbar({ text: `已清除 ${uidCur.value} 的深渊数据，即将刷新`, color: "success" });
+  showSnackbar({ text: `已清除 ${uidCur.value} 的深渊数据`, color: "success" });
   uidList.value = await TSUserAbyss.getAllUid();
   if (uidList.value.length > 0) uidCur.value = uidList.value[0];
   else uidCur.value = undefined;