@gientech/modual 1.2.7 → 1.2.8

package/src/modules/modelManage/ConfigDrawer.tsx

@@ -0,0 +1,249 @@
+import { useState, useMemo, useRef } from 'react';
+import { Drawer } from 'antd';
+import { Button } from '@mxmweb/zui';
+import { Xviwer } from '@mxmweb/xviewer';
+
+import { X } from 'lucide-react';
+
+interface UploadDrawerProps {
+  drawerTitle: string;
+  drawerVisible: boolean;
+  handleDrawerClose: () => void;
+  modelInfo?: any;
+  modelUseTypeOpt: { label: string; value: string }[];
+  modelProtocolsOpt: { label: string; value: string }[];
+  eventsEmit: (name: string, data: any, appFn?: any) => void;
+}
+
+const ConfigDrawer = ({
+  drawerTitle,
+  drawerVisible,
+  modelInfo,
+  handleDrawerClose,
+  modelUseTypeOpt,
+  modelProtocolsOpt,
+  eventsEmit,
+}: UploadDrawerProps) => {
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+  const [switchHide, setSwitchHide] = useState(false);
+
+  const formData = useMemo(() => {
+    return {
+      id: 'config-model',
+      layout: 'vertical',
+      formWidth: '550px', // 使用外部传入的表单宽度或默认值
+      fields: [
+        {
+          id: 'modelName',
+          name: 'modelName',
+          label: '模型名称',
+          type: 'input',
+          required: true,
+          placeholder: '请输入模型名称',
+          counter: 30, // 最大100个字符
+        },
+        {
+          id: 'modelIde',
+          name: 'modelIde',
+          label: '模型ID',
+          type: 'input',
+          required: true,
+          placeholder: '请输入模型ID',
+          defaultValue: '',
+        },
+        {
+          id: 'apiKey',
+          name: 'apiKey',
+          label: 'APIKey',
+          type: 'input',
+          required: false,
+          placeholder: '请输入APIKey',
+          defaultValue: '',
+        },
+        {
+          id: 'url',
+          name: 'url',
+          label: '请求URL',
+          type: 'input',
+          required: true,
+          placeholder: '请输入请求URL',
+          defaultValue: '',
+        },
+        {
+          id: 'modelProtocol',
+          name: 'modelProtocol',
+          label: '模型传输协议',
+          type: 'select',
+          required: true,
+          options: modelProtocolsOpt,
+        },
+        {
+          id: 'type',
+          name: 'type',
+          label: '使用类型',
+          type: 'select',
+          required: true,
+          options: modelUseTypeOpt,
+          defaultValue: 1,
+          controlledItems: {
+            1: ['thinking'],
+          },
+        },
+        {
+          id: 'dec',
+          name: 'dec',
+          label: '说明',
+          type: 'textarea',
+          required: false,
+        },
+        {
+          id: 'thinking',
+          name: 'thinking',
+          label: '推理思考开关',
+          type: 'switch',
+          required: false,
+          helpText:
+            '如果您部署的模型本身具有推理思考的开关，您可以打开当前开关支持推理思考能力，如Qwen3',
+        },
+      ],
+    };
+  }, [modelInfo, modelUseTypeOpt, modelProtocolsOpt]);
+
+  // 表单引用
+  const formRef = useRef<any>(null);
+  // 表单事件处理 - 简化版本，核心层统一处理
+  const mergedEventsEmit = async (name: string, data: any, appFn: any) => {
+    console.log('[Form] eventsEmit:', name, data, appFn);
+
+    switch (name) {
+      case 'form:ready':
+        // 保存表单引用
+        if (data.formRef) {
+          formRef.current = data.formRef;
+        }
+        break;
+      case 'form:change':
+        if (!formRef.current?.getValue) {
+          console.log('表单引用未就绪，跳过 formdata_onchange 事件');
+          return;
+        }
+
+        const type = await formRef.current.getValue('type');
+        if (type == 2 || type == 3) {
+          setSwitchHide(true);
+        } else {
+          setSwitchHide(false);
+        }
+        // 触发 formdata_onchange 事件，返回完整的表单数据
+
+        break;
+
+      // 其他事件透传
+      default:
+        console.log('未处理的事件:', name, data);
+    }
+    // 向上层继续透传
+    eventsEmit?.(name, data, appFn);
+  };
+
+  // 处理表单提交和数据获取
+  const handleFormSubmit = async () => {
+    try {
+      setIsSubmitLoading(true);
+      const allFormData = await formRef.current.getAllData();
+
+      // 验证状态
+      if (allFormData.isValid) {
+        // 触发提交成功事件
+        if (modelInfo?.id) {
+          await eventsEmit('form_submitted_edit', allFormData, undefined);
+        } else {
+          await eventsEmit('form_submitted_add', allFormData, undefined);
+        }
+      }
+    } catch (error) {
+      console.error('❌ 提交表单数据失败:', error);
+    } finally {
+      setIsSubmitLoading(false);
+    }
+  };
+
+  const viewConfig = useMemo(() => {
+    const _data = modelInfo?.data.reduce((acc: any, item: any) => {
+      acc[item.columnId] = item.value;
+      return acc;
+    }, {});
+    return {
+      label: '动态表单示例',
+      defaultActiveId: formData.id,
+      model: null,
+      views: [
+        {
+          label: '用户注册表单',
+          id: formData.id,
+          type: 'form',
+          size: 'md' as const,
+          formWidth: formData.formWidth, // 设置视图宽度
+          formConfig: {
+            layout: formData.layout,
+            showReset: false, // 不显示内置的重置按钮
+            showSubmit: false, // 不显示内置的提交按钮
+            formWidth: formData.formWidth, // 传递表单宽度
+          },
+        },
+      ],
+      dataSource: [
+        {
+          id: formData.id,
+          fields: formData.fields,
+          // [
+          //   ...formData.fields,
+          //   ...(!switchHide
+          //     ? [
+          //         {
+          //           id: 'thinking',
+          //           name: 'thinking',
+          //           label: '推理思考开关',
+          //           type: 'switch',
+          //           required: false,
+          //           controlledItems: [],
+          //           helpText:
+          //             '如果您部署的模型本身具有推理思考的开关，您可以打开当前开关支持推理思考能力，如Qwen3',
+          //         },
+          //       ]
+          //     : []),
+          // ],
+          defaultValues: _data || {},
+        },
+      ], // 表单数据
+      eventsEmit: mergedEventsEmit,
+    };
+  }, [modelInfo, switchHide, formData]);
+  return (
+    <Drawer
+      title={drawerTitle}
+      placement="right"
+      width={560}
+      onClose={handleDrawerClose}
+      closeIcon={false}
+      extra={<X size={20} color="#888888" onClick={handleDrawerClose} className="cursor-pointer" />}
+      open={drawerVisible}
+      destroyOnHidden
+      footer={
+        <div className={`flex justify-end items-center gap-3`}>
+          <Button mode="default" label="取消" onClick={handleDrawerClose} />
+          <Button
+            mode="primary"
+            label="确认"
+            loading={isSubmitLoading}
+            onClick={handleFormSubmit}
+          />
+        </div>
+      }
+    >
+      <Xviwer key="example-form" {...viewConfig} />
+    </Drawer>
+  );
+};
+
+export default ConfigDrawer;

package/src/modules/modelManage/const.ts

@@ -0,0 +1,50 @@
+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 },
+];
+
+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,
+}