🎨 还差尘歌壶跟大地图探索没写

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

@@ -0,0 +1,31 @@
+<template>
+  <TItemBox :model-value="box" />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
+
+interface TibUrAvatarProps {
+  modelValue: TGApp.Sqlite.Record.Avatar
+}
+
+const props = defineProps<TibUrAvatarProps>();
+const box = ref({} as TItemBoxData);
+
+onMounted(async () => {
+  box.value = {
+    size: "80px",
+    height: "80px",
+    ltSize: "30px",
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    lt: `/icon/element/${props.modelValue.element}元素.webp`,
+    rt: props.modelValue.constellation.toString() || "0",
+    rtSize: "20px",
+    innerText: `${props.modelValue.name}`,
+    innerHeight: 20,
+    display: "inner",
+  };
+});
+</script>

src/components/main/t-itembox.vue

@@ -25,14 +25,14 @@
           <span>{{ modelValue.innerText }}</span>
         </slot>
       </div>
-      <div v-if="modelValue.display==='outer'" class="tib-outer">
-        <slot name="outer-icon">
-          <img v-show="modelValue.outerIcon" :src="modelValue.outerIcon" alt="outer-icon">
-        </slot>
-        <slot name="outer-text">
-          <span>{{ modelValue.outerText }}</span>
-        </slot>
-      </div>
+    </div>
+    <div v-if="modelValue.display==='outer'" class="tib-outer">
+      <slot name="outer-icon">
+        <img v-show="modelValue.outerIcon" :src="modelValue.outerIcon" alt="outer-icon">
+      </slot>
+      <slot name="outer-text">
+        <span>{{ modelValue.outerText }}</span>
+      </slot>
     </div>
   </div>
 </template>
@@ -147,6 +147,22 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
   object-fit: cover;
 }
 
+.tib-rt {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: v-bind(props["modelValue"]["rtSize"]);
+  height: v-bind(props["modelValue"]["rtSize"]);
+  background: rgb(0 0 0 / 50%);
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Genshin, serif;
+  color: #faf7e8;
+}
+
 .tib-inner {
   position: absolute;
   bottom: 0;
@@ -187,4 +203,10 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
   font-size: v-bind(getOuterFont);
   text-shadow: 0 0 5px #000;
 }
+
+.tib-outer img {
+  width: v-bind(getOuterHeight);
+  height: v-bind(getOuterHeight);
+  margin-right: 5px;
+}
 </style>

src/components/userRecord/tur-overview-grid.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tur-o-g-box">
+    <TurOverviewSub title="活跃天数" :text="data.activeDays" />
+    <TurOverviewSub title="成就达成数" :text="data.achievementNumber" />
+    <TurOverviewSub title="获得角色数" :text="data.avatarNumber" />
+    <TurOverviewSub title="解锁传送点" :text="data.wayPoints" />
+    <TurOverviewSub title="解锁秘境" :text="data.domainNumber" />
+  </div>
+  <div class="tur-o-g-box">
+    <TurOverviewSub title="风神瞳" :text="data.anemoCulus" />
+    <TurOverviewSub title="岩神瞳" :text="data.geoCulus" />
+    <TurOverviewSub title="深境螺旋" :text="data.sprialAbyss" />
+    <TurOverviewSub title="雷神瞳" :text="data.electroCulus" />
+    <TurOverviewSub title="草神瞳" :text="data.dendroCulus" />
+  </div>
+  <div class="tur-o-g-box">
+    <TurOverviewSub title="华丽宝箱数" :text="data.luxuriousChest" />
+    <TurOverviewSub title="珍贵宝箱数" :text="data.preciousChest" />
+    <TurOverviewSub title="精致宝箱数" :text="data.exquisiteChest" />
+    <TurOverviewSub title="普通宝箱数" :text="data.commonChest" />
+    <TurOverviewSub title="奇馈宝箱数" :text="data.magicChest" />
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TurOverviewSub from "./tur-overview-sub.vue";
+
+interface TurOverviewGridProps {
+  modelValue: string
+}
+
+const props = defineProps<TurOverviewGridProps>();
+const data = computed(() => JSON.parse(props.modelValue) as TGApp.Sqlite.Record.Stats);
+</script>
+<style lang="css" scoped>
+.tur-o-g-box {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-column-gap: 10px;
+  width: 100%;
+}
+</style>

src/components/userRecord/tur-overview-sub.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="tur-box">
+    <div class="tur-title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="tur-text">
+      <slot name="val-text">
+        {{ text }}
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TAOProps {
+  title: string,
+  text: string | number,
+}
+
+defineProps<TAOProps>();
+</script>
+<style lang="css" scoped>
+.tur-box {
+  width: 100%;
+  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;
+}
+
+.tur-title {
+  font-family: Genshin, serif;
+  font-size: 20px;
+  color: rgb(255 255 255 / 80%);
+  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+}
+
+.tur-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;
+}
+</style>