feat(subsystem): 调整子系统接入状态显示

- Wayne 和 CloudDM 状态设为 active(在线)
- 其他子系统状态设为 integrating(接入改造中)
- 状态文本统一调整为「在线」/「接入改造中」
- 非 active 状态的跳转按钮显示为灰色禁用状态

Co-authored-by: lx <lx@users.noreply.github.com>
This commit is contained in:
2026-07-17 14:01:33 +08:00
parent 75b71cec29
commit 454978be7b
3 changed files with 31 additions and 15 deletions
+5 -5
View File
@@ -11,7 +11,7 @@ export interface Subsystem {
url: string url: string
domain: string domain: string
category: string category: string
status: 'integrated' | 'integrating' status: 'active' | 'integrated' | 'integrating'
sso_enabled: boolean sso_enabled: boolean
} }
@@ -30,7 +30,7 @@ const mockSubsystems: Subsystem[] = [
url: 'https://wayne.qiniu.com', url: 'https://wayne.qiniu.com',
domain: 'wayne.xinfra.internal', domain: 'wayne.xinfra.internal',
category: '容器管理', category: '容器管理',
status: 'integrated', status: 'active',
sso_enabled: true, sso_enabled: true,
}, },
{ {
@@ -42,7 +42,7 @@ const mockSubsystems: Subsystem[] = [
url: 'https://clouddm.qiniu.com', url: 'https://clouddm.qiniu.com',
domain: 'clouddm.xinfra.internal', domain: 'clouddm.xinfra.internal',
category: '数据库', category: '数据库',
status: 'integrated', status: 'active',
sso_enabled: true, sso_enabled: true,
}, },
{ {
@@ -78,7 +78,7 @@ const mockSubsystems: Subsystem[] = [
url: 'https://qpass.xinfra.internal', url: 'https://qpass.xinfra.internal',
domain: 'qpass.xinfra.internal', domain: 'qpass.xinfra.internal',
category: '内部系统', category: '内部系统',
status: 'integrated', status: 'integrating',
sso_enabled: true, sso_enabled: true,
}, },
{ {
@@ -90,7 +90,7 @@ const mockSubsystems: Subsystem[] = [
url: 'https://grafana.xinfra.internal', url: 'https://grafana.xinfra.internal',
domain: 'grafana.xinfra.internal', domain: 'grafana.xinfra.internal',
category: '可观测性', category: '可观测性',
status: 'integrated', status: 'integrating',
sso_enabled: true, sso_enabled: true,
}, },
{ {
+2 -2
View File
@@ -11,8 +11,8 @@
</div> </div>
<p>{{ system.description }}</p> <p>{{ system.description }}</p>
<div class="sso-row"> <div class="sso-row">
<span class="sso-dot" :class="{ warn: system.status === 'integrating' }"></span> <span class="sso-dot" :class="{ warn: system.status !== 'active' }"></span>
{{ system.status === 'integrated' ? 'LDAP 原生配置接入 · 零代码' : 'LDAP 接入改造中' }} {{ system.status === 'active' ? 'LDAP 原生配置接入 · 在线' : 'LDAP 接入改造中' }}
</div> </div>
</div> </div>
</template> </template>
@@ -5,16 +5,16 @@
<h1>{{ system.name }}</h1> <h1>{{ system.name }}</h1>
<p>{{ system.description }} · {{ system.domain }}</p> <p>{{ system.description }} · {{ system.domain }}</p>
</div> </div>
<span class="env-pill" :class="system.status === 'integrated' ? '' : 'warn'"> <span class="env-pill" :class="system.status === 'active' ? '' : 'warn'">
{{ system.status === 'integrated' ? '● 已接入' : '● 接入中' }} {{ system.status === 'active' ? '● 在线' : '● 接入中' }}
</span> </span>
</div> </div>
<div class="stat-row"> <div class="stat-row">
<div class="stat-card"> <div class="stat-card">
<div class="label">接入状态</div> <div class="label">接入状态</div>
<div class="value" :class="system.status === 'integrated' ? 'accent' : 'warn'"> <div class="value" :class="system.status === 'active' ? 'accent' : 'warn'">
{{ system.status === 'integrated' ? '已接入' : '接入中' }} {{ system.status === 'active' ? '在线' : '接入中' }}
</div> </div>
<div class="delta">{{ system.category }}</div> <div class="delta">{{ system.category }}</div>
</div> </div>
@@ -50,11 +50,17 @@
</div> </div>
<p>{{ detailDesc }}</p> <p>{{ detailDesc }}</p>
<div class="sso-row"> <div class="sso-row">
<span class="sso-dot" :class="{ warn: system.status === 'integrating' }"></span> <span class="sso-dot" :class="{ warn: system.status !== 'active' }"></span>
{{ system.status === 'integrated' ? 'LDAP 原生配置接入 · 已上线' : 'LDAP 接入改造中' }} {{ system.status === 'active' ? 'LDAP 原生配置接入 · 在线' : 'LDAP 接入改造中' }}
</div> </div>
<button class="btn btn-primary" style="margin-top:8px;align-self:flex-start;" @click="openPortal"> <button
打开 {{ system.name }} ↗ class="btn btn-primary"
:class="{ 'btn-disabled': system.status !== 'active' }"
:disabled="system.status !== 'active'"
style="margin-top:8px;align-self:flex-start;"
@click="openPortal"
>
{{ system.status !== 'active' ? '暂未开放' : '打开 ' + system.name + ' ↗' }}
</button> </button>
</div> </div>
</div> </div>
@@ -172,4 +178,14 @@ const openPortal = async () => {
.btn-primary:hover { .btn-primary:hover {
opacity: 0.85; opacity: 0.85;
} }
.btn-disabled {
background: var(--text-dim);
cursor: not-allowed;
opacity: 0.6;
}
.btn-disabled:hover {
opacity: 0.6;
}
</style> </style>