From 181f092402cf45daba69a8512b7f1881157d0be3 Mon Sep 17 00:00:00 2001 From: Alex-larget <33240357+Alex-larget@users.noreply.github.com> Date: Thu, 19 Mar 2026 19:18:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=B0=8F=E7=A8=8B=E5=BA=8F?= =?UTF-8?q?=E5=A4=B4=E5=83=8F=E9=80=89=E6=8B=A9=E9=80=BB=E8=BE=91=EF=BC=8C?= =?UTF-8?q?=E9=87=87=E7=94=A8=E7=BB=9D=E5=AF=B9=E5=AE=9A=E4=BD=8D=E8=A6=86?= =?UTF-8?q?=E7=9B=96=E5=8E=9F=E7=94=9F=E6=8C=89=E9=92=AE=EF=BC=8C=E9=81=BF?= =?UTF-8?q?=E5=85=8D=E6=A0=B7=E5=BC=8F=E5=B9=B2=E6=89=B0=E3=80=82=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E7=9B=B8=E5=85=B3=E6=9C=80=E4=BD=B3=E5=AE=9E=E8=B7=B5?= =?UTF-8?q?=E6=96=87=E6=A1=A3=EF=BC=8C=E7=A1=AE=E4=BF=9D=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E4=B8=80=E8=87=B4=E6=80=A7=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93?= =?UTF-8?q?=E9=AA=8C=E3=80=82=E4=BC=98=E5=8C=96=E4=B8=AA=E4=BA=BA=E8=B5=84?= =?UTF-8?q?=E6=96=99=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BA=A4=E4=BA=92=E6=B5=81=E7=95=85=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../evolution/2026-03-19-原生按钮覆盖定位.md | 41 +++++++++++++++++++ .../agent/小程序开发工程师/evolution/索引.md | 1 + .cursor/agent/开发助理/经验清单.md | 1 + .cursor/agent/开发助理/项目索引/小程序.md | 3 +- .cursor/skills/miniprogram-dev/SKILL.md | 20 ++++++++- miniprogram/pages/my/my.js | 3 ++ miniprogram/pages/my/my.wxml | 17 ++++---- miniprogram/pages/my/my.wxss | 21 ++++++---- 8 files changed, 89 insertions(+), 18 deletions(-) create mode 100644 .cursor/agent/小程序开发工程师/evolution/2026-03-19-原生按钮覆盖定位.md diff --git a/.cursor/agent/小程序开发工程师/evolution/2026-03-19-原生按钮覆盖定位.md b/.cursor/agent/小程序开发工程师/evolution/2026-03-19-原生按钮覆盖定位.md new file mode 100644 index 00000000..edd9a656 --- /dev/null +++ b/.cursor/agent/小程序开发工程师/evolution/2026-03-19-原生按钮覆盖定位.md @@ -0,0 +1,41 @@ +# 原生按钮覆盖定位，避免样式干扰 + +**日期**：2026-03-19 +**场景**：小程序中需在头像、图片等区域触发 `open-type="chooseAvatar"` 等原生能力，用 ` + +``` + +```css +.avatar-wrap { position: relative; } +.avatar-overlay-btn { + position: absolute; top: 0; left: 0; + width: 130rpx; height: 130rpx; /* 与头像一致 */ + padding: 0; margin: 0; + background: transparent; border: none; +} +.avatar-overlay-btn::after { border: none; } +``` + +## 要点 + +- **同级关系**：button 与展示元素是 sibling，不是 parent-child +- **绝对定位**：`position: absolute` 覆盖在目标区域上，不参与文档流 +- **透明无内容**：button 仅负责点击事件，样式完全透明 +- **适用**：chooseAvatar、open-type 等需 button 触发的原生能力 + +## 升级 Skill + +已写入 `miniprogram-dev` SKILL §12。 diff --git a/.cursor/agent/小程序开发工程师/evolution/索引.md b/.cursor/agent/小程序开发工程师/evolution/索引.md index 7d9bc89c..e60d1e46 100644 --- a/.cursor/agent/小程序开发工程师/evolution/索引.md +++ b/.cursor/agent/小程序开发工程师/evolution/索引.md @@ -13,3 +13,4 @@ | 2026-03-14 | 我的页设置入口隐藏；资料修改引导场景梳理（登录后、@某人、找伙伴、链接卡若） | [2026-03-14.md](./2026-03-14.md) | | 2026-03-16 | 编辑资料页分享名片：转发/朋友圈特殊处理，Canvas 绘制封面，标题「昵称+为您分享名片」 | [2026-03-16.md](./2026-03-16.md) | | 2026-03-17 | 代付美团式：读页→代付页→分享；详情页双态（发起人/好友）；目录 loading、最新新增 5 条折叠 | [2026-03-17.md](./2026-03-17.md) | +| 2026-03-19 | 原生按钮覆盖定位：chooseAvatar 等用绝对定位 overlay 覆盖，禁止 button 包裹，避免原生样式影响 | [2026-03-19-原生按钮覆盖定位.md](./2026-03-19-原生按钮覆盖定位.md) | diff --git a/.cursor/agent/开发助理/经验清单.md b/.cursor/agent/开发助理/经验清单.md index c822c1cf..570fcb8d 100644 --- a/.cursor/agent/开发助理/经验清单.md +++ b/.cursor/agent/开发助理/经验清单.md @@ -53,6 +53,7 @@ | 2026-03-17 | 后端、团队 | 架构/最佳实践 | api-dev SKILL | Redis 缓存：parts/hot/recommended/stats/config/章节 content；容灾回退 DB；OSS 上传；/health 返回 database/redis 状态 | | 2026-03-18 | 小程序、团队 | 业务规则/最佳实践 | - | 分享链路兼容好友/朋友圈 singlePage：单页模式能力降级（不支付/不自动领取），引导点击底部“前往小程序”进入完整版 | | 2026-03-18 | 产品、后端、管理端、测试 | 文档归档/需求口径 | - | 文档归档整理：以《以界面定需求》为基准，各角色重整“功能需求+验收口径+风险点”并写入各自经验库；补齐《项目落地推进表》 | +| 2026-03-19 | 小程序 | 最佳实践 | miniprogram-dev SKILL §11 | 原生按钮覆盖定位：chooseAvatar 等用绝对定位 overlay 覆盖，禁止 button 包裹，避免原生样式影响（灰色矩形等） | --- diff --git a/.cursor/agent/开发助理/项目索引/小程序.md b/.cursor/agent/开发助理/项目索引/小程序.md index 3639070e..79647d16 100644 --- a/.cursor/agent/开发助理/项目索引/小程序.md +++ b/.cursor/agent/开发助理/项目索引/小程序.md @@ -41,9 +41,10 @@ | 2026-03-17 | 会议收尾：源码优化 5 项全部完成；开发环境测试通过 | 已完成 | | 2026-03-18 | 吸收经验：分享链路需兼容好友/朋友圈 singlePage；单页模式能力降级并引导“前往小程序”进入完整版 | 已完成 | | 2026-03-18 | 会议：支付超级个体前/开通后资料默认校验，跳转 avatar-nickname 引导页（仅头像+昵称） | 已完成 | +| 2026-03-19 | 吸收经验：原生按钮覆盖定位，chooseAvatar 用绝对定位 overlay 覆盖头像，禁止 button 包裹，已升级 SKILL §11 | 已完成 | > **格式说明**：每次开发后在此追加一行，日期格式 YYYY-MM-DD，状态用：已完成 / 进行中 / 待续 / 搁置 --- -**最后更新**：2026-03-18 +**最后更新**：2026-03-19 diff --git a/.cursor/skills/miniprogram-dev/SKILL.md b/.cursor/skills/miniprogram-dev/SKILL.md index ed73dec1..560244aa 100644 --- a/.cursor/skills/miniprogram-dev/SKILL.md +++ b/.cursor/skills/miniprogram-dev/SKILL.md @@ -104,7 +104,24 @@ description: Soul 创业派对小程序开发规范。在 miniprogram/ 下编辑 --- -## 11. 何时使用本 Skill +## 11. 原生按钮覆盖定位（避免样式干扰） + +- **场景**：在头像、图片等区域需触发 `open-type="chooseAvatar"` 等原生能力时，**禁止用 button 包裹**目标元素，否则会受原生样式影响（灰色矩形、边框等）。 +- **正确做法**：用 **button 绝对定位覆盖** 在目标区域上方，与展示元素为同级关系。 +- **结构示例**： + ```html + + ... + VIP + + + ``` +- **样式**：`.avatar-wrap { position: relative; }`；`.avatar-overlay-btn { position: absolute; top: 0; left: 0; width/height 与目标一致; background: transparent; border: none; }`；`::after { border: none; }`。 +- **口诀**：同级覆盖，绝对定位，透明按钮。 + +--- + +## 12. 何时使用本 Skill - 在 **miniprogram/** 下新增或修改页面、组件、utils 时。 - 在小程序内新增或修改任何网络请求路径时（必须保持 `/api/miniprogram/...`）。 @@ -114,5 +131,6 @@ description: Soul 创业派对小程序开发规范。在 miniprogram/ 下编辑 - 做个人中心、设置页布局时（遵循 §7，卡片区边距 16rpx）。 - 做阅读、文章等需长按复制的文本时（遵循 §9，text 加 user-select）。 - 做编辑资料页分享名片时（遵循 §10）。 +- 做头像上传、chooseAvatar 等需 button 触发的原生能力时（遵循 §11，用绝对定位覆盖，禁止 button 包裹）。 遵循本 Skill 可保证小程序只与 soul-api 的 miniprogram 路由组对接，避免与管理端或 next-project 接口混用。 diff --git a/miniprogram/pages/my/my.js b/miniprogram/pages/my/my.js index fd4bc399..b63927c4 100644 --- a/miniprogram/pages/my/my.js +++ b/miniprogram/pages/my/my.js @@ -409,6 +409,8 @@ Page({ wx.hideLoading() this.setData({ receivingAll: false }) this.loadPendingConfirm() + this.loadMyEarnings() + this.loadWalletBalance() } }, @@ -914,6 +916,7 @@ Page({ wx.hideLoading() wx.showToast({ title: '提现申请已提交', icon: 'success' }) this.loadMyEarnings() + this.loadWalletBalance() } catch (e) { wx.hideLoading() wx.showToast({ title: e.message || '提现失败', icon: 'none' }) diff --git a/miniprogram/pages/my/my.wxml b/miniprogram/pages/my/my.wxml index 038cbd72..53935d6d 100644 --- a/miniprogram/pages/my/my.wxml +++ b/miniprogram/pages/my/my.wxml @@ -23,16 +23,15 @@ - + VIP + VIP + + {{userInfo.nickname || '点击设置昵称'}} diff --git a/miniprogram/pages/my/my.wxss b/miniprogram/pages/my/my.wxss index 3e53c26a..a779ee06 100644 --- a/miniprogram/pages/my/my.wxss +++ b/miniprogram/pages/my/my.wxss @@ -41,15 +41,22 @@ border: 1rpx solid rgba(75,85,99,0.5); } .profile-top-row { display: flex; align-items: flex-start; gap: 32rpx; } -/* 头像按钮：透明无边框，宽高与头像一致，点击直接唤起微信选择器（微信头像/相册/拍照） */ -.avatar-wrap-btn { - width: 40rpx; height: 130rpx; - padding: 0; margin: 0; background: transparent; border: none; - display: flex; align-items: center; justify-content: center; +/* 头像区域：view 负责展示，button 绝对定位覆盖其上，避免原生样式影响 */ +.avatar-wrap { + position: relative; + width: 130rpx; height: 130rpx; flex-shrink: 0; } -.avatar-wrap-btn::after { border: none; } -.avatar-wrap { position: relative; flex-shrink: 0; } +/* 绝对定位的按钮覆盖在头像上，透明无样式，点击唤起微信选择器（微信头像/相册/拍照） */ +.avatar-overlay-btn { + position: absolute; + left: 0; top: 0; + width: 130rpx; height: 130rpx; + padding: 0; margin: 0; + background: transparent; border: none; + display: block; +} +.avatar-overlay-btn::after { border: none; } .avatar-inner { width: 130rpx; height: 130rpx; border-radius: 50%; overflow: hidden; background: #1C2524; border: 5rpx solid #374151;