⚡️ emits 真好用x

src/components/config/tc-userBadge.vue

@@ -21,12 +21,19 @@ import { onMounted, ref } from "vue";
 import TGSqlite from "../../plugins/Sqlite";
 import { useAppStore } from "../../store/modules/app";
 import { useUserStore } from "../../store/modules/user";
+import TGLogger from "../../utils/TGLogger";
 import { getDeviceFp } from "../../web/request/getDeviceFp";
 import TGRequest from "../../web/request/TGRequest";
 import showConfirm from "../func/confirm";
 import showSnackbar from "../func/snackbar";
 import ToGameLogin from "../overlay/to-gameLogin.vue";
 
+interface TcUserBadgeEmits {
+  (e: "loadOuter", v: TGApp.Component.Loading.EmitParams): void;
+}
+
+const emits = defineEmits<TcUserBadgeEmits>();
+
 const appStore = useAppStore();
 const userStore = storeToRefs(useUserStore());
 
@@ -45,10 +52,10 @@ onMounted(() => {
   }
 });
 
-// todo 完善 log
 async function refreshUser() {
   const ck = userStore.cookie.value;
   if (ck === undefined || JSON.stringify(ck) === "{}") {
+    await TGLogger.Error("[tc-userBadge][refreshUser] cookie 不存在");
     showSnackbar({
       color: "error",
       text: "扫码登录后才能刷新用户信息!",
@@ -57,61 +64,75 @@ async function refreshUser() {
     return;
   }
   loading.value = true;
+  emits("loadOuter", { show: true, title: "正在刷新用户信息" });
   const deviceInfo = appStore.deviceInfo;
   if (deviceInfo.device_fp === "00000000000") {
     appStore.deviceInfo = await getDeviceFp(appStore.deviceInfo);
+    await TGLogger.Warn("[tc-userBadge][refreshUser] 刷新设备信息");
   }
   let failCount = 0;
+  emits("loadOuter", { show: true, title: "正在验证 LToken" });
   const verifyLTokenRes = await TGRequest.User.byLToken.verify(ck.ltoken, ck.ltuid);
   if (typeof verifyLTokenRes === "string") {
-    showSnackbar({
-      color: "success",
-      text: "验证 LToken 成功!",
-    });
+    emits("loadOuter", { show: true, title: "正在验证 LToken", text: "验证 LToken 成功!" });
+    await TGLogger.Info("[tc-userBadge][refreshUser] 验证 LToken 成功");
   } else {
-    showSnackbar({
-      color: "warn",
-      text: "验证 LToken 失败!即将重新获取 LToken",
+    emits("loadOuter", {
+      show: true,
+      title: "正在验证 LToken",
+      text: "验证 LToken 失败!即将重新获取",
     });
+    await TGLogger.Warn("[tc-userBadge][refreshUser] 验证 LToken 失败");
+    await TGLogger.Warn(
+      `[tc-userBadge][refreshUser] ${verifyLTokenRes.retcode}: ${verifyLTokenRes.message}`,
+    );
     const ltokenRes = await TGRequest.User.bySToken.getLToken(ck.mid, ck.stoken);
     if (typeof ltokenRes === "string") {
       ck.ltoken = ltokenRes;
-      showSnackbar({
-        color: "success",
-        text: "获取 LToken 成功!",
-      });
+      emits("loadOuter", { show: true, title: "正在验证 LToken", text: "获取 LToken 成功!" });
+      await TGLogger.Info("[tc-userBadge][refreshUser] 获取 LToken 成功");
     } else {
-      showSnackbar({
-        color: "error",
-        text: "获取 LToken 失败!",
-      });
+      emits("loadOuter", { show: true, title: "正在验证 LToken", text: "获取 LToken 失败!" });
+      await TGLogger.Error("[tc-userBadge][refreshUser] 获取 LToken 失败");
+      await TGLogger.Error(
+        `[tc-userBadge][refreshUser] ${ltokenRes.retcode}: ${ltokenRes.message}`,
+      );
       failCount++;
     }
   }
+  emits("loadOuter", { show: true, title: "正在获取 CookieToken" });
   const cookieTokenRes = await TGRequest.User.bySToken.getCookieToken(ck.mid, ck.stoken);
   if (typeof cookieTokenRes === "string") {
     ck.cookie_token = cookieTokenRes;
-    showSnackbar({
-      color: "success",
+    emits("loadOuter", {
+      show: true,
+      title: "正在获取 CookieToken",
       text: "获取 CookieToken 成功!",
     });
+    await TGLogger.Info("[tc-userBadge][refreshUser] 获取 CookieToken 成功");
   } else {
-    showSnackbar({
-      color: "error",
+    emits("loadOuter", {
+      show: true,
+      title: "正在获取 CookieToken",
       text: "获取 CookieToken 失败!",
     });
+    await TGLogger.Error("[tc-userBadge][refreshUser] 获取 CookieToken 失败");
+    await TGLogger.Error(
+      `[tc-userBadge][refreshUser] ${cookieTokenRes.retcode}: ${cookieTokenRes.message}`,
+    );
     failCount++;
   }
   userStore.cookie.value = ck;
   await TGSqlite.saveAppData("cookie", JSON.stringify(ck));
+  emits("loadOuter", { show: true, title: "正在获取用户信息" });
   const infoRes = await TGRequest.User.byCookie.getUserInfo(ck.cookie_token, ck.account_id);
   if ("retcode" in infoRes) {
-    showSnackbar({
-      color: "error",
-      text: "获取用户信息失败!",
-    });
+    emits("loadOuter", { show: true, title: "正在获取用户信息", text: "获取用户信息失败!" });
+    await TGLogger.Error("[tc-userBadge][refreshUser] 获取用户信息失败");
+    await TGLogger.Error(`[tc-userBadge][refreshUser] ${infoRes.retcode}: ${infoRes.message}`);
     failCount++;
   } else {
+    emits("loadOuter", { show: true, title: "正在获取用户信息", text: "获取用户信息成功!" });
     const briefInfo: TGApp.App.Account.BriefInfo = {
       nickname: infoRes.nickname,
       uid: infoRes.uid,
@@ -120,25 +141,22 @@ async function refreshUser() {
     };
     userStore.briefInfo.value = briefInfo;
     await TGSqlite.saveAppData("userInfo", JSON.stringify(briefInfo));
-    showSnackbar({
-      color: "success",
-      text: "获取用户信息成功!",
-    });
+    await TGLogger.Info("[tc-userBadge][refreshUser] 获取用户信息成功");
   }
+  emits("loadOuter", { show: true, title: "正在获取账号信息" });
   const accountRes = await TGRequest.User.byCookie.getAccounts(ck.cookie_token, ck.account_id);
   if (Array.isArray(accountRes)) {
-    showSnackbar({
-      color: "success",
-      text: "获取账号信息成功!",
-    });
+    emits("loadOuter", { show: true, title: "正在获取账号信息", text: "获取账号信息成功!" });
+    await TGLogger.Info("[tc-userBadge][refreshUser] 获取账号信息成功");
     await TGSqlite.saveAccount(accountRes);
     const curAccount = await TGSqlite.getCurAccount();
     if (curAccount) userStore.account.value = curAccount;
   } else {
-    showSnackbar({
-      color: "error",
-      text: "获取账号信息失败!",
-    });
+    emits("loadOuter", { show: true, title: "正在获取账号信息", text: "获取账号信息失败!" });
+    await TGLogger.Error("[tc-userBadge][refreshUser] 获取账号信息失败");
+    await TGLogger.Error(
+      `[tc-userBadge][refreshUser] ${accountRes.retcode}: ${accountRes.message}`,
+    );
     failCount++;
   }
   loading.value = false;
@@ -152,6 +170,7 @@ async function refreshUser() {
     appStore.isLogin = true;
   }
   loading.value = false;
+  emits("loadOuter", { show: false });
 }
 
 async function confirmRefreshUser(): Promise<void> {

src/components/home/t-calendar.vue

@@ -140,6 +140,8 @@ const btnText = [
 
 interface TCalendarEmits {
   (e: "success"): void;
+
+  (e: "loadOuter", v: TGApp.Component.Loading.EmitParams): void;
 }
 
 const emits = defineEmits<TCalendarEmits>();
@@ -198,10 +200,12 @@ function getContents(day: number): void {
 }
 
 async function share(): Promise<void> {
+  emits("loadOuter", { show: true, text: "正在生成图片..." });
   const div = <HTMLElement>document.querySelector(".calendar-box");
   const showType = switchType.value === "avatar" ? "角色" : "武器";
   const title = `【今日素材】${showType}${btnNow.value}`;
   await generateShareImg(title, div);
+  emits("loadOuter", { show: false });
 }
 
 // 前往留影叙佳期

src/pages/common/Config.vue

@@ -46,7 +46,7 @@
   </div>
   <div class="config-right">
     <TcAppBadge />
-    <TcUserBadge />
+    <TcUserBadge @loadOuter="loadHandle" />
   </div>
 </template>
 
@@ -412,6 +412,17 @@ function submitDevMode(): void {
     ? showSnackbar({ text: "已关闭 dev 模式!" })
     : showSnackbar({ text: "已开启 dev 模式!" });
 }
+
+// 通过子组件的事件来控制 loading
+function loadHandle(params: TGApp.Component.Loading.EmitParams): void {
+  loading.value = params.show;
+  if (params.title) {
+    loadingTitle.value = params.title;
+  }
+  if (params.text) {
+    loadingSub.value = params.text;
+  }
+}
 </script>
 <style lang="css" scoped>
 .config-box {

src/pages/common/Home.vue

@@ -12,7 +12,13 @@
       />
       <v-btn class="select-btn" @click="submitHome">确定</v-btn>
     </div>
-    <component :is="item" v-for="item in components" :key="item" @success="loadEnd(item)" />
+    <component
+      :is="item"
+      v-for="item in components"
+      :key="item"
+      @success="loadEnd(item)"
+      @loadOuter="handleLoad"
+    />
   </div>
 </template>
 
@@ -100,6 +106,18 @@ async function loadEnd(item: any): Promise<void> {
   }
 }
 
+function handleLoad(params: TGApp.Component.Loading.EmitParams): void {
+  loading.value = params.show;
+  if (params.title) {
+    loadingTitle.value = params.title;
+  }
+  if (params.text) {
+    loadingSubtitle.value = params.text;
+  } else {
+    loadingSubtitle.value = "";
+  }
+}
+
 onUnmounted(() => {
   components.value = [];
 });

src/types/Component/Loading.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file types/Component/Loading.d.ts
+ * @description Component Loading 类型声明文件
+ * @since Beta v0.4.2
+ */
+
+/**
+ * @description Loading 命名空间
+ * @namespace TGApp.Component.Loading
+ * @since Beta v0.4.2
+ * @memberof TGApp.Component
+ */
+declare namespace TGApp.Component.Loading {
+  /**
+   * @description Loading 参数-用于Emits
+   * @since Beta v0.4.2
+   * @interface EmitParams
+   * @property {boolean} show 显示
+   * @property {string} title 标题
+   * @property {string} text 副标题
+   * @return EmitParams
+   */
+  interface EmitParams {
+    show: boolean;
+    title?: string;
+    text?: string;
+  }
+}