✨ wiki 页添加子页面入口

src/components/itembox/tib-wiki-avatar.vue

@@ -1,43 +0,0 @@
-<template>
-  <TItemBox :model-value="box" />
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-
-import TItemBox, { type TItemBoxData } from "../main/t-itembox.vue";
-
-interface TibCalendarAvatarProps {
-  modelValue: TGApp.App.Character.WikiBriefInfo;
-}
-
-const props = defineProps<TibCalendarAvatarProps>();
-const box = computed<TItemBoxData>(() => {
-  if (props.modelValue.id === 10000005 || props.modelValue.id === 10000007) {
-    return {
-      bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
-      icon: `/WIKI/character/${props.modelValue.id}.webp`,
-      size: "128px",
-      height: "128px",
-      display: "inner",
-      lt: `/icon/weapon/${props.modelValue.weapon}.webp`,
-      ltSize: "40px",
-      innerHeight: 30,
-      innerText: props.modelValue.name,
-      clickable: true,
-    };
-  }
-  return {
-    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
-    icon: `/WIKI/character/${props.modelValue.id}.webp`,
-    size: "128px",
-    height: "128px",
-    display: "inner",
-    lt: `/icon/element/${props.modelValue.element}元素.webp`,
-    ltSize: "40px",
-    innerHeight: 30,
-    innerIcon: `/icon/weapon/${props.modelValue.weapon}.webp`,
-    innerText: props.modelValue.name,
-    clickable: true,
-  };
-});
-</script>

src/components/itembox/tib-wiki-weapon.vue

@@ -1,29 +0,0 @@
-<template>
-  <TItemBox :model-value="box" style="cursor: pointer" />
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-
-import TItemBox from "../main/t-itembox.vue";
-import type { TItemBoxData } from "../main/t-itembox.vue";
-
-interface TibCalendarWeaponProps {
-  modelValue: TGApp.App.Weapon.WikiBriefInfo;
-}
-
-const props = defineProps<TibCalendarWeaponProps>();
-const box = computed<TItemBoxData>(() => {
-  return {
-    bg: props.modelValue.bg,
-    icon: props.modelValue.icon,
-    clickable: true,
-    size: "128px",
-    height: "128px",
-    display: "inner",
-    lt: props.modelValue.weaponIcon,
-    ltSize: "40px",
-    innerText: props.modelValue.name,
-    innerHeight: 30,
-  };
-});
-</script>

src/pages/WIKI/Character.vue

@@ -1,40 +1,73 @@
 <template>
+  <!-- todo 排布优化  -->
   <div class="cards-grid">
     <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <TibWikiAvatar size="128px" :model-value="item" />
+      <TItemBox :model-value="getBox(item)" />
     </div>
-    <v-snackbar v-model="snackbar" timeout="1500" color="error"> 该角色暂无详情 </v-snackbar>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { computed } from "vue";
 
-import TibWikiAvatar from "../../components/itembox/tib-wiki-avatar.vue";
+import showConfirm from "../../components/func/confirm";
+import showSnackbar from "../../components/func/snackbar";
+import TItemBox, { TItemBoxData } from "../../components/main/t-itembox.vue";
 import { AppCharacterData } from "../../data";
 import Mys from "../../plugins/Mys";
-import { useAppStore } from "../../store/modules/app";
 import { createTGWindow, createWiki } from "../../utils/TGWindow";
 
-// snackbar
-const snackbar = ref(false);
-// data
 const cardsInfo = computed(() => AppCharacterData);
-const appStore = useAppStore();
 
-function toOuter(item: TGApp.App.Character.WikiBriefInfo): void {
+async function toOuter(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
-  // 如果是调试环境，打开 wiki 页面
+  const confirm = await showConfirm({
-  if (appStore.devMode) {
+    title: "是否打开 Wiki 页面？",
+    text: "取消则跳转至观测枢",
+  });
+  if (confirm === undefined) {
+    showSnackbar({
+      text: "已取消",
+      color: "cancel",
+    });
+    return;
+  }
+  if (confirm) {
     createWiki("Character", item.id.toString());
     return;
   }
   if (item.contentId === 0) {
-    snackbar.value = true;
+    showSnackbar({
+      text: "该角色暂无观测枢页面，将跳转至 Wiki 页面",
+      color: "warn",
+    });
+    setTimeout(() => {
+      createWiki("Character", item.id.toString());
+    }, 1000);
     return;
   }
   const url = Mys.Api.Obc.replace("{contentId}", item.contentId.toString());
   createTGWindow(url, "Sub_window", `Content_${item.contentId} ${item.name}`, 1200, 800, true);
 }
+
+function getBox(item: TGApp.App.Character.WikiBriefInfo): TItemBoxData {
+  let res: TItemBoxData = {
+    bg: `/icon/bg/${item.star}-Star.webp`,
+    icon: `/WIKI/character/${item.id}.webp`,
+    size: "128px",
+    height: "128px",
+    display: "inner",
+    lt: `/icon/weapon/${item.weapon}.webp`,
+    ltSize: "40px",
+    innerHeight: 30,
+    innerText: item.name,
+    clickable: true,
+  };
+  if (item.id !== 10000005 && item.id !== 10000007) {
+    res.lt = `/icon/element/${item.element}元素.webp`;
+    res.innerIcon = `/icon/weapon/${item.weapon}.webp`;
+  }
+  return res;
+}
 </script>
 <style scoped>
 .cards-grid {

src/pages/WIKI/Weapon.vue

@@ -1,40 +1,68 @@
 <template>
+  <!-- todo 排布优化  -->
   <div class="cards-grid">
     <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <TibWikiWeapon size="128px" :model-value="item" />
+      <TItemBox :model-value="getBox(item)" />
     </div>
-    <v-snackbar v-model="snackbar" timeout="1500" color="error"> 该武器暂无详情 </v-snackbar>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { computed } from "vue";
 
-import TibWikiWeapon from "../../components/itembox/tib-wiki-weapon.vue";
+import showConfirm from "../../components/func/confirm";
+import showSnackbar from "../../components/func/snackbar";
+import TItemBox, { TItemBoxData } from "../../components/main/t-itembox.vue";
 import { AppWeaponData } from "../../data";
 import Mys from "../../plugins/Mys";
-import { useAppStore } from "../../store/modules/app";
 import { createTGWindow, createWiki } from "../../utils/TGWindow";
 
-// snackbar
-const snackbar = ref<boolean>(false);
-// data
 const cardsInfo = computed(() => AppWeaponData);
-const appStore = useAppStore();
 
-function toOuter(item: TGApp.App.Weapon.WikiBriefInfo): void {
+async function toOuter(item: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
-  if (item.contentId === 0) {
+  const confirm = await showConfirm({
-    snackbar.value = true;
+    title: "是否打开 Wiki 页面？",
+    text: "取消则跳转至观测枢",
+  });
+  if (confirm === undefined) {
+    showSnackbar({
+      text: "已取消",
+      color: "cancel",
+    });
     return;
   }
-  // 如果是调试环境，打开 wiki 页面
+  if (confirm) {
-  if (appStore.devMode) {
     createWiki("Weapon", item.id.toString());
     return;
   }
+  if (item.contentId === 0) {
+    showSnackbar({
+      text: "该武器暂无观测枢页面，将跳转至 Wiki 页面",
+      color: "warn",
+    });
+    setTimeout(() => {
+      createWiki("Weapon", item.id.toString());
+    }, 1000);
+    return;
+  }
   const url = Mys.Api.Obc.replace("{contentId}", item.contentId.toString());
   createTGWindow(url, "Sub_window", `Content_${item.contentId} ${item.name}`, 1200, 800, true);
 }
+
+function getBox(item: TGApp.App.Weapon.WikiBriefInfo): TItemBoxData {
+  return {
+    bg: item.bg,
+    icon: item.icon,
+    clickable: true,
+    size: "128px",
+    height: "128px",
+    display: "inner",
+    lt: item.weaponIcon,
+    ltSize: "40px",
+    innerText: item.name,
+    innerHeight: 30,
+  };
+}
 </script>
 <style scoped>
 .cards-grid {