安装此技能：https://github.com/TencentEdgeOne/edgeone-pages-skills

任务
请您创建并部署一个名为LandscapeFlow AI的产品官网，部署到EdgeOne Makers，最终返回公开访问链接。 LandscapeFlow AI是面向独立景观设计师的AI工作流产品，旨在「让设计师回归设计本身」——把传统需要一周的景观方案汇报流程（踏勘记录→概念生成→方案选择→空间推演→表达视觉→汇报输出）通过6个专职AI Agent压缩到30分钟内。 构建流程中遇到部署、Edge Functions、KV等问题，直接调用edgeone-pages-skills中的edgeone-pages-deploy和edgeone-pages-dev解决。

一、技术栈与项目结构
框架：纯静态 HTML + CSS + 原生 JavaScript（不使用 React/Vue，确保最快部署） 目录结构：

landscapeflow/
├── index.html
├── workbench.html
├── functions/
│   ├── api/
│   │   ├── brief.js          # Edge Function: AI 生成项目说明
│   │   └── cases.js          # Edge Function: KV 读取案例库
│   └── _middleware.js        # 中间件: CORS + 访问日志
├── assets/
│   └── (景观图片素材)
└── README.md
部署：edgeone-pages-deploy 部署到EdgeOne Makers生产环境，部署后输出公开访问URL KV 绑定：在 EdgeOne 控制台手动绑定 KV 命名空间，变量名LANDSCAPE_CASES

二、景观设计系统
2.1 色彩
css
复制
--bg: #0A0A0A;                       /* 深黑底 */
--green: #22C55E;                    /* 景观生命绿 */
--green-glow: rgba(34，197，94，0.4);
--white: #FFFFFF;
--white-60: rgba(255，255，255，0.60);
--white-30: rgba(255，255，255，0.30);
--border: rgba(255，255，255，0.10);
--card-bg: rgba(255，255，255，0.06);
2.2 字体
通过Google Fonts引入：

标题：'Playfair Display'， Georgia， serif（斜体强调用绿色） 正文与用户界面：'DM Sans'， system-ui， sans-serif 中文眉：DM Sans，全大写，字间距0.18em，绿色

2.3 景观风格
高级、克制、深夜美术馆感、克制中带生命力。所有英雄大图覆盖重构蒙版，主体用绿色光晕扩展。

三、首页index.html结构（7个区块）
区块1：固定顶部导航
高度68px，背景rgba(10，10，10，0.75)+背景滤镜：模糊(20px) 左：🌿 LandscapeFlow AI（Playfair Display 18px，绿叶图标带绿色阴影） 中：4个链接 - 设计革命 / 工作流程 / 模板库 / AI 试用（必须严格4个，不要多加） 右：登录（ghost）+免费试用（绿色突变胶囊） 滚动 > 40px 时背景减弱为rgba(10，10，10，0.95)

区块2：英雄#hero
全屏height: 100vh; min-height: 680px; 6张景观大图轮播（每5秒切换，淡入淡出+缓慢变焦1.06→1）

轮播图片（使用CDN地址）：

javascript
复制
const heroImages = [
  'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_coast.jpg',
  'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_playground.jpg',
  'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_pocket.jpg',
  'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_commercial.jpg',
  'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_community.jpg',
  'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_wetland.jpg'
];
全屏洞察蒙版linear-gradient(rgba(10，10，10，0.64) 0%， rgba(10，10，10，0.28) 32%， rgba(10，10，10，0.30) 58%， rgba(10，10，10，0.86) 100%) 文字区块定位：使用position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);从底部向上定位，文字组视觉重心占据画面55%～60%区域，有充足的呼吸空间。禁止使用top: 73%或从顶部下推的写法，否则内容高度增加后会类似挤到底部。

css
复制
.hero-content {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 860px;
  padding: 0 24px;
}
内容顺序：

眉毛：🌿 LandscapeFlow AI（Playfair Display 22px） 主标题（Playfair Display， 700， 行高1.02）：

让设计师，回到设计本身

主标题字号与换行规则（必须严格实现）：

css
复制
.hero-title {
  font-size: clamp(36px， 4vw， 64px); /* 宽屏最大64px，确保一行放得下 */
  white-space: nowrap;               /* 宽屏强制一行，不换行 */
}
@media (max-width: 600px) {
  .hero-title {
    white-space: normal;             /* 窄屏允许自然换行 */
    font-size: clamp(32px， 8vw， 48px);
  }
}
效果要求：宽屏（>600px）"让设计师，回到设计本身"必须在同一行；窄屏（≤600px）自然换为两行："让设计师，" / "回到设计本身"。

副标题（DM Sans 16px，white-60，最大宽度620px，margin: 0 auto）：

从踏勘记录到完整的汇报PPT，景观设计师的流程AI工作台。生产力革命之后，时间终于回到观察土地、思考人居、想象未来。

主CTA：进入工作台→（链接到workbench.html） 底部居中显示6个轮播指示点（position: absolute; bottom: 32px;）

区块 3：设计师的三次生产力革命#revolution
黑底 眉毛：第三次革命 大标题：设计师的三次生产力革命 副标题：每一次，时间都还被赋予了设计本身 三栏调节（hover时绿色光晕上浮）：

第一次革命（反馈）	第二次革命（CAD）	第三次革命（AI）
时代	互动时代	CAD时代	人工智能时代
时间花在	在纸上磨手艺	记软件命令	使用自然语言对话
设计师是	工匠	制作员	回到设计本身
底注	时间在画笔上	时间在主板上	时间在土地上、在人身上
第三张卡底注用绿色+斜体Playfair Display装饰。

区块4：六步工作流程#workflow
眉毛：工作流程 大标题：从一句话到一份完整方案 副标题：六个AI Agent，把一周压缩到30分钟 6 张配合，三列两行：

#	步骤	描述	标签
01	项目定义	利用关键条件建立项目前提：场地、画面、尺度、目标	任务书解读 / 用户画像 / 边界识别
02	概念生成	从气候、人群、矛盾、案例四个角度建立设计依据	SWOT / 案例匹配 / 设计推导
03	方案选择	三个差异化概念方向，每个都是决策节点结果	多方案对比 / 决策建议 / 风险标注
04	空间推演	平面布局、流线组织、竖向、植物结构	总平面 / 功能分区 / 种植策略
05	视觉表达	要点透视、鸟瞰图、效果图、材料板	文生图 / 风格控制 / 多视角
06	产出成果	设计说明文本、报告PPT、打印版本一键导出	PPT 生成 / 文本润色 / 格式汽车
每张调整左上大数字01-06（Playfair Display 56px 半透明绿）。

区块5：模板库#templates
眉毛：模板 大标题：专业模板，覆盖核心场景 副标题：6类景观项目模板，开箱即用 数据必须通过 fetch('/api/cases') 从 Edge Function 动态加载（KV 驱动） 反馈渲染时直接使用c.img字段，不要加startsWith('http')判断兜底，避免本地路径被误判为非法

模板内容由cases.js返回：

滨海风景公园（热门，12张幻灯片·含幻灯片·含效果图）
儿童乐园（精选，10张幻灯片·含色彩方案·含设施清单）
城市口袋公园（14张幻灯片·含功能分析·含植物配置）
商业街区景观（新品，16 张幻灯片 · 含夜景方案 · 含铺装细节）
社区居住景观（12 张幻灯片·含四季变化·含灌溉系统）
生态湿地修复（精选，18张幻灯片·含生态分析·含水文设计）
区块 6：AI 在线试一下 #try
眉毛：立即尝试 大标题：输入项目信息，AI立即生成项目说明 左右两栏：

左：表单（项目名称/类型选择6项/使用地面积/设计风格选择4项/核心目标文本区域/生成按钮） 右：结果区，点击按钮调用 POST /api/brief，正在加载状态展示打字机效果

区块7：CTA + 页脚
CTA黑底中间过渡绿色光晕，眉毛：START NOW，大标题：现在开始你的设计 副标题：无需下载，打开浏览器即可工作。免费计划包含5次完整方案生成。 大胶囊绿色按钮：免费生成开始 页脚：标志+链接+版权

四、工作台workbench.html
简化版工作台：顶部导航 + 6步选项卡切换器（项目定义→输出结果），每个选项卡对应输入/结果区域。 特别注意Step 5 表达使用CDN图片（不要用Unsplash占位）：

javascript
复制
const visualizations = [
  { src: 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_aerial.jpg', title: '社区公园鸟瞰效果图', tag: '鸟瞰' },
  { src: 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_plan.jpg', title: '总平面图 · 含功能分区', tag: '平面' },
  { src: 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_night.jpg', title: '夜景灯光效果图', tag: '夜景' },
  { src: 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_playground.jpg', title: '儿童游乐区节点透视', tag: '节点' },
  { src: 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_lawn.jpg', title: '共享草坪节点透视', tag: '节点' }
];
3列网格布局，绝对不要保留"+生成更多"占位框。

五、边缘函数
5.1 functions/api/brief.js
javascript
复制
5.2 functions/api/cases.js（KV驱动）
javascript
复制
5.3 functions/_middleware.js（CORS + 日志）
javascript
复制
export async function onRequest({ request， next }) {
  const url = new URL(request.url);
  if (request.method === 'OPTIONS') {
    return new Response(null， {
      headers: {
        'Access-Control-Allow-Origin': '*'，
        'Access-Control-Allow-Methods': 'GET， POST， OPTIONS'，
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  }
  const response = await next();
  if (url.pathname.startsWith('/api')) {
    response.headers.set('Access-Control-Allow-Origin'， '*');
    response.headers.set('X-Powered-By'， 'LandscapeFlow AI');
  }
  return response;
}
六、景观素材
所有景观图片素材已上传至 CDN，无需本地生成或放置图片文件。

CDN 基础路径：https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow

Hero轮播 + 模板库（6张，1920×1080）：

https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_coast.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_playground.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_pocket.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_commercial.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_community.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/tmpl_wetland.jpg
工作台视觉表达（5张，1920×1080）：

https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_aerial.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_plan.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_night.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_playground.jpg
https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/landscapeflow/viz_lawn.jpg
七、前置关键JS行为
英雄轮播：纯JS实现 6张图淡入淡出 + 缓慢缩放，每5秒切换，鼠标悬停暂停
滚动渐进：所有.reveal元素 IntersectionObserver 上浮渐入
导航栏滚动变化：> 40px 时背景 alpha 加深
模板库动态加载：fetch('/api/cases') 后渲染，直接用c.img 不要加startsWith兜底判断
AI试一下：表单提交时禁用按钮+加载+打字机效果（每25ms一个字符）
八、KV绑定（关键步骤）
配置完成后，必须在 EdgeOne Makers 控制台手动完成 KV 绑定：

进入项目 → KV 存储 → 绑定命名空间
变量名：（LANDSCAPE_CASES必须一字不差，对应代码中的全局变量）
命名空间：新建一个，名称随意（如LANDSCAPE_CASES）
绑定完成后重新配置一次让绑定生效
重要技术点：EdgeOne Makers 的 KV 绑定变量是全局变量，而不是 env 对象的属性。代码里访问方式：

✅ typeof LANDSCAPE_CASES !== 'undefined'+LANDSCAPE_CASES.get()
❌ env.LANDSCAPE_CASES.get()（错误，env里没有这个键）
九、最终交付
完成上述所有工作后输出：

✅ index.html 7个块
✅ workbench.html 6步选项卡（Step 5 视觉表达用CDN viz_*图）
✅ functions/api/brief.js 能返回项目说明
✅ functions/api/cases.js 能返回 6 条案例（来源：kv）
✅ functions/_middleware.js 生效
✅ 11 张景观图从CDN加载（无需本地图片文件）
✅ 通过 edgeone-pages-skills 部署到 EdgeOne Makers 生产环境
✅ KV 命名空间已在控制台绑定（LANDSCAPE_CASES）
✅ 返回最终公开访问 URL
✅ 浏览器验证：英雄轮播 / 模板库 6 张景观图 / AI 实验三个交互核心全部跑通
请现在开始执行。全程不要问问题，遇到技术细节直接调用edgeone-pages-skills解决。