fix: 清理系統頁舊色碼殘留

2026-05-17 21:29:36 +08:00
parent f7726bea3f
commit 14d645b4b1
4 changed files with 51 additions and 32 deletions
--- a/config.py
+++ b/config.py
@@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.153"
+SYSTEM_VERSION = "V10.154"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示

--- a/templates/cicd_dashboard.html
+++ b/templates/cicd_dashboard.html
@@ -291,7 +291,7 @@

        .action-btn:hover {
            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            box-shadow: none;
        }

        /* Loading State */
@@ -383,12 +383,12 @@

        .issue-detail {
            font-size: 0.85rem;
-            color: rgba(255, 255, 255, 0.7);
+            color: var(--momo-text-secondary);
        }

        .issue-suggestion {
            font-size: 0.8rem;
-            color: #17a2b8;
+            color: var(--momo-info-text);
            margin-top: 0.5rem;
        }

@@ -399,20 +399,21 @@
        .error-log-preview {
            font-family: monospace;
            font-size: 0.75rem;
-            background: rgba(0, 0, 0, 0.3);
+            background: var(--momo-bg-paper);
+            border: 1px solid var(--momo-border-light);
            padding: 0.5rem;
            border-radius: 4px;
            margin-top: 0.5rem;
            max-height: 100px;
            overflow-y: auto;
            white-space: pre-wrap;
-            color: #ff6b6b;
+            color: var(--momo-danger-text);
        }

        /* Stage Error Tooltip */
        .stage-error {
            font-size: 0.7rem;
-            color: #ff6b6b;
+            color: var(--momo-danger-text);
            margin-top: 0.5rem;
            max-width: 120px;
            word-wrap: break-word;
@@ -420,9 +421,9 @@

        /* Fix Button */
        .btn-fix {
-            background: linear-gradient(135deg, #17a2b8, #138496);
-            border: none;
-            color: white;
+            background: var(--momo-info);
+            border: 1px solid var(--momo-info);
+            color: var(--momo-text-inverse);
            padding: 0.375rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
@@ -432,7 +433,8 @@

        .btn-fix:hover {
            transform: translateY(-2px);
-            box-shadow: 0 4px 10px rgba(23, 162, 184, 0.4);
+            background: var(--momo-info-text);
+            border-color: var(--momo-info-text);
        }

        .btn-fix:disabled {
--- a/templates/code_review.html
+++ b/templates/code_review.html
@@ -51,13 +51,16 @@
    /* ── Pipeline Steps ──────────────────────────────────── */
    .pipeline { display: flex; flex-direction: column; gap: 6px; }
    .step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--momo-radius-sm); border: 1px solid var(--border); background: var(--momo-bg-paper); transition: border-color .3s; }
-    .step.running { border-color: var(--blue); background: rgba(88,166,255,.07); }
-    .step.ok      { border-color: var(--green); background: rgba(63,185,80,.06); }
-    .step.error   { border-color: var(--red); background: rgba(248,81,73,.07); }
+    .step.running { border-color: var(--blue); background: var(--momo-info-bg); }
+    .step.ok      { border-color: var(--green); background: var(--momo-success-bg); }
+    .step.error   { border-color: var(--red); background: var(--momo-danger-bg); }
    .step-num { width: 22px; height: 22px; border-radius: var(--momo-radius-sm); background: var(--momo-bg-subtle); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-    .step.ok .step-num      { background: var(--green); color: #000; }
-    .step.running .step-num { background: var(--blue); color: #000; }
-    .step.error .step-num   { background: var(--red); color: #fff; }
+    .step.ok .step-num,
+    .step.running .step-num,
+    .step.error .step-num   { color: var(--momo-text-inverse); }
+    .step.ok .step-num      { background: var(--green); }
+    .step.running .step-num { background: var(--blue); }
+    .step.error .step-num   { background: var(--red); }
    .step-info { flex: 1; min-width: 0; }
    .step-name { font-weight: 600; font-size: 13px; }
    .step-agent { font-size: 11px; color: var(--purple); }
@@ -79,14 +82,14 @@
    /* ── Findings Table ──────────────────────────────────── */
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th { padding: 8px 10px; text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
-    td { padding: 8px 10px; border-bottom: 1px solid #21262d; vertical-align: top; }
+    td { padding: 8px 10px; border-bottom: 1px solid var(--momo-border-light); vertical-align: top; }
    tr:last-child td { border-bottom: none; }
-    tr:hover td { background: rgba(255,255,255,.02); }
+    tr:hover td { background: var(--momo-bg-paper); }
    .badge-sev { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }
-    .badge-CRITICAL { background: rgba(248,81,73,.2);  color: var(--red); }
-    .badge-HIGH     { background: rgba(210,153,34,.2); color: var(--orange); }
-    .badge-MEDIUM   { background: rgba(227,179,65,.2); color: var(--yellow); }
-    .badge-LOW      { background: rgba(63,185,80,.2);  color: var(--green); }
+    .badge-CRITICAL { background: var(--momo-danger-bg);  color: var(--momo-danger-text); }
+    .badge-HIGH     { background: var(--momo-warm-clay-soft); color: var(--orange); }
+    .badge-MEDIUM   { background: var(--momo-warning-bg); color: var(--momo-warning-text); }
+    .badge-LOW      { background: var(--momo-success-bg);  color: var(--momo-success-text); }
    .badge-type { display: inline-block; padding: 1px 6px; border-radius: var(--momo-radius-sm); font-size: 10px; background: var(--momo-bg-paper); color: var(--muted); }
    code { background: var(--momo-bg-paper); padding: 1px 5px; border-radius: var(--momo-radius-xs); font-size: 12px; color: var(--momo-info-text); }

@@ -95,9 +98,9 @@
    .report-box b { color: var(--text); }

    /* ── EA Decision ─────────────────────────────────────── */
-    .ea-box { padding: 12px 14px; border-radius: 6px; border-left: 4px solid var(--blue); background: rgba(88,166,255,.06); }
-    .ea-box.critical { border-left-color: var(--red); background: rgba(248,81,73,.07); }
-    .ea-box.high     { border-left-color: var(--orange); background: rgba(210,153,34,.07); }
+    .ea-box { padding: 12px 14px; border-radius: 6px; border-left: 4px solid var(--blue); background: var(--momo-info-bg); }
+    .ea-box.critical { border-left-color: var(--red); background: var(--momo-danger-bg); }
+    .ea-box.high     { border-left-color: var(--orange); background: var(--momo-warm-clay-soft); }
    .ea-box.medium   { border-left-color: var(--yellow); }
    .ea-box.low      { border-left-color: var(--green); }
    .ea-priority { font-size: 20px; font-weight: 700; }
@@ -114,10 +117,10 @@

    /* ── Status Bar ──────────────────────────────────────── */
    #statusBar { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; display: none; }
-    #statusBar.running   { background: rgba(88,166,255,.1);  border: 1px solid var(--blue); }
-    #statusBar.completed { background: rgba(63,185,80,.1);   border: 1px solid var(--green); }
-    #statusBar.error     { background: rgba(248,81,73,.1);   border: 1px solid var(--red); }
-    #statusBar.skipped   { background: rgba(139,148,158,.1); border: 1px solid var(--border); }
+    #statusBar.running   { background: var(--momo-info-bg);  border: 1px solid var(--blue); }
+    #statusBar.completed { background: var(--momo-success-bg);   border: 1px solid var(--green); }
+    #statusBar.error     { background: var(--momo-danger-bg);   border: 1px solid var(--red); }
+    #statusBar.skipped   { background: var(--momo-bg-paper); border: 1px solid var(--border); }

    /* ── Empty state ─────────────────────────────────────── */
    .empty { text-align: center; padding: 40px; color: var(--muted); }
--- a/templates/notification_templates.html
+++ b/templates/notification_templates.html
@@ -98,7 +98,7 @@
                    </div>
                    <div class="mb-3">
                        <label class="form-label">預覽</label>
-                        <div class="border rounded p-3 bg-dark text-light" id="previewArea" style="white-space: pre-wrap; font-family: monospace;">
+                        <div class="notification-preview" id="previewArea">
                            點擊「預覽」按鈕查看效果
                        </div>
                    </div>
@@ -123,10 +123,24 @@
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-    color: #6c757d;
+    color: var(--momo-text-secondary);
    font-size: 0.875rem;
 }

+.notification-preview {
+    min-height: 116px;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--momo-border-light);
+    border-radius: var(--momo-radius-sm);
+    background: var(--momo-bg-paper);
+    color: var(--momo-text-primary);
+    font-family: var(--momo-font-mono, monospace);
+    font-size: 0.88rem;
+    line-height: 1.65;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
 .notification-template-table {
    table-layout: fixed;
    width: 100%;