@gientech/modual 2.0.4 → 2.0.5

package/src/modules/database/server.ts

@@ -0,0 +1,196 @@
+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;

package/src/modules/databaseId/CustomCom.tsx

@@ -0,0 +1,156 @@
+import { TriangleAlert, LoaderCircle } from 'lucide-react';
+import { Tooltip, Tag, Badge } from 'antd';
+import { Button } from '@mxmweb/zui';
+import EmptyImg from './assets/empty.png';
+
+enum OPT_BTN {
+  DATE = 0,
+  VIEW,
+  ERROR,
+  AUTHORIZE,
+  DELETE,
+  ANALYSIS_OR_EXTRACT,
+  DOWNLOAD,
+  EDIT,
+  ADD,
+  ANALYSIS_CONFIG,
+  AUTHORIZE_CONFIG,
+}
+
+enum DescStatus {
+  GENERATING = 'generating',
+  SUCCESS = 'success',
+  FAIL = 'fail',
+}
+
+const statusColorMap = {
+  success: 'green',
+  error: 'red',
+  warning: 'orange',
+  processing: 'blue',
+  info: 'cyan',
+  default: 'default',
+};
+
+type StatusColorKey = keyof typeof statusColorMap;
+const getStatusColor = (statusType: unknown): string => {
+  if (typeof statusType === 'string' && (statusType as string) in statusColorMap) {
+    return statusColorMap[statusType as StatusColorKey];
+  }
+  return statusColorMap.default;
+};
+
+const StatusComponent = (props: any) => {
+  const { value, cell } = props;
+
+  switch (cell.columnId) {
+    case 'importstatus':
+      if (value) {
+        return (
+          <Tooltip title="有追加失败的文件，请及时处理">
+            <Tag color="red" bordered={false}>
+              追加失败
+            </Tag>
+          </Tooltip>
+        );
+      }
+      return <></>;
+    case 'status':
+      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} />
+              <TriangleAlert size={14} color="red" />
+            </div>
+          </Tooltip>
+        );
+      } else {
+        return <Badge color={color} text={value} />;
+      }
+    default:
+      return <></>;
+  }
+};
+const statusArr = [
+  { statusType: 'success', value: '导入成功', status: '30' },
+  { statusType: 'error', value: '导入失败', status: '00' },
+  { statusType: 'default', value: '待导入', status: '10' },
+  { statusType: 'processing', value: '导入中', status: '20' },
+  { statusType: 'processing', value: '导入中', status: '11' }, //11是导入中但未建表, 需要在前端展示导入中
+];
+
+const TableMetaDescriptionCom = (info: any) => {
+  const { cell, value } = info;
+  if (typeof value == 'string') {
+    return (
+      <div
+        title={value}
+        style={{
+          maxWidth: 240,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {value}
+      </div>
+    );
+  } else {
+    if (cell.tableMeta?.isGenDescription) {
+      //如果用户选择了自动生成描述
+      if (cell.tableMeta?.generateDescriptionStatus == 'generating') {
+        return (
+          <div
+            className="flex items-center gap-1 text-[#84ADFF]"
+            style={{
+              color: '#84ADFF',
+            }}
+          >
+            <span>生成中</span>
+            <LoaderCircle size={14} />
+          </div>
+        );
+      }
+
+      return '-';
+    }
+
+    return '-';
+  }
+};
+
+const EmptyData = ({
+  dbInfo,
+  setDrawerTitle,
+  setDrawerVisible,
+  getBtnDisabled,
+}: {
+  dbInfo: any;
+  setDrawerTitle: (title: string) => void;
+  setDrawerVisible: (open: boolean) => void;
+  getBtnDisabled?: (type: OPT_BTN, permission: number) => boolean;
+}) => (
+  <div className="flex flex-col items-center justify-center h-full">
+    <div className="text-xl font-semibold mb-3">
+      <img src={EmptyImg} width={120} />
+    </div>
+    <div className="text-base mb-2" style={{ color: '#888888' }}>
+      暂无数据文件
+    </div>
+    <div className="flex gap-3">
+      <Button
+        mode="primary"
+        label="上传数据文件"
+        disabled={getBtnDisabled && getBtnDisabled(OPT_BTN.ADD, dbInfo?.permission)}
+        onClick={() => {
+          setDrawerTitle('上传数据文件');
+          setDrawerVisible(true);
+        }}
+      />
+    </div>
+  </div>
+);
+
+export { StatusComponent, TableMetaDescriptionCom, statusArr, EmptyData, OPT_BTN, DescStatus };

package/src/modules/databaseId/EditConfig.tsx

@@ -0,0 +1,280 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { message, Drawer, Popover, Modal } from 'antd';
+import { Button } from '@mxmweb/zui';
+import { X } from 'lucide-react';
+import TemIcon from './assets/template.svg';
+import AIIcon from './assets/aiOptimize.svg';
+import { PromptTempDesigner } from '@mxmweb/rtext';
+const { confirm } = Modal;
+
+const initTemplate =
+  '<template key="type" placeholder="输入表格类型"></template>表格主要展示了<template key="scene" placeholder="输入场景名称"></template>场景的数据,包含<template key="primary_key" placeholder="主要字段(可写多个,用顿号分隔)"></template>等主要字段,支持用户查询<template key="search_direction" placeholder="大概介绍需要查询的方向"></template>问题,如果设计多表关联查询,最好说明此表格通过<template key="key_name" placeholder="字段名称"></template>字段可以关联另一个<template key="table_name" placeholder="表格名称"></template>表格。';
+interface UploadDrawerProps {
+  drawerTitle: string;
+  drawerVisible: boolean;
+  handleDrawerClose: () => void;
+  optimizeDesc: (tableId: string | number) => Promise<any>;
+  tableInfo?: any;
+  eventsEmit: (name: string, data: any, appFn?: any) => void;
+}
+const EditConfig = ({
+  drawerTitle,
+  drawerVisible,
+  tableInfo,
+  handleDrawerClose,
+  optimizeDesc,
+  eventsEmit,
+}: UploadDrawerProps) => {
+  const tbTitle = useMemo(() => {
+    return tableInfo?.data.find((d: any) => d.columnId == 'name').value || '-';
+  }, [tableInfo]);
+
+  const [templateContent, setTemplateContent] = useState('');
+  const [getDataFunction, setGetDataFunction] = useState<
+    ((format: 'pure_string' | 'string' | 'markdown' | 'html') => string) | null
+  >(null);
+  const [data, setData] = useState<string>('');
+  const [version, setVersion] = useState<number>(0);
+
+  // AI优化loading
+  const [optimizeLoading, setOptimizeLoading] = useState(false);
+
+  //使用模版popover
+  const [showModel, setShowModel] = useState(false);
+
+  useEffect(() => {
+    const tbDesc = tableInfo?.data.find((d: any) => d.columnId == 'description').value || '-';
+    setData(tbDesc);
+  }, [tableInfo]);
+
+  const showConfirm = () => {
+    confirm({
+      title: '你确定要使用模板吗？',
+      content: '这将替换你当前已填写的内容，且无法撤销。',
+      okText: '确认替换',
+      cancelText: '取消',
+      onOk() {
+        setData(initTemplate);
+        setVersion(v => v + 1);
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  // 处理模版内容变化
+  const handleTemplateChange = useCallback((template: string) => {
+    setTemplateContent(template);
+    console.log('模版内容变化:', template);
+  }, []);
+
+  // 处理getData回调
+  const handleGetData = useCallback(
+    (getData: (format: 'pure_string' | 'string' | 'markdown' | 'html') => string) => {
+      setGetDataFunction(() => getData);
+      console.log('getData函数已设置');
+    },
+    []
+  );
+
+  const handleOptimize = async () => {
+    try {
+      setOptimizeLoading(true);
+      const res = await optimizeDesc(tableInfo.tableId);
+      if (res) {
+        setData(res);
+        setVersion(v => v + 1);
+        setOptimizeLoading(false);
+      }
+    } catch (e) {
+      message.error('AI 优化失败');
+    }
+  };
+
+  const handleDesData = useCallback(() => {
+    if (!getDataFunction) {
+      console.error('getData函数尚未准备好，请稍后再试');
+      return;
+    }
+
+    const result = getDataFunction('pure_string');
+    eventsEmit('table_info:update', result);
+  }, [getDataFunction, eventsEmit]);
+  return (
+    <Drawer
+      title={drawerTitle}
+      placement="right"
+      width={720}
+      onClose={handleDrawerClose}
+      closeIcon={false}
+      extra={<X size={20} color="#888888" onClick={handleDrawerClose} className="cursor-pointer" />}
+      open={drawerVisible}
+      destroyOnHidden
+      footer={
+        <div
+          className={`flex  items-center`}
+          style={{
+            justifyContent: 'end',
+          }}
+        >
+          {/* 右侧：操作按钮组 */}
+          <div className="flex self-end gap-3">
+            <Button
+              mode="default"
+              style={{
+                marginRight: 10,
+              }}
+              label="取消"
+              onClick={handleDrawerClose}
+            />
+            <Button
+              mode="primary"
+              label="确认"
+              onClick={() => handleDesData()}
+              disabled={optimizeLoading}
+            />
+          </div>
+        </div>
+      }
+    >
+      <div className="mb-[10px] font-bold">{tbTitle}</div>
+      <div className="mb-[10px]">
+        <span
+          style={{
+            color: '#FF3B30',
+            marginRight: '4px',
+          }}
+        >
+          *
+        </span>
+        <span>数据表描述</span>
+        <span className="text-[#888888] ml-[4px]">
+          (请准确填写表格的应用场景描述，大模型将依赖此信息识别并正确调用该数据表。)
+        </span>
+      </div>
+      <PromptTempDesigner
+        key={version}
+        data={data}
+        onChange={handleTemplateChange}
+        onGetData={handleGetData}
+        styles={{
+          theme: {
+            colors: {
+              primary: '#0969da',
+              secondary: '#6b7280',
+              success: '#10b981',
+              warning: '#f59e0b',
+              error: '#ef4444',
+              info: '#3b82f6',
+              background: '#ffffff',
+              text: '#1f2937',
+              border: '#e5e7eb',
+              disabled: '#9ca3af',
+              disabledBackground: '#f3f4f6',
+              disabledText: '#6b7280',
+              shadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+              appBackground: 'transparent',
+              listBackground: '#f9fafb',
+              dashboardBackground: '#ffffff',
+              textSecondary: '#6b7280',
+            },
+            space: {
+              sidebar: '260px',
+              size: '12px',
+              radius: '8px',
+              padding: '1rem',
+              margin: '1rem',
+              shadow: '0 2px 8px rgba(0,0,0,0.1)',
+              lineHeight: '1.8',
+            },
+            icons: {},
+            fonts: {
+              body: {
+                size: '14px',
+                weight: 'normal',
+                family: 'PingFang SC, Microsoft YaHei, Arial, sans-serif',
+              },
+              heading: {
+                size: '14px',
+                weight: '600',
+                family: 'PingFang SC, Microsoft YaHei, Arial, sans-serif',
+              },
+            },
+            others: {
+              baseFontWeight: 'normal',
+            },
+          },
+          templateField: {
+            backgroundColor: '#E5EEFF', // 输入框背景色
+            borderColor: '#84ADFF', // 输入框边框颜色
+            borderRadius: '6px',
+            padding: '6px 12px', // 调整为1px间距，让蓝色块之间有精确的1px间距
+            margin: '2px',
+            fontSize: '14px',
+            fontWeight: '500',
+            minWidth: '80px',
+            textColor: '#84ADFF', // 未激活前文字颜色
+          },
+        }}
+      />
+      <div>
+        <Popover
+          open={showModel}
+          onOpenChange={v => setShowModel(!!v)}
+          content={
+            <div
+              style={{
+                width: '600px',
+                margin: '10px',
+                padding: '10px',
+              }}
+              onClick={showConfirm}
+              className="hover:bg-gray-100 h-[80px] cursor-pointer rounded"
+            >
+              {
+                '______表格主要展示了______场景的数据，包含______、______、______等主要字段，支持用户查询______问题(大概介绍)如果涉及多表关联查询，最好说明此表格通过______字段可以关联另一个______表格。'
+              }
+            </div>
+          }
+          title={
+            <div
+              className="flex justify-between items-center"
+              style={{
+                margin: '10px',
+              }}
+            >
+              <div className="text-[16px]">模版</div>
+              <X
+                size={20}
+                color="#888888"
+                onClick={() => setShowModel(false)}
+                className="cursor-pointer"
+              />
+            </div>
+          }
+          trigger="click"
+          destroyOnHidden
+          placement="bottomRight"
+          getPopupContainer={(triggerNode: HTMLElement) => triggerNode}
+        >
+          <span>
+            <Button mode="text" icon={<img src={TemIcon} />}>
+              使用模版
+            </Button>
+          </span>
+        </Popover>
+        <Button
+          onClick={handleOptimize}
+          mode="text"
+          icon={<img src={AIIcon} />}
+          loading={optimizeLoading}
+        >
+          AI优化
+        </Button>
+      </div>
+    </Drawer>
+  );
+};
+
+export default EditConfig;