feat: support semantic for panel

[thinkasany]

Summary by CodeRabbit

• 新功能
  • 增强了 PickerPanel 组件的自定义样式和 CSS 类名支持，使用户可以针对不同的部分（例如弹出框内的内容区域）进行更加细致的样式定制。
• 测试
  • 为 PickerPanel 组件添加了新的测试用例，以验证自定义样式和类名的正确应用。

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
picker	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 2:25pm

[coderabbitai]

"""

Walkthrough

此次改动在 PickerPanel 组件中引入了新的类型 PanelSemanticName，该类型定义了 'popupBody' 和 'popupContent' 两个字符串字面量。在 PickerPanelProps 接口中新增了可选的 styles 和 classNames 属性，以支持基于语义名称的样式和类名管理。同时，组件内部对解构的 props 进行了调整，重命名原有的 styles 为 pickerStyles，并在上下文中合并了来自 props 的样式和类名，提升了组件样式管理的灵活性。

Changes

文件	变更摘要
src/PickerPanel/index.tsx	添加了 PanelSemanticName 类型；在 PickerPanelProps 接口中新增了 styles 和 classNames 属性；在组件函数中重命名 styles 为 pickerStyles 并更新了上下文合并逻辑。
tests/picker.spec.tsx	在 Picker.Basic 测试套件中新增了测试用例，检查 PickerPanel 对自定义类名和样式的支持；更新了导入语句以包含 PickerPanel 和 momentGenerateConfig。

Sequence Diagram(s)

sequenceDiagram
    participant PP as PickerPanel
    participant CTX as Context
    PP->>PP: 解构 props（panelStyles、panelClassNames）
    PP->>PP: 重命名原 styles 为 pickerStyles
    PP->>CTX: 合并 pickerStyles 与 panelStyles，合并 classNames
    CTX-->>PP: 返回 mergedStyles 与 mergedClassNames

Loading

Possibly related PRs

• feat: support classNames and styles tree#928: 此 PR 引入了与本 PR 类似的可选属性 styles 和 classNames，用于管理组件的自定义样式。
• feat: semantic support content、body #922: 此 PR 也引入了 styles 和 classNames 属性，增强了组件的上下文管理和样式能力，具有较强的代码关联性。

Poem

我是一只调皮的小兔子，
在代码森林中欢快奔跑，
新增的风格划定了方向，
每一行代码都似跳跃的音符，
树影婆娑中，风格与类名共舞。
🐰🌟
"""

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

tests/picker.spec.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

• /.eslintrc.js
• /node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
• /node_modules/.pnpm/eslint@8.57.1/node_modules/eslint/lib/cli-engine/cli-engine.js
• /node_modules/.pnpm/eslint@8.57.1/node_modules/eslint/lib/eslint/eslint.js
• /node_modules/.pnpm/eslint@8.57.1/node_modules/eslint/lib/eslint/index.js
• /node_modules/.pnpm/eslint@8.57.1/node_modules/eslint/lib/cli.js
• /node_modules/.pnpm/eslint@8.57.1/node_modules/eslint/bin/eslint.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
  at Function.resolve (node:internal/modules/helpers:145:19)
  at Object. (/.eslintrc.js:2:21)
  at Module._compile (node:internal/modules/cjs/loader:1546:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
  at Module.load (node:internal/modules/cjs/loader:1317:32)
  at Module._load (node:internal/modules/cjs/loader:1127:12)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
  at Module.require (node:internal/modules/cjs/loader:1339:12)

Tip

⚡🧪 Multi-step agentic review comment chat (experimental)

• We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
  - To enable this feature, set early_access to true under in the settings.

---

📜 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 9b946fe and 39a56d3.

📒 Files selected for processing (1)

• tests/picker.spec.tsx (2 hunks)

🧰 Additional context used

🧬 Code Definitions (1)

tests/picker.spec.tsx (1)

docs/examples/customize.tsx (1) (1)

• render (103-175)

🔇 Additional comments (1)

tests/picker.spec.tsx (1)

1375-1398: 良好的测试用例，验证了面板语义样式功能

这个测试用例很好地验证了 PickerPanel 组件对语义样式和类名的支持功能。测试检查了自定义的 popupBody 和 popupContent 语义名称是否正确应用于相应的 DOM 元素，包括类名和样式属性。

测试结构清晰，包含了清晰的断言来验证功能是否按预期工作。这与其他测试保持一致的风格，使代码库的测试更加统一和可维护。

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.79%. Comparing base (001190e) to head (39a56d3).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #923   +/-   ##
=======================================
  Coverage   98.79%   98.79%           
=======================================
  Files          64       64           
  Lines        2652     2654    +2     
  Branches      732      739    +7     
=======================================
+ Hits         2620     2622    +2     
  Misses         29       29           
  Partials        3        3           

☔ 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.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.