merge(frontend): sync main styles with auth flow
This commit is contained in:
mac
@@ -52,23 +52,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
/* 所有样式已在 global.css 中定义 */
|
||||
</style>
|
||||
|
||||
@@ -53,23 +53,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
/* 所有样式已在 global.css 中定义 */
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,9 @@
|
||||
<h2>{{ title }}</h2>
|
||||
<p>{{ subtitle }}</p>
|
||||
</div>
|
||||
<el-button type="primary" size="large" style="width: 100%" @click="redirectToSSO('', '/')">{{ buttonText }}</el-button>
|
||||
<el-button type="primary" size="large" class="login-btn" @click="redirectToSSO('', '/')">
|
||||
{{ buttonText }}
|
||||
</el-button>
|
||||
<div class="login-footer">
|
||||
<p>统一 LDAP 账号，同账号同密码</p>
|
||||
</div>
|
||||
@@ -48,10 +50,14 @@ onMounted(() => {
|
||||
width: 400px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
@@ -70,15 +76,15 @@ onMounted(() => {
|
||||
.login-header .brand .mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--accent), #1C8F69);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-end));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--mono);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #08140F;
|
||||
color: var(--bg-deep);
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
@@ -117,7 +123,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:hover) {
|
||||
border-color: #3A4356;
|
||||
border-color: var(--hover-border);
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
@@ -131,11 +137,11 @@ onMounted(() => {
|
||||
:deep(.el-button--primary) {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #06150F;
|
||||
color: var(--bg-deep);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.el-button--primary:hover) {
|
||||
background: #55E8B3;
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
<td class="strong mono">{{ node.name }}</td>
|
||||
<td class="mono">{{ node.ip }}</td>
|
||||
<td><span class="tag biz" :style="{ color: node.labelColor, borderColor: node.labelBorder }">{{ node.label }}</span></td>
|
||||
<td class="mono" style="font-size: 11px">{{ node.taint }}</td>
|
||||
<td class="mono text-xs">{{ node.taint }}</td>
|
||||
<td class="mono">{{ node.spec }}</td>
|
||||
<td><span class="bar-wrap"><span class="bar-fill" :class="node.cpuClass" :style="{ width: node.cpu + '%' }"></span></span>{{ node.cpu }}%</td>
|
||||
<td :class="['status-text', node.statusClass]">● {{ node.status }}</td>
|
||||
@@ -86,170 +86,17 @@ const clusters = ref([
|
||||
])
|
||||
|
||||
const nodes = ref([
|
||||
{ name: 'bj-node-014', ip: '10.21.4.14', label: 'business-line=kodo', labelColor: '#8EC8FF', labelBorder: '#1C3A5C', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 58, cpuClass: '', status: 'Ready', statusClass: 'ok' },
|
||||
{ name: 'bj-node-015', ip: '10.21.4.15', label: 'business-line=kodo', labelColor: '#8EC8FF', labelBorder: '#1C3A5C', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' },
|
||||
{ name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=las', labelColor: '#C9A6FF', labelBorder: '#3A2C5C', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' },
|
||||
{ name: 'bj-node-014', ip: '10.21.4.14', label: 'business-line=kodo', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 58, cpuClass: '', status: 'Ready', statusClass: 'ok' },
|
||||
{ name: 'bj-node-015', ip: '10.21.4.15', label: 'business-line=kodo', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'kodo:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' },
|
||||
{ name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=las', labelColor: 'var(--tag-purple-text)', labelBorder: 'var(--tag-purple-border)', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' },
|
||||
{ name: 'bj-node-048', ip: '10.21.4.48', label: '未分配', labelColor: 'var(--text-dim)', labelBorder: 'var(--line)', taint: '—', spec: '32C/128G', cpu: 4, cpuClass: '', status: 'Ready · 空闲', statusClass: 'ok' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.tag.zone-a {
|
||||
color: #8EC8FF;
|
||||
border-color: #1C3A5C;
|
||||
background: #0E1C2C;
|
||||
}
|
||||
|
||||
.tag.zone-b {
|
||||
color: #C9A6FF;
|
||||
border-color: #3A2C5C;
|
||||
background: #1A1430;
|
||||
}
|
||||
|
||||
.tag.zone-c {
|
||||
color: #FFC97A;
|
||||
border-color: #5C4A1C;
|
||||
background: #241B0A;
|
||||
}
|
||||
/* 公共样式已在 global.css 中定义 */
|
||||
|
||||
.tag.biz {
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.bar-wrap {
|
||||
width: 90px;
|
||||
height: 5px;
|
||||
background: #262C38;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.bar-fill.warn {
|
||||
background: var(--warn);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">同步状态</div>
|
||||
<div class="value" style="color: var(--accent); font-size: 16px">● 正常</div>
|
||||
<div class="value accent-pill">● 正常</div>
|
||||
<div class="delta">最近发布 09:12:30</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,10 +41,10 @@
|
||||
<h3>统一入口</h3>
|
||||
<span class="meta">Apollo Portal · LDAP 单点登录</span>
|
||||
</div>
|
||||
<div class="panel-body" style="padding: 16px">
|
||||
<div class="panel-body padded">
|
||||
<div class="ext-card">
|
||||
<div class="ext-top">
|
||||
<div class="ext-logo" style="background: #1C2A3A; color: #8EC8FF">AP</div>
|
||||
<div class="ext-logo ap-logo">AP</div>
|
||||
<div>
|
||||
<h4>Apollo Portal</h4>
|
||||
<div class="ext-sub">apollo.xinfra.internal</div>
|
||||
@@ -81,7 +81,7 @@
|
||||
<tr v-for="cluster in clusters" :key="cluster.name" class="tr-hover">
|
||||
<td><span class="tag" :class="cluster.zoneClass">{{ cluster.name }}</span></td>
|
||||
<td class="mono">cluster={{ cluster.cluster }}</td>
|
||||
<td class="mono" style="font-size: 11px">{{ cluster.address }}</td>
|
||||
<td class="mono text-xs">{{ cluster.address }}</td>
|
||||
<td class="mono">{{ cluster.type }}</td>
|
||||
<td class="mono">{{ cluster.biz }}</td>
|
||||
<td class="mono">{{ cluster.items }}</td>
|
||||
@@ -109,241 +109,17 @@ const clusters = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.env-pill {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--accent-dim);
|
||||
background: #0F261D;
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-family: var(--mono);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .delta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.ext-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.ext-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ext-logo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--mono);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
/* 公共样式已在 global.css 中定义 */
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ext-sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: var(--text-mid);
|
||||
line-height: 1.6;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.sso-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.sso-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.tag.zone-a {
|
||||
color: #8EC8FF;
|
||||
border-color: #1C3A5C;
|
||||
background: #0E1C2C;
|
||||
}
|
||||
|
||||
.tag.zone-b {
|
||||
color: #C9A6FF;
|
||||
border-color: #3A2C5C;
|
||||
background: #1A1430;
|
||||
}
|
||||
|
||||
.tag.zone-c {
|
||||
color: #FFC97A;
|
||||
border-color: #5C4A1C;
|
||||
background: #241B0A;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.status-text.idle {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">进行中任务</div>
|
||||
<div class="value" style="color: var(--warn)">2</div>
|
||||
<div class="value warn">2</div>
|
||||
<div class="delta warn">1 个待关注</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,7 +46,7 @@
|
||||
<div class="topo-cluster">
|
||||
<div class="tname">
|
||||
<span class="tag zone-a">IDC-华北机房</span>
|
||||
<span class="mono" style="color: var(--text-dim)">46节点</span>
|
||||
<span class="mono text-dim">46节点</span>
|
||||
</div>
|
||||
<div class="node-grid">
|
||||
<div v-for="i in 24" :key="i" :class="['node-cell', i <= 18 ? 'a' : '']"></div>
|
||||
@@ -55,7 +55,7 @@
|
||||
<div class="topo-cluster">
|
||||
<div class="tname">
|
||||
<span class="tag zone-b">IDC-华东机房</span>
|
||||
<span class="mono" style="color: var(--text-dim)">52节点</span>
|
||||
<span class="mono text-dim">52节点</span>
|
||||
</div>
|
||||
<div class="node-grid">
|
||||
<div v-for="i in 24" :key="i" :class="['node-cell', i <= 20 ? 'b' : '']"></div>
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="topo-cluster">
|
||||
<div class="tname">
|
||||
<span class="tag zone-c">阿里云-华南</span>
|
||||
<span class="mono" style="color: var(--text-dim)">30节点</span>
|
||||
<span class="mono text-dim">30节点</span>
|
||||
</div>
|
||||
<div class="node-grid">
|
||||
<div v-for="i in 18" :key="i" :class="['node-cell', i <= 12 ? 'c' : '']"></div>
|
||||
@@ -127,107 +127,7 @@ const refresh = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-family: var(--mono);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .delta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-card .delta.up {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-card .delta.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.cols-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
/* 公共样式(.page-head, .stat-row, .cols-2, .panel, table, .tag, .status-text)已在 global.css 中定义 */
|
||||
|
||||
.topo {
|
||||
padding: 18px 16px;
|
||||
@@ -238,7 +138,7 @@ const refresh = () => {
|
||||
.topo-cluster {
|
||||
flex: 1;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -260,23 +160,23 @@ const refresh = () => {
|
||||
.node-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 3px;
|
||||
background: #1E2532;
|
||||
background: var(--node-empty-bg);
|
||||
border: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.node-cell.a {
|
||||
background: #13261F;
|
||||
border-color: var(--accent-dim);
|
||||
background: var(--node-a-bg);
|
||||
border-color: var(--node-a-border);
|
||||
}
|
||||
|
||||
.node-cell.b {
|
||||
background: #1A1430;
|
||||
border-color: #3A2C5C;
|
||||
background: var(--node-b-bg);
|
||||
border-color: var(--node-b-border);
|
||||
}
|
||||
|
||||
.node-cell.c {
|
||||
background: #241B0A;
|
||||
border-color: #5C4A1C;
|
||||
background: var(--node-c-bg);
|
||||
border-color: var(--node-c-border);
|
||||
}
|
||||
|
||||
.node-cell.empty {
|
||||
@@ -298,92 +198,4 @@ const refresh = () => {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
td.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.tag.zone-a {
|
||||
color: #8EC8FF;
|
||||
border-color: #1C3A5C;
|
||||
background: #0E1C2C;
|
||||
}
|
||||
|
||||
.tag.zone-b {
|
||||
color: #C9A6FF;
|
||||
border-color: #3A2C5C;
|
||||
background: #1A1430;
|
||||
}
|
||||
|
||||
.tag.zone-c {
|
||||
color: #FFC97A;
|
||||
border-color: #5C4A1C;
|
||||
background: #241B0A;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.status-text.err {
|
||||
color: var(--err);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols-2">
|
||||
<div class="cols-2-equal">
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<h3>VictoriaMetrics · 指标概览</h3>
|
||||
@@ -94,123 +94,5 @@ const logs = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.cols-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.log-stream {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.task-log-line {
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
padding: 2px 0;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.task-log-line .t {
|
||||
color: var(--text-dim);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.task-log-line.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
/* .page-head, .cols-2-equal, .panel, table, .status-text, .log-stream, .task-log-line 已在 global.css 中定义 */
|
||||
</style>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">最近一次同步</div>
|
||||
<div class="value" style="color: var(--accent); font-size: 16px">● 正常</div>
|
||||
<div class="value accent-pill">● 正常</div>
|
||||
<div class="delta">07:39:10 · 新增 3 条</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,7 +58,7 @@
|
||||
<el-option label="maas" value="maas" />
|
||||
<el-option label="未分配" value="unassigned" />
|
||||
</el-select>
|
||||
<el-input placeholder="搜索 hostname / asset_number / IP" style="flex: 1" />
|
||||
<el-input placeholder="搜索 hostname / asset_number / IP" class="search-input" />
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
@@ -84,11 +84,11 @@
|
||||
<tbody>
|
||||
<tr v-for="item in resources" :key="item.hostname" class="tr-hover">
|
||||
<td class="strong mono">{{ item.hostname }}</td>
|
||||
<td class="mono" style="font-size: 11px">{{ item.asset_number }}</td>
|
||||
<td class="mono text-xs">{{ item.asset_number }}</td>
|
||||
<td><span class="tag" :class="item.type === '物理机' ? '' : 'vm'">{{ item.type }}</span></td>
|
||||
<td><span class="tag zone-a">{{ item.location }}</span></td>
|
||||
<td class="mono">{{ item.ip }}</td>
|
||||
<td class="mono" style="font-size: 11px">{{ item.spec }}</td>
|
||||
<td class="mono text-xs">{{ item.spec }}</td>
|
||||
<td class="mono">{{ item.business_line }}</td>
|
||||
<td><span class="tag src-cmdb">{{ item.source }}</span></td>
|
||||
<td class="status-text ok">● {{ item.status }}</td>
|
||||
@@ -127,234 +127,17 @@ const resources = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-family: var(--mono);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .delta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-card .delta.up {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-card .delta.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.las-toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
/* 公共样式已在 global.css 中定义 */
|
||||
|
||||
.tag.vm {
|
||||
color: #8EC8FF;
|
||||
border-color: #1C3A5C;
|
||||
background: #0E1C2C;
|
||||
}
|
||||
|
||||
.tag.zone-a {
|
||||
color: #8EC8FF;
|
||||
border-color: #1C3A5C;
|
||||
background: #0E1C2C;
|
||||
color: var(--tag-blue-text);
|
||||
border-color: var(--tag-blue-border);
|
||||
background: var(--tag-blue-bg);
|
||||
}
|
||||
|
||||
.tag.src-cmdb {
|
||||
color: #7FFFC2;
|
||||
border-color: var(--accent-dim);
|
||||
background: #0F261D;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.pg-btns {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pg-btn {
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
padding: 0 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
color: var(--text-mid);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
background: var(--bg-panel-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pg-btn.active {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent-dim);
|
||||
color: #CFFCE9;
|
||||
}
|
||||
|
||||
.pg-btn:hover {
|
||||
border-color: #3A4356;
|
||||
color: var(--text-hi);
|
||||
}
|
||||
|
||||
.pg-btn.disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pg-sep {
|
||||
color: var(--text-dim);
|
||||
padding: 0 2px;
|
||||
color: var(--tag-green-text);
|
||||
border-color: var(--tag-green-border);
|
||||
background: var(--tag-green-bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,17 +26,17 @@
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">P0 / Disaster 告警</div>
|
||||
<div class="value" style="color: var(--err)">1</div>
|
||||
<div class="delta" style="color: var(--err)">来自 VictoriaMetrics</div>
|
||||
<div class="value err">1</div>
|
||||
<div class="delta err">来自 VictoriaMetrics</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">P1 / High 告警</div>
|
||||
<div class="value" style="color: var(--warn)">5</div>
|
||||
<div class="value warn">5</div>
|
||||
<div class="delta warn">来自 Zabbix · 4 条 / VM · 1 条</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols-2">
|
||||
<div class="cols-2-equal">
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<h3>物理机状态 · 按机房</h3>
|
||||
@@ -131,184 +131,5 @@ const refresh = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-family: var(--mono);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .delta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-card .delta.up {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-card .delta.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.cols-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.bar-wrap {
|
||||
width: 90px;
|
||||
height: 5px;
|
||||
background: #262C38;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.bar-fill.warn {
|
||||
background: var(--warn);
|
||||
}
|
||||
|
||||
.bar-fill.err {
|
||||
background: var(--err);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.status-text.err {
|
||||
color: var(--err);
|
||||
}
|
||||
/* 所有样式已在 global.css 中定义 */
|
||||
</style>
|
||||
|
||||
@@ -30,11 +30,11 @@ import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const services = ref([
|
||||
{ name: 'MySQL', icon: 'My', bgColor: '#1C2E4A', iconColor: '#7FB8FF', description: '一主多从，自动注册进 open-cdm 数据源，支持 LDAP 账号统一审核 SQL 上线。', playbook: 'roles/mysql-deploy', version: 'v8.0.36' },
|
||||
{ name: 'Redis', icon: 'Rd', bgColor: '#3A1C28', iconColor: '#FF8E9C', description: '支持 Standalone / Sentinel / Cluster，部署完成后自动注册进 CacheCloud。', playbook: 'roles/redis-deploy', version: 'v7.2' },
|
||||
{ name: 'openresty', icon: 'Or', bgColor: '#1C3A2E', iconColor: '#7FFFC2', description: '容器化部署在 K8s 内，作为业务边缘网关，支持灰度路由配置。', playbook: 'roles/openresty-deploy', version: 'v1.25' },
|
||||
{ name: 'dpvs', icon: 'Dp', bgColor: '#3A2E1C', iconColor: '#FFC97A', description: '四层负载均衡，直接管理宿主机网络命名空间，不纳入容器编排。', playbook: 'roles/dpvs-deploy', version: 'v1.9' },
|
||||
{ name: 'PgSQL', icon: 'Pg', bgColor: '#2E1C3A', iconColor: '#C9A6FF', description: '流复制主从架构，规划中 · 第二期接入 open-cdm 统一审核体系。', playbook: 'roles/pgsql-deploy', version: '规划中' },
|
||||
{ name: 'MySQL', icon: 'My', bgColor: 'var(--tag-blue-bg)', iconColor: 'var(--tag-blue-text)', description: '一主多从，自动注册进 open-cdm 数据源，支持 LDAP 账号统一审核 SQL 上线。', playbook: 'roles/mysql-deploy', version: 'v8.0.36' },
|
||||
{ name: 'Redis', icon: 'Rd', bgColor: 'var(--logo-cc-bg)', iconColor: 'var(--err)', description: '支持 Standalone / Sentinel / Cluster，部署完成后自动注册进 CacheCloud。', playbook: 'roles/redis-deploy', version: 'v7.2' },
|
||||
{ name: 'openresty', icon: 'Or', bgColor: 'var(--logo-dm-bg)', iconColor: 'var(--tag-green-text)', description: '容器化部署在 K8s 内，作为业务边缘网关，支持灰度路由配置。', playbook: 'roles/openresty-deploy', version: 'v1.25' },
|
||||
{ name: 'dpvs', icon: 'Dp', bgColor: 'var(--logo-qp-bg)', iconColor: 'var(--tag-amber-text)', description: '四层负载均衡，直接管理宿主机网络命名空间，不纳入容器编排。', playbook: 'roles/dpvs-deploy', version: 'v1.9' },
|
||||
{ name: 'PgSQL', icon: 'Pg', bgColor: 'var(--tag-purple-bg)', iconColor: 'var(--tag-purple-text)', description: '流复制主从架构，规划中 · 第二期接入 open-cdm 统一审核体系。', playbook: 'roles/pgsql-deploy', version: '规划中' },
|
||||
])
|
||||
|
||||
const handleDeploy = (service: any) => {
|
||||
@@ -43,42 +43,19 @@ const handleDeploy = (service: any) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.svc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
/* .page-head, .svc-grid 已在 global.css 中定义 */
|
||||
|
||||
.svc-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.svc-card:hover {
|
||||
border-color: #3A4356;
|
||||
border-color: var(--hover-border);
|
||||
}
|
||||
|
||||
.svc-top {
|
||||
|
||||
@@ -26,12 +26,12 @@
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">健康实例占比</div>
|
||||
<div class="value" style="color: var(--accent)">98.6%</div>
|
||||
<div class="value accent">98.6%</div>
|
||||
<div class="delta warn">12 个实例 critical</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">最近同步</div>
|
||||
<div class="value" style="color: var(--accent); font-size: 16px">● 正常</div>
|
||||
<div class="value accent-pill">● 正常</div>
|
||||
<div class="delta">07:41:05 · 间隔 30s</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,7 +61,7 @@
|
||||
<el-option label="部分异常" value="partial" />
|
||||
<el-option label="全部下线" value="offline" />
|
||||
</el-select>
|
||||
<el-input placeholder="搜索服务名 / IP" style="flex: 1" />
|
||||
<el-input placeholder="搜索服务名 / IP" class="search-input" />
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
@@ -126,234 +126,5 @@ const services = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-family: var(--mono);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card .delta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-card .delta.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.las-toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding: 9px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.tag.zone-a {
|
||||
color: #8EC8FF;
|
||||
border-color: #1C3A5C;
|
||||
background: #0E1C2C;
|
||||
}
|
||||
|
||||
.tag.zone-b {
|
||||
color: #C9A6FF;
|
||||
border-color: #3A2C5C;
|
||||
background: #1A1430;
|
||||
}
|
||||
|
||||
.tag.zone-c {
|
||||
color: #FFC97A;
|
||||
border-color: #5C4A1C;
|
||||
background: #241B0A;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.pg-btns {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pg-btn {
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
padding: 0 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
color: var(--text-mid);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
background: var(--bg-panel-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pg-btn.active {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent-dim);
|
||||
color: #CFFCE9;
|
||||
}
|
||||
|
||||
.pg-btn:hover {
|
||||
border-color: #3A4356;
|
||||
color: var(--text-hi);
|
||||
}
|
||||
|
||||
.pg-btn.disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pg-sep {
|
||||
color: var(--text-dim);
|
||||
padding: 0 2px;
|
||||
}
|
||||
/* 所有样式已在 global.css 中定义 */
|
||||
</style>
|
||||
|
||||
@@ -44,29 +44,5 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.ext-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
/* .page-head, .ext-grid 已在 global.css 中定义 */
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols-2">
|
||||
<div class="cols-2-equal">
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<h3>任务列表</h3>
|
||||
@@ -18,7 +18,7 @@
|
||||
<tr v-for="task in tasks" :key="task.id" class="tr-hover" :class="{ active: task.id === selectedTask }" @click="selectedTask = task.id">
|
||||
<td :class="['status-text', task.statusClass]">● {{ task.status }}</td>
|
||||
<td class="strong">{{ task.name }}</td>
|
||||
<td class="mono" style="font-size: 11px; color: var(--text-dim)">{{ task.playbook }}</td>
|
||||
<td class="mono text-xs text-dim">{{ task.playbook }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -83,138 +83,13 @@ const logs = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head h1 {
|
||||
font-size: 19px;
|
||||
margin: 0 0 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.cols-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
margin: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-head .meta {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
/* 公共样式已在 global.css 中定义 */
|
||||
|
||||
.log-stream {
|
||||
padding: 14px 16px;
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr.tr-hover:hover td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
tr.tr-hover.active td {
|
||||
background: var(--bg-panel-2);
|
||||
}
|
||||
|
||||
.strong {
|
||||
color: var(--text-hi);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-text.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-text.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.status-text.err {
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
.task-log-line {
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
padding: 2px 0;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.task-log-line .t {
|
||||
color: var(--text-dim);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.task-log-line.ok {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.task-log-line.tag-ok {
|
||||
color: #7FB8FF;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink 1s step-start infinite;
|
||||
color: var(--accent);
|
||||
@@ -223,57 +98,4 @@ tr.tr-hover.active td {
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.pg-btns {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pg-btn {
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
padding: 0 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
color: var(--text-mid);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
background: var(--bg-panel-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pg-btn.active {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent-dim);
|
||||
color: #CFFCE9;
|
||||
}
|
||||
|
||||
.pg-btn:hover {
|
||||
border-color: #3A4356;
|
||||
color: var(--text-hi);
|
||||
}
|
||||
|
||||
.pg-btn.disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pg-sep {
|
||||
color: var(--text-dim);
|
||||
padding: 0 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user