fix: ui 调整

frontend_nuxt/pages/points.vue

@@ -16,49 +16,52 @@
     </div>
 
     <template v-if="selectedTab === 'mall'">
-      <section class="rules">
-        <div class="section-title">🎉 积分规则</div>
-        <div class="section-content">
-          <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
-        </div>
-      </section>
-
-      <div class="loading-points-container" v-if="isLoading">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-
-      <div class="point-info">
-        <p v-if="authState.loggedIn && point !== null">
-          <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span class="point-value">{{
-            point
-          }}</span>
-        </p>
-      </div>
-
-      <section class="goods">
-        <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
-          <img class="goods-item-image" :src="good.image" alt="good.name" />
-          <div class="goods-item-name">{{ good.name }}</div>
-          <div class="goods-item-cost">
-            <i class="fas fa-coins"></i>
-            {{ good.cost }} 积分
-          </div>
-          <div
-            class="goods-item-button"
-            :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
-            @click="openRedeem(good)"
-          >
-            兑换
+      <div class="point-mall-page-content">
+        <section class="rules">
+          <div class="section-title">🎉 积分规则</div>
+          <div class="section-content">
+            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
           </div>
+        </section>
+
+        <div class="loading-points-container" v-if="isLoading">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
         </div>
-      </section>
-      <RedeemPopup
-        :visible="dialogVisible"
-        v-model="contact"
-        :loading="loading"
-        @close="closeRedeem"
-        @submit="submitRedeem"
-      />
+
+        <div class="point-info">
+          <p v-if="authState.loggedIn && point !== null">
+            <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
+              class="point-value"
+              >{{ point }}</span
+            >
+          </p>
+        </div>
+
+        <section class="goods">
+          <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
+            <img class="goods-item-image" :src="good.image" alt="good.name" />
+            <div class="goods-item-name">{{ good.name }}</div>
+            <div class="goods-item-cost">
+              <i class="fas fa-coins"></i>
+              {{ good.cost }} 积分
+            </div>
+            <div
+              class="goods-item-button"
+              :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
+              @click="openRedeem(good)"
+            >
+              兑换
+            </div>
+          </div>
+        </section>
+        <RedeemPopup
+          :visible="dialogVisible"
+          v-model="contact"
+          :loading="loading"
+          @close="closeRedeem"
+          @submit="submitRedeem"
+        />
+      </div>
     </template>
 
     <template v-else>
@@ -77,14 +80,30 @@
                 }}</NuxtLink>
                 ，获得{{ item.amount }}积分
               </template>
-              <template v-else-if="item.type === 'COMMENT' && item.commentId && !item.fromUserId">
-                发送评论
-                <NuxtLink
-                  :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                  class="timeline-link"
-                  >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                >
-                ，获得{{ item.amount }}积分
+              <template v-else-if="item.type === 'COMMENT'">
+                在文章
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                中
+                <template v-if="!item.fromUserId">
+                  发送评论
+                  <NuxtLink
+                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                    class="timeline-link"
+                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                  >
+                  ，获得{{ item.amount }}积分
+                </template>
+                <template v-else>
+                  被评论
+                  <NuxtLink
+                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                    class="timeline-link"
+                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                  >
+                  ，获得{{ item.amount }}积分
+                </template>
               </template>
               <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
                 帖子
@@ -114,13 +133,13 @@
                 邀请了好友
                 <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
                   item.fromUserName
-                }}</NuxtLink
-                >，加入社区，获得 {{ item.amount }} 积分
-              </template>
-              <template v-else-if="item.type === 'SYSTEM_ONLINE'">
-                积分历史系统上线，你目前的积分是 {{ item.balance }}
+                }}</NuxtLink>
+                加入社区 🎉，获得 {{ item.amount }} 积分
               </template>
+              <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
+              <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
             </div>
+            <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
           </template>
         </BaseTimeline>
       </div>
@@ -136,6 +155,7 @@ import RedeemPopup from '~/components/RedeemPopup.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import { stripMarkdownLength } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -161,6 +181,15 @@ const contact = ref('')
 const loading = ref(false)
 const selectedGood = ref(null)
 
+const iconMap = {
+  POST: 'fas fa-file-alt',
+  COMMENT: 'fas fa-comment',
+  POST_LIKED: 'fas fa-thumbs-up',
+  COMMENT_LIKED: 'fas fa-thumbs-up',
+  INVITE: 'fas fa-user-plus',
+  SYSTEM_ONLINE: 'fas fa-clock',
+}
+
 onMounted(async () => {
   isLoading.value = true
   if (authState.loggedIn) {
@@ -195,7 +224,10 @@ const loadHistory = async () => {
     headers: { Authorization: `Bearer ${token}` },
   })
   if (res.ok) {
-    histories.value = await res.json()
+    histories.value = (await res.json()).map((item) => ({
+      ...item,
+      icon: iconMap[item.type],
+    }))
   }
   historyLoading.value = false
   historyLoaded.value = true
@@ -241,12 +273,15 @@ const submitRedeem = async () => {
 
 <style scoped>
 .point-mall-page {
-  padding: 0 20px;
   max-width: var(--page-max-width);
   background-color: var(--background-color);
   margin: 0 auto;
 }
 
+.point-mall-page-content {
+  padding: 0 20px;
+}
+
 .point-tabs {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
@@ -259,15 +294,21 @@ const submitRedeem = async () => {
 
 .point-tab-item.selected {
   border-bottom: 2px solid var(--primary-color);
-  font-weight: bold;
+  color: var(--primary-color);
 }
 
 .timeline-container {
-  margin-top: 20px;
+  padding: 10px 20px;
 }
 
 .timeline-link {
   color: var(--primary-color);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.timeline-link:hover {
+  text-decoration: underline;
 }
 
 .loading-points-container {
@@ -350,6 +391,17 @@ const submitRedeem = async () => {
   cursor: not-allowed;
 }
 
+.history-content {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.history-time {
+  font-size: 12px;
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
 .section-title {
   font-size: 18px;
   font-weight: bold;