astro-jiao77.cn/COMPONENTS_GUIDE.md

公用组件使用指南

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

📐 MathFormula - 数学公式组件

功能特点

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

使用方法

---
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 - 磨砂玻璃表格组件

功能特点

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

使用方法

---
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 - 代码高亮组件

功能特点

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

使用方法

---
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. 导入需要的组件：

---
import MathFormula from '../components/common/MathFormula.astro';
import GlassTable from '../components/common/GlassTable.astro';
import CodeBlock from '../components/common/CodeBlock.astro';
---

2. 在模板中使用组件：

<MathFormula formula="x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}" display={true} />

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

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

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