更新文档,新增输入框样式最佳实践,强调在小程序和管理端开发中使用容器包裹输入框以避免布局问题。调整经验库,记录相关最佳实践和开发进度,确保团队共享经验的一致性和可追溯性。优化小程序页面,增加分享功能,提升用户体验。
This commit is contained in:
@@ -58,10 +58,18 @@ description: Soul 创业派对小程序开发规范。在 miniprogram/ 下编辑
|
||||
|
||||
---
|
||||
|
||||
## 6. 何时使用本 Skill
|
||||
## 6. 表单与输入框
|
||||
|
||||
- **输入框 padding**:设置 padding、背景、边框时,用 `<view>` 包裹 `<input>`;padding/背景/边框写在 view 上,input 设置 `width: 100%`、`font-size`、`color`、`background: transparent`。可避免光标截断、布局异常。
|
||||
- **示例**:`<view class="form-input"><input ... /></view>`,`.form-input { padding: 16rpx 24rpx; ... }`,`.form-input input { width: 100%; font-size: 28rpx; ... }`
|
||||
|
||||
---
|
||||
|
||||
## 7. 何时使用本 Skill
|
||||
|
||||
- 在 **miniprogram/** 下新增或修改页面、组件、utils 时。
|
||||
- 在小程序内新增或修改任何网络请求路径时(必须保持 `/api/miniprogram/...`)。
|
||||
- 做阅读、支付、推荐、提现等与 soul-api 对接的功能时。
|
||||
- 做表单、输入框样式时(遵循 §6 包裹 input 的写法)。
|
||||
|
||||
遵循本 Skill 可保证小程序只与 soul-api 的 miniprogram 路由组对接,避免与管理端或 next-project 接口混用。
|
||||
|
||||
@@ -61,7 +61,11 @@ description: Soul 创业派对管理端开发规范。在 soul-admin/ 下编辑
|
||||
|
||||
**检查清单**:分页、搜索防抖、刷新、loading、空状态、错误条、仅 admin/db 路径。详见 `开发文档/列表标准与角色分工.md`。
|
||||
|
||||
### 4.1 表单弹窗与「可选择+可手动填写」(吸收 SetVipModal 经验)
|
||||
### 4.1 输入框 padding(前端通用)
|
||||
|
||||
设置 input 的 padding、背景、边框时,用 div 包裹 input;padding 写在容器上,input 仅做文字样式。可避免光标截断、布局异常。React:`<div className="form-input"><input ... /></div>`。
|
||||
|
||||
### 4.2 表单弹窗与「可选择+可手动填写」(吸收 SetVipModal 经验)
|
||||
|
||||
当表单需支持「从预设选项选择」或「手动填写自定义值」时:
|
||||
|
||||
|
||||
@@ -3,3 +3,8 @@
|
||||
> 本日跨角色共享的架构决策、业务规则。格式:类型 | 摘要 | 关联 Skill
|
||||
|
||||
---
|
||||
|
||||
## 输入框样式(前端通用)
|
||||
|
||||
- **最佳实践 | 输入框 padding**:设置 input 的 padding/背景/边框时,用 div 或 view 包裹 input;padding 写在容器上,input 仅做文字样式,可避免光标截断、布局异常。
|
||||
- **适用**:小程序、管理端(React input 同理)
|
||||
|
||||
19
.cursor/经验库/小程序/2026-02-27.md
Normal file
19
.cursor/经验库/小程序/2026-02-27.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# 小程序开发工程师 经验记录 - 2026-02-27
|
||||
|
||||
---
|
||||
|
||||
## 输入框 padding 最佳实践
|
||||
|
||||
- **场景**:设置 input 的 padding、背景、边框等样式时,直接作用于 input 可能导致光标被截断、布局异常。
|
||||
- **方案**:用 `<view>` 包裹 `<input>`,padding/背景/边框写在 view 上,input 仅设置 width、font-size、color 等文字相关样式。
|
||||
- **示例**:
|
||||
```xml
|
||||
<view class="form-input">
|
||||
<input placeholder="提示文字" value="{{value}}" bindinput="onInput" />
|
||||
</view>
|
||||
```
|
||||
```css
|
||||
.form-input { padding: 16rpx 24rpx; background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; }
|
||||
.form-input input { width: 100%; font-size: 28rpx; color: #fff; background: transparent; }
|
||||
```
|
||||
- **升级**:已写入 SKILL-小程序开发 §6 表单与输入框
|
||||
@@ -17,6 +17,7 @@
|
||||
| 2026-02-26 | 项目索引初始化,.cursor 规则优化完成 | 已完成 |
|
||||
| 2026-02-27 | 开发进度汇报:永平落地已完成(海报 scene、我的收益、推广中心、VIP 相关);找伙伴、提现、阅读、分销核心功能已上线 | 已完成 |
|
||||
| 2026-02-27 | 开发进度同步会议:进度已同步至开发文档,待办资料完善弹窗、≥3 章弹窗 | 已完成 |
|
||||
| 2026-02-27 | 吸收经验:输入框 padding 用 view 包裹,已升级 SKILL-小程序开发 §6 | 已完成 |
|
||||
|
||||
> **格式说明**:每次开发后在此追加一行,日期格式 YYYY-MM-DD,状态用:已完成 / 进行中 / 待续 / 搁置
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
| 日期 | 角色 | 类型 | 升级 Skill | 摘要 |
|
||||
|------|------|------|------------|------|
|
||||
| (待补充) | | | | |
|
||||
| 2026-02-27 | 小程序、团队 | 最佳实践 | SKILL-小程序开发 §6、SKILL-管理端开发 §4.1 | 输入框 padding 用 view/div 包裹 |
|
||||
|
||||
---
|
||||
|
||||
@@ -32,4 +32,4 @@
|
||||
|
||||
---
|
||||
|
||||
**最后更新**:2026-02-26
|
||||
**最后更新**:2026-02-27
|
||||
|
||||
Reference in New Issue
Block a user