1 平台概述
外运长江营销综合服务平台是一个集物流产品展示、物流资源管理、物流通道可视化和后台数据维护于一体的 Web 应用系统，涵盖 7 大物流产品和 71 个物流资源点。
平台采用前后台分离设计：
- 前台：面向所有用户，展示物流产品详情、物流资源信息和物流通道可视化地图
- 后台：面向授权管理员，提供数据的新增、编辑、删除、导出，以及系统设置（高德 API Key、线路模式）功能
2 前台功能使用
导航栏：页面顶部导航栏包含以下入口：
| 入口 | 功能 |
|---|
| 首页 | 平台介绍、数据统计概览 |
| 物流产品 | 浏览全部 7 个物流产品，点击卡片查看详情 |
| 物流资源 | 浏览 71 个资源点，支持按类型筛选 |
| 物流通道 | 进入物流通道可视化地图页面（独立页面） |
| 关于我们 | 平台简介、核心服务、联系方式 |
| 帮助 | 跳转到独立帮助页面 |
| 后台管理 | 进入管理员登录界面 |
产品详情：点击任意产品卡片，弹窗展示产品完整信息，包括通道示意图（动态展示该产品的港口、城市、目的地节点及通道连线）、产品简介、运营时刻表、覆盖站点、海运航线时效、销售团队、支持船司、客户案例等。
资源筛选：在物流资源页面，可通过顶部筛选按钮按类型（码头/仓库/铁路站点/堆场）过滤资源列表，同时显示资源总数、各类资源数量、覆盖城市数、服务省份数等分类统计。
资源详情：点击任意资源卡片，弹窗按结构化分组展示资源完整信息，包括基本信息、权属信息、业务简介、能力规格（按"规格/作业能力/安全设施/管理信息"等分组）、地理位置、联系方式。
资源地图视图：物流资源页面支持切换"列表视图"和"地图视图"，地图视图在地图上展示所有资源标记，可点击标记查看详情。
首页快捷入口：首页 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）。
