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

package/src/modules/knowledgebaseDetails/components/fileManagementParts.tsx

@@ -1,534 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import styled from 'styled-components';
-import { Select } from 'antd';
-import { ArrowRightCircle, ChevronDown, PlayCircle, Trash2 } from 'lucide-react';
-import type { Styles } from '@mxmweb/zui';
-import { Icon } from '@mxmweb/zui-icons';
-
-/**
- * 获取文件类型对应图标（支持主题内自定义图标 URL / ReactNode）
- */
-export const getFileTypeIcon = (fileType: string, styles?: Styles): React.ReactNode => {
-  const icons = styles?.theme?.icons || {};
-  const ext = (fileType || '').toLowerCase();
-
-  const getIcon = (iconKey: string, defaultIconType: string): React.ReactNode => {
-    const customIcon = (icons as any)[iconKey];
-    if (customIcon) {
-      if (React.isValidElement(customIcon)) return customIcon;
-      if (typeof customIcon === 'string') {
-        return <img src={customIcon} alt={iconKey} style={{ width: 20, height: 20 }} />;
-      }
-    }
-    return <Icon type={defaultIconType} size={18} />;
-  };
-
-  if (ext === 'folder') return getIcon('folder', 'rag/folder');
-  if (ext === 'pdf') return getIcon('pdf', 'rag/pdf');
-  if (['doc', 'docx'].includes(ext)) return getIcon('word', 'rag/word');
-  if (['xls', 'xlsx', 'excel'].includes(ext)) return getIcon('excel', 'rag/excel');
-  if (['png', 'jpg', 'jpeg', 'gif', 'image'].includes(ext)) return getIcon('image', 'rag/pic');
-  if (['ppt', 'pptx'].includes(ext)) return getIcon('ppt', 'rag/ppt');
-  return <Icon type="rag/file" size={18} />;
-};
-
-/**
- * 文件名单元格自定义组件
- */
-export const FileNameCell: React.FC<{
-  value: any;
-  styles?: Styles;
-  /** DynamicTable customized cell 会注入 emit / row / cell / col */
-  emit?: (name: string, data?: any) => void;
-  row?: any;
-  cell?: any;
-  col?: any;
-}> = ({ value, styles, emit, row, cell, col }) => {
-  const fileName = typeof value === 'object' ? value.data : value;
-  const fileType =
-    // 优先从 cell 扩展字段读取（我们会保证 cell.value 始终是 primitive，避免表格错配时崩溃）
-    cell?.fileType ??
-    // 兼容历史：value 可能是 {data,fileType}
-    (typeof value === 'object' ? value.fileType : undefined);
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    emit?.('knowledgeparse_file_name_clicked', {
-      fileName,
-      fileType,
-      viewId: col?.id,
-      rowId: row?.id,
-      meta: row?.meta,
-      cell,
-    });
-  };
-
-  return (
-    <FileNameCellWrap>
-      {fileType ? <span className="file-name-cell-icon">{getFileTypeIcon(fileType, styles)}</span> : null}
-      <FileNameButton type="button" onClick={handleClick} title={fileName}>
-        {fileName}
-      </FileNameButton>
-    </FileNameCellWrap>
-  );
-};
-
-const FileNameCellWrap = styled.div.attrs({
-  className: 'knowledgebase-file-name-cell',
-})`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-
-  .file-name-cell-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-  }
-`;
-
-const FileNameButton = styled.button.attrs({
-  className: 'knowledgebase-file-name-button',
-})`
-  min-width: 0;
-  max-width: 220px;
-  display: inline-block;
-  border: none;
-  background: transparent;
-  padding: 0;
-  cursor: pointer;
-  text-align: left;
-  color: #2563eb;
-  font-weight: 500;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
-    border-radius: 6px;
-  }
-`;
-
-/**
- * 解析状态下拉选择组件
- */
-export const ParseStatusFilter: React.FC<{ onAction: (action: string, data: any) => void }> = ({ onAction }) => {
-  const [value, setValue] = React.useState<string>('all');
-
-  const handleChange = (val: string) => {
-    setValue(val);
-    onAction('filter_change', { filterType: 'parseStatus', value: val });
-  };
-
-  return (
-    <Select
-      value={value}
-      onChange={handleChange}
-      style={{ width: 150 }}
-      options={[
-        { label: '全部解析状态', value: 'all' },
-        { label: '解析成功', value: 'success' },
-        { label: '解析失败', value: 'failed' },
-        { label: '解析中', value: 'parsing' },
-        { label: '待解析', value: 'pending' },
-      ]}
-    />
-  );
-};
-
-/**
- * 版本管理：显示范围筛选（对齐平台“显示全部文件”下拉）
- *
- * - 通过 onAction('change', { value }) 将值回传给 XViewer toolbar
- * - value 默认 1（showType=1）
- */
-export const ShowAllFilesFilter: React.FC<{
-  onAction: (action: string, data: any) => void;
-  /** 默认 1 */
-  defaultValue?: number;
-  /** 可选：覆盖选项 */
-  options?: Array<{ label: string; value: number }>;
-}> = ({ onAction, defaultValue = 1, options }) => {
-  const opts =
-    options ||
-    [
-      { label: '显示全部文件', value: 1 },
-      { label: '仅显示当前版本', value: 2 },
-    ];
-
-  const [value, setValue] = React.useState<number>(defaultValue);
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const next = Number(e.target.value);
-    setValue(next);
-    onAction('change', { value: next });
-  };
-
-  return (
-    <SelectWrap>
-      <select className="show-all-files-select" value={value} onChange={handleChange}>
-        {opts.map((it) => (
-          <option key={it.value} value={it.value}>
-            {it.label}
-          </option>
-        ))}
-      </select>
-      <ChevronDown className="show-all-files-icon" size={16} />
-    </SelectWrap>
-  );
-};
-
-const SelectWrap = styled.div.attrs({
-  className: 'knowledgebase-show-all-files-filter',
-})`
-  position: relative;
-  height: 32px;
-  min-width: 168px;
-  display: inline-flex;
-  align-items: center;
-
-  .show-all-files-select {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    height: 32px;
-    width: 100%;
-    border-radius: 8px;
-    border: 1px solid #d0d5dd;
-    background: #fff;
-    padding: 0 34px 0 12px;
-    font-size: 14px;
-    color: #101828;
-    outline: none;
-  }
-
-  .show-all-files-select:focus-visible {
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
-    border-color: #2563eb;
-  }
-
-  .show-all-files-icon {
-    position: absolute;
-    right: 10px;
-    pointer-events: none;
-    color: #667085;
-  }
-`;
-
-/**
- * 更多操作下拉组件（符合参考图）
- *
- * - 视觉：按钮描边 + focus 高亮；下拉菜单阴影/圆角；支持禁用态
- * - 交互：点击切换展开；点击外部关闭；点击条目回传 onAction
- */
-export const MoreActionsButton: React.FC<{
-  onAction: (action: string, data: any) => void;
-  styles?: Styles;
-  /** XViewer 可能会透传选择信息，这里用 any 做兼容 */
-  [key: string]: any;
-}> = ({ onAction, styles, ...rest }) => {
-  const theme = styles?.theme;
-  const wrapRef = React.useRef<HTMLDivElement | null>(null);
-  const menuRef = React.useRef<HTMLDivElement | null>(null);
-  const [open, setOpen] = React.useState(false);
-  const [menuPos, setMenuPos] = React.useState<{ top: number; left: number; width: number }>({
-    top: 0,
-    left: 0,
-    width: 200,
-  });
-
-  // 兼容可能的选择参数（如果 XViewer 没有传，也不会影响）
-  const selectedCount =
-    (Array.isArray(rest.selectedIds) ? rest.selectedIds.length : undefined) ??
-    (Array.isArray(rest.selectedItems) ? rest.selectedItems.length : undefined) ??
-    (typeof rest.selectedCount === 'number' ? rest.selectedCount : 0);
-  const totalCount = typeof rest.totalCount === 'number' ? rest.totalCount : typeof rest.total === 'number' ? rest.total : 0;
-
-  React.useEffect(() => {
-    if (!open) return;
-    const onDocDown = (e: MouseEvent) => {
-      const wrapEl = wrapRef.current;
-      const menuEl = menuRef.current;
-      if (!wrapEl) return;
-      if (e.target instanceof Node && (wrapEl.contains(e.target) || !!menuEl?.contains(e.target))) return;
-      setOpen(false);
-    };
-    document.addEventListener('mousedown', onDocDown, true);
-    return () => document.removeEventListener('mousedown', onDocDown, true);
-  }, [open]);
-
-  const updateMenuPos = React.useCallback(() => {
-    const el = wrapRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    setMenuPos({
-      top: rect.bottom + 6,
-      left: rect.left,
-      width: Math.max(200, rect.width),
-    });
-  }, []);
-
-  React.useEffect(() => {
-    if (!open) return;
-    updateMenuPos();
-    // 捕获滚动：表格容器滚动也能触发更新
-    window.addEventListener('scroll', updateMenuPos, true);
-    window.addEventListener('resize', updateMenuPos);
-    return () => {
-      window.removeEventListener('scroll', updateMenuPos, true);
-      window.removeEventListener('resize', updateMenuPos);
-    };
-  }, [open, updateMenuPos]);
-
-  // 顶部工具栏「更多操作」保持为批量能力：批量解析 / 解析所有 / 批量转移 / 批量删除
-  const items: Array<{
-    key: 'batch_parse' | 'parse_all' | 'batch_transfer' | 'batch_delete';
-    label: string;
-    icon: React.ReactNode;
-    disabled?: boolean;
-    dividerAfter?: boolean;
-  }> = [
-    {
-      key: 'batch_parse',
-      label: '批量解析',
-      icon: <PlayCircle size={18} />,
-      // 只有在有选中行时才允许批量解析
-      disabled: selectedCount <= 0,
-    },
-    {
-      key: 'parse_all',
-      label: '解析所有',
-      icon: <PlayCircle size={18} />,
-      // 只要列表有数据就可以「解析所有」，不依赖多选
-      disabled: totalCount <= 0,
-      dividerAfter: true,
-    },
-    {
-      key: 'batch_transfer',
-      label: '批量转移',
-      icon: <ArrowRightCircle size={18} />,
-      // 先按参考图保持禁用，后续接入业务能力再放开
-      disabled: true,
-      dividerAfter: true,
-    },
-    {
-      key: 'batch_delete',
-      label: '批量删除',
-      icon: <Trash2 size={18} />,
-      // 先按参考图保持禁用，后续接入业务能力再放开
-      disabled: true,
-    },
-  ];
-
-  const handleToggle = () => {
-    if (!open) updateMenuPos();
-    setOpen((v) => !v);
-    onAction('more_actions', { action: 'toggle', open: !open });
-  };
-
-  const handleSelect = (key: (typeof items)[number]['key'], disabled?: boolean) => {
-    if (disabled) return;
-    setOpen(false);
-    // 将每个操作透传给上层，方便在 handleEventsEmit 中统一处理
-    onAction('more_actions', { action: key, selectedCount, totalCount });
-    // 同时在当前组件内打印，便于快速调试
-    // eslint-disable-next-line no-console
-    console.log('[KnowledgeParse MoreActions]', key, { selectedCount, totalCount });
-  };
-
-  return (
-    <MoreActionsWrap ref={wrapRef}>
-      <MoreActionsTrigger
-        type="button"
-        onClick={handleToggle}
-        $isOpen={open}
-        $primary={theme?.colors?.primary}
-        $border={theme?.colors?.border}
-        $text={theme?.colors?.text}
-      >
-        <span className="more-actions-trigger-text">更多操作</span>
-        <ChevronDown className="more-actions-trigger-icon" size={16} />
-      </MoreActionsTrigger>
-
-      {open
-        ? createPortal(
-            <MoreActionsPortalMenu
-              ref={menuRef}
-              role="menu"
-              $bg={theme?.colors?.dashboardBackground || theme?.colors?.background}
-              $border={theme?.colors?.border}
-              $top={menuPos.top}
-              $left={menuPos.left}
-              $minWidth={menuPos.width}
-            >
-              {items.map((it) => (
-                <React.Fragment key={it.key}>
-                  <MoreActionsItem
-                    role="menuitem"
-                    type="button"
-                    onClick={() => handleSelect(it.key, it.disabled)}
-                    disabled={it.disabled}
-                    $text={theme?.colors?.text}
-                    $textSecondary={theme?.colors?.textSecondary}
-                    $primary={theme?.colors?.primary}
-                  >
-                    <span className="more-actions-item-icon">{it.icon}</span>
-                    <span className="more-actions-item-label">{it.label}</span>
-                  </MoreActionsItem>
-                  {it.dividerAfter ? (
-                    <MoreActionsDivider $border={theme?.colors?.borderWeak || theme?.colors?.border} />
-                  ) : null}
-                </React.Fragment>
-              ))}
-            </MoreActionsPortalMenu>,
-            document.body
-          )
-        : null}
-    </MoreActionsWrap>
-  );
-};
-
-const MoreActionsWrap = styled.div.attrs({
-  className: 'knowledgebase-more-actions-wrap',
-})`
-  position: relative;
-  display: inline-flex;
-`;
-
-const MoreActionsTrigger = styled.button.attrs({
-  className: 'knowledgebase-more-actions-trigger',
-})<{
-  $isOpen: boolean;
-  $primary?: string;
-  $border?: string;
-  $text?: string;
-}>`
-  height: 36px;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 0 19px;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  border-radius: 3px;
-  border: 1px solid ${({ $isOpen, $primary, $border }) => ($isOpen ? $primary || '#3B82F6' : $border || '#D0D5DD')};
-  background: #fff;
-  color: ${({ $text }) => $text || '#111827'};
-  cursor: pointer;
-  user-select: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
-
-  &:hover {
-    background: #f9fafb;
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px
-      ${({ $primary }) => {
-        const p = $primary || '#3B82F6';
-        return p + '33';
-      }};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-    background: #fff;
-  }
-
-  &:disabled:hover {
-    background: #fff;
-  }
-
-  .more-actions-trigger-icon {
-    transition: transform 0.18s ease;
-    transform: ${({ $isOpen }) => ($isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
-  }
-`;
-
-const MoreActionsPortalMenu = styled.div.attrs({
-  className: 'knowledgebase-more-actions-menu-portal',
-})<{ $bg?: string; $border?: string; $top: number; $left: number; $minWidth: number }>`
-  position: fixed;
-  top: ${({ $top }) => $top}px;
-  left: ${({ $left }) => $left}px;
-  min-width: ${({ $minWidth }) => Math.max(220, $minWidth)}px;
-  padding: 10px;
-  border-radius: 12px;
-  border: 1px solid ${({ $border }) => $border || '#E5E7EB'};
-  background: ${({ $bg }) => $bg || '#FFFFFF'};
-  box-shadow:
-    0 12px 28px rgba(16, 24, 40, 0.16),
-    0 2px 6px rgba(16, 24, 40, 0.06);
-  z-index: 9999;
-`;
-
-const MoreActionsItem = styled.button.attrs({
-  className: 'knowledgebase-more-actions-item',
-})<{ $text?: string; $textSecondary?: string; $primary?: string }>`
-  width: 100%;
-  height: 44px;
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  border: none;
-  background: transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  color: ${({ $text }) => $text || '#111827'};
-  transition: background 0.12s ease, color 0.12s ease;
-
-  .more-actions-item-icon {
-    width: 24px;
-    height: 24px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: ${({ $primary }) => $primary || '#2563EB'};
-  }
-
-  .more-actions-item-label {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    flex: 1;
-    text-align: left;
-  }
-
-  &:hover:not(:disabled) {
-    background: rgba(37, 99, 235, 0.08);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    color: ${({ $textSecondary }) => $textSecondary || '#98A2B3'};
-    opacity: 1;
-    background: rgba(16, 24, 40, 0.04);
-
-    .more-actions-item-icon {
-      color: ${({ $textSecondary }) => $textSecondary || '#98A2B3'};
-    }
-  }
-`;
-
-const MoreActionsDivider = styled.div.attrs({
-  className: 'knowledgebase-more-actions-divider',
-})<{ $border?: string }>`
-  height: 1px;
-  margin: 6px 6px;
-  background: ${({ $border }) => $border || '#E5E7EB'};
-`;
-

package/src/modules/knowledgebaseDetails/components/index.ts

@@ -1,3 +0,0 @@
-export * from './KnowledgeBaseSummaryCard';
-export * from './fileManagementParts';
-

package/src/modules/knowledgebaseDetails/index.ts

@@ -1,3 +0,0 @@
-export { default } from './KnowledgeBaseDetails';
-export type { KnowledgeBaseDetailsProps } from './KnowledgeBaseDetails';
-

package/src/modules/knowledgebaseDetails/modules/ConfigModule.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { defaultTheme } from '@mxmweb/zui';
-import type { KnowledgeBaseDetailsModuleRenderProps } from './types';
-
-/**
- * 模块：配置
- * - 顶部 Tab：配置
- * - 内容：仅搭建模块框架（后续按需求完善，不预设 table 形态）
- */
-export const ConfigModule: React.FC<KnowledgeBaseDetailsModuleRenderProps> = ({
-  styles,
-}) => {
-  const theme = styles?.theme || defaultTheme;
-  return (
-    <ModuleWrapper theme={theme}>
-      <ModuleTitle theme={theme}>配置</ModuleTitle>
-      <ModuleDesc theme={theme}>模块框架已搭建，后续按业务拆分配置项/表单/校验/版本等。</ModuleDesc>
-    </ModuleWrapper>
-  );
-};
-
-const ModuleWrapper = styled.div.attrs({
-  className: 'knowledgebase-details-module-config',
-})<{ theme: any }>`
-  width: 100%;
-  background: ${({ theme }) => theme.colors?.dashboardBackground || theme.colors?.background || '#fff'};
-  border: 1px solid ${({ theme }) => theme.colors?.border || '#E5E6EB'};
-  border-radius: ${({ theme }) => theme.space?.radius || '8px'};
-  padding: 16px;
-`;
-
-const ModuleTitle = styled.div.attrs({
-  className: 'knowledgebase-details-module-config-title',
-})<{ theme: any }>`
-  font-size: 14px;
-  font-weight: 600;
-  color: ${({ theme }) => theme.colors?.text || '#1D2129'};
-  margin-bottom: 8px;
-`;
-
-const ModuleDesc = styled.div.attrs({
-  className: 'knowledgebase-details-module-config-desc',
-})<{ theme: any }>`
-  font-size: 13px;
-  color: ${({ theme }) => theme.colors?.textSecondary || '#4E5969'};
-  line-height: 1.6;
-`;
-

package/src/modules/knowledgebaseDetails/modules/FaqModule.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { defaultTheme } from '@mxmweb/zui';
-import type { KnowledgeBaseDetailsModuleRenderProps } from './types';
-
-/**
- * 模块：FAQ
- * - 顶部 Tab：FAQ
- * - 内容：仅搭建模块框架（后续按需求完善，不预设 table 形态）
- */
-const ModuleWrapper = styled.div.attrs({
-  className: 'knowledgebase-details-module-faq',
-})<{ theme: any }>`
-  width: 100%;
-  background: ${({ theme }) => theme.colors?.dashboardBackground || theme.colors?.background || '#fff'};
-  border: 1px solid ${({ theme }) => theme.colors?.border || '#E5E6EB'};
-  border-radius: ${({ theme }) => theme.space?.radius || '8px'};
-  padding: 16px;
-`;
-
-const ModuleTitle = styled.div.attrs({
-  className: 'knowledgebase-details-module-faq-title',
-})<{ theme: any }>`
-  font-size: 14px;
-  font-weight: 600;
-  color: ${({ theme }) => theme.colors?.text || '#1D2129'};
-  margin-bottom: 8px;
-`;
-
-const ModuleDesc = styled.div.attrs({
-  className: 'knowledgebase-details-module-faq-desc',
-})<{ theme: any }>`
-  font-size: 13px;
-  color: ${({ theme }) => theme.colors?.textSecondary || '#4E5969'};
-  line-height: 1.6;
-`;
-
-export const FaqModule: React.FC<KnowledgeBaseDetailsModuleRenderProps> = ({ styles }) => {
-  const theme = styles?.theme || defaultTheme;
-  return (
-    <ModuleWrapper theme={theme}>
-      <ModuleTitle theme={theme}>FAQ</ModuleTitle>
-      <ModuleDesc theme={theme}>模块框架已搭建，后续根据产品形态补充内容（不预设为表格）。</ModuleDesc>
-    </ModuleWrapper>
-  );
-};
-