@skyroc/scripts 2.5.0

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

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

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

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

package/templates/admin/src/pages/__root.tsx

@@ -0,0 +1,54 @@
+import { Outlet, createRootRouteWithContext, useLocation, useMatches } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+import ErrorPage from './error';
+import NotFound from './not-found';
+import GlobalLoading from './loading';
+
+interface RouteMatchWithStaticData {
+  /** Route metadata used by global document side effects. */
+  staticData?: Router.Meta;
+}
+
+function getCurrentRouteMeta(matches: RouteMatchWithStaticData[]) {
+  return matches.findLast(match => match.staticData?.i18nKey || match.staticData?.title)?.staticData ?? null;
+}
+
+const Root = () => {
+  const { pathname } = useLocation();
+  const matches = useMatches();
+  const { t } = useTranslation();
+  const routeMeta = getCurrentRouteMeta(matches);
+  const documentTitle = routeMeta?.i18nKey ? t(routeMeta.i18nKey) : routeMeta?.title;
+
+  useEffect(() => {
+    if (documentTitle) {
+      document.title = documentTitle;
+    }
+  }, [documentTitle]);
+
+  useEffect(() => {
+    globalConfig.nprogress.done();
+
+    return () => {
+      globalConfig.nprogress.start();
+    };
+  }, [pathname]);
+
+  return <Outlet />;
+};
+
+export const Route = createRootRouteWithContext<Router.RouterContext>()({
+  component: Root,
+  notFoundComponent: NotFound,
+  beforeLoad: async ({ context }) => {
+    if (!context.isAuthInitialized && context.isLoggedIn) {
+      await context.initAuth();
+    }
+  },
+  staticData: {
+    title: 'SkyrocAdmin'
+  },
+  errorComponent: ErrorPage,
+  pendingComponent: GlobalLoading
+});

package/templates/admin/src/pages/error.tsx

@@ -0,0 +1,19 @@
+import { ErrorBoundary } from '@shell/ui/antd';
+import type { ErrorComponentProps } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+const ErrorPage = (props: ErrorComponentProps) => {
+  const { error, reset } = props;
+  const { t } = useTranslation();
+
+  return (
+    <ErrorBoundary
+      error={error}
+      errorHint={t('common.errorHint')}
+      resetErrorBoundary={reset}
+      retryText={t('common.tryAlign')}
+    />
+  );
+};
+
+export default ErrorPage;

package/templates/admin/src/pages/index.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+  beforeLoad: ({ context }) => {
+    if (context.isLoggedIn) {
+      throw redirect({ to: context.getHomeRoute() });
+    }
+
+    throw redirect({ to: '/login' });
+  },
+  staticData: {
+    title: 'SkyrocAdmin'
+  }
+});

package/templates/admin/src/pages/loading.tsx

@@ -0,0 +1,45 @@
+// @unocss-include
+import { getHsl } from '@skyroc/color';
+import { toggleCssDarkMode } from '@shell/theme';
+import { clsx } from 'clsx';
+
+import SystemLogo from '@/components/SystemLogo';
+import { globalConfig } from '@/config';
+
+const GlobalLoading = memo(() => {
+  const { t } = useTranslation();
+
+  const { defaultDarkMode, defaultThemeColor } = globalConfig;
+
+  if (defaultDarkMode) {
+    toggleCssDarkMode(true);
+  }
+
+  const { h, l, s } = getHsl(defaultThemeColor);
+
+  const loadingClasses = [
+    'left-0 top-0',
+    'left-0 bottom-0 animate-delay-500',
+    'right-0 top-0 animate-delay-1000',
+    'right-0 bottom-0 animate-delay-1500'
+  ];
+
+  return (
+    <div
+      className="fixed-center flex-col bg-layout"
+      style={{ '--primary-color': `${h} ${s}% ${l}%` } as React.CSSProperties}
+    >
+      <SystemLogo className="size-128px text-primary" />
+      <div className="my-4xl size-4xl">
+        <div className="relative h-full animate-spin">
+          {loadingClasses.map(item => {
+            return <div className={clsx('absolute size-md animate-pulse rounded-lg bg-primary', item)} key={item} />;
+          })}
+        </div>
+      </div>
+      <h2 className="text-2xl text-primary font-500">{t('system.title')}</h2>
+    </div>
+  );
+});
+
+export default GlobalLoading;

package/templates/admin/src/pages/not-found.tsx

@@ -0,0 +1,9 @@
+import { ExceptionBase } from '@shell/ui/antd';
+
+const NotFound = () => {
+  const { t } = useTranslation();
+
+  return <ExceptionBase buttonText={t('common.backToHome')} type="404" />;
+};
+
+export default NotFound;

package/templates/admin/src/plugins/app.tsx

@@ -0,0 +1,47 @@
+import type { SetupAppVersionNotificationOptions } from '@shell/runtime';
+
+import { destroyNotification, globalConfig, showNotification } from '@/config';
+import { router } from '@/features/router';
+
+import { $t } from '../locales';
+
+const UPDATE_NOTIFICATION_KEY = 'update-notification';
+
+export function createAdminAppVersionNotificationPluginOptions(): SetupAppVersionNotificationOptions {
+  return {
+    baseUrl: import.meta.env.VITE_BASE_URL || '/',
+    currentBuildTime: BUILD_TIME,
+    enabled: globalConfig.automaticallyDetectUpdate && import.meta.env.PROD,
+    onError(error) {
+      // oxlint-disable-next-line no-console
+      console.error('Failed to get HTML build time:', error);
+    },
+    onUpdateAvailable({ markPromptClosed }) {
+      const handleCancel = () => {
+        destroyNotification(UPDATE_NOTIFICATION_KEY);
+        markPromptClosed();
+      };
+
+      const handleOk = () => {
+        router.navigate({ to: '.' });
+      };
+
+      showNotification({
+        actions: (
+          <div className="w-325px flex justify-end gap-3">
+            <AButton key="cancel" onClick={handleCancel}>
+              {$t('system.updateCancel')}
+            </AButton>
+            <AButton key="ok" type="primary" onClick={handleOk}>
+              {$t('system.updateConfirm')}
+            </AButton>
+          </div>
+        ),
+        description: $t('system.updateContent'),
+        key: UPDATE_NOTIFICATION_KEY,
+        onClose: markPromptClosed,
+        title: $t('system.updateTitle')
+      });
+    }
+  };
+}

package/templates/admin/src/plugins/assets.ts

@@ -0,0 +1,4 @@
+// oxlint-disable import/no-unassigned-import
+import 'uno.css';
+import 'virtual:svg-icons-register';
+import '@shell/styles/global.css';

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

@@ -0,0 +1,32 @@
+import { setupAdminRuntimePlugins } from '@shell/runtime';
+import type { SetupDayjsOptions, SetupIconifyOfflineOptions, SetupNProgressOptions } from '@shell/runtime';
+
+import { initNProgress } from '@/config';
+
+import { createAdminAppVersionNotificationPluginOptions } from './app';
+
+export * from './app';
+
+const adminDayjsPluginOptions = {
+  withLocaleData: true
+} satisfies SetupDayjsOptions;
+
+const adminIconifyOfflinePluginOptions = {
+  apiUrl: import.meta.env.VITE_ICONIFY_URL
+} satisfies SetupIconifyOfflineOptions;
+
+const adminNProgressPluginOptions = {
+  easing: 'ease',
+  onReady: initNProgress,
+  parent: '.root',
+  speed: 500
+} satisfies SetupNProgressOptions;
+
+export function setupAdminPlugins() {
+  return setupAdminRuntimePlugins({
+    dayjs: adminDayjsPluginOptions,
+    appVersionNotification: createAdminAppVersionNotificationPluginOptions(),
+    iconifyOffline: adminIconifyOfflinePluginOptions,
+    nprogress: adminNProgressPluginOptions
+  });
+}

package/templates/admin/src/service/adapter.ts

@@ -0,0 +1,63 @@
+import type { RequestAdapter } from '@skyroc/service';
+
+import { setAuth } from '@/features/auth/use-auth';
+import { getRouter } from '@/features/router/router-ref';
+import { $t } from '@/locales';
+import { localStg } from '@/utils/storage';
+
+import { fetchRefreshToken } from './api/auth/api';
+import { AUTH_URLS } from './api/auth/urls';
+
+function showRequestErrorMessage(msg: string, onClose?: () => void) {
+  if (onClose) {
+    showErrorMessage({ content: msg, onClose });
+    return;
+  }
+
+  showErrorMessage(msg);
+}
+
+function showRequestErrorModal(options: Parameters<RequestAdapter['showErrorModal']>[0]) {
+  showErrorModal({
+    content: options.content,
+    keyboard: false,
+    maskClosable: options.maskClosable ?? false,
+    okText: $t('common.confirm'),
+    onCancel() {
+      options.onConfirm();
+    },
+    onOk() {
+      options.onConfirm();
+    },
+    title: options.title
+  });
+}
+
+export const antdAdapter: RequestAdapter = {
+  fetchRefreshToken,
+  getCurrentPath() {
+    return getRouter().state.location.href;
+  },
+  getRefreshToken() {
+    return localStg.get('refreshToken') || null;
+  },
+  getToken() {
+    return localStg.get('token') || null;
+  },
+  redirectToLogin(redirectPath?: string) {
+    getRouter().navigate({ search: { redirect: redirectPath }, to: '/login-out' });
+  },
+  refreshTokenUrl: AUTH_URLS.REFRESH_TOKEN,
+  resetAuth() {
+    localStg.remove('token');
+    localStg.remove('refreshToken');
+  },
+  setAuth(tokens) {
+    setAuth({ refreshToken: tokens.refreshToken, token: tokens.token });
+  },
+  showErrorMessage: showRequestErrorMessage,
+  showErrorModal: showRequestErrorModal,
+  t(key: string) {
+    return $t(key);
+  }
+};

package/templates/admin/src/service/api/auth/api.ts

@@ -0,0 +1,31 @@
+import { getToken } from '@/features/auth/use-auth';
+
+import { request } from '../../request';
+
+import { AUTH_URLS } from './urls';
+
+export function fetchLogin(params: Api.Auth.LoginParams) {
+  return request<Api.Auth.LoginResponse>({
+    data: params,
+    method: 'post',
+    url: AUTH_URLS.LOGIN
+  });
+}
+
+export function fetchGetUserInfo() {
+  if (!getToken()) {
+    return Promise.resolve(null);
+  }
+
+  return request<Api.Auth.UserInfo>({ url: AUTH_URLS.GET_USER_INFO });
+}
+
+export function fetchRefreshToken(refreshToken: string) {
+  return request<Api.Auth.LoginToken>({
+    data: {
+      refreshToken
+    },
+    method: 'post',
+    url: AUTH_URLS.REFRESH_TOKEN
+  });
+}

package/templates/admin/src/service/api/auth/hooks.ts

@@ -0,0 +1,28 @@
+import { queryOptions, useMutation, useQuery } from '@tanstack/react-query';
+
+import { fetchGetUserInfo, fetchLogin } from './api';
+import { AUTH_MUTATION_KEYS, AUTH_QUERY_KEYS } from './keys';
+
+export function queryUserInfoOptions() {
+  return queryOptions({
+    gcTime: Infinity,
+    queryFn: fetchGetUserInfo,
+    queryKey: AUTH_QUERY_KEYS.USER_INFO,
+    retry: false,
+    staleTime: Infinity
+  });
+}
+
+export function useLoginMutation() {
+  return useMutation({
+    mutationFn: (params: Api.Auth.LoginParams) => fetchLogin(params),
+    mutationKey: AUTH_MUTATION_KEYS.LOGIN,
+    retry: false
+  });
+}
+
+export function useUserInfoQuery() {
+  const query = queryUserInfoOptions();
+
+  return useQuery(query);
+}

package/templates/admin/src/service/api/auth/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Auth module
+ *
+ * Exports all auth-related functionality
+ */
+
+export * from './api';
+export * from './hooks';
+export * from './keys';
+export * from './urls';

package/templates/admin/src/service/api/auth/keys.ts

@@ -0,0 +1,7 @@
+export const AUTH_QUERY_KEYS = {
+  USER_INFO: ['auth', 'userInfo'] as const
+} as const;
+
+export const AUTH_MUTATION_KEYS = {
+  LOGIN: ['auth', 'login'] as const
+} as const;

package/templates/admin/src/service/api/auth/urls.ts

@@ -0,0 +1,7 @@
+/** Auth module URLs */
+
+export const AUTH_URLS = {
+  GET_USER_INFO: '/auth/getUserInfo',
+  LOGIN: '/auth/login',
+  REFRESH_TOKEN: '/auth/refreshToken'
+} as const;

package/templates/admin/src/service/api/index.ts

@@ -0,0 +1,2 @@
+export * from './auth';
+export * from './route';

package/templates/admin/src/service/api/route/api.ts

@@ -0,0 +1,7 @@
+import { request } from '../../request';
+
+import { ROUTE_URLS } from './urls';
+
+export function fetchGetBackendRoutes() {
+  return request<Api.Route.BackendRouteResponse>({ url: ROUTE_URLS.GET_USER_ROUTES });
+}

package/templates/admin/src/service/api/route/hooks.ts

@@ -0,0 +1,21 @@
+import { queryOptions } from '@tanstack/react-query';
+
+import { queryClient } from '@/service/queryClient';
+
+import { AUTH_QUERY_KEYS } from '../auth/keys';
+
+import { fetchGetBackendRoutes } from './api';
+import { ROUTE_QUERY_KEYS } from './keys';
+
+export function queryMenusOptions() {
+  const enabled = Boolean(queryClient.getQueryData<Api.Auth.UserInfo>(AUTH_QUERY_KEYS.USER_INFO));
+  const isDev = import.meta.env.DEV;
+
+  return queryOptions({
+    enabled,
+    gcTime: isDev ? 1000 * 60 * 5 : Infinity,
+    queryFn: fetchGetBackendRoutes,
+    queryKey: ROUTE_QUERY_KEYS.USER_ROUTES,
+    staleTime: isDev ? 1000 * 10 : Infinity
+  });
+}

package/templates/admin/src/service/api/route/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Route module
+ *
+ * Exports all route-related functionality
+ */
+
+export * from './api';
+export * from './hooks';
+export * from './keys';
+export * from './urls';

package/templates/admin/src/service/api/route/keys.ts

@@ -0,0 +1,3 @@
+export const ROUTE_QUERY_KEYS = {
+  USER_ROUTES: ['route', 'userRoutes'] as const
+} as const;

package/templates/admin/src/service/api/route/urls.ts

@@ -0,0 +1,5 @@
+/** Route module URLs */
+
+export const ROUTE_URLS = {
+  GET_USER_ROUTES: '/route/getReactUserRoutes'
+} as const;

package/templates/admin/src/service/queryClient.ts

@@ -0,0 +1,13 @@
+import { createQueryClient } from '@skyroc/service/query';
+
+function handleError(error: unknown) {
+  if (import.meta.env.DEV) {
+    // oxlint-disable-next-line no-console
+    console.error('Query/Mutation error:', error);
+  }
+}
+
+export const queryClient = createQueryClient({
+  mutationCache: { onError: handleError },
+  queryCache: { onError: handleError }
+});

package/templates/admin/src/service/request/index.ts

@@ -0,0 +1,62 @@
+import type { AxiosResponse } from 'axios';
+import { BACKEND_ERROR_CODE, createFlatRequest } from '@skyroc/axios';
+import { createAppRequest } from '@skyroc/service';
+
+import { getServiceBaseURL } from '@/utils/service';
+import { localStg } from '@/utils/storage';
+
+import { antdAdapter } from '../adapter';
+
+const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
+const { baseURL, otherBaseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
+
+export const request = createAppRequest({
+  adapter: antdAdapter,
+  axiosConfig: {
+    baseURL,
+    headers: {
+      apifoxToken: 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2'
+    }
+  },
+  codes: {
+    expiredToken: import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [],
+    logout: import.meta.env.VITE_SERVICE_LOGOUT_CODES?.split(',') || [],
+    modalLogout: import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [],
+    success: import.meta.env.VITE_SERVICE_SUCCESS_CODE
+  }
+});
+
+export const demoRequest = createFlatRequest(
+  {
+    baseURL: otherBaseURL.demo
+  },
+  {
+    transform(response: AxiosResponse<Api.Service.DemoResponse>) {
+      return response.data.result;
+    },
+    isBackendSuccess(response) {
+      return response.data.status === '200';
+    },
+    async onBackendFail(_response) {
+      // when the backend response code is not "200", it means the request is fail
+    },
+    onError(error) {
+      let message = error.message;
+
+      if (error.code === BACKEND_ERROR_CODE) {
+        message = error.response?.data?.message || message;
+      }
+
+      showErrorMessage(message);
+    },
+    async onRequest(config) {
+      const { headers } = config;
+
+      const token = localStg.get('token');
+      const Authorization = token ? `Bearer ${token}` : null;
+      Object.assign(headers, { Authorization });
+
+      return config;
+    }
+  }
+);

package/templates/admin/src/styles/scss/global.scss

@@ -0,0 +1 @@
+@forward 'scrollbar';

package/templates/admin/src/styles/scss/scrollbar.scss

@@ -0,0 +1,28 @@
+@mixin scrollbar($size: 7px, $color: rgba(0, 0, 0, 0.5), $dark-color: rgba(255, 255, 255, 0.5)) {
+  scrollbar-width: thin;
+  scrollbar-color: $color transparent;
+
+  // Dark theme override
+  .dark & {
+    // guide safari use light color scrollbar
+    color-scheme: dark;
+    scrollbar-color: $dark-color transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: $size;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $color;
+    border-radius: $size;
+  }
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+  &::-webkit-scrollbar-track-piece {
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 0;
+  }
+}