feat(Censor): 优化当敏感词列表数据过多时，页面渲染长时间等待的问题 (#212)

* feat(Censor): 优化当敏感词列表数据过多时，页面渲染长时间等待的问题 * chore: as linter
sealdice · Jun 10, 2024 · 72c288a · 72c288a
1 parent b4516a9
commit 72c288a
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 26 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     ElAffix: typeof import('element-plus/es')['ElAffix']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
+    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -63,6 +64,7 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "type": "module",
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vueuse/core": "^10.10.0",
     "asmcrypto.js": "^2.3.2",
     "axios": "^1.7.2",

diff --git a/src/components/mod/censor/CensorWords.vue b/src/components/mod/censor/CensorWords.vue
@@ -1,35 +1,73 @@
 <template>
-  <h4>敏感词列表</h4>
-  <!--  <header>-->
-  <!--    <el-button type="primary" :icon="Refresh" @click="refreshWords" plain>刷新列表</el-button>-->
-  <!--  </header>-->
+  <el-space class="flex justify-between" alignment="flex-end">
+    <h4>敏感词列表</h4>
+    <el-space>
+      <el-text v-if="filterCount > 0" size="small" type="info">已过滤 {{ filterCount }} 条</el-text>
+      <el-input v-model="filter" size="small" clearable/>
+    </el-space>
+  </el-space>
+
   <main style="margin-top: 1rem;">
-    <el-table table-layout="auto" :data="words" :default-sort="{ prop: 'level', order: 'ascending' }">
-      <el-table-column label="级别" width="80px">
-        <template #default="scope">
-          <el-tag v-if="scope.row.level === 1" type="info" size="small" disable-transitions>提醒</el-tag>
-          <el-tag v-else-if="scope.row.level === 2" size="small" disable-transitions>注意</el-tag>
-          <el-tag v-else-if="scope.row.level === 3" type="warning" size="small" disable-transitions>警告</el-tag>
-          <el-tag v-else-if="scope.row.level === 4" type="danger" size="small" disable-transitions>危险</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="匹配词汇">
-        <template #default="scope">
-          <el-space v-if="scope.row.related" wrap>
-            <el-text v-for="word of scope.row.related" :key="word.word">{{ word.word }}</el-text>
-          </el-space>
-          <el-space v-else>
-            <el-text>{{ scope.row.main }}</el-text>
-          </el-space>
+    <div class="w-full">
+      <el-auto-resizer>
+        <template #default="{ width }">
+          <el-table-v2 class="w-full" :width="width" :height="430"
+                       :columns="columns" :data="filteredWords">
+          </el-table-v2>
         </template>
-      </el-table-column>
-    </el-table>
+      </el-auto-resizer>
+    </div>
   </main>
 </template>
-<script setup lang="ts">
+<script setup lang="tsx">
 import {urlPrefix, useStore} from "~/store";
 import {backend} from "~/backend";
 import {useCensorStore} from "~/components/mod/censor/censor";
+import type {Column} from "element-plus";
+import type {CellRendererParams} from "element-plus/es/components/table-v2/src/types";
+import {template} from "lodash-es";
+
+const columns: Column<any>[] = [
+  {
+    key: "level",
+    title: "级别",
+    dataKey: 'level',
+    width: 60,
+    minWidth: 60,
+    align: "center",
+    cellRenderer: ({cellData: level}: CellRendererParams<number>) => {
+      switch (level) {
+        case 1:
+          return <el-tag type="info" size="small" disable-transitions>提醒</el-tag>
+        case 2:
+          return <el-tag size="small" disable-transitions>注意</el-tag>
+        case 3:
+          return <el-tag type="warning" size="small" disable-transitions>警告</el-tag>
+        case 4:
+          return <el-tag type="danger" size="small" disable-transitions>危险</el-tag>
+        default:
+          return <el-tag type="info" size="small" disable-transitions>未知</el-tag>
+      }
+    },
+  },
+  {
+    key: "related",
+    title: "匹配词汇",
+    dataKey: 'related',
+    width: 800,
+    cellRenderer: ({cellData: related, rowData}: CellRendererParams<SensitiveRelatedWord[]>) => {
+      if (related) {
+        return <el-space size="small" wrap>
+          {related.map(word => <el-text key={word.word}>{word.word}</el-text>)}
+        </el-space>
+      } else {
+        return <el-space>
+          <el-text>{rowData.main}</el-text>
+        </el-space>
+      }
+    },
+  },
+]
 
 onMounted(() => {
   refreshWords()
@@ -51,7 +89,17 @@ interface SensitiveWord {
   related: SensitiveRelatedWord[]
 }
 
-const words = ref<SensitiveWord[]>()
+const words = ref<SensitiveWord[]>([])
+const filter = ref<string>('')
+const filterCount = computed(() => words.value.length - filteredWords.value.length)
+const filteredWords = computed(() => words.value.filter(word => {
+  if (filter.value === '') {
+    return true
+  }
+  const val = filter.value.toLowerCase()
+  return word.main.toLowerCase().includes(val)
+      || word.related.map(w => w.word.toLowerCase().includes(val)).includes(true)
+}))
 
 censorStore.$subscribe(async (_, state) => {
   if (state.wordsNeedRefresh === true) {

diff --git a/tsconfig.json b/tsconfig.json
@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,8 @@
 import path from "path";
 import {defineConfig} from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import legacy from "@vitejs/plugin-legacy";
-
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from "unplugin-vue-components/vite";
 import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
@@ -31,6 +31,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    vueJsx(),
     AutoImport({
       include: [
         /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx