diff --git a/package.json b/package.json
index a5656e2..f3ff4f3 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@types/stompjs": "^2.3.5",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "autoprefixer": "^10.4.14",
     "commitizen": "^4.3.0",
     "cz-git": "^1.6.1",
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
new file mode 100644
index 0000000..f4fb60e
--- /dev/null
+++ b/src/layout/components/Sidebar/Item.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import { translateRouteTitle } from "@/utils/i18n";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+});
+
+const vnodes: any[] = [];
+if (props.icon) {
+  if (props.icon.includes("el-icon")) {
+    vnodes.push(h("i", { class: [props.icon, "sub-el-icon"] }));
+  } else {
+    vnodes.push(h(SvgIcon, { "icon-class": props.icon }));
+  }
+}
+
+if (props.title) {
+  vnodes.push(h("span", { slot: "title" }, translateRouteTitle(props.title)));
+}
+const render = h("div", vnodes);
+</script>
+
+<template>
+  <render />
+</template>
+
+<style scoped>
+.sub-el-icon {
+  width: 1em;
+  height: 1em;
+  color: currentcolor;
+}
+</style>
diff --git a/tsconfig.json b/tsconfig.json
index abfa0a4..8b8c16d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,6 @@
     "moduleResolution": "node",
     "strict": true,
     "noLib": false,
-    "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
@@ -19,7 +18,11 @@
     "types": ["vite/client", "unplugin-icons/types/vue"],
     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
     "allowSyntheticDefaultImports": true /* 允许默认导入 */,
-    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
   },
   "include": [
     "src/**/*.ts",
@@ -29,5 +32,4 @@
     "vite.config.ts"
   ],
   "exclude": ["node_modules", "dist", "**/*.js"]
-  // "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 2032da4..a017e17 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,6 +13,8 @@ import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
 import { viteMockServe } from "vite-plugin-mock";
 
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
 import UnoCSS from "unocss/vite";
 import path from "path";
 
@@ -67,6 +69,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     },
     plugins: [
       vue(),
+      vueJsx(),
       UnoCSS({
         hmrTopLevelAwait: false,
       }),