更新前端看板

frontend/src/views/tenants/TenantListView.vue

@@ -1,16 +1,37 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import DataTablePage from '@/components/DataTablePage.vue'
-import { createTenant, getTenants, setTenantQuota, type Tenant } from '@/api/modules/tenant'
+import { createTenant, deleteTenant, getTenants, setTenantQuota, type Tenant } from '@/api/modules/tenant'
 
 const router = useRouter()
 const loading = ref(false)
 const tenants = ref<Tenant[]>([])
 const showCreate = ref(false)
-const form = ref({ name: '', code: '', quota: '' as string })
+const showQuota = ref(false)
+const currentTenant = ref<Tenant | null>(null)
+const form = ref({ name: '', code: '', gpu: 0, storage: 0, maxProjects: 0 })
+const quotaForm = reactive({ gpu: 0, storage: 0, maxProjects: 0 })
+
+function parseQuota(quota: Record<string, unknown> | undefined | null) {
+  const q = quota || {}
+  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() {
   loading.value = true
@@ -30,35 +51,51 @@ async function submitCreate() {
     ElMessage.warning('请填写租户名称')
     return
   }
-  let quota: Record<string, unknown> = {}
-  if (form.value.quota) {
-    try {
-      quota = JSON.parse(form.value.quota)
-    } catch {
-      ElMessage.error('配额需为合法 JSON')
-      return
-    }
-  }
+  const quota: Record<string, unknown> = {}
+  if (form.value.gpu > 0) quota.gpu = form.value.gpu
+  if (form.value.storage > 0) quota.storage = form.value.storage
+  if (form.value.maxProjects > 0) quota.max_projects = form.value.maxProjects
   await createTenant({ name: form.value.name, code: form.value.code, quota })
   ElMessage.success('租户创建成功')
   showCreate.value = false
-  form.value = { name: '', code: '', quota: '' }
+  form.value = { name: '', code: '', gpu: 0, storage: 0, maxProjects: 0 }
   load()
 }
 
-async function setQuota(row: Tenant) {
-  const input = await ElMessageBox.prompt('输入租户配额 JSON', '设置配额', {
-    inputValue: JSON.stringify(row.quota || {}),
-  }).catch(() => null)
-  if (!input) return
+function openQuotaDialog(row: Tenant) {
+  currentTenant.value = row
+  const q = parseQuota(row.quota)
+  quotaForm.gpu = q.gpu
+  quotaForm.storage = q.storage
+  quotaForm.maxProjects = q.maxProjects
+  showQuota.value = true
+}
+
+async function submitQuota() {
+  if (!currentTenant.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(currentTenant.value.id, quota)
+  ElMessage.success('配额已更新')
+  showQuota.value = false
+  load()
+}
+
+async function handleDelete(row: Tenant) {
   try {
-    const q = JSON.parse(input.value)
-    await setTenantQuota(row.id, q)
-    ElMessage.success('配额已更新')
-    load()
+    await ElMessageBox.confirm(
+      `确定要删除租户「${row.name}」吗？删除后相关数据将无法恢复。`,
+      '删除确认',
+      { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' },
+    )
   } catch {
-    ElMessage.error('无效的 JSON')
+    return
   }
+  await deleteTenant(row.id)
+  ElMessage.success('租户已删除')
+  load()
 }
 
 onMounted(load)
@@ -72,30 +109,34 @@ onMounted(load)
       </template>
       <template #columns>
         <el-table-column prop="name" label="租户名称" min-width="140" />
-        <el-table-column prop="code" label="编码" min-width="100" />
-        <el-table-column label="配额" min-width="160">
-          <template #default="{ row }">
-            {{ Object.keys(row.quota || {}).length ? JSON.stringify(row.quota) : '—' }}
-          </template>
-        </el-table-column>
+        <el-table-column prop="code" label="用户ID" min-width="100" />
         <el-table-column prop="status" label="状态" min-width="100" />
         <el-table-column prop="create_time" label="创建时间" min-width="180" />
       </template>
       <template #actions="{ row }">
         <el-button link type="primary" @click="openDetail(row.id)">详情</el-button>
-        <el-button link type="primary" @click="setQuota(row)">配额</el-button>
+        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
       </template>
     </DataTablePage>
+
+    <!-- 新建租户弹窗 -->
     <el-dialog v-model="showCreate" title="新建租户" width="520px">
-      <el-form label-width="90px">
+      <el-form label-width="100px">
         <el-form-item label="名称" required>
           <el-input v-model="form.name" placeholder="租户名称" />
         </el-form-item>
-        <el-form-item label="编码">
-          <el-input v-model="form.code" placeholder="tenant code" />
+        <el-form-item label="用户ID">
+          <el-input v-model="form.code" placeholder="用户ID" />
         </el-form-item>
-        <el-form-item label="配额 JSON">
-          <el-input v-model="form.quota" type="textarea" :rows="3" placeholder='{"gpu": 8}' />
+        <el-divider content-position="left">配额设置（可选，0 表示不限制）</el-divider>
+        <el-form-item label="GPU 数量">
+          <el-input-number v-model="form.gpu" :min="0" :step="1" placeholder="GPU 卡数" />
+        </el-form-item>
+        <el-form-item label="存储配额(GB)">
+          <el-input-number v-model="form.storage" :min="0" :step="10" placeholder="存储大小" />
+        </el-form-item>
+        <el-form-item label="最大项目数">
+          <el-input-number v-model="form.maxProjects" :min="0" :step="1" placeholder="项目上限" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -103,6 +144,25 @@ onMounted(load)
         <el-button type="primary" @click="submitCreate">创建</el-button>
       </template>
     </el-dialog>
+
+    <!-- 设置配额弹窗 -->
+    <el-dialog v-model="showQuota" title="设置配额" width="480px">
+      <el-form label-width="100px">
+        <el-form-item label="GPU 数量">
+          <el-input-number v-model="quotaForm.gpu" :min="0" :step="1" placeholder="GPU 卡数" />
+        </el-form-item>
+        <el-form-item label="存储配额(GB)">
+          <el-input-number v-model="quotaForm.storage" :min="0" :step="10" placeholder="存储大小" />
+        </el-form-item>
+        <el-form-item label="最大项目数">
+          <el-input-number v-model="quotaForm.maxProjects" :min="0" :step="1" placeholder="项目上限" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showQuota = false">取消</el-button>
+        <el-button type="primary" @click="submitQuota">保存</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>