From 2117225cbbddb3de3d664a794861bf8de10beda6 Mon Sep 17 00:00:00 2001
From: wm <2747639460@qq.com>
Date: Sun, 26 Jul 2026 13:10:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=86=E7=B1=BB=E9=A1=B5=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E7=A9=BF=E9=80=8F=20+=20=E7=AD=9B=E9=80=89=E6=9D=A1?=
 =?UTF-8?q?=E6=94=B6=E8=B5=B7=E4=B8=BA=E3=80=8C=E5=87=A0=E4=B8=AA=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=20+=20=E5=85=A8=E9=83=A8=E7=B1=BB=E5=9E=8B=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- navbar 背景由半透明渐变(rgba 0.55~0.92)改为实色不透明渐变(#0B0F0E→#0E1412)，杜绝 sticky 滚动时内容透视
- filter-bar 内联取消横滑铺全部：收起态只展示最多 3 个选中 chip + 末尾『全部类型』按钮，点击才展开面板陈列全部(选中置顶)
- 单选点已选 chip 打开面板切换；多选点已选 chip 直接移除；超出 3 个显示 +N
---
 miniprogram/components/filter-bar/index.js   | 43 +++++++-------------
 miniprogram/components/filter-bar/index.wxml | 14 ++++---
 miniprogram/components/filter-bar/index.wxss |  7 +++-
 miniprogram/components/navbar/index.wxss     |  2 +-
 4 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/miniprogram/components/filter-bar/index.js b/miniprogram/components/filter-bar/index.js
index 1136897..e7110b9 100644
--- a/miniprogram/components/filter-bar/index.js
+++ b/miniprogram/components/filter-bar/index.js
@@ -13,9 +13,8 @@ Component({
   data: {
     panelOpen: false,
     panelItems: [],   // 选中置顶后的全量列表（供面板渲染）
-    visibleTags: [],  // 多选模式下内联展示的已选标签（上限若干）
-    moreCount: 0,     // 多选模式下内联未展示完的已选数量
-    summary: ''       // 单模式下内联展示的当前选中文案
+    visibleItems: [], // 内联收起态展示的「几个」选中项（单选最多 1，多选最多 3）
+    moreCount: 0      // 多选超出展示上限的剩余数量（内联 +N）
   },
 
   observers: {
@@ -26,46 +25,34 @@ Component({
 
   methods: {
     recompute(items) {
-      // 选中置顶：active 的排前面，其余保持原序
+      // 选中置顶：active 的排前面，其余保持原序（面板展开后选中即在最前）
       const list = items.slice().sort((a, b) => (b.active ? 1 : 0) - (a.active ? 1 : 0));
-      if (this.data.multiple) {
-        const sel = list.filter((i) => i.active);
-        const MAX = 4;
-        this.setData({
-          panelItems: list,
-          visibleTags: sel.slice(0, MAX),
-          moreCount: Math.max(0, sel.length - MAX),
-          summary: ''
-        });
-      } else {
-        const active = list.find((i) => i.active);
-        this.setData({
-          panelItems: list,
-          summary: active ? active.label : (this.data.placeholder || '全部'),
-          visibleTags: []
-        });
-      }
+      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)
+      });
     },
 
     togglePanel() {
       this.setData({ panelOpen: !this.data.panelOpen });
     },
 
-    // 内联一行 chips：单选直接选中并回传；多选切换 active 并回传全量 values
-    onChipTap(e) {
+    // 内联收起态：只展示「几个」选中 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: !i.active } : 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 {
-        const cur = this.data.items.find((i) => i.value === value);
-        if (cur && cur.active) return; // 已是当前选中，避免重复触发
-        this.recompute(this.data.items.map((i) => ({ ...i, active: i.value === value })));
-        this.triggerEvent('change', { value });
+        this.togglePanel();
       }
     },
     closePanel() {
diff --git a/miniprogram/components/filter-bar/index.wxml b/miniprogram/components/filter-bar/index.wxml
index d46e2bb..51aa2fd 100644
--- a/miniprogram/components/filter-bar/index.wxml
+++ b/miniprogram/components/filter-bar/index.wxml
@@ -1,17 +1,19 @@
 <view class="fb">
-  <!-- 内联触发条：默认展示一行可横滑的分类 chips，末尾带「全部类型」入口 -->
-  <scroll-view scroll-x class="fb-row" wx:if="{{items.length}}">
+  <!-- 内联收起态：只展示「几个」选中 chip（单选 1 个 / 多选最多 3 个），末尾一个「全部类型」按钮；
+       点击按钮才展开面板陈列全部，选中项自动置顶。不做横滑铺全部。 -->
+  <view class="fb-row" wx:if="{{items.length}}">
     <view
-      wx:for="{{items}}"
+      wx:for="{{visibleItems}}"
       wx:key="value"
       class="fb-chip {{item.active ? 'fb-chip--active' : ''}}"
       data-value="{{item.value}}"
-      catchtap="onChipTap">{{item.label}}</view>
+      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>全部类型</text>
+      <text>{{visibleItems.length ? '全部类型' : (placeholder || '全部类型')}}</text>
       <fc-icon name="chevron-down" size="20" color="var(--text-2)" />
     </view>
-  </scroll-view>
+  </view>
 
   <!-- 下拉面板：底部弹出，全部分类以网格呈现，选中项自动置顶 -->
   <view wx:if="{{panelOpen}}" class="fb-mask" bindtap="closePanel">
diff --git a/miniprogram/components/filter-bar/index.wxss b/miniprogram/components/filter-bar/index.wxss
index bd33548..9f2c227 100644
--- a/miniprogram/components/filter-bar/index.wxss
+++ b/miniprogram/components/filter-bar/index.wxss
@@ -1,8 +1,11 @@
 .fb { width: 100%; background: var(--surface); }
 
-/* —— 内联一行可横滑的分类 chips —— */
+/* —— 内联收起态：几个选中 chip + 全部类型按钮，单行不横滑 —— */
 .fb-row {
-  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
   padding: 4rpx 4rpx 8rpx;
   background: var(--surface);
 }
diff --git a/miniprogram/components/navbar/index.wxss b/miniprogram/components/navbar/index.wxss
index 52f246c..186d892 100644
--- a/miniprogram/components/navbar/index.wxss
+++ b/miniprogram/components/navbar/index.wxss
@@ -1,5 +1,5 @@
 .navbar {
-  background: linear-gradient(180deg, var(--bar-bg) 0%, var(--float-bg) 100%);
+  background: linear-gradient(180deg, #0B0F0E 0%, #0E1412 100%);
   position: sticky;
   top: 0;
   z-index: 50;