@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/container/details.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Themed details disclosure with expand/collapse toggle.
+ * 带展开/收起切换的主题化详情折叠组件。
+ *
+ * @slot - Default slot for the disclosure body content. 折叠正文内容的默认插槽。
+ *
+ * @fires aithe-toggle - Emitted when the disclosure is toggled with `{ open }`. 折叠切换时发出 `{ open }`。
+ *
+ * @example
+ * ```html
+ * <aithe-details open summary="More info">Hidden content here.</aithe-details>
+ * ```
+ */
+let AitheDetails = class AitheDetails extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the disclosure is initially open. 折叠是否初始展开。 */
+        this.open = false;
+        /** Summary text shown as the toggle label. 作为切换标签显示的摘要文本。 */
+        this.summary = '';
+        /** Icon name to display before the summary text. 在摘要文本前显示的图标名称。 */
+        this.icon = '';
+        /** Display title for the details (shown as tooltip). 详情折叠的显示标题（作为工具提示）。 */
+        this.title = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      details {
+        padding: var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .summary-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      summary {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        cursor: pointer;
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .body {
+        margin-top: var(--aithe-space-4);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    updated(changed) {
+        if (changed.has('open') && this.detailsElement) {
+            this.detailsElement.open = this.open;
+        }
+    }
+    render() {
+        return html `
+      <details
+        ?open=${this.open}
+        title=${this.title}
+        @toggle=${() => {
+            this.open = Boolean(this.detailsElement?.open);
+            this.emit('aithe-toggle', { open: this.open });
+        }}
+      >
+        <summary>
+          ${this.icon
+            ? html `
+                <aithe-icon class="summary-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+            : nothing}${this.summary || t('container.details.defaultSummary')}
+        </summary>
+        <div class="body">
+          <slot></slot>
+        </div>
+      </details>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDetails.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], AitheDetails.prototype, "summary", void 0);
+__decorate([
+    property({ type: String })
+], AitheDetails.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheDetails.prototype, "title", void 0);
+__decorate([
+    query('details')
+], AitheDetails.prototype, "detailsElement", void 0);
+AitheDetails = __decorate([
+    customElement('aithe-details')
+], AitheDetails);
+export { AitheDetails };

package/dist/components/container/scroller.d.ts

@@ -1,16 +1,32 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Themed scroll container.
+ * Themed scroll container with optional shadow edges and scrollbar control.
+ * 主题化滚动容器，支持可选阴影边缘和滚动条控制。
+ *
+ * @slot - Default slot for scrollable content. 可滚动内容的默认插槽。
+ *
+ * @fires aithe-scroll - Emitted on scroll with `{ top, left }`. 滚动时发出 `{ top, left }`。
+ *
+ * @example
+ * ```html
+ * <aithe-scroller height="300px" shadow scrollbar>
+ *   <p>Long content here...</p>
+ * </aithe-scroller>
+ * ```
  */
 export declare class AitheScroller extends AitheElement {
+    /** Fixed height of the scroll area (CSS value). 滚动区域的固定高度（CSS 值）。 */
     height: string;
+    /** Maximum height of the scroll area (CSS value). 滚动区域的最大高度（CSS 值）。 */
     maxHeight: string;
+    /** Whether to show gradient shadows at scroll edges. 是否在滚动边缘显示渐变阴影。 */
     shadow: boolean;
+    /** Whether to show the native scrollbar. 是否显示原生滚动条。 */
     scrollbar: boolean;
     private shadowTop;
     private shadowBottom;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    private handleScroll;
+    private readonly handleScroll;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=scroller.d.ts.map

package/dist/components/container/scroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroller.d.ts","sourceRoot":"","sources":["../../../src/components/container/scroller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,aAAc,SAAQ,YAAY;IACjB,MAAM,SAAM;IACa,SAAS,SAAM;IACvC,MAAM,UAAS;IACf,SAAS,UAAQ;IAErC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiDpB;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,MAAM;CAoBP"}
+{"version":3,"file":"scroller.d.ts","sourceRoot":"","sources":["../../../src/components/container/scroller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;GAcG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,qEAAqE;IACzC,MAAM,SAAM;IACxC,uEAAuE;IAClB,SAAS,SAAM;IACpE,uEAAuE;IAC1C,MAAM,UAAS;IAC5C,uDAAuD;IAC1B,SAAS,UAAQ;IAErC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiDpB;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAQ3B;IAEF,MAAM;CAuBP"}

package/dist/components/container/scroller.js

@@ -0,0 +1,144 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aitheScrollbarStyles } from '../../core/styles';
+/**
+ * Themed scroll container with optional shadow edges and scrollbar control.
+ * 主题化滚动容器，支持可选阴影边缘和滚动条控制。
+ *
+ * @slot - Default slot for scrollable content. 可滚动内容的默认插槽。
+ *
+ * @fires aithe-scroll - Emitted on scroll with `{ top, left }`. 滚动时发出 `{ top, left }`。
+ *
+ * @example
+ * ```html
+ * <aithe-scroller height="300px" shadow scrollbar>
+ *   <p>Long content here...</p>
+ * </aithe-scroller>
+ * ```
+ */
+let AitheScroller = class AitheScroller extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Fixed height of the scroll area (CSS value). 滚动区域的固定高度（CSS 值）。 */
+        this.height = '';
+        /** Maximum height of the scroll area (CSS value). 滚动区域的最大高度（CSS 值）。 */
+        this.maxHeight = '';
+        /** Whether to show gradient shadows at scroll edges. 是否在滚动边缘显示渐变阴影。 */
+        this.shadow = false;
+        /** Whether to show the native scrollbar. 是否显示原生滚动条。 */
+        this.scrollbar = true;
+        this.shadowTop = false;
+        this.shadowBottom = false;
+        this.handleScroll = (event) => {
+            const element = event.currentTarget;
+            this.shadowTop = element.scrollTop > 0;
+            this.shadowBottom = element.scrollTop + element.clientHeight < element.scrollHeight;
+            this.emit('aithe-scroll', {
+                top: element.scrollTop,
+                left: element.scrollLeft,
+            });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .wrap {
+        position: relative;
+        overflow: auto;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .wrap.no-scrollbar {
+        scrollbar-width: none;
+      }
+
+      .wrap.no-scrollbar::-webkit-scrollbar {
+        display: none;
+      }
+
+      .wrap::before,
+      .wrap::after {
+        content: '';
+        position: sticky;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 16px;
+        pointer-events: none;
+      }
+
+      .wrap.shadow-top::before {
+        top: 0;
+        background: linear-gradient(180deg, rgba(11, 17, 29, 0.14), transparent);
+      }
+
+      .wrap.shadow-bottom::after {
+        bottom: 0;
+        background: linear-gradient(0deg, rgba(11, 17, 29, 0.14), transparent);
+      }
+
+      .inner {
+        padding: var(--aithe-space-4);
+      }
+    `,
+    ]; }
+    render() {
+        const style = [
+            this.height ? `height:${this.height};` : '',
+            this.maxHeight ? `max-height:${this.maxHeight};` : '',
+        ].join('');
+        return html `
+      <div
+        class=${classMap({
+            wrap: true,
+            'no-scrollbar': !this.scrollbar,
+            'shadow-top': this.shadow && this.shadowTop,
+            'shadow-bottom': this.shadow && this.shadowBottom,
+        })}
+        style=${style}
+        @scroll=${this.handleScroll}
+      >
+        <div class="inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheScroller.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-height' })
+], AitheScroller.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheScroller.prototype, "shadow", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheScroller.prototype, "scrollbar", void 0);
+__decorate([
+    state()
+], AitheScroller.prototype, "shadowTop", void 0);
+__decorate([
+    state()
+], AitheScroller.prototype, "shadowBottom", void 0);
+AitheScroller = __decorate([
+    customElement('aithe-scroller')
+], AitheScroller);
+export { AitheScroller };

package/dist/components/container/split-panel.d.ts

@@ -1,20 +1,38 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Resizable two-panel layout.
+ * Resizable two-panel layout with a draggable divider.
+ * 可调整大小的双面板布局，带可拖动分隔条。
+ *
+ * @slot start - Content for the first (start) pane. 第一个（起始）面板的内容。
+ * @slot end   - Content for the second (end) pane. 第二个（末尾）面板的内容。
+ *
+ * @fires aithe-resize - Emitted when the divider is dragged with `{ value }`. 分隔条被拖动时发出 `{ value }`。
+ *
+ * @example
+ * ```html
+ * <aithe-split-panel direction="horizontal" value="40" min-size="20" max-size="80">
+ *   <div slot="start">Left pane</div>
+ *   <div slot="end">Right pane</div>
+ * </aithe-split-panel>
+ * ```
  */
 export declare class AitheSplitPanel extends AitheElement {
+    /** Layout direction of the split. 分割布局的方向。 */
     direction: 'horizontal' | 'vertical';
+    /** Minimum size of the start pane as a percentage. 起始面板的最小百分比尺寸。 */
     minSize: number;
+    /** Maximum size of the start pane as a percentage. 起始面板的最大百分比尺寸。 */
     maxSize: number;
+    /** Current split position as a percentage (0–100). 当前分割位置百分比（0–100）。 */
     value: number;
     private dragging;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
-    private handlePointerDown;
-    private handlePointerMove;
-    private handlePointerUp;
+    private readonly handlePointerDown;
+    private readonly handlePointerMove;
+    private readonly handlePointerUp;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=split-panel.d.ts.map

package/dist/components/container/split-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../src/components/container/split-panel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,eAAgB,SAAQ,YAAY;IACnB,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAC7B,OAAO,SAAM;IACb,OAAO,SAAM;IACpC,KAAK,SAAM;IAE9B,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4CpB;IAEF,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,MAAM;CAcP"}
+{"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../src/components/container/split-panel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,8CAA8C;IAClB,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAChF,oEAAoE;IACjB,OAAO,SAAM;IAChE,oEAAoE;IACjB,OAAO,SAAM;IAChE,wEAAwE;IAC5C,KAAK,SAAM;IAE9B,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4CpB;IAEF,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAEhC;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAahC;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAE9B;IAEF,MAAM;CAcP"}

package/dist/components/container/split-panel.js

@@ -0,0 +1,150 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Resizable two-panel layout with a draggable divider.
+ * 可调整大小的双面板布局，带可拖动分隔条。
+ *
+ * @slot start - Content for the first (start) pane. 第一个（起始）面板的内容。
+ * @slot end   - Content for the second (end) pane. 第二个（末尾）面板的内容。
+ *
+ * @fires aithe-resize - Emitted when the divider is dragged with `{ value }`. 分隔条被拖动时发出 `{ value }`。
+ *
+ * @example
+ * ```html
+ * <aithe-split-panel direction="horizontal" value="40" min-size="20" max-size="80">
+ *   <div slot="start">Left pane</div>
+ *   <div slot="end">Right pane</div>
+ * </aithe-split-panel>
+ * ```
+ */
+let AitheSplitPanel = class AitheSplitPanel extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Layout direction of the split. 分割布局的方向。 */
+        this.direction = 'horizontal';
+        /** Minimum size of the start pane as a percentage. 起始面板的最小百分比尺寸。 */
+        this.minSize = 20;
+        /** Maximum size of the start pane as a percentage. 起始面板的最大百分比尺寸。 */
+        this.maxSize = 80;
+        /** Current split position as a percentage (0–100). 当前分割位置百分比（0–100）。 */
+        this.value = 50;
+        this.dragging = false;
+        this.handlePointerDown = () => {
+            this.dragging = true;
+        };
+        this.handlePointerMove = (event) => {
+            if (!this.dragging) {
+                return;
+            }
+            const rect = this.getBoundingClientRect();
+            const raw = this.direction === 'horizontal'
+                ? ((event.clientX - rect.left) / rect.width) * 100
+                : ((event.clientY - rect.top) / rect.height) * 100;
+            this.value = Math.max(this.minSize, Math.min(this.maxSize, raw));
+            this.emit('aithe-resize', { value: this.value });
+        };
+        this.handlePointerUp = () => {
+            this.dragging = false;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .split {
+        display: grid;
+        width: 100%;
+        min-height: 280px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-xl);
+        overflow: hidden;
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .split.horizontal {
+        grid-template-columns: minmax(0, var(--aithe-split-start, 50%)) 12px minmax(0, 1fr);
+      }
+
+      .split.vertical {
+        grid-template-rows: minmax(0, var(--aithe-split-start, 50%)) 12px minmax(0, 1fr);
+      }
+
+      .pane {
+        min-width: 0;
+        min-height: 0;
+        padding: var(--aithe-space-4);
+      }
+
+      .handle {
+        background: var(--aithe-color-surface-muted);
+        cursor: col-resize;
+      }
+
+      .vertical .handle {
+        cursor: row-resize;
+      }
+
+      .handle.dragging {
+        background: var(--aithe-primary-5);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('pointermove', this.handlePointerMove);
+        document.addEventListener('pointerup', this.handlePointerUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointermove', this.handlePointerMove);
+        document.removeEventListener('pointerup', this.handlePointerUp);
+    }
+    updated() {
+        this.style.setProperty('--aithe-split-start', `${this.value}%`);
+    }
+    render() {
+        return html `
+      <div class=${classMap({ split: true, [this.direction]: true })}>
+        <div class="pane"><slot name="start"></slot></div>
+        <div
+          class=${classMap({ handle: true, dragging: this.dragging })}
+          role="separator"
+          aria-orientation=${this.direction === 'horizontal' ? 'vertical' : 'horizontal'}
+          @pointerdown=${this.handlePointerDown}
+        ></div>
+        <div class="pane"><slot name="end"></slot></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSplitPanel.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-size' })
+], AitheSplitPanel.prototype, "minSize", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-size' })
+], AitheSplitPanel.prototype, "maxSize", void 0);
+__decorate([
+    property({ type: Number })
+], AitheSplitPanel.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheSplitPanel.prototype, "dragging", void 0);
+AitheSplitPanel = __decorate([
+    customElement('aithe-split-panel')
+], AitheSplitPanel);
+export { AitheSplitPanel };

package/dist/components/data/AGENTS.md

@@ -0,0 +1,34 @@
+# src/components/data/ — 数据展示组件（12个）
+
+## 组件列表
+
+| 组件               | 标签                    | 说明                     |
+| ------------------ | ----------------------- | ------------------------ |
+| `table.ts`         | `<aithe-table>`         | 数据表格，支持排序和选择 |
+| `table-column.ts`  | `<aithe-table-column>`  | 表格列定义               |
+| `tabs.ts`          | `<aithe-tabs>`          | 标签页导航容器           |
+| `tab-pane.ts`      | `<aithe-tab-pane>`      | 单个标签页内容面板       |
+| `tree.ts`          | `<aithe-tree>`          | 树形控件                 |
+| `tree-menu.ts`     | `<aithe-tree-menu>`     | 树形导航菜单             |
+| `timeline.ts`      | `<aithe-timeline>`      | 时间线容器               |
+| `timeline-item.ts` | `<aithe-timeline-item>` | 单个时间线节点           |
+| `pagination.ts`    | `<aithe-pagination>`    | 分页导航                 |
+| `dropdown.ts`      | `<aithe-dropdown>`      | 下拉菜单浮层             |
+| `metrics.ts`       | `<aithe-metrics>`       | 业务指标展示             |
+| `metrics-group.ts` | `<aithe-metrics-group>` | 业务指标组容器           |
+
+## 编码规范
+
+- 继承 `AitheElement`，使用 `@customElement` 装饰器
+- 数据组件通常通过 `data` 属性接收数据，支持响应式更新
+- 导入使用 `@components/data/xxx` 路径别名
+- 中英文双语 JSDoc 注释
+
+## 关键约定
+
+- `aithe-table` + `aithe-table-column` 配合使用，通过列模板定义渲染
+- `aithe-tabs` + `aithe-tab-pane` 配合使用，通过 `active-key` 控制当前标签
+- `aithe-tree` 通过 `data` 属性传入树形数据结构
+- `aithe-timeline` 支持数据驱动模式（通过 `items` 属性）和插槽模式
+- `aithe-dropdown` 依赖 `anchored-overlay` 实现浮层定位，内部使用 `aithe-tree-menu` 渲染菜单，开关状态变更事件名为 `aithe-dropdown-change`
+- 新增组件需同步更新 `src/index.ts` 和 `docs/api/data/`

package/dist/components/data/box-table.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @file AitheBoxTable — table/box dual-mode data display / AitheBoxTable — 表格/盒子双模式数据展示
+ * @description AitheBoxTable extends AitheTable with a `mode` property.
+ *              When `mode="table"`, it behaves like a standard table.
+ *              When `mode="box"`, it renders records as a grid of boxes using `aithe-brief-box`.
+ *              Column definitions with a `box` property map data to the corresponding slot.
+ *              AitheBoxTable 扩展 AitheTable，增加 `mode` 属性。
+ *              当 `mode="table"` 时，行为与标准表格一致。
+ *              当 `mode="box"` 时，使用 `aithe-brief-box` 将记录渲染为盒子网格。
+ *              带有 `box` 属性的列定义将数据映射到对应的 slot。
+ *
+ * @fires aithe-sort-change - Emitted when a sortable column header is clicked with `{ sortKey, sortOrder }`. 可排序列头被点击时发出 `{ sortKey, sortOrder }`。
+ * @fires aithe-selection-change - Emitted when row selection changes with `{ selectionSet }`. 行选择变更时发出 `{ selectionSet }`。
+ * @fires aithe-row-click - Emitted when a box is clicked with `{ record, rowIndex }`. 点击 box 时发出 `{ record, rowIndex }`。
+ *
+ * @example Data-driven mode with box view / 数据驱动模式 + 盒子视图
+ * ```html
+ * <aithe-box-table
+ *   mode="box"
+ *   columns-json='[{"id":"name","title":"Name","box":"name"},{"id":"status","title":"Status","box":"status"},{"id":"owner","title":"Owner","box":"tags"}]'
+ *   data-json='[{"name":"Alice","status":"Active","owner":"Team A"},{"name":"Bob","status":"Inactive","owner":"Team B"}]'
+ *   box-cols="3"
+ * ></aithe-box-table>
+ * ```
+ */
+import { type TemplateResult } from 'lit';
+import { AitheTable } from './table';
+import '../display/brief-box';
+export declare class AitheBoxTable extends AitheTable {
+    /**
+     * Display mode: "table" for standard table view, "box" for box grid view.
+     * 显示模式："table" 为标准表格视图，"box" 为盒子网格视图。
+     */
+    mode: 'table' | 'box';
+    /**
+     * Number of box columns in box mode (1–12). 盒子模式下每行显示的盒子数（1–12）。
+     */
+    boxCols: number;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private get boxColumns();
+    private getBoxRecordKey;
+    private handleBoxClick;
+    private renderBoxValue;
+    private renderBoxCard;
+    render(): TemplateResult<1>;
+    private handleBriefBoxSelect;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-box-table': AitheBoxTable;
+    }
+}
+//# sourceMappingURL=box-table.d.ts.map

package/dist/components/data/box-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-table.d.ts","sourceRoot":"","sources":["../../../src/components/data/box-table.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,OAAO,+BAA+B,CAAC;AAIvC,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;OAGG;IACyB,IAAI,EAAE,OAAO,GAAG,KAAK,CAAW;IAE5D;;OAEG;IACgD,OAAO,SAAK;IAE/D,gBAAyB,MAAM,0DAiC7B;IAEF,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,aAAa;IA0CZ,MAAM;IAoDf,OAAO,CAAC,oBAAoB;CAmB7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}