rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance tenant management with status description and improved UI components

Browse Source
This commit is contained in:
Rogee
2025-12-16 23:25:46 +08:00
parent 2a12e1c3a9
commit e8b2699104
11 changed files with 320 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/superadmin/src/views/LoginPage.vue
View File

@@ -1,44 +1,70 @@
<template>
<div class="mx-auto max-w-md">
<div class="rounded-xl border bg-white p-6 shadow-sm">
<div class="flex items-center gap-2">
<i class="pi pi-lock text-slate-700"></i>
<h1 class="text-lg font-semibold">超级管理员登录</h1>
</div>
<div class="mt-6 grid gap-4">
<div class="grid gap-2">
<label class="text-sm text-slate-600">用户名</label>
<InputText v-model="username" autocomplete="username" />
<div
class="fixed inset-0 grid place-items-center overflow-auto bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 px-4 py-12">
<div class="w-full max-w-md">
<div class="rounded-2xl border border-white/10 bg-white/95 shadow-xl backdrop-blur">
<div class="border-b px-6 py-5">
<div class="flex items-center gap-3">
<div class="grid h-10 w-10 place-items-center rounded-xl bg-indigo-50 text-indigo-700">
<i class="pi pi-shield"></i>
</div>
<div>
<div class="text-lg font-semibold leading-tight">Super Admin</div>
<div class="text-xs text-slate-500">租户与运营管理控制台</div>
</div>
</div>
</div>
<div class="grid gap-2">
<label class="text-sm text-slate-600">密码</label>
<Password v-model="password" :feedback="false" toggleMask autocomplete="current-password" />
</div>
<Button :loading="loading" label="登录" class="w-full" @click="login" />
</div>
<p class="mt-4 text-xs text-slate-500">接口：<code>/super/v1/auth/login</code></p>
<div class="px-6 py-6">
<Message v-if="banner" severity="warn" :closable="false" class="mb-4">{{ banner }}</Message>
<form class="grid gap-4" @submit.prevent="login">
<div class="grid gap-2">
<label class="text-sm font-medium text-slate-700">用户名</label>
<InputText v-model="username" autocomplete="username" placeholder="请输入用户名" class="w-full" />
</div>
<div class="grid gap-2">
<label class="text-sm font-medium text-slate-700">密码</label>
<Password v-model="password" :feedback="false" toggleMask autocomplete="current-password"
placeholder="请输入密码" class="w-full" inputClass="w-full" />
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Checkbox v-model="remember" binary inputId="remember" />
<label class="text-sm text-slate-600" for="remember">记住用户名</label>
</div>
</div>
<Button :loading="loading" type="submit" label="登录" icon="pi pi-sign-in" class="w-full" />
</form>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Button from 'primevue/button'
import Checkbox from 'primevue/checkbox'
import InputText from 'primevue/inputtext'
import Message from 'primevue/message'
import Password from 'primevue/password'
import { useToast } from 'primevue/usetoast'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import InputText from 'primevue/inputtext'
import Password from 'primevue/password'
import Button from 'primevue/button'
import { api } from '../api'
import { setToken } from '../auth'
import { getRememberedUsername, setRememberedUsername, setToken } from '../auth'
const router = useRouter()
const toast = useToast()
const username = ref('')
const username = ref(getRememberedUsername())
const password = ref('')
const loading = ref(false)
const remember = ref(Boolean(username.value))
const banner = ref('')
async function login() {
if (!username.value.trim() || !password.value) {
@@ -46,17 +72,21 @@ async function login() {
return
}
loading.value = true
banner.value = ''
try {
const resp = await api.post('/auth/login', { username: username.value.trim(), password: password.value })
const token = String(resp.data?.token || '').trim()
if (!token) throw new Error('missing token')
setToken(token)
if (remember.value) setRememberedUsername(username.value.trim())
else setRememberedUsername('')
await router.push('/tenants')
} catch (e: any) {
toast.add({ severity: 'error', summary: '登录失败', detail: e?.response?.data?.message || e?.message || 'error', life: 3000 })
const msg = e?.response?.data?.message || e?.message || 'error'
banner.value = String(msg)
toast.add({ severity: 'error', summary: '登录失败', detail: msg, life: 3000 })
} finally {
loading.value = false
}
}
</script>

229
frontend/superadmin/src/views/TenantsPage.vue
View File

@@ -1,72 +1,140 @@
<template>
<div class="grid gap-4">
<div class="flex items-center gap-3">
<div class="text-lg font-semibold">租户列表</div>
<div class="flex flex-col gap-3 rounded-2xl border bg-white p-4 shadow-sm md:flex-row md:items-center">
<div class="flex items-center gap-3">
<div class="grid h-10 w-10 place-items-center rounded-xl bg-indigo-50 text-indigo-700">
<i class="pi pi-building"></i>
</div>
<div>
<div class="text-base font-semibold leading-tight">租户列表</div>
<div class="text-xs text-slate-500">查询、排序、续期与快速入口</div>
</div>
</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 class="flex w-full flex-col gap-2 md:w-auto md:flex-row md:items-center">
<span class="w-full md:w-80">
<InputText v-model="name" placeholder="按租户名称筛选（name）" class="w-full" @keyup.enter="reload" />
</span>
<Button severity="secondary" icon="pi pi-search" label="查询" @click="reload" />
<Button severity="secondary" icon="pi pi-refresh" label="刷新" @click="load" />
</div>
</div>
<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>
<div v-if="error" class="rounded-2xl border bg-white p-4 shadow-sm">
<Message severity="error" :closable="false">
<div class="flex items-center justify-between gap-4">
<div class="min-w-0">
<div class="font-medium">加载失败</div>
<div class="mt-1 break-all text-xs text-slate-600">{{ error }}</div>
</div>
<Button icon="pi pi-refresh" label="重试" @click="load" />
</div>
</Message>
</div>
<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 class="rounded-2xl border bg-white shadow-sm">
<DataTable :value="items" :loading="loading" dataKey="id" lazy paginator stripedRows rowHover :rows="limit"
:totalRecords="total" :first="(page - 1) * limit" :rowsPerPageOptions="[10, 20, 50, 100]" :sortField="sortField"
:sortOrder="sortOrder" @page="onPage" @sort="onSort" class="rounded-2xl">
<template #empty>
<div class="flex flex-col items-center gap-2 py-10 text-slate-500">
<i class="pi pi-inbox text-2xl"></i>
<div class="text-sm">暂无数据</div>
<div class="text-xs">可以尝试调整筛选条件或点击刷新。</div>
</div>
</template>
<Column field="id" header="ID" sortable style="width: 90px" />
<Column field="code" header="Code" sortable style="width: 180px">
<template #body="{ data }">
<div class="flex items-center gap-2">
<span class="font-mono text-sm">{{ data.code }}</span>
<Button text rounded size="small" icon="pi pi-copy" severity="secondary" v-tooltip.top="'复制访问链接'"
@click="copyTenantLinks(data)" />
</div>
</template>
</Column>
<Column field="name" header="Name" sortable>
<template #body="{ data }">
<div class="min-w-0">
<div class="truncate font-medium">{{ data.name || '-' }}</div>
</div>
</template>
</Column>
<Column field="status" header="Status" sortable style="width: 160px">
<template #body="{ data }">
<Tag :value="data.status_description" :severity="statusSeverity(data.status)" />
</template>
</Column>
<Column field="expired_at" header="Expired At" sortable style="width: 210px">
<template #body="{ data }">
<Tag :value="formatDate(data.expired_at)" :severity="expiredSeverity(data.expired_at)"
v-tooltip.top="expiredHint(data.expired_at)" />
</template>
</Column>
<Column field="userCount" header="Users" sortable style="width: 120px">
<template #body="{ data }">{{ Number(data.userCount || 0).toLocaleString() }}</template>
</Column>
<Column field="userBalance" header="Balance" sortable style="width: 140px">
<template #body="{ data }">{{ formatMoney(data.userBalance) }}</template>
</Column>
<Column header="Action" style="width: 170px">
<template #body="{ data }">
<div class="flex items-center gap-2">
<Button size="small" icon="pi pi-calendar-plus" label="续期" @click="openExtend(data)" />
<Button size="small" severity="secondary" icon="pi pi-external-link" label="打开"
@click="openTenant(data)" />
</div>
</template>
</Column>
</DataTable>
</div>
<Dialog v-model:visible="extendVisible" modal :style="{ width: '520px' }" :draggable="false">
<template #header>
<div class="flex items-center gap-2">
<i class="pi pi-calendar-plus text-slate-700"></i>
<span class="font-semibold">更新过期时间</span>
</div>
</template>
<div class="grid gap-4">
<div class="rounded-xl bg-slate-50 p-3 text-sm text-slate-700">
<div class="flex items-center justify-between gap-4">
<div class="min-w-0">
<div class="truncate font-medium">{{ selected?.name || '-' }}</div>
<div class="mt-1 truncate font-mono text-xs text-slate-500">{{ selected?.code || '-' }}</div>
</div>
<Tag v-if="selected" :value="selected.status_description" :severity="statusSeverity(selected.status)" />
</div>
</div>
<div class="grid gap-2">
<label class="text-sm font-medium text-slate-700">续期时长</label>
<Dropdown v-model="duration" :options="durationOptions" optionLabel="label" optionValue="value"
class="w-full" />
</div>
</div>
<template #footer>
<Button severity="secondary" label="取消" @click="extendVisible = false" />
<Button :loading="extendLoading" label="保存" @click="saveExtend" />
<Button :loading="extendLoading" icon="pi pi-check" 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 DataTable from 'primevue/datatable'
import Dialog from 'primevue/dialog'
import Dropdown from 'primevue/dropdown'
import InputText from 'primevue/inputtext'
import Message from 'primevue/message'
import Tag from 'primevue/tag'
import { useToast } from 'primevue/usetoast'
import { onMounted, ref } from 'vue'
import { api } from '../api'
type TenantItem = {
@@ -86,6 +154,7 @@ const toast = useToast()
const loading = ref(false)
const items = ref<TenantItem[]>([])
const total = ref(0)
const error = ref('')
const page = ref(1)
const limit = ref(20)
@@ -96,6 +165,7 @@ const sortOrder = ref<number>(-1) // -1 desc, 1 asc
async function load() {
loading.value = true
error.value = ''
try {
const params: any = {
page: page.value,
@@ -110,7 +180,9 @@ async function load() {
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 })
const msg = e?.response?.data?.message || e?.message || 'error'
error.value = String(msg)
toast.add({ severity: 'error', summary: '加载失败', detail: msg, life: 3500 })
} finally {
loading.value = false
}
@@ -140,6 +212,61 @@ function statusSeverity(status: string) {
return 'secondary'
}
function formatDate(s?: string) {
if (!s) return '-'
const d = new Date(s)
if (Number.isNaN(d.getTime())) return String(s)
return d.toLocaleString(undefined, { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}
function daysUntil(expiredAt?: string) {
if (!expiredAt) return null
const d = new Date(expiredAt)
if (Number.isNaN(d.getTime())) return null
const diffMs = d.getTime() - Date.now()
return Math.floor(diffMs / (24 * 60 * 60 * 1000))
}
function expiredSeverity(expiredAt?: string) {
const days = daysUntil(expiredAt)
if (days === null) return 'secondary'
if (days < 10) return 'danger'
if (days < 30) return 'warning'
return 'success'
}
function expiredHint(expiredAt?: string) {
const days = daysUntil(expiredAt)
if (days === null) return ''
if (days < 0) return `已过期 ${Math.abs(days)} 天`
if (days === 0) return '今天到期'
return `剩余 ${days} 天`
}
function formatMoney(v?: number) {
const n = Number(v || 0)
return `¥${(n / 100).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}
async function copyTenantLinks(row: TenantItem) {
const origin = window.location.origin
const userUrl = `${origin}/t/${encodeURIComponent(row.code)}/`
const adminUrl = `${origin}/t/${encodeURIComponent(row.code)}/admin/`
const text = `User: ${userUrl}\nAdmin: ${adminUrl}`
try {
await navigator.clipboard.writeText(text)
toast.add({ severity: 'success', summary: '已复制', detail: row.code, life: 1500 })
} catch {
toast.add({ severity: 'warn', summary: '复制失败', detail: '浏览器不支持剪贴板或权限不足', life: 2500 })
}
}
function openTenant(row: TenantItem) {
const origin = window.location.origin
const url = `${origin}/t/${encodeURIComponent(row.code)}/admin/`
window.open(url, '_blank', 'noopener,noreferrer')
}
const extendVisible = ref(false)
const extendLoading = ref(false)
const selected = ref<TenantItem | null>(null)