refactor: improve code base of post tag-related (#5959)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

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

优化文章标签的表单组件代码。

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

```release-note
None
```

ui/console-src/modules/contents/posts/tags/TagList.vue

@@ -27,7 +27,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
 const editingModal = ref(false);
-const selectedTag = ref<Tag | null>(null);
+const selectedTag = ref<Tag>();
 
 const selectedTagNames = ref<string[]>([]);
 const checkedAll = ref(false);
@@ -66,7 +66,7 @@ const {
   sort: selectedSort,
 });
 
-const handleOpenEditingModal = (tag: Tag | null) => {
+const handleOpenEditingModal = (tag?: Tag) => {
   selectedTag.value = tag;
   editingModal.value = true;
 };
@@ -132,8 +132,9 @@ const handleSelectNext = async () => {
 };
 
 const onEditingModalClose = () => {
-  selectedTag.value = null;
+  selectedTag.value = undefined;
   queryName.value = null;
+  editingModal.value = false;
   handleFetchTags();
 };
 
@@ -157,7 +158,7 @@ watch(selectedTagNames, (newVal) => {
 </script>
 <template>
   <TagEditingModal
-    v-model:visible="editingModal"
+    v-if="editingModal"
     :tag="selectedTag"
     @close="onEditingModalClose"
     @next="handleSelectNext"

ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue

@@ -19,27 +19,24 @@ import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Tag } from "@halo-dev/api-client";
 
 // libs
-import { cloneDeep } from "lodash-es";
-import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 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";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
+    tag?: Tag;
-    tag: Tag | null;
   }>(),
   {
-    visible: false,
+    tag: undefined,
-    tag: null,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
   (event: "previous"): void;
   (event: "next"): void;
@@ -47,7 +44,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const initialFormState: Tag = {
+const formState = ref<Tag>({
   spec: {
     displayName: "",
     slug: "",
@@ -60,14 +57,13 @@ const initialFormState: Tag = {
     name: "",
     generateName: "tag-",
   },
-};
+});
+
+const modal = ref();
 
-const formState = ref<Tag>(cloneDeep(initialFormState));
 const saving = ref(false);
 
-const isUpdateMode = computed(() => {
+const isUpdateMode = computed(() => !!props.tag);
-  return !!formState.value.metadata.creationTimestamp;
-});
 
 const modalTitle = computed(() => {
   return isUpdateMode.value
@@ -104,7 +100,8 @@ const handleSaveTag = async () => {
         tag: formState.value,
       });
     }
-    onVisibleChange(false);
+
+    modal.value.close();
 
     Toast.success(t("core.common.toast.save_success"));
   } catch (e) {
@@ -114,37 +111,19 @@ const handleSaveTag = async () => {
   }
 };
 
-const onVisibleChange = (visible: boolean) => {
+onMounted(() => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
-
-const handleResetForm = () => {
-  formState.value = cloneDeep(initialFormState);
-  reset("tag-form");
-};
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
   setFocus("displayNameInput");
-    } else {
+});
-      handleResetForm();
-    }
-  }
-);
 
 watch(
   () => props.tag,
   (tag) => {
     if (tag) {
-      formState.value = cloneDeep(tag);
+      formState.value = toRaw(tag);
-    } else {
-      handleResetForm();
     }
+  },
+  {
+    immediate: true,
   }
 );
 
@@ -164,12 +143,7 @@ const { handleGenerateSlug } = useSlugify(
 );
 </script>
 <template>
-  <VModal
+  <VModal ref="modal" :title="modalTitle" :width="700" @close="emit('close')">
-    :title="modalTitle"
-    :visible="visible"
-    :width="700"
-    @update:visible="onVisibleChange"
-  >
     <template #actions>
       <span @click="emit('previous')">
         <IconArrowLeft />
@@ -278,14 +252,13 @@ const { handleGenerateSlug } = useSlugify(
     <template #footer>
       <VSpace>
         <SubmitButton
-          v-if="visible"
           :loading="saving"
           type="secondary"
           :text="$t('core.common.buttons.submit')"
           @submit="$formkit.submit('tag-form')"
         >
         </SubmitButton>
-        <VButton @click="onVisibleChange(false)">
+        <VButton @click="modal.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>