406 lines
19 KiB
Markdown
406 lines
19 KiB
Markdown
# 页面设计
|
||
|
||
## 设计原则
|
||
|
||
### 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. 测试和优化
|