205 lines
5.0 KiB
Markdown
205 lines
5.0 KiB
Markdown
# 公用组件使用指南
|
|
|
|
本项目新增了三个高质量的公用组件，支持数学公式渲染、磨砂玻璃表格和代码高亮，所有组件都采用了现代化的磨砂玻璃设计风格。
|
|
|
|
## 📐 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!')"
|
|
/>
|
|
```
|
|
|
|
这些组件完美融入了网站的整体设计风格，提供了专业级的内容展示能力！ |