feat(observability): Phase2.3 媒体/LLM 可观测面板(后端归因聚合+前端页) 并修复 token_usage_logs trace_id 写入(chat_service/im_llm) [v2026.07.19.5]
CI / gate (push) Has been cancelled
CI / gate (push) Has been cancelled
This commit is contained in:
QihuAI Design committed
1 parent
491f31cead
commit
2969544d54
9 files changed
+3357
-3079
No files matched your search
+177
-175
@@ -1,175 +1,177 @@
|
||||
import React, { useState, useEffect, Suspense } from 'react';
|
||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||
import type { User } from '@/types';
|
||||
import { AuthContext, AuthContextType } from '@/contexts/AuthContext';
|
||||
import { authAPI } from '@/api';
|
||||
|
||||
// Layouts（保留为即时加载，构成应用外壳）
|
||||
import FrontLayout from '@/components/layout/FrontLayout';
|
||||
import AdminLayout from '@/components/layout/AdminLayout';
|
||||
|
||||
// 路由级代码分割：每个页面独立打包成 chunk，首屏只加载外壳与公共依赖，
|
||||
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
|
||||
const LandingPage = React.lazy(() => import('@/pages/front/LandingPage'));
|
||||
const LoginPage = React.lazy(() => import('@/pages/front/LoginPage'));
|
||||
const ChatPage = React.lazy(() => import('@/pages/front/ChatPage'));
|
||||
const KnowledgePage = React.lazy(() => import('@/pages/front/KnowledgePage'));
|
||||
const MarketPage = React.lazy(() => import('@/pages/front/MarketPage'));
|
||||
const TokenDashboardPage = React.lazy(() => import('@/pages/front/TokenDashboardPage'));
|
||||
const PricingPage = React.lazy(() => import('@/pages/front/PricingPage'));
|
||||
const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage'));
|
||||
const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage'));
|
||||
const AssetsPage = React.lazy(() => import('@/pages/front/AssetsPage'));
|
||||
const NovelPreviewPage = React.lazy(() => import('@/pages/front/NovelPreviewPage'));
|
||||
const EvolutionDashboard = React.lazy(() => import('@/pages/front/EvolutionDashboard'));
|
||||
|
||||
const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard'));
|
||||
const AdminUsers = React.lazy(() => import('@/pages/admin/Users'));
|
||||
const AdminModels = React.lazy(() => import('@/pages/admin/Models'));
|
||||
const AdminSiteSettings = React.lazy(() => import('@/pages/admin/SiteSettings'));
|
||||
const AdminSmsConfig = React.lazy(() => import('@/pages/admin/SmsConfig'));
|
||||
const AdminPayment = React.lazy(() => import('@/pages/admin/Payment'));
|
||||
const AdminServices = React.lazy(() => import('@/pages/admin/Services'));
|
||||
const AdminMembership = React.lazy(() => import('@/pages/admin/Membership'));
|
||||
const AdminAds = React.lazy(() => import('@/pages/admin/Ads'));
|
||||
const AdminMarket = React.lazy(() => import('@/pages/admin/Market'));
|
||||
const AdminLogs = React.lazy(() => import('@/pages/admin/Logs'));
|
||||
const AdminSkills = React.lazy(() => import('@/pages/admin/Skills'));
|
||||
const AdminAgents = React.lazy(() => import('@/pages/admin/Agents'));
|
||||
const AdminCodeExec = React.lazy(() => import('@/pages/admin/CodeExec'));
|
||||
const DistributionBuilder = React.lazy(() => import('@/pages/admin/DistributionBuilder'));
|
||||
const ImBots = React.lazy(() => import('@/pages/admin/ImBots'));
|
||||
const PrivacySettings = React.lazy(() => import('@/pages/admin/PrivacySettings'));
|
||||
const Promotion = React.lazy(() => import('@/pages/admin/Promotion'));
|
||||
const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
|
||||
const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
|
||||
const Billing = React.lazy(() => import('@/pages/admin/Billing'));
|
||||
const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
|
||||
const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
|
||||
const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
|
||||
const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
|
||||
const AdminDeveloper = React.lazy(() => import('@/pages/admin/Developer'));
|
||||
const AdminDeveloperTools = React.lazy(() => import('@/pages/admin/DeveloperTools'));
|
||||
const AdminAutomation = React.lazy(() => import('@/pages/admin/Automation'));
|
||||
const AdminMcp = React.lazy(() => import('@/pages/admin/Mcp'));
|
||||
const AdminApps = React.lazy(() => import('@/pages/admin/Apps'));
|
||||
const AssetCenter = React.lazy(() => import('@/pages/admin/AssetCenter'));
|
||||
const UserPortal = React.lazy(() => import('@/pages/UserPortal'));
|
||||
const WechatBot = React.lazy(() => import('@/pages/front/WechatBot'));
|
||||
const ImBotHub = React.lazy(() => import('@/pages/front/ImBotHub'));
|
||||
const AppServices = React.lazy(() => import('@/pages/front/AppServices'));
|
||||
|
||||
const pageFallback = <div className="loading-screen">加载中...</div>;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// 初始化：从localStorage恢复登录状态
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('aiflow_token');
|
||||
const cachedUser = localStorage.getItem('aiflow_user');
|
||||
if (token && cachedUser) {
|
||||
try {
|
||||
setUser(JSON.parse(cachedUser));
|
||||
} catch {
|
||||
localStorage.removeItem('aiflow_token');
|
||||
localStorage.removeItem('aiflow_user');
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const login = (u: User) => {
|
||||
setUser(u);
|
||||
localStorage.setItem('aiflow_user', JSON.stringify(u));
|
||||
};
|
||||
const logout = () => {
|
||||
setUser(null);
|
||||
localStorage.removeItem('aiflow_token');
|
||||
localStorage.removeItem('aiflow_user');
|
||||
};
|
||||
const isAdmin = user?.role === 'admin';
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading-screen">加载中...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, login, logout, isAdmin }}>
|
||||
<Suspense fallback={pageFallback}>
|
||||
<Routes>
|
||||
{/* Login */}
|
||||
<Route path="/login" element={
|
||||
user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LoginPage />
|
||||
} />
|
||||
|
||||
{/* Root - Landing for guests, redirect for authenticated users */}
|
||||
<Route path="/" element={
|
||||
user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LandingPage />
|
||||
} />
|
||||
|
||||
{/* Front Routes (authenticated only) */}
|
||||
<Route path="/" element={<FrontLayout />}>
|
||||
<Route path="chat" element={<ChatPage />} />
|
||||
<Route path="chat/:id" element={<ChatPage />} />
|
||||
<Route path="knowledge" element={<KnowledgePage />} />
|
||||
<Route path="market" element={<MarketPage />} />
|
||||
<Route path="token" element={<TokenDashboardPage />} />
|
||||
<Route path="pricing" element={<PricingPage />} />
|
||||
<Route path="profile" element={<ProfilePage />} />
|
||||
<Route path="notifications" element={<NotificationPage />} />
|
||||
<Route path="assets" element={<AssetsPage />} />
|
||||
<Route path="assets/novel/:id" element={<NovelPreviewPage />} />
|
||||
<Route path="evolution" element={<EvolutionDashboard />} />
|
||||
<Route path="wechat-bot" element={<WechatBot />} />
|
||||
<Route path="im-bots" element={<ImBotHub />} />
|
||||
<Route path="app-services" element={<AppServices />} />
|
||||
</Route>
|
||||
|
||||
{/* Admin Routes */}
|
||||
<Route path="/admin" element={<AdminLayout />}>
|
||||
<Route index element={<AdminDashboard />} />
|
||||
<Route path="users" element={<AdminUsers />} />
|
||||
<Route path="models" element={<AdminModels />} />
|
||||
<Route path="settings" element={<AdminSiteSettings />} />
|
||||
<Route path="sms" element={<AdminSmsConfig />} />
|
||||
<Route path="payment" element={<AdminPayment />} />
|
||||
<Route path="services" element={<AdminServices />} />
|
||||
<Route path="membership" element={<AdminMembership />} />
|
||||
<Route path="ads" element={<AdminAds />} />
|
||||
<Route path="market" element={<AdminMarket />} />
|
||||
<Route path="logs" element={<AdminLogs />} />
|
||||
<Route path="skills" element={<AdminSkills />} />
|
||||
<Route path="agents" element={<AdminAgents />} />
|
||||
<Route path="code-exec" element={<AdminCodeExec />} />
|
||||
<Route path="distributions" element={<DistributionBuilder />} />
|
||||
<Route path="im-bots" element={<ImBots />} />
|
||||
<Route path="privacy" element={<PrivacySettings />} />
|
||||
<Route path="promotion" element={<Promotion />} />
|
||||
<Route path="achievement" element={<Achievement />} />
|
||||
<Route path="tenant" element={<Tenant />} />
|
||||
<Route path="billing" element={<Billing />} />
|
||||
<Route path="analytics" element={<Analytics />} />
|
||||
<Route path="knowledge" element={<AdminKnowledge />} />
|
||||
<Route path="workflow" element={<AdminWorkflow />} />
|
||||
<Route path="storage" element={<AdminStorage />} />
|
||||
<Route path="developer" element={<AdminDeveloper />} />
|
||||
<Route path="developer-tools" element={<AdminDeveloperTools />} />
|
||||
<Route path="automation" element={<AdminAutomation />} />
|
||||
<Route path="mcp" element={<AdminMcp />} />
|
||||
<Route path="apps" element={<AdminApps />} />
|
||||
<Route path="assets" element={<AssetCenter />} />
|
||||
<Route path="portal" element={<UserPortal />} />
|
||||
</Route>
|
||||
|
||||
{/* 公开前台首页：不受登录态拦截，供后台「访问前台」直接打开 */}
|
||||
<Route path="/home" element={<LandingPage />} />
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
import React, { useState, useEffect, Suspense } from 'react';
|
||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||
import type { User } from '@/types';
|
||||
import { AuthContext, AuthContextType } from '@/contexts/AuthContext';
|
||||
import { authAPI } from '@/api';
|
||||
|
||||
// Layouts（保留为即时加载，构成应用外壳）
|
||||
import FrontLayout from '@/components/layout/FrontLayout';
|
||||
import AdminLayout from '@/components/layout/AdminLayout';
|
||||
|
||||
// 路由级代码分割：每个页面独立打包成 chunk，首屏只加载外壳与公共依赖，
|
||||
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
|
||||
const LandingPage = React.lazy(() => import('@/pages/front/LandingPage'));
|
||||
const LoginPage = React.lazy(() => import('@/pages/front/LoginPage'));
|
||||
const ChatPage = React.lazy(() => import('@/pages/front/ChatPage'));
|
||||
const KnowledgePage = React.lazy(() => import('@/pages/front/KnowledgePage'));
|
||||
const MarketPage = React.lazy(() => import('@/pages/front/MarketPage'));
|
||||
const TokenDashboardPage = React.lazy(() => import('@/pages/front/TokenDashboardPage'));
|
||||
const PricingPage = React.lazy(() => import('@/pages/front/PricingPage'));
|
||||
const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage'));
|
||||
const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage'));
|
||||
const AssetsPage = React.lazy(() => import('@/pages/front/AssetsPage'));
|
||||
const NovelPreviewPage = React.lazy(() => import('@/pages/front/NovelPreviewPage'));
|
||||
const EvolutionDashboard = React.lazy(() => import('@/pages/front/EvolutionDashboard'));
|
||||
|
||||
const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard'));
|
||||
const AdminUsers = React.lazy(() => import('@/pages/admin/Users'));
|
||||
const AdminModels = React.lazy(() => import('@/pages/admin/Models'));
|
||||
const AdminSiteSettings = React.lazy(() => import('@/pages/admin/SiteSettings'));
|
||||
const AdminSmsConfig = React.lazy(() => import('@/pages/admin/SmsConfig'));
|
||||
const AdminPayment = React.lazy(() => import('@/pages/admin/Payment'));
|
||||
const AdminServices = React.lazy(() => import('@/pages/admin/Services'));
|
||||
const AdminMembership = React.lazy(() => import('@/pages/admin/Membership'));
|
||||
const AdminAds = React.lazy(() => import('@/pages/admin/Ads'));
|
||||
const AdminMarket = React.lazy(() => import('@/pages/admin/Market'));
|
||||
const AdminLogs = React.lazy(() => import('@/pages/admin/Logs'));
|
||||
const AdminSkills = React.lazy(() => import('@/pages/admin/Skills'));
|
||||
const AdminAgents = React.lazy(() => import('@/pages/admin/Agents'));
|
||||
const AdminCodeExec = React.lazy(() => import('@/pages/admin/CodeExec'));
|
||||
const DistributionBuilder = React.lazy(() => import('@/pages/admin/DistributionBuilder'));
|
||||
const ImBots = React.lazy(() => import('@/pages/admin/ImBots'));
|
||||
const PrivacySettings = React.lazy(() => import('@/pages/admin/PrivacySettings'));
|
||||
const Promotion = React.lazy(() => import('@/pages/admin/Promotion'));
|
||||
const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
|
||||
const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
|
||||
const Billing = React.lazy(() => import('@/pages/admin/Billing'));
|
||||
const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
|
||||
const Observability = React.lazy(() => import('@/pages/admin/Observability'));
|
||||
const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
|
||||
const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
|
||||
const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
|
||||
const AdminDeveloper = React.lazy(() => import('@/pages/admin/Developer'));
|
||||
const AdminDeveloperTools = React.lazy(() => import('@/pages/admin/DeveloperTools'));
|
||||
const AdminAutomation = React.lazy(() => import('@/pages/admin/Automation'));
|
||||
const AdminMcp = React.lazy(() => import('@/pages/admin/Mcp'));
|
||||
const AdminApps = React.lazy(() => import('@/pages/admin/Apps'));
|
||||
const AssetCenter = React.lazy(() => import('@/pages/admin/AssetCenter'));
|
||||
const UserPortal = React.lazy(() => import('@/pages/UserPortal'));
|
||||
const WechatBot = React.lazy(() => import('@/pages/front/WechatBot'));
|
||||
const ImBotHub = React.lazy(() => import('@/pages/front/ImBotHub'));
|
||||
const AppServices = React.lazy(() => import('@/pages/front/AppServices'));
|
||||
|
||||
const pageFallback = <div className="loading-screen">加载中...</div>;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// 初始化：从localStorage恢复登录状态
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('aiflow_token');
|
||||
const cachedUser = localStorage.getItem('aiflow_user');
|
||||
if (token && cachedUser) {
|
||||
try {
|
||||
setUser(JSON.parse(cachedUser));
|
||||
} catch {
|
||||
localStorage.removeItem('aiflow_token');
|
||||
localStorage.removeItem('aiflow_user');
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const login = (u: User) => {
|
||||
setUser(u);
|
||||
localStorage.setItem('aiflow_user', JSON.stringify(u));
|
||||
};
|
||||
const logout = () => {
|
||||
setUser(null);
|
||||
localStorage.removeItem('aiflow_token');
|
||||
localStorage.removeItem('aiflow_user');
|
||||
};
|
||||
const isAdmin = user?.role === 'admin';
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading-screen">加载中...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, login, logout, isAdmin }}>
|
||||
<Suspense fallback={pageFallback}>
|
||||
<Routes>
|
||||
{/* Login */}
|
||||
<Route path="/login" element={
|
||||
user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LoginPage />
|
||||
} />
|
||||
|
||||
{/* Root - Landing for guests, redirect for authenticated users */}
|
||||
<Route path="/" element={
|
||||
user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LandingPage />
|
||||
} />
|
||||
|
||||
{/* Front Routes (authenticated only) */}
|
||||
<Route path="/" element={<FrontLayout />}>
|
||||
<Route path="chat" element={<ChatPage />} />
|
||||
<Route path="chat/:id" element={<ChatPage />} />
|
||||
<Route path="knowledge" element={<KnowledgePage />} />
|
||||
<Route path="market" element={<MarketPage />} />
|
||||
<Route path="token" element={<TokenDashboardPage />} />
|
||||
<Route path="pricing" element={<PricingPage />} />
|
||||
<Route path="profile" element={<ProfilePage />} />
|
||||
<Route path="notifications" element={<NotificationPage />} />
|
||||
<Route path="assets" element={<AssetsPage />} />
|
||||
<Route path="assets/novel/:id" element={<NovelPreviewPage />} />
|
||||
<Route path="evolution" element={<EvolutionDashboard />} />
|
||||
<Route path="wechat-bot" element={<WechatBot />} />
|
||||
<Route path="im-bots" element={<ImBotHub />} />
|
||||
<Route path="app-services" element={<AppServices />} />
|
||||
</Route>
|
||||
|
||||
{/* Admin Routes */}
|
||||
<Route path="/admin" element={<AdminLayout />}>
|
||||
<Route index element={<AdminDashboard />} />
|
||||
<Route path="users" element={<AdminUsers />} />
|
||||
<Route path="models" element={<AdminModels />} />
|
||||
<Route path="settings" element={<AdminSiteSettings />} />
|
||||
<Route path="sms" element={<AdminSmsConfig />} />
|
||||
<Route path="payment" element={<AdminPayment />} />
|
||||
<Route path="services" element={<AdminServices />} />
|
||||
<Route path="membership" element={<AdminMembership />} />
|
||||
<Route path="ads" element={<AdminAds />} />
|
||||
<Route path="market" element={<AdminMarket />} />
|
||||
<Route path="logs" element={<AdminLogs />} />
|
||||
<Route path="skills" element={<AdminSkills />} />
|
||||
<Route path="agents" element={<AdminAgents />} />
|
||||
<Route path="code-exec" element={<AdminCodeExec />} />
|
||||
<Route path="distributions" element={<DistributionBuilder />} />
|
||||
<Route path="im-bots" element={<ImBots />} />
|
||||
<Route path="privacy" element={<PrivacySettings />} />
|
||||
<Route path="promotion" element={<Promotion />} />
|
||||
<Route path="achievement" element={<Achievement />} />
|
||||
<Route path="tenant" element={<Tenant />} />
|
||||
<Route path="billing" element={<Billing />} />
|
||||
<Route path="analytics" element={<Analytics />} />
|
||||
<Route path="observability" element={<Observability />} />
|
||||
<Route path="knowledge" element={<AdminKnowledge />} />
|
||||
<Route path="workflow" element={<AdminWorkflow />} />
|
||||
<Route path="storage" element={<AdminStorage />} />
|
||||
<Route path="developer" element={<AdminDeveloper />} />
|
||||
<Route path="developer-tools" element={<AdminDeveloperTools />} />
|
||||
<Route path="automation" element={<AdminAutomation />} />
|
||||
<Route path="mcp" element={<AdminMcp />} />
|
||||
<Route path="apps" element={<AdminApps />} />
|
||||
<Route path="assets" element={<AssetCenter />} />
|
||||
<Route path="portal" element={<UserPortal />} />
|
||||
</Route>
|
||||
|
||||
{/* 公开前台首页：不受登录态拦截，供后台「访问前台」直接打开 */}
|
||||
<Route path="/home" element={<LandingPage />} />
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
+1987
-1986
File diff suppressed because it is too large.
Load diff
@@ -1,435 +1,437 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { Outlet, NavLink, useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
|
||||
import './AdminLayout.css';
|
||||
|
||||
|
||||
|
||||
interface NavItem {
|
||||
|
||||
path: string;
|
||||
|
||||
icon: string;
|
||||
|
||||
label: string;
|
||||
|
||||
exact?: boolean;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface NavGroup {
|
||||
|
||||
title: string;
|
||||
|
||||
icon: string;
|
||||
|
||||
items: NavItem[];
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const adminNavGroups: NavGroup[] = [
|
||||
|
||||
{
|
||||
title: '数据驾驶舱',
|
||||
icon: 'dashboard',
|
||||
items: [
|
||||
{ path: '/admin', icon: 'dashboard', label: '平台驾驶舱', exact: true },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: 'AI技能中心',
|
||||
icon: 'agents',
|
||||
items: [
|
||||
{ path: '/admin/models', icon: 'models', label: '大模型库' },
|
||||
{ path: '/admin/agents', icon: 'agents', label: 'Agent 管理' },
|
||||
{ path: '/admin/skills', icon: 'skills', label: 'Skills技能管理' },
|
||||
{ path: '/admin/mcp', icon: 'mcp', label: 'MCP Client 管理' },
|
||||
{ path: '/admin/market', icon: 'market', label: 'AI 技能审核' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '平台运营',
|
||||
icon: 'users',
|
||||
items: [
|
||||
{ path: '/admin/users', icon: 'users', label: '用户管理' },
|
||||
{ path: '/admin/membership', icon: 'membership', label: '会员管理' },
|
||||
{ path: '/admin/promotion', icon: 'promotion', label: '推广系统' },
|
||||
{ path: '/admin/achievement', icon: 'achievement', label: '成就系统' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '商业变现',
|
||||
icon: 'billing',
|
||||
items: [
|
||||
{ path: '/admin/billing', icon: 'billing', label: '计费与支付' },
|
||||
{ path: '/admin/payment', icon: 'payment', label: '支付渠道' },
|
||||
{ path: '/admin/services', icon: 'services', label: '增值服务' },
|
||||
{ path: '/admin/ads', icon: 'ads', label: '广告管理' },
|
||||
{ path: '/admin/assets', icon: 'assets', label: '资产管理' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '系统管理',
|
||||
icon: 'settings',
|
||||
items: [
|
||||
{ path: '/admin/settings', icon: 'settings', label: '网站设置' },
|
||||
{ path: '/admin/logs', icon: 'logs', label: '日志与风控' },
|
||||
{ path: '/admin/knowledge', icon: 'knowledge', label: '知识库管理' },
|
||||
{ path: '/admin/sms', icon: 'sms', label: '短信配置' },
|
||||
{ path: '/admin/storage', icon: 'storage', label: '存储配置' },
|
||||
{ path: '/admin/automation', icon: 'automation', label: '自动化任务' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '待处理',
|
||||
icon: 'developer',
|
||||
items: [
|
||||
{ path: '/admin/analytics', icon: 'analytics', label: '数据分析' },
|
||||
{ path: '/admin/workflow', icon: 'workflow', label: '工作流编排' },
|
||||
{ path: '/admin/apps', icon: 'apps', label: 'AI 应用管理' },
|
||||
{ path: '/admin/code-exec', icon: 'code', label: '代码执行沙箱' },
|
||||
{ path: '/admin/tenant', icon: 'tenant', label: '多租户管理' },
|
||||
{ path: '/admin/im-bots', icon: 'imbot', label: 'IM 机器人' },
|
||||
{ path: '/admin/privacy', icon: 'privacy', label: '隐私与本地代理' },
|
||||
{ path: '/admin/distributions', icon: 'distro', label: '发行版构建' },
|
||||
{ path: '/admin/developer', icon: 'developer', label: '开发者 API' },
|
||||
{ path: '/admin/developer-tools', icon: 'devtools', label: '开发者工具' },
|
||||
],
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
const adminIconPaths: Record<string, JSX.Element> = {
|
||||
|
||||
dashboard: <svg width="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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>,
|
||||
|
||||
agents: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>,
|
||||
|
||||
skills: <svg width="18" height="18" 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>,
|
||||
|
||||
code: <svg width="18" height="18" 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>,
|
||||
|
||||
distro: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
|
||||
|
||||
privacy: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1"/></svg>,
|
||||
|
||||
promotion: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="7"/><path d="M8.5 12.5L6 21l6-2 6 2-2.5-8.5"/><circle cx="12" cy="8" r="3"/></svg>,
|
||||
|
||||
achievement: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 7.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>,
|
||||
|
||||
tenant: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-6h6v6"/><path d="M3 13h18"/></svg>,
|
||||
|
||||
billing: <svg width="18" height="18" 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"/><line x1="6" y1="15" x2="10" y2="15"/></svg>,
|
||||
|
||||
analytics: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>,
|
||||
|
||||
imbot: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>,
|
||||
|
||||
storage: <svg width="18" height="18" 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="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>,
|
||||
|
||||
developer: <svg width="18" height="18" 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>,
|
||||
|
||||
devtools: <svg width="18" height="18" 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="18" height="18" 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"/></svg>,
|
||||
|
||||
workflow: <svg width="18" height="18" 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"/><line x1="10" y1="6" x2="14" y2="6"/><line x1="10" y1="17" x2="14" y2="17"/></svg>,
|
||||
|
||||
mcp: <svg width="18" height="18" 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>,
|
||||
|
||||
apps: <svg width="18" height="18" 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>,
|
||||
|
||||
assets: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
|
||||
|
||||
chevron: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>,
|
||||
|
||||
sms: <svg width="18" height="18" 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>,
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
// 后台必须登录且为管理员
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('aiflow_token');
|
||||
if (!token || !user || user.role !== 'admin') {
|
||||
logout();
|
||||
navigate('/login', { replace: true });
|
||||
}
|
||||
}, [user, logout, navigate]);
|
||||
|
||||
const navCrumb = (() => {
|
||||
|
||||
for (const g of adminNavGroups) {
|
||||
|
||||
for (const it of g.items) {
|
||||
|
||||
const match = it.exact
|
||||
|
||||
? location.pathname === it.path
|
||||
|
||||
: location.pathname === it.path || location.pathname.startsWith(it.path + '/');
|
||||
|
||||
if (match) return { group: g.title, label: it.label };
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return { group: '', label: '' };
|
||||
|
||||
})();
|
||||
|
||||
const navGroup = navCrumb.group;
|
||||
|
||||
const navLabel = navCrumb.label;
|
||||
|
||||
|
||||
|
||||
// 默认展开全部功能板块，确保后台所有模块在 UI 中可见（DESIGN.md: 侧栏分类清晰）
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(() => {
|
||||
return new Set(adminNavGroups.map((g) => g.title));
|
||||
});
|
||||
|
||||
|
||||
|
||||
const toggleGroup = (title: string) => {
|
||||
|
||||
setExpandedGroups(prev => {
|
||||
|
||||
const next = new Set(prev);
|
||||
|
||||
if (next.has(title)) next.delete(title);
|
||||
|
||||
else next.add(title);
|
||||
|
||||
return next;
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleLogout = () => {
|
||||
|
||||
logout();
|
||||
|
||||
navigate('/');
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleVisitFrontend = () => {
|
||||
|
||||
const url = window.location.origin + '/chat';
|
||||
|
||||
window.open(url, '_blank');
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="admin-layout">
|
||||
|
||||
<aside className="admin-sidebar">
|
||||
|
||||
<div className="admin-sidebar-header">
|
||||
|
||||
<h1 className="admin-logo">七虎AI</h1>
|
||||
|
||||
<span className="admin-subtitle">管理控制台</span>
|
||||
|
||||
</div>
|
||||
|
||||
<button onClick={handleVisitFrontend} className="admin-frontend-link">
|
||||
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
|
||||
<span>访问前台</span>
|
||||
|
||||
</button>
|
||||
|
||||
<nav className="sidebar-nav">
|
||||
|
||||
{adminNavGroups.map((group) => {
|
||||
|
||||
const isExpanded = expandedGroups.has(group.title);
|
||||
|
||||
const hasActiveChild = group.items.some(item =>
|
||||
|
||||
item.exact ? location.pathname === item.path : location.pathname.startsWith(item.path)
|
||||
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
<div key={group.title} className={`nav-group ${hasActiveChild ? 'nav-group-active' : ''}`}>
|
||||
|
||||
<div
|
||||
|
||||
className={`nav-group-header ${isExpanded ? 'expanded' : ''}`}
|
||||
|
||||
onClick={() => toggleGroup(group.title)}
|
||||
|
||||
>
|
||||
|
||||
<span className="nav-group-chevron-wrap">
|
||||
|
||||
<span className={`nav-group-chevron ${isExpanded ? 'chevron-expanded' : ''}`}>
|
||||
|
||||
{adminIconPaths.chevron}
|
||||
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
<span className="nav-group-title">{group.title}</span>
|
||||
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
|
||||
<div className="nav-group-items">
|
||||
|
||||
{group.items.map((item) => (
|
||||
|
||||
<NavLink
|
||||
|
||||
key={item.path}
|
||||
|
||||
to={item.path}
|
||||
|
||||
end={item.exact}
|
||||
|
||||
className={({ isActive }) =>
|
||||
|
||||
`nav-item ${isActive ? 'nav-item-active' : ''}`
|
||||
|
||||
}
|
||||
|
||||
>
|
||||
|
||||
<span className="nav-item-icon">{adminIconPaths[item.icon]}</span>
|
||||
|
||||
<span className="nav-item-label">{item.label}</span>
|
||||
|
||||
</NavLink>
|
||||
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
})}
|
||||
|
||||
</nav>
|
||||
|
||||
<div className="admin-sidebar-footer">
|
||||
|
||||
<div className="admin-user-info">
|
||||
|
||||
<div className="admin-user-avatar">{user?.username?.[0]?.toUpperCase() || 'A'}</div>
|
||||
|
||||
<div className="admin-user-detail">
|
||||
|
||||
<div className="admin-user-name">{user?.username || 'admin'}</div>
|
||||
|
||||
<button className="admin-logout-btn" onClick={handleLogout}>退出登录</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<main className="admin-content">
|
||||
|
||||
<header className="admin-topbar">
|
||||
|
||||
<nav className="admin-breadcrumb" aria-label="breadcrumb">
|
||||
|
||||
<span className="crumb-root">管理控制台</span>
|
||||
|
||||
{navGroup && (<><span className="crumb-sep">/</span><span className="crumb-group">{navGroup}</span></>)}
|
||||
|
||||
{navLabel && (<><span className="crumb-sep">/</span><span className="crumb-current">{navLabel}</span></>)}
|
||||
|
||||
</nav>
|
||||
|
||||
<div className="admin-topbar-user">
|
||||
|
||||
<div className="admin-user-avatar sm">{user?.username?.[0]?.toUpperCase() || 'A'}</div>
|
||||
|
||||
<span className="admin-topbar-username">{user?.username || 'admin'}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<Outlet />
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default AdminLayout;
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { Outlet, NavLink, useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
|
||||
import './AdminLayout.css';
|
||||
|
||||
|
||||
|
||||
interface NavItem {
|
||||
|
||||
path: string;
|
||||
|
||||
icon: string;
|
||||
|
||||
label: string;
|
||||
|
||||
exact?: boolean;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface NavGroup {
|
||||
|
||||
title: string;
|
||||
|
||||
icon: string;
|
||||
|
||||
items: NavItem[];
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const adminNavGroups: NavGroup[] = [
|
||||
|
||||
{
|
||||
title: '数据驾驶舱',
|
||||
icon: 'dashboard',
|
||||
items: [
|
||||
{ path: '/admin', icon: 'dashboard', label: '平台驾驶舱', exact: true },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: 'AI技能中心',
|
||||
icon: 'agents',
|
||||
items: [
|
||||
{ path: '/admin/models', icon: 'models', label: '大模型库' },
|
||||
{ path: '/admin/agents', icon: 'agents', label: 'Agent 管理' },
|
||||
{ path: '/admin/skills', icon: 'skills', label: 'Skills技能管理' },
|
||||
{ path: '/admin/mcp', icon: 'mcp', label: 'MCP Client 管理' },
|
||||
{ path: '/admin/market', icon: 'market', label: 'AI 技能审核' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '平台运营',
|
||||
icon: 'users',
|
||||
items: [
|
||||
{ path: '/admin/users', icon: 'users', label: '用户管理' },
|
||||
{ path: '/admin/membership', icon: 'membership', label: '会员管理' },
|
||||
{ path: '/admin/promotion', icon: 'promotion', label: '推广系统' },
|
||||
{ path: '/admin/achievement', icon: 'achievement', label: '成就系统' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '商业变现',
|
||||
icon: 'billing',
|
||||
items: [
|
||||
{ path: '/admin/billing', icon: 'billing', label: '计费与支付' },
|
||||
{ path: '/admin/payment', icon: 'payment', label: '支付渠道' },
|
||||
{ path: '/admin/services', icon: 'services', label: '增值服务' },
|
||||
{ path: '/admin/ads', icon: 'ads', label: '广告管理' },
|
||||
{ path: '/admin/assets', icon: 'assets', label: '资产管理' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '系统管理',
|
||||
icon: 'settings',
|
||||
items: [
|
||||
{ path: '/admin/settings', icon: 'settings', label: '网站设置' },
|
||||
{ path: '/admin/logs', icon: 'logs', label: '日志与风控' },
|
||||
{ path: '/admin/knowledge', icon: 'knowledge', label: '知识库管理' },
|
||||
{ path: '/admin/sms', icon: 'sms', label: '短信配置' },
|
||||
{ path: '/admin/storage', icon: 'storage', label: '存储配置' },
|
||||
{ path: '/admin/automation', icon: 'automation', label: '自动化任务' },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
title: '待处理',
|
||||
icon: 'developer',
|
||||
items: [
|
||||
{ path: '/admin/analytics', icon: 'analytics', label: '数据分析' },
|
||||
{ path: '/admin/observability', icon: 'observability', label: '调用可观测' },
|
||||
{ path: '/admin/workflow', icon: 'workflow', label: '工作流编排' },
|
||||
{ path: '/admin/apps', icon: 'apps', label: 'AI 应用管理' },
|
||||
{ path: '/admin/code-exec', icon: 'code', label: '代码执行沙箱' },
|
||||
{ path: '/admin/tenant', icon: 'tenant', label: '多租户管理' },
|
||||
{ path: '/admin/im-bots', icon: 'imbot', label: 'IM 机器人' },
|
||||
{ path: '/admin/privacy', icon: 'privacy', label: '隐私与本地代理' },
|
||||
{ path: '/admin/distributions', icon: 'distro', label: '发行版构建' },
|
||||
{ path: '/admin/developer', icon: 'developer', label: '开发者 API' },
|
||||
{ path: '/admin/developer-tools', icon: 'devtools', label: '开发者工具' },
|
||||
],
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
const adminIconPaths: Record<string, JSX.Element> = {
|
||||
|
||||
dashboard: <svg width="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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>,
|
||||
|
||||
agents: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>,
|
||||
|
||||
skills: <svg width="18" height="18" 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>,
|
||||
|
||||
code: <svg width="18" height="18" 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>,
|
||||
|
||||
distro: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
|
||||
|
||||
privacy: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1"/></svg>,
|
||||
|
||||
promotion: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="7"/><path d="M8.5 12.5L6 21l6-2 6 2-2.5-8.5"/><circle cx="12" cy="8" r="3"/></svg>,
|
||||
|
||||
achievement: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 7.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>,
|
||||
|
||||
tenant: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-6h6v6"/><path d="M3 13h18"/></svg>,
|
||||
|
||||
billing: <svg width="18" height="18" 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"/><line x1="6" y1="15" x2="10" y2="15"/></svg>,
|
||||
|
||||
analytics: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>,
|
||||
observability: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l3 8 4-16 3 8h4"/></svg>,
|
||||
|
||||
imbot: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>,
|
||||
|
||||
storage: <svg width="18" height="18" 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="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>,
|
||||
|
||||
developer: <svg width="18" height="18" 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>,
|
||||
|
||||
devtools: <svg width="18" height="18" 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="18" height="18" 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"/></svg>,
|
||||
|
||||
workflow: <svg width="18" height="18" 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"/><line x1="10" y1="6" x2="14" y2="6"/><line x1="10" y1="17" x2="14" y2="17"/></svg>,
|
||||
|
||||
mcp: <svg width="18" height="18" 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>,
|
||||
|
||||
apps: <svg width="18" height="18" 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>,
|
||||
|
||||
assets: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>,
|
||||
|
||||
chevron: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>,
|
||||
|
||||
sms: <svg width="18" height="18" 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>,
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
// 后台必须登录且为管理员
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('aiflow_token');
|
||||
if (!token || !user || user.role !== 'admin') {
|
||||
logout();
|
||||
navigate('/login', { replace: true });
|
||||
}
|
||||
}, [user, logout, navigate]);
|
||||
|
||||
const navCrumb = (() => {
|
||||
|
||||
for (const g of adminNavGroups) {
|
||||
|
||||
for (const it of g.items) {
|
||||
|
||||
const match = it.exact
|
||||
|
||||
? location.pathname === it.path
|
||||
|
||||
: location.pathname === it.path || location.pathname.startsWith(it.path + '/');
|
||||
|
||||
if (match) return { group: g.title, label: it.label };
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return { group: '', label: '' };
|
||||
|
||||
})();
|
||||
|
||||
const navGroup = navCrumb.group;
|
||||
|
||||
const navLabel = navCrumb.label;
|
||||
|
||||
|
||||
|
||||
// 默认展开全部功能板块，确保后台所有模块在 UI 中可见（DESIGN.md: 侧栏分类清晰）
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(() => {
|
||||
return new Set(adminNavGroups.map((g) => g.title));
|
||||
});
|
||||
|
||||
|
||||
|
||||
const toggleGroup = (title: string) => {
|
||||
|
||||
setExpandedGroups(prev => {
|
||||
|
||||
const next = new Set(prev);
|
||||
|
||||
if (next.has(title)) next.delete(title);
|
||||
|
||||
else next.add(title);
|
||||
|
||||
return next;
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleLogout = () => {
|
||||
|
||||
logout();
|
||||
|
||||
navigate('/');
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleVisitFrontend = () => {
|
||||
|
||||
const url = window.location.origin + '/chat';
|
||||
|
||||
window.open(url, '_blank');
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="admin-layout">
|
||||
|
||||
<aside className="admin-sidebar">
|
||||
|
||||
<div className="admin-sidebar-header">
|
||||
|
||||
<h1 className="admin-logo">七虎AI</h1>
|
||||
|
||||
<span className="admin-subtitle">管理控制台</span>
|
||||
|
||||
</div>
|
||||
|
||||
<button onClick={handleVisitFrontend} className="admin-frontend-link">
|
||||
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
|
||||
<span>访问前台</span>
|
||||
|
||||
</button>
|
||||
|
||||
<nav className="sidebar-nav">
|
||||
|
||||
{adminNavGroups.map((group) => {
|
||||
|
||||
const isExpanded = expandedGroups.has(group.title);
|
||||
|
||||
const hasActiveChild = group.items.some(item =>
|
||||
|
||||
item.exact ? location.pathname === item.path : location.pathname.startsWith(item.path)
|
||||
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
<div key={group.title} className={`nav-group ${hasActiveChild ? 'nav-group-active' : ''}`}>
|
||||
|
||||
<div
|
||||
|
||||
className={`nav-group-header ${isExpanded ? 'expanded' : ''}`}
|
||||
|
||||
onClick={() => toggleGroup(group.title)}
|
||||
|
||||
>
|
||||
|
||||
<span className="nav-group-chevron-wrap">
|
||||
|
||||
<span className={`nav-group-chevron ${isExpanded ? 'chevron-expanded' : ''}`}>
|
||||
|
||||
{adminIconPaths.chevron}
|
||||
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
<span className="nav-group-title">{group.title}</span>
|
||||
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
|
||||
<div className="nav-group-items">
|
||||
|
||||
{group.items.map((item) => (
|
||||
|
||||
<NavLink
|
||||
|
||||
key={item.path}
|
||||
|
||||
to={item.path}
|
||||
|
||||
end={item.exact}
|
||||
|
||||
className={({ isActive }) =>
|
||||
|
||||
`nav-item ${isActive ? 'nav-item-active' : ''}`
|
||||
|
||||
}
|
||||
|
||||
>
|
||||
|
||||
<span className="nav-item-icon">{adminIconPaths[item.icon]}</span>
|
||||
|
||||
<span className="nav-item-label">{item.label}</span>
|
||||
|
||||
</NavLink>
|
||||
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
})}
|
||||
|
||||
</nav>
|
||||
|
||||
<div className="admin-sidebar-footer">
|
||||
|
||||
<div className="admin-user-info">
|
||||
|
||||
<div className="admin-user-avatar">{user?.username?.[0]?.toUpperCase() || 'A'}</div>
|
||||
|
||||
<div className="admin-user-detail">
|
||||
|
||||
<div className="admin-user-name">{user?.username || 'admin'}</div>
|
||||
|
||||
<button className="admin-logout-btn" onClick={handleLogout}>退出登录</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<main className="admin-content">
|
||||
|
||||
<header className="admin-topbar">
|
||||
|
||||
<nav className="admin-breadcrumb" aria-label="breadcrumb">
|
||||
|
||||
<span className="crumb-root">管理控制台</span>
|
||||
|
||||
{navGroup && (<><span className="crumb-sep">/</span><span className="crumb-group">{navGroup}</span></>)}
|
||||
|
||||
{navLabel && (<><span className="crumb-sep">/</span><span className="crumb-current">{navLabel}</span></>)}
|
||||
|
||||
</nav>
|
||||
|
||||
<div className="admin-topbar-user">
|
||||
|
||||
<div className="admin-user-avatar sm">{user?.username?.[0]?.toUpperCase() || 'A'}</div>
|
||||
|
||||
<span className="admin-topbar-username">{user?.username || 'admin'}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<Outlet />
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default AdminLayout;
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { adminAPI } from '@/api';
|
||||
|
||||
interface Summary {
|
||||
totals: { calls: number; tokens: number; cost: number; users: number };
|
||||
by_model: { model_name: string; calls: number; tokens: number; cost: number }[];
|
||||
by_user: { user_id: string; username: string; calls: number; tokens: number; cost: number }[];
|
||||
daily: { date: string; tokens: number; cost: number; calls: number }[];
|
||||
recent: { trace_id: string | null; model_name: string; tokens: number; cost: number; created_at: string | null }[];
|
||||
}
|
||||
|
||||
const ACCENT = '#5B5FED';
|
||||
const ACCENT_HOVER = '#4A4ECC';
|
||||
|
||||
export default function Observability() {
|
||||
const [days, setDays] = useState(30);
|
||||
const [data, setData] = useState<Summary | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [err, setErr] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
setLoading(true);
|
||||
setErr('');
|
||||
adminAPI.getObservabilitySummary(days)
|
||||
.then((d: Summary) => { if (alive) setData(d); })
|
||||
.catch((e: any) => { if (alive) setErr(e?.message || '加载失败'); })
|
||||
.finally(() => { if (alive) setLoading(false); });
|
||||
return () => { alive = false; };
|
||||
}, [days]);
|
||||
|
||||
const maxTokens = data ? Math.max(1, ...data.daily.map(d => d.tokens)) : 1;
|
||||
const maxModel = data ? Math.max(1, ...data.by_model.map(m => m.tokens)) : 1;
|
||||
const fmt = (n: number) => n.toLocaleString('zh-CN');
|
||||
const fmtCost = (n: number) => `¥${n.toFixed(4)}`;
|
||||
|
||||
const card: React.CSSProperties = {
|
||||
background: '#fff', border: '1px solid #eceef5', borderRadius: 16,
|
||||
padding: 20, boxShadow: '0 1px 3px rgba(20,30,60,0.04)', marginBottom: 18,
|
||||
};
|
||||
const stat: React.CSSProperties = {
|
||||
flex: 1, minWidth: 150, background: '#fff', border: '1px solid #eceef5',
|
||||
borderRadius: 16, padding: 18, boxShadow: '0 1px 3px rgba(20,30,60,0.04)',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24, maxWidth: 1160, margin: '0 auto', color: '#1f2330' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
|
||||
<div>
|
||||
<h2 style={{ margin: 0, fontSize: 22, fontWeight: 700 }}>调用可观测</h2>
|
||||
<div style={{ color: '#8a90a2', fontSize: 13, marginTop: 4 }}>
|
||||
媒体 / LLM 调用归因 · 基于 trace_id 关联请求链路（Phase 2.2）
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
{[7, 30, 90].map(d => (
|
||||
<button key={d} onClick={() => setDays(d)}
|
||||
style={{
|
||||
padding: '7px 14px', borderRadius: 10, cursor: 'pointer', fontSize: 13,
|
||||
border: `1px solid ${days === d ? ACCENT : '#e2e5ee'}`,
|
||||
background: days === d ? ACCENT : '#fff',
|
||||
color: days === d ? '#fff' : '#5b6172', fontWeight: 600,
|
||||
transition: 'all .15s',
|
||||
}}>
|
||||
{d} 天
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{err && <div style={{ ...card, borderColor: '#f3c2c2', color: '#c0392b' }}>{err}</div>}
|
||||
{loading && !data && <div style={{ color: '#8a90a2' }}>加载中…</div>}
|
||||
|
||||
{data && (
|
||||
<>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 18 }}>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>调用次数</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.calls)}</div></div>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>Token 消耗</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.tokens)}</div></div>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>成本</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6, color: ACCENT }}>{fmtCost(data.totals.cost)}</div></div>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>活跃用户</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.users)}</div></div>
|
||||
</div>
|
||||
|
||||
<div style={card}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>按模型</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{data.by_model.length === 0 && <div style={{ color: '#8a90a2', fontSize: 13 }}>暂无数据</div>}
|
||||
{data.by_model.map(m => (
|
||||
<div key={m.model_name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 150, fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.model_name}</div>
|
||||
<div style={{ flex: 1, height: 10, background: '#f1f3f9', borderRadius: 6, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${(m.tokens / maxModel) * 100}%`, height: '100%', background: ACCENT, borderRadius: 6 }} />
|
||||
</div>
|
||||
<div style={{ width: 90, textAlign: 'right', fontSize: 13, color: '#5b6172' }}>{fmt(m.tokens)}</div>
|
||||
<div style={{ width: 90, textAlign: 'right', fontSize: 13, color: ACCENT }}>{fmtCost(m.cost)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={card}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>每日趋势（Token）</h3>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 140, overflowX: 'auto', paddingBottom: 4 }}>
|
||||
{data.daily.length === 0 && <div style={{ color: '#8a90a2', fontSize: 13 }}>暂无数据</div>}
|
||||
{data.daily.map(d => (
|
||||
<div key={d.date} title={`${d.date} · ${fmt(d.tokens)} tokens · ${fmtCost(d.cost)}`}
|
||||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 22 }}>
|
||||
<div style={{ width: 16, height: `${(d.tokens / maxTokens) * 110}px`, background: ACCENT, borderRadius: '4px 4px 0 0', opacity: 0.85 }} />
|
||||
<div style={{ fontSize: 9, color: '#aab', transform: 'rotate(-45deg)', whiteSpace: 'nowrap' }}>{d.date.slice(5)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
|
||||
<div style={{ ...card, flex: 1, minWidth: 320 }}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>按用户（Top 20）</h3>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead><tr style={{ color: '#8a90a2', textAlign: 'left' }}>
|
||||
<th style={th}>用户</th><th style={thR}>调用</th><th style={thR}>Token</th><th style={thR}>成本</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{data.by_user.map(u => (
|
||||
<tr key={u.user_id} style={{ borderTop: '1px solid #f1f3f9' }}>
|
||||
<td style={td}>{u.username}</td>
|
||||
<td style={tdR}>{fmt(u.calls)}</td>
|
||||
<td style={tdR}>{fmt(u.tokens)}</td>
|
||||
<td style={{ ...tdR, color: ACCENT }}>{fmtCost(u.cost)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{data.by_user.length === 0 && <tr><td colSpan={4} style={{ ...td, color: '#8a90a2' }}>暂无数据</td></tr>}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={card}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>最近调用（trace_id 可下钻）</h3>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead><tr style={{ color: '#8a90a2', textAlign: 'left' }}>
|
||||
<th style={th}>Trace ID</th><th style={th}>模型</th><th style={thR}>Token</th><th style={thR}>成本</th><th style={thR}>时间</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{data.recent.map((r, i) => (
|
||||
<tr key={(r.trace_id || '') + i} style={{ borderTop: '1px solid #f1f3f9' }}>
|
||||
<td style={{ ...td, fontFamily: 'monospace', fontSize: 12, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.trace_id || '—'}</td>
|
||||
<td style={td}>{r.model_name}</td>
|
||||
<td style={tdR}>{fmt(r.tokens)}</td>
|
||||
<td style={{ ...tdR, color: ACCENT }}>{fmtCost(r.cost)}</td>
|
||||
<td style={tdR}>{r.created_at || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
{data.recent.length === 0 && <tr><td colSpan={5} style={{ ...td, color: '#8a90a2' }}>暂无数据</td></tr>}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const th: React.CSSProperties = { padding: '8px 6px', fontWeight: 600, fontSize: 12 };
|
||||
const thR: React.CSSProperties = { ...th, textAlign: 'right' };
|
||||
const td: React.CSSProperties = { padding: '8px 6px' };
|
||||
const tdR: React.CSSProperties = { ...td, textAlign: 'right', color: '#5b6172' };
|
||||
Reference in new issue
Block a user