diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..08bd3ac
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,21 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Editor: typeof import('./src/components/Editor.vue')['default']
+    Editors: typeof import('./src/components/Editors.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NFlex: typeof import('naive-ui')['NFlex']
+    NSplit: typeof import('naive-ui')['NSplit']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    Preview: typeof import('./src/components/Preview.vue')['default']
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index a057034..53f9707 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,8 @@
         "@rsbuild/plugin-vue": "^1.0.6",
         "@vue/tsconfig": "^0.7.0",
         "prettier": "^3.5.2",
-        "typescript": "^5.7.3"
+        "typescript": "^5.7.3",
+        "unplugin-vue-components": "^28.4.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -1133,12 +1134,65 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "license": "MIT"
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -1217,6 +1271,31 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -1269,6 +1348,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/core-js": {
       "version": "3.40.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",
@@ -1328,6 +1414,24 @@
         "date-fns": "^3.0.0 || ^4.0.0"
       }
     },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.103",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.103.tgz",
@@ -1471,6 +1575,62 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -1511,6 +1671,52 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/isomorphic-rslog": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/isomorphic-rslog/-/isomorphic-rslog-0.0.6.tgz",
@@ -1576,6 +1782,23 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.0.0.tgz",
+      "integrity": "sha512-bbgPw/wmroJsil/GgL4qjDzs5YLTBMQ99weRsok1XCDccQeehbHA/I1oRvk2NPtr7KGZgT/Y5tPRnAtMqeG2Kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1627,6 +1850,26 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/naive-ui": {
       "version": "2.41.0",
       "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.41.0.tgz",
@@ -1689,18 +1932,60 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize.css": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
       "license": "MIT"
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -1755,6 +2040,32 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -1935,6 +2246,36 @@
         }
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/treemate": {
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.11.tgz",
@@ -1962,6 +2303,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
@@ -1969,6 +2317,73 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unplugin": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.2.0.tgz",
+      "integrity": "sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.4.tgz",
+      "integrity": "sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "28.4.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-28.4.0.tgz",
+      "integrity": "sha512-fnamX2RiKM30nPK4tihEas+bHnbLICo6MmOiP4jGg7fAlgNEuaLvN9yx96JwZDOYfLQcrNzikDdPhZ8k6pkhMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.0",
+        "local-pkg": "^1.0.0",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "tinyglobby": "^0.2.10",
+        "unplugin": "^2.2.0",
+        "unplugin-utils": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
@@ -2178,6 +2593,13 @@
       "engines": {
         "node": ">=10.13.0"
       }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index 14c1ad1..6d59dd5 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@rsbuild/plugin-vue": "^1.0.6",
     "@vue/tsconfig": "^0.7.0",
     "prettier": "^3.5.2",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "unplugin-vue-components": "^28.4.0"
   }
 }
diff --git a/rsbuild.config.ts b/rsbuild.config.ts
index 7af10c8..11b1400 100644
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@@ -1,5 +1,8 @@
 import { defineConfig } from "@rsbuild/core"
 import { pluginVue } from "@rsbuild/plugin-vue"
+// import AutoImport from "unplugin-auto-import/rspack"
+import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
+import Components from "unplugin-vue-components/rspack"
 
 export default defineConfig({
   plugins: [pluginVue()],
@@ -11,6 +14,28 @@ export default defineConfig({
       index: "./src/main.ts",
     },
   },
+  tools: {
+    rspack: {
+      plugins: [
+        // AutoImport({
+        //   imports: [
+        //     "vue",
+        //     {
+        //       "naive-ui": [
+        //         "useDialog",
+        //         "useMessage",
+        //         "useNotification",
+        //         "useLoadingBar",
+        //       ],
+        //     },
+        //   ],
+        // }),
+        Components({
+          resolvers: [NaiveUiResolver()],
+        }),
+      ],
+    },
+  },
   performance: {
     chunkSplit: {
       strategy: "split-by-experience",
@@ -20,4 +45,4 @@ export default defineConfig({
       },
     },
   },
-})
\ No newline at end of file
+})
diff --git a/src/App.vue b/src/App.vue
index c485f9f..93d1eba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useMagicKeys, whenever } from "@vueuse/core"
+import { dateZhCN, zhCN } from "naive-ui"
 import Editors from "./components/Editors.vue"
 import Preview from "./components/Preview.vue"
+import { useMagicKeys, whenever } from "@vueuse/core"
 
 const { ctrl_s } = useMagicKeys({
   passive: false,
@@ -21,12 +22,14 @@ whenever(ctrl_r, () => {})
 </script>
 
 <template>
-  <n-split :max="0.75" :min="0.25">
-    <template #1>
-      <Editors />
-    </template>
-    <template #2>
-      <Preview />
-    </template>
-  </n-split>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
+    <n-split direction="horizontal">
+      <template #1>
+        <Editors />
+      </template>
+      <template #2>
+        <Preview />
+      </template>
+    </n-split>
+  </n-config-provider>
 </template>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index d89c46d..5ca6da7 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -2,10 +2,10 @@
 import { EditorView } from "@codemirror/view"
 import { Codemirror } from "vue-codemirror"
 import { smoothy } from "../themes/smoothy.ts"
-import { computed } from "vue"
 import { css } from "@codemirror/lang-css"
 import { javascript } from "@codemirror/lang-javascript"
 import { html } from "@codemirror/lang-html"
+import { computed } from "vue"
 
 const styleTheme = EditorView.baseTheme({
   "& .cm-scroller": {
diff --git a/src/components/Editors.vue b/src/components/Editors.vue
index 20606c8..4504680 100644
--- a/src/components/Editors.vue
+++ b/src/components/Editors.vue
@@ -1,66 +1,63 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
-    <n-tabs size="large" pane-class="pane" default-value="html" type="segment">
-      <n-tab-pane name="html" tab="HTML">
-        <template #tab>
+  <n-tabs size="large" pane-class="pane" default-value="html" type="segment">
+    <n-tab-pane name="html" tab="HTML">
+      <template #tab>
+        <n-flex align="center">
+          <Icon icon="skill-icons:html" :width="20" :height="20"></Icon>
+          <span>HTML</span>
+        </n-flex>
+      </template>
+      <Editor language="html" :font-size="size" v-model:value="html" />
+    </n-tab-pane>
+    <n-tab-pane name="css" tab="CSS">
+      <template #tab>
+        <n-flex align="center">
+          <Icon icon="skill-icons:css" :width="20" :height="20"></Icon>
+          <span>CSS</span>
+        </n-flex>
+      </template>
+      <Editor language="css" :font-size="size" v-model:value="css" />
+    </n-tab-pane>
+    <n-tab-pane name="js" tab="JavaScript">
+      <template #tab>
+        <n-flex align="center">
+          <Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
+          <span>JavaScript</span>
+        </n-flex>
+      </template>
+      <Editor language="js" :font-size="size" v-model:value="js" />
+    </n-tab-pane>
+    <n-tab-pane name="actions" tab="选项">
+      <template #tab>
+        <n-flex align="center">
+          <Icon icon="solar:settings-bold" :width="20" :height="20"></Icon>
+          <span>选项</span>
+        </n-flex>
+      </template>
+      <n-flex vertical class="wrapper">
+        <n-flex align="center">
+          <span class="label">重置</span>
+          <n-button @click="reset('html')">HTML</n-button>
+          <n-button @click="reset('css')">CSS</n-button>
+          <n-button @click="reset('js')">JS</n-button>
+        </n-flex>
+        <n-flex align="center">
+          <span class="label">字号</span>
           <n-flex align="center">
-            <Icon icon="skill-icons:html" :width="20" :height="20"></Icon>
-            <span>HTML</span>
-          </n-flex>
-        </template>
-        <Editor language="html" :font-size="size" v-model:value="html" />
-      </n-tab-pane>
-      <n-tab-pane name="css" tab="CSS">
-        <template #tab>
-          <n-flex align="center">
-            <Icon icon="skill-icons:css" :width="20" :height="20"></Icon>
-            <span>CSS</span>
-          </n-flex>
-        </template>
-        <Editor language="css" :font-size="size" v-model:value="css" />
-      </n-tab-pane>
-      <n-tab-pane name="js" tab="JavaScript">
-        <template #tab>
-          <n-flex align="center">
-            <Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
-            <span>JavaScript</span>
-          </n-flex>
-        </template>
-        <Editor language="js" :font-size="size" v-model:value="js" />
-      </n-tab-pane>
-      <n-tab-pane name="actions" tab="选项">
-        <template #tab>
-          <n-flex align="center">
-            <Icon icon="solar:settings-bold" :width="20" :height="20"></Icon>
-            <span>选项</span>
-          </n-flex>
-        </template>
-        <n-flex vertical class="wrapper">
-          <n-flex align="center">
-            <span class="label">重置</span>
-            <n-button @click="reset('html')">HTML</n-button>
-            <n-button @click="reset('css')">CSS</n-button>
-            <n-button @click="reset('js')">JS</n-button>
-          </n-flex>
-          <n-flex align="center">
-            <span class="label">字号</span>
-            <n-flex align="center">
-              <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
-              <n-button @click="changeSize(size - 2)" :disabled="size === 20">
-                调小
-              </n-button>
-              <n-button @click="changeSize(size + 2)" :disabled="size === 40">
-                调大
-              </n-button>
-            </n-flex>
+            <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
+            <n-button @click="changeSize(size - 2)" :disabled="size === 20">
+              调小
+            </n-button>
+            <n-button @click="changeSize(size + 2)" :disabled="size === 40">
+              调大
+            </n-button>
           </n-flex>
         </n-flex>
-      </n-tab-pane>
-    </n-tabs>
-  </n-config-provider>
+      </n-flex>
+    </n-tab-pane>
+  </n-tabs>
 </template>
 <script lang="ts" setup>
-import { dateZhCN, zhCN } from "naive-ui"
 import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
 import { html, css, js, reset, size, changeSize } from "../store.ts"
diff --git a/src/main.ts b/src/main.ts
index 661351b..c39a7e1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,19 +1,9 @@
 import { createApp } from "vue"
-import {
-  create,
-  NButton,
-  NFlex,
-  NSplit,
-  NTabs,
-  NTabPane,
-  NConfigProvider,
-} from "naive-ui"
-import "normalize.css" 
+import { create } from "naive-ui"
+import "normalize.css"
 import App from "./App.vue"
 
 const app = createApp(App)
-const naive = create({
-  components: [NButton, NSplit, NFlex, NTabs, NTabPane, NConfigProvider],
-})
+const naive = create()
 app.use(naive)
 app.mount("#app")