@skyroc/scripts 2.5.0

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

@@ -0,0 +1,52 @@
+import { parseQuery, stringifyQuery } from '@skyroc/utils';
+import { createRouter } from '@tanstack/react-router';
+
+import { globalConfig } from '@/config';
+import { queryClient } from '@/service/queryClient';
+
+import { setRouter } from './router-ref';
+import { routeTree } from './routeTree.gen';
+
+/**
+ * - 路由配置
+ * - 使用的是 TanStack Router 的 约定式路由配置方法 无需手动配置路由
+ * - 路由配置文件为 src/features/router/routeTree.gen.ts
+ * - 路由约定式 [详情见](https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts)
+ * - https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing
+ * - https://tanstack.com/router/latest/docs/framework/react/routing/file-naming-conventions
+ */
+export const router = createRouter({
+  context: {
+    initAuth: () => Promise.resolve(null),
+    logout: () => Promise.resolve(),
+    getHomeRoute: () => globalConfig.defaultHome,
+    homeRoute: globalConfig.defaultHome,
+    isAuthInitialized: false,
+    isLoggedIn: false,
+    queryClient,
+    userInfo: undefined
+  },
+  defaultPreload: 'intent',
+  stringifySearch: stringifyQuery,
+  parseSearch: parseQuery,
+  defaultPreloadStaleTime: 0,
+  defaultPendingMs: 10,
+  defaultPendingMinMs: 1000,
+  defaultStructuralSharing: true,
+  notFoundMode: 'root',
+  routeTree,
+  scrollRestoration: true
+});
+
+export type RouterConfig = typeof router;
+
+setRouter(router);
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: RouterConfig;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface StaticDataRouteOption extends Router.Meta {}
+}

package/templates/admin/src/features/router/routeTree.gen.ts

@@ -0,0 +1,237 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './../../pages/__root'
+import { Route as adminLayoutRouteImport } from './../../pages/(admin)/layout'
+import { Route as IndexRouteImport } from './../../pages/index'
+import { Route as errors500RouteImport } from './../../pages/(errors)/500'
+import { Route as errors404RouteImport } from './../../pages/(errors)/404'
+import { Route as errors403RouteImport } from './../../pages/(errors)/403'
+import { Route as authLoginOutRouteImport } from './../../pages/(auth)/login-out'
+import { Route as authLoginLayoutRouteImport } from './../../pages/(auth)/login/layout'
+import { Route as authLoginIndexRouteImport } from './../../pages/(auth)/login/index'
+import { Route as adminHomeIndexRouteImport } from './../../pages/(admin)/home/index'
+
+const adminLayoutRoute = adminLayoutRouteImport.update({
+  id: '/(admin)',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const errors500Route = errors500RouteImport.update({
+  id: '/(errors)/500',
+  path: '/500',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const errors404Route = errors404RouteImport.update({
+  id: '/(errors)/404',
+  path: '/404',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const errors403Route = errors403RouteImport.update({
+  id: '/(errors)/403',
+  path: '/403',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const authLoginOutRoute = authLoginOutRouteImport.update({
+  id: '/(auth)/login-out',
+  path: '/login-out',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const authLoginLayoutRoute = authLoginLayoutRouteImport.update({
+  id: '/(auth)/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const authLoginIndexRoute = authLoginIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => authLoginLayoutRoute,
+} as any)
+const adminHomeIndexRoute = adminHomeIndexRouteImport.update({
+  id: '/home/',
+  path: '/home/',
+  getParentRoute: () => adminLayoutRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/login': typeof authLoginLayoutRouteWithChildren
+  '/login-out': typeof authLoginOutRoute
+  '/403': typeof errors403Route
+  '/404': typeof errors404Route
+  '/500': typeof errors500Route
+  '/home/': typeof adminHomeIndexRoute
+  '/login/': typeof authLoginIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/login-out': typeof authLoginOutRoute
+  '/403': typeof errors403Route
+  '/404': typeof errors404Route
+  '/500': typeof errors500Route
+  '/home': typeof adminHomeIndexRoute
+  '/login': typeof authLoginIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/(admin)': typeof adminLayoutRouteWithChildren
+  '/(auth)/login': typeof authLoginLayoutRouteWithChildren
+  '/(auth)/login-out': typeof authLoginOutRoute
+  '/(errors)/403': typeof errors403Route
+  '/(errors)/404': typeof errors404Route
+  '/(errors)/500': typeof errors500Route
+  '/(admin)/home/': typeof adminHomeIndexRoute
+  '/(auth)/login/': typeof authLoginIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/login'
+    | '/login-out'
+    | '/403'
+    | '/404'
+    | '/500'
+    | '/home/'
+    | '/login/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/login-out' | '/403' | '/404' | '/500' | '/home' | '/login'
+  id:
+    | '__root__'
+    | '/'
+    | '/(admin)'
+    | '/(auth)/login'
+    | '/(auth)/login-out'
+    | '/(errors)/403'
+    | '/(errors)/404'
+    | '/(errors)/500'
+    | '/(admin)/home/'
+    | '/(auth)/login/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  adminLayoutRoute: typeof adminLayoutRouteWithChildren
+  authLoginLayoutRoute: typeof authLoginLayoutRouteWithChildren
+  authLoginOutRoute: typeof authLoginOutRoute
+  errors403Route: typeof errors403Route
+  errors404Route: typeof errors404Route
+  errors500Route: typeof errors500Route
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/(admin)': {
+      id: '/(admin)'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof adminLayoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(errors)/500': {
+      id: '/(errors)/500'
+      path: '/500'
+      fullPath: '/500'
+      preLoaderRoute: typeof errors500RouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(errors)/404': {
+      id: '/(errors)/404'
+      path: '/404'
+      fullPath: '/404'
+      preLoaderRoute: typeof errors404RouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(errors)/403': {
+      id: '/(errors)/403'
+      path: '/403'
+      fullPath: '/403'
+      preLoaderRoute: typeof errors403RouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(auth)/login-out': {
+      id: '/(auth)/login-out'
+      path: '/login-out'
+      fullPath: '/login-out'
+      preLoaderRoute: typeof authLoginOutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(auth)/login': {
+      id: '/(auth)/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof authLoginLayoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/(auth)/login/': {
+      id: '/(auth)/login/'
+      path: '/'
+      fullPath: '/login/'
+      preLoaderRoute: typeof authLoginIndexRouteImport
+      parentRoute: typeof authLoginLayoutRoute
+    }
+    '/(admin)/home/': {
+      id: '/(admin)/home/'
+      path: '/home'
+      fullPath: '/home/'
+      preLoaderRoute: typeof adminHomeIndexRouteImport
+      parentRoute: typeof adminLayoutRoute
+    }
+  }
+}
+
+interface adminLayoutRouteChildren {
+  adminHomeIndexRoute: typeof adminHomeIndexRoute
+}
+
+const adminLayoutRouteChildren: adminLayoutRouteChildren = {
+  adminHomeIndexRoute: adminHomeIndexRoute,
+}
+
+const adminLayoutRouteWithChildren = adminLayoutRoute._addFileChildren(
+  adminLayoutRouteChildren,
+)
+
+interface authLoginLayoutRouteChildren {
+  authLoginIndexRoute: typeof authLoginIndexRoute
+}
+
+const authLoginLayoutRouteChildren: authLoginLayoutRouteChildren = {
+  authLoginIndexRoute: authLoginIndexRoute,
+}
+
+const authLoginLayoutRouteWithChildren = authLoginLayoutRoute._addFileChildren(
+  authLoginLayoutRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  adminLayoutRoute: adminLayoutRouteWithChildren,
+  authLoginLayoutRoute: authLoginLayoutRouteWithChildren,
+  authLoginOutRoute: authLoginOutRoute,
+  errors403Route: errors403Route,
+  errors404Route: errors404Route,
+  errors500Route: errors500Route,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/admin/src/features/router/router-ref.ts

@@ -0,0 +1,24 @@
+import type { RouterConfig } from './index';
+
+/**
+ * - 路由实例引用
+ * - 用于在非组件模块（如请求适配器 adapter.ts）中惰性访问 router
+ * - 目的：避免这些模块静态 import `./index`，从而切断
+ *   `request → adapter → router → routeTree.gen → 路由模块` 的加载期循环依赖
+ * - 仅做运行时引用存取，本模块无任何运行时依赖
+ */
+let routerRef: RouterConfig | null = null;
+
+/** 在 router 创建完成后注册实例（由 ./index 调用）。 */
+export function setRouter(router: RouterConfig) {
+  routerRef = router;
+}
+
+/** 运行时获取 router 实例，未初始化时抛错以便尽早发现问题。 */
+export function getRouter(): RouterConfig {
+  if (!routerRef) {
+    throw new Error('[router-ref] router 尚未初始化，请确认在使用前已加载 @/features/router');
+  }
+
+  return routerRef;
+}

package/templates/admin/src/locales/antd.ts

@@ -0,0 +1,8 @@
+import enUS from 'antd/es/locale/en_US';
+import zhCN from 'antd/es/locale/zh_CN';
+import type { Locale } from 'antd/lib/locale';
+
+export const antdLocales: Record<I18n.LangType, Locale> = {
+  'en-US': enUS,
+  'zh-CN': zhCN
+};

package/templates/admin/src/locales/index.ts

@@ -0,0 +1,22 @@
+import { setupI18n as setupCoreI18n } from '@shell/i18n';
+import type { LocaleSetupOptions } from '@shell/i18n';
+
+import { globalConfig } from '@/config';
+import { localStg } from '@/utils/storage';
+
+export { $t } from '@shell/i18n';
+
+/** Setup plugin i18n */
+export async function setupI18n(options: LocaleSetupOptions<I18n.LangType> = {}) {
+  await setupCoreI18n({
+    defaultLocale: globalConfig.defaultLang,
+    fallbackLocale: 'en-US',
+    localeOptions: globalConfig.defaultLangOptions,
+    missingWarn: import.meta.env.DEV,
+    storage: {
+      getLocale: () => localStg.get('lang'),
+      setLocale: lang => localStg.set('lang', lang)
+    },
+    ...options
+  });
+}

package/templates/admin/src/locales/sync.ts

@@ -0,0 +1,14 @@
+// oxlint-disable import/no-unassigned-import
+import { locale } from 'dayjs';
+
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+
+const localeMap: Record<I18n.LangType, string> = {
+  'zh-CN': 'zh-cn',
+  'en-US': 'en'
+};
+
+export function syncLocales(lang: I18n.LangType) {
+  locale(localeMap[lang]);
+}

package/templates/admin/src/main.tsx

@@ -0,0 +1,9 @@
+async function bootstrap() {
+  if (import.meta.env.DEV) {
+    await import('@skyroc/web-admin-devtools/jotai');
+  }
+
+  await import('./bootstrap');
+}
+
+bootstrap();

package/templates/admin/src/pages/(admin)/home/index.tsx

@@ -0,0 +1,46 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+const quickStartItems = [
+  'Edit src/pages/(admin)/home/index.tsx',
+  'Add routes under src/pages/(admin)',
+  'Configure runtime API adapters in src/service'
+] as const;
+
+const Home = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ASpace className="w-full" orientation="vertical" size={16}>
+      <ACard variant="borderless">
+        <ASpace className="w-full" orientation="vertical" size={16}>
+          <div>
+            <h1 className="m-0 text-28px font-600 text-primary">{t('system.title')}</h1>
+            <p className="m-0 mt-8px text-14px text-text-2">A minimal admin starter is ready.</p>
+          </div>
+
+          <ARow gutter={[16, 16]}>
+            {quickStartItems.map(item => {
+              return (
+                <ACol key={item} lg={8} span={24}>
+                  <div className="rounded-8px bg-layout p-16px text-14px text-text-1">{item}</div>
+                </ACol>
+              );
+            })}
+          </ARow>
+        </ASpace>
+      </ACard>
+    </ASpace>
+  );
+};
+
+export const Route = createFileRoute('/(admin)/home/')({
+  component: Home,
+  staticData: {
+    i18nKey: 'route.home',
+    title: 'home',
+    menu: {
+      icon: 'mdi:monitor-dashboard',
+      order: 1
+    }
+  }
+});

package/templates/admin/src/pages/(admin)/layout.tsx

@@ -0,0 +1,44 @@
+import { AdminLayout as WebAdminLayout } from '@shell/layouts';
+import { NotificationButton } from '@shell/notification';
+import { DarkModeContainer } from '@shell/ui/compose';
+import { createFileRoute } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+import SystemLogo from '@/components/SystemLogo';
+import UserAvatar from '@/features/auth/components/UserAvatar';
+import { guardAdminRoute } from '@/features/router/guard';
+
+const AdminFooter = () => {
+  return (
+    <DarkModeContainer className="h-full flex-center">
+      <a
+        href="https://github.com/Ohh-889/skyroc-admin/blob/main/LICENSE"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Copyright MIT © 2021 Skyroc
+      </a>
+    </DarkModeContainer>
+  );
+};
+
+const AdminLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <WebAdminLayout
+      footer={<AdminFooter />}
+      headerMiddleActions={<NotificationButton className="px-12px" />}
+      headerRightActions={<UserAvatar />}
+      logo={<SystemLogo className="text-32px text-primary" />}
+      logoTitle={t('system.title')}
+    />
+  );
+};
+
+export const Route = createFileRoute('/(admin)')({
+  component: AdminLayout,
+  beforeLoad: async options => {
+    await guardAdminRoute(options);
+  }
+});

package/templates/admin/src/pages/(auth)/login/index.tsx

@@ -0,0 +1,102 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { useAuthFormRules } from '@/features/auth/use-auth-form-rules';
+import { useInitLogin } from '@/features/auth/use-login';
+
+type AccountKey = 'admin' | 'super' | 'user';
+
+interface Account {
+  key: AccountKey;
+  label: string;
+  password: string;
+  userName: string;
+}
+
+type LoginParams = Pick<Account, 'password' | 'userName'>;
+
+const INITIAL_VALUES = {
+  password: '123456',
+  userName: 'Soybean'
+};
+
+const Login = () => {
+  const { t } = useTranslation();
+
+  const [form] = AForm.useForm<LoginParams>();
+
+  const { loading, login } = useInitLogin();
+
+  const {
+    formRules: { pwd, userName: userNameRules }
+  } = useAuthFormRules();
+
+  const accounts: Account[] = [
+    {
+      key: 'super',
+      label: t('page.login.pwdLogin.superAdmin'),
+      password: '123456',
+      userName: 'Super'
+    },
+    {
+      key: 'admin',
+      label: t('page.login.pwdLogin.admin'),
+      password: '123456',
+      userName: 'Admin'
+    },
+    {
+      key: 'user',
+      label: t('page.login.pwdLogin.user'),
+      password: '123456',
+      userName: 'User'
+    }
+  ];
+
+  function handleAccountLogin(account: Account) {
+    login({
+      password: account.password,
+      userName: account.userName
+    });
+  }
+
+  useKeyPress('enter', () => {
+    form.submit();
+  });
+
+  return (
+    <>
+      <h3 className="text-18px text-primary font-medium">{t('page.login.pwdLogin.title')}</h3>
+      <AForm className="pt-24px" form={form} initialValues={INITIAL_VALUES} onFinish={login}>
+        <AForm.Item name="userName" rules={userNameRules}>
+          <AInput size="large" />
+        </AForm.Item>
+
+        <AForm.Item name="password" rules={pwd}>
+          <AInput.Password autoComplete="password" size="large" />
+        </AForm.Item>
+        <ASpace className="w-full" orientation="vertical" size={24}>
+          <AButton block color="primary" htmlType="submit" loading={loading} shape="round" size="large" type="primary">
+            {t('common.confirm')}
+          </AButton>
+          <ADivider className="!m-0 !text-14px !text-#666">{t('page.login.pwdLogin.otherAccountLogin')}</ADivider>
+          <div className="flex-center gap-12px">
+            {accounts.map(item => {
+              return (
+                <AButton key={item.key} type="primary" onClick={() => handleAccountLogin(item)}>
+                  {item.label}
+                </AButton>
+              );
+            })}
+          </div>
+        </ASpace>
+      </AForm>
+    </>
+  );
+};
+
+export const Route = createFileRoute('/(auth)/login/')({
+  component: Login,
+  staticData: {
+    title: 'login',
+    i18nKey: 'route.login'
+  }
+});

package/templates/admin/src/pages/(auth)/login/layout.tsx

@@ -0,0 +1,71 @@
+import { mixColor } from '@skyroc/color';
+import { useSettingsTheme } from '@shell/theme';
+import { Outlet, createFileRoute, redirect, useLocation } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'motion/react';
+import { z } from 'zod';
+
+const COLOR_WHITE = '#ffffff';
+
+const LoginSearchSchema = z.object({
+  redirect: z.string().startsWith('/').optional()
+});
+
+const LoginLayout = () => {
+  const { t } = useTranslation();
+
+  const { darkMode, themeColor } = useSettingsTheme();
+
+  const ratio = darkMode ? 0.5 : 0.2;
+
+  const location = useLocation();
+
+  const bgColor = mixColor(COLOR_WHITE, themeColor, ratio);
+
+  return (
+    <div className="relative size-full flex-center overflow-hidden bg-layout" style={{ backgroundColor: bgColor }}>
+      <ACard className="relative z-4 w-auto rd-8px" variant="borderless">
+        <div className="w-400px lt-sm:w-300px">
+          <div className="text-center">
+            <h1 className="m-0 text-28px font-600 text-primary">{t('system.title')}</h1>
+            <p className="m-0 mt-8px text-14px text-text-2">{t('page.login.common.loginOrRegister')}</p>
+          </div>
+
+          <AnimatePresence initial={false} mode="wait">
+            <motion.main
+              layout
+              animate={{ opacity: 1, x: 0, filter: 'blur(0px)' }}
+              className="pt-24px"
+              exit={{ opacity: 0, x: 28, filter: 'blur(6px)' }}
+              initial={{ opacity: 0, x: -28, filter: 'blur(6px)' }}
+              key={location.pathname}
+              style={{
+                willChange: 'transform, opacity, filter'
+              }}
+              transition={{
+                x: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
+                opacity: { duration: 0.18, ease: 'easeOut' },
+                filter: { duration: 0.18, ease: 'easeOut' }
+              }}
+            >
+              <Outlet />
+            </motion.main>
+          </AnimatePresence>
+        </div>
+      </ACard>
+    </div>
+  );
+};
+
+export const Route = createFileRoute('/(auth)/login')({
+  component: LoginLayout,
+  validateSearch: LoginSearchSchema,
+  beforeLoad: async ({ context, search }) => {
+    if (context.isLoggedIn) {
+      throw redirect({ to: search.redirect || context.getHomeRoute() });
+    }
+  },
+  staticData: {
+    title: 'login',
+    i18nKey: 'route.login'
+  }
+});

package/templates/admin/src/pages/(auth)/login-out.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { z } from 'zod';
+
+const LoginOut = () => {
+  return null;
+};
+
+const LoginSearchSchema = z.object({
+  redirect: z.string().startsWith('/').optional()
+});
+
+export const Route = createFileRoute('/(auth)/login-out')({
+  component: LoginOut,
+  validateSearch: LoginSearchSchema,
+  staticData: {
+    title: 'login-out',
+    i18nKey: 'route.login-out'
+  },
+  beforeLoad: async ({ context, search }) => {
+    const redirectPath = search.redirect;
+
+    // 等它走完再跳，否则跳到 /login 时本地令牌可能还没清掉
+    await context.logout();
+
+    throw redirect({ to: '/login', search: redirectPath ? { redirect: redirectPath } : undefined });
+  }
+});

package/templates/admin/src/pages/(errors)/403.tsx

@@ -0,0 +1,16 @@
+import { ExceptionBase } from '@shell/ui/antd';
+import { createFileRoute } from '@tanstack/react-router';
+
+const NotAuth = () => {
+  const { t } = useTranslation();
+
+  return <ExceptionBase buttonText={t('common.backToHome')} type="403" />;
+};
+
+export const Route = createFileRoute('/(errors)/403')({
+  component: NotAuth,
+  staticData: {
+    title: '403',
+    i18nKey: 'route.403'
+  }
+});