@amaster.ai/components-templates 1.6.0 → 1.10.0

package/components/ai-assistant-taro/template/components/markdown.tsx

@@ -1,156 +1,362 @@
 // components/MarkdownLite.tsx
 
-import {Image, Text, View} from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import MarkdownIt from 'markdown-it'
-import {memo, useMemo} from 'react'
+import { Image, Text, View } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import MarkdownIt from "markdown-it";
+import { memo, useMemo } from "react";
 
 const md = new MarkdownIt({
   html: true,
   breaks: true,
-  linkify: true
-  // 如果需要代码高亮，可以在这里加 highlight 函数
-})
-
-function renderToken(token: any, key: string): JSX.Element | null {
-  const children = token.children
-    ? token.children.map((t: any, i: number) => renderToken(t, `${key}-child-${i}`))
-    : null
-
-  switch (token.type) {
-    // 标题
-    case 'heading_open': {
-      const level = token.markup.length
-      const hClasses =
-        {
-          1: 'text-4xl font-bold mt-4 mb-4 border-b border-gray-200 dark:border-gray-700',
-          2: 'text-3xl font-bold mt-3 mb-3 border-l-4 border-blue-500',
-          3: 'text-2xl font-bold mt-2 mb-2',
-          4: 'text-xl font-bold mt-1 mb-1',
-          5: 'text-lg font-bold',
-          6: 'text-base font-bold'
-        }[level] || 'text-lg font-bold mt-2 mb-2'
-
-      return (
-        <View key={key} className={hClasses}>
-          {children}
-        </View>
-      )
-    }
+  linkify: true,
+});
 
-    // 段落
-    case 'paragraph_open':
-      return (
-        <View key={key} className="mb-1 leading-relaxed text-base">
-          {children}
-        </View>
-      )
-
-    // 文本节点
-    case 'text':
-    case 'softbreak':
-    case 'hardbreak':
-      return <Text key={key}>{token.content}</Text>
-
-    // 粗体
-    case 'strong_open':
-      return (
-        <Text key={key} className="font-bold text-gray-900 dark:text-gray-100">
-          {children}
-        </Text>
-      )
-
-    // 斜体
-    case 'em_open':
-      return (
-        <Text key={key} className="italic text-gray-700 dark:text-gray-300">
-          {children}
-        </Text>
-      )
-
-    // 行内代码
-    case 'code_inline':
-      return (
-        <Text
-          key={key}
-          className="font-mono text-red-600 dark:text-red-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
-          {token.content}
-        </Text>
-      )
-
-    // 代码块
-    case 'fence': {
-      const lang = token.info ? token.info.trim() : ''
-      return (
-        <View
-          key={key}
-          className="my-2 bg-gray-900 text-gray-200 p-6 rounded-xl overflow-x-auto shadow-lg font-mono text-sm leading-6">
-          <Text className="whitespace-pre">{token.content.trim()}</Text>
-          {lang && (
-            <View className="absolute top-2 right-3 text-xs text-gray-500 bg-gray-800 px-2 py-1 rounded">{lang}</View>
-          )}
-        </View>
-      )
-    }
+function buildTokenPairs(tokens: any[]): Map<number, number> {
+  const pairs = new Map<number, number>();
+  const stack: number[] = [];
 
-    // 图片
-    case 'image': {
-      const src = token.attrs?.find((a: string[]) => a[0] === 'src')?.[1] || ''
-      return (
-        <Image
-          key={key}
-          src={src}
-          mode="widthFix"
-          lazyLoad
-          className="rounded-xl shadow-md my-2 max-w-full inline-block"
-          onClick={() => src && Taro.previewImage({urls: [src]})}
-        />
-      )
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token.nesting === 1) {
+      stack.push(i);
+    } else if (token.nesting === -1) {
+      const openIndex = stack.pop();
+      if (openIndex !== undefined) {
+        pairs.set(openIndex, i);
+      }
     }
+  }
 
-    // 链接
-    case 'link_open': {
-      const href = token.attrs?.find((a: string[]) => a[0] === 'href')?.[1] || ''
-      return (
-        <Text
-          key={key}
-          className="text-blue-600 dark:text-blue-400 no-underline hover:underline cursor-pointer"
-          onClick={() => {
-            if (href) {
-              Taro.setClipboardData({data: href}).then(() => Taro.showToast({title: '链接已复制', icon: 'none'}))
-            }
-          }}>
-          {children}
-        </Text>
-      )
-    }
+  return pairs;
+}
+
+interface RenderResult {
+  elements: JSX.Element[];
+  nextIndex: number;
+}
+
+function renderTokens(
+  tokens: any[],
+  pairs: Map<number, number>,
+  startIndex: number,
+  endIndex: number,
+  keyPrefix: string,
+  listContext?: { isOrdered: boolean; start: number },
+): RenderResult {
+  const elements: JSX.Element[] = [];
+  let i = startIndex;
+
+  while (i < endIndex) {
+    const token = tokens[i];
+    const key = `${keyPrefix}-${i}`;
+
+    switch (token.type) {
+      case "heading_open": {
+        const level = token.markup.length;
+        const hClasses =
+          {
+            1: "text-4xl font-bold mt-4 mb-4 border-b border-gray-200 dark:border-gray-700",
+            2: "text-3xl font-bold mt-3 mb-3 border-l-4 border-blue-500",
+            3: "text-2xl font-bold mt-2 mb-2",
+            4: "text-xl font-bold mt-1 mb-1",
+            5: "text-lg font-bold",
+            6: "text-base font-bold",
+          }[level] || "text-lg font-bold mt-2 mb-2";
+
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+        );
+        elements.push(
+          <View key={key} className={hClasses}>
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "paragraph_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <View key={key} className="mb-1 leading-relaxed text-base">
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "bullet_list_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          { isOrdered: false, start: 1 },
+        );
+        elements.push(
+          <View key={key} className="my-2 pl-2">
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "ordered_list_open": {
+        const start = token.attrGet?.("start") || 1;
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          { isOrdered: true, start },
+        );
+        elements.push(
+          <View key={key} className="my-2 pl-2">
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
 
-    // 关闭标签（我们通常不渲染 closing token 的内容，因为 children 已处理）
-    case 'heading_close':
-    case 'paragraph_close':
-    case 'strong_close':
-    case 'em_close':
-    case 'link_close':
-      return null
-
-    // 其他未处理的 token，直接渲染 children（兜底）
-    default:
-      return children ? <View key={key}>{children}</View> : null
+      case "list_item_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        let itemIndex = 0;
+        for (let j = startIndex; j < i; j++) {
+          if (
+            tokens[j].type === "list_item_open" &&
+            tokens[j].level === token.level
+          ) {
+            itemIndex++;
+          }
+        }
+        const itemNumber = (listContext?.start || 1) + itemIndex;
+
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+
+        elements.push(
+          <View key={key} className="flex flex-row items-start mb-1">
+            <Text className="mr-2 text-gray-700 dark:text-gray-300 w-5 text-right shrink-0">
+              {listContext?.isOrdered ? `${itemNumber}.` : "•"}
+            </Text>
+            <View className="flex-1 overflow-hidden">{children}</View>
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "strong_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <Text
+            key={key}
+            className="font-bold text-gray-900 dark:text-gray-100"
+          >
+            {children}
+          </Text>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "em_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <Text key={key} className="italic text-gray-700 dark:text-gray-300">
+            {children}
+          </Text>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "link_open": {
+        const href =
+          token.attrs?.find((a: string[]) => a[0] === "href")?.[1] || "";
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <Text
+            key={key}
+            className="text-blue-600 dark:text-blue-400 no-underline hover:underline cursor-pointer"
+            onClick={() => {
+              if (href) {
+                Taro.setClipboardData({ data: href }).then(() =>
+                  Taro.showToast({ title: "链接已复制", icon: "none" }),
+                );
+              }
+            }}
+          >
+            {children}
+          </Text>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "code_inline":
+        elements.push(
+          <Text
+            key={key}
+            className="font-mono text-red-600 dark:text-red-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded"
+          >
+            {token.content}
+          </Text>,
+        );
+        i++;
+        break;
+
+      case "fence": {
+        const lang = token.info ? token.info.trim() : "";
+        elements.push(
+          <View
+            key={key}
+            className="my-2 bg-gray-900 text-gray-200 p-4 rounded-xl overflow-x-auto shadow-lg font-mono text-sm leading-6 relative"
+          >
+            <Text className="whitespace-pre">{token.content.trim()}</Text>
+            {lang && (
+              <View className="absolute top-2 right-3 text-xs text-gray-500 bg-gray-800 px-2 py-1 rounded">
+                {lang}
+              </View>
+            )}
+          </View>,
+        );
+        i++;
+        break;
+      }
+
+      case "image": {
+        const src =
+          token.attrs?.find((a: string[]) => a[0] === "src")?.[1] || "";
+        elements.push(
+          <Image
+            key={key}
+            src={src}
+            mode="widthFix"
+            lazyLoad
+            className="rounded-xl shadow-md my-2 max-w-full inline-block"
+            onClick={() => src && Taro.previewImage({ urls: [src] })}
+          />,
+        );
+        i++;
+        break;
+      }
+
+      case "text":
+        elements.push(<Text key={key}>{token.content}</Text>);
+        i++;
+        break;
+
+      case "softbreak":
+      case "hardbreak":
+        elements.push(<Text key={key}> </Text>);
+        i++;
+        break;
+
+      case "heading_close":
+      case "paragraph_close":
+      case "strong_close":
+      case "em_close":
+      case "link_close":
+      case "bullet_list_close":
+      case "ordered_list_close":
+      case "list_item_close":
+        // 这些由对应的 open 处理，直接跳过
+        i++;
+        break;
+
+      default:
+        if (token.children && token.children.length > 0) {
+          const childPairs = buildTokenPairs(token.children);
+          const { elements: childElements } = renderTokens(
+            token.children,
+            childPairs,
+            0,
+            token.children.length,
+            key,
+            listContext,
+          );
+          elements.push(<Text key={key}>{childElements}</Text>);
+        }
+        i++;
+        break;
+    }
   }
+
+  return { elements, nextIndex: i };
 }
 
 interface MarkdownLiteProps {
-  content: string
-  className?: string
+  content: string;
+  className?: string;
 }
 
-const MarkdownLite = memo(({content, className}: MarkdownLiteProps) => {
-  const tokens = useMemo(() => {
-    if (!content) return []
-    return md.parse(content, {})
-  }, [content])
+const MarkdownLite = memo(({ content, className }: MarkdownLiteProps) => {
+  const elements = useMemo(() => {
+    if (!content) return [];
+    const tokens = md.parse(content, {});
+    const pairs = buildTokenPairs(tokens);
+    const { elements: rendered } = renderTokens(
+      tokens,
+      pairs,
+      0,
+      tokens.length,
+      "root",
+    );
+    return rendered;
+  }, [content]);
 
-  return <View className={`text-lg ${className}`}>{tokens.map((token, i) => renderToken(token, `root-${i}`))}</View>
-})
+  return <View className={`text-lg ${className || ""}`}>{elements}</View>;
+});
 
-export default MarkdownLite
+export default MarkdownLite;