LobeHub UI Kit基于 Ant Design AIGC UI 組件庫(kù)

技術(shù) 2025-06-12 09:43

聲明：該文章來(lái)自（前端資源推薦）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁(yè)加速服務(wù)。

文章來(lái)自公眾號(hào)：前端資源推薦

LobeHub UI Kit 是一個(gè)開(kāi)源的 UI 組件庫(kù)，用于構(gòu)建人工智能生成內(nèi)容（AIGC）的 Web 應(yīng)用。它基于 Ant Design (Antd) 組件開(kāi)發(fā)，完全兼容 Antd 組件，并推薦使用 Antd 風(fēng)格的 CSS-in-JS 作為默認(rèn)的樣式解決方案。LobeHub UI Kit 提供了一系列豐富的組件，支持主題定制、高性能優(yōu)化和自動(dòng)深色模式識(shí)別。

功能和特性：

1. 主題化（Themeable）

LobeHub UI Kit 提供了簡(jiǎn)單的方法來(lái)自定義默認(rèn)主題。您可以根據(jù)需要更改顏色、字體、斷點(diǎn)等。例如：

import?{ ThemeProvider }?from'@lobehub/ui';
const?customTheme = {
colors: {
? ??primary:?'#ff5722',
? ??secondary:?'#2196f3',
? },
fonts: {
? ??body:?'Arial, sans-serif',
? },
};
exportdefault?() => (
<ThemeProvider?theme={customTheme}>
? ??<Button>Hello AIGC</Button>
??</ThemeProvider>
);

2. 高性能（Fast）

LobeHub UI Kit 在運(yùn)行時(shí)避免不必要的樣式屬性，使其比其他 UI 庫(kù)更具性能優(yōu)勢(shì)。例如，它通過(guò)以下方式優(yōu)化性能：

避免不必要的重渲染：通過(guò) React 的 memo 和 useMemo 鉤子減少不必要的組件重渲染。

優(yōu)化樣式注入：通過(guò) CSS-in-JS 解決方案減少樣式注入的開(kāi)銷(xiāo)。

3. 支持深色模式（Light & Dark UI）

LobeHub UI Kit 支持自動(dòng)識(shí)別深色模式。當(dāng)檢測(cè)到 HTML 主題屬性變化時(shí)，自動(dòng)切換主題。例如：

import?{ ThemeProvider }?from?'@lobehub/ui';
export?default?() => (
??<ThemeProvider>
? ??<Button>Hello AIGC</Button>
??</ThemeProvider>
);

在上述代碼中，ThemeProvider 會(huì)自動(dòng)檢測(cè) HTML 的 theme 屬性變化，并切換主題。

4. 豐富的組件（Rich Components）

LobeHub UI Kit 提供了一系列豐富的組件，包括按鈕、輸入框、選擇器等，滿(mǎn)足多種開(kāi)發(fā)需求。例如：

import?{ Button, Input, Select }?from?'@lobehub/ui';
export?default?() => (
??<div>
? ??<Button?type="primary">Primary Button</Button>
? ??<Input?placeholder="Enter text"?/>
? ??<Select?placeholder="Select an option">
? ? ??<Select.Option?value="option1">Option 1</Select.Option>
? ? ??<Select.Option?value="option2">Option 2</Select.Option>
? ??</Select>
??</div>
);

項(xiàng)目地址

GitHub：https://github.com/lobehub/lobe-ui

官方文檔：https://ui.lobehub.com/

關(guān)注我們