From 9a24604a6bdbc52d827845ce8c4c076541245ec5 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 1 Nov 2022 11:06:18 +0800
Subject: [PATCH] feat: add formkit custom input of attachment
 (halo-dev/console#674)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature
/milestone 2.0

#### What this PR does / why we need it:

添加选择附件类型的 FormKit 输入框。

在 Vue 单组件中使用：

```vue
<script lang="ts" setup>
const logo = ref("")
</script>

<template>
  <FormKit
    v-model="logo"
    label="Logo"
    type="attachment"
    validation="required"
  />
</template>
```

在 FormKit Schema 中使用（插件 / 主题设置表单定义）：

```yaml
- $formkit: attachment
  name: logo
  label: Logo
```


#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2558

#### Screenshots:

<img width="671" alt="image" src="https://user-images.githubusercontent.com/21301288/198980581-ba90ec32-f205-4d03-8546-3c93238298e7.png">


#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

#### Does this PR introduce a user-facing change?

```release-note
添加选择附件类型的 FormKit 输入框。
```
---
 docs/custom-formkit-input/README.md           |  1 +
 src/formkit/formkit.config.ts                 |  2 +
 .../inputs/attachment/AttachmentInput.vue     | 61 +++++++++++++++++++
 src/formkit/inputs/attachment/index.ts        | 10 +++
 .../components/AttachmentGroupList.vue        |  1 +
 .../components/AttachmentSelectorModal.vue    |  1 +
 .../components/SinglePageSettingModal.vue     |  2 +-
 .../components/CategoryEditingModal.vue       |  3 +-
 .../posts/components/PostSettingModal.vue     |  2 +-
 .../posts/tags/components/TagEditingModal.vue |  2 +-
 .../users/components/UserEditingModal.vue     |  2 +-
 11 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 src/formkit/inputs/attachment/AttachmentInput.vue
 create mode 100644 src/formkit/inputs/attachment/index.ts

diff --git a/docs/custom-formkit-input/README.md b/docs/custom-formkit-input/README.md
index 60631d871..e4455119a 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 2c0fc28e4..78de33b8c 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 000000000..53acbecad
--- /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 000000000..bdc7253ed
--- /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 7cd2136ca..7b98b332b 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 ad99df3b1..ad82477b7 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 7ed429c6a..09da47f39 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 8f7e08ae7..6450340e3 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 623214f08..906018d01 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 8c83f1167..68c4a7e27 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 2f0fdc175..fe0c6e3d7 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>