From b0d4d5bfef4907be398067d033263e23da590dc5 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Thu, 20 Aug 2026 16:42:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=90=8E=E5=8F=B0=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E7=9B=98=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/views/AdminDashboardView.vue | 1479 +++++++++++------ frontend/src/styles/admin.css | 288 +++- 2 files changed, 1269 insertions(+), 498 deletions(-) diff --git a/frontend/src/features/admin/views/AdminDashboardView.vue b/frontend/src/features/admin/views/AdminDashboardView.vue index f175b82..c30af10 100644 --- a/frontend/src/features/admin/views/AdminDashboardView.vue +++ b/frontend/src/features/admin/views/AdminDashboardView.vue @@ -4,6 +4,7 @@ import { Bell, Bottom, ChatDotRound, + DataLine, Document, Grid, Loading, @@ -88,93 +89,114 @@ function shortDate(date: string) { diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css index 1539e2b..78b3395 100644 --- a/frontend/src/styles/admin.css +++ b/frontend/src/styles/admin.css @@ -347,30 +347,290 @@ max-width: 720px; } -/* ========== Button Enhancements ========== */ -/* 仅实体主按钮强制白字；浅色、虚线和文字按钮沿用 Element Plus 的主题色。 */ +/* ========== Enterprise Button Design System ========== */ +.el-button { + font-family: inherit; + font-weight: 600; + border-radius: 8px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + letter-spacing: 0.2px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; +} + +.el-button .el-icon { + font-size: 1.05em; +} + +/* 默认 / 次级按钮 (White / Slate) */ +.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not( + .el-button--warning + ):not(.el-button--info):not(.is-text):not(.is-link) { + background: #ffffff; + color: #334155; + border: 1px solid #cbd5e1; + box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); +} + +.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not( + .el-button--warning + ):not(.el-button--info):not(.is-text):not(.is-link):hover:not(.is-disabled) { + background: #f8fafc; + color: #0f172a; + border-color: #94a3b8; + box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08); + transform: translateY(-1px); +} + +.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not( + .el-button--warning + ):not(.el-button--info):not(.is-text):not(.is-link):active:not(.is-disabled) { + background: #f1f5f9; + transform: translateY(0); + box-shadow: none; +} + +/* 主按钮 (Primary - Modern Vibrant Blue/Indigo) */ .el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) { - font-weight: 700 !important; - --el-button-text-color: #ffffff; - --el-button-hover-text-color: #ffffff; - --el-button-active-text-color: #ffffff; + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; + border: 1px solid #2563eb !important; + color: #ffffff !important; + box-shadow: + 0 1px 2px rgba(37, 99, 235, 0.12), + 0 3px 8px rgba(37, 99, 235, 0.22); +} + +.el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not( + .is-disabled + ) { + background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; + border-color: #3b82f6 !important; + color: #ffffff !important; + box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); + transform: translateY(-1px); +} + +.el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):active:not( + .is-disabled + ) { + background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; + border-color: #1d4ed8 !important; + transform: translateY(0); + box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2); } .el-button--primary:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) span { color: #ffffff !important; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); - font-weight: 700; + font-weight: 600; +} + +/* 成功按钮 (Success - Emerald) */ +.el-button--success:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) { + background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; + border: 1px solid #059669 !important; + color: #ffffff !important; + box-shadow: + 0 1px 2px rgba(16, 185, 129, 0.12), + 0 3px 8px rgba(16, 185, 129, 0.22); +} + +.el-button--success:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not( + .is-disabled + ) { + background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important; + border-color: #10b981 !important; + color: #ffffff !important; + box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); + transform: translateY(-1px); +} + +.el-button--success:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):active:not( + .is-disabled + ) { + transform: translateY(0); + box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2); +} + +/* 危险按钮 (Danger - Rose/Ruby) */ +.el-button--danger:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) { + background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; + border: 1px solid #e11d48 !important; + color: #ffffff !important; + box-shadow: + 0 1px 2px rgba(244, 63, 94, 0.12), + 0 3px 8px rgba(244, 63, 94, 0.22); +} + +.el-button--danger:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not( + .is-disabled + ) { + background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%) !important; + border-color: #f43f5e !important; + color: #ffffff !important; + box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35); + transform: translateY(-1px); +} + +.el-button--danger:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):active:not( + .is-disabled + ) { + transform: translateY(0); + box-shadow: 0 1px 3px rgba(244, 63, 94, 0.2); +} + +/* 警告按钮 (Warning - Amber) */ +.el-button--warning:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link) { + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; + border: 1px solid #d97706 !important; + color: #ffffff !important; + box-shadow: + 0 1px 2px rgba(245, 158, 11, 0.12), + 0 3px 8px rgba(245, 158, 11, 0.22); +} + +.el-button--warning:not(.is-plain):not(.is-dashed):not(.is-text):not(.is-link):hover:not( + .is-disabled + ) { + background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; + border-color: #f59e0b !important; + color: #ffffff !important; + box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); + transform: translateY(-1px); +} + +/* Plain 朴素按钮升级 */ +.el-button--primary.is-plain { + background: #eff6ff !important; + color: #2563eb !important; + border: 1px solid #bfdbfe !important; +} +.el-button--primary.is-plain:hover:not(.is-disabled) { + background: #2563eb !important; + color: #ffffff !important; + border-color: #2563eb !important; + box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); + transform: translateY(-1px); +} + +.el-button--success.is-plain { + background: #ecfdf5 !important; + color: #059669 !important; + border: 1px solid #a7f3d0 !important; +} +.el-button--success.is-plain:hover:not(.is-disabled) { + background: #059669 !important; + color: #ffffff !important; + border-color: #059669 !important; + box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25); + transform: translateY(-1px); +} + +.el-button--danger.is-plain { + background: #fff1f2 !important; + color: #e11d48 !important; + border: 1px solid #fecdd3 !important; +} +.el-button--danger.is-plain:hover:not(.is-disabled) { + background: #e11d48 !important; + color: #ffffff !important; + border-color: #e11d48 !important; + box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25); + transform: translateY(-1px); +} + +/* 链接/文字按钮 */ +.el-button.is-link { + padding: 4px 8px; + height: auto; + border-radius: 6px; + font-weight: 600; +} + +.el-button.is-link:hover:not(.is-disabled) { + background: rgba(15, 23, 42, 0.05); } .el-button.is-link.el-button--primary { - --el-button-text-color: var(--el-color-primary); - --el-button-hover-text-color: var(--el-color-primary-light-3); - --el-button-active-text-color: var(--el-color-primary-dark-2); + color: #2563eb !important; +} +.el-button.is-link.el-button--primary:hover:not(.is-disabled) { + color: #1d4ed8 !important; + background: #eff6ff !important; } -.el-button.is-link.el-button--primary span { - color: inherit !important; - text-shadow: none; +.el-button.is-link.el-button--success { + color: #059669 !important; +} +.el-button.is-link.el-button--success:hover:not(.is-disabled) { + color: #047857 !important; + background: #ecfdf5 !important; +} + +.el-button.is-link.el-button--danger { + color: #e11d48 !important; +} +.el-button.is-link.el-button--danger:hover:not(.is-disabled) { + color: #be123c !important; + background: #fff1f2 !important; +} + +/* 尺寸规格规范 */ +.el-button--small { + height: 28px; + padding: 4px 10px; + font-size: 12px; + border-radius: 6px; +} + +.el-button--large { + height: 42px; + padding: 10px 20px; + font-size: 14px; + border-radius: 10px; +} + +.el-button.is-disabled, +.el-button.is-disabled:hover { + opacity: 0.55; + cursor: not-allowed; + transform: none !important; + box-shadow: none !important; +} + +/* ========== Enterprise Form Controls Enhancement ========== */ +.el-input__wrapper, +.el-select__wrapper, +.el-textarea__wrapper { + border-radius: 8px !important; + box-shadow: 0 0 0 1px #cbd5e1 inset !important; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; + background-color: #ffffff !important; +} + +.el-input__wrapper:hover, +.el-select__wrapper:hover, +.el-textarea__wrapper:hover { + box-shadow: 0 0 0 1px #94a3b8 inset !important; +} + +.el-input__wrapper.is-focus, +.el-select__wrapper.is-focused, +.el-textarea__wrapper.is-focus { + box-shadow: + 0 0 0 1.5px #2563eb inset, + 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important; +} + +.el-select-dropdown__item.is-selected { + color: #2563eb !important; + font-weight: 600; +} + +.el-tag { + border-radius: 6px; + font-weight: 500; } .eyebrow {