refactor: Image Semantic Structure #381
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次 PR 主要重构图像预览功能的 API，统一命名，将属性和回调从 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant I as Image组件
participant P as Preview组件
participant C as CloseBtn组件
U->>I: 点击图片预览
I->>P: 调用 onOpenChange(true)
P->>C: 渲染关闭按钮及其它操作控件
C->>P: 用户点击关闭 → 触发 onOpenChange(false)
P-->>I: 通知预览已关闭
Possibly related PRs
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
docs/examples/controlled.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/examples/basic.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/examples/actionsRender.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/@rc-component/[email protected] |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #381 +/- ##
==========================================
- Coverage 99.79% 99.39% -0.40%
==========================================
Files 15 17 +2
Lines 486 499 +13
Branches 139 147 +8
==========================================
+ Hits 485 496 +11
- Misses 1 3 +2 ☔ 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: 0
🧹 Nitpick comments (7)
assets/preview.less (1)
9-13: 建议优化遮罩层样式遮罩层样式使用了
rgba(0, 0, 0, 0.3)的背景色。考虑提取这个颜色值为变量，以便在将来可能的暗色主题适配中更方便地调整。+// 在文件顶部定义变量 +@mask-background-color: rgba(0, 0, 0, 0.3); &-mask { position: absolute; - background-color: rgba(0, 0, 0, 0.3); + background-color: @mask-background-color; inset: 0; }src/PreviewGroup.tsx (2)
12-12: 新增GroupPreviewConfig接口的定义与字段扩展。
相较于原本内置的接口，这里增加了current、onOpenChange等属性，便于更灵活地控制预览状态与当前索引。整体设计清晰，推荐在文档中明确说明新属性的用途和回调参数。Also applies to: 14-14, 19-19
62-64: 合并状态以控制预览开关。
逻辑上校验previewOpen的初始值，然后在onChange回调中调用onOpenChange，流程通顺。注意若需更复杂的状态同步，确保外部调用方也同步更新相应状态。README.md (1)
134-135: 修正链接碎片与命名不匹配。
根据静态分析提示，文档内#ToolbarRenderInfoType应更新为小写形式#toolbarrenderinfotype；请在文档中修复以下位置：-| actionsRender | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar | +| actionsRender | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | Customize toolbar |🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
134-134: Link fragments should be valid
Expected: #toolbarrenderinfotype; Actual: #ToolbarRenderInfoType(MD051, link-fragments)
src/Preview/Footer.tsx (1)
26-44:FooterProps接口将操作方法与样式管理合并，易于管理。
拆解必要字段并提供可选样式与 className，可在自定义渲染中灵活拓展，无明显问题。assets/index.less (2)
64-125: 注释掉的预览相关样式代码
从行 64 至 125，大量与旧预览样式相关的代码已被注释。这表明这些样式已被弃用或计划在未来彻底移除。
建议确认注释保留的时长是否符合过渡策略，若确认不再需要，可考虑在后续版本中直接删除，以保持代码洁净。
256-285: 注释掉的 fade 动画代码
行 256 至 285 部分涉及的 fade 过渡动画代码已全部注释。
如果当前组件不再使用这些动画效果，建议在版本迭代期间最终清理这些无效代码；否则，请确保未来有计划重新激活或迁移到新方案。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
tests/__snapshots__/basic.test.tsx.snapis excluded by!**/*.snaptests/__snapshots__/controlled.test.tsx.snapis excluded by!**/*.snaptests/__snapshots__/preview.test.tsx.snapis excluded by!**/*.snaptests/__snapshots__/previewGroup.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (28)
README.md(4 hunks)assets/index.less(3 hunks)assets/preview.less(1 hunks)docs/demo/actionsRender.md(1 hunks)docs/demo/toolbarRender.md(0 hunks)docs/examples/actionsRender.tsx(2 hunks)docs/examples/basic.tsx(2 hunks)docs/examples/controlled.tsx(2 hunks)docs/examples/controlledWithGroup.tsx(3 hunks)docs/examples/fallback.tsx(1 hunks)docs/examples/imageRender.tsx(1 hunks)docs/examples/previewgroup.tsx(1 hunks)package.json(0 hunks)src/Image.tsx(6 hunks)src/Operations.tsx(0 hunks)src/Preview.tsx(0 hunks)src/Preview/CloseBtn.tsx(1 hunks)src/Preview/Footer.tsx(1 hunks)src/Preview/PrevNext.tsx(1 hunks)src/Preview/index.tsx(1 hunks)src/PreviewGroup.tsx(6 hunks)src/hooks/useMouseEvent.ts(5 hunks)src/hooks/useTouchEvent.ts(3 hunks)src/util.ts(0 hunks)tests/basic.test.tsx(2 hunks)tests/controlled.test.tsx(3 hunks)tests/preview.test.tsx(22 hunks)tests/previewGroup.test.tsx(12 hunks)
💤 Files with no reviewable changes (5)
- package.json
- src/util.ts
- docs/demo/toolbarRender.md
- src/Preview.tsx
- src/Operations.tsx
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
README.md
90-90: Link fragments should be valid
Expected: #toolbarrenderinfotype; Actual: #ToolbarRenderInfoType
(MD051, link-fragments)
134-134: Link fragments should be valid
Expected: #toolbarrenderinfotype; Actual: #ToolbarRenderInfoType
(MD051, link-fragments)
🔇 Additional comments (139)
docs/demo/actionsRender.md (1)
1-8: 新增文档 actionsRender.md 符合命名规范这个新增的文档文件很好地遵循了 API 重构的命名规范，将原来的
toolbarRender更新为actionsRender。Markdown 格式正确，前置元数据配置合理。docs/examples/fallback.tsx (1)
9-9: 属性名称更新: mask => cover此更新符合 PR 的整体重构目标，将
mask属性更新为cover，使语义更加明确。此变更与其他文件中的命名规范保持一致。docs/examples/imageRender.tsx (1)
14-14: 属性名称更新: toolbarRender => actionsRender此更新符合 PR 的整体重构目标，将
toolbarRender属性更新为actionsRender，使其在整个组件库中保持一致的术语。这一变更增强了 API 的语义化和可理解性。src/Preview/CloseBtn.tsx (2)
3-7: 接口定义清晰合理
CloseBtnProps接口定义简洁明了，属性命名语义化，类型定义准确。prefixCls和onClick设为必选项而icon设为可选项的设计很合理。
9-17: 组件实现符合 React 最佳实践
CloseBtn组件实现简洁高效:
- 使用函数式组件
- 正确解构并使用 props
- 组件渲染逻辑清晰
- 类名生成方式符合约定 (
${prefixCls}-close)组件只负责渲染和触发事件，符合单一职责原则。
src/hooks/useMouseEvent.ts (3)
15-15: 参数名称更新符合新的 API 设计将
visible改为open符合此 PR 的重构目标，使 API 命名更加一致和直观。
46-46: 条件检查已正确更新所有之前使用
visible的条件检查都已更新为使用open，保持了功能一致性。Also applies to: 58-58, 86-86
125-125: 依赖数组已正确更新useEffect 的依赖数组已从
visible更新为open，确保副作用正确响应状态变化。docs/examples/controlled.tsx (3)
7-7: 状态变量命名已更新从
visible更新为open，符合组件 API 的重构目标。
14-14: 状态设置函数已更新从
setVisible更新为setOpen，与状态变量名称保持一致。
25-28: 预览属性和回调已更新从
visible和onVisibleChange更新为open和onOpenChange，使示例与新的 API 结构保持一致。docs/examples/basic.tsx (2)
20-22: 回调和参数名称已更新从
onVisibleChange: visible => { ... }更新为onOpenChange: open => { ... }，保持与新 API 的一致性。
33-33: 遮罩属性名称已更新从
mask更新为cover，这是 API 重构的另一部分，使属性命名更加直观。src/hooks/useTouchEvent.ts (3)
50-50: 参数名称更新符合新的 API 设计与 useMouseEvent 钩子一致，将
visible更新为open，保持 API 命名的一致性。
134-134: 条件检查已正确更新onTouchEnd 函数中的条件检查已从
!visible更新为!open，保持功能一致性。
170-170: useEffect 条件和依赖已正确更新useEffect 中的条件和依赖数组已从
visible更新为open，确保副作用正确响应状态变化。Also applies to: 178-178
src/Preview/PrevNext.tsx (1)
1-44: 新组件实现了上一张/下一张功能代码实现了一个用于图片预览的上一张/下一张导航控件，结构清晰。组件通过
prefixCls保持样式命名一致性，并利用classNames动态应用禁用状态的样式。组件使用onActive回调函数传递导航偏移量，实现了良好的组件交互模式。代码中还包含了图标的回退机制（使用
prev ?? left和next ?? right），确保即使缺少特定图标也能保持功能正常。docs/examples/previewgroup.tsx (4)
39-41: API 更新: 从 wrapperStyle 迁移到 styles.root遵循新的 API 规范，将原先的
wrapperStyle属性替换为新的styles.root结构。这种方式更加一致且可扩展，允许在未来添加更多样式配置项。
42-46: 添加了禁用预览的示例图片增加了一个设置
preview={false}的图片示例，使示例更加完整。同样使用了新的styles.root结构来设置样式。
47-54: API 更新: 统一使用 styles.root 设置样式将所有图片组件的样式属性从
wrapperStyle更新为styles.root，保持了 API 的一致性。
55-59: 错误图片也遵循新的样式 API包括错误图片和最后一张图片在内的所有组件都一致地使用了新的
styles.rootAPI，确保了整个示例的一致性。tests/basic.test.tsx (3)
61-78: 测试用例更新: 使用 classNames.root 和 styles.root测试用例已更新以适应新的 API 变化，从
wrapperClassName和wrapperStyle变更为classNames.root和styles.root。测试逻辑保持不变，只是API调用方式更新了。测试用例描述中的文本也相应更新，使其与实际测试内容一致，这是一个很好的实践。
88-93: API 更新: 从 mask 属性更改为 cover测试用例更新以反映 API 的变化，从
mask属性更改为cover。相应地，CSS 选择器也从.rc-image-mask更改为.rc-image-cover，确保测试继续正确工作。
94-103: API 更新: 使用 open 代替 visible测试用例更新以适应 API 变化，将
visible替换为open。同时将期望的 zIndex 值从 10000 更改为 9999，确保测试与实际实现保持一致。docs/examples/controlledWithGroup.tsx (4)
8-8: 状态变量命名更新: visible 改为 open将状态变量从
visible更新为open，使其与组件 API 的新命名保持一致。这样的命名更加清晰和直观。
16-17: 状态更新函数调用更新: setVisible 改为 setOpen相应地更新了状态更新函数的调用，从
setVisible改为setOpen，与状态变量命名保持一致。
25-28: API 更新: 使用 open 和 onOpenChange在
Image.PreviewGroup组件中，将visible属性替换为open，将onVisibleChange回调函数替换为onOpenChange，保持了整个库的 API 命名一致性。
37-44: API 更新: 使用 styles.root 设置样式在示例中的所有
Image组件中，统一使用新的styles.root属性来替代之前的wrapperStyle。这种变化与整个库的 API 重构保持一致，提供了更灵活的样式配置方式。docs/examples/actionsRender.tsx (2)
14-14: 属性名称从 toolbarRender 更新为 actionsRender根据语义变化，原有的
toolbarRender属性已被重命名为actionsRender，这个改动使得 API 命名更加一致和直观。
58-58: 函数签名从 toolbarRender 更新为 actionsRender函数签名已从
toolbarRender(_, { image })更新为actionsRender(_, { image })，与组件 API 的整体重构保持一致。tests/controlled.test.tsx (3)
17-17: 属性从 visible 更改为 open测试用例中的
preview={{ visible: true }}已更新为preview={{ open: true }}，与新的 API 命名规范保持一致。
26-26: 属性从 visible 更改为 open测试用例中的
preview={{ visible: false }}已更新为preview={{ open: false }}，与新的 API 命名规范保持一致。
34-34: 测试期望从快照比较更改为布尔值断言测试期望已从快照比较更改为布尔值断言
expect(document.querySelector('.rc-image-preview')).toBeFalsy()，使测试更加明确和可靠。assets/preview.less (2)
1-147: 新增的预览组件样式文件结构清晰这个新文件为预览组件定义了一套完整的样式，包括预览容器、遮罩、内容区域、导航按钮等，结构清晰且组织良好。
样式采用了嵌套的 LESS 语法，使用
@{prefixCls}变量保证类名的一致性，这是一个良好的实践。
114-146: 过渡效果实现全面淡入淡出过渡效果的实现考虑了进入、显示和离开的各个状态，并对主体内容添加了缩放效果，提升了用户体验。这是一个很好的实现。
tests/previewGroup.test.tsx (8)
17-19: 回调函数名从 onVisibleChange 更改为 onOpenChange测试用例中的回调函数从
onVisibleChange更改为onOpenChange，与组件 API 的整体重构保持一致。
32-32: 更新测试期望以匹配新的回调函数测试期望已更新为
expect(onOpenChange).toBeCalledWith(true, { current: 0 })，正确验证了新的onOpenChange回调函数。
34-34: 更新选择器从 switch-right 到 switch-next选择器已从
.rc-image-preview-switch-right更新为.rc-image-preview-switch-next，使命名更加语义化。Also applies to: 40-40
149-150: 更新选择器类名以匹配新的组件结构所有关于禁用状态的选择器类名已更新，从使用
.rc-image-preview-switch-left/right.rc-image-preview-switch-disabled更改为.rc-image-preview-switch-prev/next.rc-image-preview-switch-disabled，使命名更加一致和直观。Also applies to: 159-160, 169-170, 178-179, 187-188
193-193: 属性从 visible 更改为 open所有测试用例中的
preview={{ visible: true/false }}已更新为preview={{ open: true/false }}，与新的 API 命名规范保持一致。Also applies to: 201-201, 214-214
234-234: 更新操作按钮的选择器操作按钮的选择器已更新，适应新的组件结构。
352-354: 更新图像选择器和断言图像元素的选择器和相关断言已更新，使测试更加明确和可靠。
Also applies to: 360-362
383-383: 更新翻转操作按钮的选择器翻转操作按钮的选择器已更新为
.rc-image-preview-actions-action-flipY，使其更具语义性。src/PreviewGroup.tsx (6)
4-5: 导入类型声明的移动很合理。
这些导入在后续代码中被正常使用，未发现问题。
28-28: 在preview中新增对GroupPreviewConfig的支持。
这样能够灵活地接受布尔值或对象配置，提升组件可扩展性。实现思路清晰，可在后续测试用例中覆盖更多自定义场景。
41-42: 从preview对象中解构新字段open,onOpenChange并保留其余属性。
此处写法简洁，且满足对可选配置的需求。无明显问题。Also applies to: 45-46
100-100:onInternalChange回调中的索引更新逻辑清晰。
在内部更新current后，再调用外部的onChange，保证内外状态一致。无改动意见。
123-123: 将原先的visible改为open，API 语义更贴近布尔逻辑。
提交与 PR 目标保持一致，使用更合适的命名提高可读性。
135-135: 通过{...restProps}进一步扩展预览组件的自定义能力。
允许传递更多预览配置，方便未来扩展。README.md (3)
80-80: 将visible重命名为open。
文档中此处的命名与组件实现保持一致，用户理解更直观。
90-91: 重命名toolbarRender→actionsRender，并改用onOpenChange替代传统的onVisibleChange。
这能更好地描述工具栏操作及打开状态变化，文档中说明清晰，API 语义更明确。🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
90-90: Link fragments should be valid
Expected: #toolbarrenderinfotype; Actual: #ToolbarRenderInfoType(MD051, link-fragments)
123-123: 在PreviewGroupType中新增open属性。
与单图预览模式保持一致，减少不同模式下的 API 差异，文档表述合理。src/Preview/Footer.tsx (3)
1-8: 导入与基础类型定义。
FooterSemanticName、OperationType等类型有助于约束组件内部使用，为后续扩展提供了可读性。
9-25: 定义操作类型与渲染参数接口。
OperationType明确列举了可进行的图片操作，后续若需扩展只需新增类型即可；RenderOperationParams也简化了单个操作元素的定义。
46-213:Footer组件整体实现。
- 根据不同操作生成相应的操作按钮，使用
renderOperation提高可维护性。- 通过
actionsRender提供自定义渲染扩展点，满足业务场景多样化。- 使用
disabled控制图像边界操作，避免越界行为。
整体结构清晰，建议在测试时覆盖极端场景（例如首次图片与最后一张图片切换、缩放上下限控制等），以确保逻辑健壮性。tests/preview.test.tsx (51)
9-9: 导入测试库方式一致性很好
67-67: 检查onOpenChange回调
使用新命名的onOpenChange对齐了重构规范，看起来没有问题
72-75: 点击图片后回调验证
当点击图片时，测试正确验证回调参数为 true，符合预期
81-84: 点击遮罩关闭预览
测试校验点击遮罩后回调参数为 false，逻辑正确
86-86: 仅注释变动
92-95: 点击关闭按钮
测试关闭按钮的交互逻辑正确，回调参数为 false
123-123: 旋转操作测试
验证旋转操作索引 [3]，与当前图标顺序匹配
131-131: 旋转操作恢复
测试索引 [2] 的点击逻辑恢复旋转0度
150-150: 翻转操作：flipY
测试逻辑与交互顺序一致
158-158: 翻转操作：flipX
测试触发翻转操作，代码一目了然
166-166: 继续翻转操作
无明显问题
174-174: 翻转复位操作
测试场景周全
193-193: 放大操作测试
函数调用正确匹配 “索引 [5]” 按钮
201-201: 缩小操作测试
操作顺序合理
209-209: 第二次放大
重复放大的逻辑测试无问题
217-217: 再次缩小
正常检验回到1倍缩放
274-274: scaleStep = 1 时的缩小
断言结果正确
282-282: scaleStep = 1 时的放大
断言结果正确
330-330: 双击缩放重置
测试场景验证了双击恢复到 1 倍
576-576: 新用例：PreviewGroup render
测试组预览功能的 UI 与操作
605-605: 校验动作按钮数量
测试断言此时 action 按钮总数为 6
613-616: 覆盖与自定义 classNames
这里为预览增加 cover 文案与自定义 cover 样式
621-622: 断言 cover 的文本与 class
测试覆盖文案与自定义 class 同时生效
683-683: 设置 rootClassName
在渲染时添加自定义 class，兼容性良好
685-685: 检查 rootClassName 应用
校验.rc-image.custom-className被正确挂载
700-700: 预览未打开时不应出现对应元素
测试无预览时.rc-image-preview.custom-className不存在
707-712: 打开预览后添加自定义类
验证预览打开后.rc-image-preview.custom-className存在，并赋予正确的 src
738-741: 异步 src 处理
确认预览图使用最新的 src，且前一张切换按钮不可点
764-764: 展开 actionsRender 测试
对describe('actionsRender')用例命名清晰
775-775: 自定义 actionsRender 回调
断言为单张图片时，actions 定制行为如期执行
864-864: 设置 preview open
测试多张图片时默认第二张处于预览态
865-865: current = 1
从第二张开始预览
867-867: 自定义 actionsRender
覆盖默认的左右切换
887-887: 点击上一个
检验回调参数：从 1 到 0
889-889: 点击下一个
检验回调参数：从 1 到 2
917-917: flipY 操作
触发 onTransform 回调，检查次数与参数
961-961: 定义 onOpenChange
测试 ESC 关闭触发
966-966: 传入新的 onOpenChange
与最新需求保持一致
979-979: 验证预览打开
现在回调返回 true
980-980: 在 actions 区域点击
模拟用户在工具栏点击
984-986: ESC 关闭预览
回调返回 false，调用次数为2
987-987: 恢复 mock
清理测试环境
990-990: 不修改预览图片尺寸用例
覆盖 width/height 仅加在原图，不影响预览
997-997: 默认为 open: true
确认预览直接打开
1006-1006: 断言预览 img
测试预览中的 img 不带宽高属性
1012-1013: 自定义 className: cover & mask
覆盖默认封面与遮罩的 class
1018-1018: 自定义 cover 样式
color: red
1029-1032: 设置 cover 与 open
添加文本 "Bamboo Is Light" 并立即打开预览
1036-1039: 验证 cover & mask
断言 cover 与 mask 的自定义类和样式
1040-1040: 校验 cover 样式
使用 style 中的 color: 'red'
1045-1045: 校验根节点自定义类
测试.rc-image-preview同时具有自定义 classsrc/Image.tsx (15)
2-2: 使用classnames而非原生字符串拼接
简化类名合并逻辑
5-9: 导入新增类型
合并自Preview的内部类型，为后续预览配置提供强类型支持
26-30: 定义新的PreviewConfig
扩展InternalPreviewConfig并新增cover、classNames、styles属性，满足自定义需求
31-44: 新增imageRender和actionsRender
提供更灵活的渲染回调，可自定义预览中的图片及操作栏
46-46: 调整SemanticName
将可选值限制为'root' | 'image'，精简语义
48-48: 定义PreviewSemanticName
将基础语义扩展到包含'cover'等预览新语义
52-52: 注释区域：Misc
标明不与默认onClick冲突的补充属性
56-60: 添加rootClassName、classNames与styles
便于在根元素和图片元素上应用自定义类与内联样式
61-62: 新增可选图片src
从属性签名看，与预览功能对齐
66-67: 允许preview接收更多配置
可传入布尔或PreviewConfig对象，与需求一致
80-82: 默认前缀与预览前缀
rc-image与${prefixCls}-preview，风格统一
84-88: 接收 rootClassName/className/style
以细粒度方式自定义容器样式
89-90: 分离 classNames / styles
将图片与根容器等子级语义分开，方便维护
92-92: 解构出新的 imgSrc
与 previewSrc 进行合并使用
95-100: 解构 placeholder 与 fallback
为加载或错误场景做准备src/Preview/index.tsx (10)
1-3: 导入相关依赖
包含 Portal、CSSMotion 及工具函数，为预览动画与挂载做准备
4-18: 组件依赖与 hooks
整合多种事件与状态管理，高度定制化预览功能
19-22: 添加内部语义声明
提醒只可在此范围内新增操作，避免扩展不受控
23-37:OperationIcons接口
统一定义旋转、翻转、缩放、翻页等图标属性
39-49:Actions接口
封装预览中的操作方法，以便在自定义渲染中调用
51-67:ToolbarRenderInfoType
提供对图标、变换信息、当前索引、总数与图像信息的引用
69-106:InternalPreviewConfig
抽象出预览相关配置，如图标、缩放、动画、渲染函数等
108-135:PreviewProps主接口
继承InternalPreviewConfig并添加必要字段如mousePosition、imageInfo
137-159:PreviewImage子组件
自动处理 fallback 逻辑，支持onDoubleClick等事件
160-483:Preview主体组件
- 通过
useImageTransform管理旋转、翻转、缩放状态- 监听鼠标与触屏事件支持拖动
- 通过 CSSMotion 管理过渡动画
- 支持 keyboard ESC 关闭与左右键切换
- 合并 Footer、CloseBtn、PrevNext，满足完整预览功能
assets/index.less (8)
1-1: 引入 preview.less 样式依赖
此处通过@import 'preview.less';引入了预览组件的样式文件，确保了新 API 风格所需的样式支持。
10-12: 恢复全局重置样式的 box-sizing
在.reset()类中添加box-sizing: border-box;有助于确保所有元素的布局计算一致，符合现代 CSS 实践。
16-22: 恢复 .box() 定位中的 left 属性
在.box()类中新增left: 0;能确保元素定位的完整性，适用于需要绝对定位的场景。
24-27: 恢复容器的内联弹性布局
在.@{prefixCls}内部恢复display: inline-flex;属性，可确保组件内元素的排列与对齐达到预期效果。
28-36: 更新预览图片占位符的背景样式
在&-img节点中：
- 更新了
background-color为@background-color，使背景色与整体风格一致；- 使用新的 base64 编码 SVG 更新了
background-image，保证了预览占位图的视觉清晰度。
请确认新 SVG 图片在各种分辨率下均能良好显示。
44-49: 检查 mask 部分的定位属性
在&-mask内部，仍保留了right: 0;（行47）和left: 0;（行49）。文档说明中提到应移除左右定位属性，请确认这是否与新 API 设计保持一致，或者是否存在调整意图。
54-55: 恢复 mask 的背景颜色与初始透明度
通过设置background: rgba(0, 0, 0, 0.3);（行54）和opacity: 0;（行55），保证了遮罩在 hover 前的初始状态，并在交互时能正确显示。
60-62: 恢复 mask 的 hover 效果
在&:hover &-mask块中，当触发 hover 时将opacity调整为 1，确保用户悬停时遮罩能够正确显示出来。
|
一点点强迫症 |
Summary by CodeRabbit