@skyroc/scripts 2.5.0

package/templates/admin/src/config.ts

@@ -0,0 +1,125 @@
+import type { AdminDevtoolsConfig } from '@skyroc/web-admin-devtools';
+import { defaultThemeSettings } from '@shell/theme';
+import type { NProgress } from 'nprogress';
+
+import { menuCategoryKeys } from './features/menus/menu-category';
+import { localStg } from './utils/storage';
+
+// ============================================================================
+// Re-export antd UI helpers from admin-theme package
+// （保持 auto-import 兼容，所有 showXxx 函数可继续作为全局变量使用）
+// ============================================================================
+export {
+  destroyMessage,
+  destroyNotification,
+  showConfirmModal,
+  showErrorMessage,
+  showErrorModal,
+  showErrorNotification,
+  showInfoMessage,
+  showInfoModal,
+  showInfoNotification,
+  showLoadingMessage,
+  showMessage,
+  showModal,
+  showNotification,
+  showSuccessMessage,
+  showSuccessModal,
+  showSuccessNotification,
+  showWarningMessage,
+  showWarningModal,
+  showWarningNotification
+} from '@shell/theme';
+
+// ============================================================================
+// NProgress
+// ============================================================================
+
+const _nprogress = { instance: null as NProgress | null };
+
+export function initNProgress(nprogress: NProgress) {
+  _nprogress.instance = nprogress;
+}
+
+// ============================================================================
+// Global Config
+// ============================================================================
+
+function createConfig() {
+  return {
+    // ======System Config======
+    /** - 是否自动检测更新 */
+    automaticallyDetectUpdate: true,
+
+    /** - 是否开发环境 */
+    isDev: import.meta.env.DEV,
+    /** - 开发工具配置 */
+    devtools: {
+      jotai: {
+        name: import.meta.env.VITE_APP_TITLE,
+        panel: true,
+        position: 'bottom-left',
+        timeline: true,
+        triggerOffset: {
+          left: defaultThemeSettings.sider.width + 8
+        }
+      },
+      position: 'bottom-right',
+      query: true,
+      router: true
+    } satisfies AdminDevtoolsConfig,
+    /** - 生成菜单的分类 key，来源于 setupAdminLayouts 使用的 menuCategories。 */
+    genMenuLayouts: menuCategoryKeys,
+    /** - 默认首页 */
+    defaultHome: import.meta.env.VITE_ROUTE_HOME,
+
+    localIconPrefix: import.meta.env.VITE_ICON_LOCAL_PREFIX,
+
+    defaultIcon: import.meta.env.VITE_MENU_ICON,
+
+    routeMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
+
+    /** - Nprogress 实例 */
+    get nprogress(): NProgress {
+      if (!_nprogress.instance) {
+        console.error('nprogress is not initialized, please call initNProgress function first');
+        throw new Error('nprogress is not initialized');
+      }
+      return _nprogress.instance;
+    },
+
+    /// //////////////////////////////////////////////////////////////////////////////
+    // ======Theme Config======
+    /// //////////////////////////////////////////////////////////////////////////////
+    /** - 默认主题配置 */
+    get defaultThemeColor(): string {
+      return localStg.get('themeColor') || defaultThemeSettings.themeColor;
+    },
+    get defaultDarkMode(): boolean {
+      return localStg.get('darkMode') ?? defaultThemeSettings.themeScheme === 'dark';
+    },
+
+    /// //////////////////////////////////////////////////////////////////////////////
+    // ======Lang Config======
+    /// //////////////////////////////////////////////////////////////////////////////
+    /** - 默认语言配置 */
+    get defaultLang(): I18n.LangType {
+      return localStg.get('lang') || 'zh-CN';
+    },
+    /** - 默认语言选项 */
+    get defaultLangOptions(): I18n.LangOption[] {
+      return [
+        {
+          key: 'zh-CN',
+          label: '中文'
+        },
+        {
+          key: 'en-US',
+          label: 'English'
+        }
+      ];
+    }
+  } as const;
+}
+
+export const globalConfig = createConfig();

package/templates/admin/src/features/antd/AntdProvider.tsx

@@ -0,0 +1,21 @@
+import { useLang } from '@shell/i18n';
+import { AntdProvider } from '@shell/theme';
+import type { PropsWithChildren } from 'react';
+
+import { antdLocales } from '@/locales/antd';
+import { useUserInfoQuery } from '@/service/api';
+
+const AppAntdProvider = (props: PropsWithChildren) => {
+  const { children } = props;
+
+  const { locale } = useLang();
+  const { data: userInfo } = useUserInfoQuery();
+
+  return (
+    <AntdProvider locale={antdLocales[locale]} userName={userInfo?.userName}>
+      {children}
+    </AntdProvider>
+  );
+};
+
+export default AppAntdProvider;

package/templates/admin/src/features/auth/components/UserAvatar.tsx

@@ -0,0 +1,76 @@
+import { showConfirmModal } from '@shell/theme';
+import { ButtonIcon } from '@shell/ui/antd';
+import { SvgIcon } from '@shell/ui/compose';
+import { useLocation, useNavigate } from '@tanstack/react-router';
+import { Button as AButton, Dropdown as ADropdown, type MenuProps } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUserInfoQuery } from '@/service/api';
+
+import { useAuth } from '../use-auth';
+
+const UserAvatar = () => {
+  const { isLoggedIn } = useAuth();
+
+  const { data: userInfo } = useUserInfoQuery();
+
+  const { t } = useTranslation();
+
+  const navigate = useNavigate();
+
+  const location = useLocation();
+
+  const fullPath = location.href;
+
+  function logout() {
+    showConfirmModal({
+      cancelText: t('common.cancel'),
+      content: t('common.logoutConfirm'),
+      okText: t('common.confirm'),
+      onOk: () => {
+        navigate({ to: '/login-out', search: { redirect: fullPath } });
+      },
+      title: t('common.tip')
+    });
+  }
+
+  function onClick({ key }: { key: string }) {
+    if (key === 'logout') {
+      logout();
+    }
+  }
+
+  function loginOrRegister() {
+    navigate({ to: '/login' });
+  }
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'logout',
+      label: (
+        <div className="flex-center gap-8px">
+          <SvgIcon className="text-lg" icon="ph:sign-out" />
+          {t('common.logout')}
+        </div>
+      )
+    }
+  ];
+
+  if (isLoggedIn) {
+    return (
+      <ADropdown menu={{ items, onClick }} placement="bottomRight" trigger={['click']}>
+        <div>
+          <ButtonIcon className="px-12px">
+            <SvgIcon className="text-2xl" icon="ph:user-circle" />
+            <span className="text-md font-medium">{userInfo?.userName}</span>
+          </ButtonIcon>
+        </div>
+      </ADropdown>
+    );
+  }
+
+  return <AButton onClick={loginOrRegister}>{t('page.login.common.loginOrRegister')}</AButton>;
+};
+
+export default memo(UserAvatar);

package/templates/admin/src/features/auth/use-auth-form-rules.ts

@@ -0,0 +1,83 @@
+import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@skyroc/utils';
+import type { FormInstance, FormRule } from 'antd';
+
+function createRequiredRule(message: string): FormRule {
+  return {
+    message,
+    required: true
+  };
+}
+
+export function useAuthFormRules() {
+  const { t } = useTranslation();
+
+  const patternRules = {
+    code: {
+      message: t('form.code.invalid'),
+      pattern: REG_CODE_SIX,
+      validateTrigger: 'onChange'
+    },
+    email: {
+      message: t('form.email.invalid'),
+      pattern: REG_EMAIL,
+      validateTrigger: 'onChange'
+    },
+    phone: {
+      message: t('form.phone.invalid'),
+      pattern: REG_PHONE,
+      validateTrigger: 'onChange'
+    },
+    pwd: {
+      message: t('form.pwd.invalid'),
+      pattern: REG_PWD,
+      validateTrigger: 'onChange'
+    },
+    userName: {
+      message: t('form.userName.invalid'),
+      pattern: REG_USER_NAME,
+      validateTrigger: 'onChange'
+    }
+  } satisfies Record<string, FormRule>;
+
+  const formRules = {
+    code: [createRequiredRule(t('form.code.required')), patternRules.code],
+    email: [createRequiredRule(t('form.email.required')), patternRules.email],
+    phone: [createRequiredRule(t('form.phone.required')), patternRules.phone],
+    pwd: [createRequiredRule(t('form.pwd.required')), patternRules.pwd],
+    userName: [createRequiredRule(t('form.userName.required')), patternRules.userName]
+  } satisfies Record<string, FormRule[]>;
+
+  /** The default required rule */
+  const defaultRequiredRule = createRequiredRule(t('form.required'));
+
+  /** Create a rule for confirming the password */
+  function createConfirmPwdRule(form: FormInstance) {
+    const confirmPwdRule: FormRule[] = [
+      { message: t('form.confirmPwd.required'), required: true },
+      {
+        message: t('form.confirmPwd.invalid'),
+        validateTrigger: 'onChange',
+        validator: (rule, value) => {
+          const pwd = form.getFieldValue('password');
+          const confirmPwd = typeof value === 'string' ? value : '';
+
+          if (confirmPwd.trim() !== '' && confirmPwd !== pwd) {
+            return Promise.reject(rule.message);
+          }
+
+          return Promise.resolve();
+        }
+      }
+    ];
+
+    return confirmPwdRule;
+  }
+
+  return {
+    createConfirmPwdRule,
+    createRequiredRule,
+    defaultRequiredRule,
+    formRules,
+    patternRules
+  };
+}

package/templates/admin/src/features/auth/use-auth.ts

@@ -0,0 +1,96 @@
+import { setAtomValue } from '@skyroc/core-state';
+import { cacheTabs, useMenus } from '@shell/layouts';
+import { atom, useAtom } from 'jotai';
+
+import { useUserInfoQuery } from '@/service/api';
+import { queryClient } from '@/service/queryClient';
+import { localStg } from '@/utils/storage';
+
+const initToken = getToken();
+
+interface AuthState {
+  /** 是否完成首轮认证初始化。 */
+  initialized: boolean;
+  /** 当前 access token，空值表示未登录。 */
+  token: string | null;
+}
+
+const initState: AuthState = {
+  token: initToken,
+  initialized: false
+};
+
+const authAtom = atom(initState);
+
+export function getToken() {
+  return localStg.get('token');
+}
+
+export function clearAuthStorage() {
+  localStg.remove('token');
+  localStg.remove('refreshToken');
+}
+
+export function setAuth(data: Api.Auth.LoginToken) {
+  setAtomValue(authAtom, prev => ({ ...prev, token: data.token }));
+
+  localStg.set('token', data.token);
+  localStg.set('refreshToken', data.refreshToken);
+}
+
+export function useAuth() {
+  const [state, setState] = useAtom(authAtom);
+  const { clearMenus, getHomeRoute, home, initMenus } = useMenus();
+  const isLoggedIn = Boolean(state.token);
+  const { data: userInfo, refetch } = useUserInfoQuery();
+
+  async function initAuth() {
+    try {
+      const { data } = await refetch();
+
+      if (!data) {
+        return null;
+      }
+
+      await initMenus(data);
+
+      setState(prev => ({ ...prev, initialized: true }));
+
+      return data;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * 退出登录：清掉本地这一整套登录状态。
+   *
+   * 声明成 async 是为了给"先请求后端作废令牌、再清本地"留出位置——两件事的顺序不能反， 清本地是同步的，先清了请求就带不上 Authorization。这个 app 的后端没有登出接口， 所以眼下只有清理这一半。
+   */
+  async function logout() {
+    if (userInfo) {
+      localStg.set('lastLoginUserId', userInfo.userId);
+    }
+
+    queryClient.clear();
+
+    setState(prev => ({ ...prev, token: '' }));
+
+    clearAuthStorage();
+    clearMenus();
+    cacheTabs();
+  }
+
+  return {
+    token: state.token,
+    userInfo: userInfo || undefined,
+    isLoggedIn,
+    logout,
+    getHomeRoute,
+    homeRoute: home,
+    initMenus,
+    initAuth,
+    isAuthInitialized: state.initialized,
+    setAuth
+  };
+}

package/templates/admin/src/features/auth/use-login.ts

@@ -0,0 +1,72 @@
+import { useLoading } from '@skyroc/hooks';
+import { useNavigate, useRouter, useSearch } from '@tanstack/react-router';
+
+import { useLoginMutation } from '@/service/api';
+import { localStg } from '@/utils/storage';
+
+import { useAuth } from './use-auth';
+
+export function useInitLogin() {
+  const { endLoading, loading, startLoading } = useLoading();
+
+  const search = useSearch({ from: '/(auth)/login/' });
+
+  const { t } = useTranslation();
+
+  const { initAuth, setAuth } = useAuth();
+
+  const navigate = useNavigate();
+  const router = useRouter();
+
+  const { mutate: toLogin } = useLoginMutation();
+
+  async function login(params: Api.Auth.LoginParams, redirect = true) {
+    if (loading) return;
+
+    startLoading();
+
+    toLogin(params, {
+      onError: () => {
+        endLoading();
+      },
+      onSuccess: async data => {
+        setAuth(data);
+
+        const info = await initAuth();
+
+        if (info) {
+          await router.invalidate();
+
+          const lastLoginUserId = localStg.get('lastLoginUserId');
+
+          let needRedirect = redirect;
+
+          if (!lastLoginUserId || lastLoginUserId !== info.userId) {
+            needRedirect = false;
+
+            localStg.remove('globalTabs');
+            localStg.remove('lastLoginUserId');
+          }
+
+          if (needRedirect) {
+            await navigate({ to: search.redirect || '/', replace: true });
+          } else {
+            await navigate({ to: '/', replace: true });
+          }
+
+          showSuccessNotification({
+            description: t('page.login.common.welcomeBack', { userName: info.userName }),
+            title: t('page.login.common.loginSuccess')
+          });
+        } else {
+          endLoading();
+        }
+      }
+    });
+  }
+
+  return {
+    login,
+    loading
+  };
+}

package/templates/admin/src/features/effects/GlobalEffect.tsx

@@ -0,0 +1,15 @@
+import { LangEffect } from '@shell/i18n';
+import { ThemeEffect } from '@shell/theme';
+
+import { syncLocales } from '@/locales/sync';
+
+const GlobalEffect = () => {
+  return (
+    <>
+      <ThemeEffect />
+      <LangEffect onLocaleChange={syncLocales} />
+    </>
+  );
+};
+
+export default GlobalEffect;

package/templates/admin/src/features/menus/dynamic-routes.ts

@@ -0,0 +1,10 @@
+import { createAdminDynamicRouteLoader } from '@shell/layouts';
+
+import { routeTree } from '@/features/router/routeTree.gen';
+import { queryMenusOptions } from '@/service/api/route/hooks';
+import { queryClient } from '@/service/queryClient';
+
+export const loadAdminDynamicRoutes = createAdminDynamicRouteLoader({
+  routeTree,
+  loadBackendRoutes: () => queryClient.ensureQueryData(queryMenusOptions())
+});

package/templates/admin/src/features/menus/extras.ts

@@ -0,0 +1,3 @@
+export const menuExtras = {};
+
+export type ExtraKey = keyof typeof menuExtras;

package/templates/admin/src/features/menus/menu-category.ts

@@ -0,0 +1,14 @@
+import type { AdminLayoutMenuCategory } from '@shell/layouts';
+
+export const menuCategories = {
+  admin: {
+    key: 'admin',
+    layout: '/(admin)'
+  }
+} as const satisfies Record<string, AdminLayoutMenuCategory>;
+
+type MenuCategories = typeof menuCategories;
+
+export type MenuCategoryKey = keyof MenuCategories;
+
+export const menuCategoryKeys = Object.keys(menuCategories) as MenuCategoryKey[];

package/templates/admin/src/features/menus/menu-config.ts

@@ -0,0 +1,5 @@
+import type { MenuNodeCallback } from '@shell/layouts';
+
+export const menuNodeCallback: MenuNodeCallback = () => {
+  return [];
+};

package/templates/admin/src/features/router/RouterProvider.tsx

@@ -0,0 +1,18 @@
+import { RouterProvider as TanStackRouterProvider } from '@tanstack/react-router';
+
+import { useAuth } from '../auth/use-auth';
+
+import { router } from '.';
+
+const RouterProvider = memo(() => {
+  const { getHomeRoute, homeRoute, initAuth, isAuthInitialized, isLoggedIn, logout, userInfo } = useAuth();
+
+  return (
+    <TanStackRouterProvider
+      context={{ initAuth, isAuthInitialized, isLoggedIn, userInfo, logout, getHomeRoute, homeRoute }}
+      router={router}
+    />
+  );
+});
+
+export default RouterProvider;

package/templates/admin/src/features/router/guard.ts

@@ -0,0 +1,97 @@
+import { hasAuthorizedRoutePath, hasMatchedRoutePermission, normalizePath } from '@shell/layouts';
+import { redirect } from '@tanstack/react-router';
+import type { MakeRouteMatchUnion, ParsedLocation } from '@tanstack/react-router';
+
+export interface AdminRouteGuardOptions {
+  context: Router.RouterContext;
+  location: ParsedLocation;
+  matches: MakeRouteMatchUnion[];
+  preload?: boolean;
+}
+
+function getLoginRedirectSearch(location: ParsedLocation, context: Router.RouterContext) {
+  const homeRoute = normalizePath(context.homeRoute || context.getHomeRoute());
+  const currentPath = normalizePath(location.pathname);
+
+  if (currentPath === homeRoute && !location.searchStr) {
+    return;
+  }
+
+  return { redirect: location.href };
+}
+
+function getCurrentRoutePath(matches: MakeRouteMatchUnion[]) {
+  const currentMatch = matches.at(-1);
+
+  if (!currentMatch) {
+    return null;
+  }
+
+  return normalizePath(currentMatch.fullPath);
+}
+
+function getMatchedRouteHref(matches: MakeRouteMatchUnion[]) {
+  return matches.findLast(match => match.staticData?.href)?.staticData?.href || null;
+}
+
+function getRouteSwitchFallbackPath(context: Router.RouterContext, currentRoutePath: string | null) {
+  const homeRoute = normalizePath(context.homeRoute || context.getHomeRoute());
+
+  if (currentRoutePath !== homeRoute) {
+    return homeRoute;
+  }
+
+  return '/404';
+}
+
+async function resolveUserInfo(context: Router.RouterContext) {
+  if (context.isAuthInitialized && context.userInfo) {
+    return context.userInfo;
+  }
+
+  return context.initAuth();
+}
+
+async function guardResolvedUserInfo(
+  options: AdminRouteGuardOptions,
+  userInfo: Api.Auth.UserInfo | null
+) {
+  const { context, location, matches, preload } = options;
+
+  if (!userInfo) {
+    // 等登出走完再跳：/login 的守卫会重新读 token，没清完就跳过去会被当成还登录着。
+    await context.logout();
+
+    throw redirect({ to: '/login', search: getLoginRedirectSearch(location, context) });
+  }
+
+  if (import.meta.env.VITE_AUTH_ROUTE_MODE === 'static' && !hasMatchedRoutePermission(matches, userInfo)) {
+    throw redirect({ to: '/403' });
+  }
+
+  const currentRoutePath = getCurrentRoutePath(matches);
+
+  if (currentRoutePath && !hasAuthorizedRoutePath(currentRoutePath, userInfo)) {
+    throw redirect({ to: '/403' });
+  }
+
+  const href = getMatchedRouteHref(matches);
+
+  if (href && !preload) {
+    window.open(href, '_blank', 'noopener,noreferrer');
+
+    throw redirect({ to: getRouteSwitchFallbackPath(context, currentRoutePath), replace: true });
+  }
+}
+
+export async function guardAdminRoute(options: AdminRouteGuardOptions) {
+  const { context, location } = options;
+
+  if (!context.isLoggedIn) {
+    throw redirect({ to: '/login', search: getLoginRedirectSearch(location, context) });
+  }
+
+  const userInfo = await resolveUserInfo(context);
+
+  await guardResolvedUserInfo(options, userInfo);
+}