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

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>