@skyroc/scripts 2.5.0

package/templates/admin/src/types/auto-imports.d.ts

@@ -0,0 +1,186 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const AApp: typeof import('antd').App
+  const ABadge: typeof import('antd').Badge
+  const ABreadcrumb: typeof import('antd').Breadcrumb
+  const AButton: typeof import('antd').Button
+  const ACard: typeof import('antd').Card
+  const ACheckbox: typeof import('antd').Checkbox
+  const ACol: typeof import('antd').Col
+  const AColorPicker: typeof import('antd').ColorPicker
+  const AConfigProvider: typeof import('antd').ConfigProvider
+  const ADescriptions: typeof import('antd').Descriptions
+  const ADivider: typeof import('antd').Divider
+  const ADrawer: typeof import('antd').Drawer
+  const ADropdown: typeof import('antd').Dropdown
+  const AEmpty: typeof import('antd').Empty
+  const AFlex: typeof import('antd').Flex
+  const AForm: typeof import('antd').Form
+  const AInput: typeof import('antd').Input
+  const AInputNumber: typeof import('antd').InputNumber
+  const AList: typeof import('antd').List
+  const AMenu: typeof import('antd').Menu
+  const AModal: typeof import('antd').Modal
+  const ARow: typeof import('antd').Row
+  const ASegmented: typeof import('antd').Segmented
+  const ASelect: typeof import('antd').Select
+  const ASpace: typeof import('antd').Space
+  const AStatistic: typeof import('antd').Statistic
+  const ASwitch: typeof import('antd').Switch
+  const ATag: typeof import('antd').Tag
+  const ATooltip: typeof import('antd').Tooltip
+  const AWatermark: typeof import('antd').Watermark
+  const Activity: typeof import('react').Activity
+  const Fragment: typeof import('react').Fragment
+  const IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined.tsx').default
+  const IconLocalBanner: typeof import('~icons/local/banner.tsx').default
+  const IconLocalLogo: typeof import('~icons/local/logo.tsx').default
+  const IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin.tsx').default
+  const IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin.tsx').default
+  const IconMdiInformationOutline: typeof import('~icons/mdi/information-outline.tsx').default
+  const IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc.tsx').default
+  const IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return.tsx').default
+  const IconUilSearch: typeof import('~icons/uil/search.tsx').default
+  const SkyrocAvatar: typeof import('../components/SkyrocAvatar').default
+  const Suspense: typeof import('react').Suspense
+  const SystemLogo: typeof import('../components/SystemLogo').default
+  const cache: typeof import('react').cache
+  const cacheSignal: typeof import('react').cacheSignal
+  const createContext: typeof import('react').createContext
+  const createRef: typeof import('react').createRef
+  const destroyMessage: typeof import('../config').destroyMessage
+  const destroyNotification: typeof import('../config').destroyNotification
+  const forwardRef: typeof import('react').forwardRef
+  const globalConfig: typeof import('../config').globalConfig
+  const initAntdProvider: typeof import('../config').initAntdProvider
+  const initNProgress: typeof import('../config').initNProgress
+  const lazy: typeof import('react').lazy
+  const memo: typeof import('react').memo
+  const showConfirmModal: typeof import('../config').showConfirmModal
+  const showErrorMessage: typeof import('../config').showErrorMessage
+  const showErrorModal: typeof import('../config').showErrorModal
+  const showErrorNotification: typeof import('../config').showErrorNotification
+  const showInfoMessage: typeof import('../config').showInfoMessage
+  const showInfoModal: typeof import('../config').showInfoModal
+  const showInfoNotification: typeof import('../config').showInfoNotification
+  const showLoadingMessage: typeof import('../config').showLoadingMessage
+  const showMessage: typeof import('../config').showMessage
+  const showModal: typeof import('../config').showModal
+  const showNotification: typeof import('../config').showNotification
+  const showSuccessMessage: typeof import('../config').showSuccessMessage
+  const showSuccessModal: typeof import('../config').showSuccessModal
+  const showSuccessNotification: typeof import('../config').showSuccessNotification
+  const showWarningMessage: typeof import('../config').showWarningMessage
+  const showWarningModal: typeof import('../config').showWarningModal
+  const showWarningNotification: typeof import('../config').showWarningNotification
+  const startTransition: typeof import('react').startTransition
+  const use: typeof import('react').use
+  const useActionState: typeof import('react').useActionState
+  const useAntdTable: typeof import('ahooks').useAntdTable
+  const useAsyncEffect: typeof import('ahooks').useAsyncEffect
+  const useBoolean: typeof import('ahooks').useBoolean
+  const useCallback: typeof import('react').useCallback
+  const useClickAway: typeof import('ahooks').useClickAway
+  const useContext: typeof import('react').useContext
+  const useControllableValue: typeof import('ahooks').useControllableValue
+  const useCookieState: typeof import('ahooks').useCookieState
+  const useCountDown: typeof import('ahooks').useCountDown
+  const useCounter: typeof import('ahooks').useCounter
+  const useCreation: typeof import('ahooks').useCreation
+  const useDebounce: typeof import('ahooks').useDebounce
+  const useDebounceEffect: typeof import('ahooks').useDebounceEffect
+  const useDebounceFn: typeof import('ahooks').useDebounceFn
+  const useDebugValue: typeof import('react').useDebugValue
+  const useDeepCompareEffect: typeof import('ahooks').useDeepCompareEffect
+  const useDeepCompareLayoutEffect: typeof import('ahooks').useDeepCompareLayoutEffect
+  const useDeferredValue: typeof import('react').useDeferredValue
+  const useDocumentVisibility: typeof import('ahooks').useDocumentVisibility
+  const useDrag: typeof import('ahooks').useDrag
+  const useDrop: typeof import('ahooks').useDrop
+  const useDynamicList: typeof import('ahooks').useDynamicList
+  const useEffect: typeof import('react').useEffect
+  const useEffectEvent: typeof import('react').useEffectEvent
+  const useEventEmitter: typeof import('ahooks').useEventEmitter
+  const useEventListener: typeof import('ahooks').useEventListener
+  const useEventTarget: typeof import('ahooks').useEventTarget
+  const useExternal: typeof import('ahooks').useExternal
+  const useFavicon: typeof import('ahooks').useFavicon
+  const useFocusWithin: typeof import('ahooks').useFocusWithin
+  const useFullscreen: typeof import('ahooks').useFullscreen
+  const useFusionTable: typeof import('ahooks').useFusionTable
+  const useGetState: typeof import('ahooks').useGetState
+  const useHistoryTravel: typeof import('ahooks').useHistoryTravel
+  const useHover: typeof import('ahooks').useHover
+  const useId: typeof import('react').useId
+  const useImperativeHandle: typeof import('react').useImperativeHandle
+  const useInViewport: typeof import('ahooks').useInViewport
+  const useInfiniteScroll: typeof import('ahooks').useInfiniteScroll
+  const useInsertionEffect: typeof import('react').useInsertionEffect
+  const useInterval: typeof import('ahooks').useInterval
+  const useIsomorphicLayoutEffect: typeof import('ahooks').useIsomorphicLayoutEffect
+  const useKeyPress: typeof import('ahooks').useKeyPress
+  const useLatest: typeof import('ahooks').useLatest
+  const useLayoutEffect: typeof import('react').useLayoutEffect
+  const useLocalStorageState: typeof import('ahooks').useLocalStorageState
+  const useLockFn: typeof import('ahooks').useLockFn
+  const useLongPress: typeof import('ahooks').useLongPress
+  const useMap: typeof import('ahooks').useMap
+  const useMemo: typeof import('react').useMemo
+  const useMemoizedFn: typeof import('ahooks').useMemoizedFn
+  const useMount: typeof import('ahooks').useMount
+  const useMouse: typeof import('ahooks').useMouse
+  const useMutationObserver: typeof import('ahooks').useMutationObserver
+  const useNetwork: typeof import('ahooks').useNetwork
+  const useOptimistic: typeof import('react').useOptimistic
+  const usePagination: typeof import('ahooks').usePagination
+  const usePrevious: typeof import('ahooks').usePrevious
+  const useRafInterval: typeof import('ahooks').useRafInterval
+  const useRafState: typeof import('ahooks').useRafState
+  const useRafTimeout: typeof import('ahooks').useRafTimeout
+  const useReactive: typeof import('ahooks').useReactive
+  const useReducer: typeof import('react').useReducer
+  const useRef: typeof import('react').useRef
+  const useRequest: typeof import('ahooks').useRequest
+  const useResetState: typeof import('ahooks').useResetState
+  const useResponsive: typeof import('ahooks').useResponsive
+  const useSafeState: typeof import('ahooks').useSafeState
+  const useScroll: typeof import('ahooks').useScroll
+  const useSelections: typeof import('ahooks').useSelections
+  const useSessionStorageState: typeof import('ahooks').useSessionStorageState
+  const useSet: typeof import('ahooks').useSet
+  const useSetState: typeof import('ahooks').useSetState
+  const useSize: typeof import('ahooks').useSize
+  const useState: typeof import('react').useState
+  const useSyncExternalStore: typeof import('react').useSyncExternalStore
+  const useTextSelection: typeof import('ahooks').useTextSelection
+  const useTheme: typeof import('ahooks').useTheme
+  const useThrottle: typeof import('ahooks').useThrottle
+  const useThrottleEffect: typeof import('ahooks').useThrottleEffect
+  const useThrottleFn: typeof import('ahooks').useThrottleFn
+  const useTimeout: typeof import('ahooks').useTimeout
+  const useTitle: typeof import('ahooks').useTitle
+  const useToggle: typeof import('ahooks').useToggle
+  const useTrackedEffect: typeof import('ahooks').useTrackedEffect
+  const useTransition: typeof import('react').useTransition
+  const useTranslation: typeof import('react-i18next').useTranslation
+  const useUnmount: typeof import('ahooks').useUnmount
+  const useUnmountedRef: typeof import('ahooks').useUnmountedRef
+  const useUpdate: typeof import('ahooks').useUpdate
+  const useUpdateEffect: typeof import('ahooks').useUpdateEffect
+  const useUpdateLayoutEffect: typeof import('ahooks').useUpdateLayoutEffect
+  const useVirtualList: typeof import('ahooks').useVirtualList
+  const useWebSocket: typeof import('ahooks').useWebSocket
+  const useWhyDidYouUpdate: typeof import('ahooks').useWhyDidYouUpdate
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { FC } from 'react'
+  import('react')
+}

package/templates/admin/src/types/global.d.ts

@@ -0,0 +1,16 @@
+// oxlint-disable unicorn/require-module-specifiers
+import type { MessageInstance } from 'antd/es/message/interface';
+
+export {};
+
+declare global {
+  /** Whether current runtime is development mode */
+  export const __DEV__: boolean;
+
+  /** Build time of the project */
+  export const BUILD_TIME: string;
+
+  interface Window {
+    $message?: MessageInstance;
+  }
+}

package/templates/admin/src/types/router.d.ts

@@ -0,0 +1,14 @@
+// oxlint-disable unicorn/require-module-specifiers
+declare global {
+  namespace Router {
+    interface RouteIdRegistry extends Record<keyof import('@/features/router/routeTree.gen').FileRoutesById, true> {}
+
+    interface RoutePathRegistry extends Record<keyof import('@/features/router/routeTree.gen').FileRoutesByTo, true> {}
+
+    interface MenuExtraRegistry extends Record<import('@/features/menus/extras').ExtraKey, true> {}
+
+    interface MenuCategoryRegistry extends Record<import('@/features/menus/menu-category').MenuCategoryKey, true> {}
+  }
+}
+
+export {};

package/templates/admin/src/types/storage.d.ts

@@ -0,0 +1,17 @@
+// oxlint-disable unicorn/require-module-specifiers
+declare global {
+  namespace StorageType {
+    interface Local {
+      /** The i18n language selected by the admin app. */
+      lang: I18n.LangType;
+      /** The last login user id, used to reset cached tabs after account changes. */
+      lastLoginUserId: string;
+      /** The refresh token owned by the admin auth flow. */
+      refreshToken: string;
+      /** The access token owned by the admin auth flow. */
+      token: string;
+    }
+  }
+}
+
+export {};

package/templates/admin/src/types/vite-env.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Namespace Env
+ *
+ * It is used to declare the type of the import.meta object
+ */
+declare namespace Env {
+  /** The router history mode */
+  type RouterHistoryMode = 'hash' | 'history' | 'memory';
+
+  interface AppImportMetaEnv {
+    /** The description of the application */
+    readonly VITE_APP_DESC: string;
+    /** The title of the application */
+    readonly VITE_APP_TITLE: string;
+    /**
+     * The auth route mode
+     *
+     * - Static: the auth routes is generated in front-end
+     * - Dynamic: the auth routes is generated in back-end
+     */
+    readonly VITE_AUTH_ROUTE_MODE: 'dynamic' | 'static';
+    /** Whether to automatically detect updates after configuring application packaging */
+    readonly VITE_AUTOMATICALLY_DETECT_UPDATE?: Common.YesOrNo;
+    /** The base url of the application */
+    readonly VITE_BASE_URL: string;
+
+    /**
+     * Whether to enable the http proxy
+     *
+     * Only valid in the development environment
+     */
+    readonly VITE_HTTP_PROXY?: Common.YesOrNo;
+    /**
+     * The prefix of the local icon
+     *
+     * This prefix is start with the icon prefix
+     */
+    readonly VITE_ICON_LOCAL_PREFIX: 'icon-local';
+    /** The prefix of the iconify icon */
+    readonly VITE_ICON_PREFIX: 'icon';
+    /**
+     * Iconify api provider url
+     *
+     * If the project is deployed in intranet, you can set the api provider url to the local iconify server
+     *
+     * @link https://docs.iconify.design/api/providers.html
+     */
+    readonly VITE_ICONIFY_URL?: string;
+    /**
+     * Default menu icon if menu icon is not set
+     *
+     * Iconify icon name
+     */
+    readonly VITE_MENU_ICON: string;
+    /**
+     * Other backend service base url
+     *
+     * The value is a json
+     */
+    readonly VITE_OTHER_SERVICE_BASE_URL: string;
+    /** Show proxy url log in terminal */
+    readonly VITE_PROXY_LOG?: Common.YesOrNo;
+    /**
+     * The home route key
+     *
+     * It only has effect when the auth route mode is static, if the route mode is dynamic, the home route key is
+     * defined in the back-end
+     */
+    readonly VITE_ROUTE_HOME: Router.RoutePath;
+    /** The router history mode */
+    readonly VITE_ROUTER_HISTORY_MODE?: RouterHistoryMode;
+    /** Backend service base url */
+    readonly VITE_SERVICE_BASE_URL: string;
+    /**
+     * Token expired codes of backend service
+     *
+     * When the code is received, it will refresh the token and resend the request
+     *
+     * Use "," to separate multiple codes
+     */
+    readonly VITE_SERVICE_EXPIRED_TOKEN_CODES: string;
+    /**
+     * Logout codes of backend service
+     *
+     * When the code is received, the user will be logged out and redirected to login page
+     *
+     * Use "," to separate multiple codes
+     */
+    readonly VITE_SERVICE_LOGOUT_CODES: string;
+    /**
+     * Modal logout codes of backend service
+     *
+     * When the code is received, the user will be logged out by displaying a modal
+     *
+     * Use "," to separate multiple codes
+     */
+    readonly VITE_SERVICE_MODAL_LOGOUT_CODES: string;
+    /**
+     * Success code of backend service
+     *
+     * When the code is received, the request is successful
+     */
+    readonly VITE_SERVICE_SUCCESS_CODE: string;
+    /** Whether to build with sourcemap */
+    readonly VITE_SOURCE_MAP?: Common.YesOrNo;
+    /** When the route mode is static, the defined super role */
+    readonly VITE_STATIC_SUPER_ROLE: string;
+    /** Used to differentiate storage across different domains */
+    readonly VITE_STORAGE_PREFIX?: string;
+  }
+
+  type ImportMeta = AppImportMetaEnv;
+}
+
+interface ImportMetaEnv extends Env.AppImportMetaEnv {}
+
+declare module 'virtual:svg-icons-register';

package/templates/admin/src/utils/common.tsx

@@ -0,0 +1,38 @@
+import { I18nLabel } from '@shell/ui/compose';
+
+/**
+ * Transform record to option
+ *
+ * @example
+ *   ```ts
+ *   const record = {
+ *     key1: 'label1',
+ *     key2: 'label2'
+ *   };
+ *   const options = transformRecordToOption(record);
+ *   // [
+ *   //   { value: 'key1', label: 'label1' },
+ *   //   { value: 'key2', label: 'label2' }
+ *   // ]
+ *   ```;
+ *
+ * @param record
+ */
+export function transformRecordToOption<T extends Record<string, string>>(record: T) {
+  return Object.entries(record).map(([value, label]) => ({
+    label,
+    value
+  })) as Common.Option<keyof T, T[keyof T]>[];
+}
+
+/**
+ * Translate options
+ *
+ * @param options
+ */
+export function translateOptions(options: Common.Option<string, I18n.I18nKey>[]) {
+  return options.map(option => ({
+    ...option,
+    label: <I18nLabel i18nKey={option.label} />
+  }));
+}

package/templates/admin/src/utils/icon.ts

@@ -0,0 +1,9 @@
+export function getLocalIcons() {
+  const svgIcons = import.meta.glob('/src/assets/svg-icon/*.svg');
+
+  const keys = Object.keys(svgIcons)
+    .map(item => item.split('/').at(-1)?.replace('.svg', '') || '')
+    .filter(Boolean);
+
+  return keys;
+}

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

@@ -0,0 +1,75 @@
+import json5 from 'json5';
+
+/**
+ * Create service config by current env
+ *
+ * @param env The current env
+ */
+export function createServiceConfig(env: Env.ImportMeta) {
+  const { VITE_OTHER_SERVICE_BASE_URL, VITE_SERVICE_BASE_URL } = env;
+
+  let other = {} as Record<Api.Service.OtherBaseURLKey, string>;
+  try {
+    other = json5.parse(VITE_OTHER_SERVICE_BASE_URL);
+  } catch {
+    // eslint-disable-next-line no-console
+    console.error('VITE_OTHER_SERVICE_BASE_URL is not a valid json5 string');
+  }
+
+  const httpConfig: Api.Service.SimpleServiceConfig = {
+    baseURL: VITE_SERVICE_BASE_URL,
+    other
+  };
+
+  const otherHttpKeys = Object.keys(httpConfig.other) as Api.Service.OtherBaseURLKey[];
+
+  const otherConfig: Api.Service.OtherServiceConfigItem[] = otherHttpKeys.map(key => {
+    return {
+      baseURL: httpConfig.other[key],
+      key,
+      proxyPattern: createProxyPattern(key)
+    };
+  });
+
+  const config: Api.Service.ServiceConfig = {
+    baseURL: httpConfig.baseURL,
+    other: otherConfig,
+    proxyPattern: createProxyPattern()
+  };
+
+  return config;
+}
+
+/**
+ * Get backend service base url
+ *
+ * @param env - The current env
+ * @param isProxy - If use proxy
+ */
+export function getServiceBaseURL(env: Env.ImportMeta, isProxy: boolean) {
+  const { baseURL, other } = createServiceConfig(env);
+
+  const otherBaseURL = {} as Record<Api.Service.OtherBaseURLKey, string>;
+
+  other.forEach(item => {
+    otherBaseURL[item.key] = isProxy ? item.proxyPattern : item.baseURL;
+  });
+
+  return {
+    baseURL: isProxy ? createProxyPattern() : baseURL,
+    otherBaseURL
+  };
+}
+
+/**
+ * Get proxy pattern of backend service base url
+ *
+ * @param key If not set, will use the default key
+ */
+function createProxyPattern(key?: Api.Service.OtherBaseURLKey) {
+  if (!key) {
+    return '/proxy-default';
+  }
+
+  return `/proxy-${key}`;
+}

package/templates/admin/src/utils/storage.ts

@@ -0,0 +1,7 @@
+import { createStorage } from '@skyroc/utils/web';
+
+const DEFAULT_STORAGE_PREFIX = 'SR_';
+
+export const storagePrefix = import.meta.env.VITE_STORAGE_PREFIX || DEFAULT_STORAGE_PREFIX;
+
+export const localStg = createStorage<StorageType.Local>('local', storagePrefix);

package/templates/admin/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@skyroc/tsconfig/web-app.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "~/*": [
+        "./*"
+      ],
+      "@shell/*": [
+        "../../packages/web/admin/*"
+      ]
+    }
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "../../packages/web/admin/**/*.d.ts"
+  ]
+}

package/templates/admin/uno.config.ts

@@ -0,0 +1,18 @@
+import { presetSoybeanAdmin } from '@sa/uno-config';
+import { defineConfig, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss';
+
+export default defineConfig({
+  content: {
+    pipeline: {
+      include: [/\.tsx($|\?)/],
+      exclude: ['node_modules', 'dist']
+    },
+    filesystem: ['../../ui-kit/ui', '../../packages/web/ui/shadcn/src/**/*.{ts,tsx}']
+  },
+  presets: [
+    presetWind3({ dark: 'class', variablePrefix: '', important: '.root', preflight: 'on-demand' }),
+    presetSoybeanAdmin()
+  ],
+
+  transformers: [transformerDirectives(), transformerVariantGroup()]
+});

package/templates/admin/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@skyroc/web-admin-vite';
+
+export default defineConfig({
+  application: {
+    css: {
+      additionalData: '@use "@/styles/scss/global.scss" as *;'
+    },
+    // monorepo 内 shell 源码在 packages/web/admin；独立项目用默认值 src/framework
+    resolve: {
+      shellAlias: '../../packages/web/admin'
+    }
+  }
+});

package/templates/admin-shell/i18n/atoms/lang.ts

@@ -0,0 +1,20 @@
+import { atom } from 'jotai';
+import { defaultLangConfig } from '../config/default';
+import type { LangOption, LangType } from '../types';
+
+/** Current language atom. */
+export const langAtom = atom<LangType>(defaultLangConfig.defaultLang);
+
+/** Language options shared by language switch UI. */
+export const localeOptionsAtom = atom<LangOption[]>(defaultLangConfig.langOptions);
+
+/** Fallback language atom. */
+export const fallbackLangAtom = atom<LangType>(defaultLangConfig.fallbackLang);
+
+/** Derived atom: Current language option */
+export const currentLangOptionAtom = atom(get => {
+  const lang = get(langAtom);
+  const options = get(localeOptionsAtom);
+
+  return options.find(opt => opt.key === lang);
+});

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

@@ -0,0 +1,11 @@
+import type { LangConfig } from '../types';
+
+/** Default language configuration */
+export const defaultLangConfig: LangConfig = {
+  defaultLang: 'zh-CN',
+  fallbackLang: 'en-US',
+  langOptions: [
+    { key: 'zh-CN', label: '中文' },
+    { key: 'en-US', label: 'English' }
+  ]
+};

package/templates/admin-shell/i18n/features/lang/LangEffect.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+import type { LangType } from '../../types';
+
+import { useLang } from '../../hooks/use-lang';
+
+interface LangEffectProps {
+  /** Extra effect that should run after the active admin locale changes. */
+  onLocaleChange?: (locale: LangType) => void;
+}
+
+const LangEffect = (props: LangEffectProps) => {
+  const { onLocaleChange } = props;
+
+  const { locale } = useLang();
+
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    onLocaleChange?.(locale);
+  }, [locale, onLocaleChange]);
+
+  return null;
+};
+
+export default LangEffect;

package/templates/admin-shell/i18n/features/lang/LangSwitch.tsx

@@ -0,0 +1,49 @@
+import { ButtonIcon } from '@shell/ui/antd';
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { useLang } from '../../hooks/use-lang';
+
+interface LangSwitchProps {
+  /** Extra class name applied to the icon button. */
+  className?: string;
+  /** Whether to show the language switch tooltip. */
+  showTooltip?: boolean;
+  /** Whether the language switch should be rendered by the host admin layout. */
+  visible?: boolean;
+}
+
+const LangSwitch = (props: LangSwitchProps) => {
+  const { className, showTooltip = true, visible = true } = props;
+
+  const { t } = useTranslation();
+
+  const { locale, localeOptions, setLocale } = useLang();
+
+  const tooltipContent = showTooltip ? t('icon.lang') : '';
+  const localeItems: MenuProps['items'] = localeOptions.map(item => ({
+    key: item.key,
+    label: item.label
+  }));
+
+  function changeLocales({ key }: Parameters<NonNullable<MenuProps['onClick']>>[0]) {
+    setLocale(key as I18n.LangType);
+  }
+
+  if (!visible) return null;
+
+  return (
+    <Dropdown menu={{ items: localeItems, onClick: changeLocales, selectedKeys: [locale] }}>
+      <ButtonIcon
+        className={className}
+        hoverAnimation="scale"
+        icon="heroicons:language"
+        tooltipContent={tooltipContent}
+        tooltipPlacement="left"
+      />
+    </Dropdown>
+  );
+};
+
+export default LangSwitch;