@skyroc/scripts 2.5.0

package/templates/admin-shell/theme/antd-algorithm/shared/genSizeMapToken.ts

@@ -0,0 +1,114 @@
+import type { SizeMapToken } from 'antd/lib/theme/interface';
+
+/**
+ * Spacing configuration
+ *
+ * Based on UnoCSS spacing rules, using sizeUnit as base unit Default sizeUnit = 4px
+ *
+ * | Name | Multiplier | px (sizeUnit=4) |
+ * | ---- | ---------- | --------------- |
+ * | 3xs  | 1          | 4               |
+ * | 2xs  | 2          | 8               |
+ * | xs   | 3          | 12              |
+ * | md   | 4          | 16              |
+ * | lg   | 5          | 20              |
+ * | xl   | 6          | 24              |
+ * | 2xl  | 8          | 32              |
+ * | 3xl  | 10         | 40              |
+ * | 4xl  | 12         | 48              |
+ * | 5xl  | 16         | 64              |
+ * | 6xl  | 20         | 80              |
+ * | 7xl  | 24         | 96              |
+ * | 8xl  | 32         | 128             |
+ * | 9xl  | 36         | 144             |
+ */
+
+/** Spacing multipliers (based on sizeUnit) */
+export const SPACING_MULTIPLIERS = {
+  '3xs': 1, // 4px (sizeUnit * 1)
+  '2xs': 2, // 8px (sizeUnit * 2)
+  xs: 3, // 12px (sizeUnit * 3)
+  md: 4, // 16px (sizeUnit * 4)
+  lg: 5, // 20px (sizeUnit * 5)
+  xl: 6, // 24px (sizeUnit * 6)
+  '2xl': 8, // 32px (sizeUnit * 8)
+  '3xl': 10, // 40px (sizeUnit * 10)
+  '4xl': 12, // 48px (sizeUnit * 12)
+  '5xl': 16, // 64px (sizeUnit * 16)
+  '6xl': 20, // 80px (sizeUnit * 20)
+  '7xl': 24, // 96px (sizeUnit * 24)
+  '8xl': 32, // 128px (sizeUnit * 32)
+  '9xl': 36 // 144px (sizeUnit * 36)
+} as const;
+
+export type SpacingSizeKey = keyof typeof SPACING_MULTIPLIERS;
+
+/**
+ * Calculate spacing size
+ *
+ * @param multiplier Multiplier
+ * @param sizeUnit Base unit (default 4)
+ */
+export function calcSpacing(multiplier: number, sizeUnit = 4): number {
+  return sizeUnit * multiplier;
+}
+
+/**
+ * Generate size map token
+ *
+ * Based on sizeUnit, generate Ant Design style size tokens
+ *
+ * Mapping (sizeUnit = 4): - sizeXXS: 3xs (4px) = sizeUnit * 1 - sizeXS: 2xs (8px) = sizeUnit * 2 - sizeSM: xs (12px) =
+ * sizeUnit * 3 - size/sizeMS: md (16px) = sizeUnit * 4 - sizeMD: lg (20px) = sizeUnit * 5 - sizeLG: xl (24px) =
+ * sizeUnit * 6 - sizeXL: 2xl (32px) = sizeUnit * 8 - sizeXXL: 4xl (48px) = sizeUnit * 12
+ *
+ * @param sizeUnit Base unit (px), default 4
+ */
+export function genSizeMapToken(sizeUnit = 4): SizeMapToken {
+  return {
+    // Ant Design standard size tokens
+    sizeXXS: sizeUnit * SPACING_MULTIPLIERS['3xs'], // 4px
+    sizeXS: sizeUnit * SPACING_MULTIPLIERS['2xs'], // 8px
+    sizeSM: sizeUnit * SPACING_MULTIPLIERS.xs, // 12px
+    sizeMS: sizeUnit * SPACING_MULTIPLIERS.md, // 16px
+    size: sizeUnit * SPACING_MULTIPLIERS.md, // 16px
+    sizeMD: sizeUnit * SPACING_MULTIPLIERS.lg, // 20px
+    sizeLG: sizeUnit * SPACING_MULTIPLIERS.xl, // 24px
+    sizeXL: sizeUnit * SPACING_MULTIPLIERS['2xl'], // 32px
+    sizeXXL: sizeUnit * SPACING_MULTIPLIERS['4xl'] // 48px
+  };
+}
+
+/**
+ * Generate complete spacing table
+ *
+ * @param sizeUnit Base unit (px), default 4
+ */
+export function genSpacingSizes(sizeUnit = 4): Record<SpacingSizeKey, number> {
+  return Object.entries(SPACING_MULTIPLIERS).reduce(
+    (acc, [key, multiplier]) => {
+      acc[key as SpacingSizeKey] = sizeUnit * multiplier;
+      return acc;
+    },
+    {} as Record<SpacingSizeKey, number>
+  );
+}
+
+/**
+ * Generate spacing CSS variables
+ *
+ * @param sizeUnit Base unit (px), default 4
+ */
+export function genSpacingVars(sizeUnit = 4): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, multiplier] of Object.entries(SPACING_MULTIPLIERS)) {
+    const px = sizeUnit * multiplier;
+    result[`spacing-${key}`] = `${px}px`;
+    result[`spacing${key.replace(/^(\d)/, '_$1')}`] = `${px}px`; // spacing_3xs, spacing_2xs, etc.
+  }
+
+  return result;
+}
+
+export default genSizeMapToken;

package/templates/admin-shell/theme/antd-algorithm/types/index.ts

@@ -0,0 +1,20 @@
+import type { ColorNeutralMapToken } from 'antd/lib/theme/interface';
+
+// Re-export antd types for convenience
+export type { ColorMapToken, ColorNeutralMapToken, MapToken, SeedToken } from 'antd/lib/theme/interface';
+
+/** Color palette mapping (1-10 and 50-950 indexes) antd uses 1-10 indexes, Tailwind uses 50-950 indexes */
+export interface ColorMap {
+  [key: number]: string;
+}
+
+/** Color palette generator function type */
+export type GenerateColorMap = (baseColor: string) => ColorMap;
+
+/** Neutral color generator function type */
+export type GenerateNeutralColorMap = (bgBaseColor: string, textBaseColor: string) => ColorNeutralMapToken;
+
+/** Palette generators configuration */
+export interface PaletteGenerators {
+  generateNeutralColorPalettes: GenerateNeutralColorMap;
+}

package/templates/admin-shell/theme/components/ThemeEffect.tsx

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useTheme } from '../hooks/use-theme';
+import { getInternalStorage } from '../setup';
+import { toggleAuxiliaryColorModes, toggleCssDarkMode } from '../utils';
+
+const STORAGE_KEYS = {
+  darkMode: 'darkMode',
+  themeColor: 'themeColor',
+  themeSettings: 'themeSettings'
+} as const;
+
+const ThemeEffect = () => {
+  const { colourWeaknessMode, darkMode, grayscaleMode, settings, themeColors, updateWatermarkTimer, watermark } =
+    useTheme();
+
+  function cacheThemeSettings() {
+    if (import.meta.env.DEV) return;
+    getInternalStorage()?.set(STORAGE_KEYS.themeSettings, settings);
+  }
+
+  // Cache theme settings when page is closed or refreshed
+  useEffect(() => {
+    function handleBeforeUnload() {
+      cacheThemeSettings();
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, []);
+
+  // Watch dark mode
+  useEffect(() => {
+    toggleCssDarkMode(darkMode);
+    getInternalStorage()?.set(STORAGE_KEYS.darkMode, darkMode);
+  }, [darkMode]);
+
+  // Watch grayscale and colour weakness modes
+  useEffect(() => {
+    toggleAuxiliaryColorModes(grayscaleMode, colourWeaknessMode);
+  }, [grayscaleMode, colourWeaknessMode]);
+
+  // Watch theme colors change, update storage theme color
+  useEffect(() => {
+    getInternalStorage()?.set(STORAGE_KEYS.themeColor, themeColors.primary);
+  }, [themeColors]);
+
+  // Watch watermark settings to control timer
+  useEffect(() => {
+    updateWatermarkTimer();
+  }, [watermark.visible, watermark.enableTime]);
+
+  return null;
+};
+
+export default ThemeEffect;

package/templates/admin-shell/theme/components/ThemeSchemaSegmented.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon } from '@shell/ui/compose';
+import type { SegmentedOptions } from 'antd/es/segmented';
+import Segmented from 'antd/es/segmented';
+import { useTheme } from '../hooks/use-theme';
+import { icons } from './shared';
+
+const ThemeMode = ['auto', 'dark', 'light'] satisfies Theme.ThemeMode[];
+
+const OPTIONS = Object.values(ThemeMode).map(item => {
+  const key = item;
+  return {
+    label: (
+      <div className="w-[70px] flex justify-center">
+        <SvgIcon className="text-icon-small h-28px" icon={icons[key]} />
+      </div>
+    ),
+    value: item
+  };
+}) satisfies SegmentedOptions;
+
+const ThemeSchemaSegmented = () => {
+  const { setThemeScheme, themeScheme } = useTheme();
+
+  return <Segmented className="bg-layout" options={OPTIONS} value={themeScheme} onChange={setThemeScheme} />;
+};
+
+export default ThemeSchemaSegmented;

package/templates/admin-shell/theme/components/ThemeSchemaSwitch.tsx

@@ -0,0 +1,77 @@
+import { ButtonIcon } from '@shell/ui/antd';
+import type { ButtonProps, TooltipProps } from 'antd';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
+import { useTheme } from '../hooks/use-theme';
+import { icons } from './shared';
+
+interface ThemeSchemaSwitchProps {
+  /** Custom class name */
+  className?: string;
+  /** Show tooltip */
+  showTooltip?: boolean;
+  /** Custom style */
+  style?: CSSProperties;
+  /** Tooltip content text */
+  tooltipContent?: string;
+  /** Tooltip placement */
+  tooltipPlacement?: TooltipProps['placement'];
+}
+
+const DEFAULT_ANIMATION_DURATION = 400;
+const DEFAULT_ANIMATION_EASING = 'ease-in-out';
+
+const ThemeSchemaSwitch = memo((props: ThemeSchemaSwitchProps) => {
+  const { className, showTooltip = true, style, tooltipContent = 'Theme Schema', tooltipPlacement = 'bottom' } = props;
+
+  const { themeScheme, toggleThemeScheme } = useTheme();
+
+  const resolvedTooltip = showTooltip ? tooltipContent : '';
+  const hoverAnimation = themeScheme === 'light' ? 'rotate' : 'scale';
+
+  const toggleDark: ButtonProps['onClick'] = async event => {
+    const isAppearanceTransition = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (!isAppearanceTransition) {
+      toggleThemeScheme();
+      return;
+    }
+
+    await document.startViewTransition(() => {
+      toggleThemeScheme();
+    }).ready;
+
+    if (themeScheme === 'auto') return;
+
+    const x = event.clientX;
+    const y = event.clientY;
+    const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+
+    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
+
+    document.documentElement.animate(
+      {
+        clipPath
+      },
+      {
+        duration: DEFAULT_ANIMATION_DURATION,
+        easing: DEFAULT_ANIMATION_EASING,
+        pseudoElement: '::view-transition-new(root)'
+      }
+    );
+  };
+
+  return (
+    <ButtonIcon
+      className={className}
+      hoverAnimation={hoverAnimation}
+      icon={icons[themeScheme]}
+      style={style}
+      tooltipContent={resolvedTooltip}
+      tooltipPlacement={tooltipPlacement}
+      onClick={toggleDark}
+    />
+  );
+});
+
+export default ThemeSchemaSwitch;

package/templates/admin-shell/theme/components/shared.ts

@@ -0,0 +1,5 @@
+export const icons: Record<Theme.ThemeMode, string> = {
+  dark: 'material-symbols:nightlight-rounded',
+  light: 'material-symbols:sunny',
+  auto: 'material-symbols:hdr-auto'
+};

package/templates/admin-shell/theme/config/default.ts

@@ -0,0 +1,108 @@
+/** Theme scheme icons */
+export const themeSchemeIcons: Record<'auto' | 'dark' | 'light', string> = {
+  dark: 'material-symbols:nightlight-rounded',
+  light: 'material-symbols:sunny',
+  auto: 'material-symbols:hdr-auto'
+};
+
+/** Default theme settings */
+export const defaultThemeSettings: Theme.ThemeSetting = {
+  themeScheme: 'light',
+  grayscale: false,
+  colourWeakness: false,
+  recommendColor: false,
+  themeColor: '#6366F1',
+  themeRadius: 6,
+  otherColor: {
+    info: '#0EA5E9',
+    success: '#10B981',
+    warning: '#F59E0B',
+    error: '#F43F5E'
+  },
+  isInfoFollowPrimary: false,
+  themeTextSize: 14,
+  layout: {
+    mode: 'vertical',
+    scrollMode: 'content'
+  },
+  page: {
+    animate: true,
+    animateMode: 'fade-slide'
+  },
+  header: {
+    height: 56,
+    breadcrumb: {
+      visible: true,
+      showIcon: true
+    },
+    multilingual: {
+      visible: true
+    },
+    globalSearch: {
+      visible: true
+    }
+  },
+  tab: {
+    visible: true,
+    cache: true,
+    height: 44,
+    mode: 'chrome',
+    closeTabByMiddleClick: false
+  },
+  fixedHeaderAndTab: true,
+  sider: {
+    inverted: false,
+    width: 220,
+    collapsedWidth: 64,
+    mixWidth: 90,
+    mixCollapsedWidth: 64,
+    mixChildMenuWidth: 200,
+    autoSelectFirstMenu: false
+  },
+  footer: {
+    visible: true,
+    fixed: false,
+    height: 48,
+    right: true
+  },
+  watermark: {
+    visible: false,
+    text: 'SkyrocAdmin',
+    enableCustomText: true,
+    enableUserName: false,
+    enableTime: false,
+    timeFormat: 'YYYY-MM-DD HH:mm',
+    settings: {
+      font: {
+        fontSize: 16
+      },
+      height: 64,
+      offset: [12, 60],
+      rotate: -15,
+      width: 344,
+      zIndex: 9999
+    }
+  },
+  tokens: {
+    light: {
+      colors: {
+        container: 'rgb(255, 255, 255)',
+        layout: 'rgb(247, 250, 252)',
+        inverted: 'rgb(0, 20, 40)',
+        'base-text': 'rgb(31, 31, 31)'
+      },
+      boxShadow: {
+        header: '0 1px 2px rgb(0, 21, 41, 0.08)',
+        sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
+        tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      }
+    },
+    dark: {
+      colors: {
+        container: 'rgb(28, 28, 28)',
+        layout: 'rgb(18, 18, 18)',
+        'base-text': 'rgb(224, 224, 224)'
+      }
+    }
+  }
+};

package/templates/admin-shell/theme/config/index.ts

@@ -0,0 +1 @@
+export { defaultThemeSettings, themeSchemeIcons } from './default';

package/templates/admin-shell/theme/hooks/index.ts

@@ -0,0 +1,2 @@
+export { themeSettingsAtom, themeUserNameAtom, useTheme } from './use-theme';
+export type { UseThemeReturn } from './use-theme';

package/templates/admin-shell/theme/hooks/use-theme.ts

@@ -0,0 +1,244 @@
+import { getPaletteColorByNumber } from '@skyroc/color';
+import { useNow, useSystemTheme } from '@skyroc/hooks/web';
+import { formatDateTime } from '@skyroc/utils';
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { useMemo } from 'react';
+import { defaultThemeSettings } from '../config/default';
+import type { ThemeColor, ThemeColorKey, ThemeLayoutMode, ThemeMode } from '../types';
+
+/** Theme settings atom - single source of truth */
+export const themeSettingsAtom = atom<Theme.ThemeSetting>(defaultThemeSettings);
+
+/** 用户名 atom — 由 AntdProvider 写入，useTheme 内部读取 */
+export const themeUserNameAtom = atom<string | undefined>(undefined);
+
+/**
+ * Web theme hook
+ *
+ * Provides theme state management with a simple single-atom approach. Derived values (isDarkMode, themeColors, tokens)
+ * are computed via useMemo.
+ *
+ * UserName 通过 themeUserNameAtom 全局共享， 由 AntdProvider 自动写入，所有调用者无需传参即可获取完整的 watermarkContent。
+ */
+export function useTheme() {
+  const userName = useAtomValue(themeUserNameAtom);
+
+  const [settings, setSettingsAtom] = useAtom(themeSettingsAtom);
+
+  const { isDarkMode: systemIsDark } = useSystemTheme();
+
+  const {
+    now: watermarkTime,
+    pause: pauseWatermarkTime,
+    resume: resumeWatermarkTime
+  } = useNow({ interval: 1000, immediate: settings.watermark.visible });
+
+  /** Dark mode */
+  const darkMode = useMemo(() => {
+    if (settings.themeScheme === 'auto') {
+      return systemIsDark;
+    }
+    return settings.themeScheme === 'dark';
+  }, [settings.themeScheme, systemIsDark]);
+
+  /** Grayscale mode */
+  const grayscaleMode = settings.grayscale;
+
+  /** Colour weakness mode */
+  const colourWeaknessMode = settings.colourWeakness;
+
+  /** Theme colors */
+  const themeColors = useMemo<ThemeColor>(() => {
+    const { isInfoFollowPrimary, otherColor, themeColor } = settings;
+    return {
+      primary: themeColor,
+      ...otherColor,
+      info: isInfoFollowPrimary ? themeColor : otherColor.info
+    };
+  }, [settings.themeColor, settings.otherColor, settings.isInfoFollowPrimary]);
+
+  /** Settings JSON for comparison */
+  const settingsJson = useMemo(() => JSON.stringify(settings), [settings]);
+
+  /** Watermark time date formatter */
+  const formattedWatermarkTime = useMemo(() => {
+    const { watermark } = settings;
+    return formatDateTime(watermarkTime, watermark.timeFormat);
+  }, [watermarkTime, settings.watermark.timeFormat]);
+
+  /** Watermark content */
+  const watermarkContent = useMemo(() => {
+    const { watermark } = settings;
+
+    if (!watermark.visible) return '';
+
+    let content = watermark.text;
+
+    if (watermark.enableUserName && userName) {
+      content = `${content} - ${userName}`;
+    }
+
+    if (watermark.enableTime) {
+      content = `${content} - ${formattedWatermarkTime}`;
+    }
+
+    return content;
+  }, [settings.watermark, userName, formattedWatermarkTime]);
+
+  /** Update settings with partial update */
+  function setSettings(update: Partial<Theme.ThemeSetting>) {
+    setSettingsAtom(prev => ({ ...prev, ...update }));
+  }
+
+  /**
+   * Set theme scheme
+   *
+   * @param themeScheme
+   */
+  function setThemeScheme(themeScheme: ThemeMode) {
+    setSettings({ themeScheme });
+  }
+
+  /**
+   * Set grayscale value
+   *
+   * @param isGrayscale
+   */
+  function setGrayscale(isGrayscale: boolean) {
+    setSettings({ grayscale: isGrayscale });
+  }
+
+  /**
+   * Set colourWeakness value
+   *
+   * @param isColourWeakness
+   */
+  function setColourWeakness(isColourWeakness: boolean) {
+    setSettings({ colourWeakness: isColourWeakness });
+  }
+
+  /** Toggle theme scheme */
+  function toggleThemeScheme() {
+    const themeSchemes: ThemeMode[] = ['light', 'dark', 'auto'];
+
+    const index = themeSchemes.findIndex(item => item === settings.themeScheme);
+
+    const nextIndex = index === themeSchemes.length - 1 ? 0 : index + 1;
+
+    const nextThemeScheme = themeSchemes[nextIndex];
+
+    setThemeScheme(nextThemeScheme);
+  }
+
+  /**
+   * Update theme colors
+   *
+   * @param key Theme color key
+   * @param color Theme color
+   */
+  function updateThemeColors(key: ThemeColorKey, color: string) {
+    let colorValue = color;
+
+    if (settings.recommendColor) {
+      // get a color palette by provided color and color name, and use the suitable color
+      colorValue = getPaletteColorByNumber(color, 500, 'recommended');
+    }
+
+    if (key === 'primary') {
+      setSettings({ themeColor: colorValue });
+    } else {
+      setSettings({ otherColor: { ...settings.otherColor, [key]: colorValue } });
+    }
+  }
+
+  /**
+   * Set theme layout
+   *
+   * @param mode Theme layout mode
+   */
+  function setThemeLayout(mode: ThemeLayoutMode) {
+    setSettings({
+      layout: {
+        ...settings.layout,
+        mode
+      }
+    });
+  }
+
+  /**
+   * Set watermark enable user name
+   *
+   * @param enable Whether to enable user name watermark
+   */
+  function setWatermarkEnableUserName(enable: boolean) {
+    const update = {
+      watermark: {
+        ...settings.watermark,
+        enableUserName: enable
+      }
+    };
+
+    setSettings(update);
+  }
+
+  /**
+   * Set watermark enable time
+   *
+   * @param enable Whether to enable time watermark
+   */
+  function setWatermarkEnableTime(enable: boolean) {
+    const update = {
+      watermark: {
+        ...settings.watermark,
+        enableTime: enable
+      }
+    };
+
+    setSettings(update);
+  }
+
+  /** Only run timer when watermark is visible and time display is enabled */
+  function updateWatermarkTimer() {
+    const { watermark } = settings;
+
+    const shouldRunTimer = watermark.visible && watermark.enableTime;
+
+    if (shouldRunTimer) {
+      resumeWatermarkTime();
+    } else {
+      pauseWatermarkTime();
+    }
+  }
+
+  /** Reset to default settings */
+  function reset() {
+    setSettingsAtom(defaultThemeSettings);
+  }
+
+  return {
+    settings,
+    // Settings properties
+    ...settings,
+    // Computed values
+    darkMode,
+    themeColors,
+    settingsJson,
+    watermarkContent,
+    grayscaleMode,
+    colourWeaknessMode,
+    // Methods
+    setGrayscale,
+    setColourWeakness,
+    setThemeScheme,
+    toggleThemeScheme,
+    updateThemeColors,
+    updateWatermarkTimer,
+    setThemeLayout,
+    setWatermarkEnableUserName,
+    setWatermarkEnableTime,
+    setSettings,
+    reset
+  };
+}
+
+export type UseThemeReturn = ReturnType<typeof useTheme>;