一生足迹数据导入器

一个现代化的 Web 应用，用于将第三方轨迹数据（GPX、KML、OVJSN）转换为「一生足迹」应用所需的 CSV 格式，
同时支持多个一生足迹格式CSV文件的智能合并。所有数据处理均在浏览器本地完成，保护您的隐私安全。

👉 在线体验地址（Github Pages）

🚀 Vercel 访问地址 🌐 Netlify 访问地址

支持一键部署，点击下方按钮即可将本项目快速部署到 Vercel 或 Netlify，立即体验或搭建属于你自己的轨迹数据转换工具：

Vercel 部署：

Netlify 部署：

✨ 功能特性

📁 多格式支持

✅ GPX 格式：支持标准 GPX 轨迹文件
✅ KML 格式：支持 Google Earth KML 文件
✅ OVJSN 格式：支持奥维互动地图导出的 OVJSN 格式
✅ CSV 格式：支持一生足迹格式CSV文件的读取和合并
✅ 批量处理：支持同时上传和处理多个文件，提高工作效率

⏰ 灵活的时间配置

✅ 开始时间设置：自定义轨迹起始时间（必填）
✅ 结束时间设置：可选设置结束时间，系统自动均匀分配
✅ 时间间隔控制：支持自定义轨迹点之间的时间间隔
✅ 时区支持：支持选择任意 IANA 时区，不选择时自动使用系统时区
✅ 时间反转：支持负数时间间隔，可反转轨迹时间顺序

🎯 轨迹优化功能

✅ 智能插点：自动在距离过大的轨迹点之间插入补点，使轨迹更平滑
✅ 海拔控制：支持自定义默认海拔高度
✅ 速度计算：支持自动计算或手动指定速度（m/s）
✅ 距离优化：可配置插点距离阈值，默认 100 米

🔗 CSV文件合并

✅ 智能合并：支持多个一生足迹格式CSV文件的自动合并
✅ 格式验证：自动验证CSV文件格式，确保数据一致性
✅ 时间排序：按时间戳自动排序，保证轨迹时间连续性
✅ 示例下载：提供标准格式的示例CSV文件供参考
✅ 合并统计：显示各文件的轨迹点数和时间范围

📊 CSV插值工具

✅ 智能插值：对CSV格式轨迹文件进行插值处理，在轨迹点之间插入新点使轨迹更平滑
✅ 保持时间戳：插值过程中保持原始时间戳不变
✅ 可配置范围：支持过滤前部和后部轨迹点，只对中间部分进行插值
✅ 灵活配置：支持插值距离阈值、默认海拔、速度模式等参数设置
✅ 批量处理：支持同时处理多个CSV文件

🎨 用户体验

✅ 四模式工具：轨迹转换 + CSV文件合并 + 轨迹反转 + CSV插值，一站式轨迹数据处理平台
✅ 现代化 UI：基于 Ant Design 的精美界面设计
✅ 自适应布局：工具 tab 栏自适应宽度平铺显示，界面更加美观
✅ 深色模式：支持白天/夜间模式切换，主题设置自动保存
✅ 响应式设计：完美适配桌面和移动设备
✅ 实时反馈：处理进度、状态日志实时显示
✅ 批量下载：支持单个或批量下载处理结果
✅ 完全本地处理：所有数据在浏览器中处理，无需上传到服务器，保护隐私安全

🚀 快速开始

环境要求

Node.js >= 16.0.0（推荐 >= 24.0.0）
npm >= 7.0.0

安装和运行

# 克隆项目
git clone https://github.com/Kearney3/steplife-importer-webui.git
cd steplife-importer-webui

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:5173 查看应用。

构建生产版本

# 构建项目
npm run build

# 预览构建结果
npm run preview

构建产物将输出到 dist 目录，可直接部署到静态文件服务器。

📖 使用指南

操作流程

应用提供四种工具模式，可根据需要选择：

📍 轨迹转换模式（四步流程）

📁 选择文件 - 上传 GPX/KML/OVJSN 轨迹文件（支持拖拽）
⚙️ 配置参数 - 设置时间、海拔、速度等处理参数
▶️ 开始处理 - 点击处理按钮，系统自动转换文件
💾 下载结果 - 查看处理结果并下载生成的 CSV 文件

🔄 轨迹反转模式（三步流程）

📁 选择文件 - 上传 GPX/KML/OVJSN 轨迹文件（支持拖拽）
🔄 开始反转 - 点击反转按钮，系统自动反转轨迹坐标顺序
💾 下载结果 - 查看处理统计并下载反转后的轨迹文件

🔗 CSV合并模式（三步流程）

📁 选择文件 - 上传多个一生足迹格式的CSV文件
🔍 格式验证 - 系统自动验证文件格式并显示详细信息
📥 下载合并 - 点击合并按钮，下载按时间排序的合并文件

📊 CSV插值模式（四步流程）

📁 选择文件 - 上传需要插值的CSV文件（支持拖拽）
⚙️ 配置参数 - 设置插值距离、速度、海拔、插值范围等参数
▶️ 开始处理 - 点击处理按钮，系统自动进行插值处理
💾 下载结果 - 查看处理统计并下载插值后的CSV文件

文件上传

轨迹转换模式

支持格式：.gpx、.kml、.ovjsn
上传方式：支持点击选择或拖拽上传
批量上传：可同时上传多个文件进行处理
文件验证：自动验证文件格式，无效文件会被拒绝

轨迹反转模式

支持格式：.gpx、.kml、.json（OVJSN格式）
上传方式：支持点击选择或拖拽上传
批量上传：可同时上传多个文件进行反转处理
智能识别：自动识别文件格式并应用相应反转算法

CSV合并模式

支持格式：.csv（一生足迹格式）
上传方式：支持点击选择或拖拽上传多个CSV文件
智能验证：自动验证CSV格式和数据完整性
示例下载：提供标准格式示例文件供参考

CSV插值模式

支持格式：.csv（一生足迹格式）
上传方式：支持点击选择或拖拽上传多个CSV文件
批量处理：可同时处理多个CSV文件
保持格式：保持原始CSV格式和时间戳

参数配置详解

时间设置

开始时间（必填）

格式：YYYY-MM-DD HH:mm:ss
说明：轨迹的起始时间，所有轨迹点的时间将基于此时间计算

结束时间（可选）

格式：YYYY-MM-DD HH:mm:ss
说明：轨迹的结束时间，如果设置，系统会在开始和结束时间之间均匀分配时间戳

时间间隔（可选）

单位：秒
说明：轨迹点之间的时间间隔
特殊用法：设置为负数可以反转轨迹的时间顺序

时区设置（可选）

说明：选择时区用于时间转换，支持所有 IANA 时区
默认：不选择时使用系统时区
显示：每个时区选项会显示时区名称和 UTC 偏移量

时间分配优先级：

如果设置了结束时间 → 在开始和结束时间之间均匀分配
如果设置了时间间隔 → 按指定间隔分配时间
如果都没有设置 → 所有轨迹点使用开始时间

海拔与速度

默认海拔

单位：米
说明：为所有轨迹点设置统一的海拔高度
默认值：0

速度模式

自动计算：系统根据轨迹点之间的距离自动计算速度
手动指定：手动设置所有轨迹点的速度值（单位：m/s）
- 默认值：1.5 m/s（约 5.4 km/h，正常步行速度）

轨迹优化

轨迹插点功能

功能：自动在距离过大的相邻轨迹点之间插入补点
作用：使轨迹更平滑、连续
配置：设置插点距离阈值（单位：米）
- 当相邻两点距离超过阈值时，自动插入补点
- 默认阈值：100 米

CSV插值工具配置

插值距离阈值（必填）

单位：米
说明：当相邻轨迹点之间的距离超过此阈值时，系统会在两点之间自动插入新的轨迹点
默认值：100 米
注意：首尾两点之间不会进行插值

默认海拔

单位：米
说明：设置默认海拔值，如果设置为0，将使用原始轨迹点的海拔值
默认值：0

速度模式

自动计算：系统根据相邻两点之间的距离和时间差自动计算速度
手动指定：所有点（包括插值点）使用指定的固定速度值（单位：m/s）
- 默认值：1.5 m/s（约 5.4 km/h，正常步行速度）

插值范围设置

功能：过滤前部和后部的轨迹点，只对中间部分进行插值处理
过滤前部百分比：设置过滤前N%的轨迹点（0-100）
过滤后部百分比：设置过滤后N%的轨迹点（0-100）
说明：前部+后部百分比之和不超过100%，中间部分将进行插值处理
示例：设置前20%和后20%，则只对中间60%的轨迹点进行插值
默认值：前部0%，后部0%（对所有点进行插值）

处理与下载

轨迹转换模式

点击"开始处理"后，系统将：

解析文件：识别文件格式并解析轨迹点数据
应用配置：根据您的参数设置处理轨迹
生成 CSV：转换为「一生足迹」标准 CSV 格式
显示结果：展示处理统计信息（原始点数、最终点数、插入点数）

输出文件：

文件名格式：原文件名_steplife.csv
文件格式：标准 CSV，包含完整的轨迹数据

下载方式：

单个下载：点击文件列表中的下载按钮
批量下载：点击"下载全部"按钮，一次性下载所有处理结果

轨迹反转模式

点击"开始反转"后，系统将：

识别格式：自动识别文件格式（GPX/KML/OVJSN）
反转坐标：将轨迹点坐标序列完全反转（起点变终点）
保持格式：保持原始文件格式和结构不变
显示统计：展示坐标点数量变化统计信息

输出文件：

文件名格式：原文件名_reversed.扩展名
文件格式：与输入文件相同格式，坐标顺序已反转
保持所有原有属性：时间、海拔、速度等信息位置不变

反转特性：

坐标点顺序完全反转，确保轨迹方向相反
所有轨迹点属性保持原有的相对位置
支持批量处理，效率高
输出文件大小与原文件基本相同

CSV合并模式

点击"开始合并"后，系统将：

验证格式：检查所有CSV文件的格式和数据完整性
时间排序：按时间戳对所有轨迹点进行排序
智能合并：合并多个文件的数据，保持时间连续性
生成结果：输出按时间排序的合并CSV文件

输出文件：

文件名格式：merged_N_csv_files_YYYY-MM-DDTHH-MM-SS.csv
文件格式：标准一生足迹CSV格式，包含所有合并的轨迹数据

合并特性：

自动按时间顺序排序，确保轨迹连续性
保留所有原始数据字段
显示详细的合并统计信息

CSV插值模式

点击"开始插值处理"后，系统将：

解析CSV：读取CSV文件并解析轨迹点数据
范围过滤：根据配置过滤前部和后部轨迹点（可选）
智能插值：在中间部分的轨迹点之间插入新点
生成结果：输出插值后的CSV文件

输出文件：

文件名格式：原文件名_interpolated.csv
文件格式：标准一生足迹CSV格式，包含插值后的轨迹数据

插值特性：

保持原始时间戳不变
支持配置插值距离阈值（默认100米）
支持设置默认海拔和速度模式
支持过滤前部和后部轨迹点，只对中间部分插值
显示详细的插值统计信息（原始点数、最终点数、插入点数）

主题切换

应用支持白天和夜间两种主题模式：

切换方式：点击界面右上角的 🌙/☀️ 按钮
自动保存：主题设置会自动保存到浏览器本地存储
视觉特性：
- 渐变背景和玻璃态效果
- 流畅的动画过渡
- 护眼的深色配色方案

🛠️ 技术栈

前端框架

React 19.2.1 - 现代化的 UI 框架
TypeScript 5.2.2 - 类型安全的开发体验
Vite 5.0.8 - 快速的构建工具

UI 组件库

Ant Design 6.1.2 - 企业级 UI 组件库
Day.js 1.11.19 - 轻量级日期处理库

数据处理

原生 DOM API - XML/JSON 解析，无需额外依赖
CSV 处理引擎 - 支持格式验证、数据合并和智能排序
本地存储 - 数据持久化

部署

GitHub Actions - 自动化部署工作流
GitHub Pages - 静态网站托管
Vercel - 边缘网络部署
Netlify - 静态网站托管

📁 项目结构

steplife-importer-webui/
├── src/
│   ├── components/          # React 组件
│   │   ├── FileUpload.tsx   # 文件上传组件
│   │   ├── ConfigPanel.tsx  # 参数配置组件
│   │   ├── StatusPanel.tsx  # 状态显示组件
│   │   ├── FileProcessList.tsx # 文件处理列表组件
│   │   ├── CSVMerge.tsx     # CSV文件合并组件
│   │   ├── TrackReverse.tsx # 轨迹反转组件
│   │   ├── CSVInterpolation.tsx # CSV插值工具组件
│   │   └── CSVInterpolationConfigPanel.tsx # CSV插值配置面板组件
│   ├── parsers/             # 文件解析器
│   │   ├── gpx.ts           # GPX 格式解析
│   │   ├── kml.ts           # KML 格式解析
│   │   └── ovjsn.ts         # OVJSN 格式解析
│   ├── utils/               # 工具函数
│   │   ├── fileParser.ts    # 文件解析入口
│   │   ├── processor.ts     # 轨迹处理核心逻辑
│   │   ├── pointcalc.ts     # 轨迹插点计算
│   │   ├── csv.ts           # CSV 生成、验证和合并
│   │   ├── trackReverse.ts  # 轨迹反转工具函数
│   │   └── csvInterpolation.ts # CSV插值处理工具函数
│   ├── types.ts             # TypeScript 类型定义
│   ├── App.tsx              # 主应用组件
│   ├── main.tsx             # 应用入口
│   └── App.css                # 全局样式
├── .github/
│   └── workflows/
│       └── deploy.yml        # GitHub Actions 部署配置
├── index.html               # HTML 模板
├── package.json             # 项目配置和依赖
├── tsconfig.json            # TypeScript 配置
├── vite.config.ts           # Vite 构建配置
└── README.md                # 项目文档

🌐 浏览器兼容性

✅ Chrome/Edge (最新版本)
✅ Firefox (最新版本)
✅ Safari (最新版本)

注意：需要支持以下现代 Web API：

ES6+ 语法
Intl.DateTimeFormat API（用于时区处理）
FileReader API（用于文件读取）

🚀 部署指南

本项目支持多种部署方式，选择最适合您的方案：

🌟 一键部署

📦 快速部署

Vercel 部署（推荐）

npm install -g vercel
vercel --prod

Netlify 部署

npm install -g netlify-cli
npm run build
netlify deploy --prod --dir=dist

GitHub Pages 部署

项目已配置 GitHub Actions 自动部署，推送到 main 分支即可自动部署。

⚙️ 自动部署配置

项目配置了 GitHub Actions 自动部署工作流，支持部署到多个平台。

支持的部署平台

GitHub Pages - 自动部署到 GitHub Pages（免费）
Vercel - 自动部署到 Vercel（需要配置 secrets）
Netlify - 自动部署到 Netlify（需要配置 secrets）

触发条件

推送到 main 分支时自动触发部署
创建 Pull Request 时会构建但不部署（仅验证）

GitHub Pages（自动启用）

GitHub Pages 部署会自动启用，无需额外配置。首次部署需要：

进入仓库的 Settings → Pages
在 Source 中选择 GitHub Actions
推送到 main 分支后会自动部署

Vercel 部署（可选）

如需启用 Vercel 自动部署，需要在 GitHub 仓库中配置以下 Secrets：

进入仓库的 Settings → Secrets and variables → Actions
添加以下 Secrets：
- VERCEL_TOKEN: Vercel 访问令牌
  - 获取方式：Vercel Dashboard → Settings → Tokens → Create Token
- VERCEL_ORG_ID: Vercel 组织 ID
  - 获取方式：Vercel Dashboard → Settings → General → Team ID
- VERCEL_PROJECT_ID: Vercel 项目 ID
  - 获取方式：项目 Settings → General → Project ID

Netlify 部署（可选）

如需启用 Netlify 自动部署，需要在 GitHub 仓库中配置以下 Secrets：

进入仓库的 Settings → Secrets and variables → Actions
添加以下 Secrets：
- NETLIFY_AUTH_TOKEN: Netlify 认证令牌
  - 获取方式：Netlify Dashboard → User settings → Applications → New access token
- NETLIFY_SITE_ID: Netlify 站点 ID
  - 获取方式：站点 Settings → General → Site details → Site ID

查看部署状态

在 GitHub 仓库的 Actions 标签页查看部署状态
部署成功后，可以在对应平台的 Dashboard 查看部署详情
Pull Request 中会自动评论部署预览链接（如果配置了 Vercel 或 Netlify）

⚠️ 注意事项

隐私安全：所有数据处理都在浏览器本地完成，不会上传到任何服务器
文件大小：大文件处理可能需要一些时间，请耐心等待
数据备份：建议在处理前先备份原始文件
时区选择：如果不确定时区，建议不选择，使用系统默认时区
时间设置：开始时间为必填项，请确保格式正确

🤝 贡献指南

开发流程

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'feat: Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
创建 Pull Request

提交规范

feat: 添加新功能
fix: 修复bug
docs: 更新文档
style: 代码格式调整
refactor: 代码重构
test: 添加测试
chore: 构建过程或辅助工具的变动

代码规范

使用 TypeScript 进行类型检查
遵循 React Hooks 最佳实践
组件采用函数式组件 + Hooks 模式
使用 Vite 进行快速构建
生产构建会自动进行代码压缩和优化

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

React - 前端框架
Vite - 构建工具
Ant Design - UI 组件库
Day.js - 日期处理库

📞 联系方式

如有问题或建议，请通过以下方式联系：

创建 Issue
在 GitHub 上参与讨论
项目主页: https://github.com/Kearney3/steplife-importer-webui

⭐ 如果这个项目对您有帮助，请给我们一个星标！

Made with ❤️ for 一生足迹用户

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.github/workflows		.github/workflows
.vscode		.vscode
src		src
test_files		test_files
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

一生足迹数据导入器

✨ 功能特性

📁 多格式支持

⏰ 灵活的时间配置

🎯 轨迹优化功能

🔗 CSV文件合并

📊 CSV插值工具

🎨 用户体验

🚀 快速开始

环境要求

安装和运行

构建生产版本

📖 使用指南

操作流程

📍 轨迹转换模式（四步流程）

🔄 轨迹反转模式（三步流程）

🔗 CSV合并模式（三步流程）

📊 CSV插值模式（四步流程）

文件上传

轨迹转换模式

轨迹反转模式

CSV合并模式

CSV插值模式

参数配置详解

时间设置

海拔与速度

轨迹优化

CSV插值工具配置

处理与下载

轨迹转换模式

轨迹反转模式

CSV合并模式

CSV插值模式

主题切换

🛠️ 技术栈

前端框架

UI 组件库

数据处理

部署

📁 项目结构

🌐 浏览器兼容性

🚀 部署指南

🌟 一键部署

📦 快速部署

Vercel 部署（推荐）

Netlify 部署

GitHub Pages 部署

⚙️ 自动部署配置

支持的部署平台

触发条件

GitHub Pages（自动启用）

Vercel 部署（可选）

Netlify 部署（可选）

查看部署状态

⚠️ 注意事项

🤝 贡献指南

开发流程

提交规范

代码规范

📄 许可证

🙏 致谢

📞 联系方式

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages