From a48b2ac7958cf2eba2f5e9e5d9819b033c7a4071 Mon Sep 17 00:00:00 2001 From: Minidoracat Date: Sat, 14 Jun 2025 10:54:51 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E8=AA=BF=E6=95=B4=E5=B7=A5?= =?UTF-8?q?=E4=BD=9C=E5=8D=80=E9=AB=98=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/static/css/audio-management.css | 12 +++++- .../web/static/css/styles.css | 4 +- .../web/templates/feedback.html | 43 +++++++++++++++---- 3 files changed, 48 insertions(+), 11 deletions(-) diff --git a/src/mcp_feedback_enhanced/web/static/css/audio-management.css b/src/mcp_feedback_enhanced/web/static/css/audio-management.css index cdbf443..c10ec86 100644 --- a/src/mcp_feedback_enhanced/web/static/css/audio-management.css +++ b/src/mcp_feedback_enhanced/web/static/css/audio-management.css @@ -266,14 +266,24 @@ border-radius: 4px; } +/* 覆蓋 Bootstrap btn-danger 的預設樣式,使其符合深色主題 */ +.audio-delete-btn.btn-danger { + background: var(--bg-secondary); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + .audio-play-btn:hover { background: var(--success-color); border-color: var(--success-color); + color: white; } -.audio-delete-btn:hover { +.audio-delete-btn:hover, +.audio-delete-btn.btn-danger:hover { background: var(--error-color); border-color: var(--error-color); + color: white; } /* ===== 空狀態樣式 ===== */ diff --git a/src/mcp_feedback_enhanced/web/static/css/styles.css b/src/mcp_feedback_enhanced/web/static/css/styles.css index 0d67c00..69eb5df 100644 --- a/src/mcp_feedback_enhanced/web/static/css/styles.css +++ b/src/mcp_feedback_enhanced/web/static/css/styles.css @@ -942,6 +942,7 @@ body { max-width: 100%; overflow: hidden; gap: 0; + min-height: 0; /* 允許內容自然收縮 */ } .main-content-area { @@ -949,6 +950,7 @@ body { display: flex; flex-direction: column; min-width: 0; + min-height: 0; /* 允許內容自然收縮 */ padding: 20px; overflow: hidden; transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); @@ -1015,7 +1017,7 @@ body { width: 100%; max-width: 100%; box-sizing: border-box; - min-height: 600px; + min-height: 0; /* 移除固定高度,使用 flex 自適應 */ } .tab-content.active { diff --git a/src/mcp_feedback_enhanced/web/templates/feedback.html b/src/mcp_feedback_enhanced/web/templates/feedback.html index 66ec327..b291997 100644 --- a/src/mcp_feedback_enhanced/web/templates/feedback.html +++ b/src/mcp_feedback_enhanced/web/templates/feedback.html @@ -67,6 +67,8 @@ flex: 1 !important; min-width: 300px; max-width: 50%; + display: flex; + flex-direction: column; overflow: hidden; /* 確保容器不超出範圍 */ } @@ -76,14 +78,15 @@ } #tab-combined.active.combined-horizontal .combined-summary { - height: calc(100vh - 200px); - max-height: 600px; + flex: 1; /* 讓摘要區域自動填滿剩餘空間 */ + display: flex; + flex-direction: column; overflow: hidden; /* 確保摘要容器不超出範圍 */ } #tab-combined.active.combined-horizontal #combinedSummaryContent { - height: 100%; - min-height: 400px; + flex: 1; /* 讓內容區域自動填滿摘要容器 */ + min-height: 200px; /* 降低最小高度 */ overflow-y: auto; /* 添加垂直滾動條 */ overflow-x: hidden; /* 隱藏水平滾動條 */ } @@ -103,7 +106,8 @@ #tab-combined.active.combined-vertical .combined-section:first-child { flex: 1 !important; min-height: 200px; - max-height: 400px; + display: flex; + flex-direction: column; overflow: hidden; /* 確保容器不超出範圍 */ } @@ -113,14 +117,15 @@ } #tab-combined.active.combined-vertical .combined-summary { - height: 300px; - max-height: 400px; + flex: 1; /* 讓摘要區域自動填滿剩餘空間 */ + display: flex; + flex-direction: column; overflow: hidden; /* 確保摘要容器不超出範圍 */ } #tab-combined.active.combined-vertical #combinedSummaryContent { - height: 100%; - min-height: 200px; + flex: 1; /* 讓內容區域自動填滿摘要容器 */ + min-height: 150px; /* 降低最小高度 */ overflow-y: auto; /* 添加垂直滾動條 */ overflow-x: hidden; /* 隱藏水平滾動條 */ } @@ -135,6 +140,7 @@ flex-direction: column; gap: 16px; flex: 1; + height: 100%; /* 確保充滿父容器 */ } /* 工作區基礎樣式 */ @@ -146,6 +152,25 @@ margin-bottom: 16px; } + /* 確保 AI 摘要區域能夠自動擴展 */ + .combined-section .section-header { + flex-shrink: 0; /* 標題區域不收縮 */ + } + + .combined-summary { + display: flex; + flex-direction: column; + flex: 1; /* 讓摘要容器自動填滿剩餘空間 */ + min-height: 0; /* 允許收縮 */ + } + + #combinedSummaryContent { + flex: 1; /* 讓內容區域自動填滿摘要容器 */ + min-height: 150px; /* 設定合理的最小高度 */ + overflow-y: auto; + overflow-x: hidden; + } + .combined-section-title { font-size: 16px; font-weight: 600;