@skyroc/scripts 2.5.0

package/templates/admin-shell/types/app/union-key.d.ts

@@ -0,0 +1,156 @@
+/** The union key namespace */
+declare global {
+  namespace UnionKey {
+    /** Login module */
+    type LoginModule = 'bind-wechat' | 'code-login' | 'pwd-login' | 'register' | 'reset-pwd';
+
+    /**
+     * The layout mode
+     *
+     * - Vertical: the vertical menu in left
+     * - Horizontal: the horizontal menu in top
+     * - Vertical-mix: two vertical mixed menus in left
+     * - Top-hybrid-sidebar-first: the vertical first level menus in left and horizontal child level menus in top
+     * - Top-hybrid-header-first: the horizontal first level menus in top and vertical child level menus in left
+     */
+    type ThemeLayoutMode =
+      | 'horizontal'
+      | 'top-hybrid-header-first'
+      | 'top-hybrid-sidebar-first'
+      | 'vertical'
+      | 'vertical-hybrid-header-first'
+      | 'vertical-mix';
+
+    /**
+     * The scroll mode when content overflow
+     *
+     * - Wrapper: the wrapper component's root element overflow
+     * - Content: the content component overflow
+     */
+    type ThemeScrollMode = 'content' | 'wrapper';
+
+    /** Page animate mode */
+    type ThemePageAnimateMode =
+      | 'fade'
+      | 'fade-bottom'
+      | 'fade-scale'
+      | 'fade-slide'
+      | 'none'
+      | 'zoom-fade'
+      | 'zoom-out';
+
+    /**
+     * Tab mode
+     *
+     * - Chrome: chrome style
+     * - Button: button style
+     */
+    type ThemeTabMode = 'button' | 'chrome' | 'slider';
+
+    /** Unocss animate key */
+    type UnoCssAnimateKey =
+      | 'back-in-down'
+      | 'back-in-left'
+      | 'back-in-right'
+      | 'back-in-up'
+      | 'back-out-down'
+      | 'back-out-left'
+      | 'back-out-right'
+      | 'back-out-up'
+      | 'bounce'
+      | 'bounce-alt'
+      | 'bounce-in'
+      | 'bounce-in-down'
+      | 'bounce-in-left'
+      | 'bounce-in-right'
+      | 'bounce-in-up'
+      | 'bounce-out'
+      | 'bounce-out-down'
+      | 'bounce-out-left'
+      | 'bounce-out-right'
+      | 'bounce-out-up'
+      | 'fade-in'
+      | 'fade-in-bottom-left'
+      | 'fade-in-bottom-right'
+      | 'fade-in-down'
+      | 'fade-in-down-big'
+      | 'fade-in-left'
+      | 'fade-in-left-big'
+      | 'fade-in-right'
+      | 'fade-in-right-big'
+      | 'fade-in-top-left'
+      | 'fade-in-top-right'
+      | 'fade-in-up'
+      | 'fade-in-up-big'
+      | 'fade-out'
+      | 'fade-out-bottom-left'
+      | 'fade-out-bottom-right'
+      | 'fade-out-down'
+      | 'fade-out-down-big'
+      | 'fade-out-left'
+      | 'fade-out-left-big'
+      | 'fade-out-right'
+      | 'fade-out-right-big'
+      | 'fade-out-top-left'
+      | 'fade-out-top-right'
+      | 'fade-out-up'
+      | 'fade-out-up-big'
+      | 'flash'
+      | 'flip'
+      | 'flip-in-x'
+      | 'flip-in-y'
+      | 'flip-out-x'
+      | 'flip-out-y'
+      | 'head-shake'
+      | 'heart-beat'
+      | 'hinge'
+      | 'jack-in-the-box'
+      | 'jello'
+      | 'light-speed-in-left'
+      | 'light-speed-in-right'
+      | 'light-speed-out-left'
+      | 'light-speed-out-right'
+      | 'ping'
+      | 'pulse'
+      | 'pulse-alt'
+      | 'roll-in'
+      | 'roll-out'
+      | 'rotate-in'
+      | 'rotate-in-down-left'
+      | 'rotate-in-down-right'
+      | 'rotate-in-up-left'
+      | 'rotate-in-up-right'
+      | 'rotate-out'
+      | 'rotate-out-down-left'
+      | 'rotate-out-down-right'
+      | 'rotate-out-up-left'
+      | 'rotate-out-up-right'
+      | 'rubber-band'
+      | 'shake-x'
+      | 'shake-y'
+      | 'slide-in-down'
+      | 'slide-in-left'
+      | 'slide-in-right'
+      | 'slide-in-up'
+      | 'slide-out-down'
+      | 'slide-out-left'
+      | 'slide-out-right'
+      | 'slide-out-up'
+      | 'spin'
+      | 'swing'
+      | 'tada'
+      | 'wobble'
+      | 'zoom-in'
+      | 'zoom-in-down'
+      | 'zoom-in-left'
+      | 'zoom-in-right'
+      | 'zoom-in-up'
+      | 'zoom-out'
+      | 'zoom-out-down'
+      | 'zoom-out-left'
+      | 'zoom-out-right'
+      | 'zoom-out-up';
+  }
+}
+
+export {};

package/templates/admin-shell/types/locales/i18n.d.ts

@@ -0,0 +1,135 @@
+// oxlint-disable unicorn/require-module-specifiers
+/** Shared i18n type primitives and extension points */
+declare global {
+  namespace I18n {
+    interface LangRegistry {
+      'en-US': true;
+      'zh-CN': true;
+    }
+
+    type LangType = keyof LangRegistry extends never ? string : Extract<keyof LangRegistry, string>;
+
+    type LangOption = {
+      key: LangType;
+      label: string;
+    };
+
+    interface LocaleMessages {
+      common: Common;
+      datatable: Datatable;
+      dropdown: Record<App.Global.DropdownKey, string>;
+      form: Form;
+      icon: Icon;
+      page: Page;
+      request: Request;
+      route: Route;
+      system: System;
+      theme: Theme;
+    }
+
+    interface Schema {
+      translation: LocaleMessages;
+    }
+
+    type GetI18nKey<T extends object, K extends keyof T = keyof T> = K extends string
+      ? T[K] extends object
+        ? `${K}.${GetI18nKey<Extract<T[K], object>>}`
+        : K
+      : never;
+
+    type I18nKey = GetI18nKey<Schema['translation']>;
+
+    type TranslateOptions<Locales extends string> = import('react-i18next').TranslationProps<Locales>;
+
+    interface $T {
+      (key: I18nKey): string;
+      (key: I18nKey, plural: number, options?: TranslateOptions<LangType>): string;
+      (key: I18nKey, defaultMsg: string, options?: TranslateOptions<I18nKey>): string;
+      (key: I18nKey, list: unknown[], options?: TranslateOptions<I18nKey>): string;
+      (key: I18nKey, list: unknown[], plural: number): string;
+      (key: I18nKey, list: unknown[], defaultMsg: string): string;
+      (key: I18nKey, named: Record<string, unknown>, options?: TranslateOptions<LangType>): string;
+      (key: I18nKey, named: Record<string, unknown>, plural: number): string;
+      (key: I18nKey, named: Record<string, unknown>, defaultMsg: string): string;
+    }
+
+    interface Common {
+      action: string;
+      add: string;
+      addSuccess: string;
+      backToHome: string;
+      batchDelete: string;
+      cancel: string;
+      check: string;
+      close: string;
+      columnSetting: string;
+      config: string;
+      confirm: string;
+      confirmDelete: string;
+      createTime: string;
+      delete: string;
+      deleteSuccess: string;
+      detail: string;
+      edit: string;
+      error: string;
+      errorHint: string;
+      expandColumn: string;
+      index: string;
+      keywordSearch: string;
+      logout: string;
+      logoutConfirm: string;
+      lookForward: string;
+      modify: string;
+      modifySuccess: string;
+      noData: string;
+      operate: string;
+      pleaseCheckValue: string;
+      refresh: string;
+      reset: string;
+      search: string;
+      selectAll: string;
+      switch: string;
+      tip: string;
+      trigger: string;
+      tryAlign: string;
+      update: string;
+      updateTime: string;
+      updateSuccess: string;
+      userCenter: string;
+      warning: string;
+      yesOrNo: {
+        no: string;
+        yes: string;
+      };
+    }
+
+    type RouteKey = Router.RoutePath;
+
+    type ReplaceSlash<S extends string> = S extends `${infer A}/${infer B}` ? `${A}_${ReplaceSlash<B>}` : S;
+
+    type TransformPath<P extends string> = P extends '/'
+      ? 'home'
+      : P extends `/${infer Rest}`
+        ? ReplaceSlash<Rest>
+        : never;
+
+    type I18nRouteKey = string extends RouteKey ? string : TransformPath<RouteKey>;
+
+    type I18nRouteMap = Record<I18nRouteKey, string>;
+
+    interface Route extends I18nRouteMap {
+      notFound: string;
+      root: string;
+    }
+
+    interface Datatable {}
+    interface Form {}
+    interface Icon {}
+    interface Page {}
+    interface Request {}
+    interface System {}
+    interface Theme extends Record<string, unknown> {}
+  }
+}
+
+export {};

package/templates/admin-shell/ui/antd/components/AppTree.tsx

@@ -0,0 +1,62 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { ConfigProvider, Tree } from 'antd';
+import type { ConfigProviderProps, TreeDataNode, TreeNodeProps, TreeProps } from 'antd';
+import { clsx } from 'clsx';
+
+type TreeClassNames = Exclude<NonNullable<TreeProps['classNames']>, (...args: never[]) => unknown>;
+
+const APP_TREE_THEME: ConfigProviderProps['theme'] = {
+  components: {
+    Tree: {
+      directoryNodeSelectedBg: 'transparent',
+      indentSize: 16,
+      nodeHoverBg: 'transparent',
+      nodeSelectedBg: 'transparent'
+    }
+  }
+};
+
+const DEFAULT_CLASS_NAMES: TreeClassNames = {
+  item: 'h-38px items-center rounded-md hover:bg-layout [&:has(.ant-tree-node-selected)]:bg-primary-bg!',
+  itemSwitcher: 'mt-4px mr-0 block hover:before:bg-transparent!',
+  itemTitle: '[.ant-tree-node-selected_&]:(text-primary font-bold)'
+};
+
+export interface AppTreeProps<T extends TreeDataNode = TreeDataNode> extends Omit<TreeProps<T>, 'classNames'> {
+  /** 在默认视觉样式之上追加的 Tree 语义类名。 */
+  classNames?: TreeClassNames;
+}
+
+function renderDefaultSwitcherIcon(nodeProps: TreeNodeProps) {
+  return (
+    <SvgIcon
+      className="mt-6px size-16px"
+      icon="ph:caret-down"
+      style={{
+        transform: `rotate(${nodeProps.expanded ? 0 : -90}deg)`,
+        transition: 'transform 0.3s'
+      }}
+    />
+  );
+}
+
+const AppTree = <T extends TreeDataNode = TreeDataNode>(props: AppTreeProps<T>) => {
+  const { classNames, switcherIcon = renderDefaultSwitcherIcon, ...treeProps } = props;
+
+  function resolveClassNames(): TreeClassNames {
+    return {
+      ...classNames,
+      item: clsx(DEFAULT_CLASS_NAMES.item, classNames?.item),
+      itemSwitcher: clsx(DEFAULT_CLASS_NAMES.itemSwitcher, classNames?.itemSwitcher),
+      itemTitle: clsx(DEFAULT_CLASS_NAMES.itemTitle, classNames?.itemTitle)
+    };
+  }
+
+  return (
+    <ConfigProvider theme={APP_TREE_THEME}>
+      <Tree<T> classNames={resolveClassNames()} switcherIcon={switcherIcon} {...treeProps} />
+    </ConfigProvider>
+  );
+};
+
+export default AppTree;

package/templates/admin-shell/ui/antd/components/BeyondHiding.tsx

@@ -0,0 +1,42 @@
+import { Tooltip } from 'antd';
+import type { TooltipProps } from 'antd/lib/tooltip';
+import React, { useRef, useState } from 'react';
+
+type BeyondHidingProps = Omit<TooltipProps, 'open' | 'trigger'> & {
+  className?: string;
+  style?: React.CSSProperties;
+  title: React.ReactNode;
+};
+
+const BeyondHiding = ({ className, style, title, ...props }: BeyondHidingProps) => {
+  const [isShow, setIsShow] = useState(false);
+
+  const contentRef = useRef<HTMLSpanElement>(null);
+
+  const isShowTooltip = (): void => {
+    // 计算span标签的offsetWidth与盒子元素的offsetWidth，给isShow赋值
+    if (contentRef.current && contentRef.current.parentElement) {
+      const spanWidth = contentRef.current.offsetWidth;
+      const parentWidth = contentRef.current.parentElement.offsetWidth;
+
+      if (spanWidth > parentWidth) {
+        setIsShow(true);
+      }
+    }
+  };
+  return (
+    <Tooltip open={isShow} title={title} {...props}>
+      <span
+        className={className}
+        ref={contentRef}
+        style={style}
+        onMouseLeave={() => setIsShow(false)}
+        onMouseOver={isShowTooltip}
+      >
+        {title}
+      </span>
+    </Tooltip>
+  );
+};
+
+export default BeyondHiding;

package/templates/admin-shell/ui/antd/components/ButtonIcon.tsx

@@ -0,0 +1,123 @@
+// oxlint-disable import/no-unassigned-import
+import { SvgIcon } from '@shell/ui/compose';
+import { Button, Tooltip } from 'antd';
+import type { ButtonProps, TooltipProps } from 'antd';
+import { clsx } from 'clsx';
+import type { CSSProperties } from 'react';
+
+import type { ButtonLinkComponentProps } from './ButtonLink';
+import ButtonLink from './ButtonLink';
+import './styles/button-icon-animations.css';
+
+/** Icon hover animation types */
+export type IconHoverAnimation =
+  | 'bounce' // 弹跳 - 活泼有趣
+  | 'flip' // 3D翻转 - 酷炫效果
+  | 'pulse' // 脉冲缩放 - 呼吸效果
+  | 'rotate' // 旋转 - 适合刷新、设置等图标
+  | 'scale' // 缩放放大 - 经典的交互反馈
+  | 'shake' // 左右抖动 - 吸引注意力
+  | 'spin' // 持续旋转 - 适合加载、刷新
+  | 'swing' // 摇摆 - 类似钟摆
+  | 'tada' // 惊喜效果 - 多维度组合动画
+  | 'wiggle'; // 扭动 - 俏皮可爱
+
+type BaseProps = {
+  children?: React.ReactNode;
+  /** Button class */
+  className?: string;
+  /** Tooltip class names */
+  classNames?: {
+    button?: string;
+    icon?: string;
+    tooltip?: TooltipProps['classNames'];
+  };
+  /** Icon hover animation effect */
+  hoverAnimation?: IconHoverAnimation;
+  /** Iconify icon name */
+  icon?: string;
+  styles?: {
+    button?: ButtonProps['styles'];
+    icon?: CSSProperties;
+    tooltip?: TooltipProps['styles'];
+  };
+
+  /** Tooltip content */
+  tooltipContent?: string;
+  /** Tooltip placement */
+  tooltipPlacement?: TooltipProps['placement'];
+  /** Tooltip props */
+  tooltipProps?: Omit<TooltipProps, 'children' | 'classNames' | 'getPopupContainer' | 'placement' | 'title' | 'zIndex'>;
+  /** Trigger tooltip on parent */
+  triggerParent?: boolean;
+  /** Z-index */
+  zIndex?: number;
+};
+
+type WithButtonProps = Omit<ButtonProps, 'icon' | 'iconPosition'> & BaseProps;
+
+type WithLinkProps = Partial<Omit<ButtonLinkComponentProps, 'icon' | 'iconPosition'>> & BaseProps;
+
+export type ButtonIconProps = WithButtonProps | WithLinkProps;
+
+/** - 动态计算class */
+const computeClass = (className: string) => {
+  let clsStr = className;
+
+  if (!clsStr.includes('h-')) {
+    clsStr += ' h-2xl';
+  }
+
+  if (!clsStr.includes('text-')) {
+    clsStr += ' text-lg';
+  }
+
+  return clsStr;
+};
+
+const ButtonIcon = ({
+  children,
+  className = 'h-2xl text-lg',
+  classNames,
+  hoverAnimation,
+  icon,
+  styles,
+  tooltipContent,
+  tooltipPlacement = 'bottom',
+  tooltipProps,
+  triggerParent,
+  zIndex = 98,
+  ...rest
+}: ButtonIconProps) => {
+  const cls = computeClass(className);
+
+  function getPopupContainer(triggerNode: HTMLElement) {
+    return triggerParent ? triggerNode.parentElement! : document.body;
+  }
+
+  const Comp = 'to' in rest ? ButtonLink : Button;
+
+  const typeProps = 'to' in rest ? { btnType: 'text' as const } : { type: 'text' as const };
+
+  // 根据动画类型添加对应的动画类名
+  const animationClass = hoverAnimation ? `btn-icon-hover-${hoverAnimation}` : '';
+
+  return (
+    <Tooltip
+      classNames={classNames?.tooltip}
+      getPopupContainer={getPopupContainer}
+      placement={tooltipPlacement}
+      styles={styles?.tooltip}
+      title={tooltipContent}
+      zIndex={zIndex}
+      {...tooltipProps}
+    >
+      <Comp className={clsx(cls, classNames?.button)} {...typeProps} {...rest} styles={styles?.button}>
+        <div className={clsx('flex-center gap-8px', animationClass)}>
+          {children || <SvgIcon className={classNames?.icon} icon={icon} style={styles?.icon} />}
+        </div>
+      </Comp>
+    </Tooltip>
+  );
+};
+export default ButtonIcon;

package/templates/admin-shell/ui/antd/components/ButtonLink.tsx

@@ -0,0 +1,30 @@
+import { createLink } from '@tanstack/react-router';
+import type { LinkComponent, LinkComponentProps } from '@tanstack/react-router';
+import { Button } from 'antd';
+import type { ButtonProps } from 'antd';
+import type { Ref } from 'react';
+
+interface ButtonLinkProps extends Omit<ButtonProps, 'type'> {
+  /**
+   * - Button type
+   * - 因为link组件也有type属性,并且会吞掉button的type属性,所以需要单独传入
+   */
+  btnType?: ButtonProps['type'];
+  ref?: Ref<HTMLAnchorElement>;
+}
+
+const ButtonLinkComponent = (props: ButtonLinkProps) => {
+  const { btnType, ref, ...rest } = props;
+
+  return <Button type={btnType} {...rest} ref={ref} />;
+};
+
+export type ButtonLinkComponentProps = LinkComponentProps<typeof ButtonLinkComponent>;
+
+const CreatedButtonLinkComponent = createLink(ButtonLinkComponent);
+
+const ButtonLink: LinkComponent<typeof ButtonLinkComponent> = props => {
+  return <CreatedButtonLinkComponent preload="intent" {...props} />;
+};
+
+export default ButtonLink;

package/templates/admin-shell/ui/antd/components/ErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { Button, Typography } from 'antd';
+import type { FallbackProps } from 'react-error-boundary';
+
+const { Text, Title } = Typography;
+
+interface ErrorBoundaryProps extends FallbackProps {
+  /** Error hint text shown in production (default: 'Something went wrong') */
+  errorHint?: string;
+  /** Whether in development mode */
+  isDev?: boolean;
+  /** Retry button text (default: 'Try Again') */
+  retryText?: string;
+  /** Theme color for the reset button */
+  themeColor?: string;
+}
+
+const ErrorPage = (props: ErrorBoundaryProps) => {
+  const {
+    error,
+    errorHint = 'Something went wrong',
+    isDev = false,
+    resetErrorBoundary,
+    retryText = 'Try Again',
+    themeColor
+  } = props;
+
+  return (
+    <div className="size-full min-h-520px flex-col-center gap-16px overflow-hidden">
+      <div className="flex text-400px text-primary">
+        <SvgIcon localIcon="error" />
+      </div>
+      {isDev ? <Text code>{error.message}</Text> : <Title level={3}>{errorHint}</Title>}
+      <Button
+        style={themeColor ? { backgroundColor: themeColor } : undefined}
+        type="primary"
+        onClick={resetErrorBoundary}
+      >
+        {retryText}
+      </Button>
+    </div>
+  );
+};
+
+export default ErrorPage;

package/templates/admin-shell/ui/antd/components/ExceptionBase.tsx

@@ -0,0 +1,69 @@
+import { SvgIcon } from '@shell/ui/compose';
+import { useNavigate, useRouter } from '@tanstack/react-router';
+import { Button } from 'antd';
+import { memo } from 'react';
+
+type ExceptionType = '403' | '404' | '500';
+
+interface HomeRouteContext {
+  getHomeRoute?: () => string;
+  homeRoute?: string;
+}
+
+export interface ExceptionBaseProps {
+  /** Button text (default: 'Back to Home') */
+  buttonText?: string;
+  /** Home route used by the action button. Defaults to the router context home route. */
+  homePath?: string;
+  /**
+   * Exception type
+   *
+   * - 403: no permission
+   * - 404: not found
+   * - 500: service error
+   */
+  type: ExceptionType;
+}
+
+const iconMap: Record<ExceptionType, string> = {
+  '403': 'no-permission',
+  '404': 'not-found',
+  '500': 'service-error'
+};
+
+function getHomePath(context: unknown) {
+  if (!context || typeof context !== 'object') {
+    return '/';
+  }
+
+  const { getHomeRoute, homeRoute } = context as HomeRouteContext;
+
+  return homeRoute || getHomeRoute?.() || '/';
+}
+
+const ExceptionBase = memo((props: ExceptionBaseProps) => {
+  const { buttonText = 'Back to Home', homePath, type } = props;
+
+  const nav = useNavigate();
+  const router = useRouter();
+  const targetHomePath = homePath || getHomePath(router.options.context);
+
+  function handleClick() {
+    nav({ to: targetHomePath });
+  }
+
+  return (
+    <div className="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
+      <div className="flex text-400px text-primary">
+        <SvgIcon localIcon={iconMap[type]} />
+      </div>
+      <Button type="primary" onClick={handleClick}>
+        {buttonText}
+      </Button>
+    </div>
+  );
+});
+
+ExceptionBase.displayName = 'ExceptionBase';
+
+export default ExceptionBase;

package/templates/admin-shell/ui/antd/components/FullScreen.tsx

@@ -0,0 +1,33 @@
+import { Icon } from '@iconify/react';
+
+import ButtonIcon from './ButtonIcon';
+
+interface Props {
+  /** Button class */
+  className?: string;
+  /** Tooltip text when entering fullscreen (default: 'Fullscreen') */
+  enterTooltip?: string;
+  /** Tooltip text when exiting fullscreen (default: 'Exit Fullscreen') */
+  exitTooltip?: string;
+  /** Whether currently in fullscreen */
+  full?: boolean;
+  /** Toggle fullscreen callback */
+  toggleFullscreen: () => void;
+}
+
+const FullScreen = (props: Props) => {
+  const { className, enterTooltip = 'Fullscreen', exitTooltip = 'Exit Fullscreen', full, toggleFullscreen } = props;
+
+  return (
+    <ButtonIcon
+      className={className}
+      hoverAnimation="scale"
+      tooltipContent={full ? exitTooltip : enterTooltip}
+      onClick={toggleFullscreen}
+    >
+      <Icon icon={full ? 'gridicons:fullscreen-exit' : 'gridicons:fullscreen'} />
+    </ButtonIcon>
+  );
+};
+
+export default FullScreen;