From 53c7de78b0c47fa81334cc2f142b3c09f42c594a Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 13 Dec 2023 21:34:20 +0800
Subject: [PATCH] refactor!: use theme prop instead of theme:d22 ui, and add
 back prefix mixin

---
 packages/veui/demo/cases/ConfigProvider.vue   |   7 +-
 packages/veui/src/components/Accordion.vue    |   3 +-
 packages/veui/src/components/Alert.vue        |   2 +
 packages/veui/src/components/AlertBox.vue     |   2 +
 packages/veui/src/components/Anchor.vue       |   3 +-
 .../components/Autocomplete/Autocomplete.vue  |   5 +-
 packages/veui/src/components/Badge.vue        |   2 +
 packages/veui/src/components/Breadcrumb.vue   |   3 +-
 .../veui/src/components/BreadcrumbItem.vue    |   3 +-
 packages/veui/src/components/Button.vue       |   3 +-
 packages/veui/src/components/ButtonGroup.vue  |   3 +-
 .../veui/src/components/Calendar/Calendar.vue |   2 +
 .../veui/src/components/Carousel/Carousel.vue |   3 +-
 .../src/components/Carousel/_Indicator.vue    |   5 +-
 .../veui/src/components/Carousel/_Slide.vue   |   1 -
 .../veui/src/components/Carousel/_mixin.js    |   4 +-
 .../veui/src/components/Cascader/Cascader.vue |   4 +-
 .../src/components/Cascader/CascaderPane.vue  |   2 +
 .../veui/src/components/CheckButtonGroup.vue  |   2 +
 packages/veui/src/components/Checkbox.vue     |   2 +
 .../veui/src/components/CheckboxGroup.vue     |   2 +
 packages/veui/src/components/Collapse.vue     |   2 +
 packages/veui/src/components/ConfirmBox.vue   |   2 +
 packages/veui/src/components/DatePicker.vue   |   2 +
 packages/veui/src/components/Dialog.vue       |  11 +-
 packages/veui/src/components/Drawer.vue       |   4 +-
 packages/veui/src/components/Dropdown.vue     |   2 +
 packages/veui/src/components/Embedded.vue     |   5 +-
 packages/veui/src/components/Empty.vue        |   3 +-
 packages/veui/src/components/FilterPanel.vue  |   3 +-
 packages/veui/src/components/Form/Field.vue   |   2 +
 .../veui/src/components/Form/Fieldset.vue     |   3 +-
 packages/veui/src/components/Form/Form.vue    |   2 +
 .../veui/src/components/Grid/GridColumn.vue   |   5 +-
 .../src/components/Grid/GridContainer.vue     |   5 +-
 packages/veui/src/components/Grid/GridRow.vue |   5 +-
 packages/veui/src/components/Icon.vue         |   4 +-
 packages/veui/src/components/Input.vue        |   2 +
 packages/veui/src/components/InputGroup.vue   |   3 +-
 packages/veui/src/components/Label.vue        |   3 +-
 .../veui/src/components/Layout/Content.vue    |   5 +-
 .../veui/src/components/Layout/Footer.vue     |   5 +-
 .../veui/src/components/Layout/Header.vue     |   5 +-
 .../veui/src/components/Layout/Layout.vue     |   5 +-
 .../veui/src/components/Layout/Sidebar.vue    |   2 +
 packages/veui/src/components/Lightbox.vue     |   2 +
 packages/veui/src/components/Link.vue         |   3 +-
 packages/veui/src/components/Loading.vue      |   3 +-
 packages/veui/src/components/LoadingBar.vue   |   3 +-
 packages/veui/src/components/Menu/_mixin.js   |   3 +-
 packages/veui/src/components/Message.vue      |   3 +-
 packages/veui/src/components/NumberInput.vue  |   2 +
 packages/veui/src/components/Overlay.vue      |   8 +-
 packages/veui/src/components/Pagination.vue   |   2 +
 packages/veui/src/components/Popover.vue      |   3 +-
 packages/veui/src/components/Progress.vue     |   3 +-
 packages/veui/src/components/PromptBox.vue    |   2 +
 packages/veui/src/components/Radio.vue        |   2 +
 .../veui/src/components/RadioButtonGroup.vue  |   2 +
 packages/veui/src/components/RadioGroup.vue   |   2 +
 packages/veui/src/components/Rating.vue       |   2 +
 packages/veui/src/components/RegionPicker.vue |   3 +-
 packages/veui/src/components/Schedule.vue     |   3 +-
 packages/veui/src/components/SearchBox.vue    |   2 +
 .../veui/src/components/Select/Option.vue     |   3 +-
 .../src/components/Select/OptionGroup.vue     |   2 +
 .../veui/src/components/Select/Select.vue     |   2 +
 packages/veui/src/components/Slider.vue       |   2 +
 packages/veui/src/components/Span.vue         |   6 +-
 packages/veui/src/components/Stack.vue        |   6 +-
 packages/veui/src/components/Steps.vue        |   3 +-
 packages/veui/src/components/Switch.vue       |   2 +
 packages/veui/src/components/Table/Table.vue  |   4 +-
 packages/veui/src/components/Table/_Body.js   |   4 +-
 .../veui/src/components/Table/_ColGroup.js    |   4 +-
 packages/veui/src/components/Table/_Foot.js   |   4 +-
 packages/veui/src/components/Table/_Head.js   |   4 +-
 .../veui/src/components/Table/_HeadCell.js    |   4 +-
 packages/veui/src/components/Table/_Row.js    |   6 +-
 .../veui/src/components/Table/_Sorter.vue     |   4 +-
 packages/veui/src/components/Tabs/Tab.vue     |   4 +-
 packages/veui/src/components/Tabs/Tabs.vue    |   4 +-
 packages/veui/src/components/Tag.vue          |   2 +
 packages/veui/src/components/TagInput.vue     |   2 +
 packages/veui/src/components/Textarea.vue     |   2 +
 .../src/components/TimePicker/TimePicker.vue  |   2 +
 packages/veui/src/components/Toast.vue        |   2 +
 packages/veui/src/components/ToastList.vue    |   4 +-
 packages/veui/src/components/Tooltip.vue      |   2 +
 .../veui/src/components/Transfer/Transfer.vue |   8 +-
 .../components/Transfer/_CandidatePanel.vue   |   9 +-
 .../components/Transfer/_SelectedPanel.vue    |  10 +-
 packages/veui/src/components/Tree/Tree.vue    |   2 +
 .../src/components/Tree/_AbstractTree.vue     |   6 +-
 .../veui/src/components/Uploader/Uploader.vue |   2 +
 .../src/components/Uploader/_Controls.vue     |   4 +-
 .../src/components/Uploader/_FileUploader.vue |   4 +-
 .../components/Uploader/_MediaUploader.vue    |   4 +-
 .../veui/src/components/Uploader/_mixin.js    |   6 +-
 .../veui/src/components/_SearchResult.vue     |   4 +-
 .../veui/src/components/_SelectTrigger.vue    |   4 +-
 .../veui/src/directives/drag/SortHandler.js   |   2 +-
 packages/veui/src/managers/context.js         | 104 +++++++++---------
 packages/veui/src/managers/tooltip.js         |   2 +-
 packages/veui/src/mixins/carousel.js          |   3 +-
 packages/veui/src/mixins/config.js            |  41 +++++--
 packages/veui/src/mixins/prefix.js            |  43 ++++++++
 packages/veui/src/mixins/ui.js                |  75 +++----------
 .../specs/components/ConfigProvider.spec.js   |   9 ++
 .../veui/test/unit/specs/mixins/ui.spec.js    |  15 +--
 110 files changed, 393 insertions(+), 254 deletions(-)
 create mode 100644 packages/veui/src/mixins/prefix.js

diff --git a/packages/veui/demo/cases/ConfigProvider.vue b/packages/veui/demo/cases/ConfigProvider.vue
index b2f4571ad..6f4aa45f6 100644
--- a/packages/veui/demo/cases/ConfigProvider.vue
+++ b/packages/veui/demo/cases/ConfigProvider.vue
@@ -21,11 +21,7 @@
       </veui-config-provider>
     </section>
     <section class="case">
-      <veui-collapse
-        expanded
-        label="UI theme"
-        :ui="contextValue.theme ? `theme:${contextValue.theme}` : 'theme:d20'"
-      >
+      <veui-collapse expanded label="UI theme" :theme="contextValue.theme">
         <veui-stack gap="xs">
           <veui-input clearable/>
           <veui-button ui="primary">OK</veui-button>
@@ -172,6 +168,7 @@ export default {
         { label: '全中有高亮', value: 'all_h' }
       ],
       themes: [
+        { label: '不设置', value: undefined },
         { label: 'D20', value: '' },
         { label: 'D22', value: 'd22' },
         { label: 'AI', value: 'ai' }
diff --git a/packages/veui/src/components/Accordion.vue b/packages/veui/src/components/Accordion.vue
index bf3e4ddc8..6736e3ced 100644
--- a/packages/veui/src/components/Accordion.vue
+++ b/packages/veui/src/components/Accordion.vue
@@ -7,6 +7,7 @@
 <script>
 import ui from '../mixins/ui'
 import { useParent } from '../mixins/coupled'
+import prefix from '../mixins/prefix'
 import useControllable from '../mixins/controllable'
 import { clone } from 'lodash'
 import { togglePositionProp } from './Collapse'
@@ -19,7 +20,7 @@ let accordion = useParent('accordion', 'accordion-item', {
 export default {
   name: 'veui-accordion',
   uiTypes: ['accordion'],
-  mixins: [ui, accordion, useControllable(['expanded'])],
+  mixins: [prefix, ui, accordion, useControllable(['expanded'])],
   props: {
     multiple: Boolean,
     disabled: Boolean,
diff --git a/packages/veui/src/components/Alert.vue b/packages/veui/src/components/Alert.vue
index a63b505bf..d1646d39c 100644
--- a/packages/veui/src/components/Alert.vue
+++ b/packages/veui/src/components/Alert.vue
@@ -95,6 +95,7 @@ import Icon from './Icon'
 import Button from './Button'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
+import prefix from '../mixins/prefix'
 import useControllable from '../mixins/controllable'
 import { useRename } from '../mixins/deprecate'
 import '../common/global'
@@ -106,6 +107,7 @@ export default {
     'veui-button': Button
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     useControllable(['open', 'index']),
diff --git a/packages/veui/src/components/AlertBox.vue b/packages/veui/src/components/AlertBox.vue
index b68244844..98fca68b6 100644
--- a/packages/veui/src/components/AlertBox.vue
+++ b/packages/veui/src/components/AlertBox.vue
@@ -53,6 +53,7 @@ import useConfig from '../mixins/config'
 import config from '../managers/config'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
+import prefix from '../mixins/prefix'
 import overlay from '../mixins/overlay'
 import useControllable from '../mixins/controllable'
 import { useRename } from '../mixins/deprecate'
@@ -73,6 +74,7 @@ export default {
     'veui-icon': Icon
   },
   mixins: [
+    prefix,
     ui,
     overlay,
     i18n,
diff --git a/packages/veui/src/components/Anchor.vue b/packages/veui/src/components/Anchor.vue
index 17334e35d..60c0ea247 100644
--- a/packages/veui/src/components/Anchor.vue
+++ b/packages/veui/src/components/Anchor.vue
@@ -33,6 +33,7 @@
 import Tree from './Tree'
 import Link from './Link'
 import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 import { debounce, reduce, startsWith, includes, get } from 'lodash'
 import {
   scrollToAlign,
@@ -96,7 +97,7 @@ export default {
     'veui-tree': Tree,
     'veui-link': Link
   },
-  mixins: [ui],
+  mixins: [prefix, ui],
   props: {
     items: Tree.props.datasource,
     sticky: Boolean,
diff --git a/packages/veui/src/components/Autocomplete/Autocomplete.vue b/packages/veui/src/components/Autocomplete/Autocomplete.vue
index 1e9c8013d..8019f82de 100644
--- a/packages/veui/src/components/Autocomplete/Autocomplete.vue
+++ b/packages/veui/src/components/Autocomplete/Autocomplete.vue
@@ -57,7 +57,7 @@
               :separator-class="
                 $c('autocomplete-search-result-item-separator')
               "
-              :theme-variant="uiThemeVariant"
+              :theme-variant="themeVariant"
             />
             <span v-else>{{ props.label }}</span>
           </slot>
@@ -78,6 +78,7 @@
 </template>
 
 <script>
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import input from '../../mixins/input'
 import { useStrict } from '../../mixins/strict'
@@ -114,7 +115,7 @@ export default {
     'veui-option-group': OptionGroup
   },
   directives: { outside },
-  mixins: [ui, input, overlay, useStrict(['maxlength', 'select'])],
+  mixins: [prefix, ui, input, overlay, useStrict(['maxlength', 'select'])],
   inheritAttrs: false,
   props: {
     suggestTrigger: {
diff --git a/packages/veui/src/components/Badge.vue b/packages/veui/src/components/Badge.vue
index b4d12a645..1c4d2d47d 100644
--- a/packages/veui/src/components/Badge.vue
+++ b/packages/veui/src/components/Badge.vue
@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import { isNumber } from 'lodash'
 import config from '../managers/config'
@@ -45,6 +46,7 @@ config.defaults(
 export default {
   name: 'veui-badge',
   mixins: [
+    prefix,
     ui,
     useConfig('config', 'badge'),
     useRename(
diff --git a/packages/veui/src/components/Breadcrumb.vue b/packages/veui/src/components/Breadcrumb.vue
index 4000df10f..ce09b0202 100644
--- a/packages/veui/src/components/Breadcrumb.vue
+++ b/packages/veui/src/components/Breadcrumb.vue
@@ -1,11 +1,12 @@
 <script>
 import BreadcrumbItem from './BreadcrumbItem'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import '../common/global'
 
 export default {
   name: 'veui-breadcrumb',
-  mixins: [ui],
+  mixins: [prefix, ui],
   props: {
     routes: {
       type: Array,
diff --git a/packages/veui/src/components/BreadcrumbItem.vue b/packages/veui/src/components/BreadcrumbItem.vue
index d38e2f10c..11004d562 100644
--- a/packages/veui/src/components/BreadcrumbItem.vue
+++ b/packages/veui/src/components/BreadcrumbItem.vue
@@ -24,6 +24,7 @@
 
 <script>
 import { includes } from 'lodash'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import Link from './Link'
 import Icon from './Icon'
@@ -37,7 +38,7 @@ export default {
     'veui-link': Link,
     'veui-icon': Icon
   },
-  mixins: [ui],
+  mixins: [prefix, ui],
   props: {
     to: [String, Object],
     // TODO: 提供replace这个属性缺少实际use case？
diff --git a/packages/veui/src/components/Button.vue b/packages/veui/src/components/Button.vue
index a19d8d5cd..27e985d5c 100644
--- a/packages/veui/src/components/Button.vue
+++ b/packages/veui/src/components/Button.vue
@@ -1,6 +1,7 @@
 <script>
 import Icon from './Icon'
 import Loading from './Loading'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import focusable from '../mixins/focusable'
 import '../common/global'
@@ -21,7 +22,7 @@ export default {
   components: {
     'veui-icon': Icon
   },
-  mixins: [ui, focusable],
+  mixins: [prefix, ui, focusable],
   inheritAttrs: false,
   props: {
     disabled: Boolean,
diff --git a/packages/veui/src/components/ButtonGroup.vue b/packages/veui/src/components/ButtonGroup.vue
index a9ce17ad6..8f5b7d5fc 100644
--- a/packages/veui/src/components/ButtonGroup.vue
+++ b/packages/veui/src/components/ButtonGroup.vue
@@ -27,6 +27,7 @@
 
 <script>
 import Button from './Button'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import focusable from '../mixins/focusable'
 import { focusIn } from '../utils/dom'
@@ -37,7 +38,7 @@ export default {
   components: {
     'veui-button': Button
   },
-  mixins: [ui, focusable],
+  mixins: [prefix, ui, focusable],
   props: {
     items: {
       type: Array,
diff --git a/packages/veui/src/components/Calendar/Calendar.vue b/packages/veui/src/components/Calendar/Calendar.vue
index f606c60db..63cda8163 100644
--- a/packages/veui/src/components/Calendar/Calendar.vue
+++ b/packages/veui/src/components/Calendar/Calendar.vue
@@ -327,6 +327,7 @@ import {
   isEqual,
   isNumber
 } from 'lodash'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import input from '../../mixins/input'
 import useControllable from '../../mixins/controllable'
@@ -360,6 +361,7 @@ export default {
     InfiniteScroll
   },
   mixins: [
+    prefix,
     ui,
     input,
     i18n,
diff --git a/packages/veui/src/components/Carousel/Carousel.vue b/packages/veui/src/components/Carousel/Carousel.vue
index 46589809a..5710f179a 100644
--- a/packages/veui/src/components/Carousel/Carousel.vue
+++ b/packages/veui/src/components/Carousel/Carousel.vue
@@ -105,6 +105,7 @@ import Icon from '../Icon'
 import Indicator from './_Indicator'
 import Slide, { props as slideProps } from './_Slide'
 import Fade from './_Fade'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import i18n from '../../mixins/i18n'
 import carousel from '../../mixins/carousel'
@@ -120,7 +121,7 @@ export default {
     'veui-carousel-fade': Fade,
     'veui-carousel-slide': Slide
   },
-  mixins: [ui, i18n, carousel],
+  mixins: [prefix, ui, i18n, carousel],
   props: {
     indicator: {
       type: String,
diff --git a/packages/veui/src/components/Carousel/_Indicator.vue b/packages/veui/src/components/Carousel/_Indicator.vue
index efa96869a..38416f21b 100644
--- a/packages/veui/src/components/Carousel/_Indicator.vue
+++ b/packages/veui/src/components/Carousel/_Indicator.vue
@@ -21,12 +21,11 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 
 export default {
   name: 'veui-carousel-indicator',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     type: String,
     labels: Array,
diff --git a/packages/veui/src/components/Carousel/_Slide.vue b/packages/veui/src/components/Carousel/_Slide.vue
index 428f4b34d..d73e77f9c 100644
--- a/packages/veui/src/components/Carousel/_Slide.vue
+++ b/packages/veui/src/components/Carousel/_Slide.vue
@@ -86,7 +86,6 @@ export const props = {
 
 export default {
   name: 'veui-carousel-slide',
-  uiTypes: ['transparent'],
   mixins: [carousel],
   props,
   data () {
diff --git a/packages/veui/src/components/Carousel/_mixin.js b/packages/veui/src/components/Carousel/_mixin.js
index 7b2babebc..b95236478 100644
--- a/packages/veui/src/components/Carousel/_mixin.js
+++ b/packages/veui/src/components/Carousel/_mixin.js
@@ -1,11 +1,11 @@
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import { get, noop } from 'lodash'
 
 export const CUSTOM_GUTTER = '--dls-carousel-slide-gutter'
 export const FALLBACK_GUTTER = '24px'
 
 export default {
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     slideAspectRatio: [String, Number],
     options: Object,
diff --git a/packages/veui/src/components/Cascader/Cascader.vue b/packages/veui/src/components/Cascader/Cascader.vue
index 63224a9d7..623d032aa 100644
--- a/packages/veui/src/components/Cascader/Cascader.vue
+++ b/packages/veui/src/components/Cascader/Cascader.vue
@@ -113,7 +113,7 @@
               :matches="option.matches"
               :separator="icons.separator"
               :separator-class="$c('cascader-search-result-item-separator')"
-              :theme-variant="uiThemeVariant"
+              :theme-variant="themeVariant"
             />
           </template>
           <template
@@ -144,6 +144,7 @@ import useConfig from '../../mixins/config'
 import dropdown from '../../mixins/dropdown'
 import useControllable from '../../mixins/controllable'
 import useSearchable, { getDefaultFilter } from '../../mixins/searchable'
+import prefix from '../../mixins/prefix'
 import i18n from '../../mixins/i18n'
 import useTree from '../../mixins/tree'
 import input from '../../mixins/input'
@@ -180,6 +181,7 @@ export default {
     'veui-select-trigger': SelectTrigger
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     dropdown(),
diff --git a/packages/veui/src/components/Cascader/CascaderPane.vue b/packages/veui/src/components/Cascader/CascaderPane.vue
index 5b89c40e9..328b53b90 100644
--- a/packages/veui/src/components/Cascader/CascaderPane.vue
+++ b/packages/veui/src/components/Cascader/CascaderPane.vue
@@ -145,6 +145,7 @@ import Checkbox from '../Checkbox'
 import Icon from '../Icon'
 import Button from '../Button'
 import Loading from '../Loading'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import keySelect from '../../mixins/key-select'
 import useControllable from '../../mixins/controllable'
@@ -175,6 +176,7 @@ export default {
     outside
   },
   mixins: [
+    prefix,
     ui,
     keySelect,
     useControllable([
diff --git a/packages/veui/src/components/CheckButtonGroup.vue b/packages/veui/src/components/CheckButtonGroup.vue
index 5db4728a1..26471b8ef 100644
--- a/packages/veui/src/components/CheckButtonGroup.vue
+++ b/packages/veui/src/components/CheckButtonGroup.vue
@@ -50,6 +50,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import { focusIn } from '../utils/dom'
@@ -69,6 +70,7 @@ export default {
     'veui-popover': Popover
   },
   mixins: [
+    prefix,
     ui,
     input,
     useControllable({
diff --git a/packages/veui/src/components/Checkbox.vue b/packages/veui/src/components/Checkbox.vue
index 5828ddcb4..521679899 100644
--- a/packages/veui/src/components/Checkbox.vue
+++ b/packages/veui/src/components/Checkbox.vue
@@ -40,6 +40,7 @@
 <script>
 import { pick, includes, pull } from 'lodash'
 import Icon from './Icon'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import useControllable from '../mixins/controllable'
@@ -58,6 +59,7 @@ export default {
     'veui-icon': Icon
   },
   mixins: [
+    prefix,
     ui,
     input,
     focusable,
diff --git a/packages/veui/src/components/CheckboxGroup.vue b/packages/veui/src/components/CheckboxGroup.vue
index d488f7b3d..c8862e2a0 100644
--- a/packages/veui/src/components/CheckboxGroup.vue
+++ b/packages/veui/src/components/CheckboxGroup.vue
@@ -40,6 +40,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import { focusIn } from '../utils/dom'
@@ -59,6 +60,7 @@ export default {
     'veui-popover': Popover
   },
   mixins: [
+    prefix,
     ui,
     input,
     useControllable({
diff --git a/packages/veui/src/components/Collapse.vue b/packages/veui/src/components/Collapse.vue
index 3003d494c..de930438c 100644
--- a/packages/veui/src/components/Collapse.vue
+++ b/packages/veui/src/components/Collapse.vue
@@ -42,6 +42,7 @@ import Icon from './Icon'
 import ExpandTransition from './_ExpandTransition'
 import ui from '../mixins/ui'
 import { useChild } from '../mixins/coupled'
+import prefix from '../mixins/prefix'
 import useControllable from '../mixins/controllable'
 import '../common/global'
 
@@ -63,6 +64,7 @@ export default {
     'veui-expand-transition': ExpandTransition
   },
   mixins: [
+    prefix,
     ui,
     accordionItem,
     useControllable({
diff --git a/packages/veui/src/components/ConfirmBox.vue b/packages/veui/src/components/ConfirmBox.vue
index ef0d7ca6a..58acd7d59 100644
--- a/packages/veui/src/components/ConfirmBox.vue
+++ b/packages/veui/src/components/ConfirmBox.vue
@@ -33,6 +33,7 @@ import { pick } from 'lodash'
 import Dialog from './Dialog'
 import config from '../managers/config'
 import useConfig from '../mixins/config'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import overlay from '../mixins/overlay'
 import useControllable from '../mixins/controllable'
@@ -51,6 +52,7 @@ export default {
     'veui-dialog': Dialog
   },
   mixins: [
+    prefix,
     ui,
     overlay,
     useControllable(['open']),
diff --git a/packages/veui/src/components/DatePicker.vue b/packages/veui/src/components/DatePicker.vue
index 7b8039aa4..620717941 100644
--- a/packages/veui/src/components/DatePicker.vue
+++ b/packages/veui/src/components/DatePicker.vue
@@ -162,6 +162,7 @@ import Overlay from './Overlay'
 import Input from './Input'
 import Calendar from './Calendar'
 import Icon from './Icon'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import dropdown from '../mixins/dropdown'
@@ -239,6 +240,7 @@ export default {
     'veui-input': Input
   },
   mixins: [
+    prefix,
     ui,
     input,
     dropdown(),
diff --git a/packages/veui/src/components/Dialog.vue b/packages/veui/src/components/Dialog.vue
index 57879fd81..dfa56e28c 100644
--- a/packages/veui/src/components/Dialog.vue
+++ b/packages/veui/src/components/Dialog.vue
@@ -82,6 +82,7 @@
 import { pick } from 'lodash'
 import Overlay from './Overlay'
 import Button from './Button'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import overlay from '../mixins/overlay'
 import focusable from '../mixins/focusable'
@@ -101,7 +102,15 @@ export default {
     'veui-icon': Icon
   },
   directives: { outside, drag },
-  mixins: [ui, overlay, modal, focusable, i18n, useControllable(['open'])],
+  mixins: [
+    prefix,
+    ui,
+    overlay,
+    modal,
+    focusable,
+    i18n,
+    useControllable(['open'])
+  ],
   inheritAttrs: false,
   props: {
     modal: {
diff --git a/packages/veui/src/components/Drawer.vue b/packages/veui/src/components/Drawer.vue
index 59ea13da4..d3e958af4 100644
--- a/packages/veui/src/components/Drawer.vue
+++ b/packages/veui/src/components/Drawer.vue
@@ -14,7 +14,7 @@
 <script>
 import Vue from 'vue'
 import Dialog from './Dialog'
-import ui, { prefixify } from '../mixins/ui'
+import prefix, { prefixify } from '../mixins/prefix'
 import useControllable from '../mixins/controllable'
 import '../common/global'
 import { LOOSE_PROP_DEF, normalizeClass, normalizeStyle } from '../utils/helper'
@@ -39,7 +39,7 @@ export default {
   components: {
     'veui-dialog': Dialog
   },
-  mixins: [ui, useControllable(['open'])],
+  mixins: [prefix, useControllable(['open'])],
   inheritAttrs: false,
   props: {
     open: Boolean,
diff --git a/packages/veui/src/components/Dropdown.vue b/packages/veui/src/components/Dropdown.vue
index e1d8cd08f..61d9e829d 100644
--- a/packages/veui/src/components/Dropdown.vue
+++ b/packages/veui/src/components/Dropdown.vue
@@ -148,6 +148,7 @@ import Button from './Button'
 import Overlay from './Overlay'
 import SearchBox from './SearchBox'
 import OptionGroup from './Select/OptionGroup'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import dropdown from '../mixins/dropdown'
 import { useKeySelect } from '../mixins/key-select'
@@ -179,6 +180,7 @@ export default {
     'veui-option-group': OptionGroup
   },
   mixins: [
+    prefix,
     ui,
     dropdown(),
     useKeySelect({
diff --git a/packages/veui/src/components/Embedded.vue b/packages/veui/src/components/Embedded.vue
index 61e708daa..9d03d88cb 100644
--- a/packages/veui/src/components/Embedded.vue
+++ b/packages/veui/src/components/Embedded.vue
@@ -1,12 +1,11 @@
 <script>
 import Dialog from './Dialog'
-import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 import '../common/global'
 
 export default {
   name: 'veui-embedded',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   inheritAttrs: false,
   render (h) {
     let data = {
diff --git a/packages/veui/src/components/Empty.vue b/packages/veui/src/components/Empty.vue
index cb37d85e9..322e8e84d 100644
--- a/packages/veui/src/components/Empty.vue
+++ b/packages/veui/src/components/Empty.vue
@@ -27,12 +27,13 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 
 export default {
   name: 'veui-empty',
-  mixins: [ui, i18n],
+  mixins: [prefix, ui, i18n],
   props: {
     title: String,
     desc: {
diff --git a/packages/veui/src/components/FilterPanel.vue b/packages/veui/src/components/FilterPanel.vue
index 399c4128f..fa41d5e95 100644
--- a/packages/veui/src/components/FilterPanel.vue
+++ b/packages/veui/src/components/FilterPanel.vue
@@ -35,6 +35,7 @@
 
 <script>
 import SearchBox from './SearchBox'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import { includes, debounce, cloneDeep } from 'lodash'
@@ -45,7 +46,7 @@ export default {
   components: {
     'veui-search-box': SearchBox
   },
-  mixins: [ui, i18n],
+  mixins: [prefix, ui, i18n],
   props: {
     title: String,
     datasource: {
diff --git a/packages/veui/src/components/Form/Field.vue b/packages/veui/src/components/Form/Field.vue
index 670e61a68..0d6fb7585 100644
--- a/packages/veui/src/components/Form/Field.vue
+++ b/packages/veui/src/components/Form/Field.vue
@@ -116,6 +116,7 @@ import Label from '../Label'
 import Loading from '../Loading'
 import Message from '../Message'
 import type from '../../managers/type'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import i18n from '../../mixins/i18n'
 import useConfig from '../../mixins/config'
@@ -157,6 +158,7 @@ export default {
     'veui-message': Message
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     useConfig('config', 'field'),
diff --git a/packages/veui/src/components/Form/Fieldset.vue b/packages/veui/src/components/Form/Fieldset.vue
index df0fcc364..d64d0cfd5 100644
--- a/packages/veui/src/components/Form/Fieldset.vue
+++ b/packages/veui/src/components/Form/Fieldset.vue
@@ -25,6 +25,7 @@
  * fieldset 和 field 的区别是 fieldset 只能用来做 ui 上的排列和显示 tip，合并显示 error
  */
 import Field from './Field'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import '../../common/global'
 
@@ -34,7 +35,7 @@ export default {
   components: {
     'veui-field': Field
   },
-  mixins: [ui],
+  mixins: [prefix, ui],
   inheritAttrs: false,
   props: {
     // 因为会出现一行里边有必填和非必填共存，交给使用者决定显不显示星号
diff --git a/packages/veui/src/components/Form/Form.vue b/packages/veui/src/components/Form/Form.vue
index a7d967813..bb1d9cd42 100644
--- a/packages/veui/src/components/Form/Form.vue
+++ b/packages/veui/src/components/Form/Form.vue
@@ -25,6 +25,7 @@ import {
   mergeWith,
   uniq
 } from 'lodash'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import '../../common/global'
 import { pull } from '../../utils/helper'
@@ -44,6 +45,7 @@ export default {
   name: 'veui-form',
   uiTypes: ['form-container'],
   mixins: [
+    prefix,
     ui,
     useFacade((vm) => ({
       // 全写成函数目的：惰性响应式
diff --git a/packages/veui/src/components/Grid/GridColumn.vue b/packages/veui/src/components/Grid/GridColumn.vue
index 99c0e1a82..88fb61e57 100644
--- a/packages/veui/src/components/Grid/GridColumn.vue
+++ b/packages/veui/src/components/Grid/GridColumn.vue
@@ -5,13 +5,12 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import '../../common/global'
 
 export default {
   name: 'veui-grid-column',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     span: {
       type: Number
diff --git a/packages/veui/src/components/Grid/GridContainer.vue b/packages/veui/src/components/Grid/GridContainer.vue
index 0e0e0320d..602ec7899 100644
--- a/packages/veui/src/components/Grid/GridContainer.vue
+++ b/packages/veui/src/components/Grid/GridContainer.vue
@@ -7,7 +7,7 @@
 <script>
 import config from '../../managers/config'
 import useConfig from '../../mixins/config'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import '../../common/global'
 
 config.defaults(
@@ -21,8 +21,7 @@ config.defaults(
 
 export default {
   name: 'veui-grid-container',
-  uiTypes: ['transparent'],
-  mixins: [ui, useConfig('config', 'gridcontainer')],
+  mixins: [prefix, useConfig('config', 'gridcontainer')],
   props: {
     width: {
       type: Number
diff --git a/packages/veui/src/components/Grid/GridRow.vue b/packages/veui/src/components/Grid/GridRow.vue
index 708a7f9b3..568482ed6 100644
--- a/packages/veui/src/components/Grid/GridRow.vue
+++ b/packages/veui/src/components/Grid/GridRow.vue
@@ -5,13 +5,12 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import '../../common/global'
 
 export default {
   name: 'veui-grid-row',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   provide () {
     let { columns, gutter } = this
 
diff --git a/packages/veui/src/components/Icon.vue b/packages/veui/src/components/Icon.vue
index c376b7cfc..d7ad1cc25 100644
--- a/packages/veui/src/components/Icon.vue
+++ b/packages/veui/src/components/Icon.vue
@@ -1,6 +1,6 @@
 <script>
 import FaIcon from 'vue-awesome/components/Icon'
-import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 import '../common/global'
 
 const {
@@ -15,7 +15,7 @@ export default {
   ...options,
   name: 'veui-icon',
   mixins: [
-    ui,
+    prefix,
     {
       computed: {
         classes () {
diff --git a/packages/veui/src/components/Input.vue b/packages/veui/src/components/Input.vue
index c32b33303..8f8458e14 100644
--- a/packages/veui/src/components/Input.vue
+++ b/packages/veui/src/components/Input.vue
@@ -75,6 +75,7 @@
 
 <script>
 import { maska } from '@justfork/maska'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import useControllable from '../mixins/controllable'
@@ -115,6 +116,7 @@ export default {
     maska
   },
   mixins: [
+    prefix,
     ui,
     input,
     activatable,
diff --git a/packages/veui/src/components/InputGroup.vue b/packages/veui/src/components/InputGroup.vue
index 420838bc1..b6e9568f9 100644
--- a/packages/veui/src/components/InputGroup.vue
+++ b/packages/veui/src/components/InputGroup.vue
@@ -6,10 +6,11 @@
 
 <script>
 import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 import '../common/global'
 
 export default {
   name: 'veui-input-group',
-  mixins: [ui]
+  mixins: [ui, prefix]
 }
 </script>
diff --git a/packages/veui/src/components/Label.vue b/packages/veui/src/components/Label.vue
index 52d8ab81e..7f31193b6 100644
--- a/packages/veui/src/components/Label.vue
+++ b/packages/veui/src/components/Label.vue
@@ -7,12 +7,13 @@
 <script>
 import { isFunction } from 'lodash'
 import { getTypedAncestor, isType, isVueComponent } from '../utils/helper'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import '../common/global'
 
 export default {
   name: 'veui-label',
-  mixins: [ui],
+  mixins: [prefix, ui],
   props: {
     for: {
       type:
diff --git a/packages/veui/src/components/Layout/Content.vue b/packages/veui/src/components/Layout/Content.vue
index bfa43aa8c..40059facd 100644
--- a/packages/veui/src/components/Layout/Content.vue
+++ b/packages/veui/src/components/Layout/Content.vue
@@ -5,11 +5,10 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 
 export default {
   name: 'veui-content',
-  uiTypes: ['transparent'],
-  mixins: [ui]
+  mixins: [prefix]
 }
 </script>
diff --git a/packages/veui/src/components/Layout/Footer.vue b/packages/veui/src/components/Layout/Footer.vue
index e5f7d7fd7..cf9320935 100644
--- a/packages/veui/src/components/Layout/Footer.vue
+++ b/packages/veui/src/components/Layout/Footer.vue
@@ -10,12 +10,11 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 
 export default {
   name: 'veui-footer',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     sticky: Boolean
   }
diff --git a/packages/veui/src/components/Layout/Header.vue b/packages/veui/src/components/Layout/Header.vue
index 83252711c..8a9e60a47 100644
--- a/packages/veui/src/components/Layout/Header.vue
+++ b/packages/veui/src/components/Layout/Header.vue
@@ -10,12 +10,11 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 
 export default {
   name: 'veui-header',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     sticky: Boolean
   }
diff --git a/packages/veui/src/components/Layout/Layout.vue b/packages/veui/src/components/Layout/Layout.vue
index 598837d8d..e6423738e 100644
--- a/packages/veui/src/components/Layout/Layout.vue
+++ b/packages/veui/src/components/Layout/Layout.vue
@@ -11,13 +11,12 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import Sidebar from './Sidebar'
 
 export default {
   name: 'veui-layout',
-  uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     direction: {
       type: String,
diff --git a/packages/veui/src/components/Layout/Sidebar.vue b/packages/veui/src/components/Layout/Sidebar.vue
index 295527af5..924ef75d5 100644
--- a/packages/veui/src/components/Layout/Sidebar.vue
+++ b/packages/veui/src/components/Layout/Sidebar.vue
@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import useControllable from '../../mixins/controllable'
 import Button from '../Button'
@@ -55,6 +56,7 @@ export default {
     'veui-icon': Icon
   },
   mixins: [
+    prefix,
     ui,
     useControllable('collapsed'),
     useParent((vm) => ({
diff --git a/packages/veui/src/components/Lightbox.vue b/packages/veui/src/components/Lightbox.vue
index d8e56750e..58342d55f 100644
--- a/packages/veui/src/components/Lightbox.vue
+++ b/packages/veui/src/components/Lightbox.vue
@@ -118,6 +118,7 @@ import { includes } from 'lodash'
 import Button from './Button'
 import Icon from './Icon'
 import Overlay from './Overlay'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import modal from '../mixins/modal'
@@ -134,6 +135,7 @@ export default {
     'veui-overlay': Overlay
   },
   mixins: [
+    prefix,
     ui,
     overlay,
     modal,
diff --git a/packages/veui/src/components/Link.vue b/packages/veui/src/components/Link.vue
index c4763dc09..6336e1625 100644
--- a/packages/veui/src/components/Link.vue
+++ b/packages/veui/src/components/Link.vue
@@ -1,6 +1,7 @@
 <script>
 import { uniq, noop, omit } from 'lodash'
 import config from '../managers/config'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import useConfig from '../mixins/config'
 import '../common/global'
@@ -16,7 +17,7 @@ const ABS_RE = /^(\w+:)?\/\//
 
 export default {
   name: 'veui-link',
-  mixins: [ui, useConfig('config', 'link')],
+  mixins: [prefix, ui, useConfig('config', 'link')],
   inheritAttrs: false,
   props: {
     to: {
diff --git a/packages/veui/src/components/Loading.vue b/packages/veui/src/components/Loading.vue
index 141b4717c..ce99ba05c 100644
--- a/packages/veui/src/components/Loading.vue
+++ b/packages/veui/src/components/Loading.vue
@@ -21,6 +21,7 @@
 <script>
 import { uniqueId } from 'lodash'
 import Icon from './Icon'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import { loadingContent as loading } from 'dls-graphics'
@@ -31,7 +32,7 @@ export default {
   components: {
     'veui-icon': Icon
   },
-  mixins: [ui, i18n],
+  mixins: [prefix, ui, i18n],
   props: {
     loading: Boolean
   },
diff --git a/packages/veui/src/components/LoadingBar.vue b/packages/veui/src/components/LoadingBar.vue
index d866a0786..a1fec2f09 100644
--- a/packages/veui/src/components/LoadingBar.vue
+++ b/packages/veui/src/components/LoadingBar.vue
@@ -12,6 +12,7 @@
 <script>
 import { random } from 'lodash'
 import Progress from './Progress'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import '../common/global'
 
@@ -26,7 +27,7 @@ export default {
   components: {
     'veui-progress': Progress
   },
-  mixins: [ui],
+  mixins: [prefix, ui],
   props: {
     loading: Boolean
   },
diff --git a/packages/veui/src/components/Menu/_mixin.js b/packages/veui/src/components/Menu/_mixin.js
index 376879d1c..79375c595 100644
--- a/packages/veui/src/components/Menu/_mixin.js
+++ b/packages/veui/src/components/Menu/_mixin.js
@@ -4,6 +4,7 @@ import Overlay from '../Overlay'
 import OptionGroup from '../OptionGroup'
 import overlay from '../../mixins/overlay'
 import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import useControllable from '../../mixins/controllable'
 import outside from '../../directives/outside'
 import { find } from '../../utils/datasource'
@@ -19,7 +20,6 @@ export default {
     'veui-option-group': OptionGroup
   },
   uiTypes: ['select'],
-  mixins: [overlay, ui, useControllable(['active'])],
   directives: { outside },
   props: {
     active: String,
@@ -50,6 +50,7 @@ export default {
       return this.exactAndActiveItems ? this.exactAndActiveItems.slice(1) : []
     }
   },
+  mixins: [prefix, overlay, ui, useControllable(['active'])],
   created () {
     if (this.$router) {
       const updateActive = (route) => {
diff --git a/packages/veui/src/components/Message.vue b/packages/veui/src/components/Message.vue
index 04340d966..80edd9c01 100644
--- a/packages/veui/src/components/Message.vue
+++ b/packages/veui/src/components/Message.vue
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import Icon from './Icon'
 import Popover from './Popover'
@@ -33,7 +34,7 @@ export default {
     'veui-icon': Icon,
     'veui-popover': Popover
   },
-  mixins: [ui],
+  mixins: [prefix, ui],
   props: {
     status: {
       type: String,
diff --git a/packages/veui/src/components/NumberInput.vue b/packages/veui/src/components/NumberInput.vue
index 54f4b5152..ef0f9f9db 100644
--- a/packages/veui/src/components/NumberInput.vue
+++ b/packages/veui/src/components/NumberInput.vue
@@ -90,6 +90,7 @@
 <script>
 import Input from './Input'
 import Button from './Button'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import activatable from '../mixins/activatable'
 import input from '../mixins/input'
@@ -127,6 +128,7 @@ export default {
     'veui-button': Button
   },
   mixins: [
+    prefix,
     ui,
     input,
     activatable,
diff --git a/packages/veui/src/components/Overlay.vue b/packages/veui/src/components/Overlay.vue
index 1a9f952dd..6f97f77e9 100644
--- a/packages/veui/src/components/Overlay.vue
+++ b/packages/veui/src/components/Overlay.vue
@@ -5,6 +5,7 @@ import overlayManager from '../managers/overlay'
 import focusManager from '../managers/focus'
 import useConfig from '../mixins/config'
 import config from '../managers/config'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import focusable from '../mixins/focusable'
 import {
@@ -38,7 +39,12 @@ overlayManager.setBaseOrder(config.get('overlay.baseZIndex'))
 export default {
   name: 'veui-overlay',
   uiTypes: ['overlay', 'transparent'],
-  mixins: [ui, focusable, useConfig('config', ['overlay', 'managers.overlay'])],
+  mixins: [
+    prefix,
+    ui,
+    focusable,
+    useConfig('config', ['overlay', 'managers.overlay'])
+  ],
   props: {
     position: String,
     overlayClass: LOOSE_PROP_DEF,
diff --git a/packages/veui/src/components/Pagination.vue b/packages/veui/src/components/Pagination.vue
index cde238172..5b4f2a378 100644
--- a/packages/veui/src/components/Pagination.vue
+++ b/packages/veui/src/components/Pagination.vue
@@ -137,6 +137,7 @@ import Input from './Input'
 import Button from './Button'
 import config from '../managers/config'
 import useConfig from '../mixins/config'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import { useRename } from '../mixins/deprecate'
@@ -185,6 +186,7 @@ export default {
     tooltip
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     useConfig('config', ['pagination']),
diff --git a/packages/veui/src/components/Popover.vue b/packages/veui/src/components/Popover.vue
index 0c6edc166..ad907cbeb 100644
--- a/packages/veui/src/components/Popover.vue
+++ b/packages/veui/src/components/Popover.vue
@@ -2,6 +2,7 @@
 import Tooltip from './Tooltip'
 import Button from './Button'
 import { getNodes } from '../utils/context'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import useControllable from '../mixins/controllable'
@@ -11,7 +12,7 @@ import '../common/global'
 
 export default {
   name: 'veui-popover',
-  mixins: [ui, overlay, i18n, useControllable('open')],
+  mixins: [prefix, ui, overlay, i18n, useControllable('open')],
   inheritAttrs: false,
   props: {
     title: String,
diff --git a/packages/veui/src/components/Progress.vue b/packages/veui/src/components/Progress.vue
index 0bc46cd3c..4aab5dfa8 100644
--- a/packages/veui/src/components/Progress.vue
+++ b/packages/veui/src/components/Progress.vue
@@ -67,6 +67,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import Icon from './Icon'
 import warn from '../utils/warn'
@@ -83,7 +84,7 @@ export default {
   components: {
     'veui-icon': Icon
   },
-  mixins: [ui, useControllable('status')],
+  mixins: [prefix, ui, useControllable('status')],
   props: {
     type: {
       type: String,
diff --git a/packages/veui/src/components/PromptBox.vue b/packages/veui/src/components/PromptBox.vue
index c9fb4dea7..c325f9b06 100644
--- a/packages/veui/src/components/PromptBox.vue
+++ b/packages/veui/src/components/PromptBox.vue
@@ -41,6 +41,7 @@ import Dialog from './Dialog'
 import { pick } from 'lodash'
 import config from '../managers/config'
 import useConfig from '../mixins/config'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import overlay from '../mixins/overlay'
 import useControllable from '../mixins/controllable'
@@ -60,6 +61,7 @@ export default {
     'veui-dialog': Dialog
   },
   mixins: [
+    prefix,
     ui,
     overlay,
     useControllable([
diff --git a/packages/veui/src/components/Radio.vue b/packages/veui/src/components/Radio.vue
index f1312be66..c6104fd0b 100644
--- a/packages/veui/src/components/Radio.vue
+++ b/packages/veui/src/components/Radio.vue
@@ -33,6 +33,7 @@
 
 <script>
 import { pick } from 'lodash'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import activatable from '../mixins/activatable'
@@ -55,6 +56,7 @@ const orphans = new Map()
 export default {
   name: 'veui-radio',
   mixins: [
+    prefix,
     ui,
     input,
     activatable,
diff --git a/packages/veui/src/components/RadioButtonGroup.vue b/packages/veui/src/components/RadioButtonGroup.vue
index 4c114d11d..4ac245587 100644
--- a/packages/veui/src/components/RadioButtonGroup.vue
+++ b/packages/veui/src/components/RadioButtonGroup.vue
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import { focusIn } from '../utils/dom'
@@ -62,6 +63,7 @@ export default {
     'veui-popover': Popover
   },
   mixins: [
+    prefix,
     ui,
     input,
     useControllable({
diff --git a/packages/veui/src/components/RadioGroup.vue b/packages/veui/src/components/RadioGroup.vue
index 6f57e069f..91f9c6a4d 100644
--- a/packages/veui/src/components/RadioGroup.vue
+++ b/packages/veui/src/components/RadioGroup.vue
@@ -38,6 +38,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import { focusIn } from '../utils/dom'
@@ -55,6 +56,7 @@ export default {
     'veui-popover': Popover
   },
   mixins: [
+    prefix,
     ui,
     input,
     useDesc,
diff --git a/packages/veui/src/components/Rating.vue b/packages/veui/src/components/Rating.vue
index 8dcb90d6f..7bf242f8a 100644
--- a/packages/veui/src/components/Rating.vue
+++ b/packages/veui/src/components/Rating.vue
@@ -1,4 +1,5 @@
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import i18n from '../mixins/i18n'
@@ -12,6 +13,7 @@ import '../common/global'
 export default {
   name: 'veui-rating',
   mixins: [
+    prefix,
     ui,
     input,
     i18n,
diff --git a/packages/veui/src/components/RegionPicker.vue b/packages/veui/src/components/RegionPicker.vue
index e8c75d174..42ec3f9f7 100644
--- a/packages/veui/src/components/RegionPicker.vue
+++ b/packages/veui/src/components/RegionPicker.vue
@@ -244,6 +244,7 @@
 <script>
 import Checkbox from './Checkbox'
 import Overlay from './Overlay'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import overlay from '../mixins/overlay'
@@ -262,7 +263,7 @@ export default {
     'veui-overlay': Overlay
   },
   directives: { outside },
-  mixins: [ui, input, overlay, i18n],
+  mixins: [prefix, ui, input, overlay, i18n],
   model: {
     prop: 'selected',
     event: 'select'
diff --git a/packages/veui/src/components/Schedule.vue b/packages/veui/src/components/Schedule.vue
index 72417cb78..ba75f4d02 100644
--- a/packages/veui/src/components/Schedule.vue
+++ b/packages/veui/src/components/Schedule.vue
@@ -173,6 +173,7 @@ import {
   mapValues,
   isEqual
 } from 'lodash'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import i18n from '../mixins/i18n'
@@ -205,7 +206,7 @@ export default {
     'veui-tooltip': Tooltip,
     'veui-dropdown': Dropdown
   },
-  mixins: [ui, input, i18n, useConfig('config', 'schedule')],
+  mixins: [prefix, ui, input, i18n, useConfig('config', 'schedule')],
   model: {
     prop: 'selected',
     event: 'select'
diff --git a/packages/veui/src/components/SearchBox.vue b/packages/veui/src/components/SearchBox.vue
index 0b915e00b..6151d11be 100644
--- a/packages/veui/src/components/SearchBox.vue
+++ b/packages/veui/src/components/SearchBox.vue
@@ -131,6 +131,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import dropdown from '../mixins/dropdown'
@@ -173,6 +174,7 @@ export default {
     'veui-input-group': InputGroup
   },
   mixins: [
+    prefix,
     ui,
     input,
     dropdown(),
diff --git a/packages/veui/src/components/Select/Option.vue b/packages/veui/src/components/Select/Option.vue
index da7aafad0..9d3561b1e 100644
--- a/packages/veui/src/components/Select/Option.vue
+++ b/packages/veui/src/components/Select/Option.vue
@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import menuItem from '../../mixins/menu-item'
 import selectItem from '../../mixins/select-item'
@@ -36,7 +37,7 @@ import '../../common/global'
 
 export default {
   name: 'veui-option',
-  mixins: [ui, menuItem, selectItem, useSelectConsumer('renderFor')],
+  mixins: [prefix, ui, menuItem, selectItem, useSelectConsumer('renderFor')],
   props: {
     label: {
       type: [String, Number]
diff --git a/packages/veui/src/components/Select/OptionGroup.vue b/packages/veui/src/components/Select/OptionGroup.vue
index 4d191646d..42905e316 100644
--- a/packages/veui/src/components/Select/OptionGroup.vue
+++ b/packages/veui/src/components/Select/OptionGroup.vue
@@ -2,6 +2,7 @@
 import Option from './Option'
 import Overlay from '../Overlay'
 import Icon from '../Icon'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import overlay from '../../mixins/overlay'
 import menuItem from '../../mixins/menu-item'
@@ -39,6 +40,7 @@ const OptionGroup = {
     outside
   },
   mixins: [
+    prefix,
     ui,
     menuItem,
     selectItem,
diff --git a/packages/veui/src/components/Select/Select.vue b/packages/veui/src/components/Select/Select.vue
index 2a26b0350..ce741ad33 100644
--- a/packages/veui/src/components/Select/Select.vue
+++ b/packages/veui/src/components/Select/Select.vue
@@ -8,6 +8,7 @@ import Overlay from '../Overlay'
 import Checkbox from '../Checkbox'
 import config from '../../managers/config'
 import useConfig from '../../mixins/config'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import input from '../../mixins/input'
 import dropdown from '../../mixins/dropdown'
@@ -35,6 +36,7 @@ export default {
   name: 'veui-select',
   uiTypes: ['select'],
   mixins: [
+    prefix,
     ui,
     input,
     dropdown(),
diff --git a/packages/veui/src/components/Slider.vue b/packages/veui/src/components/Slider.vue
index cdfab7dbf..dd4120714 100644
--- a/packages/veui/src/components/Slider.vue
+++ b/packages/veui/src/components/Slider.vue
@@ -116,6 +116,7 @@ import { fill, clamp, isEqual, identity } from 'lodash'
 import drag from '../directives/drag'
 import nudge from '../directives/nudge'
 import outside from '../directives/outside'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import useControllable from '../mixins/controllable'
@@ -133,6 +134,7 @@ export default {
     outside
   },
   mixins: [
+    prefix,
     ui,
     input,
     useControllable({
diff --git a/packages/veui/src/components/Span.vue b/packages/veui/src/components/Span.vue
index e8fcfc721..76a918da5 100644
--- a/packages/veui/src/components/Span.vue
+++ b/packages/veui/src/components/Span.vue
@@ -1,16 +1,16 @@
 <template>
-<span :class="$c('span')" v-bind="$attrs" :ui="realUi" v-on="$listeners">
+<span :class="$c('span')" v-bind="$attrs" v-on="$listeners">
   <slot/>
 </span>
 </template>
 
 <script>
 import '../common/global'
-import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 
 export default {
   name: 'veui-span',
   uiTypes: ['transparent'],
-  mixins: [ui]
+  mixins: [prefix]
 }
 </script>
diff --git a/packages/veui/src/components/Stack.vue b/packages/veui/src/components/Stack.vue
index ecc60168a..0d468b4d7 100644
--- a/packages/veui/src/components/Stack.vue
+++ b/packages/veui/src/components/Stack.vue
@@ -1,5 +1,5 @@
 <template>
-<div :class="rootClass" :ui="realUi">
+<div :class="rootClass">
   <div :class="innerClass" :style="innerStyle">
     <slot/>
   </div>
@@ -7,13 +7,13 @@
 </template>
 
 <script>
-import ui, { prefixify } from '../mixins/ui'
+import prefix, { prefixify } from '../mixins/prefix'
 import { getEnumValidator } from '../utils/helper'
 
 export default {
   name: 'veui-stack',
   uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     direction: {
       type: String,
diff --git a/packages/veui/src/components/Steps.vue b/packages/veui/src/components/Steps.vue
index 81001c9f5..2e272089c 100644
--- a/packages/veui/src/components/Steps.vue
+++ b/packages/veui/src/components/Steps.vue
@@ -71,6 +71,7 @@
 <script>
 import Icon from './Icon'
 import Link from './Link'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import '../common/global'
@@ -81,7 +82,7 @@ export default {
     'veui-icon': Icon,
     'veui-link': Link
   },
-  mixins: [ui, i18n],
+  mixins: [prefix, ui, i18n],
   props: {
     steps: {
       type: Array,
diff --git a/packages/veui/src/components/Switch.vue b/packages/veui/src/components/Switch.vue
index fef768c45..df6e08c93 100644
--- a/packages/veui/src/components/Switch.vue
+++ b/packages/veui/src/components/Switch.vue
@@ -37,6 +37,7 @@
 
 <script>
 import Loading from './Loading'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import input from '../mixins/input'
 import useControllable from '../mixins/controllable'
@@ -50,6 +51,7 @@ export default {
     'veui-loading': Loading
   },
   mixins: [
+    prefix,
     ui,
     input,
     useControllable({
diff --git a/packages/veui/src/components/Table/Table.vue b/packages/veui/src/components/Table/Table.vue
index fc36aba99..1037977cd 100644
--- a/packages/veui/src/components/Table/Table.vue
+++ b/packages/veui/src/components/Table/Table.vue
@@ -110,7 +110,8 @@
 import { map, mapValues, intersection, find, omit, filter } from 'lodash'
 import warn from '../../utils/warn'
 import { normalizeLength } from '../../utils/helper'
-import ui, { prefixify } from '../../mixins/ui'
+import prefix, { prefixify } from '../../mixins/prefix'
+import ui from '../../mixins/ui'
 import i18n from '../../mixins/i18n'
 import colgroup from '../../mixins/colgroup'
 import useControllable from '../../mixins/controllable'
@@ -167,6 +168,7 @@ export default {
     resize
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     colgroup,
diff --git a/packages/veui/src/components/Table/_Body.js b/packages/veui/src/components/Table/_Body.js
index f0712c5f4..884bd7166 100644
--- a/packages/veui/src/components/Table/_Body.js
+++ b/packages/veui/src/components/Table/_Body.js
@@ -1,5 +1,5 @@
 import Row from './_Row'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 import i18n from '../../mixins/i18n'
 import { flatMap } from 'lodash'
@@ -7,7 +7,7 @@ import { flatMap } from 'lodash'
 export default {
   name: 'veui-table-body',
   uiTypes: ['transparent'],
-  mixins: [ui, table, i18n],
+  mixins: [prefix, table, i18n],
   render () {
     let { table } = this
     let subRow = table.$scopedSlots['sub-row']
diff --git a/packages/veui/src/components/Table/_ColGroup.js b/packages/veui/src/components/Table/_ColGroup.js
index 81fb4ee24..b96113bb8 100644
--- a/packages/veui/src/components/Table/_ColGroup.js
+++ b/packages/veui/src/components/Table/_ColGroup.js
@@ -1,10 +1,10 @@
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 
 export default {
   name: 'veui-table-col-group',
   uiTypes: ['transparent'],
-  mixins: [ui, table],
+  mixins: [prefix, table],
   props: {
     gutter: Boolean
   },
diff --git a/packages/veui/src/components/Table/_Foot.js b/packages/veui/src/components/Table/_Foot.js
index 30007a097..e0da29021 100644
--- a/packages/veui/src/components/Table/_Foot.js
+++ b/packages/veui/src/components/Table/_Foot.js
@@ -1,10 +1,10 @@
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 
 export default {
   name: 'veui-table-foot',
+  mixins: [prefix, table],
   uiTypes: ['transparent'],
-  mixins: [ui, table],
   render () {
     let { table } = this
     return (
diff --git a/packages/veui/src/components/Table/_Head.js b/packages/veui/src/components/Table/_Head.js
index 7b0997dad..529732838 100644
--- a/packages/veui/src/components/Table/_Head.js
+++ b/packages/veui/src/components/Table/_Head.js
@@ -1,13 +1,13 @@
 import Checkbox from '../Checkbox'
 import HeadCell from './_HeadCell'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 import i18n from '../../mixins/i18n'
 
 export default {
   name: 'veui-table-head',
+  mixins: [prefix, table, i18n],
   uiTypes: ['transparent'],
-  mixins: [ui, table, i18n],
   data () {
     return {
       descOpen: {},
diff --git a/packages/veui/src/components/Table/_HeadCell.js b/packages/veui/src/components/Table/_HeadCell.js
index 6ab3689e5..e08a73874 100644
--- a/packages/veui/src/components/Table/_HeadCell.js
+++ b/packages/veui/src/components/Table/_HeadCell.js
@@ -3,7 +3,7 @@ import Select from '../Select'
 import Icon from '../Icon'
 import Sorter from './_Sorter'
 import Popover from '../Popover'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 import i18n from '../../mixins/i18n'
 import { isInsideFocusable, contains } from '../../utils/dom'
@@ -11,7 +11,7 @@ import { isInsideFocusable, contains } from '../../utils/dom'
 export default {
   name: 'veui-table-head-cell',
   uiTypes: ['transparent'],
-  mixins: [ui, table, i18n],
+  mixins: [prefix, table, i18n],
   props: {
     leaf: Boolean,
     col: {
diff --git a/packages/veui/src/components/Table/_Row.js b/packages/veui/src/components/Table/_Row.js
index d13b305d1..a4a09a88f 100644
--- a/packages/veui/src/components/Table/_Row.js
+++ b/packages/veui/src/components/Table/_Row.js
@@ -3,7 +3,7 @@ import Button from '../Button'
 import Checkbox from '../Checkbox'
 import Radio from '../Radio'
 import Icon from '../Icon'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 import i18n from '../../mixins/i18n'
 import tooltip from '../../directives/tooltip'
@@ -23,11 +23,11 @@ function renderTooltip (tooltip, item, field) {
 
 export default {
   name: 'veui-table-row',
-  uiTypes: ['transparent'],
-  mixins: [ui, table, i18n],
+  mixins: [prefix, table, i18n],
   directives: {
     tooltip
   },
+  uiTypes: ['transparent'],
   props: {
     index: Number,
     item: Object,
diff --git a/packages/veui/src/components/Table/_Sorter.vue b/packages/veui/src/components/Table/_Sorter.vue
index bb029736f..d2cde6613 100644
--- a/packages/veui/src/components/Table/_Sorter.vue
+++ b/packages/veui/src/components/Table/_Sorter.vue
@@ -26,7 +26,7 @@
 <script>
 import Icon from '../Icon'
 import Button from '../Button'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import table from '../../mixins/table'
 import config from '../../managers/config'
 import useConfig from '../../mixins/config'
@@ -48,8 +48,8 @@ export default {
     'veui-icon': Icon,
     'veui-button': Button
   },
+  mixins: [prefix, table, useConfig('config', 'table')],
   uiTypes: ['transparent'],
-  mixins: [ui, table, useConfig('config', 'table')],
   props: {
     order: [Boolean, String],
     allowedOrders: {
diff --git a/packages/veui/src/components/Tabs/Tab.vue b/packages/veui/src/components/Tabs/Tab.vue
index 076900e6a..e8c856e35 100644
--- a/packages/veui/src/components/Tabs/Tab.vue
+++ b/packages/veui/src/components/Tabs/Tab.vue
@@ -2,7 +2,7 @@
 import { includes } from 'lodash'
 import { useChild } from '../../mixins/coupled'
 import '../../common/global'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import { renderSlot, Void } from '../../utils/helper'
 
 let tab = useChild('tab', 'tabs', [
@@ -27,7 +27,7 @@ const STATUS_LIST = ['success', 'warning', 'info', 'error']
 
 export default {
   name: 'veui-tab',
-  mixins: [ui, tab],
+  mixins: [prefix, tab],
   props: {
     label: String,
     name: String,
diff --git a/packages/veui/src/components/Tabs/Tabs.vue b/packages/veui/src/components/Tabs/Tabs.vue
index a32392a39..3b7cab80d 100644
--- a/packages/veui/src/components/Tabs/Tabs.vue
+++ b/packages/veui/src/components/Tabs/Tabs.vue
@@ -2,6 +2,7 @@
 import Button from '../Button'
 import Link from '../Link'
 import Icon from '../Icon'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import i18n from '../../mixins/i18n'
 import config from '../../managers/config'
@@ -36,6 +37,7 @@ export default {
     drag
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     tabs,
@@ -151,7 +153,7 @@ export default {
           sort: (fromIndex, toIndex) => {
             this.$emit('sort', fromIndex, toIndex)
           },
-          themeVariant: this.uiThemeVariant
+          themeVariant: this.themeVariant
         },
         modifiers: { sort: true, x: true }
       }
diff --git a/packages/veui/src/components/Tag.vue b/packages/veui/src/components/Tag.vue
index 2b8efb526..0036546b8 100644
--- a/packages/veui/src/components/Tag.vue
+++ b/packages/veui/src/components/Tag.vue
@@ -1,6 +1,7 @@
 <script>
 import Button from './Button'
 import Icon from './Icon'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import focusable from '../mixins/focusable'
 import useControllable from '../mixins/controllable'
@@ -15,6 +16,7 @@ export default {
     'veui-button': Button
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     focusable,
diff --git a/packages/veui/src/components/TagInput.vue b/packages/veui/src/components/TagInput.vue
index 658be2399..ea698cd03 100644
--- a/packages/veui/src/components/TagInput.vue
+++ b/packages/veui/src/components/TagInput.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import input from '../mixins/input'
@@ -73,6 +74,7 @@ export default {
     'veui-icon': Icon
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     input,
diff --git a/packages/veui/src/components/Textarea.vue b/packages/veui/src/components/Textarea.vue
index 509eadd92..8138ab1c4 100644
--- a/packages/veui/src/components/Textarea.vue
+++ b/packages/veui/src/components/Textarea.vue
@@ -77,6 +77,7 @@
 
 <script>
 import { pick } from 'lodash'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import resize from '../directives/resize'
 import input from '../mixins/input'
@@ -103,6 +104,7 @@ export default {
     resize
   },
   mixins: [
+    prefix,
     ui,
     input,
     activatable,
diff --git a/packages/veui/src/components/TimePicker/TimePicker.vue b/packages/veui/src/components/TimePicker/TimePicker.vue
index d736a3297..4749991eb 100644
--- a/packages/veui/src/components/TimePicker/TimePicker.vue
+++ b/packages/veui/src/components/TimePicker/TimePicker.vue
@@ -130,6 +130,7 @@ import TimePickerOptionGroup from './_TimePickerOptionGroup'
 import Input from '../Input'
 import Button from '../Button'
 import Icon from '../Icon'
+import prefix from '../../mixins/prefix'
 import dropdown from '../../mixins/dropdown'
 import useControllable from '../../mixins/controllable'
 import ui from '../../mixins/ui'
@@ -177,6 +178,7 @@ export default {
     'veui-icon': Icon
   },
   mixins: [
+    prefix,
     ui,
     input,
     dropdown(),
diff --git a/packages/veui/src/components/Toast.vue b/packages/veui/src/components/Toast.vue
index cb9acd37e..f93194497 100644
--- a/packages/veui/src/components/Toast.vue
+++ b/packages/veui/src/components/Toast.vue
@@ -38,6 +38,7 @@
 <script>
 import Icon from './Icon'
 import Button from './Button'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import useControllable from '../mixins/controllable'
@@ -63,6 +64,7 @@ export default {
     'veui-button': Button
   },
   mixins: [
+    prefix,
     ui,
     i18n,
     useControllable(['open']),
diff --git a/packages/veui/src/components/ToastList.vue b/packages/veui/src/components/ToastList.vue
index fc505135f..5acaaee92 100644
--- a/packages/veui/src/components/ToastList.vue
+++ b/packages/veui/src/components/ToastList.vue
@@ -4,7 +4,7 @@ import Toast from './Toast'
 import { assign, findIndex, uniqueId } from 'lodash'
 import config from '../managers/config'
 import useConfig from '../mixins/config'
-import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 import overlay from '../mixins/overlay'
 import '../common/global'
 
@@ -18,7 +18,7 @@ config.defaults(
 export default {
   name: 'veui-toast-list',
   uiTypes: ['transparent'],
-  mixins: [ui, overlay, useConfig('config', 'toast')],
+  mixins: [prefix, overlay, useConfig('config', 'toast')],
   data () {
     return {
       messages: []
diff --git a/packages/veui/src/components/Tooltip.vue b/packages/veui/src/components/Tooltip.vue
index 1f5ff12ef..11f2e50d7 100644
--- a/packages/veui/src/components/Tooltip.vue
+++ b/packages/veui/src/components/Tooltip.vue
@@ -1,5 +1,6 @@
 <script>
 import Overlay from './Overlay'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import overlay from '../mixins/overlay'
 import outside from '../directives/outside'
@@ -28,6 +29,7 @@ export default {
     'veui-overlay': Overlay
   },
   mixins: [
+    prefix,
     ui,
     overlay,
     useConfig('config', 'tooltip'),
diff --git a/packages/veui/src/components/Transfer/Transfer.vue b/packages/veui/src/components/Transfer/Transfer.vue
index 82426493b..f80af56c2 100644
--- a/packages/veui/src/components/Transfer/Transfer.vue
+++ b/packages/veui/src/components/Transfer/Transfer.vue
@@ -2,6 +2,7 @@
 import CandidatePanel from './_CandidatePanel'
 import SelectedPanel from './_SelectedPanel'
 import { includes, isString } from 'lodash'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import input from '../../mixins/input'
 import useControllable from '../../mixins/controllable'
@@ -18,6 +19,7 @@ function defaultFilter (type, keyword, item, datasource) {
 export default {
   name: 'veui-transfer',
   mixins: [
+    prefix,
     ui,
     input,
     useControllable({
@@ -141,8 +143,7 @@ export default {
                 mergeChecked: this.mergeChecked,
                 includeIndeterminate: this.includeIndeterminate,
                 uiParts: this.uiParts,
-                ui: this.realUi,
-                themeVariant: this.uiThemeVariant
+                ui: this.realUi
               },
               on: {
                 select: (value) => {
@@ -174,8 +175,7 @@ export default {
                 isSelectable: this.isSelectable,
                 icons: this.icons,
                 uiParts: this.uiParts,
-                ui: this.realUi,
-                themeVariant: this.uiThemeVariant
+                ui: this.realUi
               },
               on: {
                 remove: (item, parents) => {
diff --git a/packages/veui/src/components/Transfer/_CandidatePanel.vue b/packages/veui/src/components/Transfer/_CandidatePanel.vue
index ab55b2db8..506cfce45 100644
--- a/packages/veui/src/components/Transfer/_CandidatePanel.vue
+++ b/packages/veui/src/components/Transfer/_CandidatePanel.vue
@@ -52,7 +52,7 @@
 import FilterPanel from '../FilterPanel'
 import Tree from '../Tree'
 import Button from '../Button'
-import { prefixify } from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import i18n from '../../mixins/i18n'
 import useTree from '../../mixins/tree'
 import useControllable from '../../mixins/controllable'
@@ -67,6 +67,7 @@ export default {
   },
   uiTypes: ['transparent'],
   mixins: [
+    prefix,
     i18n,
     useControllable({
       prop: 'selected',
@@ -86,8 +87,7 @@ export default {
     selected: Array,
     ...useTree().props,
     uiParts: Object,
-    ui: String,
-    themeVariant: String
+    ui: String
   },
   data () {
     return {
@@ -108,9 +108,6 @@ export default {
     }
   },
   methods: {
-    $c (name) {
-      return prefixify(name, this.themeVariant)
-    },
     realFilter (keyword, option) {
       return this.filter('candidate', keyword, option, this.datasource)
     },
diff --git a/packages/veui/src/components/Transfer/_SelectedPanel.vue b/packages/veui/src/components/Transfer/_SelectedPanel.vue
index 3c64e9c17..42eb13f65 100644
--- a/packages/veui/src/components/Transfer/_SelectedPanel.vue
+++ b/packages/veui/src/components/Transfer/_SelectedPanel.vue
@@ -88,7 +88,7 @@ import FilterPanel from '../FilterPanel'
 import Icon from '../Icon'
 import Button from '../Button'
 import Tree from '../Tree'
-import { prefixify } from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import i18n from '../../mixins/i18n'
 import { get } from 'lodash'
 import { getLeaves } from '../../utils/datasource'
@@ -102,7 +102,7 @@ export default {
     'veui-tree': Tree
   },
   uiTypes: ['transparent'],
-  mixins: [i18n],
+  mixins: [prefix, i18n],
   props: {
     datasource: Array,
     showMode: String,
@@ -111,8 +111,7 @@ export default {
     isSelectable: Boolean,
     ui: String,
     icons: Object,
-    uiParts: Object,
-    themeVariant: String
+    uiParts: Object
   },
   data () {
     return {
@@ -179,9 +178,6 @@ export default {
     }
   },
   methods: {
-    $c (name) {
-      return prefixify(name, this.themeVariant)
-    },
     removeAll () {
       this.$emit('removeall')
     },
diff --git a/packages/veui/src/components/Tree/Tree.vue b/packages/veui/src/components/Tree/Tree.vue
index c8d57bad4..4039b9b2e 100644
--- a/packages/veui/src/components/Tree/Tree.vue
+++ b/packages/veui/src/components/Tree/Tree.vue
@@ -98,6 +98,7 @@
 import AbstractTree, { includesItem } from './_AbstractTree'
 import Checkbox from '../Checkbox'
 import Icon from '../Icon'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import input from '../../mixins/input'
 import useControllable from '../../mixins/controllable'
@@ -116,6 +117,7 @@ export default {
     AbstractTree
   },
   mixins: [
+    prefix,
     ui,
     input,
     useControllable([
diff --git a/packages/veui/src/components/Tree/_AbstractTree.vue b/packages/veui/src/components/Tree/_AbstractTree.vue
index 86c00c66c..4693a2a3a 100644
--- a/packages/veui/src/components/Tree/_AbstractTree.vue
+++ b/packages/veui/src/components/Tree/_AbstractTree.vue
@@ -1,5 +1,5 @@
 <template>
-<ul :class="$c('abstract-tree')" role="tree" :ui="realUi">
+<ul :class="$c('abstract-tree')" role="tree">
   <li
     v-for="(item, index) in items"
     :key="getKey(item, index)"
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import ExpandTransition from '../_ExpandTransition'
 import { hasChildren } from '../../utils/datasource'
 
@@ -45,8 +45,8 @@ export default {
   components: {
     'veui-expand-transition': ExpandTransition
   },
+  mixins: [prefix],
   uiTypes: ['transparent'],
-  mixins: [ui],
   props: {
     items: {
       type: Array,
diff --git a/packages/veui/src/components/Uploader/Uploader.vue b/packages/veui/src/components/Uploader/Uploader.vue
index 1a2f7c35d..5794bac77 100644
--- a/packages/veui/src/components/Uploader/Uploader.vue
+++ b/packages/veui/src/components/Uploader/Uploader.vue
@@ -58,6 +58,7 @@ import {
   isUndefined,
   noop
 } from 'lodash'
+import prefix from '../../mixins/prefix'
 import ui from '../../mixins/ui'
 import input from '../../mixins/input'
 import i18n from '../../mixins/i18n'
@@ -126,6 +127,7 @@ export default {
     'veui-uploader-media': MediaUploader
   },
   mixins: [
+    prefix,
     ui,
     input,
     i18n,
diff --git a/packages/veui/src/components/Uploader/_Controls.vue b/packages/veui/src/components/Uploader/_Controls.vue
index 28bb8c1fe..6d8d65ec7 100644
--- a/packages/veui/src/components/Uploader/_Controls.vue
+++ b/packages/veui/src/components/Uploader/_Controls.vue
@@ -47,7 +47,7 @@
 import Button from '../Button'
 import Icon from '../Icon'
 import Dropdown from '../Dropdown'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 
 export default {
   name: 'veui-uploader-controls',
@@ -58,7 +58,7 @@ export default {
     'veui-dropdown': Dropdown
   },
   uiTypes: ['transparent'],
-  mixins: [ui],
+  mixins: [prefix],
   props: {
     items: Array,
     expanded: Boolean,
diff --git a/packages/veui/src/components/Uploader/_FileUploader.vue b/packages/veui/src/components/Uploader/_FileUploader.vue
index 76d6f7dcc..873c517d2 100644
--- a/packages/veui/src/components/Uploader/_FileUploader.vue
+++ b/packages/veui/src/components/Uploader/_FileUploader.vue
@@ -103,7 +103,7 @@
 </template>
 
 <script>
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import upload from './_mixin'
 import i18n from '../../mixins/i18n'
 import Button from '../Button'
@@ -122,7 +122,7 @@ export default {
     'veui-progress': Progress,
     'veui-message': Message
   },
-  mixins: [ui, upload, i18n],
+  mixins: [prefix, upload, i18n],
   methods: {
     handleItemAction (index, { name }) {
       if (INTERNAL_ACTION_EVENTS.indexOf(name) >= 0) {
diff --git a/packages/veui/src/components/Uploader/_MediaUploader.vue b/packages/veui/src/components/Uploader/_MediaUploader.vue
index e8634796e..3f63da0b1 100644
--- a/packages/veui/src/components/Uploader/_MediaUploader.vue
+++ b/packages/veui/src/components/Uploader/_MediaUploader.vue
@@ -248,7 +248,7 @@
 
 <script>
 import { includes, upperFirst } from 'lodash'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import upload from './_mixin'
 import i18n from '../../mixins/i18n'
 import Icon from '../Icon'
@@ -277,7 +277,7 @@ export default {
     'veui-uploader-file-viewer': FileViewer,
     'veui-message': Message
   },
-  mixins: [ui, upload, i18n],
+  mixins: [prefix, upload, i18n],
   provide () {
     return {
       uiParts: this.uiParts
diff --git a/packages/veui/src/components/Uploader/_mixin.js b/packages/veui/src/components/Uploader/_mixin.js
index 3593dd169..ec52ad2fe 100644
--- a/packages/veui/src/components/Uploader/_mixin.js
+++ b/packages/veui/src/components/Uploader/_mixin.js
@@ -1,5 +1,5 @@
 import { pick, isNumber, uniqueId } from 'lodash'
-import ui from '../../mixins/ui'
+import prefix from '../../mixins/prefix'
 import drag from '../../directives/drag'
 
 export const sharedProps = [
@@ -30,7 +30,7 @@ const computed = sharedProps.reduce((ret, key) => {
 }, {})
 
 export default {
-  mixins: [ui],
+  mixins: [prefix],
   directives: { drag },
   props: {
     files: Array,
@@ -49,7 +49,7 @@ export default {
         disabled: !this.sortable,
         name: uniqueId('veui-uploader-drag-sort-'),
         sort: this.handleDragSort,
-        themeVariant: this.uiThemeVariant
+        themeVariant: this.themeVariant
       }
     },
     realHelp () {
diff --git a/packages/veui/src/components/_SearchResult.vue b/packages/veui/src/components/_SearchResult.vue
index 3c3172e69..5fd126e67 100644
--- a/packages/veui/src/components/_SearchResult.vue
+++ b/packages/veui/src/components/_SearchResult.vue
@@ -1,5 +1,5 @@
 <script>
-import { prefixify } from '../mixins/ui'
+import { prefixify } from '../mixins/prefix'
 import Icon from './Icon'
 
 export default {
@@ -24,7 +24,7 @@ export default {
       separatorClass
     ]
     return (matches || []).reduce((result, { parts }, idx) => {
-      let items = parts.map(({ text, matched }, index) =>
+      const items = parts.map(({ text, matched }, index) =>
         matched ? (
           <mark key={`${idx}-${index}`} class={matchClass}>
             {text}
diff --git a/packages/veui/src/components/_SelectTrigger.vue b/packages/veui/src/components/_SelectTrigger.vue
index cef54e6dc..8b1a0bc9e 100644
--- a/packages/veui/src/components/_SelectTrigger.vue
+++ b/packages/veui/src/components/_SelectTrigger.vue
@@ -3,7 +3,7 @@ import Icon from './Icon'
 import Input from './Input'
 import Button from './Button'
 import Tag from './Tag'
-import ui from '../mixins/ui'
+import prefix from '../mixins/prefix'
 import input from '../mixins/input'
 import i18n from '../mixins/i18n'
 import { uniqueId } from 'lodash'
@@ -12,7 +12,7 @@ import { renderSlot } from '../utils/helper'
 export default {
   name: 'veui-select-trigger',
   uiTypes: ['transparent'],
-  mixins: [ui, input, i18n],
+  mixins: [prefix, input, i18n],
   props: {
     /* eslint-disable vue/require-prop-types */
     selected: {},
diff --git a/packages/veui/src/directives/drag/SortHandler.js b/packages/veui/src/directives/drag/SortHandler.js
index 1595320e7..b8f91aa31 100644
--- a/packages/veui/src/directives/drag/SortHandler.js
+++ b/packages/veui/src/directives/drag/SortHandler.js
@@ -10,7 +10,7 @@ import {
   kebabCase
 } from 'lodash'
 import cloneElement from 'clone-element'
-import { prefixify } from '../../mixins/ui'
+import { prefixify } from '../../mixins/prefix'
 import {
   isInsideTransformedContainer,
   getStableBoundingClientRect,
diff --git a/packages/veui/src/managers/context.js b/packages/veui/src/managers/context.js
index 2db8d3599..c3d5211d3 100644
--- a/packages/veui/src/managers/context.js
+++ b/packages/veui/src/managers/context.js
@@ -14,65 +14,71 @@ import {
   cloneDeep
 } from 'lodash'
 
-const CommonProviderImpl = {
-  name: 'veui-provider', // for better readability in devtools
-  uiTypes: ['transparent'],
-  props: {
-    // eslint-disable-next-line vue/require-prop-types
-    value: {}
-  },
-  render () {
-    return this.$slots.default
-  }
-}
-
 const DEEP_KEY_RE = /^([^.]+\.[^.]+)\.(.+)$/
 
 export function createContext (name, defaultValue) {
-  const realName = name ? `${name}-provider` : CommonProviderImpl.name
-  let contextId = `__${uniqueId(realName)}`
-  let RealProviderImpl = {
-    ...CommonProviderImpl,
-    name: realName,
-    inject: {
-      [contextId]: {
-        from: contextId,
-        default: () => () => undefined
-      }
-    },
-    provide () {
-      return {
-        // provide 一个函数，该函数在消费方的 computed 调用，这样保证最终值依赖每个 provider 的 this.value
-        [contextId]: () => {
-          let parentContextValue = this[contextId]()
-          const isObjParent = isPlainObject(parentContextValue)
-          const isObjSelf = isPlainObject(this.value)
-
-          // this.value['button.ui'] 覆盖 parentContextValue['button.ui.*']
-          if (isObjParent && isObjSelf) {
-            Object.keys(parentContextValue).forEach((key) => {
-              const match = key.match(DEEP_KEY_RE)
-              if (match && typeof this.value[match[1]] !== 'undefined') {
-                delete parentContextValue[key]
-              }
-            })
-          }
+  const realName = `${name || 'veui'}-provider`
+  const contextId = `__${uniqueId(realName)}`
 
-          return isObjParent && isObjSelf
-            ? defaults({}, this.value, parentContextValue) // 和上层合并
-            : this.value // 无法合并，则以最近的 provider 为准
+  function useProvider (valueKey = 'value', { override } = {}) {
+    return {
+      inject: {
+        [contextId]: {
+          from: contextId,
+          default: () => () => undefined
+        }
+      },
+      provide () {
+        return {
+          // provide 一个函数，该函数在消费方的 computed 调用，这样保证最终值依赖每个 provider 的 this.value
+          [contextId]: () => {
+            const parentContextValue = this[contextId]()
+            const isObjParent = isPlainObject(parentContextValue)
+            const isObjSelf = isPlainObject(this[valueKey])
+
+            // this.value['button.ui'] 覆盖 parentContextValue['button.ui.*']
+            if (isObjParent && isObjSelf) {
+              Object.keys(parentContextValue).forEach((key) => {
+                const match = key.match(DEEP_KEY_RE)
+                if (match && typeof this[valueKey][match[1]] !== 'undefined') {
+                  delete parentContextValue[key]
+                }
+              })
+            }
+
+            const base = override ? override.call(this) : {}
+
+            return isObjParent && isObjSelf
+              ? defaults(base, this[valueKey], parentContextValue) // 和上层合并
+              : isObjSelf
+                ? defaults(base, this[valueKey])
+                : this[valueKey] // 无法合并，则以最近的 provider 为准
+          }
         }
       }
     }
   }
 
-  let Provider = {
+  const ProviderImpl = {
+    name: realName,
+    uiTypes: ['transparent'],
+    mixins: [useProvider()],
+    props: {
+      // eslint-disable-next-line vue/require-prop-types
+      value: {}
+    },
+    render () {
+      return this.$slots.default
+    }
+  }
+
+  const Provider = {
     functional: true,
     // 这里实际上接受一个 value prop，用来传递 context，但是因为直接透传给 ProviderImpl，所以不用声明了
-    render: (h, context) => wrapChildren(h, context, RealProviderImpl)
+    render: (h, context) => wrapChildren(h, context, ProviderImpl)
   }
 
-  let useConsumer = (injectionKey) => {
+  function useConsumer (injectionKey) {
     return {
       inject: {
         [contextId]: {
@@ -121,14 +127,14 @@ export function createContext (name, defaultValue) {
     }
   }
 
-  let Consumer = {
-    ...useConsumer('context'),
+  const Consumer = {
+    mixins: [useConsumer('context')],
     render () {
       return this.$scopedSlots.default(this.context)
     }
   }
 
-  return { Provider, Consumer, useConsumer }
+  return { useProvider, useConsumer, Provider, Consumer }
 }
 
 function wrapChildren (h, { data, children }, Provider) {
diff --git a/packages/veui/src/managers/tooltip.js b/packages/veui/src/managers/tooltip.js
index 129de22a3..d9e990555 100644
--- a/packages/veui/src/managers/tooltip.js
+++ b/packages/veui/src/managers/tooltip.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { assign } from 'lodash'
 import Tooltip from '../components/Tooltip'
-import { prefixify } from '../mixins/ui'
+import { prefixify } from '../mixins/prefix'
 import config from './config'
 
 config.defaults(
diff --git a/packages/veui/src/mixins/carousel.js b/packages/veui/src/mixins/carousel.js
index 706d2d3e1..773f26772 100644
--- a/packages/veui/src/mixins/carousel.js
+++ b/packages/veui/src/mixins/carousel.js
@@ -1,4 +1,5 @@
 import { contains } from '../utils/dom'
+import prefix from '../mixins/prefix'
 import ui from '../mixins/ui'
 import i18n from '../mixins/i18n'
 import useControllable from '../mixins/controllable'
@@ -8,7 +9,7 @@ const DEFAULT_LAZY_OPTIONS = {
 }
 
 export default {
-  mixins: [ui, i18n, useControllable(['index'])],
+  mixins: [prefix, ui, i18n, useControllable(['index'])],
   props: {
     datasource: {
       type: Array,
diff --git a/packages/veui/src/mixins/config.js b/packages/veui/src/mixins/config.js
index 80d9dce51..d5a24dfeb 100644
--- a/packages/veui/src/mixins/config.js
+++ b/packages/veui/src/mixins/config.js
@@ -1,17 +1,29 @@
 import config, { configContext } from '../managers/config'
 import { assign, pick, upperFirst } from 'lodash'
 
+const { useProvider, useConsumer } = configContext
+
+const internalKey = '__veui_config' // 直接固定保留吧，保证多次 useConfig 时可以复用统一注入逻辑
+
 // useConfig('foo', ['bar']): 将 ConfigProvider 中的配置项 bar/bar.* 读取到 this.foo 中去
-export default function useConfig (injectionKey, configPrefixes = ['']) {
-  const internalKey = '__veui_config' // 直接固定保留吧，保证多次 useConfig 时可以复用统一注入逻辑
+export default function useConfig (
+  injectionKey,
+  configPrefixes = [''],
+  override
+) {
   configPrefixes = Array.isArray(configPrefixes)
     ? configPrefixes
     : [configPrefixes]
   const keys = Object.keys(config.getAll()).filter((k) =>
-    configPrefixes.some((cp) => cp === k || k.indexOf(`${cp}.`) === 0)
+    configPrefixes.some(
+      (cp) =>
+        cp === k ||
+        k.indexOf(`${cp}.`) === 0 || // `table.loadingOptions`
+        (cp === '' && k.indexOf('.') === -1) // global config like `theme`
+    )
   )
   return {
-    ...configContext.useConsumer(internalKey),
+    mixins: [useConsumer(internalKey), useProvider(internalKey, { override })],
     data () {
       return {
         // 实际组件依赖这个state，避免类似 datepicker.xxx 影响 Alert 组件
@@ -53,15 +65,28 @@ export function useConfigurable (injectionKey, configurable) {
     return realConf
   })
 
+  function override () {
+    return realConfigurable.reduce((acc, { namespace, props }) => {
+      return props.reduce((acc, { prop, computed }) => {
+        if (typeof this[prop] !== 'undefined') {
+          acc[namespace ? `${namespace}.${prop}` : prop] =
+            this[computed || `real${upperFirst(prop)}`]
+        }
+
+        return acc
+      }, acc)
+    }, {})
+  }
+
   // generate computeds
-  const namespaces = realConfigurable.map((i) => i.namespace)
+  const namespaces = realConfigurable.map((i) => i.namespace || '')
   return {
-    mixins: [useConfig(injectionKey, namespaces)],
+    mixins: [useConfig(injectionKey, namespaces, override)],
     computed: realConfigurable.reduce((acc, { namespace, props }) => {
       return props.reduce((acc, { prop, computed }) => {
         acc[computed || `real${upperFirst(prop)}`] = function () {
-          return this[prop] == null
-            ? this[injectionKey][`${namespace}.${prop}`]
+          return typeof this[prop] === 'undefined'
+            ? this[injectionKey][namespace ? `${namespace}.${prop}` : prop]
             : this[prop]
         }
         return acc
diff --git a/packages/veui/src/mixins/prefix.js b/packages/veui/src/mixins/prefix.js
new file mode 100644
index 000000000..036c0ba6d
--- /dev/null
+++ b/packages/veui/src/mixins/prefix.js
@@ -0,0 +1,43 @@
+import config from '../managers/config'
+import { useConfigurable } from './config'
+
+config.defaults({
+  theme: null
+})
+
+function usePrefix () {
+  return {
+    mixins: [
+      useConfigurable('themeConfig', {
+        props: ['theme']
+      })
+    ],
+    props: {
+      theme: String
+    },
+    computed: {
+      themeBase () {
+        // ai is a variant of d22
+        return this.realTheme === 'ai' ? 'd22' : this.realTheme
+      },
+      themeVariant () {
+        return this.realTheme === 'ai' ? 'ai' : null
+      }
+    },
+    methods: {
+      $c (name) {
+        return prefixify(name, this.themeVariant)
+      }
+    }
+  }
+}
+
+const PREFIX_CONFIG = process.env.VEUI_PREFIX || process.env.VUE_APP_VEUI_PREFIX
+
+export function prefixify (name, themeVariant) {
+  return `${PREFIX_CONFIG || 'veui'}${
+    themeVariant ? `-${themeVariant}` : ''
+  }-${name}`
+}
+
+export default usePrefix()
diff --git a/packages/veui/src/mixins/ui.js b/packages/veui/src/mixins/ui.js
index 07b6a3013..96b71af97 100644
--- a/packages/veui/src/mixins/ui.js
+++ b/packages/veui/src/mixins/ui.js
@@ -12,6 +12,7 @@ import {
 import { getConfigKey, findAncestor, isTransparent } from '../utils/helper'
 import warn from '../utils/warn'
 import { configContext } from '../managers/config'
+import prefix from './prefix'
 
 const UNKNOWN_KEY = '$unknown'
 const DEFAULT_VAL = '__default__'
@@ -23,21 +24,12 @@ function callWithProps (val, props) {
   return val
 }
 
-const RE_THEME = /^theme:([a-z0-9-]+)$/i
-
-function getThemeProps (theme) {
-  if (theme === 'ai') {
-    return { theme: 'd22', themeVariant: 'ai' }
-  }
-  return { theme }
-}
-
 export function useUi () {
   return {
     props: {
       ui: String
     },
-    mixins: [configContext.useConsumer('__veui_config')],
+    mixins: [configContext.useConsumer('__veui_config'), prefix],
     computed: {
       uiParts () {
         const parts = this.getComponentConfig('parts') || {}
@@ -49,15 +41,6 @@ export function useUi () {
         const { uiConfig = {} } = this
         return tokens.reduce(
           (result, token) => {
-            const [, theme] = token.match(RE_THEME) || []
-            if (theme) {
-              // theme ai is a variant on d22
-              // convert to d22 and an ai variant under the hood
-              assign(result, getThemeProps(theme))
-
-              return result
-            }
-
             const name = find(Object.keys(uiConfig), (name) => {
               const { boolean = false, values = [] } = uiConfig[name]
               if (boolean) {
@@ -93,20 +76,16 @@ export function useUi () {
       },
       defaultUiProps () {
         const { uiConfig = {} } = this
-        const { theme } = this.__veui_config
-        return Object.keys(uiConfig).reduce(
-          (result, name) => {
-            result[name] = null
-            const prop = uiConfig[name]
-            if (prop.boolean) {
-              result[name] = false
-            } else {
-              result[name] = prop.default || DEFAULT_VAL
-            }
-            return result
-          },
-          theme ? getThemeProps(theme) : {}
-        )
+        return Object.keys(uiConfig).reduce((result, name) => {
+          result[name] = null
+          const prop = uiConfig[name]
+          if (prop.boolean) {
+            result[name] = false
+          } else {
+            result[name] = prop.default || DEFAULT_VAL
+          }
+          return result
+        }, {})
       },
       inheritableUiProps () {
         if (!this.uiConfig) {
@@ -114,10 +93,6 @@ export function useUi () {
         }
 
         return pickBy(this.uiProps, (val, key) => {
-          if (key === 'theme' || key === 'themeVariant') {
-            return true
-          }
-
           const uiProp = this.uiConfig[key]
           return val !== DEFAULT_VAL && uiProp && uiProp.inherit
         })
@@ -174,14 +149,6 @@ export function useUi () {
           uniq(
             Object.keys(props)
               .map((key) => {
-                if (key === 'theme') {
-                  return `theme:${props.theme}`
-                }
-
-                if (key === 'themeVariant') {
-                  return null
-                }
-
                 if (props[key] === true) {
                   return key
                 }
@@ -189,11 +156,9 @@ export function useUi () {
               })
               .filter((val) => val && val !== DEFAULT_VAL && val !== false)
               .concat(this.declaredUiProps[UNKNOWN_KEY])
+              .concat(this.themeBase ? `theme:${this.themeBase}` : [])
           ).join(' ') || null
         )
-      },
-      uiThemeVariant () {
-        return (this.uiProps && this.uiProps.themeVariant) || null
       }
     },
     methods: {
@@ -208,7 +173,8 @@ export function useUi () {
 
         // icons/illustrations/parts can be configured by themes
         const themes = this.__veui_config[`${prefix}.themes`]
-        const { theme } = this.uiProps
+
+        const theme = this.themeBase
         if (themes && themes[theme]) {
           const themeConfig = themes[theme][key]
           if (themeConfig) {
@@ -217,20 +183,9 @@ export function useUi () {
         }
 
         return config
-      },
-      $c (name) {
-        return prefixify(name, this.uiThemeVariant)
       }
     }
   }
 }
 
-const PREFIX_CONFIG = process.env.VEUI_PREFIX || process.env.VUE_APP_VEUI_PREFIX
-
-export function prefixify (name, themeVariant) {
-  return `${PREFIX_CONFIG || 'veui'}${
-    themeVariant ? `-${themeVariant}` : ''
-  }-${name}`
-}
-
 export default useUi()
diff --git a/packages/veui/test/unit/specs/components/ConfigProvider.spec.js b/packages/veui/test/unit/specs/components/ConfigProvider.spec.js
index ac916408d..fb2f274bb 100644
--- a/packages/veui/test/unit/specs/components/ConfigProvider.spec.js
+++ b/packages/veui/test/unit/specs/components/ConfigProvider.spec.js
@@ -160,6 +160,15 @@ describe('components/ConfigProvider', function () {
     expect(collapse.attributes('ui').includes('theme:d22')).to.equal(true)
     expect(input.attributes('ui').includes('theme:d22')).to.equal(true)
 
+    wrapper.vm.context.theme = 'ai'
+
+    await wrapper.vm.$nextTick()
+
+    expect(collapse.attributes('ui').includes('theme:d22')).to.equal(true)
+    expect(input.attributes('ui').includes('theme:d22')).to.equal(true)
+    expect(collapse.classes('veui-ai-collapse')).to.equal(true)
+    expect(input.classes('veui-ai-input')).to.equal(true)
+
     wrapper.destroy()
   })
 })
diff --git a/packages/veui/test/unit/specs/mixins/ui.spec.js b/packages/veui/test/unit/specs/mixins/ui.spec.js
index 1a5618cca..74d263c3d 100644
--- a/packages/veui/test/unit/specs/mixins/ui.spec.js
+++ b/packages/veui/test/unit/specs/mixins/ui.spec.js
@@ -1,4 +1,5 @@
-import { useUi } from '@/mixins/ui'
+import ui from '@/mixins/ui'
+import prefix from '@/mixins/prefix'
 import uiManager from '@/managers/ui'
 import { mount } from '../../../utils'
 
@@ -59,13 +60,13 @@ uiManager.defaults(
 
 const Foo = {
   name: 'veui-foo',
-  mixins: [useUi()],
+  mixins: [prefix, ui],
   template: `<div :class="$c('foo')" :ui="realUi"><slot>Foo Component</slot></div>`
 }
 
 const Bar = {
   name: 'veui-bar',
-  mixins: [useUi()],
+  mixins: [prefix, ui],
   components: {
     'veui-foo': Foo
   },
@@ -75,7 +76,7 @@ const Bar = {
 
 const Baz = {
   name: 'veui-baz',
-  mixins: [useUi()],
+  mixins: [prefix, ui],
   components: {
     'veui-foo': Foo
   },
@@ -94,11 +95,11 @@ describe('mixins/ui', () => {
         template: `
         <div>
           <veui-foo ref="f1"/>
-          <veui-foo ref="f2" ui="large primary theme:d22"/>
+          <veui-foo ref="f2" ui="large primary" theme="d22"/>
           <veui-bar ref="b1"/>
-          <veui-bar ref="b2" ui="large primary theme:d22"/>
+          <veui-bar ref="b2" ui="large primary" theme="d22"/>
           <veui-baz ref="z1"/>
-          <veui-baz ref="z2" ui="large primary theme:ai"/>
+          <veui-baz ref="z2" ui="large primary" theme="ai"/>
         </div>`
       },
       {