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

package/src/modules/sensitive/index.tsx

@@ -0,0 +1,604 @@
+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';