♻️ defineModel

src/components/app/t-overlay.vue

@@ -10,17 +10,16 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 
-type TolProps = { modelValue: boolean; blurVal?: string };
-type TolEmits = (e: "update:modelValue", v: boolean) => void;
-const emit = defineEmits<TolEmits>();
-const props = withDefaults(defineProps<TolProps>(), { modelValue: false, blurVal: "20px" });
+type TolProps = { blurVal?: string };
+withDefaults(defineProps<TolProps>(), { blurVal: "20px" });
+const model = defineModel<boolean>({ default: false });
 const showTolo = ref<boolean>(false);
 const showToli = ref<boolean>(false);
 
 watch(
-  () => props.modelValue,
+  () => model.value,
   async () => {
-    if (props.modelValue) {
+    if (model.value) {
       showTolo.value = true;
       showToli.value = true;
       return;
@@ -33,7 +32,7 @@ watch(
 );
 
 function toClick(): void {
-  emit("update:modelValue", false);
+  model.value = false;
 }
 </script>
 <style lang="css" scoped>

src/components/app/to-livecode.vue

@@ -45,26 +45,16 @@
 </template>
 <script setup lang="ts">
 import showSnackbar from "@comp/func/snackbar.js";
-import { computed } from "vue";
 
 import TOverlay from "./t-overlay.vue";
 
 import { generateShareImg } from "@/utils/TGShare.js";
 import { timestampToDate } from "@/utils/toolFunc.js";
 
-type ToLiveCodeProps = {
-  data: TGApp.BBS.Navigator.CodeData[];
-  actId: string | undefined;
-  modelValue: boolean;
-};
-type ToLiveCodeEmits = (e: "update:modelValue", v: boolean) => void;
+type ToLiveCodeProps = { data: Array<TGApp.BBS.Navigator.CodeData>; actId: string | undefined };
 
-const props = withDefaults(defineProps<ToLiveCodeProps>(), { modelValue: false });
-const emits = defineEmits<ToLiveCodeEmits>();
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+const props = defineProps<ToLiveCodeProps>();
+const visible = defineModel<boolean>({ default: false });
 
 function copy(code: string): void {
   navigator.clipboard.writeText(code);

src/components/app/to-nameCard.vue

@@ -48,10 +48,10 @@ enum ToNameCardTypeEnum {
 }
 
 type ToNameCardTypeMap = { [key in ToNameCardTypeEnum]: string };
-type ToNameCardProps = { modelValue: boolean; data?: TGApp.App.NameCard.Item };
-type ToNameCardEmits = (e: "update:modelValue", v: boolean) => void;
+type ToNameCardProps = { data?: TGApp.App.NameCard.Item };
+
 const props = defineProps<ToNameCardProps>();
-const emits = defineEmits<ToNameCardEmits>();
+const visible = defineModel<boolean>();
 const typeMap: ToNameCardTypeMap = {
   0: "其他",
   1: "成就",
@@ -61,10 +61,6 @@ const typeMap: ToNameCardTypeMap = {
   5: "未知",
 };
 const loading = ref<boolean>(false);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  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];

src/components/hutaoAbyss/hta-overlay-overview.vue

@@ -55,7 +55,7 @@
 <script lang="ts" setup>
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 
 import HtaOverviewLine from "./hta-overview-line.vue";
 
@@ -63,19 +63,11 @@ import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
 import { generateShareImg } from "@/utils/TGShare.js";
 import { timestampToDate } from "@/utils/toolFunc.js";
 
-type HtaOverlayOverviewProps = {
-  modelValue: boolean;
-  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.OverviewData>;
-};
-type HtaOverlayOverviewEmits = (e: "update:modelValue", v: boolean) => void;
+type HtaOverlayOverviewProps = { data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.OverviewData> };
 
 const props = defineProps<HtaOverlayOverviewProps>();
-const emits = defineEmits<HtaOverlayOverviewEmits>();
+const visible = defineModel<boolean>();
 const loadShare = ref<boolean>(false);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 
 async function share(): Promise<void> {
   loadShare.value = true;

src/components/pageArchive/to-arcBrith.vue

@@ -36,32 +36,24 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import { fetch } from "@tauri-apps/plugin-http";
-import { computed, onMounted, ref, shallowRef, watch } from "vue";
+import { onMounted, ref, shallowRef, watch } from "vue";
 import { xml2json } from "xml-js";
 
 import TGLogger from "@/utils/TGLogger.js";
 import { copyToClipboard, getImageBuffer, saveCanvasImg } from "@/utils/TGShare.js";
 import { bytesToSize } from "@/utils/toolFunc.js";
 
-type ToArcBirthProps = {
-  modelValue: boolean;
-  data?: TGApp.Archive.Birth.DrawItem;
-  choice: boolean;
-};
-type ToArcBirthEmits = (e: "update:modelValue", v: boolean) => void;
+type ToArcBirthProps = { data?: TGApp.Archive.Birth.DrawItem; choice: boolean };
 type XmlKeyMap = { id: string; rel: string; group?: string; icon: string };
 type XmlTextList = { chara: string; img: string; text: string };
 type XmlTextParse = { name: string; icon?: string; text: string };
 
 const props = defineProps<ToArcBirthProps>();
-const emits = defineEmits<ToArcBirthEmits>();
+const visible = defineModel<boolean>();
 const showText = ref<boolean>(false);
 const buffer = shallowRef<Uint8Array | null>(null);
 const textParse = shallowRef<Array<XmlTextParse>>([]);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+
 onMounted(() => clearData());
 watch(() => props.data, clearData);
 watch(() => props.choice, clearData);

src/components/pageCollect/to-collectPost.vue

@@ -26,26 +26,23 @@ import TOverlay from "@comp/app/t-overlay.vue";
 import showDialog from "@comp/func/dialog.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import TSUserCollection from "@Sqlite/modules/userCollect.js";
-import { computed, ref, shallowRef, watch } from "vue";
+import { ref, shallowRef, watch } from "vue";
 
-type ToPostCollectProps = { modelValue: boolean; post: Array<string> };
-type ToPostCollectEmits = {
-  (e: "update:modelValue", v: boolean): void;
-  (e: "submit"): void;
-};
+type ToPostCollectProps = { post: Array<string> };
+type ToPostCollectEmits = (e: "submit") => void;
 
 const props = defineProps<ToPostCollectProps>();
 const emits = defineEmits<ToPostCollectEmits>();
+const visible = defineModel<boolean>();
 const select = ref<string>();
 const submit = ref<boolean>(false);
 const collectList = shallowRef<Array<TGApp.Sqlite.UserCollection.UFCollection>>([]);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+
 watch(
-  () => props.modelValue,
-  async (val) => (val ? await freshData() : null),
+  () => visible.value,
+  async () => {
+    if (visible.value) await freshData();
+  },
 );
 
 async function onSubmit(): Promise<void> {

src/components/pageHome/ph-calendar-overlay.vue

@@ -36,20 +36,12 @@ import { useRouter } from "vue-router";
 
 import TibCalendarMaterial from "./ph-calendar-material.vue";
 
-type ToCalendarProps = {
-  modelValue: boolean;
-  dataType: "weapon" | "character";
-  dataVal: TGApp.App.Calendar.Item;
-};
-type ToCalendarEmits = (e: "update:modelValue", v: boolean) => void;
+type ToCalendarProps = { dataType: "weapon" | "character"; dataVal: TGApp.App.Calendar.Item };
+
+const router = useRouter();
 
 const props = defineProps<ToCalendarProps>();
-const emits = defineEmits<ToCalendarEmits>();
-const router = useRouter();
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+const visible = defineModel<boolean>();
 const boxData = computed<TItemBoxData>(() => ({
   bg: `/icon/bg/${props.dataVal.star}-Star.webp`,
   icon: `/WIKI/${props.dataType}/${props.dataVal.id}.webp`,

src/components/pageNews/to-channel.vue

@@ -21,24 +21,19 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
 import { useRouter } from "vue-router";
 
 import { type NewsType, useAppStore } from "@/store/modules/app.js";
 import type { ToChannelItem } from "@/web/constant/bbs.js";
 import TGConstant from "@/web/constant/TGConstant.js";
 
-type ToChannelProps = { gid?: string; curType?: string; modelValue: boolean };
-type ToChannelEmits = (e: "update:modelValue", v: boolean) => void;
+type ToChannelProps = { gid?: string; curType?: string };
+
 const router = useRouter();
-const props = withDefaults(defineProps<ToChannelProps>(), { modelValue: false });
-const emits = defineEmits<ToChannelEmits>();
 const { recentNewsType } = storeToRefs(useAppStore());
 const channelList = TGConstant.BBS.CHANNELS;
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+const props = defineProps<ToChannelProps>();
+const visible = defineModel<boolean>({ default: false });
 
 async function toChannel(item: ToChannelItem): Promise<void> {
   if (props.gid === item.gid) {
@@ -107,24 +102,4 @@ async function toChannel(item: ToChannelItem): Promise<void> {
     font-size: 16px;
   }
 }
-
-.toc-close {
-  display: flex;
-  width: 100%;
-  height: 60px;
-  align-items: center;
-  justify-content: center;
-}
-
-.toc-close-btn {
-  display: flex;
-  width: 30px;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--box-bg-1);
-  color: var(--app-page-content);
-  cursor: pointer;
-}
 </style>

src/components/pageWiki/two-material.vue

@@ -29,7 +29,7 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import { getVersion } from "@tauri-apps/api/app";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 
 import TwoConvert from "./two-convert.vue";
 import TwoSource from "./two-source.vue";
@@ -37,15 +37,11 @@ import TwoSource from "./two-source.vue";
 import { generateShareImg } from "@/utils/TGShare.js";
 import { parseHtmlText } from "@/utils/toolFunc.js";
 
-type TwoMaterialProps = { modelValue: boolean; data: TGApp.App.Material.WikiItem };
-type TwoMaterialEmits = (e: "update:modelValue", v: boolean) => void;
+type TwoMaterialProps = { data: TGApp.App.Material.WikiItem };
+
 const props = defineProps<TwoMaterialProps>();
-const emits = defineEmits<TwoMaterialEmits>();
+const visible = defineModel<boolean>();
 const version = ref<string>();
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 
 onMounted(async () => (version.value = await getVersion()));
 

src/components/pageWiki/two-select-c.vue

@@ -66,7 +66,8 @@
 </template>
 <script setup lang="ts">
 import TOverlay from "@comp/app/t-overlay.vue";
-import { computed, ref, watch } from "vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import { ref, toRaw, watch } from "vue";
 
 export type SelectedCValue = {
   star: Array<number>;
@@ -74,14 +75,8 @@ export type SelectedCValue = {
   elements: Array<string>;
   area: Array<string>;
 };
-type TwoSelectCProps = { modelValue: boolean; reset: boolean };
-type TwoSelectCEmits = {
-  (e: "update:modelValue", v: boolean): void;
-  (e: "update:reset", v: boolean): void;
-  (e: "select-c", v: SelectedCValue): void;
-};
+type TwoSelectCEmits = (e: "select-c", v: SelectedCValue) => void;
 
-const props = defineProps<TwoSelectCProps>();
 const emits = defineEmits<TwoSelectCEmits>();
 const selectStarList = [4, 5];
 const selectWeaponList = ["单手剑", "双手剑", "弓", "法器", "长柄武器"];
@@ -93,24 +88,29 @@ const selectedStar = ref<Array<number>>(selectStarList);
 const selectedWeapon = ref<Array<string>>(selectWeaponList);
 const selectedElements = ref<Array<string>>(selectElementList);
 const selectedArea = ref<Array<string>>(selectAreaList);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
-const reset = computed<boolean>({
-  get: () => props.reset,
-  set: (v: boolean) => emits("update:reset", v),
-});
+const visible = defineModel<boolean>();
+const resetModel = defineModel<boolean>("reset");
 
 watch(
-  () => props.reset,
-  (value) => {
-    if (value) {
+  () => resetModel.value,
+  () => {
+    if (resetModel.value) {
+      if (
+        toRaw(selectedStar.value) === selectStarList &&
+        toRaw(selectedWeapon.value) === selectWeaponList &&
+        toRaw(selectedElements.value) === selectElementList &&
+        toRaw(selectedArea.value) === selectAreaList
+      ) {
+        showSnackbar.warn("无需重置");
+        resetModel.value = false;
+        return;
+      }
       selectedStar.value = selectStarList;
       selectedWeapon.value = selectWeaponList;
       selectedElements.value = selectElementList;
       selectedArea.value = selectAreaList;
-      reset.value = false;
+      resetModel.value = false;
+      showSnackbar.success("已重置");
     }
   },
 );

src/components/pageWiki/two-select-w.vue

@@ -36,17 +36,12 @@
 </template>
 <script setup lang="ts">
 import TOverlay from "@comp/app/t-overlay.vue";
-import { computed, ref, watch } from "vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import { ref, toRaw, watch } from "vue";
 
-export type SelectedWValue = { star: Array<number>; weapon: Array<string> };
-type TwoSelectWProps = { modelValue: boolean; reset: boolean };
-type TwoSelectWEmits = {
-  (e: "update:modelValue", value: boolean): void;
-  (e: "update:reset", value: boolean): void;
-  (e: "select-w", value: SelectedWValue): void;
-};
+export type SelectedWValue = { star: Array<number>; weapon: Array<string>; isReset: boolean };
+type TwoSelectWEmits = (e: "select-w", value: SelectedWValue) => void;
 
-const props = defineProps<TwoSelectWProps>();
 const emits = defineEmits<TwoSelectWEmits>();
 
 const selectStarList = [4, 5];
@@ -54,29 +49,31 @@ const selectWeaponList = ["单手剑", "双手剑", "弓", "法器", "长柄武
 
 const selectedStar = ref<Array<number>>(selectStarList);
 const selectedWeapon = ref<Array<string>>(selectWeaponList);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
-const reset = computed<boolean>({
-  get: () => props.reset,
-  set: (v) => emits("update:reset", v),
-});
+const visible = defineModel<boolean>();
+const resetModel = defineModel<boolean>("reset");
 
 watch(
-  () => props.reset,
-  (value) => {
-    if (value) {
+  () => resetModel.value,
+  () => {
+    if (resetModel.value) {
+      if (
+        toRaw(selectedStar.value) === selectStarList &&
+        toRaw(selectedWeapon.value) === selectWeaponList
+      ) {
+        showSnackbar.warn("无需重置");
+        resetModel.value = false;
+        return;
+      }
       selectedStar.value = selectStarList;
       selectedWeapon.value = selectWeaponList;
-      reset.value = false;
-      confirmSelect();
+      resetModel.value = false;
+      emits("select-w", { star: selectedStar.value, weapon: selectedWeapon.value, isReset: true });
     }
   },
 );
 
 function confirmSelect(): void {
-  emits("select-w", { star: selectedStar.value, weapon: selectedWeapon.value });
+  emits("select-w", { star: selectedStar.value, weapon: selectedWeapon.value, isReset: false });
   visible.value = false;
 }
 </script>

src/components/userAchi/tua-achi-overlay.vue

@@ -54,25 +54,19 @@
 <script lang="ts" setup>
 import TOverlay from "@comp/app/t-overlay.vue";
 import VpOverlaySearch from "@comp/viewPost/vp-overlay-search.vue";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 
 import { AppAchievementSeriesData } from "@/data/index.js";
 import TGLogger from "@/utils/TGLogger.js";
 
-type ToAchiInfoProps = { modelValue: boolean; data: TGApp.Sqlite.Achievement.RenderAchi };
-type ToAchiInfoEmits = {
-  (e: "update:modelValue", v: boolean): void;
-  (e: "select-series", v: number): void;
-};
+type ToAchiInfoProps = { data: TGApp.Sqlite.Achievement.RenderAchi };
+type ToAchiInfoEmits = (e: "select-series", v: number) => void;
 
 const props = defineProps<ToAchiInfoProps>();
 const emits = defineEmits<ToAchiInfoEmits>();
+const visible = defineModel<boolean>();
 const showSearch = ref<boolean>(false);
 const search = ref<string>();
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 
 async function searchDirect(word: string): Promise<void> {
   await TGLogger.Info(`[ToAchiInfo][${props.data.id}][Search] 查询 ${word}`);

src/components/userAchi/tua-achi.vue

@@ -38,14 +38,11 @@ import { AppAchievementSeriesData } from "@/data/index.js";
 import { timestampToDate } from "@/utils/toolFunc.js";
 
 type TuaAchiProps = { modelValue: TGApp.Sqlite.Achievement.RenderAchi };
-type TuaAchiEmits = {
-  (e: "update:modelValue", data: TGApp.Sqlite.Achievement.RenderAchi): void;
-  (e: "update:update", data: boolean): void;
-  (e: "select-achi", data: TGApp.Sqlite.Achievement.RenderAchi): void;
-};
+type TuaAchiEmits = (e: "select-achi", data: TGApp.Sqlite.Achievement.RenderAchi) => void;
 
 const props = defineProps<TuaAchiProps>();
 const emits = defineEmits<TuaAchiEmits>();
+const model = defineModel<TGApp.Sqlite.Achievement.RenderAchi>();
 const data = ref<TGApp.Sqlite.Achievement.RenderAchi>(toRaw(props.modelValue));
 
 watch(
@@ -69,7 +66,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
   if (!stat) {
     data.value.isCompleted = false;
     await TSUserAchi.updateAchi(data.value);
-    emits("update:modelValue", data.value);
+    model.value = data.value;
     await event.emit("updateAchi", data.value.series);
     showSnackbar.success(`已将成就 ${data.value.name}(${data.value.id}) 状态设为未完成`);
     return;
@@ -80,7 +77,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
     return;
   }
   if (progress === undefined) progress = data.value.progress.toString();
-  if (isNaN(Number(progress)) || progress === "0") {
+  if (isNaN(Number(progress))) {
     showSnackbar.warn("请输入有效数字！");
     return;
   }
@@ -90,7 +87,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
   await TSUserAchi.updateAchi(data.value);
   await event.emit("updateAchi", data.value.series);
   showSnackbar.success(`已将成就 ${data.value.name}(${data.value.id}) 状态设为已完成`);
-  emits("update:modelValue", data.value);
+  model.value = data.value;
 }
 </script>
 <style lang="css" scoped>

src/components/userAvatar/tua-detail-overlay.vue

@@ -55,32 +55,22 @@ import { computed, ref, watch } from "vue";
 import TuaDetailCard from "./tua-detail-card.vue";
 
 type TuaDetailOverlayProps = {
-  modelValue: boolean;
   avatar: TGApp.Sqlite.Character.UserRole;
-  mode: "classic" | "card" | "dev";
   avatars: Array<TGApp.Sqlite.Character.UserRole>;
 };
 type TuaDetailOverlayEmits = {
-  (e: "update:modelValue", v: boolean): void;
-  (e: "update:mode", val: "classic" | "card" | "dev"): void;
   (e: "toNext", val: boolean): void;
   (e: "toAvatar", val: TGApp.Sqlite.Character.UserRole): void;
 };
 
 const props = defineProps<TuaDetailOverlayProps>();
 const emits = defineEmits<TuaDetailOverlayEmits>();
+const visible = defineModel<boolean>();
+const modeTab = defineModel<"classic" | "card" | "dev">("mode");
 const avatarTab = ref<number>();
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
-const modeTab = computed<"classic" | "card" | "dev">({
-  get: () => props.mode,
-  set: (v) => emits("update:mode", v),
-});
 
 const avatarsWidth = computed<string>(() => {
-  switch (props.mode) {
+  switch (modeTab.value) {
     case "classic":
       return "500px";
     case "card":

src/components/userCombat/tuc-overlay.vue

@@ -27,18 +27,10 @@ import { AppCharacterData } from "@/data/index.js";
 import { generateShareImg } from "@/utils/TGShare.js";
 import { timestampToDate } from "@/utils/toolFunc.js";
 
-type TucOverlayProps = {
-  modelValue: boolean;
-  data: TGApp.Plugins.Hutao.Combat.Data | undefined;
-};
-type TucOverlayEmits = (e: "update:modelValue", v: boolean) => void;
+type TucOverlayProps = { data: TGApp.Plugins.Hutao.Combat.Data | undefined };
 
 const props = defineProps<TucOverlayProps>();
-const emits = defineEmits<TucOverlayEmits>();
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+const visible = defineModel<boolean>();
 const raw = computed<Array<TGApp.Plugins.Hutao.Base.Rate>>(() => {
   if (!props.data) return [];
   const res = props.data.BackupAvatarRates;

src/components/userGacha/ugo-uid.vue

@@ -60,33 +60,26 @@ import TGLogger from "@/utils/TGLogger.js";
 import { timestampToDate } from "@/utils/toolFunc.js";
 import { getUigf4Header, getUigf4Item, readUigf4Data, verifyUigfData } from "@/utils/UIGF.js";
 
-type UgoUidProps =
-  | { modelValue: boolean; mode: "export" }
-  | { modelValue: boolean; mode: "import" };
-type UgoUidEmits = (e: "update:modelValue", v: boolean) => void;
+type UgoUidProps = { mode: "import" | "export" };
 type UgoUidItem = { uid: string; length: number; time: string };
 
 const props = defineProps<UgoUidProps>();
-const emits = defineEmits<UgoUidEmits>();
+const visible = defineModel<boolean>();
+const fp = ref<string>("未选择");
 const dataRaw = shallowRef<TGApp.Plugins.UIGF.Schema4>();
 const data = shallowRef<Array<UgoUidItem>>([]);
 const selectedData = shallowRef<Array<UgoUidItem>>([]);
 const title = computed<string>(() => (props.mode === "import" ? "导入" : "导出"));
-const fp = ref<string>("未选择");
-
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 
 onMounted(async () => {
   if (props.mode === "export") fp.value = await getDefaultSavePath();
 });
 
 watch(
-  () => props.modelValue,
-  async (v) => (v ? await refreshData() : undefined),
-  { immediate: true },
+  () => visible.value,
+  async () => {
+    if (visible.value) await refreshData();
+  },
 );
 
 async function getDefaultSavePath(): Promise<string> {

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

@@ -37,25 +37,24 @@ import TOverlay from "@comp/app/t-overlay.vue";
 import showDialog from "@comp/func/dialog.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import TSUserCollection from "@Sqlite/modules/userCollect.js";
-import { computed, ref, shallowRef, watch } from "vue";
+import { ref, shallowRef, watch } from "vue";
 
-type ToPostCollectProps = { modelValue: boolean; post?: TGApp.Plugins.Mys.Post.FullData };
-type ToPostCollectEmits = { (e: "update:modelValue", v: boolean): void; (e: "submit"): void };
+type ToPostCollectProps = { post?: TGApp.Plugins.Mys.Post.FullData };
+type ToPostCollectEmits = (e: "submit") => void;
 
 const props = defineProps<ToPostCollectProps>();
 const emits = defineEmits<ToPostCollectEmits>();
+const visible = defineModel<boolean>();
 const submit = ref<boolean>(false);
 const collectList = shallowRef<Array<TGApp.Sqlite.UserCollection.UFCollection>>([]);
 const postCollect = shallowRef<Array<TGApp.Sqlite.UserCollection.UFMap>>([]);
 const selectList = shallowRef<Array<string>>([]);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 
 watch(
-  () => props.modelValue,
-  async (v) => (v ? await freshData() : null),
+  () => visible.value,
+  async () => {
+    if (visible.value) await freshData();
+  },
 );
 
 async function freshData(): Promise<void> {

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

@@ -49,13 +49,12 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import Mys from "@Mys/index.js";
-import { computed, nextTick, onMounted, shallowRef, useTemplateRef, watch } from "vue";
+import { nextTick, onMounted, shallowRef, useTemplateRef, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import { timestampToDate } from "@/utils/toolFunc.js";
 
-type TpoCollectionProps = { collection: TGApp.Plugins.Mys.Post.Collection; modelValue: boolean };
-type TpoCollectionEmits = (e: "update:modelValue", v: boolean) => void;
+type TpoCollectionProps = { collection: TGApp.Plugins.Mys.Post.Collection };
 type TpoCollectionItem = {
   postId: string;
   title: string;
@@ -64,15 +63,14 @@ type TpoCollectionItem = {
   comments: number;
   likes: number;
 };
+
 const router = useRouter();
+
 const props = defineProps<TpoCollectionProps>();
-const emits = defineEmits<TpoCollectionEmits>();
-const postListEl = useTemplateRef<HTMLDivElement>("postListRef");
+const visible = defineModel<boolean>();
 const posts = shallowRef<Array<TpoCollectionItem>>([]);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
+const postListEl = useTemplateRef<HTMLDivElement>("postListRef");
+
 watch(
   () => [visible.value, posts.value],
   async () => {

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

@@ -32,17 +32,13 @@ import type { TpImage } from "./tp-image.vue";
 import { copyToClipboard, getImageBuffer, saveCanvasImg } from "@/utils/TGShare.js";
 import { bytesToSize } from "@/utils/toolFunc.js";
 
-type TpoImageProps = { image: TpImage; modelValue: boolean };
-type TpoImageEmits = (e: "update:modelValue", v: boolean) => void;
+type TpoImageProps = { image: TpImage };
+
 const props = defineProps<TpoImageProps>();
-const emits = defineEmits<TpoImageEmits>();
+const visible = defineModel<boolean>();
 const bgMode = ref<number>(0); // 0: transparent, 1: black, 2: white
 const isOriSize = ref<boolean>(false);
 const buffer = shallowRef<Uint8Array | null>(null);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 const format = computed<string>(() => {
   if (props.image.attributes?.ext) return props.image.attributes.ext;
   const imageFormat = props.image.insert.image.split(".").pop();

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

@@ -45,20 +45,17 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import Mys from "@Mys/index.js";
-import { computed, onUnmounted, ref, shallowRef, watch } from "vue";
+import { onUnmounted, ref, shallowRef, watch } from "vue";
+
+type TpoLotteryProps = { lottery: string | undefined };
 
-type TpoLotteryProps = { modelValue: boolean; lottery: string | undefined };
-type TpoLotteryEmits = (e: "update:modelValue", v: boolean) => void;
 const props = defineProps<TpoLotteryProps>();
-const emits = defineEmits<TpoLotteryEmits>();
+const visible = defineModel<boolean>();
 const timeStatus = ref<string>("未知");
 const upWay = ref<string>("未知");
 const card = shallowRef<TGApp.Plugins.Mys.Lottery.RenderCard>();
 const jsonData = shallowRef<TGApp.Plugins.Mys.Lottery.FullData>();
-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;
 

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

@@ -21,39 +21,34 @@ import TOverlay from "@comp/app/t-overlay.vue";
 import TPostCard from "@comp/app/t-postcard.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import Mys from "@Mys/index.js";
-import { computed, onMounted, ref, shallowRef, watch } from "vue";
+import { onMounted, ref, shallowRef, watch } from "vue";
 
 import { getGameName } from "@/utils/toolFunc.js";
 
-type ToPostSearchProps = { modelValue: boolean; gid: string; keyword?: string };
-type ToPostSearchEmits = (e: "update:modelValue", v: boolean) => void;
+type ToPostSearchProps = { gid: string; keyword?: string };
+
 const props = defineProps<ToPostSearchProps>();
-const emits = defineEmits<ToPostSearchEmits>();
+const visible = defineModel<boolean>();
 const search = ref<string>();
 const lastId = ref<string>("");
 const game = ref<string>("2");
 const isLast = ref<boolean>(false);
 const load = ref<boolean>(false);
 const results = shallowRef<Array<TGApp.Plugins.Mys.Post.FullData>>([]);
-const visible = computed<boolean>({
-  get: () => props.modelValue,
-  set: (v) => emits("update:modelValue", v),
-});
 
 onMounted(async () => {
   game.value = props.gid;
   if (props.keyword && props.keyword !== "") search.value = props.keyword;
-  if (props.modelValue) await searchPosts();
+  if (visible.value) await searchPosts();
 });
 
 watch(
-  () => props.modelValue,
+  () => visible.value,
   async () => {
-    if (props.modelValue && results.value.length === 0) {
+    if (visible.value && results.value.length === 0) {
       await searchPosts();
       return;
     }
-    visible.value = props.modelValue;
   },
 );
 
@@ -69,7 +64,7 @@ watch(
       results.value = [];
       lastId.value = "";
       isLast.value = false;
-      if (props.modelValue) await searchPosts();
+      if (visible.value) await searchPosts();
     }
   },
 );

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

@@ -17,23 +17,15 @@ import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import { open } from "@tauri-apps/plugin-dialog";
 import { readTextFile } from "@tauri-apps/plugin-fs";
-import { computed, ref, shallowRef } from "vue";
+import { ref, shallowRef } from "vue";
 
 import TprReply from "./vp-reply-item.vue";
 
 import TGLogger from "@/utils/TGLogger.js";
 
-type TprDebugProps = { modelValue: boolean };
-type TprDebugEmits = (e: "update:modelValue", v: boolean) => void;
-
-const props = defineProps<TprDebugProps>();
-const emits = defineEmits<TprDebugEmits>();
+const visible = defineModel<boolean>();
 const filePath = ref<string>("");
 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({

src/pages/WIKI/Weapon.vue

@@ -67,7 +67,7 @@ function switchW(item: TGApp.App.Weapon.WikiBriefInfo): void {
 }
 
 function handleSelectW(val: SelectedWValue) {
-  showSelect.value = true;
+  if (!val.isReset) showSelect.value = true;
   const filterW = AppWeaponData.filter((item) => {
     if (!val.star.includes(item.star)) return false;
     return val.weapon.includes(item.weapon);