feat(service): 容器服务部署独立板块并使用 SSO 跳转

- 新增「容器服务部署」页面板块,与「基础服务目录」同级
- 将容器服务(Wayne)迁移到容器服务部署板块
- Wayne 卡片使用与子系统详情页相同的 SSO 跳转逻辑
- 移除 Wayne 弹窗,改为直接跳转 Wayne 平台
This commit is contained in:
2026-07-17 14:35:37 +08:00
parent 0cf622b8af
commit 1a125e154c
+40 -72
View File
@@ -1,5 +1,6 @@
<template> <template>
<div> <div>
<!-- 基础服务目录 -->
<div class="page-head"> <div class="page-head">
<div> <div>
<h1>基础服务目录</h1> <h1>基础服务目录</h1>
@@ -9,7 +10,7 @@
<div class="svc-grid"> <div class="svc-grid">
<div <div
v-for="service in services" v-for="service in basicServices"
:key="service.name" :key="service.name"
class="svc-card" class="svc-card"
:class="{ disabled: service.disabled }" :class="{ disabled: service.disabled }"
@@ -30,61 +31,38 @@
</div> </div>
</div> </div>
<!-- 弹窗:发布服务 · 跳 Wayne --> <!-- 容器服务部署 -->
<Teleport to="body"> <div class="page-head" style="margin-top: 24px;">
<div v-if="showWayneModal" class="overlay" @click.self="showWayneModal = false"> <div>
<div class="modal"> <h1>容器服务部署</h1>
<div class="modal-head"> <p>容器化服务统一管理与发布</p>
<h3>发布服务 · 跳 Wayne</h3>
<button class="close" @click="showWayneModal = false">&times;</button>
</div>
<div class="modal-body">
<div class="field-row">
<div class="field">
<label>业务线</label>
<select v-model="wayneForm.bl">
<option value="las">las(当前)</option>
<option value="kodo">kodo</option>
</select>
</div>
<div class="field">
<label>命名空间</label>
<select v-model="wayneForm.namespace">
<option value="ns-las-prod">ns-las-prod</option>
</select>
</div> </div>
</div> </div>
<div class="field-row">
<div class="field"> <div class="panel">
<label>目标集群</label> <div class="panel-head">
<select v-model="wayneForm.cluster"> <h3>统一入口</h3>
<option value="rke2-sh-prod-01">rke2-sh-prod-01(华东)</option> <span class="meta">Wayne · LDAP 单点登录</span>
<option value="rke2-bj-prod-01">rke2-bj-prod-01(华北)</option>
</select>
</div> </div>
<div class="field"> <div class="panel-body" style="padding: 16px;">
<label>规格</label> <div class="ext-card" style="max-width: 560px;">
<select v-model="wayneForm.spec"> <div class="ext-top">
<option value="2C4G">2C 4G × 3 副本</option> <div class="ext-logo" style="background: var(--logo-w-bg); color: var(--tag-blue-text);">W</div>
<option value="4C8G">4C 8G × 3 副本</option> <div>
</select> <h4>Wayne</h4>
<div class="ext-sub">wayne.xinfra.internal</div>
</div> </div>
</div> </div>
<div class="field"> <p>业务容器发布、命名空间与配额管理,复用 Wayne 原生多租户能力。所有集群的容器发布均可通过此入口统一操作。</p>
<label>服务名称</label> <div class="sso-row">
<input v-model="wayneForm.serviceName" placeholder="las-search-api" /> <span class="sso-dot"></span> LDAP 原生配置接入 · 在线
</div> </div>
<div class="tooltip-note"> <button class="btn btn-primary" style="margin-top: 8px; align-self: flex-start;" @click="openWayne">
凭 SSO 身份免登进入 <b>Wayne</b>,在 ns-las-prod 下部署服务;权限随业务线 / 角色自动具备,仅可操作被授权 namespace。 打开 Wayne ↗
</div> </button>
</div>
<div class="modal-foot">
<button class="btn btn-ghost" @click="showWayneModal = false">取消</button>
<button class="btn btn-primary" @click="handleWayneSubmit">跳 Wayne 发布 ↗</button>
</div> </div>
</div> </div>
</div> </div>
</Teleport>
<!-- 弹窗:数据库标准化交付 · MySQL --> <!-- 弹窗:数据库标准化交付 · MySQL -->
<Teleport to="body"> <Teleport to="body">
@@ -153,6 +131,7 @@
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { subsystemApi } from '@/api/subsystem'
const router = useRouter() const router = useRouter()
@@ -170,17 +149,7 @@ interface Service {
modal?: string modal?: string
} }
const services = ref<Service[]>([ const basicServices = ref<Service[]>([
{
name: '容器服务(Wayne)',
icon: 'Wy',
bgColor: '#1C2A3A',
iconColor: '#7FB8FF',
description: '在 RKE2 容器池标准发布业务服务,跳 Wayne 免登管理多集群与命名空间。',
playbook: 'wayne · ns-las-prod',
version: '',
modal: 'wayne',
},
{ {
name: 'MySQL', name: 'MySQL',
icon: 'My', icon: 'My',
@@ -238,17 +207,8 @@ const services = ref<Service[]>([
]) ])
// 弹窗状态 // 弹窗状态
const showWayneModal = ref(false)
const showMysqlModal = ref(false) const showMysqlModal = ref(false)
const wayneForm = reactive({
bl: 'las',
namespace: 'ns-las-prod',
cluster: 'rke2-sh-prod-01',
spec: '2C4G',
serviceName: 'las-search-api',
})
const mysqlForm = reactive({ const mysqlForm = reactive({
bl: 'las', bl: 'las',
topology: '1m2r', topology: '1m2r',
@@ -264,7 +224,7 @@ const handleCardClick = (service: Service) => {
return return
} }
if (service.modal === 'wayne') { if (service.modal === 'wayne') {
showWayneModal.value = true openWayne()
} else if (service.modal === 'mysql') { } else if (service.modal === 'mysql') {
showMysqlModal.value = true showMysqlModal.value = true
} else if (service.modal === 'openresty') { } else if (service.modal === 'openresty') {
@@ -272,10 +232,18 @@ const handleCardClick = (service: Service) => {
} }
} }
const handleWayneSubmit = () => { const openWayne = async () => {
showWayneModal.value = false try {
ElMessage.success('已跳转 Wayne 并提交发布任务') const wayne = subsystemApi.getSubsystemByName('wayne')
router.push({ name: 'Tasks' }) if (!wayne) {
ElMessage.error('Wayne 子系统未找到')
return
}
const { data } = await subsystemApi.getSSOUrl(wayne.id)
window.location.assign(data.sso_url)
} catch {
// 错误已由 request 拦截器统一处理
}
} }
const handleMysqlSubmit = () => { const handleMysqlSubmit = () => {