# AI 选址助手 EdgeOne Pages 可复现 Prompt

下面这段 Prompt 可直接复制给 AI 使用。它的目标是复现一个「视觉惊艳、可一键跑通、最终部署到 EdgeOne Pages」的 AI 选址助手站点。

````text
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Pages.

你是一个资深前端工程师和产品型设计师。请学习并使用 edgeone-pages-skills，创建并部署一个可一键跑通的 EdgeOne Pages 项目，最终必须给出 EdgeOne Pages 的公开访问链接。

## 目标

做一个名为「AI 选址助手」的视觉化 Web App，而不是营销落地页。

它要模拟一个 AI + 地图的商业选址工作台：用户输入自然语言选址需求，系统返回候选商圈、推荐理由、地图点位、评分图表和 AI 报告。

核心体验：
- 首屏就是可操作的仪表盘，不要做 landing page。
- 页面一眼能看出「AI 正在基于地图数据做选址决策」。
- 数据、地图、图表、报告必须联动。
- 即使没有真实腾讯地图 Key，也必须有高质量的视觉 fallback，页面不能空白。
- 部署到 EdgeOne Pages 后必须能直接访问、能点击、能生成分析结果。

## 资产与数据

使用以下固定种子数据，保证别人复制 Prompt 后能稳定复现。

默认用户输入：

```txt
在深圳南山区寻找适合白领午餐的轻食门店，要求步行 10 分钟可达地铁，竞品不要太密集。
```

快捷条件：
- 写字楼密度优先
- 竞品规避
- 地铁 800m 内
- 停车便利
- 午晚双峰客流

候选点数据：

```json
{
  "projectName": "AI选址助手"，
  "city": "深圳"，
  "industry": "轻食"，
  "summary": "AI 判断南山区办公客群密集、午间需求稳定，推荐优先落点在地铁 800m 内的科技园片区。"，
  "selectedSiteId": "site-a"，
  "map": {
    "center": [113.94695， 22.53332]，
    "zoom": 13，
    "styleId": "style1"
  }，
  "sites": [
    {
      "id": "site-a"，
      "name": "深圳湾科技生态园"，
      "score": 92，
      "trend": "+14%"，
      "lat": 22.53332，
      "lng": 113.94695，
      "summary": "办公客群密度高、步行可达性好，是当前最优候选区域。"，
      "aiReason": "AI 判断该区域拥有更强的白领午餐需求和稳定的工作日消费频次，同时竞品压力可控，适合作为轻食首店的切入点。"，
      "radiusText": "地铁步行 9 分钟 · 午间客群覆盖 7.2 万"，
      "tags": ["写字楼密度优先"， "地铁 800m 内"， "午晚双峰客流"]
    }，
    {
      "id": "site-b"，
      "name": "软件产业基地"，
      "score": 88，
      "trend": "+10%"，
      "lat": 22.54031，
      "lng": 113.95116，
      "summary": "写字楼聚集度高，适合强调效率型轻食与外带场景。"，
      "aiReason": "该区域工作日客流稳定，办公楼密度高，适合快速出餐和企业团餐联动，但周边竞品比第一候选稍多。"，
      "radiusText": "地铁步行 11 分钟 · 午间客群覆盖 6.5 万"，
      "tags": ["写字楼密度优先"， "午晚双峰客流"]
    }，
    {
      "id": "site-c"，
      "name": "科苑路地铁商圈"，
      "score": 83，
      "trend": "+7%"，
      "lat": 22.54286，
      "lng": 113.95521，
      "summary": "交通优势明显，但竞品更密集，适合作为备选区域。"，
      "aiReason": "地铁近场优势明显，通勤流量充足，但同类餐饮竞争更强，适合在产品和品牌定位上做差异化切入。"，
      "radiusText": "地铁步行 4 分钟 · 午间客群覆盖 5.8 万"，
      "tags": ["地铁 800m 内"， "竞品规避"]
    }
  ]，
  "metrics": [
    {
      "label": "候选区域"，
      "value": "12"，
      "detail": "自动筛出的高匹配商圈"，
      "tone": "primary"
    }，
    {
      "label": "综合匹配度"，
      "value": "91.6"，
      "detail": "基于客群、交通、竞品、活跃度计算"，
      "tone": "success"
    }，
    {
      "label": "高潜客群覆盖"，
      "value": "18.4 万"，
      "detail": "工作日午间可触达客群"，
      "tone": "warning"
    }
  ]，
  "barData": [
    { "name": "深圳湾科技生态园"， "value": 92 }，
    { "name": "软件产业基地"， "value": 88 }，
    { "name": "科苑路地铁商圈"， "value": 83 }，
    { "name": "南山中心区"， "value": 76 }
  ]，
  "reportParagraphs": [
    "AI 判断深圳湾科技生态园最适合作为轻食首店的切入点。该区域午间白领消费密度高，办公楼宇聚集，对健康、效率型餐饮有明显需求。"，
   
   "从交通维度看，区域与地铁、园区步行系统衔接顺畅，午餐场景具备 10 分钟内快速到店优势。竞品虽存在，但高品质轻食仍有差异化空间。"，
   
   "后续可进一步将候选点投射到园区楼栋模型中，分析首店落位、楼宇服务半径与人流动线。"
  ]
}
```

## 品牌与视觉

方向：深色城市智能操作系统 + 地图决策大屏 + 精致 SaaS 工作台。

视觉关键词：
- 深夜蓝黑底色，不要纯黑。
- 青蓝、琥珀、翠绿作为强调色，不要单一紫色或单一蓝色。
- 玻璃拟态面板、细边框、柔和内发光、网格底纹、地图线路光效。
- 首屏必须有强记忆点：中心区域是一张带 3D 透视感的地图/仿地图舞台，候选点发光，虚线动线流动，选中点有脉冲。
- 页面适合截图和短视频传播：首屏信息密度高，但层次清楚。

禁止：
- 不要做营销 hero。
- 不要把 UI 做成普通后台表格。
- 不要使用空洞插画、装饰性渐变球或无意义大卡片。
- 不要出现文本溢出、按钮挤压、移动端横向滚动。

## 技术栈

优先使用：
- Vite
- Vue 3
- TypeScript
- Tailwind CSS
- lucide-vue-next
- @antv/g2plot 或 ECharts，用于柱状图、雷达图、散点图、环形图
- EdgeOne Pages
- Edge Functions
- EdgeOne KV

如果你认为 React 更适合当前环境，也可以使用 React + Vite，但必须保持同等功能和视觉质量。

必须提供：
- `npm install`
- 先执行 `npm run dev`，确认本地开发服务器能成功启动、页面可访问、核心交互可运行
- 本地 `npm run dev` 验证成功后，再执行 `npm run build` 进行生产打包
- 使用 edgeone-pages-skills 完成部署
- 最终输出 EdgeOne Pages 公开访问链接

## EdgeOne Pages / Functions / KV 要求

必须使用 edgeone-pages-skills 来完成部署流程。

必须实现 Edge Functions：
- `POST /api/analyze`
- 接收 `{ "prompt": string， "tags": string[] }`
- 返回符合上方 JSON 协议的选址报告。
- 结果可以是基于固定种子数据的确定性模拟，但要根据输入关键词做轻量变化，例如：
  - 输入包含「杭州」时城市显示杭州，并给出未来科技城候选点；
  - 输入包含「广州」时城市显示广州，并给出天河区候选点；
  - 输入包含「咖啡 / 茶饮 / 烘焙 / 便利店」时 industry 和报告文字同步变化。

必须使用 EdgeOne KV：
- 保存最近生成的分析报告历史。
- 提供 `GET /api/history` 返回最近 5 条历史。
- 前端右侧或 Drawer 中展示「最近分析」入口。
- 如果本地开发没有 KV 绑定，必须 graceful fallback 到内存或静态数据，不能导致页面报错。

## 布局约束

首屏结构：

```txt
顶部 Header：
  左侧：AI + 地图 Badge、产品名「AI 选址助手」、一句短描述
  右侧：3D 方案按钮、开始分析按钮

主体两栏：
  左侧大区域：
    地图/仿地图工作区
    候选点 marker
    路线光效
    当前推荐点浮层
    三个核心指标卡片
    下方或右侧包含 AI 输入框、快捷条件 chips、生成按钮、重置按钮

  右侧窄栏：
    查看完整分析按钮
    AI 当前判断
    当前排序结果 Top 3
    匹配度趋势条
    最近分析历史

右侧 Drawer：
  Tab 1 综合评分：柱状图
  Tab 2 能力雷达：雷达图
  Tab 3 竞争分析：客群浓度 x 竞品压力散点图
  Tab 4 配套画像：POI 环形图
  Tab 5 AI 报告：结构化推荐报告
```

交互要求：
- 点击候选点或右侧 Top 3 项，地图选中态、AI 判断、图表标题和报告内容同步变化。
- 点击「生成候选点」调用 `/api/analyze`，显示 loading 状态，并更新页面数据。
- 点击「查看完整分析」打开右侧 Drawer。
- Drawer 有遮罩、关闭按钮、Tab 切换动画。
- 移动端改为单列布局，地图区域优先展示，右侧栏下沉。

## 地图实现

优先接入腾讯地图 JS API GL：
- 支持通过 `VITE_TMAP_KEY` 配置 Key。
- 支持 `VITE_TMAP_STYLE_ID` 配置样式 ID。
- 初始化地图时使用 3D 视角：pitch 约 32，rotation 约 10，zoom 约 14.8。
- 使用候选点经纬度绘制 marker。
- 点击 marker 切换当前选址点。

必须实现高质量 fallback：
- 如果没有 `VITE_TMAP_KEY` 或地图脚本加载失败，显示自绘仿地图。
- fallback 不能只是灰色占位，必须包含网格、道路曲线、发光候选点、动态扫描线和指标浮层。
- fallback 要适合截图传播。

## 数据协议

前端状态必须围绕同一份报告对象组织：
- `selectedSiteId`
- `sites`
- `metrics`
- `barData`
- `reportParagraphs`
- `history`

报告缺字段时要自动补默认值。
API 失败时要回退到固定种子数据。
页面不能因为 API、KV 或地图不可用而白屏。

## 评分逻辑

在代码和报告中体现以下评分思想：

```txt
总分 = 客群密度 × W1 + 交通可达性 × W2 + 竞品压力 × W3 + 配套完整度 × W4 + 区域活跃度 × W5
```

行业权重：
- 轻食、咖啡、奶茶：更看重客群密度、午间流量、地铁可达。
- 便利店：更看重交通可达、社区覆盖、稳定客流。
- 烘焙：更看重家庭消费、停车便利、晚间客流。
- 火锅/正餐：更看重配套完整度、区域活跃度、聚集效应。

报告不要只给分数，必须解释：
- 为什么推荐第一候选点；
- 哪些因素拉高分数；
- 哪些风险需要注意；
- 为什么其他候选点排在后面。

## 文件与代码质量

请生成完整项目，而不是只给片段。

要求：
- 组件拆分清晰。
- 类型定义清晰。
- 样式统一。
- 不要留下无用模板代码。
- 不要出现控制台明显报错。
- 部署前必须先运行 `npm run dev`，确认本地页面能正常打开和交互。
- `npm run dev` 验证成功后，再运行 `npm run build`，并确保打包通过。
- 部署前必须本地构建验证。

建议文件结构：

```txt
src/
  App.vue
  main.ts
  main.css
  data/
    seed-report.ts
  types/
    site-report.ts
  lib/
    report.ts
    tencent-map.ts
  components/
    dashboard/
      DashboardHeader.vue
      WorkspacePanel.vue
      RightPanel.vue
      ReportDrawer.vue
    charts/
      BarChartCard.vue
      RadarChartCard.vue
      ScatterChartCard.vue
      PieChartCard.vue
    ui/
      Button.vue
      Badge.vue
      PanelCard.vue
      SectionTitle.vue
functions/
  api/
    analyze.ts
    history.ts
```

## 验收标准

完成后请自行检查：
- 首屏是否有视觉记忆点；
- 无地图 Key 时是否仍然好看；
- 点击候选点是否能联动；
- 点击生成是否调用 Edge Function；
- 最近分析是否使用 KV 或 fallback 数据；
- Drawer 图表是否能切换；
- 移动端是否无横向滚动；
- 是否已先通过 `npm run dev` 完成本地运行验证；
- `npm run build` 是否通过；
- 是否已部署到 EdgeOne Pages；
- 最终回复是否包含公开访问链接。

## 最终回复格式

请在完成后只输出：

1. EdgeOne Pages 公开访问链接
2. 本地运行命令
3. 已使用的 EdgeOne 能力：Pages / Edge Functions / KV
4. 一句话说明项目亮点
````