From b1b96c56d7388793a96ef9d88dafc07f7414ad83 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 10:43:25 +0800
Subject: [PATCH] =?UTF-8?q?UI:=20=E7=BE=8E=E5=8C=96=E5=B9=B6=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E7=94=A8=E6=88=B7=E5=90=8D=E7=89=87=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E8=B5=A0=E9=80=81=E7=A4=BC=E7=89=A9=E4=BA=A4=E4=BA=92=EF=BC=8C?=
 =?UTF-8?q?=E9=87=87=E7=94=A8=E5=8D=95=E6=8C=89=E9=92=AE=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/partials/user-actions.blade.php      | 105 +++++++++++++-----
 1 file changed, 77 insertions(+), 28 deletions(-)

diff --git a/resources/views/chat/partials/user-actions.blade.php b/resources/views/chat/partials/user-actions.blade.php
index d5d47ac..5d85073 100644
--- a/resources/views/chat/partials/user-actions.blade.php
+++ b/resources/views/chat/partials/user-actions.blade.php
@@ -335,35 +335,84 @@
             </div>
 
             {{-- 送花/礼物互动区 --}}
-            <div style="padding: 0 16px 12px;" x-show="userInfo.username !== window.chatContext.username">
-                <div style="font-size: 11px; color: #e91e8f; margin-bottom: 6px; font-weight: bold;">🎁 送礼物</div>
-                {{-- 礼物选择列表 --}}
-                <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px;">
-                    <template x-for="g in gifts" :key="g.id">
-                        <div x-on:click="selectedGiftId = g.id"
-                            :style="selectedGiftId === g.id ? 'border: 2px solid #e91e63; background: #fce4ec;' :
-                                'border: 2px solid #eee; background: #fafafa;'"
-                            style="width: 68px; padding: 4px 2px; border-radius: 6px; text-align: center; cursor: pointer; transition: all 0.15s;">
-                            <img :src="'/images/gifts/' + g.image"
-                                style="width: 36px; height: 36px; object-fit: contain;" :alt="g.name">
-                            <div style="font-size: 10px; color: #333; margin-top: 2px;" x-text="g.name"></div>
-                            <div style="font-size: 9px; color: #e91e63;" x-text="g.cost + '💰 +' + g.charm + '✨'"></div>
+            <div style="padding: 16px; margin: 0 16px 16px; background: #fff; border-radius: 12px; border: 1px solid #f1f5f9; box-shadow: 0 2px 8px rgba(0,0,0,0.02);"
+                x-show="userInfo.username !== window.chatContext.username" x-data="{ showGiftPanel: false }">
+
+                {{-- 初始状态：只显示一个主操作按钮 --}}
+                <button x-show="!showGiftPanel" x-on:click="showGiftPanel = true"
+                    style="width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #fce4ec 0%, #fbcfe8 100%); color: #db2777; border: 1px dashed #f9a8d4; border-radius: 10px; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(219, 39, 119, 0.1);"
+                    x-on:mousedown="$el.style.transform='scale(0.98)'" x-on:mouseup="$el.style.transform='scale(1)'"
+                    x-on:mouseleave="$el.style.transform='scale(1)'">
+                    <span style="font-size: 18px;">🎁</span>
+                    <span>赠送礼物给 TA</span>
+                </button>
+
+                {{-- 展开状态：显示礼物面板 --}}
+                <div x-show="showGiftPanel" style="display: none;" x-transition>
+                    <div
+                        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+                        <div style="display: flex; align-items: center; gap: 6px;">
+                            <span style="font-size: 16px;">🎁</span>
+                            <span style="font-size: 14px; color: #334155; font-weight: bold;">选择礼物</span>
                         </div>
-                    </template>
-                </div>
-                {{-- 数量 + 送出按钮 --}}
-                <div style="display: flex; gap: 6px; align-items: center;">
-                    <select x-model.number="giftCount"
-                        style="width: 60px; padding: 3px; border: 1px solid #f0a0c0; border-radius: 4px; font-size: 12px;">
-                        <option value="1">×1</option>
-                        <option value="5">×5</option>
-                        <option value="10">×10</option>
-                        <option value="99">×99</option>
-                    </select>
-                    <button x-on:click="sendGift()" :disabled="sendingGift"
-                        style="flex: 1; padding: 6px 10px; background: linear-gradient(135deg, #ff6b9d, #e91e63); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer; transition: opacity 0.15s;"
-                        :style="sendingGift ? 'opacity: 0.5; cursor: not-allowed;' : ''"
-                        x-text="sendingGift ? '送出中...' : '送出 💝'"></button>
+                        <button x-on:click="showGiftPanel = false"
+                            style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px;">&times;</button>
+                    </div>
+
+                    {{-- 礼物选择列表 --}}
+                    <div
+                        style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; max-height: 200px; overflow-y: auto; padding-right: 4px;">
+                        <template x-for="g in gifts" :key="g.id">
+                            <div x-on:click="selectedGiftId = g.id"
+                                :style="selectedGiftId === g.id ?
+                                    'border-color: #f43f5e; background: #fff1f2; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15); transform: translateY(-1px);' :
+                                    'border-color: #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); transform: translateY(0);'"
+                                style="border: 2px solid; padding: 10px 4px; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <img :src="'/images/gifts/' + g.image"
+                                    style="width: 44px; height: 44px; object-fit: contain; margin-bottom: 6px; transition: transform 0.2s ease;"
+                                    :style="selectedGiftId === g.id ? 'transform: scale(1.1);' : ''"
+                                    :alt="g.name">
+                                <div style="font-size: 12px; color: #1e293b; font-weight: 600; margin-bottom: 4px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                                    x-text="g.name"></div>
+                                <div style="font-size: 10px; color: #e11d48; font-weight: 500; line-height: 1.3;">
+                                    <div x-text="g.cost + ' 💰'"></div>
+                                    <div x-text="'+' + g.charm + ' ✨'"></div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+
+                    {{-- 数量 + 送出按钮 --}}
+                    <div style="display: flex; gap: 12px; align-items: center;">
+                        <div style="position: relative;">
+                            <select x-model.number="giftCount"
+                                style="appearance: none; width: 76px; height: 42px; padding: 0 24px 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-weight: 500; color: #334155; background-color: #fff; cursor: pointer; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.2s ease;"
+                                onfocus="this.style.borderColor='#f43f5e'" onblur="this.style.borderColor='#cbd5e1'">
+                                <option value="1">1 个</option>
+                                <option value="5">5 个</option>
+                                <option value="10">10 个</option>
+                                <option value="66">66 个</option>
+                                <option value="99">99 个</option>
+                                <option value="520">520 个</option>
+                            </select>
+                            <div
+                                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; font-size: 10px;">
+                                ▼
+                            </div>
+                        </div>
+
+                        <button x-on:click="sendGift(); showGiftPanel = false;" :disabled="sendingGift"
+                            style="flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); color: #fff; border: 1px solid #9f1239; border-radius: 8px; font-size: 16px; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);"
+                            x-on:mousedown="!sendingGift && ($el.style.transform='scale(0.96)' && $el.style.boxShadow='0 2px 6px rgba(225, 29, 72, 0.3)')"
+                            x-on:mouseup="!sendingGift && ($el.style.transform='scale(1)' && $el.style.boxShadow='0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3)')"
+                            x-on:mouseleave="!sendingGift && ($el.style.transform='scale(1)' && $el.style.boxShadow='0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3)')"
+                            :style="sendingGift ?
+                                'opacity: 0.7; cursor: not-allowed; transform: scale(1) !important; box-shadow: none;' :
+                                ''">
+                            <span x-text="sendingGift ? '正在送出...' : '💝 确认赠送'"
+                                style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);"></span>
+                        </button>
+                    </div>
                 </div>
             </div>