🗺️ Payments Maps - 智能支付地图平台

一个专为信用卡和支付爱好者设计的智能地图平台，帮助用户发现和分享支持多种支付方式的商户信息。特别针对外国来华人士优化，提供多语言支持和新手引导功能。

✨ 核心功能

🌍 多语言支持

完整国际化：支持中文、英语、俄语、德语四种语言
智能语言检测：自动识别用户浏览器语言偏好
实时切换：无需刷新即可切换界面语言
本地化存储：记住用户语言偏好设置

🗺️ 智能地图功能

高德地图集成：精确的地理位置服务
实时定位：自动获取用户当前位置
商户标记：直观的图标显示不同支付方式
聚合显示：智能聚合附近商户，避免标记重叠
搜索功能：支持商户名称和地址搜索

💳 支付信息管理

多种支付方式：Apple Pay、Google Pay、外卡、银联、移动支付等
详细POS信息：POS机型号、收单机构、支持的卡种
验证系统：用户可验证商户信息的真实性
品牌管理：支持商户品牌分类和筛选

👥 用户系统

多平台登录：支持LinuxDo、GitHub、Google等第三方登录
权限分级：普通用户、认证用户、管理员不同权限
Beta激活系统：邀请码激活高级功能
用户历史：记录用户的搜索和访问历史

🎯 外国用户优化

新手引导：详细的支付方式科普和使用教程
外卡友好标识：特殊标记支持外卡的商户
支付指南：图文并茂的支付操作指导
紧急帮助：24小时多语言客服支持

📱 移动端优化

响应式设计：完美适配手机、平板、桌面端
触摸优化：针对移动设备的交互体验
离线支持：基础功能支持离线使用
快速加载：优化的资源加载和缓存策略

🛠️ 技术架构

前端技术栈

├── React 18.3.1          # 前端框架
├── TypeScript 5.8.3      # 类型安全
├── Vite 6.3.5           # 构建工具
├── Tailwind CSS 3.4.17  # 样式框架
├── React Router 7.3.0    # 路由管理
├── Framer Motion 12.23   # 动画库
├── React i18next 15.7    # 国际化
├── Zustand 5.0.3        # 状态管理
└── Lucide React 0.511    # 图标库

后端服务

├── Supabase             # 后端即服务
│   ├── PostgreSQL       # 数据库
│   ├── Auth             # 用户认证
│   ├── Storage          # 文件存储
│   └── Real-time        # 实时数据同步
├── 高德地图 API          # 地图服务
└── 第三方登录 OAuth      # 社交登录

数据库设计

-- 核心表结构
pos_machines        # POS机信息表
users              # 用户信息表
brands             # 品牌信息表
user_favorites     # 用户收藏表
user_history       # 用户历史表
comments           # 评论表
activation_codes   # 激活码表

🚀 快速开始

环境要求

Node.js >= 18.0.0
pnpm >= 8.0.0 (推荐)
现代浏览器支持

1. 克隆项目

git clone https://github.com/WilliamWang1721/Payments-Maps.git
cd Payments-Maps

2. 安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

3. 环境配置

复制环境变量模板文件：

cp .env.example .env

编辑 .env 文件，配置必要的API密钥：

# Supabase 配置
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# 高德地图配置
VITE_AMAP_KEY=your_amap_api_key
VITE_AMAP_SECURITY_KEY=your_amap_security_key

# 第三方登录配置 (可选)
VITE_GITHUB_CLIENT_ID=your_github_client_id
VITE_GOOGLE_CLIENT_ID=your_google_client_id

4. 启动开发服务器

pnpm dev

应用将在 http://localhost:5173 启动。

5. 构建生产版本

# 构建
pnpm build

# 预览构建结果
pnpm preview

📋 API 配置指南

Supabase 设置

在 Supabase 创建新项目
在项目设置中获取 URL 和 anon key
运行数据库迁移文件（位于 supabase/migrations/）
配置行级安全策略（RLS）

高德地图设置

在高德开放平台注册账号
创建应用并获取 API Key
配置安全密钥和域名白名单
启用所需的地图服务

第三方登录设置

详细配置请参考：

🗂️ 项目结构

src/
├── components/          # 可复用组件
│   ├── ui/             # 基础UI组件
│   ├── Layout.tsx      # 布局组件
│   ├── LanguageSwitcher.tsx  # 语言切换
│   └── ...
├── pages/              # 页面组件
│   ├── Map.tsx         # 地图页面
│   ├── List.tsx        # 列表页面
│   ├── AddPOS.tsx      # 添加POS页面
│   └── ...
├── hooks/              # 自定义Hooks
│   ├── usePermissions.ts
│   ├── useTheme.ts
│   └── ...
├── lib/                # 工具库
│   ├── supabase.ts     # Supabase客户端
│   ├── i18n.ts         # 国际化配置
│   ├── utils.ts        # 通用工具函数
│   └── ...
├── locales/            # 多语言文件
│   ├── en.json         # 英语
│   ├── ru.json         # 俄语
│   ├── de.json         # 德语
│   └── ...
├── stores/             # 状态管理
│   ├── useAuthStore.ts # 认证状态
│   └── useMapStore.ts  # 地图状态
├── types/              # TypeScript类型定义
├── utils/              # 工具函数
└── styles/             # 样式文件

🎨 设计系统

颜色规范

/* 主色调 */
--primary: #2563EB;      /* 蓝色 */
--secondary: #10B981;    /* 绿色 */
--accent: #F59E0B;       /* 橙色 */

/* 功能色 */
--success: #059669;      /* 成功 */
--warning: #D97706;      /* 警告 */
--error: #DC2626;        /* 错误 */
--info: #0284C7;         /* 信息 */

/* 中性色 */
--gray-50: #F9FAFB;
--gray-900: #111827;

字体规范

标题：16px-24px，font-weight: 600
正文：14px，font-weight: 400
辅助文字：12px，font-weight: 400
按钮文字：14px，font-weight: 500

🔧 开发指南

代码规范

使用 ESLint 进行代码检查
使用 TypeScript 确保类型安全
遵循 React Hooks 最佳实践
组件采用函数式编程风格

提交规范

# 功能开发
git commit -m "feat: 添加新手引导功能"

# 问题修复
git commit -m "fix: 修复地图标记显示问题"

# 文档更新
git commit -m "docs: 更新API文档"

# 样式调整
git commit -m "style: 优化移动端布局"

测试

# 类型检查
pnpm check

# 代码检查
pnpm lint

# 构建测试
pnpm build

🚀 部署指南

Vercel 部署 (推荐)

连接 GitHub 仓库到 Vercel
配置环境变量
自动部署

手动部署

# 构建项目
pnpm build

# 部署 dist 目录到服务器
# 配置 nginx 或其他 web 服务器

Docker 部署

# Dockerfile 示例
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

📊 功能特性

✅ 已实现功能

🚧 开发中功能

新手引导系统（交互式教程、支付方式介绍）
外国用户支付体验优化
智能问答和帮助中心
语音导航功能
离线地图支持
实时聊天客服

🔮 计划功能

🤝 贡献指南

我们欢迎所有形式的贡献！

如何贡献

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

贡献类型

🐛 Bug 修复
✨ 新功能开发
📝 文档改进
🎨 UI/UX 优化
🌍 多语言翻译
🔧 性能优化

📄 许可证

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

🙏 致谢

React - 前端框架
Supabase - 后端服务
高德地图 - 地图服务
Tailwind CSS - 样式框架
Lucide - 图标库

📞 联系我们

项目主页：GitHub Repository
问题反馈：GitHub Issues
功能建议：GitHub Discussions

如果这个项目对你有帮助，请给我们一个 ⭐️

Made with ❤️ by the Payments Maps Team

Name		Name	Last commit message	Last commit date
Latest commit History 79 Commits
.vercel		.vercel
.vscode		.vscode
Payments-Maps-Apps		Payments-Maps-Apps
api		api
mcp-client		mcp-client
mcp-server		mcp-server
mcp		mcp
public		public
scripts		scripts
src		src
supabase		supabase
wiki		wiki
.env.example		.env.example
.gitignore		.gitignore
.vercelignore		.vercelignore
CLAUDE.md		CLAUDE.md
GOOGLE_OAUTH_SETUP.md		GOOGLE_OAUTH_SETUP.md
LICENSE		LICENSE
MCP_TESTING_GUIDE.md		MCP_TESTING_GUIDE.md
README.md		README.md
UPGRADE_LOG.md		UPGRADE_LOG.md
add_remarks_field.sql		add_remarks_field.sql
eslint.config.js		eslint.config.js
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts
web_logo.JPG		web_logo.JPG

License

WilliamWang1721/Payments-Maps

Folders and files

Latest commit

History

Repository files navigation