initial commit
This commit is contained in:
Jiao77
217
README.md
Normal file
217
README.md
Normal file
@@ -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 来改进这个项目！
|
||||
Reference in New Issue
Block a user