mirror of https://github.com/halo-dev/halo
55 lines
1.3 KiB
Markdown
55 lines
1.3 KiB
Markdown
# 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。
|