e-scooter-rental-system/docs/页面设计.md

页面设计

设计原则

1. 用户体验优先

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

2. 响应式设计

• 适配不同屏幕尺寸
• 移动端友好
• 桌面端优化

3. 一致性

• 统一的配色方案
• 统一的组件样式
• 统一的交互方式

配色方案

主色调

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

背景色

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

布局设计

顶部导航栏

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

侧边栏菜单

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

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

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

解决方案：

/* 侧边栏菜单自定义样式 */
.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. 搜索框组件

<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. 表格组件

<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. 表单组件

<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. 测试和优化