# 页面设计

## 设计原则

### 1. 用户体验优先
- 简洁明了的界面布局
- 直观的操作流程
- 及时的反馈提示
- ⚠️ **注意**：确保选中状态、悬停状态等交互状态有足够的对比度，避免用户看不清当前选中的项目

### 2. 响应式设计
- 适配不同屏幕尺寸
- 移动端友好
- 桌面端优化

### 3. 一致性
- 统一的配色方案
- 统一的组件样式
- 统一的交互方式

## 配色方案

### 主色调
- 主色：#409EFF（蓝色）
- 成功：#67C23A（绿色）
- 警告：#E6A23C（橙色）
- 危险：#F56C6C（红色）
- 信息：#909399（灰色）

### 背景色
- 页面背景：#F5F7FA
- 卡片背景：#FFFFFF
- 表格斑马纹：#FAFAFA

## 布局设计

### 顶部导航栏

```
┌─────────────────────────────────────────────────────────────┐
│  logo  │  车辆管理  │  订单管理  │  客户管理  │  财务统计  │  用户名 │
└─────────────────────────────────────────────────────────────┘
```

### 侧边栏菜单

```
┌──────────────┬──────────────────────────────────────────────┐
│              │  顶部导航栏                                  │
│  侧边栏      ├──────────────────────────────────────────────┤
│  - 车辆管理  │                                              │
│  - 订单管理  │  内容区域                                    │
│  - 客户管理  │                                              │
│  - 财务统计  │                                              │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘
```

#### 侧边栏菜单样式（重要！）

⚠️ **常见问题**：Element Plus 默认的菜单选中样式是深蓝色背景 + 白色文字，在某些主题下对比度不足，导致选中项看不清。

**解决方案：**

```css
/* 侧边栏菜单自定义样式 */
.el-menu {
  border-right: none !important;
}

/* 选中项样式 - 使用主色调但调整对比度 */
.el-menu-item.is-active {
  background-color: rgba(64, 158, 255, 0.15) !important;
  color: #409EFF !important;
  font-weight: 600;
}

/* 悬停效果 */
.el-menu-item:hover {
  background-color: rgba(64, 158, 255, 0.08) !important;
}

/* 选中项左侧蓝色指示条（替代全覆盖背景） */
.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #409EFF;
  border-radius: 0 2px 2px 0;
}

/* 展开/折叠图标颜色 */
.el-sub-menu__title {
  color: #303133;
}

.el-menu-item, .el-sub-menu__title {
  transition: all 0.3s ease;
}
```

**设计要点：**
- 不要用全覆盖的深色背景
- 使用左侧 3px 蓝色指示条 + 浅蓝色背景
- 保持文字清晰可读
- 添加过渡动画提升体验

## 页面设计详情

### 1. 车辆管理页面

#### 车辆列表页

**布局：**
```
┌─────────────────────────────────────────────────────────────┐
│  车辆管理 > 车辆列表                                         │
├─────────────────────────────────────────────────────────────┤
│  [搜索框] [状态筛选] [车辆类型筛选] [添加车辆]               │
├─────────────────────────────────────────────────────────────┤
│  ┌────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┐   │
│  │编号│类型  │状态  │位置  │续航  │价格  │操作  │      │   │
│  ├────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤   │
│  │001 │电动车│空闲  │A区   │50km  │¥50/天│查看 编辑 删除│   │
│  │002 │电动车│使用中│B区   │45km  │¥50/天│查看 编辑 删除│   │
│  │003 │电动车│维修中│C区   │-     │¥50/天│查看 编辑 删除│   │
│  └────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘   │
│                                                             │
│  [分页：1 2 3 4 5 ... 共 50 条]                              │
└─────────────────────────────────────────────────────────────┘
```

#### 车辆详情页

**布局：**
```
┌─────────────────────────────────────────────────────────────┐
│  车辆管理 > 车辆详情 > 001号车辆                             │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐                  │
│  │ 车辆信息        │  │ 位置信息        │                  │
│  │ 编号：001       │  │ 当前位置：A区   │                  │
│  │ 类型：电动车    │  │ 最后更新：...   │                  │
│  │ 状态：空闲      │  │                 │                  │
│  │ 续航：50km      │  └─────────────────┘                  │
│  │ 价格：¥50/天    │                                       │
│  └─────────────────┘  ┌─────────────────┐                  │
│                       │ 维护记录        │                  │
│  ┌─────────────────┐  │ 2026-03-01 ...  │                  │
│  │ 车辆图片        │  │ 2026-02-15 ...  │                  │
│  │                 │  └─────────────────┘                  │
│  └─────────────────┘                                       │
└─────────────────────────────────────────────────────────────┘
```

### 2. 订单管理页面

#### 订单列表页

**布局：**
```
┌─────────────────────────────────────────────────────────────┐
│  订单管理 > 订单列表                                         │
├─────────────────────────────────────────────────────────────┤
│  [搜索框] [状态筛选] [时间筛选] [创建订单]                   │
├─────────────────────────────────────────────────────────────┤
│  ┌──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┐ │
│  │订单号│客户  │车辆  │租期  │费用  │状态  │操作  │      │ │
│  ├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤ │
│  │202603│张三  │001   │7天   │¥350  │进行中│查看 结束│   │
│  │202602│李四  │002   │30天  │¥1500 │已完成│查看     │   │
│  │202601│王五  │003   │逾期  │¥500  │逾期  │查看 结束│   │
│  └──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘ │
│                                                             │
│  [分页：1 2 3 4 5 ... 共 100 条]                             │
└─────────────────────────────────────────────────────────────┘
```

#### 订单详情页

**布局：**
```
┌─────────────────────────────────────────────────────────────┐
│  订单管理 > 订单详情 > 202603001                             │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐                  │
│  │ 订单信息        │  │ 客户信息        │                  │
│  │ 订单号：202603001│  │ 姓名：张三     │                  │
│  │ 创建时间：...   │  │ 电话：138...    │                  │
│  │ 租期：7天       │  │ 信用分：85     │                  │
│  │ 费用：¥350      │  └─────────────────┘                  │
│  │ 状态：进行中    │                                       │
│  └─────────────────┘  ┌─────────────────┐                  │
│                       │ 车辆信息        │                  │
│  ┌─────────────────┐  │ 编号：001       │                  │
│  │ 订单备注        │  │ 类型：电动车    │                  │
│  │ ...             │  └─────────────────┘                  │
│  └─────────────────┘                                       │
└─────────────────────────────────────────────────────────────┘
```

### 3. 客户管理页面

#### 客户列表页

**布局：**
```
┌─────────────────────────────────────────────────────────────┐
│  客户管理 > 客户列表                                         │
├─────────────────────────────────────────────────────────────┤
│  [搜索框] [添加客户]                                         │
├─────────────────────────────────────────────────────────────┤
│  ┌──────┬──────┬──────┬──────┬──────┬──────┬──────┬──────┐ │
│  │姓名  │电话  │信用分│租赁次数│状态  │操作  │      │      │ │
│  ├──────┼──────┼──────┼──────┼──────┼──────┼──────┼──────┤ │
│  │张三  │138...│85    │5     │正常  │查看 编辑 删除│   │
│  │李四  │139...│72    │3     │正常  │查看 编辑 删除│   │
│  │王五  │137...│60    │1     │异常  │查看 编辑 删除│   │
│  └──────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┘ │
│                                                             │
│  [分页：1 2 3 4 5 ... 共 50 条]                              │
└─────────────────────────────────────────────────────────────┘
```

### 4. 财务统计页面

#### 财务仪表盘

**布局：**
```
┌─────────────────────────────────────────────────────────────┐
│  财务统计 > 仪表盘                                           │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ 总收入   │ │ 本月收入 │ │ 逾期账款 │ │ 订单数量 │       │
│  │ ¥50,000  │ │ ¥8,500   │ │ ¥2,000   │ │ 150      │       │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘       │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────┐ ┌─────────────────────┐   │
│  │ 收入趋势图                  │ │ 订单状态分布        │   │
│  │                             │ │                     │   │
│  │    ▲                        │ │  ┌─────┐            │   │
│  │    │   ╭───╮                │ │  │完成 │ 60%       │   │
│  │    │ ╭─╯   ╰─╮              │ │  ├─────┤            │   │
│  │    │─╯       ╰──╮           │ │  │进行中│ 30%       │   │
│  │    │            ╰──╮        │ │  ├─────┤            │   │
│  │    └────────────────╯        │ │  │逾期  │ 10%       │   │
│  │    1月 2月 3月 4月           │ │  └─────┘            │   │
│  └─────────────────────────────┘ └─────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
```

## 组件设计

### 1. 搜索框组件

```vue
<template>
  <div class="search-box">
    <el-input
      v-model="keyword"
      placeholder="搜索..."
      @keyup.enter="handleSearch"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
    <el-button @click="handleSearch">搜索</el-button>
  </div>
</template>
```

### 2. 表格组件

```vue
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <el-tag :type="getStatusType(row.status)">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{ row }">
        <el-button size="small" @click="handleView(row)">查看</el-button>
        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
```

### 3. 表单组件

```vue
<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="车辆编号">
      <el-input v-model="form.id" />
    </el-form-item>
    <el-form-item label="车辆类型">
      <el-select v-model="form.type" placeholder="请选择">
        <el-option label="电动车" value="electric" />
        <el-option label="摩托车" value="motorcycle" />
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="form.status">
        <el-radio label="空闲">空闲</el-radio>
        <el-radio label="使用中">使用中</el-radio>
        <el-radio label="维修中">维修中</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
```

## 交互设计

### 1. 操作反馈

- **成功提示**：绿色 toast 提示
- **错误提示**：红色 toast 提示
- **确认弹窗**：删除操作前确认

### 2. 加载状态

- **表格加载**：骨架屏
- **页面加载**：全屏 loading
- **按钮加载**：按钮 loading 状态

### 3. 表单验证

- **必填项**：红色星号标记
- **格式验证**：实时验证
- **错误提示**：下方红色文字

## 响应式设计

### 桌面端（> 1200px）

- 侧边栏固定宽度 200px
- 内容区域自适应
- 表格显示完整列

### 平板端（768px - 1200px）

- 侧边栏可折叠
- 表格部分列隐藏
- 卡片布局调整

### 移动端（< 768px）

- 侧边栏隐藏，使用汉堡菜单
- 表格转为卡片列表
- 表单单列布局

## 开发建议

### 1. 组件复用

- 公共组件放在 `components/common/`
- 业务组件放在 `components/business/`
- 工具函数放在 `utils/`

### 2. 状态管理

- 简单状态使用 Vuex
- 复杂状态考虑 Pinia
- 本地存储使用 localStorage

### 3. 性能优化

- 图片懒加载
- 组件按需加载
- 数据缓存策略

### 4. 代码规范

- 使用 ESLint + Prettier
- 组件文件大小不超过 300 行
- 注释重要逻辑

## 下一步

1. 安装 MongoDB（首要任务）
2. 生成测试数据
3. 创建前端项目
4. 实现页面设计
5. 测试和优化