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:
80
docs/zh-CN/components/ui/button.md
Normal file
80
docs/zh-CN/components/ui/button.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Button 按钮
|
||||
description: 按钮组件用于触发操作或提交表单
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Button 按钮
|
||||
|
||||
## 概述
|
||||
|
||||
按钮是最常用的交互元素之一,用于触发操作、提交表单或导航到其他页面。
|
||||
|
||||
## 语法演示
|
||||
|
||||
:::demo button-variants
|
||||
展示所有视觉变体的按钮组件
|
||||
:::
|
||||
|
||||
## 属性
|
||||
|
||||
<PropsTable :props="[
|
||||
{ name: 'variant', type: '\'default\' | \'destructive\' | \'outline\' | \'secondary\' | \'ghost\' | \'link\' | \'gradient\' | \'gradientPrimary\'', required: false, default: '\'default\'', description: '按钮的视觉变体' },
|
||||
{ name: 'size', type: '\'default\' | \'sm\' | \'lg\' | \'icon\'', required: false, default: '\'default\'', description: '按钮的大小' },
|
||||
{ name: 'asChild', type: 'boolean', required: false, default: 'false', description: '是否将 props 与子元素合并(用于 Radix UI 组合)' },
|
||||
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: '是否禁用按钮' },
|
||||
{ name: 'onClick', type: '() => void', required: false, default: '-', description: '点击事件回调函数' },
|
||||
{ name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' },
|
||||
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: '按钮内容' }
|
||||
]" />
|
||||
|
||||
## 变体说明
|
||||
|
||||
### Default(默认)
|
||||
|
||||
默认按钮用于主要的操作场景。
|
||||
|
||||
### Destructive(破坏性)
|
||||
|
||||
破坏性按钮用于删除、移除等不可逆的操作。
|
||||
|
||||
### Outline(轮廓)
|
||||
|
||||
轮廓按钮用于次要操作,视觉上更轻量。
|
||||
|
||||
### Secondary(次要)
|
||||
|
||||
次要按钮用于辅助操作。
|
||||
|
||||
### Ghost(幽灵)
|
||||
|
||||
幽灵按钮没有边框,视觉上最轻量。
|
||||
|
||||
### Link(链接)
|
||||
|
||||
链接按钮看起来像链接,但具有按钮的交互行为。
|
||||
|
||||
### Gradient(渐变)
|
||||
|
||||
渐变按钮使用品牌渐变色,悬停时带有发光效果。
|
||||
|
||||
### Gradient Primary(主色渐变)
|
||||
|
||||
主色渐变按钮使用主题主色渐变,悬停时带有增强的发光效果。
|
||||
|
||||
## 使用场景
|
||||
|
||||
| 场景 | 推荐变体 |
|
||||
|------|----------|
|
||||
| 主要操作(提交、保存) | default, gradientPrimary |
|
||||
| 危险操作(删除、移除) | destructive |
|
||||
| 次要操作 | outline, secondary |
|
||||
| 取消操作 | ghost, outline |
|
||||
| 导航链接 | link |
|
||||
| 促销/特色 CTA | gradient |
|
||||
|
||||
## 相关组件
|
||||
|
||||
- [Input 输入框](/zh-CN/components/ui/input)
|
||||
- [Select 选择器](/zh-CN/components/ui/select)
|
||||
- [Dialog 对话框](/zh-CN/components/ui/dialog)
|
||||
Reference in New Issue
Block a user