更新必填标签样式，支持左右位置

[summer-like-coding]

fix(calendar): 修正范围选择测试中的日期
style(formitem): 更新必填标签样式，支持左右位置

🤔 这个变动的性质是？

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

🔗 相关 Issue

issue地址：#3212

💡 需求背景和解决方案

1. 修复starPosition="right"时，星标位置错误，不显示 的问题
2. 增加一个class样式用于承接 startPosition为right的情况

// 文件为formitem.tsx
    const renderStar = (required || requiredInRules) && (
      <div className={`nut-form-item-label-required-${starPosition} required`}>
        *
      </div>
    )

// 文件为formitem.scss
  &-label-required-left {
    color: $form-item-required-color;
    margin-right: $form-item-required-margin-right;
    display: block;
    position: absolute;
    left: -0.8em;
  }
  &-label-required-right {
    color: $form-item-required-color;
    margin-right: $form-item-required-margin-right;
    display: block;
    // position: absolute;
    // left: -0.8em;
  }

Open

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

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

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• fork仓库代码是否为最新避免文件冲突
• Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

• 新功能

  • 表单组件现支持通过 starPosition 属性自定义必填星号的位置，可选择左侧或右侧显示。

• 样式

  • 优化表单项必填星号的样式，区分左侧和右侧对齐，提升视觉一致性。

• 测试

  • 新增和调整了表单及日历组件的相关测试用例，以覆盖星号位置和日历选择逻辑的变化。

[coderabbitai]

Walkthrough

本次变更主要调整了表单项组件中必填星号的渲染方式和样式，使其根据 starPosition 属性动态切换左右样式。相应的测试用例和样式文件也进行了同步更新。此外，修正了日历组件测试用例中日期的期望值，package.json 文件仅添加了结尾换行符。

Changes

文件/路径分组	变更摘要
package.json	仅在文件末尾添加了换行符。
src/packages/calendar/tests/calendar.spec.tsx	日历组件“range select event when click item”测试期望的日期值上调。
src/packages/form/tests/form.spec.tsx	表单必填星号测试改为断言左右不同类名，并新增 starPosition="right" 测试。
src/packages/formitem/formitem.scss	拆分必填星号样式为左右两类，调整右侧样式定位，并为右侧标签加定位上下文。
src/packages/formitem/formitem.tsx src/packages/formitem/formitem.taro.tsx	必填星号渲染时动态根据 starPosition 切换类名，星号单独换行。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Form
    participant FormItem

    User->>Form: 渲染 Form，设置 starPosition
    Form->>FormItem: 传递 starPosition
    FormItem->>FormItem: 根据 starPosition 渲染必填星号（左/右类名）

Loading

Suggested reviewers

• oasis-cloud

Poem

🐇
星号跳左又跳右，
表单小兔舞姿柔。
日历日期向前走，
样式分明更讲究。
代码世界添新秀！

Tip

⚡️ Faster reviews with caching

• CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

---

📜 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 5445108 and 98ec0f2.

📒 Files selected for processing (6)

• package.json (1 hunks)
• src/packages/calendar/__tests__/calendar.spec.tsx (1 hunks)
• src/packages/form/__tests__/form.spec.tsx (1 hunks)
• src/packages/formitem/formitem.scss (2 hunks)
• src/packages/formitem/formitem.taro.tsx (1 hunks)
• src/packages/formitem/formitem.tsx (1 hunks)

🔇 Additional comments (9)

package.json (1)

223-223: 整洁的文件格式化

添加了文件末尾的换行符，这是一个良好的代码规范，确保每个文件以换行符结束。

src/packages/calendar/__tests__/calendar.spec.tsx (2)

292-292: 修正日历范围选择的测试期望值

将测试中的期望值从 '10' 改为 '14'，与组件实际行为保持一致。

---

300-300: 修正日历范围选择的第二个日期期望值

将测试中的第二个日期期望值从 '11' 改为 '15'，修正了测试用例与实际行为的匹配。

src/packages/form/__tests__/form.spec.tsx (2)

172-174: 更新必填标签样式类名测试

将测试中的选择器从 .nut-form-item-label-required 更新为 .nut-form-item-label-required-left，与组件实现的动态必填标签样式保持一致。

---

176-186: 添加右侧必填标签位置测试

新增测试用例验证 starPosition="right" 属性的行为，确保组件正确应用 .nut-form-item-label-required-right 类样式。这与PR的目标（支持必填标签左右位置）完全一致。

src/packages/formitem/formitem.taro.tsx (1)

223-225: 实现必填标签位置的动态样式

将必填标签（星号）的类名从固定的 "nut-form-item-label-required required" 更改为动态的 "nut-form-item-label-required-${starPosition} required"，这样就能根据 starPosition 上下文值应用不同的样式，支持左右两种位置显示。

这个修改解决了 Issue #3212 中提到的问题，即设置 starPosition="right" 时必填星号显示不正确的问题。

src/packages/formitem/formitem.tsx (1)

222-224: 使用动态类名来支持星号的左右位置

通过使用 starPosition 动态构建类名，现在可以根据传入的位置属性正确调整必填星号的位置和样式。这个改动使组件更加灵活，能够满足不同的设计需求。

src/packages/formitem/formitem.scss (2)

21-34: 必填星号样式分离为左右两种情况

将必填星号的样式分为 label-required-left 和 label-required-right 两个类，使其可以根据 starPosition 属性实现不同的定位效果：

• 左侧星号：使用绝对定位和负向左偏移
• 右侧星号：去除绝对定位和左偏移，使其在正常文档流中显示

这样的分离使布局更加清晰，逻辑更加合理。

---

139-139: 为右对齐标签添加相对定位

为 .nut-form-item-label-right 添加 position: relative 是一个重要的改进，这为其内部的绝对定位元素（如右侧的必填星号）建立了定位上下文。没有这个属性，绝对定位的子元素可能会相对于其他祖先元素进行定位，导致布局不正确。

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

Support

Need help? Create a ticket on our support page 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 for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in 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.