Pārlūkot izejas kodu

feat(规则词库): 添加新增词库按钮并优化删除和编辑按钮样式

在规则词库页面中,新增了一个用于添加词库的按钮,并优化了删除和编辑按钮的样式,使其包含图标以提高可读性和用户体验。
weieryang 8 mēneši atpakaļ
vecāks
revīzija
025627ad4b
1 mainītis faili ar 13 papildinājumiem un 2 dzēšanām
  1. 13 2
      src/views/rules/words.vue

+ 13 - 2
src/views/rules/words.vue

@@ -6,6 +6,15 @@
6 6
         <h2 class="text-lg font-semibold mb-4">质检词库</h2>
7 7
         <div class="grid grid-cols-8 gap-4">
8 8
           <div 
9
+           
10
+            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">
11
+            <span 
12
+              class="flex flex-col justify-center items-center flex-1 w-full cursor-pointer hover:text-blue-500">
13
+              <el-icon class="text-2xl"><Plus /></el-icon>
14
+            </span>
15
+          
16
+          </div>
17
+          <div 
9 18
             v-for="(item, index) in wordCategories" 
10 19
             :key="index" 
11 20
             class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 hover:border-blue-500 shadow-sm relative group"
@@ -22,16 +31,18 @@
22 31
                 type="danger" 
23 32
                 size="small"
24 33
                 @click="handleDelete(index)"
25
-                class="flex-1"
34
+                class="flex-1 flex items-center gap-1"
26 35
               >
36
+                <el-icon><Delete /></el-icon>
27 37
                 删除
28 38
               </el-link>
29 39
               <el-link 
30 40
                 type="warning" 
31 41
                 size="small"
32 42
                 @click="handleEdit(index)"
33
-                class="flex-1"
43
+                class="flex-1 flex items-center gap-1"
34 44
               >
45
+                <el-icon><Edit /></el-icon>
35 46
                 编辑
36 47
               </el-link>
37 48
             </div>