feat(category): 主分类(按器械/按部位)改为多选; filter-bar 内联默认展示几个分类其余收进"全部类型"面板

miniprogram/pages/category/category.js

@@ -29,9 +29,10 @@ Page({
     statusBarHeight: 20,
     dimension: 'bodyPart',
     title: '分类',
-    value: '',
+    dimTitle: '分类',
+    // 主维度支持多选：activeValues 为已选 value 数组（空数组 = 全部）
+    activeValues: [],
     values: [],
-    activeValue: '',
     // 二级维度（多维度筛选）：进入器械维度时交叉按部位，其余维度交叉按器械
     secondaryDim: 'equipment',
     secondaryKey: 'equipment',
@@ -50,12 +51,14 @@ Page({
   onLoad(query) {
     const dimension = query.dimension || 'bodyPart';
     const value = query.value || '';
+    const activeValues = value ? [value] : [];
     const secondaryDim = dimension === 'equipment' ? 'bodyPart' : 'equipment';
     const title = query.title || labelForDim(dimension);
     this.setData({
       statusBarHeight: app.globalData.statusBarHeight || 20,
       dimension,
-      value,
+      activeValues,
+      dimTitle: labelForDim(dimension),
       secondaryDim,
       secondaryKey: DIM_MAP[secondaryDim] || 'equipment',
       secondaryLabel: SECONDARY_LABEL[secondaryDim] || '器械',
@@ -75,20 +78,23 @@ Page({
       const list = (items || []).slice();
       // 头部插入「全部」项：明确当前为「全部」
       list.unshift({ value: '', label: '全部' });
-      const activeValue = this.data.value || '';
       // 用分类枚举里的干净中文标签回写标题，避免外部传入的标题出现乱码
       let title = this.data.title;
-      if (activeValue) {
-        const hit = list.find((it) => it.value === activeValue);
+      const { activeValues } = this.data;
+      if (activeValues.length === 1) {
+        const hit = list.find((it) => it.value === activeValues[0]);
         if (hit && hit.label) title = hit.label;
+      } else if (activeValues.length > 1) {
+        title = `已选 ${activeValues.length} 个`;
       }
+      // 主维度 items 带 active 标志（供 filter-bar 置顶/内联展示）
+      const primaryItems = list.map((it) => ({ ...it, active: activeValues.includes(it.value) }));
       const secList = (secItems || []).slice().map((it) => ({
         ...it,
         active: this.data.secondarySelected.includes(it.value)
       }));
       this.setData({
-        values: list,
-        activeValue: activeValue,
+        values: primaryItems,
         secondaryList: secList,
         title,
         loading: false
@@ -99,20 +105,19 @@ Page({
     });
   },
 
-  syncSecondaryActive() {
-    const sel = this.data.secondarySelected;
-    const list = this.data.secondaryList.map((it) => ({ ...it, active: sel.includes(it.value) }));
-    this.setData({ secondaryList: list });
+  buildParams(page) {
+    const params = { page, pageSize: this.data.pageSize };
+    const av = this.data.activeValues;
+    if (av.length) params[this.data.dimension] = av.join(',');
+    if (this.data.secondarySelected.length) {
+      params[this.data.secondaryDim] = this.data.secondarySelected.join(',');
+    }
+    return params;
   },
 
   loadExercises() {
     this.setData({ loading: true, page: 1 });
-    const params = { page: 1, pageSize: this.data.pageSize };
-    params[this.data.dimension] = this.data.activeValue;
-    if (this.data.secondarySelected.length) {
-      params[this.data.secondaryDim] = this.data.secondarySelected.join(',');
-    }
-    svc.listExercises(params).then((res) => {
+    svc.listExercises(this.buildParams(1)).then((res) => {
       const items = (res && res.items) || [];
       const total = (res && res.total) || 0;
       this.setData({
@@ -134,12 +139,7 @@ Page({
   loadMore() {
     const next = this.data.page + 1;
     this.setData({ loadingMore: true });
-    const params = { page: next, pageSize: this.data.pageSize };
-    params[this.data.dimension] = this.data.activeValue;
-    if (this.data.secondarySelected.length) {
-      params[this.data.secondaryDim] = this.data.secondarySelected.join(',');
-    }
-    svc.listExercises(params).then((res) => {
+    svc.listExercises(this.buildParams(next)).then((res) => {
       const items = (res && res.items) || [];
       const total = (res && res.total) || 0;
       const merged = this.data.exercises.concat(items);
@@ -155,28 +155,32 @@ Page({
     });
   },
 
-  onValue(e) {
-    const value = e.detail.value;
-    if (value === this.data.activeValue) return;
-    this.setData({ activeValue: value, page: 1 }, () => this.loadExercises());
+  // 主维度（按器械/按部位）多选
+  onPrimaryChange(e) {
+    const vals = e.detail.values || [];
+    const values = this.data.values.map((it) => ({ ...it, active: vals.includes(it.value) }));
+    let title = this.data.title;
+    if (vals.length === 1) {
+      const hit = values.find((it) => it.value === vals[0]);
+      title = (hit && hit.label) || labelForDim(this.data.dimension);
+    } else if (vals.length > 1) {
+      title = `已选 ${vals.length} 个`;
+    } else {
+      title = labelForDim(this.data.dimension);
+    }
+    this.setData({ activeValues: vals, values, title, page: 1 }, () => this.loadExercises());
   },
 
-  onSecondary(e) {
-    const value = e.detail.value;
-    if (!value) return;
-    const cur = this.data.secondarySelected;
-    const next = cur.includes(value) ? cur.filter((v) => v !== value) : cur.concat(value);
-    this.setData({ secondarySelected: next, page: 1 }, () => {
-      this.syncSecondaryActive();
-      this.loadExercises();
-    });
+  // 二级维度（部位/器械）多选
+  onSecondaryChange(e) {
+    const values = e.detail.values || [];
+    const secondaryList = this.data.secondaryList.map((it) => ({ ...it, active: values.includes(it.value) }));
+    this.setData({ secondarySelected: values, secondaryList, page: 1 }, () => this.loadExercises());
   },
 
   onSecondaryClear() {
-    this.setData({ secondarySelected: [], page: 1 }, () => {
-      this.syncSecondaryActive();
-      this.loadExercises();
-    });
+    const secondaryList = this.data.secondaryList.map((it) => ({ ...it, active: false }));
+    this.setData({ secondarySelected: [], secondaryList, page: 1 }, () => this.loadExercises());
   },
 
   onExercise(e) {

miniprogram/pages/category/category.wxml

@@ -3,32 +3,24 @@
 
   <view class="section" style="padding-top: 8rpx;">
     <view wx:if="{{values.length}}" class="filterbar" style="top: calc({{statusBarHeight}}px + 88rpx);">
-      <scroll-view scroll-x class="filterbar__row">
-        <chip
-          wx:for="{{values}}"
-          wx:key="value"
-          label="{{item.label}}"
-          value="{{item.value}}"
-          active="{{activeValue === item.value}}"
-          bind:select="onValue" />
-        <view class="filterbar__spacer"></view>
-      </scroll-view>
+      <filter-bar
+        items="{{values}}"
+        multiple="{{true}}"
+        title="{{dimTitle}}"
+        placeholder="全部类型"
+        bind:change="onPrimaryChange" />
 
       <view wx:if="{{secondaryList.length}}" class="filterbar__sub">
         <view class="filterbar__subhead">
           <text class="filterbar__sublabel">{{secondaryLabel}}</text>
           <text wx:if="{{secondarySelected.length}}" class="filterbar__clear" bindtap="onSecondaryClear">清除 ({{secondarySelected.length}})</text>
         </view>
-        <scroll-view scroll-x class="filterbar__row">
-          <chip
-            wx:for="{{secondaryList}}"
-            wx:key="value"
-            label="{{item.label}}"
-            value="{{item.value}}"
-            active="{{item.active}}"
-            bind:select="onSecondary" />
-          <view class="filterbar__spacer"></view>
-        </scroll-view>
+        <filter-bar
+          items="{{secondaryList}}"
+          multiple="{{true}}"
+          title="{{secondaryLabel}}"
+          placeholder="筛选{{secondaryLabel}}"
+          bind:change="onSecondaryChange" />
       </view>
     </view>
     <view wx:else class="filterbar__loading muted">{{ loading ? '加载分类中…' : '暂无分类' }}</view>