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

9
deploy-full.sh
View File

@@ -55,6 +55,15 @@ build_project() {
echo "❌ 错误: 构建失败，dist 目录不存在" echo "❌ 错误: 构建失败，dist 目录不存在"
exit 1 exit 1
fi fi
# 确保全局样式被包含到部署包中
if [ -f "src/styles/global.css" ]; then
mkdir -p dist/src/styles
cp src/styles/global.css dist/src/styles/global.css
echo "🎨 已复制 global.css 到 dist/src/styles/"
else
echo "⚠️ 未找到 src/styles/global.css，跳过复制"
fi
echo "✅ 构建完成" echo "✅ 构建完成"
} }

0
COMPONENTS_GUIDE.md → docs/COMPONENTS_GUIDE.md
View File

0
TYPESCRIPT_WARNINGS_FIXES.md → docs/TYPESCRIPT_WARNINGS_FIXES.md
View File

36
package-lock.json generated
View File

@@ -212,6 +212,7 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.27.1", "@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3", "@babel/generator": "^7.28.3",
@@ -5425,23 +5426,6 @@
"node": ">=18.12" "node": ">=18.12"
} }
}, },
"node_modules/prettier": {
"version": "2.8.7",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
"integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
"dev": true,
"license": "MIT",
"optional": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prismjs": { "node_modules/prismjs": {
"version": "1.30.0", "version": "1.30.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
@@ -5842,6 +5826,7 @@
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz",
"integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==", "integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/estree": "1.0.8" "@types/estree": "1.0.8"
}, },
@@ -7180,6 +7165,23 @@
"prettier": "2.8.7" "prettier": "2.8.7"
} }
}, },
"node_modules/yaml-language-server/node_modules/prettier": {
"version": "2.8.7",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
"integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
"dev": true,
"license": "MIT",
"optional": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/yaml-language-server/node_modules/request-light": { "node_modules/yaml-language-server/node_modules/request-light": {
"version": "0.5.8", "version": "0.5.8",
"resolved": "https://registry.npmjs.org/request-light/-/request-light-0.5.8.tgz", "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.5.8.tgz",

30
src/components/Container.astro
View File

@@ -8,6 +8,13 @@ export interface Props {
animated?: boolean; animated?: boolean;
hover?: boolean; hover?: boolean;
className?: string; className?: string;
reveal?: boolean;
revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
revealDistance?: string;
revealDelay?: string;
revealBlur?: string;
revealScale?: string;
revealOnce?: boolean;
} }
const { const {
@@ -18,7 +25,14 @@ const {
shadow = 'md', shadow = 'md',
animated = true, animated = true,
hover = false, hover = false,
className = '' className = '',
reveal = true,
revealDirection,
revealDistance,
revealDelay,
revealBlur,
revealScale,
revealOnce
} = Astro.props; } = Astro.props;
const variantClasses = { const variantClasses = {
@@ -63,6 +77,17 @@ const shadowClasses = {
xl: 'shadow-xl', xl: 'shadow-xl',
'2xl': 'shadow-2xl' '2xl': 'shadow-2xl'
}; };
const revealAttributes = reveal
? {
'data-reveal': revealDirection ?? '',
...(revealDistance ? { 'data-reveal-distance': revealDistance } : {}),
...(revealDelay ? { 'data-reveal-delay': revealDelay } : { 'data-reveal-delay': 'var(--container-delay, 0s)' }),
...(revealBlur ? { 'data-reveal-blur': revealBlur } : {}),
...(revealScale ? { 'data-reveal-scale': revealScale } : {}),
...(revealOnce === false ? { 'data-reveal-once': 'false' } : {})
}
: {};
--- ---
<div <div
@@ -73,10 +98,11 @@ const shadowClasses = {
${roundedClasses[rounded]} ${roundedClasses[rounded]}
${paddingClasses[padding]} ${paddingClasses[padding]}
${shadowClasses[shadow]} ${shadowClasses[shadow]}
${animated ? 'container-animated' : ''} ${animated && !reveal ? 'container-animated' : ''}
${hover ? 'container-hover' : ''} ${hover ? 'container-hover' : ''}
${className} ${className}
`} `}
{...revealAttributes}
> >
<slot /> <slot />
</div> </div>

317
src/components/Header.astro
View File

@@ -6,106 +6,152 @@ export interface Props {
className?: string; className?: string;
} }
import GlowButton from './common/GlowButton.astro';
const { const {
title = 'Jiao77 - AI & Technology Explorer' title = 'Jiao77 - AI & Technology Explorer',
description,
navigationItems,
className = ''
} = Astro.props; } = Astro.props;
const defaultNavigation = [
{ label: '首页', href: '/', icon: 'fas fa-home' },
{ label: '报告导航', href: '/report', icon: 'fas fa-chart-line' },
{ label: '关于我', href: '/about', icon: 'fas fa-user-astronaut' },
{ label: '组件测试', href: '/components-demo', icon: 'fas fa-user-astronaut' },
];
const links = navigationItems && navigationItems.length > 0 ? navigationItems : defaultNavigation;
--- ---
<header class="header-container"> <header id="site-header" class={`site-header ${className}`}>
<!-- 收缩状态的页眉 --> <div class="header-inner">
<div class="header-collapsed" id="header-collapsed"> <div class="header-brand">
<div class="header-content"> <a href="/" class="brand-link" aria-label="返回首页">
<div class="header-brand">
<h1 class="brand-title">{title}</h1> <h1 class="brand-title">{title}</h1>
</div> </a>
{description && (
<button class="expand-button" id="expand-button"> <p class="brand-description">{description}</p>
<i class="fas fa-bars"></i> )}
</button>
</div>
</div>
<!-- 展开状态的页眉 -->
<div class="header-expanded" id="header-expanded">
<div class="header-content">
<div class="header-brand">
<h1 class="brand-title">{title}</h1>
</div>
<nav class="main-nav" aria-label="主导航">
<a href="/" class="nav-item" aria-label="首页">
<i class="fas fa-home"></i>
<span>首页</span>
</a>
<a href="/reports" class="nav-item" aria-label="报告">
<i class="fas fa-chart-line"></i>
<span>报告</span>
</a>
<a href="/components-demo" class="nav-item" aria-label="组件示例">
<i class="fas fa-cube"></i>
<span>组件</span>
</a>
</nav>
<button class="collapse-button" id="collapse-button">
<i class="fas fa-times"></i>
</button>
</div> </div>
<nav class="main-nav" aria-label="主导航">
{links.map((item) => (
<GlowButton
href={item.href}
icon={item.icon}
ariaLabel={item.label}
className="nav-button"
size="sm"
variant="translucent"
>
{item.label}
</GlowButton>
))}
</nav>
</div> </div>
</header> </header>
<style> <style>
.header-container { .site-header {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1200;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(248, 250, 255, 0.18);
} backdrop-filter: blur(30px) saturate(150%);
border-bottom: 1px solid rgba(148, 163, 184, 0.28);
.header-collapsed { box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 1rem 0;
transform: translateY(0); transform: translateY(0);
transition: all 0.3s ease; opacity: 1;
pointer-events: auto;
transition: transform 0.45s cubic-bezier(0.4, 0.14, 0.2, 1), opacity 0.45s ease;
overflow: clip;
} }
.header-expanded { .site-header::before,
background: rgba(255, 255, 255, 0.15); .site-header::after {
backdrop-filter: blur(15px); content: '';
border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: absolute;
padding: 1.5rem 0; inset: 0;
transform: translateY(-100%); pointer-events: none;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
} }
.header-expanded.active { .site-header::before {
background:
radial-gradient(
circle at var(--pointer-x, 50%) var(--pointer-y, -40%),
rgba(96, 165, 250, 0.65),
rgba(59, 130, 246, 0.05) 42%,
transparent 65%
),
radial-gradient(
320px circle at calc(var(--pointer-x, 50%) + 10%) calc(var(--pointer-y, -40%) + 8%),
rgba(236, 72, 153, 0.35),
transparent 60%
);
filter: saturate(120%) blur(0.65rem);
mix-blend-mode: screen;
opacity: calc(var(--pointer-intensity, 0) * 0.75);
transition: opacity 0.6s ease;
}
.site-header::after {
background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 60%)
, radial-gradient(80% 160% at 120% -40%, rgba(59, 130, 246, 0.18), transparent 70%);
opacity: 0.4;
}
.site-header.hidden {
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
}
.site-header.visible {
transform: translateY(0); transform: translateY(0);
opacity: 1;
pointer-events: auto;
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
} }
.header-collapsed.hidden { .site-header.pinned {
transform: translateY(-100%); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
} }
.header-content { .site-header.showing {
animation: header-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.hiding {
animation: header-slide-out 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.header-inner {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 2rem;
min-height: 72px;
} }
.header-brand { .header-brand {
flex: 1; display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
} }
.brand-link {
text-decoration: none;
}
.brand-title { .brand-title {
font-size: 1.5rem; font-size: clamp(1.35rem, 2.4vw, 1.85rem);
font-weight: 700; font-weight: 700;
color: #011a2d; color: #011a2d;
margin: 0; margin: 0;
@@ -113,81 +159,98 @@ const {
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-description {
margin: 0;
font-size: 0.9rem;
color: #334155;
max-width: 32rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.navigation { .main-nav {
display: flex; display: flex;
gap: 2rem; gap: 0.75rem;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.nav-item { .nav-button {
display: flex; min-width: 0;
align-items: center; font-weight: 600;
gap: 0.5rem; letter-spacing: 0.01em;
padding: 0.75rem 1.5rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.1);
color: #011a2d;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
} }
.nav-item:hover { .nav-button :global(.glow-button__content) {
background: rgba(255, 255, 255, 0.2); gap: 0.4rem;
transform: translateY(-2px); color: #0f172a;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
} }
.expand-button, .nav-button :global(.glow-button__icon) {
.collapse-button { font-size: 0.9rem;
background: rgba(255, 255, 255, 0.2); color: inherit;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 0.75rem;
padding: 0.75rem;
color: #011a2d;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1rem;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
} }
.expand-button:hover, @keyframes header-slide-in {
.collapse-button:hover { 0% {
background: rgba(255, 255, 255, 0.3); transform: translateY(-110%);
transform: scale(1.05); opacity: 0;
filter: blur(6px);
}
60% {
filter: blur(0);
}
100% {
transform: translateY(0);
opacity: 1;
filter: blur(0);
}
}
@keyframes header-slide-out {
0% {
transform: translateY(0);
opacity: 1;
filter: blur(0);
}
100% {
transform: translateY(-120%);
opacity: 0;
filter: blur(6px);
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.navigation { .header-inner {
flex-direction: column; flex-direction: column;
align-items: stretch;
gap: 1rem; gap: 1rem;
width: 100%; padding: 0.75rem 1.25rem 1.25rem;
margin-top: 1rem; min-height: unset;
} }
.header-content { .brand-title {
flex-direction: column; font-size: 1.35rem;
align-items: flex-start;
gap: 1rem;
padding: 0 1rem;
} }
.header-brand { .brand-description {
width: 100%; white-space: normal;
display: flex;
justify-content: space-between;
align-items: center;
} }
.nav-item { .main-nav {
width: 100%; flex-wrap: wrap;
gap: 0.5rem;
}
.nav-button {
flex: 1 1 auto;
justify-content: center; justify-content: center;
} }
} }

143
src/components/common/CodeBlock.astro
View File

@@ -44,13 +44,7 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
if ((window as any).Prism) return Promise.resolve(); if ((window as any).Prism) return Promise.resolve();
return new Promise<void>((resolve, reject) => { return new Promise<void>((resolve, reject) => {
// 加载 CSS // 加载行号插件 CSS（结构样式）
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css';
document.head.appendChild(cssLink);
// 加载行号插件 CSS
const lineNumbersCss = document.createElement('link'); const lineNumbersCss = document.createElement('link');
lineNumbersCss.rel = 'stylesheet'; lineNumbersCss.rel = 'stylesheet';
lineNumbersCss.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css'; lineNumbersCss.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css';
@@ -133,22 +127,23 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
<style> <style>
.glass-code-block { .glass-code-block {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px); backdrop-filter: blur(22px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 1rem; border-radius: 1rem;
margin: 1.5rem 0; margin: 1.5rem 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 36px rgba(15, 23, 42, 0.12);
transition: all 0.3s ease; transition: all 0.3s ease;
font-family: 'Maple Mono NF CN', 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace; font-family: 'Maple Mono NF CN', 'FiraCode Nerd Font', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Roboto Mono', 'SFMono-Regular', monospace;
font-feature-settings: "calt" 1, "ss01" 1;
} }
.glass-code-block:hover { .glass-code-block:hover {
background: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3); border-color: rgba(148, 163, 184, 0.5);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 14px 44px rgba(15, 23, 42, 0.16);
} }
.code-header { .code-header {
@@ -169,10 +164,10 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
.code-language { .code-language {
font-size: 0.8rem; font-size: 0.8rem;
color: #64748b; color: #1c304e;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
background: rgba(100, 116, 139, 0.1); background: rgba(100, 116, 139, 0.156);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
@@ -197,21 +192,25 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
.code-content { .code-content {
overflow: auto; overflow: auto;
max-height: 500px; max-height: 500px;
background: linear-gradient(135deg, rgba(224, 231, 255, 0.42) 0%, rgba(221, 242, 253, 0.32) 100%);
} }
.code-content pre { .code-content pre {
margin: 0; margin: 0;
padding: 1.5rem 1.5rem 1.5rem 3.5rem; padding: 1.5rem 1.5rem 1.5rem 3.5rem;
background: transparent !important; background: transparent !important;
font-size: 0.85rem; font-size: 0.9rem;
line-height: 1.6; line-height: 1.6;
overflow: auto; overflow: auto;
color: #0f172a;
font-family: 'Maple Mono NF CN', 'FiraCode Nerd Font', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Roboto Mono', monospace;
} }
.code-content code { .code-content code {
background: transparent !important; background: transparent !important;
color: #334155 !important; color: inherit !important;
font-family: inherit; font-family: 'Maple Mono NF CN', 'FiraCode Nerd Font', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Roboto Mono', monospace;
font-variant-ligatures: contextual;
} }
/* 覆盖 Prism 默认样式 */ /* 覆盖 Prism 默认样式 */
@@ -222,64 +221,88 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
} }
/* 行号样式 */ /* 行号样式 */
.line-numbers .line-numbers-rows { :global(.line-numbers .line-numbers-rows) {
border-right: 1px solid rgba(0, 0, 0, 0.2) !important; border-right: 1px solid rgba(100, 116, 139, 0.35) !important;
background: rgba(0, 0, 0, 0.05) !important; background: rgba(15, 23, 42, 0.08) !important;
padding-left: 2rem !important; padding: 1.5rem 0.75rem !important;
text-align: right !important;
} }
.line-numbers-rows > span:before { :global(.line-numbers-rows > span:before) {
color: #64748b !important; color: #334155 !important;
display: inline-block;
width: 100%;
text-align: right;
} }
/* 语法高亮颜色调整 */ /* 语法高亮颜色调整 */
.code-content .token.comment, :global(.code-content .token.comment),
.code-content .token.prolog, :global(.code-content .token.prolog),
.code-content .token.doctype, :global(.code-content .token.doctype),
.code-content .token.cdata { :global(.code-content .token.cdata) {
color: #64748b !important;
}
.code-content .token.punctuation {
color: #475569 !important; color: #475569 !important;
font-style: italic;
} }
.code-content .token.property, :global(.code-content .token.punctuation) {
.code-content .token.tag, color: #1e293b !important;
.code-content .token.boolean, font-weight: 500;
.code-content .token.number,
.code-content .token.constant,
.code-content .token.symbol,
.code-content .token.deleted {
color: #d97706 !important;
} }
.code-content .token.selector, :global(.code-content .token.property),
.code-content .token.attr-name, :global(.code-content .token.tag),
.code-content .token.string, :global(.code-content .token.boolean),
.code-content .token.char, :global(.code-content .token.number),
.code-content .token.builtin, :global(.code-content .token.constant),
.code-content .token.inserted { :global(.code-content .token.symbol),
color: #059669 !important; :global(.code-content .token.deleted) {
color: #b45309 !important;
font-weight: 600;
} }
.code-content .token.operator, :global(.code-content .token.selector),
.code-content .token.entity, :global(.code-content .token.attr-name),
.code-content .token.url, :global(.code-content .token.string),
.language-css .token.string, :global(.code-content .token.char),
.style .token.string { :global(.code-content .token.builtin),
:global(.code-content .token.inserted) {
color: #047857 !important;
}
:global(.code-content .token.operator),
:global(.code-content .token.entity),
:global(.code-content .token.url),
:global(.language-css .token.string),
:global(.style .token.string) {
color: #2563eb !important; color: #2563eb !important;
font-weight: 500;
} }
.code-content .token.atrule, :global(.code-content .token.atrule),
.code-content .token.attr-value, :global(.code-content .token.attr-value),
.code-content .token.keyword { :global(.code-content .token.keyword) {
color: #7c3aed !important; color: #7c3aed !important;
font-weight: 600;
} }
.code-content .token.function, :global(.code-content .token.function),
.code-content .token.class-name { :global(.code-content .token.class-name) {
color: #dc2626 !important; color: #db2777 !important;
font-weight: 600;
}
:global(.code-content .token.regex),
:global(.code-content .token.important),
:global(.code-content .token.variable) {
color: #0f766e !important;
}
:global(.code-content .token.bold) {
font-weight: 700;
}
:global(.code-content .token.italic) {
font-style: italic;
} }
/* 响应式设计 */ /* 响应式设计 */

380
src/components/common/GlowButton.astro Normal file
View File

@@ -0,0 +1,380 @@
---
export interface Props {
href?: string;
target?: '_blank' | '_self' | '_parent' | '_top';
rel?: string;
type?: 'button' | 'submit' | 'reset';
variant?: 'primary' | 'secondary' | 'outline' | 'translucent';
size?: 'sm' | 'md' | 'lg';
className?: string;
icon?: string;
ariaLabel?: string;
disabled?: boolean;
reveal?: boolean;
revealDelay?: string;
revealDistance?: string;
tabIndex?: number;
}
const {
href,
target,
rel,
type = 'button',
variant = 'primary',
size = 'md',
className = '',
icon,
ariaLabel,
reveal = false,
revealDelay,
revealDistance,
disabled = false,
tabIndex
} = Astro.props satisfies Props;
const computedRel = rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
const isInteractiveLink = Boolean(href) && !disabled;
const baseClasses = [
'glow-button',
`glow-button--${variant}`,
`glow-button--${size}`,
disabled ? 'glow-button--disabled' : '',
className
].filter(Boolean).join(' ');
const revealAttributes = reveal
? {
'data-reveal': 'up',
...(revealDelay ? { 'data-reveal-delay': revealDelay } : {}),
...(revealDistance ? { 'data-reveal-distance': revealDistance } : { 'data-reveal-distance': '16px' })
}
: {};
---
{isInteractiveLink ? (
<a
class={baseClasses}
href={href}
target={target}
rel={computedRel}
role="button"
aria-label={ariaLabel}
tabindex={tabIndex}
{...revealAttributes}
>
<span class="glow-button__border" aria-hidden="true"></span>
<span class="glow-button__shine" aria-hidden="true"></span>
<span class="glow-button__light" aria-hidden="true"></span>
<span class="glow-button__content">
{icon && <i class={`glow-button__icon ${icon}`}></i>}
<span class="glow-button__label"><slot /></span>
</span>
</a>
) : (
<button
class={baseClasses}
type={type}
aria-label={ariaLabel}
disabled={disabled}
tabindex={tabIndex}
{...revealAttributes}
>
<span class="glow-button__border" aria-hidden="true"></span>
<span class="glow-button__shine" aria-hidden="true"></span>
<span class="glow-button__light" aria-hidden="true"></span>
<span class="glow-button__content">
{icon && <i class={`glow-button__icon ${icon}`}></i>}
<span class="glow-button__label"><slot /></span>
</span>
</button>
)}
<style>
.glow-button {
--glow-x: 50%;
--glow-y: 50%;
--glow-opacity: 0;
--glow-scale: 1;
--glow-pad-x: 1.4rem;
--glow-pad-y: 0.7rem;
--glow-radius: 999px;
--glow-text-color: #0f172a;
--glow-sheen: rgba(255, 255, 255, 0.45);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: calc(var(--glow-pad-y) - 0.05rem) calc(var(--glow-pad-x) - 0.05rem);
border-radius: var(--glow-radius);
border: 0;
background: transparent;
cursor: pointer;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
color: var(--glow-text-color);
isolation: isolate;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease, color 0.35s ease;
outline: none;
user-select: none;
}
.glow-button__content {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.05rem 0;
z-index: 1;
}
.glow-button__label {
white-space: nowrap;
}
.glow-button__icon {
font-size: 1rem;
transition: transform 0.3s ease;
}
.glow-button__border,
.glow-button__shine,
.glow-button__light {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.glow-button__border {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(125, 211, 252, 0.6), rgba(192, 132, 252, 0.45));
opacity: 0.32;
transition: opacity 0.35s ease;
}
.glow-button__shine {
background:
linear-gradient(130deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 45%, transparent);
opacity: 0.35;
mix-blend-mode: screen;
transition: opacity 0.4s ease;
}
.glow-button__light {
background:
radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.85), transparent 45%),
radial-gradient(220px circle at calc(var(--glow-x) + 4%) calc(var(--glow-y) + 6%), rgba(96, 165, 250, 0.45), transparent 65%),
radial-gradient(180px circle at calc(var(--glow-x) - 12%) calc(var(--glow-y) - 14%), rgba(236, 72, 153, 0.45), transparent 55%);
opacity: calc(var(--glow-opacity) * 0.9);
filter: blur(calc((1 - var(--glow-opacity)) * 12px));
transition: opacity 0.35s ease, filter 0.35s ease;
}
.glow-button:hover {
transform: translateY(-2px);
}
.glow-button.is-hovered .glow-button__border {
opacity: 0.6;
}
.glow-button.is-hovered .glow-button__shine {
opacity: 0.6;
}
.glow-button.is-hovered .glow-button__icon {
transform: translateY(-1px);
}
.glow-button.is-pressed {
transform: translateY(1px) scale(0.99);
}
.glow-button:focus-visible {
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6);
}
.glow-button--primary {
--glow-text-color: #0f172a;
background: linear-gradient(140deg, rgba(56, 189, 248, 0.25), rgba(96, 165, 250, 0.25), rgba(216, 180, 254, 0.25));
}
.glow-button--secondary {
--glow-text-color: #1f2937;
background: rgba(226, 232, 240, 0.55);
}
.glow-button--outline {
--glow-text-color: #0f172a;
background: rgba(15, 23, 42, 0.05);
border: 1px solid rgba(148, 163, 184, 0.35);
}
.glow-button--translucent {
--glow-text-color: #0f172a;
background: rgba(241, 245, 249, 0.75);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.glow-button--translucent.is-hovered {
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}
.glow-button--disabled {
cursor: not-allowed;
opacity: 0.6;
filter: grayscale(0.2);
}
.glow-button--disabled .glow-button__border,
.glow-button--disabled .glow-button__shine,
.glow-button--disabled .glow-button__light {
display: none;
}
.glow-button--sm {
--glow-pad-x: 1.1rem;
--glow-pad-y: 0.5rem;
font-size: 0.85rem;
}
.glow-button--lg {
--glow-pad-x: 1.6rem;
--glow-pad-y: 0.85rem;
font-size: 1.05rem;
}
.glow-button--sm .glow-button__icon {
font-size: 0.9rem;
}
.glow-button--lg .glow-button__icon {
font-size: 1.15rem;
}
@media (max-width: 768px) {
.glow-button {
--glow-pad-x: 1.05rem;
gap: 0.5rem;
width: 100%;
}
.glow-button__content {
width: 100%;
}
.glow-button__label {
text-align: center;
width: 100%;
}
}
</style>
<script is:inline>
const attachGlowEvents = (button) => {
if (!button || button.dataset.glowBound === 'true') return;
button.dataset.glowBound = 'true';
const updateGlow = (event, intensity = 1) => {
const rect = button.getBoundingClientRect();
const x = ((event.clientX - rect.left) / rect.width) * 100;
const y = ((event.clientY - rect.top) / rect.height) * 100;
button.style.setProperty('--glow-x', `${x}%`);
button.style.setProperty('--glow-y', `${y}%`);
button.style.setProperty('--glow-opacity', `${Math.max(0, Math.min(1, intensity))}`);
};
const fadeOut = () => {
button.style.setProperty('--glow-opacity', '0');
button.classList.remove('is-hovered');
};
button.addEventListener('pointermove', (event) => {
if (button.classList.contains('glow-button--disabled')) return;
button.classList.add('is-hovered');
updateGlow(event, 1);
});
button.addEventListener('pointerenter', (event) => {
if (button.classList.contains('glow-button--disabled')) return;
button.classList.add('is-hovered');
updateGlow(event, 0.95);
});
button.addEventListener('pointerleave', () => {
if (button.classList.contains('glow-button--disabled')) return;
fadeOut();
});
button.addEventListener('focus', () => {
if (button.classList.contains('glow-button--disabled')) return;
button.classList.add('is-hovered');
button.style.setProperty('--glow-x', '50%');
button.style.setProperty('--glow-y', '50%');
button.style.setProperty('--glow-opacity', '0.85');
});
button.addEventListener('blur', () => {
fadeOut();
});
button.addEventListener('pointerdown', () => {
if (button.classList.contains('glow-button--disabled')) return;
button.classList.add('is-pressed');
});
const releasePress = () => button.classList.remove('is-pressed');
button.addEventListener('pointerup', releasePress);
button.addEventListener('pointercancel', releasePress);
};
const setupGlowButtons = () => {
const buttons = document.querySelectorAll('.glow-button');
buttons.forEach((button) => attachGlowEvents(button));
};
if (typeof window !== 'undefined') {
const register = () => {
setupGlowButtons();
const win = window;
const observerKey = '__glowButtonObserver';
const initKey = '__glowButtonInitialized';
if (!win[observerKey]) {
const observer = new MutationObserver(() => setupGlowButtons());
observer.observe(document.body, { childList: true, subtree: true });
win[observerKey] = observer;
win.addEventListener('astro:page-load', setupGlowButtons);
}
win[initKey] = true;
};
const ensure = () => setupGlowButtons();
if (window['__glowButtonInitialized']) {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', ensure, { once: true });
} else {
ensure();
}
} else {
window['__glowButtonInitialized'] = true;
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', register, { once: true });
} else {
register();
}
}
}
</script>

629
src/components/common/ImageViewer.astro Normal file
View File

@@ -0,0 +1,629 @@
---
export interface Props {
src: string;
alt: string;
caption?: string;
className?: string;
width?: string | number;
height?: string | number;
aspectRatio?: string;
lazy?: boolean;
}
const {
src,
alt,
caption,
className = '',
width,
height,
aspectRatio,
lazy = true
} = Astro.props;
// 生成唯一ID
const imageId = `image-${Math.random().toString(36).substring(2, 11)}`;
---
<div class={`image-viewer ${className}`}>
<div
class="image-container"
style={aspectRatio ? `aspect-ratio: ${aspectRatio}` : ''}
onclick={`openImageModal('${imageId}')`}
>
<img
id={imageId}
src={src}
alt={alt}
width={width}
height={height}
loading={lazy ? 'lazy' : 'eager'}
class="viewer-image"
data-image-id={imageId}
data-full-src={src}
data-caption={caption ?? ''}
style="cursor: pointer;"
/>
</div>
{caption && (
<div class="image-caption">{caption}</div>
)}
</div>
<!-- 全屏模态框由全局脚本统一创建 -->
<script is:inline>
(function() {
if (window.imageViewerInitialized) return;
window.imageViewerInitialized = true;
const MODAL_ID = 'global-image-viewer-modal';
const MAX_SCALE = 6;
const MIN_SCALE = 1;
const state = {
modal: null,
overlay: null,
closeBtn: null,
prevBtn: null,
nextBtn: null,
counter: null,
modalImage: null,
modalCaption: null,
images: [],
currentIndex: -1,
scale: 1,
offsetX: 0,
offsetY: 0,
isPanning: false,
startX: 0,
startY: 0,
pointers: new Map(),
pinchStartDistance: 0,
pinchStartScale: 1,
};
function createModal() {
const modal = document.createElement('div');
modal.id = MODAL_ID;
modal.className = 'image-modal';
modal.innerHTML = `
<div class="modal-overlay"></div>
<button class="nav-button nav-prev" type="button" aria-label="上一张" hidden>‹</button>
<button class="nav-button nav-next" type="button" aria-label="下一张" hidden>›</button>
<div class="modal-content">
<button class="close-btn" aria-label="关闭">×</button>
<img class="modal-image" alt="" draggable="false" />
<div class="modal-caption" hidden></div>
<div class="image-counter" hidden></div>
</div>
`;
document.body.appendChild(modal);
return modal;
}
function assignModalElements(modal) {
state.modal = modal;
state.overlay = modal.querySelector('.modal-overlay');
state.closeBtn = modal.querySelector('.close-btn');
state.prevBtn = modal.querySelector('.nav-prev');
state.nextBtn = modal.querySelector('.nav-next');
state.counter = modal.querySelector('.image-counter');
state.modalImage = modal.querySelector('.modal-image');
state.modalCaption = modal.querySelector('.modal-caption');
}
assignModalElements(document.getElementById(MODAL_ID) ?? createModal());
function collectImages() {
const candidates = Array.from(document.querySelectorAll('.viewer-image'));
const seen = new Set();
state.images = candidates.filter((node) => {
if (!(node instanceof HTMLImageElement)) return false;
if (!node.id) {
node.id = `viewer-${crypto.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
}
if (seen.has(node.id)) return false;
seen.add(node.id);
if (!node.dataset.imageId) {
node.dataset.imageId = node.id;
}
if (!node.dataset.fullSrc) {
node.dataset.fullSrc = node.currentSrc || node.src;
}
return true;
});
}
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
function clampOffsets() {
if (!state.modalImage) return;
const maxX = (state.scale - 1) * (state.modalImage.clientWidth / 2);
const maxY = (state.scale - 1) * (state.modalImage.clientHeight / 2);
if (maxX <= 0 || Number.isNaN(maxX)) {
state.offsetX = 0;
} else {
state.offsetX = clamp(state.offsetX, -maxX, maxX);
}
if (maxY <= 0 || Number.isNaN(maxY)) {
state.offsetY = 0;
} else {
state.offsetY = clamp(state.offsetY, -maxY, maxY);
}
}
function updateTransform() {
if (!state.modalImage) return;
state.modalImage.style.transform = `translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.scale})`;
}
function updateCursor(mode) {
if (!state.modalImage) return;
if (mode === 'grabbing') {
state.modalImage.style.cursor = 'grabbing';
} else if (state.scale > 1) {
state.modalImage.style.cursor = 'grab';
} else {
state.modalImage.style.cursor = 'zoom-in';
}
}
function resetTransform() {
state.scale = 1;
state.offsetX = 0;
state.offsetY = 0;
state.isPanning = false;
state.startX = 0;
state.startY = 0;
state.pointers.clear();
state.pinchStartDistance = 0;
state.pinchStartScale = 1;
updateTransform();
updateCursor();
}
function toggleNavVisibility() {
const hasMultiple = state.images.length > 1;
if (state.prevBtn) {
state.prevBtn.hidden = !hasMultiple;
}
if (state.nextBtn) {
state.nextBtn.hidden = !hasMultiple;
}
if (state.counter) {
if (hasMultiple) {
state.counter.removeAttribute('hidden');
} else {
state.counter.setAttribute('hidden', '');
}
}
}
function showImage(index) {
if (!state.images.length) return;
const normalizedIndex = ((index % state.images.length) + state.images.length) % state.images.length;
const target = state.images[normalizedIndex];
if (!target || !(target instanceof HTMLImageElement)) return;
state.currentIndex = normalizedIndex;
const fullSrc = target.dataset.fullSrc || target.currentSrc || target.src;
if (state.modalImage) {
state.modalImage.src = fullSrc;
state.modalImage.alt = target.alt || '';
}
if (state.modalCaption) {
const captionText = target.dataset.caption || target.getAttribute('title') || '';
if (captionText) {
state.modalCaption.textContent = captionText;
state.modalCaption.removeAttribute('hidden');
} else {
state.modalCaption.textContent = '';
state.modalCaption.setAttribute('hidden', '');
}
}
if (state.counter) {
if (state.images.length > 1) {
state.counter.textContent = `${normalizedIndex + 1} / ${state.images.length}`;
} else {
state.counter.textContent = '';
}
}
toggleNavVisibility();
resetTransform();
}
function closeModal() {
if (!state.modal) return;
state.modal.classList.remove('active');
document.body.style.overflow = '';
resetTransform();
}
function navigate(delta) {
if (!state.modal?.classList.contains('active')) return;
if (state.images.length <= 1) return;
showImage(state.currentIndex + delta);
}
function onWheel(event) {
if (!state.modal?.classList.contains('active')) return;
event.preventDefault();
const factor = event.deltaY < 0 ? 1.1 : 0.9;
state.scale = clamp(state.scale * factor, MIN_SCALE, MAX_SCALE);
if (state.scale === 1) {
state.offsetX = 0;
state.offsetY = 0;
}
clampOffsets();
updateTransform();
updateCursor();
}
function onPointerDown(event) {
if (!state.modal?.classList.contains('active') || !state.modalImage) return;
event.preventDefault();
state.modalImage.setPointerCapture?.(event.pointerId);
state.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
if (state.pointers.size === 1) {
state.isPanning = state.scale > 1;
state.startX = event.clientX - state.offsetX;
state.startY = event.clientY - state.offsetY;
if (state.isPanning) {
updateCursor('grabbing');
}
} else if (state.pointers.size === 2) {
const points = Array.from(state.pointers.values());
state.pinchStartDistance = Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
state.pinchStartScale = state.scale;
state.isPanning = false;
}
}
function onPointerMove(event) {
if (!state.modal?.classList.contains('active') || !state.pointers.has(event.pointerId)) return;
state.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
if (state.pointers.size === 1 && state.isPanning && state.scale > 1) {
event.preventDefault();
state.offsetX = event.clientX - state.startX;
state.offsetY = event.clientY - state.startY;
clampOffsets();
updateTransform();
} else if (state.pointers.size >= 2) {
const points = Array.from(state.pointers.values()).slice(0, 2);
const distance = Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
if (state.pinchStartDistance > 0) {
event.preventDefault();
const nextScale = state.pinchStartScale * (distance / state.pinchStartDistance);
state.scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
if (state.scale === 1) {
state.offsetX = 0;
state.offsetY = 0;
}
clampOffsets();
updateTransform();
updateCursor();
}
}
}
function onPointerEnd(event) {
if (!state.pointers.has(event.pointerId)) return;
event.preventDefault();
state.modalImage?.releasePointerCapture?.(event.pointerId);
state.pointers.delete(event.pointerId);
if (state.pointers.size === 0) {
state.isPanning = false;
updateCursor();
} else if (state.pointers.size === 1) {
const remaining = Array.from(state.pointers.values())[0];
state.startX = remaining.x - state.offsetX;
state.startY = remaining.y - state.offsetY;
}
}
function onDoubleClick() {
if (!state.modal?.classList.contains('active')) return;
if (state.scale > 1.2) {
state.scale = 1;
state.offsetX = 0;
state.offsetY = 0;
} else {
state.scale = 2;
}
clampOffsets();
updateTransform();
updateCursor();
}
state.overlay?.addEventListener('click', closeModal);
state.closeBtn?.addEventListener('click', closeModal);
state.prevBtn?.addEventListener('click', () => navigate(-1));
state.nextBtn?.addEventListener('click', () => navigate(1));
state.modalImage?.addEventListener('wheel', onWheel, { passive: false });
state.modalImage?.addEventListener('pointerdown', onPointerDown);
state.modalImage?.addEventListener('pointermove', onPointerMove);
state.modalImage?.addEventListener('pointerup', onPointerEnd);
state.modalImage?.addEventListener('pointercancel', onPointerEnd);
state.modalImage?.addEventListener('dblclick', onDoubleClick);
document.addEventListener('keydown', (event) => {
if (!state.modal?.classList.contains('active')) return;
if (event.key === 'Escape') {
event.preventDefault();
closeModal();
} else if (event.key === 'ArrowLeft') {
event.preventDefault();
navigate(-1);
} else if (event.key === 'ArrowRight') {
event.preventDefault();
navigate(1);
} else if (event.key === 'Home') {
event.preventDefault();
if (state.images.length) showImage(0);
} else if (event.key === 'End') {
event.preventDefault();
if (state.images.length) showImage(state.images.length - 1);
}
});
const observer = new MutationObserver(() => {
collectImages();
toggleNavVisibility();
});
observer.observe(document.body, { childList: true, subtree: true });
collectImages();
toggleNavVisibility();
window.openImageModal = function(imageId) {
collectImages();
if (!state.images.length) return;
const targetIndex = state.images.findIndex((img) => img.dataset.imageId === imageId || img.id === imageId);
if (targetIndex === -1) return;
showImage(targetIndex);
state.modal?.classList.add('active');
document.body.style.overflow = 'hidden';
};
window.closeImageModal = closeModal;
console.log('ImageViewer global modal with gallery & gestures ready');
})();
</script>
<style>
.image-viewer {
margin: 1.5rem 0;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: all 0.3s ease;
}
.image-viewer:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.image-container {
position: relative;
overflow: hidden;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.viewer-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
display: block;
}
.image-container:hover .viewer-image {
transform: scale(1.05);
}
.image-caption {
padding: 1rem;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #374151;
font-size: 0.9rem;
font-style: italic;
}
/* 模态框样式 */
:global(.image-modal) {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
:global(.image-modal.active) {
opacity: 1;
visibility: visible;
}
:global(.image-modal .modal-overlay) {
position: absolute;
inset: 0;
background: rgba(11, 18, 33, 0.85);
backdrop-filter: blur(30px);
}
:global(.image-modal .modal-content) {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 4vw, 3rem);
box-sizing: border-box;
transform: scale(0.95);
transition: transform 0.3s ease;
}
:global(.image-modal.active .modal-content) {
transform: scale(1);
}
:global(.image-modal .close-btn) {
position: absolute;
top: clamp(1rem, 3vw, 2.5rem);
right: clamp(1rem, 3vw, 2.5rem);
width: 3rem;
height: 3rem;
background: rgba(255, 255, 255, 0.18);
color: #f9fafb;
border: none;
border-radius: 999px;
font-size: 2rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
z-index: 1;
}
:global(.image-modal .close-btn:hover) {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
:global(.image-modal .modal-image) {
width: 100%;
height: auto;
max-width: min(1200px, 95vw);
max-height: calc(100vh - clamp(6rem, 12vh, 10rem));
object-fit: contain;
border-radius: 1rem;
box-shadow: 0 25px 60px rgba(15, 23, 42, 0.45);
touch-action: none;
user-select: none;
cursor: zoom-in;
transition: transform 0.12s ease-out;
}
:global(.image-modal .nav-button) {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: clamp(3rem, 4vw, 4.5rem);
height: clamp(3rem, 4vw, 4.5rem);
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #f8fafc;
font-size: clamp(1.8rem, 3vw, 2.4rem);
cursor: pointer;
backdrop-filter: blur(12px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.45);
transition: transform 0.2s ease, background 0.2s ease;
z-index: 1;
}
:global(.image-modal .nav-button:hover) {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.05);
}
:global(.image-modal .nav-button:active) {
transform: translateY(-50%) scale(0.95);
}
:global(.image-modal .nav-prev) {
left: clamp(0.75rem, 2vw, 2.5rem);
}
:global(.image-modal .nav-next) {
right: clamp(0.75rem, 2vw, 2.5rem);
}
:global(.image-modal .image-counter) {
position: absolute;
bottom: clamp(1.5rem, 3vh, 3rem);
left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 42, 0.55);
color: #e2e8f0;
padding: 0.6rem 1.6rem;
border-radius: 999px;
font-size: 0.95rem;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
letter-spacing: 0.08em;
}
:global(.image-modal .modal-caption) {
margin-top: clamp(1rem, 2.5vh, 2rem);
padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
color: #e2e8f0;
font-size: clamp(0.9rem, 2vw, 1.05rem);
font-style: italic;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
text-align: center;
}
/* 响应式设计 */
@media (max-width: 768px) {
:global(.image-modal) {
padding: 1rem;
}
:global(.image-modal .modal-image) {
max-width: 95vw;
max-height: 75vh;
}
:global(.image-modal .nav-button) {
width: 2.75rem;
height: 2.75rem;
font-size: 1.75rem;
}
}
/* 加载动画 */
.viewer-image {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>

43
src/components/common/ScrollProgress.astro Normal file
View File

@@ -0,0 +1,43 @@
---
---
<div class="scroll-progress" aria-hidden="true">
<span class="scroll-progress__track"></span>
<span class="scroll-progress__bar" data-scroll-progress></span>
</div>
<style>
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 1400;
pointer-events: none;
}
.scroll-progress__track {
display: block;
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.08);
opacity: 0.65;
}
.scroll-progress__bar {
display: block;
position: absolute;
inset: 0;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, #38bdf8, #6366f1 40%, #c084fc 70%, #f472b6);
opacity: 0;
transition: transform 0.18s ease-out, opacity 0.3s ease;
filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.35));
}
</style>
<script>
import '../../scripts/scroll-progress.ts';
</script>

88
src/components/navigation/NavigationCard.astro
View File

@@ -1,4 +1,6 @@
--- ---
import GlowButton from '../common/GlowButton.astro';
export interface Props { export interface Props {
title: string; title: string;
description?: string; description?: string;
@@ -6,6 +8,14 @@ export interface Props {
icon?: string; icon?: string;
color?: 'primary' | 'secondary' | 'accent'; color?: 'primary' | 'secondary' | 'accent';
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large';
buttonLabel?: string;
reveal?: boolean;
revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
revealDistance?: string;
revealDelay?: string;
revealBlur?: string;
revealScale?: string;
revealOnce?: boolean;
} }
const { const {
@@ -14,7 +24,15 @@ const {
href, href,
icon, icon,
color = 'primary', color = 'primary',
size = 'medium' size = 'medium',
buttonLabel,
reveal = true,
revealDirection,
revealDistance,
revealDelay,
revealBlur,
revealScale,
revealOnce
} = Astro.props; } = Astro.props;
// 判断是否为外部链接 // 判断是否为外部链接
@@ -26,16 +44,44 @@ const colorClasses = {
primary: 'nav-card-primary', primary: 'nav-card-primary',
secondary: 'nav-card-secondary', secondary: 'nav-card-secondary',
accent: 'nav-card-accent' accent: 'nav-card-accent'
}; } as const;
const sizeClasses = { const sizeClasses = {
small: 'nav-card-small', small: 'nav-card-small',
medium: 'nav-card-medium', medium: 'nav-card-medium',
large: 'nav-card-large' large: 'nav-card-large'
}; } as const;
const buttonVariantMap = {
primary: 'primary',
secondary: 'secondary',
accent: 'outline'
} as const;
const buttonSizeMap = {
small: 'sm',
medium: 'md',
large: 'lg'
} as const;
const ctaLabel = buttonLabel ?? '访问服务';
const revealAttributes = reveal
? {
'data-reveal': revealDirection ?? '',
...(revealDistance ? { 'data-reveal-distance': revealDistance } : { 'data-reveal-distance': '32px' }),
...(revealDelay ? { 'data-reveal-delay': revealDelay } : { 'data-reveal-delay': 'var(--card-delay, 0s)' }),
...(revealBlur ? { 'data-reveal-blur': revealBlur } : {}),
...(revealScale ? { 'data-reveal-scale': revealScale } : {}),
...(revealOnce === false ? { 'data-reveal-once': 'false' } : {})
}
: {};
--- ---
<a href={href} target={linkTarget} rel={linkRel} class={`nav-card ${colorClasses[color]} ${sizeClasses[size]}`}> <article
class={`nav-card ${colorClasses[color]} ${sizeClasses[size]}`}
{...revealAttributes}
>
<div class="nav-card-content"> <div class="nav-card-content">
{icon && ( {icon && (
<div class="nav-card-icon"> <div class="nav-card-icon">
@@ -48,14 +94,23 @@ const sizeClasses = {
{description && ( {description && (
<p class="nav-card-description">{description}</p> <p class="nav-card-description">{description}</p>
)} )}
<div class="nav-card-arrow"> <GlowButton
<i class="fas fa-arrow-right"></i> href={href}
</div> target={linkTarget}
rel={linkRel}
variant={buttonVariantMap[color]}
size={buttonSizeMap[size]}
icon="fas fa-arrow-right"
className="nav-card-button"
reveal={false}
>
{ctaLabel}
</GlowButton>
</div> </div>
<div class="nav-card-glow"></div> <div class="nav-card-glow"></div>
</a> </article>
<style> <style>
.nav-card { .nav-card {
@@ -66,7 +121,6 @@ const sizeClasses = {
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 2rem; padding: 2rem;
text-decoration: none;
color: inherit; color: inherit;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden; overflow: hidden;
@@ -89,6 +143,7 @@ const sizeClasses = {
text-align: center; text-align: center;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
gap: 1.25rem;
} }
.nav-card-icon { .nav-card-icon {
@@ -119,17 +174,8 @@ const sizeClasses = {
opacity: 0.9; opacity: 0.9;
} }
.nav-card-arrow { .nav-card-button {
font-size: 1rem; margin-top: auto;
color: #5b778e;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.nav-card:hover .nav-card-arrow {
opacity: 1;
transform: translateX(0);
} }
.nav-card-glow { .nav-card-glow {

36
src/components/navigation/NavigationGrid.astro
View File

@@ -20,9 +20,9 @@ const gapClasses = {
}; };
--- ---
<section class="navigation-grid-container"> <section class="navigation-grid-container" data-reveal data-reveal-distance="64px" data-reveal-delay="0s">
{(title || description) && ( {(title || description) && (
<div class="grid-header"> <div class="grid-header" data-reveal data-reveal-distance="32px" data-reveal-delay="0.08s">
{title && <h2 class="grid-title">{title}</h2>} {title && <h2 class="grid-title">{title}</h2>}
{description && <p class="grid-description">{description}</p>} {description && <p class="grid-description">{description}</p>}
</div> </div>
@@ -44,7 +44,6 @@ const gapClasses = {
.grid-header { .grid-header {
text-align: center; text-align: center;
margin-bottom: 3rem; margin-bottom: 3rem;
animation: fadeIn 0.6s ease-out;
} }
.grid-title { .grid-title {
@@ -109,28 +108,17 @@ const gapClasses = {
} }
} }
/* 交错动画 */
.navigation-grid > * { .navigation-grid > * {
animation: fadeIn 0.6s ease-out; --card-delay: 0s;
animation-fill-mode: both;
} }
.navigation-grid > *:nth-child(1) { animation-delay: 0.1s; } .navigation-grid > *:nth-child(1) { --card-delay: 0s; }
.navigation-grid > *:nth-child(2) { animation-delay: 0.2s; } .navigation-grid > *:nth-child(2) { --card-delay: 0.08s; }
.navigation-grid > *:nth-child(3) { animation-delay: 0.3s; } .navigation-grid > *:nth-child(3) { --card-delay: 0.16s; }
.navigation-grid > *:nth-child(4) { animation-delay: 0.4s; } .navigation-grid > *:nth-child(4) { --card-delay: 0.24s; }
.navigation-grid > *:nth-child(5) { animation-delay: 0.5s; } .navigation-grid > *:nth-child(5) { --card-delay: 0.32s; }
.navigation-grid > *:nth-child(6) { animation-delay: 0.6s; } .navigation-grid > *:nth-child(6) { --card-delay: 0.4s; }
.navigation-grid > *:nth-child(n+7) { animation-delay: 0.7s; } .navigation-grid > *:nth-child(7) { --card-delay: 0.48s; }
.navigation-grid > *:nth-child(8) { --card-delay: 0.56s; }
@keyframes fadeIn { .navigation-grid > *:nth-child(9) { --card-delay: 0.64s; }
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
</style> </style>

82
src/components/report/ReportSection.astro
View File

@@ -4,13 +4,27 @@ export interface Props {
subtitle?: string; subtitle?: string;
level?: 1 | 2 | 3 | 4; level?: 1 | 2 | 3 | 4;
divider?: boolean; divider?: boolean;
reveal?: boolean;
revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
revealDistance?: string;
revealDelay?: string;
revealBlur?: string;
revealScale?: string;
revealOnce?: boolean;
} }
const { const {
title, title,
subtitle, subtitle,
level = 1, level = 1,
divider = true divider = true,
reveal = true,
revealDirection,
revealDistance,
revealDelay,
revealBlur,
revealScale,
revealOnce
} = Astro.props; } = Astro.props;
const Tag = `h${level}` as any; const Tag = `h${level}` as any;
@@ -20,13 +34,40 @@ const sizeClasses = {
3: 'text-xl md:text-2xl', 3: 'text-xl md:text-2xl',
4: 'text-lg md:text-xl' 4: 'text-lg md:text-xl'
}; };
let emojiPart: string | null = null;
let titleBody = title;
if (typeof title === 'string') {
const trimmedTitle = title.trimStart();
const emojiMatch = trimmedTitle.match(/^([\p{Extended_Pictographic}\u2600-\u27BF][\p{Extended_Pictographic}\u2600-\u27BF\uFE0F\u200D]*)/u);
if (emojiMatch && emojiMatch[1]) {
emojiPart = emojiMatch[1];
titleBody = trimmedTitle.slice(emojiMatch[0].length).trimStart();
} else {
titleBody = trimmedTitle;
}
}
const revealAttributes = reveal
? {
'data-reveal': revealDirection ?? '',
...(revealDistance ? { 'data-reveal-distance': revealDistance } : { 'data-reveal-distance': '40px' }),
...(revealDelay ? { 'data-reveal-delay': revealDelay } : { 'data-reveal-delay': 'var(--section-delay, 0s)' }),
...(revealBlur ? { 'data-reveal-blur': revealBlur } : {}),
...(revealScale ? { 'data-reveal-scale': revealScale } : {}),
...(revealOnce === false ? { 'data-reveal-once': 'false' } : {})
}
: {};
--- ---
<section class="report-section-container"> <section class="report-section-container" {...revealAttributes}>
<div class="section-header"> <div class="section-header">
{title && ( {title && (
<Tag class={`section-title ${sizeClasses[level]}`}> <Tag class={`section-title ${sizeClasses[level]} ${emojiPart ? 'section-title--with-emoji' : ''}`}>
{title} {emojiPart && <span class="section-title__emoji">{emojiPart}</span>}
<span class="section-title__text">{typeof titleBody === 'string' ? titleBody : title}</span>
</Tag> </Tag>
)} )}
@@ -52,7 +93,6 @@ const sizeClasses = {
margin-bottom: 2rem; margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
animation: fadeIn 0.6s ease-out;
} }
.report-section-container:hover { .report-section-container:hover {
@@ -71,6 +111,27 @@ const sizeClasses = {
color: #011a2d; color: #011a2d;
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
line-height: 1.2; line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.section-title.section-title--with-emoji {
gap: 0.65rem;
}
.section-title__emoji {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35em;
line-height: 1;
filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
}
.section-title__text {
display: inline-block;
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e); background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -163,15 +224,4 @@ const sizeClasses = {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style> </style>

522
src/components/report/ReportSidebar.astro Normal file
View File

@@ -0,0 +1,522 @@
---
export interface Props {
title?: string;
toggleLabel?: string;
targetSelector?: string;
headingSelector?: string;
minLevel?: number;
maxLevel?: number;
defaultOpenBreakpoint?: string;
}
const {
title = '页面导航',
toggleLabel = '导航',
targetSelector = '[data-report-content]',
headingSelector,
minLevel = 2,
maxLevel = 3,
defaultOpenBreakpoint = '(min-width: 1280px)'
} = Astro.props;
const sidebarId = `report-sidebar-${Math.random().toString(36).slice(2, 10)}`;
const navListId = `${sidebarId}-list`;
const config = {
sidebarId,
navListId,
title,
toggleLabel,
targetSelector,
headingSelector: headingSelector ?? '',
minLevel,
maxLevel,
breakpoint: defaultOpenBreakpoint
};
---
<aside
id={sidebarId}
class="report-sidebar collapsed"
data-report-sidebar
data-breakpoint={defaultOpenBreakpoint}
>
<button
class="report-sidebar__toggle"
type="button"
aria-expanded="false"
aria-controls={navListId}
>
<span class="report-sidebar__toggle-icon" aria-hidden="true">☰</span>
<span class="report-sidebar__toggle-label">{toggleLabel}</span>
</button>
<div class="report-sidebar__panel" role="dialog" aria-modal="false">
<div class="report-sidebar__header">
<h2 class="report-sidebar__title">{title}</h2>
<button class="report-sidebar__close" type="button" aria-label="收起导航">
×
</button>
</div>
<nav class="report-sidebar__nav" aria-label={title}>
<ul id={navListId} class="report-sidebar__list"></ul>
</nav>
</div>
</aside>
<script is:inline define:vars={{ CONFIG: config }}>
const script = document.currentScript;
(function () {
if (!script) return;
const sidebar = document.getElementById(CONFIG.sidebarId);
if (!sidebar || sidebar.dataset.initialized === 'true') return;
sidebar.dataset.initialized = 'true';
const navList = sidebar.querySelector('.report-sidebar__list');
const toggleBtn = sidebar.querySelector('.report-sidebar__toggle');
const closeBtn = sidebar.querySelector('.report-sidebar__close');
if (!navList || !toggleBtn || !closeBtn) return;
const matchBreakpoint = window.matchMedia(CONFIG.breakpoint);
const headingLevels = Array.from({ length: CONFIG.maxLevel - CONFIG.minLevel + 1 }, (_, idx) => `h${CONFIG.minLevel + idx}`);
const selector = CONFIG.headingSelector && CONFIG.headingSelector.trim().length > 0
? CONFIG.headingSelector
: headingLevels.join(',');
const slugify = (text) => {
if (!text) return 'section';
return text
.toLowerCase()
.replace(/[\p{Extended_Pictographic}\p{Emoji_Presentation}\p{Emoji_Component}\p{Emoji}\p{Symbol}\p{Open_Punctuation}\p{Close_Punctuation}]/gu, '')
.replace(/[^a-z0-9\u4e00-\u9fa5\-\s]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.replace(/^-|-$/g, '') || 'section';
};
const buildNavigation = () => {
const targetRoot = document.querySelector(CONFIG.targetSelector) ?? document.body;
const headings = Array.from(targetRoot.querySelectorAll(selector))
.filter((heading) => heading instanceof HTMLElement);
if (!headings.length) {
sidebar.classList.add('report-sidebar--empty');
return;
}
sidebar.classList.remove('report-sidebar--empty');
const existingIds = new Set(headings.filter((h) => h.id).map((h) => h.id));
headings.forEach((heading) => {
if (!heading.id) {
const base = slugify(heading.textContent ?? 'section');
let candidate = base;
let counter = 1;
while (existingIds.has(candidate) || document.getElementById(candidate)) {
candidate = `${base}-${counter++}`;
}
heading.id = candidate;
existingIds.add(candidate);
}
});
// 清空并重建导航
navList.innerHTML = '';
headings.forEach((heading) => {
const level = parseInt(heading.tagName.replace('H', ''), 10) || CONFIG.minLevel;
const text = heading.textContent?.trim() ?? '';
if (!text) return;
// 计算缩进层级（相对于最小层级）
const depth = Math.max(0, level - CONFIG.minLevel);
const listItem = document.createElement('li');
listItem.className = `nav-item nav-item--level-${level} nav-item--depth-${depth}`;
const link = document.createElement('a');
link.className = `nav-link nav-link--level-${level}`;
link.href = `#${heading.id}`;
link.textContent = text;
link.dataset.targetId = heading.id;
link.dataset.level = String(level);
link.dataset.depth = String(depth);
// 设置内联样式
const indentPx = depth * 20; // 每层20px缩进
let fontSize, fontWeight, color;
switch(level) {
case 2:
fontSize = '18px';
fontWeight = '700';
color = '#0f172a';
break;
case 3:
fontSize = '16px';
fontWeight = '600';
color = '#1e293b';
break;
default:
fontSize = '13px';
fontWeight = '400';
color = '#475569';
}
link.style.cssText = `
margin-left: ${indentPx}px;
font-size: ${fontSize};
font-weight: ${fontWeight};
color: ${color};
padding: ${level === 2 ? '12px 16px' : level === 3 ? '10px 14px' : '8px 12px'};
display: block;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s ease;
`;
listItem.appendChild(link);
navList.appendChild(listItem);
});
setupScrollSpy(headings);
};
const setCollapsed = (collapsed) => {
sidebar.classList.toggle('collapsed', collapsed);
toggleBtn.setAttribute('aria-expanded', String(!collapsed));
};
const handleToggle = () => {
setCollapsed(!sidebar.classList.contains('collapsed'));
};
toggleBtn.addEventListener('click', handleToggle);
closeBtn.addEventListener('click', () => setCollapsed(true));
const handleLinkClick = (event) => {
const link = event.target.closest('.nav-link');
if (!link) return;
event.preventDefault();
const targetId = link.dataset.targetId;
const target = targetId ? document.getElementById(targetId) : null;
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
history.replaceState(null, '', `#${targetId}`);
}
if (!matchBreakpoint.matches) {
setCollapsed(true);
}
};
navList.addEventListener('click', handleLinkClick);
const applyBreakpointState = () => {
setCollapsed(!matchBreakpoint.matches);
};
matchBreakpoint.addEventListener('change', applyBreakpointState);
let activeLink = null;
let observer = null;
const setActiveLink = (id) => {
if (activeLink) {
activeLink.classList.remove('nav-link--active');
}
const next = navList.querySelector(`.nav-link[data-target-id="${id}"]`);
if (next) {
next.classList.add('nav-link--active');
activeLink = next;
} else {
activeLink = null;
}
};
const setupScrollSpy = (headings) => {
if (observer) {
observer.disconnect();
}
observer = new IntersectionObserver((entries) => {
const visible = entries
.filter((entry) => entry.isIntersecting)
.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
if (visible.length > 0) {
setActiveLink(visible[0].target.id);
return;
}
const sorted = entries
.slice()
.sort((a, b) => a.target.offsetTop - b.target.offsetTop);
const current = sorted.find((entry) => window.scrollY + 120 <= entry.target.offsetTop + entry.target.offsetHeight);
if (current) {
setActiveLink(current.target.id);
}
}, {
rootMargin: '-35% 0px -55% 0px',
threshold: [0, 0.25, 0.5, 0.75, 1]
});
headings.forEach((heading) => observer.observe(heading));
};
const initialize = () => {
buildNavigation();
applyBreakpointState();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initialize, { once: true });
} else {
initialize();
}
document.addEventListener('astro:after-swap', () => {
buildNavigation();
applyBreakpointState();
});
})();
</script>
<style>
.report-sidebar {
--sidebar-width: var(--report-sidebar-width, clamp(260px, 24vw, 320px));
position: relative;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: var(--sidebar-width);
z-index: 40;
}
.report-sidebar__toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1rem;
border-radius: 999px;
border: 1px solid rgba(91, 119, 142, 0.35);
background: rgba(255, 255, 255, 0.18);
color: #0f172a;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
backdrop-filter: blur(12px);
}
.report-sidebar__toggle:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
background: rgba(255, 255, 255, 0.28);
}
.report-sidebar__toggle-icon {
font-size: 1.1rem;
}
.report-sidebar__panel {
width: var(--sidebar-width);
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(91, 119, 142, 0.25);
border-radius: 1.25rem;
padding: 1.25rem;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
backdrop-filter: blur(18px);
transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
position: sticky;
top: 6.5rem;
max-height: calc(100vh - 7.5rem);
overflow: hidden;
display: flex;
flex-direction: column;
}
.collapsed .report-sidebar__panel {
opacity: 0;
visibility: hidden;
transform: translateX(-12px);
pointer-events: none;
}
.report-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.report-sidebar__title {
font-size: 1.125rem;
font-weight: 700;
margin: 0;
color: #0f172a;
}
.report-sidebar__close {
border: none;
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
width: 2rem;
height: 2rem;
border-radius: 999px;
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.report-sidebar__close:hover {
background: rgba(15, 23, 42, 0.12);
transform: scale(1.05);
}
.report-sidebar__nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 8px;
margin-right: -8px;
}
/* 自定义滚动条样式 */
.report-sidebar__nav::-webkit-scrollbar {
width: 6px;
}
.report-sidebar__nav::-webkit-scrollbar-track {
background: rgba(148, 163, 184, 0.1);
border-radius: 3px;
}
.report-sidebar__nav::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.4);
border-radius: 3px;
}
.report-sidebar__nav::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.6);
}
.report-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
/* 导航项基础样式 */
.nav-item {
position: relative;
margin: 2px 0;
}
.nav-link:hover {
background: rgba(59, 130, 246, 0.1) !important;
transform: translateX(4px);
}
/* 激活状态 */
.nav-link--active {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(29, 78, 216, 0.15)) !important;
color: #1d4ed8 !important;
font-weight: 700 !important;
border-left: 4px solid #3b82f6;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
@media (min-width: 1280px) {
.report-sidebar {
--sidebar-width: var(--report-sidebar-width, clamp(260px, 22vw, 320px));
--sidebar-inline-offset: clamp(1rem, 2.5vw, 3rem);
position: fixed;
top: 6rem;
left: calc(env(safe-area-inset-left) + var(--sidebar-inline-offset));
height: calc(100vh - 7rem);
align-items: stretch;
gap: 1rem;
}
.report-sidebar__toggle {
justify-content: center;
width: 100%;
}
.report-sidebar__panel {
position: relative;
top: auto;
width: var(--sidebar-width);
max-height: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.report-sidebar__nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.collapsed .report-sidebar__panel {
transform: translateX(-16px);
}
}
@media (max-width: 1279px) {
.report-sidebar {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: auto;
gap: 0.5rem;
align-items: flex-end;
z-index: 55;
}
.report-sidebar__toggle {
background: rgba(15, 23, 42, 0.8);
color: #f8fafc;
box-shadow: 0 15px 30px rgba(15, 23, 42, 0.35);
}
.report-sidebar__panel {
position: fixed;
bottom: 0;
right: 0;
top: auto;
left: 0;
width: 100%;
max-height: min(520px, 85vh);
border-radius: 1.5rem 1.5rem 0 0;
padding: 1.5rem;
transform: translateY(100%);
}
.collapsed .report-sidebar__panel {
transform: translateY(110%);
}
.report-sidebar__panel,
.collapsed .report-sidebar__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.report-sidebar__panel,
.report-sidebar__toggle,
.nav-link {
transition: none;
}
}
</style>

7
src/layouts/BaseLayout.astro
View File

@@ -1,4 +1,6 @@
--- ---
import ScrollProgress from '../components/common/ScrollProgress.astro';
export interface Props { export interface Props {
title: string; title: string;
description?: string; description?: string;
@@ -28,10 +30,15 @@ const { title, description = '', type = 'navigation' } = Astro.props;
<link rel="stylesheet" href="/src/styles/global.css"> <link rel="stylesheet" href="/src/styles/global.css">
</head> </head>
<body class={`${type === 'report' ? 'report-layout' : 'navigation-layout'}`}> <body class={`${type === 'report' ? 'report-layout' : 'navigation-layout'}`}>
<ScrollProgress />
<div class="min-h-screen"> <div class="min-h-screen">
<slot /> <slot />
</div> </div>
<script>
import '../scripts/scroll-reveal.ts';
</script>
<style> <style>
.navigation-layout { .navigation-layout {
background: linear-gradient(135deg, background: linear-gradient(135deg,

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

11
src/pages/index.astro
View File

@@ -5,7 +5,6 @@ import Footer from '../components/Footer.astro';
import NavigationGrid from '../components/navigation/NavigationGrid.astro'; import NavigationGrid from '../components/navigation/NavigationGrid.astro';
import NavigationCard from '../components/navigation/NavigationCard.astro'; import NavigationCard from '../components/navigation/NavigationCard.astro';
import Container from '../components/Container.astro'; import Container from '../components/Container.astro';
import AnimatedElement from '../components/AnimatedElement.astro';
--- ---
<BaseLayout title="Jiao77 - 首页" description="简约美观的现代化网站" type="navigation"> <BaseLayout title="Jiao77 - 首页" description="简约美观的现代化网站" type="navigation">
@@ -13,13 +12,17 @@ import AnimatedElement from '../components/AnimatedElement.astro';
<main class="main-content"> <main class="main-content">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<AnimatedElement animation="fadeInUp" delay={200}> <Container
<Container variant="glass" size="large" padding="xl" className="text-center mb-12"> variant="glass"
size="large"
padding="xl"
className="text-center mb-12"
revealDistance="48px"
>
<h1 class="hero-title"><i class="fas fa-rocket"></i> 焦七七小站</h1> <h1 class="hero-title"><i class="fas fa-rocket"></i> 焦七七小站</h1>
<p class="hero-subtitle">技术服务平台</p> <p class="hero-subtitle">技术服务平台</p>
<p class="hero-description">整合多种自建服务，提供便捷的技术解决方案。从这里发现更多可能性！</p> <p class="hero-description">整合多种自建服务，提供便捷的技术解决方案。从这里发现更多可能性！</p>
</Container> </Container>
</AnimatedElement>
</div> </div>
<NavigationGrid <NavigationGrid

245
src/pages/report/20250609/index.astro
View File

@@ -5,9 +5,10 @@ import Footer from '../../../components/Footer.astro';
import ReportSection from '../../../components/report/ReportSection.astro'; import ReportSection from '../../../components/report/ReportSection.astro';
import GlassTable from '../../../components/common/GlassTable.astro'; import GlassTable from '../../../components/common/GlassTable.astro';
import MathFormula from '../../../components/common/MathFormula.astro'; import MathFormula from '../../../components/common/MathFormula.astro';
import ImageViewer from '../../../components/common/ImageViewer.astro';
import Container from '../../../components/Container.astro'; import Container from '../../../components/Container.astro';
import AnimatedElement from '../../../components/AnimatedElement.astro'; import ReportSidebar from '../../../components/report/ReportSidebar.astro';
--- ---
<BaseLayout <BaseLayout
@@ -18,19 +19,25 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
<Header /> <Header />
<main class="report-main"> <main class="report-main">
<div class="container mx-auto px-4"> <div class="report-layout container mx-auto px-4">
<ReportSidebar title="报告目录" toggleLabel="目录" />
<div class="report-content" data-report-content>
<!-- 报告标题区域 --> <!-- 报告标题区域 -->
<AnimatedElement animation="fadeInUp" delay={200}> <section id="intro" class="report-header scroll-mt-16" data-reveal data-reveal-distance="64px">
<section id="intro" class="report-header scroll-mt-16"> <Container
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24"> variant="glass"
<h1 class="report-title">面向版图模板识别的AI技术路径探索</h1> size="full"
<p class="report-subtitle">聚焦RoRD的旋转鲁棒性与零样本匹配能力，剖析其如何应对IC版图分析的根本挑战。</p> padding="xl"
<div class="report-action"> className="text-center mb-12 mt-24"
<a href="#goal" class="bg-[#27797f] text-white font-bold py-3 px-8 rounded-full hover:bg-[#1e6066] transition duration-300">开始探索 ↓</a> revealDistance="56px"
</div> >
</Container> <h1 class="report-title">面向版图模板识别的AI技术路径探索</h1>
</section> <p class="report-subtitle">聚焦RoRD的旋转鲁棒性与零样本匹配能力，剖析其如何应对IC版图分析的根本挑战。</p>
</AnimatedElement> <div class="report-action">
<a href="#goal" class="bg-[#27797f] text-white font-bold py-3 px-8 rounded-full hover:bg-[#1e6066] transition duration-300">开始探索 ↓</a>
</div>
</Container>
</section>
<!-- 项目目标章节 --> <!-- 项目目标章节 -->
<ReportSection <ReportSection
@@ -173,8 +180,8 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
</div> </div>
</div> </div>
<div class="mt-12 text-center bg-teal-50 border-l-4 border-teal-500 text-teal-800 p-6 rounded-r-lg max-w-4xl mx-auto"> <div class="summary-highlight" data-reveal data-reveal-distance="48px">
<p class="font-semibold">核心优势总结：RoRD通过结合正交视图生成、专门的旋转鲁棒特征学习以及对应关系集成，显著提升了在极端视角变化（尤其是旋转）下的局部特征匹配性能，并在描述子匹配、姿态估计和视觉位置识别等任务上超越了多种基线和先进方法。</p> <p class="summary-highlight__text">核心优势总结：RoRD通过结合正交视图生成、专门的旋转鲁棒特征学习以及对应关系集成，显著提升了在极端视角变化（尤其是旋转）下的局部特征匹配性能，并在描述子匹配、姿态估计和视觉位置识别等任务上超越了多种基线和先进方法。</p>
</div> </div>
</ReportSection> <!-- AI技术版图交互式对比 --> </ReportSection> <!-- AI技术版图交互式对比 -->
<ReportSection <ReportSection
@@ -262,8 +269,8 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
<p>在训练过程中，除了旋转增强外，我们还会在一个小范围内（如0.8x 到 1.2x）随机缩放输入图像。这样，训练出来的描述子对轻微的尺度变化也会具有一定的鲁棒性。</p> <p>在训练过程中，除了旋转增强外，我们还会在一个小范围内（如0.8x 到 1.2x）随机缩放输入图像。这样，训练出来的描述子对轻微的尺度变化也会具有一定的鲁棒性。</p>
</li> </li>
</ul> </ul>
<div class="mt-4 text-center bg-sky-50 border-l-4 border-sky-500 text-sky-800 p-4 rounded-r-lg"> <div class="strategy-highlight" data-reveal data-reveal-distance="48px">
<p class="font-semibold">综合效果：通过“滑动窗口”+“图像金字塔”+“尺度抖动”的组合策略，我们使RoRD模型能够在一个任意大的版图中，高效地找到尺寸未知的模板实例，完美解决了真实场景中的尺度挑战。</p> <p class="strategy-highlight__text">综合效果：通过“滑动窗口”+“图像金字塔”+“尺度抖动”的组合策略，我们使RoRD模型能够在一个任意大的版图中，高效地找到尺寸未知的模板实例，完美解决了真实场景中的尺度挑战。</p>
</div> </div>
</div> </div>
</div> </div>
@@ -280,15 +287,30 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
<h3 class="text-xl font-semibold text-center mb-4 text-gray-700">初始匹配</h3> <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">初始匹配</h3>
<div class="proof-image-container"> <div class="proof-image-container">
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (18).jpg" alt="keypoints" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (18).jpg"
alt="keypoints"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>keypoints</p> <p>keypoints</p>
</div> </div>
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (19).jpg" alt="raw-match" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (19).jpg"
alt="raw-match"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>raw-match</p> <p>raw-match</p>
</div> </div>
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (20).jpg" alt="RANSAC-match" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (20).jpg"
alt="RANSAC-match"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>RANSAC-match</p> <p>RANSAC-match</p>
</div> </div>
</div> </div>
@@ -298,15 +320,30 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
<h3 class="text-xl font-semibold text-center mb-4 text-gray-700">屏蔽已匹配部分后的二次匹配</h3> <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">屏蔽已匹配部分后的二次匹配</h3>
<div class="proof-image-container"> <div class="proof-image-container">
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (21).jpg" alt="keypoints" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (21).jpg"
alt="keypoints"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>keypoints</p> <p>keypoints</p>
</div> </div>
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (22).jpg" alt="raw-match" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (22).jpg"
alt="raw-match"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>raw-match</p> <p>raw-match</p>
</div> </div>
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (23).jpg" alt="RANSAC-match" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (23).jpg"
alt="RANSAC-match"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>RANSAC-match</p> <p>RANSAC-match</p>
</div> </div>
</div> </div>
@@ -316,15 +353,30 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
<h3 class="text-xl font-semibold text-center mb-4 text-gray-700">八方向旋转下的匹配</h3> <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">八方向旋转下的匹配</h3>
<div class="proof-image-container"> <div class="proof-image-container">
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (15).jpg" alt="keypoints" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (15).jpg"
alt="keypoints"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>keypoints</p> <p>keypoints</p>
</div> </div>
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (16).jpg" alt="raw-match" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (16).jpg"
alt="raw-match"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>raw-match</p> <p>raw-match</p>
</div> </div>
<div class="proof-image-item"> <div class="proof-image-item">
<img src="/report/20250609-images/image (17).jpg" alt="RANSAC-match" class="proof-image"> <ImageViewer
src="/report/20250609-images/image (17).jpg"
alt="RANSAC-match"
className="proof-image-viewer"
aspectRatio="5 / 3"
/>
<p>RANSAC-match</p> <p>RANSAC-match</p>
</div> </div>
</div> </div>
@@ -368,6 +420,7 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
</div> </div>
</div> </div>
</ReportSection> </ReportSection>
</div>
</div> </div>
</main> </main>
@@ -566,6 +619,22 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
} }
.report-layout {
--report-sidebar-width: clamp(260px, 22vw, 320px);
display: flex;
flex-direction: column;
gap: 2.5rem;
position: relative;
width: 100%;
}
.report-content {
position: relative;
width: 100%;
min-width: 0;
margin: 0 auto;
}
.container { .container {
max-width: 1200px; max-width: 1200px;
@@ -632,11 +701,83 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
} }
.challenge-card { .challenge-card {
background: white; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 116, 144, 0.12));
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.75rem; border-radius: 0.85rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); border: 1px solid rgba(59, 130, 246, 0.35);
border: 1px solid #e5e7eb; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(16px);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.summary-highlight {
margin-top: 3rem;
margin-left: auto;
margin-right: auto;
max-width: 56rem;
padding: 1.75rem 2.5rem;
text-align: center;
background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(59, 130, 246, 0.14));
border-radius: 1.25rem;
border: 1px solid rgba(45, 212, 191, 0.45);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(18px);
color: #0f172a;
position: relative;
overflow: hidden;
}
.summary-highlight::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 55%);
opacity: 0.65;
pointer-events: none;
}
.summary-highlight__text {
position: relative;
font-weight: 600;
font-size: 1.05rem;
color: inherit;
}
.strategy-highlight {
margin-top: 1.5rem;
text-align: center;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, rgba(125, 211, 252, 0.22), rgba(59, 130, 246, 0.16));
border-radius: 1.1rem;
border: 1px solid rgba(59, 130, 246, 0.4);
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14);
backdrop-filter: blur(14px);
color: #0f172a;
position: relative;
overflow: hidden;
}
.strategy-highlight::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.45), transparent 60%);
opacity: 0.6;
pointer-events: none;
}
.strategy-highlight__text {
position: relative;
font-weight: 600;
font-size: 1rem;
color: inherit;
line-height: 1.7;
}
.challenge-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
border-color: rgba(14, 116, 144, 0.45);
} }
.challenge-title { .challenge-title {
@@ -785,14 +926,25 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
text-align: center; text-align: center;
} }
.proof-image { :global(.proof-image-viewer) {
width: 100%; margin: 0;
height: auto;
aspect-ratio: 5 / 3;
object-fit: cover;
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
:global(.proof-image-viewer:hover) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);
}
:global(.proof-image-viewer .image-container) {
aspect-ratio: 5 / 3;
}
:global(.proof-image-viewer .viewer-image) {
object-fit: cover;
} }
.proof-image-item p { .proof-image-item p {
@@ -827,6 +979,27 @@ import AnimatedElement from '../../../components/AnimatedElement.astro';
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@media (min-width: 1280px) {
.report-main {
padding-left: clamp(
calc(var(--report-sidebar-width, 320px) + 3rem),
calc((100vw - 1200px) / 2 + 2rem),
calc(var(--report-sidebar-width, 320px) + 4rem)
);
padding-right: clamp(2.5rem, calc((100vw - 1200px) / 2 + 2rem), 5rem);
}
.report-layout {
max-width: 1200px;
margin: 0 auto;
}
.report-content {
max-width: 1200px;
width: 100%;
}
}
.tab-btn { .tab-btn {
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;

19
src/pages/report/index.astro
View File

@@ -5,7 +5,6 @@ import Footer from '../../components/Footer.astro';
import NavigationGrid from '../../components/navigation/NavigationGrid.astro'; import NavigationGrid from '../../components/navigation/NavigationGrid.astro';
import NavigationCard from '../../components/navigation/NavigationCard.astro'; import NavigationCard from '../../components/navigation/NavigationCard.astro';
import Container from '../../components/Container.astro'; import Container from '../../components/Container.astro';
import AnimatedElement from '../../components/AnimatedElement.astro';
--- ---
<BaseLayout title="技术报告 - Jiao77" description="我的所有技术研究与分析报告都在这里" type="navigation"> <BaseLayout title="技术报告 - Jiao77" description="我的所有技术研究与分析报告都在这里" type="navigation">
@@ -13,13 +12,17 @@ import AnimatedElement from '../../components/AnimatedElement.astro';
<main class="main-content"> <main class="main-content">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<AnimatedElement animation="fadeInUp" delay={200}> <Container
<Container variant="glass" size="large" padding="xl" className="text-center mb-12"> variant="glass"
<h1 class="hero-title"><i class="fas fa-book-open"></i> 技术报告</h1> size="large"
<p class="hero-subtitle">研究与分析报告集锦</p> padding="xl"
<p class="hero-description">我的所有技术研究与分析报告都在这里。从AI集成电路版图识别到EDA工具应用，探索技术前沿的深度分析。</p> className="text-center mb-12"
</Container> revealDistance="48px"
</AnimatedElement> >
<h1 class="hero-title"><i class="fas fa-book-open"></i> 技术报告</h1>
<p class="hero-subtitle">研究与分析报告集锦</p>
<p class="hero-description">我的所有技术研究与分析报告都在这里。从AI集成电路版图识别到EDA工具应用，探索技术前沿的深度分析。</p>
</Container>
</div> </div>
<NavigationGrid <NavigationGrid

369
src/scripts/header.ts
View File

@@ -1,136 +1,295 @@
/** /**
* Header组件的JavaScript功能 * Header 自动隐藏/显示控制
* 处理页眉的展开和收缩交互 * - 页面顶部时固定展示
* - 滚动离开顶部后隐藏，鼠标移动到顶部区域或焦点进入时显示
*/ */
export class HeaderController { class HeaderVisibilityController {
private isExpanded: boolean = false; private header: HTMLElement | null = null;
private expandButton: HTMLElement | null = null; private isAtTop = true;
private collapseButton: HTMLElement | null = null; private isMouseInHeaderZone = false;
private headerCollapsed: HTMLElement | null = null; private isMouseNearRevealZone = false;
private headerExpanded: HTMLElement | null = null; private visibilityState: 'visible' | 'hidden' | 'animating-show' | 'animating-hide' = 'visible';
private readonly pinThreshold = 56;
private readonly revealZoneHeight = 120;
private pointerState: {
currentX: number;
currentY: number;
currentIntensity: number;
targetX: number;
targetY: number;
targetIntensity: number;
rafId: number | null;
} = {
currentX: 50,
currentY: -40,
currentIntensity: 0,
targetX: 50,
targetY: -40,
targetIntensity: 0,
rafId: null
};
constructor() { constructor() {
this.init(); this.init();
} }
private init(): void { private init(): void {
// 等待DOM加载完成
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => this.bindEvents()); document.addEventListener('DOMContentLoaded', () => this.setup());
} else { } else {
this.bindEvents(); this.setup();
} }
} }
private bindEvents(): void { private setup(): void {
// 获取DOM元素 this.header = document.getElementById('site-header');
this.expandButton = document.getElementById('expand-button'); if (!this.header) return;
this.collapseButton = document.getElementById('collapse-button');
this.headerCollapsed = document.getElementById('header-collapsed');
this.headerExpanded = document.getElementById('header-expanded');
// 绑定事件 this.isAtTop = window.scrollY <= this.pinThreshold;
if (this.expandButton) { this.visibilityState = 'visible';
this.expandButton.addEventListener('click', () => this.expandHeader()); this.header.classList.remove('hidden', 'hiding', 'showing');
this.header.classList.add('visible');
if (this.isAtTop) {
this.header.classList.add('pinned');
}
window.addEventListener('scroll', () => this.handleScroll(), { passive: true });
window.addEventListener('mousemove', (event) => this.handleMouseMove(event));
this.header.addEventListener('focusin', () => this.handleFocusIn());
this.header.addEventListener('focusout', () => this.handleFocusOut());
this.header.addEventListener('animationend', (event) => this.handleAnimationEnd(event));
if (!this.pointerState.rafId) {
this.pointerState.rafId = window.requestAnimationFrame(() => this.runPointerAnimation());
} }
if (this.collapseButton) { // 初始状态
this.collapseButton.addEventListener('click', () => this.collapseHeader()); this.handleScroll();
}
// 点击外部区域收缩导航
document.addEventListener('click', (e) => this.handleOutsideClick(e));
// 键盘事件支持
document.addEventListener('keydown', (e) => this.handleKeydown(e));
} }
private expandHeader(): void { private handleScroll(): void {
if (this.isExpanded) return; if (!this.header) return;
this.isExpanded = true; const atTop = window.scrollY <= this.pinThreshold;
this.isAtTop = atTop;
if (this.headerCollapsed) {
this.headerCollapsed.style.display = 'none';
}
if (this.headerExpanded) {
this.headerExpanded.style.display = 'block';
this.headerExpanded.style.animation = 'slideDown 0.3s ease-out';
}
// 设置焦点到收缩按钮以便键盘导航 if (atTop) {
if (this.collapseButton) { this.header.classList.add('pinned');
this.collapseButton.focus(); this.showHeader();
}
}
private collapseHeader(): void {
if (!this.isExpanded) return;
this.isExpanded = false;
if (this.headerExpanded) {
this.headerExpanded.style.animation = 'slideUp 0.3s ease-out';
setTimeout(() => {
if (this.headerExpanded) {
this.headerExpanded.style.display = 'none';
}
}, 300);
}
if (this.headerCollapsed) {
this.headerCollapsed.style.display = 'block';
}
// 设置焦点回到展开按钮
if (this.expandButton) {
this.expandButton.focus();
}
}
private handleOutsideClick(event: Event): void {
const target = event.target as HTMLElement;
if (!this.isExpanded) return;
// 检查点击是否在页眉外部
if (this.headerExpanded && !this.headerExpanded.contains(target)) {
this.collapseHeader();
}
}
private handleKeydown(event: KeyboardEvent): void {
// ESC键收缩导航
if (event.key === 'Escape' && this.isExpanded) {
this.collapseHeader();
}
}
// 公共方法
public toggle(): void {
if (this.isExpanded) {
this.collapseHeader();
} else { } else {
this.expandHeader(); this.header.classList.remove('pinned');
if (!this.isMouseInHeaderZone && !this.isMouseNearRevealZone) {
this.hideHeader();
}
}
}
private handleMouseMove(event: MouseEvent): void {
if (!this.header) return;
this.checkMouseZone(event);
this.updateRevealZone(event);
this.updatePointerFromEvent(event);
}
private handleFocusIn(): void {
this.showHeader();
this.setPointerTarget(50, 35, 0.75);
}
private handleFocusOut(): void {
if (!this.header) return;
window.requestAnimationFrame(() => {
const active = document.activeElement;
if (active && this.header && this.header.contains(active)) {
return;
}
if (!this.isAtTop && !this.isMouseInHeaderZone && !this.isMouseNearRevealZone) {
this.hideHeader();
}
this.setPointerTarget(50, -40, 0);
});
}
private showHeader(options: { animate?: boolean } = {}): void {
if (!this.header) return;
const animate = options.animate ?? true;
if (!animate) {
if (this.visibilityState === 'visible') return;
this.visibilityState = 'visible';
this.header.classList.remove('hidden', 'hiding', 'showing');
this.header.classList.add('visible');
return;
}
if (this.visibilityState === 'visible' || this.visibilityState === 'animating-show') {
return;
}
this.visibilityState = 'animating-show';
this.header.classList.remove('hidden', 'hiding');
this.header.classList.add('visible', 'showing');
}
private hideHeader(options: { animate?: boolean; resetPointer?: boolean } = {}): void {
if (!this.header) return;
const animate = options.animate ?? true;
const resetPointer = options.resetPointer ?? true;
if (!animate) {
if (this.visibilityState === 'hidden') return;
this.visibilityState = 'hidden';
this.header.classList.remove('visible', 'showing', 'hiding');
this.header.classList.add('hidden');
if (resetPointer) {
this.setPointerTarget(50, -40, 0);
}
return;
}
if (this.visibilityState === 'hidden' || this.visibilityState === 'animating-hide') {
return;
}
this.visibilityState = 'animating-hide';
this.header.classList.remove('showing');
this.header.classList.add('hiding');
if (resetPointer) {
this.setPointerTarget(50, -40, 0);
} }
} }
public getState(): boolean { private setPointerTarget(x: number, y: number, intensity: number): void {
return this.isExpanded; this.pointerState.targetX = this.clamp(x, 0, 100);
this.pointerState.targetY = this.clamp(y, -60, 140);
this.pointerState.targetIntensity = this.clamp(intensity, 0, 1.1);
}
private checkMouseZone(event: MouseEvent): void {
if (!this.header) return;
const rect = this.header.getBoundingClientRect();
const headerHeight = Math.max(this.header.offsetHeight, 80);
const headerWidth = Math.max(rect.width, this.header.offsetWidth || window.innerWidth);
const headerLeft = rect.left || 0;
const headerTop = Math.max(rect.top, 0);
const headerRight = headerLeft + headerWidth;
const headerBottom = headerTop + headerHeight;
const inHeaderZone =
event.clientY >= headerTop &&
event.clientY <= headerBottom &&
event.clientX >= headerLeft &&
event.clientX <= headerRight;
const wasInZone = this.isMouseInHeaderZone;
this.isMouseInHeaderZone = inHeaderZone;
// 鼠标进入header区域时显示
if (inHeaderZone && !wasInZone) {
this.showHeader();
}
// 鼠标离开header区域且不在顶部时隐藏
else if (!inHeaderZone && wasInZone && !this.isAtTop && !this.isMouseNearRevealZone) {
this.hideHeader();
}
}
private updateRevealZone(event: MouseEvent): void {
if (!this.header) return;
const wasNearZone = this.isMouseNearRevealZone;
const inRevealZone = !this.isAtTop && event.clientY >= 0 && event.clientY <= this.revealZoneHeight;
this.isMouseNearRevealZone = inRevealZone;
if (!this.isAtTop) {
if (inRevealZone && !wasNearZone && !this.isMouseInHeaderZone) {
this.showHeader();
} else if (!inRevealZone && wasNearZone && !this.isMouseInHeaderZone) {
this.hideHeader();
}
}
}
private updatePointerFromEvent(event: MouseEvent): void {
if (!this.header) return;
const rect = this.header.getBoundingClientRect();
const headerHeight = Math.max(this.header.offsetHeight, 80);
const width = Math.max(rect.width, this.header.offsetWidth || window.innerWidth);
const left = rect.left;
// 计算指针位置用于光效
if (this.isMouseInHeaderZone) {
const x = width > 0 ? ((event.clientX - left) / width) * 100 : 50;
const y = headerHeight > 0 ? (event.clientY / headerHeight) * 100 : 50;
this.setPointerTarget(x, y, 1);
} else if (this.isMouseNearRevealZone) {
const x = width > 0 ? ((event.clientX - left) / width) * 100 : 50;
const y = headerHeight > 0 ? Math.min((event.clientY / headerHeight) * 100, 35) : 20;
this.setPointerTarget(x, y, 0.5);
} else {
// 在附近区域时保持微弱光效
const nearbyX = event.clientX >= left - 100 && event.clientX <= left + width + 100;
const nearbyY = event.clientY >= -50 && event.clientY <= headerHeight + 100;
if (nearbyX && nearbyY) {
const x = width > 0 ? ((event.clientX - left) / width) * 100 : 50;
const y = headerHeight > 0 ? (event.clientY / headerHeight) * 100 : 50;
this.setPointerTarget(x, y, 0.3);
} else {
this.setPointerTarget(50, -40, 0);
}
}
}
private runPointerAnimation(): void {
if (!this.header) return;
const lerp = (current: number, target: number, factor: number) => current + (target - current) * factor;
this.pointerState.currentX = lerp(this.pointerState.currentX, this.pointerState.targetX, 0.09);
this.pointerState.currentY = lerp(this.pointerState.currentY, this.pointerState.targetY, 0.08);
this.pointerState.currentIntensity = lerp(this.pointerState.currentIntensity, this.pointerState.targetIntensity, 0.08);
this.header.style.setProperty('--pointer-x', `${this.pointerState.currentX}%`);
this.header.style.setProperty('--pointer-y', `${this.pointerState.currentY}%`);
this.header.style.setProperty('--pointer-intensity', `${this.pointerState.currentIntensity}`);
this.pointerState.rafId = window.requestAnimationFrame(() => this.runPointerAnimation());
}
private handleAnimationEnd(event: AnimationEvent): void {
if (!this.header || event.target !== this.header) return;
if (event.animationName === 'header-slide-in') {
if (this.visibilityState !== 'animating-show') {
return;
}
this.header.classList.remove('showing');
this.visibilityState = 'visible';
}
if (event.animationName === 'header-slide-out') {
if (this.visibilityState !== 'animating-hide') {
return;
}
this.header.classList.remove('hiding');
this.header.classList.remove('visible');
this.header.classList.add('hidden');
this.visibilityState = 'hidden';
}
}
private clamp(value: number, min: number, max: number): number {
return Math.min(max, Math.max(min, value));
} }
} }
// 自动初始化 // 自动初始化
let headerController: HeaderController | null = null;
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
// 确保只初始化一次 const controller = new HeaderVisibilityController();
if (!headerController) { (window as any).headerVisibilityController = controller;
headerController = new HeaderController();
}
// 将控制器暴露到全局作用域以便调试
(window as any).headerController = headerController;
} }

64
src/scripts/scroll-progress.ts Normal file
View File

@@ -0,0 +1,64 @@
class ScrollProgressController {
private bar: HTMLElement | null = null;
private rafId: number | null = null;
private lastProgress = -1;
constructor() {
this.init();
}
private init(): void {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => this.setup());
} else {
this.setup();
}
}
public refresh(): void {
this.requestUpdate();
}
private setup(): void {
this.bar = document.querySelector<HTMLElement>('[data-scroll-progress]');
if (!this.bar) return;
this.requestUpdate();
window.addEventListener('scroll', () => this.requestUpdate(), { passive: true });
window.addEventListener('resize', () => this.requestUpdate());
window.addEventListener('load', () => this.requestUpdate());
document.addEventListener('astro:page-load', () => this.requestUpdate());
}
private requestUpdate(): void {
if (this.rafId !== null) return;
this.rafId = window.requestAnimationFrame(() => this.updateProgress());
}
private updateProgress(): void {
this.rafId = null;
if (!this.bar) return;
const scrollElement = document.scrollingElement || document.documentElement;
const scrollHeight = scrollElement.scrollHeight - scrollElement.clientHeight;
const progress = scrollHeight > 0 ? scrollElement.scrollTop / scrollHeight : 0;
if (progress === this.lastProgress) {
return;
}
this.lastProgress = progress;
this.bar.style.transform = `scaleX(${progress})`;
this.bar.style.opacity = progress > 0 ? '1' : '0';
}
}
if (typeof window !== 'undefined') {
if (!(window as any).__scrollProgressController) {
(window as any).__scrollProgressController = new ScrollProgressController();
} else {
const controller = (window as any).__scrollProgressController as ScrollProgressController;
controller.refresh();
}
}

218
src/scripts/scroll-reveal.ts Normal file
View File

@@ -0,0 +1,218 @@
const TARGET_SELECTOR = '[data-reveal], .reveal-on-scroll, .animate-fade-in';
const DEFAULT_DISTANCE = '24px';
const DEFAULT_DURATION = '0.65s';
const DEFAULT_DELAY = '0s';
const DEFAULT_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
const DEFAULT_BLUR = '0.45rem';
const DEFAULT_SCALE = '1';
const directionToOffsets = (direction: string | undefined, distance: string) => {
const dir = (direction ?? 'up').toLowerCase();
switch (dir) {
case 'down':
return { x: '0', y: `-${distance}` };
case 'left':
return { x: distance, y: '0' };
case 'right':
return { x: `-${distance}`, y: '0' };
case 'fade':
case 'none':
return { x: '0', y: '0' };
case 'up':
default:
return { x: '0', y: distance };
}
};
class ScrollRevealController {
private observer: IntersectionObserver | null = null;
private mutationObserver: MutationObserver | null = null;
private targets = new Set<HTMLElement>();
private prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
private reduceMotion = this.prefersReducedMotion.matches;
constructor() {
document.documentElement.classList.add('reveal-enabled');
this.setupObserver();
this.collectTargets(true);
this.observeMutations();
this.handlePageTransitions();
this.prefersReducedMotion.addEventListener('change', (event) => {
this.reduceMotion = event.matches;
this.setupObserver();
this.collectTargets(true);
if (this.reduceMotion) {
this.showAllImmediately();
}
});
}
private setupObserver(): void {
if (this.observer) {
this.observer.disconnect();
}
if (this.reduceMotion) {
this.observer = null;
return;
}
this.observer = new IntersectionObserver(
(entries) => this.handleIntersections(entries),
{
root: null,
threshold: 0.1,
rootMargin: '0px 0px -12% 0px'
}
);
}
private collectTargets(force = false): void {
const currentTargets = document.querySelectorAll<HTMLElement>(TARGET_SELECTOR);
currentTargets.forEach((element) => {
if (!force && element.dataset.revealInitialized === 'true') {
return;
}
this.prepareElement(element);
});
}
private prepareElement(element: HTMLElement): void {
if (element.dataset.revealInitialized === 'true' && !this.reduceMotion) {
// Reconnect existing elements to observer when needed
if (this.observer && !element.dataset.revealObserved) {
this.observer.observe(element);
element.dataset.revealObserved = 'true';
}
return;
}
const dataset = element.dataset;
const direction = dataset.revealDirection || dataset.reveal;
const distance = dataset.revealDistance || DEFAULT_DISTANCE;
const duration = dataset.revealDuration || DEFAULT_DURATION;
const delay = dataset.revealDelay || DEFAULT_DELAY;
const easing = dataset.revealEasing || DEFAULT_EASING;
const blur = dataset.revealBlur || DEFAULT_BLUR;
const scale = dataset.revealScale || DEFAULT_SCALE;
const once = dataset.revealOnce !== 'false';
const offsets = directionToOffsets(direction, distance);
element.style.setProperty('--reveal-delay', delay);
element.style.setProperty('--reveal-duration', duration);
element.style.setProperty('--reveal-easing', easing);
element.style.setProperty('--reveal-translate-x', offsets.x);
element.style.setProperty('--reveal-translate-y', offsets.y);
element.style.setProperty('--reveal-blur', blur);
element.style.setProperty('--reveal-scale', scale);
if (!element.classList.contains('reveal-on-scroll')) {
element.classList.add('reveal-on-scroll');
}
element.dataset.revealOnce = once ? 'true' : 'false';
element.dataset.revealInitialized = 'true';
this.targets.add(element);
if (this.reduceMotion) {
this.showElement(element, true);
return;
}
if (this.observer) {
this.observer.observe(element);
element.dataset.revealObserved = 'true';
}
}
private handleIntersections(entries: IntersectionObserverEntry[]): void {
entries.forEach((entry) => {
const element = entry.target as HTMLElement;
const once = element.dataset.revealOnce !== 'false';
if (entry.isIntersecting || entry.intersectionRatio > 0) {
this.showElement(element);
if (once && this.observer) {
this.observer.unobserve(element);
element.dataset.revealObserved = '';
}
} else if (!once) {
this.hideElement(element);
if (this.observer && element.dataset.revealObserved !== 'true') {
this.observer.observe(element);
element.dataset.revealObserved = 'true';
}
}
});
}
private showElement(element: HTMLElement, immediate = false): void {
if (element.classList.contains('is-visible')) return;
if (immediate) {
element.style.setProperty('--reveal-duration', '0s');
element.style.setProperty('--reveal-delay', '0s');
}
requestAnimationFrame(() => {
element.classList.add('is-visible');
});
}
private hideElement(element: HTMLElement): void {
element.classList.remove('is-visible');
}
private showAllImmediately(): void {
this.targets.forEach((element) => this.showElement(element, true));
}
private observeMutations(): void {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
this.mutationObserver = new MutationObserver((mutations) => {
let shouldRecollect = false;
mutations.forEach((mutation) => {
if (mutation.addedNodes.length > 0) {
shouldRecollect = true;
}
});
if (shouldRecollect) {
this.collectTargets();
}
});
this.mutationObserver.observe(document.body, {
childList: true,
subtree: true
});
}
private handlePageTransitions(): void {
document.addEventListener('astro:page-load', () => {
this.refresh(true);
});
}
public refresh(force = false): void {
this.collectTargets(force);
if (this.reduceMotion) {
this.showAllImmediately();
}
}
}
if (typeof window !== 'undefined') {
if (!(window as any).__scrollRevealController) {
(window as any).__scrollRevealController = new ScrollRevealController();
} else {
const controller = (window as any).__scrollRevealController as ScrollRevealController;
controller.refresh(true);
}
}

25
src/styles/global.css
View File

@@ -20,6 +20,31 @@
padding: 0; padding: 0;
line-height: 1.6; line-height: 1.6;
} }
.reveal-enabled .reveal-on-scroll {
opacity: 0;
transform: translate(
var(--reveal-translate-x, 0),
var(--reveal-translate-y, 16px)
)
scale(var(--reveal-scale, 1));
filter: blur(var(--reveal-blur, 0.35rem));
transition-property: opacity, transform, filter;
transition-duration: var(--reveal-duration, 0.65s);
transition-timing-function: var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1));
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform, filter;
}
.reveal-enabled .reveal-on-scroll.is-visible {
opacity: 1;
transform: translate(0, 0) scale(1);
filter: blur(0);
}
.reveal-enabled .animate-fade-in {
animation: none !important;
}
} }
/* 玻璃质感工具类 */ /* 玻璃质感工具类 */