@windrun-huaiin/third-ui 14.4.1 → 14.4.2

package/dist/fuma/mdx/toc-clerk-portable.js

@@ -45,6 +45,10 @@ const CLERK_ACTIVE_ANIMATION_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
 const CLERK_TEXT_GAP_FROM_PATH = 12;
 // Radius of numbered step badges rendered on top of the path centerline.
 const CLERK_STEP_BADGE_RADIUS = 7;
+// Visual line offsets by grouped heading depth: 1/2, 3, 4, >4.
+const CLERK_DEPTH_GROUP_LINE_OFFSETS = [6, 18, 30, 42];
+// Max number of characters rendered for a TOC label before trimming with ellipsis.
+const CLERK_MAX_LABEL_LENGTH = 44;
 function PortableClerkTOC({ toc, header, footer, title, emptyLabel = 'No headings', className, }) {
     return (jsxRuntime.jsxs(page.PageTOC, { className: className, children: [header, title !== null && title !== void 0 ? title : jsxRuntime.jsx(page.PageTOCTitle, {}), jsxRuntime.jsx(PortableClerkTOCScrollArea, { children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }));
 }
@@ -124,16 +128,16 @@ function PortableClerkTOCItems(_a) {
     if (toc.length === 0) {
         return (jsxRuntime.jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: emptyLabel }));
     }
-    return (jsxRuntime.jsxs("div", Object.assign({ ref: mergeRefs(containerRef, ref), className: cn('relative flex flex-col', className) }, props, { children: [jsxRuntime.jsx(ClerkOutline, { path: outlinePath, items: layout.items, activePath: activePath, activeAnchors: activeAnchors, activeEndpoint: activeEndpoint }), metas.map((meta, i) => (jsxRuntime.jsx(PortableClerkTOCItem, { item: meta.item, isActive: activeAnchors.includes(meta.item.url.slice(1)), resolvedContent: meta.resolvedContent, itemPadding: meta.itemPadding, contentRef: (node) => {
+    return (jsxRuntime.jsxs("div", Object.assign({ ref: mergeRefs(containerRef, ref), className: cn('relative flex flex-col', className) }, props, { children: [jsxRuntime.jsx(ClerkOutline, { path: outlinePath, items: layout.items, activePath: activePath, activeAnchors: activeAnchors, activeEndpoint: activeEndpoint }), metas.map((meta, i) => (jsxRuntime.jsx(PortableClerkTOCItem, { item: meta.item, isActive: activeAnchors.includes(meta.item.url.slice(1)), resolvedContent: meta.resolvedContent, fullTitle: meta.fullTitle, itemPadding: meta.itemPadding, contentRef: (node) => {
                     contentRefs.current[i] = node;
                 }, ref: (node) => {
                     itemRefs.current[i] = node;
                 } }, meta.item.url)))] })));
 }
-function PortableClerkTOCItem({ item, isActive, resolvedContent, itemPadding, contentRef, ref, }) {
-    return (jsxRuntime.jsx(Primitive__namespace.TOCItem, { ref: ref, href: item.url, "data-clerk-item": "", style: {
+function PortableClerkTOCItem({ item, isActive, resolvedContent, fullTitle, itemPadding, contentRef, ref, }) {
+    return (jsxRuntime.jsx(Primitive__namespace.TOCItem, { ref: ref, href: item.url, "data-clerk-item": "", title: fullTitle !== null && fullTitle !== void 0 ? fullTitle : undefined, style: {
             paddingInlineStart: itemPadding,
-        }, className: cn('prose group relative py-1.5 text-sm transition-colors wrap-anywhere first:pt-0 last:pb-0 hover:text-fd-accent-foreground', isActive ? lib.themeIconColor : 'text-fd-muted-foreground'), children: jsxRuntime.jsx("span", { ref: contentRef, className: "relative z-10", children: resolvedContent }) }));
+        }, className: cn('prose group relative py-1.5 text-sm transition-colors first:pt-0 last:pb-0 hover:text-fd-accent-foreground', isActive ? lib.themeIconColor : 'text-fd-muted-foreground'), children: jsxRuntime.jsx("span", { ref: contentRef, className: "relative z-10 block overflow-hidden text-ellipsis whitespace-nowrap", children: resolvedContent }) }));
 }
 function ClerkOutline({ path, items, activePath, activeAnchors, activeEndpoint, }) {
     const activeSet = new Set(activeAnchors);
@@ -176,19 +180,33 @@ function getItemOffset(depth) {
     return lineOffset + badgeRadius + CLERK_TEXT_GAP_FROM_PATH;
 }
 function getLineOffset(depth) {
-    return depth >= 3 ? 18 : 6;
+    const group = getDepthGroup(depth);
+    return CLERK_DEPTH_GROUP_LINE_OFFSETS[group];
 }
 function getVisualLinePosition(depth) {
     return getLineOffset(depth);
 }
+function getDepthGroup(depth) {
+    if (depth <= 2)
+        return 0;
+    if (depth === 3)
+        return 1;
+    if (depth === 4)
+        return 2;
+    return 3;
+}
 function resolveClerkItem(item) {
     const isH3 = item.depth === 3;
     const rawTitle = typeof item.title === 'string' ? item.title : '';
     const { isStep, displayStep, content } = getStepInfoFromTitle(rawTitle);
     let stepNumber = isH3 && isStep ? String(displayStep) : null;
     let resolvedContent = item.title;
+    let fullTitle = rawTitle || null;
     if (isH3 && isStep) {
         resolvedContent = content !== null && content !== void 0 ? content : item.title;
+        if (typeof content === 'string') {
+            fullTitle = content;
+        }
     }
     if (isH3 && !stepNumber) {
         const urlNum = getDigitsFromUrl(item.url);
@@ -199,18 +217,30 @@ function resolveClerkItem(item) {
                 const match = rawTitle.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
                 if (match === null || match === void 0 ? void 0 : match[2]) {
                     resolvedContent = match[2];
+                    fullTitle = match[2];
                 }
             }
         }
     }
+    if (typeof resolvedContent === 'string') {
+        fullTitle = resolvedContent;
+        resolvedContent = truncateClerkLabel(resolvedContent);
+    }
     return {
         item,
         resolvedContent,
+        fullTitle,
         stepNumber,
         itemPadding: getItemOffset(item.depth),
         lineOffset: getVisualLinePosition(item.depth),
     };
 }
+function truncateClerkLabel(value) {
+    const normalized = value.trim();
+    if (normalized.length <= CLERK_MAX_LABEL_LENGTH)
+        return normalized;
+    return `${normalized.slice(0, CLERK_MAX_LABEL_LENGTH).trimEnd()}...`;
+}
 function buildOutlinePath(items) {
     if (items.length === 0)
         return '';

package/dist/fuma/mdx/toc-clerk-portable.mjs

@@ -24,6 +24,10 @@ const CLERK_ACTIVE_ANIMATION_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
 const CLERK_TEXT_GAP_FROM_PATH = 12;
 // Radius of numbered step badges rendered on top of the path centerline.
 const CLERK_STEP_BADGE_RADIUS = 7;
+// Visual line offsets by grouped heading depth: 1/2, 3, 4, >4.
+const CLERK_DEPTH_GROUP_LINE_OFFSETS = [6, 18, 30, 42];
+// Max number of characters rendered for a TOC label before trimming with ellipsis.
+const CLERK_MAX_LABEL_LENGTH = 44;
 function PortableClerkTOC({ toc, header, footer, title, emptyLabel = 'No headings', className, }) {
     return (jsxs(PageTOC, { className: className, children: [header, title !== null && title !== void 0 ? title : jsx(PageTOCTitle, {}), jsx(PortableClerkTOCScrollArea, { children: jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }));
 }
@@ -103,16 +107,16 @@ function PortableClerkTOCItems(_a) {
     if (toc.length === 0) {
         return (jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: emptyLabel }));
     }
-    return (jsxs("div", Object.assign({ ref: mergeRefs(containerRef, ref), className: cn('relative flex flex-col', className) }, props, { children: [jsx(ClerkOutline, { path: outlinePath, items: layout.items, activePath: activePath, activeAnchors: activeAnchors, activeEndpoint: activeEndpoint }), metas.map((meta, i) => (jsx(PortableClerkTOCItem, { item: meta.item, isActive: activeAnchors.includes(meta.item.url.slice(1)), resolvedContent: meta.resolvedContent, itemPadding: meta.itemPadding, contentRef: (node) => {
+    return (jsxs("div", Object.assign({ ref: mergeRefs(containerRef, ref), className: cn('relative flex flex-col', className) }, props, { children: [jsx(ClerkOutline, { path: outlinePath, items: layout.items, activePath: activePath, activeAnchors: activeAnchors, activeEndpoint: activeEndpoint }), metas.map((meta, i) => (jsx(PortableClerkTOCItem, { item: meta.item, isActive: activeAnchors.includes(meta.item.url.slice(1)), resolvedContent: meta.resolvedContent, fullTitle: meta.fullTitle, itemPadding: meta.itemPadding, contentRef: (node) => {
                     contentRefs.current[i] = node;
                 }, ref: (node) => {
                     itemRefs.current[i] = node;
                 } }, meta.item.url)))] })));
 }
-function PortableClerkTOCItem({ item, isActive, resolvedContent, itemPadding, contentRef, ref, }) {
-    return (jsx(Primitive.TOCItem, { ref: ref, href: item.url, "data-clerk-item": "", style: {
+function PortableClerkTOCItem({ item, isActive, resolvedContent, fullTitle, itemPadding, contentRef, ref, }) {
+    return (jsx(Primitive.TOCItem, { ref: ref, href: item.url, "data-clerk-item": "", title: fullTitle !== null && fullTitle !== void 0 ? fullTitle : undefined, style: {
             paddingInlineStart: itemPadding,
-        }, className: cn('prose group relative py-1.5 text-sm transition-colors wrap-anywhere first:pt-0 last:pb-0 hover:text-fd-accent-foreground', isActive ? themeIconColor : 'text-fd-muted-foreground'), children: jsx("span", { ref: contentRef, className: "relative z-10", children: resolvedContent }) }));
+        }, className: cn('prose group relative py-1.5 text-sm transition-colors first:pt-0 last:pb-0 hover:text-fd-accent-foreground', isActive ? themeIconColor : 'text-fd-muted-foreground'), children: jsx("span", { ref: contentRef, className: "relative z-10 block overflow-hidden text-ellipsis whitespace-nowrap", children: resolvedContent }) }));
 }
 function ClerkOutline({ path, items, activePath, activeAnchors, activeEndpoint, }) {
     const activeSet = new Set(activeAnchors);
@@ -155,19 +159,33 @@ function getItemOffset(depth) {
     return lineOffset + badgeRadius + CLERK_TEXT_GAP_FROM_PATH;
 }
 function getLineOffset(depth) {
-    return depth >= 3 ? 18 : 6;
+    const group = getDepthGroup(depth);
+    return CLERK_DEPTH_GROUP_LINE_OFFSETS[group];
 }
 function getVisualLinePosition(depth) {
     return getLineOffset(depth);
 }
+function getDepthGroup(depth) {
+    if (depth <= 2)
+        return 0;
+    if (depth === 3)
+        return 1;
+    if (depth === 4)
+        return 2;
+    return 3;
+}
 function resolveClerkItem(item) {
     const isH3 = item.depth === 3;
     const rawTitle = typeof item.title === 'string' ? item.title : '';
     const { isStep, displayStep, content } = getStepInfoFromTitle(rawTitle);
     let stepNumber = isH3 && isStep ? String(displayStep) : null;
     let resolvedContent = item.title;
+    let fullTitle = rawTitle || null;
     if (isH3 && isStep) {
         resolvedContent = content !== null && content !== void 0 ? content : item.title;
+        if (typeof content === 'string') {
+            fullTitle = content;
+        }
     }
     if (isH3 && !stepNumber) {
         const urlNum = getDigitsFromUrl(item.url);
@@ -178,18 +196,30 @@ function resolveClerkItem(item) {
                 const match = rawTitle.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
                 if (match === null || match === void 0 ? void 0 : match[2]) {
                     resolvedContent = match[2];
+                    fullTitle = match[2];
                 }
             }
         }
     }
+    if (typeof resolvedContent === 'string') {
+        fullTitle = resolvedContent;
+        resolvedContent = truncateClerkLabel(resolvedContent);
+    }
     return {
         item,
         resolvedContent,
+        fullTitle,
         stepNumber,
         itemPadding: getItemOffset(item.depth),
         lineOffset: getVisualLinePosition(item.depth),
     };
 }
+function truncateClerkLabel(value) {
+    const normalized = value.trim();
+    if (normalized.length <= CLERK_MAX_LABEL_LENGTH)
+        return normalized;
+    return `${normalized.slice(0, CLERK_MAX_LABEL_LENGTH).trimEnd()}...`;
+}
 function buildOutlinePath(items) {
     if (items.length === 0)
         return '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "14.4.1",
+  "version": "14.4.2",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/fuma/mdx/toc-clerk-portable.tsx

@@ -40,6 +40,7 @@ type PortableClerkTOCProps = {
 type ClerkItemMeta = {
   item: TOCItemType;
   resolvedContent: ReactNode;
+  fullTitle: string | null;
   stepNumber: string | null;
   itemPadding: number;
   lineOffset: number;
@@ -70,6 +71,10 @@ const CLERK_ACTIVE_ANIMATION_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
 const CLERK_TEXT_GAP_FROM_PATH = 12;
 // Radius of numbered step badges rendered on top of the path centerline.
 const CLERK_STEP_BADGE_RADIUS = 7;
+// Visual line offsets by grouped heading depth: 1/2, 3, 4, >4.
+const CLERK_DEPTH_GROUP_LINE_OFFSETS = [6, 18, 30, 42] as const;
+// Max number of characters rendered for a TOC label before trimming with ellipsis.
+const CLERK_MAX_LABEL_LENGTH = 44;
 
 export function PortableClerkTOC({
   toc,
@@ -250,6 +255,7 @@ export function PortableClerkTOCItems({
           item={meta.item}
           isActive={activeAnchors.includes(meta.item.url.slice(1))}
           resolvedContent={meta.resolvedContent}
+          fullTitle={meta.fullTitle}
           itemPadding={meta.itemPadding}
           contentRef={(node: HTMLSpanElement | null) => {
             contentRefs.current[i] = node;
@@ -267,6 +273,7 @@ function PortableClerkTOCItem({
   item,
   isActive,
   resolvedContent,
+  fullTitle,
   itemPadding,
   contentRef,
   ref,
@@ -274,6 +281,7 @@ function PortableClerkTOCItem({
   item: TOCItemType;
   isActive: boolean;
   resolvedContent: ReactNode;
+  fullTitle: string | null;
   itemPadding: number;
   contentRef?: ((node: HTMLSpanElement | null) => void) | null;
   ref?: ((node: HTMLAnchorElement | null) => void) | null;
@@ -283,15 +291,19 @@ function PortableClerkTOCItem({
       ref={ref}
       href={item.url}
       data-clerk-item=""
+      title={fullTitle ?? undefined}
       style={{
         paddingInlineStart: itemPadding,
       }}
       className={cn(
-        'prose group relative py-1.5 text-sm transition-colors wrap-anywhere first:pt-0 last:pb-0 hover:text-fd-accent-foreground',
+        'prose group relative py-1.5 text-sm transition-colors first:pt-0 last:pb-0 hover:text-fd-accent-foreground',
         isActive ? themeIconColor : 'text-fd-muted-foreground',
       )}
     >
-      <span ref={contentRef} className="relative z-10">
+      <span
+        ref={contentRef}
+        className="relative z-10 block overflow-hidden text-ellipsis whitespace-nowrap"
+      >
         {resolvedContent}
       </span>
     </Primitive.TOCItem>
@@ -453,22 +465,34 @@ function getItemOffset(depth: number): number {
 }
 
 function getLineOffset(depth: number): number {
-  return depth >= 3 ? 18 : 6;
+  const group = getDepthGroup(depth);
+  return CLERK_DEPTH_GROUP_LINE_OFFSETS[group];
 }
 
 function getVisualLinePosition(depth: number): number {
   return getLineOffset(depth);
 }
 
+function getDepthGroup(depth: number): number {
+  if (depth <= 2) return 0;
+  if (depth === 3) return 1;
+  if (depth === 4) return 2;
+  return 3;
+}
+
 function resolveClerkItem(item: TOCItemType): ClerkItemMeta {
   const isH3 = item.depth === 3;
   const rawTitle = typeof item.title === 'string' ? item.title : '';
   const { isStep, displayStep, content } = getStepInfoFromTitle(rawTitle);
   let stepNumber: string | null = isH3 && isStep ? String(displayStep) : null;
   let resolvedContent: ReactNode = item.title;
+  let fullTitle: string | null = rawTitle || null;
 
   if (isH3 && isStep) {
     resolvedContent = content ?? item.title;
+    if (typeof content === 'string') {
+      fullTitle = content;
+    }
   }
 
   if (isH3 && !stepNumber) {
@@ -480,20 +504,34 @@ function resolveClerkItem(item: TOCItemType): ClerkItemMeta {
         const match = rawTitle.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
         if (match?.[2]) {
           resolvedContent = match[2];
+          fullTitle = match[2];
         }
       }
     }
   }
 
+  if (typeof resolvedContent === 'string') {
+    fullTitle = resolvedContent;
+    resolvedContent = truncateClerkLabel(resolvedContent);
+  }
+
   return {
     item,
     resolvedContent,
+    fullTitle,
     stepNumber,
     itemPadding: getItemOffset(item.depth),
     lineOffset: getVisualLinePosition(item.depth),
   };
 }
 
+function truncateClerkLabel(value: string): string {
+  const normalized = value.trim();
+  if (normalized.length <= CLERK_MAX_LABEL_LENGTH) return normalized;
+
+  return `${normalized.slice(0, CLERK_MAX_LABEL_LENGTH).trimEnd()}...`;
+}
+
 function buildOutlinePath(items: ClerkItemMeasure[]): string {
   if (items.length === 0) return '';
 

package/src/styles/fuma.css

@@ -3,6 +3,19 @@
   @apply top-20!;
 }
 
+@media (min-width: 1280px) {
+  /* 给桌面端固定 TOC 留一点底部呼吸感，避免视觉上直接压到 footer */
+  #nd-toc {
+    bottom: 1.25rem !important;
+  }
+
+  /* 文档主区域补一小段底部缓冲，减少 footer 刚进入视口就与 TOC 相撞 */
+  #nd-page {
+    padding-bottom: 5rem !important;
+    min-height: calc(100dvh - 5rem) !important;
+  }
+}
+
 /* 移动端文章目录下拉框的边距，建议移动端不要目录导航 96px */
 #nd-tocnav {
   @apply top-24!;
@@ -35,7 +48,7 @@ button[aria-label="Open Search"][data-search=""] {
 
 /* Custome Fuma Steps */
 .fd-step::before {
-  @apply size-5 -start-2.5 rounded-full;
+  @apply size-5 -inset-s-2.5 rounded-full;
   background-color: #000; 
   color: #fff;
   font-size: 0.75rem; 
@@ -128,4 +141,4 @@ button[aria-label="Open Search"][data-search=""] {
   [data-rmiz-modal-img] {
     transition-duration: 0.01ms !important;
   }
-} 
+}