fix: unable to manually fill in the publish time (#5472)

#### 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
解决文章设置及页面设置中无法手动填写发布日期的问题
```

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),

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