From 56b4e174137d66b99106927764a2f8e731407878 Mon Sep 17 00:00:00 2001
From: CaiHaosen <“caihaosen@mail.bnu.edu.cn>
Date: Wed, 17 Jul 2024 21:54:57 +0800
Subject: [PATCH] feat: Replace VButtons with dropdown for filtering

---
 ui/src/views/HtmlInjectionAdd.vue  |  2 +-
 ui/src/views/HtmlInjectionList.vue | 23 ++++++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ui/src/views/HtmlInjectionAdd.vue b/ui/src/views/HtmlInjectionAdd.vue
index c2ddc1d0..74674e5d 100644
--- a/ui/src/views/HtmlInjectionAdd.vue
+++ b/ui/src/views/HtmlInjectionAdd.vue
@@ -76,7 +76,7 @@ const submitForm = () => {
       description: formData.value.description,
       fragment: formData.value.fragment,
       injectionPoint: formData.value.injectionPoint,
-      pageRules: formData.value.pageRules, // 转换为Set，符合HtmlInjection接口类型
+      pageRules: formData.value.pageRules, 
       enabled: formData.value.isEnabled,
     },
   };
diff --git a/ui/src/views/HtmlInjectionList.vue b/ui/src/views/HtmlInjectionList.vue
index baa02b10..59ac7254 100644
--- a/ui/src/views/HtmlInjectionList.vue
+++ b/ui/src/views/HtmlInjectionList.vue
@@ -160,11 +160,24 @@ onMounted(fetchHtmlInjections);
                 <div class="flex w-full flex-1 sm:w-auto">
                   <SearchInput v-model="keyword" placeholder="请输入关键字" />
                 </div>
-                <div>
-                  <VButton :class="{ active: activeTab === 'All' }" @click="activeTab = 'All'">全部</VButton>
-                  <VButton :class="{ active: activeTab === 'Enabled' }" @click="activeTab = 'Enabled'">启用</VButton>
-                  <VButton :class="{ active: activeTab === 'Disabled' }" @click="activeTab = 'Disabled'">禁用</VButton>
-                </div>
+                <FilterDropdown
+                  v-model="activeTab"
+                  :label="'状态'"
+                  :items="[
+                    {
+                      label: '全部',
+                       value: 'All',
+                    },
+                    {
+                      label: '已启用',
+                      value: 'Enabled',
+                    },
+                    {
+                      label: '未启用',
+                      value: 'Disabled',
+                    },
+                  ]"
+                />
               </div>
             </div>
         </template>