diff --git a/docs/custom-formkit-input/README.md b/docs/custom-formkit-input/README.md
index 60631d87..e4455119 100644
--- a/docs/custom-formkit-input/README.md
+++ b/docs/custom-formkit-input/README.md
@@ -12,6 +12,7 @@
   - 参数
     1. language: 目前支持 `yaml`, `html`, `css`, `javascript`, `json`
     2. height: 编辑器高度，如：`100px`
+- `attachment`: 附件选择
 - `menuCheckbox`：选择一组菜单
 - `menuRadio`：选择一个菜单
 - `menuItemSelect`：选择菜单项
diff --git a/src/formkit/formkit.config.ts b/src/formkit/formkit.config.ts
index 2c0fc28e..78de33b8 100644
--- a/src/formkit/formkit.config.ts
+++ b/src/formkit/formkit.config.ts
@@ -4,6 +4,7 @@ import { createAutoAnimatePlugin } from "@formkit/addons";
 import { zh } from "@formkit/i18n";
 import type { DefaultConfigOptions } from "@formkit/vue";
 import { form } from "./inputs/form";
+import { attachment } from "./inputs/attachment";
 import { code } from "./inputs/code";
 import { menuCheckbox } from "./inputs/menu-checkbox";
 import { menuRadio } from "./inputs/menu-radio";
@@ -22,6 +23,7 @@ const config: DefaultConfigOptions = {
   plugins: [createAutoAnimatePlugin()],
   inputs: {
     form,
+    attachment,
     code,
     menuCheckbox,
     menuRadio,
diff --git a/src/formkit/inputs/attachment/AttachmentInput.vue b/src/formkit/inputs/attachment/AttachmentInput.vue
new file mode 100644
index 00000000..53acbeca
--- /dev/null
+++ b/src/formkit/inputs/attachment/AttachmentInput.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { FormKitFrameworkContext } from "@formkit/core";
+import { IconFolder } from "@halo-dev/components";
+import AttachmentSelectorModal from "@/modules/contents/attachments/components/AttachmentSelectorModal.vue";
+import { ref, type PropType } from "vue";
+import type { AttachmentLike } from "@halo-dev/console-shared";
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
+});
+
+const attachmentSelectorModal = ref(false);
+
+const onInput = (e: Event) => {
+  props.context.handlers.DOMInput(e);
+};
+
+const onAttachmentSelect = (attachments: AttachmentLike[]) => {
+  const urls: (string | undefined)[] = attachments.map((attachment) => {
+    if (typeof attachment === "string") {
+      return attachment;
+    }
+    if ("url" in attachment) {
+      return attachment.url;
+    }
+    if ("spec" in attachment) {
+      return attachment.status?.permalink;
+    }
+  });
+
+  if (urls.length) {
+    props.context.node.input(urls[0]);
+  }
+};
+</script>
+
+<template>
+  <input
+    :id="context.id"
+    :value="context._value"
+    :class="context.classes.input"
+    :name="context.node.name"
+    v-bind="context.attrs"
+    type="text"
+    @blur="context.handlers.blur()"
+    @input="onInput"
+  />
+  <div
+    class="group flex h-full cursor-pointer items-center border-l px-3 transition-all hover:bg-gray-100"
+    @click="attachmentSelectorModal = true"
+  >
+    <IconFolder class="h-4 w-4 text-gray-500 group-hover:text-gray-700" />
+  </div>
+  <AttachmentSelectorModal
+    v-model:visible="attachmentSelectorModal"
+    @select="onAttachmentSelect"
+  />
+</template>
diff --git a/src/formkit/inputs/attachment/index.ts b/src/formkit/inputs/attachment/index.ts
new file mode 100644
index 00000000..bdc7253e
--- /dev/null
+++ b/src/formkit/inputs/attachment/index.ts
@@ -0,0 +1,10 @@
+import { initialValue } from "@formkit/inputs";
+import { createInput } from "@formkit/vue";
+import AttachmentInput from "./AttachmentInput.vue";
+
+export const attachment = createInput(AttachmentInput, {
+  type: "input",
+  props: [],
+  forceTypeProp: "text",
+  features: [initialValue],
+});
diff --git a/src/modules/contents/attachments/components/AttachmentGroupList.vue b/src/modules/contents/attachments/components/AttachmentGroupList.vue
index 7cd2136c..7b98b332 100644
--- a/src/modules/contents/attachments/components/AttachmentGroupList.vue
+++ b/src/modules/contents/attachments/components/AttachmentGroupList.vue
@@ -98,6 +98,7 @@ onMounted(async () => {
 </script>
 <template>
   <AttachmentGroupEditingModal
+    v-if="!readonly"
     v-model:visible="editingModal"
     :group="groupToUpdate"
     @close="onEditingModalClose"
diff --git a/src/modules/contents/attachments/components/AttachmentSelectorModal.vue b/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
index ad99df3b..ad82477b 100644
--- a/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
@@ -61,6 +61,7 @@ const handleConfirm = () => {
   <VModal
     :visible="visible"
     :width="1240"
+    :mount-to-body="true"
     title="选择附件"
     height="calc(100vh - 20px)"
     @update:visible="onVisibleChange"
diff --git a/src/modules/contents/pages/components/SinglePageSettingModal.vue b/src/modules/contents/pages/components/SinglePageSettingModal.vue
index 7ed429c6..09da47f3 100644
--- a/src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -272,7 +272,7 @@ watchEffect(() => {
           <FormKit
             v-model="formState.page.spec.cover"
             label="封面图"
-            type="text"
+            type="attachment"
             name="cover"
           ></FormKit>
         </FormKit>
diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index 8f7e08ae..6450340e 100644
--- a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -152,7 +152,8 @@ watch(
         help="需要主题适配以支持"
         name="cover"
         label="封面图"
-        type="text"
+        type="attachment"
+        validation="required"
       ></FormKit>
       <FormKit
         v-model="formState.spec.description"
diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue
index 623214f0..906018d0 100644
--- a/src/modules/contents/posts/components/PostSettingModal.vue
+++ b/src/modules/contents/posts/components/PostSettingModal.vue
@@ -285,7 +285,7 @@ watchEffect(() => {
             v-model="formState.post.spec.cover"
             name="cover"
             label="封面图"
-            type="text"
+            type="attachment"
           ></FormKit>
         </FormKit>
         <!--TODO: add SEO/Metas/Inject Code form-->
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index 8c83f116..68c4a7e2 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -171,7 +171,7 @@ watch(
         name="cover"
         help="需要主题适配以支持"
         label="封面图"
-        type="text"
+        type="attachment"
       ></FormKit>
     </FormKit>
     <template #footer>
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index 2f0fdc17..fe0c6e3d 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -197,7 +197,7 @@ const handleRawModeChange = () => {
         <FormKit
           v-model="formState.spec.avatar"
           label="头像"
-          type="text"
+          type="attachment"
           name="avatar"
           validation="url"
         ></FormKit>