♻️ 代码结构调整

src/components/app/t-overlay.vue

@@ -1,6 +1,6 @@
 <template>
   <transition enter-from-class="tolo-enter-from" name="tolo">
-    <div v-if="showTolo" class="tolo-box" @click.self.prevent="toClick">
+    <div v-if="showTolo" class="tolo-box" @click.self.prevent="toClick()">
       <transition enter-from-class="toli-enter-from" name="toli">
         <slot v-if="showToli" />
       </transition>
@@ -10,11 +10,16 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 
-type TolProps = { modelValue: boolean; toClick?: () => void; blurVal: string; hide?: true };
-
-const props = withDefaults(defineProps<TolProps>(), { modelValue: false, blurVal: "20px" });
-const showTolo = ref<boolean>(!props.hide);
-const showToli = ref<boolean>(!props.hide);
+type TolProps = { modelValue: boolean; blurVal?: string; dismissible?: boolean };
+type TolEmits = (e: "update:modelValue", v: boolean) => void;
+const emit = defineEmits<TolEmits>();
+const props = withDefaults(defineProps<TolProps>(), {
+  modelValue: false,
+  blurVal: "20px",
+  dismissible: true,
+});
+const showTolo = ref<boolean>(false);
+const showToli = ref<boolean>(false);
 
 watch(
   () => props.modelValue,
@@ -28,6 +33,11 @@ watch(
     setTimeout(() => (showTolo.value = false), 300);
   },
 );
+
+function toClick(): void {
+  if (!props.dismissible) return;
+  emit("update:modelValue", false);
+}
 </script>
 <style lang="css" scoped>
 .tolo-enter-active,

src/components/app/t-sidebar.vue

@@ -198,16 +198,6 @@
                 <img src="/source/UI/posts.png" alt="collect" class="side-icon-menu" />
               </template>
             </v-list-item>
-            <v-list-item
-              class="side-item-menu"
-              title="登录"
-              @click="login"
-              v-show="cookie?.stoken === ''"
-            >
-              <template #prepend>
-                <img src="/source/UI/lumine.webp" class="side-icon-menu" alt="login" />
-              </template>
-            </v-list-item>
           </v-list>
         </v-menu>
         <v-list-item :title.attr="themeTitle" @click="switchTheme()">
@@ -233,7 +223,7 @@
 import { event, webviewWindow } from "@tauri-apps/api";
 import { Event, UnlistenFn } from "@tauri-apps/api/event";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted, shallowRef } from "vue";
+import { computed, onMounted, onUnmounted } from "vue";
 
 import { useAppStore } from "../../store/modules/app.js";
 import { useUserStore } from "../../store/modules/user.js";
@@ -241,14 +231,13 @@ import mhyClient from "../../utils/TGClient.js";
 import showSnackbar from "../func/snackbar.js";
 
 const appStore = useAppStore();
-const { cookie, briefInfo } = storeToRefs(useUserStore());
-
+const { briefInfo } = storeToRefs(useUserStore());
+let themeListener: UnlistenFn | null = null;
 // @ts-expect-error The import.meta meta-property is not allowed in files which will build into CommonJS output.
 const isDevEnv = import.meta.env.MODE === "development";
-const themeListener = shallowRef<UnlistenFn | null>(null);
 const rail = computed<boolean>({
   get: () => appStore.sidebar.collapse,
-  set: (v: boolean) => (appStore.sidebar.collapse = v),
+  set: (v) => (appStore.sidebar.collapse = v),
 });
 const userInfo = computed<TGApp.App.Account.BriefInfo>(() => {
   if (briefInfo.value && briefInfo.value.nickname) return briefInfo.value;
@@ -261,12 +250,12 @@ const userInfo = computed<TGApp.App.Account.BriefInfo>(() => {
 });
 const themeGet = computed<string>({
   get: () => appStore.theme,
-  set: (v: string) => (appStore.theme = v),
+  set: (v) => (appStore.theme = v),
 });
 const themeTitle = computed<string>(() => (themeGet.value === "default" ? "夜间模式" : "日间模式"));
 
 onMounted(async () => {
-  themeListener.value = await event.listen("readTheme", (e: Event<string>) => {
+  themeListener = await event.listen("readTheme", (e: Event<string>) => {
     const theme = e.payload;
     themeGet.value = theme === "default" ? "default" : "dark";
   });
@@ -283,9 +272,9 @@ async function openClient(func: string): Promise<void> {
 }
 
 onUnmounted(() => {
-  if (themeListener.value !== null) {
-    themeListener.value();
-    themeListener.value = null;
+  if (themeListener !== null) {
+    themeListener();
+    themeListener = null;
   }
 });
 </script>

src/components/app/to-livecode.vue

@@ -1,11 +1,5 @@
 <template>
-  <TOverlay
-    v-model="visible"
-    :hide="true"
-    :to-click="onCancel"
-    blur-val="20px"
-    class="tolc-overlay"
-  >
+  <TOverlay v-model="visible" class="tolc-overlay">
     <div class="tolc-box">
       <div class="tolc-title">
         <span>兑换码</span>
@@ -58,26 +52,20 @@ import showSnackbar from "../func/snackbar.js";
 
 import TOverlay from "./t-overlay.vue";
 
-interface ToLiveCodeProps {
+type ToLiveCodeProps = {
   data: TGApp.BBS.Navigator.CodeData[];
   actId: string | undefined;
   modelValue: boolean;
-}
-
+};
 type ToLiveCodeEmits = (e: "update:modelValue", v: boolean) => void;
 
 const props = withDefaults(defineProps<ToLiveCodeProps>(), { modelValue: false });
 const emits = defineEmits<ToLiveCodeEmits>();
-
 const visible = computed<boolean>({
   get: () => props.modelValue,
-  set: (v: boolean) => emits("update:modelValue", v),
+  set: (v) => emits("update:modelValue", v),
 });
 
-function onCancel(): void {
-  visible.value = false;
-}
-
 function copy(code: string): void {
   navigator.clipboard.writeText(code);
   showSnackbar.success("已复制到剪贴板");

src/components/app/to-namecard.vue

@@ -1,18 +1,18 @@
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+  <TOverlay v-model="visible">
     <div v-if="props.data" class="ton-container">
       <slot name="left"></slot>
       <div class="ton-box">
         <img alt="bg" class="ton-bg" v-if="props.data" :src="props.data.profile" />
         <div class="ton-content">
           <span>{{ props.data.name }}</span>
-          <span>{{ parseNamecard(props.data.desc) }}</span>
+          <span>{{ parseNameCard(props.data.desc) }}</span>
           <span>获取途径：{{ props.data.source }}</span>
         </div>
         <div class="ton-type">{{ getType }}</div>
         <v-btn
           class="ton-share"
-          @click="shareNamecard"
+          @click="shareNameCard"
           variant="outlined"
           :loading="loading"
           data-html2canvas-ignore
@@ -29,15 +29,11 @@
 import { computed, ref } from "vue";
 
 import { generateShareImg } from "../../utils/TGShare.js";
+import showSnackbar from "../func/snackbar.js";
 
 import TOverlay from "./t-overlay.vue";
 
-interface ToNamecardProps {
-  modelValue: boolean;
-  data?: TGApp.App.NameCard.Item;
-}
-
-enum ToNamecardTypeEnum {
+enum ToNameCardTypeEnum {
   other = 0,
   achievement = 1,
   role = 2,
@@ -46,55 +42,32 @@ enum ToNamecardTypeEnum {
   unknown = 5,
 }
 
-type ToNamecardTypeMap = {
-  [key in ToNamecardTypeEnum]: string;
+type ToNameCardTypeMap = { [key in ToNameCardTypeEnum]: string };
+type ToNameCardProps = { modelValue: boolean; data?: TGApp.App.NameCard.Item };
+type ToNameCardEmits = (e: "update:modelValue", v: boolean) => void;
+const props = defineProps<ToNameCardProps>();
+const emits = defineEmits<ToNameCardEmits>();
+const typeMap: ToNameCardTypeMap = {
+  0: "其他",
+  1: "成就",
+  2: "角色",
+  3: "纪行",
+  4: "活动",
+  5: "未知",
 };
-
-const typeMap: ToNamecardTypeMap = {
-  [ToNamecardTypeEnum.other]: "其他",
-  [ToNamecardTypeEnum.achievement]: "成就",
-  [ToNamecardTypeEnum.role]: "角色",
-  [ToNamecardTypeEnum.record]: "纪行",
-  [ToNamecardTypeEnum.activity]: "活动",
-  [ToNamecardTypeEnum.unknown]: "未知",
-};
-
-type ToNamecardEmits = (e: "update:modelValue", value: boolean) => void;
-
-const props = defineProps<ToNamecardProps>();
-
-const emits = defineEmits<ToNamecardEmits>();
-
 const loading = ref<boolean>(false);
-
-const getType = computed(() => {
-  if (!props.data) return typeMap[ToNamecardTypeEnum.unknown];
-  switch (props.data.type) {
-    case ToNamecardTypeEnum.achievement:
-      return typeMap[ToNamecardTypeEnum.achievement];
-    case ToNamecardTypeEnum.role:
-      return typeMap[ToNamecardTypeEnum.role];
-    case ToNamecardTypeEnum.record:
-      return typeMap[ToNamecardTypeEnum.record];
-    case ToNamecardTypeEnum.activity:
-      return typeMap[ToNamecardTypeEnum.activity];
-    default:
-      return typeMap[ToNamecardTypeEnum.other];
-  }
-});
-
-const visible = computed({
+const visible = computed<boolean>({
   get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
+  set: (v) => emits("update:modelValue", v),
+});
+const getType = computed<string>(() => {
+  if (!props.data) return typeMap[ToNameCardTypeEnum.unknown];
+  if (!(props.data.type satisfies ToNameCardTypeEnum)) return typeMap[5];
+  const type: ToNameCardTypeEnum = props.data.type;
+  return typeMap[type];
 });
 
-function onCancel() {
-  visible.value = false;
-}
-
-function parseNamecard(desc: string): string {
+function parseNameCard(desc: string): string {
   let array = [];
   if (desc.startsWith("名片纹饰。「") && desc.endsWith("」")) {
     array.push("名片纹饰。");
@@ -104,22 +77,19 @@ function parseNamecard(desc: string): string {
       for (const item of match) {
         if (item.length <= 34) {
           array.push(item);
-        } else {
-          array.push("「");
-          array.push(...parseDesc(item.slice(1, -1), true));
-          const maxLength = Math.max(...array.map((item) => item.length));
-          array.push("  ".repeat(maxLength - 4) + "」");
+          continue;
         }
+        array.push("「");
+        array.push(...parseDesc(item.slice(1, -1), true));
+        const maxLength = Math.max(...array.map((item) => item.length));
+        array.push("  ".repeat(maxLength - 4) + "」");
       }
     }
   } else {
     array.push("名片纹饰。");
     const content = desc.slice(5);
-    if (content.length <= 32) {
-      array.push(content);
-    } else {
-      array.push(...parseDesc(content));
-    }
+    if (content.length <= 32) array.push(content);
+    else array.push(...parseDesc(content));
   }
   const res = array.join("\n");
   if (!res.endsWith("\n")) return res + "\n";
@@ -136,31 +106,31 @@ function parseDesc(desc: string, inQuote: boolean = false): string[] {
     res = res.replace("时候，", "时候，\n");
     res = res.replace("。\n」", "。」");
   }
-  if (!desc.includes("！」")) {
-    res = res.replace(/！/g, "！\n");
-  }
+  if (!desc.includes("！」")) res = res.replace(/！/g, "！\n");
   res = res.replace(/…/g, "…\n");
   const match = res.split("\n");
   let array: string[] = [];
   for (const item of match) {
     if (item.length > 0 && item.length <= 32) {
       array.push(item);
-    } else {
-      const match2 = item.replace(/，/g, "，\n").split("\n");
-      for (const item2 of match2) {
-        if (item2.length > 0) array.push(item2);
-      }
+      continue;
     }
+    const match2 = item.replace(/，/g, "，\n").split("\n");
+    match2.map((i) => (i.length > 0 ? array.push(i) : null));
   }
   if (inQuote) array = array.map((item) => `  ${item}`);
   return array;
 }
 
-async function shareNamecard(): Promise<void> {
-  const namecardBox = <HTMLElement>document.querySelector(".ton-box");
+async function shareNameCard(): Promise<void> {
+  const nameCardBox = document.querySelector<HTMLElement>(".ton-box");
+  if (nameCardBox === null) {
+    showSnackbar.error("未找到名片内容");
+    return;
+  }
   const fileName = `【${getType.value}名片】-${props.data?.name}`;
   loading.value = true;
-  await generateShareImg(fileName, namecardBox);
+  await generateShareImg(fileName, nameCardBox);
   loading.value = false;
 }
 </script>