Phase 2.3: Agent Management Module
Backend: - agents_admin.py: 10 REST API endpoints for AI Agent CRUD - GET/POST/PUT/DELETE /admin/agents/ - Stats overview, reviews, available skills/models - Agent = MarketApp with type='agent' Frontend: - Agents.tsx: Full admin page (780 lines) - Stats dashboard, filterable table, create/edit modal - Config: system prompt, temperature, model, linked skills - api/index.ts: 10 new Agent API methods - App.tsx: /admin/agents route - AdminLayout.tsx: Agent management nav item
This commit is contained in:
qyyfw committed
1 parent
70dd2b69af
commit
a682dc687e
11 files changed
+4243
-1615
No files matched your search
+123
-121
@@ -1,121 +1,123 @@
|
||||
import React, { useState, useEffect } 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';
|
||||
|
||||
// Front Pages
|
||||
import LandingPage from '@/pages/front/LandingPage';
|
||||
import LoginPage from '@/pages/front/LoginPage';
|
||||
import ChatPage from '@/pages/front/ChatPage';
|
||||
import ChannelPage from '@/pages/front/ChannelPage';
|
||||
import KnowledgePage from '@/pages/front/KnowledgePage';
|
||||
import MarketPage from '@/pages/front/MarketPage';
|
||||
import TokenDashboardPage from '@/pages/front/TokenDashboardPage';
|
||||
import PricingPage from '@/pages/front/PricingPage';
|
||||
import ProfilePage from '@/pages/front/ProfilePage';
|
||||
import NotificationPage from '@/pages/front/NotificationPage';
|
||||
import AssetsPage from '@/pages/front/AssetsPage';
|
||||
import NovelPreviewPage from '@/pages/front/NovelPreviewPage';
|
||||
import EvolutionDashboard from '@/pages/front/EvolutionDashboard';
|
||||
|
||||
// Admin Pages
|
||||
import AdminDashboard from '@/pages/admin/Dashboard';
|
||||
import AdminUsers from '@/pages/admin/Users';
|
||||
import AdminModels from '@/pages/admin/Models';
|
||||
import AdminSiteSettings from '@/pages/admin/SiteSettings';
|
||||
import AdminPayment from '@/pages/admin/Payment';
|
||||
import AdminServices from '@/pages/admin/Services';
|
||||
import AdminMembership from '@/pages/admin/Membership';
|
||||
import AdminAds from '@/pages/admin/Ads';
|
||||
import AdminMarket from '@/pages/admin/Market';
|
||||
import AdminLogs from '@/pages/admin/Logs';
|
||||
|
||||
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 }}>
|
||||
<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="channels" element={<ChannelPage />} />
|
||||
<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>
|
||||
|
||||
{/* 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="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>
|
||||
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Routes>
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
import React, { useState, useEffect } 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';
|
||||
|
||||
// Front Pages
|
||||
import LandingPage from '@/pages/front/LandingPage';
|
||||
import LoginPage from '@/pages/front/LoginPage';
|
||||
import ChatPage from '@/pages/front/ChatPage';
|
||||
import ChannelPage from '@/pages/front/ChannelPage';
|
||||
import KnowledgePage from '@/pages/front/KnowledgePage';
|
||||
import MarketPage from '@/pages/front/MarketPage';
|
||||
import TokenDashboardPage from '@/pages/front/TokenDashboardPage';
|
||||
import PricingPage from '@/pages/front/PricingPage';
|
||||
import ProfilePage from '@/pages/front/ProfilePage';
|
||||
import NotificationPage from '@/pages/front/NotificationPage';
|
||||
import AssetsPage from '@/pages/front/AssetsPage';
|
||||
import NovelPreviewPage from '@/pages/front/NovelPreviewPage';
|
||||
import EvolutionDashboard from '@/pages/front/EvolutionDashboard';
|
||||
|
||||
// Admin Pages
|
||||
import AdminDashboard from '@/pages/admin/Dashboard';
|
||||
import AdminUsers from '@/pages/admin/Users';
|
||||
import AdminModels from '@/pages/admin/Models';
|
||||
import AdminSiteSettings from '@/pages/admin/SiteSettings';
|
||||
import AdminPayment from '@/pages/admin/Payment';
|
||||
import AdminServices from '@/pages/admin/Services';
|
||||
import AdminMembership from '@/pages/admin/Membership';
|
||||
import AdminAds from '@/pages/admin/Ads';
|
||||
import AdminMarket from '@/pages/admin/Market';
|
||||
import AdminLogs from '@/pages/admin/Logs';
|
||||
import AdminSkills from '@/pages/admin/Skills';
|
||||
|
||||
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 }}>
|
||||
<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="channels" element={<ChannelPage />} />
|
||||
<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>
|
||||
|
||||
{/* 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="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>
|
||||
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Routes>
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
+528
-507
File diff suppressed because it is too large.
Load diff
@@ -1,124 +1,126 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import './AdminLayout.css';
|
||||
|
||||
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: '日志与风控' },
|
||||
];
|
||||
|
||||
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"/><polyline points="10 9 9 9 8 9"/></svg>,
|
||||
};
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
if (!user || user.role !== 'admin') {
|
||||
navigate('/login');
|
||||
return null;
|
||||
}
|
||||
|
||||
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"/>
|
||||
</svg>
|
||||
{!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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="admin-nav">
|
||||
{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>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="admin-sidebar-footer">
|
||||
<NavLink to="/chat" 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>
|
||||
</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>
|
||||
</div>
|
||||
<div className="admin-topbar-right">
|
||||
<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;
|
||||
import React, { useState } from 'react';
|
||||
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import './AdminLayout.css';
|
||||
|
||||
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/skills', icon: 'skills', 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"/><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>,};
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
if (!user || user.role !== 'admin') {
|
||||
navigate('/login');
|
||||
return null;
|
||||
}
|
||||
|
||||
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"/>
|
||||
</svg>
|
||||
{!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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="admin-nav">
|
||||
{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>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="admin-sidebar-footer">
|
||||
<NavLink to="/chat" 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>
|
||||
</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>
|
||||
</div>
|
||||
<div className="admin-topbar-right">
|
||||
<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;
|
||||
@@ -0,0 +1,702 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { adminAPI } from '@/api';
|
||||
|
||||
interface Agent {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
source: string;
|
||||
publisher_id: string;
|
||||
publisher_name?: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
tutorial?: string;
|
||||
price: number;
|
||||
is_member_free: boolean;
|
||||
join_promotion: boolean;
|
||||
status: string;
|
||||
rating_avg: number;
|
||||
review_count: number;
|
||||
install_count: number;
|
||||
skill_content?: string;
|
||||
agent_endpoint?: string;
|
||||
config?: AgentConfig;
|
||||
linked_skills?: LinkedSkill[];
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
interface AgentConfig {
|
||||
system_prompt?: string;
|
||||
temperature?: number;
|
||||
max_tokens?: number;
|
||||
model_id?: string;
|
||||
skills?: string[];
|
||||
tools?: string[];
|
||||
memory_enabled?: boolean;
|
||||
reasoning_enabled?: boolean;
|
||||
}
|
||||
|
||||
interface LinkedSkill {
|
||||
id: string;
|
||||
skill_name: string;
|
||||
state: string;
|
||||
version: number;
|
||||
}
|
||||
|
||||
interface AgentStats {
|
||||
total_agents: number;
|
||||
published_agents: number;
|
||||
pending_agents: number;
|
||||
official_agents: number;
|
||||
user_agents: number;
|
||||
total_installs: number;
|
||||
average_rating: number;
|
||||
by_source: Record<string, number>;
|
||||
}
|
||||
|
||||
interface AvailableModel {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
model_type?: string;
|
||||
}
|
||||
|
||||
const AGENT_TYPES = [
|
||||
{ id: 'skill', label: '技能' },
|
||||
{ id: 'agent', label: 'Agent' },
|
||||
{ id: 'mcp', label: 'MCP' },
|
||||
];
|
||||
|
||||
const Agents: React.FC = () => {
|
||||
const [agents, setAgents] = useState<Agent[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [stats, setStats] = useState<AgentStats | null>(null);
|
||||
|
||||
// Filters
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [filterStatus, setFilterStatus] = useState('');
|
||||
const [filterSource, setFilterSource] = useState('');
|
||||
|
||||
// Modal
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
icon: '',
|
||||
price: '0',
|
||||
is_member_free: false,
|
||||
system_prompt: '',
|
||||
temperature: '0.7',
|
||||
max_tokens: '2048',
|
||||
model_id: '',
|
||||
skills: [] as string[],
|
||||
memory_enabled: false,
|
||||
reasoning_enabled: false,
|
||||
});
|
||||
|
||||
// Detail drawer
|
||||
const [showDetail, setShowDetail] = useState(false);
|
||||
const [detailAgent, setDetailAgent] = useState<Agent | null>(null);
|
||||
|
||||
// Available skills for linking
|
||||
const [availableSkills, setAvailableSkills] = useState<any[]>([]);
|
||||
const [availableModels, setAvailableModels] = useState<AvailableModel[]>([]);
|
||||
|
||||
// Toast
|
||||
const [toast, setToast] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
|
||||
const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
|
||||
setToast({ msg, type });
|
||||
setTimeout(() => setToast(null), 3000);
|
||||
};
|
||||
|
||||
// Load agents
|
||||
const loadAgents = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: any = { page, page_size: 15 };
|
||||
if (keyword) params.keyword = keyword;
|
||||
if (filterStatus) params.status = filterStatus;
|
||||
if (filterSource) params.source = filterSource;
|
||||
const result = await adminAPI.getAdminAgents(params) as any;
|
||||
const data = result.data || result;
|
||||
setAgents(data.items || []);
|
||||
setTotal(data.total || 0);
|
||||
} catch (e: any) {
|
||||
showToast(`加载失败: ${e.message || e}`, 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Load stats
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const result = await adminAPI.getAdminAgentsStats() as any;
|
||||
const data = result.data || result;
|
||||
setStats(data);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
// Load available skills & models
|
||||
const loadAvailable = async () => {
|
||||
try {
|
||||
const [skillsResult, modelsResult] = await Promise.all([
|
||||
adminAPI.getAdminAvailableSkills({ page_size: 50 }) as any,
|
||||
adminAPI.getAdminAvailableModels() as any,
|
||||
]);
|
||||
const skills = (skillsResult.data || skillsResult).items || [];
|
||||
const models = (modelsResult.data || modelsResult) || [];
|
||||
setAvailableSkills(skills);
|
||||
setAvailableModels(models);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadAgents();
|
||||
}, [page, keyword, filterStatus, filterSource]);
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
// Search
|
||||
const handleSearch = () => {
|
||||
setPage(1);
|
||||
loadAgents();
|
||||
};
|
||||
|
||||
// Open create
|
||||
const openCreate = async () => {
|
||||
setEditingAgent(null);
|
||||
await loadAvailable();
|
||||
setForm({
|
||||
name: '',
|
||||
description: '',
|
||||
icon: '',
|
||||
price: '0',
|
||||
is_member_free: false,
|
||||
system_prompt: '你是一个智能助手。',
|
||||
temperature: '0.7',
|
||||
max_tokens: '2048',
|
||||
model_id: '',
|
||||
skills: [],
|
||||
memory_enabled: false,
|
||||
reasoning_enabled: false,
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Open edit
|
||||
const openEdit = async (agent: Agent) => {
|
||||
setEditingAgent(agent);
|
||||
await loadAvailable();
|
||||
|
||||
const cfg = agent.config || {};
|
||||
setForm({
|
||||
name: agent.name,
|
||||
description: agent.description || '',
|
||||
icon: agent.icon || '',
|
||||
price: String(agent.price),
|
||||
is_member_free: agent.is_member_free,
|
||||
system_prompt: cfg.system_prompt || '',
|
||||
temperature: String(cfg.temperature || 0.7),
|
||||
max_tokens: String(cfg.max_tokens || 2048),
|
||||
model_id: cfg.model_id || '',
|
||||
skills: cfg.skills || [],
|
||||
memory_enabled: cfg.memory_enabled || false,
|
||||
reasoning_enabled: cfg.reasoning_enabled || false,
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Open detail
|
||||
const openDetail = async (agent: Agent) => {
|
||||
setDetailAgent(agent);
|
||||
setShowDetail(true);
|
||||
};
|
||||
|
||||
// Save agent
|
||||
const handleSave = async () => {
|
||||
if (!form.name.trim()) {
|
||||
showToast('Agent 名称不能为空', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload: any = {
|
||||
name: form.name,
|
||||
description: form.description,
|
||||
icon: form.icon || undefined,
|
||||
price: parseFloat(form.price) || 0,
|
||||
is_member_free: form.is_member_free,
|
||||
config: {
|
||||
system_prompt: form.system_prompt,
|
||||
temperature: parseFloat(form.temperature) || 0.7,
|
||||
max_tokens: parseInt(form.max_tokens) || 2048,
|
||||
model_id: form.model_id || undefined,
|
||||
skills: form.skills,
|
||||
memory_enabled: form.memory_enabled,
|
||||
reasoning_enabled: form.reasoning_enabled,
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
if (editingAgent) {
|
||||
await adminAPI.updateAdminAgent(editingAgent.id, payload);
|
||||
showToast('Agent 已更新');
|
||||
} else {
|
||||
await adminAPI.createAdminAgent(payload);
|
||||
showToast('Agent 创建成功');
|
||||
}
|
||||
setShowModal(false);
|
||||
loadAgents();
|
||||
loadStats();
|
||||
} catch (e: any) {
|
||||
showToast(`保存失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle agent
|
||||
const handleToggle = async (agent: Agent) => {
|
||||
const isActive = agent.status === 'published';
|
||||
try {
|
||||
await adminAPI.toggleAdminAgent(agent.id, !isActive);
|
||||
showToast(`Agent 已${isActive ? '禁用' : '启用'}`);
|
||||
loadAgents();
|
||||
loadStats();
|
||||
} catch (e: any) {
|
||||
showToast(`操作失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Delete agent
|
||||
const handleDelete = async (agent: Agent) => {
|
||||
if (!confirm(`确定要删除 Agent "${agent.name}" 吗？此操作不可恢复。`)) return;
|
||||
try {
|
||||
await adminAPI.deleteAdminAgent(agent.id);
|
||||
showToast('Agent 已删除');
|
||||
loadAgents();
|
||||
loadStats();
|
||||
} catch (e: any) {
|
||||
showToast(`删除失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle skill in selection
|
||||
const toggleSkill = (skillId: string) => {
|
||||
setForm(f => ({
|
||||
...f,
|
||||
skills: f.skills.includes(skillId)
|
||||
? f.skills.filter(s => s !== skillId)
|
||||
: [...f.skills, skillId],
|
||||
}));
|
||||
};
|
||||
|
||||
const PAGE_SIZE = 15;
|
||||
const totalPages = Math.ceil(total / PAGE_SIZE);
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
if (status === 'published') return { bg: '#D1FAE5', color: '#10B981' };
|
||||
if (status === 'pending') return { bg: '#FEF3C7', color: '#F59E0B' };
|
||||
return { bg: '#FEE2E2', color: '#EF4444' };
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
{/* Toast */}
|
||||
{toast && (
|
||||
<div className="toast" style={{
|
||||
position: 'fixed', top: 20, right: 20, zIndex: 9999,
|
||||
padding: '12px 20px', borderRadius: 8,
|
||||
background: toast.type === 'success' ? '#10B981' : '#EF4444',
|
||||
color: '#fff', fontSize: 14, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
}}>
|
||||
{toast.msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="admin-page-header">
|
||||
<div>
|
||||
<h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Agent 管理</h2>
|
||||
<p style={{ margin: '4px 0 0', color: '#6B7280', fontSize: 13 }}>
|
||||
管理 AI Agent/Skill/MCP，支持配置、关联技能和模型
|
||||
</p>
|
||||
</div>
|
||||
<button className="admin-btn primary" onClick={openCreate}>+ 创建 Agent</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{stats && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12, marginBottom: 20 }}>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #6366F1' }}>
|
||||
<div className="stat-value">{stats.total_agents}</div>
|
||||
<div className="stat-label">Agent 总数</div>
|
||||
</div>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #10B981' }}>
|
||||
<div className="stat-value">{stats.published_agents}</div>
|
||||
<div className="stat-label">已发布</div>
|
||||
</div>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #F59E0B' }}>
|
||||
<div className="stat-value">{stats.pending_agents}</div>
|
||||
<div className="stat-label">待发布</div>
|
||||
</div>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #3B82F6' }}>
|
||||
<div className="stat-value">{stats.total_installs.toLocaleString()}</div>
|
||||
<div className="stat-label">总安装量</div>
|
||||
</div>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #8B5CF6' }}>
|
||||
<div className="stat-value">{stats.average_rating.toFixed(1)}</div>
|
||||
<div className="stat-label">平均评分</div>
|
||||
</div>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #EC4899' }}>
|
||||
<div className="stat-value">{stats.official_agents} / {stats.user_agents}</div>
|
||||
<div className="stat-label">官方 / 用户</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="admin-filters" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
|
||||
<input className="admin-form-input" placeholder="搜索名称、描述..."
|
||||
value={keyword} onChange={e => setKeyword(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
||||
style={{ maxWidth: 280 }} />
|
||||
<select className="admin-form-input" value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setPage(1); }}
|
||||
style={{ maxWidth: 140 }}>
|
||||
<option value="">全部状态</option>
|
||||
<option value="published">已发布</option>
|
||||
<option value="pending">待发布</option>
|
||||
<option value="removed">已下架</option>
|
||||
</select>
|
||||
<select className="admin-form-input" value={filterSource} onChange={e => { setFilterSource(e.target.value); setPage(1); }}
|
||||
style={{ maxWidth: 140 }}>
|
||||
<option value="">全部来源</option>
|
||||
<option value="official">官方</option>
|
||||
<option value="user">用户</option>
|
||||
</select>
|
||||
<button className="admin-btn" onClick={handleSearch}>搜索</button>
|
||||
{(keyword || filterStatus || filterSource) && (
|
||||
<button className="admin-btn" onClick={() => { setKeyword(''); setFilterStatus(''); setFilterSource(''); setPage(1); }}>
|
||||
清空
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Agent</th>
|
||||
<th>类型</th>
|
||||
<th>来源</th>
|
||||
<th>状态</th>
|
||||
<th>价格</th>
|
||||
<th>安装量</th>
|
||||
<th>评分</th>
|
||||
<th>更新时间</th>
|
||||
<th style={{ width: 240 }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</td></tr>
|
||||
) : agents.length === 0 ? (
|
||||
<tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无 Agent</td></tr>
|
||||
) : agents.map(agent => {
|
||||
const sc = statusColor(agent.status);
|
||||
return (
|
||||
<tr key={agent.id}>
|
||||
<td>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{agent.icon ? (
|
||||
<img src={agent.icon} alt="" style={{ width: 32, height: 32, borderRadius: 8, objectFit: 'cover' }} />
|
||||
) : (
|
||||
<div style={{ width: 32, height: 32, borderRadius: 8, background: '#EEF2FF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>
|
||||
🤖
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontWeight: 500 }}>{agent.name}</div>
|
||||
{agent.description && (
|
||||
<div style={{ fontSize: 12, color: '#6B7280', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{agent.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span style={{ fontSize: 12, padding: '2px 8px', borderRadius: 10, background: '#EEF2FF', color: '#6366F1' }}>
|
||||
{AGENT_TYPES.find(t => t.id === agent.type)?.label || agent.type}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style={{ fontSize: 12, color: agent.source === 'official' ? '#10B981' : '#6B7280' }}>
|
||||
{agent.source === 'official' ? '官方' : '用户'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style={{ display: 'inline-block', padding: '2px 10px', borderRadius: 12, fontSize: 12, background: sc.bg, color: sc.color, fontWeight: 500 }}>
|
||||
{agent.status === 'published' ? '已发布' : agent.status === 'pending' ? '待发布' : '已下架'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{agent.price === 0 ? <span style={{ color: '#10B981' }}>免费</span> : `¥${agent.price}`}</td>
|
||||
<td>{agent.install_count.toLocaleString()}</td>
|
||||
<td>{agent.rating_avg > 0 ? `★ ${agent.rating_avg}` : '-'}</td>
|
||||
<td style={{ fontSize: 12, color: '#6B7280' }}>
|
||||
{agent.updated_at ? agent.updated_at.slice(0, 16).replace('T', ' ') : '-'}
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||
<button className="admin-btn small" onClick={() => openDetail(agent)}>详情</button>
|
||||
<button className="admin-btn small" onClick={() => openEdit(agent)}>编辑</button>
|
||||
<button
|
||||
className={`admin-btn small ${agent.status === 'published' ? 'warning' : 'success'}`}
|
||||
onClick={() => handleToggle(agent)}
|
||||
>
|
||||
{agent.status === 'published' ? '禁用' : '启用'}
|
||||
</button>
|
||||
<button className="admin-btn small danger" onClick={() => handleDelete(agent)}>删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="admin-pagination">
|
||||
<span style={{ color: '#6B7280', fontSize: 13 }}>共 {total} 条，第 {page}/{totalPages} 页</span>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<button className="admin-btn small" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
|
||||
{[...Array(Math.min(5, totalPages))].map((_, i) => {
|
||||
const p = Math.max(1, Math.min(page - 2, totalPages - 4)) + i;
|
||||
return p <= totalPages && (
|
||||
<button key={p} className={`admin-btn small ${p === page ? 'primary' : ''}`} onClick={() => setPage(p)}>{p}</button>
|
||||
);
|
||||
})}
|
||||
<button className="admin-btn small" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
{showModal && (
|
||||
<div className="modal-overlay" onClick={() => setShowModal(false)}>
|
||||
<div className="modal-content" style={{ maxWidth: 800 }} onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>{editingAgent ? '编辑 Agent' : '创建 Agent'}</h3>
|
||||
<button className="modal-close" onClick={() => setShowModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">名称 *</label>
|
||||
<input className="admin-form-input" value={form.name}
|
||||
onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
placeholder="例如: 智能代码审查助手" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">图标 URL</label>
|
||||
<input className="admin-form-input" value={form.icon}
|
||||
onChange={e => setForm(f => ({ ...f, icon: e.target.value }))}
|
||||
placeholder="https://..." />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">价格（元，0=免费）</label>
|
||||
<input className="admin-form-input" type="number" value={form.price}
|
||||
onChange={e => setForm(f => ({ ...f, price: e.target.value }))} />
|
||||
</div>
|
||||
<div className="form-group" style={{ display: 'flex', alignItems: 'center', paddingTop: 24 }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={form.is_member_free}
|
||||
onChange={e => setForm(f => ({ ...f, is_member_free: e.target.checked }))} />
|
||||
会员免费
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="form-label">描述</label>
|
||||
<textarea className="admin-form-input" rows={2} value={form.description}
|
||||
onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
||||
placeholder="描述 Agent 的功能和使用场景..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style={{ border: 'none', borderTop: '1px solid #E5E7EB', margin: '16px 0' }} />
|
||||
|
||||
<div style={{ fontWeight: 600, marginBottom: 12 }}>⚙️ Agent 配置</div>
|
||||
|
||||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="form-label">System Prompt</label>
|
||||
<textarea className="admin-form-input"
|
||||
value={form.system_prompt}
|
||||
onChange={e => setForm(f => ({ ...f, system_prompt: e.target.value }))}
|
||||
style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 120 }}
|
||||
placeholder="定义 Agent 的角色、行为和能力..." />
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">模型</label>
|
||||
<select className="admin-form-input" value={form.model_id}
|
||||
onChange={e => setForm(f => ({ ...f, model_id: e.target.value }))}>
|
||||
<option value="">默认模型</option>
|
||||
{availableModels.map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name} ({m.provider})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Temperature</label>
|
||||
<input className="admin-form-input" type="number" step="0.1" min="0" max="2"
|
||||
value={form.temperature}
|
||||
onChange={e => setForm(f => ({ ...f, temperature: e.target.value }))} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Max Tokens</label>
|
||||
<input className="admin-form-input" type="number"
|
||||
value={form.max_tokens}
|
||||
onChange={e => setForm(f => ({ ...f, max_tokens: e.target.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 16, marginBottom: 16 }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={form.memory_enabled}
|
||||
onChange={e => setForm(f => ({ ...f, memory_enabled: e.target.checked }))} />
|
||||
记忆能力
|
||||
</label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={form.reasoning_enabled}
|
||||
onChange={e => setForm(f => ({ ...f, reasoning_enabled: e.target.checked }))} />
|
||||
推理能力
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Linked Skills */}
|
||||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="form-label">关联技能（可多选）</label>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 160, overflowY: 'auto', padding: 8, border: '1px solid #E5E7EB', borderRadius: 6 }}>
|
||||
{availableSkills.length === 0 ? (
|
||||
<span style={{ color: '#9CA3AF', fontSize: 13 }}>暂无技能</span>
|
||||
) : availableSkills.map(skill => (
|
||||
<label key={skill.id} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px',
|
||||
borderRadius: 12, fontSize: 12, cursor: 'pointer',
|
||||
background: form.skills.includes(skill.id) ? '#EEF2FF' : '#F9FAFB',
|
||||
border: `1px solid ${form.skills.includes(skill.id) ? '#6366F1' : '#E5E7EB'}`,
|
||||
color: form.skills.includes(skill.id) ? '#6366F1' : '#374151',
|
||||
}}>
|
||||
<input type="checkbox" style={{ display: 'none' }}
|
||||
checked={form.skills.includes(skill.id)}
|
||||
onChange={() => toggleSkill(skill.id)} />
|
||||
{skill.skill_name}
|
||||
{skill.state !== 'baby' && (
|
||||
<span style={{ fontSize: 10, background: '#E5E7EB', padding: '1px 4px', borderRadius: 4, marginLeft: 4 }}>
|
||||
{skill.state}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{form.skills.length > 0 && (
|
||||
<div style={{ marginTop: 6, fontSize: 12, color: '#6366F1' }}>
|
||||
已选 {form.skills.length} 个技能
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button className="admin-btn" onClick={() => setShowModal(false)}>取消</button>
|
||||
<button className="admin-btn primary" onClick={handleSave}>
|
||||
{editingAgent ? '保存更改' : '创建 Agent'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Detail Drawer */}
|
||||
{showDetail && detailAgent && (
|
||||
<div className="modal-overlay" onClick={() => setShowDetail(false)}>
|
||||
<div className="modal-content" style={{ maxWidth: 600 }} onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>{detailAgent.name}</h3>
|
||||
<button className="modal-close" onClick={() => setShowDetail(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
|
||||
<div className="detail-item"><span className="detail-label">类型</span><span>{detailAgent.type}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">来源</span><span>{detailAgent.source === 'official' ? '官方' : '用户'}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">状态</span><span>{detailAgent.status}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">价格</span><span>¥{detailAgent.price}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">安装量</span><span>{detailAgent.install_count}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">评分</span><span>{detailAgent.rating_avg > 0 ? `★ ${detailAgent.rating_avg}` : '-'}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">发布者</span><span>{detailAgent.publisher_name || detailAgent.publisher_id}</span></div>
|
||||
<div className="detail-item"><span className="detail-label">创建时间</span><span>{detailAgent.created_at?.slice(0, 16).replace('T', ' ')}</span></div>
|
||||
</div>
|
||||
|
||||
{detailAgent.description && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div style={{ fontWeight: 500, marginBottom: 4 }}>描述</div>
|
||||
<p style={{ color: '#6B7280', fontSize: 13, margin: 0 }}>{detailAgent.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detailAgent.config && (
|
||||
<div>
|
||||
<div style={{ fontWeight: 500, marginBottom: 8 }}>⚙️ 配置</div>
|
||||
<div style={{ background: '#F9FAFB', borderRadius: 8, padding: 12, fontSize: 13 }}>
|
||||
{detailAgent.config.system_prompt && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span style={{ color: '#6B7280' }}>System Prompt:</span>
|
||||
<pre style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: 12 }}>
|
||||
{detailAgent.config.system_prompt}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
|
||||
<span>Temperature: <code>{detailAgent.config.temperature}</code></span>
|
||||
<span>Max Tokens: <code>{detailAgent.config.max_tokens}</code></span>
|
||||
<span>Model: <code>{detailAgent.config.model_id || '默认'}</code></span>
|
||||
<span>记忆: <code>{detailAgent.config.memory_enabled ? '✓' : '✗'}</code></span>
|
||||
<span>推理: <code>{detailAgent.config.reasoning_enabled ? '✓' : '✗'}</code></span>
|
||||
<span>关联技能: <code>{detailAgent.config.skills?.length || 0} 个</code></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
.stat-card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
.stat-value { font-size: 24px; font-weight: 700; color: #1F2937; }
|
||||
.stat-label { font-size: 13px; color: #6B7280; margin-top: 4px; }
|
||||
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
|
||||
.modal-content { background: #fff; border-radius: 12px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.modal-header { padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; }
|
||||
.modal-header h3 { margin: 0; font-size: 18px; }
|
||||
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
|
||||
.modal-body { padding: 24px; overflow-y: auto; }
|
||||
.modal-footer { padding: 16px 24px; border-top: 1px solid #E5E7EB; display: flex; justify-content: flex-end; gap: 12px; }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #374151; }
|
||||
.detail-item { display: flex; gap: 8px; font-size: 13px; }
|
||||
.detail-label { color: #6B7280; min-width: 60px; }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Agents;
|
||||
+385
-649
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,667 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { adminAPI } from '@/api';
|
||||
import type { SkillState } from '@/types';
|
||||
|
||||
type AdminSkill = {
|
||||
id: string;
|
||||
user_id: string;
|
||||
owner_username?: string;
|
||||
skill_name: string;
|
||||
description?: string;
|
||||
tags: string[];
|
||||
category?: string;
|
||||
category_label?: string;
|
||||
state: SkillState;
|
||||
use_count: number;
|
||||
version: number;
|
||||
skill_md_path?: string;
|
||||
last_used_at?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
skill_md_content?: string;
|
||||
publish_records?: PublishRecord[];
|
||||
};
|
||||
|
||||
interface PublishRecord {
|
||||
id: string;
|
||||
price: number;
|
||||
status: string;
|
||||
published_at?: string;
|
||||
}
|
||||
|
||||
interface SkillVersion {
|
||||
id: string;
|
||||
version: number;
|
||||
description?: string;
|
||||
skill_md_content?: string;
|
||||
created_at?: string;
|
||||
}
|
||||
|
||||
interface SkillsStats {
|
||||
total_skills: number;
|
||||
by_state: Record<string, number>;
|
||||
by_category: Record<string, number>;
|
||||
total_published: number;
|
||||
total_versions: number;
|
||||
}
|
||||
|
||||
const STATE_CONFIG: Record<SkillState, { label: string; color: string; bg: string }> = {
|
||||
baby: { label: '萌芽期', color: '#6B7280', bg: '#F3F4F6' },
|
||||
main: { label: '主力期', color: '#10B981', bg: '#D1FAE5' },
|
||||
staging: { label: '灰度期', color: '#F59E0B', bg: '#FEF3C7' },
|
||||
frozen: { label: '已冻结', color: '#EF4444', bg: '#FEE2E2' },
|
||||
};
|
||||
|
||||
const CATEGORIES = [
|
||||
{ id: 'writing', label: '文字创作' },
|
||||
{ id: 'coding', label: '代码能力' },
|
||||
{ id: 'data_analysis', label: '数据分析' },
|
||||
{ id: 'qa', label: '知识问答' },
|
||||
{ id: 'automation', label: '流程自动化' },
|
||||
{ id: 'creativity', label: '创意生成' },
|
||||
{ id: 'communication', label: '沟通协作' },
|
||||
{ id: 'reasoning', label: '逻辑推理' },
|
||||
{ id: 'other', label: '其他' },
|
||||
];
|
||||
|
||||
const PAGE_SIZE = 15;
|
||||
|
||||
const Skills: React.FC = () => {
|
||||
const [skills, setSkills] = useState<AdminSkill[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [stats, setStats] = useState<any>(null);
|
||||
|
||||
// Filters
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [filterState, setFilterState] = useState<string>('');
|
||||
const [filterCategory, setFilterCategory] = useState<string>('');
|
||||
|
||||
// Create/Edit Modal
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingSkill, setEditingSkill] = useState<AdminSkill | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
skill_name: '',
|
||||
user_id: '',
|
||||
description: '',
|
||||
tags: '',
|
||||
category: '',
|
||||
skill_md_content: '## 技能定义\n\n### 触发词\n- /skill\n\n### 能力说明\n请描述这个技能的核心能力...\n\n### 使用场景\n1. 场景一\n2. 场景二\n\n### 示例对话\n**用户**: \n**AI**: ',
|
||||
});
|
||||
|
||||
// Version Drawer
|
||||
const [showVersions, setShowVersions] = useState(false);
|
||||
const [versions, setVersions] = useState<any[]>([]);
|
||||
const [versionSkill, setVersionSkill] = useState<AdminSkill | null>(null);
|
||||
const [loadingVersions, setLoadingVersions] = useState(false);
|
||||
|
||||
// Users list (for owner selection)
|
||||
const [users, setUsers] = useState<{id: string; username: string}[]>([]);
|
||||
|
||||
// Confirm delete
|
||||
const [deleteTarget, setDeleteTarget] = useState<AdminSkill | null>(null);
|
||||
|
||||
// Toast
|
||||
const [toast, setToast] = useState<{msg: string; type: 'success' | 'error'} | null>(null);
|
||||
|
||||
const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
|
||||
setToast({ msg, type });
|
||||
setTimeout(() => setToast(null), 3000);
|
||||
};
|
||||
|
||||
// Load skills list
|
||||
const loadSkills = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: any = { page, page_size: PAGE_SIZE };
|
||||
if (keyword) params.keyword = keyword;
|
||||
if (filterState) params.state = filterState;
|
||||
if (filterCategory) params.category = filterCategory;
|
||||
|
||||
const result = await adminAPI.getAdminSkills(params) as any;
|
||||
const data = result.data || result;
|
||||
setSkills(data.items || []);
|
||||
setTotal(data.total || 0);
|
||||
} catch (e: any) {
|
||||
showToast(`加载失败: ${e.message || e}`, 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Load stats
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const result = await adminAPI.getAdminSkillsStats() as any;
|
||||
const data = result.data || result;
|
||||
setStats(data);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
// Load users for owner selection
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const result = await adminAPI.getUsers({ page_size: 100 }) as any;
|
||||
const data = result.data || result;
|
||||
setUsers((data.items || data || []).slice(0, 20));
|
||||
} catch {}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadSkills();
|
||||
}, [page, keyword, filterState, filterCategory]);
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
loadUsers();
|
||||
}, []);
|
||||
|
||||
// Search
|
||||
const handleSearch = () => {
|
||||
setPage(1);
|
||||
loadSkills();
|
||||
};
|
||||
|
||||
// Open create modal
|
||||
const openCreate = () => {
|
||||
setEditingSkill(null);
|
||||
setForm({
|
||||
skill_name: '',
|
||||
user_id: users[0]?.id || '',
|
||||
description: '',
|
||||
tags: '',
|
||||
category: '',
|
||||
skill_md_content: '## 技能定义\n\n### 触发词\n- /skill\n\n### 能力说明\n请描述这个技能的核心能力...\n\n### 使用场景\n1. 场景一\n2. 场景二\n\n### 示例对话\n**用户**: \n**AI**: ',
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Open edit modal
|
||||
const openEdit = (skill: AdminSkill) => {
|
||||
setEditingSkill(skill);
|
||||
setForm({
|
||||
skill_name: skill.skill_name,
|
||||
user_id: skill.user_id,
|
||||
description: skill.description || '',
|
||||
tags: (skill.tags || []).join(', '),
|
||||
category: skill.category || '',
|
||||
skill_md_content: skill.skill_md_content || '',
|
||||
});
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Save skill
|
||||
const handleSave = async () => {
|
||||
if (!form.skill_name.trim()) {
|
||||
showToast('技能名称不能为空', 'error');
|
||||
return;
|
||||
}
|
||||
if (!form.user_id) {
|
||||
showToast('请选择所属用户', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const tags = form.tags.split(',').map(t => t.trim()).filter(Boolean);
|
||||
const payload: any = {
|
||||
skill_name: form.skill_name,
|
||||
user_id: form.user_id,
|
||||
description: form.description,
|
||||
tags,
|
||||
category: form.category || undefined,
|
||||
skill_md_content: form.skill_md_content,
|
||||
};
|
||||
|
||||
try {
|
||||
if (editingSkill) {
|
||||
await adminAPI.updateAdminSkill(editingSkill.id, payload);
|
||||
showToast('技能已更新');
|
||||
} else {
|
||||
await adminAPI.createAdminSkill(payload);
|
||||
showToast('技能已创建');
|
||||
}
|
||||
setShowModal(false);
|
||||
loadSkills();
|
||||
loadStats();
|
||||
} catch (e: any) {
|
||||
showToast(`保存失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Delete skill
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
await adminAPI.deleteAdminSkill(deleteTarget.id);
|
||||
showToast('技能已删除');
|
||||
setDeleteTarget(null);
|
||||
loadSkills();
|
||||
loadStats();
|
||||
} catch (e: any) {
|
||||
showToast(`删除失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Change state
|
||||
const handleChangeState = async (skill: AdminSkill, newState: string) => {
|
||||
try {
|
||||
await adminAPI.changeAdminSkillState(skill.id, { state: newState });
|
||||
showToast(`状态已变更为 ${STATE_CONFIG[newState as SkillState].label}`);
|
||||
loadSkills();
|
||||
loadStats();
|
||||
} catch (e: any) {
|
||||
showToast(`状态修改失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Load version history
|
||||
const handleShowVersions = async (skill: AdminSkill) => {
|
||||
setVersionSkill(skill);
|
||||
setShowVersions(true);
|
||||
setLoadingVersions(true);
|
||||
try {
|
||||
const result = await adminAPI.getAdminSkillVersions(skill.id) as any;
|
||||
const data = result.data || result;
|
||||
setVersions(data.versions || []);
|
||||
} catch (e: any) {
|
||||
showToast(`加载版本历史失败: ${e.message || e}`, 'error');
|
||||
setVersions([]);
|
||||
} finally {
|
||||
setLoadingVersions(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Rollback version
|
||||
const handleRollback = async (skill: AdminSkill, targetVersion: number) => {
|
||||
if (!confirm(`确定回滚到版本 ${targetVersion} 吗？`)) return;
|
||||
try {
|
||||
await adminAPI.rollbackAdminSkill(skill.id, { version: targetVersion });
|
||||
showToast(`已回滚到版本 ${targetVersion}`);
|
||||
setShowVersions(false);
|
||||
loadSkills();
|
||||
} catch (e: any) {
|
||||
showToast(`回滚失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// Publish/Unpublish
|
||||
const handlePublish = async (skill: AdminSkill) => {
|
||||
const price = parseFloat(prompt('设置定价（元，0=免费）:', '0') || '0');
|
||||
if (isNaN(price) || price < 0) return;
|
||||
try {
|
||||
await adminAPI.publishAdminSkill(skill.id, { price, market_description: skill.description || '' });
|
||||
showToast('已发布到应用市场');
|
||||
loadSkills();
|
||||
} catch (e: any) {
|
||||
showToast(`发布失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnpublish = async (skill: AdminSkill) => {
|
||||
if (!confirm('确定从市场下架吗？')) return;
|
||||
try {
|
||||
await adminAPI.unpublishAdminSkill(skill.id);
|
||||
showToast('已从市场下架');
|
||||
loadSkills();
|
||||
} catch (e: any) {
|
||||
showToast(`下架失败: ${e.message || e}`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(total / PAGE_SIZE);
|
||||
const isPublished = (skill: AdminSkill) =>
|
||||
(skill.publish_records || []).some(r => r.status === 'published');
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
{/* Toast */}
|
||||
{toast && (
|
||||
<div className={`toast ${toast.type}`} style={{
|
||||
position: 'fixed', top: 20, right: 20, zIndex: 9999,
|
||||
padding: '12px 20px', borderRadius: 8,
|
||||
background: toast.type === 'success' ? '#10B981' : '#EF4444',
|
||||
color: '#fff', fontSize: 14, boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
|
||||
}}>
|
||||
{toast.msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="admin-page-header">
|
||||
<div>
|
||||
<h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>技能管理</h2>
|
||||
<p style={{ margin: '4px 0 0', color: '#6B7280', fontSize: 13 }}>
|
||||
管理全平台 AI 技能，支持版本历史与市场发布
|
||||
</p>
|
||||
</div>
|
||||
<button className="admin-btn primary" onClick={openCreate}>+ 创建技能</button>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{stats && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 20 }}>
|
||||
<div className="stat-card">
|
||||
<div className="stat-value">{stats.total_skills}</div>
|
||||
<div className="stat-label">技能总数</div>
|
||||
</div>
|
||||
{Object.entries(STATE_CONFIG).map(([state, cfg]) => (
|
||||
<div key={state} className="stat-card" style={{ borderLeft: `3px solid ${cfg.color}` }}>
|
||||
<div className="stat-value">{stats.by_state[state] || 0}</div>
|
||||
<div className="stat-label">{cfg.label}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #8B5CF6' }}>
|
||||
<div className="stat-value">{stats.total_published}</div>
|
||||
<div className="stat-label">已发布市场</div>
|
||||
</div>
|
||||
<div className="stat-card" style={{ borderLeft: '3px solid #3B82F6' }}>
|
||||
<div className="stat-value">{stats.total_versions}</div>
|
||||
<div className="stat-label">版本记录</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="admin-filters" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
|
||||
<input
|
||||
className="admin-form-input"
|
||||
placeholder="搜索技能名称或描述..."
|
||||
value={keyword}
|
||||
onChange={e => setKeyword(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
||||
style={{ maxWidth: 280 }}
|
||||
/>
|
||||
<select className="admin-form-input" value={filterState} onChange={e => { setFilterState(e.target.value); setPage(1); }} style={{ maxWidth: 140 }}>
|
||||
<option value="">全部状态</option>
|
||||
{Object.entries(STATE_CONFIG).map(([k, v]) => (
|
||||
<option key={k} value={k}>{v.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<select className="admin-form-input" value={filterCategory} onChange={e => { setFilterCategory(e.target.value); setPage(1); }} style={{ maxWidth: 160 }}>
|
||||
<option value="">全部分类</option>
|
||||
{CATEGORIES.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<button className="admin-btn" onClick={handleSearch}>搜索</button>
|
||||
{(keyword || filterState || filterCategory) && (
|
||||
<button className="admin-btn" onClick={() => { setKeyword(''); setFilterState(''); setFilterCategory(''); setPage(1); }}>
|
||||
清空筛选
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>技能名称</th>
|
||||
<th>状态</th>
|
||||
<th>分类</th>
|
||||
<th>所有者</th>
|
||||
<th>版本</th>
|
||||
<th>使用次数</th>
|
||||
<th>市场</th>
|
||||
<th>更新时间</th>
|
||||
<th style={{ width: 280 }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</td></tr>
|
||||
) : skills.length === 0 ? (
|
||||
<tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无技能</td></tr>
|
||||
) : skills.map(skill => {
|
||||
const cfg = STATE_CONFIG[skill.state as SkillState] || STATE_CONFIG.baby;
|
||||
const published = isPublished(skill);
|
||||
return (
|
||||
<tr key={skill.id}>
|
||||
<td>
|
||||
<div style={{ fontWeight: 500 }}>{skill.skill_name}</div>
|
||||
{skill.description && (
|
||||
<div style={{ fontSize: 12, color: '#6B7280', marginTop: 2, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{skill.description}
|
||||
</div>
|
||||
)}
|
||||
{skill.tags && skill.tags.length > 0 && (
|
||||
<div style={{ display: 'flex', gap: 4, marginTop: 4, flexWrap: 'wrap' }}>
|
||||
{skill.tags.slice(0, 3).map(tag => (
|
||||
<span key={tag} style={{ fontSize: 11, padding: '1px 6px', background: '#EEF2FF', color: '#6366F1', borderRadius: 4 }}>{tag}</span>
|
||||
))}
|
||||
{skill.tags.length > 3 && <span style={{ fontSize: 11, color: '#6B7280' }}>+{skill.tags.length - 3}</span>}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span style={{
|
||||
display: 'inline-block', padding: '2px 10px', borderRadius: 12, fontSize: 12,
|
||||
background: cfg.bg, color: cfg.color, fontWeight: 500
|
||||
}}>
|
||||
{cfg.label}
|
||||
</span>
|
||||
</td>
|
||||
<td>{skill.category_label || '-'}</td>
|
||||
<td>{skill.owner_username || skill.user_id}</td>
|
||||
<td>v{skill.version}</td>
|
||||
<td>{skill.use_count}</td>
|
||||
<td>
|
||||
{published ? (
|
||||
<span style={{ color: '#10B981', fontSize: 13 }}>✓ 已发布</span>
|
||||
) : (
|
||||
<span style={{ color: '#9CA3AF', fontSize: 13 }}>未发布</span>
|
||||
)}
|
||||
</td>
|
||||
<td style={{ fontSize: 12, color: '#6B7280' }}>
|
||||
{skill.updated_at ? skill.updated_at.slice(0, 16).replace('T', ' ') : '-'}
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||
<button className="admin-btn small" onClick={() => openEdit(skill)}>编辑</button>
|
||||
<button className="admin-btn small" onClick={() => handleShowVersions(skill)}>版本</button>
|
||||
{published ? (
|
||||
<button className="admin-btn small warning" onClick={() => handleUnpublish(skill)}>下架</button>
|
||||
) : (
|
||||
<button className="admin-btn small success" onClick={() => handlePublish(skill)}>发布</button>
|
||||
)}
|
||||
{/* State change */}
|
||||
<select
|
||||
className="admin-form-input small"
|
||||
value={skill.state}
|
||||
onChange={e => handleChangeState(skill, e.target.value)}
|
||||
style={{ padding: '2px 4px', fontSize: 12, maxWidth: 90 }}
|
||||
>
|
||||
{Object.entries(STATE_CONFIG).map(([k, v]) => (
|
||||
<option key={k} value={k}>{v.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<button className="admin-btn small danger" onClick={() => setDeleteTarget(skill)}>删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="admin-pagination">
|
||||
<span style={{ color: '#6B7280', fontSize: 13 }}>
|
||||
共 {total} 条，第 {page}/{totalPages} 页
|
||||
</span>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<button className="admin-btn small" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
|
||||
{[...Array(Math.min(5, totalPages))].map((_, i) => {
|
||||
const p = Math.max(1, Math.min(page - 2, totalPages - 4)) + i;
|
||||
return p <= totalPages && (
|
||||
<button key={p} className={`admin-btn small ${p === page ? 'primary' : ''}`}
|
||||
onClick={() => setPage(p)}>{p}</button>
|
||||
);
|
||||
})}
|
||||
<button className="admin-btn small" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create/Edit Modal */}
|
||||
{showModal && (
|
||||
<div className="modal-overlay" onClick={() => setShowModal(false)}>
|
||||
<div className="modal-content" style={{ maxWidth: 800 }} onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>{editingSkill ? '编辑技能' : '创建技能'}</h3>
|
||||
<button className="modal-close" onClick={() => setShowModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">技能名称 *</label>
|
||||
<input className="admin-form-input" value={form.skill_name}
|
||||
onChange={e => setForm(f => ({ ...f, skill_name: e.target.value }))}
|
||||
placeholder="例如: 代码审查助手" />
|
||||
</div>
|
||||
{!editingSkill && (
|
||||
<div className="form-group">
|
||||
<label className="form-label">所属用户 *</label>
|
||||
<select className="admin-form-input" value={form.user_id}
|
||||
onChange={e => setForm(f => ({ ...f, user_id: e.target.value }))}>
|
||||
{users.map(u => (
|
||||
<option key={u.id} value={u.id}>{u.username}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label className="form-label">分类</label>
|
||||
<select className="admin-form-input" value={form.category}
|
||||
onChange={e => setForm(f => ({ ...f, category: e.target.value }))}>
|
||||
<option value="">选择分类</option>
|
||||
{CATEGORIES.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="form-label">标签（逗号分隔）</label>
|
||||
<input className="admin-form-input" value={form.tags}
|
||||
onChange={e => setForm(f => ({ ...f, tags: e.target.value }))}
|
||||
placeholder="例如: 代码, 审查, 自动化" />
|
||||
</div>
|
||||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="form-label">描述</label>
|
||||
<textarea className="admin-form-input" value={form.description} rows={3}
|
||||
onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
||||
placeholder="描述技能的功能和使用场景..." />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">SKILL.md 内容（技能定义）</label>
|
||||
<textarea
|
||||
className="admin-form-input"
|
||||
value={form.skill_md_content}
|
||||
onChange={e => setForm(f => ({ ...f, skill_md_content: e.target.value }))}
|
||||
style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 400, lineHeight: 1.6 }}
|
||||
placeholder="## 技能定义..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button className="admin-btn" onClick={() => setShowModal(false)}>取消</button>
|
||||
<button className="admin-btn primary" onClick={handleSave}>
|
||||
{editingSkill ? '保存更改' : '创建技能'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Version History Drawer */}
|
||||
{showVersions && versionSkill && (
|
||||
<div className="modal-overlay" onClick={() => setShowVersions(false)}>
|
||||
<div className="modal-content" style={{ maxWidth: 700 }} onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>版本历史 - {versionSkill.skill_name}</h3>
|
||||
<button className="modal-close" onClick={() => setShowVersions(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{loadingVersions ? (
|
||||
<div style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</div>
|
||||
) : versions.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无版本记录</div>
|
||||
) : (
|
||||
<div>
|
||||
{versions.map((v, idx) => (
|
||||
<div key={v.id} style={{
|
||||
padding: 16, marginBottom: 12, border: `1px solid ${idx === 0 ? '#10B981' : '#E5E7EB'}`,
|
||||
borderRadius: 8, background: idx === 0 ? '#F0FDF4' : '#fff'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||||
<div>
|
||||
<span style={{ fontWeight: 600, fontSize: 15 }}>版本 {v.version}</span>
|
||||
{idx === 0 && <span style={{ marginLeft: 8, fontSize: 12, color: '#10B981', background: '#D1FAE5', padding: '1px 8px', borderRadius: 12 }}>当前</span>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 12, color: '#6B7280' }}>{v.created_at?.slice(0, 16).replace('T', ' ')}</span>
|
||||
{idx > 0 && (
|
||||
<button className="admin-btn small" onClick={() => handleRollback(versionSkill, v.version)}>回滚至此</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{v.description && <div style={{ fontSize: 13, color: '#6B7280', marginBottom: 8 }}>{v.description}</div>}
|
||||
{v.skill_md_content && (
|
||||
<details>
|
||||
<summary style={{ fontSize: 13, color: '#6366F1', cursor: 'pointer' }}>查看 SKILL.md 内容</summary>
|
||||
<pre style={{ fontSize: 12, background: '#F9FAFB', padding: 12, borderRadius: 6, marginTop: 8, maxHeight: 300, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
|
||||
{v.skill_md_content}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirm */}
|
||||
{deleteTarget && (
|
||||
<div className="modal-overlay" onClick={() => setDeleteTarget(null)}>
|
||||
<div className="modal-content" style={{ maxWidth: 400 }} onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>确认删除</h3>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>确定要删除技能 <strong>{deleteTarget.skill_name}</strong> 吗？</p>
|
||||
<p style={{ fontSize: 13, color: '#EF4444' }}>此操作不可恢复，相关版本历史也将被删除。</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button className="admin-btn" onClick={() => setDeleteTarget(null)}>取消</button>
|
||||
<button className="admin-btn danger" onClick={handleDelete}>确认删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
.stat-card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
.stat-value { font-size: 24px; font-weight: 700; color: #1F2937; }
|
||||
.stat-label { font-size: 13px; color: #6B7280; margin-top: 4px; }
|
||||
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
|
||||
.modal-content { background: #fff; border-radius: 12px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.modal-header { padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; }
|
||||
.modal-header h3 { margin: 0; font-size: 18px; }
|
||||
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
|
||||
.modal-body { padding: 24px; overflow-y: auto; }
|
||||
.modal-footer { padding: 16px 24px; border-top: 1px solid #E5E7EB; display: flex; justify-content: flex-end; gap: 12px; }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #374151; }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Skills;
|
||||
|
||||
@@ -222,12 +222,17 @@ export interface ModelProvider {
|
||||
protocol: string;
|
||||
apiKey: string;
|
||||
apiBaseUrl: string;
|
||||
// Support both snake_case and camelCase
|
||||
api_key?: string;
|
||||
api_base_url?: string;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
}
|
||||
|
||||
// AIModel: supports both camelCase (TypeScript) and snake_case (from backend API)
|
||||
export interface AIModel {
|
||||
id: string;
|
||||
// camelCase (TypeScript convention)
|
||||
providerId: string;
|
||||
providerName?: string;
|
||||
name: string;
|
||||
@@ -238,8 +243,22 @@ export interface AIModel {
|
||||
status: 'free' | 'paid';
|
||||
pricePerMillionTokens: number;
|
||||
isEnabled: boolean;
|
||||
isDefault?: boolean;
|
||||
totalCalls?: number;
|
||||
totalTokens?: number;
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
// snake_case (from backend)
|
||||
provider_id?: string;
|
||||
provider_name?: string;
|
||||
api_key?: string;
|
||||
price_per_million_tokens?: number;
|
||||
is_enabled?: boolean;
|
||||
is_default?: boolean;
|
||||
total_calls?: number;
|
||||
total_tokens?: number;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
export interface ProtocolDef {
|
||||
|
||||
Reference in new issue
Block a user