# 公用组件使用指南

本项目新增了三个高质量的公用组件，支持数学公式渲染、磨砂玻璃表格和代码高亮，所有组件都采用了现代化的磨砂玻璃设计风格。

## 📐 MathFormula - 数学公式组件

### 功能特点
- 支持 KaTeX 渲染，兼容 LaTeX 语法
- 行内和块级显示模式
- 磨砂玻璃背景效果
- 悬停动画效果
- 自动错误处理

### 使用方法

```astro
---
import MathFormula from '../components/common/MathFormula.astro';
---

<!-- 行内公式 -->
<MathFormula formula="E = mc^2" display={false} />

<!-- 块级公式 -->
<MathFormula 
  formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" 
  display={true}
/>

<!-- 复杂公式 -->
<MathFormula 
  formula="\frac{\partial}{\partial t} \Psi(x,t) = -\frac{i}{\hbar} \hat{H} \Psi(x,t)" 
  display={true}
/>
```

### Props 参数

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `formula` | string | - | LaTeX 格式的数学公式 |
| `display` | boolean | false | 是否为块级显示 |
| `className` | string | '' | 自定义 CSS 类名 |

## 📊 GlassTable - 磨砂玻璃表格组件

### 功能特点
- 透明磨砂玻璃背景效果
- 支持条纹和边框样式
- 响应式设计
- 悬停行高亮效果
- 可自定义表格标题

### 使用方法

```astro
---
import GlassTable from '../components/common/GlassTable.astro';
---

<GlassTable 
  caption="AI算法性能对比"
  headers={["算法", "准确率", "速度", "内存使用"]}
  rows={[
    ["YOLO v8", "92.3%", "45 FPS", "256MB"],
    ["ResNet-50", "94.1%", "30 FPS", "512MB"],
    ["EfficientNet", "93.8%", "60 FPS", "128MB"]
  ]}
  striped={true}
  bordered={true}
/>
```

### Props 参数

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `headers` | string[] | [] | 表头数组 |
| `rows` | (string\|number\|boolean)[][] | [] | 表格数据行 |
| `caption` | string | - | 表格标题 |
| `className` | string | '' | 自定义 CSS 类名 |
| `striped` | boolean | false | 是否显示条纹 |
| `bordered` | boolean | true | 是否显示边框 |

### 特殊样式类

在表格单元格中可以使用以下特殊样式类：

- `.highlight-cell` - 高亮单元格（绿色）
- `.warning-cell` - 警告单元格（黄色）
- `.error-cell` - 错误单元格（红色）

## 💻 CodeBlock - 代码高亮组件

### 功能特点
- 支持多种编程语言语法高亮
- 磨砂玻璃背景效果
- 可选行号显示
- 一键复制代码功能
- 代码标题和语言标签
- 自动语法检测

### 使用方法

```astro
---
import CodeBlock from '../components/common/CodeBlock.astro';
---

<CodeBlock 
  title="React Hook 示例"
  language="javascript"
  showLineNumbers={true}
  copyable={true}
  code={`function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading };
}`}
/>
```

### Props 参数

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `code` | string | - | 源代码内容 |
| `language` | string | 'javascript' | 编程语言 |
| `title` | string | - | 代码块标题 |
| `showLineNumbers` | boolean | false | 是否显示行号 |
| `className` | string | '' | 自定义 CSS 类名 |
| `copyable` | boolean | true | 是否显示复制按钮 |

### 支持的语言

支持所有 Prism.js 的语言，常用的包括：
- `javascript`, `typescript`, `jsx`, `tsx`
- `python`, `java`, `csharp`, `cpp`
- `html`, `css`, `scss`, `json`
- `bash`, `sql`, `yaml`, `markdown`

## 🎨 设计特点

所有组件都采用了统一的设计语言：

### 磨砂玻璃效果
- 半透明背景：`rgba(255, 255, 255, 0.1)`
- 背景模糊：`backdrop-filter: blur(15px)`
- 边框：`1px solid rgba(255, 255, 255, 0.2)`
- 圆角：`border-radius: 1rem`

### 交互动画
- 悬停时背景变亮
- 轻微上移效果：`translateY(-2px)`
- 阴影加深增强立体感
- 平滑过渡：`transition: all 0.3s ease`

### 响应式设计
- 移动端适配
- 触摸友好的交互区域
- 自适应字体和间距

## 📝 示例页面

访问 `/components-demo` 查看所有组件的完整使用示例，包括：
- 各种数学公式的渲染效果
- 不同样式的表格展示
- 多种编程语言的代码高亮
- 组件之间的组合使用

## 🚀 快速开始

1. 导入需要的组件：
```astro
---
import MathFormula from '../components/common/MathFormula.astro';
import GlassTable from '../components/common/GlassTable.astro';
import CodeBlock from '../components/common/CodeBlock.astro';
---
```

2. 在模板中使用组件：
```astro
<MathFormula formula="x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}" display={true} />

<GlassTable 
  headers={["姓名", "年龄", "职业"]}
  rows={[["张三", "25", "工程师"]]}
/>

<CodeBlock 
  language="python"
  code="print('Hello, World!')"
/>
```

这些组件完美融入了网站的整体设计风格，提供了专业级的内容展示能力！