fix: add random uuid to resolve the issue of id conflicts (#4371)

#### What type of PR is this?

/kind bug
/area console

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

为 AnnotationsForm 的 formkit 表单 id 增加 uuid 前缀,防止由于一个页面具有多个 AnnotationsForm 时编号互相冲突。

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

Fixes #4368 

#### Special notes for your reviewer:

检查使用 AnnotationsForm 的界面,例如文章、页面设置的元数据处没有出现问题即可。

#### Does this PR introduce a user-facing change?
```release-note
None
```
pull/4361/head^2
Takagi 2023-08-04 11:11:48 +08:00 committed by GitHub
parent 9b8b4294e5
commit 9774530abd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 6 deletions

View File

@ -12,6 +12,7 @@ import type { AnnotationSetting } from "@halo-dev/api-client";
import cloneDeep from "lodash.clonedeep"; import cloneDeep from "lodash.clonedeep";
import { getValidationMessages } from "@formkit/validation"; import { getValidationMessages } from "@formkit/validation";
import { useThemeStore } from "@/stores/theme"; import { useThemeStore } from "@/stores/theme";
import { randomUUID } from "@/utils/id";
const themeStore = useThemeStore(); const themeStore = useThemeStore();
@ -62,6 +63,8 @@ const handleFetchAnnotationSettings = async () => {
} }
}; };
const specFormId = `${randomUUID()}-specForm`;
const customFormId = `${randomUUID()}-customForm`;
const annotations = ref<{ const annotations = ref<{
[key: string]: string; [key: string]: string;
}>({}); }>({});
@ -134,8 +137,8 @@ onMounted(async () => {
watch( watch(
() => props.value, () => props.value,
(value) => { (value) => {
reset("specForm"); reset(specFormId);
reset("customForm"); reset(customFormId);
annotations.value = cloneDeep(props.value) || {}; annotations.value = cloneDeep(props.value) || {};
if (value) { if (value) {
handleProcessCustomAnnotations(); handleProcessCustomAnnotations();
@ -150,11 +153,11 @@ const customFormInvalid = ref(true);
const handleSubmit = async () => { const handleSubmit = async () => {
if (avaliableAnnotationSettings.value.length) { if (avaliableAnnotationSettings.value.length) {
submitForm("specForm"); submitForm(specFormId);
} else { } else {
specFormInvalid.value = false; specFormInvalid.value = false;
} }
submitForm("customForm"); submitForm(customFormId);
await nextTick(); await nextTick();
}; };
@ -187,7 +190,7 @@ defineExpose({
<div class="flex flex-col gap-3 divide-y divide-gray-100"> <div class="flex flex-col gap-3 divide-y divide-gray-100">
<FormKit <FormKit
v-if="annotations && avaliableAnnotationSettings.length > 0" v-if="annotations && avaliableAnnotationSettings.length > 0"
id="specForm" :id="specFormId"
v-model="annotations" v-model="annotations"
type="form" type="form"
:preserve="true" :preserve="true"
@ -206,7 +209,7 @@ defineExpose({
</FormKit> </FormKit>
<FormKit <FormKit
v-if="annotations" v-if="annotations"
id="customForm" :id="customFormId"
type="form" type="form"
:preserve="true" :preserve="true"
:form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`" :form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"