HIsheR
74 lines
5.6 KiB
Plaintext
74 lines
5.6 KiB
Plaintext
# @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 / toast / tooltip / skeleton / 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
|
||
- toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本
|
||
- tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起
|
||
- skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画
|
||
- 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，一律来自令牌，禁止硬编码颜色
|