::: info 说明

🎯 ValPoint 是一个专为 Valorant 玩家打造的点位管理与分享平台。支持多地图标注、技能点位收藏、视频来源追踪、作者信息自动获取等功能，让你的游戏技巧管理更加高效。

:::

请访问 http://valpoint.cn

• ✨ 功能特性
• 🛠️ 技术栈
• 🚀 快速开始
• 🎯 核心功能
  • 个人点位库
  • 共享点位库
  • 作者信息自动获取
  • 地图标注
  • 图床配置
• 📁 项目结构
• 🔧 环境变量
• 🚢 部署指南
• ❓ 常见问题
• 🤝 贡献指南
• 📄 许可证
• 🙏 致谢

• 点位全流程：创建 / 管理 / 分享站位、瞄点、落点配图与描述。
• 多视角支持：进攻 / 防守视角切换，英雄技能筛选。
• 轻量多用户：前端 8 位自定义 ID 充当 账号 ，支持跨设备查看与同步。
• 点位分享：生成短 ID，其他人可预览；一键保存到个人库。
• 云端数据： Supabase 作为个人库与公共分享中转，含 RLS 策略与定期清理任务。
• 地图体验：Leaflet 底图与点位标注，支持翻转与多视角查看。

• 快速筛选：按地图、英雄、技能位筛选点位，支持分页浏览。
• 分享闭环：短 ID 分享，缺失时回退个人库查询，兼容旧链接；支持 保存到我的点位 克隆到个人表。
• 多端易用：本地存储 8 位 userId ，轻量切换；可切 游客/登录 模式。
• 弹窗工具集：地图选择、预览、编辑、删除确认、提示灯箱等。
• 数据安全：RLS 策略示例，Supabase 公共 / 个人库分离；公共分享表定期清理（15天）。
• 构建部署：支持 Vercel / 静态托管 ， Cloudflare Pages（wrangler assets 模式） ；长缓存并行。
• 配置同步：.env .example 提供 Supabase URL / Key ，区分个人库与公共分享库。

• 账号：输入 8 位字母数字即作为 userId ，可跨设备查看自己的数据；留空为访客模式。
• 分享：列表中 分享 生成短 ID；他人可通过短 ID 预览；可一键保存到个人库。
• 分页：列表超过 8 条时启用分页，保持列表流畅。
• 安全：不要提交 .env，仅提交 .env.example；仅 anon/publishable key 可公开，service_role 禁止暴露前端。

• 框架：React 18 + TypeScript
• 构建工具：Vite 5
• 样式：Tailwind CSS 3
• 地图：Leaflet + React-Leaflet
• 图标：Lucide React
• 状态管理：React Hooks

• 数据库：Supabase PostgreSQL
• 认证：Supabase Auth
• 存储：Supabase Storage
• Edge Functions：Supabase Functions（作者信息解析）

• 阿里云 OSS
• 腾讯云 COS
• 七牛云 Kodo

详情跳转 WIKI - 快速开始

• GitHub 的 fork 不会被上游仓库“强制自动推送更新”；fork 属于独立仓库，是否同步由 fork 仓库所有者决定。
• 本仓库提供了一个可选的 GitHub Actions 工作流：.github/workflows/sync-upstream.yml。它会在 fork 仓库内按计划（或手动）尝试把默认分支 fast-forward 同步到上游。
• 如果 fork 仓库对默认分支有本地提交导致无法 fast-forward，工作流会失败，需要你手动解决冲突后再同步。

1. 点击 左侧 面板，选择地图、英雄、技能
2. 点击 右侧 面板的 新增点位 按钮
3. 填写点位信息：
   • 标题（必填）
   • 选择阵营（进攻/防守）
   • 选择地图和英雄
   • 上传图片（站位图、瞄点图、落点图）
   • 添加描述
   • 可选：填入视频来源链接

• 点击点位卡片的 编辑 按钮
• 修改信息后保存

• 单个删除：点击点位卡片的 删除 按钮
• 批量清空：点击 清空点位 按钮，选择 清空所有点位
• 删除某个英雄：点击 清空点位 按钮，选择 清空当前英雄点位

• 按 地图 筛选
• 按 英雄 筛选
• 按 阵营 筛选（进攻/防守）
• 按 技能类型 筛选
• 点击点位卡片查看详情

1. 在个人库中选择要分享的点位
2. 点击 分享 按钮
3. 系统生成短链接（格式：/share/{share_id}）
4. 分享链接有效期 15 天

1. 在共享库中浏览他人分享的点位
2. 点击 保存到我的点位 按钮
3. 系统自动防重（同一共享点位同一用户只保存一份）

• B 站（bilibili）

  • 空降视频链接：【这几年，电视画质为什么变差了...】 【精准空降到 02:26】 https://www.bilibili.com/video/BV1acmCBtEst/?share_source=copy_web&vd_source=fd59995bf2f70580369462145819da94&t=146
  • 短链接：https://www.bilibili.com/video/BV1acmCBtEst/

• 抖音（douyin）

  • 长链接：5.35 03/06 Pxs:/ F@u.Fh 这几年，电视画质为什么变差了...# 电视 # 画质 # 电视设置 # 技术 # 体验 https://v.douyin.com/9LZIA7lXgH4/ 复制此链接，打开Dou音搜索，直接观看视频！
  • 短链接：https://v.douyin.com/9LZIA7lXgH4/
  • 抖音不支持空降

方式 1：自动获取（推荐）

1. 在编辑弹窗中输入视频链接
2. 等待 1 秒，系统自动获取作者信息
3. 成功后显示作者头像和昵称

方式 2：剪贴板填入

1. 复制包含视频链接的分享文案
2. 点击 剪贴板填入 按钮
3. 系统自动提取链接并获取作者信息

方式 3：手动刷新

1. 输入或修改视频链接后
2. 点击右上角 手动刷新 按钮
3. 强制重新获取作者信息

• 使用 Supabase Edge Function get-video-author 绕过 CORS 限制
• 自动提取用户 ID，支持点击跳转到作者主页
• 防盗链处理：所有头像添加 referrerPolicy="no-referrer"

详情跳转 WIKI - 图床配置

ValPoint/
├── docs/                      # 文档目录
│   ├── AGENTS.md             # 项目概览（中文）
│   ├── WIKI.md               # 用户文档
│   ├── 用户信息解析方案.md    # 作者信息获取方案
│   ├── 抖音信息解析方案.md    # 抖音解析技术文档
│   └── 图床配置项.md          # 图床配置说明
├── public/                    # 静态资源
│   ├── agents/               # 英雄图标
│   ├── maps/                 # 地图图片
│   └── logo.svg              # Logo
├── src/
│   ├── components/           # React 组件
│   │   ├── EditorModal.tsx   # 编辑器模态框
│   │   ├── ViewerModal.tsx   # 查看器模态框
│   │   ├── LeafletMap.tsx    # 地图组件
│   │   ├── LeftPanel.tsx     # 左侧面板
│   │   └── RightPanel.tsx    # 右侧面板
│   ├── hooks/                # 自定义 Hooks
│   │   ├── useValorantData.ts    # 地图/英雄数据
│   │   ├── useLineups.ts         # 个人库数据
│   │   ├── useSharedLineups.ts   # 共享库数据
│   │   ├── useShareActions.ts    # 分享/复制操作
│   │   └── useLineupActions.ts   # CRUD 操作
│   ├── utils/                # 工具函数
│   │   ├── authorFetcher.ts  # 作者信息获取
│   │   ├── ossUpload.ts      # 图床上传
│   │   └── abilityIcons.ts   # 技能图标处理
│   ├── constants/            # 常量配置
│   │   └── maps.ts           # 地图配置
│   ├── data/                 # 静态数据
│   │   └── ability_overrides.json  # 技能覆盖数据
│   ├── services/             # 服务层
│   │   └── tables.ts         # 表名常量
│   ├── types/                # TypeScript 类型
│   ├── App.tsx               # 应用入口
│   └── main.tsx              # 主入口
├── supabase/                 # Supabase 配置
│   └── functions/            # Edge Functions
├── .env                      # 环境变量（不提交）
├── .env.example              # 环境变量示例
├── package.json              # 依赖配置
├── tsconfig.json             # TypeScript 配置
├── vite.config.ts            # Vite 配置
└── README.md                 # 项目说明

1. Fork 项目到你的 GitHub

2. 在 Vercel 中导入项目

   • 访问 vercel.com
   • 点击 New Project
   • 选择你的 GitHub 仓库

3. 配置环境变量

   • 在 Vercel 项目设置中添加 环境变量
   • 填入 Supabase 配置

4. 部署

   • 点击 Deploy
   • 等待构建完成

1. 连接 GitHub 仓库

2. 配置构建设置

   • Build command: npm run build
   • Build output directory: dist

3. 添加环境变量

4. 部署

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 部署 dist 目录到你的服务器

A: 确保所有 <img> 标签添加了 referrerPolicy="no-referrer" 属性。B 站和抖音的图片有防盗链保护。

A: 检查以下几点：

1. 视频链接格式是否正确
2. Supabase Edge Function 是否正常运行
3. 环境变量是否配置正确
4. 查看浏览器控制台的错误信息

A: 检查图床配置：

1. Access Key 和 Secret Key 是否正确
2. Bucket 名称和区域是否匹配
3. 是否有上传权限
4. 网络连接是否正常

A: 共享链接有效期为 15 天，过期后需要重新分享。

A: 点位数据存储在 Supabase 数据库中，可以通过 Supabase Dashboard 导出数据。

A: 推荐使用最新版本的 Chrome 、Firefox 、Edge 、Safari 。

欢迎提交 Issue 和 Pull Request ！

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

MIT License

• Valorant API - 英雄和地图数据
• Supabase - 后端服务
• Leaflet - 地图库
• Lucide - 图标库