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）
2026-10-23 14:58:10 +08:00
parent a186d71412
commit 0de9b6e66e
59 changed files with 5293 additions and 0 deletions
@@ -0,0 +1,133 @@
+import {
+  createTable,
+  filterPlugin,
+  paginationPlugin,
+  selectionPlugin,
+  sortPlugin,
+} from '@ui-arch/table-core';
+import type { PageInfo, RowKey, TableInstance } from '@ui-arch/table-core';
+import { computed, effect, h, renderList, signal } from '@ui-arch/frame';
+import { button } from './button.js';
+import { textField } from './textField.js';
+import type { DataTableProps } from './types.js';
+
+/*** 数据表格：粘性表头 + 行选择 + 排序 + 筛选 + 分页 + 空状态；状态由 table-core 持有，信号只做桥接渲染 ***/
+export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): HTMLElement {
+  // —— 状态集中声明 ——
+  const selectable = props.selectable ?? false; // 行选择开关
+  const table = createTable({
+    data: props.data,
+    columns: props.columns,
+    rowKey: 'id',
+    plugins: [filterPlugin<T>(), sortPlugin<T>(), paginationPlugin<T>(), selectionPlugin<T>()],
+    initialState: { pagination: { page: 1, pageSize: props.pageSize ?? 5 } },
+  });
+  const api = table as unknown as TableInstance<T> & {
+    getPageInfo(): PageInfo;
+    selectAllVisible(): void;
+  };
+  const version = signal(0); // 桥接信号：table-core 订阅通知 → 递增触发信号系统
+  table.subscribe(() => version(version() + 1));
+
+  // —— 派生：全部由 version 单一来源推导，语义与内核一致 ——
+  const visible = computed(() => {
+    version();
+    return table.getVisibleRows();
+  });
+  const state = computed(() => {
+    version();
+    return table.getState();
+  });
+  const info = computed(() => {
+    visible();
+    return api.getPageInfo();
+  });
+  const selectedCount = computed(() => state().selection.length);
+
+  const filterKey = props.filterKey ?? props.columns[0].key;
+  const colspan = props.columns.length + (selectable ? 1 : 0);
+
+  // —— 表头全选框：checked / indeterminate 三态跟随当页选中情况 ——
+  const headCheck = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement;
+  headCheck.addEventListener('change', () => {
+    if (headCheck.checked) api.selectAllVisible();
+    else table.dispatch({ type: 'clearSelection' });
+  });
+  effect(() => {
+    const keys = visible().keys;
+    const sel = state().selection;
+    const onPage = keys.filter((k) => sel.includes(k)).length;
+    headCheck.checked = keys.length > 0 && onPage === keys.length;
+    headCheck.indeterminate = onPage > 0 && onPage < keys.length;
+  });
+
+  /*** 排序标记：升 ↑ / 降 ↓ / 未排序 ↕（可点击提示） ***/
+  const sortMark = (key: string) =>
+    h(
+      'span',
+      { class: 'ua-sort-mark' },
+      () => {
+        const rule = state().sorting.find((r) => r.key === key);
+        return rule ? (rule.dir === 'asc' ? '↑' : '↓') : '↕';
+      },
+    );
+
+  const th = (col: (typeof props.columns)[number]) =>
+    h(
+      'th',
+      {
+        class: () => (col.sortable ? 'ua-sortable' : ''),
+        onClick: () => col.sortable && table.dispatch({ type: 'toggleSort', key: col.key }),
+      },
+      col.header ?? col.key,
+      col.sortable ? sortMark(col.key) : null,
+    );
+
+  const tbody = h('tbody');
+  renderList(tbody, () => {
+    const sel = state().selection; // 读入依赖：选择变化即整表重绘（行数 = pageSize，代价可控）
+    const rows = visible().rows;
+    if (!rows.length) {
+      return [h('tr', { class: 'ua-empty-row' }, h('td', { colspan }, '暂无匹配数据'))];
+    }
+    return rows.map((row, i) => {
+      const key = visible().keys[i];
+      const selected = sel.includes(key);
+      const cells = props.columns.map((col) => h('td', null, String(table.getCellValue(row, col.key))));
+      if (selectable) {
+        const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement;
+        check.checked = selected;
+        check.addEventListener('change', () => table.dispatch({ type: 'toggleSelect', key }));
+        cells.unshift(h('td', { class: 'ua-cell-check' }, check));
+      }
+      return h('tr', selected ? { class: 'ua-row-selected' } : null, ...cells);
+    });
+  });
+
+  const filterInput = textField({
+    placeholder: `筛选 ${filterKey}…`,
+    onInput: (value) => {
+      table.dispatch({ type: 'setFilter', key: filterKey, value });
+      table.dispatch({ type: 'setPage', page: 1 }); // 筛选变化回第 1 页
+    },
+  });
+
+  return h(
+    'section',
+    { class: 'ua-table' },
+    h(
+      'div',
+      { class: 'ua-table-toolbar' },
+      filterInput,
+      selectable ? h('span', { class: 'ua-sel-count' }, () => (selectedCount() ? `已选 ${selectedCount()} 行` : '')) : null,
+    ),
+    h('div', { class: 'ua-table-scroll' }, h('table', null, h('thead', null, h('tr', null, selectable ? headCheck : null, ...props.columns.map(th))), tbody)),
+    h(
+      'div',
+      { class: 'ua-pager' },
+      button({ label: '上一页', variant: 'ghost', onClick: () => table.dispatch({ type: 'setPage', page: info().page - 1 }) }),
+      h('span', { class: 'ua-page-info' }, () => `第 ${info().page} / ${info().totalPages} 页 · 共 ${visible().total} 行`),
+      button({ label: '下一页', variant: 'ghost', onClick: () => table.dispatch({ type: 'setPage', page: info().page + 1 }) }),
+    ),
+  );
+}