# arkshoes

**Repository Path**: doesnotexist255/arkshoes

## Basic Information

- **Project Name**: arkshoes
- **Description**: 方舟鞋城前端页面，使用 Vue3 + Vite + Element Plus + TypeScript 技术栈。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-12
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 方舟鞋城 - 前端项目

## 项目概述

这是一个基于 Vue 3 + TypeScript + Element Plus 的鞋类电商平台前端项目，包含用户前台和管理后台两个主要模块。

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **开发语言**: TypeScript
- **UI 组件库**: Element Plus
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **构建工具**: Vite
- **样式预处理**: SCSS
- **代码规范**: ESLint + Prettier

## 项目结构

```
arkshoes/
├── src/
│   ├── api/                 # API 服务层
│   │   ├── authService.ts   # 用户认证服务
│   │   ├── adminService.ts  # 管理员服务
│   │   ├── productService.ts # 商品服务
│   │   ├── orderService.ts  # 订单服务
│   │   └── index.ts         # API 统一导出
│   ├── components/          # 公共组件
│   ├── layouts/             # 布局组件
│   │   ├── MainLayout.vue   # 主布局（用户前台）
│   │   ├── AdminLayout.vue  # 管理后台布局
│   │   └── AuthLayout.vue   # 认证页面布局
│   ├── router/              # 路由配置
│   ├── stores/              # 状态管理
│   │   ├── auth.ts          # 认证状态
│   │   ├── cart.ts          # 购物车状态
│   │   └── index.ts         # Store 统一导出
│   ├── types/               # TypeScript 类型定义
│   ├── views/               # 页面组件
│   │   ├── home/            # 首页
│   │   ├── product/         # 商品相关页面
│   │   ├── cart/            # 购物车
│   │   ├── order/           # 订单相关页面
│   │   ├── user/            # 用户中心
│   │   ├── auth/            # 认证页面
│   │   ├── admin/           # 管理后台
│   │   ├── payment/         # 支付相关页面
│   │   └── error/           # 错误页面
│   ├── App.vue              # 根组件
│   └── main.ts              # 应用入口
├── public/                  # 静态资源
├── package.json             # 项目依赖
└── vite.config.ts          # Vite 配置
```

## 功能模块

### 用户前台
- **首页**: 轮播图、分类导航、商品推荐
- **商品**: 商品列表、商品详情、分类商品、品牌商品、搜索
- **购物车**: 商品添加、数量修改、批量操作
- **订单**: 订单创建、订单列表、订单详情、结算
- **用户中心**: 个人信息、收货地址、订单管理、收藏、优惠券、账户安全
- **支付**: 支付流程、支付成功/失败页面

### 管理后台
- **仪表板**: 数据统计、图表展示
- **商品管理**: 商品增删改查、状态管理
- **订单管理**: 订单查看、状态更新
- **用户管理**: 用户信息管理
- **分类管理**: 商品分类管理
- **品牌管理**: 商品品牌管理

## 快速开始

### 环境要求
- Node.js >= 16
- pnpm >= 7

### 安装依赖
```bash
pnpm install
```

### 开发模式
```bash
pnpm dev
```

### 构建生产版本
```bash
pnpm build
```

### 类型检查
```bash
pnpm type-check
```

## 开发规范

### 代码风格
- 使用 2 空格缩进
- 使用单引号
- 使用 Composition API
- 组件名使用 PascalCase
- 文件名使用 PascalCase

### 组件规范
- 使用 Element Plus 组件库
- 响应式设计，支持移动端
- 统一的错误处理和加载状态
- 使用 TypeScript 类型定义

### API 规范
- RESTful API 设计
- 统一的响应格式
- 错误处理机制
- 请求/响应拦截器

## 路由配置

### 用户前台路由
- `/` - 首页
- `/products` - 商品列表
- `/product/:id` - 商品详情
- `/category/:id` - 分类商品
- `/brand/:id` - 品牌商品
- `/search` - 搜索结果
- `/cart` - 购物车
- `/orders` - 订单列表
- `/order/:id` - 订单详情
- `/checkout` - 结算页面
- `/user/*` - 用户中心
- `/payment` - 支付页面

### 管理后台路由
- `/admin` - 管理后台首页
- `/admin/products` - 商品管理
- `/admin/orders` - 订单管理
- `/admin/users` - 用户管理
- `/admin/categories` - 分类管理
- `/admin/brands` - 品牌管理

## 状态管理

### 认证状态 (auth.ts)
- 用户登录状态
- 用户信息
- 管理员权限
- Token 管理

### 购物车状态 (cart.ts)
- 购物车商品列表
- 商品数量管理
- 批量操作
- 本地存储同步

## 注意事项

1. **图片资源**: 目前使用占位图片，实际开发中需要替换为真实图片
2. **API 集成**: 组件中的 API 调用目前使用模拟数据，需要集成真实后端 API
3. **类型定义**: 部分类型定义可能需要根据实际后端 API 调整
4. **权限控制**: 管理后台的权限控制需要根据实际业务需求完善

## 本地静态图片（需人工替换）

前端已将外部占位图改为本地静态资源路径，图片位于 `public/images/` 下。将真实图片以相同文件名放入对应目录即可，无需改代码。

放置路径与文件名约定（同名覆盖即可）

- 首页轮播图（`Home.vue`）
  - `/public/images/banners/banner-1.jpg`
  - `/public/images/banners/banner-2.jpg`
  - `/public/images/banners/banner-3.jpg`

- 商品示例图（多处使用：`Home.vue` 模拟商品、`Payment.vue`、`OrderList.vue`、`OrderDetail.vue`、`Wishlist.vue`）
  - `/public/images/products/mock-1.jpg`
  - `/public/images/products/mock-2.jpg`
  - ...（建议至少提供 `mock-1.jpg` 至 `mock-8.jpg`，`Home.vue` 默认会引用 1..8）

- 默认头像（`UserCenter.vue`、`Profile.vue`）
  - `/public/images/avatars/default-80.png`
  - `/public/images/avatars/default-100.png`

目录结构（已创建 `.keep` 占位文件，直接放图即可）

```
public/
  images/
    banners/
      banner-1.jpg
      banner-2.jpg
      banner-3.jpg
    products/
      mock-1.jpg
      mock-2.jpg
      ...
    avatars/
      default-80.png
      default-100.png
```

推荐尺寸与比例（可按需调整）

- 轮播图：1200x400（约 3:1），JPG
- 商品图：300x300（1:1），JPG/PNG，主体居中，留边适配裁剪
- 头像：80x80、100x100（1:1），PNG（透明背景更佳）

访问路径说明

- 开发与生产环境中，`public/` 下资源以根路径 `/` 提供，比如：
  - `<img src="/images/banners/banner-1.jpg" />`
  - `<img src="/images/products/mock-1.jpg" />`

如需更换为自定义文件名，请同步修改使用处：

- 轮播图路径：`src/views/home/Home.vue` 中的 `banners` 数组
- 页面内示例商品图：`Payment.vue`、`OrderList.vue`、`OrderDetail.vue`、`Wishlist.vue`
- 默认头像：`UserCenter.vue`、`Profile.vue`

## 开发进度

- ✅ 项目基础架构搭建
- ✅ 路由配置完成
- ✅ 所有页面组件创建完成
- ✅ 基础样式和布局完成
- ✅ API 服务层框架完成
- ✅ 状态管理完成
- 🟡 类型定义完善中
- 🔄 API 集成进行中
- ⏳ 功能测试和优化

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交代码
4. 创建 Pull Request

## 许可证

MIT License