# 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. 一句话说明项目亮点 ````