Commit e11ffc0e authored by 水玉婷's avatar 水玉婷
Browse files

feat:优化md表格样式

parent 6fb110ed
...@@ -420,11 +420,6 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = { ...@@ -420,11 +420,6 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = {
} }
}; };
// 发送音频消息的快捷函数(保持向后兼容)
const sendAudioMessage = async (audioUrl: string, durationTime?: number) => {
await sendMessage('audio', { audioUrl, durationTime });
};
// 重新连接SSE // 重新连接SSE
const reconnectSSE = (newDialogSessionId: string) => { const reconnectSSE = (newDialogSessionId: string) => {
console.log('开始重连SSE,新的dialogSessionId:', newDialogSessionId); console.log('开始重连SSE,新的dialogSessionId:', newDialogSessionId);
......
...@@ -463,6 +463,27 @@ li { ...@@ -463,6 +463,27 @@ li {
} }
} }
} }
// 确保表头不换行
.data-table {
th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 80px;
height: 40px;
vertical-align: middle;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 80px;
height: 35px;
vertical-align: middle;
}
}
.data-table { .data-table {
width: auto; width: auto;
...@@ -1067,14 +1088,43 @@ li { ...@@ -1067,14 +1088,43 @@ li {
} }
} }
// 表格容器,添加滚动条支持
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
font-size:0;
// 滚动条样式
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #a8a8a8;
}
}
}
// 专门为markdown表格添加的样式 // 专门为markdown表格添加的样式
.markdown-table { .markdown-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 12px 0; margin: 12px 0 0;
font-size: 13px; font-size: 13px;
background-color: @white; background-color: @white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width: 100%;
th { th {
background-color: @blue-light-2; background-color: @blue-light-2;
...@@ -1082,12 +1132,22 @@ li { ...@@ -1082,12 +1132,22 @@ li {
color: @gray-7; color: @gray-7;
border-bottom: 2px solid @primary-color; border-bottom: 2px solid @primary-color;
padding: 10px 12px; padding: 10px 12px;
// 表头单元格不换行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 80px;
height: 40px;
vertical-align: middle;
} }
td { td {
padding: 8px 12px; padding: 8px 12px;
border: 1px solid @gray-3; border: 1px solid @gray-3;
line-height: 1.4; line-height: 1.4;
min-width: 80px;
height: 35px;
vertical-align: middle;
} }
tr:nth-child(even) { tr:nth-child(even) {
......
...@@ -39,7 +39,8 @@ const processMarkdownFormat = (text: string): string => { ...@@ -39,7 +39,8 @@ const processMarkdownFormat = (text: string): string => {
* @returns 表格HTML * @returns 表格HTML
*/ */
const generateCompleteTable = (header: string[], alignments: string[], dataRows: string[][]): string => { const generateCompleteTable = (header: string[], alignments: string[], dataRows: string[][]): string => {
let tableHtml = '<table class="markdown-table" style="border-collapse: collapse; width: 100%; border: 1px solid #ddd; margin: 10px 0;">\n'; let tableHtml = '<div class="table-container">\n';
tableHtml += ' <table class="markdown-table" style="border-collapse: collapse; width: auto; min-width: 100%; border: 1px solid #ddd;">\n';
// 表头 // 表头
tableHtml += ' <thead>\n <tr>\n'; tableHtml += ' <thead>\n <tr>\n';
...@@ -65,7 +66,8 @@ const generateCompleteTable = (header: string[], alignments: string[], dataRows: ...@@ -65,7 +66,8 @@ const generateCompleteTable = (header: string[], alignments: string[], dataRows:
tableHtml += ' </tbody>\n'; tableHtml += ' </tbody>\n';
} }
tableHtml += '</table>'; tableHtml += ' </table>\n';
tableHtml += '</div>';
return tableHtml; return tableHtml;
}; };
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment