第一次提交

frontend/src/views/tenants/TenantListView.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import DataTablePage from '@/components/DataTablePage.vue'
+import { createTenant, getTenants, type Tenant } from '@/api/modules/tenant'
+
+const router = useRouter()
+const loading = ref(false)
+const tenants = ref<Tenant[]>([])
+
+async function load() {
+  loading.value = true
+  try {
+    tenants.value = await getTenants()
+  } finally {
+    loading.value = false
+  }
+}
+
+const dialogVisible = ref(false)
+const form = ref({ name: '', code: '', status: 'active', owner_user_id: '', max_projects: 5, retention_policy_id: '' })
+
+function openCreate() {
+  form.value = { name: '', code: '', status: 'active', owner_user_id: '', max_projects: 5, retention_policy_id: '' }
+  dialogVisible.value = true
+}
+
+async function submitCreate() {
+  await createTenant({
+    name: form.value.name,
+    code: form.value.code || undefined,
+    status: form.value.status,
+    owner_user_id: form.value.owner_user_id || undefined,
+    quota: { max_projects: Number(form.value.max_projects) },
+    retention_policy_id: form.value.retention_policy_id || undefined,
+  })
+  ElMessage.success('创建成功')
+  dialogVisible.value = false
+  load()
+}
+
+function openDetail(row: Tenant) {
+  router.push(`/tenants/${row.id}`)
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-wrap">
+    <DataTablePage
+      title="租户管理"
+      :data="tenants"
+      :loading="loading"
+      searchable
+      :search-fields="['name', 'code']"
+      create-text="新建租户"
+      @create="openCreate"
+    >
+      <template #columns>
+        <el-table-column prop="name" label="名称" min-width="120" />
+        <el-table-column prop="code" label="编码" min-width="120" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'active' ? 'success' : 'info'">{{ row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="owner_user_id" label="拥有者" min-width="120" />
+        <el-table-column prop="retention_policy_id" label="留存策略" min-width="120" />
+      </template>
+      <template #actions="{ row }">
+        <div class="action-buttons">
+          <el-button link type="primary" @click="openDetail(row as Tenant)">详情</el-button>
+        </div>
+      </template>
+    </DataTablePage>
+
+    <el-dialog v-model="dialogVisible" title="新建租户" width="480px">
+      <el-form :model="form" label-width="90px">
+        <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="留空自动生成" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="form.status">
+            <el-option label="启用" value="active" />
+            <el-option label="停用" value="disabled" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="拥有者ID">
+          <el-input v-model="form.owner_user_id" placeholder="用户 ID" />
+        </el-form-item>
+        <el-form-item label="最大项目数">
+          <el-input-number v-model="form.max_projects" :min="1" />
+        </el-form-item>
+        <el-form-item label="留存策略ID">
+          <el-input v-model="form.retention_policy_id" placeholder="retention_policy ID" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitCreate">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.page-wrap {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+}
+</style>