SealSeek BI 组件库

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

📦 安装

npm install @sealseek/bi-components
# 或
yarn add @sealseek/bi-components
# 或
pnpm add @sealseek/bi-components

🚀 快速开始

1. 安装依赖

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

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

2. 引入组件

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

function App() {
  return (
    <ConfigProvider theme={lightTheme}>
      <div>
        <Button type="primary">基础按钮</Button>

        <DynamicInput
          texts={["请输入用户名", "请输入邮箱", "请输入手机号"]}
          placeholder="请输入内容"
        />

        <DynamicTextArea
          texts={["描述您的需求", "详细说明问题", "提供更多信息"]}
          placeholder="请输入详细内容"
          maxLength={500}
          showCount={true}
          onSubmit={(value) => console.log('提交:', value)}
        />
      </div>
    </ConfigProvider>
  );
}

export default App;

🎨 组件列表

基础组件

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

业务组件

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

动态组件

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

🔧 高级用法

DynamicInput 动态输入框

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

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

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

DynamicTextArea 动态文本域

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

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

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

AdvancedTable 高级表格

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 (
    <AdvancedTable
      columns={columns}
      fetchData={fetchData}
      autoLoad={true}
    />
  );
}

🎨 主题定制

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

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

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

function App() {
  return (
    <ConfigProvider theme={customTheme}>
      {/* 您的应用 */}
    </ConfigProvider>
  );
}

📝 TypeScript 支持

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

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

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

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License