表格优化样式

src/style.css

@@ -77,3 +77,32 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* 表格整体样式 */
+table {
+  border-collapse: collapse; /* 合并相邻单元格的边框 */
+  width: 100%; /* 表格宽度为父容器的 100% */
+  margin-bottom: 1rem; /* 表格底部外边距 */
+  color: #212529; /* 表格文字颜色 */
+}
+
+/* 表头单元格样式 */
+table th {
+  padding: 0.75rem; /* 内边距 */
+  border: 2px solid #dee2e6; /* 边框宽度、样式和颜色 */
+  background-color: #f8f9fa; /* 表头背景颜色 */
+  text-align: left; /* 文字左对齐 */
+  font-weight: bold; /* 文字加粗 */
+}
+
+/* 表格数据单元格样式 */
+table td {
+  padding: 0.75rem; /* 内边距 */
+  border: 1px solid #dee2e6; /* 边框宽度、样式和颜色 */
+  text-align: left; /* 文字左对齐 */
+}
+
+/* 鼠标悬停时表格行的样式 */
+table tr:hover {
+  background-color: #f2f2f2; /* 鼠标悬停时的背景颜色 */
+}

src/views/chat.vue

@@ -37,7 +37,7 @@ const sessionId = ref(localStorage.getItem('sessionId') || {});
 const add = async () => {
     try {
         const result = await axios.post(
-            "http://asp69f.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
+            "http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions",
             {},
             {
                 headers: {
@@ -135,7 +135,7 @@ const sendMessage = async () => {
 
     try {
         // 调用API获取回复
-        const response = await fetch("http://asp69f.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
+        const response = await fetch("http://wnxvxx.natappfree.cc/api/v1/chats/8b37cd9cf0c811efa4210242ac120003/completions", {
             method: 'POST',
             headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ragflow-hkNjEwYjcwZjBlMDExZWZiYjYzMDI0Mm' },
             body: JSON.stringify({ question: content, stream: false, session_id: sessionId.value   })
@@ -308,11 +308,30 @@ onMounted(async () => {
 
 
 <style scoped>
+table{
+    border-color: black
+}
 /* 使用更具体的选择器 */
 .message-bubble .message-content .thinking-content {
     color: #c8c4c4;
     font-style: italic;
 }
+/* 新增表格样式 */
+.message-bubble .message-content table {
+    border-collapse: collapse; /* 合并边框 */
+    width: 100%; /* 表格宽度为 100% */
+}
+
+.message-bubble .message-content th,
+.message-bubble .message-content td {
+    border: 1px solid #e0e0e0; /* 单元格边框 */
+    padding: 8px; /* 单元格内边距 */
+    text-align: left; /* 文本左对齐 */
+}
+
+.message-bubble .message-content th {
+    background-color: #f1f3f5; /* 表头背景颜色 */
+}
 /* 其他样式保持不变 */
 .message-item.bot {
     justify-content: flex-start; /* 让机器人消息靠左对齐 */
@@ -528,4 +547,7 @@ onMounted(async () => {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     text-align: center;
 }
+
+
+
 </style>