Jiao77/astro-jiao77.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete many assets

Browse Source
This commit is contained in:
Jiao77
2025-09-30 02:09:26 +08:00
parent 9c0051c92b
commit b6782746c4
23 changed files with 2915 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/components-demo.astro
View File

@@ -5,6 +5,7 @@ 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
@@ -18,22 +19,22 @@ import CodeBlock from '../components/common/CodeBlock.astro';
<div class="container mx-auto px-4 py-12">
<!-- 页面标题 -->
<section class="hero-section">
<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">
<section class="demo-section" data-reveal>
<h2 class="section-title">📐 数学公式组件</h2>
<div class="examples-grid">
<div class="example-card">
<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">
<div class="example-card" data-reveal data-reveal-delay="0.08s">
<h3>块级公式</h3>
<MathFormula
formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
@@ -41,10 +42,10 @@ import CodeBlock from '../components/common/CodeBlock.astro';
/>
</div>
<div class="example-card">
<h3>复杂公式</h3>
<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)"
formula="\\frac{\\partial}{\\partial t} \\Psi(x,t) = -\\frac{i}{\\hbar} \\hat{H} \\Psi(x,t)"
display={true}
/>
</div>
@@ -52,11 +53,11 @@ import CodeBlock from '../components/common/CodeBlock.astro';
</section>
<!-- 表格示例 -->
<section class="demo-section">
<section class="demo-section" data-reveal>
<h2 class="section-title">📊 磨砂玻璃表格组件</h2>
<div class="examples-grid">
<div class="example-card">
<div class="example-card" data-reveal data-reveal-delay="0s">
<h3>基础表格</h3>
<GlassTable
caption="AI算法性能对比"
@@ -70,7 +71,7 @@ import CodeBlock from '../components/common/CodeBlock.astro';
/>
</div>
<div class="example-card">
<div class="example-card" data-reveal data-reveal-delay="0.08s">
<h3>技术规格表</h3>
<GlassTable
caption="GPU性能参数"
@@ -87,11 +88,11 @@ import CodeBlock from '../components/common/CodeBlock.astro';
</section>
<!-- 代码块示例 -->
<section class="demo-section">
<section class="demo-section" data-reveal>
<h2 class="section-title">💻 磨砂玻璃代码块组件</h2>
<div class="examples-grid">
<div class="example-card">
<div class="example-card" data-reveal data-reveal-delay="0s">
<h3>JavaScript 代码</h3>
<CodeBlock
title="React Hook 示例"
@@ -126,7 +127,7 @@ function useFetch(url) {
/>
</div>
<div class="example-card">
<div class="example-card" data-reveal data-reveal-delay="0.08s">
<h3>Python 代码</h3>
<CodeBlock
title="深度学习模型"
@@ -157,7 +158,7 @@ class ConvNet(nn.Module):
/>
</div>
<div class="example-card">
<div class="example-card" data-reveal data-reveal-delay="0.16s">
<h3>CSS 样式</h3>
<CodeBlock
title="磨砂玻璃效果"
@@ -181,11 +182,56 @@ class ConvNet(nn.Module):
</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">
<section class="demo-section" data-reveal>
<h2 class="section-title">🎯 综合示例</h2>
<div class="example-card">
<div class="example-card" data-reveal data-reveal-delay="0s">
<h3>算法分析报告</h3>
<p>下面展示了一个完整的算法分析，包含数学公式、性能数据表格和实现代码：</p>