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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_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/v1SDK 会自己补路径。第三步是选模型。在模型对话页面 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是 KeybaseURL是 Base URLmodel是 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 你的KeyBearer 和 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媒体查询切换这样编辑器卡片能跟随系统主题展示位看起来更专业。代码高亮的颜色也一并抽成变量切换主题时整体协调。这套结构我用了几个项目改主题只动变量区布局代码一行不用碰。