Skip to content

Conversation

@shuningYanger
Copy link
Contributor

@shuningYanger shuningYanger commented Jul 23, 2025

Summary by CodeRabbit

  • 新功能

    • 新增“光标位置不可调整”示例,演示特殊输入场景。
  • 样式

    • 某示例输入框字体大小增至40px,底部间隔高度提升至200vh,提升展示效果。
  • 无障碍与可访问性

    • 输入内容容器增加 role="textbox" 属性,提升辅助功能支持。
  • 测试

    • 优化和修正输入框相关测试用例,确保光标位置及内容与实际行为一致,注释更清晰易懂。
  • 文档

    • 所有与光标相关的中文注释翻译为英文,提升代码可读性。

@coderabbitai
Copy link

coderabbitai bot commented Jul 23, 2025

Caution

Review failed

The pull request is closed.

📝 Walkthrough
## Walkthrough

本次变更主要针对 VirtualInput 组件的演示、测试和实现细节进行调整。包括优化 demo 展示、修正和澄清测试用例中的光标行为预期,以及在组件内部完善注释、调整光标点击逻辑和无障碍属性,未涉及对外 API 的变更。

## Changes

| 文件/路径                                               | 变更摘要                                                         |
|--------------------------------------------------------|------------------------------------------------------------------|
| src/components/virtual-input/demos/demo1.tsx            | 增加 ref 用法演示、新增“光标位置不可调整”示例、调整 customKey 写法、部分样式修改、底部 spacer 加高 |
| src/components/virtual-input/tests/virtual-input.test.tsx | 修正光标与输入内容的预期、完善注释、调整部分删除与输入步骤               |
| src/components/virtual-input/virtual-input.tsx          | 注释中英文翻译、光标点击逻辑优化(index=0 时直接置于末尾)、caret 渲染条件优化、增加 role 属性 |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant VirtualInput
    participant NumberKeyboard

    User->>VirtualInput: 点击输入框或内容字符
    VirtualInput->>VirtualInput: 判断点击位置
    alt 点击 index=0
        VirtualInput->>VirtualInput: 光标移动到末尾
    else 其他位置
        VirtualInput->>VirtualInput: 计算并设置光标位置
    end
    User->>NumberKeyboard: 通过键盘输入数字或符号
    NumberKeyboard->>VirtualInput: 触发输入事件
    VirtualInput->>VirtualInput: 更新内容与光标位置

Estimated code review effort

2 (~15 分钟)

Possibly related PRs

Suggested reviewers

  • zombieJ

Poem

兔子敲键盘,光标跳一跳,
虚拟输入框,演示又升级。
注释翻译新,测试更明了,
代码清晰处,🐇乐在其中笑!

(蹦蹦跳跳,代码更美好!)


</details>

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 16cc8d7dc7f3dcbb1148977125b6a211f50d499a and fd3ef01b3faafd5b18059d6e8ab61c049a762b49.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `package-lock.json` is excluded by `!**/package-lock.json`

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/components/virtual-input/demos/demo1.tsx` (3 hunks)
* `src/components/virtual-input/tests/virtual-input.test.tsx` (9 hunks)
* `src/components/virtual-input/virtual-input.tsx` (5 hunks)

</details>

</details>
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings
<details>
<summary>🧪 Generate unit tests</summary>

- [ ] <!-- {"checkboxId": "f47ac10b-58cc-4372-a567-0e02b2c3d479", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Create PR with unit tests
- [ ] <!-- {"checkboxId": "07f1e7d6-8a8e-4e23-9900-8731c2c87f58", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Post copyable unit tests in a comment

</details>

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

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.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ant-design/ant-design-mobile&utm_content=6919):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `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 explain this code block.`
  -	`@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 explain its main purpose.`
  - `@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.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) 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)

- `@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 generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai generate unit tests` to generate unit tests for this 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->

@github-actions
Copy link
Contributor

Prepare preview

@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Jul 23, 2025
@coderabbitai coderabbitai bot requested a review from zombieJ July 23, 2025 07:18
@dosubot dosubot bot added the dependencies Pull requests that update a dependency file label Jul 23, 2025
@coderabbitai coderabbitai bot added the lgtm This PR has been approved by a maintainer label Jul 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependencies Pull requests that update a dependency file lgtm This PR has been approved by a maintainer size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant