yka-ui

游可爱 UI 组件库 - 基于 React 18 + TypeScript 的企业级组件库

特性

• 🚀 基于 React 18 + TypeScript
• 💄 基于 Figma 设计系统
• 🎨 支持 CSS Variables 设计令牌
• 📦 支持 SSR
• 🧩 组件化模块输出

安装

npm install yka-ui

快速开始

import { Button, PageLayout } from 'yka-ui';
import 'yka-ui/dist/index.css';

function App() {
  return (
    <PageLayout
      header={{ logo: '游可爱', user: { name: '管理员' } }}
      banner={{ title: '产品管理', gradient: true }}
    >
      <Button variant="primary">新建产品</Button>
    </PageLayout>
  );
}

组件

Button 按钮

import { Button } from 'yka-ui';

<Button variant="primary" size="medium">主按钮</Button>
<Button variant="secondary" size="medium">次按钮</Button>
<Button variant="ghost" size="medium">幽灵按钮</Button>
<Button variant="danger" size="medium">危险按钮</Button>

Props:

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | primary | secondary | ghost | danger | primary | 按钮类型 | | size | small | medium | large | medium | 按钮尺寸 | | loading | boolean | false | 是否加载中 | | block | boolean | false | 是否 block 级按钮 | | icon | ReactNode | - | 图标 |

Layout 布局

import { PageLayout, Header, Banner, Content, FilterBar, Card } from 'yka-ui';

<PageLayout
  header={{
    logo: '游可爱',
    user: { name: '管理员' },
  }}
  banner={{
    title: '产品管理',
    subtitle: '管理您的IP形象和数字商品',
    gradient: true,
    actions: <Button>新建产品</Button>,
  }}
>
  <FilterBar>筛选内容</FilterBar>
  <Content hasFilter>
    <Card>页面内容</Card>
  </Content>
</PageLayout>

Header 顶部导航

<Header
  logo="yka-ui"
  user={{ name: '管理员' }}
  actions={<Button>登录</Button>}
/>

Banner 横幅

<Banner
  title="页面标题"
  subtitle="副标题说明"
  gradient={true}
  actions={<Button>操作</Button>}
/>

Card 卡片

<Card title="卡片标题" extra={<Button>更多</Button>}>
  卡片内容
</Card>

设计令牌

组件库使用 CSS Variables 管理设计令牌：

/* 品牌色 */
--yk-brand-color: #6A59FF;

/* 功能色 */
--yk-success-color: #00C853;
--yk-warning-color: #FF9800;
--yk-error-color: #FF4D4F;

/* 文本色 */
--yk-text-color-primary: #2D3038;
--yk-text-color-secondary: #6E7285;

/* 背景色 */
--yk-bg-color-page: #F7F8FC;
--yk-bg-color-container: #FFFFFF;

/* 圆角 */
--yk-radius-sm: 4px;
--yk-radius-md: 8px;
--yk-radius-pill: 100px;

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

# 发布到 npm
npm publish

License

MIT