| | |
| | | {children} |
| | | </code> |
| | | ); |
| | | } |
| | | }, |
| | | // 添加表格样式组件 |
| | | table: ({ node, ...props }) => ( |
| | | <div className="overflow-x-auto my-4 rounded-lg border border-gray-100 shadow-sm"> |
| | | <table className="min-w-full divide-y divide-gray-100" {...props} /> |
| | | </div> |
| | | ), |
| | | thead: ({ node, ...props }) => ( |
| | | <thead className="bg-gray-50/70" {...props} /> |
| | | ), |
| | | th: ({ node, children, ...props }) => ( |
| | | <th className="px-4 py-3 text-sm font-semibold text-gray-700 border-b border-gray-100 text-center" {...props}> |
| | | {children} |
| | | </th> |
| | | ), |
| | | td: ({ node, ...props }) => ( |
| | | <td className="px-4 py-3 text-sm text-gray-600 border-t border-gray-100 text-center" {...props} /> |
| | | ), |
| | | tr: ({ node, ...props }) => ( |
| | | <tr className="hover:bg-gray-50/70 transition-colors duration-150" {...props} /> |
| | | ) |
| | | }} |
| | | > |
| | | {mainContent} |