feat: add super backend

This commit is contained in:
2025-12-16 17:59:53 +08:00
parent 9bc2155008
commit 55c40c4601
17 changed files with 1490 additions and 191 deletions

File diff suppressed because one or more lines are too long

View File

@@ -4,7 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QuyUn Super Admin</title>
<script type="module" crossorigin src="./assets/index-CFAqJvax.js"></script>
<script type="module" crossorigin src="./assets/index-CafT6NN-.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-bKnkKIcU.css">
</head>
<body>
<div id="app"></div>

File diff suppressed because it is too large Load Diff

View File

@@ -9,15 +9,20 @@
"preview": "vite preview"
},
"dependencies": {
"@primevue/themes": "^4.4.1",
"axios": "^1.7.9",
"primeicons": "^7.0.0",
"primevue": "^4.4.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@types/node": "^22.10.2",
"@vitejs/plugin-vue": "^5.2.1",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.16",
"typescript": "^5.7.2",
"vite": "^6.0.3"
}
}

View File

@@ -0,0 +1,7 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@@ -1,23 +1,37 @@
<template>
<header style="display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eee">
<strong>Super Admin</strong>
<router-link to="/">统计</router-link>
<router-link to="/tenants">租户</router-link>
<router-link to="/roles">角色</router-link>
<span style="flex: 1"></span>
<input v-model="token" placeholder="Bearer token可选" style="width: 320px" />
<button @click="applyToken">应用</button>
</header>
<router-view />
<Toast />
<div class="min-h-screen bg-slate-50 text-slate-900">
<header v-if="authed" class="border-b bg-white">
<div class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">
<div class="flex items-center gap-2">
<i class="pi pi-shield text-slate-700"></i>
<span class="font-semibold">Super Admin</span>
</div>
<nav class="flex items-center gap-3 text-sm">
<router-link class="hover:text-indigo-600" to="/tenants">租户列表</router-link>
</nav>
<div class="flex-1"></div>
<Button size="small" severity="secondary" label="退出" @click="logout" />
</div>
</header>
<main class="mx-auto max-w-6xl px-4 py-6">
<router-view />
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { setSuperToken } from './api'
import Toast from 'primevue/toast'
import Button from 'primevue/button'
import { computed } from 'vue'
import { isAuthed, setToken } from './auth'
import { useRouter } from 'vue-router'
const token = ref('')
const router = useRouter()
const authed = computed(() => isAuthed.value)
function applyToken() {
setSuperToken(token.value)
function logout() {
setToken('')
router.push('/login')
}
</script>

View File

@@ -1,15 +1,23 @@
import axios from 'axios'
import { getToken, setToken } from './auth'
export const api = axios.create({
baseURL: '/super/v1',
export const api = axios.create({ baseURL: '/super/v1' })
api.interceptors.request.use((config) => {
const token = getToken()
if (token) {
config.headers = config.headers ?? {}
config.headers.Authorization = `Bearer ${token}`
}
return config
})
export function setSuperToken(token: string) {
const t = token.trim()
if (!t) {
delete api.defaults.headers.common.Authorization
return
}
api.defaults.headers.common.Authorization = `Bearer ${t}`
}
api.interceptors.response.use(
(resp) => resp,
(err) => {
if (err?.response?.status === 401) {
setToken('')
}
throw err
},
)

View File

@@ -0,0 +1,18 @@
import { computed, ref } from 'vue'
const STORAGE_KEY = 'super_admin_token'
const tokenRef = ref<string>(localStorage.getItem(STORAGE_KEY) || '')
export const isAuthed = computed(() => Boolean(tokenRef.value))
export function getToken(): string {
return tokenRef.value
}
export function setToken(token: string) {
const t = token.trim()
tokenRef.value = t
if (!t) localStorage.removeItem(STORAGE_KEY)
else localStorage.setItem(STORAGE_KEY, t)
}

View File

@@ -1,6 +1,15 @@
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
import PrimeVue from 'primevue/config'
import ToastService from 'primevue/toastservice'
import Aura from '@primevue/themes/aura'
createApp(App).use(router).mount('#app')
import 'primeicons/primeicons.css'
import './styles.css'
createApp(App)
.use(router)
.use(PrimeVue, { theme: { preset: Aura } })
.use(ToastService)
.mount('#app')

View File

@@ -1,14 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import DashboardPage from './views/DashboardPage.vue'
import TenantsPage from './views/TenantsPage.vue'
import RolesPage from './views/RolesPage.vue'
import LoginPage from './views/LoginPage.vue'
import { isAuthed } from './auth'
export const router = createRouter({
history: createWebHistory('/super/'),
routes: [
{ path: '/', component: DashboardPage },
{ path: '/login', component: LoginPage },
{ path: '/', redirect: '/tenants' },
{ path: '/tenants', component: TenantsPage },
{ path: '/roles', component: RolesPage },
{ path: '/:pathMatch(.*)*', redirect: '/' },
],
})
router.beforeEach((to) => {
if (to.path === '/login') return true
if (!isAuthed.value) return '/login'
return true
})

View File

@@ -0,0 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@@ -1,19 +0,0 @@
<template>
<main style="padding: 16px">
<h1 style="font-size: 18px; font-weight: 600">统计</h1>
<pre style="margin-top: 12px; background: #f7f7f7; padding: 12px; border-radius: 8px">{{ data }}</pre>
</main>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { api } from '../api'
const data = ref<any>(null)
onMounted(async () => {
const resp = await api.get('/statistics')
data.value = resp.data
})
</script>

View File

@@ -0,0 +1,62 @@
<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>
<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>
</div>
</template>
<script setup lang="ts">
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'
const router = useRouter()
const toast = useToast()
const username = ref('')
const password = ref('')
const loading = ref(false)
async function login() {
if (!username.value.trim() || !password.value) {
toast.add({ severity: 'warn', summary: '请输入用户名和密码', life: 2000 })
return
}
loading.value = true
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)
await router.push('/tenants')
} catch (e: any) {
toast.add({ severity: 'error', summary: '登录失败', detail: e?.response?.data?.message || e?.message || 'error', life: 3000 })
} finally {
loading.value = false
}
}
</script>

View File

@@ -1,76 +0,0 @@
<template>
<main style="padding: 16px">
<h1 style="font-size: 18px; font-weight: 600">角色类型</h1>
<p style="margin-top: 6px; color: #666">仅管理固定角色<code>user</code> / <code>tenant_admin</code> / <code>super_admin</code></p>
<table style="margin-top: 12px; width: 100%; border-collapse: collapse">
<thead>
<tr>
<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">Status</th>
<th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Updated</th>
<th style="text-align: left; border-bottom: 1px solid #eee; padding: 8px">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="it in items" :key="it.code">
<td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.code }}</td>
<td style="border-bottom: 1px solid #f2f2f2; padding: 8px">
<input v-model="it._editName" style="width: 240px" />
</td>
<td style="border-bottom: 1px solid #f2f2f2; padding: 8px">
<select v-model.number="it._editStatus">
<option :value="0">0 (enabled)</option>
<option :value="1">1 (disabled)</option>
</select>
</td>
<td style="border-bottom: 1px solid #f2f2f2; padding: 8px">{{ it.updated_at }}</td>
<td style="border-bottom: 1px solid #f2f2f2; padding: 8px">
<button @click="save(it)">保存</button>
</td>
</tr>
</tbody>
</table>
</main>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { api } from '../api'
type Role = {
code: string
name: string
status: number
updated_at: string
_editName: string
_editStatus: number
}
const items = ref<Role[]>([])
async function load() {
const resp = await api.get('/roles')
const list = (resp.data.items || []) as any[]
items.value = list.map((it) => ({
code: it.code,
name: it.name,
status: it.status,
updated_at: it.updated_at,
_editName: it.name,
_editStatus: it.status,
}))
}
async function save(it: Role) {
await api.put(`/roles/${encodeURIComponent(it.code)}`, {
name: it._editName,
status: it._editStatus,
})
await load()
}
onMounted(load)
</script>

View File

@@ -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>

View File

@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
}