@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/SiderSettings.tsx

@@ -0,0 +1,124 @@
+import { useSettingsTheme } from '@shell/theme';
+import { SvgIcon } from '@shell/ui/compose';
+import { InputNumber as AInputNumber, Switch as ASwitch, Tooltip as ATooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import {
+  HYBRID_LAYOUT_MODES,
+  LAYOUT_MODE_VERTICAL,
+  LAYOUT_MODE_VERTICAL_MIX,
+  MIX_OR_HYBRID_LAYOUT_MODES
+} from '../../../../constant';
+import AnimatedCollapse from '../../components/AnimatedCollapse';
+import SettingItem from '../../components/SettingItem';
+
+const SiderSettings = () => {
+  const { t } = useTranslation();
+
+  const { layout, setSettings, sider } = useSettingsTheme();
+
+  const layoutMode = layout.mode;
+  const isMixLayoutMode = MIX_OR_HYBRID_LAYOUT_MODES.includes(layoutMode);
+  const isHybridLayoutMode = HYBRID_LAYOUT_MODES.includes(layoutMode);
+
+  const updateSider = (patch: Partial<typeof sider>) => {
+    setSettings({
+      sider: {
+        ...sider,
+        ...patch
+      }
+    });
+  };
+
+  const handleWidthChange = (width: number | null) => {
+    if (width === null) return;
+    updateSider({ width });
+  };
+
+  const handleCollapsedWidthChange = (collapsedWidth: number | null) => {
+    if (collapsedWidth === null) return;
+    updateSider({ collapsedWidth });
+  };
+
+  const handleMixWidthChange = (mixWidth: number | null) => {
+    if (mixWidth === null) return;
+    updateSider({ mixWidth });
+  };
+
+  const handleMixCollapsedWidthChange = (mixCollapsedWidth: number | null) => {
+    if (mixCollapsedWidth === null) return;
+    updateSider({ mixCollapsedWidth });
+  };
+
+  const handleMixChildMenuWidthChange = (mixChildMenuWidth: number | null) => {
+    if (mixChildMenuWidth === null) return;
+    updateSider({ mixChildMenuWidth });
+  };
+
+  const handleAutoSelectFirstMenuChange = (autoSelectFirstMenu: boolean) => {
+    updateSider({ autoSelectFirstMenu });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <AnimatedCollapse className="flex-col-stretch gap-12px" visible={layoutMode === LAYOUT_MODE_VERTICAL}>
+        <SettingItem label={t('theme.layout.sider.width')}>
+          <AInputNumber className="w-120px" min={0} step={1} value={sider.width} onChange={handleWidthChange} />
+        </SettingItem>
+
+        <SettingItem label={t('theme.layout.sider.collapsedWidth')}>
+          <AInputNumber
+            className="w-120px"
+            min={0}
+            step={1}
+            value={sider.collapsedWidth}
+            onChange={handleCollapsedWidthChange}
+          />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <AnimatedCollapse className="flex-col-stretch gap-12px" visible={isMixLayoutMode}>
+        <SettingItem label={t('theme.layout.sider.mixWidth')}>
+          <AInputNumber className="w-120px" min={0} step={1} value={sider.mixWidth} onChange={handleMixWidthChange} />
+        </SettingItem>
+
+        <SettingItem label={t('theme.layout.sider.mixCollapsedWidth')}>
+          <AInputNumber
+            className="w-120px"
+            min={0}
+            step={1}
+            value={sider.mixCollapsedWidth}
+            onChange={handleMixCollapsedWidthChange}
+          />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <AnimatedCollapse visible={layoutMode === LAYOUT_MODE_VERTICAL_MIX}>
+        <SettingItem label={t('theme.layout.sider.mixChildMenuWidth')}>
+          <AInputNumber
+            className="w-120px"
+            min={0}
+            step={1}
+            value={sider.mixChildMenuWidth}
+            onChange={handleMixChildMenuWidthChange}
+          />
+        </SettingItem>
+      </AnimatedCollapse>
+
+      <AnimatedCollapse visible={isHybridLayoutMode}>
+        <SettingItem
+          label={t('theme.layout.sider.autoSelectFirstMenu')}
+          suffix={
+            <ATooltip title={t('theme.layout.sider.autoSelectFirstMenuTip')}>
+              <SvgIcon className="text-icon-info" icon="mdi:information-outline" />
+            </ATooltip>
+          }
+        >
+          <ASwitch checked={sider.autoSelectFirstMenu} onChange={handleAutoSelectFirstMenuChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+    </div>
+  );
+};
+
+export default SiderSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/TabSettings.tsx

@@ -0,0 +1,95 @@
+import { useSettingsTheme } from '@shell/theme';
+import { SvgIcon } from '@shell/ui/compose';
+import { InputNumber as AInputNumber, Select as ASelect, Switch as ASwitch, Tooltip as ATooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { themeTabModeOptions, translateOptions } from '../../../../options';
+
+import AnimatedCollapse from '../../components/AnimatedCollapse';
+import SettingItem from '../../components/SettingItem';
+
+const TabSettings = () => {
+  const { t } = useTranslation();
+
+  const { setSettings, tab } = useSettingsTheme();
+
+  const tabModeOptions = translateOptions(themeTabModeOptions);
+
+  const updateTab = (patch: Partial<typeof tab>) => {
+    setSettings({
+      tab: {
+        ...tab,
+        ...patch
+      }
+    });
+  };
+
+  const handleTabVisibleChange = (visible: boolean) => {
+    updateTab({ visible });
+  };
+
+  const handleTabCacheChange = (cache: boolean) => {
+    updateTab({ cache });
+  };
+
+  const handleTabHeightChange = (height: number | null) => {
+    if (height === null) return;
+    updateTab({ height });
+  };
+
+  const handleTabModeChange = (mode: UnionKey.ThemeTabMode) => {
+    updateTab({ mode });
+  };
+
+  const handleCloseTabByMiddleClickChange = (closeTabByMiddleClick: boolean) => {
+    updateTab({ closeTabByMiddleClick });
+  };
+
+  return (
+    <div className="flex-col-stretch gap-12px">
+      <SettingItem label={t('theme.layout.tab.visible')}>
+        <ASwitch checked={tab.visible} onChange={handleTabVisibleChange} />
+      </SettingItem>
+
+      <AnimatedCollapse className="flex-col-stretch gap-12px" visible={tab.visible}>
+        <SettingItem
+          label={t('theme.layout.tab.cache')}
+          suffix={
+            <ATooltip title={t('theme.layout.tab.cacheTip')}>
+              <SvgIcon className="text-icon-info" icon="mdi:information-outline" />
+            </ATooltip>
+          }
+        >
+          <ASwitch checked={tab.cache} onChange={handleTabCacheChange} />
+        </SettingItem>
+
+        <SettingItem label={t('theme.layout.tab.height')}>
+          <AInputNumber className="w-120px" min={0} step={1} value={tab.height} onChange={handleTabHeightChange} />
+        </SettingItem>
+
+        <SettingItem label={t('theme.layout.tab.mode.title')}>
+          <ASelect
+            className="w-120px"
+            options={tabModeOptions}
+            size="small"
+            value={tab.mode}
+            onChange={handleTabModeChange}
+          />
+        </SettingItem>
+
+        <SettingItem
+          label={t('theme.layout.tab.closeByMiddleClick')}
+          suffix={
+            <ATooltip title={t('theme.layout.tab.closeByMiddleClickTip')}>
+              <SvgIcon className="text-icon-info" icon="mdi:information-outline" />
+            </ATooltip>
+          }
+        >
+          <ASwitch checked={tab.closeTabByMiddleClick} onChange={handleCloseTabByMiddleClickChange} />
+        </SettingItem>
+      </AnimatedCollapse>
+    </div>
+  );
+};
+
+export default TabSettings;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/layout/ThemeLayout.tsx

@@ -0,0 +1,32 @@
+import { Divider as ADivider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import ContentSettings from './ContentSettings';
+import FooterSettings from './FooterSettings';
+import HeaderSettings from './HeaderSettings';
+import LayoutMode from './LayoutMode';
+import SiderSettings from './SiderSettings';
+import TabSettings from './TabSettings';
+
+const ThemeLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex-col-stretch gap-16px">
+      <ADivider>{t('theme.layout.layoutMode.title')}</ADivider>
+      <LayoutMode />
+      <ADivider>{t('theme.layout.tab.title')}</ADivider>
+      <TabSettings />
+      <ADivider>{t('theme.layout.header.title')}</ADivider>
+      <HeaderSettings />
+      <ADivider>{t('theme.layout.sider.title')}</ADivider>
+      <SiderSettings />
+      <ADivider>{t('theme.layout.footer.title')}</ADivider>
+      <FooterSettings />
+      <ADivider>{t('theme.layout.content.title')}</ADivider>
+      <ContentSettings />
+    </div>
+  );
+};
+
+export default ThemeLayout;

package/templates/admin-shell/layouts/modules/theme-drawer/modules/preset/ThemePreset.tsx

@@ -0,0 +1,132 @@
+import { defaultThemeSettings, getAllPresets, showSuccessMessage, useSettingsTheme } from '@shell/theme';
+import { Badge as ABadge, Button as AButton, Divider as ADivider } from 'antd';
+import { defu } from 'defu';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ThemePreset = () => {
+  const { t } = useTranslation();
+
+  const {
+    setColourWeakness,
+    setGrayscale,
+    setSettings,
+    setThemeLayout,
+    setThemeScheme,
+    setWatermarkEnableTime,
+    setWatermarkEnableUserName
+  } = useSettingsTheme();
+
+  // Get presets from package (sorted by order)
+  const presets = useMemo(() => {
+    return getAllPresets().map(preset => ({
+      id: preset.name.toLowerCase().replace(/\s+/g, '-'),
+      ...preset
+    }));
+  }, []);
+
+  function getPresetName(preset: Theme.ThemePreset): string {
+    if (!preset.i18nkey) return preset.name;
+    try {
+      const key = `${preset.i18nkey}.name` as I18n.I18nKey;
+      const translated = t(key);
+      return translated !== key ? translated : preset.name;
+    } catch {
+      return preset.name;
+    }
+  }
+
+  function getPresetDesc(preset: Theme.ThemePreset): string {
+    if (!preset.i18nkey) return preset.desc;
+    try {
+      const key = `${preset.i18nkey}.desc` as I18n.I18nKey;
+      const translated = t(key);
+      return translated !== key ? translated : preset.desc;
+    } catch {
+      return preset.desc;
+    }
+  }
+
+  function applyPreset(preset: Theme.ThemePreset): void {
+    const mergedPreset = defu(preset, defaultThemeSettings);
+    const { colourWeakness, grayscale, layout, themeScheme, watermark, ...rest } = mergedPreset;
+
+    setThemeScheme(themeScheme);
+    setGrayscale(grayscale);
+    setColourWeakness(colourWeakness);
+    setThemeLayout(layout.mode);
+    setWatermarkEnableUserName(watermark.enableUserName);
+    setWatermarkEnableTime(watermark.enableTime);
+
+    setSettings({
+      ...rest,
+      layout: { ...layout },
+      page: { ...rest.page },
+      header: { ...rest.header },
+      tab: { ...rest.tab },
+      sider: { ...rest.sider },
+      footer: { ...rest.footer },
+      watermark: { ...watermark },
+      tokens: { ...rest.tokens }
+    });
+
+    showSuccessMessage(t('theme.appearance.preset.applySuccess'));
+  }
+
+  return (
+    <>
+      <ADivider>{t('theme.appearance.preset.title')}</ADivider>
+
+      <div className="flex flex-col gap-12px">
+        {presets.map(preset => (
+          <div
+            className="cursor-pointer border-primary/10 rd-8px border-solid bg-white/5 p-12px backdrop-blur-10 transition-all duration-300 hover:shadow-md hover:-translate-y-0.5"
+            key={preset.id}
+          >
+            <div className="mb-8px flex items-center justify-between">
+              <div className="min-w-0 w-full flex flex-1 items-center justify-between gap-8px">
+                <h5 className="m-0 truncate text-14px text-primary font-600">{getPresetName(preset)}</h5>
+                <ABadge
+                  className="shrink-0 opacity-80"
+                  count={`v${preset.version}`}
+                  style={{ backgroundColor: '#2080f0' }}
+                />
+              </div>
+              <AButton
+                ghost
+                className="ml-8px shrink-0"
+                shape="round"
+                size="small"
+                type="primary"
+                onClick={() => applyPreset(preset)}
+              >
+                {t('theme.appearance.preset.apply')}
+              </AButton>
+            </div>
+
+            <p className="line-clamp-2 mb-12px text-12px text-gray-500 leading-16px">{getPresetDesc(preset)}</p>
+
+            <div className="flex items-center justify-between">
+              <div className="flex gap-4px">
+                {Object.entries({ primary: preset.themeColor, ...preset.otherColor }).map(([key, color]) => (
+                  <div
+                    className="h-12px w-12px cursor-pointer border-white/30 rd-full transition-transform hover:scale-110"
+                    key={key}
+                    style={{ backgroundColor: color as string }}
+                    title={key}
+                  />
+                ))}
+              </div>
+              <div className="flex items-center gap-4px">
+                <div className="text-18px">{preset.themeScheme === 'dark' ? '🌙' : '☀️'}</div>
+                {preset.grayscale && <div className="text-18px">🎨</div>}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default ThemePreset;

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

@@ -0,0 +1,79 @@
+import { I18nLabel } from '@shell/ui/compose';
+
+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
+} from './constant';
+
+export function transformRecordToOption<T extends Record<string, string>>(record: T) {
+  return Object.entries(record).map(([value, label]) => ({
+    label,
+    value
+  })) as Common.Option<keyof T, T[keyof T]>[];
+}
+
+export function translateOptions(options: Common.Option<string, I18n.I18nKey>[]) {
+  return options.map(option => ({
+    ...option,
+    label: <I18nLabel i18nKey={option.label} />
+  }));
+}
+
+export const themeTabsRecord: Record<string, I18n.I18nKey> = {
+  appearance: 'theme.tabs.appearance',
+  layout: 'theme.tabs.layout',
+  general: 'theme.tabs.general',
+  preset: 'theme.tabs.preset'
+};
+
+export const themeTabsOptions = transformRecordToOption(themeTabsRecord);
+
+export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, I18n.I18nKey> = {
+  [LAYOUT_MODE_VERTICAL]: 'theme.layout.layoutMode.vertical',
+  [LAYOUT_MODE_VERTICAL_MIX]: 'theme.layout.layoutMode.vertical-mix',
+  [LAYOUT_MODE_VERTICAL_HYBRID_HEADER_FIRST]: 'theme.layout.layoutMode.vertical-hybrid-header-first',
+  [LAYOUT_MODE_HORIZONTAL]: 'theme.layout.layoutMode.horizontal',
+  [LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST]: 'theme.layout.layoutMode.top-hybrid-sidebar-first',
+  [LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST]: 'theme.layout.layoutMode.top-hybrid-header-first'
+};
+
+export const themeScrollModeRecord: Record<UnionKey.ThemeScrollMode, I18n.I18nKey> = {
+  content: 'theme.layout.content.scrollMode.content',
+  wrapper: 'theme.layout.content.scrollMode.wrapper'
+};
+
+export const themeScrollModeOptions = transformRecordToOption(themeScrollModeRecord);
+
+export const themeTabModeRecord: Record<UnionKey.ThemeTabMode, I18n.I18nKey> = {
+  chrome: 'theme.layout.tab.mode.chrome',
+  button: 'theme.layout.tab.mode.button',
+  slider: 'theme.layout.tab.mode.slider'
+};
+
+export const themeTabModeOptions = transformRecordToOption(themeTabModeRecord);
+
+export const themePageAnimationModeRecord: Record<UnionKey.ThemePageAnimateMode, I18n.I18nKey> = {
+  'fade-slide': 'theme.layout.content.page.mode.fade-slide',
+  fade: 'theme.layout.content.page.mode.fade',
+  'fade-bottom': 'theme.layout.content.page.mode.fade-bottom',
+  'fade-scale': 'theme.layout.content.page.mode.fade-scale',
+  'zoom-fade': 'theme.layout.content.page.mode.zoom-fade',
+  'zoom-out': 'theme.layout.content.page.mode.zoom-out',
+  none: 'theme.layout.content.page.mode.none'
+};
+
+export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);
+
+export const watermarkTimeFormatOptions = [
+  { label: 'YYYY-MM-DD HH:mm', value: 'YYYY-MM-DD HH:mm' },
+  { label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
+  { label: 'YYYY/MM/DD HH:mm', value: 'YYYY/MM/DD HH:mm' },
+  { label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
+  { label: 'HH:mm', value: 'HH:mm' },
+  { label: 'HH:mm:ss', value: 'HH:mm:ss' },
+  { label: 'MM-DD HH:mm', value: 'MM-DD HH:mm' }
+];

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

@@ -0,0 +1,102 @@
+import { registerStorage } from '@skyroc/core-state';
+import type { AnyRoute } from '@tanstack/react-router';
+import type { ComponentType } from 'react';
+
+/** 布局持久化 atom 解析存储时使用的注册名。 */
+export const ADMIN_LAYOUTS_STORAGE = 'admin-layouts';
+
+export interface AdminLayoutsStorage {
+  /** 读取布局需要的本地缓存。 */
+  get<K extends keyof StorageType.Local>(key: K): StorageType.Local[K] | null;
+  /** 删除布局需要的本地缓存。 */
+  remove(key: keyof StorageType.Local): void;
+  /** 写入布局需要的本地缓存。 */
+  set<K extends keyof StorageType.Local>(key: K, value: StorageType.Local[K]): void;
+}
+
+export interface AdminLayoutMenuCategory {
+  /** 菜单分类标识，通常对应一个布局分组。 */
+  key: string;
+  /** TanStack Router 中承载该菜单分类的 layout route id。 */
+  layout: Router.RouteId;
+}
+
+export interface AdminLayoutsDynamicRoutes {
+  /** 动态菜单接口返回的首页。 */
+  home?: Router.RoutePath | null;
+  /** 动态菜单接口返回的路由树。 */
+  routes: Api.Route.BackendRoute[];
+}
+
+/** 菜单节点扩展配置，用于追加 divider、固定入口或项目级菜单节点。 */
+export type MenuNodeConfig = Partial<Omit<Api.Route.BackendRoute, 'layout' | 'parentId'>>;
+
+/**
+ * 菜单节点回调函数类型，用于在特定路由节点添加额外菜单。
+ *
+ * @param routeId 当前路由 ID
+ */
+export type MenuNodeCallback = (routeId: Router.RouteId) => MenuNodeConfig[];
+
+export interface AdminLayoutsOptions {
+  /** 默认首页路由。 */
+  defaultHome: Router.RoutePath;
+  /** 默认菜单图标。 */
+  defaultIcon: string;
+  /** 自定义菜单额外内容组件映射，用于标准 badge 无法覆盖的业务 UI。 */
+  extras?: Partial<Record<Router.Extra, ComponentType<any>>>;
+  /** 动态菜单加载器，仅 routeMode 为 dynamic 时使用。 */
+  loadDynamicRoutes?: () => Promise<AdminLayoutsDynamicRoutes>;
+  /** 菜单分类配置。 */
+  menuCategories: Record<string, AdminLayoutMenuCategory>;
+  /** 菜单节点扩展配置。 */
+  menuNodeCallback?: MenuNodeCallback;
+  /** 权限校验中的超级角色标识。 */
+  permissionSuperRole?: string;
+  /** 菜单生成模式。 */
+  routeMode: 'dynamic' | 'static';
+  /** TanStack Router 生成的 routeTree。 */
+  routeTree: AnyRoute;
+  /** 布局本地缓存适配器。 */
+  storage: AdminLayoutsStorage;
+}
+
+let options: AdminLayoutsOptions | null = null;
+
+export function setupAdminLayouts(adminLayoutsOptions: AdminLayoutsOptions) {
+  options = adminLayoutsOptions;
+
+  // 把宿主传入的 storage 桥接到 core-state 注册表，供 createAtomWithStorage 按名解析。
+  registerStorage(ADMIN_LAYOUTS_STORAGE, {
+    getItem: key => adminLayoutsOptions.storage.get(key as keyof StorageType.Local),
+    removeItem: key => adminLayoutsOptions.storage.remove(key as keyof StorageType.Local),
+    setItem: (key, value) =>
+      adminLayoutsOptions.storage.set(key as keyof StorageType.Local, value as StorageType.Local[keyof StorageType.Local])
+  });
+}
+
+export function getAdminLayoutsOptions() {
+  if (!options) {
+    throw new Error('Admin layouts are not initialized. Call setupAdminLayouts before rendering AdminLayout.');
+  }
+
+  return options;
+}
+
+export function getDefaultMenuCategoryKey() {
+  const { menuCategories } = getAdminLayoutsOptions();
+
+  return Object.values(menuCategories)[0]?.key ?? 'admin';
+}
+
+export function getMenuCategoryKey(layout: Router.RouteId) {
+  const { menuCategories } = getAdminLayoutsOptions();
+
+  return Object.values(menuCategories).find(category => category.layout === layout)?.key;
+}
+
+export function getConfiguredCategoryKeys() {
+  const { menuCategories } = getAdminLayoutsOptions();
+
+  return Object.values(menuCategories).map(category => category.key);
+}

package/templates/admin-shell/layouts/state/AdminEffect.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useSettingsTheme } from '@shell/theme';
+import { useEffect } from 'react';
+
+import { LAYOUT_MODE_VERTICAL } from '../constant';
+import { getAdminLayoutsOptions } from '../setup';
+import AdminTabEffect from './AdminTabEffect';
+import { useAdminState } from './use-admin-state';
+
+const AdminEffect = () => {
+  const { isMobile, mixSiderFixed, setSiderCollapse, siderCollapse } = useAdminState();
+
+  const { layout, setThemeLayout } = useSettingsTheme();
+  const { storage } = getAdminLayoutsOptions();
+
+  useEffect(() => {
+    if (isMobile) {
+      // backup theme setting before is mobile
+      storage.set('backupThemeSettingBeforeIsMobile', {
+        layout: layout.mode,
+        siderCollapse
+      });
+
+      setThemeLayout(LAYOUT_MODE_VERTICAL);
+
+      setSiderCollapse(true);
+    } else {
+      // when is not mobile, recover the backup theme setting
+      const backup = storage.get('backupThemeSettingBeforeIsMobile');
+
+      if (backup) {
+        setThemeLayout(backup.layout);
+
+        setSiderCollapse(backup.siderCollapse);
+
+        storage.remove('backupThemeSettingBeforeIsMobile');
+      }
+    }
+  }, [isMobile]);
+
+  useEffect(() => {
+    function handleBeforeUnload() {
+      storage.set('mixSiderFixed', mixSiderFixed ? 'Y' : 'N');
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [mixSiderFixed]);
+
+  return <AdminTabEffect />;
+};
+
+export default AdminEffect;

package/templates/admin-shell/layouts/state/AdminTabEffect.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import { useAdminTab } from './tabs/use-admin-tab';
+
+/**
+ * Admin Tab Effect Component
+ *
+ * This component handles tab caching on page unload and should be mounted in the admin layout
+ */
+const AdminTabEffect = () => {
+  const { cacheTabs } = useAdminTab();
+
+  useEffect(() => {
+    function handleBeforeUnload() {
+      cacheTabs();
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [cacheTabs]);
+
+  return null;
+};
+
+export default AdminTabEffect;

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

@@ -0,0 +1,3 @@
+export * from './AdminEffect';
+export * from './tabs';
+export * from './use-admin-state';