Merge branch 'jdf2e:v4' into v4

awesome.md

@@ -12,6 +12,7 @@ NutUI 学习资源汇总 [![Awesome](https://awesome.re/badge-flat.svg)](https:/
 ## 文章教程
 
 - [移动端组件库如何和 Taro 结合](https://jelly.jd.com/article/618341fd4a534d01c422bc98)
+- [京东风NutUI组件库实践，10分钟搭建购物小程序界面](https://pixso.cn/designskills/nutui/)
 
 
 

jd/generate-nutui-taro-vue.cjs

@@ -17,7 +17,7 @@ config.nav.map((item) => {
     packages.push(name);
   });
 });
-let importCssVar = `import '../packages/styles/css-variables.scss';\n`;
+let importCssVar = `import '../packages/styles/theme-deafult.scss';\n`;
 let installFunction = `function install(app: any) {
   const packages = [${packages.join(',')}];
   packages.forEach((item:any) => {

jd/generate-nutui.cjs

@@ -14,7 +14,7 @@ config.nav.map((item) => {
     packages.push(name);
   });
 });
-let importCssVar = `import '../packages/styles/css-variables.scss';\n`;
+let importCssVar = `import '../packages/styles/theme-deafult.scss';\n`;
 let installFunction = `function install(app: App) {
   const packages = [${packages.join(',')}];
   packages.forEach((item:any) => {

jd/generate-style-deps.cjs

@@ -4,14 +4,33 @@ const fs = require('fs-extra');
 
 // 获取依赖关系
 const styleMap = new Map();
+const tasks = [];
+let outputFileEntry = ``;
+// import Locale from './packages/locale';\n
 config.nav.forEach((item) => {
   item.packages.forEach((element) => {
     styleMap.set(element.name, {
       name: element.name,
       children: element.styleDeps
     });
+    // gen entry
+    const outputMjs = `import ${element.name} from '../_es/${element.name}.js';\nexport { ${element.name} };`;
+    tasks.push(
+      fs.outputFile(path.resolve(__dirname, `../dist/packages/${element.name}/index.mjs`), outputMjs, 'utf8', () => {
+        // console.log('')
+      })
+    );
+
+    outputFileEntry += `export * from "./packages/${element.name}/index.mjs";\n`;
   });
 });
+
+tasks.push(
+  fs.outputFile(path.resolve(__dirname, `../dist/nutui.es.js`), outputFileEntry, 'utf8', () => {
+    // console.log('')
+  })
+);
+
 styleMap.forEach((value) => {
   if (value.children && value.children.length > 0) {
     value.children.forEach((item, index) => {
@@ -38,30 +57,32 @@ const getAllDeps = (styleObj, key) => {
   }
 };
 
-const tasks = [];
+
 styleMap.forEach((value, key) => {
   const name = key.toLowerCase();
   let deps = getAllDeps(value, key);
   deps = deps.filter((component) => {
     return component !== key;
   });
-  const outputJs = `require('./index.scss');\n${deps
+  // gen style
+  const outputStyleCJs = `require('./index.scss');\n${deps
     .map((component) => {
       return `require('../${component.toLowerCase()}/index.scss');\n`;
     })
     .join('')}`;
-  const outputMjs = `import './index.scss';\n${deps
+  const outputStyleMjs = `import './index.scss';\n${deps
     .map((component) => {
       return `import '../${component.toLowerCase()}/index.scss';\n`;
     })
     .join('')}`;
+
   tasks.push(
-    fs.outputFile(path.resolve(__dirname, `../dist/packages/${name}/index.js`), outputJs, 'utf8', () => {
+    fs.outputFile(path.resolve(__dirname, `../dist/packages/${name}/style.cjs`), outputStyleCJs, 'utf8', () => {
       // console.log('')
     })
   );
   tasks.push(
-    fs.outputFile(path.resolve(__dirname, `../dist/packages/${name}/index.mjs`), outputMjs, 'utf8', () => {
+    fs.outputFile(path.resolve(__dirname, `../dist/packages/${name}/style.mjs`), outputStyleMjs, 'utf8', () => {
       // console.log('')
     })
   );

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.2",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
-  "module": "dist/nutui.js",
+  "module": "dist/nutui.es.js",
   "style": "dist/style.css",
   "type": "module",
   "typings": "dist/types/index.d.ts",
@@ -58,8 +58,8 @@
     "publish": "npm publish",
     "generate:file": "node jd/generate-nutui.cjs",
     "generate:file:taro:vue": "node jd/generate-nutui-taro-vue.cjs",
-    "generate:types": "node jd/generate-types.cjs",
-    "generate:types:taro": "node jd/generate-types-taro.cjs",
+    "generate:types": "rm -rf ./dist/types && node jd/generate-types.cjs",
+    "generate:types:taro": "rm -rf ./dist/types && node jd/generate-types-taro.cjs",
     "generate:themes": "node jd/generate-themes.cjs",
     "generate:style:deps": "node jd/generate-style-deps.cjs",
     "prepare": "husky install",
@@ -90,12 +90,19 @@
   "devDependencies": {
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
+    "@tarojs/cli": "3.5.6",
+    "@tarojs/mini-runner": "3.5.6",
+    "@tarojs/plugin-platform-weapp": "3.5.6",
+    "@tarojs/runtime": "3.5.6",
     "@tarojs/taro": "3.5.6",
+    "@tarojs/plugin-framework-vue3": "3.5.6",
+    "@tarojs/plugin-html": "3.5.6",
+    "@tarojs/webpack5-runner": "3.5.6",
     "@types/jest": "^26.0.22",
     "@types/node": "^17.0.16",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/compiler-dom": "^3.2.45",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -126,11 +133,14 @@
     "transliteration": "^2.2.0",
     "ts-jest": "^26.5.5",
     "typescript": "^4.9.3",
-    "vite": "^3.2.4",
-    "vite-plugin-md": "^0.20.4",
+    "vite": "^4.0.0",
+    "vite-plugin-md": "^0.21.5",
     "vue": "^3.2.24",
     "vue-jest": "^5.0.0-alpha.7",
-    "vue-tsc": "^1.0.9"
+    "vue-tsc": "^1.0.9",
+    "babel-preset-taro": "3.5.6",
+    "eslint-config-taro": "3.5.6",
+    "webpack": "^5.69.0"
   },
   "eslintConfig": {
     "root": true,

src/packages/__VUE/configprovider/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-用于全局配置 NutUI 组件，提供暗黑模式。
+用于全局配置 NutUI 组件，提供暗黑模式，动态主题。
 
 ### 安装
 
@@ -53,7 +53,90 @@ app.use(ConfigProvider);
 
 :::
 
-### 动态主题
+### 主题定制
+
+NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
+来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。
+
+>如果需要使用CSS变量的能力来做主题定制的话，需要加上theme-default的scss文件引入。修改 vite 或者 webpack 配置文件中 sass-loader 的配置;
+
+#### vite 演示
+
+``` javascript
+// https://vitejs.dev/config/
+export default defineConfig({
+  //...
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@nutui/nutui/dist/styles/theme-deafult.scss";@import "@nutui/nutui/dist/styles/variables.scss";`
+      }
+    }
+  }
+})
+```
+
+#### webpack 配置方法
+
+``` javascript
+{
+    test: /\.(sa|sc)ss$/,
+    use: [
+        {
+            loader: 'sass-loader',
+            options: {
+                // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
+                data: `@import "@nutui/nutui/dist/styles/theme-deafult.scss";@import "@nutui/nutui/dist/styles/variables.scss";`,
+            }
+        }
+    ]
+}
+```
+
+#### vue/cli 3 以上版本修改 **vue.config.js** 进行配置
+
+``` javascript
+module.exports = {
+    css: {
+        loaderOptions: {
+            // 给 sass-loader 传递选项
+            scss: {
+                // @/ 是 src/ 的别名
+                // 注意：在 sass-loader v7 中，这个选项名是 "data"
+                prependData: `@import "@nutui/nutui/dist/styles/theme-deafult.scss";@import "@nutui/nutui/dist/styles/variables.scss";`,
+            }
+        },
+    }
+}
+```
+
+
+
+#### 示例
+
+这些变量的默认值被定义在 `:root` 节点上，HTML 里的所有子节点都可以访问到这些变量：
+
+```css
+:root {
+    --nut-primary-color: #fa2c19;
+    --nut-primary-color-end: #fa6419;
+    --nut-help-color: #f5f5f5;
+    --nut-active-color: rgba(250, 44, 25, 0.15);
+}
+```
+
+#### 通过 CSS 覆盖
+
+你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+
+```css
+/* 添加这段样式后，Primary Button 会变成绿色 */
+:root {
+  --nut-button-primary-background-color: green;
+}
+```
+
+#### 通过 ConfigProvider 覆盖
 ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量
 :::demo
 
@@ -61,7 +144,7 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 <template>
     <nut-config-provider :theme-vars="themeVars">
       <nut-form>
-        <nut-form-item :label="动态主题">
+        <nut-form-item :label="滑块">
           <nut-range hidden-tag v-model="range"></nut-range>
         </nut-form-item>
       </nut-form>
@@ -72,11 +155,11 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
   export default {
     setup() {
       const range = ref(30);
-       const themeVars = {
-      rangeBgColor: 'rgba(25,137,250,0.15)',
-      rangeBarBgColor: '#0289fa',
-      rangeBarBtnBorder: '1px solid #0289fa'
-    };
+      const themeVars = {
+        rangeBgColor: 'rgba(25,137,250,0.15)',
+        rangeBarBgColor: '#0289fa',
+        rangeBarBtnBorder: '1px solid #0289fa'
+      };
 
       return { range, themeVars };
     }
@@ -87,6 +170,69 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 :::
 
 
+### 主题变量
+#### 基础变量
+
+NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
+
+#### 修改变量
+
+由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
+
+- 基础变量只能通过 `:root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
+- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
+
+#### 变量列表
+
+下面是所有的基础变量：
+```less
+  --nut-primary-color: #fa2c19;
+  --nut-primary-color-end: #fa6419;
+  // 辅助色
+  --nut-help-color: #f5f5f5;
+  --nut-active-color: rgba(250, 44, 25, 0.15);
+  // 标题常规文字
+  --nut-title-color: #1a1a1a;
+  // 副标题
+  --nut-title-color2: #666666;
+  // 次内容
+  --nut-text-color: #808080;
+  // 特殊禁用色
+  --nut-disable-color: #cccccc;
+  --nut-white: #fff;
+  --nut-black: #000;
+  --nut-required-color: #fa2c19;
+  // 暗黑模式下颜色
+  --nut-dark-background: #131313;
+  --nut-dark-background2: #1b1b1b;
+  --nut-nut-dark-background3: #141414;
+  --nut-nut-dark-background4: #323233;
+  --nut-dark-background5: #646566;
+  --nut-dark-background6: #380e08;
+  --nut-dark-background7: #707070;
+  --nut-dark-color: var(--nut-white);
+  --nut-dark-color2: #f2270c;
+  --nut-dark-color3: rgba(232, 230, 227, 0.8);
+  --nut-dark-color-gray: var(--nut-text-color);
+  --nut-dark-calendar-choose-color: rgba(227, 227, 227, 0.2);
+  // 字体
+  --nut-font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif;
+
+  // Font
+  --nut-font-size-0: 10px;
+  --nut-font-size-1: 12px;
+  --nut-font-size-2: 14px;
+  --nut-font-size-3: 16px;
+  --nut-font-size-4: 18px;
+  --nut-font-weight-bold: 400;
+  --nut-font-size-small: var(--nut-font-size-1);
+  --nut-font-size-base: var(--nut-font-size-2);
+  --nut-font-size-large: var(--nut-font-size-3);
+  --nut-line-height-base: 1.5;
+
+```
+
+
 ## API
 
 ### Props
@@ -94,4 +240,5 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 | 参数  | 说明                                             | 类型   | 默认值 |
 |-------|--------------------------------------------------|--------|--------|
 | theme | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | String | -      |
+| theme-vars | 自定义主题变量，局部生效 | Object | -      |
 | tag   | 根节点对应的 HTML 标签名                         | String | div    |

src/packages/__VUE/popover/index.taro.vue

@@ -67,7 +67,7 @@
 <script lang="ts">
 import { onMounted, computed, watch, ref, PropType, CSSProperties } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
-const { componentName, create } = createComponent('popover');
+const { create } = createComponent('popover');
 import { useTaroRect, rectTaro } from '@/packages/utils/useTaroRect';
 import { isArray } from '@/packages/utils/util';
 import { PopoverList, PopoverTheme, PopoverLocation } from './type';
@@ -106,7 +106,7 @@ export default create({
     const popoverContentRefCopy = ref();
     const popoverbox = ref();
     const showPopup = ref(props.visible);
-    const popoverstyles = ref<CSSProperties>({});
+    const popoverstyles = ref<any>({});
 
     let rootRect = ref<rectTaro>();
 

src/packages/__VUE/switch/doc.en-US.md

@@ -195,7 +195,7 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value | Description |
 | --------------------------------------- | -------------------------- | ---- |
 | --nut-switch-close-bg-color|  _#ebebeb_ | - |
-| --nut-switch-close--nut-cline-bg-color|  _#f0f0f0_ | - |
+| --nut-switch-close-cline-bg-color|  _#f0f0f0_ | - |
 | --nut-switch-width|  _36px_ | - |
 | --nut-switch-height|  _21px_ | - |
 | --nut-switch-line-height|  _21px_ | - |

src/packages/__VUE/switch/doc.md

@@ -194,7 +194,7 @@ app.use(Switch);
 | 名称                                    | 默认值                     | 描述 |
 | --------------------------------------- | -------------------------- | ---- |
 | --nut-switch-close-bg-color|  _#ebebeb_ | - |
-| --nut-switch-close--nut-cline-bg-color|  _#f0f0f0_ | - |
+| --nut-switch-close-cline-bg-color|  _#f0f0f0_ | - |
 | --nut-switch-width|  _36px_ | - |
 | --nut-switch-height|  _21px_ | - |
 | --nut-switch-line-height|  _21px_ | - |

src/packages/__VUE/switch/doc.taro.md

@@ -195,7 +195,7 @@ app.use(Switch);
 | 名称                                    | 默认值                     | 描述 |
 | --------------------------------------- | -------------------------- | ---- |
 | --nut-switch-close-bg-color|  _#ebebeb_ | - |
-| --nut-switch-close--nut-cline-bg-color|  _#f0f0f0_ | - |
+| --nut-switch-close-cline-bg-color|  _#f0f0f0_ | - |
 | --nut-switch-width|  _36px_ | - |
 | --nut-switch-height|  _21px_ | - |
 | --nut-switch-line-height|  _21px_ | - |

src/packages/__VUE/tour/index.taro.vue

@@ -73,7 +73,7 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, watch, ref, reactive, toRefs, PropType, nextTick, onMounted, Component, CSSProperties } from 'vue';
+import { computed, watch, ref, reactive, toRefs, PropType, onMounted, Component, CSSProperties } from 'vue';
 import { PopoverLocation } from '../popover/type';
 import { createComponent } from '@/packages/utils/create';
 import { useTaroRect, rectTaro } from '@/packages/utils/useTaroRect';
@@ -172,7 +172,7 @@ export default create({
 
     let maskRect: rectTaro[] = [];
 
-    let maskStyles = ref<CSSProperties[]>([]);
+    let maskStyles = ref<any[]>([]);
 
     const classes = computed(() => {
       const prefixCls = 'nut-tour';

src/packages/styles/css-variables.scss

@@ -283,7 +283,7 @@ page {
 
   //switch
   --nut-switch-close-bg-color: #ebebeb;
-  --nut-switch-close--nut-cline-bg-color: #f0f0f0;
+  --nut-switch-close-cline-bg-color: #f0f0f0;
   --nut-switch-width: 36px;
   --nut-switch-height: 21px;
   --nut-switch-line-height: 21px;
@@ -632,7 +632,7 @@ page {
   --nut-indicator-white: var(--nut-white);
   --nut-indicator-size: 18px;
   --nut-indicator-dot-size: calc(var(--nut-indicator-size) / 3);
-  --nut-indicator-border-size: calc(var(--nut-indicator-size)+ 2);
+  --nut-indicator-border-size: calc(var(--nut-indicator-size) + 2px);
   --nut-indicator-number-font-size: 10px;
 
   // menu

src/packages/styles/theme-jdt.scss

@@ -0,0 +1,898 @@
+:root,
+page {
+  --nut-primary-color: #2c68ff;
+  --nut-primary-color-end: #2c68ff;
+  // 辅助色
+  --nut-help-color: #f5f5f5;
+  --nut-active-color: rgba(250, 44, 25, 0.15);
+  // 标题常规文字
+  --nut-title-color: #1a1a1a;
+  // 副标题
+  --nut-title-color2: #666666;
+  // 次内容
+  --nut-text-color: #808080;
+  // 特殊禁用色
+  --nut-disable-color: #cccccc;
+  --nut-white: #fff;
+  --nut-black: #000;
+  --nut-required-color: #fa2c19;
+
+  --nut-dark-background: #131313;
+  --nut-dark-background2: #1b1b1b;
+  --nut-nut-dark-background3: #141414;
+  --nut-nut-dark-background4: #323233;
+  --nut-dark-background5: #646566;
+  --nut-dark-background6: #380e08;
+  --nut-dark-background7: #707070;
+  --nut-dark-color: var(--nut-white);
+  --nut-dark-color2: #f2270c;
+  --nut-dark-color3: rgba(232, 230, 227, 0.8);
+  --nut-dark-color-gray: var(--nut-text-color);
+  --nut-dark-calendar-choose-color: rgba(227, 227, 227, 0.2);
+
+  --nut-font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif;
+
+  //  Animation
+  --nut-animation-duration: 0.25s;
+  --nut-animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+
+  // Font
+  --nut-font-size-0: 10px;
+  --nut-font-size-1: 12px;
+  --nut-font-size-2: 14px;
+  --nut-font-size-3: 16px;
+  --nut-font-size-4: 18px;
+  --nut-font-weight-bold: 400;
+
+  --nut-font-size-small: var(--nut-font-size-1);
+  --nut-font-size-base: var(--nut-font-size-2);
+  --nut-font-size-large: var(--nut-font-size-3);
+  --nut-line-height-base: 1.5;
+
+  // button
+  --nut-button-border-radius: 25px;
+  --nut-button-border-width: 1px;
+  --nut-button-icon-width: 16px;
+  --nut-button-default-bg-color: var(--nut-white);
+  --nut-button-default-border-color: rgba(204, 204, 204, 1);
+  --nut-button-default-color: rgba(102, 102, 102, 1);
+  --nut-button-default-padding: 0 22px;
+  --nut-button-mini-padding: 0 12px;
+  --nut-button-small-padding: 0 16px;
+  --nut-button-small-height: 32px;
+  --nut-button-mini-height: 24px;
+  --nut-button-default-height: 44px;
+  --nut-button-large-height: 48px;
+  --nut-button-large-line-height: 46px;
+  --nut-button-small-line-height: 26px;
+  --nut-button-block-height: 48px;
+  --nut-button-default-line-height: 36px;
+  --nut-button-block-line-height: 46px;
+  --nut-button-default-font-size: var(--nut-font-size-3);
+  --nut-button-large-font-size: var(--nut-button-default-font-size);
+  --nut-button-small-font-size: var(--nut-font-size-2);
+  --nut-button-mini-font-size: var(--nut-font-size-1);
+  --nut-button-mini-line-height: 1.2;
+  --nut-button-disabled-opacity: 0.68;
+  --nut-button-primary-color: var(--nut-white);
+  --nut-button-primary-border-color: var(--nut-primary-color);
+  --nut-button-primary-background-color: linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  );
+  --nut-button-info-color: var(--nut-white);
+  --nut-button-info-border-color: rgba(73, 106, 242, 1);
+  --nut-button-info-background-color: linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%);
+  --nut-button-success-color: var(--nut-white);
+  --nut-button-success-border-color: #0ed57d;
+  --nut-button-success-background-color: #0ed57d;
+
+  --nut-button-danger-color: var(--nut-white);
+  --nut-button-danger-border-color: #f52f3e;
+  --nut-button-danger-background-color: #f52f3e;
+  --nut-button-warning-color: var(--nut-white);
+  --nut-button-warning-border-color: #ff9c00;
+  --nut-button-warning-background-color: #ff9c00;
+  --nut-button-plain-background-color: var(--nut-white);
+  --nut-button-small-round-border-radius: var(--nut-button-border-radius);
+
+  // cell
+
+  --nut-cell-color: rgba(0, 0, 0, 0.85);
+  --nut-cell-title-font: var(--nut-font-size-2);
+  --nut-cell-title-desc-font: var(--nut-font-size-1);
+  --nut-cell-desc-font: var(--nut-font-size-2);
+  --nut-cell-desc-color: rgba(0, 0, 0, 0.25);
+  --nut-cell-border-radius: 0px;
+  --nut-cell-padding: 14px 16px;
+  --nut-cell-line-height: 22px;
+  --nut-cell-after-right: 0px;
+  --nut-cell-after-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  --nut-cell-default-icon-margin: 0 4px 0 0px;
+  --nut-cell-large-title-font: var(--nut-font-size-large);
+  --nut-cell-large-title-desc-font: var(--nut-font-size-base);
+  --nut-cell-large-padding: 15px 16px;
+  --nut-cell-background: var(--nut-white);
+
+  // cell-group
+
+  --nut-cell-group-title-padding: 0 10px;
+  --nut-cell-group-title-color: rgba(69, 90, 100, 0.6);
+  --nut-cell-group-title-font-size: var(--nut-font-size-2);
+  --nut-cell-group-title-line-height: 20px;
+  --nut-cell-group-desc-padding: 0 10px;
+  --nut-cell-group-desc-color: #909ca4;
+  --nut-cell-group-desc-font-size: var(--nut-font-size-1);
+  --nut-cell-group-desc-line-height: 16px;
+  --nut-cell-group-background-color: var(--nut-white);
+
+  // divider
+
+  --nut-divider-margin: 16px 0;
+  --nut-divider-text-font-size: 16px;
+  --nut-divider-text-color: rgba(0, 0, 0, 0.3);
+  --nut-divider-line-height: 2px;
+  --nut-divider-before-margin-right: 16px;
+  --nut-divider-after-margin-left: 16px;
+  --nut-divider-vertical-height: 12px;
+  --nut-divider-vertical-top: 2px;
+  --nut-divider-vertical-border-left: rgba(0, 0, 0, 0.06);
+  --nut-divider-vertical-margin: 0 8px;
+
+  // icon
+
+  --nut-icon-height: 20px;
+  --nut-icon-width: 20px;
+  --nut-icon-line-height: 20px;
+
+  // uploader
+
+  --nut-uploader-picture-width: 100px;
+  --nut-uploader-picture-height: 100px;
+  --nut-uploader-background: #f7f8fa;
+
+  // picker
+  --nut-picker-cancel-color: #595959;
+  --nut-picker-ok-color: var(--nut-primary-color);
+  --nut-picker-bar-cancel-font-size: 16px;
+  --nut-picker-bar-ok-font-size: 16px;
+  --nut-picker-bar-button-padding: 0 16px;
+  --nut-picker-bar-title-font-size: 18px;
+  --nut-picker-bar-title-color: #323233;
+  --nut-picker-bar-title-font-weight: 600;
+  --nut-picker-item-height: 36px;
+  --nut-picker-item-text-color: var(--nut-title-color);
+  --nut-picker-item-active-text-color: var(--nut-primary-color);
+  --nut-picker-item-text-font-size: 14px;
+  --nut-picker-item-active-line-border: 1px solid rgba(0, 0, 0, 0.06);
+  --nut-picker-columns-item-color: var(--nut-title-color);
+
+  //input
+  --nut-input-border-bottom: #eaf0fb;
+  --nut-input-disabled-color: #c8c9cc;
+  --nut-input-required-color: var(--nut-required-color);
+  --nut-input-font-size: var(--nut-font-size-2);
+
+  // textarea
+
+  --nut-textarea-font: var(--nut-font-size-2);
+  --nut-textarea-height: 100px;
+  --nut-textarea-limit-color: var(--nut-text-color);
+  --nut-textarea-text-color: var(--nut-title-color);
+  --nut-textarea-disabled-color: var(--nut-disable-color);
+
+  // inputnumber
+
+  --nut-inputnumber-icon-color: var(--nut-title-color);
+  --nut-inputnumber-icon-void-color: var(--nut-disable-color);
+  --nut-inputnumber-icon-size: 20px;
+  --nut-inputnumber-input-font-size: 12px;
+  --nut-inputnumber-input-font-color: var(--nut-title-color);
+  --nut-inputnumber-input-background-color: var(--nut-help-color);
+  --nut-inputnumber-input-border-radius: 4px;
+  --nut-inputnumber-input-width: 40px;
+  --nut-inputnumber-input-margin: 0 6px;
+  --nut-inputnumber-input-border: 0;
+  --nut-inputnumber-border: 0;
+  --nut-inputnumber-border-radius: 0;
+  --nut-inputnumber-height: auto;
+  --nut-inputnumber-line-height: normal;
+  --nut-inputnumber-border-box: content-box;
+  --nut-inputnumber-display: flex;
+
+  // actionsheet
+  --nut-actionsheet-light-color: #f6f6f6;
+  --nut-actionsheet-item-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  --nut-actionsheet-item-font-size: var(--nut-font-size-4);
+  --nut-actionsheet-item-subdesc-font-size: var(--nut-font-size-1);
+  --nut-actionsheet-item-cancel-border-top: none;
+  --nut-actionsheet-item-line-height: 28px;
+  --nut-actionsheet-item-font-color: #4e5969;
+
+  //shortpassword
+  --nut-shortpassword-background-color: rgba(245, 245, 245, 1);
+  --nut-shortpassword-border-color: #ddd;
+  --nut-shortpassword-error: var(--nut-primary-color);
+  --nut-shortpassword-forget: rgba(128, 128, 128, 1);
+
+  //numberkeyboard
+  --nut-numberkeyboard-width: 100%;
+  --nut-numberkeyboard-padding: 0;
+  --nut-numberkeyboard-background-color: #f2f3f5;
+  --nut-numberkeyboard-header-height: 34px;
+  --nut-numberkeyboard-header-padding: 6px 0 0 0;
+  --nut-numberkeyboard-header-color: #646566;
+  --nut-numberkeyboard-header-font-size: 16px;
+  --nut-numberkeyboard-header-close-padding: 0 16px;
+  --nut-numberkeyboard-header-close-color: #576b95;
+  --nut-numberkeyboard-header-close-font-size: 14px;
+  --nut-numberkeyboard-header-close-background-color: transparent;
+  --nut-numberkeyboard-key-background-color: #fff;
+  --nut-numberkeyboard-key-active-background-color: #ebedf0;
+  --nut-numberkeyboard-key-height: 48px;
+  --nut-numberkeyboard-key-line-height: 1.5;
+  --nut-numberkeyboard-key-border-radius: 8px;
+  --nut-numberkeyboard-key-font-size: 28px;
+  --nut-numberkeyboard-key-font-size-color: #333;
+  --nut-numberkeyboard-key-finish-font-size: 16px;
+  --nut-numberkeyboard-key-finish-font-size-color: #fff;
+  --nut-numberkeyboard-key-finish-background-color: #1989fa;
+  --nut-numberkeyboard-key-activeFinsh-background-color: #0570db;
+
+  // countdown
+  --nut-countdown-display: flex;
+  --nut-countdown-color: inherit;
+  --nut-countdown-font-size: initial;
+
+  //large price
+  --nut-price-symbol-big-size: 18px;
+  --nut-price-big-size: 24px;
+  --nut-price-decimal-big-size: 18px;
+
+  //normal price
+  --nut-price-symbol-medium-size: 14px;
+  --nut-price-medium-size: 16px;
+  --nut-price-decimal-medium-size: 14px;
+
+  // small price
+  --nut-price-symbol-small-size: 10px;
+  --nut-price-small-size: 12px;
+  --nut-price-decimal-small-size: 10px;
+
+  //avatar
+  --nut-avatar-square: 5px;
+  --nut-avatar-large-width: 60px;
+  --nut-avatar-large-height: 60px;
+  --nut-avatar-small-width: 32px;
+  --nut-avatar-small-height: 32px;
+  --nut-avatar-normal-width: 40px;
+  --nut-avatar-normal-height: 40px;
+
+  //switch
+  --nut-switch-close-bg-color: #ebebeb;
+  --nut-switch-close-cline-bg-color: #f0f0f0;
+  --nut-switch-width: 50px;
+  --nut-switch-height: 27px;
+  --nut-switch-line-height: 27px;
+  --nut-switch-border-radius: 27px;
+  --nut-switch-inside-width: 23px;
+  --nut-switch-inside-height: 23px;
+  --nut-switch-inside-open-transform: translateX(100%);
+  --nut-switch-inside-close-transform: translateX(10%);
+
+  // toast
+  --nut-toast-title-font-size: 18px;
+  --nut-toast-text-font-size: 14px;
+  --nut-toast-font-color: var(--nut-white);
+  --nut-toast-inner-padding: 12px 20px;
+  --nut-toast-inner-bg-color: rgba(0, 0, 0, 0.65);
+  --nut-toast-inner-border-radius: 4px;
+  --nut-toast-cover-bg-color: rgba(0, 0, 0, 0);
+
+  //backtop
+  --nut-backtop-border-color: #e0e0e0;
+
+  // calendar
+  --nut-calendar-primary-color: var(--nut-primary-color);
+  --nut-calendar-choose-color: var(--nut-active-color);
+  --nut-calendar-choose-font-color: var(--nut-primary-color);
+  --nut-calendar-base-color: #323233;
+  --nut-calendar-disable-color: #d1d0d0;
+  --nut-calendar-base-font: var(--nut-font-size-3);
+  --nut-calendar-title-font: var(--nut-font-size-4);
+  --nut-calendar-title-font-weight: 500;
+  --nut-calendar-sub-title-font: var(--nut-font-size-2);
+  --nut-calendar-text-font: var(--nut-font-size-1);
+  --nut-calendar-day-font: 16px;
+  --nut-calendar-day-active-border-radius: 4px;
+  --nut-calendar-day-width: 14.28%;
+  --nut-calendar-day-height: 64px;
+  --nut-calendar-day-font-weight: normal;
+  --nut-calendar-day67-font-color: var(--nut-primary-color);
+  --nut-calendar-month-title-font-size: inherit;
+
+  //overlay
+  --nut-overlay-bg-color: rgba(0, 0, 0, 0.7);
+
+  //popup
+  --nut-popup-close-icon-margin: 16px;
+  --nut-popup-border-radius: 8px;
+
+  // Notify
+  --nut-notify-text-color: var(--nut-white);
+  --nut-notify-padding: 7px 16px;
+  --nut-notify-font-size: 14px;
+  --nut-notify-height: auto;
+  --nut-notify-line-height: 22px;
+  --nut-notify-base-background-color: linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  );
+  --nut-notify-primary-background-color: #2c68ff;
+  --nut-notify-success-background-color: #0ed57d;
+  --nut-notify-danger-background-color: #f52f3e;
+  --nut-notify-warning-background-color: #ff9c00;
+
+  // rate
+  --nut-rate-icon-color: var(--nut-primary-color);
+  --nut-rate-icon-void-color: var(--nut-disable-color);
+
+  // tabbar
+  --nut-tabbar-active-color: var(--nut-primary-color);
+  --nut-tabbar-unactive-color: var(--nut-primary-color);
+  --nut-tabbar-border-top: 0;
+  --nut-tabbar-border-bottom: 0;
+  --nut-tabbar-box-shadow: 0 -1.5px 5px rgba(0, 0, 0, 0.04);
+  --nut-tabbar-item-text-font-size: 12px;
+  --nut-tabbar-item-text-line-height: 18px;
+  --nut-tabbar-height: 50px;
+  --nut-tabbar-word-margin-top: auto;
+
+  //infiniteloading
+  --nut-infiniteloading-bottom-color: #c8c8c8;
+
+  //range
+  --nut-range-tip-font-color: #333333;
+  --nut-range-bg-color: rgba(0, 0, 0, 0.15);
+  --nut-range-bg-color-tick: #d9d9d9;
+  --nut-range-bar-bg-color: linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%);
+  --nut-range-bar-btn-bg-color: var(--nut-primary-color);
+  --nut-range-bar-btn-width: 22px;
+  --nut-range-bar-btn-height: 22px;
+  --nut-range-bar-btn-border: none;
+
+  //swiper
+  --nut-swiper-pagination-item-width: 5px;
+  --nut-swiper-pagination-item-height: 5px;
+  --nut-swiper-pagination-item-margin-right: 6px;
+  --nut-swiper-pagination-item-border-radius: 50%;
+
+  //address
+  --nut-address-region-tab-line: linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%);
+  --nut-address-icon-color: var(--nut-primary-color);
+  --nut-address-header-title-font-size: 18px;
+  --nut-address-header-title-color: #262626;
+  --nut-address-region-tab-font-size: 13px;
+  --nut-address-region-tab-color: #1d1e1e;
+  --nut-address-region-tab-active-item-font-weight: bold;
+  --nut-address-region-tab-line-border-radius: 0;
+  --nut-address-region-tab-line-opacity: 1;
+  --nut-address-region-item-color: #333;
+  --nut-address-region-item-font-size: var(--nut-font-size-1);
+  --nut-address-item-margin-right: 9px;
+
+  //steps
+  --nut-steps-base-icon-width: 18px;
+  --nut-steps-base-icon-height: 18px;
+  --nut-steps-base-icon-line-height: 18px;
+  --nut-steps-base-icon-font-size: 12px;
+  --nut-steps-base-title-font-size: 12px;
+  --nut-steps-base-line-color: #e1e1e1;
+  --nut-steps-base-title-color: rgba(0, 0, 0, 0.85);
+  --nut-steps-base-title-margin-bottom: 10px;
+  --nut-steps-base-content-font-size: 10px;
+  --nut-steps-base-content-color: rgba(0, 0, 0, 0.65);
+
+  --nut-steps-wait-icon-bg-color: #e1e1e1;
+  --nut-steps-wait-icon-color: var(--nut-white);
+  --nut-steps-wait-head-color: #909ca4;
+  --nut-steps-wait-head-border-color: #909ca4;
+  --nut-steps-wait-content-color: #909ca4;
+
+  --nut-steps-finish-head-color: var(--nut-primary-color);
+  --nut-steps-finish-head-border-color: var(--nut-primary-color);
+  --nut-steps-finish-title-color: var(--nut-primary-color);
+  --nut-steps-finish-line-background: var(--nut-primary-color);
+  --nut-steps-finish-icon-text-color: var(--nut-white);
+
+  --nut-steps-process-head-color: var(--nut-white);
+  --nut-steps-process-head-border-color: var(--nut-primary-color);
+  --nut-steps-process-title-color: var(--nut-primary-color);
+  --nut-steps-process-icon-text-color: var(--nut-primary-color);
+
+  // dialog
+  --nut-dialog-width: 296px;
+  --nut-dialog-header-font-weight: normal;
+  --nut-dialog-header-color: rgba(38, 38, 38, 1);
+  --nut-dialog-footer-justify-content: space-around;
+
+  // checkbox
+  --nut-checkbox-label-color: rgba(0, 0, 0, 0.85);
+  --nut-checkbox-label-disable-color: #999;
+  --nut-checkbox-icon-disable-color: #d6d6d6;
+  --nut-checkbox-label-margin-left: 8px;
+  --nut-checkbox-label-font-size: 16px;
+  --nut-checkbox-icon-font-size: 20px;
+  --nut-checkbox-icon-disable-color2: var(--nut-help-color);
+
+  //radio
+  --nut-radio-label-font-color: rgba(0, 0, 0, 0.85);
+  --nut-radio-label-font-active-color: var(--nut-primary-color);
+  --nut-radio-label-disable-color: #999;
+  --nut-radio-icon-disable-color: #d6d6d6;
+  --nut-radio-label-button-border-color: var(--nut-primary-color);
+  --nut-radio-label-button-background: var(--nut-active-color);
+  --nut-radio-label-margin-left: 8px;
+  --nut-radio-button-border-radius: 15px;
+  --nut-radio-label-font-size: 14px;
+  --nut-radio-button-font-size: 12px;
+  --nut-radio-button-padding: 5px 18px;
+  --nut-radio-icon-font-size: 20px;
+  --nut-radio-icon-disable-color2: var(--nut-help-color);
+
+  //fixednav
+  --nut-fixednav-bg-color: var(--nut-white);
+  --nut-fixednav-font-color: var(--nut-black);
+  --nut-fixednav-index: 201;
+  --nut-fixednav-btn-bg: linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%);
+  --nut-fixednav-item-active-color: var(--nut-primary-color);
+
+  // NoticeBar
+  --nut-noticebar-background: #f2f8ff;
+  --nut-noticebar-color: #2c68ff;
+  --nut-noticebar-font-size: 14px;
+  --nut-noticebar-height: 40px;
+  --nut-noticebar-line-height: 24px;
+  --nut-noticebar-left-icon-width: 16px;
+  --nut-noticebar-right-icon-width: 16px;
+  --nut-noticebar-box-padding: 0 16px;
+  --nut-noticebar-wrapable-padding: 16px;
+  --nut-noticebar-lefticon-margin: 0px 10px;
+  --nut-noticebar-righticon-margin: 0px 10px;
+
+  // TimeSelect
+  --nut-timeselect-title-font-size: var(--nut-font-size-2);
+  --nut-timeselect-title-color: var(--nut-title-color);
+  --nut-timeselect-title-width: 100%;
+  --nut-timeselect-title-height: 50px;
+  --nut-timeselect-title-line-height: 50px;
+  --nut-timeselect-pannel-bg-color: #f6f7f9;
+
+  // TimePannel
+  --nut-timeselect-timepannel-text-color: var(--nut-title-color2);
+  --nut-timeselect-timepannel-font-size: var(--nut-font-size-2);
+  --nut-timeselect-timepannel-cur-bg-color: var(--nut-white);
+  --nut-timeselect-timepannel-cur-text-color: #333333;
+  --nut-timeselect-timepannel-width: 140px;
+  --nut-timeselect-timepannel-height: 40px;
+  --nut-timeselect-timepannel-padding: 15px;
+
+  // TimeDetail
+  --nut-timeselect-timedetail-padding: 0 5px 50px 13px;
+  --nut-timeselect-timedetail-item-width: 100px;
+  --nut-timeselect-timedetail-item-height: 50px;
+  --nut-timeselect-timedetail-item-line-height: 50px;
+  --nut-timeselect-timedetail-item-bg-color: #f6f7f9;
+  --nut-timeselect-timedetail-item-border-radius: 5px;
+  --nut-timeselect-timedetail-item-text-color: #333333;
+  --nut-timeselect-timedetail-item-text-font-size: var(--nut-font-size-2);
+  --nut-timeselect-timedetail-item-cur-bg-color: var(--nut-active-color);
+  --nut-timeselect-timedetail-item-cur-border: var(--nut-primary-color);
+  --nut-timeselect-timedetail-item-cur-text-color: var(--nut-primary-color);
+  --nut-timeselect-timedetail-time-text-color: #999;
+  --nut-timeselect-timedetail-time-font-size: var(--nut-font-size-1);
+
+  //tag
+  --nut-tag-font-size: 12px;
+  --nut-tag-default-border-radius: 4px;
+  --nut-tag-round-border-radius: 8px;
+  --nut-tag-default-background-color: #000000;
+  --nut-tag-primary-background-color: #3460fa;
+  --nut-tag-success-background-color: #4fc08d;
+  --nut-tag-danger-background-color: linear-gradient(
+    135deg,
+    rgba(242, 20, 12, 1) 0%,
+    rgba(232, 34, 14, 1) 70%,
+    rgba(242, 77, 12, 1) 100%
+  );
+  --nut-tag-danger-background-color-plain: #df3526;
+  --nut-tag-warning-background-color: #f3812e;
+  --nut-tag-default-color: #ffffff;
+  --nut-tag-border-width: 1px;
+  --nut-tag-plain-background-color: #fff;
+  --nut-tag-height: auto;
+
+  //badge
+  --nut-badge-background-color: linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%);
+  --nut-badge-color: #fff;
+  --nut-badge-font-size: var(--nut-font-size-1);
+  --nut-badge-border-radius: 14px;
+  --nut-badge-padding: 0 5px;
+  --nut-badge-content-transform: translate(50%, -50%);
+  --nut-badge-z-index: 1;
+  --nut-badge-dot-width: 7px;
+  --nut-badge-dot-height: 7px;
+  --nut-badge-dot-border-radius: 7px;
+  --nut-badge-dot-padding: 0px;
+
+  //popover
+  --nut-popover-white-background-color: rgba(255, 255, 255, 1);
+  --nut-popover-dark-background-color: rgba(75, 76, 77, 1);
+  --nut-popover-border-bottom-color: rgba(229, 229, 229, 1);
+  --nut-popover-primary-text-color: rgba(51, 51, 51, 1);
+  --nut-popover-disable-color: rgba(154, 155, 157, 1);
+  --nut-popover-menu-item-padding: 8px 0;
+  --nut-popover-menu-item-margin: 0 8px;
+  --nut-popover-menu-name-line-height: normal;
+
+  //progress
+  --nut-progress-inner-background-color: linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  );
+  --nut-progress-insidetext-background: var(--nut-progress-inner-background-color);
+  --nut-progress-outer-background-color: rgba(0, 0, 0, 0.15);
+  --nut-progress-outer-border-radius: 0;
+  --nut-progress-insidetext-border-radius: 10px;
+  --nut-progress-insidetext-padding: 3px 5px 3px 6px;
+  --nut-progress-insidetext-top: -42%;
+  --nut-progress-small-height: 4px;
+  --nut-progress-small-text-font-size: 14px;
+  --nut-progress-small-text-line-height: 1.6;
+  --nut-progress-small-text-padding: 0px 8px;
+  --nut-progress-small-text-top: -200%;
+  --nut-progress-base-height: 10px;
+  --nut-progress-base-text-font-size: 9px;
+  --nut-progress-base-text-line-height: 13px;
+  --nut-progress-base-text-padding: var(--nut-progress-insidetext-padding);
+  --nut-progress-base-text-top: var(--nut-progress-insidetext-top);
+  --nut-progress-large-height: 15px;
+  --nut-progress-large-text-font-size: 13px;
+  --nut-progress-large-text-line-height: 18px;
+  --nut-progress-large-text-padding: var(--nut-progress-insidetext-padding);
+  --nut-progress-large-text-top: var(--nut-progress-insidetext-top);
+
+  //pagination
+  --nut-pagination-color: var(--nut-primary-color);
+  --nut-pagination-font-size: var(--nut-font-size-2);
+  --nut-pagination-item-border-color: #e4e7eb;
+  --nut-pagination-active-background-color: linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  );
+  --nut-pagination-disable-color: rgba(116, 116, 116, 0.31);
+  --nut-pagination-disable-background-color: #f7f8fa;
+  --nut-pagination-item-border-width: 1px;
+  --nut-pagination-item-border-radius: 2px;
+  --nut-pagination-prev-next-padding: 0 11px;
+
+  // tabs
+  --nut-tabs-tab-smile-color: var(--nut-primary-color);
+  --nut-tabs-titles-border-radius: 0;
+  --nut-tabs-titles-item-large-font-size: var(--nut-font-size-4);
+  --nut-tabs-titles-item-font-size: var(--nut-font-size-3);
+  --nut-tabs-titles-item-small-font-size: var(--nut-font-size-2);
+  --nut-tabs-titles-item-color: rgba(0, 0, 0, 0.45);
+  --nut-tabs-titles-item-active-color: var(--nut-title-color);
+  --nut-tabs-titles-background-color: #fff;
+  --nut-tabs-horizontal-tab-line-color: var(--nut-primary-color);
+  --nut-tabs-horizontal-titles-height: 46px;
+  --nut-tabs-horizontal-titles-item-min-width: 50px;
+  --nut-tabs-horizontal-titles-item-active-line-width: 14px;
+  --nut-tabs-vertical-tab-line-color: linear-gradient(
+    180deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-active-color) 100%
+  );
+  --nut-tabs-vertical-titles-item-height: 40px;
+  --nut-tabs-vertical-titles-item-active-line-height: 14px;
+  --nut-tabs-vertical-titles-width: 100px;
+  --nut-tabs-titles-item-line-border-radius: 0;
+  --nut-tabs-titles-item-line-opacity: 1;
+
+  // indicator
+  --nut-indicator-color: var(--nut-primary-color);
+  --nut-indicator-dot-color: var(--nut-disable-color);
+  --nut-indicator-white: var(--nut-white);
+  --nut-indicator-size: 18px;
+  --nut-indicator-dot-size: calc(var(--nut-indicator-size) / 3);
+  --nut-indicator-border-size: calc(var(--nut-indicator-size) + 2px);
+  --nut-indicator-number-font-size: 10px;
+
+  // menu
+  --nut-menu-bar-line-height: 48px;
+  --nut-menu-item-font-size: 15px;
+  --nut-menu-item-text-color: rgba(0, 0, 0, 0.85);
+  --nut-menu-item-active-text-color: var(--nut-primary-color);
+  --nut-menu-bar-border-bottom-color: #eaf0fb;
+  --nut-menu-bar-opened-z-index: 2001;
+  --nut-menu-item-disabled-color: #969799;
+  --nut-menu-title-text-padding-left: 8px;
+  --nut-menu-title-text-padding-right: 8px;
+  --nut-menu-item-content-padding: 12px 24px;
+  --nut-menu-item-content-max-height: 214px;
+  --nut-menu-item-option-padding-top: 12px;
+  --nut-menu-item-option-padding-bottom: 12px;
+  --nut-menu-item-option-i-margin-right: 6px;
+  --nut-menu-bar-box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12);
+  --nut-menu-scroll-fixed-top: 0;
+  --nut-menu-scroll-fixed-z-index: 1000;
+  --nut-menu-active-item-font-weight: 500;
+
+  // collapse
+  --nut-collapse-item-padding: 13px 36px 13px 26px;
+  --nut-collapse-item-color: rgba(0, 0, 0, 0.85);
+  --nut-collapse-item-disabled-color: #bfbfbf;
+  --nut-collapse-item-icon-color: #666666;
+  --nut-collapse-item-font-size: var(--nut-font-size-2);
+  --nut-collapse-item-line-height: 24px;
+  --nut-collapse-item-sub-title-color: #666666;
+  --nut-collapse-wrapper-content-padding: 12px 26px;
+  --nut-collapse-wrapper-empty-content-padding: 0 26px;
+  --nut-collapse-wrapper-content-color: #8c8c8c;
+  --nut-collapse-wrapper-content-font-size: var(--nut-font-size-2);
+  --nut-collapse-wrapper-content-line-height: 1.5;
+  --nut-collapse-wrapper-content-background-color: var(--nut-white);
+
+  // searchbar
+  --nut-searchbar-background: var(--nut-white);
+  --nut-searchbar-right-out-color: var(--nut-black);
+  --nut-searchbar-padding: 9px 16px;
+  --nut-searchbar-width: 100%;
+  --nut-searchbar-input-background: #f7f7f7;
+  --nut-searchbar-input-padding: 0 0 0 13px;
+  --nut-searchbar-input-height: 32px;
+  --nut-searchbar-input-width: 100%;
+  --nut-searchbar-input-border-radius: 16px;
+  --nut-searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
+  --nut-searchbar-input-bar-color: inherit;
+  --nut-searchbar-input-bar-placeholder-color: inherit;
+
+  // empty
+  --nut-empty-padding: 32px 0;
+  --nut-empty-image-size: 170px;
+  --nut-empty-description-margin-top: 4px;
+  --nut-empty-description-color: #666666;
+  --nut-empty-description-font-size: 14px;
+  --nut-empty-description-line-height: 20px;
+  --nut-empty-description-padding: 0 40px;
+
+  // cascader
+  --nut-cascader-font-size: var(--nut-font-size-2);
+  --nut-cascader-line-height: 22px;
+  --nut-cascader-tabs-item-padding: 0 10px;
+  --nut-cascader-bar-padding: 24px 20px 17px;
+  --nut-cascader-bar-font-size: var(--nut-font-size-4);
+  --nut-cascader-bar-line-height: 20px;
+  --nut-cascader-bar-color: var(--nut-title-color);
+  --nut-cascader-item-padding: 10px 20px;
+  --nut-cascader-item-color: var(--nut-title-color);
+  --nut-cascader-item-font-size: var(--nut-font-size-2);
+  --nut-cascader-item-active-color: var(--nut-primary-color);
+
+  // form
+  --nut-form-item-error-line-color: var(--nut-required-color);
+  --nut-form-item-required-color: var(--nut-required-color);
+  --nut-form-item-error-message-color: var(--nut-required-color);
+  --nut-form-item-label-font-size: 14px;
+  --nut-form-item-label-width: 90px;
+  --nut-form-item-label-margin-right: 10px;
+  --nut-form-item-label-text-align: left;
+  --nut-form-item-required-margin-right: 4px;
+  --nut-form-item-body-font-size: 14px;
+  --nut-form-item-body-slots-text-align: left;
+  --nut-form-item-body-input-text-align: right;
+  --nut-form-item-tip-font-size: 12px;
+  --nut-form-item-tip-text-align: right;
+
+  // skeleton
+  --nut-skeleton-content-avatar-background-color: #efefef;
+  --nut-skeleton-content-line-background-color: #efefef;
+  --nut-skeleton-animation-background-color: linear-gradient(
+    90deg,
+    hsla(0, 0%, 100%, 0),
+    hsla(0, 0%, 100%, 0.5) 50%,
+    hsla(0, 0%, 100%, 0) 80%
+  );
+
+  // sku
+  --nut-sku-item-border: 1px solid var(--nut-primary-color);
+  --nut-sku-item-disable-line: line-through;
+  --nut-sku-opetate-bg-default: linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%);
+  --nut-sku-item-active-bg: var(--nut-active-color);
+  --nut-sku-opetate-bg-buy: linear-gradient(
+    135deg,
+    rgba(255, 186, 13, 1) 0%,
+    rgba(255, 195, 13, 1) 69%,
+    rgba(255, 207, 13, 1) 100%
+  );
+  --nut-sku-spec-height: 30px;
+  --nut-sku-spec-line-height: var(--nut-sku-spec-height);
+  --nut-sku-spec-font-size: 11px;
+  --nut-sku-spec-background: rgba(242, 242, 242, 1);
+  --nut-sku-spec-color: var(--nut-black);
+  --nut-sku-spec-margin-right: 12px;
+  --nut-sku-spec-padding: 0 18px;
+  --nut-sku-spec-title-font-weight: bold;
+  --nut-sku-spec-title-font-size: 13px;
+  --nut-sku-spec-title-color: var(--nut-black);
+  --nut-sku-spec-title-margin-bottom: 18px;
+  --nut-sku-operate-btn-height: 54px;
+  --nut-sku-operate-btn-border-top: 0;
+  --nut-sku-operate-btn-item-height: 40px;
+  --nut-sku-operate-btn-item-line-height: var(--nut-sku-operate-btn-item-height);
+  --nut-sku-operate-btn-item-font-size: 15px;
+  --nut-sku-operate-btn-item-font-weight: normal;
+  --nut-sku-product-img-width: 100px;
+  --nut-sku-product-img-height: var(--nut-sku-product-img-width);
+  --nut-sku-product-img-border-radius: 0;
+
+  // card
+  --nut-card-font-size-0: var(--nut-font-size-0);
+  --nut-card-font-size-1: var(--nut-font-size-1);
+  --nut-card-font-size-2: var(--nut-font-size-2);
+  --nut-card-font-size-3: var(--nut-font-size-3);
+  --nut-card-left-border-radius: 0;
+  --nut-card-left-background-color: inherit;
+
+  // grid
+  --nut-grid-border-color: #f5f6f7;
+  --nut-grid-item-content-padding: 16px 8px;
+  --nut-grid-item-content-bg-color: var(--nut-white);
+  --nut-grid-item-text-margin: 8px;
+  --nut-grid-item-text-color: var(--nut-title-color2);
+  --nut-grid-item-text-font-size: var(--nut-font-size-1);
+
+  // table
+  --nut-table-border-color: #ececec;
+  --nut-table-cols-padding: 10px;
+  --nut-table-tr-even-bg-color: #f3f3f3;
+  --nut-table-tr-odd-bg-color: var(--nut-white);
+
+  // navbar
+  --nut-navbar-height: 46px;
+  --nut-navbar-margin-bottom: 20px;
+  --nut-navbar-padding: 0 16px;
+  --nut-navbar-background: var(--nut-white);
+  --nut-navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+  --nut-navbar-color: var(--nut-title-color2);
+  --nut-navbar-title-base-font: var(--nut-font-size-2);
+  --nut-navbar-title-font: 18px;
+  --nut-navbar-title-font-weight: 600;
+  --nut-navbar-title-font-color: rgba(0, 0, 0, 0.85);
+  --nut-navbar-title-width: 100px;
+  --nut-navbar-title-icon-margin: 0 0 0 13px;
+
+  // sidenavbar
+  --nut-sidenavbar-content-bg-color: var(--nut-white);
+
+  // subsidenavbar
+  --nut-sidenavbar-sub-title-border-color: #f6f6f6;
+  --nut-sidenavbar-sub-title-bg-color: #f6f6f6;
+  --nut-sidenavbar-sub-title-font-size: var(--nut-font-size-large);
+  --nut-sidenavbar-sub-title-radius: 0;
+  --nut-sidenavbar-sub-title-border: 0;
+  --nut-sidenavbar-sub-title-width: 100%;
+  --nut-sidenavbar-sub-title-height: 40px;
+  --nut-sidenavbar-sub-title-text-line-height: 40px;
+  --nut-sidenavbar-sub-title-text-color: var(--nut-title-color);
+
+  // sidenavbaritem
+  --nut-sidenavbar-item-title-color: #333;
+  --nut-sidenavbar-item-title-bg-color: var(--nut-white);
+  --nut-sidenavbar-item-height: 40px;
+  --nut-sidenavbar-item-line-height: 40px;
+  --nut-sidenavbar-item-font-size: 16px;
+
+  // elevator
+  --nut-elevator-list-item-highcolor: var(--nut-primary-color);
+  --nut-elevator-list-item-font-size: 12px;
+  --nut-elevator-list-item-font-color: #333333;
+  --nut-elevator-list-item-name-padding: 0 20px;
+  --nut-elevator-list-item-name-height: 30px;
+  --nut-elevator-list-item-name-line-height: 30px;
+  --nut-elevator-list-item-code-font-size: 14px;
+  --nut-elevator-list-item-code-font-color: #1a1a1a;
+  --nut-elevator-list-item-code-font-weight: 500;
+  --nut-elevator-list-item-code-padding: 0 20px;
+  --nut-elevator-list-item-code-height: 35px;
+  --nut-elevator-list-item-code-line-height: 35px;
+  --nut-elevator-list-item-code-after-width: 100%;
+  --nut-elevator-list-item-code-after-height: 1px;
+  --nut-elevator-list-item-code-after-bg-color: #f5f5f5;
+  --nut-elevator-list-item-code-current-box-shadow: 0 3px 3px 1px rgba(240, 240, 240, 1);
+  --nut-elevator-list-item-code-current-bg-color: #fff;
+  --nut-elevator-list-item-code-current-border-radius: 50%;
+  --nut-elevator-list-item-code-current-width: 45px;
+  --nut-elevator-list-item-code-current-height: 45px;
+  --nut-elevator-list-item-code-current-line-height: 45px;
+  --nut-elevator-list-item-code-current-position: absolute;
+  --nut-elevator-list-item-code-current-right: 60px;
+  --nut-elevator-list-item-code-current-top: 50%;
+  --nut-elevator-list-item-code-current-transform: translateY(-50%);
+  --nut-elevator-list-item-code-current-text-align: center;
+  --nut-elevator-list-item-bars-position: absolute;
+  --nut-elevator-list-item-bars-right: 8px;
+  --nut-elevator-list-item-bars-top: 50%;
+  --nut-elevator-list-item-bars-transform: translateY(-50%);
+  --nut-elevator-list-item-bars-padding: 15px 0;
+  --nut-elevator-list-item-bars-background-color: #eeeff2;
+  --nut-elevator-list-item-bars-border-radius: 6px;
+  --nut-elevator-list-item-bars-text-align: center;
+  --nut-elevator-list-item-bars-z-index: 1;
+  --nut-elevator-list-item-bars-inner-item-padding: 3px;
+  --nut-elevator-list-item-bars-inner-item-font-size: 10px;
+  --nut-elevator-list-fixed-color: var(--nut-primary-color);
+  --nut-elevator-list-fixed-bg-color: var(--nut-white);
+  --nut-elevator-list-fixed-box-shadow: 0 0 10px #eee;
+  --nut-elevator-list-item-bars-inner-item-active-color: var(--nut-primary-color);
+
+  // list
+  --nut-list-item-margin: 0 0 10px 0;
+
+  //Ecard
+  --nut-ecard-bg-color: #f0f2f5;
+
+  //addresslist
+  --nut-addresslist-bg: #fff;
+  --nut-addresslist-border: #f0f0f0;
+  --nut-addresslist-font-color: #333333;
+  --nut-addresslist-font-size: 16px;
+  --nut-addresslist-mask-bg: rgba(0, 0, 0, 0.4);
+  --nut-addresslist-addr-font-color: #666666;
+  --nut-addresslist-addr-font-size: 12px;
+  --nut-addresslist-set-bg: #f5a623;
+  --nut-addresslist-del-bg: #e1251b;
+  --nut-addresslist-contnts-contact-default: var(--nut-primary-color);
+  --nut-addresslist-contnts-contact-color: var(--nut-white);
+
+  //category
+  --nut-category-bg-color: rgba(255, 255, 255, 1);
+  --nut-category-list-left-bg-color: rgba(246, 247, 249, 1);
+  --nut-category-list-item-color: var(--nut-title-color);
+  --nut-category-list-item-checked-color: rgba(255, 255, 255, 1);
+  --nut-category-list-item-checked-img-bg-color: var(--nut-primary-color);
+  --nut-category-pane-gray-color: #666;
+  --nut-category-pane-border-color: rgb(153, 153, 153);
+  --nut-category-pane-title-color: rgba(51, 51, 51, 1);
+
+  // circleProgress
+  --nut-circleprogress-primary-color: var(--nut-primary-color);
+  --nut-circleprogress-path-color: #e5e9f2;
+  --nut-circleprogress-text-color: #000000;
+  --nut-circleprogress-text-size: var(--nut-font-size-3);
+
+  // Comment
+  --nut-comment-header-user-name-color: rgba(51, 51, 51, 1);
+  --nut-comment-header-time-color: rgba(153, 153, 153, 1);
+  --nut-comment-bottom-label-color: rgba(153, 153, 153, 1);
+  --nut-comment-shop-color: var(--nut-primary-color);
+
+  // Ellipsis
+  --nut-ellipsis-expand-collapse-color: #3460fa;
+
+  // Watermark
+  --nut-watermark-z-index: 2000;
+
+  // invoice
+  --nut-invoice-padding: 10px 10px 20px;
+
+  // TrendArrow
+  --nut-trendarrow-font-size: 14px;
+  --nut-trendarrow-before-icon-margin: 4px;
+  --nut-trendarrow-icon-width: 12px;
+}

src/sites/mobile-taro/vue/config/index.js

@@ -13,14 +13,11 @@ const config = {
   outputRoot: 'dist',
   plugins: ['@tarojs/plugin-html'],
   alias: {
-    // '@vue': path.resolve(__dirname, '../../../../../node_modules/@vue'),
+    '@vue': path.resolve(__dirname, '../../../../../node_modules/@vue'),
     '@/packages': path.resolve(__dirname, '../../../../../src/packages')
   },
   sass: {
-    resource: [
-      path.resolve(__dirname, '../../../../', 'packages/styles/variables-var.scss')
-      // path.resolve(__dirname, '../../../../', 'packages/styles/css-variables.scss'),
-    ]
+    resource: [path.resolve(__dirname, '../../../../', 'packages/styles/variables.scss')]
   },
   defineConstants: {},
   copy: {
@@ -53,6 +50,7 @@ const config = {
   h5: {
     publicPath: '/',
     staticDirectory: 'static',
+    chunkDirectory: 'chunk',
     postcss: {
       autoprefixer: {
         enable: true,

src/sites/mobile-taro/vue/config/prod.js

@@ -1,3 +1,4 @@
+const path = require('path');
 module.exports = {
   env: {
     NODE_ENV: '"production"'
@@ -5,6 +6,7 @@ module.exports = {
   defineConstants: {},
   mini: {},
   h5: {
+    publicPath: '/vue_taro/demo/'
     /**
      * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
      * 参考代码如下：

src/sites/mobile-taro/vue/src/index.html

@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
-  <meta content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-touch-fullscreen" content="yes">
-  <meta name="format-detection" content="telephone=no,address=no">
-  <meta name="apple-mobile-web-app-status-bar-style" content="white">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
-  <title></title>
-  <script>
-    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
+
+  <head>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+    <meta
+      content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"
+      name="viewport">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="format-detection" content="telephone=no,address=no">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title></title>
+    <script>
+    !function (x) { function w() { var v, u, t, tes, s = x.document, r = s.documentElement, a = r.getBoundingClientRect().width; if (!v && !u) { var n = !!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/); v = x.devicePixelRatio; tes = x.devicePixelRatio; v = n ? v : 1, u = 1 / v } if (a >= 640) { r.style.fontSize = "40px" } else { if (a <= 320) { r.style.fontSize = "20px" } else { r.style.fontSize = 20 + "px" } } } x.addEventListener("resize", function () { w() }); w() }(window);
   </script>
-</head>
-<body>
-  <div id="app"></div>
-</body>
-</html>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+
+</html>

vite.config.build.locale.ts

@@ -15,10 +15,6 @@ let input = {
 ['zh-CN', 'zh-TW', 'en-US', 'id-ID'].map((file) => {
   input[file] = `./src/packages/locale/lang/${file}`;
 });
-import fs from 'fs-extra';
-// 构建index.scss 兼容插件市场按需加载插件
-fs.outputFile(path.resolve(__dirname, './dist/packages/locale/index.scss'), ' ', 'utf8', (error) => {});
-fs.outputFile(path.resolve(__dirname, './dist/packages/locale/lang/index.scss'), ' ', 'utf8', (error) => {});
 
 export default defineConfig({
   plugins: [vue()],

vite.config.build.taro.vue.ts

@@ -61,7 +61,7 @@ export default defineConfig({
       entry: 'src/packages/nutui.taro.vue.build.ts',
       name: 'nutui',
       fileName: 'nutui',
-      formats: ['es', 'umd']
+      formats: ['umd']
     }
   }
 });

vite.config.build.ts

@@ -48,7 +48,7 @@ export default defineConfig({
       entry: 'src/packages/nutui.vue.build.ts',
       name: 'nutui',
       fileName: 'nutui',
-      formats: ['es', 'umd']
+      formats: ['umd']
     }
   }
 });

vite.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
       scss: {
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
-        additionalData: `@import "@/packages/styles/variables-var.scss";@import "@/sites/assets/styles/variables.scss";`
+        additionalData: `@import "@/packages/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`
       }
     },
     postcss: {