From fb9e70fd1632b62194943b3055f0883501feecf0 Mon Sep 17 00:00:00 2001
From: "qunbo.guo" <“1453460532@qq.com”>
Date: Wed, 11 Mar 2026 10:39:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B9=E8=BF=9B=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E7=BB=84=E4=BB=B6=E7=9A=84=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化doc-content组件抽屉宽度，在小屏幕上自适应调整
- 增强document-preview组件的响应式布局，防止内容溢出
- 添加媒体查询支持，提升移动端用户体验
- 修复DOCX文档预览在不同屏幕尺寸下的显示问题
---
 frontend/src/components/doc-content.vue      | 11 +++++++-
 frontend/src/components/document-preview.vue | 28 ++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/doc-content.vue b/frontend/src/components/doc-content.vue
index 29a7d1942..cc51c6f5d 100644
--- a/frontend/src/components/doc-content.vue
+++ b/frontend/src/components/doc-content.vue
@@ -849,7 +849,16 @@ const handleDetailsScroll = () => {
 @import "./css/markdown.less";
 
 :deep(.t-drawer .t-drawer__content-wrapper) {
-  width: 654px !important;
+  width: min(654px, 85vw) !important; // 减少到85%视口宽度，给左侧留更多空间
+  max-width: 654px !important;
+}
+
+// 在小屏幕上进一步调整
+@media (max-width: 768px) {
+  :deep(.t-drawer .t-drawer__content-wrapper) {
+    width: 90vw !important; // 小屏幕上使用90%宽度
+    max-width: none !important;
+  }
 }
 
 // 代码块样式
diff --git a/frontend/src/components/document-preview.vue b/frontend/src/components/document-preview.vue
index 0c6f54962..760b4dfc8 100644
--- a/frontend/src/components/document-preview.vue
+++ b/frontend/src/components/document-preview.vue
@@ -670,6 +670,34 @@ onUnmounted(() => {
 
 :deep(.docx-preview-wrapper) {
   padding: 20px;
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto; // 如果内容过宽，允许水平滚动而不是溢出
+  
+  // 约束所有子元素的宽度
+  * {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  
+  // 特别处理表格
+  table {
+    width: 100%;
+    table-layout: auto;
+    word-wrap: break-word;
+  }
+  
+  // 处理图片
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  // 处理可能的固定宽度元素
+  [style*="width"] {
+    max-width: 100% !important;
+  }
 }
 
 :deep(.vue-office-pptx) {