bi-components-library 1.0.0

package/README.md

@@ -0,0 +1,221 @@
+# 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