🌱 基本完成角色使用率页面，1/4

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

@@ -1,11 +1,83 @@
 <template>
-  {{ props.modelValue }}
+  <div class="hta-tu-box">
+    <v-tabs v-model="tab" align-tabs="start" direction="vertical" class="hta-tu-tab">
+      <v-tab value="9">第09层</v-tab>
+      <v-tab value="10">第10层</v-tab>
+      <v-tab value="11">第11层</v-tab>
+      <v-tab value="12">第12层</v-tab>
+    </v-tabs>
+    <v-window v-model="tab" class="hta-tu-window">
+      <v-window-item :value="tab">
+        <div v-if="select" class="hta-tu-grid">
+          <TibWikiAbyss v-for="item in select.ranks" :key="item.item" :model-value="item" />
+        </div>
+      </v-window-item>
+    </v-window>
+  </div>
 </template>
 <script lang="ts" setup>
+// vue
+import { onMounted, ref, watch } from "vue";
+import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
+
 interface HtaTabUseProps {
   modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUse[];
-  data: TGApp.Sqlite.Character.AppData[];
 }
 
 const props = defineProps<HtaTabUseProps>();
+
+// data
+const tab = ref<string>("9");
+const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse>();
+
+function loadData() {
+  select.value = props.modelValue.filter((item) => item.floor.toString() === tab.value)?.[0];
+  select.value?.ranks.sort((a, b) => b.rate - a.rate);
+}
+
+onMounted(async () => {
+  loadData();
+});
+
+// 监听 tab 变化
+watch(tab, () => {
+  loadData();
+});
 </script>
+<style lang="css" scoped>
+.hta-tu-box {
+  display: flex;
+  margin: 5px;
+  width: calc(100% - 10px);
+  height: 100%;
+  align-items: center;
+  justify-content: left;
+  border: 1px inset var(--common-bg-1);
+  border-radius: 5px;
+}
+
+.hta-tu-tab {
+  width: 100px;
+  height: 100%;
+  color: var(--common-text-title);
+  font-family: var(--font-text);
+}
+
+.hta-tu-window {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.hta-tu-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  grid-gap: 5px;
+  padding: 5px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <TItemBox :model-value="box" />
+</template>
+<script setup lang="ts">
+// vue
+import { ref, onMounted, computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+// plugins
+import TGSqlite from "../../plugins/Sqlite";
+
+interface TibWikiAbyssProps {
+  modelValue: {
+    item: number;
+    rate: number;
+  };
+}
+
+const props = defineProps<TibWikiAbyssProps>();
+const defaultAvatar = <TGApp.Sqlite.Character.AppData>{
+  birthday: "",
+  element: "",
+  id: props.modelValue.item,
+  name: "旅行者",
+  nameCard: "",
+  star: 5,
+  title: "",
+  updated: "",
+  weapon: "单手剑",
+};
+const avatar = ref<TGApp.Sqlite.Character.AppData>(defaultAvatar);
+
+const box = computed<TItemBoxData>(() => {
+  return {
+    bg: `/icon/bg/${avatar.value?.star}-Star.webp`,
+    clickable: false,
+    display: "outer",
+    height: "100px",
+    icon: `/WIKI/character/icon/${avatar.value?.id}.webp`,
+    innerHeight: 20,
+    // 0.24688451 => 24.688%
+    innerText: (props.modelValue.rate * 100).toFixed(3) + "%",
+    lt:
+      avatar.value.element !== ""
+        ? `/icon/element/${avatar.value.element}元素.webp`
+        : `/icon/weapon/${avatar.value.weapon}.webp`,
+    ltSize: "30px",
+    outerHeight: 20,
+    outerText: avatar.value.name,
+    size: "80px",
+  };
+});
+
+onMounted(async () => {
+  // 如果是 10000005或 10000007，就是主角
+  if (props.modelValue.item === 10000005 || props.modelValue.item === 10000007) {
+    return;
+  }
+  avatar.value = await TGSqlite.getAppCharacter(props.modelValue.item);
+});
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <TItemBox :model-value="box" style="cursor: pointer" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
 // vue
@@ -11,7 +11,7 @@ interface TibCalendarAvatarProps {
 }
 
 const props = defineProps<TibCalendarAvatarProps>();
-const box = computed(() => {
+const box = computed<TItemBoxData>(() => {
   return {
     bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
     icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
@@ -23,6 +23,7 @@ const box = computed(() => {
     innerHeight: 30,
     innerIcon: `/icon/weapon/${props.modelValue.weapon}.webp`,
     innerText: props.modelValue.name,
-  } as TItemBoxData;
+    clickable: true,
+  };
 });
 </script>