@gientech/modual 2.0.4 → 2.0.5

package/src/modules/modelManage/const.ts

@@ -0,0 +1,51 @@
+export const MODEL_TYPE_OPTIONS = [
+  { value: 1, label: 'Baichuan' },
+  { value: 2, label: 'Qwen' },
+  { value: 3, label: 'GLM' },
+  { value: 4, label: 'openAI' },
+];
+
+export const MODEL_USE_TYPE_OPTIONS = [
+  { value: 1, label: 'LLM大语言模型' },
+  { value: 2, label: 'Embedding嵌入' },
+  { value: 3, label: 'rerank排序' },
+  { value: 4, label: 'MultiModel图片解析' },
+];
+
+export const statusColorMap = {
+  success: 'green',
+  error: 'red',
+  warning: 'orange',
+  processing: 'blue',
+  info: 'cyan',
+  default: 'default',
+};
+
+export const statusArr = [
+  { statusType: 'success', value: '可用', status: 1 },
+  { statusType: 'error', value: '不可用', status: 0 },
+  { statusType: 'warning', value: '检测中', status: 2 },
+];
+
+type StatusColorKey = keyof typeof statusColorMap;
+
+export const getStatusColor = (statusType: unknown): string => {
+  if (typeof statusType === 'string' && (statusType as string) in statusColorMap) {
+    return statusColorMap[statusType as StatusColorKey];
+  }
+  return statusColorMap.default;
+};
+
+export enum OPT_BTN {
+  DATE = 0,
+  VIEW,
+  ERROR,
+  AUTHORIZE,
+  DELETE,
+  ANALYSIS_OR_EXTRACT,
+  DOWNLOAD,
+  EDIT,
+  ADD,
+  ANALYSIS_CONFIG,
+  AUTHORIZE_CONFIG,
+}

package/src/modules/modelManage/index.tsx

@@ -0,0 +1,606 @@
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { message, Modal, Badge, Tooltip } from 'antd';
+import { Plus } from 'lucide-react';
+import { DashboardContainer, defaultTheme, Styles, Button } from '@mxmweb/zui';
+import { Xviwer, CustomComponents } from '@mxmweb/xviewer';
+
+import EmptyImg from './assets/empty.png';
+import AxiosInstance from './server';
+import ConfigDrawer from './ConfigDrawer';
+import ReplaceModal from './ReplaceModal';
+import { getStatusColor, statusArr, OPT_BTN } from './const';
+
+import '@mxmweb/zui/style.css';
+import '@mxmweb/rtext/style.css';
+
+const { confirm } = Modal;
+
+const initPage = {
+  pageNum: 1,
+  pageSize: 1000,
+};
+interface ModelManageViewProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  styles?: Styles;
+  CustomComponents?: CustomComponents;
+  eventsEmit?: (name: string, data: any) => void;
+  showModelReplace?: boolean;
+  getBtnDisabled?: (type: OPT_BTN, permission: number) => boolean;
+}
+
+const StatusComponent = (props: any) => {
+  const { value, cell } = props;
+  const color = getStatusColor(props.cell.statusType);
+  if (value == '不可用') {
+    return (
+      <Tooltip title={cell.errorMsg}>
+        <div className="flex items-center gap-2">
+          <Badge color={color} text={value} />
+        </div>
+      </Tooltip>
+    );
+  } else {
+    return <Badge color={color} text={value} />;
+  }
+};
+
+export default function ModelManageView(props: ModelManageViewProps) {
+  const { url, token, role, CustomComponents, eventsEmit, getBtnDisabled, showModelReplace } =
+    props;
+
+  const [status, setStatus] = useState<any>({
+    container: 'ready',
+    content: 'ready',
+  });
+
+  // 创建ref来访问核心组件实例
+  const coreRef = useRef<any>(null);
+  const [data, setData] = useState<
+    {
+      id: string;
+      data?: any[];
+    }[]
+  >(); // 存储核心组件渲染的模型列表
+
+  // 轮询定时器引用，避免重复定时与内存泄漏
+  const pollTimerRef = useRef<any>(null);
+
+  // 检测状态按钮loading
+  const [testBtnLoading, setTestBtnLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modelList, setModalList] = useState([]); //原始列表
+  // 抽屉状态管理
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [drawerTitle, setDrawerTitle] = useState('');
+  const [modelInfo, setModelInfo] = useState<any>();
+
+  // 使用类型options
+  const [modelUseTypeOpt, setModelUseTypeOpt] = useState<{ label: string; value: string }[]>([]);
+  const [modelProtocolsOpt, setModelProtocolsOpt] = useState<{ label: string; value: string }[]>(
+    []
+  );
+  const {
+    getModelList,
+    delModelById,
+    createModel,
+    updateModelById,
+    getUseTypeList,
+    getModelProtocolsList,
+    testStatus,
+    replaceModel,
+    checkModel,
+  } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit: eventsEmit,
+  });
+
+  // 模拟应用初始化过程
+  useEffect(() => {
+    setStatus((prev: any) => ({ ...prev, content: 'loading' }));
+    // handleModelList();
+    pollFetchList();
+    handleFetchList();
+  }, []);
+
+  useEffect(() => {
+    if (drawerVisible) {
+    }
+  }, [drawerVisible]);
+
+  const handleData = (data: any[]) => {
+    return (data || []).map((_t, i) => {
+      let status = statusArr.find((s: any) => s.status == _t.status);
+      return {
+        id: _t.id,
+        data: [
+          { columnId: 'modelName', value: _t.modelName },
+          {
+            columnId: 'modelProtocol',
+            value: _t.modelProtocol,
+            type: 'customized',
+          },
+          { columnId: 'type', value: _t.type, type: 'customized' },
+          { columnId: 'dec', value: _t.dec },
+          {
+            columnId: 'status',
+            ...status,
+            type: 'customized',
+            errorMsg: _t.errorMsg,
+          },
+          {
+            columnId: 'actions',
+            value: 'edit',
+            label: '编辑',
+            status: _t.status,
+            type: 'action',
+            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, _t.permission),
+          },
+          {
+            columnId: 'actions',
+            value: 'auth',
+            label: '授权',
+            type: 'action',
+            status: _t.status,
+            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.AUTHORIZE, _t.permission),
+          },
+          {
+            columnId: 'actions',
+            value: 'delete',
+            label: '删除',
+            type: 'action',
+            status: _t.status,
+            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.AUTHORIZE, _t.permission),
+          },
+          { columnId: 'url', value: _t.url },
+          { columnId: 'apiKey', value: _t.apiKey },
+          { columnId: 'modelIde', value: _t.modelIde },
+          { columnId: 'thinking', value: _t.thinking },
+        ],
+      };
+    });
+  };
+
+  const handleFetchList = async () => {
+    try {
+      const [useTypeRes, modelProtocolsRes] = await Promise.allSettled([
+        getUseTypeList(),
+        getModelProtocolsList(),
+      ]);
+
+      if (useTypeRes.status === 'fulfilled' && useTypeRes.value) {
+        setModelUseTypeOpt(
+          (useTypeRes.value || []).map((o: any) => ({ ...o, value: Number(o.value) }))
+        );
+      }
+
+      if (modelProtocolsRes.status === 'fulfilled' && modelProtocolsRes.value) {
+        setModelProtocolsOpt(
+          (modelProtocolsRes.value || []).map((o: any) => ({ ...o, value: Number(o.value) }))
+        );
+      }
+    } catch (e) {
+      console.error('[TableApiError]  getTableList:', e);
+    }
+  };
+
+  const handleModelList = async () => {
+    try {
+      const res = await getModelList(initPage);
+
+      if (res.records) {
+        const _data = handleData(res.records);
+        const _list = (res.records || []).map((c: any) => ({
+          value: c.id,
+          label: c.modelName,
+          useType: c.type,
+          status: c.status,
+        }));
+        setModalList(_list);
+        setData(_data || []);
+        setStatus((prev: any) => ({ ...prev, content: 'ready' }));
+        return _data || [];
+      }
+    } catch (e) {
+      console.error('[TableApiError]  getTableList:', e);
+    }
+  };
+
+  // 轮询 handleFetchList，直到所有 status 完成
+  const pollFetchList = async () => {
+    const latest = await handleModelList();
+    const finished = isAllFinished(latest || []);
+    if (!finished) {
+      if (pollTimerRef.current) {
+        clearTimeout(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+      pollTimerRef.current = setTimeout(() => {
+        pollFetchList();
+      }, 5000);
+    } else {
+      if (pollTimerRef.current) {
+        clearTimeout(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+    }
+  };
+
+  // 检查所有数据及其 children 的 status 是否都不是 '11' 或 '20'
+  function isAllFinished(data: any[]): boolean {
+    if (!Array.isArray(data)) return true;
+
+    for (const item of data) {
+      if (item.data) {
+        const statusCell = item.data.find((d: any) => d.columnId === 'status');
+        // 导入中 20，导入中未建表 11，自动生成描述生成中，这三个状态时，轮询
+        if (statusCell && statusCell.status === 2) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  const viewConfig = useMemo(
+    () => ({
+      label: '数据库表格',
+      defaultActiveId: 'model-table',
+      model: null,
+      views: [
+        {
+          label: '模型',
+          id: 'model-table',
+          type: 'table' as const,
+          viewBehavior: 'pagination' as const, //or pagination
+          allowMultiSelect: false,
+          viewPageSize: 10,
+          columns: [
+            { id: 'modelName', title: '模型名称', type: 'label' },
+            {
+              id: 'modelProtocol',
+              title: '模型传输协议',
+              type: 'customized',
+              component: (props: any) => {
+                const { value } = props;
+                const modelProtocol = modelProtocolsOpt.find((o: any) => o.value == value)?.label;
+                return <span>{modelProtocol}</span>;
+              },
+            },
+            {
+              id: 'type',
+              title: '使用类型',
+              type: 'customized',
+              component: (props: any) => {
+                const { value } = props;
+                const type = modelUseTypeOpt.find((o: any) => o.value == value)?.label;
+                return <span>{type}</span>;
+              },
+            },
+            { id: 'dec', title: '说明', type: 'paragraph' },
+            {
+              id: 'status',
+              title: '状态',
+              type: 'customized',
+              component: <StatusComponent />,
+              helpText:
+                '当前模型状态为初次新增校验状态，若模型下线，此状态不会主动更新，需手动执行模型删除',
+            },
+            {
+              id: 'actions',
+              title: '操作',
+              type: 'customized',
+              component: (props: any) => {
+                const { value, cell, row } = props;
+                const { disabled, label, status } = cell;
+                if (status == 2) {
+                  return (
+                    <Tooltip title="检测中，请稍后">
+                      <Button mode="text" label={label} disabled={true} />
+                    </Tooltip>
+                  );
+                } else if (disabled) {
+                  return (
+                    <Tooltip title="角色无权限操作">
+                      <Button mode="text" label={label} disabled={disabled} />
+                    </Tooltip>
+                  );
+                } else {
+                  return (
+                    <Button
+                      mode="text"
+                      label={label}
+                      onClick={() => handleEventsEmit(`table_action_${value}`, row, undefined)}
+                    />
+                  );
+                }
+              },
+            },
+          ],
+          toolbar: [
+            {
+              type: 'button' as const,
+              btnType: 'primary' as const,
+              key: 'add',
+              label: '新建',
+              icon: <Plus />,
+            },
+            ...(showModelReplace
+              ? [
+                  {
+                    type: 'customized' as const,
+                    key: 'test',
+                    render: () => {
+                      return (
+                        <Button
+                          loading={testBtnLoading}
+                          mode="primary"
+                          label="模型状态检测"
+                          onClick={() => {
+                            handleEventsEmit('toolbar_test');
+                          }}
+                        />
+                      );
+                    },
+                  },
+                  {
+                    type: 'button' as const,
+                    btnType: 'primary' as const,
+                    key: 'replace',
+                    label: '模型替换',
+                  },
+                ]
+              : []),
+          ],
+        },
+      ],
+    }),
+    [data, modelUseTypeOpt, modelProtocolsOpt, testBtnLoading, showModelReplace]
+  );
+
+  // 自定义空数据组件
+  const EmptyData: React.FC = () => (
+    <div className="flex flex-col items-center justify-center h-full">
+      <div className="text-xl font-semibold mb-3" style={{ color: '#374151' }}>
+        <img src={EmptyImg} width={120} />
+      </div>
+      <div className="text-base mb-6" style={{ color: '#6b7280' }}>
+        暂无数据，请先新建模型
+      </div>
+      <div className="flex gap-3">
+        <Button
+          mode="primary"
+          label="新建模型"
+          onClick={() => {
+            setDrawerTitle('新建');
+            setDrawerVisible(true);
+          }}
+        />
+      </div>
+    </div>
+  );
+
+  // 事件分流函数，先处理核心层UI/动画，再决定是否向上透传
+  async function handleEventsEmit(name: string, data?: any, appFn?: any) {
+    console.log('[adopter] mergedEventsEmit', name, data, appFn);
+    // 1. 先处理核心层UI/动画/数据
+    switch (name) {
+      case 'toolbar_add': {
+        setDrawerTitle('新建');
+        setDrawerVisible(true);
+        break;
+      }
+      case 'toolbar_test': {
+        setTestBtnLoading(true);
+        const res = await testStatus();
+        if (res) {
+          setTestBtnLoading(false);
+          await pollFetchList();
+          message.success('模型检测中，请耐心等待状态更新！');
+        }
+        break;
+      }
+      case 'toolbar_replace': {
+        setModalVisible(true);
+
+        break;
+      }
+      case 'table_action_delete': {
+        try {
+          const name = data.data.find((d: any) => d.columnId == 'modelName').value;
+          const res = await checkModel(name);
+          if (res > 0) {
+            confirm({
+              title: '删除模型',
+              content: (
+                <div style={{ marginRight: '20px' }}>
+                  当前模型在系统内已被配置使用，删除可能影响文档解析、问答、多模态能力使用等，请您先使用“模型一键替换”能力将该模型替换为同类型模型，再删除模型
+                </div>
+              ),
+              okText: '确认',
+              cancelText: '取消',
+            });
+          } else {
+            const name = data.data.find((d: any) => d.columnId == 'modelName').value;
+            confirm({
+              title: '确认删除？',
+              content: `确定要删除模型 “${name}” 吗？此操作不可恢复。`,
+              okText: '删除',
+              cancelText: '取消',
+              async onOk() {
+                const res = await delModelById(data.id);
+                if (res && coreRef?.current) {
+                  coreRef?.current.appFn.removeItem(data.id);
+                  message.success(`删除成功`);
+                }
+              },
+            });
+          }
+        } catch (e) {
+          console.error('删除表数据失败', e);
+        }
+        break;
+      }
+      case 'table_action_edit': {
+        setDrawerTitle('编辑');
+        setDrawerVisible(true);
+        setModelInfo(data);
+        break;
+      }
+      //新增模型
+      case 'form_submitted_add': {
+        try {
+          const _data = data.fields.reduce((acc: any, item: any) => {
+            acc[item.name] = item.value;
+            return acc;
+          }, {});
+          const res = await createModel({
+            ..._data,
+          });
+          if (res) {
+            let status = statusArr.find((s: any) => s.status == res.status);
+            const newModel = {
+              id: res.id,
+              data: [
+                ...(Object.keys(res) || []).map((key: any) => {
+                  return {
+                    columnId: key,
+                    value: (res as any)[key],
+                    ...((key == 'modelProtocol' || key == 'type') && {
+                      type: 'customized',
+                    }),
+                    ...(key == 'status' && {
+                      ...status,
+                      type: 'customized',
+                      errorMsg: (res as any).errorMsg,
+                    }),
+                  };
+                }),
+                { columnId: 'actions', value: 'edit', label: '编辑', type: 'action' },
+                { columnId: 'actions', value: 'auth', label: '授权', type: 'action' },
+                { columnId: 'actions', value: 'delete', label: '删除', type: 'action' },
+              ],
+            };
+            coreRef?.current?.appFn?.addItem(newModel, { animate: true, position: 'start' });
+            message.success('模型新增成功！');
+          }
+        } catch (e) {
+          console.error('保存失败！', e);
+        } finally {
+          handleDrawerClose();
+        }
+        break;
+      }
+
+      //修改模型配置
+      case 'form_submitted_edit': {
+        try {
+          const _data = data.fields.reduce((acc: any, item: any) => {
+            acc[item.name] = item.value;
+            return acc;
+          }, {});
+
+          const res = await updateModelById({
+            ..._data,
+            id: modelInfo.id,
+          });
+          if (res) {
+            let status = statusArr.find((s: any) => s.status == res.status);
+            const patch = {
+              ...modelInfo,
+              data: modelInfo.data.map((m: any) => {
+                if (res[m.columnId] !== null && res[m.columnId] !== undefined) {
+                  if (m.columnId == 'status') {
+                    return {
+                      ...m,
+                      ...status,
+                    };
+                  } else {
+                    m.value = res[m.columnId];
+                  }
+                }
+                return m;
+              }),
+            };
+            coreRef?.current?.appFn?.updateItem(patch, modelInfo?.id);
+            message.success('模型编辑成功！');
+          }
+        } catch (e) {
+          console.error('保存失败！', e);
+        } finally {
+          handleDrawerClose();
+        }
+        break;
+      }
+
+      case 'replace_model': {
+        await handleModelList();
+        setModalVisible(false);
+        break;
+      }
+      case 'close_model': {
+        setModalVisible(false);
+        break;
+      }
+
+      default:
+        // 2. 透传到业务层（如有需要）
+        if (typeof props.eventsEmit === 'function') {
+          props.eventsEmit(name, data);
+        }
+        break;
+    }
+  }
+  const handleDrawerClose = () => {
+    setDrawerVisible(false);
+    setModelInfo(undefined);
+  };
+  return (
+    <DashboardContainer title="模型管理">
+      <Xviwer
+        dataSource={data}
+        ref={coreRef}
+        eventsEmit={handleEventsEmit}
+        status={status}
+        CustomComponents={{
+          EmptyData,
+          ...CustomComponents,
+        }}
+        styles={{
+          theme: {
+            ...defaultTheme,
+            colors: {
+              ...defaultTheme.colors,
+              tableFirstColumnBg: '#ffffff',
+              tableLastColumnBg: '#ffffff',
+              paginationBackground: '#ffffff',
+              subTableBackground: '#F5F5F5',
+              tableHeaderBg: '#F5F5F5',
+            },
+          },
+          mode: 'light',
+        }}
+        {...viewConfig}
+      />
+      {/* 右侧抽屉 - 添加编辑模型 */}
+      <ConfigDrawer
+        drawerTitle={drawerTitle}
+        drawerVisible={drawerVisible}
+        handleDrawerClose={handleDrawerClose}
+        modelInfo={modelInfo}
+        modelUseTypeOpt={modelUseTypeOpt}
+        modelProtocolsOpt={modelProtocolsOpt}
+        eventsEmit={handleEventsEmit}
+      />
+      <ReplaceModal
+        modelVisible={modalVisible}
+        options={modelList}
+        eventsEmit={handleEventsEmit}
+        replaceModel={replaceModel}
+      />
+    </DashboardContainer>
+  );
+}