node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/components/Markdown.tsx

@@ -0,0 +1,532 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { fs, MILITARY } from '@/lib/theme';
+import { headingId } from '@/lib/docs-shared';
+
+/**
+ * 轻量 Markdown 渲染器（无第三方依赖）。
+ *
+ * 为什么自己写：
+ *   比赛环境是离线内网，装不了 react-markdown / marked；
+ *   而模型的回答天然是 Markdown，直接当纯文本显示会看到一堆 ** 和 | 表格。
+ *
+ * 支持：标题 / 段落 / 有序无序列表 / 代码块 / 行内代码 / 粗斜体 / 删除线 /
+ *      链接 / 引用 / 表格 / 分割线。
+ *
+ * 安全：全部用 React 元素拼装，**绝不使用 dangerouslySetInnerHTML**，
+ *      模型就算输出 <script> 也只会被当成普通文字。
+ */
+
+/* ------------------------------ 块级解析 ------------------------------ */
+
+type Block =
+  | { type: 'code'; lang: string; code: string }
+  | { type: 'table'; head: string[]; rows: string[][] }
+  | { type: 'list'; ordered: boolean; items: string[] }
+  | { type: 'quote'; lines: string[] }
+  | { type: 'heading'; level: number; text: string }
+  | { type: 'hr' }
+  | { type: 'para'; lines: string[] };
+
+const LIST_RE = /^([-*+]|\d+[.)])\s+(.*)$/;
+const HEADING_RE = /^(#{1,6})\s+(.*)$/;
+
+function isTableSep(line: string): boolean {
+  const t = line.trim();
+  if (!t.includes('-') || !t.includes('|')) return false;
+  const cells = t.replace(/^\|/, '').replace(/\|$/, '').split('|');
+  return cells.length > 0 && cells.every((c) => /^:?-{2,}:?$/.test(c.trim()));
+}
+
+function splitRow(line: string): string[] {
+  return line
+    .trim()
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((c) => c.trim());
+}
+
+function isBlockStart(line: string): boolean {
+  const t = line.trim();
+  return (
+    /^```/.test(t) ||
+    HEADING_RE.test(t) ||
+    /^>\s?/.test(t) ||
+    LIST_RE.test(t) ||
+    /^([-*_])\1{2,}$/.test(t.replace(/\s+/g, ''))
+  );
+}
+
+/** 把 Markdown 文本切成块（对未闭合的代码块也容错 —— 流式输出时会遇到） */
+export function parseBlocks(src: string): Block[] {
+  const lines = String(src ?? '').replace(/\r\n?/g, '\n').split('\n');
+  const blocks: Block[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const raw = lines[i];
+    const t = raw.trim();
+
+    if (!t) {
+      i += 1;
+      continue;
+    }
+
+    // 代码块
+    const fence = t.match(/^```(\w*)/);
+    if (fence) {
+      const lang = fence[1] ?? '';
+      const buf: string[] = [];
+      i += 1;
+      while (i < lines.length && !lines[i].trim().startsWith('```')) {
+        buf.push(lines[i]);
+        i += 1;
+      }
+      if (i < lines.length) i += 1; // 跳过结束围栏
+      blocks.push({ type: 'code', lang, code: buf.join('\n') });
+      continue;
+    }
+
+    // 标题
+    const h = t.match(HEADING_RE);
+    if (h) {
+      blocks.push({ type: 'heading', level: h[1].length, text: h[2] });
+      i += 1;
+      continue;
+    }
+
+    // 分割线
+    if (/^([-*_])\1{2,}$/.test(t.replace(/\s+/g, ''))) {
+      blocks.push({ type: 'hr' });
+      i += 1;
+      continue;
+    }
+
+    // 表格（当前行有 |，下一行是分隔行）
+    if (t.includes('|') && i + 1 < lines.length && isTableSep(lines[i + 1])) {
+      const head = splitRow(t);
+      i += 2;
+      const rows: string[][] = [];
+      while (i < lines.length && lines[i].includes('|') && lines[i].trim()) {
+        rows.push(splitRow(lines[i]));
+        i += 1;
+      }
+      blocks.push({ type: 'table', head, rows });
+      continue;
+    }
+
+    // 引用
+    if (/^>\s?/.test(t)) {
+      const buf: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i].trim())) {
+        buf.push(lines[i].trim().replace(/^>\s?/, ''));
+        i += 1;
+      }
+      blocks.push({ type: 'quote', lines: buf });
+      continue;
+    }
+
+    // 列表（连续的列表项合并成一个 list；缩进的续行并到上一项）
+    const li = t.match(LIST_RE);
+    if (li) {
+      const ordered = /^\d/.test(li[1]);
+      const items: string[] = [];
+      while (i < lines.length) {
+        const cur = lines[i];
+        const m = cur.trim().match(LIST_RE);
+        if (m) {
+          items.push(m[2]);
+          i += 1;
+          continue;
+        }
+        if (cur.trim() && /^\s{2,}/.test(cur) && items.length) {
+          items[items.length - 1] += ` ${cur.trim()}`;
+          i += 1;
+          continue;
+        }
+        break;
+      }
+      blocks.push({ type: 'list', ordered, items });
+      continue;
+    }
+
+    // 段落：吃到空行或下一个块开头
+    const buf: string[] = [];
+    while (i < lines.length) {
+      const cur = lines[i];
+      const tt = cur.trim();
+      if (!tt || isBlockStart(cur)) break;
+      if (tt.includes('|') && i + 1 < lines.length && isTableSep(lines[i + 1])) break;
+      buf.push(tt);
+      i += 1;
+    }
+    if (buf.length) blocks.push({ type: 'para', lines: buf });
+    else i += 1; // 防御：避免死循环
+  }
+
+  return blocks;
+}
+
+/* ------------------------------ 行内解析 ------------------------------ */
+
+const INLINE_RE =
+  /(`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|~~[^~]+~~|\[[^\]]+\]\([^)\s]+\)|\*[^*\n]+\*|_[^_\n]+_|<br\s*\/?>)/gi;
+
+/** 文档站的可选渲染能力；默认全部关闭，AI 面板等既有调用不受影响 */
+type RenderOptions = {
+  /** 给标题生成锚点 id，并在标题前渲染可点击的 # */
+  anchors?: boolean;
+  /** 站内链接用 Next Link（不新开标签页） */
+  internalLinks?: boolean;
+  /** 代码块右上角显示复制按钮 */
+  copyable?: boolean;
+  /** 同一篇文档内标题 id 去重 */
+  headingIds?: Set<string>;
+};
+
+function renderInline(text: string, keyBase: string, opts: RenderOptions = {}): React.ReactNode[] {
+  const out: React.ReactNode[] = [];
+  let last = 0;
+  let k = 0;
+  let m: RegExpExecArray | null;
+  INLINE_RE.lastIndex = 0;
+
+  while ((m = INLINE_RE.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    const tok = m[0];
+    const key = `${keyBase}-i${k++}`;
+
+    if (tok.startsWith('`')) {
+      out.push(
+        <code
+          key={key}
+          style={{
+            background: MILITARY.soft,
+            border: `1px solid ${MILITARY.borderSoft}`,
+            borderRadius: 4,
+            padding: '1px 5px',
+            fontSize: '0.92em',
+            fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+          }}
+        >
+          {tok.slice(1, -1)}
+        </code>
+      );
+    } else if (tok.startsWith('**') || tok.startsWith('__')) {
+      out.push(<strong key={key}>{tok.slice(2, -2)}</strong>);
+    } else if (tok.startsWith('~~')) {
+      out.push(<del key={key}>{tok.slice(2, -2)}</del>);
+    } else if (/^<br\s*\/?>$/i.test(tok)) {
+      // 模型常在表格单元格里用 <br> 分隔多条依据，直接当文字显示会很脏
+      out.push(<br key={key} />);
+    } else if (tok.startsWith('[')) {
+      const link = tok.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+      if (link) {
+        const href = link[2];
+        const isInternal =
+          href.startsWith('/') || href.startsWith('#') || href.startsWith('?');
+        // 文档正文里的站内链接不新开标签页，否则读两页就开出一排标签；
+        // 外链保持 target=_blank，AI 回答里的参考链接也沿用这个行为。
+        // 哈希链接仍用原生 a，交给浏览器做页内跳转。
+        const isRouteLink = isInternal && href.startsWith('/');
+        out.push(
+          isRouteLink && opts.internalLinks ? (
+            <Link key={key} href={href} style={{ color: MILITARY.primary }}>
+              {link[1]}
+            </Link>
+          ) : (
+            <a
+              key={key}
+              href={href}
+              target={isInternal ? undefined : '_blank'}
+              rel={isInternal ? undefined : 'noreferrer'}
+              style={{ color: MILITARY.primary }}
+            >
+              {link[1]}
+            </a>
+          )
+        );
+      } else {
+        out.push(tok);
+      }
+    } else {
+      out.push(<em key={key}>{tok.slice(1, -1)}</em>);
+    }
+    last = m.index + tok.length;
+  }
+
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+/* ------------------------------ 渲染 ------------------------------ */
+
+const HEADING_SIZE: Record<number, number> = { 1: 18, 2: 16, 3: 15, 4: 14, 5: 13.5, 6: 13.5 };
+
+/** 复制代码：优先 Clipboard API，HTTP 内网环境回退到 execCommand */
+function copyText(text: string): Promise<void> {
+  if (typeof navigator !== 'undefined' && navigator.clipboard && window.isSecureContext) {
+    return navigator.clipboard.writeText(text);
+  }
+  return new Promise((resolve, reject) => {
+    try {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.top = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(ta);
+      if (ok) resolve();
+      else reject(new Error('copy failed'));
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
+/** 带语言标签与复制按钮的代码块（只有文档站会开启 copyable） */
+function CodeBlock({ code, lang, copyable }: { code: string; lang: string; copyable?: boolean }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current) window.clearTimeout(timer.current);
+    },
+    []
+  );
+
+  const preStyle: React.CSSProperties = {
+    background: MILITARY.paper,
+    border: `1px solid ${MILITARY.borderSoft}`,
+    borderRadius: 6,
+    padding: '8px 10px',
+    margin: '6px 0',
+    overflowX: 'auto',
+    maxHeight: 320,
+    overflowY: 'auto',
+    fontSize: fs(12),
+    lineHeight: 1.6,
+    fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+    whiteSpace: 'pre',
+  };
+
+  if (!copyable) {
+    return (
+      <pre style={preStyle}>
+        <code>{code}</code>
+      </pre>
+    );
+  }
+
+  const onCopy = async () => {
+    try {
+      await copyText(code);
+      setCopied(true);
+      if (timer.current) window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* 复制失败不打断阅读，用户可以手动选择代码 */
+    }
+  };
+
+  return (
+    <div className="wb-md-code">
+      {lang && <span className="wb-md-code-lang">{lang}</span>}
+      <pre style={{ ...preStyle, margin: 0, padding: '30px 12px 12px', maxHeight: 520 }}>
+        <code>{code}</code>
+      </pre>
+      <button type="button" className="wb-md-copy" onClick={() => void onCopy()}>
+        {copied ? '已复制' : '复制'}
+      </button>
+    </div>
+  );
+}
+
+function renderBlock(b: Block, key: string, opts: RenderOptions = {}): React.ReactNode {
+  switch (b.type) {
+    case 'code':
+      return <CodeBlock key={key} code={b.code} lang={b.lang} copyable={opts.copyable} />;
+
+    case 'heading': {
+      // 用真实 h 标签（antd 的 reset 会把标题字号抹平，所以样式全部显式给）
+      const tag = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const)[Math.min(b.level, 6) - 1];
+      const id = opts.anchors ? headingId(b.text, opts.headingIds) : undefined;
+      return React.createElement(
+        tag,
+        {
+          key,
+          id,
+          style: {
+            fontSize: fs(HEADING_SIZE[b.level] ?? 14),
+            fontWeight: 600,
+            // 标题左侧一条浅军绿定位条，报告里层级更清楚（比下划线更克制）
+            borderLeft: b.level <= 3 ? `3px solid ${MILITARY.softStrong}` : undefined,
+            paddingLeft: b.level <= 3 ? 8 : undefined,
+            margin: b.level <= 2 ? '12px 0 7px' : '8px 0 5px',
+            color: MILITARY.text,
+            lineHeight: 1.5,
+            // 顶部固定栏会挡住跳转目标，留出滚动余量
+            scrollMarginTop: opts.anchors ? 78 : undefined,
+          },
+        },
+        <>
+          {id && (
+            <a className="wb-docs-anchor" href={`#${id}`} aria-label="链接到本节">
+              #
+            </a>
+          )}
+          {renderInline(b.text, key, opts)}
+        </>
+      );
+    }
+
+    case 'hr':
+      return <hr key={key} style={{ border: 'none', borderTop: `1px dashed ${MILITARY.border}`, margin: '10px 0' }} />;
+
+    case 'quote':
+      return (
+        <blockquote
+          key={key}
+          style={{
+            margin: '8px 0',
+            padding: '7px 10px',
+            borderRadius: '0 6px 6px 0',
+            borderLeft: `3px solid ${MILITARY.softStrong}`,
+            color: MILITARY.textSecondary,
+            background: MILITARY.soft,
+          }}
+        >
+          {b.lines.map((l, idx) => (
+            <div key={`${key}-q${idx}`}>{renderInline(l, `${key}-q${idx}`, opts)}</div>
+          ))}
+        </blockquote>
+      );
+
+    case 'list': {
+      const items = b.items.map((it, idx) => (
+        <li key={`${key}-l${idx}`} style={{ margin: '3px 0' }}>
+          {renderInline(it, `${key}-l${idx}`, opts)}
+        </li>
+      ));
+      // ★ antd 的全局 reset 会把 ol/ul 的 list-style 清掉（变成纯缩进文本），
+      //   所以这里必须显式给 listStyleType，否则列表看不出层级。
+      const listStyle: React.CSSProperties = {
+        margin: '4px 0',
+        paddingLeft: 24,
+        listStylePosition: 'outside',
+        listStyleType: b.ordered ? 'decimal' : 'disc',
+      };
+      return b.ordered ? (
+        <ol key={key} style={listStyle}>
+          {items}
+        </ol>
+      ) : (
+        <ul key={key} style={listStyle}>
+          {items}
+        </ul>
+      );
+    }
+
+    case 'table':
+      return (
+        <div key={key} style={{ overflowX: 'auto', margin: '8px 0' }}>
+          <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: fs(12.5) }}>
+            <thead>
+              <tr>
+                {b.head.map((h, idx) => (
+                  <th
+                    key={`${key}-h${idx}`}
+                    style={{
+                      border: `1px solid ${MILITARY.border}`,
+                      background: MILITARY.soft,
+                      padding: '5px 8px',
+                      textAlign: 'left',
+                      fontWeight: 600,
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {renderInline(h, `${key}-h${idx}`, opts)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {b.rows.map((row, r) => (
+                <tr key={`${key}-r${r}`}>
+                  {row.map((cell, c) => (
+                    <td
+                      key={`${key}-r${r}c${c}`}
+                      style={{ border: `1px solid ${MILITARY.border}`, padding: '5px 8px', verticalAlign: 'top' }}
+                    >
+                      {renderInline(cell, `${key}-r${r}c${c}`, opts)}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+
+    case 'para':
+    default:
+      return (
+        <p key={key} style={{ margin: '4px 0' }}>
+          {b.lines.map((l, idx) => (
+            <React.Fragment key={`${key}-p${idx}`}>
+              {idx > 0 && <br />}
+              {renderInline(l, `${key}-p${idx}`, opts)}
+            </React.Fragment>
+          ))}
+        </p>
+      );
+  }
+}
+
+export default function Markdown({
+  text,
+  style,
+  anchors = false,
+  internalLinks = false,
+  copyable = false,
+}: {
+  text: string;
+  style?: React.CSSProperties;
+  /** 文档站：标题生成 id 与锚点链接 */
+  anchors?: boolean;
+  /** 文档站：站内链接不新开标签页 */
+  internalLinks?: boolean;
+  /** 文档站：代码块提供复制按钮 */
+  copyable?: boolean;
+}) {
+  if (!text) return null;
+  const blocks = parseBlocks(text);
+  // 与 extractToc 共用同一套 id 规则和去重顺序，目录才能准确跳到标题
+  const opts: RenderOptions = {
+    anchors,
+    internalLinks,
+    copyable,
+    headingIds: anchors ? new Set<string>() : undefined,
+  };
+  return (
+    <div
+      data-markdown="1"
+      style={{
+        fontSize: fs(13.5),
+        lineHeight: 1.75,
+        color: MILITARY.text,
+        wordBreak: 'break-word',
+        ...style,
+      }}
+    >
+      {blocks.map((b, i) => renderBlock(b, `b${i}`, opts))}
+    </div>
+  );
+}