From a20ca9a4f4a096e39265ed6a4617847539be224c Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Fri, 25 Apr 2025 08:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 120 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 90 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index f299ecf..78b4ebb 100644
--- a/README.md
+++ b/README.md
@@ -1,42 +1,64 @@
-# 项目展示平台
+# SPA-View 项目展示平台
+
+## 项目介绍
+
+SPA-View 是一个基于 Vue3 开发的单页应用项目展示平台，包含前台展示和后台管理两大模块。前台提供精美的项目展示、服务介绍和客户评价等功能，后台支持项目管理和数据看板等功能。整个应用采用现代化的设计风格，结合丰富的动画效果，为用户提供流畅的浏览体验。
+
+## 功能特点
+
+- **精美首页**：包含高端轮播图、精选项目展示、客户评价和合作伙伴展示
+- **项目展示**：支持分类筛选、排序和搜索功能的项目列表
+- **项目详情**：展示项目的详细信息、特点和相关资源
+- **服务介绍**：展示公司提供的各类服务及其特点
+- **后台管理**：项目管理、数据统计和用户管理等功能
+- **响应式设计**：完美适配手机、平板和桌面设备
+- **动画效果**：使用 AOS 和 Swiper 实现丰富的动画和过渡效果
 
 ## 技术栈
-- 前端框架：Vue3 + Composition API
-- UI框架：Ant Design Vue (后台) + Tailwind CSS (前台)
-- 动画库：AOS.js
-- 路由：Vue Router 4
-- 状态管理：Pinia
-- 请求库：Axios
-- 轮播组件：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/         # 公共组件
-│   ├── ProjectCard.vue # 项目卡片
-│   └── Skeleton.vue    # 加载骨架屏
-├── layouts/            # 布局组件
-│   ├── AdminLayout.vue # 后台布局
-│   └── MainLayout.vue  # 前台布局
+├── components/          # 公共组件
+│   └── common/          # 通用组件
+├── layouts/             # 布局组件
+│   ├── AdminLayout.vue  # 后台布局
+│   └── MainLayout.vue   # 前台布局
 ├── router/             
-│   └── index.js       # 路由配置
+│   └── index.js         # 路由配置
 ├── stores/             
-│   └── user.js        # 用户状态管理
+│   └── user.js          # 用户状态管理
 ├── views/
-│   ├── frontend/       
-│   │   ├── Home.vue          # 首页
-│   │   ├── Projects.vue     # 项目列表
-│   │   └── Detail.vue       # 项目详情
-│   └── admin/          
-│       ├── Login.vue        # 后台登录
+│   ├── frontend/        # 前台页面
+│   │   ├── Home.vue     # 首页
+│   │   ├── Projects.vue # 项目列表
+│   │   ├── Detail.vue   # 项目详情
+│   │   ├── Services.vue # 服务介绍
+│   │   ├── About.vue    # 关于我们
+│   │   └── Personal.vue # 个人中心
+│   └── admin/           # 后台页面
 │       ├── Dashboard.vue    # 数据看板
 │       └── ProjectsCRUD.vue # 项目管理
-├── App.vue
-└── main.js
+├── App.vue              # 根组件
+└── main.js              # 入口文件
 ```
 
 ## 响应式方案
+
 | 设备    | 断点     | 布局模式          | 导航模式         |
 |---------|----------|-------------------|------------------|
 | 手机    | <640px   | 单列流式布局      | 底部导航栏       |
@@ -44,13 +66,51 @@ src/
 | PC      | >1024px  | 12栅格系统        | 顶部水平菜单     |
 
 ## 动效规范
-1. 页面过渡：fade 300ms缓动
-2. 卡片入场：aos fade-up + 交错延迟
-3. 交互反馈：hover缩放+投影提升
-4. 加载动画：骨架屏脉冲效果
 
-## 开发准备
+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
-npm run dev
 ```
+
+### 开发模式
+
+```bash
+pnpm dev
+```
+
+### 构建生产版本
+
+```bash
+pnpm build
+```
+
+### 预览生产版本
+
+```bash
+pnpm preview
+```
+
+## 浏览器兼容性
+
+- Chrome >= 87
+- Firefox >= 78
+- Safari >= 14
+- Edge >= 88