@skyroc/scripts 2.5.0

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

@@ -0,0 +1,78 @@
+// Antd
+export {
+  AntdProvider,
+  destroyMessage,
+  destroyNotification,
+  getAntdTheme,
+  showConfirmModal,
+  showErrorMessage,
+  showErrorModal,
+  showErrorNotification,
+  showInfoMessage,
+  showInfoModal,
+  showInfoNotification,
+  showLoadingMessage,
+  showMessage,
+  showModal,
+  showNotification,
+  showSuccessMessage,
+  showSuccessModal,
+  showSuccessNotification,
+  showWarningMessage,
+  showWarningModal,
+  showWarningNotification
+} from './antd';
+
+// Components
+export { default as ThemeEffect } from './components/ThemeEffect';
+export { default as ThemeSchemaSegmented } from './components/ThemeSchemaSegmented';
+export { default as ThemeSchemaSwitch } from './components/ThemeSchemaSwitch';
+
+// Config
+export { defaultThemeSettings, themeSchemeIcons } from './config';
+
+// Hooks
+export { themeSettingsAtom, themeUserNameAtom, useTheme, useTheme as useSettingsTheme } from './hooks';
+export type { UseThemeReturn } from './hooks';
+
+// Presets
+export { azir, compact, dark, defaultPreset, getAllPresets, getPreset, presets, shadcn } from './presets';
+export type { PresetName } from './presets';
+
+// Setup
+export { defineThemeOverrides, setupTheme } from './setup';
+
+// Types
+export type {
+  BaseToken,
+  BaseWatermarkSettings,
+  ColorPaletteNumber,
+  OtherColor,
+  ThemeColor,
+  ThemeColorKey,
+  ThemeIcons,
+  ThemeLayoutMode,
+  ThemeMode,
+  ThemePageAnimateMode,
+  ThemePaletteColor,
+  ThemePreset,
+  ThemePresetMeta,
+  ThemeScrollMode,
+  ThemeSettingToken,
+  ThemeSettingTokenBoxShadow,
+  ThemeSettingTokenColor,
+  ThemeTabMode,
+  ThemeTokenColor,
+  ThemeTokenCSSVars
+} from './types';
+
+// Utils
+export {
+  clearAuxiliaryColorModes,
+  getDefaultThemeSettings,
+  getThemeColors,
+  isDarkModeClass,
+  mergeThemeSettings,
+  toggleAuxiliaryColorModes,
+  toggleCssDarkMode
+} from './utils';

package/templates/admin-shell/theme/presets/azir.json

@@ -0,0 +1,39 @@
+{
+  "name": "Azir's Preset",
+  "desc": "It is a cold and elegant preset that Azir likes",
+  "i18nkey": "theme.appearance.preset.azir",
+  "version": "1.0.1",
+  "order": 4,
+  "themeScheme": "light",
+  "recommendColor": true,
+  "themeColor": "#78a878",
+  "otherColor": {
+    "info": "#89b989",
+    "success": "#99c299",
+    "warning": "#d4bb9d",
+    "error": "#c49a9a"
+  },
+  "isInfoFollowPrimary": true,
+  "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/presets/compact.json

@@ -0,0 +1,38 @@
+{
+  "name": "Compact Preset",
+  "desc": "Compact layout preset for small screens",
+  "i18nkey": "theme.appearance.preset.compact",
+  "version": "1.0.1",
+  "order": 6,
+  "themeRadius": 6,
+  "header": {
+    "height": 48,
+    "breadcrumb": {
+      "visible": false
+    },
+    "multilingual": {
+      "visible": false
+    },
+    "globalSearch": {
+      "visible": false
+    }
+  },
+  "tab": {
+    "visible": true,
+    "cache": true,
+    "height": 36,
+    "mode": "button",
+    "closeTabByMiddleClick": false
+  },
+  "sider": {
+    "inverted": false,
+    "width": 180,
+    "collapsedWidth": 48,
+    "mixWidth": 80,
+    "mixCollapsedWidth": 48,
+    "mixChildMenuWidth": 180
+  },
+  "footer": {
+    "visible": false
+  }
+}

package/templates/admin-shell/theme/presets/dark.json

@@ -0,0 +1,93 @@
+{
+  "name": "Dark Preset",
+  "desc": "Dark theme preset for night time usage",
+  "i18nkey": "theme.appearance.preset.dark",
+  "version": "1.0.1",
+  "order": 5,
+  "themeScheme": "dark",
+  "grayscale": false,
+  "colourWeakness": false,
+  "recommendColor": false,
+  "themeColor": "#646cff",
+  "otherColor": {
+    "info": "#2080f0",
+    "success": "#52c41a",
+    "warning": "#faad14",
+    "error": "#f5222d"
+  },
+  "themeRadius": 6,
+  "isInfoFollowPrimary": true,
+  "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
+  },
+  "footer": {
+    "visible": true,
+    "fixed": false,
+    "height": 48,
+    "right": true
+  },
+  "watermark": {
+    "visible": false,
+    "text": "SoybeanAdmin",
+    "enableCustomText": true,
+    "enableUserName": false,
+    "enableTime": false,
+    "timeFormat": "YYYY-MM-DD HH:mm"
+  },
+  "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/presets/default.json

@@ -0,0 +1,95 @@
+{
+  "name": "default",
+  "desc": "Default theme preset with balanced settings",
+  "i18nkey": "theme.appearance.preset.default",
+  "version": "1.0.0",
+  "order": 1,
+  "themeScheme": "light",
+  "grayscale": false,
+  "colourWeakness": false,
+  "recommendColor": false,
+  "themeColor": "#646cff",
+  "otherColor": {
+    "info": "#2080f0",
+    "success": "#52c41a",
+    "warning": "#faad14",
+    "error": "#f5222d"
+  },
+  "themeRadius": 6,
+  "isInfoFollowPrimary": true,
+  "themeTextSize": 16,
+  "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": "SoybeanAdmin",
+    "enableCustomText": true,
+    "enableUserName": false,
+    "enableTime": false,
+    "timeFormat": "YYYY-MM-DD HH:mm"
+  },
+  "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/presets/index.ts

@@ -0,0 +1,29 @@
+import azir from './azir.json';
+import compact from './compact.json';
+import dark from './dark.json';
+import defaultPreset from './default.json';
+import shadcn from './shadcn.json';
+
+/** All available presets */
+export const presets = {
+  azir,
+  compact,
+  dark,
+  default: defaultPreset,
+  shadcn
+} as const;
+
+/** Preset names */
+export type PresetName = keyof typeof presets;
+
+/** Get preset by name */
+export function getPreset(name: PresetName): Theme.ThemePreset {
+  return presets[name] as Theme.ThemePreset;
+}
+
+/** Get all presets sorted by order */
+export function getAllPresets(): Theme.ThemePreset[] {
+  return Object.values(presets).toSorted((a, b) => (a.order ?? 0) - (b.order ?? 0)) as Theme.ThemePreset[];
+}
+
+export { azir, compact, dark, defaultPreset, shadcn };

package/templates/admin-shell/theme/presets/shadcn.json

@@ -0,0 +1,99 @@
+{
+  "name": "shadcn",
+  "desc": "Modern and elegant theme inspired by shadcn/ui design system with neutral tones",
+  "i18nkey": "theme.appearance.preset.shadcn",
+  "version": "1.0.0",
+  "order": 3,
+  "themeScheme": "light",
+  "grayscale": false,
+  "colourWeakness": false,
+  "recommendColor": false,
+  "themeColor": "#18181b",
+  "otherColor": {
+    "info": "#0ea5e9",
+    "success": "#10b981",
+    "warning": "#f59e0b",
+    "error": "#ef4444"
+  },
+  "themeRadius": 8,
+  "themeTextSize": 14,
+  "isInfoFollowPrimary": false,
+  "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": true
+  },
+  "fixedHeaderAndTab": true,
+  "sider": {
+    "inverted": false,
+    "width": 240,
+    "collapsedWidth": 64,
+    "mixWidth": 90,
+    "mixCollapsedWidth": 64,
+    "mixChildMenuWidth": 200,
+    "autoSelectFirstMenu": true
+  },
+  "footer": {
+    "visible": true,
+    "fixed": false,
+    "height": 48,
+    "right": true
+  },
+  "watermark": {
+    "visible": false,
+    "text": "SoybeanAdmin",
+    "enableUserName": false,
+    "enableTime": false,
+    "timeFormat": "YYYY-MM-DD HH:mm"
+  },
+  "tokens": {
+    "light": {
+      "colors": {
+        "container": "rgb(255, 255, 255)",
+        "layout": "rgb(250, 250, 250)",
+        "inverted": "rgb(9, 9, 11)",
+        "base-text": "rgb(24, 24, 27)"
+      },
+      "boxShadow": {
+        "header": "0 1px 3px 0 rgb(0, 0, 0, 0.1), 0 1px 2px -1px rgb(0, 0, 0, 0.1)",
+        "sider": "1px 0 3px 0 rgb(0, 0, 0, 0.1)",
+        "tab": "0 1px 3px 0 rgb(0, 0, 0, 0.1), 0 1px 2px -1px rgb(0, 0, 0, 0.1)"
+      }
+    },
+    "dark": {
+      "colors": {
+        "container": "rgb(24, 24, 27)",
+        "layout": "rgb(9, 9, 11)",
+        "base-text": "rgb(250, 250, 250)"
+      },
+      "boxShadow": {
+        "header": "0 1px 3px 0 rgb(0, 0, 0, 0.3), 0 1px 2px -1px rgb(0, 0, 0, 0.3)",
+        "sider": "1px 0 3px 0 rgb(0, 0, 0, 0.3)",
+        "tab": "0 1px 3px 0 rgb(0, 0, 0, 0.3), 0 1px 2px -1px rgb(0, 0, 0, 0.3)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+import { createStorage } from '@skyroc/utils/web';
+import { defaultThemeSettings } from './config/default';
+import { themeSettingsAtom } from './hooks';
+import { mergeThemeSettings } from './utils/settings';
+
+const DEFAULT_THEME_STORAGE_PREFIX = 'SR_';
+
+interface ThemeStorageSchema {
+  darkMode: boolean;
+  overrideThemeFlag: string;
+  themeColor: string;
+  themeSettings: Theme.ThemeSetting;
+}
+
+/**
+ * Storage adapter interface
+ *
+ * 与 createStorage 返回的对象兼容，也可以传宿主自定义 storage。
+ */
+interface ThemeStorage {
+  get: (...args: any[]) => any;
+  set: (...args: any[]) => void;
+}
+
+interface SetupThemeOptions {
+  /** 当前构建时间，用于检测缓存覆盖（生产环境需要） */
+  buildTime?: string;
+
+  /** 是否生产环境（默认 import.meta.env.PROD） */
+  isProd?: boolean;
+
+  /** 主题配置覆盖项，发布新版本时可强制覆盖用户缓存的某些配置 */
+  overrides?: Partial<Theme.ThemeSetting>;
+
+  /** 存储适配器，用于读写缓存的主题配置；传入后会优先于 storagePrefix */
+  storage?: ThemeStorage;
+
+  /** 默认存储适配器的 key 前缀 */
+  storagePrefix?: string;
+}
+
+let _storage: ThemeStorage | null = null;
+
+export function getInternalStorage(): ThemeStorage | null {
+  return _storage;
+}
+
+/**
+ * 一次调用完成主题初始化
+ *
+ * 在 app 入口或 AntdProvider 之前调用，自动处理： - 默认配置加载 - localStorage 缓存读取（生产环境） - 版本覆盖检测 - Jotai atom 初始化
+ *
+ * @example
+ *   ```ts
+ *   import { setupTheme } from '@shell/theme';
+ *
+ *   setupTheme({
+ *     buildTime: BUILD_TIME
+ *   });
+ *   ```
+ */
+export function setupTheme(options: SetupThemeOptions = {}) {
+  const {
+    buildTime,
+    isProd = import.meta.env.PROD,
+    overrides,
+    storage,
+    storagePrefix = DEFAULT_THEME_STORAGE_PREFIX
+  } = options;
+  const themeStorage = storage ?? createDefaultStorage(storagePrefix);
+
+  _storage = themeStorage;
+
+  // 开发环境：直接使用默认配置
+  if (!isProd) {
+    themeSettingsAtom.init = defaultThemeSettings;
+    return;
+  }
+
+  // 生产环境：从缓存加载 + 版本覆盖检测
+  const cachedSettings = themeStorage.get('themeSettings');
+
+  let settings = mergeThemeSettings(cachedSettings, defaultThemeSettings);
+
+  const isOverride = buildTime ? themeStorage.get('overrideThemeFlag') === buildTime : false;
+
+  if (!isOverride) {
+    settings = mergeThemeSettings(overrides, settings);
+
+    if (buildTime) {
+      themeStorage.set('overrideThemeFlag', buildTime);
+    }
+  }
+
+  themeSettingsAtom.init = settings;
+}
+
+function createDefaultStorage(storagePrefix: string) {
+  return createStorage<ThemeStorageSchema>('local', storagePrefix);
+}
+
+/**
+ * 类型安全的主题覆盖配置定义辅助函数
+ *
+ * @example
+ *   ```ts
+ *   export const themeOverrides = defineThemeOverrides({
+ *     themeColor: '#6366F1',
+ *     themeScheme: 'dark'
+ *   });
+ *   ```
+ */
+export function defineThemeOverrides(overrides: Partial<Theme.ThemeSetting>): Partial<Theme.ThemeSetting> {
+  return overrides;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Re-export types from the global Theme namespace
+ *
+ * This allows internal code (e.g. hooks, utils) to import types via standard ES module imports while the actual
+ * definitions live in the global Theme namespace (theme.d.ts).
+ */
+
+export type BaseToken = Theme.BaseToken;
+export type BaseWatermarkSettings = Theme.BaseWatermarkSettings;
+export type ColorPaletteNumber = Theme.ColorPaletteNumber;
+export type OtherColor = Theme.OtherColor;
+export type ThemeColor = Theme.ThemeColor;
+export type ThemeColorKey = Theme.ThemeColorKey;
+export type ThemeIcons = Theme.ThemeIcons;
+export type ThemeLayoutMode = Theme.ThemeLayoutMode;
+export type ThemeMode = Theme.ThemeMode;
+export type ThemePageAnimateMode = Theme.ThemePageAnimateMode;
+export type ThemePaletteColor = Theme.ThemePaletteColor;
+export type ThemePreset = Theme.ThemePreset;
+export type ThemePresetMeta = Theme.ThemePresetMeta;
+export type ThemeScrollMode = Theme.ThemeScrollMode;
+export type ThemeSettingToken = Theme.ThemeSettingToken;
+export type ThemeSettingTokenBoxShadow = Theme.ThemeSettingTokenBoxShadow;
+export type ThemeSettingTokenColor = Theme.ThemeSettingTokenColor;
+export type ThemeTabMode = Theme.ThemeTabMode;
+export type ThemeTokenColor = Theme.ThemeTokenColor;
+export type ThemeTokenCSSVars = Theme.ThemeTokenCSSVars;