Merge branch 'cfclub' of http://git.iwintrue.com/liaoxg/cfc into cfclub

cfc-frontend/custom-tab-bar/index.vue

@@ -1,9 +1,32 @@
 <template>
   <view class="tab-bar-wrap">
-    <!-- 统一TabBar：4 Tab（首页/健康/成长/我的），所有人同一套入口 -->
+    <!-- 统一TabBar：4 Tab（首页/健康/成长/我的）5 等分，中间放五维按钮，所有人同一套入口 -->
     <view class="tab-bar">
       <view
-        v-for="(item, index) in normalTabs"
+        v-for="(item, index) in leftTabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: isActive(item) }"
+        @click="switchTab(item)"
+      >
+        <image
+          class="tab-icon"
+          :src="isActive(item) ? item.selectedIcon : item.icon"
+          mode="aspectFit"
+        ></image>
+        <text class="tab-text">{{ item.text }}</text>
+      </view>
+
+      <!-- 中间五维按钮（占 20% 槽位） -->
+      <view class="center-btn" @click="openDimPanel">
+        <view class="center-btn-inner">
+          <text class="center-btn-icon">⭐</text>
+        </view>
+        <text class="center-btn-label">五维</text>
+      </view>
+
+      <view
+        v-for="(item, index) in rightTabs"
         :key="index"
         class="tab-item"
         :class="{ active: isActive(item) }"
@@ -18,7 +41,7 @@
       </view>
     </view>
 
-    <!-- 五维横排展开（五维按钮已移除，保留dim-fan弹窗） -->
+    <!-- 五维横排展开 -->
     <view class="dim-fan-overlay" v-if="showDimPanel" @click="closeDimPanel">
       <view class="dim-fan-row">
         <view
@@ -67,6 +90,15 @@ export default {
       ]
     }
   },
+  computed: {
+    // 5 等分：左 2 Tab + 中间五维按钮 + 右 2 Tab
+    leftTabs() {
+      return this.normalTabs.slice(0, 2)
+    },
+    rightTabs() {
+      return this.normalTabs.slice(2)
+    }
+  },
   mounted() {
     this.updateSelected()
   },
@@ -94,7 +126,23 @@ export default {
         uni.redirectTo({ url: item.pagePath })
       }
     },
+    openDimPanel() {
+      this.showDimPanel = true
+      this.fanActive = false
+      var self = this
+      setTimeout(function() {
+        self.fanActive = true
+      }, 30)
+    },
+    closeDimPanel() {
+      this.fanActive = false
+      var self = this
+      setTimeout(function() {
+        self.showDimPanel = false
+      }, 200)
+    },
     goDimension(dim) {
+      this.closeDimPanel()
       var dimMap = {
         action: '/pages/action-detail/index',
         mind: '/pages/mind-detail/index',
@@ -130,14 +178,18 @@ export default {
   background: #fff;
   padding-bottom: env(safe-area-inset-bottom);
   border-top: 1rpx solid #eee;
+  position: relative;
 }
 
 .tab-item {
-  flex: 1;
+  width: 20%;
+  flex: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
+  z-index: 1;
 }
 
 .tab-icon {
@@ -155,6 +207,43 @@ export default {
   color: #F97316;
 }
 
+/* 中间五维按钮（占 20% 槽位） */
+.center-btn {
+  width: 20%;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 0;
+  position: relative;
+  z-index: 2;
+}
+
+.center-btn-inner {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: -20rpx;
+  flex-shrink: 0;
+  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.4);
+}
+
+.center-btn-icon {
+  font-size: 40rpx;
+  line-height: 1;
+}
+.center-btn-label {
+  font-size: 20rpx;
+  color: #999;
+  text-align: center;
+  margin-top: 2rpx;
+}
+
 /* 五维横排展开 */
 .dim-fan-overlay {
   position: fixed;