# 项目展示平台

## 技术栈
- 前端框架：Vue3 + Composition API
- UI框架：Ant Design Vue (后台) + Tailwind CSS (前台)
- 动画库：AOS.js
- 路由：Vue Router 4
- 状态管理：Pinia
- 请求库：Axios
- 轮播组件：Swiper

## 目录结构
```
src/
├── assets/              # 静态资源
├── components/         # 公共组件
│   ├── ProjectCard.vue # 项目卡片
│   └── Skeleton.vue    # 加载骨架屏
├── layouts/            # 布局组件
│   ├── AdminLayout.vue # 后台布局
│   └── MainLayout.vue  # 前台布局
├── router/             
│   └── index.js       # 路由配置
├── stores/             
│   └── user.js        # 用户状态管理
├── views/
│   ├── frontend/       
│   │   ├── Home.vue          # 首页
│   │   ├── Projects.vue     # 项目列表
│   │   └── Detail.vue       # 项目详情
│   └── admin/          
│       ├── Login.vue        # 后台登录
│       ├── Dashboard.vue    # 数据看板
│       └── ProjectsCRUD.vue # 项目管理
├── App.vue
└── main.js
```

## 响应式方案
| 设备    | 断点     | 布局模式          | 导航模式         |
|---------|----------|-------------------|------------------|
| 手机    | <640px   | 单列流式布局      | 底部导航栏       |
| 平板    | 640-1024 | 双栏布局          | 侧边折叠菜单     |
| PC      | >1024px  | 12栅格系统        | 顶部水平菜单     |

## 动效规范
1. 页面过渡：fade 300ms缓动
2. 卡片入场：aos fade-up + 交错延迟
3. 交互反馈：hover缩放+投影提升
4. 加载动画：骨架屏脉冲效果

## 开发准备
```bash
npm install
npm run dev
```