♻️ 全面整理重构

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

@@ -6,7 +6,6 @@
     <v-virtual-scroll :items="renderAchi" :item-height="60" class="tua-al-list">
       <template #default="{ item }">
         <TuaAchi :modelValue="item" @select-achi="selectAchi" />
-        <div style="height: 10px" />
       </template>
     </v-virtual-scroll>
     <ToNameCard v-model="showNc" :data="ncData" v-if="ncData" />
@@ -17,56 +16,50 @@
       @select-series="selectSeries"
     >
       <template #left>
-        <div class="card-arrow left" @click="switchAchiInfo(false)">
-          <img src="../../assets/icons/arrow-right.svg" alt="right" />
+        <div class="card-arrow" @click="switchAchiInfo(false)">
+          <img src="@/assets/icons/arrow-right.svg" alt="right" />
         </div>
       </template>
       <template #right>
         <div class="card-arrow" @click="switchAchiInfo(true)">
-          <img src="../../assets/icons/arrow-right.svg" alt="right" />
+          <img src="@/assets/icons/arrow-right.svg" alt="right" />
         </div>
       </template>
     </ToAchiInfo>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from "vue";
-
-import { AppAchievementSeriesData, AppNameCardsData } from "../../data/index.js";
-import TSUserAchi from "../../plugins/Sqlite/modules/userAchi.js";
-import ToNameCard from "../app/to-namecard.vue";
-import TopNameCard from "../app/top-namecard.vue";
-import showSnackbar from "../func/snackbar.js";
+import ToNameCard from "@comp/app/to-nameCard.vue";
+import TopNameCard from "@comp/app/top-nameCard.vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import TSUserAchi from "@Sqlite/modules/userAchi.js";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 import ToAchiInfo from "./tua-achi-overlay.vue";
 import TuaAchi from "./tua-achi.vue";
 
-interface TuaAchiListProps {
+import { AppAchievementSeriesData, AppNameCardsData } from "@/data/index.js";
+
+type TuaAchiListProps = {
   uid: number;
   hideFin: boolean;
   series?: number;
   search?: string;
   isSearch: boolean;
-}
-
-interface TuaAchiListEmits {
+};
+type TuaAchiListEmits = {
   (e: "update:series", v: number): void;
-
   (e: "update:isSearch", v: boolean): false;
-}
+};
 
 const props = defineProps<TuaAchiListProps>();
 const emits = defineEmits<TuaAchiListEmits>();
-
-const achievements = ref<TGApp.Sqlite.Achievement.RenderAchi[]>([]);
-const selectedAchi = ref<TGApp.Sqlite.Achievement.RenderAchi | undefined>(undefined);
-
 const nameCard = ref<string>();
-const ncData = ref<TGApp.App.NameCard.Item | undefined>(undefined);
 const showNc = ref<boolean>(false);
-
 const showOverlay = ref<boolean>(false);
-
+const ncData = shallowRef<TGApp.App.NameCard.Item>();
+const achievements = shallowRef<Array<TGApp.Sqlite.Achievement.RenderAchi>>([]);
+const selectedAchi = shallowRef<TGApp.Sqlite.Achievement.RenderAchi>();
 const renderAchi = computed<Array<TGApp.Sqlite.Achievement.RenderAchi>>(() => {
   if (props.hideFin) return achievements.value.filter((a) => !a.isCompleted);
   return achievements.value;
@@ -74,15 +67,8 @@ const renderAchi = computed<Array<TGApp.Sqlite.Achievement.RenderAchi>>(() => {
 
 onMounted(async () => await loadAchi());
 
-watch(
-  () => [props.search, props.isSearch],
-  async () => await searchAchi(),
-);
-
-watch(
-  () => [props.series, props.uid],
-  async () => await loadAchi(),
-);
+watch(() => [props.search, props.isSearch], searchAchi);
+watch(() => [props.series, props.uid], loadAchi);
 
 async function searchAchi(): Promise<void> {
   if (!props.isSearch) return;
@@ -165,7 +151,6 @@ function switchAchiInfo(next: boolean): void {
   max-height: 100%;
   flex-direction: column;
   overflow-y: auto;
-  row-gap: 10px;
 }
 
 .tua-al-list {
@@ -180,18 +165,18 @@ function switchAchiInfo(next: boolean): void {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:first-child {
+    transform: rotate(180deg);
+  }
 }
 
 .dark .card-arrow {
   filter: invert(11%) sepia(73%) saturate(11%) hue-rotate(139deg) brightness(97%) contrast(81%);
 }
-
-.card-arrow img {
-  width: 100%;
-  height: 100%;
-}
-
-.card-arrow.left img {
-  transform: rotate(180deg);
-}
 </style>

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

@@ -52,12 +52,12 @@
   <VpOverlaySearch gid="2" v-model="showSearch" :keyword="search" />
 </template>
 <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 { AppAchievementSeriesData } from "../../data/index.js";
-import TGLogger from "../../utils/TGLogger.js";
-import TOverlay from "../app/t-overlay.vue";
-import VpOverlaySearch from "../viewPost/vp-overlay-search.vue";
+import { AppAchievementSeriesData } from "@/data/index.js";
+import TGLogger from "@/utils/TGLogger.js";
 
 type ToAchiInfoProps = { modelValue: boolean; data: TGApp.Sqlite.Achievement.RenderAchi };
 type ToAchiInfoEmits = {

src/components/userAchi/tua-achi.vue

@@ -13,9 +13,7 @@
       <div class="achi-pre-info" @click="selectAchi()">
         <span>
           <span>{{ data.name }}</span>
-          <span v-if="data.progress !== 0">
-            {{ data.progress }}
-          </span>
+          <span v-if="data.progress !== 0">{{ data.progress }}</span>
         </span>
         <span>{{ data.description }}</span>
       </div>
@@ -30,26 +28,21 @@
   </div>
 </template>
 <script lang="ts" setup>
+import showDialog from "@comp/func/dialog.js";
+import showSnackbar from "@comp/func/snackbar.js";
+import TSUserAchi from "@Sqlite/modules/userAchi.js";
 import { event } from "@tauri-apps/api";
-import { toRaw, ref, watch } from "vue";
+import { ref, toRaw, watch } from "vue";
 
-import { AppAchievementSeriesData } from "../../data/index.js";
-import TSUserAchi from "../../plugins/Sqlite/modules/userAchi.js";
-import { timestampToDate } from "../../utils/toolFunc.js";
-import showDialog from "../func/dialog.js";
-import showSnackbar from "../func/snackbar.js";
+import { AppAchievementSeriesData } from "@/data/index.js";
+import { timestampToDate } from "@/utils/toolFunc.js";
 
-interface TuaAchiProps {
-  modelValue: TGApp.Sqlite.Achievement.RenderAchi;
-}
-
-interface TuaAchiEmits {
+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;
-}
+};
 
 const props = defineProps<TuaAchiProps>();
 const emits = defineEmits<TuaAchiEmits>();
@@ -109,6 +102,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
   justify-content: space-between;
   padding: 10px;
   border-radius: 10px;
+  margin-bottom: 10px;
   background: var(--box-bg-1);
   color: var(--box-text-7);
   cursor: pointer;

src/components/userAchi/tua-series.vue

@@ -9,28 +9,21 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { listen, UnlistenFn } from "@tauri-apps/api/event";
-import { ref, onMounted, watch, onUnmounted } from "vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import TSUserAchi from "@Sqlite/modules/userAchi.js";
+import { type Event, listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { computed, onMounted, onUnmounted, shallowRef, watch } from "vue";
 
-import { AppAchievementSeriesData } from "../../data/index.js";
-import TSUserAchi from "../../plugins/Sqlite/modules/userAchi.js";
-import showSnackbar from "../func/snackbar.js";
+import { AppAchievementSeriesData } from "@/data/index.js";
 
-interface TuaSeriesProps {
-  uid: number;
-  series: number;
-  cur: number;
-}
-
-interface TuaSeriesEmits {
-  (e: "selectSeries", v: number): void;
-}
+type TuaSeriesProps = { uid: number; series: number; cur: number };
+type TuaSeriesEmits = (e: "selectSeries", v: number) => void;
 
 const props = defineProps<TuaSeriesProps>();
 const emits = defineEmits<TuaSeriesEmits>();
 
-const overview = ref<TGApp.Sqlite.Achievement.Overview>({ fin: 0, total: 0 });
-const data = ref<TGApp.App.Achievement.Series | undefined>(
+const overview = shallowRef<TGApp.Sqlite.Achievement.Overview>({ fin: 0, total: 0 });
+const data = computed<TGApp.App.Achievement.Series | undefined>(() =>
   AppAchievementSeriesData.find((s) => s.id === props.series),
 );
 let achiListener: UnlistenFn | null = null;
@@ -50,7 +43,7 @@ async function refreshOverview(): Promise<void> {
 }
 
 async function listenAchi(): Promise<UnlistenFn> {
-  return await listen<number>("updateAchi", async (e) => {
+  return await listen<number>("updateAchi", async (e: Event<number>) => {
     if (e.payload === props.series) await refreshOverview();
   });
 }
@@ -62,7 +55,7 @@ onUnmounted(async () => {
   }
 });
 
-async function selectSeries(): Promise<void> {
+function selectSeries(): void {
   if (props.cur === props.series) {
     showSnackbar.warn("已选中当前系列！");
     return;
@@ -78,6 +71,7 @@ async function selectSeries(): Promise<void> {
   justify-content: center;
   padding: 10px;
   border-radius: 10px;
+  margin-bottom: 10px;
   background: var(--box-bg-1);
   color: var(--box-text-1);
   column-gap: 10px;