From d841b139dfef9245058ec8dfafeba06006f06389 Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Fri, 5 Jun 2026 20:46:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=AC=E5=91=8A=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E5=B8=83=E5=B1=80=EF=BC=8C=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E6=9C=80=E5=A4=A7=E5=AE=BD=E5=BA=A6=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 max-width: 900px 限制，使用全宽布局
- 添加内容自动换行支持
- 优化图片和表格的响应式显示
- 与列表页保持一致的视觉宽度

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../views/AnnouncementDetailView.vue          | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/announcement/views/AnnouncementDetailView.vue b/frontend/src/features/announcement/views/AnnouncementDetailView.vue
index d6439c5..084f05e 100644
--- a/frontend/src/features/announcement/views/AnnouncementDetailView.vue
+++ b/frontend/src/features/announcement/views/AnnouncementDetailView.vue
@@ -103,8 +103,6 @@ function getCategoryLabel(category: string) {
 .announcement-detail-page {
   display: grid;
   gap: 20px;
-  max-width: 900px;
-  margin: 0 auto;
 }
 
 .detail-header {
@@ -190,9 +188,12 @@ function getCategoryLabel(category: string) {
 }
 
 .detail-content {
+  max-width: 100%;
   color: #334155;
   font-size: 16px;
   line-height: 1.8;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .detail-content :deep(h1),
@@ -279,10 +280,32 @@ function getCategoryLabel(category: string) {
 
 .detail-content :deep(img) {
   max-width: 100%;
+  height: auto;
   margin: 20px 0;
   border-radius: 8px;
 }
 
+.detail-content :deep(table) {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  overflow-x: auto;
+  display: block;
+}
+
+.detail-content :deep(table th),
+.detail-content :deep(table td) {
+  padding: 12px;
+  border: 1px solid #e6eaf2;
+  text-align: left;
+}
+
+.detail-content :deep(table th) {
+  background: #f8fafc;
+  font-weight: 700;
+}
+
 @media (max-width: 720px) {
   .announcement-detail-card {
     padding: 24px 20px;