概述

本站基于 Astro + Tailwind CSS 构建了一套轻量级 UI 组件库，位于 src/components/ui/ 目录下。所有组件均支持明暗主题切换，并遵循统一的设计语言（颜色、圆角、阴影等均通过 CSS 变量管理）。

基础组件

Button 按钮

按钮支持多种 variant 与 size，适用于不同场景。

Button.astro
astro 
---
import Button from '../components/ui/Button.astro';
---

<Button variant="primary" size="md">主要操作</Button>
<Button variant="secondary" size="sm">次要操作</Button>
<Button variant="ghost">幽灵按钮</Button>
<Button variant="danger">危险操作</Button>
variant说明
primary主要操作，高亮色
secondary次要操作，灰色
ghost无背景，悬停有效果
danger危险/破坏性操作

Badge 徽章

用于标注状态、分类标签、计数等。

Badge.astro
astro 
---
import Badge from '../components/ui/Badge.astro';
---

<Badge variant="default">默认</Badge>
<Badge variant="info">信息</Badge>
<Badge variant="success">成功</Badge>
<Badge variant="warning">警告</Badge>
<Badge variant="danger">错误</Badge>

Alert 提示框

用于展示重要的提示信息，支持 4 种语义颜色。

Alert.astro
astro 
---
import Alert from '../components/ui/Alert.astro';
---

<Alert type="info" title="小提示">这里是提示内容。</Alert>
<Alert type="success" title="操作成功">数据已保存。</Alert>
<Alert type="warning" title="注意">请在操作前确认权限。</Alert>
<Alert type="error" title="出错了">请求失败，请稍后再试。</Alert>

表单组件

Input 输入框

Input.astro
astro 
---
import Input from '../components/ui/Input.astro';
---

<Input label="用户名" placeholder="请输入用户名" />
<Input label="邮箱" type="email" placeholder="user@example.com" />
<Input label="密码" type="password" />

Textarea 多行文本

Textarea.astro
astro 
<Textarea label="备注" placeholder="请输入备注内容..." rows={4} />

Select 下拉选择

Select.astro
astro 
<Select label="语言">
<option value="zh">中文</option>
<option value="en">English</option>
</Select>

Checkbox / Radio / Toggle

FormControls.astro
astro 
<Checkbox label="同意用户协议" />
<Radio name="size" label="中等" value="md" />
<Toggle label="启用通知" />

布局 & 反馈组件

Card 卡片

Card.astro
astro 
---
import Card from '../components/ui/Card.astro';
---

<Card title="卡片标题" description="这是卡片描述内容。">
<!-- 卡片内容插槽 -->
</Card>
Modal.astro
astro 
---
import Modal from '../components/ui/Modal.astro';
---

<Modal id="demo-modal" title="确认操作">
<p>确定要继续吗？</p>
</Modal>

<!-- 通过 JS 触发 -->
<script>
document.getElementById('open-btn')?.addEventListener('click', () => {
  document.getElementById('demo-modal')?.showModal();
});
</script>

Drawer 抽屉

从侧边滑入的面板，适合移动端导航或次级操作。

Drawer.astro
astro 
<Drawer id="side-drawer" title="筛选">
<!-- 抽屉内容 -->
</Drawer>

Toast 轻提示

Toast.astro
astro 
<Toast id="toast-success" type="success">操作成功！</Toast>

数据展示

Table 表格

Table.astro
astro 
---
import Table from '../components/ui/Table.astro';
---

<Table
headers={['姓名', '年龄', '城市']}
rows={[
  ['Alice', '28', '上海'],
  ['Bob', '32', '北京'],
]}
/>

Progress 进度条

Progress.astro
astro 
<Progress value={70} max={100} label="完成度" />

Skeleton 骨架屏

在内容加载时展示占位动画：

Skeleton.astro
astro 
<Skeleton class="h-6 w-48 mb-2" />
<Skeleton class="h-4 w-full mb-1" />
<Skeleton class="h-4 w-3/4" />

导航 & 交互

Tabs 标签页

Tabs.astro
astro 
---
import Tabs from '../components/ui/Tabs.astro';
---

<Tabs
tabs={[
  { id: 'tab1', label: '概述', content: '这是概述内容。' },
  { id: 'tab2', label: '详情', content: '这是详情内容。' },
]}
/>

Accordion 手风琴

Accordion.astro
astro 
---
import Accordion from '../components/ui/Accordion.astro';
---

<Accordion items={[
{ title: '问题一', content: '这是答案一。' },
{ title: '问题二', content: '这是答案二。' },
]} />

Tooltip 工具提示

Tooltip.astro
astro 
<Tooltip content="这是一段提示文字">
<Button variant="ghost">悬停查看</Button>
</Tooltip>
Dropdown.astro
astro 
<Dropdown trigger="更多操作" items={[
{ label: '编辑', href: '/edit' },
{ label: '删除', onClick: 'handleDelete()' },
]} />

Pagination 分页

Pagination.astro
astro 
<Pagination total={100} pageSize={10} currentPage={1} />

媒体组件

AudioPlayer 音频播放器

AudioPlayer.astro
astro 
<AudioPlayer src="/audio/sample.mp3" title="示例音频" />

VideoPlayer 视频播放器

VideoPlayer.astro
astro 
<VideoPlayer src="/video/sample.mp4" poster="/img/poster.jpg" />
Lightbox.astro
astro 
<Lightbox src="/img/photo.jpg" alt="示例图片" />

Avatar 头像

Avatar.astro
astro 
<Avatar src="/img/avatar.jpg" alt="用户头像" size="lg" />

主题设计原则

所有组件使用 CSS 变量来统一样式：

变量名用途
--c-surface-page页面背景
--c-surface-section卡片/侧边栏背景
--c-content-1主文本
--c-content-2次级文本
--c-content-3辅助/占位文本
--c-stroke边框颜色
--c-brand-500品牌主色

这些变量在 src/styles/global.css 中分别为亮色/暗色模式定义，切换主题时自动生效，无需额外处理。