feat: 敏感词管理页面（脱敏词后台化，限 lqq 账号）

- 后端 /api/sensitive-words：全局共享词表，开放读、admin 或 lqq 整体替换写 - 前端 desensitize 种子化：SEED_DESENSITIZE_MAP + 运行时 replaceDesensitizeMap - 启动加载后台配置回灌脱敏映射；管理页支持增删改启停 + 一键导入种子词 - 入口置于左下角设置下拉（全量/简洁两种侧边栏均有），仅用户名 lqq 可见 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-17 18:05:07 +08:00
1 parent 39d7dab3e2
commit 25e4e3dbc9
@@ -0,0 +1,273 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Navigate } from "react-router-dom";
+import { Download, Info, Plus, Save, Search, ShieldAlert, Sparkles, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Switch } from "@/components/ui/switch";
+import { getAccountDisplayName } from "@/core/auth";
+import { SEED_DESENSITIZE_MAP } from "@/lib/desensitize";
+import {
+  type SensitiveWord,
+  useSensitiveWordActions,
+  useSensitiveWords,
+} from "@/strategy-components/api/sensitive-words";
+
+interface EditRow {
+  /** 稳定的行 key（编辑原始词时不丢焦点） */
+  key: number;
+  word: string;
+  replacement: string;
+  enabled: boolean;
+}
+
+let _seq = 1;
+const nextKey = () => _seq++;
+
+function toRows(words: SensitiveWord[]): EditRow[] {
+  return words.map((w) => ({ key: nextKey(), word: w.word, replacement: w.replacement, enabled: w.enabled }));
+}
+
+/** 归一化用于「脏」判断与重复检测（按原始词去空白后比较）。 */
+function serialize(rows: { word: string; replacement: string; enabled: boolean }[]): string {
+  return JSON.stringify(
+    rows
+      .map((r) => ({ w: r.word.trim(), r: r.replacement, e: r.enabled }))
+      .filter((r) => r.w !== "")
+      .sort((a, b) => a.w.localeCompare(b.w)),
+  );
+}
+
+export default function SensitiveWordsPage() {
+  // 仅用户名为 lqq 的账号可访问（用户名 = 设置→个人信息页展示名）。
+  const canManage = getAccountDisplayName().toLowerCase() === "lqq";
+  const { data: serverWords = [], isLoading } = useSensitiveWords();
+  const { save } = useSensitiveWordActions();
+
+  const [rows, setRows] = useState<EditRow[]>([]);
+  const [loadedKey, setLoadedKey] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+
+  // 服务端数据首次/变化时回填工作副本（以序列化值判定，避免覆盖未保存编辑）。
+  const sourceKey = useMemo(() => serialize(serverWords), [serverWords]);
+  useEffect(() => {
+    if (sourceKey !== loadedKey) {
+      setRows(toRows(serverWords));
+      setLoadedKey(sourceKey);
+    }
+  }, [sourceKey, loadedKey, serverWords]);
+
+  const dirty = useMemo(() => serialize(rows) !== serialize(serverWords), [rows, serverWords]);
+
+  const q = query.trim().toLowerCase();
+  const visibleRows = useMemo(
+    () =>
+      !q
+        ? rows
+        : rows.filter(
+            (r) => r.word.toLowerCase().includes(q) || r.replacement.toLowerCase().includes(q),
+          ),
+    [rows, q],
+  );
+
+  const enabledCount = rows.filter((r) => r.enabled && r.word.trim()).length;
+
+  // ── 行操作 ──
+  const patchRow = (key: number, patch: Partial<EditRow>) =>
+    setRows((prev) => prev.map((r) => (r.key === key ? { ...r, ...patch } : r)));
+  const removeRow = (key: number) => setRows((prev) => prev.filter((r) => r.key !== key));
+  const addRow = () => setRows((prev) => [{ key: nextKey(), word: "", replacement: "", enabled: true }, ...prev]);
+
+  /** 用前端内置种子补齐当前没有的词（已存在的词不动）。 */
+  const importSeed = () => {
+    const have = new Set(rows.map((r) => r.word.trim()).filter(Boolean));
+    const added: EditRow[] = [];
+    for (const [word, replacement] of Object.entries(SEED_DESENSITIZE_MAP)) {
+      if (!have.has(word)) added.push({ key: nextKey(), word, replacement, enabled: true });
+    }
+    if (added.length === 0) {
+      toast.info("种子词已全部存在，无需导入");
+      return;
+    }
+    setRows((prev) => [...added, ...prev]);
+    toast.success(`已导入 ${added.length} 个种子词（保存后生效）`);
+  };
+
+  const handleSave = async () => {
+    // 校验：去空白、丢弃空原始词、检测重复。
+    const cleaned = rows
+      .map((r) => ({ ...r, word: r.word.trim() }))
+      .filter((r) => r.word !== "");
+    const seen = new Set<string>();
+    for (const r of cleaned) {
+      if (seen.has(r.word)) {
+        toast.error(`原始词「${r.word}」重复，请合并后再保存`);
+        return;
+      }
+      seen.add(r.word);
+    }
+    const payload: SensitiveWord[] = cleaned.map((r, i) => ({
+      word: r.word,
+      replacement: r.replacement,
+      enabled: r.enabled,
+      sortOrder: i,
+    }));
+    try {
+      await save.mutateAsync(payload);
+      toast.success("敏感词已保存");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "保存失败");
+    }
+  };
+
+  if (!canManage) return <Navigate to="/page/workspace/chats/new" replace />;
+
+  return (
+    <div className="h-full overflow-auto bg-slate-50/60 px-4 py-6 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-4xl">
+        {/* 顶部信息卡 */}
+        <div className="relative mb-6 overflow-hidden rounded-3xl border border-slate-200/60 bg-white p-6 shadow-sm md:p-8">
+          <div className="pointer-events-none absolute right-0 top-0 select-none p-8 opacity-[0.03]">
+            <ShieldAlert className="size-44 text-slate-900" />
+          </div>
+          <div className="relative">
+            <div className="mb-4 flex flex-col justify-between gap-4 md:flex-row md:items-center">
+              <div>
+                <span className="mb-3 inline-flex select-none items-center gap-1.5 rounded-full border border-red-100 bg-red-50 px-3 py-1 text-xs font-semibold text-red-600">
+                  <Sparkles className="size-3" />
+                  系统集成版
+                </span>
+                <h1 className="flex items-center gap-3 text-2xl font-bold tracking-tight text-slate-800 md:text-3xl">
+                  敏感词管理
+                  <span className="rounded-lg border border-slate-200/60 bg-slate-100 px-2.5 py-0.5 font-mono text-xs font-medium text-slate-500">
+                    {rows.length} 词 / {enabledCount} 启用
+                  </span>
+                </h1>
+              </div>
+
+              <div className="flex items-center gap-2.5">
+                <button
+                  type="button"
+                  onClick={importSeed}
+                  className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-600 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50 hover:text-slate-800"
+                  title="用前端内置种子词补齐当前缺失的词"
+                >
+                  <Download className="size-[15px]" />
+                  导入种子词
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={!dirty || save.isPending}
+                  className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-red-600 bg-red-600 px-5 py-2 text-sm font-semibold text-white shadow-sm transition-all hover:bg-red-700 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {save.isPending ? (
+                    <>
+                      <div className="size-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                      保存中…
+                    </>
+                  ) : (
+                    <>
+                      <Save className="size-[15px]" />
+                      保存修改
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <p className="flex max-w-2xl items-start gap-2.5 rounded-2xl border border-slate-200/50 bg-slate-50/70 p-3.5 text-sm leading-relaxed text-slate-600">
+              <Info className="mt-0.5 size-4 shrink-0 text-slate-400" />
+              <span>
+                配置展示层<strong> 脱敏词映射</strong>（原始词 → 替换词）。保存后全站脱敏即时生效；
+                <strong> 停用 </strong>的词会保留但不参与替换。前端内置的种子词仅用于全新机器首次部署，
+                可用<strong>「导入种子词」</strong>一键写入后台。
+              </span>
+            </p>
+          </div>
+        </div>
+
+        {/* 搜索 + 新增栏 */}
+        <div className="mb-6 flex flex-col items-center justify-between gap-4 rounded-2xl border border-slate-200/60 bg-white p-4 shadow-sm md:flex-row md:p-5">
+          <div className="relative w-full md:w-80">
+            <Search className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              placeholder="搜索原始词 / 替换词…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="w-full rounded-xl border border-slate-200 bg-slate-50/50 py-2 pl-10 pr-4 text-sm transition-all hover:border-slate-300 focus:border-red-500 focus:outline-none focus:ring-4 focus:ring-red-500/5"
+            />
+          </div>
+          <button
+            type="button"
+            onClick={addRow}
+            className="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition-all hover:border-red-300 hover:bg-red-50 hover:text-red-600 md:w-auto"
+          >
+            <Plus className="size-[15px]" />
+            新增敏感词
+          </button>
+        </div>
+
+        {/* 列表 */}
+        <div className="overflow-hidden rounded-2xl border border-slate-200/60 bg-white shadow-sm">
+          <div className="grid grid-cols-[1fr_1fr_auto_auto] items-center gap-3 border-b border-slate-200/60 bg-slate-50/70 px-4 py-2.5 text-xs font-semibold text-slate-500">
+            <span>原始词</span>
+            <span>替换词</span>
+            <span className="px-1 text-center">启用</span>
+            <span className="w-8" />
+          </div>
+
+          {isLoading ? (
+            <div className="px-4 py-12 text-center text-sm text-slate-400">加载中…</div>
+          ) : visibleRows.length === 0 ? (
+            <div className="px-4 py-12 text-center text-sm text-slate-400">
+              {rows.length === 0 ? "暂无敏感词，点击「新增」或「导入种子词」开始配置" : "没有匹配的词"}
+            </div>
+          ) : (
+            <ul className="divide-y divide-slate-100">
+              {visibleRows.map((row) => (
+                <li
+                  key={row.key}
+                  className={`grid grid-cols-[1fr_1fr_auto_auto] items-center gap-3 px-4 py-2.5 transition-colors hover:bg-slate-50/60 ${
+                    row.enabled ? "" : "opacity-55"
+                  }`}
+                >
+                  <input
+                    type="text"
+                    value={row.word}
+                    placeholder="原始词"
+                    onChange={(e) => patchRow(row.key, { word: e.target.value })}
+                    className="w-full rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm transition-all focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500/10"
+                  />
+                  <input
+                    type="text"
+                    value={row.replacement}
+                    placeholder="替换词"
+                    onChange={(e) => patchRow(row.key, { replacement: e.target.value })}
+                    className="w-full rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm transition-all focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500/10"
+                  />
+                  <div className="px-1">
+                    <Switch
+                      checked={row.enabled}
+                      onCheckedChange={(v) => patchRow(row.key, { enabled: v })}
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeRow(row.key)}
+                    title="删除"
+                    className="flex size-8 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                  >
+                    <Trash2 className="size-4" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -2,7 +2,7 @@ import { Navigate, Route, Routes, useParams } from "react-router-dom";
 import { Toaster } from "sonner";

 import { SidebarProvider } from "@/components/ui/sidebar";
-import { getStoredAuth } from "@/core/auth";
+import { getAccountDisplayName, getStoredAuth } from "@/core/auth";
 import { RouteBaseProvider } from "@/core/route-base";
 import GeneralQA from "@/strategy-components/components/chat-qa/GeneralQA";
 import SentimentAnalyzes from "@/strategy-components/components/task-components/SentimentAnalyzes";
@@ -32,6 +32,7 @@ import LightAppIframeView from "./LightAppIframeView";
 import LightAppListPage from "./LightAppListPage";
 import LightAppManagementPage from "./LightAppManagementPage";
 import MenuManagementPage from "./MenuManagementPage";
+import SensitiveWordsPage from "./SensitiveWordsPage";
 import LightAppNewNotePage from "./LightAppNewNotePage";
 import LightAppNoteListPage from "./LightAppNoteListPage";
 import LightAppNoteQAPage from "./LightAppNoteQAPage";
@@ -321,6 +322,16 @@ export default function StrategyRoutes() {
                )
              }
            />
+            <Route
+              path="admin/sensitive-words"
+              element={
+                getAccountDisplayName().toLowerCase() === "lqq" ? (
+                  <SensitiveWordsPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
            <Route
              path="admin/scheduled-tasks"
              element={