fix: fix conflict (#135)

Co-authored-by: OpenTiny <opentiny@sina.com>
2023-04-13 20:41:25 +08:00 · 2023-04-13 20:41:25 +08:00 · 2741062003
parent d64df1f17b
commit 2741062003
179 changed files with 3097 additions and 3683 deletions
--- 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
--- 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)
      }
    }

--- 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>
--- 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' }]
      }
    }
--- a/examples/docs/vite-plugins/vite-plugin-uno-preset.ts
+++ b/examples/docs/vite-plugins/vite-plugin-uno-preset.ts
--- 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",
--- a/examples/vue2.7/vite-plugins/vite-plugin-uno-preset.ts
+++ b/examples/vue2.7/vite-plugins/vite-plugin-uno-preset.ts
@ -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
-    }
-  }
-]
--- 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(), '')
--- 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",
--- a/examples/vue2/vite-plugins/vite-plugin-uno-preset.ts
+++ b/examples/vue2/vite-plugins/vite-plugin-uno-preset.ts
@ -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
-    }
-  }
-]
--- 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(), '')
--- 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",
--- 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(), '')
--- a/internals/vue-vite-import/README.md
+++ 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
+  ]
+  // ...
+}
+```
--- a/internals/vue-vite-import/example/js/index.html
+++ 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>
--- a/internals/vue-vite-import/example/js/package.json
+++ 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": ""
+}
--- a/internals/vue-vite-import/example/js/src/App.vue
+++ 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>
--- a/internals/vue-vite-import/example/js/src/main.js
+++ 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')
--- a/internals/vue-vite-import/example/js/vite.config.js
+++ 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)
+  }
+}
--- a/internals/vue-vite-import/example/ts/README.md
+++ 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.
--- a/internals/vue-vite-import/example/ts/index.html
+++ 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>
--- a/internals/vue-vite-import/example/ts/package.json
+++ 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"
+  }
+}
--- a/internals/vue-vite-import/example/ts/src/App.vue
+++ 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>
--- a/internals/vue-vite-import/example/ts/src/main.ts
+++ 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')
--- a/internals/vue-vite-import/example/ts/src/style.css
+++ 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;
+  }
+}
--- a/internals/vue-vite-import/example/ts/src/vite-env.d.ts
+++ b/internals/vue-vite-import/example/ts/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/internals/vue-vite-import/example/ts/tsconfig.json
+++ 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" }]
+}
--- a/internals/vue-vite-import/example/ts/tsconfig.node.json
+++ 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"]
+}
--- a/internals/vue-vite-import/example/ts/vite.config.ts
+++ 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 }
+  }
+}
--- a/internals/vue-vite-import/package.json
+++ 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"
+  }
+}
--- a/internals/vue-vite-import/src/index.ts
+++ 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
+}
--- a/internals/vue-vite-import/src/typings.d.ts
+++ b/internals/vue-vite-import/src/typings.d.ts
@ -0,0 +1 @@
+declare module '*.json';
--- a/internals/vue-vite-import/tsconfig.json
+++ 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"]
+}
--- 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",
--- 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
 }
--- 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 || ''
--- 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)
+        }
+      }
    }
-  }
-}
--- 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)
--- 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"
  }
 }
--- a/packages/theme/scripts/build-theme-json.js
+++ 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))
+})
--- 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);
--- 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);
    }
  }
 }
--- 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);
 }
--- 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);
 }
--- 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;
 }
--- a/packages/theme/src/base/comp.less
+++ b/packages/theme/src/base/comp.less
@ -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);
-}
--- a/packages/theme/src/base/index-global.less
+++ b/packages/theme/src/base/index-global.less
@ -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';
--- a/packages/theme/src/base/index.js
+++ b/packages/theme/src/base/index.js
@ -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'
-}
--- a/packages/theme/src/base/root.less
+++ b/packages/theme/src/base/root.less
@ -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";
-  }
--- 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;
--- 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);
 }
--- 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);
 }
--- 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);

--- 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);
--- 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);
 }
--- 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);
 }
--- 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);
--- 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);
 }
--- 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);
 }
--- 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;
 }
--- 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;
--- 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';
--- 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;
--- 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%';
 }
--- a/packages/theme/src/checkbox/index.js
+++ b/packages/theme/src/checkbox/index.js
@ -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'
-}
--- 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);
--- 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);
--- 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);
 }
--- 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);
 }
--- 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';
--- a/packages/theme/src/date-panel/index.less
+++ 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;
+    }
+  }
+}
--- a/packages/theme/src/date-panel/vars.less
+++ 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);
+}
--- a/packages/theme/src/date-picker/index.less
+++ 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;
+  }
+}
--- a/packages/theme/src/date-picker/vars.less
+++ 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);
+}
--- a/packages/theme/src/date-range/index.less
+++ 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);
+    }
+  }
+}
--- a/packages/theme/src/date-range/vars.less
+++ 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;
+}
--- a/packages/theme/src/date-table/index.less
+++ 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;
+  }
+}
--- a/packages/theme/src/date-table/vars.less
+++ 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);
+}
--- 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);
 }
--- 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;
 }
--- 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);
--- 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);
--- 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);
--- 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);
 }
--- 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);
 }
--- 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);
--- 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;
--- 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);
--- 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;
 }
--- 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;
--- 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';
--- 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);
--- 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);
--- 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);
 }
--- 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);
 }
--- 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;
--- 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);
--- 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;
 }
--- a/packages/theme/src/month-range/index.less
+++ b/packages/theme/src/month-range/index.less
--- a/packages/theme/src/month-range/vars.less
+++ b/packages/theme/src/month-range/vars.less
--- a/Show More
+++ b/Show More