complete many assets
This commit is contained in:
Jiao77
@@ -8,6 +8,13 @@ export interface Props {
|
||||
animated?: boolean;
|
||||
hover?: boolean;
|
||||
className?: string;
|
||||
reveal?: boolean;
|
||||
revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
|
||||
revealDistance?: string;
|
||||
revealDelay?: string;
|
||||
revealBlur?: string;
|
||||
revealScale?: string;
|
||||
revealOnce?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -18,7 +25,14 @@ const {
|
||||
shadow = 'md',
|
||||
animated = true,
|
||||
hover = false,
|
||||
className = ''
|
||||
className = '',
|
||||
reveal = true,
|
||||
revealDirection,
|
||||
revealDistance,
|
||||
revealDelay,
|
||||
revealBlur,
|
||||
revealScale,
|
||||
revealOnce
|
||||
} = Astro.props;
|
||||
|
||||
const variantClasses = {
|
||||
@@ -63,6 +77,17 @@ const shadowClasses = {
|
||||
xl: 'shadow-xl',
|
||||
'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
|
||||
@@ -73,10 +98,11 @@ const shadowClasses = {
|
||||
${roundedClasses[rounded]}
|
||||
${paddingClasses[padding]}
|
||||
${shadowClasses[shadow]}
|
||||
${animated ? 'container-animated' : ''}
|
||||
${animated && !reveal ? 'container-animated' : ''}
|
||||
${hover ? 'container-hover' : ''}
|
||||
${className}
|
||||
`}
|
||||
{...revealAttributes}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -6,106 +6,152 @@ export interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
import GlowButton from './common/GlowButton.astro';
|
||||
|
||||
const {
|
||||
title = 'Jiao77 - AI & Technology Explorer'
|
||||
title = 'Jiao77 - AI & Technology Explorer',
|
||||
description,
|
||||
navigationItems,
|
||||
className = ''
|
||||
} = 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">
|
||||
<!-- 收缩状态的页眉 -->
|
||||
<div class="header-collapsed" id="header-collapsed">
|
||||
<div class="header-content">
|
||||
<div class="header-brand">
|
||||
<header id="site-header" class={`site-header ${className}`}>
|
||||
<div class="header-inner">
|
||||
<div class="header-brand">
|
||||
<a href="/" class="brand-link" aria-label="返回首页">
|
||||
<h1 class="brand-title">{title}</h1>
|
||||
</div>
|
||||
|
||||
<button class="expand-button" id="expand-button">
|
||||
<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>
|
||||
</a>
|
||||
{description && (
|
||||
<p class="brand-description">{description}</p>
|
||||
)}
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header-container {
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.header-collapsed {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 1rem 0;
|
||||
z-index: 1200;
|
||||
background: rgba(248, 250, 255, 0.18);
|
||||
backdrop-filter: blur(30px) saturate(150%);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.28);
|
||||
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
|
||||
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 {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(15px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 1.5rem 0;
|
||||
transform: translateY(-100%);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.site-header::before,
|
||||
.site-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
|
||||
}
|
||||
|
||||
.header-collapsed.hidden {
|
||||
transform: translateY(-100%);
|
||||
|
||||
.site-header.pinned {
|
||||
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;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
|
||||
font-weight: 700;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
@@ -113,81 +159,98 @@ const {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
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;
|
||||
gap: 2rem;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
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-button {
|
||||
min-width: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.nav-button :global(.glow-button__content) {
|
||||
gap: 0.4rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.expand-button,
|
||||
.collapse-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
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;
|
||||
|
||||
.nav-button :global(.glow-button__icon) {
|
||||
font-size: 0.9rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.expand-button:hover,
|
||||
.collapse-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(1.05);
|
||||
|
||||
@keyframes header-slide-in {
|
||||
0% {
|
||||
transform: translateY(-110%);
|
||||
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) {
|
||||
.navigation {
|
||||
.header-inner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem 1.25rem 1.25rem;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.brand-description {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
|
||||
.main-nav {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
flex: 1 1 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,13 +44,7 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
|
||||
if ((window as any).Prism) return Promise.resolve();
|
||||
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
// 加载 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
|
||||
// 加载行号插件 CSS（结构样式）
|
||||
const lineNumbersCss = document.createElement('link');
|
||||
lineNumbersCss.rel = 'stylesheet';
|
||||
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>
|
||||
.glass-code-block {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(22px);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
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;
|
||||
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 {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border-color: rgba(148, 163, 184, 0.5);
|
||||
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 {
|
||||
@@ -169,10 +164,10 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
|
||||
|
||||
.code-language {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
color: #1c304e;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
background: rgba(100, 116, 139, 0.156);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@@ -197,21 +192,25 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
|
||||
.code-content {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
background: linear-gradient(135deg, rgba(224, 231, 255, 0.42) 0%, rgba(221, 242, 253, 0.32) 100%);
|
||||
}
|
||||
|
||||
.code-content pre {
|
||||
margin: 0;
|
||||
padding: 1.5rem 1.5rem 1.5rem 3.5rem;
|
||||
background: transparent !important;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
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 {
|
||||
background: transparent !important;
|
||||
color: #334155 !important;
|
||||
font-family: inherit;
|
||||
color: inherit !important;
|
||||
font-family: 'Maple Mono NF CN', 'FiraCode Nerd Font', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Roboto Mono', monospace;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
|
||||
/* 覆盖 Prism 默认样式 */
|
||||
@@ -222,64 +221,88 @@ const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
|
||||
}
|
||||
|
||||
/* 行号样式 */
|
||||
.line-numbers .line-numbers-rows {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
padding-left: 2rem !important;
|
||||
:global(.line-numbers .line-numbers-rows) {
|
||||
border-right: 1px solid rgba(100, 116, 139, 0.35) !important;
|
||||
background: rgba(15, 23, 42, 0.08) !important;
|
||||
padding: 1.5rem 0.75rem !important;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #64748b !important;
|
||||
:global(.line-numbers-rows > span:before) {
|
||||
color: #334155 !important;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 语法高亮颜色调整 */
|
||||
.code-content .token.comment,
|
||||
.code-content .token.prolog,
|
||||
.code-content .token.doctype,
|
||||
.code-content .token.cdata {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
.code-content .token.punctuation {
|
||||
:global(.code-content .token.comment),
|
||||
:global(.code-content .token.prolog),
|
||||
:global(.code-content .token.doctype),
|
||||
:global(.code-content .token.cdata) {
|
||||
color: #475569 !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.code-content .token.property,
|
||||
.code-content .token.tag,
|
||||
.code-content .token.boolean,
|
||||
.code-content .token.number,
|
||||
.code-content .token.constant,
|
||||
.code-content .token.symbol,
|
||||
.code-content .token.deleted {
|
||||
color: #d97706 !important;
|
||||
:global(.code-content .token.punctuation) {
|
||||
color: #1e293b !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-content .token.selector,
|
||||
.code-content .token.attr-name,
|
||||
.code-content .token.string,
|
||||
.code-content .token.char,
|
||||
.code-content .token.builtin,
|
||||
.code-content .token.inserted {
|
||||
color: #059669 !important;
|
||||
:global(.code-content .token.property),
|
||||
:global(.code-content .token.tag),
|
||||
:global(.code-content .token.boolean),
|
||||
:global(.code-content .token.number),
|
||||
:global(.code-content .token.constant),
|
||||
:global(.code-content .token.symbol),
|
||||
:global(.code-content .token.deleted) {
|
||||
color: #b45309 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-content .token.operator,
|
||||
.code-content .token.entity,
|
||||
.code-content .token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
:global(.code-content .token.selector),
|
||||
:global(.code-content .token.attr-name),
|
||||
:global(.code-content .token.string),
|
||||
:global(.code-content .token.char),
|
||||
: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;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-content .token.atrule,
|
||||
.code-content .token.attr-value,
|
||||
.code-content .token.keyword {
|
||||
:global(.code-content .token.atrule),
|
||||
:global(.code-content .token.attr-value),
|
||||
:global(.code-content .token.keyword) {
|
||||
color: #7c3aed !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-content .token.function,
|
||||
.code-content .token.class-name {
|
||||
color: #dc2626 !important;
|
||||
:global(.code-content .token.function),
|
||||
:global(.code-content .token.class-name) {
|
||||
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
380
src/components/common/GlowButton.astro
Normal 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
629
src/components/common/ImageViewer.astro
Normal 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
43
src/components/common/ScrollProgress.astro
Normal 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>
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
import GlowButton from '../common/GlowButton.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
@@ -6,6 +8,14 @@ export interface Props {
|
||||
icon?: string;
|
||||
color?: 'primary' | 'secondary' | 'accent';
|
||||
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 {
|
||||
@@ -14,7 +24,15 @@ const {
|
||||
href,
|
||||
icon,
|
||||
color = 'primary',
|
||||
size = 'medium'
|
||||
size = 'medium',
|
||||
buttonLabel,
|
||||
reveal = true,
|
||||
revealDirection,
|
||||
revealDistance,
|
||||
revealDelay,
|
||||
revealBlur,
|
||||
revealScale,
|
||||
revealOnce
|
||||
} = Astro.props;
|
||||
|
||||
// 判断是否为外部链接
|
||||
@@ -26,16 +44,44 @@ const colorClasses = {
|
||||
primary: 'nav-card-primary',
|
||||
secondary: 'nav-card-secondary',
|
||||
accent: 'nav-card-accent'
|
||||
};
|
||||
} as const;
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'nav-card-small',
|
||||
medium: 'nav-card-medium',
|
||||
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">
|
||||
{icon && (
|
||||
<div class="nav-card-icon">
|
||||
@@ -48,14 +94,23 @@ const sizeClasses = {
|
||||
{description && (
|
||||
<p class="nav-card-description">{description}</p>
|
||||
)}
|
||||
|
||||
<div class="nav-card-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
|
||||
<GlowButton
|
||||
href={href}
|
||||
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 class="nav-card-glow"></div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.nav-card {
|
||||
@@ -66,7 +121,6 @@ const sizeClasses = {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
@@ -89,6 +143,7 @@ const sizeClasses = {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.nav-card-icon {
|
||||
@@ -119,17 +174,8 @@ const sizeClasses = {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nav-card-arrow {
|
||||
font-size: 1rem;
|
||||
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-button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.nav-card-glow {
|
||||
|
||||
@@ -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) && (
|
||||
<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>}
|
||||
{description && <p class="grid-description">{description}</p>}
|
||||
</div>
|
||||
@@ -44,7 +44,6 @@ const gapClasses = {
|
||||
.grid-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
@@ -109,28 +108,17 @@ const gapClasses = {
|
||||
}
|
||||
}
|
||||
|
||||
/* 交错动画 */
|
||||
.navigation-grid > * {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
animation-fill-mode: both;
|
||||
--card-delay: 0s;
|
||||
}
|
||||
|
||||
.navigation-grid > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.navigation-grid > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.navigation-grid > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.navigation-grid > *:nth-child(4) { animation-delay: 0.4s; }
|
||||
.navigation-grid > *:nth-child(5) { animation-delay: 0.5s; }
|
||||
.navigation-grid > *:nth-child(6) { animation-delay: 0.6s; }
|
||||
.navigation-grid > *:nth-child(n+7) { animation-delay: 0.7s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
.navigation-grid > *:nth-child(1) { --card-delay: 0s; }
|
||||
.navigation-grid > *:nth-child(2) { --card-delay: 0.08s; }
|
||||
.navigation-grid > *:nth-child(3) { --card-delay: 0.16s; }
|
||||
.navigation-grid > *:nth-child(4) { --card-delay: 0.24s; }
|
||||
.navigation-grid > *:nth-child(5) { --card-delay: 0.32s; }
|
||||
.navigation-grid > *:nth-child(6) { --card-delay: 0.4s; }
|
||||
.navigation-grid > *:nth-child(7) { --card-delay: 0.48s; }
|
||||
.navigation-grid > *:nth-child(8) { --card-delay: 0.56s; }
|
||||
.navigation-grid > *:nth-child(9) { --card-delay: 0.64s; }
|
||||
</style>
|
||||
@@ -4,13 +4,27 @@ export interface Props {
|
||||
subtitle?: string;
|
||||
level?: 1 | 2 | 3 | 4;
|
||||
divider?: boolean;
|
||||
reveal?: boolean;
|
||||
revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
|
||||
revealDistance?: string;
|
||||
revealDelay?: string;
|
||||
revealBlur?: string;
|
||||
revealScale?: string;
|
||||
revealOnce?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
level = 1,
|
||||
divider = true
|
||||
divider = true,
|
||||
reveal = true,
|
||||
revealDirection,
|
||||
revealDistance,
|
||||
revealDelay,
|
||||
revealBlur,
|
||||
revealScale,
|
||||
revealOnce
|
||||
} = Astro.props;
|
||||
|
||||
const Tag = `h${level}` as any;
|
||||
@@ -20,13 +34,40 @@ const sizeClasses = {
|
||||
3: 'text-xl md:text-2xl',
|
||||
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">
|
||||
{title && (
|
||||
<Tag class={`section-title ${sizeClasses[level]}`}>
|
||||
{title}
|
||||
<Tag class={`section-title ${sizeClasses[level]} ${emojiPart ? 'section-title--with-emoji' : ''}`}>
|
||||
{emojiPart && <span class="section-title__emoji">{emojiPart}</span>}
|
||||
<span class="section-title__text">{typeof titleBody === 'string' ? titleBody : title}</span>
|
||||
</Tag>
|
||||
)}
|
||||
|
||||
@@ -52,7 +93,6 @@ const sizeClasses = {
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.report-section-container:hover {
|
||||
@@ -71,6 +111,27 @@ const sizeClasses = {
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
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);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -163,15 +224,4 @@ const sizeClasses = {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
522
src/components/report/ReportSidebar.astro
Normal file
522
src/components/report/ReportSidebar.astro
Normal 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>
|
||||
Reference in New Issue
Block a user