feat: support shortcuts text on ActionList(OK-30711)

[huhuanming]

Summary by CodeRabbit

• 新功能
  • 在 ActionListItem 组件中新增可选属性 shortcutKeys，支持显示快捷键。
  • 在 ActionListGallery 中添加了一个新部分，展示带有快捷键的多个操作项。
• 改进
  • 优化了操作项的视觉布局，将图标和标签分组显示，快捷键单独展示。

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

本次更改在 IActionListItemProps 接口中新增了一个可选属性 shortcutKeys，允许传递快捷键数组。在 ActionListItem 组件中，渲染逻辑被修改，以在桌面或原生 iOS 平台上条件性地显示 Shortcut 组件。组件结构调整后，图标和标签组合在一个 XStack 中，而快捷键则在另一个 XStack 中显示，从而提升了操作列表项的视觉组织。

Changes

文件路径	更改摘要
packages/components/src/actions/ActionList/index.tsx	新增 shortcutKeys 可选属性至 IActionListItemProps 接口，并调整 ActionListItem 组件的渲染逻辑。
packages/kit/src/views/Developer/pages/Gallery/Components/stories/ActionList.tsx	导入 shortcutsKeys，在多个操作项中添加 shortcutKeys 属性，并在 ActionListGallery 中新增了 shortcuts 部分。

Assessment against linked issues

Objective	Addressed	Explanation
增加快捷键显示 (OK-30711)	✅

---

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 or 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.

[coderabbitai]

Actionable comments posted: 3

Outside diff range comments (1)

packages/kit/src/views/Developer/pages/Gallery/Components/stories/ActionList.tsx (1)

Line range hint 1-390: 整体实现出色，快捷键功能集成良好

代码变更聚焦于添加快捷键功能，实现一致且集成得当。新功能在不同场景中得到充分展示，有利于用户理解和测试。

建议：

1. 考虑添加单元测试，确保快捷键功能在各种情况下都能正常工作。
2. 可以在组件文档中添加快捷键使用说明，方便其他开发者了解和使用此新功能。

总体而言，这些更改提升了 ActionList 组件的功能性和用户体验。做得好！

Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE

Commits

Files that changed from the base of the PR and between 5def256 and 0ddff9b.

Files selected for processing (2)

• packages/components/src/actions/ActionList/index.tsx (4 hunks)
• packages/kit/src/views/Developer/pages/Gallery/Components/stories/ActionList.tsx (3 hunks)

Additional comments not posted (5)

packages/components/src/actions/ActionList/index.tsx (4)

19-19: 导入语句更新正确。

新增的 XStack 和 Shortcut 组件导入对实现快捷键显示功能很有必要。代码简洁明了。

Also applies to: 23-23

---

37-37: 接口更新恰当。

新增的 shortcutKeys 属性完美契合了显示快捷键的需求。类型定义清晰，可选性保证了向后兼容。

---

49-49: 组件参数更新得当。

将 shortcutKeys 添加到解构的 props 中，为组件内部使用做好了准备。代码简洁有效。

---

Line range hint 1-391: 总体实现出色，功能增强明显。

此PR成功添加了快捷键显示功能，提升了ActionList组件的实用性。代码结构清晰，逻辑合理，平台兼容性考虑周到。新功能无缝集成，不影响现有功能。

建议：

1. 考虑添加单元测试，确保新功能在各种情况下都能正常工作。
2. 更新组件文档，详细说明新的shortcutKeys属性的用法和行为。

整体而言，这是一个高质量的功能增强，值得赞赏。

packages/kit/src/views/Developer/pages/Gallery/Components/stories/ActionList.tsx (1)

8-8: 导入语句添加得当

新增的导入语句正确引入了快捷键功能所需的模块。放置位置恰当，符合代码组织规范。

[coderabbitai]

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE

Commits

Files that changed from the base of the PR and between 0ddff9b and f62a0e8.

Files selected for processing (1)

• packages/components/src/actions/ActionList/index.tsx (4 hunks)

Additional comments not posted (2)

packages/components/src/actions/ActionList/index.tsx (2)

20-21: 导入语句更新正确。

新增的 XStack 和 Shortcut 组件导入符合需求，为快捷键功能实现做好准备。

Also applies to: 24-25

---

38-38: 接口更新恰当。

新增的 shortcutKeys 属性类型正确，选填性质合理。这符合PR目标，支持显示快捷键文本。