💄 调整样式

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

@@ -107,4 +107,13 @@ onMounted(async () => {
   border-radius: 5px;
   background: var(--box-bg-1);
 }
+
+/* stylelint-disable selector-class-pattern */
+
+:deep(.v-virtual-scroll__item + .v-virtual-scroll__item) {
+  border-top: 1px solid var(--common-shadow-1);
+  margin-top: 8px;
+}
+
+/* stylelint-enable selector-class-pattern */
 </style>

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

@@ -10,7 +10,9 @@
           <TibWikiAbyss
             v-for="(item, index) in selectItem.Ranks"
             :key="index"
-            :model-value="item"
+            :cur="item.cur.Rate"
+            :last="item.last.Rate"
+            :role="item.cur.Item"
           />
         </div>
         <div v-if="selectItem.Ranks.length === 0">暂无数据</div>
@@ -47,7 +49,7 @@ onMounted(async () => {
   select.value = tmpData;
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .hta-tu-box {
   display: flex;
   height: 100%;

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

@@ -10,7 +10,9 @@
           <TibWikiAbyss
             v-for="(item, index) in selectItem.Ranks"
             :key="index"
-            :model-value="item"
+            :cur="item.cur.Rate"
+            :last="item.last.Rate"
+            :role="item.cur.Item"
           />
         </div>
         <div v-if="selectItem.Ranks.length === 0">暂无数据</div>
@@ -47,7 +49,7 @@ onMounted(async () => {
   select.value = tempData;
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .hta-tus-box {
   display: flex;
   height: 100%;

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

@@ -56,22 +56,24 @@ function getBoxData(id: number): TItemBoxData {
   };
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .hta-tl-box {
   position: relative;
   display: flex;
   width: calc(100% - 20px);
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
-  border-radius: 5px;
-  margin: 10px;
-  background: var(--box-bg-2);
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
 .hta-tl-item {
   display: grid;
-  column-gap: 10px;
+  padding: 8px;
+  border-radius: 4px;
+  margin-left: 8px;
+  background: var(--box-bg-2);
+  column-gap: 8px;
   grid-template-columns: repeat(4, 1fr);
 }
 

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

@@ -1,14 +1,16 @@
+<!-- 单角色使用率/上场率 -->
 <template>
   <div class="twa-container">
     <TItemBox :model-value="box" />
-    <div class="twa-diff">
+    <div class="twa-info">
       <span>{{ avatar?.name ?? "旅行者" }}</span>
-      <span>{{ `${(props.modelValue.cur.Rate * 100).toFixed(3)}%` }}</span>
+      <span>{{ `${(props.cur * 100).toFixed(3)}%` }}</span>
       <span
         :class="{
-          up: props.modelValue.cur.Rate > props.modelValue.last.Rate,
-          down: props.modelValue.cur.Rate < props.modelValue.last.Rate,
+          up: props.cur > props.last,
+          down: props.cur < props.last,
         }"
+        :title="`${(props.last * 100).toFixed(3)}%`"
       >
         {{ getDiffStr() }}
       </span>
@@ -20,9 +22,15 @@ import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 import { computed, onMounted, shallowRef } from "vue";
 
 import { AppCharacterData } from "@/data/index.js";
-import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
 
-type TibWikiAbyssProps = { modelValue: AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate> };
+type TibWikiAbyssProps = {
+  /** 角色ID */
+  role: number;
+  /** 当前数据 */
+  cur: number;
+  /** 上一期数据 */
+  last: number;
+};
 
 const props = defineProps<TibWikiAbyssProps>();
 const avatar = shallowRef<TGApp.App.Character.WikiBriefInfo>();
@@ -46,30 +54,29 @@ const box = computed<TItemBoxData>(() => ({
 }));
 
 onMounted(() => {
-  if ([10000005, 10000007].includes(props.modelValue.cur.Item)) {
+  if ([10000005, 10000007].includes(props.role)) {
     avatar.value = {
       area: "",
       birthday: [0, 0],
       contentId: 0,
       costumes: [],
       element: "",
-      id: props.modelValue.cur.Item,
-      name: props.modelValue.cur.Item === 10000005 ? "空" : "荧",
+      id: props.role,
+      name: props.role === 10000005 ? "空" : "荧",
       nameCard: "",
       release: "",
       star: 5,
       title: "",
       weapon: "单手剑",
     };
-  } else avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.cur.Item);
+  } else avatar.value = AppCharacterData.find((a) => a.id === props.role);
 });
 
 function getDiffStr(): string {
-  if (props.modelValue.cur.Rate === props.modelValue.last.Rate) return "";
-  if (props.modelValue.last.Rate > props.modelValue.cur.Rate) {
-    return `↓${((props.modelValue.last.Rate - props.modelValue.cur.Rate) * 100).toFixed(3)}%`;
-  }
-  return `↑${((props.modelValue.cur.Rate - props.modelValue.last.Rate) * 100).toFixed(3)}%`;
+  const diff = (Math.abs(props.cur - props.last) * 100).toFixed(3);
+  if (props.cur === props.last) return `-${diff}%`;
+  if (props.last > props.cur) return `↓${diff}%`;
+  return `↑${diff}%`;
 }
 </script>
 <style lang="css" scoped>
@@ -84,12 +91,12 @@ function getDiffStr(): string {
   column-gap: 5px;
 }
 
-.twa-diff {
+.twa-info {
   display: flex;
   height: 100%;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: space-between;
+  justify-content: flex-start;
   color: var(--box-text-4);
   font-size: 12px;
 
@@ -97,15 +104,18 @@ function getDiffStr(): string {
     font-family: var(--font-title);
     font-size: 15px;
   }
-}
 
-.twa-diff .up {
-  color: var(--tgc-od-red);
-  font-family: var(--font-title);
-}
+  :last-child {
+    color: var(--tgc-od-blue);
+    font-family: var(--font-title);
 
-.twa-diff .down {
-  color: var(--tgc-od-green);
-  font-family: var(--font-title);
+    &.up {
+      color: var(--tgc-od-red);
+    }
+
+    &.down {
+      color: var(--tgc-od-green);
+    }
+  }
 }
 </style>

src/pages/WIKI/Abyss.vue

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