admin/000-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add admin UI frontend and complete backend APIs
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source 
- 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
2026-01-23 15:48:50 +08:00
parent daa8125c58
commit b89d5ddee9
31 changed files with 3115 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平台管理后台</title>
<link rel="icon" href="data:,">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

26
frontend/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "000-platform-admin",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.0",
"vue-router": "^4.2.0",
"pinia": "^2.1.0",
"axios": "^1.6.0",
"element-plus": "^2.5.0",
"@element-plus/icons-vue": "^2.3.0",
"echarts": "^5.4.0",
"dayjs": "^1.11.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.0.0",
"sass": "^1.69.0"
}
}

23
frontend/src/App.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
import { useAuthStore } from '@/stores/auth'
import { onMounted } from 'vue'
const authStore = useAuthStore()
onMounted(() => {
// 恢复登录状态
authStore.initFromStorage()
})
</script>
<template>
<router-view />
</template>
<style>
html, body, #app {
height: 100%;
margin: 0;
padding: 0;
}
</style>

40
frontend/src/api/index.js Normal file
View File

@@ -0,0 +1,40 @@
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
const api = axios.create({
baseURL: '',
timeout: 30000
})
// 请求拦截器
api.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => Promise.reject(error)
)
// 响应拦截器
api.interceptors.response.use(
response => response,
error => {
if (error.response?.status === 401) {
localStorage.removeItem('token')
localStorage.removeItem('user')
router.push('/login')
ElMessage.error('登录已过期，请重新登录')
} else if (error.response?.status === 403) {
ElMessage.error('没有权限执行此操作')
} else {
ElMessage.error(error.response?.data?.detail || error.message || '请求失败')
}
return Promise.reject(error)
}
)
export default api

185
frontend/src/assets/styles/main.scss Normal file
View File

@@ -0,0 +1,185 @@
// 全局样式
* {
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f7fa;
}
// 布局
.layout {
height: 100vh;
display: flex;
}
.sidebar {
width: 220px;
background: linear-gradient(180deg, #1e3a5f 0%, #0d2137 100%);
color: #fff;
flex-shrink: 0;
.logo {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.el-menu {
border: none;
background: transparent;
.el-menu-item {
color: rgba(255,255,255,0.7);
&:hover {
background: rgba(255,255,255,0.1);
}
&.is-active {
background: #409eff;
color: #fff;
}
}
}
}
.main-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
height: 60px;
background: #fff;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
.breadcrumb {
font-size: 14px;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
.username {
font-size: 14px;
color: #606266;
}
}
}
.main-content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
// 页面容器
.page-container {
background: #fff;
border-radius: 8px;
padding: 20px;
min-height: 100%;
}
// 页面头部
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.title {
font-size: 18px;
font-weight: 600;
color: #303133;
}
}
// 搜索栏
.search-bar {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
// 统计卡片
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.stat-card {
background: #fff;
border-radius: 8px;
padding: 20px;
.stat-title {
font-size: 14px;
color: #909399;
margin-bottom: 12px;
}
.stat-value {
font-size: 28px;
font-weight: 600;
color: #303133;
}
.stat-trend {
font-size: 12px;
margin-top: 8px;
&.up {
color: #67c23a;
}
&.down {
color: #f56c6c;
}
}
}
// 表格
.el-table {
.cell {
padding: 8px 12px;
}
}
// 对话框
.el-dialog {
.el-dialog__body {
padding: 20px 24px;
}
}
// 状态标签
.status-active {
color: #67c23a;
}
.status-expired {
color: #f56c6c;
}
.status-trial {
color: #e6a23c;
}

105
frontend/src/components/Layout.vue Normal file
View File

@@ -0,0 +1,105 @@
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessageBox } from 'element-plus'
const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
// 菜单项
const menuItems = computed(() => {
const items = [
{ path: '/dashboard', title: '仪表盘', icon: 'Odometer' },
{ path: '/tenants', title: '租户管理', icon: 'OfficeBuilding' },
{ path: '/app-config', title: '应用配置', icon: 'Setting' },
{ path: '/stats', title: '统计分析', icon: 'TrendCharts' },
{ path: '/logs', title: '日志查看', icon: 'Document' }
]
// 管理员才能看到用户管理
if (authStore.isAdmin) {
items.push({ path: '/users', title: '用户管理', icon: 'User' })
}
return items
})
const activeMenu = computed(() => route.path)
function handleMenuSelect(path) {
router.push(path)
}
function handleLogout() {
ElMessageBox.confirm('确定要退出登录吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
authStore.logout()
router.push('/login')
})
}
</script>
<template>
<div class="layout">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="logo">
<el-icon><Platform /></el-icon>
<span style="margin-left: 8px">平台管理</span>
</div>
<el-menu
:default-active="activeMenu"
background-color="transparent"
text-color="rgba(255,255,255,0.7)"
active-text-color="#fff"
@select="handleMenuSelect"
>
<el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
<el-icon><component :is="item.icon" /></el-icon>
<span>{{ item.title }}</span>
</el-menu-item>
</el-menu>
</aside>
<!-- 主内容区 -->
<div class="main-container">
<!-- 顶部栏 -->
<header class="header">
<div class="breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-if="route.meta.title">{{ route.meta.title }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="user-info">
<span class="username">{{ authStore.user?.nickname || authStore.user?.username }}</span>
<el-dropdown trigger="click">
<el-avatar :size="32">
{{ (authStore.user?.nickname || authStore.user?.username || 'U')[0].toUpperCase() }}
</el-avatar>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handleLogout">
<el-icon><SwitchButton /></el-icon>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</header>
<!-- 内容区 -->
<main class="main-content">
<router-view />
</main>
</div>
</div>
</template>

23
frontend/src/main.js Normal file
View File

@@ -0,0 +1,23 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './assets/styles/main.scss'
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')

86
frontend/src/router/index.js Normal file
View File

@@ -0,0 +1,86 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
meta: { title: '登录', public: true }
},
{
path: '/',
component: () => import('@/components/Layout.vue'),
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: { title: '仪表盘', icon: 'Odometer' }
},
{
path: 'tenants',
name: 'Tenants',
component: () => import('@/views/tenants/index.vue'),
meta: { title: '租户管理', icon: 'OfficeBuilding' }
},
{
path: 'tenants/:id',
name: 'TenantDetail',
component: () => import('@/views/tenants/detail.vue'),
meta: { title: '租户详情', hidden: true }
},
{
path: 'app-config',
name: 'AppConfig',
component: () => import('@/views/app-config/index.vue'),
meta: { title: '应用配置', icon: 'Setting' }
},
{
path: 'stats',
name: 'Stats',
component: () => import('@/views/stats/index.vue'),
meta: { title: '统计分析', icon: 'TrendCharts' }
},
{
path: 'logs',
name: 'Logs',
component: () => import('@/views/logs/index.vue'),
meta: { title: '日志查看', icon: 'Document' }
},
{
path: 'users',
name: 'Users',
component: () => import('@/views/users/index.vue'),
meta: { title: '用户管理', icon: 'User', role: 'admin' }
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
// 设置页面标题
document.title = to.meta.title ? `${to.meta.title} - 平台管理` : '平台管理'
// 检查登录状态
const authStore = useAuthStore()
if (to.meta.public) {
next()
} else if (!authStore.isLoggedIn) {
next('/login')
} else if (to.meta.role && authStore.user?.role !== to.meta.role) {
next('/dashboard')
} else {
next()
}
})
export default router

60
frontend/src/stores/auth.js Normal file
View File

@@ -0,0 +1,60 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import api from '@/api'
export const useAuthStore = defineStore('auth', () => {
const token = ref('')
const user = ref(null)
const isLoggedIn = computed(() => !!token.value)
const isAdmin = computed(() => user.value?.role === 'admin')
const isOperator = computed(() => ['admin', 'operator'].includes(user.value?.role))
function initFromStorage() {
const savedToken = localStorage.getItem('token')
const savedUser = localStorage.getItem('user')
if (savedToken) {
token.value = savedToken
api.defaults.headers.common['Authorization'] = `Bearer ${savedToken}`
}
if (savedUser) {
try {
user.value = JSON.parse(savedUser)
} catch (e) {
// ignore
}
}
}
async function login(username, password) {
const response = await api.post('/api/auth/login', { username, password })
if (response.data.success) {
token.value = response.data.token
user.value = response.data.user
localStorage.setItem('token', token.value)
localStorage.setItem('user', JSON.stringify(user.value))
api.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
return true
}
throw new Error(response.data.error || '登录失败')
}
function logout() {
token.value = ''
user.value = null
localStorage.removeItem('token')
localStorage.removeItem('user')
delete api.defaults.headers.common['Authorization']
}
return {
token,
user,
isLoggedIn,
isAdmin,
isOperator,
initFromStorage,
login,
logout
}
})

294
frontend/src/views/app-config/index.vue Normal file
View File

@@ -0,0 +1,294 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const query = reactive({
page: 1,
size: 20,
tenant_id: '',
app_code: ''
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editingId = ref(null)
const formRef = ref(null)
const form = reactive({
tenant_id: '',
app_code: 'tools',
app_name: '',
wechat_corp_id: '',
wechat_agent_id: '',
wechat_secret: '',
token_required: false,
allowed_tools: []
})
const toolOptions = [
{ label: '高情商回复', value: 'high-eq' },
{ label: '头脑风暴', value: 'brainstorm' },
{ label: '面诊方案', value: 'consultation' },
{ label: '客户画像', value: 'customer-profile' },
{ label: '医疗合规', value: 'medical-compliance' }
]
const rules = {
tenant_id: [{ required: true, message: '请输入租户ID', trigger: 'blur' }],
app_code: [{ required: true, message: '请输入应用代码', trigger: 'blur' }]
}
async function fetchList() {
loading.value = true
try {
const res = await api.get('/api/tenant-apps', { 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, {
tenant_id: '',
app_code: 'tools',
app_name: '',
wechat_corp_id: '',
wechat_agent_id: '',
wechat_secret: '',
token_required: false,
allowed_tools: []
})
dialogVisible.value = true
}
function handleEdit(row) {
editingId.value = row.id
dialogTitle.value = '编辑应用配置'
Object.assign(form, {
tenant_id: row.tenant_id,
app_code: row.app_code,
app_name: row.app_name || '',
wechat_corp_id: row.wechat_corp_id || '',
wechat_agent_id: row.wechat_agent_id || '',
wechat_secret: '', // 不回显密钥
token_required: row.token_required,
allowed_tools: row.allowed_tools || []
})
dialogVisible.value = true
}
async function handleSubmit() {
await formRef.value.validate()
const data = { ...form }
// 如果没有输入新密钥，不传这个字段
if (!data.wechat_secret) {
delete data.wechat_secret
}
try {
if (editingId.value) {
await api.put(`/api/tenant-apps/${editingId.value}`, data)
ElMessage.success('更新成功')
} else {
const res = await api.post('/api/tenant-apps', data)
ElMessage.success(`创建成功，Token Secret: ${res.data.token_secret}`)
}
dialogVisible.value = false
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleDelete(row) {
await ElMessageBox.confirm(`确定删除此配置吗？`, '提示', {
type: 'warning'
})
try {
await api.delete(`/api/tenant-apps/${row.id}`)
ElMessage.success('删除成功')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleRegenerateToken(row) {
await ElMessageBox.confirm('重新生成 Token Secret 将使旧的签名失效，确定继续？', '提示', {
type: 'warning'
})
try {
const res = await api.post(`/api/tenant-apps/${row.id}/regenerate-token`)
ElMessage.success(`新 Token Secret: ${res.data.token_secret}`)
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleViewSecret(row) {
try {
const res = await api.get(`/api/tenant-apps/${row.id}/wechat-secret`)
if (res.data.wechat_secret) {
ElMessageBox.alert(res.data.wechat_secret, '微信 Secret', {
confirmButtonText: '关闭'
})
} else {
ElMessage.info('未配置微信 Secret')
}
} catch (e) {
// 错误已在拦截器处理
}
}
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.tenant_id"
placeholder="租户ID"
clearable
style="width: 160px"
@keyup.enter="handleSearch"
/>
<el-select v-model="query.app_code" placeholder="应用" clearable style="width: 120px">
<el-option label="tools" value="tools" />
<el-option label="interview" value="interview" />
</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="60" />
<el-table-column prop="tenant_id" label="租户ID" width="120" />
<el-table-column prop="app_code" label="应用" width="100" />
<el-table-column prop="app_name" label="应用名称" width="150" />
<el-table-column prop="wechat_corp_id" label="企业ID" width="150" show-overflow-tooltip />
<el-table-column prop="wechat_agent_id" label="应用ID" width="100" />
<el-table-column label="微信密钥" width="100">
<template #default="{ row }">
<el-tag v-if="row.has_wechat_secret" type="success" size="small">已配置</el-tag>
<el-tag v-else type="info" size="small">未配置</el-tag>
</template>
</el-table-column>
<el-table-column label="Token 验证" width="100">
<template #default="{ row }">
<el-tag :type="row.token_required ? 'warning' : 'info'" size="small">
{{ row.token_required ? '必须' : '可选' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="allowed_tools" label="允许工具" min-width="150">
<template #default="{ row }">
<el-tag v-for="tool in (row.allowed_tools || []).slice(0, 3)" :key="tool" size="small" style="margin-right: 4px">
{{ tool }}
</el-tag>
<span v-if="(row.allowed_tools || []).length > 3">...</span>
</template>
</el-table-column>
<el-table-column label="操作" width="240" fixed="right">
<template #default="{ row }">
<el-button v-if="authStore.isOperator" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button v-if="authStore.isOperator" type="warning" link size="small" @click="handleViewSecret(row)">查看密钥</el-button>
<el-button v-if="authStore.isOperator" type="info" link size="small" @click="handleRegenerateToken(row)">重置Token</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="600px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="租户ID" prop="tenant_id">
<el-input v-model="form.tenant_id" :disabled="!!editingId" placeholder="如: tenant_001" />
</el-form-item>
<el-form-item label="应用代码" prop="app_code">
<el-input v-model="form.app_code" :disabled="!!editingId" placeholder="如: tools" />
</el-form-item>
<el-form-item label="应用名称">
<el-input v-model="form.app_name" placeholder="显示名称" />
</el-form-item>
<el-divider content-position="left">企业微信配置</el-divider>
<el-form-item label="企业 ID">
<el-input v-model="form.wechat_corp_id" placeholder="ww开头的企业ID" />
</el-form-item>
<el-form-item label="应用 ID">
<el-input v-model="form.wechat_agent_id" placeholder="自建应用的 AgentId" />
</el-form-item>
<el-form-item label="应用 Secret">
<el-input v-model="form.wechat_secret" type="password" show-password :placeholder="editingId ? '留空则不修改' : '应用的 Secret'" />
</el-form-item>
<el-divider content-position="left">鉴权配置</el-divider>
<el-form-item label="强制 Token 验证">
<el-switch v-model="form.token_required" />
<span style="margin-left: 12px; color: #909399; font-size: 12px">开启后 URL 必须携带有效签名</span>
</el-form-item>
<el-form-item label="允许的工具">
<el-checkbox-group v-model="form.allowed_tools">
<el-checkbox v-for="opt in toolOptions" :key="opt.value" :label="opt.value">{{ opt.label }}</el-checkbox>
</el-checkbox-group>
</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>

175
frontend/src/views/dashboard/index.vue Normal file
View File

@@ -0,0 +1,175 @@
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import api from '@/api'
const stats = ref({
totalTenants: 0,
activeTenants: 0,
todayCalls: 0,
todayTokens: 0
})
const recentLogs = ref([])
const chartRef = ref(null)
let chartInstance = null
async function fetchStats() {
try {
// 获取租户统计
const tenantsRes = await api.get('/api/tenants', { params: { size: 1 } })
stats.value.totalTenants = tenantsRes.data.total || 0
// 获取统计数据
const statsRes = await api.get('/api/stats/summary')
if (statsRes.data) {
stats.value.todayCalls = statsRes.data.today_calls || 0
stats.value.todayTokens = statsRes.data.today_tokens || 0
}
} catch (e) {
console.error('获取统计失败:', e)
}
}
async function fetchRecentLogs() {
try {
const res = await api.get('/api/logs', { params: { size: 10, log_type: 'request' } })
recentLogs.value = res.data.items || []
} catch (e) {
console.error('获取日志失败:', e)
}
}
function initChart() {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
const option = {
title: {
text: '近7天 AI 调用趋势',
textStyle: { fontSize: 14, fontWeight: 500 }
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '调用次数',
type: 'line',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
])
},
lineStyle: { color: '#409eff' },
itemStyle: { color: '#409eff' },
data: [120, 132, 101, 134, 90, 230, 210]
}
]
}
chartInstance.setOption(option)
}
function handleResize() {
chartInstance?.resize()
}
onMounted(() => {
fetchStats()
fetchRecentLogs()
initChart()
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
chartInstance?.dispose()
})
</script>
<template>
<div class="dashboard">
<!-- 统计卡片 -->
<div class="stat-cards">
<div class="stat-card">
<div class="stat-title">租户总数</div>
<div class="stat-value">{{ stats.totalTenants }}</div>
</div>
<div class="stat-card">
<div class="stat-title">活跃租户</div>
<div class="stat-value">{{ stats.activeTenants || '-' }}</div>
</div>
<div class="stat-card">
<div class="stat-title">今日 AI 调用</div>
<div class="stat-value">{{ stats.todayCalls }}</div>
</div>
<div class="stat-card">
<div class="stat-title">今日 Token 消耗</div>
<div class="stat-value">{{ stats.todayTokens.toLocaleString() }}</div>
</div>
</div>
<!-- 图表区域 -->
<div class="chart-section">
<div class="chart-container" ref="chartRef"></div>
</div>
<!-- 最近日志 -->
<div class="page-container" style="margin-top: 20px">
<div class="page-header">
<div class="title">最近请求日志</div>
</div>
<el-table :data="recentLogs" style="width: 100%" size="small">
<el-table-column prop="app_code" label="应用" width="100" />
<el-table-column prop="path" label="路径" min-width="200" show-overflow-tooltip />
<el-table-column prop="method" label="方法" width="80" />
<el-table-column prop="status_code" label="状态" width="80">
<template #default="{ row }">
<el-tag :type="row.status_code < 400 ? 'success' : 'danger'" size="small">
{{ row.status_code }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="duration_ms" label="耗时" width="100">
<template #default="{ row }">
{{ row.duration_ms }}ms
</template>
</el-table-column>
<el-table-column prop="log_time" label="时间" width="180" />
</el-table>
</div>
</div>
</template>
<style lang="scss" scoped>
.dashboard {
.chart-section {
background: #fff;
border-radius: 8px;
padding: 20px;
}
.chart-container {
height: 300px;
}
}
</style>

137
frontend/src/views/login/index.vue Normal file
View File

@@ -0,0 +1,137 @@
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
const router = useRouter()
const authStore = useAuthStore()
const loading = ref(false)
const form = reactive({
username: '',
password: ''
})
const rules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const formRef = ref(null)
async function handleLogin() {
await formRef.value.validate()
loading.value = true
try {
await authStore.login(form.username, form.password)
ElMessage.success('登录成功')
router.push('/dashboard')
} catch (error) {
ElMessage.error(error.message || '登录失败')
} finally {
loading.value = false
}
}
</script>
<template>
<div class="login-container">
<div class="login-card">
<div class="login-header">
<h1>平台管理后台</h1>
<p>统一管理租户、应用与数据</p>
</div>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="0"
size="large"
@submit.prevent="handleLogin"
>
<el-form-item prop="username">
<el-input
v-model="form.username"
placeholder="用户名"
prefix-icon="User"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="密码"
prefix-icon="Lock"
show-password
@keyup.enter="handleLogin"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:loading="loading"
style="width: 100%"
@click="handleLogin"
>
登录
</el-button>
</el-form-item>
</el-form>
<div class="login-footer">
<p>默认账号: admin / admin123</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.login-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-card {
width: 400px;
padding: 40px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.login-header {
text-align: center;
margin-bottom: 32px;
h1 {
font-size: 24px;
color: #303133;
margin: 0 0 8px;
}
p {
font-size: 14px;
color: #909399;
margin: 0;
}
}
.login-footer {
text-align: center;
margin-top: 20px;
p {
font-size: 12px;
color: #c0c4cc;
margin: 0;
}
}
</style>

236
frontend/src/views/logs/index.vue Normal file
View File

@@ -0,0 +1,236 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const query = reactive({
page: 1,
size: 20,
log_type: '',
level: '',
app_code: '',
trace_id: '',
keyword: ''
})
// 详情对话框
const detailVisible = ref(false)
const currentLog = ref(null)
async function fetchList() {
loading.value = true
try {
const params = { ...query }
// 移除空值
Object.keys(params).forEach(key => {
if (params[key] === '') delete params[key]
})
const res = await api.get('/api/logs', { params })
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 handleReset() {
Object.assign(query, {
page: 1,
size: 20,
log_type: '',
level: '',
app_code: '',
trace_id: '',
keyword: ''
})
fetchList()
}
function handlePageChange(page) {
query.page = page
fetchList()
}
function showDetail(row) {
currentLog.value = row
detailVisible.value = true
}
function getLevelType(level) {
const map = {
debug: 'info',
info: 'success',
warning: 'warning',
error: 'danger'
}
return map[level] || 'info'
}
function getLogTypeText(type) {
const map = {
request: '请求日志',
error: '错误日志',
app: '应用日志',
biz: '业务日志',
audit: '审计日志'
}
return map[type] || type
}
function formatJson(obj) {
if (!obj) return ''
try {
if (typeof obj === 'string') {
obj = JSON.parse(obj)
}
return JSON.stringify(obj, null, 2)
} catch {
return String(obj)
}
}
onMounted(() => {
fetchList()
})
</script>
<template>
<div class="page-container">
<div class="page-header">
<div class="title">日志查看</div>
</div>
<!-- 搜索栏 -->
<div class="search-bar">
<el-select v-model="query.log_type" placeholder="日志类型" clearable style="width: 120px">
<el-option label="请求日志" value="request" />
<el-option label="错误日志" value="error" />
<el-option label="应用日志" value="app" />
<el-option label="业务日志" value="biz" />
<el-option label="审计日志" value="audit" />
</el-select>
<el-select v-model="query.level" placeholder="级别" clearable style="width: 100px">
<el-option label="DEBUG" value="debug" />
<el-option label="INFO" value="info" />
<el-option label="WARNING" value="warning" />
<el-option label="ERROR" value="error" />
</el-select>
<el-input
v-model="query.app_code"
placeholder="应用代码"
clearable
style="width: 120px"
/>
<el-input
v-model="query.trace_id"
placeholder="Trace ID"
clearable
style="width: 200px"
/>
<el-input
v-model="query.keyword"
placeholder="关键词搜索"
clearable
style="width: 180px"
@keyup.enter="handleSearch"
/>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
<!-- 表格 -->
<el-table v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column prop="log_type" label="类型" width="100">
<template #default="{ row }">
{{ getLogTypeText(row.log_type) }}
</template>
</el-table-column>
<el-table-column prop="level" label="级别" width="80">
<template #default="{ row }">
<el-tag :type="getLevelType(row.level)" size="small">
{{ row.level?.toUpperCase() }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="app_code" label="应用" width="100" />
<el-table-column prop="message" label="消息" min-width="250" show-overflow-tooltip />
<el-table-column prop="trace_id" label="Trace ID" width="140" show-overflow-tooltip />
<el-table-column prop="path" label="路径" width="150" show-overflow-tooltip />
<el-table-column prop="status_code" label="状态码" width="80">
<template #default="{ row }">
<el-tag v-if="row.status_code" :type="row.status_code < 400 ? 'success' : 'danger'" size="small">
{{ row.status_code }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="duration_ms" label="耗时" width="80">
<template #default="{ row }">
{{ row.duration_ms ? row.duration_ms + 'ms' : '-' }}
</template>
</el-table-column>
<el-table-column prop="log_time" label="时间" width="180" />
<el-table-column label="操作" width="80" fixed="right">
<template #default="{ row }">
<el-button type="primary" link size="small" @click="showDetail(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="detailVisible" title="日志详情" width="700px">
<template v-if="currentLog">
<el-descriptions :column="2" border>
<el-descriptions-item label="ID">{{ currentLog.id }}</el-descriptions-item>
<el-descriptions-item label="类型">{{ getLogTypeText(currentLog.log_type) }}</el-descriptions-item>
<el-descriptions-item label="级别">
<el-tag :type="getLevelType(currentLog.level)" size="small">
{{ currentLog.level?.toUpperCase() }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="应用">{{ currentLog.app_code || '-' }}</el-descriptions-item>
<el-descriptions-item label="租户">{{ currentLog.tenant_id || '-' }}</el-descriptions-item>
<el-descriptions-item label="Trace ID">{{ currentLog.trace_id || '-' }}</el-descriptions-item>
<el-descriptions-item label="路径" :span="2">{{ currentLog.path || '-' }}</el-descriptions-item>
<el-descriptions-item label="方法">{{ currentLog.method || '-' }}</el-descriptions-item>
<el-descriptions-item label="状态码">{{ currentLog.status_code || '-' }}</el-descriptions-item>
<el-descriptions-item label="耗时">{{ currentLog.duration_ms ? currentLog.duration_ms + 'ms' : '-' }}</el-descriptions-item>
<el-descriptions-item label="IP">{{ currentLog.ip_address || '-' }}</el-descriptions-item>
<el-descriptions-item label="时间" :span="2">{{ currentLog.log_time }}</el-descriptions-item>
<el-descriptions-item label="消息" :span="2">{{ currentLog.message || '-' }}</el-descriptions-item>
</el-descriptions>
<div v-if="currentLog.extra_data" style="margin-top: 16px">
<div style="font-weight: 500; margin-bottom: 8px">附加数据:</div>
<pre style="background: #f5f7fa; padding: 12px; border-radius: 4px; overflow: auto; max-height: 300px">{{ formatJson(currentLog.extra_data) }}</pre>
</div>
<div v-if="currentLog.stack_trace" style="margin-top: 16px">
<div style="font-weight: 500; margin-bottom: 8px">堆栈信息:</div>
<pre style="background: #fef0f0; color: #f56c6c; padding: 12px; border-radius: 4px; overflow: auto; max-height: 300px">{{ currentLog.stack_trace }}</pre>
</div>
</template>
</el-dialog>
</div>
</template>

181
frontend/src/views/stats/index.vue Normal file
View File

@@ -0,0 +1,181 @@
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import api from '@/api'
import dayjs from 'dayjs'
const loading = ref(false)
const query = reactive({
tenant_id: '',
app_code: '',
start_date: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
end_date: dayjs().format('YYYY-MM-DD')
})
const stats = ref({
total_calls: 0,
total_tokens: 0,
total_cost: 0
})
const dailyData = ref([])
const chartRef = ref(null)
let chartInstance = null
async function fetchStats() {
loading.value = true
try {
const res = await api.get('/api/stats/daily', { params: query })
dailyData.value = res.data.items || []
// 计算汇总
let totalCalls = 0, totalTokens = 0, totalCost = 0
dailyData.value.forEach(item => {
totalCalls += item.ai_calls || 0
totalTokens += item.ai_tokens || 0
totalCost += parseFloat(item.ai_cost) || 0
})
stats.value = { total_calls: totalCalls, total_tokens: totalTokens, total_cost: totalCost }
updateChart()
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
function updateChart() {
if (!chartInstance) return
const dates = dailyData.value.map(d => d.stat_date)
const calls = dailyData.value.map(d => d.ai_calls || 0)
const tokens = dailyData.value.map(d => d.ai_tokens || 0)
chartInstance.setOption({
title: { text: 'AI 调用趋势' },
tooltip: { trigger: 'axis' },
legend: { data: ['调用次数', 'Token 消耗'], top: 30 },
grid: { left: '3%', right: '4%', bottom: '3%', top: 80, containLabel: true },
xAxis: { type: 'category', data: dates },
yAxis: [
{ type: 'value', name: '调用次数' },
{ type: 'value', name: 'Token' }
],
series: [
{
name: '调用次数',
type: 'bar',
data: calls,
itemStyle: { color: '#409eff' }
},
{
name: 'Token 消耗',
type: 'line',
yAxisIndex: 1,
data: tokens,
smooth: true,
itemStyle: { color: '#67c23a' }
}
]
})
}
function initChart() {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
}
function handleSearch() {
fetchStats()
}
function handleResize() {
chartInstance?.resize()
}
onMounted(() => {
initChart()
fetchStats()
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
chartInstance?.dispose()
})
</script>
<template>
<div class="page-container">
<div class="page-header">
<div class="title">统计分析</div>
</div>
<!-- 搜索栏 -->
<div class="search-bar">
<el-input v-model="query.tenant_id" placeholder="租户ID" clearable style="width: 160px" />
<el-select v-model="query.app_code" placeholder="应用" clearable style="width: 120px">
<el-option label="全部" value="" />
<el-option label="tools" value="tools" />
<el-option label="interview" value="interview" />
</el-select>
<el-date-picker
v-model="query.start_date"
type="date"
placeholder="开始日期"
value-format="YYYY-MM-DD"
style="width: 150px"
/>
<span style="color: #909399">至</span>
<el-date-picker
v-model="query.end_date"
type="date"
placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width: 150px"
/>
<el-button type="primary" @click="handleSearch">查询</el-button>
</div>
<!-- 统计卡片 -->
<div class="stat-cards">
<div class="stat-card">
<div class="stat-title">AI 调用总次数</div>
<div class="stat-value">{{ stats.total_calls.toLocaleString() }}</div>
</div>
<div class="stat-card">
<div class="stat-title">Token 消耗总量</div>
<div class="stat-value">{{ stats.total_tokens.toLocaleString() }}</div>
</div>
<div class="stat-card">
<div class="stat-title">累计费用</div>
<div class="stat-value">¥{{ stats.total_cost.toFixed(2) }}</div>
</div>
</div>
<!-- 图表 -->
<div style="background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px">
<div ref="chartRef" style="height: 350px" v-loading="loading"></div>
</div>
<!-- 数据表格 -->
<div style="background: #fff; border-radius: 8px; padding: 20px">
<h4 style="margin: 0 0 16px">日统计明细</h4>
<el-table :data="dailyData" style="width: 100%" v-loading="loading">
<el-table-column prop="stat_date" label="日期" width="120" />
<el-table-column prop="tenant_id" label="租户ID" width="120" />
<el-table-column prop="app_code" label="应用" width="100" />
<el-table-column prop="ai_calls" label="调用次数" width="120">
<template #default="{ row }">{{ (row.ai_calls || 0).toLocaleString() }}</template>
</el-table-column>
<el-table-column prop="ai_tokens" label="Token 消耗" width="150">
<template #default="{ row }">{{ (row.ai_tokens || 0).toLocaleString() }}</template>
</el-table-column>
<el-table-column prop="ai_cost" label="费用" width="100">
<template #default="{ row }">¥{{ parseFloat(row.ai_cost || 0).toFixed(4) }}</template>
</el-table-column>
</el-table>
</div>
</div>
</template>

105
frontend/src/views/tenants/detail.vue Normal file
View 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
View 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>

169
frontend/src/views/users/index.vue Normal file
View File

@@ -0,0 +1,169 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const loading = ref(false)
const tableData = ref([])
// 对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const form = reactive({
username: '',
password: '',
nickname: '',
role: 'viewer'
})
const rules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
async function fetchList() {
loading.value = true
try {
const res = await api.get('/api/auth/users')
tableData.value = res.data || []
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
function handleCreate() {
dialogTitle.value = '新建用户'
Object.assign(form, {
username: '',
password: '',
nickname: '',
role: 'viewer'
})
dialogVisible.value = true
}
async function handleSubmit() {
await formRef.value.validate()
try {
await api.post('/api/auth/users', form)
ElMessage.success('创建成功')
dialogVisible.value = false
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleDelete(row) {
if (row.id === authStore.user?.id) {
ElMessage.warning('不能删除当前登录用户')
return
}
await ElMessageBox.confirm(`确定删除用户 "${row.username}" 吗？`, '提示', {
type: 'warning'
})
try {
await api.delete(`/api/auth/users/${row.id}`)
ElMessage.success('删除成功')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
function getRoleTag(role) {
const map = {
admin: { type: 'danger', text: '管理员' },
operator: { type: 'warning', text: '操作员' },
viewer: { type: 'info', text: '只读' }
}
return map[role] || { type: 'info', text: role }
}
onMounted(() => {
fetchList()
})
</script>
<template>
<div class="page-container">
<div class="page-header">
<div class="title">用户管理</div>
<el-button type="primary" @click="handleCreate">
<el-icon><Plus /></el-icon>
新建用户
</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="username" label="用户名" width="150" />
<el-table-column prop="nickname" label="昵称" width="150" />
<el-table-column prop="role" label="角色" width="120">
<template #default="{ row }">
<el-tag :type="getRoleTag(row.role).type" size="small">
{{ getRoleTag(row.role).text }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="last_login_at" label="最后登录" width="180" />
<el-table-column prop="created_at" label="创建时间" width="180" />
<el-table-column label="操作" width="100" fixed="right">
<template #default="{ row }">
<el-button
type="danger"
link
size="small"
:disabled="row.id === authStore.user?.id"
@click="handleDelete(row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新建对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="450px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="登录用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" show-password placeholder="登录密码" />
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="form.nickname" placeholder="显示名称" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.role" style="width: 100%">
<el-option label="管理员" value="admin" />
<el-option label="操作员" value="operator" />
<el-option label="只读" value="viewer" />
</el-select>
</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>

25
frontend/vite.config.js Normal file
View File

@@ -0,0 +1,25 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
},
server: {
port: 3001,
proxy: {
'/api': {
target: 'http://localhost:8001',
changeOrigin: true
}
}
},
build: {
outDir: 'dist',
sourcemap: false
}
})