feat(sidebar): 重组侧边栏导航结构
- 服务交付 → 业务交付：基础服务、任务中心 - 资源管理 → 资源纳管：资源管理(CMDB)、集群/容器池、业务线/配额 - 新增业务线/配额页面（Tenants.vue） - 集群页面标题对齐为「集群 / 容器池」
This commit is contained in:
@@ -7,33 +7,24 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">机房 & 网络</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">
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user