SealSeek BI 组件库

基于 Ant Design 的企业级 React 组件库，专为 BI 业务场景设计。

📦 安装

``bash
npm install @sealseek/bi-components


或

yarn add @sealseek/bi-components

或

pnpm add @sealseek/bi-components
`

🚀 快速开始

$3

确保您的项目已安装必要的依赖：

`bash
npm install react react-dom antd @ant-design/icons
`

$3

`tsx
import React from 'react';
import { ConfigProvider } from 'antd';
import {
Button,
Card,
DynamicInput,
DynamicTextArea,
AdvancedTable,
lightTheme
} from '@sealseek/bi-components';

function App() {
return (



);
}

export default App;
`

🎨 组件列表

$3

- Button - 增强的按钮组件
- Card - 卡片容器组件

$3

- AppModal - 应用级模态框
- PageTable - 页面级表格
- AdvancedTable - 高级表格（支持搜索、排序、分页）
- XcIcon - 自定义图标组件
- EmptyAndSpin - 空状态和加载状态
- BackButton - 返回按钮
- LinkButton - 链接样式按钮

$3

- DynamicInput - 动态文案输入框
- DynamicTextArea - 动态文案文本域

🔧 高级用法

$3

`tsx
import { DynamicInput } from '@sealseek/bi-components';

function MyComponent() {
const [value, setValue] = useState('');

return (
texts={["搜索商品", "搜索用户", "搜索订单"]}
placeholder="请输入搜索关键词"
animationSpeed={80}
autoPlay={true}
value={value}
onChange={setValue}
/>
);
}
`

$3

`tsx
import { DynamicTextArea } from '@sealseek/bi-components';

function MyComponent() {
const handleSubmit = (value: string) => {
console.log('提交内容:', value);
};

return (
texts={[
"描述您的业务需求",
"详细说明技术问题",
"提供更多背景信息"
]}
placeholder="请输入详细内容"
maxLength={1000}
showCount={true}
submitText="发送"
onSubmit={handleSubmit}
/>
);
}
`

$3

`tsx
import { AdvancedTable } from '@sealseek/bi-components';

const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
searchable: true,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
sorter: true,
},
];

function MyTable() {
const fetchData = async (params: any) => {
// 您的数据获取逻辑
return {
data: [],
total: 0,
};
};

return (
columns={columns}
fetchData={fetchData}
autoLoad={true}
/>
);
}
`

🎨 主题定制

组件库提供了默认的明亮主题，您也可以自定义主题：

`tsx
import { ConfigProvider } from 'antd';
import { lightTheme } from '@sealseek/bi-components';

const customTheme = {
...lightTheme,
token: {
...lightTheme.token,
colorPrimary: '#1890ff',
borderRadius: 8,
},
};

function App() {
return (

{/ 您的应用 /}

);
}
`

📝 TypeScript 支持

组件库完全使用 TypeScript 编写，提供完整的类型定义：

`tsx
import type {
DynamicInputProps,
DynamicTextAreaProps
} from '@sealseek/bi-components';

interface MyProps {
inputProps: DynamicInputProps;
textareaProps: DynamicTextAreaProps;
}
``

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License