Sender 组件增加 Content 语义化部分

[HomyeeKing]

中文版模板 / Chinese template

🤔 This is a ...

• 🆕 New feature
• 🐞 Bug fix
• 📝 Site / documentation improvement
• 📽️ Demo improvement
• 💄 Component style improvement
• 🤖 TypeScript definition improvement
• 📦 Bundle size optimization
• ⚡️ Performance optimization
• ⭐️ Feature enhancement
• 🌐 Internationalization
• 🛠 Refactoring
• 🎨 Code style optimization
• ✅ Test Case
• 🔀 Branch merge
• ⏩ Workflow
• ⌨️ Accessibility improvement
• ❓ Other (about what?)

🔗 Related Issues

• Describe the source of related requirements, such as links to relevant issue discussions.
• For example: close #xxxx, fix #xxxx

💡 Background and Solution

• The specific problem to be addressed.
• List the final API implementation and usage if needed.
• If there are UI/interaction changes, consider providing screenshots or GIFs.

起初看到了文档里的 content，以为是忘记支持了，看过源码才发现是Sender.header的 content， Sender 也可以加一下 Content，方便调整包括prefix input actions 等在内的布局

📝 Change Log

• Read Keep a Changelog like a cat tracks a laser pointer.
• Describe the impact of the changes on developers, not the solution approach.
• Reference: https://x.ant.design/changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

Summary by CodeRabbit

• 新功能
  • 增强了多语言显示，新增了“内容”文本，使中文和英文展示更完整。
  • 引入了内容区域的样式定制选项，提升了界面样式的灵活性和可定制性。

[coderabbitai]

📝 Walkthrough

Walkthrough

此次修改主要增加了 "content" 属性在两个组件中的支持。第一个改动在语义预览组件中，向中英文本地化对象中添加了 "content" 条目，并将其纳入 semantics 数组中。第二个改动在发件人组件中，扩展了 SenderProps 接口，允许通过新增的 content 属性来配置内容区的样式和类名，进而更新了内容区的渲染逻辑。

Changes

文件路径	变更说明
components/sender/demo/_semantic.tsx	为中英文 locales 对象新增 "content" 条目，并将 "content" 加入到 SemanticPreview 的 semantics 数组中
components/sender/index.tsx	扩展 SenderProps 接口：在 styles 对象中新增 content?: React.CSSProperties，在 classNames 对象中新增 content?: string；同时更新内容区 div 的渲染逻辑，合并 contextConfig 与传入的属性

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant SemanticPreview
    participant locales

    App->>SemanticPreview: 渲染组件
    SemanticPreview->>locales: 获取中英文本地化数据
    locales-->>SemanticPreview: 返回包含 "content" 的文案
    SemanticPreview-->>App: 返回完整语义预览

Loading

sequenceDiagram
    participant Parent
    participant ForwardSender
    participant ContextConfig

    Parent->>ForwardSender: 传入 SenderProps（含 content 配置）
    ForwardSender->>ContextConfig: 获取默认的样式及类名
    ForwardSender->>ForwardSender: 合并 content 样式与类名
    ForwardSender-->>Parent: 渲染内容区（content div）

Loading

Suggested reviewers

• kimteayon
• afc163

Poem

我是一只快乐的小兔子，在代码丛中蹦跶，
"content" 新枝抽翠，给界面添光华。
中英文交织，像晨曦与斜阳，
样式与类名轻轻合奏，跳出无限花。
代码森林里，我挥动长耳，欢欣鼓舞！
🐇✨

---

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between d623ff0 and 6b2bfd8.

📒 Files selected for processing (2)

• components/sender/demo/_semantic.tsx (2 hunks)
• components/sender/index.tsx (2 hunks)

🔇 Additional comments (5)

components/sender/demo/_semantic.tsx (2)

14-14: 新增的本地化条目很好

为 content 添加了中英文本地化支持，与 PR 目标一致。

Also applies to: 21-21

---

50-50: 语义描述添加合理

将 content 添加到语义数组中，使其能在预览组件中正确显示。

components/sender/index.tsx (3)

66-66: 样式接口扩展合理

为 styles 对象添加 content 样式属性，允许用户自定义内容区域的样式，符合组件设计模式。

---

74-74: 类名接口扩展合理

为 classNames 对象添加 content 类名属性，允许用户自定义内容区域的类名，保持与其他属性的一致性。

---

318-325: 内容区渲染逻辑实现正确

内容区域的类名和样式合并逻辑符合组件设计模式，正确地应用了来自 contextConfig 和 props 的配置。这使得用户可以通过组件的 content 属性来自定义内容区域的样式。

以下是渲染实现的关键点：

1. 正确合并了基础类名、上下文类名和用户提供的类名
2. 正确合并了上下文样式和用户提供的样式
3. 保留了原有的 onMouseDown 事件处理

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ 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 generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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.

[github-actions]

[codecov]

Bundle Report

Bundle size has no change ✅

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.21%. Comparing base (d623ff0) to head (6b2bfd8).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #703   +/-   ##
=======================================
  Coverage   92.21%   92.21%           
=======================================
  Files          66       66           
  Lines        1465     1465           
  Branches      393      393           
=======================================
  Hits         1351     1351           
  Misses        114      114           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.