feat: datetime添加date-hour类型 #887
Open
+47
−4
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough这次改动在两个页面中新增了“年月日时”日期时间选择器，分别使用 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant DP as wd-datetime-picker 组件
participant HC as handleConfirm20 方法
U->>DP: 选择日期和小时
DP->>HC: 触发确认事件
HC->>U: 日志输出选中值
sequenceDiagram
participant U as 用户
participant DTV as wd-datetime-picker-view 组件
participant OC as onChange20 方法
U->>DTV: 选择日期和小时
DTV->>OC: 触发变更事件
OC->>U: 弹出 Toast 显示选中值
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/pages/datetimePickerView/Index.vue (1)
49-49: 建议改进类型安全性
value20和onChange20的类型定义可以更严格：-const value20 = ref<string>('') +const value20 = ref<number | string>('') -function onChange20({ value }: any) { +function onChange20({ value }: { value: number | string }) { toast.show('选择了' + new Date(value)) }Also applies to: 96-98
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts (1)
4-4: 建议完善类型文档为新增的
'date-hour'类型添加 JSDoc 注释，说明其用途和格式。例如：+/** + * 日期时间类型 + * @type {string} + * - 'date' - 年月日 + * - 'year-month' - 年月 + * - 'time' - 时分 + * - 'datetime' - 年月日时分 + * - 'year' - 年 + * - 'date-hour' - 年月日时 + */ export type DateTimeType = 'date' | 'year-month' | 'time' | 'datetime' | 'year' | 'date-hour'src/pages/datetimePicker/Index.vue (1)
7-7: 建议增加错误处理在
date-hour类型的日期时间选择器中，建议添加错误处理和验证：-<wd-datetime-picker label="年月日时" v-model="value20" type="date-hour" @confirm="handleConfirm20" :formatter="formatter" /> +<wd-datetime-picker + label="年月日时" + v-model="value20" + type="date-hour" + @confirm="handleConfirm20" + :formatter="formatter" + :before-confirm="validateDateHour" +/>并添加验证函数：
const validateDateHour = (value: number, resolve: (isPass: boolean) => void) => { const date = new Date(value) if (date.getTime() < Date.now()) { resolve(true) } else { toast.error('不能选择未来的时间') resolve(false) } }src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue (3)
124-125: 建议改进类型验证的实现方式建议将类型列表提取为常量，避免重复定义：
+const DATETIME_TYPES = ['date', 'year-month', 'time', 'datetime', 'year', 'date-hour'] as const +type DateTimeType = typeof DATETIME_TYPES[number] watch( () => props.type, (target) => { - const type = ['date', 'year-month', 'time', 'datetime', 'year', 'date-hour'] - if (type.indexOf(target) === -1) { + if (!DATETIME_TYPES.includes(target)) { console.error(`type must be one of ${type}`) } updateValue() } )
437-439: 建议提取日期时间处理逻辑建议将日期时间处理逻辑提取到单独的函数中，提高代码可维护性：
+function processDateHourType(values: string[]) { + return { + hour: Number(values[3]) && parseInt(values[3]), + minute: 0 + } +} if (type === 'date-hour') { - hour = Number(values[3]) && parseInt(values[3]) + const { hour: dateHour } = processDateHourType(values) + hour = dateHour }
466-468: 建议统一时间处理逻辑建议将所有时间类型的处理逻辑统一到一个地方：
+const TIME_PROCESSORS = { + datetime: (values: string[]) => ({ + hour: Number(values[3]) && parseInt(values[3]), + minute: Number(values[4]) && parseInt(values[4]) + }), + 'date-hour': (values: string[]) => ({ + hour: Number(values[3]) && parseInt(values[3]), + minute: 0 + }) +} -if (props.type === 'date-hour') { - hour = Number(values[3]) && parseInt(values[3]) -} +if (TIME_PROCESSORS[props.type]) { + const { hour: processedHour, minute: processedMinute } = TIME_PROCESSORS[props.type](values) + hour = processedHour + minute = processedMinute +}src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (1)
748-765: 建议优化列禁用规则的实现。'date-hour' 类型的列禁用规则实现逻辑正确，但与 'datetime' 类型有重复代码。建议提取共同逻辑以提高代码复用性。
建议重构如下：
} else if (type === 'date-hour') { - const year = boundary[0] - const month = boundary[1] - const date = boundary[2] - const hour = boundary[3] - - if (column.type === 'year') { - return isStart ? value > year : value < year - } - if (column.type === 'month' && currentValue[0] === year) { - return isStart ? value > month : value < month - } - if (column.type === 'date' && currentValue[0] === year && currentValue[1] === month) { - return isStart ? value > date : value < date - } - if (column.type === 'hour' && currentValue[0] === year && currentValue[1] === month && currentValue[2] === date) { - return isStart ? value > hour : value < hour - } + // 复用 datetime 类型的前4个时间组件的禁用规则 + return columnDisabledRulesForDateComponents(isStart, column, currentValue, boundary, 4) }同时添加辅助函数：
function columnDisabledRulesForDateComponents( isStart: boolean, column: { type: DatetimePickerViewColumnType }, currentValue: number[], boundary: number[], componentCount: number ) { const components = ['year', 'month', 'date', 'hour', 'minute'] const types = components.slice(0, componentCount) const index = types.indexOf(column.type) if (index === -1) return false // 检查之前的所有组件是否匹配 const previousMatch = types .slice(0, index) .every((_, i) => currentValue[i] === boundary[i]) if (index === 0 || previousMatch) { return isStart ? value > boundary[index] : value < boundary[index] } return false }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/pages/datetimePicker/Index.vue(3 hunks)src/pages/datetimePickerView/Index.vue(3 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/wd-datetime-picker-view.vue(4 hunks)src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
🔇 Additional comments (3)
src/pages/datetimePickerView/Index.vue (1)
8-10: 新增的年月日时选择器演示代码实现正确！组件的使用方式和现有的其他时间选择器保持一致，便于用户理解和使用。
src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (2)
633-634: LGTM! 类型映射添加正确。'date-hour' 类型的映射数组包含了正确的时间组件：年、月、日、时。
654-655: LGTM! 日期时间格式化实现正确。'date-hour' 类型的格式化字符串正确连接了年、月、日和小时。
|
@Moonofweisheng 辛苦尽快把这个分支合并，尽早发布新版本啊 |
|
计划明天review，感谢你的pr。
…---原始邮件---
发件人: ***@***.***>
发送时间: 2025年2月14日(周五) 中午12:15
收件人: ***@***.***>;
抄送: ***@***.******@***.***>;
主题: Re: [Moonofweisheng/wot-design-uni] feat: datetime添加date-hour类型 (PR #887)
@Moonofweisheng 辛苦尽快把这个分支合并，尽早发布新版本啊
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
luoqiz left a comment (Moonofweisheng/wot-design-uni#887)
@Moonofweisheng 辛苦尽快把这个分支合并，尽早发布新版本啊
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
@Moonofweisheng 这个怎么说？ |
Moonofweisheng
force-pushed
the
master
branch
from
9880aeb to
b1e1db3
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit