feat: 添加敏感词过滤功能示例

locales/en.yaml

@@ -100,6 +100,7 @@ menus:
   hsPdf: PDF Preview
   hsExecl: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
+  hsSensitive: Sensitive Filter
   hsdanmaku: Danmaku Components
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage

locales/zh-CN.yaml

@@ -100,6 +100,7 @@ menus:
   hsPdf: PDF预览
   hsExecl: 导出Excel
   hsInfiniteScroll: 表格无限滚动
+  hsSensitive: 敏感词过滤
   hsdanmaku: 弹幕组件
   hsPureTableBase: 基础用法（23个示例）
   hsPureTableHigh: 高级用法（11个示例）

package.json

@@ -52,6 +52,7 @@
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.5",
     "md-editor-v3": "2.7.2",
+    "mint-filter": "^4.0.3",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",

pnpm-lock.yaml

@@ -53,6 +53,7 @@ specifiers:
   jsbarcode: ^3.11.5
   lint-staged: ^13.2.2
   md-editor-v3: 2.7.2
+  mint-filter: ^4.0.3
   mitt: ^3.0.0
   mockjs: ^1.1.0
   nprogress: ^0.2.0
@@ -138,6 +139,7 @@ dependencies:
   js-cookie: 3.0.5
   jsbarcode: 3.11.5
   md-editor-v3: 2.7.2
+  mint-filter: 4.0.3
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
@@ -8315,6 +8317,13 @@ packages:
     dev: false
     optional: true
 
+  /mint-filter/4.0.3:
+    resolution:
+      {
+        integrity: sha512-CKh2zKv9oFHEmYCXFk5REG2480FBNYixK+hw0mlRd/TgDJVhPpRhHPNhWa3Q6zF1tpE2q7w7y+Ylu1YJusXDpA==
+      }
+    dev: false
+
   /mitt/2.1.0:
     resolution:
       {

src/router/modules/able.ts

@@ -146,6 +146,15 @@ export default {
       meta: {
         title: $t("menus.hsInfiniteScroll")
       }
+    },
+    {
+      path: "/able/sensitive",
+      name: "Sensitive",
+      component: () => import("@/views/able/sensitive.vue"),
+      meta: {
+        title: $t("menus.hsSensitive"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
     }
   ]
 } as RouteConfigsTable;

src/views/able/sensitive.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Mint from "mint-filter";
+
+defineOptions({
+  name: "Sensitive"
+});
+
+// 自定义敏感词字典
+const words = ["脑残", "废物", "白痴", "三八", "智障"];
+
+const modelValue = ref();
+const mint = new Mint(words);
+
+function onInput() {
+  modelValue.value = mint.filter(modelValue.value).text;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">敏感词过滤</span>
+      </div>
+    </template>
+    <div class="flex flex-wrap gap-2 my-2">
+      <span>自定义敏感词</span>
+      <el-tag
+        v-for="(word, index) in words"
+        :key="index"
+        type="danger"
+        class="mx-1"
+        effect="dark"
+        round
+      >
+        {{ word }}
+      </el-tag>
+    </div>
+    <el-input v-model="modelValue" @input="onInput" />
+    <p class="mt-2">{{ modelValue }}</p>
+  </el-card>
+</template>