公用组件示例

展示数学公式、磨砂玻璃表格和代码高亮组件

📐 数学公式组件

行内公式

这是一个行内公式：

E = mc^2

，展示了质能方程。

块级公式

int_{-infty}^{infty} e^{-x^2} dx = sqrt{pi}

复杂公式 (薛定谔方程)

\frac{\partial}{\partial t} \Psi(x,t) = -\frac{i}{\hbar} \hat{H} \Psi(x,t)

📊 磨砂玻璃表格组件

基础表格

AI算法性能对比
算法	准确率	速度	内存使用
YOLO v8	92.3%	45 FPS	256MB
ResNet-50	94.1%	30 FPS	512MB
EfficientNet	93.8%	60 FPS	128MB

技术规格表

GPU性能参数
型号	显存	核心数	价格
RTX 4090	24GB	16384	$1599
RTX 4080	16GB	9728	$1199
RTX 4070	12GB	5888	$799

💻 磨砂玻璃代码块组件

JavaScript 代码

React Hook 示例 javascript

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    fetchData();
  }, [url]);

  return { data, loading, error };
}

Python 代码

深度学习模型 python

import torch
import torch.nn as nn
import torch.nn.functional as F

class ConvNet(nn.Module):
    def __init__(self, num_classes=10):
        super(ConvNet, self).__init__()
        self.conv1 = nn.Conv2d(3, 32, 3, padding=1)
        self.conv2 = nn.Conv2d(32, 64, 3, padding=1)
        self.pool = nn.MaxPool2d(2, 2)
        self.fc1 = nn.Linear(64 * 8 * 8, 512)
        self.fc2 = nn.Linear(512, num_classes)
        self.dropout = nn.Dropout(0.5)
    
    def forward(self, x):
        x = self.pool(F.relu(self.conv1(x)))
        x = self.pool(F.relu(self.conv2(x)))
        x = x.view(-1, 64 * 8 * 8)
        x = F.relu(self.fc1(x))
        x = self.dropout(x)
        x = self.fc2(x)
        return x

CSS 样式

磨砂玻璃效果 css

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-effect:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

🖼️ 图片展示组件 (ImageViewer)

支持点击放大的响应式图片组件

基础图片展示

点击图片可以放大查看，支持键盘ESC关闭

固定宽高比

16:9 宽高比的图片展示

网格布局

风景照片

城市夜景

🎯 综合示例

算法分析报告

下面展示了一个完整的算法分析，包含数学公式、性能数据表格和实现代码：

算法复杂度

该算法的时间复杂度为：

T(n) = O(n log n)

性能测试结果

不同数据规模下的性能表现
数据规模 (n)	执行时间 (ms)	内存使用 (MB)	准确率
1,000	12	8	99.2%
10,000	156	64	99.1%
100,000	1,834	512	98.9%
1,000,000	23,456	4,096	98.7%

核心实现

快速排序算法 javascript

function quickSort(arr, low = 0, high = arr.length - 1) {
  if (low < high) {
    // 分区操作，返回枢轴位置
    const pivotIndex = partition(arr, low, high);
    
    // 递归排序枢轴左侧和右侧
    quickSort(arr, low, pivotIndex - 1);
    quickSort(arr, pivotIndex + 1, high);
  }
  return arr;
}

function partition(arr, low, high) {
  const pivot = arr[high]; // 选择最后一个元素作为枢轴
  let i = low - 1; // 较小元素的索引
  
  for (let j = low; j < high; j++) {
    if (arr[j] <= pivot) {
      i++;
      [arr[i], arr[j]] = [arr[j], arr[i]]; // 交换元素
    }
  }
  
  [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
  return i + 1;
}