feat: add admin UI frontend and complete backend APIs
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
- Add Vue 3 frontend with Element Plus - Implement login, dashboard, tenant management - Add app configuration, logs viewer, stats pages - Add user management for admins - Update Drone CI to build and deploy frontend - Frontend ports: 3001 (test), 4001 (prod)
This commit is contained in:
111
105
frontend/src/views/tenants/detail.vue
Normal file
105
frontend/src/views/tenants/detail.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tenantId = route.params.id
|
||||
|
||||
const loading = ref(false)
|
||||
const tenant = ref(null)
|
||||
|
||||
async function fetchDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.get(`/api/tenants/${tenantId}`)
|
||||
tenant.value = res.data
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusType(status) {
|
||||
const map = { active: 'success', expired: 'danger', trial: 'warning' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
function getStatusText(status) {
|
||||
const map = { active: '活跃', expired: '已过期', trial: '试用' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container" v-loading="loading">
|
||||
<div class="page-header">
|
||||
<div class="title">
|
||||
<el-button link @click="router.back()">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</el-button>
|
||||
租户详情
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="tenant">
|
||||
<!-- 基本信息 -->
|
||||
<el-descriptions title="基本信息" :column="2" border style="margin-bottom: 20px">
|
||||
<el-descriptions-item label="租户ID">{{ tenant.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="租户代码">{{ tenant.code }}</el-descriptions-item>
|
||||
<el-descriptions-item label="租户名称">{{ tenant.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="getStatusType(tenant.status)" size="small">
|
||||
{{ getStatusText(tenant.status) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="过期时间">{{ tenant.expired_at || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ tenant.created_at }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">{{ tenant.contact_info?.contact || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ tenant.contact_info?.phone || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 用量统计 -->
|
||||
<el-descriptions title="用量统计" :column="3" border style="margin-bottom: 20px">
|
||||
<el-descriptions-item label="AI 调用总次数">
|
||||
{{ tenant.usage_summary?.total_calls?.toLocaleString() || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Token 消耗">
|
||||
{{ tenant.usage_summary?.total_tokens?.toLocaleString() || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="累计费用">
|
||||
¥{{ tenant.usage_summary?.total_cost?.toFixed(2) || '0.00' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 订阅信息 -->
|
||||
<div style="margin-bottom: 20px">
|
||||
<h4 style="margin-bottom: 12px">应用订阅</h4>
|
||||
<el-table :data="tenant.subscriptions" style="width: 100%">
|
||||
<el-table-column prop="app_code" label="应用" width="150" />
|
||||
<el-table-column prop="start_date" label="开始日期" width="120" />
|
||||
<el-table-column prop="end_date" label="结束日期" width="120" />
|
||||
<el-table-column prop="quota" label="配额">
|
||||
<template #default="{ row }">
|
||||
{{ row.quota ? JSON.stringify(row.quota) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
|
||||
{{ row.status === 'active' ? '有效' : '已过期' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-empty v-if="!tenant.subscriptions?.length" description="暂无订阅" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
239
frontend/src/views/tenants/index.vue
Normal file
239
frontend/src/views/tenants/index.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 20,
|
||||
status: '',
|
||||
keyword: ''
|
||||
})
|
||||
|
||||
// 对话框
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const editingId = ref(null)
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
status: 'active',
|
||||
expired_at: null,
|
||||
contact_info: {
|
||||
contact: '',
|
||||
phone: '',
|
||||
email: ''
|
||||
}
|
||||
})
|
||||
|
||||
const rules = {
|
||||
code: [{ required: true, message: '请输入租户代码', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入租户名称', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.get('/api/tenants', { params: query })
|
||||
tableData.value = res.data.items || []
|
||||
total.value = res.data.total || 0
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
query.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(page) {
|
||||
query.page = page
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
editingId.value = null
|
||||
dialogTitle.value = '新建租户'
|
||||
Object.assign(form, {
|
||||
code: '',
|
||||
name: '',
|
||||
status: 'active',
|
||||
expired_at: null,
|
||||
contact_info: { contact: '', phone: '', email: '' }
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function handleEdit(row) {
|
||||
editingId.value = row.id
|
||||
dialogTitle.value = '编辑租户'
|
||||
Object.assign(form, {
|
||||
code: row.code,
|
||||
name: row.name,
|
||||
status: row.status,
|
||||
expired_at: row.expired_at,
|
||||
contact_info: row.contact_info || { contact: '', phone: '', email: '' }
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await formRef.value.validate()
|
||||
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await api.put(`/api/tenants/${editingId.value}`, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await api.post('/api/tenants', form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
// 错误已在拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除租户 "${row.name}" 吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
try {
|
||||
await api.delete(`/api/tenants/${row.id}`)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
// 错误已在拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
function handleDetail(row) {
|
||||
router.push(`/tenants/${row.id}`)
|
||||
}
|
||||
|
||||
function getStatusType(status) {
|
||||
const map = { active: 'success', expired: 'danger', trial: 'warning' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
function getStatusText(status) {
|
||||
const map = { active: '活跃', expired: '已过期', trial: '试用' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<div class="title">租户管理</div>
|
||||
<el-button v-if="authStore.isOperator" type="primary" @click="handleCreate">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新建租户
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<el-input
|
||||
v-model="query.keyword"
|
||||
placeholder="搜索租户代码或名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<el-select v-model="query.status" placeholder="状态" clearable style="width: 120px">
|
||||
<el-option label="活跃" value="active" />
|
||||
<el-option label="已过期" value="expired" />
|
||||
<el-option label="试用" value="trial" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="code" label="代码" width="120" />
|
||||
<el-table-column prop="name" label="名称" min-width="150" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)" size="small">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expired_at" label="过期时间" width="120" />
|
||||
<el-table-column prop="created_at" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link size="small" @click="handleDetail(row)">详情</el-button>
|
||||
<el-button v-if="authStore.isOperator" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-if="authStore.isOperator" type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div style="margin-top: 20px; display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="query.page"
|
||||
:page-size="query.size"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="租户代码" prop="code">
|
||||
<el-input v-model="form.code" :disabled="!!editingId" placeholder="唯一标识" />
|
||||
</el-form-item>
|
||||
<el-form-item label="租户名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="公司/组织名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="form.status" style="width: 100%">
|
||||
<el-option label="活跃" value="active" />
|
||||
<el-option label="试用" value="trial" />
|
||||
<el-option label="已过期" value="expired" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间">
|
||||
<el-date-picker v-model="form.expired_at" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人">
|
||||
<el-input v-model="form.contact_info.contact" placeholder="联系人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.contact_info.phone" placeholder="联系电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="form.contact_info.email" placeholder="邮箱地址" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user