@skyroc/scripts 2.5.0

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

@@ -0,0 +1,35 @@
+import { SvgIcon } from '@shell/ui/compose';
+import React from 'react';
+
+import ButtonIcon from './ButtonIcon';
+
+interface Props {
+  /** Button class */
+  className: string;
+  /** Click handler */
+  onClick?: React.ComponentProps<'button'>['onClick'];
+  /** Whether the item is pinned */
+  pin?: boolean;
+  /** Tooltip text when pinned (default: 'Unpin') */
+  pinnedTooltip?: string;
+  /** Tooltip text when unpinned (default: 'Pin') */
+  unpinnedTooltip?: string;
+}
+const PinToggler = (props: Props) => {
+  const { className, onClick, pin, pinnedTooltip = 'Unpin', unpinnedTooltip = 'Pin' } = props;
+
+  const icon = pin ? 'mdi-pin-off' : 'mdi-pin';
+  return (
+    <ButtonIcon
+      triggerParent
+      className={className}
+      tooltipContent={pin ? pinnedTooltip : unpinnedTooltip}
+      tooltipPlacement="bottomLeft"
+      onClick={onClick}
+    >
+      <SvgIcon icon={icon} />
+    </ButtonIcon>
+  );
+};
+
+export default PinToggler;

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

@@ -0,0 +1,20 @@
+import { Icon } from '@iconify/react';
+
+import type { ButtonIconProps } from './ButtonIcon';
+import ButtonIcon from './ButtonIcon';
+
+type Props = ButtonIconProps & {
+  isReload: boolean;
+};
+
+const ReloadButton = (props: Props) => {
+  const { isReload, ...rest } = props;
+
+  return (
+    <ButtonIcon {...rest}>
+      <Icon className={isReload ? '' : 'animate-spin animate-duration-750'} icon="ant-design:reload-outlined" />
+    </ButtonIcon>
+  );
+};
+
+export default ReloadButton;

package/templates/admin-shell/ui/antd/components/index.ts

@@ -0,0 +1,12 @@
+export { default as AppTree } from './AppTree';
+export type { AppTreeProps } from './AppTree';
+export { default as BeyondHiding } from './BeyondHiding';
+export { default as ButtonIcon } from './ButtonIcon';
+export type { ButtonIconProps, IconHoverAnimation } from './ButtonIcon';
+export { default as ButtonLink } from './ButtonLink';
+export type { ButtonLinkComponentProps } from './ButtonLink';
+export { default as ErrorBoundary } from './ErrorBoundary';
+export { default as ExceptionBase } from './ExceptionBase';
+export { default as FullScreen } from './FullScreen';
+export { default as PinToggler } from './PinToggler';
+export { default as ReloadButton } from './ReloadButton';

package/templates/admin-shell/ui/antd/components/styles/button-icon-animations.css

@@ -0,0 +1,246 @@
+/* ==================== ButtonIcon Hover Animations ==================== */
+
+/* 基础过渡效果 */
+.btn-icon-hover-scale,
+.btn-icon-hover-rotate,
+.btn-icon-hover-shake,
+.btn-icon-hover-bounce,
+.btn-icon-hover-pulse,
+.btn-icon-hover-spin,
+.btn-icon-hover-swing,
+.btn-icon-hover-flip,
+.btn-icon-hover-wiggle,
+.btn-icon-hover-tada {
+  display: inline-flex;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 1. Scale - 缩放放大效果 (经典的交互反馈) */
+.btn-icon-hover-scale {
+  transition: transform 0.3s ease;
+}
+
+.btn-icon-hover-scale:hover {
+  transform: scale(1.2);
+}
+
+/* 2. Rotate - 旋转效果 (适合刷新、设置图标) */
+.btn-icon-hover-rotate {
+  transition: transform 0.4s ease;
+}
+
+.btn-icon-hover-rotate:hover {
+  transform: rotate(180deg);
+}
+
+/* 3. Shake - 左右抖动效果 (吸引注意力) */
+.btn-icon-hover-shake:hover {
+  animation: btn-icon-shake 0.5s ease-in-out;
+}
+
+@keyframes btn-icon-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-4px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+
+/* 4. Bounce - 弹跳效果 (活泼有趣) */
+.btn-icon-hover-bounce:hover {
+  animation: btn-icon-bounce 0.6s ease;
+}
+
+@keyframes btn-icon-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  10%,
+  30% {
+    transform: translateY(-8px);
+  }
+  20% {
+    transform: translateY(-12px);
+  }
+  40%,
+  60% {
+    transform: translateY(-4px);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  70%,
+  90% {
+    transform: translateY(-2px);
+  }
+  80% {
+    transform: translateY(-3px);
+  }
+}
+
+/* 5. Pulse - 脉冲缩放效果 (呼吸效果) */
+.btn-icon-hover-pulse:hover {
+  animation: btn-icon-pulse 1s ease-in-out infinite;
+}
+
+@keyframes btn-icon-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 0.85;
+  }
+}
+
+/* 6. Spin - 持续旋转效果 (适合加载、刷新) */
+.btn-icon-hover-spin:hover {
+  animation: btn-icon-spin 0.8s linear infinite;
+}
+
+@keyframes btn-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 7. Swing - 摇摆效果 (类似钟摆) */
+.btn-icon-hover-swing:hover {
+  animation: btn-icon-swing 0.6s ease-in-out;
+  transform-origin: center top;
+}
+
+@keyframes btn-icon-swing {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  15% {
+    transform: rotate(15deg);
+  }
+  30% {
+    transform: rotate(-10deg);
+  }
+  45% {
+    transform: rotate(8deg);
+  }
+  60% {
+    transform: rotate(-6deg);
+  }
+  75% {
+    transform: rotate(4deg);
+  }
+  90% {
+    transform: rotate(-2deg);
+  }
+}
+
+/* 8. Flip - 3D翻转效果 (酷炫效果) */
+.btn-icon-hover-flip {
+  transition: transform 0.6s ease;
+  transform-style: preserve-3d;
+}
+
+.btn-icon-hover-flip:hover {
+  transform: rotateY(180deg);
+}
+
+/* 9. Wiggle - 扭动效果 (俏皮可爱) */
+.btn-icon-hover-wiggle:hover {
+  animation: btn-icon-wiggle 0.5s ease-in-out;
+}
+
+@keyframes btn-icon-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: rotate(-3deg);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: rotate(3deg);
+  }
+}
+
+/* 10. Tada - 惊喜效果 (多维度组合动画) */
+.btn-icon-hover-tada:hover {
+  animation: btn-icon-tada 0.8s ease;
+}
+
+@keyframes btn-icon-tada {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+  10%,
+  20% {
+    transform: scale(0.95) rotate(-3deg);
+  }
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale(1.1) rotate(3deg);
+  }
+  40%,
+  60%,
+  80% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+/* 性能优化：使用 GPU 加速 */
+.btn-icon-hover-scale,
+.btn-icon-hover-rotate,
+.btn-icon-hover-shake,
+.btn-icon-hover-bounce,
+.btn-icon-hover-pulse,
+.btn-icon-hover-spin,
+.btn-icon-hover-swing,
+.btn-icon-hover-flip,
+.btn-icon-hover-wiggle,
+.btn-icon-hover-tada {
+  will-change: transform;
+}
+
+/* 添加平滑的光标指针 */
+.btn-icon-hover-scale:hover,
+.btn-icon-hover-rotate:hover,
+.btn-icon-hover-shake:hover,
+.btn-icon-hover-bounce:hover,
+.btn-icon-hover-pulse:hover,
+.btn-icon-hover-spin:hover,
+.btn-icon-hover-swing:hover,
+.btn-icon-hover-flip:hover,
+.btn-icon-hover-wiggle:hover,
+.btn-icon-hover-tada:hover {
+  cursor: pointer;
+}

package/templates/admin-shell/ui/antd/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/templates/admin-shell/ui/antd/styles.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/templates/admin-shell/ui/compose/animate-feature.ts

@@ -0,0 +1,5 @@
+import { domMax } from 'motion/react';
+
+const animateFeature = domMax;
+
+export default animateFeature;

package/templates/admin-shell/ui/compose/components/BetterScroll.tsx

@@ -0,0 +1,51 @@
+import type { Options } from '@better-scroll/core';
+import BScroll from '@better-scroll/core';
+import { useMount, useSize, useUpdateEffect } from 'ahooks';
+import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, FC, Ref } from 'react';
+import { useImperativeHandle, useRef } from 'react';
+
+interface Props extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * BetterScroll options
+   *
+   * @link https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html
+   */
+  options: Options;
+  ref: Ref<BScroll>;
+}
+
+const BetterScroll: FC<Props> = ({ children, className, options, ref, ...rest }) => {
+  const bsWrapper = useRef<HTMLDivElement>(null);
+  const bsContent = useRef<HTMLDivElement>(null);
+  const bsWrapperSize = useSize(bsWrapper);
+  const bsContentSize = useSize(bsContent);
+  const instance = useRef<BScroll | null>(null);
+
+  const isScrollY = Boolean(options.scrollY);
+
+  function initBetterScroll() {
+    if (!bsWrapper.current) return;
+    instance.current = new BScroll(bsWrapper.current, options);
+  }
+
+  useImperativeHandle(ref, () => instance.current as BScroll);
+
+  useUpdateEffect(() => {
+    instance.current?.refresh();
+  }, [bsWrapperSize?.width, bsContentSize?.width]);
+
+  useMount(() => {
+    initBetterScroll();
+  });
+
+  return (
+    <div ref={bsWrapper} {...rest} className={clsx('h-full text-left', className)}>
+      <div className={clsx('inline-block', { 'h-full': !isScrollY })} ref={bsContent}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default BetterScroll;

package/templates/admin-shell/ui/compose/components/DarkModeContainer.tsx

@@ -0,0 +1,22 @@
+import { clsx } from 'clsx';
+
+interface Props extends React.ComponentProps<'div'> {
+  inverted?: boolean;
+}
+
+const DarkModeContainer = ({ children, className, inverted, ...rest }: Props) => {
+  return (
+    <div
+      className={clsx(
+        'bg-container text-base-text transition-300',
+        { 'bg-inverted text-#1f1f1f': inverted },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DarkModeContainer;

package/templates/admin-shell/ui/compose/components/FlipText.tsx

@@ -0,0 +1,41 @@
+import { clsx } from 'clsx';
+import type { Variants } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+
+interface FlipTextProps {
+  readonly className?: string;
+  readonly delayMultiple?: number;
+  readonly duration?: number;
+  readonly framerProps?: Variants;
+  readonly word: string;
+}
+
+const FlipText = ({
+  className,
+  delayMultiple = 0.08,
+  duration = 0.5,
+  framerProps = {
+    hidden: { opacity: 0, rotateX: -90 },
+    visible: { opacity: 1, rotateX: 0 }
+  },
+  word
+}: FlipTextProps) => {
+  return (
+    <AnimatePresence mode="sync">
+      {word.split('').map((char, i) => (
+        <motion.span
+          animate="visible"
+          className={clsx('drop-shadow-sm', className)}
+          initial="hidden"
+          key={i}
+          transition={{ delay: i * delayMultiple, duration }}
+          variants={framerProps}
+        >
+          {char}
+        </motion.span>
+      ))}
+    </AnimatePresence>
+  );
+};
+
+export default FlipText;

package/templates/admin-shell/ui/compose/components/I18nLabel.tsx

@@ -0,0 +1,18 @@
+import type { i18n } from 'i18next';
+import type { ReactNode } from 'react';
+import { Translation } from 'react-i18next';
+
+interface I18nLabelProps {
+  /** Fallback content when i18nKey is not provided */
+  fallback?: ReactNode;
+  /** I18n instance (optional, uses default if not provided) */
+  i18n?: i18n;
+  /** I18n translation key */
+  i18nKey?: string | null;
+}
+
+const I18nLabel = ({ fallback, i18n: i18nInstance, i18nKey }: I18nLabelProps) => {
+  return <Translation i18n={i18nInstance}>{t => (i18nKey ? t(i18nKey) : fallback)}</Translation>;
+};
+
+export default I18nLabel;

package/templates/admin-shell/ui/compose/components/LazyAnimate.tsx

@@ -0,0 +1,10 @@
+import { LazyMotion } from 'motion/react';
+import type { PropsWithChildren } from 'react';
+
+const loadFeatures = () => import('../animate-feature').then(res => res.default);
+
+const LazyAnimate = ({ children }: PropsWithChildren) => {
+  return <LazyMotion features={loadFeatures}>{children}</LazyMotion>;
+};
+
+export default LazyAnimate;

package/templates/admin-shell/ui/compose/components/LookForward.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react';
+
+import SvgIcon from './SvgIcon';
+
+interface LookForwardProps extends PropsWithChildren {
+  /** Fallback title text when no children provided (default: 'Coming Soon') */
+  title?: string;
+}
+
+const LookForward = (props: LookForwardProps) => {
+  const { children, title = 'Coming Soon' } = props;
+
+  return (
+    <div className="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
+      <div className="flex text-400px text-primary">
+        <SvgIcon localIcon="expectation" />
+      </div>
+
+      {children || <h3 className="text-28px text-primary font-500">{title}</h3>}
+    </div>
+  );
+};
+
+export default LookForward;

package/templates/admin-shell/ui/compose/components/NumberTicker.tsx

@@ -0,0 +1,105 @@
+import { clsx } from 'clsx';
+import type { AnimationPlaybackControls } from 'motion/react';
+import { animate, useInView, useMotionValue, useSpring } from 'motion/react';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useRef } from 'react';
+
+interface NumberTickerProps extends ComponentPropsWithoutRef<'span'> {
+  /** - 小数位数 */
+  decimalPlaces?: number;
+  /** - 延时时间 单位：秒 */
+  delay?: number;
+  /** - 动画方向 */
+  direction?: 'down' | 'up';
+  /** - 动画时长 单位：秒 如果不指定 则使用spring动画 更为自然地过渡 */
+  duration?: number;
+  /** - 前缀 */
+  prefix?: string;
+  /** - 起始值 */
+  startValue?: number;
+  /** - 后缀 */
+  suffix?: string;
+  /** - 目标值 */
+  value: number;
+}
+
+const NumberTicker = ({
+  className,
+  decimalPlaces = 0,
+  delay = 0,
+  direction = 'up',
+  duration,
+  prefix = '',
+  startValue = 0,
+  suffix = '',
+  value,
+  ...props
+}: NumberTickerProps) => {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const endValue = direction === 'down' ? 0 : value;
+
+  const motionValue = useMotionValue(direction === 'down' ? value : 0);
+
+  const isInView = useInView(ref, { margin: '0px', once: true });
+
+  const springValue = useSpring(motionValue, {
+    damping: 60,
+    stiffness: 100
+  });
+
+  function updateTextContent(latest: number) {
+    if (!ref.current) return;
+
+    const formattedNumber = Intl.NumberFormat('en-US', {
+      maximumFractionDigits: decimalPlaces,
+      minimumFractionDigits: decimalPlaces
+    }).format(Number(latest.toFixed(decimalPlaces)));
+    ref.current.textContent = `${prefix} ${formattedNumber} ${suffix}`;
+  }
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    isInView &&
+      setTimeout(() => {
+        motionValue.set(endValue);
+      }, delay * 1000);
+  }, [motionValue, isInView, delay, endValue]);
+
+  useEffect(() => {
+    let animation: AnimationPlaybackControls;
+    if (duration) {
+      animation = animate(
+        motionValue.get(), // 起始值
+        endValue, // 目标值
+        {
+          duration, // 动画时长（秒）
+          onUpdate: latest => {
+            // 更新 motionValue（可选：如果后续还有依赖该值的逻辑）
+            motionValue.set(latest);
+
+            updateTextContent(latest);
+          }
+        }
+      );
+    } else {
+      springValue.on('change', latest => {
+        updateTextContent(latest);
+      });
+    }
+    return () => animation?.cancel();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [motionValue, springValue, endValue, duration]);
+
+  return (
+    <span
+      className={clsx('inline-block text-white tracking-wider tabular-nums dark:text-dark', className)}
+      ref={ref}
+      {...props}
+    >
+      {prefix} {startValue} {suffix}
+    </span>
+  );
+};
+
+export default NumberTicker;

package/templates/admin-shell/ui/compose/components/Portal.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PortalProps {
+  /** 是否在容器不存在时自动创建 */
+  autoCreate?: boolean;
+  children: ReactNode;
+  /** 容器 ID 或 CSS 选择器 */
+  container: string | HTMLElement;
+
+  /** 容器不存在时的回退内容 */
+  fallback?: ReactNode;
+  /** 自动创建时的标签名 */
+  tagName?: keyof HTMLElementTagNameMap;
+}
+
+const Portal = (props: PortalProps) => {
+  const { autoCreate = false, children, container, fallback = null, tagName = 'div' } = props;
+
+  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);
+
+  const createdElementRef = useRef<HTMLElement | null>(null);
+
+  function findTargetElement() {
+    let element: HTMLElement | null = null;
+
+    // 支持直接传入 HTMLElement
+    if (container instanceof HTMLElement) {
+      element = container;
+    }
+    // 支持 ID（#id）
+    else if (typeof container === 'string') {
+      if (container.startsWith('#')) {
+        element = document.getElementById(container.slice(1));
+      }
+      // 支持 CSS 选择器
+      else {
+        element = document.querySelector<HTMLElement>(container);
+      }
+    }
+
+    // 自动创建容器
+    if (!element && autoCreate && typeof container === 'string') {
+      element = document.createElement(tagName);
+      element.id = container.startsWith('#') ? container.slice(1) : container;
+      document.body.appendChild(element);
+      createdElementRef.current = element;
+    }
+
+    setTargetElement(element);
+  }
+
+  useEffect(() => {
+    findTargetElement();
+
+    // 清理：移除自动创建的元素
+    return () => {
+      if (createdElementRef.current) {
+        document.body.removeChild(createdElementRef.current);
+        createdElementRef.current = null;
+      }
+    };
+  }, []);
+
+  // 容器不存在时渲染回退内容
+  if (!targetElement) {
+    return fallback;
+  }
+
+  return createPortal(children, targetElement);
+};
+
+export default Portal;