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

2025-12-12 09:18:14 +08:00 · 2023-06-30 21:50:45 +08:00
parent b83ff4674d
commit 830e590d91
5 changed files with 60 additions and 43 deletions
--- a/src/pages/User/Abyss.vue
+++ b/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 loadingTitle = ref("");
+const loading = ref<boolean>(true);
+const loadingTitle = ref<string>();
+const loadingSub = ref<string>();

 // data
-const userTab = ref(0);
-const user = computed(() => userStore.getCurAccount());
+const userTab = ref<number>(0);
+const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.getCurAccount());

-const localAbyss = ref([] as TGApp.Sqlite.Abyss.SingleTable[]);
-const localAbyssID = ref([] as number[]);
-const curAbyss = ref({} as TGApp.Sqlite.Abyss.SingleTable);
-const abyssRef = ref(null as unknown as HTMLElement);
+const localAbyss = ref<TGApp.Sqlite.Abyss.SingleTable[]>([]);
+const localAbyssID = ref<number[]>([]);
+const curAbyss = ref<TGApp.Sqlite.Abyss.SingleTable>(<TGApp.Sqlite.Abyss.SingleTable>{});
+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) {
--- a/src/pages/User/Characters.vue
+++ b/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 loadingTitle = ref("");
+const loading = ref<boolean>(false);
+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() {
--- a/src/pages/User/Record.vue
+++ b/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 loadingTitle = ref("");
+const loading = ref<boolean>(false);
+const loadingTitle = ref<string>();
+const loadingSub = ref<string>();

 // data
-const isEmpty = ref(true);
-const recordData = ref({} as TGApp.Sqlite.Record.SingleTable);
-const recordCookie = computed(() => userStore.getCookieGroup2() as Record<string, string>);
-const user = computed(() => userStore.getCurAccount());
+const isEmpty = ref<boolean>(true);
+const recordData = ref<TGApp.Sqlite.Record.SingleTable>(<TGApp.Sqlite.Record.SingleTable>{});
+const recordCookie = computed<TGApp.BBS.Constant.CookieGroup2>(() => userStore.getCookieGroup2());
+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")) {
-    const data = res as TGApp.Game.Record.FullData;
+  if (!("retcode" in res)) {
    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);
-}
-
-function getTheme() {
-  let theme = localStorage.getItem("theme");
-  if (theme) {
-    theme = JSON.parse(theme).theme;
-  }
-  return theme || "default";
+  loadingSub.value = "";
+  loading.value = false;
 }
 </script>
 <style lang="css" scoped>
--- a/src/pages/WIKI/Abyss.vue
+++ b/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>
--- a/src/web/request/getGameRecord.ts
+++ b/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",