ChuFix UI v0.1.0

Ctrl K

开发预览更新于 2026-05-10

组件总览

ChuFix UI 当前提供的所有组件清单与状态。

总览

P0–P11 + 8 模版 + 22 数据可视化全部具象化，总计 151 + 组件，覆盖了 ProtoForge 设计稿里所有的视觉单元 — 表单 / 反馈 / 容器 / 导航 / 数据展示 / 编辑器 / 系统壳 / 多窗口 / 图表 / 模版。

表单

169 个内置 SVG 图标，类型化 name，React / Vue 组件直接内联渲染。

5 种 variant、3 种尺寸、2 种语义色、loading 态。

3 种 variant、3 种尺寸，可清空、prefix/suffix、错误态。

原生 input role=switch 语义保留，支持 loading 与禁用态。

3 种尺寸、indeterminate 半选状态，原生 input 语义保留。

Radio + RadioGroup 组合，单选互斥，键盘可达。

与 Input 同色系，autoResize、字符计数、resize 控制。

options 配置式 API，clearable、键盘导航、disabled item。

预设 search 图标 + 清空按钮 + 可选快捷键提示。

+/− 步进、min/max/step 约束、键盘上下、自动 clamp。

单值范围拖拽，刻度、气泡、键盘 ←→↑↓ 全支持。

把多个 Input/Button/Select/静态标签拼到一起，共用一组外圆角和边框。

固定格子数字输入，自动跳格、Backspace 退格、整段粘贴自动分配。

表单封装层，统一 label / 提示 / 错误显示，把现有 input 接进来。

Select 的可输入变体，键入即过滤选项，可选择允许新增条目。

多标签输入控件，回车追加、退格删除、粘贴批量导入、可校验。

拖拽 + 点击双触发，内置文件列表、进度条与 reject 回调。

编辑 HTTP headers / query params / 环境变量等键值对，可启用开关与说明列。

在 textarea 中输入 @ 触发候选下拉，键盘 ↑↓ Enter / Tab 选择。

HSV 调色板 + 色相 / 透明度滑块 + HEX / RGB / HSL 输入 + 预设色块。

月历面板，日 / 月 / 年三视图切换，min/max/disabledDate 约束，可清除。

双月并列展示，hover 预览，近 7 / 30 / 90 天快捷预设。

嵌入式月视图，可显示周序号，与 DatePicker 共享日期工具。

多级选项的逐列展开选择器，路径式选取，常用于地区 / 部门 / 分类。

触发器 + 时分秒三列滚动面板，支持 HH:mm 与 HH:mm:ss 两种精度。

两栏列表 + 中间箭头，把元素在「可选 / 已选」之间移动，支持搜索。

两个 TimePicker 组合，选择「开始 – 结束」时间区间。

容器

3 种 variant、Header / Body / Footer 三段式、可交互整卡。

标题 + 描述 + 面包屑 + 操作区 + 工具栏 + 标签页一体的页头容器。

header + sidebar + main + aside + footer 的 CSS Grid 布局，整站脚手架。

拖拽中间分隔条调整两侧面板尺寸，横竖两向、键盘可达。

数据展示

3 种 variant、5 种 tone、3 种尺寸、可关闭与圆角。

独立 pill 或贴在子元素角落，dot/count 两种形态，超出溢出 +。

图片 / 缩写 / 图标三态自动 fallback，AvatarGroup 重叠排版。

通用列表，单选 / 多选、分组、卡片化、自定义渲染。

dt / dd 风格键值展示，横竖布局、多列、可描边。

数字 + 标签 + 趋势的指标卡片，dashboard 必备。

列定义式 API、列排序、行选择、3 种 variant、自定义渲染。

重型表格 — 列拖拽调宽、单元格双击编辑、固定表头滚动。

嵌套树形展示，单选 / 复选框（带级联）、展开 / 折叠、自定义图标。

显示快捷键的微小排印控件，支持组合键 + 自定义分隔符。

4 种 variant、自动识别外部链接、可禁用、设计稿一致的样式。

InlineCode + CodeBlock，支持标题、语言标签、行号、复制按钮。

锁定子元素宽高比的容器，图片 / 视频 / 嵌入帧占位。

星级评分，整数 / 半星精度、可只读 / 禁用、可显示数值。

文章侧边目录，按 depth 缩进，可手动指定或自动跟随阅读位置。

主题化滚动条容器，gutter stable + overscroll contain。

折叠式 JSON 树视图，按值类型上色，支持深度展开与类型徽标。

对两个 JSON 值做行级 LCS diff，按 add / del / eq 三态着色。

多列卡片看板，HTML5 拖拽在列间移动卡片，支持 WIP 限额与列强调色。

带 shimmer 加载占位、错误回退与原生懒加载的图片容器。

横向轮播图片或自定义内容，自动播放、循环、指示点、左右控制。

大字号数字 + 千分位 / 前后缀 / 倒计时，dashboard 顶部指标。

顺序事件流，每条带圆点 / 连线 / 时间戳，变更日志与流水审计。

横向匀速滚动，公告条 / 滚动消息 / logo 墙，悬停可暂停。

全屏图片查看器，滚轮缩放 + 鼠标拖拽 + 键盘 +/− / 0 / Esc 控制。

在长文本中高亮匹配关键字，搜索结果列表 / 命中标记必备。

多行文本溢出省略 + 可选「展开/收起」，仅在确实溢出时才显示按钮。

独立倒计时，支持 DD/HH/mm/ss/SSS 占位，归零回调。

52 周 × 7 天网格，按数值强度着色，活跃度 / 提交统计。

纯客户端零依赖编码，自动选版本 1–40，4 档纠错等级。

零依赖矢量地图底座，支持 marker、区域覆盖物、路线与点击事件。

导航

line / segmented / pill 三种 variant、受控与非受控、items 数组式 API。

链路当前位置，最后一项不可点，分隔符可自定义。

数字按钮 + 上下页 + 跳转输入，自动算省略号。

items 数组式 API，键盘 ↑↓ Enter Esc 全支持，可分组与危险操作。

多步流程进度，3 种 variant、横竖两向、可点击切换。

竖直主导航，分组、嵌套子菜单、徽标、可收起为图标模式。

顶部水平导航栏，每项可挂富面板（多列链接 + 描述）。

Tabs segmented variant 的语义化别名，视图 / 时段切换专用。

显式锚点列表，滚动时高亮当前小节，点击平滑跳转。

布局与状态

横/竖分割线，3 种线型，可带标签和位置控制。

列表/表格/搜索结果为空时占位，可带图标和操作按钮。

线性 / 圆形进度条，5 种语义色，支持不确定状态。

旋转环加载图标，3 档尺寸 × 6 种 tone，可选文字标签。

单/多展开模式，3 种边框样式（bordered / flush / separated）。

滚动超过阈值后浮现的固定按钮，点击平滑回到容器顶部。

滚动经过元素时切换为固定定位，工具条 / 锚点 / 提交栏吸顶。

在内容容器上叠加倾斜重复的文字水印，追溯泄漏来源。

固定在视口角落的圆形按钮，可挂 tooltip 与 badge。

滚到底部时自动触发加载下一页，基于 IntersectionObserver。

分步高亮关键 UI 元素 + 解释气泡，新功能上线时引导用户。

反馈与覆盖层

内置 portal、focus trap、滚动锁、ESC/遮罩关闭、进出动画。

4 种 placement、自动避让边缘、hover 与 focus 双触发，不阻塞鼠标。

imperative API + 一次挂载的 Toaster，5 种语义、6 个位置、自动关闭。

4 种 tone × 3 种 variant，inline 静态消息，可带标题、图标、关闭按钮。

text / circle / rect 三种形状，shimmer 动画，多行文本占位辅助。

Modal 的边缘变体，上下左右滑入；共用 portal / focus trap / 滚动锁。

Tooltip 的可交互变体，内部支持任意富内容、表单、按钮。

顶部全宽通告条，6 种 tone × 2 种 variant、可关闭、可吸顶。

操作完成 / 失败 / 异常状态的整页反馈，支持 404 / 403 / 500 占位。

编辑器

轻量代码编辑容器：textarea + 行号 + Tab 缩进。重型语法/补全请接 Monaco/CodeMirror。

行级 LCS diff，支持 split / unified 双模式，行号 + +/- 标识。

内置最小 markdown 渲染器，支持 split / edit / preview 三种模式。

实时编译 + 测试匹配，错误友好提示，flags 用 chip 切换。

解析 ANSI 转义序列渲染为彩色 span，纯展示，不依赖 xterm.js。

系统壳层

桌面应用窗口顶栏。macOS 风格 traffic light + 居中标题；Windows / Linux 风格 min/max/close 按钮 + 左对齐。

编辑器底栏。三段（左 / 中 / 右）槽位，6 种语义色调。

应用顶部菜单栏（File / Edit / View 风格），支持快捷键、分隔符、危险项。

通知历史面板，自带未读计数、全部已读、清空控件。

全屏覆盖式应用级搜索，支持分类切换 + 分组列表 + path / badge / shortcut。

多窗口布局

递归 split + tabbed pane 的桌面应用布局壳。v1 声明式，v2 加入拖拽重排。

可拖拽的浮动面板，Teleport 到 body。配合 TearOffTab / DockLayout 的 detach 动作使用。

角落锚定的可折叠检查器面板，常用于性能监视、调试信息浮窗。

Tab 拖拽超过阈值时触发 tear-off 事件；消费方决定是 spawn DetachedPanel 还是新窗口。

数据可视化

行内微缩走势线，常用于 KPI 卡的趋势线。

多 series 折线图，支持平滑曲线、网格线、x/y 轴标签。

面积图，支持堆叠模式与平滑曲线。

单 series 垂直柱状图。

分箱直方图，每个 bin 一个柱。

横向 100% 堆叠柱，适合占比分布。

单值进度条 + 目标线 + 质量带。

OHLC 蜡烛图，涨绿跌红，wick + body。

中空饼图，可在中心放数值/标签。

逐层收窄的转化漏斗，每层显示绝对值。

层级矩形面积图，slice-and-dice 单层布局。

节点 + 加权边的流向图，节点高度 = 流量。

二维散点，可按 group 分色。

统计分布的 5 数概要 + outliers。

多维度对比的多边形图，支持多 series。

多组密度曲线垂直堆叠。

圆环型当前值仪表，4 种 tone。

数值 + 单位 + 涨跌 + 内嵌 sparkline 趋势。

横向请求阶段瀑布图，每段一个 phase。

二维矩阵热力图，绿→黄→红 OKLCH 色相 lerp。

节点 + 边的关系图，圆周等距默认布局。

可嵌入任何 SVG 图表的十字定位线 + tooltip 工具。

图表头部工具条：标题 + legend 切换 + zoom/export/refresh 按钮。

模版 / 页面模块

SSE / MQTT / Kafka / gRPC 4 个 tab 的协议监视器外壳。

HAR / Hex / PCAP / Cert / Cookie 5 个 tab 的网络抓包面板。

Editor / Console / History 3 个 tab 的 SQL 工作台外壳。

Terminal / Output / CommandLine 3 个 tab 的终端面板外壳。

Crash Dialog / Stack Trace / Dump Uploader / Safe Mode 4 个 tab。

Card / Manifest / Permission / Marketplace 4 个 tab 的插件中心面板。

Collection / Request / Response / Mock / Workflow 5 个 tab 的 API 调试面板。

First-Run Wizard / Hotspot Tour / Full Flow 3 个 tab 的引导流外壳。

反馈与讨论

组件总览的讨论

0

正在加载评论...