feat: 拉取主分支

.gitignore

@@ -14,6 +14,7 @@ package-lock.json
 /src/packages/nutui.ts
 /src/packages/nutui.react.ts
 /src/packages/nutui.*.ts
+/src/sites/doc/docs.ts
 /tsc/test
 
 

package.json

 {
-  "name": "nutui-react",
-  "version": "1.0.0",
-  "main": "dist/nutui.react.umd.js",
-  "module": "dist/nutui.react.es.js",
+  "name": "@nutui/nutui-react",
+  "version": "0.1.0",
   "style": "dist/style.css",
-  "typings": "dist/types/src/packages/nutui.react.d.ts",
+  "main": "dist/nutui.react.umd.js",
+  "module": "dist/esm/nutui-react.es.js",
+  "typings": "dist/esm/types/src/packages/nutui.react.d.ts",
+  "sideEffects": [
+    "*.scss",
+    "dist/esm/**/style/*",
+    "dist/style.css"
+  ],
+  "description": "京东风格的轻量级移动端 React 组件库",
   "keywords": [
     "nutui",
     "nutui2",
@@ -18,6 +24,10 @@
   ],
   "author": "jdcfe",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "files": [
     "dist",
     "README.md",
@@ -27,12 +37,20 @@
   ],
   "scripts": {
     "add": "node scripts/createComponentMode.js",
+    "generate:types": "tsc && npm run replace:types",
     "generate:file": "node scripts/generate-nutui.js",
+    "generate:loader-style": "node scripts/generate-loader-style.js",
+    "replace:scss": "node scripts/replace-scss.js",
+    "replace:types": "node scripts/replace-types.js",
     "generate:themes": "node scripts/generate-themes.js",
     "checked": "npm run generate:file && tsc",
     "dev": "npm run checked && vite --open --force",
-    "build": "npm run checked && vite build --config vite.config.build.ts && tsc && npm run generate:themes",
+    "build:css": "npm run generate:themes && vite build --config vite.config.build.css.ts && npm run build:replace",
+    "build:replace": "npm run replace:scss",
+    "build:esm": "npx rollup -c rollup.config.es.js",
+    "build": "npm run checked && vite build --config vite.config.build.ts && npm run build:esm && npm run build:css && npm run generate:types && npm run generate:loader-style",
     "build:site": "npm run checked && vite build --config vite.config.build.site.ts",
+    "publish:beta": "npm publish --tag beta",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -42,27 +60,43 @@
     "*.{js,css,md}": "prettier --write"
   },
   "dependencies": {
+    "@babel/runtime": "^7.16.5",
     "@bem-react/classname": "^1.5.10",
     "@react-spring/web": "^9.3.2",
     "@use-gesture/react": "^10.2.4",
-    "classnames": "^2.3.1"
+    "classnames": "^2.3.1",
+    "react-router-dom": "^5.2.0",
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.13.13",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
     "@loadable/component": "^5.15.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@types/loadable__component": "^5.13.3",
     "@types/node": "^15.3.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-syntax-highlighter": "^13.5.2",
     "@types/react-transition-group": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
     "@typescript-eslint/parser": "^4.24.0",
+    "@vitejs/plugin-react": "^1.1.3",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "autoprefixer": "^10.4.0",
     "axios": "^0.21.1",
+    "babel-plugin-react-scoped-css": "^1.1.1",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
@@ -71,20 +105,26 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fs-extra": "^10.0.0",
+    "glob": "^7.2.0",
     "husky": "^6.0.0",
     "inquirer": "^8.0.0",
     "lint-staged": "^11.0.0",
+    "map-stream": "0.0.7",
     "marked": "^2.0.3",
+    "postcss-import": "^14.0.2",
+    "postcss-modules": "^4.2.2",
     "prettier": "2.3.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-transition-group": "^4.4.2",
-    "sass": "^1.32.13",
+    "react-markdown": "^7.1.2",
+    "react-syntax-highlighter": "^15.4.5",
+    "remark-directive": "^2.0.1",
+    "remark-gfm": "^3.0.1",
+    "sass": "^1.45.0",
     "shelljs": "^0.8.4",
     "typescript": "^4.1.2",
+    "unist-util-visit": "^4.1.0",
     "vinyl-fs": "^3.0.3",
-    "vite": "^2.1.5",
-    "vite-plugin-markdown": "^2.0.2"
+    "vite": "^2.1.5"
   }
 }

rollup.config.es.js

+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import { getBabelOutputPlugin } from '@rollup/plugin-babel'
+
+const path = require('path')
+const config = require('./src/config.json')
+const entries = { 'nutui-react.es': path.join(__dirname, `./src/packages/nutui.react.build.ts`) }
+const outputEntries = {}
+
+config.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let { name, show, type, exportEmpty } = element
+    if (show || exportEmpty) {
+      outputEntries[`./${name.toLowerCase()}`] = `./${name}`
+      entries[name] = path.join(__dirname, `./src/packages/${name.toLowerCase()}/index.ts`)
+    }
+  })
+})
+
+export default {
+  input: entries,
+  external: (id, parent) =>
+    /^react/.test(id) || /^react\-dom/.test(id) || (/^\@\/packages\/\w+$/.test(id) && !!parent),
+  output: {
+    format: 'esm',
+    dir: './dist/esm',
+    name: '[entryName].js',
+    paths: (id) => {
+      return /@\/packages/.test(id) ? outputEntries[id.replace('@/packages/', './')] + '.js' : id
+    },
+  },
+  plugins: [
+    commonjs(),
+    typescript(),
+    getBabelOutputPlugin({
+      presets: ['@babel/preset-env'],
+      plugins: [
+        '@babel/plugin-transform-runtime',
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-syntax-dynamic-import',
+      ],
+    }),
+  ],
+}

scripts/generate-loader-style.js

+const config = require('../src/config.json')
+const path = require('path')
+const fs = require('fs-extra')
+let importScssStr = `\n`
+config.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let { name, show, exportEmpty } = element
+    const nameLowerCase = name.toLowerCase()
+    const file = path.resolve(process.cwd(), `dist/esm/${name}/style/index.js`)
+    if (show || exportEmpty) {
+      importScssStr = `import '../../../packages/${nameLowerCase}/${nameLowerCase}.scss'`
+      fs.outputFileSync(file, importScssStr)
+    }
+  })
+})

scripts/generate-nutui.js

-const package = require('../package.json')
+// generate nutui.react.ts file for dev or build
 const config = require('../src/config.json')
 const path = require('path')
 const fs = require('fs-extra')
 let importStr = ``
+let importMarkdownStr = ``
+let importScssStr = `\n`
 const packages = []
+const mds = []
+
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, show, type } = element
-    if (show) {
-      importStr += `import ${name} from './${name.toLowerCase()}';\n`
+    let { name, show, type, exportEmpty } = element
+    if (show || exportEmpty) {
+      importStr += `import ${name} from '@/packages/${name.toLowerCase()}';\n`
+      importScssStr += `import '@/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss';\n`
       packages.push(name)
     }
+    if (show) {
+      importMarkdownStr += `import ${name} from '@/packages/${name.toLowerCase()}/doc.md?raw';\n`
+      mds.push(name)
+    }
   })
 })
 
-let fileStr = `${importStr}
+let fileStrBuild = `${importStr}
 export { ${packages.join(',')} };`
 
+fs.outputFile(
+  path.resolve(__dirname, '../src/packages/nutui.react.build.ts'),
+  fileStrBuild,
+  'utf8',
+  (error) => {
+    if (error) throw error
+  }
+)
+
+let fileStr = `${importStr}
+${importScssStr}
+export { ${packages.join(',')} };`
 fs.outputFile(
   path.resolve(__dirname, '../src/packages/nutui.react.ts'),
   fileStr,
@@ -25,3 +46,12 @@ fs.outputFile(
     if (error) throw error
   }
 )
+
+let mdFileStr = `${importMarkdownStr}
+export const routers = [${mds.map((m) => `'${m}'`)}]
+export const raws = {${mds.join(',')}}
+`
+
+fs.outputFile(path.resolve(__dirname, '../src/sites/doc/docs.ts'), mdFileStr, 'utf8', (error) => {
+  if (error) throw error
+})

scripts/generate-themes.js

 const config = require('../src/config.json')
 const path = require('path')
 const fs = require('fs-extra')
-let fileStr = `@import '../variables.scss';\n`
+const glob = require('glob')
+const componetsScss = glob.sync('./src/packages/**/*.scss')
 let tasks = []
+componetsScss.map((cs) => {
+  console.log(cs)
+  if (cs.indexOf('demo.scss') > -1) return
+  tasks.push(
+    fs
+      .copy(
+        path.resolve(__dirname, `.${cs}`),
+        path.resolve(__dirname, `../dist`, `${cs.replace('./src/', '')}`)
+      )
+      .catch((error) => {})
+  )
+})
+
+let fileStr = `@import '../variables.scss';\n`
+
 config.nav.map((item) => {
   item.packages.forEach((element) => {
     let folderName = element.name.toLowerCase()
-    tasks.push(
-      fs
-        .copy(
-          path.resolve(__dirname, `../src/packages/${folderName}/${folderName}.scss`),
-          path.resolve(__dirname, `../dist/packages/${folderName}/index.scss`)
-        )
-        .then((success) => {
-          fileStr += `@import '../../packages/${folderName}/index.scss';\n`
-        })
-        .catch((error) => {})
-    )
+    fileStr += `@import '../../packages/${folderName}/${folderName}.scss';\n`
+
+    // tasks.push(
+    //   fs
+    //     .copy(
+    //       path.resolve(__dirname, `../src/packages/${folderName}/${folderName}.scss`),
+    //       path.resolve(__dirname, `../dist/packages/${folderName}/${folderName}.scss`)
+    //     )
+    //     .then((success) => {
+    //       fileStr += `@import '@/packages/${folderName}/${folderName}.scss';\n`
+    //     })
+    //     .catch((error) => {})
+    // )
   })
 })
 

scripts/generate-types.js

-const config = require('../src/config.json');
-const path = require('path');
-const fs = require('fs-extra');
+const config = require('../src/config.json')
+const path = require('path')
+const fs = require('fs-extra')
 let importStr = `import { App } from 'vue';
 declare class UIComponent {
   static install(vue: App): void;
-}\n`;
-const packages = [];
-config.nav.map(item => {
-  item.packages.forEach(element => {
-    let { name, show } = element;
-    if (show) {
-      importStr += `declare class ${name} extends UIComponent {}\n`;
-      packages.push(name);
+}\n`
+const packages = []
+config.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let { name, show, exportEmpty, type } = element
+    if (show || exportEmpty) {
+      importStr += `declare class ${name} extends UIComponent {}\n`
+      packages.push(name)
     }
-  });
-});
+  })
+})
 let installFunction = `
 export interface InstallationOptions {
   locale?: any;
@@ -26,23 +26,18 @@ declare const _default: {
   install: typeof install;
   version: string;
 };
-export default _default;`;
-let fileStr = importStr + installFunction;
-fs.outputFile(
-  path.resolve(__dirname, '../dist/nutui.d.ts'),
-  fileStr,
-  'utf8',
-  error => {
-    // logger.success(`${package_config_path} 文件写入成功`);
-  }
-);
+export default _default;`
+let fileStr = importStr + installFunction
+fs.outputFile(path.resolve(__dirname, '../dist/nutui.d.ts'), fileStr, 'utf8', (error) => {
+  // logger.success(`${package_config_path} 文件写入成功`);
+})
 fs.outputFile(
   path.resolve(__dirname, '../dist/index.d.ts'),
   `import * as NutUI from './nutui';
 export default NutUI;
 export * from './nutui';`,
   'utf8',
-  error => {
+  (error) => {
     // logger.success(`${package_config_path} 文件写入成功`);
   }
-);
+)

scripts/replace-scss.js

+// replace scss alias for build
+const package = require('../package.json')
+const vfs = require('vinyl-fs')
+const map = require('map-stream')
+const dest_docs = './dist/packages'
+
+const correctionImport = function (file, cb) {
+  const contents = file.contents
+    .toString()
+    .replaceAll('@/packages', `${package.name}/dist/packages`)
+    .replaceAll('@/styles', `${package.name}/dist/styles`)
+  file.contents = Buffer.from(contents, 'utf8')
+  cb(null, file)
+}
+vfs
+  .src(['./src/packages/**/*.scss', '!./src/packages/**/demo.scss'])
+  .pipe(map(correctionImport))
+  .pipe(vfs.dest(dest_docs))
+  .on('end', () => {})

scripts/replace-types.js

+// replace types alias for build
+const vfs = require('vinyl-fs')
+const map = require('map-stream')
+const dest_docs = './dist/esm/types/src/packages'
+
+vfs
+  .src(['./dist/esm/types/src/packages/nutui.react.d.ts'])
+  .pipe(
+    map((file, cb) => {
+      const contents = file.contents
+        .toString()
+        .replaceAll('@/packages', `.`)
+        .replace(/import\s(.*)?\.scss\'\;[\t\n]/g, '')
+      file.contents = Buffer.from(contents, 'utf8')
+      cb(null, file)
+    })
+  )
+  .pipe(vfs.dest(dest_docs, { overwrite: true }))
+  .on('end', () => {})
+
+vfs
+  .src(['./dist/esm/types/src/packages/**/*.d.ts', '!./dist/esm/types/src/packages/*.d.ts'])
+  .pipe(
+    map((file, cb) => {
+      const contents = file.contents.toString().replaceAll('@/packages', `..`)
+      file.contents = Buffer.from(contents, 'utf8')
+      cb(null, file)
+    })
+  )
+  .pipe(vfs.dest(dest_docs, { overwrite: true }))
+  .on('end', () => {})

scripts/sync-docs.js

@@ -12,7 +12,7 @@ const tmp = '/tmp'
 const repo = 'nutui-docs'
 const base = process.cwd()
 const components = path.join(base, 'src/packages')
-const dest_docs = path.join(tmp, `${repo}/src/doc_react/docs`)
+const dest_docs = path.join(tmp, `${repo}/src/docs_react/docs`)
 
 async function sync_docs() {
   const rm_dest_result = await rm(path.join(tmp, repo), {

scripts/vite-demo-plugin.ts

+const fileRegex = /demo\.tsx$/
+
+export default function viteDemoPlugin() {
+  return {
+    name: 'viteDemoPlugin',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        // custom handle request...
+        if (req.url.indexOf('demo.scss') > -1) {
+          req.redirect(req.url.replace('demo.scss', 'demo.module.scss'))
+        }
+        next()
+      })
+    },
+    transform(src, id) {
+      if (fileRegex.test(id)) {
+        return {
+          code: src,
+          map: null, // 如果可行将提供 source map
+        }
+      }
+    },
+  }
+}

src/config.json

 {
-  "versions": [
-    {
-      "name": "1.x",
-      "link": "/1x/"
-    },
-    {
-      "name": "2.x",
-      "link": "/"
-    },
-    {
-      "name": "3.x",
-      "link": "/3x/"
-    },
-    {
-      "name": "nutui-jdl",
-      "link": "/jdl/"
-    },
-    {
-      "name": "nutui-react",
-      "link": "https://github.com/jdf2e/nutui/tree/nutui-react"
-    }
-  ],
-  "header": [
-    {
-      "name": "guide",
-      "cName": "指南",
-      "path": "/intro"
-    },
-    {
-      "name": "intro",
-      "cName": "组件",
-      "path": "/intro"
-    },
-    {
-      "name": "example",
-      "cName": "示例",
-      "path": "/"
-    },
-    {
-      "name": "resource",
-      "cName": "资源",
-      "path": "/resource"
-    }
-  ],
   "docs": {
     "name": "指南",
     "packages": [
       {
-        "name": "intro",
+        "name": "intro-react",
         "cName": "介绍",
         "show": true
       },
       {
-        "name": "start",
+        "name": "start-react",
         "cName": "快速上手",
         "show": true
       },
       {
-        "name": "theme",
+        "name": "theme-react",
         "cName": "主题定制",
         "show": true
       },
@@ -72,7 +28,7 @@
         "show": true
       },
       {
-        "name": "https://github.com/jdf2e/nutui/releases",
+        "name": "https://github.com/jdf2e/nutui-react/releases",
         "cName": "更新日志",
         "show": true,
         "isLink": true
@@ -84,7 +40,7 @@
       "name": "基础组件",
       "packages": [
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Avatar",
           "type": "component",
           "cName": "头像",
@@ -94,7 +50,7 @@
           "author": "junjun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Button",
           "type": "component",
           "cName": "按钮",
@@ -104,27 +60,38 @@
           "author": ""
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Cell",
           "type": "component",
-          "cName": "列表组件",
+          "cName": "单元格",
           "desc": "列表项，可组成列表",
           "sort": 2,
           "show": true,
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
+          "name": "CellGroup",
+          "type": "component",
+          "cName": "单元格",
+          "desc": "列表项，可组成列表",
+          "sort": 2,
+          "show": false,
+          "exportEmpty": true,
+          "author": "songsong"
+        },
+        {
+          "version": "0.1.0",
           "name": "Icon",
           "type": "component",
-          "cName": "图标组件",
-          "desc": "图标",
+          "cName": "图标",
+          "desc": "基于 IconFont 字体的图标集",
           "sort": 1,
           "show": true,
           "author": "oasis-cloud"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Price",
           "type": "component",
           "cName": "价格",
@@ -134,7 +101,7 @@
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Overlay",
           "type": "component",
           "cName": "遮罩层",
@@ -144,7 +111,7 @@
           "author": "junjun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Divider",
           "type": "component",
           "cName": "分割线",
@@ -159,7 +126,7 @@
       "name": "布局组件",
       "packages": [
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Layout",
           "type": "component",
           "cName": "布局",
@@ -169,23 +136,25 @@
           "author": "yushuang24"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Row",
           "type": "component",
           "cName": "行",
           "desc": "布局组件中的行",
           "sort": 2,
-          "show": true,
+          "show": false,
+          "exportEmpty": true,
           "author": "yushuang24"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Col",
           "type": "component",
           "cName": "列",
           "desc": "布局组件中的列",
           "sort": 3,
-          "show": true,
+          "show": false,
+          "exportEmpty": true,
           "author": "yushuang24"
         }
       ]
@@ -194,7 +163,7 @@
       "name": "操作反馈",
       "packages": [
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Drag",
           "type": "component",
           "cName": "拖拽",
@@ -204,7 +173,7 @@
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Collapse",
           "type": "component",
           "cName": "折叠面板",
@@ -214,7 +183,7 @@
           "author": "zhenyulei"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Toast",
           "type": "component",
           "cName": "吐司",
@@ -224,7 +193,7 @@
           "author": "VickyYe"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "BackTop",
           "type": "component",
           "cName": "返回顶部",
@@ -234,7 +203,7 @@
           "author": "vickyYe"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Range",
           "type": "component",
           "cName": "区间选择器",
@@ -244,7 +213,7 @@
           "author": "vickyYe"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Infiniteloading",
           "type": "component",
           "cName": "滚动加载",
@@ -254,7 +223,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Steps",
           "type": "component",
           "cName": "步骤条",
@@ -264,17 +233,28 @@
           "author": "swag~jun"
         },
         {
-          "version": "1.0.0",
+          "version": "3.0.0",
+          "name": "Step",
+          "sort": 17,
+          "cName": "步骤条子组件",
+          "type": "component",
+          "show": false,
+          "exportEmpty": true,
+          "desc": "步骤条子组件",
+          "author": "swag~jun"
+        },
+        {
+          "version": "0.1.0",
           "name": "CircleProgress",
           "type": "component",
-          "cName": "进度条",
+          "cName": "环形进度条",
           "desc": "展示操作或任务的当前进度。",
           "sort": 7,
           "show": true,
           "author": "swag~jun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Popup",
           "sort": 9,
           "cName": "弹出层",
@@ -284,7 +264,7 @@
           "author": "szg2008"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "ActionSheet",
           "type": "component",
           "cName": "动作面板",
@@ -294,17 +274,17 @@
           "author": "dsj"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "NoticeBar",
           "type": "component",
-          "cName": "通告栏",
+          "cName": "公告栏",
           "desc": "用于循环播放展示一组消息通知。",
           "sort": 11,
           "show": true,
           "author": "vickyYe"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Notify",
           "type": "component",
           "cName": "消息通知",
@@ -314,17 +294,17 @@
           "author": "vickyYE"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Dialog",
           "type": "component",
           "cName": "对话框",
-          "desc": "对话框",
+          "desc": "模态对话框",
           "sort": 12,
           "show": true,
           "author": "yangjinjun3"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Switch",
           "type": "component",
           "cName": "开关",
@@ -334,14 +314,36 @@
           "author": "dsj"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "CollapseItem",
           "type": "component",
           "cName": "折叠面板子组件",
           "desc": "折叠面板的子组件",
           "sort": 13,
           "show": false,
+          "exportEmpty": true,
           "author": "zhenyulei"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Swiper",
+          "type": "component",
+          "cName": "轮播",
+          "desc": "轮播组件",
+          "sort": 14,
+          "show": true,
+          "author": "liukun"
+        },
+        {
+          "version": "1.0.0",
+          "name": "SwiperItem",
+          "type": "component",
+          "cName": "轮播子组件",
+          "desc": "轮播子组件",
+          "sort": 14,
+          "show": false,
+          "exportEmpty": true,
+          "author": "liukun"
         }
       ]
     },
@@ -349,27 +351,38 @@
       "name": "导航组件",
       "packages": [
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "NavBar",
           "type": "component",
-          "cName": "导航组件",
+          "cName": "头部导航",
           "desc": "提供导航功能。",
           "sort": 1,
           "show": true,
           "author": "dsj"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Tabbar",
           "type": "component",
-          "cName": "标签栏组件",
+          "cName": "标签栏",
           "desc": "底部导航常用场景",
           "sort": 2,
           "show": true,
           "author": "dsj"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
+          "name": "TabbarItem",
+          "sort": 2,
+          "cName": "标签栏子组件",
+          "type": "component",
+          "show": false,
+          "exportEmpty": true,
+          "desc": "标签栏子组件",
+          "author": "dsj"
+        },
+        {
+          "version": "0.1.0",
           "name": "InputNumber",
           "type": "component",
           "cName": "数字输入框",
@@ -379,7 +392,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Elevator",
           "type": "component",
           "cName": "电梯楼层",
@@ -389,7 +402,7 @@
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "FixedNav",
           "type": "component",
           "cName": "悬浮导航",
@@ -399,10 +412,10 @@
           "author": "Ymm0008"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Pagination",
           "type": "component",
-          "cName": "分页组件",
+          "cName": "分页",
           "desc": "当数据量较多时，采用分页的形式分隔长列表。",
           "sort": 6,
           "show": true,
@@ -414,7 +427,7 @@
       "name": "数据录入",
       "packages": [
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Rate",
           "type": "component",
           "cName": "评分",
@@ -424,7 +437,7 @@
           "author": "dsj"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Uploader",
           "type": "component",
           "cName": "上传",
@@ -434,7 +447,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Input",
           "type": "component",
           "cName": "输入框",
@@ -444,7 +457,7 @@
           "author": "VickyYe"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "TextArea",
           "type": "component",
           "cName": "文本域",
@@ -454,8 +467,8 @@
           "author": "VickyYe"
         },
         {
-          "version": "1.0.0",
-          "name": "CheckBox",
+          "version": "0.1.0",
+          "name": "Checkbox",
           "type": "component",
           "cName": "复选按钮",
           "desc": "多选按钮用于选择。",
@@ -464,7 +477,18 @@
           "author": "oasis"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
+          "name": "CheckboxGroup",
+          "type": "component",
+          "cName": "多选按钮组",
+          "desc": "多选按钮组",
+          "sort": 11,
+          "show": false,
+          "exportEmpty": true,
+          "author": "oasis"
+        },
+        {
+          "version": "0.1.0",
           "name": "Tag",
           "type": "component",
           "cName": "标签",
@@ -474,7 +498,17 @@
           "author": "lzz"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
+          "name": "Popover",
+          "type": "component",
+          "cName": "气泡弹出框",
+          "desc": "气泡弹出框",
+          "sort": 19,
+          "show": true,
+          "author": "lzz"
+        },
+        {
+          "version": "0.1.0",
           "name": "Badge",
           "type": "component",
           "cName": "徽标",
@@ -484,7 +518,7 @@
           "author": "lzz"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "AnimatingNumbers",
           "type": "component",
           "cName": "数字动画",
@@ -494,7 +528,7 @@
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Radio",
           "type": "component",
           "cName": "单选按钮",
@@ -504,21 +538,22 @@
           "author": "oasis"
         },
         {
-          "version": "1.0.0",
-          "name": "Picker",
+          "version": "0.1.0",
+          "name": "RadioGroup",
           "type": "component",
-          "cName": "选择器",
-          "desc": "提供多个选项集合供用户选择其中一项。",
+          "cName": "单选按钮组",
+          "desc": "单选按钮组",
           "sort": 10,
-          "show": true,
-          "author": "dsj"
+          "exportEmpty": true,
+          "show": false,
+          "author": "oasis"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "ShortPassword",
           "type": "component",
           "cName": "短密码",
-          "desc": "",
+          "desc": "短密码输入框",
           "sort": 10,
           "show": true,
           "author": "Drjingfubo"
@@ -531,6 +566,26 @@
           "sort": 10,
           "show": true,
           "author": "szg2008"
+        },
+        {
+          "name": "CalendarItem",
+          "type": "component",
+          "cName": "日历",
+          "desc": "日历，可平铺/弹窗展示",
+          "sort": 10,
+          "show": false,
+          "exportEmpty": true,
+          "author": "szg2008"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Picker",
+          "type": "component",
+          "cName": "选择器",
+          "desc": "提供多个选项集合供用户选择其中一项。",
+          "sort": 10,
+          "show": true,
+          "author": "dsj"
         }
       ]
     },
@@ -538,17 +593,17 @@
       "name": "特色组件",
       "packages": [
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Signature",
           "type": "component",
-          "cName": "签字",
+          "cName": "签名",
           "desc": "基于Canvas的签名组件",
           "sort": 1,
           "show": true,
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Barrage",
           "type": "component",
           "cName": "弹幕",
@@ -558,10 +613,10 @@
           "author": "swag~jun"
         },
         {
-          "version": "1.0.0",
+          "version": "0.1.0",
           "name": "Address",
           "type": "component",
-          "cName": "地址组件",
+          "cName": "地址",
           "desc": "地址组件",
           "sort": 3,
           "show": true,

src/packages/actionsheet/actionsheet.scss

+@import '../popup/popup.scss';
 .nut-actionsheet {
   display: block;
   .nut-actionsheet__title {

src/packages/actionsheet/actionsheet.tsx

 import React, { FunctionComponent, useState, useEffect } from 'react'
 import Popup from '@/packages/popup'
-import './actionsheet.scss'
 import bem from '@/utils/bem'
 
 export type ItemType<T> = { [key: string]: T }

src/packages/address/address.scss

+@import '../icon/icon.scss';
+@import '../popup/popup.scss';
+@import '../elevator/elevator.scss';
 .nut-address {
   display: block;
   &__header {

src/packages/address/address.tsx

@@ -4,7 +4,6 @@ import Popup from '@/packages/popup'
 import bem from '@/utils/bem'
 import { ExistRender } from './existRender'
 import { CustomRender } from './customRender'
-import './address.scss'
 
 export interface RegionData {
   name?: string

src/packages/address/customRender.tsx

@@ -2,7 +2,6 @@ import React, { FunctionComponent, useEffect, useState, useRef } from 'react'
 import Icon from '@/packages/icon'
 import bem from '@/utils/bem'
 import Elevator from '@/packages/elevator'
-import './address.scss'
 import { RegionData } from './address'
 
 interface CustomRegionData {

src/packages/address/doc.md

-#  Address组件
+#  Address 地址
 
 ### 介绍
 
-按需加载请加载对应依赖组件 Icon Popup Elevator
+地址选择
+
 
 ### 安装
 ``` javascript

src/packages/address/existRender.tsx

 import React, { FunctionComponent, useEffect, useState, useRef } from 'react'
 import Icon from '@/packages/icon'
 import bem from '@/utils/bem'
-import './address.scss'
 import { AddressList } from './address'
 
 export interface ExistRenderProps {

src/packages/animatingnumbers/animatingnumbers.scss

+@import '@/packages/animatingnumbers/countup.scss';
 .nut-animatingnumbers {
 }

src/packages/animatingnumbers/animatingnumbers.tsx

 import React, { FunctionComponent, Component } from 'react'
-import './animatingnumbers.scss'
 
 import { CountUp } from './countup'
 

src/packages/animatingnumbers/countup.tsx

 import React, { CSSProperties, FunctionComponent, useEffect, useRef, useState } from 'react'
-import './countup.scss'
+
 import bem from '@/utils/bem'
 
 export interface CountUpProps {

src/packages/animatingnumbers/doc.md

-# AnimatingNumbers 组件
+# AnimatingNumbers 数字动画
 
 ### 介绍
 

src/packages/avatar/avatar.tsx

 import React, { FunctionComponent, MouseEventHandler } from 'react'
 import Icon from '@/packages/icon'
 import classNames from 'classnames'
-import './avatar.scss'
 
 export interface AvatarProps {
   size: AvatarSize

src/packages/backtop/backtop.scss

+@import '../icon/icon.scss';
 .nut-backtop {
   display: none;
   position: fixed;

src/packages/backtop/backtop.tsx

-import React, {
-  FunctionComponent,
-  useLayoutEffect,
-  useEffect,
-  useState,
-  useRef,
-  CSSProperties,
-} from 'react'
-import './backtop.scss'
-import Icon from '../icon'
-import classNames from 'classnames'
+import React, { FunctionComponent, useEffect, useState, CSSProperties } from 'react'
+
+import Icon from '@/packages/icon'
 declare const window: any
 export interface BackTopProps {
   className?: string

src/packages/backtop/doc.md

-# BackTop 组件
+# BackTop 返回顶部
 
 ### 介绍
 

src/packages/badge/badge.tsx

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from 'react'
-import './badge.scss'
+
 import Icon from '@/packages/icon'
 export interface BadgeProps {
   value: any

src/packages/barrage/barrage.tsx

 import React, { ForwardRefRenderFunction, useEffect, useRef, useImperativeHandle } from 'react'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
-import './barrage.scss'
 
 export interface BarrageProps {
   className: string

src/packages/barrage/demo.scss

-.nut-cell,
-.nut-barrage {
+.barrage-demo-wrap,
+.barrage-demo {
   padding: 20px 0;
   height: 150px;
 }

src/packages/barrage/demo.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import Cell from '@/packages/cell'
 import { Barrage } from './barrage'
 import Button from '@/packages/button'
-import './demo.scss'
+import './demo.scss?module'
 
 interface barrageRefState {
   add: (word: string) => void
@@ -21,8 +21,8 @@ const BarrageDemo = () => {
     <>
       <div className="demo">
         <h2>基础用法</h2>
-        <Cell>
-          <Barrage ref={barrageRef} barrageList={list}></Barrage>
+        <Cell className={'barrage-demo-wrap'}>
+          <Barrage className={'barrage-demo'} ref={barrageRef} barrageList={list}></Barrage>
         </Cell>
         <div className="test" style={{ textAlign: 'center' }}>
           <Button type="danger" onClick={addBarrage}>

src/packages/button/button.scss

+@import '../icon/icon.scss';
 .nut-button {
   position: relative;
   display: inline-block;

src/packages/button/button.tsx

 import React, { CSSProperties, FunctionComponent, useEffect, useState } from 'react'
-import './button.scss'
 import Icon from '@/packages/icon'
 export interface ButtonProps {
   className: string

src/packages/calendar/calendar.scss

@@ -196,3 +196,4 @@
     }
   }
 }
+@import '@/packages/calendaritem/calendaritem.scss';

src/packages/calendar/calendar.tsx

@@ -2,7 +2,6 @@ import React, { FunctionComponent } from 'react'
 import Popup from '@/packages/popup'
 import CalendarItem from '@/packages/calendaritem'
 import Utils from '@/utils/date'
-import './calendar.scss'
 
 export interface CalendarProps {
   type?: string

src/packages/calendaritem/calendaritem.tsx

 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
-import './calendaritem.scss'
 import Utils from '@/utils/date'
-import requestAniFrame from '../../utils/raf'
+import requestAniFrame from '@/utils/raf'
 
 type InputDate = string | string[]
 

src/packages/cell/cell.tsx

 import React, { FunctionComponent, CSSProperties, ReactNode } from 'react'
 import { useHistory } from 'react-router-dom'
-import './cell.scss'
+
 import bem from '@/utils/bem'
 import { Icon } from '../icon/icon'
 

src/packages/cellgroup/cellgroup.tsx

 import React, { FunctionComponent } from 'react'
-import './cellgroup.scss'
+
 import bem from '@/utils/bem'
 
 export interface CellGroupProps {

src/packages/checkbox/checkbox.scss

+@import '@/packages/icon/icon.scss';
 .nut-checkbox {
   display: flex;
   align-items: center;

src/packages/checkbox/checkbox.tsx

 import React, { FunctionComponent, useEffect, useState } from 'react'
 import Icon from '../icon'
-import { CheckboxGroup } from '@/packages/checkboxgroup/checkboxgroup'
-import './checkbox.scss'
+import CheckboxGroup from '@/packages/checkboxgroup'
+
 import bem from '@/utils/bem'
 
 export interface CheckBoxProps {

src/packages/checkbox/doc.md

@@ -7,7 +7,7 @@
 ### 安装
 
 ``` ts
-import { Checkbox,CheckBoxGroup,Icon } from '@nutui/nutui-react';
+import { Checkbox, CheckBoxGroup } from '@nutui/nutui-react';
 
 ```
 

src/packages/checkboxgroup/checkboxgroup.tsx

 import React, { FunctionComponent, useEffect, useImperativeHandle, useState } from 'react'
-import '../checkbox/checkbox.scss'
 import bem from '@/utils/bem'
 
 export interface CheckBoxGroupProps {

src/packages/checkboxgroup/index.ts

+import { CheckboxGroup } from './checkboxgroup'
+export default CheckboxGroup

src/packages/circleprogress/circleprogress.tsx

 import React, { FunctionComponent } from 'react'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
-import './circleprogress.scss'
 
 export interface CircleProgressProps {
   strokeInnerWidth: string | number

src/packages/col/col.scss

@@ -15,10 +15,10 @@
 
 @for $i from 1 through 24 {
   .nut-col-offset-#{$i} {
-    margin-left: 100/ 24 * $i * 1%;
+    margin-left: calc(100 / 24) * $i * 1%;
   }
 
   .nut-col-#{$i} {
-    width: 100/ 24 * $i * 1%;
+    width: calc(100 / 24) * $i * 1%;
   }
 }

src/packages/col/col.tsx

 import React, { FunctionComponent, useEffect, useState, CSSProperties, useContext } from 'react'
 import { DataContext } from '@/packages/row/UserContext'
-import './col.scss'
 
 export interface ColProps {
   span: string | number

src/packages/collapse/collapse.scss

+@import '@/packages/collapseitem/collapseitem.scss';

src/packages/collapse/collapse.tsx

 import React, { FunctionComponent, useEffect, useState, memo } from 'react'
-import './collapse.scss'
+
 import bem from '@/utils/bem'
 
 export interface CollapseProps {

src/packages/collapse/doc.md

-#  Collapse组件
+#  Collapse 折叠面板
 
 ### 介绍
 

src/packages/collapseitem/collapseitem.tsx

 import React, { FunctionComponent, useEffect, useState, useCallback } from 'react'
-import './collapseItem.scss'
+
 import bem from '@/utils/bem'
 import Icon from '../icon'
 

src/packages/dialog/dialog.tsx

 import React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react'
 import classNames from 'classnames'
 import Button from '@/packages/button'
-import './dialog.scss'
 import { DialogWrapper } from './DialogWrapper'
 import confirm from './Confirm'
 import { DialogProps, DialogReturnProps, DialogComponent, ConfirmProps } from './config'

src/packages/dialog/doc.md

@@ -8,7 +8,9 @@
 
 ### 安装
 
-`import { Dialog } from 'nutui-react'`
+```js
+import { Dialog } from '@nutui/nutui-react'
+```
 
 
 ## 代码演示
@@ -101,6 +103,6 @@ return <>
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| onOk  | 确定按钮回调 | (e?: MouseEvent) => Promise<any> | void |
+| onOk  | 确定按钮回调 | (e?: MouseEvent) => Promise | void |
 | onCancel  | 取消按钮回调 | () => void |
 | onClosed  | 关闭回调，任何情况关闭弹窗都会触发 | Function |

src/packages/divider/divider.tsx

 import React, { FunctionComponent } from 'react'
-import './divider.scss'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
 

src/packages/drag/doc.md

@@ -60,6 +60,7 @@ const bottom = () => {
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
+| --------------- | ----------------------------- | ------- | ------ |
 | attract | 是否开启自动吸边 | Boolean | false |
-| direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一 | String |'all' |
+| direction | 拖拽元素的拖拽方向限制，x、y、all三选一 | String |'all' |
 | boundary | 拖拽元素的拖拽边界 | Object | {top: 0,left: 0,right: 0,bottom: 0} |

src/packages/elevator/elevator.tsx

 import React, { FunctionComponent, useRef, useEffect, useState } from 'react'
-import './elevator.scss'
 import bem from '@/utils/bem'
 
 export interface ElevatorProps {

src/packages/fixednav/fixednav.tsx

@@ -4,8 +4,6 @@ import bem from '@/utils/bem'
 import classNames from 'classnames'
 import { Overlay } from '../overlay/overlay'
 
-import './fixednav.scss'
-
 type Direction = 'right' | 'left'
 type Position = {
   top?: string

src/packages/icon/doc.md

-# Icon 图标组件
+# Icon 图标
 
 ### 介绍
 

src/packages/icon/icon.tsx

 import React, { FunctionComponent, ReactHTML } from 'react'
 import bem from '@/utils/bem'
-import './icon.scss'
 
 interface IconProps {
   name: string

src/packages/infiniteloading/infiniteloading.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef, FunctionComponent } from 'react'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
 import Icon from '@/packages/icon'
-import './infiniteloading.scss'
 
 export interface InfiniteloadingProps {
   hasMore: boolean

src/packages/input/doc.md

-# Input 输入框组件
+# Input 输入框
 
 ### 介绍
 

src/packages/input/input.tsx

 import React, { CSSProperties, FunctionComponent, useEffect, useState } from 'react'
-import './input.scss'
+
 import bem from '@/utils/bem'
 import { formatNumber } from './util'
-import Icon from '../icon'
+import Icon from '@/packages/icon'
 import classNames from 'classnames'
 
 export interface InputProps {

src/packages/inputnumber/inputnumber.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, FunctionComponent, ChangeEvent, FocusEvent
 import Icon from '@/packages/icon'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
-import './inputnumber.scss'
 
 export interface InputNumberProps {
   disabled: boolean

src/packages/layout/doc.md

-#  Layout布局
+#  Layout 布局
 
 ### 介绍
 

src/packages/layout/layout.tsx

 import React, { FunctionComponent } from 'react'
-import './layout.scss'
 
 export interface LayoutProps {}
 const defaultProps = {} as LayoutProps

src/packages/navbar/navbar.tsx

 import React, { FunctionComponent } from 'react'
 import Icon from '../icon'
 import bem from '@/utils/bem'
-import './navbar.scss'
+
 import classNames from 'classnames'
 
 export interface NavBarProps {

src/packages/noticebar/doc.md

-#  NoticeBar通告栏
+#  NoticeBar 公告栏
 
 ### 介绍
 

src/packages/noticebar/noticebar.tsx

@@ -7,7 +7,7 @@ import React, {
   MouseEvent,
   CSSProperties,
 } from 'react'
-import './noticebar.scss'
+
 import { number } from 'prop-types'
 import Icon from '../icon'
 import bem from '@/utils/bem'

src/packages/notify/Notification.tsx

 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import bem from '@/utils/bem'
-import './notify.scss'
+
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 export interface NotificationProps {

src/packages/overlay/doc.md

-# Overlay 组件
+# Overlay 遮罩层
 
 ### 介绍
 

src/packages/overlay/overlay.tsx

 import React, { FunctionComponent, MouseEventHandler, useEffect, useRef, useState } from 'react'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
-import './overlay.scss'
 
 export interface OverlayProps {
   zIndex: number

src/packages/pagination/demo.tsx

 import React, { useState } from 'react'
-import { Pagination } from './pagination'
+import Pagination from '@/packages/pagination'
 import Icon from '@/packages/icon'
 const PaginationDemo = () => {
   const [currentPage1, setCurrent1] = useState(1)

src/packages/pagination/pagination.tsx

 import React, { FunctionComponent, useEffect, useState } from 'react'
 import Icon from '../icon'
-import './pagination.scss'
+
 import bem from '@/utils/bem'
 export interface PaginationProps {
   defaultValue: number

src/packages/picker/doc.md

-#  Picker选择器
+#  Picker 选择器
 
 ### 介绍
 

src/packages/picker/index.ts

 import Picker from './picker'
-import './picker.scss'
 
 export default Picker

src/packages/picker/picker.scss

+@import '../popup/popup.scss';
 .nut-picker {
   background-color: #fff;
   width: 100%;

src/packages/picker/picker.tsx

@@ -6,7 +6,6 @@ import React, {
   useImperativeHandle,
   ForwardRefRenderFunction,
 } from 'react'
-import './picker.scss'
 import Popup from '@/packages/popup'
 import PickerSlot from './pickerSlot'
 import bem from '@/utils/bem'

src/packages/popover/popover.scss

+@import '@/packages/icon/icon.scss';
 .popBox {
   // background: skyblue;
   // // background: #fff;

src/packages/popover/popover.tsx

@@ -8,7 +8,6 @@ import React, {
 } from 'react'
 import Trigger from './Trigger'
 import ReactDOM from 'react-dom'
-import './popover.scss'
 import Icon from '@/packages/icon'
 export interface PopoverProps {
   list: Array<any>

src/packages/popup/doc.md

-<!--
- * @Author: your name
- * @Date: 2021-12-01 09:41:23
- * @LastEditTime: 2021-12-28 09:50:26
- * @LastEditors: your name
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /nutui-react/src/packages/popup/doc.md
--->
 # Popup 弹出层
 
 ### 介绍

src/packages/popup/popup.scss

+@import '../icon/icon.scss';
+@import '../overlay/overlay.scss';
 .popup-slide {
   &-center-enter,
   &-center-exit {

src/packages/popup/popup.tsx

@@ -12,7 +12,7 @@ import Icon from '@/packages/icon'
 import Overlay from '@/packages/overlay'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
-import './popup.scss'
+
 import { EnterHandler, ExitHandler } from 'react-transition-group/Transition'
 
 interface PopupProps extends OverlayProps {

src/packages/price/doc.md

-# Price 商品价格
+# Price 价格
 
 ### 介绍
 

src/packages/price/price.tsx

 import React, { FunctionComponent } from 'react'
-import './price.scss'
+
 import bem from '@/utils/bem'
 
 export interface PriceProps {

src/packages/radio/demo.tsx

@@ -16,14 +16,16 @@ const RadioDemo = () => {
   return (
     <>
       <div className="demo full">
-        <CellGroup title="基本用法">
+        <h2>基本用法</h2>
+        <CellGroup>
           <Cell>
             <Radio checked={checked1} value="1">
               选项1
             </Radio>
           </Cell>
         </CellGroup>
-        <CellGroup title="基本用法">
+        <h2>基本用法</h2>
+        <CellGroup>
           <Cell>
             <RadioGroup value={'1'}>
               <Radio value="1">选项1</Radio>
@@ -56,7 +58,8 @@ const RadioDemo = () => {
             </RadioGroup>
           </Cell>
         </CellGroup>
-        <CellGroup title="水平使用">
+        <h2>水平使用</h2>
+        <CellGroup>
           <Cell>
             <RadioGroup value="1" direction="horizontal">
               <Radio value="1">选项1</Radio>
@@ -85,7 +88,8 @@ const RadioDemo = () => {
             </RadioGroup>
           </Cell>
         </CellGroup>
-        <CellGroup title="自定义尺寸">
+        <h2>自定义尺寸</h2>
+        <CellGroup>
           <Cell>
             <RadioGroup value="2">
               <Radio value="1" iconSize="24">
@@ -97,7 +101,8 @@ const RadioDemo = () => {
             </RadioGroup>
           </Cell>
         </CellGroup>
-        <CellGroup title="Radio自定义图标">
+        <h2>Radio自定义图标</h2>
+        <CellGroup>
           <Cell>
             <RadioGroup value="1">
               <Radio value="1" iconName="checklist" icon-active-name="checklist">
@@ -109,7 +114,8 @@ const RadioDemo = () => {
             </RadioGroup>
           </Cell>
         </CellGroup>
-        <CellGroup title="触发事件">
+        <h2>触发事件</h2>
+        <CellGroup>
           <Cell>
             <RadioGroup value={radioVal} onChange={handleChange}>
               <Radio value={1}>触发事件</Radio>

src/packages/radio/radio.tsx

 import React, { FunctionComponent, MouseEventHandler, useContext, useEffect, useState } from 'react'
 import Icon from '../icon'
-import './radio.scss'
+
 import RadioContext from './context'
-import { RadioGroup } from '@/packages/radio/radiogroup'
+import RadioGroup from '@/packages/radiogroup'
 
 type Shape = 'button' | 'round'
 type Position = 'right' | 'left'

src/packages/radiogroup/index.ts

+import { RadioGroup } from './radiogroup'
+export default RadioGroup

src/packages/radio/radiogroup.tsx → src/packages/radiogroup/radiogroup.tsx

 import React, { FunctionComponent, useEffect, useImperativeHandle, useState } from 'react'
-import RadioContext from './context'
-import './radiogroup.scss'
+import RadioContext from '../radio/context'
+
 import bem from '@/utils/bem'
 
 type Position = 'left' | 'right'

src/packages/range/demo.tsx

 import React, { useState } from 'react'
 import { Range } from './range'
 import { Cell } from '../cell/cell'
-import './custom.scss'
+
 import Toast from '../toast'
 
 const RangeDemo = () => {

src/packages/range/range.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactNode,
   CSSProperties,
 } from 'react'
-import './range.scss'
+
 import bem from '@/utils/bem'
 import { useTouch } from '../../utils/useTouch'
 import { useRect } from '../../utils/useRect'

src/packages/rate/doc.md

-#  Rate组件
+#  Rate 评分
 
 ### 介绍
 

src/packages/rate/rate.tsx

 import React, { FunctionComponent, useEffect, useState } from 'react'
-import './rate.scss'
+
 import bem from '@/utils/bem'
 import Icon from '../icon'
 

src/packages/row/row.tsx

 import React, { FunctionComponent } from 'react'
 import { DataContext } from './UserContext'
-import './row.scss'
 
 export interface RowProps {
   type: string

src/packages/shortpassword/doc.md

-#  ShortPassword组件
+#  ShortPassword 短密码
 
 ### 介绍
 
 短密码输入框，可用于输入密码、短信验证码等
 
 ### 安装
-import { ShortPassword } from '@nutui/nutui-react';
+```js
+import { Shortpassword } from '@nutui/nutui-react';
+```
 
 
 ## 代码演示
 
 ### 基础用法
 ```tsx
-const ShortPassword = () => {
+const Shortpassword = () => {
   const [visible,setVisible] = useState(false)
   const [value,setValue] = useState('')
   cosnt change = (value)=>{
@@ -20,7 +22,7 @@ const ShortPassword = () => {
   }
   return 
     <>
-        <ShortPassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)}></ShortPassword>
+        <Shortpassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)}></Shortpassword>
     </>
 }
 
@@ -28,7 +30,7 @@ const ShortPassword = () => {
 
 ### 显示按钮组
 ```tsx
-const ShortPassword = () => {
+const Shortpassword = () => {
   const [visible,setVisible] = useState(false)
   const [value,setValue] = useState('')
   cosnt change = (value)=>{
@@ -36,7 +38,7 @@ const ShortPassword = () => {
   }
   return
      <>
-        <ShortPassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)} noButton={false}></ShortPassword>
+        <Shortpassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)} noButton={false}></Shortpassword>
     </>
 }
 
@@ -44,7 +46,7 @@ const ShortPassword = () => {
 
 ### 自定义密码长度4
 ```tsx
-const ShortPassword = () => {
+const Shortpassword = () => {
   const [visible,setVisible] = useState(false)
   const [value,setValue] = useState('')
   cosnt change = (value)=>{
@@ -52,14 +54,14 @@ const ShortPassword = () => {
   }
   return 
     <>
-        <ShortPassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)} length={4}></ShortPassword>
+        <Shortpassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)} length={4}></Shortpassword>
     </>
 }
 
 ```
 ### 忘记密码提示语事件回调
 ```tsx
-const ShortPassword = () => {
+const Shortpassword = () => {
   const [visible,setVisible] = useState(false)
   const [value,setValue] = useState('')
    const onTips = ()=>{
@@ -70,7 +72,7 @@ const ShortPassword = () => {
   }
   return 
     <>
-        <ShortPassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)} onTips={()=>onTips()}></ShortPassword>
+        <Shortpassword visible={visible} modelValue={value} onClose={()=>setVisible(false)} change={(value)=>change(value)} onTips={()=>onTips()}></Shortpassword>
     </>
 }
 

src/packages/shortpassword/shortpassword.scss

+@import '../icon/icon.scss';
+@import '../popup/popup.scss';
 .nut-shortpassword {
   &__title {
     line-height: 1;

src/packages/shortpassword/shortpassword.tsx

@@ -2,7 +2,6 @@ import React, { CSSProperties, FunctionComponent, useEffect, useRef, useState }
 import bem from '@/utils/bem'
 import Popup from '@/packages/popup'
 import Icon from '@/packages/icon'
-import './shortpassword.scss'
 
 export interface ShortPasswordProps {
   title: string

src/packages/signature/doc.md

-# Signature 组件
+# Signature 签名
 
 ### 介绍
 

src/packages/signature/signature.tsx

 import React, { FunctionComponent, useRef, useState, useEffect } from 'react'
-import './signature.scss'
+
 import { Button } from '../button/button'
 import bem from '@/utils/bem'
 

src/packages/step/step.tsx

@@ -3,7 +3,6 @@ import { DataContext } from '@/packages/steps/UserContext'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
 import Icon from '@/packages/icon'
-import './step.scss'
 
 export interface StepProps {
   title: string

src/packages/steps/steps.tsx

@@ -2,7 +2,6 @@ import React, { useState, FunctionComponent } from 'react'
 import { DataContext } from './UserContext'
 import bem from '@/utils/bem'
 import classNames from 'classnames'
-import './steps.scss'
 
 export interface StepsProps {
   current: number