@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/empty/Empty.svelte

@@ -1,305 +1,192 @@
 <!--
-  Empty — see specs/components/show/Empty.spec.md
-  内置预设插画 (noData/noResult/error/construction/success/noAccess)
-  | 外部图片 URL | 自定义 snippet
-  + 标题 + 描述 + 动作 slot。layout=vertical|horizontal，responsive 窄容器收缩。
+  Empty — 镜像 Semi Design Empty（semi-ui/empty/index.tsx + semi-foundation/empty/empty.scss）。
+  DOM 同构：.cd-empty(flex) > .cd-empty-image + .cd-empty-content(title/description/footer)。
+  image / darkModeImage 接受插画节点(Snippet) | { id?; viewBox?; url? } SVG 对象 | URL 字符串。
+  darkModeImage 存在时监听 data-theme（对齐 Semi 监听 body theme-mode）在暗色下切换插画。
+  title 用 Typography.Title（有图 heading=4；无图 heading=6 + fontWeight 400），description 为 div。
+  layout：vertical（默认）| horizontal。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useLocale } from '../locale-provider/index.js';
+  import Title from '../typography/Title.svelte';
 
-  type EmptyImage =
-    | 'noData'
-    | 'noResult'
-    | 'error'
-    | 'construction'
-    | 'success'
-    | 'noAccess';
-  type Size = 'small' | 'default' | 'large';
   type Layout = 'vertical' | 'horizontal';
+  /** 与 Semi 一致的 SVG 精灵引用对象 */
+  interface SVGNode {
+    id?: string;
+    viewBox?: string;
+    url?: string;
+  }
 
   interface Props {
-    /** 内置预设名，或外部图片 URL（非预设字符串按 URL 渲染 <img>） */
-    image?: EmptyImage | (string & {});
+    /** 布局方式，支持 vertical / horizontal */
+    layout?: Layout;
+    /** 占位图内联样式（作用于 .cd-empty-image） */
+    imageStyle?: string;
+    /** 标题 */
     title?: string;
+    /** 内容描述 */
     description?: string;
-    size?: Size;
-    /** 排布方向；horizontal 在窄容器自动降级为 vertical（需 responsive） */
-    layout?: Layout;
-    /** 是否启用容器宽度自适应收缩（CSS 容器查询，纯样式） */
-    responsive?: boolean;
+    /** 占位图：插画节点(image slot) | SVG 精灵对象 | 图片 URL 字符串 */
+    image?: SVGNode | (string & {});
+    /** 暗色模式占位图，响应 data-theme 变化 */
+    darkModeImage?: SVGNode | (string & {});
+    /** 根节点附加类名 */
     class?: string;
+    /** 根节点内联样式 */
+    style?: string;
+    /** 动作区（footer） */
     children?: Snippet;
+    /** 自定义插画节点（等价 Semi image 传 ReactNode） */
     imageSlot?: Snippet;
+    /** 暗色自定义插画节点 */
+    darkModeImageSlot?: Snippet;
   }
 
   let {
-    image = 'noData',
+    layout = 'vertical',
+    imageStyle,
     title,
     description,
-    size = 'default',
-    layout = 'vertical',
-    responsive = true,
+    image,
+    darkModeImage,
     class: className = '',
+    style,
     children,
     imageSlot,
+    darkModeImageSlot,
   }: Props = $props();
 
-  const loc = useLocale();
+  // —— 暗色探测：仅在提供 darkModeImage/darkModeImageSlot 时挂载观察，对齐 Semi 仅 darkModeImage 时监听。
+  const hasDark = $derived(!!darkModeImage || !!darkModeImageSlot);
+  let isDark = $state(false);
 
-  const presets = [
-    'noData',
-    'noResult',
-    'error',
-    'construction',
-    'success',
-    'noAccess',
-  ] as const;
-  // 纯派生：image 是否为内置预设；否则按外部图片 URL 处理。
-  const isPreset = $derived(
-    (presets as readonly string[]).includes(image),
-  );
+  function readDark(): boolean {
+    if (typeof document === 'undefined') return false;
+    const el = document.querySelector('[data-theme]') ?? document.documentElement;
+    return el.getAttribute('data-theme') === 'dark';
+  }
 
-  const defaultTitles = $derived<Record<EmptyImage, string>>({
-    noData: loc().t('Empty.noData'),
-    noResult: loc().t('Empty.noResult'),
-    error: loc().t('Empty.error'),
-    construction: loc().t('Empty.construction'),
-    success: loc().t('Empty.success'),
-    noAccess: loc().t('Empty.noAccess'),
+  $effect(() => {
+    if (!hasDark) return;
+    isDark = readDark();
+    const observer = new MutationObserver(() => {
+      isDark = readDark();
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+      subtree: true,
+    });
+    if (document.body) {
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+      });
+    }
+    return () => observer.disconnect();
   });
 
-  const resolvedTitle = $derived(
-    title ?? (isPreset ? defaultTitles[image as EmptyImage] : undefined),
+  // 当前生效的插画来源（暗色优先），对齐 Semi imgSrc 解析。
+  const activeSlot = $derived(isDark && darkModeImageSlot ? darkModeImageSlot : imageSlot);
+  const activeImage = $derived(isDark && darkModeImage ? darkModeImage : image);
+
+  const isStringImage = $derived(typeof activeImage === 'string');
+  const svgNode = $derived(
+    activeImage && typeof activeImage === 'object' && 'id' in activeImage
+      ? (activeImage as SVGNode)
+      : undefined,
   );
+  // 是否存在任意插画节点（决定 title heading 档位，对齐 Semi imageNode 真值分支）。
+  const hasImageNode = $derived(!!activeSlot || isStringImage || !!svgNode);
 
-  const cls = $derived(
-    [
-      'cd-empty',
-      `cd-empty--${size}`,
-      responsive && 'cd-empty--responsive',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
+  const alt = $derived(typeof description === 'string' ? description : 'empty');
+
+  const wrapperCls = $derived(
+    ['cd-empty', `cd-empty-${layout}`, className].filter(Boolean).join(' '),
   );
-  // 内层承载 flex 布局方向；root 仅作 CSS 容器（容器查询只能影响后代）
-  const layoutCls = $derived(`cd-empty__layout cd-empty__layout--${layout}`);
 </script>
 
-<div class={cls}>
-  <div class={layoutCls}>
-  <div class="cd-empty__image" aria-hidden={isPreset ? 'true' : undefined}>
-    {#if imageSlot}
-      {@render imageSlot()}
-    {:else if !isPreset}
-      <img
-        class="cd-empty__img"
-        src={image}
-        alt={resolvedTitle ?? ''}
-        loading="lazy"
-      />
-    {:else if image === 'noData'}
-      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
-        <rect
-          x="12"
-          y="16"
-          width="40"
-          height="32"
-          rx="3"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        />
-        <line x1="20" y1="26" x2="44" y2="26" stroke="currentColor" stroke-width="2" />
-        <line x1="20" y1="34" x2="44" y2="34" stroke="currentColor" stroke-width="2" />
-      </svg>
-    {:else if image === 'noResult'}
-      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
-        <circle
-          cx="28"
-          cy="28"
-          r="14"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        />
-        <line x1="38" y1="38" x2="50" y2="50" stroke="currentColor" stroke-width="2" />
-      </svg>
-    {:else if image === 'construction'}
-      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
-        <path
-          d="M10 48 24 18l3 6-11 24Z"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M54 48 40 18l-3 6 11 24Z"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linejoin="round"
-        />
-        <line x1="24" y1="18" x2="40" y2="18" stroke="currentColor" stroke-width="2" />
-        <line x1="8" y1="48" x2="56" y2="48" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-      </svg>
-    {:else if image === 'success'}
-      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
-        <circle
-          cx="32"
-          cy="32"
-          r="20"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        />
-        <path
-          d="M22 33 29 40 43 25"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    {:else if image === 'noAccess'}
-      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
-        <rect
-          x="18"
-          y="30"
-          width="28"
-          height="20"
-          rx="3"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        />
-        <path
-          d="M24 30v-6a8 8 0 0 1 16 0v6"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-        />
-        <circle cx="32" cy="38" r="2" fill="currentColor" />
-        <line x1="32" y1="40" x2="32" y2="44" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-      </svg>
-    {:else}
-      <svg viewBox="0 0 64 64" width="64" height="64" focusable="false">
-        <path
-          d="M32 12 56 52H8L32 12Z"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linejoin="round"
-        />
-        <line x1="32" y1="28" x2="32" y2="40" stroke="currentColor" stroke-width="2" />
-        <circle cx="32" cy="46" r="1.5" fill="currentColor" />
+<div class={wrapperCls} {style}>
+  <div class="cd-empty-image" style={imageStyle}>
+    {#if activeSlot}
+      {@render activeSlot()}
+    {:else if isStringImage}
+      <img {alt} src={activeImage as string} />
+    {:else if svgNode}
+      <svg viewBox={svgNode.viewBox} aria-hidden="true">
+        <use href={`#${svgNode.id}`} />
       </svg>
     {/if}
   </div>
-
-  {#if resolvedTitle || description || children}
-    <div class="cd-empty__content">
-      {#if resolvedTitle}
-        <p class="cd-empty__title">{resolvedTitle}</p>
+  <div class="cd-empty-content">
+    {#if title}
+      {#if hasImageNode}
+        <Title heading={4} class="cd-empty-title">{title}</Title>
+      {:else}
+        <Title heading={6} weight={400} class="cd-empty-title">{title}</Title>
       {/if}
-
-      {#if description}
-        <p class="cd-empty__description">{description}</p>
-      {/if}
-
-      {#if children}
-        <div class="cd-empty__footer">
-          {@render children()}
-        </div>
-      {/if}
-    </div>
-  {/if}
+    {/if}
+    {#if description}
+      <div class="cd-empty-description">{description}</div>
+    {/if}
+    {#if children}
+      <div class="cd-empty-footer">{@render children()}</div>
+    {/if}
   </div>
 </div>
 
 <style>
-  /* root 仅负责作 CSS 查询容器（responsive 时）；布局在内层 __layout */
-  .cd-empty--responsive {
-    container-type: inline-size;
+  /* 镜像 semi-foundation/empty/empty.scss */
+  .cd-empty {
+    display: flex;
   }
-  .cd-empty__layout {
+  .cd-empty-image {
     display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
-    gap: var(--cd-empty-gap);
-    text-align: center;
-  }
-  .cd-empty__image {
-    display: inline-flex;
-    color: var(--cd-empty-image-color);
+    user-select: none;
+    -webkit-user-drag: none;
+    pointer-events: none;
   }
-  .cd-empty__content {
-    display: flex;
+
+  .cd-empty-vertical {
+    align-items: center;
     flex-direction: column;
-    align-items: inherit;
-    gap: var(--cd-empty-gap);
-  }
-  .cd-empty__img {
-    display: block;
-    inline-size: 64px;
-    block-size: auto;
-    object-fit: contain;
   }
-  .cd-empty--small .cd-empty__image :global(svg),
-  .cd-empty--small .cd-empty__img {
-    inline-size: 48px;
-    block-size: 48px;
+  .cd-empty-vertical .cd-empty-content {
+    margin-top: var(--cd-spacing-empty-content-vertical-margintop);
   }
-  .cd-empty--large .cd-empty__image :global(svg),
-  .cd-empty--large .cd-empty__img {
-    inline-size: 80px;
-    block-size: 80px;
+  /* .cd-empty-title 落在子组件 Title 渲染的元素上，需 :global 穿透（限定在 .cd-empty 作用域内）；
+     description/footer 为本组件元素但相邻选择器另一端是 global title，故整段末尾用 :global。 */
+  .cd-empty-vertical :global(.cd-empty-title),
+  .cd-empty-vertical :global(.cd-empty-description) {
+    text-align: center;
   }
-  .cd-empty__title {
-    margin: 0;
-    color: var(--cd-empty-title-color);
-    font-weight: var(--cd-empty-title-weight);
+
+  .cd-empty-horizontal .cd-empty-content {
+    margin-left: var(--cd-spacing-empty-content-horizontal-marginleft);
   }
-  .cd-empty__description {
-    margin: 0;
-    color: var(--cd-empty-desc-color);
+
+  .cd-empty :global(.cd-empty-title.cd-empty-title) {
+    display: block;
+    font-weight: var(--cd-font-empty-title-fontweight);
   }
-  .cd-empty__footer {
-    margin-block-start: var(--cd-empty-gap);
+  .cd-empty :global(.cd-empty-title + .cd-empty-description) {
+    margin-top: var(--cd-spacing-empty-title-margintop);
   }
-
-  /* horizontal：插画在前、文案在后，左右排列并垂直居中 */
-  .cd-empty__layout--horizontal {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    text-align: start;
+  .cd-empty-description {
+    color: var(--cd-color-empty-description-text-default);
   }
-  /* horizontal 下文案列左对齐 */
-  .cd-empty__layout--horizontal .cd-empty__content {
-    align-items: flex-start;
+  .cd-empty-footer {
+    margin-top: var(--cd-spacing-empty-footer-margintop);
   }
 
-  /* 响应式收缩：root 容器窄于断点时插画变小，horizontal 降级为 vertical。
-     容器查询只作用于后代，故查询 root、命中内层 __layout */
-  @container (max-width: 320px) {
-    .cd-empty--responsive .cd-empty__layout--horizontal {
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-    .cd-empty--responsive .cd-empty__layout--horizontal .cd-empty__content {
-      align-items: center;
-    }
-    .cd-empty--responsive .cd-empty__image :global(svg),
-    .cd-empty--responsive .cd-empty__img {
-      inline-size: 48px;
-      block-size: 48px;
-    }
+  /* RTL：镜像 semi-foundation/empty/rtl.scss */
+  :global([dir='rtl']) .cd-empty {
+    direction: rtl;
+  }
+  :global([dir='rtl']) .cd-empty-horizontal .cd-empty-content {
+    margin-left: auto;
+    margin-right: var(--cd-spacing-empty-content-horizontal-marginleft);
   }
 </style>

package/dist/empty/Empty.svelte.d.ts

@@ -1,20 +1,34 @@
 import type { Snippet } from 'svelte';
-type EmptyImage = 'noData' | 'noResult' | 'error' | 'construction' | 'success' | 'noAccess';
-type Size = 'small' | 'default' | 'large';
 type Layout = 'vertical' | 'horizontal';
+/** 与 Semi 一致的 SVG 精灵引用对象 */
+interface SVGNode {
+    id?: string;
+    viewBox?: string;
+    url?: string;
+}
 interface Props {
-    /** 内置预设名，或外部图片 URL（非预设字符串按 URL 渲染 <img>） */
-    image?: EmptyImage | (string & {});
+    /** 布局方式，支持 vertical / horizontal */
+    layout?: Layout;
+    /** 占位图内联样式（作用于 .cd-empty-image） */
+    imageStyle?: string;
+    /** 标题 */
     title?: string;
+    /** 内容描述 */
     description?: string;
-    size?: Size;
-    /** 排布方向；horizontal 在窄容器自动降级为 vertical（需 responsive） */
-    layout?: Layout;
-    /** 是否启用容器宽度自适应收缩（CSS 容器查询，纯样式） */
-    responsive?: boolean;
+    /** 占位图：插画节点(image slot) | SVG 精灵对象 | 图片 URL 字符串 */
+    image?: SVGNode | (string & {});
+    /** 暗色模式占位图，响应 data-theme 变化 */
+    darkModeImage?: SVGNode | (string & {});
+    /** 根节点附加类名 */
     class?: string;
+    /** 根节点内联样式 */
+    style?: string;
+    /** 动作区（footer） */
     children?: Snippet;
+    /** 自定义插画节点（等价 Semi image 传 ReactNode） */
     imageSlot?: Snippet;
+    /** 暗色自定义插画节点 */
+    darkModeImageSlot?: Snippet;
 }
 declare const Empty: import("svelte").Component<Props, {}, "">;
 type Empty = ReturnType<typeof Empty>;

package/dist/empty/Empty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.svelte.d.ts","sourceRoot":"","sources":["../../src/empty/Empty.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,UAAU,GACX,QAAQ,GACR,UAAU,GACV,OAAO,GACP,cAAc,GACd,SAAS,GACT,UAAU,CAAC;AACf,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,UAAU,GAAG,YAAY,CAAC;AAExC,UAAU,KAAK;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAsIH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Empty.svelte.d.ts","sourceRoot":"","sources":["../../src/empty/Empty.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,MAAM,GAAG,UAAU,GAAG,YAAY,CAAC;AACxC,4BAA4B;AAC5B,UAAU,OAAO;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChC,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACxC,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA0GH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/empty/meta.d.ts

@@ -5,54 +5,65 @@
 export declare const meta: {
     readonly name: "Empty";
     readonly category: "show";
-    readonly description: "空状态，用于无数据/无搜索结果/加载失败等场景，含内置预设插画、标题、描述与动作区。";
+    readonly description: "空状态占位。镜像 Semi Design：image / darkModeImage 接受插画节点(imageSlot)、SVG 精灵对象 { id, viewBox, url } 或图片 URL 字符串；darkModeImage 存在时监听 data-theme 在暗色下切换插画；title 用 Typography.Title（有图 heading=4，无图 heading=6+字重 400）；description 为 div；layout 支持 vertical / horizontal。插画由独立 illustrations 资产提供（对齐 @douyinfe/semi-illustrations）。";
     readonly props: readonly [{
         readonly name: "image";
-        readonly type: "'noData'|'noResult'|'error'|'construction'|'success'|'noAccess'|(string&{})";
-        readonly default: "'noData'";
-        readonly desc: "内置预设插画名，或外部图片 URL（非预设字符串按 URL 渲染 img）";
+        readonly type: "{ id?; viewBox?; url? } | string";
+        readonly default: "undefined";
+        readonly desc: "占位图：SVG 精灵对象或图片 URL；自定义节点用 imageSlot";
+    }, {
+        readonly name: "darkModeImage";
+        readonly type: "{ id?; viewBox?; url? } | string";
+        readonly default: "undefined";
+        readonly desc: "暗色模式占位图，响应 data-theme 变化";
     }, {
         readonly name: "title";
         readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "标题，默认按 image 取内置文案";
+        readonly desc: "标题";
     }, {
         readonly name: "description";
         readonly type: "string";
         readonly default: "undefined";
+        readonly desc: "内容描述";
     }, {
-        readonly name: "size";
-        readonly type: "'small'|'default'|'large'";
-        readonly default: "default";
+        readonly name: "imageStyle";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "占位图容器（.cd-empty-image）内联样式";
     }, {
         readonly name: "layout";
         readonly type: "'vertical'|'horizontal'";
         readonly default: "'vertical'";
-        readonly desc: "排布方向；horizontal 在窄容器自动降级为 vertical";
-    }, {
-        readonly name: "responsive";
-        readonly type: "boolean";
-        readonly default: "true";
-        readonly desc: "启用容器宽度自适应收缩（CSS 容器查询，纯样式）";
+        readonly desc: "布局方式";
     }, {
         readonly name: "class";
         readonly type: "string";
         readonly default: "''";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
     }, {
         readonly name: "children";
         readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "动作区（如按钮）";
+        readonly desc: "动作区（footer）";
     }, {
         readonly name: "imageSlot";
         readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "自定义插画";
+        readonly desc: "自定义插画节点（等价 Semi image 传 ReactNode）";
+    }, {
+        readonly name: "darkModeImageSlot";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "暗色自定义插画节点";
     }];
     readonly a11y: {
         readonly role: "none";
-        readonly notes: readonly ["插画 aria-hidden=true", "标题与描述为可读文本"];
+        readonly notes: readonly ["插画 SVG aria-hidden=true", "外部图片 <img> 带 alt（取 description，缺省 \"empty\"）", "标题与描述为可读文本"];
     };
-    readonly tokens: readonly ["--cd-empty-*"];
+    readonly tokens: readonly ["--cd-spacing-empty-content-vertical-margintop", "--cd-spacing-empty-content-horizontal-marginleft", "--cd-spacing-empty-title-margintop", "--cd-spacing-empty-footer-margintop", "--cd-font-empty-title-fontweight", "--cd-color-empty-description-text-default"];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/empty/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/empty/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/empty/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP,CAAC"}

package/dist/empty/meta.js

@@ -5,36 +5,31 @@
 export const meta = {
     name: 'Empty',
     category: 'show',
-    description: '空状态，用于无数据/无搜索结果/加载失败等场景，含内置预设插画、标题、描述与动作区。',
+    description: '空状态占位。镜像 Semi Design：image / darkModeImage 接受插画节点(imageSlot)、SVG 精灵对象 { id, viewBox, url } 或图片 URL 字符串；darkModeImage 存在时监听 data-theme 在暗色下切换插画；title 用 Typography.Title（有图 heading=4，无图 heading=6+字重 400）；description 为 div；layout 支持 vertical / horizontal。插画由独立 illustrations 资产提供（对齐 @douyinfe/semi-illustrations）。',
     props: [
-        {
-            name: 'image',
-            type: "'noData'|'noResult'|'error'|'construction'|'success'|'noAccess'|(string&{})",
-            default: "'noData'",
-            desc: '内置预设插画名，或外部图片 URL（非预设字符串按 URL 渲染 img）',
-        },
-        { name: 'title', type: 'string', default: 'undefined', desc: '标题，默认按 image 取内置文案' },
-        { name: 'description', type: 'string', default: 'undefined' },
-        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-        {
-            name: 'layout',
-            type: "'vertical'|'horizontal'",
-            default: "'vertical'",
-            desc: '排布方向；horizontal 在窄容器自动降级为 vertical',
-        },
-        {
-            name: 'responsive',
-            type: 'boolean',
-            default: 'true',
-            desc: '启用容器宽度自适应收缩（CSS 容器查询，纯样式）',
-        },
+        { name: 'image', type: '{ id?; viewBox?; url? } | string', default: 'undefined', desc: '占位图：SVG 精灵对象或图片 URL；自定义节点用 imageSlot' },
+        { name: 'darkModeImage', type: '{ id?; viewBox?; url? } | string', default: 'undefined', desc: '暗色模式占位图，响应 data-theme 变化' },
+        { name: 'title', type: 'string', default: 'undefined', desc: '标题' },
+        { name: 'description', type: 'string', default: 'undefined', desc: '内容描述' },
+        { name: 'imageStyle', type: 'string', default: 'undefined', desc: '占位图容器（.cd-empty-image）内联样式' },
+        { name: 'layout', type: "'vertical'|'horizontal'", default: "'vertical'", desc: '布局方式' },
         { name: 'class', type: 'string', default: "''" },
-        { name: 'children', type: 'Snippet', default: 'undefined', desc: '动作区（如按钮）' },
-        { name: 'imageSlot', type: 'Snippet', default: 'undefined', desc: '自定义插画' },
+        { name: 'style', type: 'string', default: 'undefined' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '动作区（footer）' },
+        { name: 'imageSlot', type: 'Snippet', default: 'undefined', desc: '自定义插画节点（等价 Semi image 传 ReactNode）' },
+        { name: 'darkModeImageSlot', type: 'Snippet', default: 'undefined', desc: '暗色自定义插画节点' },
     ],
     a11y: {
         role: 'none',
-        notes: ['插画 aria-hidden=true', '标题与描述为可读文本'],
+        notes: ['插画 SVG aria-hidden=true', '外部图片 <img> 带 alt（取 description，缺省 "empty"）', '标题与描述为可读文本'],
     },
-    tokens: ['--cd-empty-*'],
+    tokens: [
+        // Semi empty/variables.scss 全量对齐（6），组件直接消费原始层
+        '--cd-spacing-empty-content-vertical-margintop',
+        '--cd-spacing-empty-content-horizontal-marginleft',
+        '--cd-spacing-empty-title-margintop',
+        '--cd-spacing-empty-footer-margintop',
+        '--cd-font-empty-title-fontweight',
+        '--cd-color-empty-description-text-default',
+    ],
 };