企业官网建设流程全解析

1. 为什么我要用纯 CSS 复刻 Cursor 编辑器界面

最近在做一个开发者工具导航站，需要放一个「代码编辑器预览」的展示位。设计稿给的是 Cursor 那种深色、圆角、带侧边栏和状态栏的编辑器外观。我第一反应是截张图贴上去，但截图有个致命问题：不同分辨率下糊得厉害，而且没法做 hover 交互。于是决定用纯 CSS 把它画出来。

这里说的「用 CSS 效果还原 Cursor 编辑器界面」，指的是不依赖任何截图、不引入 Monaco 或 CodeMirror 这类重型编辑器内核，只用 HTML 结构加 CSS 变量、Flex/Grid 布局、伪元素和渐变，把编辑器的视觉骨架搭出来。适合谁？适合做产品官网展示位、博客代码块美化、后台管理系统的空状态插画，以及想练 CSS 布局的初中级前端。它不能真的编辑代码，但视觉还原度可以做到九成以上。

光有界面还不够。展示位旁边我放了一个「试试 AI 补全」的按钮，点了要能真的发请求。如果每个模型都单独配一套 Key 和 Base URL，前端配置会散得到处都是。所以我用 TaoToken 的统一 API 通道，一个 Key、一个 Base URL 打通多个模型，前端只认一套配置。这篇就把 CSS 还原和接入配置两件事串起来讲，你跟着做能同时拿到一个能看的界面和一个能通的请求。

先明确最终产物：一个 1280×720 左右的编辑器卡片，左侧文件树、中间代码区带行号和高亮、底部状态栏；点击按钮后通过统一通道请求模型，把返回文本填进代码区。下面从零开始。

2. TaoToken 统一 Key 接入前的准备工作

在写 CSS 之前，先把请求通道理清楚，否则界面做完发现请求发不出去，回头改配置更麻烦。TaoToken 在这里扮演的角色是「统一入口」：你不需要为每个模型记不同的域名和密钥，只要拿到一个 API Key，配上统一的 Base URL，就能在请求里通过 model 字段切换模型。对前端来说，配置项从 N 套收敛成一套。

第一步是拿 Key。打开官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，注册登录后进入控制台。控制台地址是 https://taotoken.net/console ，在左侧菜单找到 API Keys 页面，点「创建密钥」。创建时给它起个能认出来的名字，比如cursor-demo-frontend，方便以后区分是哪个项目在用。创建完立刻复制，页面刷新后就看不到完整 Key 了，这点和大多数平台一样。

第二步是确认 Base URL。统一通道的地址是 https://taotoken.net/api ，注意这个地址后面不加任何 UTM 参数，直接用它作为请求前缀。完整的对话补全端点是在它后面拼/v1/chat/completions，也就是https://taotoken.net/api/v1/chat/completions。如果你用的是 OpenAI 兼容的 SDK，通常只需要把baseURL设成https://taotoken.net/api/v1，SDK 会自己补路径。

第三步是选模型。在模型对话页面 https://taotoken.net/models 可以看到当前可用的模型列表，每个模型有个 Model ID，比如常见的对话模型 ID。这个 ID 就是请求体里model字段要填的值。前端展示位我建议选一个响应快、价格友好的对话模型，毕竟只是演示补全效果，不需要最强的推理能力。

这里有个容易踩的坑：Key 和 Base URL 是配套的，别把别处的 Key 拿来配这个 Base URL，会直接 401。另外 Key 属于敏感信息，前端项目里绝对不要硬编码进打包产物。演示项目我一般放在后端做一层转发，或者用环境变量注入，下面配置章节会给出两种做法。

准备工作做完，你手里应该有三样东西：一个 API Key、Base URLhttps://taotoken.net/api、一个 Model ID。记住这三件套，后面配置和排障都围绕它们。

3. 可复制的 CSS 变量与接入配置片段

这一节是全文的核心，分两块：先给 CSS 变量和布局骨架，再给请求配置。两块都能直接复制。

3.1 CSS 变量与编辑器布局

我把颜色、圆角、间距全部抽成 CSS 变量，放在:root里，改主题只动这一处。下面这段直接贴进你的样式文件：

:root { --editor-bg: #1e1e1e; --editor-sidebar: #252526; --editor-border: #333333; --editor-text: #d4d4d4; --editor-muted: #858585; --editor-accent: #007acc; --editor-line: #2d2d2d; --editor-radius: 10px; --editor-gap: 12px; --editor-font: "JetBrains Mono", "Fira Code", Consolas, monospace; } .editor-window { width: 100%; max-width: 880px; height: 520px; background: var(--editor-bg); border: 1px solid var(--editor-border); border-radius: var(--editor-radius); display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 36px 1fr 28px; grid-template-areas: "titlebar titlebar" "sidebar code" "status status"; overflow: hidden; font-family: var(--editor-font); color: var(--editor-text); } .editor-titlebar { grid-area: titlebar; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--editor-sidebar); border-bottom: 1px solid var(--editor-border); } .editor-dot { width: 12px; height: 12px; border-radius: 50%; } .editor-dot.red { background: #ff5f56; } .editor-dot.yellow { background: #ffbd2e; } .editor-dot.green { background: #27c93f; } .editor-sidebar { grid-area: sidebar; background: var(--editor-sidebar); border-right: 1px solid var(--editor-border); padding: 10px 0; font-size: 13px; } .editor-file { padding: 6px 16px; color: var(--editor-muted); cursor: pointer; } .editor-file.active { color: var(--editor-text); background: #37373d; border-left: 2px solid var(--editor-accent); } .editor-code { grid-area: code; padding: 14px 0; overflow: auto; font-size: 13px; line-height: 1.7; } .editor-line { display: flex; padding: 0 16px; } .editor-line .ln { width: 32px; color: var(--editor-muted); user-select: none; text-align: right; margin-right: 16px; } .editor-status { grid-area: status; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--editor-accent); color: #ffffff; font-size: 12px; }

配套的 HTML 结构按 grid 区域对应即可，注意grid-template-areas里的名字要和元素的grid-area一致。代码高亮我用的是最朴素的做法：给关键字、字符串、注释分别加类，颜色写死在变量里。比如.tok-key { color: #569cd6; }、.tok-str { color: #ce9178; }、.tok-comment { color: #6a9955; }。这样不引入高亮库也能有模有样。

有个细节值得说：cursor: pointer用在文件树项上，鼠标移上去变手型，这是最基础的交互反馈。原文里提到的cursor:hand是 IE 时代的写法，现代浏览器统一用pointer，别写错了。

3.2 请求配置三件套

前端直接请求会暴露 Key，所以我给两种配置。第一种是后端转发，用 Node 写个最小代理：

// server.js —— 仅演示，生产需加鉴权和限流 import express from "express"; const app = express(); app.use(express.json()); app.post("/api/complete", async (req, res) => { const resp = await fetch("https://taotoken.net/api/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${process.env.TAOTOKEN_API_KEY}` }, body: JSON.stringify({ model: "你的ModelID", messages: [ { role: "system", content: "你是一个代码补全助手，只返回代码片段。" }, { role: "user", content: req.body.prompt } ], temperature: 0.2 }) }); const data = await resp.json(); res.json(data); }); app.listen(3000);

Key 放在环境变量TAOTOKEN_API_KEY里，启动前export TAOTOKEN_API_KEY=你的Key。第二种是纯前端演示，用 Vite 的环境变量，在.env.local里写VITE_TAOTOKEN_KEY=你的Key，代码里用import.meta.env.VITE_TAOTOKEN_KEY读取。注意这种方式 Key 会进打包产物，只适合本地演示，上线必须换后端转发。

如果你用 OpenAI 官方 SDK，配置更简单：

import OpenAI from "openai"; const client = new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: "https://taotoken.net/api/v1" }); const completion = await client.chat.completions.create({ model: "你的ModelID", messages: [{ role: "user", content: "写一个 CSS 居中布局" }] });

三件套在这里体现得很清楚：apiKey是 Key，baseURL是 Base URL，model是 Model ID。三个值都对上，请求才能通。任何一处写错，报错信息都不一样，下一节验证时会具体说。

4. 验证界面渲染与请求连通性

配置写完必须验证，分两步：先看界面，再看请求。

界面验证很简单，把 HTML 和 CSS 放进页面，浏览器打开。检查这几个点：编辑器卡片是否有圆角和边框；标题栏三个圆点颜色是否正确；左侧文件树点击时.active类是否切换、左边框是否出现；代码区行号是否右对齐且不可选中；底部状态栏是否是蓝色背景。如果布局错乱，九成是grid-template-areas和元素的grid-area名字对不上，或者行列数不匹配。打开开发者工具的 Elements 面板，看 grid 高亮能快速定位。

请求验证我习惯先用 curl 打通，再接到前端。在终端执行：

curl https://taotoken.net/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer 你的Key" \ -d '{ "model": "你的ModelID", "messages": [{"role": "user", "content": "用一句话说明什么是 CSS Grid"}] }'

成功的话会返回一段 JSON，结构里choices[0].message.content就是模型输出。看到这个字段有内容，说明 Key、Base URL、Model ID 三件套全部正确。如果返回 401，往下看排障章节。

curl 通了之后，把前端按钮接上。点击按钮时把代码区当前内容作为 prompt 发出去，拿到返回后追加到代码区。实测下来，从点击到内容出现，演示模型通常在 1 到 3 秒。如果超过 10 秒没反应，先看 Network 面板里请求是否发出、状态码是多少。

还有一个视觉验证点：请求成功后，把返回的代码片段用高亮类包一层再插入，这样代码区看起来是「活的」。我一般写个简单的正则把关键字替换成带类的 span，虽然不如专业高亮库精确，但演示足够。

验证通过后，整个闭环就完成了：CSS 画出界面，统一通道提供能力，按钮触发请求，结果回填界面。这套结构可以直接搬到你的展示位里。

5. 本篇常见错误排查

排障这块我按真实遇到的报错来写，每个都给出原因和动作。

401 Unauthorized。最常见。原因有三种：Key 复制时带了空格或换行；Key 和 Base URL 不配套；请求头里Authorization格式写错。正确格式是Bearer 你的Key，Bearer 和 Key 之间一个空格。检查方法：把 Key 重新复制一次，确认没有首尾空白；确认 Base URL 是https://taotoken.net/api/v1，不是别的域名。如果还报 401，去控制台确认这个 Key 是否被禁用或删除。

local proxy failed / connection refused。这个报错通常出现在你本地起了代理服务但没启动成功，或者端口被占用。前端请求/api/complete时如果后端没起来，浏览器会报这个。动作：确认node server.js在跑，终端没有报错；确认前端请求的端口和后端监听端口一致；用curl http://localhost:3000/api/complete单独测后端。

Cannot read properties of undefined (reading 'choices')。这个报错说明请求返回了，但返回体里没有choices字段。原因通常是请求体格式不对，比如messages写成了字符串而不是数组，或者model字段拼错。动作：把请求体打印出来逐字段核对，messages必须是[{role, content}]结构，model必须是控制台里看到的准确 ID。

OAuth / 鉴权相关报错。如果你用的是某些 CLI 工具或 SDK，可能会走 OAuth 流程。这类报错一般和 Key 无关，而是工具的登录态过期。动作：重新执行工具的登录命令，或者改用 API Key 方式配置。用统一通道时，优先用 Key 而不是 OAuth，配置更直接。

界面能显示但按钮点击无反应。先看控制台有没有 JS 报错，再看 Network 有没有请求发出。如果请求没发出，多半是事件绑定写错，或者按钮被其他元素遮挡。用document.querySelector确认按钮能选中，加个console.log确认点击事件触发。

代码区行号错位。行号用固定宽度加右对齐，如果字体不是等宽，行号和代码会对不齐。动作：确认--editor-font里第一个可用字体是等宽字体，或者给行号单独设font-variant-numeric: tabular-nums。

排障的核心思路就一条：先确认请求有没有发出去，再看返回状态码，最后看返回体结构。三步定位，基本能覆盖九成问题。

6. 后续怎么把这套东西用起来

界面和通道都通了之后，能做的事不少。最直接的是把代码区做成可编辑的contenteditable，配合统一通道做行内补全，体验上更接近真实编辑器。再进一步，可以加一个模型切换下拉框，选项从模型对话页面拿到的 Model ID 列表填充，切换时只改请求体的model字段，Key 和 Base URL 不动，这正是统一通道的价值。

如果你要做的是长期编码辅助或者 Agent 类工具，建议了解一下 Coding Plan，地址是 https://taotoken.net/coding-plan ，它面向的是持续性的编码场景，和单次对话的计费方式不同，适合高频使用。接入文档在 https://taotoken.net/doc ，里面有各语言 SDK 的完整示例，遇到配置问题先翻文档比搜索快。需要管理多个项目的 Key 时，回到 API Keys 页面 https://taotoken.net/api-keys 按项目分别创建，方便追踪用量和随时吊销。

最后说个实用技巧：CSS 变量那套主题，你可以再抽一层，把--editor-bg等变量做成亮色和暗色两套，通过prefers-color-scheme媒体查询切换，这样编辑器卡片能跟随系统主题，展示位看起来更专业。代码高亮的颜色也一并抽成变量，切换主题时整体协调。这套结构我用了几个项目，改主题只动变量区，布局代码一行不用碰。