feat: add annotations form for more extension (#801)

#### What type of PR is this? /kind feature #### What this PR does / why we need it: 为更多模型添加 Annotation Form 的支持。此 PR 包括： 1. 自定义页面。 2. 文章分类。 3. 文章标签。 4. 菜单项。 5. 用户。此 PR 是对 #770 的补充。 #### Special notes for your reviewer: 测试方式： 1. 将一下内容放到任意一个主题下，后缀为 `yaml`，文件名随意。 ```yaml spec: targetRef: group: content.halo.run kind: Post formSchema: - $formkit: "text" name: "download" label: "下载地址" - $formkit: "text" name: "version" label: "版本" apiVersion: v1alpha1 kind: AnnotationSetting metadata: generateName: annotation- --- spec: targetRef: group: content.halo.run kind: SinglePage formSchema: - $formkit: "text" name: "download" label: "下载地址" - $formkit: "text" name: "version" label: "版本" apiVersion: v1alpha1 kind: AnnotationSetting metadata: generateName: annotation- --- spec: targetRef: group: content.halo.run kind: Category formSchema: - $formkit: "text" name: "download" label: "下载地址" - $formkit: "text" name: "version" label: "版本" apiVersion: v1alpha1 kind: AnnotationSetting metadata: generateName: annotation- --- spec: targetRef: group: content.halo.run kind: Tag formSchema: - $formkit: "text" name: "download" label: "下载地址" - $formkit: "text" name: "version" label: "版本" apiVersion: v1alpha1 kind: AnnotationSetting metadata: generateName: annotation- --- spec: targetRef: group: "" kind: MenuItem formSchema: - $formkit: "text" name: "icon" label: "图标" - $formkit: "text" name: "version" label: "版本" apiVersion: v1alpha1 kind: AnnotationSetting metadata: generateName: annotation- ``` 3. 后端需要使用 halo-dev/halo#3028 4. 测试上述提到的模型的 Annotations 表单。 5. 检查是否可以设置正常。 #### Does this PR introduce a user-facing change? ```release-note None ```
halo-dev · Dec 26, 2022 · 8d3c289 · 8d3c289 · vercel · Dec 26, 2022
1 parent d60931b
commit 8d3c289
Show file tree

Hide file tree

Showing 6 changed files with 429 additions and 173 deletions.
diff --git a/src/components/form/AnnotationsForm.vue b/src/components/form/AnnotationsForm.vue
@@ -148,7 +148,11 @@ const specFormInvalid = ref(true);
 const customFormInvalid = ref(true);
 
 const handleSubmit = async () => {
-  submitForm("specForm");
+  if (avaliableAnnotationSettings.value.length) {
+    submitForm("specForm");
+  } else {
+    specFormInvalid.value = false;
+  }
   submitForm("customForm");
   await nextTick();
 };

diff --git a/src/modules/contents/pages/components/SinglePageSettingModal.vue b/src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -9,6 +9,7 @@ import { singlePageLabels } from "@/constants/labels";
 import { randomUUID } from "@/utils/id";
 import { toDatetimeLocal, toISOString } from "@/utils/date";
 import { submitForm } from "@formkit/core";
+import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 
 const initialFormState: SinglePage = {
   spec: {
@@ -75,6 +76,8 @@ const onVisibleChange = (visible: boolean) => {
   }
 };
 
+const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
+
 const handleSubmit = () => {
   if (submitType.value === "publish") {
     handlePublish();
@@ -101,6 +104,20 @@ const handlePublishClick = () => {
 };
 
 const handleSave = async () => {
+  annotationsFormRef.value?.handleSubmit();
+  await nextTick();
+
+  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
+    annotationsFormRef.value || {};
+  if (customFormInvalid || specFormInvalid) {
+    return;
+  }
+
+  formState.value.metadata.annotations = {
+    ...annotations,
+    ...customAnnotations,
+  };
+
   if (props.onlyEmit) {
     emit("saved", formState.value);
     return;
@@ -138,6 +155,20 @@ const handleSave = async () => {
 };
 
 const handlePublish = async () => {
+  annotationsFormRef.value?.handleSubmit();
+  await nextTick();
+
+  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
+    annotationsFormRef.value || {};
+  if (customFormInvalid || specFormInvalid) {
+    return;
+  }
+
+  formState.value.metadata.annotations = {
+    ...annotations,
+    ...customAnnotations,
+  };
+
   if (props.onlyEmit) {
     emit("published", formState.value);
     return;
@@ -364,6 +395,27 @@ const onPublishTimeChange = (value: string) => {
       </div>
     </FormKit>
 
+    <div class="py-5">
+      <div class="border-t border-gray-200"></div>
+    </div>
+
+    <div class="md:grid md:grid-cols-4 md:gap-6">
+      <div class="md:col-span-1">
+        <div class="sticky top-0">
+          <span class="text-base font-medium text-gray-900"> 元数据 </span>
+        </div>
+      </div>
+      <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+        <AnnotationsForm
+          :key="formState.metadata.name"
+          ref="annotationsFormRef"
+          :value="formState.metadata.annotations"
+          kind="SinglePage"
+          group="content.halo.run"
+        />
+      </div>
+    </div>
+
     <template #footer>
       <VSpace>
         <template v-if="publishSupport">

diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 
 // components
@@ -15,6 +15,7 @@ import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
 import { useThemeCustomTemplates } from "@/modules/interface/themes/composables/use-theme";
+import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -62,7 +63,23 @@ const modalTitle = computed(() => {
   return isUpdateMode.value ? "编辑文章分类" : "新增文章分类";
 });
 
+const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
+
 const handleSaveCategory = async () => {
+  annotationsFormRef.value?.handleSubmit();
+  await nextTick();
+
+  const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
+    annotationsFormRef.value || {};
+  if (customFormInvalid || specFormInvalid) {
+    return;
+  }
+
+  formState.value.metadata.annotations = {
+    ...annotations,
+    ...customAnnotations,
+  };
+
   try {
     saving.value = true;
     if (isUpdateMode.value) {
@@ -126,56 +143,89 @@ const { templates } = useThemeCustomTemplates("category");
   <VModal
     :title="modalTitle"
     :visible="visible"
-    :width="600"
+    :width="700"
     @update:visible="onVisibleChange"
   >
     <FormKit
       id="category-form"
-      name="category-form"
       type="form"
+      name="category-form"
       :config="{ validationVisibility: 'submit' }"
       @submit="handleSaveCategory"
     >
-      <FormKit
-        id="displayNameInput"
-        v-model="formState.spec.displayName"
-        name="displayName"
-        label="名称"
-        type="text"
-        validation="required|length:0,50"
-      ></FormKit>
-      <FormKit
-        v-model="formState.spec.slug"
-        help="通常作为分类访问地址标识"
-        name="slug"
-        label="别名"
-        type="text"
-        validation="required|length:0,50"
-      ></FormKit>
-      <FormKit
-        v-model="formState.spec.template"
-        :options="templates"
-        label="自定义模板"
-        type="select"
-        name="template"
-      ></FormKit>
-      <FormKit
-        v-model="formState.spec.cover"
-        help="需要主题适配以支持"
-        name="cover"
-        label="封面图"
-        type="attachment"
-        validation="length:0,1024"
-      ></FormKit>
-      <FormKit
-        v-model="formState.spec.description"
-        name="description"
-        help="需要主题适配以支持"
-        label="描述"
-        type="textarea"
-        validation="length:0,200"
-      ></FormKit>
+      <div>
+        <div class="md:grid md:grid-cols-4 md:gap-6">
+          <div class="md:col-span-1">
+            <div class="sticky top-0">
+              <span class="text-base font-medium text-gray-900"> 常规 </span>
+            </div>
+          </div>
+          <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+            <FormKit
+              id="displayNameInput"
+              v-model="formState.spec.displayName"
+              name="displayName"
+              label="名称"
+              type="text"
+              validation="required|length:0,50"
+            ></FormKit>
+            <FormKit
+              v-model="formState.spec.slug"
+              help="通常作为分类访问地址标识"
+              name="slug"
+              label="别名"
+              type="text"
+              validation="required|length:0,50"
+            ></FormKit>
+            <FormKit
+              v-model="formState.spec.template"
+              :options="templates"
+              label="自定义模板"
+              type="select"
+              name="template"
+            ></FormKit>
+            <FormKit
+              v-model="formState.spec.cover"
+              help="需要主题适配以支持"
+              name="cover"
+              label="封面图"
+              type="attachment"
+              validation="length:0,1024"
+            ></FormKit>
+            <FormKit
+              v-model="formState.spec.description"
+              name="description"
+              help="需要主题适配以支持"
+              label="描述"
+              type="textarea"
+              validation="length:0,200"
+            ></FormKit>
+          </div>
+        </div>
+      </div>
     </FormKit>
+
+    <div class="py-5">
+      <div class="border-t border-gray-200"></div>
+    </div>
+
+    <div class="md:grid md:grid-cols-4 md:gap-6">
+      <div class="md:col-span-1">
+        <div class="sticky top-0">
+          <span class="text-base font-medium text-gray-900"> 元数据 </span>
+        </div>
+      </div>
+      <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
+        <AnnotationsForm
+          :key="formState.metadata.name"
+          ref="annotationsFormRef"
+          :value="formState.metadata.annotations"
+          kind="Category"
+          group="content.halo.run"
+        />
+      </div>
+    </div>
+
     <template #footer>
       <VSpace>
         <SubmitButton