feat: add super backend

frontend/superadmin/src/views/TenantsPage.vue

@@ -1,47 +1,177 @@
 <template>
-  <main style="padding: 16px">
-    <h1 style="font-size: 18px; font-weight: 600">租户</h1>
-    <div style="margin-top: 12px; display: flex; gap: 8px">
-      <input v-model="keyword" placeholder="keyword" />
-      <button @click="load">查询</button>
+  <div class="grid gap-4">
+    <div class="flex items-center gap-3">
+      <div class="text-lg font-semibold">租户列表</div>
+      <div class="flex-1"></div>
+      <span class="p-input-icon-left w-72">
+        <i class="pi pi-search" />
+        <InputText v-model="name" placeholder="按租户名称筛选（name）" class="w-full" @keyup.enter="reload" />
+      </span>
+      <Button severity="secondary" label="查询" @click="reload" />
     </div>
-    <table style="margin-top: 12px; width: 100%; border-collapse: collapse">
-      <thead>
-        <tr>
-          <th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">ID</th>
-          <th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Code</th>
-          <th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Name</th>
-          <th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Admins</th>
-          <th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Admin Expire At(max)</th>
-          <th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="it in items" :key="it.id">
-          <td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.id }}</td>
-          <td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.tenant_code }}</td>
-          <td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.name }}</td>
-          <td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.admin_count }}</td>
-          <td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.admin_expire_at || '-' }}</td>
-          <td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.status }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </main>
+
+    <DataTable
+      :value="items"
+      :loading="loading"
+      dataKey="id"
+      lazy
+      paginator
+      :rows="limit"
+      :totalRecords="total"
+      :first="(page - 1) * limit"
+      :rowsPerPageOptions="[10, 20, 50, 100]"
+      :sortField="sortField"
+      :sortOrder="sortOrder"
+      @page="onPage"
+      @sort="onSort"
+      class="rounded-xl border bg-white"
+    >
+      <Column field="id" header="ID" sortable style="width: 90px" />
+      <Column field="code" header="Code" sortable style="width: 160px" />
+      <Column field="name" header="Name" sortable />
+      <Column field="status" header="Status" sortable style="width: 150px">
+        <template #body="{ data }">
+          <Tag :value="data.status" :severity="statusSeverity(data.status)" />
+        </template>
+      </Column>
+      <Column field="expired_at" header="Expired At" sortable style="width: 200px" />
+      <Column field="userCount" header="Users" sortable style="width: 120px" />
+      <Column field="userBalance" header="Balance" sortable style="width: 140px" />
+      <Column header="Action" style="width: 140px">
+        <template #body="{ data }">
+          <Button size="small" label="续期" @click="openExtend(data)" />
+        </template>
+      </Column>
+    </DataTable>
+
+    <Dialog v-model:visible="extendVisible" modal header="更新过期时间" :style="{ width: '420px' }">
+      <div class="grid gap-3">
+        <div class="text-sm text-slate-600">租户：{{ selected?.name }}（{{ selected?.code }}）</div>
+        <Dropdown v-model="duration" :options="durationOptions" optionLabel="label" optionValue="value" class="w-full" />
+      </div>
+      <template #footer>
+        <Button severity="secondary" label="取消" @click="extendVisible = false" />
+        <Button :loading="extendLoading" label="保存" @click="saveExtend" />
+      </template>
+    </Dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Tag from 'primevue/tag'
+import Dialog from 'primevue/dialog'
+import Dropdown from 'primevue/dropdown'
 import { api } from '../api'
 
-const keyword = ref('')
-const items = ref<any[]>([])
+type TenantItem = {
+  id: number
+  code: string
+  uuid: string
+  name: string
+  status: string
+  created_at?: string
+  updated_at?: string
+  expired_at?: string
+  userCount?: number
+  userBalance?: number
+}
+
+const toast = useToast()
+const loading = ref(false)
+const items = ref<TenantItem[]>([])
+const total = ref(0)
+
+const page = ref(1)
+const limit = ref(20)
+const name = ref('')
+
+const sortField = ref<string>('id')
+const sortOrder = ref<number>(-1) // -1 desc, 1 asc
 
 async function load() {
-  const resp = await api.get('/tenants', { params: { page: 1, limit: 50, keyword: keyword.value } })
-  items.value = resp.data.items || []
+  loading.value = true
+  try {
+    const params: any = {
+      page: page.value,
+      limit: limit.value,
+    }
+    if (name.value.trim()) params.name = name.value.trim()
+    if (sortField.value) {
+      if (sortOrder.value === 1) params.asc = sortField.value
+      else if (sortOrder.value === -1) params.desc = sortField.value
+    }
+    const resp = await api.get('/tenants', { params })
+    items.value = Array.isArray(resp.data?.items) ? resp.data.items : []
+    total.value = Number(resp.data?.total || 0)
+  } catch (e: any) {
+    toast.add({ severity: 'error', summary: '加载失败', detail: e?.response?.data?.message || e?.message || 'error', life: 3000 })
+  } finally {
+    loading.value = false
+  }
+}
+
+function reload() {
+  page.value = 1
+  load()
+}
+
+function onPage(e: any) {
+  page.value = Math.floor(e.first / e.rows) + 1
+  limit.value = e.rows
+  load()
+}
+
+function onSort(e: any) {
+  sortField.value = e.sortField || 'id'
+  sortOrder.value = e.sortOrder || -1
+  load()
+}
+
+function statusSeverity(status: string) {
+  if (status === 'verified') return 'success'
+  if (status === 'pending_verify') return 'warning'
+  if (status === 'banned') return 'danger'
+  return 'secondary'
+}
+
+const extendVisible = ref(false)
+const extendLoading = ref(false)
+const selected = ref<TenantItem | null>(null)
+const duration = ref<number>(30)
+const durationOptions = [
+  { label: '7 天', value: 7 },
+  { label: '30 天', value: 30 },
+  { label: '90 天', value: 90 },
+  { label: '180 天', value: 180 },
+  { label: '365 天', value: 365 },
+]
+
+function openExtend(row: TenantItem) {
+  selected.value = row
+  duration.value = 30
+  extendVisible.value = true
+}
+
+async function saveExtend() {
+  if (!selected.value) return
+  extendLoading.value = true
+  try {
+    await api.patch(`/tenants/${selected.value.id}`, { duration: duration.value })
+    toast.add({ severity: 'success', summary: '已更新', life: 1500 })
+    extendVisible.value = false
+    await load()
+  } catch (e: any) {
+    toast.add({ severity: 'error', summary: '更新失败', detail: e?.response?.data?.message || e?.message || 'error', life: 3000 })
+  } finally {
+    extendLoading.value = false
+  }
 }
 
 onMounted(load)
 </script>
-