优化输入框和表单样式,确保在小程序和管理端开发中使用容器包裹输入框以避免布局问题。更新个人资料页,增加VIP用户的字段展示与编辑逻辑,确保用户体验一致性。调整相关文档以反映最新开发进展,提升功能可用性与用户体验。

This commit is contained in:
Alex-larget
2026-02-28 17:26:03 +08:00
parent 41e5b1258b
commit 8e2ea9b7c1
14 changed files with 195 additions and 114 deletions

View File

@@ -63,7 +63,7 @@ description: Soul 创业派对管理端开发规范。在 soul-admin/ 下编辑
### 4.1 输入框 padding前端通用
设置 input 的 padding、背景、边框时用 div 包裹 inputpadding 写在容器上input 仅做文字样式可避免光标截断、布局异常。React`<div className="form-input"><input ... /></div>`
**口诀**:外边包 div/view内部 input width 100%。设置 input 的 padding、背景、边框时用 div 包裹 inputpadding 写在容器上input 仅做文字样式`width: 100%`)。禁止在 input 自身上设 padding可避免光标截断、布局异常。React`<div className="form-input"><input className="form-input-inner" ... /></div>`
### 4.2 表单弹窗与「可选择+可手动填写」(吸收 SetVipModal 经验)

View File

@@ -60,7 +60,8 @@ description: Soul 创业派对小程序开发规范。在 miniprogram/ 下编辑
## 6. 表单与输入框
- **input / textarea padding**:给 `<input>``<textarea>` 设置 padding 时,**必须**用 `<view>` 包裹padding 写在 view 上;在 input/textarea 自身上设 padding。可避免光标截断、布局异常等原生组件表现问题
- **input / textarea 边距****必须**用 `<view>` 包裹padding/边距一律写在 view 上;内部 `<input>` 仅设 `width: 100%` 和字体样式。禁止在 input/textarea 自身上设 padding,否则会光标截断、布局异常。
- **口诀**:外边包 view内部 input width 100%。
- **正确写法**
- input`<view class="form-input"><input class="form-input-inner" ... /></view>``.form-input { padding: 16rpx 24rpx; background: #1F2937; }``.form-input-inner { width: 100%; font-size: 28rpx; background: transparent; }`
- textarea`<view class="form-textarea-wrap"><textarea class="form-textarea-inner" ... /></view>``.form-textarea-wrap { padding: 16rpx 24rpx; background: #1F2937; }``.form-textarea-inner { width: 100%; font-size: 28rpx; background: transparent; min-height: 160rpx; }`