feat: 改进文档预览组件的响应式设计

- 优化doc-content组件抽屉宽度，在小屏幕上自适应调整
- 增强document-preview组件的响应式布局，防止内容溢出
- 添加媒体查询支持，提升移动端用户体验
- 修复DOCX文档预览在不同屏幕尺寸下的显示问题

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;
+  }
 }
 
 // 代码块样式

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) {