更新
This commit is contained in:
Your Name
@@ -0,0 +1,2 @@
|
||||
VITE_API_PROXY_TARGET=http://127.0.0.1:8080
|
||||
VITE_MEMBER_URL=http://localhost:5173
|
||||
@@ -0,0 +1,2 @@
|
||||
# 生产环境：会员端入口（同域根路径）
|
||||
VITE_MEMBER_URL=/
|
||||
@@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.DS_Store
|
||||
*.local
|
||||
@@ -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>AI Chat 管理后台</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1727
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "ai-chat-admin",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build && node ../scripts/deploy-static.js admin",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"pinia": "^2.3.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"vite": "^6.0.7"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="8" fill="#6366f1"/>
|
||||
<path d="M10 12h12v2H10v-2zm0 4h12v2H10v-2zm0 4h8v2h-8v-2z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 60000
|
||||
})
|
||||
|
||||
api.interceptors.request.use(config => {
|
||||
const token = localStorage.getItem('admin_token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
api.interceptors.response.use(
|
||||
res => res,
|
||||
err => {
|
||||
const message = err.response?.data?.message || '请求失败'
|
||||
if (err.response?.status === 401) {
|
||||
localStorage.removeItem('admin_token')
|
||||
const loginPath = `${import.meta.env.BASE_URL}login`.replace(/\/{2,}/g, '/')
|
||||
if (!window.location.pathname.includes('/login')) {
|
||||
window.location.href = loginPath
|
||||
}
|
||||
}
|
||||
return Promise.reject(new Error(message))
|
||||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
@@ -0,0 +1,231 @@
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--bg-hover: #475569;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #4f46e5;
|
||||
--border: #334155;
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
--sidebar-width: 240px;
|
||||
--header-height: 60px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-input, .form-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input:focus, .form-select:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.data-table th, .data-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
/** 与后端 PermissionCatalog 保持一致：目录 / 菜单 / 按钮 */
|
||||
export const permissionTree = [
|
||||
{
|
||||
code: 'dir:overview',
|
||||
name: '概览',
|
||||
type: 'dir',
|
||||
children: [
|
||||
{
|
||||
code: 'menu:dashboard',
|
||||
name: '数据概览',
|
||||
type: 'menu',
|
||||
path: '/dashboard',
|
||||
icon: '📊',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'dir:org',
|
||||
name: '组织架构',
|
||||
type: 'dir',
|
||||
children: [
|
||||
{
|
||||
code: 'menu:users',
|
||||
name: '用户管理',
|
||||
type: 'menu',
|
||||
path: '/users',
|
||||
icon: '👥',
|
||||
children: [
|
||||
{ code: 'btn:user:create', name: '新增用户', type: 'btn' },
|
||||
{ code: 'btn:user:edit', name: '编辑用户', type: 'btn' },
|
||||
{ code: 'btn:user:reset_password', name: '重置密码', type: 'btn' },
|
||||
{ code: 'btn:user:delete', name: '删除用户', type: 'btn' }
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'menu:departments',
|
||||
name: '部门管理',
|
||||
type: 'menu',
|
||||
path: '/departments',
|
||||
icon: '🏢',
|
||||
children: [
|
||||
{ code: 'btn:dept:create', name: '新增部门', type: 'btn' },
|
||||
{ code: 'btn:dept:edit', name: '编辑部门', type: 'btn' },
|
||||
{ code: 'btn:dept:delete', name: '删除部门', type: 'btn' }
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'menu:roles',
|
||||
name: '角色管理',
|
||||
type: 'menu',
|
||||
path: '/roles',
|
||||
icon: '🛡️',
|
||||
children: [
|
||||
{ code: 'btn:role:create', name: '新增角色', type: 'btn' },
|
||||
{ code: 'btn:role:edit', name: '编辑角色', type: 'btn' },
|
||||
{ code: 'btn:role:delete', name: '删除角色', type: 'btn' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'dir:business',
|
||||
name: '业务数据',
|
||||
type: 'dir',
|
||||
children: [
|
||||
{
|
||||
code: 'menu:conversations',
|
||||
name: '会话管理',
|
||||
type: 'menu',
|
||||
path: '/conversations',
|
||||
icon: '💬',
|
||||
children: [
|
||||
{ code: 'btn:conv:view_all', name: '查看全部会话', type: 'btn' },
|
||||
{ code: 'btn:conv:view_subordinate', name: '查看下级部门会话', type: 'btn' }
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'menu:memberships',
|
||||
name: '会员等级',
|
||||
type: 'menu',
|
||||
path: '/memberships',
|
||||
icon: '⭐',
|
||||
children: [
|
||||
{ code: 'btn:membership:create', name: '新增会员等级', type: 'btn' },
|
||||
{ code: 'btn:membership:edit', name: '编辑会员等级', type: 'btn' },
|
||||
{ code: 'btn:membership:delete', name: '删除会员等级', type: 'btn' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'dir:system',
|
||||
name: '系统管理',
|
||||
type: 'dir',
|
||||
children: [
|
||||
{
|
||||
code: 'menu:models',
|
||||
name: 'AI 模型',
|
||||
type: 'menu',
|
||||
path: '/models',
|
||||
icon: '🤖',
|
||||
children: [
|
||||
{ code: 'btn:model:create', name: '新增模型', type: 'btn' },
|
||||
{ code: 'btn:model:edit', name: '编辑模型', type: 'btn' },
|
||||
{ code: 'btn:model:delete', name: '删除模型', type: 'btn' },
|
||||
{ code: 'btn:model:test', name: '测试连接', type: 'btn' }
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'menu:permissions',
|
||||
name: '权限管理',
|
||||
type: 'menu',
|
||||
path: '/permissions',
|
||||
icon: '🔑',
|
||||
children: [
|
||||
{ code: 'btn:perm:create', name: '新增权限', type: 'btn' },
|
||||
{ code: 'btn:perm:edit', name: '编辑权限', type: 'btn' },
|
||||
{ code: 'btn:perm:delete', name: '删除权限', type: 'btn' }
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'menu:settings',
|
||||
name: '系统设置',
|
||||
type: 'menu',
|
||||
path: '/settings',
|
||||
icon: '🔧',
|
||||
children: [
|
||||
{ code: 'btn:settings:save', name: '保存设置', type: 'btn' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export function emptyPermissions() {
|
||||
return {
|
||||
can_access_admin: false,
|
||||
dirs: [],
|
||||
menus: [],
|
||||
buttons: []
|
||||
}
|
||||
}
|
||||
|
||||
export function flattenMenus(tree = permissionTree) {
|
||||
const list = []
|
||||
for (const dir of tree) {
|
||||
for (const menu of dir.children || []) {
|
||||
list.push({
|
||||
...menu,
|
||||
dir: dir.code,
|
||||
dirName: dir.name
|
||||
})
|
||||
}
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
||||
export function summarizePermissionLabels(perms = {}) {
|
||||
const labels = []
|
||||
if (perms.can_access_admin) labels.push('后台')
|
||||
for (const dir of permissionTree) {
|
||||
if ((perms.dirs || []).includes(dir.code)) labels.push(dir.name)
|
||||
}
|
||||
for (const menu of flattenMenus()) {
|
||||
if ((perms.menus || []).includes(menu.code)) labels.push(menu.name)
|
||||
}
|
||||
return labels
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<aside class="sidebar" :class="{ open: sidebarOpen }">
|
||||
<div class="sidebar-brand">
|
||||
<span class="brand-icon">⚙️</span>
|
||||
<span>AI Chat 管理</span>
|
||||
</div>
|
||||
<a :href="memberUrl" target="_blank" class="sidebar-member-link">← 会员聊天端</a>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<template v-for="group in navGroups" :key="group.dir">
|
||||
<div v-if="group.dirName" class="nav-group-title">{{ group.dirName }}</div>
|
||||
<router-link
|
||||
v-for="item in group.items"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="nav-item"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="nav-icon">{{ item.icon }}</span>
|
||||
{{ item.label }}
|
||||
</router-link>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="admin-user">
|
||||
<span class="avatar">{{ avatarLetter }}</span>
|
||||
<span>{{ auth.user?.nickname || auth.user?.username }}</span>
|
||||
</div>
|
||||
<button class="btn btn-ghost logout-btn" @click="handleLogout">退出登录</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="sidebar-overlay" :class="{ active: sidebarOpen }" @click="sidebarOpen = false" />
|
||||
|
||||
<div class="main-area">
|
||||
<header class="topbar">
|
||||
<button class="menu-btn" @click="sidebarOpen = true">☰</button>
|
||||
<span class="page-title">{{ currentTitle }}</span>
|
||||
<a :href="memberUrl" target="_blank" class="member-link">会员端</a>
|
||||
</header>
|
||||
<main class="main-content">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const navGroups = computed(() => {
|
||||
const menus = auth.allowedMenus
|
||||
const groups = []
|
||||
for (const menu of menus) {
|
||||
let group = groups.find(g => g.dir === menu.dir)
|
||||
if (!group) {
|
||||
group = { dir: menu.dir, dirName: menu.dirName, items: [] }
|
||||
groups.push(group)
|
||||
}
|
||||
group.items.push({
|
||||
path: menu.path,
|
||||
label: menu.name,
|
||||
icon: menu.icon || '📄'
|
||||
})
|
||||
}
|
||||
return groups
|
||||
})
|
||||
|
||||
const titleMap = computed(() =>
|
||||
Object.fromEntries(auth.allowedMenus.map(m => [m.path, m.name]))
|
||||
)
|
||||
|
||||
const currentTitle = computed(() => titleMap.value[route.path] || '管理后台')
|
||||
const avatarLetter = computed(() => (auth.user?.username || 'A').charAt(0).toUpperCase())
|
||||
const memberUrl = import.meta.env.VITE_MEMBER_URL || `${window.location.protocol}//${window.location.hostname}:5173`
|
||||
|
||||
function handleLogout() {
|
||||
auth.logout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 20px 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebar-member-link {
|
||||
display: block;
|
||||
margin: 0 12px 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.sidebar-member-link:hover {
|
||||
color: var(--accent);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 12px 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-group-title {
|
||||
padding: 12px 12px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-item.router-link-active {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.admin-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: var(--header-height);
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-link {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.member-link:hover {
|
||||
color: var(--accent);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.sidebar-overlay.active {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
}
|
||||
.main-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './assets/main.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,78 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/LoginView.vue'),
|
||||
meta: { guest: true }
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: AdminLayout,
|
||||
meta: { requiresAuth: true, requiresAdmin: true },
|
||||
children: [
|
||||
{ path: '', redirect: '/dashboard' },
|
||||
{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/DashboardView.vue'), meta: { menu: 'menu:dashboard' } },
|
||||
{ path: 'users', name: 'Users', component: () => import('@/views/UsersView.vue'), meta: { menu: 'menu:users' } },
|
||||
{
|
||||
path: 'conversations',
|
||||
name: 'Conversations',
|
||||
component: () => import('@/views/ConversationsView.vue'),
|
||||
meta: {
|
||||
menu: 'menu:conversations',
|
||||
menuAny: ['btn:conv:view_all', 'btn:conv:view_subordinate', 'can_view_all_conversations', 'can_view_subordinate_conversations']
|
||||
}
|
||||
},
|
||||
{ path: 'models', name: 'Models', component: () => import('@/views/ModelsView.vue'), meta: { menu: 'menu:models' } },
|
||||
{ path: 'memberships', name: 'Memberships', component: () => import('@/views/MembershipsView.vue'), meta: { menu: 'menu:memberships' } },
|
||||
{ path: 'roles', name: 'Roles', component: () => import('@/views/RolesView.vue'), meta: { menu: 'menu:roles' } },
|
||||
{ path: 'departments', name: 'Departments', component: () => import('@/views/DepartmentsView.vue'), meta: { menu: 'menu:departments' } },
|
||||
{ path: 'permissions', name: 'Permissions', component: () => import('@/views/PermissionsView.vue'), meta: { menu: 'menu:permissions' } },
|
||||
{ path: 'settings', name: 'Settings', component: () => import('@/views/SettingsView.vue'), meta: { menu: 'menu:settings' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const auth = useAuthStore()
|
||||
|
||||
if (!auth.initialized) {
|
||||
await auth.init()
|
||||
}
|
||||
|
||||
if (to.meta.requiresAuth && !auth.isLoggedIn) {
|
||||
next({ name: 'Login', query: { redirect: to.fullPath } })
|
||||
return
|
||||
}
|
||||
|
||||
if (to.meta.requiresAdmin && !auth.canAccessAdmin) {
|
||||
next({ name: 'Login' })
|
||||
return
|
||||
}
|
||||
|
||||
if (to.meta.menu) {
|
||||
const ok = auth.hasMenu(to.meta.menu)
|
||||
|| (to.meta.menuAny && auth.hasAny(to.meta.menuAny))
|
||||
if (!ok && to.path !== '/dashboard') {
|
||||
next({ path: '/dashboard' })
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (to.meta.guest && auth.isLoggedIn) {
|
||||
next({ name: 'Dashboard' })
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,142 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import api from '@/api'
|
||||
import { flattenMenus, permissionTree as fallbackTree } from '@/config/permissions'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref(localStorage.getItem('admin_token') || '')
|
||||
const user = ref(null)
|
||||
const initialized = ref(false)
|
||||
const menuTree = ref(fallbackTree)
|
||||
|
||||
const permissions = computed(() => user.value?.role_permissions || {})
|
||||
|
||||
const isSuper = computed(() =>
|
||||
user.value?.role_slug === 'super_admin' ||
|
||||
(user.value?.role === 'admin' && !user.value?.role_id)
|
||||
)
|
||||
|
||||
const canAccessAdmin = computed(() =>
|
||||
isSuper.value || user.value?.role === 'admin' || !!permissions.value.can_access_admin
|
||||
)
|
||||
|
||||
const isLoggedIn = computed(() => !!token.value && !!user.value)
|
||||
const isAdmin = computed(() => canAccessAdmin.value)
|
||||
|
||||
function hasCode(code) {
|
||||
if (!code) return true
|
||||
if (isSuper.value || user.value?.role === 'admin') return true
|
||||
const p = permissions.value
|
||||
if (code === 'can_access_admin') return !!p.can_access_admin
|
||||
if (code.startsWith('dir:')) return (p.dirs || []).includes(code)
|
||||
if (code.startsWith('menu:')) return (p.menus || []).includes(code)
|
||||
if (code.startsWith('btn:')) return (p.buttons || []).includes(code)
|
||||
return !!p[code]
|
||||
}
|
||||
|
||||
function hasPermission(key) {
|
||||
return hasCode(key)
|
||||
}
|
||||
|
||||
function hasMenu(code) {
|
||||
return hasCode(code)
|
||||
}
|
||||
|
||||
function hasButton(code) {
|
||||
return hasCode(code)
|
||||
}
|
||||
|
||||
function hasDir(code) {
|
||||
return hasCode(code)
|
||||
}
|
||||
|
||||
function hasAny(codes = []) {
|
||||
return codes.some(c => hasCode(c))
|
||||
}
|
||||
|
||||
const allowedMenus = computed(() =>
|
||||
flattenMenus(menuTree.value).filter(m => {
|
||||
if (m.code === 'menu:conversations') {
|
||||
return hasMenu('menu:conversations')
|
||||
|| hasButton('btn:conv:view_all')
|
||||
|| hasButton('btn:conv:view_subordinate')
|
||||
|| hasPermission('can_view_all_conversations')
|
||||
|| hasPermission('can_view_subordinate_conversations')
|
||||
}
|
||||
return hasMenu(m.code)
|
||||
})
|
||||
)
|
||||
|
||||
async function loadMenuTree() {
|
||||
try {
|
||||
const res = await api.get('/admin/permissions/tree')
|
||||
if (res.data.data?.tree?.length) {
|
||||
menuTree.value = res.data.data.tree
|
||||
}
|
||||
} catch {
|
||||
// keep fallback
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
if (token.value) {
|
||||
try {
|
||||
const res = await api.get('/auth/me')
|
||||
user.value = res.data.data
|
||||
if (!canAccessAdmin.value) {
|
||||
logout()
|
||||
} else {
|
||||
await loadMenuTree()
|
||||
}
|
||||
} catch {
|
||||
logout()
|
||||
}
|
||||
}
|
||||
initialized.value = true
|
||||
}
|
||||
|
||||
async function login(account, password) {
|
||||
const res = await api.post('/auth/login', { account, password })
|
||||
const data = res.data.data
|
||||
const perms = data.user.role_permissions || {}
|
||||
const ok = data.user.role === 'admin' || data.user.role_slug === 'super_admin' || !!perms.can_access_admin
|
||||
if (!ok) {
|
||||
throw new Error('该账号无管理后台访问权限')
|
||||
}
|
||||
token.value = data.token
|
||||
user.value = data.user
|
||||
localStorage.setItem('admin_token', token.value)
|
||||
await loadMenuTree()
|
||||
return data
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = ''
|
||||
user.value = null
|
||||
menuTree.value = fallbackTree
|
||||
localStorage.removeItem('admin_token')
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
user,
|
||||
initialized,
|
||||
permissions,
|
||||
menuTree,
|
||||
isLoggedIn,
|
||||
isAdmin,
|
||||
isSuper,
|
||||
canAccessAdmin,
|
||||
allowedMenus,
|
||||
hasPermission,
|
||||
hasCode,
|
||||
hasMenu,
|
||||
hasButton,
|
||||
hasDir,
|
||||
hasAny,
|
||||
loadMenuTree,
|
||||
init,
|
||||
login,
|
||||
logout
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,534 @@
|
||||
<template>
|
||||
<div class="conv-page">
|
||||
<div class="page-header">
|
||||
<h2>会话管理</h2>
|
||||
<p>选择左侧会话，查看用户与 AI 的完整对话</p>
|
||||
</div>
|
||||
|
||||
<div class="conv-layout">
|
||||
<aside class="conv-list-panel panel">
|
||||
<div class="list-toolbar">
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="form-input search-input"
|
||||
placeholder="搜索标题 / 用户名 / 邮箱"
|
||||
@input="onSearchInput"
|
||||
/>
|
||||
<select v-model="departmentFilter" class="form-select dept-filter" @change="reloadList">
|
||||
<option :value="null">全部部门</option>
|
||||
<option v-for="d in departments" :key="d.id" :value="d.id">{{ d.label || d.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="conv-list" v-if="conversations.length">
|
||||
<button
|
||||
v-for="c in conversations"
|
||||
:key="c.id"
|
||||
type="button"
|
||||
class="conv-item"
|
||||
:class="{ active: selectedId === c.id }"
|
||||
@click="selectConversation(c.id)"
|
||||
>
|
||||
<div class="conv-item-title">{{ c.title || '未命名会话' }}</div>
|
||||
<div class="conv-item-meta">
|
||||
<span>{{ c.username }}</span>
|
||||
<span v-if="c.department_name">{{ c.department_name }}</span>
|
||||
<span>{{ c.message_count }} 条</span>
|
||||
</div>
|
||||
<div class="conv-item-time">{{ formatDate(c.updated_at) }}</div>
|
||||
</button>
|
||||
</div>
|
||||
<p v-else-if="!listLoading" class="empty">暂无会话</p>
|
||||
<p v-else class="empty">加载中...</p>
|
||||
|
||||
<div v-if="total > limit" class="list-pagination">
|
||||
<button class="btn btn-ghost" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||
<span>{{ page }} / {{ totalPages }}</span>
|
||||
<button class="btn btn-ghost" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="conv-detail-panel panel">
|
||||
<template v-if="selectedId">
|
||||
<div class="detail-header">
|
||||
<div>
|
||||
<h3>{{ detail?.title || '未命名会话' }}</h3>
|
||||
<p class="detail-meta">
|
||||
<span>{{ detail?.username }} ({{ detail?.email }})</span>
|
||||
<span v-if="detail?.department_name">· {{ detail.department_name }}</span>
|
||||
<span v-if="detail?.model_name">· {{ detail.model_name }}</span>
|
||||
<span>· {{ detail?.message_count ?? 0 }} 条消息</span>
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn btn-ghost" :disabled="detailLoading" @click="reloadDetail">刷新</button>
|
||||
</div>
|
||||
|
||||
<div ref="messagesEl" class="messages-scroll">
|
||||
<div v-if="detailLoading && !messages.length" class="empty">加载对话中...</div>
|
||||
<div v-else-if="!messages.length" class="empty">该会话暂无消息</div>
|
||||
<div v-else class="messages">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
class="message"
|
||||
:class="msg.role"
|
||||
>
|
||||
<div class="message-avatar">{{ msg.role === 'user' ? '用户' : 'AI' }}</div>
|
||||
<div class="message-body">
|
||||
<div v-if="getAttachments(msg).length" class="attachments">
|
||||
<template v-for="(att, i) in getAttachments(msg)" :key="i">
|
||||
<img
|
||||
v-if="att.type === 'image'"
|
||||
:src="att.url"
|
||||
:alt="att.name"
|
||||
class="att-image"
|
||||
@click="previewImage(att.url)"
|
||||
/>
|
||||
<a
|
||||
v-else-if="att.url"
|
||||
:href="att.url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="att-link"
|
||||
>
|
||||
{{ documentIcon(att) }} {{ att.name || '附件' }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="msg.content" class="message-content">{{ msg.content }}</div>
|
||||
<time class="message-time">{{ formatDate(msg.created_at) }}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="messagesEnd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="detail-empty">
|
||||
<p>← 请从左侧选择一条会话</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import api from '@/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const conversations = ref([])
|
||||
const selectedId = ref(null)
|
||||
const detail = ref(null)
|
||||
const messages = ref([])
|
||||
const listLoading = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const keyword = ref('')
|
||||
const departmentFilter = ref(null)
|
||||
const departments = ref([])
|
||||
const page = ref(1)
|
||||
const limit = 20
|
||||
const total = ref(0)
|
||||
const messagesEl = ref(null)
|
||||
const messagesEnd = ref(null)
|
||||
|
||||
let searchTimer = null
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit)))
|
||||
|
||||
onMounted(async () => {
|
||||
await loadDepartments()
|
||||
await loadConversations()
|
||||
const routeId = Number(route.query.id)
|
||||
if (routeId && conversations.value.some(c => c.id === routeId)) {
|
||||
await selectConversation(routeId)
|
||||
} else if (conversations.value.length) {
|
||||
await selectConversation(conversations.value[0].id)
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => route.query.id, async (id) => {
|
||||
const numId = Number(id)
|
||||
if (numId && numId !== selectedId.value) {
|
||||
await selectConversation(numId)
|
||||
}
|
||||
})
|
||||
|
||||
async function loadDepartments() {
|
||||
try {
|
||||
const res = await api.get('/admin/department-options')
|
||||
departments.value = res.data.data || []
|
||||
} catch {
|
||||
departments.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function loadConversations() {
|
||||
listLoading.value = true
|
||||
try {
|
||||
const res = await api.get('/admin/conversations', {
|
||||
params: {
|
||||
page: page.value,
|
||||
limit,
|
||||
keyword: keyword.value.trim() || undefined,
|
||||
department_id: departmentFilter.value || undefined
|
||||
}
|
||||
})
|
||||
const data = res.data.data || {}
|
||||
conversations.value = data.list || []
|
||||
total.value = data.total ?? conversations.value.length
|
||||
} finally {
|
||||
listLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function selectConversation(id) {
|
||||
if (selectedId.value === id && messages.value.length && !detailLoading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
selectedId.value = id
|
||||
router.replace({ query: { ...route.query, id: String(id) } })
|
||||
await loadDetail(id)
|
||||
}
|
||||
|
||||
async function loadDetail(id) {
|
||||
detailLoading.value = true
|
||||
try {
|
||||
const res = await api.get(`/admin/conversations/${id}`)
|
||||
const data = res.data.data || {}
|
||||
detail.value = data.conversation || null
|
||||
messages.value = data.messages || []
|
||||
await scrollToBottom()
|
||||
} catch (err) {
|
||||
detail.value = null
|
||||
messages.value = []
|
||||
console.error(err)
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function reloadDetail() {
|
||||
if (selectedId.value) {
|
||||
loadDetail(selectedId.value)
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadList() {
|
||||
page.value = 1
|
||||
await loadConversations()
|
||||
}
|
||||
|
||||
function onSearchInput() {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(async () => {
|
||||
page.value = 1
|
||||
await loadConversations()
|
||||
if (selectedId.value && !conversations.value.some(c => c.id === selectedId.value)) {
|
||||
selectedId.value = conversations.value[0]?.id ?? null
|
||||
if (selectedId.value) {
|
||||
await loadDetail(selectedId.value)
|
||||
} else {
|
||||
detail.value = null
|
||||
messages.value = []
|
||||
router.replace({ query: {} })
|
||||
}
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
async function changePage(nextPage) {
|
||||
page.value = nextPage
|
||||
await loadConversations()
|
||||
}
|
||||
|
||||
async function scrollToBottom() {
|
||||
await nextTick()
|
||||
messagesEnd.value?.scrollIntoView({ behavior: 'auto' })
|
||||
}
|
||||
|
||||
function getAttachments(msg) {
|
||||
const raw = msg.attachments
|
||||
const list = Array.isArray(raw) ? raw : (raw && typeof raw === 'object' ? Object.values(raw) : [])
|
||||
return list.filter(att => att && typeof att === 'object')
|
||||
}
|
||||
|
||||
function documentIcon(att) {
|
||||
const name = (att?.name || '').toLowerCase()
|
||||
const mime = att?.mime || ''
|
||||
if (name.endsWith('.pdf') || mime.includes('pdf')) return '📕'
|
||||
if (name.endsWith('.doc') || name.endsWith('.docx') || mime.includes('word')) return '📘'
|
||||
return '📄'
|
||||
}
|
||||
|
||||
function previewImage(url) {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return '-'
|
||||
return new Date(d).toLocaleString('zh-CN')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.conv-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 48px);
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.conv-layout {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dept-filter {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.conv-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.conv-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 4px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.conv-item:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.conv-item.active {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
border: 1px solid rgba(99, 102, 241, 0.35);
|
||||
}
|
||||
|
||||
.conv-item-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conv-item-meta,
|
||||
.conv-item-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.conv-item-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.list-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-header h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.messages-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
flex-direction: row-reverse;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.message.assistant {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.message.user .message-avatar {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-tertiary);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message.user .message-content {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.message.user .message-time {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.att-image {
|
||||
max-width: 240px;
|
||||
max-height: 180px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.att-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.att-link:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.detail-empty,
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.conv-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 280px 1fr;
|
||||
}
|
||||
|
||||
.conv-page {
|
||||
height: auto;
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>数据概览</h2>
|
||||
<p>系统运行统计数据</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">👥</span>
|
||||
<span class="stat-value">{{ stats.users }}</span>
|
||||
<span class="stat-label">用户总数</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">💬</span>
|
||||
<span class="stat-value">{{ stats.conversations }}</span>
|
||||
<span class="stat-label">会话总数</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">📝</span>
|
||||
<span class="stat-value">{{ stats.messages }}</span>
|
||||
<span class="stat-label">消息总数</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">📈</span>
|
||||
<span class="stat-value">{{ stats.today_messages }}</span>
|
||||
<span class="stat-label">今日消息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
|
||||
const stats = ref({ users: 0, conversations: 0, messages: 0, today_messages: 0 })
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await api.get('/admin/stats')
|
||||
stats.value = res.data.data
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 28px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>部门管理</h2>
|
||||
<p>维护组织部门层级，上级部门可查看下级部门员工聊天记录</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button v-if="auth.hasButton('btn:dept:create')" class="btn btn-primary" @click="openCreate()">新增部门</button>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>部门名称</th>
|
||||
<th>上级部门</th>
|
||||
<th>排序</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="dept in treeRows" :key="dept.id">
|
||||
<td>
|
||||
<span :style="{ paddingLeft: `${dept.depth * 16}px` }">{{ dept.label || dept.name }}</span>
|
||||
</td>
|
||||
<td>{{ parentName(dept.parent_id) }}</td>
|
||||
<td>{{ dept.sort_order ?? 0 }}</td>
|
||||
<td>
|
||||
<button v-if="auth.hasButton('btn:dept:create')" class="btn btn-ghost" @click="openCreate(dept.id)">添加下级</button>
|
||||
<button v-if="auth.hasButton('btn:dept:edit')" class="btn btn-ghost" @click="openEdit(dept)">编辑</button>
|
||||
<button v-if="auth.hasButton('btn:dept:delete')" class="btn btn-ghost danger" @click="removeDept(dept)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="!treeRows.length" class="empty">暂无部门</p>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingId ? '编辑部门' : '新增部门' }}</h3>
|
||||
<button @click="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>部门名称</label>
|
||||
<input v-model="form.name" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>上级部门</label>
|
||||
<select v-model="form.parent_id" class="form-select">
|
||||
<option :value="null">无（顶级部门）</option>
|
||||
<option
|
||||
v-for="opt in parentOptions"
|
||||
:key="opt.id"
|
||||
:value="opt.id"
|
||||
:disabled="editingId === opt.id"
|
||||
>
|
||||
{{ opt.label || opt.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>排序</label>
|
||||
<input v-model.number="form.sort_order" type="number" class="form-input" />
|
||||
</div>
|
||||
<p v-if="error" class="form-error">{{ error }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" @click="closeModal">取消</button>
|
||||
<button class="btn btn-primary" @click="saveDept">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const treeRows = ref([])
|
||||
const flatList = ref([])
|
||||
const showModal = ref(false)
|
||||
const editingId = ref(null)
|
||||
const error = ref('')
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
parent_id: null,
|
||||
sort_order: 0
|
||||
})
|
||||
|
||||
const parentOptions = computed(() =>
|
||||
treeRows.value.filter(d => d.id !== editingId.value)
|
||||
)
|
||||
|
||||
onMounted(loadDepartments)
|
||||
|
||||
async function loadDepartments() {
|
||||
const res = await api.get('/admin/departments')
|
||||
const data = res.data.data || {}
|
||||
treeRows.value = data.tree || []
|
||||
flatList.value = data.list || []
|
||||
}
|
||||
|
||||
function parentName(parentId) {
|
||||
if (!parentId) return '-'
|
||||
return flatList.value.find(d => d.id === parentId)?.name || '-'
|
||||
}
|
||||
|
||||
function openCreate(parentId = null) {
|
||||
editingId.value = null
|
||||
form.name = ''
|
||||
form.parent_id = parentId
|
||||
form.sort_order = 0
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(dept) {
|
||||
editingId.value = dept.id
|
||||
form.name = dept.name
|
||||
form.parent_id = dept.parent_id || null
|
||||
form.sort_order = dept.sort_order ?? 0
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
async function saveDept() {
|
||||
error.value = ''
|
||||
if (!form.name.trim()) {
|
||||
error.value = '请填写部门名称'
|
||||
return
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
parent_id: form.parent_id,
|
||||
sort_order: form.sort_order
|
||||
}
|
||||
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await api.put(`/admin/departments/${editingId.value}`, payload)
|
||||
} else {
|
||||
await api.post('/admin/departments', payload)
|
||||
}
|
||||
closeModal()
|
||||
await loadDepartments()
|
||||
} catch (e) {
|
||||
error.value = e.message || '保存失败'
|
||||
}
|
||||
}
|
||||
|
||||
async function removeDept(dept) {
|
||||
if (!confirm(`确定删除部门「${dept.name}」？`)) return
|
||||
try {
|
||||
await api.delete(`/admin/departments/${dept.id}`)
|
||||
await loadDepartments()
|
||||
} catch (e) {
|
||||
alert(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="logo">⚙️</div>
|
||||
<h1>AI Chat 管理后台</h1>
|
||||
<p>请使用管理员账户登录</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label>账号</label>
|
||||
<input v-model="account" class="form-input" placeholder="管理员用户名或邮箱" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input v-model="password" type="password" class="form-input" placeholder="请输入密码" required />
|
||||
</div>
|
||||
<p v-if="error" class="form-error">{{ error }}</p>
|
||||
<button type="submit" class="btn btn-primary login-btn" :disabled="loading">
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const account = ref('')
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function handleLogin() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
try {
|
||||
await auth.login(account.value, password.value)
|
||||
router.push(route.query.redirect || '/dashboard')
|
||||
} catch (e) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px 32px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>会员等级</h2>
|
||||
<p>配置会员权限与使用限制，支持新增、编辑、删除</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button v-if="auth.hasButton('btn:membership:create') || auth.hasButton('btn:membership:edit')" class="btn btn-primary" @click="openCreate">
|
||||
新增等级
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="membership-grid">
|
||||
<div v-for="level in memberships" :key="level.id" class="membership-card">
|
||||
<div class="card-header">
|
||||
<h3>{{ level.name }}</h3>
|
||||
<span class="slug">{{ level.slug }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span>最大会话数</span>
|
||||
<strong>{{ level.max_conversations }}</strong>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span>每日消息上限</span>
|
||||
<strong>{{ level.max_messages_per_day }}</strong>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span>上传大小限制</span>
|
||||
<strong>{{ level.max_upload_size_mb }} MB</strong>
|
||||
</div>
|
||||
<div class="permissions">
|
||||
<span v-if="level.permissions?.can_upload_image" class="perm-tag">图片上传</span>
|
||||
<span v-if="level.permissions?.can_upload_video" class="perm-tag">视频上传</span>
|
||||
<span v-if="level.permissions?.can_upload_file" class="perm-tag">文件上传</span>
|
||||
<span v-if="level.permissions?.can_use_voice" class="perm-tag">语音</span>
|
||||
<span v-if="!hasAnyPermission(level)" class="field-hint">无额外权限</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button v-if="auth.hasButton('btn:membership:edit')" class="btn btn-ghost" @click="openEdit(level)">编辑</button>
|
||||
<button
|
||||
v-if="auth.hasButton('btn:membership:delete') && !isProtected(level)"
|
||||
class="btn btn-ghost danger"
|
||||
@click="removeLevel(level)"
|
||||
>删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ isCreate ? '新增会员等级' : `编辑会员等级 - ${editLevel?.name}` }}</h3>
|
||||
<button @click="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>名称</label>
|
||||
<input v-model="form.name" class="form-input" placeholder="如：企业版" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>标识 slug</label>
|
||||
<input v-model="form.slug" class="form-input" placeholder="英文标识，留空自动生成" :disabled="!isCreate && isProtected(editLevel)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>最大会话数</label>
|
||||
<input v-model.number="form.max_conversations" type="number" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>每日消息上限</label>
|
||||
<input v-model.number="form.max_messages_per_day" type="number" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>上传大小 (MB)</label>
|
||||
<input v-model.number="form.max_upload_size_mb" type="number" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>权限</label>
|
||||
<label class="check-item"><input type="checkbox" v-model="form.permissions.can_upload_image" /> 图片上传</label>
|
||||
<label class="check-item"><input type="checkbox" v-model="form.permissions.can_upload_video" /> 视频上传</label>
|
||||
<label class="check-item"><input type="checkbox" v-model="form.permissions.can_upload_file" /> 文件上传</label>
|
||||
<label class="check-item"><input type="checkbox" v-model="form.permissions.can_use_voice" /> 语音功能</label>
|
||||
</div>
|
||||
<p v-if="error" class="form-error">{{ error }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" @click="closeModal">取消</button>
|
||||
<button class="btn btn-primary" :disabled="saving" @click="saveLevel">
|
||||
{{ saving ? '保存中...' : '保存' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const memberships = ref([])
|
||||
const editLevel = ref(null)
|
||||
const isCreate = ref(false)
|
||||
const showModal = ref(false)
|
||||
const error = ref('')
|
||||
const saving = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
slug: '',
|
||||
max_conversations: 20,
|
||||
max_messages_per_day: 50,
|
||||
max_upload_size_mb: 5,
|
||||
permissions: {
|
||||
can_upload_image: false,
|
||||
can_upload_video: false,
|
||||
can_upload_file: false,
|
||||
can_use_voice: false
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(loadMemberships)
|
||||
|
||||
async function loadMemberships() {
|
||||
const res = await api.get('/admin/memberships')
|
||||
memberships.value = res.data.data || []
|
||||
}
|
||||
|
||||
function isProtected(level) {
|
||||
if (!level) return false
|
||||
return level.id === 1 || ['free', 'admin'].includes(level.slug)
|
||||
}
|
||||
|
||||
function hasAnyPermission(level) {
|
||||
const p = level.permissions || {}
|
||||
return p.can_upload_image || p.can_upload_video || p.can_upload_file || p.can_use_voice
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
form.name = ''
|
||||
form.slug = ''
|
||||
form.max_conversations = 20
|
||||
form.max_messages_per_day = 50
|
||||
form.max_upload_size_mb = 5
|
||||
form.permissions = {
|
||||
can_upload_image: false,
|
||||
can_upload_video: false,
|
||||
can_upload_file: false,
|
||||
can_use_voice: false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
isCreate.value = true
|
||||
editLevel.value = null
|
||||
resetForm()
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(level) {
|
||||
isCreate.value = false
|
||||
editLevel.value = level
|
||||
form.name = level.name
|
||||
form.slug = level.slug
|
||||
form.max_conversations = level.max_conversations
|
||||
form.max_messages_per_day = level.max_messages_per_day
|
||||
form.max_upload_size_mb = level.max_upload_size_mb
|
||||
form.permissions = {
|
||||
can_upload_image: false,
|
||||
can_upload_video: false,
|
||||
can_upload_file: false,
|
||||
can_use_voice: false,
|
||||
...(level.permissions || {})
|
||||
}
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
editLevel.value = null
|
||||
error.value = ''
|
||||
}
|
||||
|
||||
async function saveLevel() {
|
||||
error.value = ''
|
||||
if (!form.name.trim()) {
|
||||
error.value = '请填写名称'
|
||||
return
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
slug: form.slug.trim() || undefined,
|
||||
max_conversations: form.max_conversations,
|
||||
max_messages_per_day: form.max_messages_per_day,
|
||||
max_upload_size_mb: form.max_upload_size_mb,
|
||||
permissions: { ...form.permissions }
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
if (isCreate.value) {
|
||||
await api.post('/admin/memberships', payload)
|
||||
} else {
|
||||
await api.put(`/admin/memberships/${editLevel.value.id}`, payload)
|
||||
}
|
||||
closeModal()
|
||||
await loadMemberships()
|
||||
} catch (e) {
|
||||
error.value = e.message || '保存失败'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function removeLevel(level) {
|
||||
if (!confirm(`确定删除会员等级「${level.name}」？`)) return
|
||||
try {
|
||||
await api.delete(`/admin/memberships/${level.id}`)
|
||||
await loadMemberships()
|
||||
} catch (e) {
|
||||
alert(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.membership-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.membership-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.slug {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.info-row span {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.permissions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.perm-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--accent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.check-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>AI 模型配置</h2>
|
||||
<p>对接 OpenAI 格式 API 接口</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button v-if="auth.hasButton('btn:model:create')" class="btn btn-primary" @click="openCreate">添加模型</button>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>接口类型</th>
|
||||
<th>Model ID</th>
|
||||
<th>API 地址</th>
|
||||
<th>Max Tokens</th>
|
||||
<th>默认</th>
|
||||
<th>上下文</th>
|
||||
<th>图片</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="m in models" :key="m.id">
|
||||
<td>{{ m.name }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="m.provider === 'dify' ? 'badge-info' : 'badge-success'">
|
||||
{{ m.provider === 'dify' ? 'Dify' : 'OpenAI 兼容' }}
|
||||
</span>
|
||||
</td>
|
||||
<td><code>{{ m.model_id || '-' }}</code></td>
|
||||
<td class="url-cell">{{ m.api_base_url }}</td>
|
||||
<td>{{ m.provider === 'dify' ? '-' : m.max_tokens }}</td>
|
||||
<td>{{ m.is_default ? '✓' : '-' }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="m.support_context ? 'badge-success' : 'badge-info'">
|
||||
{{ m.support_context ? '支持' : '不支持' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge" :class="m.support_image ? 'badge-success' : 'badge-info'">
|
||||
{{ m.support_image ? '支持' : '不支持' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge" :class="m.enabled ? 'badge-success' : 'badge-danger'">
|
||||
{{ m.enabled ? '启用' : '禁用' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button v-if="auth.hasButton('btn:model:edit')" class="btn btn-ghost" @click="openEdit(m)">编辑</button>
|
||||
<button v-if="auth.hasButton('btn:model:test')" class="btn btn-ghost" @click="quickTest(m.id)" :disabled="testingId === m.id">
|
||||
{{ testingId === m.id ? '测试中...' : '测试' }}
|
||||
</button>
|
||||
<button v-if="auth.hasButton('btn:model:delete')" class="btn btn-danger" @click="handleDelete(m.id)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingId ? '编辑模型' : '添加模型' }}</h3>
|
||||
<button @click="showModal = false">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>显示名称</label>
|
||||
<input v-model="form.name" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>接口类型</label>
|
||||
<select v-model="form.provider" class="form-input">
|
||||
<option value="openai">OpenAI 兼容（GPT / DeepSeek / vLLM / SGLang 等）</option>
|
||||
<option value="dify">Dify 应用（chat-messages 接口）</option>
|
||||
</select>
|
||||
<p class="field-hint" v-if="form.provider === 'dify'">
|
||||
Dify 使用自己的一套接口协议（/chat-messages），跟 OpenAI 的 /chat/completions 不同，不要混用，否则会报 404
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-group" v-if="form.provider !== 'dify'">
|
||||
<label>Model ID</label>
|
||||
<input v-model="form.model_id" class="form-input" placeholder="gpt-4o-mini" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>API Base URL</label>
|
||||
<input
|
||||
v-model="form.api_base_url"
|
||||
class="form-input"
|
||||
:placeholder="form.provider === 'dify' ? 'https://api.dify.ai/v1（或自部署地址）' : 'https://api.openai.com/v1'"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>API Key</label>
|
||||
<p v-if="editingId && hasSavedKey" class="saved-key-hint">
|
||||
已保存 Key：<code>{{ savedKeyHint }}</code>（输入新值可覆盖，留空则不修改）
|
||||
</p>
|
||||
<p v-else-if="editingId && !hasSavedKey" class="field-hint field-hint-warn">
|
||||
当前未配置 Key，请填写
|
||||
</p>
|
||||
<input
|
||||
v-model="form.api_key"
|
||||
type="password"
|
||||
class="form-input"
|
||||
:placeholder="editingId ? '留空则使用已保存的 Key' : (form.provider === 'dify' ? 'Dify 应用“访问 API”页面获取的密钥' : '可选，部分本地模型可不填')"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group" v-if="form.provider !== 'dify'">
|
||||
<label>Max Tokens</label>
|
||||
<input v-model.number="form.max_tokens" type="number" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group" v-if="form.provider !== 'dify'">
|
||||
<label>Temperature</label>
|
||||
<input v-model.number="form.temperature" type="number" step="0.1" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><input type="checkbox" v-model="form.is_default" /> 设为默认模型</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><input type="checkbox" v-model="form.enabled" /> 启用</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><input type="checkbox" v-model="form.support_context" /> 支持上下文（多轮对话）</label>
|
||||
<p class="field-hint" v-if="form.provider === 'dify'">关闭后每次提问都会让 Dify 开启一个新会话，不延续之前的上下文</p>
|
||||
<p class="field-hint" v-else>关闭后每次提问只发送当前这一条消息，不携带历史聊天记录</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><input type="checkbox" v-model="form.support_image" /> 支持图片/多模态输入</label>
|
||||
<p class="field-hint">关闭后用户仍可上传图片给自己看，但不会把图片发给该模型识别（避免"not a multimodal model"报错），关闭后聊天界面也会自动隐藏图片上传按钮</p>
|
||||
</div>
|
||||
<template v-if="form.provider !== 'dify'">
|
||||
<div class="form-group">
|
||||
<label>Frequency Penalty（频率惩罚）</label>
|
||||
<input v-model.number="form.frequency_penalty" type="number" step="0.1" min="0" max="2" class="form-input" />
|
||||
<p class="field-hint">部分自部署/OCR 类模型容易陷入重复输出循环（同一句话刷屏），调高此值（如 1.0~1.5）可以有效抑制，默认 0 表示不干预</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Presence Penalty（存在惩罚）</label>
|
||||
<input v-model.number="form.presence_penalty" type="number" step="0.1" min="0" max="2" class="form-input" />
|
||||
<p class="field-hint">抑制模型反复围绕同一话题/短语，与频率惩罚搭配使用效果更好，默认 0 表示不干预</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="testResult" class="test-result" :class="testResult.ok ? 'success' : 'error'">
|
||||
<strong>{{ testResult.ok ? '✓ 测试成功' : '✗ 测试失败' }}</strong>
|
||||
<p v-if="testResult.ok">
|
||||
延迟 {{ testResult.latency_ms }}ms
|
||||
<span v-if="testResult.tokens"> · Token {{ testResult.tokens }}</span>
|
||||
</p>
|
||||
<p v-if="testResult.reply" class="reply-preview">模型回复：{{ testResult.reply }}</p>
|
||||
<p v-if="!testResult.ok">{{ testResult.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" @click="showModal = false">取消</button>
|
||||
<button v-if="auth.hasButton('btn:model:test')" class="btn btn-ghost" @click="testModel" :disabled="testing">
|
||||
{{ testing ? '测试中...' : '测试连接' }}
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="saveModel">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const models = ref([])
|
||||
const showModal = ref(false)
|
||||
const editingId = ref(null)
|
||||
const testing = ref(false)
|
||||
const testingId = ref(null)
|
||||
const testResult = ref(null)
|
||||
const hasSavedKey = ref(false)
|
||||
const savedKeyHint = ref('')
|
||||
const form = reactive({
|
||||
name: '',
|
||||
provider: 'openai',
|
||||
model_id: '',
|
||||
api_base_url: 'https://api.openai.com/v1',
|
||||
api_key: '',
|
||||
max_tokens: 4096,
|
||||
temperature: 0.7,
|
||||
is_default: false,
|
||||
enabled: true,
|
||||
support_context: true,
|
||||
support_image: true,
|
||||
frequency_penalty: 0,
|
||||
presence_penalty: 0
|
||||
})
|
||||
|
||||
onMounted(loadModels)
|
||||
|
||||
async function loadModels() {
|
||||
const res = await api.get('/admin/models')
|
||||
models.value = res.data.data
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
testResult.value = null
|
||||
hasSavedKey.value = false
|
||||
savedKeyHint.value = ''
|
||||
Object.assign(form, {
|
||||
name: '', provider: 'openai', model_id: '', api_base_url: 'https://api.openai.com/v1',
|
||||
api_key: '', max_tokens: 4096, temperature: 0.7, is_default: false, enabled: true, support_context: true, support_image: true,
|
||||
frequency_penalty: 0, presence_penalty: 0
|
||||
})
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(m) {
|
||||
editingId.value = m.id
|
||||
testResult.value = null
|
||||
hasSavedKey.value = !!m.has_api_key
|
||||
savedKeyHint.value = m.api_key_hint || ''
|
||||
Object.assign(form, {
|
||||
name: m.name, provider: m.provider === 'dify' ? 'dify' : 'openai', model_id: m.model_id, api_base_url: m.api_base_url,
|
||||
api_key: '', max_tokens: m.max_tokens, temperature: parseFloat(m.temperature),
|
||||
is_default: !!m.is_default, enabled: !!m.enabled,
|
||||
support_context: m.support_context === undefined ? true : !!m.support_context,
|
||||
support_image: m.support_image === undefined ? true : !!m.support_image,
|
||||
frequency_penalty: m.frequency_penalty !== undefined && m.frequency_penalty !== null ? parseFloat(m.frequency_penalty) : 0,
|
||||
presence_penalty: m.presence_penalty !== undefined && m.presence_penalty !== null ? parseFloat(m.presence_penalty) : 0
|
||||
})
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
async function saveModel() {
|
||||
const payload = {
|
||||
...form,
|
||||
is_default: form.is_default ? 1 : 0,
|
||||
enabled: form.enabled ? 1 : 0,
|
||||
support_context: form.support_context ? 1 : 0,
|
||||
support_image: form.support_image ? 1 : 0
|
||||
}
|
||||
if (editingId.value) {
|
||||
if (!payload.api_key) delete payload.api_key
|
||||
await api.put(`/admin/models/${editingId.value}`, payload)
|
||||
} else {
|
||||
await api.post('/admin/models', payload)
|
||||
}
|
||||
showModal.value = false
|
||||
await loadModels()
|
||||
}
|
||||
|
||||
async function handleDelete(id) {
|
||||
if (confirm('确定删除此模型？')) {
|
||||
await api.delete(`/admin/models/${id}`)
|
||||
await loadModels()
|
||||
}
|
||||
}
|
||||
|
||||
async function testModel() {
|
||||
if (form.provider === 'dify') {
|
||||
if (!form.api_base_url) {
|
||||
testResult.value = { ok: false, message: '请填写 API 地址' }
|
||||
return
|
||||
}
|
||||
if (!form.api_key && !editingId.value) {
|
||||
testResult.value = { ok: false, message: '请填写 API Key' }
|
||||
return
|
||||
}
|
||||
if (!form.api_key && editingId.value && !hasSavedKey.value) {
|
||||
testResult.value = { ok: false, message: '当前模型未配置 Key，请填写' }
|
||||
return
|
||||
}
|
||||
} else if (!form.model_id || !form.api_base_url) {
|
||||
testResult.value = { ok: false, message: '请填写 Model ID 和 API 地址' }
|
||||
return
|
||||
}
|
||||
|
||||
testing.value = true
|
||||
testResult.value = null
|
||||
try {
|
||||
const payload = {
|
||||
provider: form.provider,
|
||||
model_id: form.model_id,
|
||||
api_base_url: form.api_base_url,
|
||||
temperature: form.temperature
|
||||
}
|
||||
if (form.api_key) payload.api_key = form.api_key
|
||||
|
||||
const url = editingId.value
|
||||
? `/admin/models/${editingId.value}/test`
|
||||
: '/admin/models/test'
|
||||
const res = await api.post(url, payload)
|
||||
testResult.value = { ok: true, ...res.data.data }
|
||||
} catch (e) {
|
||||
testResult.value = { ok: false, message: e.message }
|
||||
} finally {
|
||||
testing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function quickTest(id) {
|
||||
testingId.value = id
|
||||
try {
|
||||
const res = await api.post(`/admin/models/${id}/test`, {})
|
||||
alert(`测试成功！\n延迟: ${res.data.data.latency_ms}ms\n回复: ${res.data.data.reply}`)
|
||||
} catch (e) {
|
||||
alert('测试失败: ' + e.message)
|
||||
} finally {
|
||||
testingId.value = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.url-cell {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.test-result {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.test-result.success {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
color: var(--success);
|
||||
}
|
||||
.test-result.error {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
.test-result p {
|
||||
margin-top: 6px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.test-result.success p {
|
||||
color: #86efac;
|
||||
}
|
||||
.reply-preview {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field-hint-warn {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.saved-key-hint {
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.saved-key-hint code {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: var(--success);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>权限管理</h2>
|
||||
<p>维护目录、菜单、按钮节点，角色勾选后即可生效</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button v-if="auth.hasButton('btn:perm:create')" class="btn btn-primary" @click="openCreate('dir')">新增目录</button>
|
||||
<button v-if="auth.hasButton('btn:perm:create')" class="btn btn-ghost" @click="openCreate('menu')">新增菜单</button>
|
||||
<button v-if="auth.hasButton('btn:perm:create')" class="btn btn-ghost" @click="openCreate('btn')">新增按钮</button>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>类型</th>
|
||||
<th>标识</th>
|
||||
<th>路径 / 图标</th>
|
||||
<th>系统</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in flatRows" :key="row.id || row.code">
|
||||
<td>
|
||||
<span :style="{ paddingLeft: `${row.depth * 18}px` }">{{ row.name }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-badge" :class="row.type">{{ typeLabel(row.type) }}</span>
|
||||
</td>
|
||||
<td><code>{{ row.code }}</code></td>
|
||||
<td>
|
||||
<span v-if="row.path">{{ row.path }}</span>
|
||||
<span v-if="row.icon"> {{ row.icon }}</span>
|
||||
<span v-if="!row.path && !row.icon">-</span>
|
||||
</td>
|
||||
<td>{{ row.is_system ? '是' : '否' }}</td>
|
||||
<td>
|
||||
<button
|
||||
v-if="auth.hasButton('btn:perm:create') && row.type !== 'btn'"
|
||||
class="btn btn-ghost"
|
||||
@click="openCreate(row.type === 'dir' ? 'menu' : 'btn', row.id)"
|
||||
>添加下级</button>
|
||||
<button v-if="auth.hasButton('btn:perm:edit')" class="btn btn-ghost" @click="openEdit(row)">编辑</button>
|
||||
<button
|
||||
v-if="auth.hasButton('btn:perm:delete') && !row.is_system"
|
||||
class="btn btn-ghost danger"
|
||||
@click="removeRow(row)"
|
||||
>删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="!flatRows.length" class="empty">暂无权限节点，请先执行数据库迁移</p>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingId ? '编辑权限' : '新增' + typeLabel(form.type) }}</h3>
|
||||
<button @click="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>类型</label>
|
||||
<select v-model="form.type" class="form-select" :disabled="!!editingId">
|
||||
<option value="dir">目录</option>
|
||||
<option value="menu">菜单</option>
|
||||
<option value="btn">按钮</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="form.type !== 'dir'" class="form-group">
|
||||
<label>上级</label>
|
||||
<select v-model="form.parent_id" class="form-select">
|
||||
<option v-for="opt in parentOptions" :key="opt.id" :value="opt.id">{{ opt.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>名称</label>
|
||||
<input v-model="form.name" class="form-input" placeholder="显示名称" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>标识 code</label>
|
||||
<input v-model="form.code" class="form-input" :placeholder="codePlaceholder" :disabled="editingIsSystem" />
|
||||
<div class="field-hint">建议格式：dir:xxx / menu:xxx / btn:xxx:action</div>
|
||||
</div>
|
||||
<div v-if="form.type === 'menu'" class="form-group">
|
||||
<label>路由路径</label>
|
||||
<input v-model="form.path" class="form-input" placeholder="如 /users" />
|
||||
</div>
|
||||
<div v-if="form.type === 'menu'" class="form-group">
|
||||
<label>图标</label>
|
||||
<input v-model="form.icon" class="form-input" placeholder="可选 emoji" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>排序</label>
|
||||
<input v-model.number="form.sort_order" type="number" class="form-input" />
|
||||
</div>
|
||||
<p v-if="error" class="form-error">{{ error }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" @click="closeModal">取消</button>
|
||||
<button class="btn btn-primary" @click="saveRow">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const tree = ref([])
|
||||
const showModal = ref(false)
|
||||
const editingId = ref(null)
|
||||
const editingIsSystem = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const form = reactive({
|
||||
type: 'dir',
|
||||
parent_id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
path: '',
|
||||
icon: '',
|
||||
sort_order: 0
|
||||
})
|
||||
|
||||
const flatRows = computed(() => {
|
||||
const rows = []
|
||||
const walk = (nodes, depth = 0) => {
|
||||
for (const n of nodes || []) {
|
||||
rows.push({ ...n, depth })
|
||||
if (n.children?.length) walk(n.children, depth + 1)
|
||||
}
|
||||
}
|
||||
walk(tree.value)
|
||||
return rows
|
||||
})
|
||||
|
||||
const parentOptions = computed(() => {
|
||||
if (form.type === 'menu') {
|
||||
return flatRows.value
|
||||
.filter(r => r.type === 'dir')
|
||||
.map(r => ({ id: r.id, label: r.name }))
|
||||
}
|
||||
if (form.type === 'btn') {
|
||||
return flatRows.value
|
||||
.filter(r => r.type === 'menu')
|
||||
.map(r => ({ id: r.id, label: `${r.name} (${r.code})` }))
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
const codePlaceholder = computed(() => {
|
||||
if (form.type === 'dir') return 'dir:custom'
|
||||
if (form.type === 'menu') return 'menu:custom'
|
||||
return 'btn:custom:action'
|
||||
})
|
||||
|
||||
onMounted(loadTree)
|
||||
|
||||
async function loadTree() {
|
||||
const res = await api.get('/admin/permissions/tree')
|
||||
tree.value = res.data.data?.tree || []
|
||||
}
|
||||
|
||||
function typeLabel(type) {
|
||||
return { dir: '目录', menu: '菜单', btn: '按钮' }[type] || type
|
||||
}
|
||||
|
||||
function openCreate(type, parentId = null) {
|
||||
editingId.value = null
|
||||
editingIsSystem.value = false
|
||||
form.type = type
|
||||
form.parent_id = parentId
|
||||
form.name = ''
|
||||
form.code = ''
|
||||
form.path = ''
|
||||
form.icon = ''
|
||||
form.sort_order = 0
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editingId.value = row.id
|
||||
editingIsSystem.value = !!row.is_system
|
||||
form.type = row.type
|
||||
form.parent_id = row.parent_id
|
||||
form.name = row.name
|
||||
form.code = row.code
|
||||
form.path = row.path || ''
|
||||
form.icon = row.icon || ''
|
||||
form.sort_order = row.sort_order || 0
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
async function saveRow() {
|
||||
error.value = ''
|
||||
if (!form.name.trim()) {
|
||||
error.value = '请填写名称'
|
||||
return
|
||||
}
|
||||
if (form.type !== 'dir' && !form.parent_id) {
|
||||
error.value = '请选择上级'
|
||||
return
|
||||
}
|
||||
|
||||
const payload = {
|
||||
type: form.type,
|
||||
name: form.name.trim(),
|
||||
code: form.code.trim() || undefined,
|
||||
parent_id: form.type === 'dir' ? null : form.parent_id,
|
||||
path: form.path.trim(),
|
||||
icon: form.icon.trim(),
|
||||
sort_order: form.sort_order
|
||||
}
|
||||
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await api.put(`/admin/permissions/${editingId.value}`, payload)
|
||||
} else {
|
||||
await api.post('/admin/permissions', payload)
|
||||
}
|
||||
closeModal()
|
||||
await loadTree()
|
||||
await auth.loadMenuTree()
|
||||
} catch (e) {
|
||||
error.value = e.message || '保存失败'
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRow(row) {
|
||||
if (!confirm(`确定删除「${row.name}」？`)) return
|
||||
try {
|
||||
await api.delete(`/admin/permissions/${row.id}`)
|
||||
await loadTree()
|
||||
await auth.loadMenuTree()
|
||||
} catch (e) {
|
||||
alert(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.type-badge.dir { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
|
||||
.type-badge.menu { background: rgba(99, 102, 241, 0.15); color: var(--accent); }
|
||||
.type-badge.btn { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
|
||||
|
||||
.field-hint {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.danger { color: #ef4444; }
|
||||
</style>
|
||||
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>角色管理</h2>
|
||||
<p>配置目录权限、菜单权限与按钮权限</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button v-if="auth.hasButton('btn:role:create')" class="btn btn-primary" @click="openCreate">新增角色</button>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>标识</th>
|
||||
<th>权限摘要</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="role in roles" :key="role.id">
|
||||
<td>{{ role.name }}</td>
|
||||
<td><code>{{ role.slug }}</code></td>
|
||||
<td>
|
||||
<div class="perm-tags">
|
||||
<span v-for="tag in summarize(role.permissions)" :key="tag" class="perm-tag">{{ tag }}</span>
|
||||
<span v-if="!summarize(role.permissions).length" class="field-hint">无权限</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button v-if="auth.hasButton('btn:role:edit')" class="btn btn-ghost" @click="openEdit(role)">编辑</button>
|
||||
<button
|
||||
v-if="auth.hasButton('btn:role:delete') && role.slug !== 'super_admin'"
|
||||
class="btn btn-ghost danger"
|
||||
@click="removeRole(role)"
|
||||
>删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal modal-wide">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingId ? '编辑角色' : '新增角色' }}</h3>
|
||||
<button @click="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>角色名称</label>
|
||||
<input v-model="form.name" class="form-input" placeholder="如：部门主管" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>标识 slug</label>
|
||||
<input v-model="form.slug" class="form-input" placeholder="英文标识，留空自动生成" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="check-item top-check">
|
||||
<input type="checkbox" v-model="form.can_access_admin" />
|
||||
允许访问管理后台
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="perm-section">
|
||||
<div class="perm-section-header">
|
||||
<span>权限树（目录 / 菜单 / 按钮）</span>
|
||||
<div class="perm-actions">
|
||||
<button type="button" class="btn btn-ghost" @click="checkAll">全选</button>
|
||||
<button type="button" class="btn btn-ghost" @click="clearAll">清空</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="dir in tree" :key="dir.code" class="perm-dir">
|
||||
<label class="check-item dir-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="isChecked(dir.code)"
|
||||
@change="toggleDir(dir, $event.target.checked)"
|
||||
/>
|
||||
<span class="type-badge dir">目录</span>
|
||||
{{ dir.name }}
|
||||
</label>
|
||||
|
||||
<div v-for="menu in dir.children" :key="menu.code" class="perm-menu">
|
||||
<label class="check-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="isChecked(menu.code)"
|
||||
@change="toggleMenu(dir, menu, $event.target.checked)"
|
||||
/>
|
||||
<span class="type-badge menu">菜单</span>
|
||||
{{ menu.name }}
|
||||
</label>
|
||||
|
||||
<div v-if="menu.children?.length" class="perm-btns">
|
||||
<label v-for="btn in menu.children" :key="btn.code" class="check-item btn-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="isChecked(btn.code)"
|
||||
@change="toggleBtn(dir, menu, btn, $event.target.checked)"
|
||||
/>
|
||||
<span class="type-badge btn">按钮</span>
|
||||
{{ btn.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="form-error">{{ error }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" @click="closeModal">取消</button>
|
||||
<button class="btn btn-primary" @click="saveRole">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { permissionTree, emptyPermissions, summarizePermissionLabels } from '@/config/permissions'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const roles = ref([])
|
||||
const tree = ref(permissionTree)
|
||||
const showModal = ref(false)
|
||||
const editingId = ref(null)
|
||||
const error = ref('')
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
slug: '',
|
||||
can_access_admin: false,
|
||||
dirs: [],
|
||||
menus: [],
|
||||
buttons: []
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadRoles(), loadTree()])
|
||||
})
|
||||
|
||||
async function loadRoles() {
|
||||
const res = await api.get('/admin/roles')
|
||||
roles.value = res.data.data || []
|
||||
}
|
||||
|
||||
async function loadTree() {
|
||||
try {
|
||||
const res = await api.get('/admin/permissions/tree')
|
||||
if (res.data.data?.tree?.length) {
|
||||
tree.value = res.data.data.tree
|
||||
}
|
||||
} catch {
|
||||
tree.value = permissionTree
|
||||
}
|
||||
}
|
||||
|
||||
function summarize(perms) {
|
||||
return summarizePermissionLabels(normalizePerms(perms))
|
||||
}
|
||||
|
||||
function isChecked(code) {
|
||||
if (code.startsWith('dir:')) return form.dirs.includes(code)
|
||||
if (code.startsWith('menu:')) return form.menus.includes(code)
|
||||
if (code.startsWith('btn:')) return form.buttons.includes(code)
|
||||
return false
|
||||
}
|
||||
|
||||
function setList(listName, code, checked) {
|
||||
const list = form[listName]
|
||||
const idx = list.indexOf(code)
|
||||
if (checked && idx < 0) list.push(code)
|
||||
if (!checked && idx >= 0) list.splice(idx, 1)
|
||||
}
|
||||
|
||||
function toggleDir(dir, checked) {
|
||||
setList('dirs', dir.code, checked)
|
||||
for (const menu of dir.children || []) {
|
||||
toggleMenu(dir, menu, checked, false)
|
||||
}
|
||||
if (checked) form.can_access_admin = true
|
||||
}
|
||||
|
||||
function toggleMenu(dir, menu, checked, syncDir = true) {
|
||||
setList('menus', menu.code, checked)
|
||||
for (const btn of menu.children || []) {
|
||||
setList('buttons', btn.code, checked)
|
||||
}
|
||||
if (syncDir) {
|
||||
const anyMenu = (dir.children || []).some(m => form.menus.includes(m.code))
|
||||
setList('dirs', dir.code, anyMenu)
|
||||
}
|
||||
if (checked) form.can_access_admin = true
|
||||
}
|
||||
|
||||
function toggleBtn(dir, menu, btn, checked) {
|
||||
setList('buttons', btn.code, checked)
|
||||
const anyBtn = (menu.children || []).some(b => form.buttons.includes(b.code))
|
||||
if (checked || anyBtn) {
|
||||
setList('menus', menu.code, true)
|
||||
setList('dirs', dir.code, true)
|
||||
form.can_access_admin = true
|
||||
} else if (!(menu.children || []).length) {
|
||||
// no-op
|
||||
} else if (!anyBtn && !form.menus.includes(menu.code)) {
|
||||
// keep menu if explicitly checked alone — already handled
|
||||
}
|
||||
}
|
||||
|
||||
function checkAll() {
|
||||
form.can_access_admin = true
|
||||
form.dirs = []
|
||||
form.menus = []
|
||||
form.buttons = []
|
||||
for (const dir of tree.value) {
|
||||
form.dirs.push(dir.code)
|
||||
for (const menu of dir.children || []) {
|
||||
form.menus.push(menu.code)
|
||||
for (const btn of menu.children || []) {
|
||||
form.buttons.push(btn.code)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
Object.assign(form, {
|
||||
...form,
|
||||
can_access_admin: false,
|
||||
dirs: [],
|
||||
menus: [],
|
||||
buttons: []
|
||||
})
|
||||
form.dirs = []
|
||||
form.menus = []
|
||||
form.buttons = []
|
||||
form.can_access_admin = false
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
form.name = ''
|
||||
form.slug = ''
|
||||
const empty = emptyPermissions()
|
||||
form.can_access_admin = empty.can_access_admin
|
||||
form.dirs = []
|
||||
form.menus = []
|
||||
form.buttons = []
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(role) {
|
||||
editingId.value = role.id
|
||||
form.name = role.name
|
||||
form.slug = role.slug
|
||||
const p = normalizePerms(role.permissions)
|
||||
form.can_access_admin = !!p.can_access_admin
|
||||
form.dirs = [...p.dirs]
|
||||
form.menus = [...p.menus]
|
||||
form.buttons = [...p.buttons]
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function normalizePerms(raw) {
|
||||
let p = raw
|
||||
if (typeof p === 'string') {
|
||||
try {
|
||||
p = JSON.parse(p)
|
||||
} catch {
|
||||
p = {}
|
||||
}
|
||||
}
|
||||
if (!p || typeof p !== 'object') p = {}
|
||||
return {
|
||||
can_access_admin: !!p.can_access_admin,
|
||||
dirs: Array.isArray(p.dirs) ? p.dirs : [],
|
||||
menus: Array.isArray(p.menus) ? p.menus : [],
|
||||
buttons: Array.isArray(p.buttons) ? p.buttons : []
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
async function saveRole() {
|
||||
error.value = ''
|
||||
if (!form.name.trim()) {
|
||||
error.value = '请填写角色名称'
|
||||
return
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
slug: form.slug.trim() || undefined,
|
||||
permissions: {
|
||||
can_access_admin: form.can_access_admin,
|
||||
dirs: [...form.dirs],
|
||||
menus: [...form.menus],
|
||||
buttons: [...form.buttons]
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await api.put(`/admin/roles/${editingId.value}`, payload)
|
||||
} else {
|
||||
await api.post('/admin/roles', payload)
|
||||
}
|
||||
closeModal()
|
||||
await loadRoles()
|
||||
} catch (e) {
|
||||
error.value = e.message || '保存失败'
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRole(role) {
|
||||
if (!confirm(`确定删除角色「${role.name}」？`)) return
|
||||
try {
|
||||
await api.delete(`/admin/roles/${role.id}`)
|
||||
await loadRoles()
|
||||
} catch (e) {
|
||||
alert(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.perm-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.perm-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--accent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-wide {
|
||||
max-width: 640px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-wide .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.top-check {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.perm-section {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.perm-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.perm-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.perm-dir {
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.perm-dir:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dir-check {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.perm-menu {
|
||||
margin-left: 22px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.perm-btns {
|
||||
margin-left: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.check-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 11px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-badge.dir {
|
||||
background: rgba(14, 165, 233, 0.15);
|
||||
color: #0ea5e9;
|
||||
}
|
||||
|
||||
.type-badge.menu {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.type-badge.btn {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>系统设置</h2>
|
||||
<p>控制前端功能开关与站点配置</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3 class="section-title">站点配置</h3>
|
||||
<div class="form-group">
|
||||
<label>站点名称</label>
|
||||
<input v-model="siteName" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="check-item">
|
||||
<input type="checkbox" v-model="allowRegister" />
|
||||
允许用户注册
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel" style="margin-top: 16px">
|
||||
<h3 class="section-title">功能开关（会员端）</h3>
|
||||
<p class="section-desc">关闭后，会员端对应功能将不可用</p>
|
||||
<div class="feature-grid">
|
||||
<label v-for="(val, key) in features" :key="key" class="feature-item">
|
||||
<input type="checkbox" v-model="features[key]" />
|
||||
<span>{{ featureLabels[key] || key }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<button v-if="auth.hasButton('btn:settings:save')" class="btn btn-primary" @click="saveAll" :disabled="saving">
|
||||
{{ saving ? '保存中...' : '保存全部设置' }}
|
||||
</button>
|
||||
<p v-if="saved" class="success-msg">保存成功</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
|
||||
const siteName = ref('AI Chat')
|
||||
const allowRegister = ref(true)
|
||||
const saving = ref(false)
|
||||
const saved = ref(false)
|
||||
|
||||
const features = reactive({
|
||||
markdown: true,
|
||||
image: true,
|
||||
video: true,
|
||||
voice: true,
|
||||
document: true,
|
||||
emoji: true,
|
||||
upload_image: true,
|
||||
upload_video: true,
|
||||
upload_file: true,
|
||||
paste_image: true
|
||||
})
|
||||
|
||||
const featureLabels = {
|
||||
markdown: 'Markdown 解析',
|
||||
image: '图片解析',
|
||||
video: '视频解析',
|
||||
voice: '语音解析',
|
||||
document: '文档解析',
|
||||
emoji: '表情',
|
||||
upload_image: '上传图片',
|
||||
upload_video: '上传视频',
|
||||
upload_file: '上传文件',
|
||||
paste_image: '粘贴图片'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await api.get('/admin/settings')
|
||||
const data = res.data.data
|
||||
|
||||
if (data.site_name) {
|
||||
siteName.value = data.site_name.value
|
||||
}
|
||||
if (data.allow_register) {
|
||||
allowRegister.value = data.allow_register.value === true || data.allow_register.value === 'true'
|
||||
}
|
||||
if (data.features?.value) {
|
||||
Object.assign(features, data.features.value)
|
||||
}
|
||||
})
|
||||
|
||||
async function saveAll() {
|
||||
saving.value = true
|
||||
saved.value = false
|
||||
try {
|
||||
await api.put('/admin/settings', {
|
||||
site_name: siteName.value,
|
||||
allow_register: allowRegister.value ? 'true' : 'false',
|
||||
features: { ...features }
|
||||
})
|
||||
saved.value = true
|
||||
setTimeout(() => { saved.value = false }, 3000)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feature-item input {
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.check-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.success-msg {
|
||||
color: var(--success);
|
||||
font-size: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>用户管理</h2>
|
||||
<p>管理注册用户、密码、角色与会员套餐</p>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button v-if="auth.hasButton('btn:user:create')" class="btn btn-primary" @click="openCreate">新增账户</button>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>用户名</th>
|
||||
<th>邮箱</th>
|
||||
<th>昵称</th>
|
||||
<th>角色</th>
|
||||
<th>部门</th>
|
||||
<th>会员等级</th>
|
||||
<th>状态</th>
|
||||
<th>最后登录</th>
|
||||
<th>注册时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="u in users" :key="u.id">
|
||||
<td>{{ u.id }}</td>
|
||||
<td>{{ u.username }}</td>
|
||||
<td>{{ u.email }}</td>
|
||||
<td>{{ u.nickname || '-' }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="u.role_slug === 'super_admin' || u.role === 'admin' ? 'badge-info' : ''">
|
||||
{{ u.role_name || roleLabel(u.role) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ u.department_name || '-' }}</td>
|
||||
<td>{{ u.membership_name || '-' }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="u.status === 'active' ? 'badge-success' : 'badge-danger'">
|
||||
{{ u.status === 'active' ? '正常' : '禁用' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ formatDate(u.last_login_at) }}</td>
|
||||
<td>{{ formatDate(u.created_at) }}</td>
|
||||
<td>
|
||||
<button v-if="auth.hasButton('btn:user:edit')" class="btn btn-ghost" @click="openEdit(u)">编辑</button>
|
||||
<button
|
||||
v-if="auth.hasButton('btn:user:delete') && u.id !== auth.user?.id"
|
||||
class="btn btn-ghost danger"
|
||||
@click="removeUser(u)"
|
||||
>删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="!users.length" class="empty">暂无用户</p>
|
||||
|
||||
<div v-if="total > limit" class="pagination">
|
||||
<button class="btn btn-ghost" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||
<span>{{ page }} / {{ totalPages }}</span>
|
||||
<button class="btn btn-ghost" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal modal-wide">
|
||||
<div class="modal-header">
|
||||
<h3>{{ isCreate ? '新增账户' : `编辑用户 — ${editUser?.username}` }}</h3>
|
||||
<button @click="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="!isCreate" class="user-meta">
|
||||
<span>ID: {{ editUser.id }}</span>
|
||||
<span>邮箱: {{ editUser.email }}</span>
|
||||
<span>注册: {{ formatDate(editUser.created_at) }}</span>
|
||||
</div>
|
||||
|
||||
<template v-if="isCreate">
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<input v-model="editForm.username" class="form-input" placeholder="登录用户名" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>邮箱</label>
|
||||
<input v-model="editForm.email" class="form-input" placeholder="user@example.com" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="form-group">
|
||||
<label>昵称</label>
|
||||
<input v-model="editForm.nickname" class="form-input" placeholder="显示名称" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>角色</label>
|
||||
<select v-model.number="editForm.role_id" class="form-select">
|
||||
<option v-for="r in roles" :key="r.id" :value="r.id">{{ r.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>所属部门</label>
|
||||
<select v-model="editForm.department_id" class="form-select">
|
||||
<option :value="null">未分配</option>
|
||||
<option v-for="d in departments" :key="d.id" :value="d.id">{{ d.label || d.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>账号状态</label>
|
||||
<select v-model="editForm.status" class="form-select">
|
||||
<option value="active">正常</option>
|
||||
<option value="disabled">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>会员套餐</label>
|
||||
<select v-model.number="editForm.membership_level_id" class="form-select">
|
||||
<option v-for="m in memberships" :key="m.id" :value="m.id">
|
||||
{{ m.name }}（会话 {{ m.max_conversations }} · 日消息 {{ m.max_messages_per_day }} · 上传 {{ m.max_upload_size_mb }}MB）
|
||||
</option>
|
||||
</select>
|
||||
<div v-if="selectedMembership" class="membership-preview">
|
||||
<span v-if="selectedMembership.permissions?.can_upload_image" class="perm-tag">图片</span>
|
||||
<span v-if="selectedMembership.permissions?.can_upload_video" class="perm-tag">视频</span>
|
||||
<span v-if="selectedMembership.permissions?.can_upload_file" class="perm-tag">文件</span>
|
||||
<span v-if="selectedMembership.permissions?.can_use_voice" class="perm-tag">语音</span>
|
||||
<span v-if="!hasAnyPermission(selectedMembership)" class="field-hint">该套餐暂无额外权限</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isCreate || auth.hasButton('btn:user:reset_password')" class="form-divider">
|
||||
{{ isCreate ? '登录密码' : '重置密码（可选）' }}
|
||||
</div>
|
||||
|
||||
<div v-if="isCreate || auth.hasButton('btn:user:reset_password')" class="form-group">
|
||||
<label>{{ isCreate ? '密码' : '新密码' }}</label>
|
||||
<input
|
||||
v-model="editForm.password"
|
||||
type="password"
|
||||
class="form-input"
|
||||
:placeholder="isCreate ? '至少 6 位' : '留空则不修改密码'"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isCreate || auth.hasButton('btn:user:reset_password')" class="form-group">
|
||||
<label>确认密码</label>
|
||||
<input
|
||||
v-model="editForm.passwordConfirm"
|
||||
type="password"
|
||||
class="form-input"
|
||||
placeholder="再次输入密码"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="form-error">{{ error }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-ghost" @click="closeModal">取消</button>
|
||||
<button class="btn btn-primary" :disabled="saving" @click="saveUser">
|
||||
{{ saving ? '保存中...' : '保存' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import api from '@/api'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const users = ref([])
|
||||
const memberships = ref([])
|
||||
const roles = ref([])
|
||||
const departments = ref([])
|
||||
const editUser = ref(null)
|
||||
const isCreate = ref(false)
|
||||
const showModal = ref(false)
|
||||
const error = ref('')
|
||||
const saving = ref(false)
|
||||
const page = ref(1)
|
||||
const limit = 20
|
||||
const total = ref(0)
|
||||
|
||||
const editForm = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
role_id: null,
|
||||
department_id: null,
|
||||
status: 'active',
|
||||
membership_level_id: 1,
|
||||
password: '',
|
||||
passwordConfirm: ''
|
||||
})
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / limit)))
|
||||
|
||||
const selectedMembership = computed(() =>
|
||||
memberships.value.find(m => m.id === editForm.membership_level_id) || null
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadUsers(), loadMemberships(), loadRoles(), loadDepartments()])
|
||||
})
|
||||
|
||||
async function loadUsers() {
|
||||
const res = await api.get('/admin/users', { params: { page: page.value, limit } })
|
||||
const data = res.data.data || {}
|
||||
users.value = data.list || []
|
||||
total.value = data.total ?? users.value.length
|
||||
}
|
||||
|
||||
async function loadMemberships() {
|
||||
const res = await api.get('/admin/memberships')
|
||||
memberships.value = res.data.data || []
|
||||
}
|
||||
|
||||
async function loadRoles() {
|
||||
const res = await api.get('/admin/roles')
|
||||
roles.value = res.data.data || []
|
||||
}
|
||||
|
||||
async function loadDepartments() {
|
||||
const res = await api.get('/admin/department-options')
|
||||
departments.value = res.data.data || []
|
||||
}
|
||||
|
||||
async function changePage(nextPage) {
|
||||
page.value = nextPage
|
||||
await loadUsers()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
isCreate.value = true
|
||||
editUser.value = null
|
||||
showModal.value = true
|
||||
error.value = ''
|
||||
editForm.username = ''
|
||||
editForm.email = ''
|
||||
editForm.nickname = ''
|
||||
editForm.role_id = roles.value.find(r => r.slug === 'user')?.id || roles.value[0]?.id || null
|
||||
editForm.department_id = null
|
||||
editForm.status = 'active'
|
||||
editForm.membership_level_id = memberships.value[0]?.id || 1
|
||||
editForm.password = ''
|
||||
editForm.passwordConfirm = ''
|
||||
}
|
||||
|
||||
function openEdit(user) {
|
||||
isCreate.value = false
|
||||
editUser.value = user
|
||||
showModal.value = true
|
||||
error.value = ''
|
||||
editForm.username = user.username
|
||||
editForm.email = user.email
|
||||
editForm.nickname = user.nickname || user.username
|
||||
editForm.role_id = user.role_id || roles.value.find(r => r.slug === 'user')?.id || null
|
||||
editForm.department_id = user.department_id || null
|
||||
editForm.status = user.status
|
||||
editForm.membership_level_id = user.membership_level_id || memberships.value[0]?.id || 1
|
||||
editForm.password = ''
|
||||
editForm.passwordConfirm = ''
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
editUser.value = null
|
||||
error.value = ''
|
||||
}
|
||||
|
||||
function hasAnyPermission(level) {
|
||||
const p = level.permissions || {}
|
||||
return p.can_upload_image || p.can_upload_video || p.can_upload_file || p.can_use_voice
|
||||
}
|
||||
|
||||
async function saveUser() {
|
||||
error.value = ''
|
||||
|
||||
if (isCreate.value) {
|
||||
if (editForm.username.trim().length < 3) {
|
||||
error.value = '用户名至少 3 位'
|
||||
return
|
||||
}
|
||||
if (!editForm.email.trim()) {
|
||||
error.value = '请填写邮箱'
|
||||
return
|
||||
}
|
||||
if (editForm.password.length < 6) {
|
||||
error.value = '密码至少 6 位'
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (editForm.password || editForm.passwordConfirm || isCreate.value) {
|
||||
if (editForm.password.length < 6 && (isCreate.value || editForm.password || editForm.passwordConfirm)) {
|
||||
error.value = '密码至少 6 位'
|
||||
return
|
||||
}
|
||||
if (editForm.password !== editForm.passwordConfirm) {
|
||||
error.value = '两次输入的密码不一致'
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
if (isCreate.value) {
|
||||
await api.post('/admin/users', {
|
||||
username: editForm.username.trim(),
|
||||
email: editForm.email.trim(),
|
||||
nickname: editForm.nickname.trim(),
|
||||
role_id: editForm.role_id,
|
||||
department_id: editForm.department_id,
|
||||
status: editForm.status,
|
||||
membership_level_id: editForm.membership_level_id,
|
||||
password: editForm.password
|
||||
})
|
||||
} else {
|
||||
const payload = {
|
||||
nickname: editForm.nickname.trim(),
|
||||
role_id: editForm.role_id,
|
||||
department_id: editForm.department_id,
|
||||
status: editForm.status,
|
||||
membership_level_id: editForm.membership_level_id
|
||||
}
|
||||
if (editForm.password) payload.password = editForm.password
|
||||
await api.put(`/admin/users/${editUser.value.id}`, payload)
|
||||
}
|
||||
closeModal()
|
||||
await loadUsers()
|
||||
} catch (e) {
|
||||
error.value = e.message || '保存失败'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function removeUser(user) {
|
||||
if (!confirm(`确定删除账户「${user.username}」？此操作不可恢复。`)) return
|
||||
try {
|
||||
await api.delete(`/admin/users/${user.id}`)
|
||||
await loadUsers()
|
||||
} catch (e) {
|
||||
alert(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
function roleLabel(role) {
|
||||
return role === 'admin' ? '管理员' : '用户'
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return '-'
|
||||
return new Date(d).toLocaleString('zh-CN')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-wide {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-divider {
|
||||
margin: 20px 0 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.membership-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.perm-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--accent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
const apiTarget = env.VITE_API_PROXY_TARGET || 'http://127.0.0.1:8080'
|
||||
const base = env.VITE_BASE_PATH || (mode === 'production' ? '/admin/' : '/')
|
||||
|
||||
return {
|
||||
base,
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
sourcemap: false
|
||||
},
|
||||
server: {
|
||||
port: 5174,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: apiTarget,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user