feat(规则管理): 新增词库管理页面和任务列表功能

- 新增 `words.vue` 页面，用于管理质检词库，支持词库分类、词条增删改查、批量导入等功能
- 在 `list.vue` 中新增任务列表功能，支持任务筛选、批量导出、批量删除等操作
- 添加相关 CSS 样式以支持新功能

src/assets/style.css

   right: 2rem;
 }
 
+.bottom-1 {
+  bottom: 0.25rem;
+}
+
 .-z-0 {
   z-index: 0;
 }
   margin: 0.5rem;
 }
 
+.m-1 {
+  margin: 0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   width: 220px;
 }
 
+.w-60 {
+  width: 15rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
   transition-duration: 150ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.hover\:border-blue-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-blue-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);

src/views/rules/list.vue

                 </div>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="更新信息" name="third">Role</el-tab-pane>
-            <el-tab-pane label="任务列表" name="fourth">Role</el-tab-pane>
+            <el-tab-pane label="更新信息" name="third">
+              <div class="p-4">
+                <el-timeline>
+                  <el-timeline-item v-for="(log, index) in operationLogs" :key="index" placement="top">
+                    <el-card>
+                      <div class="text-xs text-gray-500 mb-2">{{ log.operationTime }}</div>
+                      <div class="flex items-baseline">
+                        <h4 class="text-base font-bold mr-2">{{ log.operator }}</h4>
+                        <span>{{ log.operationContent }}</span>
+                      </div>
+
+                    </el-card>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="任务列表" name="fourth">
+              <div class="mb-4 px-4">
+                
+                <div class="flex items-center justify-between mb-2 cursor-pointer" @click="toggleFilterPanel">
+                  <h3 class="text-lg font-medium mb-4">任务列表</h3>
+                  <div class="flex items-center">
+                    <span class="mr-2 text-sm text-gray-500">{{ showFilterPanel ? '折叠筛选' : '展开筛选' }}</span>
+                    <el-icon :class="[showFilterPanel ? 'rotate-180' : '']">
+                      <ArrowDown />
+                    </el-icon>
+                  </div>
+                </div>
+                
+                <el-collapse-transition>
+                  <div v-show="showFilterPanel" class="space-y-4">
+                    <div class="grid grid-cols-4 gap-4">
+                      <el-input v-model="searchForm.callNumber" placeholder="外呼号码" />
+                      
+                      <el-select v-model="searchForm.fatalItem" placeholder="致命项">
+                        <el-option label="是" value="1" />
+                        <el-option label="否" value="0" />
+                      </el-select>
+                      <el-select v-model="searchForm.agentName" placeholder="坐席名称">
+                        <el-option v-for="item in agentOptions" :key="item.value" :label="item.label"
+                          :value="item.value" />
+                      </el-select>
+                      <el-select v-model="searchForm.scoreRange" placeholder="得分区间">
+                        <el-option label="60分以下" value="0-60" />
+                        <el-option label="60-70分" value="60-70" />
+                        <el-option label="70-80分" value="70-80" />
+                        <el-option label="80-90分" value="80-90" />
+                        <el-option label="90-100分" value="90-100" />
+                      </el-select>
+                      <el-select v-model="searchForm.result" placeholder="质检结果">
+                        <el-option label="合格" value="pass" />
+                        <el-option label="不合格" value="fail" />
+                      </el-select>
+                      <el-date-picker v-model="searchForm.callTime" type="daterange" range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" class="mr-4" style="margin-right: 1rem;"/>
+                    </div>
+
+                    <div class="flex justify-end gap-4">
+                      <el-button @click="resetSearch">重置</el-button>
+                      <el-button type="primary" @click="handleSearch">查询</el-button>
+                    </div>
+                  </div>
+                </el-collapse-transition>
+              </div>
+              <div class="flex items-center gap-4 mb-4">
+                  <el-button type="primary" @click="handleBatchExport">批量导出</el-button>
+                  <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
+                </div>
+              <el-table :data="taskList" stripe style="width: 100%" v-loading="loading">
+                <el-table-column type="selection" width="55" />
+                <el-table-column prop="id" label="质检 Id" fixed="left" width="120" />
+                <el-table-column prop="callNumber" label="外呼号码" width="120" />
+                <el-table-column prop="callDate" label="外呼日期" width="180" />
+                <el-table-column prop="fatalItem" label="致命项" width="100" />
+                <el-table-column prop="score" label="质检得分" width="100" />
+                <el-table-column prop="agentName" label="坐席名称" width="120" />
+                <el-table-column label="录音" width="80">
+                  <template #default>
+                    <el-icon class="cursor-pointer">
+                      <Headset />
+                    </el-icon>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="result" label="质检结果" width="120" />
+                <el-table-column prop="reviewTime" label="人工复检时间" width="180" />
+                <el-table-column prop="reviewNote" label="复检备注" />
+                <el-table-column prop="reviewResult" label="复检结果" width="120" />
+                <el-table-column label="操作" fixed="right" width="120">
+                  <template #default>
+                    <el-link type="primary" :underline="false" @click="handleView">查看</el-link>
+                  </template>
+                </el-table-column>
+              </el-table>
+
+              <div class="mt-4 flex justify-end ">
+                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
+                  layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange" />
+              </div>
+            </el-tab-pane>
           </el-tabs>
 
 
 import { Edit, Delete, Search, Plus, MoreFilled } from '@element-plus/icons-vue';
 import * as moment from 'moment';
 import * as echarts from 'echarts';
+import { ElMessage } from 'element-plus'
 
 const searchQuery = ref('');
 const selectedModel = ref(0);
 const currentPage = ref(1);
 const pageSize = 10;
+
+// 任务列表相关状态
+const loading = ref(false);
+const taskList = ref([
+  {
+    id: 'QC001',
+    callNumber: '13800138000',
+    callDate: '2023-05-15 10:30:22',
+    fatalItem: '否',
+    score: 85,
+    agentName: '坐席A',
+    result: '合格',
+    reviewTime: '2023-05-15 11:30:00',
+    reviewNote: '无异常',
+    reviewResult: '通过'
+  },
+  {
+    id: 'QC002',
+    callNumber: '13900139000',
+    callDate: '2023-05-16 14:20:15',
+    fatalItem: '是',
+    score: 55,
+    agentName: '坐席B',
+    result: '不合格',
+    reviewTime: '2023-05-16 15:30:00',
+    reviewNote: '发现致命项',
+    reviewResult: '不通过'
+  }
+]);
+const total = ref(0);
+const showFilterPanel = ref(false);
+const agentOptions = ref([
+  { label: '坐席A', value: 'agentA' },
+  { label: '坐席B', value: 'agentB' },
+  { label: '坐席C', value: 'agentC' }
+]);
+const searchForm = ref({
+  callNumber: '',
+  callTime: [],
+  fatalItem: '',
+  agentName: '',
+  scoreRange: [],
+  result: ''
+});
 const scoreChart: any = ref<HTMLElement | null>(null);
 const issuesChart: any = ref<HTMLElement | null>(null);
 
   effectiveDate: [],
   conditions: [],
 });
+
+const operationLogs = ref([
+  {
+    operator: '管理员',
+    operationTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
+    operationContent: '创建了新规则',
+    operationType: 'create'
+  },
+  {
+    operator: '测试用户',
+    operationTime: moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss'),
+    operationContent: '更新了规则条件',
+    operationType: 'update'
+  },
+  {
+    operator: '系统',
+    operationTime: moment().subtract(30, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
+    operationContent: '删除了无效规则',
+    operationType: 'delete'
+  }
+]);
 const selectModel = (index: number) => {
   selectedModel.value = index;
 };
   // 取消逻辑
 };
 
+const handleBatchExport = () => {
+  if (!taskList.value.length) {
+    ElMessage.warning('请选择要导出的数据');
+    return;
+  }
+  // 批量导出逻辑
+};
+
+const handleBatchDelete = () => {
+  if (!taskList.value.length) {
+    ElMessage.warning('请选择要删除的数据');
+    return;
+  }
+  // 批量删除逻辑
+};
+
 const getPageList = async () => {
   const params = {
     ruleName: searchQuery.value,
   }
 }
 
+// 获取任务列表
+const getTaskList = async () => {
+  loading.value = true;
+  try {
+    // const params = {
+    //   ...searchForm.value,
+    //   pageNum: currentPage.value,
+    //   pageSize: pageSize.value
+    // };
+    // const { data, total: totalCount } = await getPageListData(`/quality/tasks`, params);
+    // taskList.value = data;
+    // total.value = totalCount;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 查询
+const toggleFilterPanel = () => {
+  showFilterPanel.value = !showFilterPanel.value;
+};
+
+const handleSearch = () => {
+  currentPage.value = 1;
+  getTaskList();
+};
+
+// 重置
+const resetSearch = () => {
+  searchForm.value = {
+    callNumber: '',
+    callTime: [],
+    fatalItem: '',
+    agentName: '',
+    scoreRange: [],
+    result: ''
+  };
+  handleSearch();
+};
+
+// 分页变化
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  getTaskList();
+};
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  getTaskList();
+};
+
 const doScroll = () => {
   console.log('doScroll')
   const scrollwrapper: any = cardListRef.value
 
 onMounted(() => {
   // initChart();
-  getPageList()
+  getPageList();
+  getTaskList();
 })
 </script>
 <style scoped>

src/views/rules/words.vue

+<template>
+  <div class="app-container bg-gray-50 flex flex-col h-full">
+    <!-- 上部：质检词库 -->
+    <div class="flex-1 overflow-auto">
+      <div class="bg-white rounded-lg shadow p-4">
+        <h2 class="text-lg font-semibold mb-4">质检词库</h2>
+        <div class="grid grid-cols-8 gap-4">
+          <div 
+            v-for="(item, index) in wordCategories" 
+            :key="index" 
+            class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 hover:border-blue-500 shadow-sm relative group"
+          >
+            <span 
+              class="font-medium mb-2 cursor-pointer hover:text-blue-500"
+              @click="showWordDrawer(index)"
+            >
+              {{ item.name }}
+            </span>
+            <span class="text-gray-500 text-sm mb-2">{{ item.count }}条</span>
+            <div class="w-full flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute bottom-1 left-0 px-4">
+              <el-link 
+                type="danger" 
+                size="small"
+                @click="handleDelete(index)"
+                class="flex-1"
+              >
+                删除
+              </el-link>
+              <el-link 
+                type="warning" 
+                size="small"
+                @click="handleEdit(index)"
+                class="flex-1"
+              >
+                编辑
+              </el-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 下部：批量导入 -->
+    <div class="border-t mt-4">
+      <div class="bg-white rounded-lg shadow p-4">
+        <h2 class="text-lg font-semibold mb-4">批量导入</h2>
+        <div class="flex space-x-4">
+          <el-upload
+            action=""
+            :file-list="fileList"
+            :before-upload="beforeUpload"
+            class="flex-1"
+          >
+            <el-button type="primary"><el-icon><Upload /></el-icon>上传文件</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                <span v-if="fileList.length > 0">{{ fileList[0].name }}</span>
+              </div>
+            </template>
+          </el-upload>
+          <el-button @click="downloadTemplate"><el-icon><Download /></el-icon>下载模板</el-button>
+          <el-button type="success" @click="importWords"><el-icon><UploadFilled /></el-icon>导入词库</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 词条抽屉 -->
+    <el-drawer 
+      v-model="drawerVisible" 
+      title="词条列表" 
+      size="40%"
+    >
+      <div class="p-4">
+        <!-- <el-input 
+          v-model="searchQuery" 
+          placeholder="搜索词条" 
+          class="mb-4" 
+          @keyup.enter="filterWords"
+        /> -->
+        <div class="relative mb-4">
+            <input type="text" v-model="searchQuery" placeholder="搜索规则"
+              class="w-full pl-10 pr-4 py-2 text-sm border rounded-lg focus:outline-none focus:border-blue-500"
+              @keydown.enter="filterWords" />
+            <el-icon class="absolute left-3 top-2.5 text-gray-400" style="position: absolute;">
+              <Search />
+            </el-icon>
+          </div>
+        <div class="flex flex-wrap gap-2">
+          <el-tag 
+            class="m-1 cursor-pointer"
+            @click="addNewWord"
+          >
+            <el-icon><Plus /></el-icon> 添加
+          </el-tag>
+          <el-tag 
+            v-for="(word, idx) in filteredWords" 
+            :key="idx"
+            class="m-1"
+            closable
+            @close="removeWord(idx)"
+          >
+            {{ word }}
+          </el-tag>
+      </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup name="RuleWord">
+import { ref } from 'vue'
+
+const wordCategories = ref([
+  { name: '敏感词', count: 12 },
+  { name: '违禁词', count: 8 },
+  { name: '广告词', count: 5 },
+])
+
+const drawerVisible = ref(false)
+const currentWords = ref<string[]>([])
+const currentCategoryIndex = ref(0)
+const fileList = ref<File[]>([])
+const searchQuery = ref('')
+const filteredWords = ref<string[]>([])
+
+const filterWords = () => {
+  if (!searchQuery.value) {
+    filteredWords.value = [...currentWords.value]
+    return
+  }
+  filteredWords.value = currentWords.value.filter(word => 
+    word.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+}
+
+const addNewWord = () => {
+  const newWord = prompt('请输入新词条')
+  if (newWord) {
+    currentWords.value.push(newWord)
+    filterWords()
+  }
+}
+
+const removeWord = (index: number) => {
+  currentWords.value.splice(index, 1)
+  filterWords()
+}
+
+const showWordDrawer = (index: number) => {
+  currentCategoryIndex.value = index
+  // 模拟获取词条数据
+  currentWords.value = Array.from({ length: wordCategories.value[index].count }, (_, i) => 
+    `${wordCategories.value[index].name}-${i + 1}`
+  )
+  filteredWords.value = [...currentWords.value]
+  drawerVisible.value = true
+}
+
+const beforeUpload = (file: File) => {
+  console.log('上传文件:', file)
+  fileList.value = [file]
+  return false
+}
+
+const downloadTemplate = () => {
+  console.log('下载模板')
+}
+
+const importWords = () => {
+  console.log('导入词库')
+}
+
+const handleDelete = (index: number) => {
+  console.log('删除词库:', index)
+}
+
+const handleEdit = (index: number) => {
+  console.log('编辑词库:', index)
+}
+</script>