♻️ 首页日历组件添加wiki跳转，移除wiki子窗口

src/components/app/t-sidebar.vue

@@ -110,7 +110,7 @@
             title="角色图鉴"
             value="wiki-character"
             :link="true"
-            href="/wiki/character"
+            href="/wiki/character/0"
           >
             <template #prepend>
               <img src="/source/UI/wikiAvatar.webp" alt="characterIcon" class="side-icon-menu" />
@@ -121,7 +121,7 @@
             title="武器图鉴"
             value="wiki-weapon"
             :link="true"
-            href="/wiki/weapon"
+            href="/wiki/weapon/0"
           >
             <template #prepend>
               <img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" />

src/components/overlay/to-calendar.vue

@@ -26,20 +26,13 @@
           <v-btn variant="outlined" @click="toDetail(itemVal)">详情</v-btn>
         </div>
       </div>
-      <div class="close-div">
-        <div class="close-btn" @click="onCancel">
-          <v-icon>mdi-close</v-icon>
-        </div>
-      </div>
     </div>
   </TOverlay>
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
+import { useRouter } from "vue-router";
 
-import Mys from "../../plugins/Mys";
-import { createTGWindow } from "../../utils/TGWindow";
-import showSnackbar from "../func/snackbar";
 import TibCalendarItem from "../itembox/tib-calendar-item.vue";
 import TibCalendarMaterial from "../itembox/tib-calendar-material.vue";
 import TOverlay from "../main/t-overlay.vue";
@@ -52,12 +45,15 @@ interface ToCalendarProps {
 
 interface ToCalendarEmits {
   (e: "update:modelValue", value: boolean): void;
+
   (e: "cancel"): void;
 }
 
 const emits = defineEmits<ToCalendarEmits>();
 const props = defineProps<ToCalendarProps>();
 
+const router = useRouter();
+
 const visible = computed({
   get: () => props.modelValue,
   set: (value) => {
@@ -72,17 +68,12 @@ const onCancel = (): void => {
   emits("cancel");
 };
 
-function toDetail(item: TGApp.App.Calendar.Item): void {
-  if (item.contentId === 0) {
-    const itemType = item.itemType === "character" ? "角色" : "武器";
-    showSnackbar({
-      text: `[${itemType}] ${item.name} 暂无详情`,
-      color: "warn",
-    });
-    return;
+async function toDetail(item: TGApp.App.Calendar.Item): Promise<void> {
+  if (item.itemType === "character") {
+    await router.push(`/wiki/character/${item.id}`);
+  } else {
+    await router.push(`/wiki/weapon/${item.id}`);
   }
-  const url = Mys.Api.Obc.replace("{contentId}", item.contentId.toString());
-  createTGWindow(url, "Sub_window", `Content_${item.contentId} ${item.name}`, 1200, 800, true);
 }
 </script>
 <style scoped>
@@ -161,25 +152,4 @@ function toDetail(item: TGApp.App.Calendar.Item): void {
   font-family: var(--font-title);
   font-size: 20px;
 }
-
-.close-div {
-  display: flex;
-  width: 100%;
-  height: 60px;
-  align-items: center;
-  justify-content: center;
-}
-
-.close-btn {
-  display: flex;
-  width: 30px;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--common-shadow-2);
-  border-radius: 50%;
-  background: var(--app-page-bg);
-  color: var(--tgc-yellow-1);
-  cursor: pointer;
-}
 </style>

src/pages/WIKI/Character.vue

@@ -17,6 +17,7 @@
 </template>
 <script lang="ts" setup>
 import { onBeforeMount, ref } from "vue";
+import { useRoute } from "vue-router";
 
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
@@ -26,11 +27,29 @@ import { AppCharacterData } from "../../data";
 import Mys from "../../plugins/Mys";
 import { createTGWindow } from "../../utils/TGWindow";
 
+const id = useRoute().params.id.toString() ?? "0";
 const cardsInfo = AppCharacterData;
 const curItem = ref<TGApp.App.Character.WikiBriefInfo>();
 
 onBeforeMount(() => {
-  curItem.value = cardsInfo[0];
+  if (id === "0") {
+    curItem.value = cardsInfo[0];
+  } else {
+    const item = cardsInfo.find((item) => item.id.toString() === id);
+    if (item) {
+      curItem.value = item;
+      showSnackbar({
+        text: `成功获取角色 ${item.name} 的数据`,
+        color: "success",
+      });
+    } else {
+      showSnackbar({
+        text: `角色 ${id} 不存在`,
+        color: "warn",
+      });
+      curItem.value = cardsInfo[0];
+    }
+  }
 });
 
 async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
@@ -39,6 +58,10 @@ async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
     return;
   }
   curItem.value = item;
+  showSnackbar({
+    text: `成功获取角色 ${item.name} 的数据`,
+    color: "success",
+  });
 }
 
 async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void> {

src/pages/WIKI/Weapon.vue

@@ -18,6 +18,7 @@
 
 <script lang="ts" setup>
 import { onBeforeMount, ref } from "vue";
+import { useRoute } from "vue-router";
 
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
@@ -27,15 +28,37 @@ import { AppWeaponData } from "../../data";
 import Mys from "../../plugins/Mys";
 import { createTGWindow } from "../../utils/TGWindow";
 
+const id = useRoute().params.id.toString() ?? "0";
 const cardsInfo = AppWeaponData;
 const curItem = ref<TGApp.App.Weapon.WikiBriefInfo>();
 
 onBeforeMount(() => {
-  curItem.value = cardsInfo[0];
+  if (id === "0") {
+    curItem.value = cardsInfo[0];
+  } else {
+    const item = cardsInfo.find((item) => item.id.toString() === id);
+    if (item) {
+      curItem.value = item;
+      showSnackbar({
+        text: `成功获取武器 ${item.name} 的数据`,
+        color: "success",
+      });
+    } else {
+      showSnackbar({
+        text: `武器 ${id} 不存在`,
+        color: "warn",
+      });
+      curItem.value = cardsInfo[0];
+    }
+  }
 });
 
 async function switchW(item: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
   curItem.value = item;
+  showSnackbar({
+    text: `成功获取武器 ${item.name} 的数据`,
+    color: "success",
+  });
 }
 
 async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {

src/router/modules/wiki.ts

@@ -1,7 +1,7 @@
 /**
  * @file router/modules/wiki.ts
  * @description wiki 路由模块
- * @since Beta v0.3.9
+ * @since Beta v0.4.1
  */
 
 const wikiRoutes = [
@@ -11,7 +11,7 @@ const wikiRoutes = [
     component: async () => await import("../../pages/WIKI/Abyss.vue"),
   },
   {
-    path: "/wiki/character",
+    path: "/wiki/character/:id",
     name: "角色图鉴",
     component: async () => await import("../../pages/WIKI/Character.vue"),
   },
@@ -31,25 +31,15 @@ const wikiRoutes = [
     component: async () => await import("../../pages/WIKI/Material.vue"),
   },
   {
-    path: "/wiki/weapon",
+    path: "/wiki/weapon/:id",
     name: "武器图鉴",
     component: async () => await import("../../pages/WIKI/Weapon.vue"),
   },
-  {
-    path: "/wiki/detail/character/:id",
-    name: "角色详情",
-    component: async () => await import("../../views/tw-character.vue"),
-  },
   {
     path: "/wiki/detail/GCG/:id",
     name: "卡牌详情",
     component: async () => await import("../../views/tw-gcg.vue"),
   },
-  {
-    path: "/wiki/detail/weapon/:id",
-    name: "武器详情",
-    component: async () => await import("../../views/tw-weapon.vue"),
-  },
 ];
 
 export default wikiRoutes;

src/views/tw-character.vue

@@ -1,239 +0,0 @@
-<template>
-  <TSwitchTheme />
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" :subtitle="loadingSub" />
-  <div class="twc-box" v-if="data !== undefined">
-    <div class="twc-brief">
-      <TItembox :model-value="box" />
-      <div class="twc-brief-info">
-        <div class="twc-bi-top">
-          <span>{{ data.name }} {{ data.title }}</span>
-          <span>{{ data.description }}</span>
-        </div>
-        <div class="twc-bi-grid1">
-          <div class="twc-big-item">
-            <span>所属</span>
-            <span>{{ data.brief.camp }}</span>
-          </div>
-          <div class="twc-big-item">
-            <span>命之座</span>
-            <span>{{ data.brief.constellation }}</span>
-          </div>
-          <div class="twc-big-item">
-            <span>生日</span>
-            <span>{{ data.brief.birth }}</span>
-          </div>
-        </div>
-        <div class="twc-bi-grid2">
-          <div class="twc-big-item">
-            <span>汉语CV</span>
-            <span>{{ data.brief.cv.cn }}</span>
-          </div>
-          <div class="twc-big-item">
-            <span>日语CV</span>
-            <span>{{ data.brief.cv.jp }}</span>
-          </div>
-          <div class="twc-big-item">
-            <span>英语CV</span>
-            <span>{{ data.brief.cv.en }}</span>
-          </div>
-          <div class="twc-big-item">
-            <span>韩语CV</span>
-            <span>{{ data.brief.cv.kr }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <TwcMaterials :data="data.materials" />
-    <TwcSkills :data="data.skills" />
-    <TwcConstellations :data="data.constellation" />
-    <v-expansion-panels class="twc-text-item">
-      <v-expansion-panel>
-        <template #title><span class="twc-text-title">资料</span></template>
-        <template #text>
-          <v-expansion-panels variant="popout">
-            <v-expansion-panel
-              expand-icon="mdi-menu-down"
-              v-for="(item, index) in data?.talks"
-              :key="index"
-            >
-              <template #title
-                ><span class="twc-text-item-title">{{ item.Title }}</span></template
-              >
-              <template #text
-                ><span class="twc-text-item-content">{{ item.Context }}</span></template
-              >
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </template>
-      </v-expansion-panel>
-      <v-expansion-panel>
-        <template #title><span class="twc-text-title">故事</span></template>
-        <template #text>
-          <v-expansion-panels variant="popout">
-            <v-expansion-panel
-              expand-icon="mdi-menu-down"
-              v-for="(item, index) in data.stories"
-              :key="index"
-            >
-              <template #title
-                ><span class="twc-text-item-title">{{ item.Title }}</span></template
-              >
-              <template #text
-                ><span class="twc-text-item-content">{{ item.Context }}</span></template
-              >
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </template>
-      </v-expansion-panel>
-    </v-expansion-panels>
-  </div>
-</template>
-<script lang="ts" setup>
-import { appWindow } from "@tauri-apps/api/window";
-import { computed, onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-
-import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import showSnackbar from "../components/func/snackbar";
-import TItembox, { TItemBoxData } from "../components/main/t-itembox.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
-import TwcConstellations from "../components/wiki/twc-constellations.vue";
-import TwcMaterials from "../components/wiki/twc-materials.vue";
-import TwcSkills from "../components/wiki/twc-skills.vue";
-import { getWikiData } from "../data";
-
-// 路由数据
-const id = <string>useRoute().params.id;
-// 加载
-const loading = ref<boolean>(true);
-const loadingEmpty = ref<boolean>(false);
-const loadingTitle = ref<string>("正在加载");
-const loadingSub = ref<string>();
-
-// 数据
-const data = ref<TGApp.App.Character.WikiItem>();
-const box = computed(() => {
-  return <TItemBoxData>{
-    bg: `/icon/bg/${data.value?.star}-Star.webp`,
-    icon: `/WIKI/character/${data.value?.id}.webp`,
-    size: "128px",
-    height: "128px",
-    display: "inner",
-    lt: `/icon/element/${data.value?.element}元素.webp`,
-    ltSize: "40px",
-    innerHeight: 30,
-    innerIcon: `/icon/weapon/${data.value?.weapon}.webp`,
-    innerText: data.value?.name,
-    clickable: false,
-  };
-});
-
-onMounted(async () => {
-  await appWindow.show();
-  try {
-    const res = await getWikiData("Character", id);
-    if (res === undefined) return;
-    data.value = res.default;
-    await appWindow.setTitle(`Wiki_Character - ${data.value.name}`);
-    loading.value = false;
-  } catch (error) {
-    loadingEmpty.value = true;
-    if (error instanceof Error) {
-      loadingTitle.value = error.name;
-      loadingSub.value = error.message;
-    } else {
-      loadingTitle.value = "未知错误";
-      loadingSub.value = <string>error;
-    }
-    showSnackbar({
-      text: "Wiki 数据获取失败，即将关闭窗口",
-      color: "error",
-    });
-    setTimeout(() => {
-      appWindow.close();
-    }, 3000);
-  }
-});
-</script>
-<style lang="css" scoped>
-.twc-box {
-  display: flex;
-  width: 800px;
-  flex-direction: column;
-  margin: 0 auto;
-  row-gap: 10px;
-}
-
-.twc-brief {
-  display: flex;
-  align-items: flex-start;
-  column-gap: 10px;
-}
-
-.twc-brief-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.twc-bi-top {
-  display: flex;
-  flex-direction: column;
-}
-
-.twc-bi-top :nth-child(1) {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 20px;
-}
-
-.twc-bi-top :nth-child(2) {
-  display: flex;
-  align-items: flex-end;
-  font-size: 14px;
-  opacity: 0.8;
-}
-
-.twc-bi-grid1 {
-  display: grid;
-  column-gap: 10px;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.twc-bi-grid2 {
-  display: grid;
-  column-gap: 10px;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.twc-big-item {
-  display: flex;
-  column-gap: 5px;
-}
-
-.twc-big-item :nth-child(1) {
-  font-weight: bold;
-}
-
-.twc-text-title {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 18px;
-}
-
-.twc-text-item {
-  display: flex;
-  flex-direction: column;
-  row-gap: 5px;
-}
-
-.twc-text-item-title {
-  font-weight: bold;
-}
-
-.twc-text-item-content {
-  font-size: 14px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-</style>

src/views/tw-weapon.vue

@@ -1,171 +0,0 @@
-<template>
-  <TSwitchTheme />
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" :subtitle="loadingSub" />
-  <div class="tww-box" v-if="data !== undefined">
-    <div class="tww-brief">
-      <TItembox :model-value="box" />
-      <div class="tww-brief-info">
-        <div class="tww-brief-title">{{ data.name }}</div>
-        <v-rating
-          class="tww-brief-rating"
-          v-model="select"
-          :length="selectItems.length"
-          :size="24"
-          dense
-        />
-        <div class="tww-brief-desc">{{ data.description }}</div>
-      </div>
-    </div>
-    <TwcMaterials :data="data.materials" />
-    <v-expansion-panels class="tww-affix">
-      <v-expansion-panel expand-icon="mdi-menu-down">
-        <template #title>
-          <span class="tww-text-title">{{ data.affix.Name }}-精炼 {{ select }}</span>
-        </template>
-        <template #text>
-          <span
-            class="tww-text-content"
-            v-html="parseHtmlText(data.affix.Descriptions[select - 1].Description)"
-          />
-        </template>
-      </v-expansion-panel>
-    </v-expansion-panels>
-    <v-expansion-panels class="tww-story">
-      <v-expansion-panel
-        expand-icon="mdi-menu-down"
-        v-for="(story, index) in data.story"
-        :key="index"
-      >
-        <template #title>
-          <span class="tww-text-title">
-            {{ data.story.length > 1 ? `故事 ${index + 1}` : "故事" }}
-          </span>
-        </template>
-        <template #text>
-          <span class="tww-text-content">{{ parseHtmlText(story) }}</span>
-        </template>
-      </v-expansion-panel>
-    </v-expansion-panels>
-  </div>
-</template>
-<script lang="ts" setup>
-import { appWindow } from "@tauri-apps/api/window";
-import { computed, onMounted, ref, toRaw } from "vue";
-import { useRoute } from "vue-router";
-
-import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import showSnackbar from "../components/func/snackbar";
-import TItembox, { TItemBoxData } from "../components/main/t-itembox.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
-import TwcMaterials from "../components/wiki/twc-materials.vue";
-import { getWikiData } from "../data";
-import { parseHtmlText } from "../utils/toolFunc";
-
-// 路由数据
-const id = <string>useRoute().params.id;
-// 加载
-const loading = ref<boolean>(true);
-const loadingEmpty = ref<boolean>(false);
-const loadingTitle = ref<string>("正在加载");
-const loadingSub = ref<string>();
-
-// 数据
-const data = ref<TGApp.App.Weapon.WikiItem>();
-const box = computed(() => {
-  return <TItemBoxData>{
-    bg: `/icon/bg/${data.value?.star}-Star.webp`,
-    icon: `/WIKI/weapon/${data.value?.id}.webp`,
-    size: "128px",
-    height: "128px",
-    display: "inner",
-    lt: `/icon/weapon/${data.value?.weapon}.webp`,
-    ltSize: "40px",
-    innerHeight: 0,
-    clickable: false,
-  };
-});
-const select = ref<number>(1);
-const selectItems = ref<number[]>([]);
-
-onMounted(async () => {
-  await appWindow.show();
-  try {
-    const res = await getWikiData("Weapon", id);
-    if (res !== undefined) {
-      data.value = res.default;
-      console.log(toRaw(data.value));
-    }
-    selectItems.value = data.value?.affix.Descriptions.map((item) => item.Level) ?? [];
-    loading.value = false;
-  } catch (error) {
-    loadingEmpty.value = true;
-    if (error instanceof Error) {
-      loadingTitle.value = error.name;
-      loadingSub.value = error.message;
-    } else {
-      loadingTitle.value = "未知错误";
-      loadingSub.value = <string>error;
-    }
-    showSnackbar({
-      text: "Wiki 数据获取失败，即将关闭窗口",
-      color: "error",
-    });
-    setTimeout(() => {
-      appWindow.close();
-    }, 3000);
-  }
-});
-</script>
-<style lang="css" scoped>
-.tww-box {
-  display: flex;
-  width: 800px;
-  flex-direction: column;
-  margin: 0 auto;
-  row-gap: 10px;
-}
-
-.tww-brief {
-  display: flex;
-  align-items: flex-start;
-  column-gap: 10px;
-}
-
-.tww-brief-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.tww-brief-title {
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 20px;
-}
-
-.tww-brief-rating {
-  color: var(--common-text-title);
-}
-
-.tww-brief-desc {
-  display: flex;
-  align-items: flex-end;
-  opacity: 0.8;
-}
-
-.tww-story {
-  display: flex;
-  flex-direction: column;
-  row-gap: 5px;
-}
-
-.tww-text-title {
-  font-weight: bold;
-}
-
-.tww-text-content {
-  font-size: 14px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-</style>