@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/spinner/index.tsx

@@ -0,0 +1,335 @@
+/**
+ * 加载指示器 Spinner
+ *
+ * shadcn v4 composable 套件：原子 Spinner + SpinnerTip 文案 + SpinnerOverlay 包裹遮罩 + SpinnerFullscreen 全屏遮罩。
+ * 对齐 cloud-design Loading 的能力（visible / tip / tipAlign / indicator / inline / 100ms 防闪 / fullScreen / Esc 关闭）。
+ *
+ * @when
+ * - 按钮 / Trigger / 单元格内的行内 loading 反馈
+ * - 局部内容区在异步加载时的遮罩态（包裹模式 + 100ms 防闪）
+ * - 关键操作（提交、保存）时的全屏阻断态（带 Esc 关闭）
+ *
+ * 组合结构：SpinnerOverlay > children + SpinnerOverlayMask > Spinner + SpinnerTip
+ */
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2Icon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* Spinner（原子）                                                             */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+const spinnerVariants = cva('shrink-0 animate-spin', {
+  variants: {
+    size: {
+      xs: 'size-3',
+      sm: 'size-3.5',
+      md: 'size-4',
+      lg: 'size-5',
+    },
+    tone: {
+      default: 'text-current',
+      primary: 'text-primary',
+      inverse: 'text-primary-foreground',
+      muted: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    tone: 'default',
+  },
+});
+
+export interface SpinnerProps
+  extends Omit<React.ComponentProps<'svg'>, 'children'>,
+    VariantProps<typeof spinnerVariants> {
+  /** sr-only 读屏文本，默认 `加载中`；如父级已有可见 tip 可置空 */
+  label?: string;
+}
+
+/**
+ * 原子旋转指示符。size 不传时由父级 svg utility 决定（兼容 Button `[&_svg]:size-4` 链路）。
+ */
+function Spinner({
+  className,
+  size,
+  tone,
+  label = '加载中',
+  ...props
+}: SpinnerProps) {
+  return (
+    <span
+      data-slot="spinner-root"
+      role="status"
+      aria-live="polite"
+      className="inline-flex shrink-0 items-center justify-center"
+    >
+      <Loader2Icon
+        data-slot="spinner"
+        data-size={size}
+        data-tone={tone ?? 'default'}
+        aria-hidden="true"
+        className={cn(spinnerVariants({ size, tone }), className)}
+        {...props}
+      />
+      {label ? <span className="sr-only">{label}</span> : null}
+    </span>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerTip（文案）                                                          */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Spinner 的文字提示，常与原子 Spinner 同行展示，或作为 SpinnerOverlay/Fullscreen 的内置 tip 节点。
+ */
+function SpinnerTip({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="spinner-tip"
+      className={cn('text-xs text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* visibility hook（100ms 防闪）                                                */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+function useDelayedVisible(visible: boolean, delay: number): boolean {
+  const [shown, setShown] = React.useState(visible && delay <= 0);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (!visible) {
+      setShown(false);
+      return;
+    }
+    if (delay <= 0) {
+      setShown(true);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      setShown(true);
+      timerRef.current = null;
+    }, delay);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [visible, delay]);
+
+  return shown;
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerOverlay（包裹模式）                                                   */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+const OVERLAY_INDICATOR_SIZE: Record<
+  NonNullable<SpinnerOverlayProps['size']>,
+  NonNullable<SpinnerProps['size']>
+> = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+};
+
+export interface SpinnerOverlayProps extends React.ComponentProps<'div'> {
+  /** loading 状态，默认 true。从 false→true 切换会延迟 `delay` 毫秒后显示，避免短任务闪烁 */
+  visible?: boolean;
+  /** 显示延迟（ms），默认 100；设为 0 关闭防闪 */
+  delay?: number;
+  /** 文字提示，与 indicator 一起展示在遮罩中央 */
+  tip?: React.ReactNode;
+  /** tip 与 indicator 的相对位置，默认 `bottom` */
+  tipAlign?: 'right' | 'bottom';
+  /** 自定义 indicator，默认 `<Spinner size={size} tone="primary" />` */
+  indicator?: React.ReactNode;
+  /** 默认 indicator 的尺寸（仅在未传 indicator 时生效），默认 `lg` */
+  size?: 'sm' | 'md' | 'lg';
+  /** 容器布局：`true` 为 inline-block，`false` 为 block 通栏，默认 `true` */
+  inline?: boolean;
+  /** 遮罩生效时是否对 children 做模糊处理，默认 `true`（对齐 cloud-design hybridcloud blur 视觉） */
+  blur?: boolean;
+}
+
+/**
+ * 包裹子内容的 loading 遮罩。`visible` 为 true 时叠加半透明遮罩 + 内容模糊 + 指示符；
+ * 内置 100ms 显示防闪与 `aria-busy` 同步。
+ */
+function SpinnerOverlay({
+  visible = true,
+  delay = 100,
+  tip,
+  tipAlign = 'bottom',
+  indicator,
+  size = 'lg',
+  inline = true,
+  blur = true,
+  className,
+  children,
+  ...props
+}: SpinnerOverlayProps) {
+  const shown = useDelayedVisible(visible, delay);
+
+  return (
+    <div
+      data-slot="spinner-overlay"
+      data-visible={shown || undefined}
+      data-tip-align={tipAlign}
+      data-inline={inline || undefined}
+      aria-busy={shown || undefined}
+      className={cn('relative', inline ? 'inline-block' : 'block', className)}
+      {...props}
+    >
+      <div
+        data-slot="spinner-overlay-content"
+        className={cn(
+          'transition-[filter] duration-200',
+          shown && blur && 'blur-[2px]',
+          shown && 'pointer-events-none select-none',
+        )}
+      >
+        {children}
+      </div>
+      {shown ? (
+        <SpinnerOverlayMask tipAlign={tipAlign}>
+          {indicator ?? (
+            <Spinner size={OVERLAY_INDICATOR_SIZE[size]} tone="primary" />
+          )}
+          {tip != null && tip !== false ? <SpinnerTip>{tip}</SpinnerTip> : null}
+        </SpinnerOverlayMask>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * SpinnerOverlay 的内部遮罩层，覆盖父容器并居中渲染 indicator + tip。
+ * 通常无需直接使用；如需完全自定义遮罩内容，可自行组合 Spinner + SpinnerTip。
+ */
+function SpinnerOverlayMask({
+  tipAlign = 'bottom',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & { tipAlign?: 'right' | 'bottom' }) {
+  return (
+    <div
+      data-slot="spinner-overlay-mask"
+      data-tip-align={tipAlign}
+      className={cn(
+        'absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-sm',
+        className,
+      )}
+      {...props}
+    >
+      <div
+        data-slot="spinner-overlay-indicator"
+        className={cn(
+          'flex items-center justify-center',
+          tipAlign === 'right' ? 'flex-row gap-2' : 'flex-col gap-2',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerFullscreen（全屏 + Portal + Esc 关闭）                                */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+export interface SpinnerFullscreenProps {
+  /** loading 状态 */
+  visible?: boolean;
+  /** 显示延迟（ms），默认 100 */
+  delay?: number;
+  /** 文字提示 */
+  tip?: React.ReactNode;
+  /** tip 与 indicator 的相对位置，默认 `bottom` */
+  tipAlign?: 'right' | 'bottom';
+  /** 自定义 indicator，默认 `<Spinner size="lg" tone="primary" />` */
+  indicator?: React.ReactNode;
+  /** Portal 投放容器，默认 `document.body` */
+  container?: HTMLElement | null;
+  /** 用户按下 Esc 时回调，建议在此处把 `visible` 置 false */
+  onVisibleChange?: (visible: boolean) => void;
+}
+
+/**
+ * 全屏遮罩 loading。通过 Portal 投放到 `container`（默认 body），
+ * 监听 Esc 键并调用 `onVisibleChange(false)` 让上层关闭。
+ */
+function SpinnerFullscreen({
+  visible = false,
+  delay = 100,
+  tip,
+  tipAlign = 'bottom',
+  indicator,
+  container,
+  onVisibleChange,
+}: SpinnerFullscreenProps) {
+  const shown = useDelayedVisible(visible, delay);
+
+  React.useEffect(() => {
+    if (!shown) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onVisibleChange?.(false);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [shown, onVisibleChange]);
+
+  if (!shown) return null;
+  if (typeof document === 'undefined') return null;
+
+  const target = container ?? document.body;
+
+  return createPortal(
+    <div
+      data-slot="spinner-fullscreen"
+      data-tip-align={tipAlign}
+      role="alertdialog"
+      aria-modal="true"
+      aria-busy="true"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-background/60 backdrop-blur-sm"
+    >
+      <div
+        data-slot="spinner-fullscreen-indicator"
+        className={cn(
+          'flex items-center justify-center',
+          tipAlign === 'right' ? 'flex-row gap-2' : 'flex-col gap-2',
+        )}
+      >
+        {indicator ?? <Spinner size="lg" tone="primary" />}
+        {tip != null && tip !== false ? <SpinnerTip>{tip}</SpinnerTip> : null}
+      </div>
+    </div>,
+    target,
+  );
+}
+
+export {
+  Spinner,
+  SpinnerTip,
+  SpinnerOverlay,
+  SpinnerOverlayMask,
+  SpinnerFullscreen,
+  spinnerVariants,
+};

package/src/components/spinner/meta.md

@@ -0,0 +1,172 @@
+# Spinner
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+加载指示器 Spinner
+shadcn v4 composable 套件：原子 Spinner + SpinnerTip 文案 + SpinnerOverlay 包裹遮罩 + SpinnerFullscreen 全屏遮罩。
+对齐 cloud-design Loading 的能力（visible / tip / tipAlign / indicator / inline / 100ms 防闪 / fullScreen / Esc 关闭）。
+
+## 使用场景
+
+- 按钮 / Trigger / 单元格内的行内 loading 反馈
+- 局部内容区在异步加载时的遮罩态（包裹模式 + 100ms 防闪）
+- 关键操作（提交、保存）时的全屏阻断态（带 Esc 关闭）
+- 组合结构：SpinnerOverlay > children + SpinnerOverlayMask > Spinner + SpinnerTip
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | – | – | – |
+| `tone` | `"default" \| "primary" \| "inverse" \| "muted"` | `"default"` | – | – |
+| `label` | `string` | – | – | sr-only 读屏文本，默认 `加载中`；如父级已有可见 tip 可置空 |
+| `visible` | `boolean` | – | – | loading 状态，默认 true。从 false→true 切换会延迟 `delay` 毫秒后显示，避免短任务闪烁 |
+| `delay` | `number` | – | – | 显示延迟（ms），默认 100；设为 0 关闭防闪 |
+| `tip` | `React.ReactNode` | – | – | 文字提示，与 indicator 一起展示在遮罩中央 |
+| `tipAlign` | `'right' \| 'bottom'` | – | – | tip 与 indicator 的相对位置，默认 `bottom` |
+| `indicator` | `React.ReactNode` | – | – | 自定义 indicator，默认 `<Spinner size={size} tone="primary" />` |
+| `size` | `'sm' \| 'md' \| 'lg'` | – | – | 默认 indicator 的尺寸（仅在未传 indicator 时生效），默认 `lg` |
+| `inline` | `boolean` | – | – | 容器布局：`true` 为 inline-block，`false` 为 block 通栏，默认 `true` |
+| `blur` | `boolean` | – | – | 遮罩生效时是否对 children 做模糊处理，默认 `true`（对齐 cloud-design hybridcloud blur 视觉） |
+| `visible` | `boolean` | – | – | loading 状态 |
+| `delay` | `number` | – | – | 显示延迟（ms），默认 100 |
+| `tip` | `React.ReactNode` | – | – | 文字提示 |
+| `tipAlign` | `'right' \| 'bottom'` | – | – | tip 与 indicator 的相对位置，默认 `bottom` |
+| `indicator` | `React.ReactNode` | – | – | 自定义 indicator，默认 `<Spinner size="lg" tone="primary" />` |
+| `container` | `HTMLElement \| null` | – | – | Portal 投放容器，默认 `document.body` |
+| `onVisibleChange` | `(visible: boolean) => void` | – | – | 用户按下 Esc 时回调，建议在此处把 `visible` 置 false |
+
+## 示例
+
+### Sizes
+
+四档显式尺寸：xs(12) / sm(14) / md(16) / lg(20)。
+
+```tsx
+<div className="flex items-center gap-4">
+  <Spinner size="xs" />
+  <Spinner size="sm" />
+  <Spinner size="md" />
+  <Spinner size="lg" />
+</div>
+```
+
+### Tones
+
+四档语义色调：default(继承) / primary / inverse(深色背景) / muted。
+
+```tsx
+<div className="flex items-center gap-4">
+  <Spinner size="md" tone="default" />
+  <Spinner size="md" tone="primary" />
+  <span className="inline-flex items-center justify-center rounded bg-primary p-2">
+    <Spinner size="md" tone="inverse" />
+  </span>
+  <Spinner size="md" tone="muted" />
+</div>
+```
+
+### WithTip
+
+原子 Spinner 搭配 SpinnerTip 行内展示文字提示。
+
+```tsx
+<div className="flex items-center gap-2">
+  <Spinner size="md" tone="primary" />
+  <SpinnerTip>加载中...</SpinnerTip>
+</div>
+```
+
+### OverlayBasic
+
+包裹模式基础用法：遮罩 + 居中 Spinner + tip。
+
+```tsx
+<SpinnerOverlay tip="加载中...">
+  <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+    包裹内容区
+  </div>
+</SpinnerOverlay>
+```
+
+### OverlaySizes
+
+包裹模式三档 indicator 尺寸。
+
+```tsx
+<div className="flex gap-6">
+  <SpinnerOverlay size="sm" tip="sm">
+    <div className="h-20 w-32 rounded border border-border p-4 text-xs">
+      小
+    </div>
+  </SpinnerOverlay>
+  <SpinnerOverlay size="md" tip="md">
+    <div className="h-20 w-32 rounded border border-border p-4 text-xs">
+      中
+    </div>
+  </SpinnerOverlay>
+  <SpinnerOverlay size="lg" tip="lg">
+    <div className="h-20 w-32 rounded border border-border p-4 text-xs">
+      大
+    </div>
+  </SpinnerOverlay>
+</div>
+```
+
+### OverlayTipAlign
+
+tip 位置：right(行内) 与 bottom(堆叠)。
+
+```tsx
+<div className="flex gap-6">
+  <SpinnerOverlay tip="bottom（默认）" tipAlign="bottom">
+    <div className="h-24 w-40 rounded border border-border p-4 text-xs">
+      tipAlign=bottom
+    </div>
+  </SpinnerOverlay>
+  <SpinnerOverlay tip="right" tipAlign="right">
+    <div className="h-24 w-40 rounded border border-border p-4 text-xs">
+      tipAlign=right
+    </div>
+  </SpinnerOverlay>
+</div>
+```
+
+### OverlayCustomIndicator
+
+自定义 indicator 替换默认 Spinner。
+
+```tsx
+<SpinnerOverlay indicator={<span>⏳</span>} tip="自定义动画">
+  <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+    内容
+  </div>
+</SpinnerOverlay>
+```
+
+### InlineVsBlock
+
+inline(默认)与 block 通栏模式对比。
+
+```tsx
+<div className="flex flex-col gap-4">
+  <div>
+    <span className="mr-2 text-muted-foreground">inline:</span>
+    <SpinnerOverlay inline tip="inline">
+      <span className="rounded border border-border px-4 py-2 text-xs">
+        行内内容
+      </span>
+    </SpinnerOverlay>
+  </div>
+  <div>
+    <span className="mb-1 block text-muted-foreground">block:</span>
+    <SpinnerOverlay inline={false} tip="block">
+      <div className="rounded border border-border px-4 py-2 text-xs">
+        通栏内容
+      </div>
+    </SpinnerOverlay>
+  </div>
+</div>
+```

package/src/components/spinner/stories.tsx

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import {
+  Spinner,
+  SpinnerTip,
+  SpinnerOverlay,
+  SpinnerFullscreen,
+} from './index';
+import { Button } from '@/components/button';
+
+const meta: Meta<typeof Spinner> = {
+  title: '反馈 · Feedback/Spinner 加载指示器',
+  component: Spinner,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 默认旋转加载指示器，无显式 size 时由父级决定。 */
+export const Default: Story = {
+  render: () => <Spinner />,
+};
+
+/** 四档显式尺寸：xs(12) / sm(14) / md(16) / lg(20)。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner size="xs" />
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </div>
+  ),
+};
+
+/** 四档语义色调：default(继承) / primary / inverse(深色背景) / muted。 */
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner size="md" tone="default" />
+      <Spinner size="md" tone="primary" />
+      <span className="inline-flex items-center justify-center rounded bg-primary p-2">
+        <Spinner size="md" tone="inverse" />
+      </span>
+      <Spinner size="md" tone="muted" />
+    </div>
+  ),
+};
+
+/** 原子 Spinner 搭配 SpinnerTip 行内展示文字提示。 */
+export const WithTip: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Spinner size="md" tone="primary" />
+      <SpinnerTip>加载中...</SpinnerTip>
+    </div>
+  ),
+};
+
+/** 包裹模式基础用法：遮罩 + 居中 Spinner + tip。 */
+export const OverlayBasic: Story = {
+  render: () => (
+    <SpinnerOverlay tip="加载中...">
+      <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+        包裹内容区
+      </div>
+    </SpinnerOverlay>
+  ),
+};
+
+/** 包裹模式三档 indicator 尺寸。 */
+export const OverlaySizes: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <SpinnerOverlay size="sm" tip="sm">
+        <div className="h-20 w-32 rounded border border-border p-4 text-xs">
+          小
+        </div>
+      </SpinnerOverlay>
+      <SpinnerOverlay size="md" tip="md">
+        <div className="h-20 w-32 rounded border border-border p-4 text-xs">
+          中
+        </div>
+      </SpinnerOverlay>
+      <SpinnerOverlay size="lg" tip="lg">
+        <div className="h-20 w-32 rounded border border-border p-4 text-xs">
+          大
+        </div>
+      </SpinnerOverlay>
+    </div>
+  ),
+};
+
+/** tip 位置：right(行内) 与 bottom(堆叠)。 */
+export const OverlayTipAlign: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <SpinnerOverlay tip="bottom（默认）" tipAlign="bottom">
+        <div className="h-24 w-40 rounded border border-border p-4 text-xs">
+          tipAlign=bottom
+        </div>
+      </SpinnerOverlay>
+      <SpinnerOverlay tip="right" tipAlign="right">
+        <div className="h-24 w-40 rounded border border-border p-4 text-xs">
+          tipAlign=right
+        </div>
+      </SpinnerOverlay>
+    </div>
+  ),
+};
+
+/** 受控 visible + 100ms 防闪：短任务 (800ms) 不闪烁，长任务 (2000ms) 正常展示。 */
+export const OverlayControlled: Story = {
+  render: function OverlayControlledRender() {
+    const [visible1, setVisible1] = React.useState(false);
+    const [visible2, setVisible2] = React.useState(false);
+    return (
+      <div className="flex flex-col gap-4">
+        <Button
+          onClick={() => {
+            setVisible1(true);
+            setVisible2(true);
+            setTimeout(() => setVisible1(false), 800);
+            setTimeout(() => setVisible2(false), 2000);
+          }}
+        >
+          开始加载
+        </Button>
+        <div className="flex gap-6">
+          <SpinnerOverlay visible={visible1} tip="800ms 快任务">
+            <div className="h-20 w-40 rounded border border-border p-4 text-xs">
+              面板 1
+            </div>
+          </SpinnerOverlay>
+          <SpinnerOverlay visible={visible2} tip="2000ms 慢任务">
+            <div className="h-20 w-40 rounded border border-border p-4 text-xs">
+              面板 2
+            </div>
+          </SpinnerOverlay>
+        </div>
+      </div>
+    );
+  },
+};
+
+/** 自定义 indicator 替换默认 Spinner。 */
+export const OverlayCustomIndicator: Story = {
+  render: () => (
+    <SpinnerOverlay indicator={<span>⏳</span>} tip="自定义动画">
+      <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+        内容
+      </div>
+    </SpinnerOverlay>
+  ),
+};
+
+/** 全屏遮罩 + Portal 投放 + Esc 关闭。 */
+export const Fullscreen: Story = {
+  render: function FullscreenRender() {
+    const [visible, setVisible] = React.useState(false);
+    return (
+      <div>
+        <Button onClick={() => setVisible(true)}>打开全屏 Loading</Button>
+        <SpinnerFullscreen
+          visible={visible}
+          tip="加载中，按 Esc 关闭"
+          onVisibleChange={setVisible}
+        />
+      </div>
+    );
+  },
+};
+
+/** inline(默认)与 block 通栏模式对比。 */
+export const InlineVsBlock: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div>
+        <span className="mr-2 text-muted-foreground">inline:</span>
+        <SpinnerOverlay inline tip="inline">
+          <span className="rounded border border-border px-4 py-2 text-xs">
+            行内内容
+          </span>
+        </SpinnerOverlay>
+      </div>
+      <div>
+        <span className="mb-1 block text-muted-foreground">block:</span>
+        <SpinnerOverlay inline={false} tip="block">
+          <div className="rounded border border-border px-4 py-2 text-xs">
+            通栏内容
+          </div>
+        </SpinnerOverlay>
+      </div>
+    </div>
+  ),
+};