删除 Kbone 小程序开发技能相关文档，优化项目结构以提升可维护性。

2026-02-04 11:36:19 +08:00
parent f7808e48db
commit fa9e1e59ce
81 changed files with 16703 additions and 32 deletions
--- a/miniprogram/custom-tab-bar/index.js
+++ b/miniprogram/custom-tab-bar/index.js
@@ -0,0 +1,114 @@
+/**
+ * Soul创业实验 - 自定义TabBar组件
+ * 根据后台配置动态显示/隐藏"找伙伴"按钮
+ */
+
+const app = getApp()
+
+Component({
+  data: {
+    selected: 0,
+    color: '#8e8e93',
+    selectedColor: '#00CED1',
+    matchEnabled: false, // 找伙伴功能开关，默认关闭
+    list: [
+      {
+        pagePath: '/pages/index/index',
+        text: '首页',
+        iconType: 'home'
+      },
+      {
+        pagePath: '/pages/chapters/chapters',
+        text: '目录',
+        iconType: 'list'
+      },
+      {
+        pagePath: '/pages/match/match',
+        text: '找伙伴',
+        iconType: 'match',
+        isSpecial: true
+      },
+      {
+        pagePath: '/pages/my/my',
+        text: '我的',
+        iconType: 'user'
+      }
+    ]
+  },
+
+  lifetimes: {
+    attached() {
+      this.loadFeatureConfig()
+    }
+  },
+
+  methods: {
+    // 加载功能配置
+    async loadFeatureConfig() {
+      try {
+        const res = await app.request({
+          url: '/api/db/config',
+          method: 'GET'
+        })
+        
+        if (res && res.features) {
+          const matchEnabled = res.features.matchEnabled === true
+          this.setData({ matchEnabled }, () => {
+            // 配置加载完成后，根据当前路由设置选中状态
+            this.updateSelected()
+          })
+          
+          // 如果当前在找伙伴页面，但功能已关闭，跳转到首页
+          if (!matchEnabled) {
+            const pages = getCurrentPages()
+            const currentPage = pages[pages.length - 1]
+            if (currentPage && currentPage.route === 'pages/match/match') {
+              wx.switchTab({ url: '/pages/index/index' })
+            }
+          }
+        }
+      } catch (error) {
+        console.log('TabBar加载功能配置失败:', error)
+        // 默认关闭找伙伴功能
+        this.setData({ matchEnabled: false }, () => {
+          this.updateSelected()
+        })
+      }
+    },
+
+    // 根据当前路由更新选中状态
+    updateSelected() {
+      const pages = getCurrentPages()
+      if (pages.length === 0) return
+      
+      const currentPage = pages[pages.length - 1]
+      const route = currentPage.route
+      
+      let selected = 0
+      const { matchEnabled } = this.data
+      
+      // 根据路由匹配对应的索引
+      if (route === 'pages/index/index') {
+        selected = 0
+      } else if (route === 'pages/chapters/chapters') {
+        selected = 1
+      } else if (route === 'pages/match/match') {
+        selected = 2
+      } else if (route === 'pages/my/my') {
+        selected = matchEnabled ? 3 : 2
+      }
+      
+      this.setData({ selected })
+    },
+
+    switchTab(e) {
+      const data = e.currentTarget.dataset
+      const url = data.path
+      const index = data.index
+      
+      if (this.data.selected === index) return
+      
+      wx.switchTab({ url })
+    }
+  }
+})
--- a/miniprogram/custom-tab-bar/index.json
+++ b/miniprogram/custom-tab-bar/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/miniprogram/custom-tab-bar/index.wxml
+++ b/miniprogram/custom-tab-bar/index.wxml
@@ -0,0 +1,56 @@
+<!--custom-tab-bar/index.wxml-->
+<view class="tab-bar {{matchEnabled ? 'tab-bar-four' : 'tab-bar-three'}}">
+  <view class="tab-bar-border"></view>
+  
+  <!-- 首页 -->
+  <view class="tab-bar-item" data-path="{{list[0].pagePath}}" data-index="0" bindtap="switchTab">
+    <view class="icon-wrapper">
+      <!-- 首页图标 -->
+      <view class="icon {{selected === 0 ? 'icon-active' : ''}}">
+        <view class="icon-home">
+          <view class="home-roof"></view>
+          <view class="home-body"></view>
+        </view>
+      </view>
+    </view>
+    <view class="tab-bar-text" style="color: {{selected === 0 ? selectedColor : color}}">{{list[0].text}}</view>
+  </view>
+
+  <!-- 目录 -->
+  <view class="tab-bar-item" data-path="{{list[1].pagePath}}" data-index="1" bindtap="switchTab">
+    <view class="icon-wrapper">
+      <view class="icon {{selected === 1 ? 'icon-active' : ''}}">
+        <view class="icon-list">
+          <view class="list-line"></view>
+          <view class="list-line"></view>
+          <view class="list-line"></view>
+        </view>
+      </view>
+    </view>
+    <view class="tab-bar-text" style="color: {{selected === 1 ? selectedColor : color}}">{{list[1].text}}</view>
+  </view>
+
+  <!-- 找伙伴 - 中间突出按钮（根据配置显示） -->
+  <view class="tab-bar-item special-item" wx:if="{{matchEnabled}}" data-path="{{list[2].pagePath}}" data-index="2" bindtap="switchTab">
+    <view class="special-button {{selected === 2 ? 'special-active' : ''}}">
+      <view class="icon-users">
+        <view class="user-circle user-1"></view>
+        <view class="user-circle user-2"></view>
+      </view>
+    </view>
+    <view class="tab-bar-text special-text" style="color: {{selected === 2 ? selectedColor : color}}">{{list[2].text}}</view>
+  </view>
+
+  <!-- 我的 -->
+  <view class="tab-bar-item" data-path="{{list[3].pagePath}}" data-index="{{matchEnabled ? 3 : 2}}" bindtap="switchTab">
+    <view class="icon-wrapper">
+      <view class="icon {{(matchEnabled && selected === 3) || (!matchEnabled && selected === 2) ? 'icon-active' : ''}}">
+        <view class="icon-user">
+          <view class="user-head"></view>
+          <view class="user-body"></view>
+        </view>
+      </view>
+    </view>
+    <view class="tab-bar-text" style="color: {{(matchEnabled && selected === 3) || (!matchEnabled && selected === 2) ? selectedColor : color}}">{{list[3].text}}</view>
+  </view>
+</view>
--- a/miniprogram/custom-tab-bar/index.wxss
+++ b/miniprogram/custom-tab-bar/index.wxss
@@ -0,0 +1,237 @@
+/**
+ * Soul创业实验 - 自定义TabBar样式
+ * 实现中间突出的"找伙伴"按钮
+ */
+
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  background: rgba(28, 28, 30, 0.95);
+  backdrop-filter: blur(40rpx);
+  -webkit-backdrop-filter: blur(40rpx);
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 999;
+}
+
+/* 三个tab布局（找伙伴功能关闭时） */
+.tab-bar-three .tab-bar-item {
+  flex: 1;
+}
+
+/* 四个tab布局（找伙伴功能开启时） */
+.tab-bar-four .tab-bar-item {
+  flex: 1;
+}
+
+.tab-bar-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1rpx;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.tab-bar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10rpx 0 16rpx;
+}
+
+.icon-wrapper {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4rpx;
+}
+
+.icon {
+  width: 44rpx;
+  height: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-bar-text {
+  font-size: 22rpx;
+  line-height: 1;
+}
+
+/* ===== 首页图标 ===== */
+.icon-home {
+  position: relative;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.home-roof {
+  position: absolute;
+  top: 4rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 18rpx solid transparent;
+  border-right: 18rpx solid transparent;
+  border-bottom: 14rpx solid #8e8e93;
+}
+
+.home-body {
+  position: absolute;
+  bottom: 4rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 28rpx;
+  height: 18rpx;
+  background: #8e8e93;
+  border-radius: 0 0 4rpx 4rpx;
+}
+
+.icon-active .home-roof {
+  border-bottom-color: #00CED1;
+}
+
+.icon-active .home-body {
+  background: #00CED1;
+}
+
+/* ===== 目录图标 ===== */
+.icon-list {
+  width: 36rpx;
+  height: 32rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.list-line {
+  width: 100%;
+  height: 6rpx;
+  background: #8e8e93;
+  border-radius: 3rpx;
+}
+
+.list-line:nth-child(2) {
+  width: 75%;
+}
+
+.list-line:nth-child(3) {
+  width: 50%;
+}
+
+.icon-active .list-line {
+  background: #00CED1;
+}
+
+/* ===== 我的图标 ===== */
+.icon-user {
+  position: relative;
+  width: 36rpx;
+  height: 40rpx;
+}
+
+.user-head {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16rpx;
+  height: 16rpx;
+  background: #8e8e93;
+  border-radius: 50%;
+}
+
+.user-body {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 28rpx;
+  height: 18rpx;
+  background: #8e8e93;
+  border-radius: 14rpx 14rpx 0 0;
+}
+
+.icon-active .user-head,
+.icon-active .user-body {
+  background: #00CED1;
+}
+
+/* ===== 找伙伴 - 中间特殊按钮 ===== */
+.special-item {
+  position: relative;
+  margin-top: -32rpx;
+}
+
+.special-button {
+  width: 112rpx;
+  height: 112rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(0, 206, 209, 0.4);
+  margin-bottom: 4rpx;
+  transition: all 0.2s ease;
+}
+
+.special-button:active {
+  transform: scale(0.95);
+}
+
+.special-active {
+  box-shadow: 0 8rpx 40rpx rgba(0, 206, 209, 0.6);
+}
+
+.special-text {
+  margin-top: 4rpx;
+}
+
+/* ===== 找伙伴图标 (双人) ===== */
+.icon-users {
+  position: relative;
+  width: 56rpx;
+  height: 44rpx;
+}
+
+.user-circle {
+  position: absolute;
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.user-circle::after {
+  content: '';
+  position: absolute;
+  bottom: -12rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 22rpx;
+  height: 14rpx;
+  background: #ffffff;
+  border-radius: 11rpx 11rpx 0 0;
+}
+
+.user-1 {
+  top: 0;
+  left: 0;
+}
+
+.user-2 {
+  top: 0;
+  right: 0;
+}