实现ui问题

UI修改计划.md

@@ -58,6 +58,8 @@ buildUrl(ASSET_BASE + 'logo.png')
 | PingFang SC/ 文件夹（7 个字重 ttf，见 2.3） | fonts/PingFang-Regular.subset.ttf 等（已生成，见 2.3） | 全局字体 |
 
 > 中文文件名由 buildUrl/uni.request 自动 URL 编码，三端均可正常访问；只有字体目录用英文名 `fonts/`。
+>
+> Figma 导出的小图标（UI-009/0010）为本地静态资源，不上传服务器：`static/icons/products/icon_search.png`（48×48@3x）、`static/icons/products/icon_filter.png`（54×54@3x）。
 
 ### 2.3 字体方案
 
@@ -213,14 +215,16 @@ uni.loadFontFace({
 ### UI-009 产品页 · 搜索栏 · 图标与搜索按钮（P1）
 
 - 文件：[SearchBar.vue](pages/products/components/SearchBar.vue)
-- 方案：
-  1. 替换现有搜索图标为设计稿图标（**注意：切图文件夹内暂无搜索图标，需向设计索取或从设计稿导出**）
-  2. 搜索框右侧增加"搜索"按钮，样式按设计稿
+- 方案（按 Figma node-id=1962-143）：
+  1. emoji 🔍 替换为设计稿导出的 `icon_search.png`（31rpx，Figma 3 倍图 48×48）
+  2. 搜索框右侧增加"搜索"按钮：96×54rpx、`#FF6800`、圆角 27rpx、白字 25rpx，距框边缘 4rpx，点击触发搜索
+  3. 搜索框 209×32px → 402×62rpx，`#F5F5F5` 圆角 31rpx；占位文案"搜索产品" `#929292` 25rpx；上下留白 6px→12rpx
 
 ### UI-0010 产品页 · 搜索栏 · 筛选被遮挡（P1）
 
-- 文件：[SearchBar.vue](pages/products/components/SearchBar.vue) / [products.vue](pages/products/products.vue)
-- 方案：参考设计稿调整搜索栏与筛选按钮布局（层级/宽度/间距），确保筛选按钮完整可见可点
+- 文件：[SearchBar.vue](pages/products/components/SearchBar.vue) / [products.vue](pages/products/products.vue) / [products.css](pages/products/products.css)
+- 被遮挡原因：筛选按钮原在搜索行右侧，小程序胶囊按钮恰好覆盖该区域
+- 方案（按设计稿+实际确认）：筛选入口与已选标签合并为**同一行**（[ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构）：`[筛选图标 35rpx] [已选标签 scroll-x 横向滚动不换行] [清除（有标签才显示）]`；搜索行右侧留空避开胶囊；FilterDrawer 弹窗逻辑不变（入口 emit `open` → 父组件 `toggleFilter`）
 
 ### UI-0011 产品页 · 国家分类 · 间距（P3）
 
@@ -270,8 +274,8 @@ uni.loadFontFace({
 | UI-006 | ✅ 已改 | [WhyChoose.vue](pages/index/components/WhyChoose.vue)：标题"为什么选择Inkrecah？"→"为什么选择Inkreach？"；卡片去掉 margin-bottom，上下间距统一用 gap 20rpx 与左右一致；区块上下留白对称（96rpx） |
 | UI-007 | ✅ 已改 | [CompanyIntro.vue](pages/index/components/CompanyIntro.vue) 背景图改用远程切图原图 公司简介背景.png |
 | UI-008 | ✅ 已改 | CompanyIntro.vue `.phone-text` 字号 23rpx → 31rpx（16号） |
-| UI-009 | ⏸ 暂缓 | 等设计/Figma（node-id=1962-143） |
-| UI-0010 | ⏸ 暂缓 | 等设计/Figma（node-id=1962-143） |
+| UI-009 | ✅ 已改 | [SearchBar.vue](pages/products/components/SearchBar.vue)：emoji 🔍 → Figma 导出 icon_search.png（31rpx）；新增橙色"搜索"按钮（96×54rpx `#FF6800` 圆角 27rpx，点击/键盘确认均触发搜索）；搜索框 402×62rpx `#F5F5F5` 圆角 31rpx，占位"搜索产品" 25rpx `#929292` |
+| UI-0010 | ✅ 已改 | 筛选入口从搜索行（被胶囊遮挡）移至商品区顶部；[ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构为一行布局：筛选图标 + 已选标签横向滚动（scroll-x 不换行）+ 清除按钮，FilterDrawer 逻辑不变 |
 | UI-0011 | ✅ 已改 | [CountryBar.vue](pages/products/components/CountryBar.vue)：国旗与名称间距 20rpx → 8rpx（4px）；标签上下 row-gap 16rpx → 20rpx（+2px） |
 | UI-0012 | ✅ 已改 | [products.css](pages/products/products.css) 页面背景 + [ProductGrid.vue](pages/products/components/ProductGrid.vue) 右侧内容区背景 → #ECECEC |
 | UI-0013 | ✅ 已改 | tab_product_gray/orange.png 由 57×57 放大至 72×72（Pillow LANCZOS），与 home 图标一致 |