✨ 添加成就详细信息弹窗 #19

src/components/overlay/to-achiInfo.vue

@@ -0,0 +1,189 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="0">
+    <div class="toai-container" v-if="props.data">
+      <slot name="left"></slot>
+      <div class="toai-box">
+        <div class="toai-top">
+          <span class="toai-click" @click="search(props.data.name)">{{ props.data.name }}</span>
+          <span>{{ props.data.description }}</span>
+        </div>
+        <div v-if="achiLC">
+          <div class="toai-mid-title">
+            <span>所属系列：</span>
+            <span class="toai-click" @click="emits('selectS', props.data.series)">{{
+              AppAchievementSeriesData.find((s) => s.id === props.data?.series)?.name ?? "未知"
+            }}</span>
+          </div>
+          <div class="toai-mid-title">
+            <span>原石奖励：</span>
+            <span>{{ props.data.reward }}</span>
+          </div>
+          <div class="toai-mid-title">
+            <span>触发方式：</span>
+            <span>{{ achiLC.trigger.task ? "完成以下所有任务" : achiLC.trigger.type }}</span>
+          </div>
+          <div class="toai-mid-item" v-for="item in achiLC.trigger.task" :key="item.questId">
+            <v-icon>mdi-alert-decagram</v-icon>
+            <span class="toai-click" @click="search(item.name)">{{ item.name }}</span>
+            <span>（{{ item.type }}）</span>
+          </div>
+        </div>
+        <div>
+          <div class="toai-bottom-title">
+            <span>是否完成：</span>
+            <span>{{ props.data.isCompleted ? "是" : "否" }}</span>
+          </div>
+          <div class="toai-bottom-title">
+            <span>完成时间：</span>
+            <span>{{ props.data.completedTime }}</span>
+          </div>
+          <div class="toai-bottom-title">
+            <span>当前进度：</span>
+            <span>{{ props.data.progress }}</span>
+          </div>
+        </div>
+        <div class="toai-extra">
+          <span>ID：{{ props.data.id }}</span>
+        </div>
+      </div>
+      <slot name="right"></slot>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue";
+
+import { AppAchievementsData, AppAchievementSeriesData } from "../../data";
+import TGClient from "../../utils/TGClient";
+import TGLogger from "../../utils/TGLogger";
+import TOverlay from "../main/t-overlay.vue";
+
+interface ToAchiInfoProps {
+  modelValue: boolean;
+  data?: TGApp.Sqlite.Achievement.SingleTable;
+}
+
+interface ToAchiInfoEmits {
+  (e: "update:modelValue", v: boolean): void;
+
+  (e: "selectS", v: number): void;
+}
+
+const props = defineProps<ToAchiInfoProps>();
+const emits = defineEmits<ToAchiInfoEmits>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+const achiLC = ref<TGApp.App.Achievement.Item>();
+
+onMounted(() => getData);
+watch(() => props.data, getData);
+
+function getData(): void {
+  const res = AppAchievementsData.find((item) => item.id === props.data?.id);
+  if (res) {
+    achiLC.value = res;
+  } else {
+    achiLC.value = undefined;
+  }
+}
+
+// 点击外部关闭
+function onCancel() {
+  visible.value = false;
+}
+
+// 查找
+async function search(word: string): Promise<void> {
+  await TGLogger.Info(`[ToAchiInfo][${props.data?.id}][Search] 查询 ${word}`);
+  const str = encodeURIComponent(word);
+  const url = `https://www.miyoushe.com/ys/search?keyword=${str}`;
+  await TGClient.open("web_thin", url);
+}
+</script>
+<style lang="css" scoped>
+.toai-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
+}
+
+.toai-box {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  width: 600px;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--box-bg-1);
+  row-gap: 10px;
+}
+
+.toai-top {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.toai-top :first-child {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 24px;
+}
+
+.toai-top-main :last-child {
+  padding: 0 5px;
+  border-radius: 5px;
+  background: var(--box-bg-2);
+  color: var(--box-text-5);
+  font-family: var(--font-title);
+}
+
+.toai-mid-title,
+.toai-bottom-title {
+  font-size: 18px;
+}
+
+.toai-mid-title :first-child,
+.toai-bottom-title :first-child {
+  font-family: var(--font-title);
+}
+
+.toai-mid-title :last-child {
+  color: var(--box-text-3);
+}
+
+.toai-mid-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 15px;
+  margin-top: 5px;
+  column-gap: 5px;
+  font-size: 18px;
+}
+
+.toai-mid-item :first-child {
+  color: var(--box-text-5);
+}
+
+.toai-extra {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+
+.toai-click {
+  cursor: pointer;
+}
+</style>

src/pages/common/Achievements.vue

@@ -52,10 +52,11 @@
         </v-list>
       </div>
       <div
-        v-for="achievement in renderSelect"
+        v-for="(achievement, index) in renderSelect"
         :key="achievement.id"
         class="card-achi"
         :title="allSeriesData.find((item) => item.id === achievement.series)?.name ?? ''"
+        @click="toAchiInfo(achievement, index)"
       >
         <div class="achi-version">v{{ achievement.version }}</div>
         <div class="achi-pre">
@@ -100,6 +101,18 @@
     </div>
   </div>
   <ToNamecard v-model="showNameCard" :data="curCard" />
+  <ToAchiInfo v-model="showAchi" :data="showAchiData" @select-s="selectSeries">
+    <template #left>
+      <div class="card-arrow left" @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" />
+      </div>
+    </template>
+  </ToAchiInfo>
 </template>
 
 <script lang="ts" setup>
@@ -109,6 +122,7 @@ import { useRoute, useRouter } from "vue-router";
 
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
+import ToAchiInfo from "../../components/overlay/to-achiInfo.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import ToNamecard from "../../components/overlay/to-namecard.vue";
 import { AppAchievementSeriesData, AppNameCardsData } from "../../data";
@@ -127,6 +141,7 @@ const loadingTitle = ref<string>("正在加载数据");
 const search = ref<string>("");
 const hideFin = ref<boolean>(false);
 const showNameCard = ref<boolean>(false);
+const showAchi = ref<boolean>(false);
 // data
 const title = ref(achievementsStore.title);
 const curCardName = ref<string>("");
@@ -135,6 +150,8 @@ let curCard = ref<TGApp.App.NameCard.Item>();
 const allSeriesData = ref<TGApp.Sqlite.Achievement.SeriesTable[]>([]);
 const selectedSeries = ref<number>(-1);
 const selectedAchievement = ref<TGApp.Sqlite.Achievement.SingleTable[]>([]);
+const showAchiData = ref<TGApp.Sqlite.Achievement.SingleTable>();
+const curAchiDataIndex = ref<number>(0);
 const renderSelect = computed(() => {
   if (hideFin.value) {
     return selectedAchievement.value.filter((item) => item.isCompleted === 0);
@@ -221,6 +238,10 @@ async function selectSeries(index: number): Promise<void> {
   if (rightWrap) {
     rightWrap.scrollTop = 0;
   }
+  // 刷新overlay数据
+  curAchiDataIndex.value = selectedAchievement.value.findIndex(
+    (i) => i.id === showAchiData.value?.id,
+  );
   await nextTick(() => {
     loading.value = false;
     // 等 500ms 动画
@@ -237,6 +258,37 @@ function openImg(): void {
   showNameCard.value = true;
 }
 
+// 打开成就详情
+function toAchiInfo(item: TGApp.Sqlite.Achievement.SingleTable, index: number): void {
+  showAchiData.value = item;
+  showAchi.value = true;
+  curAchiDataIndex.value = index;
+}
+
+// 切换成就详情
+function switchAchiInfo(next: boolean) {
+  if (next) {
+    if (curAchiDataIndex.value === renderSelect.value.length - 1) {
+      showSnackbar({
+        color: "warn",
+        text: "已经是最后一个了",
+      });
+      return;
+    }
+    curAchiDataIndex.value++;
+  } else {
+    if (curAchiDataIndex.value === 0) {
+      showSnackbar({
+        color: "warn",
+        text: "已经是第一个了",
+      });
+      return;
+    }
+    curAchiDataIndex.value--;
+  }
+  showAchiData.value = renderSelect.value[curAchiDataIndex.value];
+}
+
 async function searchCard(): Promise<void> {
   if (search.value === "") {
     showSnackbar({
@@ -673,6 +725,7 @@ async function setAchiDB(achievement: TGApp.Sqlite.Achievement.SingleTable): Pro
   border-radius: 10px;
   background: var(--box-bg-1);
   color: var(--box-text-7);
+  cursor: pointer;
 }
 
 /* 成就进度 */
@@ -782,4 +835,27 @@ async function setAchiDB(achievement: TGApp.Sqlite.Achievement.SingleTable): Pro
   width: 40px;
   height: 40px;
 }
+
+.card-arrow {
+  position: relative;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.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/types/App/Achievement.d.ts

@@ -1,13 +1,19 @@
 /**
  * @file types/App/Achievement.d.ts
  * @description 应用成就相关类型定义文件
- * @since Alpha v0.1.5
+ * @since Beta v0.4.2
  */
 
+/**
+ * @description 应用成就命名空间
+ * @since Beta v0.4.2
+ * @namespace Achievement
+ * @memberof TGApp.App
+ */
 declare namespace TGApp.App.Achievement {
   /**
    * @description 本应用的成就类型
-   * @since Alpha v0.1.5
+   * @since Beta v0.4.2
    * @interface Item
    * @property {number} id - 成就 ID
    * @property {number} series - 成就系列 ID
@@ -16,6 +22,7 @@ declare namespace TGApp.App.Achievement {
    * @property {string} description - 成就描述
    * @property {number} reward - 成就奖励
    * @property {string} version - 成就版本
+   * @property {Trigger} trigger - 完成方式
    * @return Item
    */
   interface Item {
@@ -26,7 +33,29 @@ declare namespace TGApp.App.Achievement {
     description: string;
     reward: number;
     version: string;
+    trigger: Trigger;
   }
+
+  /**
+   * @description 成就触发条件
+   * @since Beta v0.4.2
+   * @interface Trigger
+   * @property {string} type 成就触发类型
+   * @property {object} task 成就触发任务
+   * @property {string} task.questId 成就触发任务所属任务编号
+   * @property {string} task.name 成就触发任务名称
+   * @property {string} task.type 成就触发任务类型
+   * @return Trigger
+   */
+  interface Trigger {
+    type: string;
+    task?: Array<{
+      questId: number;
+      name: string;
+      type: string;
+    }>;
+  }
+
   /**
    * @description 本应用的成就系列类型
    * @since Alpha v0.1.5