-
-
Notifications
You must be signed in to change notification settings - Fork 185
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: fix site style and enhance user experience #262
Conversation
📝 Walkthrough📝 WalkthroughWalkthrough本次更改主要集中在多个组件的响应式设计和用户体验的改进。 Changes
Assessment against linked issues
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
Deploying ant-design-x with Cloudflare Pages
|
Bundle ReportBundle size has no change ✅ |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #262 +/- ##
=======================================
Coverage 91.13% 91.13%
=======================================
Files 66 66
Lines 1421 1421
Branches 364 379 +15
=======================================
Hits 1295 1295
Misses 126 126 ☔ View full report in Codecov by Sentry. |
size-limit report 📦
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (9)
.dumi/theme/slots/Header/index.tsx (2)
119-121
: 建议优化 useEffect 的性能当前实现在每次路由变化时都会执行 effect,即使抽屉已经是关闭状态。建议进行以下优化:
useEffect(() => { - isMobile && setOpen(false); + if (isMobile && open) { + setOpen(false); + } }, [pathname]);这样可以:
- 避免在抽屉已关闭时进行不必要的状态更新
- 减少不必要的组件重渲染
- 提高代码的可读性
Line range hint
1-180
: 建议增强组件的可访问性为了提供更好的用户体验,建议考虑以下几点改进:
- 为移动端抽屉添加
aria-label
属性- 为菜单按钮添加适当的
aria-expanded
状态- 在抽屉打开时捕获焦点,确保键盘导航的可用性
这些改进将使组件更符合 WAI-ARIA 规范,提供更好的无障碍体验。需要我协助实现这些改进吗?
.dumi/pages/index/components/SceneIntroduction/index.tsx (4)
55-57
: 建议优化背景图片定位逻辑背景图片的 transform 值 (
translate(10%, -20%)
) 看起来是硬编码的固定值,这可能在不同屏幕尺寸下表现不一致。建议:
- 考虑使用响应式的相对值
- 添加媒体查询来处理不同屏幕尺寸
content_bg: css` position: absolute; top: 0; right: 0; - transform: translate(10%, -20%); + transform: translate(clamp(5%, 10%, 15%), clamp(-25%, -20%, -15%)); + @media (max-width: ${token.screenXS}px) { + transform: translate(5%, -15%); + }Also applies to: 66-74
148-148
: 建议添加 Context 默认值处理当前的 Context 使用可能在某些情况下导致 undefined 错误。建议添加默认值处理:
- const { isMobile } = React.useContext(SiteContext); + const { isMobile = false } = React.useContext(SiteContext) || {};
156-156
: 建议优化图片加载性能当前的图片配置可以通过添加一些优化属性来提升加载性能:
- 考虑添加
srcset
支持不同屏幕密度- 添加合适的图片尺寸提示
建议将图片配置修改为:
img: { src: 'https://mdn.alipayobjects.com/...', srcSet: 'https://mdn.alipayobjects.com/...2x 2x', width: 890, height: 600, }Also applies to: 163-163, 170-170
194-227
: 移动端渲染逻辑建议优化当前的移动端适配实现不错,但有以下几点建议:
- Carousel 组件可以添加自动播放和指示器配置
- 考虑添加触摸手势支持
- 建议处理图片加载失败的情况
- <Carousel> + <Carousel + autoplay + dots={{ className: styles.carousel_dots }} + swipeToSlide + onError={(e) => console.error('Carousel image loading failed:', e)} + >另外,建议添加骨架屏提升加载体验:
{isMobile ? ( + <React.Suspense fallback={<Skeleton.Image active className={styles.mobile_content} />}> <Carousel> {/* ... */} </Carousel> + </React.Suspense> ) : (.dumi/theme/layouts/GlobalLayout.tsx (2)
61-64
: 建议优化首页判断逻辑当前的首页判断逻辑可能存在一些边界情况。
建议修改为:
const isIndexPage = React.useMemo( - () => pathname === '' || pathname.startsWith('/index'), + () => pathname === '/' || pathname === '' || pathname.startsWith('/index'), [pathname], );
Line range hint
147-151
: 建议增加主题配置的文档说明themeConfig 的配置项较多,建议添加注释说明每个配置项的作用,特别是关于 motion 和 cssVar 的设置。
建议添加如下注释:
const themeConfig = React.useMemo<ThemeConfig>( () => ({ + // 首页强制使用暗色主题,其他页面跟随用户设置 algorithm: isIndexPage ? getAlgorithm(['dark']) : getAlgorithm(theme), + // 控制动画效果的开关 token: { motion: !theme.includes('motion-off') }, + // 启用 CSS 变量模式,提高主题切换性能 cssVar: true, + // 关闭 hash 后缀,便于调试 hashed: false, }), [theme, pathname], );.dumi/pages/index/components/MainBanner.tsx (1)
73-74
: 建议优化移动端标题布局当前的居中对齐和间距调整是个好的开始,但建议考虑以下优化:
- 可以根据屏幕尺寸动态调整 gap 值
- 考虑在特小屏幕上调整文字大小
text-align: center; -gap: ${token.paddingXS}px; +gap: clamp(${token.paddingXS}px, 2vw, ${token.paddingLG}px);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
.dumi/pages/index/components/MainBanner.tsx
(3 hunks).dumi/pages/index/components/SceneIntroduction/index.tsx
(5 hunks).dumi/theme/builtins/Previewer/CodePreviewer.tsx
(1 hunks).dumi/theme/layouts/GlobalLayout.tsx
(3 hunks).dumi/theme/slots/Header/index.tsx
(4 hunks)
🔇 Additional comments (7)
.dumi/theme/slots/Header/index.tsx (2)
5-5
: 导入声明看起来没有问题!
新增的 useEffect
和 useLocation
导入正确支持了路由变化时关闭抽屉的新功能。
Also applies to: 15-15
100-101
: 路由钩子使用恰当!
使用 useLocation
获取 pathname
来监听路由变化是一个很好的实践。
.dumi/pages/index/components/SceneIntroduction/index.tsx (1)
1-1
: 导入更改看起来不错!
新增的 Carousel
组件和 SiteContext
的导入符合移动端适配的需求。
Also applies to: 8-8
.dumi/theme/layouts/GlobalLayout.tsx (2)
54-54
: 主题 token 的引入方式合理
从 antd 主题系统中获取 token 是正确的做法,这样可以保持与 antd 设计系统的一致性。
147-147
: 算法选择逻辑的改进是合理的
将首页强制使用暗色主题的逻辑与其他页面分开处理是正确的做法,这样可以确保首页的视觉效果始终保持一致。
.dumi/pages/index/components/MainBanner.tsx (1)
42-45
: 移动端高度调整符合响应式设计规范!
使用 token.paddingLG
作为计算基准很好地保持了设计系统的一致性。
.dumi/theme/builtins/Previewer/CodePreviewer.tsx (1)
377-377
: 改进了内容可访问性!
将 overflow 属性从 'hidden' 改为 'auto' 是个很好的改进,这样用户就可以滚动查看超出视图的内容了。
建议验证此更改在以下场景下的表现:
✅ Verification successful
overflow 属性修改是安全的,不会影响其他组件行为
通过代码分析,我们可以确认:
- CodePreviewer 中的 overflow 修改是独立且安全的,因为:
- iframe 和 compact 模式下的样式逻辑保持一致,只影响 padding 和 overflow 属性
- 其他组件中的 overflow: hidden 使用都是独立的样式定义,不依赖于 CodePreviewer
- 在文档和测试用例中没有发现对这个行为的特殊依赖
这个改动将提升内容可访问性,同时不会破坏现有功能。
[category: 样式优化]
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述:检查是否有其他组件依赖原有的 overflow: hidden 行为
# 搜索相关的 iframe 使用场景
rg -l "iframe.*demo"
# 搜索使用了 compact 模式的场景
rg -l "compact.*=.*true"
Length of output: 49
Script:
#!/bin/bash
# 让我们使用更广泛的搜索策略
# 搜索所有与 iframe 相关的使用
rg -l "iframe"
# 搜索所有与 compact 相关的使用
rg -l "compact"
# 查找 CodePreviewer 组件的引用
rg -l "CodePreviewer"
# 检查样式定义中的 overflow 属性
rg "overflow.*:.*hidden" .dumi/theme/
Length of output: 1676
Script:
#!/bin/bash
# 让我们深入检查相关文件的具体实现
# 检查 CodePreviewer 中的 iframe 和 compact 相关逻辑
rg -A 5 -B 5 "iframe.*compact" .dumi/theme/builtins/Previewer/CodePreviewer.tsx
# 检查测试文件中的相关用例
cat tests/shared/imageTest.tsx
# 检查文档中的使用说明
cat docs/playground/independent.zh-CN.md
Length of output: 9074
.dumi/theme/layouts/GlobalLayout.tsx
Outdated
useEffect(() => { | ||
const metaThemeColor = document.querySelector('meta[name="theme-color"]'); | ||
|
||
if (metaThemeColor) { | ||
metaThemeColor.setAttribute('content', isIndexPage ? '#000' : token.colorBgContainer); | ||
} | ||
}, [theme.length, isIndexPage]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
主题色切换实现需要增强
当前实现存在以下问题:
- 没有对 meta 标签不存在的情况进行容错处理
- 主题色切换时缺少过渡效果
- 代码中仅在
.dumi/theme/layouts/GlobalLayout.tsx
中实现了主题色切换,建议将相关逻辑抽象到统一的主题管理模块中
建议修改:
- 添加 meta 标签不存在时的创建逻辑
- 为主题色切换添加过渡动画,可参考
components/sender/style/index.ts
中的过渡实现方式 - 考虑将主题色管理逻辑迁移到专门的主题管理模块
🔗 Analysis chain
主题色切换逻辑需要考虑兼容性
主题色切换的实现需要注意以下几点:
- meta 标签不存在时的处理
- 主题切换时的过渡效果
运行以下脚本检查主题色切换的兼容性:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在其他地方修改了 theme-color
rg -l "theme-color" --type tsx --type html
Length of output: 70
Script:
#!/bin/bash
# Search for theme-color in all files
rg -l "theme-color"
# Also check for any theme-related color transitions or animations
rg -l "transition.*color|animation.*color"
Length of output: 97
Script:
#!/bin/bash
# 检查 meta theme-color 相关的实现
rg "theme-color" -C 3
# 查看 components/sender/style/index.ts 中的颜色过渡效果实现
cat components/sender/style/index.ts
Length of output: 3961
|
||
@media only screen and (max-width: ${token.mobileMaxWidth}px) { | ||
padding: 0 ${token.paddingLG}px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
建议增强按钮的可访问性
移动端内边距的调整很合理,但建议考虑以下无障碍性优化:
- 增加最小点击区域尺寸
- 确保足够的触控间距
@media only screen and (max-width: ${token.mobileMaxWidth}px) {
padding: 0 ${token.paddingLG}px;
+ min-height: 44px; // iOS 无障碍建议最小高度
+ margin: ${token.marginXS}px 0; // 增加按钮间距
}
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
@media only screen and (max-width: ${token.mobileMaxWidth}px) { | |
padding: 0 ${token.paddingLG}px; | |
} | |
@media only screen and (max-width: ${token.mobileMaxWidth}px) { | |
padding: 0 ${token.paddingLG}px; | |
min-height: 44px; // iOS 无障碍建议最小高度 | |
margin: ${token.marginXS}px 0; // 增加按钮间距 | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (5)
.dumi/pages/index/components/SceneIntroduction/index.tsx (2)
Line range hint
52-78
: 样式实现需要考虑更多移动端场景移动端样式实现有以下几点建议:
mobile_content
的背景色使用了固定的十六进制值#0c0e10cc
,建议使用 token 中的颜色变量以保持主题一致性- 移动端高度使用
80vh
可能在某些设备上不够灵活,建议考虑使用min-height
建议按如下方式修改:
mobile_content: css` - background: #0c0e10cc; + background: ${token.colorBgMask}; border-radius: 24px; margin: ${token.marginXXL}px 0; img { width: 100%; + height: auto; + object-fit: cover; } `,
160-174
: 建议优化图片资源加载策略目前的实现中,所有场景的图片都是通过 URL 直接引用的,这可能会影响页面加载性能。建议:
- 考虑使用图片懒加载
- 为图片添加合适的
alt
描述- 考虑使用 CDN 或图片优化服务
建议添加以下优化:
{ key: 'independent', title: locale.independent_title, desc: locale.independent_desc, content: <Independent />, - img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif', + img: { + src: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif', + alt: locale.independent_title, + loading: 'lazy', + }, },docs/playground/independent.tsx (1)
Line range hint
1-365
: 建议优化性能组件实现整体不错,但建议考虑以下优化点:
- 使用
useMemo
缓存items
转换逻辑- 使用
useCallback
优化事件处理函数- 考虑将大型子组件抽离成单独的组件文件
示例优化代码:
+ const memoizedItems = useMemo(() => + messages.map(({ id, message, status }) => ({ + key: id, + loading: status === 'loading', + role: status === 'local' ? 'local' : 'ai', + content: message, + })), + [messages] + ); + const handleAddConversation = useCallback(() => { + setConversationsItems((prev) => [ + ...prev, + { + key: `${prev.length}`, + label: `New Conversation ${prev.length}`, + }, + ]); + setActiveKey(`${conversationsItems.length}`); + }, []);.dumi/pages/index/components/DesignGuide.tsx (2)
130-133
: 移动端字体大小适配优化为标题添加移动端媒体查询样式提升了响应式体验,但建议考虑以下几点优化:
- 可以考虑为描述文本(chain_item_desc)也添加移动端字体大小适配
- 建议使用 CSS 变量来统一管理不同设备下的字体大小配置
建议添加更完整的移动端样式适配:
chain_item_title: css` font-size: ${token.fontSizeHeading1 + 10}px; line-height: 56px; font-weight: bold; @media only screen and (max-width: ${token.mobileMaxWidth}px) { font-size: ${token.fontSizeHeading2}px; + line-height: 40px; } `, chain_item_desc: css` font-size: ${token.fontSizeHeading5}px; line-height: 32px; opacity: 0.65; + @media only screen and (max-width: ${token.mobileMaxWidth}px) { + font-size: ${token.fontSizeHeading6}px; + line-height: 24px; + } `,
Line range hint
1-380
: 组件整体实现建议整体实现符合需求,但有以下几点建议:
- 动画性能优化
- Lottie 动画在移动端被完全禁用可能影响用户体验
- 建议在移动端使用更轻量的动画方案或优化后的 Lottie 动画
- 交互体验优化
- 建议为按钮添加 hover 和 active 状态的视觉反馈
- 考虑添加页面滚动时的过渡动画
建议考虑以下架构优化:
- 将动画逻辑抽离为独立的 hook:
const useAnimationControl = (animation: any) => { React.useEffect(() => { if (!animation) return; // 动画控制逻辑 }, [animation]); };
- 将样式配置抽离为主题变量:
const themeTokens = { mobile: { titleSize: token.fontSizeHeading2, descSize: token.fontSizeHeading6, }, desktop: { titleSize: token.fontSizeHeading1 + 10, descSize: token.fontSizeHeading5, }, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
.dumi/pages/index/common/Container.tsx
(1 hunks).dumi/pages/index/components/DesignGuide.tsx
(1 hunks).dumi/pages/index/components/SceneIntroduction/index.tsx
(5 hunks).dumi/theme/layouts/GlobalLayout.tsx
(3 hunks)docs/playground/independent.tsx
(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- .dumi/theme/layouts/GlobalLayout.tsx
🔇 Additional comments (2)
.dumi/pages/index/components/SceneIntroduction/index.tsx (1)
152-153
: 建议添加断点判断逻辑
目前直接使用 isMobile
来判断移动端,但没有考虑平板等中等尺寸设备的场景。
建议增加断点判断逻辑:
- const { isMobile } = React.useContext(SiteContext);
+ const { screenSize } = React.useContext(SiteContext);
+ const isCompactView = screenSize === 'xs' || screenSize === 'sm';
docs/playground/independent.tsx (1)
76-76
: 👍 良好的设计规范实践
使用 token.paddingLG
替代固定值是个好的改进,这样能够保持与设计系统的一致性。
|
||
@media only screen and (max-width: ${token.mobileMaxWidth}px) { | ||
font-size: ${token.fontSizeHeading1}px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
移动端适配验证完成,建议进一步优化!
根据代码库分析,发现以下情况:
- 目前只有少数组件实现了移动端响应式设计
- 在
.dumi/pages/index/common/Container.tsx
中的移动端适配是合适的 - 其他包含标题样式的组件(如 Welcome、Prompts、Sender 等)可能也需要类似的移动端适配
建议:
- 为其他包含标题的组件添加类似的移动端适配,特别是 Welcome 和 Prompts 组件
- 确保所有用户界面组件在移动端都有良好的显示效果
🔗 Analysis chain
响应式设计实现得当!
媒体查询的添加很好地解决了移动端标题字体大小的适配问题,使用 token 来控制断点和字体大小也符合设计系统规范。
建议运行以下脚本,确认其他相关组件是否也需要类似的移动端适配:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述:检查其他组件是否缺少移动端适配
# 搜索包含 title 样式但可能缺少媒体查询的文件
rg -l 'title.*css`' | xargs rg -L 'mobileMaxWidth'
Length of output: 50
Script:
#!/bin/bash
# 让我们使用更精确的搜索策略
# 1. 搜索包含样式化标题的组件
rg -A 5 'title.*{' --type tsx
# 2. 检查使用了 mobileMaxWidth 的文件
rg 'mobileMaxWidth' --type tsx
# 3. 查找所有可能的响应式设计相关代码
rg '@media.*max-width' --type tsx
Length of output: 234
Script:
#!/bin/bash
# 修正搜索命令
# 1. 搜索包含样式化标题的组件
rg -A 5 "title.*\{" .
# 2. 检查使用了 mobileMaxWidth 的文件
rg "mobileMaxWidth" .
# 3. 查找所有可能的响应式设计相关代码
rg "@media.*max-width" .
Length of output: 14518
{isMobile ? ( | ||
<Carousel> | ||
{tabItems.map( | ||
(item) => | ||
item.img && ( | ||
<div className={styles.mobile_content}> | ||
<img src={item.img} alt="item.img" loading="lazy" /> | ||
</div> | ||
), | ||
)} | ||
</Carousel> | ||
) : ( | ||
<div className={styles.content}> | ||
<div className={styles.tab}> | ||
{tabItems.map((item) => ( | ||
<Button | ||
key={item.key} | ||
disabled={item.disabled} | ||
className={classnames( | ||
styles.item, | ||
active === item.key && styles['item-active'], | ||
item.disabled && styles['item-disabled'], | ||
)} | ||
type="text" | ||
onClick={genHandleActive(item.key)} | ||
> | ||
<h3 className={styles.item_title}>{item.title}</h3> | ||
<p className={styles.item_desc}>{item.desc}</p> | ||
</Button> | ||
))} | ||
</div> | ||
{!!activeContent && <div className={styles.tab_content}>{activeContent}</div>} | ||
</div> | ||
{!!activeContent && <div className={styles.tab_content}>{activeContent}</div>} | ||
</div> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
移动端轮播组件实现需要增强用户体验
当前的轮播实现比较基础,建议增加以下功能来提升用户体验:
- 缺少轮播指示器
- 没有自动播放控制
- 缺少手势滑动支持
建议按如下方式增强轮播组件:
- <Carousel>
+ <Carousel
+ dots={{ className: styles.carousel_dots }}
+ autoplay
+ autoplaySpeed={5000}
+ draggable
+ swipeToSlide
+ >
{tabItems.map(
(item) =>
item.img && (
<div className={styles.mobile_content}>
- <img src={item.img} alt="item.img" loading="lazy" />
+ <img
+ src={item.img.src}
+ alt={item.img.alt}
+ loading={item.img.loading}
+ />
</div>
),
)}
</Carousel>
Committable suggestion skipped: line range outside the PR's diff.
min-width: 1000px; | ||
height: 722px; | ||
border-radius: 8px; | ||
border-radius: ${token.borderRadius}px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
需要优化响应式设计
设置固定的 min-width: 1000px
可能会在小屏设备上造成水平滚动,影响用户体验。建议使用媒体查询来适配不同屏幕尺寸。
建议修改如下:
- min-width: 1000px;
+ min-width: ${token.screenXS}px;
+ @media (min-width: ${token.screenSM}px) {
+ min-width: 1000px;
+ }
Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (7)
.dumi/hooks/useLottie.ts (2)
25-26
: 建议:改进 lottie 对象的获取方式当前的实现使用
(window as any)
可能不够严谨,建议添加更具体的类型检查和运行时验证。建议修改为:
-const lottie: LottiePlayer = (window as any)?.lottie; +const lottie = (typeof window !== 'undefined' && (window as Window & { lottie?: LottiePlayer }).lottie) || null;
Line range hint
1-72
: 架构建议:考虑动态加载 lottie 脚本目前的实现已经使用 IntersectionObserver 实现了动画的懒加载,但是可以更进一步优化。建议考虑在真正需要时才动态加载 lottie-web 脚本,这样可以进一步减少初始加载时间。
可以考虑实现以下方案:
- 将 lottie-web 从全局脚本移动到动态导入
- 在组件首次可见时才加载脚本
- 使用 Promise 缓存加载状态
示例实现:
const loadLottie = async (): Promise<LottiePlayer> => { if (typeof window !== 'undefined' && (window as any).lottie) { return (window as any).lottie; } const module = await import('lottie-web'); return module.default; };.dumi/theme/slots/Header/index.tsx (3)
53-55
: 建议优化隐藏状态的过渡效果当前实现只设置了 opacity,建议考虑添加 transform 来优化性能。
建议修改如下:
hidden: css` opacity: 0; + transform: translateY(-100%); `,
112-114
: 滚动行为逻辑优化使用
innerHeight
替代固定值来判断滚动状态是个很好的改进。不过建议添加防抖处理来优化性能。+import { debounce } from 'lodash'; const innerHeight = window?.innerHeight || 1080; -const isMini = scrollY > innerHeight && !isMobile; +const isMini = debounce(() => scrollY > innerHeight && !isMobile, 150);Also applies to: 155-155
125-127
: 移动端路由切换时关闭导航的处理很合理这个改动很好地优化了移动端的用户体验,符合用户的预期行为。建议考虑在关闭动作完成后添加回调函数。
useEffect(() => { - isMobile && setOpen(false); + if (isMobile) { + setOpen(false); + // 可以添加回调,比如滚动到页面顶部 + window.scrollTo({ top: 0, behavior: 'smooth' }); + } }, [pathname]);.dumi/pages/index/components/SceneIntroduction/index.tsx (2)
52-55
: 建议优化移动端高度设置当前使用固定的
80vh
高度可能在某些设备上不够灵活。建议考虑使用min-height
来确保内容始终能够完整显示。@media screen and (max-width: ${token.mobileMaxWidth}px) { - height: 80vh; + min-height: 80vh; + height: auto; }
222-244
: 建议优化桌面端性能和可访问性当前实现可以通过以下方式进行优化:
- 使用
useMemo
缓存渲染内容- 增强键盘导航支持
- 添加 ARIA 属性提升可访问性
+ const tabContent = React.useMemo( + () => ( <div className={styles.content}> <div className={styles.tab}> {tabItems.map((item) => ( <Button key={item.key} disabled={item.disabled} + role="tab" + aria-selected={active === item.key} + aria-controls={`panel-${item.key}`} className={classnames( styles.item, active === item.key && styles['item-active'], item.disabled && styles['item-disabled'], )} type="text" onClick={genHandleActive(item.key)} > <h3 className={styles.item_title}>{item.title}</h3> <p className={styles.item_desc}>{item.desc}</p> </Button> ))} </div> - {!!activeContent && <div className={styles.tab_content}>{activeContent}</div>} + {!!activeContent && ( + <div + className={styles.tab_content} + role="tabpanel" + id={`panel-${active}`} + > + {activeContent} + </div> + )} </div> + ), + [active, tabItems, styles] + );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
.dumi/hooks/useLottie.ts
(2 hunks).dumi/pages/index/components/MainBanner.tsx
(4 hunks).dumi/pages/index/components/SceneIntroduction/index.tsx
(5 hunks).dumi/theme/slots/Header/index.tsx
(8 hunks).dumirc.ts
(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- .dumi/pages/index/components/MainBanner.tsx
🔇 Additional comments (5)
.dumi/hooks/useLottie.ts (2)
1-1
: 导入优化:仅导入类型定义
将 lottie-web 的默认导入更改为仅类型导入是一个很好的改进,这样可以减少打包体积,并提供更好的类型安全性。
Line range hint 29-35
: 验证:确保 lottie 脚本正确加载
代码已经添加了 lottie
对象的空值检查,这很好。但是我们需要确保在项目中正确加载了 lottie-web 脚本。
✅ Verification successful
lottie 脚本加载已正确配置
在 .dumirc.ts
中已通过 CDN 正确配置了 lottie-web 脚本的加载:
headScripts: [
'https://gw.alipayobjects.com/os/lib/lottie-web/5.12.2/build/player/lottie_svg.min.js'
]
同时在 package.json
中也已添加了相应依赖:
"lottie-web": "^5.12.2"
代码中的 lottie
对象空值检查是合理且必要的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查项目中是否正确引入了 lottie-web 脚本
# 搜索 HTML 文件中的 lottie 脚本引用
rg -l "lottie-web|cdnjs.*lottie" --type html
# 检查包依赖中是否包含 lottie-web
rg '"lottie-web"' package.json
Length of output: 108
Script:
#!/bin/bash
# 检查 lottie-web 的导入和使用方式
ast-grep --pattern 'import $_ from "lottie-web"'
# 检查 lottie 相关的配置文件
rg -l "lottie" --type ts --type js
# 检查 useLottie hook 的完整实现
rg -A 10 "useLottie" .dumi/hooks/useLottie.ts
Length of output: 670
Script:
#!/bin/bash
# 检查 .dumirc.ts 中的 lottie 相关配置
cat .dumirc.ts
# 检查动态导入 lottie-web 的实现
rg -A 5 "import.*lottie-web" --type ts
Length of output: 5595
.dumi/theme/slots/Header/index.tsx (2)
5-5
: 新增的 hooks 使用符合最佳实践
新增的 useEffect
和 useLocation
的引入有助于改善移动端导航的用户体验,这与 PR 的目标相符。
Also applies to: 15-15
33-33
: 优化过渡动画效果
为 header 添加了 opacity 的过渡效果,使导航栏的显示/隐藏更加平滑,这很好地解决了 issue #203 中提到的过渡问题。
.dumi/pages/index/components/SceneIntroduction/index.tsx (1)
209-221
: 轮播组件实现已经改进
当前实现已经包含了自动播放、手势滑动等增强功能,这是个很好的改进。不过建议再添加一些用户体验优化:
- <Carousel autoplay draggable autoplaySpeed={5000} swipeToSlide>
+ <Carousel
+ autoplay
+ draggable
+ autoplaySpeed={5000}
+ swipeToSlide
+ dots={{ className: styles.carousel_dots }}
+ pauseOnHover
+ responsive={[
+ {
+ breakpoint: 480,
+ settings: {
+ slidesToShow: 1,
+ },
+ },
+ ]}
+ >
@@ -179,5 +179,6 @@ export default defineConfig({ | |||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us'; | |||
})(); | |||
`, | |||
'https://gw.alipayobjects.com/os/lib/lottie-web/5.12.2/build/player/lottie_svg.min.js', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
Based on the findings, I can now provide a final response:
建议移除未使用的 Lottie 库引用
经过代码库分析发现:
- package.json 中已经包含了
lottie-web
依赖(版本 ^5.12.2) - 在整个代码库中没有发现任何组件实际使用了 Lottie 动画
- .dumirc.ts 中通过 CDN 加载的 Lottie 脚本可能是冗余的
建议:
- 移除 .dumirc.ts 中的 CDN 脚本引用,因为它没有被使用
- 如果确实不需要动画功能,也可以从 package.json 中移除
lottie-web
依赖
🔗 Analysis chain
建议验证 Lottie 库的使用场景和性能影响
引入 Lottie 动画库需要注意以下几点:
- 该库的加载可能会影响页面的首次加载性能,建议考虑按需加载
- 当前使用的是固定版本 5.12.2,需要定期检查和更新以获取安全补丁
- 与当前 PR 的主要目标(修复布局问题和导航栏行为)的关联性不明确
建议考虑以下优化方案:
- 使用动态导入(dynamic import)实现按需加载
- 考虑使用 npm 包管理而不是 CDN 直接引入,以便更好地管理依赖
Let me try another search strategy to find Lottie usage in the codebase.
Let me check the package.json to see how Lottie is being used.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Lottie 库的使用情况
echo "检查代码库中 Lottie 的使用位置..."
rg "lottie" --type ts --type tsx
# 检查最新版本信息
echo "检查 Lottie 库的最新版本..."
curl -s "https://registry.npmjs.org/lottie-web/latest" | jq '.version'
Length of output: 242
Script:
#!/bin/bash
# 使用 ripgrep 搜索所有文件中的 lottie 关键字
echo "搜索所有文件中的 lottie 使用情况..."
rg -l "lottie" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts'
# 查找可能包含动画相关的文件
echo -e "\n搜索可能的动画相关文件..."
rg -l "animation|animate" --type-add 'tsx:*.tsx' --type-add 'ts:*.ts'
# 检查配置文件中的其他外部脚本
echo -e "\n检查配置文件中的其他外部脚本..."
cat .dumirc.ts
Length of output: 6252
Script:
#!/bin/bash
# 检查 package.json 中的 Lottie 相关配置
echo "检查 package.json 中的 Lottie 相关内容..."
cat package.json | grep -A 5 -B 5 "lottie"
# 搜索可能使用 Lottie 的组件文件
echo -e "\n搜索可能使用 Lottie 的组件文件..."
fd -e tsx -e ts -x grep -l "lottie" {} \;
# 检查文档中是否有关于动画的说明
echo -e "\n检查文档中的动画相关内容..."
fd -e md -x grep -l "animation" {} \;
Length of output: 635
const tabItems = [ | ||
{ | ||
key: 'independent', | ||
title: locale.independent_title, | ||
desc: locale.independent_desc, | ||
content: <Independent />, | ||
img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
建议优化图片资源处理
建议对图片资源进行以下优化:
- 添加图片类型声明
- 使用图片优化组件
- 考虑添加图片加载失败的降级处理
+ interface TabImage {
+ src: string;
+ alt: string;
+ fallback?: string;
+ }
+ interface TabItem {
+ key: string;
+ title: string;
+ desc: string;
+ content: React.ReactNode;
+ img?: TabImage;
+ disabled?: boolean;
+ }
const tabItems: TabItem[] = [
{
key: 'independent',
title: locale.independent_title,
desc: locale.independent_desc,
content: <Independent />,
- img: 'https://mdn.alipayobjects.com/...',
+ img: {
+ src: 'https://mdn.alipayobjects.com/...',
+ alt: locale.independent_title,
+ fallback: '/fallback-image.png'
+ },
},
// ... 其他项目类似更新
];
Also applies to: 178-178, 185-185
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
.dumi/theme/slots/Header/index.tsx (1)
33-33
: 优化过渡动画效果为 header 添加了 opacity 过渡效果,使导航栏的显示/隐藏更加平滑,提升了用户体验。但建议进一步完善过渡效果。
建议添加 transform 过渡,使隐藏效果更自然:
transition: padding 0.2s ease-in-out, margin 0.2s ease-in-out, opacity 0.2s ease-in-out; + transform: translateY(0); + transition: padding 0.2s ease-in-out, margin 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out; &.hidden { opacity: 0; + transform: translateY(-100%); }Also applies to: 53-55
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
.dumi/theme/slots/Header/index.tsx
(8 hunks)
🔇 Additional comments (4)
.dumi/theme/slots/Header/index.tsx (4)
5-5
: 新增 hooks 导入以优化导航体验
新增的 useLocation
和 useEffect
hooks 有助于实现导航栏的智能控制,符合优化用户体验的目标。
Also applies to: 15-15
129-131
: 移动端导航优化
在路由变化时自动关闭移动端导航抽屉,提升了用户体验。
169-169
: 样式类名应用
正确应用了 hidden 类来控制导航栏的显示状态。
118-118
: 优化滚动行为逻辑
通过 innerHeight
和滚动方向来控制导航栏的显示/隐藏,解决了原有的奇怪变化问题。但阈值可能需要调整。
建议验证不同设备上的滚动体验:
Also applies to: 159-159
✅ Verification successful
滚动行为逻辑验证完成
根据代码分析,当前的滚动行为实现是合理的:
- 使用
innerHeight
作为初始阈值来控制迷你模式是合适的,因为它考虑了不同设备的实际视口高度 - 在 1.5 倍视口高度时触发导航栏隐藏的设计也是合理的,给用户足够的滚动空间来触发行为
- 通过
useScrollY
hook 实现了平滑的滚动方向检测和状态更新 - 移动端已排除迷你模式,确保了良好的移动端体验
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件中是否有类似的滚动行为处理
rg -A 3 "scrollY|innerHeight" --type typescript
Length of output: 84
Script:
#!/bin/bash
# 搜索与滚动行为相关的代码
rg -A 3 "scrollY|innerHeight"
Length of output: 3447
Script:
#!/bin/bash
# 查找所有 tsx 和 ts 文件中的滚动相关代码
fd -e tsx -e ts -x rg -A 3 "scrollY|innerHeight" {}
Length of output: 1154
Script:
#!/bin/bash
# 使用 ast-grep 查找滚动相关的逻辑
ast-grep --pattern 'const $_ = scrollY > $_'
Length of output: 46
Script:
#!/bin/bash
# 查找可能包含滚动处理的组件文件
fd "Header|Nav|Scroll" -e tsx -e ts
Length of output: 72
Script:
#!/bin/bash
# 查找 .dumi 目录下的滚动相关代码
rg -A 5 "scrollY|innerHeight" .dumi/
Length of output: 4763
Script:
#!/bin/bash
# 检查 Header 组件中的其他滚动相关逻辑
cat .dumi/theme/slots/Header/index.tsx
Length of output: 4653
let innerHeight = 1080; | ||
|
||
if (typeof window !== 'undefined') { | ||
innerHeight = window.innerHeight; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
改进响应式高度计算
使用 window.innerHeight
替代固定值是个好的改进,但需要注意在服务器端渲染时的处理。
建议使用 React 的 useLayoutEffect 来处理窗口尺寸:
+ const [innerHeight, setInnerHeight] = React.useState(1080);
+
+ React.useLayoutEffect(() => {
+ setInnerHeight(window.innerHeight);
+ const handleResize = () => setInnerHeight(window.innerHeight);
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
-
- let innerHeight = 1080;
- if (typeof window !== 'undefined') {
- innerHeight = window.innerHeight;
- }
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
let innerHeight = 1080; | |
if (typeof window !== 'undefined') { | |
innerHeight = window.innerHeight; | |
} | |
const [innerHeight, setInnerHeight] = React.useState(1080); | |
React.useLayoutEffect(() => { | |
setInnerHeight(window.innerHeight); | |
const handleResize = () => setInnerHeight(window.innerHeight); | |
window.addEventListener('resize', handleResize); | |
return () => window.removeEventListener('resize', handleResize); | |
}, []); |
减少挨骂成分
fix: #235
fix: #203
Summary by CodeRabbit
Summary by CodeRabbit
新功能
MainBanner
组件以增强移动设备的响应式设计。SceneBanner
组件现在支持在移动设备上显示轮播图。CodePreviewer
组件允许用户在代码框中滚动查看超出可见区域的内容。GlobalLayout
组件改进了主题管理逻辑,动态更新主题颜色。Header
组件优化了移动设备的导航控制。DesignGuide
组件增强了响应式设计和动画控制。Independent
组件改进了样式和类型安全性。Bug 修复