From 69c080a268b7ee2d80e774d2e7438f4c37c70d09 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 14 Mar 2024 13:04:07 +0800
Subject: [PATCH] fix: unable to manually fill in the publish time (#5472)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area ui
/milestone 2.14.x

#### What this PR does / why we need it:

解决文章、页面中无法手动填写发布日期的问题

#### How to test it?

测试文章设置与页面设置中的发布日期是否能够使用键盘填写。

需要同步测试其他设置项是否正常。

#### Which issue(s) this PR fixes:

Fixes #5389

#### Does this PR introduce a user-facing change?
```release-note
解决文章设置及页面设置中无法手动填写发布日期的问题
```
---
 .../components/SinglePageSettingModal.vue     | 33 ++++++++++---------
 .../posts/components/PostSettingModal.vue     | 33 ++++++++++---------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
index 972162b6f..0065ccfef 100644
--- a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -6,7 +6,7 @@ import {
   VModal,
   VSpace,
 } from "@halo-dev/components";
-import { computed, nextTick, ref, watchEffect } from "vue";
+import { computed, nextTick, ref, toRaw, watch } from "vue";
 import type { SinglePage } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
 import { apiClient } from "@/utils/api-client";
@@ -76,6 +76,7 @@ const saving = ref(false);
 const publishing = ref(false);
 const publishCanceling = ref(false);
 const submitType = ref<"publish" | "save">();
+const publishTime = ref<string | undefined>(undefined);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.metadata.creationTimestamp;
@@ -247,26 +248,26 @@ const handleUnpublish = async () => {
   }
 };
 
-watchEffect(() => {
-  if (props.singlePage) {
-    formState.value = cloneDeep(props.singlePage);
+watch(
+  () => props.singlePage,
+  (value) => {
+    if (value) {
+      formState.value = toRaw(value);
+      publishTime.value = toDatetimeLocal(formState.value.spec.publishTime);
+    }
   }
-});
+);
+
+watch(
+  () => publishTime.value,
+  (value) => {
+    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
+  }
+);
 
 // custom templates
 const { templates } = useThemeCustomTemplates("page");
 
-// publishTime
-const publishTime = computed({
-  get() {
-    const { publishTime } = formState.value.spec;
-    return publishTime ? toDatetimeLocal(publishTime) : undefined;
-  },
-  set(value) {
-    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
-  },
-});
-
 // slug
 const { handleGenerateSlug } = useSlugify(
   computed(() => formState.value.spec.title),
diff --git a/ui/console-src/modules/contents/posts/components/PostSettingModal.vue b/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
index e64985e1b..82c8d6c83 100644
--- a/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
+++ b/ui/console-src/modules/contents/posts/components/PostSettingModal.vue
@@ -6,7 +6,7 @@ import {
   VModal,
   VSpace,
 } from "@halo-dev/components";
-import { computed, nextTick, ref, watchEffect } from "vue";
+import { computed, nextTick, ref, toRaw, watch } from "vue";
 import type { Post } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
 import { apiClient } from "@/utils/api-client";
@@ -78,6 +78,7 @@ const saving = ref(false);
 const publishing = ref(false);
 const publishCanceling = ref(false);
 const submitType = ref<"publish" | "save">();
+const publishTime = ref<string | undefined>(undefined);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.metadata.creationTimestamp;
@@ -208,26 +209,26 @@ const handleUnpublish = async () => {
   }
 };
 
-watchEffect(() => {
-  if (props.post) {
-    formState.value = cloneDeep(props.post);
+watch(
+  () => props.post,
+  (value) => {
+    if (value) {
+      formState.value = toRaw(value);
+      publishTime.value = toDatetimeLocal(formState.value.spec.publishTime);
+    }
   }
-});
+);
+
+watch(
+  () => publishTime.value,
+  (value) => {
+    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
+  }
+);
 
 // custom templates
 const { templates } = useThemeCustomTemplates("post");
 
-// publishTime convert
-const publishTime = computed({
-  get() {
-    const { publishTime } = formState.value.spec;
-    return publishTime ? toDatetimeLocal(publishTime) : undefined;
-  },
-  set(value) {
-    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
-  },
-});
-
 const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
 
 // slug