@gientech/modual 1.3.2 → 1.3.3

package/src/modules/modelManage/index.tsx

@@ -0,0 +1,439 @@
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { message, Modal, Badge, Tooltip } from 'antd';
+import { Plus } from 'lucide-react';
+import { DashboardContainer, 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 { getStatusColor, statusArr, OPT_BTN } from './const';
+
+import '@mxmweb/zui/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;
+  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 } = 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 [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,
+  } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit: eventsEmit,
+  });
+
+  // 模拟应用初始化过程
+  useEffect(() => {
+    setStatus((prev: any) => ({ ...prev, content: 'loading' }));
+    handleFetchList();
+  }, []);
+
+  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: '编辑',
+            type: 'action',
+            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, _t.permission),
+          },
+          {
+            columnId: 'actions',
+            value: 'auth',
+            label: '授权',
+            type: 'action',
+            disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.AUTHORIZE, _t.permission),
+          },
+          {
+            columnId: 'actions',
+            value: 'delete',
+            label: '删除',
+            type: 'action',
+            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 [listRes, useTypeRes, modelProtocolsRes] = await Promise.allSettled([
+        getModelList(initPage),
+        getUseTypeList(),
+        getModelProtocolsList(),
+      ]);
+
+      if (listRes.status === 'fulfilled' && listRes.value) {
+        const _data = handleData(listRes.value.records);
+        setData(_data || []);
+        setStatus((prev: any) => ({ ...prev, content: 'ready' }));
+      }
+
+      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 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 } = cell;
+                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 />,
+            },
+          ],
+        },
+      ],
+    }),
+    [data, modelUseTypeOpt, modelProtocolsOpt]
+  );
+
+  // 自定义空数据组件
+  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 'table_action_delete': {
+        try {
+          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;
+      }
+
+      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,
+        }}
+        {...viewConfig}
+      />
+      {/* 右侧抽屉 - 添加编辑模型 */}
+      <ConfigDrawer
+        drawerTitle={drawerTitle}
+        drawerVisible={drawerVisible}
+        handleDrawerClose={handleDrawerClose}
+        modelInfo={modelInfo}
+        modelUseTypeOpt={modelUseTypeOpt}
+        modelProtocolsOpt={modelProtocolsOpt}
+        eventsEmit={handleEventsEmit}
+      />
+    </DashboardContainer>
+  );
+}

package/src/modules/modelManage/server.ts

@@ -0,0 +1,185 @@
+import axios from 'axios';
+
+type IDataSourceType = 'DataTable' | 'DirectDB';
+
+interface DatabaseApiProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  eventsEmit?: (name: string, data: any) => void;
+}
+
+const AxiosInstance = ({ url, token, role, eventsEmit }: DatabaseApiProps) => {
+  const axios$ = axios.create({
+    baseURL: url,
+    // 配置请求超时时间
+    timeout: 1000000,
+  });
+  // 请求拦截
+  axios$.interceptors.request.use((config: any) => {
+    let target_cookie = token;
+
+    const noA = ['user/login', 'user/kaptcha', 'user/regist'];
+    // dangerous behaviour
+    if (!target_cookie && !noA.some((item: string) => config.url.includes(item))) {
+      // 通过eventsEmit抛出认证错误事件，让调用层处理
+      if (eventsEmit) {
+        eventsEmit('request:error_auth', {
+          errorMsg: '未登录或token已过期',
+          redirect: '/login',
+        });
+      }
+      return Promise.reject(new Error('未登录或token已过期'));
+    }
+
+    config.headers.Authorization = target_cookie || '';
+    // 这里传中文会报错
+    config.headers.userName = role === '未登录用户' ? '' : role;
+    return config;
+  });
+
+  // 返回拦截
+  axios$.interceptors.response.use(
+    response => {
+      // 获取接口返回结果
+      const noA = ['user/kaptcha'];
+      const res = response.data;
+      if (noA.some((item: string) => response.config.url && response.config.url.includes(item))) {
+        return res;
+      }
+      if (res.size && res.type) {
+        return res;
+      }
+      const { success, errorMsg, errorCode } = res;
+
+      if (success) {
+        return res;
+      } else {
+        // 通过eventsEmit抛出业务错误事件，让调用层处理
+        if (eventsEmit) {
+          eventsEmit('request:error_business', {
+            errorCode,
+            errorMsg: errorMsg || '请求出错，请稍后再试',
+            response: res,
+          });
+        }
+      }
+      return false;
+    },
+    error => {
+      // 主动取消请求，不给报错信息
+      if (error.message === 'canceled') {
+        return Promise.reject(error);
+      }
+
+      // 通过eventsEmit抛出网络错误事件，让调用层处理
+      if (eventsEmit) {
+        let errorType = 'request:error_network';
+        let errorData: any = {
+          errorMsg: '网络请求失败',
+          error: error,
+        };
+
+        if (error?.response?.status === 401) {
+          errorType = 'request:error_auth';
+          errorData = {
+            errorMsg: '没有足够权限',
+            error: error,
+            redirect: '/login',
+          };
+        } else if (
+          error?.response?.data?.errorCode === '30013' ||
+          error?.response?.data?.errorCode === '30023'
+        ) {
+          errorType = 'request:error_business';
+          errorData = {
+            errorCode: error?.response?.data?.errorCode,
+            errorMsg: error?.response?.data?.message || '请求出错，请稍后再试',
+            error: error,
+          };
+        }
+
+        eventsEmit(errorType, errorData);
+      }
+      return Promise.reject(error);
+    }
+  );
+  // 获取表数据
+  const getModelList = async (params: any) => {
+    try {
+      const res: any = await axios$.get(`/allPage?${new URLSearchParams(params).toString()}`);
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('getModelList error:', e);
+      return false;
+    }
+  };
+
+  //删除模型
+  const delModelById = async (id: string | number) => {
+    try {
+      const res: any = await axios$.delete(`/delete?id=${id}`);
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('delModelById error:', e);
+    }
+  };
+
+  // 创建模型
+  const createModel = async (params: any) => {
+    try {
+      const res: any = await axios$.post(`/create`, params);
+
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('createModel error:', e);
+    }
+  };
+  // 编辑模型
+  const updateModelById = async (params: any) => {
+    try {
+      const res: any = await axios$.put(`/update`, params);
+
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('updateModelById error:', e);
+    }
+  };
+  //使用类型list
+  const getUseTypeList = async () => {
+    try {
+      const res: any = await axios$.get(`/getModelTypes`);
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('getUseTypeList error:', e);
+      return false;
+    }
+  };
+
+  //传输协议list
+  const getModelProtocolsList = async () => {
+    try {
+      const res: any = await axios$.get(`/getModelProtocols`);
+      const { success, data } = res;
+      if (success) return data;
+    } catch (e) {
+      console.log('getModelProtocolsList error:', e);
+      return false;
+    }
+  };
+  return {
+    getModelList,
+    delModelById,
+    createModel,
+    updateModelById,
+    getUseTypeList,
+    getModelProtocolsList,
+  };
+};
+
+export default AxiosInstance;

package/src/modules/nodegraph/index.tsx

@@ -0,0 +1 @@
+import { AiChat, type AppStatusManager } from '@mxmweb/aichat';

package/src/modules/search/assets/Icon-history.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<g id="Vector">
+<path d="M8 1C4.13438 1 1 4.13438 1 8C1 11.8656 4.13438 15 8 15C11.8656 15 15 11.8656 15 8C15 4.13438 11.8656 1 8 1ZM8 13.8125C4.79063 13.8125 2.1875 11.2094 2.1875 8C2.1875 4.79063 4.79063 2.1875 8 2.1875C11.2094 2.1875 13.8125 4.79063 13.8125 8C13.8125 11.2094 11.2094 13.8125 8 13.8125Z" fill="#888888"/>
+<path d="M10.7297 9.97811L8.50156 8.36718V4.5C8.50156 4.43125 8.44531 4.375 8.37656 4.375H7.625C7.55625 4.375 7.5 4.43125 7.5 4.5V8.80311C7.5 8.84374 7.51875 8.88124 7.55156 8.90467L10.1359 10.789C10.1922 10.8297 10.2703 10.8172 10.3109 10.7625L10.7578 10.1531C10.7984 10.0953 10.7859 10.0172 10.7297 9.97811Z" fill="#888888"/>
+</g>
+</g>
+</svg>