From 4aa7de4e2d1773b19b5cb458ae8332f67dec239b Mon Sep 17 00:00:00 2001
From: CaiHaosen <“caihaosen@mail.bnu.edu.cn>
Date: Wed, 17 Jul 2024 21:17:13 +0800
Subject: [PATCH] feat:Add dynamic handling for pageRules using FormKit list

---
 ui/src/types/index.ts             |  2 +-
 ui/src/views/HtmlInjectionAdd.vue | 28 ++++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index d1774a92..2a9a720f 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -4,7 +4,7 @@ export interface HtmlInjectionSpec {
   description: string;
   fragment: string;
   injectionPoint: 'HEADER' | 'FOOTER';
-  pageRules: Set<String>;
+  pageRules: Set<string>;
   enabled: boolean;
 }
 
diff --git a/ui/src/views/HtmlInjectionAdd.vue b/ui/src/views/HtmlInjectionAdd.vue
index 4500d5fd..c2ddc1d0 100644
--- a/ui/src/views/HtmlInjectionAdd.vue
+++ b/ui/src/views/HtmlInjectionAdd.vue
@@ -30,7 +30,7 @@ const initialFormData = {
   description: '',
   fragment: '',
   injectionPoint: 'HEADER' as 'HEADER' | 'FOOTER',
-  pageRules: '',
+  pageRules: new Set<string>(),
   isEnabled: false,
 };
 
@@ -44,7 +44,7 @@ const updateFormData = (currentHtmlInjection: HtmlInjection | null) => {
       description: currentHtmlInjection.spec.description,
       fragment: currentHtmlInjection.spec.fragment,
       injectionPoint: currentHtmlInjection.spec.injectionPoint,
-      pageRules: Array.from(currentHtmlInjection.spec.pageRules).join(', '),
+      pageRules: currentHtmlInjection.spec.pageRules,
       isEnabled: currentHtmlInjection.spec.enabled,
     };
   }
@@ -76,12 +76,11 @@ const submitForm = () => {
       description: formData.value.description,
       fragment: formData.value.fragment,
       injectionPoint: formData.value.injectionPoint,
-      pageRules: new Set(formData.value.pageRules.split(',').map(page => page.trim())), // 转换为Set，符合HtmlInjection接口类型
+      pageRules: formData.value.pageRules, // 转换为Set，符合HtmlInjection接口类型
       enabled: formData.value.isEnabled,
     },
   };
-
-  console.log('Request Data:', requestData); 
+  
   
   const url = props.htmlInjection
     ? `/apis/theme.halo.run/v1alpha1/htmlinjections/${props.htmlInjection.metadata.name}`
@@ -177,13 +176,22 @@ const activeTab = ref("form");
               ]"
             />
             <FormKit
+              v-model="formData.pageRules"
               id="pageRules"
               name="pageRules"
-              :label="'匹配规则'"
-              type="text"
-              v-model="formData.pageRules"
-              :placeholder="'请输入要注入的路径'"
-            />
+              :label="'页面匹配规则'"
+              type="list"
+              item-type="string"
+              add-label="添加"
+            >
+              <template #default="{ index }">
+                <FormKit
+                  type="text"
+                  :index="index"
+                  help="用于匹配页面路径的正则表达式，如：/archives/**"
+                />
+              </template>
+            </FormKit>
             <FormKit
               id="isEnabled"
               name="isEnabled"