大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

什么是 LobeUI

LobeUI 是一个开源的 UI 组件库，用于快速构建 AIGC Web 应用程序。

LobeUI 组件基于 Antd 组件开发，完全兼容 Antd 组件， 推荐使用 antd-style 作为默认的 css-in-js 样式解决方案。本质上，css-in-js 是通过在 JS 环境中编写 CSS 相关的样式。 通过利用 JS 本身的活力实现非常灵活的样式功能。

LobeUI 的典型特点包括：

• 主题化：提供了一种简单方法来自定义默认主题，开发者可以更改颜色、字体等一切。
• 快速：在运行时避免不必要的样式属性，使其比其他 UI 库性能更高。
• 支持浅色和深色用户界面：自动暗模式识别，NextUI 在检测到 HTML theme prop 变化时自动更改主题。

目前 LobeUI 在 Github 通过 MIT 协议开源，是一个值得关注的前端相关的 AIGC 项目。

如何使用 LobeUI

LobeUI 软件包目前仅适用于 ESM。 要安装 Lobe UI，请运行以下命令：

$ bun add @lobehub/ui

如果要使用 NextJS 编译，同时需要正确使用 nextjs ssr，可以将 transpilePackages: ['@lobehub/ui'] 添加到 next.config.js。例如：

// next.config.jsconst nextConfig = {  // ...other config  transpilePackages: ['@lobehub/ui'],};

前面讲过，LobeUI 组件基于 Antd 开发，与 Antd 组件完全兼容，建议使用 antd-style 作为默认的 css-in-js 样式解决方案。因此，可以通过下面的 ThemeProvider 方式使用样式：

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

而下面是使用 styled-components 的 css-in-js 方案示例：

import styled from 'styled-component';import {List} from 'xxx';// Create a styled componentconst StyledList = styled(List)`  border: 1px solid ${(p) => p.theme.colorPrimary};  border-radius: 2px;  box-shadow: 0 8px 20px ${(p) => p.theme.colorShadow};`;const App: FC = ({list}) => {  return (    // Reference the component    <StyledList dataSource={list} />  );};

除了 LobeUI 外，还可以使用下面开源项目快速进行 AIGC 项目开发：

• Lobe Chat：一个开源、可扩展（函数调用）、高性能的聊天机器人框架。 它支持一键免费部署私人 ChatGPT/LLM Web 应用程序。
• Lobe Theme：稳定的扩散 webui、精美的界面设计、高度可定制的 UI 和效率提升功能的现代主题。
• Lobe i18n ：Lobe i18n 是一个用于 i18n（国际化）翻译过程的自动化工具，由 ChatGPT 提供支持，支持大文件自动拆分、增量更新以及 OpenAI 模型、API 代理和 temperature 自定义选项等功能。
• Lobe Commit ：Lobe Commit 是一个 CLI 工具，利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息。

参考资料

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

https://ui.lobehub.com/

https://styled-components.com/

https://github.com/lobehub/lobe-chat

https://github.com/lobehub/sd-webui-lobe-theme