feat(词库管理): 添加点击事件以创建新词库并获取词库列表

在词库管理页面中，新增了点击事件 `handleAddCategory`，允许用户通过弹窗输入词库名称并创建新词库。同时，添加了 `getList` 方法，用于在页面加载时获取词库列表数据，并在 `onMounted` 钩子中调用。这些改动提高了词库管理的交互性和数据实时性。

src/views/rules/words.vue

@@ -7,12 +7,12 @@
         <div class="grid grid-cols-8 gap-4">
           <div 
            
-            class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 hover:border-blue-500 shadow-sm relative group h-full">
+            class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 hover:border-blue-500 shadow-sm relative group h-full"
+            @click="handleAddCategory">
             <span 
               class="flex flex-col justify-center items-center flex-1 w-full cursor-pointer hover:text-blue-500">
               <el-icon class="text-2xl"><Plus /></el-icon>
             </span>
-          
           </div>
           <div 
             v-for="(item, index) in wordCategories" 
@@ -119,7 +119,9 @@
 </template>
 
 <script lang="ts" setup name="RuleWord">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { createPageData, getPageListData } from '@/api/main/system/system'
 
 const wordCategories = ref([
   { name: '敏感词', count: 12 },
@@ -188,4 +190,42 @@ const handleDelete = (index: number) => {
 const handleEdit = (index: number) => {
   console.log('编辑词库:', index)
 }
+
+const handleAddCategory = async () => {
+  try {
+    const { value } = await ElMessageBox.prompt('请输入词库名称', '新建词库', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputPattern: /^\S+$/,
+      inputErrorMessage: '词库名称不能为空'
+    })
+
+    if (!value.trim()) return;
+    const params = {
+      term: value.trim(),
+      type: 1,
+    };
+
+    const {state} = await createPageData('/quality/searchLexicon', params);
+    // 新增数据增加到词库列表第一个里面
+    if (state === 'success') wordCategories.value = [{ name: value.trim(), count: 0 }, ...wordCategories.value];
+    
+    
+  } catch (error) {
+    // 用户取消输入
+  }
+}
+
+const getList = () => {
+  getPageListData('/quality/searchLexicon', {page: 1, size: 10000}).then((res) => {
+    console.log(res);
+    if (res.state === 'success') {
+      wordCategories.value = res.data.map((item: any) => ({ name: item.term, count: item.count }));
+    }
+  });
+}
+
+onMounted(() => {
+  getList();
+})
 </script>