feat: update delivery and resource frontends

frontend/src/views/cluster/ClusterList.vue

@@ -3,14 +3,15 @@
     <div class="page-head">
       <div>
         <h1>集群与容器</h1>
-        <p>统一建设容器池 · RKE2 上建 Wayne 后新服务的标准发布流程 · Calico BGP 扁平网络</p>
+        <p>统一建设容器池 · RKE2 上建 Wayne 后新服务的标准发布流程 · 数据源：Wayne 原生接口</p>
       </div>
-      <el-button type="primary">同步</el-button>
+      <el-button type="primary" :loading="loading" @click="loadClusters">同步</el-button>
     </div>
 
     <div class="panel">
       <div class="panel-body">
-        <table>
+        <div v-if="error" class="error-line">{{ error }}</div>
+        <table v-loading="loading">
           <thead>
             <tr>
               <th>集群</th>
@@ -24,7 +25,15 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="cluster in businessLineClusters" :key="cluster.name" class="tr-hover">
+            <tr v-if="!businessLineClusters.length">
+              <td colspan="8" class="text-dim">当前业务线暂无 Wayne 集群数据</td>
+            </tr>
+            <tr
+              v-for="cluster in businessLineClusters"
+              :key="cluster.name"
+              :class="['tr-hover', { selected: cluster.name === selectedCluster }]"
+              @click="selectedCluster = cluster.name"
+            >
               <td class="strong">{{ cluster.name }}</td>
               <td><span class="tag" :class="cluster.zoneClass">{{ cluster.zone }}</span></td>
               <td :class="['status-text', cluster.statusClass]">● {{ cluster.status }}</td>
@@ -43,11 +52,11 @@
 
     <div class="panel">
       <div class="panel-head">
-        <h3>{{ businessLineClusters[0]?.name }} · 节点列表（节选）</h3>
+        <h3>{{ selectedCluster || businessLineClusters[0]?.name || '未选择集群' }} · 节点列表</h3>
         <span class="meta">node-label 多租户隔离</span>
       </div>
       <div class="panel-body">
-        <table>
+        <table v-loading="loading">
           <thead>
             <tr>
               <th>节点</th>
@@ -60,13 +69,21 @@
             </tr>
           </thead>
           <tbody>
+            <tr v-if="!businessLineNodes.length">
+              <td colspan="7" class="text-dim">当前集群暂无 Wayne 节点数据</td>
+            </tr>
             <tr v-for="node in businessLineNodes" :key="node.name" class="tr-hover">
               <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><span class="tag biz">{{ node.label }}</span></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>
+                <template v-if="node.cpu > 0">
+                  <span class="bar-wrap"><span class="bar-fill" :class="node.cpuClass" :style="{ width: node.cpu + '%' }"></span></span>{{ node.cpu }}%
+                </template>
+                <span v-else class="text-dim">-</span>
+              </td>
               <td :class="['status-text', node.statusClass]">● {{ node.status }}</td>
             </tr>
           </tbody>
@@ -77,61 +94,77 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
+import { computed, onMounted, ref, watch } from 'vue'
+import { containerServiceApi, type ContainerCluster, type ContainerNode } from '@/api/containerService'
+import { useBusinessLineStore } from '@/stores/businessLine'
 
-const { currentName, profile } = useBusinessLineMockProfile()
+const businessLineStore = useBusinessLineStore()
+const clusters = ref<ContainerCluster[]>([])
+const nodes = ref<ContainerNode[]>([])
+const selectedCluster = ref('')
+const loading = ref(false)
+const error = ref('')
 
-const clusters = ref([
-  { name: 'rke2-bj-prod-01', zone: '华北 · IDC', zoneClass: 'zone-a', status: '健康', statusClass: 'ok', nodes: 46, cpu: 64, cpuClass: '', version: 'v1.28.9+rke2r1', calico: 'BGP AS64512' },
-  { name: 'rke2-sh-prod-01', zone: '华东 · IDC', zoneClass: 'zone-b', status: '健康', statusClass: 'ok', nodes: 52, cpu: 71, cpuClass: '', version: 'v1.28.9+rke2r1', calico: 'BGP AS64513' },
-  { name: 'rke2-ali-sz-01', zone: '阿里云 · 华南', zoneClass: 'zone-c', status: '1 节点告警', statusClass: 'warn', nodes: 30, cpu: 83, cpuClass: 'warn', version: 'v1.28.6+rke2r1', calico: 'BGP AS64514' },
-])
-
-const nodes = ref([
-  { 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=linxi', labelColor: 'var(--tag-blue-text)', labelBorder: 'var(--tag-blue-border)', taint: 'linxi:NoSchedule', spec: '64C/256G', cpu: 62, cpuClass: '', status: 'Ready', statusClass: 'ok' },
-  { name: 'bj-node-031', ip: '10.21.4.31', label: 'business-line=xinfra', labelColor: 'var(--tag-purple-text)', labelBorder: 'var(--tag-purple-border)', taint: 'xinfra:NoSchedule', spec: '32C/128G', cpu: 88, cpuClass: 'warn', status: '资源告警', statusClass: 'warn' },
-  { name: 'bj-node-048', ip: '10.21.4.48', label: 'business-line=las', labelColor: 'var(--text-dim)', labelBorder: 'var(--line)', taint: 'las:NoSchedule', spec: '32C/128G', cpu: 4, cpuClass: '', status: 'Ready · 空闲', statusClass: 'ok' },
-])
-
-const businessLineClusters = computed(() => {
-  const cpu = profile.value.cpuAllocated
-  return clusters.value.map((cluster, index) => ({
-    ...cluster,
-    name: `${cluster.name}-${currentName.value}`,
-    nodes: Math.max(1, Math.round(profile.value.nodes * ([0.42, 0.36, 0.22][index] || 0.2))),
-    cpu: Math.min(96, Math.max(8, cpu + (index - 1) * 7)),
-    cpuClass: cpu > 75 ? 'warn' : '',
-    status: profile.value.alertsP1 && index === 2 ? `${profile.value.alertsP1} 节点告警` : '健康',
-    statusClass: profile.value.alertsP1 && index === 2 ? 'warn' : 'ok',
-  }))
-})
+const businessLineClusters = computed(() => clusters.value)
 
 const businessLineNodes = computed(() => {
-  const selected = nodes.value.filter((node) => node.label === `business-line=${currentName.value}`)
-  if (selected.length) return selected
-  return [
-    {
-      name: `${currentName.value}-node-001`,
-      ip: '10.21.4.14',
-      label: `business-line=${currentName.value}`,
-      labelColor: 'var(--tag-blue-text)',
-      labelBorder: 'var(--tag-blue-border)',
-      taint: `${currentName.value}:NoSchedule`,
-      spec: '64C/256G',
-      cpu: profile.value.cpuAllocated,
-      cpuClass: profile.value.cpuAllocated > 75 ? 'warn' : '',
-      status: profile.value.alertsP1 ? '资源告警' : 'Ready',
-      statusClass: profile.value.alertsP1 ? 'warn' : 'ok',
-    },
-  ]
+  if (!selectedCluster.value) return []
+  return nodes.value.filter((node) => node.cluster === selectedCluster.value)
 })
+
+async function loadClusters() {
+  const businessLineId = businessLineStore.current?.id
+  if (!businessLineId) {
+    clusters.value = []
+    nodes.value = []
+    selectedCluster.value = ''
+    return
+  }
+  loading.value = true
+  error.value = ''
+  try {
+    const data = await containerServiceApi.listClusters(businessLineId)
+    clusters.value = data.items
+    nodes.value = data.nodes
+    if (!clusters.value.some((cluster) => cluster.name === selectedCluster.value)) {
+      selectedCluster.value = clusters.value[0]?.name || ''
+    }
+    if (data.summary.errors?.length) {
+      error.value = data.summary.errors.join('；')
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Wayne 集群数据同步失败'
+    clusters.value = []
+    nodes.value = []
+    selectedCluster.value = ''
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => businessLineStore.current?.id,
+  () => {
+    void loadClusters()
+  },
+)
+
+onMounted(loadClusters)
 </script>
 
 <style scoped>
 /* 公共样式已在 global.css 中定义 */
 
+.tr-hover.selected {
+  background: rgba(22, 93, 255, 0.08);
+}
+
+.error-line {
+  margin-bottom: 12px;
+  color: var(--danger);
+  font-size: 13px;
+}
+
 .tag.biz {
   color: var(--text-mid);
 }