feat: 星之界打手端UI与提现/充值/排行榜等页面同步更新

Co-authored-by: Cursor <cursoragent@cursor.com>

components/kefu-float/kefu-float.js

@@ -1,5 +1,18 @@
 import { openCustomerServiceChat, resolveKefuIconUrl } from '../../utils/kefu-nav.js';
 
+const CS_HOUR_START = 8;
+const CS_HOUR_END = 23;
+
+function getCsOnlineStatus() {
+  const hour = new Date().getHours();
+  const online = hour >= CS_HOUR_START && hour < CS_HOUR_END;
+  return {
+    csOnline: online,
+    csHoursText: '8:00-23:00',
+    csStatusText: online ? '在线' : '在线时间',
+  };
+}
+
 Component({
   properties: {
     bottom: { type: String, value: '200rpx' },
@@ -11,6 +24,9 @@ Component({
     csUnread: 0,
     floatY: 520,
     iconUrl: '',
+    csOnline: false,
+    csHoursText: '8:00-23:00',
+    csStatusText: '在线时间',
   },
 
   lifetimes: {
@@ -27,6 +43,7 @@ Component({
         app.on('configApplied', this._configHandler);
       }
       this.syncCsUnread();
+      this._syncOnlineStatus();
     },
     detached() {
       const app = getApp();
@@ -47,10 +64,14 @@ Component({
       this._syncIcon();
       this._syncFromGlobal();
       this.syncCsUnread();
+      this._syncOnlineStatus();
     },
   },
 
   methods: {
+    _syncOnlineStatus() {
+      this.setData(getCsOnlineStatus());
+    },
     _syncIcon() {
       const url = resolveKefuIconUrl(getApp());
       if (url && url !== this.data.iconUrl) {

components/kefu-float/kefu-float.wxml

@@ -15,7 +15,8 @@
             <image class="kefu-float-icon-img" src="{{iconUrl}}" mode="aspectFit" binderror="onIconError"/>
             <view class="kefu-text-col">
               <text class="kefu-float-text">联系客服</text>
-              <text class="kefu-float-sub" wx:if="{{csUnread > 0}}">有新消息</text>
+              <text class="kefu-float-sub kefu-float-sub--warn" wx:if="{{csUnread > 0}}">有新消息</text>
+              <text class="kefu-float-sub {{csOnline ? 'kefu-float-sub--online' : ''}}" wx:else>{{csStatusText}} {{csHoursText}}</text>
             </view>
           </view>
           <view class="kefu-float-close" catchtap="onHideTap">

components/kefu-float/kefu-float.wxss

@@ -31,27 +31,34 @@
 .kefu-float--full {
   display: flex;
   align-items: stretch;
-  background: #fff;
-  border-radius: 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
-  border: 1rpx solid rgba(124, 58, 237, 0.18);
+  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+  border-radius: 999rpx;
+  box-shadow: 0 8rpx 28rpx rgba(7, 193, 96, 0.45);
+  border: 2rpx solid rgba(255, 255, 255, 0.85);
   overflow: visible;
+  animation: kefu-pulse 2.4s ease-in-out infinite;
+}
+
+@keyframes kefu-pulse {
+  0%, 100% { box-shadow: 0 8rpx 28rpx rgba(7, 193, 96, 0.45); }
+  50% { box-shadow: 0 8rpx 36rpx rgba(7, 193, 96, 0.65), 0 0 0 8rpx rgba(7, 193, 96, 0.12); }
 }
 
 .kefu-unread-badge {
   position: absolute;
   top: -10rpx;
   right: -6rpx;
-  min-width: 32rpx;
-  height: 32rpx;
-  line-height: 32rpx;
-  padding: 0 6rpx;
+  min-width: 36rpx;
+  height: 36rpx;
+  line-height: 36rpx;
+  padding: 0 8rpx;
   background: #fa5151;
   color: #fff;
-  font-size: 18rpx;
+  font-size: 20rpx;
+  font-weight: 700;
   text-align: center;
-  border-radius: 16rpx;
-  border: 2rpx solid #fff;
+  border-radius: 18rpx;
+  border: 3rpx solid #fff;
   z-index: 2;
 }
 
@@ -63,7 +70,7 @@
 .kefu-float-main {
   display: flex;
   align-items: center;
-  padding: 14rpx 16rpx;
+  padding: 18rpx 24rpx;
   flex: 1;
 }
 
@@ -72,11 +79,13 @@
 }
 
 .kefu-float-icon-img {
-  width: 36rpx;
-  height: 36rpx;
-  margin-right: 10rpx;
+  width: 44rpx;
+  height: 44rpx;
+  margin-right: 12rpx;
   flex-shrink: 0;
-  border-radius: 8rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 4rpx;
 }
 
 .kefu-text-col {
@@ -86,32 +95,42 @@
 }
 
 .kefu-float-text {
-  font-size: 24rpx;
-  color: #333;
-  font-weight: 600;
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: 700;
   white-space: nowrap;
 }
 
 .kefu-float-sub {
-  font-size: 18rpx;
-  color: #fa5151;
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.92);
   margin-top: 2rpx;
+  font-weight: 600;
+}
+
+.kefu-float-sub--online {
+  color: #e8ffe8;
+}
+
+.kefu-float-sub--warn {
+  color: #fff3e0;
 }
 
 .kefu-float-close {
-  width: 48rpx;
+  width: 52rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f5f3ff;
-  color: #999;
-  font-size: 32rpx;
+  background: rgba(0, 0, 0, 0.12);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 34rpx;
   line-height: 1;
-  border-left: 1rpx solid rgba(124, 58, 237, 0.1);
+  border-left: 1rpx solid rgba(255, 255, 255, 0.25);
+  border-radius: 0 999rpx 999rpx 0;
 }
 
 .kefu-float-close:active {
-  background: #ede9fe;
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .kefu-permanent-row {
@@ -133,7 +152,7 @@
 
 .kefu-permanent-label {
   font-size: 20rpx;
-  color: #aaa;
+  color: #888;
 }
 
 .kefu-wrap--mini {
@@ -141,16 +160,17 @@
 }
 
 .kefu-float--mini {
-  width: 72rpx;
-  height: 72rpx;
+  width: 96rpx;
+  height: 96rpx;
   padding: 0;
   border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.1);
-  border: 1rpx solid rgba(124, 58, 237, 0.2);
+  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.45);
+  border: 3rpx solid #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+  animation: kefu-pulse 2.4s ease-in-out infinite;
 }
 
 .kefu-float--mini:active {
@@ -158,7 +178,9 @@
 }
 
 .kefu-float-mini-icon-img {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 8rpx;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 4rpx;
 }