kpro-ui

KPro 设计系统组件库，基于你的系统界面提炼，用于 Figma Make 测试。

包含组件

• Button — 主色/默认/链接/危险 四种变体
• Input — 文本输入框，支持前后缀
• Select — 下拉选择框
• Tabs — 方形边框式标签页（匹配你的系统样式）
• Tag — 小标签/徽标
• Table — 数据表格，支持 checkbox 多选

主色

#326BFB（与 Ant Design 主题一致）

发布到 npm

# 1. 安装依赖
npm install

# 2. 构建
npm run build

# 3. 登录 npm（首次需要）
npm login

# 4. 发布
npm publish --access public

在 Figma Make 中使用

发布后在 Figma Make 聊天中输入：

install kpro-ui

然后就可以让 AI 使用这些组件生成页面了。

使用示例

import { Button, Input, Select, Tabs, Tag, Table } from 'kpro-ui';

// Button
<Button variant="primary">查询</Button>
<Button variant="default">重置</Button>

// Tabs
<Tabs
  items={[
    { key: 'all', label: '全部(255)' },
    { key: 'pending', label: '待核销(115)' },
  ]}
/>

// Tag
<Tag color="blue">商家订单</Tag>

// Table
<Table
  columns={[
    { key: 'name', title: '商品信息', dataIndex: 'name' },
    { key: 'type', title: '商品类型', dataIndex: 'type' },
  ]}
  dataSource={data}
  rowSelection={{ onChange: (keys) => console.log(keys) }}
/>