所有控件的颜色、圆角、阴影、尺寸都取自 CSS 变量，集中在 ui-kit.css 第 1 节。 换肤只改这一处，全站所有控件同步生效；深色模式通过 [data-theme="dark"] 覆盖同名变量实现，控件样式零改动。

主色一个、语义色四个、中性色七级。语义色只用于状态表达（成功 / 警告 / 危险 / 信息），不要拿去做装饰，这样用户扫一眼就能判断状态。

标题限四级，正文 14px，说明文字 12px。长文本一律加省略号规则，避免把卡片撑变形。

7 种类型 × 4 种尺寸 × 图标 / 纯文字 / 圆形 / 通栏等形态。点击按钮有水波纹反馈， 悬停有 1px 上浮，按下有 0.97 缩放 —— 这三层反馈让"点到了"这件事毫无歧义。

自带 90+ 个线性图标，全部为内联 SVG（不依赖图标字体、不怕离线、不闪字）。 用法：<i class="ui-i" data-i="search"></i>，尺寸加 .s12 .s18 .s20 .s24， 颜色继承 currentColor。要加图标，只需往 ui-kit.js 的 ICONS 里加一行 path。

标签表达分类，徽标表达数量或状态提醒。徽标挂到任意元素上只需一个 .ui-badge-wrap 包裹。

头像支持文字、图标、图片三种来源，尺寸四档；卡片由头 / 体 / 脚三段组成，可自由取舍。

12 列栅格 + 弹性列，间距统一走 --gap。分割线支持实线 / 虚线 / 带文字 / 竖线四种。

所有输入类控件共用 .ui-input 外壳：前缀图标、后缀按钮、清除、字数统计都塞进同一个盒子， 边框只在盒子上画一次，所以图标与文字永远垂直居中。聚焦时边框变主色 + 3px 焦点环。

输入区默认用比卡片略沉的底色、聚焦时回到表面色，空白区一眼看出「待填写」；占位符由 --ui-placeholder 统一控制（正文色 46% 透明度，自动适配深浅色）。 声明 data-import=".txt,.csv" 即可获得文件导入能力（右上角按钮 + 拖入文件），无需写一行 JS； data-import-max="0" 表示不限制大小；需要引导用户注意时，调用 UI.highlightImport(box, 6000) 让按钮闪烁一会儿。

带显隐切换与强度提示。强度条四格，颜色随等级从危险色过渡到成功色 —— 用户不需要读文字就知道够不够强。

胶囊形搜索框（输入框 + 按钮拼合），以及带实时筛选的「可搜索下拉」—— 下拉面板内置搜索框，输入即过滤选项。

带步进按钮，支持最小 / 最大值、步长、小数位；键盘上下键同样可步进，长按不失控。组件自带 width: max-content，放进 flex 列或栅格里不会被拉成整行宽。

借鉴 Blender 的高频工作流，而不是照搬外观：数值既可输入也可横拖，Shift 精调、Ctrl 吸附；大量选项按属性组折叠，低频项藏入“高级设置”；F3 可直接搜索操作。

自定义下拉，面板带 6px 位移 + 缩放 + 淡入的展开动画。支持单选、多选（选中项变标签贴在触发器上）、分组、禁用项。 原生 <select> 也已统一皮肤，需要无障碍原生行为时可直接用。

日历由 JS 生成（非图片、非第三方库），支持上月 / 下月、今天、清空、禁用日期、今天高亮。时间选择用双列滚动列表。

预设色板 + 系统取色器兜底。选中的颜色实时回填到触发器，色块用双层 box-shadow 描出选中态。页面监听 color:change 就能拿到结果（e.detail.color，色板点击也会触发）。

勾选时对勾是「笔画绘出」动画（stroke-dashoffset 0 → 24），开关滑块用回弹曲线。 还有按钮风格的分组，适合筛选条这种横向空间有限的场景。

开关用于「立即生效」的布尔设置；需要提交表单才生效的场景请用复选框。两档尺寸，支持禁用与加载。

单值与双值区间。拖动时滑块放大并带出光圈，悬停显示数值气泡；点击轨道可直接跳转，键盘与触摸同样可用。要恢复上次保存的数值用 UI.setSlider(el, [60])。

悬停预览、点击定分、移出回显。只读模式用于展示平均分，小数自动补半星。

拖拽区在拖入时放大并变主色底；文件列表逐条淡入上浮，进度条按真实字节上报走。 本页只做进度演示，不会真的上传任何文件（这套模板的默认约定：能本机处理就不出网）。 需要自己接管文件列表时，给 .ui-upload 加 data-manual：组件只负责拖拽/点击选择， 然后向上抛 upload:files 事件（e.detail.files），列表与进度由页面渲染。 上传之后的列表不要再自己画，统一用下面的 文件区。

全站统一规则：上传框与文件列表互斥——一旦有文件，上传框让位，列表就地接管它原来的位置，清空后自动换回。 两种视图（文字列表 / 紧凑缩略图）共用同一份 DOM，只切 data-view， 选中项、滚动位置、已加载的缩略图都不会因为切换而丢失。条目只有四态 pending / working / done / error，状态色、进度线、下载可用性全部由属性驱动，页面不写状态样式。 用法：var fl = UI.files(el) → fl.add(files) / fl.update(id, {...}) / fl.remove(id)。 拖动条目可以直接换顺序，松手后的顺序就是打包 / 下载的顺序（也可以 fl.move(id, 2) 程序化排序）。 缩略图视图里每张右上角的放大镜会打开全屏查看器（UI.preview）， 列表或缩略图视图下双击整行 / 卡片也能预览；查看器会把面板里所有能预览的图串成一组，可以直接左右翻， 关掉时选中「当时正在看」的那张。 列表上方还有一条总进度：默认隐藏，只要有条目在跑就自动出现（running 时带流光）， 全部结束后亮一下 100% 再收起；也可以 fl.progress(62, '打包中…') 由页面自己驱动。

面向十六进制编辑、数据包查看、固件分析和文件差异工具的复合组件。统一提供文件栏、工具栏、虚拟滚动编辑区、数据解释器与状态栏；业务页面只负责填充行数据与交互。

回车或失焦即转成标签，重复会提示，达到上限后拒绝新增；退格键可快速删掉最后一个。标签逐个弹出 / 收起都有动画。

输入即跳下一格，支持整串粘贴自动分发、退格回退、方向键移动。填满后自动校验：填错会抖动清空（本页正确码为 123456）。

多级联动，点左侧展开下一列，选到叶子节点后把整条路径拼成「A / B / C」回填。

树结构收在下拉里，支持按名称搜索高亮。树的展开用 grid-template-rows 0fr → 1fr 过渡，所以高度自适应且动画平滑。

左右两栏 + 中间移动按钮，支持单项与整组（表头复选框）移动，计数实时更新。

三种布局：纵向（默认）、横向（标签左对齐）、行内。校验规则写在 data-rule 上，支持 required、email、min:6 组合，错误信息用 data-msg-* 自定义。 失焦即时校验，提交时统一校验并定位到第一个错误项。

支持斑马纹、悬停高亮、边框、固定表头、列排序（点表头切换升 / 降序）、多选（含半选）、展开行、 行内进度条、加载遮罩与空状态。点表头真的会排序，点 ＋ 真的会展开。

键值对的整齐排列，比表格轻、比纯文本重。适合详情页的参数区。窄屏自动收成一列。

可点击的条目悬停时向右微移 3px，配合右侧箭头给出「能点」的信号。

展开高度用 grid-template-rows 0fr → 1fr 过渡，内容多少都不会卡顿或跳版。data-accordion 可做手风琴。

用于版本记录、处理进度、审批流。节点颜色区分状态，最后一个节点可用脉冲动画表示「进行中」。

层级展开用两行 CSS 过渡完成（不是 max-height 猜高度），所以展开速度恒定、不会抖动。

进入视口才开始动画（不会白跑）。线形 / 环形 / 分段 / 条纹流动 / 不确定态都有。

加载占位用渐变扫光（shimmer），比转圈更能传达「内容马上出现」。点按钮切换骨架与真实内容。

空状态必须给出「下一步该做什么」，所以永远配一个主操作按钮。结果页用于流程结束的反馈。

3.2 秒自动切换，悬停暂停、滚出视口暂停、切到后台标签页暂停（不白烧电）。支持左右箭头、指示点与触摸滑动。

图片悬停轻微放大，点击全屏预览（带背景虚化与缩放动画）。二维码由 JS 生成点阵，接后端真码时替换 src 即可。

宽高比 5:3，点击可全屏预览

查看代码

用手机扫码即可在手机上继续处理，数据不出本机

查看代码

最后一项是当前页，不加链接、颜色最深。层级超过 4 级时中间省略。

下划线指示条会平滑滑到当前标签（transform 动画，不是跳）。两种风格：下划线式与胶囊式。

比标签页更轻，用于视图切换、粒度切换。白色滑块在两项之间平滑移动。

横向用于表单分步，纵向用于流程说明。已完成的步骤徽标填主色，当前步骤带光圈。

页码太多时中间自动折叠成省略号；带跳页输入框与每页条数选择。

下拉菜单复用下拉面板的动画与定位；支持分组标签、快捷键提示、危险项。

左侧目录用的就是这套样式：细竖线 + 当前项高亮，滚动时指示条跟着走（本页左侧就是实例）。

信息 / 成功 / 警告 / 危险四种语义色，可带描述文字、可关闭、可做通栏横幅。

屏幕居中的紧凑提示条（356 × 约 44），白底 + 1px 淡描边 + 轻阴影，语义色只落在图标和底部倒计时线上。消失时卡片从右往左碎成微粒飘散。长内容自动增高换行，鼠标悬停或键盘聚焦暂停倒计时；支持常驻与撤销。系统开启减少动态效果时直接关闭。调用：UI.toast('处理完成', 'success')。

比 Toast 承载更多信息（标题 + 描述），从右上角滑入，适合长时间异步任务的结果提醒。

遮罩带背景虚化，对话框从 95% 缩放弹入。支持标准对话框、表单对话框、确认框、危险确认框。 关闭方式给全了：遮罩点击、右上角 ×、Esc。

从右侧滑出，常用于详情面板、设置面板、移动端导航。也支持左滑与底部上滑两种变体。

Tooltip 用于短提示（纯 CSS，悬停即出）；Popover 用于富内容；Popconfirm 用于操作前二次确认。

三种形态：环形（默认）、三点跳动、区域遮罩。区域遮罩会自动继承父级圆角并虚化背景。

水印用于敏感内容防截图外传（平铺 + 旋转 + 低透明度）。快捷键提示统一用 .ui-kbd，风格和系统键盘一致。