From 8504c5ab6ca213e5a1f435e5baf834da7c6638dd Mon Sep 17 00:00:00 2001 From: oasis Date: Wed, 16 Apr 2025 13:25:09 +0800 Subject: [PATCH 01/14] =?UTF-8?q?refactor:=20css=20=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build.mjs | 44 ++++++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/scripts/build.mjs b/scripts/build.mjs index 0438893949..0ac7eec3af 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -192,6 +192,7 @@ async function buildUMD(p) { }, }) } + // 针对不同包构建全量的 style async function buildAllCSS() { // 拷贝styles @@ -284,7 +285,7 @@ async function copyStyles() { } // 构建样式 -async function buildCSS(p) { +async function buildCSS(themeName='') { const cssFiles = await glob(['src/packages/**/*.scss'], { ignore: ['src/packages/**/demo.scss'], }) @@ -303,24 +304,13 @@ async function buildCSS(p) { '../src/packages', base.replace('.scss', ''), ) - const code = sass.compileString(variables + '\n' + button, { - loadPaths: [loadPath], - }) const cssPath = relative('src', loadPath) - // 写 css 文件 - await dest(join(`${dist}/es`, cssPath, 'style/style.css'), code.css) - await dest(join(`${dist}/es`, cssPath, 'style/css.js'), `import './style.css'`) - await dest(join(`${dist}/cjs`, cssPath, 'style/style.css'), code.css) - await dest( - join(`${dist}/cjs`, cssPath, 'style/css.js'), - `import './style.css'`, - ) // 删除 import // 写入 style.scss const atRules = [] - await postcss([ + const postcssRes = await postcss([ { postcssPlugin: 'remove-atrule', AtRule(root) { @@ -340,11 +330,19 @@ async function buildCSS(p) { ]) .process(button, { from: loadPath, syntax: scss }) .then((result) => { - dest(join(`${dist}/es`, cssPath, `style/${base}`), result.css) - dest(join(`${dist}/cjs`, cssPath, `style/${base}`), result.css) + return result }) + await dest(join(`${dist}/es`, cssPath, `style/${base}`), postcssRes.css) + await dest(join(`${dist}/cjs`, cssPath, `style/${base}`), postcssRes.css) + + const code = sass.compileString(variables + '\n' + postcssRes.css.replaceAll('../../../../', '../../'), { + loadPaths: [loadPath], + }) + await dest(join(`${dist}/es`, cssPath, 'style/style.css'), code.css) + await dest(join(`${dist}/cjs`, cssPath, 'style/style.css'), code.css) const jsContent = [] + const cssContent = [] atRules.forEach((rule) => { rule = rule.replaceAll('\'', '') if (rule.indexOf('../styles/') > -1) { @@ -355,15 +353,24 @@ async function buildCSS(p) { const ext = extname(base) const name = base.replace(ext, '') jsContent.push(`import '../../${name}/style';`) + cssContent.push(`import '../../${name}/style/css';`) } }) jsContent.push(`import './${base}';`) + cssContent.push(`import './style.css';`) await dest( join(`${dist}/cjs`, cssPath, `style/index.js`), jsContent.join('\n'), ) await dest(join(`${dist}/es`, cssPath, `style/index.js`), jsContent.join('\n')) + + // 写 css 文件 + await dest(join(`${dist}/es`, cssPath, 'style/css.js'), cssContent.join('\n')) + await dest( + join(`${dist}/cjs`, cssPath, 'style/css.js'), + cssContent.join('\n'), + ) } } @@ -420,14 +427,15 @@ console.time('build UMD') await buildUMD() console.timeEnd('build UMD') -console.time('Build CSS') -await buildCSS() -console.timeEnd('Build CSS') console.time('Copy Styles') await copyStyles() console.timeEnd('Copy Styles') +console.time('Build CSS') +await buildCSS() +console.timeEnd('Build CSS') + console.time('Build All CSS') await buildAllCSS() console.timeEnd('Build All CSS') From 3703929b2b19ea776e2228c11e5c7063895aad29 Mon Sep 17 00:00:00 2001 From: oasis Date: Wed, 16 Apr 2025 14:37:02 +0800 Subject: [PATCH 02/14] =?UTF-8?q?refactor:=20=E4=B8=BB=E9=A2=98=E6=8B=86?= =?UTF-8?q?=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build-taro.mjs | 110 +++++++++++++++++++++++++---------------- scripts/build.mjs | 67 +++++++++++++++---------- 2 files changed, 109 insertions(+), 68 deletions(-) diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index 89d9d7d315..45471e1d4b 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -244,26 +244,28 @@ async function buildUMD() { }) } -async function buildAllCSS() { +// 针对不同主题构建全量的 style +async function buildAllCSS(themeName = '') { // 拷贝styles + const themeStylePath = themeName ? `style-${themeName}` : 'style' async function generateAllStyles() { - const projectID = process.env.VITE_APP_PROJECT_ID const content = [ - `@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`, + `@import './styles/variables${themeName ? `-${themeName}` : ''}.scss';`, `@import './styles/mixins/index.scss';`, `@import './styles/animation/index.scss';`, ] - const scssFiles = await glob([`${dist}/es/packages/**/*.scss`]) + const scssFiles = await glob([`${dist}/es/packages/**/${themeStylePath}/*.scss`]) scssFiles.forEach((file) => { content.push( - `@import '${relativePath('/' + file, `/${dist}/style.scss`)}';`, + `@import '${relativePath('/' + file, `/${dist}/${themeStylePath}.scss`)}';`, ) }) - dest(`${dist}/style.scss`, content.join('\n')) + await dest(`${dist}/${themeStylePath}.scss`, content.join('\n')) } await generateAllStyles() await vite.build({ + configFile: false, logLevel: 'error', resolve: { alias: [{ find: '@', replacement: resolve(__dirname, '../src') }], @@ -272,11 +274,16 @@ async function buildAllCSS() { emptyOutDir: false, outDir: dist, lib: { - entry: `./${dist}/style.scss`, + entry: `./${dist}/${themeStylePath}.scss`, formats: ['es'], name: 'style', fileName: 'style', }, + rollupOptions: { + output: { + assetFileNames: `${themeStylePath}.css`, // 资源文件名 + } + } }, }) } @@ -287,6 +294,11 @@ async function buildThemeCSS() { }) const projectID = process.env.VITE_APP_PROJECT_ID const inputFiles = {} + // nuitui 官方包包含全部主题文件,包括: + // default.css 默认明亮主题 + // dark.css 默认暗黑主题 + // jmapp.css、jrkf.css 主题 + // 例如:jmapp 包只包含 jmapp 的主题文件,且是默认主题文件。 files.forEach(filePath => { const themeName = basename(filePath, 'scss').replace('theme-', '') if (!projectID) { @@ -331,16 +343,16 @@ async function copyStyles() { } // 构建样式 -async function buildCSS(p) { - const cssFiles = await glob(['src/packages/**/*.scss'], { +async function buildCSS(themeName = '') { + const componentScssFiles = await glob(['src/packages/**/*.scss'], { ignore: ['src/packages/**/demo.scss'], }) const variables = await readFile( - join(__dirname, '../src/styles/variables.scss'), + join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) - for (const file of cssFiles) { - const button = await readFile(join(__dirname, '../', file), { + for (const file of componentScssFiles) { + const scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) // countup 是特例 @@ -350,30 +362,11 @@ async function buildCSS(p) { '../src/packages', base.replace('.scss', ''), ) - const code = sass.compileString(variables + '\n' + button, { - loadPaths: [loadPath], - }) const cssPath = relative('src', loadPath) - // 写 css 文件 - await dest(join(`${dist}/es`, cssPath, 'style/style.css'), code.css) - await dest(join(`${dist}/es`, cssPath, 'style/css.js'), `import './style.css'`) - - await dest(join(`${dist}/cjs`, cssPath, 'style/style.css'), code.css) - await dest( - join(`${dist}/cjs`, cssPath, 'style/css.js'), - `import './style.css'`, - ) - - // copy harmonycss - if (file.indexOf('countup') === -1) { - await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/cjs`, cssPath, 'style/style.harmony.css')) - await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/es`, cssPath, 'style/style.harmony.css')) - } - // 删除 import // 写入 style.scss const atRules = [] - await postcss([ + const postcssRes = await postcss([ { postcssPlugin: 'remove-atrule', AtRule(root) { @@ -391,13 +384,22 @@ async function buildCSS(p) { }, }, ]) - .process(button, { from: loadPath, syntax: scss }) + .process(scssContent, { from: loadPath, syntax: scss }) .then((result) => { - dest(join(`${dist}/es`, cssPath, `style/${base}`), result.css) - dest(join(`${dist}/cjs`, cssPath, `style/${base}`), result.css) + return result }) + const themeDir = themeName ? `style-${themeName}` : 'style' + await dest(join(`${dist}/es`, cssPath, `${themeDir}/${base}`), postcssRes.css) + await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/${base}`), postcssRes.css) + + const code = sass.compileString(variables + '\n' + postcssRes.css.replaceAll('../../../../', '../../'), { + loadPaths: [loadPath], + }) + await dest(join(`${dist}/es`, cssPath, `${themeDir}/style.css`), code.css) + await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/style.css`), code.css) const jsContent = [] + const cssContent = [] atRules.forEach((rule) => { rule = rule.replaceAll('\'', '') if (rule.indexOf('../styles/') > -1) { @@ -407,18 +409,32 @@ async function buildCSS(p) { const base = basename(rule) const ext = extname(base) const name = base.replace(ext, '') - jsContent.push(`import '../../${name}/style';`) + jsContent.push(`import '../../${name}/${themeDir}';`) + cssContent.push(`import '../../${name}/${themeDir}/css';`) } }) jsContent.push(`import './${base}';`) + cssContent.push(`import './style.css';`) await dest( - join(`${dist}/cjs`, cssPath, `style/index.js`), + join(`${dist}/cjs`, cssPath, `${themeDir}/index.js`), jsContent.join('\n'), ) - await dest(join(`${dist}/es`, cssPath, `style/index.js`), jsContent.join('\n')) - } + await dest(join(`${dist}/es`, cssPath, `${themeDir}/index.js`), jsContent.join('\n')) + // 写 css 文件 + await dest(join(`${dist}/es`, cssPath, `${themeDir}/css.js`), cssContent.join('\n')) + await dest( + join(`${dist}/cjs`, cssPath, `${themeDir}/css.js`), + cssContent.join('\n'), + ) + + // copy harmonycss + if (file.indexOf('countup') === -1) { + await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/cjs`, cssPath, 'style/style.harmony.css')) + await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/es`, cssPath, 'style/style.harmony.css')) + } + } } function generateReleasePackageJson() { @@ -474,18 +490,28 @@ console.time('build UMD') await buildUMD() console.timeEnd('build UMD') -console.time('Build CSS') -await buildCSS() -console.timeEnd('Build CSS') console.time('Copy Styles') await copyStyles() console.timeEnd('Copy Styles') +console.time('Build CSS') +await buildCSS() +console.timeEnd('Build CSS') + +console.time('Build jmapp CSS') +await buildCSS('jmapp') +console.timeEnd('Build CSS') + console.time('Build All CSS') await buildAllCSS() console.timeEnd('Build All CSS') +console.time('Build All jmapp CSS') +await buildAllCSS('jmapp') +console.timeEnd('Build All jmapp CSS') + + console.time('Build Theme CSS') await buildThemeCSS() console.timeEnd('Build Theme CSS') diff --git a/scripts/build.mjs b/scripts/build.mjs index 0ac7eec3af..525693a54c 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -193,27 +193,28 @@ async function buildUMD(p) { }) } -// 针对不同包构建全量的 style -async function buildAllCSS() { +// 针对不同主题构建全量的 style +async function buildAllCSS(themeName = '') { // 拷贝styles + const themeStylePath = themeName ? `style-${themeName}` : 'style' async function generateAllStyles() { - const projectID = process.env.VITE_APP_PROJECT_ID const content = [ - `@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`, + `@import './styles/variables${themeName ? `-${themeName}` : ''}.scss';`, `@import './styles/mixins/index.scss';`, `@import './styles/animation/index.scss';`, ] - const scssFiles = await glob([`${dist}/es/packages/**/*.scss`]) + const scssFiles = await glob([`${dist}/es/packages/**/${themeStylePath}/*.scss`]) scssFiles.forEach((file) => { content.push( - `@import '${relativePath('/' + file, `/${dist}/style.scss`)}';`, + `@import '${relativePath('/' + file, `/${dist}/${themeStylePath}.scss`)}';`, ) }) - dest(`${dist}/style.scss`, content.join('\n')) + await dest(`${dist}/${themeStylePath}.scss`, content.join('\n')) } await generateAllStyles() await vite.build({ + configFile: false, logLevel: 'error', resolve: { alias: [{ find: '@', replacement: resolve(__dirname, '../src') }], @@ -222,11 +223,16 @@ async function buildAllCSS() { emptyOutDir: false, outDir: dist, lib: { - entry: `./${dist}/style.scss`, + entry: `./${dist}/${themeStylePath}.scss`, formats: ['es'], name: 'style', fileName: 'style', }, + rollupOptions: { + output: { + assetFileNames: `${themeStylePath}.css`, // 资源文件名 + } + } }, }) } @@ -277,6 +283,7 @@ async function buildThemeCSS() { }) } +// 拷贝styles async function copyStyles() { await copy( resolve(__dirname, '../src/styles'), @@ -285,16 +292,16 @@ async function copyStyles() { } // 构建样式 -async function buildCSS(themeName='') { - const cssFiles = await glob(['src/packages/**/*.scss'], { +async function buildCSS(themeName = '') { + const componentScssFiles = await glob(['src/packages/**/*.scss'], { ignore: ['src/packages/**/demo.scss'], }) const variables = await readFile( - join(__dirname, '../src/styles/variables.scss'), + join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) - for (const file of cssFiles) { - const button = await readFile(join(__dirname, '../', file), { + for (const file of componentScssFiles) { + const scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) // countup 是特例 @@ -305,8 +312,6 @@ async function buildCSS(themeName='') { base.replace('.scss', ''), ) const cssPath = relative('src', loadPath) - - // 删除 import // 写入 style.scss const atRules = [] @@ -328,18 +333,19 @@ async function buildCSS(themeName='') { }, }, ]) - .process(button, { from: loadPath, syntax: scss }) + .process(scssContent, { from: loadPath, syntax: scss }) .then((result) => { return result }) - await dest(join(`${dist}/es`, cssPath, `style/${base}`), postcssRes.css) - await dest(join(`${dist}/cjs`, cssPath, `style/${base}`), postcssRes.css) + const themeDir = themeName ? `style-${themeName}` : 'style' + await dest(join(`${dist}/es`, cssPath, `${themeDir}/${base}`), postcssRes.css) + await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/${base}`), postcssRes.css) const code = sass.compileString(variables + '\n' + postcssRes.css.replaceAll('../../../../', '../../'), { loadPaths: [loadPath], }) - await dest(join(`${dist}/es`, cssPath, 'style/style.css'), code.css) - await dest(join(`${dist}/cjs`, cssPath, 'style/style.css'), code.css) + await dest(join(`${dist}/es`, cssPath, `${themeDir}/style.css`), code.css) + await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/style.css`), code.css) const jsContent = [] const cssContent = [] @@ -352,23 +358,23 @@ async function buildCSS(themeName='') { const base = basename(rule) const ext = extname(base) const name = base.replace(ext, '') - jsContent.push(`import '../../${name}/style';`) - cssContent.push(`import '../../${name}/style/css';`) + jsContent.push(`import '../../${name}/${themeDir}';`) + cssContent.push(`import '../../${name}/${themeDir}/css';`) } }) jsContent.push(`import './${base}';`) cssContent.push(`import './style.css';`) await dest( - join(`${dist}/cjs`, cssPath, `style/index.js`), + join(`${dist}/cjs`, cssPath, `${themeDir}/index.js`), jsContent.join('\n'), ) - await dest(join(`${dist}/es`, cssPath, `style/index.js`), jsContent.join('\n')) + await dest(join(`${dist}/es`, cssPath, `${themeDir}/index.js`), jsContent.join('\n')) // 写 css 文件 - await dest(join(`${dist}/es`, cssPath, 'style/css.js'), cssContent.join('\n')) + await dest(join(`${dist}/es`, cssPath, `${themeDir}/css.js`), cssContent.join('\n')) await dest( - join(`${dist}/cjs`, cssPath, 'style/css.js'), + join(`${dist}/cjs`, cssPath, `${themeDir}/css.js`), cssContent.join('\n'), ) } @@ -436,10 +442,19 @@ console.time('Build CSS') await buildCSS() console.timeEnd('Build CSS') +console.time('Build jmapp CSS') +await buildCSS('jmapp') +console.timeEnd('Build CSS') + console.time('Build All CSS') await buildAllCSS() console.timeEnd('Build All CSS') +console.time('Build All jmapp CSS') +await buildAllCSS('jmapp') +console.timeEnd('Build All jmapp CSS') + + console.time('Build Theme CSS') await buildThemeCSS() console.timeEnd('Build Theme CSS') From c1cb2b76b360b118af2d053d41895748b588ab0f Mon Sep 17 00:00:00 2001 From: oasis Date: Wed, 16 Apr 2025 14:49:35 +0800 Subject: [PATCH 03/14] =?UTF-8?q?refactor:=20=E4=B8=BB=E9=A2=98=E6=8B=86?= =?UTF-8?q?=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build-taro.mjs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index 45471e1d4b..4d17b3acca 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -431,8 +431,9 @@ async function buildCSS(themeName = '') { // copy harmonycss if (file.indexOf('countup') === -1) { - await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/cjs`, cssPath, 'style/style.harmony.css')) - await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/es`, cssPath, 'style/style.harmony.css')) + const harmonyCss = join(__dirname, '../', file.replace('scss', 'harmony.css')) + await copy(harmonyCss, join(`${dist}/cjs`, cssPath, 'style/style.harmony.css')) + await copy(harmonyCss, join(`${dist}/es`, cssPath, 'style/style.harmony.css')) } } } From 8468ae23ab929423219c78cc37a6dc3ef7a900ce Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 11:31:45 +0800 Subject: [PATCH 04/14] =?UTF-8?q?docs:=20=E4=B8=BB=E9=A2=98=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../create-app-demo/craco.config.js | 42 ++++- .../create-app-demo/package.json | 4 - .../create-app-demo/src/App.js | 3 + .../nutui-templates/vite-demo/package.json | 7 +- .../nutui-templates/vite-demo/src/App.tsx | 3 + .../nutui-templates/vite-demo/vite.config.ts | 22 ++- .../docs/react/official-theme-react.en-US.md | 53 +----- .../doc/docs/react/official-theme-react.md | 54 +------ .../doc/docs/react/start-react.en-US.md | 149 ++++++++++++++++- .../sites-react/doc/docs/react/start-react.md | 151 +++++++++++++++++- .../docs/taro/official-theme-react.en-US.md | 4 +- .../doc/docs/taro/official-theme-react.md | 4 +- .../doc/docs/taro/start-react.en-US.md | 96 +++++++++-- .../sites-react/doc/docs/taro/start-react.md | 81 +++++++++- 14 files changed, 524 insertions(+), 149 deletions(-) diff --git a/packages/nutui-templates/create-app-demo/craco.config.js b/packages/nutui-templates/create-app-demo/craco.config.js index 7bc499b503..5fe4fab36b 100644 --- a/packages/nutui-templates/create-app-demo/craco.config.js +++ b/packages/nutui-templates/create-app-demo/craco.config.js @@ -1,16 +1,44 @@ module.exports = { + webpack: { + module: { + rules: [ + { + test: /\.s[ac]ss$/i, + use: [ + 'style-loader', + 'css-loader', + { + loader: "sass-loader", + options: { + additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';` + // JDesign 主题 + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` + // JRKF 主题 + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` + }, + }, + ], + }, + ], + }, + }, babel: { plugins: [ [ - "import", + 'import', { - "libraryName": "@nutui/nutui-react", - "libraryDirectory": "dist/esm", - "style": "css", - "camel2DashComponentName": false + libraryName: '@nutui/nutui-react', + camel2DashComponentName: false, + customName: (name, file) => { + return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` + }, + // 自动加载 scss 样式文件 + customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` }, - "nutui-react" - ] + 'nutui-react', + ], ] }, }; \ No newline at end of file diff --git a/packages/nutui-templates/create-app-demo/package.json b/packages/nutui-templates/create-app-demo/package.json index e3cf32e80d..4846c06864 100644 --- a/packages/nutui-templates/create-app-demo/package.json +++ b/packages/nutui-templates/create-app-demo/package.json @@ -19,10 +19,6 @@ "test": "craco build" }, "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] }, "browserslist": { "production": [ diff --git a/packages/nutui-templates/create-app-demo/src/App.js b/packages/nutui-templates/create-app-demo/src/App.js index 0578be8fb5..9522577aa5 100644 --- a/packages/nutui-templates/create-app-demo/src/App.js +++ b/packages/nutui-templates/create-app-demo/src/App.js @@ -1,4 +1,7 @@ import React from 'react' +import '@nutui/nutui-react/dist/styles/themes/default.css' +// import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// import '@nutui/nutui-react/dist/styles/themes/jrkf.css' import './App.css' import { Star } from '@nutui/icons-react' import { Row, Col, Image, Button } from '@nutui/nutui-react' diff --git a/packages/nutui-templates/vite-demo/package.json b/packages/nutui-templates/vite-demo/package.json index 1409cdf362..220dd288ec 100644 --- a/packages/nutui-templates/vite-demo/package.json +++ b/packages/nutui-templates/vite-demo/package.json @@ -20,12 +20,13 @@ "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", - "@vitejs/plugin-react": "^4.0.4", + "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", - "typescript": "^5.0.2", - "vite": "^4.4.5", + "sass-embedded": "^1.86.3", + "typescript": "~5.6.2", + "vite": "^6.0.5", "vite-plugin-imp": "^2.4.0" } } \ No newline at end of file diff --git a/packages/nutui-templates/vite-demo/src/App.tsx b/packages/nutui-templates/vite-demo/src/App.tsx index ee01084733..2379c0fa95 100644 --- a/packages/nutui-templates/vite-demo/src/App.tsx +++ b/packages/nutui-templates/vite-demo/src/App.tsx @@ -1,6 +1,9 @@ import './App.css' import { Star } from '@nutui/icons-react' import { Row, Col, Image, Button } from '@nutui/nutui-react' +import '@nutui/nutui-react/dist/styles/themes/default.css' +// import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// import '@nutui/nutui-react/dist/styles/themes/jrkf.css' const Home = () => { return ( diff --git a/packages/nutui-templates/vite-demo/vite.config.ts b/packages/nutui-templates/vite-demo/vite.config.ts index 0e812fa004..ddfe10feef 100644 --- a/packages/nutui-templates/vite-demo/vite.config.ts +++ b/packages/nutui-templates/vite-demo/vite.config.ts @@ -1,6 +1,6 @@ import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' import vitePluginImp from 'vite-plugin-imp' +import react from '@vitejs/plugin-react-swc' // https://vitejs.dev/config/ export default defineConfig({ @@ -11,12 +11,24 @@ export default defineConfig({ { libName: '@nutui/nutui-react', style: (name) => { - return `@nutui/nutui-react/dist/esm/${name}/style/css` + return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/index` + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/index` + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/index` }, replaceOldImport: false, camel2DashComponentName: false, - } - ] - }) + }, + ], + }), ], + css: { + preprocessorOptions: { + scss: { + api: 'modern-compiler', // 或 "modern","legacy" + additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';` + // jmapp 需要在 app 入口引入 import '@nutui/nutui-react/dist/styles/themes/jmapp.css' + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` + } + } + }, }) diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md index fc315e5dac..51e49d64cb 100644 --- a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md @@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing | theme description | scss file name | | --- | --- | | Jingdong APP 10.0 theme (default) | `variables.scss` | -| Jingdong JDesign Theme | `variables-jdb.scss ` | +| Jingdong B client Theme | `variables-jdb.scss ` | ## How to use @@ -19,56 +19,7 @@ It is important to note that when configuring the theme, you also need to import | --- | --- | | JD APP Theme (Light Mode) | `@nutui/nutui-react/dist/styles/themes/default.css` | | JD APP Theme (Dark Mode) | `@nutui/nutui-react/dist/styles/themes/dark.css` | -| JD JDesign Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | +| JD B client Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | | JD JRKF Theme | `@nutui/nutui-react/dist/styles/themes/jrkf.css` | Currently, only the default theme provides support for dark mode. - -### 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-jmapp.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/sites-react/doc/docs/react/official-theme-react.md b/src/sites/sites-react/doc/docs/react/official-theme-react.md index e851e1c5b8..1872ccb833 100644 --- a/src/sites/sites-react/doc/docs/react/official-theme-react.md +++ b/src/sites/sites-react/doc/docs/react/official-theme-react.md @@ -9,10 +9,9 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | 主题说明 | scss 文件名称 | | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | -| 京东 JDesign 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | +| 京东 B 端主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | | 京东 JRKF 主题 | `variables-jrkf.scss` | - ## 使用方式 需要注意的是,配置主题时,你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式: @@ -21,56 +20,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | --- | --- | | 京东 APP 主题(明亮模式) | `@nutui/nutui-react/dist/styles/themes/default.css` | | 京东 APP 主题(暗黑模式) | `@nutui/nutui-react/dist/styles/themes/dark.css` | -| 京东 JDesign 主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | +| 京东 B 端主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | | 京东 JRKF 主题 | `@nutui/nutui-react/dist/styles/themes/jrkf.css` | 目前只有默认主题提供了暗黑模式的支持。 - -### 修改本地项目 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-jmapp.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/sites-react/doc/docs/react/start-react.en-US.md b/src/sites/sites-react/doc/docs/react/start-react.en-US.md index 3dbf6888c4..6ed6d66cf0 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/start-react.en-US.md @@ -28,7 +28,12 @@ npm install @nutui/nutui-react ```js import * as React from 'react' import * as ReactDOM from 'react-dom' +// default theme import '@nutui/nutui-react/dist/style.css' +// B client Theme +// import '@nutui/nutui-react/dist/style-jmapp.css' +// JRKF theme +// import '@nutui/nutui-react/dist/style-jrkf.css' import { Button } from '@nutui/nutui-react' ReactDOM.render( @@ -53,7 +58,25 @@ import Button from '@nutui/nutui-react/dist/es/packages/button' It is important to note that when manually loading components on demand, you also need to import the global class file in your entry file to load some of NutUI React's global logic and styles: ```js +// css theme file path +// Default theme import '@nutui/nutui-react/dist/styles/themes/default.css' +// Default Drak theme +import '@nutui/nutui-react/dist/styles/themes/default-dark.css' +// B client Theme +import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// JRKF theme +import '@nutui/nutui-react/dist/styles/themes/jrkf.css' + +// scss theme file path +// Default theme +import '@nutui/nutui-react/dist/styles/theme-default.scss' +// Default Drak theme +import '@nutui/nutui-react/dist/styles/theme-dark.scss' +// B client Theme +import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' +// JRKF theme +import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' ``` #### Method 3: Automatic On-Demand Loading @@ -74,6 +97,36 @@ yarn add vite-plugin-imp -D npm install vite-plugin-imp -D ``` +The entry file needs to import global styles. + +:::demo + +```js +// app.js + +// CSS theme file path +// Default theme +import '@nutui/nutui-react/dist/styles/themes/default.css' +// Default Drak theme +// import '@nutui/nutui-react/dist/styles/themes/default-dark.css' +// B client Theme +// import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// JRKF theme +// import '@nutui/nutui-react/dist/styles/themes/jrkf.css' + +// scss theme file path +// Default theme +// import '@nutui/nutui-react/dist/styles/theme-default.scss' +// Default Drak theme +// import '@nutui/nutui-react/dist/styles/theme-dark.scss' +// B client Theme +// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' +// JRKF theme +// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' +``` + +::: + :::demo ```js @@ -91,10 +144,23 @@ export default defineConfig({ { libName: '@nutui/nutui-react', style: (name) => { + // Default theme // Handling on-demand import of CSS files, choose one of the two methods return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` // Handling on-demand import of SCSS files, choose one of the two methods return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` + + // JDesign + // Handling on-demand import of CSS files, choose one of the two methods + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css` + // Handling on-demand import of SCSS files, choose one of the two methods + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp` + + // JRKF + // Handling on-demand import of CSS files, choose one of the two methods + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf/css` + // Handling on-demand import of SCSS files, choose one of the two methods + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf` }, replaceOldImport: false, camel2DashComponentName: false, @@ -102,6 +168,19 @@ export default defineConfig({ ], }), ], + // The project uses SCSS preprocessed style files and requires the following configuration to be added. + css: { + preprocessorOptions: { + scss: { + api: 'modern-compiler', // or "modern","legacy" + additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, + // JDesign + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` + // JRKF + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` + }, + }, + }, }) ``` @@ -123,6 +202,68 @@ yarn add babel-plugin-import -D npm install babel-plugin-import -D ``` +The entry file needs to import global styles. + +:::demo + +```js +// app.js + +// CSS theme file path +// Default theme +import '@nutui/nutui-react/dist/styles/themes/default.css' +// Default Drak theme +// import '@nutui/nutui-react/dist/styles/themes/default-dark.css' +// B client Theme +// import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// JRKF theme +// import '@nutui/nutui-react/dist/styles/themes/jrkf.css' + +// scss theme file path +// Default theme +// import '@nutui/nutui-react/dist/styles/theme-default.scss' +// Default Drak theme +// import '@nutui/nutui-react/dist/styles/theme-dark.scss' +// B client Theme +// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' +// JRKF theme +// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' +``` + +::: + +webpack config: + +:::demo + +```js +module.exports = { + module: { + rules: [ + { + test: /\.s[ac]ss$/i, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'sass-loader', + options: { + additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, + // B + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` + // JRKF + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` + }, + }, + ], + }, + ], + }, +} +``` + +::: + babel config: :::demo @@ -135,11 +276,15 @@ babel config: 'import', { libraryName: '@nutui/nutui-react', - style: 'css', // Here are the CSS files for on-demand import. If you need to import SCSS files, you can set the style to true. camel2DashComponentName: false, customName: (name, file) => { return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}` }, + // Automatically load SCSS style files. + customStyleName: (name) => + `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`, + // Automatically load CSS style files. + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` }, 'nutui-react', ], @@ -169,6 +314,6 @@ module.exports = { ## Templates -The example code can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) directory. +The example code can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.0/packages/nutui-templates) directory. diff --git a/src/sites/sites-react/doc/docs/react/start-react.md b/src/sites/sites-react/doc/docs/react/start-react.md index ce68fef7f3..a97f17994c 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.md +++ b/src/sites/sites-react/doc/docs/react/start-react.md @@ -28,7 +28,12 @@ npm install @nutui/nutui-react ```js import * as React from 'react' import * as ReactDOM from 'react-dom' +// JRKF 默认 import '@nutui/nutui-react/dist/style.css' +// B 端主题 +// import '@nutui/nutui-react/dist/style-jmapp.css' +// JRKF 主题 +// import '@nutui/nutui-react/dist/style-jrkf.css' import { Button } from '@nutui/nutui-react' ReactDOM.render( @@ -50,10 +55,28 @@ import '@nutui/nutui-react/dist/es/packages/button/style' import Button from '@nutui/nutui-react/dist/es/packages/button' ``` -需要注意的是,`在手动按需加载时,你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式:` +需要注意的是,`在手动按需加载时,你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式:`。css 和 scss 主题文件路径,根据您实际项目采用的技术栈进行选择。 ```js +// css 主题文件路径 +// 默认主题 import '@nutui/nutui-react/dist/styles/themes/default.css' +// 默认暗黑主题 +import '@nutui/nutui-react/dist/styles/themes/default-dark.css' +// B 端主题 +import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// JRKF 主题 +import '@nutui/nutui-react/dist/styles/themes/jrkf.css' + +// scss 主题文件路径 +// 默认主题 +import '@nutui/nutui-react/dist/styles/theme-default.scss' +// 默认暗黑主题 +import '@nutui/nutui-react/dist/styles/theme-dark.scss' +// B 端主题 +import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' +// JRKF 主题 +import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' ``` #### 方法三、自动的按需加载 @@ -74,6 +97,36 @@ yarn add vite-plugin-imp -D npm install vite-plugin-imp -D ``` +入口文件需要引入全局样式 + +:::demo + +```js +// app.js + +// css 主题文件路径 +// 默认主题 +import '@nutui/nutui-react/dist/styles/themes/default.css' +// 默认暗黑主题 +// import '@nutui/nutui-react/dist/styles/themes/default-dark.css' +// B 端主题 +// import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// JRKF 主题 +// import '@nutui/nutui-react/dist/styles/themes/jrkf.css' + +// scss 主题文件路径 +// 默认主题 +// import '@nutui/nutui-react/dist/styles/theme-default.scss' +// 默认暗黑主题 +// import '@nutui/nutui-react/dist/styles/theme-dark.scss' +// B 端主题 +// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' +// JRKF 主题 +// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' +``` + +::: + :::demo ```js @@ -91,10 +144,23 @@ export default defineConfig({ { libName: '@nutui/nutui-react', style: (name) => { + // 默认主题 // 按需引入 css 文件的处理,两种方式择其一 return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` // 按需引入 scss 文件的处理,两种方式择其一 return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` + + // B 端主题 + // 按需引入 css 文件的处理,两种方式择其一 + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css` + // 按需引入 scss 文件的处理,两种方式择其一 + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp` + + // JRKF 主题 + // 按需引入 css 文件的处理,两种方式择其一 + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf/css` + // 按需引入 scss 文件的处理,两种方式择其一 + // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf` }, replaceOldImport: false, camel2DashComponentName: false, @@ -102,6 +168,19 @@ export default defineConfig({ ], }), ], + // 项目中采用 scss 预处理样式文件,需要添加如下配置 + css: { + preprocessorOptions: { + scss: { + api: 'modern-compiler', // 或 "modern","legacy" + additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, + // B 端主题 + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` + // JRKF 主题 + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` + }, + }, + }, }) ``` @@ -123,6 +202,68 @@ yarn add babel-plugin-import -D npm install babel-plugin-import -D ``` +入口文件需要引入全局样式 + +:::demo + +```js +// app.js + +// css 主题文件路径 +// 默认主题 +import '@nutui/nutui-react/dist/styles/themes/default.css' +// 默认暗黑主题 +// import '@nutui/nutui-react/dist/styles/themes/default-dark.css' +// B 端主题 +// import '@nutui/nutui-react/dist/styles/themes/jmapp.css' +// JRKF 主题 +// import '@nutui/nutui-react/dist/styles/themes/jrkf.css' + +// scss 主题文件路径 +// 默认主题 +// import '@nutui/nutui-react/dist/styles/theme-default.scss' +// 默认暗黑主题 +// import '@nutui/nutui-react/dist/styles/theme-dark.scss' +// B 端主题 +// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' +// JRKF 主题 +// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' +``` + +::: + +webpack 配置: + +:::demo + +```js +module.exports = { + module: { + rules: [ + { + test: /\.s[ac]ss$/i, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'sass-loader', + options: { + additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, + // B 端主题 + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` + // JRKF 主题 + // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` + }, + }, + ], + }, + ], + }, +} +``` + +::: + babel 配置: :::demo @@ -135,11 +276,15 @@ babel 配置: 'import', { libraryName: '@nutui/nutui-react', - style: 'css', // 这里是按需引入的 css 文件,如果需要引入 scss 文件,可将 style 设置为 true camel2DashComponentName: false, customName: (name, file) => { return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}` }, + // 自动加载 scss 样式文件 + customStyleName: (name) => + `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`, + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` }, 'nutui-react', ], @@ -169,6 +314,6 @@ module.exports = { ## 示例 -示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) 下查看 +示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.0/packages/nutui-templates) 下查看 diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md index 3c50b8871e..789bc48574 100644 --- a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md @@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing | theme description | scss file name | | --- | --- | | Jingdong APP 10.0 theme (default) | `variables.scss` | -| Jingdong JDesign Theme | `variables-jdb.scss ` | +| Jingdong B client Theme | `variables-jdb.scss ` | ## How to use @@ -19,7 +19,7 @@ It is important to note that when configuring the theme, you also need to import | --- | --- | | JD APP Theme (Light Mode) | `@nutui/nutui-react-taro/dist/styles/themes/default.css` | | JD APP Theme (Dark Mode) | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` | -| JD JDesign Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | +| JD B client Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | | JD JRKF Theme | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` | Currently, only the default theme provides support for dark mode. diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.md index 284a182180..a7432a74c8 100644 --- a/src/sites/sites-react/doc/docs/taro/official-theme-react.md +++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.md @@ -9,7 +9,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | 主题说明 | scss 文件名称 | | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | -| 京东 JDesign 主题 ([预览](https://nutui.jd.com/taro/react/jdesign-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` | +| 京东 B 端主题 ([预览](https://nutui.jd.com/taro/react/jdesign-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` | ## 使用方式 @@ -19,7 +19,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | --- | --- | | 京东 APP 主题(明亮模式) | `@nutui/nutui-react-taro/dist/styles/themes/default.css` | | 京东 APP 主题(暗黑模式) | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` | -| 京东 JDesign 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | +| 京东 B 端主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | | 京东 JRKF 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` | 目前只有默认主题提供了暗黑模式的支持。 diff --git a/src/sites/sites-react/doc/docs/taro/start-react.en-US.md b/src/sites/sites-react/doc/docs/taro/start-react.en-US.md index 7f2f8664b9..52be808999 100644 --- a/src/sites/sites-react/doc/docs/taro/start-react.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/start-react.en-US.md @@ -105,7 +105,12 @@ config = { You can choose to import style files in full: ```js -import '@nutui/nutui-react-taro/dist/style.css' +// default +// import '@nutui/nutui-react-taro/dist/style.css' +// B +// import '@nutui/nutui-react-taro/dist/style-jmapp.css' +// JKRF +// import '@nutui/nutui-react-taro/dist/style-jkrf.css' ``` You can also implement on-demand import of styles in the following ways: @@ -115,7 +120,25 @@ You can also implement on-demand import of styles in the following ways: Note that when manually loading components on demand, you also need to import the global class file in the entry file to load some of NutUI React Taro's global logic and styles: ```js +// css theme file path +// Default theme import '@nutui/nutui-react-taro/dist/styles/themes/default.css' +// Default Drak theme +// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' +// B client Theme +// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' +// JRKF theme +// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' + +// scss theme file path +// Default theme +// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' +// Default Drak theme +// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' +// B client Theme +// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' +// JRKF theme +// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' ``` Install `babel-plugin-import`. @@ -133,25 +156,70 @@ babel config :::demo +```js +// app.js +// Default theme +import '@nutui/nutui-react-taro/dist/styles/themes/default.css' +// Default Drak theme +// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' +// B client Theme +// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' +// JRKF theme +// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' + +// scss theme file path +// Default theme +// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' +// Default Drak theme +// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' +// B client Theme +// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' +// JRKF theme +// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' +``` + +::: + +babel config: + ```js // babel.config.js -plugins: [ - [ - 'import', - { - libraryName: '@nutui/nutui-react-taro', - style: 'css', // Here are the CSS files for on-demand import. If you need to import SCSS files, you can set the style to true. - camel2DashComponentName: false, - customName: (name, file) => { - return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` +module.exports = { + presets: [ + // ... + ], + plugins: [ + [ + 'import', + { + libraryName: '@nutui/nutui-react', + camel2DashComponentName: false, + customName: (name, file) => { + return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` + }, + customStyleName: (name) => + `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style`, + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css` }, - }, - 'nutui-react-taro', + 'nutui-react', + ], ], -] +} ``` -::: +Taro config/index.js + +```js +{ + sass: { + data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";' + // B client Theme + // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jmapp.scss';` + // JRKF Theme + // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jrkf.scss';` + } +} +``` ## Precautions diff --git a/src/sites/sites-react/doc/docs/taro/start-react.md b/src/sites/sites-react/doc/docs/taro/start-react.md index cd8a78485f..81ccd89618 100644 --- a/src/sites/sites-react/doc/docs/taro/start-react.md +++ b/src/sites/sites-react/doc/docs/taro/start-react.md @@ -110,7 +110,14 @@ config = { 您可以选择全量引入样式文件: ```js +// 默认主题 import '@nutui/nutui-react-taro/dist/style.css' +// 默认主题暗黑模式 +// import '@nutui/nutui-react-taro/dist/style.css' +// B 端主题 +// import '@nutui/nutui-react-taro/dist/style-jmapp.css' +// JKRF 主题 +// import '@nutui/nutui-react-taro/dist/style-jkrf.css' ``` #### 3.1、通过插件实现按需引入 @@ -118,7 +125,25 @@ import '@nutui/nutui-react-taro/dist/style.css' 需要注意的是,`在手动按需加载时,你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React Taro 的全局性逻辑和样式:` ```js +// css 主题文件路径 +// 默认主题 import '@nutui/nutui-react-taro/dist/styles/themes/default.css' +// 默认暗黑主题 +// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' +// B 端主题 +// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' +// JRKF 主题 +// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' + +// scss 主题文件路径 +// 默认主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' +// 默认暗黑主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' +// B 端主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' +// JRKF 主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' ``` 首先安装 `babel-plugin-import` 插件 @@ -132,7 +157,37 @@ npm i babel-plugin-import yarn add babel-plugin-import ``` -安装后在项目中设置 babel 相关配置: +入口文件需要引入全局样式 + +:::demo + +```js +// app.js + +// css 主题文件路径 +// 默认主题 +import '@nutui/nutui-react-taro/dist/styles/themes/default.css' +// 默认暗黑主题 +// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' +// B 端主题 +// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' +// JRKF 主题 +// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' + +// scss 主题文件路径 +// 默认主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' +// 默认暗黑主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' +// B 端主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' +// JRKF 主题 +// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' +``` + +::: + +babel 相关配置: ```js // babel.config.js @@ -144,19 +199,37 @@ module.exports = { [ 'import', { - libraryName: '@nutui/nutui-react-taro', - style: 'css', // 这里是按需引入的 css 文件,如果需要引入 scss 文件,可将 style 设置为 true + libraryName: '@nutui/nutui-react', camel2DashComponentName: false, customName: (name, file) => { return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` }, + // 自动加载 scss 样式文件 + customStyleName: (name) => + `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style`, + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css` }, - 'nutui-react-taro', + 'nutui-react', ], ], } ``` +若您的项目采用 scss,则需要在 config/index 中增加如下配置: + +```js +{ + sass: { + data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";' + // B 端主题 + // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jmapp.scss';` + // JRKF 主题 + // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jrkf.scss';` + } +} +``` + ## 注意事项 #### 1、检查 Taro 是否安装成功 From a78f8ae2bfd80dd62b9a1aaeabe6c03c327fd4d2 Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 11:47:16 +0800 Subject: [PATCH 05/14] =?UTF-8?q?chore:=20sideEffects=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 39662211ab..b0971e1046 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,11 @@ "typings": "dist/es/packages/nutui.react.build.d.ts", "sideEffects": [ "*.scss", - "dist/es/**/style/*", - "dist/cjs/**/style/*", - "dist/style.css", - "dist/styles/font/*", - "dist/styles/font-jmapp/*" + "dist/es/**/style{,-jmapp,-jrkf}/*", + "dist/cjs/**/style{,-jmapp,-jrkf}/*", + "dist/style{,-jmapp,-jrkf}.css", + "dist/styles/**/*", + "dist/styles/font{,-jmapp,-jrkf}/*" ], "description": "京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序", "keywords": [ From 8b68016c1bc4575c223d3dca46925251f39b704c Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 11:53:39 +0800 Subject: [PATCH 06/14] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sites/sites-react/doc/docs/react/start-react.md | 13 +++++++++++++ src/sites/sites-react/doc/docs/taro/start-react.md | 12 ++++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/sites/sites-react/doc/docs/react/start-react.md b/src/sites/sites-react/doc/docs/react/start-react.md index a97f17994c..2810e50394 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.md +++ b/src/sites/sites-react/doc/docs/react/start-react.md @@ -280,11 +280,24 @@ babel 配置: customName: (name, file) => { return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}` }, + // 默认主题 // 自动加载 scss 样式文件 customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`, // 自动加载 css 样式文件 // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` + + // B 端主题 + // 自动加载 scss 样式文件 + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp`, + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css` + + // jkrf 端主题 + // 自动加载 scss 样式文件 + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jkrf`, + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jkrf/css` }, 'nutui-react', ], diff --git a/src/sites/sites-react/doc/docs/taro/start-react.md b/src/sites/sites-react/doc/docs/taro/start-react.md index 81ccd89618..f447034252 100644 --- a/src/sites/sites-react/doc/docs/taro/start-react.md +++ b/src/sites/sites-react/doc/docs/taro/start-react.md @@ -209,6 +209,18 @@ module.exports = { `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style`, // 自动加载 css 样式文件 // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css` + + // B 端主题 + // 自动加载 scss 样式文件 + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jmapp`, + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jmapp/css` + + // jkrf 端主题 + // 自动加载 scss 样式文件 + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jkrf`, + // 自动加载 css 样式文件 + // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jkrf/css` }, 'nutui-react', ], From 5f28765e5f8605769d251824c9917034d3b991f8 Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 11:55:28 +0800 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20=E6=9E=84=E5=BB=BA=20jrkf=20?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build-taro.mjs | 8 ++++++++ scripts/build.mjs | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index 4d17b3acca..ce9b062065 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -504,10 +504,18 @@ console.time('Build jmapp CSS') await buildCSS('jmapp') console.timeEnd('Build CSS') +console.time('Build jrkf CSS') +await buildCSS('jrkf') +console.timeEnd('Build jrkf CSS') + console.time('Build All CSS') await buildAllCSS() console.timeEnd('Build All CSS') +console.time('Build All jrkf CSS') +await buildAllCSS('jrkf') +console.timeEnd('Build All jrkf CSS') + console.time('Build All jmapp CSS') await buildAllCSS('jmapp') console.timeEnd('Build All jmapp CSS') diff --git a/scripts/build.mjs b/scripts/build.mjs index 525693a54c..8cc025cea2 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -446,6 +446,10 @@ console.time('Build jmapp CSS') await buildCSS('jmapp') console.timeEnd('Build CSS') +console.time('Build jrkf CSS') +await buildCSS('jrkf') +console.timeEnd('Build jrkf CSS') + console.time('Build All CSS') await buildAllCSS() console.timeEnd('Build All CSS') @@ -454,6 +458,10 @@ console.time('Build All jmapp CSS') await buildAllCSS('jmapp') console.timeEnd('Build All jmapp CSS') +console.time('Build All jrkf CSS') +await buildAllCSS('jrkf') +console.timeEnd('Build All jrkf CSS') + console.time('Build Theme CSS') await buildThemeCSS() From 9a86dfa96653d5591fcc5f8b828f00fd758c964c Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 12:03:17 +0800 Subject: [PATCH 08/14] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E6=A8=A1?= =?UTF-8?q?=E6=9D=BF=E7=9A=84=E8=B7=B3=E8=BD=AC=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sites/sites-react/doc/docs/react/start-react.en-US.md | 2 +- src/sites/sites-react/doc/docs/react/start-react.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sites/sites-react/doc/docs/react/start-react.en-US.md b/src/sites/sites-react/doc/docs/react/start-react.en-US.md index 6ed6d66cf0..fbc6813a16 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/start-react.en-US.md @@ -314,6 +314,6 @@ module.exports = { ## Templates -The example code can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.0/packages/nutui-templates) directory. +The example code can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.x/packages/nutui-templates) directory. diff --git a/src/sites/sites-react/doc/docs/react/start-react.md b/src/sites/sites-react/doc/docs/react/start-react.md index 2810e50394..24a7ae2238 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.md +++ b/src/sites/sites-react/doc/docs/react/start-react.md @@ -327,6 +327,6 @@ module.exports = { ## 示例 -示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.0/packages/nutui-templates) 下查看 +示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.x/packages/nutui-templates) 下查看 From 4e1c3134d9415e5903227595135ad23d246476ae Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 20:05:31 +0800 Subject: [PATCH 09/14] =?UTF-8?q?chore:=20jrfk=20=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E8=A1=A5=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/variables-jrkf.scss | 200 +++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index 64608ffa0b..b5a0ba6295 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -5,6 +5,10 @@ $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff9999) !default; $color-primary-stop-2: var(--nutui-color-primary-stop-2, #ff6666) !default; $color-primary-pressed: var(--nutui-color-primary-pressed, #ff4c4c) !default; $color-primary-disabled: var(--nutui-color-primary-disabled, #ffb2b2) !default; +$color-primary-disabled-special: var( + --nutui-color-primary-disabled-special, + #ffadbe +) !default; $color-primary-light: var(--nutui-color-primary-light, #ffe5e5) !default; $color-primary-light-pressed: var( --nutui-color-primary-light-pressed, @@ -15,6 +19,15 @@ $color-primary-gradient-1: linear-gradient( $color-primary-stop-1 0%, $color-primary-stop-2 100% ) !default; +$color-primary-icon: var(--nutui-color-primary-icon, #ff3333) !default; +$color-primary-icon-disabled: var( + --nutui-color-primary-icon-disabled, + #dadce0 +) !default; +$color-primary-specialdisabled: var( + --nutui-color-primary-specialdisabled, + #ffadbe +) !default; // 默认 $color-default: var(--nutui-color-default) !default; @@ -72,6 +85,7 @@ $color-border: var( $color-border-tint: var( --nutui-border-tint ) !default; // 默认按钮、输入框等表单组件默认的边框禁用色 +$color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default; // 文本 $color-title: var( @@ -118,6 +132,7 @@ $font-weight-bold: var(--nutui-font-weight-bold) !default; $line-height-base: var(--nutui-line-height) !default; // 间距 space +$spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default; $spacing-xxs: var(--nutui-spacing-xxs) !default; // 多用于文本与图标之间的间距 $spacing-xs: var(--nutui-spacing-xs) !default; // 多用于文本与图标之间的间距 $spacing-s: var(--nutui-spacing-s) !default; // 二级卡片与屏幕两侧的间距 @@ -223,11 +238,19 @@ $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default; $padding-xs: var(--nutui-padding-xs, $spacing-xl) !default; // button(✅) +$button-xlarge-border-radius: var( + --nutui-button-xlarge-border-radius, + $radius-base +) !default; $button-transition: all 0.15s ease-in-out; $button-square-border-radius: var( --nutui-button-square-border-radius, 0px ) !default; +$button-xlarge-text-icon-margin: var( + --nutui-button-xlarge-text-icon-margin, + 6px +) !default; $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default; $button-border-width: var(--nutui-button-border-width, 1px) !default; @@ -493,6 +516,65 @@ $divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default; $divider-vertical-top: var(--nutui-divider-vertical-top, 2px) !default; $divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default; +// sidebar(✅) +$sidebar-background-color: var( + --nutui-sidebar-background-color, + $color-background +) !default; +$sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default; +$sidebar-width: var(--nutui-sidebar-width, 104px) !default; +$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default; +$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default; +$sidebar-inactive-font-size: var( + --nutui-sidebar-inactive-font-size, + $font-size-base +) !default; +$sidebar-active-font-size: var( + --nutui-sidebar-active-font-size, + $font-size-l +) !default; +$sidebar-active-font-weight: var( + --nutui-sidebar-active-font-weight, + $font-weight-bold +) !default; +$sidebar-active-color: var( + --nutui-sidebar-active-color, + $color-primary +) !default; +$sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default; +$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default; + +// segmented +$segmented-height: var(--nutui-segmented-height, 24px) !default; +$segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default; +$segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default; +$segmented-background: var( + --nutui-segmented-background, + $color-mask-part +) !default; +$segmented-item-height: var(--nutui-segmented-height, 20px) !default; +$segmented-item-padding: var( + --nutui-segmented-item-padding, + 0 $spacing-xs +) !default; +$segmented-item-radius: var(--nutui-segmented-item-radius, $radius-xs) !default; +$segmented-item-fontsize: var( + --nutui-segmented-item-fontsize, + $font-size-s +) !default; +$segmented-item-color: var( + --nutui-segmented-item-color, + $color-primary-text +) !default; +$segmented-active-background: var( + --nutui-segmented-active-background, + $color-mask-part +) !default; +$segmented-icon-margin-right: var( + --nutui-segmented-icon-margin-right, + $spacing-xxxs +) !default; + // icon(✅) $icon-height: var(--nutui-icon-height, 20px) !default; @@ -855,6 +937,16 @@ $countdown-number-primary-background-color: var( --nutui-countdown-number-primary-background-color, $color-primary ) !default; +//xlarge price(✅) +$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default; +$price-integer-xlarge-size: var( + --nutui-price-integer-xlarge-size, + 24px +) !default; +$price-decimal-xlarge-size: var( + --nutui-price-decimal-xlarge-size, + 12px +) !default; //large price(✅) $price-symbol-padding-right: var( --nutui-price-symbol-padding-right, @@ -863,7 +955,25 @@ $price-symbol-padding-right: var( $price-symbol-big-size: var(--nutui-price-symbol-big-size, 18px) !default; $price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default; $price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default; +$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default; +$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default; +$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default; +//price(✅) +$price-primary-color: var(--nutui-price-color, $color-primary) !default; +$price-color: var(--nutui-price-color, var(--nutui-color-text-help)) !default; +$price-darkgray-color: var( + --nutui-price-darkgray-color, + var(--nutui-gray-7) +) !default; +$price-line-color: var( + --nutui-price-line-color, + var(--nutui-color-text-help) +) !default; +$price-symbol-padding-right: var( + --nutui-price-symbol-padding-right, + 0px +) !default; //normal price(✅) $price-line-color: var(--nutui-price-line-color, $color-border) !default; $price-line-font-size: var(--nutui-price-line-font-size, 12px) !default; @@ -876,6 +986,15 @@ $price-decimal-medium-size: var( --nutui-price-decimal-medium-size, 14px ) !default; +$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default; +$price-integer-normal-size: var( + --nutui-price-integer-normal-size, + 16px +) !default; +$price-decimal-normal-size: var( + --nutui-price-decimal-normal-size, + 12px +) !default; // small price(✅) $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default; @@ -892,6 +1011,34 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default; $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default; //switch(✅) +$switch-inactive-background-color: var( + --nutui-switch-inactive-background-color, + $color-text-disabled +) !default; +$switch-inactive-disabled-background-color: var( + --nutui-switch-inactive-disabled-background-color, + $color-background +) !default; +$switch-label-font-size: var( + --nutui-switch-label-font-size, + $font-size-s +) !default; +$switch-inactive-disabled-label-text-color: var( + --nutui-switch-inactive-disabled-label-text-color, + $color-text-disabled +) !default; +$switch-inactive-line-background-color: var( + --nutui-switch-inactive-line-background-color, + #ffffff +) !default; +$switch-label-text-color: var( + --nutui-switch-label-text-color, + $color-primary-text +) !default; +$switch-active-background-color: var( + --nutui-switch-active-background-color, + $color-primary +) !default; $switch-close-background-color: var( --nutui-switch-close-background-color, $color-default @@ -916,6 +1063,7 @@ $switch-width: var(--nutui-switch-width, 40px) !default; $switch-height: var(--nutui-switch-height, 24px) !default; $switch-line-height: var(--nutui-switch-line-height, 24px) !default; $switch-border-radius: var(--nutui-switch-border-radius, 24px) !default; +$switch-border-width: var(--nutui-switch-border-width, 2px) !default; $switch-inside-width: var(--nutui-switch-inside-width, 20px) !default; $switch-inside-height: var(--nutui-switch-inside-height, 20px) !default; $switch-inside-border-radius: var( @@ -934,6 +1082,24 @@ $switch-button-box-shadow: var( --nutui-switch-box-shadow, $shadow-raised ) !default; +/* #ifdef harmony */ +$switch-inside-box-shadow: var( + --nutui-switch-inside-box-shadow, + 0px 2px 6px 0px rgba(0, 0, 0, 0.1) +) !default; +/* #endif */ +/* #ifndef harmony */ +$switch-inside-box-shadow: var( + --nutui-switch-inside-box-shadow, + 0px 2px 1px 0px rgba(0, 0, 0, 0.06), + 0px 2px 6px 0px rgba(0, 0, 0, 0.1), + 0px 0px 0px 1px rgba(0, 0, 0, 0.02) +) !default; +/* #endif */ +$switch-active-disabled-background-color: var( + --nutui-switch-active-disabled-background-color, + $color-primary-disabled-special +) !default; // toast(✅) $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default; @@ -1052,6 +1218,7 @@ $hoverbutton-position-right: var( --nutui-hoverbutton-position-right, var(--nutui-spacing-16, 16px) ) !default; +$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default; $hoverbutton-item-border-color: var( --nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)) @@ -1089,6 +1256,10 @@ $overlay-animation-duration: var( 0.3s ) !default; //popup(✅) +$popup-description-spacing: var( + --nutui-popup-description-spacing, + $spacing-base +) !default; $popup-border-radius: var(--nutui-popup-border-radius, 12px) !default; $popup-icon-size: var(--nutui-popup-icon-size, $font-size-xl) !default; $popup-title-padding: var(--nutui-popup-title-padding, 12px) !default; @@ -1145,6 +1316,9 @@ $notify-z-index: var(--nutui-notify-z-index, 1000) !default; $notify-background-color: var(--nutui-notify-background-color, $white) !default; // rate(✅) +$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default; +$rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default; +$rate-font-size: var(--nutui-rate-font-size, 12px) !default; $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default; $rate-icon-inactive-color: var( @@ -1359,6 +1533,15 @@ $steps-dot-icon-border: var( $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default; // dialog(✅) +$dialog-bottom-close-icon-size: var( + --nutui-dialog-bottom-close-icon-size, + 24px +) !default; +$dialog-footer-cancel-bg: var( + --nutui-dialog-footer-cancel-bg, + $button-default-background-color +); +$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default; $dialog-width: var(--nutui-dialog-width, 295px) !default; $dialog-padding: var( --nutui-dialog-padding, @@ -1657,6 +1840,14 @@ $badge-content-transform: var( $badge-z-index: var(--nutui-badge-z-index, 1) !default; $badge-dot-width: var(--nutui-badge-dot-width, 8px) !default; $badge-dot-border: var(--nutui-badge-dot-border, none) !default; +$badge-dot-small-width: var(--nutui-badge-dot-small-width, 4px) !default; +$badge-dot-large-width: var(--nutui-badge-dot-large-width, 8px) !default; +$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text); +$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default; +$badge-outline-border: var( + --nutui-badge-outline-border, + 1px solid $color-primary +); //popover(✅) $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default; @@ -2141,7 +2332,12 @@ $color-background-overlay: var( ) !default; // grid(✅) +$grid-border-width: var(--nutui-grid-border-width, 0px) !default; $grid-border-color: var(--nutui-grid-border-color, $color-border) !default; +$grid-item-border-radius: var( + --nutui-grid-item-border-radius, + $radius-l +) !default; $grid-item-content-padding: var( --nutui-grid-item-content-padding, 16px 8px @@ -2428,6 +2624,10 @@ $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default; $loading-icon-size: var(--nutui-loading-icon-size, $font-size-s) !default; $loading-color: var(--nutui-loading-color, $color-text-help) !default; $loading-font-size: var(--nutui-loading-font-size, $font-size-s) !default; +$loading-lottie-background: var( + --nutui-loading-lottie-background, + rgba(0, 0, 0, 0.06) +) !default; // ResultPage $resultpage-width: var(--nutui-resultpage-width, 247px) !default; $resultpage-icon-size: var(--nutui-resultpage-icon-size, 48px) !default; From c4c7ca19893de12e525a711689a41d7125daf29d Mon Sep 17 00:00:00 2001 From: oasis Date: Thu, 17 Apr 2025 20:11:11 +0800 Subject: [PATCH 10/14] chore: time --- scripts/build-taro.mjs | 2 +- scripts/build.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index ce9b062065..17489af0d4 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -502,7 +502,7 @@ console.timeEnd('Build CSS') console.time('Build jmapp CSS') await buildCSS('jmapp') -console.timeEnd('Build CSS') +console.timeEnd('Build jmapp CSS') console.time('Build jrkf CSS') await buildCSS('jrkf') diff --git a/scripts/build.mjs b/scripts/build.mjs index 8cc025cea2..947f1d11bd 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -444,7 +444,7 @@ console.timeEnd('Build CSS') console.time('Build jmapp CSS') await buildCSS('jmapp') -console.timeEnd('Build CSS') +console.timeEnd('Build jmapp CSS') console.time('Build jrkf CSS') await buildCSS('jrkf') From 9be40690427b6ad5592797b56a03bbf4412ac575 Mon Sep 17 00:00:00 2001 From: oasis Date: Fri, 18 Apr 2025 18:58:31 +0800 Subject: [PATCH 11/14] fix: review --- packages/nutui-templates/create-app-demo/craco.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nutui-templates/create-app-demo/craco.config.js b/packages/nutui-templates/create-app-demo/craco.config.js index 5fe4fab36b..c9bba98a5d 100644 --- a/packages/nutui-templates/create-app-demo/craco.config.js +++ b/packages/nutui-templates/create-app-demo/craco.config.js @@ -30,12 +30,12 @@ module.exports = { libraryName: '@nutui/nutui-react', camel2DashComponentName: false, customName: (name, file) => { - return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` + return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}` }, // 自动加载 scss 样式文件 - customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` + customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` // 自动加载 css 样式文件 - // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` + // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` }, 'nutui-react', ], From 0106866cf6234f988160d5ba6791a4d6823fb163 Mon Sep 17 00:00:00 2001 From: oasis Date: Fri, 18 Apr 2025 19:15:31 +0800 Subject: [PATCH 12/14] fix: review --- .../docs/react/official-theme-react.en-US.md | 4 +- .../doc/docs/react/official-theme-react.md | 4 +- .../doc/docs/react/start-react.en-US.md | 14 ++--- .../sites-react/doc/docs/react/start-react.md | 22 ++++---- .../docs/taro/official-theme-react.en-US.md | 53 +------------------ .../doc/docs/taro/official-theme-react.md | 53 +------------------ .../doc/docs/taro/start-react.en-US.md | 10 ++-- .../sites-react/doc/docs/taro/start-react.md | 14 ++--- 8 files changed, 38 insertions(+), 136 deletions(-) diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md index 51e49d64cb..beb6cefbcd 100644 --- a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md @@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing | theme description | scss file name | | --- | --- | | Jingdong APP 10.0 theme (default) | `variables.scss` | -| Jingdong B client Theme | `variables-jdb.scss ` | +| Jingdong JMAPP Theme | `variables-jdb.scss ` | ## How to use @@ -19,7 +19,7 @@ It is important to note that when configuring the theme, you also need to import | --- | --- | | JD APP Theme (Light Mode) | `@nutui/nutui-react/dist/styles/themes/default.css` | | JD APP Theme (Dark Mode) | `@nutui/nutui-react/dist/styles/themes/dark.css` | -| JD B client Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | +| JD JMAPP Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | | JD JRKF Theme | `@nutui/nutui-react/dist/styles/themes/jrkf.css` | Currently, only the default theme provides support for dark mode. diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.md b/src/sites/sites-react/doc/docs/react/official-theme-react.md index 1872ccb833..6459e4b0e1 100644 --- a/src/sites/sites-react/doc/docs/react/official-theme-react.md +++ b/src/sites/sites-react/doc/docs/react/official-theme-react.md @@ -9,7 +9,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | 主题说明 | scss 文件名称 | | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | -| 京东 B 端主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | +| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | | 京东 JRKF 主题 | `variables-jrkf.scss` | ## 使用方式 @@ -20,7 +20,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | --- | --- | | 京东 APP 主题(明亮模式) | `@nutui/nutui-react/dist/styles/themes/default.css` | | 京东 APP 主题(暗黑模式) | `@nutui/nutui-react/dist/styles/themes/dark.css` | -| 京东 B 端主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | +| 京东 JMAPP 主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` | | 京东 JRKF 主题 | `@nutui/nutui-react/dist/styles/themes/jrkf.css` | 目前只有默认主题提供了暗黑模式的支持。 diff --git a/src/sites/sites-react/doc/docs/react/start-react.en-US.md b/src/sites/sites-react/doc/docs/react/start-react.en-US.md index fbc6813a16..b400a91341 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/start-react.en-US.md @@ -30,7 +30,7 @@ import * as React from 'react' import * as ReactDOM from 'react-dom' // default theme import '@nutui/nutui-react/dist/style.css' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react/dist/style-jmapp.css' // JRKF theme // import '@nutui/nutui-react/dist/style-jrkf.css' @@ -63,7 +63,7 @@ It is important to note that when manually loading components on demand, you als import '@nutui/nutui-react/dist/styles/themes/default.css' // Default Drak theme import '@nutui/nutui-react/dist/styles/themes/default-dark.css' -// B client Theme +// JMAPP Theme import '@nutui/nutui-react/dist/styles/themes/jmapp.css' // JRKF theme import '@nutui/nutui-react/dist/styles/themes/jrkf.css' @@ -73,7 +73,7 @@ import '@nutui/nutui-react/dist/styles/themes/jrkf.css' import '@nutui/nutui-react/dist/styles/theme-default.scss' // Default Drak theme import '@nutui/nutui-react/dist/styles/theme-dark.scss' -// B client Theme +// JMAPP Theme import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' // JRKF theme import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' @@ -109,7 +109,7 @@ The entry file needs to import global styles. import '@nutui/nutui-react/dist/styles/themes/default.css' // Default Drak theme // import '@nutui/nutui-react/dist/styles/themes/default-dark.css' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react/dist/styles/themes/jmapp.css' // JRKF theme // import '@nutui/nutui-react/dist/styles/themes/jrkf.css' @@ -119,7 +119,7 @@ import '@nutui/nutui-react/dist/styles/themes/default.css' // import '@nutui/nutui-react/dist/styles/theme-default.scss' // Default Drak theme // import '@nutui/nutui-react/dist/styles/theme-dark.scss' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' // JRKF theme // import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' @@ -214,7 +214,7 @@ The entry file needs to import global styles. import '@nutui/nutui-react/dist/styles/themes/default.css' // Default Drak theme // import '@nutui/nutui-react/dist/styles/themes/default-dark.css' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react/dist/styles/themes/jmapp.css' // JRKF theme // import '@nutui/nutui-react/dist/styles/themes/jrkf.css' @@ -224,7 +224,7 @@ import '@nutui/nutui-react/dist/styles/themes/default.css' // import '@nutui/nutui-react/dist/styles/theme-default.scss' // Default Drak theme // import '@nutui/nutui-react/dist/styles/theme-dark.scss' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' // JRKF theme // import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' diff --git a/src/sites/sites-react/doc/docs/react/start-react.md b/src/sites/sites-react/doc/docs/react/start-react.md index 24a7ae2238..a09678491d 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.md +++ b/src/sites/sites-react/doc/docs/react/start-react.md @@ -30,7 +30,7 @@ import * as React from 'react' import * as ReactDOM from 'react-dom' // JRKF 默认 import '@nutui/nutui-react/dist/style.css' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react/dist/style-jmapp.css' // JRKF 主题 // import '@nutui/nutui-react/dist/style-jrkf.css' @@ -63,7 +63,7 @@ import Button from '@nutui/nutui-react/dist/es/packages/button' import '@nutui/nutui-react/dist/styles/themes/default.css' // 默认暗黑主题 import '@nutui/nutui-react/dist/styles/themes/default-dark.css' -// B 端主题 +// JMAPP 主题 import '@nutui/nutui-react/dist/styles/themes/jmapp.css' // JRKF 主题 import '@nutui/nutui-react/dist/styles/themes/jrkf.css' @@ -73,7 +73,7 @@ import '@nutui/nutui-react/dist/styles/themes/jrkf.css' import '@nutui/nutui-react/dist/styles/theme-default.scss' // 默认暗黑主题 import '@nutui/nutui-react/dist/styles/theme-dark.scss' -// B 端主题 +// JMAPP 主题 import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' // JRKF 主题 import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' @@ -109,7 +109,7 @@ npm install vite-plugin-imp -D import '@nutui/nutui-react/dist/styles/themes/default.css' // 默认暗黑主题 // import '@nutui/nutui-react/dist/styles/themes/default-dark.css' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react/dist/styles/themes/jmapp.css' // JRKF 主题 // import '@nutui/nutui-react/dist/styles/themes/jrkf.css' @@ -119,7 +119,7 @@ import '@nutui/nutui-react/dist/styles/themes/default.css' // import '@nutui/nutui-react/dist/styles/theme-default.scss' // 默认暗黑主题 // import '@nutui/nutui-react/dist/styles/theme-dark.scss' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' // JRKF 主题 // import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' @@ -150,7 +150,7 @@ export default defineConfig({ // 按需引入 scss 文件的处理,两种方式择其一 return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` - // B 端主题 + // JMAPP 主题 // 按需引入 css 文件的处理,两种方式择其一 // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css` // 按需引入 scss 文件的处理,两种方式择其一 @@ -174,7 +174,7 @@ export default defineConfig({ scss: { api: 'modern-compiler', // 或 "modern","legacy" additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, - // B 端主题 + // JMAPP 主题 // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` // JRKF 主题 // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` @@ -214,7 +214,7 @@ npm install babel-plugin-import -D import '@nutui/nutui-react/dist/styles/themes/default.css' // 默认暗黑主题 // import '@nutui/nutui-react/dist/styles/themes/default-dark.css' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react/dist/styles/themes/jmapp.css' // JRKF 主题 // import '@nutui/nutui-react/dist/styles/themes/jrkf.css' @@ -224,7 +224,7 @@ import '@nutui/nutui-react/dist/styles/themes/default.css' // import '@nutui/nutui-react/dist/styles/theme-default.scss' // 默认暗黑主题 // import '@nutui/nutui-react/dist/styles/theme-dark.scss' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react/dist/styles/theme-jmapp.scss' // JRKF 主题 // import '@nutui/nutui-react/dist/styles/theme-jrkf.scss' @@ -249,7 +249,7 @@ module.exports = { loader: 'sass-loader', options: { additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, - // B 端主题 + // JMAPP 主题 // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` // JRKF 主题 // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` @@ -287,7 +287,7 @@ babel 配置: // 自动加载 css 样式文件 // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` - // B 端主题 + // JMAPP 主题 // 自动加载 scss 样式文件 // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp`, // 自动加载 css 样式文件 diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md index 789bc48574..749674d910 100644 --- a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md @@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing | theme description | scss file name | | --- | --- | | Jingdong APP 10.0 theme (default) | `variables.scss` | -| Jingdong B client Theme | `variables-jdb.scss ` | +| Jingdong JMAPP Theme | `variables-jdb.scss ` | ## How to use @@ -19,56 +19,7 @@ It is important to note that when configuring the theme, you also need to import | --- | --- | | JD APP Theme (Light Mode) | `@nutui/nutui-react-taro/dist/styles/themes/default.css` | | JD APP Theme (Dark Mode) | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` | -| JD B client Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | +| JD JMAPP Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | | JD JRKF Theme | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` | Currently, only the default theme provides support for dark mode. - -### 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-jmapp.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/sites-react/doc/docs/taro/official-theme-react.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.md index a7432a74c8..3636976987 100644 --- a/src/sites/sites-react/doc/docs/taro/official-theme-react.md +++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.md @@ -9,7 +9,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | 主题说明 | scss 文件名称 | | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | -| 京东 B 端主题 ([预览](https://nutui.jd.com/taro/react/jdesign-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` | +| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/taro/react/jdesign-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` | ## 使用方式 @@ -19,56 +19,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | --- | --- | | 京东 APP 主题(明亮模式) | `@nutui/nutui-react-taro/dist/styles/themes/default.css` | | 京东 APP 主题(暗黑模式) | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` | -| 京东 B 端主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | +| 京东 JMAPP 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | | 京东 JRKF 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` | 目前只有默认主题提供了暗黑模式的支持。 - -### 修改本地项目 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-jmapp.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/sites-react/doc/docs/taro/start-react.en-US.md b/src/sites/sites-react/doc/docs/taro/start-react.en-US.md index 52be808999..e6215351ab 100644 --- a/src/sites/sites-react/doc/docs/taro/start-react.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/start-react.en-US.md @@ -125,7 +125,7 @@ Note that when manually loading components on demand, you also need to import th import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // Default Drak theme // import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' // JRKF theme // import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' @@ -135,7 +135,7 @@ import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' // Default Drak theme // import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' // JRKF theme // import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' @@ -162,7 +162,7 @@ babel config import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // Default Drak theme // import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' // JRKF theme // import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' @@ -172,7 +172,7 @@ import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' // Default Drak theme // import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' -// B client Theme +// JMAPP Theme // import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' // JRKF theme // import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' @@ -213,7 +213,7 @@ Taro config/index.js { sass: { data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";' - // B client Theme + // JMAPP Theme // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jmapp.scss';` // JRKF Theme // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jrkf.scss';` diff --git a/src/sites/sites-react/doc/docs/taro/start-react.md b/src/sites/sites-react/doc/docs/taro/start-react.md index f447034252..437eb0956e 100644 --- a/src/sites/sites-react/doc/docs/taro/start-react.md +++ b/src/sites/sites-react/doc/docs/taro/start-react.md @@ -114,7 +114,7 @@ config = { import '@nutui/nutui-react-taro/dist/style.css' // 默认主题暗黑模式 // import '@nutui/nutui-react-taro/dist/style.css' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react-taro/dist/style-jmapp.css' // JKRF 主题 // import '@nutui/nutui-react-taro/dist/style-jkrf.css' @@ -130,7 +130,7 @@ import '@nutui/nutui-react-taro/dist/style.css' import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // 默认暗黑主题 // import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' // JRKF 主题 // import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' @@ -140,7 +140,7 @@ import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' // 默认暗黑主题 // import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' // JRKF 主题 // import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' @@ -169,7 +169,7 @@ yarn add babel-plugin-import import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // 默认暗黑主题 // import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css' // JRKF 主题 // import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css' @@ -179,7 +179,7 @@ import '@nutui/nutui-react-taro/dist/styles/themes/default.css' // import '@nutui/nutui-react-taro/dist/styles/theme-default.scss' // 默认暗黑主题 // import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss' -// B 端主题 +// JMAPP 主题 // import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss' // JRKF 主题 // import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss' @@ -210,7 +210,7 @@ module.exports = { // 自动加载 css 样式文件 // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css` - // B 端主题 + // JMAPP 主题 // 自动加载 scss 样式文件 // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jmapp`, // 自动加载 css 样式文件 @@ -234,7 +234,7 @@ module.exports = { { sass: { data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";' - // B 端主题 + // JMAPP 主题 // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jmapp.scss';` // JRKF 主题 // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jrkf.scss';` From ff354d57c3453df80a1caef4b51dda5ab25d350d Mon Sep 17 00:00:00 2001 From: oasis Date: Fri, 18 Apr 2025 19:19:40 +0800 Subject: [PATCH 13/14] fix: review --- .../sites-react/doc/docs/react/official-theme-react.en-US.md | 2 +- .../sites-react/doc/docs/taro/official-theme-react.en-US.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md index beb6cefbcd..bfa9659d72 100644 --- a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md @@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing | theme description | scss file name | | --- | --- | | Jingdong APP 10.0 theme (default) | `variables.scss` | -| Jingdong JMAPP Theme | `variables-jdb.scss ` | +| Jingdong JMAPP Theme | `variables-jmapp.scss ` | ## How to use diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md index 749674d910..fe80aad6b4 100644 --- a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md @@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing | theme description | scss file name | | --- | --- | | Jingdong APP 10.0 theme (default) | `variables.scss` | -| Jingdong JMAPP Theme | `variables-jdb.scss ` | +| Jingdong JMAPP Theme | `variables-jmapp.scss ` | ## How to use From 1d33edffcb888f30c82e8ca686bac4151854b065 Mon Sep 17 00:00:00 2001 From: oasis Date: Fri, 18 Apr 2025 19:21:37 +0800 Subject: [PATCH 14/14] fix: review --- src/sites/sites-react/doc/docs/react/official-theme-react.md | 2 +- src/sites/sites-react/doc/docs/react/start-react.en-US.md | 4 ++-- src/sites/sites-react/doc/docs/taro/official-theme-react.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.md b/src/sites/sites-react/doc/docs/react/official-theme-react.md index 6459e4b0e1..c8a07ce609 100644 --- a/src/sites/sites-react/doc/docs/react/official-theme-react.md +++ b/src/sites/sites-react/doc/docs/react/official-theme-react.md @@ -9,7 +9,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | 主题说明 | scss 文件名称 | | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | -| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | +| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/h5/react/jmapp-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | | 京东 JRKF 主题 | `variables-jrkf.scss` | ## 使用方式 diff --git a/src/sites/sites-react/doc/docs/react/start-react.en-US.md b/src/sites/sites-react/doc/docs/react/start-react.en-US.md index b400a91341..f6b64ecd0f 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/start-react.en-US.md @@ -150,7 +150,7 @@ export default defineConfig({ // Handling on-demand import of SCSS files, choose one of the two methods return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` - // JDesign + // JMAPP // Handling on-demand import of CSS files, choose one of the two methods // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css` // Handling on-demand import of SCSS files, choose one of the two methods @@ -174,7 +174,7 @@ export default defineConfig({ scss: { api: 'modern-compiler', // or "modern","legacy" additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`, - // JDesign + // JMAPP // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';` // JRKF // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';` diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.md index 3636976987..8ef442c5b7 100644 --- a/src/sites/sites-react/doc/docs/taro/official-theme-react.md +++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.md @@ -9,7 +9,7 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | 主题说明 | scss 文件名称 | | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | -| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/taro/react/jdesign-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` | +| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/taro/react/jmapp-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` | ## 使用方式