💄 微调月谕模式ui

src/components/userCombat/tuc-round.vue

@@ -1,3 +1,4 @@
+<!-- 真境剧诗，单轮次卡片组件 -->
 <template>
   <div class="tucr-box">
     <div class="tucr-title">
@@ -57,8 +58,8 @@ function getIcon(): string {
   column-gap: 4px;
 
   img {
-    width: 30px;
-    aspect-ratio: 1;
+    height: 30px;
+    object-fit: contain;
   }
 
   .main {

src/components/userCombat/tuc-tile.vue

@@ -1,18 +1,29 @@
+<!-- 真境剧诗概况卡片组件 -->
 <template>
   <div class="tuct-box">
     <div class="tuct-title">
-      <slot name="title">{{ title }}</slot>
+      <slot name="title">{{ props.title }}</slot>
     </div>
-    <div class="tuct-text" v-if="!Array.isArray(val)">
-      <slot name="text">{{ val }}</slot>
+    <div class="tuct-text" v-if="!Array.isArray(props.val)">
+      <slot name="text">{{ props.val }}</slot>
     </div>
     <div class="tuct-icons" v-else>
-      <img v-for="(v, idx) in val" :key="idx" :src="`/icon/combat/star_${v}.webp`" :alt="`${v}`" />
+      <template v-for="(v, idx) in props.val" :key="idx">
+        <img
+          v-if="idx < 10"
+          :src="`/icon/combat/star_${v}.webp`"
+          :alt="`${v}`"
+          :title="`第${idx + 1}幕`"
+        />
+        <img v-else :src="`/icon/combat/tarot_${v}.webp`" :alt="`${v}`" :title="`圣牌${idx - 9}`" />
+      </template>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-defineProps<{ title: string; val: string | number | Array<number> }>();
+type TucTileProps = { title: string; val: string | number | Array<number> };
+
+const props = defineProps<TucTileProps>();
 </script>
 <style lang="css" scoped>
 .tuct-box {
@@ -47,7 +58,7 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
 
   img {
     height: 30px;
-    aspect-ratio: 1;
+    object-fit: contain;
   }
 }
 </style>

src/pages/User/Combat.vue

@@ -1,4 +1,4 @@
-<!-- TODO: 重构UI -->
+<!-- 真境剧诗页面 TODO: 重构UI -->
 <template>
   <v-app-bar>
     <template #prepend>

src/request/recordReq.ts

@@ -84,12 +84,12 @@ async function index(
  * @since Beta v0.6.3
  * @param {TGApp.App.Account.Cookie} cookie Cookie
  * @param {TGApp.Sqlite.Account.Game} user 用户
- * @returns {Promise<TGApp.Game.Combat.Combat[] | TGApp.BBS.Response.Base|false>}
+ * @returns {Promise<Array<TGApp.Game.Combat.Combat> | TGApp.BBS.Response.Base|false>}
  */
 async function roleCombat(
   cookie: TGApp.App.Account.Cookie,
   user: TGApp.Sqlite.Account.Game,
-): Promise<TGApp.Game.Combat.Combat[] | TGApp.BBS.Response.Base | false> {
+): Promise<Array<TGApp.Game.Combat.Combat> | TGApp.BBS.Response.Base | false> {
   const ck = {
     account_id: cookie.account_id,
     cookie_token: cookie.cookie_token,

src/types/Game/Combat.d.ts

@@ -21,8 +21,14 @@ declare namespace TGApp.Game.Combat {
    * @property {boolean} is_unlock 是否解锁
    * @property {Record<string,string>} links 相关链接
    * @property {Array<Combat>} data 挑战数据
+   * @property {TarotState} tarot_card_state 塔罗牌状态
    */
-  type FullData = { is_unlock: boolean; links: Record<string, string>; data: Array<Combat> };
+  type FullData = {
+    is_unlock: boolean;
+    links: Record<string, string>;
+    data: Array<Combat>;
+    tarot_card_state: TarotState;
+  };
 
   /**
    * @description 角色数据
@@ -252,4 +258,25 @@ declare namespace TGApp.Game.Combat {
     start_date_time: TGApp.Game.Base.DateTime;
     end_date_time: TGApp.Game.Base.DateTime;
   };
+
+  /**
+   * @description 塔罗牌状态
+   * @since Beta v0.8.3
+   * @interface TarotState
+   * @property {number} total_num 总数
+   * @property {number} curr_num 当前数
+   * @property {Array<TarotCard>} list 卡片列表
+   */
+  type TarotState = { total_num: number; curr_num: number; list: Array<TarotCard> };
+
+  /**
+   * @description 塔罗牌
+   * @interface TarotCard
+   * @since Beta v0.8.3
+   * @property {string} icon 图标
+   * @property {string} name 名称
+   * @property {boolean} is_unlocked 是否解锁
+   * @property {number} unlock_num 解锁数
+   */
+  type TarotCard = { icon: string; name: string; is_unlocked: boolean; unlock_num: number };
 }