From a6ce0f5865bea26480cd0788c7fa73992ba86086 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Mon, 22 Jun 2026 12:37:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E5=96=84=E5=BA=94=E6=8F=B4?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.development                     |  4 +-
 frontend/pages/asset-detail/asset-detail.vue  |  2 +-
 frontend/pages/support-activity/center.vue    | 52 +++++++++++-------
 .../components/ContributionList.vue           | 35 +++++++-----
 .../components/MessageBoard.vue               |  8 +--
 .../components/MessageInput.vue               | 55 +++++++++++++++++--
 frontend/pages/support-activity/index.vue     | 10 +++-
 7 files changed, 121 insertions(+), 45 deletions(-)

diff --git a/frontend/.env.development b/frontend/.env.development
index b74ab5f..fb9a78f 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,7 +1,7 @@
 # 开发环境配置
 # HBuilderX「运行」时自动加载;CLI 用 --mode development
-# VITE_API_BASE_URL=http://192.168.110.60:8080
-VITE_API_BASE_URL=https://api.topfans.online
+VITE_API_BASE_URL=http://192.168.110.60:8080
+# VITE_API_BASE_URL=https://api.topfans.online
 # WebSocket 地址：如与 API 同源可省略（自动从 VITE_API_BASE_URL 推导 http→ws、https→wss）
 # 独立部署时直接覆盖，例如：ws://192.168.110.60:8081
 VITE_WS_BASE_URL=ws://192.168.110.60:8080
diff --git a/frontend/pages/asset-detail/asset-detail.vue b/frontend/pages/asset-detail/asset-detail.vue
index 4965885..6672b07 100644
--- a/frontend/pages/asset-detail/asset-detail.vue
+++ b/frontend/pages/asset-detail/asset-detail.vue
@@ -42,7 +42,7 @@
 				<!-- 藏品卡片区域 -->
 				<view class="card-section">
 					<view class="card-wrapper" :class="{ 'card-wrapper--lenticular': isLenticularAsset }">
-						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFit">
+						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill">
 						</image>
 						<view v-if="isLenticularAsset" class="detail-lenticular-slot">
 							<LenticularCard class="detail-lenticular-card" :layers="lenticularLayers"
diff --git a/frontend/pages/support-activity/center.vue b/frontend/pages/support-activity/center.vue
index 75f26db..7a00319 100644
--- a/frontend/pages/support-activity/center.vue
+++ b/frontend/pages/support-activity/center.vue
@@ -96,9 +96,15 @@
                 mode="aspectFill"
                 :lazy-load="true"
               />
-              <view v-else class="cover-fallback">{{
-                item.title || "活动"
-              }}</view>
+              <view class="date-row">
+                <text class="date-text">{{ formatDateRange(item) }}</text>
+                <text v-if="!isEnded(item)" class="countdown-text">
+                  距离活动结束还有{{ getDaysLeft(item) }}天
+                </text>
+              </view>
+              <!-- <view v-else class="cover-fallback"
+                >{{ item.title || "活动" }}
+              </view> -->
               <view
                 v-if="item.status === 'expired' || item.status === 'completed'"
                 class="cover-ended"
@@ -115,14 +121,6 @@
                   <text class="name-text">{{ getShortName(item) }}</text>
                 </view>
               </view>
-
-              <!-- <view class="date-row">
-                <text class="date-text">{{ formatDateRange(item) }}</text>
-                <text v-if="!isEnded(item)" class="countdown-text">
-                  距离活动结束还有{{ getDaysLeft(item) }}天
-                </text>
-              </view> -->
-
               <view class="stat-row">
                 <view class="stat-block">
                   <text class="block-value">{{
@@ -739,23 +737,37 @@ onShow(() => {
 }
 
 .date-row {
-  display: flex;
-  flex-direction: column;
-  gap: 4rpx;
+  height: 72rpx;
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  top: 88rpx;
 }
 
 .date-text {
-  font-size: 18rpx;
   color: #fffabd;
-  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.84);
-  font-weight: bold;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
+  font-family: "Baloo Bhai";
+  font-size: 20rpx;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  position: absolute;
+  top: 0;
+  left: 24rpx;
 }
 
 .countdown-text {
-  font-size: 14rpx;
   color: #fffabd;
-  text-shadow: -2rpx 2rpx 8rpx rgba(206, 9, 9, 0.84);
-  opacity: 0.85;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
+  font-family: "Abhaya Libre ExtraBold";
+  font-size: 14rpx;
+  font-style: normal;
+  font-weight: 800;
+  line-height: normal;
+  position: absolute;
+  right: 24rpx;
+  bottom: 0;
 }
 
 .stat-row {
diff --git a/frontend/pages/support-activity/components/ContributionList.vue b/frontend/pages/support-activity/components/ContributionList.vue
index 32778f2..6a4500c 100644
--- a/frontend/pages/support-activity/components/ContributionList.vue
+++ b/frontend/pages/support-activity/components/ContributionList.vue
@@ -31,7 +31,7 @@
             <text class="item-x">X</text>
             <text
               class="item-count"
-              :class="`count-${(record.combo_count > 1 ? record.combo_count : record.quantity).toString().length}-digit`"
+              :class="getCountSizeClass(record.combo_count > 1 ? record.combo_count : record.quantity)"
               >{{
                 record.combo_count > 1 ? record.combo_count : record.quantity
               }}</text
@@ -96,6 +96,19 @@ const estimateTextWidth = (text, fontSize) => {
   return Math.round(width);
 };
 
+/**
+ * 根据数量值映射数字字号档位
+ * - >= 999    → count-largest（最大）
+ * - 520 ~ 998 → count-mid（次大）
+ * - <  520    → count-small（最小）
+ */
+const getCountSizeClass = (value) => {
+  const n = Number(value) || 0;
+  if (n >= 999) return "count-largest";
+  if (n >= 520) return "count-mid";
+  return "count-small";
+};
+
 /**
  * 根据昵称（+赠送道具名）动态计算胶囊宽度
  * 组成：左右内边距(32) + 头像(78) + 头像间距(16) + 文字宽度 + 文字右侧间距(16)
@@ -258,7 +271,7 @@ const getItemWidth = (record) => {
   width: 96rpx;
   height: 96rpx;
   display: block;
-  transform: rotate(11deg);
+  transform: rotate(10deg);
   transform-origin: center center;
 }
 
@@ -285,19 +298,15 @@ const getItemWidth = (record) => {
   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 {
+/* 数量档位样式：999+ 顶格、520~998 中档、其他常规 */
+.count-largest {
   font-size: 76rpx;
 }
-.count-4-digit,
-.count-5-digit {
-  font-size: 64rpx;
+.count-mid {
+  font-size: 52rpx;
+}
+.count-small {
+  font-size: 48rpx;
 }
 
 @keyframes fadeIn {
diff --git a/frontend/pages/support-activity/components/MessageBoard.vue b/frontend/pages/support-activity/components/MessageBoard.vue
index f041e73..a55945a 100644
--- a/frontend/pages/support-activity/components/MessageBoard.vue
+++ b/frontend/pages/support-activity/components/MessageBoard.vue
@@ -38,12 +38,12 @@ watch(
 .message-board {
   width: 100%;
   position: fixed;
-  bottom: 0;
+  bottom: 128rpx;
   padding: 0 34rpx; /* 对应 Figma 中 left: 17px */
 }
 
 .message-board-scroll {
-  height: 480rpx;
+  height: 352rpx;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -53,10 +53,10 @@ watch(
 
 /* 留言气泡:对应 Figma 留言板 的圆角矩形 */
 .message-bubble {
-  display: inline-flex;
+  /* display: inline-flex; */
   align-items: baseline;
   flex-wrap: wrap;
-  max-width: 100%;
+  max-width: max-content;
   padding: 6rpx 16rpx; /* 适当内边距,让文字与气泡边距舒适 */
   background: rgba(42, 17, 17, 0.3);
   border-radius: 16rpx; /* 8px = 16rpx */
diff --git a/frontend/pages/support-activity/components/MessageInput.vue b/frontend/pages/support-activity/components/MessageInput.vue
index 475765b..601186d 100644
--- a/frontend/pages/support-activity/components/MessageInput.vue
+++ b/frontend/pages/support-activity/components/MessageInput.vue
@@ -22,11 +22,16 @@
       />
     </view>
 
-    <!-- 骰子表情 (17x17) -->
+    <!-- 骰子表情 (17x17):点击按顺序循环替换 text -->
     <image
       class="message-row__emoji"
+      :class="{ 'is-pressing': pressing }"
       src="/static/rank/activity-support-icon/message-row/emoji.png"
       mode="aspectFit"
+      @click.stop="handleEmoji"
+      @touchstart="pressing = true"
+      @touchend="pressing = false"
+      @touchcancel="pressing = false"
     />
 
     <!-- 发送箭头 (21x21) -->
@@ -41,15 +46,41 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
+
+/**
+ * 点击骰子 emoji 时按顺序循环选用的祝福语。
+ * 顺序循环:首次取第一条,再点取下一条,到末尾后回到开头。
+ * 调整 / 增删文案直接改这里即可。
+ */
+const GREETINGS = [
+  "今天第一天姐妹们大家冲鸭！！！",
+  "冲冲冲！！！生日应援走起～",
+  "永远支持你！生日快乐 🎂",
+  "前排打卡！爱了爱了 ❤️",
+  "姐妹们冲鸭，今天也要元气满满～",
+  "生日快乐 🎉 永远守护你！",
+  "第一第一！！我永远在你身后",
+  "鸭鸭冲鸭！为爱发电不停歇～",
+];
+// 模块级游标:组件被卸载重建时不会从 0 开始,避免反复重置
+let greetingCursor = 0;
+
+function pickNextGreeting() {
+  if (GREETINGS.length === 0) return "";
+  const next = GREETINGS[greetingCursor % GREETINGS.length];
+  greetingCursor += 1;
+  return next;
+}
 
 const props = defineProps({
   /**
    * 展示的文案:父组件可传入最新一条留言,默认使用 Figma 设计稿文案。
+   * 推荐通过 v-model:text 双向绑定,以便点击 emoji 时组件能通知父组件更新。
    */
   text: {
     type: String,
-    default: "今天第一天姐妹们大家冲鸭！！！",
+    default: "",
   },
   /**
    * 头像 URL,未传时回退到默认头像。
@@ -67,11 +98,14 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["send", "tap"]);
+const emit = defineEmits(["send", "tap", "update:text"]);
 
 const defaultAvatar =
   "/static/rank/activity-support-icon/message-row/avatar.png";
 
+// 按下反馈:触摸 / 按下时短暂为 true,松开恢复
+const pressing = ref(false);
+
 const displayText = computed(() => {
   if (props.text && props.text.trim().length > 0) return props.text;
   if (props.placeholder && props.placeholder.trim().length > 0)
@@ -83,6 +117,12 @@ function handleTap() {
   emit("tap");
 }
 
+function handleEmoji() {
+  // 抛 update:text 让父组件以 v-model:text 接收;不修改 props.text 本地副本,
+  // 避免父组件没接 v-model 时出现"看起来生效但父组件状态没变"的伪成功。
+  emit("update:text", pickNextGreeting());
+}
+
 function handleSend() {
   // 展示型组件:点击发送图标抛出事件,业务侧决定弹出输入面板 / 直接发送等行为
   emit("send", displayText.value);
@@ -179,6 +219,13 @@ function handleSend() {
   width: 34rpx; /* 17px */
   height: 34rpx;
   filter: drop-shadow(0 4rpx 8rpx rgba(138, 6, 6, 0.74));
+  transition: transform 0.12s ease;
+}
+
+/* emoji 按下反馈(顺序循环选祝福语的可点击提示) */
+.message-row__emoji.is-pressing,
+.message-row__emoji:active {
+  transform: scale(0.85);
 }
 
 /* 右侧发送箭头 (可点击) */
diff --git a/frontend/pages/support-activity/index.vue b/frontend/pages/support-activity/index.vue
index 9b16f46..09940dc 100644
--- a/frontend/pages/support-activity/index.vue
+++ b/frontend/pages/support-activity/index.vue
@@ -106,7 +106,11 @@
     </view>
 
     <!-- 留言输入框:对齐底部确认赠送按钮位置 -->
-    <MessageInput placeholder="留下你的祝福..." @send="handleSendMessage" />
+    <MessageInput
+      v-model:text="messageDraft"
+      placeholder="留下你的祝福..."
+      @send="handleSendMessage"
+    />
 
     <!-- 底部操作栏弹出框 -->
     <view v-if="actionBarVisible" class="action-bar-popup">
@@ -232,6 +236,10 @@ const messageBoardVisible = ref(false);
 const rankingModalVisible = ref(false);
 const currentActivityTitle = ref("");
 
+// 留言草稿:MessageInput 通过 v-model:text 双向绑定,
+// 点击骰子 emoji 时按顺序循环选用内置祝福语填入这里
+const messageDraft = ref("今天第一天姐妹们大家冲鸭！！！");
+
 // 留言板 mock 数据
 const messageList = ref([
   {