cabloy 5.1.247 → 5.1.249

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/controller.tsx

@@ -1,5 +1,6 @@
 import type { ModelTabs, ModelTabsOptions } from 'zova-module-a-routertabs';
 
+import { nextTick, useId } from 'vue';
 import { BeanControllerBase, Use, usePrepareArg } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
@@ -40,14 +41,95 @@ export class ControllerLayoutAdmin extends BeanControllerBase {
   private viewportWidth: number = 0;
   private _windowResizeHandler?: () => void;
 
+  headerActionsOpen = false;
+  headerActionsId = 'home-layoutadmin-header-actions';
+  private _headerActionsElement?: HTMLDivElement;
+  private _headerOutsideHandler: (event: PointerEvent) => void;
+  private _headerClickHandler: (event: MouseEvent) => void;
+
+  tabItemsWidth: number | undefined = undefined;
+  tabItemsOverflowStart = false;
+  tabItemsOverflowEnd = false;
+  tabItemsMenuOpen = false;
+  tabItemsMenuId: string;
+  private _tabItemsElement?: HTMLDivElement;
+  private _tabItemsMenuElement?: HTMLDivElement;
+  private _tabItemsObserver?: ResizeObserver;
+  private _tabItemsMounted = false;
+  private _tabItemsMenuFrame?: number;
+  private _tabItemsOnScroll: () => void;
+  private _tabItemsOnToggle: (event: ToggleEvent) => void;
+  private _tabItemsOnViewport: (event: Event) => void;
+  private _tabItemsOnKeydown: (event: KeyboardEvent) => void;
+
+  get tabItemsCompact() {
+    return this.tabItemsWidth !== undefined && this.tabItemsWidth < 240;
+  }
+
   protected async __init__() {
+    this.tabItemsMenuId = this.$composable(useId);
+    this._tabItemsOnScroll = () => this.measureTabItems();
+    this._tabItemsOnToggle = event => this.onTabItemsMenuToggle(event);
+    this._tabItemsOnViewport = event => {
+      if (event.target instanceof Node && this._tabItemsMenuElement?.contains(event.target)) return;
+      this.closeTabItemsMenu();
+    };
+    this._tabItemsOnKeydown = event => {
+      if (event.key !== 'Escape' || event.defaultPrevented || !this.tabItemsMenuOpen) return;
+      const active = this._tabItemsMenuElement?.ownerDocument.activeElement;
+      const trigger = this._tabItemsElement?.querySelector('[data-testid="tab-items-more"]');
+      if (active?.closest('dialog[open], [role="dialog"]')) return;
+      if (
+        active !== document.body &&
+        active !== trigger &&
+        !this._tabItemsMenuElement?.contains(active ?? null)
+      ) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      this.closeTabItemsMenu(true);
+    };
+    this.$controllerMounted(() => {
+      this.$ssr.handleDirectOrOnHydrated(() => {
+        if (this.ctx.disposed) return;
+        this._tabItemsMounted = true;
+        this.observeTabItems();
+      });
+    });
+    this.$watch(
+      () => [
+        this.$$modelTabs?.tabKeyCurrent,
+        this.$$modelTabs?.componentKeyCurrent,
+        this.$$modelTabs?.tabCurrent?.items?.map(item => [
+          item.componentKey,
+          item.pageMeta?.pageTitle,
+          item.pageMeta?.pageDirty,
+          item.pageMeta?.formMeta?.formScene,
+        ]),
+        this.tabItemsCompact,
+      ],
+      ([tabKey], [previousTabKey]) => {
+        if (tabKey !== previousTabKey) this.closeTabItemsMenu();
+        void nextTick(() => this.observeTabItems());
+      },
+    );
+    this._headerClickHandler = event => this.onHeaderActionsClick(event);
+    this._headerOutsideHandler = event => {
+      if (event.target instanceof Node && !this._headerActionsElement?.contains(event.target)) {
+        this.closeHeaderActions();
+      }
+    };
     // viewport
     if (process.env.CLIENT) {
       this._windowResizeHandler = () => {
         this.viewportWidth = document.documentElement.clientWidth;
+        this.closeHeaderActions();
+        this.closeTabItemsMenu();
       };
       this._windowResizeHandler();
       window.addEventListener('resize', this._windowResizeHandler);
+      document.addEventListener('pointerdown', this._headerOutsideHandler);
     }
     // belowBreakpoint
     this.belowBreakpoint = this.$computed(() => {
@@ -82,9 +164,194 @@ export class ControllerLayoutAdmin extends BeanControllerBase {
     await this._initTabs();
   }
 
+  setTabItemsElement(element?: HTMLDivElement) {
+    if (element === this._tabItemsElement) return;
+    this._tabItemsObserver?.disconnect();
+    this._tabItemsElement?.removeEventListener('scroll', this._tabItemsOnScroll, true);
+    this._tabItemsElement = element;
+    element?.addEventListener('scroll', this._tabItemsOnScroll, true);
+    this.observeTabItems();
+  }
+
+  private observeTabItems() {
+    const element = this._tabItemsElement;
+    if (!this._tabItemsMounted || this.ctx.disposed || !element) return;
+    this._tabItemsObserver?.disconnect();
+    this._tabItemsObserver = new ResizeObserver(() => {
+      this.measureTabItems();
+      this.revealTabItem();
+    });
+    this._tabItemsObserver.observe(element);
+    const content = element.querySelector('.tab-items-content');
+    if (content) this._tabItemsObserver.observe(content);
+    this.measureTabItems();
+    this.revealTabItem();
+  }
+
+  private measureTabItems() {
+    const element = this._tabItemsElement;
+    if (this.ctx.disposed || !element) return;
+    this.tabItemsWidth = element.clientWidth;
+    const scroller = element.querySelector('.tab-items-scroll');
+    const content = element.querySelector('.tab-items-content');
+    const bounds = scroller?.getBoundingClientRect();
+    const items = content?.getBoundingClientRect();
+    this.tabItemsOverflowStart = !!bounds && !!items && items.left < bounds.left - 1;
+    this.tabItemsOverflowEnd = !!bounds && !!items && items.right > bounds.right + 1;
+  }
+
+  private revealTabItem() {
+    const element = this._tabItemsElement;
+    const scroller = element?.querySelector('.tab-items-scroll');
+    const active = scroller?.querySelector('[aria-selected="true"]');
+    if (!scroller || !active || this.ctx.disposed) return;
+    const bounds = scroller.getBoundingClientRect();
+    const item = active.getBoundingClientRect();
+    const delta =
+      item.left < bounds.left ? item.left - bounds.left : Math.max(0, item.right - bounds.right);
+    if (delta) scroller.scrollBy({ left: delta, behavior: 'instant' });
+    this.measureTabItems();
+  }
+
+  setTabItemsMenuElement(element?: HTMLDivElement) {
+    if (element === this._tabItemsMenuElement) return;
+    this.closeTabItemsMenu();
+    this._tabItemsMenuElement?.removeEventListener('beforetoggle', this._tabItemsOnToggle);
+    this._tabItemsMenuElement = element;
+    element?.addEventListener('beforetoggle', this._tabItemsOnToggle);
+  }
+
+  closeTabItemsMenu(restoreFocus = false) {
+    const element = this._tabItemsMenuElement;
+    if (this.tabItemsMenuOpen && element?.isConnected) element.hidePopover();
+    this.clearTabItemsMenu();
+    if (restoreFocus) {
+      this._tabItemsElement
+        ?.querySelector<HTMLButtonElement>('[data-testid="tab-items-more"]')
+        ?.focus({ preventScroll: true });
+    }
+  }
+
+  private clearTabItemsMenu() {
+    this.tabItemsMenuOpen = false;
+    if (this._tabItemsMenuFrame !== undefined) {
+      window.cancelAnimationFrame(this._tabItemsMenuFrame);
+      this._tabItemsMenuFrame = undefined;
+    }
+    if (process.env.CLIENT) {
+      window.removeEventListener('scroll', this._tabItemsOnViewport, true);
+      document.removeEventListener('keydown', this._tabItemsOnKeydown);
+    }
+    this._tabItemsMenuElement?.style.removeProperty('visibility');
+  }
+
+  private onTabItemsMenuToggle(event: ToggleEvent) {
+    if (event.target !== this._tabItemsMenuElement) return;
+    if (event.newState !== 'open') {
+      this.clearTabItemsMenu();
+      return;
+    }
+    this.closeHeaderActions();
+    this.tabItemsMenuOpen = true;
+    const element = this._tabItemsMenuElement!;
+    element.style.visibility = 'hidden';
+    this._tabItemsMenuFrame = window.requestAnimationFrame(() => {
+      this._tabItemsMenuFrame = undefined;
+      if (!this.tabItemsMenuOpen) return;
+      this.positionTabItemsMenu();
+      element.style.removeProperty('visibility');
+      element.querySelector<HTMLButtonElement>('.tab-items-select')?.focus({ preventScroll: true });
+      window.addEventListener('scroll', this._tabItemsOnViewport, true);
+    });
+    document.addEventListener('keydown', this._tabItemsOnKeydown);
+  }
+
+  private positionTabItemsMenu() {
+    const element = this._tabItemsMenuElement;
+    const trigger = this._tabItemsElement?.querySelector('[data-testid="tab-items-more"]');
+    if (!element || !trigger) return;
+    const anchor = trigger.getBoundingClientRect();
+    const popup = element.getBoundingClientRect();
+    const viewport = element.ownerDocument.documentElement;
+    element.style.left = `${Math.max(8, Math.min(anchor.right - popup.width, viewport.clientWidth - popup.width - 8))}px`;
+    element.style.top = `${Math.max(8, Math.min(anchor.bottom + 4, viewport.clientHeight - popup.height - 8))}px`;
+  }
+
   protected __dispose__() {
+    this._tabItemsMounted = false;
+    this.setTabItemsElement();
+    this.setTabItemsMenuElement();
+    this.setHeaderActionsElement();
     if (this._windowResizeHandler) {
       window.removeEventListener('resize', this._windowResizeHandler);
+      document.removeEventListener('pointerdown', this._headerOutsideHandler);
+    }
+  }
+
+  setHeaderActionsElement(element?: HTMLDivElement) {
+    if (element === this._headerActionsElement) return;
+    this._headerActionsElement?.removeEventListener('click', this._headerClickHandler, true);
+    this._headerActionsElement = element;
+    element?.addEventListener('click', this._headerClickHandler, true);
+  }
+
+  toggleHeaderActions() {
+    if (this.headerActionsOpen) {
+      this.closeHeaderActions();
+    } else {
+      this.headerActionsOpen = true;
+    }
+  }
+
+  closeHeaderActions(restoreFocus = false) {
+    this.headerActionsOpen = false;
+    this._headerActionsElement
+      ?.querySelectorAll<HTMLDetailsElement>('details[open]')
+      .forEach(details => {
+        details.open = false;
+      });
+    if (restoreFocus) {
+      this._headerActionsElement?.querySelector<HTMLButtonElement>('button')?.focus();
+    }
+  }
+
+  onHeaderActionsFocusout(event: FocusEvent) {
+    if (
+      this.headerActionsOpen &&
+      (!(event.relatedTarget instanceof Node) ||
+        !this._headerActionsElement?.contains(event.relatedTarget))
+    ) {
+      this.closeHeaderActions();
+    }
+  }
+
+  onHeaderActionsClick(event: MouseEvent) {
+    if (!this.headerActionsOpen || !(event.target instanceof Element)) return;
+    const action = event.target.closest('a, button');
+    if (action?.closest('details') && !action.matches(':disabled, [aria-disabled="true"]')) {
+      this.closeHeaderActions(true);
+    }
+  }
+
+  onHeaderActionsKeydown(event: KeyboardEvent) {
+    if (
+      event.key !== 'Escape' ||
+      event.defaultPrevented ||
+      !(event.target instanceof Element) ||
+      event.target.closest('dialog[open], [role="dialog"]')
+    ) {
+      return;
+    }
+    const details = event.target.closest<HTMLDetailsElement>('details[open]');
+    if (details) {
+      event.preventDefault();
+      event.stopPropagation();
+      details.open = false;
+      details.querySelector<HTMLElement>('summary')?.focus();
+    } else if (this.headerActionsOpen) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.closeHeaderActions(true);
     }
   }
 

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/render.header.tsx

@@ -1,5 +1,7 @@
+import { classes } from 'typestyle';
 import { BeanRenderBase, Use } from 'zova';
 import { Render } from 'zova-module-a-bean';
+import { ZIcon } from 'zova-module-a-icon';
 
 import type { RenderLayoutAdmin } from './render.tsx';
 
@@ -11,7 +13,7 @@ export class RenderHeader extends BeanRenderBase {
   public render() {
     return (
       <>
-        <div class="navbar bg-base-300 w-full">
+        <div class={classes('navbar bg-base-300 w-full', this.cHeader)}>
           <div class="flex-none">
             <button
               class="btn btn-square btn-ghost"
@@ -34,15 +36,45 @@ export class RenderHeader extends BeanRenderBase {
               </svg>
             </button>
           </div>
-          <div class="text-xl px-4">{this.sys.env.APP_TITLE}</div>
-          <div class="mx-2 min-w-0 flex-2 px-2">{this.$$r.$$renderTabs.renderTabItems()}</div>
-          <div class="hidden flex-none lg:block">
-            <ul class="menu menu-horizontal">
-              {this.$$r.$$renderLocale.render()}
-              {this.$$r.$$renderTheme.renderThemeDark()}
-              {this.$$r.$$renderTheme.renderThemeName()}
-              {this.$$r.$$renderUser.render()}
-            </ul>
+          <div class="header-title text-xl px-4">{this.sys.env.APP_TITLE}</div>
+          <div class="header-navigation mx-2 min-w-0 flex-2 px-2">
+            {this.$$r.$$renderTabs.renderTabItems()}
+          </div>
+          <div
+            ref={ref => {
+              if (!this.ctx.disposed)
+                this.setHeaderActionsElement?.((ref as HTMLDivElement | null) ?? undefined);
+            }}
+            class={classes('relative flex-none', this.cHeaderActions)}
+            data-testid="header-actions"
+            onFocusout={event => this.onHeaderActionsFocusout(event)}
+            onKeydown={event => this.onHeaderActionsKeydown(event)}
+          >
+            <button
+              type="button"
+              class="btn btn-square btn-ghost lg:hidden"
+              aria-label={this.scope.locale.MoreActions()}
+              aria-expanded={this.headerActionsOpen}
+              aria-controls={this.headerActionsId}
+              onClick={() => this.toggleHeaderActions()}
+            >
+              <ZIcon name="::more-horiz" width={24} aria-hidden="true" />
+            </button>
+            <div
+              id={this.headerActionsId}
+              class={classes(
+                'header-actions-panel absolute right-0 top-full z-30 rounded-box bg-base-100 shadow-lg lg:static lg:bg-transparent lg:shadow-none',
+                this.headerActionsOpen ? 'block' : 'hidden',
+                'lg:block',
+              )}
+            >
+              <ul class="menu w-full lg:w-auto lg:menu-horizontal">
+                {this.$$r.$$renderLocale.render()}
+                {this.$$r.$$renderTheme.renderThemeDark()}
+                {this.$$r.$$renderTheme.renderThemeName()}
+                {this.$$r.$$renderUser.render()}
+              </ul>
+            </div>
           </div>
         </div>
         <div class="navbar bg-base-300 w-full">{this.$$r.$$renderTabs.renderTabs()}</div>

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/render.locale.tsx

@@ -1,6 +1,7 @@
 import { BeanRenderBase, ClientOnly } from 'zova';
 import { Render } from 'zova-module-a-bean';
 import { $icon } from 'zova-module-a-icon';
+import { ZButton } from 'zova-module-basic-button';
 import { closeNearestDetails } from 'zova-module-home-base';
 
 @Render()
@@ -10,22 +11,26 @@ export class RenderLocale extends BeanRenderBase {
     return (
       <li>
         <details>
-          <summary>{$icon('::language', 24)}</summary>
+          <summary aria-label={this.scope.locale.Language()} title={this.scope.locale.Language()}>
+            {$icon('::language', 24)}
+            <span class="lg:hidden">{this.scope.locale.Language()}</span>
+          </summary>
           <ClientOnly>
             <ul class="bg-base-100 rounded-t-none p-2 w-48">
               {Object.keys(locales).map(key => {
                 const title = this.$scopeBase.locale[locales[key]]();
                 return (
                   <li key={key} class={this.app.meta.locale.current === key ? 'disabled' : ''}>
-                    <a
-                      onClick={event => {
+                    <ZButton
+                      disabled={this.app.meta.locale.current === key}
+                      onPerform={event => {
                         this.app.meta.locale.current = key as any;
-                        closeNearestDetails(event);
+                        closeNearestDetails({ currentTarget: event.target });
                       }}
                     >
                       {$icon(this.app.meta.locale.current === key ? '::done' : '::none', 24)}
                       {title}
-                    </a>
+                    </ZButton>
                   </li>
                 );
               })}

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/render.tabs.tsx

@@ -6,6 +6,7 @@ import { Render } from 'zova-module-a-bean';
 import { $iconName, IIconRecord, ZIcon } from 'zova-module-a-icon';
 import { IRouteViewRouteItem } from 'zova-module-a-router';
 import { RouteTab, ZRouterViewTabs } from 'zova-module-a-routertabs';
+import { ZButton } from 'zova-module-basic-button';
 
 @Render()
 export class RenderTabs extends BeanRenderBase {
@@ -77,22 +78,31 @@ export class RenderTabs extends BeanRenderBase {
       return <ClientOnly>{domWrapper}</ClientOnly>;
     }
 
+    const tabItems = tabCurrent.items.filter(item => item.componentKey !== tabKey);
+    if (!tabItems.length) return;
+    const visibleItems = this.tabItemsCompact
+      ? tabItems.filter(item => item.componentKey === $$modelTabs.componentKeyCurrent)
+      : tabItems;
     const domTabs: VNode[] = [];
-    for (const tabItem of tabCurrent.items) {
-      // ignore first
-      if (tabItem.componentKey === tabKey) continue;
-      const { componentKey, pageMeta } = tabItem;
-      const className =
-        componentKey === $$modelTabs.componentKeyCurrent ? 'tab-active text-primary' : '';
-      const pageContent = pageMeta?.onCustomRender
-        ? pageMeta.onCustomRender(tabItem)
-        : pageMeta?.pageTitle || '';
+    for (const tabItem of visibleItems) {
+      const { componentKey } = tabItem;
+      const current = componentKey === $$modelTabs.componentKeyCurrent;
+      const className = current ? 'tab-active text-primary' : '';
+      const pageContent = this.getTabItemContent(tabItem);
       const tabItemIcon = this.getTabItemIcon(tabItem);
       const domTab = (
         <a
           key={componentKey}
           role="tab"
+          aria-selected={current}
+          tabindex={0}
           class={`tab flex items-center ${className} ${this.cTab}`}
+          onKeydown={event => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              void $$modelTabs.activeTabItem(tabKey, componentKey);
+            }
+          }}
           onClick={() => {
             $$modelTabs.activeTabItem(tabKey, componentKey);
           }}
@@ -118,14 +128,90 @@ export class RenderTabs extends BeanRenderBase {
       domTabs.push(domTab);
     }
     const domWrapper = (
-      <div role="tablist" class="tabs tabs-border">
-        {domTabs}
+      <div
+        class={`tab-items ${this.cTabItems} ${this.tabItemsCompact ? 'is-compact' : ''}`}
+        data-testid="tab-items"
+        data-compact={this.tabItemsCompact ? 'true' : 'false'}
+        ref={ref => {
+          if (!this.ctx.disposed)
+            this.setTabItemsElement?.((ref as HTMLDivElement | null) ?? undefined);
+        }}
+      >
+        <div
+          class={`tab-items-viewport ${this.tabItemsOverflowStart ? 'has-start' : ''} ${this.tabItemsOverflowEnd ? 'has-end' : ''}`}
+        >
+          <div class="tab-items-scroll">
+            <div role="tablist" class="tab-items-content tabs tabs-border">
+              {domTabs}
+            </div>
+          </div>
+        </div>
+        <ZButton
+          class="tab-items-more btn btn-square btn-ghost"
+          data-testid="tab-items-more"
+          aria-label={this.scope.locale.AllTabs()}
+          title={this.scope.locale.AllTabs()}
+          aria-controls={this.tabItemsMenuId}
+          aria-expanded={this.tabItemsMenuOpen}
+          {...{ 'popovertarget': this.tabItemsMenuId, 'data-hydrate-ignore-popovertarget': '' }}
+        >
+          <span aria-hidden="true">▾</span>
+        </ZButton>
+        <div
+          id={this.tabItemsMenuId}
+          ref={ref => {
+            if (!this.ctx.disposed)
+              this.setTabItemsMenuElement?.((ref as HTMLDivElement | null) ?? undefined);
+          }}
+          {...{ popover: 'auto' }}
+          class={`${this.cTabItemsMenu} bg-base-100 border border-base-300 rounded-box shadow-lg p-2`}
+          data-testid="tab-items-list"
+          role="group"
+          aria-label={this.scope.locale.AllTabs()}
+        >
+          {tabItems.map(tabItem => {
+            const current = tabItem.componentKey === $$modelTabs.componentKeyCurrent;
+            const icon = this.getTabItemIcon(tabItem);
+            return (
+              <div key={tabItem.componentKey} class="tab-items-row flex items-center gap-1">
+                <ZButton
+                  class={`tab-items-select btn btn-ghost ${current ? 'bg-base-200 text-primary' : ''}`}
+                  aria-current={current ? 'page' : undefined}
+                  onPerform={async () => {
+                    this.closeTabItemsMenu();
+                    await $$modelTabs.activeTabItem(tabKey, tabItem.componentKey);
+                  }}
+                >
+                  {!!icon && <ZIcon name={icon} width={20} aria-hidden="true" />}
+                  <span class="tab-items-label">{this.getTabItemContent(tabItem)}</span>
+                  {current && <ZIcon name="::done" width={16} aria-hidden="true" />}
+                </ZButton>
+                <ZButton
+                  class="btn btn-square btn-ghost shrink-0"
+                  aria-label={this.scope.locale.CloseTab(tabItem.pageMeta?.pageTitle || '')}
+                  title={this.scope.locale.CloseTab(tabItem.pageMeta?.pageTitle || '')}
+                  onPerform={async () => {
+                    await $$modelTabs.deleteTabItem(tabKey, tabItem.componentKey, false);
+                    if (tabItems.length === 1) this.closeTabItemsMenu();
+                  }}
+                >
+                  <ZIcon name="::close" width={16} aria-hidden="true" />
+                </ZButton>
+              </div>
+            );
+          })}
+        </div>
       </div>
     );
     if (!this.$$modelTabs.cache) return domWrapper;
     return <ClientOnly>{domWrapper}</ClientOnly>;
   }
 
+  private getTabItemContent(tabItem: IRouteViewRouteItem) {
+    const pageMeta = tabItem.pageMeta;
+    return pageMeta?.onCustomRender ? pageMeta.onCustomRender(tabItem) : pageMeta?.pageTitle || '';
+  }
+
   public getTabIcon(tab: RouteTab) {
     const { info, items } = tab;
     // pageDirty

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/render.theme.tsx

@@ -3,6 +3,7 @@ import type { IThemeRecord } from 'zova-module-a-style';
 import { BeanRenderBase, ClientOnly } from 'zova';
 import { Render } from 'zova-module-a-bean';
 import { $icon } from 'zova-module-a-icon';
+import { ZButton } from 'zova-module-basic-button';
 import { closeNearestDetails } from 'zova-module-home-base';
 
 @Render()
@@ -25,7 +26,10 @@ export class RenderTheme extends BeanRenderBase {
     return (
       <li>
         <details>
-          <summary>{$icon('::dark-theme', 24)}</summary>
+          <summary aria-label={this.scope.locale.ColorMode()} title={this.scope.locale.ColorMode()}>
+            {$icon('::dark-theme', 24)}
+            <span class="lg:hidden">{this.scope.locale.ColorMode()}</span>
+          </summary>
           <ClientOnly>
             <ul class="bg-base-100 rounded-t-none p-2 w-48">
               {themes.map(item => {
@@ -34,15 +38,16 @@ export class RenderTheme extends BeanRenderBase {
                     key={item.mode.toString()}
                     class={this.$theme.darkMode === item.mode ? 'disabled' : ''}
                   >
-                    <a
-                      onClick={event => {
+                    <ZButton
+                      disabled={this.$theme.darkMode === item.mode}
+                      onPerform={event => {
                         this.$theme.darkMode = item.mode as any;
-                        closeNearestDetails(event);
+                        closeNearestDetails({ currentTarget: event.target });
                       }}
                     >
                       {$icon(this.$theme.darkMode === item.mode ? '::done' : '::none', 24)}
                       {item.title}
-                    </a>
+                    </ZButton>
                   </li>
                 );
               })}
@@ -58,21 +63,25 @@ export class RenderTheme extends BeanRenderBase {
     return (
       <li>
         <details>
-          <summary>{$icon(':outline:theme-outline', 24)}</summary>
+          <summary aria-label={this.scope.locale.Theme()} title={this.scope.locale.Theme()}>
+            {$icon(':outline:theme-outline', 24)}
+            <span class="lg:hidden">{this.scope.locale.Theme()}</span>
+          </summary>
           <ClientOnly>
             <ul class="bg-base-100 rounded-t-none p-2 w-48">
               {themes.map(item => {
                 return (
                   <li key={item.name} class={this.$theme.name === item.name ? 'disabled' : ''}>
-                    <a
-                      onClick={event => {
+                    <ZButton
+                      disabled={this.$theme.name === item.name}
+                      onPerform={event => {
                         this.$theme.name = item.name as keyof IThemeRecord;
-                        closeNearestDetails(event);
+                        closeNearestDetails({ currentTarget: event.target });
                       }}
                     >
                       {$icon(this.$theme.name === item.name ? '::done' : '::none', 24)}
                       {item.title}
-                    </a>
+                    </ZButton>
                   </li>
                 );
               })}

package/zova/src/suite/a-home/modules/home-layoutadmin/src/component/layoutAdmin/render.user.tsx

@@ -24,7 +24,18 @@ export class RenderUser extends BeanRenderBase {
           <ul class="bg-base-100 rounded-t-none p-2 w-32">
             <li>
               <a
+                href={this.$router.getPagePath('/home/user/account')}
                 onClick={event => {
+                  if (
+                    event.button !== 0 ||
+                    event.metaKey ||
+                    event.ctrlKey ||
+                    event.shiftKey ||
+                    event.altKey
+                  ) {
+                    return;
+                  }
+                  event.preventDefault();
                   this.app.$gotoPage('/home/user/account');
                   closeNearestDetails(event);
                 }}