feat: 初始化考培练系统项目
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
This commit is contained in:
111
47
admin-frontend/Dockerfile
Normal file
47
admin-frontend/Dockerfile
Normal file
@@ -0,0 +1,47 @@
|
||||
# 考培练系统管理后台前端 Dockerfile
|
||||
# 多阶段构建：Node.js 构建 + Nginx 运行
|
||||
#
|
||||
# 技术栈：Vue 3 + TypeScript + pnpm（符合瑞小美系统技术栈标准）
|
||||
|
||||
# ============================================
|
||||
# 阶段1：构建
|
||||
# ============================================
|
||||
FROM node:20.11-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# 安装 pnpm（符合规范：使用 pnpm 包管理器）
|
||||
RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
|
||||
|
||||
# 设置 pnpm 镜像
|
||||
RUN pnpm config set registry https://registry.npmmirror.com
|
||||
|
||||
# 安装依赖
|
||||
COPY package.json pnpm-lock.yaml* ./
|
||||
RUN pnpm install --frozen-lockfile || pnpm install
|
||||
|
||||
# 复制源码并构建
|
||||
COPY . .
|
||||
RUN pnpm run build
|
||||
|
||||
# ============================================
|
||||
# 阶段2：运行
|
||||
# ============================================
|
||||
FROM nginx:1.25.4-alpine
|
||||
|
||||
# 复制构建产物
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
|
||||
# 复制 nginx 配置
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# 暴露端口
|
||||
EXPOSE 80
|
||||
|
||||
# 健康检查（符合规范）
|
||||
HEALTHCHECK --interval=30s --timeout=10s --retries=3 \
|
||||
CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
|
||||
|
||||
# 启动 nginx
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
22
admin-frontend/env.d.ts
vendored
Normal file
22
admin-frontend/env.d.ts
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
// Element Plus 中文语言包类型声明
|
||||
declare module 'element-plus/dist/locale/zh-cn.mjs' {
|
||||
const zhCn: any
|
||||
export default zhCn
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE_URL: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
||||
14
admin-frontend/index.html
Normal file
14
admin-frontend/index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!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" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
47
admin-frontend/nginx.conf
Normal file
47
admin-frontend/nginx.conf
Normal file
@@ -0,0 +1,47 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# gzip 压缩
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_proxied any;
|
||||
gzip_types text/plain text/css text/xml text/javascript application/javascript application/json application/xml;
|
||||
|
||||
# 静态资源缓存
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 30d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# HTML 不缓存
|
||||
location ~* \.html$ {
|
||||
expires -1;
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
}
|
||||
|
||||
# API 代理到后端
|
||||
location /api/ {
|
||||
proxy_pass http://kaopeilian-admin-backend:8000/api/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
|
||||
# SPA 路由支持
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
|
||||
42
admin-frontend/package.json
Normal file
42
admin-frontend/package.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "kaopeilian-admin-frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "考培练系统 SaaS 超级管理后台",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@9.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
|
||||
"type-check": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.0",
|
||||
"vue-router": "^4.2.0",
|
||||
"pinia": "^2.1.0",
|
||||
"element-plus": "^2.5.0",
|
||||
"@element-plus/icons-vue": "^2.3.0",
|
||||
"axios": "^1.6.0",
|
||||
"monaco-editor": "^0.45.0",
|
||||
"dayjs": "^1.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
"vite": "^5.0.0",
|
||||
"sass": "^1.69.0",
|
||||
"unplugin-auto-import": "^0.17.0",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"typescript": "~5.3.0",
|
||||
"vue-tsc": "^2.0.0",
|
||||
"@tsconfig/node20": "^20.1.0",
|
||||
"@types/node": "^20.11.0",
|
||||
"@vue/tsconfig": "^0.5.0",
|
||||
"eslint": "^8.57.0",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"eslint-plugin-vue": "^9.22.0",
|
||||
"@rushstack/eslint-patch": "^1.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
19
admin-frontend/public/favicon.svg
Normal file
19
admin-frontend/public/favicon.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#409EFF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#67C23A;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="6" fill="url(#grad)"/>
|
||||
<text x="16" y="22" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">A</text>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 514 B |
18
admin-frontend/src/App.vue
Normal file
18
admin-frontend/src/App.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
108
admin-frontend/src/api/index.js
Normal file
108
admin-frontend/src/api/index.js
Normal file
@@ -0,0 +1,108 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import router from '@/router'
|
||||
|
||||
// 创建 axios 实例
|
||||
const request = axios.create({
|
||||
baseURL: '/api/v1/admin',
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
config => {
|
||||
const token = localStorage.getItem('admin_token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
response => {
|
||||
return response.data
|
||||
},
|
||||
error => {
|
||||
const { response } = error
|
||||
if (response) {
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('admin_token')
|
||||
localStorage.removeItem('admin_user')
|
||||
router.push('/login')
|
||||
ElMessage.error('登录已过期，请重新登录')
|
||||
} else if (response.status === 403) {
|
||||
ElMessage.error('没有权限执行此操作')
|
||||
} else if (response.data?.detail) {
|
||||
ElMessage.error(response.data.detail)
|
||||
} else {
|
||||
ElMessage.error('请求失败')
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('网络错误')
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// API 模块
|
||||
const api = {
|
||||
// 认证
|
||||
auth: {
|
||||
login: data => request.post('/auth/login', data),
|
||||
me: () => request.get('/auth/me'),
|
||||
changePassword: data => request.post('/auth/change-password', data),
|
||||
logout: () => request.post('/auth/logout'),
|
||||
},
|
||||
|
||||
// 租户
|
||||
tenants: {
|
||||
list: params => request.get('/tenants', { params }),
|
||||
get: id => request.get(`/tenants/${id}`),
|
||||
create: data => request.post('/tenants', data),
|
||||
update: (id, data) => request.put(`/tenants/${id}`, data),
|
||||
delete: id => request.delete(`/tenants/${id}`),
|
||||
enable: id => request.post(`/tenants/${id}/enable`),
|
||||
disable: id => request.post(`/tenants/${id}/disable`),
|
||||
},
|
||||
|
||||
// 配置
|
||||
configs: {
|
||||
templates: params => request.get('/configs/templates', { params }),
|
||||
groups: () => request.get('/configs/groups'),
|
||||
getTenantConfigs: (tenantId, params) => request.get(`/configs/tenants/${tenantId}`, { params }),
|
||||
updateConfig: (tenantId, group, key, data) => request.put(`/configs/tenants/${tenantId}/${group}/${key}`, data),
|
||||
batchUpdate: (tenantId, data) => request.put(`/configs/tenants/${tenantId}/batch`, data),
|
||||
deleteConfig: (tenantId, group, key) => request.delete(`/configs/tenants/${tenantId}/${group}/${key}`),
|
||||
refreshCache: tenantId => request.post(`/configs/tenants/${tenantId}/refresh-cache`),
|
||||
},
|
||||
|
||||
// 提示词
|
||||
prompts: {
|
||||
list: params => request.get('/prompts', { params }),
|
||||
get: id => request.get(`/prompts/${id}`),
|
||||
create: data => request.post('/prompts', data),
|
||||
update: (id, data) => request.put(`/prompts/${id}`, data),
|
||||
getVersions: id => request.get(`/prompts/${id}/versions`),
|
||||
rollback: (id, version) => request.post(`/prompts/${id}/rollback/${version}`),
|
||||
getTenantPrompts: tenantId => request.get(`/prompts/tenants/${tenantId}`),
|
||||
updateTenantPrompt: (tenantId, promptId, data) => request.put(`/prompts/tenants/${tenantId}/${promptId}`, data),
|
||||
deleteTenantPrompt: (tenantId, promptId) => request.delete(`/prompts/tenants/${tenantId}/${promptId}`),
|
||||
},
|
||||
|
||||
// 功能开关
|
||||
features: {
|
||||
getDefaults: () => request.get('/features/defaults'),
|
||||
getTenantFeatures: tenantId => request.get(`/features/tenants/${tenantId}`),
|
||||
updateFeature: (tenantId, code, data) => request.put(`/features/tenants/${tenantId}/${code}`, data),
|
||||
resetFeature: (tenantId, code) => request.delete(`/features/tenants/${tenantId}/${code}`),
|
||||
batchUpdate: (tenantId, data) => request.post(`/features/tenants/${tenantId}/batch`, data),
|
||||
},
|
||||
}
|
||||
|
||||
export default api
|
||||
|
||||
58
admin-frontend/src/assets/styles/main.scss
Normal file
58
admin-frontend/src/assets/styles/main.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
// 全局样式
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Element Plus 样式覆盖
|
||||
.el-card {
|
||||
border-radius: 8px;
|
||||
|
||||
&__header {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
th.el-table__cell {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
}
|
||||
|
||||
24
admin-frontend/src/main.ts
Normal file
24
admin-frontend/src/main.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
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')
|
||||
|
||||
96
admin-frontend/src/router/index.js
Normal file
96
admin-frontend/src/router/index.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/Login.vue'),
|
||||
meta: { requiresAuth: false }
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/views/Layout.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/dashboard'
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/views/Dashboard.vue'),
|
||||
meta: { title: '控制台' }
|
||||
},
|
||||
{
|
||||
path: 'tenants',
|
||||
name: 'Tenants',
|
||||
component: () => import('@/views/tenants/TenantList.vue'),
|
||||
meta: { title: '租户管理' }
|
||||
},
|
||||
{
|
||||
path: 'tenants/:id',
|
||||
name: 'TenantDetail',
|
||||
component: () => import('@/views/tenants/TenantDetail.vue'),
|
||||
meta: { title: '租户详情' }
|
||||
},
|
||||
{
|
||||
path: 'tenants/:id/configs',
|
||||
name: 'TenantConfigs',
|
||||
component: () => import('@/views/tenants/TenantConfigs.vue'),
|
||||
meta: { title: '租户配置' }
|
||||
},
|
||||
{
|
||||
path: 'tenants/:id/features',
|
||||
name: 'TenantFeatures',
|
||||
component: () => import('@/views/tenants/TenantFeatures.vue'),
|
||||
meta: { title: '功能开关' }
|
||||
},
|
||||
{
|
||||
path: 'prompts',
|
||||
name: 'Prompts',
|
||||
component: () => import('@/views/prompts/PromptList.vue'),
|
||||
meta: { title: '提示词管理' }
|
||||
},
|
||||
{
|
||||
path: 'prompts/:id',
|
||||
name: 'PromptDetail',
|
||||
component: () => import('@/views/prompts/PromptDetail.vue'),
|
||||
meta: { title: '提示词详情' }
|
||||
},
|
||||
{
|
||||
path: 'logs',
|
||||
name: 'Logs',
|
||||
component: () => import('@/views/Logs.vue'),
|
||||
meta: { title: '操作日志' }
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('@/views/NotFound.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
const authStore = useAuthStore()
|
||||
|
||||
if (to.meta.requiresAuth !== false && !authStore.isLoggedIn) {
|
||||
next({ name: 'Login', query: { redirect: to.fullPath } })
|
||||
} else if (to.name === 'Login' && authStore.isLoggedIn) {
|
||||
next({ name: 'Dashboard' })
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
40
admin-frontend/src/stores/auth.js
Normal file
40
admin-frontend/src/stores/auth.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import api from '@/api'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref(localStorage.getItem('admin_token') || '')
|
||||
const user = ref(JSON.parse(localStorage.getItem('admin_user') || 'null'))
|
||||
|
||||
const isLoggedIn = computed(() => !!token.value)
|
||||
|
||||
async function login(username, password) {
|
||||
const res = await api.auth.login({ username, password })
|
||||
token.value = res.access_token
|
||||
user.value = res.admin_user
|
||||
localStorage.setItem('admin_token', res.access_token)
|
||||
localStorage.setItem('admin_user', JSON.stringify(res.admin_user))
|
||||
return res
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = ''
|
||||
user.value = null
|
||||
localStorage.removeItem('admin_token')
|
||||
localStorage.removeItem('admin_user')
|
||||
}
|
||||
|
||||
async function fetchUser() {
|
||||
if (!token.value) return
|
||||
try {
|
||||
const res = await api.auth.me()
|
||||
user.value = res
|
||||
localStorage.setItem('admin_user', JSON.stringify(res))
|
||||
} catch (e) {
|
||||
logout()
|
||||
}
|
||||
}
|
||||
|
||||
return { token, user, isLoggedIn, login, logout, fetchUser }
|
||||
})
|
||||
|
||||
204
admin-frontend/src/views/Dashboard.vue
Normal file
204
admin-frontend/src/views/Dashboard.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.tenantCount }}</div>
|
||||
<div class="stat-label">租户总数</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.activeTenants }}</div>
|
||||
<div class="stat-label">活跃租户</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||||
<el-icon><Document /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.promptCount }}</div>
|
||||
<div class="stat-label">提示词模板</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||||
<el-icon><Setting /></el-icon>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stats.configCount }}</div>
|
||||
<div class="stat-label">配置项总数</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 20px;">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>租户列表</span>
|
||||
<el-button type="primary" link @click="$router.push('/tenants')">
|
||||
查看全部 <el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="tenants" style="width: 100%">
|
||||
<el-table-column prop="name" label="租户名称" />
|
||||
<el-table-column prop="domain" label="域名" />
|
||||
<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-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>快捷操作</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="quick-actions">
|
||||
<el-button @click="$router.push('/tenants')">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
管理租户
|
||||
</el-button>
|
||||
<el-button @click="$router.push('/prompts')">
|
||||
<el-icon><Document /></el-icon>
|
||||
管理提示词
|
||||
</el-button>
|
||||
<el-button @click="$router.push('/logs')">
|
||||
<el-icon><List /></el-icon>
|
||||
查看日志
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { OfficeBuilding, CircleCheck, Document, Setting, ArrowRight, List } from '@element-plus/icons-vue'
|
||||
import api from '@/api'
|
||||
|
||||
const stats = ref({
|
||||
tenantCount: 0,
|
||||
activeTenants: 0,
|
||||
promptCount: 0,
|
||||
configCount: 0
|
||||
})
|
||||
|
||||
const tenants = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// 获取租户列表
|
||||
const res = await api.tenants.list({ page: 1, page_size: 5 })
|
||||
tenants.value = res.items
|
||||
stats.value.tenantCount = res.total
|
||||
stats.value.activeTenants = res.items.filter(t => t.status === 'active').length
|
||||
|
||||
// 获取提示词数量
|
||||
const prompts = await api.prompts.list()
|
||||
stats.value.promptCount = prompts.length
|
||||
|
||||
// 获取配置模板数量
|
||||
const configs = await api.configs.templates()
|
||||
stats.value.configCount = configs.length
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 20px 30px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
234
admin-frontend/src/views/Layout.vue
Normal file
234
admin-frontend/src/views/Layout.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<el-container class="layout-container">
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside :width="isCollapsed ? '64px' : '220px'" class="layout-aside">
|
||||
<div class="logo">
|
||||
<span v-if="!isCollapsed">考培练管理</span>
|
||||
<span v-else>KPL</span>
|
||||
</div>
|
||||
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapsed"
|
||||
:collapse-transition="false"
|
||||
background-color="#1a1a2e"
|
||||
text-color="#a0aec0"
|
||||
active-text-color="#fff"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="/dashboard">
|
||||
<el-icon><Odometer /></el-icon>
|
||||
<template #title>控制台</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/tenants">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
<template #title>租户管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/prompts">
|
||||
<el-icon><Document /></el-icon>
|
||||
<template #title>提示词管理</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/logs">
|
||||
<el-icon><List /></el-icon>
|
||||
<template #title>操作日志</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<!-- 顶部导航 -->
|
||||
<el-header class="layout-header">
|
||||
<div class="header-left">
|
||||
<el-icon
|
||||
class="collapse-btn"
|
||||
@click="isCollapsed = !isCollapsed"
|
||||
>
|
||||
<Fold v-if="!isCollapsed" />
|
||||
<Expand v-else />
|
||||
</el-icon>
|
||||
|
||||
<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="header-right">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="user-info">
|
||||
<el-avatar :size="32" :icon="UserFilled" />
|
||||
<span class="username">{{ authStore.user?.full_name || authStore.user?.username }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="password">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<el-main class="layout-main">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<!-- 修改密码对话框 -->
|
||||
<el-dialog v-model="passwordDialogVisible" title="修改密码" width="400px">
|
||||
<el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="80px">
|
||||
<el-form-item label="旧密码" prop="old_password">
|
||||
<el-input v-model="passwordForm.old_password" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="new_password">
|
||||
<el-input v-model="passwordForm.new_password" type="password" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="passwordDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="passwordLoading" @click="handleChangePassword">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
Odometer, OfficeBuilding, Document, List,
|
||||
Fold, Expand, UserFilled, ArrowDown
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const isCollapsed = ref(false)
|
||||
const activeMenu = computed(() => route.path)
|
||||
|
||||
// 修改密码
|
||||
const passwordDialogVisible = ref(false)
|
||||
const passwordLoading = ref(false)
|
||||
const passwordFormRef = ref()
|
||||
const passwordForm = reactive({
|
||||
old_password: '',
|
||||
new_password: ''
|
||||
})
|
||||
const passwordRules = {
|
||||
old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
|
||||
new_password: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度至少6位', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
function handleCommand(command) {
|
||||
if (command === 'logout') {
|
||||
ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
authStore.logout()
|
||||
router.push('/login')
|
||||
}).catch(() => {})
|
||||
} else if (command === 'password') {
|
||||
passwordForm.old_password = ''
|
||||
passwordForm.new_password = ''
|
||||
passwordDialogVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function handleChangePassword() {
|
||||
await passwordFormRef.value.validate()
|
||||
|
||||
passwordLoading.value = true
|
||||
try {
|
||||
await api.auth.changePassword(passwordForm)
|
||||
ElMessage.success('密码修改成功')
|
||||
passwordDialogVisible.value = false
|
||||
} finally {
|
||||
passwordLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.layout-aside {
|
||||
background: #1a1a2e;
|
||||
transition: width 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
.logo {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.collapse-btn {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.username {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
background: #f5f7fa;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
157
admin-frontend/src/views/Login.vue
Normal file
157
admin-frontend/src/views/Login.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1>考培练系统</h1>
|
||||
<p>SaaS 超级管理后台</p>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="用户名"
|
||||
:prefix-icon="User"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
:prefix-icon="Lock"
|
||||
size="large"
|
||||
show-password
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
class="login-btn"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登 录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>© 2026 考培练系统 - 艾博智科技</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
async function handleLogin() {
|
||||
await formRef.value.validate()
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
await authStore.login(form.username, form.password)
|
||||
ElMessage.success('登录成功')
|
||||
|
||||
const redirect = route.query.redirect || '/dashboard'
|
||||
router.push(redirect)
|
||||
} catch (e) {
|
||||
// 错误已在拦截器处理
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: #1a1a2e;
|
||||
margin: 0 0 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
178
admin-frontend/src/views/Logs.vue
Normal file
178
admin-frontend/src/views/Logs.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="logs-page">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>操作日志</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-select v-model="filters.operation_type" placeholder="操作类型" clearable style="width: 150px;">
|
||||
<el-option label="创建" value="create" />
|
||||
<el-option label="更新" value="update" />
|
||||
<el-option label="删除" value="delete" />
|
||||
<el-option label="启用" value="enable" />
|
||||
<el-option label="禁用" value="disable" />
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filters.resource_type" placeholder="资源类型" clearable style="width: 150px;">
|
||||
<el-option label="租户" value="tenant" />
|
||||
<el-option label="配置" value="config" />
|
||||
<el-option label="提示词" value="prompt" />
|
||||
<el-option label="功能开关" value="feature" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" @click="fetchLogs">查询</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="logs" v-loading="loading" style="width: 100%;">
|
||||
<el-table-column prop="created_at" label="时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="admin_username" label="操作人" width="120" />
|
||||
<el-table-column prop="tenant_code" label="租户" width="100" />
|
||||
<el-table-column prop="operation_type" label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getOperationType(row.operation_type)" size="small">
|
||||
{{ getOperationLabel(row.operation_type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="resource_type" label="资源类型" width="100" />
|
||||
<el-table-column prop="resource_name" label="资源名称" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="showDetail(row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="fetchLogs"
|
||||
@current-change="fetchLogs"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog v-model="detailVisible" title="操作详情" width="600px">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="操作时间">{{ formatDate(currentLog?.created_at) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人">{{ currentLog?.admin_username }}</el-descriptions-item>
|
||||
<el-descriptions-item label="租户">{{ currentLog?.tenant_code || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作类型">{{ getOperationLabel(currentLog?.operation_type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="资源类型">{{ currentLog?.resource_type }}</el-descriptions-item>
|
||||
<el-descriptions-item label="资源名称">{{ currentLog?.resource_name }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div v-if="currentLog?.old_value" style="margin-top: 20px;">
|
||||
<h4>变更前</h4>
|
||||
<pre class="json-view">{{ JSON.stringify(currentLog.old_value, null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<div v-if="currentLog?.new_value" style="margin-top: 20px;">
|
||||
<h4>变更后</h4>
|
||||
<pre class="json-view">{{ JSON.stringify(currentLog.new_value, null, 2) }}</pre>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const loading = ref(false)
|
||||
const logs = ref([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const total = ref(0)
|
||||
|
||||
const filters = reactive({
|
||||
operation_type: '',
|
||||
resource_type: ''
|
||||
})
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const currentLog = ref(null)
|
||||
|
||||
function formatDate(date) {
|
||||
return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-'
|
||||
}
|
||||
|
||||
function getOperationType(type) {
|
||||
const map = {
|
||||
create: 'success',
|
||||
update: 'warning',
|
||||
delete: 'danger',
|
||||
enable: 'success',
|
||||
disable: 'info'
|
||||
}
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
function getOperationLabel(type) {
|
||||
const map = {
|
||||
create: '创建',
|
||||
update: '更新',
|
||||
delete: '删除',
|
||||
enable: '启用',
|
||||
disable: '禁用',
|
||||
batch_update: '批量更新',
|
||||
rollback: '回滚',
|
||||
reset: '重置'
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
async function fetchLogs() {
|
||||
// TODO: 调用 API 获取日志
|
||||
// 暂时使用模拟数据
|
||||
logs.value = []
|
||||
total.value = 0
|
||||
}
|
||||
|
||||
function showDetail(log) {
|
||||
currentLog.value = log
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchLogs()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logs-page {
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.json-view {
|
||||
background: #f5f7fa;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
31
admin-frontend/src/views/NotFound.vue
Normal file
31
admin-frontend/src/views/NotFound.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<h1>404</h1>
|
||||
<p>页面不存在</p>
|
||||
<el-button type="primary" @click="$router.push('/')">返回首页</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-found {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
color: #1a1a2e;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
margin: 20px 0 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
179
admin-frontend/src/views/prompts/PromptDetail.vue
Normal file
179
admin-frontend/src/views/prompts/PromptDetail.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="prompt-detail" v-loading="loading">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>提示词详情 - {{ prompt.name }}</span>
|
||||
<div>
|
||||
<el-button @click="$router.back()">返回</el-button>
|
||||
<el-button type="primary" @click="isEditing = !isEditing">
|
||||
{{ isEditing ? '取消编辑' : '编辑' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-width="120px" :disabled="!isEditing">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="编码">
|
||||
<el-input v-model="form.code" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="版本">
|
||||
<el-tag>v{{ prompt.version }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模块">
|
||||
<el-input v-model="form.module" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="说明" prop="description">
|
||||
<el-input v-model="form.description" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="变量">
|
||||
<el-tag v-for="v in prompt.variables" :key="v" style="margin-right: 8px;">
|
||||
{{ v }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="系统提示词" prop="system_prompt">
|
||||
<el-input
|
||||
v-model="form.system_prompt"
|
||||
type="textarea"
|
||||
:rows="15"
|
||||
:autosize="{ minRows: 10, maxRows: 30 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户提示词模板" prop="user_prompt_template">
|
||||
<el-input
|
||||
v-model="form.user_prompt_template"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
:autosize="{ minRows: 5, maxRows: 15 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="推荐模型">
|
||||
<el-input v-model="form.model_recommendation" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="最大Token">
|
||||
<el-input-number v-model="form.max_tokens" :min="100" :max="32000" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="温度">
|
||||
<el-input-number v-model="form.temperature" :min="0" :max="2" :step="0.1" :precision="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item v-if="isEditing">
|
||||
<el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const promptId = route.params.id
|
||||
|
||||
const loading = ref(false)
|
||||
const isEditing = ref(false)
|
||||
const submitting = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const prompt = ref({})
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
description: '',
|
||||
module: '',
|
||||
system_prompt: '',
|
||||
user_prompt_template: '',
|
||||
model_recommendation: '',
|
||||
max_tokens: 4096,
|
||||
temperature: 0.7
|
||||
})
|
||||
|
||||
async function fetchPrompt() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.prompts.get(promptId)
|
||||
prompt.value = res
|
||||
Object.assign(form, {
|
||||
code: res.code,
|
||||
name: res.name,
|
||||
description: res.description,
|
||||
module: res.module,
|
||||
system_prompt: res.system_prompt,
|
||||
user_prompt_template: res.user_prompt_template,
|
||||
model_recommendation: res.model_recommendation,
|
||||
max_tokens: res.max_tokens,
|
||||
temperature: res.temperature
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
submitting.value = true
|
||||
try {
|
||||
await api.prompts.update(promptId, {
|
||||
name: form.name,
|
||||
description: form.description,
|
||||
system_prompt: form.system_prompt,
|
||||
user_prompt_template: form.user_prompt_template,
|
||||
model_recommendation: form.model_recommendation,
|
||||
max_tokens: form.max_tokens,
|
||||
temperature: form.temperature
|
||||
})
|
||||
ElMessage.success('保存成功')
|
||||
isEditing.value = false
|
||||
fetchPrompt()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchPrompt()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.prompt-detail {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
159
admin-frontend/src/views/prompts/PromptList.vue
Normal file
159
admin-frontend/src/views/prompts/PromptList.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="prompt-list">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>提示词管理</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-select v-model="moduleFilter" placeholder="模块" clearable style="width: 150px;">
|
||||
<el-option label="课程模块" value="course" />
|
||||
<el-option label="考试模块" value="exam" />
|
||||
<el-option label="陪练模块" value="practice" />
|
||||
<el-option label="能力评估" value="ability" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" @click="fetchPrompts">查询</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="prompts" v-loading="loading" style="width: 100%;">
|
||||
<el-table-column prop="code" label="编码" width="180" />
|
||||
<el-table-column prop="name" label="名称" width="150" />
|
||||
<el-table-column prop="module" label="模块" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ getModuleLabel(row.module) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="说明" show-overflow-tooltip />
|
||||
<el-table-column prop="version" label="版本" width="80" />
|
||||
<el-table-column prop="is_active" label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.is_active ? 'success' : 'info'" size="small">
|
||||
{{ row.is_active ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="$router.push(`/prompts/${row.id}`)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="showVersions(row)">
|
||||
历史
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 版本历史对话框 -->
|
||||
<el-dialog v-model="versionDialogVisible" title="版本历史" width="800px">
|
||||
<el-table :data="versions" v-loading="versionLoading">
|
||||
<el-table-column prop="version" label="版本" width="80" />
|
||||
<el-table-column prop="change_summary" label="变更说明" />
|
||||
<el-table-column prop="created_at" label="时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleRollback(row)">回滚</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import dayjs from 'dayjs'
|
||||
import api from '@/api'
|
||||
|
||||
const loading = ref(false)
|
||||
const prompts = ref([])
|
||||
const moduleFilter = ref('')
|
||||
|
||||
const versionDialogVisible = ref(false)
|
||||
const versionLoading = ref(false)
|
||||
const versions = ref([])
|
||||
const currentPromptId = ref(null)
|
||||
|
||||
function getModuleLabel(module) {
|
||||
const map = {
|
||||
course: '课程',
|
||||
exam: '考试',
|
||||
practice: '陪练',
|
||||
ability: '能力'
|
||||
}
|
||||
return map[module] || module
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-'
|
||||
}
|
||||
|
||||
async function fetchPrompts() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.prompts.list({
|
||||
module: moduleFilter.value || undefined
|
||||
})
|
||||
prompts.value = res
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function showVersions(prompt) {
|
||||
currentPromptId.value = prompt.id
|
||||
versionDialogVisible.value = true
|
||||
|
||||
versionLoading.value = true
|
||||
try {
|
||||
versions.value = await api.prompts.getVersions(prompt.id)
|
||||
} finally {
|
||||
versionLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRollback(version) {
|
||||
await ElMessageBox.confirm(`确定要回滚到版本 ${version.version} 吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
try {
|
||||
await api.prompts.rollback(currentPromptId.value, version.version)
|
||||
ElMessage.success('回滚成功')
|
||||
versionDialogVisible.value = false
|
||||
fetchPrompts()
|
||||
} catch (e) {
|
||||
// 错误已在拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchPrompts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.prompt-list {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
142
admin-frontend/src/views/tenants/TenantConfigs.vue
Normal file
142
admin-frontend/src/views/tenants/TenantConfigs.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="tenant-configs" v-loading="loading">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>租户配置 - {{ tenantName }}</span>
|
||||
<div>
|
||||
<el-button @click="$router.back()">返回</el-button>
|
||||
<el-button type="primary" @click="handleSaveAll" :loading="saving">保存全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<el-tab-pane
|
||||
v-for="group in configGroups"
|
||||
:key="group.group_name"
|
||||
:label="group.group_display_name"
|
||||
:name="group.group_name"
|
||||
>
|
||||
<el-form label-width="180px">
|
||||
<el-form-item
|
||||
v-for="config in group.configs"
|
||||
:key="config.config_key"
|
||||
:label="config.display_name || config.config_key"
|
||||
>
|
||||
<template v-if="config.is_secret">
|
||||
<el-input
|
||||
v-model="configValues[`${config.config_group}.${config.config_key}`]"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="config.description"
|
||||
style="width: 400px;"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-input
|
||||
v-model="configValues[`${config.config_group}.${config.config_key}`]"
|
||||
:placeholder="config.description"
|
||||
style="width: 400px;"
|
||||
/>
|
||||
</template>
|
||||
<span class="config-desc" v-if="config.description">{{ config.description }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const tenantId = route.params.id
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const tenantName = ref('')
|
||||
const activeTab = ref('database')
|
||||
const configGroups = ref([])
|
||||
const configValues = reactive({})
|
||||
|
||||
async function fetchConfigs() {
|
||||
loading.value = true
|
||||
try {
|
||||
// 获取租户信息
|
||||
const tenant = await api.tenants.get(tenantId)
|
||||
tenantName.value = tenant.name
|
||||
|
||||
// 获取配置
|
||||
const groups = await api.configs.getTenantConfigs(tenantId)
|
||||
configGroups.value = groups
|
||||
|
||||
// 填充配置值
|
||||
for (const group of groups) {
|
||||
for (const config of group.configs) {
|
||||
const key = `${config.config_group}.${config.config_key}`
|
||||
configValues[key] = config.config_value || ''
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveAll() {
|
||||
saving.value = true
|
||||
try {
|
||||
const configs = []
|
||||
|
||||
for (const group of configGroups.value) {
|
||||
for (const config of group.configs) {
|
||||
const key = `${config.config_group}.${config.config_key}`
|
||||
const value = configValues[key]
|
||||
|
||||
// 只保存有值的配置
|
||||
if (value) {
|
||||
configs.push({
|
||||
config_group: config.config_group,
|
||||
config_key: config.config_key,
|
||||
config_value: value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await api.configs.batchUpdate(tenantId, { configs })
|
||||
ElMessage.success('配置保存成功')
|
||||
|
||||
// 刷新缓存
|
||||
await api.configs.refreshCache(tenantId)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchConfigs()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant-configs {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.config-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
217
admin-frontend/src/views/tenants/TenantDetail.vue
Normal file
217
admin-frontend/src/views/tenants/TenantDetail.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="tenant-detail" v-loading="loading">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>租户详情</span>
|
||||
<div>
|
||||
<el-button @click="$router.back()">返回</el-button>
|
||||
<el-button type="primary" @click="isEditing = !isEditing">
|
||||
{{ isEditing ? '取消编辑' : '编辑' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
:disabled="!isEditing"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="租户编码">
|
||||
<el-input v-model="form.code" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态">
|
||||
<el-tag :type="form.status === 'active' ? 'success' : 'danger'">
|
||||
{{ form.status === 'active' ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="租户名称" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示名称" prop="display_name">
|
||||
<el-input v-model="form.display_name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="域名" prop="domain">
|
||||
<el-input v-model="form.domain" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行业" prop="industry">
|
||||
<el-select v-model="form.industry" style="width: 100%;">
|
||||
<el-option label="轻医美" value="medical_beauty" />
|
||||
<el-option label="宠物" value="pet" />
|
||||
<el-option label="教育" value="education" />
|
||||
<el-option label="其他" value="other" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_name">
|
||||
<el-input v-model="form.contact_name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务到期">
|
||||
<el-date-picker v-model="form.expire_at" type="date" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="form.remarks" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="isEditing">
|
||||
<el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<el-card shadow="hover" style="margin-top: 20px;">
|
||||
<template #header>
|
||||
<span>快捷操作</span>
|
||||
</template>
|
||||
|
||||
<div class="quick-actions">
|
||||
<el-button @click="$router.push(`/tenants/${tenantId}/configs`)">
|
||||
<el-icon><Setting /></el-icon>
|
||||
配置管理
|
||||
</el-button>
|
||||
<el-button @click="$router.push(`/tenants/${tenantId}/features`)">
|
||||
<el-icon><Switch /></el-icon>
|
||||
功能开关
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Setting, Switch } from '@element-plus/icons-vue'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const tenantId = route.params.id
|
||||
|
||||
const loading = ref(false)
|
||||
const isEditing = ref(false)
|
||||
const submitting = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
display_name: '',
|
||||
domain: '',
|
||||
industry: '',
|
||||
contact_name: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
expire_at: null,
|
||||
remarks: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
|
||||
domain: [{ required: true, message: '请输入域名', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
async function fetchTenant() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.tenants.get(tenantId)
|
||||
Object.assign(form, res)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
await formRef.value.validate()
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await api.tenants.update(tenantId, {
|
||||
name: form.name,
|
||||
display_name: form.display_name,
|
||||
domain: form.domain,
|
||||
industry: form.industry,
|
||||
contact_name: form.contact_name,
|
||||
contact_phone: form.contact_phone,
|
||||
contact_email: form.contact_email,
|
||||
expire_at: form.expire_at,
|
||||
remarks: form.remarks
|
||||
})
|
||||
ElMessage.success('保存成功')
|
||||
isEditing.value = false
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTenant()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant-detail {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
129
admin-frontend/src/views/tenants/TenantFeatures.vue
Normal file
129
admin-frontend/src/views/tenants/TenantFeatures.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="tenant-features" v-loading="loading">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>功能开关 - {{ tenantName }}</span>
|
||||
<el-button @click="$router.back()">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-for="group in featureGroups" :key="group.group_name" class="feature-group">
|
||||
<h3>{{ group.group_display_name }}</h3>
|
||||
|
||||
<el-table :data="group.features" style="width: 100%;">
|
||||
<el-table-column prop="feature_name" label="功能名称" width="200" />
|
||||
<el-table-column prop="description" label="说明" />
|
||||
<el-table-column label="状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.is_enabled"
|
||||
@change="handleToggle(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="handleReset(row)"
|
||||
v-if="row.tenant_id"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<span v-else class="default-label">默认</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const tenantId = route.params.id
|
||||
|
||||
const loading = ref(false)
|
||||
const tenantName = ref('')
|
||||
const featureGroups = ref([])
|
||||
|
||||
async function fetchFeatures() {
|
||||
loading.value = true
|
||||
try {
|
||||
// 获取租户信息
|
||||
const tenant = await api.tenants.get(tenantId)
|
||||
tenantName.value = tenant.name
|
||||
|
||||
// 获取功能开关
|
||||
const groups = await api.features.getTenantFeatures(tenantId)
|
||||
featureGroups.value = groups
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggle(feature) {
|
||||
try {
|
||||
await api.features.updateFeature(tenantId, feature.feature_code, {
|
||||
is_enabled: feature.is_enabled
|
||||
})
|
||||
ElMessage.success(feature.is_enabled ? '功能已启用' : '功能已禁用')
|
||||
} catch (e) {
|
||||
// 回滚状态
|
||||
feature.is_enabled = !feature.is_enabled
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReset(feature) {
|
||||
await ElMessageBox.confirm('确定要重置为默认配置吗？', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
try {
|
||||
await api.features.resetFeature(tenantId, feature.feature_code)
|
||||
ElMessage.success('已重置为默认配置')
|
||||
fetchFeatures()
|
||||
} catch (e) {
|
||||
// 错误已在拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchFeatures()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant-features {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.default-label {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
250
admin-frontend/src/views/tenants/TenantList.vue
Normal file
250
admin-frontend/src/views/tenants/TenantList.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="tenant-list">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>租户管理</span>
|
||||
<el-button type="primary" @click="showCreateDialog">
|
||||
<el-icon><Plus /></el-icon> 新建租户
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="搜索租户名称/编码/域名"
|
||||
style="width: 300px;"
|
||||
clearable
|
||||
@keyup.enter="fetchTenants"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<el-select v-model="statusFilter" placeholder="状态" clearable style="width: 120px;">
|
||||
<el-option label="启用" value="active" />
|
||||
<el-option label="禁用" value="inactive" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" @click="fetchTenants">查询</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tenants" v-loading="loading" style="width: 100%;">
|
||||
<el-table-column prop="code" label="编码" width="100" />
|
||||
<el-table-column prop="name" label="名称" width="150" />
|
||||
<el-table-column prop="domain" label="域名" />
|
||||
<el-table-column prop="industry" label="行业" width="120">
|
||||
<template #default="{ row }">
|
||||
{{ getIndustryLabel(row.industry) }}
|
||||
</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-column prop="config_count" label="配置项" width="80" />
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="$router.push(`/tenants/${row.id}`)">详情</el-button>
|
||||
<el-button type="primary" link @click="$router.push(`/tenants/${row.id}/configs`)">配置</el-button>
|
||||
<el-button type="primary" link @click="$router.push(`/tenants/${row.id}/features`)">功能</el-button>
|
||||
<el-button
|
||||
:type="row.status === 'active' ? 'warning' : 'success'"
|
||||
link
|
||||
@click="toggleStatus(row)"
|
||||
>
|
||||
{{ row.status === 'active' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="fetchTenants"
|
||||
@current-change="fetchTenants"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 新建租户对话框 -->
|
||||
<el-dialog v-model="createDialogVisible" title="新建租户" 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" placeholder="英文小写，如：hua" />
|
||||
</el-form-item>
|
||||
<el-form-item label="租户名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="如：华尔倍丽" />
|
||||
</el-form-item>
|
||||
<el-form-item label="域名" prop="domain">
|
||||
<el-input v-model="form.domain" placeholder="如：hua.ireborn.com.cn" />
|
||||
</el-form-item>
|
||||
<el-form-item label="行业" prop="industry">
|
||||
<el-select v-model="form.industry" style="width: 100%;">
|
||||
<el-option label="轻医美" value="medical_beauty" />
|
||||
<el-option label="宠物" value="pet" />
|
||||
<el-option label="教育" value="education" />
|
||||
<el-option label="其他" value="other" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="contact_name">
|
||||
<el-input v-model="form.contact_name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="createDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleCreate">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search } from '@element-plus/icons-vue'
|
||||
import api from '@/api'
|
||||
|
||||
const loading = ref(false)
|
||||
const tenants = ref([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const total = ref(0)
|
||||
const keyword = ref('')
|
||||
const statusFilter = ref('')
|
||||
|
||||
const createDialogVisible = ref(false)
|
||||
const submitting = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
domain: '',
|
||||
industry: 'medical_beauty',
|
||||
contact_name: '',
|
||||
contact_phone: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
code: [
|
||||
{ required: true, message: '请输入租户编码', trigger: 'blur' },
|
||||
{ pattern: /^[a-z0-9_]+$/, message: '只能包含小写字母、数字和下划线', trigger: 'blur' }
|
||||
],
|
||||
name: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
|
||||
domain: [{ required: true, message: '请输入域名', trigger: 'blur' }],
|
||||
industry: [{ required: true, message: '请选择行业', trigger: 'change' }]
|
||||
}
|
||||
|
||||
function getIndustryLabel(industry) {
|
||||
const map = {
|
||||
medical_beauty: '轻医美',
|
||||
pet: '宠物',
|
||||
education: '教育',
|
||||
other: '其他'
|
||||
}
|
||||
return map[industry] || industry
|
||||
}
|
||||
|
||||
async function fetchTenants() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.tenants.list({
|
||||
page: page.value,
|
||||
page_size: pageSize.value,
|
||||
keyword: keyword.value || undefined,
|
||||
status: statusFilter.value || undefined
|
||||
})
|
||||
tenants.value = res.items
|
||||
total.value = res.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function showCreateDialog() {
|
||||
Object.assign(form, {
|
||||
code: '',
|
||||
name: '',
|
||||
domain: '',
|
||||
industry: 'medical_beauty',
|
||||
contact_name: '',
|
||||
contact_phone: ''
|
||||
})
|
||||
createDialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
await formRef.value.validate()
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await api.tenants.create(form)
|
||||
ElMessage.success('租户创建成功')
|
||||
createDialogVisible.value = false
|
||||
fetchTenants()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleStatus(tenant) {
|
||||
const action = tenant.status === 'active' ? '禁用' : '启用'
|
||||
|
||||
await ElMessageBox.confirm(`确定要${action}租户 ${tenant.name} 吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
try {
|
||||
if (tenant.status === 'active') {
|
||||
await api.tenants.disable(tenant.id)
|
||||
} else {
|
||||
await api.tenants.enable(tenant.id)
|
||||
}
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchTenants()
|
||||
} catch (e) {
|
||||
// 错误已在拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTenants()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant-list {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
16
admin-frontend/tsconfig.app.json
Normal file
16
admin-frontend/tsconfig.app.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"allowJs": true,
|
||||
"checkJs": false
|
||||
}
|
||||
}
|
||||
|
||||
8
admin-frontend/tsconfig.json
Normal file
8
admin-frontend/tsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.node.json" },
|
||||
{ "path": "./tsconfig.app.json" }
|
||||
]
|
||||
}
|
||||
|
||||
19
admin-frontend/tsconfig.node.json
Normal file
19
admin-frontend/tsconfig.node.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "@tsconfig/node20/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
|
||||
39
admin-frontend/vite.config.ts
Normal file
39
admin-frontend/vite.config.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
imports: ['vue', 'vue-router', 'pinia'],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 3030,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8030',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user