# SealSeek BI 组件库

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

## 📦 安装

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

## 🚀 快速开始

### 1. 安装依赖

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

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

### 2. 引入组件

```tsx
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 动态输入框

```tsx
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 动态文本域

```tsx
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 高级表格

```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 (
    <AdvancedTable
      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 (
    <ConfigProvider theme={customTheme}>
      {/* 您的应用 */}
    </ConfigProvider>
  );
}
```

## 📝 TypeScript 支持

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

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

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

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License