更新文档,新增输入框样式最佳实践,强调在小程序和管理端开发中使用容器包裹输入框以避免布局问题。调整经验库,记录相关最佳实践和开发进度,确保团队共享经验的一致性和可追溯性。优化小程序页面,增加分享功能,提升用户体验。

This commit is contained in:
Alex-larget
2026-02-27 14:22:58 +08:00
parent 31f4e37345
commit 8655dca7b4
34 changed files with 514 additions and 142 deletions

View File

@@ -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 接口混用。

View File

@@ -61,7 +61,11 @@ description: Soul 创业派对管理端开发规范。在 soul-admin/ 下编辑
**检查清单**分页、搜索防抖、刷新、loading、空状态、错误条、仅 admin/db 路径。详见 `开发文档/列表标准与角色分工.md`
### 4.1 表单弹窗与「可选择+可手动填写」(吸收 SetVipModal 经验
### 4.1 输入框 padding前端通用
设置 input 的 padding、背景、边框时用 div 包裹 inputpadding 写在容器上input 仅做文字样式。可避免光标截断、布局异常。React`<div className="form-input"><input ... /></div>`
### 4.2 表单弹窗与「可选择+可手动填写」(吸收 SetVipModal 经验)
当表单需支持「从预设选项选择」或「手动填写自定义值」时:

View File

@@ -3,3 +3,8 @@
> 本日跨角色共享的架构决策、业务规则。格式:类型 | 摘要 | 关联 Skill
---
## 输入框样式(前端通用)
- **最佳实践 | 输入框 padding**:设置 input 的 padding/背景/边框时,用 div 或 view 包裹 inputpadding 写在容器上input 仅做文字样式,可避免光标截断、布局异常。
- **适用**小程序、管理端React input 同理)

View 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 表单与输入框

View File

@@ -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状态用已完成 / 进行中 / 待续 / 搁置

View File

@@ -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