217 lines
4.8 KiB
Markdown
217 lines
4.8 KiB
Markdown
# 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 来改进这个项目！ |