♻️ 战绩页面适配多账户

#126
BTMuli · Sep 22, 2024 · b4e0fe3 · b4e0fe3
1 parent 7f84a53
commit b4e0fe3
Show file tree

Hide file tree

Showing 13 changed files with 564 additions and 275 deletions.
diff --git a/src/components/userRecord/tur-avatar-grid.vue b/src/components/userRecord/tur-avatar-grid.vue
@@ -1,21 +1,18 @@
 <template>
-  <div v-if="!props.modelValue">暂无数据</div>
+  <div v-if="props.modelValue.length === 0">暂无数据</div>
   <div v-else class="tur-ag-box">
-    <TibUrAvatar v-for="avatar in data" :key="avatar.id" :model-value="avatar" />
+    <TibUrAvatar v-for="avatar in props.modelValue" :key="avatar.id" :model-value="avatar" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import TibUrAvatar from "../itembox/tib-ur-avatar.vue";
 
 interface TurAvatarGridProps {
-  modelValue?: string;
+  modelValue: TGApp.Sqlite.Record.Avatar[];
 }
 
 const props = defineProps<TurAvatarGridProps>();
-const data = computed<TGApp.Sqlite.Record.Avatar[]>(() => JSON.parse(<string>props.modelValue));
 </script>
 <style lang="css" scoped>
 .tur-ag-box {

diff --git a/src/components/userRecord/tur-home-grid.vue b/src/components/userRecord/tur-home-grid.vue
@@ -1,26 +1,17 @@
 <template>
-  <div v-if="!props.modelValue">暂无数据</div>
+  <div v-if="props.modelValue.length === 0">暂无数据</div>
   <div v-else class="tur-hg-box">
-    <TurHomeSub v-for="(home, index) in homes" :key="index" :data="home" />
+    <TurHomeSub v-for="(home, index) in props.modelValue" :key="index" :data="home" />
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import TurHomeSub from "./tur-home-sub.vue";
 
 interface TurHomeGridProps {
-  modelValue?: string;
+  modelValue: TGApp.Sqlite.Record.Home[];
 }
 
 const props = defineProps<TurHomeGridProps>();
-const homes = computed<TGApp.Sqlite.Record.Home[]>(() => {
-  const res = JSON.parse(props.modelValue ?? "[]");
-  if (res.length > 0) {
-    return res;
-  }
-  return [];
-});
 </script>
 <style lang="css" scoped>
 .tur-hg-box {

diff --git a/src/components/userRecord/tur-overview-grid.vue b/src/components/userRecord/tur-overview-grid.vue
@@ -2,22 +2,34 @@
   <div v-if="!props.modelValue">暂无数据</div>
   <div v-else>
     <div class="tur-og-box-3">
-      <TurOverviewSub title="活跃天数" :text="data.activeDays" icon="/source/UI/userRecord.webp" />
-      <TurOverviewSub title="深境螺旋" :text="data.sprialAbyss" icon="/source/UI/userAbyss.webp" />
-      <TurOverviewSub title="幻想真境剧诗" :text="data.combatRole" icon="/icon/material/201.webp" />
+      <TurOverviewSub
+        title="活跃天数"
+        :text="props.modelValue.activeDays"
+        icon="/source/UI/userRecord.webp"
+      />
+      <TurOverviewSub
+        title="深境螺旋"
+        :text="props.modelValue.sprialAbyss"
+        icon="/source/UI/userAbyss.webp"
+      />
+      <TurOverviewSub
+        title="幻想真境剧诗"
+        :text="props.modelValue.combatRole"
+        icon="/icon/material/201.webp"
+      />
     </div>
     <div class="tur-og-box">
       <TurOverviewSub
         title="获得角色数"
-        :text="data.avatarNumber"
+        :text="props.modelValue.avatarNumber"
         icon="/source/UI/userAvatar.webp"
       />
       <TurOverviewSub
         title="满好感角色数"
-        :text="data.avatarFetter"
+        :text="props.modelValue.avatarFetter"
         icon="/icon/material/105.webp"
       />
-      <TurOverviewSub title="成就达成数" :text="data.achievementNumber" icon="icon">
+      <TurOverviewSub title="成就达成数" :text="props.modelValue.achievementNumber" icon="icon">
         <template #icon>
           <img
             src="../../assets/icons/achievements.svg"
@@ -27,33 +39,58 @@
           />
         </template>
       </TurOverviewSub>
-      <TurOverviewSub title="解锁传送点" :text="data.wayPoints" icon="/icon/material/220005.webp" />
-      <TurOverviewSub title="解锁秘境" :text="data.domainNumber" />
-      <TurOverviewSub title="火神瞳" :text="data.pyroCulus" icon="/icon/material/107028.webp" />
-      <TurOverviewSub title="风神瞳" :text="data.anemoCulus" icon="/icon/material/107001.webp" />
-      <TurOverviewSub title="岩神瞳" :text="data.geoCulus" icon="/icon/material/107003.webp" />
-      <TurOverviewSub title="雷神瞳" :text="data.electroCulus" icon="/icon/material/107014.webp" />
-      <TurOverviewSub title="草神瞳" :text="data.dendroCulus" icon="/icon/material/107017.webp" />
-      <TurOverviewSub title="水神瞳" :text="data.hydroCulus" icon="/icon/material/107023.webp" />
-      <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" />
+      <TurOverviewSub
+        title="解锁传送点"
+        :text="props.modelValue.wayPoints"
+        icon="/icon/material/220005.webp"
+      />
+      <TurOverviewSub title="解锁秘境" :text="props.modelValue.domainNumber" />
+      <TurOverviewSub
+        title="火神瞳"
+        :text="props.modelValue.pyroCulus"
+        icon="/icon/material/107028.webp"
+      />
+      <TurOverviewSub
+        title="风神瞳"
+        :text="props.modelValue.anemoCulus"
+        icon="/icon/material/107001.webp"
+      />
+      <TurOverviewSub
+        title="岩神瞳"
+        :text="props.modelValue.geoCulus"
+        icon="/icon/material/107003.webp"
+      />
+      <TurOverviewSub
+        title="雷神瞳"
+        :text="props.modelValue.electroCulus"
+        icon="/icon/material/107014.webp"
+      />
+      <TurOverviewSub
+        title="草神瞳"
+        :text="props.modelValue.dendroCulus"
+        icon="/icon/material/107017.webp"
+      />
+      <TurOverviewSub
+        title="水神瞳"
+        :text="props.modelValue.hydroCulus"
+        icon="/icon/material/107023.webp"
+      />
+      <TurOverviewSub title="华丽宝箱数" :text="props.modelValue.luxuriousChest" />
+      <TurOverviewSub title="珍贵宝箱数" :text="props.modelValue.preciousChest" />
+      <TurOverviewSub title="精致宝箱数" :text="props.modelValue.exquisiteChest" />
+      <TurOverviewSub title="普通宝箱数" :text="props.modelValue.commonChest" />
+      <TurOverviewSub title="奇馈宝箱数" :text="props.modelValue.magicChest" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import TurOverviewSub from "./tur-overview-sub.vue";
 
 interface TurOverviewGridProps {
-  modelValue?: string;
+  modelValue: TGApp.Sqlite.Record.Stats;
 }
 
 const props = defineProps<TurOverviewGridProps>();
-const data = computed<TGApp.Sqlite.Record.Stats>(() => JSON.parse(<string>props.modelValue));
 </script>
 <style lang="css" scoped>
 .tur-og-box {

diff --git a/src/components/userRecord/tur-role-info.vue b/src/components/userRecord/tur-role-info.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="tur-ri-box">
+    <div class="tur-ri-avatar">
+      <img alt="avatar" :src="props.modelValue.avatar" />
+    </div>
+    <div class="tur-ri-content">
+      <div class="tur-ri-title">
+        <span>{{ props.modelValue.nickname }}</span>
+        <span>{{ props.modelValue.level }}</span>
+      </div>
+      <div class="tur-ri-subtitle">
+        <span>UID:{{ props.uid }}</span>
+        <span>({{ props.modelValue.region }})</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TurRoleInfoProps {
+  uid: number;
+  modelValue: TGApp.Sqlite.Record.Role;
+}
+
+const props = defineProps<TurRoleInfoProps>();
+</script>
+<style lang="css" scoped>
+.tur-ri-box {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+
+.tur-ri-avatar {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.tur-ri-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.tur-ri-title {
+  display: flex;
+  height: 25px;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 5px;
+
+  :first-child {
+    color: var(--common-text-title);
+    font-family: var(--font-title);
+    font-size: 18px;
+  }
+
+  :last-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5px;
+    border-radius: 5px;
+    background: var(--tgc-od-blue);
+    color: var(--tgc-white-1);
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+
+.tur-ri-subtitle {
+  display: flex;
+  height: 15px;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 10px;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/components/userRecord/tur-world-grid.vue b/src/components/userRecord/tur-world-grid.vue
@@ -1,22 +1,17 @@
 <template>
-  <div v-if="!props.modelValue">暂无数据</div>
+  <div v-if="props.modelValue.length === 0">暂无数据</div>
   <div v-else class="tur-wg-box">
-    <TurWorldSub v-for="area in getData()" :key="area.id" :data="area" />
+    <TurWorldSub v-for="area in props.modelValue" :key="area.id" :data="area" />
   </div>
 </template>
 <script lang="ts" setup>
 import TurWorldSub from "./tur-world-sub.vue";
 
 interface TurWorldGridProps {
-  modelValue?: string;
+  modelValue: TGApp.Sqlite.Record.WorldExplore[];
 }
 
 const props = defineProps<TurWorldGridProps>();
-
-function getData(): TGApp.Sqlite.Record.WorldExplore[] {
-  if (!props.modelValue) return [];
-  return JSON.parse(props.modelValue);
-}
 </script>
 <style lang="css" scoped>
 .tur-wg-box {

diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
@@ -4,7 +4,7 @@
     <template #prepend>
       <div class="uc-top-title">
         <img alt="icon" src="/source/UI/userAvatar.webp" />
-        <span>原神战绩</span>
+        <span>我的角色</span>
         <v-btn variant="outlined" @click="showSelect = true">筛选角色</v-btn>
         <v-btn variant="outlined" @click="resetSelect = true">重置筛选</v-btn>
       </div>
@@ -224,6 +224,7 @@ async function loadUid(): Promise<void> {
   } else {
     uidCur.value = uidList.value[0];
   }
+  console.log(uidCur.value, user.value.gameUid);
 }
 
 async function loadRole(): Promise<void> {