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

finally finish all website check in.

Browse Source
This commit is contained in:
Jiao77
2025-10-01 09:51:06 +08:00
parent d40ae5a8d9
commit 96b50327f3
102 changed files with 11724 additions and 4945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/AnimatedElement.astro
View File

@@ -45,43 +45,42 @@ const {
transition: all var(--duration) var(--easing);
}
/* 动画定义 */
.animate-wrapper[data-animation="fadeIn"] {
/* 动画定义 - 只在触发时应用动画 */
.animate-wrapper.animate-visible[data-animation="fadeIn"] {
animation-name: fadeIn;
}
.animate-wrapper[data-animation="fadeInUp"] {
.animate-wrapper.animate-visible[data-animation="fadeInUp"] {
animation-name: fadeInUp;
}
.animate-wrapper[data-animation="fadeInDown"] {
.animate-wrapper.animate-visible[data-animation="fadeInDown"] {
animation-name: fadeInDown;
}
.animate-wrapper[data-animation="slideInLeft"] {
.animate-wrapper.animate-visible[data-animation="slideInLeft"] {
animation-name: slideInLeft;
}
.animate-wrapper[data-animation="slideInRight"] {
.animate-wrapper.animate-visible[data-animation="slideInRight"] {
animation-name: slideInRight;
}
.animate-wrapper[data-animation="scaleIn"] {
.animate-wrapper.animate-visible[data-animation="scaleIn"] {
animation-name: scaleIn;
}
.animate-wrapper[data-animation="rotateIn"] {
.animate-wrapper.animate-visible[data-animation="rotateIn"] {
animation-name: rotateIn;
}
.animate-wrapper[data-animation="bounceIn"] {
.animate-wrapper.animate-visible[data-animation="bounceIn"] {
animation-name: bounceIn;
}
/* 触发状态 */
/* 触发状态 - 动画完成后的最终状态 */
.animate-wrapper.animate-visible {
opacity: 1;
transform: none;
animation-fill-mode: both;
animation-play-state: running;
}
@@ -200,8 +199,21 @@ const {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const element = entry.target as HTMLElement;
if (entry.isIntersecting) {
entry.target.classList.add('animate-visible');
// 确保元素在进入视口时正确触发动画
if (!element.classList.contains('animate-visible')) {
// 重置动画状态以确保延迟正确工作
element.style.animationName = 'none';
element.offsetHeight; // 强制重绘
element.style.animationName = '';
// 添加可见类触发动画
element.classList.add('animate-visible');
}
} else {
// 可选：元素离开视口时重置动画（支持重复动画）
// element.classList.remove('animate-visible');
}
});
}, {
@@ -230,4 +242,10 @@ const {
initScrollAnimations();
initClickAnimations();
});
// 页面导航时重新初始化（适用于SPA或动态内容）
document.addEventListener('astro:page-load', () => {
initScrollAnimations();
initClickAnimations();
});
</script>

6
src/components/Container.astro
View File

@@ -138,17 +138,17 @@ const revealAttributes = reveal
/* 尺寸样式 */
.container-small {
max-width: 400px;
max-width: 500px;
margin: 0 auto;
}
.container-medium {
max-width: 600px;
max-width: 800px;
margin: 0 auto;
}
.container-large {
max-width: 800px;
max-width: 1000px;
margin: 0 auto;
}

40
src/components/Header.astro
View File

@@ -4,22 +4,30 @@ export interface Props {
description?: string;
navigationItems?: Array<{ label: string; href: string; icon?: string }>;
className?: string;
pageTitle?: string; // 页面标题，优先于通用标题
showPageTitle?: boolean; // 是否显示页面标题而不是网站标题
}
import GlowButton from './common/GlowButton.astro';
const {
title = 'Jiao77 - AI & Technology Explorer',
pageTitle,
showPageTitle = false,
description,
navigationItems,
className = ''
} = Astro.props;
// 决定显示的标题
const displayTitle = showPageTitle && pageTitle ? pageTitle : title;
// 决定点击行为：如果显示页面标题则返回顶部，否则返回首页
const titleClickAction = showPageTitle ? 'scroll-to-top' : 'home';
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;
@@ -28,9 +36,15 @@ const links = navigationItems && navigationItems.length > 0 ? navigationItems :
<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>
</a>
{titleClickAction === 'scroll-to-top' ? (
<button class="brand-link scroll-to-top-btn" aria-label="返回页面顶部">
<h1 class="brand-title">{displayTitle}</h1>
</button>
) : (
<a href="/" class="brand-link" aria-label="返回首页">
<h1 class="brand-title">{displayTitle}</h1>
</a>
)}
{description && (
<p class="brand-description">{description}</p>
)}
@@ -148,6 +162,24 @@ const links = navigationItems && navigationItems.length > 0 ? navigationItems :
.brand-link {
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: block;
}
.scroll-to-top-btn {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.scroll-to-top-btn:hover {
transform: translateY(-1px);
opacity: 0.8;
}
.scroll-to-top-btn:active {
transform: translateY(0);
}
.brand-title {

67
src/components/common/GlassTable.astro
View File

@@ -1,7 +1,14 @@
---
// 单元格内容类型：可以是简单字符串、数字、布尔值，或包含样式的对象
export type CellContent = string | number | boolean | {
content: string;
style?: 'highlight' | 'warning' | 'error' | 'success' | 'primary';
strong?: boolean;
};
export interface Props {
headers?: string[];
rows?: (string | number | boolean)[][];
rows?: CellContent[][];
caption?: string;
className?: string;
striped?: boolean;
@@ -16,6 +23,30 @@ const {
striped = false,
bordered = true
} = Astro.props;
// 辅助函数：获取单元格样式类
function getCellClass(cell: CellContent): string {
if (typeof cell === 'object' && cell !== null && 'style' in cell) {
return cell.style ? `${cell.style}-cell` : '';
}
return '';
}
// 辅助函数：获取单元格内容
function getCellContent(cell: CellContent): string {
if (typeof cell === 'object' && cell !== null && 'content' in cell) {
return cell.content;
}
return String(cell);
}
// 辅助函数：判断是否需要加粗
function isStrong(cell: CellContent): boolean {
if (typeof cell === 'object' && cell !== null && 'strong' in cell) {
return cell.strong ?? false;
}
return false;
}
---
<div class={`glass-table-container ${className}`}>
@@ -36,7 +67,13 @@ const {
{rows.map(row => (
<tr>
{row.map(cell => (
<td>{cell}</td>
<td class={getCellClass(cell)}>
{isStrong(cell) ? (
<strong set:html={getCellContent(cell)} />
) : (
<span set:html={getCellContent(cell)} />
)}
</td>
))}
</tr>
))}
@@ -76,7 +113,7 @@ const {
caption-side: top;
text-align: center;
font-weight: 600;
color: #3b82f6;
color: #2c4a6b;
margin-bottom: 1rem;
font-size: 1.1rem;
}
@@ -90,13 +127,13 @@ const {
}
.glass-table th {
background: rgba(59, 130, 246, 0.1);
color: #1e40af;
background: rgba(91, 119, 142, 0.1);
color: #011a2d;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid rgba(59, 130, 246, 0.2);
border-bottom: 2px solid rgba(91, 119, 142, 0.3);
}
.glass-table td {
@@ -119,12 +156,12 @@ const {
}
.glass-table tbody tr:hover {
background: rgba(59, 130, 246, 0.08);
background: rgba(91, 119, 142, 0.1);
transform: scale(1.01);
}
.glass-table tbody tr:hover td {
color: #1e40af;
color: #011a2d;
}
/* 响应式设计 */
@@ -145,7 +182,19 @@ const {
}
}
/* 特殊单元格样式 */
/* 特殊单元格样式 - 莫兰蒂蓝色系 */
.glass-table .primary-cell {
background: rgba(91, 119, 142, 0.15);
color: #011a2d;
font-weight: 600;
}
.glass-table .success-cell {
background: rgba(91, 119, 142, 0.1);
color: #166534;
font-weight: 600;
}
.glass-table .highlight-cell {
background: rgba(34, 197, 94, 0.1);
color: #166534;

841
src/components/common/TOCSidebar.astro Normal file
View File

@@ -0,0 +1,841 @@
---
export interface Props {
title?: string;
toggleLabel?: string;
targetSelector?: string;
}
const {
title = '目录',
toggleLabel = '目录',
targetSelector = '[data-report-content]'
} = Astro.props;
const sidebarId = `toc-sidebar-${Math.random().toString(36).slice(2, 10)}`;
---
<!-- 侧边栏容器 -->
<aside id={sidebarId} class="toc-sidebar" data-toc-sidebar aria-hidden="false" data-target-selector={targetSelector}>
<!-- 切换按钮 -->
<button class="toc-toggle" type="button" aria-label={toggleLabel} data-toc-toggle>
<svg class="toc-toggle__icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 12h18M3 6h18M3 18h18"/>
</svg>
<span class="toc-toggle__label">{toggleLabel}</span>
</button>
<!-- 背景遮罩 (仅移动端) -->
<div class="toc-backdrop" data-toc-backdrop></div>
<!-- 侧边栏面板 -->
<div class="toc-panel" data-toc-panel>
<header class="toc-header">
<h3 class="toc-title">{title}</h3>
<button class="toc-close" type="button" aria-label="关闭目录" data-toc-close>
<svg viewBox="0 0 24 24" width="18" height="18">
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</header>
<nav class="toc-nav">
<ul class="toc-list" data-toc-list></ul>
</nav>
</div>
</aside>
<script is:inline define:vars={{ sidebarId, targetSelector }}>
// @ts-nocheck
// 变量由 Astro define:vars 注入: sidebarId, targetSelector
const __initTOC = () => {
const sidebar = document.getElementById(sidebarId);
if (!sidebar) return;
const tocList = sidebar.querySelector('[data-toc-list]');
const toggleBtn = sidebar.querySelector('[data-toc-toggle]');
const closeBtn = sidebar.querySelector('[data-toc-close]');
const backdrop = sidebar.querySelector('[data-toc-backdrop]');
const panel = sidebar.querySelector('[data-toc-panel]');
if (!tocList || !toggleBtn || !closeBtn || !backdrop || !panel) return;
// 响应式断点
const mediaQuery = window.matchMedia('(min-width: 1024px)');
// 生成ID的工具函数
const generateId = (text) => {
return text.toLowerCase()
.replace(/[\p{Extended_Pictographic}\u2600-\u27BF]/gu, '') // 移除emoji
.replace(/[^\w\u4e00-\u9fa5\s-]/g, '') // 保留文字、数字、中文、空格、连字符
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.replace(/^-+|-+$/g, '');
};
// 构建目录树
const buildTOC = () => {
const targetRoot = document.querySelector(targetSelector) || document.body;
const headings = Array.from(targetRoot.querySelectorAll('h2, h3, h4'))
.filter(h => h.textContent?.trim());
if (!headings.length) return;
// 为标题添加ID
const existingIds = new Set();
headings.forEach(heading => {
if (!heading.id) {
let baseId = generateId(heading.textContent.trim()) || 'section';
let finalId = baseId;
let counter = 1;
while (existingIds.has(finalId) || document.getElementById(finalId)) {
finalId = `${baseId}-${counter++}`;
}
heading.id = finalId;
existingIds.add(finalId);
} else {
existingIds.add(heading.id);
}
});
// 构建嵌套结构
const tocData = [];
const stack = [];
headings.forEach(heading => {
const level = parseInt(heading.tagName.charAt(1));
const text = heading.textContent.trim();
const id = heading.id;
const item = {
level,
text,
id,
children: []
};
// 找到合适的父级
while (stack.length > 0 && stack[stack.length - 1].level >= level) {
stack.pop();
}
if (stack.length === 0) {
tocData.push(item);
} else {
stack[stack.length - 1].children.push(item);
}
stack.push(item);
});
// 渲染TOC
renderTOC(tocData);
setupScrollSpy(headings);
};
// 渲染TOC HTML
const renderTOC = (items, isNested = false) => {
if (!items.length) return '';
const html = items.map(item => {
const hasChildren = item.children.length > 0;
const isCollapsed = item.level >= 4; // h4及以下默认折叠
return `
<li class="toc-item toc-item--level-${item.level}" data-level="${item.level}">
<div class="toc-item-content">
${hasChildren ?
`<button class="toc-expand" type="button" aria-expanded="${!isCollapsed}" data-expand>
<svg class="toc-expand-icon" viewBox="0 0 24 24" width="14" height="14">
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/>
</svg>
</button>` :
'<span class="toc-spacer"></span>'
}
<a href="#${item.id}" class="toc-link" data-target="${item.id}" data-level="${item.level}">
${item.text}
</a>
</div>
${hasChildren ?
`<ul class="toc-sublist ${isCollapsed ? 'toc-sublist--collapsed' : ''}">
${renderTOC(item.children, true)}
</ul>` : ''
}
</li>
`;
}).join('');
if (!isNested) {
tocList.innerHTML = html;
}
return html;
};
// 侧边栏状态管理 - 修复移动端问题
const setSidebarOpen = (isOpen) => {
sidebar.classList.toggle('toc-sidebar--open', isOpen);
sidebar.classList.toggle('toc-sidebar--closed', !isOpen);
sidebar.setAttribute('aria-hidden', String(!isOpen));
toggleBtn.setAttribute('aria-expanded', String(isOpen));
// 确保面板动画正确执行
if (!mediaQuery.matches) {
if (isOpen) {
panel.style.transform = 'translateY(0)';
requestAnimationFrame(() => {
panel.style.transform = 'translateY(0)';
});
} else {
panel.style.transform = 'translateY(100%)';
}
}
};
// 响应式处理
const handleMediaChange = () => {
if (mediaQuery.matches) {
// 桌面端：默认展开
setSidebarOpen(true);
sidebar.classList.add('toc-sidebar--desktop');
} else {
// 移动端：默认收起
setSidebarOpen(false);
sidebar.classList.remove('toc-sidebar--desktop');
}
};
// 事件监听 - 修复点击无效的问题
const handleToggleClick = (e) => {
e.preventDefault();
e.stopPropagation();
console.log('Toggle clicked'); // 调试用
const isOpen = sidebar.classList.contains('toc-sidebar--open');
setSidebarOpen(!isOpen);
};
const handleCloseClick = (e) => {
e.preventDefault();
e.stopPropagation();
console.log('Close clicked'); // 调试用
setSidebarOpen(false);
};
const handleBackdropClick = (e) => {
e.preventDefault();
e.stopPropagation();
setSidebarOpen(false);
};
// 强制重新绑定事件（移除可能存在的旧监听器）
const newToggleBtn = toggleBtn.cloneNode(true);
const newCloseBtn = closeBtn.cloneNode(true);
const newBackdrop = backdrop.cloneNode(true);
toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);
closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);
backdrop.parentNode.replaceChild(newBackdrop, backdrop);
// 重新获取元素并绑定事件
const currentToggleBtn = sidebar.querySelector('[data-toc-toggle]');
const currentCloseBtn = sidebar.querySelector('[data-toc-close]');
const currentBackdrop = sidebar.querySelector('[data-toc-backdrop]');
currentToggleBtn.addEventListener('click', handleToggleClick, { passive: false });
currentCloseBtn.addEventListener('click', handleCloseClick, { passive: false });
currentBackdrop.addEventListener('click', handleBackdropClick, { passive: false });
// 折叠/展开处理
tocList.addEventListener('click', (e) => {
const expandBtn = e.target.closest('[data-expand]');
if (expandBtn) {
e.preventDefault();
const sublist = expandBtn.closest('.toc-item').querySelector('.toc-sublist');
if (sublist) {
const isCollapsed = sublist.classList.contains('toc-sublist--collapsed');
sublist.classList.toggle('toc-sublist--collapsed', !isCollapsed);
expandBtn.setAttribute('aria-expanded', String(isCollapsed));
}
return;
}
const link = e.target.closest('.toc-link');
if (link) {
e.preventDefault();
const targetId = link.getAttribute('data-target');
const target = targetId ? document.getElementById(targetId) : null;
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
history.replaceState(null, '', `#${targetId}`);
}
// 移动端点击后关闭侧边栏
if (!mediaQuery.matches) {
setSidebarOpen(false);
}
}
});
// 滚动高亮
let activeLink = null;
const setActiveLink = (id) => {
if (activeLink) {
activeLink.classList.remove('toc-link--active');
}
// 修复：使用正确的属性选择器
const newActiveLink = tocList.querySelector(`[data-target="${id}"]`);
if (newActiveLink) {
newActiveLink.classList.add('toc-link--active');
activeLink = newActiveLink;
// 自动展开父级
let parent = newActiveLink.closest('.toc-sublist');
while (parent) {
parent.classList.remove('toc-sublist--collapsed');
const expandBtn = parent.previousElementSibling?.querySelector('[data-expand]');
if (expandBtn) {
expandBtn.setAttribute('aria-expanded', 'true');
}
parent = parent.closest('.toc-item')?.parentElement?.closest('.toc-sublist');
}
}
};
const setupScrollSpy = (headings) => {
const observer = new IntersectionObserver((entries) => {
const visibleEntries = entries
.filter(entry => entry.isIntersecting)
.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
if (visibleEntries.length > 0) {
setActiveLink(visibleEntries[0].target.id);
}
}, {
rootMargin: '-20% 0px -70% 0px',
threshold: [0, 0.25, 0.5, 0.75, 1]
});
headings.forEach(heading => observer.observe(heading));
};
// 键盘事件
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('toc-sidebar--open')) {
setSidebarOpen(false);
}
});
// 初始化
buildTOC();
mediaQuery.addEventListener('change', handleMediaChange);
handleMediaChange();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', __initTOC, { once: true });
} else {
__initTOC();
}
// Astro 过渡后重新初始化
document.addEventListener('astro:after-swap', () => {
__initTOC();
});
</script>
<style>
/* 基础布局 */
.toc-sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 50;
pointer-events: none;
/* 底部安全距离（同时考虑安全区域） */
--toc-safe-bottom: clamp(12px, 2vh, 24px);
--toc-safe-area-bottom: env(safe-area-inset-bottom, 16px);
}
.toc-sidebar--open {
pointer-events: auto;
}
/* 切换按钮 */
.toc-toggle {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 2rem;
background: rgba(248, 250, 255, 0.18);
backdrop-filter: blur(30px) saturate(150%);
border: 1px solid rgba(148, 163, 184, 0.28);
color: #011a2d;
font-weight: 600;
cursor: pointer;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
z-index: 60;
}
.toc-toggle::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
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;
pointer-events: none;
}
.toc-toggle:hover {
transform: translateY(-2px);
background: rgba(248, 250, 255, 0.25);
border-color: rgba(148, 163, 184, 0.35);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}
.toc-toggle__icon {
width: 20px;
height: 20px;
stroke-width: 2;
}
.toc-toggle__label {
font-size: 0.875rem;
}
/* 背景遮罩 */
.toc-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
}
.toc-sidebar--open .toc-backdrop {
opacity: 1;
visibility: visible;
}
/* 侧边栏面板 */
.toc-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 80vh;
background: linear-gradient(135deg,
rgba(174, 206, 221, 0.16),
rgba(177, 217, 212, 0.12),
rgba(178, 197, 213, 0.12)
);
backdrop-filter: blur(16px) saturate(130%);
border: 1px solid rgba(91, 119, 142, 0.28);
/* 显示底部边框，并通过 bottom 安全距离与屏幕底部留白 */
border-bottom: 1px solid rgba(91, 119, 142, 0.28);
border-radius: 1.5rem 1.5rem 0 0;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
transform: translateY(100%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 20;
}
.toc-panel::before {
content: '';
position: absolute;
inset: 0;
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;
pointer-events: none;
border-radius: inherit;
}
.toc-sidebar--open .toc-panel {
transform: translateY(0);
bottom: calc(var(--toc-safe-bottom) + var(--toc-safe-area-bottom));
}
.toc-panel:hover {
background: linear-gradient(135deg,
rgba(174, 206, 221, 0.2),
rgba(177, 217, 212, 0.16),
rgba(178, 197, 213, 0.16)
);
border-color: rgba(91, 119, 142, 0.35);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
}
/* 面板头部 */
.toc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1.5rem 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
position: relative;
}
.toc-title {
font-size: 1.125rem;
font-weight: 700;
margin: 0;
color: #011a2d;
}
.toc-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 50%;
background: rgba(248, 250, 255, 0.15);
backdrop-filter: blur(20px) saturate(120%);
color: #011a2d;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.toc-close::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%);
opacity: 0.6;
pointer-events: none;
}
.toc-close:hover {
background: rgba(248, 250, 255, 0.25);
border-color: rgba(148, 163, 184, 0.35);
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}
.toc-close svg {
width: 18px;
height: 18px;
}
/* 导航区域 */
.toc-nav {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem 1.5rem;
position: relative;
}
.toc-nav::-webkit-scrollbar {
width: 6px;
}
.toc-nav::-webkit-scrollbar-track {
background: rgba(148, 163, 184, 0.1);
border-radius: 3px;
}
.toc-nav::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border-radius: 3px;
}
.toc-nav::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.4);
}
/* 目录列表 */
.toc-list,
.toc-sublist {
list-style: none;
margin: 0;
padding: 0;
}
.toc-sublist {
margin-left: 1rem;
margin-top: 0.25rem;
overflow: hidden;
transition: all 0.3s ease;
}
.toc-sublist--collapsed {
max-height: 0;
margin-top: 0;
}
/* 目录项 */
.toc-item {
margin-bottom: 0.125rem;
}
.toc-item-content {
display: flex;
align-items: center;
gap: 0.5rem;
}
.toc-expand {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 0.25rem;
flex-shrink: 0;
}
.toc-expand:hover {
background: rgba(255, 255, 255, 0.1);
color: #011a2d;
}
.toc-expand[aria-expanded="true"] .toc-expand-icon {
transform: rotate(90deg);
}
.toc-expand-icon {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.toc-spacer {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
/* 目录链接 */
.toc-link {
flex: 1;
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
/* 根据层级设置样式 */
.toc-item--level-2 .toc-link {
font-size: 0.95rem;
font-weight: 600;
color: #011a2d;
}
.toc-item--level-3 .toc-link {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.toc-item--level-4 .toc-link {
font-size: 0.8rem;
font-weight: 400;
color: #6b7280;
}
.toc-link:hover {
background: rgba(59, 130, 246, 0.1);
border-left-color: rgba(59, 130, 246, 0.5);
transform: translateX(2px);
}
.toc-link--active {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.1));
border-left-color: #3b82f6;
color: #1d4ed8 !important;
font-weight: 600 !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
/* 桌面端样式 */
@media (min-width: 1024px) {
.toc-sidebar {
--toc-width: clamp(280px, 20vw, 300px);
--container-max-width: 1200px;
--container-padding: 1rem;
--toc-offset: calc(max(var(--container-padding), (100vw - var(--container-max-width)) / 2) - var(--toc-width) - 1.5rem);
position: fixed;
top: 6rem;
left: clamp(1rem, var(--toc-offset), 2rem);
width: var(--toc-width);
height: calc(100vh - 7rem - var(--toc-safe-bottom) - var(--toc-safe-area-bottom));
pointer-events: auto;
z-index: 30;
}
.toc-sidebar--desktop {
pointer-events: auto;
}
.toc-toggle {
position: static;
bottom: auto;
right: auto;
width: 100%;
justify-content: center;
margin-bottom: 1rem;
/* 更柔和的按钮玻璃态，贴合主题 */
background: rgba(174, 206, 221, 0.16);
backdrop-filter: blur(14px) saturate(130%);
border: 1px solid rgba(91, 119, 142, 0.28);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.toc-backdrop {
display: none;
}
.toc-panel {
position: static;
bottom: auto;
left: auto;
right: auto;
width: 100%;
max-height: calc(100vh - 8rem);
height: auto;
min-height: 60vh;
border-radius: 1.25rem;
/* Morandi 主题的轻玻璃渐变，避免偏白 */
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px) saturate(120%);
border: 1px solid rgba(91, 119, 142, 0.25);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
/* 默认展开，避免脚本未初始化时看不到侧边栏 */
transform: translateX(0);
opacity: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: flex;
flex-direction: column;
/* 桌面端：面板底部与屏幕边缘保留安全距离 */
margin-bottom: calc(var(--toc-safe-bottom) + var(--toc-safe-area-bottom));
}
/* 移除过强的前景叠加，保持更纯净的玻璃质感 */
.toc-panel::before { display: none; }
/* 如果脚本需要关闭，则通过添加此类实现 */
.toc-sidebar--closed .toc-panel {
transform: translateX(-100%);
opacity: 0;
}
.toc-header {
padding: 1.25rem 1.25rem 1rem;
border-bottom: 1px solid rgba(91, 119, 142, 0.25);
}
.toc-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0.75rem 1rem 1rem;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.toc-nav::-webkit-scrollbar {
width: 6px;
}
.toc-nav::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.3);
border-radius: 3px;
}
.toc-nav::-webkit-scrollbar-thumb:hover {
background-color: rgba(148, 163, 184, 0.5);
}
.toc-header {
padding: 1.25rem 1.25rem 1rem;
border-bottom: 1px solid rgba(91, 119, 142, 0.25);
flex-shrink: 0;
}
/* 桌面端的紧凑间距 */
.toc-item {
margin-bottom: 0.0625rem;
}
.toc-link {
padding: 0.375rem 0.75rem;
}
.toc-item--level-2 .toc-link {
font-size: 0.9rem;
}
.toc-item--level-3 .toc-link {
font-size: 0.8rem;
}
.toc-item--level-4 .toc-link {
font-size: 0.75rem;
}
}
/* 无障碍和动画偏好 */
@media (prefers-reduced-motion: reduce) {
.toc-panel,
.toc-toggle,
.toc-backdrop,
.toc-link,
.toc-sublist,
.toc-expand-icon {
transition: none !important;
}
}
/* 高对比度模式支持 */
@media (prefers-contrast: high) {
.toc-panel {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(0, 0, 0, 0.3);
}
.toc-link {
color: #000;
}
.toc-link--active {
background: #0066cc;
color: #fff !important;
}
}
</style>

99
src/components/report/ReportSidebar.astro
View File

@@ -185,14 +185,39 @@ const script = document.currentScript;
const setCollapsed = (collapsed) => {
sidebar.classList.toggle('collapsed', collapsed);
toggleBtn.setAttribute('aria-expanded', String(!collapsed));
// 在移动端确保面板正确显示/隐藏
if (!matchBreakpoint.matches) {
const panel = sidebar.querySelector('.report-sidebar__panel');
if (panel) {
if (collapsed) {
panel.style.transform = 'translateY(100%)';
} else {
panel.style.transform = 'translateY(0)';
}
}
}
};
const handleToggle = () => {
const handleToggle = (e) => {
e.preventDefault();
e.stopPropagation();
setCollapsed(!sidebar.classList.contains('collapsed'));
};
toggleBtn.addEventListener('click', handleToggle);
closeBtn.addEventListener('click', () => setCollapsed(true));
const handleClose = (e) => {
e.preventDefault();
e.stopPropagation();
setCollapsed(true);
};
// 确保移除旧的事件监听器
toggleBtn.removeEventListener('click', handleToggle);
closeBtn.removeEventListener('click', handleClose);
// 添加新的事件监听器
toggleBtn.addEventListener('click', handleToggle, { passive: false });
closeBtn.addEventListener('click', handleClose, { passive: false });
const handleLinkClick = (event) => {
const link = event.target.closest('.nav-link');
@@ -217,6 +242,24 @@ const script = document.currentScript;
matchBreakpoint.addEventListener('change', applyBreakpointState);
// 添加键盘事件支持
const handleKeyDown = (e) => {
if (e.key === 'Escape' && !sidebar.classList.contains('collapsed')) {
setCollapsed(true);
}
};
document.addEventListener('keydown', handleKeyDown);
// 添加背景点击关闭（移动端）
const handleBackdropClick = (e) => {
if (!matchBreakpoint.matches && e.target === sidebar && !sidebar.classList.contains('collapsed')) {
setCollapsed(true);
}
};
sidebar.addEventListener('click', handleBackdropClick);
let activeLink = null;
let observer = null;
@@ -344,14 +387,17 @@ const script = document.currentScript;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding: 1.25rem 1.25rem 1rem;
border-bottom: 1px solid rgba(91, 119, 142, 0.25);
margin-bottom: 0;
flex-shrink: 0;
}
.report-sidebar__title {
font-size: 1.125rem;
font-weight: 700;
margin: 0;
color: #0f172a;
color: #011a2d;
}
.report-sidebar__close {
@@ -433,14 +479,17 @@ const script = document.currentScript;
@media (min-width: 1280px) {
.report-sidebar {
--sidebar-width: var(--report-sidebar-width, clamp(260px, 22vw, 320px));
--sidebar-inline-offset: clamp(1rem, 2.5vw, 3rem);
--sidebar-width: var(--report-sidebar-width, clamp(280px, 20vw, 300px));
--container-max-width: 1200px;
--container-padding: 1rem;
--sidebar-offset: calc(max(var(--container-padding), (100vw - var(--container-max-width)) / 2) - var(--sidebar-width) - 1.5rem);
position: fixed;
top: 6rem;
left: calc(env(safe-area-inset-left) + var(--sidebar-inline-offset));
left: clamp(1rem, var(--sidebar-offset), 2rem);
height: calc(100vh - 7rem);
align-items: stretch;
gap: 1rem;
z-index: 30;
}
.report-sidebar__toggle {
@@ -452,17 +501,39 @@ const script = document.currentScript;
position: relative;
top: auto;
width: var(--sidebar-width);
max-height: 100%;
height: 100%;
max-height: calc(100vh - 8rem);
height: auto;
min-height: 60vh;
overflow: hidden;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px) saturate(120%);
border: 1px solid rgba(91, 119, 142, 0.25);
border-radius: 1.25rem;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.report-sidebar__nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0.75rem 1rem 1rem;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}
.report-sidebar__nav::-webkit-scrollbar {
width: 6px;
}
.report-sidebar__nav::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.3);
border-radius: 3px;
}
.report-sidebar__nav::-webkit-scrollbar-thumb:hover {
background-color: rgba(148, 163, 184, 0.5);
}
.collapsed .report-sidebar__panel {
@@ -481,6 +552,14 @@ const script = document.currentScript;
z-index: 55;
}
/* 在中等屏幕上调整按钮大小 */
@media (min-width: 768px) and (max-width: 1279px) {
.report-sidebar__toggle {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
}
.report-sidebar__toggle {
background: rgba(15, 23, 42, 0.8);
color: #f8fafc;