# 车辆监控系统优化总结

---

## 统一性、扩展性、优化流程

### 🗺️ 地图信息卡

去除没必要的视觉样式，将信息进行分类，展示更多信息的同时，缩小的卡片的面积，信息展示更直观，区域划分更明确。可承载更大的信息量，可以兼容更多的场景。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680859150991/1748b577-1fc6-45f4-b491-2a1d84b91cbf.png align="center")

### 🌲 树结构

将筛选的前置条件进行整合，并记录用户的使用习惯。在无需更改配置的情况下进行收起，只展示部分摘要，在布局上更灵活，并易于扩展。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680859822287/bef701ca-f333-47fa-aed5-57ab3fa4a10a.png align="center")

### 🧭 导航

将平台功能进行了全面整合，更直观。在应用面板中可以快捷的搜索或点选功能应用。将标签栏与导航栏整合，相应的拆分右侧辅助功能，通过上下区域划分权重。解决顶部导航展示的视觉层级过多的问题。新的标签样式，方便直接切换和关闭，选中和悬停互动更直观。也可根据不同企业需求，调整默认展示的功能，满足多种定制化需求。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680859961485/39ac20b5-b8ea-4e0e-b710-490876ed4665.png align="center")

### 🔍 查询工具条

将查询条件整合到固定区域，提升功能按钮与查询部分的层次感，新增查询区域可收起的交互方式，在需要时通过收起降低页面信息干扰。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680860143308/c45699f9-be22-4b81-a1f1-d3b6677be14e.png align="center")

### 📦样式的封装

将一些扩展功能封装成小的应用层，方便兼容在各种情况下呼出，而不破坏界面本来的布局。在新功能添加时，进一步降低调整布局的成本。对于通用功能进行场景兼容性测试，以确保在面对不同情况时，相同的功能交互样式具有合理性。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680860256581/a2752dd5-b199-4f9d-a53c-043a28beec45.png align="center")