797 lines
32 KiB
TypeScript
797 lines
32 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
||
import { adminAPI } from '@/api';
|
||
import './Apps.css';
|
||
import { formatBjTime, formatBjDate } from '@/utils/datetime';
|
||
|
||
interface AIApp {
|
||
id: string;
|
||
name: string;
|
||
description: string | null;
|
||
type: string;
|
||
category: string;
|
||
tags: string | null;
|
||
icon: string | null;
|
||
status: string;
|
||
version: number;
|
||
is_template: boolean;
|
||
is_public: boolean;
|
||
config: any;
|
||
created_at: string | null;
|
||
updated_at: string | null;
|
||
published_at: string | null;
|
||
analytics_7d?: any;
|
||
versions?: any[];
|
||
}
|
||
|
||
interface AppStats {
|
||
total: number;
|
||
published: number;
|
||
draft: number;
|
||
paused: number;
|
||
archived: number;
|
||
templates: number;
|
||
by_type: Record<string, number>;
|
||
by_category: Record<string, number>;
|
||
recent_7d: number;
|
||
total_versions: number;
|
||
}
|
||
|
||
interface Template {
|
||
id: string;
|
||
name: string;
|
||
description: string | null;
|
||
type: string;
|
||
category: string;
|
||
icon: string | null;
|
||
config: any;
|
||
created_at: string | null;
|
||
}
|
||
|
||
const CATEGORY_NAMES: Record<string, string> = {
|
||
customer_service: '客服助手',
|
||
data_analysis: '数据分析',
|
||
coding: '编程辅助',
|
||
writing: '内容创作',
|
||
education: '教育培训',
|
||
marketing: '营销推广',
|
||
hr: '人力资源',
|
||
finance: '财务法务',
|
||
custom: '自定义',
|
||
};
|
||
|
||
const TYPE_NAMES: Record<string, string> = {
|
||
chatbot: '聊天机器人',
|
||
assistant: 'AI助手',
|
||
workflow: '工作流',
|
||
api_service: 'API服务',
|
||
};
|
||
|
||
const STATUS_COLORS: Record<string, string> = {
|
||
draft: '#f59e0b',
|
||
published: '#10b981',
|
||
paused: '#6b7280',
|
||
archived: '#9ca3af',
|
||
};
|
||
|
||
const STATUS_NAMES: Record<string, string> = {
|
||
draft: '草稿',
|
||
published: '已发布',
|
||
paused: '已暂停',
|
||
archived: '已归档',
|
||
};
|
||
|
||
export default function AdminApps() {
|
||
const [activeTab, setActiveTab] = useState<'apps' | 'templates' | 'analytics'>('apps');
|
||
const [stats, setStats] = useState<AppStats | null>(null);
|
||
const [apps, setApps] = useState<AIApp[]>([]);
|
||
const [templates, setTemplates] = useState<Template[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [search, setSearch] = useState('');
|
||
const [filterType, setFilterType] = useState('');
|
||
const [filterStatus, setFilterStatus] = useState('');
|
||
const [filterCategory, setFilterCategory] = useState('');
|
||
const [page, setPage] = useState(1);
|
||
const [total, setTotal] = useState(0);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||
const [editApp, setEditApp] = useState<AIApp | null>(null);
|
||
const [detailApp, setDetailApp] = useState<AIApp | null>(null);
|
||
const [detailAnalytics, setDetailAnalytics] = useState<any>(null);
|
||
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
||
|
||
const fetchStats = useCallback(async () => {
|
||
try {
|
||
const res = await adminAPI.getAIAppStats();
|
||
if (res.code === 0) setStats(res.data);
|
||
} catch (e) { console.error(e); }
|
||
}, []);
|
||
|
||
const fetchApps = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params = new URLSearchParams();
|
||
params.set('page', String(page));
|
||
params.set('page_size', '20');
|
||
if (search) params.set('search', search);
|
||
if (filterType) params.set('app_type', filterType);
|
||
if (filterStatus) params.set('status', filterStatus);
|
||
if (filterCategory) params.set('category', filterCategory);
|
||
const res = await adminAPI.getAIApps(params.toString());
|
||
if (res.code === 0) {
|
||
setApps(res.data.items || []);
|
||
setTotal(res.data.total || 0);
|
||
setTotalPages(res.data.total_pages || 1);
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
finally { setLoading(false); }
|
||
}, [page, search, filterType, filterStatus, filterCategory]);
|
||
|
||
const fetchTemplates = useCallback(async () => {
|
||
try {
|
||
const res = await adminAPI.getAIAppTemplates();
|
||
if (res.code === 0) setTemplates(res.data.items || []);
|
||
} catch (e) { console.error(e); }
|
||
}, []);
|
||
|
||
const fetchDetail = useCallback(async (id: string) => {
|
||
try {
|
||
const res = await adminAPI.getAIApp(id);
|
||
if (res.code === 0) {
|
||
setDetailApp(res.data);
|
||
// Fetch analytics
|
||
try {
|
||
const aRes = await adminAPI.getAIAppAnalytics(id);
|
||
if (aRes.code === 0) setDetailAnalytics(aRes.data);
|
||
} catch (e) { /* analytics may be empty */ }
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
fetchStats();
|
||
}, [fetchStats]);
|
||
|
||
useEffect(() => {
|
||
if (activeTab === 'apps') fetchApps();
|
||
if (activeTab === 'templates') fetchTemplates();
|
||
}, [activeTab, fetchApps, fetchTemplates]);
|
||
|
||
const handleCreate = async (data: any) => {
|
||
try {
|
||
const res = await adminAPI.createAIApp(data);
|
||
if (res.code === 0) {
|
||
setShowCreateModal(false);
|
||
fetchApps();
|
||
fetchStats();
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
};
|
||
|
||
const handleUpdate = async (data: any) => {
|
||
if (!editApp) return;
|
||
try {
|
||
const res = await adminAPI.updateAIApp(editApp.id, data);
|
||
if (res.code === 0) {
|
||
setEditApp(null);
|
||
fetchApps();
|
||
fetchStats();
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
};
|
||
|
||
const handleDelete = async (id: string) => {
|
||
if (!confirm('确定要删除此应用吗？此操作不可逆。')) return;
|
||
try {
|
||
const res = await adminAPI.deleteAIApp(id);
|
||
if (res.code === 0) {
|
||
fetchApps();
|
||
fetchStats();
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
};
|
||
|
||
const handleLifecycle = async (id: string, action: 'publish' | 'pause' | 'archive' | 'duplicate') => {
|
||
try {
|
||
const res = await adminAPI.aiAppLifecycle(id, action);
|
||
if (res.code === 0) {
|
||
fetchApps();
|
||
fetchStats();
|
||
if (detailApp?.id === id) fetchDetail(id);
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
};
|
||
|
||
const handleCreateTemplate = async (data: any) => {
|
||
try {
|
||
const res = await adminAPI.createAIAppTemplate(data);
|
||
if (res.code === 0) {
|
||
setShowTemplateModal(false);
|
||
fetchTemplates();
|
||
fetchStats();
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
};
|
||
|
||
const handleFromTemplate = async (templateId: string, name: string) => {
|
||
try {
|
||
const res = await adminAPI.createAIAppFromTemplate(templateId, { name });
|
||
if (res.code === 0) {
|
||
setActiveTab('apps');
|
||
fetchApps();
|
||
fetchStats();
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
};
|
||
|
||
const formatDate = (dt: string | null) => {
|
||
return formatBjTime(dt);
|
||
};
|
||
|
||
return (
|
||
<div className="admin-apps-page">
|
||
<div className="admin-page-header">
|
||
<h1>AI应用管理</h1>
|
||
<div style={{ display: 'flex', gap: '8px' }}>
|
||
{activeTab === 'apps' && (
|
||
<button className="btn-primary" onClick={() => setShowCreateModal(true)}>+ 创建应用</button>
|
||
)}
|
||
{activeTab === 'templates' && (
|
||
<button className="btn-primary" onClick={() => setShowTemplateModal(true)}>+ 创建模板</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Cards */}
|
||
{stats && (
|
||
<div className="stats-grid">
|
||
<div className="stat-card">
|
||
<div className="stat-value">{stats.total}</div>
|
||
<div className="stat-label">应用总数</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: '#10b981' }}>{stats.published}</div>
|
||
<div className="stat-label">已发布</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: '#f59e0b' }}>{stats.draft}</div>
|
||
<div className="stat-label">草稿</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value">{stats.templates}</div>
|
||
<div className="stat-label">应用模板</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: '#3b82f6' }}>{stats.recent_7d}</div>
|
||
<div className="stat-label">近7天新增</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Tabs */}
|
||
<div className="tabs-bar">
|
||
{([
|
||
{ key: 'apps' as const, label: '应用列表', count: stats?.total },
|
||
{ key: 'templates' as const, label: '应用模板', count: stats?.templates },
|
||
{ key: 'analytics' as const, label: '分析概览', count: undefined as number | undefined },
|
||
]).map(tab => (
|
||
<button
|
||
key={tab.key}
|
||
className={`tab-btn ${activeTab === tab.key ? 'active' : ''}`}
|
||
onClick={() => setActiveTab(tab.key)}
|
||
>
|
||
{tab.label}
|
||
{tab.count !== undefined && tab.count > 0 && (
|
||
<span className="tab-badge">{tab.count}</span>
|
||
)} </button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Apps Tab */}
|
||
{activeTab === 'apps' && (
|
||
<div>
|
||
{/* Filters */}
|
||
<div className="filter-bar">
|
||
<input
|
||
type="text"
|
||
placeholder="搜索应用名称..."
|
||
value={search}
|
||
onChange={e => { setSearch(e.target.value); setPage(1); }}
|
||
className="filter-input"
|
||
/>
|
||
<select value={filterType} onChange={e => { setFilterType(e.target.value); setPage(1); }} className="filter-select">
|
||
<option value="">全部类型</option>
|
||
{Object.entries(TYPE_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
<select value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setPage(1); }} className="filter-select">
|
||
<option value="">全部状态</option>
|
||
{Object.entries(STATUS_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
<select value={filterCategory} onChange={e => { setFilterCategory(e.target.value); setPage(1); }} className="filter-select">
|
||
<option value="">全部分类</option>
|
||
{Object.entries(CATEGORY_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Table */}
|
||
<table className="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>应用名称</th>
|
||
<th>类型</th>
|
||
<th>分类</th>
|
||
<th>状态</th>
|
||
<th>版本</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{loading ? (
|
||
<tr><td colSpan={7} style={{ textAlign: 'center', padding: '40px' }}>加载中...</td></tr>
|
||
) : apps.length === 0 ? (
|
||
<tr><td colSpan={7} style={{ textAlign: 'center', padding: '40px', color: 'var(--color-text-tertiary)' }}>暂无应用</td></tr>
|
||
) : apps.map(app => (
|
||
<tr key={app.id} style={{ cursor: 'pointer' }} onClick={() => fetchDetail(app.id)}>
|
||
<td>
|
||
<div style={{ fontWeight: 500 }}>{app.name}</div>
|
||
{app.description && <div style={{ fontSize: '12px', color: 'var(--color-text-tertiary)', maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{app.description}</div>}
|
||
</td>
|
||
<td><span className="badge">{TYPE_NAMES[app.type] || app.type}</span></td>
|
||
<td>{CATEGORY_NAMES[app.category] || app.category}</td>
|
||
<td>
|
||
<span className="status-badge" style={{ background: STATUS_COLORS[app.status] + '20', color: STATUS_COLORS[app.status] }}>
|
||
{STATUS_NAMES[app.status] || app.status}
|
||
</span>
|
||
</td>
|
||
<td>v{app.version}</td>
|
||
<td style={{ fontSize: '13px', color: 'var(--color-text-secondary)' }}>{formatDate(app.created_at)}</td>
|
||
<td onClick={e => e.stopPropagation()}>
|
||
<div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
|
||
<button className="btn-sm" onClick={() => setEditApp(app)}>编辑</button>
|
||
{app.status === 'draft' && <button className="btn-sm btn-success" onClick={() => handleLifecycle(app.id, 'publish')}>发布</button>}
|
||
{app.status === 'published' && <button className="btn-sm" onClick={() => handleLifecycle(app.id, 'pause')}>暂停</button>}
|
||
{app.status === 'paused' && <button className="btn-sm btn-success" onClick={() => handleLifecycle(app.id, 'publish')}>恢复</button>}
|
||
<button className="btn-sm" onClick={() => handleLifecycle(app.id, 'duplicate')}>复制</button>
|
||
<button className="btn-sm btn-danger" onClick={() => handleDelete(app.id)}>删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
|
||
{/* Pagination */}
|
||
{totalPages > 1 && (
|
||
<div className="pagination">
|
||
<button disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
|
||
<span>第 {page} / {totalPages} 页 (共 {total} 条)</span>
|
||
<button disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Templates Tab */}
|
||
{activeTab === 'templates' && (
|
||
<div className="templates-grid">
|
||
{templates.length === 0 ? (
|
||
<div style={{ textAlign: 'center', padding: '60px', color: 'var(--color-text-tertiary)' }}>
|
||
暂无模板，点击右上角"创建模板"添加
|
||
</div>
|
||
) : templates.map(tpl => (
|
||
<div key={tpl.id} className="template-card">
|
||
<div className="template-icon">{tpl.icon || '📦'}</div>
|
||
<div className="template-name">{tpl.name}</div>
|
||
<div className="template-desc">{tpl.description || '暂无描述'}</div>
|
||
<div className="template-meta">
|
||
<span className="badge">{TYPE_NAMES[tpl.type] || tpl.type}</span>
|
||
<span className="badge">{CATEGORY_NAMES[tpl.category] || tpl.category}</span>
|
||
</div>
|
||
<button className="btn-primary btn-block" onClick={() => {
|
||
const name = prompt('请输入应用名称', tpl.name + ' (Instance)');
|
||
if (name) handleFromTemplate(tpl.id, name);
|
||
}}>从模板创建</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Analytics Tab */}
|
||
{activeTab === 'analytics' && stats && (
|
||
<div>
|
||
<h3 style={{ marginBottom: '16px' }}>应用类型分布</h3>
|
||
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '32px' }}>
|
||
{Object.entries(stats.by_type).map(([type, count]) => (
|
||
<div key={type} className="analytics-card">
|
||
<div className="analytics-value">{count}</div>
|
||
<div className="analytics-label">{TYPE_NAMES[type] || type}</div>
|
||
</div>
|
||
))}
|
||
{Object.keys(stats.by_type).length === 0 && (
|
||
<div style={{ color: 'var(--color-text-tertiary)' }}>暂无数据</div>
|
||
)}
|
||
</div>
|
||
|
||
<h3 style={{ marginBottom: '16px' }}>分类分布</h3>
|
||
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
|
||
{Object.entries(stats.by_category).map(([cat, count]) => (
|
||
<div key={cat} className="analytics-card">
|
||
<div className="analytics-value">{count}</div>
|
||
<div className="analytics-label">{CATEGORY_NAMES[cat] || cat}</div>
|
||
</div>
|
||
))}
|
||
{Object.keys(stats.by_category).length === 0 && (
|
||
<div style={{ color: 'var(--color-text-tertiary)' }}>暂无数据</div>
|
||
)}
|
||
</div>
|
||
|
||
<h3 style={{ marginTop: '32px', marginBottom: '16px' }}>版本统计</h3>
|
||
<div className="analytics-card" style={{ display: 'inline-block' }}>
|
||
<div className="analytics-value">{stats.total_versions}</div>
|
||
<div className="analytics-label">总版本数</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Create/Edit Modal */}
|
||
{(showCreateModal || editApp) && (
|
||
<AppFormModal
|
||
app={editApp}
|
||
onClose={() => { setShowCreateModal(false); setEditApp(null); }}
|
||
onSubmit={editApp ? handleUpdate : handleCreate}
|
||
/>
|
||
)}
|
||
|
||
{/* Template Modal */}
|
||
{showTemplateModal && (
|
||
<TemplateFormModal
|
||
onClose={() => setShowTemplateModal(false)}
|
||
onSubmit={handleCreateTemplate}
|
||
/>
|
||
)}
|
||
|
||
{/* Detail Drawer */}
|
||
{detailApp && (
|
||
<AppDetailDrawer
|
||
app={detailApp}
|
||
analytics={detailAnalytics}
|
||
onClose={() => { setDetailApp(null); setDetailAnalytics(null); }}
|
||
onAction={handleLifecycle}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============================================================
|
||
// App Form Modal
|
||
// ============================================================
|
||
|
||
function AppFormModal({ app, onClose, onSubmit }: {
|
||
app: AIApp | null;
|
||
onClose: () => void;
|
||
onSubmit: (data: any) => void;
|
||
}) {
|
||
const [name, setName] = useState(app?.name || '');
|
||
const [description, setDescription] = useState(app?.description || '');
|
||
const [type, setType] = useState(app?.type || 'chatbot');
|
||
const [category, setCategory] = useState(app?.category || 'custom');
|
||
const [tags, setTags] = useState(app?.tags || '');
|
||
const [systemPrompt, setSystemPrompt] = useState(app?.config?.system_prompt || '');
|
||
const [temperature, setTemperature] = useState(app?.config?.temperature ?? 0.7);
|
||
const [maxTokens, setMaxTokens] = useState(app?.config?.max_tokens ?? 2000);
|
||
const [welcomeMessage, setWelcomeMessage] = useState(app?.config?.welcome_message || '');
|
||
|
||
const handleSubmit = () => {
|
||
if (!name.trim()) { alert('请输入应用名称'); return; }
|
||
onSubmit({
|
||
name, description, type, category, tags,
|
||
config: {
|
||
...(app?.config || {}),
|
||
system_prompt: systemPrompt,
|
||
temperature: Number(temperature),
|
||
max_tokens: Number(maxTokens),
|
||
welcome_message: welcomeMessage,
|
||
}
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal-content" style={{ maxWidth: '600px' }} onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2>{app ? '编辑应用' : '创建应用'}</h2>
|
||
<button className="modal-close" onClick={onClose}>×</button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div className="form-group">
|
||
<label>应用名称 *</label>
|
||
<input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="输入应用名称" />
|
||
</div>
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label>类型</label>
|
||
<select value={type} onChange={e => setType(e.target.value)}>
|
||
{Object.entries(TYPE_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>分类</label>
|
||
<select value={category} onChange={e => setCategory(e.target.value)}>
|
||
{Object.entries(CATEGORY_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>描述</label>
|
||
<textarea value={description} onChange={e => setDescription(e.target.value)} placeholder="应用描述" rows={2} />
|
||
</div>
|
||
<div className="form-group">
|
||
<label>标签（逗号分隔）</label>
|
||
<input type="text" value={tags} onChange={e => setTags(e.target.value)} placeholder="如：客服,电商,自动回复" />
|
||
</div>
|
||
<div className="form-section-title">AI配置</div>
|
||
<div className="form-group">
|
||
<label>系统提示词 (System Prompt)</label>
|
||
<textarea value={systemPrompt} onChange={e => setSystemPrompt(e.target.value)} placeholder="定义AI的角色和行为..." rows={4} />
|
||
</div>
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label>温度 (Temperature): {temperature}</label>
|
||
<input type="range" min="0" max="2" step="0.1" value={temperature} onChange={e => setTemperature(Number(e.target.value))} style={{ width: '100%' }} />
|
||
</div>
|
||
<div className="form-group">
|
||
<label>最大Token数</label>
|
||
<input type="number" value={maxTokens} onChange={e => setMaxTokens(Number(e.target.value))} min="100" max="32000" />
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>欢迎消息</label>
|
||
<input type="text" value={welcomeMessage} onChange={e => setWelcomeMessage(e.target.value)} placeholder="用户打开应用时显示的欢迎语" />
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button className="btn-secondary" onClick={onClose}>取消</button>
|
||
<button className="btn-primary" onClick={handleSubmit}>{app ? '保存' : '创建'}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============================================================
|
||
// Template Form Modal
|
||
// ============================================================
|
||
|
||
function TemplateFormModal({ onClose, onSubmit }: {
|
||
onClose: () => void;
|
||
onSubmit: (data: any) => void;
|
||
}) {
|
||
const [name, setName] = useState('');
|
||
const [description, setDescription] = useState('');
|
||
const [type, setType] = useState('chatbot');
|
||
const [category, setCategory] = useState('custom');
|
||
const [systemPrompt, setSystemPrompt] = useState('');
|
||
const [temperature, setTemperature] = useState(0.7);
|
||
const [maxTokens, setMaxTokens] = useState(2000);
|
||
|
||
const handleSubmit = () => {
|
||
if (!name.trim()) { alert('请输入模板名称'); return; }
|
||
onSubmit({
|
||
name, description, type, category,
|
||
config: {
|
||
system_prompt: systemPrompt,
|
||
temperature: Number(temperature),
|
||
max_tokens: Number(maxTokens),
|
||
skill_ids: [],
|
||
knowledge_base_ids: [],
|
||
tools: [],
|
||
welcome_message: ''
|
||
}
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal-content" style={{ maxWidth: '500px' }} onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2>创建应用模板</h2>
|
||
<button className="modal-close" onClick={onClose}>×</button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div className="form-group">
|
||
<label>模板名称 *</label>
|
||
<input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="如：电商客服机器人" />
|
||
</div>
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label>类型</label>
|
||
<select value={type} onChange={e => setType(e.target.value)}>
|
||
{Object.entries(TYPE_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>分类</label>
|
||
<select value={category} onChange={e => setCategory(e.target.value)}>
|
||
{Object.entries(CATEGORY_NAMES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label>描述</label>
|
||
<textarea value={description} onChange={e => setDescription(e.target.value)} placeholder="模板描述" rows={2} />
|
||
</div>
|
||
<div className="form-group">
|
||
<label>系统提示词</label>
|
||
<textarea value={systemPrompt} onChange={e => setSystemPrompt(e.target.value)} placeholder="预置的系统提示词..." rows={4} />
|
||
</div>
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label>温度: {temperature}</label>
|
||
<input type="range" min="0" max="2" step="0.1" value={temperature} onChange={e => setTemperature(Number(e.target.value))} style={{ width: '100%' }} />
|
||
</div>
|
||
<div className="form-group">
|
||
<label>最大Token数</label>
|
||
<input type="number" value={maxTokens} onChange={e => setMaxTokens(Number(e.target.value))} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button className="btn-secondary" onClick={onClose}>取消</button>
|
||
<button className="btn-primary" onClick={handleSubmit}>创建模板</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ============================================================
|
||
// App Detail Drawer
|
||
// ============================================================
|
||
|
||
function AppDetailDrawer({ app, analytics, onClose, onAction }: {
|
||
app: AIApp;
|
||
analytics: any;
|
||
onClose: () => void;
|
||
onAction: (id: string, action: 'publish' | 'pause' | 'archive' | 'duplicate') => void;
|
||
}) {
|
||
const a7 = app.analytics_7d as any;
|
||
const summary = analytics?.summary;
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose} style={{ justifyContent: 'flex-end' }}>
|
||
<div className="modal-content" style={{ maxWidth: '560px', height: '100vh', borderRadius: 0 }} onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2>{app.name}</h2>
|
||
<button className="modal-close" onClick={onClose}>×</button>
|
||
</div>
|
||
<div className="modal-body" style={{ overflow: 'auto' }}>
|
||
{/* Status & Meta */}
|
||
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
|
||
<span className="status-badge" style={{ background: STATUS_COLORS[app.status] + '20', color: STATUS_COLORS[app.status] }}>
|
||
{STATUS_NAMES[app.status] || app.status}
|
||
</span>
|
||
<span className="badge">{TYPE_NAMES[app.type] || app.type}</span>
|
||
<span className="badge">{CATEGORY_NAMES[app.category] || app.category}</span>
|
||
<span className="badge">v{app.version}</span>
|
||
</div>
|
||
|
||
{app.description && <p style={{ color: 'var(--color-text-secondary)', marginBottom: '16px' }}>{app.description}</p>}
|
||
|
||
{/* Quick Stats */}
|
||
<div className="stats-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', marginBottom: '24px' }}>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '20px' }}>{a7?.conversations || 0}</div>
|
||
<div className="stat-label">7天对话</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '20px' }}>{a7?.tokens || 0}</div>
|
||
<div className="stat-label">7天Token</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '20px' }}>{a7?.errors || 0}</div>
|
||
<div className="stat-label">7天错误</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Config */}
|
||
<h3 style={{ marginBottom: '12px' }}>应用配置</h3>
|
||
<div className="config-section">
|
||
{app.config?.system_prompt && (
|
||
<div className="config-item">
|
||
<span className="config-label">系统提示词</span>
|
||
<div className="config-value">{app.config.system_prompt}</div>
|
||
</div>
|
||
)}
|
||
<div className="config-item">
|
||
<span className="config-label">温度</span>
|
||
<div className="config-value">{app.config?.temperature ?? 'N/A'}</div>
|
||
</div>
|
||
<div className="config-item">
|
||
<span className="config-label">最大Token</span>
|
||
<div className="config-value">{app.config?.max_tokens ?? 'N/A'}</div>
|
||
</div>
|
||
{app.config?.skill_ids?.length > 0 && (
|
||
<div className="config-item">
|
||
<span className="config-label">绑定技能</span>
|
||
<div className="config-value">{app.config.skill_ids.length} 个技能</div>
|
||
</div>
|
||
)}
|
||
{app.config?.knowledge_base_ids?.length > 0 && (
|
||
<div className="config-item">
|
||
<span className="config-label">绑定知识库</span>
|
||
<div className="config-value">{app.config.knowledge_base_ids.length} 个知识库</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Versions */}
|
||
{app.versions && app.versions.length > 0 && (
|
||
<>
|
||
<h3 style={{ marginTop: '24px', marginBottom: '12px' }}>版本历史</h3>
|
||
<div className="version-list">
|
||
{app.versions.map((v: any) => (
|
||
<div key={v.id} className="version-item">
|
||
<span className="version-num">v{v.version}</span>
|
||
<span className="version-log">{v.changelog}</span>
|
||
<span className="version-date">{v.created_at ? formatBjDate(v.created_at) : '-'}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Analytics Detail */}
|
||
{summary && (
|
||
<>
|
||
<h3 style={{ marginTop: '24px', marginBottom: '12px' }}>分析数据 ({analytics.days}天)</h3>
|
||
<div className="stats-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', marginBottom: '16px' }}>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '18px' }}>{summary.conversations}</div>
|
||
<div className="stat-label">总对话数</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '18px' }}>{summary.messages}</div>
|
||
<div className="stat-label">总消息数</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '18px' }}>{summary.tokens_input + summary.tokens_output}</div>
|
||
<div className="stat-label">总Token</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '18px' }}>{summary.active_users}</div>
|
||
<div className="stat-label">活跃用户</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '18px' }}>{summary.avg_response_ms}ms</div>
|
||
<div className="stat-label">平均响应</div>
|
||
</div>
|
||
<div className="stat-card" style={{ padding: '12px' }}>
|
||
<div className="stat-value" style={{ fontSize: '18px' }}>{summary.error_rate}%</div>
|
||
<div className="stat-label">错误率</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Timestamps */}
|
||
<div style={{ marginTop: '24px', fontSize: '13px', color: 'var(--color-text-tertiary)' }}>
|
||
<div>创建时间: {app.created_at ? formatBjTime(app.created_at) : '-'}</div>
|
||
<div>更新时间: {app.updated_at ? formatBjTime(app.updated_at) : '-'}</div>
|
||
{app.published_at && <div>发布时间: {formatBjTime(app.published_at)}</div>}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="modal-footer" style={{ justifyContent: 'flex-start' }}>
|
||
{app.status === 'draft' && <button className="btn-primary" onClick={() => onAction(app.id, 'publish')}>发布</button>}
|
||
{app.status === 'published' && <button className="btn-secondary" onClick={() => onAction(app.id, 'pause')}>暂停</button>}
|
||
{app.status === 'paused' && <button className="btn-primary" onClick={() => onAction(app.id, 'publish')}>恢复发布</button>}
|
||
<button className="btn-secondary" onClick={() => onAction(app.id, 'duplicate')}>复制应用</button>
|
||
<button className="btn-secondary" onClick={() => onAction(app.id, 'archive')}>归档</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|