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

package/src/modules/sensitive/index.tsx

@@ -1,604 +0,0 @@
-import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import styled from 'styled-components';
-import { message, Modal, Form, Input } from 'antd';
-import { Plus, Search } from 'lucide-react';
-import { Xviwer, CustomComponents } from '@mxmweb/xviewer';
-import { DashboardContainer, Button, defaultTheme, deepMergeTheme, type Styles } from '@mxmweb/zui';
-import AxiosInstance, { SensitiveServer } from './server';
-import SensitiveEditor from './sensitiveEditor';
-import { SensitiveI18nProvider, useSensitiveI18n, interpolate, type SensitiveLocale, type SensitiveMessages } from './i18n';
-import '@mxmweb/zui/style.css';
-
-const { confirm } = Modal;
-
-// ---------------------------------------------------------------------------
-// 类型与常量
-// ---------------------------------------------------------------------------
-
-/** 敏感词库单条数据类型（与后端接口一致） */
-interface SensitiveWordLibrary {
-  id: string;
-  name: string;
-  words: string[];
-  gmtCreate: string;
-  count: number;
-}
-
-const initialPage = {
-  pageNo: 1,
-  pageSize: 999,
-};
-
-// ---------------------------------------------------------------------------
-// Styled 组件（遵循 ui_develop_guide：.attrs 添加 className，kebab-case，组件前缀 sensitive-）
-// ---------------------------------------------------------------------------
-
-/** 新建弹窗底部操作区：取消/确认按钮容器 */
-const SensitiveModalFooter = styled.div.attrs({
-  className: 'sensitive-modal-footer',
-}) <{ theme?: any }>`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  gap: 10px;
-`;
-
-/** 工具栏右侧后端搜索输入容器 */
-const SensitiveToolbarSearchWrap = styled.div.attrs({
-  className: 'sensitive-toolbar-search-wrap',
-})`
-  display: flex;
-  align-items: center;
-  min-width: 220px;
-`;
-
-/** Xviwer 自定义工具栏搜索组件：仅负责收集输入并通过 onAction 通知上层做后端搜索 */
-const SensitiveToolbarSearch: React.FC<{
-  onAction: (action: string, data: any) => void;
-}> = ({ onAction }) => {
-  const [value, setValue] = useState('');
-  const { messages } = useSensitiveI18n();
-  const handleSearch = useCallback(() => {
-    const keyword = value.trim();
-    onAction('search', { keyword });
-  }, [value, onAction]);
-
-  return (
-    <SensitiveToolbarSearchWrap>
-      <Input
-        placeholder={messages.toolbar.searchPlaceholder}
-        allowClear
-        value={value}
-        onChange={e => setValue(e.target.value)}
-        onPressEnter={handleSearch}
-        suffix={<Search size={16} style={{ color: '#9ca3af' }} />}
-      />
-    </SensitiveToolbarSearchWrap>
-  );
-};
-
-/** 敏感词单元格外层：多标签换行排列 */
-const SensitiveTagCellWrap = styled.div.attrs({
-  className: 'sensitive-tag-cell-wrap',
-})`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  min-width: 200px;
-  max-width: 100%;
-`;
-
-/** 单个敏感词 tag：蓝字浅蓝底淡边框、pill 形，颜色可由 theme.colors 覆盖 */
-const SensitiveTagItem = styled.span.attrs({
-  className: 'sensitive-tag-item',
-}) <{ $color: string; $bg: string; $border: string }>`
-  box-sizing: border-box;
-  display: inline-block;
-  color: ${p => p.$color};
-  background: ${p => p.$bg};
-  border: 1px solid ${p => p.$border};
-  border-radius: 4px;
-  padding: 4px 12px;
-  font-size: 12px;
-  line-height: 20px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-family: PingFangSC, 微软雅黑, Helvetic, sans-serif;
-`;
-
-/** cell 内最多展示的 tag 数量，超出部分用「…查看全部」占位 */
-const MAX_TAG_DISPLAY = 8;
-
-/** 「…查看全部」链接样式：与 tag 同色、不换行 */
-const SensitiveTagMore = styled.span.attrs({
-  className: 'sensitive-tag-more',
-}) <{ $color: string }>`
-  display: inline-block;
-  color: ${p => p.$color};
-  font-size: 12px;
-  line-height: 31px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  cursor: pointer;
-  font-family: PingFangSC, 微软雅黑, Helvetic, sans-serif;
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-/** 敏感词列自定义 cell：用自绘 tag 样式渲染 words 数组，最多展示 MAX_TAG_DISPLAY 个，超出显示「…查看全部」；点击「…查看全部」时调用 onViewAll 进入编辑页。 */
-function SensitiveTagCell({
-  value,
-  theme,
-  onViewAll,
-}: {
-  value: string[] | unknown;
-  theme?: any;
-  onViewAll?: () => void;
-}) {
-  const { messages } = useSensitiveI18n();
-  const colors = theme?.colors || defaultTheme.colors || {};
-  const tagColor = colors.tagColor ?? '#1d70f5';
-  const tagBackground = colors.tagBackground ?? '#ebf6ff';
-  const list = Array.isArray(value) ? value : [];
-  if (list.length === 0) return null;
-
-  const displayList = list.slice(0, MAX_TAG_DISPLAY);
-  const hasMore = list.length > MAX_TAG_DISPLAY;
-  const moreCount = hasMore ? list.length - MAX_TAG_DISPLAY : 0;
-  const viewAllTitle = interpolate(messages.tagCell.viewAllTitle, { total: String(list.length), max: String(MAX_TAG_DISPLAY) });
-  const viewAllLink = interpolate(messages.tagCell.viewAllLink, { count: String(moreCount) });
-
-  return (
-    <SensitiveTagCellWrap>
-      {displayList.map((word: string, i: number) => (
-        <SensitiveTagItem
-          key={i}
-          $color={tagColor}
-          $bg={tagBackground}
-          $border={'none'}
-        >
-          {word}
-        </SensitiveTagItem>
-      ))}
-      {hasMore && (
-        <SensitiveTagMore
-          $color={tagColor}
-          title={viewAllTitle}
-          onClick={() => onViewAll?.()}
-        >
-          {viewAllLink}
-        </SensitiveTagMore>
-      )}
-    </SensitiveTagCellWrap>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// 组件
-// ---------------------------------------------------------------------------
-
-/**
- * 敏感词配置业务层组件（内部：使用 Context 获取文案，创建 apiClient 时传入 getMessage）
- * 使用 Xviwer(DynamicTable) 实现敏感词库列表与工具栏，通过 eventEmit 向外抛事件（事件名：sensitive_ 前缀 + 行为）。
- */
-const SensitiveViewContent: React.FC<{
-  server?: SensitiveServer;
-  url?: string;
-  token?: string;
-  role?: string;
-  styles?: Styles;
-  CustomComponents?: CustomComponents;
-  eventsEmit?: (eventName: string, data: any) => void;
-}> = ({ url, token, role, server, styles, eventsEmit, CustomComponents }) => {
-  const { messages, locale, getMessage } = useSensitiveI18n();
-  const [status, setStatus] = useState<any>({
-    container: 'ready',
-    content: 'ready',
-  });
-  const coreRef = useRef<any>(null);
-  const [data, setData] = useState<{ id: string; data?: any[] }[]>();
-  const [form] = Form.useForm();
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  /** 工具栏搜索关键字：用于服务端 name 查询 */
-  const [searchKeyword, setSearchKeyword] = useState('');
-  /** 编辑页状态：进入编辑/查看更多时切换为编辑视图，DashboardContainer title 与 goBack 随此变化 */
-  const [editView, setEditView] = useState<{
-    active: boolean;
-    libraryId: string | null;
-    libraryName: string;
-    words: string[];
-  }>({ active: false, libraryId: null, libraryName: '', words: [] });
-
-  const apiClient = useMemo<SensitiveServer>(
-    () => server || AxiosInstance({ url, token, role, getMessage }),
-    [server, url, token, role, getMessage]
-  );
-  const { getLibraryList, deleteLibrary, createLibrary, updateLibrary, downloadTemplate, importWords, getWords } = apiClient;
-
-  /** 从表格行数据中解析出 name 与 words（用于进入编辑页） */
-  const get_name_and_words_from_row = useCallback((row: { id: string; data?: any[] }) => {
-    const cells = row?.data ?? [];
-    const nameCell = cells.find((c: any) => c.columnId === 'name');
-    const wordsCell = cells.find((c: any) => c.columnId === 'sensitiveWords');
-    const name = (nameCell?.value ?? '') as string;
-    const words = Array.isArray(wordsCell?.value) ? [...(wordsCell.value as string[])] : [];
-    return { name, words };
-  }, []);
-
-  /** 进入编辑页：列表点击「编辑」或「…查看全部」时调用 */
-  const handle_enter_edit = useCallback(
-    (row: { id: string; data?: any[] }) => {
-      const { name, words } = get_name_and_words_from_row(row);
-      setEditView({ active: true, libraryId: row.id, libraryName: name, words });
-    },
-    [get_name_and_words_from_row]
-  );
-
-  /** 退出编辑页：Dashboard 返回或取消 */
-  const handle_go_back = useCallback(() => {
-    setEditView({ active: false, libraryId: null, libraryName: '', words: [] });
-    eventsEmit?.('sensitive_edit_closed', {});
-  }, [eventsEmit]);
-
-  /** 保存编辑：调用 updateLibrary 后退出编辑页并刷新列表 */
-  const handle_save_edit = useCallback(async () => {
-    if (!editView.libraryId) return;
-    try {
-      // 后端约束：name 不能为空；保存时带上当前库名，避免仅更新 words 导致校验失败
-      const res = await updateLibrary(editView.libraryId, {
-        name: editView.libraryName,
-        words: editView.words,
-      });
-      if (res) {
-        message.success(messages.message.saveSuccess);
-        handle_go_back();
-        setStatus((prev: any) => ({ ...prev, content: 'loading' }));
-        handle_fetch_list();
-      }
-    } catch (e) {
-      console.error('[SensitiveView] 保存敏感词失败:', e);
-    }
-  }, [editView.libraryId, editView.words, updateLibrary, handle_go_back]);
-
-  /** 合并默认主题与外部 styles，与知识库模块一致 */
-  const mergedTheme = useMemo(() => {
-    return deepMergeTheme({ theme: defaultTheme, mode: 'light' }, styles || {});
-  }, [styles]);
-
-  useEffect(() => {
-    setStatus((prev: any) => ({ ...prev, content: 'loading' }));
-    handle_fetch_list();
-  }, []);
-
-  /**
-   * 拉取敏感词库列表并写入 data，完成后将 content 置为 ready。
-   * 依赖 apiClient.getLibraryList，异常仅打日志。
-   */
-  const handle_fetch_list = async (keyword?: string) => {
-    try {
-      const params: any = { ...initialPage };
-      // 后端搜索：当存在关键字时通过 name 字段传给接口
-      const effectiveKeyword = keyword ?? searchKeyword;
-      if (effectiveKeyword) {
-        params.name = effectiveKeyword;
-      }
-      const res = await getLibraryList(params);
-      if (res) {
-        const _data = convert_to_table_data(res.records);
-        setData(_data || []);
-        setStatus((prev: any) => ({ ...prev, content: 'ready' }));
-      }
-    } catch (e) {
-      console.log('[SensitiveView] getSensitiveList error:', e);
-    }
-  };
-
-  /**
-   * 将后端敏感词库列表转为 Xviwer 表格行结构（含 name / sensitiveWords(tag) / createDate / count / actions）。
-   * @param libraries 敏感词库数组
-   * @returns 表格数据行数组
-   */
-  function convert_to_table_data(libraries: SensitiveWordLibrary[]) {
-    return (libraries || []).map(library => ({
-      id: library.id,
-      data: [
-        { columnId: 'name', value: library.name, type: 'label' },
-        { columnId: 'sensitiveWords', value: library.words, type: 'customized' },
-        { columnId: 'createDate', value: library.gmtCreate, type: 'date' },
-        { columnId: 'count', value: library.count, type: 'text' },
-        { columnId: 'actions', value: 'edit', label: messages.table.actionEdit, type: 'action' },
-        { columnId: 'actions', value: 'delete', label: messages.table.actionDelete, type: 'action' },
-      ],
-    }));
-  }
-
-  const dateLocale = locale === 'zh' ? 'zh-CN' : locale === 'ja' ? 'ja-JP' : 'en-US';
-  const tableConfig = useMemo(
-    () => ({
-      label: messages.table.label,
-      model: null,
-      defaultActiveId: 'sensitive-table',
-      views: [
-        {
-          id: 'sensitive-table',
-          label: messages.table.viewLabel,
-          type: 'table',
-          viewBehavior: 'pagination' as const,
-          allowMultiSelect: false,
-          viewPageSize: 10,
-          paginationLocale: locale,
-          columns: [
-            { title: messages.table.columns.name, id: 'name', type: 'label' },
-            {
-              title: messages.table.columns.sensitiveWords,
-              id: 'sensitiveWords',
-              type: 'customized' as const,
-              component: SensitiveTagCell,
-              componentProps: ({ value, row }: { value: unknown; row?: any }) => ({
-                value,
-                theme: mergedTheme?.theme,
-                onViewAll: row ? () => handle_enter_edit(row) : undefined,
-              }),
-              fallback: null,
-            },
-            { title: messages.table.columns.createDate, id: 'createDate', type: 'date' },
-            { title: messages.table.columns.count, id: 'count', type: 'text' },
-            { title: messages.table.columns.actions, id: 'actions', type: 'action' },
-          ],
-          toolbar: [
-            {
-              type: 'button' as const,
-              key: 'create',
-              label: messages.table.toolbar.create,
-              btnType: 'primary' as const,
-              icon: <Plus size={16} />,
-            },
-            {
-              type: 'customized' as const,
-              key: 'search',
-              label: messages.table.toolbar.searchPlaceholder,
-              position: 'right',
-              component: SensitiveToolbarSearch,
-            },
-          ],
-        },
-      ],
-    }),
-    [mergedTheme, handle_enter_edit, messages]
-  );
-
-  /**
-   * 提交新建敏感词库：校验表单后调 createLibrary，成功则向表格插入一条并关闭弹窗，对外抛 sensitive_library_created。
-   */
-  const handle_create_library = async () => {
-    try {
-      const value = await form.validateFields();
-      if (!value) return;
-      const res = await createLibrary({ ...value, words: [] });
-      if (res && coreRef?.current) {
-        console.log("+++++", new Date()
-          .toLocaleString(dateLocale, {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-          })
-          .replace(/\//g, '-'),)
-        const newLibrary: any = {
-          id: res,
-          data: [
-            { columnId: 'name', value: value.name, type: 'label' },
-            { columnId: 'sensitiveWords', value: [], type: 'customized' },
-            {
-              columnId: 'createDate',
-              value: new Date()
-                .toLocaleString(dateLocale, {
-                  year: 'numeric',
-                  month: '2-digit',
-                  day: '2-digit',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })
-                .replace(/\//g, '-'),
-              type: 'date',
-            },
-            { columnId: 'count', value: 0, type: 'text' },
-            { columnId: 'actions', value: 'edit', label: messages.table.actionEdit, type: 'action' },
-            { columnId: 'actions', value: 'delete', label: messages.table.actionDelete, type: 'action' },
-          ],
-        };
-        coreRef.current.appFn?.addItem(newLibrary, { animate: true, position: 'start' });
-        message.success(messages.message.createSuccess);
-        eventsEmit?.('sensitive_library_created', { id: res, name: value.name });
-      }
-    } catch (e) {
-      console.error('[SensitiveView] 新增敏感词失败:', e);
-    } finally {
-      setShowCreateModal(false);
-      form.resetFields();
-    }
-  };
-
-  /**
-   * 统一事件入口：处理 Xviwer 抛出的 toolbar_create / table_action_edit / table_action_delete 等，并向外交付时使用 eventEmit(eventName, data)，事件名为 sensitive_ 前缀。
-   * @param name 内部事件名（如 toolbar_create、table_action_edit、table_action_delete）
-   * @param payload 事件数据（如 table_action_edit 时为 { id } 等）
-   * @param _appFn 内部方法引用，本模块未使用
-   */
-  function handle_events_emit(name: string, payload: any, _appFn: any) {
-    switch (name) {
-      case 'toolbar_create':
-        setShowCreateModal(true);
-        eventsEmit?.('sensitive_toolbar_create', payload);
-        break;
-      case 'table_action_edit': {
-        const rowId = payload?.id;
-        const row = rowId && Array.isArray(data) ? data.find((r: any) => r.id === rowId) : (payload?.data ? payload : null);
-        if (row && (row as any).data) {
-          handle_enter_edit(row as any);
-        } else if (payload?.id && payload?.data) {
-          handle_enter_edit(payload);
-        }
-        eventsEmit?.('sensitive_table_action_edit', payload);
-        break;
-      }
-      case 'table_action_delete': {
-        confirm({
-          title: messages.deleteConfirm.title,
-          content: messages.deleteConfirm.content,
-          okText: messages.deleteConfirm.okText,
-          cancelText: messages.deleteConfirm.cancelText,
-          async onOk() {
-            try {
-              const res = await deleteLibrary(payload.id);
-              if (res && coreRef?.current) {
-                coreRef.current.appFn?.removeItem(payload.id);
-                message.success(messages.message.deleteSuccess);
-                eventsEmit?.('sensitive_table_action_delete', payload);
-              }
-            } catch (e) {
-              console.error('[SensitiveView] 删除敏感词库失败', e);
-            }
-          },
-        });
-        break;
-      }
-      case 'toolbar_search_search': {
-        // 自定义工具栏搜索组件触发的后端搜索
-        const keyword = payload?.keyword || '';
-        setSearchKeyword(keyword);
-        setStatus((prev: any) => ({ ...prev, content: 'loading' }));
-        handle_fetch_list(keyword);
-        eventsEmit?.('sensitive_toolbar_search', payload);
-        break;
-      }
-      default:
-        eventsEmit?.('sensitive_' + name, payload);
-        break;
-    }
-  }
-
-  const handle_close_modal = () => {
-    setShowCreateModal(false);
-    form.resetFields();
-  };
-
-  return (
-    <DashboardContainer
-      goBack={
-        editView.active
-          ? handle_go_back
-          : () => eventsEmit?.('goBack', {})
-      }
-      title={editView.active ? editView.libraryName : messages.dashboard.title}
-      styles={mergedTheme}
-    >
-      {editView.active ? (
-        <SensitiveEditor
-          libraryName={editView.libraryName}
-          words={editView.words}
-          onWordsChange={words => setEditView(prev => ({ ...prev, words }))}
-          onSave={handle_save_edit}
-          onCancel={handle_go_back}
-          styles={mergedTheme}
-          onDownloadTemplate={async format => {
-            const blob = await downloadTemplate(format);
-            if (!blob) {
-              message.error(messages.message.downloadTemplateFail);
-              return;
-            }
-            const objectUrl = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = objectUrl;
-            a.download = `${messages.downloadTemplateFilename}.${format}`;
-            a.click();
-            URL.revokeObjectURL(objectUrl);
-          }}
-          onImportFile={async file => {
-            if (!editView.libraryId) return;
-            const res = await importWords(editView.libraryId, file);
-            if (res && res.success !== false) {
-              message.success(messages.message.importSuccess);
-              const detail = await getWords(editView.libraryId)
-              if (detail?.words != null) {
-                setEditView(prev => ({ ...prev, words: detail?.words }));
-              }
-            } else {
-              message.error(res?.errorMsg || messages.message.importFail);
-              throw new Error('import failed');
-            }
-          }}
-        />
-      ) : (
-        <>
-          <Xviwer
-            dataSource={data}
-            ref={coreRef}
-            eventsEmit={handle_events_emit}
-            status={status}
-            styles={mergedTheme}
-            CustomComponents={{ ...CustomComponents }}
-            {...tableConfig}
-          />
-          <Modal
-            title={messages.createModal.title}
-            open={showCreateModal}
-            width={650}
-            destroyOnClose
-            onCancel={handle_close_modal}
-            footer={
-              <SensitiveModalFooter theme={mergedTheme?.theme}>
-                <Button mode="default" label={messages.createModal.cancel} onClick={handle_close_modal} />
-                <Button mode="primary" label={messages.createModal.confirm} onClick={handle_create_library} />
-              </SensitiveModalFooter>
-            }
-          >
-            <Form form={form}>
-              <Form.Item
-                label={null}
-                name="name"
-                rules={[{ required: true, message: messages.createModal.nameRequired }]}
-              >
-                <Input placeholder={messages.createModal.namePlaceholder} />
-              </Form.Item>
-            </Form>
-          </Modal>
-        </>
-      )
-      }
-    </DashboardContainer >
-  );
-};
-
-/**
- * 敏感词配置业务层组件
- * 使用 Xviwer(DynamicTable) 实现敏感词库列表与工具栏，通过 eventEmit 向外抛事件（事件名：sensitive_ 前缀 + 行为）。
- * - 网络层：推荐通过 server 注入，兼容 url/token/role 直传。
- * - 样式：支持 styles 全局主题，与默认主题合并后下发给 DashboardContainer、Xviwer。
- * - i18n：通过 locale / messages 支持中英日，默认 zh。
- */
-const SensitiveView: React.FC<{
-  server?: SensitiveServer;
-  url?: string;
-  token?: string;
-  role?: string;
-  styles?: Styles;
-  CustomComponents?: CustomComponents;
-  eventsEmit?: (eventName: string, data: any) => void;
-  locale?: SensitiveLocale;
-  messages?: Partial<SensitiveMessages>;
-}> = (props) => {
-  const { locale = 'zh', messages, ...rest } = props;
-  return (
-    <SensitiveI18nProvider locale={locale} messages={messages}>
-      <SensitiveViewContent {...rest} />
-    </SensitiveI18nProvider>
-  );
-};
-
-export default SensitiveView;
-export type { SensitiveLocale, SensitiveMessages } from './i18n';
-export { getSensitiveMessages, useSensitiveI18n, SensitiveI18nProvider, SensitiveI18nContext, interpolate } from './i18n';