feat: config formkit styles

Signed-off-by: Ryan Wang <i@ryanc.cc>
2022-07-07 16:50:50 +08:00 · 2022-07-07 16:50:50 +08:00 · d15c1636bd
parent d4f40481ab
commit d15c1636bd
24 changed files with 423 additions and 598 deletions
--- a/package.json
+++ b/package.json
@ -25,12 +25,15 @@
    "packages/*"
  ],
  "dependencies": {
+    "@formkit/core": "1.0.0-beta.9",
+    "@formkit/i18n": "1.0.0-beta.9",
+    "@formkit/inputs": "1.0.0-beta.9",
    "@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:*",
-    "@vueuse/core": "^8.7.5",
+    "@vueuse/core": "^8.9.0",
    "filepond": "^4.30.4",
    "filepond-plugin-image-preview": "^4.6.11",
    "floating-vue": "2.0.0-beta.16",
@ -41,7 +44,7 @@
    "vue": "^3.2.37",
    "vue-filepond": "^7.0.3",
    "vue-grid-layout": "3.0.0-beta1",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.1.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
@ -57,14 +60,14 @@
    "@vue/compiler-sfc": "^3.2.37",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.0.1",
+    "@vue/test-utils": "^2.0.2",
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.7",
    "c8": "^7.11.3",
    "cypress": "^9.7.0",
    "eslint": "^8.19.0",
    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-vue": "^9.1.1",
+    "eslint-plugin-vue": "^9.2.0",
    "husky": "^8.0.1",
    "jsdom": "^19.0.0",
    "postcss": "^8.4.14",
@ -80,9 +83,9 @@
    "vite-compression-plugin": "^0.0.4",
    "vite-plugin-externals": "^0.5.0",
    "vite-plugin-pwa": "^0.12.2",
-    "vite-plugin-static-copy": "^0.6.0",
+    "vite-plugin-static-copy": "^0.6.1",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vitest": "^0.16.0",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.38.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -4,6 +4,9 @@ importers:

  .:
    specifiers:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/i18n': 1.0.0-beta.9
+      '@formkit/inputs': 1.0.0-beta.9
      '@formkit/themes': 1.0.0-beta.9
      '@formkit/vue': 1.0.0-beta.9
      '@halo-dev/admin-api': ^1.1.0
@ -22,15 +25,15 @@ importers:
      '@vue/compiler-sfc': ^3.2.37
      '@vue/eslint-config-prettier': ^7.0.0
      '@vue/eslint-config-typescript': ^11.0.0
-      '@vue/test-utils': ^2.0.1
+      '@vue/test-utils': ^2.0.2
      '@vue/tsconfig': ^0.1.3
-      '@vueuse/core': ^8.7.5
+      '@vueuse/core': ^8.9.0
      autoprefixer: ^10.4.7
      c8: ^7.11.3
      cypress: ^9.7.0
      eslint: ^8.19.0
      eslint-plugin-cypress: ^2.12.1
-      eslint-plugin-vue: ^9.1.1
+      eslint-plugin-vue: ^9.2.0
      filepond: ^4.30.4
      filepond-plugin-image-preview: ^4.6.11
      floating-vue: 2.0.0-beta.16
@ -53,21 +56,24 @@ importers:
      vite-compression-plugin: ^0.0.4
      vite-plugin-externals: ^0.5.0
      vite-plugin-pwa: ^0.12.2
-      vite-plugin-static-copy: ^0.6.0
+      vite-plugin-static-copy: ^0.6.1
      vite-plugin-vue-setup-extend: ^0.4.0
      vitest: ^0.16.0
      vue: ^3.2.37
      vue-filepond: ^7.0.3
      vue-grid-layout: 3.0.0-beta1
-      vue-router: ^4.0.16
-      vue-tsc: ^0.38.2
+      vue-router: ^4.1.1
+      vue-tsc: ^0.38.3
    dependencies:
+      '@formkit/core': 1.0.0-beta.9
+      '@formkit/i18n': 1.0.0-beta.9
+      '@formkit/inputs': 1.0.0-beta.9
      '@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
-      '@vueuse/core': 8.7.5_vue@3.2.37
+      '@vueuse/core': 8.9.0_vue@3.2.37
      filepond: 4.30.4
      filepond-plugin-image-preview: 4.6.11_filepond@4.30.4
      floating-vue: 2.0.0-beta.16_vue@3.2.37
@ -78,7 +84,7 @@ importers:
      vue: 3.2.37
      vue-filepond: 7.0.3_filepond@4.30.4+vue@3.2.37
      vue-grid-layout: 3.0.0-beta1
-      vue-router: 4.0.16_vue@3.2.37
+      vue-router: 4.1.1_vue@3.2.37
    devDependencies:
      '@rushstack/eslint-patch': 1.1.4
      '@tailwindcss/aspect-ratio': 0.4.0_tailwindcss@3.1.4
@ -92,15 +98,15 @@ importers:
      '@vitest/ui': 0.16.0
      '@vue/compiler-sfc': 3.2.37
      '@vue/eslint-config-prettier': 7.0.0_exbhzpnbupd3ikhi4722x4yn6e
-      '@vue/eslint-config-typescript': 11.0.0_rbwfxavh274jq5nrli6gjtdzua
-      '@vue/test-utils': 2.0.1_vue@3.2.37
+      '@vue/eslint-config-typescript': 11.0.0_hko2ljsyixuca7xzzs7dalplrm
+      '@vue/test-utils': 2.0.2_vue@3.2.37
      '@vue/tsconfig': 0.1.3_@types+node@17.0.45
      autoprefixer: 10.4.7_postcss@8.4.14
      c8: 7.11.3
      cypress: 9.7.0
      eslint: 8.19.0
      eslint-plugin-cypress: 2.12.1_eslint@8.19.0
-      eslint-plugin-vue: 9.1.1_eslint@8.19.0
+      eslint-plugin-vue: 9.2.0_eslint@8.19.0
      husky: 8.0.1
      jsdom: 19.0.0
      postcss: 8.4.14
@ -116,10 +122,10 @@ importers:
      vite-compression-plugin: 0.0.4
      vite-plugin-externals: 0.5.0_vite@2.9.13
      vite-plugin-pwa: 0.12.2_vite@2.9.13
-      vite-plugin-static-copy: 0.6.0_vite@2.9.13
+      vite-plugin-static-copy: 0.6.1_vite@2.9.13
      vite-plugin-vue-setup-extend: 0.4.0_vite@2.9.13
      vitest: 0.16.0_5rlefaqlpcnjufbjtd4545rida
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.38.3_typescript@4.7.4

  packages/components:
    specifiers:
@ -2429,32 +2435,32 @@ packages:
      sirv: 2.0.2
    dev: true

-  /@volar/code-gen/0.38.2:
-    resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
+  /@volar/code-gen/0.38.3:
+    resolution: {integrity: sha512-0yCkDtaxffyfC9e2dSLGXJmG3b0rCfTa6vqxjr70ZFTtcf/VytmMBwboFicnm+Zoen9EI8wUNfw4upw9Slz5RQ==}
    dependencies:
-      '@volar/source-map': 0.38.2
+      '@volar/source-map': 0.38.3
    dev: true

-  /@volar/source-map/0.38.2:
-    resolution: {integrity: sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==}
+  /@volar/source-map/0.38.3:
+    resolution: {integrity: sha512-8aVM+r4lsHnLjhvnjQ6kn4J++3I6VXtJblcGzWuIOn9M8pJmRGW6Si/eOVjayLWfvPCxXUM7e3sg4Nm2tufTmg==}
    dev: true

-  /@volar/vue-code-gen/0.38.2:
-    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
+  /@volar/vue-code-gen/0.38.3:
+    resolution: {integrity: sha512-euVuKtwV/KurRSVwNz5bZbCBJLwVOE56+Uh2PhsHcAM5Wzlt82cwLj07FbFagCftoC3IC/bsn43yuLc2I+ZjAQ==}
    dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
+      '@volar/code-gen': 0.38.3
+      '@volar/source-map': 0.38.3
      '@vue/compiler-core': 3.2.37
      '@vue/compiler-dom': 3.2.37
      '@vue/shared': 3.2.37
    dev: true

-  /@volar/vue-typescript/0.38.2:
-    resolution: {integrity: sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==}
+  /@volar/vue-typescript/0.38.3:
+    resolution: {integrity: sha512-rXh4RQBZrNfkiSnpBYbHrsxg7vBbZeYsGFgE/n8FVLcZfGlelsdXFIINsr/aZGUCJre9I15wQ44eEmXnc4+qww==}
    dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
-      '@volar/vue-code-gen': 0.38.2
+      '@volar/code-gen': 0.38.3
+      '@volar/source-map': 0.38.3
+      '@volar/vue-code-gen': 0.38.3
      '@vue/compiler-sfc': 3.2.37
      '@vue/reactivity': 3.2.37
    dev: true
@ -2529,7 +2535,7 @@ packages:
      prettier: 2.7.1
    dev: true

-  /@vue/eslint-config-typescript/11.0.0_rbwfxavh274jq5nrli6gjtdzua:
+  /@vue/eslint-config-typescript/11.0.0_hko2ljsyixuca7xzzs7dalplrm:
    resolution: {integrity: sha512-txuRzxnQVmtUvvy9UyWUy9sHWXNeRPGmSPqP53hRtaiUeCTAondI9Ho9GQYI/8/eWljYOST7iA4Aa8sANBkWaA==}
    engines: {node: ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -2543,7 +2549,7 @@ packages:
      '@typescript-eslint/eslint-plugin': 5.13.0_vv7hakxknrvn7cajscbm2swloy
      '@typescript-eslint/parser': 5.13.0_4x5o4skxv6sl53vpwefgt23khm
      eslint: 8.19.0
-      eslint-plugin-vue: 9.1.1_eslint@8.19.0
+      eslint-plugin-vue: 9.2.0_eslint@8.19.0
      typescript: 4.7.4
      vue-eslint-parser: 9.0.2_eslint@8.19.0
    transitivePeerDependencies:
@ -2589,8 +2595,8 @@ packages:
  /@vue/shared/3.2.37:
    resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}

-  /@vue/test-utils/2.0.1_vue@3.2.37:
-    resolution: {integrity: sha512-4kt7Sw1gzXeQOsMqrwrQbmEiG8El4MP8P4hfxkmfXdUHf7yHa3xC5CQc0x2YyuhT41w2d4K4O0ZdRvZhGdZlow==}
+  /@vue/test-utils/2.0.2_vue@3.2.37:
+    resolution: {integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==}
    peerDependencies:
      vue: ^3.0.1
    dependencies:
@ -2624,9 +2630,33 @@ packages:
      '@vueuse/shared': 8.7.5_vue@3.2.37
      vue: 3.2.37
      vue-demi: 0.12.1_vue@3.2.37
+    dev: true
+
+  /@vueuse/core/8.9.0_vue@3.2.37:
+    resolution: {integrity: sha512-eKWehF6gsiLYxnYM/1xgDu16bKED7AWvkk56JIFNQes8OKgktr3Jc1wUy8UWIulrnwCXICUu9YUo+Wkq4r2JNw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@types/web-bluetooth': 0.0.14
+      '@vueuse/metadata': 8.9.0
+      '@vueuse/shared': 8.9.0_vue@3.2.37
+      vue: 3.2.37
+      vue-demi: 0.12.1_vue@3.2.37
+    dev: false

  /@vueuse/metadata/8.7.5:
    resolution: {integrity: sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==}
+    dev: true
+
+  /@vueuse/metadata/8.9.0:
+    resolution: {integrity: sha512-pjkIbQgJPRUrxK5/iXVKQFGC+OhJ+Vd6fhBsdwgj+NNJEHUotRliYymwdvhnEke/o+kkulT0xMvoK19nyPoiMw==}
+    dev: false

  /@vueuse/shared/8.7.5_vue@3.2.37:
    resolution: {integrity: sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==}
@ -2641,6 +2671,22 @@ packages:
    dependencies:
      vue: 3.2.37
      vue-demi: 0.12.1_vue@3.2.37
+    dev: true
+
+  /@vueuse/shared/8.9.0_vue@3.2.37:
+    resolution: {integrity: sha512-Pmu3Fopk/JJjN8b90uQuFrVCc/RPcSA/0zDFRTyn3YIhoB5ESna/1Sac5WZxK+n82g/ERXHHQTetGI9yxEdPfA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.37
+      vue-demi: 0.12.1_vue@3.2.37
+    dev: false

  /abab/2.0.5:
    resolution: {integrity: sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==}
@ -3922,8 +3968,8 @@ packages:
      prettier-linter-helpers: 1.0.0
    dev: true

-  /eslint-plugin-vue/9.1.1_eslint@8.19.0:
-    resolution: {integrity: sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==}
+  /eslint-plugin-vue/9.2.0_eslint@8.19.0:
+    resolution: {integrity: sha512-W2hc+NUXoce8sZtWgZ45miQTy6jNyuSdub5aZ1IBune4JDeAyzucYX0TzkrQ1jMO52sNUDYlCIHDoaNePe0p5g==}
    engines: {node: ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
@ -3933,7 +3979,7 @@ packages:
      natural-compare: 1.4.0
      nth-check: 2.0.1
      postcss-selector-parser: 6.0.10
-      semver: 7.3.5
+      semver: 7.3.7
      vue-eslint-parser: 9.0.2_eslint@8.19.0
      xml-name-validator: 4.0.0
    transitivePeerDependencies:
@ -6894,8 +6940,8 @@ packages:
      - supports-color
    dev: true

-  /vite-plugin-static-copy/0.6.0_vite@2.9.13:
-    resolution: {integrity: sha512-KfNhy33p//M5Fq1RcZU+H+1KVagXR9JbAy6KIE8IiWj2j3wRtRPoyh8TYJvVgC+adyKj3Y+KiGUf0GwjI9JHtg==}
+  /vite-plugin-static-copy/0.6.1_vite@2.9.13:
+    resolution: {integrity: sha512-A6SMuRPhJ9igTStuzZKkkWtz+4PukhI2WsmcmMQ2emPHlexh/LqgHksqWlKDQ08mqWzlEp4zYbT2IlG45s5GNw==}
    engines: {node: '>=12.2'}
    peerDependencies:
      vite: ^2.6.14
@ -7083,14 +7129,24 @@ packages:
    dependencies:
      '@vue/devtools-api': 6.1.4
      vue: 3.2.37
+    dev: true

-  /vue-tsc/0.38.2_typescript@4.7.4:
-    resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
+  /vue-router/4.1.1_vue@3.2.37:
+    resolution: {integrity: sha512-Wp1mEf2xCwT0ez7o9JvgpfBp9JGnVb+dPERzXDbugTatzJAJ60VWOhJKifQty85k+jOreoFHER4r5fu062PhPw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.1.4
+      vue: 3.2.37
+    dev: false
+
+  /vue-tsc/0.38.3_typescript@4.7.4:
+    resolution: {integrity: sha512-mWlneSF+PG2kXYGJI12N4XEAG4ljAkae7IcB93fspqSkEt/oKwDbWy3DzcPSgUm0LsXqOUprTMaZkwDVSRBIvw==}
    hasBin: true
    peerDependencies:
      typescript: '*'
    dependencies:
-      '@volar/vue-typescript': 0.38.2
+      '@volar/vue-typescript': 0.38.3
      typescript: 4.7.4
    dev: true

--- a/src/formkit/formkit.config.ts
+++ b/src/formkit/formkit.config.ts
@ -0,0 +1,11 @@
+import { generateClasses } from "@formkit/themes";
+import theme from "./theme";
+import type { FormKitOptions } from "@formkit/core";
+
+const config: FormKitOptions = {
+  config: {
+    classes: generateClasses(theme),
+  },
+};
+
+export default config;
--- a/src/formkit/theme.ts
+++ b/src/formkit/theme.ts
@ -0,0 +1,79 @@
+const textClassification = {
+  label: "block font-bold text-sm formkit-invalid:text-red-500 w-56",
+  wrapper: "flex flex-row items-center",
+  inner:
+    "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 rounded-[4px] overflow-hidden focus-within:border-themeable-primary-500",
+  input:
+    "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-9 px-3 text-sm",
+};
+
+const boxClassification = {
+  fieldset: "border border-gray-400 rounded-md px-2 pb-1",
+  legend: "font-bold text-sm",
+  wrapper: "flex items-center mb-1 cursor-pointer",
+  help: "mb-2",
+  input:
+    "form-check-input appearance-none h-5 w-5 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-blue-500 focus:outline-none focus:ring-0 transition duration-200",
+  label: "text-sm text-gray-700 mt-1",
+};
+
+const buttonClassification = {
+  wrapper: "mb-1",
+  input:
+    "bg-blue-500 hover:bg-blue-700 text-white text-sm font-normal py-3 px-5 rounded",
+};
+
+const theme: Record<string, Record<string, string>> = {
+  global: {
+    outer: "formkit-disabled:opacity-50",
+    help: "text-xs text-gray-500",
+    messages: "list-none p-0 mt-1 mb-0",
+    message: "text-red-500 mb-1 text-xs",
+  },
+  button: buttonClassification,
+  color: {
+    label: "block mb-1 font-bold text-sm",
+    input:
+      "w-16 h-8 appearance-none cursor-pointer border border-gray-300 rounded-md mb-2 p-1",
+  },
+  file: {
+    label: "block mb-1 font-bold text-sm",
+    inner: "cursor-pointer",
+    input:
+      "text-gray-600 text-sm mb-1 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:bg-blue-500 file:text-white hover:file:bg-blue-600",
+    noFiles: "block text-gray-800 text-sm mb-1",
+    fileItem: "block flex text-gray-800 text-sm mb-1",
+    fileRemove: "ml-auto text-blue-500 text-sm",
+  },
+  checkbox: boxClassification,
+  radio: {
+    ...boxClassification,
+    input: boxClassification.input.replace("rounded-sm", "rounded-full"),
+  },
+  range: {
+    inner: "",
+    input:
+      "form-range appearance-none w-full h-2 p-0 bg-gray-200 rounded-full focus:outline-none focus:ring-0 focus:shadow-none",
+  },
+  search: textClassification,
+  select: textClassification,
+  submit: buttonClassification,
+  tel: textClassification,
+  text: textClassification,
+  time: textClassification,
+  url: textClassification,
+  week: textClassification,
+  month: textClassification,
+  number: textClassification,
+  password: textClassification,
+  email: textClassification,
+  date: textClassification,
+  "datetime-local": textClassification,
+  textarea: {
+    ...textClassification,
+    input:
+      "outline-0 bg-white antialiased w-full text-black block transition-all appearance-none h-32 px-3 py-2 text-sm",
+  },
+};
+
+export default theme;
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@ -10,7 +10,6 @@ import {
  IconSettings,
  VButton,
  VCard,
-  VInput,
  VModal,
  VPageHeader,
  VSpace,
@ -396,11 +395,11 @@ onMounted(() => {
                  />
                </div>
                <div class="flex w-full flex-1 sm:w-auto">
-                  <VInput
+                  <FormKit
                    v-if="!checkAll"
-                    class="w-72"
                    placeholder="输入关键词搜索"
-                  />
+                    type="text"
+                  ></FormKit>
                  <VSpace v-else>
                    <VButton type="default">设置</VButton>
                    <VButton type="danger">删除</VButton>
@ -452,7 +451,10 @@ onMounted(() => {
                        <div class="h-96 w-80 p-4">
                          <div class="bg-white">
                            <!--TODO: Auto Focus-->
-                            <VInput placeholder="根据关键词搜索"></VInput>
+                            <FormKit
+                              placeholder="输入关键词搜索"
+                              type="text"
+                            ></FormKit>
                          </div>
                          <div class="mt-2">
                            <ul class="divide-y divide-gray-200" role="list">
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@ -5,7 +5,6 @@ import {
  IconSettings,
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
 } from "@halo-dev/components";
@ -40,11 +39,11 @@ const checkAll = ref(false);
              />
            </div>
            <div class="flex w-full flex-1 sm:w-auto">
-              <VInput
+              <FormKit
                v-if="!checkAll"
-                class="w-72"
                placeholder="输入关键词搜索"
-              />
+                type="text"
+              ></FormKit>
              <VSpace v-else>
                <VButton type="default">设置</VButton>
                <VButton type="danger">删除</VButton>
--- a/src/modules/contents/pages/PageList.vue
+++ b/src/modules/contents/pages/PageList.vue
@ -6,7 +6,6 @@ import {
  IconSettings,
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
  VTabbar,
@ -146,11 +145,11 @@ onMounted(() => {
                  />
                </div>
                <div class="flex w-full flex-1 sm:w-auto">
-                  <VInput
+                  <FormKit
                    v-if="!checkAll"
-                    class="w-72"
                    placeholder="输入关键词搜索"
-                  />
+                    type="text"
+                  ></FormKit>
                  <VSpace v-else>
                    <VButton type="default">设置</VButton>
                    <VButton type="danger">删除</VButton>
@ -171,7 +170,10 @@ onMounted(() => {
                        <div class="h-96 w-80 p-4">
                          <div class="bg-white">
                            <!--TODO: Auto Focus-->
-                            <VInput placeholder="根据关键词搜索"></VInput>
+                            <FormKit
+                              placeholder="输入关键词搜索"
+                              type="text"
+                            ></FormKit>
                          </div>
                          <div class="mt-2">
                            <ul class="divide-y divide-gray-200" role="list">
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@ -7,7 +7,6 @@ import {
  IconSettings,
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
  VTag,
@ -139,11 +138,11 @@ onMounted(() => {
              />
            </div>
            <div class="flex w-full flex-1 sm:w-auto">
-              <VInput
+              <FormKit
                v-if="checkedCount <= 0"
-                class="w-72"
                placeholder="输入关键词搜索"
-              />
+                type="text"
+              ></FormKit>
              <VSpace v-else>
                <VButton type="default">设置</VButton>
                <VButton type="danger">删除</VButton>
@ -198,7 +197,10 @@ onMounted(() => {
                  </div>
                  <template #popper>
                    <div class="h-96 w-80 p-4">
-                      <VInput placeholder="根据关键词搜索"></VInput>
+                      <FormKit
+                        placeholder="输入关键词搜索"
+                        type="text"
+                      ></FormKit>
                    </div>
                  </template>
                </FloatingDropdown>
@ -213,7 +215,10 @@ onMounted(() => {
                  </div>
                  <template #popper>
                    <div class="h-96 w-80 p-4">
-                      <VInput placeholder="根据关键词搜索"></VInput>
+                      <FormKit
+                        placeholder="输入关键词搜索"
+                        type="text"
+                      ></FormKit>
                    </div>
                  </template>
                </FloatingDropdown>
@ -230,7 +235,10 @@ onMounted(() => {
                    <div class="h-96 w-80 p-4">
                      <div class="bg-white">
                        <!--TODO: Auto Focus-->
-                        <VInput placeholder="根据关键词搜索"></VInput>
+                        <FormKit
+                          placeholder="输入关键词搜索"
+                          type="text"
+                        ></FormKit>
                      </div>
                      <div class="mt-2">
                        <ul class="divide-y divide-gray-200" role="list">
--- a/src/modules/interface/themes/ThemeDetail.vue
+++ b/src/modules/interface/themes/ThemeDetail.vue
@ -8,13 +8,11 @@ import {
  VAlert,
  VButton,
  VCard,
-  VInput,
  VModal,
  VPageHeader,
  VSpace,
  VTabbar,
  VTag,
-  VTextarea,
 } from "@halo-dev/components";
 import { ref } from "vue";
 import { RouterLink } from "vue-router";
@ -284,73 +282,18 @@ const handleChangeTheme = (theme: any) => {
      </div>

      <div v-if="themeActiveId === 'settings'">
-        <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-          <div class="space-y-6 space-y-5 divide-y divide-gray-100">
-            <div
-              class="px-4 sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-                <div class="flex max-w-lg shadow-sm">
-                  <VInput />
-                </div>
-              </div>
-            </div>
-            <div
-              class="px-4 sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-                <div class="flex max-w-lg shadow-sm">
-                  <VInput />
-                </div>
-              </div>
-            </div>
+        <FormKit id="theme-setting-form" :actions="false" type="form">
+          <FormKit label="侧边栏宽度" type="text"></FormKit>
+          <FormKit label="侧边栏背景图" type="text"></FormKit>
+          <FormKit label="右上角图标" type="text"></FormKit>
+          <FormKit label="文章代码高亮语言" type="text"></FormKit>
+        </FormKit>

-            <div
-              class="px-4 sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-                <div class="flex max-w-lg shadow-sm">
-                  <VInput />
-                </div>
-              </div>
-            </div>
-            <div
-              class="px-4 sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-                <div class="flex max-w-lg shadow-sm">
-                  <VTextarea modelValue="Halo" />
-                </div>
-              </div>
-            </div>
+        <div class="pt-5">
+          <div class="flex justify-start p-4">
+            <VButton type="secondary"> 保存</VButton>
          </div>
-
-          <div class="pt-5">
-            <div class="flex justify-start p-4">
-              <VButton type="secondary"> 保存</VButton>
-            </div>
-          </div>
-        </form>
+        </div>
      </div>
    </VCard>
  </div>
--- a/src/modules/interface/themes/Visual.vue
+++ b/src/modules/interface/themes/Visual.vue
@ -7,15 +7,11 @@ import {
  IconTablet,
  VButton,
  VCard,
-  VInput,
  VModal,
-  VOption,
-  VSelect,
  VSpace,
  VTabbar,
  VTabItem,
  VTabs,
-  VTextarea,
 } from "@halo-dev/components";
 import { computed, onMounted, ref } from "vue";

@ -198,77 +194,25 @@ onMounted(() => {
            <div class="h-full w-full overflow-y-auto bg-white drop-shadow-sm">
              <VTabs v-model:active-id="activeId" type="outline">
                <VTabItem id="general" class="p-3" label="基础设置">
-                  <form>
-                    <div
-                      class="space-y-8 divide-y divide-gray-200 sm:space-y-5"
-                    >
-                      <div class="space-y-6 sm:space-y-5">
-                        <div class="space-y-2">
-                          <label
-                            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-                            for="first-name"
-                          >
-                            Halo 当前版本：
-                          </label>
-                          <div class="mt-1 sm:col-span-2 sm:mt-0">
-                            <VInput model-value="1.5.3"></VInput>
-                          </div>
-                        </div>
-
-                        <div class="space-y-2">
-                          <label
-                            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-                            for="last-name"
-                          >
-                            首页图片：
-                          </label>
-                          <div class="mt-1 sm:col-span-2 sm:mt-0">
-                            <VInput
-                              model-value="https://halo.run/upload/2022/03/support-team.svg"
-                            ></VInput>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </form>
+                  <FormKit :actions="false" type="form">
+                    <FormKit label="Halo 当前版本" type="text"></FormKit>
+                    <FormKit label="首页图片" type="text"></FormKit>
+                  </FormKit>
                </VTabItem>
                <VTabItem id="style" class="p-3" label="样式设置">
-                  <form>
-                    <div
-                      class="space-y-8 divide-y divide-gray-200 sm:space-y-5"
-                    >
-                      <div class="space-y-6 sm:space-y-5">
-                        <div class="space-y-2">
-                          <label
-                            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-                            for="first-name"
-                          >
-                            文章代码高亮语言：
-                          </label>
-                          <div class="mt-1 sm:col-span-2 sm:mt-0">
-                            <VTextarea></VTextarea>
-                          </div>
-                        </div>
-
-                        <div class="space-y-2">
-                          <label
-                            class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
-                            for="last-name"
-                          >
-                            文章代码高亮主题：
-                          </label>
-                          <div class="mt-1 sm:col-span-2 sm:mt-0">
-                            <VSelect>
-                              <VOption value="java">Java</VOption>
-                              <VOption value="c">C</VOption>
-                              <VOption value="go">Go</VOption>
-                              <VOption value="javascript">JavaScript</VOption>
-                            </VSelect>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </form>
+                  <FormKit :actions="false" type="form">
+                    <FormKit label="文章代码高亮语言" type="text"></FormKit>
+                    <FormKit
+                      :options="[
+                        { label: 'Java', value: 'java' },
+                        { label: 'C', value: 'c' },
+                        { label: 'Go', value: 'go' },
+                        { label: 'JavaScript', value: 'javascript' },
+                      ]"
+                      label="文章代码高亮主题"
+                      type="select"
+                    ></FormKit>
+                  </FormKit>
                </VTabItem>
              </VTabs>
            </div>
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@ -2,7 +2,6 @@
 import {
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
  VSwitch,
@ -297,44 +296,16 @@ handleFetchPlugin();
      </div>

      <div v-if="pluginActiveId === 'settings'">
-        <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-          <div class="space-y-6 space-y-5 divide-y divide-gray-100">
-            <div
-              class="px-4 sm:grid sm:grid-cols-6 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"
-              >
-                设置项 1
-              </label>
-              <div class="mt-1 sm:col-span-3 sm:mt-0">
-                <div class="flex max-w-lg shadow-sm">
-                  <VInput />
-                </div>
-              </div>
-            </div>
-            <div
-              class="px-4 sm:grid sm:grid-cols-6 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"
-              >
-                设置项 2
-              </label>
-              <div class="mt-1 sm:col-span-3 sm:mt-0">
-                <div class="flex max-w-lg shadow-sm">
-                  <VInput />
-                </div>
-              </div>
-            </div>
-          </div>
+        <FormKit id="plugin-setting-form" :actions="false" type="form">
+          <FormKit label="设置项 1" type="text"></FormKit>
+          <FormKit label="设置项 2" type="text"></FormKit>
+        </FormKit>

-          <div class="pt-5">
-            <div class="flex justify-start p-4">
-              <VButton type="secondary"> 保存</VButton>
-            </div>
+        <div class="pt-5">
+          <div class="flex justify-start p-4">
+            <VButton type="secondary"> 保存</VButton>
          </div>
-        </form>
+        </div>
      </div>
    </VCard>
  </div>
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@ -6,7 +6,6 @@ import {
  IconSettings,
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
  VSwitch,
@ -90,11 +89,11 @@ onMounted(handleFetchPlugins);
              />
            </div>
            <div class="flex w-full flex-1 sm:w-auto">
-              <VInput
+              <FormKit
                v-if="!checkAll"
-                class="w-72"
                placeholder="输入关键词搜索"
-              />
+                type="text"
+              ></FormKit>
              <VSpace v-else>
                <VButton type="default">禁用</VButton>
                <VButton type="danger">卸载</VButton>
@ -149,7 +148,10 @@ onMounted(handleFetchPlugins);
                    <div class="h-96 w-80 p-4">
                      <div class="bg-white">
                        <!--TODO: Auto Focus-->
-                        <VInput placeholder="根据关键词搜索"></VInput>
+                        <FormKit
+                          placeholder="输入关键词搜索"
+                          type="text"
+                        ></FormKit>
                      </div>
                      <div class="mt-2">
                        <ul class="divide-y divide-gray-200" role="list">
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@ -6,7 +6,6 @@ import {
  IconShieldUser,
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
  VTag,
@ -74,7 +73,10 @@ onMounted(() => {
            class="relative flex flex-col items-start sm:flex-row sm:items-center"
          >
            <div class="flex w-full flex-1 sm:w-auto">
-              <VInput class="w-72" placeholder="输入关键词搜索" />
+              <FormKit
+                placeholder="输入关键词搜索"
+                type="text"
+              ></FormKit>
            </div>
            <div class="mt-4 flex sm:mt-0">
              <VSpace spacing="lg">
--- a/src/modules/system/roles/components/RoleCreationModal.vue
+++ b/src/modules/system/roles/components/RoleCreationModal.vue
@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VButton, VInput, VModal, VTabItem, VTabs } from "@halo-dev/components";
+import { VButton, VModal, VTabItem, VTabs } from "@halo-dev/components";
 import { computed, ref, watch } from "vue";
 import type { Role } from "@/types/extension";
 import { axiosInstance } from "@halo-dev/admin-shared";
@ -122,39 +122,30 @@ watch(
  >
    <VTabs v-model:active-id="creationActiveId" type="outline">
      <VTabItem id="general" label="基础信息">
-        <form>
-          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
-            <div
-              v-if="creationFormState.role.metadata.annotations"
-              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="
-                    creationFormState.role.metadata.annotations[
-                      'plugin.halo.run/display-name'
-                    ]
-                  "
-                ></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="creationFormState.role.metadata.name"></VInput>
-              </div>
-            </div>
-          </div>
-        </form>
+        <FormKit
+          v-if="creationFormState.role.metadata.annotations"
+          id="role-form"
+          :actions="false"
+          type="form"
+          @submit="handleCreateRole"
+        >
+          <FormKit
+            v-model="
+              creationFormState.role.metadata.annotations[
+                'plugin.halo.run/display-name'
+              ]
+            "
+            label="名称"
+            type="text"
+            validation="required"
+          ></FormKit>
+          <FormKit
+            v-model="creationFormState.role.metadata.name"
+            label="别名"
+            type="text"
+            validation="required"
+          ></FormKit>
+        </FormKit>
      </VTabItem>
      <VTabItem id="permissions" label="权限">
        <div>
@ -218,7 +209,7 @@ watch(
      <VButton
        :loading="creationFormState.saving"
        type="secondary"
-        @click="handleCreateRole"
+        @click="$formkit.submit('role-form')"
        >创建
      </VButton>
    </template>
--- a/src/modules/system/settings/GeneralSettings.vue
+++ b/src/modules/system/settings/GeneralSettings.vue
@ -1,69 +1,19 @@
 <script lang="ts" setup>
-import { VButton, VInput } from "@halo-dev/components";
+import { VButton } from "@halo-dev/components";
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="https://halo.run" />
-          </div>
-        </div>
-      </div>
-
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="Halo" />
-          </div>
-        </div>
-      </div>
-
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="开源的现代化 CMS 应用" />
-          </div>
-        </div>
-      </div>
-
-      <div class="sm:grid sm:grid-cols-6 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">
-          Logo
-        </label>
-        <div class="mt-1 sm:col-span-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="https://halo.run/logo" />
-          </div>
-        </div>
-      </div>
-
-      <div class="sm:grid sm:grid-cols-6 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">
-          Favicon
-        </label>
-        <div class="mt-1 sm:col-span-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="https://halo.run/favicon.ico" />
-          </div>
-        </div>
-      </div>
+  <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
+    <FormKit :actions="false" type="form">
+      <FormKit label="站点地址" type="url"></FormKit>
+      <FormKit label="站点标题" type="text"></FormKit>
+      <FormKit label="站点副标题" type="text"></FormKit>
+      <FormKit label="Logo" type="url"></FormKit>
+      <FormKit label="Favicon" type="url"></FormKit>
+    </FormKit>
+  </div>
+  <div class="pt-5">
+    <div class="flex justify-start">
+      <VButton type="secondary"> 保存</VButton>
    </div>
-
-    <div class="pt-5">
-      <div class="flex justify-start">
-        <VButton type="secondary"> 保存</VButton>
-      </div>
-    </div>
-  </form>
+  </div>
 </template>
--- a/src/modules/system/settings/NotificationSettings.vue
+++ b/src/modules/system/settings/NotificationSettings.vue
@ -1,56 +1,19 @@
 <script lang="ts" setup>
-import { VButton, VInput } from "@halo-dev/components";
+import { VButton } from "@halo-dev/components";
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="https://halo.run" />
-          </div>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="Halo" />
-          </div>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="开源的现代化 CMS 应用" />
-          </div>
-        </div>
-      </div>
-
-      <div class="sm:grid sm:grid-cols-6 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">
-          Logo
-        </label>
-        <div class="mt-1 sm:col-span-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput modelValue="https://halo.run/logo" />
-          </div>
-        </div>
-      </div>
+  <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
+    <FormKit :actions="false" type="form">
+      <FormKit label="站点地址" type="url"></FormKit>
+      <FormKit label="站点标题" type="text"></FormKit>
+      <FormKit label="站点副标题" type="text"></FormKit>
+      <FormKit label="Logo" type="url"></FormKit>
+      <FormKit label="Favicon" type="url"></FormKit>
+    </FormKit>
+  </div>
+  <div class="pt-5">
+    <div class="flex justify-start">
+      <VButton type="secondary"> 保存</VButton>
    </div>
-
-    <div class="pt-5">
-      <div class="flex justify-start">
-        <VButton type="secondary"> 保存</VButton>
-      </div>
-    </div>
-  </form>
+  </div>
 </template>
--- a/src/modules/system/users/Login.vue
+++ b/src/modules/system/users/Login.vue
@ -9,7 +9,6 @@ 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 {
@ -23,14 +22,12 @@ interface LoginFormState {
  state: LoginForm;
 }

-const router = useRouter();
-
 const loginForm = ref<LoginFormState>({
  logging: false,
  state: {
    _csrf: "",
    username: "admin",
-    password: "{no}123456",
+    password: "1A3DTGDF7yeGsZaR",
  },
 });

--- a/src/modules/system/users/PasswordChange.vue
+++ b/src/modules/system/users/PasswordChange.vue
@ -1,46 +1,16 @@
 <script lang="ts" setup>
-import { VButton, VInput } from "@halo-dev/components";
+import { VButton } from "@halo-dev/components";
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput />
-          </div>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput />
-          </div>
-        </div>
-      </div>
+  <FormKit id="password-form" :actions="false" type="form">
+    <FormKit label="原密码" type="password"></FormKit>
+    <FormKit label="新密码" type="password"></FormKit>
+    <FormKit label="确认密码" type="password"></FormKit>
+  </FormKit>

-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput />
-          </div>
-        </div>
-      </div>
+  <div class="pt-5">
+    <div class="flex justify-start">
+      <VButton type="secondary">修改密码</VButton>
    </div>
-
-    <div class="pt-5">
-      <div class="flex justify-start">
-        <VButton type="secondary">修改密码</VButton>
-      </div>
-    </div>
-  </form>
+  </div>
 </template>
--- a/src/modules/system/users/PersonalAccessTokens.vue
+++ b/src/modules/system/users/PersonalAccessTokens.vue
@ -4,7 +4,6 @@ import {
  IconDeleteBin,
  IconStopCircle,
  VButton,
-  VInput,
  VModal,
  VSpace,
  VTabItem,
@ -38,30 +37,10 @@ onMounted(() => {
  <VModal v-model:visible="createVisible" :width="720" title="创建个人令牌">
    <VTabs v-model:active-id="createActiveId" 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></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>
-        </form>
+        <FormKit id="role-form" :actions="false" type="form">
+          <FormKit label="名称" type="text" validation="required"></FormKit>
+          <FormKit label="失效日期" type="text" validation="required"></FormKit>
+        </FormKit>
      </VTabItem>
      <VTabItem id="permissions" label="权限">
        <div>
--- a/src/modules/system/users/ProfileModification.vue
+++ b/src/modules/system/users/ProfileModification.vue
@ -1,60 +1,36 @@
 <script lang="ts" setup>
-import { VButton, VInput, VTextarea } from "@halo-dev/components";
+import { VButton } from "@halo-dev/components";
 import { inject } from "vue";
 import type { User } from "@/types/extension";

 const user = inject<User>("user");
 </script>
 <template>
-  <form class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-    <div class="space-y-6 space-y-5 divide-y divide-gray-100">
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput :modelValue="user?.metadata?.name" />
-          </div>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput :modelValue="user?.spec?.displayName" />
-          </div>
-        </div>
-      </div>
+  <FormKit v-if="user" id="user-form" :actions="false" type="form">
+    <FormKit
+      v-model="user.metadata.name"
+      label="用户名"
+      type="text"
+      validation="required"
+    ></FormKit>
+    <FormKit
+      v-model="user.spec.displayName"
+      label="显示名称"
+      type="text"
+      validation="required"
+    ></FormKit>
+    <FormKit
+      v-model="user.spec.email"
+      label="电子邮箱"
+      type="email"
+      validation="required"
+    ></FormKit>
+    <FormKit v-model="user.spec.bio" label="描述" type="textarea"></FormKit>
+  </FormKit>

-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VInput :modelValue="user?.spec?.email" />
-          </div>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-6 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-3 sm:mt-0">
-          <div class="flex max-w-lg shadow-sm">
-            <VTextarea :modelValue="user?.spec?.bio" />
-          </div>
-        </div>
-      </div>
+  <div class="pt-5">
+    <div class="flex justify-start">
+      <VButton type="secondary">保存</VButton>
    </div>
-
-    <div class="pt-5">
-      <div class="flex justify-start">
-        <VButton type="secondary">保存</VButton>
-      </div>
-    </div>
-  </form>
+  </div>
 </template>
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@ -7,7 +7,6 @@ import {
  IconUserSettings,
  VButton,
  VCard,
-  VInput,
  VPageHeader,
  VSpace,
  VTag,
@ -84,11 +83,11 @@ onMounted(() => {
              />
            </div>
            <div class="flex w-full flex-1 sm:w-auto">
-              <VInput
+              <FormKit
                v-if="!checkAll"
-                class="w-72"
                placeholder="输入关键词搜索"
-              />
+                type="text"
+              ></FormKit>
              <VSpace v-else>
                <VButton type="default">设置</VButton>
                <VButton type="danger">删除</VButton>
--- a/src/modules/system/users/components/UserCreationModal.vue
+++ b/src/modules/system/users/components/UserCreationModal.vue
@ -2,13 +2,7 @@
 import type { PropType } from "vue";
 import { computed, ref, watch } from "vue";
 import { axiosInstance } from "@halo-dev/admin-shared";
-import {
-  IconSave,
-  VButton,
-  VInput,
-  VModal,
-  VTextarea,
-} from "@halo-dev/components";
+import { IconSave, VButton, VModal } from "@halo-dev/components";
 import type { User } from "@/types/extension";
 import { v4 as uuid } from "uuid";

@ -100,76 +94,51 @@ const handleCreateUser = async () => {
    :width="700"
    @update:visible="handleVisibleChange"
  >
-    <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="creationForm.user.metadata.name"></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="creationForm.user.spec.displayName"></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 v-model="creationForm.user.spec.email"></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="creationForm.user.spec.phone"></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="creationForm.user.spec.avatar"></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="creationForm.user.spec.bio"></VTextarea>
-          </div>
-        </div>
-      </div>
-    </form>
+    <FormKit
+      id="user-form"
+      :actions="false"
+      type="form"
+      @submit="handleCreateUser"
+    >
+      <FormKit
+        v-model="creationForm.user.metadata.name"
+        label="用户名"
+        type="text"
+        validation="required"
+      ></FormKit>
+      <FormKit
+        v-model="creationForm.user.spec.displayName"
+        label="显示名称"
+        type="text"
+        validation="required"
+      ></FormKit>
+      <FormKit
+        v-model="creationForm.user.spec.email"
+        label="电子邮箱"
+        type="email"
+        validation="required"
+      ></FormKit>
+      <FormKit
+        v-model="creationForm.user.spec.phone"
+        label="手机号"
+        type="text"
+      ></FormKit>
+      <FormKit
+        v-model="creationForm.user.spec.avatar"
+        label="头像"
+        type="text"
+      ></FormKit>
+      <FormKit
+        v-model="creationForm.user.spec.bio"
+        label="描述"
+        type="textarea"
+      ></FormKit>
+    </FormKit>
    <template #footer>
      <VButton
        :loading="creationForm.saving"
        type="secondary"
-        @click="handleCreateUser"
+        @click="$formkit.submit('user-form')"
      >
        <template #icon>
          <IconSave class="h-full w-full" />
--- a/src/setup/setupComponents.ts
+++ b/src/setup/setupComponents.ts
@ -4,11 +4,19 @@ 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";
+import FormKitConfig from "@/formkit/formkit.config";
+import { zh } from "@formkit/i18n";

 export function setupComponents(app: App) {
  app.use(VueGridLayout);
-  app.use(FormKit, defaultConfig({}));
+  app.use(
+    FormKit,
+    defaultConfig({
+      locales: { zh },
+      locale: "zh",
+      ...FormKitConfig,
+    })
+  );

  app.directive("tooltip", VTooltip);
  app.directive("close-popper", VClosePopper);
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -8,6 +8,7 @@ module.exports = {
  plugins: [
    require("tailwindcss-safe-area"),
    require("@tailwindcss/aspect-ratio"),
+    require("@formkit/themes/tailwindcss"),
    themeable({
      defaultTheme: "default",
      themes: [