# 晋路通

**Repository Path**: ping1991/jinlutong

## Basic Information

- **Project Name**: 晋路通
- **Description**: 主要做山西省内LNG 气+充电站等新能源站点的导航
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-10
- **Last Updated**: 2026-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 晋路通

山西省 LNG 加气站 + 充电站等新能源站点导航平台（V1.0 纯前端版）。

## 定位

面向山西省 LNG 重卡司机、物流车队和新能源车主，提供快速查找周边加气站/充电站、一键导航、价格参考等服务。填补区域内同时覆盖 LNG + 充电的垂直导航产品空白。

## 技术栈

| 类别 | 选型 |
|------|------|
| 框架 | Next.js 14（App Router）+ TypeScript |
| 生成模式 | SSG 静态生成（`output: 'export'`） |
| 样式 | Tailwind CSS（移动端优先响应式） |
| 地图 | 高德地图 JavaScript API 2.0 |
| 搜索 | Fuse.js 模糊搜索 |
| 图标 | Lucide React |
| 部署 | 腾讯云 EdgeOne Pages（静态托管 + CDN） |

## 项目结构

```
jinlutong/
├── data/                    # 静态数据
│   ├── stations.json        #   站点数据
│   └── site-config.json     #   站点配置（城市/类型/默认值）
├── src/
│   ├── app/                 # Next.js App Router 页面
│   │   ├── layout.tsx       #   根布局（SEO meta）
│   │   ├── page.tsx         #   首页（站点列表 + 搜索筛选）
│   │   ├── stations/        #   站点列表 / 站点详情（SSG）
│   │   ├── map/             #   高德地图全屏视图
│   │   ├── favorites/       #   收藏页（localStorage）
│   │   ├── about/           #   关于页
│   │   └── admin/import/    #   数据导入工具
│   ├── components/          # 公共组件
│   ├── hooks/               # 自定义 Hooks
│   │   ├── useGeolocation.ts  # 用户定位
│   │   ├── useStations.ts     # 站点数据
│   │   ├── useFavorites.ts    # 收藏管理
│   │   ├── useAmap.ts         # 高德地图实例
│   │   ├── useRateLimiter.ts  # 请求限流
│   │   └── useMediaQuery.ts   # 响应式断点
│   ├── lib/                 # 工具模块
│   │   ├── stations.ts        # 数据加载
│   │   ├── distance.ts        # Haversine 距离计算
│   │   ├── search.ts          # Fuse.js 搜索
│   │   ├── amap.ts            # 高德 SDK 加载
│   │   ├── rate-limiter.ts    # API 限流
│   │   ├── storage.ts         # localStorage 封装
│   │   └── clipboard.ts       # 复制工具
│   └── types/               # TypeScript 类型定义
├── scripts/                 # 辅助脚本
│   └── clean-build.js       #   构建前清理脚本
├── next.config.mjs          # Next.js 配置（SSG 静态导出）
├── tailwind.config.ts       # Tailwind 主题配置
└── tsconfig.json            # TypeScript 配置
```

## 快速开始

```bash
# 安装依赖
npm install

# 开发模式
npm run dev           # http://localhost:3000

# 构建静态站点
npm run build         # 输出到 out/

# 代码检查
npm run lint
```

## 数据管理

站点数据存放在 `data/stations.json`，格式如下：

```json
[
  {
    "id": "ty-hongda-lng",
    "name": "宏达LNG加气站",
    "type": "lng",
    "city": "太原市",
    "district": "小店区",
    "address": "太原市小店区...",
    "lng": 112.5489,
    "lat": 37.8172,
    "tel": "0351-xxxxxxx",
    "price": 5.8,
    "tags": ["24小时", "停车位"]
  }
]
```

更新站点数据后重新 `npm run build` 部署即可。

数据导入工具位于 `/admin/import` 页面，可通过高德 POI 搜索批量采集站点信息。

## 部署

构建产物为 `out/` 目录，是纯静态文件，可直接部署到任意静态托管服务：

- **EdgeOne Pages**：连接 Git 仓库，设置构建命令 `npm run build`，输出目录 `out`
- **其他静态服务**：将 `out/` 目录内容上传即可

## 环境变量

复制 `.env.example` 为 `.env.local`：

| 变量 | 说明 | 必填 |
|------|------|------|
| `NEXT_PUBLIC_AMAP_KEY` | 高德地图 JS API Key | 是 |
| `NEXT_PUBLIC_AMAP_QPS` | 请求频率限制（次/秒） | 否，默认 1 |

## 完整版愿景

V1.0 聚焦纯前端静态站点快速落地验证。后续版本规划：

- 微信小程序 + APP 多端覆盖
- 用户体系（收藏同步、加油记录、车队管理）
- 管理后台（数据审核、运营配置、报表统计）
- 价格众包 + 实时排队信息

## 相关文档

- [市场调研及需求文档](./市场调研及需求文档.md)
- [产品设计文档](./产品设计文档.md)
- [技术设计文档](./技术设计文档.md)