diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
index fbd4ac12f3..6ce1bd54bf 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.vue
+++ b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -2,12 +2,14 @@
   <tiny-layout>
     <p>基本按钮</p>
     <tiny-row>
-      <tiny-button type="primary"> 主要按钮 </tiny-button>
-      <tiny-button> 次要按钮 </tiny-button>
-      <tiny-button type="success"> 成功按钮 </tiny-button>
-      <tiny-button type="info"> 信息按钮 </tiny-button>
-      <tiny-button type="warning"> 警告按钮 </tiny-button>
-      <tiny-button type="danger"> 危险按钮 </tiny-button>
+      <config-provider :design="design">
+        <tiny-button type="primary" tiny_experimetal_props_hoc> 主要按钮 </tiny-button>
+        <tiny-button> 次要按钮 </tiny-button>
+        <tiny-button type="success"> 成功按钮 </tiny-button>
+        <tiny-button type="info"> 信息按钮 </tiny-button>
+        <tiny-button type="warning"> 警告按钮 </tiny-button>
+        <tiny-button type="danger"> 危险按钮 </tiny-button>
+      </config-provider>
     </tiny-row>
     <p>朴素按钮</p>
     <tiny-row>
@@ -40,14 +42,15 @@
 </template>
 
 <script>
-import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow, ConfigProvider } from '@opentiny/vue'
 import { IconDeleteL, IconYes, IconEditor, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyButton,
     TinyLayout,
-    TinyRow
+    TinyRow,
+    ConfigProvider
   },
   data() {
     return {
@@ -56,7 +59,16 @@ export default {
       IconEditor: IconEditor(),
       IconMail: IconMail(),
       IconStarO: IconStarO(),
-      IconSearch: IconSearch()
+      IconSearch: IconSearch(),
+      design: {
+        components: {
+          Button: {
+            props: {
+              size: 'mini'
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
index 5ad0675b2b..9ec31fd723 100644
--- a/examples/vue3/package.json
+++ b/examples/vue3/package.json
@@ -12,12 +12,13 @@
     "build": "vite build",
     "preview": "vite preview",
     "test:e2e": "playwright test",
-    "test:unit": "vitest",
+    "test:unit": "vitest --ui",
     "install:browser": "playwright install",
     "codegen": "playwright codegen localhost:3101"
   },
   "devDependencies": {
     "@opentiny-internal/playwright-config": "workspace:^1.0.1-beta.0",
+    "@opentiny-internal/unplugin-hoc-plugin": "workspace:*",
     "@opentiny-internal/unplugin-virtual-template": "workspace:*",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
@@ -37,7 +38,7 @@
     "@unocss/transformer-directives": "^0.48.0",
     "@vitejs/plugin-vue": "4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vitest/ui": "^0.31.0",
+    "@vitest/ui": "^2.1.9",
     "@vue/runtime-core": "3.2.31",
     "@vue/test-utils": "^2.2.7",
     "jsdom": "^21.0.0",
@@ -58,4 +59,4 @@
     "vue": "^3.3.9",
     "vue-i18n": "^9.1.7"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/vue3/vite.config.ts b/examples/vue3/vite.config.ts
index 0b70e685bd..eb72133b5d 100644
--- a/examples/vue3/vite.config.ts
+++ b/examples/vue3/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig((config) => {
     },
     plugins: [
       virtualTemplatePlugin({ include: ['**/packages/vue/**/src/index.ts'], env }),
+      // hocPlugin({}),
       vue3Plugin({
         include: [/\.vue$/, /\.md$/]
       }),
diff --git a/internals/unplugin-hoc-plugin/README.md b/internals/unplugin-hoc-plugin/README.md
new file mode 100644
index 0000000000..495c6fe845
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/README.md
@@ -0,0 +1,116 @@
+# @opentiny/unplugin-virtual-template
+
+## Install
+
+```bash
+npm i @opentiny/unplugin-virtual-template
+```
+
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import Starter from '@opentiny/unplugin-virtual-template/vite'
+
+export default defineConfig({
+  plugins: [
+    Starter({
+      /* options */
+    })
+  ]
+})
+```
+
+Example: [`playground/`](./playground/)
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import Starter from '@opentiny/unplugin-virtual-template/rollup'
+
+export default {
+  plugins: [
+    Starter({
+      /* options */
+    })
+  ]
+}
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('@opentiny/unplugin-virtual-template/webpack')({
+      /* options */
+    })
+  ]
+}
+```
+
+<br></details>
+
+<details>
+<summary>Nuxt</summary><br>
+
+```ts
+// nuxt.config.js
+export default {
+  buildModules: [
+    [
+      '@opentiny/unplugin-virtual-template/nuxt',
+      {
+        /* options */
+      }
+    ]
+  ]
+}
+```
+
+> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('@opentiny/unplugin-virtual-template/webpack')({
+        /* options */
+      })
+    ]
+  }
+}
+```
+
+<br></details>
+
+<details>
+<summary>esbuild</summary><br>
+
+```ts
+// esbuild.config.js
+import { build } from 'esbuild'
+import Starter from '@opentiny/unplugin-virtual-template/esbuild'
+
+build({
+  plugins: [Starter()]
+})
+```
+
+<br></details>
diff --git a/internals/unplugin-hoc-plugin/package.json b/internals/unplugin-hoc-plugin/package.json
new file mode 100644
index 0000000000..70f7caa6b9
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "@opentiny-internal/unplugin-hoc-plugin",
+  "type": "module",
+  "version": "0.1.1-beta.0",
+  "private": true,
+  "description": "Register global imports on demand for Vite and Webpack",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "require": "./dist/webpack.cjs",
+      "import": "./dist/webpack.js"
+    },
+    "./rollup": {
+      "types": "./dist/rollup.d.ts",
+      "require": "./dist/rollup.cjs",
+      "import": "./dist/rollup.js"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild.d.ts",
+      "require": "./dist/esbuild.cjs",
+      "import": "./dist/esbuild.js"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt.d.ts",
+      "require": "./dist/nuxt.cjs",
+      "import": "./dist/nuxt.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "require": "./dist/types.cjs",
+      "import": "./dist/types.js"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch src",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build",
+    "release": "bumpp && npm publish",
+    "start": "esno src/index.ts",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@rollup/pluginutils": "^5.0.2",
+    "magic-string": "^0.27.0",
+    "unplugin": "^1.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.13",
+    "bumpp": "^8.2.1",
+    "chalk": "^5.2.0",
+    "eslint": "^8.29.0",
+    "esno": "^4.7.0",
+    "fast-glob": "^3.2.12",
+    "nodemon": "^2.0.20",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.7.3",
+    "tsup": "7.2.0",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:",
+    "webpack": "^5.75.0"
+  }
+}
diff --git a/internals/unplugin-hoc-plugin/scripts/postbuild.ts b/internals/unplugin-hoc-plugin/scripts/postbuild.ts
new file mode 100644
index 0000000000..b8129a2dcf
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/scripts/postbuild.ts
@@ -0,0 +1,24 @@
+/* eslint-disable no-console */
+import { basename, dirname, resolve } from 'node:path'
+import { promises as fs } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import fg from 'fast-glob'
+import chalk from 'chalk'
+
+async function run() {
+  // fix cjs exports
+  const files = await fg('*.cjs', {
+    ignore: ['chunk-*'],
+    absolute: true,
+    cwd: resolve(dirname(fileURLToPath(import.meta.url)), '../dist')
+  })
+  for (const file of files) {
+    console.log(chalk.cyan.inverse(' POST '), `Fix ${basename(file)}`)
+    let code = await fs.readFile(file, 'utf8')
+    code = code.replace('exports.default =', 'module.exports =')
+    code += 'exports.default = module.exports;'
+    await fs.writeFile(file, code)
+  }
+}
+
+void run()
diff --git a/internals/unplugin-hoc-plugin/src/esbuild.ts b/internals/unplugin-hoc-plugin/src/esbuild.ts
new file mode 100644
index 0000000000..71f1e0952b
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/esbuild.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.esbuild
diff --git a/internals/unplugin-hoc-plugin/src/index.ts b/internals/unplugin-hoc-plugin/src/index.ts
new file mode 100644
index 0000000000..635e2891b8
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/index.ts
@@ -0,0 +1,49 @@
+import { createUnplugin } from 'unplugin'
+import { createFilter } from '@rollup/pluginutils'
+import type { UserOptions } from './types'
+
+export default createUnplugin<UserOptions>((options = {}) => {
+  const filter = createFilter(options.include || ['**/*'], options.exclude || [])
+
+  return {
+    name: '@opentiny/unplugin-hoc-plugin',
+    enforce: 'pre',
+    transformInclude(id) {
+      return filter(id)
+    },
+    transform(code, id) {
+      const [filename, query] = id.split('?', 2)
+      // console.log(filename, query)
+      if (filename.endsWith('.vue') && query) {
+        // console.log(id)
+        const params = new URLSearchParams(query)
+        if (params.has('withPropsHOC')) {
+          // console.log('enter')
+          // 替换 import 语句
+          const newCode = code.replace(
+            /import\s*{([^}]+)}\s*from\s*['"]\@opentiny\/vue-common['"]/g,
+            (match, imports) => {
+              const processedImports = imports
+                .split(',')
+                .map((specifier) => {
+                  const trimmed = specifier.trim()
+                  return trimmed === 'defineComponent'
+                    ? 'WithDesignConfigPropsDefineComponent as defineComponent'
+                    : trimmed
+                })
+                .join(', ')
+
+              return `import { ${processedImports} } from '@opentiny/vue-common';`
+            }
+          )
+
+          return {
+            code: newCode,
+            map: null // 可选 source map
+          }
+        }
+      }
+      return null
+    }
+  }
+})
diff --git a/internals/unplugin-hoc-plugin/src/nuxt.ts b/internals/unplugin-hoc-plugin/src/nuxt.ts
new file mode 100644
index 0000000000..ae90d09db1
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/nuxt.ts
@@ -0,0 +1,16 @@
+import type { UserOptions } from './types'
+import unplugin from '.'
+
+export default function (options: UserOptions = {}, nuxt: any) {
+  // install webpack plugin
+  nuxt.hook('webpack:config', (config: any) => {
+    config.plugins = config.plugins || []
+    config.plugins.unshift(unplugin.webpack(options))
+  })
+
+  // install vite plugin
+  nuxt.hook('vite:extendConfig', (config: any) => {
+    config.plugins = config.plugins || []
+    config.plugins.push(unplugin.vite(options))
+  })
+}
diff --git a/internals/unplugin-hoc-plugin/src/rollup.ts b/internals/unplugin-hoc-plugin/src/rollup.ts
new file mode 100644
index 0000000000..ed6909cd36
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/rollup.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.rollup
diff --git a/internals/unplugin-hoc-plugin/src/types.ts b/internals/unplugin-hoc-plugin/src/types.ts
new file mode 100644
index 0000000000..3afc2d638e
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/types.ts
@@ -0,0 +1,18 @@
+import type { FilterPattern } from '@rollup/pluginutils'
+
+export interface Options {
+  /**
+   * @default ["**\/*"]
+   */
+  include: FilterPattern
+  /**
+   * @default []
+   */
+  exclude: FilterPattern
+  // 环境变量
+  env: Record<string, string>
+}
+
+export type UserOptions = Partial<Options>
+
+export type ResolvedOptions = Options
diff --git a/internals/unplugin-hoc-plugin/src/vite.ts b/internals/unplugin-hoc-plugin/src/vite.ts
new file mode 100644
index 0000000000..589f4b9647
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/vite.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.vite
diff --git a/internals/unplugin-hoc-plugin/src/webpack.ts b/internals/unplugin-hoc-plugin/src/webpack.ts
new file mode 100644
index 0000000000..8d50538967
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/src/webpack.ts
@@ -0,0 +1,4 @@
+import unplugin from '.'
+import type {} from 'webpack'
+
+export default unplugin.webpack
diff --git a/internals/unplugin-hoc-plugin/test/__snapshots__/index.test.ts.snap b/internals/unplugin-hoc-plugin/test/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000000..9f67889f49
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/test/__snapshots__/index.test.ts.snap
@@ -0,0 +1,133 @@
+// Vitest Snapshot v1
+
+exports[`index > transformVirtualTemplate > pc|mobile=pc|mobile-first 1`] = `
+"
+const template = (mode) => {
+  let result
+
+  // #v-ifndef VITE_TINY_MODE
+  result = import.meta.glob('./{pc,mobile,mobile-first}.vue', { eager: true })
+  // #v-endif
+
+    
+  // #v-ifdef VITE_TINY_MODE=pc
+  result = import.meta.glob('./pc.vue', { eager: true })
+  // #v-endif
+          
+  // #v-ifdef VITE_TINY_MODE=mobile
+  result = import.meta.glob('./pc.vue', { eager: true })
+  // #v-endif
+          
+  // #v-ifdef VITE_TINY_MODE=mobile-first
+  result = import.meta.glob('./mobile-first.vue', { eager: true })
+  // #v-endif
+        
+
+  const finalMode = {\\"pc\\":\\"pc\\",\\"mobile\\":\\"pc\\",\\"mobile-first\\":\\"mobile-first\\"}[mode?.value || mode]
+
+  return result[\`./\${finalMode}.vue\`].default
+}
+  "
+`;
+
+exports[`index > transformVirtualTemplate > pc|mobile|mobile-first 1`] = `
+"
+const template = (mode) => {
+  let result
+
+  // #v-ifndef VITE_TINY_MODE
+  result = import.meta.glob('./{pc,mobile,mobile-first}.vue', { eager: true })
+  // #v-endif
+
+    
+  // #v-ifdef VITE_TINY_MODE=pc
+  result = import.meta.glob('./pc.vue', { eager: true })
+  // #v-endif
+          
+  // #v-ifdef VITE_TINY_MODE=mobile
+  result = import.meta.glob('./mobile.vue', { eager: true })
+  // #v-endif
+          
+  // #v-ifdef VITE_TINY_MODE=mobile-first
+  result = import.meta.glob('./mobile-first.vue', { eager: true })
+  // #v-endif
+        
+
+  const finalMode = {\\"pc\\":\\"pc\\",\\"mobile\\":\\"mobile\\",\\"mobile-first\\":\\"mobile-first\\"}[mode?.value || mode]
+
+  return result[\`./\${finalMode}.vue\`].default
+}
+  "
+`;
+
+exports[`index > transformVirtualTemplate > pc|mobile|mobile-first=pc 1`] = `
+"
+const template = (mode) => {
+  let result
+
+  // #v-ifndef VITE_TINY_MODE
+  result = import.meta.glob('./{pc,mobile,mobile-first}.vue', { eager: true })
+  // #v-endif
+
+    
+  // #v-ifdef VITE_TINY_MODE=pc
+  result = import.meta.glob('./pc.vue', { eager: true })
+  // #v-endif
+          
+  // #v-ifdef VITE_TINY_MODE=mobile
+  result = import.meta.glob('./mobile.vue', { eager: true })
+  // #v-endif
+          
+  // #v-ifdef VITE_TINY_MODE=mobile-first
+  result = import.meta.glob('./pc.vue', { eager: true })
+  // #v-endif
+        
+
+  const finalMode = {\\"pc\\":\\"pc\\",\\"mobile\\":\\"mobile\\",\\"mobile-first\\":\\"pc\\"}[mode?.value || mode]
+
+  return result[\`./\${finalMode}.vue\`].default
+}
+  "
+`;
+
+exports[`index > transformVirtualTemplateForBuild > pc|mobile=pc|mobile-first 1`] = `
+"
+import PcTemplate from './pc.vue'
+import MobileTemplate from './pc.vue'
+import MobileFirstTemplate from './mobile-first.vue'
+
+const template = (mode) => {
+  if ('mobile' === (process.env.TINY_MODE || mode)) return MobileTemplate
+  else if ('mobile-first' === (process.env.TINY_MODE || mode)) return MobileFirstTemplate
+  else return PcTemplate
+}
+  "
+`;
+
+exports[`index > transformVirtualTemplateForBuild > pc|mobile|mobile-first 1`] = `
+"
+import PcTemplate from './pc.vue'
+import MobileTemplate from './mobile.vue'
+import MobileFirstTemplate from './mobile-first.vue'
+
+const template = (mode) => {
+  if ('mobile' === (process.env.TINY_MODE || mode)) return MobileTemplate
+  else if ('mobile-first' === (process.env.TINY_MODE || mode)) return MobileFirstTemplate
+  else return PcTemplate
+}
+  "
+`;
+
+exports[`index > transformVirtualTemplateForBuild > pc|mobile|mobile-first=pc 1`] = `
+"
+import PcTemplate from './pc.vue'
+import MobileTemplate from './mobile.vue'
+import MobileFirstTemplate from './pc.vue'
+
+const template = (mode) => {
+  if ('mobile' === (process.env.TINY_MODE || mode)) return MobileTemplate
+  else if ('mobile-first' === (process.env.TINY_MODE || mode)) return MobileFirstTemplate
+  else return PcTemplate
+}
+  "
+`;
diff --git a/internals/unplugin-hoc-plugin/test/index.test.ts b/internals/unplugin-hoc-plugin/test/index.test.ts
new file mode 100644
index 0000000000..8997011c12
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/test/index.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { transformVirtualTemplate, transformVirtualTemplateForBuild } from '../src/core/index'
+
+describe('index', () => {
+  describe('transformVirtualTemplate', () => {
+    it('pc|mobile|mobile-first', () => {
+      expect(
+        transformVirtualTemplate("import template from 'virtual:template?pc|mobile|mobile-first'")
+      ).toMatchSnapshot()
+    })
+
+    it('pc|mobile=pc|mobile-first', () => {
+      expect(
+        transformVirtualTemplate("import template from 'virtual:template?pc|mobile=pc|mobile-first'")
+      ).toMatchSnapshot()
+    })
+
+    it('pc|mobile|mobile-first=pc', () => {
+      expect(
+        transformVirtualTemplate("import template from 'virtual:template?pc|mobile|mobile-first=pc'")
+      ).toMatchSnapshot()
+    })
+  })
+
+  describe('transformVirtualTemplateForBuild', () => {
+    it('pc|mobile|mobile-first', () => {
+      expect(
+        transformVirtualTemplateForBuild("import template from 'virtual:template?pc|mobile|mobile-first'")
+      ).toMatchSnapshot()
+    })
+
+    it('pc|mobile=pc|mobile-first', () => {
+      expect(
+        transformVirtualTemplateForBuild("import template from 'virtual:template?pc|mobile=pc|mobile-first'")
+      ).toMatchSnapshot()
+    })
+
+    it('pc|mobile|mobile-first=pc', () => {
+      expect(
+        transformVirtualTemplateForBuild("import template from 'virtual:template?pc|mobile|mobile-first=pc'")
+      ).toMatchSnapshot()
+    })
+  })
+})
diff --git a/internals/unplugin-hoc-plugin/tsconfig.json b/internals/unplugin-hoc-plugin/tsconfig.json
new file mode 100644
index 0000000000..1683ae1b3c
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "target": "es2017",
+    "module": "esnext",
+    "lib": ["esnext", "DOM"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true
+  }
+}
diff --git a/internals/unplugin-hoc-plugin/tsup.config.ts b/internals/unplugin-hoc-plugin/tsup.config.ts
new file mode 100644
index 0000000000..6f487b0831
--- /dev/null
+++ b/internals/unplugin-hoc-plugin/tsup.config.ts
@@ -0,0 +1,9 @@
+import type { Options } from 'tsup'
+
+export default <Options>{
+  entryPoints: ['src/*.ts'],
+  clean: true,
+  format: ['cjs', 'esm'],
+  dts: false,
+  onSuccess: 'esno scripts/postbuild.ts'
+}
diff --git a/internals/unplugin-virtual-template/src/core/transformVirtualTemplate.ts b/internals/unplugin-virtual-template/src/core/transformVirtualTemplate.ts
index 43aee750ac..fc933bfa1e 100644
--- a/internals/unplugin-virtual-template/src/core/transformVirtualTemplate.ts
+++ b/internals/unplugin-virtual-template/src/core/transformVirtualTemplate.ts
@@ -13,7 +13,13 @@ export function transformVirtualTemplate(code: string) {
         .map(([key, value]) => {
           return `  
   // #v-ifdef VITE_TINY_MODE=${key}
-  result = import.meta.glob('./${value}.vue', { eager: true })
+  const params = {}
+  if(props.tiny_experimetal_props_hoc) {
+    result = import.meta.glob('./${value}.vue', { eager: true, query: { withPropsHOC: true } })
+  } else {
+    result = import.meta.glob('./${value}.vue', { eager: true, query: params })
+  }
+
   // #v-endif
         `
         })
@@ -21,17 +27,24 @@ export function transformVirtualTemplate(code: string) {
     }
 
     const result = `
-const ${localName} = (mode) => {
+const ${localName} = (mode, props) => {
   let result
 
   // #v-ifndef VITE_TINY_MODE
-  result = import.meta.glob('./{pc,mobile,mobile-first}.vue', { eager: true })
+    const params = {}
+  if(props.tiny_experimetal_props_hoc) {
+    result = import.meta.glob('./{pc,mobile,mobile-first}.vue', { eager: true, query: { withPropsHOC: true } })
+  } else {
+    result = import.meta.glob('./{pc,mobile,mobile-first}.vue', { eager: true })
+  }
   // #v-endif
 
   ${getTemplate(params)}
 
   const finalMode = ${JSON.stringify(params)}[mode?.value || mode] || '${params[Object.keys(params)[0]]}'
 
+  console.log(props)
+
   return result[\`./\${finalMode}.vue\`].default
 }
   `
diff --git a/package.json b/package.json
index 623ed227e7..0af66302c4 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "build:hooks": "pnpm -C packages/vue-hooks build",
     "build:internals": "pnpm \"--filter=./internals/*\" build",
     "build:virtual-template": "pnpm --filter @opentiny-internal/unplugin-virtual-template build",
+    "build:hoc-plugin": "pnpm --filter @opentiny-internal/unplugin-hoc-plugin build",
     "build:site": "pnpm i -g pnpm && pnpm build:vite-import && pnpm build:virtual-template && pnpm -C examples/sites build",
     "release:aurora": "pnpm -C internals/cli release:aurora",
     "release:alpha": "pnpm -C internals/cli release:alpha",
@@ -153,7 +154,8 @@
   "pnpm": {
     "patchedDependencies": {
       "depcheck@1.4.3": "patches/depcheck@1.4.3.patch",
-      "tsup@7.2.0": "patches/tsup@7.2.0.patch"
+      "tsup@7.2.0": "patches/tsup@7.2.0.patch",
+      "@opentiny/vue-vite-import@1.2.0": "patches/@opentiny__vue-vite-import@1.2.0.patch"
     },
     "overrides": {
       "@vue/compiler-sfc@3": "3.4.38",
diff --git a/packages/vue-common/src/adapter/vue2.7/hoc.tsx b/packages/vue-common/src/adapter/vue2.7/hoc.tsx
new file mode 100644
index 0000000000..2cf02c2200
--- /dev/null
+++ b/packages/vue-common/src/adapter/vue2.7/hoc.tsx
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import { design, $prefix } from '../../index'
+
+export default function DesignConfigPropsHOC(BaseComponent) {
+  return Vue.extend({
+    name: 'DesignConfigHOC',
+    functional: false,
+    inject: {
+      globalDesignConfig: {
+        from: design.configKey,
+        default: () => ({})
+      }
+    },
+    created() {
+      // 暴露实例方法
+      this.$watch(
+        () => this.innerRef,
+        (val) => {
+          if (val) {
+            Object.keys(val).forEach((key) => {
+              if (!(key in this)) {
+                this[key] = val[key]
+              }
+            })
+          }
+        }
+      )
+    },
+    data() {
+      return {
+        innerRef: null
+      }
+    },
+    computed: {
+      componentName() {
+        const rawName = BaseComponent.name || BaseComponent.options.name
+        return rawName.replace($prefix, '')
+      },
+      mergedProps() {
+        // 处理响应式配置
+        const globalConfig = this.unwrap(this.globalDesignConfig)
+        const componentConfig = globalConfig.components?.[this.componentName] || {}
+        return {
+          ...componentConfig.props,
+          ...this.$attrs
+        }
+      }
+    },
+    methods: {
+      // 解包可能存在的响应式对象
+      unwrap(config) {
+        if (config && typeof config === 'object' && 'value' in config) {
+          return config.value
+        }
+        return config || {}
+      }
+    },
+    render(h) {
+      return h(
+        BaseComponent,
+        {
+          ref: (el) => {
+            this.innerRef = el
+          },
+          attrs: this.mergedProps,
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        },
+        this.$slots.default
+      )
+    }
+  })
+}
diff --git a/packages/vue-common/src/adapter/vue2.7/index.ts b/packages/vue-common/src/adapter/vue2.7/index.ts
index b1faf1fc07..f7e62c9cc4 100644
--- a/packages/vue-common/src/adapter/vue2.7/index.ts
+++ b/packages/vue-common/src/adapter/vue2.7/index.ts
@@ -13,6 +13,7 @@ import Vue from 'vue'
 import * as hooks from 'vue'
 import { emitter, bindFilter, getElementCssClass, getElementStatusClass } from '../utils'
 import teleport from '../teleport'
+import DesignConfigPropsHOC from './hoc'
 
 const Teleport = teleport(hooks)
 
@@ -341,6 +342,15 @@ export const createComponentFn = (design) => {
 
 export const defineComponent = hooks.defineComponent
 
+// 简便用法
+// export default WithDesignConfigPropsDefineComponent({
+//   name: 'xxx',
+//   setup() {}
+// })
+export function WithDesignConfigPropsDefineComponent(BaseComponent: any) {
+  return DesignConfigPropsHOC(hooks.defineComponent(BaseComponent))
+}
+
 export default hooks
 
 export const isVue2 = true
diff --git a/packages/vue-common/src/adapter/vue2/hoc.tsx b/packages/vue-common/src/adapter/vue2/hoc.tsx
new file mode 100644
index 0000000000..2cf02c2200
--- /dev/null
+++ b/packages/vue-common/src/adapter/vue2/hoc.tsx
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import { design, $prefix } from '../../index'
+
+export default function DesignConfigPropsHOC(BaseComponent) {
+  return Vue.extend({
+    name: 'DesignConfigHOC',
+    functional: false,
+    inject: {
+      globalDesignConfig: {
+        from: design.configKey,
+        default: () => ({})
+      }
+    },
+    created() {
+      // 暴露实例方法
+      this.$watch(
+        () => this.innerRef,
+        (val) => {
+          if (val) {
+            Object.keys(val).forEach((key) => {
+              if (!(key in this)) {
+                this[key] = val[key]
+              }
+            })
+          }
+        }
+      )
+    },
+    data() {
+      return {
+        innerRef: null
+      }
+    },
+    computed: {
+      componentName() {
+        const rawName = BaseComponent.name || BaseComponent.options.name
+        return rawName.replace($prefix, '')
+      },
+      mergedProps() {
+        // 处理响应式配置
+        const globalConfig = this.unwrap(this.globalDesignConfig)
+        const componentConfig = globalConfig.components?.[this.componentName] || {}
+        return {
+          ...componentConfig.props,
+          ...this.$attrs
+        }
+      }
+    },
+    methods: {
+      // 解包可能存在的响应式对象
+      unwrap(config) {
+        if (config && typeof config === 'object' && 'value' in config) {
+          return config.value
+        }
+        return config || {}
+      }
+    },
+    render(h) {
+      return h(
+        BaseComponent,
+        {
+          ref: (el) => {
+            this.innerRef = el
+          },
+          attrs: this.mergedProps,
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        },
+        this.$slots.default
+      )
+    }
+  })
+}
diff --git a/packages/vue-common/src/adapter/vue2/index.ts b/packages/vue-common/src/adapter/vue2/index.ts
index f30c77acca..1e319a6140 100644
--- a/packages/vue-common/src/adapter/vue2/index.ts
+++ b/packages/vue-common/src/adapter/vue2/index.ts
@@ -3,6 +3,7 @@ import * as compositionHooks from '@vue/composition-api'
 import * as vueHooks from 'vue'
 import { bindFilter, emitter, getElementCssClass, getElementStatusClass } from '../utils'
 import teleport from '../teleport'
+import DesignConfigPropsHOC from './hoc'
 
 // vue2.7有version字段
 const isVueHooks = Boolean(Vue.version?.includes('2.7'))
@@ -342,6 +343,15 @@ export const createComponentFn = (design) => {
 
 export const defineComponent = hooks.defineComponent
 
+// 简便用法
+// export default WithDesignConfigPropsDefineComponent({
+//   name: 'xxx',
+//   setup() {}
+// })
+export function WithDesignConfigPropsDefineComponent(BaseComponent: any) {
+  return DesignConfigPropsHOC(hooks.defineComponent(BaseComponent))
+}
+
 export default hooks
 
 export const isVue2 = true
diff --git a/packages/vue-common/src/adapter/vue3/hoc.tsx b/packages/vue-common/src/adapter/vue3/hoc.tsx
new file mode 100644
index 0000000000..a6971efcb2
--- /dev/null
+++ b/packages/vue-common/src/adapter/vue3/hoc.tsx
@@ -0,0 +1,55 @@
+import { type SetupContext } from 'vue'
+import { design, hooks, $prefix, $setup } from '../../index'
+import { getComponentName } from '../index'
+
+// 修改组件 props ，注入 Design Config
+export default function DesignConfigPropsHOC(BaseComponent: any) {
+  return {
+    ...BaseComponent,
+    setup(props, context) {
+      const { attrs, slots, expose }: SetupContext = context
+      const innerRef = hooks.ref()
+      // 获取组件级配置和全局配置（inject需要带有默认值，否则控制台会报警告）
+      let globalDesignConfig = hooks.inject(design.configKey, {})
+      // globalDesignConfig 可能是响应式对象，比如 computed
+      globalDesignConfig = globalDesignConfig?.value || globalDesignConfig || {}
+      const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
+      const designConfigProps = designConfig?.props || {}
+      const mergedProps = { ...designConfigProps, ...attrs }
+
+      expose(
+        new Proxy(
+          {},
+          {
+            get(_target, key) {
+              return innerRef.value?.[key]
+            },
+            has(_target, key) {
+              return innerRef.value?.[key]
+            }
+          }
+        )
+      )
+
+      return $setup({
+        props,
+        context,
+        template: () => {
+          return (
+            <BaseComponent {...mergedProps} ref={innerRef}>
+              {slots}
+            </BaseComponent>
+          )
+        }
+      })
+
+      // return () => {
+      //   return (
+      //     <BaseComponent {...mergedProps} ref={innerRef}>
+      //       {slots}
+      //     </BaseComponent>
+      //   )
+      // }
+    }
+  }
+}
diff --git a/packages/vue-common/src/adapter/vue3/index.ts b/packages/vue-common/src/adapter/vue3/index.ts
index 386aabe1fa..42ddd9059e 100644
--- a/packages/vue-common/src/adapter/vue3/index.ts
+++ b/packages/vue-common/src/adapter/vue3/index.ts
@@ -13,6 +13,7 @@ import * as hooks from 'vue'
 
 import { camelize, capitalize, hyphenate } from '@opentiny/utils'
 import { bindFilter, emitter, getElementCssClass, getElementStatusClass } from '../utils'
+import DesignConfigPropsHOC from './hoc'
 
 const Teleport = hooks.Teleport
 
@@ -477,6 +478,15 @@ export const createComponentFn = (design) => {
 
 export const defineComponent = hooks.defineComponent
 
+// 简便用法
+// export default WithDesignConfigPropsDefineComponent({
+//   name: 'xxx',
+//   setup() {}
+// })
+export function WithDesignConfigPropsDefineComponent(BaseComponent: any) {
+  return DesignConfigPropsHOC(hooks.defineComponent(BaseComponent))
+}
+
 export default hooks
 
 export const isVue2 = false
diff --git a/packages/vue-common/src/index.ts b/packages/vue-common/src/index.ts
index 9d14e1b642..f019f7226a 100644
--- a/packages/vue-common/src/index.ts
+++ b/packages/vue-common/src/index.ts
@@ -21,7 +21,7 @@ import {
 import { t } from '@opentiny/vue-locale'
 import { stringifyCssClass, stringifyCssClassObject, stringifyCssClassArray, deduplicateCssClass } from './csscls'
 import '@opentiny/vue-theme/base/index.less'
-import { defineComponent, isVue2, isVue3 } from './adapter'
+import { defineComponent, isVue2, isVue3, WithDesignConfigPropsDefineComponent } from './adapter'
 import { useBreakpoint } from './breakpoint'
 import { useDefer } from './usedefer'
 import { GRADIENT_ICONS_LIST, generateIcon } from './generateIcon'
@@ -37,13 +37,14 @@ export { useBreakpoint, useDefer }
 
 export { version } from '../package.json'
 
-export { defineComponent, isVue2, isVue3, appProperties }
+export { defineComponent, isVue2, isVue3, appProperties, WithDesignConfigPropsDefineComponent }
 
 export const $prefix = 'Tiny'
 
 export const $props = {
   'tiny_mode': String,
   'tiny_mode_root': Boolean,
+  'tiny_experimetal_props_hoc': Boolean,
   'tiny_template': [Function, Object],
   'tiny_renderless': Function,
   'tiny_theme': String,
@@ -53,12 +54,22 @@ export const $props = {
 export const props: Array<
   | 'tiny_mode'
   | 'tiny_mode_root'
+  | 'tiny_experimetal_props_hoc'
   | 'tiny_template'
   | 'tiny_renderless'
   | '_constants'
   | 'tiny_theme'
   | 'tiny_chart_theme'
-> = ['tiny_mode', 'tiny_mode_root', 'tiny_template', 'tiny_renderless', '_constants', 'tiny_theme', 'tiny_chart_theme']
+> = [
+  'tiny_mode',
+  'tiny_mode_root',
+  'tiny_experimetal_props_hoc',
+  'tiny_template',
+  'tiny_renderless',
+  '_constants',
+  'tiny_theme',
+  'tiny_chart_theme'
+]
 
 export const resolveMode = (props, context) => {
   let isRightMode = (mode) => ~['pc', 'mobile', 'mobile-first'].indexOf(mode)
@@ -123,6 +134,7 @@ const resolveChartTheme = (props, context) => {
 }
 
 export const $setup = ({ props, context, template, extend = {} }) => {
+  // console.log('props', props)
   const mode = resolveMode(props, context)
   const view = hooks.computed(() => {
     if (typeof props.tiny_template !== 'undefined') return props.tiny_template
@@ -132,7 +144,30 @@ export const $setup = ({ props, context, template, extend = {} }) => {
     return typeof component === 'function' ? defineAsyncComponent(component) : component
   })
 
-  return renderComponent({ view, props, context, extend })
+  // 获取组件级配置和全局配置（inject需要带有默认值，否则控制台会报警告）
+  let globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {})
+  // globalDesignConfig 可能是响应式对象，比如 computed
+  globalDesignConfig = globalDesignConfig?.value || globalDesignConfig || {}
+  const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
+  const designConfigProps = designConfig?.props || {}
+  const mergedProps = { ...designConfigProps, ...props }
+
+  let instance = hooks.getCurrentInstance()
+
+  if (isVue2) {
+    instance = instance.proxy
+  }
+
+  // console.log('props', instance.propsOptions)
+  // console.log('props', instance.propsDefaults)
+
+  return renderComponent({
+    view,
+    props: mergedProps,
+    context,
+    extend,
+    globalDesignConfig
+  })
 }
 
 // 提供给没有renderless层的组件使用（比如TinyVuePlus组件）
diff --git a/packages/vue/src/button/src/index.ts b/packages/vue/src/button/src/index.ts
index e9be1c01e4..70b6c497f4 100644
--- a/packages/vue/src/button/src/index.ts
+++ b/packages/vue/src/button/src/index.ts
@@ -12,6 +12,8 @@
 import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
+// console.log(template)
+
 export const buttonProps = {
   ...$props,
   /** 展示按钮不同的状态，设置为text则展示为文本按钮。可取值为：'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'  */
@@ -101,6 +103,7 @@ export default defineComponent({
     default: {}
   }>,
   setup(props, context) {
+    // console.log(props.tiny_experimetal_props_hoc)
     return $setup({ props, context, template })
   }
 })
diff --git a/patches/@opentiny__vue-vite-import@1.2.0.patch b/patches/@opentiny__vue-vite-import@1.2.0.patch
new file mode 100644
index 0000000000..a49ba3bbcc
--- /dev/null
+++ b/patches/@opentiny__vue-vite-import@1.2.0.patch
@@ -0,0 +1,35 @@
+diff --git a/dist/index.cjs b/dist/index.cjs
+index 3cc0b53d09e234fe4dc9f632c0d084d540b5bc80..8a635e04d464ba14e4de84a6c0cffae7c20bddc6 100644
+--- a/dist/index.cjs
++++ b/dist/index.cjs
+@@ -53,8 +53,10 @@ function vitePluginBabelImport(plgOptions, modeType) {
+       if (Array.isArray(exclude) && matchExclude(exclude, id)) {
+         return code;
+       }
+-      const isCheckMode = mode && /@opentiny\/vue-.+?\/lib\/index.js$/.test(id) && code.includes(`./${mode}`);
+-      if (/\.(?:[jt]sx?|vue)$/.test(id) && !/(node_modules)/.test(id)) {
++                   // 不处理node_modules内的依赖
++                   const idWithoutQuery = id.replace('?withPropsHOC=true', '')
++      const isCheckMode = mode && /@opentiny\/vue-.+?\/lib\/index.js$/.test(idWithoutQuery) && code.includes(`./${mode}`);
++      if (/\.(?:[jt]sx?|vue)$/.test(idWithoutQuery) && !/(node_modules)/.test(idWithoutQuery)) {
+         return {
+           code: transformCode(code, transformOptions(pluginOption)),
+           map: null
+diff --git a/dist/index.js b/dist/index.js
+index fc9633c1a014990d1afb34084307c4d57790949f..ae652f89e6dce79984282bcf30914aefa6213dc2 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -19,8 +19,11 @@ function vitePluginBabelImport(plgOptions, modeType) {
+       if (Array.isArray(exclude) && matchExclude(exclude, id)) {
+         return code;
+       }
+-      const isCheckMode = mode && /@opentiny\/vue-.+?\/lib\/index.js$/.test(id) && code.includes(`./${mode}`);
+-      if (/\.(?:[jt]sx?|vue)$/.test(id) && !/(node_modules)/.test(id)) {
++             // 不处理node_modules内的依赖
++             const idWithoutQuery = id.replace('?withPropsHOC=true', '')
++      const isCheckMode = mode && /@opentiny\/vue-.+?\/lib\/index.js$/.test(idWithoutQuery) && code.includes(`./${mode}`);
++
++      if (/\.(?:[jt]sx?|vue)$/.test(idWithoutQuery) && !/(node_modules)/.test(idWithoutQuery)) {
+         return {
+           code: transformCode(code, transformOptions(pluginOption)),
+           map: null