From 477f052cbd530125abca4806d0fc169537d62338 Mon Sep 17 00:00:00 2001
From: cnliucheng <brokenway@163.com>
Date: Wed, 8 Jul 2026 11:38:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=AE=E5=8A=A8=20Dock=20TabBar=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(=E5=9C=86=E8=A7=92=E8=83=B6=E5=9B=8A=20+?=
 =?UTF-8?q?=20=E9=98=B4=E5=BD=B1=20+=20=E6=B7=B1=E8=89=B2=E8=A6=86?=
 =?UTF-8?q?=E7=9B=96)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 custom-tab-bar/index.wxml | 66 ++++++++++++++++++------------------
 custom-tab-bar/index.wxss | 71 +++++++++++++++++++++++++--------------
 2 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/custom-tab-bar/index.wxml b/custom-tab-bar/index.wxml
index b35c009..7e74a91 100644
--- a/custom-tab-bar/index.wxml
+++ b/custom-tab-bar/index.wxml
@@ -1,37 +1,39 @@
-<view class="tab-bar" style="{{themeStyle}}">
-  <view
-    class="tab-item {{selected === 0 ? 'active' : ''}}"
-    data-index="0"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 0 ? svgIcons.homeFill : svgIcons.home}})"></view>
-    <text class="tab-text">训练</text>
-  </view>
+<view class="dock" style="{{themeStyle}}">
+  <view class="dock-inner">
+    <view
+      class="dock-item {{selected === 0 ? 'active' : ''}}"
+      data-index="0"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 0 ? svgIcons.homeFill : svgIcons.home}})"></view>
+      <text class="dock-text">训练</text>
+    </view>
 
-  <view
-    class="tab-item {{selected === 1 ? 'active' : ''}}"
-    data-index="1"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 1 ? svgIcons.calendarFill : svgIcons.calendar}})"></view>
-    <text class="tab-text">记录</text>
-  </view>
+    <view
+      class="dock-item {{selected === 1 ? 'active' : ''}}"
+      data-index="1"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 1 ? svgIcons.calendarFill : svgIcons.calendar}})"></view>
+      <text class="dock-text">记录</text>
+    </view>
 
-  <view
-    class="tab-item {{selected === 2 ? 'active' : ''}}"
-    data-index="2"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 2 ? svgIcons.rankFill : svgIcons.rank}})"></view>
-    <text class="tab-text">排行</text>
-  </view>
+    <view
+      class="dock-item {{selected === 2 ? 'active' : ''}}"
+      data-index="2"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 2 ? svgIcons.rankFill : svgIcons.rank}})"></view>
+      <text class="dock-text">排行</text>
+    </view>
 
-  <view
-    class="tab-item {{selected === 3 ? 'active' : ''}}"
-    data-index="3"
-    bindtap="switchTab"
-  >
-    <view class="tab-icon" style="background-image: url({{selected === 3 ? svgIcons.settingsFill : svgIcons.settings}})"></view>
-    <text class="tab-text">设置</text>
+    <view
+      class="dock-item {{selected === 3 ? 'active' : ''}}"
+      data-index="3"
+      bindtap="switchTab"
+    >
+      <view class="dock-icon" style="background-image: url({{selected === 3 ? svgIcons.settingsFill : svgIcons.settings}})"></view>
+      <text class="dock-text">设置</text>
+    </view>
   </view>
 </view>
diff --git a/custom-tab-bar/index.wxss b/custom-tab-bar/index.wxss
index d84ac70..e7839dc 100644
--- a/custom-tab-bar/index.wxss
+++ b/custom-tab-bar/index.wxss
@@ -1,54 +1,73 @@
-.tab-bar {
+.dock {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: calc(110rpx + env(safe-area-inset-bottom));
-  background: #FFFFFF;
+  bottom: calc(40rpx + env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 80rpx);
+  max-width: 600rpx;
+  z-index: 100;
+}
+
+.dock-inner {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  border-top: 1rpx solid rgba(0, 0, 0, 0.06);
-  padding-bottom: env(safe-area-inset-bottom);
-  z-index: 999;
-  box-sizing: border-box;
-  overflow: hidden;
+  background: var(--card-bg, #FFFFFF);
+  border-radius: 100rpx;
+  padding: 12rpx 0;
+  box-shadow:
+    0 8rpx 32rpx rgba(0, 0, 0, 0.12),
+    0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  transition: background-color 0.3s ease;
 }
 
-.tab-item {
+.dock-item {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 4rpx 0;
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  box-sizing: border-box;
+  padding: 8rpx 0;
+  transition: transform 0.2s ease;
 }
 
-.tab-item:active {
+.dock-item:active {
   transform: scale(0.92);
 }
 
-.tab-icon {
+.dock-icon {
   width: 44rpx;
   height: 44rpx;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   margin-bottom: 4rpx;
-  flex-shrink: 0;
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
 }
 
-.tab-text {
-  font-size: 22rpx;
-  color: var(--text-secondary);
+.dock-text {
+  font-size: 20rpx;
+  color: var(--text-secondary, #999);
   line-height: 1;
-  white-space: nowrap;
+  transition: color 0.2s ease;
 }
 
-.tab-item.active .tab-text {
-  color: var(--primary);
+.dock-item.active .dock-icon {
+  opacity: 1;
+}
+
+.dock-item.active .dock-text {
+  color: var(--primary, #FF6B35);
   font-weight: 600;
 }
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  .dock-inner {
+    background: var(--card-bg, #1C1C1E);
+    box-shadow:
+      0 8rpx 32rpx rgba(0, 0, 0, 0.5),
+      0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  }
+}