From 31ca4054929a740a43f911d69fe8ff07a9b47b06 Mon Sep 17 00:00:00 2001
From: hezhaohui <hezhaohui0807@163.com>
Date: Tue, 14 Jul 2026 15:40:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E9=AA=A8=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

功能：
- 服务卡片展示（图标、描述、Playbook、版本）
- 服务台账表格（按机房、业务标签筛选）
- 健康状态展示
---
 frontend/src/views/service/Catalog.vue    | 128 ++++++++
 frontend/src/views/service/Management.vue | 359 ++++++++++++++++++++++
 2 files changed, 487 insertions(+)
 create mode 100644 frontend/src/views/service/Catalog.vue
 create mode 100644 frontend/src/views/service/Management.vue

diff --git a/frontend/src/views/service/Catalog.vue b/frontend/src/views/service/Catalog.vue
new file mode 100644
index 0000000..de32d0f
--- /dev/null
+++ b/frontend/src/views/service/Catalog.vue
@@ -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>
diff --git a/frontend/src/views/service/Management.vue b/frontend/src/views/service/Management.vue
new file mode 100644
index 0000000..32354e8
--- /dev/null
+++ b/frontend/src/views/service/Management.vue
@@ -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>