[release-2.3] perf: add supports for force updating of post and single page settings (#913)

This is an automated cherry-pick of #907

/assign ruibaby

```release-note
支持强制保存文章和页面的设置，避免因为 Version 锁的机制导致保存失败。
```

src/modules/contents/pages/components/SinglePageSettingModal.vue

@@ -17,6 +17,7 @@ import { toDatetimeLocal, toISOString } from "@/utils/date";
 import { submitForm } from "@formkit/core";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import useSlugify from "@/composables/use-slugify";
+import { useMutation } from "@tanstack/vue-query";
 
 const initialFormState: SinglePage = {
   spec: {
@@ -110,6 +111,40 @@ const handlePublishClick = () => {
   });
 };
 
+// Fix me:
+// Force update post settings,
+// because currently there may be errors caused by changes in version due to asynchronous processing.
+const { mutateAsync: singlePageUpdateMutate } = useMutation({
+  mutationKey: ["singlePage-update"],
+  mutationFn: async (page: SinglePage) => {
+    const { data: latestSinglePage } =
+      await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
+        name: page.metadata.name,
+      });
+    return apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
+      {
+        name: page.metadata.name,
+        singlePage: {
+          ...latestSinglePage,
+          spec: page.spec,
+          metadata: {
+            ...latestSinglePage.metadata,
+            annotations: page.metadata.annotations,
+          },
+        },
+      },
+      {
+        mute: true,
+      }
+    );
+  },
+  retry: 3,
+  onError: (error) => {
+    console.error("Failed to update post", error);
+    Toast.error(`服务器内部错误`);
+  },
+});
+
 const handleSave = async () => {
   annotationsFormRef.value?.handleSubmit();
   await nextTick();
@@ -133,15 +168,8 @@ const handleSave = async () => {
   try {
     saving.value = true;
 
-    saving.value = true;
-
     const { data } = isUpdateMode.value
-      ? await apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
+      ? await singlePageUpdateMutate(formState.value)
-          {
-            name: formState.value.metadata.name,
-            singlePage: formState.value,
-          }
-        )
       : await apiClient.extension.singlePage.createcontentHaloRunV1alpha1SinglePage(
           {
             singlePage: formState.value,

src/modules/contents/posts/components/PostSettingModal.vue

@@ -17,6 +17,7 @@ import { toDatetimeLocal, toISOString } from "@/utils/date";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import { submitForm } from "@formkit/core";
 import useSlugify from "@/composables/use-slugify";
+import { useMutation } from "@tanstack/vue-query";
 
 const initialFormState: Post = {
   spec: {
@@ -114,6 +115,40 @@ const handlePublishClick = () => {
   });
 };
 
+// Fix me:
+// Force update post settings,
+// because currently there may be errors caused by changes in version due to asynchronous processing.
+const { mutateAsync: postUpdateMutate } = useMutation({
+  mutationKey: ["post-update"],
+  mutationFn: async (post: Post) => {
+    const { data: latestPost } =
+      await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
+        name: post.metadata.name,
+      });
+    return apiClient.extension.post.updatecontentHaloRunV1alpha1Post(
+      {
+        name: post.metadata.name,
+        post: {
+          ...latestPost,
+          spec: post.spec,
+          metadata: {
+            ...latestPost.metadata,
+            annotations: post.metadata.annotations,
+          },
+        },
+      },
+      {
+        mute: true,
+      }
+    );
+  },
+  retry: 3,
+  onError: (error) => {
+    console.error("Failed to update post", error);
+    Toast.error(`服务器内部错误`);
+  },
+});
+
 const handleSave = async () => {
   annotationsFormRef.value?.handleSubmit();
   await nextTick();
@@ -139,10 +174,7 @@ const handleSave = async () => {
     saving.value = true;
 
     const { data } = isUpdateMode.value
-      ? await apiClient.extension.post.updatecontentHaloRunV1alpha1Post({
+      ? await postUpdateMutate(formState.value)
-          name: formState.value.metadata.name,
-          post: formState.value,
-        })
       : await apiClient.extension.post.createcontentHaloRunV1alpha1Post({
           post: formState.value,
         });

src/modules/contents/posts/components/__tests__/PostSettingModal.spec.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import PostSettingModal from "../PostSettingModal.vue";
 import { createPinia, setActivePinia } from "pinia";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 
 describe("PostSettingModal", () => {
   beforeEach(() => {
@@ -9,12 +10,19 @@ describe("PostSettingModal", () => {
   });
 
   it("should render", () => {
-    const wrapper = mount({
+    const wrapper = mount(
-      components: {
+      {
-        PostSettingModal,
+        components: {
+          PostSettingModal,
+        },
+        template: `<PostSettingModal></PostSettingModal>`,
       },
-      template: `<PostSettingModal></PostSettingModal>`,
+      {
-    });
+        global: {
+          plugins: [VueQueryPlugin],
+        },
+      }
+    );
     expect(wrapper).toBeDefined();
   });
 });