✨ 完成深渊数据渲染

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

@@ -0,0 +1,30 @@
+<template>
+  <TItemBox :data="character as Record<string,string|number>" size="70px" display="inner" model-value="abyss-detail" />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import TItemBox from "../main/t-itembox.vue";
+// utils
+import TGSqlite from "../../plugins/Sqlite";
+
+interface TibAbyssDetailProps {
+  modelValue: TGApp.Sqlite.Abyss.CharacterInfo
+}
+
+export interface TibAbyssDetailAvatar extends TGApp.Sqlite.Character.AppData {
+  value: number,
+}
+
+const props = defineProps<TibAbyssDetailProps>();
+
+const character = ref({} as TibAbyssDetailAvatar);
+
+onMounted(async () => {
+  const res = await TGSqlite.getAppCharacter(props.modelValue.id);
+  character.value = {
+    ...res,
+    value: props.modelValue.level,
+  } as TibAbyssDetailAvatar;
+});
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <TItemBox :data="character as Record<string,string|number>" size="80px" model-value="abyss-overview" display="inner" />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import TItemBox from "../main/t-itembox.vue";
+// utils
+import TGSqlite from "../../plugins/Sqlite";
+
+interface TibAbyssOverviewProps {
+  modelValue: TGApp.Sqlite.Abyss.Character;
+}
+
+export interface TibAbyssOverviewAvatar extends TGApp.Sqlite.Character.AppData {
+  value: number,
+}
+
+const props = defineProps<TibAbyssOverviewProps>();
+
+const character = ref({} as TibAbyssOverviewAvatar);
+
+onMounted(async () => {
+  const res = await TGSqlite.getAppCharacter(props.modelValue.id);
+  character.value = {
+    ...res,
+    value: props.modelValue.value,
+  } as TibAbyssOverviewAvatar;
+});
+</script>

src/components/main/t-itembox.vue

@@ -39,6 +39,9 @@
 <script lang="ts" setup>
 // vue
 import { computed, ComputedRef } from "vue";
+// types
+import { TibAbyssOverviewAvatar } from "../itembox/tib-abyss-overview.vue";
+import { TibAbyssDetailAvatar } from "../itembox/tib-abyss-detail.vue";
 
 interface TItemBoxProps {
   modelValue: string
@@ -60,12 +63,8 @@ interface TItemBoxCard {
 
 const props = defineProps<TItemBoxProps>();
 
-const getSize = computed(() => {
-  return props.size === "100px" ? "30px" : "40px";
-});
-
 const getHeight = computed(() => {
-  return props.display === "inner" ? props.size : `${props.size.slice(0, -2) + 20}px`;
+  return props.display === "inner" ? props.size : `${Number(props.size.slice(0, -2)) + 20}px`;
 });
 
 const card: ComputedRef<TItemBoxCard> = computed(() => {
@@ -105,6 +104,22 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
         lt: cardData.weaponIcon,
         innerText: cardData.name,
       } as TItemBoxCard;
+    case "abyss-overview":
+      cardData = props.data as TibAbyssOverviewAvatar;
+      return {
+        bg: `/icon/bg/${cardData.star}-Star.webp`,
+        icon: `/WIKI/character/icon/${cardData.id}.webp`,
+        lt: `/icon/element/${cardData.element}元素.webp`,
+        innerText: cardData.value,
+      } as TItemBoxCard;
+    case "abyss-detail":
+      cardData = props.data as TibAbyssDetailAvatar;
+      return {
+        bg: `/icon/bg/${cardData.star}-Star.webp`,
+        icon: `/WIKI/character/icon/${cardData.id}.webp`,
+        lt: `/icon/element/${cardData.element}元素.webp`,
+        innerText: `Lv.${cardData.value}`,
+      } as TItemBoxCard;
   }
 });
 
@@ -128,8 +143,8 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
 }
 
 .tib-bg img {
-  width: 100%;
-  height: 100%;
+  width: v-bind(size);
+  height: v-bind(size);
   object-fit: cover;
 }
 
@@ -142,8 +157,8 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
 }
 
 .tib-icon img {
-  width: 100%;
-  height: 100%;
+  width: v-bind(size);
+  height: v-bind(size);
   object-fit: cover;
 }
 
@@ -164,16 +179,16 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
   position: absolute;
   top: 0;
   left: 0;
-  width: v-bind(getSize);
-  height: v-bind(getSize);
+  width: 30px;
+  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .tib-lt img {
-  width: calc(v-bind(getSize) - 10px);
-  height: calc(v-bind(getSize) - 10px);
+  width: 20px;
+  height: 20px;
   object-fit: cover;
 }
 
@@ -182,7 +197,7 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: v-bind(getSize);
+  height: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -190,14 +205,31 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   color: #fff;
-  font-size: calc(v-bind(getSize) / 3);
+  font-size: 8px;
   text-shadow: 0 0 5px #000;
   font-family: Genshin, serif;
 }
 
 .tib-inner img {
-  width: calc(v-bind(getSize) / 1.5);
-  height: calc(v-bind(getSize) / 1.5);
+  width: 20px;
+  height: 20px;
   margin-right: 5px;
 }
+
+.tib-outer {
+  position: absolute;
+  bottom: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  width: 100%;
+  height: 20px;
+  background: rgb(0 0 0/ 20%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Genshin, serif;
+  color: #fff;
+  font-size: 8px;
+  text-shadow: 0 0 5px #000;
+}
 </style>

src/components/userabyss/tua-detail-battle.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="tud-db-icons-grid">
+    <TibAbyssDetail
+      v-for="avatar in props.modelValue.characters"
+      :key="avatar.id" :model-value="avatar"
+    />
+  </div>
+  <div class="tud-db-time">
+    {{ props.modelValue.time }}
+  </div>
+</template>
+<script lang="ts" setup>
+import TibAbyssDetail from "../itembox/tib-abyss-detail.vue";
+
+interface TuaDetailBattleProps {
+  modelValue: TGApp.Sqlite.Abyss.Battle
+}
+
+const props = defineProps<TuaDetailBattleProps>();
+</script>
+<style lang="css" scoped>
+.tud-db-icons-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  margin-bottom: 10px;
+}
+
+.tud-db-time {
+  width: 100%;
+  text-align: left;
+  font-size: 12px;
+  color: #faf7e8;
+}
+</style>

src/components/userabyss/tua-detail-level.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="tud-dl-divider" />
+  <TuaDetailTitle :val="props.modelValue.winStar" :name="`第${props.modelValue.id}间`" />
+  <TuaDetailBattle :model-value="props.modelValue.upBattle" />
+  <TuaDetailBattle :model-value="props.modelValue.downBattle" />
+</template>
+<script lang="ts" setup>
+// vue
+import TuaDetailTitle from "./tua-detail-title.vue";
+import TuaDetailBattle from "./tua-detail-battle.vue";
+
+interface TuaDetailLevelProps {
+  modelValue: TGApp.Sqlite.Abyss.Level;
+}
+
+const props = defineProps<TuaDetailLevelProps>();
+</script>
+<style lang="css" scoped>
+.tud-dl-divider {
+  border-radius: 5px;
+  width: 100%;
+  height: 2px;
+  background: rgb(255 255 255 / 50%);
+}
+</style>

src/components/userabyss/tua-detail-title.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="tud-t-box">
+    <div class="tud-t-title">
+      <slot name="title">
+        <span>{{ props.name }}</span>
+      </slot>
+    </div>
+    <div class="tud-t-val">
+      <img src="/icon/star/Abyss.webp" alt="Abyss">
+      <slot name="val">
+        <span>{{ props.val }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed, ComputedRef } from "vue";
+
+interface TuaDetailTitleProps {
+  name: string;
+  val: number;
+  mode: "floor" | "level";
+}
+
+const props = withDefaults(defineProps<TuaDetailTitleProps>(), {
+  mode: "level",
+});
+
+const getFont: ComputedRef<string> = computed(() => {
+  return props.mode === "level" ? "Genshin-Light, serif" : "Genshin, serif";
+});
+</script>
+<style lang="css" scoped>
+.tud-t-box {
+  height: 30px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: v-bind(getFont);
+}
+
+.tud-t-title {
+  font-size: 20px;
+  color: rgb(255 255 255 / 80%);
+  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+}
+
+.tud-t-val {
+  display: flex;
+  align-items: center;
+  font-family: Genshin-Light, serif;
+  font-size: 20px;
+  color: rgb(255 255 255 / 80%);
+  text-shadow: #fec90b 0 0 5px;
+}
+
+.tud-t-val img {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  margin-right: 5px;
+}
+</style>

src/components/userabyss/tua-detail.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="tuad-box">
+    <TuaDetailTitle :val="props.modelValue.winStar" :name="`第${props.modelValue.id}层`" mode="floor" />
+    <div class="tuad-index-box">
+      <TuaDetailLevel v-for="level in props.modelValue.levels" :key="level.id" :model-value="level" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+
+import TuaDetailTitle from "./tua-detail-title.vue";
+import TuaDetailLevel from "./tua-detail-level.vue";
+
+interface TuaDetailProps {
+  modelValue: TGApp.Sqlite.Abyss.Floor
+}
+
+const props = defineProps<TuaDetailProps>();
+</script>
+<style lang="css" scoped>
+.tuad-box {
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  background: rgb(0 0 0 / 10%);
+  padding: 10px;
+}
+
+.tuad-index-box {
+  width: 100%;
+}
+</style>

src/components/userabyss/tua-overview.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="tuao-box">
+    <div class="tuao-title">
+      <slot name="title">
+        {{ props.title }}
+      </slot>
+    </div>
+    <div v-if="props.valText" class="tuao-val-text">
+      <slot name="val-text">
+        {{ props.valText }}
+      </slot>
+    </div>
+    <div v-if="props.valIcons" class="tuao-val-icons">
+      <slot name="val-icons">
+        <TibAbyssOverview
+          v-for="avatar in JSON.parse(props.valIcons) as TGApp.Sqlite.Abyss.Character[]"
+          :key="avatar.id" :model-value="avatar"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import TibAbyssOverview from "../itembox/tib-abyss-overview.vue";
+
+interface TAOProps {
+  title: string,
+  valText?: string | number,
+  valIcons?: string,
+  iconNum: number,
+}
+
+const props = withDefaults(defineProps<TAOProps>(), {
+  iconNum: 1,
+});
+</script>
+<style lang="css" scoped>
+.tuao-box {
+  width: 33%;
+  height: auto;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  background: rgb(0 0 0 / 10%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tuao-title {
+  font-family: Genshin, serif;
+  font-size: 20px;
+  color: rgb(255 255 255 / 80%);
+  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+}
+
+.tuao-val-text {
+  font-family: Genshin-Light, serif;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 10px;
+  color: rgb(255 255 255 / 80%);
+  text-shadow: #fec90b 0 0 5px;
+}
+
+.tuao-val-icons {
+  display: grid;
+  grid-template-columns: repeat(v-bind(iconNum), 1fr);
+  column-gap: 10px;
+}
+</style>