@krysent/kite-ui - 三层物料体系组件库

基于 Ant Design 的二次封装组件库，采用三层物料体系架构设计。

快速开始

# 安装依赖
pnpm install

# 构建
pnpm build

# 类型检查
pnpm type-check

# 测试
pnpm test

目录结构

packages/ui/
├── src/
│   ├── atoms/          # 原子层 - Base UI 包装器
│   ├── patterns/       # 模式层 - 业务组件
│   ├── templates/      # 模板层 - 复杂模块
│   ├── hooks/          # Headless Hooks
│   ├── types/          # 类型定义
│   └── test/           # 测试配置
├── ARCHITECTURE.md      # 架构文档
└── README.md           # 本文件

使用示例

原子层组件

import { ZButton, Input, CurrencyInput, ZStatusTag } from '@krysent/kite-ui';

<ZButton type="primary">提交</ZButton>
<Input placeholder="请输入" />
<CurrencyInput value={1000} currency="¥" />
<ZStatusTag status="success" />

模式层组件

import { ZAddressSelector, ZUserSelect, ZSkuUploader } from '@krysent/kite-ui';

<ZAddressSelector onChange={(value) => console.log(value)} />
<ZUserSelect apiUrl="/api/users/search" />
<ZSkuUploader uploadUrl="/api/upload/sku" />

模板层组件

import { Table, SchemaForm } from '@krysent/kite-ui';

// Table - 高级表格
<Table
  columns={[
    { title: 'ID', dataIndex: 'id' },
    { title: '名称', dataIndex: 'name' },
  ]}
  requestOptions={{
    request: async (params) => {
      const res = await fetchUsers(params);
      return { data: res.list, total: res.total };
    },
  }}
/>

// SchemaForm - Schema 驱动表单
<SchemaForm
  schema={{
    fields: [
      { name: 'username', label: '用户名', type: 'input', required: true },
      {
        name: 'email',
        label: '邮箱',
        type: 'input',
        disabled: (values) => values.role === 'guest',
        dependencies: ['role'],
      },
    ],
  }}
  onFinish={(values) => console.log(values)}
/>

Headless Hooks

import { useTableRequest, useFormReactivity } from '@krysent/kite-ui'

// 自定义表格逻辑
const { dataSource, loading, pagination, refresh } = useTableRequest({
  request: fetchData,
})

// 表单字段联动
const { processedFields, handleValuesChange } = useFormReactivity({
  fields: schema.fields,
  form,
})

详细文档

• 架构文档 - 三层物料体系详细说明
• 组件 API - 组件 API 文档（待完善）

测试

# 运行测试
pnpm test

# 测试覆盖率
pnpm test:coverage

# UI 模式
pnpm test:ui

License

MIT