From a185fac1b23bd7e0c707e65be066f09c3fda87c8 Mon Sep 17 00:00:00 2001
From: hezhaohui <hezhaohui0807@163.com>
Date: Fri, 17 Jul 2026 10:53:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(sidebar):=20=E9=87=8D=E7=BB=84=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=AF=BC=E8=88=AA=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 服务交付 → 业务交付：基础服务、任务中心
- 资源管理 → 资源纳管：资源管理(CMDB)、集群/容器池、业务线/配额
- 新增业务线/配额页面（Tenants.vue）
- 集群页面标题对齐为「集群 / 容器池」
---
 frontend/src/components/Layout/AppSidebar.vue |  35 ++---
 frontend/src/router/index.ts                  |   8 +-
 frontend/src/views/cluster/ClusterList.vue    |   4 +-
 frontend/src/views/resource/Tenants.vue       | 122 ++++++++++++++++++
 4 files changed, 144 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/views/resource/Tenants.vue

diff --git a/frontend/src/components/Layout/AppSidebar.vue b/frontend/src/components/Layout/AppSidebar.vue
index d4111a5..573f92c 100644
--- a/frontend/src/components/Layout/AppSidebar.vue
+++ b/frontend/src/components/Layout/AppSidebar.vue
@@ -7,33 +7,24 @@
       </router-link>
     </div>
     <div class="nav-group">
-      <div class="nav-label">机房 &amp; 网络</div>
-      <router-link to="/resource/status" class="nav-item" active-class="active">
-        <span class="ic">⬡</span>资源状态看板
-      </router-link>
-      <router-link to="/cluster" class="nav-item" active-class="active">
-        <span class="ic">◆</span>集群 / 节点<span class="badge">7</span>
-      </router-link>
-    </div>
-    <div class="nav-group">
-      <div class="nav-label">资源管理</div>
-      <router-link to="/resource/mgmt" class="nav-item" active-class="active">
-        <span class="ic">▥</span>资源管理<span class="badge">CMDB</span>
-      </router-link>
-      <router-link to="/service/mgmt" class="nav-item" active-class="active">
-        <span class="ic">◈</span>服务管理<span class="badge">Consul</span>
-      </router-link>
-    </div>
-    <div class="nav-group">
-      <div class="nav-label">服务交付</div>
+      <div class="nav-label">业务交付</div>
       <router-link to="/service/catalog" class="nav-item" active-class="active">
-        <span class="ic">▤</span>基础服务目录
+        <span class="ic">▤</span>基础服务
       </router-link>
       <router-link to="/tasks" class="nav-item" active-class="active">
         <span class="ic">▧</span>任务中心<span class="badge">2</span>
       </router-link>
-      <router-link to="/config" class="nav-item" active-class="active">
-        <span class="ic">⚙</span>配置中心管理<span class="badge">Apollo</span>
+    </div>
+    <div class="nav-group">
+      <div class="nav-label">资源纳管</div>
+      <router-link to="/resource/mgmt" class="nav-item" active-class="active">
+        <span class="ic">▥</span>资源管理<span class="badge">CMDB</span>
+      </router-link>
+      <router-link to="/cluster" class="nav-item" active-class="active">
+        <span class="ic">◆</span>集群 / 容器池<span class="badge">3</span>
+      </router-link>
+      <router-link to="/tenants" class="nav-item" active-class="active">
+        <span class="ic">▦</span>业务线 / 配额
       </router-link>
     </div>
     <div class="nav-group">
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e7e74ed..dd28c9e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -68,7 +68,13 @@ const router = createRouter({
           path: 'cluster',
           name: 'Cluster',
           component: () => import('@/views/cluster/ClusterList.vue'),
-          meta: { title: '集群 / 节点' },
+          meta: { title: '集群 / 容器池' },
+        },
+        {
+          path: 'tenants',
+          name: 'Tenants',
+          component: () => import('@/views/resource/Tenants.vue'),
+          meta: { title: '业务线 / 配额' },
         },
         {
           path: 'service/catalog',
diff --git a/frontend/src/views/cluster/ClusterList.vue b/frontend/src/views/cluster/ClusterList.vue
index 0ddd7fe..b1b1b6a 100644
--- a/frontend/src/views/cluster/ClusterList.vue
+++ b/frontend/src/views/cluster/ClusterList.vue
@@ -2,8 +2,8 @@
   <div>
     <div class="page-head">
       <div>
-        <h1>集群 / 节点</h1>
-        <p>按机房切分的 RKE2 集群，Calico BGP 扁平网络</p>
+        <h1>集群 / 容器池</h1>
+        <p>统一建设容器池 · RKE2 上建 Wayne 后新服务的标准发布流程 · Calico BGP 扁平网络</p>
       </div>
       <el-button type="primary">+ 加入新节点</el-button>
     </div>
diff --git a/frontend/src/views/resource/Tenants.vue b/frontend/src/views/resource/Tenants.vue
new file mode 100644
index 0000000..46a7034
--- /dev/null
+++ b/frontend/src/views/resource/Tenants.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="page-head">
+      <div>
+        <h1>业务线 / 配额</h1>
+        <p>按业务线划分资源配额与隔离策略 · RBAC 权限随业务线自动具备</p>
+      </div>
+      <el-button type="primary">+ 新增业务线</el-button>
+    </div>
+
+    <div class="panel">
+      <div class="panel-head">
+        <h3>业务线列表</h3>
+        <span class="meta">按业务线隔离命名空间、节点标签与配额</span>
+      </div>
+      <div class="panel-body">
+        <table>
+          <thead>
+            <tr>
+              <th>业务线</th>
+              <th>标识</th>
+              <th>命名空间</th>
+              <th>节点数</th>
+              <th>CPU 配额</th>
+              <th>内存配额</th>
+              <th>状态</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="tenant in tenants" :key="tenant.key" class="tr-hover">
+              <td class="strong">{{ tenant.name }}</td>
+              <td class="mono">{{ tenant.key }}</td>
+              <td class="mono">{{ tenant.namespace }}</td>
+              <td class="mono">{{ tenant.nodes }}</td>
+              <td>
+                <span class="bar-wrap">
+                  <span class="bar-fill" :class="tenant.cpuClass" :style="{ width: tenant.cpuPct + '%' }"></span>
+                </span>
+                {{ tenant.cpuPct }}%
+              </td>
+              <td>
+                <span class="bar-wrap">
+                  <span class="bar-fill" :class="tenant.memClass" :style="{ width: tenant.memPct + '%' }"></span>
+                </span>
+                {{ tenant.memPct }}%
+              </td>
+              <td :class="['status-text', tenant.statusClass]">● {{ tenant.status }}</td>
+              <td>
+                <el-button text>详情</el-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="tooltip-note" style="max-width: 720px;">
+      <b>配额与隔离策略：</b>每个业务线绑定独立的 K8s namespace 与 node-label，资源配额通过 ResourceQuota 限制 CPU / 内存上限。
+      RBAC 角色（viewer / operator / admin）随业务线自动具备，子系统（Wayne / CloudDM）凭 SSO 身份免登进入。
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tenants = ref([
+  {
+    name: 'LAS',
+    key: 'las',
+    namespace: 'ns-las-prod',
+    nodes: 12,
+    cpuPct: 64,
+    cpuClass: '',
+    memPct: 71,
+    memClass: '',
+    status: '正常',
+    statusClass: 'ok',
+  },
+  {
+    name: 'KODO',
+    key: 'kodo',
+    namespace: 'ns-kodo-prod',
+    nodes: 8,
+    cpuPct: 45,
+    cpuClass: '',
+    memPct: 52,
+    memClass: '',
+    status: '正常',
+    statusClass: 'ok',
+  },
+  {
+    name: 'PILI',
+    key: 'pili',
+    namespace: 'ns-pili-prod',
+    nodes: 6,
+    cpuPct: 82,
+    cpuClass: 'warn',
+    memPct: 78,
+    memClass: '',
+    status: '资源告警',
+    statusClass: 'warn',
+  },
+  {
+    name: 'QVM',
+    key: 'qvm',
+    namespace: 'ns-qvm-prod',
+    nodes: 4,
+    cpuPct: 23,
+    cpuClass: '',
+    memPct: 31,
+    memClass: '',
+    status: '正常',
+    statusClass: 'ok',
+  },
+])
+</script>
+
+<style scoped>
+/* 公共样式已在 global.css 中定义 */
+</style>