From a94ff700d2edc14aa244017925770f19cbb7a8be Mon Sep 17 00:00:00 2001
From: CaiHaosen <caihaosen@mail.bnu.edu.cn>
Date: Tue, 3 Sep 2024 15:45:41 +0800
Subject: [PATCH] Refactor HTML Injection Form Component (#12)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?
/kind improvement
#### What this PR does / why we need it:
原来的注入表单组件`HtmlInjectionAdd`把新增和更改的逻辑混在一起了，
该PR删除了该组件并拆分成`HtmlInjectionForm`,`HtmlInjectionCreationModal`和`HtmlInjectionEditionModal`分别用于渲染表单，新增注入和修改注入
#### Which issue(s) this PR fixes:
Fixes #7
#### Does this PR introduce a user-facing change?
```release-note
None
```
---
 ui/src/views/HtmlInjectionAdd.vue           | 154 --------------------
 ui/src/views/HtmlInjectionCreationModal.vue |  58 ++++++++
 ui/src/views/HtmlInjectionEditionModal.vue  |  52 +++++++
 ui/src/views/HtmlInjectionForm.vue          |  88 +++++++++++
 ui/src/views/HtmlInjectionList.vue          |  95 +++++++-----
 5 files changed, 254 insertions(+), 193 deletions(-)
 delete mode 100644 ui/src/views/HtmlInjectionAdd.vue
 create mode 100644 ui/src/views/HtmlInjectionCreationModal.vue
 create mode 100644 ui/src/views/HtmlInjectionEditionModal.vue
 create mode 100644 ui/src/views/HtmlInjectionForm.vue

diff --git a/ui/src/views/HtmlInjectionAdd.vue b/ui/src/views/HtmlInjectionAdd.vue
deleted file mode 100644
index 5462871f..00000000
--- a/ui/src/views/HtmlInjectionAdd.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import {
-  VButton,
-  VModal,
-  VSpace
-} from '@halo-dev/components';
-import type { HtmlInjection } from "@/types";
-import { cloneDeep } from 'lodash-es';
-import { axiosInstance } from "@halo-dev/api-client";
-
-// 接收 props
-const props = defineProps<{
-  /**
-   * 当前编辑的 HTML 注入对象，如果为空就是新增注入的逻辑，不为空就是修改选择的注入
-   * @type {HtmlInjection | null}
-   */
-  htmlInjection: HtmlInjection | null,
-}>();
-
-
-// 定义 emit 事件
-const emit = defineEmits(['close', 'submit']);
-
-// 初始化表单数据
-const initialFormData = {
-  name: '',
-  description: '',
-  fragment: '',
-  injectionPoint: 'HEADER' as 'HEADER' | 'FOOTER',
-  pageRules: [] as string[],
-  isEnabled: false,
-};
-
-const formData = ref(cloneDeep(initialFormData));
-
-// 更新表单数据
-const updateFormData = (currentHtmlInjection: HtmlInjection | null) => {
-  if (currentHtmlInjection) {
-    formData.value = {
-      name: currentHtmlInjection.spec.name,
-      description: currentHtmlInjection.spec.description,
-      fragment: currentHtmlInjection.spec.fragment,
-      injectionPoint: currentHtmlInjection.spec.injectionPoint,
-      pageRules: currentHtmlInjection.spec.pageRules,
-      isEnabled: currentHtmlInjection.spec.enabled,
-    };
-  }
-};
-
-// 监听 props.htmlInjection 的变化并相应更新 formData
-watch(
-  () => props.htmlInjection,
-  updateFormData,
-  { immediate: true }
-);
-
-// 关闭模态窗口
-const closeModal = () => {
-  emit('close');
-};
-
-// 提交表单
-const submitForm = () => {
-  const requestData: HtmlInjection= {
-    apiVersion: 'theme.halo.run/v1alpha1',
-    kind: 'HtmlInjection',
-    metadata: {
-      name: props.htmlInjection ? props.htmlInjection.metadata.name : '',
-      generateName: 'htmlinjection-', // 使用现有注入的名称
-    },
-    spec: {
-      name: formData.value.name,
-      description: formData.value.description,
-      fragment: formData.value.fragment,
-      injectionPoint: formData.value.injectionPoint,
-      pageRules: formData.value.pageRules, 
-      enabled: formData.value.isEnabled,
-    },
-  };
-  
-  
-  const url = props.htmlInjection
-    ? `/apis/theme.halo.run/v1alpha1/htmlinjections/${props.htmlInjection.metadata.name}`
-    : '/apis/theme.halo.run/v1alpha1/htmlinjections';
-  const method = props.htmlInjection ? 'put' : 'post';
-  const data = method === 'put' ? { ...props.htmlInjection, spec: requestData.spec } : requestData;
-  axiosInstance({
-    method,
-    url,
-    data
-  })
-    .then(() => {
-      emit('submit', formData.value);
-      closeModal();
-    })
-    .catch((error) => {
-      console.error('Error creating or updating html injection:', error);
-    });
-};
-
-</script>
-
-<template>
-  <VModal
-    :title="props.htmlInjection ? '修改注入' : '新增注入'"
-    :width="700"
-    @close="closeModal()"
-  >
-    <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
-      <FormKit
-        type="form"
-        id="html-injection-form"
-        name="html-injection-form"
-        v-model="formData"
-        @submit="submitForm"
-        :config="{ validationVisibility: 'submit' }"
-        :actions="false"
-      >
-            <FormKit id="name" name="name" :label="'名称'" type="text" validation="required|length:1,100" :placeholder="'请输入名称'"/>
-            <FormKit id="description" name="description" :label="'代码描述'" type="textarea" validation="length:0,500" :placeholder="'请输入代码描述'"/>
-            <FormKit id="injectionPoint" name="injectionPoint" :label="'注入点'" type="select"
-              :options="[
-                { value: 'HEADER', label: 'Header' },
-                { value: 'FOOTER', label: 'Footer' }
-              ]"
-            />
-            <FormKit id="pageRules" name="pageRules" :label="'页面匹配规则'" validation="required" type="list" item-type="string" add-label="添加">
-              <template #default="{ index }">
-                <FormKit type="text" :index="index" help="用于匹配页面路径的符合 Ant-style 的表达式，如：/archives/**"/>
-              </template>
-            </FormKit>
-            <FormKit id="isEnabled" name="isEnabled" :label="'启用'" type="checkbox"/>
-            <FormKit  id="fragment" name="fragment" :label="'代码'" type="code" :language="'html'" :height="'200px'"/>
-      </FormKit>
-    </div>
-
-    <template #footer>
-      <VSpace>
-        <!-- @vue-ignore -->
-        <VButton type="secondary" @click="$formkit.submit('html-injection-form')">
-          提交
-        </VButton>
-        <VButton @click="closeModal">
-          取消
-        </VButton>
-      </VSpace>
-    </template>
-  </VModal>
-</template>
-
-<style>
-@import "@halo-dev/components/dist/style.css";
-</style>
diff --git a/ui/src/views/HtmlInjectionCreationModal.vue b/ui/src/views/HtmlInjectionCreationModal.vue
new file mode 100644
index 00000000..ca0a306b
--- /dev/null
+++ b/ui/src/views/HtmlInjectionCreationModal.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import HtmlInjectionForm from './HtmlInjectionForm.vue';
+import {axiosInstance} from "@halo-dev/api-client";
+import {VButton, VModal, VSpace} from '@halo-dev/components';
+import type {HtmlInjection, HtmlInjectionSpec} from "@/types";
+
+const props = defineProps<{
+  htmlInjection: HtmlInjection | null;
+}>();
+
+const emit = defineEmits(['close', 'success']);
+
+function closeModal() {
+  emit('close');
+}
+
+function handleFormSubmit(formData: HtmlInjectionSpec) {
+  const requestData: HtmlInjection = {
+    apiVersion: 'theme.halo.run/v1alpha1',
+    kind: 'HtmlInjection',
+    metadata: {
+      name: '',
+      generateName: 'htmlinjection-',
+    },
+    spec: formData,
+  };
+  axiosInstance.post('/apis/theme.halo.run/v1alpha1/htmlinjections', requestData)
+      .then(() => {
+        emit('success');
+        closeModal();
+      })
+      .catch(error => {
+        console.error('Error creating html injection:', error);
+      });
+}
+</script>
+
+<template>
+  <VModal
+      :title="'新增代码注入'"
+      :width="700"
+      @close="closeModal"
+  >
+    <HtmlInjectionForm
+        :htmlInjection="props.htmlInjection"
+        @submit="handleFormSubmit"/>
+    <template #footer>
+      <VSpace>
+        <!-- @vue-ignore -->
+        <VButton type="secondary" @click="$formkit.submit('html-injection-form')">保存</VButton>
+        <VButton @click="closeModal">取消</VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>
+<style>
+@import "@halo-dev/components/dist/style.css";
+</style>
diff --git a/ui/src/views/HtmlInjectionEditionModal.vue b/ui/src/views/HtmlInjectionEditionModal.vue
new file mode 100644
index 00000000..f257fd5b
--- /dev/null
+++ b/ui/src/views/HtmlInjectionEditionModal.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import HtmlInjectionForm from './HtmlInjectionForm.vue';
+import {axiosInstance} from "@halo-dev/api-client";
+import {VButton, VModal, VSpace} from '@halo-dev/components';
+import type {HtmlInjection, HtmlInjectionSpec} from "@/types";
+
+
+const props = defineProps<{
+  htmlInjection: HtmlInjection | null;
+}>();
+
+const emit = defineEmits(['close', 'success']);
+
+function closeModal() {
+  emit('close');
+}
+
+function handleFormSubmit(formData: HtmlInjectionSpec) {
+  const htmlInjection = props.htmlInjection as HtmlInjection;
+  const requestData: HtmlInjection = {...htmlInjection, spec: formData};
+  axiosInstance.put(`/apis/theme.halo.run/v1alpha1/htmlinjections/${htmlInjection.metadata?.name}`, requestData)
+    .then(() => {
+      emit('success');
+      closeModal();
+    })
+    .catch(error => {
+      console.error('Error updating html injection:', error);
+    });
+}
+</script>
+
+<template>
+  <VModal
+    :title="'编辑代码注入'"
+    :width="700"
+    @close="closeModal"
+  >
+    <HtmlInjectionForm
+      :htmlInjection="props.htmlInjection"
+      @submit="handleFormSubmit"/>
+    <template #footer>
+      <VSpace>
+        <!-- @vue-ignore -->
+        <VButton type="secondary" @click="$formkit.submit('html-injection-form')">保存</VButton>
+        <VButton @click="closeModal">取消</VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>
+<style>
+@import "@halo-dev/components/dist/style.css";
+</style>
diff --git a/ui/src/views/HtmlInjectionForm.vue b/ui/src/views/HtmlInjectionForm.vue
new file mode 100644
index 00000000..ded8ffc6
--- /dev/null
+++ b/ui/src/views/HtmlInjectionForm.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import {ref, watch} from 'vue';
+import type {HtmlInjection, HtmlInjectionSpec} from "@/types";
+import {cloneDeep} from "lodash-es";
+
+const props = defineProps<{
+  htmlInjection: HtmlInjection | null;
+}>();
+
+const emit = defineEmits<{
+  (event: "submit", data: HtmlInjectionSpec): void;
+}>();
+
+// 初始化表单数据
+const initialFormData = {
+  name: '',
+  description: '',
+  fragment: '',
+  injectionPoint: 'HEADER' as 'HEADER' | 'FOOTER',
+  pageRules: [] as string[],
+  enabled: false,
+};
+
+const formData = ref(cloneDeep(initialFormData));
+
+// 更新表单数据
+const updateFormData = (currentHtmlInjection: HtmlInjection | null) => {
+  if (currentHtmlInjection) {
+    formData.value = {
+      name: currentHtmlInjection.spec.name,
+      description: currentHtmlInjection.spec.description,
+      fragment: currentHtmlInjection.spec.fragment,
+      injectionPoint: currentHtmlInjection.spec.injectionPoint,
+      pageRules: currentHtmlInjection.spec.pageRules,
+      enabled: currentHtmlInjection.spec.enabled,
+    };
+  }
+};
+
+// 监听 props.htmlInjection 的变化并相应更新 formData
+watch(
+  () => props.htmlInjection,
+  updateFormData,
+  {immediate: true}
+);
+
+// 提交表单
+function onSubmit(formData: HtmlInjectionSpec) {
+  // 触发 submit 事件并传递表单数据
+  emit('submit', formData);
+}
+</script>
+
+<template>
+  <FormKit
+    type="form"
+    id="html-injection-form"
+    name="html-injection-form"
+    v-model="formData"
+    :config="{ validationVisibility: 'submit'}"
+    :actions="false"
+    @submit="onSubmit"
+  >
+    <FormKit id="name" name="name" v-model="formData.name" :label="'名称'" type="text"
+             validation="required|length:1,100" :placeholder="'请输入名称'"/>
+    <FormKit id="description" name="description" v-model="formData.description" :label="'代码描述'" type="textarea"
+             validation="length:0,500" :placeholder="'请输入代码描述'"/>
+    <FormKit id="injectionPoint" name="injectionPoint" v-model="formData.injectionPoint" :label="'注入点'" type="select"
+             :options="[
+        { value: 'HEADER', label: 'Header' },
+        { value: 'FOOTER', label: 'Footer' }
+      ]"
+    />
+    <FormKit id="pageRules" name="pageRules" v-model="formData.pageRules" :label="'页面匹配规则'" validation="required"
+             type="list" item-type="string" add-label="添加">
+      <template #default="{ index }">
+        <FormKit type="text" :index="index" help="用于匹配页面路径的符合 Ant-style 的表达式，如：/archives/**"/>
+      </template>
+    </FormKit>
+    <FormKit id="enabled" name="enabled" v-model="formData.enabled" :label="'启用'" type="checkbox"/>
+    <FormKit id="fragment" name="fragment" v-model="formData.fragment" :label="'代码'" type="code" :language="'html'"
+             :height="'200px'"/>
+  </FormKit>
+</template>
+
+<style>
+@import "@halo-dev/components/dist/style.css";
+</style>
diff --git a/ui/src/views/HtmlInjectionList.vue b/ui/src/views/HtmlInjectionList.vue
index 8687556a..bdf9c8d4 100644
--- a/ui/src/views/HtmlInjectionList.vue
+++ b/ui/src/views/HtmlInjectionList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import {ref, computed, onMounted} from 'vue';
 import {
   VCard,
   VPageHeader,
@@ -12,10 +12,11 @@ import {
   Dialog,
 } from '@halo-dev/components';
 import Fuse from "fuse.js";
-import type { HtmlInjection, HtmlInjectionList } from "@/types";
-import HtmlInjectionAdd from "@/views/HtmlInjectionAdd.vue";
-import { axiosInstance } from "@halo-dev/api-client";
-import { formatDatetime } from "@/utils/dateUtil";
+import type {HtmlInjection, HtmlInjectionList} from "@/types";
+import HtmlInjectionEditionModal from "@/views/HtmlInjectionEditionModal.vue";
+import HtmlInjectionCreationModal from "@/views/HtmlInjectionCreationModal.vue";
+import {axiosInstance} from "@halo-dev/api-client";
+import {formatDatetime} from "@/utils/dateUtil";
 
 
 // 变量定义
@@ -33,39 +34,49 @@ const htmlInjections = ref<HtmlInjectionList>({
 });
 const currentHtmlInjection = ref<HtmlInjection | null>(null);
 const keyword = ref("");
-const isModalVisible = ref(false);
+const isEditionModalVisible = ref(false);
+const isCreationModalVisible = ref(false);
 const activeTab = ref("All");
 
 // 函数定义
 // 获取代码注入列表
 const fetchHtmlInjections = async () => {
   const response = await axiosInstance.get<HtmlInjectionList>("/apis/theme.halo.run/v1alpha1/htmlinjections");
-  htmlInjections.value = response.data;
+  htmlInjections.value = response.data as HtmlInjectionList;
   fuse.value = new Fuse(response.data.items, {
     keys: ['spec.name', 'spec.description'],
     threshold: 0.3,
   });
-  //console.log('fetch data:', response.data);
-
 };
 
 // 打开模态窗口
-const openModal = () => {
+const openCreationModal = () => {
   currentHtmlInjection.value = null;  // 创建新注入时清空 currentHtmlInjection
-  isModalVisible.value = true;
+  isCreationModalVisible.value = true;
+};
+const openEditionModal = () => {
+  isEditionModalVisible.value = true;
 };
 
 // 关闭模态窗口
-const closeModal = () => {
-  isModalVisible.value = false;
-};
+function closeCreationModal() {
+  isCreationModalVisible.value = false;
+}
+
+function closeEditionModal() {
+  isEditionModalVisible.value = false;
+}
 
-// 表单提交
-const handleFormSubmit = () => {
+// 更新成功
+const onUpdateHtmlInjectionSuccess = () => {
   fetchHtmlInjections();
-  closeModal();
+  closeEditionModal();
+};
+// 新增成功
+const onCreateHtmlInjectionSuccess = () => {
+  fetchHtmlInjections();
+  closeCreationModal();
 };
-
 // 跳转到注入详情页面
 const detailHtmlInjection = (htmlInjection: HtmlInjection) => {
   console.log('TODO-跳转到详情页面');
@@ -74,7 +85,7 @@ const detailHtmlInjection = (htmlInjection: HtmlInjection) => {
 // 编辑代码注入
 const editHtmlInjection = (htmlInjection: HtmlInjection) => {
   currentHtmlInjection.value = htmlInjection;
-  isModalVisible.value = true;
+  openEditionModal();
 };
 
 // 删除代码注入
@@ -116,7 +127,7 @@ const handleToggle = (htmlInjection: HtmlInjection) => {
 const filteredHtmlInjections = computed(() => {
   let results = htmlInjections.value.items;
   if (keyword.value && fuse.value) {
-    results = fuse.value.search(keyword.value).map(result => result.item);
+    results = fuse.value.search(keyword.value).map(result => result.item as HtmlInjection);
   }
   if (activeTab.value === "Enabled") {
     return results.filter(htmlInjection => htmlInjection.spec.enabled);
@@ -142,9 +153,9 @@ onMounted(fetchHtmlInjections);
     <!-- 页面标题 -->
     <VPageHeader :title="'代码注入管理'">
       <template #actions>
-        <VButton type="secondary" @click="openModal">
+        <VButton type="secondary" @click="openCreationModal">
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle class="h-full w-full"/>
           </template>
           新增注入
         </VButton>
@@ -155,15 +166,15 @@ onMounted(fetchHtmlInjections);
       <VCard :body-class="['!p-0']">
         <!-- 头部包含搜索和标签 -->
         <template #header>
-            <div class="block w-full bg-gray-50 px-4 py-3">
-              <div class="relative flex flex-col items-start sm:flex-row sm:items-center">
-                <div class="flex w-full flex-1 sm:w-auto">
-                  <SearchInput v-model="keyword" placeholder="请输入关键字" />
-                </div>
-                <FilterDropdown
-                  v-model="activeTab"
-                  :label="'状态'"
-                  :items="[
+          <div class="block w-full bg-gray-50 px-4 py-3">
+            <div class="relative flex flex-col items-start sm:flex-row sm:items-center">
+              <div class="flex w-full flex-1 sm:w-auto">
+                <SearchInput v-model="keyword" placeholder="请输入关键字"/>
+              </div>
+              <FilterDropdown
+                v-model="activeTab"
+                :label="'状态'"
+                :items="[
                     {
                       label: '全部',
                        value: 'All',
@@ -177,9 +188,9 @@ onMounted(fetchHtmlInjections);
                       value: 'Disabled',
                     },
                   ]"
-                />
-              </div>
+              />
             </div>
+          </div>
         </template>
 
         <!-- 代码注入列表 -->
@@ -230,13 +241,19 @@ onMounted(fetchHtmlInjections);
         </template>
       </VCard>
     </div>
-
-    <!-- 添加/编辑代码注入的模态窗口 -->
-    <HtmlInjectionAdd
+    <!-- 新增注入的模态窗口 -->
+    <HtmlInjectionCreationModal
+      v-if="isCreationModalVisible"
+      :htmlInjection="currentHtmlInjection"
+      @close="closeCreationModal"
+      @success="onCreateHtmlInjectionSuccess"
+    />
+    <!-- 编辑注入的模态窗口 -->
+    <HtmlInjectionEditionModal
+      v-if="isEditionModalVisible"
       :htmlInjection="currentHtmlInjection"
-      v-if="isModalVisible"
-      @close="closeModal"
-      @submit="handleFormSubmit"
+      @close="closeEditionModal"
+      @success="onUpdateHtmlInjectionSuccess"
     />
   </div>
 </template>