# SPA-View 项目展示平台

## 项目介绍

SPA-View 是一个基于 Vue3 开发的单页应用项目展示平台，包含前台展示和后台管理两大模块。前台提供精美的项目展示、服务介绍和客户评价等功能，后台支持项目管理和数据看板等功能。整个应用采用现代化的设计风格，结合丰富的动画效果，为用户提供流畅的浏览体验。

## 功能特点

- **精美首页**：包含高端轮播图、精选项目展示、客户评价和合作伙伴展示
- **项目展示**：支持分类筛选、排序和搜索功能的项目列表
- **项目详情**：展示项目的详细信息、特点和相关资源
- **服务介绍**：展示公司提供的各类服务及其特点
- **后台管理**：项目管理、数据统计和用户管理等功能
- **响应式设计**：完美适配手机、平板和桌面设备
- **动画效果**：使用 AOS 和 Swiper 实现丰富的动画和过渡效果

## 技术栈

- **前端框架**：Vue 3 + Composition API
- **构建工具**：Vite
- **UI 框架**：
  - 前台：Tailwind CSS
  - 后台：Ant Design Vue
- **路由管理**：Vue Router 4
- **状态管理**：Pinia
- **HTTP 请求**：Axios
- **动画库**：
  - AOS (Animate On Scroll)
  - Swiper (轮播组件)

## 目录结构

```
src/
├── assets/              # 静态资源
├── components/          # 公共组件
│   └── common/          # 通用组件
├── layouts/             # 布局组件
│   ├── AdminLayout.vue  # 后台布局
│   └── MainLayout.vue   # 前台布局
├── router/             
│   └── index.js         # 路由配置
├── stores/             
│   └── user.js          # 用户状态管理
├── views/
│   ├── frontend/        # 前台页面
│   │   ├── Home.vue     # 首页
│   │   ├── Projects.vue # 项目列表
│   │   ├── Detail.vue   # 项目详情
│   │   ├── Services.vue # 服务介绍
│   │   ├── About.vue    # 关于我们
│   │   └── Personal.vue # 个人中心
│   └── admin/           # 后台页面
│       ├── Dashboard.vue    # 数据看板
│       └── ProjectsCRUD.vue # 项目管理
├── App.vue              # 根组件
└── main.js              # 入口文件
```

## 响应式方案

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

## 动效规范

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

## 安装与使用

### 环境要求

- Node.js >= 16.0.0
- pnpm >= 7.0.0（推荐）

### 安装依赖

```bash
# 推荐使用 pnpm
pnpm install

# 或者使用 npm
npm install
```

### 开发模式

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产版本

```bash
pnpm preview
```

## 浏览器兼容性

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88