💄 调整战绩页面UI

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

@@ -43,8 +43,7 @@ function getTitle(avatar: TGApp.Sqlite.Record.Avatar): string {
 <style lang="css" scoped>
 .tur-ag-box {
   display: grid;
-  margin-bottom: 10px;
-  grid-gap: 10px;
+  grid-gap: 8px;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }
 </style>

src/components/userRecord/tur-box.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="tur-box-container">
+    <slot name="default"></slot>
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style lang="scss" scoped></style>

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

@@ -13,7 +13,7 @@ defineProps<{ modelValue: Array<TGApp.Sqlite.Record.Home> }>();
 .tur-hg-box {
   display: grid;
   width: 100%;
-  grid-gap: 10px;
+  grid-gap: 8px;
   grid-template-columns: repeat(3, 1fr);
 }
 </style>

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

@@ -44,7 +44,7 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
   align-items: center;
   justify-content: space-between;
   border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
+  border-radius: 4px;
   background: var(--box-bg-2);
 }
 
@@ -63,14 +63,14 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
   box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
+  padding: 8px;
 }
 
 .tur-hs-name {
   color: var(--tgc-white-1);
   font-family: var(--font-text);
   font-size: 16px;
-  text-shadow: 0 0 5px var(--tgc-yellow-1);
+  text-shadow: 0 0 4px var(--tgc-yellow-1);
 }
 
 .tur-hs-title {
@@ -78,14 +78,14 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
   align-items: center;
   color: var(--tgc-white-1);
   font-family: var(--font-title);
-  font-size: 20px;
-  text-shadow: 0 0 5px var(--tgc-yellow-1);
+  font-size: 18px;
+  text-shadow: 0 0 4px var(--tgc-yellow-1);
 }
 
 .tur-hs-title img {
-  width: 30px;
-  height: 30px;
-  margin-right: 5px;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
 }
 
 .tur-hs-text-grid {
@@ -94,12 +94,12 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
   display: flex;
   width: 100%;
   justify-content: space-between;
-  padding: 10px;
+  padding: 8px;
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   background: rgb(0 0 0 / 40%);
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
   color: var(--tgc-white-1);
   text-align: center;
 }

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

@@ -33,9 +33,9 @@
         <template #icon>
           <img
             alt="achievement-icon"
-            height="25px"
+            height="20px"
             src="@/assets/icons/achievements.svg"
-            width="25px"
+            width="20px"
           />
         </template>
       </TurOverviewSub>
@@ -92,15 +92,15 @@ defineProps<{ modelValue: TGApp.Sqlite.Record.Stats }>();
 .tur-og-box {
   display: grid;
   width: 100%;
-  grid-gap: 10px;
+  grid-gap: 8px;
   grid-template-columns: repeat(4, 0.25fr);
 }
 
 .tur-og-box-3 {
   display: grid;
   width: 100%;
-  margin-bottom: 10px;
-  grid-gap: 10px;
+  margin-bottom: 8px;
+  grid-gap: 8px;
   grid-template-columns: repeat(3, 1fr);
 }
 </style>

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

@@ -1,17 +1,21 @@
 <template>
   <div class="tur-os-box">
-    <div class="tur-os-title">
-      <slot name="title">{{ props.title }}</slot>
-    </div>
     <div class="tur-os-text">
       <div v-if="props.icon !== undefined" class="tur-os-icon">
-        <slot name="icon"><img :src="props.icon" alt="icon" /></slot>
+        <slot name="icon">
+          <TMiImg :ori="true" :src="props.icon" alt="icon" />
+        </slot>
       </div>
       <slot name="val-text">{{ props.text }}</slot>
     </div>
+    <div class="tur-os-title">
+      <slot name="title">{{ props.title }}</slot>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
+
 type TAOProps = { title: string; text: string | number | undefined; icon?: string | undefined };
 
 const props = defineProps<TAOProps>();
@@ -24,26 +28,26 @@ const props = defineProps<TAOProps>();
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 5px;
-  border-radius: 5px;
-  background: var(--box-bg-2);
+  padding: 8px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
+  background: var(--box-bg-1);
 }
 
 .tur-os-title {
   color: var(--box-text-4);
   font-family: var(--font-title);
-  font-size: 20px;
 }
 
 .tur-os-text {
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
   color: var(--tgc-yellow-1);
+  column-gap: 4px;
   font-family: var(--font-text);
-  font-size: 20px;
-  gap: 5px;
+  font-size: 18px;
+  line-height: 24px;
 }
 
 .dark .tur-os-text {
@@ -52,8 +56,12 @@ const props = defineProps<TAOProps>();
 }
 
 .tur-os-icon {
-  width: 25px;
-  height: 25px;
+  position: relative;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
 
   img {
     width: 100%;

src/components/userRecord/tur-role-info.vue

@@ -1,31 +1,40 @@
 <template>
   <div class="tur-ri-box">
-    <div class="tur-ri-avatar">
-      <img :src="props.modelValue.avatar" alt="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 class="tur-ri-title">{{ role.nickname }}({{ uid }})</div>
+      <div class="tur-ri-subtitle">Lv.{{ role.level }} {{ role.region }}</div>
+    </div>
+    <div class="tur-ri-avatar">
+      <TMiImg :ori="true" :src="role.avatar" alt="avatar" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-type TurRoleInfoProps = { uid: number; modelValue: TGApp.Sqlite.Record.Role };
+import TMiImg from "@comp/app/t-mi-img.vue";
 
-const props = defineProps<TurRoleInfoProps>();
+type TurRoleInfoProps = { uid: number; role: TGApp.Sqlite.Record.Role };
+
+defineProps<TurRoleInfoProps>();
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .tur-ri-box {
+  @include github-styles.github-card();
+
+  position: relative;
   display: flex;
-  height: 40px;
+  height: 48px;
   align-items: center;
   justify-content: center;
+  column-gap: 4px;
+  padding: 4px;
+  border-radius: 4px 24px 24px 4px;
+  box-sizing: border-box;
+}
+
+.dark .tur-ri-box {
+  @include github-styles.github-card("dark");
 }
 
 .tur-ri-avatar {
@@ -47,42 +56,28 @@ const props = defineProps<TurRoleInfoProps>();
 .tur-ri-content {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: flex-end;
   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;
-  }
+  column-gap: 4px;
+  font-family: var(--font-title);
+  color: var(--common-text-title);
+  font-size: 16px;
+  line-height: 20px;
 }
 
 .tur-ri-subtitle {
   display: flex;
-  height: 15px;
+  font-size: 14px;
+  line-height: 16px;
   align-items: center;
   justify-content: flex-start;
   column-gap: 10px;
-  opacity: 0.8;
+  color: var(--box-text-1);
 }
 </style>

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

@@ -13,7 +13,7 @@ defineProps<{ modelValue: Array<TGApp.Sqlite.Record.WorldExplore> }>();
 .tur-wg-box {
   display: grid;
   width: 100%;
-  grid-gap: 10px;
-  grid-template-columns: repeat(3, calc(33.3333% - 10px));
+  grid-gap: 8px;
+  grid-template-columns: repeat(3, 0.33fr);
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="tur-ws-box">
     <div class="tur-ws-bg">
-      <img :src="data.bg" alt="bg" />
+      <TMiImg :ori="true" :src="data.bg" alt="bg" />
     </div>
     <div class="tur-ws-icon">
       <img :src="icon" alt="icon" />
@@ -11,7 +11,7 @@
         <span>{{ data.name }}</span>
         <span v-if="data.offering" class="tur-ws-sub">
           <img :src="data.offering.icon" alt="offer" />
-          <span>{{ data.offering.name }}等级：</span>
+          <span>{{ data.offering.name }}-</span>
           <span>{{ data.offering.level }}</span>
           <span>级</span>
         </span>
@@ -42,6 +42,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -62,15 +63,18 @@ const icon = computed<string>(() => {
   return props.data.iconDark;
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tur-ws-box {
   position: relative;
   display: flex;
   overflow: hidden;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  padding: 10px;
-  border-radius: 5px;
+  padding: 8px;
+  border-radius: 4px;
+  column-gap: 4px;
+  background: var(--box-bg-1);
+  border: 1px solid var(--common-shadow-1);
 }
 
 .tur-ws-bg {
@@ -83,9 +87,8 @@ const icon = computed<string>(() => {
 
 .tur-ws-icon {
   z-index: 1;
-  width: 60px;
-  height: 60px;
-  padding: 5px;
+  width: 64px;
+  height: 64px;
 }
 
 .tur-ws-icon img {
@@ -96,7 +99,7 @@ const icon = computed<string>(() => {
 
 .tur-ws-content {
   z-index: 1;
-  width: calc(100% - 60px);
+  width: calc(100% - 68px);
   height: 100%;
   color: var(--box-text-4);
 }
@@ -107,7 +110,7 @@ const icon = computed<string>(() => {
   justify-content: space-between;
   border-bottom: 1px inset var(--common-shadow-8);
   font-family: var(--font-title);
-  font-size: 20px;
+  font-size: 18px;
 }
 
 .tur-ws-sub {
@@ -119,13 +122,13 @@ const icon = computed<string>(() => {
 }
 
 .tur-ws-sub img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
+  width: 24px;
+  height: 24px;
 }
 
 .tur-ws-sub :nth-last-child(2) {
   color: var(--tgc-yellow-1);
   font-family: var(--font-title);
+  text-shadow: 0 0 2px #0d1117;
 }
 </style>

src/pages/User/Record.vue

@@ -10,7 +10,7 @@
           v-model="uidCur"
           :items="uidList"
           :hide-details="true"
-          title="游戏UID"
+          label="游戏UID"
         />
       </div>
     </template>
@@ -38,17 +38,27 @@
   </v-app-bar>
   <div class="ur-box" v-if="recordData">
     <div class="ur-box-title">
-      <TurRoleInfo :model-value="recordData.role" :uid="uidCur ?? 0" />
-      <span>原神战绩|Render by TeyvatGuide v{{ version }}|更新于 {{ recordData.updated }}</span>
+      <TurRoleInfo :role="recordData.role" :uid="uidCur ?? 0" />
+      <span class="sign">
+        原神战绩|Render by TeyvatGuide v{{ version }}|更新于 {{ recordData.updated }}
+      </span>
     </div>
-    <TSubLine>数据总览</TSubLine>
-    <TurOverviewGrid :model-value="recordData.stats" />
-    <TSubLine>角色信息</TSubLine>
-    <TurAvatarGrid :model-value="recordData.avatars" />
-    <TSubLine>世界探索</TSubLine>
-    <TurWorldGrid :model-value="recordData.worldExplore" />
-    <TSubLine>尘歌壶</TSubLine>
-    <TurHomeGrid :model-value="recordData.homes" />
+    <PhCompCard>
+      <template #title>数据总览</template>
+      <TurOverviewGrid :model-value="recordData.stats" />
+    </PhCompCard>
+    <PhCompCard>
+      <template #title>角色信息</template>
+      <TurAvatarGrid :model-value="recordData.avatars" />
+    </PhCompCard>
+    <PhCompCard>
+      <template #title>世界探索</template>
+      <TurWorldGrid :model-value="recordData.worldExplore" />
+    </PhCompCard>
+    <PhCompCard>
+      <template #title>尘歌壶</template>
+      <TurHomeGrid :model-value="recordData.homes" />
+    </PhCompCard>
   </div>
   <div class="ur-empty" v-else>
     <img alt="empty" src="/source/UI/empty.webp" />
@@ -56,10 +66,10 @@
   </div>
 </template>
 <script lang="ts" setup>
-import TSubLine from "@comp/app/t-subline.vue";
 import showDialog from "@comp/func/dialog.js";
 import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
+import PhCompCard from "@comp/pageHome/ph-comp-card.vue";
 import TurAvatarGrid from "@comp/userRecord/tur-avatar-grid.vue";
 import TurHomeGrid from "@comp/userRecord/tur-home-grid.vue";
 import TurOverviewGrid from "@comp/userRecord/tur-overview-grid.vue";
@@ -190,13 +200,17 @@ async function deleteRecord(): Promise<void> {
   await loadRecord();
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .ur-top-title {
+  position: relative;
+  margin-left: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  padding: 8px;
+  gap: 8px;
 
   img {
     width: 32px;
@@ -211,35 +225,45 @@ async function deleteRecord(): Promise<void> {
 }
 
 .ur-top-btns {
+  position: relative;
   display: flex;
-  margin-right: 15px;
-  gap: 15px;
+  margin-right: 16px;
+  gap: 8px;
 }
 
 .ur-top-btn {
-  border-radius: 5px;
+  border-radius: 4px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-text);
 }
 
 .ur-box {
+  @include github-styles.github-card-shadow();
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  padding: 10px;
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
-  background: var(--box-bg-1);
-  row-gap: 5px;
+  padding: 8px;
+  box-sizing: border-box;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  row-gap: 4px;
+  background: var(--app-page-bg);
+}
+
+.dark .ur-box {
+  @include github-styles.github-card-shadow("dark");
 }
 
 .ur-box-title {
+  position: relative;
   display: flex;
   width: 100%;
   align-items: flex-end;
   justify-content: space-between;
 
-  :last-child {
+  .sign {
     z-index: -1;
     font-size: 14px;
     opacity: 0.8;

src/types/Game/Record.d.ts

@@ -1,15 +1,9 @@
 /**
  * @file types/Game/Record.d.ts
  * @description 原神战绩相关类型定义文件
- * @since Beta v0.5.5
+ * @since Beta v0.7.2
  */
 
-/**
- * @description 原神战绩相关类型定义命名空间
- * @since Beta v0.5.5
- * @namespace TGApp.Game.Record
- * @memberof TGApp.Game
- */
 declare namespace TGApp.Game.Record {
   /**
    * @description 原神战绩数据返回类型
@@ -19,30 +13,32 @@ declare namespace TGApp.Game.Record {
    * @property {FullData} data - 原神战绩数据
    * @return Response
    */
-  interface Response extends TGApp.BBS.Response.BaseWithData {
-    data: FullData;
-  }
+  type Response = TGApp.BBS.Response.BaseWithData<FullData>;
 
   /**
    * @description 原神战绩数据类型
    * @interface FullData
-   * @since Alpha v0.2.0
+   * @since Beta v0.7.2
    * @property {Role} role - 角色信息
-   * @property {Avatar[]} avatars - 角色列表
+   * @property {Array<Avatar>} avatars - 角色列表
    * @property {Stats} stats - 统计信息
-   * @property {unknown[]} city_explorations - 城市探索信息
-   * @property {WorldExplore[]} world_explorations - 世界探索信息
-   * @property {Home[]} homes - 尘歌壶信息
+   * @property {Array<unknown>} city_explorations - 城市探索信息
+   * @property {Array<WorldExplore>} world_explorations - 世界探索信息
+   * @property {Array<Home>} homes - 尘歌壶信息
+   * @property {string} query_tool_link - 查询工具链接
+   * @property {string} query_tool_image - 查询工具图片
    * @return FullData
    */
-  interface FullData {
+  type FullData = {
     role: Role;
-    avatars: Avatar[];
+    avatars: Array<Avatar>;
     stats: Stats;
-    city_explorations: unknown[];
-    world_explorations: WorldExplore[];
-    homes: Home[];
-  }
+    city_explorations: Array<unknown>;
+    world_explorations: Array<WorldExplore>;
+    homes: Array<Home>;
+    query_tool_link: string;
+    query_tool_image: string;
+  };
 
   /**
    * @description 角色信息类型
@@ -55,18 +51,18 @@ declare namespace TGApp.Game.Record {
    * @property {string} game_head_icon - 游戏头像
    * @return Role
    */
-  interface Role {
+  type Role = {
     AvatarUrl: string;
     nickname: string;
     region: string;
     level: number;
     game_head_icon: string;
-  }
+  };
 
   /**
    * @description 角色列表类型
    * @interface Avatar
-   * @since Alpha v0.2.0
+   * @since Beta v0.7.2
    * @property {number} id - 角色 ID
    * @property {string} image - 角色头像
    * @property {string} name - 角色名称
@@ -77,9 +73,11 @@ declare namespace TGApp.Game.Record {
    * @property {number} actived_constellation_num - 角色已激活命座数量
    * @property {number} card_image - 角色卡片图片
    * @property {boolean} is_chosen - 角色是否展示
+   * @property {unknown} weapon - 角色武器 // null
+   * @property {Array<unknown>} relics - 角色圣遗物 // []
    * @return Avatar
    */
-  interface Avatar {
+  type Avatar = {
     id: number;
     image: string;
     name: string;
@@ -90,7 +88,9 @@ declare namespace TGApp.Game.Record {
     actived_constellation_num: number;
     card_image: number;
     is_chosen: boolean;
-  }
+    weapon: unknown;
+    relics: Array<unknown>;
+  };
 
   /**
    * @description 统计信息类型
@@ -118,7 +118,7 @@ declare namespace TGApp.Game.Record {
    * @property {number} full_fetter_avatar_num - 满好感角色数
    * @return Stats
    */
-  interface Stats {
+  type Stats = {
     active_day_number: number;
     achievement_number: number;
     anemoculus_number: number;
@@ -139,7 +139,7 @@ declare namespace TGApp.Game.Record {
     field_ext_map: unknown;
     role_combat: CombatStats;
     full_fetter_avatar_num: number;
-  }
+  };
 
   /**
    * @description 幻想真境剧诗数据类型
@@ -151,17 +151,17 @@ declare namespace TGApp.Game.Record {
    * @property {boolean} has_detail_data - 是否有详细数据
    * @return CombatStats
    */
-  interface CombatStats {
+  type CombatStats = {
     is_unlock: boolean;
     max_round_id: number;
     has_data: boolean;
     has_detail_data: boolean;
-  }
+  };
 
   /**
    * @description 世界探索信息类型
    * @interface WorldExplore
-   * @since Alpha v0.2.0
+   * @since Beta 0.7.2
    * @property {number} level - 声望等级
    * @property {number} exploration_percentage - 探索千分比
    * @property {string} icon - 图标
@@ -175,15 +175,23 @@ declare namespace TGApp.Game.Record {
    * @property {string} background_image - 背景图片 URL
    * @property {string} inner_icon - 内部图标 URL
    * @property {string} cover - 封面 URL
+   * @property {Array<unknown>} area_exploration_list - 区域探索列表
+   * @property {Array<unknown>} boss_list - Boss 列表
+   * @property {boolean} is_hot - 是否热门
+   * @property {boolean} index_active - 索引激活
+   * @property {boolean} detail_active - 详细激活
+   * @property {number} seven_status_level - 七天神像等级
+   * @property {NataReputation[] | null} nata_reputation - 纳塔声望
+   * @property {number} world_type - 世界类型
    * @return WorldExplore
    */
-  interface WorldExplore {
+  type WorldExplore = {
     level: number;
     exploration_percentage: number;
     icon: string;
     name: string;
     type: string;
-    offerings: WorldOffering[];
+    offerings: Array<WorldOffering>;
     id: number;
     parent_id: number;
     map_url: string;
@@ -191,7 +199,15 @@ declare namespace TGApp.Game.Record {
     background_image: string;
     inner_icon: string;
     cover: string;
-  }
+    area_exploration_list: Array<unknown>;
+    boss_list: Array<unknown>;
+    is_hot: boolean;
+    index_active: boolean;
+    detail_active: boolean;
+    seven_status_level: number;
+    nata_reputation: NataReputation | null;
+    world_type: number;
+  };
 
   /**
    * @description 奉献物品类型
@@ -202,11 +218,26 @@ declare namespace TGApp.Game.Record {
    * @property {string} icon - 图标
    * @return WorldOffering
    */
-  interface WorldOffering {
-    name: string;
-    level: number;
-    icon: string;
-  }
+  type WorldOffering = { name: string; level: number; icon: string };
+
+  /**
+   * @description 纳塔声望类型
+   * @interface NataReputation
+   * @since Beta v0.7.2
+   * @property {Array<NataOffering>} tribal_list - 部落列表
+   * @returns NataReputation
+   */
+  type NataReputation = { tribal_list: Array<NataOffering> };
+
+  /**
+   * @description 部落列表类型
+   * @interface NataOffering
+   * @extends WorldOffering
+   * @property {number} id - ID
+   * @property {string} image - 图片
+   * @returns NataOffering
+   */
+  type NataOffering = WorldOffering & { id: number; image: string };
 
   /**
    * @description 尘歌壶信息类型
@@ -222,7 +253,7 @@ declare namespace TGApp.Game.Record {
    * @property {string} comfort_level_icon - 洞天仙力等级图标
    * @return Home
    */
-  interface Home {
+  type Home = {
     level: number;
     visit_num: number;
     comfort_num: number;
@@ -231,5 +262,5 @@ declare namespace TGApp.Game.Record {
     icon: string;
     comfort_level_name: string;
     comfort_level_icon: string;
-  }
+  };
 }