From b1a6fe3446cec86c8041a592454352e4f29ce42a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 14 Jul 2023 12:18:10 +0800
Subject: [PATCH] feat: register the AnnotationsForm component globally (#4212)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind feature
/milestone 2.8.x

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

全局注册 AnnotationsForm 组件，以暴露给插件使用，让插件可以实现为模型设置 annotations 数据的功能。

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

Fixes #4183

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

```release-note
Console 端全局注册 AnnotationsForm 组件，以暴露给插件使用
```
---
 console/docs/components/README.md    | 54 ++++++++++++++++++++++++++++
 console/src/setup/setupComponents.ts |  2 ++
 2 files changed, 56 insertions(+)
 create mode 100644 console/docs/components/README.md

diff --git a/console/docs/components/README.md b/console/docs/components/README.md
new file mode 100644
index 000000000..14f3c29c2
--- /dev/null
+++ b/console/docs/components/README.md
@@ -0,0 +1,54 @@
+# Console 组件介绍
+
+目前 Console 的组件包含基础组件（`@halo-dev/components`）和 Console 端的业务组件，这两种组件都可以在插件中使用。
+
+## 业务组件
+
+### AnnotationsForm
+
+此组件用于为自定义模型设置 annotations 数据，同时支持自定义 key / value 和自定义表单，表单定义方式可以参考：<https://docs.halo.run/developer-guide/annotations-form>
+
+使用方式：
+
+```vue
+<script setup lang="ts">
+const formState = ref({
+  metadata: {
+    annotations: {}
+  }
+})
+
+const annotationsFormRef = ref();
+
+async function handleSubmit () {
+  annotationsFormRef.value?.handleSubmit();
+
+  await nextTick();
+
+  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
+    annotationsFormRef.value || {};
+
+  // AnnotationsForm 中的表单校验失败时，不提交数据
+  if (customFormInvalid || specFormInvalid) {
+    return;
+  }
+
+  // 合并数据，此对象即可最终设置给模型的 metadata.annotations
+  const annotations = {
+    ...annotations,
+    ...customAnnotations,
+  }
+}
+</script>
+
+<template>
+  <AnnotationsForm
+    ref="annotationsFormRef"
+    :value="formState.metadata.annotations"
+    kind="Post"
+    group="content.halo.run"
+  />
+</template>
+```
+
+其中，kind 和 group 为必填项，分别表示模型的 kind 和 group。
diff --git a/console/src/setup/setupComponents.ts b/console/src/setup/setupComponents.ts
index 28853bf93..95e349838 100644
--- a/console/src/setup/setupComponents.ts
+++ b/console/src/setup/setupComponents.ts
@@ -9,6 +9,7 @@ import FormKitConfig from "@/formkit/formkit.config";
 import FilterDropdown from "@/components/filter/FilterDropdown.vue";
 import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import SearchInput from "@/components/input/SearchInput.vue";
+import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 
 export function setupComponents(app: App) {
   app.use(VueGridLayout);
@@ -33,4 +34,5 @@ export function setupComponents(app: App) {
   app.component("FilterDropdown", FilterDropdown);
   app.component("FilterCleanButton", FilterCleanButton);
   app.component("SearchInput", SearchInput);
+  app.component("AnnotationsForm", AnnotationsForm);
 }