@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/state/menus/MenuToggler.tsx

@@ -0,0 +1,53 @@
+import { ButtonIcon } from '@shell/ui/antd';
+import { SvgIcon } from '@shell/ui/compose';
+import { useTranslation } from 'react-i18next';
+
+import { useAdminState } from '../use-admin-state';
+
+interface Props {
+  /** Arrow style icon */
+  arrowIcon?: boolean;
+  /** Button class name. */
+  className?: string;
+}
+
+type NumberBool = 0 | 1;
+
+const icons: Record<NumberBool, Record<NumberBool, string>> = {
+  0: {
+    0: 'line-md:menu-fold-left',
+    1: 'line-md:menu-fold-right'
+  },
+  1: {
+    0: 'ph-caret-double-left-bold',
+    1: 'ph-caret-double-right-bold'
+  }
+};
+
+const MenuToggler = (props: Props) => {
+  const { arrowIcon, className } = props;
+
+  const { t } = useTranslation();
+
+  const { siderCollapse, toggleSiderCollapse } = useAdminState();
+
+  const isArrowIcon = Number(arrowIcon || false) as NumberBool;
+  const isCollapsed = Number(siderCollapse || false) as NumberBool;
+
+  const icon = icons[isArrowIcon][isCollapsed];
+
+  const tooltipContent = siderCollapse ? t('icon.expand') : t('icon.collapse');
+
+  return (
+    <ButtonIcon
+      className={className}
+      tooltipContent={tooltipContent}
+      tooltipPlacement="bottomLeft"
+      onClick={toggleSiderCollapse}
+    >
+      <SvgIcon icon={icon} />
+    </ButtonIcon>
+  );
+};
+
+export default MenuToggler;

package/templates/admin-shell/layouts/state/menus/use-admin-menu-badges.ts

@@ -0,0 +1,46 @@
+import { setAtomValue } from '@skyroc/core-state';
+import { atom, useAtomValue } from 'jotai';
+
+export type MenuBadgeValues = Record<string, Router.MenuBadgeValue | undefined>;
+
+const menuBadgeValuesAtom = atom<MenuBadgeValues>({});
+
+function updateMenuBadgeValues(getNextValues: (currentValues: MenuBadgeValues) => MenuBadgeValues) {
+  setAtomValue(menuBadgeValuesAtom, getNextValues);
+}
+
+export function setMenuBadgeValue(key: string, value: Router.MenuBadgeValue | undefined) {
+  updateMenuBadgeValues(currentValues => ({ ...currentValues, [key]: value }));
+}
+
+export function setMenuBadgeValues(values: MenuBadgeValues) {
+  updateMenuBadgeValues(currentValues => ({ ...currentValues, ...values }));
+}
+
+export function clearMenuBadgeValues(keys?: string[]) {
+  if (!keys) {
+    setAtomValue(menuBadgeValuesAtom, {});
+    return;
+  }
+
+  updateMenuBadgeValues(currentValues => {
+    const nextValues = { ...currentValues };
+
+    keys.forEach(key => {
+      delete nextValues[key];
+    });
+
+    return nextValues;
+  });
+}
+
+export function useAdminMenuBadges() {
+  const badgeValues = useAtomValue(menuBadgeValuesAtom);
+
+  return {
+    badgeValues,
+    clearMenuBadgeValues,
+    setMenuBadgeValue,
+    setMenuBadgeValues
+  };
+}

package/templates/admin-shell/layouts/state/menus/use-admin-menus.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable complexity */
+import { atomWithPartial } from '@skyroc/core-state';
+import { useNavigate } from '@tanstack/react-router';
+import { useUpdateEffect } from 'ahooks';
+import { useAtom } from 'jotai';
+import { useMemo } from 'react';
+
+import { useAdminLayoutContext } from '../../context';
+import { normalizePath } from '../../features/menus/menu-generator';
+import type { GeneratedMenu } from '../../features/menus/menu-generator';
+import { renderCommonMenus } from '../../features/menus/menu-renderer';
+import { useMenus } from '../../features/menus/use-menus';
+import { useRoute } from '../../features/use-route';
+
+interface MenusAtom {
+  activeFirstLevelMenuKey: string;
+  activeSecondLevelMenuKey: string;
+  drawerVisible: boolean;
+}
+
+const initialState: MenusAtom = {
+  activeFirstLevelMenuKey: '',
+  activeSecondLevelMenuKey: '',
+  drawerVisible: false
+};
+
+const EMPTY_GENERATED_MENUS: GeneratedMenu[] = [];
+
+const menusAtom = atomWithPartial(initialState);
+
+export const useAdminMenus = (categoryKey?: string) => {
+  const [menuState, setMenuState] = useAtom(menusAtom);
+  const { activeFirstLevelMenuKey, activeSecondLevelMenuKey, drawerVisible } = menuState;
+  const adminLayoutContext = useAdminLayoutContext();
+
+  const route = useRoute();
+
+  const navigate = useNavigate();
+
+  const { home, menus: allMenus, quickReferenceMenus: allQuickReferenceMenus } = useMenus();
+  const activeCategoryKey = categoryKey ?? adminLayoutContext.categoryKey;
+
+  const rawMenus = allMenus?.get(activeCategoryKey) || EMPTY_GENERATED_MENUS;
+  const menus = useMemo(() => renderCommonMenus(rawMenus), [rawMenus]);
+  const quickReferenceMenus = allQuickReferenceMenus?.get(activeCategoryKey);
+
+  const fullPath = normalizePath(route.originPath) as Router.RoutePath;
+  const currentMenu = quickReferenceMenus?.get(fullPath);
+
+  const { activeMenu, hide } = currentMenu?.menu || {};
+
+  const selectedRouteKey = (hide ? activeMenu : currentMenu?.key) || currentMenu?.key || '';
+  const activeMenuInfo = activeMenu ? getMenuInfoByPath(activeMenu) : currentMenu;
+  const openKeys = activeMenuInfo?.parentKeys || [];
+
+  const selectedKey = [selectedRouteKey];
+  const routeFirstLevelMenuKey = openKeys[0] || selectedRouteKey;
+  const routeSecondLevelMenuKey = openKeys[1] || selectedRouteKey;
+  const derivedActiveFirstLevelMenuKey = activeFirstLevelMenuKey || routeFirstLevelMenuKey;
+  const derivedActiveSecondLevelMenuKey = activeSecondLevelMenuKey || routeSecondLevelMenuKey;
+
+  const firstLevelMenus = menus.map(menu => {
+    const { children: _, ...rest } = menu;
+
+    return rest;
+  });
+
+  const secondLevelMenus = menus.find(item => item?.key === derivedActiveFirstLevelMenuKey)?.children || [];
+
+  const isActiveFirstLevelMenuHasChildren = derivedActiveFirstLevelMenuKey ? Boolean(secondLevelMenus.length) : false;
+
+  const childLevelMenus = secondLevelMenus.find(menu => menu.key === derivedActiveSecondLevelMenuKey)?.children || [];
+
+  const isActiveSecondLevelMenuHasChildren = derivedActiveSecondLevelMenuKey ? Boolean(childLevelMenus.length) : false;
+
+  function routerPushByKey(key: string) {
+    const newRoute = quickReferenceMenus?.get(key as Router.RoutePath);
+
+    if (newRoute) {
+      if (newRoute.href) {
+        window.open(newRoute.href, '_blank', 'noopener,noreferrer');
+        return;
+      }
+
+      const search = createRouteSearch(newRoute.query);
+
+      if (search) {
+        navigate({
+          search,
+          to: newRoute.path
+        });
+        return;
+      }
+
+      navigate({
+        to: newRoute.path
+      });
+    }
+  }
+
+  /** 可以手动指定菜单或者是默认当前路由的一级菜单 */
+  function changeActiveFirstLevelMenuKey(key?: string) {
+    setMenuState({ activeFirstLevelMenuKey: key || '' });
+  }
+
+  /** 可以手动指定菜单或者是默认当前路由的二级菜单 */
+  function changeActiveSecondLevelMenuKey(key?: string) {
+    setMenuState({ activeSecondLevelMenuKey: key || '' });
+  }
+
+  function setDrawerVisible(visible: boolean) {
+    setMenuState({ drawerVisible: visible });
+  }
+
+  function getMenuInfoByPath(path: Router.RoutePath) {
+    return quickReferenceMenus?.get(path);
+  }
+
+  useUpdateEffect(() => {
+    setMenuState({
+      activeFirstLevelMenuKey: '',
+      activeSecondLevelMenuKey: '',
+      drawerVisible: false
+    });
+  }, [selectedRouteKey]);
+
+  return {
+    menus,
+    home,
+    quickReferenceMenus,
+    firstLevelMenus,
+    secondLevelMenus,
+    childLevelMenus,
+    activeFirstLevelMenuKey: derivedActiveFirstLevelMenuKey,
+    activeSecondLevelMenuKey: derivedActiveSecondLevelMenuKey,
+    isActiveFirstLevelMenuHasChildren,
+    isActiveSecondLevelMenuHasChildren,
+    route,
+    openKeys,
+    currentMenu,
+    activeMenu,
+    selectedKey,
+    drawerVisible,
+    setDrawerVisible,
+    routerPushByKey,
+    changeActiveFirstLevelMenuKey,
+    changeActiveSecondLevelMenuKey,
+    getMenuInfoByPath
+  };
+};
+
+function createRouteSearch(query: Api.Route.BackendRouteQuery[] | null | undefined) {
+  const search: Record<string, string> = {};
+
+  query?.forEach(item => {
+    const key = item.key.trim();
+
+    if (key) {
+      search[key] = item.value;
+    }
+  });
+
+  return Object.keys(search).length ? search : undefined;
+}

package/templates/admin-shell/layouts/state/tabs/index.ts

@@ -0,0 +1 @@
+export * from './shared';

package/templates/admin-shell/layouts/state/tabs/shared.tsx

@@ -0,0 +1,148 @@
+import { getAdminLayoutsOptions } from '../../setup';
+
+/**
+ * Get all tabs
+ *
+ * @param tabs Tabs
+ * @param homeTab Home tab
+ */
+export function getAllTabs(tabs: App.Global.Tab[], homeTab: App.Global.Tab | null) {
+  if (!homeTab) {
+    return [];
+  }
+
+  const filterHomeTabs = tabs.filter(tab => tab.id !== homeTab.id);
+
+  const fixedTabs = filterHomeTabs.filter(isFixedTab).toSorted((a, b) => a.fixedIndex! - b.fixedIndex!);
+
+  const remainTabs = filterHomeTabs.filter(tab => !isFixedTab(tab));
+
+  const allTabs = [homeTab, ...fixedTabs, ...remainTabs];
+
+  return allTabs;
+}
+
+/**
+ * Is fixed tab
+ *
+ * @param tab
+ */
+function isFixedTab(tab: App.Global.Tab) {
+  return tab.fixedIndex !== undefined && tab.fixedIndex !== null;
+}
+
+/**
+ * Get tab id by route
+ *
+ * @param route
+ */
+export function getTabIdByRoute(pathname: string, multiTab: boolean, fullPath: string) {
+  let id = pathname;
+
+  if (multiTab) {
+    id = fullPath;
+  }
+
+  return id;
+}
+
+/**
+ * Get tab by route
+ *
+ * @param route
+ */
+export function getTabByMenuInfo(
+  menuInfo: Menu.QuickReferenceMenu,
+  pathname: Router.RoutePath,
+  fullPath: string
+): App.Global.Tab {
+  const { defaultIcon } = getAdminLayoutsOptions();
+
+  return {
+    id: getTabIdByRoute(pathname, menuInfo.tab?.multi ?? false, fullPath),
+    routePath: pathname,
+    fullPath,
+    fixedIndex: menuInfo.tab?.fixedIndex,
+    i18nKey: menuInfo.i18nKey,
+    icon: menuInfo.menu?.icon || defaultIcon,
+    keepAlive: menuInfo.keepAlive,
+    localIcon: menuInfo.menu?.localIcon,
+    label: menuInfo.title || '',
+    oldLabel: menuInfo.title
+  };
+}
+
+/**
+ * Is tab in tabs
+ *
+ * @param tabId
+ * @param tabs
+ */
+export function isTabInTabs(tabId: string, tabs: App.Global.Tab[]) {
+  return tabs.some(tab => tab.id === tabId);
+}
+
+/**
+ * Filter tabs by ids
+ *
+ * @param tabIds
+ * @param tabs
+ */
+export function filterTabsByIds(tabIds: string[], tabs: App.Global.Tab[]) {
+  return tabs.filter(tab => !tabIds.includes(tab.id));
+}
+
+/**
+ * Extract tabs by all routes
+ *
+ * @param routeIds All route IDs
+ * @param tabs Cached tabs
+ */
+export function extractTabsByAllRoutes(routeIds: string[], tabs: App.Global.Tab[]) {
+  return tabs.filter(tab => routeIds.includes(tab.routePath));
+}
+
+/**
+ * Get fixed tabs
+ *
+ * @param tabs
+ */
+export function getFixedTabs(tabs: App.Global.Tab[]) {
+  return tabs.filter(isFixedTab);
+}
+
+/**
+ * Get fixed tab ids
+ *
+ * @param tabs
+ */
+export function getFixedTabIds(tabs: App.Global.Tab[]) {
+  const fixedTabs = getFixedTabs(tabs);
+
+  return fixedTabs.map(tab => tab.id);
+}
+
+/**
+ * Reorder fixed tabs fixedIndex
+ *
+ * @param tabs
+ */
+export function reorderFixedTabs(tabs: App.Global.Tab[]) {
+  const fixedTabs = getFixedTabs(tabs);
+  fixedTabs.forEach((t, i) => {
+    t.fixedIndex = i;
+  });
+}
+
+/**
+ * Find tab by route name
+ *
+ * @param routePath
+ * @param tabs
+ */
+export function findTabByRoutePath(routePath: Router.RoutePath, tabs: App.Global.Tab[]) {
+  const tabId = routePath;
+  const multiTabId = `${routePath}?`;
+
+  return tabs.find(tab => tab.id === tabId || tab.id.startsWith(multiTabId));
+}