NexusAI 是一套面向 AI Agent、智能客服与自动化产品的 Bootstrap 5 单页展示模板。一个 index.html 同时容纳营销首页、登录面板和模拟工作台，配套独立的 CSS 与 JavaScript，适合制作产品概念演示、官网前台或交互原型。它没有随包提供可运营的 AI 平台后端。
页面以近黑色背景、紫蓝渐变和 Space Grotesk 字体呈现科技产品的视觉风格。首屏将产品主张、免费试用按钮和控制台示意放在一起，再向下展开功能、接入工具、套餐、推荐语与 FAQ。访客可以先理解产品用途，再进入模拟界面查看导航和数据展示方式。
单页中的两种状态
营销页
营销部分通过 Features、Integrations、Pricing 和 FAQ 等锚点连接区块，移动端另有折叠菜单。套餐开关读取价格元素的 data-m、data-y，切换月付和年付显示；FAQ 使用 Bootstrap 折叠组件。浅色模式则在根元素切换 .lm 类，改变背景、文字和边框变量。
模拟工作台
登录后看到的工作台仍然位于同一 HTML 文件。loginSuccess() 隐藏 #landing、显示 #dashboard，再由 dbNav() 切换概览、Agent、聊天、分析、自动化、集成和设置区域。因此，这些区域是页面内的状态切换，没有独立 URL，也不代表建立了受权限保护的后台系统。
如果目标是向客户讲解产品结构，这种组织方式可以在一套前端中演示营销页与应用界面。继续开发完整产品时，则需要重新规划路由、登录状态、权限与数据接口，而不是只把界面换上自己的 Logo。
前端模块与能力边界
| 模块 | 当前源码的实现与边界 |
|---|---|
| 登录与注册 | 校验输入后，通过定时器调用本地成功逻辑；Google、GitHub 按钮也只是模拟用户资料，没有 OAuth 或账户后端 |
| 概览与分析 | Chart.js 绘制图表，数据直接写在脚本中；活动动态由预置文本轮换生成 |
| AI 聊天 | 有消息列表、输入框、加载状态和请求代码，但请求缺少完整的 API 认证配置，不能当作已接通的聊天服务 |
| Agent 与自动化 | 提供卡片、状态和流程展示，未包含真实 Agent 执行、任务调度或模型训练服务 |
| 套餐与订阅 | 套餐金额可切换，试用按钮进入注册面板；没有结账、账单或订阅管理后端 |
聊天脚本尝试从浏览器直接请求 Anthropic Messages API。接入真实服务时，应通过服务端管理密钥、身份校验、请求限额和错误处理，避免把密钥写进公开脚本。界面中的模型名称、对话量、解决率、成本节省和客户评价都是演示文案或示例数据，需要按实际产品替换。
本站在线演示保留了工作台切换与图表，增加了无需填写账号的演示入口，并将聊天请求改为本地提示，不会把消息发送给 AI 服务。原始下载源码保持原样，原件中的接入代码仍需开发者自行整理。
品牌与交互修改
- 颜色与主题：
css/style.css开头的:root定义背景、文字、紫色、蓝色和渐变，.lm覆盖浅色主题。先统一这些变量，可以同时影响营销页与工作台。 - 布局与内容：
index.html包含首屏、功能卡片、套餐、FAQ、登录面板和工作台区块。替换导航锚点时，要同步检查目标区块 ID；演示数字、公司名称、头像、套餐与模型标签也需要一起整理。 - 交互与数据：
js/main.js集中处理菜单、主题、价格切换、模拟登录、工作台导航、Chart.js 图表和聊天。把真实接口接到这里之前，应先拆清哪些是展示状态，哪些需要服务端验证与持久化。
静态运行与依赖
模板不依赖 npm 构建，保留目录结构即可通过静态 HTTP 服务预览。Bootstrap、jQuery、Chart.js、图标字体和主要样式随包提供，Space Grotesk 字体与部分头像依赖网络资源；正式部署时需要确认这些外部依赖是否保留。
- 原始页面存在分隔符和部分图标字符乱码。
- 本站演示副本已修正常见可见乱码，但下载包仍保留原件，定制时应统一 UTF-8 编码并检查相关文案。
- 只做简短落地页时，可以裁掉模拟工作台；需要展示 SaaS 产品界面时，再保留相应区块，让后续修改集中在实际使用的部分。
暂无评论内容