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

miniprogram/components/filter-bar/index.js

@@ -1,20 +1,23 @@
-// filter-bar：分类筛选器
-// 设计目标：① 选中的项永远排在最前；② 内联条不横向滚动，超出部分收进「▾」下拉面板；
-//          ③ 单选（主维度）/ 多选（二级维度）两种模式。
-// 父级通过 items（[{value,label,active}]）传入全部分类；change 事件回传选中的 value / values。
+// filter-bar：分类筛选器（多选友好）
+// 设计目标：
+//   ① 内联条「默认就展示几个分类」（选中优先，最多 PREVIEW 个），其余收进「全部类型」面板；
+//   ② 多选：内联 chip 直接切换选中态，面板内点选保持打开，选中项永远置顶；
+//   ③ value='' 的「全部」哨兵始终表示「无筛选」（空数组）。
+// 父级通过 items([{value,label,active}]) 传入全部分类（可含 value='' 的「全部」项）；
+// change 事件回传 { values: string[], value: string }（选中 value 数组，空数组=全部）。
 Component({
   properties: {
     items: { type: Array, value: [] },
-    multiple: { type: Boolean, value: false },
+    multiple: { type: Boolean, value: true },
     title: { type: String, value: '分类' },
-    placeholder: { type: String, value: '' }
+    placeholder: { type: String, value: '全部类型' }
   },
 
   data: {
     panelOpen: false,
-    panelItems: [],   // 选中置顶后的全量列表（供面板渲染）
-    visibleItems: [], // 内联收起态展示的「几个」选中项（单选最多 1，多选最多 3）
-    moreCount: 0      // 多选超出展示上限的剩余数量（内联 +N）
+    panelItems: [],
+    visibleItems: [],
+    moreCount: 0
   },
 
   observers: {
@@ -25,36 +28,49 @@ Component({
 
   methods: {
     recompute(items) {
-      // 选中置顶：active 的排前面，其余保持原序（面板展开后选中即在最前）
-      const list = items.slice().sort((a, b) => (b.active ? 1 : 0) - (a.active ? 1 : 0));
-      const sel = list.filter((i) => i.active);
-      const MAX = 3; // 收起态最多展示几个选中项
-      this.setData({
-        panelItems: list,
-        visibleItems: sel.slice(0, MAX),
-        moreCount: Math.max(0, sel.length - MAX)
+      const reals = items.filter((i) => i.value !== '');
+      const sel = reals.filter((i) => i.active);
+      const sorted = reals.slice().sort((a, b) => (b.active ? 1 : 0) - (a.active ? 1 : 0));
+      const PREVIEW = 3;
+      const inline = sorted.slice(0, PREVIEW);
+      const overflow = Math.max(0, sel.length - PREVIEW);
+      // 面板：顶部放「全部」哨兵（仅当无任何具体选中时为 active），其余按选中优先
+      const panel = [{ value: '', label: '全部', active: sel.length === 0 }].concat(sorted);
+      this.setData({ panelItems: panel, visibleItems: inline, moreCount: overflow });
+    },
+
+    emitChange(items) {
+      const vals = items.filter((i) => i.active && i.value !== '').map((i) => i.value);
+      this.triggerEvent('change', { values: vals, value: vals[0] || '' });
+    },
+
+    // 切换某项的选中态：选中具体项时自动取消「全部」；点「全部」则清空所有
+    toggle(value, items) {
+      if (value === '') {
+        return items.map((i) => ({ ...i, active: i.value === '' }));
+      }
+      return items.map((i) => {
+        if (i.value === value) return { ...i, active: !i.active };
+        if (i.value === '') return { ...i, active: false };
+        return i;
       });
     },
 
+    // 内联 chip：多选直接切换；单选打开面板
+    onChipTapInline(e) {
+      const value = e.currentTarget.dataset.value;
+      if (!this.data.multiple) {
+        this.togglePanel();
+        return;
+      }
+      const next = this.toggle(value, this.data.items);
+      this.recompute(next);
+      this.emitChange(next);
+    },
+
     togglePanel() {
       this.setData({ panelOpen: !this.data.panelOpen });
     },
-
-    // 内联收起态：只展示「几个」选中 chip + 末尾的「全部类型」按钮，不做横滑铺全部
-    // 单选：点已选 chip 打开面板切换；多选：点已选 chip 直接移除
-    onChipTapInline(e) {
-      const value = e.currentTarget.dataset.value;
-      if (this.data.multiple) {
-        const next = this.data.items.map((i) =>
-          i.value === value ? { ...i, active: false } : i
-        );
-        this.recompute(next);
-        const vals = next.filter((i) => i.active).map((i) => i.value);
-        this.triggerEvent('change', { values: vals });
-      } else {
-        this.togglePanel();
-      }
-    },
     closePanel() {
       this.setData({ panelOpen: false });
     },
@@ -62,30 +78,16 @@ Component({
 
     onPanelTap(e) {
       const value = e.currentTarget.dataset.value;
-      if (this.data.multiple) {
-        // 多选：本地切换 active，回传全量已选 values，面板保持打开
-        const next = this.data.items.map((i) =>
-          i.value === value ? { ...i, active: !i.active } : i
-        );
+      if (!this.data.multiple) {
+        const next = this.data.items.map((i) => ({ ...i, active: i.value === value }));
         this.recompute(next);
-        const vals = next.filter((i) => i.active).map((i) => i.value);
-        this.triggerEvent('change', { values: vals });
-      } else {
-        // 单选：直接选中并关闭面板
-        this.recompute(this.data.items.map((i) => ({ ...i, active: i.value === value })));
+        this.emitChange(next);
         this.setData({ panelOpen: false });
-        this.triggerEvent('change', { value });
+        return;
       }
-    },
-
-    onTagRemove(e) {
-      const value = e.currentTarget.dataset.value;
-      const next = this.data.items.map((i) =>
-        i.value === value ? { ...i, active: false } : i
-      );
+      const next = this.toggle(value, this.data.items);
       this.recompute(next);
-      const vals = next.filter((i) => i.active).map((i) => i.value);
-      this.triggerEvent('change', { values: vals });
+      this.emitChange(next);
     },
 
     onDone() {

miniprogram/components/filter-bar/index.wxml

@@ -1,6 +1,6 @@
 <view class="fb">
-  <!-- 内联收起态：只展示「几个」选中 chip（单选 1 个 / 多选最多 3 个），末尾一个「全部类型」按钮；
-       点击按钮才展开面板陈列全部，选中项自动置顶。不做横滑铺全部。 -->
+  <!-- 内联收起态：默认展示「几个」分类（选中优先，最多 3 个），其余收进「全部类型」面板；
+       每个内联 chip 直接切换选中；点「全部类型」展开全量面板进行多选。 -->
   <view class="fb-row" wx:if="{{items.length}}">
     <view
       wx:for="{{visibleItems}}"
@@ -10,12 +10,12 @@
       catchtap="onChipTapInline">{{item.label}}</view>
     <view wx:if="{{moreCount > 0}}" class="fb-chip fb-chip--more" catchtap="togglePanel">+{{moreCount}}</view>
     <view class="fb-chip fb-chip--all" catchtap="togglePanel">
-      <text>{{visibleItems.length ? '全部类型' : (placeholder || '全部类型')}}</text>
+      <text>{{placeholder || '全部类型'}}</text>
       <fc-icon name="chevron-down" size="20" color="var(--text-2)" />
     </view>
   </view>
 
-  <!-- 下拉面板：底部弹出，全部分类以网格呈现，选中项自动置顶 -->
+  <!-- 下拉面板：底部弹出，全部分类以网格呈现（含「全部」哨兵），选中项自动置顶，支持多选 -->
   <view wx:if="{{panelOpen}}" class="fb-mask" bindtap="closePanel">
     <view class="fb-sheet" catchtap="noop">
       <view class="fb-sheet__head">
@@ -27,11 +27,9 @@
           <view
             wx:for="{{panelItems}}"
             wx:key="value"
-            class="fb-opt {{item.active ? 'fb-opt--active' : ''}}"
+            class="fb-opt {{item.active ? 'fb-opt--active' : ''}} {{item.value === '' ? 'fb-opt--all' : ''}}"
             data-value="{{item.value}}"
-            bindtap="onPanelTap">
-            {{item.label}}
-          </view>
+            bindtap="onPanelTap">{{item.label}}</view>
         </view>
       </scroll-view>
       <view wx:if="{{multiple}}" class="fb-sheet__done" bindtap="onDone">完成</view>

miniprogram/components/filter-bar/index.wxss

@@ -98,6 +98,14 @@
   border-color: var(--accent-ring);
   font-weight: var(--fw-semibold);
 }
+.fb-opt--all {
+  border-color: var(--accent-ring);
+  color: var(--accent);
+}
+.fb-chip--more {
+  color: var(--text-2);
+  border-style: dashed;
+}
 .fb-sheet__done {
   margin: 12rpx 24rpx 28rpx;
   padding: 22rpx;