一套企业级 UI 设计语言和 React 组件库。

✨ 特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• ⚙️ 全链路开发和设计工具体系。

🖥 兼容环境

| IE / Edge | Firefox | Chrome | Safari | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11,Edge last 2 versions | last 2 versions | last 2 versions | last 2 versions |

依赖

样式库是基于ant-design组件库进行设计的，使用本样式库请确保项目已经安装antd、antd-style库.

npm install antd --save
npm install antd-style -D

# or

pnpm install antd --save
pnpm install antd-style -D

# or

yarn add antd
yarn add antd-style -D

📦 安装

npm install u-design-token-r --force

# or

pnpm install u-design-token-r--force

# or

yarn add u-design-token-r --force

💻 使用

建议在Layout或main中添加如下代码切换明暗主题

import { ThemeProvider } from 'antd-style';
import { useState } from 'react';
import {
  UIHDesignTokenStyle,
  UIHDarkAlgorithm,
  UIHLightAlgorithm,
} from 'u-design-token-r';
// 所有算法使用与UIH DESIGN一致

// 引入样式标签&明暗模式算法
export default function Layout() {
  const [theme, setTheme] = useState('dark');
  const [colorPrimary, setColorPrimary] = useState('#365FD9');
  return (
    <ThemeProvider
      theme={{
        algorithm: theme === 'dark' ? UIHDarkAlgorithm : UIHLightAlgorithm,
        token: { colorPrimary: colorPrimary },
      }}
    >
      <>
        <UIHDesignTokenStyle />
        <Outlet />
      </>
    </ThemeProvider>
  );
}