mirror of
https://github.com/lobehub/lobehub.git
synced 2026-03-26 13:19:34 +07:00
170 lines
4.4 KiB
Plaintext
170 lines
4.4 KiB
Plaintext
---
|
|
description:
|
|
globs: *.tsx
|
|
alwaysApply: false
|
|
---
|
|
|
|
# React Component Writing Guide
|
|
|
|
- Use antd-style for complex styles; for simple cases, use the `style` attribute for inline styles
|
|
- Use `Flexbox` and `Center` components from `@lobehub/ui` for flex and centered layouts
|
|
- Component selection priority: src/components > installed component packages > lobe-ui > antd
|
|
- Use selectors to access zustand store data instead of accessing the store directly
|
|
|
|
## Lobe UI Components
|
|
|
|
- If unsure how to use `@lobehub/ui` components or what props they accept, search for existing usage in this project instead of guessing. Most components extend antd components with additional props
|
|
- For specific usage, search online. For example, for ActionIcon visit <https://ui.lobehub.com/components/action-icon>
|
|
- Read `node_modules/@lobehub/ui/es/index.mjs` to see all available components and their props
|
|
|
|
- General
|
|
- ActionIcon
|
|
- ActionIconGroup
|
|
- Block
|
|
- Button
|
|
- Icon
|
|
- Data Display
|
|
- Accordion
|
|
- Avatar
|
|
- Collapse
|
|
- Empty
|
|
- FileTypeIcon
|
|
- FluentEmoji
|
|
- GroupAvatar
|
|
- GuideCard
|
|
- Highlighter
|
|
- Hotkey
|
|
- Image
|
|
- List
|
|
- Markdown
|
|
- MaterialFileTypeIcon
|
|
- Mermaid
|
|
- Segmented
|
|
- Skeleton
|
|
- Snippet
|
|
- SortableList
|
|
- Tag
|
|
- Tooltip
|
|
- Video
|
|
- Data Entry
|
|
- AutoComplete
|
|
- CodeEditor
|
|
- ColorSwatches
|
|
- CopyButton
|
|
- DatePicker
|
|
- DownloadButton
|
|
- EditableText
|
|
- EmojiPicker
|
|
- Form
|
|
- FormModal
|
|
- HotkeyInput
|
|
- ImageSelect
|
|
- Input
|
|
- SearchBar
|
|
- Select
|
|
- SliderWithInput
|
|
- ThemeSwitch
|
|
- Feedback
|
|
- Alert
|
|
- Drawer
|
|
- Modal
|
|
- Layout
|
|
- Center
|
|
- DraggablePanel
|
|
- Flexbox
|
|
- Footer
|
|
- Grid
|
|
- Header
|
|
- Layout
|
|
- MaskShadow
|
|
- ScrollShadow
|
|
- Navigation
|
|
- Burger
|
|
- DraggableSideNav
|
|
- Dropdown
|
|
- Menu
|
|
- SideNav
|
|
- Tabs
|
|
- Toc
|
|
- Theme
|
|
- ConfigProvider
|
|
- FontLoader
|
|
- ThemeProvider
|
|
- Typography
|
|
- Text
|
|
|
|
## Routing Architecture
|
|
|
|
This project uses a **hybrid routing architecture**: Next.js App Router for static pages + React Router DOM for the main SPA.
|
|
|
|
### Route Types
|
|
|
|
```plaintext
|
|
+------------------+--------------------------------+--------------------------------+
|
|
| Route Type | Use Case | Implementation |
|
|
+------------------+--------------------------------+--------------------------------+
|
|
| Next.js App | Auth pages (login, signup, | page.tsx file convention |
|
|
| Router | oauth, reset-password, etc.) | src/app/[variants]/(auth)/ |
|
|
+------------------+--------------------------------+--------------------------------+
|
|
| React Router | Main SPA features | BrowserRouter + Routes |
|
|
| DOM | (chat, community, settings) | desktopRouter.config.tsx |
|
|
| | | mobileRouter.config.tsx |
|
|
+------------------+--------------------------------+--------------------------------+
|
|
```
|
|
|
|
### Key Files
|
|
|
|
- Entry point: `src/app/[variants]/page.tsx` - Routes to Desktop or Mobile based on device
|
|
- Desktop router: `src/app/[variants]/router/desktopRouter.config.tsx`
|
|
- Mobile router: `src/app/[variants]/(mobile)/router/mobileRouter.config.tsx`
|
|
- Router utilities: `src/utils/router.tsx`
|
|
|
|
### Router Utilities
|
|
|
|
```tsx
|
|
import { ErrorBoundary, RouteConfig, dynamicElement, redirectElement } from '@/utils/router';
|
|
|
|
// Lazy load a page component
|
|
element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
|
|
|
|
// Create a redirect
|
|
element: redirectElement('/settings/profile');
|
|
|
|
// Error boundary for route
|
|
errorElement: <ErrorBoundary resetPath="/chat" />;
|
|
```
|
|
|
|
### Adding New Routes
|
|
|
|
1. Add route config to `desktopRouter.config.tsx` or `mobileRouter.config.tsx`
|
|
2. Create page component in the corresponding directory under `(main)/`
|
|
3. Use `dynamicElement()` for lazy loading
|
|
|
|
### Navigation
|
|
|
|
**Important**: For SPA pages (React Router DOM routes), use `Link` from `react-router-dom`, NOT from `next/link`.
|
|
|
|
```tsx
|
|
// ❌ Wrong - next/link in SPA pages
|
|
import Link from 'next/link';
|
|
<Link href="/">Home</Link>
|
|
|
|
// ✅ Correct - react-router-dom Link in SPA pages
|
|
import { Link } from 'react-router-dom';
|
|
<Link to="/">Home</Link>
|
|
```
|
|
|
|
```tsx
|
|
// In components - use react-router-dom hooks
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
|
|
const navigate = useNavigate();
|
|
navigate('/chat');
|
|
|
|
// From stores - use global navigate
|
|
import { useGlobalStore } from '@/store/global';
|
|
|
|
const navigate = useGlobalStore.getState().navigate;
|
|
navigate?.('/settings');
|
|
```
|