feat(service): 容器服务部署独立板块并使用 SSO 跳转
- 新增「容器服务部署」页面板块,与「基础服务目录」同级 - 将容器服务(Wayne)迁移到容器服务部署板块 - Wayne 卡片使用与子系统详情页相同的 SSO 跳转逻辑 - 移除 Wayne 弹窗,改为直接跳转 Wayne 平台
This commit is contained in:
@@ -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">×</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 = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user