From d675c4a8b11f16f2a5e70d69944a582359e71fb9 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 27 May 2024 16:22:57 +0800
Subject: [PATCH] fix: update initial values when form data changes (#5993)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.16.x

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

修复部分表单数据更新时，引用的初始值对象被跟着更新的问题。

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../posts/categories/components/CategoryEditingModal.vue     | 5 +++--
 .../contents/posts/tags/components/TagEditingModal.vue       | 4 ++--
 .../modules/interface/menus/components/MenuEditingModal.vue  | 5 +++--
 .../interface/menus/components/MenuItemEditingModal.vue      | 5 +++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index ad230bf10..e81a0c47d 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { computed, nextTick, onMounted, ref, toRaw } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 
 // components
@@ -24,6 +24,7 @@ import useSlugify from "@console/composables/use-slugify";
 import { useI18n } from "vue-i18n";
 import { FormType } from "@/types/slug";
 import { useQueryClient } from "@tanstack/vue-query";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -151,7 +152,7 @@ const handleSaveCategory = async () => {
 
 onMounted(() => {
   if (props.category) {
-    formState.value = toRaw(props.category);
+    formState.value = cloneDeep(props.category);
   }
   selectedParentCategory.value = props.parentCategory?.metadata.name;
   setFocus("displayNameInput");
diff --git a/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue b/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
index ba793cdd0..f43dec8e6 100644
--- a/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -25,7 +25,7 @@ import useSlugify from "@console/composables/use-slugify";
 import { useI18n } from "vue-i18n";
 import { FormType } from "@/types/slug";
 import { onMounted } from "vue";
-import { toRaw } from "vue";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -119,7 +119,7 @@ watch(
   () => props.tag,
   (tag) => {
     if (tag) {
-      formState.value = toRaw(tag);
+      formState.value = cloneDeep(tag);
     }
   },
   {
diff --git a/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue b/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
index 3270c75ec..328e613b0 100644
--- a/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
@@ -2,11 +2,12 @@
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Menu } from "@halo-dev/api-client";
-import { onMounted, ref, toRaw } from "vue";
+import { onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { setFocus } from "@/formkit/utils/focus";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -75,7 +76,7 @@ const handleSaveMenu = async () => {
 
 onMounted(() => {
   if (props.menu) {
-    formState.value = toRaw(props.menu);
+    formState.value = cloneDeep(props.menu);
   }
   setFocus("menuDisplayNameInput");
 });
diff --git a/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue b/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
index ec3c7cb24..22206f768 100644
--- a/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
-import { computed, nextTick, onMounted, ref, toRaw } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import type { Menu, MenuItem, Ref } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { setFocus } from "@/formkit/utils/focus";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import { useI18n } from "vue-i18n";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(
   defineProps<{
@@ -208,7 +209,7 @@ const onMenuItemSourceChange = () => {
 
 onMounted(() => {
   if (props.menuItem) {
-    formState.value = toRaw(props.menuItem);
+    formState.value = cloneDeep(props.menuItem);
 
     // Set Ref related
     const { targetRef } = formState.value.spec;