405 lines
12 KiB
Plaintext
405 lines
12 KiB
Plaintext
---
|
||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||
import Header from '../components/Header.astro';
|
||
import Footer from '../components/Footer.astro';
|
||
import MathFormula from '../components/common/MathFormula.astro';
|
||
import GlassTable from '../components/common/GlassTable.astro';
|
||
import CodeBlock from '../components/common/CodeBlock.astro';
|
||
import ImageViewer from '../components/common/ImageViewer.astro';
|
||
---
|
||
|
||
<BaseLayout
|
||
title="组件示例 - Jiao77"
|
||
description="展示数学公式、表格和代码高亮组件的使用示例"
|
||
type="navigation"
|
||
>
|
||
<Header />
|
||
|
||
<main class="demo-main">
|
||
<div class="container mx-auto px-4 py-12">
|
||
|
||
<!-- 页面标题 -->
|
||
<section class="hero-section" data-reveal data-reveal-distance="48px">
|
||
<h1 class="demo-title">公用组件示例</h1>
|
||
<p class="demo-subtitle">展示数学公式、磨砂玻璃表格和代码高亮组件</p>
|
||
</section>
|
||
|
||
<!-- 数学公式示例 -->
|
||
<section class="demo-section" data-reveal>
|
||
<h2 class="section-title">📐 数学公式组件</h2>
|
||
|
||
<div class="examples-grid">
|
||
<div class="example-card" data-reveal data-reveal-delay="0s">
|
||
<h3>行内公式</h3>
|
||
<p>这是一个行内公式：<MathFormula formula="E = mc^2" display={false} />，展示了质能方程。</p>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.08s">
|
||
<h3>块级公式</h3>
|
||
<MathFormula
|
||
formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
|
||
display={true}
|
||
/>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.16s">
|
||
<h3>复杂公式 (薛定谔方程)</h3>
|
||
<MathFormula
|
||
formula="\\frac{\\partial}{\\partial t} \\Psi(x,t) = -\\frac{i}{\\hbar} \\hat{H} \\Psi(x,t)"
|
||
display={true}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 表格示例 -->
|
||
<section class="demo-section" data-reveal>
|
||
<h2 class="section-title">📊 磨砂玻璃表格组件</h2>
|
||
|
||
<div class="examples-grid">
|
||
<div class="example-card" data-reveal data-reveal-delay="0s">
|
||
<h3>基础表格</h3>
|
||
<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}
|
||
/>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.08s">
|
||
<h3>技术规格表</h3>
|
||
<GlassTable
|
||
caption="GPU性能参数"
|
||
headers={["型号", "显存", "核心数", "价格"]}
|
||
rows={[
|
||
["RTX 4090", "24GB", "16384", "$1599"],
|
||
["RTX 4080", "16GB", "9728", "$1199"],
|
||
["RTX 4070", "12GB", "5888", "$799"]
|
||
]}
|
||
bordered={true}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 代码块示例 -->
|
||
<section class="demo-section" data-reveal>
|
||
<h2 class="section-title">💻 磨砂玻璃代码块组件</h2>
|
||
|
||
<div class="examples-grid">
|
||
<div class="example-card" data-reveal data-reveal-delay="0s">
|
||
<h3>JavaScript 代码</h3>
|
||
<CodeBlock
|
||
title="React Hook 示例"
|
||
language="javascript"
|
||
showLineNumbers={true}
|
||
code={`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 };
|
||
}`}
|
||
/>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.08s">
|
||
<h3>Python 代码</h3>
|
||
<CodeBlock
|
||
title="深度学习模型"
|
||
language="python"
|
||
showLineNumbers={true}
|
||
code={`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`}
|
||
/>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.16s">
|
||
<h3>CSS 样式</h3>
|
||
<CodeBlock
|
||
title="磨砂玻璃效果"
|
||
language="css"
|
||
code={`.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);
|
||
}`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 图片展示组件演示 -->
|
||
<section class="demo-section" data-reveal>
|
||
<h2 class="section-title">🖼️ 图片展示组件 (ImageViewer)</h2>
|
||
<p class="section-desc">支持点击放大的响应式图片组件</p>
|
||
|
||
<div class="examples-grid">
|
||
<div class="example-card" data-reveal data-reveal-delay="0s">
|
||
<h3>基础图片展示</h3>
|
||
<ImageViewer
|
||
src="https://picsum.photos/600/400?random=1"
|
||
alt="示例图片"
|
||
caption="点击图片可以放大查看，支持键盘ESC关闭"
|
||
/>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.08s">
|
||
<h3>固定宽高比</h3>
|
||
<ImageViewer
|
||
src="https://picsum.photos/800/450?random=2"
|
||
alt="16:9宽高比图片"
|
||
caption="16:9 宽高比的图片展示"
|
||
aspectRatio="16/9"
|
||
/>
|
||
</div>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0.16s">
|
||
<h3>网格布局</h3>
|
||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
|
||
<ImageViewer
|
||
src="https://picsum.photos/400/300?random=3"
|
||
alt="图片3"
|
||
caption="风景照片"
|
||
aspectRatio="4/3"
|
||
/>
|
||
<ImageViewer
|
||
src="https://picsum.photos/400/300?random=4"
|
||
alt="图片4"
|
||
caption="城市夜景"
|
||
aspectRatio="4/3"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 混合使用示例 -->
|
||
<section class="demo-section" data-reveal>
|
||
<h2 class="section-title">🎯 综合示例</h2>
|
||
|
||
<div class="example-card" data-reveal data-reveal-delay="0s">
|
||
<h3>算法分析报告</h3>
|
||
<p>下面展示了一个完整的算法分析，包含数学公式、性能数据表格和实现代码：</p>
|
||
|
||
<h4>算法复杂度</h4>
|
||
<p>该算法的时间复杂度为：</p>
|
||
<MathFormula
|
||
formula="T(n) = O(n \log n)"
|
||
display={true}
|
||
/>
|
||
|
||
<h4>性能测试结果</h4>
|
||
<GlassTable
|
||
caption="不同数据规模下的性能表现"
|
||
headers={["数据规模 (n)", "执行时间 (ms)", "内存使用 (MB)", "准确率"]}
|
||
rows={[
|
||
["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%"]
|
||
]}
|
||
striped={true}
|
||
/>
|
||
|
||
<h4>核心实现</h4>
|
||
<CodeBlock
|
||
title="快速排序算法"
|
||
language="javascript"
|
||
showLineNumbers={true}
|
||
code={`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;
|
||
}`}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</BaseLayout>
|
||
|
||
<style>
|
||
.demo-main {
|
||
min-height: 100vh;
|
||
background: transparent;
|
||
color: #374151;
|
||
}
|
||
|
||
.hero-section {
|
||
text-align: center;
|
||
padding: 3rem 0;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.demo-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.demo-subtitle {
|
||
font-size: 1.25rem;
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.demo-section {
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: #1e40af;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.examples-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.examples-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||
}
|
||
}
|
||
|
||
.example-card {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.example-card:hover {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.example-card h3 {
|
||
color: #3b82f6;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.example-card h4 {
|
||
color: #1e40af;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin: 2rem 0 1rem 0;
|
||
}
|
||
|
||
.example-card p {
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.mx-auto {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.px-4 {
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.py-12 {
|
||
padding-top: 3rem;
|
||
padding-bottom: 3rem;
|
||
}
|
||
</style> |