mirror of https://github.com/halo-dev/halo
refactor: hide the custom annotations form by defaults (#5595)
#### What type of PR is this? /area ui /kind improvement /milestone 2.14.x #### What this PR does / why we need it: 默认隐藏自定义元数据表单,通常这不会让用户自行修改,默认显示反而会给使用者造成心智负担。 <img width="807" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/f80813e2-00c8-483e-bb16-fe4671c5450e"> #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/5439 #### Does this PR introduce a user-facing change? ```release-note 默认隐藏文章设置等界面的自定义元数据表单。 ```pull/5635/head v2.14.0
parent
5fae1d8e9a
commit
ae274db893
|
@ -1,11 +1,14 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
reset,
|
||||
submitForm,
|
||||
type FormKitNode,
|
||||
type FormKitSchemaCondition,
|
||||
type FormKitSchemaNode,
|
||||
reset,
|
||||
submitForm,
|
||||
} from "@formkit/core";
|
||||
|
||||
import { IconArrowRight } from "@halo-dev/components";
|
||||
|
||||
import { computed, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { apiClient } from "@/utils/api-client";
|
||||
import type { AnnotationSetting } from "@halo-dev/api-client";
|
||||
|
@ -196,6 +199,12 @@ defineExpose({
|
|||
annotations,
|
||||
customAnnotations,
|
||||
});
|
||||
|
||||
const showCustomForm = ref(false);
|
||||
|
||||
function onCustomFormToggle(e: Event) {
|
||||
showCustomForm.value = (e.target as HTMLDetailsElement).open;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -219,34 +228,73 @@ defineExpose({
|
|||
/>
|
||||
</template>
|
||||
</FormKit>
|
||||
<FormKit
|
||||
v-if="annotations"
|
||||
:id="customFormId"
|
||||
type="form"
|
||||
:preserve="true"
|
||||
:form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"
|
||||
@submit-invalid="onCustomFormSubmitCheck"
|
||||
@submit="customFormInvalid = false"
|
||||
|
||||
<details
|
||||
:open="showCustomForm"
|
||||
class="flex cursor-pointer space-y-4 py-4 transition-all first:pt-0"
|
||||
@toggle="onCustomFormToggle"
|
||||
>
|
||||
<summary class="group flex items-center justify-between">
|
||||
<div class="block text-sm font-medium text-gray-700">
|
||||
{{
|
||||
$t(
|
||||
showCustomForm
|
||||
? "core.components.annotations_form.buttons.collapse"
|
||||
: "core.components.annotations_form.buttons.expand"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="-mr-1 inline-flex items-center justify-center rounded-full p-1 group-hover:bg-gray-100"
|
||||
:class="{ 'bg-gray-100': showCustomForm }"
|
||||
>
|
||||
<IconArrowRight
|
||||
:class="{ 'rotate-90 !text-gray-900': showCustomForm }"
|
||||
class="text-gray-600 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
<FormKit
|
||||
v-model="customAnnotationsState"
|
||||
type="repeater"
|
||||
:label="$t('core.components.annotations_form.custom_fields.label')"
|
||||
v-if="annotations"
|
||||
:id="customFormId"
|
||||
type="form"
|
||||
:preserve="true"
|
||||
:form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"
|
||||
@submit-invalid="onCustomFormSubmitCheck"
|
||||
@submit="customFormInvalid = false"
|
||||
>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Key"
|
||||
name="key"
|
||||
validation="required:trim|keyValidationRule"
|
||||
:validation-rules="{ keyValidationRule }"
|
||||
:validation-messages="{
|
||||
keyValidationRule: $t(
|
||||
'core.components.annotations_form.custom_fields.validation'
|
||||
),
|
||||
}"
|
||||
></FormKit>
|
||||
<FormKit type="text" label="Value" name="value" value=""></FormKit>
|
||||
v-model="customAnnotationsState"
|
||||
type="repeater"
|
||||
:label="$t('core.components.annotations_form.custom_fields.label')"
|
||||
>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Key"
|
||||
name="key"
|
||||
validation="required:trim|keyValidationRule"
|
||||
:validation-rules="{ keyValidationRule }"
|
||||
:validation-messages="{
|
||||
keyValidationRule: $t(
|
||||
'core.components.annotations_form.custom_fields.validation'
|
||||
),
|
||||
}"
|
||||
></FormKit>
|
||||
<FormKit type="text" label="Value" name="value" value=""></FormKit>
|
||||
</FormKit>
|
||||
</FormKit>
|
||||
</FormKit>
|
||||
</details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
details > summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/** Hide the default marker **/
|
||||
details > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1375,6 +1375,9 @@ core:
|
|||
custom_fields:
|
||||
label: Custom
|
||||
validation: The current Key is already in use
|
||||
buttons:
|
||||
expand: View more
|
||||
collapse: Collapse
|
||||
default_editor:
|
||||
tabs:
|
||||
toc:
|
||||
|
|
|
@ -1329,6 +1329,9 @@ core:
|
|||
custom_fields:
|
||||
label: 自定义
|
||||
validation: 当前 Key 已被占用
|
||||
buttons:
|
||||
expand: 查看更多
|
||||
collapse: 收起
|
||||
default_editor:
|
||||
tabs:
|
||||
toc:
|
||||
|
|
|
@ -1295,6 +1295,9 @@ core:
|
|||
custom_fields:
|
||||
label: 自定義
|
||||
validation: 當前 Key 已被占用
|
||||
buttons:
|
||||
expand: 查看更多
|
||||
collapse: 收起
|
||||
default_editor:
|
||||
tabs:
|
||||
toc:
|
||||
|
|
Loading…
Reference in New Issue