💄 调整抽奖UI

src/components/viewPost/tp-avatar.vue

@@ -12,6 +12,7 @@
         <TMiImg :ori="true" :src="props.data.pendant" alt="pendant" />
       </div>
       <div
+        v-if="props.data.level_exp"
         :class="{
           'tpa-level-left': props.position === 'left',
           'tpa-level-right': props.position === 'right',
@@ -40,6 +41,7 @@ const authorDesc = computed<string>(() => {
 });
 
 const levelColor = computed<string>(() => {
+  if (!props.data.level_exp) return "var(--tgc-od-white)";
   const level = props.data.level_exp.level;
   if (level < 5) return "var(--tgc-od-green)";
   if (level < 9) return "var(--tgc-od-blue)";

src/components/viewPost/tp-backupText.vue

@@ -1,13 +1,13 @@
 <template>
-  <div
+  <span
     v-if="props.data.insert.lottery"
     @click="showLottery = !showLottery"
     class="tp-backup-lottery"
     :title="`ID: ${props.data.insert.lottery.id}`"
   >
-    <v-icon size="small">mdi-gift</v-icon>
+    <v-icon size="16">mdi-gift</v-icon>
     <span>{{ props.data.insert.lottery.toast }}</span>
-  </div>
+  </span>
   <VpOverlayLottery
     v-if="props.data.insert.lottery"
     v-model="showLottery"
@@ -47,12 +47,13 @@ console.log("tpBackupText", props.data.insert.backup_text, toRaw(props.data));
 </script>
 <style lang="css" scoped>
 .tp-backup-lottery {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  margin-right: 4px;
   color: #00c3ff;
-  column-gap: 5px;
   cursor: pointer;
+
+  :first-child {
+    margin-right: 2px;
+  }
 }
 
 .tp-backup-fold {

src/components/viewPost/vp-overlay-lottery.vue

@@ -6,13 +6,7 @@
         <span class="tpol-time">{{ timeStatus }}</span>
       </div>
       <div class="tpol-list">
-        <v-list-item :title="card.creator.nickname" :subtitle="card.creator.introduce">
-          <template #prepend>
-            <v-avatar>
-              <v-img :src="card.creator.avatar_url" />
-            </v-avatar>
-          </template>
-        </v-list-item>
+        <TpAvatar :data="card.creator" position="left" />
         <div class="tpolr-title">参与方式：{{ upWay }}</div>
         <div class="tpolr-title">
           <span>奖品详情</span>
@@ -26,14 +20,13 @@
         <div v-for="reward in card.rewards" :key="reward.name" class="tpol-list">
           <div class="tpolr-title">{{ reward.name }} {{ reward.win }}/{{ reward.goal }}</div>
           <div class="tpol-grid">
-            <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
-              <div class="tpol-avatar">
-                <img :src="user.avatar_url" alt="avatar" />
-              </div>
-              <div class="tpol-nickname" :title="user.nickname">
-                {{ user.nickname }}
-              </div>
-            </div>
+            <TpAvatar
+              v-for="user in reward.users"
+              :key="user.uid"
+              :data="user"
+              position="left"
+              class="lottery-sub-list"
+            />
           </div>
         </div>
       </div>
@@ -44,6 +37,7 @@
 <script setup lang="ts">
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
+import TpAvatar from "@comp/viewPost/tp-avatar.vue";
 import { onUnmounted, ref, shallowRef, watch } from "vue";
 
 import painterReq from "@/web/request/painterReq.js";
@@ -105,6 +99,8 @@ function getUpWay(upWay: string): string {
   switch (upWay) {
     case "Forward":
       return "转发";
+    case "Reply":
+      return "回复";
     default:
       return upWay;
   }
@@ -163,11 +159,11 @@ onUnmounted(() => {
   max-width: 800px;
   max-height: 50vh;
   flex-direction: column;
-  padding: 10px;
-  border-radius: 10px;
+  padding: 8px;
+  border-radius: 8px;
   background: var(--box-bg-1);
   overflow-y: auto;
-  row-gap: 10px;
+  row-gap: 8px;
 }
 
 .tpol-title {
@@ -177,19 +173,19 @@ onUnmounted(() => {
 }
 
 .tpol-time {
-  margin-left: 10px;
+  margin-left: 8px;
   color: var(--tgc-red-1);
 }
 
 .tpol-list {
-  padding: 5px;
-  border-radius: 5px;
+  padding: 4px;
+  border-radius: 4px;
   background: var(--box-bg-2);
 }
 
 .tpolr-title {
   margin-bottom: 10px;
-  margin-left: 5px;
+  margin-left: 4px;
   font-size: 16px;
 }
 
@@ -200,41 +196,18 @@ onUnmounted(() => {
 
 .tpol-grid {
   display: grid;
-  border-radius: 10px;
-  gap: 5px;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 4px;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 }
 
 .lottery-sub-list {
-  display: flex;
-  height: 40px;
-  align-items: center;
-  border-radius: 40px;
-  background: var(--box-bg-3);
-}
-
-.tpol-avatar {
-  display: inline-block;
-  overflow: hidden;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin: 5px;
-}
-
-.tpol-avatar img {
+  position: relative;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.tpol-nickname {
-  overflow: hidden;
-  max-width: 120px;
-  color: var(--box-text-4);
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  height: 50px;
+  box-sizing: border-box;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 30px 4px 4px 30px;
+  background: var(--box-bg-3);
 }
 
 .tpol-id {

src/types/BBS/Post.d.ts

@@ -161,9 +161,7 @@ declare namespace TGApp.BBS.Post {
    * @property {string} avatar 用户头像
    * @property {number} gender 用户性别
    * @property {TGApp.BBS.User.Certification} certification 用户认证信息
-   * @property level_exp 用户等级经验
-   * @property {number} level_exp.level 用户等级
-   * @property {number} level_exp.exp 用户经验
+   * @property {TGApp.BBS.User.LevelExp|null} level_exp 用户经验
    * @property {boolean} is_following 是否关注
    * @property {boolean} is_followed 是否被关注
    * @property {string} avatar_url 用户头像链接
@@ -180,7 +178,7 @@ declare namespace TGApp.BBS.Post {
     avatar: string;
     gender: number;
     certification: TGApp.BBS.User.Certification;
-    level_exp: TGApp.BBS.User.LevelExp;
+    level_exp: TGApp.BBS.User.LevelExp | null;
     is_following: boolean;
     is_followed: boolean;
     avatar_url: string;