diff --git a/web/src/assets/styles/views/settings-view.css b/web/src/assets/styles/views/settings-view.css index 30264d2..89cd1ce 100644 --- a/web/src/assets/styles/views/settings-view.css +++ b/web/src/assets/styles/views/settings-view.css @@ -687,7 +687,243 @@ } .rendering-settings-card .switch-group { - margin-bottom: 20px; + margin-bottom: 24px; +} + +.cache-management-card { + display: grid; + gap: 16px; +} + + + +.cache-management-hero-metrics { + display: grid; + grid-template-columns: repeat(2, minmax(92px, 1fr)); + gap: 8px; +} + +.cache-management-hero-metrics span { + min-height: 64px; + display: grid; + align-content: center; + gap: 2px; + padding: 10px 12px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background: #ffffff; +} + +.cache-management-hero-metrics strong { + color: #0f172a; + font-size: 18px; + font-weight: 850; + line-height: 1.1; +} + +.cache-management-hero-metrics small { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.cache-safety-strip { + min-height: 42px; + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background: #f8fafc; + color: #475569; + font-size: 13px; + font-weight: 700; + line-height: 1.5; +} + +.cache-safety-strip i { + flex: 0 0 auto; + font-size: 18px; +} + +.cache-scope-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.cache-scope-item { + min-width: 0; + min-height: 148px; + display: grid; + align-content: start; + gap: 8px; + padding: 16px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background: #ffffff; +} + +.cache-scope-item i { + width: 32px; + height: 32px; + display: grid; + place-items: center; + border-radius: 6px; + background: #f1f5f9; + color: #475569; + font-size: 17px; +} + +.cache-scope-item strong { + color: #0f172a; + font-size: 14px; + font-weight: 800; + line-height: 1.35; +} + +.cache-scope-item span { + color: #64748b; + font-size: 12.5px; + font-weight: 600; + line-height: 1.55; +} + +.cache-management-panel { + display: flex; + align-items: center; + justify-content: space-between; + gap: 18px; + padding: 16px 18px; + border: 1px solid #e2e8f0; + border-radius: 6px; + background: #ffffff; +} + +.cache-management-copy { + min-width: 0; + display: grid; + gap: 4px; +} + +.cache-management-copy strong { + color: #0f172a; + font-size: 15px; + font-weight: 800; + line-height: 1.35; +} + +.cache-management-copy span { + color: #64748b; + font-size: 12.5px; + font-weight: 650; + line-height: 1.5; +} + +.cache-clear-button { + min-height: 36px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 0 16px; + border: 1px solid #cbd5e1; + border-radius: 4px; + background: #ffffff; + color: #334155; + font-size: 13px; + font-weight: 700; + white-space: nowrap; + transition: all 0.2s ease; + cursor: pointer; +} + +.cache-clear-button:hover:not(:disabled) { + border-color: var(--theme-primary); + background: var(--theme-primary-soft); + color: var(--theme-primary-active); +} + +.cache-clear-button:disabled { + cursor: not-allowed; + opacity: 0.65; +} + +.cache-clear-result, +.cache-clear-empty { + padding: 14px 16px; + border: 1px solid #dbe4ee; + border-radius: 6px; + background: #ffffff; +} + +.cache-clear-result.is-error { + border-color: #fecaca; + background: #fff7f7; +} + +.cache-clear-result-head { + display: flex; + align-items: center; + gap: 8px; +} + +.cache-clear-result-head i { + color: #16a34a; + font-size: 18px; +} + +.cache-clear-result.is-error .cache-clear-result-head i { + color: #dc2626; +} + +.cache-clear-result-head strong { + color: #0f172a; + font-size: 13.5px; + font-weight: 800; + line-height: 1.4; +} + +.cache-clear-result ul { + display: grid; + gap: 8px; + margin: 12px 0 0; + padding: 0; + list-style: none; +} + +.cache-clear-result li { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding-top: 8px; + border-top: 1px solid #eef2f7; + color: #475569; + font-size: 12.5px; + font-weight: 650; +} + +.cache-clear-result li strong { + color: #0f172a; + font-weight: 800; + white-space: nowrap; +} + +.cache-clear-empty { + display: inline-flex; + align-items: center; + gap: 8px; + justify-self: start; + color: #64748b; + font-size: 12.5px; + font-weight: 650; +} + +.cache-clear-empty i { + color: var(--theme-primary); + font-size: 15px; } .log-policy-card .card-head { @@ -751,6 +987,15 @@ .save-button { justify-content: center; } + + .cache-management-panel { + grid-template-columns: 1fr; + align-items: stretch; + } + + .cache-scope-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } @media (max-width: 960px) { @@ -801,6 +1046,21 @@ justify-items: start; padding: 20px; } + + + + .cache-management-hero-metrics { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cache-management-panel { + flex-direction: column; + align-items: stretch; + } + + .cache-clear-button { + width: 100%; + } } @media (max-width: 640px) { @@ -850,4 +1110,16 @@ overflow: hidden; text-overflow: ellipsis; } + + .cache-scope-item, + .cache-management-panel, + .cache-clear-result, + .cache-clear-empty { + border-radius: 6px; + } + + .cache-scope-grid, + .cache-management-hero-metrics { + grid-template-columns: 1fr; + } } diff --git a/web/src/components/audit/DigitalEmployeeWorkRecords.vue b/web/src/components/audit/DigitalEmployeeWorkRecords.vue index 95dcab7..1483a37 100644 --- a/web/src/components/audit/DigitalEmployeeWorkRecords.vue +++ b/web/src/components/audit/DigitalEmployeeWorkRecords.vue @@ -250,10 +250,6 @@