|
| 1 | +import React from 'react'; |
| 2 | +import type { Components } from 'react-markdown'; |
| 3 | + |
| 4 | +import SyntaxHighlight from '@/extensions/AI/components/SyntaxHighlight'; |
| 5 | + |
| 6 | +/** |
| 7 | + * URL 安全验证：防止 XSS 攻击 |
| 8 | + * 只允许 http、https、mailto 协议的链接 |
| 9 | + */ |
| 10 | +const isValidUrl = (url: string | undefined): boolean => { |
| 11 | + if (!url) return false; |
| 12 | + |
| 13 | + try { |
| 14 | + const parsed = new URL(url, window.location.href); |
| 15 | + |
| 16 | + return ['http:', 'https:', 'mailto:'].includes(parsed.protocol); |
| 17 | + } catch { |
| 18 | + return false; |
| 19 | + } |
| 20 | +}; |
| 21 | + |
| 22 | +/** |
| 23 | + * 统一的 ReactMarkdown 组件配置 |
| 24 | + * 修复代码块渲染问题：正确区分行内代码和代码块 |
| 25 | + */ |
| 26 | +export const markdownComponents: Components = { |
| 27 | + // 代码渲染：区分行内代码和代码块 |
| 28 | + code: ({ className, children, ...props }) => { |
| 29 | + // 行内代码：单反引号，没有 className |
| 30 | + if (!className) { |
| 31 | + return ( |
| 32 | + <code |
| 33 | + className="px-1.5 py-0.5 bg-gray-200 text-gray-800 rounded text-sm font-mono" |
| 34 | + {...props} |
| 35 | + > |
| 36 | + {children} |
| 37 | + </code> |
| 38 | + ); |
| 39 | + } |
| 40 | + |
| 41 | + // 代码块：三反引号，使用语法高亮 |
| 42 | + return ( |
| 43 | + <SyntaxHighlight className={className} {...props}> |
| 44 | + {children} |
| 45 | + </SyntaxHighlight> |
| 46 | + ); |
| 47 | + }, |
| 48 | + |
| 49 | + // pre 标签配置 |
| 50 | + pre: ({ children, className, ...props }) => ( |
| 51 | + <pre className={`rounded ${className || ''}`} {...props}> |
| 52 | + {children} |
| 53 | + </pre> |
| 54 | + ), |
| 55 | + |
| 56 | + // 段落 |
| 57 | + p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>, |
| 58 | + |
| 59 | + // 标题 |
| 60 | + h1: ({ children }) => <h1 className="text-2xl font-bold mb-2 text-gray-900">{children}</h1>, |
| 61 | + h2: ({ children }) => <h2 className="text-xl font-semibold mb-2 text-gray-800">{children}</h2>, |
| 62 | + h3: ({ children }) => <h3 className="text-lg font-medium mb-1.5 text-gray-700">{children}</h3>, |
| 63 | + h4: ({ children }) => <h4 className="text-base font-medium mb-1 text-gray-700">{children}</h4>, |
| 64 | + h5: ({ children }) => <h5 className="text-sm font-medium mb-1 text-gray-600">{children}</h5>, |
| 65 | + h6: ({ children }) => <h6 className="text-sm font-normal mb-1 text-gray-600">{children}</h6>, |
| 66 | + |
| 67 | + // 列表 |
| 68 | + ul: ({ children }) => <ul className="list-disc pl-4 mb-2 space-y-1">{children}</ul>, |
| 69 | + ol: ({ children }) => <ol className="list-decimal pl-4 mb-2 space-y-1">{children}</ol>, |
| 70 | + li: ({ children }) => <li className="text-sm">{children}</li>, |
| 71 | + |
| 72 | + // 强调 |
| 73 | + strong: ({ children }) => <strong className="font-semibold text-gray-800">{children}</strong>, |
| 74 | + em: ({ children }) => <em className="italic text-gray-700">{children}</em>, |
| 75 | + |
| 76 | + // 引用 |
| 77 | + blockquote: ({ children }) => ( |
| 78 | + <blockquote className="border-l-4 border-gray-300 pl-4 italic text-gray-600 my-2"> |
| 79 | + {children} |
| 80 | + </blockquote> |
| 81 | + ), |
| 82 | + |
| 83 | + // 链接 - 带 XSS 防护 |
| 84 | + a: ({ children, href }) => { |
| 85 | + const isSafe = href && isValidUrl(href); |
| 86 | + |
| 87 | + return ( |
| 88 | + <a |
| 89 | + href={isSafe ? href : '#'} |
| 90 | + className="text-blue-600 hover:text-blue-700 underline text-[12px] font-medium" |
| 91 | + target="_blank" |
| 92 | + rel="noopener noreferrer" |
| 93 | + > |
| 94 | + {children} |
| 95 | + </a> |
| 96 | + ); |
| 97 | + }, |
| 98 | + |
| 99 | + // 表格 |
| 100 | + table: ({ children }) => ( |
| 101 | + <table className="border-collapse border border-gray-300 my-2 w-full">{children}</table> |
| 102 | + ), |
| 103 | + thead: ({ children }) => <thead className="bg-gray-100">{children}</thead>, |
| 104 | + tbody: ({ children }) => <tbody>{children}</tbody>, |
| 105 | + tr: ({ children }) => <tr className="border-b border-gray-300">{children}</tr>, |
| 106 | + th: ({ children }) => ( |
| 107 | + <th className="border border-gray-300 px-3 py-2 text-left font-semibold">{children}</th> |
| 108 | + ), |
| 109 | + td: ({ children }) => <td className="border border-gray-300 px-3 py-2">{children}</td>, |
| 110 | +}; |
| 111 | + |
| 112 | +/** |
| 113 | + * 紧凑版的 ReactMarkdown 组件配置（用于头脑风暴等空间受限的场景） |
| 114 | + */ |
| 115 | +export const compactMarkdownComponents: Components = { |
| 116 | + code: markdownComponents.code, |
| 117 | + pre: markdownComponents.pre, |
| 118 | + |
| 119 | + p: ({ children }) => <p className="mb-1 last:mb-0 text-[12px] leading-relaxed">{children}</p>, |
| 120 | + |
| 121 | + h1: ({ children }) => ( |
| 122 | + <h1 className="text-[12px] font-bold mb-0.5 text-gray-900 leading-tight">{children}</h1> |
| 123 | + ), |
| 124 | + h2: ({ children }) => ( |
| 125 | + <h2 className="text-[12px] font-semibold mb-0.5 text-gray-800 leading-tight">{children}</h2> |
| 126 | + ), |
| 127 | + h3: ({ children }) => ( |
| 128 | + <h3 className="text-[12px] font-medium mb-0.5 text-gray-700 leading-tight">{children}</h3> |
| 129 | + ), |
| 130 | + h4: ({ children }) => ( |
| 131 | + <h4 className="text-[12px] font-normal mb-0.5 text-gray-700 leading-tight">{children}</h4> |
| 132 | + ), |
| 133 | + h5: ({ children }) => ( |
| 134 | + <h5 className="text-[11px] font-normal mb-0.5 text-gray-600 leading-tight">{children}</h5> |
| 135 | + ), |
| 136 | + h6: ({ children }) => ( |
| 137 | + <h6 className="text-[11px] font-normal mb-0.5 text-gray-600 leading-tight">{children}</h6> |
| 138 | + ), |
| 139 | + |
| 140 | + ul: ({ children }) => <ul className="list-disc pl-3 mb-1 space-y-0.5 text-[12px]">{children}</ul>, |
| 141 | + ol: ({ children }) => ( |
| 142 | + <ol className="list-decimal pl-3 mb-1 space-y-0.5 text-[12px]">{children}</ol> |
| 143 | + ), |
| 144 | + li: ({ children }) => <li className="text-[12px] leading-relaxed">{children}</li>, |
| 145 | + |
| 146 | + strong: ({ children }) => <strong className="font-semibold text-gray-800">{children}</strong>, |
| 147 | + em: ({ children }) => <em className="italic text-gray-700">{children}</em>, |
| 148 | + |
| 149 | + blockquote: ({ children }) => ( |
| 150 | + <blockquote className="border-l-2 border-gray-300 pl-2 italic text-gray-600 text-[12px] my-1 bg-gray-50/50 py-0.5 rounded-r"> |
| 151 | + {children} |
| 152 | + </blockquote> |
| 153 | + ), |
| 154 | + |
| 155 | + // 链接 - 带 XSS 防护 |
| 156 | + a: ({ children, href }) => { |
| 157 | + const isSafe = href && isValidUrl(href); |
| 158 | + |
| 159 | + return ( |
| 160 | + <a |
| 161 | + href={isSafe ? href : '#'} |
| 162 | + className="text-blue-600 hover:text-blue-700 underline text-[12px] font-medium" |
| 163 | + target="_blank" |
| 164 | + rel="noopener noreferrer" |
| 165 | + > |
| 166 | + {children} |
| 167 | + </a> |
| 168 | + ); |
| 169 | + }, |
| 170 | + |
| 171 | + table: ({ children }) => ( |
| 172 | + <table className="border-collapse border border-gray-300 text-[12px] my-1.5 rounded overflow-hidden shadow-sm"> |
| 173 | + {children} |
| 174 | + </table> |
| 175 | + ), |
| 176 | + thead: ({ children }) => <thead className="bg-gray-100">{children}</thead>, |
| 177 | + tbody: ({ children }) => <tbody>{children}</tbody>, |
| 178 | + tr: ({ children }) => <tr className="border-b border-gray-300">{children}</tr>, |
| 179 | + th: ({ children }) => ( |
| 180 | + <th className="border border-gray-300 px-2 py-1 text-left font-semibold">{children}</th> |
| 181 | + ), |
| 182 | + td: ({ children }) => <td className="border border-gray-300 px-2 py-1">{children}</td>, |
| 183 | +}; |
0 commit comments