@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/anchor/Anchor.svelte

@@ -1,128 +1,226 @@
 <!--
-  Anchor — see specs/components/navigation/Anchor.spec.md
-  基础子集: vertical 链接列表、scroll-spy 激活高亮、点击平滑滚动、ink 滑块。
-  受控/非受控 (红线 #1: 不回写 value, 仅 onChange)。
-  scroll-spy (红线 #3): $effect 内命令式 addEventListener('scroll')，rAF 节流，
-  在事件回调里读 getBoundingClientRect (非 render 期)，cleanup 移除监听 + 取消 rAF。
-  ink 用激活链接的 CSS 左边框 (border-inline-start)，不 JS 测 DOM 定位。
-  affix: position:sticky 吸顶（inset-block-start = offsetTop）。
-  updateHash: 激活变更时写 location.hash（replaceState，不触发额外滚动/历史堆栈）。
-  targetOffset: 点击滚动的独立偏移，缺省继承 offsetTop。
-  getContainer: 自定义滚动容器（缺省 window）。提供时监听该容器 scroll，
-    几何按容器视口换算（target.top - container.top），点击滚动该容器（红线 #3）。
-  horizontal: 水平模式，链接横排，ink 走底部下划线（border-block-end）。
-  多级嵌套: link.children 形成树形。渲染用递归 snippet（renderList），每深一层
-    的子列表向内缩进一级（--cd-anchor-indent，逐层累加），rail 只在顶层一条。
-    scroll-spy 命令式遍历扁平化树（flatten 纯函数派生 flatLinks），父子链接皆可
-    点击跳转 + 滚动高亮。无 children 时行为与平铺链接完全一致（向后兼容）。
+  Anchor — 锚点导航（严格对齐 Semi Anchor）。
+  组合式 API（对齐 Semi）：children + <Anchor.Link>，无 links 数组公开 prop。
+  <Anchor.Link> 挂载时向父级注册 href 描述符（构成嵌套树）并自渲染 DOM；Anchor 收集
+  扁平化链接集做 scroll-spy，据激活链接标题的 offsetTop 定位滑轨条（对齐 Semi
+  _setActiveSlide：linkNode.offsetTop → slideBarTop）。
+
+  DOM 层级镜像 Semi（index.tsx render）：
+    nav.cd-anchor[.cd-anchor-size-{size}]
+      div.cd-anchor-slide.cd-anchor-slide-{railTheme}   (aria-hidden，绝对定位滑轨)
+        span.cd-anchor-slide-bar.cd-anchor-slide-bar-{size}.cd-anchor-slide-bar-{railTheme}[.-active]
+      div.cd-anchor-link-wrapper[role=list]
+        <Anchor.Link 渲染的 .cd-anchor-link 树>
+
+  受控/非受控（红线 #1）：defaultAnchor 初值，激活仅 onChange 通知，不回写。
+  scroll-spy（红线 #3）：$effect 内命令式监听 getContainer()（缺省 window）的 scroll，
+    rAF 节流，事件回调里读 getBoundingClientRect（非 render 期），cleanup 移除监听。
+    尺寸/可见性感知：ResizeObserver 观测滚动容器，变化时复用同一套重算。
 -->
+<script lang="ts" module>
+  export { ANCHOR_COLLECTOR_KEY, ANCHOR_CONTEXT_KEY } from './context.js';
+</script>
+
 <script lang="ts">
-  import type { AnchorLink } from './types.js';
-  import { nextRovingIndex, rovingKeyFromEvent } from '@chenzy-design/core';
+  import type { Snippet } from 'svelte';
+  import { setContext, tick } from 'svelte';
+  import type {
+    AnchorLinkNode,
+    AnchorShowTooltip,
+    AnchorTooltipConfig,
+    AnchorRailTheme,
+    AnchorSize,
+  } from './types.js';
+  import {
+    nextRovingIndex,
+    rovingKeyFromEvent,
+    createResizeObserver,
+    type Placement,
+  } from '@chenzy-design/core';
   import { useLocale } from '../locale-provider/index.js';
+  import {
+    ANCHOR_COLLECTOR_KEY,
+    ANCHOR_CONTEXT_KEY,
+    type AnchorCollector,
+    type AnchorContext,
+  } from './context.js';
 
   interface Props {
-    links?: AnchorLink[];
-    value?: string;
-    defaultValue?: string;
+    /** 滚动时动态展示下一级锚点（对齐 Semi）；默认 false（全展开）。 */
+    autoCollapse?: boolean;
+    /** 根类名（对齐 Semi className；本库惯例用 class）。 */
+    class?: string;
+    /** 默认高亮锚点 href（对齐 Semi defaultAnchor，1.20.0）。 */
+    defaultAnchor?: string;
+    /** 指定滚动容器（对齐 Semi getContainer）；缺省 window。 */
+    getContainer?: () => HTMLElement | Window | null;
+    /** 组件 max-height，超出显示滚动条（对齐 Semi）；数字转 px。 */
+    maxHeight?: string | number;
+    /** 组件 max-width，超出 ellipsis（对齐 Semi）；数字转 px。 */
+    maxWidth?: string | number;
+    /** 滚动内容距容器顶部达到偏移量时触发 Link 切换（对齐 Semi）。 */
     offsetTop?: number;
-    bounds?: number;
-    showInk?: boolean;
+    /** Tooltip 显示位置（对齐 Semi position）；仅 showTooltip 时生效。 */
+    position?: Placement;
+    /** 滑轨主题：primary（默认）/ tertiary / muted（对齐 Semi railTheme）。 */
+    railTheme?: AnchorRailTheme;
+    /** 是否开启滚动动画（对齐 Semi scrollMotion）；默认 false。reduced-motion 强制即时。 */
     scrollMotion?: boolean;
-    /** position:sticky 吸顶 */
-    affix?: boolean;
-    /** 激活变更时写 location.hash */
-    updateHash?: boolean;
-    /** 点击滚动的独立偏移（缺省继承 offsetTop） */
+    /**
+     * 文字缩略时是否显示 Tooltip 及配置（对齐 Semi showTooltip）。
+     * boolean | { type: 'tooltip' | 'popover'; opts }；true 等价 { type: 'tooltip' }。
+     */
+    showTooltip?: AnchorShowTooltip;
+    /** 锚点尺寸：small / default（默认，对齐 Semi size）。 */
+    size?: AnchorSize;
+    /** 根节点自定义内联样式（对齐 Semi style）。 */
+    style?: string;
+    /** 锚点滚动时距顶部偏移量（对齐 Semi targetOffset，1.9.0）；缺省继承 offsetTop 语义为 0。 */
     targetOffset?: number;
-    /** 自定义滚动容器；缺省监听/滚动 window */
-    getContainer?: () => HTMLElement | null;
-    /** 水平模式：链接横排，ink 走底部下划线 */
-    horizontal?: boolean;
-    onChange?: (key: string) => void;
-    ariaLabel?: string;
+    /** 改变锚点回调（对齐 Semi：currentLink/previousLink 为 href 字符串）。 */
+    onChange?: (currentLink: string, previousLink: string) => void;
+    /** 点击锚点回调（对齐 Semi：event + currentLink href 字符串）。 */
+    onClick?: (event: MouseEvent, currentLink: string) => void;
+    /** 根 nav aria-label（对齐 Semi aria-label）；缺省走 locale。 */
+    'aria-label'?: string;
+    /** 组合式子项（<Anchor.Link>）。 */
+    children?: Snippet;
   }
 
   let {
-    links = [],
-    value,
-    defaultValue,
-    offsetTop = 0,
-    bounds = 5,
-    showInk = true,
-    scrollMotion = true,
-    affix = false,
-    updateHash = false,
-    targetOffset,
+    autoCollapse = false,
+    class: className,
+    defaultAnchor = '',
     getContainer,
-    horizontal = false,
+    maxHeight = '750px',
+    maxWidth = '200px',
+    offsetTop = 0,
+    position,
+    railTheme = 'primary',
+    scrollMotion = false,
+    showTooltip = false,
+    size = 'default',
+    style,
+    targetOffset = 0,
     onChange,
-    ariaLabel,
+    onClick,
+    'aria-label': ariaLabel,
+    children,
   }: Props = $props();
 
   const loc = useLocale();
 
-  // 深度优先扁平化嵌套链接树（纯函数，红线 #2）。scroll-spy 与初始激活
-  // 计算只关心全部叶/枝链接的线性集合，与渲染的树形结构解耦。
-  function flatten(items: AnchorLink[]): AnchorLink[] {
-    const out: AnchorLink[] = [];
+  // showTooltip 归一化（对齐 Semi）：true→{type:'tooltip'}；false→null（不装）。
+  const tip = $derived<AnchorTooltipConfig | null>(
+    showTooltip === true ? { type: 'tooltip' } : showTooltip || null,
+  );
+
+  // --- 组合式子项收集（<Anchor.Link>）---
+  // 普通数组承接注册（非 $state，避免子项 init push 触发反应自循环）。
+  let declared: AnchorLinkNode[] = [];
+  // 唯一反应量：子项挂载后异步 bump，触发一次链接树重建。
+  let revision = $state(0);
+  let bumpScheduled = false;
+
+  const collector: AnchorCollector = {
+    add: (link: AnchorLinkNode) => {
+      declared.push(link);
+      return link;
+    },
+    bump: () => {
+      if (bumpScheduled) return;
+      bumpScheduled = true;
+      queueMicrotask(() => {
+        bumpScheduled = false;
+        revision += 1;
+      });
+    },
+    level: 1,
+  };
+  setContext<AnchorCollector>(ANCHOR_COLLECTOR_KEY, collector);
+
+  // 链接树（重建依赖 revision）；浅拷贝确保下游收到新引用而重派生。
+  const linkTree = $derived.by<AnchorLinkNode[]>(() => {
+    const r = revision;
+    return r >= 0 ? declared.slice() : [];
+  });
+
+  // 深度优先扁平化（纯函数）。scroll-spy 与初始激活只关心线性集合。
+  function flatten(items: AnchorLinkNode[]): AnchorLinkNode[] {
+    const out: AnchorLinkNode[] = [];
     for (const item of items) {
       out.push(item);
-      if (item.children?.length) out.push(...flatten(item.children));
+      if (item.children.length) out.push(...flatten(item.children));
     }
     return out;
   }
-  const flatLinks = $derived<AnchorLink[]>(flatten(links));
+  const flatLinks = $derived<AnchorLinkNode[]>(flatten(linkTree));
 
-  function getInitialActive(): string {
-    return defaultValue ?? flatten(links)[0]?.key ?? '';
+  // childMap：每个 href → 其所有后代 href 集合（对齐 Semi _getLinkToMap）。
+  function buildChildMap(
+    items: AnchorLinkNode[],
+    ancestors: string[],
+    map: Record<string, Set<string>>,
+  ): void {
+    for (const item of items) {
+      if (!(item.href in map)) map[item.href] = new Set();
+      for (const anc of ancestors) map[anc]?.add(item.href);
+      if (item.children.length) {
+        ancestors.push(item.href);
+        buildChildMap(item.children, ancestors, map);
+        ancestors.pop();
+      }
+    }
   }
+  const childMap = $derived.by<Record<string, Set<string>>>(() => {
+    const map: Record<string, Set<string>> = {};
+    buildChildMap(linkTree, [], map);
+    return map;
+  });
 
-  // --- 受控 value (红线 #1): 不回写 value, 仅 onChange ---
-  const isControlled = $derived(value !== undefined);
-  let innerActive = $state<string>(getInitialActive());
-  const activeKey = $derived<string>(isControlled ? (value ?? '') : innerActive);
+  // --- 受控无（Semi Anchor 无 value prop，仅 defaultAnchor 初值 + 内部 state）---
+  // defaultAnchor 仅取初值（对齐 Semi，运行时改由内部 state 管理），静态读取预期无害。
+  // svelte-ignore state_referenced_locally
+  let activeHref = $state<string>(defaultAnchor);
+  let previousHref = '';
 
-  function setActive(key: string) {
-    if (key === activeKey) return;
-    if (!isControlled) innerActive = key;
-    onChange?.(key);
+  function setActive(href: string, notify = true) {
+    if (href === activeHref) return;
+    const prev = activeHref;
+    activeHref = href;
+    previousHref = prev;
+    if (notify) onChange?.(href, prev);
   }
 
-  // updateHash：把激活链接的 href（#id）写入 location.hash。
-  // 用 replaceState 避免污染历史堆栈与触发浏览器原生跳转滚动。
-  function writeHash(href: string) {
-    if (!updateHash || typeof window === 'undefined') return;
-    if (!href.startsWith('#')) return;
-    history.replaceState(null, '', href);
+  // getContainer 参照系（对齐 Semi getContainerBoundingTop）。
+  function resolveContainer(): HTMLElement | Window {
+    const c = getContainer?.();
+    return c ?? window;
   }
-
-  // getContainer 提供时几何以容器视口为参照系（target.top - container.top），
-  // 缺省时参照系为浏览器视口顶部（0），即原 window 行为。命令式读取，非 render 期。
   function getReferenceTop(): number {
-    const container = getContainer?.();
-    return container ? container.getBoundingClientRect().top : 0;
+    const c = resolveContainer();
+    return 'getBoundingClientRect' in c ? c.getBoundingClientRect().top : 0;
   }
 
-  // 命令式读取目标元素并算出当前激活 key（在事件回调里调用，非 render 期）。
-  function computeActiveKey(): string {
+  // 命令式算当前激活 href（对齐 Semi handleScroll：取最后一个越过阈值的 section）。
+  function computeActiveHref(): string {
     const refTop = getReferenceTop();
     let best = '';
     let bestTop = -Infinity;
-    // 遍历扁平化后的全部链接（含嵌套子链接），父子皆参与 scroll-spy。
     for (const link of flatLinks) {
-      const el = document.querySelector(link.href);
+      let el: Element | null = null;
+      try {
+        el = document.querySelector(link.href);
+      } catch {
+        el = null;
+      }
       if (!el) continue;
-      // 相对滚动容器视口顶部的偏移。
-      const top = el.getBoundingClientRect().top - refTop;
-      // 已滚过顶部阈值的 section 里取最接近阈值的那个。
-      if (top <= offsetTop + bounds && top > bestTop) {
+      const top = el.getBoundingClientRect().top - refTop - offsetTop;
+      if (top < 0 && top > bestTop) {
         bestTop = top;
-        best = link.key;
+        best = link.href;
       }
     }
-    // 没有任何 section 越过阈值时，回退到第一个链接。
-    if (best === '') best = flatLinks[0]?.key ?? '';
     return best;
   }
 
@@ -133,227 +231,280 @@
     );
   }
 
-  // --- scroll-spy (红线 #3): $effect 内命令式监听 + rAF 节流 ---
-  // 监听目标：getContainer() 返回的元素（缺省 window）。读取 getContainer 使其
-  // 变更时 effect 重订阅。
+  // --- scroll-spy（红线 #3）：$effect 内命令式监听 + rAF 节流 ---
+  let clickLock = false;
   $effect(() => {
     if (typeof window === 'undefined') return;
-    const target: HTMLElement | Window = getContainer?.() ?? window;
+    const target = resolveContainer();
     let frame = 0;
 
     function onScroll() {
+      if (clickLock) return;
       if (frame) return;
       frame = requestAnimationFrame(() => {
         frame = 0;
-        setActive(computeActiveKey());
+        const href = computeActiveHref();
+        if (href) setActive(href);
       });
     }
 
     target.addEventListener('scroll', onScroll, { passive: true });
-    // 初始算一次。
     onScroll();
 
+    const observed: HTMLElement | null =
+      (getContainer?.() as HTMLElement | null) ??
+      (typeof document !== 'undefined' ? document.documentElement : null);
+    const ro =
+      observed && 'getBoundingClientRect' in (observed as object)
+        ? createResizeObserver({ box: 'content-box', onResize: () => onScroll() })
+        : null;
+    if (observed && ro && 'observe' in ro) ro.observe(observed);
+
     return () => {
       target.removeEventListener('scroll', onScroll);
       if (frame) cancelAnimationFrame(frame);
+      ro?.disconnect();
     };
   });
 
-  function handleClick(e: MouseEvent, link: AnchorLink) {
-    e.preventDefault();
-    activateLink(link);
+  // 点击 / Space 激活主体：滚动 + setActive + notifyClick（对齐 Semi handleClick + _scrollIntoView）。
+  function scrollToHref(href: string) {
+    let el: Element | null = null;
+    try {
+      el = document.querySelector(href);
+    } catch {
+      el = null;
+    }
+    if (!el) return;
+    const smooth = scrollMotion && !prefersReducedMotion();
+    const offset = targetOffset || offsetTop;
+    const c = getContainer?.();
+    if (c && 'getBoundingClientRect' in c) {
+      const delta =
+        el.getBoundingClientRect().top - c.getBoundingClientRect().top - offset;
+      c.scrollTo({ top: c.scrollTop + delta, behavior: smooth ? 'smooth' : 'auto' });
+    } else {
+      const top = el.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
+    }
   }
 
-  // 滚动 + setActive + writeHash 主体（与 handleClick 解耦，供 Space 键复用，无 event）。
-  function activateLink(link: AnchorLink) {
-    const el = document.querySelector(link.href);
-    if (el) {
-      const smooth = scrollMotion && !prefersReducedMotion();
-      const offset = targetOffset ?? offsetTop;
-      const container = getContainer?.();
-      if (container) {
-        // 滚动量 = 目标相对容器视口顶部的偏移 - offset，叠加容器当前滚动位置。
-        const delta =
-          el.getBoundingClientRect().top -
-          container.getBoundingClientRect().top -
-          offset;
-        container.scrollTo({
-          top: container.scrollTop + delta,
-          behavior: smooth ? 'smooth' : 'auto',
-        });
-      } else {
-        const top = el.getBoundingClientRect().top + window.scrollY - offset;
-        window.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
-      }
-    }
-    setActive(link.key);
-    writeHash(link.href);
+  function activate(href: string, e?: MouseEvent) {
+    setActive(href);
+    // 点击后短暂锁 scroll-spy，避免平滑滚动过程覆盖点击选中（对齐 Semi clickLink）。
+    clickLock = true;
+    setTimeout(() => {
+      clickLock = false;
+    }, 200);
+    scrollToHref(href);
+    if (e) onClick?.(e, href);
   }
 
-  // --- roving tabindex（a11y §6）：链接列表为单一 Tab 停靠点。 ---
-  // rootEl 普通引用，命令式 focus() 用（非 render 期）。
+  // --- roving tabindex（a11y §6）：链接列表单一 Tab 停靠点 ---
   let rootEl = $state<HTMLElement | null>(null);
-  // 当前焦点链接 key；null = 尚无焦点 -> 首链接作为 Tab 停靠点。
-  let focusedKey = $state<string | null>(null);
+  let focusedHref = $state<string | null>(null);
+  const focusableLinks = $derived<AnchorLinkNode[]>(
+    flatLinks.filter((l) => !l.disabled),
+  );
+
+  function linkTabindex(href: string, disabled?: boolean): 0 | -1 {
+    if (disabled) return -1;
+    return (focusedHref ?? focusableLinks[0]?.href) === href ? 0 : -1;
+  }
 
-  // 纯派生 tabindex：焦点链接（或无焦点时的首链接）为 0，其余 -1。
-  // 不在 render 期写 $state（红线 #2）。
-  function linkTabindex(key: string): 0 | -1 {
-    return (focusedKey ?? flatLinks[0]?.key) === key ? 0 : -1;
+  function focusHref(href: string) {
+    focusedHref = href;
+    rootEl
+      ?.querySelector<HTMLElement>(`[data-anchor-href="${CSS.escape(href)}"]`)
+      ?.focus();
   }
 
-  // 链接 keydown：方向键 roving（纯函数 nextRovingIndex 派生）、Home/End 跳首尾、
-  // Space 显式激活（原生 <a> 不响应 Space）。Enter 交给原生 <a> 点击（向后兼容）。
-  function onLinkKeydown(e: KeyboardEvent, link: AnchorLink) {
+  function onLinkKeydown(e: KeyboardEvent, href: string) {
     const intent = rovingKeyFromEvent(e.key);
     if (intent) {
       e.preventDefault();
-      const idx = flatLinks.findIndex((l) => l.key === link.key);
-      const next = nextRovingIndex(idx, flatLinks.length, intent, false);
-      const nextKey = flatLinks[next]?.key;
-      if (nextKey != null) {
-        focusedKey = nextKey;
-        rootEl
-          ?.querySelector<HTMLElement>(`[data-anchor-key="${CSS.escape(nextKey)}"]`)
-          ?.focus();
-      }
+      const idx = focusableLinks.findIndex((l) => l.href === href);
+      const next = nextRovingIndex(idx, focusableLinks.length, intent, false);
+      const nextHref = focusableLinks[next]?.href;
+      if (nextHref != null) focusHref(nextHref);
       return;
     }
     if (e.key === 'Home' || e.key === 'End') {
       e.preventDefault();
-      const nextKey = (e.key === 'Home' ? flatLinks[0] : flatLinks[flatLinks.length - 1])
-        ?.key;
-      if (nextKey != null) {
-        focusedKey = nextKey;
-        rootEl
-          ?.querySelector<HTMLElement>(`[data-anchor-key="${CSS.escape(nextKey)}"]`)
-          ?.focus();
-      }
+      const nextHref = (
+        e.key === 'Home'
+          ? focusableLinks[0]
+          : focusableLinks[focusableLinks.length - 1]
+      )?.href;
+      if (nextHref != null) focusHref(nextHref);
       return;
     }
     if (e.key === ' ') {
       e.preventDefault();
-      activateLink(link);
+      activate(href);
     }
   }
+
+  // --- 滑轨条定位（对齐 Semi _setActiveSlide：激活链接标题 offsetTop → slideBarTop）---
+  const titleNodes = new Map<string, HTMLElement>();
+  let slideBarTop = $state(0);
+  let scrollHeight = $state('100%');
+
+  function registerTitleNode(href: string, node: HTMLElement | null) {
+    if (node) titleNodes.set(href, node);
+    else titleNodes.delete(href);
+  }
+
+  // 激活变更 / 链接树变更时重算滑轨条位置与滑轨高度。
+  $effect(() => {
+    void activeHref;
+    void linkTree;
+    void tick().then(() => {
+      const node = titleNodes.get(activeHref);
+      slideBarTop = node ? node.offsetTop : 0;
+      const wrapper = rootEl?.querySelector<HTMLElement>('.cd-anchor-link-wrapper');
+      if (wrapper) scrollHeight = `${wrapper.scrollHeight}px`;
+    });
+  });
+
+  // defaultAnchor 初始滚动（对齐 Semi componentDidMount：handleClick(null, defaultAnchor, false)）。
+  $effect(() => {
+    if (defaultAnchor) {
+      void tick().then(() => scrollToHref(defaultAnchor));
+    }
+  });
+
+  // 拆分 position 供浮层（Popover 用 side+align；Tooltip 用整串）。
+  const posGetter = () => position;
+
+  // 提供共享上下文给 <Anchor.Link>。
+  const ctx: AnchorContext = {
+    getActiveHref: () => activeHref,
+    getTooltip: () => tip,
+    getPosition: posGetter,
+    getSize: () => size,
+    getAutoCollapse: () => autoCollapse,
+    getChildMap: () => childMap,
+    onLinkClick: (e, href) => {
+      e.preventDefault();
+      activate(href, e);
+    },
+    onLinkKeydown,
+    onLinkFocus: (href) => {
+      focusedHref = href;
+    },
+    getLinkTabindex: linkTabindex,
+    registerTitleNode,
+    getShowTooltip: () => showTooltip,
+  };
+  setContext<AnchorContext>(ANCHOR_CONTEXT_KEY, ctx);
+
+  // 数字转 px（对齐 Semi maxHeight/maxWidth 数字入参）。
+  function toCssLength(v: string | number): string {
+    return typeof v === 'number' ? `${v}px` : v;
+  }
+  const rootStyle = $derived.by(() => {
+    const parts = [
+      `max-height:${toCssLength(maxHeight)}`,
+      `max-width:${toCssLength(maxWidth)}`,
+    ];
+    if (style) parts.push(style);
+    return parts.join(';');
+  });
+
+  const hasActive = $derived(Boolean(activeHref));
 </script>
 
 <nav
   bind:this={rootEl}
-  class="cd-anchor"
-  class:cd-anchor--no-ink={!showInk}
-  class:cd-anchor--affix={affix}
-  class:cd-anchor--horizontal={horizontal}
-  style={affix ? `inset-block-start:${offsetTop}px` : undefined}
+  class="cd-anchor cd-anchor-size-{size} {className ?? ''}"
+  style={rootStyle}
   aria-label={ariaLabel ?? loc().t('Anchor.ariaLabel')}
 >
-  {@render renderList(links, 0)}
+  <div
+    aria-hidden="true"
+    class="cd-anchor-slide cd-anchor-slide-{railTheme}"
+    style="height:{scrollHeight}"
+  >
+    <span
+      class="cd-anchor-slide-bar cd-anchor-slide-bar-{size} cd-anchor-slide-bar-{railTheme}"
+      class:cd-anchor-slide-bar-active={hasActive}
+      style="top:{slideBarTop}px"
+    ></span>
+  </div>
+  <div class="cd-anchor-link-wrapper" role="list">
+    {#if children}{@render children()}{/if}
+  </div>
 </nav>
 
-{#snippet renderList(items: AnchorLink[], level: number)}
-  <ul class="cd-anchor__list">
-    {#each items as link (link.key)}
-      {@const active = link.key === activeKey}
-      <li class="cd-anchor__item">
-        <a
-          class="cd-anchor__link cd-anchor__link--level-{level}"
-          class:cd-anchor__link--active={active}
-          href={link.href}
-          aria-current={active ? 'location' : undefined}
-          tabindex={linkTabindex(link.key)}
-          data-anchor-key={link.key}
-          onclick={(e) => handleClick(e, link)}
-          onkeydown={(e) => onLinkKeydown(e, link)}
-          onfocus={() => {
-            focusedKey = link.key;
-          }}
-        >
-          {link.title}
-        </a>
-        {#if link.children?.length}
-          {@render renderList(link.children, level + 1)}
-        {/if}
-      </li>
-    {/each}
-  </ul>
-{/snippet}
-
 <style>
   .cd-anchor {
     display: block;
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-size: var(--cd-font-size-regular, 14px);
   }
-  .cd-anchor--affix {
-    position: sticky;
-    inset-block-start: 0;
-  }
-  .cd-anchor__list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    border-inline-start: 1px solid var(--cd-anchor-rail-color);
+  .cd-anchor-size-small {
+    font-size: var(--cd-font-size-small, 12px);
   }
-  /* 嵌套子列表：不重复绘制滑轨（rail 只在顶层一条），整体向内缩进一级，
-     使每深一层的链接累加缩进。level-0 顶层链接样式完全不受影响（向后兼容）。 */
-  .cd-anchor__list .cd-anchor__list {
-    border-inline-start: none;
-    margin-inline-start: var(--cd-anchor-indent, 16px);
-  }
-  .cd-anchor__item {
-    margin: 0;
-    padding: 0;
+
+  /* --- 滑轨 slide（绝对定位，镜像 Semi .semi-anchor-slide）--- */
+  .cd-anchor-slide {
+    position: absolute;
+    inset-inline-start: var(--cd-spacing-anchor-slide-left);
+    inset-block-start: var(--cd-spacing-anchor-slide-top);
+    height: 100%;
   }
-  .cd-anchor__link {
+  /* 滑轨底轨（Semi &::before）：贯穿整条的浅色轨道。 */
+  .cd-anchor-slide::before {
+    position: absolute;
     display: block;
-    padding: var(--cd-anchor-link-padding);
-    border-inline-start: var(--cd-anchor-ink-width) solid transparent;
-    margin-inline-start: calc(-1 * var(--cd-anchor-ink-width));
-    color: var(--cd-anchor-link-color);
-    text-decoration: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    transition: color var(--cd-motion-duration-fast)
-      var(--cd-motion-ease-standard);
-  }
-  .cd-anchor__link:hover {
-    color: var(--cd-anchor-link-color-active);
+    width: var(--cd-width-anchor-slide-default);
+    height: 100%;
+    background-color: var(--cd-color-anchor-slide-default-bg-default);
+    border-radius: var(--cd-radius-anchor-slide);
+    content: ' ';
   }
-  .cd-anchor__link:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-border-radius-small);
+  /* muted 主题隐藏滑轨（对齐 Semi &-muted { display:none }）。 */
+  .cd-anchor-slide-muted {
+    display: none;
   }
-  .cd-anchor__link--active {
-    color: var(--cd-anchor-link-color-active);
-    border-inline-start-color: var(--cd-anchor-ink-color);
+  /* 滑轨条 slide-bar：激活时据 offsetTop 绝对定位（Semi .semi-anchor-slide-bar）。 */
+  .cd-anchor-slide-bar {
+    display: none;
+    position: absolute;
+    inset-block-start: 0;
+    width: var(--cd-width-anchor-slide-default);
+    border-radius: var(--cd-radius-anchor-slide);
   }
-  .cd-anchor--no-ink .cd-anchor__link--active {
-    border-inline-start-color: transparent;
+  .cd-anchor-slide-bar-active {
+    display: inline-block;
   }
-
-  /* --- horizontal 水平模式：链接横排，ink 走底部下划线 --- */
-  .cd-anchor--horizontal .cd-anchor__list {
-    display: flex;
-    flex-wrap: nowrap;
-    border-inline-start: none;
-    border-block-end: 1px solid var(--cd-anchor-rail-color);
+  .cd-anchor-slide-bar-default {
+    height: calc(
+      var(--cd-height-anchor-slide-default) + 2 *
+        var(--cd-spacing-anchor-slide-default-y)
+    );
   }
-  .cd-anchor--horizontal .cd-anchor__link {
-    border-inline-start: none;
-    margin-inline-start: 0;
-    border-block-end: var(--cd-anchor-ink-width) solid transparent;
-    margin-block-end: calc(-1 * var(--cd-anchor-ink-width));
+  .cd-anchor-slide-bar-small {
+    height: calc(
+      var(--cd-height-anchor-slide-small) + 2 *
+        var(--cd-spacing-anchor-slide-small-y)
+    );
   }
-  .cd-anchor--horizontal .cd-anchor__link--active {
-    border-inline-start-color: transparent;
-    border-block-end-color: var(--cd-anchor-ink-color);
+  .cd-anchor-slide-bar-primary {
+    background-color: var(--cd-color-anchor-slide-primary-bg-active);
   }
-  .cd-anchor--horizontal.cd-anchor--no-ink .cd-anchor__link--active {
-    border-block-end-color: transparent;
+  .cd-anchor-slide-bar-tertiary {
+    background-color: var(--cd-color-anchor-slide-tertiary-bg-active);
   }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-anchor__link {
-      transition: none;
-    }
+  /* muted 无滑轨条（Semi 该主题 slide 整体 display:none，slide-bar 亦不显）。 */
+
+  /* link-wrapper：链接列表容器（Semi .semi-anchor-link-wrapper）。
+     对齐 Semi：wrapper 本身无 padding（Semi $spacing-anchor_link-paddingLeft 是孤儿变量，
+     从未被任何 scss 消费；链接缩进由 Anchor.Link 的 paddingLeft: 8*level 内联提供）。 */
+  .cd-anchor-link-wrapper {
+    display: block;
   }
 </style>