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
默认隐藏文章设置等界面的自定义元数据表单。
```

ui/src/components/form/AnnotationsForm.vue

@@ -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"
+    <details
-      :id="customFormId"
+      :open="showCustomForm"
-      type="form"
+      class="flex cursor-pointer space-y-4 py-4 transition-all first:pt-0"
-      :preserve="true"
+      @toggle="onCustomFormToggle"
-      :form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"
-      @submit-invalid="onCustomFormSubmitCheck"
-      @submit="customFormInvalid = false"
     >
+      <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"
+        v-if="annotations"
-        type="repeater"
+        :id="customFormId"
-        :label="$t('core.components.annotations_form.custom_fields.label')"
+        type="form"
+        :preserve="true"
+        :form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"
+        @submit-invalid="onCustomFormSubmitCheck"
+        @submit="customFormInvalid = false"
       >
         <FormKit
-          type="text"
+          v-model="customAnnotationsState"
-          label="Key"
+          type="repeater"
-          name="key"
+          :label="$t('core.components.annotations_form.custom_fields.label')"
-          validation="required:trim|keyValidationRule"
+        >
-          :validation-rules="{ keyValidationRule }"
+          <FormKit
-          :validation-messages="{
+            type="text"
-            keyValidationRule: $t(
+            label="Key"
-              'core.components.annotations_form.custom_fields.validation'
+            name="key"
-            ),
+            validation="required:trim|keyValidationRule"
-          }"
+            :validation-rules="{ keyValidationRule }"
-        ></FormKit>
+            :validation-messages="{
-        <FormKit type="text" label="Value" name="value" value=""></FormKit>
+              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>

ui/src/locales/en.yaml

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

ui/src/locales/zh-CN.yaml

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

ui/src/locales/zh-TW.yaml

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