@skyroc/scripts 2.5.0

package/templates/admin-shell/layouts/materials/types/index.ts

@@ -0,0 +1,322 @@
+import type React from 'react';
+
+/** Header config */
+interface AdminLayoutHeaderConfig {
+  /**
+   * Header class
+   *
+   * @default ''
+   */
+  headerClass?: string;
+  /**
+   * Header height
+   *
+   * @default 56px
+   */
+  headerHeight?: number;
+  /**
+   * Whether header is visible
+   *
+   * @default true
+   */
+  headerVisible?: boolean;
+}
+
+/** Tab config */
+interface AdminLayoutTabConfig {
+  /**
+   * Tab class
+   *
+   * @default ''
+   */
+  tabClass?: string;
+  /**
+   * Tab height
+   *
+   * @default 48px
+   */
+  tabHeight?: number;
+  /**
+   * Whether tab is visible
+   *
+   * @default true
+   */
+  tabVisible?: boolean;
+  /** Update siderCollapse */
+  updateSiderCollapse: () => void;
+}
+
+/** Sider config */
+interface AdminLayoutSiderConfig {
+  /**
+   * Mobile sider class
+   *
+   * @default ''
+   */
+  mobileSiderClass?: string;
+  /**
+   * Sider class
+   *
+   * @default ''
+   */
+  siderClass?: string;
+  /**
+   * Sider collapse status
+   *
+   * @default false
+   */
+  siderCollapse?: boolean;
+  /**
+   * Sider width when collapse is true
+   *
+   * @default '64px'
+   */
+  siderCollapsedWidth?: number;
+  /**
+   * Whether sider is visible
+   *
+   * @default true
+   */
+  siderVisible?: boolean;
+  /**
+   * Sider width when collapse is false
+   *
+   * @default '220px'
+   */
+  siderWidth?: number;
+}
+
+/** Content config */
+export interface AdminLayoutContentConfig {
+  /**
+   * Content class
+   *
+   * @default ''
+   */
+  contentClass?: string;
+  /**
+   * Whether content is full the page
+   *
+   * If true, other elements will be hidden by `display: none`
+   */
+  fullContent?: boolean;
+}
+
+/** Footer config */
+export interface AdminLayoutFooterConfig {
+  /**
+   * Whether footer is fixed
+   *
+   * @default true
+   */
+  fixedFooter?: boolean;
+  /**
+   * Footer class
+   *
+   * @default ''
+   */
+  footerClass?: string;
+  /**
+   * Footer height
+   *
+   * @default 48px
+   */
+  footerHeight?: number;
+  /**
+   * Whether footer is visible
+   *
+   * @default true
+   */
+  footerVisible?: boolean;
+  /**
+   * Whether footer is on the right side
+   *
+   * When the layout is vertical, the footer is on the right side
+   */
+  rightFooter?: boolean;
+}
+
+/**
+ * Layout mode
+ *
+ * - Horizontal
+ * - Vertical
+ */
+export type LayoutMode = 'horizontal' | 'vertical';
+
+/**
+ * The scroll mode when content overflow
+ *
+ * - Wrapper: the layout component's wrapper element has a scrollbar
+ * - Content: the layout component's content element has a scrollbar
+ *
+ * @default 'wrapper'
+ */
+export type LayoutScrollMode = 'content' | 'wrapper';
+export type Slots = {
+  /** Main */
+  children?: React.ReactNode;
+  /** Footer */
+  Footer?: React.ReactNode;
+  /** Header */
+  Header?: React.ReactNode;
+  /** Sider */
+  Sider?: React.ReactNode;
+  /** Tab */
+  Tab?: React.ReactNode;
+};
+
+/** Admin layout props */
+export interface AdminLayoutProps
+  extends
+    AdminLayoutHeaderConfig,
+    AdminLayoutTabConfig,
+    AdminLayoutSiderConfig,
+    AdminLayoutContentConfig,
+    AdminLayoutFooterConfig,
+    Slots {
+  /**
+   * The common class of the layout
+   *
+   * Is can be used to configure the transition animation
+   *
+   * @default 'transition-all-300'
+   */
+  commonClass?: string;
+  /**
+   * Whether fix the header and tab
+   *
+   * @default true
+   */
+  fixedTop?: boolean;
+  /** Is mobile layout */
+  isMobile?: boolean;
+  /**
+   * The max z-index of the layout
+   *
+   * The z-index of Header,Tab,Sider and Footer will not exceed this value
+   */
+  maxZIndex?: number;
+  /**
+   * Layout mode
+   *
+   * - {@link LayoutMode}
+   */
+  mode?: LayoutMode;
+  /** The class of the scroll element */
+  scrollElClass?: string;
+  /**
+   * The id of the scroll element of the layout
+   *
+   * It can be used to get the corresponding Dom and scroll it
+   *
+   * @example
+   *   use the default id by import
+   *   ```ts
+   *   import { adminLayoutScrollElId } from '@sa/vue-materials';
+   *   ```
+   *
+   * @default
+   * ```ts
+   * const adminLayoutScrollElId = '__ADMIN_LAYOUT_SCROLL_EL_ID__'
+   * ```
+   */
+  scrollElId?: string;
+  /**
+   * Scroll mode
+   *
+   * - {@link ScrollMode}
+   */
+  scrollMode?: LayoutScrollMode;
+  /** The class of the scroll wrapper element */
+  scrollWrapperClass?: string;
+}
+
+type Kebab<S extends string> = S extends Uncapitalize<S> ? S : `-${Uncapitalize<S>}`;
+
+type KebabCase<S extends string> = S extends `${infer Start}${infer End}`
+  ? `${Uncapitalize<Start>}${KebabCase<Kebab<End>>}`
+  : S;
+
+type Prefix = '--soy-';
+
+export type LayoutCssVarsProps = Pick<
+  AdminLayoutProps,
+  'footerHeight' | 'headerHeight' | 'siderCollapsedWidth' | 'siderWidth' | 'tabHeight'
+> & {
+  footerZIndex?: number;
+  headerZIndex?: number;
+  mobileSiderZIndex?: number;
+  siderZIndex?: number;
+  tabZIndex?: number;
+};
+
+export type LayoutCssVars = {
+  [K in keyof LayoutCssVarsProps as `${Prefix}${KebabCase<K>}`]: string | number;
+};
+
+/**
+ * The mode of the tab
+ *
+ * - Button: button style
+ * - Chrome: chrome style
+ *
+ * @default chrome
+ */
+export type PageTabMode = 'button' | 'chrome' | 'slider';
+export type ButtonTabProps = PageTabProps &
+  Omit<React.ComponentProps<'div'>, 'className' | 'onClick' | 'prefix' | 'style'>;
+export interface PageTabProps {
+  /** Whether the tab is active */
+  active?: boolean;
+
+  /** The color of the active tab */
+  activeColor?: string;
+  /** The class of the button tab */
+  buttonClass?: string;
+  /** The class of the chrome tab */
+  chromeClass?: string;
+  className?: string;
+  /**
+   * Whether the tab is closable
+   *
+   * Show the close icon when true
+   */
+  closable?: boolean;
+  /**
+   * The common class of the layout
+   *
+   * Is can be used to configure the transition animation
+   *
+   * @default 'transition-all-300'
+   */
+  commonClass?: string;
+  /** Whether is dark mode */
+  darkMode?: boolean;
+  handleClose?: () => void;
+  /**
+   * The mode of the tab
+   *
+   * - {@link TabMode}
+   */
+  mode?: PageTabMode;
+  onClick: () => void;
+  prefix: React.ReactNode;
+  /** The class of the slider tab */
+  sliderClass?: string;
+  style?: React.CSSProperties;
+  suffix?: React.ReactNode;
+}
+
+export type PageTabCssVarsProps = {
+  primaryColor: string;
+  primaryColor1: string;
+  primaryColor2: string;
+  primaryColorOpacity1: string;
+  primaryColorOpacity2: string;
+  primaryColorOpacity3: string;
+};
+
+export type PageTabCssVars = {
+  [K in keyof PageTabCssVarsProps as `${Prefix}${KebabCase<K>}`]: string | number;
+};

package/templates/admin-shell/layouts/modules/AdminContent.tsx

@@ -0,0 +1,285 @@
+import { useSettingsTheme } from '@shell/theme';
+import { Outlet, RouterContextProvider, useRouter } from '@tanstack/react-router';
+import type { AnyRouter, RouterState } from '@tanstack/react-router';
+import type { Transition, Variants } from 'motion/react';
+import { motion } from 'motion/react';
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+
+import { useAdminLayoutContext } from '../context';
+import { useRoute } from '../features/use-route';
+import { getTabIdByRoute } from '../state/tabs/shared';
+import { useAdminTab } from '../state/tabs/use-admin-tab';
+import { useAdminState } from '../state/use-admin-state';
+
+const pageAnimationVariants: Record<Theme.ThemePageAnimateMode, Variants> = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 }
+  },
+  'fade-slide': {
+    initial: { opacity: 0, x: -30 },
+    animate: { opacity: 1, x: 0 }
+  },
+  'fade-bottom': {
+    initial: { opacity: 0, y: '-10%' },
+    animate: { opacity: 1, y: 0 }
+  },
+  'fade-scale': {
+    initial: { opacity: 0, scale: 1.2 },
+    animate: { opacity: 1, scale: 1 }
+  },
+  'zoom-fade': {
+    initial: { opacity: 0, scale: 0.92 },
+    animate: { opacity: 1, scale: 1 }
+  },
+  'zoom-out': {
+    initial: { opacity: 0, scale: 0 },
+    animate: { opacity: 1, scale: 1 }
+  },
+  none: {
+    initial: {},
+    animate: {}
+  }
+};
+
+const pageAnimationTransitions: Record<Theme.ThemePageAnimateMode, Transition> = {
+  fade: { duration: 0.3, ease: 'easeInOut' },
+  'fade-slide': { duration: 0.3, ease: 'easeInOut' },
+  'fade-bottom': { duration: 0.3, ease: 'easeInOut' },
+  'fade-scale': { duration: 0.28, ease: 'easeInOut' },
+  'zoom-fade': { duration: 0.3, ease: 'easeOut' },
+  'zoom-out': { duration: 0.15, ease: 'easeOut' },
+  none: { duration: 0 }
+};
+
+interface KeepAliveKeysOptions {
+  activeCacheKey: string;
+  routeKeepAlive?: boolean | null;
+  tabs: App.Global.Tab[];
+}
+
+type RouterStateSnapshot = RouterState<AnyRouter['routeTree']>;
+
+interface KeepAliveEntry {
+  /** 当前缓存项最近一次激活时的内容 key。 */
+  contentKey: string;
+  /** 当前缓存项对应的路由缓存 key。 */
+  key: string;
+  /** 当前缓存项最近一次激活时的 TanStack Router 状态快照。 */
+  routeState: RouterStateSnapshot;
+}
+
+interface StaticRouterStore {
+  /** 兼容 @tanstack/react-store 的快照读取方法。 */
+  get: () => RouterStateSnapshot;
+  /** 静态路由状态，供 TanStack 的 useRouterState 读取。 */
+  readonly state: RouterStateSnapshot;
+  /** 静态快照不会主动发布更新，但需要提供订阅接口。 */
+  subscribe: () => { unsubscribe: () => void };
+}
+
+interface KeepAliveEntriesOptions {
+  activeCacheKey: string;
+  contentKey: string;
+  entries: KeepAliveEntry[];
+  keepAliveKeys: string[];
+  routeState: RouterStateSnapshot;
+  shouldRenderContent: boolean;
+}
+
+interface CachedRoutePaneProps {
+  /** 当前缓存项是否是正在展示的页面。 */
+  active: boolean;
+  /** 当前页面动画模式。 */
+  animationMode: Theme.ThemePageAnimateMode;
+  /** 当前缓存项的路由缓存 key。 */
+  cacheKey: string;
+  /** 自定义内容插槽，未提供时渲染 TanStack Router Outlet。 */
+  content?: ReactNode;
+  /** 缓存项记录的内容 key，用于路由刷新时重新挂载内容。 */
+  contentKey: string;
+  /** 当前缓存项使用的路由状态快照。 */
+  routeState: RouterStateSnapshot;
+  /** 应用于页面动画的 transition 配置。 */
+  transition: Transition;
+  /** 应用于页面动画的 variants 配置。 */
+  variants: Variants;
+}
+
+function getPageAnimationMode(page?: Theme.ThemeSetting['page']) {
+  if (!page?.animate) {
+    return 'none';
+  }
+
+  return page.animateMode;
+}
+
+function getKeepAliveKeys(options: KeepAliveKeysOptions) {
+  const { activeCacheKey, routeKeepAlive, tabs } = options;
+
+  const keepAliveKeys = tabs.filter(tab => tab.keepAlive).map(tab => tab.id);
+
+  if (routeKeepAlive && activeCacheKey && !keepAliveKeys.includes(activeCacheKey)) {
+    keepAliveKeys.push(activeCacheKey);
+  }
+
+  return keepAliveKeys;
+}
+
+function getRouteCacheKey(route: ReturnType<typeof useRoute>) {
+  return getTabIdByRoute(route.originPath, route.staticData?.tab?.multi ?? false, route.fullPath);
+}
+
+function getRouteContentKey(route: ReturnType<typeof useRoute>) {
+  if (route.staticData?.tab?.multi) {
+    return route.fullPath || route.pathname;
+  }
+
+  return route.pathname || route.originPath;
+}
+
+function createStaticRouterStore(routeState: RouterStateSnapshot): StaticRouterStore {
+  return {
+    get state() {
+      return routeState;
+    },
+    get() {
+      return routeState;
+    },
+    subscribe() {
+      return {
+        unsubscribe() {}
+      };
+    }
+  };
+}
+
+function createSnapshotRouter(router: AnyRouter, routeState: RouterStateSnapshot) {
+  const snapshotRouter = Object.assign(Object.create(Object.getPrototypeOf(router)), router) as AnyRouter;
+
+  snapshotRouter.__store = createStaticRouterStore(routeState) as unknown as AnyRouter['__store'];
+  snapshotRouter.latestLocation = routeState.location;
+
+  return snapshotRouter;
+}
+
+function getKeepAliveEntries(options: KeepAliveEntriesOptions) {
+  const { activeCacheKey, contentKey, entries, keepAliveKeys, routeState, shouldRenderContent } = options;
+
+  const keepAliveKeySet = new Set(keepAliveKeys);
+  const nextEntries = entries.filter(entry => keepAliveKeySet.has(entry.key));
+
+  if (!shouldRenderContent) {
+    return nextEntries.filter(entry => entry.key !== activeCacheKey);
+  }
+
+  if (!keepAliveKeySet.has(activeCacheKey)) {
+    return nextEntries;
+  }
+
+  const activeEntry: KeepAliveEntry = {
+    key: activeCacheKey,
+    contentKey,
+    routeState
+  };
+  const activeEntryIndex = nextEntries.findIndex(entry => entry.key === activeCacheKey);
+
+  if (activeEntryIndex === -1) {
+    return [...nextEntries, activeEntry];
+  }
+
+  return nextEntries.map(entry => (entry.key === activeCacheKey ? activeEntry : entry));
+}
+
+const CachedRoutePane = (props: CachedRoutePaneProps) => {
+  const { active, animationMode, cacheKey, content, contentKey, routeState, transition, variants } = props;
+
+  const router = useRouter();
+  const snapshotRouter = createSnapshotRouter(router, routeState);
+
+  return (
+    <div
+      aria-hidden={!active}
+      className="h-full"
+      data-keep-alive-key={cacheKey}
+      style={{ display: active ? undefined : 'none' }}
+    >
+      <RouterContextProvider router={snapshotRouter}>
+        <motion.div
+          animate="animate"
+          className="h-full"
+          data-page-animation={animationMode}
+          initial={false}
+          key={contentKey}
+          transition={transition}
+          variants={variants}
+        >
+          {content ?? <Outlet />}
+        </motion.div>
+      </RouterContextProvider>
+    </div>
+  );
+};
+
+const GlobalContent = () => {
+  const { content } = useAdminLayoutContext();
+  const route = useRoute();
+  const router = useRouter();
+  const { tabs } = useAdminTab();
+  const { reloadFlag } = useAdminState();
+  const { page } = useSettingsTheme();
+  const keepAliveEntriesRef = useRef<KeepAliveEntry[]>([]);
+
+  const animationMode = getPageAnimationMode(page);
+  const contentKey = getRouteContentKey(route);
+  const activeCacheKey = getRouteCacheKey(route) || contentKey;
+  const routeKeepAlive = route.staticData?.keepAlive;
+  const keepAliveKeys = getKeepAliveKeys({ activeCacheKey, routeKeepAlive, tabs });
+  const shouldRenderContent = reloadFlag !== false;
+  const keepAliveEntries = getKeepAliveEntries({
+    activeCacheKey,
+    contentKey,
+    entries: keepAliveEntriesRef.current,
+    keepAliveKeys,
+    routeState: router.state,
+    shouldRenderContent
+  });
+  const isActiveRouteCached = keepAliveEntries.some(entry => entry.key === activeCacheKey);
+
+  keepAliveEntriesRef.current = keepAliveEntries;
+
+  return (
+    <div className="h-full grow overflow-x-hidden bg-layout p-16px">
+      {keepAliveEntries.map(entry => (
+        <CachedRoutePane
+          active={entry.key === activeCacheKey}
+          animationMode={animationMode}
+          cacheKey={entry.key}
+          content={content}
+          contentKey={entry.contentKey}
+          key={entry.key}
+          routeState={entry.routeState}
+          transition={pageAnimationTransitions[animationMode]}
+          variants={pageAnimationVariants[animationMode]}
+        />
+      ))}
+
+      {shouldRenderContent && !isActiveRouteCached && (
+        <motion.div
+          animate="animate"
+          className="h-full"
+          data-page-animation={animationMode}
+          initial="initial"
+          key={contentKey}
+          transition={pageAnimationTransitions[animationMode]}
+          variants={pageAnimationVariants[animationMode]}
+        >
+          {content ?? <Outlet />}
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export default GlobalContent;

package/templates/admin-shell/layouts/modules/AdminFooter.tsx

@@ -0,0 +1,13 @@
+import { DarkModeContainer } from '@shell/ui/compose';
+
+const GlobalFooter = () => {
+  return (
+    <DarkModeContainer className="h-full flex-center">
+      <a href="https://github.com/Ohh-889/skyroc-admin/blob/master/LICENSE" rel="noopener noreferrer" target="_blank">
+        Copyright MIT © 2021 Skyroc
+      </a>
+    </DarkModeContainer>
+  );
+};
+
+export default GlobalFooter;

package/templates/admin-shell/layouts/modules/AdminLogo.tsx

@@ -0,0 +1,28 @@
+import { Link } from '@tanstack/react-router';
+import { clsx } from 'clsx';
+
+import type { AdminLayoutLogoProps } from '../context';
+import { getAdminLayoutsOptions } from '../setup';
+
+const AdminLogo = (props: AdminLayoutLogoProps) => {
+  const { className, logo, showTitle = true, style, title, to } = props;
+
+  const targetPath = to ?? getAdminLayoutsOptions().defaultHome;
+
+  return (
+    <Link className={clsx('w-full flex-center nowrap-hidden', className)} style={style} to={targetPath}>
+      {logo}
+
+      {title ? (
+        <h2
+          className="pl-8px text-md text-primary font-bold transition duration-300 ease-in-out"
+          style={{ display: showTitle ? 'block' : 'none' }}
+        >
+          {title}
+        </h2>
+      ) : null}
+    </Link>
+  );
+};
+
+export default AdminLogo;

package/templates/admin-shell/layouts/modules/AdminSider.tsx

@@ -0,0 +1,50 @@
+import { useSettingsTheme } from '@shell/theme';
+import { DarkModeContainer } from '@shell/ui/compose';
+import { memo } from 'react';
+
+import {
+  GLOBAL_SIDER_MENU_ID,
+  LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST,
+  LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST,
+  LAYOUT_MODE_VERTICAL
+} from '../constant';
+import { useAdminLayoutContext } from '../context';
+import { useAdminState } from '../state/use-admin-state';
+import LayoutLogo from './shared/logo';
+
+const GlobalSider = memo(() => {
+  const { logo, logoComponent, logoTitle, logoTo } = useAdminLayoutContext();
+  const { darkMode, header, layout, sider } = useSettingsTheme();
+  const { siderCollapse } = useAdminState();
+
+  const isTopHybridSidebarFirst = layout.mode === LAYOUT_MODE_TOP_HYBRID_SIDEBAR_FIRST;
+  const isTopHybridHeaderFirst = layout.mode === LAYOUT_MODE_TOP_HYBRID_HEADER_FIRST;
+
+  const darkMenu = !darkMode && !isTopHybridSidebarFirst && !isTopHybridHeaderFirst && sider.inverted;
+
+  const showLogo = layout.mode === LAYOUT_MODE_VERTICAL;
+
+  const headerHeight = header.height;
+
+  const menuWrapperClass = showLogo ? 'flex-1-hidden' : 'h-full';
+
+  const hasLogo = Boolean(logo || logoComponent || logoTitle);
+
+  return (
+    <DarkModeContainer className="size-full flex-col-stretch shadow-sider" inverted={darkMenu}>
+      {showLogo && hasLogo ? (
+        <LayoutLogo
+          logo={logo}
+          logoComponent={logoComponent}
+          showTitle={!siderCollapse}
+          style={{ height: `${headerHeight}px` }}
+          title={logoTitle}
+          to={logoTo}
+        />
+      ) : null}
+      <div className={menuWrapperClass} id={GLOBAL_SIDER_MENU_ID} />
+    </DarkModeContainer>
+  );
+});
+
+export default GlobalSider;