🌱 基本完成角色使用率页面，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>

src/pages/WIKI/Abyss.vue

@@ -13,18 +13,18 @@
         <span @click="showDialog = true">更新于 {{ getUpdated() }}</span>
       </div>
     </div>
-    <v-window v-model="tab">
+    <v-window v-model="tab" class="hta-tab-item">
       <v-window-item value="use">
-        <HtaTabUse v-model="avatarUse" :data="avatarData" />
+        <HtaTabUse v-if="avatarUse.length > 0" v-model="avatarUse" />
       </v-window-item>
       <v-window-item value="up">
-        <HtaTabUp v-model="avatarUp" :data="avatarData" />
+        <HtaTabUp v-model="avatarUp" />
       </v-window-item>
       <v-window-item value="team">
-        <HtaTabTeam v-model="teamCombination" :data="avatarData" />
+        <HtaTabTeam v-model="teamCombination" />
       </v-window-item>
       <v-window-item value="hold">
-        <HtaTabHold v-model="avatarHold" :data="avatarData" />
+        <HtaTabHold v-model="avatarHold" />
       </v-window-item>
     </v-window>
   </div>
@@ -41,7 +41,6 @@ import HtaTabTeam from "../../components/hutaoAbyss/hta-tab-team.vue";
 import HtaTabHold from "../../components/hutaoAbyss/hta-tab-hold.vue";
 // plugins
 import Hutao from "../../plugins/Hutao";
-import TGSqlite from "../../plugins/Sqlite";
 
 // loading
 const loading = ref<boolean>(false);
@@ -52,14 +51,13 @@ const showDialog = ref<boolean>(false);
 
 // data
 const overview = ref<TGApp.Plugins.Hutao.Abyss.OverviewData>(
-  {} as TGApp.Plugins.Hutao.Abyss.OverviewData,
+  <TGApp.Plugins.Hutao.Abyss.OverviewData>{},
 );
 const tab = ref<string>("use");
 const avatarUse = ref<Array<TGApp.Plugins.Hutao.Abyss.AvatarUse>>([]);
 const avatarUp = ref<Array<TGApp.Plugins.Hutao.Abyss.AvatarUp>>([]);
 const teamCombination = ref<Array<TGApp.Plugins.Hutao.Abyss.TeamCombination>>([]);
 const avatarHold = ref<Array<TGApp.Plugins.Hutao.Abyss.AvatarHold>>([]);
-const avatarData = ref<Array<TGApp.Sqlite.Character.AppData>>([]);
 
 onMounted(async () => {
   loadingTitle.value = "正在获取深渊数据";
@@ -74,8 +72,6 @@ onMounted(async () => {
   teamCombination.value = await Hutao.Abyss.getTeamCollect();
   loadingTitle.value = "正在获取深渊角色持有";
   avatarHold.value = await Hutao.Abyss.avatar.getHoldRate();
-  loadingTitle.value = "正在获取角色数据";
-  avatarData.value = await TGSqlite.getAllAppCharacter();
   loading.value = false;
 });
 
@@ -106,6 +102,7 @@ function getUpdated() {
 
 .hta-tab {
   margin-bottom: 10px;
+  height: 50px;
 }
 
 .hta-title {
@@ -124,4 +121,9 @@ function getUpdated() {
   cursor: pointer;
   text-decoration: underline;
 }
+
+.hta-tab-item {
+  width: 100%;
+  height: calc(100% - 60px);
+}
 </style>

src/plugins/Sqlite/index.ts

@@ -416,19 +416,6 @@ class Sqlite {
     return res[0];
   }
 
-  /**
-   * @description 获取所有角色数据
-   * @since Alpha v0.2.1
-   * @returns {Promise<TGApp.Sqlite.Character.AppData[]>} 角色数据
-   */
-  public async getAllAppCharacter(): Promise<TGApp.Sqlite.Character.AppData[]> {
-    const db = await Database.load(this.dbPath);
-    const sql = "SELECT * FROM AppCharacters";
-    const res: TGApp.Sqlite.Character.AppData[] = await db.select(sql);
-    await db.close();
-    return res;
-  }
-
   /**
    * @description 保存用户角色数据
    * @since Alpha v0.2.0