mirror of https://github.com/halo-dev/halo
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
parent
9b8b4294e5
commit
9774530abd
|
@ -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' : ''}`"
|
||||||
|
|
Loading…
Reference in New Issue