diff --git a/eslint.config.js b/eslint.config.js
index e77239f..ae55a4e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -2,6 +2,8 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu({
   unocss: true,
+  vue: true,
+  formatters: { css: true, html: true },
   ignores: [
     '**/*.md',
     '**/*.yaml',
diff --git a/package.json b/package.json
index 9d5444e..1471f3c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@project-trans/suggestion-box",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
   "description": "Suggestion box for Project Trans",
   "author": {
@@ -54,10 +54,7 @@
   "scripts": {
     "dev": "vite",
     "dev:server": "pnpm -F server run dev",
-    "build": "pnpm build:script && pnpm build:style && pnpm build:types",
-    "build:style": "tsx ./script/buildStyle.ts",
-    "build:script": "rollup -c rollup.config.ts --configPlugin esbuild",
-    "build:types": "vue-tsc",
+    "build": "tsx ./script/buildStyle.ts && vue-tsc --declaration --emitDeclarationOnly",
     "preview": "vite preview",
     "lint": "eslint --cache . && pnpm -F server run lint",
     "typecheck": "vue-tsc --noEmit && pnpm -F server run typecheck",
@@ -72,17 +69,14 @@
     "@antfu/eslint-config": "^3.7.3",
     "@iconify-json/octicon": "^1.2.0",
     "@iconify-json/svg-spinners": "^1.2.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
     "@types/node": "^22.7.4",
     "@unocss/eslint-plugin": "^0.63.1",
     "@unocss/reset": "^0.63.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "eslint": "^9.11.1",
+    "eslint-plugin-format": "^0.1.2",
     "lightningcss": "^1.27.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.22.5",
-    "rollup-plugin-esbuild": "^6.1.1",
     "tsx": "^4.19.1",
     "typescript": "^5.6.2",
     "unocss": "^0.63.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 130b3ac..0b52df1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,19 +27,13 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^3.7.3
-        version: 3.7.3(@typescript-eslint/utils@8.7.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@unocss/eslint-plugin@0.63.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@vue/compiler-sfc@3.5.10)(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+        version: 3.7.3(@typescript-eslint/utils@8.7.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@unocss/eslint-plugin@0.63.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@vue/compiler-sfc@3.5.10)(eslint-plugin-format@0.1.2(eslint@9.11.1(jiti@2.0.0)))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
       '@iconify-json/octicon':
         specifier: ^1.2.0
         version: 1.2.0
       '@iconify-json/svg-spinners':
         specifier: ^1.2.0
         version: 1.2.0
-      '@rollup/plugin-node-resolve':
-        specifier: ^15.3.0
-        version: 15.3.0(rollup@4.22.5)
-      '@rollup/plugin-replace':
-        specifier: ^6.0.1
-        version: 6.0.1(rollup@4.22.5)
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -55,18 +49,15 @@ importers:
       eslint:
         specifier: ^9.11.1
         version: 9.11.1(jiti@2.0.0)
+      eslint-plugin-format:
+        specifier: ^0.1.2
+        version: 0.1.2(eslint@9.11.1(jiti@2.0.0))
       lightningcss:
         specifier: ^1.27.0
         version: 1.27.0
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
-      rollup:
-        specifier: ^4.22.5
-        version: 4.22.5
-      rollup-plugin-esbuild:
-        specifier: ^6.1.1
-        version: 6.1.1(esbuild@0.23.1)(rollup@4.22.5)
       tsx:
         specifier: ^4.19.1
         version: 4.19.1
@@ -235,6 +226,15 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@dprint/formatter@0.3.0':
+    resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
+
+  '@dprint/markdown@0.17.8':
+    resolution: {integrity: sha512-ukHFOg+RpG284aPdIg7iPrCYmMs3Dqy43S1ejybnwlJoFiW02b+6Bbr5cfZKFRYNP3dKGM86BqHEnMzBOyLvvA==}
+
+  '@dprint/toml@0.6.3':
+    resolution: {integrity: sha512-zQ42I53sb4WVHA+5yoY1t59Zk++Ot02AvUgtNKLzTT8mPyVqVChFcePa3on/xIoKEgH+RoepgPHzqfk9837YFw==}
+
   '@es-joy/jsdoccomment@0.48.0':
     resolution: {integrity: sha512-G6QUWIcC+KvSwXNsJyDTHvqUdNoAVJPPgkc3+Uk4WBKqZvoXhlvazOgm9aL0HwihJLQf0l+tOE2UFzXBqCqgDw==}
     engines: {node: '>=16'}
@@ -786,24 +786,6 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
-  '@rollup/plugin-node-resolve@15.3.0':
-    resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.78.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-replace@6.0.1':
-    resolution: {integrity: sha512-2sPh9b73dj5IxuMmDAsQWVFT7mR+yoHweBaXG2W/R8vQ+IWZlnaI7BR7J6EguVQUp1hd8Z7XuozpDjEKQAAC2Q==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/pluginutils@5.1.2':
     resolution: {integrity: sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==}
     engines: {node: '>=14.0.0'}
@@ -923,9 +905,6 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
-  '@types/resolve@1.20.2':
-    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
-
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -1363,10 +1342,6 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  deepmerge@4.3.1:
-    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
-    engines: {node: '>=0.10.0'}
-
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
@@ -1463,6 +1438,11 @@ packages:
   eslint-flat-config-utils@0.4.0:
     resolution: {integrity: sha512-kfd5kQZC+BMO0YwTol6zxjKX1zAsk8JfSAopbKjKqmENTJcew+yBejuvccAg37cvOrN0Mh+DVbeyznuNWEjt4A==}
 
+  eslint-formatting-reporter@0.0.0:
+    resolution: {integrity: sha512-k9RdyTqxqN/wNYVaTk/ds5B5rA8lgoAmvceYN7bcZMBwU7TuXx5ntewJv81eF3pIL/CiJE+pJZm36llG8yhyyw==}
+    peerDependencies:
+      eslint: '>=8.40.0'
+
   eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
@@ -1471,6 +1451,9 @@ packages:
     peerDependencies:
       eslint: '*'
 
+  eslint-parser-plain@0.1.0:
+    resolution: {integrity: sha512-oOeA6FWU0UJT/Rxc3XF5Cq0nbIZbylm7j8+plqq0CZoE6m4u32OXJrR+9iy4srGMmF6v6pmgvP1zPxSRIGh3sg==}
+
   eslint-plugin-antfu@2.7.0:
     resolution: {integrity: sha512-gZM3jq3ouqaoHmUNszb1Zo2Ux7RckSvkGksjLWz9ipBYGSv1EwwBETN6AdiUXn+RpVHXTbEMPAPlXJazcA6+iA==}
     peerDependencies:
@@ -1487,6 +1470,11 @@ packages:
     peerDependencies:
       eslint: '>=8'
 
+  eslint-plugin-format@0.1.2:
+    resolution: {integrity: sha512-ZrcO3aiumgJ6ENAv65IWkPjtW77ML/5mp0YrRK0jdvvaZJb+4kKWbaQTMr/XbJo6CtELRmCApAziEKh7L2NbdQ==}
+    peerDependencies:
+      eslint: ^8.40.0 || ^9.0.0
+
   eslint-plugin-import-x@4.3.1:
     resolution: {integrity: sha512-5TriWkXulDl486XnYYRgsL+VQoS/7mhN/2ci02iLCuL7gdhbiWxnsuL/NTcaKY9fpMgsMFjWZBtIGW7pb+RX0g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1646,6 +1634,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -1816,9 +1807,6 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-module@1.0.0:
-    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
-
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -2312,6 +2300,15 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   printable-characters@1.0.42:
     resolution: {integrity: sha512-dKp+C4iXWK4vVYZmYSd0KBH5F/h1HoZRsbJ82AVKRO3PEo8L4lBS/vLwhVtpwwuYcoIsVY+1JYKR268yn480uQ==}
 
@@ -2378,13 +2375,6 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  rollup-plugin-esbuild@6.1.1:
-    resolution: {integrity: sha512-CehMY9FAqJD5OUaE/Mi1r5z0kNeYxItmRO2zG4Qnv2qWKF09J2lTy5GUzjJR354ZPrLkCj4fiBN41lo8PzBUhw==}
-    engines: {node: '>=14.18.0'}
-    peerDependencies:
-      esbuild: '>=0.18.0'
-      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
-
   rollup-plugin-inject@3.0.2:
     resolution: {integrity: sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==}
     deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
@@ -2798,7 +2788,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@3.7.3(@typescript-eslint/utils@8.7.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@unocss/eslint-plugin@0.63.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@vue/compiler-sfc@3.5.10)(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
+  '@antfu/eslint-config@3.7.3(@typescript-eslint/utils@8.7.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@unocss/eslint-plugin@0.63.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@vue/compiler-sfc@3.5.10)(eslint-plugin-format@0.1.2(eslint@9.11.1(jiti@2.0.0)))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
     dependencies:
       '@antfu/install-pkg': 0.4.1
       '@clack/prompts': 0.7.0
@@ -2838,6 +2828,7 @@ snapshots:
       yargs: 17.7.2
     optionalDependencies:
       '@unocss/eslint-plugin': 0.63.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+      eslint-plugin-format: 0.1.2(eslint@9.11.1(jiti@2.0.0))
     transitivePeerDependencies:
       - '@typescript-eslint/utils'
       - '@vue/compiler-sfc'
@@ -2920,6 +2911,12 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@dprint/formatter@0.3.0': {}
+
+  '@dprint/markdown@0.17.8': {}
+
+  '@dprint/toml@0.6.3': {}
+
   '@es-joy/jsdoccomment@0.48.0':
     dependencies:
       comment-parser: 1.4.1
@@ -3278,23 +3275,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@rollup/plugin-node-resolve@15.3.0(rollup@4.22.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.22.5)
-      '@types/resolve': 1.20.2
-      deepmerge: 4.3.1
-      is-module: 1.0.0
-      resolve: 1.22.8
-    optionalDependencies:
-      rollup: 4.22.5
-
-  '@rollup/plugin-replace@6.0.1(rollup@4.22.5)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.22.5)
-      magic-string: 0.30.11
-    optionalDependencies:
-      rollup: 4.22.5
-
   '@rollup/pluginutils@5.1.2(rollup@4.22.5)':
     dependencies:
       '@types/estree': 1.0.6
@@ -3387,8 +3367,6 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
-  '@types/resolve@1.20.2': {}
-
   '@types/unist@3.0.3': {}
 
   '@typescript-eslint/eslint-plugin@8.7.0(@typescript-eslint/parser@8.7.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
@@ -3924,8 +3902,6 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  deepmerge@4.3.1: {}
-
   defu@6.1.4: {}
 
   dequal@2.0.3: {}
@@ -4066,6 +4042,11 @@ snapshots:
     dependencies:
       pathe: 1.1.2
 
+  eslint-formatting-reporter@0.0.0(eslint@9.11.1(jiti@2.0.0)):
+    dependencies:
+      eslint: 9.11.1(jiti@2.0.0)
+      prettier-linter-helpers: 1.0.0
+
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
@@ -4078,6 +4059,8 @@ snapshots:
     dependencies:
       eslint: 9.11.1(jiti@2.0.0)
 
+  eslint-parser-plain@0.1.0: {}
+
   eslint-plugin-antfu@2.7.0(eslint@9.11.1(jiti@2.0.0)):
     dependencies:
       '@antfu/utils': 0.7.10
@@ -4095,6 +4078,17 @@ snapshots:
       eslint: 9.11.1(jiti@2.0.0)
       eslint-compat-utils: 0.5.1(eslint@9.11.1(jiti@2.0.0))
 
+  eslint-plugin-format@0.1.2(eslint@9.11.1(jiti@2.0.0)):
+    dependencies:
+      '@dprint/formatter': 0.3.0
+      '@dprint/markdown': 0.17.8
+      '@dprint/toml': 0.6.3
+      eslint: 9.11.1(jiti@2.0.0)
+      eslint-formatting-reporter: 0.0.0(eslint@9.11.1(jiti@2.0.0))
+      eslint-parser-plain: 0.1.0
+      prettier: 3.3.3
+      synckit: 0.9.1
+
   eslint-plugin-import-x@4.3.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2):
     dependencies:
       '@typescript-eslint/utils': 8.7.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
@@ -4336,6 +4330,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.3.0: {}
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4497,8 +4493,6 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-module@1.0.0: {}
-
   is-number@7.0.0: {}
 
   is-path-inside@3.0.3: {}
@@ -5114,6 +5108,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier@3.3.3: {}
+
   printable-characters@1.0.42: {}
 
   punycode@2.3.1: {}
@@ -5173,17 +5173,6 @@ snapshots:
       glob: 11.0.0
       package-json-from-dist: 1.0.1
 
-  rollup-plugin-esbuild@6.1.1(esbuild@0.23.1)(rollup@4.22.5):
-    dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.22.5)
-      debug: 4.3.7
-      es-module-lexer: 1.5.4
-      esbuild: 0.23.1
-      get-tsconfig: 4.8.1
-      rollup: 4.22.5
-    transitivePeerDependencies:
-      - supports-color
-
   rollup-plugin-inject@3.0.2:
     dependencies:
       estree-walker: 0.6.1
diff --git a/script/buildStyle.ts b/script/buildStyle.ts
index aa6f948..2444fe5 100644
--- a/script/buildStyle.ts
+++ b/script/buildStyle.ts
@@ -1,16 +1,50 @@
-import { Buffer } from 'node:buffer'
+import { resolve } from 'node:path'
 /* eslint-disable antfu/no-top-level-await */
-import { readFile, writeFile } from 'node:fs/promises'
-import { transform } from 'lightningcss'
-import { createGenerator } from 'unocss'
-import config from '../uno.config'
+import vue from '@vitejs/plugin-vue'
+import { presetUno } from 'unocss'
+import UnoCSS from 'unocss/vite'
+import { build } from 'vite'
 
-const generator = createGenerator(config)
-const file = await readFile('./src/App.vue', 'utf-8')
-const result = await generator.generate(file)
-const { code } = transform({
-  code: Buffer.from(result.css),
-  filename: 'style.css',
-  minify: true,
+// const generator = createGenerator(config)
+// const file = await readFile('./src/App.vue', 'utf-8')
+// const result = await generator.generate(file)
+// const { code } = transform({
+//   code: Buffer.from(result.css),
+//   filename: 'style.css',
+//   minify: true,
+// })
+// await writeFile('./dist/style.css', code)
+await build({
+  plugins: [vue(), UnoCSS()],
+  build: {
+    lib: {
+      entry: [
+        resolve(import.meta.dirname, '../src/index.ts'),
+        resolve(import.meta.dirname, '../src/preset.ts'),
+      ],
+      name: 'SuggestionBox',
+      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'umd.cjs'}`,
+    },
+    rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue' } } },
+  },
+})
+
+await build({
+  plugins: [
+    vue({ features: { customElement: true } }),
+    UnoCSS({
+      mode: 'shadow-dom',
+      presets: [presetUno({ dark: 'class' })],
+    }),
+  ],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: [
+        resolve(import.meta.dirname, '../src/aio.ts'),
+      ],
+      name: 'SuggestionBox',
+      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'umd.cjs'}`,
+    },
+  },
 })
-await writeFile('./dist/style.css', code)
diff --git a/src/App.vue b/src/App.vue
index 28ae643..9620e81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -150,7 +150,7 @@ async function handleSubmit() {
     <label>
       <input
         v-model="contactContent"
-        class="min-h-0 w-full resize-none rounded-t-md border-none p-2 outline-none"
+        class="min-h-0 w-full resize-none rounded-t-md border-none p-2 text-inherit outline-none"
         bg="zinc-100 dark:zinc-900"
         text="sm"
         :placeholder="contactContentPlaceholder"
@@ -159,7 +159,7 @@ async function handleSubmit() {
     <label class="inline-grid items-stretch sb-auto-height">
       <textarea
         v-model="textContent"
-        class="min-h-0 resize-none rounded-t-md border-none p-2 outline-none"
+        class="min-h-0 resize-none rounded-t-md border-none p-2 text-inherit outline-none"
         bg="$vp-c-bg"
         :placeholder="textContentPlaceholder"
       />
@@ -173,7 +173,7 @@ async function handleSubmit() {
           <template v-for="(url, index) in imageUrls" :key="url">
             <div class="relative">
               <button
-                class="absolute right-1 top-1 h-8 w-8 inline-flex items-center justify-center rounded-md duration-250"
+                class="absolute right-1 top-1 h-8 w-8 inline-flex items-center justify-center rounded-md border-none duration-250"
                 transition="all ease-in-out"
                 bg="zinc-800 opacity-60 hover:opacity-80 active:opacity-50"
                 text="zinc-100"
@@ -205,7 +205,7 @@ async function handleSubmit() {
           @change="handleChange"
         >
         <button
-          class="w-full flex items-center justify-center rounded-md px-2 py-2 duration-250"
+          class="w-full flex items-center justify-center rounded-md border-none px-2 py-2 duration-250"
           transition="all ease-in-out"
           bg="zinc-200 hover:zinc-300 active:zinc-400 dark:zinc-800 dark:hover:zinc-700 dark:active:zinc-600"
           text="zinc-700 dark:zinc-300 base"
@@ -226,7 +226,7 @@ async function handleSubmit() {
             ? 'text-zinc-700 disabled:text-zinc-700 dark:text-zinc-300 dark:disabled:text-zinc-300'
             : 'text-zinc-700 disabled:text-zinc-400 dark:text-zinc-300 dark:disabled:text-zinc-600',
         ]"
-        class="block w-full flex cursor-pointer justify-center rounded-md px-2 py-2 duration-250"
+        class="block w-full flex cursor-pointer justify-center rounded-md border-none px-2 py-2 duration-250"
         transition="all ease-in-out"
         bg="zinc-200 hover:zinc-300 active:zinc-400 dark:zinc-800 dark:hover:zinc-700 dark:active:zinc-600"
         text="base"
@@ -281,3 +281,9 @@ async function handleSubmit() {
     </div>
   </form>
 </template>
+
+<style>
+/*
+@unocss-placeholder
+*/
+</style>
diff --git a/src/aio.ts b/src/aio.ts
index 4ff3873..329fed2 100644
--- a/src/aio.ts
+++ b/src/aio.ts
@@ -1,17 +1,29 @@
-import { createApp } from 'vue'
+import { defineCustomElement, h, onUnmounted, ref } from 'vue'
 import App from './App.vue'
 
-function mount(props: {
-  attachImageButtonText?: string
-  sendButtonText?: string
-  sendingButtonText?: string
-  sentSuccessButtonText?: string
-  sentFailedButtonText?: string
-  targetUrl?: string
-  textContentPlaceholder?: string
-  contactContentPlaceholder?: string
-}, rootContainer: string | Element) {
-  createApp(App, props).mount(rootContainer)
-}
+const SuggestionBox = defineCustomElement({
+  props: {
+    attachImageButtonText: String,
+    sendButtonText: String,
+    sendingButtonText: String,
+    sentSuccessButtonText: String,
+    sentFailedButtonText: String,
+    textContentPlaceholder: String,
+    contactContentPlaceholder: String,
+    targetUrl: String,
+  },
+  setup: (props) => {
+    const body = document.body
+    const classes = ref(body.className)
+    const observer = new MutationObserver(() => {
+      classes.value = body.className
+    })
+    observer.observe(body, { attributes: true })
+    onUnmounted(() => observer.disconnect())
+    return () =>
+      h('div', { class: classes.value }, h(App, { ...props }))
+  },
+})
+customElements.define('suggestion-box', SuggestionBox)
 
-export default mount
+export { }
diff --git a/src/dev.ts b/src/dev.ts
index cf3090e..11070c9 100644
--- a/src/dev.ts
+++ b/src/dev.ts
@@ -1,12 +1,8 @@
-import { createApp } from 'vue'
-
-import App from './App.vue'
 import '@unocss/reset/tailwind.css'
+import './aio'
 
-import 'virtual:uno.css'
+// import 'virtual:uno.css'
 
-createApp(App, { sendText: '发送', targetUrl: '/api/v1/suggestion' }).mount(
-  '#app',
-)
+document.body.appendChild(document.createElement('suggestion-box'))
 
-export default App
+export { }
diff --git a/src/index.ts b/src/index.ts
index 8f216d9..6166a9f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
 import App from './App.vue'
+import 'uno.css'
 
 export default App
diff --git a/vite.config.ts b/vite.config.ts
index a30f463..8d2f4b8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,7 @@
-import { resolve } from 'node:path'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), UnoCSS()],
   server: {
     proxy: {
       '/api': {
@@ -15,14 +11,6 @@ export default defineConfig({
     },
   },
   build: {
-    lib: {
-      entry: [
-        resolve(import.meta.dirname, 'src/index.ts'),
-        resolve(import.meta.dirname, 'src/preset.ts'),
-      ],
-      name: 'SuggestionBox',
-      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'umd.cjs'}`,
-    },
-    rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue' } } },
+    cssMinify: 'lightningcss',
   },
 })