init: @ui-arch 私人组件库 monorepo

- core/table-core: Headless 表格内核(排序/筛选/分页/选择插件 + 冒烟 9 项)
- core/frame: signal/computed/effect + hyperscript 微框架(零依赖)
- skin/ui: 16 个 DOM 组件(含自绘 select、滑动指示条 tabs、行选择 dataTable、form 表单校验)
- design/tokens: --ua-* 设计令牌(light/dark)
- tools/cli: ua 命令行(index/list/info/docs/style/mcp)+ MCP 注册表服务
- apps: demo 演示站(esbuild 单文件)+ docs 双轨文档(人类版 + llms-full.txt)
This commit is contained in:
shawn
2026-10-23 14:58:10 +08:00
committed by HIsheR
parent a186d71412
commit 0de9b6e66e
59 changed files with 5293 additions and 0 deletions
+70
View File
@@ -0,0 +1,70 @@
# @ui-arch 私人组件库索引
> 本文件由 `ua index` 自动生成,请勿手改。机器可读版:`.ua/index.json`。
> Agent 可通过 `ua mcp`(stdio MCP server)直接查询注册表。
## @ui-arch/frame (v0.1.0)
- 类型: headless-core · 目录: packages/core/frame
- 描述: 自研微框架:signal / computed / effect 信号系统 + hyperscript(h)DOM 层。函数值属性与函数型子节点自动响应式;renderList 做列表整体替换;零依赖、无虚拟 DOM。
- API:
- signal(initial) -> Signal<T>:无参读值并收集依赖,传参写值并触发订阅
- effect(fn):立即执行并追踪依赖,信号变化自动重跑
- computed(fn):由信号派生的只读计算值
- h(tag, props, ...children):hyperscript;on* 绑事件,函数值属性/子节点自动响应式
- renderList(el, fn):信号变化时整体替换容器子节点
- mount(target, view):挂载视图
- 用法: `const count = signal(0); mount('#app', () => h('button', { onClick: () => count(count() + 1) }, () => `count = ${count()}`))`
- 约定: 组件 = 返回 DOM 节点的普通函数,不做类组件与生命周期抽象
- 约定: 跨系统状态(如 table-core)用桥接信号:subscribe 里递增 version 信号
## @ui-arch/table-core (v0.1.0)
- 类型: headless-core · 目录: packages/core/table-core
- 描述: Headless table state machine: immutable state, dispatch/reducer, composable derive pipeline (filter -> sort -> paginate) with per-stage memoization. No DOM, no framework dependency.
- API:
- createTable(options) -> TableInstance: create headless table instance
- sortPlugin(options?) -> multi-column sorting plugin (asc -> desc -> off cycle)
- filterPlugin(options?) -> column filter plugin (default substring match, custom predicate supported)
- paginationPlugin() -> client-side pagination with page clamping, exposes setPage/nextPage/prevPage/getPageInfo
- selectionPlugin() -> rowKey-based selection, exposes selectAllVisible
- 用法: `const table = createTable({ data, columns, rowKey: 'id', plugins: [filterPlugin(), sortPlugin(), paginationPlugin()], initialState: { pagination: { page: 1, pageSize: 20 } } }); table.dispatch({ type: 'toggleSort', key: 'name' }); table.getVisibleRows()`
- 约定: selection/expanded must store rowKey, never row index
- 约定: derive pipeline order is fixed: filter -> sort -> paginate
- 约定: actions are the only way to mutate state; state is immutable
## @ui-arch/tokens (v0.1.0)
- 类型: design-tokens · 目录: packages/design/tokens
- 描述: Single source of design tokens. Skin packages consume CSS variables only - hardcoded colors inside skins are forbidden. Dark theme overrides values under [data-theme='dark'], never names.
- API:
- tokens.css: import '@ui-arch/tokens/tokens.css' once at app root
- tokens.json: programmatic access for tools and agents
- 用法: `import '@ui-arch/tokens/tokens.css'; then use var(--ua-color-accent) etc. in any skin package`
## @ui-arch/ui (v0.1.0)
- 类型: skin-dom · 目录: packages/skin/ui
- 描述: DOM 皮肤组件库:button / textField / textarea / checkbox / switch / select / radioGroup / card / badge / alert / spinner / progress / tabs / modal / form / formItem / dataTable,构建在 @ui-arch/frame 与 @ui-arch/table-core 之上,样式只消费 --ua-* 令牌。
- API:
- button(props):按钮,variant = primary | ghost | danger
- textField(props):文本输入,value 信号双向绑定
- textarea(props):多行输入,value 信号双向绑定
- checkbox(props):复选框,checked 信号双向绑定
- switchButton(props):开关,checked 信号双向绑定
- select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画
- radioGroup(props):单选组,options + value 信号双向绑定
- card(props, ...children):卡片容器
- badge(props):徽标,variant = default | success | warning | danger
- alert(props):提示条,variant = info | success | warning | danger
- spinner(props):加载指示器,size 控制直径
- progress(props):进度条,轨道 + 渐变流动填充,value 信号驱动 0-100,满格切 success 色
- tabs(props):标签页,active 信号双向绑定,滑动指示条 + 方向键环形导航,支持禁用页签
- modal(props, ...children):弹窗,open 信号驱动显隐,Esc / 遮罩 / × 关闭
- form(props, items):表单容器,布局 + 聚合校验,全部通过才触发 onSubmit
- formItem(props, control):表单字段,label + 必填红星 + 规则校验 + 错误区,返回 { el, validate } 句柄
- dataTable(props):数据表格,粘性表头 / 行选择(全选三态)/ 排序 / 筛选 / 分页 / 空状态,内核为 table-core
- 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')`
- 约定: 皮肤不持有业务状态,一律委托 headless 内核或调用方信号
- 约定: 表单类组件统一约定:*Props.value/checked/active 为 Signal 双向绑定,onChange/onInput 为回调
- 约定: 语义色 variant 四档:default|info / success / warning / danger,一律来自令牌,禁止硬编码颜色