md格式解析优化

hongjli

2025-05-26 713343c1222125e85bbe243f0316a3647c07d96b

md格式解析优化

 src/app/chat/page.tsx

@@ -997,6 +997,49 @@
        width: 100% !important;
        contain: none !important;
      }
      
      /* 优化表格第一列不换行 */
      table td:first-child, table th:first-child {
        white-space: nowrap !important;
      }
      
      /* 所有表格单元格文本居中且不换行 */
      table td, table th {
        text-align: center !important;
        white-space: nowrap !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        min-width: fit-content !important;
      }
      
      /* 特别强化表头不换行 */
      table thead th {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow: visible !important;
        text-overflow: clip !important;
        min-width: max-content !important;
      }
      
      /* 确保表格能够水平滚动 */
      .overflow-x-auto {
        max-width: 100%;
        scrollbar-width: thin;
        overflow-x: auto !important;
      }
      
      /* 表格本身不应该有固定宽度限制 */
      .min-w-full {
        min-width: 100%;
        width: auto;
        table-layout: auto !important;
      }
      
      /* 防止表格容器压缩内容 */
      .divide-y {
        width: max-content !important;
        min-width: 100% !important;
      }
    `;
    document.head.appendChild(style);

@@ -1226,20 +1269,20 @@
                                            },
                                            // 添加表格样式组件
                                            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 className="overflow-x-auto my-4 rounded-lg border border-gray-100 shadow-sm" style={{ width: '100%', minWidth: '100%' }}>
                                                <table className="min-w-full divide-y divide-gray-100" style={{ tableLayout: 'auto', width: 'max-content', minWidth: '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}>
                                              <th className="px-4 py-3 text-sm font-semibold text-gray-700 border-b border-gray-100 text-center" style={{ whiteSpace: 'nowrap', minWidth: 'max-content' }} {...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} />
                                              <td className="px-4 py-3 text-sm text-gray-600 border-t border-gray-100 text-center" style={{ whiteSpace: 'nowrap' }} {...props} />
                                            ),
                                            tr: ({ node, ...props }) => (
                                              <tr className="hover:bg-gray-50/70 transition-colors duration-150" {...props} />