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

package/src/modules/modelManage/index.tsx

@@ -0,0 +1,668 @@
+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';