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 #5439 #### Does this PR introduce a user-facing change? ```release-note 默认隐藏文章设置等界面的自定义元数据表单。 ```
halo-dev · Mar 31, 2024 · ae274db · ae274db
1 parent 5fae1d8
commit ae274db
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 26 deletions.
diff --git a/ui/src/components/form/AnnotationsForm.vue b/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"
-      :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>
diff --git a/ui/src/locales/en.yaml b/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:

diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
@@ -1329,6 +1329,9 @@ core:
       custom_fields:
         label: 自定义
         validation: 当前 Key 已被占用
+      buttons:
+        expand: 查看更多
+        collapse: 收起
     default_editor:
       tabs:
         toc:

diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
@@ -1295,6 +1295,9 @@ core:
       custom_fields:
         label: 自定義
         validation: 當前 Key 已被占用
+      buttons:
+        expand: 查看更多
+        collapse: 收起
     default_editor:
       tabs:
         toc: