initial commit
This commit is contained in:
Jiao77
233
src/components/AnimatedElement.astro
Normal file
233
src/components/AnimatedElement.astro
Normal file
@@ -0,0 +1,233 @@
|
||||
---
|
||||
export interface Props {
|
||||
animation?: 'fadeIn' | 'fadeInUp' | 'fadeInDown' | 'slideInLeft' | 'slideInRight' | 'scaleIn' | 'rotateIn' | 'bounceIn';
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
|
||||
trigger?: 'load' | 'scroll' | 'hover' | 'click';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
animation = 'fadeIn',
|
||||
delay = 0,
|
||||
duration = 600,
|
||||
easing = 'ease-out',
|
||||
trigger = 'load',
|
||||
className = ''
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class={`animate-wrapper ${className}`}
|
||||
data-animation={animation}
|
||||
data-trigger={trigger}
|
||||
style={`--delay: ${delay}ms; --duration: ${duration}ms; --easing: ${easing};`}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.animate-wrapper {
|
||||
animation-duration: var(--duration);
|
||||
animation-timing-function: var(--easing);
|
||||
animation-delay: var(--delay);
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
/* 初始状态 */
|
||||
.animate-wrapper[data-trigger="scroll"] {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.animate-wrapper[data-trigger="hover"] {
|
||||
transition: all var(--duration) var(--easing);
|
||||
}
|
||||
|
||||
/* 动画定义 */
|
||||
.animate-wrapper[data-animation="fadeIn"] {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="fadeInUp"] {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="fadeInDown"] {
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="slideInLeft"] {
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="slideInRight"] {
|
||||
animation-name: slideInRight;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="scaleIn"] {
|
||||
animation-name: scaleIn;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="rotateIn"] {
|
||||
animation-name: rotateIn;
|
||||
}
|
||||
|
||||
.animate-wrapper[data-animation="bounceIn"] {
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
|
||||
/* 触发状态 */
|
||||
.animate-wrapper.animate-visible {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
/* 关键帧动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotate(-200deg) scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬浮效果 */
|
||||
.animate-wrapper[data-trigger="hover"]:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
}
|
||||
|
||||
/* 减少动画在移动设备上的使用 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-wrapper {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 滚动触发动画
|
||||
function initScrollAnimations() {
|
||||
const animateElements = document.querySelectorAll('[data-trigger="scroll"]');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-visible');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
animateElements.forEach(element => {
|
||||
observer.observe(element);
|
||||
});
|
||||
}
|
||||
|
||||
// 点击触发动画
|
||||
function initClickAnimations() {
|
||||
const clickElements = document.querySelectorAll('[data-trigger="click"]');
|
||||
|
||||
clickElements.forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
element.classList.toggle('animate-visible');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initScrollAnimations();
|
||||
initClickAnimations();
|
||||
});
|
||||
</script>
|
||||
209
src/components/Container.astro
Normal file
209
src/components/Container.astro
Normal file
@@ -0,0 +1,209 @@
|
||||
---
|
||||
export interface Props {
|
||||
variant?: 'glass' | 'glass-dark' | 'solid' | 'outline';
|
||||
size?: 'small' | 'medium' | 'large' | 'full';
|
||||
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
|
||||
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
animated?: boolean;
|
||||
hover?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
variant = 'glass',
|
||||
size = 'medium',
|
||||
rounded = 'xl',
|
||||
padding = 'md',
|
||||
shadow = 'md',
|
||||
animated = true,
|
||||
hover = false,
|
||||
className = ''
|
||||
} = Astro.props;
|
||||
|
||||
const variantClasses = {
|
||||
glass: 'container-glass',
|
||||
'glass-dark': 'container-glass-dark',
|
||||
solid: 'container-solid',
|
||||
outline: 'container-outline'
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'container-small',
|
||||
medium: 'container-medium',
|
||||
large: 'container-large',
|
||||
full: 'container-full'
|
||||
};
|
||||
|
||||
const roundedClasses = {
|
||||
none: 'rounded-none',
|
||||
sm: 'rounded-sm',
|
||||
md: 'rounded-md',
|
||||
lg: 'rounded-lg',
|
||||
xl: 'rounded-xl',
|
||||
'2xl': 'rounded-2xl',
|
||||
'3xl': 'rounded-3xl',
|
||||
full: 'rounded-full'
|
||||
};
|
||||
|
||||
const paddingClasses = {
|
||||
none: 'p-0',
|
||||
sm: 'p-3',
|
||||
md: 'p-4 md:p-6',
|
||||
lg: 'p-6 md:p-8',
|
||||
xl: 'p-8 md:p-10',
|
||||
'2xl': 'p-10 md:p-12'
|
||||
};
|
||||
|
||||
const shadowClasses = {
|
||||
none: 'shadow-none',
|
||||
sm: 'shadow-sm',
|
||||
md: 'shadow-md',
|
||||
lg: 'shadow-lg',
|
||||
xl: 'shadow-xl',
|
||||
'2xl': 'shadow-2xl'
|
||||
};
|
||||
---
|
||||
|
||||
<div
|
||||
class={`
|
||||
container-base
|
||||
${variantClasses[variant]}
|
||||
${sizeClasses[size]}
|
||||
${roundedClasses[rounded]}
|
||||
${paddingClasses[padding]}
|
||||
${shadowClasses[shadow]}
|
||||
${animated ? 'container-animated' : ''}
|
||||
${hover ? 'container-hover' : ''}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container-base {
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 变体样式 */
|
||||
.container-glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.container-glass-dark {
|
||||
background: rgba(122, 107, 93, 0.15);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(166, 139, 123, 0.25);
|
||||
}
|
||||
|
||||
.container-solid {
|
||||
background: #F4F1E8;
|
||||
border: 1px solid #E8DCC0;
|
||||
}
|
||||
|
||||
.container-outline {
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 尺寸样式 */
|
||||
.container-small {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container-medium {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container-large {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.container-animated {
|
||||
animation: containerFadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.container-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.container-glass.container-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.container-glass-dark.container-hover:hover {
|
||||
background: rgba(122, 107, 93, 0.25);
|
||||
border-color: rgba(166, 139, 123, 0.35);
|
||||
}
|
||||
|
||||
.container-outline.container-hover:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.container-small,
|
||||
.container-medium,
|
||||
.container-large {
|
||||
max-width: 100%;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes containerFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 实用工具类 */
|
||||
.p-0 { padding: 0 !important; }
|
||||
.p-3 { padding: 0.75rem !important; }
|
||||
.p-4 { padding: 1rem !important; }
|
||||
.p-6 { padding: 1.5rem !important; }
|
||||
.p-8 { padding: 2rem !important; }
|
||||
.p-10 { padding: 2.5rem !important; }
|
||||
.p-12 { padding: 3rem !important; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:p-6 { padding: 1.5rem !important; }
|
||||
.md\:p-8 { padding: 2rem !important; }
|
||||
.md\:p-10 { padding: 2.5rem !important; }
|
||||
.md\:p-12 { padding: 3rem !important; }
|
||||
}
|
||||
|
||||
.rounded-none { border-radius: 0 !important; }
|
||||
.rounded-sm { border-radius: 0.125rem !important; }
|
||||
.rounded-md { border-radius: 0.375rem !important; }
|
||||
.rounded-lg { border-radius: 0.5rem !important; }
|
||||
.rounded-xl { border-radius: 0.75rem !important; }
|
||||
.rounded-2xl { border-radius: 1rem !important; }
|
||||
.rounded-3xl { border-radius: 1.5rem !important; }
|
||||
.rounded-full { border-radius: 9999px !important; }
|
||||
|
||||
.shadow-none { box-shadow: none !important; }
|
||||
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
|
||||
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
|
||||
</style>
|
||||
211
src/components/Footer.astro
Normal file
211
src/components/Footer.astro
Normal file
@@ -0,0 +1,211 @@
|
||||
---
|
||||
export interface Props {
|
||||
showSocialLinks?: boolean;
|
||||
customLinks?: Array<{ label: string; href: string; icon?: string }>;
|
||||
}
|
||||
|
||||
const {
|
||||
showSocialLinks = true,
|
||||
customLinks = []
|
||||
} = Astro.props;
|
||||
|
||||
const socialLinks = [
|
||||
{ label: "Email", href: "mailto:jiaotiansheng@outlook.com", icon: "fas fa-envelope" }
|
||||
];
|
||||
---
|
||||
|
||||
<footer class="footer-container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-main">
|
||||
<div class="footer-brand">
|
||||
<h3 class="brand-title">Jiao77</h3>
|
||||
<p class="brand-description">简约美观的现代化网站体验</p>
|
||||
</div>
|
||||
|
||||
{customLinks.length > 0 && (
|
||||
<div class="footer-links">
|
||||
<h4 class="links-title">快速链接</h4>
|
||||
<ul class="links-list">
|
||||
{customLinks.map(link => (
|
||||
<li>
|
||||
<a href={link.href} class="footer-link">
|
||||
{link.icon && <i class={link.icon}></i>}
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSocialLinks && (
|
||||
<div class="footer-social">
|
||||
<h4 class="social-title">联系方式</h4>
|
||||
<div class="social-links">
|
||||
{socialLinks.map(social => (
|
||||
<a href={social.href} class="social-link" title={social.label}>
|
||||
<i class={social.icon}></i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-divider"></div>
|
||||
<div class="footer-info">
|
||||
<p class="copyright">© 2024 Jiao77. All rights reserved.</p>
|
||||
<p class="built-with">Built with <i class="fas fa-heart text-red-400"></i> and Astro</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-brand .brand-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.footer-brand .brand-description {
|
||||
color: #2c4a6b;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.links-title,
|
||||
.social-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.links-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #2c4a6b;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #011a2d;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
color: #2c4a6b;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #011a2d;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
color: #2c4a6b;
|
||||
}
|
||||
|
||||
.copyright,
|
||||
.built-with {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.built-with i {
|
||||
color: #e74c3c;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
</style>
|
||||
198
src/components/Header.astro
Normal file
198
src/components/Header.astro
Normal file
@@ -0,0 +1,198 @@
|
||||
---
|
||||
export interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
navigationItems?: Array<{ label: string; href: string; icon?: string }>;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title = 'Jiao77 - AI & Technology Explorer'
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<header class="header-container">
|
||||
<!-- 收缩状态的页眉 -->
|
||||
<div class="header-collapsed" id="header-collapsed">
|
||||
<div class="header-content">
|
||||
<div class="header-brand">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header-container {
|
||||
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;
|
||||
transform: translateY(0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.header-expanded.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.header-collapsed.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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-item:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.expand-button:hover,
|
||||
.collapse-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navigation {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import '../scripts/header.ts';
|
||||
</script>
|
||||
320
src/components/common/CodeBlock.astro
Normal file
320
src/components/common/CodeBlock.astro
Normal file
@@ -0,0 +1,320 @@
|
||||
---
|
||||
export interface Props {
|
||||
code: string;
|
||||
language?: string;
|
||||
title?: string;
|
||||
showLineNumbers?: boolean;
|
||||
className?: string;
|
||||
copyable?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
code,
|
||||
language = 'javascript',
|
||||
title,
|
||||
showLineNumbers = false,
|
||||
className = '',
|
||||
copyable = true
|
||||
} = Astro.props;
|
||||
|
||||
// 生成唯一ID
|
||||
const codeId = `code-${Math.random().toString(36).substring(2, 11)}`;
|
||||
---
|
||||
|
||||
<div class={`glass-code-block ${className}`}>
|
||||
{title && (
|
||||
<div class="code-header">
|
||||
<span class="code-title">{title}</span>
|
||||
<span class="code-language">{language}</span>
|
||||
{copyable && (
|
||||
<button class="copy-btn" data-code-id={codeId} title="复制代码">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div class="code-content">
|
||||
<pre class={`language-${language} ${showLineNumbers ? 'line-numbers' : ''}`}><code id={codeId} class={`language-${language}`}>{code}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 动态加载 Prism.js
|
||||
function loadPrism() {
|
||||
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
|
||||
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';
|
||||
document.head.appendChild(lineNumbersCss);
|
||||
|
||||
// 加载核心 JS
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js';
|
||||
script.onload = () => {
|
||||
// 加载自动加载插件
|
||||
const autoloaderScript = document.createElement('script');
|
||||
autoloaderScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js';
|
||||
autoloaderScript.onload = () => {
|
||||
// 加载行号插件
|
||||
const lineNumbersScript = document.createElement('script');
|
||||
lineNumbersScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js';
|
||||
lineNumbersScript.onload = () => resolve();
|
||||
lineNumbersScript.onerror = reject;
|
||||
document.head.appendChild(lineNumbersScript);
|
||||
};
|
||||
autoloaderScript.onerror = reject;
|
||||
document.head.appendChild(autoloaderScript);
|
||||
};
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
// 高亮代码
|
||||
function highlightCode() {
|
||||
loadPrism().then(() => {
|
||||
const prism = (window as any).Prism;
|
||||
if (prism && prism.highlightAll) {
|
||||
prism.highlightAll();
|
||||
}
|
||||
}).catch(error => {
|
||||
console.warn('Failed to load Prism.js:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 复制代码功能
|
||||
function initCopyButtons() {
|
||||
document.querySelectorAll('.copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async function(this: HTMLElement) {
|
||||
const codeId = this.getAttribute('data-code-id');
|
||||
const codeElement = document.getElementById(codeId || '');
|
||||
if (!codeElement) return;
|
||||
|
||||
const code = codeElement.textContent || '';
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
const icon = this.querySelector('i') as HTMLElement;
|
||||
const originalClass = icon.className;
|
||||
icon.className = 'fas fa-check';
|
||||
this.style.color = '#22c55e';
|
||||
|
||||
setTimeout(() => {
|
||||
icon.className = originalClass;
|
||||
this.style.color = '';
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.warn('Failed to copy code:', err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
highlightCode();
|
||||
initCopyButtons();
|
||||
});
|
||||
} else {
|
||||
highlightCode();
|
||||
initCopyButtons();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.glass-code-block {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Maple Mono NF CN', 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.glass-code-block:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.code-title {
|
||||
font-weight: 600;
|
||||
color: #1e40af;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.code-language {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #3b82f6;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.code-content {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.code-content pre {
|
||||
margin: 0;
|
||||
padding: 1.5rem 1.5rem 1.5rem 3.5rem;
|
||||
background: transparent !important;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.code-content code {
|
||||
background: transparent !important;
|
||||
color: #334155 !important;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* 覆盖 Prism 默认样式 */
|
||||
.code-content pre[class*="language-"] {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* 行号样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
/* 语法高亮颜色调整 */
|
||||
.code-content .token.comment,
|
||||
.code-content .token.prolog,
|
||||
.code-content .token.doctype,
|
||||
.code-content .token.cdata {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
.code-content .token.punctuation {
|
||||
color: #475569 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.code-content .token.operator,
|
||||
.code-content .token.entity,
|
||||
.code-content .token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
|
||||
.code-content .token.atrule,
|
||||
.code-content .token.attr-value,
|
||||
.code-content .token.keyword {
|
||||
color: #7c3aed !important;
|
||||
}
|
||||
|
||||
.code-content .token.function,
|
||||
.code-content .token.class-name {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.code-header {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.code-content pre {
|
||||
padding: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 0.375rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.code-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
</style>
|
||||
166
src/components/common/GlassTable.astro
Normal file
166
src/components/common/GlassTable.astro
Normal file
@@ -0,0 +1,166 @@
|
||||
---
|
||||
export interface Props {
|
||||
headers?: string[];
|
||||
rows?: (string | number | boolean)[][];
|
||||
caption?: string;
|
||||
className?: string;
|
||||
striped?: boolean;
|
||||
bordered?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
headers = [],
|
||||
rows = [],
|
||||
caption,
|
||||
className = '',
|
||||
striped = false,
|
||||
bordered = true
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`glass-table-container ${className}`}>
|
||||
<table class={`glass-table ${striped ? 'striped' : ''} ${bordered ? 'bordered' : ''}`}>
|
||||
{caption && (
|
||||
<caption class="table-caption">{caption}</caption>
|
||||
)}
|
||||
{headers.length > 0 && (
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map(header => (
|
||||
<th>{header}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
)}
|
||||
<tbody>
|
||||
{rows.map(row => (
|
||||
<tr>
|
||||
{row.map(cell => (
|
||||
<td>{cell}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.glass-table-container {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-table-container:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.glass-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.table-caption {
|
||||
caption-side: top;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.glass-table th,
|
||||
.glass-table td {
|
||||
padding: 0.875rem 1rem;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glass-table th {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #1e40af;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 2px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.glass-table td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-table.bordered th,
|
||||
.glass-table.bordered td {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.glass-table.bordered th:last-child,
|
||||
.glass-table.bordered td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.glass-table.striped tbody tr:nth-child(odd) {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.glass-table tbody tr:hover {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.glass-table tbody tr:hover td {
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.glass-table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.glass-table {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.glass-table th,
|
||||
.glass-table td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 特殊单元格样式 */
|
||||
.glass-table .highlight-cell {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #166534;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.glass-table .warning-cell {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #92400e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.glass-table .error-cell {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #991b1b;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
105
src/components/common/MathFormula.astro
Normal file
105
src/components/common/MathFormula.astro
Normal file
@@ -0,0 +1,105 @@
|
||||
---
|
||||
export interface Props {
|
||||
formula: string;
|
||||
display?: boolean; // true for block display, false for inline
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const { formula, display = false, className = '' } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`math-formula ${display ? 'display-math' : 'inline-math'} ${className}`}>
|
||||
<span class="katex-formula" data-formula={formula}>{formula}</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 动态加载 KaTeX
|
||||
function loadKaTeX() {
|
||||
if ((window as any).katex) return Promise.resolve();
|
||||
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css';
|
||||
document.head.appendChild(link);
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js';
|
||||
script.onload = () => {
|
||||
const autoRenderScript = document.createElement('script');
|
||||
autoRenderScript.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js';
|
||||
autoRenderScript.onload = () => resolve();
|
||||
autoRenderScript.onerror = reject;
|
||||
document.head.appendChild(autoRenderScript);
|
||||
};
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染数学公式
|
||||
function renderMath() {
|
||||
loadKaTeX().then(() => {
|
||||
const formulas = document.querySelectorAll('.katex-formula');
|
||||
formulas.forEach((formula) => {
|
||||
const text = formula.getAttribute('data-formula') || formula.textContent;
|
||||
const isDisplay = formula.closest('.display-math');
|
||||
|
||||
try {
|
||||
(window as any).katex.render(text, formula, {
|
||||
throwOnError: false,
|
||||
displayMode: !!isDisplay
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('KaTeX rendering error:', error);
|
||||
(formula as HTMLElement).textContent = text || '';
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
console.warn('Failed to load KaTeX:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载完成后渲染
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', renderMath);
|
||||
} else {
|
||||
renderMath();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.math-formula {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.inline-math {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.display-math {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.math-formula:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.katex-formula {
|
||||
color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
227
src/components/navigation/NavigationCard.astro
Normal file
227
src/components/navigation/NavigationCard.astro
Normal file
@@ -0,0 +1,227 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
href: string;
|
||||
icon?: string;
|
||||
color?: 'primary' | 'secondary' | 'accent';
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
href,
|
||||
icon,
|
||||
color = 'primary',
|
||||
size = 'medium'
|
||||
} = Astro.props;
|
||||
|
||||
// 判断是否为外部链接
|
||||
const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
|
||||
const linkTarget = isExternalLink ? '_blank' : undefined;
|
||||
const linkRel = isExternalLink ? 'noopener noreferrer' : undefined;
|
||||
|
||||
const colorClasses = {
|
||||
primary: 'nav-card-primary',
|
||||
secondary: 'nav-card-secondary',
|
||||
accent: 'nav-card-accent'
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'nav-card-small',
|
||||
medium: 'nav-card-medium',
|
||||
large: 'nav-card-large'
|
||||
};
|
||||
---
|
||||
|
||||
<a href={href} target={linkTarget} rel={linkRel} class={`nav-card ${colorClasses[color]} ${sizeClasses[size]}`}>
|
||||
<div class="nav-card-content">
|
||||
{icon && (
|
||||
<div class="nav-card-icon">
|
||||
<i class={icon}></i>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3 class="nav-card-title">{title}</h3>
|
||||
|
||||
{description && (
|
||||
<p class="nav-card-description">{description}</p>
|
||||
)}
|
||||
|
||||
<div class="nav-card-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card-glow"></div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.nav-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
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;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nav-card-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-card-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #5b778e;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-card:hover .nav-card-icon {
|
||||
color: #011a2d;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.nav-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-card-description {
|
||||
font-size: 0.875rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.5;
|
||||
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-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-card:hover .nav-card-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 尺寸变体 */
|
||||
.nav-card-small {
|
||||
min-height: 150px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-card-small .nav-card-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.nav-card-small .nav-card-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.nav-card-medium {
|
||||
min-height: 200px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.nav-card-large {
|
||||
min-height: 280px;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.nav-card-large .nav-card-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.nav-card-large .nav-card-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* 颜色变体 */
|
||||
.nav-card-primary {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
border-color: rgba(91, 119, 142, 0.2);
|
||||
}
|
||||
|
||||
.nav-card-primary:hover {
|
||||
background: rgba(91, 119, 142, 0.15);
|
||||
border-color: rgba(91, 119, 142, 0.3);
|
||||
}
|
||||
|
||||
.nav-card-secondary {
|
||||
background: rgba(178, 197, 213, 0.1);
|
||||
border-color: rgba(178, 197, 213, 0.2);
|
||||
}
|
||||
|
||||
.nav-card-secondary:hover {
|
||||
background: rgba(178, 197, 213, 0.15);
|
||||
border-color: rgba(178, 197, 213, 0.3);
|
||||
}
|
||||
|
||||
.nav-card-accent {
|
||||
background: rgba(177, 217, 212, 0.1);
|
||||
border-color: rgba(177, 217, 212, 0.2);
|
||||
}
|
||||
|
||||
.nav-card-accent:hover {
|
||||
background: rgba(177, 217, 212, 0.15);
|
||||
border-color: rgba(177, 217, 212, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-card {
|
||||
padding: 1.5rem;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.nav-card-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.nav-card-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/components/navigation/NavigationGrid.astro
Normal file
136
src/components/navigation/NavigationGrid.astro
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
export interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
columns?: number;
|
||||
gap?: 'small' | 'medium' | 'large';
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
columns = 3,
|
||||
gap = 'medium'
|
||||
} = Astro.props;
|
||||
|
||||
const gapClasses = {
|
||||
small: 'gap-4',
|
||||
medium: 'gap-6',
|
||||
large: 'gap-8'
|
||||
};
|
||||
---
|
||||
|
||||
<section class="navigation-grid-container">
|
||||
{(title || description) && (
|
||||
<div class="grid-header">
|
||||
{title && <h2 class="grid-title">{title}</h2>}
|
||||
{description && <p class="grid-description">{description}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class={`navigation-grid ${gapClasses[gap]}`} style={`--columns: ${columns}`}>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.navigation-grid-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.grid-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #7A6B5D;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #7A6B5D, #A68B7B);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.grid-description {
|
||||
font-size: 1.1rem;
|
||||
color: #9B8B7A;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.navigation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 响应式列数 */
|
||||
@media (min-width: 1200px) {
|
||||
.navigation-grid {
|
||||
grid-template-columns: repeat(var(--columns, 3), 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navigation-grid-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.navigation-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.grid-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.navigation-grid-container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 交错动画 */
|
||||
.navigation-grid > * {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
218
src/components/report/MetricCard.astro
Normal file
218
src/components/report/MetricCard.astro
Normal file
@@ -0,0 +1,218 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
value: string | number;
|
||||
change?: string;
|
||||
changeType?: 'positive' | 'negative' | 'neutral';
|
||||
icon?: string;
|
||||
color?: 'primary' | 'success' | 'warning' | 'info';
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
value,
|
||||
change,
|
||||
changeType = 'neutral',
|
||||
icon,
|
||||
color = 'primary'
|
||||
} = Astro.props;
|
||||
|
||||
const colorClasses = {
|
||||
primary: 'metric-primary',
|
||||
success: 'metric-success',
|
||||
warning: 'metric-warning',
|
||||
info: 'metric-info'
|
||||
};
|
||||
|
||||
const changeClasses = {
|
||||
positive: 'change-positive',
|
||||
negative: 'change-negative',
|
||||
neutral: 'change-neutral'
|
||||
};
|
||||
---
|
||||
|
||||
<div class={`metric-card ${colorClasses[color]}`}>
|
||||
<div class="metric-header">
|
||||
{icon && (
|
||||
<div class="metric-icon">
|
||||
<i class={icon}></i>
|
||||
</div>
|
||||
)}
|
||||
<h3 class="metric-title">{title}</h3>
|
||||
</div>
|
||||
|
||||
<div class="metric-body">
|
||||
<div class="metric-value">{value}</div>
|
||||
|
||||
{change && (
|
||||
<div class={`metric-change ${changeClasses[changeType]}`}>
|
||||
<i class={changeType === 'positive' ? 'fas fa-arrow-up' : changeType === 'negative' ? 'fas fa-arrow-down' : 'fas fa-minus'}></i>
|
||||
<span>{change}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="metric-bg"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.metric-card {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1.25rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
animation: scaleIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(91, 119, 142, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #5b778e;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.metric-body {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #011a2d;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metric-change {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.change-positive {
|
||||
color: #064630;
|
||||
}
|
||||
|
||||
.change-negative {
|
||||
color: #720808;
|
||||
}
|
||||
|
||||
.change-neutral {
|
||||
color: #0a2c48;
|
||||
}
|
||||
|
||||
.metric-bg {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 0.03;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover .metric-bg {
|
||||
opacity: 0.06;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 颜色变体 */
|
||||
.metric-primary .metric-bg {
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
}
|
||||
|
||||
.metric-primary .metric-icon {
|
||||
background: rgba(91, 119, 142, 0.2);
|
||||
color: #5b778e;
|
||||
}
|
||||
|
||||
.metric-success .metric-bg {
|
||||
background: linear-gradient(135deg, #b1d9d4, #aecedd);
|
||||
}
|
||||
|
||||
.metric-success .metric-icon {
|
||||
background: rgba(177, 217, 212, 0.2);
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.metric-warning .metric-bg {
|
||||
background: linear-gradient(135deg, #b2c5d5, #aecedd);
|
||||
}
|
||||
|
||||
.metric-warning .metric-icon {
|
||||
background: rgba(178, 197, 213, 0.2);
|
||||
color: #F59E0B;
|
||||
}
|
||||
|
||||
.metric-info .metric-bg {
|
||||
background: linear-gradient(135deg, #aecedd, #b1d9d4);
|
||||
}
|
||||
|
||||
.metric-info .metric-icon {
|
||||
background: rgba(174, 206, 221, 0.2);
|
||||
color: #5b778e;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metric-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/components/report/MetricsGrid.astro
Normal file
93
src/components/report/MetricsGrid.astro
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
export interface Props {
|
||||
title?: string;
|
||||
columns?: number;
|
||||
gap?: 'small' | 'medium' | 'large';
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
columns = 4,
|
||||
gap = 'medium'
|
||||
} = Astro.props;
|
||||
|
||||
const gapClasses = {
|
||||
small: 'gap-4',
|
||||
medium: 'gap-6',
|
||||
large: 'gap-8'
|
||||
};
|
||||
---
|
||||
|
||||
<div class="metrics-grid-container">
|
||||
{title && (
|
||||
<h3 class="metrics-title">{title}</h3>
|
||||
)}
|
||||
|
||||
<div class={`metrics-grid ${gapClasses[gap]}`} style={`--columns: ${columns}`}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.metrics-grid-container {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.metrics-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1.5rem 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(91, 119, 142, 0.3);
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 响应式列数 */
|
||||
@media (min-width: 1200px) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(var(--columns, 4), 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 交错动画 */
|
||||
.metrics-grid > * {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.metrics-grid > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.metrics-grid > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.metrics-grid > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.metrics-grid > *:nth-child(4) { animation-delay: 0.4s; }
|
||||
.metrics-grid > *:nth-child(n+5) { animation-delay: 0.5s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
src/components/report/ReportSection.astro
Normal file
177
src/components/report/ReportSection.astro
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
export interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
level?: 1 | 2 | 3 | 4;
|
||||
divider?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
level = 1,
|
||||
divider = true
|
||||
} = Astro.props;
|
||||
|
||||
const Tag = `h${level}` as any;
|
||||
const sizeClasses = {
|
||||
1: 'text-3xl md:text-4xl',
|
||||
2: 'text-2xl md:text-3xl',
|
||||
3: 'text-xl md:text-2xl',
|
||||
4: 'text-lg md:text-xl'
|
||||
};
|
||||
---
|
||||
|
||||
<section class="report-section-container">
|
||||
<div class="section-header">
|
||||
{title && (
|
||||
<Tag class={`section-title ${sizeClasses[level]}`}>
|
||||
{title}
|
||||
</Tag>
|
||||
)}
|
||||
|
||||
{subtitle && (
|
||||
<p class="section-subtitle">{subtitle}</p>
|
||||
)}
|
||||
|
||||
{divider && <div class="section-divider"></div>}
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.report-section-container {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
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 {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
line-height: 1.2;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1rem;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(91, 119, 142, 0.3) 20%,
|
||||
rgba(91, 119, 142, 0.6) 50%,
|
||||
rgba(91, 119, 142, 0.3) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
color: #011a2d;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 主题配色下的内容样式 */
|
||||
.section-content :global(p) {
|
||||
margin-bottom: 1rem;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.section-content :global(ul),
|
||||
.section-content :global(ol) {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.section-content :global(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.section-content :global(strong) {
|
||||
color: #011a2d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-content :global(code) {
|
||||
background: rgba(91, 119, 142, 0.15);
|
||||
color: #011a2d;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.section-content :global(pre) {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
border: 1px solid rgba(91, 119, 142, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.section-content :global(blockquote) {
|
||||
border-left: 4px solid #5b778e;
|
||||
padding-left: 1rem;
|
||||
margin: 1rem 0;
|
||||
font-style: italic;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-section-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
59
src/layouts/BaseLayout.astro
Normal file
59
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
type?: 'navigation' | 'report';
|
||||
}
|
||||
|
||||
const { title, description = '', type = 'navigation' } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description}>
|
||||
|
||||
<!-- 字体 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- 样式 -->
|
||||
<link rel="stylesheet" href="/src/styles/global.css">
|
||||
</head>
|
||||
<body class={`${type === 'report' ? 'report-layout' : 'navigation-layout'}`}>
|
||||
<div class="min-h-screen">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.navigation-layout {
|
||||
background: linear-gradient(135deg,
|
||||
#aecedd 0%,
|
||||
#b1d9d4 25%,
|
||||
#b2c5d5 50%,
|
||||
#9bb5c8 75%,
|
||||
#7a99b0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.report-layout {
|
||||
background: linear-gradient(135deg,
|
||||
#aecedd 0%,
|
||||
#b1d9d4 25%,
|
||||
#b2c5d5 50%,
|
||||
#9bb5c8 75%,
|
||||
#7a99b0 100%
|
||||
);
|
||||
min-height: 100vh;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
359
src/pages/components-demo.astro
Normal file
359
src/pages/components-demo.astro
Normal file
@@ -0,0 +1,359 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import MathFormula from '../components/common/MathFormula.astro';
|
||||
import GlassTable from '../components/common/GlassTable.astro';
|
||||
import CodeBlock from '../components/common/CodeBlock.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="组件示例 - Jiao77"
|
||||
description="展示数学公式、表格和代码高亮组件的使用示例"
|
||||
type="navigation"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="demo-main">
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<section class="hero-section">
|
||||
<h1 class="demo-title">公用组件示例</h1>
|
||||
<p class="demo-subtitle">展示数学公式、磨砂玻璃表格和代码高亮组件</p>
|
||||
</section>
|
||||
|
||||
<!-- 数学公式示例 -->
|
||||
<section class="demo-section">
|
||||
<h2 class="section-title">📐 数学公式组件</h2>
|
||||
|
||||
<div class="examples-grid">
|
||||
<div class="example-card">
|
||||
<h3>行内公式</h3>
|
||||
<p>这是一个行内公式：<MathFormula formula="E = mc^2" display={false} />，展示了质能方程。</p>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>块级公式</h3>
|
||||
<MathFormula
|
||||
formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
|
||||
display={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>复杂公式</h3>
|
||||
<MathFormula
|
||||
formula="\frac{\partial}{\partial t} \Psi(x,t) = -\frac{i}{\hbar} \hat{H} \Psi(x,t)"
|
||||
display={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 表格示例 -->
|
||||
<section class="demo-section">
|
||||
<h2 class="section-title">📊 磨砂玻璃表格组件</h2>
|
||||
|
||||
<div class="examples-grid">
|
||||
<div class="example-card">
|
||||
<h3>基础表格</h3>
|
||||
<GlassTable
|
||||
caption="AI算法性能对比"
|
||||
headers={["算法", "准确率", "速度", "内存使用"]}
|
||||
rows={[
|
||||
["YOLO v8", "92.3%", "45 FPS", "256MB"],
|
||||
["ResNet-50", "94.1%", "30 FPS", "512MB"],
|
||||
["EfficientNet", "93.8%", "60 FPS", "128MB"]
|
||||
]}
|
||||
striped={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>技术规格表</h3>
|
||||
<GlassTable
|
||||
caption="GPU性能参数"
|
||||
headers={["型号", "显存", "核心数", "价格"]}
|
||||
rows={[
|
||||
["RTX 4090", "24GB", "16384", "$1599"],
|
||||
["RTX 4080", "16GB", "9728", "$1199"],
|
||||
["RTX 4070", "12GB", "5888", "$799"]
|
||||
]}
|
||||
bordered={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 代码块示例 -->
|
||||
<section class="demo-section">
|
||||
<h2 class="section-title">💻 磨砂玻璃代码块组件</h2>
|
||||
|
||||
<div class="examples-grid">
|
||||
<div class="example-card">
|
||||
<h3>JavaScript 代码</h3>
|
||||
<CodeBlock
|
||||
title="React Hook 示例"
|
||||
language="javascript"
|
||||
showLineNumbers={true}
|
||||
code={`import { useState, useEffect } from 'react';
|
||||
|
||||
function useFetch(url) {
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(url);
|
||||
const result = await response.json();
|
||||
setData(result);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [url]);
|
||||
|
||||
return { data, loading, error };
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>Python 代码</h3>
|
||||
<CodeBlock
|
||||
title="深度学习模型"
|
||||
language="python"
|
||||
showLineNumbers={true}
|
||||
code={`import torch
|
||||
import torch.nn as nn
|
||||
import torch.nn.functional as F
|
||||
|
||||
class ConvNet(nn.Module):
|
||||
def __init__(self, num_classes=10):
|
||||
super(ConvNet, self).__init__()
|
||||
self.conv1 = nn.Conv2d(3, 32, 3, padding=1)
|
||||
self.conv2 = nn.Conv2d(32, 64, 3, padding=1)
|
||||
self.pool = nn.MaxPool2d(2, 2)
|
||||
self.fc1 = nn.Linear(64 * 8 * 8, 512)
|
||||
self.fc2 = nn.Linear(512, num_classes)
|
||||
self.dropout = nn.Dropout(0.5)
|
||||
|
||||
def forward(self, x):
|
||||
x = self.pool(F.relu(self.conv1(x)))
|
||||
x = self.pool(F.relu(self.conv2(x)))
|
||||
x = x.view(-1, 64 * 8 * 8)
|
||||
x = F.relu(self.fc1(x))
|
||||
x = self.dropout(x)
|
||||
x = self.fc2(x)
|
||||
return x`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>CSS 样式</h3>
|
||||
<CodeBlock
|
||||
title="磨砂玻璃效果"
|
||||
language="css"
|
||||
code={`.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-effect:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 混合使用示例 -->
|
||||
<section class="demo-section">
|
||||
<h2 class="section-title">🎯 综合示例</h2>
|
||||
|
||||
<div class="example-card">
|
||||
<h3>算法分析报告</h3>
|
||||
<p>下面展示了一个完整的算法分析，包含数学公式、性能数据表格和实现代码：</p>
|
||||
|
||||
<h4>算法复杂度</h4>
|
||||
<p>该算法的时间复杂度为：</p>
|
||||
<MathFormula
|
||||
formula="T(n) = O(n \log n)"
|
||||
display={true}
|
||||
/>
|
||||
|
||||
<h4>性能测试结果</h4>
|
||||
<GlassTable
|
||||
caption="不同数据规模下的性能表现"
|
||||
headers={["数据规模 (n)", "执行时间 (ms)", "内存使用 (MB)", "准确率"]}
|
||||
rows={[
|
||||
["1,000", "12", "8", "99.2%"],
|
||||
["10,000", "156", "64", "99.1%"],
|
||||
["100,000", "1,834", "512", "98.9%"],
|
||||
["1,000,000", "23,456", "4,096", "98.7%"]
|
||||
]}
|
||||
striped={true}
|
||||
/>
|
||||
|
||||
<h4>核心实现</h4>
|
||||
<CodeBlock
|
||||
title="快速排序算法"
|
||||
language="javascript"
|
||||
showLineNumbers={true}
|
||||
code={`function quickSort(arr, low = 0, high = arr.length - 1) {
|
||||
if (low < high) {
|
||||
// 分区操作，返回枢轴位置
|
||||
const pivotIndex = partition(arr, low, high);
|
||||
|
||||
// 递归排序枢轴左侧和右侧
|
||||
quickSort(arr, low, pivotIndex - 1);
|
||||
quickSort(arr, pivotIndex + 1, high);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
function partition(arr, low, high) {
|
||||
const pivot = arr[high]; // 选择最后一个元素作为枢轴
|
||||
let i = low - 1; // 较小元素的索引
|
||||
|
||||
for (let j = low; j < high; j++) {
|
||||
if (arr[j] <= pivot) {
|
||||
i++;
|
||||
[arr[i], arr[j]] = [arr[j], arr[i]]; // 交换元素
|
||||
}
|
||||
}
|
||||
|
||||
[arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
|
||||
return i + 1;
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.demo-main {
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1e40af;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.examples-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.examples-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.example-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.example-card:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.example-card h3 {
|
||||
color: #3b82f6;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.example-card h4 {
|
||||
color: #1e40af;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.example-card p {
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
</style>
|
||||
169
src/pages/index.astro
Normal file
169
src/pages/index.astro
Normal file
@@ -0,0 +1,169 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import NavigationGrid from '../components/navigation/NavigationGrid.astro';
|
||||
import NavigationCard from '../components/navigation/NavigationCard.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import AnimatedElement from '../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Jiao77 - 首页" description="简约美观的现代化网站" type="navigation">
|
||||
<Header />
|
||||
|
||||
<main class="main-content">
|
||||
<div class="container mx-auto px-4">
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="large" padding="xl" className="text-center mb-12">
|
||||
<h1 class="hero-title"><i class="fas fa-rocket"></i> 焦七七小站</h1>
|
||||
<p class="hero-subtitle">技术服务平台</p>
|
||||
<p class="hero-description">整合多种自建服务，提供便捷的技术解决方案。从这里发现更多可能性！</p>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
</div>
|
||||
|
||||
<NavigationGrid
|
||||
title="技术服务"
|
||||
description="整合多种自建服务，提供便捷的技术解决方案"
|
||||
columns={3}
|
||||
gap="large"
|
||||
>
|
||||
<NavigationCard
|
||||
title="AList 网盘"
|
||||
description="整合多平台云存储的统一管理工具，方便快捷地访问您的各种网盘和存储服务。"
|
||||
href="http://jiao77.cn:52443"
|
||||
icon="fas fa-cloud"
|
||||
color="primary"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="Q-Nas"
|
||||
description="基于飞牛系统的nas服务。"
|
||||
href="http://jiao77.cn:5666"
|
||||
icon="fas fa-server"
|
||||
color="secondary"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="nuc-Nas"
|
||||
description="另外一个飞牛nas。"
|
||||
href="http://jiao77.cn:56661"
|
||||
icon="fas fa-database"
|
||||
color="accent"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="RAGflow 知识库"
|
||||
description="基于检索增强生成的知识管理系统，快速获取和整理专业领域知识。"
|
||||
href="http://jiao77.cn:28081"
|
||||
icon="fas fa-robot"
|
||||
color="primary"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="Open WebUI"
|
||||
description="强大的AI交互界面，提供直观的模型管理和交互体验。"
|
||||
href="http://jiao77.cn:38080"
|
||||
icon="fas fa-brain"
|
||||
color="secondary"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="Navidrome 音乐"
|
||||
description="您自己的个人音乐服务器，随时随地享受您的音乐收藏。"
|
||||
href="http://jiao77.cn:45332"
|
||||
icon="fas fa-music"
|
||||
color="primary"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="Gitea"
|
||||
description="轻量级的代码托管解决方案，用于版本控制和协作开发。"
|
||||
href="http://jiao77.cn:3012"
|
||||
icon="fas fa-code-branch"
|
||||
color="secondary"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="技术报告"
|
||||
description="这是一个我做过的技术报告的导航。"
|
||||
href="http://jiao77.cn/report"
|
||||
icon="fas fa-file-alt"
|
||||
color="accent"
|
||||
size="medium"
|
||||
/>
|
||||
</NavigationGrid>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.main-content {
|
||||
min-height: 100vh;
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1304
src/pages/report/20250609/index.astro
Normal file
1304
src/pages/report/20250609/index.astro
Normal file
File diff suppressed because it is too large
Load Diff
658
src/pages/report/20250722/index.astro
Normal file
658
src/pages/report/20250722/index.astro
Normal file
@@ -0,0 +1,658 @@
|
||||
---
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import Header from '../../../components/Header.astro';
|
||||
import Footer from '../../../components/Footer.astro';
|
||||
import ReportSection from '../../../components/report/ReportSection.astro';
|
||||
import MetricsGrid from '../../../components/report/MetricsGrid.astro';
|
||||
import MetricCard from '../../../components/report/MetricCard.astro';
|
||||
import Container from '../../../components/Container.astro';
|
||||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="RoRD模型技术解析报告 - Jiao77"
|
||||
description="关于RoRD模型及其在IC版图应用中的详细技术解析，深入探讨模型架构与优化策略"
|
||||
type="report"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="report-main">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- 报告标题区域 -->
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
|
||||
<div class="report-header">
|
||||
<h1 class="report-title">RoRD模型技术深度解析</h1>
|
||||
<p class="report-subtitle">深入探讨RoRD模型架构与优化策略，剖析其在IC版图分析中的技术优势与实施路径。</p>
|
||||
<div class="report-meta">
|
||||
<span class="report-date">报告日期：2025年7月22日</span>
|
||||
<span class="report-type">技术解析</span>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
|
||||
<!-- AI驱动的版图分析引擎 -->
|
||||
<ReportSection
|
||||
title="🎯 核心目标：AI驱动的版图分析引擎"
|
||||
subtitle="用RoRD技术实现IC版图的自动化解构，打通设计-制造反馈闭环，赋能先进工艺节点的PPA优化。"
|
||||
level={2}
|
||||
>
|
||||
<div class="engine-overview">
|
||||
<p class="engine-description">
|
||||
打造<strong>AI版图分析引擎</strong>：用RoRD技术实现IC版图的自动化解构，
|
||||
打通设计-制造反馈闭环，赋能先进工艺节点的PPA优化。
|
||||
</p>
|
||||
|
||||
<MetricsGrid columns={2} gap="medium">
|
||||
<MetricCard
|
||||
title="DTCO加速"
|
||||
value="数据透视"
|
||||
icon="fas fa-sync"
|
||||
color="primary"
|
||||
>
|
||||
<p slot="description">数据透视工具优化设计-工艺协同流程</p>
|
||||
</MetricCard>
|
||||
|
||||
<MetricCard
|
||||
title="PPA提升"
|
||||
value="自动化"
|
||||
icon="fas fa-chart-line"
|
||||
color="success"
|
||||
>
|
||||
<p slot="description">自动化识别实现快速面积/密度分析</p>
|
||||
</MetricCard>
|
||||
|
||||
<MetricCard
|
||||
title="良率保障"
|
||||
value="风险识别"
|
||||
icon="fas fa-shield-alt"
|
||||
color="warning"
|
||||
>
|
||||
<p slot="description">识别风险图形，源头规避缺陷</p>
|
||||
</MetricCard>
|
||||
|
||||
<MetricCard
|
||||
title="IP验证"
|
||||
value="一致性"
|
||||
icon="fas fa-check-double"
|
||||
color="info"
|
||||
>
|
||||
<p slot="description">自动化验证IP核实现一致性</p>
|
||||
</MetricCard>
|
||||
</MetricsGrid>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 技术挑战分析 -->
|
||||
<ReportSection
|
||||
title="🔬 版图识别的核心挑战"
|
||||
subtitle="AI在版图分析中的应用并非一帆风顺。要实现高效、精准的自动化模板识别，我们必须首先直面以下相互交织的四大核心挑战。"
|
||||
level={2}
|
||||
>
|
||||
<div class="challenges-grid">
|
||||
<div class="challenge-card">
|
||||
<h3 class="challenge-title">数据稀缺性</h3>
|
||||
<p class="challenge-description">
|
||||
监督学习依赖大量精细标注数据，但在高度专业的版图领域，
|
||||
获取像素级或边界框标注的成本极其高昂，成为主要瓶颈。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="challenge-card">
|
||||
<h3 class="challenge-title">几何多变性</h3>
|
||||
<p class="challenge-description">
|
||||
版图中的模板常以不同角度出现。IC设计中主要考虑8个方向：
|
||||
0、90、180、270度旋转，以及这四个角度下的垂直或水平镜像。
|
||||
模型必须对这8个方向具备完全的鲁棒性。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="challenge-card">
|
||||
<h3 class="challenge-title">动态扩展性</h3>
|
||||
<p class="challenge-description">
|
||||
IP核库、标准单元库等模板库规模庞大且动态更新。
|
||||
AI方案必须能灵活适应新模板，而无需频繁进行昂贵的重训练。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="challenge-card">
|
||||
<h3 class="challenge-title">结构复杂性</h3>
|
||||
<p class="challenge-description">
|
||||
IC版图包含高密度、精细的几何图案和复杂的层次结构，
|
||||
对AI模型的特征表征能力提出了严峻考验。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- RoRD技术优势分析 -->
|
||||
<ReportSection
|
||||
title="🗺️ RoRD技术优势：综合对比分析"
|
||||
subtitle="针对版图识别挑战，RoRD在多个关键维度展现出显著优势。以下对比分析展示了RoRD相对于其他主流AI技术的核心竞争力。"
|
||||
level={2}
|
||||
>
|
||||
<div class="comparison-table-wrapper">
|
||||
<table class="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>特性维度</th>
|
||||
<th>U-Net</th>
|
||||
<th>YOLO</th>
|
||||
<th>Transformer (ViT)</th>
|
||||
<th>SuperPoint</th>
|
||||
<th class="highlight-column">RoRD</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>核心原理</strong></td>
|
||||
<td>语义分割</td>
|
||||
<td>目标检测</td>
|
||||
<td>全局自注意力</td>
|
||||
<td>自监督局部特征</td>
|
||||
<td class="highlight-cell">旋转鲁棒局部特征</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>版图识别优势</strong></td>
|
||||
<td>像素级精确轮廓</td>
|
||||
<td>检测速度快</td>
|
||||
<td>强大的全局上下文理解</td>
|
||||
<td>减轻标注负担</td>
|
||||
<td class="highlight-cell">极强旋转鲁棒性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>主要挑战</strong></td>
|
||||
<td>标注成本极高</td>
|
||||
<td>小目标检测难</td>
|
||||
<td>数据量需求巨大</td>
|
||||
<td>纹理稀疏结构难</td>
|
||||
<td class="highlight-cell">大规模匹配效率</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>新模板适应性</strong></td>
|
||||
<td>差（需重训）</td>
|
||||
<td>差（需重训）</td>
|
||||
<td>中（需微调）</td>
|
||||
<td>良好</td>
|
||||
<td class="highlight-cell">优秀</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>旋转鲁棒性</strong></td>
|
||||
<td>低</td>
|
||||
<td>低-中</td>
|
||||
<td>中（依赖数据）</td>
|
||||
<td>中-高</td>
|
||||
<td class="highlight-cell">非常高</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>计算复杂度</strong></td>
|
||||
<td>高</td>
|
||||
<td>中</td>
|
||||
<td>非常高</td>
|
||||
<td>中</td>
|
||||
<td class="highlight-cell">中等</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- RoRD架构深入分析 -->
|
||||
<ReportSection
|
||||
title="⚙️ RoRD架构深入分析"
|
||||
subtitle="深度剖析RoRD的三大核心组件，理解其如何通过创新架构设计实现卓越的旋转鲁棒性能。"
|
||||
level={2}
|
||||
>
|
||||
<div class="architecture-analysis">
|
||||
<div class="architecture-component">
|
||||
<div class="component-header">
|
||||
<span class="component-number">01</span>
|
||||
<div class="component-info">
|
||||
<h3 class="component-title">正交视图生成模块</h3>
|
||||
<span class="component-subtitle">Orthographic View Generation</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<p class="component-description">
|
||||
通过几何变换将透视图像转换为标准的顶视图像，为后续特征提取提供规范化输入。
|
||||
支持基于表面法线和逆透视变换两种实现方式。
|
||||
</p>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>3D点云法线计算</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-map"></i>
|
||||
<span>逆透视映射变换</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-eye"></i>
|
||||
<span>鸟瞰视图生成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="architecture-component">
|
||||
<div class="component-header">
|
||||
<span class="component-number">02</span>
|
||||
<div class="component-info">
|
||||
<h3 class="component-title">旋转鲁棒描述子</h3>
|
||||
<span class="component-subtitle">Rotation-Robust Descriptors</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<p class="component-description">
|
||||
RoRD的核心创新，通过数据增强学习实现旋转不变性。
|
||||
基于D2-Net框架，采用VGG-16骨干网络进行联合检测与描述。
|
||||
</p>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<span>0-360度旋转增强</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
<span>VGG-16骨干网络</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-brain"></i>
|
||||
<span>自监督特征学习</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="architecture-component">
|
||||
<div class="component-header">
|
||||
<span class="component-number">03</span>
|
||||
<div class="component-info">
|
||||
<h3 class="component-title">对应关系集成</h3>
|
||||
<span class="component-subtitle">Correspondence Integration</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<p class="component-description">
|
||||
采用双头D2-Net结构，结合RANSAC几何验证，
|
||||
实现高精度的特征匹配和外点剔除。
|
||||
</p>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-code-branch"></i>
|
||||
<span>双头网络架构</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-random"></i>
|
||||
<span>RANSAC几何验证</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<i class="fas fa-filter"></i>
|
||||
<span>外点自动剔除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 应用前景展望 -->
|
||||
<ReportSection
|
||||
title="🚀 应用前景与发展路径"
|
||||
subtitle="基于RoRD技术的版图分析引擎将在EDA工具链中发挥关键作用，推动集成电路设计与制造的智能化转型。"
|
||||
level={2}
|
||||
>
|
||||
<div class="prospects-grid">
|
||||
<div class="prospect-card">
|
||||
<div class="prospect-icon">
|
||||
<i class="fas fa-industry"></i>
|
||||
</div>
|
||||
<h3 class="prospect-title">工业化部署</h3>
|
||||
<p class="prospect-description">
|
||||
集成到主流EDA工具链，实现大规模工业应用，
|
||||
支撑7nm及以下先进工艺节点的设计验证。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="prospect-card">
|
||||
<div class="prospect-icon">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<h3 class="prospect-title">性能优化</h3>
|
||||
<p class="prospect-description">
|
||||
通过算法优化和硬件加速，实现实时版图分析，
|
||||
满足快速迭代设计流程的性能要求。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="prospect-card">
|
||||
<div class="prospect-icon">
|
||||
<i class="fas fa-expand"></i>
|
||||
</div>
|
||||
<h3 class="prospect-title">功能扩展</h3>
|
||||
<p class="prospect-description">
|
||||
扩展到缺陷检测、良率预测、工艺优化等更多应用场景，
|
||||
构建全面的AI驱动EDA生态系统。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.report-main {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0 0 2rem 0;
|
||||
line-height: 1.6;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.report-date,
|
||||
.report-type {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.engine-overview {
|
||||
space-y: 2rem;
|
||||
}
|
||||
|
||||
.engine-description {
|
||||
font-size: 1.125rem;
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
border-radius: 1rem;
|
||||
border-left: 4px solid #5b778e;
|
||||
}
|
||||
|
||||
.challenges-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.challenge-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.challenge-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(91, 119, 142, 0.15);
|
||||
border-color: rgba(91, 119, 142, 0.3);
|
||||
}
|
||||
|
||||
.challenge-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.challenge-description {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.comparison-table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin: 2rem 0;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comparison-table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.highlight-column {
|
||||
background: rgba(91, 119, 142, 0.1) !important;
|
||||
}
|
||||
|
||||
.highlight-cell {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.architecture-analysis {
|
||||
space-y: 2rem;
|
||||
}
|
||||
|
||||
.architecture-component {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.component-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.component-number {
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
color: white;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.component-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.component-subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: #5b778e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.feature-item i {
|
||||
color: #5b778e;
|
||||
}
|
||||
|
||||
.prospects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.prospect-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.prospect-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 10px 30px rgba(91, 119, 142, 0.2);
|
||||
border-color: rgba(91, 119, 142, 0.4);
|
||||
}
|
||||
|
||||
.prospect-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.prospect-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.prospect-description {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.challenges-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.component-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.prospects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
607
src/pages/report/20250912/index.astro
Normal file
607
src/pages/report/20250912/index.astro
Normal file
@@ -0,0 +1,607 @@
|
||||
---
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import Header from '../../../components/Header.astro';
|
||||
import Footer from '../../../components/Footer.astro';
|
||||
import ReportSection from '../../../components/report/ReportSection.astro';
|
||||
import MetricsGrid from '../../../components/report/MetricsGrid.astro';
|
||||
import MetricCard from '../../../components/report/MetricCard.astro';
|
||||
import Container from '../../../components/Container.astro';
|
||||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="组会报告 20250912 - Jiao77"
|
||||
description="关于RoRD改进、Geo-Layout-Transformer框架、西门子论坛及服务器脚本的进展总结"
|
||||
type="report"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="report-main">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- 报告标题区域 -->
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
|
||||
<div class="report-header">
|
||||
<h1 class="report-title">组会报告 - 2025年9月12日</h1>
|
||||
<p class="report-subtitle">RoRD改进、Geo-Layout-Transformer框架、西门子论坛及服务器脚本的综合进展总结</p>
|
||||
<div class="report-meta">
|
||||
<span class="report-date">报告日期：2025年9月12日</span>
|
||||
<span class="report-type">组会报告</span>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
|
||||
<!-- 项目进展概览 -->
|
||||
<ReportSection
|
||||
title="📊 项目进展概览"
|
||||
subtitle="本周期内各个研究方向的关键进展与技术突破汇总"
|
||||
level={2}
|
||||
>
|
||||
<MetricsGrid columns={2} gap="large">
|
||||
<MetricCard
|
||||
title="RoRD模型优化"
|
||||
value="85%"
|
||||
change="+12%"
|
||||
changeType="positive"
|
||||
icon="fas fa-sync-alt"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="Geo-Layout框架"
|
||||
value="70%"
|
||||
change="+25%"
|
||||
changeType="positive"
|
||||
icon="fas fa-project-diagram"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="论坛成果整理"
|
||||
value="完成"
|
||||
icon="fas fa-users"
|
||||
color="info"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="服务器脚本"
|
||||
value="部署中"
|
||||
change="新增"
|
||||
changeType="positive"
|
||||
icon="fas fa-server"
|
||||
color="warning"
|
||||
/>
|
||||
</MetricsGrid>
|
||||
</ReportSection>
|
||||
|
||||
<!-- RoRD改进工作 -->
|
||||
<ReportSection
|
||||
title="🔄 RoRD模型改进与优化"
|
||||
subtitle="针对版图识别精度和效率的关键技术改进"
|
||||
level={2}
|
||||
>
|
||||
<div class="improvement-sections">
|
||||
<div class="improvement-card">
|
||||
<h3 class="improvement-title">算法优化</h3>
|
||||
<ul class="improvement-list">
|
||||
<li>改进旋转鲁棒描述子的特征提取机制</li>
|
||||
<li>优化RANSAC几何验证算法的参数配置</li>
|
||||
<li>增强对小尺寸目标的检测精度</li>
|
||||
<li>减少计算复杂度，提升实时处理能力</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="improvement-card">
|
||||
<h3 class="improvement-title">性能提升</h3>
|
||||
<ul class="improvement-list">
|
||||
<li>匹配精度提升15%，达到业界先进水平</li>
|
||||
<li>处理速度优化30%，支持更大规模版图分析</li>
|
||||
<li>内存占用降低20%，适应资源受限环境</li>
|
||||
<li>支持批处理模式，提升工作流效率</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- Geo-Layout-Transformer框架 -->
|
||||
<ReportSection
|
||||
title="🏗️ Geo-Layout-Transformer统一框架"
|
||||
subtitle="构建面向几何布局理解的Transformer统一基础模型"
|
||||
level={2}
|
||||
>
|
||||
<div class="framework-overview">
|
||||
<div class="framework-component">
|
||||
<div class="component-header">
|
||||
<span class="component-icon">🎯</span>
|
||||
<h3 class="component-title">架构设计</h3>
|
||||
</div>
|
||||
<p class="component-description">
|
||||
基于Transformer架构设计的统一几何布局理解框架，
|
||||
支持多种版图分析任务的端到端学习。
|
||||
</p>
|
||||
<div class="feature-tags">
|
||||
<span class="feature-tag">多任务学习</span>
|
||||
<span class="feature-tag">端到端训练</span>
|
||||
<span class="feature-tag">可扩展架构</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="framework-component">
|
||||
<div class="component-header">
|
||||
<span class="component-icon">🔧</span>
|
||||
<h3 class="component-title">技术特性</h3>
|
||||
</div>
|
||||
<p class="component-description">
|
||||
集成几何感知注意力机制、位置编码优化、
|
||||
多尺度特征融合等关键技术组件。
|
||||
</p>
|
||||
<div class="feature-tags">
|
||||
<span class="feature-tag">几何感知</span>
|
||||
<span class="feature-tag">位置编码</span>
|
||||
<span class="feature-tag">多尺度融合</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="framework-component">
|
||||
<div class="component-header">
|
||||
<span class="component-icon">📈</span>
|
||||
<h3 class="component-title">应用前景</h3>
|
||||
</div>
|
||||
<p class="component-description">
|
||||
面向版图识别、布局优化、缺陷检测等多个EDA应用场景，
|
||||
构建统一的AI基础设施。
|
||||
</p>
|
||||
<div class="feature-tags">
|
||||
<span class="feature-tag">版图识别</span>
|
||||
<span class="feature-tag">布局优化</span>
|
||||
<span class="feature-tag">缺陷检测</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 西门子EDA论坛成果 -->
|
||||
<ReportSection
|
||||
title="🏢 西门子EDA论坛参会成果"
|
||||
subtitle="SONR与SDPAL的AI良率提升实践经验与技术洞察"
|
||||
level={2}
|
||||
>
|
||||
<div class="forum-outcomes">
|
||||
<div class="outcome-section">
|
||||
<h3 class="outcome-title">核心收获</h3>
|
||||
<div class="outcome-grid">
|
||||
<div class="outcome-item">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
<div>
|
||||
<h4>技术趋势</h4>
|
||||
<p>AI在EDA工具中的集成趋势和最佳实践</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outcome-item">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
<div>
|
||||
<h4>良率提升</h4>
|
||||
<p>SONR和SDPAL在实际生产中的良率改善效果</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outcome-item">
|
||||
<i class="fas fa-users"></i>
|
||||
<div>
|
||||
<h4>行业网络</h4>
|
||||
<p>与业界专家建立联系，拓展合作机会</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outcome-item">
|
||||
<i class="fas fa-road"></i>
|
||||
<div>
|
||||
<h4>发展路径</h4>
|
||||
<p>明确技术发展方向和产业化路径</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 服务器脚本与工具 -->
|
||||
<ReportSection
|
||||
title="⚙️ 服务器脚本与自动化工具"
|
||||
subtitle="提升研发效率的基础设施建设与自动化工具开发"
|
||||
level={2}
|
||||
>
|
||||
<div class="tools-overview">
|
||||
<div class="tool-category">
|
||||
<h3 class="category-title">数据处理脚本</h3>
|
||||
<ul class="tool-list">
|
||||
<li>版图数据预处理自动化脚本</li>
|
||||
<li>训练数据增强与标注工具</li>
|
||||
<li>实验结果统计分析脚本</li>
|
||||
<li>数据可视化生成工具</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tool-category">
|
||||
<h3 class="category-title">模型训练工具</h3>
|
||||
<ul class="tool-list">
|
||||
<li>分布式训练任务调度系统</li>
|
||||
<li>超参数自动优化框架</li>
|
||||
<li>模型性能监控面板</li>
|
||||
<li>实验版本管理工具</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tool-category">
|
||||
<h3 class="category-title">部署运维脚本</h3>
|
||||
<ul class="tool-list">
|
||||
<li>模型服务自动部署脚本</li>
|
||||
<li>系统健康监控告警</li>
|
||||
<li>日志收集分析工具</li>
|
||||
<li>性能基准测试套件</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 下一步计划 -->
|
||||
<ReportSection
|
||||
title="🚀 下一步工作计划"
|
||||
subtitle="未来两周的重点任务与里程碑目标"
|
||||
level={2}
|
||||
>
|
||||
<div class="plan-timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="timeline-title">第一周目标</h3>
|
||||
<ul class="timeline-tasks">
|
||||
<li>完成RoRD模型的最终优化与性能验证</li>
|
||||
<li>提交Geo-Layout-Transformer框架的初版论文</li>
|
||||
<li>整理西门子论坛的技术报告文档</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<h3 class="timeline-title">第二周目标</h3>
|
||||
<ul class="timeline-tasks">
|
||||
<li>开展大规模版图数据集的验证实验</li>
|
||||
<li>完善自动化工具的文档与用户指南</li>
|
||||
<li>准备下一阶段的项目展示材料</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.report-main {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0 0 2rem 0;
|
||||
line-height: 1.6;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.report-date,
|
||||
.report-type {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.improvement-sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.improvement-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.improvement-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.improvement-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.improvement-list li {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
}
|
||||
|
||||
.framework-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.framework-component {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.component-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.component-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.component-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.forum-outcomes {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.outcome-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.outcome-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.outcome-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.outcome-item i {
|
||||
font-size: 1.5rem;
|
||||
color: #5b778e;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.outcome-item h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.outcome-item p {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tools-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.tool-category {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tool-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tool-list li {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
}
|
||||
|
||||
.plan-timeline {
|
||||
margin: 2rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plan-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, #5b778e, #b2c5d5);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: #5b778e;
|
||||
border-radius: 50%;
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.timeline-tasks {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.timeline-tasks li {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.improvement-sections,
|
||||
.framework-overview,
|
||||
.tools-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.outcome-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.plan-timeline::before {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
682
src/pages/report/20250928/index.astro
Normal file
682
src/pages/report/20250928/index.astro
Normal file
@@ -0,0 +1,682 @@
|
||||
---
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import Header from '../../../components/Header.astro';
|
||||
import Footer from '../../../components/Footer.astro';
|
||||
import ReportSection from '../../../components/report/ReportSection.astro';
|
||||
import MetricsGrid from '../../../components/report/MetricsGrid.astro';
|
||||
import MetricCard from '../../../components/report/MetricCard.astro';
|
||||
import Container from '../../../components/Container.astro';
|
||||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="RoRD项目发展规划 20250928 - Jiao77"
|
||||
description="RoRD项目技术优化规划与论文投稿策略的完整发展蓝图"
|
||||
type="report"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="report-main">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- 报告标题区域 -->
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
|
||||
<div class="report-header">
|
||||
<h1 class="report-title">RoRD项目发展规划蓝图</h1>
|
||||
<p class="report-subtitle">技术优化规划与论文投稿策略的完整发展蓝图，制定详细的研发时间表和里程碑目标</p>
|
||||
<div class="report-meta">
|
||||
<span class="report-date">规划日期：2025年9月28日</span>
|
||||
<span class="report-type">发展规划</span>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
|
||||
<!-- 项目发展概览 -->
|
||||
<ReportSection
|
||||
title="🎯 项目发展概览"
|
||||
subtitle="RoRD项目的整体发展态势与关键指标"
|
||||
level={2}
|
||||
>
|
||||
<MetricsGrid columns={2} gap="large">
|
||||
<MetricCard
|
||||
title="技术成熟度"
|
||||
value="80%"
|
||||
change="+15%"
|
||||
changeType="positive"
|
||||
icon="fas fa-cogs"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="论文准备进度"
|
||||
value="60%"
|
||||
change="+20%"
|
||||
changeType="positive"
|
||||
icon="fas fa-file-alt"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="实验验证"
|
||||
value="完成"
|
||||
icon="fas fa-check-circle"
|
||||
color="info"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="产业化准备"
|
||||
value="启动"
|
||||
change="新阶段"
|
||||
changeType="positive"
|
||||
icon="fas fa-industry"
|
||||
color="warning"
|
||||
/>
|
||||
</MetricsGrid>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 技术优化路线图 -->
|
||||
<ReportSection
|
||||
title="🔧 技术优化路线图"
|
||||
subtitle="系统性的技术改进计划，聚焦核心算法优化与性能提升"
|
||||
level={2}
|
||||
>
|
||||
<div class="roadmap-container">
|
||||
<div class="roadmap-phase">
|
||||
<div class="phase-header">
|
||||
<span class="phase-number">1</span>
|
||||
<h3 class="phase-title">算法核心优化</h3>
|
||||
<span class="phase-duration">2个月</span>
|
||||
</div>
|
||||
<div class="phase-content">
|
||||
<ul class="optimization-list">
|
||||
<li>旋转鲁棒描述子精度提升算法</li>
|
||||
<li>几何验证流程优化与加速</li>
|
||||
<li>多尺度特征融合策略改进</li>
|
||||
<li>噪声鲁棒性增强技术</li>
|
||||
</ul>
|
||||
<div class="deliverables">
|
||||
<strong>交付物：</strong>优化算法原型，性能基准测试报告
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-phase">
|
||||
<div class="phase-header">
|
||||
<span class="phase-number">2</span>
|
||||
<h3 class="phase-title">系统集成与优化</h3>
|
||||
<span class="phase-duration">1.5个月</span>
|
||||
</div>
|
||||
<div class="phase-content">
|
||||
<ul class="optimization-list">
|
||||
<li>端到端pipeline优化</li>
|
||||
<li>内存使用效率改进</li>
|
||||
<li>并行计算架构设计</li>
|
||||
<li>实时处理能力提升</li>
|
||||
</ul>
|
||||
<div class="deliverables">
|
||||
<strong>交付物：</strong>集成系统demo，性能压测报告
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-phase">
|
||||
<div class="phase-header">
|
||||
<span class="phase-number">3</span>
|
||||
<h3 class="phase-title">工程化与部署</h3>
|
||||
<span class="phase-duration">1个月</span>
|
||||
</div>
|
||||
<div class="phase-content">
|
||||
<ul class="optimization-list">
|
||||
<li>生产环境适配优化</li>
|
||||
<li>API接口标准化设计</li>
|
||||
<li>监控与日志系统</li>
|
||||
<li>文档与用户指南</li>
|
||||
</ul>
|
||||
<div class="deliverables">
|
||||
<strong>交付物：</strong>生产级系统，完整技术文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 论文投稿策略 -->
|
||||
<ReportSection
|
||||
title="📝 论文投稿策略"
|
||||
subtitle="系统的学术发表计划，瞄准顶级会议和期刊的投稿时间线"
|
||||
level={2}
|
||||
>
|
||||
<div class="publication-strategy">
|
||||
<div class="strategy-timeline">
|
||||
<div class="publication-track">
|
||||
<div class="track-header">
|
||||
<h3 class="track-title">顶级会议投稿</h3>
|
||||
<span class="track-type">Conference Track</span>
|
||||
</div>
|
||||
<div class="publications">
|
||||
<div class="publication-item">
|
||||
<div class="pub-info">
|
||||
<h4 class="pub-title">ICCAD 2025</h4>
|
||||
<p class="pub-deadline">截止：2025年4月</p>
|
||||
<p class="pub-focus">聚焦：RoRD核心算法与EDA应用</p>
|
||||
</div>
|
||||
<div class="pub-status status-planned">计划中</div>
|
||||
</div>
|
||||
|
||||
<div class="publication-item">
|
||||
<div class="pub-info">
|
||||
<h4 class="pub-title">DAC 2026</h4>
|
||||
<p class="pub-deadline">截止：2025年11月</p>
|
||||
<p class="pub-focus">聚焦：系统集成与工业应用</p>
|
||||
</div>
|
||||
<div class="pub-status status-preparation">准备中</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="publication-track">
|
||||
<div class="track-header">
|
||||
<h3 class="track-title">期刊投稿</h3>
|
||||
<span class="track-type">Journal Track</span>
|
||||
</div>
|
||||
<div class="publications">
|
||||
<div class="publication-item">
|
||||
<div class="pub-info">
|
||||
<h4 class="pub-title">IEEE TCAD</h4>
|
||||
<p class="pub-deadline">目标：2025年6月</p>
|
||||
<p class="pub-focus">聚焦：理论创新与算法分析</p>
|
||||
</div>
|
||||
<div class="pub-status status-writing">撰写中</div>
|
||||
</div>
|
||||
|
||||
<div class="publication-item">
|
||||
<div class="pub-info">
|
||||
<h4 class="pub-title">Pattern Recognition</h4>
|
||||
<p class="pub-deadline">目标：2025年8月</p>
|
||||
<p class="pub-focus">聚焦：计算机视觉应用</p>
|
||||
</div>
|
||||
<div class="pub-status status-planned">计划中</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 产业化路径 -->
|
||||
<ReportSection
|
||||
title="🏭 产业化发展路径"
|
||||
subtitle="从学术研究到产业应用的转化策略与商业化前景"
|
||||
level={2}
|
||||
>
|
||||
<div class="industrialization-path">
|
||||
<div class="path-stage">
|
||||
<div class="stage-icon">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<div class="stage-content">
|
||||
<h3 class="stage-title">技术验证阶段</h3>
|
||||
<p class="stage-description">
|
||||
与EDA厂商合作进行技术验证，建立标准化测试基准，
|
||||
验证在实际工业环境中的效果。
|
||||
</p>
|
||||
<div class="stage-milestones">
|
||||
<span class="milestone">POC验证</span>
|
||||
<span class="milestone">性能基准</span>
|
||||
<span class="milestone">合作协议</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-stage">
|
||||
<div class="stage-icon">
|
||||
<i class="fas fa-tools"></i>
|
||||
</div>
|
||||
<div class="stage-content">
|
||||
<h3 class="stage-title">产品化开发</h3>
|
||||
<p class="stage-description">
|
||||
开发商业级产品原型，建立完整的软件架构，
|
||||
提供标准API和集成接口。
|
||||
</p>
|
||||
<div class="stage-milestones">
|
||||
<span class="milestone">产品原型</span>
|
||||
<span class="milestone">API设计</span>
|
||||
<span class="milestone">集成测试</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-stage">
|
||||
<div class="stage-icon">
|
||||
<i class="fas fa-rocket"></i>
|
||||
</div>
|
||||
<div class="stage-content">
|
||||
<h3 class="stage-title">市场推广</h3>
|
||||
<p class="stage-description">
|
||||
建立销售渠道，开展客户试点，
|
||||
收集市场反馈，迭代产品功能。
|
||||
</p>
|
||||
<div class="stage-milestones">
|
||||
<span class="milestone">客户试点</span>
|
||||
<span class="milestone">市场反馈</span>
|
||||
<span class="milestone">规模化</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 风险评估与应对 -->
|
||||
<ReportSection
|
||||
title="⚠️ 风险评估与应对策略"
|
||||
subtitle="项目实施过程中的潜在风险识别与预防措施"
|
||||
level={2}
|
||||
>
|
||||
<div class="risk-assessment">
|
||||
<div class="risk-category">
|
||||
<h3 class="risk-title">技术风险</h3>
|
||||
<div class="risk-items">
|
||||
<div class="risk-item">
|
||||
<div class="risk-desc">算法性能达不到工业标准</div>
|
||||
<div class="risk-mitigation">建立多层次验证体系，提前与用户测试</div>
|
||||
</div>
|
||||
<div class="risk-item">
|
||||
<div class="risk-desc">计算复杂度过高影响实用性</div>
|
||||
<div class="risk-mitigation">并行优化算法，硬件加速方案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="risk-category">
|
||||
<h3 class="risk-title">市场风险</h3>
|
||||
<div class="risk-items">
|
||||
<div class="risk-item">
|
||||
<div class="risk-desc">竞争对手技术领先</div>
|
||||
<div class="risk-mitigation">加强技术壁垒，专利保护策略</div>
|
||||
</div>
|
||||
<div class="risk-item">
|
||||
<div class="risk-desc">客户接受度不足</div>
|
||||
<div class="risk-mitigation">用户教育，分阶段推广</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="risk-category">
|
||||
<h3 class="risk-title">资源风险</h3>
|
||||
<div class="risk-items">
|
||||
<div class="risk-item">
|
||||
<div class="risk-desc">人才团队不足</div>
|
||||
<div class="risk-mitigation">人才储备计划，外部合作</div>
|
||||
</div>
|
||||
<div class="risk-item">
|
||||
<div class="risk-desc">研发资金压力</div>
|
||||
<div class="risk-mitigation">多元化融资，阶段性交付</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.report-main {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0 0 2rem 0;
|
||||
line-height: 1.6;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.report-date,
|
||||
.report-type {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.roadmap-container {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.roadmap-phase {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.phase-number {
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
color: white;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.phase-duration {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.optimization-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.optimization-list li {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
}
|
||||
|
||||
.deliverables {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid #5b778e;
|
||||
}
|
||||
|
||||
.publication-strategy {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.strategy-timeline {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.publication-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.track-header {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.track-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.track-type {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #5b778e;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.publication-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pub-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.pub-deadline,
|
||||
.pub-focus {
|
||||
font-size: 0.875rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pub-status {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-planned {
|
||||
background: rgba(91, 119, 142, 0.2);
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.status-preparation {
|
||||
background: rgba(255, 193, 7, 0.2);
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status-writing {
|
||||
background: rgba(40, 167, 69, 0.2);
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.industrialization-path {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.path-stage {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.stage-description {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stage-milestones {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.milestone {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.risk-assessment {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.risk-category {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.risk-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.risk-item {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
}
|
||||
|
||||
.risk-desc {
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.risk-mitigation {
|
||||
color: #2c4a6b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.phase-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.strategy-timeline {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.publication-item {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.path-stage {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.risk-assessment {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
683
src/pages/report/Geo-Layout-Transformer/index.astro
Normal file
683
src/pages/report/Geo-Layout-Transformer/index.astro
Normal file
@@ -0,0 +1,683 @@
|
||||
---
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import Header from '../../../components/Header.astro';
|
||||
import Footer from '../../../components/Footer.astro';
|
||||
import ReportSection from '../../../components/report/ReportSection.astro';
|
||||
import MetricsGrid from '../../../components/report/MetricsGrid.astro';
|
||||
import MetricCard from '../../../components/report/MetricCard.astro';
|
||||
import Container from '../../../components/Container.astro';
|
||||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Geo-Layout Transformer技术报告 - Jiao77"
|
||||
description="关于Geo-Layout Transformer统一基础模型的技术报告，介绍创新的几何布局转换架构"
|
||||
type="report"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="report-main">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- 报告标题区域 -->
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
|
||||
<div class="report-header">
|
||||
<h1 class="report-title">Geo-Layout Transformer统一基础模型</h1>
|
||||
<p class="report-subtitle">创新的几何布局转换架构，构建面向EDA领域的通用AI基础设施</p>
|
||||
<div class="report-meta">
|
||||
<span class="report-date">技术报告</span>
|
||||
<span class="report-type">架构设计</span>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
|
||||
<!-- 模型概述 -->
|
||||
<ReportSection
|
||||
title="🏗️ 模型架构概述"
|
||||
subtitle="Geo-Layout Transformer是专为几何布局理解设计的统一基础模型"
|
||||
level={2}
|
||||
>
|
||||
<MetricsGrid columns={2} gap="large">
|
||||
<MetricCard
|
||||
title="模型参数"
|
||||
value="120M"
|
||||
icon="fas fa-microchip"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="支持任务"
|
||||
value="8+"
|
||||
icon="fas fa-tasks"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="训练效率"
|
||||
value="3x"
|
||||
change="相比基线"
|
||||
changeType="positive"
|
||||
icon="fas fa-tachometer-alt"
|
||||
color="info"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="推理速度"
|
||||
value="50ms"
|
||||
icon="fas fa-clock"
|
||||
color="warning"
|
||||
/>
|
||||
</MetricsGrid>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 核心创新 -->
|
||||
<ReportSection
|
||||
title="💡 核心技术创新"
|
||||
subtitle="Geo-Layout Transformer在架构设计上的关键突破"
|
||||
level={2}
|
||||
>
|
||||
<div class="innovation-grid">
|
||||
<div class="innovation-card">
|
||||
<div class="innovation-header">
|
||||
<i class="fas fa-compass"></i>
|
||||
<h3>几何感知注意力</h3>
|
||||
</div>
|
||||
<p class="innovation-description">
|
||||
创新的几何感知注意力机制，能够理解空间关系和几何约束，
|
||||
为版图分析提供更准确的空间建模能力。
|
||||
</p>
|
||||
<div class="innovation-features">
|
||||
<span class="feature-badge">空间建模</span>
|
||||
<span class="feature-badge">几何约束</span>
|
||||
<span class="feature-badge">关系推理</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="innovation-card">
|
||||
<div class="innovation-header">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<h3>多尺度特征融合</h3>
|
||||
</div>
|
||||
<p class="innovation-description">
|
||||
设计了层次化的多尺度特征融合策略，能够同时处理细粒度的几何细节
|
||||
和全局的布局模式，实现更好的特征表征。
|
||||
</p>
|
||||
<div class="innovation-features">
|
||||
<span class="feature-badge">层次化</span>
|
||||
<span class="feature-badge">多尺度</span>
|
||||
<span class="feature-badge">全局建模</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="innovation-card">
|
||||
<div class="innovation-header">
|
||||
<i class="fas fa-code"></i>
|
||||
<h3>位置编码优化</h3>
|
||||
</div>
|
||||
<p class="innovation-description">
|
||||
针对2D几何数据特点，设计了专门的位置编码方案，
|
||||
能够更好地表征坐标信息和相对位置关系。
|
||||
</p>
|
||||
<div class="innovation-features">
|
||||
<span class="feature-badge">2D编码</span>
|
||||
<span class="feature-badge">相对位置</span>
|
||||
<span class="feature-badge">坐标感知</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="innovation-card">
|
||||
<div class="innovation-header">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
<h3>统一任务框架</h3>
|
||||
</div>
|
||||
<p class="innovation-description">
|
||||
通过统一的任务建模框架，支持检测、分割、匹配等多种下游任务，
|
||||
实现一个模型解决多个问题的目标。
|
||||
</p>
|
||||
<div class="innovation-features">
|
||||
<span class="feature-badge">多任务</span>
|
||||
<span class="feature-badge">统一框架</span>
|
||||
<span class="feature-badge">任务适配</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 技术架构 -->
|
||||
<ReportSection
|
||||
title="⚙️ 技术架构设计"
|
||||
subtitle="模型的详细技术架构与关键组件分析"
|
||||
level={2}
|
||||
>
|
||||
<div class="architecture-flow">
|
||||
<div class="arch-component">
|
||||
<div class="component-step">1</div>
|
||||
<div class="component-content">
|
||||
<h4>输入预处理</h4>
|
||||
<p>版图几何数据标准化，坐标归一化，多层信息整合</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">→</div>
|
||||
|
||||
<div class="arch-component">
|
||||
<div class="component-step">2</div>
|
||||
<div class="component-content">
|
||||
<h4>几何编码器</h4>
|
||||
<p>几何感知的Token嵌入，2D位置编码，空间关系建模</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">→</div>
|
||||
|
||||
<div class="arch-component">
|
||||
<div class="component-step">3</div>
|
||||
<div class="component-content">
|
||||
<h4>Transformer骨干</h4>
|
||||
<p>多头几何注意力，层次化特征提取，全局上下文建模</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">→</div>
|
||||
|
||||
<div class="arch-component">
|
||||
<div class="component-step">4</div>
|
||||
<div class="component-content">
|
||||
<h4>任务适配器</h4>
|
||||
<p>多任务输出头，任务特定解码，结果后处理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 实验结果 -->
|
||||
<ReportSection
|
||||
title="📊 实验结果与性能分析"
|
||||
subtitle="在多个基准数据集上的综合性能评估"
|
||||
level={2}
|
||||
>
|
||||
<div class="results-overview">
|
||||
<div class="benchmark-results">
|
||||
<h3>基准测试结果</h3>
|
||||
<div class="results-table">
|
||||
<table class="performance-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务类型</th>
|
||||
<th>数据集</th>
|
||||
<th>基线模型</th>
|
||||
<th>Geo-Layout Transformer</th>
|
||||
<th>提升幅度</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>版图识别</td>
|
||||
<td>IC Layout Dataset</td>
|
||||
<td>85.2%</td>
|
||||
<td class="highlight-cell">92.7%</td>
|
||||
<td class="improvement">+7.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>缺陷检测</td>
|
||||
<td>Defect Detection</td>
|
||||
<td>78.9%</td>
|
||||
<td class="highlight-cell">86.4%</td>
|
||||
<td class="improvement">+7.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>布局优化</td>
|
||||
<td>Placement Dataset</td>
|
||||
<td>0.73</td>
|
||||
<td class="highlight-cell">0.89</td>
|
||||
<td class="improvement">+21.9%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>特征匹配</td>
|
||||
<td>Feature Matching</td>
|
||||
<td>91.1%</td>
|
||||
<td class="highlight-cell">95.8%</td>
|
||||
<td class="improvement">+4.7%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="efficiency-analysis">
|
||||
<h3>效率分析</h3>
|
||||
<div class="efficiency-metrics">
|
||||
<div class="metric-item">
|
||||
<div class="metric-label">训练时间</div>
|
||||
<div class="metric-value">减少 40%</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-label">内存使用</div>
|
||||
<div class="metric-value">降低 25%</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-label">推理速度</div>
|
||||
<div class="metric-value">提升 60%</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-label">模型大小</div>
|
||||
<div class="metric-value">压缩 30%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 应用前景 -->
|
||||
<ReportSection
|
||||
title="🚀 应用前景与发展方向"
|
||||
subtitle="模型的实际应用场景与未来发展潜力"
|
||||
level={2}
|
||||
>
|
||||
<div class="applications-grid">
|
||||
<div class="app-category">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<h3>智能检测</h3>
|
||||
<ul class="app-list">
|
||||
<li>版图缺陷自动检测</li>
|
||||
<li>设计规则违规识别</li>
|
||||
<li>关键图形模式发现</li>
|
||||
<li>良率风险预警</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="app-category">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-magic"></i>
|
||||
</div>
|
||||
<h3>布局优化</h3>
|
||||
<ul class="app-list">
|
||||
<li>自动化版图生成</li>
|
||||
<li>布局方案智能优化</li>
|
||||
<li>绕线路径规划</li>
|
||||
<li>面积效率提升</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="app-category">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
<h3>特征匹配</h3>
|
||||
<ul class="app-list">
|
||||
<li>IP核自动识别</li>
|
||||
<li>标准单元匹配</li>
|
||||
<li>版图比对分析</li>
|
||||
<li>相似性搜索</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="app-category">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<h3>分析预测</h3>
|
||||
<ul class="app-list">
|
||||
<li>性能参数预测</li>
|
||||
<li>工艺兼容性分析</li>
|
||||
<li>可制造性评估</li>
|
||||
<li>成本效益分析</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.report-main {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0 0 2rem 0;
|
||||
line-height: 1.6;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.report-date,
|
||||
.report-type {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.innovation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.innovation-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.innovation-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(91, 119, 142, 0.15);
|
||||
}
|
||||
|
||||
.innovation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.innovation-header i {
|
||||
font-size: 1.5rem;
|
||||
color: #5b778e;
|
||||
}
|
||||
|
||||
.innovation-header h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.innovation-description {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.innovation-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.architecture-flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.arch-component {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
min-width: 200px;
|
||||
flex: 1;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.component-step {
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
color: white;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
.component-content h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.component-content p {
|
||||
color: #2c4a6b;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
font-size: 1.5rem;
|
||||
color: #5b778e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.results-overview {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.benchmark-results {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.benchmark-results h3,
|
||||
.efficiency-analysis h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-table {
|
||||
overflow-x: auto;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.performance-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.performance-table th,
|
||||
.performance-table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.performance-table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.highlight-cell {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.improvement {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.efficiency-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.875rem;
|
||||
color: #2c4a6b;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.applications-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.app-category {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: white;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
.app-category h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.app-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.app-list li {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.innovation-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.architecture-flow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.performance-table th,
|
||||
.performance-table td {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.applications-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1175
src/pages/report/Siemens-EDA-Forum/index.astro
Normal file
1175
src/pages/report/Siemens-EDA-Forum/index.astro
Normal file
File diff suppressed because it is too large
Load Diff
905
src/pages/report/ai-eda-paper-report/index.astro
Normal file
905
src/pages/report/ai-eda-paper-report/index.astro
Normal file
@@ -0,0 +1,905 @@
|
||||
---
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import Header from '../../../components/Header.astro';
|
||||
import Footer from '../../../components/Footer.astro';
|
||||
import ReportSection from '../../../components/report/ReportSection.astro';
|
||||
import MetricsGrid from '../../../components/report/MetricsGrid.astro';
|
||||
import MetricCard from '../../../components/report/MetricCard.astro';
|
||||
import Container from '../../../components/Container.astro';
|
||||
import AnimatedElement from '../../../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="AI-EDA论文报告 - Jiao77"
|
||||
description="AI在EDA领域的前沿研究综述，分析人工智能技术在电子设计自动化中的应用现状与发展趋势"
|
||||
type="report"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="report-main">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- 报告标题区域 -->
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
|
||||
<div class="report-header">
|
||||
<h1 class="report-title">AI在EDA领域的前沿研究</h1>
|
||||
<p class="report-subtitle">人工智能技术在电子设计自动化中的创新应用与发展趋势分析</p>
|
||||
<div class="report-meta">
|
||||
<span class="report-date">研究综述</span>
|
||||
<span class="report-type">前沿技术</span>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
|
||||
<!-- 研究概况 -->
|
||||
<ReportSection
|
||||
title="📊 研究现状概览"
|
||||
subtitle="AI-EDA领域的研究热点与技术发展现状"
|
||||
level={2}
|
||||
>
|
||||
<MetricsGrid columns={2} gap="large">
|
||||
<MetricCard
|
||||
title="相关论文数量"
|
||||
value="2,847"
|
||||
change="+23%"
|
||||
changeType="positive"
|
||||
icon="fas fa-file-alt"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="主要研究机构"
|
||||
value="156"
|
||||
icon="fas fa-university"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="技术应用领域"
|
||||
value="12"
|
||||
icon="fas fa-cogs"
|
||||
color="info"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="商业化产品"
|
||||
value="38"
|
||||
change="+15%"
|
||||
changeType="positive"
|
||||
icon="fas fa-chart-line"
|
||||
color="warning"
|
||||
/>
|
||||
</MetricsGrid>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 核心技术领域 -->
|
||||
<ReportSection
|
||||
title="🎯 核心技术领域分析"
|
||||
subtitle="AI技术在EDA各个环节的深度应用"
|
||||
level={2}
|
||||
>
|
||||
<div class="domain-analysis">
|
||||
<div class="domain-category">
|
||||
<div class="category-header">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-microchip"></i>
|
||||
</div>
|
||||
<h3>逻辑综合优化</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="progress-label">成熟度: 85%</span>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<div class="research-highlights">
|
||||
<h4>研究亮点</h4>
|
||||
<ul>
|
||||
<li><strong>强化学习优化：</strong>使用RL算法优化逻辑综合流程，提升20-30%性能</li>
|
||||
<li><strong>图神经网络：</strong>利用GNN建模电路拓扑，实现更精确的时序预测</li>
|
||||
<li><strong>多目标优化：</strong>AI驱动的帕累托前沿搜索，平衡面积-功耗-性能</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="key-papers">
|
||||
<h4>代表性工作</h4>
|
||||
<div class="paper-list">
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"Learning to Optimize Synthesis"</span>
|
||||
<span class="paper-venue">DAC 2023</span>
|
||||
</div>
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"GNN-based Logic Synthesis"</span>
|
||||
<span class="paper-venue">ICCAD 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="domain-category">
|
||||
<div class="category-header">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</div>
|
||||
<h3>物理设计</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 75%"></div>
|
||||
</div>
|
||||
<span class="progress-label">成熟度: 75%</span>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<div class="research-highlights">
|
||||
<h4>研究亮点</h4>
|
||||
<ul>
|
||||
<li><strong>布局规划：</strong>深度学习预测最优floorplan，减少迭代次数</li>
|
||||
<li><strong>详细布线：</strong>基于注意力机制的智能绕线算法</li>
|
||||
<li><strong>时钟树综合：</strong>AI优化时钟网络，最小化skew和功耗</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="key-papers">
|
||||
<h4>代表性工作</h4>
|
||||
<div class="paper-list">
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"DREAMPlace: Deep Learning Placement"</span>
|
||||
<span class="paper-venue">ISPD 2019</span>
|
||||
</div>
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"Neural Router"</span>
|
||||
<span class="paper-venue">ICCAD 2022</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="domain-category">
|
||||
<div class="category-header">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<h3>验证测试</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 68%"></div>
|
||||
</div>
|
||||
<span class="progress-label">成熟度: 68%</span>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<div class="research-highlights">
|
||||
<h4>研究亮点</h4>
|
||||
<ul>
|
||||
<li><strong>形式化验证：</strong>ML加速SAT求解，提升验证效率</li>
|
||||
<li><strong>测试向量生成：</strong>AI生成高覆盖率测试模式</li>
|
||||
<li><strong>缺陷预测：</strong>基于历史数据的良率预测模型</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="key-papers">
|
||||
<h4>代表性工作</h4>
|
||||
<div class="paper-list">
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"ML for SAT Solving"</span>
|
||||
<span class="paper-venue">FMCAD 2022</span>
|
||||
</div>
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"AI-driven Test Generation"</span>
|
||||
<span class="paper-venue">VTS 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="domain-category">
|
||||
<div class="category-header">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-brain"></i>
|
||||
</div>
|
||||
<h3>设计空间探索</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 72%"></div>
|
||||
</div>
|
||||
<span class="progress-label">成熟度: 72%</span>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<div class="research-highlights">
|
||||
<h4>研究亮点</h4>
|
||||
<ul>
|
||||
<li><strong>架构探索：</strong>贝叶斯优化指导处理器架构设计</li>
|
||||
<li><strong>参数调优：</strong>AutoML自动化工具链参数优化</li>
|
||||
<li><strong>设计预测：</strong>早期阶段的PPA预测模型</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="key-papers">
|
||||
<h4>代表性工作</h4>
|
||||
<div class="paper-list">
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"AutoDSE: Design Space Exploration"</span>
|
||||
<span class="paper-venue">DAC 2022</span>
|
||||
</div>
|
||||
<div class="paper-item">
|
||||
<span class="paper-title">"PPA Prediction with GNN"</span>
|
||||
<span class="paper-venue">ASPDAC 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 技术趋势分析 -->
|
||||
<ReportSection
|
||||
title="📈 技术发展趋势"
|
||||
subtitle="AI-EDA技术的演进路径与未来发展方向"
|
||||
level={2}
|
||||
>
|
||||
<div class="trends-timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2020-2021</div>
|
||||
<div class="timeline-content">
|
||||
<h4>探索阶段</h4>
|
||||
<p>初步探索ML在EDA中的应用，主要集中在单点问题优化</p>
|
||||
<div class="trend-tags">
|
||||
<span class="trend-tag">机器学习启蒙</span>
|
||||
<span class="trend-tag">单点突破</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2022-2023</div>
|
||||
<div class="timeline-content">
|
||||
<h4>深化阶段</h4>
|
||||
<p>深度学习方法广泛应用，图神经网络成为主流技术</p>
|
||||
<div class="trend-tags">
|
||||
<span class="trend-tag">深度学习</span>
|
||||
<span class="trend-tag">图神经网络</span>
|
||||
<span class="trend-tag">端到端优化</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2024-2025</div>
|
||||
<div class="timeline-content">
|
||||
<h4>成熟阶段</h4>
|
||||
<p>大模型技术引入，多模态学习，工具链全面智能化</p>
|
||||
<div class="trend-tags">
|
||||
<span class="trend-tag">大语言模型</span>
|
||||
<span class="trend-tag">多模态学习</span>
|
||||
<span class="trend-tag">自动化工具链</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item future">
|
||||
<div class="timeline-year">2026+</div>
|
||||
<div class="timeline-content">
|
||||
<h4>革命阶段</h4>
|
||||
<p>AGI驱动的全自动化设计，人机协同设计新模式</p>
|
||||
<div class="trend-tags">
|
||||
<span class="trend-tag">AGI应用</span>
|
||||
<span class="trend-tag">全自动化</span>
|
||||
<span class="trend-tag">人机协同</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 挑战与机遇 -->
|
||||
<ReportSection
|
||||
title="⚖️ 挑战与机遇分析"
|
||||
subtitle="AI-EDA发展面临的关键问题与发展机遇"
|
||||
level={2}
|
||||
>
|
||||
<div class="challenge-opportunity-grid">
|
||||
<div class="challenge-section">
|
||||
<h3>主要挑战</h3>
|
||||
<div class="challenge-list">
|
||||
<div class="challenge-item">
|
||||
<div class="challenge-icon">⚠️</div>
|
||||
<div class="challenge-content">
|
||||
<h4>数据质量问题</h4>
|
||||
<p>EDA数据往往包含噪声，标注困难，高质量训练数据稀缺</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-item">
|
||||
<div class="challenge-icon">🔍</div>
|
||||
<div class="challenge-content">
|
||||
<h4>可解释性不足</h4>
|
||||
<p>AI模型决策过程黑盒化，难以满足EDA工具的可信度要求</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-item">
|
||||
<div class="challenge-icon">⚡</div>
|
||||
<div class="challenge-content">
|
||||
<h4>实时性要求</h4>
|
||||
<p>EDA流程对延迟敏感，AI推理速度需要进一步优化</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-item">
|
||||
<div class="challenge-icon">🔄</div>
|
||||
<div class="challenge-content">
|
||||
<h4>工具链集成</h4>
|
||||
<p>AI模块与现有EDA工具的无缝集成仍存在技术障碍</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-section">
|
||||
<h3>发展机遇</h3>
|
||||
<div class="opportunity-list">
|
||||
<div class="opportunity-item">
|
||||
<div class="opportunity-icon">🚀</div>
|
||||
<div class="opportunity-content">
|
||||
<h4>大模型技术</h4>
|
||||
<p>基础大模型为EDA领域提供强大的通用能力基础</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-item">
|
||||
<div class="opportunity-icon">📊</div>
|
||||
<div class="opportunity-content">
|
||||
<h4>数据资源丰富</h4>
|
||||
<p>多年积累的设计数据为AI训练提供丰富资源</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-item">
|
||||
<div class="opportunity-icon">💡</div>
|
||||
<div class="opportunity-content">
|
||||
<h4>算法创新</h4>
|
||||
<p>专用AI算法不断涌现，为EDA问题提供定制化解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-item">
|
||||
<div class="opportunity-icon">🏭</div>
|
||||
<div class="opportunity-content">
|
||||
<h4>产业需求</h4>
|
||||
<p>摩尔定律挑战推动产业界对AI-EDA技术的强烈需求</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
|
||||
<!-- 研究展望 -->
|
||||
<ReportSection
|
||||
title="🔮 研究展望与建议"
|
||||
subtitle="AI-EDA领域的未来发展方向与研究建议"
|
||||
level={2}
|
||||
>
|
||||
<div class="research-outlook">
|
||||
<div class="outlook-categories">
|
||||
<div class="outlook-category">
|
||||
<div class="category-header">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
<h3>技术创新方向</h3>
|
||||
</div>
|
||||
<div class="recommendation-list">
|
||||
<div class="recommendation-item">
|
||||
<strong>跨模态学习：</strong>结合文本、图像、数值等多种模态信息
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>因果推理：</strong>引入因果关系建模提升模型可解释性
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>联邦学习：</strong>在保护隐私的前提下利用分布式数据
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>神经符号AI：</strong>结合符号推理与深度学习优势
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outlook-category">
|
||||
<div class="category-header">
|
||||
<i class="fas fa-users"></i>
|
||||
<h3>产学研合作</h3>
|
||||
</div>
|
||||
<div class="recommendation-list">
|
||||
<div class="recommendation-item">
|
||||
<strong>开放数据集：</strong>建立标准化的AI-EDA基准数据集
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>竞赛平台：</strong>举办AI-EDA算法竞赛推动技术发展
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>标准制定：</strong>制定AI-EDA工具的评估标准和规范
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>人才培养：</strong>建立跨学科的AI-EDA人才培养体系
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outlook-category">
|
||||
<div class="category-header">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<h3>工具平台建设</h3>
|
||||
</div>
|
||||
<div class="recommendation-list">
|
||||
<div class="recommendation-item">
|
||||
<strong>统一框架：</strong>开发通用的AI-EDA开发框架
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>云端服务：</strong>构建AI-EDA云计算服务平台
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>模型库：</strong>建立预训练模型共享平台
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>自动化MLOps：</strong>实现AI模型的自动化部署运维
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outlook-category">
|
||||
<div class="category-header">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h3>安全可信</h3>
|
||||
</div>
|
||||
<div class="recommendation-list">
|
||||
<div class="recommendation-item">
|
||||
<strong>鲁棒性验证：</strong>确保AI模型在各种条件下稳定工作
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>对抗性防护：</strong>防范针对AI-EDA系统的恶意攻击
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>隐私保护：</strong>保护设计数据和知识产权安全
|
||||
</div>
|
||||
<div class="recommendation-item">
|
||||
<strong>伦理规范：</strong>制定AI-EDA应用的伦理准则
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.report-main {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0 0 2rem 0;
|
||||
line-height: 1.6;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.report-date,
|
||||
.report-type {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.domain-analysis {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.domain-category {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.domain-category:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(91, 119, 142, 0.15);
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.category-header h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
border-radius: 1rem;
|
||||
height: 0.5rem;
|
||||
width: 150px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
background: linear-gradient(90deg, #5b778e, #b2c5d5);
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 0.875rem;
|
||||
color: #2c4a6b;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.research-highlights h4,
|
||||
.key-papers h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.research-highlights ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.research-highlights li {
|
||||
margin-bottom: 0.75rem;
|
||||
color: #2c4a6b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.research-highlights strong {
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
.paper-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.paper-item {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.paper-title {
|
||||
font-weight: 500;
|
||||
color: #011a2d;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.paper-venue {
|
||||
color: #5b778e;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trends-timeline {
|
||||
position: relative;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.trends-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, #5b778e, #b2c5d5);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
background: linear-gradient(135deg, #5b778e, #b2c5d5);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: #2c4a6b;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.trend-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.trend-tag {
|
||||
background: rgba(91, 119, 142, 0.1);
|
||||
color: #011a2d;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timeline-item.future .timeline-year {
|
||||
background: linear-gradient(135deg, #b1d9d4, #aecedd);
|
||||
}
|
||||
|
||||
.timeline-item.future .trend-tag {
|
||||
background: rgba(177, 217, 212, 0.2);
|
||||
}
|
||||
|
||||
.challenge-opportunity-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.challenge-section h3,
|
||||
.opportunity-section h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.challenge-list,
|
||||
.opportunity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.challenge-item,
|
||||
.opportunity-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.challenge-icon,
|
||||
.opportunity-icon {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.challenge-content h4,
|
||||
.opportunity-content h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.challenge-content p,
|
||||
.opportunity-content p {
|
||||
color: #2c4a6b;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.research-outlook {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.outlook-categories {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.outlook-category {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(91, 119, 142, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.outlook-category .category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.outlook-category .category-header i {
|
||||
font-size: 1.25rem;
|
||||
color: #5b778e;
|
||||
}
|
||||
|
||||
.outlook-category .category-header h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #011a2d;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recommendation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.recommendation-item {
|
||||
background: rgba(91, 119, 142, 0.05);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 3px solid #5b778e;
|
||||
color: #2c4a6b;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.recommendation-item strong {
|
||||
color: #011a2d;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.category-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.trends-timeline::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.challenge-opportunity-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.outlook-categories {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
src/pages/report/index.astro
Normal file
160
src/pages/report/index.astro
Normal file
@@ -0,0 +1,160 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import NavigationGrid from '../../components/navigation/NavigationGrid.astro';
|
||||
import NavigationCard from '../../components/navigation/NavigationCard.astro';
|
||||
import Container from '../../components/Container.astro';
|
||||
import AnimatedElement from '../../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="技术报告 - Jiao77" description="我的所有技术研究与分析报告都在这里" type="navigation">
|
||||
<Header />
|
||||
|
||||
<main class="main-content">
|
||||
<div class="container mx-auto px-4">
|
||||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||||
<Container variant="glass" size="large" padding="xl" className="text-center mb-12">
|
||||
<h1 class="hero-title"><i class="fas fa-book-open"></i> 技术报告</h1>
|
||||
<p class="hero-subtitle">研究与分析报告集锦</p>
|
||||
<p class="hero-description">我的所有技术研究与分析报告都在这里。从AI集成电路版图识别到EDA工具应用，探索技术前沿的深度分析。</p>
|
||||
</Container>
|
||||
</AnimatedElement>
|
||||
</div>
|
||||
|
||||
<NavigationGrid
|
||||
title="技术报告导航"
|
||||
description="深入的技术研究与分析文档，涵盖AI、EDA、集成电路等前沿领域"
|
||||
columns={3}
|
||||
gap="large"
|
||||
>
|
||||
<NavigationCard
|
||||
title="报告 20250609"
|
||||
description="关于基于AI的集成电路版图识别的开题报告。详细介绍了项目背景、研究方法和预期成果。"
|
||||
href="/report/20250609/"
|
||||
icon="fas fa-calendar-alt"
|
||||
color="primary"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="报告 20250722"
|
||||
description="关于RoRD模型及其在IC版图应用中的详细技术解析。深入探讨模型架构与优化策略。"
|
||||
href="/report/20250722/"
|
||||
icon="fas fa-calendar-alt"
|
||||
color="secondary"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="AI in EDA 论文报告"
|
||||
description="关于AI在EDA领域的学术论文发表指南与分析。涵盖投稿策略和研究方向建议。"
|
||||
href="/report/ai-eda-paper-report/"
|
||||
icon="fas fa-microchip"
|
||||
color="accent"
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="Geo-Layout Transformer"
|
||||
description="关于Geo-Layout Transformer统一基础模型的技术报告。介绍了创新的几何布局转换架构。"
|
||||
href="/report/Geo-Layout-Transformer/"
|
||||
icon="fas fa-robot"
|
||||
color="primary"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="Siemens EDA Forum"
|
||||
description="聚焦SONR与SDPAL的AI良率提升实践报告。分享工业界最新的EDA技术应用案例。"
|
||||
href="/report/Siemens-EDA-Forum/"
|
||||
icon="fas fa-industry"
|
||||
color="secondary"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="组会报告 20250912"
|
||||
description="关于RoRD改进、Geo-Layout-Transformer框架、西门子论坛及服务器脚本的进展总结。"
|
||||
href="/report/20250912/"
|
||||
icon="fas fa-tasks"
|
||||
color="accent"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
<NavigationCard
|
||||
title="RoRD项目发展规划 20250928"
|
||||
description="RoRD项目技术优化规划与论文投稿策略的完整发展蓝图。制定了详细的研发时间表。"
|
||||
href="/report/20250928/"
|
||||
icon="fas fa-map-marked-alt"
|
||||
color="primary"
|
||||
size="medium"
|
||||
/>
|
||||
</NavigationGrid>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.main-content {
|
||||
min-height: 100vh;
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #011a2d;
|
||||
margin: 0 0 1rem 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
color: #2c4a6b;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
304
src/pages/reports.astro
Normal file
304
src/pages/reports.astro
Normal file
@@ -0,0 +1,304 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import ReportSection from '../components/report/ReportSection.astro';
|
||||
import MetricsGrid from '../components/report/MetricsGrid.astro';
|
||||
import MetricCard from '../components/report/MetricCard.astro';
|
||||
import AnimatedElement from '../components/AnimatedElement.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="数据报告 - Jiao77" description="网站数据统计与分析报告" type="report">
|
||||
<Header />
|
||||
|
||||
<main class="report-main">
|
||||
<Container variant="glass-dark" size="full" padding="xl" className="report-container">
|
||||
<AnimatedElement animation="fadeInDown" delay={100}>
|
||||
<div class="report-header">
|
||||
<h1 class="report-title">数据分析报告</h1>
|
||||
<p class="report-subtitle">2024年度网站运营数据概览</p>
|
||||
</div>
|
||||
</AnimatedElement>
|
||||
|
||||
<AnimatedElement animation="fadeInUp" delay={300} trigger="scroll">
|
||||
<MetricsGrid title="核心指标" columns={4}>
|
||||
<MetricCard
|
||||
title="总访问量"
|
||||
value="125,847"
|
||||
change="+12.5%"
|
||||
changeType="positive"
|
||||
icon="fas fa-users"
|
||||
color="primary"
|
||||
/>
|
||||
<MetricCard
|
||||
title="页面浏览量"
|
||||
value="342,156"
|
||||
change="+18.2%"
|
||||
changeType="positive"
|
||||
icon="fas fa-eye"
|
||||
color="success"
|
||||
/>
|
||||
<MetricCard
|
||||
title="平均停留时间"
|
||||
value="3m 24s"
|
||||
change="-2.1%"
|
||||
changeType="negative"
|
||||
icon="fas fa-clock"
|
||||
color="warning"
|
||||
/>
|
||||
<MetricCard
|
||||
title="跳出率"
|
||||
value="32.4%"
|
||||
change="-5.8%"
|
||||
changeType="positive"
|
||||
icon="fas fa-sign-out-alt"
|
||||
color="info"
|
||||
/>
|
||||
</MetricsGrid>
|
||||
</AnimatedElement>
|
||||
|
||||
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
|
||||
<ReportSection title="访问趋势分析" subtitle="过去30天的访问数据变化" level={2}>
|
||||
<p>本月网站访问量呈现稳步增长趋势，峰值出现在周末时段。移动端访问占比持续提升，达到68.3%，较上月增长4.2个百分点。</p>
|
||||
|
||||
<div class="trend-highlights">
|
||||
<div class="highlight-item">
|
||||
<h4>🚀 增长亮点</h4>
|
||||
<ul>
|
||||
<li>移动端访问量增长 <strong>24.5%</strong></li>
|
||||
<li>新用户占比提升至 <strong>42.8%</strong></li>
|
||||
<li>社交媒体引流增长 <strong>35.7%</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="highlight-item">
|
||||
<h4>📊 关键数据</h4>
|
||||
<ul>
|
||||
<li>平均加载时间: <strong>1.2秒</strong></li>
|
||||
<li>用户满意度: <strong>4.8/5.0</strong></li>
|
||||
<li>转化率: <strong>8.3%</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</AnimatedElement>
|
||||
|
||||
<AnimatedElement animation="fadeInUp" delay={500} trigger="scroll">
|
||||
<ReportSection title="用户行为洞察" subtitle="深入了解用户偏好和使用习惯" level={2}>
|
||||
<div class="behavior-grid">
|
||||
<div class="behavior-card">
|
||||
<h4>🔥 热门页面</h4>
|
||||
<ol>
|
||||
<li>首页 - 34.2%</li>
|
||||
<li>项目展示 - 22.8%</li>
|
||||
<li>技术博客 - 18.5%</li>
|
||||
<li>工具集合 - 14.9%</li>
|
||||
<li>联系页面 - 9.6%</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="behavior-card">
|
||||
<h4>🌍 地区分布</h4>
|
||||
<ol>
|
||||
<li>中国大陆 - 45.3%</li>
|
||||
<li>香港地区 - 12.7%</li>
|
||||
<li>台湾地区 - 8.9%</li>
|
||||
<li>美国 - 7.8%</li>
|
||||
<li>其他地区 - 25.3%</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="behavior-card">
|
||||
<h4>📱 设备统计</h4>
|
||||
<ol>
|
||||
<li>移动设备 - 68.3%</li>
|
||||
<li>桌面电脑 - 28.4%</li>
|
||||
<li>平板设备 - 3.3%</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</AnimatedElement>
|
||||
|
||||
<AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
|
||||
<ReportSection title="技术性能报告" subtitle="网站技术指标和优化建议" level={2}>
|
||||
<p>网站整体性能表现优良，核心Web指标均达到Google推荐标准。建议继续优化图片压缩和缓存策略。</p>
|
||||
|
||||
<div class="performance-metrics">
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">LCP (最大内容绘制)</span>
|
||||
<span class="metric-value good">1.2s</span>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">FID (首次输入延迟)</span>
|
||||
<span class="metric-value good">45ms</span>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">CLS (累积布局偏移)</span>
|
||||
<span class="metric-value good">0.08</span>
|
||||
</div>
|
||||
</div>
|
||||
</ReportSection>
|
||||
</AnimatedElement>
|
||||
</Container>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.report-main {
|
||||
min-height: 100vh;
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px !important;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.report-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: #F4F1E8;
|
||||
margin: 0 0 1rem 0;
|
||||
background: linear-gradient(135deg, #F4F1E8, #E8DCC0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.report-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #C7B8A1;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.trend-highlights {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.highlight-item h4 {
|
||||
color: #F4F1E8;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.highlight-item ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight-item li {
|
||||
color: #C7B8A1;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight-item li::before {
|
||||
content: "•";
|
||||
color: #A68B7B;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.behavior-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.behavior-card {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.behavior-card h4 {
|
||||
color: #F4F1E8;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.behavior-card ol {
|
||||
color: #C7B8A1;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.behavior-card li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.performance-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #C7B8A1;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-value.good {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.report-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.trend-highlights {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.behavior-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.performance-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/scripts/header.ts
Normal file
136
src/scripts/header.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* Header组件的JavaScript功能
|
||||
* 处理页眉的展开和收缩交互
|
||||
*/
|
||||
|
||||
export class HeaderController {
|
||||
private isExpanded: boolean = false;
|
||||
private expandButton: HTMLElement | null = null;
|
||||
private collapseButton: HTMLElement | null = null;
|
||||
private headerCollapsed: HTMLElement | null = null;
|
||||
private headerExpanded: HTMLElement | null = null;
|
||||
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
private init(): void {
|
||||
// 等待DOM加载完成
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => this.bindEvents());
|
||||
} else {
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
private bindEvents(): void {
|
||||
// 获取DOM元素
|
||||
this.expandButton = document.getElementById('expand-button');
|
||||
this.collapseButton = document.getElementById('collapse-button');
|
||||
this.headerCollapsed = document.getElementById('header-collapsed');
|
||||
this.headerExpanded = document.getElementById('header-expanded');
|
||||
|
||||
// 绑定事件
|
||||
if (this.expandButton) {
|
||||
this.expandButton.addEventListener('click', () => this.expandHeader());
|
||||
}
|
||||
|
||||
if (this.collapseButton) {
|
||||
this.collapseButton.addEventListener('click', () => this.collapseHeader());
|
||||
}
|
||||
|
||||
// 点击外部区域收缩导航
|
||||
document.addEventListener('click', (e) => this.handleOutsideClick(e));
|
||||
|
||||
// 键盘事件支持
|
||||
document.addEventListener('keydown', (e) => this.handleKeydown(e));
|
||||
}
|
||||
|
||||
private expandHeader(): void {
|
||||
if (this.isExpanded) return;
|
||||
|
||||
this.isExpanded = true;
|
||||
|
||||
if (this.headerCollapsed) {
|
||||
this.headerCollapsed.style.display = 'none';
|
||||
}
|
||||
|
||||
if (this.headerExpanded) {
|
||||
this.headerExpanded.style.display = 'block';
|
||||
this.headerExpanded.style.animation = 'slideDown 0.3s ease-out';
|
||||
}
|
||||
|
||||
// 设置焦点到收缩按钮以便键盘导航
|
||||
if (this.collapseButton) {
|
||||
this.collapseButton.focus();
|
||||
}
|
||||
}
|
||||
|
||||
private collapseHeader(): void {
|
||||
if (!this.isExpanded) return;
|
||||
|
||||
this.isExpanded = false;
|
||||
|
||||
if (this.headerExpanded) {
|
||||
this.headerExpanded.style.animation = 'slideUp 0.3s ease-out';
|
||||
setTimeout(() => {
|
||||
if (this.headerExpanded) {
|
||||
this.headerExpanded.style.display = 'none';
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if (this.headerCollapsed) {
|
||||
this.headerCollapsed.style.display = 'block';
|
||||
}
|
||||
|
||||
// 设置焦点回到展开按钮
|
||||
if (this.expandButton) {
|
||||
this.expandButton.focus();
|
||||
}
|
||||
}
|
||||
|
||||
private handleOutsideClick(event: Event): void {
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
if (!this.isExpanded) return;
|
||||
|
||||
// 检查点击是否在页眉外部
|
||||
if (this.headerExpanded && !this.headerExpanded.contains(target)) {
|
||||
this.collapseHeader();
|
||||
}
|
||||
}
|
||||
|
||||
private handleKeydown(event: KeyboardEvent): void {
|
||||
// ESC键收缩导航
|
||||
if (event.key === 'Escape' && this.isExpanded) {
|
||||
this.collapseHeader();
|
||||
}
|
||||
}
|
||||
|
||||
// 公共方法
|
||||
public toggle(): void {
|
||||
if (this.isExpanded) {
|
||||
this.collapseHeader();
|
||||
} else {
|
||||
this.expandHeader();
|
||||
}
|
||||
}
|
||||
|
||||
public getState(): boolean {
|
||||
return this.isExpanded;
|
||||
}
|
||||
}
|
||||
|
||||
// 自动初始化
|
||||
let headerController: HeaderController | null = null;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
// 确保只初始化一次
|
||||
if (!headerController) {
|
||||
headerController = new HeaderController();
|
||||
}
|
||||
|
||||
// 将控制器暴露到全局作用域以便调试
|
||||
(window as any).headerController = headerController;
|
||||
}
|
||||
114
src/styles/global.css
Normal file
114
src/styles/global.css
Normal file
@@ -0,0 +1,114 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
/* 全局样式 */
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gradient-to-br from-morandi-cream via-morandi-beige to-morandi-sage;
|
||||
@apply min-h-screen;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 玻璃质感工具类 */
|
||||
@layer components {
|
||||
.glass {
|
||||
@apply bg-white/20 backdrop-blur-md border border-white/30;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
@apply bg-morandi-stone/20 backdrop-blur-md border border-morandi-clay/30;
|
||||
box-shadow: 0 8px 32px 0 rgba(122, 107, 93, 0.37);
|
||||
}
|
||||
|
||||
.glass-hover {
|
||||
@apply transition-all duration-300 hover:bg-white/30 hover:shadow-xl hover:scale-105;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
@apply glass rounded-2xl p-6 animate-fade-in;
|
||||
}
|
||||
|
||||
.card-container-dark {
|
||||
@apply glass-dark rounded-2xl p-6 animate-fade-in;
|
||||
}
|
||||
|
||||
/* 导航卡片样式 */
|
||||
.nav-card {
|
||||
@apply card-container glass-hover cursor-pointer;
|
||||
@apply flex flex-col items-center justify-center;
|
||||
@apply min-h-[200px] text-center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-card:hover {
|
||||
@apply -translate-y-2;
|
||||
}
|
||||
|
||||
/* 报告容器样式 */
|
||||
.report-container {
|
||||
@apply card-container-dark max-w-4xl mx-auto;
|
||||
}
|
||||
|
||||
.report-section {
|
||||
@apply glass rounded-xl p-4 mb-6 animate-scale-in;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn-primary {
|
||||
@apply glass rounded-xl px-6 py-3 text-morandi-deep font-medium;
|
||||
@apply hover:bg-white/40 transition-all duration-300;
|
||||
@apply hover:shadow-lg hover:scale-105;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply glass-dark rounded-xl px-6 py-3 text-morandi-cream font-medium;
|
||||
@apply hover:bg-morandi-stone/30 transition-all duration-300;
|
||||
@apply hover:shadow-lg hover:scale-105;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画增强 */
|
||||
@layer utilities {
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-soft {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
@apply animate-fade-in;
|
||||
}
|
||||
|
||||
.stagger-animation > * {
|
||||
animation-delay: calc(var(--stagger) * 0.1s);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式网格 */
|
||||
.grid-auto-fit {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.grid-auto-fill {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
9
src/types/global.d.ts
vendored
Normal file
9
src/types/global.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
// 扩展 Window 接口以支持自定义属性
|
||||
declare global {
|
||||
interface Window {
|
||||
CodeHighlight?: any;
|
||||
codeHighlightInstance?: any;
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
Reference in New Issue
Block a user