396 lines
14 KiB
CSS
396 lines
14 KiB
CSS
/* --- Query form styles (aligned with gateway UI tone) --- */
|
|
.form-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
.form-item { display: inline-flex; align-items: center; gap: 6px; }
|
|
.form-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
|
|
.form-input, .form-select {
|
|
height: 32px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--soft);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
}
|
|
.form-select[multiple] {
|
|
height: 120px;
|
|
padding: 6px 8px;
|
|
}
|
|
.dropdown-panel {
|
|
background: var(--soft);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
min-width: 220px;
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
|
|
}
|
|
.form-split { color: var(--muted); }
|
|
:root{ /* 深色科技风主题 - 参考 x.ai */
|
|
--bg: #0a0a0f;
|
|
--bg-secondary: #12121a;
|
|
--panel: rgba(20, 20, 30, 0.6);
|
|
--panel-solid: #14141e;
|
|
--soft: rgba(30, 30, 45, 0.5);
|
|
--text: #e8e8f0;
|
|
--text-secondary: #a0a0b0;
|
|
--muted: #6a6a7a;
|
|
--accent: #7c5cff;
|
|
--accent-glow: rgba(124, 92, 255, 0.3);
|
|
--accent-gradient: linear-gradient(135deg, #7c5cff 0%, #a084ff 100%);
|
|
--primary-gradient: linear-gradient(135deg, #7c5cff 0%, #5d3fd3 100%);
|
|
--secondary-gradient: linear-gradient(135deg, #ff6b9d 0%, #c06cf5 100%);
|
|
--success-gradient: linear-gradient(135deg, #00d4ff 0%, #0088ff 100%);
|
|
--warning-gradient: linear-gradient(135deg, #ff9f1c 0%, #ffbf69 100%);
|
|
--info-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--good: #00d4aa;
|
|
--warn: #ffb347;
|
|
--bad: #ff6b9d;
|
|
--border: rgba(124, 92, 255, 0.15);
|
|
--border-subtle: rgba(255, 255, 255, 0.05);
|
|
--shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
|
|
--shadow-colored: 0 10px 30px rgba(124, 92, 255, 0.3);
|
|
--glow: 0 0 20px rgba(124, 92, 255, 0.4);
|
|
}
|
|
:root.light{
|
|
--bg: #f5f7fb;
|
|
--panel: #ffffff;
|
|
--soft: #f1f3f7;
|
|
--text: #171a1f;
|
|
--muted: #4d5562;
|
|
--accent: #5f97d2;
|
|
--good: #2fb167;
|
|
--warn: #caa410;
|
|
--bad: #b6404a;
|
|
--border: #e5e7ef;
|
|
--shadow: 0 10px 25px rgba(10,16,25,.08);
|
|
}
|
|
*{box-sizing:border-box; margin:0; padding:0}
|
|
html,body{height:100%; width:100%; margin:0; padding:0}
|
|
#root{width:100%; height:100%; margin:0; padding:0}
|
|
body{
|
|
margin:0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
|
background: var(--bg);
|
|
color:var(--text);
|
|
display:flex;
|
|
min-height:100vh;
|
|
width:100%;
|
|
overflow:hidden;
|
|
position: relative;
|
|
}
|
|
/* 科技感网格背景 - 类似 x.ai */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(124, 92, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(124, 92, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
/* 光晕效果 */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(
|
|
circle at 50% 50%,
|
|
rgba(124, 92, 255, 0.08) 0%,
|
|
transparent 50%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
animation: pulse 8s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.5; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.1); }
|
|
}
|
|
a{color:inherit; text-decoration:none}
|
|
.container{display:flex; flex:1; width:100vw; height:100vh; max-width:none; margin:0; padding:0}
|
|
|
|
.sidebar{
|
|
border-right:1px solid rgba(102, 126, 234, 0.1);
|
|
background: linear-gradient(180deg,
|
|
rgba(102, 126, 234, 0.05) 0%,
|
|
rgba(118, 75, 162, 0.03) 50%,
|
|
var(--panel) 100%
|
|
);
|
|
backdrop-filter: blur(10px);
|
|
padding:20px; height:100vh; flex-shrink:0;
|
|
display:flex; flex-direction:column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.sidebar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 200px;
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
|
|
border-radius: 0 0 50% 50%;
|
|
pointer-events: none;
|
|
}
|
|
.brand{ display:flex; align-items:center; gap:10px; padding:8px 6px; margin-bottom:16px; position: relative; z-index: 1; }
|
|
.brand .logo{
|
|
width:32px; height:32px; border-radius:10px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.brand .logo::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.3),
|
|
transparent
|
|
);
|
|
transform: rotate(45deg);
|
|
animation: shimmer 3s infinite;
|
|
}
|
|
@keyframes shimmer {
|
|
0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
|
50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
|
}
|
|
.brand h1{
|
|
font-size:17px;
|
|
letter-spacing:.4px;
|
|
margin:0;
|
|
font-weight:800;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.sidegroup{margin-top:16px}
|
|
.sidegroup h2{ font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.8px; margin:12px 8px; }
|
|
.nav{display:flex; flex-direction:column; gap:4px}
|
|
.nav a{
|
|
display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
|
|
color:var(--text); border:1px solid transparent;
|
|
}
|
|
.nav a:hover{background:var(--soft)}
|
|
.nav a.active{background:var(--soft); border-color:var(--border)}
|
|
|
|
.header{
|
|
display:flex; align-items:center; justify-content:space-between; padding:18px 24px;
|
|
border-bottom:1px solid rgba(102, 126, 234, 0.1);
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.98) 100%);
|
|
backdrop-filter: blur(10px);
|
|
z-index:6;
|
|
flex-shrink:0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
|
}
|
|
.search{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.03) 100%);
|
|
padding:10px 16px;
|
|
border-radius:14px;
|
|
border:1px solid rgba(102, 126, 234, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.search:focus-within {
|
|
border-color: rgba(102, 126, 234, 0.4);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
transform: translateY(-1px);
|
|
}
|
|
.search input{background:transparent; border:none; outline:none; color:var(--text); width:280px; font-size: 14px;}
|
|
.actions{display:flex; align-items:center; gap:12px}
|
|
.btn{
|
|
padding:10px 18px;
|
|
border-radius:12px;
|
|
border:1px solid rgba(102, 126, 234, 0.2);
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
|
|
color:var(--text);
|
|
cursor:pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
border-color: rgba(102, 126, 234, 0.4);
|
|
}
|
|
.btn.primary{
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-color:transparent;
|
|
color:white;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
font-weight: 600;
|
|
}
|
|
.btn.primary:hover {
|
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.main{flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; overflow:hidden; width:100%}
|
|
.subnav{
|
|
background:var(--panel);
|
|
padding:12px 22px; border-bottom:1px solid var(--border); flex-shrink:0;
|
|
overflow-x:auto; -webkit-overflow-scrolling:touch;
|
|
}
|
|
.segment{
|
|
display:flex; gap:8px; background:var(--soft); padding:6px; border-radius:12px; border:1px solid var(--border); width:max-content;
|
|
}
|
|
.segment button{
|
|
border:none; background:transparent; color:var(--muted); padding:8px 12px; border-radius:8px; cursor:pointer;
|
|
}
|
|
.segment button.active{
|
|
background:var(--panel); color:var(--text); box-shadow:var(--shadow);
|
|
}
|
|
|
|
.content{padding:22px; display:flex; flex-direction:column; gap:16px; flex:1; overflow-y:auto; min-height:0; box-sizing:border-box}
|
|
|
|
.panel{
|
|
background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow);
|
|
width:100%;
|
|
}
|
|
.panel h2{margin:0 0 8px 0; font-size:16px}
|
|
.panel .desc{color:var(--muted); font-size:13px; margin-bottom:10px}
|
|
|
|
.flex-2{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
|
|
.flex-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
|
|
.full{display:block; width:100%; box-sizing:border-box}
|
|
|
|
.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom: 16px;}
|
|
.kpi{
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
|
|
border:1px solid rgba(102, 126, 234, 0.1);
|
|
border-radius:16px;
|
|
padding:18px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
}
|
|
.kpi::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: var(--primary-gradient);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.kpi:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
|
|
border-color: rgba(102, 126, 234, 0.3);
|
|
}
|
|
.kpi:hover::before {
|
|
opacity: 1;
|
|
}
|
|
.kpi:nth-child(1)::before { background: var(--primary-gradient); }
|
|
.kpi:nth-child(2)::before { background: var(--success-gradient); }
|
|
.kpi:nth-child(3)::before { background: var(--warning-gradient); }
|
|
.kpi:nth-child(4)::before { background: var(--secondary-gradient); }
|
|
.kpi h3{margin:0; font-size:13px; color:var(--muted); font-weight: 600; letter-spacing: 0.3px;}
|
|
.kpi .num{
|
|
font-size:28px;
|
|
font-weight:900;
|
|
margin-top:8px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.kpi .delta{font-size:12px; margin-left:8px; padding:2px 6px; border-radius:8px; background:var(--panel); border:1px solid var(--border)}
|
|
|
|
.table{width:100%; border-collapse:collapse; font-size:14px; min-width:800px; table-layout:fixed; box-sizing:border-box}
|
|
.table th, .table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
|
|
.table thead th{color:var(--muted); font-weight:600}
|
|
.table-container{overflow-x:auto; width:100%; max-width:100%; -webkit-overflow-scrolling:touch; box-sizing:border-box}
|
|
.table th:nth-child(1), .table td:nth-child(1){width:8%}
|
|
.table th:nth-child(2), .table td:nth-child(2){width:15%}
|
|
.table th:nth-child(3), .table td:nth-child(3){width:12%}
|
|
.table th:nth-child(4), .table td:nth-child(4){width:15%}
|
|
.table th:nth-child(5), .table td:nth-child(5){width:15%}
|
|
.table th:nth-child(6), .table td:nth-child(6){width:15%}
|
|
.table th:nth-child(7), .table td:nth-child(7){width:20%}
|
|
.badge{font-size:12px; padding:4px 8px; border-radius:999px; background:var(--soft); border:1px solid var(--border)}
|
|
.badge.good{background:rgba(47,177,103,.12); border-color:rgba(47,177,103,.35); color:var(--good)}
|
|
.badge.warn{background:rgba(202,164,16,.12); border-color:rgba(202,164,16,.35); color:var(--warn)}
|
|
.badge.bad{ background:rgba(182,64,74,.12); border-color:rgba(182,64,74,.35); color:var(--bad)}
|
|
|
|
.chart{ height:260px; border:1px dashed var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; }
|
|
|
|
.footer{padding:12px 22px; border-top:1px solid var(--border); color:var(--muted)}
|
|
|
|
.hidden{display:none}
|
|
|
|
@media (max-width: 1200px){
|
|
.kpis{grid-template-columns: repeat(2, minmax(0,1fr));}
|
|
.flex-3{grid-template-columns: repeat(2, minmax(0,1fr));}
|
|
.flex-2{grid-template-columns: 1fr;}
|
|
.table{font-size:13px; min-width:700px}
|
|
.table th, .table td{padding:8px 10px}
|
|
.table th:nth-child(1), .table td:nth-child(1){width:10%}
|
|
.table th:nth-child(2), .table td:nth-child(2){width:18%}
|
|
.table th:nth-child(3), .table td:nth-child(3){width:15%}
|
|
.table th:nth-child(4), .table td:nth-child(4){width:18%}
|
|
.table th:nth-child(5), .table td:nth-child(5){width:18%}
|
|
.table th:nth-child(6), .table td:nth-child(6){width:15%}
|
|
.table th:nth-child(7), .table td:nth-child(7){width:6%}
|
|
}
|
|
@media (max-width: 900px){
|
|
.sidebar{display:none}
|
|
.sidebar.mobile-open{display:flex; position:fixed; left:0; top:0; height:100vh; width:240px; z-index:1000;}
|
|
.mobile-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:999}
|
|
.mobile-toggle{display:inline-flex; align-items:center; gap:6px}
|
|
.kpis{grid-template-columns: 1fr;}
|
|
.flex-3{grid-template-columns: 1fr;}
|
|
.table{font-size:12px; min-width:600px}
|
|
.table th, .table td{padding:6px 8px}
|
|
.search input{width:200px}
|
|
.header{padding:12px 16px}
|
|
.content{padding:16px; overflow-x:auto}
|
|
.table th:nth-child(1), .table td:nth-child(1){width:12%}
|
|
.table th:nth-child(2), .table td:nth-child(2){width:20%}
|
|
.table th:nth-child(3), .table td:nth-child(3){width:18%}
|
|
.table th:nth-child(4), .table td:nth-child(4){width:20%}
|
|
.table th:nth-child(5), .table td:nth-child(5){width:18%}
|
|
.table th:nth-child(6), .table td:nth-child(6){width:12%}
|
|
.table th:nth-child(7), .table td:nth-child(7){width:0%; display:none}
|
|
}
|
|
@media (max-width: 600px){
|
|
.table{min-width:500px}
|
|
.table th, .table td{padding:4px 6px; font-size:11px}
|
|
.kpi .num{font-size:20px}
|
|
.kpi h3{font-size:11px}
|
|
.table th:nth-child(1), .table td:nth-child(1){width:15%}
|
|
.table th:nth-child(2), .table td:nth-child(2){width:25%}
|
|
.table th:nth-child(3), .table td:nth-child(3){width:20%}
|
|
.table th:nth-child(4), .table td:nth-child(4){width:0%; display:none}
|
|
.table th:nth-child(5), .table td:nth-child(5){width:25%}
|
|
.table th:nth-child(6), .table td:nth-child(6){width:15%}
|
|
.table th:nth-child(7), .table td:nth-child(7){width:0%; display:none}
|
|
}
|