@gientech/modual 2.0.9 → 2.0.11

package/src/modules/database/index.tsx

@@ -1,477 +0,0 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { DashboardContainer, Styles, defaultTheme } from '@mxmweb/zui';
-import styled from 'styled-components';
-import { Xviwer, CustomComponents } from '@mxmweb/xviewer';
-import { message, Modal } from 'antd';
-import AxiosInstance from './server';
-import { DropDownButton } from '@mxmweb/zui';
-import databaseUpload from './assets/database_upload.svg';
-import databseConnect from './assets/database_connect.svg';
-import CreateModal from './CreateModal';
-import EmptyImg from './assets/empty.png';
-import '@mxmweb/rtext/style.css';
-import '@mxmweb/zui/style.css';
-// views 只做 UI 结构描述 - 将在组件内部动态生成
-const { confirm } = Modal;
-
-enum OPT_BTN {
-  DATE = 0,
-  VIEW,
-  ERROR,
-  AUTHORIZE,
-  DELETE,
-  ANALYSIS_OR_EXTRACT,
-  DOWNLOAD,
-  EDIT,
-  ADD,
-  ANALYSIS_CONFIG,
-  AUTHORIZE_CONFIG,
-}
-interface DatabaseViewAdopterProps {
-  url?: string;
-  token?: string;
-  role?: string;
-  styles?: Styles;
-  CustomComponents?: CustomComponents;
-  eventsEmit?: (name: string, data: any) => void;
-  getBtnDisabled?: (type: OPT_BTN, permission: number) => void;
-}
-
-const DatabaseTypeOpt = styled.div`
-  width: 282px;
-  height: 81px;
-  display: flex;
-  flex-direction: row;
-  justify-space:between;
-  align-items: center;
-  border-radius: 4px;
-  padding:12px;
-
-  flexD
-  color: #2a2a2a;
-  background-color: #ffffff;
-  &:hover {
-    color: #055aff;
-    border: 1px solid #2b69ff;
-    background-color: #F1F5FF;
-  };
-  border: 1px solid #EBEBEB
-`;
-
-const DatabaseType = [
-  {
-    key: 'add_file_db',
-    label: '上传数据库',
-    dsc: '通过上传Excel、csv等格式数据表创建数据库。',
-    icon: databaseUpload,
-  },
-  {
-    key: 'add_direct_db',
-    label: '直连数据库',
-    dsc: '通过与已有业务建立连接创建数据库。',
-    icon: databseConnect,
-  },
-];
-const DatabaseViewAdopter: React.FC<DatabaseViewAdopterProps> = props => {
-  const { url, token, role, CustomComponents, getBtnDisabled } = props;
-  const [activeId, setActiveId] = useState('my-db');
-
-  const [status, setStatus] = useState<any>({
-    app: 'ready',
-    container: 'ready',
-    content: 'ready',
-  });
-  // 测试空数据状态
-  const [showEmptyData, setShowEmptyData] = useState(false);
-
-  const [data, setData] = useState<
-    {
-      id: string;
-      data: any[];
-    }[]
-  >([
-    {
-      id: 'my-db',
-      data: [],
-    },
-    {
-      id: 'shared-db',
-      data: [],
-    },
-  ]);
-
-  // 创建ref来访问核心组件实例
-  const coreRef = useRef<any>(null);
-
-  // 抽屉状态管理
-  const [drawerVisible, setDrawerVisible] = useState(false);
-  const [drawerTitle, setDrawerTitle] = useState('');
-  const [databaseType, setDatabaseType] = useState<'DataTable' | 'DirectDB'>('DataTable');
-  const [editDBInfo, setEditDBInfo] = useState<any>();
-  // 表单操作引用 - 改为两个独立的状态
-  const [isConnectSuccess, setIsConnectSuccess] = useState(false);
-
-  //获取接口
-  const {
-    getDatabaseList,
-    delDatabaseById,
-    saveDatabase,
-    testConnection,
-    getShareDatabaseList,
-    syncSchema,
-  } = AxiosInstance({
-    url,
-    token,
-    role,
-    eventsEmit: props.eventsEmit,
-  });
-
-  // 动态生成views配置 - 参考ExampleTable实现
-  const views = useMemo(() => {
-    return [
-      {
-        label: '我的数据库',
-        id: 'my-db',
-        type: 'card' as const,
-        cardType: 'database',
-        rowHeight: 220,
-        viewPageSize: 12,
-        viewBehavior: 'pagination' as const, //or pagination
-        actions: [
-          { label: '编辑', key: 'edit' },
-          { label: '删除', key: 'delete' },
-        ],
-        toolbar: [
-          {
-            type: 'customized' as const,
-            key: 'add',
-            render: () => {
-              return (
-                <DropDownButton
-                  mode="primary"
-                  label="创建数据库"
-                  actions={DatabaseType.map((s: any) => {
-                    return {
-                      key: s.key,
-                      component: (
-                        <DatabaseTypeOpt key={s.key}>
-                          <div className="flex flex-grow">
-                            <div className="mr-[6px]">
-                              <img src={s.icon} />
-                            </div>
-                            <div>
-                              <div className="text-base font-bold mb-1 text-[14px]">{s.label}</div>
-                              <div className="text-[#888] text-[10px]">{s.dsc}</div>
-                            </div>
-                          </div>
-                        </DatabaseTypeOpt>
-                      ),
-                    };
-                  })}
-                  eventEmit={mergedEventsEmit}
-                />
-              );
-            },
-          },
-          {
-            type: 'fuzzy_search' as const,
-            key: 'search',
-            label: '输入名称搜索',
-            searchKeys: ['name', 'description'],
-            position: 'right',
-          },
-        ],
-      },
-      {
-        label: '共享数据库',
-        id: 'shared-db',
-        type: 'card' as const,
-        cardType: 'database',
-        rowHeight: 240,
-        toolbar: [
-          { type: 'fuzzy_search' as const, key: 'search', label: '搜索', position: 'right' },
-        ],
-        actions: [
-          { label: '编辑', key: 'edit' },
-          { label: '删除', key: 'delete' },
-        ],
-      },
-    ];
-  }, [data]);
-
-  // 模拟应用初始化过程
-  useEffect(() => {
-    // 模拟应用初始化
-    setStatus((prev: any) => ({ ...prev, content: 'loading' }));
-    handleFetchList();
-  }, []);
-
-  // 获取数据库列表
-  const handleFetchList = async () => {
-    try {
-      const [res, shareRes] = await Promise.allSettled([
-        getDatabaseList({
-          pageNo: 1,
-          pageSize: 999,
-        }),
-        getShareDatabaseList({
-          pageNo: 1,
-          pageSize: 999,
-        }),
-      ]);
-
-      let dataRender = [];
-      if (res.status === 'fulfilled' && res.value) {
-        if (res.value?.records) {
-          const _data = handleTableData(res.value?.records);
-          dataRender.push({
-            id: 'my-db',
-            data: _data || [],
-          });
-        }
-      }
-
-      if (shareRes.status === 'fulfilled' && shareRes.value) {
-        if (shareRes.value?.records) {
-          const _data = handleTableData(shareRes.value?.records);
-          dataRender.push({
-            id: 'shared-db',
-            data: _data || [],
-          });
-        }
-      }
-
-      setData(dataRender);
-      setStatus((prev: any) => ({ ...prev, content: 'ready' }));
-    } catch (e) {
-      console.log('[DatabaseApiError]  getDatabaseList:', e);
-    }
-  };
-
-  const handleTableData = (data: any) => {
-    return (data || []).map((item: any) => {
-      const actions = getActionsForView('shared-db').map((a: any, index: number) => {
-        return {
-          ...a,
-          key: a.type === 'divider' ? `${a.key}_${item.id}` : a.key, // 为divider添加唯一key
-          disabled:
-            getBtnDisabled &&
-            getBtnDisabled(a.key == 'edit' ? OPT_BTN.EDIT : OPT_BTN.DELETE, item.permission),
-        };
-      });
-
-      if (item.datasourceType == 'DirectDB') {
-        actions.push({
-          label: '同步表结构',
-          key: 'sync_schema',
-          disabled: getBtnDisabled && getBtnDisabled(OPT_BTN.EDIT, item.permission),
-        });
-      }
-      console.log('[DatabaseViewAdopter] actions:', actions);
-      return {
-        ...item,
-        actions: actions || [],
-      };
-    });
-  };
-
-  const currentUser = 'admin'; // 假设当前账号
-  // 自定义空数据组件
-  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>
-  );
-
-  // 从views配置中获取actions
-  const getActionsForView = (viewId: string) => {
-    const view = views.find(v => v.id === viewId);
-    const actions = view?.actions || [];
-    //console.log('[DatabaseViewAdopter] getActionsForView:', viewId, 'actions:', actions);
-    return actions;
-  };
-
-  // 根据当前激活id获取对应数据
-  const currentData = useMemo(() => {
-    const foundData = data?.find(item => item.id === activeId)?.data || [];
-    // 测试空数据状态
-    return showEmptyData ? [] : foundData;
-  }, [activeId, data, showEmptyData]);
-
-  // 抽屉相关处理函数
-  const handleDrawerClose = () => {
-    setDrawerVisible(false);
-    setIsConnectSuccess(false);
-    setEditDBInfo(undefined);
-  };
-
-  const handleConnectionTest = async (data: any) => {
-    console.log('[DatabaseViewAdopter] 测试连接:', data);
-    const res = await testConnection(data);
-    if (res) {
-      setIsConnectSuccess(true);
-      message.success('连接测试成功！');
-    }
-    return res;
-  };
-
-  // 事件合并函数，支持多层事件劫持 - 参考ExampleTable实现
-  async function mergedEventsEmit(name: string, data: any, appFn: any) {
-    console.log('[DatabaseViewAdopter] mergedEventsEmit', name, data);
-    switch (name) {
-      case 'card_delete':
-        confirm({
-          title: '确认删除数据库？',
-          content: '删除后，该数据库将无法恢复',
-          okText: '删除',
-          cancelText: '取消',
-          async onOk() {
-            const res = await delDatabaseById(data.id, data.datasourceType);
-            if (res && coreRef?.current) {
-              coreRef?.current.appFn.removeItem(data.id);
-            }
-          },
-          onCancel() {
-            console.log('Cancel');
-          },
-        });
-
-        break;
-      case 'card_edit':
-        setDrawerTitle('编辑数据库');
-        setDrawerVisible(true);
-        setDatabaseType(data.datasourceType);
-        delete data.render;
-        setEditDBInfo(data);
-        break;
-      case 'select':
-        setActiveId(data.id);
-        break;
-      case 'filesDir_clicked':
-        setActiveId(data.id);
-        break;
-      case 'dropdown_action':
-        setDrawerTitle('创建数据库');
-        setDrawerVisible(true);
-        if (data.key == 'add_file_db') {
-          setDatabaseType('DataTable');
-        } else {
-          setDatabaseType('DirectDB');
-        }
-        break;
-      case 'form_submitted':
-        try {
-          const formData = data.fields.reduce((acc: any, item: any) => {
-            acc[item.name] = item.value;
-            return acc;
-          }, {});
-          const _data = editDBInfo
-            ? {
-                id: editDBInfo?.id,
-                ...formData,
-              }
-            : formData;
-          const res = await saveDatabase(_data, databaseType);
-          if (res) {
-            if (editDBInfo) {
-              const patch = {
-                ...editDBInfo,
-                ...formData,
-                datasourceType: databaseType,
-                actions: getActionsForView('my-db').map((a: any, index: number) => ({
-                  ...a,
-                  key: a.type === 'divider' ? `${a.key}_${res}` : a.key,
-                  allow: true,
-                })),
-              };
-              coreRef?.current?.appFn?.updateItem(patch, editDBInfo?.id);
-              message.success('数据库编辑成功！');
-            } else {
-              const newDb: any = {
-                ...formData,
-                ...res,
-                createBy: currentUser,
-                datasourceType: databaseType,
-                actions: getActionsForView('my-db').map((a: any, index: number) => ({
-                  ...a,
-                  key: a.type === 'divider' ? `${a.key}_${res}` : a.key,
-                  allow: true,
-                })),
-              };
-              coreRef?.current?.appFn?.addItem(newDb, { animate: true, position: 'start' });
-              message.success('数据库创建成功！');
-            }
-            return res;
-          }
-        } catch (e) {
-          console.error('保存失败！', e);
-        } finally {
-          handleDrawerClose();
-        }
-        break;
-      case 'form:connect_test':
-        return await handleConnectionTest(data);
-      case 'toolbar_test_empty':
-        // 测试空数据状态切换
-        console.log('[DatabaseViewAdopter] toolbar_test_empty 事件触发');
-        setShowEmptyData(!showEmptyData);
-        break;
-      case 'card_sync_schema':
-        const res = await syncSchema(data.id);
-        if (res) {
-          setIsConnectSuccess(true);
-          message.success('同步表结构成功！');
-        }
-        break;
-      default:
-        props.eventsEmit?.(name, data);
-        break;
-    }
-  }
-
-  return (
-    <DashboardContainer title="数据库管理">
-      <Xviwer
-        ref={coreRef}
-        label=""
-        key="db"
-        model={'tabs'}
-        defaultActiveId={activeId}
-        views={views}
-        dataSource={currentData}
-        eventsEmit={mergedEventsEmit}
-        status={status}
-        CustomComponents={{
-          EmptyData,
-          ...CustomComponents,
-        }}
-        styles={{
-          theme: {
-            ...defaultTheme,
-            colors: {
-              ...defaultTheme.colors,
-              listBackground: '#ffffff',
-            },
-          },
-          mode: 'light',
-        }}
-      />
-      <CreateModal
-        drawerTitle={drawerTitle}
-        drawerVisible={drawerVisible}
-        isConnectSuccess={isConnectSuccess}
-        dbType={databaseType}
-        dbInfo={editDBInfo}
-        handleDrawerClose={handleDrawerClose}
-        eventsEmit={mergedEventsEmit}
-      />
-    </DashboardContainer>
-  );
-};
-
-export default DatabaseViewAdopter;

package/src/modules/database/server.ts

@@ -1,196 +0,0 @@
-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;
-    // config.headers.userId = roleId;
-    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;
-    },
-    async 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?.errorMsg || '请求出错，请稍后再试',
-            error: error,
-          };
-        }
-
-        eventsEmit(errorType, errorData);
-      }
-
-      console.log('Error occurs', error);
-      return Promise.reject(error);
-    }
-  );
-
-  //数据库列表
-  const getDatabaseList = async (params: any) => {
-    try {
-      const res: any = await axios$.get(
-        `/queryPageDBList?${new URLSearchParams(params).toString()}`
-      );
-      const { success, data } = res;
-      if (success) return data;
-    } catch (e) {
-      console.log('getDatabaseList error:', e);
-    }
-  };
-  //共享数据库列表
-  // /database/queryShareDBList
-  const getShareDatabaseList = async (params: any) => {
-    try {
-      const res: any = await axios$.get(
-        `/queryShareDBList?${new URLSearchParams(params).toString()}`
-      );
-      const { success, data } = res;
-      if (success) return data;
-    } catch (e) {
-      console.log('getShareDatabaseList error:', e);
-    }
-  };
-  //删除数据库
-  const delDatabaseById = async (id: string | number, type: IDataSourceType) => {
-    const typeToUrl = getTypeToUrl(type);
-    try {
-      const res: any = await axios$.delete(`/${typeToUrl}/deleteDB/${id}`);
-
-      const { success, data } = res;
-      if (success) return data;
-    } catch (e) {
-      console.log('delDatabaseById error:', e);
-    }
-  };
-
-  // 保存数据库
-  const saveDatabase = async (params: any, type: IDataSourceType) => {
-    const typeToUrl = getTypeToUrl(type);
-    try {
-      const res: any = await axios$.post(`/${typeToUrl}/saveDBInfo`, params);
-
-      const { success, data } = res;
-      if (success) return data;
-    } catch (e) {
-      console.log('saveDatabase error:', e);
-    }
-  };
-
-  const testConnection = async (params: any) => {
-    try {
-      const res: any = await axios$.post(`/directDB/testConnect`, params);
-
-      const { success, data } = res;
-      if (success) return data;
-    } catch (e) {
-      console.log('testConnection error:', e);
-    }
-  };
-
-  const syncSchema = async (id: any) => {
-    try {
-      const res: any = await axios$.get(`/directDB/syncSchema/${id}`);
-      const { success, data } = res;
-      if (success) return data;
-    } catch (e) {
-      console.log('syncSchema error:', e);
-    }
-  };
-  return {
-    getDatabaseList,
-    getShareDatabaseList,
-    delDatabaseById,
-    saveDatabase,
-    testConnection,
-    syncSchema,
-  };
-};
-
-const getTypeToUrl = (type: IDataSourceType) => {
-  return type == 'DataTable' ? 'dataTable' : 'directDB';
-};
-
-export default AxiosInstance;