update

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.3.4
+    image: tradus-web:1.3.5
     container_name: tradus-web
     ports:
       - '6000:80'

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "marked": "^15.0.11",
+    "mermaid": "^11.6.0",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

src/views/UniversalAnalysisView.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { http } from '../services/api'
 import { marked } from 'marked'
 
+// 配置marked选项
+onMounted(() => {
+  marked.setOptions({
+    breaks: true,
+    gfm: true, // GitHub风格Markdown，支持表格等扩展语法
+  })
+})
+
 // 获取路由参数，确定分析类型
 const route = useRoute()
 const analysisType = computed(() => (route.params.type as string) || 'crypto')
@@ -282,7 +290,15 @@ const parsedContent = computed(() => {
   if (!analysisContent.value || analysisContent.value.startsWith('错误:')) {
     return ''
   }
-  return marked(analysisContent.value)
+
+  // 处理markdown内容
+  let html = marked(analysisContent.value) as string
+
+  // 将表格包装在div中以提供更好的滚动支持
+  html = html.replace(/<table>/g, '<div class="table-container"><table>')
+  html = html.replace(/<\/table>/g, '</table></div>')
+
+  return html
 })
 </script>
 
@@ -1111,24 +1127,49 @@ const parsedContent = computed(() => {
   background-color: transparent;
 }
 
+/* 表格容器样式 */
+.markdown-content .table-container {
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+}
+
 .markdown-content table {
   width: 100%;
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
   border-spacing: 0;
   border-collapse: collapse;
-  overflow: auto;
+  max-width: 100%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--color-border);
+  overflow-x: auto;
+  display: block;
 }
 
 .markdown-content table th,
 .markdown-content table td {
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
   border: 1px solid var(--color-border);
+  text-align: left;
+  min-width: 100px; /* 防止列过窄 */
+  vertical-align: top;
+  white-space: normal; /* 单元格内容可以换行 */
+  word-break: break-word;
 }
 
 .markdown-content table th {
   font-weight: 600;
   background-color: var(--color-bg-secondary);
+  white-space: nowrap; /* 表头不换行 */
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.markdown-content table tr {
+  background-color: var(--color-bg-primary);
+  border-top: 1px solid var(--color-border);
 }
 
 .markdown-content table tr:nth-child(2n) {
@@ -1169,6 +1210,15 @@ const parsedContent = computed(() => {
   .markdown-content h6 {
     font-size: 1.1rem;
   }
+
+  .markdown-content table {
+    font-size: 0.9rem;
+  }
+
+  .markdown-content table th,
+  .markdown-content table td {
+    padding: 0.6rem 0.75rem;
+  }
 }
 
 @media (max-width: 480px) {
@@ -1185,5 +1235,15 @@ const parsedContent = computed(() => {
   .markdown-content h2 {
     padding-bottom: 0.2em;
   }
+
+  .markdown-content table {
+    font-size: 0.85rem;
+  }
+
+  .markdown-content table th,
+  .markdown-content table td {
+    padding: 0.5rem 0.6rem;
+    min-width: 80px;
+  }
 }
 </style>