1 平台概述
外运长江营销综合服务平台是一个集物流产品展示、物流资源管理、物流通道可视化和后台数据维护于一体的 Web 应用系统,涵盖 6 大物流产品和 64 个物流资源点。
平台采用前后台分离设计:
- 前台:面向所有用户,展示物流产品详情、物流资源信息和物流通道可视化地图
- 后台:面向授权管理员,提供数据的新增、编辑、删除、导出,以及系统设置(高德 API Key、线路模式)功能
2 前台功能使用
导航栏:页面顶部导航栏包含以下入口:
| 入口 | 功能 |
| 首页 | 平台介绍、数据统计概览 |
| 物流产品 | 浏览全部 6 个物流产品,点击卡片查看详情 |
| 物流资源 | 浏览 64 个资源点,支持按类型筛选 |
| 物流通道 | 进入物流通道可视化地图页面(独立页面) |
| 关于我们 | 平台简介、核心服务、联系方式 |
| 帮助 | 打开本用户手册 |
| 后台管理 | 进入管理员登录界面 |
产品详情:点击任意产品卡片,弹窗展示产品完整信息,包括产品简介、运营时刻表、覆盖站点、支持船司、客户案例等。
资源筛选:在物流资源页面,可通过顶部筛选按钮按类型(码头/仓库/铁路站点/堆场)过滤资源列表。
首页快捷入口:首页 Hero 区提供三个快捷按钮:
- 浏览物流产品(金色按钮):跳转到物流产品列表
- 选择物流通道(蓝色按钮):在新页面打开物流通道可视化地图
- 查看物流资源(描边按钮):跳转到物流资源列表
3 物流通道地图
页面入口:点击导航栏「物流通道」或首页「选择物流通道」按钮,进入独立的物流通道可视化地图页面(基于 Leaflet + 高德地图)。
地图元素:
| 元素 | 说明 |
| 港口/站点标记 | 地图上的圆点标记,鼠标悬停显示名称 |
| 海运航线 | 蓝色曲线,连接沿海港口与海外目的地 |
| 铁路通道 | 橙黄色线条,沿真实铁路走廊绘制 |
| 水路通道 | 青色线条,沿长江干线绘制 |
| 公路通道 | 灰色虚线,调用高德驾车路径规划 API 绘制 |
查看通道详情:点击任意通道线,弹出气泡显示通道名称、类型和时效信息,同时该通道高亮显示(加粗、置顶)。
线路模式切换:地图右上角筛选面板提供两种线路绘制模式:
- 精确匹配线路(默认):尽量沿真实路网绘制。铁路走真实铁路走廊(多跳中转),水路走长江干线,公路调用高德驾车 API。需要配置有效的高德 API Key 才能绘制公路段。
- 模拟线路:采用平滑曲线模拟,视觉更美观,不依赖 API Key。适合演示场景或未配置 Key 时使用。
筛选通道:筛选面板可按通道类型(海运/铁路/水路/公路)显示或隐藏对应通道。
提示:线路模式和 API Key 的默认值可在后台「系统设置」中配置,详见第 5 节。
4 后台管理操作
登录方式:
提示:点击导航栏"后台管理"按钮,在弹出的登录框中输入上述账号密码即可进入后台。
后台功能模块:
- 产品管理:查看、搜索、新增、编辑、删除物流产品,导出产品数据
- 资源管理:查看、搜索、新增、编辑、删除物流资源,导出资源数据
- 系统设置:配置高德地图 API Key(含有效性检测)和默认线路模式(详见第 5 节)
新增产品:点击"新增产品"按钮,在弹出的表单中填写产品信息(带 * 号为必填项),点击"保存"完成添加。
新增资源:点击"新增资源"按钮,在弹出的表单中填写资源信息(带 * 号为必填项),点击"保存"完成添加。
编辑数据:在数据列表中点击对应行的"编辑"按钮,在弹出的表单中修改信息后保存。
删除数据:在数据列表中点击对应行的"删除"按钮,确认后即可删除。删除操作不可撤销。
5 系统设置
后台管理第三个 Tab「系统设置」用于配置物流通道地图页所需的两个全局参数。设置保存在浏览器的 localStorage 中,前后台与地图页共享同一份数据。
高德地图 API Key:
检测 API Key 有效性:在 API Key 输入框下方点击「检测」按钮,系统会用一对固定测试坐标(上海→苏州)调用高德 API:
| 检测结果 | 含义 |
| Key 有效(测试路径约 XX km) | Key 可用,显示测试路径距离 |
| Key 无效:<错误信息>(code: XXXX) | Key 不可用,显示高德返回的错误码和说明 |
| 检测失败:网络错误 | 无法访问高德 API,请检查网络 |
线路模式:设置物流通道地图页的默认线路绘制方式(卡片式单选):
- 精确匹配线路(默认):沿真实路网绘制,需配合有效的 API Key
- 模拟线路:曲线模拟,无需 API Key,视觉更美观
保存设置:点击「保存设置」按钮,配置立即生效。地图页刷新后会读取最新设置。
提示:地图页右上角筛选面板也可临时切换线路模式,但不会写回后台设置;如需永久更改默认值,请在此处保存。
6 数据管理说明
数据存储:所有数据保存在浏览器的 localStorage 中,关闭浏览器后数据不会丢失。但清除浏览器缓存会导致数据重置为初始状态。
数据字段说明:
产品数据字段:
| 字段 | 说明 | 必填 |
| 产品名称 | 产品的唯一标识名称 | 是 |
| 产品分类 | 全程物流/海铁联运/陆改水/港口直拖/其他 | 是 |
| 产品标语 | 产品的一句话描述 | 否 |
| 产品描述 | 产品的详细介绍 | 否 |
| 运营主体 | 负责运营的公司名称 | 否 |
| 服务范围 | 提供的服务类型 | 否 |
| 联系人/电话 | 业务联系人信息 | 否 |
| 服务特色 | 用逗号分隔的特色标签 | 否 |
资源数据字段:
| 字段 | 说明 | 必填 |
| 资源名称 | 资源的唯一标识名称 | 是 |
| 资源类型 | 码头/仓库/铁路站点/堆场 | 是 |
| 所在城市 | 资源所在的城市 | 是 |
| 所在省份 | 资源所在的省份 | 是 |
| 业务权属 | 自有/租赁/合资/公共 | 否 |
| 业务单位 | 负责运营的单位名称 | 否 |
注意:如果数据被意外清除,刷新页面即可恢复为初始预置数据。
7 数据导入导出
导出数据:在后台管理的产品管理或资源管理页面,点击"导出"按钮,系统将自动下载对应数据的 JSON 格式文件。
导出文件格式:标准 JSON 文件,可直接用于数据分析、备份或二次开发。
提示:建议定期导出数据作为备份,防止浏览器缓存清除导致数据丢失。
8 常见问题
Q:忘记管理员密码怎么办?
A:默认管理员账号为 admin / admin123。如需修改,请联系技术开发人员。
Q:数据会丢失吗?
A:数据保存在浏览器 localStorage 中,正常关闭浏览器不会丢失。但清除浏览器缓存或使用无痕模式会导致数据重置。
Q:新增的数据前台看不到怎么办?
A:新增或修改数据后,前台页面会自动刷新。如未显示,请手动刷新浏览器页面。
Q:如何恢复初始数据?
A:在浏览器控制台中执行 localStorage.clear() 然后刷新页面,即可恢复为初始预置数据。
Q:支持手机端访问吗?
A:支持。平台采用响应式设计,可在手机、平板、电脑等设备上正常浏览和使用。
Q:如何关闭弹窗?
A:点击弹窗右上角的关闭按钮,或点击弹窗外的半透明遮罩区域,或按键盘 Esc 键。
Q:物流通道地图页的公路线显示为虚线怎么办?
A:说明未配置有效的高德 API Key,或当前为「模拟线路」模式。请进入后台「系统设置」配置并检测 API Key,并将线路模式切换为「精确匹配线路」。
Q:点击导航栏「物流通道」后弹出系统提示框怎么办?
A:这是 Trae 预览环境的限制(自定义协议无法在 Windows 打开)。代码本身正确,部署到正式服务器后可正常跳转。在 Trae 中可通过「浏览器」工具访问本地预览服务器(参见 start-preview.sh)。