Skip to content

Conversation

Miles-hxy
Copy link
Collaborator

@Miles-hxy Miles-hxy commented Jan 22, 2025

站点迁移

Summary by CodeRabbit

  • 新功能
    • 增强了文档预览和导航体验,支持多语言和主题定制,新增了便捷的搜索入口。
    • 引入了新的组件 DemoPreview,用于展示文档的实时效果。
    • 新增了 Search 组件,提供搜索功能,允许用户快速过滤和导航文档内容。
    • 新增了对国际化的支持,允许用户在应用中切换语言。
    • 更新了多个组件的文档,提供更清晰的使用指南和示例。
  • 样式优化
    • 全面优化了页面布局、标题、导航及组件展示,提升了整体视觉效果和交互体验。
    • 新增了文档查看器的样式,改善了用户体验。
    • 更新了多个组件的样式,增强了响应式设计和视觉一致性。
  • 文档更新
    • 丰富了贡献指南、快速入门、升级与迁移、国际化等文档,帮助开发者更快上手与定制。
    • 更新了主题定制文档,提供了CSS变量和Sass变量的使用指南。
  • 性能及构建改进
    • 改进了路由管理和构建流程,优化页面加载速度与响应性能。
    • 引入了新的Vite配置,增强了对React和MDX的支持。

Copy link

coderabbitai bot commented Jan 22, 2025

"""

Walkthrough

此次更新涵盖多个项目文件,涉及样式、配置、组件结构、文档内容及测试脚本的改进。CSS/SCSS 文件中调整了选择器、颜色变量与布局,增强视觉表现;配置与路由文件中新增和更新了站点配置、环境定义和动态路由;组件中重构了 App、Header、Nav、DemoPreview、Search 等逻辑,提升模块化管理;同时文档部分新增了国际化、主题定制、贡献指南及升级说明,整体优化了项目架构和开发体验。

Changes

文件 更改概要
src/sites/assets/styles/highlight.scss, .../md-style.scss, .../reset.scss, .../variables.scss 修改代码和预格式,简化嵌套选择器,更新颜色变量与新增变量(如 $doc-smile-curve),新增隐藏滚动条规则及 .contributor 相关样式。
src/sites/doc/App.scss, src/sites/doc/components/header/header.scss, src/sites/sites-react/doc/App.scss, src/sites/sites-react/doc-taro/App.scss 重构文档页面样式,新增如 .doc-title.doc-backtop::v-deep(.contributors-banner) 等类,调整布局、背景及交互效果。
src/sites/config/baseConfig.ts, src/sites/config/env.ts, src/sites/config/index.ts, src/sites/doc/router.ts, src/sites/sites-react/doc/router.ts, src/sites/sites-react/doc-taro/router.ts, 以及各 Vite 配置文件(如 vite.config.demo.ts, vite.config.mts, vite.config.site.mts 添加/更新新站点配置(SiteReact、SiteReactTaro),更新环境类型定义,改进路由结构与动态导入,以及增强 Vite 构建配置(定义全局常量、插件配置、输出目录和文件命名)。
src/sites/util/index.ts, src/sites/doc/App.tsx, src/sites/doc/components/header/header.tsx, src/sites/doc/components/nav/nav.tsx, src/sites/sites-react/doc/App.tsx, src/sites/sites-react/doc/components/demo-preview/index.ts, src/sites/sites-react/doc/components/search/search.tsx 更新组件逻辑与状态管理;重构 App 组件拆分为 Header、Nav 与 Content,新增 DemoPreview 与 Search 组件,删除部分组件入口文件以优化导出结构。
各 Markdown 文档文件(如 src/sites/packages/popup/doc.taro.md, src/sites/packages/uploader/doc.en-US.md, 以及 src/sites/sites-react/doc/docs/**/* 更新组件文档与属性说明,新增多语言支持文档、贡献指南、升级和快速入门等说明文档,完善组件使用和主题定制指导。
.gitignore, index.html, package.json, tsconfig.json, scripts/rename.js, cypress/e2e/... 更新忽略规则及入口 HTML 脚本路径;新增/更新构建与测试脚本、依赖项及 TypeScript 配置;调整 Cypress 测试中的 URL 规则。
src/sites/sites-react/doc/components/demo-preview/demo-preview.tsx, src/sites/theme/components/demo-preview/demo-preview.tsx 引入/改进 DemoPreview 组件,通过路由信息动态更新 iframe 的 src,删除无用的 useHistory 导入。

Sequence Diagram(s)

sequenceDiagram
    participant U as 用户
    participant A as App组件
    participant H as Header组件
    participant N as Nav组件
    participant C as Content组件
    U->>A: 访问页面
    A->>H: 渲染 Header
    A->>N: 渲染 Nav
    A->>C: 渲染内容区
    C->>A: 监听滚动事件,更新标题样式
Loading
sequenceDiagram
    participant U as 用户
    participant DP as DemoPreview组件
    participant L as useLocation Hook
    U->>DP: 导航至新页面
    DP->>L: 获取当前路径
    L-->>DP: 返回路径信息
    DP->>DP: 动态更新 iframe 的 src
    DP->>U: 显示预览内容
Loading

Possibly related PRs

  • refactor: popup 优化代码 #2944: 本次 PR 中关于 Popup 组件的 portal 属性类型的更改与此 PR 直接相关,后者也专注于 Popup 组件,更新了其代码和文档。两者都涉及对 Popup 组件功能和文档的调整,表明在代码层面的紧密联系。

  • docs: popup 增加 taro ios 兼容 faq #2943: 本次 PR 中关于 Popup 组件的 portal 属性类型的更改与此 PR 相关,后者也关注 Popup 组件,特别是解决兼容性问题并为 Taro 提供额外文档。两者都涉及对 Popup 组件文档的更新,尽管目标不同。

  • fix: 修订主题变量 #2911: 本次 PR 中,涉及 highlight.scssvariables.scss 文件的 CSS 规则和变量更新的更改,与此 PR 相关,后者也专注于在 variables.scss 文件中引入新颜色变量和更新现有变量。两者都处理同一项目中的样式和主题方面。

Suggested reviewers

  • oasis-cloud
  • xiaoyatong

Poem

小兔穿梭在代码间,
样式与逻辑齐欢颜。
路由新篇定乾坤,
文档添彩展宏篇。
轻跃更新不留痕,
梦中编程乐万年! 🐰✨
"""


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.

❤️ 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 generate docstrings to generate docstrings for this 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.

@github-actions github-actions bot added the 3.x Target branch 3.x label Jan 22, 2025

This comment was marked as off-topic.

coderabbitai[bot]

This comment was marked as resolved.

Copy link
Collaborator

@xiaoyatong xiaoyatong left a comment

Choose a reason for hiding this comment

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

1、关注下 路径,不要发生变化;
2、关注下 doc 与 demo 的联动;
3、关注下 多语言 联动,H5 和 小程序保持一致;
4、关注下 主题色,使用 default 里的 主题色值;
5、可以考虑下,在 组件首页,增加 Dongdesign 组件概览的页面~

coderabbitai[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

@oasis-cloud
Copy link
Collaborator

启动用默认配置,demo、site、site.taro 只负责构建就行了。http://localhost:5173/react/index.taro.html#/zh-CN/component/button
http://localhost:5173/react/#/zh-CN/component/button
本地只新增了一个 index.taro.html。

在本地切换 H5 或 Taro 文档,通过在代码中增加 development 的判断

coderabbitai[bot]

This comment was marked as outdated.

coderabbitai[bot]

This comment was marked as off-topic.

coderabbitai[bot]

This comment was marked as off-topic.

coderabbitai[bot]

This comment was marked as outdated.

Copy link

@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

♻️ Duplicate comments (1)
src/sites/sites-react/doc/components/header/header.tsx (1)

237-239: 🛠️ Refactor suggestion

添加键盘可访问性支持

此下拉菜单组件同样缺少键盘导航支持,应添加适当的 ARIA 属性和键盘事件处理。

 <div
   onMouseEnter={() => onMouseHover4(true)}
   onMouseLeave={() => onMouseHover4(false)}
-  // className="header-select-box"
+  tabIndex={0}
+  role="button"
+  aria-haspopup="true"
+  aria-expanded={isShowGuid4}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      setIsShowGuid4(!isShowGuid4)
+    }
+  }}
🧹 Nitpick comments (5)
src/sites/sites-react/doc/components/header/header.tsx (5)

79-79: 使用更可靠的路径检测方法

直接检查 URL 字符串可能会导致误判,建议使用更可靠的方法来确定当前环境。

-const isReactTaro = window.location.href.includes('taro')
+const isReactTaro = window.location.pathname.includes('taro') || 
+                   window.location.href.includes('index.taro.html')

117-119: 添加错误处理并使用 React Router 导航

打开外部链接时应添加错误处理,并在可能的情况下使用 React Router 而非直接调用 window.open()

 const checkGuidTheme = (item: any, type: string) => {
   setIsShowGuid(false)
-  window.open(item.link)
+  try {
+    // 检查是否是内部链接
+    if (item.link.startsWith('/') || item.link.includes(window.location.hostname)) {
+      navigate(item.link)
+    } else {
+      // 外部链接添加安全属性
+      window.open(item.link, '_blank', 'noopener,noreferrer')
+    }
+  } catch (error) {
+    console.error('打开链接失败:', error)
+  }
 }

120-125: 优化相似函数并添加类型定义

checkGuidThemecheckGuidTheme2 功能相似,建议合并成一个函数并添加适当的类型定义。

-const checkGuidTheme2 = (item: any, type: string) => {
-  if (item.link) {
-    setIsShowGuid(false)
-    window.open(item.link)
-  }
-}
+interface GuideItem {
+  link: string;
+  name: string;
+  language: string[];
+  app?: string;
+}
+
+const openGuideLink = (item: GuideItem, type: string) => {
+  if (!item.link) return;
+  
+  setIsShowGuid(false);
+  try {
+    // 检查是否是内部链接
+    if (item.link.startsWith('/') || item.link.includes(window.location.hostname)) {
+      navigate(item.link);
+    } else {
+      // 外部链接添加安全属性
+      window.open(item.link, '_blank', 'noopener,noreferrer');
+    }
+  } catch (error) {
+    console.error('打开链接失败:', error);
+  }
+}

130-132: 添加参数类型并处理未使用的状态

handleLanguageSelect 函数缺少参数类型定义,且 selectedLanguage 状态变量被设置但未在组件中使用。

-const handleLanguageSelect = (language) => {
+const handleLanguageSelect = (language: string) => {
   setSelectedLanguage(language)
+  // 添加使用 selectedLanguage 的逻辑,例如:
+  // 根据选择的语言执行操作或更新UI
 }

302-304: 优化事件处理

当前实现中,点击语言会触发两个不同的点击事件(父元素和子元素),这可能导致不一致的行为。

 <div
   className="name"
-  onClick={() =>
-    handleLanguageSelect(lang)
-  }
+  onClick={(e) => {
+    e.stopPropagation(); // 阻止事件冒泡到父元素
+    handleLanguageSelect(lang);
+  }}
 >
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95bed62 and 940c1f0.

📒 Files selected for processing (1)
  • src/sites/sites-react/doc/components/header/header.tsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test
🔇 Additional comments (8)
src/sites/sites-react/doc/components/header/header.tsx (8)

2-3: 避免使用 @ts-ignore

应该明确处理类型问题而不是忽略它。可以通过以下方式解决:

  1. 在 package.json 中添加类型声明
  2. 创建一个自定义的类型声明文件
-// @ts-ignore
-import { version } from '/package.json'
+import { version } from '../../../../../package.json'

19-19: 避免使用 any 类型

应该为 currLang 定义明确的接口类型,而不是使用 any。

-const [currLang, setCurrLang] = useState<any>({})
+interface Language {
+  name: string
+  locale: string
+}
+const [currLang, setCurrLang] = useState<Language | null>(null)

25-30: 移除未使用的副作用

这个 useEffect 钩子创建了一个 packages 数组但从未使用它。应该移除这个无用的副作用或者实现其预期功能。

-useEffect(() => {
-  let packages = [] as any[]
-  nav.forEach((item) => {
-    packages.push(...item.packages)
-  })
-}, [])

26-26: 避免使用 any 类型数组

建议为数组元素定义明确的接口类型。

-let packages = [] as any[]
+interface Package {
+  name: string;
+  path: string;
+  // 添加其他必要的属性
+}
+let packages: Package[] = []

56-61: 移除重复的 useEffect

这个 useEffect 钩子与第 32-37 行的完全相同,应该移除其中一个。

-useEffect(() => {
-  const lang = langs.filter(
-    (l) => location.pathname.indexOf(l.locale) > -1
-  )[0]
-  setCurrLang(lang)
-}, [location])

176-178: 添加键盘可访问性支持

下拉菜单缺少键盘导航支持,应该添加适当的 ARIA 属性和键盘事件处理。

 <div
   onMouseEnter={() => handleMouseHover(true)}
   onMouseLeave={() => handleMouseHover(false)}
-  // tabIndex="0"
+  tabIndex={0}
+  role="button"
+  aria-haspopup="true"
+  aria-expanded={isShowGuid}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleClick()
+    }
+  }}

262-262: 修复样式属性值

style 属性中的 width 值 '-346px' 是无效的 CSS 值。

-style={{ width: '-346px' }}
+style={{ width: '346px' }}

326-339: 优化语言切换逻辑

当前的语言切换实现存在以下问题:

  1. 直接操作 window.location 可能导致页面重新加载
  2. 硬编码的语言切换逻辑不易维护
  3. 缺少错误处理
-onClick={() => {
-  let location = window.location
-  if (currLang.locale == 'zh-CN') {
-    location.href = location.href.replace('zh-CN', 'en-US')
-    setCurrLang({
-      name: 'English',
-      locale: 'en-US',
-    })
-  } else {
-    location.href = location.href.replace('en-US', 'zh-CN')
-    setCurrLang({
-      name: '中文',
-      locale: 'zh-CN',
-    })
-  }
-}}
+onClick={() => {
+  const newLang = currLang.locale === 'zh-CN' 
+    ? { name: 'English', locale: 'en-US' }
+    : { name: '中文', locale: 'zh-CN' };
+  
+  try {
+    const newPath = location.pathname.replace(
+      currLang.locale,
+      newLang.locale
+    );
+    setCurrLang(newLang);
+    navigate(newPath);
+  } catch (error) {
+    console.error('语言切换失败:', error);
+  }
+}}

Copy link

@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: 0

🧹 Nitpick comments (3)
src/packages/popup/doc.zh-TW.md (1)

95-95: 格式一致性建议

在该处 portal 属性的类型说明中,建议将 null 用反引号包裹,即改为 `null`,以与其它类型项(如 HTMLElement(() => HTMLElement))的格式保持一致,从而提升文档的整体专业性和可读性。

-| portal | 指定節點掛載 | `HTMLElement` \| `(() => HTMLElement)` \| null` | `null` |
+| portal | 指定節點掛載 | `HTMLElement` \| `(() => HTMLElement)` \| `null` | `null` |
src/packages/popup/doc.en-US.md (1)

95-95: 格式一致性建议

尽管已正确更新 portal prop 的类型以支持 null,但建议将 null 用反引号包裹,即改为 `null`,以便与文档中其他类型的格式保持一致,增强文档的美观性。

-| portal | Mount the specified node | `HTMLElement` \| `(() => HTMLElement)` \| null` | `null` |
+| portal | Mount the specified node | `HTMLElement` \| `(() => HTMLElement)` \| `null` | `null` |
src/packages/popup/doc.md (1)

95-95: 格式一致性建议

在文档中 portal 属性的类型描述部分,建议将 null 用反引号包裹,即改为 `null`,保证与其他类型项的格式统一,从而提高文档的可读性。

-| portal | 指定节点挂载 | `HTMLElement` \| `(() => HTMLElement)` \| null` | `null` |
+| portal | 指定节点挂载 | `HTMLElement` \| `(() => HTMLElement)` \| `null` | `null` |
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 940c1f0 and 1cc27d0.

📒 Files selected for processing (3)
  • src/packages/popup/doc.en-US.md (1 hunks)
  • src/packages/popup/doc.md (1 hunks)
  • src/packages/popup/doc.zh-TW.md (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: build
  • GitHub Check: test

@Miles-hxy Miles-hxy merged commit 6a23255 into jdf2e:feat_v3.x Mar 5, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3.x Target branch 3.x action:review This PR needs more reviews (less than 2 approvals) size/XXL
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants