feat(dashboard): unify global UI theme across all admin templates

This commit is contained in:
liuwei
2026-04-15 17:00:15 +08:00
parent ee5c1ebadc
commit cb8adc40ce
19 changed files with 808 additions and 379 deletions

View File

@@ -63,23 +63,23 @@
.page-shell { display: flex; flex-direction: column; gap: 16px; }
.page-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16); box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-hero-actions { display: flex; align-items: center; gap: 12px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
.page-hero-copy p { color: #64748b; font-size: 14px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #0b5e57; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #15211b; }
.page-hero-copy p { color: #4f6258; font-size: 14px; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.iframe-url {
max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
color: #94a3b8; padding: 8px 12px; border-radius: 999px; background: rgba(248,250,252,0.9); border: 1px solid rgba(148,163,184,0.12);
color: #74897f; padding: 8px 12px; border-radius: 999px; background: rgba(247,251,248,0.9); border: 1px solid rgba(101,121,113,0.12);
}
.iframe-shell-card { height: calc(100vh - 230px); }
.iframe-shell-card .el-card__body { height: calc(100% - 73px); }
.iframe-shell { height: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(148,163,184,0.12); background: rgba(248,250,252,0.82); }
.iframe-shell { height: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(101,121,113,0.12); background: rgba(247,251,248,0.82); }
.iframe-shell iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
</style>
{% endblock %}

View File

@@ -8,31 +8,33 @@
<style>
:root {
--bg: #f4f7fb;
--bg-soft: #eef3f8;
--surface: rgba(255, 255, 255, 0.86);
--bg: #eef3ef;
--bg-deep: #e4ebe6;
--surface: rgba(255, 255, 255, 0.82);
--surface-strong: #ffffff;
--surface-muted: #f8fafc;
--border: rgba(148, 163, 184, 0.18);
--border-strong: rgba(148, 163, 184, 0.26);
--text: #0f172a;
--text-soft: #475569;
--text-faint: #94a3b8;
--primary: #4f46e5;
--primary-soft: rgba(79, 70, 229, 0.10);
--primary-soft-2: rgba(99, 102, 241, 0.16);
--info: #3b82f6;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
--shadow-md: 0 18px 48px rgba(15, 23, 42, 0.08);
--surface-muted: #f6f9f7;
--border: rgba(101, 121, 113, 0.20);
--border-strong: rgba(73, 91, 84, 0.30);
--text: #15211b;
--text-soft: #3f5148;
--text-faint: #6d8177;
--primary: #0f766e;
--primary-strong: #0b5e57;
--primary-soft: rgba(15, 118, 110, 0.10);
--accent: #ea580c;
--accent-soft: rgba(234, 88, 12, 0.12);
--info: #0ea5e9;
--success: #159467;
--warning: #d97706;
--danger: #dc2626;
--shadow-sm: 0 10px 30px rgba(21, 33, 27, 0.08);
--shadow-md: 0 24px 60px rgba(21, 33, 27, 0.10);
--radius-xs: 10px;
--radius-sm: 14px;
--radius-md: 18px;
--radius-lg: 24px;
--topbar-height: 72px;
--subnav-height: 64px;
--radius-md: 20px;
--radius-lg: 28px;
--topbar-height: 74px;
--subnav-height: 66px;
--content-padding: 24px;
}
@@ -50,11 +52,42 @@
overflow: hidden;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(99, 102, 241, 0.10), transparent 28%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 24%),
linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
radial-gradient(circle at 8% 2%, rgba(15, 118, 110, 0.18), transparent 34%),
radial-gradient(circle at 93% 10%, rgba(234, 88, 12, 0.11), transparent 28%),
linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 100%);
font-family: "Avenir Next", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
position: relative;
}
body::before,
body::after {
content: "";
position: fixed;
pointer-events: none;
z-index: 0;
}
body::before {
inset: 0;
opacity: 0.28;
background-image:
linear-gradient(rgba(59, 76, 68, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 76, 68, 0.06) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(circle at 50% 20%, black 34%, transparent 76%);
-webkit-mask-image: radial-gradient(circle at 50% 20%, black 34%, transparent 76%);
}
body::after {
width: 44vmax;
height: 44vmax;
right: -16vmax;
bottom: -22vmax;
border-radius: 50%;
background:
radial-gradient(circle at 32% 32%, rgba(14, 165, 233, 0.18), transparent 58%),
radial-gradient(circle at 70% 60%, rgba(234, 88, 12, 0.14), transparent 64%);
filter: blur(10px);
}
h1, h2, h3, h4, h5, h6, p {
@@ -64,7 +97,9 @@
.app-container {
min-height: 100vh;
opacity: 0;
transition: opacity .24s ease;
transition: opacity .32s ease;
position: relative;
z-index: 1;
}
.app-container.loaded {
@@ -79,13 +114,13 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
gap: 20px;
padding: 0 24px;
background: rgba(255, 255, 255, 0.72);
background: linear-gradient(180deg, rgba(246, 250, 247, 0.92), rgba(244, 249, 245, 0.80));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
border-bottom: 1px solid rgba(83, 102, 93, 0.18);
box-shadow: 0 12px 32px rgba(20, 32, 26, 0.06);
}
.topbar-left,
@@ -104,11 +139,12 @@
}
.brand-logo {
width: 40px;
height: 40px;
width: 42px;
height: 42px;
border-radius: 14px;
object-fit: cover;
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.16);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.20);
}
.brand-copy {
@@ -134,14 +170,14 @@
.main-nav {
display: flex;
align-items: center;
gap: 6px;
gap: 8px;
min-width: 0;
overflow-x: auto;
padding: 4px;
padding: 5px;
border-radius: 999px;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(99, 120, 111, 0.20);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.main-nav::-webkit-scrollbar,
@@ -174,14 +210,15 @@
}
.main-nav-link:hover {
background: rgba(255,255,255,0.92);
color: var(--text);
background: rgba(255, 255, 255, 0.94);
transform: translateY(-1px);
}
.main-nav-link.is-active {
color: var(--primary);
background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(99,102,241,0.08));
box-shadow: inset 0 0 0 1px rgba(99,102,241,0.10);
color: #ffffff;
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
box-shadow: 0 10px 20px rgba(15, 118, 110, 0.26);
}
.status-pill,
@@ -191,9 +228,9 @@
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(96, 118, 109, 0.20);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
color: var(--text-soft);
font-size: 13px;
white-space: nowrap;
@@ -209,19 +246,19 @@
.status-dot {
background: var(--success);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
box-shadow: 0 0 0 4px rgba(21, 148, 103, 0.14);
}
.user-dot {
background: var(--info);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10);
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}
.logout-btn {
color: var(--text-soft) !important;
padding: 10px 14px !important;
border-radius: 999px !important;
transition: all .18s ease !important;
transition: all .2s ease !important;
}
.logout-btn:hover {
@@ -239,10 +276,10 @@
justify-content: space-between;
gap: 16px;
padding: 0 24px;
background: rgba(248, 250, 252, 0.84);
background: linear-gradient(180deg, rgba(247, 251, 248, 0.84), rgba(246, 250, 247, 0.70));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
border-bottom: 1px solid rgba(95, 116, 107, 0.16);
}
.subnav-title {
@@ -253,9 +290,10 @@
}
.subnav-title h2 {
font-size: 19px;
font-size: 20px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.01em;
}
.subnav-title p {
@@ -276,22 +314,22 @@
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: rgba(255,255,255,0.64);
border: 1px solid rgba(98, 118, 109, 0.22);
background: rgba(255, 255, 255, 0.72);
font-size: 13px;
font-weight: 500;
font-weight: 600;
}
.sub-nav-link:hover {
background: rgba(255,255,255,0.95);
background: rgba(255, 255, 255, 0.96);
color: var(--text);
border-color: rgba(148, 163, 184, 0.18);
border-color: rgba(84, 104, 95, 0.34);
}
.sub-nav-link.is-active {
background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(99,102,241,0.08));
background: linear-gradient(145deg, rgba(15, 118, 110, 0.14), rgba(20, 184, 166, 0.08));
color: var(--primary);
border-color: rgba(99, 102, 241, 0.12);
border-color: rgba(15, 118, 110, 0.30);
}
.layout-shell {
@@ -303,17 +341,39 @@
height: 100%;
overflow-y: auto;
padding: var(--content-padding);
scroll-behavior: smooth;
}
.content-inner {
min-height: calc(100vh - var(--topbar-height) - var(--subnav-height) - (var(--content-padding) * 2));
}
.page-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.page-title-main h1,
.page-title-main h2 {
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.015em;
}
.page-title-main p {
margin-top: 8px;
font-size: 14px;
color: var(--text-soft);
}
.toolbar-card,
.el-card {
border-radius: var(--radius-md) !important;
border: 1px solid var(--border) !important;
background: rgba(255, 255, 255, 0.82) !important;
background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 247, 0.88)) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -322,8 +382,8 @@
.el-card__header {
padding: 16px 18px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,250,252,0.92)) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 249, 0.92)) !important;
border-bottom: 1px solid rgba(101, 121, 113, 0.14) !important;
color: var(--text) !important;
}
@@ -333,20 +393,21 @@
.el-button {
border-radius: 12px !important;
font-weight: 500 !important;
transition: all .18s ease !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
transition: all .2s ease !important;
}
.el-button--primary {
background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
border-color: transparent !important;
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.18) !important;
box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24) !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
transform: translateY(-1px);
box-shadow: 0 14px 24px rgba(79, 70, 229, 0.22) !important;
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.30) !important;
}
.el-button--primary.is-plain,
@@ -355,20 +416,20 @@
.el-button--danger.is-plain,
.el-button--info.is-plain {
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
box-shadow: 0 6px 16px rgba(21, 33, 27, 0.06) !important;
}
.el-button--primary.is-plain {
color: #4338ca !important;
border-color: rgba(99, 102, 241, 0.34) !important;
color: var(--primary-strong) !important;
border-color: rgba(15, 118, 110, 0.36) !important;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
color: #ffffff !important;
border-color: transparent !important;
background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
box-shadow: 0 12px 22px rgba(79, 70, 229, 0.20) !important;
background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
box-shadow: 0 12px 22px rgba(15, 118, 110, 0.24) !important;
}
.el-button--success.is-plain {
@@ -411,7 +472,7 @@
}
.el-button--info.is-plain {
color: #475569 !important;
color: #3f5148 !important;
border-color: rgba(100, 116, 139, 0.34) !important;
}
@@ -419,31 +480,31 @@
.el-button--info.is-plain:focus {
color: #ffffff !important;
border-color: transparent !important;
background: linear-gradient(135deg, #64748b, #94a3b8) !important;
background: linear-gradient(135deg, #4f6258, #74897f) !important;
box-shadow: 0 12px 22px rgba(100, 116, 139, 0.20) !important;
}
.el-button--default {
background: rgba(255,255,255,0.85) !important;
background: rgba(255, 255, 255, 0.92) !important;
border-color: var(--border-strong) !important;
color: var(--text) !important;
}
.el-button--default:hover,
.el-button--default:focus {
border-color: rgba(99,102,241,0.3) !important;
border-color: rgba(15, 118, 110, 0.56) !important;
color: var(--primary) !important;
background: rgba(255,255,255,0.96) !important;
background: rgba(255, 255, 255, 0.98) !important;
}
.el-button--text,
.el-button--text:not(.is-disabled) {
color: #334155 !important;
color: #27443a !important;
font-weight: 600 !important;
padding: 6px 10px !important;
border-radius: 10px !important;
background: rgba(248, 250, 252, 0.9) !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: rgba(247, 251, 248, 0.92) !important;
border: 1px solid rgba(101, 121, 113, 0.20) !important;
}
.el-button--text:hover,
@@ -451,8 +512,8 @@
.el-button--text:not(.is-disabled):hover,
.el-button--text:not(.is-disabled):focus {
color: var(--primary) !important;
background: rgba(99, 102, 241, 0.08) !important;
border-color: rgba(99, 102, 241, 0.18) !important;
background: rgba(15, 118, 110, 0.08) !important;
border-color: rgba(15, 118, 110, 0.24) !important;
}
.el-button--text [class*="el-icon-"],
@@ -464,10 +525,10 @@
.el-table .el-button--text:not(.is-disabled),
.el-card .el-button--text,
.el-card .el-button--text:not(.is-disabled) {
color: #1e293b !important;
color: #27443a !important;
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(100, 116, 139, 0.18) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
border-color: rgba(101, 121, 113, 0.22) !important;
box-shadow: 0 4px 12px rgba(21, 33, 27, 0.06) !important;
}
.el-table .el-button--text:hover,
@@ -475,9 +536,9 @@
.el-card .el-button--text:hover,
.el-card .el-button--text:focus {
color: var(--primary) !important;
background: rgba(99, 102, 241, 0.10) !important;
border-color: rgba(99, 102, 241, 0.20) !important;
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.10) !important;
background: rgba(15, 118, 110, 0.10) !important;
border-color: rgba(15, 118, 110, 0.20) !important;
box-shadow: 0 8px 16px rgba(15, 118, 110, 0.16) !important;
}
.el-button--success,
@@ -488,19 +549,19 @@
border-color: transparent !important;
}
.el-button--success { background: linear-gradient(135deg, #10b981, #34d399) !important; }
.el-button--warning { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; }
.el-button--danger { background: linear-gradient(135deg, #ef4444, #f87171) !important; }
.el-button--info { background: linear-gradient(135deg, #64748b, #94a3b8) !important; }
.el-button--success { background: linear-gradient(135deg, #159467, #1fb880) !important; }
.el-button--warning { background: linear-gradient(135deg, #d97706, #ea9a2e) !important; }
.el-button--danger { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
.el-button--info { background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important; }
.el-input__inner,
.el-textarea__inner {
height: 40px;
border-radius: 12px !important;
background: rgba(248,250,252,0.9) !important;
border-color: rgba(148,163,184,0.22) !important;
background: rgba(247, 251, 248, 0.90) !important;
border-color: rgba(101, 121, 113, 0.28) !important;
color: var(--text) !important;
transition: all .18s ease !important;
transition: all .2s ease !important;
}
.el-textarea__inner {
@@ -514,8 +575,8 @@
.el-input__inner:focus,
.el-textarea__inner:focus {
border-color: rgba(99,102,241,0.42) !important;
box-shadow: 0 0 0 4px rgba(99,102,241,0.10) !important;
border-color: rgba(15, 118, 110, 0.58) !important;
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12) !important;
background: #fff !important;
}
@@ -542,44 +603,44 @@
}
.el-table th {
background: rgba(248,250,252,0.95) !important;
background: rgba(245, 251, 247, 0.96) !important;
color: var(--text-soft) !important;
font-weight: 600 !important;
border-bottom: 1px solid rgba(148,163,184,0.12) !important;
font-weight: 700 !important;
border-bottom: 1px solid rgba(101, 121, 113, 0.18) !important;
}
.el-table tr,
.el-table td,
.el-table__expanded-cell {
background: rgba(255,255,255,0.45) !important;
background: rgba(255, 255, 255, 0.54) !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(148,163,184,0.10) !important;
border-bottom: 1px solid rgba(101, 121, 113, 0.12) !important;
}
.el-table--border,
.el-table--group {
border: 1px solid rgba(148,163,184,0.14) !important;
border: 1px solid rgba(101, 121, 113, 0.16) !important;
}
.el-table--border th,
.el-table--border td {
border-right: 1px solid rgba(148,163,184,0.08) !important;
border-right: 1px solid rgba(101, 121, 113, 0.10) !important;
}
.el-table__row:hover > td {
background: rgba(99,102,241,0.05) !important;
background: rgba(15, 118, 110, 0.06) !important;
}
.el-dialog,
.el-message-box {
border-radius: 22px !important;
overflow: hidden !important;
border: 1px solid rgba(148,163,184,0.14) !important;
border: 1px solid rgba(101, 121, 113, 0.18) !important;
box-shadow: var(--shadow-md) !important;
background: rgba(255,255,255,0.94) !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
@@ -587,8 +648,8 @@
.el-dialog__header,
.el-message-box__header {
padding: 18px 20px !important;
border-bottom: 1px solid rgba(148,163,184,0.10) !important;
background: rgba(248,250,252,0.86) !important;
border-bottom: 1px solid rgba(101, 121, 113, 0.14) !important;
background: rgba(247, 251, 248, 0.90) !important;
}
.el-dialog__body,
@@ -599,12 +660,12 @@
.el-pagination .el-pager li,
.el-pagination button {
border-radius: 10px !important;
border: 1px solid rgba(148,163,184,0.14) !important;
background: rgba(255,255,255,0.92) !important;
border: 1px solid rgba(101, 121, 113, 0.18) !important;
background: rgba(255, 255, 255, 0.96) !important;
}
.el-pagination .el-pager li.active {
background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
color: #fff !important;
}
@@ -618,7 +679,7 @@
}
.el-tabs__active-bar {
background: var(--primary) !important;
background: linear-gradient(90deg, var(--primary), #22c0b5) !important;
height: 3px !important;
border-radius: 999px !important;
}
@@ -635,7 +696,7 @@
}
.v-modal {
background: rgba(15, 23, 42, 0.16) !important;
background: rgba(15, 28, 22, 0.24) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
@@ -645,7 +706,210 @@
}
a:hover {
color: #4338ca;
color: var(--primary-strong);
}
body .page-shell {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
body .page-hero {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 18px !important;
padding: 24px 26px !important;
border-radius: 24px !important;
background: linear-gradient(135deg, rgba(15,118,110,0.12), rgba(14,165,233,0.08), rgba(255,255,255,0.94)) !important;
border: 1px solid rgba(101,121,113,0.18) !important;
box-shadow: 0 18px 40px rgba(21,33,27,0.08) !important;
}
body .page-hero-actions {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
body .page-eyebrow {
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
color: var(--primary-strong) !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
}
body .page-hero-copy h1 {
font-size: 30px !important;
line-height: 1.1 !important;
margin-bottom: 10px !important;
color: var(--text) !important;
}
body .page-hero-copy p {
color: var(--text-soft) !important;
font-size: 14px !important;
}
body .overview-grid .el-col {
margin-bottom: 16px !important;
}
body .overview-card {
min-height: 112px !important;
}
body .overview-card--primary {
background: linear-gradient(180deg, rgba(15,118,110,0.12), rgba(255,255,255,0.96)) !important;
border-color: rgba(15,118,110,0.24) !important;
}
body .overview-card--soft {
background: linear-gradient(180deg, rgba(234,88,12,0.10), rgba(255,255,255,0.96)) !important;
border-color: rgba(234,88,12,0.22) !important;
}
body .overview-label {
font-size: 13px !important;
color: var(--text-soft) !important;
margin-bottom: 14px !important;
}
body .overview-value {
font-size: 30px !important;
font-weight: 700 !important;
color: var(--text) !important;
margin-bottom: 10px !important;
letter-spacing: -0.02em !important;
}
body .overview-note {
font-size: 12px !important;
color: var(--text-faint) !important;
}
body .workspace-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
body .workspace-header h3 {
font-size: 18px !important;
margin-bottom: 4px !important;
color: var(--text) !important;
}
body .workspace-header p {
font-size: 13px !important;
color: var(--text-soft) !important;
}
body .entity-cell {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
body .entity-badge {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, rgba(15,118,110,0.18), rgba(20,184,166,0.10)) !important;
color: var(--primary) !important;
border: 1px solid rgba(15,118,110,0.20) !important;
font-size: 12px !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
}
body .entity-title {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--text) !important;
}
body .entity-subtitle {
margin-top: 4px !important;
font-size: 12px !important;
color: var(--text-faint) !important;
}
body .detail-section {
margin-top: 18px !important;
}
body .section-title {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--text) !important;
margin-bottom: 10px !important;
}
body .chart-shell {
padding: 16px !important;
border-radius: 18px !important;
background: linear-gradient(180deg, rgba(247,251,248,0.86), rgba(255,255,255,0.98)) !important;
border: 1px solid rgba(101,121,113,0.16) !important;
}
body .pagination-container {
margin-top: 20px !important;
text-align: right !important;
}
body .action-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
body .dialog-intro {
margin-bottom: 14px !important;
color: var(--text-soft) !important;
font-size: 13px !important;
}
body .stack-trace,
body .changes-pre {
background: rgba(247,251,248,0.88) !important;
border: 1px solid rgba(101,121,113,0.14) !important;
border-radius: 14px !important;
color: #27443a !important;
}
.app-container.loaded .topbar,
.app-container.loaded .subnav-bar,
.app-container.loaded .content-inner > * {
animation: revealUp .4s ease both;
}
.app-container.loaded .subnav-bar {
animation-delay: .08s;
}
.app-container.loaded .content-inner > *:nth-child(1) { animation-delay: .16s; }
.app-container.loaded .content-inner > *:nth-child(2) { animation-delay: .22s; }
.app-container.loaded .content-inner > *:nth-child(3) { animation-delay: .28s; }
@keyframes revealUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1320px) {
@@ -664,6 +928,115 @@
display: none;
}
}
@media (max-width: 980px) {
:root {
--content-padding: 18px;
}
.brand-subtitle,
.user-pill {
display: none;
}
.topbar-right {
gap: 10px;
}
.main-nav-link {
min-height: 36px;
padding: 0 14px;
font-size: 13px;
}
.subnav-title h2 {
font-size: 17px;
}
.subnav-title p {
display: none;
}
}
@media (max-width: 768px) {
:root {
--topbar-height: auto;
--subnav-height: auto;
--content-padding: 14px;
}
body {
overflow-y: auto;
}
.layout-shell,
.content {
height: auto;
overflow: visible;
}
.topbar {
position: static;
flex-direction: column;
align-items: flex-start;
padding-top: 12px;
padding-bottom: 12px;
gap: 12px;
}
.topbar-left,
.topbar-right {
width: 100%;
justify-content: space-between;
}
.main-nav {
width: 100%;
justify-content: flex-start;
}
.subnav-bar {
position: static;
flex-direction: column;
align-items: flex-start;
padding-top: 12px;
padding-bottom: 12px;
gap: 10px;
}
.sub-nav {
width: 100%;
}
.page-title {
flex-direction: column;
align-items: flex-start;
}
.page-title-main h1,
.page-title-main h2 {
font-size: 24px;
}
body .page-hero {
flex-direction: column !important;
align-items: flex-start !important;
}
body .workspace-header {
flex-direction: column !important;
align-items: flex-start !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}
</style>
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">

View File

@@ -1098,7 +1098,7 @@
responsive: true,
maintainAspectRatio: false,
scales: {
y: { beginAtZero: true, grid: { color: 'rgba(148,163,184,0.12)' } },
y: { beginAtZero: true, grid: { color: 'rgba(101,121,113,0.12)' } },
x: { grid: { display: false } }
},
plugins: { legend: { display: false } }
@@ -1151,7 +1151,7 @@
responsive: true,
maintainAspectRatio: false,
scales: {
y: { beginAtZero: true, grid: { color: 'rgba(148,163,184,0.12)' } },
y: { beginAtZero: true, grid: { color: 'rgba(101,121,113,0.12)' } },
x: { grid: { display: false } }
},
plugins: { legend: { display: false } }
@@ -1429,44 +1429,44 @@
.page-shell { display: flex; flex-direction: column; gap: 16px; }
.page-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16); box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-hero-actions { display: flex; align-items: center; gap: 12px; }
.hero-search { width: 260px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
.page-hero-copy p { color: #64748b; font-size: 14px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #0b5e57; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #15211b; }
.page-hero-copy p { color: #4f6258; font-size: 14px; }
.overview-grid .el-col { margin-bottom: 16px; }
.overview-card { min-height: 112px; }
.overview-card--primary { background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important; }
.overview-card--soft { background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important; }
.overview-label { font-size: 13px; color: #64748b; margin-bottom: 14px; }
.overview-value { font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.overview-note { font-size: 12px; color: #94a3b8; }
.overview-card--primary { background: linear-gradient(180deg, rgba(15,118,110,0.10), rgba(255,255,255,0.94)) !important; }
.overview-card--soft { background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,255,255,0.94)) !important; }
.overview-label { font-size: 13px; color: #4f6258; margin-bottom: 14px; }
.overview-value { font-size: 30px; font-weight: 700; color: #15211b; margin-bottom: 10px; }
.overview-note { font-size: 12px; color: #74897f; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-avatar {
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(79,70,229,0.10); color: #4f46e5; font-size: 14px; flex-shrink: 0;
background: rgba(15,118,110,0.10); color: #0f766e; font-size: 14px; flex-shrink: 0;
}
.entity-avatar--group { background: rgba(16,185,129,0.12); color: #10b981; }
.entity-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.entity-subtitle { margin-top: 4px; font-size: 12px; color: #94a3b8; }
.entity-title { font-size: 14px; font-weight: 600; color: #15211b; }
.entity-subtitle { margin-top: 4px; font-size: 12px; color: #74897f; }
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagination-container { margin-top: 20px; text-align: right; }
.group-insight-section { margin-top: 20px; }
.group-permission-section { margin-top: 20px; }
.group-members-section { margin-top: 20px; }
.section-title {
margin: 20px 0 15px 0; border-bottom: 1px solid rgba(148,163,184,0.12); padding-bottom: 10px;
margin: 20px 0 15px 0; border-bottom: 1px solid rgba(101,121,113,0.12); padding-bottom: 10px;
display: flex; justify-content: space-between; align-items: center;
}
.section-actions { display: flex; align-items: center; gap: 10px; }
.inline-action-button { margin-left: 10px; }
.section-title h3 { margin: 0; font-size: 18px; color: #0f172a; }
.section-title h3 { margin: 0; font-size: 18px; color: #15211b; }
.group-search { width: 220px; }
.detail-avatar-wrap { text-align: center; margin-bottom: 20px; }
.detail-avatar { width: 100px; height: 100px; }
@@ -1474,11 +1474,11 @@
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
padding: 18px 20px; margin-bottom: 16px; border-radius: 22px;
background: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.14);
border: 1px solid rgba(101,121,113,0.14);
}
.detail-health-label { font-size: 13px; color: #9a3412; margin-bottom: 8px; }
.detail-health-value { font-size: 38px; line-height: 1; font-weight: 700; color: #111827; margin-bottom: 10px; }
.detail-health-note { font-size: 13px; color: #64748b; }
.detail-health-note { font-size: 13px; color: #4f6258; }
.detail-tags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.detail-overview-grid { margin-bottom: 16px; }
.overview-value--detail { font-size: 24px; }
@@ -1489,11 +1489,11 @@
.detail-panels .el-col { margin-bottom: 16px; }
.detail-card { border-radius: 18px; }
.detail-card-header {
display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #0f172a;
display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #15211b;
}
.detail-card-sub { font-size: 12px; color: #94a3b8; font-weight: 500; }
.detail-card-sub { font-size: 12px; color: #74897f; font-weight: 500; }
.feature-chip-list { display: flex; gap: 8px; flex-wrap: wrap; min-height: 60px; align-items: flex-start; }
.empty-inline, .detail-inline-note { font-size: 12px; color: #64748b; }
.empty-inline, .detail-inline-note { font-size: 12px; color: #4f6258; }
.detail-inline-note { margin-top: 12px; line-height: 1.6; }
.suggestion-list { display: flex; flex-direction: column; gap: 12px; }
.suggestion-item { border-radius: 14px; }
@@ -1501,33 +1501,33 @@
.peak-hour-item {
min-width: 132px; padding: 12px 14px; border-radius: 14px;
background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.12);
border: 1px solid rgba(101,121,113,0.12);
}
.peak-hour-rank { font-size: 13px; color: #0f172a; font-weight: 600; margin-bottom: 6px; }
.peak-hour-count { font-size: 12px; color: #64748b; }
.peak-hour-rank { font-size: 13px; color: #15211b; font-weight: 600; margin-bottom: 6px; }
.peak-hour-count { font-size: 12px; color: #4f6258; }
.chart-shell {
padding: 16px; border-radius: 18px;
background: linear-gradient(180deg, rgba(248,250,252,0.78), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.12);
background: linear-gradient(180deg, rgba(247,251,248,0.78), rgba(255,255,255,0.96));
border: 1px solid rgba(101,121,113,0.12);
}
.chart-shell--compact { min-height: 260px; }
.chart-shell--mini { min-height: 220px; }
.member-context-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0;
}
.member-context-title { display: flex; flex-direction: column; gap: 4px; color: #475569; }
.member-context-title { display: flex; flex-direction: column; gap: 4px; color: #3f5148; }
.context-tag { margin-right: 8px; margin-bottom: 8px; }
.chat-container { display: flex; flex-direction: column; gap: 14px; min-height: 620px; }
.chat-header-card {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 20px; border-radius: 18px;
background: linear-gradient(135deg, rgba(14,165,233,0.10), rgba(16,185,129,0.08), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.14);
border: 1px solid rgba(101,121,113,0.14);
}
.chat-header-main { min-width: 0; }
.chat-header-title { font-size: 20px; font-weight: 700; color: #0f172a; }
.chat-header-title { font-size: 20px; font-weight: 700; color: #15211b; }
.chat-header-subtitle {
margin-top: 6px; font-size: 13px; color: #64748b;
margin-top: 6px; font-size: 13px; color: #4f6258;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.chat-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@@ -1536,49 +1536,49 @@
background: rgba(20, 184, 166, 0.10); border: 1px solid rgba(20, 184, 166, 0.18);
}
.message-list {
flex: 1; overflow-y: auto; padding: 20px; background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
flex: 1; overflow-y: auto; padding: 20px; background: rgba(247,251,248,0.82); border: 1px solid rgba(101,121,113,0.12);
border-radius: 18px;
}
.chat-empty-state {
min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #94a3b8; text-align: center; gap: 10px;
color: #74897f; text-align: center; gap: 10px;
}
.chat-empty-state i { font-size: 34px; color: #38bdf8; }
.chat-empty-state p { font-size: 16px; color: #334155; margin: 0; }
.chat-empty-state p { font-size: 16px; color: #27443a; margin: 0; }
.chat-empty-state span { max-width: 380px; line-height: 1.6; }
.message-item { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.message-self { align-items: flex-end; }
.message-system { align-items: center; }
.message-meta { display: flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 12px; }
.message-sender { color: #475569; font-weight: 600; }
.message-meta { display: flex; align-items: center; gap: 8px; color: #74897f; font-size: 12px; }
.message-sender { color: #3f5148; font-weight: 600; }
.message-content {
max-width: 75%; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.92); color: #0f172a;
border: 1px solid rgba(148,163,184,0.12); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
max-width: 75%; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.92); color: #15211b;
border: 1px solid rgba(101,121,113,0.12); box-shadow: 0 8px 20px rgba(21, 33, 27, 0.05);
}
.message-self .message-content { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #ffffff; }
.message-self .message-content { background: linear-gradient(135deg, #0f766e, #0b5e57); color: #ffffff; }
.message-system .message-content {
max-width: 90%; background: rgba(241,245,249,0.92); color: #475569; border-style: dashed;
max-width: 90%; background: rgba(241,245,249,0.92); color: #3f5148; border-style: dashed;
text-align: center; box-shadow: none;
}
.message-system-bubble { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.message-system-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.message-system-tag {
display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px;
border-radius: 999px; font-size: 12px; font-weight: 700; color: #475569;
background: rgba(255,255,255,0.76); border: 1px solid rgba(148,163,184,0.18);
border-radius: 999px; font-size: 12px; font-weight: 700; color: #3f5148;
background: rgba(255,255,255,0.76); border: 1px solid rgba(101,121,113,0.18);
}
.message-system-tag.is-revoke { color: #9f1239; background: rgba(255,241,242,0.92); border-color: rgba(244,114,182,0.2); }
.message-text, .message-system-text { white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.message-media { display: flex; flex-direction: column; gap: 10px; }
.message-image, .message-video {
max-width: 260px; max-height: 240px; border-radius: 14px;
background: rgba(15,23,42,0.06); object-fit: cover;
background: rgba(21,33,27,0.06); object-fit: cover;
}
.message-audio { width: 260px; max-width: 100%; }
.message-caption { font-size: 12px; line-height: 1.6; opacity: 0.88; }
.message-file-chip {
display: inline-flex; align-items: center; width: fit-content; padding: 8px 12px;
border-radius: 999px; background: rgba(148,163,184,0.12); font-size: 12px;
border-radius: 999px; background: rgba(101,121,113,0.12); font-size: 12px;
}
.message-link-card { display: flex; flex-direction: column; gap: 8px; }
.message-link-title { font-size: 14px; font-weight: 700; color: inherit; text-decoration: none; }
@@ -1594,13 +1594,13 @@
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
}
.emoji-card {
border: 1px solid rgba(148,163,184,0.16); border-radius: 12px; padding: 8px;
border: 1px solid rgba(101,121,113,0.16); border-radius: 12px; padding: 8px;
display: flex; flex-direction: column; gap: 8px; align-items: center; background: #fff;
}
.emoji-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: rgba(148,163,184,0.08); }
.emoji-md5 { font-size: 11px; color: #64748b; word-break: break-all; text-align: center; min-height: 30px; }
.emoji-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: rgba(101,121,113,0.08); }
.emoji-md5 { font-size: 11px; color: #4f6258; word-break: break-all; text-align: center; min-height: 30px; }
.emoji-actions { width: 100%; display: flex; justify-content: center; }
.emoji-empty { color: #94a3b8; padding: 12px; }
.emoji-empty { color: #74897f; padding: 12px; }
@media (max-width: 1200px) {
.diagnosis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

View File

@@ -42,6 +42,6 @@
new Vue({ el:'#app', mixins:[baseApp], data(){ return { errorLogs:[], errorDetail:{}, errorDetailVisible:false, currentPage:1, pageSize:20, totalErrors:0 } }, mounted(){ this.currentView='5'; this.loadData(); }, methods:{ loadData(){ this.loadErrorLogs(parseInt(this.timeRange)); }, loadErrorLogs(days){ axios.get(`/api/error_logs?days=${days}&limit=${this.pageSize}&offset=${(this.currentPage - 1) * this.pageSize}`).then(r=>{ if(r.data.success){ this.errorLogs=r.data.data.logs||[]; this.totalErrors=r.data.data.total||0; } }).catch(e=>{ console.error('加载错误日志出错:',e); this.$message.error('加载错误日志出错'); }); }, viewErrorDetail(error){ if(error.id){ this.loadErrorDetail(error.id);} else { this.errorDetail=error; this.errorDetailVisible=true; } }, loadErrorDetail(id){ axios.get(`/api/error_detail/${id}`).then(r=>{ if(r.data.success){ this.errorDetail=r.data.data||{}; this.errorDetailVisible=true; } }).catch(e=>{ console.error('加载错误详情出错:',e); this.$message.error('加载错误详情出错'); }); }, handleSizeChange(size){ this.pageSize=size; this.currentPage=1; this.loadData(); }, handleCurrentChange(page){ this.currentPage=page; this.loadData(); } } });
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.pagination-container{margin-top:20px;text-align:right}.stack-trace{white-space:pre-wrap;word-break:break-word;background:rgba(248,250,252,.85);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:14px;color:#334155}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#4f6258;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#15211b;margin-bottom:10px}.overview-note{font-size:12px;color:#74897f}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.pagination-container{margin-top:20px;text-align:right}.stack-trace{white-space:pre-wrap;word-break:break-word;background:rgba(247,251,248,.85);border:1px solid rgba(101,121,113,.12);border-radius:14px;padding:14px;color:#27443a}
</style>
{% endblock %}

View File

@@ -129,26 +129,26 @@
.page-shell { display: flex; flex-direction: column; gap: 16px; }
.page-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16); box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
.page-hero-copy p { color: #64748b; font-size: 14px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #0b5e57; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #15211b; }
.page-hero-copy p { color: #4f6258; font-size: 14px; }
.path-pill {
max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
color: #475569; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.82); border: 1px solid rgba(148,163,184,0.14);
color: #3f5148; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.82); border: 1px solid rgba(101,121,113,0.14);
}
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-avatar {
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
color: #4f46e5; background: rgba(79,70,229,0.10);
color: #0f766e; background: rgba(15,118,110,0.10);
}
.entity-avatar--folder { color: #10b981; background: rgba(16,185,129,0.12); }
.entity-avatar--file { color: #3b82f6; background: rgba(59,130,246,0.10); }
.entity-avatar--file { color: #3b82f6; background: rgba(14,165,233,0.10); }
</style>
{% endblock %}

View File

@@ -445,26 +445,26 @@
.page-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(56,189,248,0.08), rgba(255,255,255,0.92));
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
border: 1px solid rgba(101, 121, 113, 0.16); box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #16a34a; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
.page-hero-copy p { color: #64748b; font-size: 14px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #15211b; }
.page-hero-copy p { color: #4f6258; font-size: 14px; }
.page-hero-actions { display: flex; align-items: center; gap: 12px; }
.friend-circle-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr); gap: 16px; align-items: start; }
.friend-circle-main, .friend-circle-side { display: flex; flex-direction: column; gap: 16px; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.filter-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.post-list { display: flex; flex-direction: column; gap: 16px; }
.post-card { overflow: hidden; }
.post-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.post-author { display: flex; align-items: center; gap: 12px; }
.post-author-name { font-size: 16px; font-weight: 700; color: #0f172a; }
.post-meta { font-size: 12px; color: #64748b; margin-top: 3px; }
.post-author-name { font-size: 16px; font-weight: 700; color: #15211b; }
.post-meta { font-size: 12px; color: #4f6258; margin-top: 3px; }
.post-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.post-content { color: #0f172a; line-height: 1.8; margin-bottom: 14px; white-space: pre-wrap; word-break: break-word; }
.post-content { color: #15211b; line-height: 1.8; margin-bottom: 14px; white-space: pre-wrap; word-break: break-word; }
.post-location {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px;
border-radius: 999px; background: rgba(14,165,233,0.08); color: #0369a1; font-size: 13px; font-weight: 600;
@@ -473,48 +473,48 @@
.post-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-bottom: 14px; }
.post-media-item img, .upload-preview-item img {
width: 100%; height: 108px; object-fit: cover; border-radius: 16px; cursor: pointer;
border: 1px solid rgba(148,163,184,0.14); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(101,121,113,0.14); box-shadow: 0 10px 24px rgba(21, 33, 27, 0.08);
}
.post-media-item { position: relative; }
.post-media-item.is-video::after {
content: ''; position: absolute; inset: 0; border-radius: 16px;
background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.3));
background: linear-gradient(180deg, rgba(21,33,27,0.02), rgba(21,33,27,0.3));
pointer-events: none;
}
.video-badge {
position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 999px; background: rgba(15,23,42,0.72); color: #fff;
padding: 6px 10px; border-radius: 999px; background: rgba(21,33,27,0.72); color: #fff;
font-size: 12px; font-weight: 600; z-index: 2;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
box-shadow: 0 8px 20px rgba(21, 33, 27, 0.18);
}
.post-feedback { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feedback-block {
padding: 14px; border-radius: 18px; background: rgba(248,250,252,0.88);
border: 1px solid rgba(148,163,184,0.12);
padding: 14px; border-radius: 18px; background: rgba(247,251,248,0.88);
border: 1px solid rgba(101,121,113,0.12);
}
.feedback-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.feedback-title { font-size: 13px; font-weight: 700; color: #15211b; margin-bottom: 8px; }
.feedback-list { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-chip {
display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px;
color: #334155; background: rgba(255,255,255,0.95); border: 1px solid rgba(148,163,184,0.12);
color: #27443a; background: rgba(255,255,255,0.95); border: 1px solid rgba(101,121,113,0.12);
}
.feedback-empty { color: #94a3b8; font-size: 12px; }
.feedback-empty { color: #74897f; font-size: 12px; }
.comment-list { display: flex; flex-direction: column; gap: 8px; }
.comment-item { font-size: 13px; color: #334155; line-height: 1.6; }
.comment-author { font-weight: 700; color: #0f172a; margin-right: 8px; }
.comment-item { font-size: 13px; color: #27443a; line-height: 1.6; }
.comment-author { font-weight: 700; color: #15211b; margin-right: 8px; }
.danger-text { color: #ef4444 !important; }
.upload-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.upload-trigger {
display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px;
border-radius: 12px; background: rgba(255,255,255,0.92); border: 1px solid rgba(148,163,184,0.2);
color: #0f172a; cursor: pointer; font-size: 13px; font-weight: 600;
border-radius: 12px; background: rgba(255,255,255,0.92); border: 1px solid rgba(101,121,113,0.2);
color: #15211b; cursor: pointer; font-size: 13px; font-weight: 600;
}
.upload-trigger input { display: none; }
.upload-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.raw-json {
margin: 0; max-height: 520px; overflow: auto; white-space: pre-wrap; word-break: break-all;
padding: 14px; border-radius: 16px; background: rgba(248,250,252,0.9); color: #334155;
border: 1px solid rgba(148,163,184,0.12);
padding: 14px; border-radius: 16px; background: rgba(247,251,248,0.9); color: #27443a;
border: 1px solid rgba(101,121,113,0.12);
}
.large-preview { width: 100%; border-radius: 18px; }
.large-video { width: 100%; max-height: 75vh; border-radius: 18px; background: #000; }

View File

@@ -123,6 +123,6 @@ new Vue({
});
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(79,70,229,.10);color:#4f46e5;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#0f172a}.entity-subtitle{margin-top:4px;font-size:12px;color:#94a3b8}.detail-section{margin-top:18px}.section-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:10px}.detail-chip-list{display:flex;gap:8px;flex-wrap:wrap}.suggestion-item{margin-bottom:10px}.empty-inline{font-size:13px;color:#94a3b8}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#4f6258;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#15211b;margin-bottom:10px}.overview-note{font-size:12px;color:#74897f}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,118,110,.10);color:#0f766e;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#15211b}.entity-subtitle{margin-top:4px;font-size:12px;color:#74897f}.detail-section{margin-top:18px}.section-title{font-size:15px;font-weight:700;color:#15211b;margin-bottom:10px}.detail-chip-list{display:flex;gap:8px;flex-wrap:wrap}.suggestion-item{margin-bottom:10px}.empty-inline{font-size:13px;color:#74897f}
</style>
{% endblock %}

View File

@@ -372,7 +372,7 @@
labels: ['已使用', '可用'],
datasets: [{
data: [usageValue, 100 - usageValue],
backgroundColor: [color, 'rgba(226, 232, 240, 0.85)'],
backgroundColor: [color, 'rgba(214, 226, 219, 0.86)'],
borderWidth: 0
}]
},
@@ -485,8 +485,8 @@
datasets: [{
label: '调用次数',
data: data,
backgroundColor: 'rgba(99, 102, 241, 0.72)',
borderColor: 'rgba(79, 70, 229, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.74)',
borderColor: 'rgba(11, 94, 87, 1)',
borderRadius: 10,
borderWidth: 0
}]
@@ -501,7 +501,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -535,8 +535,8 @@
datasets: [{
label: '成功率(%)',
data: data,
backgroundColor: 'rgba(16, 185, 129, 0.74)',
borderColor: 'rgba(5, 150, 105, 1)',
backgroundColor: 'rgba(234, 88, 12, 0.64)',
borderColor: 'rgba(194, 65, 12, 1)',
borderRadius: 10,
borderWidth: 0
}]
@@ -552,7 +552,7 @@
beginAtZero: true,
max: 100,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -589,8 +589,8 @@
label: '总调用',
data: totalData,
fill: false,
backgroundColor: 'rgba(79, 70, 229, 0.2)',
borderColor: 'rgba(79, 70, 229, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.18)',
borderColor: 'rgba(15, 118, 110, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -599,8 +599,8 @@
label: '成功调用',
data: successData,
fill: false,
backgroundColor: 'rgba(16, 185, 129, 0.2)',
borderColor: 'rgba(16, 185, 129, 1)',
backgroundColor: 'rgba(14, 165, 233, 0.16)',
borderColor: 'rgba(14, 165, 233, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -609,8 +609,8 @@
label: '失败调用',
data: errorData,
fill: false,
backgroundColor: 'rgba(239, 68, 68, 0.2)',
borderColor: 'rgba(239, 68, 68, 1)',
backgroundColor: 'rgba(234, 88, 12, 0.20)',
borderColor: 'rgba(234, 88, 12, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -628,7 +628,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -698,8 +698,8 @@
label: '消息数量',
data: this.hourlyMessageTrendData.counts,
fill: true,
backgroundColor: 'rgba(59, 130, 246, 0.10)',
borderColor: 'rgba(59, 130, 246, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.12)',
borderColor: 'rgba(15, 118, 110, 1)',
tension: 0.32,
borderWidth: 3,
pointRadius: 2
@@ -712,7 +712,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.12)'
color: 'rgba(101, 121, 113, 0.18)'
}
},
x: {
@@ -745,7 +745,7 @@
{% block styles %}
<style>
.dashboard-title {
margin-bottom: 18px;
margin-bottom: 20px;
}
.dashboard-page .el-row {
@@ -770,19 +770,26 @@
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(148, 163, 184, 0.18);
color: #475569;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(96, 118, 109, 0.22);
color: #3f5148;
font-size: 13px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
box-shadow: 0 8px 24px rgba(21, 33, 27, 0.08);
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
background: #159467;
box-shadow: 0 0 0 4px rgba(21, 148, 103, 0.16);
animation: pulseDot 1.8s ease infinite;
}
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(21, 148, 103, 0.28); }
70% { box-shadow: 0 0 0 8px rgba(21, 148, 103, 0.00); }
100% { box-shadow: 0 0 0 0 rgba(21, 148, 103, 0.00); }
}
.hero-row,
@@ -792,18 +799,38 @@
}
.hero-card {
min-height: 228px;
min-height: 236px;
}
.hero-card--profile {
background: linear-gradient(145deg, rgba(79,70,229,0.94), rgba(59,130,246,0.82)) !important;
color: #fff !important;
position: relative;
overflow: hidden;
border: none !important;
box-shadow: 0 24px 48px rgba(79, 70, 229, 0.18) !important;
color: #fff !important;
background:
radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.28), transparent 44%),
radial-gradient(circle at 84% 78%, rgba(251, 146, 60, 0.22), transparent 42%),
linear-gradient(140deg, #0b5e57, #0f766e 52%, #0f766e 100%) !important;
box-shadow: 0 26px 54px rgba(15, 118, 110, 0.24) !important;
}
.hero-card--profile::after {
content: "";
position: absolute;
right: -56px;
top: -64px;
width: 190px;
height: 190px;
border-radius: 46px;
transform: rotate(24deg);
border: 1px solid rgba(255, 255, 255, 0.20);
background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02));
}
.hero-card--profile .el-card__body {
padding: 22px !important;
position: relative;
z-index: 1;
}
.hero-profile {
@@ -827,6 +854,7 @@
padding: 3px;
border-radius: 24px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.26);
}
.hero-avatar {
@@ -844,22 +872,22 @@
.hero-eyebrow {
font-size: 12px;
letter-spacing: 0.08em;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0.8;
opacity: 0.84;
margin-bottom: 8px;
}
.hero-profile-copy h2 {
font-size: 24px;
font-size: 25px;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.hero-profile-copy p {
color: rgba(255,255,255,0.80);
line-height: 1.6;
color: rgba(255,255,255,0.82);
line-height: 1.58;
font-size: 14px;
}
@@ -872,7 +900,8 @@
.meta-item {
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,0.14);
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@@ -897,7 +926,13 @@
}
.metric-card {
min-height: 106px;
min-height: 108px;
transition: transform .2s ease, box-shadow .2s ease;
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(21, 33, 27, 0.12) !important;
}
.metric-card .el-card__body {
@@ -905,37 +940,39 @@
}
.metric-card--primary {
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
background: linear-gradient(160deg, rgba(15,118,110,0.14), rgba(255,255,255,0.96)) !important;
border-color: rgba(15,118,110,0.26) !important;
}
.metric-card--soft {
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
background: linear-gradient(160deg, rgba(234,88,12,0.10), rgba(255,255,255,0.96)) !important;
border-color: rgba(234,88,12,0.22) !important;
}
.metric-label {
font-size: 13px;
color: #64748b;
color: #4f6258;
margin-bottom: 14px;
}
.metric-value {
font-size: 30px;
font-size: 31px;
line-height: 1;
font-weight: 700;
color: #0f172a;
color: #15211b;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.metric-unit {
font-size: 14px;
color: #64748b;
color: #5d7267;
margin-left: 6px;
}
.metric-footnote {
font-size: 12px;
color: #94a3b8;
color: #74897f;
}
.insight-card .el-card__body {
@@ -954,14 +991,14 @@
.chart-card-header h3 {
font-size: 17px;
font-weight: 700;
color: #0f172a;
color: #15211b;
margin-bottom: 4px;
}
.section-heading p,
.chart-card-header p {
font-size: 13px;
color: #64748b;
color: #5f7368;
}
.chart-card-header--split {
@@ -976,17 +1013,26 @@
}
.chart-card--large {
min-height: 390px;
min-height: 396px;
}
.chart-container {
position: relative;
background: linear-gradient(180deg, rgba(248,250,252,0.72), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.12);
background: linear-gradient(180deg, rgba(247, 251, 248, 0.90), rgba(255, 255, 255, 0.98));
border: 1px solid rgba(101, 121, 113, 0.18);
border-radius: 18px;
padding: 14px;
}
.chart-container::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(125deg, rgba(255,255,255,0.36), transparent 34%);
}
.chart-container--large {
height: 300px;
}
@@ -1008,11 +1054,12 @@
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(79,70,229,0.10);
color: #4f46e5;
background: linear-gradient(135deg, rgba(15,118,110,0.18), rgba(20,184,166,0.10));
color: #0b5e57;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
border: 1px solid rgba(15,118,110,0.22);
}
.rank-copy {
@@ -1022,7 +1069,7 @@
.rank-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
color: #15211b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1031,7 +1078,7 @@
.rank-subtitle {
margin-top: 4px;
font-size: 12px;
color: #94a3b8;
color: #74897f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1044,7 +1091,7 @@
min-height: 180px;
flex-direction: column;
gap: 8px;
color: rgba(255,255,255,0.85);
color: rgba(255,255,255,0.90);
}
.hero-empty i {
@@ -1201,5 +1248,13 @@
height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.live-dot,
.metric-card {
animation: none !important;
transition: none !important;
}
}
</style>
{% endblock %}

View File

@@ -13,25 +13,26 @@
<script src="/static/js/axios.min.js"></script>
<style>
:root {
--bg: #f4f7fb;
--text: #0f172a;
--text-soft: #64748b;
--border: rgba(148, 163, 184, 0.18);
--primary: #4f46e5;
--primary-2: #6366f1;
--bg: #eef3ef;
--bg-deep: #e4ebe6;
--text: #15211b;
--text-soft: #4f6258;
--border: rgba(101, 121, 113, 0.18);
--primary: #0f766e;
--primary-2: #0b5e57;
--danger: #ef4444;
--shadow: 0 24px 48px rgba(15, 23, 42, 0.10);
--shadow: 0 24px 48px rgba(21, 33, 27, 0.10);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
font-family: "Avenir Next", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 30%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 26%),
linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
radial-gradient(circle at top left, rgba(15, 118, 110, 0.14), transparent 30%),
radial-gradient(circle at bottom right, rgba(234, 88, 12, 0.10), transparent 26%),
linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 100%);
min-height: 100vh;
display: flex;
align-items: center;
@@ -46,14 +47,14 @@
border-radius: 32px;
overflow: hidden;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(148,163,184,0.14);
border: 1px solid rgba(101,121,113,0.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: var(--shadow);
}
.login-showcase {
padding: 56px 52px;
background: linear-gradient(145deg, rgba(79,70,229,0.96), rgba(59,130,246,0.88));
background: linear-gradient(145deg, rgba(15,118,110,0.96), rgba(11,94,87,0.92));
color: #fff;
display: flex;
flex-direction: column;
@@ -119,7 +120,7 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,250,252,0.96));
background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(247,251,248,0.96));
}
.login-card {
width: 100%;
@@ -131,7 +132,7 @@
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(79,70,229,0.08);
background: rgba(15,118,110,0.08);
color: var(--primary);
font-size: 12px;
font-weight: 700;
@@ -146,14 +147,14 @@
.el-input__inner {
height: 48px;
border-radius: 14px;
border: 1px solid rgba(148,163,184,0.22);
background: rgba(248,250,252,0.94);
border: 1px solid rgba(101,121,113,0.22);
background: rgba(247,251,248,0.94);
color: var(--text);
transition: all .18s ease;
}
.el-input__inner:focus {
border-color: rgba(99,102,241,0.42);
box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
border-color: rgba(15,118,110,0.42);
box-shadow: 0 0 0 4px rgba(15,118,110,0.10);
background: #fff;
}
.el-form-item__content { margin-left: 0 !important; }
@@ -166,7 +167,7 @@
color: #fff;
font-weight: 700;
font-size: 15px;
box-shadow: 0 14px 28px rgba(79,70,229,0.20);
box-shadow: 0 14px 28px rgba(15,118,110,0.20);
}
.login-button:hover, .login-button:focus {
opacity: .96;

View File

@@ -475,16 +475,16 @@
.page-hero {
padding: 24px 26px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16);
box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: #6366f1;
color: #0b5e57;
font-weight: 700;
margin-bottom: 8px;
}
@@ -493,11 +493,11 @@
font-size: 30px;
line-height: 1.1;
margin-bottom: 10px;
color: #0f172a;
color: #15211b;
}
.page-hero-copy p {
color: #64748b;
color: #4f6258;
font-size: 14px;
}
@@ -516,7 +516,7 @@
.workspace-header p,
.filter-summary {
font-size: 13px;
color: #64748b;
color: #4f6258;
}
.filter-form {
@@ -533,13 +533,13 @@
}
.message-text-preview {
color: #0f172a;
color: #15211b;
line-height: 1.6;
word-break: break-word;
}
.message-text-preview.is-muted {
color: #64748b;
color: #4f6258;
}
.message-media-preview {
@@ -554,8 +554,8 @@
gap: 8px;
padding: 10px 12px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(148,163,184,0.12), rgba(226,232,240,0.45));
border: 1px solid rgba(148,163,184,0.18);
background: linear-gradient(135deg, rgba(101,121,113,0.12), rgba(214,226,219,0.45));
border: 1px solid rgba(101,121,113,0.18);
}
.message-system-tags {
@@ -574,9 +574,9 @@
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #475569;
color: #3f5148;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(148,163,184,0.2);
border: 1px solid rgba(101,121,113,0.2);
}
.message-type-badge.is-revoke {
@@ -586,7 +586,7 @@
}
.message-system-summary {
color: #334155;
color: #27443a;
line-height: 1.6;
word-break: break-word;
}
@@ -600,14 +600,14 @@
.quoted-media-text {
margin-top: 8px;
color: #64748b;
color: #4f6258;
font-size: 13px;
font-weight: 600;
}
.message-media-label {
font-size: 12px;
color: #64748b;
color: #4f6258;
}
.message-thumb {
@@ -615,8 +615,8 @@
max-height: 120px;
cursor: pointer;
border-radius: 14px;
border: 1px solid rgba(148,163,184,0.16);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(101,121,113,0.16);
box-shadow: 0 10px 24px rgba(21, 33, 27, 0.08);
}
.pagination-container {
@@ -631,11 +631,11 @@
.message-xml {
white-space: pre-wrap;
word-break: break-all;
background: rgba(248,250,252,0.85);
border: 1px solid rgba(148,163,184,0.12);
background: rgba(247,251,248,0.85);
border: 1px solid rgba(101,121,113,0.12);
border-radius: 14px;
padding: 14px;
color: #334155;
color: #27443a;
}
</style>
{% endblock %}

View File

@@ -150,6 +150,6 @@ new Vue({
});
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-hero-actions{display:flex;align-items:center;gap:12px}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:28px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.search-form{margin-bottom:20px}.pagination-container{margin-top:20px;text-align:right}.batch-toolbar{margin-bottom:15px;display:flex;align-items:center}.selected-count{margin-left:15px;color:#64748b}.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.changes-pre{white-space:pre-wrap;word-break:break-word;background:rgba(248,250,252,.85);border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:14px;color:#334155}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-hero-actions{display:flex;align-items:center;gap:12px}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#4f6258;margin-bottom:14px}.overview-value{font-size:28px;font-weight:700;color:#15211b;margin-bottom:10px}.overview-note{font-size:12px;color:#74897f}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.search-form{margin-bottom:20px}.pagination-container{margin-top:20px;text-align:right}.batch-toolbar{margin-bottom:15px;display:flex;align-items:center}.selected-count{margin-left:15px;color:#4f6258}.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.changes-pre{white-space:pre-wrap;word-break:break-word;background:rgba(247,251,248,.85);border:1px solid rgba(101,121,113,.12);border-radius:14px;padding:14px;color:#27443a}
</style>
{% endblock %}

View File

@@ -28,9 +28,9 @@
{% block scripts %}
<script>
new Vue({ el:'#app', mixins:[baseApp], data(){ return { pluginStats:[], pluginTrendVisible:false, selectedPlugin:null } }, computed:{ totalCalls(){ return this.pluginStats.reduce((s,i)=>s+(parseInt(i.total_calls)||0),0); }, averageSuccessRate(){ if(!this.pluginStats.length) return '0.00'; const sum=this.pluginStats.reduce((s,i)=>s+(parseInt(i.total_calls)>0?((parseInt(i.success_calls)/parseInt(i.total_calls))*100):100),0); return (sum/this.pluginStats.length).toFixed(2); } }, mounted(){ this.currentView='2'; this.loadData(); }, methods:{ loadData(){ this.loadPluginStats(parseInt(this.timeRange)); }, loadPluginStats(days){ axios.get(`/api/plugin_stats?days=${days}`).then(r=>{ if(r.data.success) this.pluginStats=r.data.data||[]; }).catch(e=>{ console.error('加载插件统计数据出错:',e); this.$message.error('加载插件统计数据出错'); }); }, viewPluginTrend(plugin){ this.selectedPlugin=plugin; this.pluginTrendVisible=true; const days=parseInt(this.timeRange); axios.get(`/api/plugin_trend?days=${days}&plugin_name=${plugin.plugin_name}`).then(r=>{ if(r.data.success){ const trendData=r.data.data||[]; this.$nextTick(()=>this.renderPluginTrendChart(trendData, plugin.plugin_name)); } }).catch(e=>{ console.error('加载插件趋势数据出错:',e); this.$message.error('加载插件趋势数据出错'); }); }, renderPluginTrendChart(trendData, pluginName){ const ctx=document.getElementById('pluginTrendChart').getContext('2d'); if(this.charts&&this.charts.pluginTrendChart)this.charts.pluginTrendChart.destroy(); if(!this.charts)this.charts={}; const labels=trendData.map(i=>i.date||i.stat_date); const totalData=trendData.map(i=>parseInt(i.total_calls)||0); const successData=trendData.map(i=>parseInt(i.success_calls)||0); const failedData=trendData.map(i=>parseInt(i.failed_calls)||0); this.charts.pluginTrendChart=new Chart(ctx,{ type:'line', data:{ labels, datasets:[ {label:`${pluginName} 总调用`,data:totalData,fill:false,backgroundColor:'rgba(79,70,229,.2)',borderColor:'rgba(79,70,229,1)',tension:.28,borderWidth:3,pointRadius:2},{label:`${pluginName} 成功调用`,data:successData,fill:false,backgroundColor:'rgba(16,185,129,.2)',borderColor:'rgba(16,185,129,1)',tension:.28,borderWidth:3,pointRadius:2},{label:`${pluginName} 失败调用`,data:failedData,fill:false,backgroundColor:'rgba(239,68,68,.2)',borderColor:'rgba(239,68,68,1)',tension:.28,borderWidth:3,pointRadius:2}]}, options:{ responsive:true, scales:{ y:{beginAtZero:true,grid:{color:'rgba(148,163,184,.12)'}}, x:{grid:{display:false}} } } }); } } });
new Vue({ el:'#app', mixins:[baseApp], data(){ return { pluginStats:[], pluginTrendVisible:false, selectedPlugin:null } }, computed:{ totalCalls(){ return this.pluginStats.reduce((s,i)=>s+(parseInt(i.total_calls)||0),0); }, averageSuccessRate(){ if(!this.pluginStats.length) return '0.00'; const sum=this.pluginStats.reduce((s,i)=>s+(parseInt(i.total_calls)>0?((parseInt(i.success_calls)/parseInt(i.total_calls))*100):100),0); return (sum/this.pluginStats.length).toFixed(2); } }, mounted(){ this.currentView='2'; this.loadData(); }, methods:{ loadData(){ this.loadPluginStats(parseInt(this.timeRange)); }, loadPluginStats(days){ axios.get(`/api/plugin_stats?days=${days}`).then(r=>{ if(r.data.success) this.pluginStats=r.data.data||[]; }).catch(e=>{ console.error('加载插件统计数据出错:',e); this.$message.error('加载插件统计数据出错'); }); }, viewPluginTrend(plugin){ this.selectedPlugin=plugin; this.pluginTrendVisible=true; const days=parseInt(this.timeRange); axios.get(`/api/plugin_trend?days=${days}&plugin_name=${plugin.plugin_name}`).then(r=>{ if(r.data.success){ const trendData=r.data.data||[]; this.$nextTick(()=>this.renderPluginTrendChart(trendData, plugin.plugin_name)); } }).catch(e=>{ console.error('加载插件趋势数据出错:',e); this.$message.error('加载插件趋势数据出错'); }); }, renderPluginTrendChart(trendData, pluginName){ const ctx=document.getElementById('pluginTrendChart').getContext('2d'); if(this.charts&&this.charts.pluginTrendChart)this.charts.pluginTrendChart.destroy(); if(!this.charts)this.charts={}; const labels=trendData.map(i=>i.date||i.stat_date); const totalData=trendData.map(i=>parseInt(i.total_calls)||0); const successData=trendData.map(i=>parseInt(i.success_calls)||0); const failedData=trendData.map(i=>parseInt(i.failed_calls)||0); this.charts.pluginTrendChart=new Chart(ctx,{ type:'line', data:{ labels, datasets:[ {label:`${pluginName} 总调用`,data:totalData,fill:false,backgroundColor:'rgba(15,118,110,.2)',borderColor:'rgba(15,118,110,1)',tension:.28,borderWidth:3,pointRadius:2},{label:`${pluginName} 成功调用`,data:successData,fill:false,backgroundColor:'rgba(16,185,129,.2)',borderColor:'rgba(16,185,129,1)',tension:.28,borderWidth:3,pointRadius:2},{label:`${pluginName} 失败调用`,data:failedData,fill:false,backgroundColor:'rgba(239,68,68,.2)',borderColor:'rgba(239,68,68,1)',tension:.28,borderWidth:3,pointRadius:2}]}, options:{ responsive:true, scales:{ y:{beginAtZero:true,grid:{color:'rgba(101,121,113,.12)'}}, x:{grid:{display:false}} } } }); } } });
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(79,70,229,.10);color:#4f46e5;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#0f172a}.entity-subtitle{margin-top:4px;font-size:12px;color:#94a3b8}.chart-shell{padding:16px;border-radius:18px;background:linear-gradient(180deg, rgba(248,250,252,.78), rgba(255,255,255,.96));border:1px solid rgba(148,163,184,.12)}.chart-heading{margin-bottom:12px;font-size:14px;font-weight:600;color:#334155}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#4f6258;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#15211b;margin-bottom:10px}.overview-note{font-size:12px;color:#74897f}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,118,110,.10);color:#0f766e;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#15211b}.entity-subtitle{margin-top:4px;font-size:12px;color:#74897f}.chart-shell{padding:16px;border-radius:18px;background:linear-gradient(180deg, rgba(247,251,248,.78), rgba(255,255,255,.96));border:1px solid rgba(101,121,113,.12)}.chart-heading{margin-bottom:12px;font-size:14px;font-weight:600;color:#27443a}
</style>
{% endblock %}

View File

@@ -361,15 +361,15 @@
gap: 18px;
padding: 24px 26px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16);
box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: #6366f1;
color: #0b5e57;
font-weight: 700;
margin-bottom: 8px;
}
@@ -377,43 +377,43 @@
font-size: 30px;
line-height: 1.1;
margin-bottom: 10px;
color: #0f172a;
color: #15211b;
}
.page-hero-copy p {
color: #64748b;
color: #4f6258;
font-size: 14px;
}
.overview-grid .el-col { margin-bottom: 16px; }
.overview-card { min-height: 112px; }
.overview-card--primary {
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
background: linear-gradient(180deg, rgba(15,118,110,0.10), rgba(255,255,255,0.94)) !important;
}
.overview-card--soft {
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,255,255,0.94)) !important;
}
.overview-label { font-size: 13px; color: #64748b; margin-bottom: 14px; }
.overview-value { font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.overview-note { font-size: 12px; color: #94a3b8; }
.overview-label { font-size: 13px; color: #4f6258; margin-bottom: 14px; }
.overview-value { font-size: 30px; font-weight: 700; color: #15211b; margin-bottom: 10px; }
.overview-note { font-size: 12px; color: #74897f; }
.workspace-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-badge {
width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; background: rgba(79,70,229,0.10); color: #4f46e5; font-size: 12px;
justify-content: center; background: rgba(15,118,110,0.10); color: #0f766e; font-size: 12px;
font-weight: 700; flex-shrink: 0;
}
.entity-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.entity-subtitle { margin-top: 4px; font-size: 12px; color: #94a3b8; }
.entity-title { font-size: 14px; font-weight: 600; color: #15211b; }
.entity-subtitle { margin-top: 4px; font-size: 12px; color: #74897f; }
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plugin-detail-container { max-height: 70vh; overflow-y: auto; }
.plugin-descriptions { width: 100%; }
.dialog-intro { margin-bottom: 14px; color: #64748b; font-size: 13px; }
.dialog-intro { margin-bottom: 14px; color: #4f6258; font-size: 13px; }
.config-container {
max-height: 320px; overflow-y: auto; background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
border-radius: 14px; padding: 12px; font-size: 12px; color: #334155;
max-height: 320px; overflow-y: auto; background: rgba(247,251,248,0.82); border: 1px solid rgba(101,121,113,0.12);
border-radius: 14px; padding: 12px; font-size: 12px; color: #27443a;
}
.config-container pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.command-tags { display: flex; flex-wrap: wrap; gap: 6px; }

View File

@@ -689,8 +689,8 @@
label: '消息数量',
data: this.messageTrendData.counts,
fill: true,
backgroundColor: 'rgba(79, 70, 229, 0.10)',
borderColor: 'rgba(79, 70, 229, 1)',
backgroundColor: 'rgba(15, 118, 110, 0.10)',
borderColor: 'rgba(15, 118, 110, 1)',
tension: 0.28,
borderWidth: 3,
pointRadius: 2
@@ -704,7 +704,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148,163,184,0.12)'
color: 'rgba(101,121,113,0.12)'
}
},
x: {
@@ -756,7 +756,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148,163,184,0.12)'
color: 'rgba(101,121,113,0.12)'
}
},
x: {
@@ -824,7 +824,7 @@
y: {
beginAtZero: true,
grid: {
color: 'rgba(148,163,184,0.12)'
color: 'rgba(101,121,113,0.12)'
}
},
x: {
@@ -868,16 +868,16 @@
gap: 18px;
padding: 24px 26px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16);
box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: #6366f1;
color: #0b5e57;
font-weight: 700;
margin-bottom: 8px;
}
@@ -886,11 +886,11 @@
font-size: 30px;
line-height: 1.1;
margin-bottom: 10px;
color: #0f172a;
color: #15211b;
}
.page-hero-copy p {
color: #64748b;
color: #4f6258;
font-size: 14px;
}
@@ -913,29 +913,29 @@
}
.overview-card--primary {
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
background: linear-gradient(180deg, rgba(15,118,110,0.10), rgba(255,255,255,0.94)) !important;
}
.overview-card--soft {
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,255,255,0.94)) !important;
}
.overview-label {
font-size: 13px;
color: #64748b;
color: #4f6258;
margin-bottom: 14px;
}
.overview-value {
font-size: 30px;
font-weight: 700;
color: #0f172a;
color: #15211b;
margin-bottom: 10px;
}
.overview-note {
font-size: 12px;
color: #94a3b8;
color: #74897f;
}
.workspace-header {
@@ -952,7 +952,7 @@
.workspace-header p {
font-size: 13px;
color: #64748b;
color: #4f6258;
}
.workspace-actions {
@@ -964,7 +964,7 @@
.selection-summary {
font-size: 13px;
color: #475569;
color: #3f5148;
margin-right: 4px;
}
@@ -981,8 +981,8 @@
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(79,70,229,0.10);
color: #4f46e5;
background: rgba(15,118,110,0.10);
color: #0f766e;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
@@ -991,13 +991,13 @@
.entity-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
color: #15211b;
}
.entity-subtitle {
margin-top: 4px;
font-size: 12px;
color: #94a3b8;
color: #74897f;
}
.action-row {
@@ -1009,7 +1009,7 @@
.dialog-intro {
margin-bottom: 14px;
color: #64748b;
color: #4f6258;
font-size: 13px;
}
@@ -1023,15 +1023,15 @@
.chart-shell {
padding: 16px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(248,250,252,0.78), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.12);
background: linear-gradient(180deg, rgba(247,251,248,0.78), rgba(255,255,255,0.96));
border: 1px solid rgba(101,121,113,0.12);
}
.chart-heading {
margin-bottom: 12px;
font-size: 14px;
font-weight: 600;
color: #334155;
color: #27443a;
}
.detail-hero {
@@ -1043,7 +1043,7 @@
margin-bottom: 16px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.14);
border: 1px solid rgba(101,121,113,0.14);
}
.detail-health-label {
@@ -1062,7 +1062,7 @@
.detail-health-note {
font-size: 13px;
color: #64748b;
color: #4f6258;
}
.detail-tags {
@@ -1087,7 +1087,7 @@
.section-title {
font-size: 15px;
font-weight: 600;
color: #0f172a;
color: #15211b;
margin-bottom: 12px;
}
@@ -1103,20 +1103,20 @@
.diagnosis-title {
font-size: 13px;
color: #64748b;
color: #4f6258;
margin-bottom: 10px;
}
.diagnosis-value {
font-size: 24px;
font-weight: 700;
color: #0f172a;
color: #15211b;
margin-bottom: 8px;
}
.diagnosis-desc {
font-size: 12px;
color: #94a3b8;
color: #74897f;
line-height: 1.5;
}
@@ -1133,12 +1133,12 @@
align-items: center;
justify-content: space-between;
font-weight: 600;
color: #0f172a;
color: #15211b;
}
.detail-card-sub {
font-size: 12px;
color: #94a3b8;
color: #74897f;
font-weight: 500;
}
@@ -1153,7 +1153,7 @@
.empty-inline,
.detail-inline-note {
font-size: 12px;
color: #64748b;
color: #4f6258;
}
.detail-inline-note {
@@ -1183,19 +1183,19 @@
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,255,255,0.96));
border: 1px solid rgba(148,163,184,0.12);
border: 1px solid rgba(101,121,113,0.12);
}
.peak-hour-rank {
font-size: 13px;
color: #0f172a;
color: #15211b;
font-weight: 600;
margin-bottom: 6px;
}
.peak-hour-count {
font-size: 12px;
color: #64748b;
color: #4f6258;
}
.chart-shell--compact {

View File

@@ -260,20 +260,20 @@
.system-page { display: flex; flex-direction: column; gap: 24px; }
.page-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
background: linear-gradient(135deg, rgba(248,250,252,0.96), rgba(226,232,240,0.88));
border: 1px solid rgba(148,163,184,0.16);
border-radius: 24px; padding: 28px 32px; box-shadow: 0 18px 48px rgba(15,23,42,0.06);
background: linear-gradient(135deg, rgba(247,251,248,0.96), rgba(214,226,219,0.88));
border: 1px solid rgba(101,121,113,0.16);
border-radius: 24px; padding: 28px 32px; box-shadow: 0 18px 48px rgba(21,33,27,0.06);
}
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
.page-hero-copy p { color: #64748b; font-size: 14px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #0b5e57; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #15211b; }
.page-hero-copy p { color: #4f6258; font-size: 14px; }
.workspace-card .el-card__body { display: flex; flex-direction: column; gap: 16px; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.config-meta { display: flex; gap: 12px; color: #64748b; font-size: 12px; flex-wrap: wrap; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.config-meta { display: flex; gap: 12px; color: #4f6258; font-size: 12px; flex-wrap: wrap; }
.backend-list { display: flex; flex-direction: column; gap: 16px; }
.backend-card { border-radius: 18px; border: 1px solid rgba(148,163,184,0.16); }
.backend-card { border-radius: 18px; border: 1px solid rgba(101,121,113,0.16); }
.backend-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.backend-grid {
display: grid;

View File

@@ -89,23 +89,23 @@
.page-shell { display: flex; flex-direction: column; gap: 16px; }
.page-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(14,165,233,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(101, 121, 113, 0.16); box-shadow: 0 18px 40px rgba(21, 33, 27, 0.06);
}
.page-hero-actions { display: flex; align-items: center; gap: 12px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
.page-hero-copy p { color: #64748b; font-size: 14px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #0b5e57; font-weight: 700; margin-bottom: 8px; }
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #15211b; }
.page-hero-copy p { color: #4f6258; font-size: 14px; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.workspace-header p { font-size: 13px; color: #4f6258; }
.iframe-url {
max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
color: #94a3b8; padding: 8px 12px; border-radius: 999px; background: rgba(248,250,252,0.9); border: 1px solid rgba(148,163,184,0.12);
color: #74897f; padding: 8px 12px; border-radius: 999px; background: rgba(247,251,248,0.9); border: 1px solid rgba(101,121,113,0.12);
}
.iframe-shell-card { height: calc(100vh - 230px); }
.iframe-shell-card .el-card__body { height: calc(100% - 73px); }
.iframe-shell { height: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(148,163,184,0.12); background: rgba(248,250,252,0.82); }
.iframe-shell { height: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(101,121,113,0.12); background: rgba(247,251,248,0.82); }
.iframe-shell iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
@media (max-width: 960px) {
.page-hero { flex-direction: column; align-items: flex-start; }

View File

@@ -57,6 +57,6 @@
new Vue({ el:'#app', mixins:[baseApp], data(){return{userStats:[],detailDialogVisible:false,detailLoading:false,detailData:null}}, computed:{ totalCalls(){return this.userStats.reduce((s,i)=>s+(parseInt(i.total_calls)||0),0)}, averageSuccessRate(){ if(!this.userStats.length) return '0.00'; const sum=this.userStats.reduce((s,i)=>s+(i.total_calls?((i.success_calls/i.total_calls)*100):0),0); return (sum/this.userStats.length).toFixed(2)} }, mounted(){ this.currentView='3'; this.loadData(); }, methods:{ loadData(){ this.loadUserStats(parseInt(this.timeRange)); }, loadUserStats(days){ axios.get(`/api/user_stats?days=${days}&limit=20`).then(r=>{ if(r.data.success) this.userStats=r.data.data||[]; }).catch(e=>{ console.error('加载用户统计数据出错:',e); this.$message.error('加载用户统计数据出错'); }); }, viewUserDetail(user){ if(!user||!user.user_id)return; this.detailDialogVisible=true; this.detailLoading=true; this.detailData=null; axios.get(`/api/user_stats/${encodeURIComponent(user.user_id)}?days=30`).then(r=>{ if(r.data.success){ this.detailData=r.data.data||null; } else { this.$message.error(r.data.error||'加载用户详情失败'); } }).catch(e=>{ console.error('加载用户详情出错:',e); this.$message.error('加载用户详情出错'); }).finally(()=>{ this.detailLoading=false; }); } } });
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(79,70,229,.10);color:#4f46e5;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#0f172a}.entity-subtitle{margin-top:4px;font-size:12px;color:#94a3b8}.detail-section{margin-top:18px}.section-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:10px}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#4f6258;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#15211b;margin-bottom:10px}.overview-note{font-size:12px;color:#74897f}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,118,110,.10);color:#0f766e;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#15211b}.entity-subtitle{margin-top:4px;font-size:12px;color:#74897f}.detail-section{margin-top:18px}.section-title{font-size:15px;font-weight:700;color:#15211b;margin-bottom:10px}
</style>
{% endblock %}

View File

@@ -66,7 +66,7 @@
<el-form :model="addGroupForm" :rules="addGroupRules" ref="addGroupForm">
<el-form-item label="选择微信群" prop="wx_group_id">
<el-select v-model="addGroupForm.wx_group_id" filterable placeholder="请选择微信群" style="width:100%">
<el-option v-for="group in availableGroups" :key="group.wxid" :label="group.name" :value="group.wxid"><span style="float:left">{% raw %}{{ group.name }}{% endraw %}</span><span style="float:right;color:#94a3b8;font-size:13px">{% raw %}{{ group.wxid }}{% endraw %}</span></el-option>
<el-option v-for="group in availableGroups" :key="group.wxid" :label="group.name" :value="group.wxid"><span style="float:left">{% raw %}{{ group.name }}{% endraw %}</span><span style="float:right;color:#74897f;font-size:13px">{% raw %}{{ group.wxid }}{% endraw %}</span></el-option>
</el-select>
</el-form-item>
</el-form>
@@ -97,6 +97,6 @@ new Vue({
});
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-hero-actions{display:flex;align-items:center;gap:12px}.hero-search{width:260px}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(79,70,229,.10);color:#4f46e5;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#0f172a}.entity-subtitle{margin-top:4px;font-size:12px;color:#94a3b8}.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.expand-shell{padding:8px 0}.expand-actions{margin-top:12px}.dialog-intro{margin-bottom:14px;color:#64748b;font-size:13px}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-hero-actions{display:flex;align-items:center;gap:12px}.hero-search{width:260px}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#4f6258;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#15211b;margin-bottom:10px}.overview-note{font-size:12px;color:#74897f}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,118,110,.10);color:#0f766e;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#15211b}.entity-subtitle{margin-top:4px;font-size:12px;color:#74897f}.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.expand-shell{padding:8px 0}.expand-actions{margin-top:12px}.dialog-intro{margin-bottom:14px;color:#4f6258;font-size:13px}
</style>
{% endblock %}

View File

@@ -28,6 +28,6 @@
new Vue({ el:'#app', mixins:[baseApp], data(){ return { loading:false, logType:'info', logLines:100, logContent:[], logText:'', refreshInterval:0, refreshTimer:null, currentView:'9', showTimeRangeSelector:false, cancelSource:null, isAutoScroll:true } }, mounted(){ this.loadLogs(); this.$nextTick(()=>{ const logDiv=this.$el.querySelector('.log-content'); if(logDiv){ logDiv.addEventListener('scroll',()=>{ const nearBottom=(logDiv.scrollHeight-logDiv.scrollTop-logDiv.clientHeight)<50; this.isAutoScroll=nearBottom; }); } }); }, beforeDestroy(){ this.clearRefreshTimer(); if(this.cancelSource){ this.cancelSource.cancel('component destroyed'); this.cancelSource=null; } }, methods:{ loadLogs(){ this.loading=true; if(this.cancelSource){ this.cancelSource.cancel('new request'); } this.cancelSource=axios.CancelToken.source(); axios.get(`/api/wx_logs`,{ params:{ type:this.logType, lines:this.logLines }, cancelToken:this.cancelSource.token }).then(response=>{ if(response.data.success){ this.logContent=response.data.data.content||[]; this.logText=this.logContent.join('\n'); this.$nextTick(()=>{ const logDiv=this.$el.querySelector('.log-content'); const pre=this.$refs.logPre; if(pre) pre.textContent=this.logText; if(logDiv&&this.isAutoScroll) logDiv.scrollTop=logDiv.scrollHeight; }); } else { this.$message.error('加载日志失败'); } }).catch(error=>{ if(!axios.isCancel(error)){ console.error('加载日志出错:',error); this.$message.error('加载日志出错'); } }).finally(()=>{ this.loading=false; }); }, handleRefreshInterval(){ this.clearRefreshTimer(); if(this.refreshInterval>0){ this.refreshTimer=setInterval(()=>this.loadLogs(), this.refreshInterval*1000); } }, clearRefreshTimer(){ if(this.refreshTimer){ clearInterval(this.refreshTimer); this.refreshTimer=null; } } } });
</script>
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.log-card{height:calc(100vh - 230px)}.log-card .el-card__body{height:calc(100% - 73px);display:flex;flex-direction:column;overflow:hidden}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header--wrap{align-items:flex-start}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.log-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.log-content{flex:1;overflow-y:auto !important;overflow-x:scroll !important;background:#0f172a;padding:14px;border-radius:18px;border:1px solid rgba(148,163,184,.12);box-sizing:border-box;min-height:0;color:#dbeafe}.log-content pre{margin:0;white-space:pre;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.45;color:inherit}.empty-log{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(15,118,110,.10), rgba(14,165,233,.08), rgba(255,255,255,.9));border:1px solid rgba(101,121,113,.16);box-shadow:0 18px 40px rgba(21,33,27,.06)}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0b5e57;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#15211b}.page-hero-copy p{color:#4f6258;font-size:14px}.log-card{height:calc(100vh - 230px)}.log-card .el-card__body{height:calc(100% - 73px);display:flex;flex-direction:column;overflow:hidden}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header--wrap{align-items:flex-start}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#4f6258}.toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.log-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.log-content{flex:1;overflow-y:auto !important;overflow-x:scroll !important;background:#15211b;padding:14px;border-radius:18px;border:1px solid rgba(101,121,113,.12);box-sizing:border-box;min-height:0;color:#dbeafe}.log-content pre{margin:0;white-space:pre;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.45;color:inherit}.empty-log{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
</style>
{% endblock %}