initial commit

2025-09-29 05:57:18 +08:00
commit 9c0051c92b
73 changed files with 18737 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.astro
+dist
+jiao77.cn
--- a/.htaccess
+++ b/.htaccess
@@ -0,0 +1,123 @@
+# .htaccess 文件 - 放置在网站根目录
+# 用于优化 Astro 网站的性能和安全性
+
+# ==========================================
+# 重写规则
+# ==========================================
+RewriteEngine On
+
+# 强制 HTTPS (如果您有 SSL 证书)
+# RewriteCond %{HTTPS} off
+# RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+# 移除 www (可选，根据需要启用)
+# RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
+# RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
+
+# ==========================================
+# 压缩设置
+# ==========================================
+<IfModule mod_deflate.c>
+    # 启用压缩
+    AddOutputFilterByType DEFLATE text/plain
+    AddOutputFilterByType DEFLATE text/html
+    AddOutputFilterByType DEFLATE text/xml
+    AddOutputFilterByType DEFLATE text/css
+    AddOutputFilterByType DEFLATE application/xml
+    AddOutputFilterByType DEFLATE application/xhtml+xml
+    AddOutputFilterByType DEFLATE application/rss+xml
+    AddOutputFilterByType DEFLATE application/javascript
+    AddOutputFilterByType DEFLATE application/x-javascript
+    AddOutputFilterByType DEFLATE image/svg+xml
+</IfModule>
+
+# ==========================================
+# 缓存设置
+# ==========================================
+<IfModule mod_expires.c>
+    ExpiresActive On
+    
+    # CSS 和 JS 文件
+    ExpiresByType text/css "access plus 1 month"
+    ExpiresByType application/javascript "access plus 1 month"
+    ExpiresByType application/x-javascript "access plus 1 month"
+    
+    # 图片文件
+    ExpiresByType image/jpg "access plus 1 year"
+    ExpiresByType image/jpeg "access plus 1 year"
+    ExpiresByType image/gif "access plus 1 year"
+    ExpiresByType image/png "access plus 1 year"
+    ExpiresByType image/webp "access plus 1 year"
+    ExpiresByType image/svg+xml "access plus 1 year"
+    
+    # 字体文件
+    ExpiresByType font/woff "access plus 1 year"
+    ExpiresByType font/woff2 "access plus 1 year"
+    ExpiresByType font/ttf "access plus 1 year"
+    ExpiresByType font/eot "access plus 1 year"
+    ExpiresByType font/otf "access plus 1 year"
+    
+    # HTML 文件
+    ExpiresByType text/html "access plus 0 seconds"
+</IfModule>
+
+# ==========================================
+# 安全头设置
+# ==========================================
+<IfModule mod_headers.c>
+    # 防止点击劫持
+    Header always set X-Frame-Options "SAMEORIGIN"
+    
+    # 防止 MIME 类型嗅探
+    Header always set X-Content-Type-Options "nosniff"
+    
+    # XSS 保护
+    Header always set X-XSS-Protection "1; mode=block"
+    
+    # 引用策略
+    Header always set Referrer-Policy "strict-origin-when-cross-origin"
+    
+    # 内容安全策略 (根据需要调整)
+    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data:; connect-src 'self'"
+</IfModule>
+
+# ==========================================
+# 性能优化
+# ==========================================
+# 启用 KeepAlive
+<IfModule mod_headers.c>
+    Header set Connection keep-alive
+</IfModule>
+
+# 移除 ETag (因为我们使用 Expires)
+<IfModule mod_headers.c>
+    Header unset ETag
+</IfModule>
+FileETag None
+
+# ==========================================
+# 错误页面 (可选)
+# ==========================================
+# ErrorDocument 404 /404.html
+# ErrorDocument 500 /500.html
+
+# ==========================================
+# 禁止访问敏感文件
+# ==========================================
+<FilesMatch "(^#.*#|\.(bak|conf|dist|fla|in[ci]|log|orig|psd|sh|sql|sw[op])|~)$">
+    # Apache 2.2
+    <IfModule !mod_authz_core.c>
+        Order allow,deny
+        Deny from all
+    </IfModule>
+    
+    # Apache 2.4
+    <IfModule mod_authz_core.c>
+        Require all denied
+    </IfModule>
+</FilesMatch>
+
+# ==========================================
+# 字符集设置
+# ==========================================
+AddDefaultCharset UTF-8
--- a/COMPONENTS_GUIDE.md
+++ b/COMPONENTS_GUIDE.md
@@ -0,0 +1,205 @@
+# 公用组件使用指南
+
+本项目新增了三个高质量的公用组件，支持数学公式渲染、磨砂玻璃表格和代码高亮，所有组件都采用了现代化的磨砂玻璃设计风格。
+
+## 📐 MathFormula - 数学公式组件
+
+### 功能特点
+- 支持 KaTeX 渲染，兼容 LaTeX 语法
+- 行内和块级显示模式
+- 磨砂玻璃背景效果
+- 悬停动画效果
+- 自动错误处理
+
+### 使用方法
+
+```astro
+---
+import MathFormula from '../components/common/MathFormula.astro';
+---
+
+<!-- 行内公式 -->
+<MathFormula formula="E = mc^2" display={false} />
+
+<!-- 块级公式 -->
+<MathFormula 
+  formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" 
+  display={true}
+/>
+
+<!-- 复杂公式 -->
+<MathFormula 
+  formula="\frac{\partial}{\partial t} \Psi(x,t) = -\frac{i}{\hbar} \hat{H} \Psi(x,t)" 
+  display={true}
+/>
+```
+
+### Props 参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `formula` | string | - | LaTeX 格式的数学公式 |
+| `display` | boolean | false | 是否为块级显示 |
+| `className` | string | '' | 自定义 CSS 类名 |
+
+## 📊 GlassTable - 磨砂玻璃表格组件
+
+### 功能特点
+- 透明磨砂玻璃背景效果
+- 支持条纹和边框样式
+- 响应式设计
+- 悬停行高亮效果
+- 可自定义表格标题
+
+### 使用方法
+
+```astro
+---
+import GlassTable from '../components/common/GlassTable.astro';
+---
+
+<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}
+  bordered={true}
+/>
+```
+
+### Props 参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `headers` | string[] | [] | 表头数组 |
+| `rows` | (string\|number\|boolean)[][] | [] | 表格数据行 |
+| `caption` | string | - | 表格标题 |
+| `className` | string | '' | 自定义 CSS 类名 |
+| `striped` | boolean | false | 是否显示条纹 |
+| `bordered` | boolean | true | 是否显示边框 |
+
+### 特殊样式类
+
+在表格单元格中可以使用以下特殊样式类：
+
+- `.highlight-cell` - 高亮单元格（绿色）
+- `.warning-cell` - 警告单元格（黄色）
+- `.error-cell` - 错误单元格（红色）
+
+## 💻 CodeBlock - 代码高亮组件
+
+### 功能特点
+- 支持多种编程语言语法高亮
+- 磨砂玻璃背景效果
+- 可选行号显示
+- 一键复制代码功能
+- 代码标题和语言标签
+- 自动语法检测
+
+### 使用方法
+
+```astro
+---
+import CodeBlock from '../components/common/CodeBlock.astro';
+---
+
+<CodeBlock 
+  title="React Hook 示例"
+  language="javascript"
+  showLineNumbers={true}
+  copyable={true}
+  code={`function useFetch(url) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  
+  useEffect(() => {
+    fetch(url)
+      .then(res => res.json())
+      .then(setData)
+      .finally(() => setLoading(false));
+  }, [url]);
+
+  return { data, loading };
+}`}
+/>
+```
+
+### Props 参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `code` | string | - | 源代码内容 |
+| `language` | string | 'javascript' | 编程语言 |
+| `title` | string | - | 代码块标题 |
+| `showLineNumbers` | boolean | false | 是否显示行号 |
+| `className` | string | '' | 自定义 CSS 类名 |
+| `copyable` | boolean | true | 是否显示复制按钮 |
+
+### 支持的语言
+
+支持所有 Prism.js 的语言，常用的包括：
+- `javascript`, `typescript`, `jsx`, `tsx`
+- `python`, `java`, `csharp`, `cpp`
+- `html`, `css`, `scss`, `json`
+- `bash`, `sql`, `yaml`, `markdown`
+
+## 🎨 设计特点
+
+所有组件都采用了统一的设计语言：
+
+### 磨砂玻璃效果
+- 半透明背景：`rgba(255, 255, 255, 0.1)`
+- 背景模糊：`backdrop-filter: blur(15px)`
+- 边框：`1px solid rgba(255, 255, 255, 0.2)`
+- 圆角：`border-radius: 1rem`
+
+### 交互动画
+- 悬停时背景变亮
+- 轻微上移效果：`translateY(-2px)`
+- 阴影加深增强立体感
+- 平滑过渡：`transition: all 0.3s ease`
+
+### 响应式设计
+- 移动端适配
+- 触摸友好的交互区域
+- 自适应字体和间距
+
+## 📝 示例页面
+
+访问 `/components-demo` 查看所有组件的完整使用示例，包括：
+- 各种数学公式的渲染效果
+- 不同样式的表格展示
+- 多种编程语言的代码高亮
+- 组件之间的组合使用
+
+## 🚀 快速开始
+
+1. 导入需要的组件：
+```astro
+---
+import MathFormula from '../components/common/MathFormula.astro';
+import GlassTable from '../components/common/GlassTable.astro';
+import CodeBlock from '../components/common/CodeBlock.astro';
+---
+```
+
+2. 在模板中使用组件：
+```astro
+<MathFormula formula="x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}" display={true} />
+
+<GlassTable 
+  headers={["姓名", "年龄", "职业"]}
+  rows={[["张三", "25", "工程师"]]}
+/>
+
+<CodeBlock 
+  language="python"
+  code="print('Hello, World!')"
+/>
+```
+
+这些组件完美融入了网站的整体设计风格，提供了专业级的内容展示能力！
--- a/README.md
+++ b/README.md
@@ -0,0 +1,217 @@
+# Astro Jiao77 网站
+
+一个基于 Astro 构建的现代化网站，采用玻璃质感设计和莫兰蒂配色方案。
+
+## 🎨 设计特色
+
+- **玻璃质感 (Glass Morphism)**: 半透明背景配合模糊效果
+- **莫兰蒂配色**: 温和优雅的色彩搭配
+- **圆角设计**: 现代化的UI界面
+- **流畅动画**: 渐入渐出效果和悬浮动画
+- **响应式布局**: 适配各种设备屏幕
+
+## 📁 项目结构
+
+```
+src/
+├── components/           # 组件库
+│   ├── navigation/      # 导航页面组件
+│   │   ├── NavigationCard.astro    # 导航卡片
+│   │   └── NavigationGrid.astro    # 导航网格布局
+│   ├── report/          # 报告页面组件
+│   │   ├── ReportSection.astro     # 报告区块
+│   │   ├── MetricCard.astro        # 指标卡片
+│   │   └── MetricsGrid.astro       # 指标网格
+│   ├── Header.astro     # 可展开收缩的页眉
+│   ├── Footer.astro     # 页脚组件
+│   ├── Container.astro  # 通用容器组件
+│   └── AnimatedElement.astro  # 动画组件
+├── layouts/
+│   └── BaseLayout.astro # 基础布局
+├── pages/               # 页面
+│   ├── index.astro     # 首页 (导航类型)
+│   └── reports.astro   # 报告页面
+└── styles/
+    └── global.css      # 全局样式
+```
+
+## 🎯 页面类型
+
+### 导航页面
+- 使用导航组件库 (`src/components/navigation/`)
+- 浅色背景渐变
+- 服务卡片式布局
+- 适用于：首页、目录页、功能导航等
+
+### 报告页面
+- 使用报告组件库 (`src/components/report/`)
+- 深色背景渐变
+- 数据展示布局
+- 适用于：数据报告、统计分析、dashboard等
+
+## 🧩 组件介绍
+
+### 导航组件
+
+#### NavigationCard
+导航卡片组件，支持：
+- 三种颜色主题 (primary, secondary, accent)
+- 三种尺寸 (small, medium, large)
+- 图标和描述文本
+- 悬浮动画效果
+
+```astro
+<NavigationCard
+  title="项目展示"
+  description="查看我的最新项目"
+  href="/projects"
+  icon="fas fa-code"
+  color="primary"
+  size="large"
+/>
+```
+
+#### NavigationGrid
+导航网格布局：
+- 自适应列数
+- 交错动画效果
+- 响应式设计
+
+```astro
+<NavigationGrid title="导航中心" columns={3}>
+  <!-- NavigationCard 组件 -->
+</NavigationGrid>
+```
+
+### 报告组件
+
+#### ReportSection
+报告区块组件：
+- 可配置标题层级
+- 自动分割线
+- 深色主题优化
+
+```astro
+<ReportSection title="数据分析" subtitle="详细数据报告" level={2}>
+  <p>报告内容...</p>
+</ReportSection>
+```
+
+#### MetricCard
+指标卡片：
+- 数值显示
+- 变化趋势指示
+- 多种颜色主题
+
+```astro
+<MetricCard
+  title="访问量"
+  value="125,847"
+  change="+12.5%"
+  changeType="positive"
+  icon="fas fa-users"
+/>
+```
+
+### 通用组件
+
+#### Container
+万能容器组件：
+- 多种视觉样式 (glass, glass-dark, solid, outline)
+- 灵活尺寸配置
+- 圆角和阴影选项
+
+```astro
+<Container variant="glass" size="large" padding="xl">
+  内容...
+</Container>
+```
+
+#### AnimatedElement
+动画包装器：
+- 8种动画效果
+- 滚动触发
+- 自定义延迟和时长
+
+```astro
+<AnimatedElement animation="fadeInUp" delay={300} trigger="scroll">
+  需要动画的内容...
+</AnimatedElement>
+```
+
+#### Header
+智能页眉：
+- 自动展开/收缩
+- 滚动响应
+- 移动端适配
+
+## 🎨 配色方案
+
+项目采用莫兰蒂配色，定义在 `tailwind.config.mjs`:
+
+```css
+morandi: {
+  cream: '#F4F1E8',   # 奶白色
+  beige: '#E8DCC0',   # 米色
+  sage: '#C8D5B9',    # 鼠尾草绿
+  dusty: '#D4B5A0',   # 尘土色
+  mauve: '#B8A5A5',   # 紫灰色
+  clay: '#A68B7B',    # 陶土色
+  mist: '#C7B8A1',    # 薄雾色
+  stone: '#9B8B7A',   # 石头色
+  deep: '#7A6B5D'     # 深褐色
+}
+```
+
+## 🚀 开发命令
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 预览生产构建
+npm run preview
+```
+
+## 📱 响应式设计
+
+- **桌面端**: 完整功能和动画效果
+- **平板端**: 优化布局和交互
+- **移动端**: 简化界面，保持可用性
+
+## ✨ 动画效果
+
+- **页面加载**: 渐入动画
+- **滚动触发**: 元素逐步显现
+- **悬浮效果**: 卡片提升和缩放
+- **交错动画**: 网格元素依次出现
+
+## 🔧 自定义扩展
+
+### 添加新的导航卡片
+在 `src/pages/index.astro` 中添加新的 `NavigationCard` 组件
+
+### 创建新的报告页面
+1. 复制 `src/pages/reports.astro`
+2. 修改内容和数据
+3. 使用报告组件库构建布局
+
+### 扩展颜色主题
+在 `tailwind.config.mjs` 中添加新的颜色定义，然后在组件中使用
+
+## 📦 技术栈
+
+- **Astro**: 现代化静态站点生成器
+- **Tailwind CSS**: 实用优先的CSS框架
+- **TypeScript**: 类型安全的JavaScript
+- **Font Awesome**: 图标库
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request 来改进这个项目！
--- a/TYPESCRIPT_WARNINGS_FIXES.md
+++ b/TYPESCRIPT_WARNINGS_FIXES.md
@@ -0,0 +1,95 @@
+# TypeScript 警告修复说明
+
+## 修复的问题
+
+### 1. ✅ 已修复：`Property 'CodeHighlight' may not exist on type 'Window'`
+**问题原因：** TypeScript 不知道 `window.CodeHighlight` 这个自定义属性的存在。
+
+**解决方案：** 
+- 创建了 `src/types/global.d.ts` 文件来扩展 Window 接口
+- 添加了全局类型声明支持自定义属性
+
+### 2. ⚠️ 残留警告：`document.execCommand('copy') is deprecated`
+**问题原因：** `document.execCommand` 是已废弃的 API。
+
+**现状：** 
+- 已优化为优先使用现代的 `navigator.clipboard` API
+- 只在不支持 Clipboard API 的环境中降级使用 `execCommand`
+- 这是向后兼容的必要措施，警告可以忽略
+
+**代码实现：**
+```javascript
+// 优先使用现代 API
+if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+} else {
+    // 降级到传统方法（会有警告但功能正常）
+    document.execCommand('copy');
+}
+```
+
+### 3. ✅ 已修复：`'line' is declared but its value is never read`
+**问题原因：** forEach 回调中的 `line` 参数未被使用。
+
+**解决方案：** 将未使用的参数重命名为 `_`
+```javascript
+// 修复前
+lines.forEach((line, index) => {
+    // line 未被使用
+});
+
+// 修复后  
+lines.forEach((_, index) => {
+    // 使用 _ 表示未使用的参数
+});
+```
+
+### 4. ✅ 已修复：`'nav' is declared but its value is never read`
+**问题原因：** 获取了 DOM 元素但未使用。
+
+**解决方案：** 删除了未使用的变量声明
+
+### 5. ✅ 已修复：`'navigationItems' is declared but its value is never read`
+**问题原因：** Props 中定义了但未在组件中使用。
+
+**解决方案：** 从 Props 解构中移除未使用的属性
+
+### 6. ✅ 已修复：`Math.random().toString(36).substr(2, 9)` - substr is deprecated
+**问题原因：** `substr` 方法已被废弃。
+
+**解决方案：** 替换为现代的 `substring` 方法
+```javascript
+// 修复前
+Math.random().toString(36).substr(2, 9)
+
+// 修复后
+Math.random().toString(36).substring(2, 11)
+```
+
+## 构建结果
+
+现在的构建输出：
+- ✅ **0 错误**
+- ⚠️ **1 个警告**（`execCommand` 废弃警告 - 可安全忽略）
+- 💡 **3 个提示**（来自其他文件的轻微问题）
+
+## 关于剩余警告的说明
+
+最后剩余的 `document.execCommand` 警告是预期的，因为：
+
+1. **兼容性需求**：需要支持旧版浏览器
+2. **安全限制**：Clipboard API 只在 HTTPS 环境下工作
+3. **降级策略**：这是一个合理的 progressive enhancement 实现
+
+如果你希望完全消除这个警告，可以：
+- 使用 `// @ts-ignore` 注释
+- 或者移除降级支持（但会影响旧浏览器兼容性）
+
+## 最佳实践
+
+1. **类型安全**：为所有自定义全局变量创建类型声明
+2. **现代 API**：优先使用新的 Web API，适当降级
+3. **未使用变量**：使用 `_` 前缀或直接删除
+4. **废弃方法**：及时更新到推荐的替代方案
+
+项目现在拥有更好的 TypeScript 类型安全性和更少的警告！
--- a/apache-config.conf
+++ b/apache-config.conf
@@ -0,0 +1,59 @@
+# Apache 虚拟主机配置文件
+# 请将此配置添加到您的 Apache 配置中
+
+<VirtualHost *:80>
+    ServerName jiao77.cn
+    ServerAlias www.jiao77.cn
+    DocumentRoot /var/www/html
+    
+    # 启用压缩以提高性能
+    <IfModule mod_deflate.c>
+        AddOutputFilterByType DEFLATE text/plain
+        AddOutputFilterByType DEFLATE text/html
+        AddOutputFilterByType DEFLATE text/xml
+        AddOutputFilterByType DEFLATE text/css
+        AddOutputFilterByType DEFLATE application/xml
+        AddOutputFilterByType DEFLATE application/xhtml+xml
+        AddOutputFilterByType DEFLATE application/rss+xml
+        AddOutputFilterByType DEFLATE application/javascript
+        AddOutputFilterByType DEFLATE application/x-javascript
+    </IfModule>
+    
+    # 设置缓存头以提高性能
+    <IfModule mod_expires.c>
+        ExpiresActive On
+        ExpiresByType text/css "access plus 1 month"
+        ExpiresByType application/javascript "access plus 1 month"
+        ExpiresByType image/png "access plus 1 year"
+        ExpiresByType image/jpg "access plus 1 year"
+        ExpiresByType image/jpeg "access plus 1 year"
+        ExpiresByType image/gif "access plus 1 year"
+        ExpiresByType image/svg+xml "access plus 1 year"
+        ExpiresByType font/woff "access plus 1 year"
+        ExpiresByType font/woff2 "access plus 1 year"
+    </IfModule>
+    
+    # 安全头设置
+    <IfModule mod_headers.c>
+        Header always set X-Frame-Options "SAMEORIGIN"
+        Header always set X-Content-Type-Options "nosniff"
+        Header always set Referrer-Policy "strict-origin-when-cross-origin"
+    </IfModule>
+    
+    # 错误和访问日志
+    ErrorLog ${APACHE_LOG_DIR}/jiao77_error.log
+    CustomLog ${APACHE_LOG_DIR}/jiao77_access.log combined
+</VirtualHost>
+
+# HTTPS 配置 (如果您有 SSL 证书)
+# <VirtualHost *:443>
+#     ServerName jiao77.cn
+#     ServerAlias www.jiao77.cn
+#     DocumentRoot /var/www/html
+#     
+#     SSLEngine on
+#     SSLCertificateFile /path/to/your/certificate.crt
+#     SSLCertificateKeyFile /path/to/your/private.key
+#     
+#     # 包括上面相同的配置...
+# </VirtualHost>
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [tailwind()],
+  output: 'static',
+  build: {
+    assets: 'assets'
+  }
+});
--- a/deploy-full.sh
+++ b/deploy-full.sh
@@ -0,0 +1,215 @@
+#!/bin/bash
+
+# 🚀 Jiao77.cn 一键部署脚本
+# 自动构建并部署 Astro 网站到生产服务器
+
+set -e  # 遇到错误立即停止
+
+SERVER_IP="110.42.70.70"
+DEFAULT_USER="root"
+DEFAULT_WEB_ROOT="/var/www/jiao77.cn"
+
+echo "🌟 =================================="
+echo "🌟 Jiao77.cn 网站部署工具"
+echo "🌟 =================================="
+echo ""
+
+# 检查必要的工具
+check_requirements() {
+    echo "🔍 检查部署环境..."
+    
+    if ! command -v npm &> /dev/null; then
+        echo "❌ 错误: npm 未安装"
+        exit 1
+    fi
+    
+    if ! command -v rsync &> /dev/null; then
+        echo "⚠️  警告: rsync 未安装，将使用 scp"
+        USE_RSYNC=false
+    else
+        USE_RSYNC=true
+    fi
+    
+    echo "✅ 环境检查完成"
+}
+
+# 构建项目
+build_project() {
+    echo ""
+    echo "📦 构建生产版本..."
+    
+    if [ ! -f "package.json" ]; then
+        echo "❌ 错误: 当前目录不是 Astro 项目根目录"
+        exit 1
+    fi
+    
+    # 清理之前的构建
+    if [ -d "dist" ]; then
+        rm -rf dist
+    fi
+    
+    # 构建项目
+    npm run build
+    
+    if [ ! -d "dist" ]; then
+        echo "❌ 错误: 构建失败，dist 目录不存在"
+        exit 1
+    fi
+    
+    echo "✅ 构建完成"
+}
+
+# 获取用户输入
+get_deploy_config() {
+    echo ""
+    echo "⚙️  部署配置"
+    
+    read -p "📝 服务器用户名 (默认: ${DEFAULT_USER}): " USERNAME
+    USERNAME=${USERNAME:-$DEFAULT_USER}
+    
+    read -p "📁 网站根目录 (默认: ${DEFAULT_WEB_ROOT}): " WEB_ROOT  
+    WEB_ROOT=${WEB_ROOT:-$DEFAULT_WEB_ROOT}
+    
+    echo ""
+    echo "📋 部署信息确认:"
+    echo "   服务器: ${SERVER_IP}"
+    echo "   用户名: ${USERNAME}"
+    echo "   目录: ${WEB_ROOT}"
+    echo ""
+    
+    read -p "❓ 确认部署? (y/N): " CONFIRM
+    if [[ ! $CONFIRM =~ ^[Yy]$ ]]; then
+        echo "❌ 部署已取消"
+        exit 0
+    fi
+}
+
+# 上传 .htaccess 文件
+upload_htaccess() {
+    echo "📤 上传 .htaccess 文件..."
+    if [ -f ".htaccess" ]; then
+        scp .htaccess ${USERNAME}@${SERVER_IP}:${WEB_ROOT}/.htaccess
+        echo "✅ .htaccess 文件已上传"
+    else
+        echo "⚠️  .htaccess 文件不存在，跳过上传"
+    fi
+}
+
+# 部署文件
+deploy_files() {
+    echo ""
+    echo "🚀 开始部署文件..."
+    
+    if [ "$USE_RSYNC" = true ]; then
+        echo "📡 使用 rsync 同步文件..."
+        rsync -avz --delete --progress \
+            --exclude='.htaccess' \
+            dist/ ${USERNAME}@${SERVER_IP}:${WEB_ROOT}/
+    else
+        echo "📡 使用 scp 上传文件..."
+        # 创建临时压缩包
+        cd dist
+        tar -czf ../deploy-temp.tar.gz *
+        cd ..
+        
+        # 上传并解压
+        scp deploy-temp.tar.gz ${USERNAME}@${SERVER_IP}:/tmp/
+        ssh ${USERNAME}@${SERVER_IP} "cd ${WEB_ROOT} && sudo tar -xzf /tmp/deploy-temp.tar.gz && sudo rm /tmp/deploy-temp.tar.gz"
+        
+        # 清理本地临时文件
+        rm -f deploy-temp.tar.gz
+    fi
+    
+    # 上传 .htaccess
+    upload_htaccess
+    
+    echo "✅ 文件部署完成"
+}
+
+# 设置文件权限
+set_permissions() {
+    echo ""
+    echo "🔐 设置文件权限..."
+    
+    ssh ${USERNAME}@${SERVER_IP} "
+        sudo chown -R www-data:www-data ${WEB_ROOT}/ &&
+        sudo find ${WEB_ROOT}/ -type d -exec chmod 755 {} \; &&
+        sudo find ${WEB_ROOT}/ -type f -exec chmod 644 {} \;
+    "
+    
+    if [ $? -eq 0 ]; then
+        echo "✅ 权限设置完成"
+    else
+        echo "⚠️  权限设置失败，可能需要手动调整"
+    fi
+}
+
+# 部署后测试
+post_deploy_test() {
+    echo ""
+    echo "🧪 部署后测试..."
+    
+    # 测试网站是否可访问
+    HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://${SERVER_IP}/ || echo "000")
+    
+    if [ "$HTTP_CODE" = "200" ]; then
+        echo "✅ 网站访问正常 (HTTP $HTTP_CODE)"
+    else
+        echo "⚠️  网站可能存在问题 (HTTP $HTTP_CODE)"
+    fi
+    
+    # 检测压缩是否启用
+    GZIP_TEST=$(curl -H "Accept-Encoding: gzip" -s -I http://${SERVER_IP}/ | grep -i "content-encoding: gzip" || echo "")
+    
+    if [ -n "$GZIP_TEST" ]; then
+        echo "✅ Gzip 压缩已启用"
+    else
+        echo "⚠️  Gzip 压缩未启用，建议检查 Apache 配置"
+    fi
+}
+
+# 显示部署结果
+show_results() {
+    echo ""
+    echo "🎉 =================================="
+    echo "🎉 部署完成！"
+    echo "🎉 =================================="
+    echo ""
+    echo "🌐 网站地址:"
+    echo "   主域名: http://jiao77.cn"
+    echo "   IP访问: http://${SERVER_IP}"
+    echo ""
+    echo "📋 建议检查事项:"
+    echo "   ✓ 访问网站确认页面正常显示"
+    echo "   ✓ 测试导航卡片点击功能"
+    echo "   ✓ 检查 /reports 页面"
+    echo "   ✓ 验证页眉展开/收缩功能"
+    echo "   ✓ 测试移动端响应式设计"
+    echo "   ✓ 检查动画效果是否正常"
+    echo ""
+    echo "🔧 如果遇到问题:"
+    echo "   • 查看部署日志: tail -f /var/log/apache2/error.log"
+    echo "   • 检查文件权限: ls -la ${WEB_ROOT}/"
+    echo "   • 验证 Apache 配置: apache2ctl configtest"
+    echo ""
+}
+
+# 主函数
+main() {
+    check_requirements
+    build_project
+    get_deploy_config
+    deploy_files
+    set_permissions
+    post_deploy_test
+    show_results
+}
+
+# 错误处理
+trap 'echo "❌ 部署过程中出现错误，请检查输出信息"; exit 1' ERR
+
+# 执行部署
+main
+
+echo "🎯 如需 SSL/HTTPS，请参考 DEPLOYMENT.md 中的 SSL 配置章节"
+echo "📚 完整部署文档: https://github.com/你的仓库/blob/main/DEPLOYMENT.md"
--- a/deploy.sh
+++ b/deploy.sh
@@ -0,0 +1,53 @@
+#!/bin/bash
+
+# 部署到 jiao77.cn 服务器的脚本
+# 服务器IP: 110.42.70.70
+
+echo "🚀 开始部署到 jiao77.cn..."
+
+# 检查 dist 目录是否存在
+if [ ! -d "dist" ]; then
+    echo "❌ 错误: dist 目录不存在，请先运行 npm run build"
+    exit 1
+fi
+
+echo "📦 准备上传文件..."
+
+# 使用 rsync 同步文件到服务器
+# 您需要根据实际情况修改以下参数：
+# - 用户名 (这里假设是 root，请根据实际情况修改)
+# - Apache 网站根目录 (通常是 /var/www/html)
+
+read -p "请输入服务器用户名 (默认: root): " USERNAME
+USERNAME=${USERNAME:-root}
+
+read -p "请输入 Apache 网站根目录路径 (默认: /var/www/jiao77.cn): " WEB_ROOT
+WEB_ROOT=${WEB_ROOT:-/var/www/jiao77.cn}
+
+echo "🔄 正在上传文件到服务器..."
+
+# 方法1: 使用 rsync (推荐)
+if command -v rsync &> /dev/null; then
+    echo "使用 rsync 同步文件..."
+    rsync -avz --delete --progress dist/ ${USERNAME}@110.42.70.70:${WEB_ROOT}/
+else
+    echo "rsync 不可用，使用 scp 上传..."
+    # 方法2: 使用 scp
+    scp -r dist/* ${USERNAME}@110.42.70.70:${WEB_ROOT}/
+fi
+
+if [ $? -eq 0 ]; then
+    echo "✅ 部署成功！"
+    echo "🌐 网站地址: http://jiao77.cn"
+    echo "🌐 备用地址: http://110.42.70.70"
+    
+    echo ""
+    echo "📋 部署后检查清单："
+    echo "1. 访问网站确认页面正常显示"
+    echo "2. 检查所有链接和资源是否正常加载"
+    echo "3. 测试响应式设计在不同设备上的表现"
+    echo "4. 验证动画效果是否正常工作"
+else
+    echo "❌ 部署失败，请检查网络连接和服务器配置"
+    exit 1
+fi
--- a/docs/CENTER_FIX.md
+++ b/docs/CENTER_FIX.md
@@ -0,0 +1,94 @@
+# 居中问题修复说明
+
+## 🔧 问题分析
+"欢迎来到 Jiao77" 卡片没有居中的问题是因为 Container 组件只设置了 `max-width` 但没有添加 `margin: 0 auto` 来实现水平居中。
+
+## ✅ 修复内容
+
+### 1. 修复 Container 组件
+在 `src/components/Container.astro` 中为所有尺寸的容器添加了 `margin: 0 auto`：
+
+```css
+/* 尺寸样式 */
+.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%;
+}
+```
+
+### 2. 增强页面布局
+在 `src/pages/index.astro` 中添加了外层容器来确保最佳的居中效果：
+
+```astro
+<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">欢迎来到 Jiao77</h1>
+        <p class="hero-subtitle">探索现代化的网站体验</p>
+      </Container>
+    </AnimatedElement>
+  </div>
+</main>
+```
+
+### 3. 添加配套的 CSS 样式
+```css
+.container {
+  max-width: 1200px;
+  width: 100%;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+```
+
+## 🎯 修复效果
+
+现在 "欢迎来到 Jiao77" 卡片会：
+- ✅ 在桌面端完美居中显示
+- ✅ 在移动端保持良好的响应式布局
+- ✅ 保持原有的玻璃质感和动画效果
+- ✅ 与下方的导航卡片网格保持一致的对齐
+
+## 📱 响应式支持
+
+修复同时考虑了不同屏幕尺寸：
+- **大屏设备**: 最大宽度 800px，居中显示
+- **中等设备**: 自动适应容器宽度
+- **小屏设备**: 添加适当的左右内边距防止贴边
+
+## 🚀 部署更新
+
+要应用这个修复到生产环境，请运行：
+
+```bash
+# 构建新版本
+npm run build
+
+# 部署到服务器
+./deploy-full.sh
+```
+
+修复已完成！现在您的大标题卡片会在页面中完美居中显示。
--- a/docs/DEPLOYMENT.md
+++ b/docs/DEPLOYMENT.md
@@ -0,0 +1,206 @@
+# 🚀 部署指南
+
+将您的 Astro 网站部署到 jiao77.cn (110.42.70.70) 服务器的完整步骤。
+
+## 📋 部署前准备
+
+### 1. 确认服务器环境
+登录到您的服务器并检查：
+```bash
+# SSH 连接到服务器
+ssh root@110.42.70.70  # 或您的用户名
+
+# 检查 Apache 状态
+sudo systemctl status apache2
+
+# 检查 Apache 网站根目录
+ls -la /var/www/jiao77.cn/
+
+# 检查 Apache 模块
+apache2ctl -M | grep -E "(rewrite|deflate|expires|headers)"
+```
+
+### 2. 启用必要的 Apache 模块
+如果模块未启用，请运行：
+```bash
+sudo a2enmod rewrite
+sudo a2enmod deflate  
+sudo a2enmod expires
+sudo a2enmod headers
+sudo systemctl reload apache2
+```
+
+## 🚀 部署步骤
+
+### 方法一：自动部署 (推荐)
+
+1. **构建项目**
+```bash
+npm run build
+```
+
+2. **运行部署脚本**
+```bash
+./deploy.sh
+```
+按提示输入服务器用户名和网站根目录路径。
+
+### 方法二：手动部署
+
+1. **构建项目**
+```bash
+npm run build
+```
+
+2. **压缩文件**
+```bash
+cd dist
+tar -czf ../website.tar.gz *
+cd ..
+```
+
+3. **上传到服务器**
+```bash
+scp website.tar.gz root@110.42.70.70:/tmp/
+```
+
+4. **在服务器上解压**
+```bash
+ssh root@110.42.70.70
+cd /var/www/html
+sudo rm -rf *  # 清空现有文件 (请谨慎!)
+sudo tar -xzf /tmp/website.tar.gz -C /var/www/html/
+sudo chown -R www-data:www-data /var/www/html/
+sudo chmod -R 755 /var/www/html/
+```
+
+### 方法三：使用 rsync (最佳选择)
+
+```bash
+# 直接同步 dist 目录内容
+rsync -avz --delete --progress dist/ root@110.42.70.70:/var/www/html/
+```
+
+## ⚙️ Apache 配置
+
+### 1. 配置虚拟主机 (可选但推荐)
+
+将 `apache-config.conf` 的内容添加到您的 Apache 配置中：
+
+```bash
+# 在服务器上
+sudo nano /etc/apache2/sites-available/jiao77.conf
+# 粘贴 apache-config.conf 的内容
+
+# 启用站点
+sudo a2ensite jiao77.conf
+sudo systemctl reload apache2
+```
+
+### 2. 上传 .htaccess 文件
+
+确保 `.htaccess` 文件已上传到网站根目录：
+```bash
+scp .htaccess root@110.42.70.70:/var/www/html/
+```
+
+## 🔧 服务器优化
+
+### 1. 设置正确的文件权限
+```bash
+sudo chown -R www-data:www-data /var/www/html/
+sudo find /var/www/html/ -type d -exec chmod 755 {} \;
+sudo find /var/www/html/ -type f -exec chmod 644 {} \;
+```
+
+### 2. 配置防火墙 (如果启用)
+```bash
+sudo ufw allow 80/tcp    # HTTP
+sudo ufw allow 443/tcp   # HTTPS
+```
+
+## 📊 部署后检查
+
+### 1. 功能测试
+- [ ] 访问 http://jiao77.cn 或 http://110.42.70.70
+- [ ] 检查首页导航卡片是否正常显示
+- [ ] 访问 `/reports` 页面确认报告组件正常
+- [ ] 测试页眉展开/收缩功能
+- [ ] 检查移动端响应式设计
+- [ ] 验证动画效果是否流畅
+
+### 2. 性能测试
+```bash
+# 使用 curl 测试压缩
+curl -H "Accept-Encoding: gzip" -I http://jiao77.cn
+
+# 检查响应时间
+curl -o /dev/null -s -w "时间: %{time_total}s\n" http://jiao77.cn
+```
+
+### 3. 在线工具检测
+- [GTmetrix](https://gtmetrix.com/) - 性能分析
+- [PageSpeed Insights](https://pagespeed.web.dev/) - Google 性能评分
+- [SSL Labs](https://www.ssllabs.com/ssltest/) - SSL 配置检测 (如果使用 HTTPS)
+
+## 🔄 更新部署流程
+
+当您需要更新网站时：
+
+1. **修改代码**
+2. **重新构建**: `npm run build`
+3. **部署**: `./deploy.sh`
+
+## 🛡️ SSL/HTTPS 配置 (推荐)
+
+### 1. 获取免费 SSL 证书 (Let's Encrypt)
+```bash
+sudo apt update
+sudo apt install certbot python3-certbot-apache
+sudo certbot --apache -d jiao77.cn -d www.jiao77.cn
+```
+
+### 2. 自动续期
+```bash
+sudo crontab -e
+# 添加这行：
+0 12 * * * /usr/bin/certbot renew --quiet
+```
+
+## 🐛 故障排除
+
+### 问题1：页面不显示或显示 Apache 默认页
+- 检查文件权限
+- 确认 DocumentRoot 配置正确
+- 查看 Apache 错误日志：`sudo tail -f /var/log/apache2/error.log`
+
+### 问题2：CSS/JS 文件加载失败
+- 检查 .htaccess 文件是否正确上传
+- 确认 mod_rewrite 模块已启用
+- 检查文件路径是否正确
+
+### 问题3：动画效果不工作
+- 检查 JavaScript 控制台错误
+- 确认所有资源文件都已上传
+- 验证 Content-Security-Policy 配置
+
+### 问题4：移动端显示异常
+- 检查 viewport meta 标签
+- 验证响应式 CSS 是否正确加载
+- 测试不同设备和浏览器
+
+## 📞 技术支持
+
+如果遇到部署问题，请检查：
+1. Apache 错误日志：`/var/log/apache2/error.log`
+2. Apache 访问日志：`/var/log/apache2/access.log`
+3. 浏览器开发者工具控制台
+4. 网络连接和防火墙设置
+
+## 📈 监控和维护
+
+建议设置：
+- 定期备份网站文件
+- 监控服务器资源使用情况
+- 定期更新 Apache 和系统安全补丁
+- 设置网站监控服务检测可用性
--- a/docs/TEXT_COLOR_UPDATE.md
+++ b/docs/TEXT_COLOR_UPDATE.md
@@ -0,0 +1,153 @@
+# 📝 文字颜色更新 & 文档整理
+
+## ✅ 完成的更新
+
+### 🎨 主题配色全面升级
+
+已将网站配色全面更新为莫兰迪色彩主题，包含深蓝色文字系统和蓝绿色调背景，营造优雅舒适的视觉体验。
+
+#### 🌊 主题色彩方案：
+- **主色调**: `#5b778e` (深蓝灰)
+- **辅助色1**: `#b2c5d5` (浅蓝灰)
+- **辅助色2**: `#b1d9d4` (薄荷绿)
+- **辅助色3**: `#aecedd` (天空蓝)
+- **深蓝文字**: `#011a2d` (深海蓝)
+- **中蓝文字**: `#2c4a6b` (海洋蓝)
+
+#### 更新的组件和元素：
+
+**1. 首页 (`src/pages/index.astro`)**
+- 主标题: `#011a2d` (深蓝色)
+- 副标题: `#011a2d` (深蓝色)  
+- 描述文字: `#2c4a6b` (中等深蓝色)
+- 标题渐变: `#011a2d` → `#2c4a6b` → `#5b778e`
+
+**2. Header组件 (`src/components/Header.astro`)**
+- 品牌标题: `#011a2d` (深蓝色)
+- 导航链接: `#011a2d` (深蓝色)
+- 按钮文字: `#011a2d` (深蓝色)
+- 品牌渐变: `#011a2d` → `#2c4a6b`
+
+**3. Footer组件 (`src/components/Footer.astro`)**
+- 品牌标题: `#011a2d` (深蓝色)
+- 副标题: `#011a2d` (深蓝色)
+- 描述文字: `#2c4a6b` (中等深蓝色)
+- 链接文字: `#2c4a6b` (中等深蓝色)
+- 社交链接: `#2c4a6b` (中等深蓝色)
+- 版权信息: `#2c4a6b` (中等深蓝色)
+- 悬浮状态: `#011a2d` (深蓝色)
+
+**4. NavigationCard组件 (`src/components/navigation/NavigationCard.astro`)**
+- 卡片图标: `#5b778e` (主题蓝灰)
+- 悬浮图标: `#011a2d` (深蓝色)
+- 卡片标题: `#011a2d` (深蓝色)
+- 描述文字: `#2c4a6b` (海洋蓝)
+- 箭头图标: `#5b778e` (主题蓝灰)
+- Primary背景: `rgba(91, 119, 142, 0.1)` (主色调透明)
+- Secondary背景: `rgba(178, 197, 213, 0.1)` (辅助色1透明)
+- Accent背景: `rgba(177, 217, 212, 0.1)` (辅助色2透明)
+
+**5. MetricCard组件 (`src/components/report/MetricCard.astro`)**
+- 默认图标: `#5b778e` (主题蓝灰)
+- 图标背景: `rgba(91, 119, 142, 0.2)` (主色调透明)
+- 指标标题: `#2c4a6b` (海洋蓝)
+- 指标数值: `#011a2d` (深蓝色)
+- 中性变化: `#5b778e` (主题蓝灰)
+- Primary背景: `#5b778e → #b2c5d5` (渐变)
+- Success背景: `#b1d9d4 → #aecedd` (渐变)
+- Warning背景: `#b2c5d5 → #aecedd` (渐变)
+- Info背景: `#aecedd → #b1d9d4` (渐变)
+
+**6. MetricsGrid组件 (`src/components/report/MetricsGrid.astro`)**
+- 网格标题: `#011a2d` (深蓝色)
+- 底部边框: `rgba(91, 119, 142, 0.3)` (主色调透明)
+
+**7. ReportSection组件 (`src/components/report/ReportSection.astro`)**
+- 区域标题: `#011a2d` (深蓝色)
+- 标题渐变: `#011a2d → #2c4a6b → #5b778e`
+- 副标题: `#2c4a6b` (海洋蓝)
+- 分割线: `rgba(91, 119, 142, 0.3-0.6)` (渐变)
+- 正文内容: `#2c4a6b` (海洋蓝)
+- 列表项: `#5b778e` (主题蓝灰)
+- 加粗文字: `#011a2d` (深蓝色)
+- 代码块: `#011a2d` 文字 + `rgba(91, 119, 142, 0.15)` 背景
+- 引用块: `#2c4a6b` 文字 + `#5b778e` 左边框
+
+#### 🎨 颜色层次结构：
+- **深蓝文字** (`#011a2d`): 主标题、品牌、重要导航
+- **海洋蓝文字** (`#2c4a6b`): 描述文字、链接、正文内容
+- **主题蓝灰** (`#5b778e`): 图标、装饰元素
+- **背景色调**: 莫兰迪蓝绿渐变系统
+- **卡片背景**: 主题色透明叠加效果
+- **渐变效果**: `#011a2d` → `#2c4a6b` → `#5b778e`
+
+### 📁 文档整理
+
+创建了 `docs/` 文件夹并整理了所有说明文档：
+
+```
+docs/
+├── CENTER_FIX.md        # 居中问题修复说明
+├── DEPLOYMENT.md        # 详细部署指南  
+├── THEME_UPDATE.md      # 主题色更新说明
+└── UPDATE_CARDS.md      # 卡片内容更新说明
+```
+
+#### 文档结构：
+- **根目录**: 只保留 `README.md` 主要说明
+- **docs目录**: 包含所有技术文档和更新日志
+- **配置文件**: 保持在根目录 (如 `deploy.sh`, `.htaccess` 等)
+
+## 🎯 视觉效果全面提升
+
+### 🌊 莫兰迪配色美学
+- **主题统一**: 深蓝文字 + 蓝绿背景的和谐搭配
+- **层次清晰**: 从深海蓝到天空蓝的渐进色彩系统
+- **质感丰富**: 玻璃质感与莫兰迪色彩的完美融合
+
+### 📱 卡片设计升级
+- **Primary卡片**: 深蓝灰主题 (`#5b778e`) - 专业稳重
+- **Secondary卡片**: 浅蓝灰主题 (`#b2c5d5`) - 清新雅致  
+- **Accent卡片**: 薄荷绿主题 (`#b1d9d4`) - 活力自然
+- **悬浮效果**: 图标从主题色变为深蓝色的优雅过渡
+
+### ✨ 用户体验优化
+- **视觉对比**: 深蓝文字在莫兰迪背景上的优秀可读性
+- **情感共鸣**: 舒缓的蓝绿色调营造放松愉悦的浏览体验
+- **品牌识别**: 独特的莫兰迪配色形成强烈的视觉记忆点
+
+### 🎨 设计一致性
+- ✅ **全站统一**: 所有组件使用相同的配色体系
+- ✅ **玻璃质感**: 保持现代化的毛玻璃效果
+- ✅ **响应式**: 在所有设备上都呈现完美效果
+- ✅ **动画流畅**: 颜色过渡自然顺畅
+
+## 🚀 部署更新
+
+项目已重新构建完成，可以使用以下命令部署：
+
+```bash
+./deploy-full.sh
+```
+
+## 📱 兼容性
+
+新的文字颜色在所有设备和浏览器上都表现优秀：
+- **桌面端**: 完美的视觉层次和可读性
+- **移动端**: 优化的对比度和清晰度  
+- **平板端**: 平衡的视觉效果
+
+## 🎉 全站配色统一完成
+
+- ✅ **主题统一**: 所有组件都使用莫兰迪配色体系
+- ✅ **Navigation系统**: 导航卡片完美融入主题色彩
+- ✅ **Report系统**: 技术报告页面全面升级为主题配色
+- ✅ **文档完善**: 详细记录所有组件的配色方案
+- ✅ **视觉一致**: 从首页到报告页的全站设计协调
+- ✅ **响应式**: 所有设备上都呈现一致的美学效果
+
+🌈 **现在您的焦七七小站拥有：**
+- **专业的莫兰迪配色体系** - 和谐统一的视觉语言
+- **全站一致性** - 从导航卡片到技术报告的完美融合  
+- **优秀的可读性** - 深蓝色文字系统提供完美对比度
+- **现代化设计** - 玻璃质感 + 莫兰迪色彩的完美结合
--- a/docs/THEME_UPDATE.md
+++ b/docs/THEME_UPDATE.md
@@ -0,0 +1,124 @@
+# 🎨 主题色更新完成 - 蓝绿配色方案
+
+根据您提供的5个颜色，已成功将整个网站的主题色从莫兰蒂配色更新为清新的蓝绿色调。
+
+## 🎯 新配色方案
+
+### 原始颜色
+您提供的5个颜色：
+- `#5b778e` - 深蓝灰色
+- `#b2c5d5` - 淡蓝色 
+- `#b2c5d5` - 淡蓝色 (重复)
+- `#b1d9d4` - 淡绿蓝色
+- `#aecedd` - 浅蓝灰色
+
+### 扩展配色
+基于您的颜色，我创建了完整的配色系统：
+
+```css
+morandi: {
+  cream: '#aecedd',    // 最浅的蓝灰色 (奶白色位置)
+  beige: '#b1d9d4',    // 淡绿蓝色 (米色位置)
+  sage: '#b2c5d5',     // 淡蓝色 (鼠尾草绿位置)
+  dusty: '#b2c5d5',    // 中等蓝色 (尘土色位置)
+  mauve: '#7a99b0',    // 中等蓝灰色 (紫灰色位置 - 衍生)
+  clay: '#6a8ca3',     // 较深蓝灰色 (陶土色位置 - 衍生)
+  mist: '#9bb5c8',     // 雾蓝色 (薄雾色位置 - 衍生)
+  stone: '#698297',    // 石蓝色 (石头色位置 - 衍生)
+  deep: '#5b778e'      // 最深的蓝色 (深褐色位置)
+}
+```
+
+## ✅ 更新的组件和文件
+
+### 1. 配色定义文件
+- `tailwind.config.mjs` - 主题色配置
+- `src/layouts/BaseLayout.astro` - 背景渐变色
+
+### 2. 页面组件
+- `src/pages/index.astro` - 首页标题和文字颜色
+- `src/components/Header.astro` - 页眉品牌和导航颜色
+- `src/components/Footer.astro` - 页脚文字和链接颜色
+
+### 3. 背景渐变更新
+
+**导航页面背景**:
+```css
+background: linear-gradient(135deg, 
+  #aecedd 0%,     // 浅蓝灰
+  #b1d9d4 25%,    // 淡绿蓝
+  #b2c5d5 50%,    // 淡蓝
+  #9bb5c8 75%,    // 雾蓝
+  #7a99b0 100%    // 中等蓝灰
+);
+```
+
+**报告页面背景**:
+```css
+background: linear-gradient(180deg, 
+  #9bb5c8 0%,     // 雾蓝
+  #698297 50%,    // 石蓝
+  #5b778e 100%    // 深蓝
+);
+```
+
+## 🎨 视觉效果
+
+### 整体色调
+- **主调**: 清新的蓝绿色系
+- **感觉**: 宁静、专业、现代化
+- **适用**: 技术网站、个人作品集
+
+### 渐变效果
+- **浅色渐变**: 用于导航页面，营造轻松氛围
+- **深色渐变**: 用于报告页面，提供专业感
+- **文字颜色**: 使用深色确保可读性
+
+### 动画和交互
+- ✅ 保持了所有原有的动画效果
+- ✅ 玻璃质感效果依然完美
+- ✅ 悬浮和交互状态更新为新配色
+- ✅ 渐变文字效果使用新的色彩组合
+
+## 📱 响应式兼容
+
+新配色在所有设备尺寸上都表现良好：
+- **桌面端**: 完整的渐变和动画效果
+- **平板端**: 优化的布局和颜色搭配
+- **移动端**: 清晰的对比度和可读性
+
+## 🚀 部署
+
+主题色更新已完成并构建成功。要部署到生产服务器：
+
+```bash
+./deploy-full.sh
+```
+
+## 🔍 主要更新点
+
+### 文字颜色
+- 主标题: `#5b778e` (深蓝)
+- 副标题: `#5b778e` (深蓝)  
+- 描述文字: `#698297` (石蓝)
+- 链接悬浮: `#5b778e` (深蓝)
+
+### 背景颜色
+- 导航页: 浅蓝渐变 (`#aecedd` → `#7a99b0`)
+- 报告页: 深蓝渐变 (`#9bb5c8` → `#5b778e`)
+- 玻璃效果: 半透明白色覆盖
+
+### 品牌元素
+- Logo渐变: `#5b778e` → `#6a8ca3`
+- 按钮颜色: 基于新配色的透明度变化
+- 边框颜色: 半透明的新主题色
+
+## 🎉 效果预览
+
+新的蓝绿配色带来：
+- 🌊 清新的海洋感
+- 💎 专业的技术感  
+- 🎯 优秀的视觉层次
+- 🔮 现代化的设计语言
+
+整个网站现在呈现出更加宁静、专业和现代化的视觉效果！
--- a/docs/UPDATE_CARDS.md
+++ b/docs/UPDATE_CARDS.md
@@ -0,0 +1,98 @@
+# 🎯 焦七七小站 - 导航页面更新完成
+
+根据您提供的参考页面，已成功更新了 Astro 版本的导航页面内容。
+
+## ✅ 更新内容
+
+### 🏠 页面标题与描述
+- **标题**: 焦七七小站 (添加了火箭图标 🚀)
+- **副标题**: 技术服务平台
+- **描述**: 整合多种自建服务，提供便捷的技术解决方案。从这里发现更多可能性！
+
+### 🔗 服务卡片 (9个)
+
+1. **AList 网盘** 
+   - 图标: `fas fa-cloud`
+   - 链接: `http://jiao77.cn:52443`
+   - 描述: 整合多平台云存储的统一管理工具
+
+2. **Q-Nas**
+   - 图标: `fas fa-server`
+   - 链接: `http://jiao77.cn:5666`
+   - 描述: 基于飞牛系统的nas服务
+
+3. **nuc-Nas**
+   - 图标: `fas fa-database`
+   - 链接: `http://jiao77.cn:56661`
+   - 描述: 另外一个飞牛nas
+
+4. **RAGflow 知识库**
+   - 图标: `fas fa-robot`
+   - 链接: `http://jiao77.cn:28081`
+   - 描述: 基于检索增强生成的知识管理系统
+
+5. **Open WebUI**
+   - 图标: `fas fa-brain`
+   - 链接: `http://jiao77.cn:38080`
+   - 描述: 强大的AI交互界面
+
+6. **技术博客**
+   - 图标: `fas fa-blog`
+   - 链接: `https://jiao77.cn:801`
+   - 描述: 分享技术思考和项目经验
+
+7. **Navidrome 音乐**
+   - 图标: `fas fa-music`
+   - 链接: `http://jiao77.cn:45332`
+   - 描述: 个人音乐服务器
+
+8. **Gitea**
+   - 图标: `fas fa-code-branch`
+   - 链接: `http://jiao77.cn:3012`
+   - 描述: 轻量级的代码托管解决方案
+
+9. **技术报告**
+   - 图标: `fas fa-file-alt`
+   - 链接: `http://jiao77.cn/report`
+   - 描述: 技术报告的导航
+
+## 🔧 技术改进
+
+### 外部链接支持
+- 自动检测外部链接 (`http://` 或 `https://`)
+- 为外部链接添加 `target="_blank"` 和 `rel="noopener noreferrer"`
+- 保持内部链接的默认行为
+
+### 响应式布局
+- 卡片采用3列网格布局 (桌面端)
+- 移动端自动适应为单列
+- 保持莫兰蒂配色和玻璃质感
+
+### 动画效果
+- 保持原有的渐入动画
+- 悬浮效果和交错动画
+- 卡片提升和缩放效果
+
+## 🚀 部署
+
+项目已重新构建完成，可以使用以下命令部署到生产服务器：
+
+```bash
+./deploy-full.sh
+```
+
+## 📱 预览
+
+- **开发环境**: http://localhost:4321
+- **生产环境**: http://jiao77.cn (部署后)
+
+## 🎨 设计特色保持
+
+✅ 玻璃质感背景  
+✅ 莫兰蒂配色方案  
+✅ 圆角设计元素  
+✅ 流畅动画效果  
+✅ 响应式布局  
+✅ 现代化UI设计  
+
+所有原有的设计特色都已保持，只是将内容替换为您的实际服务链接和描述。
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "astro-jiao77-cn",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^4.0.0",
+    "@astrojs/tailwind": "^5.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.3.0",
+    "typescript": "^5.0.0"
+  }
+}
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250609-images/image
+++ b/public/report/20250609-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/20250722-images/image
+++ b/public/report/20250722-images/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/public/report/image/image
+++ b/public/report/image/image
--- a/src/components/AnimatedElement.astro
+++ b/src/components/AnimatedElement.astro
@@ -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>
--- a/src/components/Container.astro
+++ b/src/components/Container.astro
@@ -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>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -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>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -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>
--- a/src/components/common/CodeBlock.astro
+++ b/src/components/common/CodeBlock.astro
@@ -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>
--- a/src/components/common/GlassTable.astro
+++ b/src/components/common/GlassTable.astro
@@ -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>
--- a/src/components/common/MathFormula.astro
+++ b/src/components/common/MathFormula.astro
@@ -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>
--- a/src/components/navigation/NavigationCard.astro
+++ b/src/components/navigation/NavigationCard.astro
@@ -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>
--- a/src/components/navigation/NavigationGrid.astro
+++ b/src/components/navigation/NavigationGrid.astro
@@ -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>
--- a/src/components/report/MetricCard.astro
+++ b/src/components/report/MetricCard.astro
@@ -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>
--- a/src/components/report/MetricsGrid.astro
+++ b/src/components/report/MetricsGrid.astro
@@ -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>
--- a/src/components/report/ReportSection.astro
+++ b/src/components/report/ReportSection.astro
@@ -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>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -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>
--- a/src/pages/components-demo.astro
+++ b/src/pages/components-demo.astro
@@ -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>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -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>
--- a/src/pages/report/20250609/index.astro
+++ b/src/pages/report/20250609/index.astro
--- a/src/pages/report/20250722/index.astro
+++ b/src/pages/report/20250722/index.astro
@@ -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>
--- a/src/pages/report/20250912/index.astro
+++ b/src/pages/report/20250912/index.astro
@@ -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>
--- a/src/pages/report/20250928/index.astro
+++ b/src/pages/report/20250928/index.astro
@@ -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>
--- a/src/pages/report/Geo-Layout-Transformer/index.astro
+++ b/src/pages/report/Geo-Layout-Transformer/index.astro
@@ -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>
--- a/src/pages/report/Siemens-EDA-Forum/index.astro
+++ b/src/pages/report/Siemens-EDA-Forum/index.astro
--- a/src/pages/report/ai-eda-paper-report/index.astro
+++ b/src/pages/report/ai-eda-paper-report/index.astro
@@ -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>
--- a/src/pages/report/index.astro
+++ b/src/pages/report/index.astro
@@ -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>
--- a/src/pages/reports.astro
+++ b/src/pages/reports.astro
@@ -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>
--- a/src/scripts/header.ts
+++ b/src/scripts/header.ts
@@ -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;
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -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;
+}
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -0,0 +1,9 @@
+// 扩展 Window 接口以支持自定义属性
+declare global {
+  interface Window {
+    CodeHighlight?: any;
+    codeHighlightInstance?: any;
+  }
+}
+
+export {};
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -0,0 +1,68 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    extend: {
+      colors: {
+        // 新的蓝绿配色
+        morandi: {
+          cream: '#aecedd',    // 最浅的蓝灰色
+          beige: '#b1d9d4',    // 淡绿蓝色
+          sage: '#b2c5d5',     // 淡蓝色
+          dusty: '#b2c5d5',    // 中等蓝色 (重复使用)
+          mauve: '#7a99b0',    // 中等蓝灰色 (衍生色)
+          clay: '#6a8ca3',     // 较深蓝灰色 (衍生色)
+          mist: '#9bb5c8',     // 雾蓝色 (衍生色)
+          stone: '#698297',    // 石蓝色 (衍生色)
+          deep: '#5b778e'      // 最深的蓝色
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.6s ease-out',
+        'fade-out': 'fadeOut 0.6s ease-out',
+        'slide-up': 'slideUp 0.5s ease-out',
+        'slide-down': 'slideDown 0.5s ease-out',
+        'scale-in': 'scaleIn 0.4s ease-out',
+        'float': 'float 3s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        fadeOut: {
+          '0%': { opacity: '1', transform: 'translateY(0)' },
+          '100%': { opacity: '0', transform: 'translateY(-10px)' }
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(100%)' },
+          '100%': { transform: 'translateY(0)' }
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(0)' }
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' }
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-5px)' }
+        }
+      },
+      backdropBlur: {
+        'xs': '2px',
+      },
+      borderRadius: {
+        'xl': '1rem',
+        '2xl': '1.5rem',
+        '3xl': '2rem',
+      }
+    },
+  },
+  plugins: [],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "exclude": [
+    "node_modules",
+    "dist",
+    "jiao77.cn",
+    "**/jiao77.cn/**"
+  ]
+}
				`@@ -0,0 +1 @@`
				`/// <reference path="../.astro/types.d.ts" />`