请为一家城市规划与建筑设计研究院（筑境设计）创建一个全栈作品集网站，部署在边缘壹平台页面服务上。 --- ## 图片资源（CDN） > **所有图片已上传至 CDN，直接使用以下 URL，无需外部图库。** > > CDN 基础路径：`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing` | 用途 | CDN 地址 | |------|----------| | **首屏背景**（城市鸟瞰夜景） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/hero-city-aerial-night.jpg` | | **关于我们**（建筑大图） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/about-modern-architecture.jpg` | | **代表项目 1**（西溪湿地生态修复） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/project-xixi-wetland-restoration.jpg` | | **代表项目 2**（苏州河历史滨水复兴） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/project-suzhou-river-heritage.jpg` | | **代表项目 3**（大湾区创新产业走廊） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/project-gba-innovation-corridor.jpg` | | **代表项目 4**（银河 TOD 综合体） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/project-galaxy-tod-complex.jpg` | | **代表项目 5**（滨水城市总体规划） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/project-waterfront-city-plan.jpg` | | **代表项目 6**（云端艺术中心） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/project-cloud-arts-center.jpg` | | **核心团队 — 张翰文**（主任建筑师） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/team-zhang-hanwen.jpg` | | **核心团队 — 林若曦**（城市规划总监） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/team-lin-ruoxi.jpg` | | **核心团队 — 陈铭远**（技术研究院院长） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/team-chen-mingyuan.jpg` | | **核心团队 — 苏婉晴**（可持续设计总监） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing/team-su-wanqing.jpg` | > 在 HTML 代码中，`` 直接填写上表中的完整 CDN URL。图片加载失败时使用深色背景色 fallback。 --- 网站定位 这是一家成立二十年的综合性设计研究机构，总部位于上海，在北京、深圳、成都设有分公司。设计理念是"筑以载道，境由人心"，致力于用设计重塑城市空间。网站需要传达出专业、高端、国际化的事务所气质。 项目结构 筑境设计页面/ ├── 首页文件 前端页面（单文件应用） ├── 边缘函数/ 边缘壹平台页面服务的边缘函数 │ └── 接口/ │ ├── 联系表单/提交.后缀 表单提交 → 键值存储 │ ├── 统计/访问.后缀 访问统计 → 键值计数 │ └── 智能客服/对话.后缀 智能客服 → 大模型流式对话 └── 说明文档.后缀 视觉风格 整体采用暗色系设计（主背景纯黑微灰，次背景深灰，卡片更浅一级灰），搭配香槟金色及其浅色、深色变体作为点缀色 使用衬线字体做标题，无衬线字体做正文 所有颜色、字体、间距通过样式自定义属性统一管理 网站图标使用矢量图形内联 边缘壹平台页面服务产品能力（核心评分项） 一、边缘函数 — 三个接口 ① 联系表单提交接口（接收并存储） 接收联系表单数据（姓名、公司、邮箱、电话、需求描述） 服务端验证必填字段和邮箱格式 数据存入键值存储（键格式：消息/年/月/日/消息_时间戳_随机码） 键值存储中同时维护总提交计数 返回结构化响应（成功标志、提示信息、记录编号） 包含跨域预检处理 键值存储未绑定时降级为开发模式（控制台日志记录） 键值存储绑定变量名：联系键值 ② 访问统计接口（查询并递增） 键值存储中递增访问计数器 读取总提交数 基于访问量估算在线人数 返回访问数、提交数、在线人数三个指标 响应头设置不缓存（实时性） 前端在左下角显示"某次访问 · 某人在线"徽章 键值存储未绑定时返回演示模式标识 ③ 智能客服接口（代理大模型对话） 接收消息数组 和模型参数 内置筑境设计专属系统提示词（业务信息、项目案例、团队介绍、联系方式） 支持多种大模型（深度求索、智谱等） 接口密钥通过环境变量安全获取（不硬编码） 流式响应（文本事件流），前端逐字显示 支持多模型路由配置（模型配置对象） 接口密钥未配置时返回服务不可用状态码和提示 包含错误处理和超时处理 环境变量：智能接口密钥、智能模型名、智能接口地址 二、键值存储（边缘持久化） 创建命名空间联系键值并绑定到项目 存储联系表单提交记录（按日期分层存储） 存储访问计数和提交计数 所有键值操作通过环境变量对象统一访问 代码中包含键值存储未绑定时的降级兼容逻辑 三、前端集成 表单对接 表单提交从模拟改为真实调用后端接口 提交时按钮显示加载中并禁用 根据后端返回的成功标志显示对应提示 网络错误时降级为本地提示（兼容本地开发） 智能客服浮窗 右下角固定圆形按钮，金色背景加脉冲动画 点击展开聊天面板（固定宽度，最大高度限制） 关闭时按钮变为叉号，脉冲动画消失 面板包含：头像加标题栏、消息列表、快捷问题按钮、输入框加发送按钮 消息列表支持助手（深色卡片）和用户（金色气泡）两种样式 输入中显示打字动画（三点跳动） 支持流式渲染（逐字显示智能回复） 四个快捷问题按钮：业务范围、项目案例、合作咨询、设计理念 聊天历史维护在内存中，支持多轮对话 回车键发送、上档加回车换行 面板打开关闭带缩放加淡入动画 移动端自适应（面板左右撑满） 状态栏显示"在线 · 边缘壹边缘响应" 访客统计徽章 左下角固定胶囊徽章 绿色呼吸灯加文字显示访问数和在线人数 页面加载时自动调用统计接口 接口不可用时显示"边缘壹边缘加速中" 演示模式后缀标记 搜索引擎优化与社交分享 必须包含描述和关键词标签 必须包含开放图谱标签（标题、描述、类型、语言区域） 网页标签添加中文语言声明 所有图片必须包含有意义的中文替代文本 交互与动效 预加载动画：金色线条从左到右滑动，零点八秒后淡出隐藏 自定义光标（仅限鼠标设备）：金色小圆点即时跟随加金色外圈缓动跟随，悬停在交互元素上时外圈放大；触摸设备自动隐藏 滚动渐显（交叉观察器）：各模块内容在滚入视口时淡入上移，支持多级延迟 首屏区域：全屏城市鸟瞰夜景背景（使用 CDN 图片 hero-city-aerial-night.jpg），鼠标滚动时产生视差效果 数字统计：滚入视口时触发数字从零递增到目标值的动画 作品集项目卡片：悬停时图片放大，同时从底部滑入项目信息遮罩层 奖项区域：无限横向循环滚动的跑马灯效果（脚本复制文档元素实现），悬停暂停 导航栏：滚动超过一定距离后添加毛玻璃背景 导航高亮：滚动时自动高亮当前章节 所有按钮和链接的悬停过渡使用弹性缓动曲线 回到顶部按钮：滚动超过一定距离后淡入出现（位于客服按钮上方） 图片加载策略 首屏背景图（hero-city-aerial-night.jpg）立即加载，添加透明度过渡 其他图片使用交叉观察器懒加载（数据源属性替代源属性），提前加载边距 图片容器设置深色背景色避免白屏闪烁 无障碍与性能 减少动效偏好媒体查询 无障碍标签用于菜单和返回顶部按钮 滚动事件使用动画帧节流 跑马灯动画时长约四十秒 移动端适配（三个断点） 桌面端：完整布局 平板端：业务领域和作品集改为两列 手机端：汉堡菜单全屏覆盖、业务作品团队改为单列、聊天面板左右撑满 页面结构（按顺序） 首屏全屏（城市鸟瞰夜景背景 hero-city-aerial-night.jpg 加固定导航栏加滚动引导） 关于我们（机构介绍加四项数据统计加建筑大图 about-modern-architecture.jpg） 业务领域（八个板块图标卡片，四列网格） 代表项目（六个项目，三列不等高网格，分类筛选）— 使用 project-*.jpg 系列图片 发展历程（五个节点时间线） 设计理念（居中引用金句） 荣誉奖项（跑马灯循环滚动） 核心团队（四位成员圆形头像卡片）— 使用 team-*.jpg 系列图片 联系我们（联系信息加表单，表单对接边缘函数） 页脚（标志加链接加动态版权年份） 浮层组件 智能客服浮窗（右下角金色按钮加聊天面板） 访客统计徽章（左下角） 回到顶部按钮（右侧，位于客服按钮上方） 消息通知（底部居中） 代表项目数据（直接写入 JS，使用 CDN 图片）： ```javascript const CDN_BASE = 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/jujing'; const projects = [ { title: '西溪湿地生态修复规划', category: '生态', location: '杭州', year: '2023', image: `${CDN_BASE}/project-xixi-wetland-restoration.jpg`, alt: '西溪湿地生态修复规划鸟瞰效果图' }, { title: '苏州河历史滨水复兴', category: '城市更新', location: '上海', year: '2022', image: `${CDN_BASE}/project-suzhou-river-heritage.jpg`, alt: '苏州河历史滨水复兴夜景效果图' }, { title: '大湾区创新产业走廊', category: '产业规划', location: '深圳', year: '2023', image: `${CDN_BASE}/project-gba-innovation-corridor.jpg`, alt: '大湾区创新产业走廊总平面图' }, { title: '银河 TOD 综合体', category: '城市设计', location: '成都', year: '2022', image: `${CDN_BASE}/project-galaxy-tod-complex.jpg`, alt: '银河TOD综合体建筑效果图' }, { title: '滨水城市总体规划', category: '城市规划', location: '北京', year: '2021', image: `${CDN_BASE}/project-waterfront-city-plan.jpg`, alt: '滨水城市总体规划模型图' }, { title: '云端艺术中心', category: '文化建筑', location: '上海', year: '2024', image: `${CDN_BASE}/project-cloud-arts-center.jpg`, alt: '云端艺术中心室外效果图' }, ]; ``` 核心团队数据（直接写入 JS，使用 CDN 图片）： ```javascript const team = [ { name: '张翰文', title: '主任建筑师 / 创始合伙人', bio: '哈佛大学建筑学博士，二十年城市设计经验', image: `${CDN_BASE}/team-zhang-hanwen.jpg`, alt: '张翰文主任建筑师照片' }, { name: '林若曦', title: '城市规划总监', bio: '麻省理工城市规划硕士，专注轨交 TOD 综合开发', image: `${CDN_BASE}/team-lin-ruoxi.jpg`, alt: '林若曦城市规划总监照片' }, { name: '陈铭远', title: '技术研究院院长', bio: '同济大学工学博士，数字化设计领域专家', image: `${CDN_BASE}/team-chen-mingyuan.jpg`, alt: '陈铭远技术研究院院长照片' }, { name: '苏婉晴', title: '可持续设计总监', bio: '伦敦建筑学院硕士，绿色建筑与生态修复专家', image: `${CDN_BASE}/team-su-wanqing.jpg`, alt: '苏婉晴可持续设计总监照片' }, ]; ``` 技术要求 前端：单文件网页（样式写在样式标签内，脚本写在脚本标签内） 后端：边缘壹平台页面服务的边缘函数 存储：边缘壹平台页面服务的键值存储（联系键值命名空间） 智能：通过边缘函数代理调用大模型接口 不使用任何外部样式脚本框架（纯原生实现） 字体通过谷歌字体加载 图片全部从上方 CDN 地址加载，不使用外部图库 不使用内联事件处理，全部事件监听器绑定 边缘函数导出函数使用对应请求方法签名 所有边缘函数包含键值存储未绑定时的降级逻辑 Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.