Explorar el Código

feat(sandbox): 个人/全家切换移到控件右上角,替换原徽章文案

liaoxg hace 2 semanas
padre
commit
10b78dbf26
Se han modificado 1 ficheros con 25 adiciones y 13 borrados
  1. 25 13
      cfc-frontend/components/wuxing-sandbox.vue

+ 25 - 13
cfc-frontend/components/wuxing-sandbox.vue

@@ -5,22 +5,16 @@
     <view class="sandbox-header">
       <image class="sandbox-logo" src="/static/logo.png" mode="aspectFit"></image>
       <text class="sandbox-title">浠艾福能量沙盘</text>
-      <text class="sandbox-badge">{{ displayBadgeText }}</text>
+      <!-- 右上角:live 模式显示个人/全家切换,preview 模式显示徽章文案 -->
+      <view class="sandbox-switch" v-if="mode !== 'preview'" @click="onToggle(currentView === 'family' ? 'personal' : 'family')">
+        <text class="sandbox-switch-icon">{{ currentView === 'family' ? '👨‍👩‍👧‍👦' : '👤' }}</text>
+        <text class="sandbox-switch-label">{{ currentView === 'family' ? '全家' : (currentMember ? currentMember.name : '个人') }}</text>
+        <text class="sandbox-switch-arrow">⇄</text>
+      </view>
+      <text class="sandbox-badge" v-else>{{ displayBadgeText }}</text>
     </view>
   </slot>
 
-  <!-- 个人/全家切换开关(始终显示,成员 <2 时点全家会提示) -->
-  <view class="sandbox-toggle" v-if="mode !== 'preview'">
-    <view class="toggle-item" :class="activeClassName" @click="onToggle('personal')">
-      <text class="toggle-icon">👤</text>
-      <text class="toggle-text">个人</text>
-    </view>
-    <view class="toggle-item toggle-item--family" :class="activeFamilyClassName" @click="onToggle('family')">
-      <text class="toggle-icon">👨‍👩‍👧‍👦</text>
-      <text class="toggle-text">全家</text>
-    </view>
-  </view>
-
   <view class="sandbox-star" :style="{height: starHeight}">
     <view class="star-glow-bg"></view>
 
@@ -652,6 +646,24 @@ export default {
   border-radius: 20rpx;
   margin-left: auto;
 }
+.sandbox-switch {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  font-size: 20rpx;
+  color: rgba(143,197,232,0.85);
+  background: rgba(143,197,232,0.12);
+  padding: 6rpx 14rpx;
+  border-radius: 20rpx;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.sandbox-switch:active {
+  background: rgba(143,197,232,0.22);
+}
+.sandbox-switch-icon { font-size: 22rpx; line-height: 1; }
+.sandbox-switch-label { font-size: 20rpx; font-weight: 600; max-width: 120rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.sandbox-switch-arrow { font-size: 18rpx; opacity: 0.6; }
 
 /* ---- 五角星区域 ---- */
 .sandbox-star {