> For AI agents: the complete documentation index is available at https://docs.halo.run/llms.txt, the full documentation bundle is available at https://docs.halo.run/llms-full.txt.

# AnnotationsForm

此组件用于提供统一的 [Annotations 表单](https://docs.halo.run/developer-guide/annotations-form.md)，可以根据 `group` 和 `kind` 属性自动渲染对应的表单项。

## 使用示例

```vue
<script lang="ts" setup>
import { ref } from "vue"

const annotationsFormRef = ref()
const currentAnnotations = ref()

function handleSubmit () {
  annotationsFormRef.value?.handleSubmit();
  await nextTick();

  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
    annotationsFormRef.value || {};

  // 表单验证不通过
  if (customFormInvalid || specFormInvalid) {
    return;
  }

  // 合并自定义数据和表单提供的数据
  const newAnnotations = {
    ...annotations,
    ...customAnnotations,
  };
}
</script>

<template>
  <AnnotationsForm
    ref="annotationsFormRef"
    :value="currentAnnotations"
    kind="Post"
    group="content.halo.run"
  />

  <VButton @click="handleSubmit">提交</VButton>
</template>
```

## Props

| 属性名     | 类型                                           | 默认值                    | 描述         |
| ------- | -------------------------------------------- | ---------------------- | ---------- |
| `group` | string                                       | 无，必填                   | 定义组件所属的分组。 |
| `kind`  | string                                       | 无，必填                   | 定义组件的种类。   |
| `value` | \{ \[key: string]: string; } \| null \| null | 可选，包含键值对的对象或空值，用于存储数据。 |            |