YG_FT/frontend/src/views/tenants/TenantDetailView.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getTenant, setTenantQuota, type Tenant } from '@/api/modules/tenant'

const route = useRoute()
const router = useRouter()
const tenant = ref<Tenant | null>(null)
const loading = ref(false)
const quotaForm = reactive({ gpu: 0, storage: 0, maxProjects: 0 })

function parseQuota(quota: Record<string, unknown> | undefined | null | string) {
  // 兼容处理：quota 可能是 JSON 字符串或嵌套 { quota: {...} } 格式
  let q: Record<string, unknown> = {}
  if (typeof quota === 'string') {
    try { q = JSON.parse(quota) || {} } catch { q = {} }
  } else if (quota && typeof quota === 'object') {
    q = quota
  }
  // 如果是嵌套格式 { quota: { gpu: 4, ... } }，提取内层
  if (q.quota && typeof q.quota === 'object' && !q.gpu) {
    q = q.quota as Record<string, unknown>
  }
  return {
    gpu: Number(q.gpu || q.gpu_quota || 0),
    storage: Number(q.storage || q.storage_quota || 0),
    maxProjects: Number(q.max_projects || 0),
  }
}

function formatQuota(quota: Record<string, unknown> | undefined | null) {
  const q = parseQuota(quota)
  const parts: string[] = []
  if (q.gpu > 0) parts.push(`GPU ${q.gpu}`)
  if (q.storage > 0) parts.push(`存储 ${q.storage}GB`)
  if (q.maxProjects > 0) parts.push(`项目 ${q.maxProjects}`)
  return parts.length ? parts.join(' | ') : '—'
}

async function load() {
  const id = route.params.id as string
  loading.value = true
  try {
    tenant.value = await getTenant(id)
    const q = parseQuota(tenant.value?.quota)
    quotaForm.gpu = q.gpu
    quotaForm.storage = q.storage
    quotaForm.maxProjects = q.maxProjects
  } finally {
    loading.value = false
  }
}

async function saveQuota() {
  if (!tenant.value) return
  const quota: Record<string, unknown> = {}
  if (quotaForm.gpu > 0) quota.gpu = quotaForm.gpu
  if (quotaForm.storage > 0) quota.storage = quotaForm.storage
  if (quotaForm.maxProjects > 0) quota.max_projects = quotaForm.maxProjects
  await setTenantQuota(tenant.value.id, quota)
  ElMessage.success('配额已保存')
  load()
}

onMounted(load)
</script>

<template>
  <div class="page">
    <el-page-header title="返回" @back="router.back()">
      <template #content>
        <span class="page-title">租户详情：{{ tenant?.name }}</span>
      </template>
    </el-page-header>
    <el-card class="section" v-loading="loading">
      <template #header>基本信息</template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="名称">{{ tenant?.name }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ tenant?.code }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ tenant?.status }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ tenant?.create_time }}</el-descriptions-item>
        <el-descriptions-item label="配额">{{ formatQuota(tenant?.quota) }}</el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <div class="quota-edit">
        <span class="label">配额设置（0 表示不限制）</span>
        <el-form label-width="100px">
          <el-form-item label="GPU 数量">
            <el-input-number v-model="quotaForm.gpu" :min="0" :step="1" />
          </el-form-item>
          <el-form-item label="存储配额(GB)">
            <el-input-number v-model="quotaForm.storage" :min="0" :step="10" />
          </el-form-item>
          <el-form-item label="最大项目数">
            <el-input-number v-model="quotaForm.maxProjects" :min="0" :step="1" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveQuota">保存配额</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.page { padding: 16px; }
.section { margin-top: 16px; }
.page-title { font-size: 16px; font-weight: 600; }
.quota-edit { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.label { font-size: 13px; color: #606266; }
</style>