diff --git a/frontend/pages/support-activity/center.vue b/frontend/pages/support-activity/center.vue
index 088eec6..75f26db 100644
--- a/frontend/pages/support-activity/center.vue
+++ b/frontend/pages/support-activity/center.vue
@@ -8,7 +8,9 @@
       :showTaskIcon="false"
       :showStarActivityIcon="false"
     /> -->
-
+    <view class="nav-back" @tap="goBack">
+      <text class="nav-back-icon">←</text>
+    </view>
     <!-- 状态栏占位 -->
     <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
 
@@ -224,6 +226,20 @@ const filteredActivities = computed(() => {
   );
 });
 
+const goBack = () => {
+  // 获取页面栈
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    // 有上一页，执行返回
+    uni.navigateBack();
+  } else {
+    // 没有上一页，跳转到square页面
+    uni.reLaunch({
+      url: "/pages/square/square",
+    });
+  }
+};
+
 function isEnded(item) {
   return item.status === "expired" || item.status === "completed";
 }
@@ -395,6 +411,24 @@ onShow(() => {
   }
 }
 
+.nav-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background: rgba(255,255,255,0.5);
+	border-radius: 50%; */
+  position: fixed;
+  top: 88rpx;
+  left: 32rpx;
+  z-index: 4;
+}
+
+.nav-back-icon {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
 .status-bar {
   width: 100%;
   background: transparent;
diff --git a/frontend/pages/support-activity/components/ActionBar.vue b/frontend/pages/support-activity/components/ActionBar.vue
index 25ff3a4..74a002f 100644
--- a/frontend/pages/support-activity/components/ActionBar.vue
+++ b/frontend/pages/support-activity/components/ActionBar.vue
@@ -502,8 +502,8 @@ async function contributeItem(item, isRetry = false, silent = false, qty = 1) {
       await updateLocalBalanceFromResult(result.remainingBalance);
     }
 
-    // 通知父组件更新进度（使用返回的当前进度）
-    emit("contribute", item.type, result.currentProgress);
+    // 通知父组件更新水晶余额（使用返回的剩余余额）
+    emit("contribute", item.type, result.remainingBalance);
 
     // 如果是重试成功或静默模式，不单独弹 toast
     if (!isRetry && !silent) {
diff --git a/frontend/pages/support-activity/components/ContributionList.vue b/frontend/pages/support-activity/components/ContributionList.vue
index efd4b2b..32778f2 100644
--- a/frontend/pages/support-activity/components/ContributionList.vue
+++ b/frontend/pages/support-activity/components/ContributionList.vue
@@ -1,8 +1,7 @@
 <template>
   <view class="contribution-list" v-if="visible">
-    <!-- <view class="list-header">
-      <text class="header-title">实时贡献</text>
-    </view> -->
+    <!-- 渐变模糊背景层 -->
+    <view class="list-bg"></view>
     <scroll-view class="list-content" scroll-y>
       <view
         v-for="(record, index) in records"
@@ -10,14 +9,34 @@
         class="contribution-item"
         :class="{ 'new-item': index === 0, 'fading-out': record.fading }"
       >
+        <!-- 左侧：用户信息（头像 + 昵称 + 赠送动作） -->
         <view class="user-info">
-          <image class="user-avatar" :src="record.avatar_url" mode="aspectFill" />
-          <text class="user-nickname">{{ record.nickname }}</text>
+          <image
+            class="user-avatar"
+            :src="record.avatar_url"
+            mode="aspectFill"
+          />
+          <view class="user-text">
+            <text class="user-nickname">{{ record.nickname }}</text>
+            <text class="gift-text" v-if="record.item_name"
+              >送{{ record.item_name }}</text
+            >
+          </view>
         </view>
-        <image class="item-icon" :src="record.item_icon" mode="aspectFill" />
-        <view class="quantity-info">
-          <text class="item-quantity">x</text>
-          <text class="item-count">{{ record.combo_count > 1 ? record.combo_count : record.quantity }}</text>
+
+        <!-- 右侧：道具图标（外层模块带 11° 旋转 + 红色阴影） -->
+        <view class="item-icon-wrap">
+          <image class="item-icon" :src="record.item_icon" mode="aspectFill" />
+          <view class="quantity-info">
+            <text class="item-x">X</text>
+            <text
+              class="item-count"
+              :class="`count-${(record.combo_count > 1 ? record.combo_count : record.quantity).toString().length}-digit`"
+              >{{
+                record.combo_count > 1 ? record.combo_count : record.quantity
+              }}</text
+            >
+          </view>
         </view>
       </view>
     </scroll-view>
@@ -25,37 +44,83 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useContributionPolling } from '../composables/useContributionPolling.js'
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useContributionPolling } from "../composables/useContributionPolling.js";
 
 const props = defineProps({
   activityId: {
     type: String,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-const isPageActive = ref(true)
+const isPageActive = ref(true);
 
 // 使用轮询 composable
-const { records, visible, loading, error, start, stop, reset } = useContributionPolling(
-  computed(() => props.activityId),
-  isPageActive
-)
+const { records, visible, loading, error, start, stop, reset } =
+  useContributionPolling(
+    computed(() => props.activityId),
+    isPageActive,
+  );
 
 onMounted(() => {
-  isPageActive.value = true
-})
+  isPageActive.value = true;
+});
 
 // 页面生命周期集成
 onUnmounted(() => {
-  stop()
-})
+  stop();
+});
 
 // 暴露给父组件使用
 defineExpose({
-  reset
-})
+  reset,
+});
+
+/**
+ * 估算单行文本宽度（rpx）
+ * - CJK 字符按 1.0 * fontSize 计算（方形字宽 ≈ fontSize）
+ * - 其它字符按 0.55 * fontSize 计算（拉丁/数字字宽 ≈ 半个 fontSize）
+ */
+const estimateTextWidth = (text, fontSize) => {
+  if (!text) return 0;
+  let width = 0;
+  for (const ch of String(text)) {
+    // CJK Unified Ideographs + 标点 + 日韩文范围
+    if (/[　-鿿＀-￯]/.test(ch)) {
+      width += fontSize * 1.0;
+    } else {
+      width += fontSize * 0.55;
+    }
+  }
+  return Math.round(width);
+};
+
+/**
+ * 根据昵称（+赠送道具名）动态计算胶囊宽度
+ * 组成：左右内边距(32) + 头像(78) + 头像间距(16) + 文字宽度 + 文字右侧间距(16)
+ *      + 数量区宽度（X + 数字，数字按 1 位约 56rpx 兜底）
+ */
+const getItemWidth = (record) => {
+  const nickname = record?.nickname || "";
+  const giftName = record?.item_name || "";
+
+  const nicknameWidth = estimateTextWidth(nickname, 24);
+  const giftWidth = estimateTextWidth("送" + giftName, 20);
+  // 文字列宽度取两者中较宽的一行
+  const textWidth = Math.max(nicknameWidth, giftWidth);
+
+  // 数量区：item-x (32) + 间距(6) + item-count（按 1 位 56rpx 兜底，多位由 font-size 调整但宽度更窄）
+  // const quantityWidth = 32 + 6 + 56;
+
+  // 固定部分：左内边距16 + 头像78 + 头像右侧间距16 + 文字右侧间距16 + 右内边距16
+  const FIXED = 16 + 78 + 16 + 16 + 16;
+
+  const total = FIXED + textWidth;
+
+  // 兜底 min/max 与 CSS 保持一致
+  return Math.min(420, Math.max(200, total));
+};
 </script>
 
 <style scoped>
@@ -63,44 +128,54 @@ defineExpose({
   width: 100%;
   padding: 0 24rpx;
   margin-top: 32rpx;
+  position: relative;
 }
 
-.list-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 16rpx;
-}
-
-.header-title {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #fff;
-  /* text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5); */
+/* 渐变模糊背景层：Figma 中的 4 色径向 + 50px 模糊 */
+.list-bg {
+  position: absolute;
+  top: 0;
+  left: 24rpx;
+  right: 24rpx;
+  height: 512rpx;
+  border-radius: 48rpx;
+  background: linear-gradient(
+    131.84deg,
+    rgba(154, 146, 255, 0.47) 9.69%,
+    rgba(255, 202, 229, 0.47) 43.91%,
+    rgba(255, 250, 253, 0.465) 76.13%,
+    rgba(63, 63, 76, 0.47) 91.61%
+  );
+  filter: blur(50rpx);
+  z-index: 0;
+  pointer-events: none;
 }
 
 .list-content {
-  height: 280rpx;
-  border-radius: 16rpx;
-  padding: 16rpx;
+  height: 512rpx;
+  border-radius: 24rpx;
+  padding: 24rpx 16rpx;
+  position: relative;
+  z-index: 1;
 }
 
+/* 单条贡献 item：胶囊形状 + 红色阴影 + 宽度跟随昵称 */
 .contribution-item {
-  width: 384rpx;
-  height: 8rpx;
+  /* 宽度由 :style 注入的 --item-width 控制（跨端最稳）；CSS 仅兜底 min/max */
+  width: max-content;
+  min-width: 200rpx;
+  max-width: 420rpx;
+  height: 88rpx;
   display: flex;
   align-items: center;
-  padding: 16rpx 0;
-  background:  rgba(0, 0, 0, 0.1);
+
+  margin-bottom: 24rpx;
   animation: fadeIn 0.3s ease-out;
   position: relative;
-  top: 32rpx;
-  border-radius: 999rpx;
-  margin-bottom: 48rpx;
 }
 
 .contribution-item:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }
 
 .new-item {
@@ -111,65 +186,118 @@ defineExpose({
   animation: fadeOut 0.5s forwards;
 }
 
+/* 左侧：用户信息容器（头像 + 文字） */
 .user-info {
   display: flex;
   align-items: center;
-  background-image: url('@/static/rank/activity-support-icon/beijingkuang.png');
-  background-size: 105% 130%;
-  background-position: center;
-  /* padding: 0 32rpx 0 40rpx; */
+  /* 不再 flex:1 撑满，宽度跟随内容 */
+  flex: 0 0 auto;
+  min-width: 0;
   border-radius: 999rpx;
-  margin-right: 32rpx;
+  padding: 8rpx 16rpx;
+  padding-right: 64rpx;
+  box-shadow: 0 4rpx 8rpx rgba(102, 7, 7, 0.25);
+  background-image: url("@/static/rank/activity-support-icon/beijingkuang.png");
+  background-size: 100% 130%;
+  background-position: center;
 }
 
+/* 头像：圆形 + 红色阴影 */
 .user-avatar {
-  width: 40rpx;
-  height: 40rpx;
+  width: 78rpx;
+  height: 78rpx;
   border-radius: 50%;
   margin-right: 16rpx;
+  box-shadow: 2rpx 2rpx 8rpx rgba(181, 7, 7, 0.54);
+  flex-shrink: 0;
 }
 
-.user-nickname {
-  font-size: 16rpx;
-  color: #fff;
-  padding: 0 32rpx 0 16rpx;
-  max-width: 120rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
-}
-
-
-.item-icon {
-  width: 72rpx;
-  height: 72rpx;
-  position: relative;
-  bottom: 8rpx;
-  margin-right: 24rpx;
-}
-
-.quantity-info {
-  position: relative;
-  right: 0;
-  bottom: 8rpx;
+/* 文字容器（昵称 + 赠送动作） */
+.user-text {
   display: flex;
-  align-items: baseline;
+  flex-direction: column;
+  justify-content: center;
+  /* 不再 flex:1，让昵称真实宽度决定容器宽度 */
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 
-.item-quantity {
-  font-size: 20rpx;
-  color: #ffcc00;
+/* 昵称：黄色 + 红色文字阴影 */
+.user-nickname {
+  font-size: 24rpx;
   font-weight: bold;
-  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
-  margin-right: 8rpx;
+  color: #fff9a1;
+  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.45);
+  white-space: nowrap;
+  line-height: 1.2;
+  font-family: "Abhaya Libre ExtraBold", sans-serif;
+}
+
+/* 赠送动作文本 */
+.gift-text {
+  font-size: 20rpx;
+  color: #ffffff;
+  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.45);
+  white-space: nowrap;
+  line-height: 1.2;
+  margin-top: 2rpx;
+  font-family: "Abhaya Libre ExtraBold", sans-serif;
+}
+
+/* 道具图标外层：带 11° 旋转 + 红色阴影 + 绝对定位伸出版心 */
+.item-icon-wrap {
+  display: flex;
+  /* position: absolute;
+  right: -64rpx; */
+  border-radius: 8rpx;
+  margin-left: -40rpx;
+}
+
+/* 道具图标本体：填满外层模块 */
+.item-icon {
+  width: 96rpx;
+  height: 96rpx;
+  display: block;
+  transform: rotate(11deg);
+  transform-origin: center center;
+}
+
+/* 数量区域：X 白色 + 数字黄色 */
+.quantity-info {
+  display: flex;
+  align-items: flex-end;
+  text-shadow: -0.0625rem 0.0625rem 0.25rem rgba(206, 9, 9, 0.45);
+  margin-left: 16rpx;
+}
+
+.item-x {
+  font-size: 32rpx;
+  color: #ffffff;
+  font-style: italic;
+  margin-right: 6rpx;
 }
 
 .item-count {
-  font-size: 38rpx;
-  color: #ffcc00;
+  font-size: 56rpx;
+  color: #f7e600;
   font-weight: bold;
-  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+  line-height: 1;
+  font-style: italic;
+}
+
+/* 数字位数不同对应不同尺寸，对照 Figma 设计：3位 76rpx / 2位 52rpx / 1位 48rpx */
+.count-1-digit {
+  font-size: 48rpx;
+}
+.count-2-digit {
+  font-size: 52rpx;
+}
+.count-3-digit {
+  font-size: 76rpx;
+}
+.count-4-digit,
+.count-5-digit {
+  font-size: 64rpx;
 }
 
 @keyframes fadeIn {
@@ -195,7 +323,11 @@ defineExpose({
 }
 
 @keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/pages/support-activity/components/MessageBoard.vue b/frontend/pages/support-activity/components/MessageBoard.vue
new file mode 100644
index 0000000..f041e73
--- /dev/null
+++ b/frontend/pages/support-activity/components/MessageBoard.vue
@@ -0,0 +1,108 @@
+<template>
+  <view class="message-board">
+    <scroll-view class="message-board-scroll" scroll-y :scroll-top="scrollTop">
+      <view v-for="msg in messages" :key="msg.id" class="message-bubble">
+        <text class="msg-user">{{ msg.user }}：</text>
+        <text class="msg-content">{{ msg.content }}</text>
+      </view>
+      <view v-if="messages.length === 0" class="empty-tip">
+        <text>暂无留言,快来抢沙发吧~</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+const props = defineProps({
+  messages: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const scrollTop = ref(0);
+
+// 监听消息变化,自动滚动到底部
+watch(
+  () => props.messages.length,
+  async () => {
+    await nextTick();
+    scrollTop.value = 99999;
+  },
+);
+</script>
+
+<style scoped>
+.message-board {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  padding: 0 34rpx; /* 对应 Figma 中 left: 17px */
+}
+
+.message-board-scroll {
+  height: 480rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* 气泡左对齐,宽度适应内容 */
+  gap: 6rpx; /* 对应 Figma 中 3px 间距,rpx 自动换算 */
+}
+
+/* 留言气泡:对应 Figma 留言板 的圆角矩形 */
+.message-bubble {
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  max-width: 100%;
+  padding: 6rpx 16rpx; /* 适当内边距,让文字与气泡边距舒适 */
+  background: rgba(42, 17, 17, 0.3);
+  border-radius: 16rpx; /* 8px = 16rpx */
+  /* Figma 中的微妙旋转与倾斜,营造手写/手帐感 */
+  transform: rotate(-0.44deg) skewX(-0.1deg);
+  animation: bubbleFadeIn 0.3s ease-out;
+  box-sizing: border-box;
+}
+
+.msg-user {
+  font-size: 24rpx; /* 12px = 24rpx */
+  color: #acf0c3;
+  font-weight: bold;
+  text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.45);
+  font-family: "Abhaya Libre ExtraBold", sans-serif;
+  line-height: 1.5;
+}
+
+.msg-content {
+  font-size: 24rpx; /* 12px = 24rpx */
+  color: #ffffff;
+  font-weight: bold;
+  text-shadow: -1rpx 1rpx 4rpx rgba(206, 9, 9, 0.45);
+  font-family: "Abhaya Libre ExtraBold", sans-serif;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.empty-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200rpx;
+  width: 100%;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 24rpx;
+}
+
+@keyframes bubbleFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx) rotate(-0.44deg) skewX(-0.1deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) rotate(-0.44deg) skewX(-0.1deg);
+  }
+}
+</style>
diff --git a/frontend/pages/support-activity/components/MessageInput.vue b/frontend/pages/support-activity/components/MessageInput.vue
new file mode 100644
index 0000000..475765b
--- /dev/null
+++ b/frontend/pages/support-activity/components/MessageInput.vue
@@ -0,0 +1,206 @@
+<template>
+  <!--
+    Figma 147:325 (Group 50, 296x42)
+    展示型留言条:左侧圆形头像 + 中间居中文本 + 右侧表情 + 发送箭头
+    点击整条 / 点击发送箭头会触发 send 事件,父组件可弹出真实输入面板
+  -->
+  <view class="message-row" @click="handleTap">
+    <!-- 外层 pill 容器 (296x42, radius 20) -->
+    <view class="message-row__pill">
+      <!-- 内嵌凹槽 (238x30, radius 16) -->
+      <view class="message-row__groove">
+        <text class="message-row__text">{{ displayText }}</text>
+      </view>
+    </view>
+
+    <!-- 左侧圆形头像 (35x35) -->
+    <view class="message-row__avatar">
+      <image
+        class="message-row__avatar-img"
+        :src="avatar || defaultAvatar"
+        mode="aspectFill"
+      />
+    </view>
+
+    <!-- 骰子表情 (17x17) -->
+    <image
+      class="message-row__emoji"
+      src="/static/rank/activity-support-icon/message-row/emoji.png"
+      mode="aspectFit"
+    />
+
+    <!-- 发送箭头 (21x21) -->
+    <view class="message-row__send" @click.stop="handleSend">
+      <image
+        class="message-row__send-img"
+        src="/static/rank/activity-support-icon/message-row/send.png"
+        mode="aspectFit"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  /**
+   * 展示的文案:父组件可传入最新一条留言,默认使用 Figma 设计稿文案。
+   */
+  text: {
+    type: String,
+    default: "今天第一天姐妹们大家冲鸭！！！",
+  },
+  /**
+   * 头像 URL,未传时回退到默认头像。
+   */
+  avatar: {
+    type: String,
+    default: "",
+  },
+  /**
+   * 兼容旧用法:外部如果还在传 placeholder,作为 text 的兜底。
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["send", "tap"]);
+
+const defaultAvatar =
+  "/static/rank/activity-support-icon/message-row/avatar.png";
+
+const displayText = computed(() => {
+  if (props.text && props.text.trim().length > 0) return props.text;
+  if (props.placeholder && props.placeholder.trim().length > 0)
+    return props.placeholder;
+  return "今天第一天姐妹们大家冲鸭！！！";
+});
+
+function handleTap() {
+  emit("tap");
+}
+
+function handleSend() {
+  // 展示型组件:点击发送图标抛出事件,业务侧决定弹出输入面板 / 直接发送等行为
+  emit("send", displayText.value);
+}
+</script>
+
+<style scoped>
+/*
+ * 设计稿原始尺寸 (px)  →  rpx (按 750 / 375 = 2 倍换算)
+ * 容器     296 x 42    →  592rpx x 84rpx
+ * 凹槽     238 x 30    →  476rpx x 60rpx  (left 12px=24rpx,top 6px=12rpx)
+ * 头像     35  x 35    →  70rpx  x 70rpx  (left 6px=12rpx,top 3px=6rpx)
+ * 文本     11px        →  22rpx
+ * emoji   17  x 17    →  34rpx  x 34rpx
+ * send    21  x 21    →  42rpx  x 42rpx
+ */
+
+.message-row {
+  position: fixed;
+  left: 22rpx; /* 11px */
+  bottom: 32rpx;
+  width: 592rpx;
+  height: 84rpx;
+  z-index: 50;
+}
+
+/* 外层 pill */
+.message-row__pill {
+  position: absolute;
+  inset: 0;
+  background: rgba(217, 217, 217, 0.4);
+  border-radius: 40rpx; /* 20px */
+  box-shadow: 2rpx 4rpx 8rpx 0 rgba(0, 0, 0, 0.25);
+}
+
+/* 内嵌凹槽 */
+.message-row__groove {
+  position: absolute;
+  left: 24rpx; /* 12px */
+  top: 12rpx; /* 6px */
+  width: 476rpx; /* 238px */
+  height: 60rpx; /* 30px */
+  background: rgba(54, 51, 51, 0.1);
+  border-radius: 32rpx; /* 16px */
+  display: flex;
+  align-items: center;
+  /* 头像突出在 pill 左侧,文字从凹槽右半段开始;末尾留出表情 + 发送图标空间 */
+  padding-left: 80rpx;
+  padding-right: 120rpx;
+  overflow: hidden;
+}
+
+.message-row__text {
+  display: block;
+  width: 100%;
+  font-size: 22rpx; /* 11px */
+  line-height: 1.3;
+  color: #ffffff;
+  font-weight: bold;
+  font-family: "Abhaya Libre ExtraBold", "PingFang SC", sans-serif;
+  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.45);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 设计稿的轻微倾斜 */
+  transform: rotate(-0.44deg) skewX(-0.1deg);
+  transform-origin: center;
+}
+
+/* 左侧头像 (突出 pill 左缘) */
+.message-row__avatar {
+  position: absolute;
+  left: 12rpx; /* 6px */
+  top: 6rpx; /* 3px */
+  width: 70rpx; /* 35px */
+  height: 70rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 0 14rpx 0 rgba(203, 24, 24, 0.84);
+  background: #2a1111;
+}
+
+.message-row__avatar-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* 骰子表情 */
+.message-row__emoji {
+  position: absolute;
+  right: 92rpx; /* ≈ 46px from right edge */
+  top: 24rpx; /* (84-34)/2 ≈ 25 */
+  width: 34rpx; /* 17px */
+  height: 34rpx;
+  filter: drop-shadow(0 4rpx 8rpx rgba(138, 6, 6, 0.74));
+}
+
+/* 右侧发送箭头 (可点击) */
+.message-row__send {
+  position: absolute;
+  right: 28rpx; /* ≈ 14px */
+  top: 20rpx; /* 21 */
+  width: 42rpx; /* 21px */
+  height: 42rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 6rpx 8rpx rgba(0, 0, 0, 0.47));
+}
+
+.message-row__send-img {
+  width: 100%;
+  height: 100%;
+}
+
+.message-row__send:active {
+  transform: scale(0.92);
+  transition: transform 0.12s ease;
+}
+</style>
diff --git a/frontend/pages/support-activity/components/TopRanking.vue b/frontend/pages/support-activity/components/TopRanking.vue
new file mode 100644
index 0000000..d4ae32f
--- /dev/null
+++ b/frontend/pages/support-activity/components/TopRanking.vue
@@ -0,0 +1,240 @@
+<template>
+  <view class="top-ranking" @tap="handleOpenRanking">
+    <!-- TOP3 头像组（对应 Figma 110-671） -->
+    <view v-if="top3List.length > 0" class="top3-card">
+      <view v-for="item in top3List" :key="item.userId" class="top3-item">
+        <image
+          class="top3-avatar"
+          :src="item.avatar || '/static/avatar/1.jpeg'"
+          mode="aspectFill"
+          @error="handleAvatarError"
+        />
+        <image
+          class="top3-medal"
+          :src="`/static/rank/rank-icon${item.rank}.png`"
+          mode="aspectFit"
+        />
+      </view>
+    </view>
+
+    <!-- 我的排名条（对应 Figma 110-662） -->
+    <view v-if="myInfo.rank" class="my-rank-card">
+      <view class="my-rank-row">
+        <image
+          class="my-avatar"
+          :src="myInfo.avatar || '/static/avatar/1.jpeg'"
+          mode="aspectFill"
+          @error="handleAvatarError"
+        />
+        <text class="my-rank-label">当前排名</text>
+        <text class="my-rank-number">{{ myInfo.rank }}</text>
+        <image
+          class="my-rank-icon"
+          src="/static/rank/lsph.png"
+          mode="aspectFit"
+        />
+      </view>
+      <view class="my-rank-row">
+        <text class="my-rank-label">距离上一名贡献值</text>
+        <text class="my-rank-number">{{ myInfo.gapToPrev }}</text>
+        <image
+          class="my-rank-icon"
+          src="/static/icon/crystal.png"
+          mode="aspectFit"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { getActivityRankingApi } from "@/utils/api.js";
+
+const props = defineProps({
+  activityId: {
+    type: [String, Number],
+    required: true,
+  },
+  starId: {
+    type: [String, Number],
+    default: null,
+  },
+});
+
+const emit = defineEmits(["open-ranking"]);
+
+// TOP3 数据
+const top3List = ref([]);
+
+// 我的排名数据
+const myInfo = ref({
+  rank: null,
+  avatar: "",
+  gapToPrev: 0,
+});
+
+// 头像加载失败兜底
+function handleAvatarError(e) {
+  e.target.src = "/static/avatar/1.jpeg";
+}
+
+// 打开排行榜弹窗
+function handleOpenRanking() {
+  emit("open-ranking");
+}
+
+// 计算「距离上一名贡献值」：取 (第 N-1 名的 total_contribution - 我的 total_contribution)
+function calcGapToPrev(myContribution, allItems) {
+  if (!myContribution || !Array.isArray(allItems)) return 0;
+  const myRank = myContribution.rank;
+  if (!myRank || myRank <= 1) return 0; // 第 1 名没有上一名
+  const prev = allItems.find((u) => u.rank === myRank - 1);
+  if (!prev) return 0;
+  const gap =
+    (prev.total_contribution || 0) - (myContribution.total_contribution || 0);
+  return gap > 0 ? gap : 0;
+}
+
+// 加载排行数据
+async function loadRanking() {
+  if (!props.activityId) return;
+  try {
+    const sid = props.starId || uni.getStorageSync("star_id");
+    const res = await getActivityRankingApi(props.activityId, sid, 1, 3);
+    if (res && res.code === 0 && res.data) {
+      const items = Array.isArray(res.data.items) ? res.data.items : [];
+      // TOP3
+      top3List.value = items
+        .filter((u) => u.rank >= 1 && u.rank <= 3)
+        .sort((a, b) => a.rank - b.rank)
+        .map((u) => ({
+          rank: u.rank,
+          userId: String(u.user_id),
+          avatar: u.avatar_url || "/static/avatar/1.jpeg",
+        }));
+
+      // 我的信息
+      const my = res.data.my_contribution;
+      if (my && my.rank) {
+        myInfo.value = {
+          rank: my.rank,
+          avatar: my.avatar_url || "/static/avatar/1.jpeg",
+          gapToPrev: calcGapToPrev(my, items),
+        };
+      } else {
+        myInfo.value = { rank: null, avatar: "", gapToPrev: 0 };
+      }
+    }
+  } catch (err) {
+    console.error("[TopRanking] 加载排行失败", err);
+  }
+}
+
+onMounted(() => {
+  loadRanking();
+});
+
+defineExpose({
+  refresh: loadRanking,
+});
+</script>
+
+<style scoped>
+.top-ranking {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12rpx;
+}
+
+/* TOP3 卡片（对应 110-671：圆角深红半透明 + 3 个头像 + 奖牌） */
+.top3-card {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 6rpx 12rpx;
+  background: rgba(42, 17, 17, 0.3);
+  border-radius: 22rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
+}
+
+.top3-item {
+  position: relative;
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.top3-avatar {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
+  background: #fff;
+}
+
+.top3-medal {
+  position: absolute;
+  bottom: -10rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32rpx;
+  height: 32rpx;
+}
+
+/* 我的排名卡片（对应 110-662：圆角深红半透明 + 头像 + 文案 + 数字 + 图标） */
+.my-rank-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  padding: 8rpx 14rpx;
+  background: rgba(42, 17, 17, 0.3);
+  border-radius: 22rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
+  min-width: 208rpx;
+}
+
+.my-rank-row {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.my-avatar {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
+  box-shadow: 1px 1px 4px 0 rgba(181, 7, 7, 0.54);
+  background: #fff;
+  margin-right: 4rpx;
+}
+
+.my-rank-label {
+  font-size: 20rpx;
+  color: #fff;
+  font-weight: bold;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.45);
+  flex: 1;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.my-rank-number {
+  font-size: 28rpx;
+  color: #fffabd;
+  font-weight: bold;
+  font-family: "yt", "Baloo Bhai", sans-serif;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.45);
+  margin: 0 8rpx;
+}
+
+.my-rank-icon {
+  width: 40rpx;
+  height: 32rpx;
+  transform: rotate(-10deg);
+}
+</style>
diff --git a/frontend/pages/support-activity/composables/useContributionPolling.js b/frontend/pages/support-activity/composables/useContributionPolling.js
index c2a0094..f0a9895 100644
--- a/frontend/pages/support-activity/composables/useContributionPolling.js
+++ b/frontend/pages/support-activity/composables/useContributionPolling.js
@@ -5,12 +5,15 @@ import { getActivityContributionsLatestApi } from '@/utils/api.js'
  * 贡献轮询逻辑 composable
  * @param {Ref<string>} activityId - 活动ID
  * @param {boolean} isPageActive - 页面是否可见
+ * @param {Object} [options] - 配置项
+ * @param {boolean} [options.enableTTL=false] - 是否开启"每条记录 5 秒后自动消失"的开关（默认关闭，记录一直保留直到被新数据挤掉）
+ * @param {number} [options.ttlMs=5000] - 自动消失的延时（毫秒），仅在 enableTTL=true 时生效
  * @returns {Object} records, visible, loading, error, start, stop, reset
  */
-export function useContributionPolling(activityId, isPageActive) {
+export function useContributionPolling(activityId, isPageActive, options = {}) {
+  const { enableTTL = false, ttlMs = 5000 } = options
   const MAX_RECORDS = 5
   const POLL_INTERVAL = 1000 // 每秒拉取
-  const RECORD_TTL = 5000 // 每条记录 5 秒后消失
 
   const records = ref([])
   const visible = ref(true)
@@ -25,6 +28,9 @@ export function useContributionPolling(activityId, isPageActive) {
 
   // 重置记录计时器
   function resetRecordTimer(record) {
+    // TTL 功能未开启时：不做任何定时器与淡出处理，记录会一直保留
+    if (!enableTTL) return
+
     // 清除已有定时器
     if (recordTimers.has(record.id)) {
       clearTimeout(recordTimers.get(record.id))
@@ -49,7 +55,7 @@ export function useContributionPolling(activityId, isPageActive) {
       } else {
         recordTimers.delete(record.id)
       }
-    }, RECORD_TTL)
+    }, ttlMs)
     recordTimers.set(record.id, timer)
   }
 
@@ -58,7 +64,7 @@ export function useContributionPolling(activityId, isPageActive) {
     if (!activityId.value) return
 
     try {
-      const res = await getActivityContributionsLatestApi(activityId.value, latestTimestamp, latestId, 1)
+      const res = await getActivityContributionsLatestApi(activityId.value, latestTimestamp, latestId, 3)
 
       // 处理 code 不为 200 的情况（静默忽略）
       if (res.code !== 0) return
@@ -66,22 +72,22 @@ export function useContributionPolling(activityId, isPageActive) {
       const newRecords = res.data?.records || []
       if (newRecords.length === 0) return
 
-      const newRecord = newRecords[0]
-
-      // 检测到新记录（时间戳更新，或时间戳相同但 ID 更新）
-      const isNew = newRecord.created_at > latestTimestamp ||
-        (newRecord.created_at === latestTimestamp && newRecord.id > latestId)
+      // API 返回的 records 按 created_at DESC, id DESC 排序。
+      // 只需比对第一条；后面的记录时间戳/ID 必然不更小。
+      const firstRecord = newRecords[0]
+      const isNew = firstRecord.created_at > latestTimestamp ||
+        (firstRecord.created_at === latestTimestamp && firstRecord.id > latestId)
 
       if (isNew) {
         // 重置所有现有记录的计时器（新数据到来，刷新列表）
         records.value.forEach(resetRecordTimer)
-        // 新记录插入到列表头部
-        records.value = [newRecord, ...records.value].slice(0, MAX_RECORDS)
-        // 为新记录启动消失计时器
-        resetRecordTimer(newRecord)
-        // 更新时间戳和 ID
-        latestTimestamp = newRecord.created_at
-        latestId = newRecord.id
+        // 一次性插入本轮拉取到的全部新记录（API 已按"新→旧"排序，新的在前）
+        records.value = [...newRecords, ...records.value].slice(0, MAX_RECORDS)
+        // 为每条新记录启动消失计时器
+        newRecords.forEach(resetRecordTimer)
+        // 更新游标到最新一条
+        latestTimestamp = firstRecord.created_at
+        latestId = firstRecord.id
       }
     } catch (e) {
       // 网络错误等，静默忽略，继续等待下一次轮询
diff --git a/frontend/pages/support-activity/index.vue b/frontend/pages/support-activity/index.vue
index b667c77..9b16f46 100644
--- a/frontend/pages/support-activity/index.vue
+++ b/frontend/pages/support-activity/index.vue
@@ -6,10 +6,51 @@
       backIconColor="#e6e6e6"
       :showGuideIcon="false" :showTaskIcon="false" :showStarActivityIcon="false"
     /> -->
-    
+    <view class="nav-back" @tap="goBack">
+      <text class="nav-back-icon">←</text>
+    </view>
+    <!-- 左上角水晶余额（fixed 悬浮，与右上角 TopRanking 对称） -->
+    <view class="crystal-balance-new">
+      <!-- 1. 左侧钻石图标：层级最高，盖住右侧背景 -->
+      <view class="crystal-icon-box">
+        <image
+          class="crystal-icon"
+          src="/static/icon/crystal.png"
+          mode="aspectFit"
+        ></image>
+      </view>
+
+      <!-- 2. 右侧容器：用于包裹背景和文字 -->
+      <view class="crystal-info-container">
+        <!-- <image
+          class="crystal-bg-img"
+          src="/static/rank/sjbj.png"
+          mode="aspectFill"
+        >
+        </image> -->
+        <view class="crystal-bg"></view>
+        <!-- 上层：文字内容 -->
+        <view class="crystal-text-layer">
+          <text class="balance-number">{{ exhibitionRevenue }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 右上角 TOP3 + 我的排名（悬浮） @open-ranking="openRankingModal"-->
+    <TopRanking
+      v-if="activityId && !isLoading"
+      :activity-id="activityId"
+      class="top-ranking-wrapper"
+    />
+    <view class="rank-ph" @tap="openRankingModal">
+      <image class="ph-image" src="/static/rank/phtb.png" mode="aspectFit">
+      </image>
+      <text class="ph-text">排行榜</text>
+    </view>
+
     <!-- 状态栏占位 -->
     <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    
+
     <!-- 主题横幅 -->
     <!-- <ThemeBanner
       v-if="config"
@@ -35,14 +76,14 @@
     />
 
     <!-- 舞台区域 -->
-    <StageArea
+    <!-- <StageArea
       v-if="config"
       :activity-type="activityType"
       :config="config"
       :is-completed="isCompleted"
       @animation-complete="onAnimationComplete"
-    />
-    
+    /> -->
+
     <!-- 悬浮气泡 -->
     <!-- <FloatingBubbles
       v-show="config"
@@ -51,15 +92,22 @@
       :current="progressData.current"
       :target="progressData.target"
     /> -->
-    
+
     <!-- 底部操作栏触发按钮 -->
     <view class="action-bar-trigger" @click="toggleActionBar">
       <view class="trigger-btn">
-        <image src="/static/rank/activity-support-icon/lihe.png" class="trigger-icon" mode="aspectFit" />
+        <image
+          src="/static/rank/activity-support-icon/lihe.png"
+          class="trigger-icon"
+          mode="aspectFit"
+        />
       </view>
       <!-- <text class="trigger-text">我要贡献</text> -->
     </view>
 
+    <!-- 留言输入框:对齐底部确认赠送按钮位置 -->
+    <MessageInput placeholder="留下你的祝福..." @send="handleSendMessage" />
+
     <!-- 底部操作栏弹出框 -->
     <view v-if="actionBarVisible" class="action-bar-popup">
       <!-- 遮罩层 -->
@@ -75,6 +123,9 @@
       </view>
     </view>
 
+    <!-- 留言板弹出框 -->
+    <MessageBoard :messages="messageList" />
+
     <!-- 底部导航 -->
     <!-- <BottomNav 
       :activeTab="activeTab"
@@ -82,22 +133,29 @@
       @update:activeTab="handleTabChange"
       @update:isExpanded="navExpanded = $event"
     /> -->
-    
+
     <!-- 蒙层 - 导航栏展开时显示 -->
-    <view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
-    
+    <view
+      v-if="navExpanded"
+      class="nav-mask"
+      @click="navExpanded = false"
+    ></view>
+
     <!-- 加载状态 -->
     <view v-if="isLoading" class="loading-overlay">
       <view class="loading-spinner"></view>
       <text class="loading-text">加载中...</text>
       <view v-if="loadingProgress > 0" class="loading-progress">
         <view class="progress-bar-container">
-          <view class="progress-bar-fill" :style="{ width: loadingProgress + '%' }"></view>
+          <view
+            class="progress-bar-fill"
+            :style="{ width: loadingProgress + '%' }"
+          ></view>
         </view>
         <text class="progress-text">{{ Math.round(loadingProgress) }}%</text>
       </view>
     </view>
-    
+
     <!-- 错误状态 -->
     <view v-if="errorMessage" class="error-overlay">
       <view class="error-content">
@@ -120,180 +178,294 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app'
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { onLoad, onUnload, onShow, onHide } from "@dcloudio/uni-app";
 import {
   fetchActivityDetail,
   fetchActivityProgress,
-} from '@/utils/activity-config'
-import { getProgressManager, releaseProgressManager, cleanupProgressManager } from '@/utils/progress-manager'
-import screenCache from '@/utils/screen-cache'
-import performanceMonitor from '@/utils/performance-monitor'
-import Header from '../components/Header.vue';
-import BottomNav from '../components/BottomNav.vue';
-import ThemeBanner from './components/ThemeBanner.vue'
-import VerticalProgressBar from './components/VerticalProgressBar.vue'
-import ContributionList from './components/ContributionList.vue'
-import StageArea from './components/StageArea.vue'
-import FloatingBubbles from './components/FloatingBubbles.vue'
-import ActivityRankingModal from './components/ActivityRankingModal.vue'
-import ActionBar from './components/ActionBar.vue'
+} from "@/utils/activity-config";
+import {
+  getProgressManager,
+  releaseProgressManager,
+  cleanupProgressManager,
+} from "@/utils/progress-manager";
+import screenCache from "@/utils/screen-cache";
+import performanceMonitor from "@/utils/performance-monitor";
+import Header from "../components/Header.vue";
+import BottomNav from "../components/BottomNav.vue";
+import ThemeBanner from "./components/ThemeBanner.vue";
+import VerticalProgressBar from "./components/VerticalProgressBar.vue";
+import ContributionList from "./components/ContributionList.vue";
+import StageArea from "./components/StageArea.vue";
+import FloatingBubbles from "./components/FloatingBubbles.vue";
+import ActivityRankingModal from "./components/ActivityRankingModal.vue";
+import ActionBar from "./components/ActionBar.vue";
+import TopRanking from "./components/TopRanking.vue";
+import MessageBoard from "./components/MessageBoard.vue";
+import MessageInput from "./components/MessageInput.vue";
+import { getEarningsSummaryApi } from "@/utils/api.js";
 
-const activityType = ref('birthday')
-const activityId = ref('')
-const config = ref(null)
-const progressData = ref({ current: 0, target: 1000 })
-const isLoading = ref(true)
-const isPageActive = ref(true)
-const statusBarHeight = ref(0)
-const errorMessage = ref('')
-const retryCount = ref(0)
-const loadingProgress = ref(0) // 资源加载进度 (0-100)
-const isStaleData = ref(false) // 数据是否过时
+const activityType = ref("birthday");
+const activityId = ref("");
+const config = ref(null);
+const progressData = ref({ current: 0, target: 1000 });
+const isLoading = ref(true);
+const isPageActive = ref(true);
+const statusBarHeight = ref(0);
+const errorMessage = ref("");
+const retryCount = ref(0);
+const loadingProgress = ref(0); // 资源加载进度 (0-100)
+const isStaleData = ref(false); // 数据是否过时
+const exhibitionRevenue = ref(0); // 当前展出收益
 
 // 底部导航状态
-const activeTab = ref(0)
-const navExpanded = ref(false)
+const activeTab = ref(0);
+const navExpanded = ref(false);
 
 // ActionBar 弹出框状态
-const actionBarVisible = ref(false)
+const actionBarVisible = ref(false);
 
-// 排行榜弹窗状态
-const rankingModalVisible = ref(false)
-const currentActivityTitle = ref('')
+// 留言板弹出框状态
+const messageBoardVisible = ref(false);
+
+// 排行榜弹出框状态
+const rankingModalVisible = ref(false);
+const currentActivityTitle = ref("");
+
+// 留言板 mock 数据
+const messageList = ref([
+  {
+    id: 1,
+    user: "小星星",
+    avatar: "",
+    content: "生日快乐！永远支持你~",
+    time: "刚刚",
+    isSelf: false,
+  },
+  {
+    id: 2,
+    user: "月光宝盒",
+    avatar: "",
+    content: "太棒了,继续加油!期待更多精彩作品!",
+    time: "5分钟前",
+    isSelf: false,
+  },
+  {
+    id: 3,
+    user: "彩虹糖",
+    avatar: "",
+    content: "为你打call~",
+    time: "10分钟前",
+    isSelf: false,
+  },
+  {
+    id: 4,
+    user: "夜空中最亮的星",
+    avatar: "",
+    content: "星光不问赶路人,岁月不负有心人,冲冲冲!",
+    time: "30分钟前",
+    isSelf: false,
+  },
+]);
 
 function toggleActionBar() {
-  actionBarVisible.value = !actionBarVisible.value
+  actionBarVisible.value = !actionBarVisible.value;
 }
 
+// 发送留言
+function handleSendMessage(text) {
+  const newMessage = {
+    id: Date.now(),
+    user: "我",
+    avatar: "",
+    content: text,
+    time: "刚刚",
+    isSelf: true,
+  };
+  messageList.value.push(newMessage);
+
+  uni.showToast({
+    title: "留言成功",
+    icon: "success",
+    duration: 1500,
+  });
+}
+
+const goBack = () => {
+  // 获取页面栈
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    // 有上一页，执行返回
+    uni.navigateBack();
+  } else {
+    // 没有上一页，跳转到square页面
+    uni.reLaunch({
+      url: "/pages/support-activity/center",
+    });
+  }
+};
+
 // 打开排行榜弹窗
 function openRankingModal() {
-  currentActivityTitle.value = config.value?.title || '活动排名'
-  rankingModalVisible.value = true
+  currentActivityTitle.value = config.value?.title || "活动排名";
+  rankingModalVisible.value = true;
 }
 
 // 处理拜访用户
 function handleVisitUser(data) {
-  console.log('拜访用户:', data)
+  console.log("拜访用户:", data);
 }
 
 // 处理查看用户资料
 function handleViewUserProfile(data) {
-  console.log('查看用户资料:', data)
+  console.log("查看用户资料:", data);
 }
 
 // 处理查看作品
 function handleViewArtwork(data) {
-  console.log('查看作品:', data)
+  console.log("查看作品:", data);
 }
 
-let progressManager = null
+// 加载收益汇总
+const loadEarningsSummary = async () => {
+  try {
+    const response = await getEarningsSummaryApi();
 
-const isCompleted = computed(() => progressData.value.current >= progressData.value.target)
+    if (response.code === 0) {
+      const data = response.data;
+      exhibitionRevenue.value = data.crystal_balance || 0;
+      // hourlyEarnings.value = data.total_hourly_earnings || 0;
+    }
+  } catch (e) {
+    console.error("获取收益汇总失败:", e);
+  }
+};
+
+let progressManager = null;
+
+const isCompleted = computed(
+  () => progressData.value.current >= progressData.value.target,
+);
 const containerStyle = computed(() => {
   if (!config.value) {
     return {
-      backgroundImage: 'none',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      backgroundRepeat: 'no-repeat'
-    }
+      backgroundImage: "none",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+    };
   }
-  
+
   // 根据进度完成状态选择背景图
-  const bgImage = isCompleted.value ? config.value.mainAssetActive : config.value.bgImage
-  
+  const bgImage = isCompleted.value
+    ? config.value.mainAssetActive
+    : config.value.bgImage;
+
   return {
     backgroundImage: `url(${bgImage})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat',
-    transition: 'background-image 0.5s ease-in-out' // 添加平滑过渡效果
-  }
-})
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    transition: "background-image 0.5s ease-in-out", // 添加平滑过渡效果
+  };
+});
 
-const MAX_RETRY_COUNT = 3
+const MAX_RETRY_COUNT = 3;
 
 // 处理 tab 切换
 function handleTabChange(newTab) {
-  activeTab.value = newTab
-  navExpanded.value = false
-  
+  activeTab.value = newTab;
+  navExpanded.value = false;
+
   // 根据tab索引跳转到对应页面
   const tabRoutes = [
-    '/pages/ai-dazi/index',         // 搭子
-    '/pages/starbook/index',       // 星册
-    '/pages/castlove/mall',        // 铸爱
-    '/pages/starcity/index',       // 星城
-    '/pages/profile/myWorks'         // 广场
-  ]
-  
+    "/pages/ai-dazi/index", // 搭子
+    "/pages/starbook/index", // 星册
+    "/pages/castlove/mall", // 铸爱
+    "/pages/starcity/index", // 星城
+    "/pages/profile/myWorks", // 广场
+  ];
+
   if (newTab >= 0 && newTab < tabRoutes.length) {
     uni.navigateTo({
       url: tabRoutes[newTab],
       fail: (err) => {
-        console.error('页面跳转失败:', err)
-      }
-    })
+        console.error("页面跳转失败:", err);
+      },
+    });
   }
 }
 
 function initProgressManager() {
-  if (!activityId.value) return
+  if (!activityId.value) return;
 
   // 先释放旧实例的引用，引用计数归零时会自动销毁
   if (progressManager) {
-    releaseProgressManager(activityId.value)
+    releaseProgressManager(activityId.value);
   }
 
-  progressManager = getProgressManager(activityId.value)
-  
+  progressManager = getProgressManager(activityId.value);
+
   progressManager.addListener((data) => {
     progressData.value = {
       current: data.current || 0,
-      target: data.target || 1000
-    }
-    
+      target: data.target || 1000,
+    };
+
     // 更新过时数据标志
-    isStaleData.value = data.isStale || false
-    
+    isStaleData.value = data.isStale || false;
+
     if (data.isFromCache) {
       // 如果数据过时，显示一次性提示
       if (data.isStale && !data.hasShownStaleToast) {
         uni.showToast({
-          title: '正在使用缓存数据',
-          icon: 'none',
-          duration: 1500
-        })
-        data.hasShownStaleToast = true
+          title: "正在使用缓存数据",
+          icon: "none",
+          duration: 1500,
+        });
+        data.hasShownStaleToast = true;
       }
     } else {
       // 收到新数据，清除过时标志
-      isStaleData.value = false
+      isStaleData.value = false;
     }
-  })
+  });
 }
 
 function startProgressSync() {
   if (progressManager && isPageActive.value) {
-    progressManager.startPolling()
+    progressManager.startPolling();
   }
 }
 
 function stopProgressSync() {
   if (progressManager) {
-    progressManager.stopPolling()
+    progressManager.stopPolling();
   }
 }
 
-async function handleContribute(itemType) {
+async function handleContribute(itemType, remainingBalance) {
   if (progressManager) {
-    await progressManager.refresh()
+    await progressManager.refresh();
+  }
+
+  // 购买成功后刷新左上角水晶余额
+  if (remainingBalance !== null && remainingBalance !== undefined) {
+    exhibitionRevenue.value = Number(remainingBalance) || 0;
+    // 同步本地用户存储，保持和 ActionBar 内部逻辑一致
+    const userStr = uni.getStorageSync("user");
+    if (userStr) {
+      const user =
+        typeof userStr === "string" ? JSON.parse(userStr) : { ...userStr };
+      user.crystal_balance = Number(remainingBalance) || 0;
+      uni.setStorageSync("user", JSON.stringify(user));
+      // 通知其他订阅 balanceUpdated 的组件（如 Header）
+      uni.$emit("balanceUpdated", { crystal_balance: user.crystal_balance });
+    }
   }
 }
 
-function onAnimationComplete() {
-}
+function onAnimationComplete() {}
 
 // 批量转换图片路径 - 直接使用后端返回的URL
 async function convertActivityImages(activityData) {
@@ -302,65 +474,65 @@ async function convertActivityImages(activityData) {
     const [bannerImage, coverImage, stageBackground] = await Promise.all([
       Promise.resolve(activityData.banner_image),
       Promise.resolve(activityData.cover_image),
-      Promise.resolve(activityData.current_stage_background)
-    ])
+      Promise.resolve(activityData.current_stage_background),
+    ]);
 
     // 转换道具图标
-    const actionItems = activityData.items || []
-    const convertedItems = actionItems.map(item => ({
+    const actionItems = activityData.items || [];
+    const convertedItems = actionItems.map((item) => ({
       ...item,
-      icon: item.icon
-    }))
+      icon: item.icon,
+    }));
 
     return {
       bannerImage,
       coverImage,
       stageBackground,
-      actionItems: convertedItems
-    }
+      actionItems: convertedItems,
+    };
   } catch (error) {
-    console.error('批量转换图片失败:', error)
+    console.error("批量转换图片失败:", error);
     return {
       bannerImage: activityData.banner_image,
       coverImage: activityData.cover_image,
       stageBackground: activityData.current_stage_background,
-      actionItems: activityData.items || []
-    }
+      actionItems: activityData.items || [],
+    };
   }
 }
 
 async function initializePage(options = {}) {
   try {
-    isLoading.value = true
-    errorMessage.value = ''
-    
+    isLoading.value = true;
+    errorMessage.value = "";
+
     // 启动性能监控
-    performanceMonitor.start()
-    
+    performanceMonitor.start();
+
     // 初始化屏幕缓存
-    screenCache.init()
-    statusBarHeight.value = screenCache.getStatusBarHeight()
-    
+    screenCache.init();
+    statusBarHeight.value = screenCache.getStatusBarHeight();
+
     // 从URL参数获取活动ID（必需）
-    activityId.value = options.id
-    
+    activityId.value = options.id;
+
     if (!activityId.value) {
-      throw new Error('缺少活动ID参数')
+      throw new Error("缺少活动ID参数");
     }
-    
+
     // 从后端获取活动详情
-    const activityData = await fetchActivityDetail(activityId.value)
-    
+    const activityData = await fetchActivityDetail(activityId.value);
+
     if (!activityData) {
-      throw new Error('无法加载活动数据')
+      throw new Error("无法加载活动数据");
     }
-    
+
     // 设置活动类型和配置
-    activityType.value = activityData.activity_type
-    
+    activityType.value = activityData.activity_type;
+
     // 转换图片URL
-    const convertedImages = await convertActivityImages(activityData)
-    
+    const convertedImages = await convertActivityImages(activityData);
+
     // 转换后端数据为页面配置格式
     config.value = {
       title: activityData.title,
@@ -368,34 +540,33 @@ async function initializePage(options = {}) {
       bgImage: convertedImages.stageBackground || convertedImages.coverImage,
       mainAssetIdle: convertedImages.coverImage,
       mainAssetActive: convertedImages.stageBackground,
-      bubbleTexts: activityData.bubble_texts || ['加油!', '一起努力!'],
-      actionItems: convertedImages.actionItems
-    }
-    
+      bubbleTexts: activityData.bubble_texts || ["加油!", "一起努力!"],
+      actionItems: convertedImages.actionItems,
+    };
+
     // 设置进度数据
     progressData.value = {
       current: activityData.current_progress || 0,
-      target: activityData.target_progress || 1000
-    }
-    
+      target: activityData.target_progress || 1000,
+    };
+
     // 优化：只预加载首屏关键资源
-    await preloadCriticalAssets()
-    
+    await preloadCriticalAssets();
+
     // 记录首屏加载时间
-    performanceMonitor.recordFirstScreenLoad()
-    
-    initProgressManager()
-    startProgressSync()
-    
-    isLoading.value = false
-    
+    performanceMonitor.recordFirstScreenLoad();
+
+    initProgressManager();
+    startProgressSync();
+
+    isLoading.value = false;
+
     // 在后台继续加载非关键资源
-    preloadNonCriticalAssets()
-    
+    preloadNonCriticalAssets();
   } catch (error) {
-    console.error('页面初始化失败:', error)
-    errorMessage.value = error.message || '页面加载失败'
-    isLoading.value = false
+    console.error("页面初始化失败:", error);
+    errorMessage.value = error.message || "页面加载失败";
+    isLoading.value = false;
   }
 }
 
@@ -403,58 +574,54 @@ async function initializePage(options = {}) {
  * 预加载首屏关键资源
  */
 async function preloadCriticalAssets() {
-  if (!config.value) return
-  
+  if (!config.value) return;
+
   try {
     // 只加载首屏必需的图片：背景图和横幅图
-    const criticalImages = [
-      config.value.bgImage,
-      config.value.bannerImage
-    ]
-    
-    const loadPromises = criticalImages.map(src => {
+    const criticalImages = [config.value.bgImage, config.value.bannerImage];
+
+    const loadPromises = criticalImages.map((src) => {
       return new Promise((resolve) => {
-        const startTime = Date.now()
-        let isResolved = false
-        const img = new Image()
-        
+        const startTime = Date.now();
+        let isResolved = false;
+        const img = new Image();
+
         // 超时定时器
         const timeoutId = setTimeout(() => {
           if (!isResolved) {
-            isResolved = true
-            performanceMonitor.recordImageLoad(false, 3000)
-            resolve()
+            isResolved = true;
+            performanceMonitor.recordImageLoad(false, 3000);
+            resolve();
           }
-        }, 3000)
-        
+        }, 3000);
+
         img.onload = () => {
           if (!isResolved) {
-            isResolved = true
-            clearTimeout(timeoutId)
-            const loadTime = Date.now() - startTime
-            performanceMonitor.recordImageLoad(true, loadTime)
-            resolve()
+            isResolved = true;
+            clearTimeout(timeoutId);
+            const loadTime = Date.now() - startTime;
+            performanceMonitor.recordImageLoad(true, loadTime);
+            resolve();
           }
-        }
-        
+        };
+
         img.onerror = () => {
           if (!isResolved) {
-            isResolved = true
-            clearTimeout(timeoutId)
-            const loadTime = Date.now() - startTime
-            performanceMonitor.recordImageLoad(false, loadTime)
-            resolve() // 即使失败也继续
+            isResolved = true;
+            clearTimeout(timeoutId);
+            const loadTime = Date.now() - startTime;
+            performanceMonitor.recordImageLoad(false, loadTime);
+            resolve(); // 即使失败也继续
           }
-        }
-        
-        img.src = src
-      })
-    })
-    
-    await Promise.all(loadPromises)
-    
+        };
+
+        img.src = src;
+      });
+    });
+
+    await Promise.all(loadPromises);
   } catch (error) {
-    console.error('[页面] 关键资源加载异常:', error)
+    console.error("[页面] 关键资源加载异常:", error);
   }
 }
 
@@ -462,87 +629,89 @@ async function preloadCriticalAssets() {
  * 预加载非关键资源（后台加载）
  */
 function preloadNonCriticalAssets() {
-  if (!config.value) return
-  
+  if (!config.value) return;
+
   setTimeout(() => {
     // 加载其他资源：舞台图标、道具图标等
     const nonCriticalImages = [
       config.value.mainAssetIdle,
       config.value.mainAssetActive,
-      ...(config.value.actionItems?.map(item => item.icon) || [])
-    ]
-    
-    nonCriticalImages.forEach(src => {
+      ...(config.value.actionItems?.map((item) => item.icon) || []),
+    ];
+
+    nonCriticalImages.forEach((src) => {
       if (src) {
-        const startTime = Date.now()
-        const img = new Image()
-        
+        const startTime = Date.now();
+        const img = new Image();
+
         img.onload = () => {
-          const loadTime = Date.now() - startTime
-          performanceMonitor.recordImageLoad(true, loadTime)
-        }
-        
+          const loadTime = Date.now() - startTime;
+          performanceMonitor.recordImageLoad(true, loadTime);
+        };
+
         img.onerror = () => {
-          const loadTime = Date.now() - startTime
-          performanceMonitor.recordImageLoad(false, loadTime)
-        }
-        
-        img.src = src
+          const loadTime = Date.now() - startTime;
+          performanceMonitor.recordImageLoad(false, loadTime);
+        };
+
+        img.src = src;
       }
-    })
-  }, 1000) // 延迟1秒后开始加载
+    });
+  }, 1000); // 延迟1秒后开始加载
 }
 
 async function retryLoad() {
   if (retryCount.value >= MAX_RETRY_COUNT) {
     uni.showToast({
-      title: '重试次数已达上限',
-      icon: 'none'
-    })
-    return
+      title: "重试次数已达上限",
+      icon: "none",
+    });
+    return;
   }
-  
-  retryCount.value++
-  
-  const pages = getCurrentPages()
-  const currentPage = pages[pages.length - 1]
-  const options = currentPage.options || {}
-  
-  await initializePage(options)
+
+  retryCount.value++;
+
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options || {};
+
+  await initializePage(options);
 }
 
 onLoad(async (options) => {
-  await initializePage(options)
-})
+  await initializePage(options);
+});
 
 onShow(() => {
-  isPageActive.value = true
-  
+  isPageActive.value = true;
+
   if (!isLoading.value && !errorMessage.value && progressManager) {
     // 使用 resumePolling 而不是 startPolling，避免重复启动
-    progressManager.resumePolling()
+    progressManager.resumePolling();
   }
-})
+
+  loadEarningsSummary();
+});
 
 onHide(() => {
-  isPageActive.value = false
-  
+  isPageActive.value = false;
+
   // 使用 pausePolling 暂停轮询，而不是完全停止
   if (progressManager) {
-    progressManager.pausePolling()
+    progressManager.pausePolling();
   }
-})
+});
 
 onUnload(() => {
-  stopProgressSync()
+  stopProgressSync();
 
   if (activityId.value) {
-    releaseProgressManager(activityId.value)
+    releaseProgressManager(activityId.value);
   }
 
   // 停止性能监控（会自动打印报告）
-  performanceMonitor.stop()
-})
+  performanceMonitor.stop();
+});
 </script>
 
 <style scoped>
@@ -555,6 +724,121 @@ onUnload(() => {
   align-items: center;
 }
 
+.nav-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background: rgba(255,255,255,0.5);
+	border-radius: 50%; */
+  position: fixed;
+  top: 88rpx;
+  left: 32rpx;
+}
+
+.nav-back-icon {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+/* 水晶余额组件 */
+.crystal-balance-new {
+  /* height: 120rpx; */
+  display: flex;
+  align-items: center;
+  /* 底部对齐 */
+  position: fixed;
+  /* 左侧留出足够空间给钻石图标，防止文字被压在图标正下方 */
+  padding-left: 50rpx;
+  top: 96rpx;
+  left: 112rpx;
+}
+
+/* --- 左侧钻石图标 --- */
+.crystal-icon-box {
+  position: absolute;
+  left: 8rpx;
+  bottom: -16rpx;
+  /* 与右侧底部平齐 */
+  z-index: 10;
+  width: 68rpx;
+  height: 60rpx;
+  transform: rotate(-15deg);
+  opacity: 1;
+}
+
+.crystal-icon {
+  width: 100%;
+  height: 100%;
+}
+
+/* --- 右侧容器 --- */
+.crystal-info-container {
+  position: relative;
+  height: 34rpx;
+  /* width: 120rpx; */
+  opacity: 1;
+  border-radius: 20rpx;
+  border-width: 1px;
+  border: 1px solid #f3a68a40;
+  box-shadow: 2px 2px 4.1px 0px #f936365c;
+}
+
+.crystal-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10.405px;
+  border: 1px solid rgba(243, 166, 138, 0.25);
+  background: url("/static/rank/sjbj.png") lightgray 50% / cover no-repeat;
+  box-shadow: 2px 2px 4.1px 0 rgba(249, 54, 54, 0.36);
+}
+
+.crystal-bg-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 120rpx;
+  z-index: 0;
+}
+
+/* --- 上层：文字内容 --- */
+.crystal-text-layer {
+  height: 100%;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 120rpx;
+  opacity: 0.75;
+  background: linear-gradient(
+    270deg,
+    rgba(168, 17, 255, 0.83) 0%,
+    rgba(30, 180, 217, 0.47) 81.01%,
+    rgba(101, 10, 153, 0) 178.07%
+  );
+  padding: 0 24rpx;
+}
+
+.balance-number {
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #ffb800;
+  font-family: "yt", sans-serif;
+  text-shadow:
+    0 0 10rpx rgba(255, 184, 0, 0.8),
+    0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+  letter-spacing: 1rpx;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
 .status-bar {
   width: 100%;
   background: transparent;
@@ -713,9 +997,11 @@ onUnload(() => {
   justify-content: center;
   align-items: center;
   gap: 8rpx;
-  background-image: url('@/static/rank/activity-support-icon/beijingkuang1.png');
+  /* background-image: url("@/static/rank/activity-support-icon/beijingkuang1.png");
   background-size: cover;
-  background-position: center;
+  background-position: center; */
+  background: rgba(217, 217, 217, 0.4);
+  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
 }
 
 .trigger-btn {
@@ -778,6 +1064,134 @@ onUnload(() => {
   width: 100%;
   padding: 0 24rpx;
   position: relative;
-  top: 192rpx;
+  top: 416rpx;
 }
-</style>
\ No newline at end of file
+
+/* 留言板触发按钮(与 action-bar-trigger 对称,位于左侧) */
+.message-trigger {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 80rpx;
+  position: fixed;
+  bottom: 32rpx;
+  left: 32rpx;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(217, 217, 217, 0.4);
+  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+.message-trigger .trigger-icon-text {
+  font-size: 44rpx;
+}
+
+/* 留言板弹出框样式 */
+.message-board-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 998;
+}
+
+.message-board-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.message-board-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 80vh;
+  background-image: url("@/static/rank/activity-support-icon/beijingkuang.png");
+  background-size: 105% 130%;
+  background-position: center;
+  border-radius: 40rpx 40rpx 0 0;
+  padding: 32rpx 32rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+  animation: slideUp 0.3s ease-out;
+}
+
+.message-board-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
+}
+
+.message-board-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.message-board-close {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 48rpx;
+  font-weight: bold;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+}
+
+/*
+ * 留言输入框浮层:对齐底部确认赠送按钮
+ * 与 ActionBar 的 .quantity-control 处于同一水平线
+ */
+.message-input-floating-bottom {
+  width: 100%;
+  padding-top: 16rpx;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.3);
+}
+
+/* 右上角 TOP3 + 我的排名 悬浮组件 */
+.top-ranking-wrapper {
+  position: fixed;
+  top: 96rpx;
+  right: 24rpx;
+  z-index: 50;
+  max-width: 320rpx;
+}
+
+.rank-ph {
+  position: fixed;
+  top: 288rpx;
+  right: 24rpx;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ph-image {
+  width: 96rpx;
+  height: 96rpx;
+}
+
+.ph-text {
+  color: #fff;
+  text-shadow: -1px 1px 4px rgba(82, 8, 8, 0.45);
+  font-family: "Abhaya Libre ExtraBold";
+  font-size: 22rpx;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+</style>
diff --git a/frontend/static/rank/activity-support-icon/message-row/avatar.png b/frontend/static/rank/activity-support-icon/message-row/avatar.png
new file mode 100644
index 0000000..f3a425d
Binary files /dev/null and b/frontend/static/rank/activity-support-icon/message-row/avatar.png differ
diff --git a/frontend/static/rank/activity-support-icon/message-row/emoji.png b/frontend/static/rank/activity-support-icon/message-row/emoji.png
new file mode 100644
index 0000000..b545b94
Binary files /dev/null and b/frontend/static/rank/activity-support-icon/message-row/emoji.png differ
diff --git a/frontend/static/rank/activity-support-icon/message-row/send.png b/frontend/static/rank/activity-support-icon/message-row/send.png
new file mode 100644
index 0000000..ffb9ed6
Binary files /dev/null and b/frontend/static/rank/activity-support-icon/message-row/send.png differ
diff --git a/frontend/static/rank/phtb.png b/frontend/static/rank/phtb.png
new file mode 100644
index 0000000..1769751
Binary files /dev/null and b/frontend/static/rank/phtb.png differ
diff --git a/frontend/static/rank/sjbj.png b/frontend/static/rank/sjbj.png
new file mode 100644
index 0000000..847760d
Binary files /dev/null and b/frontend/static/rank/sjbj.png differ