🎨 优化分享图片逻辑，能够确认进度了

src/pages/User/Abyss.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
+  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="ua-box">
     <v-tabs v-model="userTab" direction="vertical" align-tabs="start" class="ua-tab">
       <v-tab v-for="item in localAbyss" :key="item.id" :value="item.id" @click="toAbyss(item.id)">
@@ -52,6 +52,7 @@
           <div class="uaw-d-box">
             <TuaDetail
               v-for="floor in JSON.parse(item.floors) as TGApp.Sqlite.Abyss.Floor[]"
+              :key="floor.id"
               :model-value="floor"
             />
           </div>
@@ -82,17 +83,18 @@ import Hutao from "../../plugins/Hutao";
 // store
 const userStore = useUserStore();
 // loading
-const loading = ref(true);
+const loading = ref<boolean>(true);
-const loadingTitle = ref("");
+const loadingTitle = ref<string>();
+const loadingSub = ref<string>();
 
 // data
-const userTab = ref(0);
+const userTab = ref<number>(0);
-const user = computed(() => userStore.getCurAccount());
+const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.getCurAccount());
 
-const localAbyss = ref([] as TGApp.Sqlite.Abyss.SingleTable[]);
+const localAbyss = ref<TGApp.Sqlite.Abyss.SingleTable[]>([]);
-const localAbyssID = ref([] as number[]);
+const localAbyssID = ref<number[]>([]);
-const curAbyss = ref({} as TGApp.Sqlite.Abyss.SingleTable);
+const curAbyss = ref<TGApp.Sqlite.Abyss.SingleTable>(<TGApp.Sqlite.Abyss.SingleTable>{});
-const abyssRef = ref(null as unknown as HTMLElement);
+const abyssRef = ref<HTMLElement>(<HTMLElement>{});
 
 onMounted(async () => {
   loadingTitle.value = "正在加载深渊数据";
@@ -122,16 +124,16 @@ async function getAbyssData(): Promise<void> {
   if (localAbyssID.value.length < 2) {
     loadingTitle.value = "正在获取上期深渊数据";
     const resP = await TGRequest.User.byCookie.getAbyss(cookie, "2", user.value);
-    if (!resP.hasOwnProperty("retcode")) {
+    if (!("retcode" in resP)) {
       loadingTitle.value = "正在保存上期深渊数据";
-      await TGSqlite.saveAbyss(user.value.gameUid, resP as TGApp.Game.Abyss.FullData);
+      await TGSqlite.saveAbyss(user.value.gameUid, resP);
     }
   }
   loadingTitle.value = "正在获取本期深渊数据";
   const res = await TGRequest.User.byCookie.getAbyss(cookie, "1", user.value);
-  if (!res.hasOwnProperty("retcode")) {
+  if (!("retcode" in res)) {
     loadingTitle.value = "正在保存本期深渊数据";
-    await TGSqlite.saveAbyss(user.value.gameUid, res as TGApp.Game.Abyss.FullData);
+    await TGSqlite.saveAbyss(user.value.gameUid, res);
   }
   loadingTitle.value = "正在加载深渊数据";
   await initAbyssData();
@@ -148,14 +150,19 @@ function getAbyssRef(el: HTMLElement): void {
 
 async function shareAbyss(): Promise<void> {
   const fileName = `【深渊数据】${curAbyss.value.id}-${user.value.gameUid}`;
+  loadingTitle.value = "正在生成图片";
+  loadingSub.value = `${fileName}.png`;
+  loading.value = true;
   await generateShareImg(fileName, abyssRef.value);
+  loadingSub.value = "";
+  loading.value = false;
 }
 
 async function uploadAbyss(): Promise<void> {
   const abyssData = curAbyss.value;
   loadingTitle.value = "正在转换深渊数据";
   loading.value = true;
-  let transAbyss = Hutao.Abyss.utils.transData(abyssData);
+  const transAbyss = Hutao.Abyss.utils.transData(abyssData);
   loadingTitle.value = "正在获取角色数据";
   const roles = await TGSqlite.getUserCharacter(user.value.gameUid);
   if (!roles) {

src/pages/User/Characters.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
+  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="uc-box">
     <div class="uc-top">
       <div class="uc-top-title">
@@ -53,8 +53,9 @@ import { generateShareImg } from "../../utils/TGShare";
 const userStore = useUserStore();
 
 // loading
-const loading = ref(false);
+const loading = ref<boolean>(false);
-const loadingTitle = ref("");
+const loadingTitle = ref<string>();
+const loadingSub = ref<string>();
 
 // data
 const isEmpty = ref(true);
@@ -144,7 +145,12 @@ async function refreshTalent() {
 async function shareRoles() {
   const rolesBox = <HTMLElement>document.querySelector(".uc-box");
   const fileName = `【角色列表】-${user.value.gameUid}`;
+  loadingTitle.value = "正在生成图片";
+  loadingSub.value = `${fileName}.png`;
+  loading.value = true;
   await generateShareImg(fileName, rolesBox);
+  loadingSub.value = "";
+  loading.value = false;
 }
 
 function getUpdateTime() {

src/pages/User/Record.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
+  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="ur-box">
     <div class="ur-top">
       <div class="ur-top-title">
@@ -49,14 +49,15 @@ import { generateShareImg } from "../../utils/TGShare";
 const userStore = useUserStore();
 
 // loading
-const loading = ref(false);
+const loading = ref<boolean>(false);
-const loadingTitle = ref("");
+const loadingTitle = ref<string>();
+const loadingSub = ref<string>();
 
 // data
-const isEmpty = ref(true);
+const isEmpty = ref<boolean>(true);
-const recordData = ref({} as TGApp.Sqlite.Record.SingleTable);
+const recordData = ref<TGApp.Sqlite.Record.SingleTable>(<TGApp.Sqlite.Record.SingleTable>{});
-const recordCookie = computed(() => userStore.getCookieGroup2() as Record<string, string>);
+const recordCookie = computed<TGApp.BBS.Constant.CookieGroup2>(() => userStore.getCookieGroup2());
-const user = computed(() => userStore.getCurAccount());
+const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.getCurAccount());
 
 onMounted(async () => {
   loadingTitle.value = "正在加载战绩数据";
@@ -82,10 +83,9 @@ async function refresh() {
   loadingTitle.value = "正在获取战绩数据";
   loading.value = true;
   const res = await TGRequest.User.getRecord(recordCookie.value, user.value);
-  if (!res.hasOwnProperty("retcode")) {
+  if (!("retcode" in res)) {
-    const data = res as TGApp.Game.Record.FullData;
     loadingTitle.value = "正在保存战绩数据";
-    await TGSqlite.saveUserRecord(data, user.value.gameUid);
+    await TGSqlite.saveUserRecord(res, user.value.gameUid);
     await initUserRecordData();
   } else {
     console.error(res);
@@ -94,22 +94,19 @@ async function refresh() {
 }
 
 function getTitle() {
-  const role = JSON.parse(recordData.value.role) as TGApp.Sqlite.Record.Role;
+  const role = <TGApp.Sqlite.Record.Role>JSON.parse(recordData.value.role);
   return `${role.nickname} Lv.${role.level}【${recordData.value.uid}】`;
 }
 
 async function shareRecord() {
-  const recordBox = document.querySelector(".ur-box") as HTMLElement;
+  const recordBox = <HTMLElement>document.querySelector(".ur-box");
   const fileName = `【原神战绩】-${user.value.gameUid}`;
+  loadingTitle.value = "正在生成图片";
+  loadingSub.value = `${fileName}.png`;
+  loading.value = true;
   await generateShareImg(fileName, recordBox);
-}
+  loadingSub.value = "";
-
+  loading.value = false;
-function getTheme() {
-  let theme = localStorage.getItem("theme");
-  if (theme) {
-    theme = JSON.parse(theme).theme;
-  }
-  return theme || "default";
 }
 </script>
 <style lang="css" scoped>

src/pages/WIKI/Abyss.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
+  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="hta-box">
     <div class="hta-top">
       <v-tabs v-model="tab" align-tabs="start" class="hta-tab">
@@ -50,6 +50,7 @@ import { generateShareImg } from "../../utils/TGShare";
 // loading
 const loading = ref<boolean>(false);
 const loadingTitle = ref<string>("");
+const loadingSub = ref<string>();
 
 // overview overlay
 const showDialog = ref<boolean>(false);
@@ -104,8 +105,10 @@ async function shareWiki() {
   const div = <HTMLDivElement>document.querySelector(".hta-tab-item");
   const title = getShareTitle();
   loadingTitle.value = "正在生成分享图";
+  loadingSub.value = `${title}.png`;
   loading.value = true;
   await generateShareImg(title, div);
+  loadingSub.value = "";
   loading.value = false;
 }
 </script>

src/web/request/getGameRecord.ts

@@ -2,7 +2,7 @@
  * @file core utils getGameRecord.ts
  * @description 获取游戏数据的函数
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.2.0
+ * @since Alpha v0.2.1
  */
 
 // tauri
@@ -13,20 +13,24 @@ import TGUtils from "../utils/TGUtils";
 
 /**
  * @description 获取用户游戏数据
- * @since Alpha v0.2.0
+ * @since Alpha v0.2.1
  * @description 这边的 ck 可以是 cookie_token 和 account_id
  * @description 也可以是 ltoken 和 ltuid
- * @param {Record<string, string>} cookie cookie
+ * @param {TGApp.BBS.Constant.CookieGroup2} cookie cookie
  * @param {TGApp.Sqlite.Account.Game} user 用户的基本信息
  * @returns {Promise<TGApp.Game.Record.FullData|TGApp.BBS.Response.Base>} 用户基本信息
  */
 export async function getGameRecord(
-  cookie: Record<string, string>,
+  cookie: TGApp.BBS.Constant.CookieGroup2,
   user: TGApp.Sqlite.Account.Game,
 ): Promise<TGApp.Game.Record.FullData | TGApp.BBS.Response.Base> {
   const url = TGApi.GameData.getUserBase;
+  const ck: Record<string, string> = {
+    account_id: cookie.account_id,
+    cookie_token: cookie.cookie_token,
+  };
   const params = { role_id: user.gameUid, server: user.region };
-  const header = TGUtils.User.getHeader(cookie, "GET", params, "common");
+  const header = TGUtils.User.getHeader(ck, "GET", params, "common");
   return await http
     .fetch<TGApp.Game.Record.Response>(url, {
       method: "GET",