🎨 优化结构

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;
 }

src/pages/User/Record.vue

@@ -3,9 +3,8 @@
   <div class="ur-box">
     <div class="ur-top">
       <div class="ur-top-title">
-        <span v-if="recordData.role">{{ getTitle() }}</span>
-        <span v-else>原神战绩</span>
-        更新于 {{ recordData.updated }}
+        <span v-if="!isEmpty">{{ getTitle() }} 更新于 {{ recordData.updated }}</span>
+        <span v-else>原神战绩【暂无数据】【{{ user.gameUid }}】</span>
       </div>
       <v-btn variant="outlined" class="ur-top-btn" @click="refresh">
         更新数据
@@ -15,19 +14,17 @@
       <img src="/src/assets/icons/arrow-right.svg" alt="overview">
       <span>数据总览</span>
     </div>
-    <TurOverviewGrid v-if="recordData.stats" :model-value="recordData.stats" />
+    <TurOverviewGrid v-model="recordData.stats" />
     <div class="ur-sub-title">
       <img src="/src/assets/icons/arrow-right.svg" alt="overview">
       <span>我的角色</span>
     </div>
-    <div v-if="recordData.avatars" class="ur-avatar-grid">
-      <TibUrAvatar v-for="avatar in JSON.parse(recordData.avatars) as TGApp.Sqlite.Record.Avatar[]" :key="avatar.id" :model-value="avatar" />
-    </div>
+    <TurAvatarGrid v-model="recordData.avatars" />
     <div class="ur-sub-title">
       <img src="/src/assets/icons/arrow-right.svg" alt="overview">
       <span>世界探索</span>
     </div>
-    {{ recordData.worldExplore }}
+    <TurWorldGrid v-model="recordData.worldExplore" />
     <div class="ur-sub-title">
       <img src="/src/assets/icons/arrow-right.svg" alt="overview">
       <span>尘歌壶</span>
@@ -40,7 +37,8 @@
 import { computed, onMounted, ref } from "vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import TurOverviewGrid from "../../components/userRecord/tur-overview-grid.vue";
-import TibUrAvatar from "../../components/itembox/tib-ur-avatar.vue";
+import TurAvatarGrid from "../../components/userRecord/tur-avatar-grid.vue";
+import TurWorldGrid from "../../components/userRecord/tur-world-grid.vue";
 // store
 import { useUserStore } from "../../store/modules/user";
 // utils
@@ -55,6 +53,7 @@ const loading = ref(false);
 const loadingTitle = ref("");
 
 // data
+const isEmpty = ref(true);
 const recordData = ref({} as TGApp.Sqlite.Record.SingleTable);
 const recordCookie = computed(() => userStore.getCookieGroup2() as Record<string, string>);
 const user = computed(() => userStore.getCurAccount());
@@ -70,6 +69,9 @@ async function initUserRecordData () {
   const recordGet = await TGSqlite.getUserRecord(user.value.gameUid);
   if (recordGet !== false) {
     recordData.value = recordGet;
+    isEmpty.value = false;
+  } else {
+    isEmpty.value = true;
   }
 }
 
@@ -82,13 +84,15 @@ async function refresh () {
     loadingTitle.value = "正在保存战绩数据";
     await TGSqlite.saveUserRecord(data, user.value.gameUid);
     await initUserRecordData();
+  } else {
+    console.error(res);
   }
   loading.value = false;
 }
 
 function getTitle () {
   const role = JSON.parse(recordData.value.role) as TGApp.Sqlite.Record.Role;
-  return `${role.nickname} [Lv.${role.level}] [${recordData.value.uid}]`;
+  return `${role.nickname} Lv.${role.level}【${recordData.value.uid}】`;
 }
 </script>
 <style lang="css" scoped>
@@ -142,11 +146,4 @@ function getTitle () {
   height: 20px;
   margin-right: 5px;
 }
-
-.ur-avatar-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  grid-gap: 10px;
-  margin-bottom: 10px;
-}
 </style>