npx skills add https://github.com/lobehub/lobehub --skill reactstyle 属性@lobehub/ui 中的 Flexbox 和 Center(参见 references/layout-kit.md)src/components > 已安装的包 > @lobehub/ui > antd如果不确定组件用法,请在本项目中搜索现有代码。大多数组件都扩展了 antd,并提供了额外的属性。
参考:node_modules/@lobehub/ui/es/index.mjs 以获取所有可用组件。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
混合路由:Next.js App Router(静态页面)+ React Router DOM(主 SPA)。
| 路由类型 | 使用场景 | 实现方式 |
|---|---|---|
| Next.js App Router | 认证页面(登录、注册、OAuth) | src/app/[variants]/(auth)/ |
| React Router DOM | 主 SPA(聊天、设置) | desktopRouter.config.tsx |
src/spa/entry.web.tsx(web),src/spa/entry.mobile.tsx,src/spa/entry.desktop.tsxsrc/spa/router/desktopRouter.config.tsxsrc/spa/router/mobileRouter.config.tsxsrc/utils/router.tsximport { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';
element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;
重要提示:对于 SPA 页面,请使用 react-router-dom 中的 Link,而不是 next/link。
// ❌ 错误
import Link from 'next/link';
<Link href="/">首页</Link>;
// ✅ 正确
import { Link } from 'react-router-dom';
<Link to="/">首页</Link>;
// 在组件中
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');
// 从存储中
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');
每周安装量
1.4K
仓库
GitHub 星标数
74.1K
首次出现
2026年1月27日
安全审计
安装于
opencode1.3K
codex1.3K
gemini-cli1.3K
github-copilot1.3K
kimi-cli1.2K
amp1.2K
style attributeFlexbox and Center from @lobehub/ui for layouts (see references/layout-kit.md)src/components > installed packages > @lobehub/ui > antdIf unsure about component usage, search existing code in this project. Most components extend antd with additional props.
Reference: node_modules/@lobehub/ui/es/index.mjs for all available components.
Common Components:
Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).
| Route Type | Use Case | Implementation |
|---|---|---|
| Next.js App Router | Auth pages (login, signup, oauth) | src/app/[variants]/(auth)/ |
| React Router DOM | Main SPA (chat, settings) | desktopRouter.config.tsx |
src/spa/entry.web.tsx (web), src/spa/entry.mobile.tsx, src/spa/entry.desktop.tsxsrc/spa/router/desktopRouter.config.tsxsrc/spa/router/mobileRouter.config.tsxsrc/utils/router.tsximport { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';
element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;
Important : For SPA pages, use Link from react-router-dom, NOT next/link.
// ❌ Wrong
import Link from 'next/link';
<Link href="/">Home</Link>;
// ✅ Correct
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>;
// In components
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');
// From stores
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');
Weekly Installs
1.4K
Repository
GitHub Stars
74.1K
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.3K
codex1.3K
gemini-cli1.3K
github-copilot1.3K
kimi-cli1.2K
amp1.2K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI代码审查工具 - 自动化安全漏洞检测与代码质量分析 | 支持多领域检查清单
1,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装