♻️ 代码结构调整

src/components/viewPost/vp-btn-collect.vue

@@ -25,7 +25,7 @@ import VpOverlayCollect from "./vp-overlay-collect.vue";
 
 const isCollected = ref(false);
 const collect = ref<Array<TGApp.Sqlite.UserCollection.UFMap>>([]);
-const showEdit = ref(false);
+const showEdit = ref<boolean>(false);
 
 interface TbCollectProps {
   modelValue: number;

src/components/viewPost/vp-overlay-collect.vue

@@ -1,6 +1,5 @@
-<!-- 编辑收藏帖子的合集 -->
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+  <TOverlay v-model="visible">
     <div class="topc-container">
       <div class="topc-post-info">
         {{ props.post?.post.subject }}
@@ -27,7 +26,7 @@
       </div>
       <div class="topc-bottom">
         <v-btn class="topc-btn" rounded @click="newCollect">新建分类</v-btn>
-        <v-btn class="topc-btn" rounded @click="onCancel">取消</v-btn>
+        <v-btn class="topc-btn" rounded @click="visible = false">取消</v-btn>
         <v-btn :loading="submit" class="topc-btn" rounded @click="onSubmit">确定</v-btn>
       </div>
     </div>
@@ -41,31 +40,29 @@ import TOverlay from "../app/t-overlay.vue";
 import showDialog from "../func/dialog.js";
 import showSnackbar from "../func/snackbar.js";
 
-interface ToPostCollectProps {
+type ToPostCollectProps = {
   modelValue: boolean;
   post: TGApp.Plugins.Mys.Post.FullData | undefined;
-}
-
-interface ToPostCollectEmits {
-  (e: "update:modelValue", value: boolean): void;
-
+};
+type ToPostCollectEmits = {
+  (e: "update:modelValue", v: boolean): void;
   (e: "submit"): void;
-}
+};
 
 const props = defineProps<ToPostCollectProps>();
 const emits = defineEmits<ToPostCollectEmits>();
 const collectList = ref<TGApp.Sqlite.UserCollection.UFCollection[]>([]);
 const postCollect = ref<TGApp.Sqlite.UserCollection.UFMap[]>([]);
 const selectList = ref<string[]>([]);
-const submit = ref(false);
+const submit = ref<boolean>(false);
+const visible = computed<boolean>({
+  get: () => props.modelValue,
+  set: (v) => emits("update:modelValue", v),
+});
 
 watch(
   () => props.modelValue,
-  async (val) => {
-    if (val) {
-      await freshData();
-    }
-  },
+  async (v) => (v ? await freshData() : null),
 );
 
 async function freshData(): Promise<void> {
@@ -75,19 +72,14 @@ async function freshData(): Promise<void> {
   if (Array.isArray(collectRes)) {
     postCollect.value = collectRes;
     selectList.value = postCollect.value.map((i) => i.collection);
-  } else if (collectRes) {
+    return;
+  }
+  if (collectRes) {
     postCollect.value = [];
     selectList.value = [];
   }
 }
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
-});
-
 async function deleteCollect(item: TGApp.Sqlite.UserCollection.UFCollection): Promise<void> {
   const delCheck = await showDialog.check("确定删除分类?", "该分类若有帖子，则会变为未分类");
   if (!delCheck) {
@@ -148,10 +140,6 @@ async function onSubmit(): Promise<void> {
   }
   showSnackbar.success("更新成功");
 }
-
-function onCancel() {
-  visible.value = false;
-}
 </script>
 <style lang="css" scoped>
 .topc-container {

src/components/viewPost/vp-overlay-collection.vue

@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" :hide="true" :to-click="onCancel" blur-val="5px">
+  <TOverlay v-model="visible" blur-val="5px">
     <div class="tpoc-box">
       <div class="tpoc-top">
         <span>{{ props.collection.collection_title }}</span>
@@ -47,43 +47,35 @@
   </TOverlay>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { computed, onMounted, shallowRef, useTemplateRef, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import Mys from "../../plugins/Mys/index.js";
 import TOverlay from "../app/t-overlay.vue";
 import showSnackbar from "../func/snackbar.js";
 
-interface TpoCollectionProps {
+type TpoCollectionProps = {
   collection: TGApp.Plugins.Mys.Post.Collection;
   modelValue: boolean;
-}
-
-type TpoCollectionEmits = (e: "update:modelValue", value: boolean) => void;
-
-interface TpoCollectionItem {
+};
+type TpoCollectionEmits = (e: "update:modelValue", v: boolean) => void;
+type TpoCollectionItem = {
   postId: string;
   title: string;
   created: number;
   updated: number;
   comments: number;
   likes: number;
-}
-
+};
+const router = useRouter();
 const props = defineProps<TpoCollectionProps>();
 const emits = defineEmits<TpoCollectionEmits>();
 const postListEl = useTemplateRef<HTMLDivElement>("postListRef");
-
-const visible = computed({
+const posts = shallowRef<TpoCollectionItem[]>([]);
+const visible = computed<boolean>({
   get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
+  set: (v) => emits("update:modelValue", v),
 });
-const posts = ref<TpoCollectionItem[]>([]);
-
-const router = useRouter();
-
 watch(
   () => visible.value,
   async (value) => {
@@ -115,10 +107,6 @@ onMounted(async () => {
   posts.value = tempArr;
 });
 
-function onCancel() {
-  visible.value = false;
-}
-
 function getDate(date: number): string {
   return new Date(date * 1000).toLocaleString().replace(/\//g, "-").split(" ")[0];
 }

src/components/viewPost/vp-overlay-image.vue

@@ -1,7 +1,7 @@
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="10px">
+  <TOverlay v-model="visible" blur-val="10px">
     <div class="tpoi-box">
-      <div :class="isOriSize ? 'tpoi-top-ori' : 'tpoi-top'">
+      <div :class="{ 'tpoi-top-ori': isOriSize, 'tpoi-top': !isOriSize }">
         <img :src="props.image.insert.image" alt="图片" @click="resizeImg" />
       </div>
       <div class="tpoi-bottom">
@@ -16,7 +16,7 @@
           <v-icon @click="setBlackBg" title="切换背景色">mdi-format-color-fill</v-icon>
           <v-icon @click="onCopy" title="复制到剪贴板">mdi-content-copy</v-icon>
           <v-icon @click="onDownload" title="下载到本地">mdi-download</v-icon>
-          <v-icon @click="onCancel" title="关闭浮窗">mdi-close</v-icon>
+          <v-icon @click="visible = false" title="关闭浮窗">mdi-close</v-icon>
         </div>
       </div>
     </div>
@@ -32,49 +32,34 @@ import showSnackbar from "../func/snackbar.js";
 
 import { TpImage } from "./tp-image.vue";
 
-interface TpoImageProps {
-  image: TpImage;
-  modelValue: boolean;
-}
-
-type TpoImageEmits = {
-  (e: "update:modelValue", v: boolean): void;
-};
-
+type TpoImageProps = { image: TpImage; modelValue: boolean };
+type TpoImageEmits = (e: "update:modelValue", v: boolean) => void;
 const props = defineProps<TpoImageProps>();
 const emits = defineEmits<TpoImageEmits>();
 const buffer = ref<Uint8Array | null>(null);
-const bgMode = ref(0); // 0: transparent, 1: black, 2: white
-const isOriSize = ref(false);
-
-const visible = computed({
+const bgMode = ref<number>(0); // 0: transparent, 1: black, 2: white
+const isOriSize = ref<boolean>(false);
+const visible = computed<boolean>({
   get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
+  set: (v) => emits("update:modelValue", v),
 });
 const bg = computed(() => {
   if (bgMode.value === 1) return "black";
   if (bgMode.value === 2) return "white";
   return "transparent";
 });
-
-const format = computed(() => {
+const format = computed<string>(() => {
   if (props.image.attributes?.ext) return props.image.attributes.ext;
   const imageFormat = props.image.insert.image.split(".").pop();
   if (imageFormat !== undefined) return imageFormat;
   return "png";
 });
 
-function onCancel() {
-  visible.value = false;
-}
-
-function resizeImg() {
+function resizeImg(): void {
   isOriSize.value = !isOriSize.value;
 }
 
-function setBlackBg() {
+function setBlackBg(): void {
   bgMode.value = (bgMode.value + 1) % 3;
   const bgLabelList = ["透明", "黑色", "白色"];
   showSnackbar.success(`背景已切换为${bgLabelList[bgMode.value]}`);
@@ -92,7 +77,7 @@ async function onCopy(): Promise<void> {
   showSnackbar.success(`图片已复制到剪贴板，大小：${size}`);
 }
 
-async function onDownload() {
+async function onDownload(): Promise<void> {
   const image = props.image.insert.image;
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(buffer.value.byteLength);

src/components/viewPost/vp-overlay-lottery.vue

@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+  <TOverlay v-model="visible">
     <div class="tpol-box" v-if="card">
       <div class="tpol-title">
         <span>抽奖详情</span>
@@ -48,45 +48,24 @@ import Mys from "../../plugins/Mys/index.js";
 import TOverlay from "../app/t-overlay.vue";
 import showSnackbar from "../func/snackbar.js";
 
-interface TpoLotteryProps {
-  modelValue: boolean;
-  lottery: string | undefined;
-}
-
-interface TpoLotteryEmits {
-  (e: "update:modelValue", value: boolean): void;
-
-  (e: "cancel"): void;
-}
-
+type TpoLotteryProps = { modelValue: boolean; lottery: string | undefined };
+type TpoLotteryEmits = (e: "update:modelValue", v: boolean) => void;
 const props = defineProps<TpoLotteryProps>();
 const emits = defineEmits<TpoLotteryEmits>();
 const card = ref<TGApp.Plugins.Mys.Lottery.RenderCard>();
 const jsonData = ref<TGApp.Plugins.Mys.Lottery.FullData>();
 const timeStatus = ref<string>("未知");
 const upWay = ref<string>("未知");
-
+const visible = computed<boolean>({
+  get: () => props.modelValue,
+  set: (v) => emits("update:modelValue", v),
+});
 // eslint-disable-next-line no-undef
 let timer: NodeJS.Timeout | undefined = undefined;
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
-});
-
-const onCancel = (): void => {
-  visible.value = false;
-  emits("cancel");
-};
-
 watch(
   () => props.lottery,
-  async (value) => {
-    if (!value) return;
-    await load();
-  },
+  async (v) => (v ? await load() : undefined),
   { immediate: true },
 );
 

src/components/viewPost/vp-overlay-search.vue

@@ -1,73 +1,44 @@
 <template>
-  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+  <TOverlay v-model="visible">
     <div class="tops-box">
       <div class="tops-top">查找：{{ search }}</div>
       <div class="tops-act">
-        <span>分区：{{ getGidLabel() }}</span>
+        <span>分区：{{ getGameName(Number(game)) }}</span>
         <v-btn :loading="load" size="small" class="tops-btn" @click="searchPosts()" rounded>
           加载更多({{ results.length }})
         </v-btn>
       </div>
       <div class="tops-list">
-        <div v-for="item in results" :key="item.post.post_id">
-          <TPostCard :model-value="item" />
-        </div>
+        <TPostCard v-for="item in results" :key="item.post.post_id" :model-value="item" />
       </div>
     </div>
   </TOverlay>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 import Mys from "../../plugins/Mys/index.js";
+import { getGameName } from "../../web/utils/tools.js";
 import TOverlay from "../app/t-overlay.vue";
 import TPostCard from "../app/t-postcard.vue";
 import showSnackbar from "../func/snackbar.js";
 
-// data
 const search = ref<string>();
 const lastId = ref<string>("");
 const game = ref<string>("2");
 const isLast = ref<boolean>(false);
-const results = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
+const results = shallowRef<TGApp.Plugins.Mys.Post.FullData[]>([]);
 const load = ref<boolean>(false);
 
-interface ToPostSearchProps {
-  modelValue: boolean;
-  gid: string;
-  keyword?: string;
-}
-
-interface ToPostSearchEmits {
-  (e: "update:modelValue", value: boolean): void;
-
-  (e: "cancel"): void;
-}
-
+type ToPostSearchProps = { modelValue: boolean; gid: string; keyword?: string };
+type ToPostSearchEmits = (e: "update:modelValue", v: boolean) => void;
 const props = defineProps<ToPostSearchProps>();
 const emits = defineEmits<ToPostSearchEmits>();
-
-const gameList: Record<string, string> = {
-  "1": "崩坏3",
-  "2": "原神",
-  "3": "崩坏2",
-  "4": "未定事件簿",
-  "5": "大别野",
-  "6": "崩坏：星穹铁道",
-  "8": "绝区零",
-};
-// overlay
-const visible = computed({
+const visible = computed<boolean>({
   get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
+  set: (v) => emits("update:modelValue", v),
 });
 
-function onCancel() {
-  visible.value = false;
-}
-
 onMounted(async () => {
   game.value = props.gid;
   if (props.keyword && props.keyword !== "") search.value = props.keyword;
@@ -145,13 +116,6 @@ async function searchPosts() {
     visible.value = true;
   }
 }
-
-function getGidLabel(): string {
-  if (gameList[game.value]) {
-    return gameList[game.value];
-  }
-  return "未知";
-}
 </script>
 <style lang="css" scoped>
 .tops-box {

src/components/viewPost/vp-reply-debug.vue

@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" :hide="true" :to-click="onCancel" blur-val="0">
+  <TOverlay v-model="visible" blur-val="0">
     <div class="tpr-debug-box">
       <div class="tpr-debug-title">
         <span>文件：</span>
@@ -15,37 +15,24 @@
 <script lang="ts" setup>
 import { open } from "@tauri-apps/plugin-dialog";
 import { readTextFile } from "@tauri-apps/plugin-fs";
-import { computed, ref } from "vue";
+import { computed, ref, shallowRef } from "vue";
 
 import TOverlay from "../app/t-overlay.vue";
 import showSnackbar from "../func/snackbar.js";
 
 import TprReply from "./vp-reply-item.vue";
 
-interface TprDebugProps {
-  modelValue: boolean;
-}
-
-interface TprDebugEmits {
-  (event: "update:modelValue", value: boolean): void;
-}
+type TprDebugProps = { modelValue: boolean };
+type TprDebugEmits = (e: "update:modelValue", v: boolean) => void;
 
 const props = defineProps<TprDebugProps>();
 const emits = defineEmits<TprDebugEmits>();
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emits("update:modelValue", value);
-  },
-});
-
 const filePath = ref<string>("");
-const replyData = ref<TGApp.Plugins.Mys.Reply.ReplyFull | null>(null);
-
-function onCancel(): void {
-  visible.value = false;
-}
+const replyData = shallowRef<TGApp.Plugins.Mys.Reply.ReplyFull | null>(null);
+const visible = computed<boolean>({
+  get: () => props.modelValue,
+  set: (v) => emits("update:modelValue", v),
+});
 
 async function selectFile(): Promise<void> {
   const file = await open({