@creekjs/web-components 1.0.0 → 1.0.1

package/README.md

@@ -1,1026 +1,294 @@
 # @creekjs/web-components
 
-No description available
+基于 Ant Design 的业务组件库，提供开箱即用的企业级 React  组件。
 
-## Installation
+## 📦 安装
 
 ```bash
 npm install @creekjs/web-components
-# or
-yarn add @creekjs/web-components
-# or
+# 或
 pnpm add @creekjs/web-components
+# 或
+yarn add @creekjs/web-components
 ```
 
-## Usage
-
-```typescript
-import { /* component names */ } from '@creekjs/web-components';
-```
-
-## API Reference
-
-
-### BgCenterProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| children | `React.ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/bg-center/index.tsx`
-
----
-
-
-### BgCenter
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| children | `React.ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/bg-center/index.tsx`
-
----
-
-
-### CreekConfigContextProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| iconFontCNs | `string[]` |  |
-
-
-
-
-**Source:** `web-components/src/creek-config-provider/CreekConfigContext.tsx`
-
----
-
-
-### CreekConfigContext
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| iconFontCNs | `string[]` |  |
-
-
-
-
-**Source:** `web-components/src/creek-config-provider/CreekConfigContext.tsx`
-
----
-
-
-### CreekConfigProviderProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| children | `React.ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/creek-config-provider/index.tsx`
-
----
-
-
-### CreekConfigProvider
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| children | `React.ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/creek-config-provider/index.tsx`
-
----
-
-
-### useViewportHeight
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-hooks/useViewportHeight.tsx`
-
----
-
-
-### CreekIconProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| iconFontCNs | `CreekConfigProviderProps['iconFontCNs']` |  |
-| type | `string` |  |
-| component | `CustomIconComponentProps['component']` |  |
-
-
-
-
-**Source:** `web-components/src/creek-icon/index.tsx`
-
----
-
-
-### CreekIcon
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| iconFontCNs | `CreekConfigProviderProps['iconFontCNs']` |  |
-| type | `string` |  |
-| component | `CustomIconComponentProps['component']` |  |
-
-
-
-
-**Source:** `web-components/src/creek-icon/index.tsx`
-
----
-
-
-### CreekKeepAlive
-
-No description available
-
-
-
-
-
+## 🔧 依赖
 
+- `@ant-design/icons`: ^5.5.1
+- `@ant-design/pro-components`: ^2.7.18
+- `antd-style`: ^3.7.1
+- `zustand`: ^5.0.1
 
-**Source:** `web-components/src/creek-keep-alive/index.tsx`
+## 📚 组件列表
 
----
+### 🎨 布局组件
 
+#### CreekLayout
+企业级布局组件，提供完整的页面布局解决方案。
 
-### CollapsedButtonProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| collapsed | `boolean` |  |
-
-
-
-
-**Source:** `web-components/src/creek-layout/CollapseButton.tsx`
-
----
-
-
-### CollapsedButtonStore
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| collapsed | `boolean` |  |
-| changeCollapsed | `() => void` |  |
-
-
-
-
-**Source:** `web-components/src/creek-layout/CollapseButton.tsx`
-
----
-
-
-### useCollapsedStore
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-layout/CollapseButton.tsx`
-
----
-
-
-### CollapsedButton
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| collapsed | `boolean` |  |
-
-
-
-
-**Source:** `web-components/src/creek-layout/CollapseButton.tsx`
-
----
-
-
-### NotFound
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-layout/Exception/NotFound.tsx`
-
----
-
-
-### ExceptionProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| children | `React.ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/creek-layout/Exception/index.tsx`
-
----
-
-
-### Exception
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| children | `React.ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/creek-layout/Exception/index.tsx`
-
----
-
-
-### FullScreenStore
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| isFullScreen | `boolean` |  |
-| changeFullScreen | `() => void` |  |
-
-
-
-
-**Source:** `web-components/src/creek-layout/HeaderContent/FullScreen.tsx`
-
----
-
-
-### useFullScreenStore
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-layout/HeaderContent/FullScreen.tsx`
-
----
-
-
-### FullScreen
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| isFullScreen | `boolean` |  |
-| changeFullScreen | `() => void` |  |
+```tsx
+import { CreekLayout } from '@creekjs/web-components';
 
+function App() {
+  return (
+    <CreekLayout>
+      {/* 你的页面内容 */}
+    </CreekLayout>
+  );
+}
+```
 
+**特性**:
+- 响应式布局
+- 侧边栏折叠
+- 面包屑导航
+- 异常页面处理
+- 头部内容自定义
 
+#### BgCenter
+背景居中组件，用于页面背景处理。
 
-**Source:** `web-components/src/creek-layout/HeaderContent/FullScreen.tsx`
+```tsx
+import { BgCenter } from '@creekjs/web-components';
 
----
+<BgCenter>
+  <div>居中内容</div>
+</BgCenter>
+```
 
+### 🔍 搜索组件
+
+#### CreekSearch
+高级搜索组件，支持多种搜索条件和筛选器。
+
+```tsx
+import { CreekSearch } from '@creekjs/web-components';
+
+const searchConfig = {
+  fields: [
+    {
+      name: 'keyword',
+      label: '关键词',
+      type: 'input'
+    },
+    {
+      name: 'status',
+      label: '状态',
+      type: 'select',
+      options: [
+        { label: '启用', value: 'active' },
+        { label: '禁用', value: 'inactive' }
+      ]
+    }
+  ]
+};
+
+function SearchDemo() {
+  const handleSearch = (values) => {
+    console.log('搜索条件:', values);
+  };
+
+  return (
+    <CreekSearch
+      config={searchConfig}
+      onSearch={handleSearch}
+    />
+  );
+}
+```
 
-### UserInfo
+**特性**:
+- 多种搜索字段类型
+- 搜索条件显示
+- 值选择器
+- 搜索输入框
+- 筛选器显示
+
+### 📊 表格组件
+
+#### CreekTable
+增强型表格组件，基于 Ant Design Pro Table。
+
+```tsx
+import { CreekTable } from '@creekjs/web-components';
+
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render: (_, record) => (
+      <a onClick={() => handleEdit(record)}>编辑</a>
+    ),
+  },
+];
+
+function TableDemo() {
+  return (
+    <CreekTable
+      columns={columns}
+      request={async (params) => {
+        // 请求数据
+        const response = await fetchData(params);
+        return {
+          data: response.data,
+          total: response.total,
+          success: true,
+        };
+      }}
+      rowKey="id"
+    />
+  );
+}
+```
 
-No description available
+**特性**:
+- 搜索表格集成
+- 工具栏渲染
+- 表格视图内容
+- 表格选项渲染
+- 自定义 hooks 支持
+
+### ⚙️ 配置组件
+
+#### CreekConfigProvider
+全局配置提供者，管理主题和全局设置。
+
+```tsx
+import { CreekConfigProvider } from '@creekjs/web-components';
+
+function App() {
+  return (
+    <CreekConfigProvider
+      theme={{
+        primaryColor: '#1890ff',
+        // 其他主题配置
+      }}
+    >
+      <YourApp />
+    </CreekConfigProvider>
+  );
+}
+```
 
+### 🎯 工具组件
 
+#### CreekIcon
+图标组件，基于 Ant Design Icons。
 
+```tsx
+import { CreekIcon } from '@creekjs/web-components';
 
+<CreekIcon type="user" />
+<CreekIcon type="setting" size={24} />
+```
 
+#### CreekLoading
+加载组件，提供统一的加载状态显示。
 
+```tsx
+import { CreekLoading } from '@creekjs/web-components';
 
-**Source:** `web-components/src/creek-layout/HeaderContent/UserInfo.tsx`
+<CreekLoading spinning={loading}>
+  <div>内容区域</div>
+</CreekLoading>
+```
 
----
+#### CreekKeepAlive
+组件缓存，保持组件状态。
 
+```tsx
+import { CreekKeepAlive } from '@creekjs/web-components';
 
-### HeaderContent
+<CreekKeepAlive cacheKey="unique-key">
+  <YourComponent />
+</CreekKeepAlive>
+```
 
-No description available
+### 🪝 Hooks
 
+#### useViewportHeight
+获取视口高度的 Hook。
 
+```tsx
+import { useViewportHeight } from '@creekjs/web-components';
 
+function MyComponent() {
+  const viewportHeight = useViewportHeight();
+  
+  return (
+    <div style={{ height: viewportHeight }}>
+      全屏内容
+    </div>
+  );
+}
+```
 
+## 🎨 主题定制
 
+组件库基于 `antd-style` 提供主题定制能力：
 
+```tsx
+import { CreekConfigProvider } from '@creekjs/web-components';
 
-**Source:** `web-components/src/creek-layout/HeaderContent/index.tsx`
+const customTheme = {
+  token: {
+    colorPrimary: '#00b96b',
+    borderRadius: 6,
+  },
+  components: {
+    Button: {
+      colorPrimary: '#00b96b',
+    },
+  },
+};
 
----
+<CreekConfigProvider theme={customTheme}>
+  <App />
+</CreekConfigProvider>
+```
 
+## 📱 响应式设计
 
-### LayoutProps
+所有组件都支持响应式设计，自动适配不同屏幕尺寸：
 
-No description available
+- 桌面端：完整功能展示
+- 平板端：适配中等屏幕
+- 移动端：优化触摸操作
 
+## 🔧 开发指南
 
+### 本地开发
 
+```bash
+# 克隆项目
+git clone <repository-url>
 
-#### Properties
+# 安装依赖
+pnpm install
 
-| Name | Type | Description |
-|------|------|-------------|
-| runtimeConfig | `ProLayoutProps` |  |
-| userConfig | `ProLayoutProps` |  |
-| navigate | `(path?: string | number) => void` |  |
-| initialInfo | `{
-    initialState: any` |  |
-| loading | `boolean` |  |
-| setInitialState | `() => void` |  |
+# 启动开发服务器
+pnpm run father:dev
 
+# 构建
+pnpm run father:build
+```
 
+### 组件开发规范
 
+1. **组件命名**：使用 `Creek` 前缀
+2. **文件结构**：每个组件一个文件夹
+3. **类型定义**：使用 TypeScript 严格模式
+4. **样式方案**：使用 `antd-style`
+5. **状态管理**：使用 `zustand`
 
-**Source:** `web-components/src/creek-layout/index.tsx`
-
----
-
-
-### CreekLayout
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-layout/index.tsx`
-
----
-
-
-### Loading
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-loading/index.tsx`
-
----
-
-
-### CreekSearchProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| columns | `ProColumnType<T>[]` |  |
-| onSubmit | `(values: Record<string, any>) => void` |  |
-| justify | `'start' | 'end'` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearch.tsx`
-
----
-
-
-### CreekSearch
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| columns | `ProColumnType<T>[]` |  |
-| onSubmit | `(values: Record<string, any>) => void` |  |
-| justify | `'start' | 'end'` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearch.tsx`
-
----
-
-
-### SearchContextValue
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| searchValue | `string` |  |
-| filters | `CreekSearchFilter[]` |  |
-| showValueSelector | `boolean` |  |
-| selectedColumn | `ProColumnType<T, U>` |  |
-| tempValue | `any` |  |
-| inputRef | `React.RefObject<any>` |  |
-| columns | `ProTableProps<T, U, ValueType>['columns']` |  |
-| filterOptions | `ProTableProps<T, U, ValueType>['columns']` |  |
-| onSubmit | `(params: U) => void` |  |
-| beforeSearchSubmit | `(params: Record<string, any>) => Record<string, any>` |  |
-| setSearchValue | `(value: string) => void` |  |
-| setFilters | `React.Dispatch<React.SetStateAction<CreekSearchFilter[]>>` |  |
-| setShowValueSelector | `(show: boolean) => void` |  |
-| setSelectedColumn | `(column: any) => void` |  |
-| setTempValue | `(value: any) => void` |  |
-| handleSearch | `(value: string) => void` |  |
-| handleSelectColumn | `(value: string) => void` |  |
-| addFilter | `(key: string, option: CreekSearchAddFilterOption) => void` |  |
-| confirmAddFilter | `() => void` |  |
-| cancelValueSelector | `() => void` |  |
-| removeFilter | `(filterId: string) => void` |  |
-| handelRest | `() => void` |  |
-| getColumnOptions | `(column: any) => Array<{ label: string` |  |
-| value | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchContext.tsx`
-
----
-
-
-### useSearchContext
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchContext.tsx`
-
----
-
-
-### CreekSearchProvider
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| columns | `ProTableProps<T, U, ValueType>['columns']` |  |
-| onSubmit | `(params: U) => void` |  |
-| beforeSearchSubmit | `(params: Record<string, any>) => Record<string, any>` |  |
-| children | `ReactNode` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchContext.tsx`
-
----
-
-
-### CreekFilterDisplayProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| className | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchFilterDisplay.tsx`
-
----
-
-
-### CreekFilterDisplay
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| className | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchFilterDisplay.tsx`
-
----
-
-
-### CreekSearchInputProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| className | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchInput.tsx`
-
----
-
-
-### CreekSearchInput
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| className | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchInput.tsx`
-
----
-
-
-### CreekSearchValueSelectorProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| onConfirm | `() => void` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchValueSelector.tsx`
-
----
-
-
-### CreekSearchValueSelector
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| onConfirm | `() => void` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/CreekSearchValueSelector.tsx`
-
----
-
-
-### CreekSearchAddFilterOption
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| value | `any` |  |
-| displayText | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/type.ts`
-
----
-
-
-### CreekSearchFilter
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| dataIndex | `string` |  |
-| title | `string` |  |
-
-
-
-
-**Source:** `web-components/src/creek-search/type.ts`
-
----
-
-
-### SearchProTable
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/SearchTable.tsx`
-
----
-
-
-### TableOptionRenderProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| defaultDom | `React.ReactNode[]` |  |
-| importConfig | `OptionRenderCustom` |  |
-| exportConfig | `OptionRenderCustom` |  |
-
-
-
-
-**Source:** `web-components/src/creek-table/TableOptionRender.tsx`
-
----
-
-
-### TableOptionRender
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| defaultDom | `React.ReactNode[]` |  |
-| importConfig | `OptionRenderCustom` |  |
-| exportConfig | `OptionRenderCustom` |  |
-
-
-
-
-**Source:** `web-components/src/creek-table/TableOptionRender.tsx`
-
----
-
-
-### CreekTableViewRender
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/TableViewContent.tsx`
-
----
-
-
-### TableViewContent
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/TableViewContent.tsx`
-
----
-
-
-### useAdaptiveToolBar
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/hooks/useAdaptiveToolBar.tsx`
-
----
-
-
-### useAutoAddFilterToColumns
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/hooks/useAutoAddFilterToColumns.tsx`
-
----
-
-
-### useElementDistance
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/hooks/useElementDistance.tsx`
-
----
-
-
-### CreekTable
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/index.tsx`
-
----
-
-
-### toolBarRender
-
-No description available
-
-
-
-
-
-
-
-**Source:** `web-components/src/creek-table/toolBarRender.tsx`
-
----
-
-
-### OptionRenderCustom
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| text | `string` |  |
-| icon | `React.ReactNode` |  |
-| onClick | `() => void` |  |
-
-
-
-
-**Source:** `web-components/src/creek-table/type.ts`
-
----
-
-
-### CreekTableProps
-
-No description available
-
-
-
-
-#### Properties
-
-| Name | Type | Description |
-|------|------|-------------|
-| pageFixedBottom | `boolean` |  |
-| pageFixedBottomConfig | `{
-    /** 底部保留空间（如固定在底部的元素高度），默认 0 */
-    bottomFix?: number` |  |
-
-
-
-
-**Source:** `web-components/src/creek-table/type.ts`
-
----
-
-
-## Version
-
-1.0.0
-
-## License
-
-ISC
+### 组件结构示例