feat(demoblock): code block scrolling behavior， CodesandBox function and copyCode styles - #3106
Conversation
Walkthrough此次改动主要涉及 DemoBlock 组件相关样式和逻辑的更新。在样式文件中，为 Changes
Sequence Diagram(s)sequenceDiagram
participant DB as DemoBlock 组件
participant CR as createRoot (react-dom/client)
participant CSB as CodeSandbox API
DB->>CR: 调用 createRoot 挂载 Demo 组件
CR->>DB: 完成组件渲染
DB->>CSB: 使用 getParameters 生成 onlineUrl
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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 (
|
github-actions
Bot
added
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3106 +/- ##
=============================================
+ Coverage 86.49% 86.95% +0.46%
=============================================
Files 280 280
Lines 18492 18456 -36
Branches 2774 2785 +11
=============================================
+ Hits 15994 16049 +55
+ Misses 2493 2402 -91
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: 0
🧹 Nitpick comments (2)
src/sites/sites-react/doc/components/demoblock/demoblock.scss (2)
51-59: 关于滚动条样式的兼容性建议当前滚动条样式仅使用了
-webkit-前缀，这只能在基于 WebKit 和 Blink 的浏览器（如 Chrome、Safari、Edge 等）中生效。为了提升跨浏览器兼容性，建议同时添加 Firefox 和标准滚动条样式支持。.demo-block code { max-height: 580px; overflow-y: auto; &::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } &::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } + /* Firefox 滚动条样式 */ + scrollbar-width: thin; + scrollbar-color: #ccc transparent; }
48-50: 考虑添加水平滚动处理当前样式只处理了垂直方向的滚动，但代码块中可能有超宽内容需要水平滚动。建议考虑为水平方向添加类似的处理，确保长行代码也能得到良好显示。
.demo-block code { max-height: 580px; overflow-y: auto; + overflow-x: auto; + white-space: pre; ...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/sites/sites-react/doc/components/demoblock/demoblock.scss(1 hunks)src/sites/sites-react/doc/components/demoblock/demoblock.tsx(1 hunks)
🔇 Additional comments (2)
src/sites/sites-react/doc/components/demoblock/demoblock.tsx (1)
38-38: 将 props.children 包装在带有类名的 div 中是一个很好的改进将
props.children包装在带有demo-block类名的 div 中，为代码块提供了一个可样式化的容器。这个修改与 SCSS 文件中的样式变更相匹配，使得可以对代码块应用滚动行为和自定义样式。这种结构性的改变有利于统一管理内容区域的布局和行为，符合组件化设计的最佳实践。
src/sites/sites-react/doc/components/demoblock/demoblock.scss (1)
48-60: 代码块滚动行为优化得当这段 CSS 规则为
.demo-block code元素添加了：
- 最大高度限制，避免代码块占用过多屏幕空间
- 垂直滚动条，方便查看长代码
- 自定义滚动条样式，提升用户体验
这些样式变更完美地配合 TSX 文件中结构的改变，共同优化了代码块的展示和交互体验。滚动条宽度适中，圆角设计也符合现代 UI 审美需求。
|
在线调试接入的不对，看 2.0 的在线调试接入，或者扩展个别的接入 |
|
1、复制代码后的提示太重了，可以简化为 一个 toast，或者 直接在 复制代码 的icon部分 增加 一个 ✅ |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/sites/sites-react/doc/components/demoblock/demoblock.tsx (1)
54-59: 可以改进复制代码的用户反馈目前使用
alert('复制成功')提示用户复制成功，这种方式可能会中断用户的操作流程。建议将alert提示改为更现代的Toast通知或直接在复制图标上显示一个✅标记，以提供更好的用户体验：
- alert('复制成功') + // 使用Toast组件或其他非阻塞提示 + // 例如：Toast.success('复制成功')src/sites/sites-react/doc/components/demoblock/codesandbox/package.json (1)
1-27: CodeSandbox配置文件需要更新标题这个配置文件为CodeSandbox在线调试功能提供了必要的依赖和配置，但是有一个细节需要注意：
文件中的title属性"语法糖 - antd@5.24.4"提到了antd，但实际上项目使用的是NutUI组件库。建议更新为更准确的描述：
- "title": "语法糖 - antd@5.24.4" + "title": "语法糖 - NutUI React"根据PR评论，可能需要检查这个配置是否与版本2.0对齐。请确认当前的依赖版本是否与项目的目标版本一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/sites/sites-react/doc/components/demoblock/codesandbox/index.html(1 hunks)src/sites/sites-react/doc/components/demoblock/codesandbox/package.json(1 hunks)src/sites/sites-react/doc/components/demoblock/demoblock.tsx(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/sites/sites-react/doc/components/demoblock/codesandbox/index.html
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (4)
src/sites/sites-react/doc/components/demoblock/demoblock.tsx (4)
2-7: 导入依赖的改动符合功能需求引入了CodeSandbox相关的API和资源文件，删除了不再使用的
compressText导入，这些变更与代码块在线调试功能的优化相符。
16-24: 升级了React 18渲染方式将旧版的
ReactDOM.render替换为React 18推荐的createRoot方法，符合React的最新实践。
25-52: 优化了在线调试的实现方式使用
getParameters方法构建了更完善的CodeSandbox参数结构，包含了完整的项目文件结构，这比之前的实现更加健壮。确认一下在线调试功能是否正常工作？基于PR评论中的反馈，可能存在"跳转调试功能有问题"的情况。
62-62: 优化了组件结构将children包裹在带有"demo-block"类名的div中，这样可以更好地应用样式，特别是滚动行为的样式。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/sites/sites-react/doc/components/demoblock/demoblock.tsx (1)
57-60: 复制成功反馈优化使用状态变量和定时器来显示复制成功反馈是一个好的用户体验改进。不过，根据 PR 评论，可以考虑进一步简化这个交互：
- 可以考虑使用 toast 提示替代文字变化
- 或者在复制图标上直接添加一个对勾标记 (✓) 来表示复制成功
- setCopyText('复制成功') - setTimeout(() => { - setCopyText('复制代码') - }, 2000) + // 使用 Toast 组件（假设已有） + Toast.show('复制成功') + // 或者更新图标状态 + setIconState('success') + setTimeout(() => { + setIconState('default') + }, 1500)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/sites/sites-react/doc/components/demoblock/demoblock.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (6)
src/sites/sites-react/doc/components/demoblock/demoblock.tsx (6)
2-7: 导入依赖优化将不再使用的
compressText移除，并添加了 CodeSandbox 相关的依赖导入。使用?raw导入静态文件是一个好的做法，可以让这些资源在构建时直接被内联到代码中。
15-15: 使用状态管理复制反馈提示使用
copyText状态来管理复制按钮文本是一个好的改进，比之前使用的 alert 提示更为友好。
17-25: 升级到 React 18 渲染方式从
ReactDOM.render升级到 React 18 的createRootAPI 是一个好的做法，符合 React 最新的推荐用法。
27-52: CodeSandbox 集成优化使用
getParameters函数构建包含多个文件的沙箱是一个不错的改进，这样可以提供更完整的在线调试环境。然而，有以下几点需要注意：
- 建议检查 CodeSandbox 集成是否与 NutUI React 2.0 版本兼容（根据 PR 评论反馈）
- 在线调试功能可能存在问题，需要进一步验证
请确认在线调试功能是否正常工作，特别是与 NutUI React 2.0 版本的兼容性。
65-65: 组件结构优化将
props.children包装在带有demo-block类名的 div 中，可以更好地控制样式和滚动行为。这与 PR 标题 "优化代码块滚动行为" 相符。
82-82: 动态复制按钮文本使用状态变量动态更新复制按钮文本是一个很好的改进。不过，如上面建议的，可以考虑使用更简洁的反馈方式。
Miles-hxy
changed the title
3 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
样式
新功能
杂项