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

package/src/modules/sensitive/sensitiveEditor.tsx

@@ -1,543 +0,0 @@
-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 };