@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/modules/admin-header/AdminHeader.tsx

@@ -0,0 +1,132 @@
+import { LangSwitch } from '@shell/i18n';
+import { ThemeSchemaSwitch, useSettingsTheme } from '@shell/theme';
+import { FullScreen } from '@shell/ui/antd';
+import { DarkModeContainer } from '@shell/ui/compose';
+import { useFullscreen } from 'ahooks';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  GLOBAL_HEADER_MENU_ID,
+  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
+} from '../../constant';
+import { useAdminLayoutContext } from '../../context';
+import MenuToggler from '../../state/menus/MenuToggler';
+import { useAdminMenus } from '../../state/menus/use-admin-menus';
+import { useAdminState } from '../../state/use-admin-state';
+import AdminSearch from '../admin-search/AdminSearch';
+import LayoutLogo from '../shared/logo';
+
+import AdminBreadcrumb from './components/Breadcrumb';
+import ThemeButton from './components/ThemeButton';
+
+const GlobalHeader = memo(() => {
+  const { headerLeftActions, headerMiddleActions, headerRightActions, logo, logoComponent, logoTitle, logoTo } =
+    useAdminLayoutContext();
+
+  const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.body);
+
+  const { isActiveFirstLevelMenuHasChildren } = useAdminMenus();
+
+  const { t } = useTranslation();
+
+  const { header, layout, sider } = useSettingsTheme();
+
+  const { isMobile } = useAdminState();
+
+  const siderWidth = sider.width;
+
+  const mode = layout.mode;
+
+  const HEADER_PROPS_CONFIG: Record<UnionKey.ThemeLayoutMode, App.Global.AdminLayout.HeaderProps> = {
+    [LAYOUT_MODE_VERTICAL]: {
+      showLogo: false,
+      showMenu: false,
+      showMenuToggler: true
+    },
+    [LAYOUT_MODE_VERTICAL_MIX]: {
+      showLogo: false,
+      showMenu: false,
+      showMenuToggler: false
+    },
+    [LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST]: {
+      showLogo: !isActiveFirstLevelMenuHasChildren,
+      showMenu: true,
+      showMenuToggler: false
+    },
+    [LAYOUT_MODE_HORIZONTAL]: {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: false
+    },
+    [LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST]: {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: false
+    },
+    [LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST]: {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: isActiveFirstLevelMenuHasChildren
+    }
+  };
+
+  const { showLogo, showMenu, showMenuToggler } = HEADER_PROPS_CONFIG[mode];
+
+  const hasLogo = Boolean(logo || logoComponent || logoTitle);
+
+  return (
+    <DarkModeContainer className="h-full flex-y-center px-12px shadow-header">
+      {showLogo && hasLogo ? (
+        <LayoutLogo
+          logo={logo}
+          logoComponent={logoComponent}
+          style={{ width: `${siderWidth}px` }}
+          title={logoTitle}
+          to={logoTo}
+        />
+      ) : null}
+
+      {showMenuToggler && <MenuToggler />}
+
+      <div className="h-full flex-y-center flex-1-hidden" id={GLOBAL_HEADER_MENU_ID}>
+        {!isMobile && !showMenu && <AdminBreadcrumb />}
+      </div>
+
+      <div className="h-full flex-y-center justify-end">
+
+        {headerLeftActions}
+
+        <AdminSearch />
+
+
+        {!isMobile && (
+          <FullScreen
+            className="px-12px"
+            enterTooltip={t('icon.fullscreen')}
+            exitTooltip={t('icon.fullscreenExit')}
+            full={isFullscreen}
+            toggleFullscreen={toggleFullscreen}
+          />
+        )}
+
+        <LangSwitch className="px-12px" visible={header.multilingual.visible} />
+
+        {headerMiddleActions}
+
+        <ThemeSchemaSwitch className="px-12px" tooltipContent={t('icon.themeSchema')} />
+
+        <ThemeButton />
+
+        {headerRightActions}
+      </div>
+    </DarkModeContainer>
+  );
+});
+
+export default GlobalHeader;

package/templates/admin-shell/layouts/modules/admin-header/components/Breadcrumb.tsx

@@ -0,0 +1,62 @@
+import { I18nLabel, SvgIcon } from '@shell/ui/compose';
+import { Link } from '@tanstack/react-router';
+import { Breadcrumb as ABreadcrumb, type BreadcrumbProps } from 'antd';
+
+import { getAdminLayoutsOptions } from '../../../setup';
+import { useAdminMenus } from '../../../state/menus/use-admin-menus';
+
+const itemRender: BreadcrumbProps['itemRender'] = (currentRoute, _, items) => {
+  const isLast = currentRoute?.path === items[items.length - 1]?.path;
+
+  return isLast ? (
+    <div className="flex-y-center text-base-text">{currentRoute.title}</div>
+  ) : (
+    <Link className="inline-flex! items-center whitespace-nowrap hover:text-base-text!" to={currentRoute.path}>
+      {currentRoute.title}
+    </Link>
+  );
+};
+
+const AdminBreadcrumb = () => {
+  const { activeMenu, currentMenu, getMenuInfoByPath, home, openKeys, selectedKey } = useAdminMenus();
+  const { defaultIcon } = getAdminLayoutsOptions();
+
+  const isHome = selectedKey[0] === home;
+
+  const allBreadcrumb = [
+    isHome ? null : home,
+    ...openKeys,
+    ...selectedKey,
+    activeMenu ? currentMenu?.key : null
+  ];
+
+  const breadcrumb = allBreadcrumb
+    .map(key => {
+      if (!key) return null;
+
+      const menuInfo = getMenuInfoByPath(key as Router.RoutePath);
+
+      if (!menuInfo) return null;
+
+      return {
+        title: (
+          <>
+            <SvgIcon
+              className="text-icon mr-4px"
+              icon={menuInfo.menu?.icon || defaultIcon}
+              localIcon={menuInfo.menu?.localIcon}
+            />
+            <span>
+              <I18nLabel fallback={menuInfo.title} i18nKey={menuInfo.i18nKey} />
+            </span>
+          </>
+        ),
+        path: menuInfo?.path
+      };
+    })
+    .filter(Boolean) as BreadcrumbProps['items'];
+
+  return <ABreadcrumb className="ml-12px" itemRender={itemRender} items={breadcrumb} />;
+};
+
+export default AdminBreadcrumb;

package/templates/admin-shell/layouts/modules/admin-header/components/ThemeButton.tsx

@@ -0,0 +1,24 @@
+import { ButtonIcon } from '@shell/ui/antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAdminState } from '../../../state/use-admin-state';
+
+const ThemeButton = memo(() => {
+  const { t } = useTranslation();
+
+  const { openThemeDrawer } = useAdminState();
+
+  return (
+    <ButtonIcon
+      triggerParent
+      className="px-12px"
+      hoverAnimation="pulse"
+      icon="majesticons:color-swatch-line"
+      tooltipContent={t('icon.themeConfig')}
+      onClick={openThemeDrawer}
+    />
+  );
+});
+
+export default ThemeButton;

package/templates/admin-shell/layouts/modules/admin-menu/AdminMenu.tsx

@@ -0,0 +1,37 @@
+import { useSettingsTheme } from '@shell/theme';
+import { memo } from 'react';
+
+import {
+  LAYOUT_MODE_HORIZONTAL,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_VERTICAL,
+  LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_VERTICAL_MIX
+} from '../../constant';
+
+import HorizontalMenu from './modules/Horizontal';
+import TopHybridHeaderFirst from './modules/TopHybridHeaderFirst';
+import TopHybridSidebarFirst from './modules/TopHybridSidebarFirst';
+import VerticalMenu from './modules/Vertical';
+import VerticalHybridHeaderFirst from './modules/VerticalHybridHeaderFirst';
+import VerticalMix from './modules/VerticalMix';
+
+const AdminMenu = memo(() => {
+  const {
+    layout: { mode }
+  } = useSettingsTheme();
+
+  if (mode === LAYOUT_MODE_HORIZONTAL) return <HorizontalMenu />;
+
+  if (mode === LAYOUT_MODE_VERTICAL) return <VerticalMenu />;
+
+  if (mode === LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST) return <TopHybridHeaderFirst />;
+
+  if (mode === LAYOUT_MODE_VERTICAL_MIX) return <VerticalMix />;
+
+  if (mode === LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST) return <VerticalHybridHeaderFirst />;
+
+  return <TopHybridSidebarFirst />;
+});
+
+export default AdminMenu;

package/templates/admin-shell/layouts/modules/admin-menu/components/FirstLevelMenu.tsx

@@ -0,0 +1,156 @@
+import { transformColorWithOpacity } from '@skyroc/color';
+import { ScrollArea } from '@skyroc/web-ui';
+import { useSettingsTheme } from '@shell/theme';
+import { clsx } from 'clsx';
+import { cloneElement, memo } from 'react';
+
+import MenuToggler from '../../../state/menus/MenuToggler';
+import { useAdminMenus } from '../../../state/menus/use-admin-menus';
+import { useAdminState } from '../../../state/use-admin-state';
+
+import { FirstLevelMenuMode } from '../enum';
+
+interface FirstLevelMenuProps {
+  /** 首级菜单顶部插槽。 */
+  children?: React.ReactNode;
+  /** 是否使用反色菜单样式。 */
+  inverted?: boolean;
+  /** 首级菜单展示模式。 */
+  mode?: FirstLevelMenuMode;
+  /** 选择带子级菜单时的回调。 */
+  onSelect?: () => void;
+}
+
+interface MixMenuItemProps {
+  /** Active menu item */
+  active: boolean;
+  inverted?: boolean;
+  /** Menu item label */
+  menu: Menu.CommonMenu;
+  /** 菜单模式 */
+  mode: FirstLevelMenuMode;
+  onClick?: () => void;
+  /** 选择菜单回调 */
+  onSelectMenu: (key: string) => void;
+}
+
+const MixMenuItem = (props: MixMenuItemProps) => {
+  const {
+    active,
+    inverted,
+    menu: { children, extra, icon, key, label },
+    onClick,
+    onSelectMenu
+  } = props;
+
+  const { darkMode, themeColor } = useSettingsTheme();
+
+  const { siderCollapse } = useAdminState();
+
+  const { routerPushByKey } = useAdminMenus();
+
+  const selectedBgColor = getSelectedBgColor();
+
+  function getSelectedBgColor() {
+    const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
+    const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
+
+    return darkMode ? dark : light;
+  }
+
+  function handleSelectMixMenu() {
+    onSelectMenu(key);
+
+    if (children?.length) {
+      if (onClick) onClick();
+    } else {
+      routerPushByKey(key);
+    }
+  }
+
+  return (
+    <div
+      style={{ backgroundColor: active ? selectedBgColor : '' }}
+      className={clsx(
+        'mx-4px mb-6px flex-col-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 hover:bg-[rgb(0,0,0,0.08)]',
+        { 'selected-mix-menu text-primary': active },
+        { 'text-white:65 hover:text-white': inverted },
+        { 'bg-primary! text-white!': active && inverted }
+      )}
+      onClick={handleSelectMixMenu}
+    >
+      <div className={clsx('flex-center gap-4px')}>
+        {icon && cloneElement(icon, { className: siderCollapse ? 'text-icon-small' : 'text-icon-large' } as any)}
+
+        {!siderCollapse ? Boolean(extra) && extra : null}
+      </div>
+
+      <p
+        className={clsx(
+          'w-full ellipsis-text text-center text-12px transition-height-300',
+          siderCollapse ? 'h-0 pt-0' : 'h-24px pt-4px'
+        )}
+      >
+        {label}
+      </p>
+    </div>
+  );
+};
+
+const FirstLevelMenu = memo((props: FirstLevelMenuProps) => {
+  const { children, inverted, mode = FirstLevelMenuMode.All, onSelect } = props;
+
+  const {
+    sider: { mixCollapsedWidth, mixWidth }
+  } = useSettingsTheme();
+
+  const { siderCollapse } = useAdminState();
+
+  const {
+    activeFirstLevelMenuKey,
+    activeSecondLevelMenuKey,
+    changeActiveFirstLevelMenuKey,
+    changeActiveSecondLevelMenuKey,
+    menus: allMenus,
+    secondLevelMenus
+  } = useAdminMenus();
+
+  const isFirst = mode === FirstLevelMenuMode.All;
+
+  const menus = isFirst ? allMenus : secondLevelMenus;
+
+  const activeKey = isFirst ? activeFirstLevelMenuKey : activeSecondLevelMenuKey;
+
+  // 根据模式选择对应的激活菜单函数
+  const handleSelectMenu = isFirst ? changeActiveFirstLevelMenuKey : changeActiveSecondLevelMenuKey;
+
+  const firstLevelMenuStyle = {
+    width: `${siderCollapse ? mixCollapsedWidth : mixWidth}px`
+  };
+
+  return (
+    <div className="h-full flex-col-stretch flex-1-hidden">
+      {children}
+      <ScrollArea className="flex-1">
+        <div className="h-full" style={firstLevelMenuStyle}>
+          {menus
+            .filter(item => item.type !== 'divider')
+            .map(item => (
+              <MixMenuItem
+                active={item.key === activeKey}
+                inverted={inverted}
+                key={item.key}
+                menu={item}
+                mode={mode}
+                onClick={onSelect}
+                onSelectMenu={handleSelectMenu}
+              />
+            ))}
+        </div>
+      </ScrollArea>
+      <MenuToggler arrowIcon className={clsx({ 'text-white:88 !hover:text-white': inverted })} />
+    </div>
+  );
+});
+
+export default FirstLevelMenu;

package/templates/admin-shell/layouts/modules/admin-menu/components/HorizontalMenu.tsx

@@ -0,0 +1,88 @@
+import { useSettingsTheme } from '@shell/theme';
+import { Menu as AMenu, type MenuProps } from 'antd';
+import { memo } from 'react';
+
+import { renderAntdMenuItems } from '../../../features/menus/menu-renderer';
+import { useAdminMenus } from '../../../state/menus/use-admin-menus';
+
+import { HorizontalMenuMode } from '../enum';
+
+interface Props {
+  /** 水平菜单显示模式 */
+  mode: HorizontalMenuMode;
+}
+
+function stripRootType(menus: Menu.CommonMenu[]): Menu.CommonMenu[] {
+  return menus.filter(({ type: _ }) => _ !== 'divider').map(({ type: _, ...rest }) => rest);
+}
+
+function findChildren(menus: Menu.CommonMenu[], key: string) {
+  return menus.find(item => item.key === key)?.children || [];
+}
+
+const HorizontalMenu = memo((props: Props) => {
+  const { mode } = props;
+
+  const { header } = useSettingsTheme();
+
+  const {
+    activeFirstLevelMenuKey,
+    changeActiveFirstLevelMenuKey,
+    changeActiveSecondLevelMenuKey,
+    firstLevelMenus,
+    menus,
+    routerPushByKey,
+    secondLevelMenus,
+    selectedKey,
+    setDrawerVisible
+  } = useAdminMenus();
+
+  function getMenus() {
+    if (mode === HorizontalMenuMode.All) {
+      return menus;
+    } else if (mode === HorizontalMenuMode.Child) {
+      return secondLevelMenus;
+    }
+    return firstLevelMenus;
+  }
+
+  const allMenus = getMenus();
+
+  const menuItems = renderAntdMenuItems(stripRootType(allMenus), { mode: 'horizontal' });
+
+  /** 处理菜单点击 - FirstLevel 模式：选择一级菜单，如果有子菜单且 autoSelectFirstMenu 开启，自动选择最深层级菜单 - 其他模式：直接跳转 */
+  function handleClickMenu(menuInfo: Parameters<NonNullable<MenuProps['onSelect']>>[0]) {
+    if (mode === HorizontalMenuMode.FirstLevel) {
+      changeActiveFirstLevelMenuKey(menuInfo.key);
+
+      const children = findChildren(menus, menuInfo.key);
+
+      if (!children.length) {
+        routerPushByKey(menuInfo.key);
+      } else {
+        const child = children[0].children || [];
+
+        if (child.length) {
+          changeActiveSecondLevelMenuKey(children[0].key);
+          setDrawerVisible(true);
+        }
+      }
+    } else {
+      routerPushByKey(menuInfo.key);
+    }
+  }
+
+  return (
+    <AMenu
+      className="size-full transition-400 border-0!"
+      inlineIndent={18}
+      items={menuItems}
+      mode="horizontal"
+      selectedKeys={mode === HorizontalMenuMode.FirstLevel ? [activeFirstLevelMenuKey] : selectedKey}
+      style={{ lineHeight: `${header.height}px` }}
+      onSelect={handleClickMenu}
+    />
+  );
+});
+
+export default HorizontalMenu;

package/templates/admin-shell/layouts/modules/admin-menu/components/MenuPortal.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Portal } from '@shell/ui/compose';
+
+import { useAdminState } from '../../../state/use-admin-state';
+
+interface MenuPortalProps {
+  /** 跟随布局容器重新挂载的菜单内容。 */
+  children: ReactNode;
+  /** 菜单内容需要挂载到的布局容器。 */
+  container: string | HTMLElement;
+}
+
+const MenuPortal = (props: MenuPortalProps) => {
+  const { children, container } = props;
+
+  const { isMobile } = useAdminState();
+
+  const containerKey = typeof container === 'string' ? container : container.id || 'element';
+  const deviceKey = isMobile ? 'mobile' : 'desktop';
+
+  return (
+    <Portal container={container} key={`${deviceKey}:${containerKey}`}>
+      {children}
+    </Portal>
+  );
+};
+
+export default MenuPortal;

package/templates/admin-shell/layouts/modules/admin-menu/components/VerticalMenu.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useSettingsTheme } from '@shell/theme';
+import { ScrollArea } from '@skyroc/web-ui';
+import { useUpdateEffect } from 'ahooks';
+import { Menu as AMenu, type MenuProps } from 'antd';
+import { clsx } from 'clsx';
+import { memo, useEffect, useState } from 'react';
+
+import {
+  FIRST_LEVEL_LAYOUT_MODES,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_VERTICAL,
+  LAYOUT_MODE_VERTICAL_MIX
+} from '../../../constant';
+import { renderAntdMenuItems } from '../../../features/menus/menu-renderer';
+import { useAdminMenus } from '../../../state/menus/use-admin-menus';
+import { useAdminState } from '../../../state/use-admin-state';
+
+const VerticalMenu = memo(() => {
+  const {
+    childLevelMenus,
+    menus: allMenus,
+    openKeys,
+    route,
+    routerPushByKey,
+    secondLevelMenus,
+    selectedKey
+  } = useAdminMenus();
+
+  const { siderCollapse, verticalMenuWidth } = useAdminState();
+
+  const {
+    darkMode,
+    layout: { mode },
+    sider
+  } = useSettingsTheme();
+
+  const isTopHybridHeaderFirst = mode === LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST;
+
+  const isVertical = mode === LAYOUT_MODE_VERTICAL;
+
+  const inlineCollapsed = isVertical || isTopHybridHeaderFirst ? siderCollapse : false;
+
+  const isVerticalMix = mode === LAYOUT_MODE_VERTICAL_MIX;
+
+  const isMix = FIRST_LEVEL_LAYOUT_MODES.includes(mode);
+
+  const [stateOpenKeys, setStateOpenKeys] = useState<string[]>(inlineCollapsed ? [] : openKeys);
+
+  const darkTheme = !darkMode && sider.inverted;
+
+  const menuTheme = darkTheme ? 'dark' : 'light';
+
+  const scrollbarClass = 'z-10 w-7px bg-transparent p-0';
+
+  const scrollbarThumbClass = 'rounded-10px bg-[rgba(144,147,153,0.3)] hover:bg-[rgba(144,147,153,0.3)]';
+
+  let menus = allMenus;
+
+  if (isVerticalMix) {
+    menus = secondLevelMenus;
+  } else if (isMix) {
+    menus = isTopHybridHeaderFirst ? secondLevelMenus : childLevelMenus;
+  }
+
+  const menuItems = renderAntdMenuItems(menus);
+
+  function handleClickMenu(menuInfo: Parameters<NonNullable<MenuProps['onSelect']>>[0]) {
+    routerPushByKey(menuInfo.key);
+  }
+
+  function handleOpenChange(keys: string[]) {
+    if (keys.includes('rc-menu-more')) {
+      setStateOpenKeys(keys);
+      return;
+    }
+
+    // close
+    setStateOpenKeys(keys);
+  }
+
+  useEffect(() => {
+    if (inlineCollapsed) return;
+    setStateOpenKeys(openKeys);
+  }, [route.pathname, inlineCollapsed]);
+
+  useUpdateEffect(() => {
+    if (inlineCollapsed) {
+      setStateOpenKeys([]);
+    } else {
+      setStateOpenKeys(openKeys);
+    }
+  }, [inlineCollapsed]);
+
+  return (
+    <ScrollArea
+      className="h-full"
+      classNames={{
+        scrollbar: scrollbarClass,
+        thumb: scrollbarThumbClass
+      }}
+      orientation="vertical"
+      size="xs"
+      type="scroll"
+    >
+      <AMenu
+        className={clsx('h-full transition-300 border-0!', { 'bg-container!': !darkTheme })}
+        inlineCollapsed={inlineCollapsed}
+        inlineIndent={18}
+        items={menuItems}
+        mode="inline"
+        openKeys={stateOpenKeys}
+        selectedKeys={selectedKey}
+        style={{ width: verticalMenuWidth }}
+        theme={menuTheme}
+        onOpenChange={handleOpenChange}
+        onSelect={handleClickMenu}
+      />
+    </ScrollArea>
+  );
+});
+
+export default VerticalMenu;

package/templates/admin-shell/layouts/modules/admin-menu/enum.ts

@@ -0,0 +1,47 @@
+/**
+ * 水平菜单模式枚举
+ *
+ * 用于控制水平菜单的显示内容
+ */
+export enum HorizontalMenuMode {
+  /**
+   * 全部菜单模式
+   *
+   * 显示所有层级的菜单项
+   */
+  All = 'all',
+
+  /**
+   * 子级菜单模式
+   *
+   * 仅显示当前激活一级菜单下的子菜单
+   */
+  Child = 'child',
+
+  /**
+   * 一级菜单模式
+   *
+   * 仅显示一级菜单项
+   */
+  FirstLevel = 'first-level'
+}
+
+export enum FirstLevelMenuMode {
+  /**
+   * 一级菜单模式
+   *
+   * 仅显示一级菜单项
+   */
+  All = 'all',
+  /**
+   * 一级菜单模式
+   *
+   * 仅显示一级菜单项
+   */
+  /**
+   * 子级菜单模式
+   *
+   * 仅显示当前激活一级菜单下的子菜单
+   */
+  SecondLevel = 'second-level'
+}