feat: admin back-office system + AI assistant with action commands
- Admin analytics (recharts charts, overview stats, trend analysis, time range selector) - Admin permissions (AdminRole/AdminUser models, role CRUD, permission catalog) - Admin system config (site/AI/member category tabs, per-key save) - Admin operations (Banner CRUD, push notification send/delete) - Admin user management (table, search, create/edit, ban/delete) - Admin layout (custom top bar with branding + sidebar, admin AI assistant) - Admin login (adminToken localStorage, adminInfo display) - Admin AI assistant (purple '运营助手', context-aware prompts, action commands) - Public AI assistant Phase B (action commands: navigate, setModel, startChat, openSkill, setParameter) - Assistant context mapping + action executor - Skills API fix: tags parsing fallback (JSON.parse → split) - Sandbox crash fix: curScene fallback system prompt - JWT token expiration: access 2h→7d, refresh 7d→30d, admin 8h→7d - i18n: assistant-related translations (zh/en) - PM2 ecosystem config for process management - AI assistant login prompt fix: admin uses getAdminToken(), public uses apiFetch with token refresh
This commit is contained in:
yuzhiran-dev
@@ -0,0 +1,236 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface Role {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
permissions: string[];
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface Permission {
|
||||
key: string;
|
||||
name: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export default function SettingsRolesPage() {
|
||||
const router = useRouter();
|
||||
const [roles, setRoles] = useState<Role[]>([]);
|
||||
const [permissions, setPermissions] = useState<Permission[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [tab, setTab] = useState<'roles' | 'admins'>('roles');
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('adminToken');
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||||
|
||||
const [rolesRes, permsRes] = await Promise.all([
|
||||
fetch(`${base}/api/v1/admin/settings/roles`, { headers }),
|
||||
fetch(`${base}/api/v1/admin/settings/permissions`, { headers }),
|
||||
]);
|
||||
|
||||
if (rolesRes.ok) {
|
||||
const data = await rolesRes.json();
|
||||
setRoles(data.items || []);
|
||||
}
|
||||
if (permsRes.ok) {
|
||||
const data = await permsRes.json();
|
||||
setPermissions(data.items || []);
|
||||
}
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function createRole() {
|
||||
const name = prompt('请输入角色名称：');
|
||||
if (!name) return;
|
||||
const desc = prompt('请输入角色描述：') || '';
|
||||
const token = localStorage.getItem('adminToken');
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/v1/admin/settings/roles`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ name, description: desc }),
|
||||
});
|
||||
loadData();
|
||||
}
|
||||
|
||||
async function deleteRole(id: string) {
|
||||
if (!confirm('确定要删除这个角色吗？')) return;
|
||||
const token = localStorage.getItem('adminToken');
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/v1/admin/settings/roles/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
loadData();
|
||||
}
|
||||
|
||||
const categories = [...new Set(permissions.map(p => p.category))];
|
||||
|
||||
if (loading) {
|
||||
return <div className="p-6">加载中...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">角色权限管理</h1>
|
||||
<p className="text-sm text-muted-foreground">管理系统角色和权限配置</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={createRole}
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
|
||||
>
|
||||
新建角色
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mb-6">
|
||||
<button
|
||||
onClick={() => setTab('roles')}
|
||||
className={`px-4 py-2 rounded-lg ${tab === 'roles' ? 'bg-brand-600 text-white' : 'bg-muted text-muted-foreground'}`}
|
||||
>
|
||||
角色管理
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTab('admins')}
|
||||
className={`px-4 py-2 rounded-lg ${tab === 'admins' ? 'bg-brand-600 text-white' : 'bg-muted text-muted-foreground'}`}
|
||||
>
|
||||
管理员
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{tab === 'roles' ? (
|
||||
<div className="space-y-4">
|
||||
{roles.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">暂无角色</div>
|
||||
) : (
|
||||
roles.map(role => (
|
||||
<div key={role.id} className="bg-card border border-border rounded-xl p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{role.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{role.description || '暂无描述'}</div>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{(role.permissions || []).map((p: string) => (
|
||||
<span key={p} className="text-xs px-2 py-0.5 bg-muted text-muted-foreground rounded">
|
||||
{permissions.find(perm => perm.key === p)?.name || p}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => deleteRole(role.id)}
|
||||
className="text-red-500 hover:text-red-700 text-sm"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<AdminsList />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AdminsList() {
|
||||
const [admins, setAdmins] = useState<any[]>([]);
|
||||
const [roles, setRoles] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('adminToken');
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||||
|
||||
const [adminsRes, rolesRes] = await Promise.all([
|
||||
fetch(`${base}/api/v1/admin/settings/admins`, { headers }),
|
||||
fetch(`${base}/api/v1/admin/settings/roles`, { headers }),
|
||||
]);
|
||||
|
||||
if (adminsRes.ok) {
|
||||
const data = await adminsRes.json();
|
||||
setAdmins(data.items || []);
|
||||
}
|
||||
if (rolesRes.ok) {
|
||||
const data = await rolesRes.json();
|
||||
setRoles(data.items || []);
|
||||
}
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function createAdmin() {
|
||||
const username = prompt('请输入管理员用户名：');
|
||||
if (!username) return;
|
||||
const password = prompt('请输入密码：');
|
||||
if (!password) return;
|
||||
const nickname = prompt('请输入昵称（可选）：') || '';
|
||||
const token = localStorage.getItem('adminToken');
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/v1/admin/settings/admins`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ username, password, nickname }),
|
||||
});
|
||||
loadData();
|
||||
}
|
||||
|
||||
if (loading) return <div>加载中...</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={createAdmin}
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 mb-4"
|
||||
>
|
||||
新建管理员
|
||||
</button>
|
||||
<div className="space-y-3">
|
||||
{admins.map(admin => (
|
||||
<div key={admin.id} className="bg-card border border-border rounded-xl p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{admin.username}</div>
|
||||
<div className="text-sm text-muted-foreground">{admin.nickname || '暂无昵称'} · {admin.role?.name || '未分配角色'}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (!confirm('确定要禁用这个管理员吗？')) return;
|
||||
const token = localStorage.getItem('adminToken');
|
||||
await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/v1/admin/settings/admins/${admin.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ status: 'DISABLED' }),
|
||||
});
|
||||
loadData();
|
||||
}}
|
||||
className="text-red-500 hover:text-red-700 text-sm"
|
||||
>
|
||||
禁用
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user