InformationDetailsView.vue 优化

src/views/InformationDetailsView.vue

@@ -24,12 +24,34 @@
           class="transaction-item"
         >
           <div class="transaction-content">
+            <!-- 用户头像 -->
+            <div class="user-avatar-container">
+              <img
+                v-if="transaction.userAvatar"
+                :src="transaction.userAvatar"
+                :alt="transaction.userNickname"
+                class="user-avatar"
+                @error="handleImageError"
+              />
+              <div v-else class="avatar-placeholder">
+                {{ getAvatarPlaceholder(transaction.userNickname) }}
+              </div>
+            </div>
+
+            <!-- 交易信息 -->
             <div class="transaction-info">
               <h3>{{ transaction.eventDescribe }}</h3>
+              <!-- 用户信息 -->
+              <div v-if="transaction.userNickname || transaction.account" class="user-info">
+                <span v-if="transaction.userNickname" class="user-nickname">{{ transaction.userNickname }}</span>
+                <span v-if="transaction.account" class="user-account">ID: {{ transaction.account }}</span>
+              </div>
               <p class="transaction-time">{{ transaction.createTime }}</p>
             </div>
+
+            <!-- 交易金额 -->
             <div class="transaction-amount" :class="transaction.isPositive ? 'positive' : 'negative'">
-              {{ transaction.amount > 0 ? '+' : '' }}{{ Math.abs(transaction.amount) }}
+              {{ transaction.amount > 0 ? '+' : '' }}${{ Math.abs(transaction.amount) }}
             </div>
           </div>
         </div>
@@ -100,7 +122,11 @@ const fetchData = async () => {
           amount: amount,
           balance: item.balance,
           event: item.event,
-          isPositive: isPositive
+          isPositive: isPositive,
+          // 添加用户信息字段
+          userAvatar: item.details?.userAvatar || null,
+          userNickname: item.details?.userNickname || null,
+          account: item.details?.account || null
         }
       })
     } else {
@@ -114,6 +140,17 @@ const fetchData = async () => {
   }
 }
 
+// 头像占位符
+const getAvatarPlaceholder = (nickname) => {
+  if (!nickname) return 'U'
+  return nickname.charAt(0).toUpperCase()
+}
+
+// 处理图片加载错误
+const handleImageError = (event) => {
+  console.warn('头像加载失败:', event.target.src)
+}
+
 // 页面加载时获取数据
 onMounted(() => {
   fetchData()
@@ -147,12 +184,38 @@ onMounted(() => {
 
 .transaction-content {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 12px;
+}
+
+/* 用户头像 */
+.user-avatar-container {
+  flex-shrink: 0;
+}
+
+.user-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #8B5CF6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .transaction-info {
   flex: 1;
+  min-width: 0; /* 为了支持text overflow */
 }
 
 .transaction-info h3 {
@@ -162,6 +225,25 @@ onMounted(() => {
   color: #333;
 }
 
+/* 用户信息 */
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 4px;
+}
+
+.user-nickname {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.user-account {
+  font-size: 12px;
+  color: #666;
+}
+
 .transaction-time {
   margin: 0;
   font-size: 14px;
@@ -171,8 +253,8 @@ onMounted(() => {
 .transaction-amount {
   font-size: 18px;
   font-weight: 600;
-  min-width: 40px;
   text-align: right;
+  flex-shrink: 0;
 }
 
 .transaction-amount.positive {
@@ -270,4 +352,38 @@ onMounted(() => {
   margin: 0;
   font-size: 16px;
 }
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .transaction-content {
+    gap: 10px;
+  }
+
+  .user-avatar,
+  .avatar-placeholder {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+
+  .transaction-info h3 {
+    font-size: 15px;
+  }
+
+  .user-nickname {
+    font-size: 13px;
+  }
+
+  .user-account {
+    font-size: 11px;
+  }
+
+  .transaction-time {
+    font-size: 13px;
+  }
+
+  .transaction-amount {
+    font-size: 16px;
+  }
+}
 </style>