From 274106200360e80482a997e52a7708299a50f690 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Thu, 13 Apr 2023 20:41:25 +0800
Subject: [PATCH] fix: fix conflict (#135)

Co-authored-by: OpenTiny <opentiny@sina.com>
---
 .gitignore                                    |    3 +
 examples/docs/newsrc/pc.vue                   |   53 +-
 .../pc/demo/carousel/manual-play.vue          |    4 +-
 .../pc/demo/form/form-validation.vue          |   37 +-
 .../vite-plugins/vite-plugin-uno-preset.ts    |    0
 examples/vue2.7/package.json                  |    2 +-
 .../vite-plugins/vite-plugin-uno-preset.ts    |  246 ----
 examples/vue2.7/vite.config.ts                |    2 +-
 examples/vue2/package.json                    |    2 +-
 .../vite-plugins/vite-plugin-uno-preset.ts    |  246 ----
 examples/vue2/vite.config.ts                  |    2 +-
 examples/vue3/package.json                    |    2 +-
 examples/vue3/vite.config.ts                  |    2 +-
 internals/vue-vite-import/README.md           |   54 +
 .../vue-vite-import/example/js/index.html     |   12 +
 .../vue-vite-import/example/js/package.json   |   22 +
 .../vue-vite-import/example/js/src/App.vue    |   33 +
 .../vue-vite-import/example/js/src/main.js    |    4 +
 .../vue-vite-import/example/js/vite.config.js |   29 +
 .../vue-vite-import/example/ts/README.md      |   18 +
 .../vue-vite-import/example/ts/index.html     |   12 +
 .../vue-vite-import/example/ts/package.json   |   23 +
 .../vue-vite-import/example/ts/src/App.vue    |   31 +
 .../vue-vite-import/example/ts/src/main.ts    |    5 +
 .../vue-vite-import/example/ts/src/style.css  |   80 ++
 .../example/ts/src/vite-env.d.ts              |    1 +
 .../vue-vite-import/example/ts/tsconfig.json  |   18 +
 .../example/ts/tsconfig.node.json             |    9 +
 .../vue-vite-import/example/ts/vite.config.ts |   30 +
 internals/vue-vite-import/package.json        |   31 +
 internals/vue-vite-import/src/index.ts        |  156 +++
 internals/vue-vite-import/src/typings.d.ts    |    1 +
 internals/vue-vite-import/tsconfig.json       |   16 +
 package.json                                  |    1 +
 .../renderless/src/breadcrumb-item/vue.ts     |   15 +-
 packages/renderless/src/common/deps/popper.ts |    1 +
 packages/renderless/src/slider/index.ts       |  575 +++++-----
 packages/renderless/src/tooltip/vue.ts        |    9 +-
 packages/theme/package.json                   |    6 +-
 packages/theme/scripts/build-theme-json.js    |  100 ++
 packages/theme/src/alert/vars.less            |    4 +-
 packages/theme/src/autocomplete/index.less    |    4 +-
 packages/theme/src/autocomplete/vars.less     |   14 +-
 packages/theme/src/badge/vars.less            |   12 +-
 packages/theme/src/base/basic-var.less        |  145 +--
 packages/theme/src/base/comp.less             |  690 -----------
 packages/theme/src/base/index-global.less     |   16 -
 packages/theme/src/base/index.js              |   65 --
 packages/theme/src/base/root.less             |  388 -------
 packages/theme/src/breadcrumb/vars.less       |    4 +-
 packages/theme/src/bulletin-board/vars.less   |   14 +-
 packages/theme/src/button-group/vars.less     |   18 +-
 packages/theme/src/button/vars.less           |   90 +-
 packages/theme/src/calendar/vars.less         |   24 +-
 packages/theme/src/card-item/vars.less        |    4 +-
 packages/theme/src/card-layout/vars.less      |    2 +-
 packages/theme/src/card-template/index.less   |    2 +-
 packages/theme/src/card-template/vars.less    |   16 +-
 packages/theme/src/carousel-item/vars.less    |    6 +-
 packages/theme/src/carousel/vars.less         |   12 +-
 packages/theme/src/cascader-menu/vars.less    |    2 +-
 packages/theme/src/cascader-node/vars.less    |    8 +-
 packages/theme/src/cascader-panel/vars.less   |    4 +-
 packages/theme/src/cascader/vars.less         |   10 +-
 packages/theme/src/checkbox/index.js          |   40 -
 packages/theme/src/checkbox/vars.less         |   10 +-
 packages/theme/src/collapse-item/vars.less    |    8 +-
 packages/theme/src/collapse/vars.less         |    2 +-
 packages/theme/src/crop/vars.less             |   12 +-
 packages/theme/src/custom.less                |    7 +
 packages/theme/src/date-panel/index.less      |  179 +++
 packages/theme/src/date-panel/vars.less       |   28 +
 packages/theme/src/date-picker/index.less     |  107 ++
 packages/theme/src/date-picker/vars.less      |   31 +
 packages/theme/src/date-range/index.less      |  116 ++
 packages/theme/src/date-range/vars.less       |   16 +
 packages/theme/src/date-table/index.less      |  232 ++++
 packages/theme/src/date-table/vars.less       |   38 +
 packages/theme/src/dept/vars.less             |    4 +-
 packages/theme/src/detail-page/vars.less      |    8 +-
 packages/theme/src/dialog-box/vars.less       |    8 +-
 packages/theme/src/dropdown-item/vars.less    |    2 +-
 packages/theme/src/error-page/vars.less       |   12 +-
 packages/theme/src/fall-menu/vars.less        |   12 +-
 packages/theme/src/floatbar/vars.less         |    8 +-
 packages/theme/src/form-item/vars.less        |    4 +-
 packages/theme/src/grid/toolbar.less          |    2 +-
 packages/theme/src/grid/vars.less             |   24 +-
 packages/theme/src/hrapprover/vars.less       |   10 +-
 packages/theme/src/image-viewer/vars.less     |    4 +-
 packages/theme/src/index.less                 |   12 +
 packages/theme/src/input/vars.less            |   20 +-
 packages/theme/src/ip-address/vars.less       |   12 +-
 packages/theme/src/link-menu/vars.less        |    8 +-
 packages/theme/src/link/vars.less             |   28 +-
 packages/theme/src/menubar/vars.less          |   12 +-
 packages/theme/src/milestone/vars.less        |    8 +-
 packages/theme/src/modal/vars.less            |    8 +-
 packages/theme/src/month-range/index.less     |    0
 packages/theme/src/month-range/vars.less      |    0
 packages/theme/src/month-table/index.less     |  116 ++
 packages/theme/src/month-table/vars.less      |   18 +
 packages/theme/src/nav-menu/vars.less         |   14 +-
 packages/theme/src/notify/vars.less           |    2 +-
 packages/theme/src/numeric/vars.less          |   12 +-
 packages/theme/src/option-group/vars.less     |    2 +-
 packages/theme/src/option/vars.less           |   16 +-
 packages/theme/src/pager/vars.less            |   12 +-
 packages/theme/src/picker/index.less          | 1010 -----------------
 packages/theme/src/picker/vars.less           |   79 --
 packages/theme/src/pop-upload/vars.less       |    6 +-
 packages/theme/src/popeditor/vars.less        |    6 +-
 packages/theme/src/popover/vars.less          |    4 +-
 packages/theme/src/progress/vars.less         |    8 +-
 packages/theme/src/radio-button/vars.less     |   10 +-
 packages/theme/src/radio/vars.less            |   12 +-
 packages/theme/src/roles/vars.less            |   10 +-
 packages/theme/src/scroll-text/vars.less      |    2 +-
 packages/theme/src/search/index.less          |    2 +-
 packages/theme/src/search/vars.less           |   26 +-
 packages/theme/src/select-dropdown/index.less |    9 +-
 packages/theme/src/select-dropdown/vars.less  |    4 +-
 packages/theme/src/select/vars.less           |   10 +-
 packages/theme/src/selector/index.less        |    2 +-
 packages/theme/src/selector/vars.less         |   14 +-
 packages/theme/src/slide-bar/vars.less        |    2 +-
 packages/theme/src/slider/vars.less           |    8 +-
 packages/theme/src/split/vars.less            |    4 +-
 packages/theme/src/steps/vars.less            |   22 +-
 packages/theme/src/switch/vars.less           |    4 +-
 packages/theme/src/table/vars.less            |   12 +-
 packages/theme/src/tabs/vars.less             |   12 +-
 packages/theme/src/tag/vars.less              |   10 +-
 packages/theme/src/tall-storage/index.less    |    2 +-
 packages/theme/src/tall-storage/vars.less     |    6 +-
 packages/theme/src/text-popup/vars.less       |    2 +-
 packages/theme/src/theme/deep-theme/index.js  |   26 +-
 .../theme/src/theme/galaxy-theme/index.js     |   30 +-
 .../theme/src/theme/infinity-theme/index.js   |   84 +-
 packages/theme/src/time-panel/index.less      |  118 ++
 packages/theme/src/time-panel/vars.less       |   32 +
 packages/theme/src/time-picker/index.less     |    0
 packages/theme/src/time-picker/vars.less      |    0
 packages/theme/src/time-range/index.less      |   51 +
 .../index.js => time-range/vars.less}         |    4 +-
 packages/theme/src/time-select/index.less     |   42 +
 .../index.js => time-select/vars.less}        |    4 +-
 packages/theme/src/time-spinner/index.less    |  139 +++
 packages/theme/src/time-spinner/vars.less     |   25 +
 packages/theme/src/tip/vars.less              |   16 +-
 packages/theme/src/toggle-menu/vars.less      |    4 +-
 packages/theme/src/tooltip/vars.less          |   18 +-
 packages/theme/src/top-box/vars.less          |    8 +-
 packages/theme/src/transfer/vars.less         |   30 +-
 packages/theme/src/tree-menu/vars.less        |    2 +-
 packages/theme/src/tree/vars.less             |   10 +-
 packages/theme/src/upload-dragger/vars.less   |    6 +-
 packages/theme/src/upload-list/vars.less      |   10 +-
 packages/theme/src/user-card/vars.less        |    4 +-
 packages/theme/src/user-contact/vars.less     |    8 +-
 packages/theme/src/user-link/vars.less        |    4 +-
 packages/theme/src/user/vars.less             |    2 +-
 packages/theme/src/vars.less                  |   18 +-
 packages/theme/src/wizard/vars.less           |    6 +-
 packages/theme/src/year-table/index.less      |   74 ++
 packages/theme/src/year-table/vars.less       |   16 +
 packages/vue/src/breadcrumb-item/src/pc.vue   |    5 +-
 packages/vue/src/date-panel/index.ts          |    1 +
 packages/vue/src/date-picker/index.ts         |    1 +
 packages/vue/src/date-range/index.ts          |    1 +
 packages/vue/src/date-table/index.ts          |    1 +
 packages/vue/src/month-range/index.ts         |    1 +
 packages/vue/src/month-table/index.ts         |    1 +
 packages/vue/src/time-panel/index.ts          |    1 +
 packages/vue/src/time-range/index.ts          |    1 +
 packages/vue/src/time-spinner/index.ts        |    1 +
 packages/vue/src/time/index.ts                |    1 +
 packages/vue/src/tooltip/src/index.vue        |    4 +
 packages/vue/src/year-table/index.ts          |    1 +
 179 files changed, 3097 insertions(+), 3683 deletions(-)
 rename examples/{vue3 => docs}/vite-plugins/vite-plugin-uno-preset.ts (100%)
 delete mode 100644 examples/vue2.7/vite-plugins/vite-plugin-uno-preset.ts
 delete mode 100644 examples/vue2/vite-plugins/vite-plugin-uno-preset.ts
 create mode 100644 internals/vue-vite-import/README.md
 create mode 100644 internals/vue-vite-import/example/js/index.html
 create mode 100644 internals/vue-vite-import/example/js/package.json
 create mode 100644 internals/vue-vite-import/example/js/src/App.vue
 create mode 100644 internals/vue-vite-import/example/js/src/main.js
 create mode 100644 internals/vue-vite-import/example/js/vite.config.js
 create mode 100644 internals/vue-vite-import/example/ts/README.md
 create mode 100644 internals/vue-vite-import/example/ts/index.html
 create mode 100644 internals/vue-vite-import/example/ts/package.json
 create mode 100644 internals/vue-vite-import/example/ts/src/App.vue
 create mode 100644 internals/vue-vite-import/example/ts/src/main.ts
 create mode 100644 internals/vue-vite-import/example/ts/src/style.css
 create mode 100644 internals/vue-vite-import/example/ts/src/vite-env.d.ts
 create mode 100644 internals/vue-vite-import/example/ts/tsconfig.json
 create mode 100644 internals/vue-vite-import/example/ts/tsconfig.node.json
 create mode 100644 internals/vue-vite-import/example/ts/vite.config.ts
 create mode 100644 internals/vue-vite-import/package.json
 create mode 100644 internals/vue-vite-import/src/index.ts
 create mode 100644 internals/vue-vite-import/src/typings.d.ts
 create mode 100644 internals/vue-vite-import/tsconfig.json
 create mode 100644 packages/theme/scripts/build-theme-json.js
 delete mode 100644 packages/theme/src/base/comp.less
 delete mode 100644 packages/theme/src/base/index-global.less
 delete mode 100644 packages/theme/src/base/index.js
 delete mode 100644 packages/theme/src/base/root.less
 delete mode 100644 packages/theme/src/checkbox/index.js
 create mode 100644 packages/theme/src/date-panel/index.less
 create mode 100644 packages/theme/src/date-panel/vars.less
 create mode 100644 packages/theme/src/date-picker/index.less
 create mode 100644 packages/theme/src/date-picker/vars.less
 create mode 100644 packages/theme/src/date-range/index.less
 create mode 100644 packages/theme/src/date-range/vars.less
 create mode 100644 packages/theme/src/date-table/index.less
 create mode 100644 packages/theme/src/date-table/vars.less
 create mode 100644 packages/theme/src/month-range/index.less
 create mode 100644 packages/theme/src/month-range/vars.less
 create mode 100644 packages/theme/src/month-table/index.less
 create mode 100644 packages/theme/src/month-table/vars.less
 create mode 100644 packages/theme/src/time-panel/index.less
 create mode 100644 packages/theme/src/time-panel/vars.less
 create mode 100644 packages/theme/src/time-picker/index.less
 create mode 100644 packages/theme/src/time-picker/vars.less
 create mode 100644 packages/theme/src/time-range/index.less
 rename packages/theme/src/{checkbox-group/index.js => time-range/vars.less} (80%)
 create mode 100644 packages/theme/src/time-select/index.less
 rename packages/theme/src/{checkbox-button/index.js => time-select/vars.less} (92%)
 create mode 100644 packages/theme/src/time-spinner/index.less
 create mode 100644 packages/theme/src/time-spinner/vars.less
 create mode 100644 packages/theme/src/year-table/index.less
 create mode 100644 packages/theme/src/year-table/vars.less

diff --git a/.gitignore b/.gitignore
index b9b4b1831..d1a06b600 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,6 +32,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-lock.yaml
+yarn.lock
 
 # Editor directories and files
 .idea
@@ -48,3 +49,5 @@ tgzs
 *.tgz
 
 
+packages/theme/scripts/theme.json
+packages/theme/scripts/theme-result.txt
diff --git a/examples/docs/newsrc/pc.vue b/examples/docs/newsrc/pc.vue
index 9c7e1cb49..90e5ef3b3 100644
--- a/examples/docs/newsrc/pc.vue
+++ b/examples/docs/newsrc/pc.vue
@@ -1,46 +1,39 @@
 <template>
   <div class="wp100 hp100 f-r of-hidden">
     <div class="w230 hp100 pt20 of-auto">
-      <tiny-tree-menu :data="menuData" :filter-node-method="fn.searchMenu" @current-change="fn.clickMenu"></tiny-tree-menu>
+      <tiny-tree-menu
+        :data="menuData"
+        :filter-node-method="fn.searchMenu"
+        @current-change="fn.clickMenu"
+      ></tiny-tree-menu>
     </div>
     <div class="fi-1 f-c px20 pb30 f-c mr200 of-auto">
       <!-- 标题 -->
       <div class="py20 f24 fw-bold text-center">
         {{ state.demos[0]?.component }}
       </div>
-      <div id="preview" class="bg-white">
+      <div id="preview" class="bg-white f-c">
+        <!-- 标题 + 组件说明  -->
         <div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
-          <div class="mr20 fw-bold">
-            {{ state.currDemo?.title }}({{ state.currDemo?.demoId }}.vue):
-          </div>
+          <div class="mr20 fw-bold">{{ state.currDemo?.title }}({{ state.currDemo?.demoId }}.vue):</div>
           <div v-html="state.currDemo?.content"></div>
         </div>
-        <!-- 预览 + 按钮 + 代码  -->
+        <!-- 预览 + 按钮 + 源代码编辑器  -->
         <div class="p20 of-auto b-a bs-dotted">
           <component :is="state.comp"></component>
         </div>
         <div class="f-r f-pos-end mt40">
-          <tiny-button @click="fn.format">
-            格式化
-          </tiny-button>
-          <tiny-tooltip effect="dark" content="选择src/_.vue文件" placement="top">
-            <tiny-button @click="fn.apply" type="primary">
-              应用
-            </tiny-button>
+          <tiny-button @click="fn.format"> 格式化 </tiny-button>
+          <tiny-tooltip effect="dark" content="选择cocs/newsrc/_.vue文件" placement="top">
+            <tiny-button @click="fn.apply" type="primary"> 应用 </tiny-button>
           </tiny-tooltip>
-          <tiny-button @click="fn.saveCode" class="!ml40">
-            保存
-          </tiny-button>
-          <tiny-button @click="fn.fullScreen">
-            全屏
-          </tiny-button>
+          <tiny-button @click="fn.saveCode" class="!ml40"> 保存 </tiny-button>
+          <tiny-button @click="fn.fullScreen"> 全屏 </tiny-button>
         </div>
-        <div id="editor" ref="editorRef" class="h300 mt10"></div>
+        <div id="editor" ref="editorRef" class="minh300 mt10 fi-1 mb20"></div>
       </div>
       <!-- API表格 -->
-      <div v-if="state.currApi" class="mt20 f24 fw-bold">
-        组件API
-      </div>
+      <div v-if="state.currApi" class="f24 fw-bold">组件API</div>
       <div v-for="(apiTable, key) in state.currApi" :key="key">
         <div class="my8 f22 fw-bold">
           {{ key }}
@@ -48,7 +41,9 @@
         <tiny-grid :data="apiTable" border auto-resize>
           <tiny-grid-column field="name" width="15%" title="名称">
             <template #default="data">
-              <a v-if="data.row.sample" class="c-primary h:c-error" @click="fn.selectDemo(data.row.sample)">{{ data.row.name }}</a>
+              <a v-if="data.row.sample" class="c-primary h:c-error" @click="fn.selectDemo(data.row.sample)">{{
+                data.row.name
+              }}</a>
               <span v-else>{{ data.row.name }}</span>
             </template>
           </tiny-grid-column>
@@ -61,7 +56,13 @@
     <!-- 右边浮动所有的demos -->
     <tiny-floatbar v-if="state.demos.length > 0" class="!top120">
       <div class="f12 ofy-auto">
-        <div v-for="demo in state.demos" :key="demo.demoId" @click="fn.selectDemo(demo.demoId)" class="w130 px10 py6 bg-light link-primary h:c-error h:td-under ellipsis cur-hand" :class="{ 'c-error': state.currDemo === demo }">
+        <div
+          v-for="demo in state.demos"
+          :key="demo.demoId"
+          @click="fn.selectDemo(demo.demoId)"
+          class="w130 px10 py6 bg-light link-primary h:c-error h:td-under ellipsis cur-hand"
+          :class="{ 'c-error': state.currDemo === demo }"
+        >
           {{ demo.title }}
           <Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
         </div>
@@ -129,7 +130,7 @@ export default {
       format: () => editor.format(),
       apply: async () => {
         await tmpSaver.save(editor.getCode())
-        setTimeout(() => (state.comp = markRaw(TmpDemo)), 100)
+        setTimeout(() => (state.comp = hooks.markRaw(TmpDemo)), 100)
       }
     }
 
diff --git a/examples/docs/resources/pc/demo/carousel/manual-play.vue b/examples/docs/resources/pc/demo/carousel/manual-play.vue
index ade6fdf37..baad8c240 100644
--- a/examples/docs/resources/pc/demo/carousel/manual-play.vue
+++ b/examples/docs/resources/pc/demo/carousel/manual-play.vue
@@ -8,8 +8,8 @@
     <label for="num">切换到</label>
     <tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
     <tiny-button-group>
-      <tiny-button type="primary" @click="prev">上一张</tiny-button>
-      <tiny-button type="primary" @click="next">下一张</tiny-button>
+      <tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
+      <tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
     </tiny-button-group>
   </div>
 </template>
diff --git a/examples/docs/resources/pc/demo/form/form-validation.vue b/examples/docs/resources/pc/demo/form/form-validation.vue
index e25306984..c862a2214 100644
--- a/examples/docs/resources/pc/demo/form/form-validation.vue
+++ b/examples/docs/resources/pc/demo/form/form-validation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-form">
     <tiny-form ref="ruleForm" hide-required-asterisk :model="createData" :rules="rules" label-width="100px" show-message>
-      <tiny-form-item label="必填" prop="users" required :validateIcon="validateIcon">
+      <tiny-form-item label="必填" prop="users" required :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="日期" prop="datepicker">
@@ -20,7 +20,14 @@
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="级联选择器" prop="cascader">
-        <tiny-cascader v-model="createData.cascader" :options="options2" :popper-append-to-body="true" filterable></tiny-cascader>
+        <tiny-cascader v-model="createData.cascader" :options="options2" :popper-append-to-body="true"
+          filterable></tiny-cascader>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric字段" prop="num1">
+        <tiny-numeric v-model="createData.num1"></tiny-numeric>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
       </tiny-form-item>
       <tiny-form-item label="Numeric字段" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
@@ -29,14 +36,27 @@
         <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
+        <tiny-button type="primary" @click="handleSubmit('ruleForm')">
+          提交
+        </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup, Cascader, Numeric, IpAddress } from '@opentiny/vue'
+import {
+  Form,
+  FormItem,
+  Input,
+  DatePicker,
+  Button,
+  Modal,
+  RadioGroup,
+  Cascader,
+  Numeric,
+  IpAddress
+} from '@opentiny/vue'
 import { iconWarning } from '@opentiny/vue-icon'
 
 export default {
@@ -53,7 +73,7 @@ export default {
   },
   data() {
     return {
-      validateIcon: IconWarning(),
+      validateIcon: iconWarning(),
       options: [
         { label: 'A', text: '很好', events: { click: this.handleClick } },
         { label: 'B', text: '一般' }
@@ -95,7 +115,12 @@ export default {
         url: { type: 'url' },
         email: { type: 'email' },
         cascader: [{ required: true, message: '必填', trigger: 'blur' }],
-        ip: [{ validator: (rule, value, cb) => (value == '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))), trigger: 'change' }],
+        ip: [
+          {
+            validator: (rule, value, cb) => (value == '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
+            trigger: 'change'
+          }
+        ],
         num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
       }
     }
diff --git a/examples/vue3/vite-plugins/vite-plugin-uno-preset.ts b/examples/docs/vite-plugins/vite-plugin-uno-preset.ts
similarity index 100%
rename from examples/vue3/vite-plugins/vite-plugin-uno-preset.ts
rename to examples/docs/vite-plugins/vite-plugin-uno-preset.ts
diff --git a/examples/vue2.7/package.json b/examples/vue2.7/package.json
index 64432a8c1..b46024d0d 100644
--- a/examples/vue2.7/package.json
+++ b/examples/vue2.7/package.json
@@ -7,7 +7,7 @@
     "*"
   ],
   "scripts": {
-    "dev": "vite --port 6174",
+    "dev": "vite --port 7127",
     "build": "vite build",
     "preview": "vite preview",
     "test:e2e": "playwright test",
diff --git a/examples/vue2.7/vite-plugins/vite-plugin-uno-preset.ts b/examples/vue2.7/vite-plugins/vite-plugin-uno-preset.ts
deleted file mode 100644
index f7cc15edc..000000000
--- a/examples/vue2.7/vite-plugins/vite-plugin-uno-preset.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-const _s0 = {
-  m: 'margin',
-  p: 'padding',
-
-  w: 'width',
-  h: 'height',
-
-  minw: 'min-width',
-  maxw: 'max-width',
-  minh: 'min-height',
-  maxh: 'max-height',
-
-  r: '-right',
-  l: '-left',
-  b: '-bottom',
-  t: '-top'
-}
-const sizeRules = [
-  // 高宽， 字体，行高                       f12  lh20   w200  h200  box78
-  [/^(w|h|minw|maxw|minh|maxh)(\d+)$/, ([, attr, num]) => ({ [`${_s0[attr]}`]: `${num}px` })],
-  // 高宽百分比                             wp33  hp50
-  [/^(w|h)p(\d+\.?\d*)$/, ([, attr, num]) => ({ [`${_s0[attr]}`]: `${num}%` })],
-
-  // 内外边距   *可负*                        m10  mr10 mt-10 mx20 my-10  p10 pr10
-  [/^([mp])([rlbt]?)(-?\d+)$/, ([, attr, pos, num]) => ({ [`${_s0[attr]}${pos ? _s0[pos] : ''}`]: `${num}px` })],
-  // 内外边距auto                                   m-auto mt-auto  mx-auto
-  [/^([mp])([rlbt]?)-auto$/, ([, attr, pos]) => ({ [`${_s0[attr]}${pos ? _s0[pos] : ''}`]: 'auto' })],
-
-  // abs 定位时 *可负*                        left0  right50  bottom-20  leftauto
-  [/^(left|top|right|bottom)(-?\d+)$/, ([, pos, num]) => ({ [`${pos}`]: `${num}px` })],
-  [/^(left|top|right|bottom)-(auto|unset)$/, ([, pos, val]) => ({ [`${pos}`]: val })]
-]
-const _s1 = {
-  none: 'none',
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  grid: 'grid',
-  ib: 'inline-block',
-  if: 'inline-flex',
-  ig: 'inline-grid',
-
-  abs: 'absolute',
-  rel: 'relative',
-  fixed: 'fixed',
-  sticky: 'sticky',
-  static: 'static',
-
-  r: 'row',
-  c: 'column',
-  center: 'center',
-  start: 'flex-start',
-  end: 'flex-end',
-  around: 'space-around',
-  between: 'space-between',
-  evenly: 'space-evenly',
-  stretch: 'stretch'
-}
-
-const layoutRules = [
-  // display                          d-none,  d-block d-flex d-inline d-grid  d-ib  d-if  d-ig
-  [/^d-(none|block|flex|inline|grid|ib|if|ig)$/, ([, pos]) => ({ display: `${_s1[pos]}` })],
-  // position                           abs  rel  fixed  sticky  static
-  [/^(rel|abs|fixed|sticky|static)$/, ([, pos]) => ({ position: `${_s1[pos]}` })],
-  // 绝对定位                           abs-0   fixed-0
-  ['abs-0', { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }],
-  ['fixed-0', { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }],
-  // 这个会用的很少，通常是css reset中会重置。
-  ['border-box', { 'box-sizing': 'border-box' }],
-  ['content-box', { 'box-sizing': 'content-box' }],
-  // flex布局  父元素：                           f-r f-c   f-center   f-pos-between   f-box-stretch  f-wrap
-  [/^f-([rc])$/, ([, dir]) => ({ display: 'flex', 'flex-direction': `${_s1[dir]}` })],
-  [/^f-pos-(start|center|end|around|between|evenly|stretch)$/, ([, dir]) => ({ 'justify-content': `${_s1[dir]}` })],
-  [/^f-box-(start|center|end|stretch)$/, ([, dir]) => ({ 'align-items': `${_s1[dir]}` })],
-  [/^f-(wrap|nowrap)$/, ([, dir]) => ({ 'flex-wrap': dir })],
-
-  // 子元素：                           fi-1  fi-4
-  [/^fi-(\d+)$/, ([, num]) => ({ flex: `${num}` })]
-]
-
-const _s2 = {
-  f: 'font-size',
-  lh: 'line-height',
-
-  bold: 'bolder',
-  thin: 'lighter',
-  normal: 'normal',
-
-  under: 'underline',
-  over: 'overline',
-  through: 'line-through',
-  del: 'line-through',
-  none: 'none'
-}
-
-const fontRules = [
-  // 字体与行高                              f12  lh20
-  [/^(f|lh)(\d+)$/, ([, attr, num]) => ({ [`${_s2[attr]}`]: `${num}px` })],
-  // 字体粗细                               fw-bold  fw-700
-  [/^fw-(bold|thin|normal)$/, ([, dir]) => ({ 'font-weight': `${_s2[dir]}` })],
-  [/^fw-(\d+)$/, ([, val]) => ({ 'font-weight': val })],
-  // 文字对齐                               text-right  ta-center
-  [/^(text|ta)-(right|left|center)$/, ([, abbr, dir]) => ({ 'text-align': dir })],
-  // 文字上下划线  solid|double|dotted|dashed|wavy
-  //             td-under  td-over-wavy td-over  td-none-dashed
-  [
-    /^td-(under|over|through|del|none)(-solid|-double|-dotted|-dashed|-wavy)?$/,
-    ([, dir, style = '']) => ({ 'text-decoration': `${_s2[dir]} ${style.slice(1)}` })
-  ],
-  // 文字阴影       ts-sm  ts-lg
-  ['ts-sm', { 'text-shadow': 'var(--text-shadow-sm)' }],
-  ['ts-lg', { 'text-shadow': 'var(--text-shadow-lg)' }]
-]
-const _s3 = {
-  a: '', // all
-  r: '-right',
-  l: '-left',
-  b: '-bottom',
-  t: '-top',
-  ws: 'var(--border-width) var(--border-style) ' // width & style
-}
-
-const borderRules = [
-  // 边框           b-a b-b b-r b-t b-l  b-a-primary  b-a#ff0000
-  [/^b-([arlbt])$/, ([, pos]) => ({ [`border${_s3[pos]}`]: _s3.ws + 'var(--border-color)' })],
-  [/^b-([arlbt])-([\w|-]+)$/, ([, pos, color]) => ({ [`border${_s3[pos]}`]: _s3.ws + `var(--${color})` })],
-  [/^b-([arlbt])#(\w+)$/, ([, pos, color]) => ({ [`border${_s3[pos]}`]: _s3.ws + `#${color}` })],
-  // 边框样式      bs-dotted  bs-double
-  [/^bs-(none|dotted|dashed|solid|double|groove|ridge|inset|outset)$/, ([, style]) => ({ 'border-style': style })],
-  [/^br-(\d+)$/, ([, val]) => ({ 'border-radius': `${val}px` })],
-  // 无边框                               nb-a nb-b nb-r nb-t nb-l
-  [/^nb-([arlbt])$/, ([, pos]) => ({ [`border${_s3[pos]}`]: 'none' })],
-
-  ['br-sm', { 'border-radius': 'var(--box-radius-sm)' }],
-  ['br-lg', { 'border-radius': 'var(--box-radius-lg)' }],
-  ['br-circle', { 'border-radius': '50%' }],
-  ['bs-sm', { 'box-shadow': 'var(--box-shadow-sm)' }],
-  ['bs-lg', { 'box-shadow': 'var(--box-shadow-lg)' }]
-]
-
-const _s4 = {
-  def: 'default',
-  hand: 'pointer',
-  disable: 'not-allowed'
-}
-const clamp = (v, min, max) => Math.min(Math.max(v, min), max)
-const utilRules = [
-  // 省略号                                 ellipsis  ellipsis2  ellipsis3
-  ['ellipsis', { overflow: 'hidden', ' text-overflow': 'ellipsis', 'white-space': 'nowrap' }],
-  [
-    /^ellipsis(\d+)$/,
-    ([, num]) => ({
-      display: '-webkit-box',
-      overflow: 'hidden',
-      '-webkit-line-clamp': num,
-      ' -webkit-box-orient': 'vertical',
-      'overflow-wrap': 'anywhere'
-    })
-  ],
-  // 光标样式                                cur-hand
-  [/^cur-(def|hand|disable)$/, ([, shape]) => ({ cursor: `${_s4[shape]}` })],
-  // overflow                                of-auto  ofx-hidden  ofy-scroll
-  [/^of(\w?)-(auto|scroll|hidden|visible)$/, ([, axis, mode]) => ({ [`overflow${axis ? '-' + axis : ''}`]: mode })],
-  // 图片填充                               img-cover
-  [/^img-(cover|contain|fill)$/, ([, mode]) => ({ 'object-fit': mode })],
-  // z-index                              z100
-  [/^z(-?\d+)$/, ([, num]) => ({ 'z-index': num })],
-  //  选择相关                             noselect allselect  nomouse   参见选择变体： select:c-primary  select:bg-dark
-  ['noselect', { 'user-select': 'none' }],
-  ['allselect', { 'user-select': 'all' }],
-  ['noevent', { 'pointer-events': 'none' }],
-  //  可见性                                hide   show
-  ['hide', { visibility: 'hidden' }],
-  ['show', { visibility: 'visible' }],
-  // 透明度                               op100
-  [/^op(\d+)$/, ([, val]) => ({ opacity: clamp(val / 100, 0, 1) })],
-  ['op-hover', { opacity: 'var(--hover-op)' }],
-  ['op-disabled', { opacity: 'var(--disabled-op)' }],
-
-  // 断词            breakword  breakall
-  [/^break(word|all)$/, ([, type]) => ({ 'word-break': `break-${type}` })]
-]
-
-const _s5 = { c: 'color', bg: 'background-color' }
-const colorRules = [
-  // 颜色  #不建议使用            c-black  bg-primary  c#123456  c-theme-color
-  [/^(c|bg)-rand(\d+)$/, ([, attr, seed]) => ({ [`${_s5[attr]}`]: `#${Math.floor(Math.random() * 255 * 255 * 255).toString(16)}` })],
-  [(/^(c|bg)-([\w|-]+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `var(--${color})` }))],
-  [/^(c|bg)#(\w+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `#${color}` })]
-]
-export const rules = [...sizeRules, ...layoutRules, ...fontRules, ...borderRules, ...utilRules, ...colorRules]
-
-export const shortcuts = [
-  [/^(m|p)x(-?\d+)$/, ([, t, c]) => `${t}l${c} ${t}r${c}`],
-  [/^(m|p)y(-?\d+)$/, ([, t, c]) => `${t}t${c} ${t}b${c}`],
-
-  [/^(m|p)x-auto$/, ([, t, c]) => `${t}l-auto ${t}r-auto`],
-  [/^(m|p)y-auto$/, ([, t, c]) => `${t}t-auto ${t}b-auto`],
-  [/^box(\d+)$/, ([, w]) => `w${w} h${w}`],
-  [/^link-(\w+)$/, ([, c]) => `c-${c} h:c-${c}less  cur-hand `],
-  [/^link#(\w+)$/, ([, c]) => `c#${c} cur-hand `],
-  ['f-center', 'd-flex f-pos-center f-box-center']
-]
-
-export const variants = [
-  (matcher) => {
-    if (!matcher.startsWith('!')) return matcher
-    return {
-      matcher: matcher.slice(1),
-      body: (body) => {
-        body.forEach((e) => e[1] && (e[1] += ' !important'))
-        return body
-      }
-    }
-  },
-  (matcher) => {
-    if (!matcher.startsWith('h:')) return matcher
-    return {
-      matcher: matcher.slice(2),
-      selector: (s) => `${s}:hover`,
-      body: (body) => {
-        body.push(['transition', 'all var(--trans-time)'])
-        return body
-      }
-    }
-  },
-  (matcher) => {
-    if (!matcher.startsWith('child:')) return matcher
-    return {
-      matcher: matcher.slice(6),
-      selector: (s) => `${s}>*`,
-      body: (s) => s
-    }
-  },
-  (matcher) => {
-    // "child<code>xxx".match(/child<(\w+)>/ )  =====> ['child<code>', 'code']
-    const matchResult = matcher.match(/^child<(\w+)>/)
-    if (!matchResult) return matcher
-    const [matchStr, selector] = matchResult
-    return {
-      matcher: matcher.slice(matchStr.length),
-      selector: (s) => `${s} ${selector}`,
-      body: (s) => s
-    }
-  }
-]
diff --git a/examples/vue2.7/vite.config.ts b/examples/vue2.7/vite.config.ts
index cbf5a21ad..f6b61f445 100644
--- a/examples/vue2.7/vite.config.ts
+++ b/examples/vue2.7/vite.config.ts
@@ -12,7 +12,7 @@ import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 // 增加Unocss
 import Unocss from 'unocss/vite'
-import { rules, shortcuts, variants } from './vite-plugins/vite-plugin-uno-preset.js'
+import { rules, shortcuts, variants } from '../docs/vite-plugins/vite-plugin-uno-preset.js'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd(), '')
diff --git a/examples/vue2/package.json b/examples/vue2/package.json
index 8b18c10c7..b25b95567 100644
--- a/examples/vue2/package.json
+++ b/examples/vue2/package.json
@@ -7,7 +7,7 @@
     "*"
   ],
   "scripts": {
-    "dev": "vite --port 6173",
+    "dev": "vite --port 7126",
     "build": "vite build",
     "preview": "vite preview",
     "test:e2e": "playwright test",
diff --git a/examples/vue2/vite-plugins/vite-plugin-uno-preset.ts b/examples/vue2/vite-plugins/vite-plugin-uno-preset.ts
deleted file mode 100644
index f7cc15edc..000000000
--- a/examples/vue2/vite-plugins/vite-plugin-uno-preset.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-const _s0 = {
-  m: 'margin',
-  p: 'padding',
-
-  w: 'width',
-  h: 'height',
-
-  minw: 'min-width',
-  maxw: 'max-width',
-  minh: 'min-height',
-  maxh: 'max-height',
-
-  r: '-right',
-  l: '-left',
-  b: '-bottom',
-  t: '-top'
-}
-const sizeRules = [
-  // 高宽， 字体，行高                       f12  lh20   w200  h200  box78
-  [/^(w|h|minw|maxw|minh|maxh)(\d+)$/, ([, attr, num]) => ({ [`${_s0[attr]}`]: `${num}px` })],
-  // 高宽百分比                             wp33  hp50
-  [/^(w|h)p(\d+\.?\d*)$/, ([, attr, num]) => ({ [`${_s0[attr]}`]: `${num}%` })],
-
-  // 内外边距   *可负*                        m10  mr10 mt-10 mx20 my-10  p10 pr10
-  [/^([mp])([rlbt]?)(-?\d+)$/, ([, attr, pos, num]) => ({ [`${_s0[attr]}${pos ? _s0[pos] : ''}`]: `${num}px` })],
-  // 内外边距auto                                   m-auto mt-auto  mx-auto
-  [/^([mp])([rlbt]?)-auto$/, ([, attr, pos]) => ({ [`${_s0[attr]}${pos ? _s0[pos] : ''}`]: 'auto' })],
-
-  // abs 定位时 *可负*                        left0  right50  bottom-20  leftauto
-  [/^(left|top|right|bottom)(-?\d+)$/, ([, pos, num]) => ({ [`${pos}`]: `${num}px` })],
-  [/^(left|top|right|bottom)-(auto|unset)$/, ([, pos, val]) => ({ [`${pos}`]: val })]
-]
-const _s1 = {
-  none: 'none',
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  grid: 'grid',
-  ib: 'inline-block',
-  if: 'inline-flex',
-  ig: 'inline-grid',
-
-  abs: 'absolute',
-  rel: 'relative',
-  fixed: 'fixed',
-  sticky: 'sticky',
-  static: 'static',
-
-  r: 'row',
-  c: 'column',
-  center: 'center',
-  start: 'flex-start',
-  end: 'flex-end',
-  around: 'space-around',
-  between: 'space-between',
-  evenly: 'space-evenly',
-  stretch: 'stretch'
-}
-
-const layoutRules = [
-  // display                          d-none,  d-block d-flex d-inline d-grid  d-ib  d-if  d-ig
-  [/^d-(none|block|flex|inline|grid|ib|if|ig)$/, ([, pos]) => ({ display: `${_s1[pos]}` })],
-  // position                           abs  rel  fixed  sticky  static
-  [/^(rel|abs|fixed|sticky|static)$/, ([, pos]) => ({ position: `${_s1[pos]}` })],
-  // 绝对定位                           abs-0   fixed-0
-  ['abs-0', { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }],
-  ['fixed-0', { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }],
-  // 这个会用的很少，通常是css reset中会重置。
-  ['border-box', { 'box-sizing': 'border-box' }],
-  ['content-box', { 'box-sizing': 'content-box' }],
-  // flex布局  父元素：                           f-r f-c   f-center   f-pos-between   f-box-stretch  f-wrap
-  [/^f-([rc])$/, ([, dir]) => ({ display: 'flex', 'flex-direction': `${_s1[dir]}` })],
-  [/^f-pos-(start|center|end|around|between|evenly|stretch)$/, ([, dir]) => ({ 'justify-content': `${_s1[dir]}` })],
-  [/^f-box-(start|center|end|stretch)$/, ([, dir]) => ({ 'align-items': `${_s1[dir]}` })],
-  [/^f-(wrap|nowrap)$/, ([, dir]) => ({ 'flex-wrap': dir })],
-
-  // 子元素：                           fi-1  fi-4
-  [/^fi-(\d+)$/, ([, num]) => ({ flex: `${num}` })]
-]
-
-const _s2 = {
-  f: 'font-size',
-  lh: 'line-height',
-
-  bold: 'bolder',
-  thin: 'lighter',
-  normal: 'normal',
-
-  under: 'underline',
-  over: 'overline',
-  through: 'line-through',
-  del: 'line-through',
-  none: 'none'
-}
-
-const fontRules = [
-  // 字体与行高                              f12  lh20
-  [/^(f|lh)(\d+)$/, ([, attr, num]) => ({ [`${_s2[attr]}`]: `${num}px` })],
-  // 字体粗细                               fw-bold  fw-700
-  [/^fw-(bold|thin|normal)$/, ([, dir]) => ({ 'font-weight': `${_s2[dir]}` })],
-  [/^fw-(\d+)$/, ([, val]) => ({ 'font-weight': val })],
-  // 文字对齐                               text-right  ta-center
-  [/^(text|ta)-(right|left|center)$/, ([, abbr, dir]) => ({ 'text-align': dir })],
-  // 文字上下划线  solid|double|dotted|dashed|wavy
-  //             td-under  td-over-wavy td-over  td-none-dashed
-  [
-    /^td-(under|over|through|del|none)(-solid|-double|-dotted|-dashed|-wavy)?$/,
-    ([, dir, style = '']) => ({ 'text-decoration': `${_s2[dir]} ${style.slice(1)}` })
-  ],
-  // 文字阴影       ts-sm  ts-lg
-  ['ts-sm', { 'text-shadow': 'var(--text-shadow-sm)' }],
-  ['ts-lg', { 'text-shadow': 'var(--text-shadow-lg)' }]
-]
-const _s3 = {
-  a: '', // all
-  r: '-right',
-  l: '-left',
-  b: '-bottom',
-  t: '-top',
-  ws: 'var(--border-width) var(--border-style) ' // width & style
-}
-
-const borderRules = [
-  // 边框           b-a b-b b-r b-t b-l  b-a-primary  b-a#ff0000
-  [/^b-([arlbt])$/, ([, pos]) => ({ [`border${_s3[pos]}`]: _s3.ws + 'var(--border-color)' })],
-  [/^b-([arlbt])-([\w|-]+)$/, ([, pos, color]) => ({ [`border${_s3[pos]}`]: _s3.ws + `var(--${color})` })],
-  [/^b-([arlbt])#(\w+)$/, ([, pos, color]) => ({ [`border${_s3[pos]}`]: _s3.ws + `#${color}` })],
-  // 边框样式      bs-dotted  bs-double
-  [/^bs-(none|dotted|dashed|solid|double|groove|ridge|inset|outset)$/, ([, style]) => ({ 'border-style': style })],
-  [/^br-(\d+)$/, ([, val]) => ({ 'border-radius': `${val}px` })],
-  // 无边框                               nb-a nb-b nb-r nb-t nb-l
-  [/^nb-([arlbt])$/, ([, pos]) => ({ [`border${_s3[pos]}`]: 'none' })],
-
-  ['br-sm', { 'border-radius': 'var(--box-radius-sm)' }],
-  ['br-lg', { 'border-radius': 'var(--box-radius-lg)' }],
-  ['br-circle', { 'border-radius': '50%' }],
-  ['bs-sm', { 'box-shadow': 'var(--box-shadow-sm)' }],
-  ['bs-lg', { 'box-shadow': 'var(--box-shadow-lg)' }]
-]
-
-const _s4 = {
-  def: 'default',
-  hand: 'pointer',
-  disable: 'not-allowed'
-}
-const clamp = (v, min, max) => Math.min(Math.max(v, min), max)
-const utilRules = [
-  // 省略号                                 ellipsis  ellipsis2  ellipsis3
-  ['ellipsis', { overflow: 'hidden', ' text-overflow': 'ellipsis', 'white-space': 'nowrap' }],
-  [
-    /^ellipsis(\d+)$/,
-    ([, num]) => ({
-      display: '-webkit-box',
-      overflow: 'hidden',
-      '-webkit-line-clamp': num,
-      ' -webkit-box-orient': 'vertical',
-      'overflow-wrap': 'anywhere'
-    })
-  ],
-  // 光标样式                                cur-hand
-  [/^cur-(def|hand|disable)$/, ([, shape]) => ({ cursor: `${_s4[shape]}` })],
-  // overflow                                of-auto  ofx-hidden  ofy-scroll
-  [/^of(\w?)-(auto|scroll|hidden|visible)$/, ([, axis, mode]) => ({ [`overflow${axis ? '-' + axis : ''}`]: mode })],
-  // 图片填充                               img-cover
-  [/^img-(cover|contain|fill)$/, ([, mode]) => ({ 'object-fit': mode })],
-  // z-index                              z100
-  [/^z(-?\d+)$/, ([, num]) => ({ 'z-index': num })],
-  //  选择相关                             noselect allselect  nomouse   参见选择变体： select:c-primary  select:bg-dark
-  ['noselect', { 'user-select': 'none' }],
-  ['allselect', { 'user-select': 'all' }],
-  ['noevent', { 'pointer-events': 'none' }],
-  //  可见性                                hide   show
-  ['hide', { visibility: 'hidden' }],
-  ['show', { visibility: 'visible' }],
-  // 透明度                               op100
-  [/^op(\d+)$/, ([, val]) => ({ opacity: clamp(val / 100, 0, 1) })],
-  ['op-hover', { opacity: 'var(--hover-op)' }],
-  ['op-disabled', { opacity: 'var(--disabled-op)' }],
-
-  // 断词            breakword  breakall
-  [/^break(word|all)$/, ([, type]) => ({ 'word-break': `break-${type}` })]
-]
-
-const _s5 = { c: 'color', bg: 'background-color' }
-const colorRules = [
-  // 颜色  #不建议使用            c-black  bg-primary  c#123456  c-theme-color
-  [/^(c|bg)-rand(\d+)$/, ([, attr, seed]) => ({ [`${_s5[attr]}`]: `#${Math.floor(Math.random() * 255 * 255 * 255).toString(16)}` })],
-  [(/^(c|bg)-([\w|-]+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `var(--${color})` }))],
-  [/^(c|bg)#(\w+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `#${color}` })]
-]
-export const rules = [...sizeRules, ...layoutRules, ...fontRules, ...borderRules, ...utilRules, ...colorRules]
-
-export const shortcuts = [
-  [/^(m|p)x(-?\d+)$/, ([, t, c]) => `${t}l${c} ${t}r${c}`],
-  [/^(m|p)y(-?\d+)$/, ([, t, c]) => `${t}t${c} ${t}b${c}`],
-
-  [/^(m|p)x-auto$/, ([, t, c]) => `${t}l-auto ${t}r-auto`],
-  [/^(m|p)y-auto$/, ([, t, c]) => `${t}t-auto ${t}b-auto`],
-  [/^box(\d+)$/, ([, w]) => `w${w} h${w}`],
-  [/^link-(\w+)$/, ([, c]) => `c-${c} h:c-${c}less  cur-hand `],
-  [/^link#(\w+)$/, ([, c]) => `c#${c} cur-hand `],
-  ['f-center', 'd-flex f-pos-center f-box-center']
-]
-
-export const variants = [
-  (matcher) => {
-    if (!matcher.startsWith('!')) return matcher
-    return {
-      matcher: matcher.slice(1),
-      body: (body) => {
-        body.forEach((e) => e[1] && (e[1] += ' !important'))
-        return body
-      }
-    }
-  },
-  (matcher) => {
-    if (!matcher.startsWith('h:')) return matcher
-    return {
-      matcher: matcher.slice(2),
-      selector: (s) => `${s}:hover`,
-      body: (body) => {
-        body.push(['transition', 'all var(--trans-time)'])
-        return body
-      }
-    }
-  },
-  (matcher) => {
-    if (!matcher.startsWith('child:')) return matcher
-    return {
-      matcher: matcher.slice(6),
-      selector: (s) => `${s}>*`,
-      body: (s) => s
-    }
-  },
-  (matcher) => {
-    // "child<code>xxx".match(/child<(\w+)>/ )  =====> ['child<code>', 'code']
-    const matchResult = matcher.match(/^child<(\w+)>/)
-    if (!matchResult) return matcher
-    const [matchStr, selector] = matchResult
-    return {
-      matcher: matcher.slice(matchStr.length),
-      selector: (s) => `${s} ${selector}`,
-      body: (s) => s
-    }
-  }
-]
diff --git a/examples/vue2/vite.config.ts b/examples/vue2/vite.config.ts
index dd005dd1d..d7f335930 100644
--- a/examples/vue2/vite.config.ts
+++ b/examples/vue2/vite.config.ts
@@ -11,7 +11,7 @@ import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 // 增加Unocss
 import Unocss from 'unocss/vite'
-import { rules, shortcuts, variants } from './vite-plugins/vite-plugin-uno-preset.js'
+import { rules, shortcuts, variants } from '../docs/vite-plugins/vite-plugin-uno-preset.js'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd(), '')
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
index a29756738..8b9b63aa2 100644
--- a/examples/vue3/package.json
+++ b/examples/vue3/package.json
@@ -7,7 +7,7 @@
     "*"
   ],
   "scripts": {
-    "dev": "vite --port 6175",
+    "dev": "vite --port 7130",
     "build": "vite build",
     "preview": "vite preview",
     "test:e2e": "playwright test",
diff --git a/examples/vue3/vite.config.ts b/examples/vue3/vite.config.ts
index 40bc7437d..66b672c03 100644
--- a/examples/vue3/vite.config.ts
+++ b/examples/vue3/vite.config.ts
@@ -15,7 +15,7 @@ import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/
 
 // 增加Unocss
 import Unocss from 'unocss/vite'
-import { rules, shortcuts, variants } from './vite-plugins/vite-plugin-uno-preset.js'
+import { rules, shortcuts, variants } from '../docs/vite-plugins/vite-plugin-uno-preset.js'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd(), '')
diff --git a/internals/vue-vite-import/README.md b/internals/vue-vite-import/README.md
new file mode 100644
index 000000000..b99324b91
--- /dev/null
+++ b/internals/vue-vite-import/README.md
@@ -0,0 +1,54 @@
+# vite-plugin-babel-import
+
+A TinyVue vite import plugin.
+
+## install
+
+```bash
+npm i @opentiny/vue-vite-import -D
+```
+
+## Example
+
+```js
+import { ButtonGroup } from '@opentiny/vue';
+import { iconShare } from '@opentiny/vue-icon'
+
+        ↓ ↓ ↓ ↓ ↓ ↓
+
+import ButtonGroup from '@opentiny/vue-button-group';
+import iconShare from '@opentiny/vue-icon/lib/icon-share.js'
+```
+
+## Usage
+
+```js
+// vite.config.js
+
+// ...
+import importPlugin from '@opentiny/vue-vite-import'
+// ...
+export default {
+  // ...
+  plugins: [
+    // ...
+    importPlugin(
+      [
+        {
+          libraryName: '@opentiny/vue',
+          split: '-' // 自定义分隔符
+        },
+        {
+          libraryName: '@opentiny/vue-icon',
+          customName: (name) => {
+            // 自定义模块名称
+            return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
+          }
+        }
+      ],
+      'pc'
+    ) // 第二个参数可选，表示只打包pc或者移动模板 pc | mobile | undefined
+  ]
+  // ...
+}
+```
diff --git a/internals/vue-vite-import/example/js/index.html b/internals/vue-vite-import/example/js/index.html
new file mode 100644
index 000000000..bc5d1bd27
--- /dev/null
+++ b/internals/vue-vite-import/example/js/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TinyVue Vite Import</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/internals/vue-vite-import/example/js/package.json b/internals/vue-vite-import/example/js/package.json
new file mode 100644
index 000000000..0377657c0
--- /dev/null
+++ b/internals/vue-vite-import/example/js/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "my-vue-app",
+  "description": "",
+  "author": "",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@opentiny/vue": "^3.0.0",
+    "vue": "^3.2.23",
+    "vue-i18n": "^9.2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "vite": "^3.0.0"
+  },
+  "email": ""
+}
diff --git a/internals/vue-vite-import/example/js/src/App.vue b/internals/vue-vite-import/example/js/src/App.vue
new file mode 100644
index 000000000..9b5d5a25b
--- /dev/null
+++ b/internals/vue-vite-import/example/js/src/App.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <span>当前选中值：{{ checkedVal }}</span>
+    <tiny-alert description="type 为默认值 success"></tiny-alert>
+    <div>
+      <icon-share class="tiny-svg-size icon-share"></icon-share>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ButtonGroup, Alert as TinyAlert } from '@opentiny/vue'
+import { iconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup,
+    TinyAlert: TinyAlert,
+    IconShare: iconShare()
+  },
+  data() {
+    return {
+      checkedVal: 'Button1',
+      groupData: [
+        { text: 'Button1', value: 'Button1' },
+        { text: 'Button2', value: 'Button2' },
+        { text: 'Button3', value: 'Button3' }
+      ]
+    }
+  }
+}
+</script>
diff --git a/internals/vue-vite-import/example/js/src/main.js b/internals/vue-vite-import/example/js/src/main.js
new file mode 100644
index 000000000..01433bca2
--- /dev/null
+++ b/internals/vue-vite-import/example/js/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/internals/vue-vite-import/example/js/vite.config.js b/internals/vue-vite-import/example/js/vite.config.js
new file mode 100644
index 000000000..4a7b6fb8a
--- /dev/null
+++ b/internals/vue-vite-import/example/js/vite.config.js
@@ -0,0 +1,29 @@
+import vue from '@vitejs/plugin-vue'
+import importPlugin from '../../dist/index.js'
+
+export default {
+  resolve: {
+    extensions: ['.js', '.jsx', '.vue']
+  },
+  plugins: [
+    vue(),
+    importPlugin(
+      [
+        {
+          libraryName: '@opentiny/vue',
+          split: '-'
+        },
+        {
+          libraryName: '@opentiny/vue-icon',
+          customName: (name) => {
+            return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
+          }
+        }
+      ],
+      'pc'
+    )
+  ],
+  define: {
+    'process.env': Object.assign({}, process.env)
+  }
+}
diff --git a/internals/vue-vite-import/example/ts/README.md b/internals/vue-vite-import/example/ts/README.md
new file mode 100644
index 000000000..ef72fd524
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
diff --git a/internals/vue-vite-import/example/ts/index.html b/internals/vue-vite-import/example/ts/index.html
new file mode 100644
index 000000000..7770946a3
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/internals/vue-vite-import/example/ts/package.json b/internals/vue-vite-import/example/ts/package.json
new file mode 100644
index 000000000..1451e9de7
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "my-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@opentiny/vue": "^3.5.2",
+    "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "@opentiny/vue-vite-import": "^1.0.1",
+    "@types/node": "^18.14.6",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vue-tsc": "^1.0.24"
+  }
+}
diff --git a/internals/vue-vite-import/example/ts/src/App.vue b/internals/vue-vite-import/example/ts/src/App.vue
new file mode 100644
index 000000000..1fc9b2ee3
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/src/App.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
+    <span>当前选中值：{{ checkedVal }}</span>
+    <div>
+      <icon-share class="tiny-svg-size icon-share"></icon-share>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ButtonGroup } from '@opentiny/vue'
+import { iconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButtonGroup: ButtonGroup,
+    IconShare: iconShare()
+  },
+  data() {
+    return {
+      checkedVal: 'Button1',
+      groupData: [
+        { text: 'Button1', value: 'Button1' },
+        { text: 'Button2', value: 'Button2' },
+        { text: 'Button3', value: 'Button3' }
+      ]
+    }
+  }
+}
+</script>
diff --git a/internals/vue-vite-import/example/ts/src/main.ts b/internals/vue-vite-import/example/ts/src/main.ts
new file mode 100644
index 000000000..2425c0f74
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/internals/vue-vite-import/example/ts/src/style.css b/internals/vue-vite-import/example/ts/src/style.css
new file mode 100644
index 000000000..7294765e0
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/src/style.css
@@ -0,0 +1,80 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/internals/vue-vite-import/example/ts/src/vite-env.d.ts b/internals/vue-vite-import/example/ts/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/internals/vue-vite-import/example/ts/tsconfig.json b/internals/vue-vite-import/example/ts/tsconfig.json
new file mode 100644
index 000000000..5b8786df1
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM", "ES2015", "ES2017"],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/internals/vue-vite-import/example/ts/tsconfig.node.json b/internals/vue-vite-import/example/ts/tsconfig.node.json
new file mode 100644
index 000000000..9d31e2aed
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/internals/vue-vite-import/example/ts/vite.config.ts b/internals/vue-vite-import/example/ts/vite.config.ts
new file mode 100644
index 000000000..882c4c79f
--- /dev/null
+++ b/internals/vue-vite-import/example/ts/vite.config.ts
@@ -0,0 +1,30 @@
+import importPlugin from '../../dist/index.js'
+import vue from '@vitejs/plugin-vue'
+
+export default {
+  resolve: {
+    extensions: ['.js', '.jsx', '.vue']
+  },
+  plugins: [
+    vue(),
+    importPlugin(
+      [
+        {
+          libraryName: '@opentiny/vue',
+          split: '-'
+        },
+        {
+          libraryName: '@opentiny/vue-icon',
+          libraryDirectory: 'lib',
+          customName: (name) => {
+            return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
+          }
+        }
+      ],
+      'pc' // 此配置非必选，按需配置(pc|mobile)
+    )
+  ],
+  define: {
+    'process.env': { ...process.env }
+  }
+}
diff --git a/internals/vue-vite-import/package.json b/internals/vue-vite-import/package.json
new file mode 100644
index 000000000..606e942d4
--- /dev/null
+++ b/internals/vue-vite-import/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@opentiny/vue-vite-import",
+  "version": "1.0.2",
+  "description": "A TinyVue vite import plugin",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "tsc -w -p .",
+    "build": "rm -rf dist && tsc && npx tsc --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "author": "Tiny Vue Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:opentiny/tiny-vue.git"
+  },
+  "keywords": [
+    "vite-plugin",
+    "TinyVue",
+    "vite"
+  ],
+  "dependencies": {
+    "change-case": "^4.1.2"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.3",
+    "vite": "^3.0.1"
+  }
+}
diff --git a/internals/vue-vite-import/src/index.ts b/internals/vue-vite-import/src/index.ts
new file mode 100644
index 000000000..a6e5fbb28
--- /dev/null
+++ b/internals/vue-vite-import/src/index.ts
@@ -0,0 +1,156 @@
+import * as changeCase from 'change-case'
+import type { Plugin } from 'vite'
+
+type ChangeCaseType =
+  | 'camelCase'
+  | 'capitalCase'
+  | 'constantCase'
+  | 'dotCase'
+  | 'headerCase'
+  | 'noCase'
+  | 'paramCase'
+  | 'pascalCase'
+  | 'pathCase'
+  | 'sentenceCase'
+  | 'snakeCase'
+
+interface PluginInnerOption {
+  libraryName: string
+  libraryResolve: (name: string) => string
+  customName?: (name: string) => string
+}
+
+type PluginInnerOptions = Array<PluginInnerOption>
+
+export interface PluginOption {
+  libraryName: string
+  libraryDirectory?: string
+  split?: string
+  customName?: (name: string) => string
+  libraryChangeCase?: ChangeCaseType | ((name: string) => string)
+}
+
+export type PluginOptions = Array<PluginOption>
+
+type ModeType = 'pc' | 'mobile' | undefined
+
+export default function vitePluginBabelImport(
+  plgOptions: PluginOptions,
+  mode: ModeType
+): Plugin {
+  return {
+    name: '@opentiny/vue-vite-import',
+    transform(code, id) {
+      const matchValue = mode === 'pc' ? './mobile' : './pc'
+      const isCheckMode = mode && /@opentiny\/vue-.+?\/lib\/index.js$/.test(id)
+      // 不处理node_modules内的依赖
+      if (/\.(?:[jt]sx?|vue)$/.test(id) && !/(node_modules)/.test(id)) {
+        return {
+          code: transformCode(
+            code,
+            transformOptions(plgOptions)
+          ),
+          map: null
+        }
+      } else if (isCheckMode) {
+        const newCode = code.replace(matchValue, `./${mode}`)
+        return {
+          code: newCode,
+          map: null
+        }
+      }
+    }
+  }
+}
+
+interface CaseFnObjType {
+  libraryCaseFn: (name: string) => string
+  styleCaseFn: (name: string) => string
+}
+
+function generateOptions(caseFnObj: CaseFnObjType, opt: PluginOption) {
+  if (typeof opt.libraryChangeCase === 'function') {
+    caseFnObj.libraryCaseFn = opt.libraryChangeCase
+  } else {
+    caseFnObj.libraryCaseFn = (name) => {
+      return changeCase[
+        (opt.libraryChangeCase || 'paramCase') as ChangeCaseType
+      ](name)
+    }
+  }
+}
+
+function transformOptions(options: PluginOptions): PluginInnerOptions {
+  return options.map((opt) => {
+    const caseFnObj: CaseFnObjType = {
+      libraryCaseFn: (name: string) => {
+        return name
+      },
+      styleCaseFn: (name: string) => {
+        return name
+      }
+    }
+
+    generateOptions(caseFnObj, opt)
+
+    return {
+      libraryName: opt.libraryName,
+      customName: (name) => {
+        return opt?.customName?.(caseFnObj.libraryCaseFn(name))
+      },
+      libraryResolve: (name) => {
+        let libraryPaths: string[] = [opt.libraryName]
+        if (opt.libraryDirectory) {
+          libraryPaths.push(opt.libraryDirectory)
+        }
+        libraryPaths.push(caseFnObj.libraryCaseFn(name))
+        return libraryPaths.join(opt.split || '-').replace(/\/\//g, '/')
+      }
+    } as PluginInnerOption
+  })
+}
+
+const transformImport = (matchRes: string, opt: PluginInnerOption) => {
+  const componentsArr = matchRes.split(',').filter(item => item.trim()).map(item => {
+    let itemName = item.trim()
+    let asName = ''
+
+    // 处理import { Alert as TinyAlert } from '@opentiny/vue'
+    const isImportWithAs = itemName.includes(' as ')
+    if (isImportWithAs) {
+      const allName = itemName.split(' as ')
+      itemName = allName[0]
+      asName = allName[1]
+    }
+    const importName = opt.customName?.(itemName) || opt.libraryResolve(itemName)
+    const compImportName = isImportWithAs ? `* as ${asName}` : itemName
+    return `import ${compImportName} from '${importName}'`
+  })
+  return componentsArr.join('\n') + '\n'
+}
+
+const compRegExpMap = {
+  '@opentiny/vue': /import\s+?{([\w ,\s]+)}\s+?from\s+?('|")@opentiny\/vue('|")/g,
+  '@opentiny/vue-icon':
+    /import\s+?{([\w ,\s]+)}\s+?from\s+?('|")@opentiny\/vue-icon('|")/g
+}
+
+function transformCode(
+  code: string,
+  plgOptions: PluginInnerOptions
+): string {
+  let resultCode = code
+
+  plgOptions.forEach(opt => {
+    const compRegexp = compRegExpMap[(opt.libraryName as '@opentiny/vue')]
+    if (compRegexp && compRegexp.test(resultCode)) {
+      const newCode = resultCode.replace(compRegexp, (_all, matchRes): string => {
+        const newImport = transformImport(matchRes, opt)
+        return newImport
+      })
+      resultCode = newCode
+    }
+  })
+
+  return resultCode
+}
diff --git a/internals/vue-vite-import/src/typings.d.ts b/internals/vue-vite-import/src/typings.d.ts
new file mode 100644
index 000000000..8cb293272
--- /dev/null
+++ b/internals/vue-vite-import/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '*.json';
diff --git a/internals/vue-vite-import/tsconfig.json b/internals/vue-vite-import/tsconfig.json
new file mode 100644
index 000000000..beec571a8
--- /dev/null
+++ b/internals/vue-vite-import/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    "outDir": "./dist",
+    "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  },
+  "include": ["src", "typings"]
+}
diff --git a/package.json b/package.json
index fe3996f80..8ebfa2b1d 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "build:renderless": "pnpm -C packages/renderless build",
     "build:theme": "pnpm -C packages/theme build",
     "build:themeMobile": "pnpm -C packages/theme-mobile build",
+    "build:themejson": "pnpm -C packages/theme build:themejson",
     "build:internals": "pnpm \"--filter=./internals/*\" build",
     "release:vue2": "pnpm -C internals/cli release:vue2",
     "release:vue3": "pnpm -C internals/cli release:vue3",
diff --git a/packages/renderless/src/breadcrumb-item/vue.ts b/packages/renderless/src/breadcrumb-item/vue.ts
index 9bc17372b..fadd1ca09 100644
--- a/packages/renderless/src/breadcrumb-item/vue.ts
+++ b/packages/renderless/src/breadcrumb-item/vue.ts
@@ -10,12 +10,11 @@
  *
  */
 
-import { on, off } from '@opentiny/vue-renderless/common/deps/dom'
 import { linkClick } from './index'
 
 export const api = ['linkClick']
 
-export const renderless = (props, { onMounted, onBeforeUnmount, inject }, { refs, router, emit }) => {
+export const renderless = (props, { inject }, { refs, router, emit }) => {
   const breadcrumbEmitter = inject('breadcrumbEmitter')
   const breadcrumb = inject('breadcrumb')
   const constants = breadcrumb._constants
@@ -24,15 +23,5 @@ export const renderless = (props, { onMounted, onBeforeUnmount, inject }, { refs
     linkClick: linkClick({ props, refs, router, emit, breadcrumbEmitter, constants })
   }
 
-  onMounted(() => {
-    on(refs.link, 'click', api.linkClick)
-  })
-
-  onBeforeUnmount(() => {
-    off(refs.link, 'click', api.linkClick)
-  })
-
-  return {
-    api
-  }
+  return api
 }
diff --git a/packages/renderless/src/common/deps/popper.ts b/packages/renderless/src/common/deps/popper.ts
index 084cbba6c..a464ccfce 100644
--- a/packages/renderless/src/common/deps/popper.ts
+++ b/packages/renderless/src/common/deps/popper.ts
@@ -317,6 +317,7 @@ Popper.prototype.destroy = function () {
 
   const popperStyle = (this._reference === this._oldreference && this._oldreference._popper) || {}
 
+  this._popper.style.display = 'none'
   this._popper.style.position = ''
   this._popper.style.top = popperStyle.top || ''
   this._popper.style.left = popperStyle.left || ''
diff --git a/packages/renderless/src/slider/index.ts b/packages/renderless/src/slider/index.ts
index 8cb9b405d..70f7dd9b5 100644
--- a/packages/renderless/src/slider/index.ts
+++ b/packages/renderless/src/slider/index.ts
@@ -22,173 +22,195 @@ export const bindEvent = (api) => () => {
 
 export const unBindEvent = (api) => () => off(window, 'resize', api.bindResize)
 
-export const bindResize = ({ parent, props, state }) => () => {
-  const handleEl = parent.$el.firstElementChild
+export const bindResize =
+  ({ parent, props, state }) =>
+    () => {
+      const handleEl = parent.$el.firstElementChild
 
-  state.sliderSize = handleEl['client' + (props.vertical ? 'Height' : 'Width')]
-  state.sliderOffset = handleEl.getBoundingClientRect()
-}
+      state.sliderSize = handleEl['client' + (props.vertical ? 'Height' : 'Width')]
+      state.sliderOffset = handleEl.getBoundingClientRect()
+    }
 
-export const bindKeyDown = ({ api, props, state }) => (event) => {
-  if (state.disabled || state.activeIndex < 0) {
-    return
-  }
+export const bindKeyDown =
+  ({ api, props, state }) =>
+    (event) => {
+      if (state.disabled || state.activeIndex < 0) {
+        return
+      }
 
-  let currentValue = 0
+      let currentValue = 0
 
-  switch (event.keyCode) {
-    case KEY_CODE.Home:
-      currentValue = props.min
-      break
-    case KEY_CODE.End:
-      currentValue = props.max
-      break
-    case KEY_CODE.PageUp:
-      currentValue = state.activeValue + Math.ceil(state.rangeDiff / props.numPages)
-      break
-    case KEY_CODE.PageDown:
-      currentValue = state.activeValue - Math.ceil(state.rangeDiff / props.numPages)
-      break
-    case KEY_CODE.ArrowUp:
-    case KEY_CODE.ArrowRight:
-      currentValue = state.activeValue + props.step
-      break
-    case KEY_CODE.ArrowDown:
-    case KEY_CODE.ArrowLeft:
-      currentValue = state.activeValue - props.step
-      break
-    default:
-      currentValue = state.activeValue
-      break
-  }
+      switch (event.keyCode) {
+        case KEY_CODE.Home:
+          currentValue = props.min
+          break
+        case KEY_CODE.End:
+          currentValue = props.max
+          break
+        case KEY_CODE.PageUp:
+          currentValue = state.activeValue + Math.ceil(state.rangeDiff / props.numPages)
+          break
+        case KEY_CODE.PageDown:
+          currentValue = state.activeValue - Math.ceil(state.rangeDiff / props.numPages)
+          break
+        case KEY_CODE.ArrowUp:
+        case KEY_CODE.ArrowRight:
+          currentValue = state.activeValue + props.step
+          break
+        case KEY_CODE.ArrowDown:
+        case KEY_CODE.ArrowLeft:
+          currentValue = state.activeValue - props.step
+          break
+        default:
+          currentValue = state.activeValue
+          break
+      }
 
-  api.setActiveButtonValue(currentValue)
-  api.setButtonStyle()
-  api.setBarStyle()
-}
+      api.setActiveButtonValue(currentValue)
+      api.setButtonStyle()
+      api.setBarStyle()
+    }
 
-export const bindMouseDown = ({ api, constants, mode, emit, state }) => (event) => {
-  if (event.button !== 0 && event.detail !== 0) {
-    state.activeIndex = -1
-    return
-  }
+export const bindMouseDown =
+  ({ api, constants, mode, emit, state }) =>
+    (event) => {
+      if (event.button !== 0 && event.detail !== 0) {
+        state.activeIndex = -1
+        return
+      }
 
-  if (!emitEvent(emit, 'start', api.getActiveButtonValue())) {
-    state.activeIndex = -1
-    return
-  }
+      if (!emitEvent(emit, 'start', api.getActiveButtonValue())) {
+        state.activeIndex = -1
+        return
+      }
 
-  const handleEl = event.target
-  const isClickBar = hasClass(handleEl, constants.sliderCls(mode)) || hasClass(handleEl, constants.rangeCls(mode))
-  const isClickBtn =
-    hasClass(handleEl, constants.buttonCls(mode)) || hasClass(handleEl, constants.leftSvgCls(mode)) || hasClass(handleEl, constants.rightSvgCls(mode))
-  if (state.disabled || (!isClickBtn && !isClickBar)) {
-    state.activeIndex = -1
-    return
-  }
+      const handleEl = event.target
+      const isClickBar = hasClass(handleEl, constants.sliderCls(mode)) || hasClass(handleEl, constants.rangeCls(mode))
+      const isClickBtn =
+        hasClass(handleEl, constants.buttonCls(mode)) ||
+        hasClass(handleEl, constants.leftSvgCls(mode)) ||
+        hasClass(handleEl, constants.rightSvgCls(mode))
+      if (state.disabled || (!isClickBtn && !isClickBar)) {
+        state.activeIndex = -1
+        return
+      }
 
-  on(window, 'mouseup', api.bindMouseUp)
-  on(window, 'mousemove', api.bindMouseMove)
-  on(window, 'touchend', api.bindMouseUp)
-  on(window, 'touchmove', api.bindMouseMove)
+      on(window, 'mouseup', api.bindMouseUp)
+      on(window, 'mousemove', api.bindMouseMove)
+      on(window, 'touchend', api.bindMouseUp)
+      on(window, 'touchmove', api.bindMouseMove)
 
-  state.isDrag = isClickBtn
-  isClickBtn && (state.activeIndex = api.getActiveButtonIndex(event))
+      state.isDrag = isClickBtn
+      isClickBtn && (state.activeIndex = api.getActiveButtonIndex(event))
 
-  if (isClickBar) {
-    const currentValue = api.calculateValue(event)
-    if (state.isDouble) {
-      if (Math.abs(currentValue - state.leftBtnValue) > Math.abs(state.rightBtnValue - currentValue)) {
-        api.changeActiveValue(state.rightBtnValue < state.leftBtnValue)
-      } else {
-        api.changeActiveValue(state.rightBtnValue > state.leftBtnValue)
+      if (isClickBar) {
+        const currentValue = api.calculateValue(event)
+        if (state.isDouble) {
+          if (Math.abs(currentValue - state.leftBtnValue) > Math.abs(state.rightBtnValue - currentValue)) {
+            api.changeActiveValue(state.rightBtnValue < state.leftBtnValue)
+          } else {
+            api.changeActiveValue(state.rightBtnValue > state.leftBtnValue)
+          }
+        }
+        api.setActiveButtonValue(currentValue)
+        api.setButtonStyle()
+        api.setBarStyle()
+
+        emit('stop', api.getActiveButtonValue())
       }
     }
-    api.setActiveButtonValue(currentValue)
-    api.setButtonStyle()
-    api.setBarStyle()
 
-    emit('stop', api.getActiveButtonValue())
-  }
-}
+export const bindMouseMove =
+  ({ api, nextTick, state }) =>
+    (event) => {
+      if (state.disabled || !state.isDrag) {
+        return
+      }
 
-export const bindMouseMove = ({ api, nextTick, state }) => (event) => {
-  if (state.disabled || !state.isDrag) {
-    return
-  }
+      api.setActiveButtonValue(api.calculateValue(event))
+      api.setButtonStyle()
+      api.setBarStyle()
 
-  api.setActiveButtonValue(api.calculateValue(event))
-  api.setButtonStyle()
-  api.setBarStyle()
+      nextTick(() => {
+        api.setTipStyle()
+      })
+    }
 
-  nextTick(() => {
-    api.setTipStyle()
-  })
-}
+export const bindMouseUp =
+  ({ api, emit, state }) =>
+    () => {
+      if (state.disabled || !state.isDrag) {
+        return
+      }
 
-export const bindMouseUp = ({ api, emit, state }) => () => {
-  if (state.disabled || !state.isDrag) {
-    return
-  }
+      state.showTip = false
+      state.isDrag = false
 
-  state.showTip = false
-  state.isDrag = false
+      off(window, 'mouseup', api.bindMouseUp)
+      off(window, 'mousemove', api.bindMouseMove)
+      off(window, 'touchend', api.bindMouseUp)
+      off(window, 'touchmove', api.bindMouseMove)
 
-  off(window, 'mouseup', api.bindMouseUp)
-  off(window, 'mousemove', api.bindMouseMove)
-  off(window, 'touchend', api.bindMouseUp)
-  off(window, 'touchmove', api.bindMouseMove)
+      emit('stop', api.getActiveButtonValue())
+    }
 
-  emit('stop', api.getActiveButtonValue())
-}
+export const displayTip =
+  ({ api, nextTick, state }) =>
+    (event) => {
+      if (!state.showTip) {
+        state.showTip = true
+        api.changeActiveValue(api.getActiveButtonIndex(event) === 0)
 
-export const displayTip = ({ api, nextTick, state }) => (event) => {
-  if (!state.showTip) {
-    state.showTip = true
-    api.changeActiveValue(api.getActiveButtonIndex(event) === 0)
-
-    nextTick(() => {
-      api.setTipStyle()
-    })
-  }
-}
+        nextTick(() => {
+          api.setTipStyle()
+        })
+      }
+    }
 
 export const hideTip = (state) => () => !state.isDrag && (state.showTip = false)
 
-export const setTipStyle = ({ constants, mode, parent, props, state }) => () => {
-  if (!props.showTip) {
-    return
-  }
+export const setTipStyle =
+  ({ constants, mode, parent, props, state }) =>
+    () => {
+      if (!props.showTip) {
+        return
+      }
 
-  const tipStyle = { top: 0, left: 0 }
-  const tipEl = parent.$el.querySelector('.' + constants.tipCls(mode))
-  const moveSize = ((state.activeValue - props.min) / state.rangeDiff) * state.sliderSize
+      const tipStyle = { top: 0, left: 0 }
+      const tipEl = parent.$el.querySelector('.' + constants.tipCls(mode))
+      const moveSize = ((state.activeValue - props.min) / state.rangeDiff) * state.sliderSize
 
-  if (props.vertical) {
-    tipStyle.top = state.sliderSize - moveSize - constants.BUTTON_SIZE - constants.TIP_HEIGHT / 2 + constants.HALF_BAR_HEIGHT
-    tipStyle.left = -tipEl.clientWidth / 2 + constants.HALF_BAR_HEIGHT
-  } else {
-    tipStyle.top = -constants.TIP_HEIGHT - constants.BUTTON_SIZE / 2 + constants.HALF_BAR_HEIGHT
-    tipStyle.left = moveSize - constants.HALF_BAR_HEIGHT - tipEl.clientWidth / 2
-  }
+      if (props.vertical) {
+        tipStyle.top =
+          state.sliderSize - moveSize - constants.BUTTON_SIZE - constants.TIP_HEIGHT / 2 + constants.HALF_BAR_HEIGHT
+        tipStyle.left = -tipEl.clientWidth / 2 + constants.HALF_BAR_HEIGHT
+      } else {
+        tipStyle.top = -constants.TIP_HEIGHT - constants.BUTTON_SIZE / 2 + constants.HALF_BAR_HEIGHT
+        tipStyle.left = moveSize - constants.HALF_BAR_HEIGHT - tipEl.clientWidth / 2
+      }
 
-  state.tipStyle = {
-    top: tipStyle.top + 'px',
-    left: tipStyle.left + 'px'
-  }
-}
+      state.tipStyle = {
+        top: tipStyle.top + 'px',
+        left: tipStyle.left + 'px'
+      }
+    }
 
 const getActiveButtonIndexFlag = ({ state, event, constants, mode }) => {
   const cls = constants.buttonCls(mode)
   const { previousElementSibling } = event.target
 
-  return state.isDouble && (hasClass(previousElementSibling, cls) || event.target.className.baseVal === 'tiny-slider-right-svg')
+  return (
+    state.isDouble &&
+    (hasClass(previousElementSibling, cls) || event.target.className.baseVal === 'tiny-slider-right-svg')
+  )
 }
 
-export const getActiveButtonIndex = ({ constants, mode, state }) => (event) => {
-  const flag = getActiveButtonIndexFlag({ state, event, constants, mode })
-  return flag ? 1 : 0
-}
+export const getActiveButtonIndex =
+  ({ constants, mode, state }) =>
+    (event) => {
+      const flag = getActiveButtonIndexFlag({ state, event, constants, mode })
+      return flag ? 1 : 0
+    }
 
 const calcCurrentValue = ({ currentValue, props, state }) => {
   if (currentValue <= props.min) {
@@ -197,12 +219,20 @@ const calcCurrentValue = ({ currentValue, props, state }) => {
     currentValue = props.max
   } else {
     const step = props.step > 0 ? props.step : 1
+    // step的精度
+    let stepPrecision = 0
+    if (step - parseInt(step) > 0) {
+      stepPrecision = step.toString().split('.')[1].length
+    }
     const stepValue = (currentValue - props.min) % step
 
-    // step为小数时，由于精度问题会有误差。此处避免误差引起循环
-    if (stepValue > props.step / 10) {
+    if (stepValue) {
       currentValue -= stepValue
       currentValue += stepValue * 2 > step ? Number(step) : 0
+      if (stepPrecision) {
+        // step为小数时，currentValue也保持相同的精度
+        currentValue = currentValue.toFixed(stepPrecision)
+      }
     }
 
     if (state.isDouble) {
@@ -217,108 +247,119 @@ const calcCurrentValue = ({ currentValue, props, state }) => {
   return currentValue
 }
 
-export const setActiveButtonValue = ({ api, emit, props, state }) => (value) => {
-  let currentValue = value
-  currentValue = calcCurrentValue({ currentValue, props, state })
-  if (!state.isDouble) {
-    state.leftBtnValue = currentValue
-  } else {
-    if (state.activeIndex === 0) {
-      state.leftBtnValue = currentValue
-    } else {
-      state.rightBtnValue = currentValue
-    }
-  }
+export const setActiveButtonValue =
+  ({ api, emit, props, state }) =>
+    (value) => {
+      let currentValue = value
+      currentValue = calcCurrentValue({ currentValue, props, state })
+      if (!state.isDouble) {
+        state.leftBtnValue = currentValue
+      } else {
+        if (state.activeIndex === 0) {
+          state.leftBtnValue = currentValue
+        } else {
+          state.rightBtnValue = currentValue
+        }
+      }
 
-  state.activeValue = currentValue
-  state.innerTrigger = true // 防止触发 watch
+      state.activeValue = currentValue
+      state.innerTrigger = true // 防止触发 watch
 
-  emit('update:modelValue', api.getActiveButtonValue()) // 添加了一个emit触发input事件，实现双向绑定
-}
-
-export const setButtonStyle = ({ props, state }) => () => {
-  const percent = ((state.activeValue - props.min) / state.rangeDiff) * 100
-  const style = (props.vertical ? 'bottom' : 'left') + ':' + percent + '%'
-
-  if (!state.isDouble || state.activeIndex === 0) {
-    state.leftBtnPercent = percent
-    state.leftBtnStyle = style
-  } else {
-    state.rightBtnPercent = percent
-    state.rightBtnStyle = style
-  }
-}
-
-export const setBarStyle = ({ props, state }) => () => {
-  const minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent)
-  const maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent)
-
-  if (props.vertical) {
-    state.barStyle = {
-      bottom: maxSize - minSize + '%',
-      height: minSize + '%'
-    }
-  } else {
-    state.barStyle = {
-      left: maxSize - minSize + '%',
-      width: minSize + '%'
-    }
-  }
-}
-
-export const initSlider = ({ api, props, state }) => (value) => {
-  state.isDouble = Array.isArray(value)
-
-  const sliders = state.isDouble ? value : [value]
-
-  sliders.length > 2 && (sliders.length = 2)
-  sliders.forEach((item, index) => {
-    if (index === 0) {
-      state.leftBtnValue = Math.max(Number(item), props.min)
-    } else {
-      state.rightBtnValue = Math.min(Number(item), props.max)
-      state.rightBtnShow = true
+      emit('update:modelValue', api.getActiveButtonValue()) // 添加了一个emit触发input事件，实现双向绑定
     }
 
-    if (state.isInit) {
-      api.changeActiveValue(index === 0)
+export const setButtonStyle =
+  ({ props, state }) =>
+    () => {
+      const percent = ((state.activeValue - props.min) / state.rangeDiff) * 100
+      const style = (props.vertical ? 'bottom' : 'left') + ':' + percent + '%'
+
+      if (!state.isDouble || state.activeIndex === 0) {
+        state.leftBtnPercent = percent
+        state.leftBtnStyle = style
+      } else {
+        state.rightBtnPercent = percent
+        state.rightBtnStyle = style
+      }
     }
 
-    api.setButtonStyle()
-  })
-  state.isInit = false
-  api.setBarStyle()
-}
+export const setBarStyle =
+  ({ props, state }) =>
+    () => {
+      const minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent)
+      const maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent)
 
-export const calculateValue = ({ props, state }) => (event) => {
-  let currentValue = 0
-  const offset = state.sliderOffset
-
-  if (event.type === 'touchmove' || event.type === 'touchstart' || event.type === 'touchend') {
-    if (props.vertical) {
-      currentValue = props.max - ((event.touches[0].pageY - offset.top) / state.sliderSize) * state.rangeDiff
-    } else {
-      currentValue = props.min + ((event.touches[0].pageX - offset.left) / state.sliderSize) * state.rangeDiff
+      if (props.vertical) {
+        state.barStyle = {
+          bottom: maxSize - minSize + '%',
+          height: minSize + '%'
+        }
+      } else {
+        state.barStyle = {
+          left: maxSize - minSize + '%',
+          width: minSize + '%'
+        }
+      }
     }
-  } else {
-    if (props.vertical) {
-      currentValue = props.max - ((event.pageY - offset.top) / state.sliderSize) * state.rangeDiff
-    } else {
-      currentValue = props.min + ((event.pageX - offset.left) / state.sliderSize) * state.rangeDiff
-    }
-  }
 
-  return currentValue
-}
+export const initSlider =
+  ({ api, props, state }) =>
+    (value) => {
+      state.isDouble = Array.isArray(value)
+
+      const sliders = state.isDouble ? value : [value]
+
+      sliders.length > 2 && (sliders.length = 2)
+      sliders.forEach((item, index) => {
+        if (index === 0) {
+          state.leftBtnValue = Math.max(Number(item), props.min)
+        } else {
+          state.rightBtnValue = Math.min(Number(item), props.max)
+          state.rightBtnShow = true
+        }
+
+        if (state.isInit) {
+          api.changeActiveValue(index === 0)
+        }
+
+        api.setButtonStyle()
+      })
+      state.isInit = false
+      api.setBarStyle()
+    }
+
+export const calculateValue =
+  ({ props, state }) =>
+    (event) => {
+      let currentValue = 0
+      const offset = state.sliderOffset
+
+      if (event.type === 'touchmove' || event.type === 'touchstart' || event.type === 'touchend') {
+        if (props.vertical) {
+          currentValue = props.max - ((event.touches[0].pageY - offset.top) / state.sliderSize) * state.rangeDiff
+        } else {
+          currentValue = props.min + ((event.touches[0].pageX - offset.left) / state.sliderSize) * state.rangeDiff
+        }
+      } else {
+        if (props.vertical) {
+          currentValue = props.max - ((event.pageY - offset.top) / state.sliderSize) * state.rangeDiff
+        } else {
+          currentValue = props.min + ((event.pageX - offset.left) / state.sliderSize) * state.rangeDiff
+        }
+      }
+      return currentValue
+    }
 
 export const changeActiveValue = (state) => (isLeft) => {
   state.activeIndex = isLeft ? 0 : 1
   state.activeValue = isLeft ? state.leftBtnValue : state.rightBtnValue
 }
 
-export const formatTipValue = (props) => (value) => (props.formatTooltip instanceof Function ? props.formatTooltip(value) : value)
+export const formatTipValue = (props) => (value) =>
+  props.formatTooltip instanceof Function ? props.formatTooltip(value) : value
 
-export const getActiveButtonValue = (state) => () => (state.isDouble ? [state.leftBtnValue, state.rightBtnValue] : state.leftBtnValue)
+export const getActiveButtonValue = (state) => () =>
+  state.isDouble ? [state.leftBtnValue, state.rightBtnValue] : state.leftBtnValue
 
 export const autoSlider = (api) => (value) => {
   api.setActiveButtonValue(value)
@@ -336,53 +377,59 @@ export const customBeforeAppearHook = (props) => (el) => {
   }
 }
 
-export const customAfterAppearHook = ({ state, props }) => (el) => {
-  const minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent)
-  const maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent)
+export const customAfterAppearHook =
+  ({ state, props }) =>
+    (el) => {
+      const minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent)
+      const maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent)
 
-  if (props.vertical) {
-    el.style.bottom = maxSize - minSize + '%'
-    el.style.height = minSize + '%'
-  } else {
-    if (state.isDouble) {
-      el.style.left = maxSize - minSize + '%'
-      el.style.width = minSize + '%'
-    } else {
-      el.style.width = minSize + '%'
-    }
-  }
-}
-
-export const watchActiveValue = ({ api, emit, props, state }) => (newValue, oldValue) => {
-  const nNewValue = toNumber(newValue) || 0
-  const nOldValue = toNumber(oldValue) || 0
-
-  if (nNewValue !== nOldValue) {
-    api.autoSlider(nNewValue)
-
-    if (nNewValue <= props.max && nNewValue >= props.min) {
-      const value = api.getActiveButtonValue()
-
-      if (state.lastValue && state.lastValue.toString() !== value.toString()) {
-        emit('change', value)
+      if (props.vertical) {
+        el.style.bottom = maxSize - minSize + '%'
+        el.style.height = minSize + '%'
+      } else {
+        if (state.isDouble) {
+          el.style.left = maxSize - minSize + '%'
+          el.style.width = minSize + '%'
+        } else {
+          el.style.width = minSize + '%'
+        }
       }
-
-      state.lastValue = value
     }
-  } else {
-    state.activeValue = nNewValue || 0
-  }
-}
 
-export const watchModelValue = ({ api, state }) => (value) => {
-  // 防止多触点下，触发双向绑定导致渲染异常
-  if (!state.innerTrigger) {
-    api.initSlider(value)
-  } else {
-    state.innerTrigger = false
+export const watchActiveValue =
+  ({ api, emit, props, state }) =>
+    (newValue, oldValue) => {
+      const nNewValue = toNumber(newValue) || 0
+      const nOldValue = toNumber(oldValue) || 0
 
-    if (!state.isDouble) {
-      api.initSlider(value)
+      if (nNewValue !== nOldValue) {
+        api.autoSlider(nNewValue)
+
+        if (nNewValue <= props.max && nNewValue >= props.min) {
+          const value = api.getActiveButtonValue()
+
+          if (state.lastValue && state.lastValue.toString() !== value.toString()) {
+            emit('change', value)
+          }
+
+          state.lastValue = value
+        }
+      } else {
+        state.activeValue = nNewValue || 0
+      }
+    }
+
+export const watchModelValue =
+  ({ api, state }) =>
+    (value) => {
+      // 防止多触点下，触发双向绑定导致渲染异常
+      if (!state.innerTrigger) {
+        api.initSlider(value)
+      } else {
+        state.innerTrigger = false
+
+        if (!state.isDouble) {
+          api.initSlider(value)
+        }
+      }
     }
-  }
-}
diff --git a/packages/renderless/src/tooltip/vue.ts b/packages/renderless/src/tooltip/vue.ts
index ea6a8c848..ae5ccb8d3 100644
--- a/packages/renderless/src/tooltip/vue.ts
+++ b/packages/renderless/src/tooltip/vue.ts
@@ -24,7 +24,7 @@ import {
   debounceClose,
   watchFocusing,
   bindPopper,
-  focusHandler
+  focusHandler,
 } from './index'
 import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper'
 import { guid } from '@opentiny/vue-renderless/common/string'
@@ -36,13 +36,12 @@ export const api = [
   'show',
   'doDestroy',
   'handleFocus',
-  'setExpectedState',
   'debounceClose',
   'handleShowPopper',
   'handleClosePopper',
   'setExpectedState',
   'updatePopper',
-  'focusHandler'
+  'focusHandler',
 ]
 
 const initState = ({ reactive, showPopper, popperElm, referenceElm, props }) =>
@@ -78,7 +77,7 @@ export const renderless = (
     show: show({ api, state, props }),
     hide: hide(api),
     destroyed: destroyed({ state, api }),
-    bindPopper: bindPopper({ vm, refs, state, nextTick }),
+    bindPopper: bindPopper({ vm, refs, nextTick }),
     watchFocusing: watchFocusing(state),
     removeFocusing: removeFocusing(state),
     handleBlur: handleBlur({ api, state }),
@@ -88,7 +87,7 @@ export const renderless = (
     handleShowPopper: handleShowPopper({ props, state }),
     handleClosePopper: handleClosePopper({ api, props, state }),
     bindEvent: bindEvent({ api, state, vm }),
-    focusHandler: focusHandler({ slots, api })
+    focusHandler: focusHandler({ slots, api }),
   })
 
   watch(() => state.focusing, api.watchFocusing)
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 35dc10243..9d1491b4d 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -28,7 +28,8 @@
     "release": "node build/release.js && node build/postbuild.js && cp README.md dist",
     "build:copy-remote": "npm run build:theme && cp-cli dist ../aurora-vue/node_modules/@aurora/theme",
     "publishTgz": "node .cloudbuild/publish-tgzs.js",
-    "postversion": "pnpm build"
+    "postversion": "pnpm build",
+    "build:themejson": "node scripts/build-theme-json"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
@@ -39,6 +40,7 @@
     "gulp-clean-css": "^4.2.0",
     "gulp-less": "^5.0.0",
     "gulp-svg-inline": "^1.0.1",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "fast-glob": "^3.2.12"
   }
 }
diff --git a/packages/theme/scripts/build-theme-json.js b/packages/theme/scripts/build-theme-json.js
new file mode 100644
index 000000000..a254a4f25
--- /dev/null
+++ b/packages/theme/scripts/build-theme-json.js
@@ -0,0 +1,100 @@
+/**
+ * 将每个组件下的 `vars.less` 中的组件变量转化为统一的 `theme.json`,放到当前的 `scripts` 目录
+ * 启动命令：pnpm run build:themejson
+ * 检查结果：查看 theme-result.txt ,发现未写注释的变量
+ */
+const fs = require('fs')
+const fg = require('fast-glob')
+
+// 指定哪些目录的`vars.less`不需要处理
+const ignoreNames = ['src', 'base']
+// css规则的正则: '--color: var(--color);'  =>  [str, --color,  var(--color)]
+const ruleReg = /([\w|\-|_]*): *([\w|\-|\_|(|)]*);/
+
+function formatRule(name, key, value, desc) {
+  return `
+    "${key}": {
+        "id": "${key}",
+        "key": "${key}",
+        "variable": "${value}",
+        "value": "${value}",
+        "desc": "${desc}",
+        "descEn": "${desc}",
+        "component": "${name}",
+        "componentDesc": "",
+        "componentDescEn": "",
+        "selector": ".tiny-${name}",
+        "type": "",
+        "group": "",
+        "isImportant": "false",
+        "ui": "",
+        "show": 1,
+        "configurable": 1,
+        "isOpen": true
+    },`
+}
+
+// 处理一个vars.less文件
+function parseFile(component) {
+  let formated = []
+  let lessLines = fs.readFileSync(component.file, 'utf-8').split('\n')
+  lessLines = lessLines.map((line) => line.trim())
+
+  // 以 .component-css.........为起点行搜索。没找到，则跳出
+  let startRow = 0
+  while (startRow < lessLines.length && !lessLines[startRow].startsWith('.')) {
+    startRow++
+  }
+  if (startRow === lessLines.length) {
+    return []
+  }
+  let desc = '未知变量'
+
+  for (let row = startRow + 1; row < lessLines.length; row++) {
+    const line = lessLines[row]
+    // 跳过空行
+    if (line.length === 0) continue
+    // 注释行
+    if (line.startsWith('//')) {
+      desc = line.slice(2).trim()
+      continue
+    }
+    // 规则行
+    const matches = line.match(ruleReg)
+    if (matches) {
+      if (desc === '未知变量') component.noDescCount++
+
+      let [_, key, value] = matches
+      formated.push(formatRule(component.name, key, value, desc))
+      desc = '未知变量'
+    }
+  }
+  component.ruleCount = formated.length
+  return formated
+}
+
+// 抓取全部，开始处理
+fg(['**/vars.less']).then((files) => {
+  const components = files
+    .map((file) => {
+      const arr = file.split('/')
+      return {
+        name: arr.slice(-2)[0],
+        file,
+        ruleCount: 0, // 规则个数
+        noDescCount: 0 // 缺少注释的
+      }
+    })
+    .filter((item) => !ignoreNames.includes(item.name))
+
+  const parsed = components.map((comp) => parseFile(comp)).flat()
+  let writedContent = parsed.join('').slice(1, -1) // 去除最后一个逗号
+  writedContent = `{
+${writedContent}
+}`
+  fs.writeFileSync('scripts/theme.json', writedContent)
+
+  // 记录未注释的组件
+  const noDesc = components.filter((c) => c.noDescCount > 0)
+  fs.writeFileSync('scripts/theme-result.txt', JSON.stringify(noDesc, null, 2))
+})
diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less
index c2dad6aa1..35276d743 100644
--- a/packages/theme/src/alert/vars.less
+++ b/packages/theme/src/alert/vars.less
@@ -14,9 +14,9 @@
   --ti-alert-description-font-size: var(--ti-common-font-size-base);
   --ti-alert-close-font-size: var(--ti-common-font-size-base);
   --ti-alert-border-radius: var(--ti-common-border-radius-normal);
-  --ti-alert-title-text-color: var(--ti-base-color-info-normal);
+  --ti-alert-title-text-color: var(--ti-common-color-info-normal);
   --ti-alert-nomal-content-line-height: var(--ti-common-line-height-number);
-  --ti-alert-description-text-color: var(--ti-base-color-info-normal);
+  --ti-alert-description-text-color: var(--ti-common-color-info-normal);
   --ti-alert-opration-text-color: var(--ti-base-color-brand-7);
 
   --ti-alert-warning-border-color: var(--ti-common-color-warn-border);
diff --git a/packages/theme/src/autocomplete/index.less b/packages/theme/src/autocomplete/index.less
index 9f0dc9783..156b0143a 100644
--- a/packages/theme/src/autocomplete/index.less
+++ b/packages/theme/src/autocomplete/index.less
@@ -28,7 +28,7 @@
     border-radius: var(--ti-autocomplete-suggestion-border-radius);
     background-color: var(--ti-autocomplete-suggestion-bg-color);
     box-sizing: border-box;
-    box-shadow: var(--ti-base-box-shadow);
+    box-shadow: var(--ti-common-box-shadow);
 
     &__wrap {
       max-height: 280px;
@@ -109,7 +109,7 @@
     }
 
     &.@{popper-prefix-cls}[x-placement^='bottom'] {
-      margin-top: var(--ti-base-dropdown-gap);
+      margin-top: var(--ti-common-dropdown-gap);
     }
   }
 }
diff --git a/packages/theme/src/autocomplete/vars.less b/packages/theme/src/autocomplete/vars.less
index ae26bea3f..690b445a2 100644
--- a/packages/theme/src/autocomplete/vars.less
+++ b/packages/theme/src/autocomplete/vars.less
@@ -13,13 +13,13 @@
 .component-css-vars-autocomplete() {
   --ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal);
   --ti-autocomplete-suggestion-border-color: var(--ti-base-color-white);
-  --ti-autocomplete-suggestion-bg-color: var(--ti-base-color-light);
-  --ti-autocomplete-li-text-color: var(--ti-base-color-info-normal);
+  --ti-autocomplete-suggestion-bg-color: var(--ti-common-color-light);
+  --ti-autocomplete-li-text-color: var(--ti-common-color-info-normal);
   --ti-autocomplete-li-font-size: var(--ti-common-font-size-base);
-  --ti-autocomplete-li-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-autocomplete-li-select-bg-color: var(--ti-base-color-selected-background);
-  --ti-autocomplete-li-selected-text-color: var(--ti-base-color-selected-text-color);
-  --ti-autocomplete-li-divider-border-color: var(--ti-base-color-dark);
+  --ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background);
+  --ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color);
+  --ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark);
   --ti-autocomplete-li-height: 30px;
-  --ti-autocomplete-loading-text-color: var(--ti-base-color-placeholder);
+  --ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder);
 }
diff --git a/packages/theme/src/badge/vars.less b/packages/theme/src/badge/vars.less
index 6f2466cab..1dae53933 100644
--- a/packages/theme/src/badge/vars.less
+++ b/packages/theme/src/badge/vars.less
@@ -15,14 +15,14 @@
   --ti-badge-font-size: 12px;
   --ti-badge-font-weight: var(--ti-common-font-weight-7);
   --ti-badge-border-radius: 12px;
-  --ti-badge-text-color: var(--ti-base-color-light);
+  --ti-badge-text-color: var(--ti-common-color-light);
   --ti-badge-bg-color: var(--ti-base-color-error-3);
-  --ti-badge-link-hover-text-color: var(--ti-base-color-light);
+  --ti-badge-link-hover-text-color: var(--ti-common-color-light);
   --ti-badge-active-text-color: var(--ti-base-color-brand-6);
-  --ti-badge-active-bg-color: var(--ti-base-color-light);
+  --ti-badge-active-bg-color: var(--ti-common-color-light);
   --ti-badge-primary-bg-color: var(--ti-base-color-brand-6);
-  --ti-badge-success-bg-color: var(--ti-base-color-success-normal);
-  --ti-badge-warning-bg-color: var(--ti-base-color-warning-normal);
+  --ti-badge-success-bg-color: var(--ti-common-color-success-normal);
+  --ti-badge-warning-bg-color: var(--ti-common-color-warning-normal);
   --ti-badge-danger-bg-color: var(--ti-base-color-error-3);
-  --ti-badge-info-bg-color: var(--ti-base-color-info-normal);
+  --ti-badge-info-bg-color: var(--ti-common-color-info-normal);
 }
diff --git a/packages/theme/src/base/basic-var.less b/packages/theme/src/base/basic-var.less
index 2e85c2fe3..349947aa3 100644
--- a/packages/theme/src/base/basic-var.less
+++ b/packages/theme/src/base/basic-var.less
@@ -98,7 +98,7 @@
   --ti-common-color-error-border: var(--ti-base-color-error-3); /* 错误-校验边框色*/
   --ti-common-color-error-border-secondary: var(--ti-base-color-error-2); /* 错误-alert边框色*/
 
-  --ti-common-color-info: var(--ti-base-color-info-normal); /* 信息-图标色/状态图标-信息*/
+  --ti-common-color-info: var(--ti-base-color-common-7); /* 信息-图标色/状态图标-信息*/
   --ti-common-color-info-text: var(--ti-base-color-common-7); /* 信息-文字色*/
   --ti-common-color-info-bg: rgba(51, 51, 51, 0.06); /* 信息-背景色*/
   --ti-common-color-info-border: #d3d4d6; /* 信息-边框色*/
@@ -190,10 +190,14 @@
 
   /* 白底背景状态色*/
   --ti-common-color-bg-white-normal: var(--ti-base-color-white); /* 白色背景，用于输入框背景*/
-  --ti-common-color-bg-white-emphasize: var(--ti-base-color-brand-1); /* 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景*/
+  --ti-common-color-bg-white-emphasize: var(
+    --ti-base-color-brand-1
+  ); /* 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景*/
 
   /* 浅底背景状态色*/
-  --ti-common-color-bg-light-normal: var(--ti-base-color-brand-2); /* 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色*/
+  --ti-common-color-bg-light-normal: var(
+    --ti-base-color-brand-2
+  ); /* 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色*/
   --ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-3); /* 浅背景hover或强调色，开关组件“开”禁用背景色*/
 
   /* 深色底背景状态色*/
@@ -281,7 +285,8 @@
   --ti-common-shadow-success: 0 1px 3px 0 rgba(39, 176, 128, 0.25); /* 成功*/
 
   /* 字体*/
-  --ti-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei';
+  --ti-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
+    'Microsoft JhengHei';
 
   /* 字重*/
   --ti-common-font-weight-1: 100; /* 极细*/
@@ -360,72 +365,82 @@
   --ti-common-size-auto: auto; /* 其他尺寸-2*/
 
   /* 2022.9.23 补充 */
-  --ti-base-color-primary-normal: var(--ti-base-color-brand-6);
-  --ti-base-color-primary-hover: var(--ti-base-color-brand-5);
-  --ti-base-color-primary-active: var(--ti-base-color-brand-5);
-  --ti-base-color-primary-disabled: #a0cfff;
-  --ti-base-color-primary-disabled-border: var(--ti-common-color-line-disabled);
-  --ti-base-color-primary-disabled-text: var(--ti-common-color-text-disabled);
+  --ti-common-color-primary-normal: var(--ti-base-color-brand-6);
+  --ti-common-color-primary-hover: var(--ti-base-color-brand-5);
+  --ti-common-color-primary-active: var(--ti-base-color-brand-5);
+  --ti-common-color-primary-disabled: #a0cfff;
+  --ti-common-color-primary-disabled-border: var(--ti-common-color-line-disabled);
+  --ti-common-color-primary-disabled-text: var(--ti-common-color-text-disabled);
 
-  --ti-base-color-success-normal: var(--ti-common-color-success);
-  --ti-base-color-success-hover: var(--ti-common-color-success-border);
-  --ti-base-color-success-active: var(--ti-common-color-success-border);
-  --ti-base-color-success-disabled: #a6c3b9;
-  --ti-base-color-success-disabled-border: var(--ti-common-color-line-disabled);
-  --ti-base-color-success-disabled-text: var(--ti-common-color-text-disabled);
+  --ti-common-color-success-normal: var(--ti-common-color-success);
+  --ti-common-color-success-hover: var(--ti-common-color-success-border);
+  --ti-common-color-success-active: var(--ti-common-color-success-border);
+  --ti-common-color-success-disabled: #a6c3b9;
+  --ti-common-color-success-disabled-border: var(--ti-common-color-line-disabled);
+  --ti-common-color-success-disabled-text: var(--ti-common-color-text-disabled);
 
-  --ti-base-color-warning-normal: var(--ti-common-color-warn);
-  --ti-base-color-warning-hover: var(--ti-common-color-warn-secondary);
-  --ti-base-color-warning-active: var(--ti-common-color-warn-secondary);
-  --ti-base-color-warning-disabled: #d3c6a2;
-  --ti-base-color-warning-disabled-border: var(--ti-common-color-line-disabled);
-  --ti-base-color-warning-disabled-text: var(--ti-common-color-text-disabled);
+  --ti-common-color-warning-normal: var(--ti-common-color-warn);
+  --ti-common-color-warning-hover: var(--ti-common-color-warn-secondary);
+  --ti-common-color-warning-active: var(--ti-common-color-warn-secondary);
+  --ti-common-color-warning-disabled: #d3c6a2;
+  --ti-common-color-warning-disabled-border: var(--ti-common-color-line-disabled);
+  --ti-common-color-warning-disabled-text: var(--ti-common-color-text-disabled);
 
-  --ti-base-color-danger-normal: var(--ti-common-bg-primary);
-  --ti-base-color-danger-hover: var(--ti-common-bg-primary-hover);
-  --ti-base-color-danger-active: var(--ti-common-bg-primary-active);
-  --ti-base-color-danger-disabled: #d8bab5;
-  --ti-base-color-danger-disabled-border: var(--ti-common-color-line-disabled);
-  --ti-base-color-danger-disabled-text: var(--ti-common-color-text-disabled);
+  --ti-common-color-danger-normal: var(--ti-common-bg-primary);
+  --ti-common-color-danger-hover: var(--ti-common-bg-primary-hover);
+  --ti-common-color-danger-active: var(--ti-common-bg-primary-active);
+  --ti-common-color-danger-disabled: #d8bab5;
+  --ti-common-color-danger-disabled-border: var(--ti-common-color-line-disabled);
+  --ti-common-color-danger-disabled-text: var(--ti-common-color-text-disabled);
 
-  --ti-base-color-info-normal: var(--ti-base-color-common-7);
-  --ti-base-color-info-hover: #54657e;
-  --ti-base-color-info-active: #54657e;
-  --ti-base-color-info-disabled: #bfbfbf;
-  --ti-base-color-info-disabled-border: var(--ti-common-color-line-disabled);
-  --ti-base-color-info-disabled-text: var(--ti-common-color-text-disabled);
+  --ti-common-color-info-normal: var(--ti-base-color-common-7);
+  --ti-common-color-info-hover: #54657e;
+  --ti-common-color-info-active: #54657e;
+  --ti-common-color-info-disabled: #bfbfbf;
+  --ti-common-color-info-disabled-border: var(--ti-common-color-line-disabled);
+  --ti-common-color-info-disabled-text: var(--ti-common-color-text-disabled);
 
-  --ti-base-color-border: var(--ti-base-color-common-2);
-  --ti-base-color-border-hover: var(--ti-base-color-common-5);
-  --ti-base-color-light: #fff;
-  --ti-base-color-hover-background: var(--ti-base-color-brand-1);
-  --ti-base-color-selected-background: var(--ti-base-color-brand-6); /* 下拉框选中时的背景色 */
-  --ti-base-color-selected-text-color: var(--ti-base-color-light); /* 下拉框选中时文字的颜色 */
-  --ti-base-size-height-normal: 30px;
-  --ti-base-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-  --ti-base-dropdown-gap: 2px;
+  --ti-common-color-border: var(--ti-base-color-common-2);
+  --ti-common-color-border-hover: var(--ti-base-color-common-5);
+  --ti-common-color-light: #fff;
+  --ti-common-color-hover-background: var(--ti-base-color-brand-1);
+  --ti-common-color-selected-background: var(--ti-base-color-brand-6); /* 下拉框选中时的背景色 */
+  --ti-common-color-selected-text-color: var(--ti-common-color-light); /* 下拉框选中时文字的颜色 */
+  --ti-common-size-height-normal: 30px;
+  --ti-common-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  --ti-common-dropdown-gap: 2px;
 
   /* 2022.10.09 补充 */
-  --ti-base-color-dark: #000;
-  --ti-base-color-secondary: #666;
-  --ti-base-color-placeholder: #999;
-  --ti-base-color-navigation-background: #2e3243;
-  --ti-base-radius-large: 3px;
-  --ti-base-radius-medium: 2px;
-  --ti-base-radius-small: 1px;
-  --ti-base-font-size: 12px;
-  --ti-base-font-size-normal: 1em;
-  --ti-base-font-size-large: 1.125em;
-  --ti-base-font-weight-bold: 700;
-  --ti-base-size-width-large: 130px;
-  --ti-base-size-width-medium: 120px;
-  --ti-base-size-width-normal: 80px;
-  --ti-base-size-width-small: 36px;
-  --ti-base-size-width-minor: 30px;
-  --ti-base-size-width-mini: 24px;
-  --ti-base-size-height-large: 48px;
-  --ti-base-size-height-medium: 42px;
-  --ti-base-size-height-small: 28px;
-  --ti-base-size-height-minor: 30px;
-  --ti-base-size-height-mini: 24px;
+  --ti-common-color-dark: #000;
+  --ti-common-color-secondary: #666;
+  --ti-common-color-placeholder: #999;
+  --ti-common-color-navigation-background: #2e3243;
+  --ti-common-radius-large: 3px;
+  --ti-common-radius-medium: 2px;
+  --ti-common-radius-small: 1px;
+  --ti-common-font-size: 12px;
+  --ti-common-font-size-normal: 1em;
+  --ti-common-font-size-large: 1.125em;
+  --ti-common-font-weight-bold: 700;
+  --ti-common-size-width-large: 130px;
+  --ti-common-size-width-medium: 120px;
+  --ti-common-size-width-normal: 80px;
+  --ti-common-size-width-small: 36px;
+  --ti-common-size-width-minor: 30px;
+  --ti-common-size-width-mini: 24px;
+  --ti-common-size-height-large: 48px;
+  --ti-common-size-height-medium: 42px;
+  --ti-common-size-height-small: 28px;
+  --ti-common-size-height-minor: 30px;
+  --ti-common-size-height-mini: 24px;
+
+  /* 2023.4.12 补充*/
+  --ti-common-line-height-base: 12px; /* 跟字号保持一致 */
+  --ti-common-line-height-1: 14px;
+  --ti-common-line-height-2: 16px;
+  --ti-common-line-height-3: 18px;
+  --ti-common-line-height-4: 20px;
+  --ti-common-line-height-5: 24px;
+  --ti-common-line-height-6: 32px;
+  --ti-common-line-height-7: 36px;
 }
diff --git a/packages/theme/src/base/comp.less b/packages/theme/src/base/comp.less
deleted file mode 100644
index ef60a5edf..000000000
--- a/packages/theme/src/base/comp.less
+++ /dev/null
@@ -1,690 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-/*注意：css var变量，以最后一次出现的生效。*/
-/*组件变量定义*/
-:root {
-  /* ---------------body样式设置----START----------------------------------------------*/
-  --ti-default-body-bg: #fff;
-  --ti-default-font-color: var(--ti-common-color-text-primary);
-  --ti-default-font-size: 12px;
-  --ti-default-font-family: var(--ti-common-font-family);
-  --ti-default-body-margin: 0;
-  --ti-default-body-padding: 0;
-  /* ---------------body样式设置----END------------------------------------------------*/
-  /* ---------------表单元素公共样式设置----START----------------------------------------------*/
-  --ti-input-height: 28px;
-  --ti-input-font-size: var(--ti-common-font-size-base);
-  --ti-input-border-radius: var(--ti-common-border-radius-normal);
-  --ti-input-padding-horizontal: var(--ti-common-space-10);
-  --ti-input-placeholder-color: var(--ti-common-color-text-disabled);
-  --ti-input-border-color: var(--ti-common-color-line-normal);
-  --ti-input-text-color: var(--ti-common-color-text-primary);
-  --ti-input-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-input-clear-color: var(--ti-common-color-icon-normal);
-  --ti-input-border-color-disabled: var(--ti-common-color-line-disabled);
-  --ti-input-text-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-input-bg-color-disabled: var(--ti-common-color-bg-disabled);
-  --ti-input-clear-color-disabled: var(--ti-common-color-icon-disabled);
-  --ti-input-border-color-hover: var(--ti-common-color-line-hover);
-  --ti-input-clear-color-hover: var(--ti-common-color-icon-hover);
-  --ti-input-border-color-focus: var(--ti-common-color-line-active);
-  --ti-input-border-color-error: var(--ti-common-color-error-border);
-  --ti-input-bg-color-error: var(--ti-common-color-error-bg);
-  --ti-valid-error-icon-size: 16px;
-  --ti-valid-error-color: var(--ti-common-color-error);
-  --ti-valid-error-text-color: var(--ti-common-color-error-text);
-  --ti-textarea-padding-vertical: var(--ti-common-space-6);
-  --ti-textarea-min-height: 50px;
-  --ti-textarea-counter-text-color: var(--ti-common-color-text-weaken);
-  --ti-textarea-counter-inputed-text-color: var(--ti-common-color-text-primary);
-  /* ---------------表单元素公共样式设置----END------------------------------------------------*/
-  /* ---------------时间日期控件样式设置----START-----------------------------------------------*/
-  --ti-datetime-z-index: 10002;
-  --ti-datetime-input-font-size: var(--ti-common-font-size-base);
-  --ti-datetime-picker-color: var(--ti-common-color-text-primary);
-  --ti-datetime-picker-color-hover: var(--ti-common-color-text-highlight);
-  --ti-datetime-icon-color-hover: var(--ti-common-color-icon-hover);
-  --ti-datetime-content-color-active: var(--ti-common-color-bg-emphasize);
-  --ti-datetime-content-color-hover: var(--ti-common-color-bg-light-normal);
-  --ti-datetime-content-text-color-hover: var(--ti-common-color-text-highlight);
-  --ti-datetime-time-height: calc(var(--ti-input-height) - 2px);
-  --ti-datetime-range-selected-day-bg-color: var(
-    --ti-common-color-bg-light-normal
-  );
-  --ti-datetime-range-selected-day-bg-color-hover: var(
-    --ti-common-color-bg-light-emphasize
-  );
-  --ti-datetime-current-day-color: var(--ti-common-color-text-white);
-  --ti-datetime-day-width: 36px;
-  --ti-datetime-day-height: 24px;
-  --ti-datetime-day-margin-top: var(--ti-common-space-10);
-  --ti-datetime-icon-color-normal: var(--ti-common-color-icon-normal);
-  --ti-datetime-icon-color-disabled: var(--ti-common-color-icon-disabled);
-  --ti-datetime-content-color-normal: var(--ti-common-color-text-primary);
-  --ti-datetime-clear-icon-border-right-color: var(
-    --ti-common-color-line-dividing
-  );
-  --ti-datetime-week-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-datetime-beside-day-color: var(--ti-common-color-text-disabled);
-  --ti-datetime-beside-day-bg-color-hover: var(--ti-common-color-bg-disabled);
-  --ti-datetime-default-day-color: var(--ti-common-color-text-primary);
-  --ti-datetime-disable-day-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-datetime-panel-border-color: var(--ti-common-color-line-active);
-  --ti-datetime-panel-border-radius: 0;
-  --ti-datetime-panel-box-shadow: var(--ti-common-shadow-2-down);
-  /* ---------------时间日期控件样式设置-----END------------------------------------------------*/
-  /* -------------------------menu控件样式设置----START---------------------------------------------*/
-  --ti-menu-item-color: var(--ti-common-color-text-link);
-  --ti-menu-item-color-hover: var(--ti-common-color-text-link-hover);
-  --ti-menu-item-color-active: var(--ti-common-color-text-link-hover);
-  --ti-menu-panel-item-color-hover: var(--ti-common-color-text-highlight);
-  --ti-menu-panel-item-color-active: var(--ti-common-color-text-white);
-  --ti-menu-panel-item-bg-active: var(--ti-menu-panel-item-color-hover);
-  --ti-menu-item-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-menu-item-bg-hover: var(--ti-common-color-bg-white-emphasize);
-  --ti-menu-button-panel-border-color: var(--ti-menu-item-color);
-  /* -------------------------menubutton控件样式设置----END-----------------------------------------------*/
-  /* ---------------checkbox config----START----------------------------------------------*/
-  --ti-checkbox-size: var(--ti-common-font-size-2);
-  --ti-checkbox-mark-size: calc(var(--ti-checkbox-size) - 2px);
-  --ti-checkbox-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-checkbox-label-color: var(--ti-common-color-text-primary);
-  --ti-checkbox-border-radius: var(--ti-common-border-radius-normal);
-  --ti-checkbox-label-right-space: var(--ti-common-space-2x);
-  --ti-checkbox-mark-color: var(--ti-common-color-bg-white-normal);
-  --ti-checkbox-bg-color-checked: var(--ti-common-color-bg-emphasize);
-  --ti-checkbox-border-color: var(--ti-common-color-line-normal);
-  --ti-checkbox-bg-color-checked-hover: var(--ti-common-color-bg-hover);
-  --ti-checkbox-border-color-checked: var(--ti-common-color-line-active);
-  --ti-checkbox-bg-color-checked-active: var(
-    --ti-checkbox-bg-color-checked-hover
-  );
-  --ti-checkbox-label-color-checked: var(--ti-common-color-text-white);
-  --ti-checkbox-bg-color-unchecked-active: var(--ti-checkbox-bg-color);
-  --ti-checkbox-border-color-unchecked-active: var(
-    --ti-checkbox-border-color-hover
-  );
-  --ti-checkbox-border-color-hover: var(--ti-common-color-line-active);
-  --ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled);
-  --ti-checkbox-mark-color-disabled: var(--ti-common-color-icon-disabled);
-  --ti-checkbox-label-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-checkbox-border-color-checked-disabled: var(
-    --ti-common-color-line-disabled
-  );
-  --ti-checkbox-border-color-unchecked-disabled: var(
-    --ti-common-color-line-disabled
-  );
-  --ti-checkbox-partial-center-size: 6px;
-  --ti-checkbox-partial-color-checked: var(--ti-checkbox-border-color-checked);
-  --ti-checkbox-partial-color-checked-disabled: var(
-    --ti-checkbox-mark-color-disabled
-  );
-  --ti-checkbox-partial-color-checked-hover: var(
-    --ti-checkbox-bg-color-checked-hover
-  );
-  /* ---------------checkbox config----END----------------------------------------------*/
-  /* ---------------radio config----START----------------------------------------------*/
-  --ti-radio-mark-size: 8px;
-  --ti-radio-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-radio-border-color: var(--ti-common-color-line-normal);
-  --ti-radio-label-color: var(--ti-common-color-text-primary);
-  --ti-radio-border-color-checked: var(--ti-radio-bg-color-checked);
-  --ti-radio-bg-color-checked: var(--ti-common-color-bg-emphasize);
-  --ti-radio-bg-color-disabled: var(--ti-common-color-bg-disabled);
-  --ti-radio-mark-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-radio-border-color-disabled: var(--ti-common-color-line-disabled);
-  --ti-radio-label-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-radio-border-color-hover: var(--ti-common-color-line-active);
-  --ti-radio-bg-color-active: var(--ti-radio-bg-color);
-  --ti-radio-border-color-active: var(--ti-radio-border-color-hover);
-  --ti-radio-bg-color-checked-hover: var(--ti-common-color-bg-hover);
-  --ti-radio-bg-color-checked-active: var(--ti-common-color-bg-white-normal);
-  --ti-radio-border-color-checked-active: var(
-    --ti-radio-bg-color-checked-hover
-  );
-  /* ---------------radio config----END----------------------------------------------*/
-  /* ---------------button config----START----------------------------------------------*/
-  --ti-button-large-height: 32px;
-  --ti-button-large-padding-horizon: var(--ti-common-space-6x);
-  --ti-button-middle-height: 28px;
-  --ti-button-middle-padding-horizon: var(--ti-common-space-5x);
-  --ti-button-small-height: 24px;
-  --ti-button-small-padding-horizon: var(--ti-common-space-4x);
-  --ti-button-xs-height: 20px;
-  --ti-button-xs-padding-horizon: var(--ti-common-space-3x);
-  --ti-button-onlyIcon-height: 28px;
-  --ti-button-onlyIcon-width: 28px;
-  --ti-button-onlyIcon-padding: 5px;
-  --ti-button-onlyIcon-fontSize: 16px;
-  --ti-button-icon-padding-horizon: var(--ti-common-space-5x);
-  --ti-button-danger-box-shadow: 0 0;
-  --ti-button-default-box-shadow: 0 0;
-  --ti-button-default-text-color: var(--ti-common-color-text-primary);
-  --ti-button-border-radius: 2px;
-  --ti-button-default-normal-color: var(--ti-button-default-text-color);
-  --ti-button-default-normal-bg-color: var(--ti-common-bg-minor);
-  --ti-button-default-normal-border-color: var(--ti-common-color-line-normal);
-  --ti-button-default-color-hover: var(--ti-common-color-text-highlight);
-  --ti-button-default-bg-color-hover: var(--ti-common-bg-minor-hover);
-  --ti-button-default-border-color-hover: var(--ti-common-color-line-active);
-  --ti-button-default-color-active: var(--ti-button-default-color-hover);
-  --ti-button-default-bg-color-active: var(--ti-common-bg-minor-active);
-  --ti-button-default-border-color-active: var(
-    --ti-button-default-border-color-hover
-  );
-  --ti-button-default-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-button-default-bg-color-disabled: var(--ti-common-color-bg-disabled);
-  --ti-button-default-border-color-disabled: var(
-    --ti-common-color-line-disabled
-  );
-  --ti-button-primary-normal-color: var(--ti-common-color-text-white);
-  --ti-button-primary-normal-bg-color: var(--ti-common-color-bg-emphasize);
-  --ti-button-primary-normal-border-color: var(--ti-common-color-bg-emphasize);
-  --ti-button-primary-color-hover: var(--ti-common-color-text-white);
-  --ti-button-primary-bg-color-hover: var(--ti-common-color-icon-darkbg-hover);
-  --ti-button-primary-border-color-hover: var(
-    --ti-button-primary-bg-color-hover
-  );
-  --ti-button-primary-color-active: var(--ti-button-primary-color-hover);
-  --ti-button-primary-bg-color-active: #526ecc;
-  --ti-button-primary-border-color-active: #526ecc;
-  --ti-button-primary-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-button-primary-bg-color-disabled: var(
-    --ti-button-default-bg-color-disabled
-  );
-  --ti-button-primary-border-color-disabled: var(
-    --ti-button-default-border-color-disabled
-  );
-  --ti-button-danger-normal-color: var(--ti-common-color-text-white);
-  --ti-button-danger-normal-bg-color: var(--ti-common-bg-primary);
-  --ti-button-danger-normal-border-color: var(
-    --ti-button-danger-normal-bg-color
-  );
-  --ti-button-danger-color-hover: var(--ti-common-color-text-white);
-  --ti-button-danger-bg-color-hover: var(--ti-common-bg-primary-hover);
-  --ti-button-danger-border-color-hover: var(--ti-button-danger-bg-color-hover);
-  --ti-button-danger-color-active: var(--ti-common-color-text-white);
-  --ti-button-danger-bg-color-active: var(--ti-common-bg-primary-active);
-  --ti-button-danger-border-color-active: var(
-    --ti-button-danger-bg-color-active
-  );
-  --ti-button-danger-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-button-danger-bg-color-disabled: var(
-    --ti-button-default-bg-color-disabled
-  );
-  --ti-button-danger-border-color-disabled: var(
-    --ti-button-default-border-color-disabled
-  );
-  /* ---------------button config----END----------------------------------------------*/
-  /* ---------------Select config----START----------------------------------------------*/
-  --ti-tag-bg-color: var(--ti-common-color-bg-normal);
-  /* tag的背景色*/
-  --ti-tag-bg-color-disabled: var(--ti-common-color-bg-disabled);
-  /* tag灰化的背景色*/
-  --ti-tag-text-color: var(--ti-common-color-text-secondary);
-  /* tag的文本, 未使用?*/
-  --ti-tag-text-color-hover: var(--ti-common-color-text-highlight);
-  /* 文本hover颜色*/
-  --ti-tag-text-color-disabled: var(--ti-common-color-text-disabled);
-  /* 文本灰化颜色*/
-  --ti-tag-icon-color: var(--ti-common-color-icon-graybg-normal);
-  /* tag叉号的颜色*/
-  --ti-tag-icon-color-hover: var(--ti-common-color-icon-graybg-hover);
-  /* tag叉号的hover颜色*/
-  --ti-tag-icon-color-disabled: var(--ti-common-color-icon-graybg-disabled);
-  /* tag叉号的灰化颜色*/
-  --ti-tag-icon-color-clear-hover: var(--ti-common-color-icon-hover);
-  --ti-dominator-select-arrow-color: var(--ti-common-color-icon-normal);
-  --ti-dominator-select-arrow-color-disabled: var(
-    --ti-common-color-line-disabled
-  );
-  --ti-dominator-multiselect-box-cell-border-color-disabled: var(
-    --ti-common-color-line-disabled
-  );
-  --ti-dominator-select-clear-color: var(--ti-common-color-icon-normal);
-  --ti-select-item-bg-color-hover: var(--ti-common-color-bg-white-emphasize);
-  --ti-select-item-text-color-hover: var(--ti-common-color-text-highlight);
-  --ti-select-item-selected-bg-color: var(--ti-common-color-bg-emphasize);
-  --ti-select-item-selected-text-color: var(--ti-common-color-text-white);
-  --ti-select-text-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-select-group-color: var(--ti-common-color-text-weaken);
-  --ti-select-border-color-focus: var(--ti-common-color-line-active);
-  --ti-select-small-height: var(--ti-pagination-height);
-  --ti-select-small-dominator-text-left-padding: var(--ti-common-space-10);
-  --ti-select-small-triangle-position-right: 9px;
-  /* ---------------Select config----END----------------------------------------------*/
-  /* ---------------Searchbox config----START----------------------------------------------*/
-  --ti-searchbox-select-bg-color: var(--ti-common-color-bg-white-emphasize);
-  --ti-searchbox-select-bg-color-hover: var(--ti-common-color-bg-normal);
-  /* ---------------Searchbox config----END----------------------------------------------*/
-  /* ---------------modal config----START----------------------------------------------*/
-  --ti-modal-header-text-color: var(--ti-common-color-text-primary);
-  --ti-modal-close-icon-color: var(--ti-common-color-icon-normal);
-  --ti-modal-close-icon-color-hover: var(--ti-common-color-icon-hover);
-  --ti-modal-content-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-modal-backdrop-bg-color: #000000;
-  --ti-modal-header-font-weight: bold;
-  --ti-modal-close-icon-position-top: 8px;
-  --ti-modal-close-icon-position-right: 20px;
-  /* ---------------modal config----END----------------------------------------------*/
-  /* ---------------formfield config----START----------------------------------------------*/
-  --ti-formfield-item-padding-bottom: 20px;
-  --ti-formfield-item-required-padding-right: 0px;
-  --ti-formfield-item-required-font-size: 16px;
-  --ti-formfield-item-label-padding-right: 20px;
-  --ti-formfield-button-item-padding-top: 20px;
-  --ti-formfield-item-required-label-line-height: var(--ti-input-height);
-  --ti-formfield-text-from-item-line-height: 40px;
-  --ti-formfield-text-form-label-color: var(--ti-common-color-text-weaken);
-  --ti-formfield-item-content-line-height: 30px;
-  /* ---------------formfield config----END----------------------------------------------*/
-  /* ---------------tab config----START----------------------------------------------*/
-  --ti-tab-border-color: var(--ti-common-color-line-dividing);
-  --ti-tab-border-color-hover: var(--ti-tab-border-color);
-  --ti-tab-header-text-color: var(--ti-common-color-text-secondary);
-  --ti-tab-header-text-color-hover: var(--ti-common-color-text-highlight);
-  --ti-tab-header-text-color-active: var(--ti-tab-header-text-color-hover);
-  --ti-tab-header-text-color-active-font-weight: normal;
-  --ti-tab-header-font-size: var(--ti-common-font-size-1);
-  --ti-tab-header-border-bottom-active: 3px solid
-    var(--ti-common-color-bg-emphasize);
-  --ti-tab-second-level-header-text-color-active: var(
-    --ti-common-color-text-highlight
-  );
-  --ti-tab-second-level-header-text-color-hover: var(
-    --ti-tab-second-level-header-text-color-active
-  );
-  --ti-tab-dark-text-color: var(--ti-common-color-text-darkbg);
-  --ti-tab-dark-text-color-hover: var(--ti-common-color-text-white);
-  --ti-tab-dark-text-color-active: var(--ti-common-color-text-primary);
-  --ti-tab-dark-bg-color: var(--ti-common-color-bg-dark-normal);
-  --ti-tab-dark-bg-color-hover: var(--ti-common-color-bg-dark-emphasize);
-  --ti-tab-dark-bg-color-avtive: var(--ti-common-color-bg-normal);
-  --ti-tab-dark-color-disabled: var(--ti-common-color-text-gray-disabled);
-  --ti-tab-dark-padding-horizon: var(--ti-common-space-6x);
-  --ti-tab-dark-border-radius: var(--ti-common-border-radius-normal)
-    var(--ti-common-border-radius-normal) 0 0;
-  /* ---------------tab config----END----------------------------------------------*/
-  /* ---------------message config----START----------------------------------------------*/
-  --ti-message-prompt-icon-color: var(--ti-common-color-success);
-  --ti-message-error-icon-color: var(--ti-common-color-error);
-  --ti-message-warn-icon-color: var(--ti-common-color-warn);
-  --ti-message-confirm-icon-color: var(--ti-common-color-prompt);
-  --ti-message-default-width: 400px;
-  --ti-message-content-title-font-size: var(--ti-common-font-size-3);
-  /* ---------------message config----END----------------------------------------------*/
-  /* ---------------table config----START----------------------------------------------*/
-  --ti-table-th-height: 28px;
-  --ti-table-th-bg-color: var(--ti-common-color-bg-white-emphasize);
-  --ti-table-th-text-color: var(--ti-common-color-text-secondary);
-  --ti-table-th-spacing-line-color: var(--ti-common-color-text-white);
-  --ti-table-th-text-font-weight: 600;
-  --ti-table-border-bottom-color: var(--ti-common-color-line-dividing);
-  --ti-table-td-text-color: var(--ti-common-color-text-primary);
-  --ti-table-td-padding: var(--ti-common-space-3x) var(--ti-common-space-10);
-  --ti-table-td-line-height: var(--ti-common-line-height-number);
-  --ti-table-small-th-height: var(--ti-table-th-height);
-  --ti-table-small-td-horizontal-padding: 10px;
-  --ti-table-small-td-vertical-padding: var(--ti-common-space-2x);
-  --ti-table-small-td-line-height: var(--ti-common-line-height-number);
-  --ti-table-nest-th-height: var(--ti-table-small-th-height);
-  --ti-table-nest-td-line-height: var(--ti-common-line-height-number);
-  --ti-table-nest-td-border-bottom-color: var(--ti-table-border-bottom-color);
-  --ti-table-tr-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-table-tr-bg-color-hover: var(--ti-table-th-bg-color);
-  --ti-table-tr-bg-color-selected: var(--ti-table-tr-bg-color);
-  --ti-table-tr-text-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-table-tr-bg-color-disabled: var(--ti-common-color-bg-disabled);
-  --ti-table-tr-bg-color-nodata: var(--ti-table-tr-bg-color);
-  --ti-table-tr-bg-color-nodata-color: var(--ti-common-color-text-link);
-  --ti-table-tr-bg-color-nodata-color-hover: var(
-    --ti-common-color-text-link-hover
-  );
-  --ti-table-nodata-td-color: var(--ti-common-color-text-secondary);
-  --ti-table-nodata-height: 210px;
-  --ti-table-small-nodata-height: 190px;
-  --ti-table-nodata-td-font-size: var(--ti-common-font-size-1);
-  --ti-table-nodata-lead-icon-height: 90px;
-  --ti-table-nodata-td-bg-img-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAFPr3GUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADPNJREFUeNqUULENwCAMK0wsSDmBk3oCn/UFegR7N84oH6SAoAISFdWShwQbRxaIuDFoSzE/SEaIzAycgY2quBNNiawnfYl7iOGkEAJRTDsrf/yecQwJAEAUWmvS0ltdjJEYlFL9eA4J3nticM71477llhIB17hKo9WQaVbi2dBoO6Gb3x8BhE1DAFRxA7ocI1LCwxcXjMhpiFCk/YcpdoCJvH37FkXFlStXUDSAFO8HsVavXs3w69cvFMXCwsIMu3btwkz7Hz9+xBoxjx49wlQsKSmJ4VA2NjY0lyOBZ8+egWlgssUaQyDFB3BF35s3b1D4pOQmeE5iJKQQRLCgC6DZgmIIQABhSxsw7PCfOHAAlxnYBCkBCUQn1Fu3bjF8+fKF4dy5cwwpKSkMc+bMAcf38+fPwfKurq4M8vLyOMMQa+xs3boVbIC3tzfWxIMMQBYKCQkxBAUFYY3NAHRRkMEBAQHgtI2nfAHnBRsbG4Z3795hzWkgw9djk3n9+jVm8kYDoFyJo+KB551GdEFQWMJ8QAiIiooyGBkZYU+8uHIEqJr4/v07To0wy1lZWRlERESwmo03taCnDlAEgyIblnJAAMTGlVrwlcbkAqzpHFdrgKjqGJsgQADWqxjHQRgI2lEqGn8h10F5NS3iO1F+cj0PoM0DaE6iRbwA6SQekDRUIHE3lhKZZRfMwUhuzHq9LLOzy1L5u+tOyv2yduaIqLVEQYqvjakYOfvzjtxyF2gu4qfaj5FGjLHHrHEaxeOqocDnp/UnaXWWZavEzfNc5PTJHUDdSH0APRdsreo9qFbHceydVIgYznCiNFKh6bpODcOgwjCc6TQ0/IWqqmyX6ft+1jBmPIYBDMuyXI22rmtxhDlLh2g6ED0u9AXrGJNV27YqiqKJYwpjjLXl9JkraeuUAh+I9kOMfE3T+EfMIU3TWSqSJFFFUYh98MY9wGu6QEsKgmCyJzl19fhflbdg89ZjSOWVyyt47fa7F9ALMZMIo4P2/V/YAk1ZoY9yytFNH+FU4jEMPjc4/OYCWmqmrnAbZv/jb/1Ih34FYM6KURuGoajieAwkF8jQwVlsqLdshq5eSm7Q3iBX6QmKfYIO3jKkFzD4CM0eaMGQzbR9wko/qSV9K3HaB4IEK9b395f+ey/c9t81Zq0mdcXadW1ONgRpje9iODx9jzWrUM54hUMCtVmZ6L6NQ107YNn+2rUfhiKIQ+L5ouQzz3MRRZEIgkBKQ2WVUOo3mUw6r+E76Ak+2/QsieunZFxkPZqUMlJcgd9zGuIJ4GccM12ZHnO324nNZiOWy6XwfV9SJ2aGrNjv95JroOkmSSIWi4Vp+pb6P7c28Q7+gYDH47F0KzmanAOYBwDoG3g4Ax/I9IttlpIlQNM01rtS+kepts5sUBlP05QT9BSZvu+TGbWI8a5T+ymJ8kKZqUx3upEO5/QvgDDTRUxvBoDZZHJdUGZIwuFw6FVSXst2rMDxptSAbSMi0ygLjQ10PA7n87nchFAOfTa2p+s6pwjD8OhG2zYialoNk/hFEiAoELTJC+tqLm+cifTfkjiOZaZ0sG0+XY0zceMTAm3thtgoVVXJo8/zvF7Z6SoPKFh1KjGRySS7mN1FUchxDsqy/MyyrM9PXk18ms0/6ro28g7aLOg1g6TUYUX7iY5Pxy09/A8Ycc/pqp38+MfBjlyVyzUVzIpDK/p0xBl5+rsLBZmRe444AQNfAjBvBbdtBDFwdfBPjyQNCEkFKcF2BUEaEOwKknTiVBClAcWpIPZP+jk//ewOFOunl+M5HA3qsLsc3u35NMDCEGzvDSgulxzyPJbO4X1zSZ09r9PI738/rwVLyi4JuksIX3tEvLtGghhcQhDcJKzZFefNnq7cg4UUvKeFD9+f0JoiKUH6bbPpl4Ejx7YxTO+DOMYl82hZPWfpi5FuxTdWKlFlCP8Y+fp+8rgHYu79keQdUVeJWfpYCIurXFmWpvOL5XJZT0jojgaKAqSfkoLq30nHH4AkJjMNJN4F1drVpOlIgYGV1WpVP5jR7iSHljkq/MRnp0o1iV3jT57KpS+66njSTg5BTZUxKCWJdbg5D9wjGxfxdUPa1Uh07F3Q3b35fM6UYLVvU6Rl5kl6wbon3IewSA2bzaZehCH+4uzRYo0myk4jMIopVqwZnsBHidNXngdBERobJ566TxRTxNwUINnKIARE+FRYwx6YxvDMMYiARefTophixWZENGkmymAPDCvDEPp/CFxQpGEtPQrLanKz2cz0aVgbpHHQSXyiSe92uzCdTk1RXQvqOalXIgXCHAzSHq7sXW6JpWEVWKdkjMbBhqUHIZ26FPpAvrXYuFOpwvbgQTnALazQCJL6JQCPpU+8pBn3yPVaNOkO4Q64rfr4YwrSusg1gJxi+oHu4u5uWe6hQ6PVtWJcLYJF1ehsJpDgI3pst1sz5CGXwLJCHtzDebEADyBNTbPgoMCKGIK0SiUhzbgYSHv77CD9wIY9WBpAc78EJEY7SH/TIe+n9deYDtjv97WlSwBFsLgHZkYceuILaTOnxnWLB63X62yW5ynZkDShE9x+oysV6mKF7c2ARWmJPV646svlLJDtOPigTHZ7NQ/57MjqgO85sQZF2y9mFxS7cBmv5hHLZVyaR0LLuwvGpM0r40BdSpEO4XhG3KJDhRXzdYyEy5AYCKtYPxqB8KJrajoZwcc/WLc0k+VBTf38CmQfGyOZaQWbml43G94OeOCKtuRC6wKaMLkKiXPlgjx6tJnlzeprx1X8r/26aZf1X4D2zienjRgK4yZCQmwIbFmNlAMk3USwSnKCcoPCEXqD3qDlBKQ3oCdowpJVWLPJEeACqPqN/EZmOjOZ2M+TyZ8njaBFcuxvnj8/29970brQ97XEvr0b+7MbYZ7MrHvP6obhMaxJoMc2Av7WksX2t10KZtsO9MDuM0ZmO2xud8uLbQD6xnpJ12y3vdvZ99gmoBPbob7ZTXuxDrTcFNC88QezX1YZ4msDvY8ABwO+DtBt0iW3xb7UXTzrAH1uQ6D+AddSDid0fQsBuvaR3sGqdepVQBem6AcFqvO5eX19/fR/HAzzSOq/xt+kLlLRhWGdmkkBVpqHXQb0LNZGg4SYk5OTdZNb1AwRIcXUuNwZjaIMcW4KJHedpkDGu3jILNoUyJiUD8vPLEUbFW3r86e7Uw2Q5Y6IqxWuXfLl+dpiaCJFpQGd8HtJHTcfsKfGud10qQNu+RnSusuXJGfTcWiCjEUupfv9fjqgTXq0vHjq9HCxjTaCh36L4qSkpp2PfbdrXQY02+ggSbpwH1ZU/Enqd0ZejGrNNrl5RT6BQ/CQuspPalsCvIcSvczS+5eOE2GoWJ3E9rYYgLI4I/j6+PjIKEQ8X8l+CUfjzV9DW6ODeLRIlhBH5utJhRgyEFcphLKoSl1U1U+0Bfkqv6LAk89QnHVgmxybmhLvVeYKHwAbXqbzeAp1KagGliSJV9uiWy8CDXGzL3UUpeCLoyjT2+2xWTPNoszQ70hiOAsfFOJqMEM4umxmhNIU4iscwp017ktUtHFHM2aWUEm8AuCZ3p6qxszKhOKrBORFRsQDiLwkRJDoZCXaiEAbWbjX0WxNOij6QiIaqIOBDIfDrIpeSNsuR/usAQL02dlZE/xcumFR8Wg0kTwu6M/Pz0HhHd7rnmn4giGFpzHKqLhHEFsDtNtBBsRmpajCvoZH+9BG3oibG+BnfaClk3ge+S/i4Vp5XZPJJKUh2vNt0w3v4GcoBIeI6c0C9B+NODoPtFCGRB4oi9lt+XI0bVKWCUDg516v5wWKG96xg5XjgMhAp19zMY1BHxJ5HB0dpdEHmxkG6HPABAhIygWM/L99jX7RPxdoX0dYYWleCLcC79pAC9gsNrkvMVnb8OCiSsY+cbREHbR5enraBD+D7eOxc3L3oE0fAA0YDIRpGpLpDD9rGlxPZOTyMx4e4WQxvXGROBr6eNH2ahZEMaiDg/+AXDIV47BInEBAjbTtNhbTqQu00dqK53la4uk2GvyMZ0t8HgHoDNP8nSF/+KvxCXgwZ9QSrzIozhbkUnXTRhYnjiDb7wj9+lT1quhyVg1sjPNeavkyKBbFy8vL1hz8X11dpSFnzYQ2b5DLgE53p0ZZlUQZm6enp/R3bqCvr68bv9JyZxlxPUBHsEL1UpWug73z0ihKcFmIWAwZcKieo0qzUfU3Ppsc1QgvmRU1MSWKpTqSMHUhzQ7ayi8wqCtyTOx06B4w/c+LB0Yxl2xpqeTugG1mdw69rg4lPYXot2Z/NdJeYvTQ1IqBDWO6e0ARYxOQSBR6lbWw0+fC5FL6d2iRu7BjDMrWipH+Rqd+bHGkcm/7/6bZaBMJnWPb8bbmG85t/2ZRz1U2kKJ8bhdTnqbTNeQ0bartsW0EelW8PnCe8zVmwtyCt3CeZVsG9g+URCM796dvBgAAAABJRU5ErkJggg==');
-  --ti-table-col-resize-line: 1px dashed var(--ti-common-color-line-dividing);
-  --ti-table-cols-toggle-menu-color: var(--ti-common-color-icon-normal);
-  --ti-table-cols-toggle-menu-size: 28px;
-  --ti-table-cols-toggle-menu-font-size: var(--ti-common-font-size-2);
-  --ti-table-cols-toggle-menu-line-height: 26px;
-  --ti-table-cols-toggle-menu-color-hover: var(--ti-common-color-icon-hover);
-  --ti-table-cols-toggle-menu-color-disabled: var(
-    --ti-common-color-text-disabled
-  );
-  --ti-table-cols-toggle-menu-border-color-disabled: var(
-    --ti-common-color-line-disabled
-  );
-  --ti-table-cols-toggle-menu-border-color: var(--ti-common-color-line-normal);
-  --ti-table-cols-toggle-dropdown-border-radius: var(
-    --ti-common-border-radius-normal
-  );
-  --ti-table-cols-toggle-dropdown-box-shadow: var(--ti-common-shadow-2-down);
-  --ti-table-cols-toggle-dropdown-border-color: rgba(0, 0, 0, 0.2);
-  --ti-table-sort-icon-color-active: var(--ti-common-color-icon-active);
-  --ti-table-sort-color-hover: var(--ti-common-color-icon-hover);
-  --ti-table-details-icon-color-hover: var(--ti-common-color-icon-hover);
-  --ti-table-details-icon-color: var(--ti-common-color-icon-normal);
-  --ti-table-details-bg-color: var(--ti-common-color-bg-white-emphasize);
-  --ti-table-details-padding: 0;
-  --ti-table-small-details-padding: var(--ti-common-space-5x);
-  --ti-table-tree-minus-square-color: var(--ti-common-color-icon-active);
-  --ti-table-tree-minus-square-color-hover: var(--ti-common-color-icon-hover);
-  --ti-table-tree-plus-square-color: var(--ti-common-color-icon-normal);
-  --ti-table-tree-square-bg: var(--ti-common-color-bg-white-normal);
-  --ti-table-tree-square-right-space: var(--ti-common-space-2x);
-  --ti-table-tree-square-icon-font-size: 16px;
-  --ti-table-column-icon-left-space: var(--ti-common-space-5x);
-  --ti-table-column-icon-right-space: var(--ti-common-space-6);
-  --ti-table-column-select-icon-width: 32px;
-  --ti-table-column-icon-width: 42px;
-  /* ---------------table config----END----------------------------------------------*/
-  /* ---------------pagination config----START----------------------------------------------*/
-  --ti-pagination-height: 24px;
-  --ti-pagination-margin-top-table: 10px;
-  --ti-pagination-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-pagination-border-color: var(--ti-common-color-line-normal);
-  --ti-pagination-border-color-hover: var(--ti-common-color-line-hover);
-  --ti-pagination-text-color: var(--ti-common-color-text-secondary);
-  --ti-pagination-text-color-hover: var(--ti-common-color-icon-hover);
-  --ti-pagination-bg-color-hover: var(--ti-common-color-bg-light-normal);
-  --ti-pagination-text-color-active-hover: var(--ti-common-color-text-white);
-  --ti-pagination-bg-color-active-hover: var(--ti-common-color-bg-emphasize);
-  --ti-pagination-total-disable: var(--ti-common-color-text-disabled);
-  --ti-pagination-bg-color-disabled: var(--ti-common-color-bg-white-normal);
-  --ti-pagination-text-color-disabled: var(--ti-pagination-total-disable);
-  --ti-pagination-icon-color-disabled: var(--ti-common-color-icon-disabled);
-  --ti-pagination-text-color-active: var(--ti-common-color-text-white);
-  --ti-pagination-bg-color-active: var(--ti-common-color-bg-emphasize);
-  --ti-pagination-text-color-active-active: var(--ti-common-color-text-white);
-  --ti-pagination-bg-color-press: var(--ti-common-color-bg-emphasize);
-  --ti-pagination-prev-next-color: var(--ti-common-color-icon-normal);
-  --ti-pagination-prev-next-width: 22px;
-  --ti-pagination-button-bg-active: var(--ti-pagination-bg-color-press);
-  --ti-pagination-prev-next-color-active: var(
-    --ti-pagination-text-color-active-active
-  );
-  --ti-pagination-goto-icon-color: var(--ti-common-color-bg-emphasize);
-  --ti-pagination-goto-input-width: 45px;
-  --ti-pagination-goto-input-color: var(--ti-pagination-text-color);
-  --ti-pagination-text-min-width: 20px;
-  --ti-pagination-border-radius: var(--ti-common-border-radius-normal);
-  --ti-pagination-select-padding-left: var(--ti-common-space-10);
-  /* ---------------pagination config----END----------------------------------------------*/
-  /* ---------------tooltip config----START----------------------------------------------*/
-  --ti-tip-bg-color: var(--ti-common-color-bg-dark-deep);
-  --ti-tip-text-color: var(--ti-common-color-text-gray);
-  --ti-tip-border-radius: var(--ti-common-border-radius-1);
-  --ti-tip-border-color: var(--ti-common-color-bg-dark-deep);
-  --ti-tip-border: 1px solid var(--ti-common-color-bg-dark-deep);
-  --ti-tip-box-shadow-color: rgba(0, 0, 0, 0.2);
-  --ti-tip-box-shadow: var(--ti-common-shadow-3-down);
-  --ti-tip-vertical-padding: var(--ti-common-space-3x);
-  --ti-tip-horizon-padding: var(--ti-common-space-4x);
-  /* ---------------tooltip config----END----------------------------------------------*/
-  /* ---------------switch config----START----------------------------------------------*/
-  --ti-switch-track-on-bg-color: var(--ti-common-color-bg-emphasize);
-  --ti-switch-track-off-bg-color: var(--ti-common-color-bg-secondary);
-  --ti-switch-track-bg-color-disabled: var(--ti-common-color-bg-dark-disabled);
-  /* ---------------switch config----END----------------------------------------------*/
-  /* ---------------progressbar config----START----------------------------------------------*/
-  --ti-progressbar-progress-bg-color: var(--ti-common-color-line-dividing);
-  --ti-progressbar-bg-color: var(--ti-common-color-bg-emphasize);
-  --ti-progressbar-height: 5px;
-  --ti-progressbar-progress-border-radius: 999px;
-  --ti-progressbar-progress-label-color: var(--ti-common-color-text-white);
-  /* ---------------progressbar config----END----------------------------------------------*/
-  /* ---------------steps config----START----------------------------------------------*/
-  --ti-steps-number-font-size: var(--ti-common-font-size-1);
-  --ti-steps-line-color: var(--ti-common-color-line-normal);
-  --ti-steps-line-color-highlight: var(--ti-common-color-line-active);
-  --ti-steps-box-bg-color-highlight: var(--ti-common-color-bg-emphasize);
-  --ti-steps-box-highlight: var(--ti-common-color-icon-active);
-  --ti-steps-box-uncomplete: var(--ti-common-color-icon-normal);
-  --ti-steps-box-disabled: var(--ti-common-color-text-weaken);
-  --ti-steps-box-number-active: var(--ti-common-color-text-white);
-  --ti-steps-text-highlight: var(--ti-common-color-text-highlight);
-  --ti-steps-text-uncomplete: var(--ti-common-color-text-secondary);
-  --ti-steps-text-disabled: var(--ti-common-color-text-weaken);
-  --ti-steps-horizontal-process-done-color: var(--ti-base-color-brand-2);
-  --ti-steps-horizontal-process-wait-color: var(--ti-base-color-common-1);
-  /* ---------------steps config----END----------------------------------------------*/
-  /* -------------------------actionMenu控件样式设置----START---------------------------------------------*/
-  --ti-actionmenu-item-text-color: var(--ti-common-color-text-link);
-  --ti-actionmenu-item-text-color-hover: var(--ti-common-color-text-link-hover);
-  --ti-actionmenu-item-text-color-active: var(
-    --ti-common-color-text-link-hover
-  );
-  --ti-actionmenu-item-text-color-disabled: var(
-    --ti-common-color-text-disabled
-  );
-  --ti-actionmenu-divider-color: var(--ti-common-color-line-dividing);
-  /* -------------------------actionMenu控件样式设置----END-----------------------------------------------*/
-  /* ---------------leftmenu控件样式设置----START-----------------------------------------------------*/
-  --ti-leftmenu-width: 192px;
-  --ti-leftmenu-font-size: var(--ti-common-font-size-base);
-  --ti-leftmenu-head-font-size: var(--ti-common-font-size-1);
-  --ti-leftmenu-head-line-dividing-color: var(--ti-common-color-line-dividing);
-  --ti-leftmenu-container-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-leftmenu-toggle-icon-bg-color: #dbdbdb;
-  --ti-leftmenu-toggle-icon-bg-color-hover: #c9c9c9;
-  --ti-leftmenu-toggle-icon-color: #777777;
-  --ti-leftmenu-toggle-icon-color-hover: #666666;
-  --ti-leftmenu-head-text-color: var(--ti-common-color-text-primary);
-  --ti-leftmenu-first-level-font-size: 14px;
-  --ti-leftmenu-first-level-border-bottom: 1px #e5e5e5 solid;
-  --ti-leftmenu-first-level-border-top: 1px #fafafa solid;
-  --ti-leftmenu-first-level-border-bottom-selected: 1px #e5e5e5 solid;
-  --ti-leftmenu-first-level-border-top-selected: 1px #fafafa solid;
-  --ti-leftmenu-second-level-bg-color: #f7f8f8;
-  --ti-leftmenu-second-level-icon-color: #999;
-  --ti-leftmenu-second-level-font-size: 14px;
-  --ti-leftmenu-second-level-padding: 10px 36px 10px 40px;
-  --ti-leftmenu-second-level-border-bottom: 1px #e5e5e5 solid;
-  --ti-leftmenu-second-level-border-top: 1px #fafafa solid;
-  --ti-leftmenu-second-level-border-bottom-selected: 1px #e5e5e5 solid;
-  --ti-leftmenu-second-level-border-top-selected: 1px #fafafa solid;
-  --ti-leftmenu-item-bg-color: #f7f8f8;
-  --ti-leftmenu-item-text-color: var(--ti-common-color-text-secondary);
-  --ti-leftmenu-item-bg-color-hover: var(--ti-common-color-bg-white-emphasize);
-  --ti-leftmenu-item-text-color-hover: var(--ti-common-color-text-highlight);
-  --ti-leftmenu-border-left-width: 2px;
-  --ti-leftmenu-item-open-bg-color: #fff;
-  --ti-leftmenu-item-selected-bg-color: #fff;
-  --ti-leftmenu-item-selected-text-color: var(--ti-common-color-text-highlight);
-  --ti-leftmenu-item-selected-border-left-color: var(
-    --ti-common-color-line-active
-  );
-  --ti-leftmenu-level1-label-padding: 10px 36px 10px 20px;
-  --ti-leftment-leftmenu-head-text-align: left;
-  --ti-leftmenu-angle-normal-width: 8px;
-  --ti-leftmenu-angle-normal-height: 5px;
-  --ti-leftmenu-icon-color-nomal: var(--ti-common-color-icon-normal);
-  --ti-leftmenu-icon-color-hover: var(--ti-common-color-icon-hover);
-  --ti-leftmenu-head-padding: 20px 36px 20px 20px;
-  --ti-leftmenu-group-padding-top: var(--ti-common-space-10);
-  --ti-leftmenu-group-padding-right: 36px;
-  --ti-leftmenu-group-padding-bottom: var(--ti-common-space-10);
-  --ti-leftmenu-group-padding-left: var(--ti-common-space-5x);
-  --ti-leftmenu-foot-padding-top: 10px;
-  --ti-leftmenu-foot-padding-bottom: 10px;
-  --ti-leftmenu-foot-padding-left: 20px;
-  --ti-leftmenu-foot-space-right: 36px;
-  --ti-leftmenu-foot-text-color: var(--ti-common-color-text-link);
-  --ti-leftmenu-foot-text-color-hover: var(--ti-common-color-text-link-hover);
-  /* ----------------leftmenu控件样式设置----END------------------------------------------------------*/
-  /* ---------------fileUpload控件样式设置----START-----------------------------------------------------*/
-  --ti-upload-height: var(--ti-input-height);
-  --ti-upload-progerss-text-color: #2095f2;
-  --ti-upload-progress-bg-color: #bcdffb;
-  --ti-upload-field-default-width: 300px;
-  --ti-upload-item-bg: var(--ti-common-color-bg-normal);
-  --ti-upload-item-name-color: var(--ti-common-color-text-secondary);
-  --ti-upload-item-size-color: var(--ti-common-color-text-weaken);
-  --ti-upload-state-general-operate-color: var(--ti-actionmenu-item-text-color);
-  --ti-upload-state-general-operate-color-hover: var(
-    --ti-actionmenu-item-text-color-hover
-  );
-  /* ---------------fileUpload控件样式设置----END-----------------------------------------------------*/
-  /* ---------------buttonGroup控件样式设置----START-----------------------------------------------------*/
-  --ti-button-group-text-color: var(--ti-common-color-text-primary);
-  --ti-button-group-padding-horizon: var(--ti-button-middle-padding-horizon);
-  --ti-button-group-height: var(--ti-button-middle-height);
-  --ti-button-group-height-small: var(--ti-button-xs-height);
-  --ti-button-group-border-radius: var(--ti-common-border-radius-normal);
-  --ti-button-group-bg-color: var(--ti-common-color-bg-light-normal);
-  --ti-button-group-border-color: var(--ti-button-group-bg-color);
-  --ti-button-group-border-left-color: var(--ti-common-color-bg-white-normal);
-  --ti-button-group-bg-color-hover: var(--ti-common-color-bg-light-emphasize);
-  --ti-button-group-text-color-hover: var(--ti-common-color-text-primary);
-  --ti-button-group-border-color-hover: var(--ti-button-group-bg-color-hover);
-  --ti-button-group-bg-color-active: var(--ti-common-color-bg-emphasize);
-  --ti-button-group-bg-color-active-disabled: var(
-    --ti-common-color-bg-dark-disabled
-  );
-  --ti-button-group-text-color-active: var(--ti-common-color-text-white);
-  --ti-button-group-border-color-active: var(--ti-button-group-bg-color-active);
-  --ti-button-group-bg-color-disabled: var(--ti-common-color-bg-disabled);
-  --ti-button-group-text-color-disabled: var(--ti-common-color-text-disabled);
-  --ti-button-group-border-color-disabled: var(--ti-common-color-line-disabled);
-  --ti-button-group-space-bottom: var(--ti-common-space-base);
-  /* ---------------buttonGroup控件样式设置----END-----------------------------------------------------*/
-  /* ---------------collapse控件样式设置----START-----------------------------------------------------*/
-  --ti-collapse-panel-border: 1px solid #e3e3e3;
-  --ti-collapse-panel-bg-color: #f5f5f5;
-  --ti-collapse-panel-border-radius: 2px;
-  --ti-collapse-panel-padding: 10px;
-  /* ---------------collapse控件样式设置----END-----------------------------------------------------*/
-  /* ---------------accordion控件样式设置----START-----------------------------------------------------*/
-  --ti-accordion-panel-bg-color: var(--ti-common-color-bg-white-normal);
-  --ti-accordion-panel-border: 1px solid var(--ti-common-color-line-dividing);
-  --ti-accordion-panel-border-radius: var(--ti-common-border-radius-normal);
-  --ti-accordion-panel-height: 34px;
-  --ti-accordion-panel-lineheight: 34px;
-  --ti-accordion-panel-head-padding: 0 var(--ti-common-space-4x);
-  --ti-accordion-panel-head-bg-color: var(--ti-common-color-bg-white-emphasize);
-  --ti-accordion-panel-head-bg-color-disabled: var(
-    --ti-common-color-bg-disabled
-  );
-  --ti-accordion-panel-space-between: var(--ti-common-space-2x);
-  --ti-accordion-panel-collapse-border-top: 1px solid
-    var(--ti-common-color-line-dividing);
-  --ti-accordion-panel-body-padding: var(--ti-common-space-3x)
-    var(--ti-common-space-4x);
-  --ti-accordion-panel-title-color: var(--ti-common-color-text-primary);
-  --ti-accordion-panel-title-color-disabled: var(
-    --ti-common-color-text-disabled
-  );
-  --ti-accordion-panel-body-bg: var(--ti-common-color-bg-white-normal);
-  --ti-accordion-panel-body-shadow: none;
-  --ti-accordion-panel-fs: var(--ti-common-font-size-base);
-  --ti-accordion-panel-title-margin-left: var(--ti-common-space-4x);
-  --ti-accordion-panel-icon-color: var(--ti-common-color-icon-normal);
-  --ti-accordion-panel-icon-color-disabled: var(
-    --ti-common-color-icon-disabled
-  );
-  --ti-accordion-panel-icon-fs: var(--ti-common-font-size-2);
-  /* ---------------accordion控件样式设置----END-----------------------------------------------------*/
-  /* ---------------autoComplete样式设置----START-----------------------------------------------------*/
-  --ti-autocomplete-highlight-text-color: var(--ti-base-color-common);
-  --ti-autocomplete-highlight-font-weight: bold;
-  /* ---------------autoComplete样式设置----END-----------------------------------------------------*/
-  /* ---------------alert样式设置----START-----------------------------------------------------*/
-  --ti-alert-default-width: 400px;
-  --ti-alert-success-bg-color: var(--ti-common-color-success-bg);
-  --ti-alert-success-border-color: var(--ti-common-color-success-border);
-  --ti-alert-success-close-color: var(--ti-common-color-success);
-  --ti-alert-success-icon-color: var(--ti-common-color-success);
-  --ti-alert-success-box-shadow: var(--ti-common-shadow-success);
-  --ti-alert-error-bg-color: var(--ti-common-color-error-bg);
-  --ti-alert-error-border-color: var(--ti-common-color-error-border-secondary);
-  --ti-alert-error-close-color: var(--ti-common-color-error);
-  --ti-alert-error-icon-color: var(--ti-common-color-error);
-  --ti-alert-error-box-shadow: var(--ti-common-shadow-error);
-  --ti-alert-warn-bg-color: var(--ti-common-color-warn-bg);
-  --ti-alert-warn-border-color: var(--ti-common-color-warn-border);
-  --ti-alert-warn-close-color: var(--ti-common-color-warn);
-  --ti-alert-warn-icon-color: var(--ti-common-color-warn);
-  --ti-alert-warn-box-shadow: var(--ti-common-shadow-warn);
-  --ti-alert-prompt-bg-color: var(--ti-common-color-prompt-bg);
-  --ti-alert-prompt-border-color: var(--ti-common-color-prompt-border);
-  --ti-alert-prompt-close-color: var(--ti-common-color-prompt);
-  --ti-alert-prompt-icon-color: var(--ti-common-color-prompt);
-  --ti-alert-prompt-box-shadow: var(--ti-common-shadow-prompt);
-  --ti-alert-dark-bg-color: var(--ti-common-color-bg-dark-deep);
-  --ti-alert-dark-box-shadow: var(--ti-common-shadow-3-down);
-  --ti-alert-simple-border-color: var(--ti-common-color-line-normal);
-  --ti-alert-simple-close-color: var(--ti-common-color-icon-normal);
-  --ti-alert-label-color: var(--ti-common-color-text-secondary);
-  --ti-alert-type-icon-margin-right: var(--ti-common-space-2x);
-  --ti-alert-type-icon-width: var(--ti-common-font-size-2);
-  --ti-alert-close-icon-width: 12px;
-  --ti-alert-box-radius: var(--ti-common-border-radius-normal);
-  --ti-alert-close-icon-margin-left: var(--ti-alert-padding-horizon);
-  /* ---------------alert样式设置----END-----------------------------------------------------*/
-  /* ---------------slider样式设置----START-----------------------------------------------------*/
-  --ti-slider-track-bg-color: var(--ti-common-color-bg-light-normal);
-  --ti-slider-selection-bg-color: var(--ti-common-color-bg-emphasize);
-  --ti-slider-tick-color: var(--ti-common-color-text-secondary);
-  --ti-slider-tick-selection-color: var(--ti-common-color-bg-white-normal);
-  --ti-slider-tip-bg-color: var(--ti-common-color-bg-dark-deep);
-  --ti-slider-tip-color: var(--ti-common-color-text-gray);
-  --ti-slider-tip-bs: var(--ti-common-shadow-3-down);
-  --ti-slider-text-color: var(--ti-common-color-text-secondary);
-  --ti-slider-pointer-color-hover: var(--ti-common-color-bg-hover);
-  --ti-slider-pointer-color: var(--ti-slider-selection-bg-color);
-  --ti-slider-pointer-bs: var(--ti-common-shadow-1-down);
-  --ti-slider-pointer-bg-color: linear-gradient(
-    153deg,
-    var(--ti-common-color-bg-white-normal),
-    var(--ti-common-color-bg-light-normal) 99%
-  );
-  --ti-slider-pointer-border-disable: var(--ti-common-color-line-disabled);
-  --ti-slider-pointer-bg-disable: var(--ti-common-color-bg-disabled);
-  --ti-slider-color-disabled: var(--ti-common-color-text-disabled);
-  /* ---------------slider样式设置----END-----------------------------------------------------*/
-  /* ---------------UnifyValid样式设置----START-----------------------------------------------------*/
-  --ti-valid-pwd-level-bar-color: #8a8e99;
-  --ti-valid-pwd-level-bar-color-weak-active: var(--ti-common-color-error);
-  --ti-valid-pwd-level-bar-color-medium-active: var(--ti-common-color-warn);
-  --ti-valid-pwd-level-bar-color-strong-active: var(--ti-common-color-success);
-  /* ---------------UnifyValid样式设置----END-----------------------------------------------------*/
-  --ti-tree-node-bg-color-checked: var(--ti-common-color-bg-light-normal);
-  --ti-tree-node-checked-icon-color: var(--ti-common-color-bg-emphasize);
-  --ti-tree-content-box-color-hover: var(--ti-common-color-bg-white-emphasize);
-  --ti-tree-minus-square-color: var(--ti-common-color-icon-active);
-  --ti-tree-plus-square-color: var(--ti-common-color-icon-normal);
-  --ti-tree-icon-color-active: var(--ti-common-color-icon-active);
-  --ti-tree-icon-bg-color-active: var(--ti-common-color-bg-white-normal);
-  --ti-tree-item-height: 30px;
-  --ti-tree-item-lineheight: 30px;
-  --ti-tree-content-box-left-space: var(--ti-common-space-2x);
-  --ti-tree-square-icon-font-size: 16px;
-  --ti-tree-icon-right-space: var(--ti-common-space-2x);
-  --ti-tree-item-guide-line-color: var(--ti-common-color-line-dividing);
-  /* ---------------headFilter组件----START----------------------------------------------*/
-  --ti-head-filter-filtered-color: var(--ti-common-color-icon-active);
-  /* ---------------headFilter组件----END----------------------------------------------*/
-  /*------------------------------------------------------------------动效相关变量-----------------------------------------------------------------------*/
-  --ti-timing-function-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  --ti-timing-function-deceleration: cubic-bezier(0, 0, 0.2, 1);
-  --ti-timing-function-acceleration: cubic-bezier(0.4, 0, 1, 1);
-  --ti-timing-function-sharp: cubic-bezier(0.4, 0, 0.6, 1);
-  --ti-timing-function-smoothing: cubic-bezier(0.2, 0, 0.4, 1);
-  --ti-timing-function-linear: cubic-bezier(0, 0, 1, 1);
-  --ti-timing-function-default: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --ti-timing-function-ease-in: cubic-bezier(0.42, 0, 1, 1);
-  --ti-timing-function-ease-out: cubic-bezier(0, 0, 0.58, 1);
-}
diff --git a/packages/theme/src/base/index-global.less b/packages/theme/src/base/index-global.less
deleted file mode 100644
index 32bb35166..000000000
--- a/packages/theme/src/base/index-global.less
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-@import './reset.less';
-@import './root.less';
-@import './comp.less';
-@import '../error-page/index.less';
-@import '../svg/index.less';
diff --git a/packages/theme/src/base/index.js b/packages/theme/src/base/index.js
deleted file mode 100644
index 67eaf2fc1..000000000
--- a/packages/theme/src/base/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-export default {
-  'tiny-base-color-primary-normal': '#1890ff',
-  'tiny-base-color-primary-disabled': '#bfbfbf',
-  'tiny-base-color-primary-hover': '#7693f5',
-  'tiny-base-color-primary-active': '#096dd9',
-  'tiny-base-color-success-normal': '#52c41a',
-  'tiny-base-color-success-disabled': '#a6c3b9',
-  'tiny-base-color-success-hover': '#73d13d',
-  'tiny-base-color-success-active': '#389e0d',
-  'tiny-base-color-warning-normal': '#faad14',
-  'tiny-base-color-warning-disabled': '#d3c6a2',
-  'tiny-base-color-warning-hover': '#ffc53d',
-  'tiny-base-color-warning-active': '#ffc53d',
-  'tiny-base-color-danger-normal': '#f5222d',
-  'tiny-base-color-danger-disabled': '#d8bab5',
-  'tiny-base-color-danger-hover': '#ff4d4f',
-  'tiny-base-color-danger-active': '#cf1322',
-  'tiny-base-color-info-normal': '#333333',
-  'tiny-base-color-info-disabled': '#bfbfbf',
-  'tiny-base-color-info-hover': '#54657e',
-  'tiny-base-color-info-active': '#54657e',
-  'tiny-base-color-secondary-normal': '#aec1d2',
-  'tiny-base-color-secondary-disabled': '#f3f3f3',
-  'tiny-base-color-secondary-active': '#94acc1',
-  'tiny-base-color-light': '#fff',
-  'tiny-base-color-dark': '#000',
-  'tiny-base-color-gray-dark': '#666',
-  'tiny-base-color-gray-normal': '#999',
-  'tiny-base-color-gray-light': '#c4c4c4',
-  'tiny-base-color-gray-lighter': '#d9d9d9',
-  'tiny-base-color-gray-active': '#e6f7ff',
-  'tiny-base-color-gray-background': '#f5f5f5',
-  'tiny-base-color-navigation-normal': '#2e3243',
-  'tiny-base-radius-large': '3px',
-  'tiny-base-radius-medium': '2px',
-  'tiny-base-radius-small': '1px',
-  'tiny-base-font-family-normal': 'Helvetica, Arial, "microsoft yahei"',
-  'tiny-base-font-size-base': '12px',
-  'tiny-base-font-size-normal': '1em',
-  'tiny-base-font-size-large': '1.125em',
-  'tiny-base-font-weight-bold': '700',
-  'tiny-base-size-width-large': '130px',
-  'tiny-base-size-width-medium': '100px',
-  'tiny-base-size-width-normal': '80px',
-  'tiny-base-size-width-minor': '30px',
-  'tiny-base-size-width-small': '36px',
-  'tiny-base-size-width-mini': '24px',
-  'tiny-base-size-height-minor': '30px',
-  'tiny-base-size-height-large': '48px',
-  'tiny-base-size-height-medium': '42px',
-  'tiny-base-size-height-small': '36px',
-  'tiny-base-size-height-mini': '24px'
-}
diff --git a/packages/theme/src/base/root.less b/packages/theme/src/base/root.less
deleted file mode 100644
index 4a229bf32..000000000
--- a/packages/theme/src/base/root.less
+++ /dev/null
@@ -1,388 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-/*注意：css var变量，以最后一次出现的生效。*/
-/*基础变量定义*/
-:root {
-	/* 一.颜色*/
-	/* 1.基础色:此处的颜色变量为所有组件应用到的颜色，此处颜色仅在公共色中使用，具体组件不可使用*/
-	--ti-base-color-white: #FFFFFF;
-	/* 彩色按钮或图标上文字、输入框背景色*/
-	/* 1.1品牌色*/
-	/* 品牌主色*/
-	--ti-base-color-brand: #5E7CE0;
-	/* 主色蓝/下拉菜单、选块选中色*/
-	/* 主色衍生色*/
-	--ti-base-color-brand-1: #344899;
-	/* 主色悬浮色/文字按钮、链接悬浮色*/
-	--ti-base-color-brand-2: #526ECC;
-	/* 文字按钮颜色/链接颜色*/
-	--ti-base-color-brand-3: #7693F5;
-	/* 深色背景下图标*/
-	--ti-base-color-brand-4: #96ADFA;
-	/* 深色背景链接色*/
-	--ti-base-color-brand-5: #BECCFA;
-	/* 选块悬浮色/深色背景链接悬浮色/提示边框色/开关组件“开”禁用背景色*/
-	--ti-base-color-brand-6: #E9EDFA;
-	/* 选块默认色/滑块背景色/分页悬浮色*/
-	--ti-base-color-brand-7: #F2F5FC;
-	/* 下拉、列表、悬浮背景/表头/下拉搜索背景*/
-	--ti-base-color-brand-8: #464C59;
-	/* 一级tab页签背景色、tips背景色、DIV提示背景色*/
-	--ti-base-color-brand-9: #5C6173;
-	/* 一级tab页签背景-悬浮色/页签禁用文字色*/
-	/* 1.2中立色*/
-	/* 公用灰色系，用于文本、图标、线条色*/
-	--ti-base-color-common: #252B3A;
-	/* 正文主色，重要信息、标题颜色、输入类文本颜色*/
-	--ti-base-color-common-1: #575D6C;
-	/* 次要信息/图标默认*/
-	--ti-base-color-common-2: #8A8E99;
-	/* 弱化信息、说明文字*/
-	--ti-base-color-common-3: #ADB0B8;
-	/* 边框色（如下拉、输入框）/文字禁用/导航栏文字图标/禁用图标*/
-	--ti-base-color-common-4: #DFE1E6;
-	/* 分割线/禁用描边/tab字体/开关组件“关”禁用背景色*/
-	/* 背景色*/
-	--ti-base-color-bg: #EEF0F5;
-	/*  通用背景-页面背景色/下拉搜索框背景色/标签背景色/multiselect输入框中背景*/
-	--ti-base-color-bg-1: #F5F5F6;
-	/* 禁用背景/小表格中禁用背景/支付列表中禁用背景*/
-	--ti-base-color-bg-2: #FAFAFA;
-	/* 新区域组件-悬浮背景色*/
-	--ti-base-color-bg-3: #C7000B;
-	/* 主要按钮-背景色*/
-	--ti-base-color-bg-4: #D64A52;
-	/* 主要按钮-hover/Focus背景色*/
-	--ti-base-color-bg-5: #B12220;
-	/* 主要按钮-active背景色*/
-	--ti-base-color-bg-6: #FFFFFF;
-	/* 次要按钮-背景色*/
-	--ti-base-color-bg-7: #FFFFFF;
-	/* 次要按钮-hover/Focus背景色*/
-	--ti-base-color-bg-8: #FFFFFF;
-	/* 次要按钮-active背景色*/
-	--ti-base-color-bg-9: #282B33;
-	/* 顶部导航背景色/顶部导航下拉悬浮背景色*/
-	--ti-base-color-bg-10: #181818;
-	/* 顶部导航下拉背景色*/
-	/* 1.3功能色*/
-	--ti-base-color-error: #F66F6A;
-	/* 错误-图标色/校验边框色/图表数据色-8*/
-	--ti-base-color-error-text: #DE504E;
-	/* 错误-文本色/交易金额*/
-	--ti-base-color-error-bg: #FFEEED;
-	/* 错误-背景色/校验背景色*/
-	--ti-base-color-error-border: #FFBCBA;
-	/* 错误-边框色*/
-	--ti-base-color-error-icon-from: #FF41A1;
-	/* 渐变图标-错误-起始色*/
-	--ti-base-color-error-icon-to: #FF8A5B;
-	/* 渐变图标-错误-终止色*/
-	--ti-base-color-success: #50D4AB;
-	/* 成功-图标色/图表数据色-1*/
-	--ti-base-color-success-text: #3AC295;
-	/* 成功-文本色*/
-	--ti-base-color-success-bg: #EDFFF9;
-	/* 成功-背景色*/
-	--ti-base-color-success-border: #ACF2DC;
-	/* 成功-边框色*/
-	--ti-base-color-warn: #FA9841;
-	/* 告警-图标色、深色背景-运营活动文本色/图表数据色-7*/
-	--ti-base-color-warn-text: #E37D29;
-	/* 告警-文本色*/
-	--ti-base-color-warn-bg: #FFF3E8;
-	/* 告警-背景色*/
-	--ti-base-color-warn-border: #FFD0A6;
-	/*  告警-边框色*/
-	--ti-base-color-warn-icon-from: #FF5541;
-	/* 渐变图标-告警-起始色*/
-	--ti-base-color-warn-icon-to: #FFD347;
-	/* 渐变图标-告警--终止色*/
-	--ti-base-color-warn-1: #FAC20A;
-	/* 次要告警/状态图标-异常/图表数据色-6/评分组件rate-图标色*/
-	--ti-base-color-prompt: var(--ti-base-color-brand);
-	/* 提示-图标色*/
-	--ti-base-color-prompt-text: var(--ti-base-color-brand-2);
-	/* 提示-文本色*/
-	--ti-base-color-prompt-bg: #EBF6FF;
-	/* 提示-背景色*/
-	--ti-base-color-prompt-border: var(--ti-base-color-brand-5);
-	/* 提示-边框色*/
-	--ti-base-color-prompt-icon-from: #7769E8;
-	/* 渐变图标-提示-起始色*/
-	--ti-base-color-prompt-icon-to: #58BBFF;
-	/* 渐变图标-提示-终止色*/
-	/* 状态图标色*/
-	--ti-base-color-icon-info: #6CBFFF;
-	/* 状态图标-常规、信息提示/图表数据色-2*/
-	/* 图表色*/
-	--ti-base-color-data-3: #A6DD82;
-	/* 图表数据色-3*/
-	--ti-base-color-data-4: #F3689A;
-	/* 图表数据色-4*/
-	--ti-base-color-data-5: #A97AF8;
-	/* 图表数据色-5*/
-	/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加*/
-	/* 2.1提示类型颜色，用于alert组件、涉及功能提示的背景、文字、图标等的颜色使用*/
-	--ti-common-color-success: var(--ti-base-color-success);
-	/* 成功-图标色/状态图标-成功*/
-	--ti-common-color-text-success: var(--ti-base-color-success-text);
-	/* 成功-文字色*/
-	--ti-common-color-success-bg: var(--ti-base-color-success-bg);
-	/* 成功-背景色*/
-	--ti-common-color-success-border: var(--ti-base-color-success-border);
-	/* 成功-边框色*/
-	--ti-common-color-error: var(--ti-base-color-error);
-	/* 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本*/
-	--ti-common-color-error-text: var(--ti-base-color-error-text);
-	/* 错误-文字色*/
-	--ti-common-color-error-bg: var(--ti-base-color-error-bg);
-	/* 错误-背景色/校验背景色*/
-	--ti-common-color-error-border: var(--ti-base-color-error);
-	/* 错误-校验边框色*/
-	--ti-common-color-error-border-secondary: var(--ti-base-color-error-border);
-	/* 错误-alert边框色*/
-	--ti-common-color-error-icon-from: var(--ti-base-color-error-icon-from);
-	/* 渐变图标-错误-起始色*/
-	--ti-common-color-error-icon-to: var(--ti-base-color-error-icon-to);
-	/* 渐变图标-错误-终止色*/
-	--ti-common-color-warn: var(--ti-base-color-warn);
-	/* 告警-图标色/状态图标-警告*/
-	--ti-common-color-warn-text: var(--ti-base-color-warn-text);
-	/* 告警-文字色*/
-	--ti-common-color-warn-bg: var(--ti-base-color-warn-bg);
-	/* 告警-背景色*/
-	--ti-common-color-warn-border: var(--ti-base-color-warn-border);
-	/* 告警-边框色*/
-	--ti-common-color-warn-icon-from: var(--ti-base-color-warn-icon-from);
-	/* 渐变图标-告警-起始色*/
-	--ti-common-color-warn-icon-to: var(--ti-base-color-warn-icon-to);
-	/* 渐变图标-告警--终止色*/
-	--ti-common-color-warn-secondary: var(--ti-base-color-warn-1);
-	/* 次要告警-图标色/状态图标-异常*/
-	--ti-common-color-prompt: var(--ti-base-color-prompt);
-	/* 提示-图标色*/
-	--ti-common-color-prompt-text: var(--ti-base-color-prompt-text);
-	/* 提示-图标色*/
-	--ti-common-color-prompt-bg: var(--ti-base-color-prompt-bg);
-	/* 提示-背景色*/
-	--ti-common-color-prompt-border: var(--ti-base-color-prompt-border);
-	/* 提示-边框色*/
-	--ti-common-color-prompt-icon-from: var(--ti-base-color-prompt-icon-from);
-	/* 渐变图标-提示-起始色*/
-	--ti-common-color-prompt-icon-to: var(--ti-base-color-prompt-icon-to);
-	/* 渐变图标-提示-终止色*/
-	/* 2.2文本色*/
-	--ti-common-color-text-primary: var(--ti-base-color-common);
-	/* 一级文本色-重要信息/标题颜色/输入类文本颜色*/
-	--ti-common-color-text-secondary: var(--ti-base-color-common-1);
-	/* 二级文本色-次要信息*/
-	--ti-common-color-text-weaken: var(--ti-base-color-common-2);
-	/* 三级文本色-弱化信息/说明文字*/
-	--ti-common-color-text-disabled: var(--ti-base-color-common-3);
-	/* 文本灰化信息*/
-	--ti-common-color-text-darkbg: var(--ti-base-color-common-3);
-	/* 深色背景下文本信息*/
-	--ti-common-color-text-link: var(--ti-base-color-brand-2);
-	/* 链接色*/
-	--ti-common-color-text-link-hover: var(--ti-base-color-brand-1);
-	/* 链接悬浮色*/
-	--ti-common-color-text-link-darkbg: var(--ti-base-color-brand-4);
-	/* 深色背景链接色*/
-	--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-5);
-	/* 深色背景链接悬浮色*/
-	--ti-common-color-text-highlight: var(--ti-base-color-brand-2);
-	/* 文本高亮色*/
-	--ti-common-color-text-white: var(--ti-base-color-white);
-	/* 深色背景或图标上文字色*/
-	--ti-common-color-text-gray: var(--ti-base-color-white);
-	/* 深色背景下的文本色，用于tip*/
-	--ti-common-color-text-gray-disabled: var(--ti-base-color-brand-9);
-	/* 深色背景下的灰色文本禁用色，用于tab页签中*/
-	--ti-common-color-text-important: var(--ti-base-color-error-text);
-	/* 文本_金额*/
-	/* 2.3图标色*/
-	/* 浅底背景图标色*/
-	--ti-common-color-icon-normal: var(--ti-base-color-common-1);
-	--ti-common-color-icon-hover: var(--ti-base-color-brand);
-	--ti-common-color-icon-active: var(--ti-base-color-brand);
-	--ti-common-color-icon-disabled: var(--ti-base-color-common-3);
-	/* 图标禁用色/状态图标-禁用、停止*/
-	--ti-common-color-icon-white: var(--ti-base-color-white);
-	/* 灰色背景下图标色*/
-	--ti-common-color-icon-graybg-normal: var(--ti-base-color-common-3);
-	--ti-common-color-icon-graybg-hover: var(--ti-base-color-brand);
-	--ti-common-color-icon-graybg-active: var(--ti-base-color-brand);
-	--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-4);
-	/* 深底背景图标色*/
-	--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-3);
-	--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-3);
-	--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-3);
-	--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-1);
-	/* 状态图标背景色*/
-	--ti-common-color-icon-info: var(--ti-base-color-icon-info);
-	/* 状态图标-常规、信息提示*/
-	/* 2.4线颜色，用于边框，线条等的颜色使用*/
-	--ti-common-color-line-normal: var(--ti-base-color-common-3);
-	--ti-common-color-line-hover: var(--ti-base-color-common-1);
-	--ti-common-color-line-active: var(--ti-base-color-brand);
-	--ti-common-color-line-disabled: var(--ti-base-color-common-4);
-	/* 分割线颜色*/
-	--ti-common-color-line-dividing: var(--ti-base-color-common-4);
-	/* 虚线*/
-	--ti-common-color-dash-line-normal: var(--ti-base-color-common-1);
-	--ti-common-color-dash-line-hover: var(--ti-base-color-brand-2);
-	/* 2.5背景色*/
-	/* 背景基础色各状态色*/
-	--ti-common-color-bg-normal: var(--ti-base-color-bg);
-	/* 通用背景-页面背景色/下拉搜索框背景色/标签背景色*/
-	--ti-common-color-bg-emphasize: var(--ti-base-color-brand);
-	/* 背景高亮色*/
-	--ti-common-color-bg-disabled: var(--ti-base-color-bg-1);
-	/* 禁用背景色*/
-	--ti-common-color-bg-hover: var(--ti-base-color-brand-1);
-	/* 主色背景悬浮色*/
-	--ti-common-color-bg-gray: var(--ti-base-color-bg-2);
-	/* 新区域组件-悬浮背景色*/
-	--ti-common-color-bg-secondary: var(--ti-base-color-common-3);
-	/* 开关组件-关闭状态-背景色*/
-	/* 重要背景色，主要用于重要按钮场景*/
-	--ti-common-bg-primary: var(--ti-base-color-bg-3);
-	/* 重要按钮背景色*/
-	--ti-common-bg-primary-hover: var(--ti-base-color-bg-4);
-	/* 重要按钮背景悬浮、focus色*/
-	--ti-common-bg-primary-active: var(--ti-base-color-bg-5);
-	/* 重要按钮背景色按下色*/
-	/* 次要背景色，主要用于次要按钮场景*/
-	--ti-common-bg-minor: var(--ti-base-color-bg-6);
-	/* 次要按钮背景色*/
-	--ti-common-bg-minor-hover: var(--ti-base-color-bg-7);
-	/* 次要按钮背景悬浮、focus色*/
-	--ti-common-bg-minor-active: var(--ti-base-color-bg-8);
-	/* 次要按钮背景色按下色*/
-	/* 白底背景状态色*/
-	--ti-common-color-bg-white-normal: var(--ti-base-color-white);
-	/* 白色背景，用于输入框背景*/
-	--ti-common-color-bg-white-emphasize: var(--ti-base-color-brand-7);
-	/* 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景*/
-	/* 浅底背景状态色*/
-	--ti-common-color-bg-light-normal: var(--ti-base-color-brand-6);
-	/* 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色*/
-	--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-5);
-	/* 浅背景hover或强调色，开关组件“开”禁用背景色*/
-	/* 深色底背景状态色*/
-	--ti-common-color-bg-dark-normal: var(--ti-base-color-brand-8);
-	/* 一级tab页签背景色*/
-	--ti-common-color-bg-dark-emphasize: var(--ti-base-color-brand-9);
-	/* 一级tab页签背景-悬浮色*/
-	--ti-common-color-bg-dark-active: var(--ti-common-color-bg-normal);
-	/* 一级tab页签背景-激活/focus状态背景色*/
-	--ti-common-color-bg-dark-deep: var(--ti-base-color-brand-8);
-	/* tip、alert提示背景色*/
-	--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-4);
-	/* 深色背景禁用色，开关组件“关”禁用背景色*/
-	/* 顶部导航*/
-	--ti-common-color-bg-navigation: var(--ti-base-color-bg-9);
-	/* 顶部导航背景色/顶部导航下拉悬浮背景色*/
-	--ti-common-color-bg-dark-select: var(--ti-base-color-bg-10);
-	/* 顶部导航下拉背景色 */
-	/* 2.6 图表色*/
-	--ti-common-color-data-1: var(--ti-base-color-success);
-	/* 图表数据色-1*/
-	--ti-common-color-data-2: var(--ti-base-color-icon-info);
-	/* 图表数据色-2*/
-	--ti-common-color-data-3: var(--ti-base-color-data-3);
-	/* 图表数据色-3*/
-	--ti-common-color-data-4: var(--ti-base-color-data-4);
-	/* 图表数据色-4*/
-	--ti-common-color-data-5: var(--ti-base-color-data-5);
-	/* 图表数据色-5*/
-	--ti-common-color-data-6: var(--ti-base-color-warn-1);
-	/* 图表数据色-6*/
-	--ti-common-color-data-7: var(--ti-base-color-warn);
-	/* 图表数据色-7*/
-	--ti-common-color-data-8: var(--ti-base-color-error);
-	/* 图表数据色-8*/
-	/* 二.其他变量*/
-	/* 边框圆角*/
-	--ti-common-border-radius-normal: 2px;
-	--ti-common-border-radius-1: 4px;
-	/* tip提示边框圆角*/
-	/* 字号*/
-	--ti-common-font-size-base: 12px;
-	/* 默认字号*/
-	--ti-common-font-size-1: 14px;
-	/* 卡片标题*/
-	--ti-common-font-size-2: 16px;
-	/* 页面标题*/
-	--ti-common-font-size-3: 18px;
-	/* 弹窗标题、数字*/
-	--ti-common-font-size-4: 20px;
-	/* 数字、面额*/
-	--ti-common-font-size-5: 24px;
-	/* 数字、面额*/
-	--ti-common-font-size-6: 32px;
-	/* 数字、面额*/
-	--ti-common-font-size-7: 36px;
-	/* 数字、面额*/
-	/* 行高*/
-	--ti-common-line-height-number: 1.5;
-	/* 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义*/
-	/* 间距：适用于组件中的margin、padding*/
-	--ti-common-space-base: 4px;
-	/* 基础间距，组件中使用的主流间距都是该间距的整数倍*/
-	--ti-common-space-2x: calc(var(--ti-common-space-base) * 2);
-	--ti-common-space-3x: calc(var(--ti-common-space-base) * 3);
-	--ti-common-space-4x: calc(var(--ti-common-space-base) * 4);
-	--ti-common-space-5x: calc(var(--ti-common-space-base) * 5);
-	--ti-common-space-6x: calc(var(--ti-common-space-base) * 6);
-	--ti-common-space-8x: calc(var(--ti-common-space-base) * 8);
-	--ti-common-space-10x: calc(var(--ti-common-space-base) * 10);
-	/* 其他间距：间距不是@space_base的整数倍*/
-	--ti-common-space-6: 6px;
-	--ti-common-space-10: 10px;
-	/* 阴影*/
-	--ti-common-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
-	/* 购买浮层*/
-	--ti-common-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-	/* 页面卡片，滑块*/
-	--ti-common-shadow-1-left: -1px 0px 4px 0 rgba(0, 0, 0, 0.1);
-	--ti-common-shadow-1-right: 1px 0px 4px 0 rgba(0, 0, 0, 0.1);
-	/* 手风琴（leftmenu）*/
-	--ti-common-shadow-2-up: 0 -2px 8px 0 rgba(0, 0, 0, 0.2);
-	--ti-common-shadow-2-down: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
-	/* 下拉菜单、使用指南*/
-	--ti-common-shadow-2-left: -2px 0 8px 0 rgba(238, 10, 10, 0.2);
-	--ti-common-shadow-2-right: 2px 0 8px 0 rgba(252, 5, 5, 0.2);
-	--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.2);
-	--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
-	/* 卡片hover、tips提示*/
-	--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.2);
-	--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.2);
-	--ti-common-shadow-4-up: 0 -8px 40px 0 rgba(0, 0, 0, 0.2);
-	--ti-common-shadow-4-down: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
-	/* 弹窗、气泡确认框*/
-	--ti-common-shadow-4-left: -8px 0 40px 0 rgba(0, 0, 0, 0.2);
-	/* 右侧抽屉*/
-	--ti-common-shadow-4-right: 8px 0 40px 0 rgba(0, 0, 0, 0.2);
-	/* 提示类阴影*/
-	--ti-common-shadow-error: 0 1px 3px 0 rgba(199, 54, 54, 0.25);
-	/* 错误*/
-	--ti-common-shadow-warn: 0 1px 3px 0 rgba(204, 100, 20, 0.25);
-	/* 告警*/
-	--ti-common-shadow-prompt: 0 1px 3px 0 rgba(70, 94, 184, 0.25);
-	/* 提示类*/
-	--ti-common-shadow-success: 0 1px 3px 0 rgba(39, 176, 128, 0.25);
-	/* 成功*/
-	/* 字体*/
-	--ti-common-font-family: "HuaweiFont", "Helvetica", "Arial", "PingFangSC-Regular", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei";
-  }
\ No newline at end of file
diff --git a/packages/theme/src/breadcrumb/vars.less b/packages/theme/src/breadcrumb/vars.less
index 2f183ebbb..bac0ed60f 100644
--- a/packages/theme/src/breadcrumb/vars.less
+++ b/packages/theme/src/breadcrumb/vars.less
@@ -13,8 +13,8 @@
 .component-css-vars-breadcrumb() {
   --ti-breadcrumb-font-size: var(--ti-common-font-size-base);
   --ti-breadcrumb-text-line-height: 1em;
-  --ti-breadcrumb-text-color: var(--ti-base-color-info-normal);
-  --ti-breadcrumb-separator-text-color: var(--ti-base-color-placeholder);
+  --ti-breadcrumb-text-color: var(--ti-common-color-info-normal);
+  --ti-breadcrumb-separator-text-color: var(--ti-common-color-placeholder);
   --ti-breadcrumb-separator-padding-vertical: 0;
   --ti-breadcrumb-separator-padding-horizontal: 4px;
   --ti-breadcrumb-separator-margin-vertical: 0;
diff --git a/packages/theme/src/bulletin-board/vars.less b/packages/theme/src/bulletin-board/vars.less
index 437e0ba00..82acfa19d 100644
--- a/packages/theme/src/bulletin-board/vars.less
+++ b/packages/theme/src/bulletin-board/vars.less
@@ -13,19 +13,19 @@
 .component-css-vars-bulletin-board() {
   --ti-bulletin-board-title-font-size: var(--ti-common-font-size-3);
   --ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7);
-  --ti-bulletin-board-title-text-color: var(--ti-base-color-info-normal);
-  --ti-bulletin-board-item-title-text-color: var(--ti-base-color-dark);
-  --ti-bulletin-board-item-date-text-color: var(--ti-base-color-placeholder);
+  --ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal);
+  --ti-bulletin-board-item-title-text-color: var(--ti-common-color-dark);
+  --ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder);
   --ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base);
   --ti-bulletin-board-new-bg-color: var(--ti-base-color-error-3);
-  --ti-bulletin-board-new-text-color: var(--ti-base-color-light);
+  --ti-bulletin-board-new-text-color: var(--ti-common-color-light);
   --ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-normal);
   --ti-bulletin-board-more-text-color: var(--ti-base-color-brand-6);
   --ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5);
   --ti-bulletin-board-more-font-size: var(--ti-common-font-size-base);
   --ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1);
-  --ti-bulletin-board-tabs-item-text-color: var(--ti-base-color-info-normal);
+  --ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal);
   --ti-bulletin-board-tabs-item-hover-text-color: var(--ti-base-color-brand-6);
-  --ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-bulletin-board-tabs-header-border-color: var(--ti-base-color-border);
+  --ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border);
 }
diff --git a/packages/theme/src/button-group/vars.less b/packages/theme/src/button-group/vars.less
index 46f27c50b..1a622d463 100644
--- a/packages/theme/src/button-group/vars.less
+++ b/packages/theme/src/button-group/vars.less
@@ -11,24 +11,24 @@
 */
 
 .component-css-vars-button-group() {
-  --ti-button-group-border-color: var(--ti-base-color-border);
+  --ti-button-group-border-color: var(--ti-common-color-border);
   --ti-button-group-border-radius: var(--ti-common-border-radius-normal);
   --ti-button-group-hover-border-color: var(--ti-base-color-brand-6);
   --ti-button-group-info-border-color: rgba(255, 255, 255, 0.5);
   --ti-button-group-disabled-text-color: var(--ti-common-color-bg-disabled);
-  --ti-button-group-item-bg-color: var(--ti-base-color-light);
-  --ti-button-group-item-btn-text-color: var(--ti-base-color-info-normal);
-  --ti-button-group-item-btn-width: var(--ti-base-size-width-normal);
-  --ti-button-group-item-btn-height: var(--ti-base-size-height-minor);
+  --ti-button-group-item-bg-color: var(--ti-common-color-light);
+  --ti-button-group-item-btn-text-color: var(--ti-common-color-info-normal);
+  --ti-button-group-item-btn-width: var(--ti-common-size-width-normal);
+  --ti-button-group-item-btn-height: var(--ti-common-size-height-minor);
   --ti-button-group-item-btn-font-size: var(--ti-common-font-size-base);
   --ti-button-group-item-btn-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-button-group-item-btn-disabled-border-color: var(--ti-base-color-border);
-  --ti-button-group-item-btn-disabled-text-color: var(--ti-base-color-placeholder);
+  --ti-button-group-item-btn-disabled-border-color: var(--ti-common-color-border);
+  --ti-button-group-item-btn-disabled-text-color: var(--ti-common-color-placeholder);
   --ti-button-group-item-btn-hover-bg-color: var(--ti-base-color-brand-5);
-  --ti-button-group-item-btn-hover-text-color: var(--ti-base-color-light);
+  --ti-button-group-item-btn-hover-text-color: var(--ti-common-color-light);
   --ti-button-group-item-btn-plain-text-color: var(--ti-base-color-brand-6);
   --ti-button-group-item-btn-plain-bg-color: rgba(24, 144, 255, 0.06);
   --ti-button-group-item-btn-plain-border-color: var(--ti-base-color-brand-6);
   --ti-button-group-item-active-bg-color: var(--ti-base-color-brand-6);
-  --ti-button-group-item-active-text-color: var(--ti-base-color-light);
+  --ti-button-group-item-active-text-color: var(--ti-common-color-light);
 }
diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
index af45998d0..ca052d0a0 100644
--- a/packages/theme/src/button/vars.less
+++ b/packages/theme/src/button/vars.less
@@ -15,100 +15,100 @@
   --ti-button-font-size: var(--ti-common-font-size-base);
   --ti-button-plain-disabled-text-color: var(--ti-base-color-common-2);
 
-  --ti-button-size-normal-min-width: var(--ti-base-size-width-normal);
-  --ti-button-size-normal-max-width: var(--ti-base-size-width-medium);
+  --ti-button-size-normal-min-width: var(--ti-common-size-width-normal);
+  --ti-button-size-normal-max-width: var(--ti-common-size-width-medium);
   --ti-button-size-normal-height: var(--ti-common-size-7x);
   --ti-button-size-normal-padding: var(--ti-common-space-2x);
 
-  --ti-button-size-large-min-width: var(--ti-base-size-width-normal);
-  --ti-button-size-large-max-width: var(--ti-base-size-width-large);
-  --ti-button-size-large-height: var(--ti-base-size-height-large);
+  --ti-button-size-large-min-width: var(--ti-common-size-width-normal);
+  --ti-button-size-large-max-width: var(--ti-common-size-width-large);
+  --ti-button-size-large-height: var(--ti-common-size-height-large);
   --ti-button-size-large-font-size: var(--ti-common-font-size-2);
   --ti-button-size-large-padding: var(--ti-common-space-4x);
 
-  --ti-button-size-medium-min-width: var(--ti-base-size-width-normal);
-  --ti-button-size-medium-max-width: var(--ti-base-size-width-large);
-  --ti-button-size-medium-height: var(--ti-base-size-height-medium);
+  --ti-button-size-medium-min-width: var(--ti-common-size-width-normal);
+  --ti-button-size-medium-max-width: var(--ti-common-size-width-large);
+  --ti-button-size-medium-height: var(--ti-common-size-height-medium);
   --ti-button-size-medium-font-size: var(--ti-common-font-size-1);
   --ti-button-size-medium-padding: var(--ti-common-space-3x);
 
-  --ti-button-size-small-min-width: var(--ti-base-size-width-normal);
-  --ti-button-size-small-max-width: var(--ti-base-size-width-medium);
-  --ti-button-size-small-height: var(--ti-base-size-height-small);
+  --ti-button-size-small-min-width: var(--ti-common-size-width-normal);
+  --ti-button-size-small-max-width: var(--ti-common-size-width-medium);
+  --ti-button-size-small-height: var(--ti-common-size-height-small);
   --ti-button-size-small-font-size: var(--ti-common-font-size-1);
   --ti-button-size-small-padding: var(--ti-common-space-10);
 
-  --ti-button-size-mini-min-width: var(--ti-base-size-width-normal);
-  --ti-button-size-mini-max-width: var(--ti-base-size-width-medium);
-  --ti-button-size-mini-height: var(--ti-base-size-height-mini);
+  --ti-button-size-mini-min-width: var(--ti-common-size-width-normal);
+  --ti-button-size-mini-max-width: var(--ti-common-size-width-medium);
+  --ti-button-size-mini-height: var(--ti-common-size-height-mini);
   --ti-button-size-mini-font-size: var(--ti-common-font-size-base);
   --ti-button-size-mini-padding: var(--ti-common-space-2x);
 
   --ti-button-normal-text-color: var(--ti-base-color-common-7);
-  --ti-button-normal-border-color: var(--ti-base-color-border);
-  --ti-button-normal-background-color: var(--ti-base-color-light);
+  --ti-button-normal-border-color: var(--ti-common-color-border);
+  --ti-button-normal-background-color: var(--ti-common-color-light);
   --ti-button-normal-hover-text-color: var(--ti-base-color-brand-6);
   --ti-button-normal-hover-border-color: var(--ti-base-color-brand-6);
-  --ti-button-normal-hover-background-color: var(--ti-base-color-light);
+  --ti-button-normal-hover-background-color: var(--ti-common-color-light);
   --ti-button-normal-active-text-color: var(--ti-base-color-brand-6);
   --ti-button-normal-active-border-color: var(--ti-base-color-brand-6);
-  --ti-button-normal-active-background-color: var(--ti-base-color-hover-background);
+  --ti-button-normal-active-background-color: var(--ti-common-color-hover-background);
   --ti-button-normal-disabled-text-color: var(--ti-common-color-text-disabled);
   --ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled);
   --ti-button-normal-disabled-background-color: var(--ti-common-color-bg-disabled);
 
   --ti-button-text-color: var(--ti-base-color-brand-6);
   --ti-button-text-color-hover: var(--ti-base-color-brand-5);
-  --ti-button-text-color-active: var(--ti-base-color-primary-active);
-  --ti-button-text-color-disabled: var(--ti-base-color-placeholder);
+  --ti-button-text-color-active: var(--ti-common-color-primary-active);
+  --ti-button-text-color-disabled: var(--ti-common-color-placeholder);
 
-  --ti-button-primary-normal-bg-color: var(--ti-base-color-primary-normal);
-  --ti-button-primary-hover-bg-color: var(--ti-base-color-primary-hover);
-  --ti-button-primary-active-bg-color: var(--ti-base-color-primary-active);
+  --ti-button-primary-normal-bg-color: var(--ti-common-color-primary-normal);
+  --ti-button-primary-hover-bg-color: var(--ti-common-color-primary-hover);
+  --ti-button-primary-active-bg-color: var(--ti-common-color-primary-active);
   --ti-button-primary-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-button-primary-text-color: var(--ti-base-color-light);
+  --ti-button-primary-text-color: var(--ti-common-color-light);
   --ti-button-primary-disabled-text-color: var(--ti-common-color-text-disabled);
-  --ti-button-primary-disabled-border-color: var(--ti-base-color-primary-disabled-border);
+  --ti-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border);
   --ti-button-primary-plain-bg-color: rgba(24, 144, 255, 0.06);
   --ti-button-primary-plain-disabled-bg-color: rgba(191, 191, 191, 0.1);
 
-  --ti-button-success-normal-bg-color: var(--ti-base-color-success-normal);
-  --ti-button-success-hover-bg-color: var(--ti-base-color-success-hover);
-  --ti-button-success-active-bg-color: var(--ti-base-color-success-active);
+  --ti-button-success-normal-bg-color: var(--ti-common-color-success-normal);
+  --ti-button-success-hover-bg-color: var(--ti-common-color-success-hover);
+  --ti-button-success-active-bg-color: var(--ti-common-color-success-active);
   --ti-button-success-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-button-success-text-color: var(--ti-base-color-light);
+  --ti-button-success-text-color: var(--ti-common-color-light);
   --ti-button-success-disabled-text-color: var(--ti-common-color-text-disabled);
-  --ti-button-success-disabled-border-color: var(--ti-base-color-success-disabled-border);
+  --ti-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border);
   --ti-button-success-plain-bg-color: rgba(82, 196, 26, 0.06);
   --ti-button-success-plain-disabled-bg-color: rgba(166, 195, 185, 0.1);
 
-  --ti-button-warning-normal-bg-color: var(--ti-base-color-warning-normal);
-  --ti-button-warning-hover-bg-color: var(--ti-base-color-warning-hover);
-  --ti-button-warning-active-bg-color: var(--ti-base-color-warning-active);
+  --ti-button-warning-normal-bg-color: var(--ti-common-color-warning-normal);
+  --ti-button-warning-hover-bg-color: var(--ti-common-color-warning-hover);
+  --ti-button-warning-active-bg-color: var(--ti-common-color-warning-active);
   --ti-button-warning-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-button-warning-text-color: var(--ti-base-color-light);
+  --ti-button-warning-text-color: var(--ti-common-color-light);
   --ti-button-warning-disabled-text-color: var(--ti-common-color-text-disabled);
-  --ti-button-warning-disabled-border-color: var(--ti-base-color-warning-disabled-border);
+  --ti-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border);
   --ti-button-warning-plain-bg-color: rgba(250, 173, 20, 0.06);
   --ti-button-warning-plain-disabled-bg-color: rgba(211, 198, 162, 0.1);
 
-  --ti-button-danger-normal-bg-color: var(--ti-base-color-danger-normal);
-  --ti-button-danger-hover-bg-color: var(--ti-base-color-danger-hover);
-  --ti-button-danger-active-bg-color: var(--ti-base-color-danger-active);
+  --ti-button-danger-normal-bg-color: var(--ti-common-color-danger-normal);
+  --ti-button-danger-hover-bg-color: var(--ti-common-color-danger-hover);
+  --ti-button-danger-active-bg-color: var(--ti-common-color-danger-active);
   --ti-button-danger-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-button-danger-text-color: var(--ti-base-color-light);
+  --ti-button-danger-text-color: var(--ti-common-color-light);
   --ti-button-danger-disabled-text-color: var(--ti-common-color-text-disabled);
-  --ti-button-danger-disabled-border-color: var(--ti-base-color-danger-disabled-border);
+  --ti-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border);
   --ti-button-danger-plain-bg-color: rgba(245, 34, 45, 0.06);
   --ti-button-danger-plain-disabled-bg-color: rgba(216, 186, 181, 0.1);
 
-  --ti-button-info-normal-bg-color: var(--ti-base-color-info-normal);
-  --ti-button-info-hover-bg-color: var(--ti-base-color-info-hover);
-  --ti-button-info-active-bg-color: var(--ti-base-color-info-active);
+  --ti-button-info-normal-bg-color: var(--ti-common-color-info-normal);
+  --ti-button-info-hover-bg-color: var(--ti-common-color-info-hover);
+  --ti-button-info-active-bg-color: var(--ti-common-color-info-active);
   --ti-button-info-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-button-info-text-color: var(--ti-base-color-light);
+  --ti-button-info-text-color: var(--ti-common-color-light);
   --ti-button-info-disabled-text-color: var(--ti-common-color-text-disabled);
-  --ti-button-info-disabled-border-color: var(--ti-base-color-info-disabled-border);
+  --ti-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border);
   --ti-button-info-plain-bg-color: rgba(51, 51, 51, 0.06);
   --ti-button-info-plain-disabled-bg-color: rgba(191, 191, 191, 0.1);
 
diff --git a/packages/theme/src/calendar/vars.less b/packages/theme/src/calendar/vars.less
index a721dc867..56314983a 100644
--- a/packages/theme/src/calendar/vars.less
+++ b/packages/theme/src/calendar/vars.less
@@ -11,25 +11,25 @@
 */
 
 .component-css-vars-calendar() {
-  --ti-calendar-bg-color: var(--ti-base-color-light);
-  --ti-calendar-list-item-selected-text-color: var(--ti-base-color-light);
+  --ti-calendar-bg-color: var(--ti-common-color-light);
+  --ti-calendar-list-item-selected-text-color: var(--ti-common-color-light);
   --ti-calendar-hover-text-color: var(--ti-base-color-brand-5);
-  --ti-calendar-border-color: var(--ti-base-color-border);
+  --ti-calendar-border-color: var(--ti-common-color-border);
   --ti-calendar-text-color-primary: var(--ti-base-color-brand-6);
   --ti-calendar-background-color-primary: rgba(24, 144, 255, 0.1);
-  --ti-calendar-bg-color-success: var(--ti-base-color-success-normal);
-  --ti-calendar-bg-color-warning: var(--ti-base-color-warning-normal);
+  --ti-calendar-bg-color-success: var(--ti-common-color-success-normal);
+  --ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal);
   --ti-calendar-bg-color-danger: var(--ti-base-color-bg-8);
-  --ti-calendar-text-color-info: var(--ti-base-color-info-normal);
-  --ti-calendar-tool-width: var(--ti-base-size-width-normal);
+  --ti-calendar-text-color-info: var(--ti-common-color-info-normal);
+  --ti-calendar-tool-width: var(--ti-common-size-width-normal);
   --ti-calendar-content-heard-font-size: var(--ti-common-font-size-1);
-  --ti-calendar-selected-border-radius: var(--ti-base-radius-large);
-  --ti-calendar-input-height: var(--ti-base-size-height-minor);
+  --ti-calendar-selected-border-radius: var(--ti-common-radius-large);
+  --ti-calendar-input-height: var(--ti-common-size-height-minor);
   --ti-calendar-input-border-radius: var(--ti-common-border-radius-normal);
   --ti-calendar-input-font-size: var(--ti-common-font-size-base);
-  --ti-calendar-list-item-height: var(--ti-base-size-height-minor);
-  --ti-calendar-list-item-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-calendar-list-item-selected-bg-color: var(--ti-base-color-selected-background);
+  --ti-calendar-list-item-height: var(--ti-common-size-height-minor);
+  --ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background);
   --ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled);
   --ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5);
   --ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5);
diff --git a/packages/theme/src/card-item/vars.less b/packages/theme/src/card-item/vars.less
index 4c7b79783..09eb2d62d 100644
--- a/packages/theme/src/card-item/vars.less
+++ b/packages/theme/src/card-item/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-card-item() {
-  --ti-card-item-bg-color: var(--ti-base-color-light);
+  --ti-card-item-bg-color: var(--ti-common-color-light);
   --ti-card-item-border-color: #ccc;
   --ti-card-item-placeholder-bg-color: rgba(0, 0, 0, 0.05);
   --ti-card-item-placeholder-border-color: rgba(0, 0, 0, 0.2);
@@ -23,5 +23,5 @@
   --ti-card-item-header-font-size: var(--ti-common-font-size-1);
   --ti-card-item-header-text-color: #444;
   --ti-card-item-header-height: var(--ti-common-size-10x);
-  --ti-card-item-header-title-border-color: var(--ti-base-color-secondary);
+  --ti-card-item-header-title-border-color: var(--ti-common-color-secondary);
 }
diff --git a/packages/theme/src/card-layout/vars.less b/packages/theme/src/card-layout/vars.less
index efe0bd504..5336eb5b0 100644
--- a/packages/theme/src/card-layout/vars.less
+++ b/packages/theme/src/card-layout/vars.less
@@ -11,6 +11,6 @@
 */
 
 .component-css-vars-card-layout() {
-  --ti-card-bg-color: var(--ti-base-color-light);
+  --ti-card-bg-color: var(--ti-common-color-light);
   --ti-card-drop-border-color: var(--ti-base-color-brand-6);
 }
diff --git a/packages/theme/src/card-template/index.less b/packages/theme/src/card-template/index.less
index 4f9298c1e..e4ff0aeda 100644
--- a/packages/theme/src/card-template/index.less
+++ b/packages/theme/src/card-template/index.less
@@ -93,7 +93,7 @@
     right: 5px;
     border: 1px solid var(--ti-card-header-border-color);
     border-radius: 2px;
-    box-shadow: var(--ti-base-box-shadow);
+    box-shadow: var(--ti-common-box-shadow);
     background: var(--ti-card-bg-color);
     color: #333;
     color: var(--ti-card-tool-selector-text-color);
diff --git a/packages/theme/src/card-template/vars.less b/packages/theme/src/card-template/vars.less
index 26355848c..c2ed88445 100644
--- a/packages/theme/src/card-template/vars.less
+++ b/packages/theme/src/card-template/vars.less
@@ -11,20 +11,20 @@
 */
 
 .component-css-vars-card-template() {
-  --ti-card-bg-color: var(--ti-base-color-light);
+  --ti-card-bg-color: var(--ti-common-color-light);
   --ti-card-tool-icon-size: 16px;
   --ti-card-tool-icon-color: var(--ti-base-color-brand-6);
   --ti-card-tool-hover-icon-color: var(--ti-base-color-brand-5);
-  --ti-card-tool-active-icon-color: var(--ti-base-color-primary-active);
+  --ti-card-tool-active-icon-color: var(--ti-common-color-primary-active);
   --ti-card-tool-selector-height: var(--ti-common-size-10x);
-  --ti-card-tool-selector-text-color: var(--ti-base-color-info-normal);
+  --ti-card-tool-selector-text-color: var(--ti-common-color-info-normal);
   --ti-card-tool-selector-hover-text-color: var(--ti-base-color-brand-6);
-  --ti-card-tool-selector-hover-bg-color: var(--ti-base-color-selected-background);
-  --ti-card-tool-selector-active-text-color: var(--ti-base-color-primary-active);
-  --ti-card-tool-selector-active-bg-color: var(--ti-base-color-selected-background);
+  --ti-card-tool-selector-hover-bg-color: var(--ti-common-color-selected-background);
+  --ti-card-tool-selector-active-text-color: var(--ti-common-color-primary-active);
+  --ti-card-tool-selector-active-bg-color: var(--ti-common-color-selected-background);
   --ti-card-header-height: 46px;
-  --ti-card-header-border-color: var(--ti-base-color-border);
+  --ti-card-header-border-color: var(--ti-common-color-border);
   --ti-card-header-title-font-weight: var(--ti-common-font-weight-7);
   --ti-card-header-title-font-size: var(--ti-common-font-size-1);
-  --ti-card-header-title-text-color: var(--ti-base-color-info-normal);
+  --ti-card-header-title-text-color: var(--ti-common-color-info-normal);
 }
diff --git a/packages/theme/src/carousel-item/vars.less b/packages/theme/src/carousel-item/vars.less
index c90ecc756..39cbe411c 100644
--- a/packages/theme/src/carousel-item/vars.less
+++ b/packages/theme/src/carousel-item/vars.less
@@ -11,9 +11,9 @@
 */
 
 .component-css-vars-carousel-item() {
-  --ti-carousel-item-title-height: var(--ti-base-size-height-small);
-  --ti-carousel-item-title-text-color: var(--ti-base-color-light);
+  --ti-carousel-item-title-height: var(--ti-common-size-height-small);
+  --ti-carousel-item-title-text-color: var(--ti-common-color-light);
   --ti-carousel-item-title-bg-color: rgba(0, 0, 0, 0.3);
   --ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base);
-  --ti-carousel-mask-bg-color: var(--ti-base-color-light);
+  --ti-carousel-mask-bg-color: var(--ti-common-color-light);
 }
diff --git a/packages/theme/src/carousel/vars.less b/packages/theme/src/carousel/vars.less
index 5aeaf25bc..f30831eb3 100644
--- a/packages/theme/src/carousel/vars.less
+++ b/packages/theme/src/carousel/vars.less
@@ -11,18 +11,18 @@
 */
 
 .component-css-vars-carousel() {
-  --ti-carousel-arrow-height: var(--ti-base-size-height-minor);
-  --ti-carousel-arrow-width: var(--ti-base-size-width-minor);
+  --ti-carousel-arrow-height: var(--ti-common-size-height-minor);
+  --ti-carousel-arrow-width: var(--ti-common-size-width-minor);
   --ti-carousel-arrow-font-size: var(--ti-common-font-size-base);
   --ti-carousel-arrow-hover-bg-color: rgba(0, 0, 0, 0.6);
   --ti-carousel-arrow-bg-color: rgba(0, 0, 0, 0.3);
   --ti-carousel-arrow-box-shadow: none;
-  --ti-carousel-arrow-active-text-color: var(--ti-base-color-light);
+  --ti-carousel-arrow-active-text-color: var(--ti-common-color-light);
   --ti-carousel-indicators-bg-color: rgba(3, 2, 2, 0.3);
   --ti-carousel-indicators-border-radius: 13px;
   --ti-carousel-indicators-height: var(--ti-common-size-4x);
   --ti-carousel-indicators-radius-bg-color: rgba(0, 0, 0, 0.3);
-  --ti-carousel-indicator-active-text-color: var(--ti-base-color-light);
+  --ti-carousel-indicator-active-text-color: var(--ti-common-color-light);
   --ti-carousel-indicator-button-width: var(--ti-common-size-2x);
   --ti-carousel-indicator-button-height: var(--ti-common-size-2x);
   --ti-carousel-indicator-button-bg-color: #bfbfbf;
@@ -35,8 +35,8 @@
   --ti-carousel-indicator-active-button-width: var(--ti-carousel-indicator-button-width);
   --ti-carousel-indicator-active-border-radius: var(--ti-carousel-indicators-border-radius);
   --ti-carousel-indicator-active-transition: none;
-  --ti-carousel-outside-button-bg-color: var(--ti-base-color-dark);
-  --ti-carousel-outside-button-active-bg-color: var(--ti-base-color-secondary);
+  --ti-carousel-outside-button-bg-color: var(--ti-common-color-dark);
+  --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-secondary);
   --ti-carousel-labels-button-font-size: var(--ti-common-font-size-base);
   --ti-carousel-hover-opacity: 0.6;
 }
diff --git a/packages/theme/src/cascader-menu/vars.less b/packages/theme/src/cascader-menu/vars.less
index d1fa793cc..aae67ef65 100644
--- a/packages/theme/src/cascader-menu/vars.less
+++ b/packages/theme/src/cascader-menu/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-cascader-menu() {
-  --ti-cascader-menu-text-color: var(--ti-base-color-info-normal);
+  --ti-cascader-menu-text-color: var(--ti-common-color-info-normal);
   --ti-cascader-menu-border-color: #e4e7ed;
   --ti-cascader-menu-empty-text-color: #c0c4cc;
   --ti-cascader-menu-list-padding-vertical: 0;
diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less
index a6ac2e485..aa43162cc 100644
--- a/packages/theme/src/cascader-node/vars.less
+++ b/packages/theme/src/cascader-node/vars.less
@@ -14,10 +14,10 @@
   --ti-cascader-node-hover-bg-color: var(--ti-base-color-brand-1);
   --ti-cascader-node-hover-text-color: var(--ti-base-color-brand-6);
   --ti-cascader-node-text-color: var(--ti-base-color-white);
-  --ti-cascader-node-selectable-hover-bg-color: var(--ti-base-color-selected-background);
-  --ti-cascader-node-selectable-text-color: var(--ti-base-color-selected-text-color);
-  --ti-cascader-node-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-cascader-node-disabled-bg-color: var(--ti-base-color-placeholder);
+  --ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background);
+  --ti-cascader-node-selectable-text-color: var(--ti-common-color-selected-text-color);
+  --ti-cascader-node-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-cascader-node-disabled-bg-color: var(--ti-common-color-placeholder);
   --ti-cascader-node-icon-font-size: var(--ti-common-font-size-1);
   --ti-cascader-node-icon-color: #bfbfbf;
   --ti-cascader-node-prefix-display: 'inline-block';
diff --git a/packages/theme/src/cascader-panel/vars.less b/packages/theme/src/cascader-panel/vars.less
index e90d1f7d0..20ef64271 100644
--- a/packages/theme/src/cascader-panel/vars.less
+++ b/packages/theme/src/cascader-panel/vars.less
@@ -12,9 +12,9 @@
 
 .component-css-vars-cascader-panel() {
   --ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal);
-  --ti-cascader-panel-border-color: var(--ti-base-color-border);
+  --ti-cascader-panel-border-color: var(--ti-common-color-border);
   --ti-cascader-panel-font-size: var(--ti-common-font-size-base);
-  --ti-cascader-panel-node-height: var(--ti-base-size-height-minor);
+  --ti-cascader-panel-node-height: var(--ti-common-size-height-minor);
   --ti-cascader-panel-node-margin-top: 0;
   --ti-cascader-panel-node-label-padding-vertical: 0;
   --ti-cascader-panel-node-label-padding-right: 30px;
diff --git a/packages/theme/src/cascader/vars.less b/packages/theme/src/cascader/vars.less
index f8a5c7485..11b3b7c90 100644
--- a/packages/theme/src/cascader/vars.less
+++ b/packages/theme/src/cascader/vars.less
@@ -23,19 +23,19 @@
   --ti-cascader-small-font-size: 13px;
   --ti-cascader-mini-font-size: var(--ti-common-font-size-base, 12px);
   --ti-cascader-disabled-text-color: #c0c4cc;
-  --ti-cascader-dropdown-bg-color: var(--ti-base-color-light);
+  --ti-cascader-dropdown-bg-color: var(--ti-common-color-light);
   --ti-cascader-dropdown-border-color: #e4e7ed;
   --ti-cascader-tag-bg-color: #f0f2f5;
   --ti-cascader-tag-icon-bg-color: #c0c4cc;
-  --ti-cascader-tag-icon-color: var(--ti-base-color-light);
+  --ti-cascader-tag-icon-color: var(--ti-common-color-light);
   --ti-cascader-tag-icon-hover-bg-color: #909399;
   --ti-cascader-list-text-color: #606266;
-  --ti-cascader-item-height: var(--ti-base-size-height-minor);
+  --ti-cascader-item-height: var(--ti-common-size-height-minor);
   --ti-cascader-item-hover-bg-color: #f5f7fa;
   --ti-cascader-item-checked-text-color: var(--ti-base-color-brand-5);
   --ti-cascader-empty-text-color: #c0c4cc;
-  --ti-cascader-search-input-text-color: var(--ti-base-color-info-normal);
-  --ti-cascader-search-input-placeholder-text-color: var(--ti-base-color-placeholder);
+  --ti-cascader-search-input-text-color: var(--ti-common-color-info-normal);
+  --ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder);
   --ti-cascader-dropdown-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   --ti-cascader-width: '100%';
 }
diff --git a/packages/theme/src/checkbox/index.js b/packages/theme/src/checkbox/index.js
deleted file mode 100644
index c9cc30405..000000000
--- a/packages/theme/src/checkbox/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-export default {
-  'tiny-checkbox-text-color': '#333',
-  'tiny-checkbox-font-size': '12px',
-  'tiny-checkbox-button-bg-color': '#fff',
-  'tiny-checkbox-bg-color': '#fff',
-  'tiny-checkbox-shadow-color': '#8cc5ff',
-  'tiny-checkbox-border-radius': '2px',
-  'tiny-checkbox-button-hover-text-color': '#252b3a',
-  'tiny-checkbox-hover-text-color': '#40a9ff',
-  'tiny-checkbox-button-checked-border-color': '#1890ff',
-  'tiny-checkbox-button-disabled-text-color': '#999',
-  'tiny-checkbox-button-disabled-bg-color': '#f5f5f5',
-  'tiny-checkbox-button-text-color': '#333',
-  'tiny-checkbox-button-checked-text-color': '#fff',
-  'tiny-checkbox-inner-border-color': '#fff',
-  'tiny-checkbox-bg-color-checked': '#5e7ce0',
-  'tiny-checkbox-border-color-checked': '#5e7ce0',
-  'tiny-checkbox-border-color': '#d9d9d9',
-  'tiny-checkbox-border-color-hover': '#5e7ce0',
-  'tiny-checkbox-icon-height': '8px',
-  'tiny-checkbox-icon-width': '4px',
-  'tiny-checkbox-bg-color-disable': '#f5f5f5',
-  'tiny-checkbox-border-color-unchecked-disabled': '#dfe1e6',
-  'tiny-checkbox-label-text-color-disabled': '#adb0b8',
-  'tiny-checkbox-bg-color-hover': '#beccfa',
-  'tiny-checkbox-disabled-bg-color': '#f5f5f6',
-  'tiny-checkbox-icon-left': '4.5px'
-}
diff --git a/packages/theme/src/checkbox/vars.less b/packages/theme/src/checkbox/vars.less
index 918a96895..12fd7d8c3 100644
--- a/packages/theme/src/checkbox/vars.less
+++ b/packages/theme/src/checkbox/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-checkbox() {
-  --ti-checkbox-text-color: var(--ti-base-color-info-normal);
+  --ti-checkbox-text-color: var(--ti-common-color-info-normal);
   --ti-checkbox-font-size: var(--ti-common-font-size-base);
   --ti-checkbox-button-bg-color: var(--ti-base-color-brand-2);
   --ti-checkbox-bg-color: var(--ti-base-color-white);
@@ -19,12 +19,12 @@
   --ti-checkbox-border-radius: var(--ti-common-border-radius-normal);
   --ti-checkbox-button-hover-text-color: var(--ti-base-color-common-7);
   --ti-checkbox-button-checked-border-color: var(--ti-base-color-brand-6);
-  --ti-checkbox-button-disabled-text-color: var(--ti-base-color-placeholder);
+  --ti-checkbox-button-disabled-text-color: var(--ti-common-color-placeholder);
   --ti-checkbox-disabled-bg-color: var(--ti-base-color-bg-5);
   --ti-checkbox-button-disabled-bg-color: var(--ti-base-color-bg-5);
-  --ti-checkbox-button-text-color: var(--ti-base-color-info-normal);
-  --ti-checkbox-button-checked-text-color: var(--ti-base-color-info-normal);
-  --ti-checkbox-inner-border-color: var(--ti-base-color-light);
+  --ti-checkbox-button-text-color: var(--ti-common-color-info-normal);
+  --ti-checkbox-button-checked-text-color: var(--ti-common-color-info-normal);
+  --ti-checkbox-inner-border-color: var(--ti-common-color-light);
   --ti-checkbox-bg-color-checked: var(--ti-base-color-brand-6);
   --ti-checkbox-border-color-checked: var(--ti-base-color-brand-6);
   --ti-checkbox-border-color: var(--ti-common-color-line-normal);
diff --git a/packages/theme/src/collapse-item/vars.less b/packages/theme/src/collapse-item/vars.less
index 741f1ba0e..2135ba06e 100644
--- a/packages/theme/src/collapse-item/vars.less
+++ b/packages/theme/src/collapse-item/vars.less
@@ -11,14 +11,14 @@
 */
 
 .component-css-vars-collapse-item() {
-  --ti-collapse-item-text-color: var(--ti-base-color-info-normal);
+  --ti-collapse-item-text-color: var(--ti-common-color-info-normal);
   --ti-collapse-item-icon-color: var(--ti-common-color-icon-normal);
-  --ti-collapse-item-wrap-bg-color: var(--ti-base-color-light);
-  --ti-collapse-item-disabled-text-color: var(--ti-base-color-placeholder);
+  --ti-collapse-item-wrap-bg-color: var(--ti-common-color-light);
+  --ti-collapse-item-disabled-text-color: var(--ti-common-color-placeholder);
   --ti-collapse-item-header-font-size: var(--ti-common-font-size-base);
   --ti-collapse-item-header-focus-text-color: var(--ti-base-color-brand-5);
   --ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base);
-  --ti-collapse-item-arrow-hover-text-color: var(--ti-base-color-info-normal);
+  --ti-collapse-item-arrow-hover-text-color: var(--ti-common-color-info-normal);
   --ti-collapse-item-content-font-size: var(--ti-common-font-size-base);
   --ti-collapse-item-header-bg-color: var(--ti-base-color-brand-1);
   --ti-collapse-item-margin-top: var(--ti-common-space-2x);
diff --git a/packages/theme/src/collapse/vars.less b/packages/theme/src/collapse/vars.less
index d65e6f2bc..84d1434f5 100644
--- a/packages/theme/src/collapse/vars.less
+++ b/packages/theme/src/collapse/vars.less
@@ -11,5 +11,5 @@
 */
 
 .component-css-vars-collapse() {
-  --ti-collapse-border-color: var(--ti-base-color-border);
+  --ti-collapse-border-color: var(--ti-common-color-border);
 }
diff --git a/packages/theme/src/crop/vars.less b/packages/theme/src/crop/vars.less
index 7f73f0db8..5ebe299c0 100644
--- a/packages/theme/src/crop/vars.less
+++ b/packages/theme/src/crop/vars.less
@@ -11,21 +11,21 @@
 */
 
 .component-css-vars-crop() {
-  --ti-crop-drag-box-bg-color: var(--ti-base-color-light);
-  --ti-crop-modal-bg-color: var(--ti-base-color-dark);
+  --ti-crop-drag-box-bg-color: var(--ti-common-color-light);
+  --ti-crop-modal-bg-color: var(--ti-common-color-dark);
   --ti-crop-view-box-outline-color: var(--ti-base-color-brand-6);
   --ti-crop-center-bg-color: #eeeeee;
-  --ti-crop-face-bg-color: var(--ti-base-color-light);
+  --ti-crop-face-bg-color: var(--ti-common-color-light);
   --ti-crop-line-bg-color: var(--ti-base-color-brand-6);
   --ti-crop-point-bg-color: var(--ti-base-color-brand-6);
-  --ti-crop-opration-height: var(--ti-base-size-height-minor);
+  --ti-crop-opration-height: var(--ti-common-size-height-minor);
   --ti-crop-opration-bg-color: rgba(55, 55, 55, 0.3);
   --ti-crop-opration-span-bg-color: rgba(0, 0, 0, 0.5);
-  --ti-crop-opration-span-text-color: var(--ti-base-color-light);
+  --ti-crop-opration-span-text-color: var(--ti-common-color-light);
   --ti-crop-opration-span-hover-bg-color: rgba(0, 0, 0, 0.8);
   --ti-crop-modal-mask-bg-color: rgba(55, 55, 55, 0.5);
   --ti-crop-moda-close-bg-color: rgba(0, 0, 0, 0.5);
-  --ti-crop-moda-close-icon-color: var(--ti-base-color-light);
+  --ti-crop-moda-close-icon-color: var(--ti-common-color-light);
   --ti-crop-nopic-bg-color: rgba(0, 0, 0, 0.3);
   --ti-crop-nopic-center-text-color: rgba(255, 255, 255, 0.6);
 }
diff --git a/packages/theme/src/custom.less b/packages/theme/src/custom.less
index fe5bd23ae..af7816d96 100644
--- a/packages/theme/src/custom.less
+++ b/packages/theme/src/custom.less
@@ -12,3 +12,10 @@
 
 @css-prefix: tiny-;
 @css-prefix-iconfont: tiny-icon;
+
+// 组件前缀
+@button-prefix-cls: ~'@{css-prefix}button';
+@input-prefix-cls: ~'@{css-prefix}input';
+@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';
+@scrollbar-prefix-cls: ~'@{css-prefix}scrollbar';
+@svg-prefix-cls: ~'@{css-prefix}svg';
diff --git a/packages/theme/src/date-panel/index.less b/packages/theme/src/date-panel/index.less
new file mode 100644
index 000000000..1cae7cfd5
--- /dev/null
+++ b/packages/theme/src/date-panel/index.less
@@ -0,0 +1,179 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';
+
+.@{picker-panel-prefix-cls} {
+  .component-css-vars-picker-panel();
+
+  color: var(--ti-picker-panel-text-color);
+  font-size: var(--ti-picker-panel-font-size);
+  border: 1px solid var(--ti-picker-panel-border-color);
+  box-shadow: var(--ti-picker-panel-box-shadow);
+  background: var(--ti-picker-panel-bg-color);
+  border-radius: var(--ti-common-border-radius-normal);
+  line-height: var(--ti-picker-panel-line-height);
+  margin: var(--ti-base-dropdown-gap) 0;
+
+  &__body-wrapper::after,
+  &__body::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  &__body {
+    padding-bottom: 8px;
+  }
+
+  &__content {
+    position: relative;
+  }
+
+  &__footer {
+    border-top: 1px solid var(--ti-picker-panel-border-color);
+    padding: 6px 16px;
+    background-color: var(--ti-picker-panel-bg-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .@{button-prefix-cls} {
+      min-width: 60px;
+
+      &:only-child {
+        float: right;
+      }
+    }
+
+    .@{button-prefix-cls}--text {
+      text-align: left;
+    }
+  }
+
+  &__shortcut {
+    display: block;
+    width: 100%;
+    border: 0;
+    background-color: transparent;
+    line-height: 28px;
+    font-size: var(--ti-picker-panel-shortcut-font-size);
+    color: var(--ti-picker-panel-text-color);
+    padding-left: 12px;
+    text-align: left;
+    outline: 0;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--ti-picker-panel-hover-bg-color);
+    }
+
+    &.active {
+      background-color: var(--ti-picker-panel-selected-bg-color);
+    }
+  }
+
+  &__btn {
+    color: var(--ti-picker-panel-text-color);
+    border: 1px solid var(--ti-picker-panel-border-color);
+    font-size: var(--ti-picker-panel-font-size);
+    line-height: 24px;
+    border-radius: var(--ti-picker-panel-border-radius);
+    padding: 0 20px;
+    cursor: pointer;
+    outline: 0;
+    background-color: transparent;
+
+    [disabled] {
+      color: var(--ti-picker-panel-disabled-text-color);
+      cursor: not-allowed;
+    }
+  }
+
+  &__icon-btn {
+    font-size: var(--ti-picker-panel-font-size);
+    line-height: 30px;
+    fill: var(--ti-picker-panel-icon-color-btn);
+    border: 0;
+    background: 0 0;
+    cursor: pointer;
+    outline: 0;
+
+    &:hover {
+      fill: var(--ti-picker-panel-icon-color-btn-hover);
+    }
+
+    &.is-disabled {
+      color: var(--ti-picker-panel-icon-color-btn-disabled);
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &__link-btn {
+    vertical-align: middle;
+  }
+
+  [slot='sidebar'],
+  &__sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 110px;
+    border-right: 1px solid var(--ti-picker-panel-border-color);
+    box-sizing: border-box;
+    padding-top: 6px;
+    background-color: var(--ti-picker-panel-bg-color);
+    overflow: auto;
+
+    & + .@{picker-panel-prefix-cls}__body {
+      margin-left: 110px;
+    }
+  }
+
+  &__timezone {
+    margin-bottom: 10px;
+
+    .@{picker-panel-prefix-cls}__tzlist {
+      z-index: 10;
+      overflow-y: hidden;
+
+      &-li {
+        height: 30px;
+        line-height: 30px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0 10px;
+        border: 1px solid #f4f0f0;
+        cursor: pointer;
+      }
+
+      .@{css-prefix}popup {
+        position: absolute;
+        width: 238px;
+        bottom: 77px;
+        max-height: 260px;
+        box-shadow: 0 -1px 2px 0 rgba(53, 29, 29, 0.5);
+      }
+    }
+
+    .@{input-prefix-cls} {
+      position: relative;
+    }
+  }
+}
diff --git a/packages/theme/src/date-panel/vars.less b/packages/theme/src/date-panel/vars.less
new file mode 100644
index 000000000..35e2b4cdd
--- /dev/null
+++ b/packages/theme/src/date-panel/vars.less
@@ -0,0 +1,28 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-picker-panel() {
+  --ti-picker-panel-line-height: var(--ti-base-size-height-minor);
+  --ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
+  --ti-picker-panel-icon-color-btn: var(--ti-base-color-common-2);
+  --ti-picker-panel-icon-color-btn-hover: var(--ti-base-color-brand-7);
+  --ti-picker-panel-icon-color-btn-disabled: var(--ti-base-color-bg-5);
+  --ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
+  --ti-picker-panel-font-size: var(--ti-common-font-size-base);
+  --ti-picker-panel-text-color: var(--ti-base-color-info-normal);
+  --ti-picker-panel-bg-color: var(--ti-base-color-light);
+  --ti-picker-panel-selected-bg-color: #f2f2f3;
+  --ti-picker-panel-border-radius: var(--ti-common-border-radius-normal);
+  --ti-picker-panel-border-color: var(--ti-common-color-line-dividing);
+  --ti-picker-panel-hover-bg-color: var(--ti-base-color-brand-2);
+  --ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled);
+}
diff --git a/packages/theme/src/date-picker/index.less b/packages/theme/src/date-picker/index.less
new file mode 100644
index 000000000..4d9b2fb9f
--- /dev/null
+++ b/packages/theme/src/date-picker/index.less
@@ -0,0 +1,107 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@date-picker-prefix-cls: ~'@{css-prefix}date-picker';
+
+.@{date-picker-prefix-cls} {
+  .component-css-vars-date-picker();
+
+  width: var(--ti-date-picker-width);
+
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 398px;
+  }
+
+  &.has-time {
+    .@{picker-panel-prefix-cls}__body-wrapper {
+      position: relative;
+    }
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  &__editor-wrap {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+  }
+
+  &__time-header {
+    position: relative;
+    border-bottom: 1px solid var(--ti-date-picker-border-color);
+    font-size: var(--ti-date-picker-font-size);
+    padding: 8px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  &__header {
+    margin: 12px;
+    text-align: center;
+  }
+
+  &__header--bordered {
+    margin-bottom: 0;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--ti-date-picker-border-color);
+
+    & + .@{picker-panel-prefix-cls}__content {
+      margin-top: 0;
+    }
+  }
+
+  &__header-label {
+    font-size: var(--ti-date-picker-font-size);
+    font-weight: 700;
+    padding: 0 4px;
+    text-align: center;
+    cursor: pointer;
+    color: var(--ti-date-picker-text-color);
+    vertical-align: middle;
+
+    &.active,
+    &:hover {
+      color: var(--ti-date-picker-header-label-hover-text-color);
+    }
+  }
+
+  &__prev-btn {
+    float: left;
+  }
+
+  &__next-btn {
+    float: right;
+  }
+
+  &__time-wrap {
+    padding: 10px;
+    text-align: center;
+  }
+
+  &__time-label {
+    float: left;
+    cursor: pointer;
+    line-height: 30px;
+    margin-left: 10px;
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/src/date-picker/vars.less b/packages/theme/src/date-picker/vars.less
new file mode 100644
index 000000000..25667982b
--- /dev/null
+++ b/packages/theme/src/date-picker/vars.less
@@ -0,0 +1,31 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-date-picker() {
+  --ti-date-picker-width: 280px;
+  --ti-date-picker-font-size: var(--ti-common-font-size-base);
+  --ti-date-picker-text-color: var(--ti-base-color-info-normal);
+  --ti-date-picker-bg-color: var(--ti-base-color-light);
+  --ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
+  --ti-date-picker-border-color: var(--ti-common-color-line-dividing);
+  --ti-date-picker-hover-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled);
+  --ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled);
+  --ti-date-picker-selected-bg-color: #f2f2f3;
+  --ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
+  --ti-date-picker-current-select-bg-color: var(--ti-base-color-brand-6);
+  --ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
+  --ti-date-picker-current-border-radius: 0;
+  --ti-date-picker-range-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7);
+}
diff --git a/packages/theme/src/date-range/index.less b/packages/theme/src/date-range/index.less
new file mode 100644
index 000000000..4f88b01a0
--- /dev/null
+++ b/packages/theme/src/date-range/index.less
@@ -0,0 +1,116 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@date-range-picker-prefix-cls: ~'@{css-prefix}date-range-picker';
+
+.@{date-range-picker-prefix-cls} {
+  .component-css-vars-date-range-picker();
+
+  width: 558px;
+
+  &.has-sidebar {
+    width: 668px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .@{picker-panel-prefix-cls}__body {
+    min-width: var(--ti-date-range-picker-body-min-width);
+  }
+
+  .@{picker-panel-prefix-cls}__content {
+    margin: 0;
+  }
+
+  &__header {
+    position: relative;
+    text-align: center;
+    height: 28px;
+
+    [class*='arrow-left'] {
+      float: left;
+    }
+
+    [class*='arrow-right'] {
+      float: right;
+    }
+
+    div {
+      font-size: var(--ti-date-range-picker-header-font-size);
+      font-weight: 500;
+      margin-right: 50px;
+    }
+  }
+
+  &__content {
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 16px;
+
+    &.is-left {
+      border-right: 1px solid var(--ti-date-picker-border-color);
+    }
+
+    .@{date-range-picker-prefix-cls}__header div {
+      margin-left: 50px;
+      margin-right: 50px;
+    }
+  }
+
+  &__editors-wrap {
+    box-sizing: border-box;
+    display: table-cell;
+
+    &.is-right {
+      text-align: right;
+    }
+  }
+
+  &__time-header {
+    position: relative;
+    border-bottom: 1px solid var(--ti-date-picker-border-color);
+    font-size: var(--ti-date-picker-font-size);
+    padding: 8px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+
+    & > .@{css-prefix}icon-arrow-right {
+      font-size: var(--ti-common-font-size-4);
+      vertical-align: middle;
+      display: table-cell;
+      color: var(--ti-date-range-picker-time-header-icon-color);
+    }
+  }
+
+  &__time-picker-wrap {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+
+    .@{picker-panel-prefix-cls} {
+      position: absolute;
+      top: 13px;
+      right: 0;
+      z-index: 1;
+      background: var(--ti-date-picker-bg-color);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/src/date-range/vars.less b/packages/theme/src/date-range/vars.less
new file mode 100644
index 000000000..cec485e21
--- /dev/null
+++ b/packages/theme/src/date-range/vars.less
@@ -0,0 +1,16 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-date-range-picker() {
+  --ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
+  --ti-date-range-picker-time-header-icon-color: #303133;
+}
diff --git a/packages/theme/src/date-table/index.less b/packages/theme/src/date-table/index.less
new file mode 100644
index 000000000..aeab349bf
--- /dev/null
+++ b/packages/theme/src/date-table/index.less
@@ -0,0 +1,232 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../mixins/common.less';
+@import '../custom.less';
+@import './vars.less';
+
+@date-table-prefix-cls: ~'@{css-prefix}date-table';
+
+.@{date-table-prefix-cls} {
+  .component-css-vars-date-table();
+
+  font-size: var(--ti-date-table-font-size);
+  .user-select(none);
+
+  &.is-week-mode &__row:hover {
+    td {
+      &.available:hover {
+        color: var(--ti-date-table-text-color);
+      }
+
+      &:first-child div {
+        margin-left: 5px;
+        border-top-left-radius: var(--ti-date-table-td-border-radius);
+        border-bottom-left-radius: var(--ti-date-table-td-border-radius);
+      }
+
+      &:last-child div {
+        margin-right: 5px;
+        border-top-right-radius: var(--ti-date-table-td-border-radius);
+        border-bottom-right-radius: var(--ti-date-table-td-border-radius);
+      }
+    }
+
+    div {
+      background-color: var(--ti-date-table-hover-bg-color);
+    }
+  }
+
+  &.is-week-mode &__row.current {
+    div {
+      background-color: var(--ti-date-table-week-current-bg-color);
+
+      &:hover {
+        background-color: var(--ti-date-table-week-current-hover-bg-color);
+      }
+    }
+
+    td.available {
+      &:hover span {
+        background-color: transparent;
+      }
+
+      &.start-date span,
+      &.end-date span {
+        background-color: var(--ti-date-table-current-select-bg-color);
+      }
+    }
+  }
+
+  td {
+    width: var(--ti-date-table-td-width);
+    height: var(--ti-date-table-td-height);
+    padding: var(--ti-date-table-td-padding-vertical) var(--ti-date-table-td-padding-horizontal);
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+
+    div {
+      height: 24px;
+      min-width: 36px;
+      padding: 3px 0;
+      box-sizing: border-box;
+    }
+
+    span {
+      min-width: var(--ti-date-table-td-span-width);
+      height: var(--ti-date-table-td-span-height);
+      line-height: var(--ti-date-table-td-span-height);
+      display: block;
+      margin: 0 auto;
+      position: absolute;
+      left: 50%;
+      top: 5px;
+      transform: translateX(-50%);
+    }
+
+    &.next-month,
+    &.pre-month {
+      color: var(--ti-date-table-td-pre-month-text-color);
+      cursor: pointer;
+
+      & span:hover {
+        background: var(--ti-datetime-beside-day-bg-color-hover);
+      }
+    }
+
+    &.today {
+      position: relative;
+      color: var(--ti-date-table-td-today-text-color);
+
+      &:after {
+        content: '';
+        width: 12px;
+        height: 1px;
+        background: var(--ti-date-table-td-today-border-color);
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: auto;
+        bottom: 5px;
+      }
+
+      &.end-date,
+      &.start-date {
+        span {
+          color: var(--ti-date-table-td-nomal-text-color);
+        }
+      }
+    }
+
+    &.available:hover span {
+      background-color: var(--ti-date-table-hover-bg-color);
+      border-radius: var(--ti-date-table-current-border-radius);
+    }
+
+    &.current:not(.disabled) span {
+      color: var(--ti-date-table-td-nomal-text-color);
+      background-color: var(--ti-date-table-current-select-bg-color);
+      border-radius: var(--ti-date-table-current-border-radius);
+    }
+
+    &.end-date,
+    &.start-date {
+      div {
+        color: var(--ti-date-table-td-nomal-text-color);
+      }
+
+      span {
+        background-color: var(--ti-date-table-current-select-bg-color);
+      }
+    }
+
+    &.start-date {
+      div {
+        margin-left: 5px;
+        border-top-left-radius: var(--ti-date-table-td-border-radius);
+        border-bottom-left-radius: var(--ti-date-table-td-border-radius);
+      }
+    }
+
+    &.end-date {
+      div {
+        margin-right: 5px;
+        border-top-right-radius: var(--ti-date-table-td-border-radius);
+        border-bottom-right-radius: var(--ti-date-table-td-border-radius);
+      }
+    }
+
+    &.disabled {
+      div {
+        background-color: var(--ti-date-table-disabled-bg-color);
+        opacity: 1;
+        cursor: not-allowed;
+        color: var(--ti-date-table-disabled-text-color);
+      }
+    }
+
+    &.in-range {
+      div {
+        background-color: var(--ti-date-table-range-bg-color);
+
+        &:hover {
+          background-color: var(--ti-date-table-range-hover-bg-color);
+        }
+      }
+
+      &.end-date:hover,
+      &.start-date:hover {
+        span {
+          background-color: var(--ti-date-table-current-select-bg-color);
+        }
+      }
+    }
+
+    &.available {
+      padding: 0;
+    }
+
+    &.selected {
+      div {
+        margin-left: 5px;
+        margin-right: 5px;
+        background-color: var(--ti-date-table-td-range-bg-color);
+
+        &:hover {
+          background-color: var(--ti-date-table-td-range-bg-color);
+        }
+      }
+
+      span {
+        background-color: var(--ti-date-table-current-select-bg-color);
+        color: var(--ti-date-table-td-nomal-text-color);
+        border: none;
+      }
+
+      &.available:hover span {
+        background-color: var(--ti-date-table-current-select-bg-color);
+      }
+    }
+
+    &.week {
+      font-size: 80%;
+      color: var(--ti-date-table-text-color);
+    }
+  }
+
+  th {
+    color: var(--ti-date-table-th-text-color);
+    font-weight: 400;
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/src/date-table/vars.less b/packages/theme/src/date-table/vars.less
new file mode 100644
index 000000000..c6f1d52b5
--- /dev/null
+++ b/packages/theme/src/date-table/vars.less
@@ -0,0 +1,38 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-date-table() {
+  --ti-date-table-td-width: 36px;
+  --ti-date-table-td-height: 34px;
+  --ti-date-table-td-padding-vertical: 4px;
+  --ti-date-table-td-padding-horizontal: 0;
+  --ti-date-table-td-span-width: 36px;
+  --ti-date-table-td-span-height: 24px;
+  --ti-date-table-th-text-color: var(--ti-base-color-common-2);
+  --ti-date-table-td-border-radius: 0;
+  --ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2);
+  --ti-date-table-td-nomal-text-color: var(--ti-base-color-light);
+  --ti-date-table-td-range-bg-color: #f2f6fc;
+  --ti-date-table-td-today-border-color: var(--ti-base-color-brand-6);
+  --ti-date-table-td-today-text-color: var(--ti-base-color-info-normal);
+  --ti-date-table-week-current-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-table-week-current-hover-bg-color: var(--ti-base-color-brand-3);
+  --ti-date-table-font-size: var(--ti-common-font-size-base);
+  --ti-date-table-hover-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-table-current-border-color: var(--ti-base-color-brand-6);
+  --ti-date-table-disabled-text-color: var(--ti-common-color-text-disabled);
+  --ti-date-table-disabled-bg-color: var(--ti-common-color-bg-disabled);
+  --ti-date-table-range-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-table-range-hover-bg-color: var(--ti-base-color-brand-2);
+  --ti-date-table-current-select-bg-color: var(--ti-base-color-brand-6);
+  --ti-date-table-text-color: var(--ti-base-color-info-normal);
+}
diff --git a/packages/theme/src/dept/vars.less b/packages/theme/src/dept/vars.less
index ee85f293c..95942647a 100644
--- a/packages/theme/src/dept/vars.less
+++ b/packages/theme/src/dept/vars.less
@@ -12,9 +12,9 @@
 
 .component-css-vars-dept() {
   --ti-dept-label-font-size: var(--ti-common-font-size-base);
-  --ti-dept-label-text-color: var(--ti-base-color-info-normal);
+  --ti-dept-label-text-color: var(--ti-common-color-info-normal);
   --ti-dept-label-font-weight: var(--ti-common-font-weight-7);
   --ti-dept-selected-info-text-color: var(--ti-base-color-brand-6);
   --ti-dept-selected-info-bg-color: #f1f1f1;
-  --ti-dept-selected-info-border-radius: var(--ti-base-radius-large);
+  --ti-dept-selected-info-border-radius: var(--ti-common-radius-large);
 }
diff --git a/packages/theme/src/detail-page/vars.less b/packages/theme/src/detail-page/vars.less
index edcfff211..dd491694b 100644
--- a/packages/theme/src/detail-page/vars.less
+++ b/packages/theme/src/detail-page/vars.less
@@ -11,15 +11,15 @@
 */
 
 .component-css-vars-detail-page() {
-  --ti-detail-page-text-color: var(--ti-base-color-info-normal);
+  --ti-detail-page-text-color: var(--ti-common-color-info-normal);
   --ti-detail-page-font-size: var(--ti-common-font-size-base);
   --ti-detail-page-header-font-size: var(--ti-common-font-size-1);
-  --ti-detail-page-header-border-color: var(--ti-base-color-border);
+  --ti-detail-page-header-border-color: var(--ti-common-color-border);
   --ti-detail-page-header-seticon-text-color: var(--ti-base-color-brand-6);
   --ti-detail-page-header-seticon-hover-text-color: var(--ti-base-color-brand-5);
   --ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2);
-  --ti-detail-page-content-item-text-color: var(--ti-base-color-placeholder);
+  --ti-detail-page-content-item-text-color: var(--ti-common-color-placeholder);
   --ti-detail-dialog-header-bg-color: #f1f1f1;
-  --ti-detail-dialog-content-item-hover-bg-color: var(--ti-base-color-hover-background);
+  --ti-detail-dialog-content-item-hover-bg-color: var(--ti-common-color-hover-background);
   --ti-detail-dialog-active-bg-color: #e9f4fd;
 }
diff --git a/packages/theme/src/dialog-box/vars.less b/packages/theme/src/dialog-box/vars.less
index 78fad157f..373ed60c8 100644
--- a/packages/theme/src/dialog-box/vars.less
+++ b/packages/theme/src/dialog-box/vars.less
@@ -11,16 +11,16 @@
 */
 
 .component-css-vars-dialog-box() {
-  --ti-dialogbox-bg-color: var(--ti-base-color-light);
+  --ti-dialogbox-bg-color: var(--ti-common-color-light);
   --ti-dialogbox-border-radius: var(--ti-common-border-radius-normal);
-  --ti-dialogbox-head-border-color: var(--ti-base-color-border);
-  --ti-dialogbox-head-text-color: var(--ti-base-color-placeholder);
+  --ti-dialogbox-head-border-color: var(--ti-common-color-border);
+  --ti-dialogbox-head-text-color: var(--ti-common-color-placeholder);
   --ti-dialogbox-head-padding-top: 32px;
   --ti-dialogbox-head-padding-horizontal: 32px;
   --ti-dialogbox-head-padding-bottom: 28px;
   --ti-dialogbox-head-title-font-size: var(--ti-common-font-size-3);
   --ti-dialogbox-head-title-font-weight: var(--ti-common-font-weight-7);
-  --ti-dialogbox-head-title-text-color: var(--ti-base-color-info-normal);
+  --ti-dialogbox-head-title-text-color: var(--ti-common-color-info-normal);
   --ti-dialogbox-head-font-icon-color: #c4c4c4;
   --ti-dialogbox-head-font-icon-size: 14px;
   --ti-dialogbox-head-font-icon-color-hover: var(--ti-base-color-brand-6);
diff --git a/packages/theme/src/dropdown-item/vars.less b/packages/theme/src/dropdown-item/vars.less
index 60acb233f..a9c379c41 100644
--- a/packages/theme/src/dropdown-item/vars.less
+++ b/packages/theme/src/dropdown-item/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-dropdown-item() {
-  --ti-dropdown-menu-item-hover-bg-color: var(--ti-base-color-hover-background);
+  --ti-dropdown-menu-item-hover-bg-color: var(--ti-common-color-hover-background);
   --ti-dropdown-menu-item-hover-text-color: var(--ti-base-color-brand-6);
   --ti-dropdown-menu-item-active-bg-color: var(--ti-base-color-brand-6);
   --ti-dropdown-menu-item-active-text-color: var(--ti-base-color-white);
diff --git a/packages/theme/src/error-page/vars.less b/packages/theme/src/error-page/vars.less
index eb7eae77e..795faf0ab 100644
--- a/packages/theme/src/error-page/vars.less
+++ b/packages/theme/src/error-page/vars.less
@@ -11,14 +11,14 @@
 */
 
 :root {
-  --ti-errortips-box-bg-color: var(--ti-base-color-light);
+  --ti-errortips-box-bg-color: var(--ti-common-color-light);
   --ti-errortips-body-text-color: #5a5e66;
   --ti-errortips-body-font-size: var(--ti-common-font-size-1);
   --ti-errortips-body-code-font-size: 100px;
   --ti-errortips-body-code-text-color: #9ac7ef;
   --ti-errortips-body-content-font-size: var(--ti-common-font-size-2);
   --ti-errortips-body-bottom-font-weight: var(--ti-common-font-weight-8);
-  --ti-errortips-sso-box-bg-color: var(--ti-base-color-light);
+  --ti-errortips-sso-box-bg-color: var(--ti-common-color-light);
   --ti-errortips-sso-body-text-color: #5a5e66;
   --ti-errortips-sso-body-font-size: var(--ti-common-font-size-1);
   --ti-errortips-not-sso-bg-color: #dcdfe4;
@@ -30,11 +30,11 @@
   --ti-errortips-not-sso-body-text-color: #5a5e66;
   --ti-errortips-not-sso-body-input-border-color: var(--ti-base-color-bg-5);
   --ti-errortips-not-sso-body-input-border-radius: var(--ti-common-border-radius-normal);
-  --ti-errortips-not-sso-body-placeholder-text-color: var(--ti-base-color-placeholder);
-  --ti-errortips-not-sso-body-input-hover-text-color: var(--ti-base-color-placeholder);
-  --ti-errortips-not-sso-body-input-focus-text-color: var(--ti-base-color-border);
+  --ti-errortips-not-sso-body-placeholder-text-color: var(--ti-common-color-placeholder);
+  --ti-errortips-not-sso-body-input-hover-text-color: var(--ti-common-color-placeholder);
+  --ti-errortips-not-sso-body-input-focus-text-color: var(--ti-common-color-border);
   --ti-errortips-not-sso-body-input-danger-border-color: var(--ti-base-color-bg-8);
-  --ti-errortips-not-sso-body-button-text-color: var(--ti-base-color-light);
+  --ti-errortips-not-sso-body-button-text-color: var(--ti-common-color-light);
   --ti-errortips-not-sso-body-button-bg-color: var(--ti-base-color-brand-6);
   --ti-errortips-not-sso-body-button-border-radius: var(--ti-common-border-radius-normal);
   --ti-errortips-not-sso-body-button-hover-bg-color: var(--ti-base-color-brand-5);
diff --git a/packages/theme/src/fall-menu/vars.less b/packages/theme/src/fall-menu/vars.less
index f8e66ab7e..9ed8d4afb 100644
--- a/packages/theme/src/fall-menu/vars.less
+++ b/packages/theme/src/fall-menu/vars.less
@@ -11,17 +11,17 @@
 */
 
 .component-css-vars-fall-menu() {
-  --ti-fallmenu-menu-height: var(--ti-base-size-height-large);
+  --ti-fallmenu-menu-height: var(--ti-common-size-height-large);
   --ti-fallmenu-bg-color-normal: var(--ti-base-color-brand-6);
   --ti-fallmenu-bg-color-hover: var(--ti-base-color-brand-5);
   --ti-fallmenu-icon-font-size: var(--ti-common-font-size-base);
-  --ti-fallmenu-slot-text-color: var(--ti-base-color-light);
-  --ti-fallmenu-slot-bg-color: var(--ti-base-color-light);
+  --ti-fallmenu-slot-text-color: var(--ti-common-color-light);
+  --ti-fallmenu-slot-bg-color: var(--ti-common-color-light);
   --ti-fallmenu-title-font-size: var(--ti-common-font-size-2);
-  --ti-fallmenu-box-title-text-color: var(--ti-base-color-placeholder);
+  --ti-fallmenu-box-title-text-color: var(--ti-common-color-placeholder);
   --ti-fallmenu-box-text-color: var(--ti-base-color-brand-6);
   --ti-fallmenu-box-font-size: var(--ti-common-font-size-1);
-  --ti-fallmenu-box-title-height: var(--ti-base-size-height-small);
+  --ti-fallmenu-box-title-height: var(--ti-common-size-height-small);
   --ti-fallmenu-box-content-height: 26px;
-  --ti-fallmenu-box-hover-text-color: var(--ti-base-color-primary-active);
+  --ti-fallmenu-box-hover-text-color: var(--ti-common-color-primary-active);
 }
diff --git a/packages/theme/src/floatbar/vars.less b/packages/theme/src/floatbar/vars.less
index 803f9a639..5441cac7a 100644
--- a/packages/theme/src/floatbar/vars.less
+++ b/packages/theme/src/floatbar/vars.less
@@ -11,11 +11,11 @@
 */
 
 .component-css-vars-floatbar() {
-  --ti-floatbar-border-color: var(--ti-base-color-border);
-  --ti-floatbar-border-radius: var(--ti-base-radius-small);
+  --ti-floatbar-border-color: var(--ti-common-color-border);
+  --ti-floatbar-border-radius: var(--ti-common-radius-small);
   --ti-floatbar-font-size: var(--ti-common-font-size-1);
-  --ti-floatbar-list-bg-color: var(--ti-base-color-light);
-  --ti-floatbar-list-text-color: var(--ti-base-color-info-normal);
+  --ti-floatbar-list-bg-color: var(--ti-common-color-light);
+  --ti-floatbar-list-text-color: var(--ti-common-color-info-normal);
   --ti-floatbar-list-hover-bg-color: rgba(24, 144, 255, 0.06);
   --ti-floatbar-list-hover-text-color: var(--ti-base-color-brand-6);
 }
diff --git a/packages/theme/src/form-item/vars.less b/packages/theme/src/form-item/vars.less
index b64d06b32..72e73a918 100644
--- a/packages/theme/src/form-item/vars.less
+++ b/packages/theme/src/form-item/vars.less
@@ -14,9 +14,9 @@
   --ti-form-item-small-line-height: 36px;
   --ti-form-item-medium-line-height: 42px;
   --ti-form-item-mini-line-height: 24px;
-  --ti-form-item-label-line-height: var(--ti-base-size-height-minor);
+  --ti-form-item-label-line-height: var(--ti-common-size-height-minor);
   --ti-form-item-label-font-size: var(--ti-common-font-size-1);
-  --ti-form-item-label-text-color: var(--ti-base-color-info-normal);
+  --ti-form-item-label-text-color: var(--ti-common-color-info-normal);
   --ti-form-item-error-font-size: var(--ti-common-font-size-base);
   --ti-form-item-error-text-color: var(--ti-base-color-error-3);
   --ti-form-item-error-border-color: var(--ti-base-color-error-3);
diff --git a/packages/theme/src/grid/toolbar.less b/packages/theme/src/grid/toolbar.less
index a451656e0..56a08b965 100644
--- a/packages/theme/src/grid/toolbar.less
+++ b/packages/theme/src/grid/toolbar.less
@@ -163,7 +163,7 @@
 
 .@{grid-select-toolbar-prefix-cls} {
   position: absolute;
-  background-color: var(--ti-base-color-light);
+  background-color: var(--ti-common-color-light);
 
   .@{grid-toolbar-prefix-cls} {
     padding: 2px 0px 2px 6px;
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
index 852aafdb6..5e5aa206a 100644
--- a/packages/theme/src/grid/vars.less
+++ b/packages/theme/src/grid/vars.less
@@ -13,14 +13,14 @@
 .component-css-vars-grid() {
   /*font-family/table color*/
   --ti-grid-font-family: Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-  --ti-grid-text-color: var(--ti-base-color-info-normal);
-  --ti-grid-light-color: var(--ti-base-color-light);
+  --ti-grid-text-color: var(--ti-common-color-info-normal);
+  --ti-grid-light-color: var(--ti-common-color-light);
   --ti-grid-error-color: var(--ti-base-color-bg-8);
   --ti-grid-error-bg-color: var(--ti-base-color-error-1);
-  --ti-grid-success-color: var(--ti-base-color-success-normal);
-  --ti-grid-warning-color: var(--ti-base-color-warning-normal);
+  --ti-grid-success-color: var(--ti-common-color-success-normal);
+  --ti-grid-warning-color: var(--ti-common-color-warning-normal);
   --ti-grid-disabled-color: var(--ti-base-color-bg-5);
-  --ti-grid-normal-text-color: var(--ti-base-color-placeholder);
+  --ti-grid-normal-text-color: var(--ti-common-color-placeholder);
   --ti-grid-font-size: var(--ti-common-font-size-base);
   --ti-grid-border-color: var(--ti-common-color-line-dividing);
   --ti-grid-border-radius: var(--ti-common-border-radius-normal);
@@ -29,17 +29,17 @@
   /*primary color*/
   --ti-grid-primary-color: var(--ti-base-color-brand-6);
   --ti-grid-primary-hover-color: var(--ti-base-color-brand-5);
-  --ti-grid-primary-active-color: var(--ti-base-color-primary-active);
+  --ti-grid-primary-active-color: var(--ti-common-color-primary-active);
   --ti-grid-primary-disabled-text-color: #b1b1b1;
 
   /* height */
-  --ti-grid-header-column-height: var(--ti-base-size-height-small);
+  --ti-grid-header-column-height: var(--ti-common-size-height-small);
   --ti-grid-medium-column-height: 52px;
   --ti-grid-default-column-height: 42px;
   --ti-grid-small-column-height: 40px;
   --ti-grid-mini-column-height: 30px;
   --ti-grid-custom-head-height: 40px;
-  --ti-grid-custom-body-list-height: var(--ti-base-size-height-small);
+  --ti-grid-custom-body-list-height: var(--ti-common-size-height-small);
   --ti-grid-icon-fill-hover-bg-color: #fff;
 
   /*input/radio/checkbox color*/
@@ -51,11 +51,11 @@
   /*table row*/
   --ti-grid-row-odd-background-color: #fff;
   --ti-grid-row-striped-background-color: #fafafa;
-  --ti-grid-row-hover-background-color: var(--ti-base-color-hover-background);
+  --ti-grid-row-hover-background-color: var(--ti-common-color-hover-background);
 
   /*table column*/
   --ti-grid-column-hover-background-color: #d7effb;
-  --ti-grid-column-current-background-color: var(--ti-base-color-hover-background);
+  --ti-grid-column-current-background-color: var(--ti-common-color-hover-background);
   --ti-grid-column-icon-border-color: var(--ti-base-color-common-1);
 
   /*table checked*/
@@ -67,14 +67,14 @@
 
   /*tooltip*/
   --ti-grid-tooltip-dark-background-color: #303133;
-  --ti-grid-tooltip-light-background-color: var(--ti-base-color-light);
+  --ti-grid-tooltip-light-background-color: var(--ti-common-color-light);
 
   /*modal*/
   --ti-grid-modal-loading-text-color: #78b1eb;
   --ti-grid-modal-alert-font-size: 22px;
   --ti-grid-modal-header-font-size: var(--ti-common-font-size-1);
   --ti-grid-modal-small-btn-font-size: var(--ti-common-font-size-2);
-  --ti-grid-modal-box-background-color: var(--ti-base-color-light);
+  --ti-grid-modal-box-background-color: var(--ti-common-color-light);
   --ti-grid-modal-box-border-color: #ebeef5;
   --ti-grid-modal-btn-text-color: #c4c4c4;
   --ti-grid-modal-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
diff --git a/packages/theme/src/hrapprover/vars.less b/packages/theme/src/hrapprover/vars.less
index b261aeb74..fb3cf22c8 100644
--- a/packages/theme/src/hrapprover/vars.less
+++ b/packages/theme/src/hrapprover/vars.less
@@ -12,12 +12,12 @@
 
 .component-css-vars-hrapprover() {
   --ti-hrapprover-error-border-color: var(--ti-base-color-bg-8);
-  --ti-hrapprover-table-text-color: var(--ti-base-color-info-normal);
+  --ti-hrapprover-table-text-color: var(--ti-common-color-info-normal);
   --ti-hrapprover-table-font-size: var(--ti-common-font-size-base);
   --ti-hrapprover-tr-bg-color: #fafafa;
-  --ti-hrapprover-tr-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-hrapprover-tr-odd-bg-color: var(--ti-base-color-light);
-  --ti-hrapprover-th-height: var(--ti-base-size-height-small);
-  --ti-hrapprover-thead-border-color: var(--ti-base-color-border);
+  --ti-hrapprover-tr-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-hrapprover-tr-odd-bg-color: var(--ti-common-color-light);
+  --ti-hrapprover-th-height: var(--ti-common-size-height-small);
+  --ti-hrapprover-thead-border-color: var(--ti-common-color-border);
   --ti-hrapprover-thead-bg-color: #f1f1f1;
 }
diff --git a/packages/theme/src/image-viewer/vars.less b/packages/theme/src/image-viewer/vars.less
index 294d54de3..4a390d2a3 100644
--- a/packages/theme/src/image-viewer/vars.less
+++ b/packages/theme/src/image-viewer/vars.less
@@ -11,8 +11,8 @@
 */
 
 .component-css-vars-image-viewer() {
-  --ti-image-viewer-text-color: var(--ti-base-color-light);
-  --ti-image-viewer-actions-inner-text-color: var(--ti-base-color-light);
+  --ti-image-viewer-text-color: var(--ti-common-color-light);
+  --ti-image-viewer-actions-inner-text-color: var(--ti-common-color-light);
   --ti-image-viewer-close-font-size: var(--ti-common-font-size-4);
   --ti-image-viewer-close-bg-color: #606266;
   --ti-image-viewer-close-top: 40px;
diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
index a6a5ebdd0..bcca84df7 100644
--- a/packages/theme/src/index.less
+++ b/packages/theme/src/index.less
@@ -40,6 +40,10 @@
 @import './credit-card/index.less';
 @import './credit-card-form/index.less';
 @import './crop/index.less';
+@import './date-panel/index.less';
+@import './date-picker/index.less';
+@import './date-range/index.less';
+@import './date-table/index.less';
 @import './dept/index.less';
 @import './detail-page/index.less';
 @import './dialog-box/index.less';
@@ -68,6 +72,8 @@
 @import './menubar/index.less';
 @import './milestone/index.less';
 @import './modal/index.less';
+@import './month-range/index.less';
+@import './month-table/index.less';
 @import './nav-menu/index.less';
 @import './notify/index.less';
 @import './numeric/index.less';
@@ -104,6 +110,11 @@
 @import './tall-storage/index.less';
 @import './text-popup/index.less';
 @import './time/index.less';
+@import './time-panel/index.less';
+@import './time-picker/index.less';
+@import './time-range/index.less';
+@import './time-select/index.less';
+@import './time-spinner/index.less';
 @import './tip/index.less';
 @import './toggle-menu/index.less';
 @import './tooltip/index.less';
@@ -121,3 +132,4 @@
 @import './user-head/index.less';
 @import './user-link/index.less';
 @import './wizard/index.less';
+@import './year-table/index.less';
diff --git a/packages/theme/src/input/vars.less b/packages/theme/src/input/vars.less
index 77858ac76..0b069defd 100644
--- a/packages/theme/src/input/vars.less
+++ b/packages/theme/src/input/vars.less
@@ -11,19 +11,19 @@
 */
 
 .component-css-vars-input() {
-  --ti-input-text-color: var(--ti-base-color-info-normal);
-  --ti-input-bg-color: var(--ti-base-color-light);
+  --ti-input-text-color: var(--ti-common-color-info-normal);
+  --ti-input-bg-color: var(--ti-common-color-light);
   --ti-input-font-size: var(--ti-common-font-size-base);
-  --ti-input-height: var(--ti-base-size-height-normal);
+  --ti-input-height: var(--ti-common-size-height-normal);
   --ti-input-border-radius: var(--ti-common-border-radius-normal);
-  --ti-input-border-color: var(--ti-base-color-border);
-  --ti-input-hover-border-color: var(--ti-base-color-border-hover);
+  --ti-input-border-color: var(--ti-common-color-border);
+  --ti-input-hover-border-color: var(--ti-common-color-border-hover);
   --ti-input-active-border-color: var(--ti-base-color-brand-5);
-  --ti-input-placeholder-text-color: var(--ti-base-color-placeholder);
-  --ti-input-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-input-medium-height: var(--ti-base-size-height-medium);
-  --ti-input-small-height: var(--ti-base-size-height-small);
-  --ti-input-mini-height: var(--ti-base-size-height-mini);
+  --ti-input-placeholder-text-color: var(--ti-common-color-placeholder);
+  --ti-input-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-input-medium-height: var(--ti-common-size-height-medium);
+  --ti-input-small-height: var(--ti-common-size-height-small);
+  --ti-input-mini-height: var(--ti-common-size-height-mini);
   --ti-input-disabled-bg-color: var(--ti-common-color-bg-disabled);
   --ti-input-disabled-border-color: var(--ti-common-color-line-disabled);
   --ti-input-exceed-text-color: var(--ti-base-color-bg-8);
diff --git a/packages/theme/src/ip-address/vars.less b/packages/theme/src/ip-address/vars.less
index 15dbef053..a046b0357 100644
--- a/packages/theme/src/ip-address/vars.less
+++ b/packages/theme/src/ip-address/vars.less
@@ -11,12 +11,12 @@
 */
 
 .component-css-vars-ip-address() {
-  --ti-ip-address-normal-height: var(--ti-base-size-height-normal);
-  --ti-ip-address-normal-text-color: var(--ti-base-color-info-normal);
-  --ti-ip-address-icon-color: var(--ti-base-color-info-normal);
-  --ti-ip-address-normal-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-ip-address-normal-border-color: var(--ti-base-color-border);
-  --ti-ip-address-normal-bg-color: var(--ti-base-color-light);
+  --ti-ip-address-normal-height: var(--ti-common-size-height-normal);
+  --ti-ip-address-normal-text-color: var(--ti-common-color-info-normal);
+  --ti-ip-address-icon-color: var(--ti-common-color-info-normal);
+  --ti-ip-address-normal-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-ip-address-normal-border-color: var(--ti-common-color-border);
+  --ti-ip-address-normal-bg-color: var(--ti-common-color-light);
   --ti-ip-address-border-radius: var(--ti-common-border-radius-normal);
   --ti-ip-address-font-size: var(--ti-common-font-size-base);
   --ti-ip-address-border-color-hover: var(--ti-base-color-brand-6);
diff --git a/packages/theme/src/link-menu/vars.less b/packages/theme/src/link-menu/vars.less
index c670d6da8..16c8fe447 100644
--- a/packages/theme/src/link-menu/vars.less
+++ b/packages/theme/src/link-menu/vars.less
@@ -14,11 +14,11 @@
   --ti-link-menu-nav-item-text-color: var(--ti-base-color-brand-6);
   --ti-link-menu-nav-item-border-color: #c4c4c4;
   --ti-link-menu-btn-text-color: rgba(24, 144, 255, 0.8);
-  --ti-link-menu-btn-bg-color: var(--ti-base-color-light);
-  --ti-link-menu-input-height: var(--ti-base-size-height-normal);
+  --ti-link-menu-btn-bg-color: var(--ti-common-color-light);
+  --ti-link-menu-input-height: var(--ti-common-size-height-normal);
   --ti-link-menu-input-font-size: var(--ti-common-font-size-base);
-  --ti-link-menu-input-text-color: var(--ti-base-color-info-normal);
-  --ti-link-menu-input-border-color: var(--ti-base-color-border);
+  --ti-link-menu-input-text-color: var(--ti-common-color-info-normal);
+  --ti-link-menu-input-border-color: var(--ti-common-color-border);
   --ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal);
   --ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled);
 }
diff --git a/packages/theme/src/link/vars.less b/packages/theme/src/link/vars.less
index 3a4473ecc..bf8cd88df 100644
--- a/packages/theme/src/link/vars.less
+++ b/packages/theme/src/link/vars.less
@@ -23,25 +23,25 @@
   --ti-link-primary-text-color: var(--ti-base-color-brand-6);
   --ti-link-primary-border-color: var(--ti-base-color-brand-6);
   --ti-link-primary-hover-text-color: var(--ti-base-color-brand-5);
-  --ti-link-primary-disabled-text-color: var(--ti-base-color-primary-disabled, #a0cfff);
+  --ti-link-primary-disabled-text-color: var(--ti-common-color-primary-disabled, #a0cfff);
 
   --ti-link-danger-text-color: var(--ti-base-color-bg-8);
   --ti-link-danger-border-color: var(--ti-base-color-bg-8);
   --ti-link-danger-hover-text-color: var(--ti-base-color-bg-7);
-  --ti-link-danger-disabled-text-color: var(--ti-base-color-danger-disabled, #d8bab5);
+  --ti-link-danger-disabled-text-color: var(--ti-common-color-danger-disabled, #d8bab5);
 
-  --ti-link-success-text-color: var(--ti-base-color-success-normal);
-  --ti-link-success-border-color: var(--ti-base-color-success-normal);
-  --ti-link-success-hover-text-color: var(--ti-base-color-success-hover);
-  --ti-link-success-disabled-text-color: var(--ti-base-color-success-disabled, #a6c3b9);
+  --ti-link-success-text-color: var(--ti-common-color-success-normal);
+  --ti-link-success-border-color: var(--ti-common-color-success-normal);
+  --ti-link-success-hover-text-color: var(--ti-common-color-success-hover);
+  --ti-link-success-disabled-text-color: var(--ti-common-color-success-disabled, #a6c3b9);
 
-  --ti-link-warning-text-color: var(--ti-base-color-warning-normal);
-  --ti-link-warning-border-color: var(--ti-base-color-warning-normal);
-  --ti-link-warning-hover-text-color: var(--ti-base-color-warning-hover);
-  --ti-link-warning-disabled-text-color: var(--ti-base-color-warning-disabled, #d3c6a2);
+  --ti-link-warning-text-color: var(--ti-common-color-warning-normal);
+  --ti-link-warning-border-color: var(--ti-common-color-warning-normal);
+  --ti-link-warning-hover-text-color: var(--ti-common-color-warning-hover);
+  --ti-link-warning-disabled-text-color: var(--ti-common-color-warning-disabled, #d3c6a2);
 
-  --ti-link-info-text-color: var(--ti-base-color-info-normal);
-  --ti-link-info-border-color: var(--ti-base-color-info-normal);
-  --ti-link-info-hover-text-color: var(--ti-base-color-info-hover);
-  --ti-link-info-disabled-text-color: var(--ti-base-color-info-disabled, #bfbfbf);
+  --ti-link-info-text-color: var(--ti-common-color-info-normal);
+  --ti-link-info-border-color: var(--ti-common-color-info-normal);
+  --ti-link-info-hover-text-color: var(--ti-common-color-info-hover);
+  --ti-link-info-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf);
 }
diff --git a/packages/theme/src/menubar/vars.less b/packages/theme/src/menubar/vars.less
index 7d510d129..e447ad2b0 100644
--- a/packages/theme/src/menubar/vars.less
+++ b/packages/theme/src/menubar/vars.less
@@ -12,15 +12,15 @@
 
 .component-css-vars-menubar() {
   --ti-menubar-title-font-size: var(--ti-common-font-size-base-normal);
-  --ti-menubar-title-text-color: var(--ti-base-color-light);
+  --ti-menubar-title-text-color: var(--ti-common-color-light);
   --ti-menubar-li-height: var(--ti-common-size-12x);
-  --ti-menubar-menu-height: var(--ti-base-size-height-large);
+  --ti-menubar-menu-height: var(--ti-common-size-height-large);
   --ti-menubar-menu-font-size: var(--ti-common-font-size-1);
-  --ti-menubar-submenu-normal-text-color: var(--ti-base-color-info-normal);
-  --ti-menubar-submenu-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-menubar-submenu-active-bg-color: var(--ti-base-color-selected-background);
+  --ti-menubar-submenu-normal-text-color: var(--ti-common-color-info-normal);
+  --ti-menubar-submenu-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-menubar-submenu-active-bg-color: var(--ti-common-color-selected-background);
   --ti-menubar-submenu-li-height: var(--ti-common-size-10x);
-  --ti-menubar-bg-color-normal: var(--ti-base-color-navigation-background);
+  --ti-menubar-bg-color-normal: var(--ti-common-color-navigation-background);
   --ti-menubar-bg-color-active: #474c5e;
   --ti-menubar-dropdown-border-color: #c9ccda;
   --ti-menubar-dropdown-hover-border-color: #585f7f;
diff --git a/packages/theme/src/milestone/vars.less b/packages/theme/src/milestone/vars.less
index a464e81f3..77df205f8 100644
--- a/packages/theme/src/milestone/vars.less
+++ b/packages/theme/src/milestone/vars.less
@@ -11,15 +11,15 @@
 */
 
 .component-css-vars-milestone() {
-  --ti-milestone-text-color: var(--ti-base-color-light);
-  --ti-milestone-bg-color: var(--ti-base-color-light);
+  --ti-milestone-text-color: var(--ti-common-color-light);
+  --ti-milestone-bg-color: var(--ti-common-color-light);
   --ti-milestone-font-size: var(--ti-common-font-size-base);
   --ti-milestone-icon-width: var(--ti-common-size-5x);
   --ti-milestone-icon-height: var(--ti-common-size-5x);
   --ti-milestone-line-bg-color: #dbdbdb;
-  --ti-milestone-status-text-color: var(--ti-base-color-placeholder);
+  --ti-milestone-status-text-color: var(--ti-common-color-placeholder);
   --ti-milestone-flag-tip-line-height: 20px;
-  --ti-milestone-flag-tip-bg-color: var(--ti-base-color-border);
+  --ti-milestone-flag-tip-bg-color: var(--ti-common-color-border);
   --ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal);
   --ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-1);
   --ti-milestone-flag-content-font-size: var(--ti-common-font-size-1);
diff --git a/packages/theme/src/modal/vars.less b/packages/theme/src/modal/vars.less
index f4c14756e..0e22ecb2f 100644
--- a/packages/theme/src/modal/vars.less
+++ b/packages/theme/src/modal/vars.less
@@ -12,7 +12,7 @@
 
 .component-css-vars-modal() {
   --ti-modal-font-size: var(--ti-common-font-size-base);
-  --ti-modal-text-color: var(--ti-base-color-info-normal);
+  --ti-modal-text-color: var(--ti-common-color-info-normal);
   --ti-modal-font-family: Helvetica, Arial, 'Microsoft YaHei', sans-serif;
 
   --ti-modal-primary-icon-color: var(--ti-common-color-prompt);
@@ -25,7 +25,7 @@
 
   --ti-modal-header-font-size: var(--ti-common-font-size-3);
   --ti-modal-header-text-color: var(--ti-common-color-text-primary);
-  --ti-modal-header-font-weight: var(--ti-base-font-weight-bold);
+  --ti-modal-header-font-weight: var(--ti-common-font-weight-bold);
   --ti-modal-header-padding-top: 32px;
   --ti-modal-header-padding-horizontal: 32px;
   --ti-modal-header-padding-bottom: 12px;
@@ -42,12 +42,12 @@
   --ti-modal-close-btn-scale: scale(1, 1);
   --ti-modal-close-btn-padding-horizontal-vertical: 0;
   --ti-modal-small-btn-font-size: var(--ti-common-font-size-2);
-  --ti-modal-box-background-color: var(--ti-base-color-light);
+  --ti-modal-box-background-color: var(--ti-common-color-light);
   --ti-modal-btn-text-color: var(--ti-base-color-common-5);
   --ti-modal-box-shadow: var(--ti-common-shadow-4-down);
   --ti-modal-box-border-radius: var(--ti-common-border-radius-normal);
   --ti-modal-border-color: rgba(0, 0, 0, 0.2);
-  --ti-modal-close-btn-background-color-hover: var(--ti-base-color-light);
+  --ti-modal-close-btn-background-color-hover: var(--ti-common-color-light);
   --ti-modal-footer-default-display-button: inline-block;
   --ti-modal-box-width: 400px;
 }
diff --git a/packages/theme/src/month-range/index.less b/packages/theme/src/month-range/index.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/theme/src/month-range/vars.less b/packages/theme/src/month-range/vars.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/theme/src/month-table/index.less b/packages/theme/src/month-table/index.less
new file mode 100644
index 000000000..569e2f516
--- /dev/null
+++ b/packages/theme/src/month-table/index.less
@@ -0,0 +1,116 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@month-table-prefix-cls: ~'@{css-prefix}month-table';
+
+.@{month-table-prefix-cls} {
+  .component-css-vars-month-table();
+
+  font-size: var(--ti-date-picker-font-size);
+  margin: -1px;
+  border-collapse: collapse;
+
+  td {
+    text-align: center;
+    padding: 16px 0;
+    cursor: pointer;
+
+    div {
+      height: 32px;
+      box-sizing: border-box;
+    }
+
+    &.today {
+      .cell {
+        color: var(--ti-month-table-td-text-bg-color);
+        font-weight: 700;
+      }
+
+      &.end-date,
+      &.start-date {
+        .cell {
+          color: var(--ti-month-table-td-date-text-color);
+        }
+      }
+    }
+
+    &.disabled {
+      .cell {
+        background-color: var(--ti-date-picker-disabled-bg-color);
+        cursor: not-allowed;
+        color: var(--ti-date-picker-disabled-text-color);
+
+        &:hover {
+          color: var(--ti-date-picker-disabled-text-color);
+        }
+      }
+    }
+
+    .cell {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      display: block;
+      color: var(--ti-date-picker-text-color);
+
+      &:hover {
+        background: var(--ti-date-picker-hover-bg-color);
+      }
+    }
+
+    &.in-range {
+      div,
+      div:hover {
+        background-color: var(--ti-month-table-td-range-bg-color);
+      }
+    }
+
+    &.end-date,
+    &.start-date {
+      div {
+        color: var(--ti-month-table-td-date-text-color);
+      }
+
+      .cell {
+        color: var(--ti-month-table-td-date-text-color);
+        background-color: var(--ti-month-table-td-text-bg-color);
+      }
+    }
+
+    &:not(.in-range) {
+      padding: 16px 4px;
+
+      div {
+        height: auto;
+        padding: 0;
+      }
+
+      .cell {
+        width: auto;
+        height: 32px;
+        line-height: 32px;
+        border-radius: 2px;
+      }
+    }
+
+    &.current:not(.disabled) .cell {
+      &,
+      &:hover {
+        color: var(--ti-date-table-td-nomal-text-color);
+        background: var(--ti-month-table-td-text-bg-color);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/src/month-table/vars.less b/packages/theme/src/month-table/vars.less
new file mode 100644
index 000000000..b67a96248
--- /dev/null
+++ b/packages/theme/src/month-table/vars.less
@@ -0,0 +1,18 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-month-table() {
+  --ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7);
+  --ti-month-table-td-range-bg-color: #f2f6fc;
+  --ti-month-table-td-date-text-color: var(--ti-base-color-light);
+  --ti-month-table-td-date-border-radius: 24px;
+}
diff --git a/packages/theme/src/nav-menu/vars.less b/packages/theme/src/nav-menu/vars.less
index 6914f5f73..b2d9064b2 100644
--- a/packages/theme/src/nav-menu/vars.less
+++ b/packages/theme/src/nav-menu/vars.less
@@ -11,18 +11,18 @@
 */
 
 .component-css-vars-nav-menu() {
-  --ti-nav-menu-height: var(--ti-base-size-height-large);
-  --ti-nav-menu-bg-color: var(--ti-base-color-navigation-background);
+  --ti-nav-menu-height: var(--ti-common-size-height-large);
+  --ti-nav-menu-bg-color: var(--ti-common-color-navigation-background);
   --ti-nav-menu-item-font-size: var(--ti-common-font-size-2);
-  --ti-nav-menu-item-text-color: var(--ti-base-color-light);
+  --ti-nav-menu-item-text-color: var(--ti-common-color-light);
   --ti-nav-menu-item-hover-bg-color: #474c5e;
   --ti-nav-menu-setting-font-size: 22px;
-  --ti-nav-menu-popmenu-text-color: var(--ti-base-color-info-normal);
-  --ti-nav-menu-popmenu-border-color: var(--ti-base-color-border);
+  --ti-nav-menu-popmenu-text-color: var(--ti-common-color-info-normal);
+  --ti-nav-menu-popmenu-border-color: var(--ti-common-color-border);
   --ti-nav-menu-popmenu-more-item-height: 40px;
   --ti-nav-menu-popmenu-more-item-hover-text-color: var(--ti-base-color-brand-6);
-  --ti-nav-menu-popmenu-more-item-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-nav-menu-popmenu-more-item-active-bg-color: var(--ti-base-color-selected-background);
+  --ti-nav-menu-popmenu-more-item-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-nav-menu-popmenu-more-item-active-bg-color: var(--ti-common-color-selected-background);
   --ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1);
   --ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base, 12px);
 }
diff --git a/packages/theme/src/notify/vars.less b/packages/theme/src/notify/vars.less
index 122f073c7..ab2f246b2 100644
--- a/packages/theme/src/notify/vars.less
+++ b/packages/theme/src/notify/vars.less
@@ -27,7 +27,7 @@
   --ti-notify-text-color: var(--ti-base-color-brand-6);
   --ti-notify-border-radius: var(--ti-common-border-radius-normal);
 
-  --ti-notify-title-text-color: var(--ti-base-color-info-normal);
+  --ti-notify-title-text-color: var(--ti-common-color-info-normal);
   --ti-notify-title-font-size: var(--ti-common-font-size-1);
   --ti-notify-title-font-weight: var(--ti-common-font-weight-7);
   --ti-notify-title-height: 30px;
diff --git a/packages/theme/src/numeric/vars.less b/packages/theme/src/numeric/vars.less
index b03518693..081db4687 100644
--- a/packages/theme/src/numeric/vars.less
+++ b/packages/theme/src/numeric/vars.less
@@ -13,14 +13,14 @@
 .component-css-vars-numeric() {
   --ti-numeric-input-width: 180px;
   --ti-numeric-input-border-radius: var(--ti-common-border-radius-normal);
-  --ti-numeric-input-normal-border-color: var(--ti-base-color-border);
-  --ti-numeric-input-normal-text-color: var(--ti-base-color-info-normal);
-  --ti-numeric-input-normal-bg-color: var(--ti-base-color-light);
+  --ti-numeric-input-normal-border-color: var(--ti-common-color-border);
+  --ti-numeric-input-normal-text-color: var(--ti-common-color-info-normal);
+  --ti-numeric-input-normal-bg-color: var(--ti-common-color-light);
   --ti-numeric-input-normal-height: 28px;
-  --ti-numeric-input-normal-active-border-color: var(--ti-base-color-border-hover);
-  --ti-numeric-input-placeholder-text-color: var(--ti-base-color-placeholder);
+  --ti-numeric-input-normal-active-border-color: var(--ti-common-color-border-hover);
+  --ti-numeric-input-placeholder-text-color: var(--ti-common-color-placeholder);
   --ti-numeric-input-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-numeric-input-icon-color-hover: var(--ti-base-color-border-hover);
+  --ti-numeric-input-icon-color-hover: var(--ti-common-color-border-hover);
   --ti-numeric-input-icon-color-disabled: var(--ti-common-color-icon-disabled);
   --ti-numeric-input-border-color-disabled: var(--ti-common-color-line-disabled);
 }
diff --git a/packages/theme/src/option-group/vars.less b/packages/theme/src/option-group/vars.less
index a3a9d03b9..f462cfd49 100644
--- a/packages/theme/src/option-group/vars.less
+++ b/packages/theme/src/option-group/vars.less
@@ -14,5 +14,5 @@
   --ti-select-group-wrap-bg-color: #e4e7ed;
   --ti-select-group-title-font-size: var(--ti-common-font-size-base);
   --ti-select-group-title-text-color: #909399;
-  --ti-select-group-title-line-height: var(--ti-base-size-height-minor);
+  --ti-select-group-title-line-height: var(--ti-common-size-height-minor);
 }
diff --git a/packages/theme/src/option/vars.less b/packages/theme/src/option/vars.less
index a47235a43..f0adfde78 100644
--- a/packages/theme/src/option/vars.less
+++ b/packages/theme/src/option/vars.less
@@ -11,15 +11,15 @@
 */
 
 .component-css-vars-option() {
-  --ti-select-dropdown-item-text-color: var(--ti-base-color-info-normal);
+  --ti-select-dropdown-item-text-color: var(--ti-common-color-info-normal);
   --ti-select-dropdown-item-font-size: var(--ti-common-font-size-base);
-  --ti-select-dropdown-item-height: var(--ti-base-size-height-minor);
-  --ti-select-dropdown-item-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-select-dropdown-item-disabled-bg-color: var(--ti-base-color-light);
-  --ti-select-dropdown-item-bg-color: var(--ti-base-color-light);
-  --ti-select-dropdown-item-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-select-dropdown-item-selected-bg-color: var(--ti-base-color-selected-background);
-  --ti-select-dropdown-item-selected-text-color: var(--ti-base-color-selected-text-color);
+  --ti-select-dropdown-item-height: var(--ti-common-size-height-minor);
+  --ti-select-dropdown-item-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-select-dropdown-item-disabled-bg-color: var(--ti-common-color-light);
+  --ti-select-dropdown-item-bg-color: var(--ti-common-color-light);
+  --ti-select-dropdown-item-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-select-dropdown-item-selected-bg-color: var(--ti-common-color-selected-background);
+  --ti-select-dropdown-item-selected-text-color: var(--ti-common-color-selected-text-color);
   --ti-select-dropdown-item-icon-color: var(--ti-common-color-line-normal);
   --ti-select-dropdown-item-icon-font-size: var(--ti-common-font-size-2);
   --ti-select-dropdown-item-icon-color-selected: var(--ti-base-color-brand-6);
diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
index 5352e4ebd..a40c31af5 100644
--- a/packages/theme/src/pager/vars.less
+++ b/packages/theme/src/pager/vars.less
@@ -11,26 +11,26 @@
 */
 
 .component-css-vars-pager() {
-  --ti-pager-normal-text-color: var(--ti-base-color-info-normal);
+  --ti-pager-normal-text-color: var(--ti-common-color-info-normal);
   --ti-pager-primary-bg-color: var(--ti-base-color-brand-6);
   --ti-pager-primary-text-color: var(--ti-base-color-brand-6);
   --ti-pager-primary-border-color: var(--ti-base-color-brand-6);
   --ti-pager-primary-hover-text-color: var(--ti-base-color-brand-5);
-  --ti-pager-input-border-color: var(--ti-base-color-border);
+  --ti-pager-input-border-color: var(--ti-common-color-border);
   --ti-pager-input-hover-border-color: var(--ti-common-color-line-hover);
   --ti-pager-input-stop-color: var(--ti-base-color-common-2);
   --ti-pager-input-lighting-color: var(--ti-base-color-brand-6);
   --ti-pager-font-size: var(--ti-common-font-size-base);
   --ti-pager-text-color: var(--ti-common-color-text-secondary);
-  --ti-pager-font-normal-text-color: var(--ti-base-color-secondary);
-  --ti-pager-height: var(--ti-base-size-height-mini);
+  --ti-pager-font-normal-text-color: var(--ti-common-color-secondary);
+  --ti-pager-height: var(--ti-common-size-height-mini);
   --ti-pager-input-width: var(--ti-common-space-10x);
   --ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0);
   --ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-6);
   --ti-pager-poplist-item-unchecked-box-shadow: none;
-  --ti-pager-input-height: var(--ti-base-size-height-mini);
+  --ti-pager-input-height: var(--ti-common-size-height-mini);
   --ti-pager-input-border-radius: var(--ti-common-border-radius-normal);
-  --ti-pager-poplist-item-hover-bg-color: var(--ti-base-color-hover-background);
+  --ti-pager-poplist-item-hover-bg-color: var(--ti-common-color-hover-background);
   --ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-highlight);
   --ti-pager-poplist-item-selected-bg-color: var(--ti-common-color-bg-emphasize);
   --ti-pager-poplist-item-hover-border-color: var(--ti-base-color-transparent);
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
index 6cb4dd5ab..03f05d144 100644
--- a/packages/theme/src/picker/index.less
+++ b/packages/theme/src/picker/index.less
@@ -15,511 +15,9 @@
 @import './vars.less';
 @import '../transition/timepicker.less';
 
-@date-table-prefix-cls: ~'@{css-prefix}date-table';
-@month-table-prefix-cls: ~'@{css-prefix}month-table';
-@year-table-prefix-cls: ~'@{css-prefix}year-table';
-@time-spinner-prefix-cls: ~'@{css-prefix}time-spinner';
 @date-editor-prefix-cls: ~'@{css-prefix}date-editor';
 @range-editor-prefix-cls: ~'@{css-prefix}range-editor';
-@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';
-@date-picker-prefix-cls: ~'@{css-prefix}date-picker';
-@date-range-picker-prefix-cls: ~'@{css-prefix}date-range-picker';
-@time-range-picker-prefix-cls: ~'@{css-prefix}time-range-picker';
-@time-panel-prefix-cls: ~'@{css-prefix}time-panel';
-@time-select-prefix-cls: ~'@{css-prefix}time-select';
-@scrollbar-prefix-cls: ~'@{css-prefix}scrollbar';
-@input-prefix-cls: ~'@{css-prefix}input';
 @range-prefix-cls: ~'@{css-prefix}range';
-@button-prefix-cls: ~'@{css-prefix}button';
-@svg-prefix-cls: ~'@{css-prefix}svg';
-
-.@{date-table-prefix-cls} {
-  font-size: var(--ti-date-picker-font-size);
-  .user-select(none);
-
-  &.is-week-mode &__row:hover {
-    td {
-      &.available:hover {
-        color: var(--ti-date-picker-text-color);
-      }
-
-      &:first-child div {
-        margin-left: 5px;
-        border-top-left-radius: var(--ti-date-table-td-border-radius);
-        border-bottom-left-radius: var(--ti-date-table-td-border-radius);
-      }
-
-      &:last-child div {
-        margin-right: 5px;
-        border-top-right-radius: var(--ti-date-table-td-border-radius);
-        border-bottom-right-radius: var(--ti-date-table-td-border-radius);
-      }
-    }
-
-    div {
-      background-color: var(--ti-date-picker-hover-bg-color);
-    }
-  }
-
-  &.is-week-mode &__row.current {
-    div {
-      background-color: var(--ti-date-table-week-current-bg-color);
-
-      &:hover {
-        background-color: var(--ti-date-table-week-current-hover-bg-color);
-      }
-    }
-
-    td.available {
-      &:hover span {
-        background-color: transparent;
-      }
-
-      &.start-date span,
-      &.end-date span {
-        background-color: var(--ti-date-picker-current-select-bg-color);
-      }
-    }
-  }
-
-  td {
-    width: var(--ti-date-table-td-width);
-    height: var(--ti-date-table-td-height);
-    padding: var(--ti-date-table-td-padding-vertical) var(--ti-date-table-td-padding-horizontal);
-    box-sizing: border-box;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-
-    div {
-      height: 24px;
-      min-width: 36px;
-      padding: 3px 0;
-      box-sizing: border-box;
-    }
-
-    span {
-      min-width: var(--ti-date-table-td-span-width);
-      height: var(--ti-date-table-td-span-height);
-      line-height: var(--ti-date-table-td-span-height);
-      display: block;
-      margin: 0 auto;
-      position: absolute;
-      left: 50%;
-      top: 5px;
-      transform: translateX(-50%);
-    }
-
-    &.next-month,
-    &.pre-month {
-      color: var(--ti-date-table-td-pre-month-text-color);
-      cursor: pointer;
-
-      & span:hover {
-        background: var(--ti-datetime-beside-day-bg-color-hover);
-      }
-    }
-
-    &.today {
-      position: relative;
-      color: var(--ti-date-table-td-today-text-color);
-
-      &:after {
-        content: '';
-        width: 12px;
-        height: 1px;
-        background: var(--ti-date-table-td-today-border-color);
-        position: absolute;
-        left: 0;
-        right: 0;
-        margin: auto;
-        bottom: 5px;
-      }
-
-      &.end-date,
-      &.start-date {
-        span {
-          color: var(--ti-date-table-td-nomal-text-color);
-        }
-      }
-    }
-
-    &.available:hover span {
-      background-color: var(--ti-date-picker-hover-bg-color);
-      border-radius: var(--ti-date-picker-current-border-radius);
-    }
-
-    &.current:not(.disabled) span {
-      color: var(--ti-date-table-td-nomal-text-color);
-      background-color: var(--ti-date-picker-current-select-bg-color);
-      border-radius: var(--ti-date-picker-current-border-radius);
-    }
-
-    &.end-date,
-    &.start-date {
-      div {
-        color: var(--ti-date-table-td-nomal-text-color);
-      }
-
-      span {
-        background-color: var(--ti-date-picker-current-select-bg-color);
-      }
-    }
-
-    &.start-date {
-      div {
-        margin-left: 5px;
-        border-top-left-radius: var(--ti-date-table-td-border-radius);
-        border-bottom-left-radius: var(--ti-date-table-td-border-radius);
-      }
-    }
-
-    &.end-date {
-      div {
-        margin-right: 5px;
-        border-top-right-radius: var(--ti-date-table-td-border-radius);
-        border-bottom-right-radius: var(--ti-date-table-td-border-radius);
-      }
-    }
-
-    &.disabled {
-      div {
-        background-color: var(--ti-date-picker-disabled-bg-color);
-        opacity: 1;
-        cursor: not-allowed;
-        color: var(--ti-date-picker-disabled-text-color);
-      }
-    }
-
-    &.in-range {
-      div {
-        background-color: var(--ti-date-picker-range-bg-color);
-
-        &:hover {
-          background-color: var(--ti-date-picker-range-hover-bg-color);
-        }
-      }
-
-      &.end-date:hover,
-      &.start-date:hover {
-        span {
-          background-color: var(--ti-date-picker-current-select-bg-color);
-        }
-      }
-    }
-
-    &.available {
-      padding: 0;
-    }
-
-    &.selected {
-      div {
-        margin-left: 5px;
-        margin-right: 5px;
-        background-color: var(--ti-date-table-td-range-bg-color);
-
-        &:hover {
-          background-color: var(--ti-date-table-td-range-bg-color);
-        }
-      }
-
-      span {
-        background-color: var(--ti-date-picker-current-select-bg-color);
-        color: var(--ti-date-table-td-nomal-text-color);
-        border: none;
-      }
-
-      &.available:hover span {
-        background-color: var(--ti-date-picker-current-select-bg-color);
-      }
-    }
-
-    &.week {
-      font-size: 80%;
-      color: var(--ti-date-picker-text-color);
-    }
-  }
-
-  th {
-    color: var(--ti-date-table-th-text-color);
-    font-weight: 400;
-  }
-}
-
-.@{month-table-prefix-cls} {
-  font-size: var(--ti-date-picker-font-size);
-  margin: -1px;
-  border-collapse: collapse;
-
-  td {
-    text-align: center;
-    padding: 16px 0;
-    cursor: pointer;
-
-    div {
-      height: 32px;
-      box-sizing: border-box;
-    }
-
-    &.today {
-      .cell {
-        color: var(--ti-month-table-td-text-bg-color);
-        font-weight: 700;
-      }
-
-      &.end-date,
-      &.start-date {
-        .cell {
-          color: var(--ti-month-table-td-date-text-color);
-        }
-      }
-    }
-
-    &.disabled {
-      .cell {
-        background-color: var(--ti-date-picker-disabled-bg-color);
-        cursor: not-allowed;
-        color: var(--ti-date-picker-disabled-text-color);
-
-        &:hover {
-          color: var(--ti-date-picker-disabled-text-color);
-        }
-      }
-    }
-
-    .cell {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      display: block;
-      color: var(--ti-date-picker-text-color);
-
-      &:hover {
-        background: var(--ti-date-picker-hover-bg-color);
-      }
-    }
-
-    &.in-range {
-      div,
-      div:hover {
-        background-color: var(--ti-month-table-td-range-bg-color);
-      }
-    }
-
-    &.end-date,
-    &.start-date {
-      div {
-        color: var(--ti-month-table-td-date-text-color);
-      }
-
-      .cell {
-        color: var(--ti-month-table-td-date-text-color);
-        background-color: var(--ti-month-table-td-text-bg-color);
-      }
-    }
-
-    &:not(.in-range) {
-      padding: 16px 4px;
-
-      div {
-        height: auto;
-        padding: 0;
-      }
-
-      .cell {
-        width: auto;
-        height: 32px;
-        line-height: 32px;
-        border-radius: 2px;
-      }
-    }
-
-    &.current:not(.disabled) .cell {
-      &,
-      &:hover {
-        color: var(--ti-date-table-td-nomal-text-color);
-        background: var(--ti-month-table-td-text-bg-color);
-      }
-    }
-  }
-}
-
-.@{year-table-prefix-cls} {
-  font-size: var(--ti-date-picker-font-size);
-  margin: -1px;
-  border-collapse: collapse;
-
-  td {
-    text-align: center;
-    cursor: pointer;
-
-    &.today {
-      .cell {
-        color: var(--ti-year-table-td-text-color);
-        font-weight: 700;
-      }
-    }
-
-    &.disabled {
-      .cell {
-        background-color: var(--ti-date-picker-disabled-bg-color);
-        cursor: not-allowed;
-        color: var(--ti-date-picker-disabled-text-color);
-
-        &:hover {
-          color: var(--ti-date-picker-disabled-text-color);
-        }
-      }
-    }
-
-    .cell {
-      width: 48px;
-      height: 24px;
-      line-height: 24px;
-      display: block;
-      color: var(--ti-date-picker-text-color);
-      margin: 0 auto;
-      border-radius: 2px;
-      &:hover {
-        background: var(--ti-date-picker-hover-bg-color);
-      }
-    }
-
-    &.current:not(.disabled) .cell {
-      color: var(--ti-date-table-td-nomal-text-color);
-      background: var(--ti-date-picker-current-select-bg-color);
-    }
-  }
-
-  td.available {
-    padding: 16px 3px;
-  }
-
-  .@{css-prefix}icon {
-    color: var(--ti-year-table-td-icon-color);
-  }
-}
-
-.@{time-spinner-prefix-cls} {
-  &__wrapper {
-    max-height: 190px;
-    overflow: auto;
-    display: inline-block;
-    width: 50%;
-    vertical-align: top;
-    position: relative;
-
-    .@{scrollbar-prefix-cls}__wrap:not(.@{scrollbar-prefix-cls}__wrap--hidden-default) {
-      padding-bottom: 15px;
-    }
-
-    &.is-arrow {
-      box-sizing: border-box;
-      text-align: center;
-      overflow: hidden;
-
-      .@{time-spinner-prefix-cls}__list {
-        transform: translateY(-32px);
-      }
-
-      .@{time-spinner-prefix-cls}__item:hover:not(.disabled):not(.active) {
-        background: var(--ti-date-picker-bg-color);
-        cursor: default;
-      }
-    }
-
-    .@{time-spinner-prefix-cls}__list {
-      transform: translateY(-6px);
-    }
-
-    &:last-child {
-      .@{time-spinner-prefix-cls}__list {
-        border-right: 0;
-      }
-    }
-  }
-
-  &__arrow {
-    font-size: var(--ti-date-picker-font-size);
-    color: var(--ti-time-spinner-arrow-text-color);
-    height: 30px;
-    line-height: 30px;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    z-index: 1;
-    text-align: center;
-    cursor: pointer;
-
-    .@{svg-prefix-cls} {
-      fill: var(--ti-time-spinner-arrow-text-color);
-    }
-
-    &:hover .@{svg-prefix-cls} {
-      fill: var(--ti-time-spinner-arrow-hover-text-color);
-    }
-
-    &.@{css-prefix}icon-arrow-up {
-      top: 10px;
-    }
-
-    &.@{css-prefix}icon-arrow-down {
-      bottom: 10px;
-    }
-
-    &.@{input-prefix-cls} {
-      width: 70%;
-
-      .@{input-prefix-cls}__inner {
-        padding: 0;
-        text-align: center;
-      }
-    }
-  }
-
-  &__list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
-    border-right: 1px solid var(--ti-time-spinner-list-border-color);
-
-    &::after,
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 80px;
-    }
-  }
-
-  &__item {
-    font-size: var(--ti-date-picker-font-size);
-    color: var(--ti-date-picker-text-color);
-    height: 32px;
-    line-height: 32px;
-
-    &:hover:not(.disabled):not(.active) {
-      background: var(--ti-date-picker-selected-bg-color);
-      cursor: pointer;
-    }
-
-    &.active:not(.disabled) {
-      color: var(--ti-time-spinner-item-active-text-color);
-      font-weight: var(--ti-time-spinner-item-font-weight);
-      background-color: var(--ti-time-spinner-item-bg-color);
-    }
-
-    &.disabled {
-      color: var(--ti-date-picker-disabled-text-color);
-      cursor: not-allowed;
-    }
-  }
-
-  &.has-seconds .@{time-spinner-prefix-cls}__wrapper {
-    width: 33.3%;
-  }
-}
 
 .@{date-editor-prefix-cls} {
   .component-css-vars-picker();
@@ -731,514 +229,6 @@
   }
 }
 
-.@{picker-panel-prefix-cls} {
-  .component-css-vars-picker();
-
-  color: var(--ti-date-picker-text-color);
-  font-size: var(--ti-date-picker-font-size);
-  border: 1px solid var(--ti-picker-panel-border-color);
-  box-shadow: var(--ti-picker-panel-box-shadow);
-  background: var(--ti-date-picker-bg-color);
-  border-radius: var(--ti-common-border-radius-normal);
-  line-height: var(--ti-picker-panel-line-height);
-  margin: var(--ti-base-dropdown-gap) 0;
-
-  &__body-wrapper::after,
-  &__body::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  &__body {
-    padding-bottom: 8px;
-  }
-
-  &__content {
-    position: relative;
-  }
-
-  &__footer {
-    border-top: 1px solid var(--ti-date-picker-border-color);
-    padding: 6px 16px;
-    background-color: var(--ti-date-picker-bg-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .@{button-prefix-cls} {
-      min-width: 60px;
-
-      &:only-child {
-        float: right;
-      }
-    }
-
-    .@{button-prefix-cls}--text {
-      text-align: left;
-    }
-  }
-
-  &__shortcut {
-    display: block;
-    width: 100%;
-    border: 0;
-    background-color: transparent;
-    line-height: 28px;
-    font-size: var(--ti-picker-panel-shortcut-font-size);
-    color: var(--ti-date-picker-text-color);
-    padding-left: 12px;
-    text-align: left;
-    outline: 0;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--ti-date-picker-hover-bg-color);
-    }
-
-    &.active {
-      background-color: var(--ti-date-picker-selected-bg-color);
-    }
-  }
-
-  &__btn {
-    color: var(--ti-date-picker-text-color);
-    border: 1px solid var(--ti-date-picker-border-color);
-    font-size: var(--ti-date-picker-font-size);
-    line-height: 24px;
-    border-radius: var(--ti-date-picker-border-radius);
-    padding: 0 20px;
-    cursor: pointer;
-    outline: 0;
-    background-color: transparent;
-
-    [disabled] {
-      color: var(--ti-date-picker-disabled-text-color);
-      cursor: not-allowed;
-    }
-  }
-
-  &__icon-btn {
-    font-size: var(--ti-date-picker-font-size);
-    line-height: 30px;
-    fill: var(--ti-picker-panel-icon-color-btn);
-    border: 0;
-    background: 0 0;
-    cursor: pointer;
-    outline: 0;
-
-    &:hover {
-      fill: var(--ti-picker-panel-icon-color-btn-hover);
-    }
-
-    &.is-disabled {
-      color: var(--ti-picker-panel-icon-color-btn-disabled);
-
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &__link-btn {
-    vertical-align: middle;
-  }
-
-  [slot='sidebar'],
-  &__sidebar {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 110px;
-    border-right: 1px solid var(--ti-date-picker-border-color);
-    box-sizing: border-box;
-    padding-top: 6px;
-    background-color: var(--ti-date-picker-bg-color);
-    overflow: auto;
-
-    & + .@{picker-panel-prefix-cls}__body {
-      margin-left: 110px;
-    }
-  }
-
-  &__timezone {
-    margin-bottom: 10px;
-
-    .@{picker-panel-prefix-cls}__tzlist {
-      z-index: 10;
-      overflow-y: hidden;
-
-      &-li {
-        height: 30px;
-        line-height: 30px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding: 0 10px;
-        border: 1px solid #f4f0f0;
-        cursor: pointer;
-      }
-
-      .@{css-prefix}popup {
-        position: absolute;
-        width: 238px;
-        bottom: 77px;
-        max-height: 260px;
-        box-shadow: 0 -1px 2px 0 rgba(53, 29, 29, 0.5);
-      }
-    }
-
-    .@{input-prefix-cls} {
-      position: relative;
-    }
-  }
-}
-
-.@{date-picker-prefix-cls} {
-  .component-css-vars-picker();
-
-  width: var(--ti-date-picker-width);
-
-  &.has-sidebar.has-time {
-    width: 434px;
-  }
-
-  &.has-sidebar {
-    width: 398px;
-  }
-
-  &.has-time {
-    .@{picker-panel-prefix-cls}__body-wrapper {
-      position: relative;
-    }
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  &__editor-wrap {
-    position: relative;
-    display: table-cell;
-    padding: 0 5px;
-  }
-
-  &__time-header {
-    position: relative;
-    border-bottom: 1px solid var(--ti-date-picker-border-color);
-    font-size: var(--ti-date-picker-font-size);
-    padding: 8px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  &__header {
-    margin: 12px;
-    text-align: center;
-  }
-
-  &__header--bordered {
-    margin-bottom: 0;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--ti-date-picker-border-color);
-
-    & + .@{picker-panel-prefix-cls}__content {
-      margin-top: 0;
-    }
-  }
-
-  &__header-label {
-    font-size: var(--ti-date-picker-font-size);
-    font-weight: 700;
-    padding: 0 4px;
-    text-align: center;
-    cursor: pointer;
-    color: var(--ti-date-picker-text-color);
-    vertical-align: middle;
-
-    &.active,
-    &:hover {
-      color: var(--ti-date-picker-header-label-hover-text-color);
-    }
-  }
-
-  &__prev-btn {
-    float: left;
-  }
-
-  &__next-btn {
-    float: right;
-  }
-
-  &__time-wrap {
-    padding: 10px;
-    text-align: center;
-  }
-
-  &__time-label {
-    float: left;
-    cursor: pointer;
-    line-height: 30px;
-    margin-left: 10px;
-  }
-}
-
-.@{date-range-picker-prefix-cls} {
-  width: 558px;
-
-  &.has-sidebar {
-    width: 668px;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  .@{picker-panel-prefix-cls}__body {
-    min-width: var(--ti-date-range-picker-body-min-width);
-  }
-
-  .@{picker-panel-prefix-cls}__content {
-    margin: 0;
-  }
-
-  &__header {
-    position: relative;
-    text-align: center;
-    height: 28px;
-
-    [class*='arrow-left'] {
-      float: left;
-    }
-
-    [class*='arrow-right'] {
-      float: right;
-    }
-
-    div {
-      font-size: var(--ti-date-range-picker-header-font-size);
-      font-weight: 500;
-      margin-right: 50px;
-    }
-  }
-
-  &__content {
-    float: left;
-    width: 50%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 16px;
-
-    &.is-left {
-      border-right: 1px solid var(--ti-date-picker-border-color);
-    }
-
-    .@{date-range-picker-prefix-cls}__header div {
-      margin-left: 50px;
-      margin-right: 50px;
-    }
-  }
-
-  &__editors-wrap {
-    box-sizing: border-box;
-    display: table-cell;
-
-    &.is-right {
-      text-align: right;
-    }
-  }
-
-  &__time-header {
-    position: relative;
-    border-bottom: 1px solid var(--ti-date-picker-border-color);
-    font-size: var(--ti-date-picker-font-size);
-    padding: 8px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-
-    & > .@{css-prefix}icon-arrow-right {
-      font-size: var(--ti-common-font-size-4);
-      vertical-align: middle;
-      display: table-cell;
-      color: var(--ti-date-range-picker-time-header-icon-color);
-    }
-  }
-
-  &__time-picker-wrap {
-    position: relative;
-    display: table-cell;
-    padding: 0 5px;
-
-    .@{picker-panel-prefix-cls} {
-      position: absolute;
-      top: 13px;
-      right: 0;
-      z-index: 1;
-      background: var(--ti-date-picker-bg-color);
-    }
-  }
-}
-
-.@{time-range-picker-prefix-cls} {
-  width: 354px;
-  overflow: visible;
-
-  &__content {
-    position: relative;
-    text-align: center;
-    padding: 10px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  &__cell {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 4px 7px 7px;
-    width: 50%;
-  }
-
-  &__header {
-    margin-bottom: 5px;
-    text-align: center;
-    font-size: var(--ti-time-range-picker-header-font-size);
-  }
-
-  &__body {
-    border-radius: var(--ti-date-picker-border-radius);
-    border: 1px solid var(--ti-date-picker-border-color);
-  }
-}
-
-.@{time-panel-prefix-cls} {
-  .component-css-vars-picker();
-
-  margin: 5px 0;
-  border: 1px solid var(--ti-time-panel-border-color);
-  background-color: var(--ti-date-picker-bg-color);
-  box-shadow: var(--ti-time-panel-box-shadow);
-  border-radius: var(--ti-date-picker-border-radius);
-  position: absolute;
-  width: 180px;
-  left: 0;
-  z-index: 1000;
-  box-sizing: content-box;
-  .user-select(none);
-
-  &__content {
-    font-size: 0;
-    position: relative;
-    overflow: hidden;
-
-    &:after,
-    &:before {
-      display: var(--ti-time-panel-content-split-line-display);
-      content: '';
-      top: 50%;
-      position: absolute;
-      margin-top: -19px;
-      height: 32px;
-      z-index: -1;
-      left: 0;
-      right: 0;
-      box-sizing: border-box;
-      padding-top: 6px;
-      text-align: left;
-      border-top: 1px solid var(--ti-date-picker-border-color);
-      border-bottom: 1px solid var(--ti-date-picker-border-color);
-    }
-
-    &:after {
-      left: 50%;
-      margin-left: 12%;
-      margin-right: 12%;
-    }
-
-    &:before {
-      padding-left: 50%;
-      margin-right: 12%;
-      margin-left: 12%;
-    }
-
-    &.has-seconds {
-      &:after {
-        left: calc(100% / 3 * 2);
-      }
-
-      &:before {
-        padding-left: calc(100% / 3);
-      }
-    }
-  }
-
-  &__footer {
-    border-top: 1px solid var(--ti-date-picker-border-color);
-    padding: 4px;
-    height: 36px;
-    height: var(--ti-time-panel-footer-height, 36px);
-    line-height: 25px;
-    text-align: right;
-    box-sizing: border-box;
-  }
-
-  &__btn {
-    min-width: var(--ti-time-panel-btn-min-width);
-    border: none;
-    line-height: var(--ti-time-panel-btn-height);
-    padding: var(--ti-time-panel-btn-padding-vertical) var(--ti-time-panel-btn-padding-horizontal);
-    margin: 0 5px;
-    cursor: pointer;
-    background-color: var(--ti-time-panel-btn-bg-color);
-    outline: 0;
-    font-size: 12px;
-    color: var(--ti-time-panel-btn-text-color);
-    border-radius: var(--ti-time-panel-btn-border-radius);
-    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &.cancel {
-      display: var(--ti-time-panel-btn-cancel-display);
-    }
-
-    &.confirm {
-      font-weight: var(--ti-time-panel-btn-font-weight);
-      color: var(--ti-time-panel-btn-confirm-text-color);
-
-      &:hover {
-        background-color: var(--ti-time-panel-btn-confirm-hover-bg-color);
-      }
-    }
-  }
-}
-
-.@{time-select-prefix-cls} {
-  & &__item {
-    color: var(--ti-date-picker-text-color);
-    font-size: var(--ti-common-font-size-base);
-    padding: 0 8px;
-    line-height: var(--ti-base-size-height-normal);
-    height: var(--ti-base-size-height-normal);
-
-    &:not(.disabled):hover {
-      background-color: var(--ti-date-picker-hover-bg-color);
-      cursor: pointer;
-    }
-
-    &.selected:not(.disabled) {
-      background-color: var(--ti-date-picker-selected-bg-color);
-    }
-
-    &.disabled {
-      color: var(--ti-date-picker-disabled-text-color);
-      cursor: not-allowed;
-    }
-  }
-}
-
 .@{scrollbar-prefix-cls} {
   overflow: hidden;
   position: relative;
diff --git a/packages/theme/src/picker/vars.less b/packages/theme/src/picker/vars.less
index 702b9815e..71e7988bc 100644
--- a/packages/theme/src/picker/vars.less
+++ b/packages/theme/src/picker/vars.less
@@ -11,85 +11,6 @@
 */
 
 .component-css-vars-picker() {
-  --ti-date-picker-width: 280px;
-  --ti-date-picker-font-size: var(--ti-common-font-size-base);
-  --ti-date-picker-text-color: var(--ti-base-color-info-normal);
-  --ti-date-picker-bg-color: var(--ti-base-color-light);
-  --ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
-  --ti-date-picker-border-color: var(--ti-common-color-line-dividing);
-  --ti-date-picker-hover-bg-color: var(--ti-base-color-brand-2);
-  --ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled);
-  --ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-date-picker-selected-bg-color: #f2f2f3;
-  --ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
-  --ti-date-picker-current-select-bg-color: var(--ti-base-color-brand-6);
-  --ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
-  --ti-date-picker-current-border-radius: 0;
-  --ti-date-picker-range-bg-color: var(--ti-base-color-brand-2);
-  --ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2);
-
-  --ti-date-table-td-width: 36px;
-  --ti-date-table-td-height: 34px;
-  --ti-date-table-td-padding-vertical: 4px;
-  --ti-date-table-td-padding-horizontal: 0;
-  --ti-date-table-td-span-width: 36px;
-  --ti-date-table-td-span-height: 24px;
-  --ti-date-table-th-text-color: var(--ti-base-color-common-2);
-  --ti-date-table-td-border-radius: 0;
-  --ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2);
-  --ti-date-table-td-nomal-text-color: var(--ti-base-color-light);
-  --ti-date-table-td-range-bg-color: #f2f6fc;
-  --ti-date-table-td-today-border-color: var(--ti-base-color-brand-6);
-  --ti-date-table-td-today-text-color: var(--ti-date-picker-text-color);
-  --ti-date-table-week-current-bg-color: var(--ti-base-color-brand-2);
-  --ti-date-table-week-current-hover-bg-color: var(--ti-base-color-brand-3);
-
-  --ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7);
-  --ti-month-table-td-range-bg-color: #f2f6fc;
-  --ti-month-table-td-date-text-color: var(--ti-base-color-light);
-  --ti-month-table-td-date-border-radius: 24px;
-
-  --ti-year-table-td-text-color: var(--ti-base-color-brand-7);
-  --ti-year-table-td-icon-color: #303133;
-
-  --ti-time-spinner-arrow-text-color: #909399;
-  --ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7);
-  --ti-time-spinner-item-active-text-color: #303133;
-  --ti-time-spinner-item-font-weight: 700;
-  --ti-time-spinner-item-bg-color: transparent;
-  --ti-time-spinner-list-border-color: transparent;
-
-  --ti-picker-panel-line-height: var(--ti-base-size-height-minor);
-  --ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
-  --ti-picker-panel-icon-color-btn: var(--ti-base-color-common-2);
-  --ti-picker-panel-icon-color-btn-hover: var(--ti-base-color-brand-7);
-  --ti-picker-panel-icon-color-btn-disabled: var(--ti-base-color-bg-5);
-  --ti-picker-panel-border-color: rgba(0, 0, 0, 0.15);
-  --ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
-
-  --ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7);
-
-  --ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
-  --ti-date-range-picker-time-header-icon-color: #303133;
-
-  --ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
-  --ti-time-panel-footer-height: 36px;
-  --ti-time-panel-btn-text-color: #303133;
-  --ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-7);
   --ti-range-separator-text-color: #303133;
-
-  --ti-time-panel-border-color: var(--ti-date-picker-border-color);
-  --ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  --ti-time-panel-content-split-line-display: block;
-  --ti-time-panel-btn-cancel-display: inline-block;
-  --ti-time-panel-btn-bg-color: transparent;
-  --ti-time-panel-btn-padding-vertical: 0;
-  --ti-time-panel-btn-padding-horizontal: 5px;
-  --ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal);
-  --ti-time-panel-btn-height: 28px;
-  --ti-time-panel-btn-min-width: inherit;
-  --ti-time-panel-btn-font-weight: 800;
-  --ti-time-panel-btn-confirm-hover-bg-color: transparent;
-
   --ti-date-editor-input-icon-color-fill: #575d6c;
 }
diff --git a/packages/theme/src/pop-upload/vars.less b/packages/theme/src/pop-upload/vars.less
index 0ca097201..964a61913 100644
--- a/packages/theme/src/pop-upload/vars.less
+++ b/packages/theme/src/pop-upload/vars.less
@@ -12,9 +12,9 @@
 
 .component-css-vars-pop-upload() {
   --ti-popupload-font-size: var(--ti-common-font-size-base);
-  --ti-popupload-dialog-table-border-color: var(--ti-base-color-border);
-  --ti-popupload-dialog-table-header-height: var(--ti-base-size-height-small);
-  --ti-popupload-dialog-table-header-text-color: var(--ti-base-color-info-normal);
+  --ti-popupload-dialog-table-border-color: var(--ti-common-color-border);
+  --ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small);
+  --ti-popupload-dialog-table-header-text-color: var(--ti-common-color-info-normal);
   --ti-popupload-dialog-table-header-bg-color: #f1f1f1;
   --ti-popupload-dialog-table-icon-color: var(--ti-base-color-brand-6);
   --ti-popupload-dialog-table-icon-color-hover: var(--ti-base-color-bg-8);
diff --git a/packages/theme/src/popeditor/vars.less b/packages/theme/src/popeditor/vars.less
index 5d1597145..2ac30c538 100644
--- a/packages/theme/src/popeditor/vars.less
+++ b/packages/theme/src/popeditor/vars.less
@@ -11,11 +11,11 @@
 */
 
 .component-css-vars-popeditor() {
-  --ti-popeditor-border-color: var(--ti-base-color-border);
+  --ti-popeditor-border-color: var(--ti-common-color-border);
   --ti-popeditor-icon-color: var(--ti-base-color-brand-6);
-  --ti-popeditor-icon-color-disabled: var(--ti-base-color-placeholder);
+  --ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder);
   --ti-popeditor-icon-color-hover: var(--ti-base-color-brand-5);
-  --ti-popeditor-tabs-text-color: var(--ti-base-color-info-normal);
+  --ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal);
   --ti-popeditor-tabs-selected-text-color: var(--ti-base-color-brand-6);
   --ti-popeditor-tabs-li-height: var(--ti-common-size-10x);
 }
diff --git a/packages/theme/src/popover/vars.less b/packages/theme/src/popover/vars.less
index 27e2d2928..19f20f60c 100644
--- a/packages/theme/src/popover/vars.less
+++ b/packages/theme/src/popover/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-popover() {
-  --ti-popover-bg-color: var(--ti-base-color-light);
+  --ti-popover-bg-color: var(--ti-common-color-light);
   --ti-popover-text-color: #606266;
   --ti-popover-border-color: #d9d9d9;
   --ti-popover-border-radius: var(--ti-common-border-radius-1);
@@ -21,7 +21,7 @@
   --ti-popover-arrow-border-width: 6px;
   --ti-popover-placement-margin-vertical: var(--ti-common-space-3x);
   --ti-popover-placement-margin-horizontal: var(--ti-common-space-3x);
-  --ti-popover-placement-arrow-after-border-color: var(--ti-base-color-light);
+  --ti-popover-placement-arrow-after-border-color: var(--ti-common-color-light);
   --ti-popover-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   --ti-popover-arrow-border-color: var(--ti-popover-border-color);
   --ti-popover-padding-vertical: 11px;
diff --git a/packages/theme/src/progress/vars.less b/packages/theme/src/progress/vars.less
index a463e7fb1..09853b6c7 100644
--- a/packages/theme/src/progress/vars.less
+++ b/packages/theme/src/progress/vars.less
@@ -11,13 +11,13 @@
 */
 
 .component-css-vars-progress() {
-  --ti-progress-text-color: var(--ti-base-color-info-normal);
+  --ti-progress-text-color: var(--ti-common-color-info-normal);
   --ti-progress-text-font-size: var(--ti-common-font-size-base);
   --ti-progress-bar-border-radius: 100px;
   --ti-progress-bar-outer-bg-color: var(--ti-base-color-bg-5);
   --ti-progress-bar-inner-bg-color: var(--ti-base-color-brand-6);
-  --ti-progress-bar-inner-text-color: var(--ti-base-color-light);
-  --ti-progress-success-bg-color: var(--ti-base-color-success-normal);
-  --ti-progress-warning-bg-color: var(--ti-base-color-warning-normal);
+  --ti-progress-bar-inner-text-color: var(--ti-common-color-light);
+  --ti-progress-success-bg-color: var(--ti-common-color-success-normal);
+  --ti-progress-warning-bg-color: var(--ti-common-color-warning-normal);
   --ti-progress-exception-bg-color: var(--ti-base-color-bg-8);
 }
diff --git a/packages/theme/src/radio-button/vars.less b/packages/theme/src/radio-button/vars.less
index c5aa7b69b..b64b33be4 100644
--- a/packages/theme/src/radio-button/vars.less
+++ b/packages/theme/src/radio-button/vars.less
@@ -11,19 +11,19 @@
 */
 
 .component-css-vars-radio-button() {
-  --ti-radio-button-text-color: var(--ti-base-color-info-normal);
-  --ti-radio-button-hover-text-color: var(--ti-base-color-light);
-  --ti-radio-button-border-color: var(--ti-base-color-border);
+  --ti-radio-button-text-color: var(--ti-common-color-info-normal);
+  --ti-radio-button-hover-text-color: var(--ti-common-color-light);
+  --ti-radio-button-border-color: var(--ti-common-color-border);
   --ti-radio-button-border-radius: var(--ti-common-border-radius-normal);
   --ti-radio-button-font-size: var(--ti-common-font-size-base);
-  --ti-radio-button-bg-color: var(--ti-base-color-light);
+  --ti-radio-button-bg-color: var(--ti-common-color-light);
   --ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6);
   --ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6);
   --ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6);
   --ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5);
   --ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5);
   --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5);
-  --ti-radio-button-disabled-text-color: var(--ti-base-color-placeholder);
+  --ti-radio-button-disabled-text-color: var(--ti-common-color-placeholder);
   --ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5);
   --ti-radio-button-medium-font-size: var(--ti-common-font-size-1);
 }
diff --git a/packages/theme/src/radio/vars.less b/packages/theme/src/radio/vars.less
index eee4fcaeb..1a36d67c8 100644
--- a/packages/theme/src/radio/vars.less
+++ b/packages/theme/src/radio/vars.less
@@ -11,26 +11,26 @@
 */
 
 .component-css-vars-radio() {
-  --ti-radio-text-color: var(--ti-base-color-info-normal);
+  --ti-radio-text-color: var(--ti-common-color-info-normal);
   --ti-radio-font-size: var(--ti-common-font-size-base);
   --ti-radio-bordered-height: var(--ti-common-size-10x);
   --ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal);
   --ti-radio-bordered-border-color: var(--ti-base-color-common-2);
   --ti-radio-input-disabled-border-color: var(--ti-base-color-common-1);
   --ti-radio-bordered-checked-border-color: var(--ti-base-color-brand-6);
-  --ti-radio-bordered-checked-background-color: var(--ti-base-color-light);
+  --ti-radio-bordered-checked-background-color: var(--ti-common-color-light);
   --ti-radio-bordered-hover-border-color: var(--ti-base-color-brand-6);
   --ti-radio-bordered-checked-hover-border-color: var(--ti-base-color-brand-6);
-  --ti-radio-bordered-active-border-color: var(--ti-base-color-primary-active);
+  --ti-radio-bordered-active-border-color: var(--ti-common-color-primary-active);
   --ti-radio-input-disabled-bg-color: var(--ti-base-color-bg-5);
   --ti-radio-input-checked-disabled-bg-color: var(--ti-base-color-bg-5);
   --ti-radio-input-checked-disabled-border-color: var(--ti-base-color-bg-5);
-  --ti-radio-input-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-radio-inner-bg-color: var(--ti-base-color-light);
+  --ti-radio-input-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-radio-inner-bg-color: var(--ti-common-color-light);
   --ti-radio-inner-checked-bg-color: var(--ti-base-color-brand-6);
   --ti-radio-inner-size: 8px;
   --ti-radio-inner-checked-disabled-bg-color: var(--ti-base-color-common-2);
-  --ti-radio-medium-height: var(--ti-base-size-height-small);
+  --ti-radio-medium-height: var(--ti-common-size-height-small);
   --ti-radio-medium-inner-height: 14px;
   --ti-radio-medium-inner-width: 14px;
   --ti-radio-small-height: var(--ti-common-size-8x);
diff --git a/packages/theme/src/roles/vars.less b/packages/theme/src/roles/vars.less
index dabad3185..d4bad8753 100644
--- a/packages/theme/src/roles/vars.less
+++ b/packages/theme/src/roles/vars.less
@@ -11,10 +11,10 @@
 */
 
 .component-css-vars-roles() {
-  --ti-roles-poplist-item-height: var(--ti-base-size-height-minor);
-  --ti-roles-poplist-item-text-color: var(--ti-base-color-info-normal);
+  --ti-roles-poplist-item-height: var(--ti-common-size-height-minor);
+  --ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal);
   --ti-roles-poplist-item-font-size: var(--ti-common-font-size-base);
-  --ti-roles-poplist-item-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-roles-poplist-item-selected-bg-color: var(--ti-base-color-selected-background);
-  --ti-roles-poplist-item-selected-text-color: var(--ti-base-color-selected-text-color);
+  --ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
+  --ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
 }
diff --git a/packages/theme/src/scroll-text/vars.less b/packages/theme/src/scroll-text/vars.less
index 0d76e26f0..0d55957a9 100644
--- a/packages/theme/src/scroll-text/vars.less
+++ b/packages/theme/src/scroll-text/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-scroll-text() {
-  --ti-scroll-text-height: var(--ti-base-size-height-small);
+  --ti-scroll-text-height: var(--ti-common-size-height-small);
   --ti-scroll-text-bg-color: #f1f1f1;
   --ti-scroll-text-margin-vertical: 0;
   --ti-scroll-text-margin-horizontal: auto;
diff --git a/packages/theme/src/search/index.less b/packages/theme/src/search/index.less
index a1fcbe6aa..fe2779f0a 100644
--- a/packages/theme/src/search/index.less
+++ b/packages/theme/src/search/index.less
@@ -117,7 +117,7 @@
     border: 1px solid var(--ti-search-input-border-color);
     border-radius: var(--ti-search-selector-border-radius);
     font-size: var(--ti-search-font-size);
-    box-shadow: var(--ti-base-box-shadow);
+    box-shadow: var(--ti-common-box-shadow);
     background: var(--ti-search-selector-bg-color);
     color: var(--ti-search-selector-text-color);
     margin-top: 2px;
diff --git a/packages/theme/src/search/vars.less b/packages/theme/src/search/vars.less
index 86249743b..a4a3192d7 100644
--- a/packages/theme/src/search/vars.less
+++ b/packages/theme/src/search/vars.less
@@ -12,23 +12,23 @@
 
 .component-css-vars-search() {
   --ti-search-font-size: var(--ti-common-font-size-base);
-  --ti-search-input-height: var(--ti-base-size-height-normal);
-  --ti-search-input-btn-width: var(--ti-base-size-height-small);
-  --ti-search-input-btn-line-height: var(--ti-base-size-height-small);
-  --ti-search-input-text-color: var(--ti-base-color-info-normal);
-  --ti-search-input-bg-color: var(--ti-base-color-light);
+  --ti-search-input-height: var(--ti-common-size-height-normal);
+  --ti-search-input-btn-width: var(--ti-common-size-height-small);
+  --ti-search-input-btn-line-height: var(--ti-common-size-height-small);
+  --ti-search-input-text-color: var(--ti-common-color-info-normal);
+  --ti-search-input-bg-color: var(--ti-common-color-light);
   --ti-search-input-btn-text-color: var(--ti-base-color-common-5);
   --ti-search-input-btn-hover-border-color: var(--ti-base-color-brand-5);
   --ti-search-input-btn-font-size: var(--ti-common-font-size-1);
-  --ti-search-input-border-color: var(--ti-base-color-border);
+  --ti-search-input-border-color: var(--ti-common-color-border);
   --ti-search-icon-border-color: #dbdbdb;
   --ti-search-icon-color: #c4c4c4;
-  --ti-search-size-height-normal: var(--ti-base-size-height-normal);
-  --ti-search-size-height-small: var(--ti-base-size-height-small);
-  --ti-search-selector-text-color: var(--ti-base-color-info-normal);
-  --ti-search-line-hover-border-color: var(--ti-base-color-border-hover);
-  --ti-search-list-hover-bg-color: var(--ti-base-color-selected-background);
+  --ti-search-size-height-normal: var(--ti-common-size-height-normal);
+  --ti-search-size-height-small: var(--ti-common-size-height-small);
+  --ti-search-selector-text-color: var(--ti-common-color-info-normal);
+  --ti-search-line-hover-border-color: var(--ti-common-color-border-hover);
+  --ti-search-list-hover-bg-color: var(--ti-common-color-selected-background);
   --ti-search-selector-border-radius: var(--ti-common-border-radius-normal);
-  --ti-search-selector-bg-color: var(--ti-base-color-light);
-  --ti-search-selector-list-height: var(--ti-base-size-height-normal);
+  --ti-search-selector-bg-color: var(--ti-common-color-light);
+  --ti-search-selector-list-height: var(--ti-common-size-height-normal);
 }
diff --git a/packages/theme/src/select-dropdown/index.less b/packages/theme/src/select-dropdown/index.less
index 79eb39102..a1c89b4d6 100644
--- a/packages/theme/src/select-dropdown/index.less
+++ b/packages/theme/src/select-dropdown/index.less
@@ -26,8 +26,8 @@
   border: 1px solid var(--ti-select-dropdown-border-color);
   border-radius: var(--ti-select-dropdown-border-radius);
   background-color: var(--ti-select-dropdown-bg-color);
-  box-shadow: var(--ti-base-box-shadow);
-  margin-top: var(--ti-base-dropdown-gap);
+  box-shadow: var(--ti-common-box-shadow);
+  margin-top: var(--ti-common-dropdown-gap);
   box-sizing: border-box;
 
   .@{tree-prefix-cls} {
@@ -36,7 +36,7 @@
   }
 
   &.@{popper-prefix-cls} {
-    margin-top: var(--ti-base-dropdown-gap);
+    margin-top: var(--ti-common-dropdown-gap);
   }
 
   & .@{scrollbar-prefix-cls}.is-empty &__list {
@@ -87,7 +87,8 @@
     list-style: none;
     margin: 0;
     box-sizing: border-box;
-    padding: var(--ti-select-dropdown-list-padding-top) var(--ti-select-dropdown-list-padding-horizontal) var(--ti-select-dropdown-list-padding-bottom);
+    padding: var(--ti-select-dropdown-list-padding-top) var(--ti-select-dropdown-list-padding-horizontal)
+      var(--ti-select-dropdown-list-padding-bottom);
     text-align: left;
   }
 
diff --git a/packages/theme/src/select-dropdown/vars.less b/packages/theme/src/select-dropdown/vars.less
index 0d2e2c3e0..6958916b4 100644
--- a/packages/theme/src/select-dropdown/vars.less
+++ b/packages/theme/src/select-dropdown/vars.less
@@ -13,8 +13,8 @@
 .component-css-vars-select-dropdown() {
   --ti-select-dropdown-border-color: transparent;
   --ti-select-dropdown-border-radius: var(--ti-common-border-radius-normal);
-  --ti-select-dropdown-bg-color: var(--ti-base-color-light);
-  --ti-select-dropdown-empty-text-color: var(--ti-base-color-placeholder);
+  --ti-select-dropdown-bg-color: var(--ti-common-color-light);
+  --ti-select-dropdown-empty-text-color: var(--ti-common-color-placeholder);
   --ti-select-dropdown-empty-font-size: var(--ti-common-font-size-1);
   --ti-select-dropdown-list-padding-top: 0;
   --ti-select-dropdown-list-padding-horizontal: 0;
diff --git a/packages/theme/src/select/vars.less b/packages/theme/src/select/vars.less
index 75de5c1b0..e41de236e 100644
--- a/packages/theme/src/select/vars.less
+++ b/packages/theme/src/select/vars.less
@@ -18,10 +18,10 @@
   --ti-select-input-caret-hover-text-color: var(--ti-base-color-brand-7);
   --ti-select-input-caret-font-size: var(--ti-common-font-size-1);
   --ti-select-input-caret-close-text-color: var(--ti-base-color-bg-5);
-  --ti-select-input-caret-close-hover-text-color: var(--ti-base-color-placeholder);
-  --ti-select-input-disabled-caret-text-color: var(--ti-base-color-border);
+  --ti-select-input-caret-close-hover-text-color: var(--ti-common-color-placeholder);
+  --ti-select-input-disabled-caret-text-color: var(--ti-common-color-border);
   --ti-select-input-disabled-hover-border-color: #e4e7ed;
-  --ti-select-input-mini-height: var(--ti-base-size-height-mini);
-  --ti-select-input-small-height: var(--ti-base-size-height-small);
-  --ti-select-input-medium-height: var(--ti-base-size-height-medium);
+  --ti-select-input-mini-height: var(--ti-common-size-height-mini);
+  --ti-select-input-small-height: var(--ti-common-size-height-small);
+  --ti-select-input-medium-height: var(--ti-common-size-height-medium);
 }
diff --git a/packages/theme/src/selector/index.less b/packages/theme/src/selector/index.less
index edcac9f37..04e77202d 100644
--- a/packages/theme/src/selector/index.less
+++ b/packages/theme/src/selector/index.less
@@ -21,7 +21,7 @@
   border: 1px solid var(--ti-selector-border-color);
   border-radius: var(--ti-selector-border-radius);
   font-size: var(--ti-selector-font-size);
-  box-shadow: var(--ti-base-box-shadow);
+  box-shadow: var(--ti-common-box-shadow);
   background: var(--ti-selector-bg-color);
   color: var(--ti-selector-text-color);
   margin-top: 2px;
diff --git a/packages/theme/src/selector/vars.less b/packages/theme/src/selector/vars.less
index 8406fa90b..fbc705867 100644
--- a/packages/theme/src/selector/vars.less
+++ b/packages/theme/src/selector/vars.less
@@ -11,17 +11,17 @@
 */
 
 .component-css-vars-selector() {
-  --ti-selector-border-color: var(--ti-base-color-border);
+  --ti-selector-border-color: var(--ti-common-color-border);
   --ti-selector-border-radius: var(--ti-common-border-radius-normal);
   --ti-selector-font-size: var(--ti-common-font-size-base);
-  --ti-selector-text-color: var(--ti-base-color-info-normal);
+  --ti-selector-text-color: var(--ti-common-color-info-normal);
   --ti-selector-icon-size: var(--ti-common-size-4x);
   --ti-selector-icon-color: var(--ti-base-color-bg-5);
   --ti-selector-selected-icon-color: var(--ti-base-color-brand-6);
   --ti-selector-icon-hover-text-color: var(--ti-base-color-brand-5);
-  --ti-selector-list-height: var(--ti-base-size-height-normal);
-  --ti-selector-bg-color: var(--ti-base-color-light);
-  --ti-selector-selected-text-color: var(--ti-base-color-placeholder);
-  --ti-selector-selected-hover-bg-color: var(--ti-base-color-selected-background);
-  --ti-selector-select-bg-color: var(--ti-base-color-hover-background);
+  --ti-selector-list-height: var(--ti-common-size-height-normal);
+  --ti-selector-bg-color: var(--ti-common-color-light);
+  --ti-selector-selected-text-color: var(--ti-common-color-placeholder);
+  --ti-selector-selected-hover-bg-color: var(--ti-common-color-selected-background);
+  --ti-selector-select-bg-color: var(--ti-common-color-hover-background);
 }
diff --git a/packages/theme/src/slide-bar/vars.less b/packages/theme/src/slide-bar/vars.less
index 26706e358..918725335 100644
--- a/packages/theme/src/slide-bar/vars.less
+++ b/packages/theme/src/slide-bar/vars.less
@@ -11,7 +11,7 @@
 */
 
 .component-css-vars-slide-bar() {
-  --ti-slider-progress-box-border-color: var(--ti-base-color-light);
+  --ti-slider-progress-box-border-color: var(--ti-common-color-light);
   --ti-slider-progress-box-hover-border-color: rgba(153, 153, 153, 0.7);
   --ti-slider-progress-box-arrow-normal-text-color: #f2f2f2;
   --ti-slider-progress-box-arrow-hover-text-color: #808080;
diff --git a/packages/theme/src/slider/vars.less b/packages/theme/src/slider/vars.less
index d3fa56175..920b9159c 100644
--- a/packages/theme/src/slider/vars.less
+++ b/packages/theme/src/slider/vars.less
@@ -40,12 +40,12 @@
   --ti-slider-handle-margin-horizontal: -8px;
   --ti-slider-handle-margin-bottom: 0;
 
-  --ti-slider-input-height: var(--ti-base-size-height-minor, 30px);
+  --ti-slider-input-height: var(--ti-common-size-height-minor, 30px);
   --ti-slider-input-width: var(--ti-common-size-10x);
   --ti-slider-input-border-radius: var(--ti-common-border-radius-normal, 2px);
-  --ti-slider-input-border-color: var(--ti-base-color-border, #d9d9d9);
-  --ti-slider-input-text-color: var(--ti-base-color-info-normal, #333);
-  --ti-slider-input-bg-color: var(--ti-base-color-light, #fff);
+  --ti-slider-input-border-color: var(--ti-common-color-border, #d9d9d9);
+  --ti-slider-input-text-color: var(--ti-common-color-info-normal, #333);
+  --ti-slider-input-bg-color: var(--ti-common-color-light, #fff);
 
   --ti-slider-tips-bg-color: var(--ti-base-color-common-6);
   --ti-slider-tips-border-color: var(--ti-base-color-common-6);
diff --git a/packages/theme/src/split/vars.less b/packages/theme/src/split/vars.less
index a231b9405..162fc119a 100644
--- a/packages/theme/src/split/vars.less
+++ b/packages/theme/src/split/vars.less
@@ -13,10 +13,10 @@
 .component-css-vars-split() {
   --ti-split-border-color: #d9d9d9;
   --ti-split-trigger-bg-color: #d9d9d9;
-  --ti-split-trigger-bar-bg-color: var(--ti-base-color-secondary);
+  --ti-split-trigger-bar-bg-color: var(--ti-common-color-secondary);
   --ti-split-trigger-hover-bg-color: var(--ti-split-trigger-bg-color);
   --ti-split-trigger-bar-hover-bg-color: var(--ti-split-trigger-bar-bg-color);
-  --ti-split-trigger-bar-con-bg-color: var(--ti-base-color-light);
+  --ti-split-trigger-bar-con-bg-color: var(--ti-common-color-light);
   --ti-split-trigger-size: 4px;
   --ti-split-trigger-bar-margin-left: 4px;
   --ti-split-trigger-bar-margin-top: 4px;
diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
index 8c51e2a25..e4a72f50d 100644
--- a/packages/theme/src/steps/vars.less
+++ b/packages/theme/src/steps/vars.less
@@ -14,24 +14,24 @@
   --ti-steps-advanced-active-bg-color: var(--ti-base-color-brand-6);
   --ti-steps-done-active-border-color: var(--ti-base-color-brand-6);
   --ti-steps-done-icon-fill-color: var(--ti-base-color-brand-6);
-  --ti-steps-done-icon-bg-color: var(--ti-base-color-light);
+  --ti-steps-done-icon-bg-color: var(--ti-common-color-light);
   --ti-steps-line-bg-color: #dbdbdb;
-  --ti-steps-done-text-color: var(--ti-base-color-info-normal);
+  --ti-steps-done-text-color: var(--ti-common-color-info-normal);
   --ti-steps-line-height: var(--ti-common-size-base);
   --ti-steps-line-active-bg-color: var(--ti-base-color-brand-6);
-  --ti-steps-advanced-border-color: var(--ti-base-color-border);
-  --ti-steps-advanced-text-color: var(--ti-base-color-placeholder);
+  --ti-steps-advanced-border-color: var(--ti-common-color-border);
+  --ti-steps-advanced-text-color: var(--ti-common-color-placeholder);
   --ti-steps-advanced-line-height: 28px;
-  --ti-steps-advanced-li-bg-color: var(--ti-base-color-light);
-  --ti-steps-advanced-li-text-color: var(--ti-base-color-light);
-  --ti-steps-advanced-li-hover-text-color: var(--ti-base-color-placeholder);
+  --ti-steps-advanced-li-bg-color: var(--ti-common-color-light);
+  --ti-steps-advanced-li-text-color: var(--ti-common-color-light);
+  --ti-steps-advanced-li-hover-text-color: var(--ti-common-color-placeholder);
   --ti-steps-advanced-li-hover-bg-color: #f1f1f1;
   --ti-steps-advanced-link-font-size: var(--ti-common-font-size-base);
   --ti-steps-advanced-dot-height: 12px;
   --ti-steps-advanced-dot-width: 12px;
-  --ti-steps-advanced-dot-done-bg-color: var(--ti-base-color-success-normal);
+  --ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal);
   --ti-steps-advanced-dot-doing-bg-color: #faad14;
-  --ti-steps-advanced-dot-wait-bg-color: var(--ti-base-color-success-normal);
+  --ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal);
   --ti-steps-advanced-count-bg-color: var(--ti-base-color-bg-8);
   --ti-steps-advanced-count-border-radius: 10px;
   --ti-steps-advanced-count-font-size: var(--ti-common-font-size-base);
@@ -39,11 +39,11 @@
   --ti-steps-advanced-border-weight: 14px;
   --ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base);
   --ti-steps-timeline-name-font-size: var(--ti-common-font-size-1);
-  --ti-steps-timeline-date-time-text-color: var(--ti-base-color-placeholder);
+  --ti-steps-timeline-date-time-text-color: var(--ti-common-color-placeholder);
   --ti-steps-icon-size: var(--ti-common-size-5x);
   --ti-steps-font-size-7: var(--ti-common-font-size-7);
   --ti-steps-font-size-base: var(--ti-common-font-size-base);
   --ti-steps-icon-font-size: var(--ti-common-font-size-base);
   --ti-steps-icon-bg-color: #d9d9d9;
-  --ti-steps-unselected-text-color: var(--ti-base-color-light);
+  --ti-steps-unselected-text-color: var(--ti-common-color-light);
 }
diff --git a/packages/theme/src/switch/vars.less b/packages/theme/src/switch/vars.less
index 62b1ff3dc..eb7c29776 100644
--- a/packages/theme/src/switch/vars.less
+++ b/packages/theme/src/switch/vars.less
@@ -18,8 +18,8 @@
   --ti-switch-checked-disabled-border-color: var(--ti-base-color-brand-3);
   --ti-switch-disabled-text-color: var(--ti-base-color-bg-5);
   --ti-switch-disabled-dot-bg-color: var(--ti-base-color-bg-5);
-  --ti-switch-text-color: var(--ti-base-color-light);
-  --ti-switch-dot-bg-color: var(--ti-base-color-light);
+  --ti-switch-text-color: var(--ti-common-color-light);
+  --ti-switch-dot-bg-color: var(--ti-common-color-light);
   --ti-switch-width: 38px;
   --ti-switch-height: 20px;
   --ti-switch-border-radius: 24px;
diff --git a/packages/theme/src/table/vars.less b/packages/theme/src/table/vars.less
index 6e0b52d69..8b03b9ba4 100644
--- a/packages/theme/src/table/vars.less
+++ b/packages/theme/src/table/vars.less
@@ -11,16 +11,16 @@
 */
 
 .component-css-vars-table() {
-  --ti-table-text-color: var(--ti-base-color-info-normal);
+  --ti-table-text-color: var(--ti-common-color-info-normal);
   --ti-table-bg-color: #fafafa;
-  --ti-table-odd-bg-color: var(--ti-base-color-light);
-  --ti-table-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-table-disabled-text-color: var(--ti-base-color-placeholder);
+  --ti-table-odd-bg-color: var(--ti-common-color-light);
+  --ti-table-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-table-disabled-text-color: var(--ti-common-color-placeholder);
   --ti-table-disabled-bg-color: #f1f1f1;
   --ti-table-nodata-text-color: #909399;
-  --ti-table-td-height: var(--ti-base-size-height-medium);
+  --ti-table-td-height: var(--ti-common-size-height-medium);
   --ti-table-td-font-size: var(--ti-common-font-size-base);
-  --ti-table-border-color: var(--ti-base-color-border);
+  --ti-table-border-color: var(--ti-common-color-border);
   --ti-table-thead-bg-color: var(--ti-base-color-brand-1);
   --ti-table-icon-font-size: var(--ti-common-font-size-2);
   --ti-table-check-icon-color: var(--ti-base-color-brand-6);
diff --git a/packages/theme/src/tabs/vars.less b/packages/theme/src/tabs/vars.less
index 12d2c7774..6b69086e0 100644
--- a/packages/theme/src/tabs/vars.less
+++ b/packages/theme/src/tabs/vars.less
@@ -18,18 +18,18 @@
   --ti-tabs-border-color: var(--ti-common-color-line-dividing);
   --ti-tabs-height: var(--ti-common-size-10x);
   --ti-tabs-item-disabled-text-color: #b4bccc;
-  --ti-tabs-icon-close-hover-bg-color: var(--ti-base-color-light);
+  --ti-tabs-icon-close-hover-bg-color: var(--ti-common-color-light);
   --ti-tabs-new-height: 18px;
   --ti-tabs-new-width: 18px;
-  --ti-tabs-new-border-radius: var(--ti-base-radius-large);
-  --ti-tabs-new-svg-text-color: var(--ti-base-color-placeholder);
+  --ti-tabs-new-border-radius: var(--ti-common-radius-large);
+  --ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder);
   --ti-tabs-font-size-base: var(--ti-common-font-size-base);
   --ti-tabs-more-hover-text-color: var(--ti-base-color-brand-5);
-  --ti-tabs-more-item-hover-bg-color: var(--ti-base-color-hover-background);
+  --ti-tabs-more-item-hover-bg-color: var(--ti-common-color-hover-background);
   --ti-tabs-dropdown-font-size: var(--ti-common-font-size-1);
-  --ti-tabs-dropdown-bg-color: var(--ti-base-color-light);
+  --ti-tabs-dropdown-bg-color: var(--ti-common-color-light);
   --ti-tabs-dropdown-border-radius: var(--ti-common-border-radius-normal);
-  --ti-tabs-dropdown-li-text-color: var(--ti-base-color-secondary);
+  --ti-tabs-dropdown-li-text-color: var(--ti-common-color-secondary);
   --ti-tabs-dropdown-li-border-color: #e6e6e6;
   --ti-tabs-small-height: var(--ti-common-size-9x);
   --ti-tab-dark-border-radius: var(--ti-common-border-radius-normal) var(--ti-common-border-radius-normal) 0 0;
diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
index 8b8d113c0..f5e1ed9bc 100644
--- a/packages/theme/src/tag/vars.less
+++ b/packages/theme/src/tag/vars.less
@@ -15,9 +15,9 @@
   --ti-tag-medium-height: var(--ti-common-size-6x);
   --ti-tag-small-height: var(--ti-common-size-5x);
   --ti-tag-mini-height: var(--ti-common-size-4x);
-  --ti-tag-border-color: var(--ti-base-color-border);
-  --ti-tag-border-radius: var(--ti-base-radius-medium);
-  --ti-tag-font-size: var(--ti-base-font-size);
+  --ti-tag-border-color: var(--ti-common-color-border);
+  --ti-tag-border-radius: var(--ti-common-radius-medium);
+  --ti-tag-font-size: var(--ti-common-font-size);
   --ti-tag-close-font-size: var(--ti-common-font-size-1);
 
   --ti-tag-primary-text-color: var(--ti-base-color-common-5);
@@ -40,7 +40,7 @@
   --ti-tag-info-border-color: var(--ti-common-color-info-border);
   --ti-tag-info-background-color: var(--ti-common-color-info-bg);
 
-  --ti-tag-dark-text-color: var(--ti-base-color-light);
+  --ti-tag-dark-text-color: var(--ti-common-color-light);
   --ti-tag-dark-bg-color: var(--ti-common-color-prompt);
   --ti-tag-dark-success-bg-color: var(--ti-common-color-success);
   --ti-tag-dark-warning-bg-color: var(--ti-common-color-warn);
@@ -49,7 +49,7 @@
 
   --ti-tag-plain-text-color: var(--ti-common-color-prompt);
   --ti-tag-plain-border-color: var(--ti-common-color-prompt-border);
-  --ti-tag-plain-background-color: var(--ti-base-color-light);
+  --ti-tag-plain-background-color: var(--ti-common-color-light);
 
   --ti-tag-plain-info-text-color: var(--ti-common-color-info);
   --ti-tag-plain-info-border-color: var(--ti-common-color-info-border);
diff --git a/packages/theme/src/tall-storage/index.less b/packages/theme/src/tall-storage/index.less
index 54b3e97ac..601c2206c 100644
--- a/packages/theme/src/tall-storage/index.less
+++ b/packages/theme/src/tall-storage/index.less
@@ -27,7 +27,7 @@
   .@{storage-list-style-prefix-cls} {
     position: absolute;
     background-color: var(--ti-tall-storage-bg-color);
-    box-shadow: var(--ti-base-box-shadow);
+    box-shadow: var(--ti-common-box-shadow);
     border-radius: var(--ti-tall-storage-border-radius);
     width: 100%;
     box-sizing: border-box;
diff --git a/packages/theme/src/tall-storage/vars.less b/packages/theme/src/tall-storage/vars.less
index 0d51d4a50..ccac19dde 100644
--- a/packages/theme/src/tall-storage/vars.less
+++ b/packages/theme/src/tall-storage/vars.less
@@ -11,8 +11,8 @@
 */
 
 .component-css-vars-tall-storage() {
-  --ti-tall-storage-bg-color: var(--ti-base-color-light);
+  --ti-tall-storage-bg-color: var(--ti-common-color-light);
   --ti-tall-storage-border-radius: var(--ti-common-border-radius-normal);
-  --ti-tall-storage-item-height: var(--ti-base-size-height-minor);
-  --ti-tall-storage-item-bg-color: var(--ti-base-color-hover-background);
+  --ti-tall-storage-item-height: var(--ti-common-size-height-minor);
+  --ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background);
 }
diff --git a/packages/theme/src/text-popup/vars.less b/packages/theme/src/text-popup/vars.less
index 42e7d49b5..836c7a843 100644
--- a/packages/theme/src/text-popup/vars.less
+++ b/packages/theme/src/text-popup/vars.less
@@ -12,7 +12,7 @@
 
 .component-css-vars-text-popup() {
   --ti-text-popup-border-radius: var(--ti-common-border-radius-normal);
-  --ti-text-popup-border-color: var(--ti-base-color-border);
+  --ti-text-popup-border-color: var(--ti-common-color-border);
   --ti-text-popup-box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.3);
   --ti-text-popup-hover-border-color: var(--ti-base-color-brand-6);
 }
diff --git a/packages/theme/src/theme/deep-theme/index.js b/packages/theme/src/theme/deep-theme/index.js
index 842861a84..ece4eb425 100644
--- a/packages/theme/src/theme/deep-theme/index.js
+++ b/packages/theme/src/theme/deep-theme/index.js
@@ -1,22 +1,22 @@
 /**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 export const deepTheme = {
-  'ti-base-color-primary-normal': '#252b3a',
-  'ti-base-color-primary-hover': '#54657e',
+  'ti-common-color-primary-normal': '#252b3a',
+  'ti-common-color-primary-hover': '#54657e',
   'ti-button-primary-plain-bg-color': 'rgba(51, 51, 51, 0.06)',
 
   'ti-base-color-brand-5': '#252b3a',
   'ti-autocomplete-li-text-color': '#252b3a',
   'ti-autocomplete-li-hover-bg-color': '#E2E2E6',
-  'ti-autocomplete-li-select-bg-color': '#d5d5db',
+  'ti-autocomplete-li-select-bg-color': '#d5d5db'
 }
diff --git a/packages/theme/src/theme/galaxy-theme/index.js b/packages/theme/src/theme/galaxy-theme/index.js
index ba86fceee..acd1b661c 100644
--- a/packages/theme/src/theme/galaxy-theme/index.js
+++ b/packages/theme/src/theme/galaxy-theme/index.js
@@ -1,24 +1,24 @@
 /**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 export const galaxyTheme = {
   'ti-base-color-bg-1': '#1A1A1C',
   'ti-base-color-common-7': '#CED1DB',
   'ti-button-normal-background-color': '#393a3e',
   'ti-button-normal-hover-background-color': '#4e5057',
-  'ti-base-color-border': '#353638',
-  'ti-base-color-light': '#292A2E',
-  'ti-base-color-info-normal': 'var(--ti-base-color-common-7)',
-  'ti-base-color-hover-background': '#393A3E',
-  'ti-base-color-selected-background': '#393A3E',
+  'ti-common-color-border': '#353638',
+  'ti-common-color-light': '#292A2E',
+  'ti-common-color-info-normal': 'var(--ti-base-color-common-7)',
+  'ti-common-color-hover-background': '#393A3E',
+  'ti-common-color-selected-background': '#393A3E',
   'ti-button-primary-text-color': '#ffffff'
 }
diff --git a/packages/theme/src/theme/infinity-theme/index.js b/packages/theme/src/theme/infinity-theme/index.js
index 87e187880..98d5c7ec2 100644
--- a/packages/theme/src/theme/infinity-theme/index.js
+++ b/packages/theme/src/theme/infinity-theme/index.js
@@ -14,25 +14,25 @@ export const infinityTheme = {
   'ti-common-border-radius-normal': 'var(--ti-common-border-radius-1)',
   'ti-common-font-size-base': 'var(--ti-common-font-size-1)',
   'ti-common-color-line-dividing': '#f2f2f3',
-  'ti-base-color-warning-normal': '#fac20a',
-  'ti-base-color-warning-hover': '#ffd138',
-  'ti-base-color-warning-active': '#ffd138',
-  'ti-base-color-danger-normal': '#c7000b',
-  'ti-base-color-danger-hover': '#d64a52',
-  'ti-base-color-danger-active': '#d64a52',
-  'ti-base-color-success-normal': '#50d4ab',
-  'ti-base-color-success-hover': '#6ddebb',
-  'ti-base-color-success-active': '#6ddebb',
-  'ti-base-color-info-normal': '#252b3a',
-  'ti-base-color-info-hover': '#575d5c',
-  'ti-base-color-info-active': '#575d5c',
-  'ti-base-color-border': '#d7d8da',
+  'ti-common-color-warning-normal': '#fac20a',
+  'ti-common-color-warning-hover': '#ffd138',
+  'ti-common-color-warning-active': '#ffd138',
+  'ti-common-color-danger-normal': '#c7000b',
+  'ti-common-color-danger-hover': '#d64a52',
+  'ti-common-color-danger-active': '#d64a52',
+  'ti-common-color-success-normal': '#50d4ab',
+  'ti-common-color-success-hover': '#6ddebb',
+  'ti-common-color-success-active': '#6ddebb',
+  'ti-common-color-info-normal': '#252b3a',
+  'ti-common-color-info-hover': '#575d5c',
+  'ti-common-color-info-active': '#575d5c',
+  'ti-common-color-border': '#d7d8da',
   'ti-base-color-brand-5': '#526ecc',
-  'ti-base-size-height-normal': '32px',
-  'ti-base-box-shadow': '0 4px 8px 0 rgba(37,43,58,.2)',
-  'ti-base-color-hover-background': '#f2f2f3',
-  'ti-base-color-selected-background': '#f2f5fc',
-  'ti-base-dropdown-gap': '8px',
+  'ti-common-size-height-normal': '32px',
+  'ti-common-box-shadow': '0 4px 8px 0 rgba(37,43,58,.2)',
+  'ti-common-color-hover-background': '#f2f2f3',
+  'ti-common-color-selected-background': '#f2f5fc',
+  'ti-common-dropdown-gap': '8px',
   'ti-common-color-bg-disabled': '#f5f5f5',
 
   'ti-button-size-normal-height': 'var(--ti-common-space-8x)',
@@ -48,7 +48,7 @@ export const infinityTheme = {
   'ti-button-text-color-hover': 'var(--ti-base-color-brand-8)',
   'ti-autocomplete-suggestion-border-color': '#fff',
   'ti-autocomplete-suggestion-bg-color': '#fff',
-  'ti-autocomplete-li-hover-bg-color': 'var(--ti-base-color-hover-background)',
+  'ti-autocomplete-li-hover-bg-color': 'var(--ti-common-color-hover-background)',
   'ti-autocomplete-li-select-bg-color': '#f2f5fc',
   'ti-autocomplete-li-height': '36px',
   'ti-checkbox-border-color': '#d7d8da',
@@ -64,7 +64,7 @@ export const infinityTheme = {
   'ti-switch-off-bg-color': '#d7d8da',
   'ti-link-default-text-color': 'var(--ti-base-color-brand-7)',
   'ti-link-default-hover-text-color': 'var(--ti-base-color-brand-8)',
-  'ti-numeric-input-normal-height': 'var(--ti-base-size-height-normal)',
+  'ti-numeric-input-normal-height': 'var(--ti-common-size-height-normal)',
   'ti-numeric-input-width': '140px',
   'ti-slider-height': '5px',
   'ti-slider-range-height': '5px',
@@ -88,13 +88,13 @@ export const infinityTheme = {
   'ti-slider-margin-right': '0',
   'ti-slider-margin-left': '-4px',
   'ti-time-panel-border-color': 'transparent',
-  'ti-time-panel-box-shadow': 'var(--ti-base-box-shadow)',
+  'ti-time-panel-box-shadow': 'var(--ti-common-box-shadow)',
   'ti-time-spinner-item-font-weight': 'normal',
   'ti-time-panel-content-split-line-display': 'none',
   'ti-time-spinner-item-bg-color': '#f2f5fc',
   'ti-time-spinner-list-border-color': 'var(--ti-common-color-line-dividing)',
   'ti-time-panel-btn-cancel-display': 'none',
-  'ti-time-panel-btn-confirm-text-color': 'var(--ti-base-color-info-normal)',
+  'ti-time-panel-btn-confirm-text-color': 'var(--ti-common-color-info-normal)',
   'ti-time-panel-btn-bg-color': '#EBEBEB',
   'ti-time-panel-btn-padding-vertical': '0',
   'ti-time-panel-btn-padding-horizontal': '12px',
@@ -102,8 +102,8 @@ export const infinityTheme = {
   'ti-time-panel-btn-min-width': '56px',
   'ti-time-panel-btn-font-weight': 'normal',
   'ti-time-panel-btn-confirm-hover-bg-color': 'var(--ti-button-normal-hover-background-color)',
-  'ti-tree-node-content-current-bg-color': 'var(--ti-base-color-selected-background)',
-  'ti-tree-node-content-hover-bg-color': 'var(--ti-base-color-hover-background)',
+  'ti-tree-node-content-current-bg-color': 'var(--ti-common-color-selected-background)',
+  'ti-tree-node-content-hover-bg-color': 'var(--ti-common-color-hover-background)',
   // tabs
   'ti-tabs-header-font-active-border-color': 'var(--ti-base-color-common-7)',
   'ti-tabs-header-text-color': 'var(--ti-base-color-common-7)',
@@ -150,7 +150,7 @@ export const infinityTheme = {
 
   'ti-dropdown-menu-padding-vertical': '12px',
   'ti-dropdown-menu-padding-horizontal': '12px',
-  'ti-dropdown-menu-box-shadow': 'var(--ti-base-box-shadow)',
+  'ti-dropdown-menu-box-shadow': 'var(--ti-common-box-shadow)',
   'ti-dropdown-menu-margin-vertical': '8px',
   'ti-dropdown-menu-item-height': '36px',
   'ti-dropdown-menu-item-padding-vertical': '0',
@@ -172,13 +172,13 @@ export const infinityTheme = {
   'ti-split-trigger-bar-margin-top': '2px',
   'ti-split-trigger-con-col-cursor': 'col-resize',
   'ti-split-trigger-con-row-cursor': 'row-resize',
-  'ti-picker-panel-box-shadow': 'var(--ti-base-box-shadow)',
+  'ti-picker-panel-box-shadow': 'var(--ti-common-box-shadow)',
   'ti-date-picker-width': '249px',
   'ti-date-picker-font-size': '12px',
   'ti-date-table-td-today-border-color': 'transparent',
   'ti-date-table-td-today-text-color': 'var(--ti-base-color-brand-6)',
   'ti-date-picker-current-border-radius': 'var(--ti-common-border-radius-normal)',
-  'ti-date-picker-hover-bg-color': 'var(--ti-base-color-selected-background)',
+  'ti-date-picker-hover-bg-color': 'var(--ti-common-color-selected-background)',
   'ti-date-table-td-width': '30px',
   'ti-date-table-td-height': '22px',
   'ti-date-table-td-padding-vertical': '0',
@@ -219,7 +219,7 @@ export const infinityTheme = {
   'ti-pager-poplist-item-unchecked-box-shadow': ' 0 1px 3px 0 rgba(37, 43, 58, 0.1)',
   'ti-pager-poplist-item-hover-bg-color': 'transparent',
   'ti-pager-poplist-item-hover-border-color': 'var(--ti-common-color-line-dividing)',
-  'ti-pager-poplist-item-hover-text-color': 'var(--ti-base-color-info-normal)',
+  'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-info-normal)',
   // alert
   'ti-alert-success-bg-color': '#cffcee',
   'ti-alert-description-font-size': '14px',
@@ -234,12 +234,12 @@ export const infinityTheme = {
   'ti-alert-close-font-size': '15px',
   // steps
   'ti-steps-icon-size': '24px',
-  'ti-steps-done-icon-bg-color': 'var(--ti-base-color-success-normal)',
-  'ti-steps-done-active-border-color': 'var(--ti-base-color-success-normal)',
+  'ti-steps-done-icon-bg-color': 'var(--ti-common-color-success-normal)',
+  'ti-steps-done-active-border-color': 'var(--ti-common-color-success-normal)',
   'ti-steps-done-icon-fill-color': '#fff',
-  'ti-steps-line-active-bg-color': 'var(--ti-base-color-border)',
+  'ti-steps-line-active-bg-color': 'var(--ti-common-color-border)',
   'ti-steps-line-height': '1px',
-  'ti-steps-done-text-color': 'var(--ti-base-color-success-normal)',
+  'ti-steps-done-text-color': 'var(--ti-common-color-success-normal)',
   // tag
   'ti-tag-border-radius': 'var(--ti-common-border-radius-1)',
   'ti-tag-height': 'var(--ti-common-size-5x)',
@@ -259,18 +259,18 @@ export const infinityTheme = {
   'ti-badge-font-weight': 'var(--ti-common-font-weight-4)',
   'ti-badge-border-radius': '100px',
   // carousel
-  'ti-carousel-arrow-hover-bg-color': 'ti-base-color-selected-background',
+  'ti-carousel-arrow-hover-bg-color': 'ti-common-color-selected-background',
   'ti-carousel-arrow-bg-color': 'rgba(255,255,255,0.8)',
   'ti-carousel-arrow-box-shadow': '0 8px 16px 0 rgba(37,43,58,.1)',
   'ti-carousel-arrow-active-text-color': 'var(--ti-base-color-common-7)',
-  'ti-carousel-arrow-width': 'var(--ti-base-size-width-small)',
-  'ti-carousel-arrow-height': 'var(--ti-base-size-width-small)',
+  'ti-carousel-arrow-width': 'var(--ti-common-size-width-small)',
+  'ti-carousel-arrow-height': 'var(--ti-common-size-width-small)',
   'ti-carousel-indicators-bg-color': 'none',
   'ti-carousel-indicator-button-bg-color': '#71757f',
   'ti-carousel-indicator-button-width': '6px',
   'ti-carousel-indicator-button-height': '6px',
   'ti-carousel-indicator-margin-right': 'var(--ti-common-size-2x)',
-  'ti-carousel-indicator-active-text-color': 'var(--ti-base-color-info-normal)',
+  'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-info-normal)',
   'ti-carousel-indicator-active-border-radius': 'var(--ti-common-border-radius-1)',
   'ti-carousel-indicator-active-width': 'var(--ti-common-size-6x)',
   'ti-carousel-hover-opacity': '1',
@@ -337,12 +337,12 @@ export const infinityTheme = {
   'ti-image-viewer-next-width': '36px',
   'ti-image-viewer-next-height': '36px',
   'ti-image-viewer-mask-wrap-bg-color': 'rgba(37,43,58,.2)',
-  'ti-image-viewer-close-bg-color-hover': 'var(--ti-base-color-selected-background)',
+  'ti-image-viewer-close-bg-color-hover': 'var(--ti-common-color-selected-background)',
   'ti-image-viewer-btn-opacity': '1',
   'ti-image-viewer-mask-bg-color': 'transparent',
   // input
   'ti-input-border-radius': 'var(--ti-common-border-radius-1)',
-  'ti-input-hover-border-color': 'var(--ti-base-color-border-hover)',
+  'ti-input-hover-border-color': 'var(--ti-common-color-border-hover)',
   'ti-input-active-border-color': 'var(--ti-base-color-brand-7)',
   'ti-input-height': '32px',
   'ti-input-mini-height': '24px',
@@ -369,8 +369,8 @@ export const infinityTheme = {
   'ti-cascader-node-label-padding-horizontal': 0,
   'ti-cascader-dropdown-box-shadow': '0 4px 8px 0 rgba(37, 43, 58, 0.2)',
   'ti-cascader-dropdown-border-color': 'var(--ti-cascader-dropdown-bg-color)',
-  'ti-cascader-menu-border-color': 'var(--ti-base-color-hover-background)',
-  'ti-cascader-node-hover-bg-color': 'var(--ti-base-color-hover-background)',
+  'ti-cascader-menu-border-color': 'var(--ti-common-color-hover-background)',
+  'ti-cascader-node-hover-bg-color': 'var(--ti-common-color-hover-background)',
   'ti-cascader-menu-width': '200px',
   'ti-cascader-panel-node-margin-top': 'var(--ti-common-space-base)',
   'ti-cascader-tag-bg-color': 'var(--ti-base-color-brand-2)',
@@ -391,11 +391,11 @@ export const infinityTheme = {
   'ti-select-dropdown-item-padding-horizontal': 'var(--ti-common-space-3x)',
   'ti-select-dropdown-item-margin-top': 'var(--ti-common-space-base)',
   'ti-select-dropdown-item-height': '36px',
-  'ti-select-dropdown-item-selected-text-color': 'var(--ti-base-color-info-normal)',
+  'ti-select-dropdown-item-selected-text-color': 'var(--ti-common-color-info-normal)',
   'ti-select-dropdown-item-selected-bg-color': 'var(--ti-base-color-brand-1)',
   // form-item
   'ti-form-item-error-text-color': 'var(--ti-base-color-error-3)',
   'ti-form-item-error-bg-color': '#ffd5d4',
   // search
-  'ti-search-input-btn-width': 'var(--ti-base-size-height-minor)'
+  'ti-search-input-btn-width': 'var(--ti-common-size-height-minor)'
 }
diff --git a/packages/theme/src/time-panel/index.less b/packages/theme/src/time-panel/index.less
new file mode 100644
index 000000000..f38150be8
--- /dev/null
+++ b/packages/theme/src/time-panel/index.less
@@ -0,0 +1,118 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../mixins/common.less';
+@import '../custom.less';
+@import './vars.less';
+
+@time-panel-prefix-cls: ~'@{css-prefix}time-panel';
+
+
+.@{time-panel-prefix-cls} {
+  .component-css-vars-time-panel();
+
+  margin: 5px 0;
+  border: 1px solid var(--ti-time-panel-border-color);
+  background-color: var(--ti-time-panel-bg-color);
+  box-shadow: var(--ti-time-panel-box-shadow);
+  border-radius: var(--ti-time-panel-border-radius);
+  position: absolute;
+  width: 180px;
+  left: 0;
+  z-index: 1000;
+  box-sizing: content-box;
+  .user-select(none);
+
+  &__content {
+    font-size: 0;
+    position: relative;
+    overflow: hidden;
+
+    &:after,
+    &:before {
+      display: var(--ti-time-panel-content-split-line-display);
+      content: '';
+      top: 50%;
+      position: absolute;
+      margin-top: -19px;
+      height: 32px;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding-top: 6px;
+      text-align: left;
+      border-top: 1px solid var(--ti-time-panel-border-color);
+      border-bottom: 1px solid var(--ti-time-panel-border-color);
+    }
+
+    &:after {
+      left: 50%;
+      margin-left: 12%;
+      margin-right: 12%;
+    }
+
+    &:before {
+      padding-left: 50%;
+      margin-right: 12%;
+      margin-left: 12%;
+    }
+
+    &.has-seconds {
+      &:after {
+        left: calc(100% / 3 * 2);
+      }
+
+      &:before {
+        padding-left: calc(100% / 3);
+      }
+    }
+  }
+
+  &__footer {
+    border-top: 1px solid var(--ti-time-panel-border-color);
+    padding: 4px;
+    height: 36px;
+    height: var(--ti-time-panel-footer-height, 36px);
+    line-height: 25px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  &__btn {
+    min-width: var(--ti-time-panel-btn-min-width);
+    border: none;
+    line-height: var(--ti-time-panel-btn-height);
+    padding: var(--ti-time-panel-btn-padding-vertical) var(--ti-time-panel-btn-padding-horizontal);
+    margin: 0 5px;
+    cursor: pointer;
+    background-color: var(--ti-time-panel-btn-bg-color);
+    outline: 0;
+    font-size: 12px;
+    color: var(--ti-time-panel-btn-text-color);
+    border-radius: var(--ti-time-panel-btn-border-radius);
+    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.cancel {
+      display: var(--ti-time-panel-btn-cancel-display);
+    }
+
+    &.confirm {
+      font-weight: var(--ti-time-panel-btn-font-weight);
+      color: var(--ti-time-panel-btn-confirm-text-color);
+
+      &:hover {
+        background-color: var(--ti-time-panel-btn-confirm-hover-bg-color);
+      }
+    }
+  }
+}
diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less
new file mode 100644
index 000000000..ac12f8a15
--- /dev/null
+++ b/packages/theme/src/time-panel/vars.less
@@ -0,0 +1,32 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-time-panel() {
+  --ti-time-panel-border-color: var(--ti-date-picker-border-color);
+  --ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --ti-time-panel-content-split-line-display: block;
+  --ti-time-panel-btn-cancel-display: inline-block;
+  --ti-time-panel-btn-bg-color: transparent;
+  --ti-time-panel-btn-padding-vertical: 0;
+  --ti-time-panel-btn-padding-horizontal: 5px;
+  --ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal);
+  --ti-time-panel-btn-height: 28px;
+  --ti-time-panel-btn-min-width: inherit;
+  --ti-time-panel-btn-font-weight: 800;
+  --ti-time-panel-btn-confirm-hover-bg-color: transparent;
+  --ti-time-panel-footer-height: 36px;
+  --ti-time-panel-btn-text-color: #303133;
+  --ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-7);
+  --ti-time-panel-bg-color: var(--ti-base-color-light);
+  --ti-time-panel-border-radius: var(--ti-common-border-radius-normal);
+  --ti-time-panel-border-color: var(--ti-common-color-line-dividing);
+}
diff --git a/packages/theme/src/time-picker/index.less b/packages/theme/src/time-picker/index.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/theme/src/time-picker/vars.less b/packages/theme/src/time-picker/vars.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/theme/src/time-range/index.less b/packages/theme/src/time-range/index.less
new file mode 100644
index 000000000..3f02c9ff1
--- /dev/null
+++ b/packages/theme/src/time-range/index.less
@@ -0,0 +1,51 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@time-range-picker-prefix-cls: ~'@{css-prefix}time-range-picker';
+
+
+.@{time-range-picker-prefix-cls} {
+  .component-css-vars-time-range-picker();
+
+  width: 354px;
+  overflow: visible;
+
+  &__content {
+    position: relative;
+    text-align: center;
+    padding: 10px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  &__cell {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 4px 7px 7px;
+    width: 50%;
+  }
+
+  &__header {
+    margin-bottom: 5px;
+    text-align: center;
+    font-size: var(--ti-time-range-picker-header-font-size);
+  }
+
+  &__body {
+    border-radius: var(--ti-date-picker-border-radius);
+    border: 1px solid var(--ti-date-picker-border-color);
+  }
+}
diff --git a/packages/theme/src/checkbox-group/index.js b/packages/theme/src/time-range/vars.less
similarity index 80%
rename from packages/theme/src/checkbox-group/index.js
rename to packages/theme/src/time-range/vars.less
index 59e667756..cdf0ce938 100644
--- a/packages/theme/src/checkbox-group/index.js
+++ b/packages/theme/src/time-range/vars.less
@@ -10,6 +10,6 @@
 *
 */
 
-export default {
-  //
+.component-css-vars-time-range-picker() {
+  --ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
 }
diff --git a/packages/theme/src/time-select/index.less b/packages/theme/src/time-select/index.less
new file mode 100644
index 000000000..7474d18c7
--- /dev/null
+++ b/packages/theme/src/time-select/index.less
@@ -0,0 +1,42 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@time-select-prefix-cls: ~'@{css-prefix}time-select';
+
+.@{time-select-prefix-cls} {
+  .component-css-vars-time-select();
+
+  & &__item {
+    color: var(--ti-date-picker-text-color);
+    font-size: var(--ti-common-font-size-base);
+    padding: 0 8px;
+    line-height: var(--ti-base-size-height-normal);
+    height: var(--ti-base-size-height-normal);
+
+    &:not(.disabled):hover {
+      background-color: var(--ti-date-picker-hover-bg-color);
+      cursor: pointer;
+    }
+
+    &.selected:not(.disabled) {
+      background-color: var(--ti-date-picker-selected-bg-color);
+    }
+
+    &.disabled {
+      color: var(--ti-date-picker-disabled-text-color);
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/packages/theme/src/checkbox-button/index.js b/packages/theme/src/time-select/vars.less
similarity index 92%
rename from packages/theme/src/checkbox-button/index.js
rename to packages/theme/src/time-select/vars.less
index e54f7baf2..5420d0b9f 100644
--- a/packages/theme/src/checkbox-button/index.js
+++ b/packages/theme/src/time-select/vars.less
@@ -10,6 +10,6 @@
 *
 */
 
-export default {
-  // checkbox-button
+.component-css-vars-time-select() {
+  
 }
diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less
new file mode 100644
index 000000000..d7906364a
--- /dev/null
+++ b/packages/theme/src/time-spinner/index.less
@@ -0,0 +1,139 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@time-spinner-prefix-cls: ~'@{css-prefix}time-spinner';
+
+.@{time-spinner-prefix-cls} {
+  .component-css-vars-time-spinner();
+
+  &__wrapper {
+    max-height: 190px;
+    overflow: auto;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+    position: relative;
+
+    .@{scrollbar-prefix-cls}__wrap:not(.@{scrollbar-prefix-cls}__wrap--hidden-default) {
+      padding-bottom: 15px;
+    }
+
+    &.is-arrow {
+      box-sizing: border-box;
+      text-align: center;
+      overflow: hidden;
+
+      .@{time-spinner-prefix-cls}__list {
+        transform: translateY(-32px);
+      }
+
+      .@{time-spinner-prefix-cls}__item:hover:not(.disabled):not(.active) {
+        background: var(--ti-time-spinner-bg-color);
+        cursor: default;
+      }
+    }
+
+    .@{time-spinner-prefix-cls}__list {
+      transform: translateY(-6px);
+    }
+
+    &:last-child {
+      .@{time-spinner-prefix-cls}__list {
+        border-right: 0;
+      }
+    }
+  }
+
+  &__arrow {
+    font-size: var(--ti-time-spinner-font-size);
+    color: var(--ti-time-spinner-arrow-text-color);
+    height: 30px;
+    line-height: 30px;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    text-align: center;
+    cursor: pointer;
+
+    .@{svg-prefix-cls} {
+      fill: var(--ti-time-spinner-arrow-text-color);
+    }
+
+    &:hover .@{svg-prefix-cls} {
+      fill: var(--ti-time-spinner-arrow-hover-text-color);
+    }
+
+    &.@{css-prefix}icon-arrow-up {
+      top: 10px;
+    }
+
+    &.@{css-prefix}icon-arrow-down {
+      bottom: 10px;
+    }
+
+    &.@{input-prefix-cls} {
+      width: 70%;
+
+      .@{input-prefix-cls}__inner {
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  &__list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+    border-right: 1px solid var(--ti-time-spinner-list-border-color);
+
+    &::after,
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+
+  &__item {
+    font-size: var(--ti-time-spinner-font-size);
+    color: var(--ti-time-spinner-text-color);
+    height: 32px;
+    line-height: 32px;
+
+    &:hover:not(.disabled):not(.active) {
+      background: var(--ti-time-spinner-selected-bg-color);
+      cursor: pointer;
+    }
+
+    &.active:not(.disabled) {
+      color: var(--ti-time-spinner-item-active-text-color);
+      font-weight: var(--ti-time-spinner-item-font-weight);
+      background-color: var(--ti-time-spinner-item-bg-color);
+    }
+
+    &.disabled {
+      color: var(--ti-time-spinner-disabled-text-color);
+      cursor: not-allowed;
+    }
+  }
+
+  &.has-seconds .@{time-spinner-prefix-cls}__wrapper {
+    width: 33.3%;
+  }
+}
diff --git a/packages/theme/src/time-spinner/vars.less b/packages/theme/src/time-spinner/vars.less
new file mode 100644
index 000000000..a1c930e4f
--- /dev/null
+++ b/packages/theme/src/time-spinner/vars.less
@@ -0,0 +1,25 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-time-spinner() {
+  --ti-time-spinner-arrow-text-color: #909399;
+  --ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7);
+  --ti-time-spinner-item-active-text-color: #303133;
+  --ti-time-spinner-item-font-weight: 700;
+  --ti-time-spinner-item-bg-color: transparent;
+  --ti-time-spinner-list-border-color: transparent;
+  --ti-time-spinner-font-size: var(--ti-common-font-size-base);
+  --ti-time-spinner-text-color: var(--ti-base-color-info-normal);
+  --ti-time-spinner-bg-color: var(--ti-base-color-light);
+  --ti-time-spinner-selected-bg-color: #f2f2f3;
+  --ti-time-spinner-disabled-text-color: var(--ti-common-color-text-disabled);
+}
diff --git a/packages/theme/src/tip/vars.less b/packages/theme/src/tip/vars.less
index 44d9e5ed3..686c1e76a 100644
--- a/packages/theme/src/tip/vars.less
+++ b/packages/theme/src/tip/vars.less
@@ -11,20 +11,20 @@
 */
 
 .component-css-vars-tip() {
-  --ti-tips-normal-bg-color: var(--ti-base-color-secondary);
-  --ti-tips-normal-text-color: var(--ti-base-color-light);
+  --ti-tips-normal-bg-color: var(--ti-common-color-secondary);
+  --ti-tips-normal-text-color: var(--ti-common-color-light);
 
   --ti-tips-error-bg-color: #ff7875;
-  --ti-tips-error-text-color: var(--ti-base-color-light);
+  --ti-tips-error-text-color: var(--ti-common-color-light);
 
-  --ti-tips-succeed-bg-color: var(--ti-base-color-success-normal);
-  --ti-tips-succeed-text-color: var(--ti-base-color-light);
+  --ti-tips-succeed-bg-color: var(--ti-common-color-success-normal);
+  --ti-tips-succeed-text-color: var(--ti-common-color-light);
 
   --ti-tips-warning-bg-color: #fa8c16;
-  --ti-tips-warning-text-color: var(--ti-base-color-light);
+  --ti-tips-warning-text-color: var(--ti-common-color-light);
 
-  --ti-tips-infor-bg-color: var(--ti-base-color-border);
-  --ti-tips-infor-text-color: var(--ti-base-color-info-normal);
+  --ti-tips-infor-bg-color: var(--ti-common-color-border);
+  --ti-tips-infor-text-color: var(--ti-common-color-info-normal);
 
   --ti-tips-bg-color: #ff7875;
   --ti-tips-border-radius: var(--ti-common-border-radius-normal);
diff --git a/packages/theme/src/toggle-menu/vars.less b/packages/theme/src/toggle-menu/vars.less
index 39e3077cd..69de09700 100644
--- a/packages/theme/src/toggle-menu/vars.less
+++ b/packages/theme/src/toggle-menu/vars.less
@@ -13,12 +13,12 @@
 .component-css-vars-toggle-menu() {
   --ti-toggle-menu-width: 210px;
   --ti-toggle-menu-font-size: var(--ti-common-font-size-base);
-  --ti-toggle-menu-name-text-color: var(--ti-base-color-info-normal);
+  --ti-toggle-menu-name-text-color: var(--ti-common-color-info-normal);
   --ti-toggle-menu-tree-node-height: var(--ti-common-size-7x);
   --ti-toggle-menu-filter-search-size: 30px;
   --ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2);
   --ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6);
   --ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6);
   --ti-toggle-menu-toggle-icon-color-hover: var(--ti-base-color-brand-5);
-  --ti-toggle-menu-toggle-bg-color: var(--ti-base-color-border);
+  --ti-toggle-menu-toggle-bg-color: var(--ti-common-color-border);
 }
diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less
index af6fcca7f..35299ed91 100644
--- a/packages/theme/src/tooltip/vars.less
+++ b/packages/theme/src/tooltip/vars.less
@@ -14,24 +14,24 @@
   --ti-tooltip-popper-border-radius: var(--ti-common-border-radius-1);
   --ti-tooltip-popper-font-size: var(--ti-common-font-size-base);
   --ti-tooltip-popper-border-color: var(--ti-base-color-common-6);
-  --ti-tooltip-popper-normal-bg-color: var(--ti-base-color-secondary);
-  --ti-tooltip-popper-normal-text-color: var(--ti-base-color-light);
-  --ti-tooltip-popper-normal-border-color: var(--ti-base-color-secondary);
+  --ti-tooltip-popper-normal-bg-color: var(--ti-common-color-secondary);
+  --ti-tooltip-popper-normal-text-color: var(--ti-common-color-light);
+  --ti-tooltip-popper-normal-border-color: var(--ti-common-color-secondary);
   --ti-tooltip-popper-info-bg-color: #69c0ff;
-  --ti-tooltip-popper-info-text-color: var(--ti-base-color-light);
+  --ti-tooltip-popper-info-text-color: var(--ti-common-color-light);
   --ti-tooltip-popper-info-border-color: #69c0ff;
   --ti-tooltip-popper-error-bg-color: var(--ti-base-color-common-6);
-  --ti-tooltip-popper-error-text-color: var(--ti-base-color-light);
+  --ti-tooltip-popper-error-text-color: var(--ti-common-color-light);
   --ti-tooltip-popper-error-border-color: var(--ti-base-color-common-6);
   --ti-tooltip-popper-warning-bg-color: #ffd666;
-  --ti-tooltip-popper-warning-text-color: var(--ti-base-color-light);
+  --ti-tooltip-popper-warning-text-color: var(--ti-common-color-light);
   --ti-tooltip-popper-warning-border-color: #ffd666;
   --ti-tooltip-popper-success-bg-color: #95de64;
-  --ti-tooltip-popper-success-text-color: var(--ti-base-color-light);
+  --ti-tooltip-popper-success-text-color: var(--ti-common-color-light);
   --ti-tooltip-popper-success-border-color: #95de64;
   --ti-tooltip-popper-dark-bg-color: var(--ti-base-color-common-6);
-  --ti-tooltip-popper-dark-text-color: var(--ti-base-color-light);
-  --ti-tooltip-popper-light-bg-color: var(--ti-base-color-light);
+  --ti-tooltip-popper-dark-text-color: var(--ti-common-color-light);
+  --ti-tooltip-popper-light-bg-color: var(--ti-common-color-light);
   --ti-tooltip-popper-light-text-color: var(--ti-base-color-common-6);
   --ti-tooltip-popper-light-border-color: var(--ti-base-color-common-6);
   --ti-tooltip-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
diff --git a/packages/theme/src/top-box/vars.less b/packages/theme/src/top-box/vars.less
index 06a09589e..73ab56d12 100644
--- a/packages/theme/src/top-box/vars.less
+++ b/packages/theme/src/top-box/vars.less
@@ -11,11 +11,11 @@
 */
 
 .component-css-vars-top-box() {
-  --ti-top-box-bg-color: var(--ti-base-color-light);
+  --ti-top-box-bg-color: var(--ti-common-color-light);
   --ti-top-box-icon-font-size: var(--ti-common-font-size-5);
-  --ti-top-box-success-icon-color: var(--ti-base-color-success-normal);
+  --ti-top-box-success-icon-color: var(--ti-common-color-success-normal);
   --ti-top-box-error-icon-color: var(--ti-base-color-bg-8);
-  --ti-top-box-warning-icon-color: var(--ti-base-color-warning-normal);
+  --ti-top-box-warning-icon-color: var(--ti-common-color-warning-normal);
   --ti-top-box-help-icon-color: var(--ti-base-color-brand-6);
-  --ti-top-box-info-icon-color: var(--ti-base-color-info-normal);
+  --ti-top-box-info-icon-color: var(--ti-common-color-info-normal);
 }
diff --git a/packages/theme/src/transfer/vars.less b/packages/theme/src/transfer/vars.less
index c0e903415..69f32ceeb 100644
--- a/packages/theme/src/transfer/vars.less
+++ b/packages/theme/src/transfer/vars.less
@@ -15,38 +15,38 @@
 
   --ti-transfer-button-bg-color: var(--ti-base-color-brand-6);
   --ti-transfer-button-border-radius: var(--ti-common-border-radius-normal);
-  --ti-transfer-button-disabled-text-color: var(--ti-base-color-placeholder);
-  --ti-transfer-button-disabled-border-color: var(--ti-base-color-border);
+  --ti-transfer-button-disabled-text-color: var(--ti-common-color-placeholder);
+  --ti-transfer-button-disabled-border-color: var(--ti-common-color-border);
   --ti-transfer-button-disabled-bg-color: var(--ti-common-color-bg-disabled);
-  --ti-transfer-panel-bg-color: var(--ti-base-color-light);
+  --ti-transfer-panel-bg-color: var(--ti-common-color-light);
 
   --ti-transfer-panel-body-height: 260px;
-  --ti-transfer-panel-border-color: var(--ti-base-color-border);
+  --ti-transfer-panel-border-color: var(--ti-common-color-border);
   --ti-transfer-panel-border-radius: var(--ti-common-border-radius-normal);
-  --ti-transfer-panel-item-height: var(--ti-base-size-height-minor);
-  --ti-transfer-panel-item-text-color: var(--ti-base-color-info-normal);
+  --ti-transfer-panel-item-height: var(--ti-common-size-height-minor);
+  --ti-transfer-panel-item-text-color: var(--ti-common-color-info-normal);
   --ti-transfer-panel-item-hover-text-color: var(--ti-base-color-brand-6);
-  --ti-transfer-panel-item-hover-bg-color: var(--ti-base-color-hover-background);
-  --ti-transfer-panel-filter-height: var(--ti-base-size-height-minor);
+  --ti-transfer-panel-item-hover-bg-color: var(--ti-common-color-hover-background);
+  --ti-transfer-panel-filter-height: var(--ti-common-size-height-minor);
   --ti-transfer-panel-filter-font-size: var(--ti-common-font-size-base);
   --ti-transfer-panel-filter-border-radius: var(--ti-common-border-radius-normal);
   --ti-transfer-panel-body-filter-height: 216px;
   --ti-transfer-panel-width: 200px;
 
   --ti-transfer-header-height: 40px;
-  --ti-transfer-header-bg-color: var(--ti-base-color-hover-background);
-  --ti-transfer-header-border-color: var(--ti-base-color-border);
-  --ti-transfer-header-text-color: var(--ti-base-color-info-normal);
-  --ti-transfer-header-span-text-color: var(--ti-base-color-info-normal);
+  --ti-transfer-header-bg-color: var(--ti-common-color-hover-background);
+  --ti-transfer-header-border-color: var(--ti-common-color-border);
+  --ti-transfer-header-text-color: var(--ti-common-color-info-normal);
+  --ti-transfer-header-span-text-color: var(--ti-common-color-info-normal);
   --ti-transfer-header-font-size: var(--ti-common-font-size-base);
   --ti-transfer-header-sort-width: var(--ti-common-size-5x);
   --ti-transfer-header-sort-text-color: var(--ti-base-color-brand-6);
 
   --ti-transfer-footer-height: var(--ti-common-size-10x);
-  --ti-transfer-footer-bg-color: var(--ti-base-color-light);
-  --ti-transfer-footer-border-color: var(--ti-base-color-border);
+  --ti-transfer-footer-bg-color: var(--ti-common-color-light);
+  --ti-transfer-footer-border-color: var(--ti-common-color-border);
   --ti-transfer-footer-text-color: #606266;
 
-  --ti-transfer-empty-height: var(--ti-base-size-height-minor);
+  --ti-transfer-empty-height: var(--ti-common-size-height-minor);
   --ti-transfer-empty-text-color: #909399;
 }
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index f5fc3b74d..c470fa438 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -17,6 +17,6 @@
   --ti-tree-menu-node-height: var(--ti-common-size-10x);
   --ti-tree-menu-node-hover-bg-color: var(--ti-base-color-white);
   --ti-tree-menu-node-current-text-color: var(--ti-base-color-brand-6);
-  --ti-tree-menu-node-body-text-color: var(--ti-base-color-info-normal);
+  --ti-tree-menu-node-body-text-color: var(--ti-common-color-info-normal);
   --ti-tree-menu-square-left-border-color: var(--ti-base-color-brand-6);
 }
diff --git a/packages/theme/src/tree/vars.less b/packages/theme/src/tree/vars.less
index 56f5946fd..79482d435 100644
--- a/packages/theme/src/tree/vars.less
+++ b/packages/theme/src/tree/vars.less
@@ -11,17 +11,17 @@
 */
 
 .component-css-vars-tree() {
-  --ti-tree-text-color: var(--ti-base-color-info-normal);
-  --ti-tree-bg-color: var(--ti-base-color-light);
+  --ti-tree-text-color: var(--ti-common-color-info-normal);
+  --ti-tree-bg-color: var(--ti-common-color-light);
   --ti-tree-empty-text-color: #909399;
   --ti-tree-node-content-current-bg-color: var(--ti-base-color-brand-2);
-  --ti-tree-node-content-hover-bg-color: var(--ti-base-color-hover-background);
+  --ti-tree-node-content-hover-bg-color: var(--ti-common-color-hover-background);
   --ti-tree-node-label-font-size: var(--ti-common-font-size-1);
   --ti-tree-node-label-margin-left: var(--ti-common-space-base);
   --ti-tree-node-label-bg-color: var(--ti-base-color-brand-5);
-  --ti-tree-node-label-text-color: var(--ti-base-color-light);
+  --ti-tree-node-label-text-color: var(--ti-common-color-light);
   --ti-tree-node-icon-font-size: var(--ti-common-font-size-1);
   --ti-tree-node-loading-icon-color: #1890ff;
-  --ti-tree-node-expand-icon-color: var(--ti-base-color-info-normal);
+  --ti-tree-node-expand-icon-color: var(--ti-common-color-info-normal);
   --ti-tree-node-checked-icon-color: var(--ti-base-color-brand-6);
 }
diff --git a/packages/theme/src/upload-dragger/vars.less b/packages/theme/src/upload-dragger/vars.less
index f5f23405d..9d85134a8 100644
--- a/packages/theme/src/upload-dragger/vars.less
+++ b/packages/theme/src/upload-dragger/vars.less
@@ -14,13 +14,13 @@
   --ti-upload-dragger-width: 360px;
   --ti-upload-dragger-height: 180px;
   --ti-upload-dragger-bg-color: #fafafa;
-  --ti-upload-dragger-border-color: var(--ti-base-color-border);
+  --ti-upload-dragger-border-color: var(--ti-common-color-border);
   --ti-upload-dragger-border-radius: var(--ti-common-border-radius-normal);
   --ti-upload-dragger-hover-text-color: var(--ti-base-color-brand-5);
   --ti-upload-dragger-dragover-bg-color: rgba(32, 159, 255, 0.06);
-  --ti-upload-dragger-icon-color: var(--ti-base-color-placeholder);
+  --ti-upload-dragger-icon-color: var(--ti-common-color-placeholder);
   --ti-upload-dragger-icon-font-size: var(--ti-common-font-size-7);
-  --ti-upload-dragger-text-color: var(--ti-base-color-secondary);
+  --ti-upload-dragger-text-color: var(--ti-common-color-secondary);
   --ti-upload-dragger-text-font-size: var(--ti-common-font-size-base);
   --ti-upload-dragger-files-border-color: #dcdfe6;
 }
diff --git a/packages/theme/src/upload-list/vars.less b/packages/theme/src/upload-list/vars.less
index 0f5fb74b3..ce83946dc 100644
--- a/packages/theme/src/upload-list/vars.less
+++ b/packages/theme/src/upload-list/vars.less
@@ -12,7 +12,7 @@
 
 .component-css-vars-upload-list() {
   --ti-upload-list-item-font-size: var(--ti-common-font-size-1);
-  --ti-upload-list-item-text-color: var(--ti-base-color-info-normal);
+  --ti-upload-list-item-text-color: var(--ti-common-color-info-normal);
   --ti-upload-list-item-border-radius: var(--ti-common-border-radius-normal);
   --ti-upload-list-item-hover-background-color: #f5f7fa;
   --ti-upload-list-item-hover-text-color: var(--ti-base-color-brand-5);
@@ -21,8 +21,8 @@
   --ti-upload-list-svg-close-icon-color: #606266;
   --ti-upload-list-svg-icon-font-size: var(--ti-common-font-size-base);
   --ti-upload-list-successful-icon-font-size: var(--ti-common-font-size-1);
-  --ti-upload-list-picture-card-item-border-color: var(--ti-base-color-border);
-  --ti-upload-list-picture-card-item-bg-color: var(--ti-base-color-light);
-  --ti-upload-list-picture-card-item-text-color: var(--ti-base-color-light);
-  --ti-upload-list-successful-status-bg-color: var(--ti-base-color-success-normal);
+  --ti-upload-list-picture-card-item-border-color: var(--ti-common-color-border);
+  --ti-upload-list-picture-card-item-bg-color: var(--ti-common-color-light);
+  --ti-upload-list-picture-card-item-text-color: var(--ti-common-color-light);
+  --ti-upload-list-successful-status-bg-color: var(--ti-common-color-success-normal);
 }
diff --git a/packages/theme/src/user-card/vars.less b/packages/theme/src/user-card/vars.less
index ccde2816a..b99fd1b54 100644
--- a/packages/theme/src/user-card/vars.less
+++ b/packages/theme/src/user-card/vars.less
@@ -11,8 +11,8 @@
 */
 
 .component-css-vars-user-card() {
-  --ti-usercard-border-color: var(--ti-base-color-border);
-  --ti-usercard-image-border-radius: var(--ti-base-radius-large);
+  --ti-usercard-border-color: var(--ti-common-color-border);
+  --ti-usercard-image-border-radius: var(--ti-common-radius-large);
   --ti-usercard-state-online-text-color: #33cc00;
   --ti-usercard-state-busy-text-color: #ff3300;
   --ti-usercard-state-goaway-text-color: #ffae00;
diff --git a/packages/theme/src/user-contact/vars.less b/packages/theme/src/user-contact/vars.less
index 169074932..d7fb38c2e 100644
--- a/packages/theme/src/user-contact/vars.less
+++ b/packages/theme/src/user-contact/vars.less
@@ -11,13 +11,13 @@
 */
 
 .component-css-vars-user-contact() {
-  --ti-user-contact-roleInfo-text-color: var(--ti-base-color-info-normal);
+  --ti-user-contact-roleInfo-text-color: var(--ti-common-color-info-normal);
   --ti-user-contact-roleInfo-font-size: var(--ti-common-font-size-base);
-  --ti-user-contact-card-message-text-color: var(--ti-base-color-placeholder);
+  --ti-user-contact-card-message-text-color: var(--ti-common-color-placeholder);
   --ti-user-contact-card-border-color: #ddd;
   --ti-user-contact-card-header-bg-color: #3f4251;
-  --ti-user-contact-card-header-role-text-color: var(--ti-base-color-light);
+  --ti-user-contact-card-header-role-text-color: var(--ti-common-color-light);
   --ti-user-contact-card-header-role-font-size: var(--ti-common-font-size-2);
   --ti-user-contact-card-header-roleNum-text-color: #b9babc;
-  --ti-user-contact-card-espace-text-color: var(--ti-base-color-placeholder);
+  --ti-user-contact-card-espace-text-color: var(--ti-common-color-placeholder);
 }
diff --git a/packages/theme/src/user-link/vars.less b/packages/theme/src/user-link/vars.less
index d85229827..6d55b6621 100644
--- a/packages/theme/src/user-link/vars.less
+++ b/packages/theme/src/user-link/vars.less
@@ -12,7 +12,7 @@
 
 .component-css-vars-user-link() {
   --ti-user-link-font-size: var(--ti-common-font-size-base);
-  --ti-user-link-text-color: var(--ti-base-color-info-normal);
+  --ti-user-link-text-color: var(--ti-common-color-info-normal);
   --ti-user-link-font-weight: var(--ti-common-font-weight-7);
-  --ti-user-link-border-radius: var(--ti-base-radius-large);
+  --ti-user-link-border-radius: var(--ti-common-radius-large);
 }
diff --git a/packages/theme/src/user/vars.less b/packages/theme/src/user/vars.less
index 0ee9390d3..758ac52bc 100644
--- a/packages/theme/src/user/vars.less
+++ b/packages/theme/src/user/vars.less
@@ -12,6 +12,6 @@
 
 .component-css-vars-user() {
   --ti-user-font-size: var(--ti-common-font-size-base);
-  --ti-user-tag-bg-color: var(--ti-base-color-hover-background);
+  --ti-user-tag-bg-color: var(--ti-common-color-hover-background);
   --ti-user-svg-text-color: var(--ti-base-color-brand-6);
 }
diff --git a/packages/theme/src/vars.less b/packages/theme/src/vars.less
index cadd1132c..fbc8709cd 100644
--- a/packages/theme/src/vars.less
+++ b/packages/theme/src/vars.less
@@ -24,30 +24,42 @@
 @import './carousel/vars.less';
 @import './carousel-item/vars.less';
 @import './checkbox/vars.less';
+@import './date-panel/vars.less';
+@import './date-picker/vars.less';
+@import './date-range/vars.less';
+@import './date-table/vars.less';
 @import './dialog-box/vars.less';
 @import './espace/vars.less';
 @import './fall-menu/vars.less';
 @import './floatbar/vars.less';
 @import './form-item/vars.less';
+@import './grid/vars.less';
 @import './input/vars.less';
 @import './ip-address/vars.less';
 @import './loading/vars.less';
 @import './menubar/vars.less';
 @import './milestone/vars.less';
+@import './month-range/vars.less';
+@import './month-table/vars.less';
 @import './pager/vars.less';
 @import './panel/vars.less';
 @import './popover/vars.less';
-@import './slider/vars.less';
 @import './radio/vars.less';
+@import './slider/vars.less';
 @import './scroll-text/vars.less';
 @import './search/vars.less';
 @import './slide-bar/vars.less';
+@import './tooltip/vars.less';
 @import './split/vars.less';
 @import './steps/vars.less';
 @import './switch/vars.less';
-@import './grid/vars.less';
 @import './tabs/vars.less';
 @import './tag/vars.less';
+@import './time-panel/vars.less';
+@import './time-picker/vars.less';
+@import './time-range/vars.less';
+@import './time-select/vars.less';
+@import './time-spinner/vars.less';
 @import './user-contact/vars.less';
 @import './user-head/vars.less';
-@import './tooltip/vars.less';
+@import './year-table/vars.less';
diff --git a/packages/theme/src/wizard/vars.less b/packages/theme/src/wizard/vars.less
index 61325dd7f..9d925b2b0 100644
--- a/packages/theme/src/wizard/vars.less
+++ b/packages/theme/src/wizard/vars.less
@@ -12,10 +12,10 @@
 
 .component-css-vars-wizard() {
   --ti-wizard-font-size: var(--ti-common-font-size-base);
-  --ti-wizard-text-color: var(--ti-base-color-info-normal);
-  --ti-wizard-icon-color: var(--ti-base-color-light);
+  --ti-wizard-text-color: var(--ti-common-color-info-normal);
+  --ti-wizard-icon-color: var(--ti-common-color-light);
   --ti-wizard-icon-bg-color: var(--ti-base-color-brand-6);
   --ti-wizard-detail-border-radius: var(--ti-common-border-radius-normal);
-  --ti-wizard-detail-bg-color: var(--ti-base-color-warning-normal);
+  --ti-wizard-detail-bg-color: var(--ti-common-color-warning-normal);
   --ti-wizard-chart-icon-bg-color: #d9d9d9;
 }
diff --git a/packages/theme/src/year-table/index.less b/packages/theme/src/year-table/index.less
new file mode 100644
index 000000000..aa02a4e89
--- /dev/null
+++ b/packages/theme/src/year-table/index.less
@@ -0,0 +1,74 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@year-table-prefix-cls: ~'@{css-prefix}year-table';
+
+.@{year-table-prefix-cls} {
+  .component-css-vars-year-table();
+
+  font-size: var(--ti-date-picker-font-size);
+  margin: -1px;
+  border-collapse: collapse;
+
+  td {
+    text-align: center;
+    cursor: pointer;
+
+    &.today {
+      .cell {
+        color: var(--ti-year-table-td-text-color);
+        font-weight: 700;
+      }
+    }
+
+    &.disabled {
+      .cell {
+        background-color: var(--ti-date-picker-disabled-bg-color);
+        cursor: not-allowed;
+        color: var(--ti-date-picker-disabled-text-color);
+
+        &:hover {
+          color: var(--ti-date-picker-disabled-text-color);
+        }
+      }
+    }
+
+    .cell {
+      width: 48px;
+      height: 24px;
+      line-height: 24px;
+      display: block;
+      color: var(--ti-date-picker-text-color);
+      margin: 0 auto;
+      border-radius: 2px;
+      &:hover {
+        background: var(--ti-date-picker-hover-bg-color);
+      }
+    }
+
+    &.current:not(.disabled) .cell {
+      color: var(--ti-date-table-td-nomal-text-color);
+      background: var(--ti-date-picker-current-select-bg-color);
+    }
+  }
+
+  td.available {
+    padding: 16px 3px;
+  }
+
+  .@{css-prefix}icon {
+    color: var(--ti-year-table-td-icon-color);
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/src/year-table/vars.less b/packages/theme/src/year-table/vars.less
new file mode 100644
index 000000000..d519619d5
--- /dev/null
+++ b/packages/theme/src/year-table/vars.less
@@ -0,0 +1,16 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-year-table() {
+  --ti-year-table-td-text-color: var(--ti-base-color-brand-7);
+  --ti-year-table-td-icon-color: #303133;
+}
diff --git a/packages/vue/src/breadcrumb-item/src/pc.vue b/packages/vue/src/breadcrumb-item/src/pc.vue
index a014ca7e0..4b60cc628 100644
--- a/packages/vue/src/breadcrumb-item/src/pc.vue
+++ b/packages/vue/src/breadcrumb-item/src/pc.vue
@@ -11,12 +11,13 @@
  -->
 <template>
   <span class="tiny-breadcrumb__item">
-    <span :class="['tiny-breadcrumb__inner', to ? 'is-link' : '']" ref="link" role="link">
+    <span :class="['tiny-breadcrumb__inner', to ? 'is-link' : '']" ref="link" role="link" @click="linkClick">
       <slot>
         <span>{{ label }}</span>
       </slot>
     </span>
-    <component v-if="breadcrumb.separatorIcon" :is="breadcrumb.separatorIcon" class="tiny-svg-size tiny-breadcrumb__separator-cls" />
+    <component v-if="breadcrumb.separatorIcon" :is="breadcrumb.separatorIcon"
+      class="tiny-svg-size tiny-breadcrumb__separator-cls" />
     <span v-else class="tiny-breadcrumb__separator">{{ breadcrumb.separator }}</span>
   </span>
 </template>
diff --git a/packages/vue/src/date-panel/index.ts b/packages/vue/src/date-panel/index.ts
index ba6ac772d..304b35e55 100644
--- a/packages/vue/src/date-panel/index.ts
+++ b/packages/vue/src/date-panel/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import DatePanel from './src/index.vue'
+import '@opentiny/vue-theme/date-panel/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/date-picker/index.ts b/packages/vue/src/date-picker/index.ts
index 16ad9a29a..e47ef566d 100644
--- a/packages/vue/src/date-picker/index.ts
+++ b/packages/vue/src/date-picker/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import DatePicker from './src/index.js'
+import '@opentiny/vue-theme/date-picker/index.less'
 import { version } from './package.json'
 
 DatePicker.model = {
diff --git a/packages/vue/src/date-range/index.ts b/packages/vue/src/date-range/index.ts
index 42400eae2..138ec6910 100644
--- a/packages/vue/src/date-range/index.ts
+++ b/packages/vue/src/date-range/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import DateRange from './src/index.vue'
+import '@opentiny/vue-theme/date-range/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/date-table/index.ts b/packages/vue/src/date-table/index.ts
index 0770d36c9..c31539c3a 100644
--- a/packages/vue/src/date-table/index.ts
+++ b/packages/vue/src/date-table/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import DateTable from './src/index.vue'
+import '@opentiny/vue-theme/date-table/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/month-range/index.ts b/packages/vue/src/month-range/index.ts
index baffc81c2..01e7599ff 100644
--- a/packages/vue/src/month-range/index.ts
+++ b/packages/vue/src/month-range/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import MonthRange from './src/index.vue'
+import '@opentiny/vue-theme/month-range/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/month-table/index.ts b/packages/vue/src/month-table/index.ts
index 447cb064b..3e082fe33 100644
--- a/packages/vue/src/month-table/index.ts
+++ b/packages/vue/src/month-table/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import MonthTable from './src/index.vue'
+import '@opentiny/vue-theme/month-table/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/time-panel/index.ts b/packages/vue/src/time-panel/index.ts
index fb231fc66..d07bad59f 100644
--- a/packages/vue/src/time-panel/index.ts
+++ b/packages/vue/src/time-panel/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import TimePanel from './src/index.vue'
+import '@opentiny/vue-theme/date-panel/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/time-range/index.ts b/packages/vue/src/time-range/index.ts
index b9a3d0eb8..357063dae 100644
--- a/packages/vue/src/time-range/index.ts
+++ b/packages/vue/src/time-range/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import TimeRange from './src/index.vue'
+import '@opentiny/vue-theme/time-range/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/time-spinner/index.ts b/packages/vue/src/time-spinner/index.ts
index 6626fe504..65315cdf5 100644
--- a/packages/vue/src/time-spinner/index.ts
+++ b/packages/vue/src/time-spinner/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import TimeSpinner from './src/index.vue'
+import '@opentiny/vue-theme/time-spinner/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/time/index.ts b/packages/vue/src/time/index.ts
index 1842b478a..a8f4ce07b 100644
--- a/packages/vue/src/time/index.ts
+++ b/packages/vue/src/time/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import Time from './src/index.vue'
+import '@opentiny/vue-theme/time-panel/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/tooltip/src/index.vue b/packages/vue/src/tooltip/src/index.vue
index f06294c9a..13edc0fd3 100644
--- a/packages/vue/src/tooltip/src/index.vue
+++ b/packages/vue/src/tooltip/src/index.vue
@@ -131,6 +131,7 @@ export default defineComponent({
       this.d({
         popperVM: {
           get: () =>
+            // 使用适配器里的createComponent创建一个新的vue的vnode节点为一个新组件，挂载到el下面去
             createComponent({
               el: document.createElement('div'),
               component: {
@@ -147,6 +148,8 @@ export default defineComponent({
                     this.debounceClose()
                   }
 
+                  this.$nextTick(() => this.updatePopper())
+
                   return h('transition', propsData, [
                     <div
                       ref="popper"
@@ -196,6 +199,7 @@ export default defineComponent({
       return 'tiny-tooltip ' + className.replace(/\btiny-tooltip\b/g, '').trim()
     }
 
+    // 查找默认的slots, 并把它渲染到组件所在位置上。
     const getFirstElement = () => {
       const slots = this.slots.default && this.slots.default()
 
diff --git a/packages/vue/src/year-table/index.ts b/packages/vue/src/year-table/index.ts
index 6f3778849..cb3b3c1de 100644
--- a/packages/vue/src/year-table/index.ts
+++ b/packages/vue/src/year-table/index.ts
@@ -10,6 +10,7 @@
  *
  */
 import YearTable from './src/index.vue'
+import '@opentiny/vue-theme/year-table/index.less'
 import { version } from './package.json'
 
 /* istanbul ignore next */