一张专为中国动漫迷打造的日本旅行地图。标注了全日本 176+ 个动漫店铺，内置 AI 旅行小助手（DeepSeek + Cloudflare Worker），全中文 UI 与地点描述，使用 MapLibre GL JS 矢量瓦片实现丝滑的地图交互体验。
| 功能 | 说明 |
|---|---|
| 🗺️ 矢量瓦片地图 | MapLibre GL JS 渲染，OpenFreeMap 全球 CDN 瓦片源 |
| 📍 176+ 个地点 | 176+ 个动漫店铺，覆盖北海道到九州 |
| 🏷️ 7 类分色标记 | Animate（粉色）/ Melonbooks（绿色）/ Mandarake（橙色）/ Suruga-ya（蓝色）/ GAMERS（黄色）/ Lashinbang（紫色）/ K-Books（深红） |
| 🔍 搜索与筛选 | 全文搜索（名称/描述/标签/地址）、地区筛选（都道府県）、分类筛选 |
| 📊 排序 | 按评分、名称、更新时间、访问量排序 |
| 📱 响应式布局 | 桌面端侧边栏 + 移动端抽屉，全尺寸适配 |
| 🤖 AI 小助手 | DeepSeek API + Cloudflare Worker 代理，内置 176+ 家店铺知识的旅行顾问，系统提示词服务端注入（防篡改）+ Origin 校验 + 限流 |
| 🛡️ 安全扫描 | AutoSec-QC 提示词注入检测，40+ 条规则覆盖 10 个攻击类别 |
| 🖼️ 城市图片 | 弹窗城市风景图本地自托管 WebP（来源 Wikimedia Commons，署名见 public/cities/CREDITS.md） |
| 📲 Android APK | WebView 全屏应用，GitHub Actions 自动构建，网站更新后自动同步 |
| 🎬 加载过渡页 | 动画加载过渡页，地图资源就绪后自动进入主界面 |
| ⚡ 性能优化 | Cloudflare Workers 瓦片代理加速、代码分割 3 chunk、CSS 变量驱动 marker、content-visibility 懒加载、Service Worker 瓦片缓存 |
| 层级 | 技术 |
|---|---|
| 框架 | React 19 + Hooks |
| 语言 | TypeScript — 严格模式 |
| 构建 | Vite — 亚秒级 HMR |
| 样式 | TailwindCSS 4 — CSS 变量 |
| 地图引擎 | MapLibre GL JS — 矢量瓦片渲染 |
| 瓦片源 | OpenFreeMap — 免费、无 Key、全球 CDN |
| 瓦片代理 | Cloudflare Workers — 亚太加速 + 缓存优化 |
| 状态管理 | Zustand — 轻量、持久化 |
| 图标 | Lucide React |
| AI 模型 | DeepSeek API — 旅行助手对话模型 |
| AI 代理 | Cloudflare Workers — 服务端代理转发 + 系统提示词注入 + 限流 |
| 字体 | Microsoft YaHei / PingFang SC (系统字体) |
前置要求: Node.js >= 18, npm >= 9
# 克隆仓库
git clone git@github.com:9dk9jptv8h-hue/japan-otaku-map.git
# or
git clone https://github.com/9dk9jptv8h-hue/japan-otaku-map.git
cd japan-otaku-map
# 安装依赖
npm install
# 启动开发服务器
npm run dev打开 http://localhost:5173 即可使用。
npm run build
npm run previewsrc/
├── components/
│ ├── chat/ # AI小助手聊天面板
│ ├── layout/ # AppShell、DesktopLayout、MobileLayout
│ ├── map/ # MapContainer、MarkersLayer、MapControls
│ ├── sidebar/ # Sidebar、FilterPanel、SearchBar、CardList、LocationCard、SortControl、SidebarToggle
│ └── ui/ # Badge、EmptyState、ErrorBoundary、Input
├── constants/
│ ├── mockData.ts # 176+ 个地点数据
│ ├── mapDefaults.ts # 视口、瓦片样式配置
│ └── theme.ts # 分类颜色与元数据
├── hooks/ # useDebounce、useFilteredLocations、useMediaQuery
├── services/ # AI助手API调用（Cloudflare Worker代理）
├── store/ # Zustand stores (UI / Filter / Map)
├── types/ # TypeScript 类型定义
├── utils/ # cn、city-photo
├── App.tsx # 根组件 + 欢迎屏
├── main.tsx # 入口
└── index.css # 全局样式 + 动画
worker/ # Cloudflare Worker 代理项目（独立部署）
查看 CHANGELOG.md 了解各版本的详细变更记录。
MIT © 9dk9jptv8h-hue