From 7f84a53f6d799c9f7fae650ad6bc965324dc462c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sun, 22 Sep 2024 11:48:25 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E7=A5=88=E6=84=BF=E3=80=81=E6=B7=B1=E6=B8=8A=E3=80=81=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=B8=B8=E6=88=8F=E8=B4=A6=E5=8F=B7=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#126
---
 src/components/config/tc-userBadge.vue       |  22 +-
 src/components/func/confirm.vue              |   2 +-
 src/components/userAvatar/tua-avatar-box.vue |  11 +-
 src/pages/User/Abyss.vue                     |  49 ++--
 src/pages/User/Characters.vue                | 274 ++++++++++++-------
 src/pages/User/Gacha.vue                     | 247 ++++++++---------
 src/plugins/Sqlite/modules/userAvatar.ts     |  20 +-
 src/store/modules/user.ts                    |  25 ++
 8 files changed, 357 insertions(+), 293 deletions(-)

diff --git a/src/components/config/tc-userBadge.vue b/src/components/config/tc-userBadge.vue
index 7dc934b9..8a4209b7 100644
--- 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;
+  if (!userStore.uid.value) {
+    showSnackbar({ text: "未登录!", color: "error" });
+    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 (gameAccounts.value.length === 0) {
+    showSnackbar({ text: "未找到账户的游戏数据，请尝试刷新!", color: "warn" });
     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" });
-    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
index 079f9a95..4ffe8f6c 100644
--- 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
index 085c82a6..cd94df24 100644
--- 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
index a332c5ee..28092605 100644
--- 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,19 +234,13 @@ 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;
   }
@@ -248,10 +248,7 @@ async function uploadAbyss(): Promise<void> {
   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;
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index f7eac50b..720592e0 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -1,36 +1,49 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <v-app-bar>
-    <template #title>
-      <span v-if="user"> {{ user.nickname }}({{ user.gameUid }})</span>
-      <span v-else> 暂无数据 </span>
+    <template #prepend>
+      <div class="uc-top-title">
+        <img alt="icon" src="/source/UI/userAvatar.webp" />
+        <span>原神战绩</span>
+        <v-btn variant="outlined" @click="showSelect = true">筛选角色</v-btn>
+        <v-btn variant="outlined" @click="resetSelect = true">重置筛选</v-btn>
+      </div>
     </template>
     <template #append>
       <div class="uc-top-btns">
-        <v-btn @click="refresh()" :rounded="true" variant="outlined" v-model:loading="loadData">
-          <template #prepend>
-            <v-icon>mdi-refresh</v-icon>
-          </template>
+        <v-btn
+          prepend-icon="mdi-refresh"
+          @click="refresh()"
+          :rounded="true"
+          variant="outlined"
+          v-model:loading="loadData"
+        >
           刷新
         </v-btn>
         <v-btn
+          prepend-icon="mdi-share"
           :disabled="enableShare"
           @click="share()"
           :rounded="true"
           variant="outlined"
           v-model:loading="loadShare"
         >
-          <template #prepend>
-            <v-icon>mdi-share</v-icon>
-          </template>
           分享
         </v-btn>
+        <v-btn
+          prepend-icon="mdi-delete"
+          @click="deleteUid()"
+          :rounded="true"
+          variant="outlined"
+          :disabled="uidCur === undefined"
+          v-model:loading="loadDel"
+        >
+          删除
+        </v-btn>
       </div>
     </template>
     <template #extension>
       <div class="uc-select">
-        <v-btn variant="outlined" @click="showSelect = true">筛选角色</v-btn>
-        <v-btn variant="outlined" @click="resetSelect = true">重置筛选</v-btn>
         <v-select
           v-model="showMode"
           :items="modeList"
@@ -39,7 +52,16 @@
           item-title="label"
           item-value="value"
           variant="outlined"
-          class="uc-select-mode"
+          class="uc-select-btn"
+          density="compact"
+        />
+        <v-select
+          v-model="uidCur"
+          :items="uidList"
+          label="当前UID"
+          :hide-details="true"
+          variant="outlined"
+          class="uc-select-btn"
           density="compact"
         />
       </div>
@@ -48,11 +70,10 @@
   <div class="uc-box">
     <div class="uc-top">
       <div class="uc-top-title">
-        <span v-if="user">
-          {{ user.nickname }} UID：{{ user.gameUid }} 更新于 {{ getUpdateTime() }}
-        </span>
+        <span v-if="uidCur">UID：{{ uidCur }} 更新于 {{ getUpdateTime() }}</span>
         <span v-else> 暂无数据 </span>
       </div>
+      <div class="uc-top-info">Render by TeyvatGuide v{{ version }}</div>
     </div>
     <div class="uc-grid" v-if="!isEmpty">
       <TuaAvatarBox
@@ -66,7 +87,7 @@
       <img src="/source/UI/empty.webp" alt="empty" />
     </div>
   </div>
-  <suspense>
+  <suspense v-if="dataVal">
     <TuaDetailOverlay
       v-model="showOverlay"
       :avatar="dataVal"
@@ -79,9 +100,11 @@
   <TwoSelectC v-model="showSelect" @select-c="handleSelect" v-model:reset="resetSelect" />
 </template>
 <script lang="ts" setup>
+import { getVersion } from "@tauri-apps/api/app";
 import { storeToRefs } from "pinia";
-import { onBeforeMount, onMounted, ref, watch, computed } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 
+import showConfirm from "../../components/func/confirm.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import TuaAvatarBox from "../../components/userAvatar/tua-avatar-box.vue";
@@ -92,18 +115,21 @@ import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
 import { useUserStore } from "../../store/modules/user.js";
 import TGLogger from "../../utils/TGLogger.js";
 import { generateShareImg } from "../../utils/TGShare.js";
+import { timestampToDate } from "../../utils/toolFunc.js";
 import TGRequest from "../../web/request/TGRequest.js";
 
 // store
 const userStore = storeToRefs(useUserStore());
-const user = ref<TGApp.Sqlite.Account.Game>();
+const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);
 
 // loading
 const loading = ref<boolean>(false);
 const loadData = ref<boolean>(false);
 const loadShare = ref<boolean>(false);
+const loadDel = ref<boolean>(false);
 const loadingTitle = ref<string>();
 const loadingSub = ref<string>();
+const version = ref<string>();
 
 // data
 const isEmpty = ref<boolean>(true);
@@ -111,7 +137,7 @@ const roleList = ref<TGApp.Sqlite.Character.UserRole[]>([]);
 const selectedList = ref<TGApp.Sqlite.Character.UserRole[]>([]);
 
 // overlay
-const dataVal = ref<TGApp.Sqlite.Character.UserRole>(<TGApp.Sqlite.Character.UserRole>{});
+const dataVal = ref<TGApp.Sqlite.Character.UserRole>();
 const showOverlay = ref<boolean>(false);
 const selectIndex = ref<number>(0);
 
@@ -129,52 +155,54 @@ const enableShare = computed<boolean>(() => {
   return showSelect.value;
 });
 
-onBeforeMount(() => {
-  if (userStore.account.value) user.value = userStore.account.value;
-});
+const uidCur = ref<string>();
+const uidList = ref<string[]>([]);
 
 onMounted(async () => {
   await TGLogger.Info("[Character][onMounted] 进入角色页面");
   loadingTitle.value = "正在获取角色数据";
   loading.value = true;
-  loadData.value = true;
-  await load();
+  version.value = await getVersion();
+  await loadUid();
   loading.value = false;
   loadData.value = false;
 });
 
-watch(resetSelect, (val) => {
-  if (val) {
-    selectedList.value = getOrderedList(roleList.value);
-    showSnackbar({
-      text: "已重置筛选条件",
-      color: "success",
-    });
-    selectIndex.value = selectedList.value.indexOf(dataVal.value);
-    if (selectIndex.value === -1) {
-      dataVal.value = selectedList.value[0];
-      selectIndex.value = 0;
+watch(
+  () => resetSelect.value,
+  (val) => {
+    if (val) {
+      selectedList.value = getOrderedList(roleList.value);
+      showSnackbar({ text: "已重置筛选条件", color: "success" });
+      if (!dataVal.value) return;
+      selectIndex.value = selectedList.value.indexOf(dataVal.value);
+      if (selectIndex.value === -1) {
+        dataVal.value = selectedList.value[0];
+        selectIndex.value = 0;
+      }
     }
-  }
-});
-watch(showMode, (val) => {
-  if (val === "classic") {
-    showSnackbar({
-      text: "已切换至经典视图",
-      color: "success",
-    });
-  } else if (val === "card") {
-    showSnackbar({
-      text: "已切换至卡片视图（简略）",
-      color: "success",
-    });
-  } else {
-    showSnackbar({
-      text: "已切换至卡片视图（详细）",
-      color: "success",
-    });
-  }
-});
+  },
+);
+watch(
+  () => showMode.value,
+  (val) => {
+    switch (val) {
+      case "classic":
+        showSnackbar({ text: "已切换至经典视图", color: "success" });
+        break;
+      case "card":
+        showSnackbar({ text: "已切换至卡片视图（简略）", color: "success" });
+        break;
+      case "dev":
+        showSnackbar({ text: "已切换至卡片视图（详细）", color: "success" });
+        break;
+    }
+  },
+);
+watch(
+  () => uidCur.value,
+  async () => await loadRole(),
+);
 
 function getOrderedList(
   data: TGApp.Sqlite.Character.UserRole[],
@@ -188,21 +216,30 @@ function getOrderedList(
   });
 }
 
-async function load(): Promise<void> {
-  if (!user.value) return;
-  const roleData = await TSUserAvatar.getAvatars(user.value.gameUid);
+async function loadUid(): Promise<void> {
+  uidList.value = await TSUserAvatar.getAllUid();
+  if (uidList.value.length === 0) uidList.value = [user.value.gameUid];
+  if (uidList.value.includes(user.value.gameUid)) {
+    uidCur.value = user.value.gameUid;
+  } else {
+    uidCur.value = uidList.value[0];
+  }
+}
+
+async function loadRole(): Promise<void> {
+  if (!uidCur.value) {
+    isEmpty.value = true;
+    return;
+  }
+  roleList.value = [];
+  const roleData = await TSUserAvatar.getAvatars(uidCur.value);
   roleList.value = getOrderedList(roleData);
   selectedList.value = roleList.value;
   dataVal.value = roleData[selectIndex.value];
-  isEmpty.value = false;
-  await TGLogger.Info(`[Character][loadRole][${user.value.gameUid}] 成功加载角色数据`);
-  await TGLogger.Info(
-    `[Character][loadRole][${user.value.gameUid}] 共获取到${roleData.length}个角色`,
-  );
-  showSnackbar({
-    text: `成功加载${roleData.length}个角色`,
-    color: "success",
-  });
+  isEmpty.value = roleList.value.length === 0;
+  await TGLogger.Info(`[Character][loadRole][${uidCur.value}] 成功加载角色数据`);
+  await TGLogger.Info(`[Character][loadRole][${uidCur.value}] 共获取到${roleData.length}个角色`);
+  showSnackbar({ text: `成功加载${roleData.length}个角色`, color: "success" });
 }
 
 async function refresh(): Promise<void> {
@@ -215,15 +252,31 @@ async function refresh(): Promise<void> {
     showOverlay.value = false;
     await new Promise((resolve) => setTimeout(resolve, 500));
   }
+  if (uidCur.value && uidCur.value !== user.value.gameUid) {
+    const switchConfirm = await showConfirm({
+      title: "是否切换游戏账户",
+      text: `确认则尝试切换至${uidCur.value}`,
+    });
+    if (switchConfirm) {
+      await useUserStore().switchGameAccount(uidCur.value);
+      await refresh();
+      return;
+    }
+    const confirm = await showConfirm({
+      title: "确定刷新？",
+      text: `用户${user.value.gameUid}与当前UID${uidCur.value}不一致`,
+    });
+    if (!confirm) {
+      showSnackbar({ text: "已取消角色数据刷新", color: "cancel" });
+      return;
+    }
+  }
   await TGLogger.Info(`[Character][refreshRoles][${user.value.gameUid}] 正在更新角色数据`);
   loadingTitle.value = "正在获取角色列表";
   loading.value = true;
   loadData.value = true;
   if (!userStore.cookie.value) {
-    showSnackbar({
-      text: "请先登录",
-      color: "error",
-    });
+    showSnackbar({ text: "请先登录", color: "error" });
     loading.value = false;
     loadData.value = false;
     return;
@@ -234,10 +287,7 @@ async function refresh(): Promise<void> {
   };
   const listRes = await TGRequest.User.byCookie.getAvatarList(cookie, user.value.gameUid);
   if (!Array.isArray(listRes)) {
-    showSnackbar({
-      text: `[${listRes.retcode}] ${listRes.message}`,
-      color: "error",
-    });
+    showSnackbar({ text: `[${listRes.retcode}] ${listRes.message}`, color: "error" });
     await TGLogger.Error(`[Character][refreshRoles][${user.value.gameUid}] 获取角色列表失败`);
     await TGLogger.Error(
       `[Character][refreshRoles][${user.value.gameUid}] ${listRes.retcode} ${listRes.message}`,
@@ -251,10 +301,7 @@ async function refresh(): Promise<void> {
   loadingSub.value = `共${idList.length}个角色`;
   const res = await TGRequest.User.byCookie.getAvatarDetail(cookie, user.value.gameUid, idList);
   if ("retcode" in res) {
-    showSnackbar({
-      text: `[${res.retcode}] ${res.message}`,
-      color: "error",
-    });
+    showSnackbar({ text: `[${res.retcode}] ${res.message}`, color: "error" });
     await TGLogger.Error(`[Character][refreshRoles][${user.value.gameUid}] 获取角色数据失败`);
     await TGLogger.Error(
       `[Character][refreshRoles][${user.value.gameUid}] ${res.retcode} ${res.message}`,
@@ -270,17 +317,14 @@ async function refresh(): Promise<void> {
   await TGLogger.Info(
     `[Character][refreshRoles][${user.value.gameUid}] 共更新${res.list.length}个角色`,
   );
-  await load();
+  await loadRole();
   loading.value = false;
   loadData.value = false;
 }
 
 async function share(): Promise<void> {
   if (!user.value || isEmpty.value) {
-    showSnackbar({
-      text: "暂无数据",
-      color: "error",
-    });
+    showSnackbar({ text: "暂无数据", color: "error" });
     return;
   }
   await TGLogger.Info(`[Character][shareRoles][${user.value.gameUid}] 正在生成分享图片`);
@@ -297,7 +341,26 @@ async function share(): Promise<void> {
   await TGLogger.Info(`[Character][shareRoles][${user.value.gameUid}] 生成分享图片成功`);
 }
 
+async function deleteUid(): Promise<void> {
+  if (!uidCur.value) {
+    showSnackbar({ text: "未找到当前UID", color: "error" });
+    return;
+  }
+  const confirm = await showConfirm({
+    title: "确定删除？",
+    text: `将删除${uidCur.value}对应的角色数据`,
+  });
+  if (!confirm) {
+    showSnackbar({ text: "已取消删除", color: "cancel" });
+    return;
+  }
+  await TSUserAvatar.deleteUid(uidCur.value);
+  showSnackbar({ text: `成功删除${uidCur.value}的角色数据` });
+  await loadUid();
+}
+
 function getUpdateTime(): string {
+  if (roleList.value.length === 0) return "";
   let lastUpdateTime = 0;
   roleList.value.forEach((role) => {
     const updateTime = new Date(role.updated).getTime();
@@ -305,7 +368,7 @@ function getUpdateTime(): string {
       lastUpdateTime = updateTime;
     }
   });
-  return new Date(lastUpdateTime).toLocaleString().replace(/\//g, "-");
+  return timestampToDate(lastUpdateTime);
 }
 
 function selectRole(role: TGApp.Sqlite.Character.UserRole): void {
@@ -326,18 +389,13 @@ function handleSelect(val: SelectedCValue) {
     return val.area.includes(avatar.area);
   });
   if (filterC.length === 0) {
-    showSnackbar({
-      text: "未找到符合条件的角色",
-      color: "warn",
-    });
+    showSnackbar({ text: "未找到符合条件的角色", color: "warn" });
     return;
   }
-  showSnackbar({
-    text: `筛选出符合条件的角色 ${filterC.length} 个`,
-    color: "success",
-  });
+  showSnackbar({ text: `筛选出符合条件的角色 ${filterC.length} 个`, color: "success" });
   const selectedId = filterC.map((item) => item.id);
   selectedList.value = roleList.value.filter((role) => selectedId.includes(role.cid));
+  if (!dataVal.value) return;
   if (!selectedList.value.includes(dataVal.value)) {
     dataVal.value = selectedList.value[0];
     selectIndex.value = 0;
@@ -366,7 +424,8 @@ function handleSwitch(next: boolean): void {
   gap: 10px;
 }
 
-.uc-select-mode {
+.uc-select-btn {
+  position: relative;
   display: flex;
   width: 200px;
   height: 40px;
@@ -396,9 +455,28 @@ function handleSwitch(next: boolean): void {
 }
 
 .uc-top-title {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  gap: 10px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    color: var(--common-text-title);
+    font-family: var(--font-title);
+    font-size: 20px;
+  }
+}
+
+.uc-top-info {
+  z-index: -1;
+  font-size: 14px;
+  opacity: 0.8;
 }
 
 .uc-top-btns {
diff --git a/src/pages/User/Gacha.vue b/src/pages/User/Gacha.vue
index a7432bfa..5e62f350 100644
--- a/src/pages/User/Gacha.vue
+++ b/src/pages/User/Gacha.vue
@@ -1,24 +1,27 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="gacha-top-bar">
-    <div class="gacha-top-title">祈愿记录</div>
+    <div class="gacha-top-title">
+      <img src="/source/UI/userGacha.webp" alt="gacha" />
+      <span>祈愿记录</span>
+    </div>
     <v-select v-model="uidCur" class="gacha-top-select" :items="selectItem" variant="outlined" />
     <div class="gacha-top-btns">
-      <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(false)"
-        >增量刷新
+      <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(false)">
+        增量刷新
       </v-btn>
-      <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(true)"
-        >全量刷新
+      <v-btn prepend-icon="mdi-refresh" class="gacha-top-btn" @click="confirmRefresh(true)">
+        全量刷新
       </v-btn>
-      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn(false)"
-        >导入
+      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn(false)">
+        导入
       </v-btn>
-      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn(true)"
-        >导入(v4)
+      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn(true)">
+        导入(v4)
       </v-btn>
       <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf()">导出</v-btn>
-      <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf4()"
-        >导出(v4)
+      <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="exportUigf4()">
+        导出(v4)
       </v-btn>
       <v-btn prepend-icon="mdi-delete" class="gacha-top-btn" @click="deleteGacha()">删除</v-btn>
     </div>
@@ -50,7 +53,7 @@
 import { path } from "@tauri-apps/api";
 import { open, save } from "@tauri-apps/plugin-dialog";
 import { storeToRefs } from "pinia";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 
 import showConfirm from "../../components/func/confirm.js";
 import showSnackbar from "../../components/func/snackbar.js";
@@ -74,7 +77,7 @@ import TGRequest from "../../web/request/TGRequest.js";
 
 // store
 const userStore = storeToRefs(useUserStore());
-const account = userStore.account.value;
+const account = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);
 const authkey = ref<string>("");
 
 // loading
@@ -84,10 +87,23 @@ const loadingSub = ref<string>();
 
 // data
 const selectItem = ref<string[]>([]);
-const uidCur = ref<string>("");
+const uidCur = ref<string>();
 const gachaListCur = ref<TGApp.Sqlite.GachaRecords.SingleTable[]>([]);
 const tab = ref<string>("overview");
 
+// 监听 UID 变化
+watch(
+  () => uidCur.value,
+  async (newUid) => {
+    if (!newUid) return;
+    gachaListCur.value = await TSUserGacha.getGachaRecords(newUid);
+    showSnackbar({ text: `成功获取 ${gachaListCur.value.length} 条祈愿数据` });
+    await TGLogger.Info(
+      `[UserGacha][${newUid}][watch] 成功获取 ${gachaListCur.value.length} 条祈愿数据`,
+    );
+  },
+);
+
 onMounted(async () => {
   await TGLogger.Info("[UserGacha][onMounted] 进入角色祈愿页面");
   loadingTitle.value = "正在获取祈愿 UID 列表";
@@ -116,26 +132,30 @@ onMounted(async () => {
 
 // 刷新按钮点击事件
 async function confirmRefresh(force: boolean): Promise<void> {
-  await TGLogger.Info(`[UserGacha][${account.gameUid}][confirmRefresh] 刷新祈愿数据`);
-  const confirmRes = await showConfirm({
-    title: "是否刷新祈愿数据？",
-    text: `将刷新 UID：${account.gameUid} 的祈愿数据`,
-  });
-  if (!confirmRes) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消刷新祈愿数据",
+  await TGLogger.Info(`[UserGacha][${account.value.gameUid}][confirmRefresh] 刷新祈愿数据`);
+  if (uidCur.value && uidCur.value !== account.value.gameUid) {
+    const confirmSwitch = await showConfirm({
+      title: "是否切换游戏账户",
+      text: `确认则尝试切换至 ${uidCur.value}`,
     });
-    await TGLogger.Warn("[UserGacha][${account.gameUid}][confirmRefresh] 已取消刷新祈愿数据");
-    return;
+    if (confirmSwitch) {
+      await useUserStore().switchGameAccount(uidCur.value);
+      await confirmRefresh(force);
+      return;
+    }
+    const confirm = await showConfirm({
+      title: "确定刷新？",
+      text: `用户${account.value.gameUid}与当前UID${uidCur.value}不一致`,
+    });
+    if (!confirm) {
+      showSnackbar({ text: "已取消祈愿数据刷新", color: "cancel" });
+      return;
+    }
   }
   loadingTitle.value = "正在获取 authkey";
   loading.value = true;
   if (!userStore.cookie.value) {
-    showSnackbar({
-      color: "error",
-      text: "请先登录",
-    });
+    showSnackbar({ color: "error", text: "请先登录" });
     loading.value = false;
     await TGLogger.Warn("[UserGacha][${account.gameUid}][confirmRefresh] 未检测到 cookie");
     return;
@@ -144,19 +164,16 @@ async function confirmRefresh(force: boolean): Promise<void> {
     stoken: userStore.cookie.value.stoken,
     mid: userStore.cookie.value.mid,
   };
-  const gameUid = account.gameUid;
+  const gameUid = account.value.gameUid;
   const authkeyRes = await TGRequest.User.getAuthkey(cookie, gameUid);
   if (typeof authkeyRes === "string") {
     authkey.value = authkeyRes;
-    await TGLogger.Info(`[UserGacha][${account.gameUid}][confirmRefresh] 成功获取 authkey`);
+    await TGLogger.Info(`[UserGacha][${account.value.gameUid}][confirmRefresh] 成功获取 authkey`);
   } else {
-    showSnackbar({
-      color: "error",
-      text: "获取 authkey 失败",
-    });
-    await TGLogger.Error(`[UserGacha][${account.gameUid}][confirmRefresh] 获取 authkey 失败`);
+    showSnackbar({ color: "error", text: "获取 authkey 失败" });
+    await TGLogger.Error(`[UserGacha][${account.value.gameUid}][confirmRefresh] 获取 authkey 失败`);
     await TGLogger.Error(
-      `[UserGacha][${account.gameUid}][confirmRefresh] ${authkeyRes.retcode} ${authkeyRes.message}`,
+      `[UserGacha][${account.value.gameUid}][confirmRefresh] ${authkeyRes.retcode} ${authkeyRes.message}`,
     );
     loading.value = false;
     return;
@@ -170,11 +187,11 @@ async function confirmRefresh(force: boolean): Promise<void> {
   ];
   if (!force) {
     loadingTitle.value = "正在获取数据库祈愿最新 ID";
-    checkList[0] = await TSUserGacha.getGachaCheck(account.gameUid, "200");
-    checkList[1] = await TSUserGacha.getGachaCheck(account.gameUid, "301");
-    checkList[2] = await TSUserGacha.getGachaCheck(account.gameUid, "400");
-    checkList[3] = await TSUserGacha.getGachaCheck(account.gameUid, "302");
-    checkList[4] = await TSUserGacha.getGachaCheck(account.gameUid, "500");
+    checkList[0] = await TSUserGacha.getGachaCheck(account.value.gameUid, "200");
+    checkList[1] = await TSUserGacha.getGachaCheck(account.value.gameUid, "301");
+    checkList[2] = await TSUserGacha.getGachaCheck(account.value.gameUid, "400");
+    checkList[3] = await TSUserGacha.getGachaCheck(account.value.gameUid, "302");
+    checkList[4] = await TSUserGacha.getGachaCheck(account.value.gameUid, "500");
   }
   console.log(checkList);
   loadingTitle.value = "正在刷新新手祈愿数据";
@@ -197,19 +214,20 @@ async function confirmRefresh(force: boolean): Promise<void> {
       resolve("");
     }, 1000);
   });
-  await TGLogger.Info(`[UserGacha][${account.gameUid}][confirmRefresh] 刷新祈愿数据完成`);
+  await TGLogger.Info(`[UserGacha][${account.value.gameUid}][confirmRefresh] 刷新祈愿数据完成`);
   window.location.reload();
 }
 
 async function getGachaLogs(pool: string, endId: string = "0", check?: string): Promise<void> {
+  const uid = account.value.gameUid;
   await TGLogger.Info(
-    `[UserGacha][${account.gameUid}][getGachaLogs] 获取祈愿数据，pool：${pool}，endId：${endId}`,
+    `[UserGacha][${uid}][getGachaLogs] 获取祈愿数据，pool：${pool}，endId：${endId}`,
   );
   const gachaRes = await TGRequest.User.getGachaLog(authkey.value, pool, endId);
   console.log(pool, endId, gachaRes);
   if (Array.isArray(gachaRes)) {
     await TGLogger.Info(
-      `[UserGacha][${account.gameUid}][getGachaLogs] 成功获取到 ${gachaRes.length} 条祈愿数据`,
+      `[UserGacha][${uid}][getGachaLogs] 成功获取到 ${gachaRes.length} 条祈愿数据`,
     );
     if (gachaRes.length === 0) {
       await new Promise((resolve) => {
@@ -242,7 +260,7 @@ async function getGachaLogs(pool: string, endId: string = "0", check?: string):
       }
       uigfList.push(tempItem);
     });
-    await TSUserGacha.mergeUIGF(account.gameUid, uigfList);
+    await TSUserGacha.mergeUIGF(uid, uigfList);
     if (check !== undefined && gachaRes.some((i) => i.id === check)) {
       await new Promise((resolve) => {
         setTimeout(() => {
@@ -260,13 +278,10 @@ async function getGachaLogs(pool: string, endId: string = "0", check?: string):
       await getGachaLogs(pool, gachaRes[gachaRes.length - 1].id, check);
     }
   } else {
-    showSnackbar({
-      color: "error",
-      text: `[${pool}][${gachaRes.retcode}] ${gachaRes.message}`,
-    });
-    await TGLogger.Error(`[UserGacha][${account.gameUid}][getGachaLogs] 获取祈愿数据失败`);
+    showSnackbar({ color: "error", text: `[${pool}][${gachaRes.retcode}] ${gachaRes.message}` });
+    await TGLogger.Error(`[UserGacha][${uid}][getGachaLogs] 获取祈愿数据失败`);
     await TGLogger.Error(
-      `[UserGacha][${account.gameUid}][getGachaLogs] ${gachaRes.retcode} ${gachaRes.message}`,
+      `[UserGacha][${uid}][getGachaLogs] ${gachaRes.retcode} ${gachaRes.message}`,
     );
   }
 }
@@ -276,10 +291,7 @@ async function handleImportBtn(isV4: boolean): Promise<void> {
   if (isV4) {
     const checkConfirm = await showConfirm({ title: "确定导入UIGFv4格式的祈愿数据？" });
     if (!checkConfirm) {
-      showSnackbar({
-        color: "cancel",
-        text: "已取消 UIGF v4 格式导入",
-      });
+      showSnackbar({ color: "cancel", text: "已取消 UIGF v4 格式导入" });
       return;
     }
     await TGLogger.Info("[UserGacha][handleImportBtn] 导入祈愿数据(v4)");
@@ -299,10 +311,7 @@ async function handleImportBtn(isV4: boolean): Promise<void> {
     directory: false,
   });
   if (selectedFile === null) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消文件选择",
-    });
+    showSnackbar({ color: "cancel", text: "已取消文件选择" });
     return;
   }
   const check = await verifyUigfData(selectedFile, isV4);
@@ -324,10 +333,7 @@ async function importUigf4(filePath: string): Promise<void> {
     text: `共 ${uidCount} 个 UID，${dataCount} 条数据`,
   });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消祈愿数据导入",
-    });
+    showSnackbar({ color: "cancel", text: "已取消祈愿数据导入" });
     return;
   }
   loadingTitle.value = "正在导入祈愿数据(v4)";
@@ -337,9 +343,7 @@ async function importUigf4(filePath: string): Promise<void> {
     await TSUserGacha.mergeUIGF4(account);
   }
   loading.value = false;
-  showSnackbar({
-    text: `成功导入 ${uidCount} 个 UID 的 ${dataCount} 条祈愿数据`,
-  });
+  showSnackbar({ text: `成功导入 ${uidCount} 个 UID 的 ${dataCount} 条祈愿数据` });
   await TGLogger.Info(
     `[UserGacha][importUigf4] 成功导入 ${uidCount} 个 UID，${dataCount} 条祈愿数据`,
   );
@@ -355,27 +359,19 @@ async function importUigf(filePath: string): Promise<void> {
     text: `UID：${remoteData.info.uid}，共 ${remoteData.list.length} 条数据`,
   });
   if (!confirm) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消祈愿数据导入",
-    });
+    showSnackbar({ color: "cancel", text: "已取消祈愿数据导入" });
     return;
   }
   loadingTitle.value = "正在导入祈愿数据";
   loading.value = true;
   if (remoteData.list.length === 0) {
     loading.value = false;
-    showSnackbar({
-      color: "error",
-      text: "导入的祈愿数据为空",
-    });
+    showSnackbar({ color: "error", text: "导入的祈愿数据为空" });
     return;
   }
   await TSUserGacha.mergeUIGF(remoteData.info.uid, remoteData.list);
   loading.value = false;
-  showSnackbar({
-    text: `成功导入 ${remoteData.list.length} 条祈愿数据`,
-  });
+  showSnackbar({ text: `成功导入 ${remoteData.list.length} 条祈愿数据` });
   await TGLogger.Info(
     `[UserGacha][importUigf] 成功导入 ${remoteData.info.uid} 的 ${remoteData.list.length} 条祈愿数据`,
   );
@@ -386,13 +382,11 @@ async function importUigf(filePath: string): Promise<void> {
 
 // 导出当前UID的祈愿数据
 async function exportUigf(): Promise<void> {
+  if (!uidCur.value) return;
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf] 导出祈愿数据`);
   const gachaList = await TSUserGacha.getGachaRecords(uidCur.value);
   if (gachaList.length === 0) {
-    showSnackbar({
-      color: "error",
-      text: `UID ${uidCur.value} 暂无祈愿数据`,
-    });
+    showSnackbar({ color: "error", text: `UID ${uidCur.value} 暂无祈愿数据` });
     return;
   }
   const res = await showConfirm({
@@ -400,10 +394,7 @@ async function exportUigf(): Promise<void> {
     text: `UID：${uidCur.value}，共 ${gachaList.length} 条数据`,
   });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: `已取消 UID ${uidCur.value} 的祈愿数据导出`,
-    });
+    showSnackbar({ color: "cancel", text: `已取消 UID ${uidCur.value} 的祈愿数据导出` });
     return;
   }
   const file = await save({
@@ -417,10 +408,7 @@ async function exportUigf(): Promise<void> {
     defaultPath: `${await path.downloadDir()}${path.sep()}UIGF_${uidCur.value}.json`,
   });
   if (!file) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消文件保存",
-    });
+    showSnackbar({ color: "cancel", text: "已取消文件保存" });
     return;
   }
   await TGLogger.Info(
@@ -436,12 +424,10 @@ async function exportUigf(): Promise<void> {
 
 // 导出 UIGF v4 版本的祈愿数据
 async function exportUigf4(): Promise<void> {
+  if (!uidCur.value) return;
   const checkConfirm = await showConfirm({ title: "确定导出UIGFv4格式的祈愿数据？" });
   if (!checkConfirm) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消 UIGF v4 格式导出",
-    });
+    showSnackbar({ color: "cancel", text: "已取消 UIGF v4 格式导出" });
     return;
   }
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf4] 导出祈愿数据(v4)`);
@@ -451,19 +437,13 @@ async function exportUigf4(): Promise<void> {
     text: "取消则只导出当前 UID 的祈愿数据",
   });
   if (allConfirm === undefined) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消祈愿数据导出",
-    });
+    showSnackbar({ color: "cancel", text: "已取消祈愿数据导出" });
     return;
   }
-  if (allConfirm === false) {
+  if (!allConfirm) {
     const gachaList = await TSUserGacha.getGachaRecords(uidCur.value);
     if (gachaList.length === 0) {
-      showSnackbar({
-        color: "error",
-        text: `UID ${uidCur.value} 暂无祈愿数据`,
-      });
+      showSnackbar({ color: "error", text: `UID ${uidCur.value} 暂无祈愿数据` });
       return;
     }
   }
@@ -478,33 +458,25 @@ async function exportUigf4(): Promise<void> {
     defaultPath: `${await path.downloadDir()}${path.sep()}UIGF4.json`,
   });
   if (!file) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消文件保存",
-    });
+    showSnackbar({ color: "cancel", text: "已取消文件保存" });
     return;
   }
   loadingTitle.value = "正在导出祈愿数据";
   loading.value = true;
-  if (allConfirm === false) {
+  if (!allConfirm) {
     await exportUigf4Data(file, uidCur.value);
   } else {
     await exportUigf4Data(file);
   }
   loading.value = false;
-  showSnackbar({
-    text: "祈愿数据已成功导出",
-  });
+  showSnackbar({ text: "祈愿数据已成功导出" });
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf4] 导出祈愿数据完成`);
 }
 
 // 删除当前 UID 的祈愿数据
 async function deleteGacha(): Promise<void> {
-  if (gachaListCur.value.length === 0) {
-    showSnackbar({
-      color: "error",
-      text: "暂无祈愿数据",
-    });
+  if (gachaListCur.value.length === 0 || !uidCur.value) {
+    showSnackbar({ color: "error", text: "暂无祈愿数据" });
     return;
   }
   await TGLogger.Info(`[UserGacha][${uidCur.value}][deleteGacha] 删除祈愿数据`);
@@ -513,10 +485,7 @@ async function deleteGacha(): Promise<void> {
     text: `UID：${uidCur.value}，共 ${gachaListCur.value.length} 条数据`,
   });
   if (!firstConfirm) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消祈愿数据删除",
-    });
+    showSnackbar({ color: "cancel", text: "已取消祈愿数据删除" });
     await TGLogger.Info(`[UserGacha][${uidCur.value}][deleteGacha] 已取消祈愿数据删除`);
     return;
   }
@@ -528,10 +497,7 @@ async function deleteGacha(): Promise<void> {
       text: `UID：${uidCur.value}，共 ${gachaListCur.value.length} 条数据`,
     });
     if (!secondConfirm) {
-      showSnackbar({
-        color: "cancel",
-        text: "已取消祈愿数据删除",
-      });
+      showSnackbar({ color: "cancel", text: "已取消祈愿数据删除" });
       await TGLogger.Info(`[UserGacha][${uidCur.value}][deleteGacha] 已取消祈愿数据删除`);
       return;
     }
@@ -540,9 +506,7 @@ async function deleteGacha(): Promise<void> {
   loading.value = true;
   await TSUserGacha.deleteGachaRecords(uidCur.value);
   loading.value = false;
-  showSnackbar({
-    text: `已成功删除 ${uidCur.value} 的祈愿数据`,
-  });
+  showSnackbar({ text: `已成功删除 ${uidCur.value} 的祈愿数据` });
   await TGLogger.Info(
     `[UserGacha][${uidCur.value}][deleteGacha] 成功删除 ${gachaListCur.value.length} 条祈愿数据`,
   );
@@ -550,17 +514,6 @@ async function deleteGacha(): Promise<void> {
     window.location.reload();
   }, 1000);
 }
-
-// 监听 UID 变化
-watch(uidCur, async (newUid) => {
-  gachaListCur.value = await TSUserGacha.getGachaRecords(newUid);
-  showSnackbar({
-    text: `成功获取 ${gachaListCur.value.length} 条祈愿数据`,
-  });
-  await TGLogger.Info(
-    `[UserGacha][${newUid}][watch] 成功获取 ${gachaListCur.value.length} 条祈愿数据`,
-  );
-});
 </script>
 <style lang="css" scoped>
 .gacha-top-bar {
@@ -569,6 +522,7 @@ watch(uidCur, async (newUid) => {
   align-items: center;
   justify-content: space-between;
   padding: 10px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   margin-bottom: 10px;
   background: var(--box-bg-1);
@@ -578,7 +532,22 @@ watch(uidCur, async (newUid) => {
 }
 
 .gacha-top-title {
-  color: var(--common-text-title);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  gap: 10px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    color: var(--common-text-title);
+    font-family: var(--font-title);
+    font-size: 20px;
+  }
 }
 
 .gacha-top-select {
diff --git a/src/plugins/Sqlite/modules/userAvatar.ts b/src/plugins/Sqlite/modules/userAvatar.ts
index 5f6dbc51..3ff238fc 100644
--- a/src/plugins/Sqlite/modules/userAvatar.ts
+++ b/src/plugins/Sqlite/modules/userAvatar.ts
@@ -53,14 +53,14 @@ function getInsertSql(uid: string, data: TGApp.Game.Avatar.DetailList): string {
 }
 
 /**
- * @description 获取用户角色id列表
- * @since Beta v0.5.3
+ * @description 获取用户UID列表
+ * @since Beta v0.6.0
  * @returns {Promise<string[]>} 角色id列表
  */
 async function getAllUid(): Promise<string[]> {
   const db = await TGSqlite.getDB();
   type resType = Array<{ uid: string }>;
-  const res = await db.select<resType>("SELECT DISTINCT cid FROM UserCharacters;");
+  const res = await db.select<resType>("SELECT DISTINCT uid FROM UserCharacters;");
   return res.map((i) => i.uid);
 }
 
@@ -115,15 +115,27 @@ async function saveAvatars(uid: string, data: TGApp.Game.Avatar.DetailList[]): P
  */
 function getAvatarCard(id: number): string {
   const find = AppCharacterData.find((c) => c.id === id);
-  if (!find) return "原神·印象";
+  if (find === undefined || find.nameCard === "") return "原神·印象";
   return find.nameCard;
 }
 
+/**
+ * @description 删除指定UID的数据
+ * @since Beta v0.6.0
+ * @param {string} uid - 游戏UID
+ * @return {Promise<void>}
+ */
+async function deleteUid(uid: string): Promise<void> {
+  const db = await TGSqlite.getDB();
+  await db.execute("DELETE FROM UserCharacters WHERE uid = ?;", [uid]);
+}
+
 const TSUserAvatar = {
   getAllUid,
   getAvatars,
   saveAvatars,
   getAvatarCard,
+  deleteUid,
 };
 
 export default TSUserAvatar;
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 888b76eb..3e921e63 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -7,6 +7,9 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import showSnackbar from "../../components/func/snackbar.js";
+import TSUserAccount from "../../plugins/Sqlite/modules/userAccount.js";
+
 export const useUserStore = defineStore(
   "user",
   () => {
@@ -37,6 +40,27 @@ export const useUserStore = defineStore(
       return propMap.value[prop.toString()] || false;
     }
 
+    async function switchGameAccount(uidG: string): Promise<boolean> {
+      if (!uid.value) {
+        showSnackbar({ text: "未找到登录用户", color: "error" });
+        return false;
+      }
+      if (uidG === account.value.gameUid) {
+        showSnackbar({ text: "该账户已经选中", color: "warn" });
+        return false;
+      }
+      const gameAccounts = await TSUserAccount.game.getAccount(uid.value);
+      const accountFind = gameAccounts.find((a) => a.gameUid === uidG);
+      if (!accountFind) {
+        showSnackbar({ text: "未找到账户绑定的游戏账户", color: "error" });
+        return false;
+      }
+      account.value = accountFind;
+      await TSUserAccount.game.switchAccount(uid.value, uidG);
+      showSnackbar({ text: `成功切换游戏账户为${uidG}` });
+      return true;
+    }
+
     return {
       uid,
       cookie,
@@ -44,6 +68,7 @@ export const useUserStore = defineStore(
       account,
       propMap,
       getProp,
+      switchGameAccount,
     };
   },
   {