+
)
diff --git a/src/sites/doc/components/nav/nav.scss b/src/sites/doc/components/nav/nav.scss
index 0779dac2a5..7d4ce25755 100644
--- a/src/sites/doc/components/nav/nav.scss
+++ b/src/sites/doc/components/nav/nav.scss
@@ -11,10 +11,12 @@
border-right: 1px solid #eee;
overflow: auto;
padding-left: 35px;
+ padding-top: 35px;
&.fixed {
position: fixed;
top: 0;
+ padding-top: 15px;
}
ol {
@@ -35,10 +37,13 @@
line-height: 48px;
font-size: 14px;
color: $doc-default-nav-color;
- font-weight: bold;
position: relative;
+ font-weight: bold;
&.active {
+ font-weight: bold;
+ color: $doc-default-color;
+
&::before {
position: absolute;
content: '';
@@ -48,8 +53,7 @@
margin-top: -5px;
height: 10px;
transform: rotate(90deg);
- background: url(https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png)
- no-repeat;
+ background: url('https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png');
background-size: 100% 100%;
}
}
@@ -59,15 +63,19 @@
li {
padding-left: 29px;
cursor: pointer;
+ height: 100%;
+ font-weight: bold;
&:hover {
- a {
+ &:visited {
color: $doc-default-color;
}
}
a {
- height: 100%;
+ &:hover {
+ color: $doc-default-color !important;
+ }
&.router-link-active,
&.active {
@@ -76,15 +84,7 @@
&:link,
&:visited {
- color: $color-title;
- }
-
- &:hover {
- color: $doc-default-color;
-
- &:visited {
- color: $doc-default-color;
- }
+ color: #1a1a1a;
}
b {
@@ -92,15 +92,13 @@
font-size: 12px;
}
}
- }
- }
- }
-
- .selected {
- color: #ff0f23 !important;
- li {
- color: #ff0f23 !important;
+ div {
+ &:hover {
+ color: $doc-default-color !important;
+ }
+ }
+ }
}
}
}
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 297e6b73c6..4b2554a4df 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -32,14 +32,14 @@ const Nav = () => {
{cn.packages.map((cp: any) => {
if (!cp.show) return null
return (
-
- isPending ? '' : isActive ? 'selected' : ''
- }
- to={`${lang ? `/${lang}` : ''}/component/${cp.name}`}
- >
-
+
+
+ isPending ? '' : isActive ? 'active' : ''
+ }
+ to={`${lang ? `/${lang}` : ''}/component/${cp.name}`}
+ >
{cp.name}
{lang === 'zh-CN' && cp.cName}
{cp.version !== '2.0.0' ? (
@@ -58,8 +58,8 @@ const Nav = () => {
🛠
) : null}
-
-
+
+
)
})}
From 6a70c8a433940d67dec256fb1dc8d8c4a62187c4 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Mon, 20 Jan 2025 11:22:56 +0800
Subject: [PATCH 02/14] feat: css transition add list
---
src/sites/doc/components/header/header.scss | 48 +++++---
src/sites/doc/components/header/header.tsx | 128 ++++++++++++--------
2 files changed, 110 insertions(+), 66 deletions(-)
diff --git a/src/sites/doc/components/header/header.scss b/src/sites/doc/components/header/header.scss
index 03e7d7624f..e118ab2796 100644
--- a/src/sites/doc/components/header/header.scss
+++ b/src/sites/doc/components/header/header.scss
@@ -130,7 +130,7 @@
bottom: 3px;
left: 50%;
margin-left: -17.5px;
- background: url('@/assets/images/item-active.png');
+ background: url('../../../assets/images/item-active.png');
}
}
&:last-of-type {
@@ -207,10 +207,10 @@
.header {
&-logo {
.logo-link {
- background: url('@/assets/images/logo-header-white.png') no-repeat
- center/100%;
+ background: url('../../../assets/images/logo-header-white.png')
+ no-repeat center/100%;
&.react {
- background: url('@/assets/images/logo-header-white-react.png')
+ background: url('../../../assets/images/logo-header-white-react.png')
no-repeat center/100%;
}
&.jdb {
@@ -268,12 +268,12 @@
position: relative;
&.select-down {
.header-select-hd {
- background-image: url('@/assets/images/icon-select-white-down.png');
+ background-image: url('../../../assets/images/icon-select-white-down.png');
}
}
&.select-up {
.header-select-hd {
- background-image: url('@/assets/images/icon-select-white-up.png');
+ background-image: url('../../../assets/images/icon-select-white-up.png');
}
}
.guild-line {
@@ -410,8 +410,8 @@
.header {
&-logo {
.logo-link {
- background: url('@/assets/images/logo-header-red.png') no-repeat
- center/100%;
+ background: url('../../../assets/images/logo-header-red.png')
+ no-repeat center/100%;
&.react {
background: url('https://img14.360buyimg.com/imagetools/jfs/t1/124864/1/33144/4732/63a97786F51517a97/a9ca3c1e043ceeb4.png')
no-repeat center/100%;
@@ -471,12 +471,12 @@
position: relative;
&.select-down {
.header-select-hd {
- background-image: url('@/assets/images/icon-select-gray-down.png');
+ background-image: url('../../../assets/images/icon-select-gray-down.png');
}
}
&.select-up {
.header-select-hd {
- background-image: url('@/assets/images/icon-select-gray-up.png');
+ background-image: url('../../../assets/images/icon-select-gray-up.png');
}
}
.guild-line {
@@ -613,8 +613,8 @@
.header {
&-logo {
.logo-link {
- background: url('@/assets/images/logo-header-red.png') no-repeat
- center/100%;
+ background: url('../../../assets/images/logo-header-red.png')
+ no-repeat center/100%;
&.react {
background: url('https://img14.360buyimg.com/imagetools/jfs/t1/124864/1/33144/4732/63a97786F51517a97/a9ca3c1e043ceeb4.png')
no-repeat center/100%;
@@ -673,12 +673,12 @@
&-box {
&.select-down {
.header-select-hd {
- background-image: url('@/assets/images/icon-select-white-down.png');
+ background-image: url('../../../assets/images/icon-select-white-down.png');
}
}
&.select-up {
.header-select-hd {
- background-image: url('@/assets/images/icon-select-white-up.png');
+ background-image: url('../../../assets/images/icon-select-white-up.png');
}
}
.guild-line {
@@ -818,7 +818,27 @@
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
+.fade-enter {
+ opacity: 0;
+}
+.fade-enter-active {
+ opacity: 1;
+ transition: opacity 0.3s;
+}
+.fade-exit {
+ opacity: 1;
+}
+.fade-exit-active {
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+.fade-content {
+ background-color: #f9f9f9;
+ padding: 20px;
+ border: 1px solid #ddd;
+ margin-top: 10px;
+}
.site-guid-data {
// display: block !important;
line-height: normal;
diff --git a/src/sites/doc/components/header/header.tsx b/src/sites/doc/components/header/header.tsx
index 10ae97f43c..3893d9d409 100644
--- a/src/sites/doc/components/header/header.tsx
+++ b/src/sites/doc/components/header/header.tsx
@@ -4,6 +4,7 @@ import { version } from '/package.json'
import config from '../../../config/env'
import './header.scss'
import { useNavigate, useLocation } from 'react-router-dom'
+import { CSSTransition } from 'react-transition-group'
import {
SiteVueTaro,
SiteReactTaro,
@@ -22,7 +23,7 @@ import {
const Header = () => {
const navigate = useNavigate()
const location = useLocation()
- const [currLang, setCurrLang] = useState({})
+ const [currLang, setCurrLang] = useState({ locale: '' })
const toHome = () => {
navigate('/')
@@ -47,29 +48,29 @@ const Header = () => {
{ name: '中文', locale: 'zh-CN' },
{ name: 'English', locale: 'en-US' },
]
- const isZh = currLang.locale == 'zh-CN'
+ const isZh = true
const toLink = (item: any) => {}
const [visible, setVisible] = useState(false)
const handleSwitchLocale = (e: any) => {
- const classList: string[] = [].slice.call(e.target.classList)
- if (classList.indexOf('curr-lang') > -1) {
- return setVisible(!visible)
- }
- const name = e.target.innerText
- setVisible(!visible)
- const [{ locale }] = langs.filter((l) => name == l.name)
-
- let link = ''
- if (config.locales.some((l) => window.location.href.indexOf(l) > -1)) {
- link = window.location.href.replace(/\#\/([a-z-]+)/gi, `#/${locale}`)
- } else {
- link = window.location.href.replace(/\#\//gi, `#/${locale}/`)
- }
- window.location.href = link
+ // const classList: string[] = [].slice.call(e.target.classList)
+ // if (classList.indexOf('curr-lang') > -1) {
+ // return setVisible(!visible)
+ // }
+ // const name = e.target.innerText
+ // setVisible(!visible)
+ // const [{ locale }] = langs.filter((l) => name == l.name)
+ // let link = ''
+ // if (config.locales.some((l) => window.location.href.indexOf(l) > -1)) {
+ // link = window.location.href.replace(/\#\/([a-z-]+)/gi, `#/${locale}`)
+ // } else {
+ // link = window.location.href.replace(/\#\//gi, `#/${locale}/`)
+ // }
+ // window.location.href = link
}
const isReactTaro = location.pathname.includes('taro/react')
const headerBck = SiteReactTaro.header
const [isShowGuid, setIsShowGuid] = useState(false)
+ const [isShowGuid4, setIsShowGuid4] = useState(false)
const [selectedVersion, setSelectedVersion] = useState('3x')
const [selectedLanguage, setSelectedLanguage] = useState('')
const handleMouseHover = (isHovered) => {
@@ -88,7 +89,7 @@ const Header = () => {
setSelectedLanguage(language)
}
const onMouseHover4 = (isHovered) => {
- // setIsShowGuid(isHovered)
+ setIsShowGuid4(isHovered)
}
console.log(headerBck)
return (
@@ -122,8 +123,11 @@ const Header = () => {
onMouseEnter={() => handleMouseHover(true)}
onMouseLeave={() => handleMouseHover(false)}
// tabIndex="0"
- className="header-select-box"
- // className={isShowGuid ? 'select-up' : 'select-down'}
+ className={
+ isShowGuid
+ ? 'header-select-box select-up'
+ : 'header-select-box select-down'
+ }
onClick={handleClick}
>
-
- 当前环境：development ,代码 PR 合并后，文档会自动同步至
- https://github.com/jdf2e/nutui-docs
-
+ {/* // Search */}
+
+
-
+ {headerBck.map((item) => (
+
- + toLink(item)}> + {isZh ? item.cName : item.eName} + + + ))} +
-
+ handleMouseHover(true)} + onMouseLeave={() => handleMouseHover(false)} + // tabIndex="0" + className="header-select-box" + // className={isShowGuid ? 'select-up' : 'select-down'} + onClick={handleClick} + > +++ {selectedVersion} + ++ ++ {reactGuide.map((item, indexKey) => ( ++++ ))} +++
+
{item.type}++ {item.data.map((info, index) => ( ++++ ))} +{info.name}++ {info.language.map((lang, index) => ( ++++ ))} +{lang}+{info.app}+
+ -
+ onMouseHover4(true)} + onMouseLeave={() => onMouseHover4(false)} + className="header-select-box" + > +++ {isZh ? '更多' : 'More'} + ++ ++ {moreGuide.map((item, indexKey) => ( ++++ ))} ++ {item.icon &&+ {item.datas.map((info, index) => ( ++ {' '} + {isZh ? item.type.cName : item.type.eName} +++ {info.plat && ( ++ ))} ++ {isZh ? info.plat.cName : info.plat.eName} ++ )} + {info.data.map((info2, index2) => ( +handleVersionSelect(info2.name)} + > ++ ))} +{info2.name}++ {info2.language.map((lang, index2) => ( ++ {/*++ ))} +handleLanguageSelect(lang)} + > + {lang} ++{info2.app}*/} +
+ {!isReactTaro && (
+
- {}}> + En/中 + + )} +
- + {repository.git && ( + + )} + {repository.gitee && ( + + )} + +
@@ -131,51 +135,64 @@ const Header = () => {
-
- {reactGuide.map((item, indexKey) => (
+
+
-
-
-
- {item.type}
-
- {item.data.map((info, index) => (
-
+
-
- ))}
- {info.name}
-
- {info.language.map((lang, index) => (
-
+ ))}
-
+ {lang}
+ {reactGuide.map((item, indexKey) => (
+
+
- ))}
-
+
+
+ {item.type}
+
+ {item.data.map((info, index) => (
+
+ ))}
+
- {info.name}
+
+ {info.language.map((lang, index) => (
+
- ))}
-
+
+ ))}
{lang}
+ {info.app}
+ {info.app}
+ onMouseHover4(true)}
onMouseLeave={() => onMouseHover4(false)}
- className="header-select-box"
+ // className="header-select-box"
+ className={
+ isShowGuid4
+ ? 'header-select-box select-up'
+ : 'header-select-box select-down'
+ }
+ onClick={() => {
+ setIsShowGuid4(!isShowGuid4)
+ }}
>
)
}
diff --git a/src/sites/doc/components/demoblock/codeblock.tsx b/src/sites/doc/components/demoblock/codeblock.tsx
index 541813b962..6623682941 100644
--- a/src/sites/doc/components/demoblock/codeblock.tsx
+++ b/src/sites/doc/components/demoblock/codeblock.tsx
@@ -4,7 +4,7 @@ import APPContext from '../../context'
import DemoBlock from './demoblock'
import './demoblock.scss'
-const modules = import.meta.glob(`@/packages/**/demos/h5/*.tsx`, {
+const modules = import.meta.glob(`@/packages/**/demos/**/*.tsx`, {
query: '?raw',
import: 'default',
eager: true,
diff --git a/src/sites/doc/components/header/header.tsx b/src/sites/doc/components/header/header.tsx
index bc68705041..4b577b3bf9 100644
--- a/src/sites/doc/components/header/header.tsx
+++ b/src/sites/doc/components/header/header.tsx
@@ -42,7 +42,6 @@ const Header = () => {
(l) => location.pathname.indexOf(l.locale) > -1
)[0]
setCurrLang(lang)
- console.log(lang)
}, [location])
const langs = [
@@ -69,7 +68,7 @@ const Header = () => {
// }
// window.location.href = link
}
- const isReactTaro = location.pathname.includes('taro/react')
+ const isReactTaro = location.pathname.includes('-taro')
const headerBck = SiteReactTaro.header
const [isShowGuid, setIsShowGuid] = useState(false)
const [isShowGuid4, setIsShowGuid4] = useState(false)
@@ -78,6 +77,13 @@ const Header = () => {
const handleMouseHover = (isHovered) => {
setIsShowGuid(isHovered)
}
+ const toAnother = () => {
+ if (!location.pathname.includes('taro')) {
+ navigate(location.pathname + '-taro');
+ } else{
+ navigate(location.pathname.replace('-taro', ''));
+ }
+ };
const handleClick = () => {
setIsShowGuid(!isShowGuid)
@@ -93,7 +99,6 @@ const Header = () => {
const onMouseHover4 = (isHovered) => {
setIsShowGuid4(isHovered)
}
- console.log(headerBck)
return (
{isZh ? '更多' : 'More'}
-
{moreGuide.map((item, indexKey) => (
@@ -184,7 +201,9 @@ const Header = () => {
key={indexKey}
>
+
- {item.icon && }
+ {item.icon && (
+
+ )}
+
{' '}
{isZh ? item.type.cName : item.type.eName}
@@ -204,12 +223,17 @@ const Header = () => {
onClick={() => handleVersionSelect(info2.name)}
>
{!isReactTaro && (
From a5eb55b7f5df351287dcf93518dbbb035c7b7ee5 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Mon, 20 Jan 2025 15:39:43 +0800
Subject: [PATCH 03/14] feat: save search component progress
---
src/sites/doc/components/header/header.tsx | 190 +++++++++++---------
src/sites/doc/components/search/search.scss | 69 +++++++
src/sites/doc/components/search/search.tsx | 96 ++++++++++
3 files changed, 270 insertions(+), 85 deletions(-)
create mode 100644 src/sites/doc/components/search/search.scss
create mode 100644 src/sites/doc/components/search/search.tsx
diff --git a/src/sites/doc/components/header/header.tsx b/src/sites/doc/components/header/header.tsx
index 3893d9d409..bc68705041 100644
--- a/src/sites/doc/components/header/header.tsx
+++ b/src/sites/doc/components/header/header.tsx
@@ -5,6 +5,7 @@ import config from '../../../config/env'
import './header.scss'
import { useNavigate, useLocation } from 'react-router-dom'
import { CSSTransition } from 'react-transition-group'
+import Search from '../search/search'
import {
SiteVueTaro,
SiteReactTaro,
@@ -51,6 +52,7 @@ const Header = () => {
const isZh = true
const toLink = (item: any) => {}
const [visible, setVisible] = useState(false)
+ const [activeLink, setActiveLink] = useState('指南')
const handleSwitchLocale = (e: any) => {
// const classList: string[] = [].slice.call(e.target.classList)
// if (classList.indexOf('curr-lang') > -1) {
@@ -71,7 +73,7 @@ const Header = () => {
const headerBck = SiteReactTaro.header
const [isShowGuid, setIsShowGuid] = useState(false)
const [isShowGuid4, setIsShowGuid4] = useState(false)
- const [selectedVersion, setSelectedVersion] = useState('3x')
+ const [selectedVersion, setSelectedVersion] = useState('3.0.0-beta.11')
const [selectedLanguage, setSelectedLanguage] = useState('')
const handleMouseHover = (isHovered) => {
setIsShowGuid(isHovered)
@@ -107,12 +109,20 @@ const Header = () => {
{info2.name}
-
+
{info2.language.map((lang, index2) => (
))}
-
+ handleLanguageSelect(lang)}
+ onClick={() =>
+ handleLanguageSelect(lang)
+ }
>
{lang}
@@ -223,7 +247,7 @@ const Header = () => {
))}
- {/* // Search */}
+
- ([])
+ const [searchCurName, setSearchCurName] = useState('')
+ const [searchIndex, setSearchIndex] = useState(0)
+ const navigate = useNavigate()
+ const onfocus = () => {
+ // 处理聚焦事件
+ }
+
+ const onblur = () => {
+ // 处理失焦事件
+ }
+
+ const choseList = (e) => {
+ let index = searchIndex;
+ if (e.keyCode == 40) {
+ index++;
+ }
+ if (e.keyCode == 38) {
+ index--;
+ }
+ if (searchIndex < 0) {
+ index = 0;
+ }
+ if (searchList.length > 0) {
+ const cName = searchList[index] && searchList[index].name;
+ if (cName) {
+ setSearchCurName(cName);
+ setSearchIndex(index);
+ if (e.keyCode == 13) {
+ navigate(`/zh-CN/component/${(searchList[index].name || '').toLowerCase()}`);
+ setSearchCurName('')
+ setSearchIndex(0)
+ setSearchVal('')
+ }
+ }
+ }
+ };
+
+ const checklist = () => {
+ setSearchCurName('')
+ setSearchIndex(0)
+ setSearchVal('')
+ };
+ const onChange = (e) => {
+ const val = e.target.value
+ setSearchVal(val)
+ const list = navList.filter(
+ (i) =>
+ i.cName.includes(val) ||
+ i.name.toLowerCase().includes(val.toLowerCase())
+ )
+ setSearchList(list)
+ }
+ useEffect(() => {
+ if (searchVal === '') {
+ setSearchList([])
+ }
+ }, [searchVal])
+ return (
+
+
-
{headerBck.map((item) => (
-
- +
- { + setActiveLink(item.cName) + }} + > toLink(item)}> {isZh ? item.cName : item.eName} @@ -136,39 +146,43 @@ const Header = () => {
- {reactGuide.map((item, indexKey) => (
-
@@ -191,63 +205,69 @@ const Header = () => {
-
-
-
- {item.type}
-
- {item.data.map((info, index) => (
-
+
-
+
+
+ ))}
+ {info.name}
-
- {info.language.map((lang, index) => (
-
-
-
- ))}
- {lang}
- {info.app}
+
+ {reactGuide.map((item, indexKey) => (
+
-
+
- ))}
-
+
+
+ {item.type}
+
+ {item.data.map((info, index) => (
+
+ ))}
+
+ {info.name}
+
+ {info.language.map((lang, index) => (
+
- ))}
-
+
+ ))}
{lang}
+ {info.app}
+
- {moreGuide.map((item, indexKey) => (
-
{!isReactTaro && (
diff --git a/src/sites/doc/components/search/search.scss b/src/sites/doc/components/search/search.scss
new file mode 100644
index 0000000000..dc27b2f741
--- /dev/null
+++ b/src/sites/doc/components/search/search.scss
@@ -0,0 +1,69 @@
+.search-box {
+ position: relative;
+ min-width: 300px;
+ height: 22px;
+ line-height: 22px;
+ .search-input {
+ height: 22px;
+ padding-left: 42px;
+ font-size: 14px;
+ vertical-align: middle;
+ background-color: transparent;
+ background-image: url('../../../assets/images/input-search.png');
+ background-repeat: no-repeat;
+ font-size: 14px;
+ color: #fff;
+ &:focus {
+ outline: none;
+ }
+ }
+ .search-input::placeholder {
+ color: #888 !important;
+ // font-style: italic;
+ // opacity: 1; /* 确保不被透明度影响 */
+ }
+}
+.search-list {
+ background: #fff;
+ position: absolute;
+ width: 300px;
+ list-style: none;
+ border: 1px solid #f2f2f2;
+ z-index: 99999;
+ top: 27px;
+ padding: 0;
+ li {
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ a {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 100%;
+ padding-left: 40px;
+ text-decoration: none;
+ color: #666;
+ }
+ &:hover {
+ // background: #6096ff;
+ color: $doc-default-color;
+ a {
+ color: $doc-default-color;
+ }
+ }
+ }
+ .cur {
+ background: $doc-default-color;
+ color: #fff;
+ &:hover {
+ color: #fff;
+ font-weight: bold;
+ a {
+ color: #fff;
+ }
+ }
+ a {
+ color: #fff;
+ }
+ }
+}
diff --git a/src/sites/doc/components/search/search.tsx b/src/sites/doc/components/search/search.tsx
new file mode 100644
index 0000000000..4291bac671
--- /dev/null
+++ b/src/sites/doc/components/search/search.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react'
+import './search.scss'
+import { Link, useNavigate } from 'react-router-dom'
+import { nav } from '../../../config'
+export default function Search() {
+ const navList = nav.flatMap((item) => item.packages).filter((i) => i.show)
+ const [searchVal, setSearchVal] = useState('')
+ const [searchList, setSearchList] = useState
-
+
- {item.icon && (
-
- )}
-
- {item.datas.map((info, index) => (
-
- {' '}
- {isZh ? item.type.cName : item.type.eName}
-
-
- {info.plat && (
-
+ ))}
+
- {isZh ? info.plat.cName : info.plat.eName}
-
+
+ {moreGuide.map((item, indexKey) => (
+
+ ))}
+
+
+ ))}
+
+ {item.icon && (
+
)}
- {info.data.map((info2, index2) => (
-
- ))}
- handleVersionSelect(info2.name)}
- >
-
+ {item.datas.map((info, index) => (
+ {info2.name}
+
+ {' '}
+ {isZh ? item.type.cName : item.type.eName}
+
+
+ {info.plat && (
+
- ))}
-
+ {isZh ? info.plat.cName : info.plat.eName}
+
+ )}
+ {info.data.map((info2, index2) => (
handleVersionSelect(info2.name)}
>
- {info2.language.map((lang, index2) => (
-
- ))}
-
-
- {/*
- handleLanguageSelect(lang)
- }
- >
- {lang}
+
+ {/* {info2.name}
+
+ {info2.language.map((lang, index2) => (
+
- ))}
+ ))}
+
+
-
+ handleLanguageSelect(lang)
+ }
+ >
+ {lang}
+
{info2.app}
*/}
{info2.app}
*/}
-
+
+
+ )
+}
From 004249edd4582997c7b6d47b8208dc9b73b20dc1 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Mon, 20 Jan 2025 17:39:54 +0800
Subject: [PATCH 04/14] feat: save search component progress
---
src/sites/assets/styles/highlight.scss | 6 +-
src/sites/assets/styles/md-style.scss | 98 ++++++-
src/sites/doc/App.scss | 247 ++++++++++++++----
src/sites/doc/App.tsx | 74 ++++--
.../doc/components/demoblock/demoblock.tsx | 2 +-
src/sites/doc/components/issue/issue.scss | 25 +-
src/sites/doc/components/issue/issue.tsx | 4 +-
7 files changed, 356 insertions(+), 100 deletions(-)
diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss
index 3a8f61f0e4..5e0f85c795 100644
--- a/src/sites/assets/styles/highlight.scss
+++ b/src/sites/assets/styles/highlight.scss
@@ -13,10 +13,10 @@ code {
-webkit-font-smoothing: auto;
background-color: #fafafa;
border-radius: 16px;
-}
-code span {
- font-family: $nutui-doc-code-font-family;
+ span {
+ font-family: $nutui-doc-code-font-family;
+ }
}
pre {
diff --git a/src/sites/assets/styles/md-style.scss b/src/sites/assets/styles/md-style.scss
index e60139037a..2578487490 100644
--- a/src/sites/assets/styles/md-style.scss
+++ b/src/sites/assets/styles/md-style.scss
@@ -1,12 +1,19 @@
@import 'highlight.scss';
+$doc-smile-curve: url('https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png') !default;
.doc-content-document {
position: relative;
+ min-width: 1000px;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 445px;
+
+ &.full {
+ padding-right: 100px;
+ }
+
.card {
margin-bottom: 24px;
padding: 24px;
@@ -21,11 +28,11 @@
-webkit-font-smoothing: auto;
&:hover {
- color: mix(black, $nutui-doc-blue, 10%);
+ color: darken($nutui-doc-blue, 10%);
}
&:active {
- color: mix(black, $nutui-doc-blue, 20%);
+ color: darken($nutui-doc-blue, 20%);
}
}
@@ -38,13 +45,11 @@
color: $nutui-doc-black;
font-weight: bold;
line-height: 1.5;
-
- &[id] {
- cursor: pointer;
- }
}
&.isComponent {
+ padding-top: 0;
+
h1 {
display: none;
}
@@ -65,20 +70,20 @@
left: 16px;
width: 44px;
height: 17px;
- background: url('https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png');
+ background: $doc-smile-curve;
background-size: 100% 100%;
}
}
h2 {
- margin: 45px 0 20px;
- font-size: 24px;
+ margin: 16px 0;
+ font-size: 20px;
}
h3 {
margin: 16px 0px;
- font-weight: 600;
- font-size: 20px;
+ font-weight: 400;
+ font-size: 18px;
}
h4 {
@@ -98,12 +103,14 @@
font-size: 14px;
line-height: 22px;
}
+
strong {
margin: 24px 0 12px;
font-weight: bold;
font-size: 14px;
color: #333;
}
+
table {
width: 100%;
margin-top: 12px;
@@ -112,12 +119,16 @@
line-height: 1.5;
border-collapse: collapse;
border: 1px solid #eee;
+
th {
padding: 8px 20px;
font-weight: 600;
text-align: left;
border-left: 1px solid #e9e9e9;
background-color: #f7f8fa;
+ // &:first-child {
+ // padding-left: 0;
+ // }
&:last-child {
padding-right: 0;
@@ -128,6 +139,7 @@
padding: 8px 20px;
border-top: 1px solid $nutui-doc-code-background-color;
border-left: 1px solid #e9e9e9;
+
&:first-child {
// padding-left: 0;
border-left: 0px;
@@ -157,6 +169,11 @@
}
}
+ ul,
+ ol {
+ margin: 16px 0;
+ }
+
ul li,
ol li {
position: relative;
@@ -212,14 +229,21 @@
blockquote {
margin: 16px 0px;
padding: 16px;
- background-color: #fff4f0;
- border-left: 6px solid #fa192c;
+ background-color: rgba($doc-default-color, 0.06);
+ border-left: 6px solid $doc-default-color;
border-radius: 3px;
+
p {
color: #1a1a1a;
}
}
+ img {
+ max-width: 100%;
+ // margin: 16px 0;
+ // border-radius: $nutui-doc-border-radius;
+ }
+
&--changelog,
&--changelog-v3 {
strong {
@@ -240,21 +264,69 @@
}
}
}
+
.handle-part {
height: 50px;
display: flex;
justify-content: flex-end;
align-items: center;
+
.online-btn {
display: block;
color: #5555e2;
background-color: #fff;
font-size: 14px;
cursor: pointer;
+
&:hover {
color: blue;
text-decoration: underline;
}
}
}
+
+ .contributor {
+ display: table;
+ width: 1120px;
+ margin-top: 12px;
+ color: #666;
+ font-size: 14px;
+ line-height: 1.5;
+ border-collapse: collapse;
+ border: 0;
+ table-layout: fixed;
+
+ .contributor-head {
+ display: table-row;
+
+ .contributor-head-item {
+ display: table-cell;
+ padding: 10px 15px;
+ font-weight: 600;
+ text-align: center;
+ background-color: transparent;
+ border: 0;
+
+ a {
+ img {
+ width: 60px;
+ height: 60px;
+ }
+ }
+ }
+ }
+
+ .contributor-body {
+ display: table-row;
+ border-top: 1px solid #eee;
+ padding-top: 15px;
+
+ .contributor-body-item {
+ display: table-cell;
+ padding: 10px 15px;
+ border: 0;
+ text-align: center;
+ }
+ }
+ }
}
diff --git a/src/sites/doc/App.scss b/src/sites/doc/App.scss
index 13ed9d9c69..18bec29eb8 100644
--- a/src/sites/doc/App.scss
+++ b/src/sites/doc/App.scss
@@ -1,62 +1,19 @@
-::selection {
- background: $doc-default-color;
- color: #fff;
-}
-
$doc-title-height: 137px;
-#doc {
- background: #fff;
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: column;
-}
-
.doc {
- &-title {
- width: 100%;
- height: $doc-title-height;
- z-index: 2;
- &-position {
- top: 0px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 40px;
- border-bottom: 1px solid #eee;
- background: #fff;
- visibility: visible;
- opacity: 1;
- transition: opacity 0.8s;
- &.fixed {
- width: calc(100% - 290px);
- position: fixed;
- padding: 24px 48px;
- .title {
- font-size: 24px;
- font-weight: bold;
- }
- }
- &.hidden {
- visibility: hidden;
- opacity: 0;
- }
- .title {
- font-size: 40px;
- font-weight: bold;
- }
- }
- }
&-content {
margin-left: 290px;
display: flex;
flex-direction: column;
-
+ background: #fff;
&-document {
min-height: 800px;
- min-width: 1000px;
+
+ .markdown-body {
+ min-height: 600px;
+ }
}
+
&-tabs {
position: absolute;
right: 475px;
@@ -72,6 +29,7 @@ $doc-title-height: 137px;
border-radius: 2px;
background: #eee;
box-shadow: rgb(0 0 0 / 15%) 0px 2px 4px;
+
&.single {
padding: 0;
@@ -80,6 +38,7 @@ $doc-title-height: 137px;
cursor: auto;
}
}
+
.tab-item {
position: relative;
padding: 0 10px;
@@ -90,21 +49,201 @@ $doc-title-height: 137px;
text-align: center;
border-radius: 2px;
background: #eee;
+
&.cur {
font-weight: bold;
color: #323232;
background: #fff;
}
}
+
+ &.hidden {
+ visibility: hidden;
+ opacity: 0;
+ }
+ }
+
+ &-contributors {
+ margin: 40px 0;
+
+ a {
+ position: relative;
+ }
+
+ img {
+ height: 26px;
+ height: 26px;
+ border-radius: 50%;
+ margin-left: 8px;
+ }
+
+ .contributors-hover {
+ display: none;
+ padding: 5px 10px;
+ color: #fff;
+ font-size: 12px;
+ background-color: #000;
+ border-radius: 5px;
+ position: absolute;
+ /* min-width:150px; */
+ white-space: nowrap;
+ top: -200%;
+ transform: translateX(-55%);
+ }
+
+ a:hover {
+ .contributors-hover {
+ display: inline-block;
+ }
+ }
+ }
+
+ &-contributors-gap {
+ padding-top: 20px;
+ border-top: 1px solid #eeeaea;
+ }
+
+ &-faq {
+ &-title {
+ margin: 38px 0 20px;
+ font-size: 24px;
+ font-weight: bold;
+ }
+
+ &-item {
+ margin: 0 8px 28px;
+ }
+
+ &-que {
+ font-size: 18px;
+ line-height: 30px;
+ color: #323232;
+ font-weight: 600;
+ }
+
+ &-aws {
+ margin-top: 8px;
+ color: #34495e;
+ font-size: 14px;
+ line-height: 26px;
+ }
+ }
+ }
+
+ &-title {
+ width: 100%;
+ height: $doc-title-height;
+ z-index: 2;
+
+ &-content {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ align-items: flex-start;
+ width: calc(100% - 408px);
+
+ .npm-package {
+ img {
+ margin-right: 5px;
+ }
+ }
+ }
+
+ &-position {
+ top: 0px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 24px 40px;
+ // line-height: 56px;
+ border-bottom: 1px solid #eee;
+ background: #fff;
+ visibility: visible;
+ opacity: 1;
+ // transition: opacity 0.8s linear, visibility 0.8s linear;
+ transition: opacity 0.8s;
+
+ &.fixed {
+ width: calc(100% - 290px);
+ position: fixed;
+ padding: 24px 48px;
+ z-index: 999;
+ .title {
+ font-size: 24px;
+ font-weight: bold;
+ }
+
+ .doc-content-tabs {
+ position: revert;
+ }
+ }
+
+ &.hidden {
+ visibility: hidden;
+ opacity: 0;
+ }
+
+ .title {
+ font-size: 32px;
+ font-weight: bold;
+ }
}
}
}
-.nutui-react--demo-button {
- display: none;
-}
-.nutui-react--demo-wrapper {
- .nutui-react--demo-button {
+::v-deep(.contributors-banner) {
+ display: flex;
+ width: 800px;
+
+ .banner-link {
+ position: relative;
+ flex: 1;
+ margin-right: 20px;
+
+ .shadow {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ opacity: 0;
+ transition: all linear 0.2s;
+ }
+
+ &:hover {
+ .shadow {
+ opacity: 1;
+ }
+
+ .img-icon {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+
+ img {
display: block;
+ width: 100%;
+ height: 200px;
+ }
+
+ .img-icon {
+ position: absolute;
+ z-index: 999;
+ bottom: -10px;
+ right: 0;
+ width: 80px;
+ height: 70px;
+ transition: all linear 0.2s;
+ }
+
+ .img-icon-book {
+ width: 50px;
+ height: 50px;
+ bottom: 0;
+ right: 10px;
}
}
diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx
index dbce12d5ae..7a44b5cb55 100644
--- a/src/sites/doc/App.tsx
+++ b/src/sites/doc/App.tsx
@@ -11,7 +11,7 @@ import { getComponentName } from '@/sites/assets/util'
import routers from './router'
import loadable from '@loadable/component'
import CodeBlock from './components/demoblock/codeblock'
-
+import { BackTop } from '../../packages/backtop/backtop'
const Title = () => {
let location = useLocation()
const s = window.location.hash.split('/')
@@ -21,8 +21,23 @@ const Title = () => {
}, [location])
const [componentName, setComponentName] = useState({ name: '', cName: '' })
return (
- - 0 ? 'block' : 'none' }}
+ >
+ {searchList.map((item: any, index) => {
+ console.log(item)
+ return (
+
- checklist()}> + + {item.name} + {item.cName} + + + ) + })} +
- {componentName.name} {s[1] === 'zh-CN' && componentName.cName}
+
+
)
}
@@ -68,33 +83,42 @@ const App = () => {
+ {componentName.name} {s[1] === 'zh-CN' && componentName.cName}
+
+
+
+ 
+
+ 
+
+
+
+
-
- {routers.map((ru, k) => {
- const path = ru.component.name?.substring(
- 0,
- ru.component.name.lastIndexOf('/')
- )
- const C = useMemo(() => loadable(ru.component), [ru.component])
- return (
-
-
-
-
- }
- >
- )
- })}
-
+
+
+
+ {routers.map((ru, k) => {
+ const path = ru.component.name?.substring(
+ 0,
+ ru.component.name.lastIndexOf('/')
+ )
+ const C = useMemo(
+ () => loadable(ru.component),
+ [ru.component]
+ )
+ return (
+
+
+
+
+ }
+ >
+ )
+ })}
+
+
+
{componentName.name} {s[1] === 'zh-CN' && componentName.cName}
-
+ ) : (
+ 
+
+
+
+
+
+
+ )}
+
+
+
@@ -101,8 +106,8 @@ const Header = () => {
{isReactTaro ? '小程序' : 'H5'}
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 4b2554a4df..77091deeda 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -1,6 +1,6 @@
import React, { Fragment, useEffect, useState } from 'react'
import { nav } from '@/config.json'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation } from 'react-router-dom'
import './nav.scss'
import useLocale from '@/sites/assets/locale/uselocale'
@@ -19,6 +19,8 @@ const Nav = () => {
useEffect(() => {
document.addEventListener('scroll', scrollNav)
}, [])
+ const location = useLocation()
+ const isTaro = location.pathname.includes('-taro')
return (
-
@@ -38,7 +40,7 @@ const Nav = () => {
className={({ isActive, isPending }) =>
isPending ? '' : isActive ? 'active' : ''
}
- to={`${lang ? `/${lang}` : ''}/component/${cp.name}`}
+ to={`${lang ? `/${lang}` : ''}/component/${cp.name}${isTaro? '-taro' : ''}`}
>
{cp.name}
{lang === 'zh-CN' && cp.cName}
From a8455b52d4fd51ca964ca4dd8db35fe7ca57eca7 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Tue, 21 Jan 2025 11:19:46 +0800
Subject: [PATCH 06/14] feat: save lang switch
---
src/sites/assets/images/icon-add.svg | 3 +
src/sites/doc/components/header/header.tsx | 120 +++++++++++++++------
src/sites/doc/components/issue/issue.scss | 6 +-
src/sites/doc/components/nav/nav.tsx | 2 +-
src/sites/doc/main.tsx | 2 +-
src/sites/doc/router.ts | 6 ++
6 files changed, 100 insertions(+), 39 deletions(-)
create mode 100644 src/sites/assets/images/icon-add.svg
diff --git a/src/sites/assets/images/icon-add.svg b/src/sites/assets/images/icon-add.svg
new file mode 100644
index 0000000000..313565f560
--- /dev/null
+++ b/src/sites/assets/images/icon-add.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/sites/doc/components/header/header.tsx b/src/sites/doc/components/header/header.tsx
index 4b577b3bf9..6f81b823f5 100644
--- a/src/sites/doc/components/header/header.tsx
+++ b/src/sites/doc/components/header/header.tsx
@@ -24,7 +24,7 @@ import {
const Header = () => {
const navigate = useNavigate()
const location = useLocation()
- const [currLang, setCurrLang] = useState
{item.data.map((info, index) => (
-
+
checkGuidTheme(info, 'Basis')}
+ key={info.link}
+ >
{info.name}
{info.language.map((lang, index) => (
-
+
))}
@@ -244,7 +276,9 @@ const Header = () => {
-
(nav)
const [lang] = useLocale()
const [fixed, setFixed] = useState(false)
+ const [isGuide, setIsGuide] = useState(false)
+ const [activeName, setActiveName] = useState('intro-react')
const scrollNav = () => {
let top = document.documentElement.scrollTop
if (top > 64) {
@@ -19,56 +21,99 @@ const Nav = () => {
useEffect(() => {
document.addEventListener('scroll', scrollNav)
}, [])
+
const location = useLocation()
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ if (location.pathname.includes('/guide')) {
+ setIsGuide(true)
+ } else {
+ setIsGuide(false)
+ }
+ }, [location])
+ const changeNav = (_nav: any) => {
+ setActiveName(_nav.name)
+
+ navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide/` + _nav.name.toLowerCase())
+ }
const isTaro = location.pathname.includes('-taro')
+ const isZh = lang === 'zh-CN'
return (
+
diff --git a/src/sites/doc/docs/react/contributing-react.md b/src/sites/doc/docs/react/contributing-react.md
new file mode 100644
index 0000000000..21ad78757a
--- /dev/null
+++ b/src/sites/doc/docs/react/contributing-react.md
@@ -0,0 +1,121 @@
+## 贡献指南
+
+您可根据《[NutUI 邀您共建，Contributor 您好](https://jelly.jd.com/article/6320528b92d94a0068685525)》中的共建方向为 NutUI 社区做出贡献。
+
+
+
+本篇指南会指导你如何为 NutUI 贡献一份自己的力量，请在您要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南，保证贡献是符合规范并且能帮助到社区。
+
+## 行为准则
+
+为保证良好的网络环境，营造舒适的开发氛围，希望所有的贡献者都能遵守这份[行为准则](https://www.contributor-covenant.org/zh-cn/version/2/1/code_of_conduct/)，也请花时间阅读一遍全文明确哪些行为是禁止的，哪些行为是可行的。
+
+## 分支管理
+
+目前 github 上长期维护分支 main。如果您要修一个 bug 或新增功能，请发 pull request 到 main 分支。
+
+
+
+官网会同步更新 [NutUI-React 的发布周期](https://github.com/jdf2e/nutui-react/releases)，同时每天都会有开发者 review github 中提交的代码。发版周期是每 1 周/次，通常会提前合并新的代码或功能，发布正式包；期间如遇紧急需求，可基于指定分支发布 beta 版本。
+
+## Issue 报告指南
+
+如果提交的是 Bug 报告，请务必遵守 [Bug report](https://github.com/jdf2e/nutui/blob/next/.github/ISSUE_TEMPLATE/bug_report.md) 模板。
+
+## Bugs
+
+我们使用 [issue-helper](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) 来做 bug 追踪。希望大家通过我们提供的 issue 小助手来提交反馈，并尽可能提供一切开发信息，因为信息越全面，开发响应速度越快，您发现的 bug 会被快速解决。
+
+
+
+提交 bug 之前，请先确保搜索过已有的 [issue](https://github.com/jdf2e/nutui-react/issues) 和阅读了我们的[常见问题](https://nutui.jd.com/#/zh-CN/notice)。
+
+## 功能新增
+
+如果您对现有的组件功能或者 API 有更好的想法，我们同样推荐你使用我们提供的 [issue-helper](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) 提交一个添加新功能的 issue。
+
+
+
+如果你希望协助开发新功能新组件，可扫描[二维码](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png)加入我们的社区共建群。
+
+## 参与贡献
+
+如果你对 github 的 PR 流程还不熟悉，可以阅读下面这 2 篇文章来学习：
+
+
+
+[NutUI 贡献指南](https://github.com/jdf2e/nutui-react/discussions/348)
+
+[github 仓库代码同步](https://github.com/jdf2e/nutui/discussions/687)
+
+## Pull Request 规范
+
+1. 每个 PR 只解决单个问题或者新增单个功能
+
+2. 当新增组件或修改原有组件时，同步更改对应的单元测试和文档，保证代码的稳定
+
+3. commit message 请遵循 [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) 规范
+
+4. PR 信息中最好包括修改了哪个组件，解决了哪个问题，并关联 github 上对应的 issue 链接
+
+## Pull Request 流程
+
+1、fork 主仓库，并同步主仓库的最新代码
+
+2、将项目下载到本地，在项目根目录下运行 npm install，并在本地能正常访问
+
+```
+git clone https://github.com/{github username}/nutui-react.git
+npm install
+npm run dev
+```
+
+3、创建一个新的分支或在对应分支上进行开发
+
+```
+git checkout -b username/xxxx
+git checkout {现有分支名称}
+```
+
+4、如开发涉及新组件或组件的新特性，需要完善组件的中英文文档、组件的单元测试，同时要使用 [nutui-demo](https://github.com/jdf2e/nutui-demo) 对组件测试使用。
+
+5、保证编译功能正常使用
+
+```
+npm run test
+// build 使用 node 17 版本
+// 构建 @nutui/nutui-react
+npm run build
+// 构建 @nutui/nutui-react-taro
+npm run build:taro
+```
+
+6、开发完成后提交到仓库的对应分支上，PR 会在 Review 通过后被合并到主仓库，然后等待 NutUI-React 发布新版本（每周一次）。
+
+### 知识分享
+
+1. 项目使用案例
+
+ 分享 NutUI 的[使用案例](https://nutui.jd.com/next/#/case)，我们会在官网进行推荐展示，准备项目的名称、项目入口（二维码\链接）、logo、示例图、投放平台（H5\小程序\APP等）、nutui 版本等信息，以邮箱的形式提交到 **nutui@jd.com**。
+
+
+
+2. 文章视频投稿
+
+ 分享你的经验（教程、文章、视频等），可以给 **nutui@jd.com** 投稿。在审核通过后，收藏到[官网资源](https://nutui.jd.com/next/#/resource)中，将你的知识与思想传递给 NutUI 的小伙伴们。
+
+
+
+3. 共建分享征集
+
+ 以 NutUI-React 为基础，设计或开发新的工具，开发提效的插件等。有兴趣欢迎加入我们的[社区开发群](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png)交流讨论。
+
+
+
+### Credits
+
+感谢以下所有给 NutUI 贡献过代码的开发者。
+
+
+
+
diff --git a/src/sites/doc/docs/react/international-react.en-US.md b/src/sites/doc/docs/react/international-react.en-US.md
new file mode 100644
index 0000000000..30f695393b
--- /dev/null
+++ b/src/sites/doc/docs/react/international-react.en-US.md
@@ -0,0 +1,42 @@
+# Internationalization
+
+NutUI-React support multiple languages. NutUI uses Chinese as the default language. Use as follows:
+
+## Usage
+
+### Switch languages
+
+:::demo
+
+```javascript
+import { ConfigProvider } from '@nutui/nutui-react'
+import en from '@nutui/nutui-react/dist/locales/en-US'
+
+ReactDOM.render(
+
+ ,
+ document.querySelector('#root')
+)
+```
+
+:::
+
+## Current supported languages:
+
+| Language | Filename | Version |
+| --- | --- | --- |
+| English | en-US | `v1.0.0` |
+| Chinese | zh-CN | `v1.0.0` |
+| Uygur | zh-UG | `v1.3.15` |
+| Traditional Chinese | zh-TW | `v1.0.0` |
+| Indonesian | id-ID | `v1.3.2` |
+| Thai | th-TH | PR |
+
+> View all language configs [Here](https://github.com/jdf2e/nutui-react/tree/main/src/locales).
+
+## Common Questions
+
+### Missing language pack?
+
+Welcome to commit PR If you need new language pack. Changes refer to [language pack](https://github.com/jdf2e/nutui-react/tree/main/src/locales).
diff --git a/src/sites/doc/docs/react/international-react.md b/src/sites/doc/docs/react/international-react.md
new file mode 100644
index 0000000000..be7ed2c381
--- /dev/null
+++ b/src/sites/doc/docs/react/international-react.md
@@ -0,0 +1,43 @@
+# 国际化
+
+NutUI-React 1.0 以上版本支持多语言。组件默认使用中文。
+
+## 使用方法
+
+### 多语言切换
+
+:::demo
+
+```javascript
+// 多语言版本
+import { ConfigProvider } from '@nutui/nutui-react'
+import en from '@nutui/nutui-react/dist/locales/en-US'
+
+ReactDOM.render(
+
+ ,
+ document.querySelector('#root')
+)
+```
+
+:::
+
+## 目前支持的语言:
+
+| 语言 | 文件名 | 版本 |
+| --- | --- | --- |
+| 英语 | en-US | `v1.0.0` |
+| 简体中文 | zh-CN | `v1.0.0` |
+| 维吾尔语 | zh-UG | `v1.3.15` |
+| 繁體中文 | zh-TW | `v1.0.0` |
+| 印度尼西亚语 | id-ID | `v1.3.2` |
+| 泰语 | th-TH | 等待 PR |
+
+> 在 [这里](https://github.com/jdf2e/nutui-react/tree/main/src/locales) 查看所有的语言包源文件。
+
+## 常见问题
+
+### 找不到所需的语言包？
+
+如果上方列表中没有你需要的语言，欢迎给我们提 Pull Request 来增加新的语言包。改动内容可以参考 [语言包](https://github.com/jdf2e/nutui-react/tree/main/src/locales) 的 PR
diff --git a/src/sites/doc/docs/react/intro-react.en-US.md b/src/sites/doc/docs/react/intro-react.en-US.md
new file mode 100644
index 0000000000..9bcccc2eae
--- /dev/null
+++ b/src/sites/doc/docs/react/intro-react.en-US.md
@@ -0,0 +1,42 @@
+# NutUI-React
+
+The NutUI-React component library is suitable for H5 applications of the React technology stack. It can be used out of the box to help developers quickly develop user interfaces, improve development efficiency, and improve development experience.
+
+## Features
+
+- 🚀 70+ high-quality components covering mainstream mobile scenarios
+- 📖 Based on JD APP 10.0 visual specification
+- 🍭 Support on-demand reference
+- 📖 Detailed documentation and examples
+- 💪 Supports TypeScript
+- 💪 Support for server-side rendering (Next.js)
+- 🍭 Support custom themes
+- 🌍 Internationalization support
+- 🍭 Unit test coverage exceeds 80% to ensure stability
+- 📖 Sketch design resources are available
+
+## Examples
+
+
+
+## Compatibility Environment
+
+| Version | Supported Frameworks | Visual Specifications | Compatibility |
+| --- | --- | --- | --- |
+| @nutui/nutui-react 
| React 17\18 | Jingdong [APP 10.0](#/resource) | Modern browsers start with Chrome >= 51、iOS >= 10.0 |
+
+For some older versions of browsers, corresponding polyfills are needed. It is recommended to use @babel/preset-env to address browser compatibility issues. The package provided by NutUI-React has not undergone extensive syntax transformation, so it is necessary to include the NutUI-React package in the compilation phase.
+
+For browsers that do not support CSS variables, it is recommended to use [postcss-var-replace](https://www.npmjs.com/package/postcss-var-replace) to resolve compatibility issues.
+
+## All Contributors
+
+Thanks to the following friends for their contributions to NutUI-React:
+
+
+
+
+
+## LICENSE
+
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
diff --git a/src/sites/doc/docs/react/intro-react.md b/src/sites/doc/docs/react/intro-react.md
new file mode 100644
index 0000000000..eea1cf0f3a
--- /dev/null
+++ b/src/sites/doc/docs/react/intro-react.md
@@ -0,0 +1,42 @@
+# NutUI-React
+
+NutUI-React 组件库，适用于 React 技术栈的 H5 应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。
+
+## 特性
+
+- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 📖 基于京东APP 10.0 视觉规范
+- 🍭 支持按需引用
+- 📖 详尽的文档和示例
+- 💪 支持 TypeScript
+- 💪 支持服务端渲染（Next.js）
+- 🍭 支持定制主题
+- 🌍 国际化支持
+- 🍭 单元测试覆盖率超过 80%，保障稳定性
+- 📖 提供 Sketch 设计资源
+
+## 扫码体验
+
+
+
+## 兼容情况
+
+| 版本 | 支持的框架 | 视觉规范 | 兼容 |
+| --- | --- | --- | --- |
+| @nutui/nutui-react | React 17\18 | 京东 [APP 10.0](#/resource) 规范 | 现代浏览器以 Chrome >= 51、iOS >= 10.0 |
+
+对于一些低版本的浏览器，需要相应的 Ployfill，建议使用 @babel/preset-environment 来解决浏览器兼容问题。NutUI-React 提供的包并未进行过多的语法转换，所以需要将 NutUI-React 包含到编译阶段。
+
+对于不支持 CSS 变量的浏览器，建议使用 [postcss-var-replace](https://www.npmjs.com/package/postcss-var-replace) 来解决兼容问题。
+
+## 贡献者们
+
+感谢以下小伙伴们为 NutUI-React 发展做出的贡献：
+
+
+
+
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议
diff --git a/migrate-from-v1.md b/src/sites/doc/docs/react/migrate-from-v1.md
similarity index 100%
rename from migrate-from-v1.md
rename to src/sites/doc/docs/react/migrate-from-v1.md
diff --git a/migrate-from-v2.md b/src/sites/doc/docs/react/migrate-from-v2.md
similarity index 100%
rename from migrate-from-v2.md
rename to src/sites/doc/docs/react/migrate-from-v2.md
diff --git a/src/sites/doc/docs/react/official-theme-react.en-US.md b/src/sites/doc/docs/react/official-theme-react.en-US.md
new file mode 100644
index 0000000000..a5abda8b81
--- /dev/null
+++ b/src/sites/doc/docs/react/official-theme-react.en-US.md
@@ -0,0 +1,65 @@
+# Official theme
+
+## introduce
+
+NutUI provides multiple sets of official `UI` themes by default, while allowing new themes to be customized to a certain extent to meet the diverse visual needs of the business.
+
+####
+
+| theme description | scss file name |
+| --- | --- |
+| Jingdong APP 10.0 theme (default) | `variables.scss` |
+| Jingdong B Mall Theme Preview | `variables-jdb.scss ` |
+
+
+
+## How to use
+
+### Modify the configuration file of the local project vite or webpack
+
+Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example
+
+#### vite configuration example
+
+:::demo
+
+```javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+ //...
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // Default Jingdong APP 10.0 theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+})
+```
+
+:::
+
+#### webpack configuration example
+
+:::demo
+
+```javascript
+{
+ test: /\.(sa|sc)ss$/,
+ use: [
+ {
+ loader: 'sass-loader',
+ options: {
+ // Default Jingdong APP theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ // Note: In different versions of sass-loader, the name of this option is different. For details, please refer to the version documentation corresponding to sass-loader
+ data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ }
+ }
+ ]
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/react/official-theme-react.md b/src/sites/doc/docs/react/official-theme-react.md
new file mode 100644
index 0000000000..777b004251
--- /dev/null
+++ b/src/sites/doc/docs/react/official-theme-react.md
@@ -0,0 +1,65 @@
+# 官方主题
+
+## 介绍
+
+NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制新主题，以满足业务的多样化视觉需求。
+
+####
+
+| 主题说明 | scss 文件名称 |
+| --- | --- |
+| 京东 APP 主题（默认） | `variables.scss` |
+| 京东B商城主题预览 | `variables-jdb.scss` |
+
+
+
+## 使用方式
+
+### 修改本地项目 vite 或者 webpack 的配置文件
+
+修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例
+
+#### vite 配置示例
+
+:::demo
+
+```javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+ //...
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+})
+```
+
+:::
+
+#### webpack 配置示例
+
+:::demo
+
+```javascript
+{
+ test: /\.(sa|sc)ss$/,
+ use: [
+ {
+ loader: 'sass-loader',
+ options: {
+ // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
+ data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ }
+ }
+ ]
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/react/start-react.en-US.md b/src/sites/doc/docs/react/start-react.en-US.md
new file mode 100644
index 0000000000..753a4772ac
--- /dev/null
+++ b/src/sites/doc/docs/react/start-react.en-US.md
@@ -0,0 +1,190 @@
+# Quick Start
+
+## Intro
+
+Through this article, you can master the installation and use of NutUI React. The operation is simple and easy to use, and the development is simple and fast.
+
+## Install
+
+#### 1. Install via NPM
+
+```sh
+#pnpm
+pnpm add @nutui/nutui-react
+#yarn
+yarn add @nutui/nutui-react
+# npm
+npm install @nutui/nutui-react
+```
+
+#### 2. Install and use via CDN
+
+> NutUI is available on public CDNs like **jsdelivr** and **unpkg**.
+> It is not recommended to use the component library CDN in the production environment. If this method is required, it is recommended to download the specific version of the CDN file to the local project directory for use.
+
+:::demo
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+## Component usage
+
+> NutUI React supports Tree Shaking by default, and supports on-demand import of component JS files without any plug-in configuration. However, css style files cannot be implemented in this way, so from the perspective of style, it can be divided into the following two usage methods:
+
+#### Method 1, Conventional usage: Full import of styles
+
+:::demo
+
+```js
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import '@nutui/nutui-react/dist/style.css'
+import { Button } from '@nutui/nutui-react'
+
+ReactDOM.render(
+
+ +
+ +## Precautions for use + +- NutUI-React is built on [react@^18.0.0](https://www.npmjs.com/package/react) +- The component CSS unit uses **px**, if you need **rem** unit in your project, you can convert it with some tools, such as [px2rem-loader](https://www.npmjs.com/package/px2rem-loader) of [webpack](https://www.webpackjs.com/), [postcss] of [postcss](https://github.com/postcss/postcss) -plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) plugin etc. + +## Examples + +Source code for all the examples can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) directory. + +
+ +
+ +## 使用注意事项 + +- NutUI-React 基于 [react@^18.0.0](https://www.npmjs.com/package/react) 构建 +- 组件 CSS 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 [webpack](https://www.webpackjs.com/) 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、[postcss](https://github.com/postcss/postcss) 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等 + +## 示例 + +示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) 下查看 + +
+
+In NutUI-React version 2.0, the Sass theme customization function of 1.x can still be used. We added CSS variables to the original theme customization function, so that the new theme customization function can be used without introducing additional SCSS style files. + +## Method 1: Use CSS Variables to configure topics + +`NutUI - React` can [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) to organize the pattern, By overwriting these 'CSS' variables, you can achieve custom theme, dynamic switching theme and other functions. +
+
+You can play with the [ConfigProvider](#/zh-CN/component/configprovider) component. +
+
+We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) for the theme of personalized configuration. + +## Method 2: Use Sass variable for topic configuration + +#### Step 1: Create a custom variable SCSS file + +Create a new 'SCSS' file 'custom_theme.scss' in your local project. + +```scss +// Dominant tone +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +#### Step 2: Modify the configuration file of the local project webpack or vite + +Modify the ** ass-loader** configuration in the 'vite' or 'webpack' configuration file. The following example + +#### vite + +```javascript +// https://vitejs.dev/config/ +export default defineConfig({ + //... + css: { + preprocessorOptions: { + scss: { + additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";@import "./your/custom_theme.scss";`, + }, + }, + }, +}) +``` + +#### webpack + +```javascript +{ + test: /\.(sa|sc)ss$/, + use: [ + { + loader: 'sass-loader', + options: { + // Note: The option name is different for different versions of ass-loader. For details, see the corresponding version document of ass-loader + data: `@import "./assets/custom_theme.scss";@import "@nutui/nutui/dist/styles/variables.scss";`, + } + } + ] +} +``` diff --git a/src/sites/doc/docs/react/theme-react.md b/src/sites/doc/docs/react/theme-react.md new file mode 100644 index 0000000000..cc180538e2 --- /dev/null +++ b/src/sites/doc/docs/react/theme-react.md @@ -0,0 +1,65 @@ +# 主题定制 + +## 介绍 + +NutUI-React 支持灵活的样式定制，满足多种视觉业务和品牌需求，包括但不限于全局主色调和特定组件视觉定制的支持。 +
+
+在 NutUI-React 的 2.0 版本中，依然可以使用 1.x 的 Sass 定制主题功能，我们在原有的主题定制功能上新增了 CSS 变量， 无需引入额外的 SCSS 样式文件，就可以使用到新的主题定制功能。 + +## 方式一 使用 CSS Variables 进行主题配置 + +`NutUI-React` 组件可以通过 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。 +
+
+您可在 [ConfigProvider 组件](#/zh-CN/component/configprovider) 进行体验。我们更推荐使用替换 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 的方式来进行个性化的主题配置。 + +## 方式二 使用 Sass 变量 进行主题配置 + +### 第一步 新建自定义变量 SCSS 文件 + +在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。 + +```scss +// 主色调 +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +### 第二步 修改本地项目 Webpack 或者 Vite 的配置文件 + +修改 `vite` 或者 `webpack` 配置文件中 **sass-loader** 的配置。如下示例： + +#### Vite 方式 + +```javascript +// https://vitejs.dev/config/ +export default defineConfig({ + //... + css: { + preprocessorOptions: { + scss: { + additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";@import "./your/custom_theme.scss";`, + }, + }, + }, +}) +``` + +#### Webpack 方式 + +```javascript +{ + test: /\.(sa|sc)ss$/, + use: [ + { + loader: 'sass-loader', + options: { + // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档 + data: `@import "./assets/custom_theme.scss";@import "@nutui/nutui/dist/styles/variables.scss";`, + } + } + ] +} +``` diff --git a/src/sites/doc/docs/taro/contributing-react.en-US.md b/src/sites/doc/docs/taro/contributing-react.en-US.md new file mode 100644 index 0000000000..e15ca4a49c --- /dev/null +++ b/src/sites/doc/docs/taro/contributing-react.en-US.md @@ -0,0 +1,127 @@ +
+
diff --git a/src/sites/doc/docs/taro/contributing-react.md b/src/sites/doc/docs/taro/contributing-react.md
new file mode 100644
index 0000000000..b851b28543
--- /dev/null
+++ b/src/sites/doc/docs/taro/contributing-react.md
@@ -0,0 +1,121 @@
+
+
diff --git a/src/sites/doc/docs/taro/international-react.en-US.md b/src/sites/doc/docs/taro/international-react.en-US.md
new file mode 100644
index 0000000000..a0bbe071cb
--- /dev/null
+++ b/src/sites/doc/docs/taro/international-react.en-US.md
@@ -0,0 +1,42 @@
+# Internationalization
+
+NutUI-React support multiple languages. NutUI uses Chinese as the default language. Use as follows:
+
+## Usage
+
+### Switch languages
+
+:::demo
+
+```javascript
+import { ConfigProvider } from '@nutui/nutui-react-taro'
+import en from '@nutui/nutui-react-taro/dist/locales/en-US'
+
+ReactDOM.render(
+
+ ,
+ document.querySelector('#root')
+)
+```
+
+:::
+
+## Current supported languages:
+
+| Language | Filename | Version |
+| --- | --- | --- |
+| English | en-US | `v1.0.0` |
+| Chinese | zh-CN | `v1.0.0` |
+| Uygur | zh-UG | `v1.3.15` |
+| Traditional Chinese | zh-TW | `v1.0.0` |
+| Indonesian | id-ID | `v1.3.2` |
+| Thai | th-TH | PR |
+
+> View all language configs [Here](https://github.com/jdf2e/nutui-react/tree/main/src/locales).
+
+## Common Questions
+
+### Missing language pack?
+
+Welcome to commit PR If you need new language pack. Changes refer to [language pack](https://github.com/jdf2e/nutui-react/tree/main/src/locales).
diff --git a/src/sites/doc/docs/taro/international-react.md b/src/sites/doc/docs/taro/international-react.md
new file mode 100644
index 0000000000..19f3c6b717
--- /dev/null
+++ b/src/sites/doc/docs/taro/international-react.md
@@ -0,0 +1,43 @@
+# 国际化
+
+NutUI-React 1.0 以上版本支持多语言。组件默认使用中文。
+
+## 使用方法
+
+### 多语言切换
+
+:::demo
+
+```javascript
+// 多语言版本
+import { ConfigProvider } from '@nutui/nutui-react-taro'
+import en from '@nutui/nutui-react-taro/dist/locales/en-US'
+
+ReactDOM.render(
+
+ ,
+ document.querySelector('#root')
+)
+```
+
+:::
+
+## 目前支持的语言:
+
+| 语言 | 文件名 | 版本 |
+| --- | --- | --- |
+| 英语 | en-US | `v1.0.0` |
+| 简体中文 | zh-CN | `v1.0.0` |
+| 维吾尔语 | zh-UG | `v1.3.15` |
+| 繁體中文 | zh-TW | `v1.0.0` |
+| 印度尼西亚语 | id-ID | `v1.3.2` |
+| 泰语 | th-TH | 等待 PR |
+
+> 在 [这里](https://github.com/jdf2e/nutui-react/tree/main/src/locales) 查看所有的语言包源文件。
+
+## 常见问题
+
+### 找不到所需的语言包？
+
+如果上方列表中没有你需要的语言，欢迎给我们提 Pull Request 来增加新的语言包。改动内容可以参考 [语言包](https://github.com/jdf2e/nutui-react/tree/main/src/locales) 的 PR
diff --git a/src/sites/doc/docs/taro/intro-react.en-US.md b/src/sites/doc/docs/taro/intro-react.en-US.md
new file mode 100644
index 0000000000..adfc592745
--- /dev/null
+++ b/src/sites/doc/docs/taro/intro-react.en-US.md
@@ -0,0 +1,39 @@
+# NutUI-React
+
+NutUI-React component library, based on Taro, uses React technology stack to develop applet applications, out of the box, helps R&D to quickly develop user interface, improve development efficiency, and improve development experience.
+
+## Features
+
+- 🚀 70+ high-quality components covering mainstream mobile scenarios
+- 💪 Supports a set of code to develop multi-terminal Mini Programs +H5 at the same time
+- 📖 Based on JD APP 10.0 visual specification
+- 🍭 Support on-demand reference
+- 📖 Detailed documentation and examples
+- 💪 Supports TypeScript
+- 💪 Support for server-side rendering (test phase)
+- 🍭 Support custom themes
+- 🌍 Internationalization support
+- 🍭 Unit test coverage exceeds 80% to ensure stability
+- 📖 Sketch design resources are available
+
+## Examples
+
+
+
+## Version
+
+| Version | Supported Frameworks | Visual Specifications | Compatibility |
+| --- | --- | --- | --- |
+| @nutui/nutui-react-taro | React 17\18 | Jingdong [APP 10.0](/next#/resource) | Modern browsers start with Chrome >= 51、iOS >= 10.0、Android >= 6 |
+
+## All Contributors
+
+Thanks to the following friends for their contributions to NutUI-React:
+
+
+
+
+
+## LICENSE
+
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
diff --git a/src/sites/doc/docs/taro/intro-react.md b/src/sites/doc/docs/taro/intro-react.md
new file mode 100644
index 0000000000..f862e45e9a
--- /dev/null
+++ b/src/sites/doc/docs/taro/intro-react.md
@@ -0,0 +1,39 @@
+# NutUI-React
+
+NutUI-React 组件库，基于 Taro，使用 React 技术栈开发小程序应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。
+
+## 特性
+
+- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 💪 支持一套代码同时开发多端小程序+H5
+- 📖 基于京东APP 10.0 视觉规范
+- 🍭 支持按需引用
+- 📖 详尽的文档和示例
+- 💪 支持 TypeScript
+- 💪 支持服务端渲染（测试阶段）
+- 🍭 支持定制主题
+- 🌍 国际化支持
+- 🍭 单元测试覆盖率超过 80%，保障稳定性
+- 📖 提供 Sketch 设计资源
+
+## 扫码体验
+
+
+
+## 版本说明
+
+| 版本 | 支持的框架 | 视觉规范 | 兼容 |
+| --- | --- | --- | --- |
+| @nutui/nutui-react | React 17\18 | 京东 [APP 10.0](/next#/resource) 规范 | 现代浏览器以 Chrome >= 51、iOS >= 10.0、Android >= 6 |
+
+## 贡献者们
+
+感谢以下小伙伴们为 NutUI-React 发展做出的贡献：
+
+
+
+
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议
diff --git a/src/sites/doc/docs/taro/migrate-from-v1.md b/src/sites/doc/docs/taro/migrate-from-v1.md
new file mode 100644
index 0000000000..97ec2f56e0
--- /dev/null
+++ b/src/sites/doc/docs/taro/migrate-from-v1.md
@@ -0,0 +1,888 @@
+# 从 v1 升级到 v2
+
+本文档将帮助您从 NutUI React `1.x` 升级到 NutUI React `2.x` 版本。
+
+## 升级步骤
+
+1. H5 安装 NutUI React 2.x 版本
+
+```shell
+npm install @nutui/nutui-react
+```
+
+2. Taro 安装 NutUI React 2.x 版本
+
+```shell
+npm install @nutui/nutui-react-taro
+```
+
+3. 处理不兼容更新
+
+从 NutUI React 1.x 到 NutUI React 2.x 存在一些不兼容更新，需要仔细阅读不兼容更新内容，并依次处理。
+
+你可以手动对照下面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 @nutui/nutui-react-codemod 以帮助你快速升级到 v2 版本。在运行 codemod cli 前，请先提交你的本地代码修改。
+
+4. 主题变量更名：
+ 如，primary-color 更名为 color-primary；注意在使用自定义主题，特别是使用 ConfigProvider 组件的情况下，有没有使用 `nutuiBrandColor`，这时记得更名为 `nutuiColorPrimary`
+
+## 兼容更新
+
+1. 组件样式处理
+
+新增了按需引入 css 文件的支持，同时保留了按需引入 scss 文件的能力。可通过 babel-import-plugin 插件实现按需引入 css：
+
+H5配置如下：
+
+```json
+// Webpack .babelrc 或 babel.config.js中配置
+plugins: [
+ [
+ "import",
+ {
+ libraryName: "@nutui/nutui-react",
+ libraryDirectory: "dist/esm",
+ style: 'css',
+ camel2DashComponentName: false,
+ },
+ "nutui-react",
+ ]
+]
+```
+
+Taro配置如下：
+
+```json
+// Webpack .babelrc 或 babel.config.js中配置
+plugins: [
+ [
+ "import",
+ {
+ libraryName: "@nutui/nutui-react-taro",
+ libraryDirectory: "dist/esm",
+ style: 'css',
+ camel2DashComponentName: false,
+ },
+ "nutui-react-taro",
+ ]
+]
+```
+
+2. 更完善的类型导出以及对类型增加 `JSDoc` 注释
+3. 组件分类的调整
+ 在组件分类上，我们从交互维度上，和交互设计侧共同对 1.x 分类进行了基于信息结构的评审，并进行了子类梳理，完成重新分类，目标是更贴合交互场景的分布，易于查找组件。主要分布在：
+
+- 基础组件，将 `Popup` 组件移除，将 `Popup` 细分到操作反馈-引导提示部分；
+- 布局组件，保持不变；
+- 导航组件：将分页相关组件 `Pagination`、`Indicator` 移动到展示组件（考虑移动端的分页轻操作）；`Menu` 菜单移动到数据录入类-选择器子类（考虑 `Menu` 主要是作为筛选器）；将 `BackTop` 移至导航组件，作为锚点组件的一部分；
+- 展示组件：将 `Badge`、`NoticeBar`、`Popover` 移至操作反馈-引导提示类，`Empty`、`Skeleton` 移至操作反馈-加载状态结果反馈中；`WaterMark`、`TrendArrow` 作为特性增强类组件放在特色组件中，待由该类组件的使用场景和范围确认是否变更分类；同时新增 `Audio`，将其同 `Video`、`ImagePreview`、`Swiper` 一同归为展示-多媒体类；
+- 操作反馈类，新增 `Skeleton`、`Empty`（加载结果反馈类），`Popover`、`Notify`、`NoticeBar`、`Popup` （引导提示类）6个组件；同时去除 `BackTop`（导航组件-锚点类）、`Switch`（数据录入-选择器）、`Audio``（展示-多媒体）；在此基础上，未来会考虑增加 ResultPage`，整合错误状态、空状态等反馈状态，该组件在考虑中；同时考虑增加加载状态 `Loading` 组件。版本待定。
+- 数据录入类，主要分为两大类-输入及选择器。在输入中增加 `Signature`，该组件在 `Form` 表单中的应用范围日渐广泛，从特色组件中移入到数据录入部分；选择器中增加 `Switch`、`Menu`，及 `Address`。其中 `Signature` 和 `Address` 都是考虑其常用性，从特色中迁移到数据录入部分。
+- 特色组件，保留 `Barrage`、`Card`、`TimeSelect`，新增 `WaterMark`、`TrendArrow`。
+
+## 不兼容更新
+
+## NutUI Icons 调整
+
+1.x 版本我们在实际开发过程中会发现 `Button` 只是引用了一个很小的 Loading Icon，但是全量引用了 IconFont 字体 ，会导致开发者的项目文件增大。我们在 NutUI React 2.x 中为解决此问题，重新定义了 Icon 组件，将所有的 Icons 抽离成单独的图标组件库 @nutui/icons-react（Taro 适配下为 @nutui/icons-react-taro） ，使其可以进行按需加载使用。 因此一些组件之前关于 Icon 的相关 Props 将被移除，需要使用插槽或者传递一个 Component 组件的 Props 进行使用。 受影响的组件如下：
+
+- Avatar
+- Button
+- ImagePreview
+- Collapse
+- InfiniteLoading
+- Popup
+- Steps
+- Switch
+- Toast
+- Progress
+- NoticeBar
+- SearchBar
+- Navbar
+- Menu
+- Tabbar
+- Checkbox
+- InputNumber
+- Input
+- Radio
+- Rate
+- Uploader
+- Popover
+- Grid
+- TrendArrow
+
+如果你的项目中使用了这些组件，请仔细阅读文档并进行升级。
+
+## 组件名称调整
+
+- GridItem -> Grid.Item
+- TabbarItem -> Tabbar.Item
+- CollapseItem -> Collapse.Item
+- SwiperItem -> Swiper.Item
+- CellGroup -> Cell.Group
+- MenuItem -> Menu.Item
+- Infiniteloading -> InfiniteLoading
+
+## 组件 API 调整
+
+在 2.0 版本中，我们重点对组件 API 进行了评审和修订，使属性和方法命名更贴合常用的命名习惯及 React 语言规范，目标希望开发者在使用组件时得心应手。我们的思路大体如下：
+
+### 属性定义
+
+本次升级重点关注属性的命名方面，从 1.x 的 610 个属性精简为 410 个，更精简、更规范；同时增强属性的类型范围，提升自定义能力。
+
+- 对同一属性进行统一描述，比如：
+ - 缩写类会改为全拼，如 `desc`、`descSlot`、`description` 统一为 `description`
+ - 能使用名词或形容词的优先使用该类词性，一个词能说明白的不用两个词。
+ - 如 `wrap`、`wrapable` 统一为 `wrap`
+ - 如将 `isXxx` 统一为 `xxx`，如 `isVisible`、`isDeletable` 等，可直接使用 `visible`、`deletable` 等，形容词化
+ - 如`showXxx` 尽量统一为 `xxx`，名词化。【部分属性待优化。】
+ - 如 `roundRadius` 改为 `radius` ，`columnNum` 改为 `columns`等
+ - `onClickXxx` 统一为 `onXxxClick`
+ - `modelValue` 统一为 `value`，并增加支持 `defaultValue`，支持受控与非受控模式
+ - 对于标识位置、对齐等类的属性，将属性名变更为其上一层的属性定义，如 `center`会改为 `align`、`vertical`，改为 `direction`，像标记距离的，如 `top`、`bottom`、`distance` 等，会改为 `threshold`
+ - 不规范的定义如 `okBtn`、`okText` 这种，会改为 `confirmXxx`
+- 扩充属性的类型。如 `title` 的类型从 `string` 扩充为 `React.ReactNode`，增强自定义内容；其中有涉及合并属性的，统一用最简命名来定义属性；如 `title`、`titleSlot` 合并为 `title`，再扩充属性类型。
+- 对于 `xxClass`、`xxStyle`类的属性，移除，可使用 `className` 、`style` 来实现。
+- 移除与样式有关的属性，除基础组件的样式属性及部分实现起来较为复杂的样式属性外，大多数样式属性被移除，可通过样式变量来实现。
+- 将普遍认同可内置的属性或不怎么使用的属性，直接内置，去掉属性设置。
+
+### 组件实现
+
+### 基础组件
+
+#### Button
+
+- 移除 `plain`，通过 `fill="outline"` 实现
+- 增加 `ref`，对外暴露组件内 `button` 元素
+- CSS 变量中，对 `type` 类型对应的色值的定义，不在暴露到文档中，建议使用默认值，或修改主题变量
+- 增加 `fill` 模式类型，`dashed`，修改 `fill` 默认值为 `outline`。
+- 增加 `rightIcon`，可满足同时设置左右两个icon的情况。
+- 修改 `size` 为 `large` 时的默认 `width` 为 `100%` 的值，如果使用通栏的 `button`，可搭配 `block` 来使用。
+
+#### Cell
+
+- `subTitle` 重命名为 `description`，类型修改为 `React.Node`
+- `desc` 重命名为 `extra`，类型修改为 `React.Node`
+- `roundRadius` 重命名为 `radius`
+- `center` 重命名为 `align`，默认值修改为`flex-start`，可选值为 `flex-start`、`center`、`flex-end`
+- 移除 `icon`、 `isLink`、`url`、`linkSlot`、`replace`、`descTextAlign`，通过用户自定义节点实现，参考文档demo示例
+
+#### CellGroup
+
+- 新增 `divider`，单元格之间是否有分割线
+- `desc` 重命名为 `description`
+- `title`、`description` 类型修改为 `React.Node`
+- 移除 `titleSlot` 和 `descSlot`，通过 `title`、`description` 实现
+-
+
+#### ConfigProvider
+
+#### Icon
+
+#### Image
+
+- 移除 `round`，通过 `radius` 实现圆或圆角
+- 移除 `loadingImg` 和 `slotLoading`，通过 `loading` 属性实现，当 `loading` 属性设置为 `ReactNode` 或 `true` 时，表示展示 `loading` 状态
+- 移除 `showError` 和 `slotError`，通过 `error` 属性实现，当 `error` 属性设置为 `ReactNode` 或 `true` 时，表示展示 `error` 状态
+- 移除 `loadingImg`，可通过 `loading` 设置 `ReactNode`
+- 移除 `errorImg`，可通过 `error` 设置 `ReactNode`
+- `showError` 重命名为 `error`，类型修改为 `boolean｜ReactNode`
+- `showLoading` 重命名为 `loading`，类型修改为 `boolean｜ReactNode`
+
+#### Overlay
+
+- `overlayClass` 重命名为 `className`
+- `overlayStyle` 重命名为 `style`
+- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`
+- 更改 `lockScroll` 默认值为 `true`
+- 新增 `afterClose` 和 `afterShow`，用于完全关闭后触发的回调和完全展示后触发的回调
+
+#### Popup
+
+- `popClass` 重命名为 `className`，统一将组件的样式类名使用 `className`，不再指定特殊名字，减轻用户使用的记忆成本
+- `overlayClass` 重命名为 `overlayClassName`，继承自`Overlay`
+- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`
+- `onOpened` 和 `onClosed` 重命名为 `afterShow` 和 `afterClose`，继承自`Overlay`，用于完全关闭后触发的回调和完全展示后触发的回调
+- `destroyOnClose` 的描述进行了修订，改为：“组件不可见时，卸载内容”，并把其默认值改为了`false`
+- `onClickCloseIcon` 和 `onClickOverlay` 两个方法，增加布尔判断，如返回false 或 未定义返回值时，将不再关闭 Popup；默认值为 `true`；在demo中已增加相应示例；同时，两者的名字变更为 `onCloseIconClick`、`onOverlayClick`
+- `closeIcon` 类型从 `string` 改为 `ReactNode`，以前的 `closeIcon='mask-close'` 需改为 `closeIcon={
+
+In NutUI-React version 1.4.0, the Sass theme customization function of 1.x can still be used. We added CSS variables to the original theme customization function, so that the new theme customization function can be used without introducing additional SCSS style files. + +## Method 1: Use CSS Variables to configure topics + +`NutUI - React` can [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) to organize the pattern, By overwriting these 'CSS' variables, you can achieve custom theme, dynamic switching theme and other functions. +
+
+You can play with the [ConfigProvider](#/zh-CN/component/configprovider) component. +
+
+We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) for the theme of personalized configuration. + +## Method 2: Use Sass variable for topic configuration + +#### Step 1: Create a custom variable SCSS file + +Create a new 'SCSS' file 'custom_theme.scss' in your local project. + +```scss +// Dominant tone +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +#### Step 2: Modify the configuration file of the local project webpack or vite + +Modify the ** ass-loader** configuration in the 'vite' or 'webpack' configuration file. The following example + +#### taro + +Configure `scss` file global cover in `config/index.js`: + +```javascript +const path = require('path'); +const config = { + deviceRatio: { + 640: 2.34 / 2, + 750: 1, + 828: 1.81 / 2, + 375: 2 / 1 + }, + sass: { + resource: [ + path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss') + ], + // 默认京东 APP 10.0主题 > @import "@nutui/nutui-react-taro/dist/styles/variables.scss"; + data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";` + }, + // ... +``` diff --git a/src/sites/doc/docs/taro/theme-react.md b/src/sites/doc/docs/taro/theme-react.md new file mode 100644 index 0000000000..f1aec212d5 --- /dev/null +++ b/src/sites/doc/docs/taro/theme-react.md @@ -0,0 +1,53 @@ +# 主题定制 + +## 介绍 + +NutUI-React 支持灵活的样式定制，满足多种视觉业务和品牌需求，包括但不限于全局主色调和特定组件视觉定制的支持。 +
+在 NutUI-React 的 1.4.0 版本中，依然可以使用 1.x 的 Sass 定制主题功能，我们在原有的主题定制功能上新增了 CSS 变量， 无需引入额外的 SCSS 样式文件，就可以使用到新的主题定制功能。 + +## 方式一 使用 CSS Variables 进行主题配置 + +`NutUI-React` 组件可以通过 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。 +
+您可在 [ConfigProvider 组件](#/zh-CN/component/configprovider) 进行体验。 +
+我们更推荐使用替换 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 的方式来进行个性化的主题配置。 + +## 方式二 使用 Sass 变量 进行主题配置 + +### 第一步 新建自定义变量 SCSS 文件 + +在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。 + +```scss +// 主色调 +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +### 第二步 修改本地项目 webpack 或者 vite 的配置文件 + +#### Taro 小程序使用示例 + +修改 `config/index.js` 文件中配置 `scss` 文件，全局覆盖如： + +```javascript +const path = require('path'); +const config = { + deviceRatio: { + 640: 2.34 / 2, + 750: 1, + 828: 1.81 / 2, + 375: 2 / 1 + }, + sass: { + resource: [ + path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss') + ], + // 默认京东 APP 10.0主题 > @import "@nutui/nutui-react-taro/dist/styles/variables.scss"; + data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";` + }, + // ... +``` diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts index 5a91667608..201f206500 100644 --- a/src/sites/doc/router.ts +++ b/src/sites/doc/router.ts @@ -1,9 +1,12 @@ -import { Divider } from '@nutui/nutui-react-taro'; // const modulesPage = import.meta.globEager('/src/packages/**/doc.md', { // as: 'raw', // }) const modulesPage = import.meta.glob('/src/packages/**/doc.md') const routes: any[] = [] +const guideRoutes: any[] = [] +const guideEnRoutes: any[] = [] +const guideTaroRoutes: any[] = [] +const guideEnTaroRoutes: any[] = [] for (const path in modulesPage) { let name = (/packages\/(.*)\/doc\.md/.exec(path) as any[])[1] routes.push({ @@ -44,9 +47,41 @@ for (const path in modulesTaroPage) { }) } -// routes.push({ -// path: '/zh-CN/guide/intro-react', -// name: 'intro-react-zh-CN', -// component: () => Divider -// }) -export default routes +const modulesDocs = import.meta.glob('/src/sites/doc/docs/react/*.md'); +for (const path in modulesDocs) { + let name = (/docs\/react\/(.*).md/.exec(path) as any[])[1]; + guideRoutes.push({ + path: `/zh-CN/guide/${name}`, + component: modulesDocs[path], + name + }); +} + +const modulesEnDocs = import.meta.glob('/src/sites/doc/docs/react/*.en-US.md'); +for (const path in modulesEnDocs) { + let name = (/docs\/react\/(.*).en-US.md/.exec(path) as any[])[1]; + guideEnRoutes.push({ + path: `/en-US/guide/${name}`, + component: modulesEnDocs[path], + name: `en-${name}` + }); +} +const modulesTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.md'); +for (const path in modulesTaroDocs) { + let name = (/docs\/taro\/(.*).md/.exec(path) as any[])[1]; + guideTaroRoutes.push({ + path: `/zh-CN/guide-taro/${name}`, + component: modulesDocs[path], + name + }); +} +const modulesEnTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.en-US.md'); +for (const path in modulesEnTaroDocs) { + let name = (/docs\/taro\/(.*).en-US.md/.exec(path) as any[])[1]; + guideEnTaroRoutes.push({ + path: `/en-US/guide-taro/${name}`, + component: modulesDocs[path], + name + }); +} +export {routes, guideRoutes, guideEnRoutes, guideTaroRoutes, guideEnTaroRoutes} From 62a87fab2e114324192e55d4dbf4ef16c1894ca8 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Tue, 21 Jan 2025 19:10:13 +0800 Subject: [PATCH 08/14] feat: save some guide and routes logics --- src/sites/doc/App.tsx | 4 ++-- src/sites/doc/docs/react/contributing-react.en-US.md | 2 +- src/sites/doc/docs/react/contributing-react.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx index cf70257b2a..c0ee24bb8d 100644 --- a/src/sites/doc/App.tsx +++ b/src/sites/doc/App.tsx @@ -88,11 +88,11 @@ const Content = () => { return (
{lang}
handleVersionSelect(info2.name)}
+ onClick={() =>
+ checkGuidTheme(info2, 'Advanced')
+ }
>
{}}>
+ {
+ 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',
+ })
+ }
+ }}
+ >
En/中
)}
diff --git a/src/sites/doc/components/issue/issue.scss b/src/sites/doc/components/issue/issue.scss
index 010495e73f..1379b84a65 100644
--- a/src/sites/doc/components/issue/issue.scss
+++ b/src/sites/doc/components/issue/issue.scss
@@ -34,13 +34,13 @@
background-size: 100% 100%;
background-repeat: no-repeat;
&.issue {
- background-image: url('../assets/images/icon-add.svg');
+ background-image: url('../../../assets/images/icon-add.svg');
}
&.open {
- background-image: url('../assets/images/icon-open.svg');
+ background-image: url('../../../assets/images/icon-open.svg');
}
&.closed {
- background-image: url('../assets/images/icon-closed.svg');
+ background-image: url('../../../assets/images/icon-closed.svg');
}
}
.nut-icon {
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 77091deeda..d6d0003761 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -34,7 +34,7 @@ const Nav = () => {
{cn.packages.map((cp: any) => {
if (!cp.show) return null
return (
-
+
diff --git a/src/sites/doc/main.tsx b/src/sites/doc/main.tsx
index 2345d6fed1..611a579cef 100644
--- a/src/sites/doc/main.tsx
+++ b/src/sites/doc/main.tsx
@@ -7,7 +7,7 @@ import App from './App'
if (isMobile) {
location.replace('demo.html')
-}
+}
const rootElement = document.querySelector('#doc')
diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts
index d88f36dc8b..5a91667608 100644
--- a/src/sites/doc/router.ts
+++ b/src/sites/doc/router.ts
@@ -1,3 +1,4 @@
+import { Divider } from '@nutui/nutui-react-taro';
// const modulesPage = import.meta.globEager('/src/packages/**/doc.md', {
// as: 'raw',
// })
@@ -43,4 +44,9 @@ for (const path in modulesTaroPage) {
})
}
+// routes.push({
+// path: '/zh-CN/guide/intro-react',
+// name: 'intro-react-zh-CN',
+// component: () => Divider
+// })
export default routes
From cddaaa4b04d28a1a847b758f7a06c9f027411e31 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Tue, 21 Jan 2025 18:57:32 +0800
Subject: [PATCH 07/14] feat: save some guide and routes logics
---
src/sites/doc/App.tsx | 115 ++-
src/sites/doc/components/header/header.tsx | 5 +
src/sites/doc/components/nav/nav.tsx | 141 ++-
.../docs/react/contributing-react.en-US.md | 129 +++
.../doc/docs/react/contributing-react.md | 121 +++
.../docs/react/international-react.en-US.md | 42 +
.../doc/docs/react/international-react.md | 43 +
src/sites/doc/docs/react/intro-react.en-US.md | 42 +
src/sites/doc/docs/react/intro-react.md | 42 +
.../sites/doc/docs/react/migrate-from-v1.md | 0
.../sites/doc/docs/react/migrate-from-v2.md | 0
.../docs/react/official-theme-react.en-US.md | 65 ++
.../doc/docs/react/official-theme-react.md | 65 ++
src/sites/doc/docs/react/start-react.en-US.md | 190 ++++
src/sites/doc/docs/react/start-react.md | 190 ++++
src/sites/doc/docs/react/theme-react.en-US.md | 68 ++
src/sites/doc/docs/react/theme-react.md | 65 ++
.../doc/docs/taro/contributing-react.en-US.md | 127 +++
src/sites/doc/docs/taro/contributing-react.md | 121 +++
.../docs/taro/international-react.en-US.md | 42 +
.../doc/docs/taro/international-react.md | 43 +
src/sites/doc/docs/taro/intro-react.en-US.md | 39 +
src/sites/doc/docs/taro/intro-react.md | 39 +
src/sites/doc/docs/taro/migrate-from-v1.md | 888 ++++++++++++++++++
src/sites/doc/docs/taro/migrate-from-v2.md | 888 ++++++++++++++++++
.../docs/taro/official-theme-react.en-US.md | 65 ++
.../doc/docs/taro/official-theme-react.md | 86 ++
src/sites/doc/docs/taro/start-react.en-US.md | 185 ++++
src/sites/doc/docs/taro/start-react.md | 191 ++++
src/sites/doc/docs/taro/theme-react.en-US.md | 58 ++
src/sites/doc/docs/taro/theme-react.md | 53 ++
src/sites/doc/router.ts | 49 +-
32 files changed, 4083 insertions(+), 114 deletions(-)
create mode 100644 src/sites/doc/docs/react/contributing-react.en-US.md
create mode 100644 src/sites/doc/docs/react/contributing-react.md
create mode 100644 src/sites/doc/docs/react/international-react.en-US.md
create mode 100644 src/sites/doc/docs/react/international-react.md
create mode 100644 src/sites/doc/docs/react/intro-react.en-US.md
create mode 100644 src/sites/doc/docs/react/intro-react.md
rename migrate-from-v1.md => src/sites/doc/docs/react/migrate-from-v1.md (100%)
rename migrate-from-v2.md => src/sites/doc/docs/react/migrate-from-v2.md (100%)
create mode 100644 src/sites/doc/docs/react/official-theme-react.en-US.md
create mode 100644 src/sites/doc/docs/react/official-theme-react.md
create mode 100644 src/sites/doc/docs/react/start-react.en-US.md
create mode 100644 src/sites/doc/docs/react/start-react.md
create mode 100644 src/sites/doc/docs/react/theme-react.en-US.md
create mode 100644 src/sites/doc/docs/react/theme-react.md
create mode 100644 src/sites/doc/docs/taro/contributing-react.en-US.md
create mode 100644 src/sites/doc/docs/taro/contributing-react.md
create mode 100644 src/sites/doc/docs/taro/international-react.en-US.md
create mode 100644 src/sites/doc/docs/taro/international-react.md
create mode 100644 src/sites/doc/docs/taro/intro-react.en-US.md
create mode 100644 src/sites/doc/docs/taro/intro-react.md
create mode 100644 src/sites/doc/docs/taro/migrate-from-v1.md
create mode 100644 src/sites/doc/docs/taro/migrate-from-v2.md
create mode 100644 src/sites/doc/docs/taro/official-theme-react.en-US.md
create mode 100644 src/sites/doc/docs/taro/official-theme-react.md
create mode 100644 src/sites/doc/docs/taro/start-react.en-US.md
create mode 100644 src/sites/doc/docs/taro/start-react.md
create mode 100644 src/sites/doc/docs/taro/theme-react.en-US.md
create mode 100644 src/sites/doc/docs/taro/theme-react.md
diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx
index dd5ebde359..cf70257b2a 100644
--- a/src/sites/doc/App.tsx
+++ b/src/sites/doc/App.tsx
@@ -8,17 +8,23 @@ import Header from '@/sites/doc/components/header'
import DemoPreview from '@/sites/doc/components/demo-preview'
import Issue from '@/sites/doc/components/issue'
import { getComponentName } from '@/sites/assets/util'
-import routers from './router'
+import {
+ routes as routers,
+ guideEnRoutes,
+ guideRoutes,
+ guideEnTaroRoutes,
+ guideTaroRoutes,
+} from './router'
import loadable from '@loadable/component'
import CodeBlock from './components/demoblock/codeblock'
import { BackTop } from '../../packages/backtop/backtop'
+
const Title = () => {
let location = useLocation()
const isTaro = location.pathname.includes('-taro')
const s = window.location.hash.split('/')
useEffect(() => {
const componentName = getComponentName()
- console.log(componentName)
setComponentName(componentName)
}, [location])
const [componentName, setComponentName] = useState({ name: '', cName: '' })
@@ -59,85 +65,76 @@ const Title = () => {
)
}
+
const components = {
CodeBlock,
}
-const App = () => {
- const [fixed, setFixed] = useState(false)
- const [hidden, setHidden] = useState(false)
+const Content = () => {
+ const [fixed, setFixed] = useState(false)
+ const location = useLocation()
const scrollTitle = () => {
let top = document.documentElement.scrollTop
if (top > 127) {
setFixed(true)
- if (top < 142) {
- setHidden(true)
- } else {
- setHidden(false)
- }
} else {
setFixed(false)
- setHidden(false)
}
}
-
+ const isGuide = location.pathname.includes('/guide')
useEffect(() => {
document.addEventListener('scroll', scrollTitle)
}, [])
+ return (
+ {info2.name}
{
{!isReactTaro && (
-
+
+ )
+}
+
+const App = () => {
return (
+
+
+
+
+
+ {[...routers, ...guideRoutes].map((ru, k) => {
+ const path = ru.component.name?.substring(
+ 0,
+ ru.component.name.lastIndexOf('/')
+ )
+ const C = useMemo(() => loadable(ru.component), [ru.component])
+ return (
+
+
+
+
+ }
+ >
+ )
+ })}
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
- {routers.map((ru, k) => {
- const path = ru.component.name?.substring(
- 0,
- ru.component.name.lastIndexOf('/')
- )
- const C = useMemo(
- () => loadable(ru.component),
- [ru.component]
- )
- return (
-
-
-
-
- }
- >
- )
- })}
-
-
-
-
)
}
diff --git a/src/sites/doc/docs/react/contributing-react.en-US.md b/src/sites/doc/docs/react/contributing-react.en-US.md
new file mode 100644
index 0000000000..fa3d85d360
--- /dev/null
+++ b/src/sites/doc/docs/react/contributing-react.en-US.md
@@ -0,0 +1,129 @@
+-
- {cNav.map((cn: any) => {
- return (
-
- {lang === 'zh-CN' ? cn.name : cn.enName} - )} -
-
-
- isPending ? '' : isActive ? 'active' : '' - } - to={`${lang ? `/${lang}` : ''}/component/${cp.name}${isTaro? '-taro' : ''}`} - > - {cp.name} - {lang === 'zh-CN' && cp.cName} - {cp.version !== '2.0.0' ? ( - - 🛠 - - ) : null} - -
- )
- })}
-
-
- {cn.packages.map((cp: any) => {
- if (!cp.show) return null
- return (
-
-
+
-
+ {_package.show && (
+ <>
+ {_package.isLink ? (
+
+ {isZh ? _package.cName : _package.eName}
+
+ ) : (
+ changeNav(_package)}> + {isZh ? _package.cName : _package.eName} ++ )} + + )} +
+ ))}
+
-
+ {docs.packages.map((_package) => (
+
-
+ {cNav.map((cn: any) => {
+ return (
+
- {lang === 'zh-CN' ? cn.name : cn.enName} + )} +
-
+
+ isPending ? '' : isActive ? 'active' : '' + } + to={`${lang ? `/${lang}` : ''}/component/${cp.name}${isTaro ? '-taro' : ''}`} + > + {cp.name} + {lang === 'zh-CN' && cp.cName} + {cp.version !== '2.0.0' ? ( + + 🛠 + + ) : null} + +
+ )
+ })}
+
-
+ {cn.packages.map((cp: any) => {
+ if (!cp.show) return null
+ return (
+
Contribution Guidelines
+ +You can contribute to the NutUI community according to the co-construction direction in 《[NutUI invites you to build, Hello Contributor](https://jelly.jd.com/article/6320528b92d94a0068685525)》. + + + +This guide will guide you on how to contribute to NutUI. Please take a few minutes to read this guide before you file an issue or pull request to ensure that the contribution is compliant and can help the community. + +## code of conduct + +In order to ensure a good network environment and create a comfortable development atmosphere, I hope all contributors can abide by this [Code of Conduct](https://www.contributor-covenant.org/zh-cn/version/2/1/code_of_conduct/), and please take the time to read the full text to clarify what is prohibited and what is allowed. + +## Branch management + +The main branch is currently maintained on github. If you want to fix a bug or add a feature, send a pull request to the main branch. + + + +The official website will update [NutUI - React release cycle] (https://github.com/jdf2e/nutui-react/releases), at the same time every day developers review submitted code in the making. The release cycle is once a week, usually incorporating new code or features in advance and releasing formal packages; In case of emergency, beta versions can be released based on the specified branch. + +## Issue + +If submit Bug reports, please be sure to comply with the [` Bug report `] (https://github.com/jdf2e/nutui/blob/next/.github/ISSUE_TEMPLATE/bug_report.md) template. + +## Bugs + +We use [issue - helper] (https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) for bug tracking. We hope you can submit feedback through the issue assistant we provide, and provide all the development information as much as possible, because the more comprehensive the information, the faster the development response, and the bugs you find will be solved quickly. + + + +Before you commit a bug, Please ensure that the search had existing [issue] (https://github.com/jdf2e/nutui-react/issues) and read our [FAQ] (https://nutui.jd.com/#/zh-CN/notice). + +## new features + +If you have a better idea of an existing component function or API, We also recommend that you use our provided [issue - helper] (https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) to submit a issue of adding new features. + + + +If you want to help develop new features and components, Can scan [qr code] (HTTP: / / https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911 .png) join our community co-building group. + +## Participate in contribution + +If you are not familiar with the PR process of github, you can read the following two articles to learn: + + + +[NutUI Contribution Guidelines](https://github.com/jdf2e/nutui-react/discussions/348) + +[github repository code synchronization](https://github.com/jdf2e/nutui/discussions/687) + +## Pull Request Specification + +1. Each PR addresses a single issue or adds a single feature + +2. When adding components or modifying existing components, synchronously change the corresponding unit tests and documents to ensure the stability of the code + +3. Please follow the [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) specification for the commit message + +4. The PR information should include which component has been modified, which problem has been solved, and associated the corresponding issue link on github + +## Pull Request Process + +1. Fork the main repository and synchronize the latest code of the main repository + + + +2. Download the project locally, run npm install in the project root directory, and access it locally + +``` +git clone https://github.com/{github username}/nutui-react.git +npm install +cd src/sites/mobile-taro && npm install +cd - +npm run dev:taro:weapp +``` + +3. Create a new branch or develop on the corresponding branch + +``` +git checkout -b username/xxxx +git checkout {current branch} +``` + +4. If the development involves new components or new features of components, it is necessary to improve the Chinese and English documentation of the components, the unit testing of the components, and use [nutui-demo](https://github.com/jdf2e/nutui-demo) to Component testing is used. + + + +5、Ensure that the compilation function is used normally + +``` +npm run test +// node v17 +// @nutui/nutui-react +npm run build +// @nutui/nutui-react-taro +npm run build:taro +``` + +6、After the development is completed, submit it to the corresponding branch of the warehouse. After the review is passed, the PR will be merged into the main warehouse, and then wait for NutUI-React to release a new version（Once a week）。 + + + +### Knowledge sharing + +1. Project Use Cases + + Share the [use case](https://nutui.jd.com/#/zh-CN/case) of NutUI, we will recommend it on the official website, prepare the name of the project, Project entry (QR code\link), logo, sample image, delivery platform (H5\mini program\APP, etc.), nutui version and other information should be submitted to **nutui@jd.com** by email. + + + +2. Article video submission + + Share your experiences (tutorials, articles, videos, etc.) by contributing to **nutui@jd.com**. After passing the review, collect it in the [official website resource](https://nutui.jd.com/#/zh-CN/resource), and pass your knowledge and ideas to NutUI friends. + + + +3. Co-construction and sharing + + Based on NutUI, design or develop new tools, such as adapting to uni-app, developing plug-ins to improve efficiency, etc. If you are interested, welcome to join our [Community Development Group](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png) to communicate and discuss. + + + +### Credits + +Thanks to all the developers below who have contributed code to NutUI. + + +
+
diff --git a/src/sites/doc/docs/react/contributing-react.md b/src/sites/doc/docs/react/contributing-react.md
new file mode 100644
index 0000000000..21ad78757a
--- /dev/null
+++ b/src/sites/doc/docs/react/contributing-react.md
@@ -0,0 +1,121 @@
+## 贡献指南
+
+您可根据《[NutUI 邀您共建，Contributor 您好](https://jelly.jd.com/article/6320528b92d94a0068685525)》中的共建方向为 NutUI 社区做出贡献。
+
+
+
+本篇指南会指导你如何为 NutUI 贡献一份自己的力量，请在您要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南，保证贡献是符合规范并且能帮助到社区。
+
+## 行为准则
+
+为保证良好的网络环境，营造舒适的开发氛围，希望所有的贡献者都能遵守这份[行为准则](https://www.contributor-covenant.org/zh-cn/version/2/1/code_of_conduct/)，也请花时间阅读一遍全文明确哪些行为是禁止的，哪些行为是可行的。
+
+## 分支管理
+
+目前 github 上长期维护分支 main。如果您要修一个 bug 或新增功能，请发 pull request 到 main 分支。
+
+
+
+官网会同步更新 [NutUI-React 的发布周期](https://github.com/jdf2e/nutui-react/releases)，同时每天都会有开发者 review github 中提交的代码。发版周期是每 1 周/次，通常会提前合并新的代码或功能，发布正式包；期间如遇紧急需求，可基于指定分支发布 beta 版本。
+
+## Issue 报告指南
+
+如果提交的是 Bug 报告，请务必遵守 [Bug report](https://github.com/jdf2e/nutui/blob/next/.github/ISSUE_TEMPLATE/bug_report.md) 模板。
+
+## Bugs
+
+我们使用 [issue-helper](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) 来做 bug 追踪。希望大家通过我们提供的 issue 小助手来提交反馈，并尽可能提供一切开发信息，因为信息越全面，开发响应速度越快，您发现的 bug 会被快速解决。
+
+
+
+提交 bug 之前，请先确保搜索过已有的 [issue](https://github.com/jdf2e/nutui-react/issues) 和阅读了我们的[常见问题](https://nutui.jd.com/#/zh-CN/notice)。
+
+## 功能新增
+
+如果您对现有的组件功能或者 API 有更好的想法，我们同样推荐你使用我们提供的 [issue-helper](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) 提交一个添加新功能的 issue。
+
+
+
+如果你希望协助开发新功能新组件，可扫描[二维码](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png)加入我们的社区共建群。
+
+## 参与贡献
+
+如果你对 github 的 PR 流程还不熟悉，可以阅读下面这 2 篇文章来学习：
+
+
+
+[NutUI 贡献指南](https://github.com/jdf2e/nutui-react/discussions/348)
+
+[github 仓库代码同步](https://github.com/jdf2e/nutui/discussions/687)
+
+## Pull Request 规范
+
+1. 每个 PR 只解决单个问题或者新增单个功能
+
+2. 当新增组件或修改原有组件时，同步更改对应的单元测试和文档，保证代码的稳定
+
+3. commit message 请遵循 [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) 规范
+
+4. PR 信息中最好包括修改了哪个组件，解决了哪个问题，并关联 github 上对应的 issue 链接
+
+## Pull Request 流程
+
+1、fork 主仓库，并同步主仓库的最新代码
+
+2、将项目下载到本地，在项目根目录下运行 npm install，并在本地能正常访问
+
+```
+git clone https://github.com/{github username}/nutui-react.git
+npm install
+npm run dev
+```
+
+3、创建一个新的分支或在对应分支上进行开发
+
+```
+git checkout -b username/xxxx
+git checkout {现有分支名称}
+```
+
+4、如开发涉及新组件或组件的新特性，需要完善组件的中英文文档、组件的单元测试，同时要使用 [nutui-demo](https://github.com/jdf2e/nutui-demo) 对组件测试使用。
+
+5、保证编译功能正常使用
+
+```
+npm run test
+// build 使用 node 17 版本
+// 构建 @nutui/nutui-react
+npm run build
+// 构建 @nutui/nutui-react-taro
+npm run build:taro
+```
+
+6、开发完成后提交到仓库的对应分支上，PR 会在 Review 通过后被合并到主仓库，然后等待 NutUI-React 发布新版本（每周一次）。
+
+### 知识分享
+
+1. 项目使用案例
+
+ 分享 NutUI 的[使用案例](https://nutui.jd.com/next/#/case)，我们会在官网进行推荐展示，准备项目的名称、项目入口（二维码\链接）、logo、示例图、投放平台（H5\小程序\APP等）、nutui 版本等信息，以邮箱的形式提交到 **nutui@jd.com**。
+
+
+
+2. 文章视频投稿
+
+ 分享你的经验（教程、文章、视频等），可以给 **nutui@jd.com** 投稿。在审核通过后，收藏到[官网资源](https://nutui.jd.com/next/#/resource)中，将你的知识与思想传递给 NutUI 的小伙伴们。
+
+
+
+3. 共建分享征集
+
+ 以 NutUI-React 为基础，设计或开发新的工具，开发提效的插件等。有兴趣欢迎加入我们的[社区开发群](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png)交流讨论。
+
+
+
+### Credits
+
+感谢以下所有给 NutUI 贡献过代码的开发者。
+
+
+
+
diff --git a/src/sites/doc/docs/react/international-react.en-US.md b/src/sites/doc/docs/react/international-react.en-US.md
new file mode 100644
index 0000000000..30f695393b
--- /dev/null
+++ b/src/sites/doc/docs/react/international-react.en-US.md
@@ -0,0 +1,42 @@
+# Internationalization
+
+NutUI-React support multiple languages. NutUI uses Chinese as the default language. Use as follows:
+
+## Usage
+
+### Switch languages
+
+:::demo
+
+```javascript
+import { ConfigProvider } from '@nutui/nutui-react'
+import en from '@nutui/nutui-react/dist/locales/en-US'
+
+ReactDOM.render(
+
+
+## Compatibility Environment
+
+| Version | Supported Frameworks | Visual Specifications | Compatibility |
+| --- | --- | --- | --- |
+| @nutui/nutui-react | React 17\18 | Jingdong [APP 10.0](#/resource) | Modern browsers start with Chrome >= 51、iOS >= 10.0 |
+
+For some older versions of browsers, corresponding polyfills are needed. It is recommended to use @babel/preset-env to address browser compatibility issues. The package provided by NutUI-React has not undergone extensive syntax transformation, so it is necessary to include the NutUI-React package in the compilation phase.
+
+For browsers that do not support CSS variables, it is recommended to use [postcss-var-replace](https://www.npmjs.com/package/postcss-var-replace) to resolve compatibility issues.
+
+## All Contributors
+
+Thanks to the following friends for their contributions to NutUI-React:
+
+
+
+
+
+## LICENSE
+
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
diff --git a/src/sites/doc/docs/react/intro-react.md b/src/sites/doc/docs/react/intro-react.md
new file mode 100644
index 0000000000..eea1cf0f3a
--- /dev/null
+++ b/src/sites/doc/docs/react/intro-react.md
@@ -0,0 +1,42 @@
+# NutUI-React
+
+NutUI-React 组件库，适用于 React 技术栈的 H5 应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。
+
+## 特性
+
+- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 📖 基于京东APP 10.0 视觉规范
+- 🍭 支持按需引用
+- 📖 详尽的文档和示例
+- 💪 支持 TypeScript
+- 💪 支持服务端渲染（Next.js）
+- 🍭 支持定制主题
+- 🌍 国际化支持
+- 🍭 单元测试覆盖率超过 80%，保障稳定性
+- 📖 提供 Sketch 设计资源
+
+## 扫码体验
+
+
+
+## 兼容情况
+
+| 版本 | 支持的框架 | 视觉规范 | 兼容 |
+| --- | --- | --- | --- |
+| @nutui/nutui-react | React 17\18 | 京东 [APP 10.0](#/resource) 规范 | 现代浏览器以 Chrome >= 51、iOS >= 10.0 |
+
+对于一些低版本的浏览器，需要相应的 Ployfill，建议使用 @babel/preset-environment 来解决浏览器兼容问题。NutUI-React 提供的包并未进行过多的语法转换，所以需要将 NutUI-React 包含到编译阶段。
+
+对于不支持 CSS 变量的浏览器，建议使用 [postcss-var-replace](https://www.npmjs.com/package/postcss-var-replace) 来解决兼容问题。
+
+## 贡献者们
+
+感谢以下小伙伴们为 NutUI-React 发展做出的贡献：
+
+
+
+
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议
diff --git a/migrate-from-v1.md b/src/sites/doc/docs/react/migrate-from-v1.md
similarity index 100%
rename from migrate-from-v1.md
rename to src/sites/doc/docs/react/migrate-from-v1.md
diff --git a/migrate-from-v2.md b/src/sites/doc/docs/react/migrate-from-v2.md
similarity index 100%
rename from migrate-from-v2.md
rename to src/sites/doc/docs/react/migrate-from-v2.md
diff --git a/src/sites/doc/docs/react/official-theme-react.en-US.md b/src/sites/doc/docs/react/official-theme-react.en-US.md
new file mode 100644
index 0000000000..a5abda8b81
--- /dev/null
+++ b/src/sites/doc/docs/react/official-theme-react.en-US.md
@@ -0,0 +1,65 @@
+# Official theme
+
+## introduce
+
+NutUI provides multiple sets of official `UI` themes by default, while allowing new themes to be customized to a certain extent to meet the diverse visual needs of the business.
+
+####
+
+| theme description | scss file name |
+| --- | --- |
+| Jingdong APP 10.0 theme (default) | `variables.scss` |
+| Jingdong B Mall Theme Preview | `variables-jdb.scss ` |
+
+
+
+## How to use
+
+### Modify the configuration file of the local project vite or webpack
+
+Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example
+
+#### vite configuration example
+
+:::demo
+
+```javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+ //...
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // Default Jingdong APP 10.0 theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+})
+```
+
+:::
+
+#### webpack configuration example
+
+:::demo
+
+```javascript
+{
+ test: /\.(sa|sc)ss$/,
+ use: [
+ {
+ loader: 'sass-loader',
+ options: {
+ // Default Jingdong APP theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ // Note: In different versions of sass-loader, the name of this option is different. For details, please refer to the version documentation corresponding to sass-loader
+ data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ }
+ }
+ ]
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/react/official-theme-react.md b/src/sites/doc/docs/react/official-theme-react.md
new file mode 100644
index 0000000000..777b004251
--- /dev/null
+++ b/src/sites/doc/docs/react/official-theme-react.md
@@ -0,0 +1,65 @@
+# 官方主题
+
+## 介绍
+
+NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制新主题，以满足业务的多样化视觉需求。
+
+####
+
+| 主题说明 | scss 文件名称 |
+| --- | --- |
+| 京东 APP 主题（默认） | `variables.scss` |
+| 京东B商城主题预览 | `variables-jdb.scss` |
+
+
+
+## 使用方式
+
+### 修改本地项目 vite 或者 webpack 的配置文件
+
+修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例
+
+#### vite 配置示例
+
+:::demo
+
+```javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+ //...
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+})
+```
+
+:::
+
+#### webpack 配置示例
+
+:::demo
+
+```javascript
+{
+ test: /\.(sa|sc)ss$/,
+ use: [
+ {
+ loader: 'sass-loader',
+ options: {
+ // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
+ data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ }
+ }
+ ]
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/react/start-react.en-US.md b/src/sites/doc/docs/react/start-react.en-US.md
new file mode 100644
index 0000000000..753a4772ac
--- /dev/null
+++ b/src/sites/doc/docs/react/start-react.en-US.md
@@ -0,0 +1,190 @@
+# Quick Start
+
+## Intro
+
+Through this article, you can master the installation and use of NutUI React. The operation is simple and easy to use, and the development is simple and fast.
+
+## Install
+
+#### 1. Install via NPM
+
+```sh
+#pnpm
+pnpm add @nutui/nutui-react
+#yarn
+yarn add @nutui/nutui-react
+# npm
+npm install @nutui/nutui-react
+```
+
+#### 2. Install and use via CDN
+
+> NutUI is available on public CDNs like **jsdelivr** and **unpkg**.
+> It is not recommended to use the component library CDN in the production environment. If this method is required, it is recommended to download the specific version of the CDN file to the local project directory for use.
+
+:::demo
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+## Component usage
+
+> NutUI React supports Tree Shaking by default, and supports on-demand import of component JS files without any plug-in configuration. However, css style files cannot be implemented in this way, so from the perspective of style, it can be divided into the following two usage methods:
+
+#### Method 1, Conventional usage: Full import of styles
+
+:::demo
+
+```js
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import '@nutui/nutui-react/dist/style.css'
+import { Button } from '@nutui/nutui-react'
+
+ReactDOM.render(
+
+
+
,
+ document.getElementById('app')
+)
+```
+
+:::
+
+#### Method 2, import styles on demand
+
+
+
vite
+ +Install the `vite-plugin-imp` plugin and configure it. + +```sh +#pnpm +pnpm add vite-plugin-imp -D +#yarn +yarn add vite-plugin-imp -D +# npm +npm install vite-plugin-imp -D +``` + +:::demo + +```js +// vite.config.js +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import vitePluginImp from 'vite-plugin-imp' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react(), + vitePluginImp({ + libList: [ + { + libName: '@nutui/nutui-react', + style: (name) => { + return `@nutui/nutui-react/dist/esm/${name}/style/css` + }, + replaceOldImport: false, + camel2DashComponentName: false, + }, + ], + }), + ], +}) +``` + +::: + ++ +
+
webpack
+ +Install the `babel-plugin-import` plugin and configure it. + +```sh +#pnpm +pnpm add babel-plugin-import -D +#yarn +yarn add babel-plugin-import -D +# npm +npm install babel-plugin-import -D +``` + +Babel configuration: + +:::demo + +```js +{ + //... + plugins: [ + [ + 'import', + { + libraryName: '@nutui/nutui-react', + libraryDirectory: 'dist/esm', + style: 'css', + camel2DashComponentName: false, + }, + 'nutui-react', + ], + ] +} +``` + +::: + ++ +## Precautions for use + +- NutUI-React is built on [react@^18.0.0](https://www.npmjs.com/package/react) +- The component CSS unit uses **px**, if you need **rem** unit in your project, you can convert it with some tools, such as [px2rem-loader](https://www.npmjs.com/package/px2rem-loader) of [webpack](https://www.webpackjs.com/), [postcss] of [postcss](https://github.com/postcss/postcss) -plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) plugin etc. + +## Examples + +Source code for all the examples can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) directory. + +
+
+
,
+ document.getElementById('app')
+)
+```
+
+:::
+
+#### 方法二、按需引入样式
+
+
+
vite
+ +安装 `vite-plugin-imp` 插件并配置。 + +```sh +# pnpm +pnpm add vite-plugin-imp -D +# yarn +yarn add vite-plugin-imp -D +# npm +npm install vite-plugin-imp -D +``` + +:::demo + +```js +// vite.config.js +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import vitePluginImp from 'vite-plugin-imp' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react(), + vitePluginImp({ + libList: [ + { + libName: '@nutui/nutui-react', + style: (name) => { + return `@nutui/nutui-react/dist/esm/${name}/style/css` + }, + replaceOldImport: false, + camel2DashComponentName: false, + }, + ], + }), + ], +}) +``` + +::: + ++ +
+
webpack
+ +安装 `babel-plugin-import` 插件并配置。 + +```sh +# pnpm +pnpm add babel-plugin-import -D +# yarn +yarn add babel-plugin-import -D +# npm +npm install babel-plugin-import -D +``` + +babel 配置： + +:::demo + +```js +{ + // ... + plugins: [ + [ + 'import', + { + libraryName: '@nutui/nutui-react', + libraryDirectory: 'dist/esm', + style: 'css', + camel2DashComponentName: false, + }, + 'nutui-react', + ], + ] +} +``` + +::: + ++ +## 使用注意事项 + +- NutUI-React 基于 [react@^18.0.0](https://www.npmjs.com/package/react) 构建 +- 组件 CSS 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 [webpack](https://www.webpackjs.com/) 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、[postcss](https://github.com/postcss/postcss) 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等 + +## 示例 + +示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) 下查看 + +
+
+In NutUI-React version 2.0, the Sass theme customization function of 1.x can still be used. We added CSS variables to the original theme customization function, so that the new theme customization function can be used without introducing additional SCSS style files. + +## Method 1: Use CSS Variables to configure topics + +`NutUI - React` can [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) to organize the pattern, By overwriting these 'CSS' variables, you can achieve custom theme, dynamic switching theme and other functions. +
+
+You can play with the [ConfigProvider](#/zh-CN/component/configprovider) component. +
+
+We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) for the theme of personalized configuration. + +## Method 2: Use Sass variable for topic configuration + +#### Step 1: Create a custom variable SCSS file + +Create a new 'SCSS' file 'custom_theme.scss' in your local project. + +```scss +// Dominant tone +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +#### Step 2: Modify the configuration file of the local project webpack or vite + +Modify the ** ass-loader** configuration in the 'vite' or 'webpack' configuration file. The following example + +#### vite + +```javascript +// https://vitejs.dev/config/ +export default defineConfig({ + //... + css: { + preprocessorOptions: { + scss: { + additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";@import "./your/custom_theme.scss";`, + }, + }, + }, +}) +``` + +#### webpack + +```javascript +{ + test: /\.(sa|sc)ss$/, + use: [ + { + loader: 'sass-loader', + options: { + // Note: The option name is different for different versions of ass-loader. For details, see the corresponding version document of ass-loader + data: `@import "./assets/custom_theme.scss";@import "@nutui/nutui/dist/styles/variables.scss";`, + } + } + ] +} +``` diff --git a/src/sites/doc/docs/react/theme-react.md b/src/sites/doc/docs/react/theme-react.md new file mode 100644 index 0000000000..cc180538e2 --- /dev/null +++ b/src/sites/doc/docs/react/theme-react.md @@ -0,0 +1,65 @@ +# 主题定制 + +## 介绍 + +NutUI-React 支持灵活的样式定制，满足多种视觉业务和品牌需求，包括但不限于全局主色调和特定组件视觉定制的支持。 +
+
+在 NutUI-React 的 2.0 版本中，依然可以使用 1.x 的 Sass 定制主题功能，我们在原有的主题定制功能上新增了 CSS 变量， 无需引入额外的 SCSS 样式文件，就可以使用到新的主题定制功能。 + +## 方式一 使用 CSS Variables 进行主题配置 + +`NutUI-React` 组件可以通过 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。 +
+
+您可在 [ConfigProvider 组件](#/zh-CN/component/configprovider) 进行体验。我们更推荐使用替换 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 的方式来进行个性化的主题配置。 + +## 方式二 使用 Sass 变量 进行主题配置 + +### 第一步 新建自定义变量 SCSS 文件 + +在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。 + +```scss +// 主色调 +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +### 第二步 修改本地项目 Webpack 或者 Vite 的配置文件 + +修改 `vite` 或者 `webpack` 配置文件中 **sass-loader** 的配置。如下示例： + +#### Vite 方式 + +```javascript +// https://vitejs.dev/config/ +export default defineConfig({ + //... + css: { + preprocessorOptions: { + scss: { + additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";@import "./your/custom_theme.scss";`, + }, + }, + }, +}) +``` + +#### Webpack 方式 + +```javascript +{ + test: /\.(sa|sc)ss$/, + use: [ + { + loader: 'sass-loader', + options: { + // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档 + data: `@import "./assets/custom_theme.scss";@import "@nutui/nutui/dist/styles/variables.scss";`, + } + } + ] +} +``` diff --git a/src/sites/doc/docs/taro/contributing-react.en-US.md b/src/sites/doc/docs/taro/contributing-react.en-US.md new file mode 100644 index 0000000000..e15ca4a49c --- /dev/null +++ b/src/sites/doc/docs/taro/contributing-react.en-US.md @@ -0,0 +1,127 @@ +
Contribution Guidelines
+ +You can contribute to the NutUI community according to the co-construction direction in 《[NutUI invites you to build, Hello Contributor](https://jelly.jd.com/article/6320528b92d94a0068685525)》. + + + +This guide will guide you on how to contribute to NutUI. Please take a few minutes to read this guide before you file an issue or pull request to ensure that the contribution is compliant and can help the community. + +## code of conduct + +In order to ensure a good network environment and create a comfortable development atmosphere, I hope all contributors can abide by this [Code of Conduct](https://www.contributor-covenant.org/zh-cn/version/2/1/code_of_conduct/), and please take the time to read the full text to clarify what is prohibited and what is allowed. + +## Branch management + +The main branch is currently maintained on github. If you want to fix a bug or add a feature, send a pull request to the main branch. + + + +The official website will update [NutUI - React release cycle] (https://github.com/jdf2e/nutui-react/releases), at the same time every day developers review submitted code in the making. The release cycle is once a week, usually incorporating new code or features in advance and releasing formal packages; In case of emergency, beta versions can be released based on the specified branch. + +## Issue + +If submit Bug reports, please be sure to comply with the [` Bug report `] (https://github.com/jdf2e/nutui/blob/next/.github/ISSUE_TEMPLATE/bug_report.md) template. + +## Bugs + +We use [issue - helper] (https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) for bug tracking. We hope you can submit feedback through the issue assistant we provide, and provide all the development information as much as possible, because the more comprehensive the information, the faster the development response, and the bugs you find will be solved quickly. + + + +Before you commit a bug, Please ensure that the search had existing [issue] (https://github.com/jdf2e/nutui-react/issues) and read our [FAQ] (https://nutui.jd.com/#/zh-CN/notice). + +## new features + +If you have a better idea of an existing component function or API, We also recommend that you use our provided [issue - helper] (https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) to submit a issue of adding new features. + + + +If you want to help develop new features and components, Can scan [qr code] (HTTP: / / https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911 .png) join our community co-building group. + +## Participate in contribution + +If you are not familiar with the PR process of github, you can read the following two articles to learn: + + + +[NutUI Contribution Guidelines](https://github.com/jdf2e/nutui-react/discussions/348) + +[github repository code synchronization](https://github.com/jdf2e/nutui/discussions/687) + +## Pull Request Specification + +1. Each PR addresses a single issue or adds a single feature + +2. When adding components or modifying existing components, synchronously change the corresponding unit tests and documents to ensure the stability of the code + +3. Please follow the [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) specification for the commit message + +4. The PR information should include which component has been modified, which problem has been solved, and associated the corresponding issue link on github + +## Pull Request Process + +1. Fork the main repository and synchronize the latest code of the main repository + + + +2. Download the project locally, run npm install in the project root directory, and access it locally + +``` +git clone https://github.com/{github username}/nutui-react.git +npm install +npm run dev +``` + +3. Create a new branch or develop on the corresponding branch + +``` +git checkout -b username/xxxx +git checkout {current branch} +``` + +4. If the development involves new components or new features of components, it is necessary to improve the Chinese and English documentation of the components, the unit testing of the components, and use [nutui-demo](https://github.com/jdf2e/nutui-demo) to Component testing is used. + + + +5、Ensure that the compilation function is used normally + +``` +npm run test +// node v17 +// @nutui/nutui-react +npm run build +// @nutui/nutui-react-taro +npm run build:taro +``` + +6、After the development is completed, submit it to the corresponding branch of the warehouse. After the review is passed, the PR will be merged into the main warehouse, and then wait for NutUI-React to release a new version（Once a week）。 + + + +### Knowledge sharing + +1. Project Use Cases + + Share the [use case](https://nutui.jd.com/#/zh-CN/case) of NutUI, we will recommend it on the official website, prepare the name of the project, Project entry (QR code\link), logo, sample image, delivery platform (H5\mini program\APP, etc.), nutui version and other information should be submitted to **nutui@jd.com** by email. + + + +2. Article video submission + + Share your experiences (tutorials, articles, videos, etc.) by contributing to **nutui@jd.com**. After passing the review, collect it in the [official website resource](https://nutui.jd.com/#/zh-CN/resource), and pass your knowledge and ideas to NutUI friends. + + + +3. Co-construction and sharing + + Based on NutUI, design or develop new tools, such as adapting to uni-app, developing plug-ins to improve efficiency, etc. If you are interested, welcome to join our [Community Development Group](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png) to communicate and discuss. + + + +### Credits + +Thanks to all the developers below who have contributed code to NutUI. + + +
+
diff --git a/src/sites/doc/docs/taro/contributing-react.md b/src/sites/doc/docs/taro/contributing-react.md
new file mode 100644
index 0000000000..b851b28543
--- /dev/null
+++ b/src/sites/doc/docs/taro/contributing-react.md
@@ -0,0 +1,121 @@
+贡献指南
+ +您可根据《[NutUI 邀您共建，Contributor 您好](https://jelly.jd.com/article/6320528b92d94a0068685525)》中的共建方向为 NutUI 社区做出贡献。 + + + +本篇指南会指导你如何为 NutUI 贡献一份自己的力量，请在您要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南，保证贡献是符合规范并且能帮助到社区。 + +## 行为准则 + +为保证良好的网络环境，营造舒适的开发氛围，希望所有的贡献者都能遵守这份[行为准则](https://www.contributor-covenant.org/zh-cn/version/2/1/code_of_conduct/)，也请花时间阅读一遍全文明确哪些行为是禁止的，哪些行为是可行的。 + +## 分支管理 + +目前 github 上长期维护分支 main。如果您要修一个 bug 或新增功能，请发 pull request 到 main 分支。 + + + +官网会同步更新 [NutUI-React 的发布周期](https://github.com/jdf2e/nutui-react/releases)，同时每天都会有开发者 review github 中提交的代码。发版周期是每 1 周/次，通常会提前合并新的代码或功能，发布正式包；期间如遇紧急需求，可基于指定分支发布 beta 版本。 + +## Issue 报告指南 + +如果提交的是 Bug 报告，请务必遵守 [Bug report](https://github.com/jdf2e/nutui/blob/next/.github/ISSUE_TEMPLATE/bug_report.md) 模板。 + +## Bugs + +我们使用 [issue-helper](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) 来做 bug 追踪。希望大家通过我们提供的 issue 小助手来提交反馈，并尽可能提供一切开发信息，因为信息越全面，开发响应速度越快，您发现的 bug 会被快速解决。 + + + +提交 bug 之前，请先确保搜索过已有的 [issue](https://github.com/jdf2e/nutui-react/issues) 和阅读了我们的[常见问题](https://nutui.jd.com/#/zh-CN/notice)。 + +## 功能新增 + +如果您对现有的组件功能或者 API 有更好的想法，我们同样推荐你使用我们提供的 [issue-helper](https://nutui.jd.com/nutui-issue-helper/?repo=jdf2e/nutui-react) 提交一个添加新功能的 issue。 + + + +如果你希望协助开发新功能新组件，可扫描[二维码](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png)加入我们的社区共建群。 + +## 参与贡献 + +如果你对 github 的 PR 流程还不熟悉，可以阅读下面这 2 篇文章来学习： + + + +[NutUI 贡献指南](https://github.com/jdf2e/nutui-react/discussions/348) + +[github 仓库代码同步](https://github.com/jdf2e/nutui/discussions/687) + +## Pull Request 规范 + +1. 每个 PR 只解决单个问题或者新增单个功能 + +2. 当新增组件或修改原有组件时，同步更改对应的单元测试和文档，保证代码的稳定 + +3. commit message 请遵循 [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) 规范 + +4. PR 信息中最好包括修改了哪个组件，解决了哪个问题，并关联 github 上对应的 issue 链接 + +## Pull Request 流程 + +1、fork 主仓库，并同步主仓库的最新代码 + +2、将项目下载到本地，在项目根目录下运行 npm install，并在本地能正常访问 + +``` +git clone https://github.com/{github username}/nutui-react.git +npm install +npm run dev +``` + +3、创建一个新的分支或在对应分支上进行开发 + +``` +git checkout -b username/xxxx +git checkout {现有分支名称} +``` + +4、如开发涉及新组件或组件的新特性，需要完善组件的中英文文档、组件的单元测试，同时要使用 [nutui-demo](https://github.com/jdf2e/nutui-demo) 对组件测试使用。 + +5、保证编译功能正常使用 + +``` +npm run test +// build 使用 node 17 版本 +// 构建 @nutui/nutui-react +npm run build +// 构建 @nutui/nutui-react-taro +npm run build:taro +``` + +6、开发完成后提交到仓库的对应分支上，PR 会在 Review 通过后被合并到主仓库，然后等待 NutUI-React 发布新版本（每周一次）。 + +### 知识分享 + +1. 项目使用案例 + + 分享 NutUI 的[使用案例](https://nutui.jd.com/next/#/case)，我们会在官网进行推荐展示，准备项目的名称、项目入口（二维码\链接）、logo、示例图、投放平台（H5\小程序\APP等）、nutui 版本等信息，以邮箱的形式提交到 **nutui@jd.com**。 + + + +2. 文章视频投稿 + + 分享你的经验（教程、文章、视频等），可以给 **nutui@jd.com** 投稿。在审核通过后，收藏到[官网资源](https://nutui.jd.com/next/#/resource)中，将你的知识与思想传递给 NutUI 的小伙伴们。 + + + +3. 共建分享征集 + + 以 NutUI-React 为基础，设计或开发新的工具，开发提效的插件等。有兴趣欢迎加入我们的[社区开发群](https://img13.360buyimg.com/imagetools/s300x300_jfs/t1/187308/9/29678/349561/634fa983E93012590/a641089fdfed5911.png)交流讨论。 + + + +### Credits + +感谢以下所有给 NutUI 贡献过代码的开发者。 + + +
+
diff --git a/src/sites/doc/docs/taro/international-react.en-US.md b/src/sites/doc/docs/taro/international-react.en-US.md
new file mode 100644
index 0000000000..a0bbe071cb
--- /dev/null
+++ b/src/sites/doc/docs/taro/international-react.en-US.md
@@ -0,0 +1,42 @@
+# Internationalization
+
+NutUI-React support multiple languages. NutUI uses Chinese as the default language. Use as follows:
+
+## Usage
+
+### Switch languages
+
+:::demo
+
+```javascript
+import { ConfigProvider } from '@nutui/nutui-react-taro'
+import en from '@nutui/nutui-react-taro/dist/locales/en-US'
+
+ReactDOM.render(
+
+
+## Version
+
+| Version | Supported Frameworks | Visual Specifications | Compatibility |
+| --- | --- | --- | --- |
+| @nutui/nutui-react-taro | React 17\18 | Jingdong [APP 10.0](/next#/resource) | Modern browsers start with Chrome >= 51、iOS >= 10.0、Android >= 6 |
+
+## All Contributors
+
+Thanks to the following friends for their contributions to NutUI-React:
+
+
+
+
+
+## LICENSE
+
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
diff --git a/src/sites/doc/docs/taro/intro-react.md b/src/sites/doc/docs/taro/intro-react.md
new file mode 100644
index 0000000000..f862e45e9a
--- /dev/null
+++ b/src/sites/doc/docs/taro/intro-react.md
@@ -0,0 +1,39 @@
+# NutUI-React
+
+NutUI-React 组件库，基于 Taro，使用 React 技术栈开发小程序应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。
+
+## 特性
+
+- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 💪 支持一套代码同时开发多端小程序+H5
+- 📖 基于京东APP 10.0 视觉规范
+- 🍭 支持按需引用
+- 📖 详尽的文档和示例
+- 💪 支持 TypeScript
+- 💪 支持服务端渲染（测试阶段）
+- 🍭 支持定制主题
+- 🌍 国际化支持
+- 🍭 单元测试覆盖率超过 80%，保障稳定性
+- 📖 提供 Sketch 设计资源
+
+## 扫码体验
+
+
+
+## 版本说明
+
+| 版本 | 支持的框架 | 视觉规范 | 兼容 |
+| --- | --- | --- | --- |
+| @nutui/nutui-react | React 17\18 | 京东 [APP 10.0](/next#/resource) 规范 | 现代浏览器以 Chrome >= 51、iOS >= 10.0、Android >= 6 |
+
+## 贡献者们
+
+感谢以下小伙伴们为 NutUI-React 发展做出的贡献：
+
+
+
+
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议
diff --git a/src/sites/doc/docs/taro/migrate-from-v1.md b/src/sites/doc/docs/taro/migrate-from-v1.md
new file mode 100644
index 0000000000..97ec2f56e0
--- /dev/null
+++ b/src/sites/doc/docs/taro/migrate-from-v1.md
@@ -0,0 +1,888 @@
+# 从 v1 升级到 v2
+
+本文档将帮助您从 NutUI React `1.x` 升级到 NutUI React `2.x` 版本。
+
+## 升级步骤
+
+1. H5 安装 NutUI React 2.x 版本
+
+```shell
+npm install @nutui/nutui-react
+```
+
+2. Taro 安装 NutUI React 2.x 版本
+
+```shell
+npm install @nutui/nutui-react-taro
+```
+
+3. 处理不兼容更新
+
+从 NutUI React 1.x 到 NutUI React 2.x 存在一些不兼容更新，需要仔细阅读不兼容更新内容，并依次处理。
+
+你可以手动对照下面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 @nutui/nutui-react-codemod 以帮助你快速升级到 v2 版本。在运行 codemod cli 前，请先提交你的本地代码修改。
+
+4. 主题变量更名：
+ 如，primary-color 更名为 color-primary；注意在使用自定义主题，特别是使用 ConfigProvider 组件的情况下，有没有使用 `nutuiBrandColor`，这时记得更名为 `nutuiColorPrimary`
+
+## 兼容更新
+
+1. 组件样式处理
+
+新增了按需引入 css 文件的支持，同时保留了按需引入 scss 文件的能力。可通过 babel-import-plugin 插件实现按需引入 css：
+
+H5配置如下：
+
+```json
+// Webpack .babelrc 或 babel.config.js中配置
+plugins: [
+ [
+ "import",
+ {
+ libraryName: "@nutui/nutui-react",
+ libraryDirectory: "dist/esm",
+ style: 'css',
+ camel2DashComponentName: false,
+ },
+ "nutui-react",
+ ]
+]
+```
+
+Taro配置如下：
+
+```json
+// Webpack .babelrc 或 babel.config.js中配置
+plugins: [
+ [
+ "import",
+ {
+ libraryName: "@nutui/nutui-react-taro",
+ libraryDirectory: "dist/esm",
+ style: 'css',
+ camel2DashComponentName: false,
+ },
+ "nutui-react-taro",
+ ]
+]
+```
+
+2. 更完善的类型导出以及对类型增加 `JSDoc` 注释
+3. 组件分类的调整
+ 在组件分类上，我们从交互维度上，和交互设计侧共同对 1.x 分类进行了基于信息结构的评审，并进行了子类梳理，完成重新分类，目标是更贴合交互场景的分布，易于查找组件。主要分布在：
+
+- 基础组件，将 `Popup` 组件移除，将 `Popup` 细分到操作反馈-引导提示部分；
+- 布局组件，保持不变；
+- 导航组件：将分页相关组件 `Pagination`、`Indicator` 移动到展示组件（考虑移动端的分页轻操作）；`Menu` 菜单移动到数据录入类-选择器子类（考虑 `Menu` 主要是作为筛选器）；将 `BackTop` 移至导航组件，作为锚点组件的一部分；
+- 展示组件：将 `Badge`、`NoticeBar`、`Popover` 移至操作反馈-引导提示类，`Empty`、`Skeleton` 移至操作反馈-加载状态结果反馈中；`WaterMark`、`TrendArrow` 作为特性增强类组件放在特色组件中，待由该类组件的使用场景和范围确认是否变更分类；同时新增 `Audio`，将其同 `Video`、`ImagePreview`、`Swiper` 一同归为展示-多媒体类；
+- 操作反馈类，新增 `Skeleton`、`Empty`（加载结果反馈类），`Popover`、`Notify`、`NoticeBar`、`Popup` （引导提示类）6个组件；同时去除 `BackTop`（导航组件-锚点类）、`Switch`（数据录入-选择器）、`Audio``（展示-多媒体）；在此基础上，未来会考虑增加 ResultPage`，整合错误状态、空状态等反馈状态，该组件在考虑中；同时考虑增加加载状态 `Loading` 组件。版本待定。
+- 数据录入类，主要分为两大类-输入及选择器。在输入中增加 `Signature`，该组件在 `Form` 表单中的应用范围日渐广泛，从特色组件中移入到数据录入部分；选择器中增加 `Switch`、`Menu`，及 `Address`。其中 `Signature` 和 `Address` 都是考虑其常用性，从特色中迁移到数据录入部分。
+- 特色组件，保留 `Barrage`、`Card`、`TimeSelect`，新增 `WaterMark`、`TrendArrow`。
+
+## 不兼容更新
+
+## NutUI Icons 调整
+
+1.x 版本我们在实际开发过程中会发现 `Button` 只是引用了一个很小的 Loading Icon，但是全量引用了 IconFont 字体 ，会导致开发者的项目文件增大。我们在 NutUI React 2.x 中为解决此问题，重新定义了 Icon 组件，将所有的 Icons 抽离成单独的图标组件库 @nutui/icons-react（Taro 适配下为 @nutui/icons-react-taro） ，使其可以进行按需加载使用。 因此一些组件之前关于 Icon 的相关 Props 将被移除，需要使用插槽或者传递一个 Component 组件的 Props 进行使用。 受影响的组件如下：
+
+- Avatar
+- Button
+- ImagePreview
+- Collapse
+- InfiniteLoading
+- Popup
+- Steps
+- Switch
+- Toast
+- Progress
+- NoticeBar
+- SearchBar
+- Navbar
+- Menu
+- Tabbar
+- Checkbox
+- InputNumber
+- Input
+- Radio
+- Rate
+- Uploader
+- Popover
+- Grid
+- TrendArrow
+
+如果你的项目中使用了这些组件，请仔细阅读文档并进行升级。
+
+## 组件名称调整
+
+- GridItem -> Grid.Item
+- TabbarItem -> Tabbar.Item
+- CollapseItem -> Collapse.Item
+- SwiperItem -> Swiper.Item
+- CellGroup -> Cell.Group
+- MenuItem -> Menu.Item
+- Infiniteloading -> InfiniteLoading
+
+## 组件 API 调整
+
+在 2.0 版本中，我们重点对组件 API 进行了评审和修订，使属性和方法命名更贴合常用的命名习惯及 React 语言规范，目标希望开发者在使用组件时得心应手。我们的思路大体如下：
+
+### 属性定义
+
+本次升级重点关注属性的命名方面，从 1.x 的 610 个属性精简为 410 个，更精简、更规范；同时增强属性的类型范围，提升自定义能力。
+
+- 对同一属性进行统一描述，比如：
+ - 缩写类会改为全拼，如 `desc`、`descSlot`、`description` 统一为 `description`
+ - 能使用名词或形容词的优先使用该类词性，一个词能说明白的不用两个词。
+ - 如 `wrap`、`wrapable` 统一为 `wrap`
+ - 如将 `isXxx` 统一为 `xxx`，如 `isVisible`、`isDeletable` 等，可直接使用 `visible`、`deletable` 等，形容词化
+ - 如`showXxx` 尽量统一为 `xxx`，名词化。【部分属性待优化。】
+ - 如 `roundRadius` 改为 `radius` ，`columnNum` 改为 `columns`等
+ - `onClickXxx` 统一为 `onXxxClick`
+ - `modelValue` 统一为 `value`，并增加支持 `defaultValue`，支持受控与非受控模式
+ - 对于标识位置、对齐等类的属性，将属性名变更为其上一层的属性定义，如 `center`会改为 `align`、`vertical`，改为 `direction`，像标记距离的，如 `top`、`bottom`、`distance` 等，会改为 `threshold`
+ - 不规范的定义如 `okBtn`、`okText` 这种，会改为 `confirmXxx`
+- 扩充属性的类型。如 `title` 的类型从 `string` 扩充为 `React.ReactNode`，增强自定义内容；其中有涉及合并属性的，统一用最简命名来定义属性；如 `title`、`titleSlot` 合并为 `title`，再扩充属性类型。
+- 对于 `xxClass`、`xxStyle`类的属性，移除，可使用 `className` 、`style` 来实现。
+- 移除与样式有关的属性，除基础组件的样式属性及部分实现起来较为复杂的样式属性外，大多数样式属性被移除，可通过样式变量来实现。
+- 将普遍认同可内置的属性或不怎么使用的属性，直接内置，去掉属性设置。
+
+### 组件实现
+
+### 基础组件
+
+#### Button
+
+- 移除 `plain`，通过 `fill="outline"` 实现
+- 增加 `ref`，对外暴露组件内 `button` 元素
+- CSS 变量中，对 `type` 类型对应的色值的定义，不在暴露到文档中，建议使用默认值，或修改主题变量
+- 增加 `fill` 模式类型，`dashed`，修改 `fill` 默认值为 `outline`。
+- 增加 `rightIcon`，可满足同时设置左右两个icon的情况。
+- 修改 `size` 为 `large` 时的默认 `width` 为 `100%` 的值，如果使用通栏的 `button`，可搭配 `block` 来使用。
+
+#### Cell
+
+- `subTitle` 重命名为 `description`，类型修改为 `React.Node`
+- `desc` 重命名为 `extra`，类型修改为 `React.Node`
+- `roundRadius` 重命名为 `radius`
+- `center` 重命名为 `align`，默认值修改为`flex-start`，可选值为 `flex-start`、`center`、`flex-end`
+- 移除 `icon`、 `isLink`、`url`、`linkSlot`、`replace`、`descTextAlign`，通过用户自定义节点实现，参考文档demo示例
+
+#### CellGroup
+
+- 新增 `divider`，单元格之间是否有分割线
+- `desc` 重命名为 `description`
+- `title`、`description` 类型修改为 `React.Node`
+- 移除 `titleSlot` 和 `descSlot`，通过 `title`、`description` 实现
+-
+
+#### ConfigProvider
+
+#### Icon
+
+#### Image
+
+- 移除 `round`，通过 `radius` 实现圆或圆角
+- 移除 `loadingImg` 和 `slotLoading`，通过 `loading` 属性实现，当 `loading` 属性设置为 `ReactNode` 或 `true` 时，表示展示 `loading` 状态
+- 移除 `showError` 和 `slotError`，通过 `error` 属性实现，当 `error` 属性设置为 `ReactNode` 或 `true` 时，表示展示 `error` 状态
+- 移除 `loadingImg`，可通过 `loading` 设置 `ReactNode`
+- 移除 `errorImg`，可通过 `error` 设置 `ReactNode`
+- `showError` 重命名为 `error`，类型修改为 `boolean｜ReactNode`
+- `showLoading` 重命名为 `loading`，类型修改为 `boolean｜ReactNode`
+
+#### Overlay
+
+- `overlayClass` 重命名为 `className`
+- `overlayStyle` 重命名为 `style`
+- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`
+- 更改 `lockScroll` 默认值为 `true`
+- 新增 `afterClose` 和 `afterShow`，用于完全关闭后触发的回调和完全展示后触发的回调
+
+#### Popup
+
+- `popClass` 重命名为 `className`，统一将组件的样式类名使用 `className`，不再指定特殊名字，减轻用户使用的记忆成本
+- `overlayClass` 重命名为 `overlayClassName`，继承自`Overlay`
+- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`
+- `onOpened` 和 `onClosed` 重命名为 `afterShow` 和 `afterClose`，继承自`Overlay`，用于完全关闭后触发的回调和完全展示后触发的回调
+- `destroyOnClose` 的描述进行了修订，改为：“组件不可见时，卸载内容”，并把其默认值改为了`false`
+- `onClickCloseIcon` 和 `onClickOverlay` 两个方法，增加布尔判断，如返回false 或 未定义返回值时，将不再关闭 Popup；默认值为 `true`；在demo中已增加相应示例；同时，两者的名字变更为 `onCloseIconClick`、`onOverlayClick`
+- `closeIcon` 类型从 `string` 改为 `ReactNode`，以前的 `closeIcon='mask-close'` 需改为 `closeIcon={
+
+## How to use
+
+### Modify the configuration file of the local project vite or webpack
+
+Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example
+
+#### vite configuration example
+
+:::demo
+
+```javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+ //...
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // Default Jingdong APP 10.0 theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+})
+```
+
+:::
+
+#### webpack configuration example
+
+:::demo
+
+```javascript
+{
+ test: /\.(sa|sc)ss$/,
+ use: [
+ {
+ loader: 'sass-loader',
+ options: {
+ // Default Jingdong APP 10.0 theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ // Note: In different versions of sass-loader, the name of this option is different. For details, please refer to the version documentation corresponding to sass-loader
+ data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ }
+ }
+ ]
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/taro/official-theme-react.md b/src/sites/doc/docs/taro/official-theme-react.md
new file mode 100644
index 0000000000..c4107d8c8c
--- /dev/null
+++ b/src/sites/doc/docs/taro/official-theme-react.md
@@ -0,0 +1,86 @@
+# 官方主题
+
+## 介绍
+
+NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制新主题，以满足业务的多样化视觉需求。
+
+####
+
+| 主题说明 | scss 文件名称 |
+| --- | --- |
+| 京东 APP 主题（默认） | `variables.scss` |
+| 京东B商城主题预览 | `variables-jdb.scss` |
+
+
+
+## 使用方式
+
+### 修改本地项目 vite 或者 webpack 的配置文件
+
+修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例
+
+#### vite 配置示例
+
+:::demo
+
+```javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+ //...
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+})
+```
+
+:::
+
+#### webpack 配置示例
+
+:::demo
+
+```javascript
+{
+ test: /\.(sa|sc)ss$/,
+ use: [
+ {
+ loader: 'sass-loader',
+ options: {
+ // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
+ // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
+ // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
+ data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ }
+ }
+ ]
+}
+```
+
+:::
+
+#### vue/cli 3 以上版本修改 **vue.config.js** 进行配置
+
+:::demo
+
+```javascript
+module.exports = {
+ css: {
+ loaderOptions: {
+ // 给 sass-loader 传递选项
+ scss: {
+ // @/ 是 src/ 的别名
+ // 注意：在 sass-loader v7 中，这个选项名是 "data"
+ prependData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
+ },
+ },
+ },
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/taro/start-react.en-US.md b/src/sites/doc/docs/taro/start-react.en-US.md
new file mode 100644
index 0000000000..b8d48574ff
--- /dev/null
+++ b/src/sites/doc/docs/taro/start-react.en-US.md
@@ -0,0 +1,185 @@
+# Quick Start
+
+## Intro
+
+Through this article, you can master the installation and use of NutUI-React Taro. The operation is simple and easy to use, and the development is simple and fast.
+
+## Install Taro CLI
+
+```sh
+# pnpm
+pnpm install -g @tarojs/cli
+# npm
+npm install -g @tarojs/cli
+# yarn
+yarn global add @tarojs/cli
+```
+
+## Method 1: Use the NutUI template to quickly create a project
+
+#### 1. Use the command to create a Taro project:
+
+```sh
+taro init
+```
+
+#### 2、Refer to the operation below to select the NutUI React template
+
+```sh
+👽 Taro
+
+Taro 即将创建一个新项目!
+Need help? Go and open issue: https://tls.jd.com/taro-issue-helper
+
+? 请输入项目名称！ MyProject
+? 请输入项目介绍
+? 请选择框架 React
+? 是否需要使用 TypeScript ？ Yes
+? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
+? 请选择编译工具 Webpack5
+? 请选择包管理工具 pnpm
+? 请选择模板源 Github（最新）
+✔ 拉取远程模板仓库成功！
+ 默认模板
+ harmony
+ mobx
+ pwa
+❯ react-NutUI（使用 NutUI React 的模板）
+ react-native
+ ......
+```
+
+## Method 2: Introduce NutUI React into the existing Taro project
+
+#### 1. Install NutUI React
+
+```sh
+# pnpm
+pnpm add @nutui/nutui-react-taro
+# npm
+npm i @nutui/nutui-react-taro
+# yarn
+yarn add @nutui/nutui-react-taro
+```
+
+#### 2、Taro
+
+Install [@tarojs/plugin-html](https://taro-docs.jd.com/docs/use-h5/)
+
+```sh
+# pnpm
+pnpm add @tarojs/plugin-html@version
+# yarn
+yarn add @tarojs/plugin-html@version
+# npm
+npm i @tarojs/plugin-html@version
+```
+
+config
+
+:::demo
+
+```js
+// config/index.js
+config = {
+ plugins: ['@tarojs/plugin-html'],
+ designWidth(input) {
+ if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
+ return 375
+ }
+ return 750
+ },
+ deviceRatio: {
+ 640: 2.34 / 2,
+ 750: 1,
+ 828: 1.81 / 2,
+ 375: 2 / 1,
+ },
+}
+```
+
+:::
+
+#### 3、Component usage and on-demand import
+
+You can choose to import style files in full:
+
+```js
+import '@nutui/nutui-react-taro/dist/style.css'
+```
+
+You can also implement on-demand import of styles in the following ways:
+
+Install `babel-plugin-import`.
+
+```sh
+# pnpm
+pnpm add babel-plugin-import
+# npm
+npm i babel-plugin-import
+# yarn
+yarn add babel-plugin-import
+```
+
+babel config
+
+:::demo
+
+```js
+// babel.config.js
+plugins: [
+ [
+ 'import',
+ {
+ libraryName: '@nutui/nutui-react-taro',
+ libraryDirectory: 'dist/esm',
+ style: 'css',
+ camel2DashComponentName: false,
+ },
+ 'nutui-react-taro',
+ ],
+]
+```
+
+:::
+
+## Precautions
+
+#### 1. Check if Taro is successfully installed
+
+```sh
+taro -v
+```
+
+The Taro version number appears to indicate a successful installation.
+
+#### 2. Saas-related errors occurred during the installation of Taro
+
+You may consider installing `mirror-config-china` and try again.
+
+```sh
+npm install -g mirror-config-china
+```
+
+#### 3. When the applet project is running, the error message "can't find the template" appears
+
+Solution: Turn off prebundle and cache in Taro configuration file
+
+:::demo
+
+```js
+// config/index.js
+config = {
+ compiler: {
+ type: 'webpack5',
+ prebundle: {
+ exclude: ['@nutui/nutui-react-taro', '@nutui/icons-react-taro'],
+ },
+ },
+ cache: {
+ enable: false,
+ },
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/taro/start-react.md b/src/sites/doc/docs/taro/start-react.md
new file mode 100644
index 0000000000..89ac3ff900
--- /dev/null
+++ b/src/sites/doc/docs/taro/start-react.md
@@ -0,0 +1,191 @@
+# 快速上手
+
+## 介绍
+
+通过本文你可以掌握 NutUI-React Taro 的安装和使用方法，操作简单易上手，开发简洁快速。
+
+## 安装 Taro 脚手架
+
+```sh
+# pnpm
+pnpm install -g @tarojs/cli
+# npm
+npm install -g @tarojs/cli
+# yarn
+yarn global add @tarojs/cli
+```
+
+## 方式一：使用 Taro 内置的 NutUI 模板快速创建项目
+
+#### 1、使用命令创建 Taro 项目：
+
+```sh
+taro init
+```
+
+#### 2、参考下方操作，选择 NutUI React 模板
+
+```sh
+👽 Taro
+
+Taro 即将创建一个新项目!
+Need help? Go and open issue: https://tls.jd.com/taro-issue-helper
+
+? 请输入项目名称！ MyProject
+? 请输入项目介绍
+? 请选择框架 React
+? 是否需要使用 TypeScript ？ Yes
+? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
+? 请选择编译工具 Webpack5
+? 请选择包管理工具 pnpm
+? 请选择模板源 Github（最新）
+✔ 拉取远程模板仓库成功！
+ 默认模板
+ harmony
+ mobx
+ pwa
+❯ react-NutUI（使用 NutUI React 的模板）
+ react-native
+ ......
+```
+
+## 方式二：在已有 Taro 项目中引入 NutUI React
+
+#### 1、安装 NutUI React
+
+```sh
+# pnpm
+pnpm add @nutui/nutui-react-taro
+# npm
+npm i @nutui/nutui-react-taro
+# yarn
+yarn add @nutui/nutui-react-taro
+```
+
+#### 2、Taro 相关配置
+
+安装 [@tarojs/plugin-html](https://taro-docs.jd.com/docs/use-h5/)
+
+> 注意，这里安装的版本 version 必须与项目中 Taro 版本保持一致！
+
+```bash
+# pnpm
+pnpm add @tarojs/plugin-html@version
+# yarn
+yarn add @tarojs/plugin-html@version
+# npm
+npm i @tarojs/plugin-html@version
+```
+
+在项目中配置
+
+:::demo
+
+```js
+// config/index.js
+config = {
+ // 开启 HTML 插件
+ plugins: ['@tarojs/plugin-html'],
+ designWidth(input) {
+ // 配置 NutUI 375 尺寸
+ if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
+ return 375
+ }
+ // 全局使用 Taro 默认的 750 尺寸
+ return 750
+ },
+ deviceRatio: {
+ 640: 2.34 / 2,
+ 750: 1,
+ 828: 1.81 / 2,
+ 375: 2 / 1,
+ },
+}
+```
+
+:::
+
+#### 3、组件使用与按需引入
+
+您可以选择全量引入样式文件：
+
+```js
+import '@nutui/nutui-react-taro/dist/style.css'
+```
+
+也可以通过下面的方式实现样式的按需引入：
+
+首先安装 `babel-plugin-import` 插件
+
+```sh
+# pnpm
+pnpm add babel-plugin-import
+# npm
+npm i babel-plugin-import
+# yarn
+yarn add babel-plugin-import
+```
+
+安装后在项目中设置 babel 相关配置：
+
+```js
+// babel.config.js
+module.exports = {
+ presets: [
+ // ...
+ ],
+ plugins: [
+ [
+ 'import',
+ {
+ libraryName: '@nutui/nutui-react-taro',
+ libraryDirectory: 'dist/esm',
+ style: 'css',
+ camel2DashComponentName: false,
+ },
+ 'nutui-react-taro',
+ ],
+ ],
+}
+```
+
+## 注意事项
+
+#### 1、检查 Taro 是否安装成功
+
+```sh
+taro -v
+```
+
+出现 Taro 版本号说明安装成功。
+
+#### 2、安装 Taro 过程中出现 Saas 相关错误
+
+可以考虑安装 `mirror-config-china` 后重试。
+
+```sh
+npm install -g mirror-config-china
+```
+
+#### 3、小程序项目运行时出现「找不到模板」的错误提示
+
+解决方案：在 Taro 配置文件中关闭 prebundle 及 cache
+
+:::demo
+
+```js
+// config/index.js
+config = {
+ compiler: {
+ type: 'webpack5',
+ prebundle: {
+ exclude: ['@nutui/nutui-react-taro', '@nutui/icons-react-taro'],
+ },
+ },
+ cache: {
+ enable: false,
+ },
+}
+```
+
+:::
diff --git a/src/sites/doc/docs/taro/theme-react.en-US.md b/src/sites/doc/docs/taro/theme-react.en-US.md
new file mode 100644
index 0000000000..30cfcb128c
--- /dev/null
+++ b/src/sites/doc/docs/taro/theme-react.en-US.md
@@ -0,0 +1,58 @@
+# Customize Theme
+
+## Introduce
+
+NutUI-React supports flexible style customization to meet multiple visual business and brand needs, including but not limited to support for global master tone and component-specific visual customization.
++
+In NutUI-React version 1.4.0, the Sass theme customization function of 1.x can still be used. We added CSS variables to the original theme customization function, so that the new theme customization function can be used without introducing additional SCSS style files. + +## Method 1: Use CSS Variables to configure topics + +`NutUI - React` can [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) to organize the pattern, By overwriting these 'CSS' variables, you can achieve custom theme, dynamic switching theme and other functions. +
+
+You can play with the [ConfigProvider](#/zh-CN/component/configprovider) component. +
+
+We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) for the theme of personalized configuration. + +## Method 2: Use Sass variable for topic configuration + +#### Step 1: Create a custom variable SCSS file + +Create a new 'SCSS' file 'custom_theme.scss' in your local project. + +```scss +// Dominant tone +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +#### Step 2: Modify the configuration file of the local project webpack or vite + +Modify the ** ass-loader** configuration in the 'vite' or 'webpack' configuration file. The following example + +#### taro + +Configure `scss` file global cover in `config/index.js`: + +```javascript +const path = require('path'); +const config = { + deviceRatio: { + 640: 2.34 / 2, + 750: 1, + 828: 1.81 / 2, + 375: 2 / 1 + }, + sass: { + resource: [ + path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss') + ], + // 默认京东 APP 10.0主题 > @import "@nutui/nutui-react-taro/dist/styles/variables.scss"; + data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";` + }, + // ... +``` diff --git a/src/sites/doc/docs/taro/theme-react.md b/src/sites/doc/docs/taro/theme-react.md new file mode 100644 index 0000000000..f1aec212d5 --- /dev/null +++ b/src/sites/doc/docs/taro/theme-react.md @@ -0,0 +1,53 @@ +# 主题定制 + +## 介绍 + +NutUI-React 支持灵活的样式定制，满足多种视觉业务和品牌需求，包括但不限于全局主色调和特定组件视觉定制的支持。 +
+在 NutUI-React 的 1.4.0 版本中，依然可以使用 1.x 的 Sass 定制主题功能，我们在原有的主题定制功能上新增了 CSS 变量， 无需引入额外的 SCSS 样式文件，就可以使用到新的主题定制功能。 + +## 方式一 使用 CSS Variables 进行主题配置 + +`NutUI-React` 组件可以通过 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 `CSS` 变量，可以实现定制主题、动态切换主题等功能。 +
+您可在 [ConfigProvider 组件](#/zh-CN/component/configprovider) 进行体验。 +
+我们更推荐使用替换 [CSS Vars](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 的方式来进行个性化的主题配置。 + +## 方式二 使用 Sass 变量 进行主题配置 + +### 第一步 新建自定义变量 SCSS 文件 + +在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。 + +```scss +// 主色调 +$color-primary: #fa2c19; +$color-primary-end: #fa6419; +... +``` + +### 第二步 修改本地项目 webpack 或者 vite 的配置文件 + +#### Taro 小程序使用示例 + +修改 `config/index.js` 文件中配置 `scss` 文件，全局覆盖如： + +```javascript +const path = require('path'); +const config = { + deviceRatio: { + 640: 2.34 / 2, + 750: 1, + 828: 1.81 / 2, + 375: 2 / 1 + }, + sass: { + resource: [ + path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss') + ], + // 默认京东 APP 10.0主题 > @import "@nutui/nutui-react-taro/dist/styles/variables.scss"; + data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";` + }, + // ... +``` diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts index 5a91667608..201f206500 100644 --- a/src/sites/doc/router.ts +++ b/src/sites/doc/router.ts @@ -1,9 +1,12 @@ -import { Divider } from '@nutui/nutui-react-taro'; // const modulesPage = import.meta.globEager('/src/packages/**/doc.md', { // as: 'raw', // }) const modulesPage = import.meta.glob('/src/packages/**/doc.md') const routes: any[] = [] +const guideRoutes: any[] = [] +const guideEnRoutes: any[] = [] +const guideTaroRoutes: any[] = [] +const guideEnTaroRoutes: any[] = [] for (const path in modulesPage) { let name = (/packages\/(.*)\/doc\.md/.exec(path) as any[])[1] routes.push({ @@ -44,9 +47,41 @@ for (const path in modulesTaroPage) { }) } -// routes.push({ -// path: '/zh-CN/guide/intro-react', -// name: 'intro-react-zh-CN', -// component: () => Divider -// }) -export default routes +const modulesDocs = import.meta.glob('/src/sites/doc/docs/react/*.md'); +for (const path in modulesDocs) { + let name = (/docs\/react\/(.*).md/.exec(path) as any[])[1]; + guideRoutes.push({ + path: `/zh-CN/guide/${name}`, + component: modulesDocs[path], + name + }); +} + +const modulesEnDocs = import.meta.glob('/src/sites/doc/docs/react/*.en-US.md'); +for (const path in modulesEnDocs) { + let name = (/docs\/react\/(.*).en-US.md/.exec(path) as any[])[1]; + guideEnRoutes.push({ + path: `/en-US/guide/${name}`, + component: modulesEnDocs[path], + name: `en-${name}` + }); +} +const modulesTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.md'); +for (const path in modulesTaroDocs) { + let name = (/docs\/taro\/(.*).md/.exec(path) as any[])[1]; + guideTaroRoutes.push({ + path: `/zh-CN/guide-taro/${name}`, + component: modulesDocs[path], + name + }); +} +const modulesEnTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.en-US.md'); +for (const path in modulesEnTaroDocs) { + let name = (/docs\/taro\/(.*).en-US.md/.exec(path) as any[])[1]; + guideEnTaroRoutes.push({ + path: `/en-US/guide-taro/${name}`, + component: modulesDocs[path], + name + }); +} +export {routes, guideRoutes, guideEnRoutes, guideTaroRoutes, guideEnTaroRoutes} From 62a87fab2e114324192e55d4dbf4ef16c1894ca8 Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Tue, 21 Jan 2025 19:10:13 +0800 Subject: [PATCH 08/14] feat: save some guide and routes logics --- src/sites/doc/App.tsx | 4 ++-- src/sites/doc/docs/react/contributing-react.en-US.md | 2 +- src/sites/doc/docs/react/contributing-react.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx index cf70257b2a..c0ee24bb8d 100644 --- a/src/sites/doc/App.tsx +++ b/src/sites/doc/App.tsx @@ -88,11 +88,11 @@ const Content = () => { return (
-
+ {!isGuide &&
}
diff --git a/src/sites/doc/docs/react/contributing-react.en-US.md b/src/sites/doc/docs/react/contributing-react.en-US.md
index fa3d85d360..d96531048f 100644
--- a/src/sites/doc/docs/react/contributing-react.en-US.md
+++ b/src/sites/doc/docs/react/contributing-react.en-US.md
@@ -1,4 +1,4 @@
-
Contribution Guidelines
+# Contribution Guidelines You can contribute to the NutUI community according to the co-construction direction in 《[NutUI invites you to build, Hello Contributor](https://jelly.jd.com/article/6320528b92d94a0068685525)》. diff --git a/src/sites/doc/docs/react/contributing-react.md b/src/sites/doc/docs/react/contributing-react.md index 21ad78757a..56e2eb7b72 100644 --- a/src/sites/doc/docs/react/contributing-react.md +++ b/src/sites/doc/docs/react/contributing-react.md @@ -1,4 +1,4 @@ -## 贡献指南 +# 贡献指南 您可根据《[NutUI 邀您共建，Contributor 您好](https://jelly.jd.com/article/6320528b92d94a0068685525)》中的共建方向为 NutUI 社区做出贡献。 From 485990ef03c0cbcb8f8e5101c898b515dd36c1ef Mon Sep 17 00:00:00 2001 From: "Alex.hxy" <1872591453@qq.com> Date: Tue, 21 Jan 2025 20:17:17 +0800 Subject: [PATCH 09/14] feat: save some guide and routes logics --- src/sites/doc/App.tsx | 7 ++++--- src/sites/doc/components/nav/nav.tsx | 2 +- src/sites/doc/docs/taro/contributing-react.en-US.md | 4 ++-- src/sites/doc/docs/taro/contributing-react.md | 4 ++-- src/sites/doc/router.ts | 4 ++-- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx index c0ee24bb8d..653adaf8a8 100644 --- a/src/sites/doc/App.tsx +++ b/src/sites/doc/App.tsx @@ -85,7 +85,8 @@ const Content = () => { useEffect(() => { document.addEventListener('scroll', scrollTitle) }, []) - + const routes = [...routers, ...guideRoutes, ...guideEnRoutes, ...guideTaroRoutes, ...guideEnTaroRoutes] + console.log(guideRoutes,guideTaroRoutes) return (
{!isGuide &&
@@ -97,8 +98,8 @@ const Content = () => {
className={`doc-content-document ${isGuide ? 'full' : 'isComponent'}`}
>
- {[...routers, ...guideRoutes].map((ru, k) => {
- const path = ru.component.name?.substring(
+ {routes.map((ru, k) => {
+ const path = ru.component?.name?.substring(
0,
ru.component.name.lastIndexOf('/')
)
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 626a8ea0b6..88d3a2b061 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -35,7 +35,7 @@ const Nav = () => {
const changeNav = (_nav: any) => {
setActiveName(_nav.name)
- navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide/` + _nav.name.toLowerCase())
+ navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide${isTaro? '-taro' : ''}/${_nav.name.toLowerCase()}`)
}
const isTaro = location.pathname.includes('-taro')
const isZh = lang === 'zh-CN'
diff --git a/src/sites/doc/docs/taro/contributing-react.en-US.md b/src/sites/doc/docs/taro/contributing-react.en-US.md
index e15ca4a49c..2d201daa60 100644
--- a/src/sites/doc/docs/taro/contributing-react.en-US.md
+++ b/src/sites/doc/docs/taro/contributing-react.en-US.md
@@ -1,4 +1,4 @@
-
+
diff --git a/src/sites/doc/docs/taro/contributing-react.md b/src/sites/doc/docs/taro/contributing-react.md
index b851b28543..cc161ad9f8 100644
--- a/src/sites/doc/docs/taro/contributing-react.md
+++ b/src/sites/doc/docs/taro/contributing-react.md
@@ -1,4 +1,4 @@
-
+
diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts
index 201f206500..89d14b6518 100644
--- a/src/sites/doc/router.ts
+++ b/src/sites/doc/router.ts
@@ -71,7 +71,7 @@ for (const path in modulesTaroDocs) {
let name = (/docs\/taro\/(.*).md/.exec(path) as any[])[1];
guideTaroRoutes.push({
path: `/zh-CN/guide-taro/${name}`,
- component: modulesDocs[path],
+ component: modulesTaroDocs[path],
name
});
}
@@ -80,7 +80,7 @@ for (const path in modulesEnTaroDocs) {
let name = (/docs\/taro\/(.*).en-US.md/.exec(path) as any[])[1];
guideEnTaroRoutes.push({
path: `/en-US/guide-taro/${name}`,
- component: modulesDocs[path],
+ component: modulesEnTaroDocs[path],
name
});
}
From 3d618f49c69d8b572b967a847e0d13c6d7a2978e Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 22 Jan 2025 10:14:25 +0800
Subject: [PATCH 10/14] feat: save some guide & guideTaro routes logics
---
src/sites/doc/App.tsx | 24 ++++--
src/sites/doc/components/nav/nav.tsx | 2 +-
src/sites/doc/docs/react/intro-react.en-US.md | 4 +-
src/sites/doc/docs/react/intro-react.md | 2 +-
.../doc/docs/react/migrate-from-v1.en-US.md | 73 +++++++++++++++++
.../doc/docs/react/migrate-from-v2.en-US.md | 78 +++++++++++++++++++
src/sites/doc/docs/taro/intro-react.md | 4 +-
.../doc/docs/taro/official-theme-react.md | 2 +-
src/sites/doc/router.ts | 4 +-
9 files changed, 177 insertions(+), 16 deletions(-)
create mode 100644 src/sites/doc/docs/react/migrate-from-v1.en-US.md
create mode 100644 src/sites/doc/docs/react/migrate-from-v2.en-US.md
diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx
index 653adaf8a8..0e92f54a6d 100644
--- a/src/sites/doc/App.tsx
+++ b/src/sites/doc/App.tsx
@@ -85,15 +85,23 @@ const Content = () => {
useEffect(() => {
document.addEventListener('scroll', scrollTitle)
}, [])
- const routes = [...routers, ...guideRoutes, ...guideEnRoutes, ...guideTaroRoutes, ...guideEnTaroRoutes]
- console.log(guideRoutes,guideTaroRoutes)
+ const routes = [
+ ...routers,
+ ...guideRoutes,
+ ...guideEnRoutes,
+ ...guideTaroRoutes,
+ ...guideEnTaroRoutes,
+ ]
+ console.log(guideRoutes, guideTaroRoutes)
return (
)
}
diff --git a/src/sites/doc/components/demoblock/codeblock.tsx b/src/sites/doc/components/demoblock/codeblock.tsx
index 6623682941..1509641103 100644
--- a/src/sites/doc/components/demoblock/codeblock.tsx
+++ b/src/sites/doc/components/demoblock/codeblock.tsx
@@ -12,6 +12,7 @@ const modules = import.meta.glob(`@/packages/**/demos/**/*.tsx`, {
const CodeBlock: FunctionComponent = (props: { src?: string }) => {
const ctx = useContext(APPContext)
+ const path = `${ctx.path}/doc.md`
const originCode = modules[`${ctx.path}/demos/${props.src}`]
try {
const highlightedCode = hljs.highlightAuto(originCode, ['jsx']).value
@@ -22,7 +23,7 @@ const CodeBlock: FunctionComponent = (props: { src?: string }) => {
)
- } catch(e) {
+ } catch (e) {
console.log('e', e)
return <>
}
From 3301a0f013d229dff03838266d2498cbcd3335dc Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 5 Feb 2025 13:47:28 +0800
Subject: [PATCH 14/14] =?UTF-8?q?refactor:=20=E6=89=93=E5=8C=85=E7=BB=93?=
=?UTF-8?q?=E6=9E=84=E5=88=9D=E5=A7=8B=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 1 +
index.html | 2 +-
package.json | 15 +-
src/packages/popup/doc.taro.md | 10 +-
src/packages/uploader/doc.en-US.md | 20 +-
src/sites/assets/styles/variables.scss | 2 +-
src/sites/config/env.ts | 2 +-
.../doc/components/demo-preview/index.ts | 3 -
src/sites/doc/components/header/index.ts | 2 -
src/sites/doc/components/nav/index.ts | 3 -
src/sites/{ => sites-react}/doc/App.scss | 0
src/sites/{ => sites-react}/doc/App.tsx | 13 +-
.../components/demo-preview/demo-preview.scss | 0
.../components/demo-preview/demo-preview.tsx | 0
.../doc/components/demo-preview/index.ts | 3 +
.../doc/components/demoblock/basedUtil.ts | 0
.../doc/components/demoblock/codeblock.tsx | 0
.../doc/components/demoblock/demoblock.scss | 0
.../doc/components/demoblock/demoblock.tsx | 0
.../doc/components/demoblock/index.ts | 0
.../doc/components/header/header.scss | 16 +-
.../doc/components/header/header.tsx | 5 +-
.../doc/components/header/index.ts | 2 +
.../doc/components/issue/index.ts | 0
.../doc/components/issue/issue.scss | 0
.../doc/components/issue/issue.tsx | 0
.../sites-react/doc/components/nav/index.ts | 3 +
.../doc/components/nav/nav.scss | 0
.../doc/components/nav/nav.tsx | 0
.../doc/components/search/search.scss | 2 +-
.../doc/components/search/search.tsx | 2 +-
src/sites/{ => sites-react}/doc/context.ts | 0
src/sites/sites-react/doc/docs.taro.ts | 363 ++++++++++++++++++
src/sites/sites-react/doc/docs.ts | 359 +++++++++++++++++
.../docs/react/contributing-react.en-US.md | 0
.../doc/docs/react/contributing-react.md | 0
.../docs/react/international-react.en-US.md | 0
.../doc/docs/react/international-react.md | 0
.../doc/docs/react/intro-react.en-US.md | 0
.../doc/docs/react/intro-react.md | 0
.../doc/docs/react/migrate-from-v1.en-US.md | 0
.../doc/docs/react/migrate-from-v1.md | 0
.../doc/docs/react/migrate-from-v2.en-US.md | 0
.../doc/docs/react/migrate-from-v2.md | 0
.../docs/react/official-theme-react.en-US.md | 0
.../doc/docs/react/official-theme-react.md | 0
.../doc/docs/react/start-react.en-US.md | 0
.../doc/docs/react/start-react.md | 0
.../doc/docs/react/theme-react.en-US.md | 0
.../doc/docs/react/theme-react.md | 0
.../doc/docs/taro/contributing-react.en-US.md | 0
.../doc/docs/taro/contributing-react.md | 0
.../docs/taro/international-react.en-US.md | 0
.../doc/docs/taro/international-react.md | 0
.../doc/docs/taro/intro-react.en-US.md | 0
.../doc/docs/taro/intro-react.md | 0
.../doc/docs/taro/migrate-from-v1.md | 0
.../doc/docs/taro/migrate-from-v2.md | 0
.../docs/taro/official-theme-react.en-US.md | 0
.../doc/docs/taro/official-theme-react.md | 0
.../doc/docs/taro/start-react.en-US.md | 0
.../doc/docs/taro/start-react.md | 0
.../doc/docs/taro/theme-react.en-US.md | 0
.../doc/docs/taro/theme-react.md | 0
src/sites/{ => sites-react}/doc/main.tsx | 4 +-
src/sites/{ => sites-react}/doc/router.ts | 4 +-
src/sites/theme/components/header/header.scss | 8 +-
vite.config.demo.ts | 126 ++++++
vite.config.site.taro.ts | 0
vite.config.site.ts | 92 +++--
70 files changed, 975 insertions(+), 87 deletions(-)
delete mode 100644 src/sites/doc/components/demo-preview/index.ts
delete mode 100644 src/sites/doc/components/header/index.ts
delete mode 100644 src/sites/doc/components/nav/index.ts
rename src/sites/{ => sites-react}/doc/App.scss (100%)
rename src/sites/{ => sites-react}/doc/App.tsx (92%)
rename src/sites/{ => sites-react}/doc/components/demo-preview/demo-preview.scss (100%)
rename src/sites/{ => sites-react}/doc/components/demo-preview/demo-preview.tsx (100%)
create mode 100644 src/sites/sites-react/doc/components/demo-preview/index.ts
rename src/sites/{ => sites-react}/doc/components/demoblock/basedUtil.ts (100%)
rename src/sites/{ => sites-react}/doc/components/demoblock/codeblock.tsx (100%)
rename src/sites/{ => sites-react}/doc/components/demoblock/demoblock.scss (100%)
rename src/sites/{ => sites-react}/doc/components/demoblock/demoblock.tsx (100%)
rename src/sites/{ => sites-react}/doc/components/demoblock/index.ts (100%)
rename src/sites/{ => sites-react}/doc/components/header/header.scss (97%)
rename src/sites/{ => sites-react}/doc/components/header/header.tsx (99%)
create mode 100644 src/sites/sites-react/doc/components/header/index.ts
rename src/sites/{ => sites-react}/doc/components/issue/index.ts (100%)
rename src/sites/{ => sites-react}/doc/components/issue/issue.scss (100%)
rename src/sites/{ => sites-react}/doc/components/issue/issue.tsx (100%)
create mode 100644 src/sites/sites-react/doc/components/nav/index.ts
rename src/sites/{ => sites-react}/doc/components/nav/nav.scss (100%)
rename src/sites/{ => sites-react}/doc/components/nav/nav.tsx (100%)
rename src/sites/{ => sites-react}/doc/components/search/search.scss (94%)
rename src/sites/{ => sites-react}/doc/components/search/search.tsx (98%)
rename src/sites/{ => sites-react}/doc/context.ts (100%)
create mode 100644 src/sites/sites-react/doc/docs.taro.ts
create mode 100644 src/sites/sites-react/doc/docs.ts
rename src/sites/{ => sites-react}/doc/docs/react/contributing-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/contributing-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/international-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/international-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/intro-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/intro-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/migrate-from-v1.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/migrate-from-v1.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/migrate-from-v2.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/migrate-from-v2.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/official-theme-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/official-theme-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/start-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/start-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/theme-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/react/theme-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/contributing-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/contributing-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/international-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/international-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/intro-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/intro-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/migrate-from-v1.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/migrate-from-v2.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/official-theme-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/official-theme-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/start-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/start-react.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/theme-react.en-US.md (100%)
rename src/sites/{ => sites-react}/doc/docs/taro/theme-react.md (100%)
rename src/sites/{ => sites-react}/doc/main.tsx (88%)
rename src/sites/{ => sites-react}/doc/router.ts (93%)
create mode 100644 vite.config.demo.ts
create mode 100644 vite.config.site.taro.ts
diff --git a/.gitignore b/.gitignore
index f56e3aa29f..54d4f200c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ node_modules
.npmrc
/dist
/dist-demo
+/dist-site
/libs
/jd/upload.js
# yarn.lock
diff --git a/index.html b/index.html
index 47e045264c..738380c63b 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
continue.
-
+
Contribution Guidelines
+# Contribution Guidelines You can contribute to the NutUI community according to the co-construction direction in 《[NutUI invites you to build, Hello Contributor](https://jelly.jd.com/article/6320528b92d94a0068685525)》. @@ -123,5 +123,5 @@ npm run build:taro Thanks to all the developers below who have contributed code to NutUI. -
+
diff --git a/src/sites/doc/docs/taro/contributing-react.md b/src/sites/doc/docs/taro/contributing-react.md
index b851b28543..cc161ad9f8 100644
--- a/src/sites/doc/docs/taro/contributing-react.md
+++ b/src/sites/doc/docs/taro/contributing-react.md
@@ -1,4 +1,4 @@
-贡献指南
+# 贡献指南 您可根据《[NutUI 邀您共建，Contributor 您好](https://jelly.jd.com/article/6320528b92d94a0068685525)》中的共建方向为 NutUI 社区做出贡献。 @@ -117,5 +117,5 @@ npm run build:taro 感谢以下所有给 NutUI 贡献过代码的开发者。 -
+
diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts
index 201f206500..89d14b6518 100644
--- a/src/sites/doc/router.ts
+++ b/src/sites/doc/router.ts
@@ -71,7 +71,7 @@ for (const path in modulesTaroDocs) {
let name = (/docs\/taro\/(.*).md/.exec(path) as any[])[1];
guideTaroRoutes.push({
path: `/zh-CN/guide-taro/${name}`,
- component: modulesDocs[path],
+ component: modulesTaroDocs[path],
name
});
}
@@ -80,7 +80,7 @@ for (const path in modulesEnTaroDocs) {
let name = (/docs\/taro\/(.*).en-US.md/.exec(path) as any[])[1];
guideEnTaroRoutes.push({
path: `/en-US/guide-taro/${name}`,
- component: modulesDocs[path],
+ component: modulesEnTaroDocs[path],
name
});
}
From 3d618f49c69d8b572b967a847e0d13c6d7a2978e Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 22 Jan 2025 10:14:25 +0800
Subject: [PATCH 10/14] feat: save some guide & guideTaro routes logics
---
src/sites/doc/App.tsx | 24 ++++--
src/sites/doc/components/nav/nav.tsx | 2 +-
src/sites/doc/docs/react/intro-react.en-US.md | 4 +-
src/sites/doc/docs/react/intro-react.md | 2 +-
.../doc/docs/react/migrate-from-v1.en-US.md | 73 +++++++++++++++++
.../doc/docs/react/migrate-from-v2.en-US.md | 78 +++++++++++++++++++
src/sites/doc/docs/taro/intro-react.md | 4 +-
.../doc/docs/taro/official-theme-react.md | 2 +-
src/sites/doc/router.ts | 4 +-
9 files changed, 177 insertions(+), 16 deletions(-)
create mode 100644 src/sites/doc/docs/react/migrate-from-v1.en-US.md
create mode 100644 src/sites/doc/docs/react/migrate-from-v2.en-US.md
diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx
index 653adaf8a8..0e92f54a6d 100644
--- a/src/sites/doc/App.tsx
+++ b/src/sites/doc/App.tsx
@@ -85,15 +85,23 @@ const Content = () => {
useEffect(() => {
document.addEventListener('scroll', scrollTitle)
}, [])
- const routes = [...routers, ...guideRoutes, ...guideEnRoutes, ...guideTaroRoutes, ...guideEnTaroRoutes]
- console.log(guideRoutes,guideTaroRoutes)
+ const routes = [
+ ...routers,
+ ...guideRoutes,
+ ...guideEnRoutes,
+ ...guideTaroRoutes,
+ ...guideEnTaroRoutes,
+ ]
+ console.log(guideRoutes, guideTaroRoutes)
return (
- {!isGuide &&
+
## LICENSE
diff --git a/src/sites/doc/docs/react/intro-react.md b/src/sites/doc/docs/react/intro-react.md
index eea1cf0f3a..6f12688d62 100644
--- a/src/sites/doc/docs/react/intro-react.md
+++ b/src/sites/doc/docs/react/intro-react.md
@@ -4,7 +4,7 @@ NutUI-React 组件库，适用于 React 技术栈的 H5 应用，开箱即用，
## 特性
-- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 🚀 80+ 高质量组件，覆盖移动端主流场景
- 📖 基于京东APP 10.0 视觉规范
- 🍭 支持按需引用
- 📖 详尽的文档和示例
diff --git a/src/sites/doc/docs/react/migrate-from-v1.en-US.md b/src/sites/doc/docs/react/migrate-from-v1.en-US.md
new file mode 100644
index 0000000000..ac547cc7d1
--- /dev/null
+++ b/src/sites/doc/docs/react/migrate-from-v1.en-US.md
@@ -0,0 +1,73 @@
+# Upgrading from v1 to v2
+
+This document will help you upgrade from NutUI React `1.x` to NutUI React `2.x` version.
+
+## Upgrade Steps
+
+1. H5 Install NutUI React version 2.x
+
+```shell
+npm install @nutui/nutui-react
+```
+
+2. Taro installs NutUI React version 2.x
+
+```shell
+npm install @nutui/nutui-react-taro
+```
+
+3. Handling incompatible updates
+ There are some incompatible updates from NutUI React 1.x to NutUI React 2.x. You need to read the incompatible updates carefully and deal with them in turn.
+ You can manually check your code against the list below to make changes, or we provide a codemod cli tool @nutui/nutui-react-codemod to help you upgrade to v2 quickly. Please commit your local code changes before running codemod cli.
+4. Theme variables are renamed:
+ For example, primary-color is renamed to color-primary; note that if you are using a custom theme, especially if you are using the ConfigProvider component, you are not using `nutuiBrandColor`, remember to rename it to `nutuiColorPrimary`.
+
+## Compatibility Updates
+
+1. Component style handling
+ Added support for importing css files on demand, while retaining the ability to import scss files on demand. On-demand css import can be realized by babel-import-plugin plugin:
+ The H5 configuration is as follows:
+
+```json
+// Webpack .babelrc or babel.config.js configuration
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react”.
+ ]
+]
+```
+
+Taro is configured as follows:
+
+```json
+// Configured in Webpack .babelrc or babel.config.js
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react-taro”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react-taro”.
+ ]
+]
+```
+
+2. better type exporting and adding `JSDoc` annotations to types
+3. Adjustment of component categorization
+ In terms of component classification, we have reviewed the 1.x classification based on the information structure from the interaction dimension, together with the interaction design side, and subclassed and reclassified them, with the goal of more closely matching the distribution of interaction scenarios and making it easy to find components. The main distribution is:
+
+- Basic components, remove the `Popup` component, and subdivide `Popup` into operation feedback-guidance tips section;
+- Layout components, remain unchanged;
+- Navigation components: move paging related components `Pagination` and `Indicator` to the display component (to consider the light operation of paging on mobile); move `Menu` menu to the subclass of data entry class-selector (to consider that `Menu` is mainly used as a filter);
+
+Translated with DeepL.com (free version)
diff --git a/src/sites/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/doc/docs/react/migrate-from-v2.en-US.md
new file mode 100644
index 0000000000..ab97f5b9f9
--- /dev/null
+++ b/src/sites/doc/docs/react/migrate-from-v2.en-US.md
@@ -0,0 +1,78 @@
+# Upgrading from v2 to v3
+
+This document will help you upgrade from NutUI React `2.x` to NutUI React `3.x` version.
+
+## Upgrade Steps
+
+1. H5 Install NutUI React version 3.x
+
+```shell
+npm install @nutui/nutui-react
+```
+
+2. Taro installs NutUI React version 3.x
+
+```shell
+npm install @nutui/nutui-react-taro
+```
+
+3. Handling incompatible updates
+
+There are some incompatible updates from NutUI React 1.x to NutUI React 2.x. You need to read the incompatible updates carefully and deal with them in turn.
+
+You can manually check your code against the list below to make changes, or we provide a codemod cli tool @nutui/nutui-react-codemod to help you upgrade to v2 quickly. Please commit your local code changes before running codemod cli.
+
+4. Theme variables are renamed:
+ For example, primary-color is renamed to color-primary; note that if you are using a custom theme, especially if you are using the ConfigProvider component, you are not using `nutuiBrandColor`, remember to rename it to `nutuiColorPrimary`.
+
+## Compatibility Updates
+
+1. Component style handling
+
+Added support for importing css files on demand, while retaining the ability to import scss files on demand. On-demand css import can be realized by babel-import-plugin plugin:
+
+The H5 configuration is as follows:
+
+```js
+// Webpack .babelrc or babel.config.js configuration
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react”.
+ ]
+]
+```
+
+Taro is configured as follows:
+
+```json
+// Configured in Webpack .babelrc or babel.config.js
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react-taro”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react-taro”.
+ ]
+]
+```
+
+2. better type exporting and adding `JSDoc` annotations to types
+3. Adjustment of component categorization
+ In terms of component classification, we have reviewed the 1.x classification based on the information structure from the interaction dimension, together with the interaction design side, and subclassed and reclassified them, with the goal of more closely matching the distribution of interaction scenarios and making it easy to find components. The main distribution is:
+
+- Basic components, remove the `Popup` component, and subdivide `Popup` into operation feedback-guidance tips section;
+- Layout components, remain unchanged;
+- Navigation components: move `Pagination` and `Indicator` to the display component (considering the light operation of paging on mobile); move `Menu` menu to the data entry class-selector subclass (considering the light operation of paging on mobile); move `Menu` to the data entry class-selector subclass (considering the light operation of paging on mobile).
+
+Translated with DeepL.com (free version)
diff --git a/src/sites/doc/docs/taro/intro-react.md b/src/sites/doc/docs/taro/intro-react.md
index f862e45e9a..a1caceb7b9 100644
--- a/src/sites/doc/docs/taro/intro-react.md
+++ b/src/sites/doc/docs/taro/intro-react.md
@@ -4,7 +4,7 @@ NutUI-React 组件库，基于 Taro，使用 React 技术栈开发小程序应
## 特性
-- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 🚀 80+ 高质量组件，覆盖移动端主流场景
- 💪 支持一套代码同时开发多端小程序+H5
- 📖 基于京东APP 10.0 视觉规范
- 🍭 支持按需引用
@@ -31,7 +31,7 @@ NutUI-React 组件库，基于 Taro，使用 React 技术栈开发小程序应
感谢以下小伙伴们为 NutUI-React 发展做出的贡献：
-
+
## 开源协议
diff --git a/src/sites/doc/docs/taro/official-theme-react.md b/src/sites/doc/docs/taro/official-theme-react.md
index c4107d8c8c..b183ada3bd 100644
--- a/src/sites/doc/docs/taro/official-theme-react.md
+++ b/src/sites/doc/docs/taro/official-theme-react.md
@@ -11,7 +11,7 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
| 京东 APP 主题（默认） | `variables.scss` |
| 京东B商城主题预览 | `variables-jdb.scss` |
-
+
## 使用方式
diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts
index 89d14b6518..f37724055e 100644
--- a/src/sites/doc/router.ts
+++ b/src/sites/doc/router.ts
@@ -70,7 +70,7 @@ const modulesTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.md');
for (const path in modulesTaroDocs) {
let name = (/docs\/taro\/(.*).md/.exec(path) as any[])[1];
guideTaroRoutes.push({
- path: `/zh-CN/guide-taro/${name}`,
+ path: `/zh-CN/guide/${name}-taro`,
component: modulesTaroDocs[path],
name
});
@@ -79,7 +79,7 @@ const modulesEnTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.en-US.md'
for (const path in modulesEnTaroDocs) {
let name = (/docs\/taro\/(.*).en-US.md/.exec(path) as any[])[1];
guideEnTaroRoutes.push({
- path: `/en-US/guide-taro/${name}`,
+ path: `/en-US/guide/${name}-taro`,
component: modulesEnTaroDocs[path],
name
});
From 745ba0918fb8cd14710b9cdfc5d8fabfb4646a83 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 22 Jan 2025 10:20:04 +0800
Subject: [PATCH 11/14] =?UTF-8?q?fix:=20=E9=87=8D=E7=BD=AENav=20Tab?=
=?UTF-8?q?=E5=88=B7=E6=96=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/sites/doc/components/nav/nav.tsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 3ddfbfe6a1..ce4d35d5cf 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -31,10 +31,13 @@ const Nav = () => {
} else {
setIsGuide(false)
}
+ if(location.pathname.includes('/intro-react')) {
+ setActiveName('intro-react')
+ }
}, [location])
const changeNav = (_nav: any) => {
setActiveName(_nav.name)
-
+ console.log(_nav.name)
navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide/${_nav.name.toLowerCase()}${isTaro? '-taro' : ''}`)
}
const isTaro = location.pathname.includes('-taro')
From d4624ced21d55f30207e376e2a00d2925fa2cee3 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 22 Jan 2025 10:25:00 +0800
Subject: [PATCH 12/14] chore: delete some logs
---
src/sites/doc/App.tsx | 1 -
src/sites/doc/components/header/header.tsx | 3 ---
src/sites/doc/components/nav/nav.tsx | 1 -
3 files changed, 5 deletions(-)
diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx
index 0e92f54a6d..2cbc4edc02 100644
--- a/src/sites/doc/App.tsx
+++ b/src/sites/doc/App.tsx
@@ -92,7 +92,6 @@ const Content = () => {
...guideTaroRoutes,
...guideEnTaroRoutes,
]
- console.log(guideRoutes, guideTaroRoutes)
return (
{!isGuide && (
-
)
@@ -142,7 +145,6 @@ const App = () => {
-
)
}
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 88d3a2b061..3ddfbfe6a1 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -35,7 +35,7 @@ const Nav = () => {
const changeNav = (_nav: any) => {
setActiveName(_nav.name)
- navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide${isTaro? '-taro' : ''}/${_nav.name.toLowerCase()}`)
+ navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide/${_nav.name.toLowerCase()}${isTaro? '-taro' : ''}`)
}
const isTaro = location.pathname.includes('-taro')
const isZh = lang === 'zh-CN'
diff --git a/src/sites/doc/docs/react/intro-react.en-US.md b/src/sites/doc/docs/react/intro-react.en-US.md
index 9bcccc2eae..ca1a178d13 100644
--- a/src/sites/doc/docs/react/intro-react.en-US.md
+++ b/src/sites/doc/docs/react/intro-react.en-US.md
@@ -4,7 +4,7 @@ The NutUI-React component library is suitable for H5 applications of the React t
## Features
-- 🚀 70+ high-quality components covering mainstream mobile scenarios
+- 🚀 80+ high-quality components covering mainstream mobile scenarios
- 📖 Based on JD APP 10.0 visual specification
- 🍭 Support on-demand reference
- 📖 Detailed documentation and examples
@@ -34,7 +34,7 @@ For browsers that do not support CSS variables, it is recommended to use [postcs
Thanks to the following friends for their contributions to NutUI-React:
-
-
}
+ )}
+
-
+
@@ -120,7 +128,9 @@ const Content = () => {
})}
-
+
## LICENSE
diff --git a/src/sites/doc/docs/react/intro-react.md b/src/sites/doc/docs/react/intro-react.md
index eea1cf0f3a..6f12688d62 100644
--- a/src/sites/doc/docs/react/intro-react.md
+++ b/src/sites/doc/docs/react/intro-react.md
@@ -4,7 +4,7 @@ NutUI-React 组件库，适用于 React 技术栈的 H5 应用，开箱即用，
## 特性
-- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 🚀 80+ 高质量组件，覆盖移动端主流场景
- 📖 基于京东APP 10.0 视觉规范
- 🍭 支持按需引用
- 📖 详尽的文档和示例
diff --git a/src/sites/doc/docs/react/migrate-from-v1.en-US.md b/src/sites/doc/docs/react/migrate-from-v1.en-US.md
new file mode 100644
index 0000000000..ac547cc7d1
--- /dev/null
+++ b/src/sites/doc/docs/react/migrate-from-v1.en-US.md
@@ -0,0 +1,73 @@
+# Upgrading from v1 to v2
+
+This document will help you upgrade from NutUI React `1.x` to NutUI React `2.x` version.
+
+## Upgrade Steps
+
+1. H5 Install NutUI React version 2.x
+
+```shell
+npm install @nutui/nutui-react
+```
+
+2. Taro installs NutUI React version 2.x
+
+```shell
+npm install @nutui/nutui-react-taro
+```
+
+3. Handling incompatible updates
+ There are some incompatible updates from NutUI React 1.x to NutUI React 2.x. You need to read the incompatible updates carefully and deal with them in turn.
+ You can manually check your code against the list below to make changes, or we provide a codemod cli tool @nutui/nutui-react-codemod to help you upgrade to v2 quickly. Please commit your local code changes before running codemod cli.
+4. Theme variables are renamed:
+ For example, primary-color is renamed to color-primary; note that if you are using a custom theme, especially if you are using the ConfigProvider component, you are not using `nutuiBrandColor`, remember to rename it to `nutuiColorPrimary`.
+
+## Compatibility Updates
+
+1. Component style handling
+ Added support for importing css files on demand, while retaining the ability to import scss files on demand. On-demand css import can be realized by babel-import-plugin plugin:
+ The H5 configuration is as follows:
+
+```json
+// Webpack .babelrc or babel.config.js configuration
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react”.
+ ]
+]
+```
+
+Taro is configured as follows:
+
+```json
+// Configured in Webpack .babelrc or babel.config.js
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react-taro”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react-taro”.
+ ]
+]
+```
+
+2. better type exporting and adding `JSDoc` annotations to types
+3. Adjustment of component categorization
+ In terms of component classification, we have reviewed the 1.x classification based on the information structure from the interaction dimension, together with the interaction design side, and subclassed and reclassified them, with the goal of more closely matching the distribution of interaction scenarios and making it easy to find components. The main distribution is:
+
+- Basic components, remove the `Popup` component, and subdivide `Popup` into operation feedback-guidance tips section;
+- Layout components, remain unchanged;
+- Navigation components: move paging related components `Pagination` and `Indicator` to the display component (to consider the light operation of paging on mobile); move `Menu` menu to the subclass of data entry class-selector (to consider that `Menu` is mainly used as a filter);
+
+Translated with DeepL.com (free version)
diff --git a/src/sites/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/doc/docs/react/migrate-from-v2.en-US.md
new file mode 100644
index 0000000000..ab97f5b9f9
--- /dev/null
+++ b/src/sites/doc/docs/react/migrate-from-v2.en-US.md
@@ -0,0 +1,78 @@
+# Upgrading from v2 to v3
+
+This document will help you upgrade from NutUI React `2.x` to NutUI React `3.x` version.
+
+## Upgrade Steps
+
+1. H5 Install NutUI React version 3.x
+
+```shell
+npm install @nutui/nutui-react
+```
+
+2. Taro installs NutUI React version 3.x
+
+```shell
+npm install @nutui/nutui-react-taro
+```
+
+3. Handling incompatible updates
+
+There are some incompatible updates from NutUI React 1.x to NutUI React 2.x. You need to read the incompatible updates carefully and deal with them in turn.
+
+You can manually check your code against the list below to make changes, or we provide a codemod cli tool @nutui/nutui-react-codemod to help you upgrade to v2 quickly. Please commit your local code changes before running codemod cli.
+
+4. Theme variables are renamed:
+ For example, primary-color is renamed to color-primary; note that if you are using a custom theme, especially if you are using the ConfigProvider component, you are not using `nutuiBrandColor`, remember to rename it to `nutuiColorPrimary`.
+
+## Compatibility Updates
+
+1. Component style handling
+
+Added support for importing css files on demand, while retaining the ability to import scss files on demand. On-demand css import can be realized by babel-import-plugin plugin:
+
+The H5 configuration is as follows:
+
+```js
+// Webpack .babelrc or babel.config.js configuration
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react”.
+ ]
+]
+```
+
+Taro is configured as follows:
+
+```json
+// Configured in Webpack .babelrc or babel.config.js
+plugins: [
+ [
+ “import”.
+ {
+ libraryName: “@nutui/nutui-react-taro”, libraryDirectory: “dist/esm”, {
+ libraryDirectory: “dist/esm”, {
+ style: 'css',
+ camel2DashComponentName: false,
+ }.
+ “nutui-react-taro”.
+ ]
+]
+```
+
+2. better type exporting and adding `JSDoc` annotations to types
+3. Adjustment of component categorization
+ In terms of component classification, we have reviewed the 1.x classification based on the information structure from the interaction dimension, together with the interaction design side, and subclassed and reclassified them, with the goal of more closely matching the distribution of interaction scenarios and making it easy to find components. The main distribution is:
+
+- Basic components, remove the `Popup` component, and subdivide `Popup` into operation feedback-guidance tips section;
+- Layout components, remain unchanged;
+- Navigation components: move `Pagination` and `Indicator` to the display component (considering the light operation of paging on mobile); move `Menu` menu to the data entry class-selector subclass (considering the light operation of paging on mobile); move `Menu` to the data entry class-selector subclass (considering the light operation of paging on mobile).
+
+Translated with DeepL.com (free version)
diff --git a/src/sites/doc/docs/taro/intro-react.md b/src/sites/doc/docs/taro/intro-react.md
index f862e45e9a..a1caceb7b9 100644
--- a/src/sites/doc/docs/taro/intro-react.md
+++ b/src/sites/doc/docs/taro/intro-react.md
@@ -4,7 +4,7 @@ NutUI-React 组件库，基于 Taro，使用 React 技术栈开发小程序应
## 特性
-- 🚀 70+ 高质量组件，覆盖移动端主流场景
+- 🚀 80+ 高质量组件，覆盖移动端主流场景
- 💪 支持一套代码同时开发多端小程序+H5
- 📖 基于京东APP 10.0 视觉规范
- 🍭 支持按需引用
@@ -31,7 +31,7 @@ NutUI-React 组件库，基于 Taro，使用 React 技术栈开发小程序应
感谢以下小伙伴们为 NutUI-React 发展做出的贡献：
-
+
## 开源协议
diff --git a/src/sites/doc/docs/taro/official-theme-react.md b/src/sites/doc/docs/taro/official-theme-react.md
index c4107d8c8c..b183ada3bd 100644
--- a/src/sites/doc/docs/taro/official-theme-react.md
+++ b/src/sites/doc/docs/taro/official-theme-react.md
@@ -11,7 +11,7 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
| 京东 APP 主题（默认） | `variables.scss` |
| 京东B商城主题预览 | `variables-jdb.scss` |
-
+
## 使用方式
diff --git a/src/sites/doc/router.ts b/src/sites/doc/router.ts
index 89d14b6518..f37724055e 100644
--- a/src/sites/doc/router.ts
+++ b/src/sites/doc/router.ts
@@ -70,7 +70,7 @@ const modulesTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.md');
for (const path in modulesTaroDocs) {
let name = (/docs\/taro\/(.*).md/.exec(path) as any[])[1];
guideTaroRoutes.push({
- path: `/zh-CN/guide-taro/${name}`,
+ path: `/zh-CN/guide/${name}-taro`,
component: modulesTaroDocs[path],
name
});
@@ -79,7 +79,7 @@ const modulesEnTaroDocs = import.meta.glob('/src/sites/doc/docs/taro/*.en-US.md'
for (const path in modulesEnTaroDocs) {
let name = (/docs\/taro\/(.*).en-US.md/.exec(path) as any[])[1];
guideEnTaroRoutes.push({
- path: `/en-US/guide-taro/${name}`,
+ path: `/en-US/guide/${name}-taro`,
component: modulesEnTaroDocs[path],
name
});
From 745ba0918fb8cd14710b9cdfc5d8fabfb4646a83 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 22 Jan 2025 10:20:04 +0800
Subject: [PATCH 11/14] =?UTF-8?q?fix:=20=E9=87=8D=E7=BD=AENav=20Tab?=
=?UTF-8?q?=E5=88=B7=E6=96=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/sites/doc/components/nav/nav.tsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx
index 3ddfbfe6a1..ce4d35d5cf 100644
--- a/src/sites/doc/components/nav/nav.tsx
+++ b/src/sites/doc/components/nav/nav.tsx
@@ -31,10 +31,13 @@ const Nav = () => {
} else {
setIsGuide(false)
}
+ if(location.pathname.includes('/intro-react')) {
+ setActiveName('intro-react')
+ }
}, [location])
const changeNav = (_nav: any) => {
setActiveName(_nav.name)
-
+ console.log(_nav.name)
navigate(`${isZh ? '/zh-CN/' : '/en-US/'}guide/${_nav.name.toLowerCase()}${isTaro? '-taro' : ''}`)
}
const isTaro = location.pathname.includes('-taro')
From d4624ced21d55f30207e376e2a00d2925fa2cee3 Mon Sep 17 00:00:00 2001
From: "Alex.hxy" <1872591453@qq.com>
Date: Wed, 22 Jan 2025 10:25:00 +0800
Subject: [PATCH 12/14] chore: delete some logs
---
src/sites/doc/App.tsx | 1 -
src/sites/doc/components/header/header.tsx | 3 ---
src/sites/doc/components/nav/nav.tsx | 1 -
3 files changed, 5 deletions(-)
diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx
index 0e92f54a6d..2cbc4edc02 100644
--- a/src/sites/doc/App.tsx
+++ b/src/sites/doc/App.tsx
@@ -92,7 +92,6 @@ const Content = () => {
...guideTaroRoutes,
...guideEnTaroRoutes,
]
- console.log(guideRoutes, guideTaroRoutes)
return (
{!isGuide && (
-