@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/sensitive/sensitiveEditor.tsx

@@ -0,0 +1,543 @@
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { message, Input, Modal, Upload, Dropdown } from 'antd';
+import type { UploadFile } from 'antd';
+import type { MenuProps } from 'antd';
+import { CirclePlus, Search, X, Info, Plus, FileUp } from 'lucide-react';
+import { Button, defaultTheme, type Styles } from '@mxmweb/zui';
+import { useSensitiveI18n, interpolate } from './i18n';
+
+const { Dragger } = Upload;
+
+/** 单个敏感词最大字符数 */
+const MAX_WORD_LENGTH = 16;
+
+// ---------------------------------------------------------------------------
+// Styled 组件（遵循 ui_develop_guide：.attrs 添加 className，kebab-case，组件前缀 sensitive-edit-）
+// ---------------------------------------------------------------------------
+
+/** 编辑页根容器：flex 列布局，铺满，背景色可由 theme 覆盖，默认白底；保证底部按钮区固定在容器底 */
+const SensitiveEditPageWrap = styled.div.attrs({
+  className: 'sensitive-edit-page',
+}) <{ theme?: any }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) => theme?.colors?.background ?? '#FFFFFF'};
+`;
+
+/** 编辑页工具栏：导入、提示、搜索输入；不参与伸缩，固定在顶部 */
+const SensitiveEditToolbar = styled.div.attrs({
+  className: 'sensitive-edit-toolbar',
+}) <{ theme?: any }>`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 20px;
+
+`;
+
+/** 编辑框：浅灰背景、圆角、可滚动，占据中间剩余空间（与 table 内 tag 视觉一致时此处为内容区） */
+const SensitiveEditContentBox = styled.div.attrs({
+  className: 'sensitive-edit-content-box',
+}) <{ theme?: any }>`
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid ${({ theme }) => theme?.colors?.border ?? '#E5E7EB'};
+  background: ${({ theme }) => theme?.colors?.listBackground ?? '#f5f5f5'};
+  border-radius: 8px;
+  padding: 16px;
+  margin: 0 20px;
+`;
+
+/** 编辑框内敏感词标签列表：多行换行，与表格内 tag 布局一致 */
+const SensitiveEditTagList = styled.div.attrs({
+  className: 'sensitive-edit-tag-list',
+})`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  min-height: 30px;
+`;
+
+/** 编辑页单个可删除 tag：样式与表格内 SensitiveTagItem 统一（蓝字浅蓝底、圆角 4px、12px 字号），仅多出删除图标；固定高度保证大小一致 */
+const SENSITIVE_EDIT_TAG_HEIGHT = 28;
+const SensitiveEditTag = styled.span.attrs({
+  className: 'sensitive-edit-tag',
+}) <{ $color: string; $bg: string; $border: string }>`
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: ${SENSITIVE_EDIT_TAG_HEIGHT}px;
+  min-height: ${SENSITIVE_EDIT_TAG_HEIGHT}px;
+  color: ${p => p.$color};
+  background: ${p => p.$bg};
+  border: ${p => (p.$border === 'none' ? 'none' : `1px solid ${p.$border}`)};
+  border-radius: 4px;
+  padding: 0 8px 0 12px;
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-family: PingFangSC, 微软雅黑, Helvetic, sans-serif;
+  .sensitive-edit-tag-remove {
+    cursor: pointer;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
+/** 第一个 tag 位「添加」触发器：虚线框、加号、蓝色「添加」文案，与 tag 同高 */
+const SensitiveEditAddTrigger = styled.span.attrs({
+  className: 'sensitive-edit-add-trigger',
+}) <{ $color: string }>`
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: ${SENSITIVE_EDIT_TAG_HEIGHT}px;
+  min-height: ${SENSITIVE_EDIT_TAG_HEIGHT}px;
+  padding: 0 12px;
+  border: 1px dashed ${p => p.$color};
+  border-radius: 4px;
+  background: #FFFFFF;
+  color: ${p => p.$color};
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  cursor: pointer;
+  font-family: PingFangSC, 微软雅黑, Helvetic, sans-serif;
+  &:hover {
+    border-style: solid;
+    opacity: 0.9;
+  }
+`;
+
+/** 第一个 tag 位添加时的内联输入框容器：与 tag 同高，聚焦时蓝框 */
+const SensitiveEditAddInputWrap = styled.span.attrs({
+  className: 'sensitive-edit-add-input-wrap',
+}) <{ $focused?: boolean; $color: string }>`
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+
+  height: ${SENSITIVE_EDIT_TAG_HEIGHT}px;
+  min-height: ${SENSITIVE_EDIT_TAG_HEIGHT}px;
+  padding: 0 8px 0 12px;
+  border: 1px solid ${p => (p.$focused ? p.$color : '#E5E7EB')};
+  border-radius: 4px;
+  background: #FFFFFF;
+  flex-shrink: 0;
+  min-width: 80px;
+  .sensitive-edit-add-input {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 12px;
+    line-height: 20px;
+    color: #1f2937;
+    font-family: PingFangSC, 微软雅黑, Helvetic, sans-serif;
+    width: 100%;
+    min-width: 60px;
+  }
+  .sensitive-edit-add-input::placeholder {
+    color: #9ca3af;
+  }
+`;
+
+/** 编辑页底部操作区：固定在容器底部，不随内容滚动 */
+const SensitiveEditFooter = styled.div.attrs({
+  className: 'sensitive-edit-footer',
+}) <{ theme?: any }>`
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+
+`;
+
+/** 上传弹窗内提示条：浅蓝底、左侧图标、文案与下载模板按钮 */
+const UploadModalAlert = styled.div.attrs({
+  className: 'sensitive-upload-modal-alert',
+}) <{ theme?: any }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 14px;
+  margin-bottom: 16px;
+  background: ${({ theme }) => theme?.colors?.tagBackground ?? '#eff6ff'};
+  border-radius: 6px;
+  font-size: 14px;
+  color: ${({ theme }) => theme?.colors?.text ?? '#1f2937'};
+`;
+
+/** 上传弹窗拖拽区外层（与 antd Dragger 配合，统一圆角与虚线） */
+const UploadModalDraggerWrap = styled.div.attrs({
+  className: 'sensitive-upload-modal-dragger-wrap',
+})`
+  .ant-upload-drag {
+    border-radius: 8px;
+    border: 1px dashed #d1d5db;
+    background: #fafafa;
+  }
+  .ant-upload-drag:hover {
+    border-color: #1d70f5;
+    background: #f0f7ff;
+  }
+`;
+
+// ---------------------------------------------------------------------------
+// 组件
+// ---------------------------------------------------------------------------
+
+/**
+ * 敏感词库编辑页组件
+ * 负责单个词库的敏感词增删展示与保存/取消，words 受控，通过 onWordsChange / onSave / onCancel 与父组件通信。
+ */
+const SensitiveEditor: React.FC<{
+  /** 当前词库名称（仅用于上下文，本组件内不展示标题） */
+  libraryName?: string;
+  /** 当前敏感词列表（受控） */
+  words: string[];
+  /** 敏感词列表变更回调（添加/删除时由父更新 state） */
+  onWordsChange: (words: string[]) => void;
+  /** 点击保存时调用，父组件内请求 updateLibrary 并关闭编辑页 */
+  onSave: () => void;
+  /** 点击取消或返回时调用 */
+  onCancel: () => void;
+  /** 主题样式，用于 Button、Input 与 tag 颜色 */
+  styles?: Styles;
+  /** 可选：选择模板格式后调用，format 为 'csv' | 'txt'，未传则仅提示 */
+  onDownloadTemplate?: (format: 'csv' | 'txt') => void;
+  /** 可选：确认导入时走服务端上传（PUT import），传入 file，成功后由父更新 words；未传则走本地解析合并 */
+  onImportFile?: (file: File) => Promise<void>;
+}> = ({ words, onWordsChange, onSave, onCancel, styles, onDownloadTemplate, onImportFile }) => {
+  const { messages } = useSensitiveI18n();
+  /** 顶部搜索框内容：用于前端实时模糊过滤展示，不再作为新增入口 */
+  const [inputValue, setInputValue] = useState('');
+  /** 第一个 tag 位「添加」是否处于输入态：true 时显示内联输入框 */
+  const [isAddActive, setIsAddActive] = useState(false);
+  /** 第一个 tag 位内联输入框内容 */
+  const [addInputValue, setAddInputValue] = useState('');
+  const addInputRef = useRef<any>(null);
+
+  /** 上传文件弹窗显隐 */
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
+  /** 弹窗内已选文件（单文件），用于确认时解析或上传 */
+  const [uploadFileList, setUploadFileList] = useState<UploadFile[]>([]);
+  /** 导入确认中（走服务端上传时） */
+  const [importing, setImporting] = useState(false);
+
+  const themeColors = styles?.theme?.colors || defaultTheme.colors || {};
+  const tagColor = themeColors.tagColor ?? '#1d70f5';
+  const tagAddColor = themeColors.tagAddColor ?? '#1d70f5';
+  const tagBg = themeColors.tagBackground ?? '#ebf6ff';
+  /** 与表格内 tag 统一：表格使用 border none */
+  const tagBorder = 'none';
+
+  /** 进入添加态时聚焦内联输入框 */
+  useEffect(() => {
+    if (isAddActive) {
+      setAddInputValue('');
+      setTimeout(() => addInputRef.current?.focus(), 0);
+    }
+  }, [isAddActive]);
+
+  /** 从内联输入提交一个敏感词：校验后调用 onWordsChange 并退出添加态 */
+  const handle_commit_add_input = useCallback(() => {
+    const v = addInputValue.trim();
+    if (v) {
+      if (v.length > MAX_WORD_LENGTH) {
+        message.warning(interpolate(messages.editor.maxLengthWarning, { max: String(MAX_WORD_LENGTH) }));
+        return;
+      }
+      if (words.includes(v)) {
+        message.warning(messages.editor.duplicateWarning);
+        return;
+      }
+      onWordsChange([...words, v,]);
+    }
+    setAddInputValue('');
+    setIsAddActive(false);
+  }, [addInputValue, words, onWordsChange, messages]);
+
+  /** 移除敏感词：按词本身删除后调用 onWordsChange（保证与搜索过滤后的列表索引无关） */
+  const handle_remove_word = useCallback(
+    (word: string) => {
+      onWordsChange(words.filter(w => w !== word));
+    },
+    [words, onWordsChange]
+  );
+
+  /** 根据搜索框内容对敏感词进行前端实时模糊过滤（大小写不敏感、包含匹配） */
+  const filteredWords = useMemo(() => {
+    const keyword = inputValue.trim().toLowerCase();
+    if (!keyword) return words;
+    return words.filter(w => w.toLowerCase().includes(keyword));
+  }, [words, inputValue]);
+
+  /** 打开上传文件弹窗 */
+  const handle_open_upload_modal = useCallback(() => {
+    setUploadFileList([]);
+    setUploadModalOpen(true);
+  }, []);
+
+  /** 下载模板：按格式调用 onDownloadTemplate，未传则提示 */
+  const handle_download_template = useCallback(
+    (format: 'csv' | 'txt') => {
+      if (onDownloadTemplate) {
+        onDownloadTemplate(format);
+      } else {
+        message.info(messages.editor.configTemplateHint);
+      }
+    },
+    [onDownloadTemplate, messages]
+  );
+
+  /** 下载模板下拉菜单项 */
+  const downloadTemplateMenu: MenuProps = {
+    items: [
+      { key: 'csv', label: messages.editor.formatCsv },
+      { key: 'txt', label: messages.editor.formatTxt },
+    ],
+    onClick: ({ key }) => handle_download_template(key as 'csv' | 'txt'),
+  };
+
+  /**
+   * 从 csv/txt 文件中解析敏感词：按行、逗号、制表符拆分，trim、去空、去重，且每条不超过 MAX_WORD_LENGTH
+   */
+  const parseWordsFromFile = useCallback((text: string): string[] => {
+    const raw = text
+      .replace(/\r\n/g, '\n')
+      .replace(/\r/g, '\n')
+      .split(/[\n,\t]/)
+      .map(s => s.trim())
+      .filter(Boolean);
+    const seen = new Set<string>();
+    const out: string[] = [];
+    for (const w of raw) {
+      const word = w.length > MAX_WORD_LENGTH ? w.slice(0, MAX_WORD_LENGTH) : w;
+      if (!seen.has(word)) {
+        seen.add(word);
+        out.push(word);
+      }
+    }
+    return out;
+  }, []);
+
+  /** 确认上传：若提供 onImportFile 则走服务端 PUT import，否则本地解析合并 */
+  const handle_upload_confirm = useCallback(async () => {
+    const file = uploadFileList[0]?.originFileObj;
+    if (!file) {
+      message.warning(messages.editor.selectFileWarning);
+      return;
+    }
+    if (onImportFile) {
+      setImporting(true);
+      try {
+        await onImportFile(file);
+        setUploadModalOpen(false);
+        setUploadFileList([]);
+      } catch (e) {
+        message.error(messages.editor.importFailRetry);
+      } finally {
+        setImporting(false);
+      }
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const text = (reader.result as string) || '';
+        const newWords = parseWordsFromFile(text);
+        const mergedDedup = Array.from(new Set([...words, ...newWords]));
+        onWordsChange(mergedDedup);
+        message.success(interpolate(messages.editor.importCountSuccess, { count: String(newWords.length) }));
+        setUploadModalOpen(false);
+        setUploadFileList([]);
+      } catch (e) {
+        message.error(messages.editor.parseFail);
+      }
+    };
+    reader.onerror = () => message.error(messages.editor.readFileFail);
+    reader.readAsText(file, 'UTF-8');
+  }, [uploadFileList, words, onWordsChange, parseWordsFromFile, onImportFile, messages]);
+
+  /** 关闭上传弹窗 */
+  const handle_upload_cancel = useCallback(() => {
+    setUploadModalOpen(false);
+    setUploadFileList([]);
+  }, []);
+
+  return (
+    <SensitiveEditPageWrap theme={styles?.theme}>
+      <SensitiveEditToolbar theme={styles?.theme}>
+        <Button
+          mode="primary"
+          label={messages.editor.import}
+          icon={<CirclePlus size={16} />}
+          onClick={handle_open_upload_modal}
+          styles={styles}
+        />
+        <span
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            color: themeColors.textSecondary ?? '#6b7280',
+            fontSize: 12,
+          }}
+        >
+          <Info size={14} />
+          {interpolate(messages.editor.maxLengthHint, { max: String(MAX_WORD_LENGTH) })}
+        </span>
+        <div
+          style={{
+            flex: 1,
+            marginLeft: 'auto',
+            minWidth: 200,
+            maxWidth: 320,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+          }}
+        >
+          <Input
+            placeholder={messages.editor.searchPlaceholder}
+            value={inputValue}
+            allowClear
+            onChange={e => setInputValue(e.target.value)}
+            suffix={<Search size={16} style={{ color: '#9ca3af' }} />}
+            style={{ flex: 1 }}
+          />
+        </div>
+      </SensitiveEditToolbar>
+      <SensitiveEditContentBox theme={styles?.theme}>
+        <SensitiveEditTagList>
+
+          {filteredWords.map(word => (
+            <SensitiveEditTag key={word} $color={tagColor} $bg={tagBg} $border={tagBorder}>
+              {word}
+              <span
+                className="sensitive-edit-tag-remove"
+                onClick={() => handle_remove_word(word)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={e => e.key === 'Enter' && handle_remove_word(word)}
+              >
+                <X size={14} />
+              </span>
+            </SensitiveEditTag>
+          ))}
+          {isAddActive ? (
+            <SensitiveEditAddInputWrap $focused $color={tagColor}>
+              <input
+                ref={addInputRef}
+                type="text"
+                className="sensitive-edit-add-input"
+                placeholder={messages.editor.inputPlaceholder}
+                value={addInputValue}
+                onChange={e => setAddInputValue(e.target.value)}
+                onBlur={handle_commit_add_input}
+                onKeyDown={e => {
+                  if (e.key === 'Enter') handle_commit_add_input();
+                  if (e.key === 'Escape') {
+                    setAddInputValue('');
+                    setIsAddActive(false);
+                  }
+                }}
+                maxLength={MAX_WORD_LENGTH}
+              />
+            </SensitiveEditAddInputWrap>
+          ) : (
+            <SensitiveEditAddTrigger $color={tagAddColor} onClick={() => setIsAddActive(true)} role="button" tabIndex={0} onKeyDown={e => e.key === 'Enter' && setIsAddActive(true)}>
+              <Plus size={14} />
+              {messages.editor.add}
+            </SensitiveEditAddTrigger>
+          )}
+        </SensitiveEditTagList>
+      </SensitiveEditContentBox>
+      <SensitiveEditFooter theme={styles?.theme}>
+        <Button mode="default" label={messages.editor.cancel} onClick={onCancel} styles={styles} style={{ width: 76 }} />
+        <Button mode="primary" label={messages.editor.save} onClick={onSave} styles={styles} style={{ width: 76 }} />
+      </SensitiveEditFooter>
+
+      <Modal
+        title={messages.editor.uploadModalTitle}
+        open={uploadModalOpen}
+        onCancel={handle_upload_cancel}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: 20,
+            }}
+          >
+            <Button
+              mode="default"
+              label={messages.editor.cancel}
+              onClick={handle_upload_cancel}
+              styles={styles}
+              disabled={importing}
+              style={{ width: 76 }}
+            />
+            <Button
+              mode="primary"
+              label={messages.editor.confirm}
+              onClick={handle_upload_confirm}
+              styles={styles}
+              disabled={importing}
+              style={{ width: 76 }}
+            />
+          </div>
+        }
+        destroyOnClose
+        width={650}
+      >
+        <UploadModalAlert theme={styles?.theme}>
+          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <Info size={18} style={{ color: '#1d70f5', flexShrink: 0 }} />
+            {messages.editor.uploadModalHint}
+          </span>
+          <Dropdown menu={downloadTemplateMenu} trigger={['click']}>
+            <div style={{ display: 'inline-block' }}>
+              <Button mode="default" label={messages.editor.downloadTemplate} styles={styles} />
+            </div>
+          </Dropdown>
+        </UploadModalAlert>
+        <UploadModalDraggerWrap>
+          <Dragger
+            accept=".csv,.txt"
+            maxCount={1}
+            fileList={uploadFileList}
+            beforeUpload={() => false}
+            onChange={({ fileList }) => setUploadFileList(fileList.slice(-1))}
+            showUploadList={{ showPreviewIcon: false }}
+          >
+            <p className="ant-upload-drag-icon" style={{ marginBottom: 8 }}>
+              <FileUp size={48} style={{ color: '#1d70f5' }} />
+            </p>
+            <p className="ant-upload-text">{messages.editor.uploadDragText}</p>
+            <p className="ant-upload-hint">{messages.editor.uploadDragHint}</p>
+          </Dragger>
+        </UploadModalDraggerWrap>
+      </Modal>
+    </SensitiveEditPageWrap>
+  );
+};
+
+export default SensitiveEditor;
+export { MAX_WORD_LENGTH };