diff --git a/package.json b/package.json
index 9d2721db..4493e453 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "packages/*"
   ],
   "dependencies": {
+    "@formkit/themes": "1.0.0-beta.9",
+    "@formkit/vue": "1.0.0-beta.9",
     "@halo-dev/admin-api": "^1.1.0",
     "@halo-dev/admin-shared": "workspace:*",
     "@halo-dev/components": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0f67bb4..cfb1e375 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,8 @@ importers:
 
   .:
     specifiers:
+      '@formkit/themes': 1.0.0-beta.9
+      '@formkit/vue': 1.0.0-beta.9
       '@halo-dev/admin-api': ^1.1.0
       '@halo-dev/admin-shared': workspace:*
       '@halo-dev/components': workspace:*
@@ -60,6 +62,8 @@ importers:
       vue-router: ^4.0.16
       vue-tsc: ^0.38.2
     dependencies:
+      '@formkit/themes': 1.0.0-beta.9_tailwindcss@3.1.4
+      '@formkit/vue': 1.0.0-beta.9_rkpirzljteu3gouykqigqhmb7i
       '@halo-dev/admin-api': 1.1.0
       '@halo-dev/admin-shared': link:packages/shared
       '@halo-dev/components': link:packages/components
@@ -1455,6 +1459,98 @@ packages:
     dependencies:
       '@floating-ui/core': 0.3.1
 
+  /@formkit/core/1.0.0-beta.9:
+    resolution: {integrity: sha512-TFU2dTY/0DS9CLv0djwG0WgfSX1Hx0hvLzqCZWSx2Jw0ivO4jtMOEJjagy4LZSEvrE8yu4MTolZVSi3PbEEXug==}
+    dependencies:
+      '@formkit/utils': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/dev/1.0.0-beta.9:
+    resolution: {integrity: sha512-8SVN3uZSUot02rA0Kg4wssjHTIgUwzAlwJKf90fFNdztFIMo1QYoQ36HA2tssoHUHVuRO/39lLh3eIkIx7Cx+A==}
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/utils': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/i18n/1.0.0-beta.9:
+    resolution: {integrity: sha512-l5AkMZ2+trFuXFbuc8Pzrbntg3HAtf/tqV2lG75IAYSOTQlpTsOC5GWF0Hxly9LaKpzdTHAUJBQjEqD5pQwqsA==}
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/utils': 1.0.0-beta.9
+      '@formkit/validation': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/inputs/1.0.0-beta.9:
+    resolution: {integrity: sha512-a+SLj/RtfuM23eUYJJeW1V99ga1FfwDE8raNT/DV4lURikdvg4XU2OJT3ZL3Q0UCK/CI70sdIskudEzk8NESmA==}
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/observer/1.0.0-beta.9:
+    resolution: {integrity: sha512-7xfA+9OWsdHTi/Z2zAotqDhKWpToyGoFMjyTw1dnWLh2sphq/+05Lpi/UcLCrX+uvYQjKtGkUBNH+EyjXZ1wPA==}
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/utils': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/rules/1.0.0-beta.9:
+    resolution: {integrity: sha512-8h7eAQ9Iw4V1dV+U9NXV6L6BaOoitCv33VAgBO2muQaHf/KAOWq5Hebkm1OXt8N/o6f42KrsCIU8VuPbe5P0fA==}
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/utils': 1.0.0-beta.9
+      '@formkit/validation': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/themes/1.0.0-beta.9_tailwindcss@3.1.4:
+    resolution: {integrity: sha512-FF5M6X9B6mjxxMOYBkCTd0QhGZtPRXMMCtyDWDOwqKUPXf5+CVfwbTgicO3rSF2AMzeP9K+9wmvoniECKqgvAA==}
+    peerDependencies:
+      tailwindcss: ^3.0.0
+      unocss: ^0.31.0
+      windicss: ^3.0.0
+    peerDependenciesMeta:
+      tailwindcss:
+        optional: true
+      unocss:
+        optional: true
+      windicss:
+        optional: true
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      tailwindcss: 3.1.4
+    dev: false
+
+  /@formkit/utils/1.0.0-beta.9:
+    resolution: {integrity: sha512-kl+saz6zEMCv/LM5LAsZC5fEACbuINTztmINQYDFhMxURA5MF5gM5p+Vj9kIa+Owwc/SN/YLREI8rAPT/qfNmg==}
+    dev: false
+
+  /@formkit/validation/1.0.0-beta.9:
+    resolution: {integrity: sha512-qhorOzyZJmjm7jqXHaJUBjQeQxGVpvWVkH0kgyuLodE4tUUdK61DQ/b0qEL0gmdE4yh3GJpeVZfv1bp75nbzZg==}
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/observer': 1.0.0-beta.9
+    dev: false
+
+  /@formkit/vue/1.0.0-beta.9_rkpirzljteu3gouykqigqhmb7i:
+    resolution: {integrity: sha512-qhhte5JyUIkPBmk5EjWxSiKuOzir/0vi+lBEpfSa1KykyDhelcNtrVWcFI7qjhYhRj+7P/sF6Eo5/EFGfIznYQ==}
+    peerDependencies:
+      vue: ^3.2.1
+    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/dev': 1.0.0-beta.9
+      '@formkit/i18n': 1.0.0-beta.9
+      '@formkit/inputs': 1.0.0-beta.9
+      '@formkit/observer': 1.0.0-beta.9
+      '@formkit/rules': 1.0.0-beta.9
+      '@formkit/themes': 1.0.0-beta.9_tailwindcss@3.1.4
+      '@formkit/utils': 1.0.0-beta.9
+      '@formkit/validation': 1.0.0-beta.9
+      vue: 3.2.37
+    transitivePeerDependencies:
+      - tailwindcss
+      - unocss
+      - windicss
+    dev: false
+
   /@halo-dev/admin-api/1.1.0:
     resolution: {integrity: sha512-2K8ulSucPudWfBo8SWz92hLtlu8C7hVVfYNejlns0BZfMxFyivvGyTgeYiMYHgNR5n4K6tF903Zn1DkS7jnv0g==}
     engines: {node: '>=12'}
@@ -1853,12 +1949,10 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: true
 
   /@nodelib/fs.stat/2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
   /@nodelib/fs.walk/1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -1866,7 +1960,6 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.13.0
-    dev: true
 
   /@polka/url/1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
@@ -2574,18 +2667,15 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn/7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.7.0:
     resolution: {integrity: sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==}
@@ -2671,7 +2761,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /arch/2.2.0:
     resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
@@ -2679,7 +2768,6 @@ packages:
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -2844,7 +2932,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /birpc/0.1.1:
     resolution: {integrity: sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==}
@@ -2880,7 +2967,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /browser-process-hrtime/1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
@@ -2968,7 +3054,6 @@ packages:
   /camelcase-css/2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /camelcase/6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
@@ -3044,7 +3129,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /ci-info/3.3.0:
     resolution: {integrity: sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==}
@@ -3112,7 +3196,6 @@ packages:
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /colorette/2.0.16:
     resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
@@ -3219,7 +3302,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
@@ -3411,7 +3493,6 @@ packages:
 
   /defined/1.0.0:
     resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
-    dev: true
 
   /defu/6.0.0:
     resolution: {integrity: sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==}
@@ -3429,7 +3510,6 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.0
       minimist: 1.2.6
-    dev: true
 
   /diacritics/1.3.0:
     resolution: {integrity: sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==}
@@ -3437,7 +3517,6 @@ packages:
 
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -3448,7 +3527,6 @@ packages:
 
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine/3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
@@ -4086,7 +4164,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.4
-    dev: true
 
   /fast-json-stable-stringify/2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -4100,7 +4177,6 @@ packages:
     resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
     dependencies:
       reusify: 1.0.4
-    dev: true
 
   /fd-slicer/1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
@@ -4145,7 +4221,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /finalhandler/1.1.2:
     resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
@@ -4287,7 +4362,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
@@ -4378,14 +4452,12 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent/6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob/7.2.0:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
@@ -4714,7 +4786,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -4740,7 +4811,6 @@ packages:
     resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -4752,7 +4822,6 @@ packages:
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -4764,7 +4833,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-installed-globally/0.4.0:
     resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==}
@@ -4793,7 +4861,6 @@ packages:
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-obj/1.0.1:
     resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
@@ -5094,7 +5161,6 @@ packages:
   /lilconfig/2.0.5:
     resolution: {integrity: sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==}
     engines: {node: '>=10'}
-    dev: true
 
   /linkify-it/3.0.3:
     resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
@@ -5258,7 +5324,6 @@ packages:
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
 
   /micromatch/4.0.4:
     resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
@@ -5266,7 +5331,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: true
 
   /mime-db/1.51.0:
     resolution: {integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==}
@@ -5302,7 +5366,6 @@ packages:
 
   /minimist/1.2.6:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
-    dev: true
 
   /mitt/2.1.0:
     resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
@@ -5379,7 +5442,6 @@ packages:
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range/0.1.2:
     resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
@@ -5406,7 +5468,6 @@ packages:
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect/1.12.0:
     resolution: {integrity: sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==}
@@ -5536,7 +5597,6 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -5571,12 +5631,10 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pinia/2.0.14_j6bzmzd4ujpabbp5objtwxyjp4:
     resolution: {integrity: sha512-0nPuZR4TetT/WcLN+feMSjWJku3SQU7dBbXC6uw+R6FLQJCsg+/0pzXyD82T1FmAYe0lsx+jnEDQ1BLgkRKlxA==}
@@ -5631,7 +5689,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.0
-    dev: true
 
   /postcss-js/4.0.0_postcss@8.4.14:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -5641,7 +5698,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.14
-    dev: true
 
   /postcss-load-config/3.1.4_postcss@8.4.14:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -5658,7 +5714,6 @@ packages:
       lilconfig: 2.0.5
       postcss: 8.4.14
       yaml: 1.10.2
-    dev: true
 
   /postcss-nested/5.0.6_postcss@8.4.14:
     resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
@@ -5668,7 +5723,6 @@ packages:
     dependencies:
       postcss: 8.4.14
       postcss-selector-parser: 6.0.10
-    dev: true
 
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -5676,11 +5730,9 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss/8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
@@ -5791,12 +5843,10 @@ packages:
 
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /randombytes/2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
@@ -5808,7 +5858,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /readable-stream/2.3.7:
     resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
@@ -5827,7 +5876,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /regenerate-unicode-properties/10.0.1:
     resolution: {integrity: sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==}
@@ -5928,7 +5976,6 @@ packages:
       is-core-module: 2.8.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /restore-cursor/3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
@@ -5941,7 +5988,6 @@ packages:
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
 
   /rfdc/1.3.0:
     resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
@@ -5986,7 +6032,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
 
   /rxjs/7.5.4:
     resolution: {integrity: sha512-h5M3Hk78r6wAheJF0a5YahB1yRQKCsZ4MsGdZ5O9ETbVtjPcScGfrMmoOq7EBsCRzd4BDkvDJ7ogP8Sz5tTFiQ==}
@@ -6323,7 +6368,6 @@ packages:
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /svg-tags/1.0.0:
     resolution: {integrity: sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=}
@@ -6385,7 +6429,6 @@ packages:
       resolve: 1.22.0
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /temp-dir/2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
@@ -6486,7 +6529,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /totalist/3.0.0:
     resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
@@ -6746,7 +6788,6 @@ packages:
 
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /utils-merge/1.0.1:
     resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
@@ -7362,7 +7403,6 @@ packages:
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
-    dev: true
 
   /y18n/5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
@@ -7376,7 +7416,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 4604e8c8..c1385c3d 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -2,22 +2,17 @@
 import {
   IconAddCircle,
   IconArrowDown,
-  IconArrowLeft,
-  IconArrowRight,
   IconBookRead,
   IconDeleteBin,
   IconSettings,
   VButton,
   VCard,
   VInput,
-  VModal,
   VPageHeader,
   VSpace,
-  VTabItem,
-  VTabs,
   VTag,
-  VTextarea,
 } from "@halo-dev/components";
+import PostSettingModal from "./components/PostSettingModal.vue";
 import { posts } from "./posts-mock";
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -38,10 +33,8 @@ const postsRef = ref(
 const router = useRouter();
 const checkAll = ref(false);
 const postSettings = ref(false);
-const settingActiveId = ref("general");
 // eslint-disable-next-line
-const selected = ref<Post | Record<string, any>>({});
-const saving = ref(false);
+const selected = ref<Post | Record<string, unknown> | null>({});
 const users = ref<User[]>([]);
 
 const checkedCount = computed(() => {
@@ -70,14 +63,18 @@ const handleSelect = (post: any) => {
 };
 
 const handleSelectPrevious = () => {
-  const currentIndex = posts.findIndex((post) => post.id === selected.value.id);
+  const currentIndex = posts.findIndex(
+    (post) => post.id === selected.value?.id
+  );
   if (currentIndex > 0) {
     selected.value = posts[currentIndex - 1];
   }
 };
 
 const handleSelectNext = () => {
-  const currentIndex = posts.findIndex((post) => post.id === selected.value.id);
+  const currentIndex = posts.findIndex(
+    (post) => post.id === selected.value?.id
+  );
   if (currentIndex < posts.length - 1) {
     selected.value = posts[currentIndex + 1];
   }
@@ -98,228 +95,12 @@ onMounted(() => {
 });
 </script>
 <template>
-  <VModal v-model:visible="postSettings" :width="680" title="文章设置">
-    <template #actions>
-      <div class="modal-header-action" @click="handleSelectPrevious">
-        <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="handleSelectNext">
-        <IconArrowRight />
-      </div>
-    </template>
-
-    <VTabs v-model:active-id="settingActiveId" type="outline">
-      <VTabItem id="general" label="常规">
-        <form>
-          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                标题
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput v-model="selected.title"></VInput>
-              </div>
-            </div>
-
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                别名
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput v-model="selected.slug"></VInput>
-              </div>
-            </div>
-
-            <div
-              class="sm:grid sm:grid-cols-3 sm:items-center sm:gap-4 sm:pt-5"
-            >
-              <label class="block text-sm font-medium text-gray-700">
-                分类目录
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput></VInput>
-              </div>
-            </div>
-
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                标签
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput></VInput>
-              </div>
-            </div>
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                摘要
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VTextarea v-model="selected.summary"></VTextarea>
-              </div>
-            </div>
-          </div>
-        </form>
-      </VTabItem>
-      <VTabItem id="advanced" label="高级">
-        <form>
-          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                禁止评论
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput v-model="selected.disallowComment"></VInput>
-              </div>
-            </div>
-
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                是否置顶
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput v-model="selected.topPriority"></VInput>
-              </div>
-            </div>
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                发表时间
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput></VInput>
-              </div>
-            </div>
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                自定义模板
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput v-model="selected.template"></VInput>
-              </div>
-            </div>
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                访问密码
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VInput v-model="selected.password"></VInput>
-              </div>
-            </div>
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                封面图
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VSpace align="start" class="w-full" direction="column">
-                  <div class="w-full sm:w-1/2">
-                    <div
-                      class="aspect-w-10 aspect-h-7 block cursor-pointer overflow-hidden rounded bg-gray-100"
-                    >
-                      <img
-                        :src="selected.thumbnail"
-                        alt=""
-                        class="pointer-events-none object-cover"
-                      />
-                    </div>
-                  </div>
-                  <VInput v-model="selected.thumbnail"></VInput>
-                </VSpace>
-              </div>
-            </div>
-          </div>
-        </form>
-      </VTabItem>
-      <VTabItem id="seo" label="SEO">
-        <form>
-          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                自定义关键词
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VTextarea
-                  v-model="selected.metaKeywords"
-                  :rows="5"
-                ></VTextarea>
-              </div>
-            </div>
-
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                自定义描述
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VTextarea
-                  v-model="selected.metaDescription"
-                  :rows="5"
-                ></VTextarea>
-              </div>
-            </div>
-          </div>
-        </form>
-      </VTabItem>
-      <VTabItem id="metas" label="元数据"></VTabItem>
-      <VTabItem id="inject-code" label="代码注入">
-        <form>
-          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                CSS
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VTextarea :rows="5"></VTextarea>
-              </div>
-            </div>
-
-            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
-              <label
-                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-              >
-                JavaScript
-              </label>
-              <div class="mt-1 sm:col-span-2 sm:mt-0">
-                <VTextarea :rows="5"></VTextarea>
-              </div>
-            </div>
-          </div>
-        </form>
-      </VTabItem>
-    </VTabs>
-
-    <template #footer>
-      <VSpace>
-        <VButton :loading="saving" type="secondary" @click="saving = !saving">
-          保存
-        </VButton>
-        <VButton type="default" @click="postSettings = false">取消</VButton>
-      </VSpace>
-    </template>
-  </VModal>
+  <PostSettingModal
+    v-model:visible="postSettings"
+    :post="selected"
+    @next="handleSelectNext"
+    @previous="handleSelectPrevious"
+  />
   <VPageHeader title="文章">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
@@ -544,19 +325,15 @@ onMounted(() => {
         </div>
       </template>
       <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
-        <li
-          v-for="(post, index) in postsRef"
-          :key="index"
-          @click="handleRouteToEditor(post)"
-        >
+        <li v-for="(post, index) in postsRef" :key="index">
           <div
             :class="{
-              'bg-gray-100': selected.id === post.id || post.checked,
+              'bg-gray-100': selected?.id === post.id || post.checked,
             }"
             class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
           >
             <div
-              v-show="selected.id === post.id || post.checked"
+              v-show="selected?.id === post.id || post.checked"
               class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
             ></div>
             <div class="relative flex flex-row items-center">
@@ -571,6 +348,7 @@ onMounted(() => {
                 <div class="flex flex-col sm:flex-row">
                   <span
                     class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
+                    @click="handleRouteToEditor(post)"
                   >
                     {{ post.title }}
                   </span>
diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue
new file mode 100644
index 00000000..202899f8
--- /dev/null
+++ b/src/modules/contents/posts/components/PostSettingModal.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  VButton,
+  VModal,
+  VSpace,
+  VTabItem,
+  VTabs,
+} from "@halo-dev/components";
+import type { PropType } from "vue";
+import { ref, unref, watch } from "vue";
+import type { Post } from "@halo-dev/admin-api";
+
+interface FormState {
+  post: Post | Record<string, unknown>;
+  saving: boolean;
+}
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  post: {
+    type: Object as PropType<Post | Record<string, unknown> | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["update:visible", "close", "previous", "next"]);
+
+const settingActiveId = ref("general");
+const formState = ref<FormState>({
+  post: {},
+  saving: false,
+});
+
+watch([() => props.visible, () => props.post], () => {
+  formState.value.post = unref(props.post) || {};
+});
+
+const handleVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+</script>
+<template>
+  <VModal
+    :visible="visible"
+    :width="680"
+    title="文章设置"
+    @update:visible="handleVisibleChange"
+  >
+    <template #actions>
+      <div class="modal-header-action" @click="emit('previous')">
+        <IconArrowLeft />
+      </div>
+      <div class="modal-header-action" @click="emit('next')">
+        <IconArrowRight />
+      </div>
+    </template>
+
+    <VTabs v-model:active-id="settingActiveId" type="outline">
+      <VTabItem id="general" label="常规">
+        <FormKit
+          id="basic"
+          :actions="false"
+          :model-value="formState.post"
+          :preserve="true"
+          type="form"
+        >
+          <FormKit
+            label="标题"
+            name="title"
+            type="text"
+            validation="required"
+          ></FormKit>
+          <FormKit
+            label="别名"
+            name="slug"
+            type="text"
+            validation="required"
+          ></FormKit>
+          <FormKit label="分类目录" type="select"></FormKit>
+          <FormKit label="标签" type="select"></FormKit>
+          <FormKit label="摘要" name="summary" type="textarea"></FormKit>
+        </FormKit>
+      </VTabItem>
+      <VTabItem id="advanced" label="高级">
+        <FormKit
+          id="advanced"
+          :actions="false"
+          :model-value="formState.post"
+          :preserve="true"
+          type="form"
+        >
+          <FormKit
+            :options="[
+              { label: '是', value: true },
+              { label: '否', value: false },
+            ]"
+            label="禁止评论"
+            name="disallowComment"
+            type="radio"
+          ></FormKit>
+          <FormKit
+            :options="[
+              { label: '是', value: true },
+              { label: '否', value: false },
+            ]"
+            label="是否置顶"
+            name="topPriority"
+            type="radio"
+          ></FormKit>
+          <FormKit
+            label="发表时间"
+            name="createTime"
+            type="datetime-local"
+          ></FormKit>
+          <FormKit label="自定义模板" type="select"></FormKit>
+          <FormKit label="封面图" name="thumbnail" type="text"></FormKit>
+        </FormKit>
+      </VTabItem>
+      <VTabItem id="seo" label="SEO">
+        <FormKit
+          id="seo"
+          :actions="false"
+          :model-value="formState.post"
+          :preserve="true"
+          type="form"
+        >
+          <FormKit
+            label="自定义关键词"
+            name="metaKeywords"
+            type="textarea"
+          ></FormKit>
+          <FormKit
+            label="自定义描述"
+            name="metaDescription"
+            type="textarea"
+          ></FormKit>
+        </FormKit>
+      </VTabItem>
+      <VTabItem id="metas" label="元数据"></VTabItem>
+      <VTabItem id="inject-code" label="代码注入">
+        <FormKit
+          id="inject-code"
+          :actions="false"
+          :model-value="formState.post"
+          :preserve="true"
+          type="form"
+        >
+          <FormKit label="CSS" type="textarea"></FormKit>
+          <FormKit label="JavaScript" type="textarea"></FormKit>
+        </FormKit>
+      </VTabItem>
+    </VTabs>
+
+    <template #footer>
+      <VSpace>
+        <VButton
+          :loading="formState.saving"
+          type="secondary"
+          @click="formState.saving = !formState.saving"
+        >
+          保存
+        </VButton>
+        <VButton type="default" @click="handleVisibleChange(false)"
+          >取消
+        </VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>
diff --git a/src/modules/system/users/Login.vue b/src/modules/system/users/Login.vue
index 59b2362b..47005381 100644
--- a/src/modules/system/users/Login.vue
+++ b/src/modules/system/users/Login.vue
@@ -1,11 +1,16 @@
 <script lang="ts" setup>
-import { VButton, VInput, VSpace } from "@halo-dev/components";
+import {
+  IconShieldUser,
+  IconUserSettings,
+  VButton,
+} from "@halo-dev/components";
 import { v4 as uuid } from "uuid";
 import { axiosInstance } from "@halo-dev/admin-shared";
 import qs from "qs";
 import logo from "../../../assets/logo.svg";
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import { submitForm } from "@formkit/vue";
 
 interface LoginForm {
   _csrf: string;
@@ -64,14 +69,43 @@ onMounted(() => {
   <div class="flex h-screen flex-col items-center justify-center">
     <img :src="logo" alt="Logo" class="mb-8 w-20" />
     <div class="login-form w-72">
-      <VSpace class="w-full" direction="column" spacing="lg">
-        <VInput
-          v-model="loginForm.state.username"
+      <FormKit
+        id="login"
+        v-model="loginForm.state"
+        :actions="false"
+        type="form"
+        @submit="handleLogin"
+      >
+        <FormKit
+          :validation-messages="{
+            required: '请输入用户名',
+          }"
+          name="username"
           placeholder="用户名"
-        ></VInput>
-        <VInput v-model="loginForm.state.password" placeholder="密码"></VInput>
-        <VButton block type="secondary" @click="handleLogin">登录</VButton>
-      </VSpace>
+          type="text"
+          validation="required"
+        >
+          <template #prefixIcon>
+            <IconUserSettings />
+          </template>
+        </FormKit>
+        <FormKit
+          :validation-messages="{
+            required: '请输入密码',
+          }"
+          name="password"
+          placeholder="密码"
+          type="password"
+          validation="required"
+        >
+          <template #prefixIcon>
+            <IconShieldUser />
+          </template>
+        </FormKit>
+        <VButton block type="secondary" @click="submitForm('login')">
+          登录
+        </VButton>
+      </FormKit>
     </div>
   </div>
 </template>
diff --git a/src/setup/setupComponents.ts b/src/setup/setupComponents.ts
index 9b4a2dd4..23d0775b 100644
--- a/src/setup/setupComponents.ts
+++ b/src/setup/setupComponents.ts
@@ -3,9 +3,12 @@ import { Dropdown, Menu, Tooltip, VClosePopper, VTooltip } from "floating-vue";
 import "floating-vue/dist/style.css";
 // @ts-ignore
 import VueGridLayout from "vue-grid-layout";
+import { defaultConfig, plugin as FormKit } from "@formkit/vue";
+import "@formkit/themes/genesis";
 
 export function setupComponents(app: App) {
   app.use(VueGridLayout);
+  app.use(FormKit, defaultConfig({}));
 
   app.directive("tooltip", VTooltip);
   app.directive("close-popper", VClosePopper);