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)
- 图标和描述文本
- 悬浮动画效果
<NavigationCard
title="项目展示"
description="查看我的最新项目"
href="/projects"
icon="fas fa-code"
color="primary"
size="large"
/>
NavigationGrid
导航网格布局：
- 自适应列数
- 交错动画效果
- 响应式设计
<NavigationGrid title="导航中心" columns={3}>
<!-- NavigationCard 组件 -->
</NavigationGrid>
报告组件
ReportSection
报告区块组件：
- 可配置标题层级
- 自动分割线
- 深色主题优化
<ReportSection title="数据分析" subtitle="详细数据报告" level={2}>
<p>报告内容...</p>
</ReportSection>
MetricCard
指标卡片：
- 数值显示
- 变化趋势指示
- 多种颜色主题
<MetricCard
title="访问量"
value="125,847"
change="+12.5%"
changeType="positive"
icon="fas fa-users"
/>
通用组件
Container
万能容器组件：
- 多种视觉样式 (glass, glass-dark, solid, outline)
- 灵活尺寸配置
- 圆角和阴影选项
<Container variant="glass" size="large" padding="xl">
内容...
</Container>
AnimatedElement
动画包装器：
- 8种动画效果
- 滚动触发
- 自定义延迟和时长
<AnimatedElement animation="fadeInUp" delay={300} trigger="scroll">
需要动画的内容...
</AnimatedElement>
Header
智能页眉：
- 自动展开/收缩
- 滚动响应
- 移动端适配
🎨 配色方案
项目采用莫兰蒂配色，定义在 tailwind.config.mjs:
morandi: {
cream: '#F4F1E8', # 奶白色
beige: '#E8DCC0', # 米色
sage: '#C8D5B9', # 鼠尾草绿
dusty: '#D4B5A0', # 尘土色
mauve: '#B8A5A5', # 紫灰色
clay: '#A68B7B', # 陶土色
mist: '#C7B8A1', # 薄雾色
stone: '#9B8B7A', # 石头色
deep: '#7A6B5D' # 深褐色
}
🚀 开发命令
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产构建
npm run preview
📱 响应式设计
- 桌面端: 完整功能和动画效果
- 平板端: 优化布局和交互
- 移动端: 简化界面，保持可用性
✨ 动画效果
- 页面加载: 渐入动画
- 滚动触发: 元素逐步显现
- 悬浮效果: 卡片提升和缩放
- 交错动画: 网格元素依次出现
🔧 自定义扩展
添加新的导航卡片
在 src/pages/index.astro 中添加新的 NavigationCard 组件
创建新的报告页面
- 复制
src/pages/reports.astro - 修改内容和数据
- 使用报告组件库构建布局
扩展颜色主题
在 tailwind.config.mjs 中添加新的颜色定义，然后在组件中使用
📦 技术栈
- Astro: 现代化静态站点生成器
- Tailwind CSS: 实用优先的CSS框架
- TypeScript: 类型安全的JavaScript
- Font Awesome: 图标库
🤝 贡献
欢迎提交 Issue 和 Pull Request 来改进这个项目！