🚸 处理特殊数据&优化交互

src/components/hutaoAbyss/hta-tab-hold.vue

@@ -1,5 +1,6 @@
+<!-- 角色持有率表格 -->
 <template>
-  <v-data-table :headers="headers" fixed-header :items="holdData" height="calc(100vh - 160px)">
+  <v-data-table :headers="headers" :items="holdData" fixed-header height="calc(100vh - 160px)">
     <template v-slot:item="{ item }">
       <tr class="hta-th-tr">
         <td class="hta-th-icon">
@@ -37,6 +38,7 @@
 <script lang="ts" setup>
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 import { onMounted, shallowRef } from "vue";
+import { DataTableHeader } from "vuetify/lib/components/VDataTable/types.js";
 
 import { AppCharacterData } from "@/data/index.js";
 import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
@@ -51,18 +53,65 @@ type HtaTabHoldData = {
 
 const props = defineProps<HtaTabHoldProps>();
 const holdData = shallowRef<Array<HtaTabHoldData>>([]);
-
-const headers = <const>[
-  { title: "角色", align: "center", key: "AvatarId" },
-  { title: "持有", align: "center", key: "HoldingRate.cur" },
-  { title: "0命", align: "center", key: "Constellations[0].RateCur" },
-  { title: "1命", align: "center", key: "Constellations[1].RateCur" },
-  { title: "2命", align: "center", key: "Constellations[2].RateCur" },
-  { title: "3命", align: "center", key: "Constellations[3].RateCur" },
-  { title: "4命", align: "center", key: "Constellations[4].RateCur" },
-  { title: "5命", align: "center", key: "Constellations[5].RateCur" },
-  { title: "6命", align: "center", key: "Constellations[6].RateCur" },
-];
+const headers = shallowRef<Array<DataTableHeader>>([
+  { title: "角色", align: "center", key: "role", sortable: true, value: (v) => v.AvatarId },
+  {
+    title: "持有",
+    align: "center",
+    key: "hold",
+    sortable: true,
+    value: (v) => v.HoldingRate.cur,
+  },
+  {
+    title: "0命",
+    align: "center",
+    key: "const0",
+    sortable: true,
+    value: (v) => v.Constellations[0].RateCur,
+  },
+  {
+    title: "1命",
+    align: "center",
+    key: "const1",
+    sortable: true,
+    value: (v) => v.Constellations[1].RateCur,
+  },
+  {
+    title: "2命",
+    align: "center",
+    key: "const2",
+    sortable: true,
+    value: (v) => v.Constellations[2].RateCur,
+  },
+  {
+    title: "3命",
+    align: "center",
+    key: "const3",
+    sortable: true,
+    value: (v) => v.Constellations[3].RateCur,
+  },
+  {
+    title: "4命",
+    align: "center",
+    key: "const4",
+    sortable: true,
+    value: (v) => v.Constellations[4].RateCur,
+  },
+  {
+    title: "5命",
+    align: "center",
+    key: "const5",
+    sortable: true,
+    value: (v) => v.Constellations[5].RateCur,
+  },
+  {
+    title: "6命",
+    align: "center",
+    key: "const6",
+    sortable: true,
+    value: (v) => v.Constellations[6].RateCur,
+  },
+]);
 
 onMounted(() => {
   const tmpData: Array<HtaTabHoldData> = [];
@@ -96,6 +145,21 @@ function getRateStr(cur: number, last: number): string {
 }
 
 function getBoxData(id: number): TItemBoxData {
+  if ([10000005, 10000007].includes(id)) {
+    return {
+      bg: `/icon/bg/5-Star.webp`,
+      clickable: false,
+      display: "inner",
+      height: "80px",
+      icon: `/WIKI/character/${id}.webp`,
+      innerHeight: 20,
+      innerText: id === 10000005 ? "空" : "荧",
+      lt: `/icon/weapon/单手剑.webp`,
+      ltSize: "20px",
+      size: "80px",
+      innerBlur: "5px",
+    };
+  }
   const avatar = AppCharacterData.find((a) => a.id === id);
   return {
     bg: `/icon/bg/${avatar?.star ?? 5}-Star.webp`,
@@ -113,7 +177,8 @@ function getBoxData(id: number): TItemBoxData {
           : `/icon/weapon/${avatar.weapon}.webp`,
     ltSize: "20px",
     size: "80px",
-    innerIcon: `/icon/weapon/${avatar?.weapon ?? "单手剑"}.webp`,
+    innerIcon:
+      avatar?.element === "" ? undefined : `/icon/weapon/${avatar?.weapon ?? "单手剑"}.webp`,
     innerBlur: "5px",
   };
 }
@@ -125,6 +190,8 @@ function getBoxData(id: number): TItemBoxData {
 }
 
 .hta-th-icon {
+  position: relative;
+  z-index: 0;
   width: 100px;
 }
 

src/components/hutaoAbyss/hta-team-line.vue

@@ -4,7 +4,7 @@
       <TItemBox
         v-for="item in props.modelValue.Item.split(',')"
         :key="item"
-        :model-value="getBoxData(item)"
+        :model-value="getBoxData(Number(item))"
       />
     </div>
     <div class="hta-tl-rate">上场{{ props.modelValue.Rate }}次</div>
@@ -18,8 +18,23 @@ import { AppCharacterData } from "@/data/index.js";
 type HtaTeamLineProps = { modelValue: { Item: string; Rate: number } };
 const props = defineProps<HtaTeamLineProps>();
 
-function getBoxData(id: string): TItemBoxData {
-  const avatar = AppCharacterData.find((i) => i.id.toString() === id);
+function getBoxData(id: number): TItemBoxData {
+  if ([10000005, 10000007].includes(id)) {
+    return {
+      bg: `/icon/bg/5-Star.webp`,
+      clickable: false,
+      display: "inner",
+      height: "80px",
+      icon: `/WIKI/character/${id}.webp`,
+      innerHeight: 20,
+      innerText: id === 10000005 ? "空" : "荧",
+      lt: `/icon/weapon/单手剑.webp`,
+      ltSize: "20px",
+      size: "80px",
+      innerBlur: "5px",
+    };
+  }
+  const avatar = AppCharacterData.find((i) => i.id === id);
   return {
     bg: `/icon/bg/${avatar?.star ?? 5}-Star.webp`,
     clickable: false,

src/components/hutaoAbyss/tib-wiki-abyss.vue

@@ -15,7 +15,7 @@
     </div>
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 import { computed, onMounted, shallowRef } from "vue";
 
@@ -45,7 +45,24 @@ const box = computed<TItemBoxData>(() => ({
   height: "60px",
 }));
 
-onMounted(() => (avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.cur.Item)));
+onMounted(() => {
+  if ([10000005, 10000007].includes(props.modelValue.cur.Item)) {
+    avatar.value = {
+      area: "",
+      birthday: [0, 0],
+      contentId: 0,
+      costumes: [],
+      element: "",
+      id: props.modelValue.cur.Item,
+      name: props.modelValue.cur.Item === 10000005 ? "空" : "荧",
+      nameCard: "",
+      release: "",
+      star: 5,
+      title: "",
+      weapon: "单手剑",
+    };
+  } else avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.cur.Item);
+});
 
 function getDiffStr(): string {
   if (props.modelValue.cur.Rate === props.modelValue.last.Rate) return "";

src/components/pageWiki/pw-material-item.vue

@@ -22,7 +22,7 @@ const idColor = computed<string>(() => getOdStarColor(props.material.star));
 @use "@styles/github.styles.scss" as github-styles;
 
 /* stylelint-disable value-keyword-case */
-$pw-mi-base: v-bind(idColor);
+$pw-mi-base: v-bind(idcolor);
 /* stylelint-enable */
 
 .pw-mi-box {
@@ -37,6 +37,7 @@ $pw-mi-base: v-bind(idColor);
   border-radius: 4px;
   background: color-mix(in srgb, $pw-mi-base 15%, transparent);
   column-gap: 4px;
+  cursor: pointer;
 }
 
 .pw-mi-left {

src/components/pageWiki/twc-list-item.vue

@@ -1,6 +1,6 @@
 <!-- 角色/武器WIKI侧边栏项 -->
 <template>
-  <div :class="{ selected: props.curItem.id === props.data.id }" class="twc-li-box">
+  <div :class="props.curItem.id === props.data.id ? 'selected' : ''" class="twc-li-box">
     <div class="twc-li-left">
       <img :src="`/icon/bg/${props.data.star}-Star.webp`" alt="bg" class="bg" />
       <img :src="`/WIKI/${props.mode}/${props.data.id}.webp`" alt="icon" class="icon" />
@@ -13,7 +13,7 @@
       {{ props.data.id }}
     </div>
     <div class="twc-li-icons">
-      <template v-if="props.mode === 'character'">
+      <template v-if="props.mode === 'character' && props.data.element !== ''">
         <img
           :src="`/icon/element/${props.data.element}元素.webp`"
           :title="`${props.data.element}元素`"

src/pages/WIKI/Abyss.vue

@@ -1,4 +1,4 @@
-<!-- 胡桃云统计数据 -->
+<!-- 胡桃云统计数据 TODO: 角色持有优化&旅行者处理 -->
 <template>
   <v-app-bar>
     <template #prepend>