feat: register the AnnotationsForm component globally (#4212)

#### 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 组件,以暴露给插件使用
```
pull/4233/head
Ryan Wang 2023-07-14 12:18:10 +08:00 committed by GitHub
parent efcf526f1b
commit b1a6fe3446
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 0 deletions

View File

@ -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。

View File

@ -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);
}