@skyroc/scripts 2.5.0

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

@@ -0,0 +1,39 @@
+import { Icon } from '@iconify/react';
+import type { CSSProperties } from 'react';
+
+interface Props {
+  readonly className?: string;
+  /** Iconify icon name */
+  readonly icon?: string | null;
+  /** Local svg icon name */
+  readonly localIcon?: string | null;
+  /** Local icon prefix (default: 'icon-local') */
+  readonly localIconPrefix?: string;
+  readonly style?: CSSProperties;
+}
+
+const defaultLocalIcon = 'no-icon';
+const symbolId = (localIconPrefix: string, localIcon: string | null = defaultLocalIcon) => {
+  const iconName = localIcon || defaultLocalIcon;
+
+  return `#${localIconPrefix}-${iconName}`;
+};
+
+/**
+ * Props
+ *
+ * - Support iconify and local svg icon
+ * - If icon and localIcon are passed at the same time, localIcon will be rendered first
+ */
+const SvgIcon = ({ icon, localIcon, localIconPrefix = 'icon-local', ...props }: Props) => {
+  /** If localIcon is passed, render localIcon first */
+  return localIcon || !icon ? (
+    <svg height="1em" width="1em" {...props} aria-hidden="true">
+      <use fill="currentColor" href={symbolId(localIconPrefix, localIcon)} />
+    </svg>
+  ) : (
+    <Icon icon={icon} {...props} />
+  );
+};
+
+export default SvgIcon;

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

@@ -0,0 +1,83 @@
+import { clsx } from 'clsx';
+import type { MotionProps } from 'motion/react';
+import { motion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
+
+interface TypingAnimationProps extends MotionProps {
+  as?: React.ElementType;
+  children: string;
+  className?: string;
+  delay?: number;
+  duration?: number;
+  startOnView?: boolean;
+}
+
+export function TypingAnimation({
+  as: Component = 'div',
+  children,
+  className,
+  delay = 0,
+  duration = 50,
+  startOnView = false,
+  ...props
+}: TypingAnimationProps) {
+  const MotionComponent = motion.create(Component, {
+    forwardMotionProps: true
+  });
+
+  const [displayedText, setDisplayedText] = useState<string>('');
+  const [started, setStarted] = useState(false);
+  const elementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!startOnView) {
+      const startTimeout = setTimeout(() => {
+        setStarted(true);
+      }, delay);
+      return () => clearTimeout(startTimeout);
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            setStarted(true);
+          }, delay);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [delay, startOnView]);
+
+  useEffect(() => {
+    if (!started) return;
+
+    let i = 0;
+    const typingEffect = setInterval(() => {
+      if (i < children.length) {
+        setDisplayedText(children.substring(0, i + 1));
+        i += 1;
+      } else {
+        clearInterval(typingEffect);
+      }
+    }, duration);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      clearInterval(typingEffect);
+    };
+  }, [children, duration, started]);
+
+  return (
+    <MotionComponent className={clsx('tracking-[-0.02em]', className)} ref={elementRef} {...props}>
+      {displayedText}
+    </MotionComponent>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { getPaletteColorByNumber } from '@skyroc/color';
+
+interface Props {
+  /** Theme color */
+  themeColor: string;
+}
+
+const WaveBg = ({ themeColor }: Props) => {
+  const lightColor = getPaletteColorByNumber(themeColor, 200);
+  const darkColor = getPaletteColorByNumber(themeColor, 500);
+
+  return (
+    <div className="absolute-lt z-1 size-full overflow-hidden">
+      <div className="absolute -right-300px -top-900px lt-sm:(-right-100px -top-1170px)">
+        <svg height="1337" width="1337">
+          <defs>
+            <path
+              d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
+              fillRule="evenodd"
+              id="path-1"
+              opacity="1"
+            />
+            <linearGradient id="linearGradient-2" x1="0.79" x2="0.21" y1="0.62" y2="0.86">
+              <stop offset="0" stopColor={lightColor} stopOpacity="1" />
+              <stop offset="1" stopColor={darkColor} stopOpacity="1" />
+            </linearGradient>
+          </defs>
+          <g opacity="1">
+            <use fill="url(#linearGradient-2)" fillOpacity="1" xlinkHref="#path-1" />
+          </g>
+        </svg>
+      </div>
+      <div className="absolute -bottom-400px -left-200px lt-sm:(-bottom-760px -left-100px)">
+        <svg height="896" width="967.8852157128662">
+          <defs>
+            <path
+              d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
+              fillRule="evenodd"
+              id="path-2"
+              opacity="1"
+            />
+            <linearGradient id="linearGradient-3" x1="0.5" x2="0.5" y1="0" y2="1">
+              <stop offset="0" stopColor={lightColor} stopOpacity="1" />
+              <stop offset="1" stopColor={darkColor} stopOpacity="1" />
+            </linearGradient>
+          </defs>
+          <g opacity="1">
+            <use fill="url(#linearGradient-3)" fillOpacity="1" xlinkHref="#path-2" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default WaveBg;

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

@@ -0,0 +1,11 @@
+export { default as BetterScroll } from './BetterScroll';
+export { default as DarkModeContainer } from './DarkModeContainer';
+export { default as FlipText } from './FlipText';
+export { default as I18nLabel } from './I18nLabel';
+export { default as LazyAnimate } from './LazyAnimate';
+export { default as LookForward } from './LookForward';
+export { default as NumberTicker } from './NumberTicker';
+export { default as Portal } from './Portal';
+export { default as SvgIcon } from './SvgIcon';
+export { TypingAnimation } from './TypingAnimation';
+export { default as WaveBg } from './WaveBg';

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

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

package/templates/admin-shell/ui/compose/table/DragContent.tsx

@@ -0,0 +1,239 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button, Checkbox, Divider, Tooltip } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon } from '../components';
+
+import type { TableColumnCheck, TableColumnFixed } from './types';
+
+interface DragContentProps {
+  /** 可配置显隐、排序和固定位置的表格列。 */
+  columns: TableColumnCheck[];
+  /** 更新列设置后的回调。 */
+  setColumnChecks: (checks: TableColumnCheck[]) => void;
+}
+
+interface SortableItemProps {
+  /** 当前列配置项。 */
+  item: TableColumnCheck;
+  /** 切换列固定位置时触发。 */
+  onFixedChange: (item: TableColumnCheck) => void;
+  /** 切换列显示状态时触发。 */
+  onVisibleChange: (item: TableColumnCheck, checked: boolean) => void;
+}
+
+const FIXED_OPTIONS: TableColumnFixed[] = ['left', 'right', 'unFixed'];
+
+const fixedTooltipRecord: Record<TableColumnFixed, string> = {
+  left: 'datatable.fixed.right',
+  right: 'datatable.fixed.unFixed',
+  unFixed: 'datatable.fixed.left'
+};
+
+/** 单个可拖拽列项组件。 */
+const SortableItem = (props: SortableItemProps) => {
+  const { item, onFixedChange, onVisibleChange } = props;
+
+  const { t } = useTranslation();
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id: item.key
+  });
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.6 : 1,
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+
+  function handleCheckChange(event: { target: { checked: boolean } }) {
+    onVisibleChange(item, event.target.checked);
+  }
+
+  function handleFixedClick() {
+    onFixedChange(item);
+  }
+
+  return (
+    <div
+      className="h-36px flex items-center justify-between gap-6px rd-4px px-6px transition-colors hover:bg-primary hover:bg-opacity-10"
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+    >
+      <div className="min-w-0 flex flex-1 items-center">
+        <span className="mr-8px h-full flex cursor-move items-center text-icon" {...listeners}>
+          <SvgIcon icon="mdi:drag" />
+        </span>
+        <Checkbox checked={item.checked} className="min-w-0 flex-1" onChange={handleCheckChange}>
+          <span className="block truncate">{renderColumnTitle(item.title, item.key)}</span>
+        </Checkbox>
+      </div>
+      <Tooltip title={t(fixedTooltipRecord[item.fixed])}>
+        <Button
+          disabled={!item.checked}
+          icon={renderFixedIcon(item.fixed)}
+          size="small"
+          tabIndex={-1}
+          type="text"
+          onClick={handleFixedClick}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+/** 列设置拖拽内容组件。 */
+const DragContent = (props: DragContentProps) => {
+  const { columns, setColumnChecks } = props;
+
+  const { t } = useTranslation();
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    })
+  );
+
+  const visibleColumns = columns.filter(item => item.visible);
+  const visibleStats = getVisibleStats(columns);
+  const selectAllChecked = visibleStats.total > 0 && visibleStats.checked === visibleStats.total;
+  const selectAllIndeterminate = visibleStats.checked > 0 && visibleStats.checked < visibleStats.total;
+
+  function handleSelectAll(event: { target: { checked: boolean } }) {
+    const nextColumns = columns.map(item => {
+      if (!item.visible) return item;
+
+      return {
+        ...item,
+        checked: event.target.checked
+      };
+    });
+
+    setColumnChecks(nextColumns);
+  }
+
+  function handleVisibleChange(target: TableColumnCheck, checked: boolean) {
+    const nextColumns = columns.map(item => {
+      if (item.key !== target.key) return item;
+
+      return {
+        ...item,
+        checked
+      };
+    });
+
+    setColumnChecks(nextColumns);
+  }
+
+  function handleFixedChange(target: TableColumnCheck) {
+    const nextFixed = getNextFixed(target.fixed);
+    const nextColumns = columns.map(item => {
+      if (item.key !== target.key) return item;
+
+      return {
+        ...item,
+        fixed: nextFixed
+      };
+    });
+
+    setColumnChecks(nextColumns);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = columns.findIndex(item => item.key === active.id);
+    const newIndex = columns.findIndex(item => item.key === over.id);
+
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    setColumnChecks(arrayMove(columns, oldIndex, newIndex));
+  }
+
+  return (
+    <div className="w-220px">
+      <div className="h-36px flex items-center rd-4px px-26px transition-colors hover:bg-primary hover:bg-opacity-10">
+        <Checkbox
+          checked={selectAllChecked}
+          className="flex-1"
+          disabled={visibleStats.total === 0}
+          indeterminate={selectAllIndeterminate}
+          onChange={handleSelectAll}
+        >
+          {t('common.selectAll')}
+        </Checkbox>
+      </div>
+      <Divider className="!my-4px" />
+      <div className="max-h-240px overflow-y-auto">
+        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+          <SortableContext items={visibleColumns.map(item => item.key)} strategy={verticalListSortingStrategy}>
+            {visibleColumns.map(item => (
+              <SortableItem
+                item={item}
+                key={item.key}
+                onFixedChange={handleFixedChange}
+                onVisibleChange={handleVisibleChange}
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </div>
+    </div>
+  );
+};
+
+export default DragContent;
+
+function getVisibleStats(columns: TableColumnCheck[]) {
+  let total = 0;
+  let checked = 0;
+
+  columns.forEach(item => {
+    if (!item.visible) return;
+
+    total += 1;
+
+    if (item.checked) {
+      checked += 1;
+    }
+  });
+
+  return { checked, total };
+}
+
+function getNextFixed(fixed: TableColumnFixed) {
+  const index = FIXED_OPTIONS.findIndex(item => item === fixed);
+
+  if (index === -1 || index === FIXED_OPTIONS.length - 1) {
+    return FIXED_OPTIONS[0];
+  }
+
+  return FIXED_OPTIONS[index + 1];
+}
+
+function renderColumnTitle(title: TableColumnCheck['title'], fallback: string): ReactNode {
+  if (typeof title === 'function') {
+    return fallback;
+  }
+
+  return title ?? fallback;
+}
+
+function renderFixedIcon(fixed: TableColumnFixed) {
+  if (fixed === 'left') {
+    return <SvgIcon className="rotate-270" icon="octicon:pin-16" />;
+  }
+
+  if (fixed === 'right') {
+    return <SvgIcon icon="octicon:pin-slash-16" />;
+  }
+
+  return <SvgIcon icon="octicon:pin-16" />;
+}

package/templates/admin-shell/ui/compose/table/TableHeaderOperation.tsx

@@ -0,0 +1,210 @@
+import { Button, Popconfirm, Popover, Space, Upload } from 'antd';
+import type { SpaceProps } from 'antd';
+import classNames from 'clsx';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon } from '../components';
+
+import DragContent from './DragContent';
+import type { TableColumnCheck } from './types';
+
+interface TableHeaderOperationProps {
+  /** 添加按钮点击事件 */
+  add?: () => Promise<void> | void;
+  /** 添加按钮文案，默认使用 common.add */
+  addText?: string;
+  /** 批量删除按钮文案，默认使用 common.batchDelete */
+  batchDeleteText?: string;
+  /** 自定义操作按钮（会替换默认的添加和批量删除按钮） */
+  children?: ReactNode;
+  /** 表格列配置 */
+  columns: TableColumnCheck[];
+  /** 列设置按钮文案，默认使用 common.columnSetting */
+  columnSettingText?: string;
+  /** 是否禁用删除按钮 */
+  disabledDelete?: boolean;
+  /** 下载导入模板点击事件 */
+  downloadTemplate?: () => Promise<void> | void;
+  /** 导出按钮点击事件 */
+  exportData?: () => Promise<void> | void;
+  /** 导出按钮加载状态 */
+  exportLoading?: boolean;
+  /** 导出按钮文案 */
+  exportText?: string;
+  /** 导入文件选择事件 */
+  importData?: (file: File) => Promise<void> | void;
+  /** 导入按钮加载状态 */
+  importLoading?: boolean;
+  /** 导入按钮文案 */
+  importText?: string;
+  /** Space 组件的对齐方式 */
+  itemAlign?: SpaceProps['align'];
+  /** 加载状态（刷新按钮图标会旋转） */
+  loading?: boolean;
+  /** 批量删除按钮点击事件 */
+  onDelete?: () => Promise<void> | void;
+  /** 前缀内容（显示在最前面） */
+  prefix?: ReactNode;
+  /** 刷新按钮点击事件 */
+  refresh: () => Promise<void> | void;
+  /** 刷新按钮文案，默认使用 common.refresh */
+  refreshText?: string;
+  /** 更新列配置的回调 */
+  setColumnChecks: (checks: TableColumnCheck[]) => void;
+  /** 后缀内容（显示在最后面） */
+  suffix?: ReactNode;
+  /** 下载模板按钮加载状态 */
+  templateLoading?: boolean;
+  /** 下载模板按钮文案 */
+  templateText?: string;
+}
+
+/**
+ * 表格头部操作栏组件
+ *
+ * 提供常用的表格操作功能： - 添加按钮 - 批量删除按钮 - 刷新按钮 - 列设置（显示/隐藏、拖拽排序）
+ *
+ * @example
+ *   ```tsx
+ *   <TableHeaderOperation
+ *     columns={columnChecks}
+ *     setColumnChecks={setColumnChecks}
+ *     add={handleAdd}
+ *     onDelete={handleBatchDelete}
+ *     disabledDelete={checkedRowKeys.length === 0}
+ *     refresh={getData}
+ *     loading={loading}
+ *   />;
+ *   ```
+ */
+const TableHeaderOperation = (props: TableHeaderOperationProps) => {
+  const {
+    add,
+    addText,
+    batchDeleteText,
+    children,
+    columns,
+    columnSettingText,
+    disabledDelete = false,
+    downloadTemplate,
+    exportData,
+    exportLoading = false,
+    exportText = '导出数据',
+    importData,
+    importLoading = false,
+    importText = '导入数据',
+    itemAlign,
+    loading = false,
+    onDelete,
+    prefix,
+    refresh,
+    refreshText,
+    setColumnChecks,
+    suffix,
+    templateLoading = false,
+    templateText = '下载模板'
+  } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <Space wrap align={itemAlign} className="lt-sm:w-200px">
+      {prefix}
+
+      {children || (
+        <>
+          {add && (
+            <Button
+              ghost
+              icon={<SvgIcon className="text-icon" icon="ic:round-plus" />}
+              size="small"
+              type="primary"
+              onClick={add}
+            >
+              {addText ?? t('common.add')}
+            </Button>
+          )}
+
+          {onDelete && (
+            <Popconfirm title={t('common.confirmDelete')} onConfirm={onDelete}>
+              <Button
+                danger
+                ghost
+                disabled={disabledDelete}
+                icon={<SvgIcon className="text-icon" icon="ic:round-delete" />}
+                size="small"
+              >
+                {batchDeleteText ?? t('common.batchDelete')}
+              </Button>
+            </Popconfirm>
+          )}
+        </>
+      )}
+
+      {importData && (
+        <Upload
+          accept=".xlsx,.xls"
+          beforeUpload={file => {
+            Promise.resolve(importData(file)).catch(() => undefined);
+            return false;
+          }}
+          maxCount={1}
+          showUploadList={false}
+        >
+          <Button
+            disabled={importLoading} icon={<SvgIcon icon="mdi:upload" />} loading={importLoading} size="small">
+            {importText}
+          </Button>
+        </Upload>
+      )}
+
+      {exportData && (
+        <Button
+          icon={<SvgIcon icon="mdi:download" />} loading={exportLoading} size="small" onClick={exportData}>
+          {exportText}
+        </Button>
+      )}
+
+      {downloadTemplate && (
+        <Button
+          icon={<SvgIcon icon="mdi:file-download-outline" />}
+          loading={templateLoading}
+          size="small"
+          onClick={downloadTemplate}
+        >
+          {templateText}
+        </Button>
+      )}
+
+      <Button
+        size="small"
+        icon={
+          <SvgIcon
+            className={classNames('text-icon', {
+              'animate-spin': loading
+            })}
+            icon="mdi:refresh"
+          />
+        }
+        onClick={refresh}
+      >
+        {refreshText ?? t('common.refresh')}
+      </Button>
+
+      <Popover
+        placement="bottomRight"
+        trigger="click"
+        content={<DragContent columns={columns} setColumnChecks={setColumnChecks} />}
+      >
+        <Button icon={<SvgIcon icon="ant-design:setting-outlined" />} size="small">
+          {columnSettingText ?? t('common.columnSetting')}
+        </Button>
+      </Popover>
+
+      {suffix}
+    </Space>
+  );
+};
+
+export default TableHeaderOperation;