diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 155ba81..6451c9d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -9,7 +9,10 @@ module.exports = {
     '@vue/eslint-config-prettier/skip-formatting'
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
+    ecmaFeatures: {
+      jsx: true
+    }
   },
   rules: {
     'prettier/prettier': [
@@ -27,6 +30,7 @@ module.exports = {
       {
         ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
       }
-    ]
+    ],
+    'vue/jsx-uses-vars': 'error' // 确保 JSX 中使用的变量被正确识别
   }
 }
diff --git a/jsconfig.json b/jsconfig.json
index 5a1f2d2..8d93064 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "paths": {
       "@/*": ["./src/*"]
     }
diff --git a/package.json b/package.json
index 7b9ab5e..2b61143 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,9 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/runtime-dom": "^3.5.13",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "husky": "^8.0.0",
diff --git a/vite.config.js b/vite.config.js
index c3d4a80..49f57d4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,11 +2,19 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), svgLoader()],
+  plugins: [
+    vue(),
+    vueJsx({
+      transformOn: true,
+      optimize: true
+    }),
+    svgLoader()
+  ],
   base: '/im',
   resolve: {
     alias: {