feat: improve markdown rendering, artifact file preview, and public scheduled task page

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend-web/src/roundtable-planning/components/ArtifactPreviewModal.tsx

@@ -1,9 +1,11 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Download, FileText, Loader2, X } from "lucide-react";
 
 import { apiFetch } from "@/core/api/fetch-client";
+import { createMarkdownAnchorResolver } from "@/core/utils/markdown";
 import { buildArtifactDownloadUrl } from "@/roundtable-planning/api/multi-agent";
 
 interface ArtifactPreviewModalProps {
@@ -18,15 +20,32 @@ interface ArtifactPreviewModalProps {
   onClose: () => void;
 }
 
-const MARKDOWN_COMPONENTS = {
+function extractTextFromChildren(children: ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(extractTextFromChildren).join("");
+  return "";
+}
+
+function createMarkdownComponents(content: string) {
+  const anchorResolver = createMarkdownAnchorResolver(content);
+  const heading = (level: 1 | 2 | 3 | 4 | 5 | 6, className: string) => {
+    const Tag = `h${level}` as const;
+    return ({ children, id }: any) => (
+      <Tag id={id ?? anchorResolver.getHeadingId(level, extractTextFromChildren(children))} className={className}>
+        {children}
+      </Tag>
+    );
+  };
+
+  return {
   p: ({ children }: any) => <p className="my-1.5 whitespace-pre-wrap leading-relaxed">{children}</p>,
   ul: ({ children }: any) => <ul className="list-disc pl-5 my-1.5 space-y-1">{children}</ul>,
   ol: ({ children }: any) => <ol className="list-decimal pl-5 my-1.5 space-y-1">{children}</ol>,
   li: ({ children }: any) => <li className="leading-snug">{children}</li>,
-  h1: ({ children }: any) => <h1 className="text-base font-bold mt-3 mb-2">{children}</h1>,
-  h2: ({ children }: any) => <h2 className="text-sm font-bold mt-3 mb-1.5">{children}</h2>,
-  h3: ({ children }: any) => <h3 className="text-xs font-bold mt-2 mb-1">{children}</h3>,
-  h4: ({ children }: any) => <h4 className="text-xs font-bold mt-1.5 mb-1">{children}</h4>,
+  h1: heading(1, "text-base font-bold mt-3 mb-2 scroll-mt-4"),
+  h2: heading(2, "text-sm font-bold mt-3 mb-1.5 scroll-mt-4"),
+  h3: heading(3, "text-xs font-bold mt-2 mb-1 scroll-mt-4"),
+  h4: heading(4, "text-xs font-bold mt-1.5 mb-1 scroll-mt-4"),
   strong: ({ children }: any) => <strong className="font-bold text-slate-900">{children}</strong>,
   em: ({ children }: any) => <em className="italic">{children}</em>,
   code: ({ children, className }: any) => {
@@ -43,18 +62,38 @@ const MARKDOWN_COMPONENTS = {
   blockquote: ({ children }: any) => (
     <blockquote className="border-l-2 border-slate-300 pl-3 my-2 text-slate-600 italic">{children}</blockquote>
   ),
-  a: ({ children, href }: any) => (
-    <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary underline hover:opacity-80">
-      {children}
-    </a>
-  ),
+  a: ({ children, href }: any) => {
+    const resolvedHref = anchorResolver.resolveHref(href, extractTextFromChildren(children));
+    if (resolvedHref === null) {
+      return (
+        <span
+          className="text-primary/80 underline decoration-dotted underline-offset-2 cursor-not-allowed"
+          title="未在当前 Markdown 中找到对应章节"
+        >
+          {children}
+        </span>
+      );
+    }
+    const isExternal = typeof href === "string" && /^https?:\/\//i.test(href);
+    return (
+      <a
+        href={resolvedHref ?? href}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        className="text-primary underline hover:opacity-80"
+      >
+        {children}
+      </a>
+    );
+  },
   table: ({ children }: any) => <table className="my-2 border-collapse text-[12px] w-full">{children}</table>,
   th: ({ children }: any) => (
     <th className="border border-slate-300 px-2 py-1 bg-slate-50 font-bold text-left">{children}</th>
   ),
   td: ({ children }: any) => <td className="border border-slate-200 px-2 py-1">{children}</td>,
   hr: () => <hr className="my-3 border-slate-200" />,
-};
+  };
+}
 
 function isMarkdown(mimeType: string | null, name: string): boolean {
   if (mimeType === "text/markdown") return true;
@@ -121,6 +160,10 @@ export const ArtifactPreviewModal: React.FC<ArtifactPreviewModalProps> = ({
   }, [threadId, path]);
 
   const renderAsMarkdown = isMarkdown(mimeType, name);
+  const markdownComponents = useMemo(
+    () => createMarkdownComponents(content ?? ""),
+    [content],
+  );
 
   return (
     <div
@@ -171,7 +214,7 @@ export const ArtifactPreviewModal: React.FC<ArtifactPreviewModalProps> = ({
               加载失败:{error}
             </div>
           ) : content === null ? null : renderAsMarkdown ? (
-            <ReactMarkdown remarkPlugins={[remarkGfm]} components={MARKDOWN_COMPONENTS}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
               {content}
             </ReactMarkdown>
           ) : (