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

package/src/modules/modelManage/index.tsx

@@ -1,668 +0,0 @@
-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 {
-  ModelManageI18nProvider,
-  useModelManageI18n,
-  interpolateModelManage,
-  type ModelManageLocale,
-  type ModelManageMessages,
-} from './i18n';
-
-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;
-  locale?: ModelManageLocale;
-  messages?: Partial<ModelManageMessages>;
-}
-
-const StatusComponent = (props: any) => {
-  const { value, cell } = props;
-  const color = getStatusColor(props.cell.statusType);
-  if (cell.status === 0) {
-    return (
-      <Tooltip title={cell.errorMsg}>
-        <div className="flex items-center gap-2">
-          <Badge color={color} text={value} />
-        </div>
-      </Tooltip>
-    );
-  }
-  return <Badge color={color} text={value} />;
-};
-
-function ModelManageViewContent(props: Omit<ModelManageViewProps, 'locale' | 'messages'>) {
-  const { url, token, role, CustomComponents, eventsEmit, getBtnDisabled, showModelReplace } =
-    props;
-  const { messages, getMessage, locale } = useModelManageI18n();
-
-  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,
-    getMessage,
-  });
-
-  // 模拟应用初始化过程
-  useEffect(() => {
-    setStatus((prev: any) => ({ ...prev, content: 'loading' }));
-    pollFetchList();
-    handleFetchList();
-    return () => {
-      if (pollTimerRef.current) {
-        clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = null;
-      }
-    }
-  }, []);
-
-  const handleData = (data: any[]) => {
-    return (data || []).map((_t) => {
-      const statusRow = statusArr.find((s: any) => s.status == _t.status);
-      const statusLabel =
-        _t.status === 1
-          ? messages.status.available
-          : _t.status === 0
-            ? messages.status.unavailable
-            : messages.status.checking;
-      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',
-            ...statusRow,
-            value: statusLabel,
-            type: 'customized',
-            errorMsg: _t.errorMsg,
-          },
-          {
-            columnId: 'actions',
-            value: 'edit',
-            label: messages.table.actionEdit,
-            status: _t.status,
-            type: 'action',
-            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, _t.permission),
-          },
-          {
-            columnId: 'actions',
-            value: 'auth',
-            label: messages.table.actionAuth,
-            type: 'action',
-            status: _t.status,
-            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.AUTHORIZE, _t.permission),
-          },
-          {
-            columnId: 'actions',
-            value: 'delete',
-            label: messages.table.actionDelete,
-            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 },
-          { columnId: 'maxTokens', value: _t.maxTokens },
-        ],
-      };
-    });
-  };
-
-  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(
-    () => ({
-      defaultActiveId: 'model-table',
-      model: null,
-      views: [
-        {
-          label: messages.table.viewLabel,
-          id: 'model-table',
-          type: 'table' as const,
-          viewBehavior: 'pagination' as const,
-          allowMultiSelect: false,
-          viewPageSize: 10,
-          paginationLocale: locale,
-          columns: [
-            { id: 'modelName', title: messages.table.columns.modelName, type: 'label' },
-            {
-              id: 'modelProtocol',
-              title: messages.table.columns.modelProtocol,
-              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: messages.table.columns.type,
-              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: messages.table.columns.dec, type: 'paragraph' },
-            {
-              id: 'status',
-              title: messages.table.columns.status,
-              type: 'customized',
-              component: <StatusComponent />,
-              helpText: messages.table.statusHelpText,
-            },
-            {
-              id: 'actions',
-              title: messages.table.columns.actions,
-              type: 'customized',
-              component: (props: any) => {
-                const { value, cell, row } = props;
-                const { disabled, label, status } = cell;
-                if (status == 2) {
-                  return (
-                    <Tooltip title={messages.table.tooltipChecking}>
-                      <Button mode="text" label={label} disabled={true} />
-                    </Tooltip>
-                  );
-                }
-                if (disabled) {
-                  return (
-                    <Tooltip title={messages.table.tooltipNoPermission}>
-                      <Button mode="text" label={label} disabled={disabled} />
-                    </Tooltip>
-                  );
-                }
-                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: messages.table.toolbar.add,
-              icon: <Plus />,
-            },
-            ...(showModelReplace
-              ? [
-                {
-                  type: 'customized' as const,
-                  key: 'test',
-                  render: () => (
-                    <Button
-                      loading={testBtnLoading}
-                      mode="primary"
-                      label={messages.table.toolbar.test}
-                      onClick={() => handleEventsEmit('toolbar_test')}
-                    />
-                  ),
-                },
-                {
-                  type: 'button' as const,
-                  btnType: 'primary' as const,
-                  key: 'replace',
-                  label: messages.table.toolbar.replace,
-                },
-              ]
-              : []),
-          ],
-        },
-      ],
-    }),
-    [messages, locale, 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' }}>
-        {messages.empty.noDataHint}
-      </div>
-      <div className="flex gap-3">
-        <Button
-          mode="primary"
-          label={messages.empty.createModelBtn}
-          onClick={() => {
-            setDrawerTitle(messages.drawer.titleNew);
-            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(messages.drawer.titleNew);
-        setDrawerVisible(true);
-        break;
-      }
-      case 'toolbar_test': {
-        setTestBtnLoading(true);
-        const res = await testStatus();
-        if (res) {
-          setTestBtnLoading(false);
-          await pollFetchList();
-          message.success(messages.message.testSuccess);
-        }
-        break;
-      }
-      case 'toolbar_replace': {
-        setModalVisible(true);
-        break;
-      }
-      case 'table_action_delete': {
-        try {
-          const modelName = data.data.find((d: any) => d.columnId == 'modelName').value;
-          const res = await checkModel(modelName);
-          if (res > 0) {
-            confirm({
-              title: messages.deleteConfirm.titleWhenInUse,
-              content: (
-                <div style={{ marginRight: '20px' }}>{messages.deleteConfirm.contentWhenInUse}</div>
-              ),
-              okText: messages.deleteConfirm.okText,
-              cancelText: messages.deleteConfirm.cancelText,
-            });
-          } else {
-            const displayName = data.data.find((d: any) => d.columnId == 'modelName').value;
-            confirm({
-              title: messages.deleteConfirm.title,
-              content: interpolateModelManage(messages.deleteConfirm.content, {
-                name: displayName,
-              }),
-              okText: messages.deleteConfirm.deleteOkText,
-              cancelText: messages.deleteConfirm.cancelText,
-              async onOk() {
-                const res = await delModelById(data.id);
-                if (res && coreRef?.current) {
-                  coreRef?.current.appFn.removeItem(data.id);
-                  message.success(messages.message.deleteSuccess);
-                }
-              },
-            });
-          }
-        } catch (e) {
-          console.error('删除表数据失败', e);
-        }
-        break;
-      }
-      case 'table_action_edit': {
-        console.log("=====+++", messages.drawer.titleEdit, data)
-        setDrawerTitle(messages.drawer.titleEdit);
-        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) {
-            const statusRow = statusArr.find((s: any) => s.status == res.status);
-            const statusLabel =
-              res.status === 1
-                ? messages.status.available
-                : res.status === 0
-                  ? messages.status.unavailable
-                  : messages.status.checking;
-            const newModel = {
-              id: res.id,
-              data: [
-                ...(Object.keys(res) || []).map((key: any) => {
-                  if (key === 'status') {
-                    return {
-                      columnId: key,
-                      value: statusLabel,
-                      ...statusRow,
-                      type: 'customized',
-                      errorMsg: (res as any).errorMsg,
-                    };
-                  }
-                  return {
-                    columnId: key,
-                    value: (res as any)[key],
-                    ...((key == 'modelProtocol' || key == 'type') && { type: 'customized' }),
-                  };
-                }),
-                {
-                  columnId: 'actions',
-                  value: 'edit',
-                  label: messages.table.actionEdit,
-                  type: 'action',
-                },
-                {
-                  columnId: 'actions',
-                  value: 'auth',
-                  label: messages.table.actionAuth,
-                  type: 'action',
-                },
-                {
-                  columnId: 'actions',
-                  value: 'delete',
-                  label: messages.table.actionDelete,
-                  type: 'action',
-                },
-              ],
-            };
-            coreRef?.current?.appFn?.addItem(newModel, { animate: true, position: 'start' });
-            message.success(messages.message.createSuccess);
-            handleDrawerClose();
-          }
-        } 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,
-          });
-          console.log("======res", res)
-          if (res) {
-            const statusRow = statusArr.find((s: any) => s.status == res.status);
-            const statusLabel =
-              res.status === 1
-                ? messages.status.available
-                : res.status === 0
-                  ? messages.status.unavailable
-                  : messages.status.checking;
-            const patch = {
-              ...modelInfo,
-              data: modelInfo.data.map((m: any) => {
-                if (res[m.columnId] !== null && res[m.columnId] !== undefined) {
-                  if (m.columnId == 'status') {
-                    return {
-                      ...m,
-                      ...statusRow,
-                      value: statusLabel,
-                    };
-                  }
-                  m.value = res[m.columnId];
-                }
-                return m;
-              }),
-            };
-            coreRef?.current?.appFn?.updateItem(patch, modelInfo?.id);
-            message.success(messages.message.editSuccess);
-            handleDrawerClose();
-          }
-        } catch (e) {
-          console.error('保存失败！', e);
-        }
-        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={messages.dashboard.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>
-  );
-}
-
-export default function ModelManageView(props: ModelManageViewProps) {
-  const { locale = 'zh', messages, ...rest } = props;
-  return (
-    <ModelManageI18nProvider locale={locale} messages={messages}>
-      <ModelManageViewContent {...rest} />
-    </ModelManageI18nProvider>
-  );
-}
-
-export type { ModelManageLocale, ModelManageMessages } from './i18n';
-export {
-  getModelManageMessages,
-  interpolateModelManage,
-  useModelManageI18n,
-  ModelManageI18nProvider,
-  ModelManageI18nContext,
-} from './i18n';