0.0.0

miniprogram/custom-tab-bar/index.js

@@ -0,0 +1,45 @@
+// custom-tab-bar — 三 Tab + 中央状态化「遛狗」FAB（docs/04 §2）
+const store = require('../utils/store.js');
+
+Component({
+  data: {
+    selected: 1, // 0=记录 1=我的
+    // walkState: idle | walking | paused —— 决定中央 FAB 颜色与文案
+    walkState: 'idle',
+  },
+
+  lifetimes: {
+    attached() {
+      this.syncWalkState();
+    },
+  },
+
+  pageLifetimes: {
+    show() {
+      this.syncWalkState();
+    },
+  },
+
+  methods: {
+    syncWalkState() {
+      const session = store.getWalkSession();
+      this.setData({ walkState: session ? session.status : 'idle' });
+    },
+
+    switchTab(e) {
+      const { path, index } = e.currentTarget.dataset;
+      this.setData({ selected: index });
+      wx.switchTab({ url: path });
+    },
+
+    // 中央「遛狗」按钮：进行中→回遛狗页；空闲→开始（单狗直进/多狗弹层）
+    onCenterTap() {
+      if (this.data.walkState !== 'idle') {
+        wx.navigateTo({ url: '/pages/walking/walking' });
+        return;
+      }
+      // TODO 阶段2：单狗直接进 walking；多狗触发 multi-dog-sheet
+      wx.navigateTo({ url: '/pages/walking/walking' });
+    },
+  },
+});

miniprogram/custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

miniprogram/custom-tab-bar/index.wxml

@@ -0,0 +1,21 @@
+<!-- 自定义 tabBar：左[记录] 中[遛狗FAB] 右[我的] -->
+<view class="tabbar">
+  <view class="tab {{selected===0?'active':''}}" data-index="0" data-path="/pages/records/records" bindtap="switchTab">
+    <view class="tab-ico">▤</view>
+    <text class="tab-txt">记录</text>
+  </view>
+
+  <view class="tab-center">
+    <view class="fab fab-{{walkState}}" bindtap="onCenterTap">
+      <text class="fab-ico">{{walkState==='paused' ? '❚❚' : '🐾'}}</text>
+    </view>
+    <text class="tab-txt center-txt-{{walkState}}">
+      {{walkState==='walking' ? '遛狗中' : walkState==='paused' ? '已暂停' : '遛狗'}}
+    </text>
+  </view>
+
+  <view class="tab {{selected===1?'active':''}}" data-index="1" data-path="/pages/home/home" bindtap="switchTab">
+    <view class="tab-ico">◉</view>
+    <text class="tab-txt">我的</text>
+  </view>
+</view>

miniprogram/custom-tab-bar/index.wxss

@@ -0,0 +1,43 @@
+.tabbar {
+  font-family: var(--font);
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  height: calc(128rpx + env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
+  background: rgba(251, 248, 243, 0.92);
+  backdrop-filter: blur(20px);
+  border-top: 1rpx solid var(--line);
+  display: flex;
+  align-items: flex-start;
+  padding-top: 14rpx;
+  z-index: 100;
+}
+.tab, .tab-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+}
+.tab-ico { font-size: var(--tab-icon-size); color: var(--ink-3); line-height: 1; }
+.tab.active .tab-ico { color: var(--accent-deep); }
+.tab-txt { font-size: 21rpx; color: var(--ink-3); }
+.tab.active .tab-txt { color: var(--accent-deep); }
+
+/* 中央凸起 FAB */
+.fab {
+  width: 108rpx; height: 108rpx;
+  border-radius: 50%;
+  background: var(--accent);
+  display: flex; align-items: center; justify-content: center;
+  margin-top: -52rpx;
+  border: 8rpx solid var(--bg);
+  box-shadow: 0 8rpx 24rpx rgba(200,126,46,0.35);
+}
+.fab-ico { font-size: var(--fab-icon-size); line-height: 1; }
+.fab-walking { background: var(--success); box-shadow: 0 8rpx 24rpx rgba(107,142,90,0.35); }
+.fab-paused { background: var(--warn); box-shadow: none; }
+
+.center-txt-walking { color: var(--success); }
+.center-txt-paused { color: var(--warn); }
+.center-txt-idle { color: var(--ink-2); }