♻️ 角色 wiki 与武器 wiki 样式重构

src/components/wiki/twc-character.vue

@@ -0,0 +1,237 @@
+<template>
+  <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 setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+import TwcConstellations from "./twc-constellations.vue";
+import TwcMaterials from "./twc-materials.vue";
+import TwcSkills from "./twc-skills.vue";
+import { getWikiData } from "../../data";
+import showSnackbar from "../func/snackbar";
+import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TwcCharacterProps {
+  item: TGApp.App.Character.WikiBriefInfo;
+}
+
+interface TwcCharacterEmits {
+  error: (err: Error) => void;
+}
+
+const props = defineProps<TwcCharacterProps>();
+const emits = defineEmits<TwcCharacterEmits>();
+
+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,
+  };
+});
+
+async function loadData(): Promise<void> {
+  try {
+    const res = await getWikiData("Character", props.item.id);
+    if (res === undefined) return;
+    data.value = res.default;
+    showSnackbar({
+      text: `成功获取角色 ${props.item.name} 的 Wiki 数据`,
+      color: "success",
+    });
+  } catch (error) {
+    showSnackbar({
+      text: `未获取到角色 ${props.item.name} 的 Wiki 数据`,
+      color: "error",
+    });
+    console.error(error);
+    emits("error", error);
+  }
+}
+
+watch(
+  () => props.item,
+  async () => {
+    await loadData();
+  },
+);
+
+onMounted(async () => {
+  await loadData();
+});
+</script>
+<style lang="css" scoped>
+.twc-box {
+  display: flex;
+  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/components/wiki/twc-list-item.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="twc-li-box">
+    <div class="twc-li-left">
+      <img class="twc-li-bg" :src="getBg()" alt="bg" />
+      <img class="twc-li-icon" :src="getIcon()" alt="icon" />
+    </div>
+    <div class="twc-li-right" :title="props.data.name">{{ props.data.name }}</div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+type TwcListItemProps =
+  | {
+      mode: "character";
+      data: TGApp.App.Character.WikiBriefInfo;
+      curItem: TGApp.App.Character.WikiBriefInfo;
+    }
+  | {
+      mode: "weapon";
+      data: TGApp.App.Weapon.WikiBriefInfo;
+      curItem: TGApp.App.Weapon.WikiBriefInfo;
+    };
+
+const props = defineProps<TwcListItemProps>();
+const isSelected = computed(() => {
+  return props.data.id === props.curItem.id;
+});
+const bgColor = computed(() => {
+  return isSelected.value ? "var(--box-bg-2)" : "var(--box-bg-1)";
+});
+
+function getBg(): string {
+  return `/icon/bg/${props.data.star}-Star.webp`;
+}
+
+function getIcon(): string {
+  if (props.mode === "character") {
+    return `/WIKI/character/${props.data.id}.webp`;
+  } else {
+    return `/WIKI/weapon/${props.data.id}.webp`;
+  }
+}
+</script>
+<style lang="css" scoped>
+.twc-li-box {
+  position: relative;
+  display: flex;
+  height: 45px;
+  align-items: center;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  background: v-bind(bgColor);
+  gap: 10px;
+}
+
+.twc-li-left {
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.twc-li-bg,
+.twc-li-icon {
+  position: absolute;
+  top: 0;
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.twc-li-bg img,
+.twc-li-icon img {
+  width: 100%;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  object-fit: cover;
+}
+
+.twc-li-right {
+  overflow: hidden;
+  color: var(--app-page-content);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/wiki/twc-weapon.vue

@@ -0,0 +1,163 @@
+<template>
+  <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 { computed, onMounted, ref, watch } from "vue";
+
+import TwcMaterials from "./twc-materials.vue";
+import { getWikiData } from "../../data";
+import { parseHtmlText } from "../../utils/toolFunc";
+import showSnackbar from "../func/snackbar";
+import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TwcWeaponProps {
+  item: TGApp.App.Weapon.WikiBriefInfo;
+}
+
+interface TwcWeaponEmits {
+  error: (err: Error) => void;
+}
+
+const props = defineProps<TwcWeaponProps>();
+const emits = defineEmits<TwcWeaponEmits>();
+
+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[]>([]);
+
+async function loadData(): Promise<void> {
+  try {
+    const res = await getWikiData("Weapon", props.item.id);
+    if (res === undefined) return;
+    data.value = res.default;
+    selectItems.value = data.value?.affix.Descriptions.map((item) => item.Level) ?? [];
+  } catch (error) {
+    showSnackbar({
+      text: `未获取到武器 ${props.item.name} 的 Wiki 数据`,
+      color: "error",
+    });
+    emits("error", error);
+  }
+}
+
+watch(
+  () => props.item,
+  async () => {
+    await loadData();
+  },
+);
+
+onMounted(async () => {
+  await loadData();
+});
+</script>
+<style lang="css" scoped>
+.tww-box {
+  display: flex;
+  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>

src/pages/WIKI/Character.vue

@@ -1,79 +1,94 @@
 <template>
-  <!-- todo 排布优化  -->
-  <div class="cards-grid">
-    <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <TItemBox :model-value="getBox(item)" />
+  <div class="wc-box">
+    <div class="wc-list">
+      <TwcListItem
+        v-for="item in cardsInfo"
+        v-model:cur-item="curItem"
+        :key="item.id"
+        :data="item"
+        @click="switchC(item)"
+        mode="character"
+      />
+    </div>
+    <div class="wc-detail">
+      <TwcCharacter :item="curItem" @error="toOuter(curItem)" />
     </div>
   </div>
 </template>
-
 <script lang="ts" setup>
-import { computed } from "vue";
+import { onBeforeMount, ref } from "vue";
 
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
-import TItemBox, { TItemBoxData } from "../../components/main/t-itembox.vue";
+import TwcCharacter from "../../components/wiki/twc-character.vue";
+import TwcListItem from "../../components/wiki/twc-list-item.vue";
 import { AppCharacterData } from "../../data";
 import Mys from "../../plugins/Mys";
-import { createTGWindow, createWiki } from "../../utils/TGWindow";
+import { createTGWindow } from "../../utils/TGWindow";
 
-const cardsInfo = computed(() => AppCharacterData);
+const cardsInfo = AppCharacterData;
+const curItem = ref<TGApp.App.Character.WikiBriefInfo>();
 
-async function toOuter(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
+onBeforeMount(() => {
+  curItem.value = cardsInfo[0];
+});
+
+async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
+  if (item.id === 10000005 || item.id === 10000007) {
+    await toOuter(item);
+    return;
+  }
+  curItem.value = item;
+}
+
+async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void> {
+  if (!item) return;
+  if (item.contentId === 0) {
+    showSnackbar({
+      text: `角色 ${item.name} 暂无观测枢页面`,
+      color: "warn",
+    });
+    return;
+  }
   const confirm = await showConfirm({
-    title: "是否打开 Wiki 页面？",
-    text: "取消则跳转至观测枢",
+    title: `角色 ${item.name} 暂无数据`,
+    text: "是否打开观测枢页面？",
   });
-  if (confirm === undefined) {
+  if (!confirm) {
     showSnackbar({
       text: "已取消",
       color: "cancel",
     });
     return;
   }
-  if (confirm) {
-    createWiki("Character", item.id.toString());
-    return;
-  }
-  if (item.contentId === 0) {
-    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 {
+.wc-box {
+  position: relative;
+  display: flex;
+  max-height: calc(100vh - 40px);
+  column-gap: 10px;
+}
+
+.wc-list {
   display: grid;
-  padding: 20px;
-  grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  width: 500px;
+  max-height: 100%;
+  padding-right: 10px;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+  overflow-y: auto;
+}
+
+.wc-detail {
+  max-height: 100%;
+  flex: 1;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px var(--common-shadow-2);
+  overflow-y: auto;
 }
 </style>

src/pages/WIKI/Weapon.vue

@@ -1,74 +1,91 @@
 <template>
-  <!-- todo 排布优化  -->
-  <div class="cards-grid">
-    <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <TItemBox :model-value="getBox(item)" />
+  <div class="ww-box">
+    <div class="ww-list">
+      <TwcListItem
+        v-for="item in cardsInfo"
+        v-model:cur-item="curItem"
+        :key="item.id"
+        :data="item"
+        @click="switchW(item)"
+        mode="weapon"
+      />
+    </div>
+    <div class="ww-detail">
+      <TwcWeapon :item="curItem" @error="toOuter(curItem)" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { onBeforeMount, ref } from "vue";
 
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
-import TItemBox, { TItemBoxData } from "../../components/main/t-itembox.vue";
+import TwcListItem from "../../components/wiki/twc-list-item.vue";
+import TwcWeapon from "../../components/wiki/twc-weapon.vue";
 import { AppWeaponData } from "../../data";
 import Mys from "../../plugins/Mys";
-import { createTGWindow, createWiki } from "../../utils/TGWindow";
+import { createTGWindow } from "../../utils/TGWindow";
 
-const cardsInfo = computed(() => AppWeaponData);
+const cardsInfo = AppWeaponData;
+const curItem = ref<TGApp.App.Weapon.WikiBriefInfo>();
 
-async function toOuter(item: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
+onBeforeMount(() => {
+  curItem.value = cardsInfo[0];
+});
+
+async function switchW(item: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
+  curItem.value = item;
+}
+
+async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
+  if (!item) return;
+  if (item.contentId === 0) {
+    showSnackbar({
+      text: `武器 ${item.name} 暂无观测枢页面`,
+      color: "warn",
+    });
+    return;
+  }
   const confirm = await showConfirm({
-    title: "是否打开 Wiki 页面？",
-    text: "取消则跳转至观测枢",
+    title: `武器 ${item.name} 暂无数据`,
+    text: "是否打开观测枢页面？",
   });
-  if (confirm === undefined) {
+  if (!confirm) {
     showSnackbar({
       text: "已取消",
       color: "cancel",
     });
     return;
   }
-  if (confirm) {
-    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 {
+.ww-box {
+  position: relative;
+  display: flex;
+  max-height: calc(100vh - 40px);
+  column-gap: 10px;
+}
+
+.ww-list {
   display: grid;
-  padding: 15px;
-  grid-gap: 15px;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  width: 500px;
+  max-height: 100%;
+  padding-right: 10px;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+  overflow-y: auto;
+}
+
+.ww-detail {
+  max-height: 100%;
+  flex: 1;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px var(--common-shadow-2);
+  overflow-y: auto;
 }
 </style>