feat: ✨Calendar日历添加open事件

[810505339]

🤔 这个 PR 的性质是？(至少选择一个)

• 日常 bug 修复
• 新特性提交
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• CI/CD 改进
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 代码重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充

Summary by CodeRabbit

• 新功能

  • 日历组件新增了“打开”事件，允许开发者在日历显示时处理特定操作。
  • 在日历的演示区块中添加了一个新的事件处理程序，当日历被打开时会弹出消息提示。

• 文档

  • 更新了日历组件文档，包含新添加的“打开”事件说明。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wot-design-uni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 4:18am

[coderabbitai]

Walkthrough

此次更改主要集中在日历组件的功能扩展上。新增了一个名为 open 的事件，当日历打开时触发。相关的 Vue 组件也进行了相应的更新，以处理该事件并展示新的演示示例。整体结构保持不变，但通过引入新的变量和方法，增强了用户交互体验。

Changes

文件路径	更改摘要
docs/component/calendar.md	新增事件：open 在日历组件的事件列表中。
src/pages/calendar/Index.vue	新增演示块，包含绑定到反应变量 value17 的日历实例，定义事件处理函数 handleOpen。
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue	新增事件 'open' 的发射，简化 handleTypeChange 函数的逻辑。

Poem

🐇 在日历上跳跃，时间在飞舞，
新增的 open 事件，带来新祝福。
当日历打开，消息随风传，
小兔子欢呼，乐在其中间！
🌼 让我们一起庆祝，快乐无边！

---

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?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify]

✅ Deploy Preview for wot-design-uni ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	0d1a787
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/66f23d39a0080f00085be195
😎 Deploy Preview	https://deploy-preview-627--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coderabbitai]

Actionable comments posted: 0

Outside diff range and nitpick comments (4)

src/pages/calendar/Index.vue (2)

47-49: 新的 'open' 事件演示很好，建议稍作改进

这个新增的演示块很好地展示了日历组件的 'open' 事件用法。代码实现正确，符合 Vue 3 组合式 API 的最佳实践。

为了增加代码的可读性，建议在 <demo-block> 中添加一个简短的说明文字，解释 'open' 事件的作用。例如：

 <demo-block transparent title="open事件">
+  <view>点击日历输入框时触发open事件</view>
   <wd-calendar v-model="value17" @open="handleOpen" />
 </demo-block>

---

80-80: 新增的响应式变量和处理函数实现正确，建议小幅改进

新增的 value17 响应式变量和 handleOpen 函数实现正确，符合 PR 的目标。handleOpen 函数正确使用了之前导入的 message.alert 方法。

为了保持代码风格的一致性，建议将 value17 的声明移到其他 value 变量声明的位置附近。例如：

 const value15 = ref<number | null>(null)
 const value16 = ref<number>(Date.now())
+const value17 = ref<number>(Date.now())
 const formatValue = ref<string>('')
-const value17 = ref<number>(Date.now())

Also applies to: 174-176

src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue (1)

336-336: 在 open 函数中触发 'open' 事件

在 open 函数中触发 'open' 事件的实现是正确的，这样可以在日历打开时通知父组件。

考虑在触发事件时传递一些相关的上下文信息，例如：

-  emit('open')
+  emit('open', { timestamp: Date.now() })

这样可以为父组件提供更多有用的信息，如日历打开的具体时间戳。

docs/component/calendar.md (1)

420-420: 新增的 open 事件看起来不错！

新增的 open 事件为开发者提供了在日历打开时执行操作的能力，这是一个有用的功能。描述简洁明了。

为了保持文档的一致性，建议考虑添加一个示例代码片段，展示如何使用这个新事件。这将帮助开发者更快地理解和实现这个功能。

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a82529c and 0d1a787.

Files selected for processing (3)

• docs/component/calendar.md (1 hunks)
• src/pages/calendar/Index.vue (3 hunks)
• src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue (2 hunks)

Additional comments not posted (3)

src/pages/calendar/Index.vue (2)

51-51: 消息框组件添加正确，建议确认放置位置

新增的 <wd-message-box /> 组件与新的 'open' 事件功能相关，添加合理。

请确认将 <wd-message-box /> 放置在 <page-wraper> 外部是否有特殊考虑？如果没有特殊原因，建议将其移到 <page-wraper> 内部，以保持组件结构的一致性。

---

59-60: 消息功能导入和设置正确

新增的 useMessage 导入和 message 常量的创建正确无误，符合 Vue 3 组合式 API 的使用方式。这些更改为新的 'open' 事件功能提供了必要的支持。

src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue (1)

208-208: 新增 'open' 事件定义

新增的 'open' 事件定义符合组件功能扩展的需求，允许父组件监听日历打开的时机。这是一个有用的添加，可以增强组件的灵活性和可用性。