mirror of https://github.com/halo-dev/halo
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
parent
efcf526f1b
commit
b1a6fe3446
|
@ -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。
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue