Repository navigation
feat: ✨ 为 Cell、Input、Textarea 等组件添加 marker-side 属性控制必填*位置 - #1181
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
## Walkthrough
本次变更为多个表单相关组件(如 Cell、Input、Picker、Textarea、Calendar 等)及其文档引入了新的属性 `marker-side`,用于控制必填星号(*)的位置(可选 "before" 或 "after")。涉及属性类型定义、模板渲染、样式调整、国际化文案补充、文档完善及相关测试用例的增加和更新,未涉及核心业务逻辑变动。
## Changes
| 文件/分组 | 变更简述 |
|---|---|
| docs/component/*.md<br>docs/en-US/component/*.md | 各组件文档新增 `marker-side` 属性说明,部分 SelectPicker 文档补充了 `required` 属性说明,ColPicker 英文文档重写为完整 API 参考。 |
| src/locale/zh-CN.json<br>src/locale/en-US.json | 新增“必填星号在右”相关国际化文案。 |
| src/uni_modules/wot-design-uni/components/wd-*/types.ts | 各组件类型定义新增 `markerSide` 属性,限定为 'before' 或 'after',默认 'before'。 |
| src/uni_modules/wot-design-uni/components/wd-*/wd-*.vue | 组件模板新增 `marker-side` 属性传递,Cell/Input/Textarea 等组件根据 `markerSide` 属性动态渲染星号位置,ColPicker 移除表单校验相关逻辑。 |
| src/uni_modules/wot-design-uni/components/wd-*/index.scss | Cell/Input/Textarea 组件样式调整,必填星号样式从伪元素独立为专用类,支持左右位置切换。 |
| src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss | 新增 `$-cell-required-margin` 变量,调整 `$-button-icon-fs` 默认值。 |
| src/subPages/*/Index.vue | 各演示页面新增带 `marker-side="after"` 的必填组件示例,相关变量与事件处理函数补充。 |
| tests/components/wd-*.test.ts | 各组件测试用例补充对 `markerSide` 属性的覆盖,断言星号位置及样式,修正原有必填星号相关断言。 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant 用户
participant 组件 (如 wd-input)
participant wd-cell
用户->>组件: 设置 required + marker-side="after"
组件->>wd-cell: 传递 required, marker-side="after"
wd-cell-->>组件: 渲染 label 及星号位置
组件-->>用户: 展示星号在 label 右侧的必填项Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18–25 minutes Poem
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
组件测试摘要 (H5 平台)测试时间: Sun Jul 27 14:06:02 UTC 2025测试结果
|
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (3)
src/locale/en-US.json (1)
71-71: 建议微调英文文案以提升可读性
“Required asterisk on the right” 语义虽能理解,但略显生硬。可改为 “Required asterisk on the right side” 以表达 “在右侧显示必填星号”,读起来更自然。-"bi-tian-xing-hao-zai-you-ce": "Required asterisk on the right", +"bi-tian-xing-hao-zai-you-ce": "Required asterisk on the right side",src/uni_modules/wot-design-uni/components/wd-textarea/types.ts (1)
282-285: 注释与类型定义不一致注释中提到的可选值是
left、right,但实际的类型定义使用的是'before' | 'after'。请更新注释以保持一致性。建议修改注释:
/** - * 必填标记位置,可选值:left、right + * 必填标记位置,可选值:before、after */src/subPages/cell/Index.vue (1)
145-146: 建议移除未使用的变量
rate2变量被声明但未在模板中使用,建议移除以保持代码整洁。const rate1 = ref(0) -const rate2 = ref(0)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (54)
docs/component/calendar.md(1 hunks)docs/component/cell.md(1 hunks)docs/component/col-picker.md(1 hunks)docs/component/datetime-picker.md(1 hunks)docs/component/input.md(1 hunks)docs/component/picker.md(1 hunks)docs/component/select-picker.md(1 hunks)docs/component/textarea.md(1 hunks)docs/en-US/component/calendar.md(1 hunks)docs/en-US/component/cell.md(1 hunks)docs/en-US/component/col-picker.md(1 hunks)docs/en-US/component/datetime-picker.md(1 hunks)docs/en-US/component/input.md(1 hunks)docs/en-US/component/picker.md(1 hunks)docs/en-US/component/select-picker.md(1 hunks)docs/en-US/component/textarea.md(1 hunks)src/locale/en-US.json(1 hunks)src/locale/zh-CN.json(1 hunks)src/subPages/calendar/Index.vue(3 hunks)src/subPages/cell/Index.vue(2 hunks)src/subPages/colPicker/Index.vue(2 hunks)src/subPages/datetimePicker/Index.vue(3 hunks)src/subPages/input/Index.vue(2 hunks)src/subPages/picker/Index.vue(2 hunks)src/subPages/selectPicker/Index.vue(3 hunks)src/subPages/textarea/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-calendar/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-cell/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-cell/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-input/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-input/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-picker/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-textarea/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-textarea/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue(2 hunks)tests/components/wd-calendar.test.ts(1 hunks)tests/components/wd-cell.test.ts(4 hunks)tests/components/wd-col-picker.test.ts(1 hunks)tests/components/wd-datetime-picker.test.ts(1 hunks)tests/components/wd-input.test.ts(3 hunks)tests/components/wd-picker.test.ts(1 hunks)tests/components/wd-select-picker.test.ts(1 hunks)tests/components/wd-textarea.test.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (35)
📓 Common learnings
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中,由于 `title` 可能会发生变化,涉及到 `title` 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#534
File: docs/component/form.md:44-44
Timestamp: 2024-08-19T13:43:36.518Z
Learning: Moonofweisheng prefers addressing syntax errors such as missing quotation marks in the code.
src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (2)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue (2)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue (2)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
docs/component/input.md (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-input/types.ts (1)
Learnt from: de1ck
PR: #845
File: src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue:14-15
Timestamp: 2025-01-16T07:45:18.905Z
Learning: In uni-app's input component, the placeholder-class attribute only accepts string type in TypeScript, not array. Therefore, class names must be concatenated as strings rather than bound as arrays.
src/subPages/textarea/Index.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
tests/components/wd-picker.test.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
tests/components/wd-textarea.test.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/subPages/input/Index.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: chen-ziwen
PR: #909
File: docs/component/input-number.md:93-98
Timestamp: 2025-02-20T12:31:40.241Z
Learning: In the InputNumber component documentation, function naming should be consistent across all examples, using handleChange instead of variations like handleChange1.
src/subPages/datetimePicker/Index.vue (1)
Learnt from: Moonofweisheng
PR: #761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 wd-message-box.vue 的 toggleModal 方法中,当 isPass 为 false 时,应阻止执行 confirm,但不触发 cancel 操作。
tests/components/wd-col-picker.test.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-input/index.scss (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
tests/components/wd-select-picker.test.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
tests/components/wd-datetime-picker.test.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue (3)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: de1ck
PR: #845
File: src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue:14-15
Timestamp: 2025-01-16T07:45:18.905Z
Learning: In uni-app's input component, the placeholder-class attribute only accepts string type in TypeScript, not array. Therefore, class names must be concatenated as strings rather than bound as arrays.
tests/components/wd-calendar.test.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
docs/component/calendar.md (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/subPages/selectPicker/Index.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 wd-message-box.vue 的 toggleModal 方法中,当 isPass 为 false 时,应阻止执行 confirm,但不触发 cancel 操作。
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue (3)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #1149
File: src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue:2-14
Timestamp: 2025-07-06T03:59:35.266Z
Learning: 在 uni-app 框架中,不支持 Vue.js 的动态事件绑定语法,例如 v-bind="disableTouchMove ? { '@touchmove.stop.prevent': noop } : {}" 或条件事件绑定。因此在 uni-app 项目中,需要使用多个独立的元素来处理条件性的事件绑定,即使这会导致一些代码重复。
src/subPages/calendar/Index.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 wd-message-box.vue 的 toggleModal 方法中,当 isPass 为 false 时,应阻止执行 confirm,但不触发 cancel 操作。
src/subPages/cell/Index.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue (3)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: de1ck
PR: #845
File: src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue:14-15
Timestamp: 2025-01-16T07:45:18.905Z
Learning: In uni-app's input component, the placeholder-class attribute only accepts string type in TypeScript, not array. Therefore, class names must be concatenated as strings rather than bound as arrays.
docs/component/select-picker.md (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-textarea/index.scss (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/subPages/picker/Index.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 wd-message-box.vue 的 toggleModal 方法中,当 isPass 为 false 时,应阻止执行 confirm,但不触发 cancel 操作。
docs/component/cell.md (2)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
src/subPages/colPicker/Index.vue (3)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 wd-message-box.vue 的 toggleModal 方法中,当 isPass 为 false 时,应阻止执行 confirm,但不触发 cancel 操作。
src/uni_modules/wot-design-uni/components/wd-cell/index.scss (1)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
tests/components/wd-cell.test.ts (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
tests/components/wd-input.test.ts (5)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: #761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 wd-message-box.vue 的 toggleModal 方法中,当 isPass 为 false 时,应阻止执行 confirm,但不触发 cancel 操作。
Learnt from: Moonofweisheng
PR: #748
File: src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue:87-128
Timestamp: 2024-11-30T06:44:18.181Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue 文件中,当 percentage 为 0 时,应通过 update 函数处理 percentage 为 0 的情况,而不需要在 updateProgress 函数中进行特殊处理。
Learnt from: Moonofweisheng
PR: #1149
File: src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue:2-14
Timestamp: 2025-07-06T03:59:35.266Z
Learning: 在 uni-app 框架中,不支持 Vue.js 的动态事件绑定语法,例如 v-bind="disableTouchMove ? { '@touchmove.stop.prevent': noop } : {}" 或条件事件绑定。因此在 uni-app 项目中,需要使用多个独立的元素来处理条件性的事件绑定,即使这会导致一些代码重复。
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-cell/types.ts (1)
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
🧬 Code Graph Analysis (2)
src/uni_modules/wot-design-uni/components/wd-textarea/types.ts (1)
src/uni_modules/wot-design-uni/components/wd-input/types.ts (1)
InputMode(13-13)
src/subPages/calendar/Index.vue (2)
src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts (1)
function(208-208)tests/components/wd-calendar-view.test.ts (1)
function(152-183)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: ESLint Check
- GitHub Check: Cloudflare Pages
🔇 Additional comments (81)
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
152-152: 考虑响应式设计的影响将按钮图标字体大小从相对单位
1.18em改为绝对单位18px可能会影响响应式设计和可访问性。em单位会根据父元素字体大小缩放,而px是固定值,不会随用户字体偏好或父元素变化而缩放。请确认这个变更是否符合设计系统的要求。
207-207: 良好的设计系统实践新增的
$-cell-required-margin变量很好地支持了必填标记的统一间距管理,为markerSide功能提供了一致的设计标准。src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue (1)
21-21: 正确的属性传递实现向
wd-cell组件添加:marker-side="markerSide"属性绑定是正确的实现方式,确保了markerSide属性能够从选择器组件传递到底层的单元格组件,支持必填标记位置的灵活控制。src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue (1)
25-25: 一致的实现模式与
wd-select-picker组件一样,正确地向wd-cell组件添加了:marker-side="markerSide"属性绑定。这种一致的实现模式确保了所有使用wd-cell的选择器组件都能支持必填标记位置控制功能。src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (1)
19-19: 实现正确,符合功能要求正确地将
markerSide属性传递给wd-cell组件,实现了必填星号位置控制功能。属性绑定语法规范,符合 Vue 模板约定。src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue (1)
22-22: 实现一致且正确与
wd-datetime-picker组件保持一致的实现方式,正确地将markerSide属性传递给wd-cell组件。确保了组件库中必填星号位置控制功能的统一性。src/locale/zh-CN.json (1)
71-71: 本地化条目添加合理新增的国际化键值对
"bi-tian-xing-hao-zai-you-ce": "必填星号在右"支持新的marker-side功能展示。键名遵循项目拼音命名规范,翻译准确清晰,按字母顺序正确插入。docs/component/textarea.md (1)
157-157: 文档默认值与实际代码不一致文档中
marker-side属性的默认值显示为after,但根据其他文件的类型定义,实际默认值应该是before。请确保文档与代码实现保持一致。Likely an incorrect or invalid review comment.
docs/en-US/component/calendar.md (1)
200-200: 文档默认值可能与实际代码不一致文档中
marker-side属性的默认值显示为'after',但根据类型定义文件,实际默认值应该是'before'。请验证并确保文档与代码实现保持一致。Likely an incorrect or invalid review comment.
src/uni_modules/wot-design-uni/components/wd-calendar/types.ts (1)
189-192: 类型定义正确实现
markerSide属性的类型定义实现正确,包括适当的类型约束、默认值和文档注释。docs/en-US/component/input.md (1)
245-245: 请验证默认值是否正确文档中
marker-side的默认值显示为'after',但根据 PR 描述,为了保持向后兼容性,默认值应该是'before'(标记在左侧)。请确认此处的默认值设置是否正确。docs/en-US/component/picker.md (1)
261-261: 请验证默认值是否正确与 Input 组件文档相同,此处
marker-side的默认值显示为'after',但根据 PR 描述应该是'before'以保持向后兼容性。请确认此处的默认值设置是否正确。src/subPages/picker/Index.vue (2)
16-16: 实现正确新增的
marker-side="after"示例正确演示了必填标记在右侧的用法,与功能需求一致。
167-167: 变量声明正确为新示例添加的响应式变量
value16声明正确,遵循了文件中现有的代码模式。src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts (1)
105-108: 类型定义正确
markerSide属性的类型定义正确,默认值为'before'符合向后兼容性要求。这与文档中显示的默认值'after'不一致,建议统一。src/uni_modules/wot-design-uni/components/wd-picker/types.ts (1)
161-164: 类型定义正确且一致
markerSide属性的类型定义正确,默认值为'before'与 select-picker 组件保持一致,符合向后兼容性要求。但需要与文档中的默认值保持一致。docs/component/col-picker.md (1)
641-641: 文档更新正确
marker-side属性的文档添加符合规范,中文描述准确,参数类型和默认值设置合理。docs/en-US/component/textarea.md (1)
155-155: 文档更新符合规范
marker-side属性的英文文档添加正确,格式规范,与其他组件保持一致。src/uni_modules/wot-design-uni/components/wd-input/types.ts (1)
182-182: 代码格式正确添加尾随逗号符合 TypeScript 编码规范。
docs/component/calendar.md (1)
428-428: 文档更新正确日历组件的
marker-side属性文档添加规范,中文描述准确,与其他组件文档保持一致。docs/component/datetime-picker.md (1)
310-310: LGTM! 文档更新正确新增的
marker-side属性文档符合预期,属性说明、类型、可选值和默认值都正确标注。版本占位符$LOWEST_VERSION$也符合项目规范。src/subPages/input/Index.vue (2)
75-83: LGTM! 示例代码实现正确新增的必填星号在右侧的输入框示例实现正确,正确使用了
marker-side="after"属性,并配置了相应的 v-model 绑定和事件处理。
154-154: LGTM! 响应式变量声明正确为新增的输入框示例正确声明了
value23响应式变量。docs/component/picker.md (1)
263-263: LGTM! Picker 组件文档更新正确新增的
marker-side属性文档格式正确,属性说明、类型、可选值和默认值都符合规范。与其他组件保持一致性。docs/component/select-picker.md (1)
345-345: LGTM! SelectPicker 组件文档更新正确新增的
marker-side属性文档完整准确,属性描述、类型定义、可选值和默认值都正确标注,与其他组件文档保持一致。src/uni_modules/wot-design-uni/components/wd-cell/types.ts (1)
100-104: LGTM! TypeScript 类型定义正确新增的
markerSide属性类型定义实现正确:
- 使用了正确的 TypeScript 联合类型
'before' | 'after'- 默认值设为
'before'符合向后兼容性要求- JSDoc 注释完整准确
- 遵循了项目中 prop 定义的一致性模式
src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts (1)
195-200: 默认值一致已验证
markerSide属性在以下所有组件中均默认为'before',一致性确认,无需修改或额外操作:
- src/uni_modules/wot-design-uni/components/wd-textarea/types.ts
- src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts
- src/uni_modules/wot-design-uni/components/wd-picker/types.ts
- src/uni_modules/wot-design-uni/components/wd-input/types.ts
- src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
- src/uni_modules/wot-design-uni/components/wd-cell/types.ts
- src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
- src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts
批准合并。
src/subPages/textarea/Index.vue (2)
40-47: 示例用法正确新增的
wd-textarea组件正确演示了marker-side="after"属性的用法,与现有代码风格保持一致,使用了适当的国际化翻译键。
126-126: 响应式数据绑定正确为新的 textarea 组件正确添加了
value16响应式引用,类型声明准确。src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts (1)
139-143: 类型定义一致且正确
markerSide属性的添加与其他组件保持一致,类型约束、默认值和文档注释都符合规范。尾随逗号的添加也提高了代码的可维护性。tests/components/wd-datetime-picker.test.ts (1)
742-798: 测试实现良好,覆盖全面这三个新增的测试用例很好地覆盖了
markerSide属性的各种情况:
- 明确设置为 'before' 和 'after'
- 验证默认值行为
- 确保属性正确传递给嵌套的
wd-cell组件测试模式一致且实现正确。
tests/components/wd-picker.test.ts (1)
267-308: 测试实现一致且正确测试用例与其他组件保持一致的模式,正确验证了:
- 属性值的设置和获取
- 属性向嵌套
wd-cell组件的传递- 默认值行为
实现质量良好。
src/subPages/colPicker/Index.vue (2)
22-29: 演示实现正确新增的演示用例很好地展示了
marker-side="after"功能,与页面中其他演示保持一致的模式。
104-104: 响应式变量声明正确为新演示用例正确添加了对应的响应式变量
value16。tests/components/wd-textarea.test.ts (1)
151-196: 测试实现针对组件特点设计合理与其他组件不同,
wd-textarea组件直接渲染必填标记而不使用嵌套的wd-cell组件,因此测试方法也相应调整:
- 检查 CSS 类名 (
.wd-textarea__required--left) 来验证位置- 验证标记元素的文本内容
这种测试方法符合组件的实际实现方式,测试覆盖全面。
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue (4)
4-4: 必填标记位置控制实现正确条件渲染逻辑正确,通过
markerSide === 'before'控制必填星号在标签前显示。CSS 类名wd-input__required--left用于左侧定位。
10-11: 标签渲染逻辑优化合理将标签渲染从
<template>改为<text>标签,并使用v-else-if优化条件判断,提高了代码的语义化和可读性。
13-13: 后置必填标记实现正确通过
markerSide === 'after'控制必填星号在标签后显示,使用标准的wd-input__required类名。
204-204: labelClass 简化合理移除了
is-required类的条件添加逻辑是正确的,因为必填标记现在通过专用的<text>元素和对应的 CSS 类来处理,避免了样式冲突。src/subPages/calendar/Index.vue (3)
50-50: 新功能演示实现正确新增的日历组件正确演示了
marker-side="after"功能,使用了本地化标签,绑定了相应的数据和事件处理函数。
99-99: 响应式数据定义正确
value18定义为number类型并初始化为当前时间戳,与日历组件的数据格式要求一致。
207-209: 事件处理函数实现合理
handleConfirm6函数实现简洁,通过控制台输出确认值,符合演示页面的调试需求。tests/components/wd-select-picker.test.ts (3)
227-243: markerSide 'before' 测试用例实现正确测试用例正确验证了
markerSide设置为 'before' 时的行为,包括组件自身的 prop 值和传递给子组件wd-cell的 prop 值。
245-261: markerSide 'after' 测试用例实现正确测试用例正确验证了
markerSide设置为 'after' 时的行为,确保 prop 正确传递到嵌套的wd-cell组件。
263-279: 默认值测试用例实现正确测试用例正确验证了未指定
markerSide时的默认行为,确认默认值为 'before',保证了向后兼容性。tests/components/wd-calendar.test.ts (3)
612-637: markerSide 'before' 测试用例实现完整测试用例正确使用了
nextTick()等待 DOM 更新,并验证了markerSide属性在组件和子组件间的正确传递。
639-664: markerSide 'after' 测试用例实现正确测试用例结构合理,正确验证了 'after' 值的设置和传递,确保必填标记显示在标签右侧。
666-691: 默认值测试覆盖完整测试用例正确验证了
markerSide的默认行为,确保在未指定该属性时默认为 'before',维护向后兼容性。src/subPages/datetimePicker/Index.vue (3)
18-18: 新功能演示实现正确新增的日期时间选择器正确演示了
marker-side="after"功能,配置了必填属性和本地化标签,绑定了相应的数据和事件处理器。
114-114: 响应式数据类型正确
value20定义为number类型并初始化为当前时间戳,与日期时间选择器组件的数据类型要求匹配。
232-234: 事件处理函数简洁有效
handleConfirm20函数实现简单明了,通过控制台输出确认值,适合演示页面的调试和验证需求。tests/components/wd-col-picker.test.ts (3)
319-334: 测试用例实现正确
markerSide属性设置为 'before' 的测试用例实现得很好,正确验证了属性值的设置和向内部wd-cell组件的传递。
336-350: 测试用例实现正确
markerSide属性设置为 'after' 的测试用例实现得很好,与 'before' 测试保持了一致的结构和验证逻辑。
352-366: 默认值测试实现正确默认值测试正确验证了当未显式设置
markerSide属性时,组件使用 'before' 作为默认值,并正确传递给内部的wd-cell组件。src/subPages/cell/Index.vue (2)
74-76: 新增必填星号在右侧的示例新增的评分组件展示了
marker-side="after"属性的正确用法,很好地演示了必填星号在右侧显示的效果。
77-77: 现有组件正确更新现有的垂直布局单元格正确添加了
marker-side="after"属性,保持了示例的一致性。src/subPages/selectPicker/Index.vue (3)
23-30: 新增选择器示例实现正确新增的选择器组件正确使用了
marker-side="after"属性,展示了必填星号在右侧的效果。组件配置符合既定模式,包括必填状态、数据绑定和事件处理。
172-172: 响应式变量声明正确新增的
value21变量类型声明正确,初始值设置合理,符合组件使用需求。
258-260: 事件处理函数实现正确
handleConfirm21函数实现简洁,与文件中其他确认处理函数保持一致的结构和命名模式。src/uni_modules/wot-design-uni/components/wd-textarea/index.scss (1)
113-122: 必填标记样式重构实现正确新增的
.wd-textarea__required元素样式实现得很好:
- 正确设置了字体大小、颜色和边距
- 提供了
.left修饰符用于左侧对齐时的边距调整- 样式定义清晰,与其他表单组件保持一致
这种将必填标记从伪元素改为独立元素的重构支持了
markerSide属性的灵活定位需求。src/uni_modules/wot-design-uni/components/wd-cell/index.scss (1)
100-109: 必填标记样式重构实现正确新增的
.wd-cell__required元素样式实现得很好:
- 正确定义了字体大小、颜色和边距属性
- 提供了
.left修饰符用于标记在标题前方时的边距调整- 样式实现与 textarea 组件保持一致,确保了组件库的设计统一性
这种样式重构很好地支持了
markerSide属性的灵活定位功能。src/uni_modules/wot-design-uni/components/wd-input/index.scss (1)
113-122: LGTM! SCSS样式变更符合新功能需求新增的
.wd-input__required样式块正确实现了必填标记的样式定义,支持通过markerSide属性控制必填星号的位置。样式使用了统一的SCSS变量,确保了主题一致性,并且.left修饰符正确处理了左侧对齐时的边距调整。src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue (3)
10-11: 模板结构调整正确实现markerSide功能移除了
.wd-cell__left上的条件is-required类,改为独立的必填标记元素。当markerSide === 'before'时,必填星号正确渲染在标题前,并应用了wd-cell__required--left类用于样式定位。
19-20: 插槽渲染和标题元素优化合理插槽渲染语法调整将
name="title"属性放在v-if指令之后,符合Vue模板最佳实践。标题从<view>元素改为<text>元素更符合语义化要求。
30-30: 必填标记后置渲染逻辑正确当
markerSide === 'after'时,必填星号正确渲染在标题后方,使用基础的wd-cell__required类,实现了灵活的必填标记位置控制。src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue (4)
3-4: 标签样式和必填标记渲染逻辑正确将标签类名改为固定的
"wd-textarea__label",同时添加了条件渲染的必填标记。当markerSide === 'before'时,必填星号正确显示在标签前方并应用wd-textarea__required--left类。
11-11: 插槽渲染条件优化合理使用
v-else-if="$slots.label"确保只有在插槽存在时才渲染,避免了不必要的回退渲染,提高了模板逻辑的准确性。
13-13: 必填标记后置位置实现正确当
markerSide === 'after'时,必填星号正确渲染在标签后方,使用基础的wd-textarea__required类,完善了markerSide功能的实现。
198-198: 计算属性简化合理移除了
labelClass中条件添加"is-required"类的逻辑,因为必填标记现在作为独立元素渲染,简化了样式逻辑并提高了代码可维护性。tests/components/wd-cell.test.ts (4)
237-240: 测试断言更新正确反映新的DOM结构将必填状态的测试从检查
is-required类改为检查独立的.wd-cell__required--left元素及其文本内容,正确反映了新的模板结构变化。
274-277: 表单验证规则测试保持一致性在表单验证规则测试中也相应更新了断言逻辑,确保测试覆盖的一致性和准确性。
370-374: 选择器更新匹配模板变化将标题元素选择器从
.wd-cell__title更新为.wd-cell__title text,正确对应了模板中标题从<view>改为<text>元素的变化。
470-530: markerSide功能测试覆盖完整新增的三个测试用例全面覆盖了markerSide属性的各种场景:
'before'值时必填标记在前方且有--left类'after'值时必填标记在后方且无--left类- 默认值为
'before'的行为验证测试逻辑清晰,断言准确,确保了新功能的正确性。
docs/en-US/component/col-picker.md (2)
94-130: 文档扩展全面且marker-side属性文档化正确文档从简单示例扩展为完整的API参考,结构清晰且内容详尽。新增的
marker-side属性文档正确定义了类型(string)、可选值(before / after)、默认值(after)和版本占位符,与其他组件的文档保持一致。
131-176: API参考文档结构完善新增的FormItemRule数据结构说明、Option数据结构、Events、Methods、Slots和External Style Classes等章节提供了完整的API参考,帮助开发者全面了解组件的使用方法和配置选项。
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue (3)
7-7: LGTM! 简化了必填状态的处理将
:required绑定从计算属性isRequired改为直接使用requiredprop,这简化了组件的逻辑并移除了对表单上下文的依赖。
20-20: LGTM! 正确添加了 markerSide 属性支持新增的
:marker-side="markerSide"属性传递到wd-cell组件,与 PR 目标一致,用于控制必填标记的位置。
105-105: LGTM! 清理了未使用的导入移除了
nextTick导入,这是合理的清理,因为代码中不再需要这个函数。同时移除了表单相关的导入也符合简化组件逻辑的目标。tests/components/wd-input.test.ts (3)
5-5: LGTM! 改进了 TypeScript 导入使用
type修饰符导入类型是 TypeScript 的最佳实践,有助于明确区分类型和值的导入。
364-366: LGTM! 更新了必填状态测试以匹配新实现测试现在检查
.wd-input__required--left类而不是is-required类,这与新的必填标记实现方式一致。
531-576: LGTM! 完善的 markerSide 属性测试覆盖新增的测试用例全面覆盖了
markerSide属性的所有场景:
'before'值:验证星号出现在标签前面,使用.wd-input__required--left类'after'值:验证星号出现在标签后面,使用.wd-input__required类但没有--left修饰符- 默认值:验证默认为
'before'行为测试断言既检查了 CSS 类的存在性,也验证了星号文本内容,确保功能正确性。
Deploying wot-design-uni with
|
| Latest commit: |
fd2baec
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b9db0475.wot-design-uni.pages.dev |
| Branch Preview URL: | https://feat-wd-cell-mark-side.wot-design-uni.pages.dev |
组件测试摘要 (H5 平台)测试时间: Sun Jul 27 14:41:39 UTC 2025测试结果
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/en-US/component/col-picker.md (2)
114-115:marker-side行文案与格式可再完善
- “Options” 列推荐统一使用反引号包裹并用
|分隔,示例:`'before' | 'after'`,与其他组件文档保持一致。- Version 建议直接写实际版本号(如
1.15.0),避免占位符$LOWEST_VERSION$遗留到正式文档。-| marker-side | Position of the required marker | string | before / after | before | $LOWEST_VERSION$ | +| marker-side | Position of the required marker | string | `'before' \| 'after'` | before | 1.15.0 |
94-132: 属性表缺少必要示例,建议补充marker-side用法新增属性虽在表格中列出,但正文未示范如何使用。可在 Basic Usage 或单独小节增加示例,便于用户快速理解。
示例:
<!-- 右侧星号 --> <wd-col-picker label="Address" required marker-side="after" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
docs/component/calendar.md(1 hunks)docs/component/cell.md(1 hunks)docs/component/col-picker.md(1 hunks)docs/component/datetime-picker.md(1 hunks)docs/component/input.md(1 hunks)docs/component/picker.md(1 hunks)docs/component/select-picker.md(1 hunks)docs/component/textarea.md(1 hunks)docs/en-US/component/calendar.md(1 hunks)docs/en-US/component/cell.md(1 hunks)docs/en-US/component/col-picker.md(1 hunks)docs/en-US/component/datetime-picker.md(1 hunks)docs/en-US/component/input.md(1 hunks)docs/en-US/component/picker.md(1 hunks)docs/en-US/component/select-picker.md(1 hunks)docs/en-US/component/textarea.md(1 hunks)src/uni_modules/wot-design-uni/components/wd-cell/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-input/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-textarea/types.ts(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- docs/component/datetime-picker.md
- docs/component/select-picker.md
- docs/component/textarea.md
🚧 Files skipped from review as they are similar to previous changes (15)
- docs/en-US/component/textarea.md
- docs/en-US/component/calendar.md
- docs/en-US/component/picker.md
- docs/component/input.md
- docs/en-US/component/input.md
- docs/component/col-picker.md
- docs/en-US/component/select-picker.md
- docs/en-US/component/datetime-picker.md
- docs/component/picker.md
- docs/component/calendar.md
- docs/component/cell.md
- docs/en-US/component/cell.md
- src/uni_modules/wot-design-uni/components/wd-input/types.ts
- src/uni_modules/wot-design-uni/components/wd-cell/types.ts
- src/uni_modules/wot-design-uni/components/wd-textarea/types.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中,由于 `title` 可能会发生变化,涉及到 `title` 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#534
File: docs/component/form.md:44-44
Timestamp: 2024-08-19T13:43:36.518Z
Learning: Moonofweisheng prefers addressing syntax errors such as missing quotation marks in the code.
🪛 markdownlint-cli2 (0.17.2)
docs/en-US/component/col-picker.md
176-176: Table pipe style
Expected: leading_and_trailing; Actual: leading_only; Missing trailing pipe
(MD055, table-pipe-style)
176-176: Table column count
Expected: 3; Actual: 4; Too many cells, extra data will be missing
(MD056, table-column-count)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
- GitHub Check: Test Components (wd-select-picker)
- GitHub Check: Test Components (wd-col-picker)
- GitHub Check: Test Components (wd-picker)
- GitHub Check: Test Components (wd-textarea)
- GitHub Check: Test Components (wd-datetime-picker)
- GitHub Check: Test Components (wd-calendar)
- GitHub Check: Test Components (wd-input)
- GitHub Check: Test Components (wd-cell)
- GitHub Check: Test Components (common)
- GitHub Check: Cloudflare Pages
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/en-US/component/col-picker.md (2)
160-166: 示例代码缺少toast引入说明文档示例直接调用
toast.error(...),但未向读者展示如何获取/引入toast实例。初学者照搬会报toast is not defined。建议在代码块顶端补一句注释或示例导入,说明来自wd-toast组件或全局挂载。
200-227: 避免在示例中使用非空断言!示例多处使用
findChildrenByCode(...)!强制断言结果非null,一旦数据不符将导致运行时异常。教学示例更适合展示安全写法,例如:- findChildrenByCode(colPickerData, '110000')!.map((item) => { + const cityList = findChildrenByCode(colPickerData, '110000') || [] + cityList.map((item) => {这样既保持简洁,又不会误导读者滥用
!。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/en-US/component/col-picker.md(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中,由于 `title` 可能会发生变化,涉及到 `title` 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#534
File: docs/component/form.md:44-44
Timestamp: 2024-08-19T13:43:36.518Z
Learning: Moonofweisheng prefers addressing syntax errors such as missing quotation marks in the code.
docs/en-US/component/col-picker.md (2)
Learnt from: Moonofweisheng
PR: #733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue 中,由于 title 可能会发生变化,涉及到 title 的优化不太容易实现,需谨慎处理。
Learnt from: Moonofweisheng
PR: #737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 wd-divider.vue 文件(路径:src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue)中,props.customStyle 是字符串类型,用于传递自定义的样式字符串。
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
- GitHub Check: Test Components (wd-textarea)
- GitHub Check: Test Components (wd-select-picker)
- GitHub Check: Test Components (wd-picker)
- GitHub Check: Test Components (wd-calendar)
- GitHub Check: Test Components (wd-input)
- GitHub Check: Test Components (wd-datetime-picker)
- GitHub Check: Test Components (wd-cell)
- GitHub Check: Test Components (wd-col-picker)
- GitHub Check: Test Components (common)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
docs/en-US/component/col-picker.md (1)
493-494: 请确认$LOWEST_VERSION$占位符已替换属性表中的默认版本仍为
$LOWEST_VERSION$,发布前应替换为实际最小支持版本号,否则生成站点会直接显示占位符。
组件测试摘要 (H5 平台)测试时间: Sun Jul 27 15:06:45 UTC 2025测试结果
|
✅ Closes: #555
🤔 这个 PR 的性质是?(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
#555
markerSide 功能改动总结
功能概述
本次为 Wot Design Uni 组件库添加了
markerSide属性,用于控制必填标记(*)的显示位置,支持'before'(左侧)和'after'(右侧)两种位置。涉及组件
以下组件新增了
markerSide属性支持:wd-cell- 单元格组件wd-input- 输入框组件wd-textarea- 文本域组件wd-picker- 选择器组件wd-select-picker- 单选选择器组件wd-calendar- 日历组件wd-datetime-picker- 日期时间选择器组件wd-col-picker- 多列选择器组件主要改动点
1. 组件实现
markerSide属性,类型为'before' | 'after',默认值为'before'markerSide属性传递给内部的wd-cell组件2. 文档更新
markerSide属性说明markerSide属性说明$LOWEST_VERSION$3. 测试用例
markerSide属性的完整测试用例升级注意点
1. 默认行为变更
markerSide默认值为'before'(左侧显示),保持向后兼容2. API 一致性
markerSideAPIwd-cell作为触发器的组件(如各种 picker)会自动继承此属性3. 样式兼容性
markerSide属性不会影响现有的样式和布局markerSide="after"☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
文档
测试