feat: enhance SafeArea with className/style props and constant() iOS fallback

[bigbigDreamer]

🤔 这个变动的性质是？

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

🔗 相关 Issue

💡 需求背景和解决方案

1. Use the legacy constant(safe-area-inset-*) function as a fallback before env(safe-area-inset-*) so that the SafeArea component works correctly on older iOS versions that only support constant().

2. Update the SafeArea component to forward `className` and `style` to its root element, allowing external customization (for example, adding extra spacing or custom background styles for specific devices/browsers).

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

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

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

Summary by CodeRabbit

• 功能改进
  • SafeArea 组件现支持通过 className 和 style 自定义外观，提升灵活性
  • 改进了 props 转发与位置类名的处理，增强跨平台兼容性与可配置性
• 样式
  • 增加对 constant(safe-area-inset-*) 的安全区填充计算，改善部分环境下的安全区适配效果

[coderabbitai]

Walkthrough

新增对安全区域的常数型 inset 支持（使用 constant()），并在 Web/Taro SafeArea 组件中解构并透传 className、style、position 等 props 到根元素，保留原有功能与渲染结构。

Changes

内聚体 / 文件(s)	变更摘要
样式增强 src/packages/safearea/safearea.scss	在现有 env() 计算之外，新增基于 constant() 的 padding-top 与 padding-bottom 计算，均乘以 var(--nutui-safe-area-multiple, 1)
Web 组件调整 src/packages/safearea/safearea.tsx	解构 props 为 className, style, position, ...rest；将 rest 和 style 透传到根 div；使用本地 position 构建 className，并包含外部 className
Taro 组件调整 src/packages/safearea/safearea.taro.tsx	与 Web 组件等效的 props 解构与透传（className, style, position, ...rest）；在根 View 上应用 rest、style、合并 className；设置 SafeArea.displayName = 'NutSafeArea'

Sequence Diagram(s)

sequenceDiagram
    participant App as 使用者组件
    participant SafeArea as SafeArea (Web/Taro)
    participant DOM as 根元素 (div/View)

    Note over App,SafeArea: 渲染流程（高层）
    App->>SafeArea: 传入 props (className, style, position, children, ...)
    SafeArea->>SafeArea: 解构 props，合并 className 与 position
    SafeArea->>DOM: 透传 `...rest`，应用 `style` 和 合并后的 className
    DOM-->>App: 渲染包含 children 的根元素

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 分钟

• 需重点检查：
  • SCSS 中同时使用 constant() 与 env() 的兼容性与降级行为
  • var(--nutui-safe-area-multiple) 的默认值与预期缩放效果
  • Taro 与 Web 组件对 props 透传的一致性和未破坏现有行为

Possibly related PRs

• fix(navbar): safearea displays abnormal when safeAreaInsetTop has been set true #2632：与 SafeArea 组件及其 SCSS 更改直接相关，Navbar 的 safe-area 替换实现依赖本变更。

Suggested reviewers

• oasis-cloud

Poem

🐰 新叶落入安全区，
常数护边续新篇，
Props 解构轻又稳，
根元素稳稳抱入怀，
小兔跳跃笑开颜 ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: adding constant() iOS fallback support and forwarding className/style props to SafeArea component.
Description check	✅ Passed	The description follows the template structure with completed checklist items and provides clear explanation of the problem and solution with visual evidence.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 087b893 and 68a1e1d.

📒 Files selected for processing (2)

• src/packages/safearea/safearea.taro.tsx (1 hunks)
• src/packages/safearea/safearea.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/packages/safearea/safearea.taro.tsx
• src/packages/safearea/safearea.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.16%. Comparing base (e9a80b8) to head (68a1e1d).

Additional details and impacted files

@@            Coverage Diff             @@
##           feat_v3.x    #3388   +/-   ##
==========================================
  Coverage      88.15%   88.16%           
==========================================
  Files            291      291           
  Lines          19212    19216    +4     
  Branches        2988     2988           
==========================================
+ Hits           16937    16941    +4     
  Misses          2269     2269           
  Partials           6        6           

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

[bigbigDreamer]

I also have an idea to improve compatibility by using the CSS max() function together with env(safe-area-inset-*). The SafeArea component could expose a configurable fallback value (for example via a CSS variable), and then use max(env(safe-area-inset-bottom), var(--nutui-safe-area-fallback-bottom)) so that on Android browsers which support env() but return 0, we still get a reasonable, non‑zero safe-area inset from the fallback. @xiaoyatong

@supports(padding: max(0px)) {
        padding-bottom: max(40px, env(safe-area-inset-left));  
}