mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
feat: add queue management and terminal dashboard documentation in Chinese
- 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.
This commit is contained in:
64
docs/.vitepress/demos/README.md
Normal file
64
docs/.vitepress/demos/README.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# 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 |
|
||||
Reference in New Issue
Block a user