极速部署
一条命令完成构建与发布，全球边缘节点自动分发，冷启动稳定控制在 50ms 以内。
已启用
Cards / 01
卡片体系
同一套卡片骨架支撑营销、内容、数据三类信息密度：基础卡承载标题与正文，图文卡、标签卡负责视觉与分类，暗色卡与特性卡用于强调，横向滚动与可拖拽列表把卡片变成可编排的容器。
基础卡片
.card / .hoverable / .card-featured悬浮卡片
鼠标移入上浮 4px 并加深边框与投影，用于列表里可点击进入的卡片，动效由 .hoverable 统一控制。
hoverable
Featured
特性卡片
2px 实线边框把卡片提到最前，适合套餐推荐、主推方案这类需要被一眼看到的内容。
推荐中
图文卡片
.card + 渐变封面 + .card-foot
COVER · 16:10
设计8 min
把设计令牌讲清楚
颜色、圆角、间距、阴影全部由变量驱动，改一处即可全局生效，深浅色主题共用同一套语义名。
林
COVER · 16:10
组件260+
四个场景的组件清单
电商、内容、后台、移动端四套场景共用通用组件层，行业页面只做组合，不再重复造轮子。
陈
COVER · 16:10
数据Q3
三季度组件使用报告
卡片与表单类组件的复用率提升 34%，行业页面平均搭建时间从 6 小时降到 2.5 小时。
赵
标签卡 · 暗色卡
.tag 全族 + .card-dark标签卡 · 商品信息
Nexus 云打印机 P2
新品热敏免墨、双频 Wi-Fi、支持桌面前端一键直连，票据模板可在后台可视化编辑。
官方自营
现货
顺丰包邮
限购 2 台
支持 7 天无理由
仅剩 6 件
P2 Series
¥899起¥1099
标签卡 · 任务信息
发版检查清单
待确认共 12 项检查，已完成 9 项，剩余「灰度验证」「回滚演练」「值班交接」等待处理。
完成度75%
release/v3.2
99.98% 可用性
多可用区容灾与自动故障转移，状态页与历史事件全部公开可查。
全部正常
年度最佳组件库
被 1200+ 团队用于生产环境，社区主题与插件已超过 60 个。
Award 2026
团队协作空间
设计稿、令牌与代码片段同源，改版时自动生成变更清单推送给相关成员。
已同步
卡片行 · 可拖拽排序
overflow-x-auto / [data-sort]横向滚动卡片行
拖拽或滚动查看全部 6 张
内容列表
支持分页、筛选与批量操作的内容容器。
12 个页面
数据看板
KPI、趋势图与明细表组合而成的分析页。
9 个页面
成员管理
邀请、角色分配与权限矩阵一张表搞定。
5 个页面
设置中心
左侧导航 + 右侧分组的经典设置布局。
7 个页面
登录注册
账号、验证码、第三方登录与滑块校验。
4 个页面
电商模块
首页、详情、购物车、结算与订单全链路。
11 个页面
可拖拽排序卡片
拖动左侧手柄调整顺序
首屏运营位
全站最高优先级 · 3 个模块
商品推荐
按浏览历史与收藏召回 · 12 个模块
口碑评价
精选带图评价 · 6 个模块
卡片类名对照
class → 效果 → 适用场景| 类名 | 作用 | 实现要点 | 推荐场景 |
|---|---|---|---|
| .card | 卡片骨架 | 1px 边框 + 24px 圆角 + 24px 内边距，背景取 --c-card | 所有卡片的基础 |
| .hoverable | 悬浮反馈 | 上浮 4px，边框转 --c-bd-strong，叠加 shadow-card | 可点击进入的卡片 |
| .card-featured | 强调边框 | 边框加粗到 2px 并改用前景色 | 套餐推荐、主推方案 |
| .card-dark | 深色卡片 | 固定 #0A0A0A 底与 #F5F5F5 字，浅色模式下同样成立 | 营销区块、颁奖位 |
| .card-ic | 图标容器 | 40×40、12px 圆角，.solid 变体反色填充 | 卡片左上角图标 |
| .card-title / .card-body / .card-foot | 三段结构 | 标题 16.5px 半粗，正文 14px 次级色，页脚带 1px 分隔线与两端对齐 | 统一卡片内部节奏 |