设计系统展示 Design System Demo

展示所有可用的颜色、组件和响应式布局原语

响应式布局 Responsive Layout

页面默认从单列窄屏布局开始，在现有 Tailwind 断点上逐步增强。请在 375px、768px 和 1280px 宽度检查本区块。

页面标题与操作区
PageHeader 与 ResponsiveActions 在窄屏堆叠，在空间足够时横向排列。

一个包含较长名称的项目管理页面

标题内容可以自然换行，操作区不会与标题挤压或重叠。

默认单列

内容区域使用 min-w-0，并为长文本提供明确的换行策略。

md 双列

内容区域使用 min-w-0，并为长文本提供明确的换行策略。

lg 三列

内容区域使用 min-w-0，并为长文本提供明确的换行策略。

颜色系统 Color Palette

主色调 Primary

Primary

主色调 - 用于主要操作

Primary Hover

主色调悬停态 - 70% 不透明度

次要色调 Secondary

Secondary

次要色调 - 用于辅助元素

Secondary Hover

次要色调悬停态

其他颜色 Other Colors

Muted

柔和色调

Accent

强调色

Destructive

破坏性操作色

Card

卡片背景色

图表颜色 Chart Colors

Chart 1

图表色 1

Chart 2

图表色 2

Chart 3

图表色 3

Chart 4

图表色 4

Chart 5

图表色 5

按钮 Buttons

按钮变体 Variants

按钮尺寸 Sizes

按钮状态 States

卡片 Cards

基础卡片 Basic Card
这是一个基础的卡片组件，包含标题和描述

卡片内容区域可以放置任何内容，如文本、图片、表单等。

强调卡片 Highlighted Card
使用主色调边框的卡片

通过添加 border-primary 类来突出显示重要的卡片。

带操作的卡片 Card with Actions
包含页脚操作按钮的卡片

卡片可以包含页脚区域，用于放置操作按钮。

表单元素 Form Elements

表单示例 Form Example
展示各种表单输入元素

这是一条错误提示信息

徽章 Badges

徽章变体 Badge Variants

Default Badge
Secondary Badge
Destructive Badge
Outline Badge

使用场景 Use Cases

成功 Success
警告 Warning
信息 Info
错误 Error
新功能 New

圆角 Border Radius

Small

rounded-sm

Medium

rounded-md

Large

rounded-lg

XLarge

rounded-xl

排版 Typography

Heading 1 - 标题一

text-4xl font-bold

Heading 2 - 标题二

text-3xl font-semibold

Heading 3 - 标题三

text-2xl font-semibold

Heading 4 - 标题四

text-xl font-medium

Body Text - 正文文本。这是默认的正文文本样式，用于大部分内容展示。

text-base

Muted Text - 次要文本。用于辅助说明、提示信息等不太重要的内容。

text-sm text-muted-foreground

Small Text - 小号文本。用于标签、时间戳等小型信息。

text-xs

间距 Spacing

内边距 Padding

p-2
p-4
p-6
p-8

间隙 Gap

gap-2
gap-4
gap-6

阴影 Shadows

Small

shadow-sm

Default

shadow

Medium

shadow-md

Large

shadow-lg

设计系统展示页面 - Design System Demo Page