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

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

@@ -0,0 +1,534 @@
+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

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

package/src/modules/knowledgebaseDetails/index.ts

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

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

@@ -0,0 +1,49 @@
+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

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