mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
2fb93d20e0
- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure. - Added terminal dashboard documentation, highlighting its layout, core features, and usage examples. - Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
65 lines
1.6 KiB
Markdown
65 lines
1.6 KiB
Markdown
# Demo Components
|
|
|
|
This directory contains React components that are embedded in the documentation as interactive demos.
|
|
|
|
## Creating a New Demo
|
|
|
|
1. Create a new `.tsx` file in this directory (e.g., `my-demo.tsx`)
|
|
2. Export a default React component
|
|
3. Use it in markdown with `:::demo my-demo :::`
|
|
|
|
## Demo Template
|
|
|
|
```tsx
|
|
import React from 'react'
|
|
|
|
/**
|
|
* Brief description of what this demo shows
|
|
*/
|
|
export default function MyDemo() {
|
|
return (
|
|
<div style={{ padding: '16px' }}>
|
|
{/* Your demo content */}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Demo Guidelines
|
|
|
|
- **Keep it simple**: Demos should be focused and easy to understand
|
|
- **Use inline styles**: Avoid external dependencies for portability
|
|
- **Add comments**: Explain what the demo is showing
|
|
- **Test interactions**: Ensure buttons, inputs, etc. work correctly
|
|
- **Handle state**: Use React hooks (`useState`, `useEffect`) for interactive demos
|
|
|
|
## Demo File Naming
|
|
|
|
- Use kebab-case: `button-variants.tsx`, `card-basic.tsx`
|
|
- Group by category:
|
|
- `ui/` - UI component demos
|
|
- `shared/` - Shared component demos
|
|
- `pages/` - Page-level demos
|
|
|
|
## Using Props
|
|
|
|
If you need to pass custom props to a demo, use the extended markdown syntax:
|
|
|
|
```markdown
|
|
:::demo my-demo
|
|
title: Custom Title
|
|
height: 300px
|
|
expandable: false
|
|
:::
|
|
```
|
|
|
|
## Available Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| name | string | - | Demo component name (required) |
|
|
| title | string | name | Custom demo title |
|
|
| height | string | 'auto' | Container height |
|
|
| expandable | boolean | true | Allow expand/collapse |
|
|
| showCode | boolean | true | Show code tab |
|