cabloy 5.1.44 → 5.1.46

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 5.1.46
+
+### Improvements
+
+- Refine SSR site base handling in `beanSsrSiteBase.ts`.
+- Improve executor behavior in `executor.ts`.
+- Update tab rendering logic in `render.tabs.tsx`.
+- Adjust route configuration in `routes.ts`.
+
+## 5.1.45
+
+### Features
+
+- Add SSR menu boilerplates for demo applications.
+- Add SSR menu boilerplates for web applications.
+- Add SSR menu boilerplates for admin applications.
+
+### Bug Fixes
+
+- Remove redundant locale menu refetch watchers.
+- Improve menu query key scoping and prevent circular group recursion.
+
 ## 5.1.44
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabloy",
-  "version": "5.1.44",
+  "version": "5.1.46",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A Node.js fullstack framework",
   "keywords": [

package/vona/packages-cli/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-cli",
-  "version": "1.1.104",
+  "version": "1.1.105",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona cli",
   "keywords": [

package/vona/packages-cli/cli-set-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-cli-set-api",
-  "version": "1.1.102",
+  "version": "1.1.103",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona cli-set-api",
   "keywords": [

package/vona/packages-cli/cli-set-api/src/lib/bean/cli.create.bean.ts

@@ -20,9 +20,12 @@ declare module '@cabloy/cli' {
     moduleResourceName: string;
     boilerplate: string;
     ssrSiteModuleName: string;
+    ssrSiteModuleNameWeb: string;
     ssrSiteOnionName: string;
+    ssrSiteOnionNameWeb: string;
     ssrSiteGroupName: string;
     ssrSiteRestNpm: string;
+    ssrSiteRestNpmWeb: string;
   }
 }
 
@@ -37,15 +40,24 @@ export class CliCreateBean extends BeanCliBase {
     argv.ssrSiteModuleName = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
       ? 'vona-module-start-siteadmin'
       : 'vona-module-basic-siteadmin';
+    argv.ssrSiteModuleNameWeb = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
+      ? 'vona-module-start-siteweb'
+      : 'vona-module-basic-siteweb';
     argv.ssrSiteOnionName = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
       ? 'start-siteadmin:admin'
       : 'basic-siteadmin:admin';
+    argv.ssrSiteOnionNameWeb = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
+      ? 'start-siteweb:web'
+      : 'basic-siteweb:web';
     argv.ssrSiteGroupName = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
       ? 'start-siteadmin:management'
       : 'basic-siteadmin:management';
     argv.ssrSiteRestNpm = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
       ? 'zova-rest-cabloy-start-admin'
       : 'zova-rest-cabloy-basic-admin';
+    argv.ssrSiteRestNpmWeb = fs.existsSync(path.join(argv.projectPath, 'src/suite/cabloy-start'))
+      ? 'zova-rest-cabloy-start-web'
+      : 'zova-rest-cabloy-basic-web';
     // module name/info
     const moduleName = argv.module;
     argv.moduleInfo = this.helper.parseModuleInfo(moduleName);

package/vona/packages-vona/vona/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona",
-  "version": "5.1.39",
+  "version": "5.1.40",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "Vona is an intuitive, elegant and powerful Node.js framework for rapidly developing enterprise applications of any size",
   "keywords": [

package/vona/src/suite/a-demo/modules/demo-basic/src/.metadata/index.ts

@@ -1,12 +1,15 @@
 // eslint-disable
 /** ssrMenu: begin */
 export * from '../bean/ssrMenu.admin.ts';
+export * from '../bean/ssrMenu.demo.ts';
 import type { ISsrMenuOptionsAdmin } from '../bean/ssrMenu.admin.ts';
+import type { ISsrMenuOptionsDemo } from '../bean/ssrMenu.demo.ts';
 import 'vona-module-a-ssr';
 declare module 'vona-module-a-ssr' {
   
     export interface ISsrMenuRecord {
       'demo-basic:admin': ISsrMenuOptionsAdmin;
+'demo-basic:demo': ISsrMenuOptionsDemo;
     }
 
   
@@ -22,11 +25,51 @@ declare module 'vona-module-demo-basic' {
             get $beanFullName(): 'demo-basic.ssrMenu.admin';
             get $onionName(): 'demo-basic:admin';
             get $onionOptions(): ISsrMenuOptionsAdmin;
+          }
+
+        export interface SsrMenuDemo {
+          /** @internal */
+          get scope(): ScopeModuleDemoBasic;
+        }
+
+          export interface SsrMenuDemo {
+            get $beanFullName(): 'demo-basic.ssrMenu.demo';
+            get $onionName(): 'demo-basic:demo';
+            get $onionOptions(): ISsrMenuOptionsDemo;
           } 
 }
 /** ssrMenu: end */
+/** ssrMenuGroup: begin */
+export * from '../bean/ssrMenuGroup.demo.ts';
+import type { ISsrMenuGroupOptionsDemo } from '../bean/ssrMenuGroup.demo.ts';
+import 'vona-module-a-ssr';
+declare module 'vona-module-a-ssr' {
+  
+    export interface ISsrMenuGroupRecord {
+      'demo-basic:demo': ISsrMenuGroupOptionsDemo;
+    }
+
+  
+}
+declare module 'vona-module-demo-basic' {
+  
+        export interface SsrMenuGroupDemo {
+          /** @internal */
+          get scope(): ScopeModuleDemoBasic;
+        }
+
+          export interface SsrMenuGroupDemo {
+            get $beanFullName(): 'demo-basic.ssrMenuGroup.demo';
+            get $onionName(): 'demo-basic:demo';
+            get $onionOptions(): ISsrMenuGroupOptionsDemo;
+          } 
+}
+/** ssrMenuGroup: end */
+/** locale: begin */
+import { locales } from './locales.ts';
+/** locale: end */
 /** scope: begin */
-import { BeanScopeBase, type BeanScopeUtil } from 'vona';
+import { BeanScopeBase, type BeanScopeUtil, type TypeModuleLocales, type TypeLocaleBase } from 'vona';
 import { Scope } from 'vona-module-a-bean';
 
 @Scope()
@@ -34,6 +77,7 @@ export class ScopeModuleDemoBasic extends BeanScopeBase {}
 
 export interface ScopeModuleDemoBasic {
   util: BeanScopeUtil;
+locale: TypeModuleLocales<(typeof locales)[TypeLocaleBase]>;
 }
 
 import 'vona';
@@ -48,7 +92,9 @@ declare module 'vona' {
   
   
 
-  
+  export interface IBeanScopeLocale {
+    'demo-basic': (typeof locales)[TypeLocaleBase];
+  }
 
   
 }

package/vona/src/suite/a-demo/modules/demo-basic/src/.metadata/locales.ts

@@ -0,0 +1,18 @@
+import type { TypeLocaleBase } from 'vona';
+
+import { $makeLocaleMagic } from 'vona';
+
+import locale_en_us from '../config/locale/en-us.ts';
+import locale_zh_cn from '../config/locale/zh-cn.ts';
+
+export const locales = {
+  'en-us': locale_en_us,
+  'zh-cn': locale_zh_cn,
+};
+
+export function $locale<K extends keyof (typeof locales)[TypeLocaleBase]>(
+  key: K,
+  ...args: any[]
+): any {
+  return $makeLocaleMagic(`demo-basic::${key}`, ...args);
+}

package/vona/src/suite/a-demo/modules/demo-basic/src/bean/ssrMenu.admin.ts

@@ -15,7 +15,6 @@ export interface ISsrMenuOptionsAdmin extends IDecoratorSsrMenuOptions<ISsrSiteO
     link: 'http://localhost:7102/admin' as any,
     external: true,
     target: '_self',
-    group: undefined,
   },
   site: ['basic-siteweb:web'],
 })

package/vona/src/suite/a-demo/modules/demo-basic/src/bean/ssrMenu.demo.ts

@@ -0,0 +1,36 @@
+import type { IDecoratorSsrMenuOptions } from 'vona-module-a-ssr';
+import type { ISsrSiteOptionsWeb } from 'vona-module-basic-siteweb';
+
+import { BeanBase } from 'vona';
+import { $order } from 'vona-module-a-openapiutils';
+import { SsrMenu } from 'vona-module-a-ssr';
+
+export interface ISsrMenuOptionsDemo extends IDecoratorSsrMenuOptions<ISsrSiteOptionsWeb> {}
+
+@SsrMenu<ISsrMenuOptionsDemo>({
+  items: {
+    state: {
+      title: 'State',
+      order: $order(1),
+      icon: undefined,
+      link: '/demo/basic/state',
+      group: 'demo-basic:demo',
+    },
+    component: {
+      title: 'Component',
+      order: $order(2),
+      icon: undefined,
+      link: '/demo/basic/component',
+      group: 'demo-basic:demo',
+    },
+    cssInJs: {
+      title: 'CSS-in-JS',
+      order: $order(3),
+      icon: undefined,
+      link: '/demo/basic/style',
+      group: 'demo-basic:demo',
+    },
+  },
+  site: ['basic-siteweb:web'],
+})
+export class SsrMenuDemo extends BeanBase {}

package/vona/src/suite/a-demo/modules/demo-basic/src/bean/ssrMenuGroup.demo.ts

@@ -0,0 +1,20 @@
+import type { IDecoratorSsrMenuGroupOptions } from 'vona-module-a-ssr';
+import type { ISsrSiteOptionsWeb } from 'vona-module-basic-siteweb';
+
+import { BeanBase } from 'vona';
+import { $order } from 'vona-module-a-openapiutils';
+import { SsrMenuGroup } from 'vona-module-a-ssr';
+
+import { $locale } from '../.metadata/locales.ts';
+
+export interface ISsrMenuGroupOptionsDemo extends IDecoratorSsrMenuGroupOptions<ISsrSiteOptionsWeb> {}
+
+@SsrMenuGroup<ISsrMenuGroupOptionsDemo>({
+  item: {
+    title: $locale('Demo'),
+    order: $order(2),
+    icon: ':editor:code-block',
+  },
+  site: ['basic-siteweb:web'],
+})
+export class SsrMenuGroupDemo extends BeanBase {}

package/vona/src/suite/a-demo/modules/demo-basic/src/config/locale/en-us.ts

@@ -0,0 +1,3 @@
+export default {
+  Demo: 'Demo',
+};

package/vona/src/suite/a-demo/modules/demo-basic/src/config/locale/zh-cn.ts

@@ -0,0 +1,3 @@
+export default {
+  Demo: '演示',
+};

package/vona/src/suite/a-demo/modules/demo-basic/src/index.ts

@@ -1 +1,2 @@
+export * from './.metadata/locales.ts';
 export * from './.metadata/index.ts';

package/vona/src/suite-vendor/a-cabloy/modules/a-ssr/cli/ssrMenuGroupWeb/boilerplate/{{sceneName}}.{{beanName}}.ts_

@@ -0,0 +1,18 @@
+import type { IDecoratorSsrMenuGroupOptions } from 'vona-module-a-ssr';
+import type { ISsrSiteOptionsWeb } from '<%=argv.ssrSiteModuleNameWeb%>';
+
+import { BeanBase } from 'vona';
+import { $order } from 'vona-module-a-openapiutils';
+import { SsrMenuGroup } from 'vona-module-a-ssr';
+
+export interface ISsrMenuGroupOptions<%=argv.beanNameCapitalize%> extends IDecoratorSsrMenuGroupOptions<ISsrSiteOptionsWeb> {}
+
+@SsrMenuGroup<ISsrMenuGroupOptions<%=argv.beanNameCapitalize%>>({
+  item: {
+    title: '<%=argv.beanNameCapitalize%>',
+    order: $order(2),
+    icon: undefined,
+  },
+  site: ['<%=argv.ssrSiteOnionNameWeb%>'],
+})
+export class SsrMenuGroup<%=argv.beanNameCapitalize%> extends BeanBase {}

package/vona/src/suite-vendor/a-cabloy/modules/a-ssr/cli/ssrMenuWeb/boilerplate/{{sceneName}}.{{beanName}}.ts_

@@ -0,0 +1,19 @@
+import type { IDecoratorSsrMenuOptions } from 'vona-module-a-ssr';
+import type { ISsrSiteOptionsWeb } from '<%=argv.ssrSiteModuleNameWeb%>';
+
+import { BeanBase } from 'vona';
+import { $order } from 'vona-module-a-openapiutils';
+import { SsrMenu } from 'vona-module-a-ssr';
+
+export interface ISsrMenuOptions<%=argv.beanNameCapitalize%> extends IDecoratorSsrMenuOptions<ISsrSiteOptionsWeb> {}
+
+@SsrMenu<ISsrMenuOptions<%=argv.beanNameCapitalize%>>({
+  item: {
+    title: '<%=argv.beanNameCapitalize%>',
+    order: $order(1),
+    icon: undefined,
+    link: undefined,
+  },
+  site: ['<%=argv.ssrSiteOnionNameWeb%>'],
+})
+export class SsrMenu<%=argv.beanNameCapitalize%> extends BeanBase {}

package/vona/src/suite-vendor/a-cabloy/modules/a-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-module-a-ssr",
-  "version": "5.1.12",
+  "version": "5.1.14",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "keywords": [
@@ -63,12 +63,14 @@
       "ssrMenu": {
         "optionsGlobalInterfaceName": "IDecoratorSsrMenuOptions",
         "optionsGlobalInterfaceFrom": "vona-module-a-ssr",
-        "boilerplate": "ssrMenu/boilerplate"
+        "boilerplate": "ssrMenuAdmin/boilerplate",
+        "boilerplateWeb": "ssrMenuWeb/boilerplate"
       },
       "ssrMenuGroup": {
         "optionsGlobalInterfaceName": "IDecoratorSsrMenuGroupOptions",
         "optionsGlobalInterfaceFrom": "vona-module-a-ssr",
-        "boilerplate": "ssrMenuGroup/boilerplate"
+        "boilerplate": "ssrMenuGroupAdmin/boilerplate",
+        "boilerplateWeb": "ssrMenuGroupWeb/boilerplate"
       }
     },
     "capabilities": {

package/vona/src/suite-vendor/a-cabloy/modules/a-ssr/src/lib/beanSsrSiteBase.ts

@@ -209,6 +209,12 @@ export class BeanSsrSiteBase<
         headers.accept = headers.Accept;
         delete headers.Accept;
       }
+      for (const headerKey of ['x-vona-locale', 'x-vona-tz']) {
+        const headerValue = headers[headerKey];
+        if (headerValue !== undefined) {
+          this.ctx.request.headers[headerKey] = headerValue;
+        }
+      }
       // passport
       if (!ctxInited) {
         // init instance

package/vona/src/suite-vendor/a-cabloy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-suite-a-cabloy",
-  "version": "5.1.26",
+  "version": "5.1.28",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "author": "",

package/vona/src/suite-vendor/a-vona/modules/a-executor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-module-a-executor",
-  "version": "5.1.5",
+  "version": "5.1.6",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "keywords": [

package/vona/src/suite-vendor/a-vona/modules/a-executor/src/service/executor.ts

@@ -72,7 +72,10 @@ export class ServiceExecutor extends BeanBase {
           }
         }
       },
-      { innerAccess: options?.innerAccess, extraData: options?.extraData },
+      {
+        innerAccess: options?.innerAccess,
+        extraData: options?.extraData,
+      },
     );
   }
 

package/vona/src/suite-vendor/a-vona/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-suite-a-vona",
-  "version": "5.1.32",
+  "version": "5.1.33",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "author": "",

package/zova/src/suite/a-demo/modules/demo-basic/src/routes.ts

@@ -11,24 +11,26 @@ import { ZPageToolOne } from './.metadata/page/toolOne.js';
 import { ZPageToolTwo } from './.metadata/page/toolTwo.js';
 
 export const routes: IModuleRoute[] = [
-  { path: 'state', component: ZPageState },
-  { path: 'component', component: ZPageComponent },
-  { path: 'locale', component: ZPageLocale },
-  { path: 'style', component: ZPageStyle },
-  { path: 'routeQuery', component: ZPageRouteQuery },
+  { path: 'state', component: ZPageState, meta: { requiresAuth: false } },
+  { path: 'component', component: ZPageComponent, meta: { requiresAuth: false } },
+  { path: 'locale', component: ZPageLocale, meta: { requiresAuth: false } },
+  { path: 'style', component: ZPageStyle, meta: { requiresAuth: false } },
+  { path: 'routeQuery', component: ZPageRouteQuery, meta: { requiresAuth: false } },
   {
     name: 'routeParams',
     path: 'routeParams/:id?',
     component: ZPageRouteParams,
     meta: {
       componentKeyMode: 'nameOnly',
+      requiresAuth: false,
     },
   },
-  { path: 'routeQueryB', component: ZPageRouteQueryB },
+  { path: 'routeQueryB', component: ZPageRouteQueryB, meta: { requiresAuth: false } },
   {
     name: 'toolOne',
     path: 'toolOne/:id?',
     component: ZPageToolOne,
+    meta: { requiresAuth: false },
   },
   {
     name: 'toolTwo',

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

@@ -9,7 +9,7 @@ import { TypeMenuItem, TypeMenuTree } from '../../.metadata/index.js';
 @Render()
 export class RenderMenu extends BeanRenderBase {
   _renderMenuItem(item: TypeMenuItem) {
-    const titleLocale = this.$text(item.title ?? '');
+    const titleLocale = item.title ?? '';
     if (item.folder) {
       return (
         <li>

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

@@ -29,7 +29,7 @@ export class RenderTabs extends BeanRenderBase {
     const $$modelTabs = this.$$modelTabs;
     const { tabKey, info } = tab;
     const className = tabKey === $$modelTabs.tabKeyCurrent ? 'tab-active text-primary' : '';
-    const titleLocale = this.$text(info?.title || '');
+    const titleLocale = info?.title || '';
     const tabIcon = this.getTabIcon(tab);
     return (
       <a

package/zova/src/suite/a-home/modules/home-layoutadmin/src/model/menu.ts

@@ -28,19 +28,10 @@ export class ModelMenu extends BeanModelBase {
     // event
     if (process.env.CLIENT && this.sys.config.ssr.hmr) {
       this._eventSsrHmrReload = this.sys.meta.event.on('a-ssrhmr:reload', async (_data, next) => {
-        await this.$refetchQueries({ queryKey: ['retrieveMenus'] });
+        await this._refetchRetrieveMenus();
         return next();
       });
     }
-    // locale
-    this.$watch(
-      () => {
-        return this.app.meta.locale.current;
-      },
-      async () => {
-        await this.$refetchQueries({ queryKey: ['retrieveMenus'] });
-      },
-    );
   }
 
   protected __dispose__() {
@@ -51,7 +42,7 @@ export class ModelMenu extends BeanModelBase {
 
   retrieveMenus() {
     return this.$useStateData({
-      queryKey: ['retrieveMenus'],
+      queryKey: this._getQueryKeyRetrieveMenus(),
       queryFn: async () => {
         const data = await this.$api.homeBaseMenu.retrieveMenus({
           params: { publicPath: this.sys.env.APP_PUBLIC_PATH },
@@ -65,7 +56,7 @@ export class ModelMenu extends BeanModelBase {
             return item;
           })
           ?.filter(item => {
-            return !item.external || this.$router.checkPathValid(item.link);
+            return item.external || !item.link || this.$router.checkPathValid(item.link);
           });
         return { ...data, menus };
       },
@@ -75,12 +66,27 @@ export class ModelMenu extends BeanModelBase {
   findMenuItem(search: { name?: string; link?: string }): ApiSchemaAMenuDtoMenuItem | undefined {
     const menus = this.retrieveMenus().data;
     if (!menus || !menus.menus) return;
-    return menus.menus.find(
-      item => (item.name && search.name && item.name === search.name) || item.link === search.link,
-    );
+    const hasName = search.name !== undefined;
+    const hasLink = search.link !== undefined;
+    if (!hasName && !hasLink) return;
+    return menus.menus.find(item => {
+      return (hasName && item.name === search.name) || (hasLink && item.link === search.link);
+    });
+  }
+
+  private _refetchRetrieveMenus(): Promise<void> {
+    return this.$refetchQueries({ queryKey: this._getQueryKeyRetrieveMenus() });
+  }
+
+  private _getQueryKeyRetrieveMenus(): [string, string | undefined, string | undefined] {
+    return ['retrieveMenus', this.sys.env.APP_PUBLIC_PATH, this.app.meta.locale.current];
   }
 
-  private _prepareMenuTree(menus: ApiSchemaAMenuDtoMenus, groupName?: string): TypeMenuTree {
+  private _prepareMenuTree(
+    menus: ApiSchemaAMenuDtoMenus,
+    groupName?: string,
+    groupNames?: Set<string>,
+  ): TypeMenuTree {
     let children: TypeMenuItem[] = [];
     if (menus.menus) {
       children = children.concat(
@@ -99,15 +105,23 @@ export class ModelMenu extends BeanModelBase {
       const groups = menus.groups
         .filter(
           item =>
-            item.group === groupName ||
-            (Array.isArray(item.group) && item.group.includes(groupName!)),
+            !groupNames?.has(item.name) &&
+            (item.group === groupName ||
+              (Array.isArray(item.group) && item.group.includes(groupName!))),
         )
         .map(menuGroup => {
+          const children = this._prepareMenuTree(
+            menus,
+            menuGroup.name,
+            new Set([...(groupNames || []), menuGroup.name]),
+          );
+          if (children.length === 0) return undefined;
           return Object.assign({}, menuGroup, {
             folder: true,
-            children: this._prepareMenuTree(menus, menuGroup.name),
+            children,
           });
-        });
+        })
+        .filter(group => !!group);
       children = children.concat(groups);
     }
     return children.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));

package/zova/src/suite/a-home/modules/home-layoutweb/src/component/layoutWeb/render.tabs.tsx

@@ -20,14 +20,13 @@ export class RenderTabs extends BeanRenderBase {
       </div>
     );
     if (!$$modelTabs.cache) return domWrapper;
-
     return <ClientOnly>{domWrapper}</ClientOnly>;
   }
 
   private _renderTab(tab: RouteTab): VNode {
     const $$modelTabs = this.$$modelTabs;
     const { tabKey, info } = tab;
-    const titleLocale = this.$text(info?.title || '');
+    const titleLocale = info?.title || '';
     const tabIcon = this.getTabIcon(tab);
     if (info.folder) {
       return (
@@ -39,16 +38,18 @@ export class RenderTabs extends BeanRenderBase {
             </summary>
             <ClientOnly>
               <ul class="bg-base-100 rounded-t-none p-2 w-48">
-                {info.children?.map(item => (
-                  <li key={item.link} onClick={closeNearestDetails}>
-                    <ZItemLink
-                      title={item.title!}
-                      icon={(item.icon as any) ?? $iconName('::none')}
-                      href={item.link && item.external ? item.link : undefined}
-                      to={item.link && !item.external ? item.link : undefined}
-                    ></ZItemLink>
-                  </li>
-                ))}
+                {info.children
+                  ?.filter(item => !item.folder)
+                  .map(item => (
+                    <li key={item.link} onClick={closeNearestDetails}>
+                      <ZItemLink
+                        title={item.title!}
+                        icon={(item.icon as any) ?? $iconName('::none')}
+                        href={item.link && item.external ? item.link : undefined}
+                        to={item.link && !item.external ? item.link : undefined}
+                      ></ZItemLink>
+                    </li>
+                  ))}
               </ul>
             </ClientOnly>
           </details>

package/zova/src/suite/a-home/modules/home-layoutweb/src/model/menu.ts

@@ -28,19 +28,10 @@ export class ModelMenu extends BeanModelBase {
     // event
     if (process.env.CLIENT && this.sys.config.ssr.hmr) {
       this._eventSsrHmrReload = this.sys.meta.event.on('a-ssrhmr:reload', async (_data, next) => {
-        await this.$refetchQueries({ queryKey: ['retrieveMenus'] });
+        await this._refetchRetrieveMenus();
         return next();
       });
     }
-    // locale
-    this.$watch(
-      () => {
-        return this.app.meta.locale.current;
-      },
-      async () => {
-        await this.$refetchQueries({ queryKey: ['retrieveMenus'] });
-      },
-    );
   }
 
   protected __dispose__() {
@@ -51,7 +42,7 @@ export class ModelMenu extends BeanModelBase {
 
   retrieveMenus() {
     return this.$useStateData({
-      queryKey: ['retrieveMenus'],
+      queryKey: this._getQueryKeyRetrieveMenus(),
       queryFn: async () => {
         const data = await this.$api.homeBaseMenu.retrieveMenus({
           params: { publicPath: this.sys.env.APP_PUBLIC_PATH },
@@ -65,7 +56,7 @@ export class ModelMenu extends BeanModelBase {
             return item;
           })
           ?.filter(item => {
-            return !item.external || this.$router.checkPathValid(item.link);
+            return item.external || !item.link || this.$router.checkPathValid(item.link);
           });
         return { ...data, menus };
       },
@@ -75,12 +66,27 @@ export class ModelMenu extends BeanModelBase {
   findMenuItem(search: { name?: string; link?: string }): ApiSchemaAMenuDtoMenuItem | undefined {
     const menus = this.retrieveMenus().data;
     if (!menus || !menus.menus) return;
-    return menus.menus.find(
-      item => (item.name && search.name && item.name === search.name) || item.link === search.link,
-    );
+    const hasName = search.name !== undefined;
+    const hasLink = search.link !== undefined;
+    if (!hasName && !hasLink) return;
+    return menus.menus.find(item => {
+      return (hasName && item.name === search.name) || (hasLink && item.link === search.link);
+    });
+  }
+
+  private _refetchRetrieveMenus(): Promise<void> {
+    return this.$refetchQueries({ queryKey: this._getQueryKeyRetrieveMenus() });
+  }
+
+  private _getQueryKeyRetrieveMenus(): [string, string | undefined, string | undefined] {
+    return ['retrieveMenus', this.sys.env.APP_PUBLIC_PATH, this.app.meta.locale.current];
   }
 
-  private _prepareMenuTree(menus: ApiSchemaAMenuDtoMenus, groupName?: string): TypeMenuTree {
+  private _prepareMenuTree(
+    menus: ApiSchemaAMenuDtoMenus,
+    groupName?: string,
+    groupNames?: Set<string>,
+  ): TypeMenuTree {
     let children: TypeMenuItem[] = [];
     if (menus.menus) {
       children = children.concat(
@@ -99,15 +105,23 @@ export class ModelMenu extends BeanModelBase {
       const groups = menus.groups
         .filter(
           item =>
-            item.group === groupName ||
-            (Array.isArray(item.group) && item.group.includes(groupName!)),
+            !groupNames?.has(item.name) &&
+            (item.group === groupName ||
+              (Array.isArray(item.group) && item.group.includes(groupName!))),
         )
         .map(menuGroup => {
+          const children = this._prepareMenuTree(
+            menus,
+            menuGroup.name,
+            new Set([...(groupNames || []), menuGroup.name]),
+          );
+          if (children.length === 0) return undefined;
           return Object.assign({}, menuGroup, {
             folder: true,
-            children: this._prepareMenuTree(menus, menuGroup.name),
+            children,
           });
-        });
+        })
+        .filter(group => !!group);
       children = children.concat(groups);
     }
     return children.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));