Ant Design 再次出手！AIGC UI 組件發(fā)布！

作者：小4子 2025-08-28 06:20:00

開(kāi)發(fā)

為了滿足開(kāi)發(fā)者構(gòu)建 AIGC 網(wǎng)頁(yè)應(yīng)用的需求，一款全新的 UI 組件庫(kù) —— LobeHub UI 正式發(fā)布！

在人工智能技術(shù)飛速發(fā)展的今天，AIGC（生成式 AI）應(yīng)用如雨后春筍般涌現(xiàn)。

為了滿足開(kāi)發(fā)者構(gòu)建 AIGC 網(wǎng)頁(yè)應(yīng)用的需求，一款全新的 UI 組件庫(kù) —— LobeHub UI 正式發(fā)布！

這款組件庫(kù)專為 AI 應(yīng)用而設(shè)計(jì)，旨在為開(kāi)發(fā)者提供更高效、更便捷的開(kāi)發(fā)體驗(yàn)。

一、LobeHub UI 簡(jiǎn)介

LobeHub UI 是基于 Ant Design 開(kāi)發(fā)的，完全兼容 Ant Design 組件。

它不僅繼承了 Ant Design 的優(yōu)秀特性，還針對(duì) AIGC 應(yīng)用的特點(diǎn)進(jìn)行了優(yōu)化和擴(kuò)展。

LobeHub UI 推薦使用 antd-style 作為默認(rèn)的 CSS-in-JS 樣式解決方案，以提供更靈活的樣式定制能力。

二、快速上手

1. 安裝

LobeHub UI 目前僅支持 ESM 模塊化規(guī)范，可通過(guò)以下命令進(jìn)行安裝：

npm install @lobehub/ui

如果你正在使用 Next.js，并希望正確實(shí)現(xiàn)服務(wù)器端渲染（SSR），可以在 next.config.js 文件中添加如下配置：

// next.config.js
const nextConfig = {
  // 其他配置...

  transpilePackages: ['@lobehub/ui'],
};

2. 使用示例

LobeHub UI 的組件可以直接與 Ant Design 組件一起使用。以下是一個(gè)簡(jiǎn)單的使用示例：

import { ThemeProvider, Button } from '@lobehub/ui';
import { Button as AntdButton } from 'antd';

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
    <AntdButton type="primary">Primary Button</AntdButton>
  </ThemeProvider>
);

三、特色功能

1. 主題定制

LobeHub UI 提供了簡(jiǎn)單的主題定制功能，你可以根據(jù)項(xiàng)目需求輕松更改顏色、字體、斷點(diǎn)等樣式元素。

通過(guò) ThemeProvider，你可以快速應(yīng)用自定義主題，打造符合品牌風(fēng)格的用戶界面。

import { ConfigProvider, Logo } from '@lobehub/ui';

export default () => {
  return (
    <ConfigProvider cnotallow={{
        proxy: 'custom',
        customCdnFn: (e: {pkg:string, version:string, path:string}) => `https://yourcdn/${pkg}/${version}/${path}`
    }}>
      <Logo />
    </ConfigProvider>
  );
};