# NetKeeper — 单页落地页 Prompt 前置说明 这是一个edgeone的pages项目，你需要满足edgeone自动部署的部分 Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers. --- ## 1. 项目概览与技术栈 构建一个单页落地页——**NetKeeper — 新一代 Web 网络资源管理面板，让每一个域名、证书、服务器都在掌控之中**。 使用 **Vue3 + Vite + TypeScript + Tailwind CSS + shadcn/vue**。视觉风格为科技风、苹果级精致、带自定义"液态玻璃"毛玻璃效果。支持日间/夜间双主题切换，日间暖白底色配沉稳蓝，夜间纯黑底色配亮青蓝，分别以霓虹绿 (#22C55E) / 琥珀橙 (#F59E0B) / 告警红 (#EF4444) 代表正常、警告、危险三种资源状态，营造专业、活力、值得信赖的 DevOps 管理工具氛围。 站点有一个动态功能：实时"服务器心跳检测"面板，由边缘函数 + KV 存储驱动（见边缘函数需求章节）。 --- ## 2. 字体与设计系统 Google Fonts 引入： - **Plus Jakarta Sans** (300, 400, 500, 600, 700, 800) — 标题字体，圆润有张力 - **DM Sans** (300, 400, 500, 600, 700) — 正文字体 - **DM Mono** (400, 500) — 数据/代码等宽字体 Tailwind 配置 — extend fontFamily： ```js heading: ["'Plus Jakarta Sans'", "sans-serif"] body: ["'DM Sans'", "sans-serif"] mono: ["'DM Mono'", "monospace"] ``` CSS 变量 — 双主题支持（`:root` 为日间模式，`.dark` 为夜间模式）： ```css :root { --background: 40 20% 97%; /* 暖白 #F7F7F5 */ --foreground: 0 0% 10%; /* 深灰 #1A1A1A */ --primary: 210 100% 40%; /* 沉稳蓝 #0284C7 */ --primary-foreground: 0 0% 100%; --accent-success: 142 60% 40%; --accent-warning: 38 92% 48%; --accent-danger: 0 80% 55%; --border: 0 0% 0% / 0.08; --card: 0 0% 100%; --card-foreground: 0 0% 10%; --radius: 12px; --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; } .dark { --background: 0 0% 4%; --foreground: 0 0% 100%; --primary: 190 100% 45%; /* 亮青蓝 #00E5FF */ --primary-foreground: 0 0% 4%; --accent-success: 142 70% 45%; --accent-warning: 38 92% 50%; --accent-danger: 0 84% 60%; --border: 0 0% 100% / 0.12; --card: 0 0% 8%; --card-foreground: 0 0% 98%; } ``` 所有标题：`font-heading text-foreground tracking-tight leading-[1.1]` 所有正文：`font-body font-normal text-foreground/70 text-sm` 所有按钮：`font-body rounded-lg font-medium` 所有代码/数据值：`font-mono text-primary` > **主题适配说明**：以下所有 Section 中的颜色类名（如 `text-white` / `text-white/60` / `bg-black` / `bg-white` 等）在双主题实现时应通过 CSS 变量映射自动适配。日间模式下 `text-white` 对应 `var(--foreground)` 的深色值，`bg-black` 对应 `var(--background)` 的暖白色值；夜间模式下 `text-white` 保持白色，`bg-black` 保持纯黑。液态玻璃 `.tech-glass` 在日间模式下背景透明度调整为 `rgba(0, 0, 0, 0.02)`，夜间模式保持 `rgba(255, 255, 255, 0.02)`。 在 index.css 的 `html` 元素上添加： ```css scroll-behavior: smooth; scroll-padding-top: 80px; ``` --- ## 3. 液态玻璃 CSS（`@layer components`） 两个变体——`.tech-glass`（柔和版）和 `.tech-glass-strong`（强效版）： ### `.tech-glass` - `background: rgba(255, 255, 255, 0.02);` - `backdrop-filter: blur(8px);` - `border: 1px solid rgba(255, 255, 255, 0.06);` - `box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);` - `position: relative;` - `overflow: hidden;` `::before` 伪元素——渐变边框线： - `content: '';` - `position: absolute; inset: 0;` - `border-radius: inherit;` - `padding: 1.2px;` - `background: linear-gradient(180deg, rgba(0, 229, 255, 0.35) 0%, rgba(0, 229, 255, 0.08) 30%, transparent 50%, transparent 70%, rgba(0, 229, 255, 0.08) 85%, rgba(0, 229, 255, 0.35) 100%);` - `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);` - `-webkit-mask-composite: xor;` - `mask-composite: exclude;` - `pointer-events: none;` ### `.tech-glass-strong` 同上但： - `backdrop-filter: blur(50px)` - `box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 20px rgba(0,229,255,0.05)` - 渐变线透明度提升至 0.5/0.15 ### 状态徽章规则 - **在线/正常**：青蓝色边框 `.tech-glass` + 左侧 4px 霓虹绿实色条 - **警告/即将到期**：琥珀色边框 + glow - **危险/已过期**：红色边框 + glow + 脉冲动画 --- ## 4. 共享 Hook — 数字递增动画 创建 `src/composables/useCountUp.ts`： - 接收目标数字 + 持续时间参数 - 使用 `requestAnimationFrame` 驱动，从 0 或起始值缓动到目标值 - 支持格式化函数（如 1234 → "1,234"） - 在 Stats 区域（实时资源计数）使用 --- ## 5. 项目 Logo — NetKeeper 品牌标记（共享组件） 创建 `src/components/Logo.vue`。 ### Props - `size?: "nav" | "footer"`（默认 "nav"） - `asLink?: boolean`（默认 true）— 包装为 `` ### 布局 水平 flex，`items-center gap-3`，两部分组成： **第一部分：图标标记** — 引入独立的 SVG 文件 `src/assets/svgs/logo-shield.svg`（非 emoji、非图片），40×40px（nav）/ 48×48px（footer）。一个风格化的"盾牌 + 信号波纹"图标，象征守护与连接，渲染为当前主题下 primary 色带柔和 glow 阴影。SVG 内容如下（保存为独立文件，不在模板中内联）： ```svg ``` 在 Logo.vue 中通过 `` 引用，或通过 Vite 静态资源导入方式在 build 时打包。 **第二部分：文字商标** — "NetKeeper" 使用 Plus Jakarta Sans，text-foreground： - nav 尺寸：`text-2xl font-heading tracking-tight`，其中 "Net" 为 text-white，"Keeper" 为 text-primary - footer 尺寸：`text-3xl`，同理配色 当 `asLink=true` 时，包装为 ``。 在 Navbar（size="nav"）和 CtaFooter 的底部块（size="footer"）中使用此 Logo。 --- ## 6. Section 1 — 导航栏（固定，滚动后智能背景） `
` 固定于 top-4，全宽，z-50，px-4 md:px-8，`transition-all duration-300`。 内部容器：`max-w-7xl mx-auto flex items-center justify-between`。 ### 左侧 `` ### 中心（移动端隐藏，md:flex） tech-glass 圆角矩形药丸 `px-2 py-1.5` 包含导航链接（平滑滚动锚点）： - "概览" → `#overview` - "功能" → `#features` - "监控" → `#monitor` - "方案" → `#pricing` - "开始" → `#start` 每个链接：`text-sm font-medium text-white/80 px-3.5 py-1.5 rounded-lg hover:bg-white/5 hover:text-primary transition-colors font-mono` ### 右侧 实心 `bg-primary text-black rounded-lg font-medium` "免费体验"按钮（锚点到 `#start`），带 `` 图标，px-4 py-2。 ### 滚动感知背景 窗口滚动 > 50 时在 `
` 上添加 `backdrop-blur-md bg-black/60`。useState + scroll listener（requestAnimationFrame 节流）。 --- ## 7. Section 2 — HERO 主视觉（900px 高度）— id="overview" `
`，relative，overflow-hidden，高度 900px，纯黑背景。 ### 背景 动态科技抽象网格（使用 Three.js 或 Canvas 实现的流动网格线 + 粒子）— 非视频，使用 `` 渲染，从黑渐变为青蓝色调的动态网络拓扑图。 > **注意**：如果 Three.js 引入过于复杂，可用 CSS 动画网格 + 径向渐变替代。 ### 覆盖层 - 径向渐变：`
` - 底部渐变：`absolute bottom-0 left-0 right-0 z-[1] h-64 bg-gradient-to-t from-black to-transparent` ### 内容（z-10，居中，paddingTop: 140px，max-w-6xl mx-auto，text-center） - **徽章药丸**：tech-glass 圆角矩形，内含 `bg-primary text-black px-2 py-0.5 text-[10px] font-bold rounded` 的 "v2.0" 标签 + "管理你的网络资产，像呼吸一样自然" 文字 - **标题**：使用 motion 组件逐词模糊入场——"你的域名。你的证书。你的服务器。一个面板掌控。"——`text-5xl md:text-6xl lg:text-7xl font-heading text-foreground leading-[1.05] tracking-[-2px]`。关键部分 "一个面板掌控" 使用 text-primary 着色。 - **副标题**（motion，0.8s 延迟）："从域名注册到到期续费，从 SSL 证书到服务器监控 — NetKeeper 将所有网络资源整合为一个清晰、自动化的管理仪表盘。再也不会错过任何截止日期。"——`text-white/60 font-body max-w-2xl mx-auto` - **CTA 按钮**（motion，1.1s 延迟）：tech-glass-strong 圆角 "立即开始管理" + ``，以及纯文字 "查看演示" + `` 图标 ### BlurText 组件 创建 `src/components/BlurText.vue`：使用 motion/vue。按词分割文本；每个词通过 IntersectionObserver 动画： - `filter: blur(8px) → blur(0px)` - `opacity: 0 → 1` - `y: 30 → 0` - 每步 0.35s --- ## 8. Section 3 — 数据能力条 居中，py-20。 ### 顶部 tech-glass 圆角徽章 "实时数据能力" ### 下方 响应式网格 `grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 md:gap-8 place-items-center mt-10`。每项：`text-lg md:text-2xl font-heading text-white`： - `` 10,000+ 域名管理 - `` 50,000+ SSL 证书 - `` 8,000+ 服务器节点 - `` 99.9% 到期提醒准确率 - `` 实时心跳检测 - `` 2,000+ 企业用户 > 无需第三方品牌 Logo — 使用能力数据避免版权风险。 --- ## 9. Section 4 — 产品价值（"为什么选择 NetKeeper"）— id="features" `
`，全宽，min-height 600px，py-24 px-6 md:px-16 lg:px-24。 ### 背景 深色径向渐变 + 微弱科技图案纹理。 ### 内容（z-10，居中） - **徽章**：tech-glass — "核心价值" - **标题**："别让一个过期的域名毁了你的业务。"——`text-4xl md:text-5xl lg:text-6xl font-heading text-white` - **副标题**："NetKeeper 用自动化生命周期管理，把"我忘了续费"永远变成过去式。" ### 三个大卡片 横向排列：`grid-cols-1 md:grid-cols-3 gap-8` 1. **自动化提醒引擎** — 到期前 3个月 → 1个月 → 15天 → 7天 → 3天 → 1天，逐级递进提醒，支持邮件 + 浏览器桌面通知 2. **全生命周期可视化管理** — 每个资源的创建、到期、过期、赎回、删除各阶段完整时间轴 + 进度条 + 倒计时，一目了然 3. **一站式聚合面板** — 域名、SSL、服务器、网站四维资源统一管理，相互关联，数据联动展示 --- ## 10. Section 5 — 功能棋盘（交替排列） py-24 px-6 md:px-16 lg:px-24。 ### 标题区 - 徽章："核心功能" - 标题："每一个细节，都为不遗漏而生。" 每行使用 `aspect-video` (16:9) + `object-cover` 的图片容器，图片为功能界面 mockup。 ### Row 1（文字左，图片右） - **H3**：`font-heading text-2xl md:text-3xl` — "域名全生命周期管理" - **功能列表**（带 check 图标）： - WHOIS 智能查询，自动提取创建/到期/删除时间 - 自定义续费提醒策略（时间点可配置） - 完整时间轴：正常 → 即将到期 → 已过期 → 赎回期 → 待删除 - 支持多后缀自定义生命周期策略（如 .cn vs .com 不同配置） - **按钮**：tech-glass-strong "了解更多" - **右侧图片**：NetKeeper 域名管理界面 mockup ### Row 2（图片左，文字右，`lg:flex-row-reverse`） - **左侧图片**：SSL 证书管理界面 mockup - **H3**："SSL 证书指纹管理，轻量又安全" - **功能列表**： - 仅保存公钥指纹，不保存证书全文 - 起止时间 + 到期前阶梯提醒 - 批量导入、更新、删除 - 证书与网站自动关联展示 ### Row 3（文字左，图片右） - **H3**："服务器心跳检测 + 在线状态面板" - **功能列表**： - 通过 curl 请求获取 CPU / 内存 / 磁盘 / 在线时间 - hash 鉴权 Token，GET/POST 双协议支持 - 历史数据记录，状态变化趋势图 - 卡片式展示，负载/内存/磁盘使用率图表 + 徽章 ### Row 4（图片左，文字右，`lg:flex-row-reverse`） - **左侧图片**：综合网站管理界面 mockup - **H3**："网站管理——资源的交汇点" - **功能列表**： - 直观展示域名 → SSL → 服务器三层关联 - 标记后端技术栈（C#、PHP、Node.js 等）使用彩色徽章 - 自动展示关联资源的到期时间 - 多服务器绑定，统一检查站点状态 --- ## 11. Section 6 — 功能网格（4 列特写） 徽章："更多能力" 标题："你需要的，这里都有。" 4 列卡片：`grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6`。每张：`tech-glass rounded-xl p-6 hover:border-primary/30 transition-all duration-300 hover:-translate-y-0.5`。 - 图标：tech-glass-strong 圆角 `w-10 h-10` 圆形容器内的 SVG 图标（对应路径见下表第二列） - 标题：`text-lg font-heading text-white` - 描述：`text-white/60 font-body text-sm` | 图标 | 标题 | 描述 | |------|------|------| | `` | 智能提醒系统 | 3个月 / 1个月 / 15天 / 7天 / 3天 / 1天六级提醒，支持自定义时间点，桌面通知 + 邮件 + 站内 Toast | | `` | 倒计时进度条 | 每个资源都有清晰的创建→到期时间轴，进度条实时展示剩余比例，负数表示已过期天数 | | `` | 后缀生命周期配置 | 按域名后缀统一配置生命周期策略（如 .cn 续费窗口不同），未配置则使用 .* 通用策略 | | `` | 用户独立空间 | 每个用户管理自己的资源、提醒配置，数据隔离存储，安全可靠 | --- ## 12. Section 7 — 功能模块市场 — id="monitor" `
`，py-24 px-6 md:px-16 lg:px-24。 ### 标题区（居中） - 徽章："实时监控台" - 标题："所有资源的健康状态，一眼尽收。" - 副标题："从域名到期倒计时到服务器内存水位，我们为你盯紧每一秒。" ### 3 列卡片网格 `grid-cols-1 md:grid-cols-3 gap-6, max-w-6xl mx-auto`。 每张卡片使用 motion `whileInView` (once: true) 渐入：opacity 0→1，y 20→0，延时 0 / 0.12 / 0.24s。 卡片设计：`` 带 `tech-glass rounded-xl overflow-hidden group transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_20px_40px_-12px_rgba(0,229,255,0.15)]`。 #### 上半部分 模拟服务器状态面板的占位 UI，可以是纯 CSS 绘制的"模拟仪表盘"——如圆环进度条、脉冲绿点、数据行。 #### 下半部分 `p-6 space-y-3` - **状态标签**（tech-glass 小徽章）："在线" + `` / "警告" + `` / "危险" + `` - **名称**：`text-lg font-heading text-white` - **数据行矩阵**： - CPU 负载：0.12, 0.08, 0.05 - 内存：使用 3.2GB / 总量 8GB - 磁盘：使用 45% / 总量 256GB - 在线时间：87天 12小时 - **底部**：到期倒计时（`text-primary font-mono`）+ "详情"按钮 ### 三张卡片示例 1. **主节点服务器** — 状态：在线 `` — CPU 0.12, 0.08, 0.05 | 内存 3.2/8GB | 磁盘 45% | 到期倒计时 127天 2. **API 网关集群** — 状态：警告 `` — CPU 0.45, 0.38, 0.22 | 内存 6.1/8GB | 磁盘 72% | 到期倒计时 14天 3. **海外边缘节点** — 状态：在线 `` — CPU 0.08, 0.05, 0.03 | 内存 1.8/4GB | 磁盘 32% | 到期倒计时 231天 --- ## 13. Section 8 — 实时数据面板（心跳检测） ### 背景 深色背景 + 闪烁粒子动画（极简 Canvas 或 CSS） ### 内容 `tech-glass rounded-2xl p-12 md:p-16`，内部网格 `grid-cols-2 lg:grid-cols-4 gap-8 text-center`。 > **布局规则**：所有 4 个数据项使用相同的网格行，自然基线对齐。实时计数器使用绝对定位的"LIVE"指示器位于数字上方——不对其他 3 项产生偏移。 #### 数据项 1（**实时**） - 容器：`
` - 绝对定位指示器：`
` + `` + "LIVE" - 数值：初始为 "—"，从 `/api/heartbeat-stats` 获取 - 标签："当前在线服务器 " + `` #### 数据项 2–4（静态） - "99.9%" — "系统可用性" - "<50ms" — "平均告警响应" - "10,000+" — "每日检测请求" 所有数值：`text-4xl md:text-5xl lg:text-6xl font-heading text-white leading-none font-mono` 所有标签：`text-white/50 font-body font-light text-sm mt-3` 实时值使用 countUp 动画首次加载，每 15 秒刷新。获取失败时显示 "—"，30 秒后重试。 --- ## 14. Section 9 — 用户证言 — id="pricing" `
` ### 头部 - 徽章："用户故事" - 标题："被上千名运维和站长验证。" ### 3 列网格 `grid-cols-1 md:grid-cols-3 gap-6`。每项：`tech-glass rounded-xl p-8`。 - 头部：`` + 公司名称（每个证言使用不同的头像 SVG：`avatar-1.svg`、`avatar-2.svg`、`avatar-3.svg`） - 引用：`text-white/80 font-body text-sm` - 姓名 + 职位：`text-white font-body font-medium text-sm` / `text-white/50 font-body text-xs` #### 证言 1 "以前我管理 200 多个域名全靠 Excel 表格 + 手机闹钟。自从用了 NetKeeper，自动提醒 + 可视化时间轴再也没让我错过一次续费。" — **张明**，某互联网公司运维负责人 #### 证言 2 "服务器心跳检测功能太实用了。之前有几台海外节点挂了 3 天才发现，现在不到 5 分钟就收到告警。年度预算直接省了 30%。" — **李婷**，SaaS 平台 CTO #### 证言 3 "API 简洁，部署方便，EdgeOne 加持下全球访问速度极快。最重要的是——开源友好，我们团队自己二次开发也很顺畅。" — **陈浩**，独立开发者/站长 --- ## 15. Section 10 — CTA 页脚 — id="start" `
` ### 背景 深色背景 + 科技网格线。 ### 内容（z-10，居中） - **标题**："掌控你的网络世界，从今天开始。"——`text-5xl md:text-6xl lg:text-7xl font-heading drop-shadow-[0_2px_20px_rgba(0,0,0,0.5)]`，其中"掌控" 使用 text-primary - **副文本**："加入 2,000+ 运维团队和独立开发者，用 NetKeeper 让每一个域名、证书、服务器都在你的掌心之中。" - **两个按钮**：tech-glass-strong "开始免费使用" + ``，以及实心 `bg-primary text-black` "查看 GitHub" ### 页脚块 `mt-32 pt-8 border-t border-white/10`： - ``（SVG 盾牌 48×48 + "NetKeeper" 文字），`mb-6` - 版权行：`
` - 左侧：`© {new Date().getFullYear()} NetKeeper. Built with stability.` - 右侧：链接（隐私、条款、联系我们） --- ## 16. 边缘函数需求 — "服务器心跳检测"实时面板 站点唯一的动态后端功能：通过边缘函数 + KV 存储实现的服务器在线统计面板。必须是真实动态端点，不可硬编码。 ### 功能规范 #### 端点 1：`GET /api/heartbeat-stats` - 从 KV 读取 `heartbeat:today-count`（当天检测到的活跃服务器数） - 读取 `heartbeat:lifetime`（累计检测总数） - 读取 `heartbeat:online-now`（当前在线服务器数） - 返回 JSON： ```json { "todayActive": , "lifetimePings": , "onlineNow": , "updatedAt": "" } ``` #### 端点 2：`POST /api/heartbeat-report` - 服务器端调用 curl 时触发此端点 - 每次收到有效的服务器心跳请求，递增今日计数和累计计数 - 使用唯一的服务器 hash token 防重复计数 ### 技术细节 - 缓存头：`Cache-Control: no-store, must-revalidate` - 标准 Web API（Request, Response）— V8 运行时，非 Node.js。不可使用 Node 内置库。 - KV 绑定在边缘函数配置中定义。 ### 前端交互 挂载时 `fetch('/api/heartbeat-stats')`，解析 JSON，动画递增到 todayActive，每 15 秒刷新。失败时显示 "—"，30 秒重试。 --- ## 17. HTML Head 配置（index.html） 在 `` 中： - charset + viewport - `` - `NetKeeper — 网络资源管理面板，让你不再错过任何到期` - `` ### OpenGraph ```html ``` ### Twitter Card ```html ``` ### 其他 - Google Fonts preconnect + stylesheet for Plus Jakarta Sans + DM Sans + DM Mono - Favicon：`/favicon.svg` 位于 /public，引用 `src/assets/svgs/logo-shield.svg` 的简化单色版本（单色填充 currentColor，viewBox 0 0 64 64） --- ## 18. 关键模式公约 ### 区域模板 - 区域徽章：`tech-glass rounded-lg px-3 py-1 text-xs font-medium text-primary font-mono inline-block mb-4` - 区域标题：`text-4xl md:text-5xl lg:text-6xl font-heading text-white tracking-tight leading-[1.05]` ### 状态指示器 所有状态指示器使用脉冲圆点 SVG 图片配合文字标签。在线/正常：``，警告：``，危险/错误：``。 ### 倒计时/进度条 使用 tech-glass 进度条容器 + 渐变填充条（绿→黄→红根据剩余比例变化）。 ### 进度条颜色梯度 - 剩余 >60%：绿色 - 剩余 30-60%：黄色 - 剩余 <30%：橙色 - 已过期：红色 ### 卡片交互 hover 时上移 1px + 边框发光。 ### Toast 通知 - 所有消息提示使用 Toast 在右上角弹出 - 成功：绿色 - 警告：橙色 - 错误：红色 - 提醒也使用 Toast 作为通知方式（但桌面通知也要有） - 叠加层级最高（z-100） ### 外部容器 `bg-[#0A0A0A] overflow-visible` ### 所有图片 `object-cover` + 容器 `overflow-hidden` + 圆角 ### 锚点导航 原生平滑滚动（scroll-behavior: smooth + scroll-padding-top: 80px） ### 动画 - 尊重 `prefers-reduced-motion` - 能提供动画的地方就提供动画 ### 双主题模式 支持日间/夜间两种界面。在导航栏右侧提供主题切换开关（`` / `` 图标），点击切换 `` 标签的 `.dark` 类。默认跟随系统 `prefers-color-scheme`。所有颜色通过 CSS 变量自动适配。此外在 `` 中添加 `` 以支持浏览器原生主题切换。 ### 桌面通知 使用 Notification API，需用户授权。 ### 表单校验 所有表单数据校验保持健壮，错误状态使用 toast 提示而非 alert()。 ### 默认排序 所有列表默认按到期时间升序排列。 ### 倒计时格式 `XX天XX小时XX分`，正数为剩余时间，负数为已过期天数。 --- ## 19. 依赖清单 ```json { "dependencies": { "vue": "^3.4", "vue-router": "^4.3", "motion": "^11.0", "tailwindcss-animate": "^1.0", "shadcn-vue": "latest" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0", "vite": "^5.4", "typescript": "^5.5", "tailwindcss": "^3.4", "autoprefixer": "^10.4", "postcss": "^8.4" } } ``` > **SVG 资源**：所有图标、状态指示器、头像占位图等均以独立的 `.svg` 文件存放在 `src/assets/svgs/` 目录下，而非通过 npm 图标库引入。文件清单详见各相关 Section 的引用路径。 > **注意**：Three.js 或简单 Canvas 为可选依赖（仅用于 Hero 动画背景）。禁止使用 hls.js。 --- ## 20. 部署指南 ### 环境约束 运行时可能没有全局 `npm`。降级顺序： 1. 如果有 `npm` / `npx`，优先 `npx @latest` 2. 如果只有 `pnpm` / `yarn`，使用 `pnpm dlx` / `yarn dlx` 3. 如果没有任何 Node 包管理器，下载 CLI 为预构建二进制（`curl -fsSL -o && chmod +x `）并通过绝对路径调用 4. 永远不要因全局安装失败而阻塞构建。如果 CLI 无法安装，仍然生成完整项目 + 输出明确的手动部署步骤 ### 构建与部署步骤 ```bash # 1. 安装依赖 npm install # 2. 构建前端 npm run build # vite build # 3. 复制边缘函数到 dist cp -r edge-functions dist/ # 4. 部署到 EdgeOne Makers # 按照 EdgeOne Makers 文档完成部署 ``` ### 部署后验证 1. 首页加载后，心跳面板显示 LIVE 指示器 + 实时数据 2. 导航平滑滚动正常 3. 所有 Section 可见且布局正确 4. 移动端响应式正常 5. 返回 (a) 在线预览 URL 或 (b) 项目路径 + 精确手动命令 6. 附带 EdgeOne 控制台链接 + 确认边缘函数和 KV 绑定活跃