refactor: migrate site to nutui-react #2955
Conversation
Walkthrough此次更新涵盖多个项目文件，涉及样式、配置、组件结构、文档内容及测试脚本的改进。CSS/SCSS 文件中调整了选择器、颜色变量与布局，增强视觉表现；配置与路由文件中新增和更新了站点配置、环境定义和动态路由；组件中重构了 App、Header、Nav、DemoPreview、Search 等逻辑，提升模块化管理；同时文档部分新增了国际化、主题定制、贡献指南及升级说明，整体优化了项目架构和开发体验。 Changes
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: 监听滚动事件，更新标题样式
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: 显示预览内容
Possibly related PRs
Suggested reviewers
Poem
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 (
|
This comment was marked as off-topic.
This comment was marked as off-topic.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Alex-huxiyang
force-pushed
the
feat_site_refactor
branch
from
ad352de to
0644ce0
Compare
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
启动用默认配置，demo、site、site.taro 只负责构建就行了。http://localhost:5173/react/index.taro.html#/zh-CN/component/button 在本地切换 H5 或 Taro 文档，通过在代码中增加 development 的判断 |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
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: 优化相似函数并添加类型定义
checkGuidTheme和checkGuidTheme2功能相似，建议合并成一个函数并添加适当的类型定义。-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
📒 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应该明确处理类型问题而不是忽略它。可以通过以下方式解决：
- 在 package.json 中添加类型声明
- 创建一个自定义的类型声明文件
-// @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: 优化语言切换逻辑当前的语言切换实现存在以下问题：
- 直接操作 window.location 可能导致页面重新加载
- 硬编码的语言切换逻辑不易维护
- 缺少错误处理
-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); + } +}}
There was a problem hiding this comment.
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: 格式一致性建议尽管已正确更新
portalprop 的类型以支持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
📒 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
站点迁移
Summary by CodeRabbit
DemoPreview，用于展示文档的实时效果。Search组件，提供搜索功能，允许用户快速过滤和导航文档内容。