@skyroc/scripts 2.5.0

package/templates/admin-shell/i18n/langs/zh-cn/theme.json

@@ -0,0 +1,173 @@
+{
+  "themeDrawerTitle": "主题配置",
+  "tabs": {
+    "appearance": "外观",
+    "layout": "布局",
+    "general": "通用",
+    "preset": "预设"
+  },
+  "appearance": {
+    "themeSchema": {
+      "title": "主题模式",
+      "light": "亮色模式",
+      "dark": "暗黑模式",
+      "auto": "跟随系统"
+    },
+    "isOnlyExpandCurrentParentMenu": "仅展开当前父菜单",
+    "grayscale": "灰色模式",
+    "colourWeakness": "色弱模式",
+    "themeColor": {
+      "title": "主题颜色",
+      "primary": "主色",
+      "info": "信息色",
+      "success": "成功色",
+      "warning": "警告色",
+      "error": "错误色",
+      "followPrimary": "跟随主色"
+    },
+    "themeBase": {
+      "title": "基础配置",
+      "radius": "圆角",
+      "textSize": "字体大小"
+    },
+    "recommendColor": "应用推荐算法的颜色",
+    "recommendColorDesc": "推荐颜色的算法参照",
+    "preset": {
+      "title": "主题预设",
+      "apply": "应用",
+      "applySuccess": "预设应用成功",
+      "default": {
+        "name": "默认预设",
+        "desc": "Soybean 默认主题预设"
+      },
+      "dark": {
+        "name": "暗色预设",
+        "desc": "适用于夜间使用的暗色主题预设"
+      },
+      "compact": {
+        "name": "紧凑型",
+        "desc": "适用于小屏幕的紧凑布局预设"
+      },
+      "azir": {
+        "name": "Azir的预设",
+        "desc": "是 Azir 比较喜欢的莫兰迪色系冷淡风"
+      },
+      "skyroc": {
+        "name": "Skyroc预设",
+        "desc": "专业主题配色，灵感来自 Skyroc 设计，充满活力的靛蓝主色"
+      },
+      "shadcn": {
+        "name": "Shadcn预设",
+        "desc": "现代优雅的主题，灵感来自 shadcn/ui 设计系统，采用中性色调"
+      }
+    }
+  },
+  "layout": {
+    "layoutMode": {
+      "title": "布局模式",
+      "vertical": "左侧菜单模式",
+      "vertical-mix": "左侧菜单混合模式",
+      "vertical-hybrid-header-first": "左侧混合-顶部优先",
+      "horizontal": "顶部菜单模式",
+      "top-hybrid-sidebar-first": "顶部混合-侧边优先",
+      "top-hybrid-header-first": "顶部混合-顶部优先",
+      "vertical_detail": "左侧菜单布局，菜单在左，内容在右。",
+      "vertical-mix_detail": "左侧双菜单布局，一级菜单在左侧深色区域，二级菜单在左侧浅色区域。",
+      "vertical-hybrid-header-first_detail": "左侧混合布局，一级菜单在顶部，二级菜单在左侧深色区域，三级菜单在左侧浅色区域。",
+      "horizontal_detail": "顶部菜单布局，菜单在顶部，内容在下方。",
+      "top-hybrid-sidebar-first_detail": "顶部混合布局，一级菜单在左侧，二级菜单在顶部。",
+      "top-hybrid-header-first_detail": "顶部混合布局，一级菜单在顶部，二级菜单在左侧。"
+    },
+    "tab": {
+      "title": "标签栏设置",
+      "visible": "显示标签栏",
+      "cache": "标签栏信息缓存",
+      "cacheTip": "一键开启/关闭全局 keepalive",
+      "height": "标签栏高度",
+      "mode": {
+        "title": "标签栏风格",
+        "slider": "滑块风格",
+        "chrome": "谷歌风格",
+        "button": "按钮风格"
+      },
+      "closeByMiddleClick": "鼠标中键关闭标签页",
+      "closeByMiddleClickTip": "启用后可以使用鼠标中键点击标签页进行关闭"
+    },
+    "header": {
+      "title": "头部设置",
+      "height": "头部高度",
+      "breadcrumb": {
+        "visible": "显示面包屑",
+        "showIcon": "显示面包屑图标"
+      }
+    },
+    "sider": {
+      "title": "侧边栏设置",
+      "inverted": "深色侧边栏",
+      "width": "侧边栏宽度",
+      "collapsedWidth": "侧边栏折叠宽度",
+      "mixWidth": "混合布局侧边栏宽度",
+      "mixCollapsedWidth": "混合布局侧边栏折叠宽度",
+      "mixChildMenuWidth": "混合布局子菜单宽度",
+      "autoSelectFirstMenu": "自动选择第一个子菜单",
+      "autoSelectFirstMenuTip": "点击一级菜单时，自动选择并导航到第一个子菜单的最深层级"
+    },
+    "footer": {
+      "title": "底部设置",
+      "visible": "显示底部",
+      "fixed": "固定底部",
+      "height": "底部高度",
+      "right": "底部居右"
+    },
+    "content": {
+      "title": "内容区域设置",
+      "scrollMode": {
+        "title": "滚动模式",
+        "tip": "主题滚动仅 main 部分滚动，外层滚动可携带头部底部一起滚动",
+        "wrapper": "外层滚动",
+        "content": "主体滚动"
+      },
+      "page": {
+        "animate": "页面切换动画",
+        "mode": {
+          "title": "页面切换动画类型",
+          "fade-slide": "滑动",
+          "fade": "淡入淡出",
+          "fade-bottom": "底部消退",
+          "fade-scale": "缩放消退",
+          "zoom-fade": "渐变",
+          "zoom-out": "闪现",
+          "none": "无"
+        }
+      },
+      "fixedHeaderAndTab": "固定头部和标签栏"
+    }
+  },
+  "general": {
+    "title": "通用设置",
+    "watermark": {
+      "title": "水印设置",
+      "visible": "显示全屏水印",
+      "text": "自定义水印文本",
+      "enableUserName": "启用用户名水印",
+      "enableCustomText": "启用自定义水印文本",
+      "enableTime": "显示当前时间",
+      "timeFormat": "时间格式"
+    },
+    "multilingual": {
+      "title": "多语言设置",
+      "visible": "显示多语言按钮"
+    },
+    "globalSearch": {
+      "title": "全局搜索设置",
+      "visible": "显示全局搜索按钮"
+    }
+  },
+  "configOperation": {
+    "copyConfig": "复制配置",
+    "copyFailedMsg": "复制失败",
+    "copySuccessMsg": "复制成功，请替换 src/theme/settings.ts 中的变量 themeSettings",
+    "resetConfig": "重置配置",
+    "resetSuccessMsg": "重置成功"
+  }
+}

package/templates/admin-shell/i18n/types/i18n.ts

@@ -0,0 +1,29 @@
+import type { AdminLocaleMessages } from '../langs';
+
+type DatatableMessages = AdminLocaleMessages['datatable'];
+type FormMessages = AdminLocaleMessages['form'];
+type IconMessages = AdminLocaleMessages['icon'];
+type NotificationMessages = AdminLocaleMessages['notification'];
+type PageMessages = AdminLocaleMessages['page'];
+type RequestMessages = AdminLocaleMessages['request'];
+type SystemMessages = AdminLocaleMessages['system'];
+type ThemeMessages = AdminLocaleMessages['theme'];
+
+declare global {
+  namespace I18n {
+    interface LocaleMessages {
+      notification: Notification;
+    }
+
+    interface Datatable extends DatatableMessages {}
+    interface Form extends FormMessages {}
+    interface Icon extends IconMessages {}
+    interface Notification extends NotificationMessages {}
+    interface Page extends PageMessages {}
+    interface Request extends RequestMessages {}
+    interface System extends SystemMessages {}
+    interface Theme extends ThemeMessages {}
+  }
+}
+
+

package/templates/admin-shell/i18n/types.ts

@@ -0,0 +1,53 @@
+import type { InitOptions, Resource } from 'i18next';
+
+/** Supported language code. */
+export type LangType = 'en-US' | 'zh-CN';
+
+/** Display option for a language switcher. */
+export interface LangOption<TLang extends string = LangType> {
+  /** Menu key used by UI components and locale switching. */
+  key: TLang;
+  /** Human readable language label. */
+  label: string;
+}
+
+/** Runtime language configuration. */
+export interface LangConfig<TLang extends string = LangType> {
+  /** Initial language used when storage does not contain a valid value. */
+  defaultLang: TLang;
+  /** Language used when a translation key is missing. */
+  fallbackLang: TLang;
+  /** Languages exposed to language switch UI. */
+  langOptions: LangOption<TLang>[];
+}
+
+/** Storage adapter owned by the consuming app. */
+export interface LocaleStorage<TLang extends string = LangType> {
+  /** Read the persisted locale. */
+  getLocale: () => TLang | null;
+  /** Persist the selected locale. */
+  setLocale: (lang: TLang) => void;
+}
+
+/** Callback fired after the active locale changes. */
+export type LocaleChangeHandler<TLang extends string = LangType> = (lang: TLang) => void | Promise<void>;
+
+/** i18n setup options shared by apps. */
+export interface LocaleSetupOptions<TLang extends string = LangType> {
+  /** Initial language, usually resolved from app storage. */
+  defaultLocale?: TLang;
+  /** Fallback language for i18next. */
+  fallbackLocale?: TLang;
+  /** Extra i18next init options. */
+  i18nextOptions?: Omit<InitOptions, 'fallbackLng' | 'lng' | 'resources'>;
+  /** Language options exposed to shared hooks. */
+  localeOptions?: LangOption<TLang>[];
+  /** Whether missing translation keys should be logged. */
+  missingWarn?: boolean;
+  /** Side effects that must run after a locale changes. */
+  onLocaleChange?: LocaleChangeHandler<TLang>;
+  /** Preloaded i18next resources. */
+  resources?: Resource;
+  /** App-owned persistence adapter. */
+  storage?: LocaleStorage<TLang>;
+}

package/templates/admin-shell/i18n/utils/helpers.ts

@@ -0,0 +1,18 @@
+import { getStoredLocale, saveLocale } from '../i18n';
+import type { LangOption, LangType } from '../types';
+
+/** Get language from storage */
+export function getLangFromStorage(): LangType | null {
+  return getStoredLocale();
+}
+
+/** Save language to storage */
+export function saveLangToStorage(lang: LangType): void {
+  saveLocale(lang);
+}
+
+/** Get language label */
+export function getLangLabel(lang: LangType, options: LangOption[]): string {
+  const option = options.find(opt => opt.key === lang);
+  return option?.label || lang;
+}

package/templates/admin-shell/layouts/AdminLayout.tsx

@@ -0,0 +1,161 @@
+import type { LayoutMode } from './materials';
+import { AdminLayout as AdminLayoutComponent, LAYOUT_SCROLL_EL_ID } from './materials';
+import { useSettingsTheme } from '@shell/theme';
+import { Suspense, lazy } from 'react';
+
+import {
+  LAYOUT_MODE_HORIZONTAL,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST,
+  LAYOUT_MODE_VERTICAL,
+  LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_VERTICAL_MIX,
+  VERTICAL_LAYOUT_MODES
+} from './constant';
+import type { AdminLayoutSlots } from './context';
+import { AdminLayoutProvider, useAdminLayoutContext } from './context';
+import AdminHeader from './modules/admin-header/AdminHeader';
+import AdminMenu from './modules/admin-menu/AdminMenu';
+import AdminTab from './modules/admin-tab/AdminTab';
+import GlobalContent from './modules/AdminContent';
+import GlobalSider from './modules/AdminSider';
+import { getDefaultMenuCategoryKey } from './setup';
+import { useAdminMenus } from './state/menus/use-admin-menus';
+import { useAdminState } from './state/use-admin-state';
+
+const ThemeDrawer = lazy(() => import('./modules/theme-drawer/ThemeDrawer'));
+
+const AdminEffect = lazy(() => import('./state/AdminEffect'));
+
+export interface AdminLayoutProps extends AdminLayoutSlots {
+  /** 当前布局使用的菜单分类。 */
+  categoryKey?: string;
+}
+
+const AdminLayoutContent = () => {
+  const { contentXScrollable, fullContent, isMobile, mixSiderFixed, siderCollapse, toggleSiderCollapse } =
+    useAdminState();
+  const { footer: footerSlot } = useAdminLayoutContext();
+
+  const { fixedHeaderAndTab, footer: themeFooter, header, layout, sider, tab } = useSettingsTheme();
+
+  const { childLevelMenus, isActiveFirstLevelMenuHasChildren, secondLevelMenus } = useAdminMenus();
+
+  const layoutMode = VERTICAL_LAYOUT_MODES.includes(layout.mode) ? LAYOUT_MODE_VERTICAL : LAYOUT_MODE_HORIZONTAL;
+
+  const isTopHybridHeaderFirst = layout.mode === LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST;
+
+  const isVerticalHybridHeaderFirst = layout.mode === LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST;
+
+  const isTopHybridSidebarFirst = layout.mode === LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST;
+
+  const isVerticalMix = layout.mode === LAYOUT_MODE_VERTICAL_MIX;
+
+  const siderVisible = layout.mode !== LAYOUT_MODE_HORIZONTAL;
+
+  const siderWidth = getSiderAndCollapsedWidth(false);
+
+  const siderCollapsedWidth = getSiderAndCollapsedWidth(true);
+
+  function getSiderAndCollapsedWidth(isCollapsed: boolean) {
+    const { collapsedWidth, mixChildMenuWidth, mixCollapsedWidth, mixWidth: themeMixWidth, width: themeWidth } = sider;
+
+    const width = isCollapsed ? collapsedWidth : themeWidth;
+    const mixWidth = isCollapsed ? mixCollapsedWidth : themeMixWidth;
+
+    if (isTopHybridHeaderFirst) {
+      return isActiveFirstLevelMenuHasChildren ? width : 0;
+    }
+
+    if (isVerticalHybridHeaderFirst && !isActiveFirstLevelMenuHasChildren) {
+      return 0;
+    }
+
+    const isMixMode = isVerticalMix || isTopHybridSidebarFirst || isVerticalHybridHeaderFirst;
+    let finalWidth = isMixMode ? mixWidth : width;
+
+    if (isVerticalMix && mixSiderFixed && secondLevelMenus.length) {
+      finalWidth += mixChildMenuWidth;
+    }
+
+    if (isVerticalHybridHeaderFirst && mixSiderFixed && childLevelMenus.length) {
+      finalWidth += mixChildMenuWidth;
+    }
+
+    return finalWidth;
+  }
+
+  return (
+    <AdminLayoutComponent
+      contentClass={contentXScrollable ? 'overflow-x-hidden' : ''}
+      fixedFooter={themeFooter.fixed}
+      fixedTop={fixedHeaderAndTab}
+      Footer={footerSlot}
+      footerHeight={themeFooter.height}
+      footerVisible={Boolean(footerSlot) && themeFooter.visible}
+      fullContent={fullContent}
+      Header={<AdminHeader />}
+      headerHeight={header.height}
+      isMobile={isMobile}
+      mode={layoutMode as LayoutMode}
+      rightFooter={themeFooter.right}
+      scrollElId={LAYOUT_SCROLL_EL_ID}
+      scrollMode={layout.scrollMode}
+      Sider={<GlobalSider />}
+      siderCollapse={siderCollapse}
+      siderCollapsedWidth={siderCollapsedWidth}
+      siderVisible={siderVisible}
+      siderWidth={siderWidth}
+      Tab={<AdminTab />}
+      tabHeight={tab.height}
+      tabVisible={tab.visible}
+      updateSiderCollapse={toggleSiderCollapse}
+    >
+      <GlobalContent />
+
+      <AdminMenu />
+
+      <Suspense fallback={null}>
+        <ThemeDrawer />
+      </Suspense>
+
+      <Suspense fallback={null}>
+        <AdminEffect />
+      </Suspense>
+    </AdminLayoutComponent>
+  );
+};
+
+const AdminLayout = (props: AdminLayoutProps) => {
+  const {
+    categoryKey = getDefaultMenuCategoryKey(),
+    content,
+    footer,
+    headerLeftActions,
+    headerMiddleActions,
+    headerRightActions,
+    logo,
+    logoComponent,
+    logoTitle,
+    logoTo
+  } = props;
+
+  return (
+    <AdminLayoutProvider
+      categoryKey={categoryKey}
+      content={content}
+      footer={footer}
+      headerLeftActions={headerLeftActions}
+      headerMiddleActions={headerMiddleActions}
+      headerRightActions={headerRightActions}
+      logo={logo}
+      logoComponent={logoComponent}
+      logoTitle={logoTitle}
+      logoTo={logoTo}
+    >
+      <AdminLayoutContent />
+    </AdminLayoutProvider>
+  );
+};
+
+export default AdminLayout;

package/templates/admin-shell/layouts/constant.ts

@@ -0,0 +1,56 @@
+export const LAYOUT_MODE = {
+  HORIZONTAL: 'horizontal',
+  TOP_HYBRID_HEADER_FIRST: 'top-hybrid-header-first',
+  TOP_HYBRID_SIDEBAR_FIRST: 'top-hybrid-sidebar-first',
+  VERTICAL: 'vertical',
+  VERTICAL_HYBRID_HEADER_FIRST: 'vertical-hybrid-header-first',
+  VERTICAL_MIX: 'vertical-mix'
+} as const satisfies Record<string, UnionKey.ThemeLayoutMode>;
+
+export const LAYOUT_MODE_VERTICAL = LAYOUT_MODE.VERTICAL;
+
+export const LAYOUT_MODE_HORIZONTAL = LAYOUT_MODE.HORIZONTAL;
+
+export const LAYOUT_MODE_VERTICAL_MIX = LAYOUT_MODE.VERTICAL_MIX;
+
+export const LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST = LAYOUT_MODE.VERTICAL_HYBRID_HEADER_FIRST;
+
+export const LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST = LAYOUT_MODE.TOP_HYBRID_SIDEBAR_FIRST;
+
+export const LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST = LAYOUT_MODE.TOP_HYBRID_HEADER_FIRST;
+
+export const VERTICAL_LAYOUT_MODES: UnionKey.ThemeLayoutMode[] = [
+  LAYOUT_MODE_VERTICAL,
+  LAYOUT_MODE_VERTICAL_MIX,
+  LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST
+];
+
+export const TOP_HYBRID_LAYOUT_MODES: UnionKey.ThemeLayoutMode[] = [
+  LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST
+];
+
+export const HYBRID_LAYOUT_MODES: UnionKey.ThemeLayoutMode[] = [
+  LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST
+];
+
+export const MIX_OR_HYBRID_LAYOUT_MODES: UnionKey.ThemeLayoutMode[] = [
+  LAYOUT_MODE_VERTICAL_MIX,
+  ...HYBRID_LAYOUT_MODES
+];
+
+export const FIRST_LEVEL_LAYOUT_MODES: UnionKey.ThemeLayoutMode[] = [
+  LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST
+];
+
+export const GLOBAL_HEADER_MENU_ID = '__GLOBAL_HEADER_MENU__';
+
+export const GLOBAL_HEADER_MENU_SELECTOR = `#${GLOBAL_HEADER_MENU_ID}`;
+
+export const GLOBAL_SIDER_MENU_ID = '__GLOBAL_SIDER_MENU__';
+
+export const GLOBAL_SIDER_MENU_SELECTOR = `#${GLOBAL_SIDER_MENU_ID}`;

package/templates/admin-shell/layouts/context.tsx

@@ -0,0 +1,101 @@
+import { createContext, useContext } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { getDefaultMenuCategoryKey } from './setup';
+
+export type AdminLayoutLogoComponent = ((style: CSSProperties) => ReactNode) | ReactNode;
+
+export interface AdminLayoutLogoProps {
+  /** Logo wrapper class supplied by each layout position. */
+  className?: string;
+  /** Brand mark rendered before the title. */
+  logo?: ReactNode;
+  /** Whether the title should be visible in the current layout position. */
+  showTitle?: boolean;
+  /** Logo wrapper style supplied by each layout position. */
+  style?: CSSProperties;
+  /** Brand title rendered by the default logo component. */
+  title?: ReactNode;
+  /** Route path used when clicking the logo. */
+  to?: Router.RoutePath;
+}
+
+export interface AdminLayoutSlots {
+  /** 主内容区域，默认使用 TanStack Router 的 Outlet。 */
+  content?: ReactNode;
+  /** 页脚区域。 */
+  footer?: ReactNode;
+  /** 头部操作区左侧插槽，位于搜索和全屏按钮之间。 */
+  headerLeftActions?: ReactNode;
+  /** 头部操作区中间插槽，位于语言切换和主题按钮之间。 */
+  headerMiddleActions?: ReactNode;
+  /** 头部操作区右侧插槽，位于所有内置操作之后。 */
+  headerRightActions?: ReactNode;
+  /** 品牌图标，由默认 Logo 组件渲染。 */
+  logo?: ReactNode;
+  /** 自定义完整 Logo 插槽，可直接传节点或通过布局样式渲染。 */
+  logoComponent?: AdminLayoutLogoComponent;
+  /** 品牌标题，由默认 Logo 组件渲染。 */
+  logoTitle?: ReactNode;
+  /** 点击 Logo 时跳转的路径，默认使用布局配置的 defaultHome。 */
+  logoTo?: Router.RoutePath;
+}
+
+export interface AdminLayoutContextValue extends AdminLayoutSlots {
+  /** 当前布局使用的菜单分类。 */
+  categoryKey: string;
+}
+
+export interface AdminLayoutProviderProps extends AdminLayoutContextValue {
+  /** 布局子节点。 */
+  children: ReactNode;
+}
+
+const AdminLayoutContext = createContext<AdminLayoutContextValue | null>(null);
+
+export const AdminLayoutProvider = (props: AdminLayoutProviderProps) => {
+  const {
+    categoryKey,
+    children,
+    content,
+    footer,
+    headerLeftActions,
+    headerMiddleActions,
+    headerRightActions,
+    logo,
+    logoComponent,
+    logoTitle,
+    logoTo
+  } = props;
+
+  return (
+    <AdminLayoutContext
+      value={{
+        categoryKey,
+        content,
+        footer,
+        headerLeftActions,
+        headerMiddleActions,
+        headerRightActions,
+        logo,
+        logoComponent,
+        logoTitle,
+        logoTo
+      }}
+    >
+      {children}
+    </AdminLayoutContext>
+  );
+};
+
+export function useAdminLayoutContext() {
+  const context = useContext(AdminLayoutContext);
+
+  if (context) {
+    return context;
+  }
+
+  return {
+    categoryKey: getDefaultMenuCategoryKey()
+  };
+}

package/templates/admin-shell/layouts/features/menus/MenuBadge.tsx

@@ -0,0 +1,76 @@
+import { Badge as ABadge } from 'antd';
+
+import { useAdminMenuBadges } from '../../state/menus/use-admin-menu-badges';
+
+interface MenuBadgeProps {
+  /** Standard badge configuration from the route menu metadata. */
+  badge: Router.MenuBadge;
+}
+
+function getBadgeValue(badge: Router.MenuBadge, badgeValues: Record<string, Router.MenuBadgeValue | undefined>) {
+  if (!badge.valueKey) {
+    return badge.value;
+  }
+
+  if (Object.hasOwn(badgeValues, badge.valueKey)) {
+    return badgeValues[badge.valueKey];
+  }
+
+  return badge.value;
+}
+
+function shouldRenderValue(value: Router.MenuBadgeValue | undefined, showZero?: boolean) {
+  if (value === 0) return Boolean(showZero);
+
+  return value !== undefined && value !== null && value !== '';
+}
+
+function getBadgeColor(variant: Router.MenuBadgeVariant) {
+  switch (variant) {
+    case 'error':
+      return 'red';
+    case 'info':
+      return 'blue';
+    case 'primary':
+      return 'blue';
+    case 'success':
+      return 'green';
+    case 'warning':
+      return 'orange';
+    default:
+      return undefined;
+  }
+}
+
+const MenuBadge = (props: MenuBadgeProps) => {
+  const { badge } = props;
+
+  const { badgeValues } = useAdminMenuBadges();
+  const { showZero = false, type = 'normal', variant = 'default' } = badge;
+  const color = getBadgeColor(variant);
+
+  if (type === 'dot') {
+    return (
+      <ABadge
+        color={color}
+        data-menu-badge="dot"
+        dot
+      />
+    );
+  }
+
+  const value = getBadgeValue(badge, badgeValues);
+
+  if (!shouldRenderValue(value, showZero)) return null;
+
+  return (
+    <ABadge
+      color={color}
+      count={value}
+      data-menu-badge="normal"
+      showZero={showZero}
+    />
+  );
+};
+
+export default MenuBadge;