Phase C2: Admin UI Refactoring
- Restructured admin nav to 5 business domain groups (平台驾驶舱/用户体系/AI能力/业务运营/系统设置) - Added 5 orphan pages to routes: Apps, Automation, Developer, Mcp, Storage - Unified dark theme CSS with shared admin component styles - Fixed Dashboard and Models hardcoded light colors for dark theme
This commit is contained in:
qyyfw committed
1 parent
6583bd2a62
commit
6d12ee9ff9
5 files changed
+1416
-780
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -1,262 +1,297 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Outlet, NavLink, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
|
||||
import './AdminLayout.css';
|
||||
|
||||
interface NavGroup {
|
||||
label: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
path: string;
|
||||
icon: string;
|
||||
label: string;
|
||||
exact?: boolean;
|
||||
}
|
||||
|
||||
const adminNavItems = [
|
||||
|
||||
{ path: '/admin', icon: 'dashboard', label: '平台驾驶舱', exact: true },
|
||||
|
||||
{ path: '/admin/users', icon: 'users', label: '用户管理' },
|
||||
|
||||
{ path: '/admin/models', icon: 'models', label: '大模型库管理' },
|
||||
|
||||
{ path: '/admin/settings', icon: 'settings', label: '网站基础设置' },
|
||||
|
||||
{ path: '/admin/payment', icon: 'payment', label: '支付渠道配置' },
|
||||
|
||||
{ path: '/admin/services', icon: 'services', label: '增值服务管理' },
|
||||
|
||||
{ path: '/admin/membership', icon: 'membership', label: '会员订阅体系' },
|
||||
|
||||
{ path: '/admin/ads', icon: 'ads', label: '广告位管理' },
|
||||
|
||||
{ path: '/admin/market', icon: 'market', label: '应用市场审核' },
|
||||
|
||||
{ path: '/admin/logs', icon: 'logs', label: '日志与风控' },
|
||||
|
||||
|
||||
|
||||
{ path: '/admin/agents', icon: 'agents', label: 'Agent管理' },
|
||||
{ path: '/admin/knowledge', icon: 'knowledge', label: '知识库管理' },
|
||||
{ path: '/admin/storage', icon: 'storage', label: '存储配置' },
|
||||
{ path: '/admin/automation', icon: 'automation', label: '自动化任务' },
|
||||
{ path: '/admin/skills', icon: 'skills', label: '技能管理' },
|
||||
{ path: '/admin/mcp', icon: 'mcp', label: 'MCP Servers' },
|
||||
{ path: '/admin/developer', icon: 'developer', label: '开发者API' },
|
||||
{ path: '/admin/apps', icon: 'apps', label: 'AI应用管理' }
|
||||
const navGroups: NavGroup[] = [
|
||||
{
|
||||
label: '平台驾驶舱',
|
||||
items: [
|
||||
{ path: '/admin', icon: 'dashboard', label: '平台概览', exact: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '用户体系',
|
||||
items: [
|
||||
{ path: '/admin/users', icon: 'users', label: '用户管理' },
|
||||
{ path: '/admin/membership', icon: 'membership', label: '会员体系' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'AI能力',
|
||||
items: [
|
||||
{ path: '/admin/models', icon: 'models', label: '模型控制台' },
|
||||
{ path: '/admin/agents', icon: 'agents', label: 'Agent管理' },
|
||||
{ path: '/admin/skills', icon: 'skills', label: '技能管理' },
|
||||
{ path: '/admin/knowledge', icon: 'knowledge', label: '知识库管理' },
|
||||
{ path: '/admin/mcp', icon: 'mcp', label: 'MCP服务' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '业务运营',
|
||||
items: [
|
||||
{ path: '/admin/market', icon: 'market', label: '应用市场' },
|
||||
{ path: '/admin/services', icon: 'services', label: '增值服务' },
|
||||
{ path: '/admin/payment', icon: 'payment', label: '支付管理' },
|
||||
{ path: '/admin/apps', icon: 'apps', label: 'AI应用' },
|
||||
{ path: '/admin/ads', icon: 'ads', label: '广告管理' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '系统设置',
|
||||
items: [
|
||||
{ path: '/admin/settings', icon: 'settings', label: '站点设置' },
|
||||
{ path: '/admin/logs', icon: 'logs', label: '日志管理' },
|
||||
{ path: '/admin/storage', icon: 'storage', label: '存储管理' },
|
||||
{ path: '/admin/automation', icon: 'automation', label: '自动化任务' },
|
||||
{ path: '/admin/developer', icon: 'developer', label: '开发者工具' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const adminIconPaths: Record<string, JSX.Element> = {
|
||||
|
||||
dashboard: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
|
||||
|
||||
users: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
|
||||
|
||||
models: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>,
|
||||
|
||||
settings: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>,
|
||||
|
||||
payment: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>,
|
||||
|
||||
services: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>,
|
||||
|
||||
membership: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>,
|
||||
|
||||
ads: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>,
|
||||
|
||||
market: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg>,
|
||||
logs: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>,
|
||||
agents: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 2a8 8 0 0 0-8 8c0 5.4 8 12 8 12s8-6.6 8-12a8 8 0 0 0-8-8z"/></svg>,
|
||||
skills: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>,
|
||||
knowledge: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/></svg>,
|
||||
// New icons for orphan pages
|
||||
mcp: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>,
|
||||
apps: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><rect x="16" y="2" width="6" height="6" rx="1"/><rect x="2" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/><rect x="16" y="9" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/></svg>,
|
||||
storage: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>,
|
||||
automation: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
|
||||
developer: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>,
|
||||
};
|
||||
|
||||
logs: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>,
|
||||
|
||||
|
||||
|
||||
skills: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>,
|
||||
automation: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2"/><path d="M12 21v2"/><path d="M4.22 4.22l1.42 1.42"/><path d="M18.36 18.36l1.42 1.42"/><path d="M1 12h2"/><path d="M21 12h2"/><path d="M4.22 19.78l1.42-1.42"/><path d="M18.36 5.64l1.42-1.42"/></svg>,
|
||||
storage: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>,
|
||||
|
||||
developer: (<svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>),};
|
||||
|
||||
// Find current page title based on location
|
||||
function getPageTitle(pathname: string): string {
|
||||
for (const group of navGroups) {
|
||||
for (const item of group.items) {
|
||||
if (item.exact ? pathname === item.path : pathname.startsWith(item.path)) {
|
||||
return item.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// Generate breadcrumbs from pathname
|
||||
function getBreadcrumbs(pathname: string): { path: string; label: string }[] {
|
||||
const crumbs: { path: string; label: string }[] = [];
|
||||
for (const group of navGroups) {
|
||||
for (const item of group.items) {
|
||||
if (item.exact ? pathname === item.path : pathname.startsWith(item.path)) {
|
||||
crumbs.push({ path: item.path, label: item.label });
|
||||
}
|
||||
}
|
||||
}
|
||||
return crumbs.length > 0 ? crumbs : [{ path: '/admin', label: '管理后台' }];
|
||||
}
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const location = useLocation();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
|
||||
new Set(navGroups.map(g => g.label))
|
||||
);
|
||||
|
||||
if (!user || user.role !== 'admin') {
|
||||
|
||||
navigate('/login');
|
||||
|
||||
return null;
|
||||
|
||||
}
|
||||
|
||||
const toggleGroup = (label: string) => {
|
||||
const next = new Set(expandedGroups);
|
||||
if (next.has(label)) next.delete(label);
|
||||
else next.add(label);
|
||||
setExpandedGroups(next);
|
||||
};
|
||||
|
||||
const pageTitle = getPageTitle(location.pathname);
|
||||
const breadcrumbs = getBreadcrumbs(location.pathname);
|
||||
|
||||
// Check if a nav item is active
|
||||
const isItemActive = (item: NavItem) => {
|
||||
return item.exact ? location.pathname === item.path : location.pathname.startsWith(item.path);
|
||||
};
|
||||
|
||||
// Check if any item in group is active
|
||||
const isGroupActive = (group: NavGroup) => group.items.some(item => isItemActive(item));
|
||||
|
||||
return (
|
||||
|
||||
<div className="admin-layout">
|
||||
|
||||
{/* Admin Sidebar */}
|
||||
|
||||
<aside className={`admin-sidebar ${collapsed ? 'collapsed' : ''}`}>
|
||||
|
||||
<div className="admin-sidebar-header">
|
||||
|
||||
<div className="sidebar-logo">
|
||||
|
||||
<svg width="28" height="28" viewBox="0 0 32 32" fill="none">
|
||||
|
||||
<rect width="32" height="32" rx="8" fill="#1A1A2E"/>
|
||||
|
||||
<path d="M8 20V12l4 4 4-4v8" stroke="#6C63FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
||||
|
||||
<path d="M6 22h20" stroke="#6C63FF" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
||||
|
||||
<rect width="32" height="32" rx="8" fill="url(#logoGrad)"/>
|
||||
<defs>
|
||||
<linearGradient id="logoGrad" x1="0" y1="0" x2="32" y2="32">
|
||||
<stop stopColor="#6C63FF"/>
|
||||
<stop offset="1" stopColor="#A78BFA"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
||||
<path d="M6 22h20" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
|
||||
{!collapsed && <span className="sidebar-brand admin-brand">Qihu-AIFlow 管理后台</span>}
|
||||
|
||||
{!collapsed && <span className="sidebar-brand admin-brand">Qihu-AIFlow</span>}
|
||||
</div>
|
||||
|
||||
<button className="collapse-btn" onClick={() => setCollapsed(!collapsed)}>
|
||||
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
|
||||
<line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
|
||||
|
||||
<button className="collapse-btn" onClick={() => setCollapsed(!collapsed)} title={collapsed ? '展开菜单' : '折叠菜单'}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{collapsed
|
||||
? <><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></>
|
||||
: <><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></>
|
||||
}
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav className="admin-nav">
|
||||
{navGroups.map(group => {
|
||||
if (collapsed) {
|
||||
// Collapsed mode: show just icons
|
||||
return (
|
||||
<div key={group.label} className="nav-group">
|
||||
{group.items.map(item => (
|
||||
<NavLink
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
end={item.exact}
|
||||
className={({ isActive }) => `admin-nav-item ${isActive ? 'active' : ''}`}
|
||||
title={item.label}
|
||||
>
|
||||
<span className="nav-icon">{adminIconPaths[item.icon]}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{adminNavItems.map(item => (
|
||||
|
||||
<NavLink
|
||||
|
||||
key={item.path}
|
||||
|
||||
to={item.path}
|
||||
|
||||
end={item.exact}
|
||||
|
||||
className={({ isActive }) => `admin-nav-item ${isActive ? 'active' : ''}`}
|
||||
|
||||
>
|
||||
|
||||
<span className="nav-icon">{adminIconPaths[item.icon]}</span>
|
||||
|
||||
{!collapsed && <span className="nav-label">{item.label}</span>}
|
||||
|
||||
</NavLink>
|
||||
|
||||
))}
|
||||
|
||||
return (
|
||||
<div key={group.label} className={`nav-group ${isGroupActive(group) ? 'active-group' : ''}`}>
|
||||
<div
|
||||
className="nav-group-header"
|
||||
onClick={() => toggleGroup(group.label)}
|
||||
>
|
||||
<span className="nav-group-label">{group.label}</span>
|
||||
<svg
|
||||
width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||||
className={`nav-group-chevron ${expandedGroups.has(group.label) ? 'open' : ''}`}
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className={`nav-group-items ${expandedGroups.has(group.label) ? '' : 'collapsed'}`}
|
||||
>
|
||||
{group.items.map(item => (
|
||||
<NavLink
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
end={item.exact}
|
||||
className={({ isActive }) => `admin-nav-item ${isActive ? 'active' : ''}`}
|
||||
>
|
||||
<span className="nav-icon">{adminIconPaths[item.icon]}</span>
|
||||
<span className="nav-label">{item.label}</span>
|
||||
{isItemActive(item) && <span className="nav-active-dot" />}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
{/* Sidebar bottom area */}
|
||||
<div className="admin-sidebar-footer">
|
||||
|
||||
<NavLink to="/chat" className="admin-nav-item">
|
||||
|
||||
{/* Links row */}
|
||||
<NavLink to="/" className="admin-nav-item">
|
||||
<span className="nav-icon">
|
||||
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
</span>
|
||||
|
||||
{!collapsed && <span className="nav-label">返回前台</span>}
|
||||
|
||||
</NavLink>
|
||||
|
||||
<button className="admin-nav-item logout-btn" onClick={() => { logout(); navigate('/login'); }}>
|
||||
|
||||
<span className="nav-icon">
|
||||
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
{!collapsed && <span className="nav-label">退出登录</span>}
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
|
||||
<div className="admin-version-info">
|
||||
|
||||
Qihu-AIFlow v2.0.0
|
||||
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
{/* Admin Main Content */}
|
||||
|
||||
<main className="admin-main">
|
||||
|
||||
<header className="admin-topbar">
|
||||
|
||||
<div className="admin-topbar-left">
|
||||
|
||||
<span className="admin-welcome">欢迎，{user.username}</span>
|
||||
|
||||
{/* Page title */}
|
||||
<h1 className="admin-page-title">{pageTitle}</h1>
|
||||
{/* Breadcrumb */}
|
||||
<div className="admin-breadcrumb">
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
<span key={crumb.path}>
|
||||
{i > 0 && <span className="breadcrumb-sep">/</span>}
|
||||
<span
|
||||
className={`breadcrumb-item ${i === breadcrumbs.length - 1 ? 'current' : ''}`}
|
||||
onClick={() => i < breadcrumbs.length - 1 && navigate(crumb.path)}
|
||||
style={{ cursor: i < breadcrumbs.length - 1 ? 'pointer' : 'default' }}
|
||||
>
|
||||
{crumb.label}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-topbar-right">
|
||||
|
||||
<span className="admin-welcome">欢迎，{user.username}</span>
|
||||
<a href="#/chat" className="admin-topbar-action">
|
||||
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
|
||||
<span>返回前台</span>
|
||||
|
||||
</a>
|
||||
|
||||
<div className="admin-user-tag">
|
||||
|
||||
<div className="user-avatar-sm admin-avatar">
|
||||
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
|
||||
</div>
|
||||
|
||||
<span>{user.username}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div className="admin-content">
|
||||
|
||||
<Outlet />
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default AdminLayout;
|
||||
|
||||
Reference in new issue
Block a user