ui-clay · 萝卜城组件库
LUOBOE CITY DESIGN SYSTEM · PR-UI-1 · 双形态 + 无障碍
ACCENT
UI-1 · TOKENS v0.1
宪法 clay 黏土盲盒:扁平无渐变 · 硬底投影 · inset 高光 双形态 body[data-mode]:城内暖城 ⇄ studio 白标(accent 注入) 状态色 唯一真源:卷四 §12 语义矩阵 组件 12 件:btn/chip/tag/tbl/tabs/meter/kcard/ebar/plan/sidenav/空态/加载

00 TOKENS 色板 · 左城内右同值,形态切换即换肤

paper纸底
card卡面
card2卡底
ink
acc品牌主色
st-run运行/通过
st-render渲染/错误
st-busy忙碌待人
st-idle空闲
st-info信息

01 BTN 按钮 · 一次性反馈,禁用态不抬升

类型 TYPE

尺寸 SIZE · 命中区 ≥34px(图标钮 36px)

状态 STATE

02 CHIP 状态胶囊 · LED + 词双通道,不靠颜色单传义

机器六态(卷四 §12)

空闲 IDLE 运行 RUNNING 渲染 RENDERING 忙碌 · 待人复核 ×3 通过 PASSED 错误 ERROR

staff 任务六态(卷七 §40 现网真源)

接单中 进行中 待验收 已通过 已取消 已过期

03 TAG 分类标签 · 卷八旧屏三分类口径

画布重建 8 小IP续用 11 换皮复用 20 新模块 NEW GATED · 人审

模块编码(联邦 11 模块)

cityhhcreate editcheckmarket edustaffpay screensteward

开源许可(卷八 §51 三层)

Apache-2.0 全开 开源核心 · 只对规模收费 社区模块 · 许可自选

04 TBL 表格 · staff-manage 真实字段(工号/职级/状态/GATED 人审)

工号姓名 · 部门职级状态在效工具技能标签操作
RC-011罗小剪 · 编辑处理E3 在岗 RoboCut / QuickCut 快剪 拆条
RC-007罗小审 · 审核管理E4 待验收 ×3 RoboChecker GATED 合规
RC-019罗小学 · 教育管理E1 入职中 RoboXuexi 排课

05 TABS 页签 · aria-selected,城内墨底/白标品牌底

表列:工号/姓名部门/岗位/职级/状态/在效工具/技能标签/操作 —— 生命周期六动作,GATED 单独人审留痕。

SEG 分段(形态切换同款)

06 METER 计量 · 语义色随水位,读数永远在旁

萝卜币配额 · 正常4,200 / 20,000
渲染时长 · 偏高61.2 / 80 h
存储 · 超额128 / 100 GB
HH 渲染中 · 不确定进度QUEUE 07

07 KCARD KPI 卡 · staff 仪表盘六数口径

本月完成
38
▲ 12% vs 上月
一次通过率
92%
▲ 3pt
平均验收分
4.7/5
▲ 0.2
本月内部成本
¥862
▼ 8% 省出来了
在办任务
3
1 件待人复核
累计验收通过
412
进城第 9 个月

08 EBAR 职级条 · E1 见习 → E4 候选签约

罗小剪 RC-011 接单中
E1E2E3E4
距 E4 候选签约还差 720 积分本月 +180

09 PLAN 定价卡 · 萝卜苗免费 / 城籍月 / 州府年

萝卜苗免费
开源核心全量 · 每月 200 萝卜币 · 社区集市可逛
当前 城籍¥49 / 月
五街区全工具 · 2,000 萝卜币 · HH 产线优先队列
最划算 州府¥468 / 年
城籍全量 ×12 省两个月 · 企业加购席位入口

10 SIDENAV 侧栏 · registry 驱动,模块下线栏目自动收起

11 EMPTY 空态 · 城市广播腔,当事同事本人开口

罗小导 · 编剧台
这块地还空着
拖入首帧图或剧本,开始第一条 HH 任务

12 LOADING 加载 · 持续动画只给"正在工作的机器"

骨架屏 SHIMMER 1.4s

LED 呼吸(1s / 1.4s / 2.4s)· 常亮灰 = 空闲

运行 1.4s 渲染 1s 忙碌 2.4s 空闲常亮

渲染进度(占位呼吸 + 真实读数并存)

HH-03 渲染中
47% · 剩 02:14

13 MATRIX 状态语义矩阵 · 卷四 §12 全站唯一真源(本页未私造任何状态色)

状态LED语义 tokenchip 类名附加表现
空闲 IDLE 灰常亮--st-idle.chip.st-idle
运行 RUNNING 绿呼吸 1.4s--st-run #1E6B4A.chip.st-run
渲染 RENDERING 粉呼吸 1s--st-render #E24E6B.chip.st-render扫描线 + 进度条
忙碌 / 待人 琥珀呼吸 2.4s--st-busy #E8B93C.chip.st-busy队列数读数
通过 PASSED 绿常亮--st-pass.chip.st-pass✓ 清单
错误 ERROR 粉常亮--st-err #C22F4E.chip.st-err重试 / 查看日志双按钮

规则:颜色永远搭配文字或数字(LED + 状态词 + 读数),不靠颜色单通道传义 —— 色弱用户与截图场景都要可读。

14 A11Y 无障碍自检 · 卷四 §17 逐条落地

焦点环 :focus-visible 2.5px 品牌色,键盘 Tab 可见(按 Tab 试试)
命中区:按钮 ≥34px / 图标钮 36px / chip ≥28px / 侧栏项 40px
对比度:ink on card ≥ 7:1;ink3 只作 mono 标注不载关键信息
动效可关:顶栏"动效 OFF"或系统 prefers-reduced-motion,LED 改常亮
双通道:所有状态 LED + 文字 + 读数并存,不靠颜色单传义
语义角色:tabs role=tab / meter role=progressbar / 加载 role=status