diff --git a/UI修改计划.md b/UI修改计划.md
index 8afa5d6..6881912 100644
--- a/UI修改计划.md
+++ b/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 图标一致 |
diff --git a/pages/products/components/ActiveFilters.vue b/pages/products/components/ActiveFilters.vue
index e83e33d..13fbafb 100644
--- a/pages/products/components/ActiveFilters.vue
+++ b/pages/products/components/ActiveFilters.vue
@@ -1,11 +1,27 @@
-
-
-
- {{ item.label }}
- ×
+
+
+
+
+
- 清除全部
+
+
+
+
+
+ {{ item.label }}
+ ×
+
+
+
+
+
+ 清除
@@ -19,7 +35,7 @@ export default {
}
},
mounted() {
- // 首次测量(可能为 0,因为 v-if 可能为 false)
+ // 首次测量自身高度给父组件布局用
this.$nextTick(() => this.emitHeight())
},
watch: {
@@ -30,11 +46,6 @@ export default {
},
methods: {
emitHeight() {
- // v-if 为 false 时 #activeFilters 不存在,返回 0
- if (!this.list || this.list.length === 0) {
- this.$emit('height-change', 0)
- return
- }
const query = uni.createSelectorQuery().in(this)
query.select('#activeFilters').boundingClientRect()
query.exec((res) => {
@@ -45,6 +56,9 @@ export default {
}
})
},
+ onOpen() {
+ this.$emit('open')
+ },
onRemove(key) {
this.$emit('remove', key)
},
@@ -56,26 +70,48 @@ export default {
diff --git a/pages/products/products.vue b/pages/products/products.vue
index 07d8c2c..2e07daf 100644
--- a/pages/products/products.vue
+++ b/pages/products/products.vue
@@ -6,7 +6,7 @@
:keyword="searchKeyword"
@input="onSearchInput"
@blur="onSearchBlur"
- @filter="toggleFilter"
+ @search="onSearchBlur"
@height-change="onSearchBarHeight"
/>
@@ -29,9 +29,10 @@
-
+