wonder/xinfra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 添加服务管理页面骨架

Browse Source 
页面：
- views/service/Catalog.vue，基础服务目录（Ansible Playbook 一键部署）
- views/service/Management.vue，服务管理（Consul 注册中心同步）

服务目录：
- MySQL、Redis、openresty、dpvs、PgSQL

功能：
- 服务卡片展示（图标、描述、Playbook、版本）
- 服务台账表格（按机房、业务标签筛选）
- 健康状态展示
This commit is contained in:
hezhaohui
2026-07-14 15:40:21 +08:00
parent 39e5bbec2a
commit 31ca405492
2 changed files with 487 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/service/Catalog.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<div>
<div class="page-head">
<div>
<h1>基础服务目录</h1>
<p>点击卡片，通过封装好的 ansible-playbook 一键部署标准化基础服务</p>
</div>
</div>
<div class="svc-grid">
<div v-for="service in services" :key="service.name" class="svc-card" @click="handleDeploy(service)">
<div class="svc-top">
<div class="svc-ic" :style="{ background: service.bgColor, color: service.iconColor }">
{{ service.icon }}
</div>
<h4>{{ service.name }}</h4>
</div>
<div class="svc-desc">{{ service.description }}</div>
<div class="svc-foot">
<span class="playbook">{{ service.playbook }}</span>
<span>{{ service.version }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
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: '规划中' },
])
const handleDeploy = (service: any) => {
ElMessage.success(`${service.name} 部署任务已提交`)
}
</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;
}
.svc-card {
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px;
cursor: pointer;
transition: border-color 0.15s;
}
.svc-card:hover {
border-color: #3A4356;
}
.svc-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.svc-ic {
width: 34px;
height: 34px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-weight: 600;
font-size: 13px;
}
h4 {
margin: 0;
font-size: 13.5px;
}
.svc-desc {
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
margin-bottom: 12px;
min-height: 36px;
}
.svc-foot {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: var(--text-dim);
}
.playbook {
font-family: var(--mono);
color: var(--text-mid);
}
</style>
frontend/src/views/service/Management.vue
+359
View File
@@ -0,0 +1,359 @@
<template>
<div>
<div class="page-head">
<div>
<h1>服务管理</h1>
<p>同步全部机房 Consul 注册中心服务目录，统一查看服务名 / 服务 IP / 业务标签 / 实例数</p>
</div>
<el-button>⟳ 立即同步</el-button>
</div>
<div class="stat-row">
<div class="stat-card">
<div class="label">接入 Consul Datacenter</div>
<div class="value">7</div>
<div class="delta">国内 3 · 海外 4</div>
</div>
<div class="stat-card">
<div class="label">服务总数</div>
<div class="value">186</div>
<div class="delta">去重后唯一服务名</div>
</div>
<div class="stat-card">
<div class="label">服务实例总数</div>
<div class="value">842</div>
<div class="delta">所有机房注册 IP 汇总</div>
</div>
<div class="stat-card">
<div class="label">健康实例占比</div>
<div class="value" style="color: var(--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="delta">07:41:05 · 间隔 30s</div>
</div>
</div>
<div class="las-toolbar">
<el-select placeholder="全部机房">
<el-option label="全部机房" value="" />
<el-option label="YZH" value="yzh" />
<el-option label="XS" value="xs" />
<el-option label="JF" value="jf" />
<el-option label="达拉斯" value="dallas" />
<el-option label="新加坡" value="singapore" />
<el-option label="香港" value="hk" />
<el-option label="东南亚" value="sea" />
</el-select>
<el-select placeholder="全部业务标签">
<el-option label="全部业务标签" value="" />
<el-option label="kodo" value="kodo" />
<el-option label="las" value="las" />
<el-option label="lingxi" value="lingxi" />
<el-option label="ltoken" value="ltoken" />
<el-option label="maas" value="maas" />
</el-select>
<el-select placeholder="全部状态">
<el-option label="全部状态" value="" />
<el-option label="健康" value="healthy" />
<el-option label="部分异常" value="partial" />
<el-option label="全部下线" value="offline" />
</el-select>
<el-input placeholder="搜索服务名 / IP" style="flex: 1" />
</div>
<div class="panel">
<div class="panel-head">
<h3>服务台账 · 按 Consul Datacenter 同步</h3>
<span class="meta">数据源：Consul Catalog API</span>
</div>
<div class="panel-body">
<table>
<thead>
<tr>
<th>服务名</th>
<th>机房 / Datacenter</th>
<th>业务标签</th>
<th>实例数</th>
<th>健康实例</th>
<th>示例 IP</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="service in services" :key="service.name" class="tr-hover">
<td class="strong mono">{{ service.name }}</td>
<td><span class="tag" :class="service.dcClass">{{ service.dc }}</span></td>
<td class="mono">{{ service.biz }}</td>
<td class="mono">{{ service.instances }}</td>
<td class="mono">{{ service.healthy }}</td>
<td class="mono">{{ service.ip }}</td>
<td :class="['status-text', service.statusClass]">● {{ service.status }}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<span>共 186 条 · 每页 7 条</span>
<div class="pg-btns">
<span class="pg-btn disabled">‹</span>
<span class="pg-btn active">1</span>
<span class="pg-btn">2</span>
<span class="pg-btn">3</span>
<span class="pg-sep">…</span>
<span class="pg-btn">27</span>
<span class="pg-btn">›</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const services = ref([
{ name: 'kodo-gateway-svc', dc: 'YZH', dcClass: 'zone-a', biz: 'kodo', instances: 12, healthy: '12 / 12', ip: '10.21.4.51', status: '健康', statusClass: 'ok' },
{ name: 'kodo-upload-svc', dc: 'XS', dcClass: 'zone-b', biz: 'kodo', instances: 10, healthy: '10 / 10', ip: '10.34.37.66', status: '健康', statusClass: 'ok' },
{ name: 'las-search-api', dc: 'XS', dcClass: 'zone-b', biz: 'las', instances: 18, healthy: '17 / 18', ip: '10.34.37.20', status: '部分异常', statusClass: 'warn' },
{ name: 'las-order-svc', dc: '达拉斯 IDC', dcClass: '', biz: 'las', instances: 5, healthy: '5 / 5', ip: '10.66.2.20', status: '健康', statusClass: 'ok' },
{ name: 'lingxi-render-svc', dc: 'JF', dcClass: 'zone-c', biz: 'lingxi', instances: 6, healthy: '6 / 6', ip: '10.45.2.30', status: '健康', statusClass: 'ok' },
{ name: 'ltoken-wallet-svc', dc: 'YZH', dcClass: 'zone-a', biz: 'ltoken', instances: 8, healthy: '8 / 8', ip: '10.21.4.88', status: '健康', statusClass: 'ok' },
{ name: 'maas-infer-svc', dc: '新加坡 IDC', dcClass: '', biz: 'maas', instances: 4, healthy: '3 / 4', ip: '10.88.1.40', status: '部分异常', statusClass: 'warn' },
])
</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;
}
</style>