complete many assets
This commit is contained in:
Jiao77
205
docs/COMPONENTS_GUIDE.md
Normal file
205
docs/COMPONENTS_GUIDE.md
Normal file
@@ -0,0 +1,205 @@
|
||||
# 公用组件使用指南
|
||||
|
||||
本项目新增了三个高质量的公用组件，支持数学公式渲染、磨砂玻璃表格和代码高亮，所有组件都采用了现代化的磨砂玻璃设计风格。
|
||||
|
||||
## 📐 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!')"
|
||||
/>
|
||||
```
|
||||
|
||||
这些组件完美融入了网站的整体设计风格，提供了专业级的内容展示能力！
|
||||
Reference in New Issue
Block a user