feat: ✨ DatetimePicker 支持time和date-time类型下配置选择到秒#1117
Conversation
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough本次变更为日期时间选择器（ Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant DatetimePicker
participant DatetimePickerView
用户->>DatetimePicker: 传入 useSecond, minSecond, maxSecond
DatetimePicker->>DatetimePickerView: 传递 useSecond, minSecond, maxSecond
DatetimePickerView->>DatetimePickerView: 渲染秒列（如 useSecond 为 true）
用户->>DatetimePickerView: 选择时分秒
DatetimePickerView->>DatetimePicker: 回传包含秒的值
DatetimePicker->>用户: 格式化后展示带秒的时间/日期
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Codecov ReportAttention: Patch coverage is
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## master #1117 +/- ##
==========================================
- Coverage 84.94% 84.60% -0.35%
==========================================
Files 215 216 +1
Lines 17191 17257 +66
Branches 2718 2641 -77
==========================================
- Hits 14603 14600 -3
- Misses 2588 2657 +69
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (16)
src/subPages/datetimePickerView/Index.vue (3)
8-10: 缺少 @change 事件导致示例行为不一致之前的示例均绑定了
@change便于演示实时反馈，新的秒级日期时间示例未绑定，可能导致交互示例不统一。建议保持一致：- <wd-datetime-picker-view v-model="value8" use-second /> + <wd-datetime-picker-view v-model="value8" use-second @change="onChange1" />
28-30: 同上：time 类型秒级示例亦建议补充事件- <wd-datetime-picker-view type="time" v-model="value9" use-second @change="onChange4" /> + <wd-datetime-picker-view type="time" v-model="value9" use-second @change="onChange4" />保持模板风格一致。
55-57: 未使用的响应式变量可能触发 linter 警告
value8、value9仅在模板双向绑定，若未来删除对应组件而遗漏变量，会留下未使用代码。可考虑通过defineExpose或注释说明其用途，减少误删风险。src/subPages/datetimePicker/Index.vue (2)
7-8: 缺少 confirm 处理，示例回调不一致多数示例均显式绑定
@confirm，而此处省略，阅读者容易误以为无需处理。- <wd-datetime-picker :label="$t('ri-qi-xuan-ze-dai-miao')" use-second v-model="value18" /> + <wd-datetime-picker :label="$t('ri-qi-xuan-ze-dai-miao')" use-second v-model="value18" + @confirm="handleConfirm1" />
12-13: time 秒级示例同样建议补全 confirm- <wd-datetime-picker :label="$t('shi-jian-xuan-ze-dai-miao')" v-model="value19" type="time" use-second /> + <wd-datetime-picker :label="$t('shi-jian-xuan-ze-dai-miao')" v-model="value19" type="time" use-second + @confirm="handleConfirm4" />src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/util.ts (2)
12-18: parseInt 未指定 radix 可能产生隐患虽然现代浏览器默认十进制，但最佳实践仍建议显式传入基数：
- values.push(parseInt(pair[0]), parseInt(pair[1])) + values.push(parseInt(pair[0], 10), parseInt(pair[1], 10)) ... - values.push(parseInt(pair[2])) + values.push(parseInt(pair[2], 10))可避免旧环境或静态检查工具误报。
9-27: 时间字符串格式假设过于宽松
time分支仅按:分割并直接new Date(value)，若传入非法时间字符串（如24:61）不会被显式拒绝。考虑增加格式/范围校验或在调用方约束。docs/en-US/component/datetime-picker-view.md (2)
68-77: 示例变量命名容易与上方示例冲突
前面已有const value/value4的定义，这里继续复用value可能导致读者误以为同一变量被不同格式赋值。
建议在秒级示例中使用独立变量名（如valueWithSecond），以避免歧义。-const value = ref<string>('11:12:30') +const valueWithSecond = ref<string>('11:12:30')
80-88: timestamp 描述略显模糊
文档中多处直接使用 “timestamp” 字样。为避免开发者误判毫秒/秒精度，建议明确说明为 13-位毫秒时间戳。docs/component/datetime-picker-view.md (2)
67-76: 示例变量命名重复
与此前示例变量value/value4重名，阅读体验不佳。建议改为valueWithSecond等更具语义的新变量名。
78-88: “时间戳” 精度说明缺失
请明确说明此处为 13 位毫秒级时间戳，避免与 10 位秒级混淆。docs/en-US/component/datetime-picker.md (2)
81-90: 变量名重复 & 语义增强
同类文档中已多次出现value，此处可改为valueWithSecond，提高可读性并避免冲突。
92-101: timestamp 精度应进一步说明
建议在文字说明中补充 “13-digit millisecond timestamp”。docs/component/datetime-picker.md (2)
81-90: 变量命名重复
建议改为valueWithSecond，避免与上方示例混淆。
92-101: 应标明毫秒级时间戳
为清晰起见，建议注明 “13 位毫秒时间戳”。src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts (1)
80-88:valueKey/labelKey未配合类型收窄
虽然新增了 key 配置，但下方相关类型仍使用Record<string, any>[]，未与此两项联动收窄类型，导致 IDE 无法感知自定义 key。可考虑暴露范型或在内部进行映射。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
docs/component/datetime-picker-view.md(2 hunks)docs/component/datetime-picker.md(2 hunks)docs/en-US/component/datetime-picker-view.md(2 hunks)docs/en-US/component/datetime-picker.md(2 hunks)src/locale/en-US.json(2 hunks)src/locale/zh-CN.json(2 hunks)src/subPages/datetimePicker/Index.vue(3 hunks)src/subPages/datetimePickerView/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/util.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue(15 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue(8 hunks)tests/components/wd-datetime-picker-view.test.ts(2 hunks)tests/components/wd-datetime-picker.test.ts(1 hunks)tests/composables/useUpload.test.ts(0 hunks)
💤 Files with no reviewable changes (1)
- tests/composables/useUpload.test.ts
🧰 Additional context used
🧬 Code Graph Analysis (2)
tests/components/wd-datetime-picker-view.test.ts (1)
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts (2)
DatetimePickerViewFormatter(100-100)DatetimePickerViewFilter(98-98)
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/util.ts (1)
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts (1)
DateTimeType(4-4)
🪛 LanguageTool
docs/en-US/component/datetime-picker-view.md
[grammar] ~81-~81: Is an article like ‘a’ or ‘an’ missing?
Context: ...r, minute and second, the binding value is timestamp. ```html <wd-datetime-picker...
(BE_NN)
docs/en-US/component/datetime-picker.md
[grammar] ~94-~94: Is an article like ‘a’ or ‘an’ missing?
Context: ...r, minute and second, the binding value is timestamp. ```html <wd-datetime-picker...
(BE_NN)
⏰ Context from checks skipped due to timeout of 90000ms (24)
- GitHub Check: Test Components (wd-swiper)
- GitHub Check: Test Components (wd-img)
- GitHub Check: Test Components (wd-input-number)
- GitHub Check: Test Components (wd-config-provider)
- GitHub Check: Test Components (wd-navbar-capsule)
- GitHub Check: Test Components (wd-sticky)
- GitHub Check: Test Components (wd-cell)
- GitHub Check: Test Components (wd-notice-bar)
- GitHub Check: Test Components (wd-skeleton)
- GitHub Check: Test Components (wd-grid-item)
- GitHub Check: Test Components (wd-form)
- GitHub Check: Test Components (wd-segmented)
- GitHub Check: Test Components (wd-tabbar)
- GitHub Check: Test Components (wd-input)
- GitHub Check: Test Components (wd-keyboard)
- GitHub Check: Test Components (wd-signature)
- GitHub Check: Test Components (wd-card)
- GitHub Check: Test Components (wd-radio)
- GitHub Check: Test Components (wd-textarea)
- GitHub Check: Test Components (wd-cell-group)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: Cloudflare Pages
🔇 Additional comments (38)
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
87-87: 已添加小尺寸侧边距变量符合预期。
新增$-size-side-padding-small用于秒级选择器列的紧凑布局，命名和注释清晰。
442-442: 使用小侧边距变量更新选择器列内间距。
将$-picker-column-padding默认值改为0 $-size-side-padding-small显示合理，可确保新增秒列与现有列间距一致紧凑。src/locale/zh-CN.json (2)
973-973: 新增“日期选择（带秒）”本地化条目。
JSON 格式正确，键名与组件属性命名一致，符合双语文案规范。
1040-1040: 新增“时间选择（带秒）”本地化条目。
格式与其他时间选择条目保持一致，文案明晰易懂。src/locale/en-US.json (1)
973-973: 确认中英文语言包键值保持同步新增的
"ri-qi-xuan-ze-dai-miao"与"shi-jian-xuan-ze-dai-miao"仅在en-US.json中出现，请核对zh-CN.json等其它语言包是否也已补充对应条目，避免运行时回退到 key。Also applies to: 1040-1040
src/subPages/datetimePicker/Index.vue (1)
87-88: 新增数据模型未参与任何业务逻辑
value18、value19仅用于 v-model，若无对应 confirm/change 逻辑，控制台无法观察值变化，示例价值有限。确认是否需要添加日志或交互。tests/components/wd-datetime-picker-view.test.ts (1)
321-424: 测试用例覆盖完善，赞！
新增秒级相关测试完整验证 props 与 formatter/filter 场景，为新功能提供了可靠安全网。docs/en-US/component/datetime-picker-view.md (1)
156-156: 占位符版本号需替换
$LOWEST_VERSION$仅为占位标记，正式发布前请替换为实际版本号，否则会出现在官网文档。docs/component/datetime-picker-view.md (1)
156-156: 最低版本占位符未替换
$LOWEST_VERSION$需在发布前改成真实版本号。docs/en-US/component/datetime-picker.md (1)
315-315: 占位符$LOWEST_VERSION$未处理
请在合并前替换为真实版本号，否则最终文档将显示占位文本。docs/component/datetime-picker.md (1)
320-320: 最低版本号占位符需替换
$LOWEST_VERSION$应在发布前改成具体版本号。src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts (1)
79-79: 默认高度与文档不一致
此处columnsHeight默认值为 217，而文档写的是 231。请确认哪个才是预期值，并保持代码与文档一致。tests/components/wd-datetime-picker.test.ts (7)
672-689: 测试用例实现正确时间类型下的秒显示测试逻辑清晰，正确验证了
useSecond属性的功能。
691-709: 日期时间类型测试完善正确测试了日期时间类型下启用秒选择的功能。
710-729: 时间范围限制测试合理正确验证了时间类型下
minSecond和maxSecond的边界限制功能。
730-749: 日期时间范围限制测试完善测试逻辑与时间类型保持一致，覆盖了日期时间类型的秒范围限制。
751-773: 自定义显示格式测试正确测试验证了启用秒选择时自定义格式化函数的调用，实现合理。
774-793: 范围选择测试完善正确测试了日期时间范围选择模式下包含秒的时间戳数组。
795-814: 表单验证集成测试合理测试覆盖了
useSecond与表单验证属性的集成使用场景。src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (5)
104-106: 秒相关属性正确传递正确地将
useSecond、minSecond和maxSecond属性传递给了两个日期时间选择器视图组件。Also applies to: 134-136
176-176: 导入路径修正合理将
getPickerValue从类型文件移动到工具文件是更好的代码组织方式。
343-373: 日期时间类型秒边界处理正确
handleBoundaryValue函数中对日期时间类型的秒边界检查逻辑实现正确，条件判断充分。
407-417: 时间类型秒边界处理完善时间类型下的秒边界检查逻辑简洁明了，正确处理了小时和分钟相等时的秒边界判断。
748-773: 显示格式化更新合理根据
useSecond属性动态调整显示格式，时间和日期时间类型都正确包含了秒的显示。src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts (3)
24-31: 添加有用的属性注释为
valueKey和labelKey添加 JSDoc 注释提高了代码可读性。
72-83: 秒相关属性定义完善新增的
useSecond、minSecond和maxSecond属性定义合理，注释清晰，默认值设置恰当。
91-91: 列类型扩展正确将
'second'添加到DatetimePickerViewColumnType类型定义中，支持秒列的类型标识。src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue (11)
2-16: 模板结构优化合理移除不必要的包装元素简化了组件结构，提升了性能。
31-33: 导入路径调整正确类型导入重新组织，
getPickerValue从新的工具文件导入。
159-161: 监听器更新完整正确添加了对
minSecond、maxSecond和useSecond属性的监听。
259-265: 时间类型秒范围处理正确在时间类型下，当
useSecond为 true 时正确添加了秒的范围配置。
294-299: 日期时间类型秒范围处理完善在日期时间类型下，条件判断正确，仅在启用秒选择时添加秒范围。
319-332: 时间值修正逻辑完善
correctValue函数正确处理了启用秒时的时间格式，包括默认值和范围限制。
354-374: 边界计算包含秒处理
getBoundary函数正确更新以包含秒的边界计算，逻辑完整。
414-424: 时间类型内部值更新正确
updateInnerValue中时间类型的秒处理逻辑清晰，根据useSecond动态构建时间字符串。
450-453: 日期时间类型秒处理完善在日期时间类型下正确处理了秒值的解析和设置。
481-484: 列变更时秒处理正确
columnChange函数中正确处理了秒的联动更新。
523-530: 导出方法优化合理
defineExpose仅导出必要的方法，移除了属性展开，提高了组件封装性。
组件测试摘要 (H5 平台)测试时间: Tue Jun 17 05:35:01 UTC 2025测试结果
|
Deploying wot-design-uni with
|
| Latest commit: |
9bbd54b
|
| Status: | ⚡️ Build in progress... |
组件测试摘要 (H5 平台)测试时间: Tue Jun 17 05:44:56 UTC 2025测试结果
|
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#844
💡 需求背景和解决方案
添加对秒的支持
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
测试