lingee-ui

Kingdee Lingee Design 体系的 React UI 组件库，轻量、可定制、支持主题切换。

特性

• 🎨 CSS 变量 Token 体系 — 三层设计（Primitives → Semantic Light/Dark → Component），支持亮/暗主题切换
• 📦 按需加载 — 多入口构建，Tree-shaking 友好
• 🔧 TypeScript — 完整类型定义
• 🌍 国际化 — 内置中英文语言包
• ♿ 无障碍 — 基于 Radix UI 原语，ARIA 合规

安装

npm install lingee-ui
# 或
pnpm add lingee-ui

Peer Dependencies

pnpm add react react-dom lingee-icon

快速开始

在应用根部包裹 LingeeProvider，即可启用所有全局能力（多语言 + Toast）：

import { LingeeProvider, Button, toast } from "lingee-ui";

function App() {
  return (
    <LingeeProvider>
      <Button variant="primary" onClick={() => toast.success("操作成功")}>
        点击提示
      </Button>
    </LingeeProvider>
  );
}

按需引入（可选）

如果只需使用个别组件，可按路径引入以减小 bundle 体积：

import { Button } from "lingee-ui/button";
import { Tabs } from "lingee-ui/tabs";
import { toast } from "lingee-ui/toast";

样式随 JS 自动引入，无需手动 import CSS。

组件列表

| 组件 | 说明 | |------|------| | LingeeProvider | 根 Provider，内置 Toast 容器 + 国际化 | | Button | 按钮，支持 5 种变体、4 种尺寸、3 种形状 | | Tooltip | 文字提示，hover 触发，支持 12 个方向 | | Tabs | 标签页，支持 segmented / solid / outline / underline 4 种风格 | | toast | 全局提示（命令式），支持 info / success / warning / error |

主题定制

组件库通过 CSS 变量提供主题定制能力。

Token 体系（三层架构）

originToken/ (Figma 导出 JSON)
    ↓ generate-tokens 脚本自动生成
config/
├── primitives-color.less      ← 色板层：--lg-{色系}-{色阶}（464 个变量）
├── primitives-other.less      ← 非颜色基础值：spacing/radius/typography
├── tokens-color-light.less    ← 语义层亮色：--lg-g-{类别}-{名称}（153 个变量）
├── tokens-color-dark.less     ← 语义层暗色：[data-theme="dark"] 覆盖
└── tokens.less                ← 总入口（import 以上文件）

暗色模式：添加 [data-theme="dark"] 到 html 即可自动切换。

完整 Token 列表参见 config/tokens-color-light.less。

独立使用 Design Tokens

如果你的项目只需要 Lingee 的语义色体系（不引入组件），可以通过 CDN 直接引入 token 样式：

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/lingee-ui@latest/dist/tokens.css" />

<!-- jsdelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lingee-ui@latest/dist/tokens.css" />

或在 CSS 中 import：

@import "https://unpkg.com/lingee-ui@latest/dist/tokens.css";

引入后即可在 CSS 中使用语义色变量：

.my-card {
  color: var(--lg-g-fg-color-black-strong);
  background: var(--lg-g-bg-color-white-heavy);
  border: 1px solid var(--lg-g-border-color-black-soft);
}

.my-status--success {
  color: var(--lg-g-fg-color-success-default);
  background: var(--lg-g-bg-color-success-translucent-soft);
  border: 1px solid var(--lg-g-border-color-success-subtle);
}

语义色速查

| 类别 | 命名格式 | 示例 | |------|---------|------| | 前景色 | --lg-g-fg-color-{语义} | --lg-g-fg-color-black-strong、--lg-g-fg-color-primary-default | | 背景色 | --lg-g-bg-color-{语义} | --lg-g-bg-color-white-heavy、--lg-g-bg-color-primary-translucent-soft | | 边框色 | --lg-g-border-color-{语义} | --lg-g-border-color-black-soft、--lg-g-border-color-primary-default |

国际化

默认中文，切换英文只需传 locale：

import { LingeeProvider, enUS } from "lingee-ui";

<LingeeProvider locale={enUS}>
  <App />
</LingeeProvider>

License

MIT © Kingdee