让任何人都能在 30 秒内完成一次有效海外砍价。 录音 → AI 翻译 → 话术生成（带语气）→ 真人语音播报 / 大字给老板看。
不是又一个翻译 App——它解决的是 "语言不通 ≠ 不会砍价"，但翻译软件只翻字面、还原不出语气 的真痛点。
- 从产品视角发现真痛点：现有翻译 App 解决"听懂"，HaggleGo 解决"会说"——把"语气"做成第一公民。覆盖 6 种语气分类（强硬 / 试探 / 让步 / 客套 / 不耐烦 / 友好），每种语气配对应砍价策略。
- 18 个海外目的地全本地化：每个国家独立配置语言（BCP-47）、货币、示例商品、砍价话术、砍价文化要点。切国家时 UI 文案全套同步——选日本就提示「日本正规店几乎不砍价」、显示 "京都和扇 / ¥3000 / 锦市场西口" 等示例。
- 三态对话流：AI 引导气泡 / 用户气泡 / 当地话术卡片 / 翻译卡片 + 语气徽章，模拟真人对话的"我听 → 它判断 → 我回"循环。
- "给摊主看"模式：识破"为什么不直接给老板看屏幕"这一隐藏需求，做了全屏放大版，超大字号 + 红色脉动"请摊主看这里" + 大圆 🔊 按钮，覆盖夜市嘈杂、老板识字少等场景。
- 地图选点像打车 App：Leaflet + OpenStreetMap，Overpass API 自动拉 2.5km 内市场 POI（marketplace / mall / bazaar），绿色 POI 图钉点一下就选中，地图移动自动重拉。
- 听筒识别假体验做到位：录音按钮按下后，红光晕脉动 → 识别中（金色） → 出原文 + 中文 + 语气标签 + 策略提示。接口（
simulateMerchantSpeech）已抽象，将来接 Whisper + Claude 只换实现，UI 不用动。 - TTS provider 切换层：默认浏览器原生，环境变量
VITE_TTS_PROVIDER=elevenlabs / openai / azure切真人级语音；后端代理保护 key，前端零改动。 - 微交互打磨：播放有动画 + Toast、复制弹卡片显示具体复制内容、设备无当地语音 voice 时自动用中文兜底朗读且明确告知 + 引导下载语音包。
砍价不只是语言问题，是「说话方式」的问题。
| 用户痛点 | HaggleGo 怎么解 |
|---|---|
| 听不懂摊主说什么 | 🎤 听筒翻译实时把当地语言变中文 |
| 知道意思但不知道用什么语气说 | 6 种语气分类 + 对应话术 + 策略提示 |
| 翻译 App 出来的句子像机器人 | 当地常用砍价句式库 + 文化习惯（敬语、市场俚语） |
| 说出来发音不对老板听不懂 | 🔊 当地语 TTS 真人播报；可切 ElevenLabs |
| 嘈杂环境老板听不清 | 👀 给摊主看：全屏大字直接展示 |
| 不知道这个国家能砍多少 | 内置 18 国砍价文化要点（开价倍数、风格） |
| 层 | 选型 | 理由 |
|---|---|---|
| 框架 | React 18 + TypeScript + Vite 5 | 现代化前端组合，启动快、类型安全 |
| 样式 | TailwindCSS 3 | 4 色 brand palette 全 token 化（绿/明金/深金/红） |
| 路由 | React Router v6（HashRouter） | GitHub Pages / Vercel 子路径部署不会 404 |
| 地图 | Leaflet 1.9 + OSM 瓦片 | 无 API key，开箱即用，可随时切高德/Google |
| POI | Overpass API | 拉 OSM 真实市场数据，免费、跨国 |
| TTS | 浏览器原生 + 三方 provider 切换层 | 默认免费、生产可切 ElevenLabs |
| STT | 浏览器原生 SpeechRecognition | demo 模式已抽象，方便后续接 Whisper |
| 翻译/话术 | Mock + 接口已抽象 | 接 Claude / GPT 只改一个文件 |
src/
├── App.tsx # 路由 + Toast 容器
├── main.tsx # HashRouter 入口
├── index.css # Tailwind + 麦克风心跳/声波动画
├── components/
│ ├── Layout.tsx # 移动端外壳（max-w-[480px]）
│ ├── MapPicker.tsx # 全屏地图选点（搜索 + POI + 拖图钉）
│ ├── ScriptActions.tsx # 🔊 / 👀 / 复制 三按钮组
│ ├── ShowToMerchant.tsx # "给摊主看"全屏大字模式
│ └── ToastHost.tsx # 全局 Toast
├── data/
│ └── countries.ts # 18 国：语言、货币、示例、砍价文化
├── lib/
│ ├── context.ts # 跨页 sessionStorage 上下文
│ ├── speech.ts # TTS provider 切换 + STT
│ ├── translate.ts # translateInbound / generateScripts / simulateMerchantSpeech
│ ├── location.ts # 定位 + OSM 反查 + Overpass 附近市场
│ └── toast.ts # 事件总线式 Toast
└── pages/
├── Setup.tsx # 国家下拉 + 商品 + 场景（地图选点）+ 价格 + 文化提示
├── Bargain.tsx # 主对话页：听筒识别 / 自定义回复 / 话术卡 / TTS
└── Result.tsx # 成交结果 + 话术回顾
- /setup 选国家 → 全套示例自动同步成该国（日本 = 京都和扇/3000 日元）
- 点 🗺 地图选点 → 全屏地图，看到周围真实市场 POI 绿色图钉，点一下就选中
- 可补充"入口左边第三家银饰摊"等手写说明，AI 会一起带上
- 进入 /bargain，AI 开场白带上当地砍价文化要点（"日本正规店几乎不砍价…"）
- 点 🎤 → 麦克风心跳 + "正在听摊主说话…" → 1.2 秒后切金色 + "识别中" → 弹出原文 + 中文 + 语气徽章（"🛡️ 强硬"）+ 💡 策略提示
- 点话术卡的 👀 给摊主看 → 全屏 40px 大字 + 大圆 🔊 直接播放
- 砍完进 /result 看战绩 + 话术回顾
npm install
npm run dev # http://localhost:5173可选环境变量见 .env.example。
⚠️ 浏览器原生 TTS / STT 要 https 或 localhost；Chrome / Edge 桌面 + Safari iOS 16.4+ 体验最好。
- Vercel：import 仓库，框架选 Vite，构建
npm run build，输出dist - GitHub Pages：
HashRouter+base: './'已就位，dist推gh-pages即可
- 接 ElevenLabs，换上真人级当地语 TTS（multilingual_v2 模型）
- 接 Claude / GPT，按"语气策略"动态生成话术（试探 / 坚定 / 转身）+ 上下文记忆
- 用户登录 + 砍价历史 + 战绩分享卡
- 离线短语包（下飞机就能用，不依赖流量）
- iOS / Android 原生包装（Capacitor）
立项人：李屿｜作品类型：线上应用｜开发工具：Claude Code、Kimi-k2.5