diff --git a/docker-compose.yml b/docker-compose.yml index 887501d..e19d3b9 100644 --- a/docker-compose.yml +++ b/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' diff --git a/package.json b/package.json index 518b468..0145b38 100644 --- a/package.json +++ b/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" diff --git a/src/views/UniversalAnalysisView.vue b/src/views/UniversalAnalysisView.vue index 0db2b47..5aec469 100644 --- a/src/views/UniversalAnalysisView.vue +++ b/src/views/UniversalAnalysisView.vue @@ -1,9 +1,17 @@ @@ -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; + } }