@aithe/aithe-ui 26.2.3 → 26.3.2

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 };