@choubo/kerthus-web-admin-shell

Shared admin navigation and application shell for Kerthus and Evolis. The host provides current route, route-change subscription, menu settings, navigation, locale, and brand data through explicit ports. Host API methods, business views, and FableX modules remain in their applications.

Install createAdminMenuPlugin after the Vue runtime. BasicMenu and SimpleMenu consume that port; AppSearch also calls its optional getItems method. AppProvider reports mobile breakpoint changes through onMobileChange, leaving menu-state updates with the host. Import @choubo/kerthus-web-admin-shell/style.css once in the host.

AdminLayout supplies a responsive sidebar, header, content, tabs, and footer frame. mode="sidebar" | "top" | "mixed" selects the navigation arrangement; mixed mode accepts topMenus for the top row and menus for the sidebar. fullContent hides the navigation chrome, while resizableSidebar emits update:sidebarWidth for pointer or keyboard resizing. It renders BasicMenu by default and accepts slots for host navigation, branding, actions, and application content. Menu clicks use the host navigation port and emit menuClick; collapsed state is controlled through v-model:collapsed.

ClassicAdminLayout composes the Kerthus classic header, dark sidebar, 40px tabs, settings drawer, and content frame. Its defaults follow the old Kerthus project settings: 48px white header, mixed split navigation, 240px #212121 sidebar, and #f4f7f9 content background. The host can choose sidebar, top-menu, mix, or mix-sidebar; a persisted setting can override the defaults. Pass the host's CachePort as settingsCache and a per-user/tenant settingsKey if preferences must survive sign-in or tenant changes. Load ant-design-vue/dist/antd.css before @choubo/kerthus-web-admin-shell/style.css in the host entry. The Classic shell uses the legacy nested menu, four layout modes, tab mask and context actions, drag resizing, appearance and transition settings, responsive navigation, scroll-to-top, and an optional auto-lock event.

The host supplies menus, tabs, activeTab, optional breadcrumbs, and headerPorts for applications, notifications, errors, help, user actions, and locales. Use the brand, railBrand, headerActions, navigation, tabs, footer, agentHost, lockScreen, sessionTimeout, and default slots for host-specific UI. Listen to tabSelect, tabClose, tabRefresh, tabCloseAction, and tabReorder to update the host's tab store; menuClick reports navigation, and settingsChange reports the complete settings value. The runtime navigation port performs menu and tab navigation. The host handles lock and optional clearState events. The shell does not fetch applications or notifications or mutate user accounts. See the integration checklist and run yarn demo:classic from the repository for a local visual reference. If the host uses vite-plugin-purge-icons, add the installed admin-shell and vue-ui dist/index.js files as raw content alongside the host source globs. Its default scan skips node_modules, so icons in a production build otherwise render as placeholders. The integration checklist has a Vite configuration example and a production browser check.

AdminTabs displays host supplied tabs with refresh and close actions. closeTabs preserves affixed tabs for close current, left, right, others, and all operations. The host owns tab persistence and refresh behavior.

SettingsPanel and AdminSettingsDrawer render controlled switch, select, number, color, and layout controls. The host supplies section data and handles change and reset events; no application store is imported.

AdminBreadcrumb, AdminIframeView, AdminLoginView, AdminLockView, and AdminExceptionView cover common navigation and public page shells. Login and lock forms emit credentials to the host; the host owns authentication calls, errors, and redirect behavior. AgentAttachmentList, AgentModelSelect, AgentComposer, and AgentApprovalCard accept data and emit actions. Agent session loading, streaming, uploads, and approval execution remain host ports.

AdminUserMenu and AdminNotificationCenter render host supplied header data. AdminAppSwitcher and AdminFullscreenButton supply generic header controls. AdminProfileTabs, AdminProfileForm, AdminPasswordForm, and AdminSecuritySettings expose account UI while the host owns save, upload, password mutation, and logout. The profile form's avatar slot accepts the host-configured CropperAvatar. AdminErrorLogView shows shared runtime error entries, while AdminAboutView renders package metadata and validated external links. Product dashboards and account API methods stay with the host.

adminShellMessages contains the shared en-US and zh-CN labels, and legacyAdminMessages contains generic legacy layout/system messages. Hosts can merge these keys into their localization resources or pass translated component props. The shell stylesheet includes gray and color-weak appearance modes.