# 前端开发指南

## 技术栈选择

### 推荐方案：Vue.js + Element Plus

**理由：**
- 学习曲线平缓，适合快速开发
- Element Plus 组件丰富，适合管理后台
- 社区活跃，文档完善

### 备选方案：React + Ant Design

**理由：**
- 生态系统庞大
- Ant Design 企业级组件库
- 适合大型项目

## 项目结构

```
e-scooter-rental-system/
├── frontend/              # 前端项目
│   ├── public/           # 静态资源
│   ├── src/
│   │   ├── components/   # 公共组件
│   │   ├── views/        # 页面组件
│   │   ├── router/       # 路由配置
│   │   ├── store/        # 状态管理
│   │   ├── api/          # API 接口
│   │   ├── utils/        # 工具函数
│   │   └── App.vue       # 根组件
│   ├── package.json
│   └── vue.config.js
└── server/               # 后端项目 (已存在)
```

## 页面设计

### 1. 车辆管理页面

**功能：**
- 车辆列表展示（表格）
- 车辆搜索和筛选
- 车辆详情查看
- 车辆添加/编辑/删除
- 车辆状态更新

**页面布局：**
```
┌─────────────────────────────────────┐
│ 顶部导航栏                           │
├─────────────────────────────────────┤
│ 搜索栏 + 筛选条件                    │
├─────────────────────────────────────┤
│ 车辆列表（表格）                     │
│ - 车辆编号                           │
│ - 车辆类型                           │
│ - 状态（空闲/使用中/维修中）         │
│ - 位置                               │
│ - 操作（查看/编辑/删除）             │
└─────────────────────────────────────┘
```

### 2. 订单管理页面

**功能：**
- 订单列表展示
- 订单搜索和筛选（按状态、时间等）
- 订单详情查看
- 创建新订单
- 结束订单
- 逾期订单提醒

**页面布局：**
```
┌─────────────────────────────────────┐
│ 顶部导航栏                           │
├─────────────────────────────────────┤
│ 搜索栏 + 筛选条件（状态、时间范围）  │
├─────────────────────────────────────┤
│ 订单列表（表格）                     │
│ - 订单号                             │
│ - 客户名称                           │
│ - 车辆信息                           │
│ - 租期                               │
│ - 费用                               │
│ - 状态                               │
│ - 操作（查看/结束）                  │
└─────────────────────────────────────┘
```

### 3. 客户管理页面

**功能：**
- 客户列表展示
- 客户搜索
- 客户详情查看
- 添加/编辑/删除客户
- 信用评分管理

**页面布局：**
```
┌─────────────────────────────────────┐
│ 顶部导航栏                           │
├─────────────────────────────────────┤
│ 搜索栏                               │
├─────────────────────────────────────┤
│ 客户列表（表格）                     │
│ - 客户姓名                           │
│ - 联系方式                           │
│ - 信用评分                           │
│ - 租赁历史                           │
│ - 操作（查看/编辑/删除）             │
└─────────────────────────────────────┘
```

### 4. 财务统计页面

**功能：**
- 收入统计图表
- 逾期账款统计
- 订单收入趋势
- 导出报表

**页面布局：**
```
┌─────────────────────────────────────┐
│ 顶部导航栏                           │
├─────────────────────────────────────┤
│ 统计卡片                             │
│ - 总收入                             │
│ - 本月收入                           │
│ - 逾期账款                           │
│ - 订单数量                           │
├─────────────────────────────────────┤
│ 图表区域                             │
│ - 收入趋势图                         │
│ - 订单状态分布                       │
│ - 车辆使用率                         │
└─────────────────────────────────────┘
```

## 组件设计

### 公共组件

1. **导航栏组件**
   - 顶部导航
   - 侧边栏菜单

2. **表格组件**
   - 支持分页
   - 支持搜索
   - 支持排序

3. **表单组件**
   - 输入框
   - 下拉选择
   - 日期选择
   - 表单验证

4. **弹窗组件**
   - 确认弹窗
   - 详情弹窗
   - 编辑弹窗

### 页面组件

1. **车辆管理**
   - VehicleList.vue
   - VehicleDetail.vue
   - VehicleForm.vue

2. **订单管理**
   - OrderList.vue
   - OrderDetail.vue
   - OrderForm.vue

3. **客户管理**
   - CustomerList.vue
   - CustomerDetail.vue
   - CustomerForm.vue

4. **财务统计**
   - FinanceDashboard.vue
   - StatisticsChart.vue

## API 接口调用

### 基础配置

```javascript
// src/api/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000
})

// 请求拦截器
request.interceptors.request.use(config => {
  // 添加认证 token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
request.interceptors.response.use(
  response => response.data,
  error => {
    console.error('API Error:', error)
    return Promise.reject(error)
  }
)

export default request
```

### 车辆管理 API

```javascript
// src/api/vehicle.js
import request from './request'

export const getVehicles = (params) => request.get('/vehicles', { params })
export const getVehicle = (id) => request.get(`/vehicles/${id}`)
export const createVehicle = (data) => request.post('/vehicles', data)
export const updateVehicle = (id, data) => request.put(`/vehicles/${id}`, data)
export const deleteVehicle = (id) => request.delete(`/vehicles/${id}`)
export const getVehiclesByStatus = (status) => request.get(`/vehicles/status/${status}`)
```

### 订单管理 API

```javascript
// src/api/order.js
import request from './request'

export const getOrders = (params) => request.get('/orders', { params })
export const getOrder = (id) => request.get(`/orders/${id}`)
export const createOrder = (data) => request.post('/orders', data)
export const updateOrder = (id, data) => request.put(`/orders/${id}`, data)
export const endOrder = (id) => request.post(`/orders/${id}/end`)
export const getOverdueOrders = () => request.get('/orders/overdue')
```

### 客户管理 API

```javascript
// src/api/customer.js
import request from './request'

export const getCustomers = (params) => request.get('/customers', { params })
export const getCustomer = (id) => request.get(`/customers/${id}`)
export const createCustomer = (data) => request.post('/customers', data)
export const updateCustomer = (id, data) => request.put(`/customers/${id}`, data)
export const deleteCustomer = (id) => request.delete(`/customers/${id}`)
export const searchCustomers = (keyword) => request.get(`/customers/search/${keyword}`)
```

## 状态管理

### 使用 Vuex

```javascript
// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    vehicles: [],
    orders: [],
    customers: [],
    currentUser: null
  },
  mutations: {
    SET_VEHICLES(state, vehicles) {
      state.vehicles = vehicles
    },
    SET_ORDERS(state, orders) {
      state.orders = orders
    },
    SET_CUSTOMERS(state, customers) {
      state.customers = customers
    }
  },
  actions: {
    async fetchVehicles({ commit }) {
      const response = await getVehicles()
      commit('SET_VEHICLES', response.data)
    }
  }
})
```

## 路由配置

```javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    redirect: '/vehicles'
  },
  {
    path: '/vehicles',
    name: 'VehicleList',
    component: () => import('@/views/VehicleList.vue')
  },
  {
    path: '/vehicles/:id',
    name: 'VehicleDetail',
    component: () => import('@/views/VehicleDetail.vue')
  },
  {
    path: '/orders',
    name: 'OrderList',
    component: () => import('@/views/OrderList.vue')
  },
  {
    path: '/customers',
    name: 'CustomerList',
    component: () => import('@/views/CustomerList.vue')
  },
  {
    path: '/finance',
    name: 'FinanceDashboard',
    component: () => import('@/views/FinanceDashboard.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

## 样式设计

### 使用 Element Plus 主题

```javascript
// src/main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')
```

### 自定义样式

```scss
// src/assets/styles/main.scss
// 主题色
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;

// 布局
.container {
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

// 表格样式
.table-container {
  .el-table {
    .cell {
      text-align: center;
    }
  }
}

// 表单样式
.form-container {
  max-width: 600px;
  margin: 0 auto;
}
```

## 开发步骤

### 1. 创建前端项目

```bash
# 进入项目目录
cd E:\code\e-scooter-rental-system

# 创建前端项目
npm create vue@latest frontend
# 或使用 Vue CLI
# vue create frontend

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 安装 Element Plus
npm install element-plus

# 安装 Vue Router
npm install vue-router@4

# 安装 Vuex (可选)
npm install vuex@next
```

### 2. 配置开发环境

```javascript
// frontend/vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}
```

### 3. 启动开发服务器

```bash
npm run dev
```

访问：http://localhost:8080

## 注意事项

1. **跨域问题**
   - 开发环境使用 proxy 解决跨域
   - 生产环境需要配置 CORS

2. **API 认证**
   - 使用 JWT token 认证
   - token 存储在 localStorage

3. **错误处理**
   - 统一错误提示
   - 网络错误处理

4. **性能优化**
   - 按需加载组件
   - 图片懒加载
   - 数据缓存

## 下一步

1. 安装 MongoDB（首要任务）
2. 生成测试数据
3. 创建前端项目
4. 开发车辆管理页面
5. 开发订单管理页面
6. 开发客户管理页面
7. 开发财务统计页面