# 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 来改进这个项目！