@gientech/modual 2.0.4 → 2.0.5

package/src/modules/login/components/Login/index.tsx

@@ -0,0 +1,100 @@
+import { ConfigProvider, Flex, Form } from 'antd';
+import { useState } from 'react';
+import LoginBox from './LoginBox';
+
+const defaultStyle = {
+  colorPrimary: '#1677ff',
+  defaultBg: '#ffffff',
+};
+
+interface LoginStyle {
+  defaultBg?: string;
+  colorPrimary?: string;
+}
+interface LoginProps {
+  homeBg?: string;
+  leftImg?: string;
+  logoImg?: string;
+  eventEmit?: (n: string, d: any) => void;
+  loginLoading?: boolean;
+  registerLoading?: boolean;
+  codeImgSrc?: string;
+  loginStyle?: LoginStyle;
+  registreKaptchaUrl?: string;
+}
+const Login = (props: LoginProps) => {
+  const {
+    homeBg,
+    leftImg,
+    logoImg,
+    eventEmit,
+    codeImgSrc = '',
+    loginStyle,
+    loginLoading,
+    registerLoading,
+    registreKaptchaUrl,
+  } = props;
+  const [isRegister, setIsRegister] = useState<boolean>(false);
+  const [form] = Form.useForm();
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: loginStyle?.colorPrimary || defaultStyle.colorPrimary,
+        },
+        components: {
+          Button: {
+            defaultBg: loginStyle?.defaultBg || defaultStyle.defaultBg,
+          },
+        },
+      }}
+    >
+      <Flex
+        style={{
+          width: '100%',
+          height: '100%',
+          background: `url('${homeBg}') no-repeat center/cover`,
+        }}
+        justify="center"
+        align="center"
+      >
+        <Flex
+          style={{
+            background: 'white',
+            height: '55vh',
+            minHeight: '393px',
+            width: 'calc(55vh * 2)',
+            minWidth: '840px',
+            borderRadius: '10px',
+            overflow: 'hidden',
+          }}
+        >
+          {leftImg && (
+            <img
+              style={{
+                objectFit: 'cover',
+                width: '50%',
+              }}
+              src={leftImg}
+            />
+          )}
+          <Flex flex={1} style={{ padding: '0 50px' }} justify="center" align="center">
+            <Form form={form} labelCol={{ span: 8 }}>
+              <LoginBox
+                loginLoading={loginLoading}
+                form={form}
+                logoImg={logoImg}
+                setIsRegister={setIsRegister}
+                codeImgSrc={codeImgSrc}
+                eventEmit={eventEmit}
+              />
+            </Form>
+          </Flex>
+        </Flex>
+      </Flex>
+    </ConfigProvider>
+  );
+};
+
+export default Login;

package/src/modules/login/index.tsx

@@ -0,0 +1,106 @@
+import homeBg from '@/assets/login/homeBg.png';
+import leftImg from '@/assets/login/left.jpg';
+import logoImg from '@/assets/login/logoImg.png';
+import { Layout, message } from 'antd';
+import { Encrypt } from './utils';
+import { useEffect, useState } from 'react';
+import Login from './components/Login';
+import { api_getKaptchaImage, login } from './useServices';
+import './style.css'
+
+
+const baseUrl = '/proxy';
+interface LoginMainProps {
+  eventsEmit: (eventName: string, data: any) => void;
+}
+function LoginMain({ eventsEmit }: LoginMainProps)  {
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [registerLoading, setRegisterLoading] = useState(false);
+  const handleLogin = async (data: any) => {
+    try {
+      setLoginLoading(true);
+      login(
+        { url: baseUrl },
+        {
+          ...data,
+          password: Encrypt(data.password),
+        },
+        res => {
+          if (res?.success) {
+            eventsEmit('afterLogin',res?.data?.token || '');
+          }
+          setLoginLoading(false);
+        },
+        msg => {
+          setLoginLoading(false);
+          if (msg) {
+            message.error(msg);
+          } else {
+            message.error('登录失败，请稍后再试');
+          }
+        }
+      );
+    } catch (e) {
+      setLoginLoading(false);
+    }
+  };
+
+  const [kaptchaUrl, setKaptchaUrl] = useState('');
+  const [registreKaptchaUrl, setRegistreKaptchaUrl] = useState('');
+
+  const handleGetImage = () => {
+    try {
+      setRegisterLoading(true);
+      api_getKaptchaImage({ url: baseUrl }, data => {
+        setRegisterLoading(false);
+        if (data) {
+          const imgBlob = new Blob([data], { type: 'image/jpeg' });
+          const imageUrl = window.URL.createObjectURL(imgBlob);
+          setKaptchaUrl(imageUrl);
+          setRegistreKaptchaUrl(imageUrl);
+        }
+      });
+    } catch (error) {
+      setRegisterLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleGetImage();
+    return () => {
+      window.URL.revokeObjectURL(kaptchaUrl);
+    };
+  }, []);
+
+  const eventEmit = async (name: string, data: any) => {
+    switch (name) {
+      case 'login:login':
+        await handleLogin(data);
+        break;
+      case 'login:codeClick':
+        handleGetImage();
+        break;
+      case 'login:registerCodeClick':
+        handleGetImage();
+        break;
+      default:
+        break;
+    }
+  };
+  return (
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+      <Login
+        loginLoading={loginLoading}
+        registerLoading={registerLoading}
+        homeBg={homeBg}
+        leftImg={leftImg}
+        logoImg={logoImg}
+        codeImgSrc={kaptchaUrl}
+        registreKaptchaUrl={registreKaptchaUrl}
+        eventEmit={eventEmit}
+      />
+    </Layout>
+  );
+}
+
+export default LoginMain;

package/src/modules/login/style.css

@@ -0,0 +1,3 @@
+body,html {
+  margin: 0;
+}

package/src/modules/login/useServices.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+export const login = async (
+  config: { url: string },
+  data: { restult: number; queryId: string },
+  sucCb: (arg: any) => void,
+  failCb: (arg: any) => void = () => {}
+) => {
+  try {
+    axios
+      .post(`${config.url}/auth/user/login`, data)
+      .then(res => {
+        if (res.data.success) {
+          sucCb && sucCb(res.data);
+        } else {
+          failCb && failCb(false);
+        }
+      })
+      .catch(error => {
+        failCb && failCb(error?.response?.data?.errorMsg);
+        console.error('Login error:', error);
+      });
+  } catch (error) {
+    failCb && failCb(false);
+    console.log('error', error);
+  }
+};
+
+export const api_getKaptchaImage = (config: { url: string }, cb: (arg: any) => void) => {
+  try {
+    axios
+      .get(`/user/kaptcha`, {
+        baseURL: '/proxy/auth',
+        responseType: 'arraybuffer', // 关键：必须添加
+        //params: { t: Date.now() },
+        headers: { Accept: '*/*', 'Content-Type': 'application/json' },
+      })
+      .then(res => {
+        if (res.data) {
+          cb && cb(res.data);
+        } else {
+          cb && cb(false);
+        }
+      })
+      .catch(error => {
+        cb && cb(false);
+        console.error('Login error:', error);
+      });
+  } catch (error) {
+    cb && cb(false);
+    console.log('error', error);
+  }
+};

package/src/modules/login/utils.ts

@@ -0,0 +1,42 @@
+import CryptoJS from "crypto-js";
+// 默认的 KEY 与 iv
+const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
+const IV = CryptoJS.enc.Utf8.parse("1234567890123456");
+
+export const Encrypt = (word: any, keyStr?: any, ivStr?: any) => {
+  let key = KEY;
+  let iv = IV;
+  if (keyStr) {
+    key = CryptoJS.enc.Utf8.parse(keyStr);
+    iv = CryptoJS.enc.Utf8.parse(ivStr);
+  }
+  const srcs = CryptoJS.enc.Utf8.parse(word);
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.ZeroPadding,
+  });
+  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
+};
+
+export const Decrypt = (word: string, keyStr: string, ivStr: string) => {
+  let key = KEY;
+  let iv = IV;
+
+  if (keyStr) {
+    key = CryptoJS.enc.Utf8.parse(keyStr);
+    iv = CryptoJS.enc.Utf8.parse(ivStr);
+  }
+
+  const base64 = CryptoJS.enc.Base64.parse(word);
+  const src = CryptoJS.enc.Base64.stringify(base64);
+
+  const decrypt = CryptoJS.AES.decrypt(src, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.ZeroPadding,
+  });
+
+  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+};

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/ReplaceModal.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Modal, Form, Select, message } from 'antd';
+import { Button } from '@mxmweb/zui';
+import { TriangleAlert } from 'lucide-react';
+
+const { Item } = Form;
+
+interface ReplaceModalProps {
+  modelVisible: boolean;
+  options: any[];
+  eventsEmit: (name: string, data?: any, appFn?: any) => Promise<any>;
+  replaceModel: (sourceModelId: string | number, targetModelId: string | number) => Promise<any>;
+}
+
+const ReplaceModal = ({ modelVisible, options, eventsEmit, replaceModel }: ReplaceModalProps) => {
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  const watchedField = Form.useWatch('sourceModelId', form);
+
+  const targetOptions = useMemo(() => {
+    const sourceModel = options.find((o: any) => o.value == watchedField);
+    if (sourceModel) {
+      const _opt = options.filter(
+        (o: any) => o.useType == sourceModel.useType && o.value !== watchedField && o.status == 1
+      );
+      return _opt;
+    }
+    return [];
+  }, [watchedField]);
+
+  useEffect(() => {
+    if (watchedField) {
+      form.setFieldValue('targetModelId', undefined);
+    }
+  }, [watchedField]);
+
+  const handleFormSubmit = async () => {
+    try {
+      setIsSubmitLoading(true);
+      const data = await form.validateFields();
+      const { sourceModelId, targetModelId } = data;
+      const res = await replaceModel(sourceModelId, targetModelId);
+      if (res) {
+        message.success('模型替换成功');
+        form.resetFields();
+        eventsEmit && eventsEmit('replace_model');
+      }
+    } catch (e) {
+      console.log('e---->', e);
+    } finally {
+      setIsSubmitLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={modelVisible}
+      title="模型替换"
+      width={620}
+      destroyOnHidden
+      onCancel={() => {
+        form.resetFields();
+        eventsEmit && eventsEmit('close_model');
+      }}
+      footer={
+        <div
+          className="flex justify-end gap-3"
+          style={{
+            justifyContent: 'end',
+            margin: '20px 4px',
+          }}
+        >
+          <Button
+            mode="default"
+            label="取消"
+            onClick={() => {
+              form.resetFields();
+              eventsEmit && eventsEmit('close_model');
+            }}
+          />
+          <Button
+            mode="primary"
+            label="确认"
+            loading={isSubmitLoading}
+            // disabled={confirmBtnDisable}
+            onClick={handleFormSubmit}
+          />
+        </div>
+      }
+    >
+      <div
+        className="flex gap-3"
+        style={{
+          margin: '20px 4px',
+        }}
+      >
+        <div>
+          <TriangleAlert size={22} color={'#f4a02a'} />
+        </div>
+
+        <span className="text-[14px]">
+          如需更换模型，在一键替换时，系统将自动更新知识解析配置、检索测试和助手配置中的模型。若替换的是文档解析用的Embedding模型，则使用该模型的文档将全部重新排队解析，状态变为“解析中”，且未解析完成的文档暂不可检索！
+        </span>
+      </div>
+      <Form
+        form={form}
+        colon={false}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        style={{ margin: '40px 60px' }}
+      >
+        <Item label="模型名称" name="sourceModelId" rules={[{ required: true, message: '' }]}>
+          <Select placeholder="请选择" options={options} />
+        </Item>
+
+        <Item label="替换为" name="targetModelId" rules={[{ required: true, message: '' }]}>
+          <Select placeholder="请选择" options={targetOptions} />
+        </Item>
+      </Form>
+    </Modal>
+  );
+};
+export default ReplaceModal;