From da347c21082d4b255ca4830a8f286b92f30f5099 Mon Sep 17 00:00:00 2001
From: Minidoracat <minidora0702@gmail.com>
Date: Fri, 6 Jun 2025 21:51:36 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=A2=9E=E5=9C=96?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E5=82=B3=E7=B5=84=E4=BB=B6=E6=A8=A3=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E5=8C=85=E5=90=AB=E4=B8=8A=E5=82=B3=E5=8D=80=E5=9F=9F?=
 =?UTF-8?q?=E3=80=81=E9=A0=90=E8=A6=BD=E9=A0=85=E7=9B=AE=E5=8F=8A=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E8=A1=8C=E7=9A=84=E6=A8=A3=E5=BC=8F=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E4=BD=BF=E7=94=A8=E8=80=85=E9=AB=94=E9=A9=97=E8=88=87?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E7=BE=8E=E8=A7=80=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/static/css/styles.css                 | 326 ++++++++++++++++++
 1 file changed, 326 insertions(+)

diff --git a/src/mcp_feedback_enhanced/web/static/css/styles.css b/src/mcp_feedback_enhanced/web/static/css/styles.css
index dd59562..e332926 100644
--- a/src/mcp_feedback_enhanced/web/static/css/styles.css
+++ b/src/mcp_feedback_enhanced/web/static/css/styles.css
@@ -934,4 +934,330 @@ body {
         height: 200px;
         font-size: 12px;
     }
+}
+
+/* ===== 圖片上傳組件樣式 ===== */
+
+/* 圖片上傳區域基礎樣式 */
+.image-upload-area {
+    border: 2px dashed var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-tertiary);
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.image-upload-area:hover {
+    border-color: var(--accent-color);
+    background: rgba(0, 122, 204, 0.05);
+}
+
+/* 拖放狀態樣式 */
+.image-upload-area.dragover {
+    border-color: var(--accent-color) !important;
+    background: rgba(0, 122, 204, 0.1) !important;
+    transform: scale(1.02);
+    box-shadow: 0 4px 12px rgba(0, 122, 204, 0.2);
+}
+
+/* 上傳提示文字 */
+.image-upload-area > div:first-child {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 12px;
+}
+
+.image-upload-area > div:first-child small {
+    color: var(--text-secondary);
+    opacity: 0.8;
+    font-size: 12px;
+}
+
+/* 禁用狀態 */
+.image-upload-area.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
+/* 圖片預覽容器 */
+.image-preview-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 12px;
+    justify-content: center;
+}
+
+.image-preview-container:empty {
+    display: none;
+}
+
+/* 圖片預覽項目 */
+.image-preview-item {
+    position: relative;
+    display: inline-block;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+}
+
+.image-preview-item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.image-preview-item img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    display: block;
+}
+
+/* 圖片刪除按鈕 */
+.image-remove-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--error-color);
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.image-remove-btn:hover {
+    background: #d32f2f;
+    transform: scale(1.1);
+}
+
+/* 圖片設定區域樣式 */
+.image-settings-details {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    margin-bottom: 8px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.image-settings-details:hover {
+    border-color: rgba(0, 122, 204, 0.5);
+    box-shadow: 0 2px 8px rgba(0, 122, 204, 0.1);
+}
+
+.image-settings-summary {
+    padding: 8px 12px;
+    background: var(--bg-secondary);
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+    border: none;
+    outline: none;
+    transition: all 0.3s ease;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    user-select: none;
+}
+
+.image-settings-summary:hover {
+    background: var(--surface-color);
+    color: var(--accent-color);
+}
+
+.image-settings-summary::-webkit-details-marker {
+    display: none;
+}
+
+/* 箭頭指示器 */
+.image-settings-summary::after {
+    content: '▼';
+    font-size: 10px;
+    color: var(--text-secondary);
+    transition: all 0.3s ease;
+    transform-origin: center;
+    display: inline-block;
+    margin-left: auto;
+}
+
+.image-settings-summary:hover::after {
+    color: var(--accent-color);
+}
+
+/* 展開狀態的箭頭 */
+.image-settings-details[open] .image-settings-summary::after {
+    transform: rotate(180deg);
+    color: var(--accent-color);
+}
+
+/* 展開狀態的 summary 樣式 */
+.image-settings-details[open] .image-settings-summary {
+    background: var(--surface-color);
+    color: var(--accent-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.image-settings-content {
+    padding: 12px;
+    background: var(--bg-tertiary);
+    animation: slideDown 0.3s ease-out;
+}
+
+/* 展開內容的滑入動畫 */
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 圖片設定行 */
+.image-setting-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    gap: 12px;
+}
+
+.image-setting-row:last-child {
+    margin-bottom: 0;
+}
+
+.image-setting-label {
+    font-size: 12px;
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* 圖片設定下拉選單 */
+.image-setting-select {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 12px;
+    min-width: 100px;
+    transition: border-color 0.3s ease;
+}
+
+.image-setting-select:focus {
+    outline: none;
+    border-color: var(--accent-color);
+}
+
+/* 自定義複選框樣式 */
+.image-setting-checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-primary);
+}
+
+.image-setting-checkbox {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--border-color);
+    border-radius: 3px;
+    background: var(--bg-primary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.image-setting-checkbox:checked {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.image-setting-checkbox:checked::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.image-setting-checkbox:focus {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+/* 圖片設定幫助文字 */
+.image-setting-help {
+    color: var(--text-secondary);
+    font-size: 11px;
+    margin-left: 8px;
+}
+
+.image-setting-help-text {
+    color: var(--text-secondary);
+    font-size: 11px;
+    line-height: 1.4;
+    margin-top: 8px;
+    padding: 8px;
+    background: rgba(0, 122, 204, 0.05);
+    border-radius: 4px;
+    border-left: 3px solid var(--accent-color);
+}
+
+/* 相容性提示樣式 */
+.compatibility-hint {
+    background: rgba(255, 152, 0, 0.1);
+    border: 1px solid var(--warning-color);
+    border-radius: 6px;
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--warning-color);
+}
+
+.compatibility-hint-btn {
+    background: var(--warning-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 11px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    font-weight: 500;
+}
+
+.compatibility-hint-btn:hover {
+    background: #f57c00;
 }
\ No newline at end of file