🎨 优化结构

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

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="props.modelValue===undefined">
+    暂无数据
+  </div>
+  <div v-else class="tur-ag-box">
+    <TibUrAvatar v-for="avatar in data" :key="avatar.id" :model-value="avatar" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TibUrAvatar from "../itembox/tib-ur-avatar.vue";
+
+interface TurAvatarGridProps {
+  modelValue?: string;
+}
+
+const props = defineProps<TurAvatarGridProps>();
+const data = computed(() => JSON.parse(<string>props.modelValue) as TGApp.Sqlite.Record.Avatar[]);
+</script>
+<style lang="css" scoped>
+.tur-ag-box {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  grid-gap: 10px;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -1,19 +1,18 @@
 <template>
-  <div class="tur-o-g-box">
+  <div v-if="props.modelValue===undefined">
+    暂无数据
+  </div>
+  <div v-else class="tur-og-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" />
@@ -27,17 +26,18 @@ import { computed } from "vue";
 import TurOverviewSub from "./tur-overview-sub.vue";
 
 interface TurOverviewGridProps {
-  modelValue: string
+  modelValue?: string
 }
 
 const props = defineProps<TurOverviewGridProps>();
-const data = computed(() => JSON.parse(props.modelValue) as TGApp.Sqlite.Record.Stats);
+const data = computed(() =>
+  JSON.parse(<string>props.modelValue) as TGApp.Sqlite.Record.Stats);
 </script>
 <style lang="css" scoped>
-.tur-o-g-box {
+.tur-og-box {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  grid-column-gap: 10px;
+  grid-gap: 10px;
   width: 100%;
 }
 </style>

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="tur-box">
-    <div class="tur-title">
+  <div class="tur-os-box">
+    <div class="tur-os-title">
       <slot name="title">
         {{ title }}
       </slot>
     </div>
-    <div class="tur-text">
+    <div class="tur-os-text">
       <slot name="val-text">
         {{ text }}
       </slot>
@@ -21,11 +21,10 @@ interface TAOProps {
 defineProps<TAOProps>();
 </script>
 <style lang="css" scoped>
-.tur-box {
+.tur-os-box {
   width: 100%;
   height: auto;
-  padding: 10px;
-  margin-bottom: 10px;
+  padding: 5px;
   border-radius: 5px;
   background: rgb(0 0 0 / 10%);
   display: flex;
@@ -34,18 +33,16 @@ defineProps<TAOProps>();
   align-items: center;
 }
 
-.tur-title {
-  font-family: Genshin, serif;
+.tur-os-title {
+  font-family: Genshin-Light, 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;
+.tur-os-text {
+  font-family: Genshin, serif;
   font-size: 20px;
-  font-weight: bold;
-  margin-top: 10px;
   color: rgb(255 255 255 / 80%);
   text-shadow: #fec90b 0 0 5px;
 }