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

package/src/modules/knowledgebaseDetails/KnowledgeBaseDetails.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { DashboardContainer, defaultTheme, deepMergeTheme, type Styles } from '@mxmweb/zui';
+import type { CustomComponents } from '@mxmweb/xviewer';
+import '@mxmweb/zui/style.css';
+import styled from 'styled-components';
+
+import { KnowledgeBaseSummaryCard } from './components/KnowledgeBaseSummaryCard';
+import { KnowledgeParseModule } from './modules/KnowledgeParseModule';
+import { FaqModule } from './modules/FaqModule';
+import { UploadManagementModule } from './modules/UploadManagementModule';
+import { ConfigModule } from './modules/ConfigModule';
+import { RetrievalTestModule } from './modules/RetrievalTestModule';
+import type {
+  KnowledgeBaseDetailsModuleKey,
+  KnowledgeBaseDetailsModuleRenderProps,
+  KnowledgeBaseDetailsModulesConfig,
+} from './modules/types';
+import type { KnowledgeBaseDetailsServer } from './servers';
+
+export interface KnowledgeBaseDetailsProps {
+  /** 知识库 ID（用于知识解析等模块的数据请求） */
+  kbId?: string | number;
+  /** 外部注入的网络层 client（推荐） */
+  server?: KnowledgeBaseDetailsServer;
+  /** 业务 API baseURL（可选；若不注入 server，可用于业务层自行初始化） */
+  url?: string;
+  /** 业务 token（可选；若不注入 server，可用于业务层自行初始化） */
+  token?: string;
+  knowledgeBaseId?: string;
+  styles?: Styles;
+  CustomComponents?: CustomComponents;
+  eventsEmit?: (name: string, data: any) => void;
+  /**
+   * 模块配置入口（用于隐藏/改名）
+   *
+   * 示例：
+   * {
+   *   faq: { hidden: true },
+   *   config: { label: '参数配置' }
+   * }
+   */
+  modulesConfig?: KnowledgeBaseDetailsModulesConfig;
+}
+
+const MODULE_ORDER: KnowledgeBaseDetailsModuleKey[] = [
+  'knowledge-parse',
+  'faq',
+  'upload-management',
+  'config',
+  'retrieval-test',
+];
+
+const MODULES_REGISTRY: Record<
+  KnowledgeBaseDetailsModuleKey,
+  { label: string; Component: React.FC<KnowledgeBaseDetailsModuleRenderProps> }
+> = {
+  'knowledge-parse': { label: '知识解析', Component: KnowledgeParseModule },
+  faq: { label: 'FAQ', Component: FaqModule },
+  'upload-management': { label: '上传文件管理', Component: UploadManagementModule },
+  config: { label: '配置', Component: ConfigModule },
+  'retrieval-test': { label: '检索测试', Component: RetrievalTestModule },
+};
+
+const KnowledgeBaseDetails: React.FC<KnowledgeBaseDetailsProps> = (props) => {
+  const { styles, CustomComponents, eventsEmit, modulesConfig, server } = props;
+  const kbId = props.kbId ?? props.knowledgeBaseId;
+
+  const coreRef = useRef<any>(null);
+  const [activeTab, setActiveTab] = useState<KnowledgeBaseDetailsModuleKey>('knowledge-parse');
+  const [activeId, setActiveId] = useState('file-management');
+
+  const [appStatus] = useState<any>({
+    app: 'ready',
+    container: 'ready',
+    content: 'ready',
+  });
+
+  const mergedTheme = useMemo(() => {
+    return deepMergeTheme({ theme: defaultTheme, mode: 'light' }, styles || {});
+  }, [styles]);
+
+  const summaryTabs = useMemo(() => {
+    return MODULE_ORDER.flatMap((key) => {
+      const cfg = modulesConfig?.[key];
+      if (cfg?.hidden) return [];
+      return [{ key, label: cfg?.label || MODULES_REGISTRY[key].label }];
+    });
+  }, [modulesConfig]);
+
+  useEffect(() => {
+    if (!summaryTabs.length) return;
+    const stillVisible = summaryTabs.some((t) => t.key === activeTab);
+    if (!stillVisible) setActiveTab(summaryTabs[0].key as KnowledgeBaseDetailsModuleKey);
+  }, [activeTab, summaryTabs]);
+
+  const ActiveModule = useMemo(() => {
+    const key = summaryTabs.some((t) => t.key === activeTab)
+      ? activeTab
+      : (summaryTabs[0]?.key as KnowledgeBaseDetailsModuleKey);
+    return MODULES_REGISTRY[key]?.Component || KnowledgeParseModule;
+  }, [activeTab, summaryTabs]);
+
+  const moduleRenderProps = useMemo<KnowledgeBaseDetailsModuleRenderProps>(() => {
+    return {
+      kbId,
+      coreRef,
+      appStatus,
+      styles: mergedTheme,
+      server,
+      eventsEmit: (name, data, _innerFn) => eventsEmit?.(name, data),
+      CustomComponents,
+      // 不做 mock：业务层拉取数据后传入（可用 children 实现子级 table）
+      tableData: [],
+      activeId,
+      setActiveId,
+    };
+  }, [CustomComponents, activeId, appStatus, eventsEmit, kbId, mergedTheme, server]);
+
+  return (
+    <DashboardContainer
+      title="回归测试0126"
+      goBack={() => {}}
+      styles={mergedTheme}
+    >
+      <DetailsLayout className="knowledgebase-details-layout">
+        <KnowledgeBaseSummaryCard
+          title="回归测试0126"
+          tags="暂无标签"
+          fileCount={0}
+          size="0M"
+          activeTab={activeTab}
+          onTabChange={(tab) => setActiveTab(tab as KnowledgeBaseDetailsModuleKey)}
+          styles={mergedTheme}
+          tabs={summaryTabs}
+        />
+
+        <DetailsModuleArea className="knowledgebase-details-module-area">
+          {summaryTabs.length ? <ActiveModule {...moduleRenderProps} /> : null}
+        </DetailsModuleArea>
+      </DetailsLayout>
+    </DashboardContainer>
+  );
+};
+
+export default KnowledgeBaseDetails;
+
+const DetailsLayout = styled.div.attrs({
+  className: 'knowledgebase-details-layout',
+})`
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const DetailsModuleArea = styled.div.attrs({
+  className: 'knowledgebase-details-module-area',
+})`
+  flex: 1;
+  border: 1px solid #E5E7EB;
+  padding: 16px;
+  border-radius: 8px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+`;
+

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

@@ -0,0 +1,193 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FileText } from 'lucide-react';
+import { defaultTheme, type Styles } from '@mxmweb/zui';
+
+export interface KnowledgeBaseSummaryTabItem {
+  key: string;
+  label: string;
+}
+
+// 摘要卡片组件
+export interface KnowledgeBaseSummaryCardProps {
+  title: string;
+  tags?: string;
+  fileCount?: number;
+  size?: string;
+  activeTab?: string;
+  onTabChange?: (tab: string) => void;
+  tabs: KnowledgeBaseSummaryTabItem[];
+  styles?: Styles;
+}
+
+const SummaryCardWrapper = styled.div.attrs({
+  className: 'knowledgebase-summary-card',
+})<{ theme: any }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  margin-bottom: 16px;
+  background: ${({ theme }) => theme.colors?.background || '#FFFFFF'};
+  border-radius: ${({ theme }) => theme.space?.radius || '8px'};
+  border: 1px solid ${({ theme }) => theme.colors?.border || '#E5E6EB'};
+`;
+
+const SummaryLeft = styled.div.attrs({
+  className: 'knowledgebase-summary-left',
+})`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`;
+
+const SummaryIcon = styled.div.attrs({
+  className: 'knowledgebase-summary-icon',
+})<{ theme: any }>`
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    135deg,
+    ${({ theme }) => theme.colors?.primary || '#4E6EF2'} 0%,
+    ${({ theme }) => theme.colors?.secondary || '#6D86F5'} 100%
+  );
+  border-radius: ${({ theme }) => theme.space?.radius || '8px'};
+  color: white;
+  font-size: 24px;
+`;
+
+const SummaryInfo = styled.div.attrs({
+  className: 'knowledgebase-summary-info',
+})`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const SummaryTitle = styled.div.attrs({
+  className: 'knowledgebase-summary-title',
+})<{ theme: any }>`
+  font-size: 16px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors?.text || '#1D2129'};
+`;
+
+const SummaryMeta = styled.div.attrs({
+  className: 'knowledgebase-summary-meta',
+})<{ theme: any }>`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors?.textSecondary || '#4E5969'};
+`;
+
+const SummaryLabel = styled.span.attrs({
+  className: 'knowledgebase-summary-label',
+})<{ theme: any }>`
+  color: ${({ theme }) => theme.colors?.textTertiary || '#86909C'};
+`;
+
+const SummaryTabs = styled.div.attrs({
+  className: 'knowledgebase-summary-tabs',
+})`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-bottom:-39px
+`;
+
+const TabItem = styled.button.attrs({
+  className: 'knowledgebase-summary-tab',
+})<{ $isActive: boolean; theme: any }>`
+  position: relative;
+  padding: 8px 0;
+  padding-bottom:15px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: ${({ $isActive }) => ($isActive ? '500' : '400')};
+  color: ${({ $isActive, theme }) =>
+    $isActive ? theme.colors?.primary || '#4E6EF2' : theme.colors?.textSecondary || '#4E5969'};
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors?.primary || '#4E6EF2'};
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.colors?.primary || '#4E6EF2'} 0%,
+      ${({ theme }) => theme.colors?.secondary || '#6D86F5'} 100%
+    );
+    border-radius: 1px;
+    transform: ${({ $isActive }) => ($isActive ? 'scaleX(1)' : 'scaleX(0)')};
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+`;
+
+export const KnowledgeBaseSummaryCard: React.FC<KnowledgeBaseSummaryCardProps> = ({
+  title,
+  tags = '暂无标签',
+  fileCount = 0,
+  size = '0M',
+  activeTab,
+  onTabChange,
+  styles,
+  tabs,
+}) => {
+  const theme = styles?.theme || defaultTheme;
+  const finalActiveTab = activeTab || tabs?.[0]?.key;
+
+  return (
+    <SummaryCardWrapper theme={theme}>
+      <SummaryLeft>
+        <SummaryIcon theme={theme}>
+          <FileText size={24} />
+        </SummaryIcon>
+        <SummaryInfo>
+          <SummaryTitle theme={theme}>{title}</SummaryTitle>
+          <SummaryMeta theme={theme}>
+            <span>
+              <SummaryLabel theme={theme}>标签：</SummaryLabel>
+              {tags}
+            </span>
+            <span>
+              <SummaryLabel theme={theme}>文件数：</SummaryLabel>
+              {fileCount}
+            </span>
+            <span>
+              <SummaryLabel theme={theme}>大小：</SummaryLabel>
+              {size}
+            </span>
+          </SummaryMeta>
+        </SummaryInfo>
+      </SummaryLeft>
+      <SummaryTabs>
+        {tabs.map((tab) => (
+          <TabItem
+            key={tab.key}
+            $isActive={finalActiveTab === tab.key}
+            theme={theme}
+            onClick={() => onTabChange?.(tab.key)}
+          >
+            {tab.label}
+          </TabItem>
+        ))}
+      </SummaryTabs>
+    </SummaryCardWrapper>
+  );
+};
+