Merge branch 'next' of https://github.com/jdf2e/nutui into next

jd/generate-themes.js

@@ -25,7 +25,8 @@ tasks.push(fs.copy(path.resolve(__dirname, '../src/packages/styles'), path.resol
 Promise.all(tasks).then((res) => {
   let themes = [
     { file: 'default.scss', sourcePath: `@import '../variables.scss';` },
-    { file: 'jdt.scss', sourcePath: `@import '../variables-jdt.scss';` }
+    { file: 'jdt.scss', sourcePath: `@import '../variables-jdt.scss';` },
+    { file: 'jdb.scss', sourcePath: `@import '../variables-jdb.scss';` }
   ];
 
   themes.forEach((item) => {

jd/generate-types.js

@@ -5,8 +5,8 @@ let importStr = `import Locale from '../packages/locale';\n`;
 const packages = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name } = element;
-    importStr += `import ${name} from './__VUE/${name.toLowerCase()}';\n`;
+    let { name, type } = element;
+    importStr += `import ${name} from './__VUE/${name.toLowerCase()}${type === 'methods' ? '' : '/index.vue'}';\n`;
 
     packages.push(name);
   });

src/packages/__VUE/fixednav/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <nut-fixednav
-      active-text="基础用法"
+      :active-text="translate('basic')"
       :position="{ top: '70px' }"
       v-model:visible="visible"
       :nav-list="navList"
@@ -11,8 +11,8 @@
       type="left"
       :position="{ top: '140px' }"
       v-model:visible="visible1"
-      active-text="左侧收起"
-      un-active-text="左侧展开"
+      :active-text="translate('left1')"
+      :un-active-text="translate('left2')"
       :nav-list="navList"
       @selected="selected"
     />
@@ -23,7 +23,6 @@
       :nav-list="navList"
       @selected="selected"
     />
-
     <nut-fixednav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
       <template v-slot:list>
         <ul class="nut-fixednav__list">
@@ -36,21 +35,53 @@
       </template>
       <template v-slot:btn>
         <nut-icon name="retweet" color="#fff"> </nut-icon>
-        <span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
+        <span class="text">{{ myActive ? translate('cus1') : translate('cus2') }}</span>
       </template>
     </nut-fixednav>
 
     <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 -->
     <nut-drag direction="y" :style="{ right: '0px', bottom: '240px' }">
-      <nut-fixednav un-active-text="支持拖拽" v-model:visible="visible3" :nav-list="navList" @selected="selected" />
+      <nut-fixednav
+        :un-active-text="translate('drag')"
+        v-model:visible="visible3"
+        :nav-list="navList"
+        @selected="selected"
+      />
     </nut-drag>
   </div>
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('fixednav');
+const { createDemo, translate } = createComponent('fixednav');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    left1: '左侧收起',
+    left2: '左侧展开',
+    cus1: '关',
+    cus2: '开',
+    drag: '支持拖拽',
+    index: '首页',
+    category: '分类',
+    cart: '购物车',
+    my: '我的'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left1: 'Left Closed',
+    left2: 'Left Open',
+    cus1: 'Closed',
+    cus2: 'Open',
+    drag: 'Drag',
+    index: 'Index',
+    category: 'Category',
+    cart: 'Cart',
+    my: 'My'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -66,26 +97,26 @@ export default createDemo({
       }, 1000);
     });
 
-    const navList = reactive([
+    const navList = computed(() => [
       {
         id: 1,
-        text: '首页',
+        text: translate('index'),
         icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
       },
       {
         id: 2,
-        text: '分类',
+        text: translate('category'),
         icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
       },
       {
         id: 3,
-        text: '购物车',
+        text: translate('cart'),
         num: 2,
         icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
       },
       {
         id: 4,
-        text: '我的',
+        text: translate('my'),
         icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
       }
     ]);
@@ -99,7 +130,8 @@ export default createDemo({
       visible3,
       myActive,
       navList,
-      selected
+      selected,
+      translate
     };
   }
 });

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

@@ -0,0 +1,176 @@
+# FixedNav
+
+### Intro
+
+Hover stow experience Interaction for quick navigation
+
+### Install
+    
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { FixedNav,OverLay } from '@nutui/nutui';
+// taro
+import { FixedNav,OverLay } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(FixedNav);
+app.use(OverLay);
+
+```
+
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-fixednav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+ setup() {
+    const visible = ref(false);
+    const navList = reactive([
+      {
+        id: 1,
+        text: 'Index',
+        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+      },
+      {
+        id: 2,
+        text: 'Category',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+      },
+      {
+        id: 3,
+        text: 'Cart',
+        num: 2,
+        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+      },
+      {
+        id: 4,
+        text: 'My',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+      }
+    ]);
+    return {
+      visible,
+      navList
+    };
+ }
+}
+</script>
+```
+:::
+
+### Left effect
+
+``` html
+<nut-fixednav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />
+```
+
+
+### Unmask background
+
+``` html
+<nut-fixednav :overlay="false"  :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />
+```
+
+### Support drag and drop with drag
+
+``` html
+<nut-drag direction="y" :style="{right:'0px',bottom:'240px'}">
+  <nut-fixednav un-active-text="drag" v-model:visible="visible" :nav-list="navList" />
+</nut-drag>
+```
+
+### Custom use
+
+:::demo
+```html
+<template>
+<nut-fixednav :position="{top:'280px' }" type="left" v-model:visible="myActive">
+    <template v-slot:list>
+        <ul class="nut-fixednav__list">
+            <li class="nut-fixednav__list-item">1</li>
+            <li class="nut-fixednav__list-item">2</li>
+            <li class="nut-fixednav__list-item">3</li>
+            <li class="nut-fixednav__list-item">4</li>
+            <li class="nut-fixednav__list-item">5</li>
+        </ul>
+    </template>
+<template v-slot:btn>
+    <nut-icon name="retweet" color="#fff">
+    </nut-icon>
+    <span class="text">{{ myActive ? 'Open' : 'Close' }}</span>
+</template>
+</nut-fixednav>
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+ setup() {
+    const myActive = ref(false);
+    const navList = reactive([
+      {
+        id: 1,
+        text: 'Index',
+        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+      },
+      {
+        id: 2,
+        text: 'Category',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+      },
+      {
+        id: 3,
+        text: 'Cart',
+        num: 2,
+        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+      },
+      {
+        id: 4,
+        text: 'My',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+      }
+    ]);
+    return {
+      myActive,
+      navList
+    };
+ }
+}
+</script>
+```
+:::
+
+
+### Prop
+| Attribute      | Description                                         | Type    | Default                      |
+|:---------------|:----------------------------------------------------|:--------|:-----------------------------|
+| visible        | visible is                                          | Boolean | false                        |
+| nav-list       | Suspended list content data                         | Array   | []                           |
+| active-text    | Stow list button copy                               | String  | Close Nav                    |
+| un-active-text | Expand list button copy                             | String  | Open Nav                     |
+| type           | Navigation direction, optional value `left` `right` | String  | right                        |
+| overlay        | Whether to display the mask when expanding          | Boolean | true                         |
+| position       | `fixed` Vertical position                           | Object  | {top: 'auto',bottom: 'auto'} |
+
+
+### Event
+
+| Event    | Description               | Arguments                |
+|----------|---------------------------|--------------------------|
+| selected | Triggered after selection | {item:item,$event:Event} |
+
+
+### Slot
+
+| Name | Description                       |
+|------|-----------------------------------|
+| btn  | slot custom button                |
+| list | slot custom expanded list content |
+
+    

src/packages/__VUE/fixednav/doc.md

@@ -2,19 +2,20 @@
 
 ### 介绍
 
-悬浮收齐体验交互，用于快捷导航
+悬浮收起体验交互，用于快捷导航
 
 ### 安装
     
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { FixedNav } from '@nutui/nutui';
+import { FixedNav,OverLay } from '@nutui/nutui';
 // taro
-import { FixedNav } from '@nutui/nutui-taro';
+import { FixedNav,OverLay } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(FixedNav);
+app.use(OverLay);
 
 ```
 

src/packages/__VUE/navbar/doc.md

@@ -2,7 +2,6 @@
 
 ### 介绍 
 
-
 提供导航功能。
 
 ### 安装
@@ -20,49 +19,47 @@ app.use(Navbar);
 app.use(Icon);
 app.use(Tabs);
 app.use(TabPane);
-
 ```
 
 ### 基本用法
 
 :::demo
 ```html
-  <template>
-    <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
-      <template #left>
-        <div>返回</div>
-      </template>
-      <template #right>
-        <nut-icon class="right" name="share-n"></nut-icon>
-      </template>
-    </nut-navbar>
-
-    <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-right="rightClick"
-      title="浏览记录"
-      desc="清空"
-    ></nut-navbar>
-
-    <nut-navbar
-      :left-show="false"
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-icon="icon"
-      @on-click-right="rightClick"
-      title="购物车"
-      titIcon="cart2"
-      desc="编辑"
-    >
-      <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
-      </template>
-    </nut-navbar>
-  
-  </template>
-
-  <script lang="ts">
+<template>
+  <nut-navbar @on-click-back="back" @on-click-title="title" title="订单详情">
+    <template #left>
+      <div>返回</div>
+    </template>
+    <template #right>
+      <nut-icon class="right" name="share-n"></nut-icon>
+    </template>
+  </nut-navbar>
+
+  <nut-navbar
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-right="rightClick"
+    title="浏览记录"
+    desc="清空"
+  ></nut-navbar>
+
+  <nut-navbar
+    :left-show="false"
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-icon="icon"
+    @on-click-right="rightClick"
+    title="购物车"
+    titIcon="cart2"
+    desc="编辑"
+  >
+    <template #right>
+      <nut-icon class="right" name="more-x"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
   import { ref } from 'vue';
   export default {
   setup() {
@@ -92,45 +89,45 @@ app.use(TabPane);
 
 :::demo
 ```html
-  <template>
-   <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-right="rightClick"
-      desc="编辑"
-    >
-      <template #content>
-        <nut-tabs v-model="tab1value" @click="changeTab">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="店铺"> </nut-tabpane>
-        </nut-tabs>
-      </template>
-
-      <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
-      </template>
-    </nut-navbar>
-  </template>
-
-  <script lang="ts">
-    import { ref } from 'vue';
-    export default {
-    setup() {
-      const tab1value = ref(0);
-      const methods = {
-        back () {
-          alert('header头部， 点击返回');
-        },
-        title () {
-          alert('header头部， 点击title');
-        },
-        rightClick() {
-          alert('右侧点击事件');
-        },
-        changeTab(tab: any) {
-          tab1value.value = tab.paneKey as number;
-        },
-      };
+<template>
+  <nut-navbar
+    @on-click-back="back"
+    @on-click-title="title"
+    @on-click-right="rightClick"
+    desc="编辑"
+  >
+    <template #content>
+      <nut-tabs v-model="tab1value" @click="changeTab">
+        <nut-tabpane title="商品"> </nut-tabpane>
+        <nut-tabpane title="店铺"> </nut-tabpane>
+      </nut-tabs>
+    </template>
+
+    <template #right>
+      <nut-icon class="right" name="more-x"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    const tab1value = ref(0);
+    const methods = {
+      back () {
+        alert('header头部， 点击返回');
+      },
+      title () {
+        alert('header头部， 点击title');
+      },
+      rightClick() {
+        alert('右侧点击事件');
+      },
+      changeTab(tab: any) {
+        tab1value.value = tab.paneKey as number;
+      },
+    };
 
     return {
       tab1value,
@@ -139,7 +136,6 @@ app.use(TabPane);
   }
 }
 </script>
-
 ```
 :::
 
@@ -147,44 +143,44 @@ app.use(TabPane);
 
 :::demo
 ```html
-  <template>
-    <nut-navbar @on-click-back="back" >
-      <template #content>
-        <nut-tabs v-model="tab2value" @click="changeTabList">
-          <nut-tabpane title="商品"> </nut-tabpane>
-          <nut-tabpane title="评价"> </nut-tabpane>
-          <nut-tabpane title="详情"> </nut-tabpane>
-          <nut-tabpane title="推荐"> </nut-tabpane>
-        </nut-tabs>
-      </template>
-      <template #icons>
-        <nut-icon class="icon" name="share"></nut-icon>
-      </template>
-
-      <template #right>
-        <nut-icon class="right" name="horizontal-n"></nut-icon>
-      </template>
-    </nut-navbar>
-  </template>
-
-  <script lang="ts">
-    import { ref } from 'vue';
-    export default {
-      setup() {
-      const tab2value = ref(0);
-      const methods = {
-        back() {
-          alert('header头部， 点击返回');
-        },
-        changeTabList(tab: any) {
-          tab2value.value = tab.paneKey as number;
-        }
-      };
-      return {
-        tab2value,
-        ...methods
-      };
-    }
+<template>
+  <nut-navbar @on-click-back="back" >
+    <template #content>
+      <nut-tabs v-model="tab2value" @click="changeTabList">
+        <nut-tabpane title="商品"> </nut-tabpane>
+        <nut-tabpane title="评价"> </nut-tabpane>
+        <nut-tabpane title="详情"> </nut-tabpane>
+        <nut-tabpane title="推荐"> </nut-tabpane>
+      </nut-tabs>
+    </template>
+    <template #icons>
+      <nut-icon class="icon" name="share"></nut-icon>
+    </template>
+
+    <template #right>
+      <nut-icon class="right" name="horizontal-n"></nut-icon>
+    </template>
+  </nut-navbar>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  export default {
+    setup() {
+    const tab2value = ref(0);
+    const methods = {
+      back() {
+        alert('header头部， 点击返回');
+      },
+      changeTabList(tab: any) {
+        tab2value.value = tab.paneKey as number;
+      }
+    };
+    return {
+      tab2value,
+      ...methods
+    };
+  }
 }
 </script>
 

src/packages/__VUE/rate/demo.vue

@@ -1,37 +1,63 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-rate v-model="state.val" />
 
-    <h2>半星</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-rate allow-half v-model="state.val1"></nut-rate>
 
-    <h2>自定义 icon </h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="state.val2"></nut-rate>
 
-    <h2>自定义数量</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-rate :count="6" v-model="state.val3"></nut-rate>
 
-    <h2>自定义颜色</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate>
 
-    <h2>禁用状态</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-rate disabled v-model="state.val5"></nut-rate>
 
-    <h2>只读状态</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-rate v-model="state.val6" readonly></nut-rate>
 
-    <h2>绑定事件</h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
-    <h2>自定义尺寸 35px</h2>
+
+    <h2>{{ translate('title8') }}</h2>
     <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('rate');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+const { createDemo, translate } = createComponent('rate');
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '半星',
+    title2: '自定义 icon',
+    title3: '自定义数量',
+    title4: '自定义颜色',
+    title5: '禁用状态',
+    title6: '只读状态',
+    title7: '绑定事件',
+    title8: '自定义尺寸 35px'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Half Star',
+    title2: 'Custom icon',
+    title3: 'Custom quantity',
+    title4: 'Custom color',
+    title5: 'disabled state',
+    title6: 'read-only status',
+    title7: 'bind event',
+    title8: 'Custom size 35px'
+  }
+});
 export default createDemo({
   setup() {
     let { proxy } = getCurrentInstance();
@@ -52,7 +78,8 @@ export default createDemo({
     };
     return {
       state,
-      onChange
+      onChange,
+      translate
     };
   }
 });

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

@@ -0,0 +1,219 @@
+# Rate
+
+### Intro
+
+Use for quick rating actions, or to showcase reviews.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+//vue
+import { Rate,Icon } from '@nutui/nutui';
+//taro
+import { Rate,Icon } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Rate);
+app.use(Icon);
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Half Star
+
+:::demo
+```html
+<template>
+    <nut-rate allow-half v-model="value"></nut-rate>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3.5);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Custom icon
+
+:::demo
+```html
+<template>
+    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Custom quantity
+
+:::demo
+```html
+<template>
+    <nut-rate :count="6" v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### Custom color
+
+:::demo
+```html
+<template>
+    <nut-rate active-color="#FFC800" v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### disabled state
+
+:::demo
+```html
+<template>
+    <nut-rate disabled v-model="value" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+### read-only status
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" readonly />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+### bind event
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" @change="onChange" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+    setup() {
+        const value = ref(3);
+        const onChange = (val)=>{
+            Toast.text(val);
+        }
+    return { value,onChange }
+    }
+}
+</script>
+```
+:::
+
+### Custom size 35px
+
+:::demo
+```html
+<template>
+    <nut-rate v-model="value" icon-size="35" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+
+
+## Prop
+
+| Attribute       | Description                                                                      | Type    | Default          |
+|-----------------|----------------------------------------------------------------------------------|---------|------------------|
+| v-model         | The current number of stars, you can use v-model to bind data in both directions | Number  | -                |
+| count           | Total number of stars                                                            | Number  | 5                |
+| icon-size       | Star size                                                                        | Number  | 18               |
+| active-color    | Icon selection color                                                             | String  | #fa200c          |
+| void-color      | Icon unselected color                                                            | String  | #ccc             |
+| unchecked-icon  | Use icon (unchecked)[icon name](#/icon)                                          | String  | star-n           |
+| checked-icon    | Use icon (checked)[icon name](#/icon)                                            | String  | star-fill-n      |
+| font-class-name | Custom icon font base class name                                                 | String  | `nutui-iconfont` |
+| class-prefix    | Custom icon class name prefix for using custom icons                             | String  | `nut-icon`       |
+| allow-half      | half star                                                                        | Boolean | false            |
+| readonly        | read-only                                                                        | Boolean | false            |
+| disabled        | whether to disable                                                               | Boolean | false            |
+| spacing         | spacing                                                                          | Number  | 20               |
+
+## Event
+| Event  | Description                                                | Arguments |
+|--------|------------------------------------------------------------|-----------|
+| change | An event that fires whenever the current score is modified | val       |

src/packages/__VUE/tabbar/demo.vue

@@ -113,7 +113,7 @@ export default createDemo({
   props: {},
   setup() {
     const active = ref(2);
-    function tabSwitch(item: object, index: number) {
+    function tabSwitch(item: Record<string, unknown>, index: number) {
       console.log(item, index);
     }
     return {

src/packages/__VUE/tabbar/doc.md

@@ -8,14 +8,13 @@
 ``` javascript
 import { createApp } from 'vue';
 //vue
-import { Tabbar,TabbarItem,Icon } from '@nutui/nutui';
+import { Tabbar, TabbarItem, Icon } from '@nutui/nutui';
 //taro
-import { Tabbar,TabbarItem,Icon } from '@nutui/nutui-taro';
+import { Tabbar, TabbarItem, Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Tabbar);
 app.use(TabbarItem);
-
 ```
 
 
@@ -25,13 +24,13 @@ app.use(TabbarItem);
 :::demo
 ```html
 <template>
-<nut-tabbar @tab-switch="tabSwitch">
-  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-</nut-tabbar>
+  <nut-tabbar @tab-switch="tabSwitch">
+    <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
 </template>
 <script>
   export default{
@@ -44,7 +43,6 @@ app.use(TabbarItem);
       };
     },
   }
-  
 </script>
 ```
 :::
@@ -54,33 +52,33 @@ app.use(TabbarItem);
 :::demo
 ```html
 <template>
-<nut-tabbar @tab-switch="tabSwitch">
-      <nut-tabbar-item
-        tab-title="首页"
-        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
-        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
-      ></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="分类"
-        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
-        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
-      ></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="发现"
-        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
-        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
-      ></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="购物车"
-        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
-        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
-      ></nut-tabbar-item>
-      <nut-tabbar-item
-        tab-title="我的"
-        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
-        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
-      ></nut-tabbar-item>
-    </nut-tabbar>
+  <nut-tabbar @tab-switch="tabSwitch">
+    <nut-tabbar-item
+      tab-title="首页"
+      img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
+      activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
+    ></nut-tabbar-item>
+    <nut-tabbar-item
+      tab-title="分类"
+      img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
+      activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
+    ></nut-tabbar-item>
+    <nut-tabbar-item
+      tab-title="发现"
+      img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
+      activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
+    ></nut-tabbar-item>
+    <nut-tabbar-item
+      tab-title="购物车"
+      img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
+      activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
+    ></nut-tabbar-item>
+    <nut-tabbar-item
+      tab-title="我的"
+      img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
+      activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
+    ></nut-tabbar-item>
+  </nut-tabbar>
 </template>
 <script>
   export default{
@@ -93,7 +91,6 @@ app.use(TabbarItem);
       };
     },
   }
-  
 </script>
 ```
 :::
@@ -102,13 +99,13 @@ app.use(TabbarItem);
 :::demo
 ```html
 <template>
-<nut-tabbar v-model:visible="active" size="18px">
-      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-    </nut-tabbar>
+  <nut-tabbar v-model:visible="active" size="18px">
+    <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
 </template>
 ```
 :::
@@ -132,13 +129,13 @@ app.use(TabbarItem);
 :::demo
 ```html
 <template>
- <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
-    </nut-tabbar>
+  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
 </template>
 ```
 :::

src/packages/__VUE/tabbar/index.vue

@@ -65,6 +65,7 @@ export default create({
         parentData.modelValue = value;
       }
     );
+
     return {
       changeIndex
     };

src/packages/__VUE/tabs/demo.vue

@@ -1,41 +1,41 @@
 <template>
   <div class="demo full">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-tabs v-model="state.tab1value">
       <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>基础用法-微笑曲线</h2>
+    <h2>{{ translate('title1') }}</h2>
     <nut-tabs v-model="state.tab11value" type="smile">
       <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>通过 pane-key 匹配</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-tabs v-model="state.tab2value">
       <nut-tabpane title="Tab 1" pane-key="0"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3" pane-key="2"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>数据异步渲染 3s</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-tabs v-model="state.tab3value">
       <nut-tabpane v-for="item in state.list3" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
 
-    <h2>数量多,滚动操作</h2>
+    <h2>{{ translate('title4') }}</h2>
     <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
       <nut-tabpane v-for="item in state.list4" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
-    <h2>左右布局</h2>
+    <h2>{{ translate('title5') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab5value" title-scroll direction="vertical">
       <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
-    <h2>左右布局-微笑曲线</h2>
+    <h2>{{ translate('title6') }}</h2>
     <nut-tabs style="height: 300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
       <nut-tabpane v-for="item in state.list5" :title="'Tab ' + item"> Tab {{ item }} </nut-tabpane>
     </nut-tabs>
-    <h2>标签栏字体尺寸 large normal small </h2>
+    <h2>{{ translate('title7') }}</h2>
     <nut-tabs v-model="state.tab1value" size="large">
       <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
@@ -51,7 +51,7 @@
       <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
       <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
     </nut-tabs>
-    <h2>自定义标签栏</h2>
+    <h2>{{ translate('title8') }}</h2>
     <nut-tabs v-model="state.tab7value">
       <template v-slot:titles>
         <div
@@ -74,9 +74,37 @@
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { reactive, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('tabs');
+const { createDemo, translate } = createComponent('tabs');
+
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '基础用法-微笑曲线',
+    title2: '通过 pane-key 匹配',
+    title3: '数据异步渲染 3s',
+    title4: '数量多,滚动操作',
+    title5: '左右布局',
+    title6: '左右布局-微笑曲线',
+    title7: '标签栏字体尺寸 large normal small',
+    title8: '自定义标签栏',
+    custom: (val: string) => `自定义 ${1}`
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Basic Usage - Smile Curve',
+    title2: 'Match by pane-key',
+    title3: 'Data is rendered asynchronously for 3s',
+    title4: 'A large number of scrolling operations',
+    title5: 'Left and right layout',
+    title6: 'Left and Right Layout - Smile Curve',
+    title7: 'tab bar font size large normal small',
+    title8: 'custom tab bar',
+    custom: (val: string) => `custom ${1}`
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -92,29 +120,29 @@ export default createDemo({
       list3: Array.from(new Array(2).keys()),
       list4: Array.from(new Array(10).keys()),
       list5: Array.from(new Array(2).keys()),
-      list6: [
+      list6: computed(() => [
         {
-          title: '自定义 1',
+          title: translate('custom', 1),
           paneKey: 'c1',
           icon: 'dongdong'
         },
         {
-          title: '自定义 2',
+          title: translate('custom', 2),
           paneKey: 'c2',
           icon: 'JD'
         },
         {
-          title: '自定义 3',
+          title: translate('custom', 3),
           paneKey: 'c3'
         }
-      ]
+      ])
     });
     setTimeout(() => {
       state.list3.push(999);
       state.tab3value = '2';
     }, 3000);
 
-    return { state };
+    return { state, translate };
   }
 });
 </script>

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

@@ -0,0 +1,347 @@
+# Tabs
+
+### Intro
+
+It is often used for the storage and display of large blocks of content in the level area, and supports the form of embedded tags and rendering loop data.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { Tabs, TabPane } from '@nutui/nutui';
+// taro
+import { Tabs, TabPane } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Tabs);
+app.use(TabPane);
+```
+
+### Basic Usage
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab1value">
+  <nut-tabpane title="Tab 1">
+    Tab 1
+  </nut-tabpane>
+  <nut-tabpane title="Tab 2">
+    Tab 2
+  </nut-tabpane>
+  <nut-tabpane title="Tab 3">
+    Tab 3
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab1value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Basic Usage - Smile Curve
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab11value" type="smile">
+  <nut-tabpane title="Tab 1">
+    Tab 1
+  </nut-tabpane>
+  <nut-tabpane title="Tab 2">
+    Tab 2
+  </nut-tabpane>
+  <nut-tabpane title="Tab 3">
+    Tab 3
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab11value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Match by pane-key
+
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab2value">
+  <nut-tabpane title="Tab 1" pane-key="0">
+    Tab 1
+  </nut-tabpane>
+  <nut-tabpane title="Tab 2" pane-key="1" :disabled="true">
+    Tab 2
+  </nut-tabpane>
+  <nut-tabpane title="Tab 3" pane-key="2">
+    Tab 3
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab2value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Data is rendered asynchronously for 3s
+
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab3value">
+  <nut-tabpane v-for="item in state.list3" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab3value: '0',
+      list3: Array.from(new Array(2).keys()),
+    });
+    setTimeout(() => {
+      state.list3.push(999);
+      state.tab3value = '2';
+    }, 3000);
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### A large number of scrolling operations
+
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
+  <nut-tabpane v-for="item in state.list4" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab1value: '0',
+      list4: Array.from(new Array(10).keys()),
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Left and right layout
+
+:::demo
+```html
+<template>
+<nut-tabs style="height:300px" v-model="state.tab5value" title-scroll direction="vertical">
+  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab5value: '0',
+      list5: Array.from(new Array(2).keys()),
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### Left and Right Layout - Smile Curve
+
+:::demo
+```html
+<template>
+<nut-tabs style="height:300px" v-model="state.tab6value" type="smile" title-scroll direction="vertical">
+  <nut-tabpane v-for="item in state.list5" :title="'Tab '+ item">
+    Tab {{item}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab6value: '0',
+      list5: Array.from(new Array(2).keys()),
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### tab bar font size large normal small
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab1value" size="large">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+<nut-tabs v-model="state.tab1value" size="normal">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+<nut-tabs v-model="state.tab1value" size="small">
+  <nut-tabpane title="Tab 1"> Tab 1 </nut-tabpane>
+  <nut-tabpane title="Tab 2"> Tab 2 </nut-tabpane>
+  <nut-tabpane title="Tab 3"> Tab 3 </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab1value: '0',
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+### custom tab bar
+:::demo
+```html
+<template>
+<nut-tabs v-model="state.tab7value">
+  <template v-slot:titles>
+    <div class="nut-tabs__titles-item" @click="state.tab7value=item.paneKey"
+      :class="{active:state.tab7value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
+      <nut-icon v-if="item.icon" :name="item.icon" />
+      <span class="nut-tabs__titles-item__text">{{item.title}}</span>
+      <span class="nut-tabs__titles-item__line"></span>
+    </div>
+  </template>
+  <nut-tabpane v-for="item in state.list6" :pane-key="item.paneKey">
+    {{item.title}}
+  </nut-tabpane>
+</nut-tabs>
+</template>
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      tab7value: 'c1',
+       list6: [
+        {
+          title: 'custom 1',
+          paneKey: 'c1',
+          icon: 'dongdong'
+        },
+        {
+          title: 'custom 2',
+          paneKey: 'c2',
+          icon: 'JD'
+        },
+        {
+          title: 'custom 3',
+          paneKey: 'c3'
+        }
+      ]
+    });
+    return { state };
+  }
+};
+</script>
+```
+:::
+
+## API
+
+### Tabs Props
+
+| Attribute     | Description                                                       | Type          | Default    |
+|---------------|-------------------------------------------------------------------|---------------|------------|
+| v-model       | Index of active tab                                               | number,string | 0          |
+| color         | Label selection color                                             | string        | #1a1a1a    |
+| background    | Tab bar background color                                          | string        | #f5f5f5    |
+| direction     | Use landscape orientation optional value `horizontal`、`vertical` | string        | horizontal |
+| type          | Check the bottom display style optional value `line`、`smile`     | string        | line       |
+| title-scroll  | Is the tab bar scrollable                                         | boolean       | false      |
+| ellipsis      | Whether to omit too long title text                               | boolean       | true       |
+| animated-time | Switch animation duration, unit ms 0 means no animation           | number,string | 300        |
+| title-gutter  | Label gap                                                         | number,string | 0          |
+| size`v3.1.13` | Tab bar font size optional value  `large` `normal` `small`        | string        | normal     |
+
+## Tabs Slots
+
+| Name    | Description            |
+|---------|------------------------|
+| titles  | Custom Titles Area     |
+| default | Custom Default Content |
+
+### Tabpane Props
+
+| Attribute | Description                       | Type    | Default          |
+|-----------|-----------------------------------|---------|------------------|
+| title     | title                             | string  |                  |
+| pane-key  | Tag Key , the matching identifier | string  | 默认索引0,1,2... |
+| disabled  | whether to disable tabs           | boolean | false            |
+
+
+## Tabpane Slots
+
+| Name    | Description            |
+|---------|------------------------|
+| default | Custom Default Content |
+
+### Tabs Events
+
+| Event  | Description                                 | Arguments                |
+|--------|---------------------------------------------|--------------------------|
+| click  | Triggered when the label is clicked         | {title,paneKey,disabled} |
+| change | Fired when the currently active tab changes | {title,paneKey,disabled} |
+

src/packages/__VUE/video/demo.vue

@@ -1,41 +1,63 @@
 <template>
   <div class="demo">
-    <h4>基础用法</h4>
+    <h4>{{ translate('basic') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>自动播放</h4>
+    <h4>{{ translate('title1') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options1" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>初始化静音</h4>
+    <h4>{{ translate('title2') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options2" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>视频封面海报设置</h4>
+    <h4>{{ translate('title3') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options3" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>行内播放</h4>
+    <h4>{{ translate('title4') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options4" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>设置视频为背景图</h4>
+    <h4>{{ translate('title5') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source" :options="options5" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <h4>视频切换</h4>
+    <h4>{{ translate('title6') }}</h4>
     <nut-cell class="cell">
       <nut-video :source="source1" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
     </nut-cell>
-    <nut-button type="primary" @click="changeVideo" class="m-b">切换视频</nut-button>
+    <nut-button type="primary" @click="changeVideo" class="m-b">{{ translate('title6') }}</nut-button>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('video');
+const { createDemo, translate } = createComponent('video');
+
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '自动播放',
+    title2: '初始化静音',
+    title3: '视频封面海报设置',
+    title4: '行内播放',
+    title5: '设置视频为背景图',
+    title6: '视频切换'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Auto play',
+    title2: 'Initialize mute',
+    title3: 'Video cover poster settings',
+    title4: 'play inline',
+    title5: 'Set video as background',
+    title6: 'Video switching'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -85,7 +107,7 @@ export default createDemo({
       state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
     };
 
-    return { play, pause, playend, ...toRefs(state), changeVideo };
+    return { play, pause, playend, ...toRefs(state), changeVideo, translate };
   }
 });
 </script>

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

@@ -0,0 +1,267 @@
+#  Video
+
+### Intro
+
+Video player implemented by native video
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+import { Video, Button } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Video);
+```
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-video
+    :source="source"
+    :options="options"
+    @play="play"
+    @pause="pause"
+    @playend="playend">
+  </nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      source: {
+        src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D",
+        type: "video/mp4",
+      },
+      options: {
+        controls: true,
+      },
+    });
+    const play = (elm: any) => console.log('play', elm);
+    const pause = (elm: any) => console.log('pause', elm);
+    const playend = (elm: any) => console.log('playend', elm);
+
+    return { ...toRefs(state), play, pause, playend,  };
+  }
+}
+</script>
+```
+:::
+
+### Auto play
+`autoplay` Property to set video autoplay
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          autoplay: true,
+          muted: true,
+          controls: true
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Initialize mute
+The `muted` property sets the initial mute of the video
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          muted: true,
+          controls: true
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Video cover poster settings
+The `poster` property sets the video poster
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          controls: true,
+          poster: 'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+
+:::
+
+### play inline
+The `playsinline` property sets the mobile terminal video to play in line and prevents the newly opened page from playing (compatible with IOS and some Android machines)
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          playsinline: true,
+          controls: true,
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Set video as background
+When setting the video as the background image, it is necessary to set `muted`, `disabled`, `operation prohibited`, `loop`, `loop` and `autoplay` to `true`, and the mobile terminal needs to set `playinline` for in-line display
+
+:::demo
+```html
+<template>
+  <nut-video :source="source" :options="options"></nut-video>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source: {
+          src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
+          type: 'video/mp4'
+        },
+        options: {
+          controls: false,
+          autoplay: true,
+          muted: true,
+          disabled: true,
+          playsinline: true,
+          loop: true
+        },
+      });
+
+      return { ...toRefs(state) };
+  }
+}
+</script>
+```
+:::
+
+### Video switching
+Reset the video when the video address changes
+
+:::demo
+```html
+<template>
+  <nut-video :source="source1" :options="options"></nut-video>
+  <nut-button type="primary" @click="changeVideo">Video switching</nut-button>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+  setup() {
+      const state = reactive({
+        source1: {
+          src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
+          type: 'video/mp4'
+        },
+        options: {
+          controls: true
+        },
+      });
+      const changeVideo = () => {
+        state.source1.src = 'https://vjs.zencdn.net/v/oceans.mp4';
+      };
+
+      return { ...toRefs(state), changeVideo };
+  }
+}
+</script>
+```
+:::
+
+
+## API
+
+### Props
+
+| Attribute           | Description                                                                        | Type    | Default  |
+|---------------------|------------------------------------------------------------------------------------|---------|----------|
+| source              | Video url and type settings                                                        | Object  | -        |
+| options             | Control video playback properties                                                  | Object  | required |
+| options.autoplay    | Auto play                                                                          | Boolean | false    |
+| options.poster      | Poster settings                                                                    | String  | -        |
+| options.loop        | Poster loop                                                                        | Boolean | false    |
+| options.controls    | Show operation control                                                             | Boolean | true     |
+| options.muted       | Mute                                                                               | Boolean | false    |
+| options.volume      | Volume control                                                                     | Number  | 0.5      |
+| options.disabled    | Disable operation (e.g. background image of circular playback, prohibit operation) | Boolean | false    |
+| options.playsinline | Whether to set as inline playback element (solve Android compatibility problem)    | Boolean | false    |
+
+### Events
+
+| Event   | Description                  | Arguments |
+|---------|------------------------------|-----------|
+| play    | play event                   | -         |
+| pause   | pause event                  | -         |
+| playend | Playback completion callback | -         |

src/packages/styles/variables-jdb.scss

@@ -0,0 +1,843 @@
+//B商城设计变量
+//-------------色彩变量
+//品牌色
+$tdd-color-brand-normal: #f82c45 !default;
+$tdd-color-brand-gradient-normal-1: #ff566a !default;
+$tdd-color-brand-gradient-normal-2: #f82c45 !default;
+//辅助色
+$tdd-color-auxiliary-normal: #ffa41c !default;
+$tdd-color-auxiliary-gradient-normal-1: #ffba0d !default;
+$tdd-color-auxiliary-gradient-normal-2: #ffa41c !default;
+//功能色
+$tdd-color-success-normal: #00c38f !default;
+$tdd-color-nfos-normal: #4d84fe !default;
+$tdd-color-warning: #de6a1c !default;
+$tdd-color-error: #ff1923 !default;
+//中性色
+$tdd-color-font-400: #1a1a1a !default;
+$tdd-color-font-300: #666666 !default;
+$tdd-color-font-200: #999999 !default;
+$tdd-color-font-100: #cccccc !default;
+//填充
+$tdd-color-fill-400: #cccccc !default;
+$tdd-color-fill-300: #ebebeb !default;
+$tdd-color-fill-200: #f4f4f4 !default;
+$tdd-color-fill-100: #f7f7f7 !default;
+//线
+$tdd-color-line-300: #999999 !default;
+$tdd-color-line-200: #ebebeb !default;
+$tdd-color-line-100: #f4f4f4 !default;
+//黑白
+$tdd-color-black: rgba(0, 0, 0, 1) !default;
+$tdd-color-black-80: rgba(0, 0, 0, 0.8) !default;
+$tdd-color-black-50: rgba(0, 0, 0, 0.5) !default;
+$tdd-color-black-10: rgba(0, 0, 0, 0.1) !default;
+$tdd-color-black-2: rgba(0, 0, 0, 0.02) !default;
+$tdd-color-white: #ffffff !default;
+
+//-------------文字变量
+//字号梯度
+$tdd-font-size-1: 30px !default;
+$tdd-font-size-2: 24px !default;
+$tdd-font-size-3: 20px !default;
+$tdd-font-size-4: 18px !default;
+$tdd-font-size-5: 16px !default;
+$tdd-font-size-6: 14px !default;
+$tdd-font-size-7: 12px !default;
+$tdd-font-size-8: 10px !default;
+//价格梯度 多个字体组成
+//行高
+$tdd-line-height-1: 1 !default;
+$tdd-line-height-2: 1.5 !default;
+$tdd-line-height-3: 2 !default;
+
+//-------------图标
+
+//-------------倒角
+$tdd-border-radius-1: 2px !default;
+$tdd-border-radius-2: 4px !default;
+$tdd-border-radius-3: 4px !default;
+$tdd-border-radius-4: 4px !default;
+$tdd-border-radius-5: 8px !default;
+$tdd-border-radius-6: 6px !default;
+$tdd-border-radius-7: 8px !default;
+$tdd-border-radius-8: 8px !default;
+$tdd-border-radius-9: 8px !default;
+$tdd-border-radius-10: 6px !default;
+
+//----------------
+// 禁用透明度
+$primary-disabled-opacity: 1 !default;
+// 主色调
+$primary-color: $tdd-color-brand-normal !default;
+$primary-color-start: $tdd-color-brand-gradient-normal-1 !default;
+$primary-color-end: $tdd-color-brand-gradient-normal-2 !default;
+
+// 辅助色
+$help-color: #f5f5f5 !default;
+// 标题常规文字
+$title-color: #1a1a1a !default;
+// 副标题
+$title-color2: #666666 !default;
+// 次内容
+$text-color: #808080 !default;
+// 特殊禁用色
+$disable-color: #cccccc !default;
+$white: #fff !default;
+$black: #000 !default;
+
+$font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
+
+// ---- Animation ----
+$animation-duration: 0.25s !default;
+$animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
+
+// Font
+$font-size-0: 10px !default;
+$font-size-1: 12px !default;
+$font-size-2: 14px !default;
+$font-size-3: 16px !default;
+$font-size-4: 18px !default;
+$font-weight-bold: 400 !default;
+
+$font-size-small: $font-size-1 !default;
+$font-size-base: $font-size-2 !default;
+$font-size-large: $font-size-3 !default;
+$line-height-base: 1.5 !default;
+
+// button
+$button-border-radius: $tdd-border-radius-7 !default;
+$button-border-width: 1px !default;
+$button-default-bg-color: $white !default;
+$button-default-border-color: rgba(204, 204, 204, 1) !default;
+$button-default-color: rgba(102, 102, 102, 1) !default;
+$button-default-padding: 0 18px !default;
+$button-mini-padding: 0 12px !default;
+$button-small-padding: 0 12px !default;
+$button-small-height: 28px !default;
+$button-mini-height: 24px !default;
+$button-default-height: 38px !default;
+$button-large-height: 48px !default;
+$button-large-line-height: 46px !default;
+$button-small-line-height: 26px !default;
+$button-block-height: 48px !default;
+$button-default-line-height: 36px !default;
+$button-block-line-height: 46px !default;
+$button-default-font-size: $font-size-2 !default;
+$button-small-font-size: $font-size-1 !default;
+$button-mini-font-size: $font-size-1 !default;
+$button-disabled-opacity: $primary-disabled-opacity !default;
+$button-primary-color: $tdd-color-white !default;
+$button-primary-border-color: $tdd-color-brand-normal !default;
+$button-primary-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$button-info-color: $white !default;
+$button-info-border-color: rgba(73, 106, 242, 1) !default;
+$button-info-background-color: linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%) !default;
+$button-success-color: $white !default;
+$button-success-border-color: rgba(38, 191, 38, 1) !default;
+$button-success-background-color: linear-gradient(
+  135deg,
+  rgba(38, 191, 38, 1) 0%,
+  rgba(39, 197, 48, 1) 45%,
+  rgba(40, 207, 63, 1) 83%,
+  rgba(41, 212, 70, 1) 100%
+) !default;
+
+$button-danger-color: $white !default;
+$button-danger-border-color: rgba(250, 44, 25, 1) !default;
+$button-danger-background-color: rgba(250, 44, 25, 1) !default;
+$button-warning-color: $white !default;
+$button-warning-border-color: rgba(255, 158, 13, 1) !default;
+$button-warning-background-color: linear-gradient(
+  135deg,
+  rgba(255, 158, 13, 1) 0%,
+  rgba(255, 167, 13, 1) 45%,
+  rgba(255, 182, 13, 1) 83%,
+  rgba(255, 190, 13, 1) 100%
+) !default;
+$button-plain-background-color: $white !default;
+
+// cell
+
+$cell-color: $title-color2 !default;
+$cell-title-font: $font-size-2 !default;
+$cell-title-desc-font: $font-size-1 !default;
+$cell-desc-font: $font-size-2 !default;
+$cell-desc-color: $disable-color !default;
+$cell-border-radius: 6px !default;
+$cell-padding: 13px 16px !default;
+$cell-line-height: 20px !default;
+$cell-after-right: 16px !default;
+$cell-after-border-bottom: 2px solid #f5f6f7 !default;
+$cell-default-icon-margin: 0 4px 0 0px !default;
+
+// cell-group
+
+$cell-group-title-padding: 0 10px !default;
+$cell-group-title-color: #909ca4 !default;
+$cell-group-title-font-size: $font-size-2 !default;
+$cell-group-title-line-height: 20px !default;
+$cell-group-desc-padding: 0 10px !default;
+$cell-group-desc-color: #909ca4 !default;
+$cell-group-desc-font-size: $font-size-1 !default;
+$cell-group-desc-line-height: 16px !default;
+$cell-group-background-color: $white !default;
+
+// divider
+
+$divider-margin: 16px 0 !default;
+$divider-text-font-size: $font-size-2 !default;
+$divider-text-color: #909ca4 !default;
+$divider-line-height: 2px !default;
+$divider-before-margin-right: 16px !default;
+$divider-after-margin-left: 16px !default;
+
+// icon
+
+$icon-height: 20px !default;
+$icon-width: 20px !default;
+$icon-line-height: 20px !default;
+
+// uploader
+
+$uploader-picture-width: 100px !default;
+$uploader-picture-height: 100px !default;
+$uploader-background: #f7f8fa !default;
+
+// picker
+$picker-cancel-color: #808080 !default;
+$picker-ok-color: $primary-color !default;
+$picker-bar-cancel-font-size: 14px !default;
+$picker-bar-ok-font-size: 14px !default;
+$picker-bar-button-padding: 0 15px !default;
+$picker-bar-title-font-size: 16px !default;
+$picker-bar-title-color: $title-color !default;
+$picker-bar-title-font-weight: normal !default;
+$picker-item-height: 36px !default;
+$picker-item-text-color: #808080 !default;
+$picker-item-active-text-color: inherit !default;
+$picker-item-text-font-size: 16px !default;
+$picker-item-active-line-border: 1px solid #d8d8d8 !default;
+$picker-columns-item-color: $title-color !default;
+
+//input
+$input-border-bottom: #eaf0fb !default;
+$input-disabled-color: #c8c9cc !default;
+$input-required-color: $primary-color !default;
+$input-font-size: $font-size-2 !default;
+
+// textarea
+
+$textarea-font: $font-size-2 !default;
+$textarea-height: 100px !default;
+$textarea-limit-color: $text-color !default;
+$textarea-text-color: $title-color !default;
+$textarea-disabled-color: $disable-color !default;
+
+// inputnumber
+
+$inputnumber-icon-color: $title-color !default;
+$inputnumber-icon-void-color: $disable-color !default;
+$inputnumber-icon-size: 20px !default;
+$inputnumber-input-font-size: 12px !default;
+$inputnumber-input-font-color: $title-color !default;
+$inputnumber-input-background-color: $help-color !default;
+$inputnumber-input-border-radius: 4px !default;
+$inputnumber-input-width: 40px !default;
+$inputnumber-input-margin: 0 6px !default;
+$inputnumber-input-border: 0 !default;
+
+// actionsheet
+$actionsheet-light-color: #f6f6f6 !default;
+$actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-size: $font-size-2 !default;
+$actionsheet-item-subdesc-font-size: $font-size-1 !default;
+$actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
+$actionsheet-item-line-height: 24px !default;
+$actionsheet-item-font-color: $title-color !default;
+
+//shortpassword
+$shortpassword-background-color: rgba(245, 245, 245, 1) !default;
+$shortpassword-border-color: #ddd !default;
+$shortpassword-error: $primary-color !default;
+$shortpassword-forget: rgba(128, 128, 128, 1) !default;
+
+//numberkeyboard
+$numberkeyboard-width: 100% !default;
+$numberkeyboard-padding: 0 0 22px 0 !default;
+$numberkeyboard-background-color: #f2f3f5 !default;
+$numberkeyboard-header-height: 34px !default;
+$numberkeyboard-header-padding: 6px 0 0 0 !default;
+$numberkeyboard-header-color: #646566 !default;
+$numberkeyboard-header-font-size: 16px !default;
+$numberkeyboard-header-close-padding: 0 16px !default;
+$numberkeyboard-header-close-color: #576b95 !default;
+$numberkeyboard-header-close-font-size: 14px !default;
+$numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-key-background-color: #fff !default;
+$numberkeyboard-key-active-background-color: #ebedf0 !default;
+$numberkeyboard-key-height: 48px !default;
+$numberkeyboard-key-line-height: 1.5 !default;
+$numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-font-size: 28px !default;
+$numberkeyboard-key-font-size-color: #333 !default;
+$numberkeyboard-key-finish-font-size: 16px !default;
+$numberkeyboard-key-finish-font-size-color: #fff !default;
+$numberkeyboard-key-finish-background-color: #1989fa !default;
+$numberkeyboard-key-activeFinsh-background-color: #0570db !default;
+
+// countdown
+$countdown-display: flex !default;
+$countdown-color: inherit !default;
+$countdown-font-size: initial !default;
+
+//large price
+$price-symbol-big-size: 18px !default;
+$price-big-size: 24px !default;
+$price-decimal-big-size: 18px !default;
+
+//normal price
+$price-symbol-medium-size: 14px !default;
+$price-medium-size: 16px !default;
+$price-decimal-medium-size: 14px !default;
+
+// small price
+$price-symbol-small-size: 10px !default;
+$price-small-size: 12px !default;
+$price-decimal-small-size: 10px !default;
+
+//avatar
+$avatar-square: 5px !default;
+$avatar-large-width: 60px !default;
+$avatar-large-height: 60px !default;
+$avatar-small-width: 32px !default;
+$avatar-small-height: 32px !default;
+$avatar-normal-width: 40px !default;
+$avatar-normal-height: 40px !default;
+
+//switch
+$switch-close-bg-color: #ebebeb !default;
+$switch-close--cline-bg-color: #f0f0f0 !default;
+$switch-width: 36px !default;
+$switch-height: 21px !default;
+$switch-line-height: 21px !default;
+$switch-border-radius: 21px !default;
+$switch-inside-width: 13px !default;
+$switch-inside-height: 13px !default;
+$switch-inside-open-transform: translateX(146%) !default;
+$switch-inside-close-transform: translateX(30%) !default;
+
+// toast
+$toast-title-font-size: 16px !default;
+$toast-text-font-size: $tdd-font-size-6 !default;
+$toast-font-color: $white !default;
+$toast-inner-padding: 24px 30px !default;
+$toast-inner-bg-color: $tdd-color-black-80 !default;
+$toast-inner-border-radius: $tdd-border-radius-5 !default;
+$toast-cover-bg-color: rgba(0, 0, 0, 0) !default;
+
+//backtop
+$backtop-border-color: #e0e0e0 !default;
+
+// calendar
+$calendar-primary-color: $primary-color !default;
+$calendar-choose-color: rgba($primary-color, 0.09) !default;
+$calendar-choose-font-color: $primary-color !default;
+$calendar-base-color: #333333 !default;
+$calendar-disable-color: #d1d0d0 !default;
+$calendar-base-font: $font-size-3 !default;
+$calendar-title-font: $font-size-4 !default;
+$calendar-title-font-weight: 500 !default;
+$calendar-sub-title-font: $font-size-2 !default;
+$calendar-text-font: $font-size-1 !default;
+$calendar-day-font: 16px !default;
+$calendar-day-active-border-radius: 0px !default;
+$calendar-day-width: 14.28% !default;
+$calendar-day-height: 64px !default;
+$calendar-day-font-weight: 500 !default;
+$calendar-day67-font-color: $primary-color !default;
+
+//overlay
+$overlay-bg-color: rgba(0, 0, 0, 0.7) !default;
+
+//popup
+$popup-close-icon-margin: 16px !default;
+$popup-border-radius: $tdd-border-radius-5 !default;
+
+// Notify
+$notify-text-color: $white !default;
+$notify-padding: 12px 0 !default;
+$notify-font-size: 14px !default;
+$notify-height: 44px !default;
+$notify-line-height: auto !default;
+$notify-base-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$notify-primary-background-color: linear-gradient(
+  315deg,
+  rgba(73, 143, 242, 1) 0%,
+  rgba(73, 101, 242, 1) 100%
+) !default;
+$notify-success-background-color: linear-gradient(
+  135deg,
+  rgba(38, 191, 38, 1) 0%,
+  rgba(39, 197, 48, 1) 45%,
+  rgba(40, 207, 63, 1) 83%,
+  rgba(41, 212, 70, 1) 100%
+) !default;
+$notify-danger-background-color: rgba(250, 50, 25, 1) !default;
+$notify-warning-background-color: linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%) !default;
+
+// rate
+$rate-icon-color: $primary-color !default;
+$rate-icon-void-color: $disable-color !default;
+
+// tabbar
+$tabbar-active-color: $primary-color !default;
+$tabbar-unactive-color: $primary-color !default;
+$tabbar-border-top: 1px solid #eee !default;
+$tabbar-border-bottom: 1px solid #eee !default;
+$tabbar-box-shadow: none !default;
+$tabbar-item-text-font-size: $font-size-0 !default;
+$tabbar-item-text-line-height: initial !default;
+
+//infiniteloading
+$infiniteloading-bottom-color: #c8c8c8 !default;
+
+//range
+$range-tip-font-color: #333333 !default;
+$range-bg-color: rgba($primary-color, 0.5) !default;
+$range-bg-color-tick: #fa958c !default;
+$range-bar-bg-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$range-bar-btn-bg-color: $white !default;
+$range-bar-btn-width: 24px !default;
+$range-bar-btn-height: 24px !default;
+$range-bar-btn-border: 1px solid $primary-color !default;
+
+//swiper
+$swiper-pagination-item-width: 8px !default;
+$swiper-pagination-item-height: 3px !default;
+$swiper-pagination-item-margin-right: 7px !default;
+$swiper-pagination-item-border-radius: 2px !default;
+
+//address
+$address-region-tab-line: linear-gradient(90deg, $primary-color-start 0%, rgba($primary-color, 0.15) 100%) !default;
+$address-icon-color: $primary-color !default;
+
+//steps
+$steps-base-icon-width: 25px !default;
+$steps-base-icon-height: 25px !default;
+$steps-base-icon-line-height: 25px !default;
+$steps-base-icon-font-size: 13px !default;
+$steps-base-title-font-size: 14px !default;
+$steps-base-line-color: #909ca4 !default;
+$steps-base-title-color: #909ca4 !default;
+$steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-font-size: 14px !default;
+$steps-base-content-color: #666 !default;
+
+$steps-wait-icon-bg-color: #959fb1 !default;
+$steps-wait-icon-color: $white !default;
+$steps-wait-head-color: #909ca4 !default;
+$steps-wait-head-border-color: #909ca4 !default;
+$steps-wait-content-color: #909ca4 !default;
+
+$steps-finish-head-color: $primary-color !default;
+$steps-finish-head-border-color: $primary-color !default;
+$steps-finish-title-color: $primary-color !default;
+$steps-finish-line-background: $primary-color !default;
+$steps-finish-icon-text-color: $white !default;
+
+$steps-process-head-color: $white !default;
+$steps-process-head-border-color: $primary-color !default;
+$steps-process-title-color: $primary-color !default;
+$steps-process-icon-text-color: $primary-color !default;
+
+// dialog
+$dialog-width: 296px !default;
+
+// checkbox
+$checkbox-label-color: #1d1e1e !default;
+$checkbox-label-disable-color: #999 !default;
+$checkbox-icon-disable-color: #d6d6d6 !default;
+$checkbox-label-margin-left: 15px !default;
+$checkbox-label-font-size: 14px !default;
+$checkbox-icon-font-size: 18px !default;
+
+//radio
+$radio-label-font-color: #1d1e1e !default;
+$radio-label-font-active-color: $primary-color !default;
+$radio-label-disable-color: #999 !default;
+$radio-icon-disable-color: $tdd-color-fill-400 !default;
+$radio-label-button-border-color: $primary-color !default;
+$radio-label-button-background: rgba($primary-color, 0.05) !default;
+$radio-label-margin-left: 15px !default;
+$radio-button-border-radius: 15px !default;
+$radio-label-font-size: 14px !default;
+$radio-button-font-size: 12px !default;
+$radio-button-padding: 5px 18px !default;
+$radio-icon-font-size: 18px !default;
+
+//fixednav
+$fixednav-bg-color: $white !default;
+$fixednav-font-color: $black !default;
+$fixednav-index: 201 !default;
+$fixednav-btn-bg: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+
+// NoticeBar
+$noticebar-background: rgba(251, 248, 220, 1) !default;
+$noticebar-color: #d9500b !default;
+$noticebar-font-size: 14px !default;
+$noticebar-height: 40px !default;
+$noticebar-line-height: 24px !default;
+$noticebar-left-icon-width: 16px !default;
+$noticebar-right-icon-width: 16px !default;
+$noticebar-box-padding: 0 16px !default;
+$noticebar-wrapable-padding: 16px !default;
+$noticebar-lefticon-margin: 0px 10px !default;
+$noticebar-righticon-margin: 0px 10px !default;
+
+// TimeSelect
+$timeselect-title-font-size: $font-size-2 !default;
+$timeselect-title-color: $title-color !default;
+$timeselect-title-width: 100% !default;
+$timeselect-title-height: 50px !default;
+$timeselect-title-line-height: 50px !default;
+$timeselect-pannel-bg-color: #f6f7f9 !default;
+
+// TimePannel
+$timeselect-timepannel-text-color: $title-color2 !default;
+$timeselect-timepannel-font-size: $font-size-2 !default;
+$timeselect-timepannel-cur-bg-color: $white !default;
+$timeselect-timepannel-cur-text-color: #333333 !default;
+$timeselect-timepannel-width: 140px !default;
+$timeselect-timepannel-height: 40px !default;
+$timeselect-timepannel-padding: 15px !default;
+
+// TimeDetail
+$timeselect-timedetail-padding: 0 5px 50px 13px !default;
+$timeselect-timedetail-item-width: 100px !default;
+$timeselect-timedetail-item-height: 50px !default;
+$timeselect-timedetail-item-line-height: 50px !default;
+$timeselect-timedetail-item-bg-color: #f6f7f9 !default;
+$timeselect-timedetail-item-border-radius: 5px !default;
+$timeselect-timedetail-item-text-color: #333333 !default;
+$timeselect-timedetail-item-text-font-size: $font-size-2 !default;
+$timeselect-timedetail-item-cur-bg-color: rgba($primary-color, 0.15) !default;
+$timeselect-timedetail-item-cur-border: $primary-color !default;
+$timeselect-timedetail-item-cur-text-color: $primary-color !default;
+$timeselect-timedetail-time-text-color: #999 !default;
+$timeselect-timedetail-time-font-size: $font-size-1 !default;
+
+//tag
+$tag-font-size: 12px !default;
+$tag-default-border-radius: 4px !default;
+$tag-round-border-radius: 8px !default;
+$tag-default-background-color: #000000 !default;
+$tag-primary-background-color: #3460fa !default;
+$tag-success-background-color: #4fc08d !default;
+$tag-danger-background-color: linear-gradient(
+  135deg,
+  rgba(242, 20, 12, 1) 0%,
+  rgba(232, 34, 14, 1) 69.83950099728881%,
+  rgba(242, 77, 12, 1) 100%
+) !default;
+$tag-warning-background-color: #f3812e !default;
+$tag-default-color: #ffffff !default;
+$tag-border-width: 1px !default;
+$tag-plain-background-color: #fff !default;
+
+//badge
+$badge-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$badge-color: #fff !default;
+$badge-font-size: $font-size-1 !default;
+$badge-border-radius: 14px !default;
+$badge-padding: 0 5px !default;
+$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-z-index: 1 !default;
+$badge-dot-width: 7px !default;
+$badge-dot-height: 7px !default;
+$badge-dot-border-radius: 7px !default;
+$badge-dot-padding: 0px !default;
+
+//popover
+$popover-white-background-color: rgba(255, 255, 255, 1) !default;
+$popover-dark-background-color: rgba(75, 76, 77, 1) !default;
+$popover-border-bottom-color: rgba(229, 229, 229, 1) !default;
+$popover-primary-text-color: rgba(51, 51, 51, 1) !default;
+$popover-disable-color: rgba(154, 155, 157, 1) !default;
+
+//progress
+$progress-inner-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$progress-insidetext-background: $progress-inner-background-color !default;
+$progress-outer-background-color: #f3f3f3 !default;
+$progress-outer-border-radius: 12px !default;
+$progress-insidetext-border-radius: 5px !default;
+$progress-insidetext-padding: 3px 5px 3px 6px !default;
+$progress-insidetext-top: -42% !default;
+$progress-small-height: 5px !default;
+$progress-small-text-font-size: 7px !default;
+$progress-small-text-line-height: 10px !default;
+$progress-small-text-padding: 2px 4px !default;
+$progress-small-text-top: -100% !default;
+$progress-base-height: 10px !default;
+$progress-base-text-font-size: 9px !default;
+$progress-base-text-line-height: 13px !default;
+$progress-base-text-padding: $progress-insidetext-padding !default;
+$progress-base-text-top: $progress-insidetext-top !default;
+$progress-large-height: 15px !default;
+$progress-large-text-font-size: 13px !default;
+$progress-large-text-line-height: 18px !default;
+$progress-large-text-padding: $progress-insidetext-padding !default;
+$progress-large-text-top: $progress-insidetext-top !default;
+
+//pagination
+$pagination-color: $primary-color !default;
+$pagination-font-size: $font-size-2 !default;
+$pagination-item-border-color: #e4e7eb !default;
+$pagination-active-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
+$pagination-disable-color: rgba(116, 116, 116, 0.31) !default;
+$pagination-disable-background-color: #f7f8fa !default;
+$pagination-item-border-width: 1px !default;
+$pagination-item-border-radius: 2px !default;
+$pagination-prev-next-padding: 0 11px !default;
+
+// tabs
+$tabs-tab-smile-color: $primary-color !default;
+$tabs-titles-border-radius: 0 !default;
+$tabs-titles-item-large-font-size: $font-size-3 !default;
+$tabs-titles-item-font-size: $font-size-2 !default;
+$tabs-titles-item-small-font-size: $font-size-1 !default;
+$tabs-titles-item-color: $title-color !default;
+$tabs-titles-item-active-color: $title-color !default;
+$tabs-titles-background-color: $help-color !default;
+$tabs-horizontal-tab-line-color: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
+$tabs-horizontal-titles-height: 46px !default;
+$tabs-horizontal-titles-item-min-width: 50px !default;
+$tabs-horizontal-titles-item-active-line-width: 40px !default;
+$tabs-vertical-tab-line-color: linear-gradient(180deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
+$tabs-vertical-titles-item-height: 40px !default;
+$tabs-vertical-titles-item-active-line-height: 14px !default;
+$tabs-vertical-titles-width: 100px !default;
+
+// indicator
+$indicator-color: $primary-color !default;
+$indicator-dot-color: $disable-color !default;
+$indicator-white: $white !default;
+$indicator-size: 18px !default;
+$indicator-dot-size: calc($indicator-size / 3) !default;
+$indicator-border-size: $indicator-size + 2 !default;
+$indicator-number-font-size: 10px !default;
+
+// menu
+$menu-bar-line-height: 48px !default;
+$menu-item-font-size: $font-size-2 !default;
+$menu-item-text-color: $title-color !default;
+$menu-item-active-text-color: $primary-color !default;
+$menu-bar-border-bottom-color: #eaf0fb !default;
+$menu-bar-opened-z-index: 2001 !default;
+$menu-item-disabled-color: #969799 !default;
+$menu-title-text-padding-left: 8px !default;
+$menu-title-text-padding-right: 8px !default;
+$menu-item-content-padding: 12px 24px !default;
+$menu-item-content-max-height: 214px !default;
+$menu-item-option-padding-top: 12px !default;
+$menu-item-option-padding-bottom: 12px !default;
+$menu-item-option-i-margin-right: 6px !default;
+$menu-bar-box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12) !default;
+
+// collapse
+$collapse-item-padding: 13px 36px 13px 26px !default;
+$collapse-item-color: #666666 !default;
+$collapse-item-disabled-color: #c8c9cc !default;
+$collapse-item-icon-color: #666666 !default;
+$collapse-item-font-size: $font-size-2 !default;
+$collapse-item-line-height: 24px !default;
+$collapse-item-sub-title-color: #666666 !default;
+$collapse-wrapper-content-padding: 12px 26px !default;
+$collapse-wrapper-empty-content-padding: 0 26px !default;
+$collapse-wrapper-content-color: #666666 !default;
+$collapse-wrapper-content-font-size: $font-size-2 !default;
+$collapse-wrapper-content-line-height: 1.5 !default;
+$collapse-wrapper-content-background-color: $white !default;
+
+// searchbar
+$searchbar-background: $white !default;
+$searchbar-right-out-color: $black !default;
+$searchbar-padding: 9px 16px !default;
+$searchbar-width: 100% !default;
+$searchbar-input-background: #f7f7f7 !default;
+$searchbar-input-padding: 0 0 0 13px !default;
+$searchbar-input-height: 32px !default;
+$searchbar-input-width: 100% !default;
+$searchbar-input-border-radius: 16px !default;
+$searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+
+// empty
+$empty-padding: 32px 0 !default;
+$empty-image-size: 170px !default;
+$empty-description-margin-top: 4px !default;
+$empty-description-color: #666666 !default;
+$empty-description-font-size: 14px !default;
+$empty-description-line-height: 20px !default;
+$empty-description-padding: 0 40px !default;
+
+// cascader
+$cascader-font-size: $font-size-2 !default;
+$cascader-line-height: 22px !default;
+$cascader-tabs-item-padding: 0 10px !default;
+$cascader-bar-padding: 24px 20px 17px !default;
+$cascader-bar-font-size: $font-size-4 !default;
+$cascader-bar-line-height: 20px !default;
+$cascader-bar-color: $title-color !default;
+$cascader-item-padding: 10px 20px !default;
+$cascader-item-color: $title-color !default;
+$cascader-item-font-size: $font-size-2 !default;
+$cascader-item-active-color: $primary-color !default;
+
+// form
+$form-item-error-line-color: $primary-color !default;
+$form-item-required-color: $primary-color !default;
+$form-item-error-message-color: $primary-color !default;
+$form-item-label-font-size: 14px !default;
+$form-item-label-width: 90px !default;
+$form-item-label-margin-right: 10px !default;
+$form-item-label-text-align: left !default;
+$form-item-required-margin-right: 4px !default;
+$form-item-body-font-size: 14px !default;
+$form-item-body-slots-text-align: left !default;
+$form-item-body-input-text-align: left !default;
+$form-item-tip-font-size: 10px !default;
+$form-item-tip-text-align: left !default;
+
+// sku
+$sku-item-border: 1px solid $primary-color !default;
+$sku-item-disable-line: line-through !default;
+$sku-opetate-bg-default: linear-gradient(90deg, $primary-color-start, $primary-color-end 100%) !default;
+$sku-item-active-bg: rgba($primary-color, 0.15) !default;
+$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%
+) !default;
+
+// card
+$card-font-size-0: $font-size-0 !default;
+$card-font-size-1: $font-size-1 !default;
+$card-font-size-2: $font-size-2 !default;
+$card-font-size-3: $font-size-3 !default;
+
+// grid
+$grid-border-color: #f5f6f7 !default;
+$grid-item-content-padding: 16px 8px !default;
+$grid-item-content-bg-color: $white !default;
+$grid-item-text-margin: 8px !default;
+$grid-item-text-color: $title-color2 !default;
+$grid-item-text-font-size: $font-size-1 !default;
+
+// table
+$table-border-color: #ececec !default;
+$table-cols-padding: 10px !default;
+$table-tr-even-bg-color: #f3f3f3 !default;
+$table-tr-odd-bg-color: $white !default;
+
+// navbar
+$navbar-height: 44px !default;
+$navbar-margin-bottom: 20px !default;
+$navbar-padding: 13px 16px !default;
+$navbar-background: $white !default;
+$navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
+$navbar-color: $title-color2 !default;
+$navbar-title-base-font: $font-size-2 !default;
+$navbar-title-font: $font-size-2 !default;
+$navbar-title-font-weight: 0 !default;
+$navbar-title-font-color: $navbar-color !default;
+$navbar-title-width: 100px !default;
+$navbar-title-icon-margin: 0 0 0 13px !default;
+
+// sidenavbar
+$sidenavbar-content-bg-color: $white !default;
+
+// subsidenavbar
+$sidenavbar-sub-title-border-color: #f6f6f6 !default;
+$sidenavbar-sub-title-bg-color: #f6f6f6 !default;
+$sidenavbar-sub-title-font-size: $font-size-large !default;
+$sidenavbar-sub-title-radius: 0 !default;
+$sidenavbar-sub-title-border: 0 !default;
+$sidenavbar-sub-title-width: 100% !default;
+$sidenavbar-sub-title-height: 40px !default;
+$sidenavbar-sub-title-text-line-height: 40px !default;
+$sidenavbar-sub-title-text-color: $title-color !default;
+
+// sidenavbaritem
+$sidenavbar-item-title-color: #333 !default;
+$sidenavbar-item-title-bg-color: $white !default;
+$sidenavbar-item-height: 40px !default;
+$sidenavbar-item-line-height: 40px !default;
+$sidenavbar-item-font-size: 16px !default;
+
+// elevator
+$elevator-list-item-highcolor: $primary-color !default;
+$elevator-list-item-font-size: 12px !default;
+$elevator-list-item-font-color: #333333 !default;
+$elevator-list-item-name-padding: 0 20px !default;
+$elevator-list-item-name-height: 30px !default;
+$elevator-list-item-name-line-height: 30px !default;
+$elevator-list-item-code-font-size: 14px !default;
+$elevator-list-item-code-font-color: #1a1a1a !default;
+$elevator-list-item-code-font-weight: 500 !default;
+$elevator-list-item-code-padding: 0 20px !default;
+$elevator-list-item-code-height: 35px !default;
+$elevator-list-item-code-line-height: 35px !default;
+$elevator-list-item-code-after-width: 100% !default;
+$elevator-list-item-code-after-height: 1px !default;
+$elevator-list-item-code-after-bg-color: #f5f5f5 !default;
+$elevator-list-item-code-current-box-shadow: 0 3px 3px 1px rgba(240, 240, 240, 1) !default;
+$elevator-list-item-code-current-bg-color: #fff !default;
+$elevator-list-item-code-current-border-radius: 50% !default;
+$elevator-list-item-code-current-width: 45px !default;
+$elevator-list-item-code-current-height: 45px !default;
+$elevator-list-item-code-current-line-height: 45px !default;
+$elevator-list-item-code-current-position: absolute !default;
+$elevator-list-item-code-current-right: 60px !default;
+$elevator-list-item-code-current-top: 50% !default;
+$elevator-list-item-code-current-transform: translateY(-50%) !default;
+$elevator-list-item-code-current-text-align: center !default;
+$elevator-list-item-bars-position: absolute !default;
+$elevator-list-item-bars-right: 8px !default;
+$elevator-list-item-bars-top: 50% !default;
+$elevator-list-item-bars-transform: translateY(-50%) !default;
+$elevator-list-item-bars-padding: 15px 0 !default;
+$elevator-list-item-bars-background-color: #eeeff2 !default;
+$elevator-list-item-bars-border-radius: 6px !default;
+$elevator-list-item-bars-text-align: center !default;
+$elevator-list-item-bars-z-index: 10 !default;
+$elevator-list-item-bars-inner-item-padding: 3px !default;
+$elevator-list-item-bars-inner-item-font-size: 10px !default;
+
+// list
+$list-item-margin: 0 0 10px 0 !default;
+
+//Ecard
+$ecard-bg-color: #f0f2f5 !default;
+
+//category
+$category-bg-color: rgba(255, 255, 255, 1) !default;
+$category-ListLeft-bg-color: rgba(246, 247, 249, 1) !default;
+$category-ListItem-color: rgba(51, 51, 51, 1) !default;
+$category-ListItemChecked-color: rgba(255, 255, 255, 1) !default;
+$category-ListItemChecked-img-bg-color: rgba(240, 37, 15, 1) !default;
+
+// circleProgress
+$circleprogress-primary-color: $primary-color !default;
+$circleprogress-path-color: #e5e9f2 !default;
+$circleprogress-text-color: #000000 !default;
+$circleprogress-text-size: $font-size-3 !default;
+
+// Comment
+$comment-header-user-name-color: rgba(51, 51, 51, 1) !default;
+$comment-header-time-color: rgba(153, 153, 153, 1) !default;
+$comment-bottom-label-color: rgba(153, 153, 153, 1) !default;
+$comment-shop-color: $primary-color !default;
+
+@import './mixins/index';
+@import './animation/index';

src/packages/utils/create/component.ts

@@ -13,7 +13,7 @@ export function createComponent(name: string) {
   const componentName = 'nut-' + name;
   return {
     componentName,
-    translate(keyPath: string, ...args: unknown[]) {
+    translate(keyPath: string, ...args: unknown[]): string {
       // 依赖响应能力
       const languages = locale.languages();
       const text = getPropByPath(languages, `${name.replace('-', '')}.${keyPath}`) || getPropByPath(languages, keyPath);
@@ -55,6 +55,6 @@ export function createComponent(name: string) {
 
       _component.name = 'demo-' + name;
       return defineComponent(_component as any);
-    }
+    } as typeof defineComponent
   };
 }

src/sites/assets/util/helper.ts

@@ -171,7 +171,8 @@ export const useThemeEditor = function () {
       const params = new URLSearchParams(window.parent.location.search);
       const param = params.get('theme') as string;
       const source = {
-        jdt: 'https://storage.360buyimg.com/nutui-static/source/variables-jdt.scss_source'
+        jdt: 'https://storage.360buyimg.com/nutui-static/source/variables-jdt.scss_source',
+        jdb: 'https://storage.360buyimg.com/nutui-static/source/variables-jdb.scss_source'
       } as any;
       const customUrl = param && source[param.replace('/', '')];
       if (customUrl) {

tsconfig.json

@@ -21,5 +21,5 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["./node_modules","src/sites/mobile-taro"]
+  "exclude": ["./node_modules","src/sites/mobile-taro","src/packages/vscode-extension"]
 }

vite.config.build.disperse.ts

@@ -29,7 +29,7 @@ export default defineConfig({
     dts({
       insertTypesEntry: true,
       copyDtsFiles: false,
-      cleanVueFileName: true,
+      cleanVueFileName: false,
       outputDir: path.resolve(__dirname, './dist/types'),
       include: path.resolve(__dirname, './src/packages/__VUE'),
       beforeWriteFile: (filePath: string, content: string) => {

vite.config.build.taro.vue.disperse.ts

@@ -31,7 +31,7 @@ export default defineConfig({
     dts({
       insertTypesEntry: true,
       copyDtsFiles: false,
-      cleanVueFileName: true,
+      cleanVueFileName: false,
       outputDir: path.resolve(__dirname, './dist/types'),
       include: path.resolve(__dirname, './src/packages/__VUE'),
       beforeWriteFile: (filePath: string, content: string) => {