Skip to content
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

Merged
merged 6 commits into from
Nov 27, 2024
Merged

docs: fix site style and enhance user experience #262

merged 6 commits into from
Nov 27, 2024

Conversation

YumoImer
Copy link
Collaborator

@YumoImer YumoImer commented Nov 27, 2024

减少挨骂成分

fix: #235
fix: #203

Summary by CodeRabbit

Summary by CodeRabbit

  • 新功能

    • 更新了 MainBanner 组件以增强移动设备的响应式设计。
    • SceneBanner 组件现在支持在移动设备上显示轮播图。
    • CodePreviewer 组件允许用户在代码框中滚动查看超出可见区域的内容。
    • GlobalLayout 组件改进了主题管理逻辑,动态更新主题颜色。
    • Header 组件优化了移动设备的导航控制。
    • DesignGuide 组件增强了响应式设计和动画控制。
    • Independent 组件改进了样式和类型安全性。
  • Bug 修复

    • 修复了在移动设备上切换路由时未关闭抽屉的问题。

@YumoImer YumoImer requested a review from a team November 27, 2024 17:27
Copy link
Contributor

coderabbitai bot commented Nov 27, 2024

📝 Walkthrough
📝 Walkthrough

Walkthrough

本次更改主要集中在多个组件的响应式设计和用户体验的改进。MainBanner 组件新增了媒体查询样式以适应不同屏幕尺寸,SceneIntroduction 组件则通过引入 Carousel 组件优化了移动设备的内容展示。CodePreviewer 组件的溢出行为进行了调整,以允许内容滚动。GlobalLayoutHeader 组件的主题管理和导航控制逻辑也得到了增强,确保在不同设备上更好的用户交互体验。

Changes

文件路径 更改摘要
.dumi/pages/index/components/MainBanner.tsx 新增媒体查询样式,调整横幅高度和按钮填充,以增强移动设备的响应式设计。
.dumi/pages/index/components/SceneIntroduction/index.tsx 引入 Carousel 组件,更新渲染逻辑以适应移动设备,新增 img 属性以支持图片显示。
.dumi/theme/builtins/Previewer/CodePreviewer.tsx 修改 codeBoxDemoStyle 对象的 overflow 属性,允许内容滚动而非裁剪。
.dumi/theme/layouts/GlobalLayout.tsx 新增 token 常量以获取主题令牌,更新主题颜色的 meta 标签设置逻辑。
.dumi/theme/slots/Header/index.tsx 添加 useEffectuseLocation 钩子,优化移动设备的导航控制,确保在路由变化时关闭抽屉。
.dumi/pages/index/common/Container.tsx useStyle 函数中新增媒体查询,调整标题的字体大小以适应移动设备。
.dumi/pages/index/components/DesignGuide.tsx 新增媒体查询以调整移动设备的标题字体大小,优化 Lottie 动画的控制逻辑。
docs/playground/independent.tsx 更新样式定义以增强类型安全,调整布局和聊天样式。

Assessment against linked issues

Objective Addressed Explanation
确保 playground 组件在左右两边不贴在一起 (#235) 该 PR 中没有针对 playground 组件的边距或布局进行修改。
改善顶部导航在滚动时的表现 (#203)

Possibly related PRs

  • feat: New component Bubble #19: MainBanner 组件的响应式设计更改可能与 SceneIntroduction 组件的移动响应更新相关,均专注于提升不同屏幕尺寸的用户体验。
  • ✨ feat: Sender / ChatInput components #46: 与聊天输入功能相关的新组件可能与 MainBanner 中的响应式调整分享设计原则,特别是在增强用户交互方面。
  • fix: use context #51: Bubble 组件配置的修改可能与 MainBanner 的响应式设计目标一致,专注于改善用户体验。
  • feat: New Component - Prompts #55: Prompts 组件的引入可能与 MainBanner 的整体设计一致性和响应式相关。
  • test: coverage #72: Bubble.List 组件的测试改进可能间接与 MainBanner 相关,因为两者均旨在提升用户交互。

🐰 在草地上跳跃,欢声笑语,
组件更新如春风拂柳,
响应式设计,用户乐无穷,
代码如花,绽放新容,
感谢每位贡献者,齐心协力,
让我们一起迎接更美好的明天! 🌼


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

github-actions bot commented Nov 27, 2024

Preview is ready

Copy link

cloudflare-workers-and-pages bot commented Nov 27, 2024

Deploying ant-design-x with  Cloudflare Pages  Cloudflare Pages

Latest commit: c17f665
Status: ✅  Deploy successful!
Preview URL: https://e0b5891b.ant-design-x.pages.dev
Branch Preview URL: https://fix-style.ant-design-x.pages.dev

View logs

Copy link

codecov bot commented Nov 27, 2024

Bundle Report

Bundle size has no change ✅

Copy link

codecov bot commented Nov 27, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.13%. Comparing base (c0bf866) to head (c17f665).
Report is 1 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

Copy link

github-actions bot commented Nov 27, 2024

size-limit report 📦

Path Size
dist/antdx.min.js 40.5 KB

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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: 建议增强组件的可访问性

为了提供更好的用户体验,建议考虑以下几点改进:

  1. 为移动端抽屉添加 aria-label 属性
  2. 为菜单按钮添加适当的 aria-expanded 状态
  3. 在抽屉打开时捕获焦点,确保键盘导航的可用性

这些改进将使组件更符合 WAI-ARIA 规范,提供更好的无障碍体验。需要我协助实现这些改进吗?

.dumi/pages/index/components/SceneIntroduction/index.tsx (4)

55-57: 建议优化背景图片定位逻辑

背景图片的 transform 值 (translate(10%, -20%)) 看起来是硬编码的固定值,这可能在不同屏幕尺寸下表现不一致。建议:

  1. 考虑使用响应式的相对值
  2. 添加媒体查询来处理不同屏幕尺寸
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: 建议优化图片加载性能

当前的图片配置可以通过添加一些优化属性来提升加载性能:

  1. 考虑添加 srcset 支持不同屏幕密度
  2. 添加合适的图片尺寸提示

建议将图片配置修改为:

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: 移动端渲染逻辑建议优化

当前的移动端适配实现不错,但有以下几点建议:

  1. Carousel 组件可以添加自动播放和指示器配置
  2. 考虑添加触摸手势支持
  3. 建议处理图片加载失败的情况
- <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: 建议优化移动端标题布局

当前的居中对齐和间距调整是个好的开始,但建议考虑以下优化:

  1. 可以根据屏幕尺寸动态调整 gap 值
  2. 考虑在特小屏幕上调整文字大小
 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

📥 Commits

Reviewing files that changed from the base of the PR and between c0bf866 and ed02c77.

📒 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: 导入声明看起来没有问题!

新增的 useEffectuseLocation 导入正确支持了路由变化时关闭抽屉的新功能。

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

Comment on lines 105 to 111
useEffect(() => {
const metaThemeColor = document.querySelector('meta[name="theme-color"]');

if (metaThemeColor) {
metaThemeColor.setAttribute('content', isIndexPage ? '#000' : token.colorBgContainer);
}
}, [theme.length, isIndexPage]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

主题色切换实现需要增强

当前实现存在以下问题:

  1. 没有对 meta 标签不存在的情况进行容错处理
  2. 主题色切换时缺少过渡效果
  3. 代码中仅在 .dumi/theme/layouts/GlobalLayout.tsx 中实现了主题色切换,建议将相关逻辑抽象到统一的主题管理模块中

建议修改:

  • 添加 meta 标签不存在时的创建逻辑
  • 为主题色切换添加过渡动画,可参考 components/sender/style/index.ts 中的过渡实现方式
  • 考虑将主题色管理逻辑迁移到专门的主题管理模块
🔗 Analysis chain

主题色切换逻辑需要考虑兼容性

主题色切换的实现需要注意以下几点:

  1. meta 标签不存在时的处理
  2. 主题切换时的过渡效果

运行以下脚本检查主题色切换的兼容性:

🏁 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

Comment on lines +157 to +160

@media only screen and (max-width: ${token.mobileMaxWidth}px) {
padding: 0 ${token.paddingLG}px;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议增强按钮的可访问性

移动端内边距的调整很合理,但建议考虑以下无障碍性优化:

  1. 增加最小点击区域尺寸
  2. 确保足够的触控间距
 @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.

Suggested change
@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; // 增加按钮间距
}

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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: 样式实现需要考虑更多移动端场景

移动端样式实现有以下几点建议:

  1. mobile_content 的背景色使用了固定的十六进制值 #0c0e10cc,建议使用 token 中的颜色变量以保持主题一致性
  2. 移动端高度使用 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 直接引用的,这可能会影响页面加载性能。建议:

  1. 考虑使用图片懒加载
  2. 为图片添加合适的 alt 描述
  3. 考虑使用 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: 建议优化性能

组件实现整体不错,但建议考虑以下优化点:

  1. 使用 useMemo 缓存 items 转换逻辑
  2. 使用 useCallback 优化事件处理函数
  3. 考虑将大型子组件抽离成单独的组件文件

示例优化代码:

+ 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: 组件整体实现建议

整体实现符合需求,但有以下几点建议:

  1. 动画性能优化
  • Lottie 动画在移动端被完全禁用可能影响用户体验
  • 建议在移动端使用更轻量的动画方案或优化后的 Lottie 动画
  1. 交互体验优化
  • 建议为按钮添加 hover 和 active 状态的视觉反馈
  • 考虑添加页面滚动时的过渡动画

建议考虑以下架构优化:

  1. 将动画逻辑抽离为独立的 hook:
const useAnimationControl = (animation: any) => {
  React.useEffect(() => {
    if (!animation) return;
    // 动画控制逻辑
  }, [animation]);
};
  1. 将样式配置抽离为主题变量:
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

📥 Commits

Reviewing files that changed from the base of the PR and between ed02c77 and 656f5af.

📒 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 替代固定值是个好的改进,这样能够保持与设计系统的一致性。

Comment on lines +26 to +29

@media only screen and (max-width: ${token.mobileMaxWidth}px) {
font-size: ${token.fontSizeHeading1}px;
}
Copy link
Contributor

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

Comment on lines 198 to 231
{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>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

移动端轮播组件实现需要增强用户体验

当前的轮播实现比较基础,建议增加以下功能来提升用户体验:

  1. 缺少轮播指示器
  2. 没有自动播放控制
  3. 缺少手势滑动支持

建议按如下方式增强轮播组件:

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

Comment on lines +46 to +48
min-width: 1000px;
height: 722px;
border-radius: 8px;
border-radius: ${token.borderRadius}px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

需要优化响应式设计

设置固定的 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 脚本,这样可以进一步减少初始加载时间。

可以考虑实现以下方案:

  1. 将 lottie-web 从全局脚本移动到动态导入
  2. 在组件首次可见时才加载脚本
  3. 使用 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: 建议优化桌面端性能和可访问性

当前实现可以通过以下方式进行优化:

  1. 使用 useMemo 缓存渲染内容
  2. 增强键盘导航支持
  3. 添加 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

📥 Commits

Reviewing files that changed from the base of the PR and between a78275d and a6c36e4.

📒 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 使用符合最佳实践

新增的 useEffectuseLocation 的引入有助于改善移动端导航的用户体验,这与 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',
Copy link
Contributor

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 动画库需要注意以下几点:

  1. 该库的加载可能会影响页面的首次加载性能,建议考虑按需加载
  2. 当前使用的是固定版本 5.12.2,需要定期检查和更新以获取安全补丁
  3. 与当前 PR 的主要目标(修复布局问题和导航栏行为)的关联性不明确

建议考虑以下优化方案:

  1. 使用动态导入(dynamic import)实现按需加载
  2. 考虑使用 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',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议优化图片资源处理

建议对图片资源进行以下优化:

  1. 添加图片类型声明
  2. 使用图片优化组件
  3. 考虑添加图片加载失败的降级处理
+ 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

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between a6c36e4 and c17f665.

📒 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 导入以优化导航体验

新增的 useLocationuseEffect 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

Comment on lines +112 to +116
let innerHeight = 1080;

if (typeof window !== 'undefined') {
innerHeight = window.innerHeight;
}
Copy link
Contributor

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.

Suggested change
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);
}, []);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

playground 里左右两边贴在一起了 顶部导航在滚动时变化比较奇怪
2 participants