@gientech/modual 2.0.9 → 2.0.11

package/src/modules/database/CreateModal.tsx

@@ -1,403 +0,0 @@
-import React, { useState, useMemo, useRef } from 'react';
-import { Modal, Tooltip } from 'antd';
-import { Xviwer } from '@mxmweb/xviewer';
-import { Button } from '@mxmweb/zui';
-import MySQL from './assets/MySQL.svg';
-import SQLServer from './assets/SQLServer.png';
-import PostgreSQL from './assets/PostgreSQL.png';
-import Doris from './assets/Doris.png';
-import '@mxmweb/zui/style.css';
-
-const Options = [
-  { label: 'MySQL', value: 'MySQL', icon: MySQL },
-  { label: 'PostgreSQL', value: 'PostgreSQL', icon: PostgreSQL },
-  { label: 'SQLServer', value: 'SQLServer', icon: SQLServer },
-  { label: 'Doris', value: 'Doris', icon: Doris },
-];
-
-interface CreateModalProps {
-  drawerTitle: string;
-  drawerVisible: boolean;
-  isConnectSuccess: boolean;
-  handleDrawerClose: () => void;
-  dbInfo: any;
-  dbType: 'DataTable' | 'DirectDB';
-  eventsEmit: (name: string, data: any, appFn?: any) => Promise<any>;
-}
-const CreateModal = ({
-  drawerTitle,
-  drawerVisible,
-  isConnectSuccess,
-  handleDrawerClose,
-  dbInfo,
-  dbType,
-  eventsEmit,
-}: CreateModalProps) => {
-  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-  const [isConnectLoading, setIsConnectLoading] = useState(false);
-  const [formValues, setFormValues] = useState<any>({});
-
-  const [passwordEditing, setPasswordEditing] = useState(false);
-
-  // 表单数据状态
-  const formDataDataTable = useMemo(() => {
-    return {
-      id: dbType,
-      layout: 'vertical',
-      formWidth: '500px', // 使用外部传入的表单宽度或默认值
-      fields: [
-        {
-          id: 'name',
-          name: 'name',
-          label: '数据库名称',
-          type: 'input',
-          required: true,
-          placeholder: '仅支持汉字、数字、英文、符号',
-          validate: (value: string) => {
-            if (!value) {
-              return '数据库名称不能为空';
-            }
-            // 仅支持汉字、数字、英文、符号
-            const validPattern = /[\u4E00-\u9FA5A-Za-z0-9\W]/;
-            if (!validPattern.test(value)) {
-              return '仅支持汉字、数字、英文、符号';
-            }
-            return undefined;
-          },
-          counter: 100, // 最大100个字符
-        },
-        {
-          id: 'description',
-          name: 'description',
-          label: '数据库描述',
-          type: 'textarea',
-          counter: 150, // 最大150个字符
-          required: false,
-          placeholder: '请输入数据库描述,此描述仅用于区分不同数据库,不会影响数据库调用',
-          defaultValue: '',
-        },
-      ],
-    };
-  }, [dbType, dbInfo]);
-
-  const formDataDirectDB = useMemo(() => {
-    return {
-      id: dbType,
-      layout: 'vertical',
-      formWidth: '470px', // 使用外部传入的表单宽度或默认值
-      fields: [
-        {
-          id: 'name',
-          name: 'name',
-          label: '数据库名称',
-          type: 'input',
-          required: true,
-          placeholder: '仅支持汉字、数字、英文、符号',
-          validate: (value: string) => {
-            if (!value) {
-              return '数据库名称不能为空';
-            }
-            // 仅支持汉字、数字、英文、符号
-            const validPattern = /[\u4E00-\u9FA5A-Za-z0-9\W]/;
-            if (!validPattern.test(value)) {
-              return '仅支持汉字、数字、英文、符号';
-            }
-            return undefined;
-          },
-          counter: 100, // 最大100个字符
-        },
-        {
-          id: 'description',
-          name: 'description',
-          label: '数据库描述',
-          type: 'textarea',
-          required: false,
-          counter: 150, // 最大150个字符
-          placeholder: '请输入数据库描述,此描述仅用于区分不同数据库,不会影响数据库调用',
-          defaultValue: '',
-        },
-        {
-          id: 'db-info',
-          label: '直连数据源信息',
-          type: 'title',
-          level: 2,
-        },
-        {
-          id: 'dbType',
-          name: 'dbType',
-          label: '数据源类型',
-          type: 'select',
-          disabled: !!dbInfo,
-          required: true,
-          options: Options.map((opt: any) => {
-            const { label, value, icon } = opt;
-            return {
-              label,
-              value,
-              render: () => (
-                <div className="flex items-center gap-2">
-                  <img src={icon} width={24} />
-                  <span>{label}</span>
-                </div>
-              ),
-            };
-          }),
-          // defaultValue: Options[0].value,
-        },
-        {
-          id: 'dbHost',
-          name: 'dbHost',
-          label: '主机地址',
-          type: 'input',
-          required: true,
-          disabled: !!dbInfo,
-          placeholder: '请输入IP地址或者域名',
-        },
-        {
-          id: 'dbPort',
-          name: 'dbPort',
-          label: '端口号',
-          type: 'number',
-          required: true,
-          disabled: !!dbInfo,
-          placeholder: '请输入端口名称',
-        },
-        {
-          id: 'dbDatabase',
-          name: 'dbDatabase',
-          label: '连接数据库名',
-          disabled: !!dbInfo,
-          placeholder: '请输入连接数据库名',
-          required: true,
-          type: 'input',
-        },
-        {
-          type: 'col',
-          children: [
-            {
-              id: 'dbUser',
-              type: 'input' as const,
-              name: 'dbUser',
-              label: '用户名',
-              disabled: !!dbInfo,
-              placeholder: '请输入用户名',
-              required: true,
-            },
-            {
-              id: 'dbPassword',
-              type: 'password' as const,
-              name: 'dbPassword',
-              label: '密码',
-              placeholder: '请输入密码',
-              required: true,
-              disabled: passwordEditing ? false : !!dbInfo,
-            },
-          ],
-        },
-      ],
-    };
-  }, [dbType, dbInfo, passwordEditing]);
-
-  // 表单引用
-  const formRef = useRef<any>(null);
-  // 表单事件处理 - 简化版本，核心层统一处理
-  const mergedEventsEmit = (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_field_change':
-        console.log('字段值变化:', data);
-        setFormValues((prev: any) => ({
-          ...prev,
-          [data.fieldId]: data.value,
-        }));
-        break;
-      case 'form_validation_error':
-        console.log('表单验证错误:', data);
-        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) {
-        console.log(allFormData, '===');
-        // 触发提交成功事件
-        if (dbType == 'DirectDB' && drawerTitle == '编辑数据库' && !passwordEditing) {
-          // 没有重新输入密码时，只提交name,desc
-          allFormData.fields = allFormData.fields.filter(
-            (f: any) => f.name == 'name' || f.name == 'description'
-          );
-        }
-        await eventsEmit('form_submitted', allFormData, undefined);
-        setPasswordEditing(false);
-      }
-    } catch (error) {
-      console.error('❌ 提交表单数据失败:', error);
-    } finally {
-      setIsSubmitLoading(false);
-    }
-  };
-
-  const handleConnectionTest = async () => {
-    try {
-      setIsConnectLoading(true);
-      const allFormData = await formRef.current.getAllData();
-      if (allFormData.isValid) {
-        const formData = allFormData.fields.reduce((acc: any, item: any) => {
-          acc[item.name] = item.value;
-          return acc;
-        }, {});
-        // 触发提交成功事件
-        await eventsEmit('form:connect_test', formData, undefined);
-      }
-    } catch (error) {
-      setIsConnectLoading(false);
-    } finally {
-      setIsConnectLoading(false);
-    }
-  };
-
-  const viewConfig = useMemo(() => {
-    const formData = dbType == 'DataTable' ? formDataDataTable : formDataDirectDB;
-    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, // 传递表单宽度
-            // 提供获取表单数据的方法，包括 uploader 组件的数据
-            getFormData: () => {
-              // 返回当前表单的基础数据
-              return {
-                ...formValues,
-                timestamp: new Date().toISOString(),
-                formId: formData.id,
-              };
-            },
-            onFieldChange: (fieldId: string, value: any) => {
-              mergedEventsEmit('form_field_change', { fieldId, value }, undefined);
-            },
-            onValidationError: (errors: any) => {
-              mergedEventsEmit('form_validation_error', errors, undefined);
-            },
-          },
-        },
-      ],
-      dataSource: [
-        {
-          id: formData.id,
-          fields: formData.fields,
-          defaultValues: { ...dbInfo },
-        },
-      ], // 表单数据
-      eventsEmit: mergedEventsEmit,
-    };
-  }, [dbType, formDataDataTable, formDataDirectDB, drawerVisible, dbInfo]);
-
-  const confirmBtnDisable = useMemo(() => {
-    if (dbType == 'DirectDB') {
-      if (dbInfo) {
-        return passwordEditing && !isConnectSuccess;
-      } else {
-        return !isConnectSuccess;
-      }
-    }
-    return false;
-  }, [dbType, isConnectSuccess, passwordEditing, drawerVisible]);
-  return (
-    <Modal
-      title={drawerTitle}
-      width={620}
-      onCancel={() => {
-        handleDrawerClose();
-        setPasswordEditing(false);
-      }}
-      open={drawerVisible}
-      destroyOnHidden
-      footer={
-        <div
-          className="flex justify-end gap-3"
-          style={{
-            justifyContent: 'end',
-          }}
-        >
-          <Button
-            mode="default"
-            label="取消"
-            onClick={() => {
-              handleDrawerClose();
-              setPasswordEditing(false);
-            }}
-          />
-          <Button
-            mode="primary"
-            label="确认"
-            loading={isSubmitLoading}
-            disabled={confirmBtnDisable}
-            onClick={handleFormSubmit}
-          />
-        </div>
-      }
-    >
-      <Xviwer key="example-form" {...viewConfig} />
-      {dbType === 'DirectDB' && (
-        <>
-          {drawerTitle == '编辑数据库' && !passwordEditing ? (
-            <Button
-              mode="primary"
-              className="mt-[10px]"
-              label="修改密码"
-              onClick={() => {
-                setPasswordEditing(true);
-                formRef.current.setValues({
-                  dbPassword: undefined,
-                });
-              }}
-            />
-          ) : (
-            <Tooltip title="需通过测试才可创建成功">
-              <Button
-                mode="primary"
-                className="mt-[10px]"
-                label="连接测试"
-                loading={isConnectLoading}
-                onClick={handleConnectionTest}
-              />
-            </Tooltip>
-          )}
-        </>
-      )}
-    </Modal>
-  );
-};
-
-export default CreateModal;

package/src/modules/database/assets/database_upload.svg

@@ -1,29 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 12C14 10.8954 14.8954 10 16 10H29C31.2091 10 33 11.7909 33 14V26C33 30.4183 29.4183 34 25 34H16C14.8954 34 14 33.1046 14 32V12Z" fill="url(#paint0_linear_4472_18052)"/>
-<foreignObject x="-1" y="-1" width="32" height="36"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_0_4472_18052_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
-<path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z" fill="white" fill-opacity="0.46"/>
-<path d="M7 3.25H23C25.0711 3.25 26.75 4.92893 26.75 7V19C26.75 25.4893 21.4893 30.75 15 30.75H7C4.92893 30.75 3.25 29.0711 3.25 27V7C3.25 4.92893 4.92893 3.25 7 3.25Z" stroke="white" stroke-opacity="0.34" stroke-width="0.5"/>
-</g>
-<g filter="url(#filter1_d_4472_18052)">
-<path d="M14 19V11.6667" stroke="white" stroke-width="1.83972" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11 14L12 13L14 11L16 13L17 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 22H18" stroke="white" stroke-width="2" stroke-linecap="round"/>
-</g>
-<defs>
-<clipPath id="bgblur_0_4472_18052_clip_path" transform="translate(1 1)"><path d="M3 7C3 4.79086 4.79086 3 7 3H23C25.2091 3 27 4.79086 27 7V19C27 25.6274 21.6274 31 15 31H7C4.79086 31 3 29.2091 3 27V7Z"/>
-</clipPath><filter id="filter1_d_4472_18052" x="5" y="6" width="18" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.396078 0 0 0 0 0.984314 0 0 0 0.4 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4472_18052"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4472_18052" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_4472_18052" x1="23.5" y1="10" x2="23.5" y2="34" gradientUnits="userSpaceOnUse">
-<stop stop-color="#64A0FD"/>
-<stop offset="1" stop-color="#015AFF"/>
-</linearGradient>
-</defs>
-</svg>