feat(delivery): sync mysql service ledger and credentials

2026-07-30 16:09:13 +08:00
parent f41abfd609
commit 1aa984c7e5
15 changed files with 1322 additions and 262 deletions
@@ -15,9 +15,6 @@ declare module 'vue' {
    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -149,6 +149,12 @@ export const deliveryApi = {
    return Array.isArray(data.items) ? data.items : []
  },

+  async syncMySQLServices(businessLineId: number): Promise<void> {
+    await authRequest(`/auth/api/v1/delivery/business-lines/${businessLineId}/mysql-services/sync`, {
+      method: 'POST',
+    })
+  },
+
  async getTask(taskId: string): Promise<{ task: DeliveryTask; events: TaskEvent[] }> {
    const data = await authRequest(`/auth/api/v1/delivery/tasks/${encodeURIComponent(taskId)}`)
    return {
@@ -12,19 +12,19 @@
        <span class="ic">▤</span>基础服务
      </router-link>
      <router-link to="/task/log" class="nav-item" active-class="active">
-        <span class="ic">▧</span>任务日志<span class="badge">2</span>
+        <span class="ic">▧</span>任务日志<span class="badge">{{ sidebarBadges.taskLogs }}</span>
      </router-link>
    </div>
    <div class="nav-group">
      <div class="nav-label">资源纳管</div>
      <router-link to="/machine/management" class="nav-item" active-class="active">
-        <span class="ic">▥</span>机器管理<span class="badge">CMDB</span>
+        <span class="ic">▥</span>机器管理<span class="badge">{{ sidebarBadges.machines }}</span>
      </router-link>
      <router-link to="/service/management" class="nav-item" active-class="active">
-        <span class="ic">◈</span>服务管理<span class="badge">Consul</span>
+        <span class="ic">◈</span>服务管理<span class="badge">{{ sidebarBadges.services }}</span>
      </router-link>
      <router-link to="/infrastructure/cluster" class="nav-item" active-class="active">
-        <span class="ic">◆</span>集群与容器<span class="badge">3</span>
+        <span class="ic">◆</span>集群与容器<span class="badge">{{ sidebarBadges.clusters }}</span>
      </router-link>
      <router-link to="/business/quota" class="nav-item" active-class="active">
        <span class="ic">▦</span>业务配额
@@ -88,10 +88,14 @@
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useBusinessLineStore } from '@/stores/businessLine'
+import { containerServiceApi } from '@/api/containerService'
+import { deliveryApi } from '@/api/delivery'
+import { machineApi } from '@/api/machine'
+import { taskLogApi } from '@/api/taskLog'

 const route = useRoute()
 const authStore = useAuthStore()
@@ -99,6 +103,12 @@ const businessLineStore = useBusinessLineStore()
 const portalExpanded = ref(true)
 const isPlatformAdmin = computed(() => authStore.isAdmin)
 const isBusinessLineAdmin = computed(() => businessLineStore.isCurrentAdmin)
+const sidebarBadges = ref({
+  taskLogs: '-',
+  machines: '-',
+  services: '-',
+  clusters: '-',
+})

 const subsystems = [
  { name: 'Wayne', label: '多集群发布平台', icon: 'W' },
@@ -114,6 +124,40 @@ const isPortalActive = computed(() => {
  return route.path.startsWith('/subsystem/detail/') || route.path === '/subsystem'
 })

+watch(
+  () => businessLineStore.current?.id,
+  (businessLineId) => {
+    void loadSidebarBadges(businessLineId)
+  },
+  { immediate: true },
+)
+
+async function loadSidebarBadges(businessLineId?: number) {
+  if (!businessLineId) {
+    sidebarBadges.value = { taskLogs: '-', machines: '-', services: '-', clusters: '-' }
+    return
+  }
+
+  const [taskLogs, machines, services, containerSummary] = await Promise.allSettled([
+    taskLogApi.list({ businessLineId, page: 1, pageSize: 1 }),
+    machineApi.getOverview(businessLineId),
+    deliveryApi.listMySQLServices(businessLineId),
+    containerServiceApi.getSummary(businessLineId),
+  ])
+
+  sidebarBadges.value = {
+    taskLogs: taskLogs.status === 'fulfilled' ? formatBadgeCount(taskLogs.value.total) : '-',
+    machines: machines.status === 'fulfilled' ? formatBadgeCount(machines.value.total) : '-',
+    services: services.status === 'fulfilled' ? formatBadgeCount(services.value.length) : '-',
+    clusters: containerSummary.status === 'fulfilled' ? formatBadgeCount(containerSummary.value.clusters) : '-',
+  }
+}
+
+function formatBadgeCount(value: number) {
+  if (!Number.isFinite(value) || value < 0) return '-'
+  return value > 99 ? '99+' : String(value)
+}
+
 function dotColor(icon: string): string {
  const colors: Record<string, string> = {
    W: 'var(--tag-blue-text)',
@@ -801,6 +801,7 @@ const deliveredPort = ref<number>()
 const deliveryTargets = ref<DeliveryTarget[]>([])
 const selectedTargetId = ref<number>()
 const targetsLoading = ref(false)
+const mysqlDeliveryTemplateName = 'XINFRA MySQL Native Prototype'
 const pollTimer = ref<number | undefined>()
 const seenEventIds = ref(new Set<number>())
 const deliveryLog = ref('[ready] 等待创建交付任务...')
@@ -1568,8 +1569,7 @@ async function loadDeliveryTargets() {
  targetsLoading.value = true
  try {
    deliveryTargets.value = await deliveryApi.listTargets()
-    const preferred = deliveryTargets.value.find((target) => /callback/i.test(target.name))
-      || deliveryTargets.value.find((target) => !/rollback/i.test(target.name))
+    const preferred = deliveryTargets.value.find((target) => target.name === mysqlDeliveryTemplateName)
    selectedTargetId.value = preferred?.id || deliveryTargets.value[0]?.id
  } catch (error) {
    ElMessage.error(error instanceof Error ? error.message : '获取部署目标失败')
@@ -9,19 +9,19 @@
    </div>
    <div class="stat-row">
      <div class="stat-card">
-        <div class="label">接入 Datacenter</div>
+        <div class="label">接入资源域</div>
        <div class="value">{{ serviceDatacenters }}</div>
-        <div class="delta">来自基础服务实例台账</div>
+        <div class="delta">Datacenter / Cluster 合并统计</div>
      </div>
      <div class="stat-card">
        <div class="label">服务总数</div>
-        <div class="value">{{ filteredServices.length }}</div>
-        <div class="delta">去重后唯一服务名</div>
+        <div class="value">{{ totalServiceCount }}</div>
+        <div class="delta">基础服务 + 容器化服务</div>
      </div>
      <div class="stat-card">
        <div class="label">服务实例总数</div>
        <div class="value">{{ serviceInstances }}</div>
-        <div class="delta">当前业务线实例汇总</div>
+        <div class="delta">MySQL 实例 + Pod 汇总</div>
      </div>
      <div class="stat-card">
        <div class="label">健康实例占比</div>
@@ -85,7 +85,7 @@
            <tr v-if="!serviceLoading && filteredServices.length === 0">
              <td colspan="8" class="text-dim">当前业务线暂无基础服务实例</td>
            </tr>
-            <tr v-for="service in filteredServices" :key="service.name" class="tr-hover">
+            <tr v-for="service in pagedServices" :key="service.name" class="tr-hover">
              <td class="strong mono">{{ service.name }}</td>
              <td><span class="tag" :class="service.dcClass">{{ service.dc }}</span></td>
              <td class="mono">{{ service.biz }}</td>
@@ -93,29 +93,16 @@
              <td class="mono">{{ service.healthy }}</td>
              <td class="mono">{{ service.ip }}</td>
              <td>
-                <el-dropdown
-                  v-if="deliveryTasksForService(service.name).length"
-                  trigger="click"
-                  popper-class="delivery-record-dropdown"
-                  @command="openDeliveryRecordById"
+                <el-button
+                  v-if="latestCredentialTaskForService(service.name)"
+                  link
+                  type="primary"
+                  :icon="Tickets"
+                  @click="openDeliveryDetail(latestCredentialTaskForService(service.name)!)"
                >
-                  <el-button link type="primary" :icon="Tickets">查看 {{ deliveryTasksForService(service.name).length }} 条</el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item
-                        v-for="task in deliveryTasksForService(service.name)"
-                        :key="task.id"
-                        :command="task.id"
-                      >
-                        <span class="delivery-dropdown-item">
-                          <strong>{{ formatDeliveryTime(task.created_at, true) }}</strong>
-                          <small>{{ deliveryStatusText(task.status) }} · {{ credentialStatusText(task) }}</small>
-                        </span>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-                <span v-else class="text-dim">-</span>
+                  查看
+                </el-button>
+                <span v-else class="tag">已领取</span>
              </td>
              <td :class="['status-text', service.statusClass]">● {{ service.status }}</td>
            </tr>
@@ -123,15 +110,15 @@
        </table>
        <div class="pagination">
          <span>共 {{ filteredServices.length }} 条 · 当前业务线：{{ currentName }}</span>
-          <div class="pg-btns">
-            <span class="pg-btn disabled">‹</span>
-            <span class="pg-btn active">1</span>
-            <span class="pg-btn">2</span>
-            <span class="pg-btn">3</span>
-            <span class="pg-sep">…</span>
-            <span class="pg-btn">27</span>
-            <span class="pg-btn">›</span>
-          </div>
+          <el-pagination
+            v-model:current-page="servicePage"
+            v-model:page-size="servicePageSize"
+            :total="filteredServices.length"
+            :page-sizes="[10, 20, 50]"
+            layout="sizes, prev, pager, next"
+            background
+            small
+          />
        </div>
      </div>
    </div>
@@ -159,7 +146,7 @@
            <tr v-if="!containerLoading && containerServices.length === 0">
              <td colspan="8" class="text-dim">当前业务线暂无容器化服务</td>
            </tr>
-            <tr v-for="service in containerServices" :key="`${service.cluster}-${service.namespace}-${service.name}`" class="tr-hover">
+            <tr v-for="service in pagedContainerServices" :key="`${service.cluster}-${service.namespace}-${service.name}`" class="tr-hover">
              <td class="strong mono">{{ service.name }}</td>
              <td><span class="tag">{{ service.cluster }}</span></td>
              <td class="mono">{{ service.namespace }}</td>
@@ -173,6 +160,15 @@
        </table>
        <div class="pagination">
          <span>共 {{ containerServices.length }} 条容器化服务 · 当前业务线：{{ currentName }}</span>
+          <el-pagination
+            v-model:current-page="containerPage"
+            v-model:page-size="containerPageSize"
+            :total="containerServices.length"
+            :page-sizes="[10, 20, 50]"
+            layout="sizes, prev, pager, next"
+            background
+            small
+          />
        </div>
      </div>
    </div>
@@ -199,33 +195,43 @@
        </dl>
        <p v-if="selectedDeliveryTask.error_message" class="delivery-error-text">{{ selectedDeliveryTask.error_message }}</p>

-        <div class="delivery-credential-panel" :class="{ available: credentialEligible(selectedDeliveryTask) || revealedCredentials.length > 0 }">
-          <div class="delivery-credential-head">
+        <div v-if="credentialEligible(selectedDeliveryTask) || revealedCredentials.length > 0" class="credential-handoff">
+          <div class="credential-head">
            <div>
              <span class="eyebrow">ONE-TIME CREDENTIAL</span>
-              <h4>管理员凭证</h4>
+              <h4>root 管理员凭证</h4>
            </div>
-            <span class="tag" :class="credentialStatusClass(selectedDeliveryTask)">{{ credentialStatusText(selectedDeliveryTask) }}</span>
+            <span class="tag tag-amber">仅展示一次</span>
          </div>
+          <p>请立即复制或下载凭证文件；关闭后页面不再显示明文密码。</p>

          <template v-if="revealedCredentials.length">
-            <p>凭证仅展示一次；请立即复制或下载，关闭弹窗后平台不再提供明文密码。</p>
-            <div class="delivery-secret">
-              <code v-for="item in revealedCredentials" :key="`${item.username}@${item.host}`">{{ item.username }}@{{ item.host }}　{{ item.password }}</code>
-              <div class="delivery-secret-actions">
-                <el-button :icon="CopyDocument" @click="copyDeliveryText(credentialClipboardText)">复制凭证</el-button>
-                <el-button :icon="Download" @click="downloadDeliveryCredential(selectedDeliveryTask)">下载凭证文件</el-button>
+            <div class="credential-secret">
+              <div v-for="item in revealedCredentials" :key="`${item.username}@${item.account_host || item.host}`" class="credential-account">
+                <div class="credential-field">
+                  <span>用户名</span>
+                  <code>{{ credentialUsername(item) }}</code>
+                  <el-button text :icon="CopyDocument" aria-label="复制用户名" title="复制用户名" @click="copyDeliveryText(credentialUsername(item), '用户名已复制')" />
+                </div>
+                <div class="credential-field">
+                  <span>密码</span>
+                  <code>{{ item.password }}</code>
+                  <el-button text :icon="CopyDocument" aria-label="复制密码" title="复制密码" @click="copyDeliveryText(item.password, '密码已复制')" />
+                </div>
+              </div>
+              <div class="credential-actions">
+                <el-button :icon="Download" @click="downloadDeliveryCredential(selectedDeliveryTask)">下载 Excel 凭证</el-button>
                <el-button type="success" plain :icon="CircleCheck" @click="deliveryDetailVisible = false">已保存，关闭</el-button>
              </div>
            </div>
          </template>
-          <template v-else-if="credentialEligible(selectedDeliveryTask)">
-            <p>凭证仅可领取一次，领取后服务端立即销毁明文。</p>
-            <el-button type="warning" :loading="credentialRevealing" @click="revealDeliveryCredential(selectedDeliveryTask)">领取一次性凭证</el-button>
-          </template>
-          <p v-else-if="['finished', 'register_failed'].includes(selectedDeliveryTask.status)">该任务的一次性凭证已领取或不可用，平台不再提供明文密码。</p>
-          <p v-else>仅交付成功的任务提供一次性凭证。</p>
+          <el-button v-else type="warning" :loading="credentialRevealing" @click="revealDeliveryCredential(selectedDeliveryTask)">查看一次性密码</el-button>
        </div>
+        <div v-else-if="['finished', 'register_failed'].includes(selectedDeliveryTask.status)" class="credential-unavailable">
+          <strong>一次性凭证已关闭</strong>
+          <span>历史任务仍可查看连接信息，但平台不会再次展示 root 明文密码。</span>
+        </div>
+        <p v-else class="delivery-error-text">仅交付成功的任务提供一次性凭证。</p>
      </template>
    </el-dialog>
  </div>
@@ -259,6 +265,8 @@ interface ServiceLedgerRow {
 const services = ref<ServiceLedgerRow[]>([])
 const serviceLoading = ref(false)
 const serviceError = ref('')
+const servicePage = ref(1)
+const servicePageSize = ref(10)

 const deliveryRecords = ref<DeliveryTask[]>([])
 const deliveryLoading = ref(false)
@@ -271,12 +279,30 @@ const containerServices = ref<ContainerWorkload[]>([])
 const containerSummary = ref<ContainerServiceSummary>({ ...emptyContainerServiceSummary })
 const containerLoading = ref(false)
 const containerError = ref('')
+const containerPage = ref(1)
+const containerPageSize = ref(10)

 const filteredServices = computed(() => services.value)
-const serviceInstances = computed(() => filteredServices.value.reduce((sum, service) => sum + service.instances, 0))
-const healthyInstances = computed(() => filteredServices.value.reduce((sum, service) => sum + service.healthyCount, 0))
+const pagedServices = computed(() => paginate(filteredServices.value, servicePage.value, servicePageSize.value))
+const pagedContainerServices = computed(() => paginate(containerServices.value, containerPage.value, containerPageSize.value))
+const totalServiceCount = computed(() => filteredServices.value.length + containerServices.value.length)
+const mysqlInstances = computed(() => filteredServices.value.reduce((sum, service) => sum + service.instances, 0))
+const serviceInstances = computed(() => mysqlInstances.value + (containerSummary.value.pods || 0))
+const healthyInstances = computed(() => {
+  const mysqlHealthy = filteredServices.value.reduce((sum, service) => sum + service.healthyCount, 0)
+  return mysqlHealthy + (containerSummary.value.readyPods || 0)
+})
 const unhealthyInstances = computed(() => Math.max(serviceInstances.value - healthyInstances.value, 0))
-const serviceDatacenters = computed(() => new Set(filteredServices.value.map((service) => service.dc).filter(Boolean)).size)
+const serviceDatacenters = computed(() => {
+  const domains = new Set<string>()
+  filteredServices.value.forEach((service) => {
+    if (service.dc && service.dc !== '-') domains.add(`dc:${service.dc}`)
+  })
+  containerServices.value.forEach((service) => {
+    if (service.cluster) domains.add(`cluster:${service.cluster}`)
+  })
+  return domains.size
+})
 const serviceHealthPercent = computed(() => {
  if (serviceInstances.value === 0) return '0.0'
  return ((healthyInstances.value / serviceInstances.value) * 100).toFixed(1)
@@ -309,9 +335,10 @@ const deliveryStatusLabels: Record<string, string> = {
  rollback_acknowledged: '已确认清理',
 }

-const credentialClipboardText = computed(() =>
-  revealedCredentials.value.map((item) => `${item.username}@${item.host} ${item.password}`).join('\n'),
-)
+function paginate<T>(items: T[], page: number, pageSize: number) {
+  const start = (Math.max(page, 1) - 1) * pageSize
+  return items.slice(start, start + pageSize)
+}

 const loadDeliveryRecords = async () => {
  const businessLineId = businessLineStore.current?.id
@@ -331,8 +358,19 @@ const loadDeliveryRecords = async () => {
  }
 }

-const refreshServices = () => {
-  loadServiceLedger()
+const refreshServices = async () => {
+  const businessLineId = businessLineStore.current?.id
+  if (businessLineId) {
+    serviceLoading.value = true
+    try {
+      await deliveryApi.syncMySQLServices(businessLineId)
+    } catch (error) {
+      ElMessage.warning(error instanceof Error ? error.message : 'MySQL 实例状态同步失败')
+    } finally {
+      serviceLoading.value = false
+    }
+  }
+  await loadServiceLedger()
  loadContainerServices()
  loadDeliveryRecords()
 }
@@ -343,29 +381,19 @@ function openDeliveryDetail(task: DeliveryTask) {
  deliveryDetailVisible.value = true
 }

-function openDeliveryRecordById(id: string) {
-  const task = deliveryRecords.value.find((item) => item.id === id)
-  if (task) openDeliveryDetail(task)
+function latestDeliveryTaskForService(serviceName: string) {
+  return deliveryRecords.value.find((task) => task.instance_name === serviceName)
 }

-function deliveryTasksForService(serviceName: string) {
-  return deliveryRecords.value.filter((task) => task.instance_name === serviceName)
+function latestCredentialTaskForService(serviceName: string) {
+  const task = latestDeliveryTaskForService(serviceName)
+  return task && credentialEligible(task) ? task : undefined
 }

 function credentialEligible(task: DeliveryTask) {
  return ['finished', 'register_failed'].includes(task.status) && Boolean(task.credential_available)
 }

-function credentialStatusText(task: DeliveryTask) {
-  if (credentialEligible(task)) return '可领取'
-  if (['finished', 'register_failed'].includes(task.status)) return '已领取'
-  return '不提供'
-}
-
-function credentialStatusClass(task: DeliveryTask) {
-  return credentialEligible(task) ? 'tag-amber' : ''
-}
-
 function markCredentialUnavailable(taskID: string) {
  const task = deliveryRecords.value.find((item) => item.id === taskID)
  if (task) task.credential_available = false
@@ -423,31 +451,58 @@ function formatDeliveryTime(value: string, withYear = false) {
  }).format(date)
 }

-async function copyDeliveryText(value: string) {
+async function copyDeliveryText(value: string, message = '已复制') {
  if (!value) return
  try {
    await navigator.clipboard.writeText(value)
-    ElMessage.success('凭证已复制')
+    ElMessage.success(message)
  } catch {
    ElMessage.error('复制失败，请手动选择文本')
  }
 }

+function credentialUsername(credential: DeploymentCredential) {
+  return credential.account_host ? `${credential.username}@${credential.account_host}` : credential.username
+}
+
+function escapeExcelCell(value: unknown) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
 function downloadDeliveryCredential(task: DeliveryTask) {
  if (!revealedCredentials.value.length) return
-  const lines = [
-    '# XInfra MySQL delivery credential',
-    `instance=${task.instance_name}`,
-    `endpoint=${deliveryEndpoint(task)}`,
-    ...revealedCredentials.value.map((item) => `${item.username}@${item.host}=${item.password}`),
-  ]
-  const url = URL.createObjectURL(new Blob([lines.join('\n') + '\n'], { type: 'text/plain;charset=utf-8' }))
+  const rows = revealedCredentials.value.map((item) => [
+    item.service || 'mysql',
+    item.instance_name || task.instance_name,
+    item.host || task.target_host_ip || task.target_host || '',
+    item.port || task.mysql_port || '',
+    item.username,
+    item.account_host || '',
+    item.password,
+  ])
+  const bodyRows = rows
+    .map((row) => `<tr>${row.map((cell) => `<td>${escapeExcelCell(cell)}</td>`).join('')}</tr>`)
+    .join('')
+  const content = `<!doctype html>
+<html>
+<head><meta charset="utf-8"></head>
+<body>
+<table>
+<thead><tr><th>服务</th><th>实例</th><th>主机</th><th>端口</th><th>用户名</th><th>账号域</th><th>密码</th></tr></thead>
+<tbody>${bodyRows}</tbody>
+</table>
+</body>
+</html>`
+  const url = URL.createObjectURL(new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' }))
  const link = document.createElement('a')
  link.href = url
-  link.download = `${task.instance_name}-credential.txt`
+  link.download = `${task.instance_name}-credential.xls`
  link.click()
  URL.revokeObjectURL(url)
-  ElMessage.success('凭证文件已下载，请妥善保管')
+  ElMessage.success('Excel 凭证已下载，请妥善保管')
 }

 const loadServiceLedger = async () => {
@@ -511,6 +566,8 @@ const loadContainerServices = async () => {
 watch(
  () => businessLineStore.current?.id,
  () => {
+    servicePage.value = 1
+    containerPage.value = 1
    loadServiceLedger()
    loadContainerServices()
    loadDeliveryRecords()
@@ -518,6 +575,14 @@ watch(
  { immediate: true },
 )

+watch([() => filteredServices.value.length, servicePageSize], ([total]) => {
+  servicePage.value = Math.min(servicePage.value, Math.max(Math.ceil(total / servicePageSize.value), 1))
+})
+
+watch([() => containerServices.value.length, containerPageSize], ([total]) => {
+  containerPage.value = Math.min(containerPage.value, Math.max(Math.ceil(total / containerPageSize.value), 1))
+})
+
 watch(deliveryDetailVisible, (visible) => {
  if (!visible) revealedCredentials.value = []
 })
@@ -616,35 +681,60 @@ watch(deliveryDetailVisible, (visible) => {
  overflow-wrap: anywhere;
 }

-.delivery-credential-panel {
+.credential-handoff {
  margin-top: 18px;
-  padding: 14px;
-  border: 1px solid var(--line-soft);
+  padding: 13px;
+  border: 1px solid var(--tag-amber-border);
  border-radius: 7px;
-  background: var(--bg-panel-2);
-}
-
-.delivery-credential-panel.available {
-  border-color: var(--tag-amber-border);
  background: var(--tag-amber-bg);
 }

-.delivery-credential-panel > p {
-  margin: 12px 0;
+.credential-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.credential-head h4 {
+  margin: 3px 0 0;
+  color: var(--text-hi);
+  font-size: 13px;
+}
+
+.credential-handoff > p {
+  margin: 10px 0;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
 }

-.delivery-secret {
+.credential-secret {
  display: grid;
  gap: 10px;
-  margin-top: 12px;
 }

-.delivery-secret > code {
+.credential-account {
+  display: grid;
+  gap: 8px;
+}
+
+.credential-field {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) 32px;
+  align-items: center;
+  gap: 8px;
+}
+
+.credential-field > span {
+  color: var(--text-dim);
+  font-size: 11.5px;
+  font-weight: 700;
+}
+
+.credential-field > code {
  overflow-wrap: anywhere;
-  padding: 10px 11px;
+  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--bg-panel);
@@ -652,12 +742,37 @@ watch(deliveryDetailVisible, (visible) => {
  font-size: 12px;
 }

-.delivery-secret-actions {
+.credential-field .el-button {
+  width: 32px;
+  min-width: 32px;
+}
+
+.credential-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
 }

+.credential-unavailable {
+  display: grid;
+  gap: 5px;
+  margin-top: 18px;
+  padding: 13px;
+  border: 1px dashed var(--line);
+  border-radius: 7px;
+  background: var(--bg-panel-2);
+}
+
+.credential-unavailable strong {
+  color: var(--text-hi);
+  font-size: 12px;
+}
+
+.credential-unavailable span {
+  color: var(--text-dim);
+  font-size: 11.5px;
+}
+
 .tag.tag-green {
  color: var(--tag-green-text);
  background: var(--tag-green-bg);