SealSeek BI 组件库 - 基于 Ant Design 的企业级 React 组件
npm install bi-components-library基于 Ant Design 的企业级 React 组件库,专为 BI 业务场景设计。
``bash`
npm install @sealseek/bi-components或
yarn add @sealseek/bi-components或
pnpm add @sealseek/bi-components
确保您的项目已安装必要的依赖:
`bash`
npm install react react-dom antd @ant-design/icons
`tsx
import React from 'react';
import { ConfigProvider } from 'antd';
import {
Button,
Card,
DynamicInput,
DynamicTextArea,
AdvancedTable,
lightTheme
} from '@sealseek/bi-components';
function App() {
return (
placeholder="请输入内容"
/>
placeholder="请输入详细内容"
maxLength={500}
showCount={true}
onSubmit={(value) => console.log('提交:', value)}
/>
);
}
export default App;
`
`tsx
import { DynamicInput } from '@sealseek/bi-components';
function MyComponent() {
const [value, setValue] = useState('');
return (
placeholder="请输入搜索关键词"
animationSpeed={80}
autoPlay={true}
value={value}
onChange={setValue}
/>
);
}
`
`tsx
import { DynamicTextArea } from '@sealseek/bi-components';
function MyComponent() {
const handleSubmit = (value: string) => {
console.log('提交内容:', value);
};
return (
"描述您的业务需求",
"详细说明技术问题",
"提供更多背景信息"
]}
placeholder="请输入详细内容"
maxLength={1000}
showCount={true}
submitText="发送"
onSubmit={handleSubmit}
/>
);
}
`
`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 (
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 编写,提供完整的类型定义:
`tsx
import type {
DynamicInputProps,
DynamicTextAreaProps
} from '@sealseek/bi-components';
interface MyProps {
inputProps: DynamicInputProps;
textareaProps: DynamicTextAreaProps;
}
``
欢迎提交 Issue 和 Pull Request!
MIT License