结语

Coze Studio的创建数据库功能是现代前端开发的优秀实践案例，它不仅展现了技术实现的专业性，更体现了对AI应用数据连接能力的深度理解。通过对其源码的深入分析，我们可以学习到：

1. 数据连接设计：数据库连接作为AI Agent访问外部数据的桥梁，其设计直接影响AI应用的数据源多样性
2. 多数据库支持架构：支持MySQL、PostgreSQL、SQLite等多种数据库类型的统一管理架构
3. 用户体验优化：从连接配置到测试验证的完整流程设计，降低用户使用门槛
4. 类型安全保障：完整的TypeScript类型系统确保开发质量
5. 工程化最佳实践：IDL驱动的API开发模式，确保前后端接口一致性

数据库功能的技术价值

• 多源数据连接：支持连接多种类型的数据库，扩展AI应用的数据来源
• 可扩展架构设计：模块化的组件设计便于功能扩展和维护
• 完善的错误处理：从表单验证到连接测试的全链路错误处理
• 国际化支持：完整的多语言支持体系

这个功能的实现为我们提供了宝贵的学习资源，特别是在AI应用的数据连接能力方面。无论是技术架构、代码实现还是工程实践，都值得深入研究和借鉴。在未来的AI应用开发中，我们可以参考这些最佳实践，构建更加灵活和强大的数据连接系统。

数据库开发优化建议

架构优势

1. 模块化设计：

   • 组件职责清晰，易于维护和扩展
   • 状态管理集中化，避免状态混乱
   • API层抽象良好，便于测试和替换

2. 类型安全：

   • 全面的TypeScript类型定义
   • 接口规范统一，减少运行时错误
   • 编译时类型检查，提高代码质量

3. 用户体验：

   • 多数据库类型支持，满足不同数据连接需求
   • 实时连接测试，提升用户配置体验
   • 表单验证完善，减少用户配置错误

4. 性能优化：

   • 防抖节流机制，优化用户交互
   • 智能缓存策略，减少网络请求
   • 懒加载支持，提升页面加载速度

可优化方向

1. 代码分割：

   // 建议使用动态导入优化首屏加载
   const DatabaseEditor = lazy(() => import('./DatabaseEditor'));
   

2. 错误边界：

   // 添加错误边界组件
   class DatabaseErrorBoundary extends Component {
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
       // 错误上报和处理
     }
   }
   

3. 国际化支持：

   // 支持多语言
   const { t } = useTranslation('database');
   

4. 可访问性增强：

   // 添加ARIA标签和键盘导航
   <button aria-label={t('create-database')} />
   

技术栈总结

• 前端框架：React + TypeScript
• 状态管理：Custom Hooks + Context API
• UI组件：@coze-arch/coze-design 组件库
• 表单处理：Form API + 自定义验证
• 数据库连接：连接信息配置 + 实时连接测试
• API通信：Axios + IDL生成的类型安全接口
• 构建工具：Rush + Vite + ESBuild
• 代码生成：idl2ts-cli 自动生成数据库API代码
• 代码质量：ESLint + Prettier + TypeScript严格模式

最佳实践与开发规范

组件开发规范

1. 组件命名：

   • 使用PascalCase命名组件文件
   • 组件名称应该清晰表达其功能
   • 避免使用缩写，保持名称的可读性

2. 文件组织：

   src/
   ├── components/
   │   ├── DatabaseEditor/
   │   │   ├── index.tsx
   │   │   ├── DatabaseEditor.tsx
   │   │   ├── DatabaseEditor.module.css
   │   │   └── types.ts
   │   └── DatabaseLibrary/
   ├── hooks/
   │   ├── useDatabaseConfig.ts
   │   └── useDatabaseValidation.ts
   ├── utils/
   │   ├── validation.ts
   │   └── performance.ts
   └── types/
       └── database.ts
   

3. 代码风格：

   • 使用TypeScript严格模式
   • 遵循ESLint和Prettier配置
   • 保持函数单一职责原则
   • 使用有意义的变量和函数名

状态管理最佳实践

1. Hook设计原则：

   // ✅ 好的Hook设计
   const useDatabaseEditor = () => {
     const [config, setConfig] = useState<DatabaseConfig>();
     const [isValid, setIsValid] = useState(false);
     const [databaseType, setDatabaseType] = useState<DatabaseType>(DatabaseType.MySQL);
     
     const validateConfig = useCallback((value: DatabaseConfig) => {
       // 验证逻辑
       const errors = [];
       if (!value.name?.trim()) {
         errors.push('数据库名称不能为空');
       }
       if (value.name && /["'`\\]/.test(value.name)) {
         errors.push('数据库名称包含非法字符');
       }
       // 数据库连接信息验证
       if (!value.connectionInfo?.host) {
         errors.push('数据库主机地址不能为空');
       }
       if (!value.connectionInfo?.port) {
         errors.push('数据库端口不能为空');
       }
       return errors.length === 0;
     }, []);
     
     return {
       config,
       setConfig,
       isValid,
       validateConfig,
       databaseType,
       setDatabaseType,
     };
   };
   

2. 状态更新模式：

   // ✅ 使用函数式更新
   setDatabaseList(prev => [...prev, newDatabase]);
   
   // ❌ 避免直接修改状态
   databaseList.push(newDatabase);
   
   // ✅ 数据库类型变更时同步更新相关状态
   const handleDatabaseTypeChange = (type: DatabaseType) => {
     setDatabaseType(type);
     // 根据数据库类型设置默认连接参数
     if (type === DatabaseType.MySQL) {
       setDefaultPort(3306);
     } else if (type === DatabaseType.PostgreSQL) {
       setDefaultPort(5432);
     } else if (type === DatabaseType.SQLite) {
       // SQLite特殊处理
       setConnectionMode('local');
     }
   };
   

性能优化指南

1. 组件优化：

   // 使用React.memo优化数据库列表项组件
   const DatabaseItem = React.memo(({ database, onEdit, onDelete }) => {
     return (
       <div className="database-item" onClick={() => onEdit(database.id)}>
         <img src={database.icon_uri} alt={database.name} />
         <div className="database-info">
           <h4>{database.name}</h4>
           <p>{database.description}</p>
           <Tag color="brand">{getDatabaseTypeText(database.database_type)}</Tag>
         </div>
       </div>
     );
   });
   

2. 事件处理优化：

   // 使用useCallback缓存事件处理函数
   const handleEdit = useCallback((id: string) => {
     navigate(`/space/${spaceId}/database/${id}`);
   }, [navigate, spaceId]);
   
   const handleDatabaseTypeChange = useCallback((type: DatabaseType) => {
     setCurrentDatabaseType(type);
     formApi.setValue('database_type', type);
     onSelectDatabaseTypeChange?.(type);
   }, [formApi, onSelectDatabaseTypeChange]);
   

错误处理策略

1. 边界错误处理：

   class DatabaseErrorBoundary extends Component {
     state = { hasError: false, errorMessage: '' };
     
     static getDerivedStateFromError(error: Error) {
       return { hasError: true, errorMessage: error.message };
     }
     
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
       console.error('Database component error:', error, errorInfo);
       // 上报错误到监控系统
       reportError('database_component_error', {
         error: error.message,
         stack: error.stack,
         componentStack: errorInfo.componentStack,
       });
     }
     
     render() {
       if (this.state.hasError) {
         return (
           <div className="error-boundary">
             <h3>数据库组件出现错误</h3>
             <p>{this.state.errorMessage}</p>
             <Button onClick={() => window.location.reload()}>刷新页面</Button>
           </div>
         );
       }
       return this.props.children;
     }
   }
   

2. API错误处理：

   const handleDatabaseApiError = (error: any, operation: string) => {
     const { code, msg } = error.response?.data || {};
     
     switch (code) {
       case 401:
         Toast.error('请先登录');
         navigate('/login');
         break;
       case 403:
         Toast.error('没有权限操作此数据库');
         break;
       case 404:
         Toast.error('数据库不存在');
         break;
       case 409:
         Toast.error('数据库名称已存在');
         break;
       case 500:
         // 数据库连接错误特殊处理
         if (operation === '测试连接') {
           Toast.error('数据库连接失败，请检查连接信息是否正确');
         } else {
           Toast.error(msg || `${operation}失败，请稍后重试`);
         }
         break;
       default:
         Toast.error(msg || `${operation}失败，请稍后重试`);
     }
     
     // 记录错误日志
     console.error(`Database API Error [${operation}]:`, {
       code,
       message: msg,
       operation,
       timestamp: new Date().toISOString(),
     });
   };
   
   // 使用示例
   const createDatabase = async (data: CreateDatabaseRequest) => {
     try {
       const result = await DatabaseApi.CreateDatabase(data);
       Toast.success('数据库创建成功');
       return result;
     } catch (error) {
       handleDatabaseApiError(error, '创建数据库');
       throw error;
     }
   };
   

工具函数

数据库处理工具

frontend/packages/data/database/database-modal-base/src/utils/database.ts 提供了完整的数据库处理功能：

// 数据库类型枚举
export enum DatabaseType {
  MySQL = 1,
  PostgreSQL = 2,
  SQLite = 3,
  MongoDB = 4,
}

// 数据库连接模式
export enum ConnectionMode {
  LOCAL = 'local',
  REMOTE = 'remote',
}

// 数据库名称验证
export const validateDatabaseName = (name: string): {
  isValid: boolean;
  errors: string[];
} => {
  const errors: string[] = [];
  
  if (!name?.trim()) {
    errors.push('数据库名称不能为空');
  }
  
  if (name && name.length > 100) {
    errors.push('数据库名称不能超过100个字符');
  }
  
  // 检查非法字符
  if (name && /["'`\\]/.test(name)) {
    errors.push('数据库名称包含非法字符');
  }
  
  return {
    isValid: errors.length === 0,
    errors,
  };
};

// 数据库描述验证
export const validateDatabaseDescription = (description: string): {
  isValid: boolean;
  errors: string[];
} => {
  const errors: string[] = [];
  
  if (description && description.length > 2000) {
    errors.push('数据库描述不能超过2000个字符');
  }
  
  return {
    isValid: errors.length === 0,
    errors,
  };
};

// 数据库连接信息验证
export const validateDatabaseConnection = (connectionInfo: any): {
  isValid: boolean;
  errors: string[];
} => {
  const errors: string[] = [];
  
  if (!connectionInfo) {
    errors.push('请填写数据库连接信息');
    return { isValid: false, errors };
  }
  
  if (!connectionInfo.host) {
    errors.push('数据库主机地址不能为空');
  }
  
  if (!connectionInfo.port) {
    errors.push('数据库端口不能为空');
  } else if (isNaN(Number(connectionInfo.port)) || Number(connectionInfo.port) <= 0 || Number(connectionInfo.port) > 65535) {
    errors.push('数据库端口必须是1-65535之间的整数');
  }
  
  if (!connectionInfo.database_name) {
    errors.push('数据库名称不能为空');
  }
  
  return {
    isValid: errors.length === 0,
    errors,
  };
};

// 获取数据库类型显示文本
export const getDatabaseTypeText = (databaseType: DatabaseType): string => {
  switch (databaseType) {
    case DatabaseType.MySQL:
      return 'MySQL';
    case DatabaseType.PostgreSQL:
      return 'PostgreSQL';
    case DatabaseType.SQLite:
      return 'SQLite';
    case DatabaseType.MongoDB:
      return 'MongoDB';
    default:
      return '未知';
  }
};

// 获取数据库默认端口
export const getDefaultPortByDatabaseType = (databaseType: DatabaseType): number => {
  switch (databaseType) {
    case DatabaseType.MySQL:
      return 3306;
    case DatabaseType.PostgreSQL:
      return 5432;
    case DatabaseType.MongoDB:
      return 27017;
    default:
      return 0;
  }
};

设计亮点：

• 多数据库类型支持：支持MySQL、PostgreSQL、SQLite、MongoDB等常见数据库类型
• 完整的连接验证：全面验证数据库连接信息的有效性
• 类型转换精确：准确处理数据库类型与显示文本的转换
• 类型安全：完整的TypeScript类型定义

性能优化

1. 组件渲染优化

条件渲染：

// 根据状态条件渲染组件
{showDatabaseModal && (
  <DatabaseConfiguratorModal
    visible={showDatabaseModal}
    mode={modalMode}
    // ... props
  />
)}

{!!testConnectionResult && (
  <ConnectionResultModal
    visible={!!testConnectionResult}
    result={testConnectionResult}
    // ... props
  />
)}

状态最小化：

// 只在必要时更新状态
const openCreateModal = useMemoizedFn(() => {
  setModalMode('create');
  setEditData(undefined);  // 清理编辑数据
  setShowDatabaseModal(true);
});

2. 事件处理优化

函数缓存：

// 使用useMemoizedFn缓存事件处理函数
const handleDatabaseSave = useMemoizedFn(async (databaseData: CreateDatabaseRequest) => {
  try {
    const result = await DatabaseApi.CreateDatabase(databaseData);
    refreshDatabaseList();
    return result;
  } catch (error) {
    console.error('保存数据库失败:', error);
    throw error;
  }
});

防抖处理：

// 对数据库名称变化进行防抖处理
const debouncedNameValidation = useDebounce((name: string) => {
  const { isValid, errors } = validateDatabaseName(name);
  setNameValidationResult({ isValid, errors });
}, 300);

// 对数据库描述变化进行防抖处理
const debouncedDescValidation = useDebounce((description: string) => {
  const { isValid, errors } = validateDatabaseDescription(description);
  setDescValidationResult({ isValid, errors });
}, 300);

// 对数据库连接信息变化进行防抖处理
const debouncedConnectionValidation = useDebounce((connectionInfo: any) => {
  const { isValid, errors } = validateDatabaseConnection(connectionInfo);
  setConnectionValidationResult({ isValid, errors });
}, 300);

3. 数据管理优化

useRequest状态管理：

const { loading, run: fetchDatabaseList } = useRequest(fetchDatabaseListApi, {
  manual: true,
  onSuccess: responseData => {
    setDatabaseList(responseData?.data?.databases || []);
  },
});

状态同步：

// 操作成功后同步更新列表
const handleDelete = async (databaseId: string) => {
  await DatabaseApi.DeleteDatabase({ database_id: databaseId });
  fetchDatabaseList(); // 重新获取数据库列表
};

// 数据库状态切换
const handleStatusToggle = async (databaseId: string, enabled: boolean) => {
  await DatabaseApi.UpdateDatabase({
    database_id: databaseId,
    status: enabled ? DatabaseStatus.DatabaseReady : DatabaseStatus.DatabaseForbid,
  });
  fetchDatabaseList(); // 重新获取数据库列表
};

用户体验设计

1. 即时反馈

操作状态反馈：

// 保存成功提示
Toast.success({
  content: I18n.t('database_create_success'),
  showClose: false,
});

// 加载状态显示
<DatabaseTable loading={loading} dataSource={databaseList || []} />

实时预览：

// 根据数据库类型实时更新图标预览
const iconPreview = useMemo(() => {
  return databaseType === DatabaseType.MySQL ? mysqlIcon :
         databaseType === DatabaseType.PostgreSQL ? postgresqlIcon :
         databaseType === DatabaseType.SQLite ? sqliteIcon :
         databaseType === DatabaseType.MongoDB ? mongodbIcon : defaultIcon;
}, [databaseType]);

<IconPreview
  src={iconPreview}
  className={classNames(styles['icon-preview'], {
    [styles['icon-loading']]: iconLoading,
  })}
/>

2. 交互优化

安全确认：

// 删除数据库需要确认
<Popconfirm
  onConfirm={() => onDelete(`${record?.database_id}`)}
  content={I18n.t('delete_database_confirm')}
  title={I18n.t('delete_database_warning')}
>
  <UIButton icon={<IconCozMinusCircle />} />
</Popconfirm>

智能提示：

// 数据库类型选择提示
<Tooltip content={I18n.t('database_type_hint')}>
  <SelectDatabaseType
    value={databaseType}
    onChange={handleDatabaseTypeChange}
    placeholder="请选择数据库类型"
  />
</Tooltip>

// 图标生成提示
<Tooltip content={I18n.t('icon_generate_hint')}>
  <PictureUpload
    generateInfo={{ name, desc }}
    generateTooltip={{
      generateBtnText: I18n.t('database_create_generate_avatar_tips'),
      contentNotLegalText: I18n.t('database_create_generate_content_tips'),
    }}
  />
</Tooltip>

// 连接测试提示
<Tooltip content={I18n.t('connection_test_hint')}>
  <Button
    type="primary"
    onClick={handleConnectionTest}
    loading={connectionTesting}
  >
    测试连接
  </Button>
</Tooltip>

3. 空状态处理

引导式空状态：

<UIEmpty
  title={I18n.t('no_database')}
  description={I18n.t('no_database_description')}
  action={
    <Button onClick={() => openCreateDatabaseModal()} theme="solid" type="primary">
      {I18n.t('create_first_database')}
    </Button>
  }
/>

安全性设计

1. 数据安全

敏感信息过滤：

// 检测和过滤数据库连接信息中的敏感信息
const filterSensitiveDatabaseContent = (content: string): string => {
  // 过滤可能的密码、密钥等敏感信息
  const sensitivePatterns = [
    /password\s*[:=]\s*['"]([^'"]+)['"]/gi, // 密码字段
    /secret\s*[:=]\s*['"]([^'"]+)['"]/gi, // 密钥字段
    /key\s*[:=]\s*['"]([^'"]+)['"]/gi, // 密钥字段
    /token\s*[:=]\s*['"]([^'"]+)['"]/gi, // Token字段
  ];
  
  let filtered = content;
  sensitivePatterns.forEach(pattern => {
    filtered = filtered.replace(pattern, (match) => {
      // 只保留关键字，替换值为星号
      return match.replace(/['"].*['"]/, '"******"');
    });
  });
  
  return filtered;
};

连接信息安全审核：

// 数据库连接信息安全审核
const auditDatabaseConnectionInfo = async (name: string, connectionString: string): Promise<{
  isApproved: boolean;
  warnings: string[];
}> => {
  const warnings: string[] = [];
  
  // 检查数据库名称是否包含不当内容
  if (name && (/恶意|攻击|违法/.test(name))) {
    warnings.push('数据库名称可能包含不当信息');
  }
  
  // 检查连接字符串中的敏感信息暴露风险
  const sensitiveKeywords = ['password=', 'secret=', 'key=', 'token='];
  if (connectionString && sensitiveKeywords.some(keyword => 
    connectionString.toLowerCase().includes(keyword) && 
    !connectionString.includes('******')
  )) {
    warnings.push('连接字符串中可能包含未加密的敏感信息');
  }
  
  return {
    isApproved: warnings.length === 0,
    warnings,
  };
};

2. 操作权限

权限验证：

// 基于用户权限控制数据库操作
const canEditDatabase = (database: Database, user: User): boolean => {
  return database.creator_id === user.id || user.role === 'admin';
};

const canDeleteDatabase = (database: Database, user: User): boolean => {
  return database.actions?.find(action => action.key === ActionKey.Delete)?.enable || false;
};

<UIButton 
  disabled={!canEditDatabase(database, currentUser)}
  onClick={() => onEdit(database)}
/>

资源访问控制：

// 检查用户是否有权限访问特定数据库
const checkDatabaseAccess = (databaseId: string, userId: string): boolean => {
  // 实现权限检查逻辑
  return hasPermission(userId, 'database:read', databaseId);
};

// 检查数据库状态切换权限
const canToggleDatabaseStatus = (database: Database): boolean => {
  return database.actions?.find(action => action.key === ActionKey.EnableSwitch)?.enable || false;
};

// 检查数据库连接权限
const canTestDatabaseConnection = (database: Database): boolean => {
  return database.actions?.find(action => action.key === ActionKey.TestConnection)?.enable || false;
};

3. 输入验证

表单验证：

<CozeInputWithCountField
  field="name"
  maxLength={100}
  rules={[
    { required: true, whitespace: true, message: '数据库名称不能为空' },
    { pattern: /^[^"'`\\]+$/, message: '数据库名称包含非法字符' }
  ]}
/>

<CozeFormTextArea
  field="description"
  maxLength={2000}
  maxCount={2000}
  autosize={{ minRows: 1, maxRows: 2 }}
  placeholder="请输入数据库描述"
/>

<CozeFormItem
  field="connectionString"
  label="连接字符串"
  rules={[
    { required: true, message: '数据库连接字符串不能为空' },
    { pattern: /^[\w\W]*$/, message: '连接字符串格式不正确' }
  ]}
>
  <CozeFormTextArea
    placeholder="请输入数据库连接字符串"
    autosize={{ minRows: 2, maxRows: 4 }}
  />
</CozeFormItem>

内容长度限制：

// 限制数据库名称和描述长度
const validateDatabaseNameLength = (name: string): boolean => {
  const maxLength = 100; // 最大100字符
  return name.length <= maxLength;
};

const validateDatabaseDescLength = (description: string): boolean => {
  const maxLength = 2000; // 最大2000字符
  return description.length <= maxLength;
};

// 验证数据库连接字符串
const validateConnectionString = (connectionString: string): boolean => {
  // 根据数据库类型验证连接字符串格式
  if (!connectionString || connectionString.trim() === '') {
    return false;
  }
  // 这里可以添加更具体的连接字符串格式验证逻辑
  return true;
};

国际化支持

1. 文本国际化

统一文本管理：

// 所有用户可见文本都通过I18n管理
<h3>{I18n.t('database_library')}</h3>
<Button>{I18n.t('create_database')}</Button>
<p>{I18n.t('database_creation_guide')}</p>

动态文本生成：

// 支持参数化的国际化文本
label: I18n.t('database_types', {
  count: databaseTypes.length,
  types: databaseTypes.map(type => getDatabaseTypeText(type)).join(', '),
})

// 数据库状态显示
status: I18n.t('database_status_text', {
  status: database.status === DatabaseStatus.DatabaseReady ? '已启用' : '已禁用',
})

2. 内容格式化

本地化内容显示：

// 根据用户语言环境格式化数据库内容
export const formatDatabaseContent = (name: string, description: string, locale: string) => {
  // 根据语言环境调整内容显示
  if (locale === 'zh-CN') {
    return {
      name: name.trim(),
      description: description.replace(/\n/g, '\n\n'), // 中文增加段落间距
    };
  }
  return { name: name.trim(), description };
};

// 格式化创建时间
export const formatCreatedTime = (timestamp: number, locale: string) => {
  return dayjs.unix(timestamp).locale(locale).format('YYYY-MM-DD HH:mm:ss');
};

// 格式化文件大小
export const formatFileSize = (bytes: number, locale: string) => {
  const units = locale === 'zh-CN' ? ['字节', 'KB', 'MB', 'GB'] : ['B', 'KB', 'MB', 'GB'];
  let size = bytes;
  let unitIndex = 0;
  
  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024;
    unitIndex++;
  }
  
  return `${size.toFixed(2)} ${units[unitIndex]}`;
};

架构设计最佳实践

1. 模块化设计

组件职责分离：

• DatabaseLibraryHeader：负责顶部操作区域和创建按钮
• DatabaseTable：负责数据库列表展示
• CreateDatabaseModalV2：负责数据库创建和编辑
• CozeDatabaseAddTypeContent：负责数据库表单内容
• SelectDatabaseType：负责数据库类型选择
• DatabaseConnectionConfig：负责数据库连接配置

Hook职责分离：

• useDatabaseConfig：数据库操作状态管理
• useCreateDatabaseModalV2：数据库创建弹窗管理
• useDatabaseList等：API调用和数据管理
• 数据库工具函数：业务逻辑处理

2. 状态管理策略

集中式状态管理：

// 通过useDatabaseConfig集中管理操作状态
const {
  modal: createDatabaseModal,
  open: openCreateDatabaseModal,
  close: closeCreateDatabaseModal,
} = useCreateDatabaseModalV2({
  onFinish: (databaseID, connectionMode, shouldTest) => {
    navigate(`/space/${spaceId}/database/${databaseID}${shouldTest ? '/test' : ''}?mode=${connectionMode}&from=create`);
    closeCreateDatabaseModal();
  },
});

数据状态分离：

// API数据通过useRequest独立管理
const { loading, run: delDatabase } = useRequest(
  (databaseId: string) => DatabaseApi.DeleteDatabase({ database_id: databaseId }),
  {
    manual: true,
    onSuccess: () => {
      reloadList();
      Toast.success(I18n.t('Delete_success'));
    },
  },
);

3. 类型安全

完整的TypeScript支持：

// 接口类型定义
interface DatabaseTableProps {
  loading: boolean;
  dataSource: Database[];
  onEdit?: (data?: Database) => void;
  onDelete: (databaseId: string) => void;
  onStatusToggle: (databaseId: string, enabled: boolean) => void;
  onTestConnection?: (databaseId: string) => void;
}

// 数据库创建表单数据类型
interface CozeDatabaseAddTypeContentFormData {
  name: string;
  icon_uri?: Array<{
    url: string;
    uri: string;
    uid: string;
    isDefault?: boolean;
  }>;
  database_type: DatabaseType;
  description: string;
  connection_string?: string;
  host?: string;
  port?: number;
  username?: string;
  password?: string;
  database_name?: string;
}

// API响应类型
type CreateDatabaseResponseData = {
  database_id: string;
};

type GetIconResponseData = {
  icon: Icon;
};

type TestConnectionResponseData = {
  success: boolean;
  message?: string;
};