Blocks 页面方案

8 个预设 Tabs 壳：协议监视 / 网络抓包 / SQL 工作台 / 终端 / 崩溃 / 插件 / API 调试 / 引导流

管理后台首页、运维大屏、分析看板、高管摘要

Overview

2026 年 5 月 · 实时数据

今日请求+12.4%

28,420

活跃用户-2.1%

3,180

错误率-0.1%

0.42%

付费转化+0.4%

6.2%

请求量趋势 · 12hpeak 3,380

流量来源

搜索 46.1%
直接 24.1%
社交 19.6%
邮件 10.1%

最近请求last 6

方法	路径	状态	耗时	时间
GET	/v1/orders	200	88ms	2m 前
POST	/v1/orders	201	142ms	3m 前
PUT	/v1/orders/{id}	200	94ms	4m 前
GET	/v1/users/me	304	14ms	5m 前
POST	/v1/login	401	38ms	6m 前
DELETE	/v1/orders/{id}	500	212ms	7m 前

Dashboard Overview 管理后台首页

4 个 KPI MetricCard + LineChart 趋势 + DonutChart 占比 + DataGrid 最近请求。常用作 SaaS 后台首页。

Analytics Board 数据分析看板

4 个 Stat KPI + DonutChart 来源分布 + BarChart 每日转化 + StackedBar100 浏览器份额 + Treemap Bundle 分析。

Monitoring Board 运维监视大屏

4 个 Gauge 资源仪表 + LatencyHeatmap 一周 × 24h 热力图 + 服务健康列表（Sparkline + 可用率 + 状态码）。

Executive Summary 高管摘要

4 个大字号 KPI（ARR / MAU / NPS / LTV）+ Sparkline 趋势。适合做季度月会的幻灯片首页。

Card + Input + Checkbox + Button + Link 拼装的标准登录页。含 GitHub 第三方登录槽与"忘记密码 / 立即注册"链接。

PhoneInput 国家码 + OtpInput 6 位验证码 + 60s 倒计时重发。code 输满 6 位时自动 submit。

Stepper 3 步引导：账号（含 PasswordStrength）→ 个人（含 PhoneInput）→ 协议同意。每步有进入前置校验。

404 / 403 / 500 / 网络异常占位

Error 404 页面未找到

Result(404) + StatusIllustration(not-found) + 主操作 / 次操作 + 常见入口链接。

Error 403 无权限

Result(403) + StatusIllustration(forbidden) + Banner 说明所需角色 + 申请权限 / 切换账号双操作。

Error Network 网络异常

Result + 重试按钮（含 1.5s loading）+ 折叠诊断信息（CfDescriptionList）。

代码编辑器 / 数据库工具的完整 IDE 风格组合

Code Workbench VSCode 风格代码工作台

DockLayout 嵌套：左侧 TreeView 文件树 + 主区 CodeEditor 多 tab + 底部 Terminal/Output/Problems + 底部 StatusBar。

DB Workbench 数据库工作台

左侧 Schema 树 + 右侧 SQL 编辑器 + 下方结果 / 历史 / 消息三 tab。Splitter 双向分隔，Postgres / MySQL 风格。

个人 / 团队 / 安全设置组合

设置

个人资料、通知偏好与安全设置

姓名邮箱个人简介

语言

邮件通知

接收账号活动、安全提醒邮件

推送通知

桌面 Web Push 实时推送

每周摘要

每周一发送过去 7 天的活跃报告

两步验证

登录时除密码外要求 OTP 验证码

修改密码

登出所有设备

Settings Page 设置页

Tabs 三段：个人资料（Avatar + Input + Textarea + Select）/ 通知（Switch 行）/ 安全（两步验证 + 危险操作）。

用户公开主页，包含基本信息 / 动态 / 仓库列表

Profile Page 个人主页

Avatar + Tag 组 + 4 个 Stat 数据 + Tabs 三段（概览 / 动态 / 仓库）+ 关注 / 发消息操作。

多档价格方案 + 功能对比表

简单透明的定价

按需付费，随时取消。所有方案都包含核心组件库 MIT License。

Free

免费

永久免费，适合个人 hobby 项目

所有 atoms 与 blocks
社区支持
1 个工作区
500 MB 存储

Pro最受欢迎

$ 10 / 月，按年付

小团队与初创公司，按月续订

Free 的全部
无限工作区
50 GB 存储
邮件 + Slack 工单
SSO 单点登录

Enterprise

自定义

大型组织，定制部署与合规支持

Pro 的全部
私有化 / VPC 部署
SAML + SCIM
24/7 专属技术支持
SLA 99.95%

Pricing Table 价格方案

3 档方案 (Free / Pro / Enterprise) + 月付/年付切换 + Pro 高亮 + 功能复选 + CTA 按钮。

发票列表 + 支付方式 + 订阅管理

账单与发票

下次扣款 · 2026-05-01

当前方案Pro

$ 12/月

无限工作区
50 GB 存储
邮件 + Slack 工单

付款方式

VISA•••• 424207/26

本月使用

API 调用

284k

存储

12.4GB

历史发票

日期	描述	金额	状态
2026-04-01	Pro 月费 · 2026-04	$ 12.00	paid
2026-03-01	Pro 月费 · 2026-03	$ 12.00	paid
2026-02-01	Pro 月费 · 2026-02	$ 12.00	paid
2026-01-01	Pro 月费 · 2026-01	$ 12.00	paid
2025-12-01	Pro 月费 · 2025-12	$ 12.00	failed
2025-11-01	Pro 月费 · 2025-11	$ 12.00	paid