@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/form/upload.js

@@ -0,0 +1,138 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Local file picker with upload-like progress events.
+ * 本地文件选择器，支持类上传进度事件。
+ *
+ * @slot - Default slot for the upload trigger button label. 上传触发按钮标签内容。
+ * @fires aithe-change - Emitted when files are selected, with `{ files }`. 文件选择时触发。
+ * @fires aithe-progress - Emitted with upload progress, with `{ percent, files }`. 上传进度时触发。
+ * @fires aithe-success - Emitted when upload completes, with `{ files, url }`. 上传完成时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-upload url="/api/upload" accept=".png,.jpg" multiple limit="3">
+ *   Choose files
+ * </aithe-upload>
+ * ```
+ */
+let AitheUpload = class AitheUpload extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Upload target URL. 上传目标 URL。 */
+        this.url = '';
+        /** Whether multiple files can be selected. 是否允许选择多个文件。 */
+        this.multiple = false;
+        /** Accepted file types (MIME or extension). 接受的文件类型（MIME 或扩展名）。 */
+        this.accept = '';
+        /** Maximum number of files allowed (0 = unlimited). 允许的最大文件数（0 = 不限）。 */
+        this.limit = 0;
+        /** Whether the upload is disabled. 是否禁用上传。 */
+        this.disabled = false;
+        this.files = [];
+        this.handleFiles = (event) => {
+            const fileList = event.currentTarget.files;
+            const next = fileList ? Array.from(fileList) : [];
+            this.files = this.limit > 0 ? next.slice(0, this.limit) : next;
+            this.emit('aithe-change', { files: this.files });
+            this.emit('aithe-progress', { percent: 100, files: this.files });
+            this.emit('aithe-success', { files: this.files, url: this.url });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-3);
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: var(--aithe-control-height-md);
+        padding: 0 var(--aithe-space-4);
+        border: 1px dashed var(--aithe-color-border-strong);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      .list {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .file {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <label class="trigger">
+        <input
+          hidden
+          type="file"
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this.handleFiles}
+        />
+        <slot>${t('form.upload.chooseFiles')}</slot>
+      </label>
+      ${this.files.length
+            ? html `
+            <div class="list">
+              ${this.files.map((file) => html `
+                  <div class="file">
+                    <span>${file.name}</span>
+                    <span>${Math.ceil(file.size / 1024)} ${t('form.upload.kb')}</span>
+                  </div>
+                `)}
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheUpload.prototype, "url", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheUpload.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], AitheUpload.prototype, "accept", void 0);
+__decorate([
+    property({ type: Number })
+], AitheUpload.prototype, "limit", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheUpload.prototype, "disabled", void 0);
+__decorate([
+    state()
+], AitheUpload.prototype, "files", void 0);
+AitheUpload = __decorate([
+    customElement('aithe-upload')
+], AitheUpload);
+export { AitheUpload };

package/dist/components/framework/AGENTS.md

@@ -0,0 +1,27 @@
+# src/components/framework/ — 框架组件（7个）
+
+## 组件列表
+
+| 组件                 | 标签                      | 说明                                       |
+| -------------------- | ------------------------- | ------------------------------------------ |
+| `header.ts`          | `<aithe-header>`          | 页头，含品牌、国际化/主题切换和插槽        |
+| `body.ts`            | `<aithe-body>`            | 页体，支持布局密度控制和浮动操作栏         |
+| `sidebar.ts`         | `<aithe-sidebar>`         | 侧边栏，含品牌、菜单树和操作按钮，支持伸缩 |
+| `page.ts`            | `<aithe-page>`            | 路由容器，渲染匹配到的页面组件             |
+| `log-panel.ts`       | `<aithe-log-panel>`       | 日志面板，支持级别过滤、搜索和远程上报     |
+| `dashboard.ts`       | `<aithe-dashboard>`       | 仪表盘容器，网格化面板布局                 |
+| `dashboard-panel.ts` | `<aithe-dashboard-panel>` | 仪表盘面板，含标题、内容和操作区           |
+
+## 编码规范
+
+- 继承 `AitheElement`，使用 `@customElement` 装饰器
+- 这些组件通常与 `src/core/router/` 配合使用
+- 导入使用 `@components/framework/xxx` 路径别名
+- 中英文双语 JSDoc 注释
+
+## 关键约定
+
+- `aithe-header` + `aithe-sidebar` + `aithe-body` + `aithe-page` 构成完整页面框架
+- 布局密度通过 `layout` 属性控制（`loose` / `medium` / `compact`）
+- `aithe-page` 配合路由系统使用，通过 `route` 属性匹配页面组件
+- 新增组件需同步更新 `src/index.ts` 和 `docs/api/framework/`

package/dist/components/framework/body.d.ts

@@ -0,0 +1,62 @@
+import { AitheElement } from '../../core/aithe-element';
+import type { AitheLayoutName } from '../../types';
+/**
+ * Framework-level page body that sits below `aithe-header`.
+ * 框架级页面主体区域，位于 `aithe-header` 下方。
+ *
+ * Provides layout density control (compact / medium / wide) that scales the content width,
+ * automatic scrolling, and a fixed floating action bar in the bottom-right corner.
+ * 提供布局密度控制（紧凑/适中/宽松）来缩放内容宽度，自动滚动，以及右下角固定的浮动操作栏。
+ *
+ * @slot - Default slot for page content. 默认插槽，用于页面内容。
+ * @slot actions - Extra action buttons in the floating bar (before built-in buttons). 浮动栏中的额外操作按钮（在内置按钮之前）。
+ *
+ * @fires aithe-layout-change - Emitted when layout density changes. 布局密度变更时发出，detail 包含 `{ layout: string }`。
+ *   Call `preventDefault()` to suppress the built-in layout switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ *
+ * @example
+ * ```html
+ * <aithe-header brand="App" show-locale-switch show-theme-switch></aithe-header>
+ * <aithe-body show-actions>
+ *   <main>Your content here</main>
+ * </aithe-body>
+ * ```
+ */
+export declare class AitheBody extends AitheElement {
+    /** Current layout density. 布局密度。 */
+    layout: AitheLayoutName;
+    /** Whether to show the floating action bar. 是否显示浮动操作栏。 */
+    showActions: boolean;
+    /** Whether to show the "back to top" button in the action bar. 是否在操作栏中显示"回到顶部"按钮。 */
+    showBackTop: boolean;
+    /** Whether to show the "switch layout" button in the action bar. 是否在操作栏中显示"切换布局"按钮。 */
+    showLayoutSwitch: boolean;
+    /** Whether to show the log panel toggle button in the action bar. 是否在操作栏中显示日志面板按钮。 */
+    showLogPanel: boolean;
+    /** Scroll threshold in pixels before the back-to-top button appears. 回到顶部按钮出现前的滚动阈值（像素）。 */
+    visibilityHeight: number;
+    /** Mobile breakpoint in pixels; when viewport width ≤ this value, layout is forced to wide and layout-switch is hidden.
+     * 移动端断点（像素）；视口宽度 ≤ 此值时强制 wide 布局并隐藏布局切换按钮。 */
+    mobileBreakpoint: number;
+    private scrolledPastThreshold;
+    private isMobile;
+    logPanelOpen: boolean;
+    private unsubscribeLayout?;
+    private mql?;
+    private readonly _scrollEl?;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    connectedCallback(): void;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    private setupMobileListener;
+    private readonly handleMobileChange;
+    protected updated(changed: Map<string, unknown>): void;
+    private applyLayoutWidth;
+    private readonly handleScroll;
+    private readonly handleBackTop;
+    private readonly handleLayoutSwitch;
+    private readonly handleLogPanelToggle;
+    private readonly handleLogPanelEvent;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=body.d.ts.map

package/dist/components/framework/body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/components/framework/body.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAiB9C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,oCAAoC;IACR,MAAM,EAAE,eAAe,CAAY;IAE/D,0DAA0D;IACF,WAAW,UAAS;IAE5E,qFAAqF;IAC5B,WAAW,UAAQ;IAE5E,uFAAuF;IACzB,gBAAgB,UAAQ;IAEtF,sFAAsF;IAC5B,YAAY,UAAS;IAE/E,4FAA4F;IAChC,gBAAgB,SAAO;IAEnF;kDAC8C;IACc,gBAAgB,SAAO;IAE1E,OAAO,CAAC,qBAAqB,CAAS;IAEtC,OAAO,CAAC,QAAQ,CAAS;IAEwB,YAAY,UAAS;IAE/E,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,GAAG,CAAC,CAAiB;IACN,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAEhE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAwGpB;IAEF,iBAAiB,IAAI,IAAI;IAWzB,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CASjC;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE5B;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAQjC;IAEF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAEnC;IAEF,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAIlC;IAEF,MAAM;CA8DP"}

package/dist/components/framework/body.js

@@ -0,0 +1,333 @@
+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, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { getAitheLayout, onAitheLayoutChange, setAitheLayout } from '../../styles/layout';
+import { t } from '../../styles/i18n';
+const LAYOUT_WIDTHS = {
+    compact: '60%',
+    medium: '80%',
+    wide: '100%',
+};
+const LAYOUT_CYCLE = ['compact', 'medium', 'wide'];
+const LAYOUT_ICONS = {
+    compact: '◧',
+    medium: '◫',
+    wide: '◧',
+};
+/**
+ * Framework-level page body that sits below `aithe-header`.
+ * 框架级页面主体区域，位于 `aithe-header` 下方。
+ *
+ * Provides layout density control (compact / medium / wide) that scales the content width,
+ * automatic scrolling, and a fixed floating action bar in the bottom-right corner.
+ * 提供布局密度控制（紧凑/适中/宽松）来缩放内容宽度，自动滚动，以及右下角固定的浮动操作栏。
+ *
+ * @slot - Default slot for page content. 默认插槽，用于页面内容。
+ * @slot actions - Extra action buttons in the floating bar (before built-in buttons). 浮动栏中的额外操作按钮（在内置按钮之前）。
+ *
+ * @fires aithe-layout-change - Emitted when layout density changes. 布局密度变更时发出，detail 包含 `{ layout: string }`。
+ *   Call `preventDefault()` to suppress the built-in layout switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ *
+ * @example
+ * ```html
+ * <aithe-header brand="App" show-locale-switch show-theme-switch></aithe-header>
+ * <aithe-body show-actions>
+ *   <main>Your content here</main>
+ * </aithe-body>
+ * ```
+ */
+let AitheBody = class AitheBody extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current layout density. 布局密度。 */
+        this.layout = 'medium';
+        /** Whether to show the floating action bar. 是否显示浮动操作栏。 */
+        this.showActions = false;
+        /** Whether to show the "back to top" button in the action bar. 是否在操作栏中显示"回到顶部"按钮。 */
+        this.showBackTop = true;
+        /** Whether to show the "switch layout" button in the action bar. 是否在操作栏中显示"切换布局"按钮。 */
+        this.showLayoutSwitch = true;
+        /** Whether to show the log panel toggle button in the action bar. 是否在操作栏中显示日志面板按钮。 */
+        this.showLogPanel = false;
+        /** Scroll threshold in pixels before the back-to-top button appears. 回到顶部按钮出现前的滚动阈值（像素）。 */
+        this.visibilityHeight = 260;
+        /** Mobile breakpoint in pixels; when viewport width ≤ this value, layout is forced to wide and layout-switch is hidden.
+         * 移动端断点（像素）；视口宽度 ≤ 此值时强制 wide 布局并隐藏布局切换按钮。 */
+        this.mobileBreakpoint = 768;
+        this.scrolledPastThreshold = false;
+        this.isMobile = false;
+        this.logPanelOpen = false;
+        this.handleMobileChange = (e) => {
+            this.isMobile = e.matches;
+            if (this.isMobile) {
+                this.layout = 'wide';
+                this.applyLayoutWidth();
+            }
+            else {
+                this.layout = getAitheLayout();
+                this.applyLayoutWidth();
+            }
+        };
+        this.handleScroll = () => {
+            this.scrolledPastThreshold = (this._scrollEl?.scrollTop ?? 0) >= this.visibilityHeight;
+        };
+        this.handleBackTop = () => {
+            this._scrollEl?.scrollTo({ top: 0, behavior: 'smooth' });
+        };
+        this.handleLayoutSwitch = () => {
+            const currentIdx = LAYOUT_CYCLE.indexOf(this.layout);
+            const nextIdx = (currentIdx + 1) % LAYOUT_CYCLE.length;
+            const nextLayout = LAYOUT_CYCLE[nextIdx];
+            const notPrevented = this.emit('aithe-layout-change', { layout: nextLayout });
+            if (notPrevented) {
+                setAitheLayout(nextLayout);
+            }
+        };
+        this.handleLogPanelToggle = () => {
+            this.logPanelOpen = !this.logPanelOpen;
+        };
+        this.handleLogPanelEvent = (e) => {
+            if (e.detail && typeof e.detail.open === 'boolean') {
+                this.logPanelOpen = e.detail.open;
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      .body-scroll {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .body-inner {
+        width: var(--aithe-body-width, 80%);
+        max-width: 100%;
+        margin: 0 auto;
+        padding: var(--aithe-body-padding, var(--aithe-space-6) 0);
+        box-sizing: border-box;
+      }
+
+      .action-bar {
+        position: fixed;
+        right: var(--aithe-space-5);
+        bottom: var(--aithe-space-5);
+        z-index: var(--aithe-z-dropdown, 1000);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--aithe-space-2);
+      }
+
+      .log-panel-container {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: var(--aithe-z-sticky, 100);
+        padding: var(--aithe-space-4);
+        padding-bottom: calc(var(--aithe-space-5) + 50px);
+        pointer-events: none;
+      }
+
+      .log-panel-container > * {
+        pointer-events: auto;
+        width: var(--aithe-body-width, 80%);
+        max-width: 560px;
+        margin: 0 auto;
+      }
+
+      .action-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        box-shadow: var(--aithe-shadow-2);
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 1;
+        transition:
+          border-color 0.15s,
+          background 0.15s,
+          color 0.15s,
+          opacity 0.2s;
+      }
+
+      .action-btn:hover {
+        border-color: var(--aithe-primary-6);
+        color: var(--aithe-primary-6);
+      }
+
+      .action-btn:active {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .action-btn[hidden] {
+        display: none;
+      }
+
+      ::slotted([slot='actions']) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        box-shadow: var(--aithe-shadow-2);
+        cursor: pointer;
+        font-size: 16px;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.layout = getAitheLayout();
+        this.unsubscribeLayout = onAitheLayoutChange(() => {
+            if (!this.isMobile) {
+                this.layout = getAitheLayout();
+            }
+        });
+        this.setupMobileListener();
+    }
+    firstUpdated() {
+        this._scrollEl?.addEventListener('scroll', this.handleScroll, { passive: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribeLayout?.();
+        this._scrollEl?.removeEventListener('scroll', this.handleScroll);
+        this.mql?.removeEventListener('change', this.handleMobileChange);
+    }
+    setupMobileListener() {
+        this.mql = globalThis.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
+        this.handleMobileChange(this.mql);
+        this.mql.addEventListener('change', this.handleMobileChange);
+    }
+    updated(changed) {
+        if (changed.has('layout')) {
+            this.applyLayoutWidth();
+        }
+    }
+    applyLayoutWidth() {
+        const width = LAYOUT_WIDTHS[this.layout] ?? LAYOUT_WIDTHS['medium'];
+        this.style.setProperty('--aithe-body-width', width);
+    }
+    render() {
+        this.applyLayoutWidth();
+        const layoutSwitchBtn = this.showLayoutSwitch && !this.isMobile
+            ? html `
+            <button
+              class="action-btn"
+              type="button"
+              title=${t('body.switchLayout')}
+              @click=${this.handleLayoutSwitch}
+            >
+              ${LAYOUT_ICONS[this.layout] ?? LAYOUT_ICONS['medium']}
+            </button>
+          `
+            : nothing;
+        const backTopBtn = this.showBackTop && this.scrolledPastThreshold
+            ? html `
+            <button
+              class="action-btn"
+              type="button"
+              title=${t('body.backTop')}
+              @click=${this.handleBackTop}
+            >
+              ↑
+            </button>
+          `
+            : nothing;
+        const logPanelBtn = this.showLogPanel
+            ? html `
+          <button
+            class="action-btn"
+            type="button"
+            title="Log Panel"
+            @click=${this.handleLogPanelToggle}
+          >
+            📋
+          </button>
+        `
+            : nothing;
+        const actionBar = this.showActions
+            ? html `
+          <div class="action-bar">
+            <slot name="bar"></slot>
+            <slot name="actions"></slot>
+            ${logPanelBtn} ${layoutSwitchBtn} ${backTopBtn}
+          </div>
+        `
+            : nothing;
+        return html `
+      <div class="body-scroll">
+        <div class="body-inner" part="body-inner">
+          <slot></slot>
+        </div>
+      </div>
+      ${actionBar}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheBody.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-actions' })
+], AitheBody.prototype, "showActions", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-back-top' })
+], AitheBody.prototype, "showBackTop", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-layout-switch' })
+], AitheBody.prototype, "showLayoutSwitch", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-log-panel' })
+], AitheBody.prototype, "showLogPanel", void 0);
+__decorate([
+    property({ type: Number, attribute: 'visibility-height' })
+], AitheBody.prototype, "visibilityHeight", void 0);
+__decorate([
+    property({ type: Number, attribute: 'mobile-breakpoint' })
+], AitheBody.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    state()
+], AitheBody.prototype, "scrolledPastThreshold", void 0);
+__decorate([
+    state()
+], AitheBody.prototype, "isMobile", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'log-panel-open' })
+], AitheBody.prototype, "logPanelOpen", void 0);
+__decorate([
+    query('.body-scroll')
+], AitheBody.prototype, "_scrollEl", void 0);
+AitheBody = __decorate([
+    customElement('aithe-body')
+], AitheBody);
+export { AitheBody };

package/dist/components/framework/dashboard-panel.d.ts

@@ -0,0 +1,123 @@
+/**
+ * @file Dashboard Panel 子组件 / Dashboard Panel child component
+ * @description 仪表盘面板子组件，支持拖拽、调整大小、关闭、最大化，通过插槽分发内容。
+ *              Dashboard panel child component with drag, resize, close, maximize support
+ *              and slot-based content distribution.
+ */
+import { type TemplateResult } from 'lit';
+import { AitheElement } from '../../core/aithe-element';
+/**
+ * Dashboard panel child component. Renders as a card with header bar (icon + label),
+ * close/maximize buttons, resize handles, and a default slot for arbitrary content.
+ * The header has a flat style consistent with the body area.
+ *
+ * 仪表盘面板子组件。渲染为带标题栏（图标 + 标签）、关闭/最大化按钮、调整大小手柄和默认插槽的卡片。
+ * 标题栏采用与内容区一致的扁平样式。
+ *
+ * @slot - Panel body content. 面板正文内容。
+ * @slot header-actions - Slot for custom action buttons in the header (inserted before close/maximize buttons). 标题栏操作插槽，用于插入自定义按钮（位于关闭/最大化按钮之前）。
+ *
+ * @csspart header - The panel header bar. 面板标题栏。
+ * @csspart body - The panel body area. 面板正文区域。
+ * @csspart close-btn - The close button. 关闭按钮。
+ * @csspart maximize-btn - The maximize button. 最大化按钮。
+ *
+ * @fires aithe-panel-close - Emitted when the close button is clicked with `{ panelId }`. 关闭按钮点击时发出。
+ * @fires aithe-panel-drag-start - Emitted when drag starts with `{ panelId, startX, startY }`. 拖拽开始时发出。
+ * @fires aithe-panel-drag - Emitted during drag with `{ panelId, deltaX, deltaY }`. 拖拽过程中发出。
+ * @fires aithe-panel-drag-end - Emitted when drag ends with `{ panelId, deltaX, deltaY }`. 拖拽结束时发出。
+ * @fires aithe-panel-maximize - Emitted when maximize button is clicked with `{ panelId }`. 最大化按钮点击时发出。
+ * @fires aithe-panel-resize-start - Emitted when resize starts with `{ panelId, edge, startX, startY }`. 调整大小开始时发出。
+ * @fires aithe-panel-resize - Emitted during resize with `{ panelId, edge, deltaX, deltaY }`. 调整大小过程中发出。
+ * @fires aithe-panel-resize-end - Emitted when resize ends with `{ panelId, edge, deltaX, deltaY }`. 调整大小结束时发出。
+ *
+ * @example
+ * ```html
+ * <aithe-dashboard-panel
+ *   panel-id="stats"
+ *   x="0" y="0" w="6" h="4"
+ *   label="Statistics"
+ *   icon="barChart"
+ *   closable
+ * >
+ *   <p>Panel content here</p>
+ * </aithe-dashboard-panel>
+ * ```
+ */
+export declare class AitheDashboardPanel extends AitheElement {
+    /** Panel unique identifier. 面板唯一标识。 */
+    panelId: string;
+    /** Starting column (0-based). 起始列（从 0 开始）。 */
+    x: number;
+    /** Starting row (0-based). 起始行（从 0 开始）。 */
+    y: number;
+    /** Number of columns spanned. 占列数。 */
+    w: number;
+    /** Number of rows spanned. 占行数。 */
+    h: number;
+    /** Whether the panel can be closed. 面板是否可关闭。 */
+    closable: boolean;
+    /** Panel header label text. 面板标题文本。 */
+    label: string;
+    /** Panel header icon name. 面板标题图标名称。 */
+    icon: string;
+    /** Whether the panel is currently visible. 面板当前是否可见。 */
+    visible: boolean;
+    /** Whether the panel is currently maximized. 面板当前是否最大化。 */
+    maximized: boolean;
+    /** Whether the dashboard is locked (disables drag and resize). 仪表盘是否锁定（禁用拖拽和调整大小）。 */
+    locked: boolean;
+    /** Whether to show the panel header bar. 是否显示面板标题栏。 */
+    showHeader: boolean;
+    private dragging;
+    private resizing;
+    private readonly headerEl?;
+    private dragStartX;
+    private dragStartY;
+    private dragOffsetX;
+    private dragOffsetY;
+    private resizeEdge;
+    private resizeStartX;
+    private resizeStartY;
+    private resizeDeltaX;
+    private resizeDeltaY;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Check if a mousedown event originated from the panel header.
+     * Uses composedPath() to traverse Shadow DOM boundaries.
+     * 检查 mousedown 事件是否源自面板标题栏。使用 composedPath() 穿透 Shadow DOM 边界。
+     */
+    private isHeaderClick;
+    /**
+     * Check if a mousedown event originated from an action button.
+     * 检查 mousedown 事件是否源自操作按钮。
+     */
+    private isActionButtonClick;
+    /**
+     * Check if a mousedown event originated from a resize handle.
+     * Returns the edge identifier or null.
+     * 检查 mousedown 事件是否源自调整大小手柄。返回边缘标识或 null。
+     */
+    private getResizeEdge;
+    private readonly handleMouseDown;
+    /** Start a drag operation. 开始拖拽操作。 */
+    private startDrag;
+    private readonly handleMouseMove;
+    private readonly handleMouseUp;
+    private cleanupDrag;
+    /** Start a resize operation. 开始调整大小操作。 */
+    private startResize;
+    private readonly handleResizeMove;
+    private readonly handleResizeEnd;
+    private cleanupResize;
+    private readonly handleClose;
+    private readonly handleMaximize;
+    /** Render panel header with icon, label, and action buttons. 渲染面板头部，含图标、标签和操作按钮。 */
+    private renderHeader;
+    /** Render resize handles when not locked and not maximized. 非锁定且非最大化时渲染调整大小手柄。 */
+    private renderResizeHandles;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=dashboard-panel.d.ts.map