组件文档

组件文档

本文档介绍 Tiebo 项目中可用的核心组件。

Card 组件

卡片组件用于展示相关信息的集合。

属性

属性	类型	默认值	描述
title	string	-	卡片标题
content	string	-	卡片内容
variant	’default’ | ‘elevated’ | ‘outlined'	'default’	卡片样式变体

示例

---
import { Card } from '../components/Card.astro';
---

<Card title="欢迎使用" content="这是一个卡片组件示例" />

Button 组件

按钮组件用于触发操作。

属性

属性	类型	默认值	描述
variant	’primary’ | ‘secondary’ | ‘outline'	'primary’	按钮样式
size	’sm’ | ‘md’ | ‘lg'	'md’	按钮尺寸
disabled	boolean	false	是否禁用

示例

---
import { Button } from '../components/Button.astro';
---

<Button variant="primary" size="md">点击我</Button>

主题组件

色彩系统

Tiebo 使用温暖学术风格的色彩系统：

:root {
  --color-primary: #8B4513;
  --color-secondary: #D2691E;
  --color-accent: #CD853F;
}

字体系统

• 正文字体: Source Serif Pro
• 标题字体: Playfair Display
• 代码字体: JetBrains Mono

布局组件

响应式网格

支持多种屏幕尺寸的响应式布局：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <!-- 网格内容 -->
</div>

侧边栏

可折叠的侧边栏导航，支持多级嵌套。