Zeabur 控制台

控制台首页

改版前，首页的项目卡片仅显示名称和八格服务图标，不足时以空格补齐，末尾附一个添加按钮。它更接近添加服务的入口，无法反映部署区域、运行状态和费用——用户必须逐一进入项目详情，才能确认服务运行状态与当期账单。

我将卡片重新定义为项目状态的摘要，只保留部署区域、本期用量与服务状态三项信息。运行状态不单独成行，仅在服务崩溃或部署失败时于对应图标上显示红点；项目正常时，卡片上没有任何状态信息。

项目详情

项目详情原先是覆盖在首页上的抽屉面板，部署记录、环境变量、监控与网络设置依次纵向折叠。随着备份、存储卷、数据库管理等功能陆续加入，折叠分区越来越长，面板空间逐渐不足。

改版将项目详情拆为独立页面：左侧固定项目与服务导航，右侧以标签页切换当前服务的各个模块。我负责整体视觉、顶部导航栏与项目侧栏，并借此沉淀了第一批基础组件。

服务器列表与详情

除共享集群外，用户也可以接入自有服务器或在 Zeabur 购买托管 VPS。我将服务器列表的卡片延续了首页「状态摘要」的思路，只展示服务商、IP、地区及 CPU 与内存占用，不必点开详情即可判断负载。

设计系统

控制台原先没有成体系的设计规范：颜色直接取自 Tailwind 原始色阶，空状态和错误页使用通用素材。我先后重建了色板与语义 token，整理出一组可复用的基础组件，并为控制台和官网设计了一套插画。

颜色与 Token

浅色模式是社群中反复提出的需求，而原有的暗色模式也存在对比度不足的问题。由于代码直接引用 Tailwind 原始色阶（如 purple-600），且旧色板仅为暗色设计、明暗跨度不均，单纯替换色板无法得到可用的浅色模式。我因此发起并负责了色彩系统的重建。

我在 OKLCH 色彩空间中借助 Huetone 逐阶选取了灰、紫、橙红三组新色板（关于 OKLCH 的原理，见这篇文章）。灰阶承担的层级最多，因此在标准色阶之间增加了 150、250、750、850 四个半阶，共 15 阶；写入代码时转换为 RGB 三元组存入 CSS 变量，以兼容 Tailwind 的透明度写法。

高频出现的文字颜色抽象为 main、secondary、tertiary 三个语义 token，背景和边框只定义少量语义变量，其余场景继续使用原始色阶，以免语义层在快速迭代的产品中不断膨胀。完整对比见浅色模式更新日志。

暗亮

text-main white

text-secondary 300

text-tertiary 500

border 800

background 950

UI 组件

我引入 HeadlessUI v2 重写了 Button、Menu、Listbox、Input、Modal、Switch、Checkbox 与 Tooltip 等原子组件。结构参考 shadcn/ui，只封装基础交互与样式，不封装 ServiceCard 这类业务组件——在功能快速演进的阶段，过早抽象业务组件往往会带来高昂的维护成本。

视觉

404、502 和空状态页面原先使用通用素材。我结合工业设计背景，在 Rhino 中建模导出轮廓线后以 Lottie 制作动效，设计了一套等轴线框插画——由建模软件保证透视与线宽的一致，契合开发者工具的技术感。这一语言随后延伸至控制台弹窗与官网落地页。

结果

到我离职时，控制台的 184 个 TSX 文件中有 89 个引用了这些基础组件，新色阶与语义 token 也已覆盖大部分页面。