initial commit

2025-09-29 05:57:18 +08:00
commit 9c0051c92b
73 changed files with 18737 additions and 0 deletions
--- a/src/pages/components-demo.astro
+++ b/src/pages/components-demo.astro
@@ -0,0 +1,359 @@
+---
+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';
+---
+
+<BaseLayout 
+  title="组件示例 - Jiao77" 
+  description="展示数学公式、表格和代码高亮组件的使用示例"
+  type="navigation"
+>
+  <Header />
+  
+  <main class="demo-main">
+    <div class="container mx-auto px-4 py-12">
+      
+      <!-- 页面标题 -->
+      <section class="hero-section">
+        <h1 class="demo-title">公用组件示例</h1>
+        <p class="demo-subtitle">展示数学公式、磨砂玻璃表格和代码高亮组件</p>
+      </section>
+
+      <!-- 数学公式示例 -->
+      <section class="demo-section">
+        <h2 class="section-title">📐 数学公式组件</h2>
+        
+        <div class="examples-grid">
+          <div class="example-card">
+            <h3>行内公式</h3>
+            <p>这是一个行内公式：<MathFormula formula="E = mc^2" display={false} />，展示了质能方程。</p>
+          </div>
+          
+          <div class="example-card">
+            <h3>块级公式</h3>
+            <MathFormula 
+              formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" 
+              display={true}
+            />
+          </div>
+          
+          <div class="example-card">
+            <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">
+        <h2 class="section-title">📊 磨砂玻璃表格组件</h2>
+        
+        <div class="examples-grid">
+          <div class="example-card">
+            <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">
+            <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">
+        <h2 class="section-title">💻 磨砂玻璃代码块组件</h2>
+        
+        <div class="examples-grid">
+          <div class="example-card">
+            <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">
+            <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">
+            <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">
+        <h2 class="section-title">🎯 综合示例</h2>
+        
+        <div class="example-card">
+          <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>