iter(g24): 新增 list 列表组件（含空状态回落与可点击条目）

2026-10-26 11:33:27 +08:00
parent 2b65922c7e
commit e6b4a84085
13 changed files with 297 additions and 9 deletions
@@ -0,0 +1,36 @@
+import { h } from '@ui-arch/frame';
+import type { ListProps } from './types.js';
+import { empty } from './empty.js';
+
+/*** 列表：header/footer 外壳 + 逐条 items（avatar / title / description / extra），传 onItemClick 时条目可点击，无数据回落空状态 ***/
+export function list(props: ListProps): HTMLElement {
+  // —— 状态集中声明 ——
+  const clickable = typeof props.onItemClick === 'function'; // 仅提供回调时才加可点击样式
+  const rootClass = props.bordered ? 'ua-list ua-list-bordered' : 'ua-list'; // 外边框由 bordered 决定
+  const root = h('div', { class: rootClass }) as HTMLElement; // 列表根容器
+  if (props.header) root.append(h('div', { class: 'ua-list-header' }, props.header));
+  if (!props.items.length) {
+    root.append(empty({ title: props.emptyText ?? '暂无数据' })); // 空列表复用空状态组件
+    return root;
+  }
+  const body = h('div', { class: 'ua-list-body', role: 'list' }) as HTMLElement; // 条目容器，供读屏识别列表语义
+  props.items.forEach((item, index) => {
+    const row = h(
+      'div',
+      { class: clickable ? 'ua-list-item ua-list-clickable' : 'ua-list-item', role: 'listitem' },
+      item.avatar ? h('div', { class: 'ua-list-avatar' }, item.avatar) : null, // 左侧头像/图标，缺省不留位
+      h(
+        'div',
+        { class: 'ua-list-main' },
+        h('div', { class: 'ua-list-title' }, item.title),
+        item.description ? h('div', { class: 'ua-list-desc' }, item.description) : null,
+      ),
+      item.extra ? h('div', { class: 'ua-list-extra' }, item.extra) : null, // 右侧附加（时间、标签）
+    );
+    if (clickable) row.addEventListener('click', () => props.onItemClick?.(item, index)); // 点击回传条目与下标
+    body.append(row);
+  });
+  root.append(body);
+  if (props.footer) root.append(h('div', { class: 'ua-list-footer' }, props.footer));
+  return root;
+}