feat(dashboard): unify global UI theme across all admin templates
This commit is contained in:
@@ -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 %}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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)); }
|
||||
}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user