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
Ryan Wang 2024-03-31 22:20:06 +08:00 committed by GitHub
parent 5fae1d8e9a
commit ae274db893
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 83 additions and 26 deletions

View File

@ -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>

View File

@ -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:

View File

@ -1329,6 +1329,9 @@ core:
custom_fields:
label: 自定义
validation: 当前 Key 已被占用
buttons:
expand: 查看更多
collapse: 收起
default_editor:
tabs:
toc:

View File

@ -1295,6 +1295,9 @@ core:
custom_fields:
label: 自定義
validation: 當前 Key 已被占用
buttons:
expand: 查看更多
collapse: 收起
default_editor:
tabs:
toc: