Conversation
## Walkthrough
本次变更主要围绕 ActionSheet 组件展开，涵盖了组件本身、样式、演示示例及相关文档。ActionSheet 组件新增了 position 属性，支持顶部弹出（top）和底部弹出（bottom），并根据位置动态调整弹窗样式与交互。样式文件对标题、列表项、取消按钮等进行了重构和优化，采用了更灵活的布局和边框设定。演示示例同步更新以展示新特性，文档则修正和补充了 CSS 变量的默认值及说明。配置文件中调整了 ActionSheet 组件的版本号。
## Changes
| 文件/路径分组 | 变更摘要 |
|------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| src/packages/actionsheet/actionsheet.tsx<br>src/packages/actionsheet/actionsheet.taro.tsx | ActionSheet 组件新增 position 属性（默认 bottom），支持顶部弹出，动态调整样式、交互及关闭图标；选项项边框逻辑优化。|
| src/packages/actionsheet/actionsheet.scss | 样式重构：优化布局、边距、边框，新增标题、关闭按钮等样式，提升一致性与灵活性。 |
| src/packages/actionsheet/demo.tsx<br>src/packages/actionsheet/demo.taro.tsx | 演示页引入 Demo7，调整 Demo6 标题顺序，便于展示新特性。 |
| src/packages/actionsheet/demos/h5/demo1.tsx<br>demo2.tsx<br>demo3.tsx<br>demo4.tsx<br>demo5.tsx<br>demo6.tsx<br>demo7.tsx | H5 演示组件内容、组件名、选项数据、UI 展示方式等同步调整，突出 position、新样式与自定义内容能力。 |
| src/packages/actionsheet/demos/taro/demo1.tsx<br>demo2.tsx<br>demo3.tsx<br>demo5.tsx<br>demo6.tsx<br>demo7.tsx | Taro 端演示组件内容、组件名、选项数据、UI 展示方式等同步调整，突出 position、新样式与自定义内容能力。 |
| src/packages/actionsheet/doc.md<br>doc.en-US.md<br>doc.taro.md<br>doc.zh-TW.md | 文档更新：CSS 变量默认值、边框、圆角、对齐等描述与实际样式保持一致。 |
| src/styles/variables.scss<br>variables-jrkf.scss<br>variables-jmapp.scss | SCSS 变量调整：移除旧边框色，新增取消按钮边框变量，调整圆角、对齐、底部边框、行高等默认值。 |
| src/config.json | 配置调整：ActionSheet 组件的 "v15" 版本号由 2 调整为 1。 |
| src/packages/popup/popup.scss<br>src/packages/popup/popup.tsx<br>src/packages/popup/popup.taro.tsx | 弹窗标题样式及结构调整，新增顶部和底部标题类，简化标题渲染逻辑，支持动态位置对应的样式类。 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant 用户
participant ActionSheet
participant Popup
participant CloseIcon
用户->>ActionSheet: 打开（传入 position）
ActionSheet->>Popup: 根据 position 设置弹出位置
Popup-->>ActionSheet: 渲染内容
alt position = top
ActionSheet->>CloseIcon: 显示关闭按钮
用户->>CloseIcon: 点击关闭
CloseIcon->>ActionSheet: 触发 onCancel
end
用户->>ActionSheet: 选择选项/取消
ActionSheet->>ActionSheet: 关闭弹窗Possibly related PRs
Suggested reviewers
Poem
|
github-actions
bot
added
action:review
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3213 +/- ##
=============================================
+ Coverage 86.84% 87.15% +0.31%
=============================================
Files 291 291
Lines 19205 19230 +25
Branches 2917 2928 +11
=============================================
+ Hits 16678 16760 +82
+ Misses 2522 2465 -57
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
src/packages/actionsheet/doc.taro.md (1)
94-98: CSS变量默认值更新CSS变量文档已更新，反映了组件样式的新默认值：
- 圆角从
0改为$radius-l- 取消按钮边框样式更新为
0.5px solid #c2c4cc- 列表项文本对齐从
center改为left- 添加了列表项底部边框
0.5px solid #c2c4cc- 行高从
24px增加到52px这些更新使文档与实际组件样式保持一致，便于开发者理解和自定义组件样式。
不过注意在第95行有一个不必要的逗号，可以去除：
-| \--nutui-actionsheet-cancel-border, | 取消位置的border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-cancel-border | 取消位置的border | `0.5px solid #c2c4cc` |src/packages/actionsheet/demos/h5/demo7.tsx (1)
6-6: 考虑使用更精确的类型定义当前使用
Record<string, string | boolean>[]作为options的类型。建议使用更精确的接口类型定义，可以更好地表达选项的结构。- const options: Record<string, string | boolean>[] = [ + const options: Array<{ + title: string; + disabled?: boolean; + }> = [这样可以提供更好的类型检查和代码提示。
src/packages/actionsheet/demos/taro/demo6.tsx (1)
46-56: 建议将样式对象抽取到组件外部定义了菜单项的样式对象，但建议将这些样式定义移至组件外部，或者考虑使用 className 和 SCSS 来管理样式，以提高代码可维护性。
- const itemStyle: CSSProperties = { - width: 50, - height: 72, - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'center', - marginTop: 0, - marginBottom: 16, - marginLeft: 16, - marginRight: 16, - }然后在组件外部定义：
const MENU_ITEM_STYLE: CSSProperties = { width: 50, height: 72, display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginTop: 0, marginBottom: 16, marginLeft: 16, marginRight: 16, };src/packages/actionsheet/demos/h5/demo6.tsx (3)
4-4: 组件命名不符合文件名组件名从
Demo6改为Demo，但文件名仍为demo6.tsx，建议保持一致以避免混淆。-const Demo = () => { +const Demo6 = () => {
45-52: 样式定义可以改进使用了内联样式对象，但
margin属性的写法不同于Taro版本，可以统一为更加简洁的形式。- const itemStyle: CSSProperties = { - width: 50, - height: 72, - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'center', - margin: '0 16px 16px', - } + const itemStyle: CSSProperties = { + width: 50, + height: 72, + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + marginTop: 0, + marginRight: 16, + marginBottom: 16, + marginLeft: 16, + }
66-81: 自定义内容与Taro版本有细微差异H5版本的自定义内容实现与Taro版本略有不同，特别是在样式应用方式上。建议两个版本保持一致以简化维护。
- <div - key={index} - style={{ - ...itemStyle, - }} - > + <div key={index} style={itemStyle}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (25)
src/packages/actionsheet/actionsheet.scss(3 hunks)src/packages/actionsheet/actionsheet.taro.tsx(4 hunks)src/packages/actionsheet/actionsheet.tsx(4 hunks)src/packages/actionsheet/demo.taro.tsx(2 hunks)src/packages/actionsheet/demo.tsx(2 hunks)src/packages/actionsheet/demos/h5/demo1.tsx(2 hunks)src/packages/actionsheet/demos/h5/demo2.tsx(1 hunks)src/packages/actionsheet/demos/h5/demo3.tsx(2 hunks)src/packages/actionsheet/demos/h5/demo4.tsx(2 hunks)src/packages/actionsheet/demos/h5/demo5.tsx(2 hunks)src/packages/actionsheet/demos/h5/demo6.tsx(1 hunks)src/packages/actionsheet/demos/h5/demo7.tsx(1 hunks)src/packages/actionsheet/demos/taro/demo1.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo2.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo3.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo5.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo6.tsx(1 hunks)src/packages/actionsheet/demos/taro/demo7.tsx(1 hunks)src/packages/actionsheet/doc.en-US.md(1 hunks)src/packages/actionsheet/doc.md(1 hunks)src/packages/actionsheet/doc.taro.md(1 hunks)src/packages/actionsheet/doc.zh-TW.md(1 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/packages/actionsheet/demos/h5/demo3.tsx (2)
src/packages/actionsheet/actionsheet.taro.tsx (1)
ActionSheet(20-110)src/packages/actionsheet/actionsheet.tsx (1)
ActionSheet(19-109)
src/packages/actionsheet/demos/h5/demo5.tsx (1)
src/packages/actionsheet/actionsheet.tsx (1)
ActionSheet(19-109)
src/packages/actionsheet/demos/h5/demo2.tsx (1)
src/packages/actionsheet/actionsheet.tsx (1)
ActionSheet(19-109)
src/packages/actionsheet/demos/taro/demo6.tsx (1)
src/packages/actionsheet/actionsheet.taro.tsx (1)
ActionSheet(20-110)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (84)
src/styles/variables.scss (5)
662-665: 修改了 ActionSheet 取消按钮的边框样式定义新增了
$actionsheet-cancel-border变量，设置了具体的边框样式0.5px solid #c2c4cc，取代了之前的$actionsheet-border-color变量。这样能更精确地控制取消按钮的边框样式。
666-669: 更新了 ActionSheet 的圆角设置将
$actionsheet-border-radius默认值修改为$radius-l，使其与设计系统保持一致，增强了组件视觉的统一性。
670-673: 修改了 ActionSheet 项目的文本对齐方式将
$actionsheet-item-text-align的值从center更改为left，使选项文本左对齐，提升了可读性和现代界面设计感。
674-677: 修改了 ActionSheet 项目的底部边框样式为
$actionsheet-item-border-bottom设置了0.5px solid #c2c4cc的具体值，增强了项目之间的视觉分隔，提高了界面层次感。
678-681: 增加了 ActionSheet 项目的行高将
$actionsheet-item-line-height从24px调整为52px，为选项提供了更宽敞的点击区域，提升了移动端的用户体验。src/packages/actionsheet/demo.tsx (2)
10-10: 添加了新的 Demo7 示例导入导入了新的
Demo7组件，扩展了 ActionSheet 的示例范围，丰富了组件文档。
46-47: 添加了自定义 key 的演示示例增加了标题和
Demo7组件，展示了 ActionSheet 组件支持自定义 key 的功能，使开发者能更灵活地使用该组件。src/packages/actionsheet/demo.taro.tsx (2)
13-13: 添加了 Taro 环境下的 Demo7 示例导入导入了 Taro 版本的
Demo7组件，保持了 H5 和小程序环境下示例的一致性。
50-51: 添加了 Taro 环境下的自定义 key 演示增加了标题和 Taro 版本的
Demo7组件，确保了组件在不同平台上的功能一致性和文档完整性。src/packages/actionsheet/demos/h5/demo4.tsx (2)
4-4: 统一了组件命名规范将组件名从
Demo4修改为Demo，符合内部组件命名规范，提高了代码的一致性。
33-33: 更新了导出的组件名称将默认导出从
Demo4更改为Demo，与组件名保持一致，确保了模块导入导出的一致性。src/packages/actionsheet/demos/taro/demo1.tsx (2)
9-18: 更新了 ActionSheet 的选项文本将选项名称从"权限设置"、"重命名"、"删除"更改为"分享给朋友"、"添加到收藏夹"、"复制商品链接"，使示例更符合实际使用场景，提高了示例的实用性。
33-39: 添加了取消按钮文本并移除了标题添加了
cancelText="取消"属性，同时移除了之前的title属性，调整了组件的使用方式，使其更符合最新的设计规范。src/packages/actionsheet/demos/taro/demo2.tsx (4)
10-11: 选项数据更新得当选项数据从之前的系统操作类型调整为社交分享类型选项，更符合实际用户场景，提升了示例的实用性。
Also applies to: 13-14
23-23: Cell 标签更新与功能一致标签从"展示取消按钮"更改为"展示标题"，现在与实际演示的功能保持一致，减少用户困惑。
29-30: 添加标题属性新增了
title="标题"属性，与 Cell 标签的说明对应，展示了 ActionSheet 的标题功能。
34-35: 属性位置调整将
cancelText属性移至onCancel之后，提高了代码的一致性和可读性。src/packages/actionsheet/demos/taro/demo3.tsx (4)
8-8: 简化选项数组声明移除了类型注解，使代码更简洁。这样的简化有助于提高可读性，但确保类型安全仍然很重要。
10-11: 选项内容更新选项内容已更新为更符合用户分享场景的选项，与其他示例保持一致，有助于用户理解组件的多种用例。
Also applies to: 13-14
23-23: Cell 标签更新匹配新功能将标签从"展示描述信息"更改为"顶部弹出"，清晰地表明了此示例的主要功能是展示顶部弹出的 ActionSheet。
29-30: 添加位置属性展示新功能添加
position="top"属性，展示了 ActionSheet 新增的顶部弹出功能，这是此 PR 的核心功能之一。src/packages/actionsheet/demos/h5/demo1.tsx (4)
4-4: 组件命名简化将组件名从
Demo1更改为Demo，统一了命名风格，符合其他示例的命名规范。
9-10: 选项内容更新为更贴近用户场景的示例选项从系统操作类型（"权限设置", "重命名", "删除"）调整为更常见的社交和分享类型选项（"分享给朋友", "添加到收藏夹", "复制商品链接"），使示例更贴近实际应用场景。
Also applies to: 12-13, 15-16
35-35: 添加取消按钮文本属性新增
cancelText="取消"属性，明确指定取消按钮的文本，增强了示例的完整性和可用性。
40-40: 导出语句更新更新导出语句以匹配新的组件名称，保持代码一致性。
src/packages/actionsheet/doc.en-US.md (1)
85-89:Details
✅ Verification successful
CSS 变量默认值更新
CSS 变量的默认值已更新，与组件样式的实际变化保持一致：
- 边框圆角从
0更新为$radius-l，提供更现代的视觉效果- 新增
--nutui-actionsheet-cancel-border替代旧的边框颜色变量- 项目文本对齐从
center变为left，改善了可读性- 项目底部边框从
none变为0.5px solid #c2c4cc，增强了视觉分隔- 行高从
24px增加到52px，提供更舒适的点击区域这些更新很好地反映了组件的视觉变化。
请确认中文文档（doc.md 或 doc.zh-CN.md）中的 CSS 变量是否也已同步更新，以保持文档的一致性。
🏁 Script executed:
#!/bin/bash # 检查中文文档是否存在并包含更新后的 CSS 变量 echo "检查中文文档中的 CSS 变量更新..." find src/packages/actionsheet -name "doc*.md" | grep -v "en-US" | xargs grep -l "nutui-actionsheet-cancel-border" || echo "⚠️ 警告：未在中文文档中找到更新后的 CSS 变量"Length of output: 269
中文文档已同步更新
经检查，以下文件中已包含更新后的 CSS 变量：
- src/packages/actionsheet/doc.md
- src/packages/actionsheet/doc.taro.md
- src/packages/actionsheet/doc.zh-TW.md
无需额外操作，文档保持一致。
src/packages/actionsheet/demos/h5/demo3.tsx (4)
4-4: 组件名称更改为更简洁的名称将组件名从
Demo3更改为Demo使代码更简洁。这是一个好的修改，与文件命名保持一致性。
7-14: 选项列表简化和内容更新选项列表已简化并更新了名称，移除了第三个选项并更新了选项名称为更实用的文本。内容更改合理且符合示例演示需求。
24-24: Cell文本更新以匹配新功能将Cell文本从"展示描述信息"更改为"顶部弹出"，更准确地反映了示例的功能。这个更改使示例目的更明确。
27-34: 添加position属性以支持顶部弹出添加了
position="top"属性以演示ActionSheet从顶部弹出的新功能。同时移除了不再需要的description和cancelText属性。这些更改准确展示了组件的新功能。src/packages/actionsheet/doc.md (1)
94-98: CSS变量默认值更新CSS变量文档已更新，反映了组件样式的新默认值：
- 圆角从
0改为$radius-l- 取消按钮边框样式更新为
0.5px solid #c2c4cc- 列表项文本对齐从
center改为left- 添加了列表项底部边框
0.5px solid #c2c4cc- 行高从
24px增加到52px这些更新使文档与实际组件样式保持一致，确保开发者能正确理解组件的默认外观。
src/packages/actionsheet/demos/h5/demo7.tsx (1)
1-39: 添加自定义key示例新增了演示如何通过
optionKey自定义选项键名的示例代码，展示了：
- 使用自定义属性名
title代替默认的name- 通过
optionKey映射属性名- 包含一个禁用状态的选项
代码结构清晰，逻辑完整，为用户提供了有价值的使用示例。
src/packages/actionsheet/demos/h5/demo2.tsx (5)
4-4: 组件名称更改更加简洁将组件名从 Demo2 改为 Demo 使代码更加简洁，符合单一演示文件的命名惯例。
8-14: 选项内容更新更符合实际使用场景选项数组中的内容从之前更改为"分享给朋友"和"添加到收藏夹"，这些更贴近实际应用场景，使示例更有价值。
24-24: Cell 标签文本更改更符合演示内容将 Cell 标签从"展示取消按钮"改为"展示标题"，更准确地反映了该演示的重点是展示 ActionSheet 的标题功能，而不仅仅是取消按钮。
28-33: 添加标题属性并调整属性顺序
- 添加了
title="标题"属性，与新的 Cell 标签内容保持一致- 将
cancelText属性移到onCancel之后，改善了属性的逻辑分组这些变更使示例更清晰地展示了 ActionSheet 组件的标题功能，并使属性排序更加合理。
38-38: 导出语法更新更新了组件导出语法，与其他示例保持一致性。
src/packages/actionsheet/doc.zh-TW.md (1)
94-98: CSS 变量默认值更新对 ActionSheet 组件的 CSS 变量文档进行了以下更新：
- 圆角值从之前值更改为
$radius-l- 取消按钮边框变量由
--nutui-actionsheet-border-color更改为更具体的--nutui-actionsheet-cancel-border，值为0.5px solid #c2c4cc- 列表项文本对齐从居中改为左对齐
- 列表项底部边框从无边框改为
0.5px solid #c2c4cc- 列表项行高增加到
52px这些更新使文档与组件的实际默认样式保持同步，提高了文档准确性。
src/packages/actionsheet/demos/h5/demo5.tsx (5)
2-2: 增加 Image 组件导入添加了 Image 组件的导入，以支持在 ActionSheet 中显示图标，增强了自定义内容的展示效果。
4-6: 组件名称简化并添加布局样式
- 将组件名从 Demo5 简化为 Demo
- 添加了
itemStyle对象，使用 flexbox 布局来标准化项目样式这些更改使代码更加简洁并提高了自定义内容的布局一致性。
10-10: 更新示例描述文本将 Cell 标签从"自定义内容"更改为"自定义内容1"，与其他示例保持区分。
20-38: 增强自定义内容展示将简单的文本内容替换为更丰富的布局：
- 使用 flexbox 布局的容器
- 添加了图标和文本的组合
- 为第一个项目添加了底部边框
- 设置了合理的间距和对齐方式
这种更新大大提升了示例的实用性，展示了在 ActionSheet 中实现复杂自定义布局的能力。
42-42: 更新导出语法更新了组件导出语法，与其他示例保持一致性。
src/packages/actionsheet/demos/taro/demo5.tsx (4)
1-2: 更新导入语句
- 简化了 React 导入
- 增加了 Image 组件的导入，以支持在 ActionSheet 中显示图标
这些更改使导入更加聚焦于实际使用的组件。
7-8: 添加布局样式对象添加了
itemStyle对象，使用 flexbox 布局来标准化项目样式，这与 H5 版本的实现保持一致，确保了跨平台的一致体验。
12-12: 更新示例描述文本将 Cell 标签从"自定义内容"更改为"自定义内容1"，与 H5 版本保持一致并与其他示例区分。
22-39: 增强自定义内容展示将简单的文本内容替换为更丰富的布局：
- 使用 Taro 的 View 组件和 flexbox 布局
- 添加了图标和文本的组合
- 为第一个项目添加了底部边框
- 设置了合理的间距和对齐方式
这种更新提升了在小程序环境中 ActionSheet 组件的展示效果，并与 H5 版本保持一致的用户体验。
src/packages/actionsheet/demos/taro/demo7.tsx (1)
1-40: 新的Taro演示示例展示了自定义key的使用这个新增的示例展示了ActionSheet组件如何使用自定义的optionKey进行选项映射，很好地补充了组件的使用文档。代码实现清晰简洁，正确展示了组件的基本用法，包括显示控制、选项配置和事件处理。
src/packages/actionsheet/actionsheet.taro.tsx (9)
3-3: 引入Close图标组件以支持顶部关闭功能正确引入了Close图标组件，为顶部弹出模式提供关闭按钮支持。
16-16: 添加position默认属性值为组件添加默认的position属性，默认值为'bottom'，符合组件常规使用场景。
36-36: 在参数列表中添加position属性正确在解构参数中添加position属性，使其可在组件内部使用。
60-60: 将position属性传递给Popup组件将ActionSheet的position属性正确传递给底层Popup组件，实现弹出位置的控制。
62-62: 根据position属性动态设置类名动态设置组件类名，基于position属性区分不同位置的样式，实现了多端适配的样式需求。
64-64: 简化onCancel调用逻辑使用可选链操作符
?.优化了onCancel函数的调用，使代码更简洁。
66-67: 根据position属性控制关闭按钮显示当position为'top'时显示关闭按钮，并使用Close图标组件，增强了用户体验。
70-72: 根据position属性设置标题样式根据position值动态设置标题类名，使标题样式能够根据不同的弹出位置呈现不同的外观。
79-79: 为列表项添加边框样式为除最后一项外的所有选项添加边框样式类，提升了视觉分隔效果，使界面更加清晰。
src/packages/actionsheet/actionsheet.tsx (9)
2-2: 引入Close图标组件正确引入了Close图标组件，保持与Taro版本的功能一致性。
15-15: 添加position默认属性为Web版本组件添加默认的position属性，确保与Taro版本保持一致的API。
35-35: 在参数列表中添加position属性正确在解构参数中添加position属性，与Taro版本保持统一。
59-59: 将position属性传递给Popup组件将ActionSheet的position属性正确传递给底层Popup组件，确保跨平台功能一致性。
61-61: 根据position属性动态设置类名动态设置组件类名，保持与Taro版本相同的样式适配逻辑。
63-63: 简化onCancel调用逻辑使用可选链操作符简化代码，与Taro版本保持一致的代码风格。
65-66: 根据position属性控制关闭按钮显示根据position属性条件性地显示关闭按钮，实现与Taro版本一致的用户体验。
69-71: 根据position属性设置标题样式使用position属性动态控制标题样式，保持与Taro版本相同的UI表现。
78-78: 为列表项添加边框样式为除最后一项外的所有选项添加边框样式类，确保Web版本与Taro版本有一致的视觉效果。
src/styles/variables-jrkf.scss (4)
785-788: 添加ActionSheet取消按钮边框变量添加了
$actionsheet-cancel-border变量，设置取消按钮的边框样式，值为0.5px solid #c2c4cc，这提供了更清晰的视觉分隔。
795-795: 修改ActionSheet项目文本对齐方式将
$actionsheet-item-text-align变量的值从center修改为left，使文本左对齐，提升了可读性和现代UI设计风格。
799-799: 更新ActionSheet项目底部边框样式将
$actionsheet-item-border-bottom变量的值更新为0.5px solid #c2c4cc，添加了边框分隔线，增强了视觉层次感。
803-803: 增加ActionSheet项目行高将
$actionsheet-item-line-height变量的值从24px增加到52px，提供了更宽敞的点击区域，改善了移动端用户体验。src/packages/actionsheet/demos/taro/demo6.tsx (4)
1-2: 引入组件更加清晰导入了必要的组件和类型，特别是添加了
Image组件用于展示菜单图标，符合新的菜单项设计需求。
7-43: 优化了菜单项数据结构将简单的文本选项改为包含图片URL和文本的对象数组，使菜单更加丰富和直观。这种数据结构更适合多端应用的视觉体验。
61-66: 合理使用了新增的 position 属性顶部弹出的ActionSheet需要设置
position="top"属性，配合标题展示更加合理。这是本次多端适配的重要改进点。
69-80: 自定义内容实现得当使用了灵活的布局来替代之前的选项列表，通过遍历
menuItems数组动态生成包含图标和文本的菜单项，效果更佳。src/styles/variables-jmapp.scss (3)
705-708: 添加了取消按钮边框变量新增了
$actionsheet-cancel-border变量，用于控制取消按钮的边框样式，增强了组件的可定制性。
717-720: 更新了项目边框样式将项目底部边框从
none改为0.5px solid #c2c4cc，增加了视觉分隔效果，提高了界面的整洁度。
721-724: 增加了行高将
$actionsheet-item-line-height从24px增加到52px，为内容提供了更多空间，特别是在显示图标和文本时，提升了可读性和交互体验。src/packages/actionsheet/demos/h5/demo6.tsx (3)
1-2: 引入组件和类型定义正确导入了所需组件和类型，包括新增的
Image组件用于显示菜单图标。
7-43: 使用了丰富的菜单项结构定义了包含图片和文本的菜单项数组，代替了简单的文本选项，使界面更加直观和美观。
60-65: 恰当使用了顶部弹出位置设置
position="top"启用了顶部弹出的ActionSheet，与整体UI设计风格一致。src/packages/actionsheet/actionsheet.scss (4)
5-10: 增强了组件布局控制添加了盒模型设置、内边距和宽度控制，并为底部弹出的情况设置了特定的底部内边距，提高了组件的适应性和美观度。
15-31: 新增了顶部和底部标题样式为支持不同位置的ActionSheet，添加了对应的标题样式。顶部标题采用space-between布局以容纳关闭图标，增强了用户体验。
49-54: 添加了条件性边框样式新增了
item-border类来控制项目之间的边框，通过条件应用确保了UI的一致性和精细控制。注意增加了鸿蒙系统的特殊处理。
80-93: 改进了取消按钮的样式更新了取消按钮的样式，使用Flex布局居中内容，并设置了固定高度、字体大小和边距，使其与整体设计更加协调。
xiaoyatong
left a comment
xiaoyatong
left a comment
There was a problem hiding this comment.
1、几个border的设计规范 没找到。
2、其他主题不要改动。
3、title 要复用 popup的，popup框架中不支持的，在 popup 中修改；
4、升级文档没有
5、增加顶部展示的单测
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/actionsheet/actionsheet.tsx (1)
71-73: 建议删除注释代码应该删除注释掉的代码而不是保留，保持代码库的整洁性。
- {/* {title && ( - <div className={`${classPrefix}-${position}-title`}>{title}</div> - )} */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/actionsheet/actionsheet.scss(3 hunks)src/packages/actionsheet/actionsheet.taro.tsx(5 hunks)src/packages/actionsheet/actionsheet.tsx(4 hunks)src/packages/popup/popup.taro.tsx(1 hunks)src/packages/popup/popup.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/packages/popup/popup.tsx
- src/packages/popup/popup.taro.tsx
- src/packages/actionsheet/actionsheet.taro.tsx
- src/packages/actionsheet/actionsheet.scss
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/actionsheet/actionsheet.tsx
[warning] 65-65: src/packages/actionsheet/actionsheet.tsx#L65
Added line #L65 was not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (7)
src/packages/actionsheet/actionsheet.tsx (7)
2-3: 新增导入项使用合理
Close图标仅在position === 'top'时使用，classNames工具用于条件样式处理，两个导入项都有明确的使用场景。
16-16: Position 属性默认值设置合理设置
position: 'bottom'作为默认值保持了向后兼容性，符合 ActionSheet 组件的常见使用场景。
58-58: 采用 Popup 组件处理标题符合架构优化建议将
title属性传递给Popup组件处理，很好地响应了之前 xiaoyatong 的评论建议"复用popup 能力，框架布局统一到 popup"。
63-63: 动态 className 构造支持位置相关样式通过
${classPrefix}-${position}构造动态 className，为不同位置的 ActionSheet 提供了样式定制能力。
67-68: 顶部位置的可关闭性设计合理当
position === 'top'时启用关闭按钮符合用户体验预期，顶部弹出的 ActionSheet 通常需要明确的关闭交互。
80-83: classNames 使用响应了代码改进建议使用
classNames工具进行条件样式处理，很好地响应了 oasis-cloud 之前的建议"可以改成 classNames 的方式"。边框样式的条件逻辑清晰合理。
65-65:Details
❓ Verification inconclusive
可选链调用改进了代码安全性
使用可选链
onCancel?.()替代条件判断是更简洁的防御性编程实践。但需要注意测试覆盖。静态分析工具显示此行缺少测试覆盖。请确保为这个回调场景添加相应的单元测试。
🏁 Script executed:
#!/bin/bash # 检查 ActionSheet 组件的测试文件中是否覆盖了 onCancel 回调的测试场景 rg -A 10 -B 5 "onCancel" src/packages/actionsheet/__tests__/Length of output: 136
请确认 ActionSheet onCancel 回调的测试覆盖
检查过程中未发现
src/packages/actionsheet/__tests__目录，无法判断是否已覆盖该回调场景。请手动核实并补充对应的单元测试。
- 查看
src/packages/actionsheet或全项目中是否存在 ActionSheet 的测试文件- 在测试中模拟触发
onCancel回调，并验证其预期行为是否正确🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 65-65: src/packages/actionsheet/actionsheet.tsx#L65
Added line #L65 was not covered by tests
3 participants
Summary by CodeRabbit
新功能
样式
文档
示例