486 lines
17 KiB
TypeScript
486 lines
17 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useTheme } from '../contexts/ThemeContext';
|
||
import {
|
||
BarChart,
|
||
FileText,
|
||
Table,
|
||
Search,
|
||
Send,
|
||
Sparkles,
|
||
Clock,
|
||
ChevronRight,
|
||
Bot,
|
||
Loader2,
|
||
Copy,
|
||
CheckCheck,
|
||
Download,
|
||
RefreshCw,
|
||
FileBarChart,
|
||
Database,
|
||
Brain,
|
||
PieChart,
|
||
LineChart,
|
||
FileSpreadsheet,
|
||
FileSearch,
|
||
BookOpen,
|
||
} from 'lucide-react';
|
||
|
||
interface LightAppCenterProps {
|
||
onNavigate: (page: string) => void;
|
||
initialApp?: 'analysis' | 'report' | 'data' | 'research';
|
||
}
|
||
|
||
type AppType = 'analysis' | 'report' | 'data' | 'research';
|
||
|
||
interface AppCard {
|
||
id: AppType;
|
||
title: string;
|
||
description: string;
|
||
icon: React.ElementType;
|
||
color: string;
|
||
}
|
||
|
||
const apps: AppCard[] = [
|
||
{
|
||
id: 'analysis',
|
||
title: '快速分析',
|
||
description: '对文本、数据进行快速分析处理，提取关键信息和洞察',
|
||
icon: BarChart,
|
||
color: 'blue',
|
||
},
|
||
{
|
||
id: 'report',
|
||
title: '报告生成',
|
||
description: '基于输入内容生成结构化分析报告，支持多种格式',
|
||
icon: FileText,
|
||
color: 'green',
|
||
},
|
||
{
|
||
id: 'data',
|
||
title: '数据处理',
|
||
description: '数据清洗、转换、统计和可视化处理',
|
||
icon: Table,
|
||
color: 'purple',
|
||
},
|
||
{
|
||
id: 'research',
|
||
title: '研究助手',
|
||
description: '辅助学术研究和资料整理，支持文献分析和摘要',
|
||
icon: Search,
|
||
color: 'orange',
|
||
},
|
||
];
|
||
|
||
const LightAppCenter: React.FC<LightAppCenterProps> = ({ onNavigate, initialApp }) => {
|
||
const { theme } = useTheme();
|
||
const isDark = theme === 'dark';
|
||
const [selectedApp, setSelectedApp] = useState<AppType | null>(initialApp || null);
|
||
const [input, setInput] = useState('');
|
||
const [isProcessing, setIsProcessing] = useState(false);
|
||
const [result, setResult] = useState('');
|
||
const [copied, setCopied] = useState(false);
|
||
const [activeTab, setActiveTab] = useState<'input' | 'history'>('input');
|
||
|
||
const handleAppSelect = (app: AppCard) => {
|
||
setSelectedApp(app.id);
|
||
setInput('');
|
||
setResult('');
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
if (!input.trim() || !selectedApp) return;
|
||
|
||
setIsProcessing(true);
|
||
setResult('');
|
||
|
||
// 模拟处理过程
|
||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
||
// 根据不同应用生成模拟结果
|
||
let mockResult = '';
|
||
switch (selectedApp) {
|
||
case 'analysis':
|
||
mockResult = `【分析结果】
|
||
|
||
1. 关键主题
|
||
• 主题A：核心概念和定义
|
||
• 主题B：应用场景和实践
|
||
• 主题C：发展趋势和展望
|
||
|
||
2. 情感分析
|
||
• 整体倾向：中性偏正面
|
||
• 关键情感词：创新、发展、应用
|
||
|
||
3. 关键实体
|
||
• 机构：示例机构
|
||
• 人物：相关专家
|
||
• 地点：主要应用区域
|
||
|
||
4. 重要数据
|
||
• 增长率：15-20%
|
||
• 覆盖范围：多个领域
|
||
• 时间周期：持续进行`;
|
||
break;
|
||
case 'report':
|
||
mockResult = `# 分析报告
|
||
|
||
## 概述
|
||
基于提供的内容，生成以下分析报告。
|
||
|
||
## 主要发现
|
||
|
||
### 1. 核心内容
|
||
详细描述主要发现和观察结果...
|
||
|
||
### 2. 深入分析
|
||
对关键点进行深入分析和解读...
|
||
|
||
### 3. 结论建议
|
||
基于分析结果提出建议和行动方案...
|
||
|
||
## 附录
|
||
- 数据来源
|
||
- 分析方法
|
||
- 局限性说明`;
|
||
break;
|
||
case 'data':
|
||
mockResult = `【数据处理结果】
|
||
|
||
| 指标 | 数值 | 变化 |
|
||
|------|------|------|
|
||
| 样本量 | 1,234 | +12% |
|
||
| 准确率 | 95.6% | +3.2% |
|
||
| 覆盖率 | 89.3% | +8.7% |
|
||
|
||
统计摘要：
|
||
• 总计处理 1,234 条记录
|
||
• 有效数据 1,156 条（93.7%）
|
||
• 异常数据 78 条（6.3%）
|
||
|
||
图表数据已准备好可视化`;
|
||
break;
|
||
case 'research':
|
||
mockResult = `【研究摘要】
|
||
|
||
## 文献概览
|
||
找到相关研究文献 12 篇，主要涉及以下方向：
|
||
|
||
### 核心观点
|
||
1. 研究方向A - 理论基础
|
||
2. 研究方向B - 方法论
|
||
3. 研究方向C - 实证应用
|
||
|
||
### 关键结论
|
||
• 结论1：...
|
||
• 结论2：...
|
||
• 结论3：...
|
||
|
||
### 研究空白
|
||
当前研究存在以下空白点，可作为进一步探索的方向...
|
||
|
||
### 建议阅读
|
||
1. 《核心文献一》- 理论基础
|
||
2. 《核心文献二》- 方法创新
|
||
3. 《核心文献三》- 实践应用`;
|
||
break;
|
||
}
|
||
|
||
setResult(mockResult);
|
||
setIsProcessing(false);
|
||
};
|
||
|
||
const handleCopy = () => {
|
||
navigator.clipboard.writeText(result);
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 2000);
|
||
};
|
||
|
||
const getColorClasses = (color: string) => {
|
||
const colors: Record<string, { bg: string; text: string; border: string; light: string }> = {
|
||
blue: {
|
||
bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50',
|
||
text: isDark ? 'text-blue-400' : 'text-blue-600',
|
||
border: isDark ? 'border-blue-500/30' : 'border-blue-200',
|
||
light: isDark ? 'hover:bg-blue-500/30' : 'hover:bg-blue-100',
|
||
},
|
||
green: {
|
||
bg: isDark ? 'bg-green-500/20' : 'bg-green-50',
|
||
text: isDark ? 'text-green-400' : 'text-green-600',
|
||
border: isDark ? 'border-green-500/30' : 'border-green-200',
|
||
light: isDark ? 'hover:bg-green-500/30' : 'hover:bg-green-100',
|
||
},
|
||
purple: {
|
||
bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50',
|
||
text: isDark ? 'text-purple-400' : 'text-purple-600',
|
||
border: isDark ? 'border-purple-500/30' : 'border-purple-200',
|
||
light: isDark ? 'hover:bg-purple-500/30' : 'hover:bg-purple-100',
|
||
},
|
||
orange: {
|
||
bg: isDark ? 'bg-orange-500/20' : 'bg-orange-50',
|
||
text: isDark ? 'text-orange-400' : 'text-orange-600',
|
||
border: isDark ? 'border-orange-500/30' : 'border-orange-200',
|
||
light: isDark ? 'hover:bg-orange-500/30' : 'hover:bg-orange-100',
|
||
},
|
||
};
|
||
return colors[color];
|
||
};
|
||
|
||
const selectedAppData = apps.find(a => a.id === selectedApp);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className={`text-2xl font-bold theme-text ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
轻应用中心
|
||
</h1>
|
||
<p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||
快速调用工具完成临时分析需求
|
||
</p>
|
||
</div>
|
||
{selectedApp && (
|
||
<button
|
||
onClick={() => setSelectedApp(null)}
|
||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
|
||
isDark
|
||
? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
|
||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
返回应用列表
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* 应用选择卡片 */}
|
||
{!selectedApp && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{apps.map((app) => {
|
||
const Icon = app.icon;
|
||
const colors = getColorClasses(app.color);
|
||
return (
|
||
<button
|
||
key={app.id}
|
||
onClick={() => handleAppSelect(app)}
|
||
className={`p-6 rounded-xl border transition-all duration-200 text-left group ${
|
||
isDark
|
||
? `bg-slate-800/50 ${colors.border} hover:${colors.bg}`
|
||
: `bg-white ${colors.border} hover:${colors.bg}`
|
||
}`}
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div className={`p-3 rounded-lg ${colors.bg}`}>
|
||
<Icon className={`w-6 h-6 ${colors.text}`} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className={`font-semibold group-hover:${colors.text} ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
{app.title}
|
||
</h3>
|
||
<p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||
{app.description}
|
||
</p>
|
||
</div>
|
||
<ChevronRight className={`w-5 h-5 ${isDark ? 'text-slate-500' : 'text-gray-400'} group-hover:${colors.text}`} />
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* 应用工作区 */}
|
||
{selectedApp && selectedAppData && (
|
||
<div className={`rounded-xl border overflow-hidden ${
|
||
isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
|
||
}`}>
|
||
{/* 应用标题栏 */}
|
||
<div className={`px-6 py-4 border-b flex items-center gap-3 ${
|
||
isDark ? 'border-slate-700 bg-slate-800' : 'border-gray-200 bg-gray-50'
|
||
}`}>
|
||
<div className={`p-2 rounded-lg ${getColorClasses(selectedAppData.color).bg}`}>
|
||
{React.createElement(selectedAppData.icon, {
|
||
className: `w-5 h-5 ${getColorClasses(selectedAppData.color).text}`
|
||
})}
|
||
</div>
|
||
<div>
|
||
<h2 className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
{selectedAppData.title}
|
||
</h2>
|
||
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||
{selectedAppData.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 标签页 */}
|
||
<div className={`px-6 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={() => setActiveTab('input')}
|
||
className={`py-3 px-1 text-sm font-medium border-b-2 transition-colors ${
|
||
activeTab === 'input'
|
||
? isDark
|
||
? 'border-blue-500 text-blue-400'
|
||
: 'border-red-500 text-red-600'
|
||
: isDark
|
||
? 'border-transparent text-slate-400 hover:text-slate-300'
|
||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||
}`}
|
||
>
|
||
输入分析
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('history')}
|
||
className={`py-3 px-1 text-sm font-medium border-b-2 transition-colors ${
|
||
activeTab === 'history'
|
||
? isDark
|
||
? 'border-blue-500 text-blue-400'
|
||
: 'border-red-500 text-red-600'
|
||
: isDark
|
||
? 'border-transparent text-slate-400 hover:text-slate-300'
|
||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||
}`}
|
||
>
|
||
历史记录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6">
|
||
{activeTab === 'input' ? (
|
||
<div className="space-y-4">
|
||
{/* 输入区域 */}
|
||
<div>
|
||
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
|
||
输入内容
|
||
</label>
|
||
<textarea
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
placeholder={`请输入需要${selectedAppData.title}的内容...`}
|
||
rows={6}
|
||
className={`w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 resize-none ${
|
||
isDark
|
||
? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:ring-blue-500/20'
|
||
: 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-red-500/20'
|
||
}`}
|
||
/>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<button className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
||
<RefreshCw className="w-4 h-4" />
|
||
</button>
|
||
<button className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
||
<FileBarChart className="w-4 h-4" />
|
||
</button>
|
||
<button className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
||
<Database className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={handleSubmit}
|
||
disabled={!input.trim() || isProcessing}
|
||
className={`px-6 py-2.5 rounded-lg font-medium flex items-center gap-2 transition-all duration-200 ${
|
||
!input.trim() || isProcessing
|
||
? isDark
|
||
? 'bg-slate-700 text-slate-500 cursor-not-allowed'
|
||
: 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
||
: isDark
|
||
? 'bg-blue-600 text-white hover:bg-blue-500'
|
||
: 'bg-red-500 text-white hover:bg-red-600'
|
||
}`}
|
||
>
|
||
{isProcessing ? (
|
||
<>
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
处理中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Send className="w-4 h-4" />
|
||
开始处理
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 结果区域 */}
|
||
{result && (
|
||
<div className={`mt-6 p-4 rounded-lg border ${
|
||
isDark ? 'bg-slate-900 border-slate-700' : 'bg-gray-50 border-gray-200'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<Sparkles className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
||
<span className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
|
||
处理结果
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={handleCopy}
|
||
className={`p-1.5 rounded-lg transition-colors ${
|
||
isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
|
||
}`}
|
||
>
|
||
{copied ? (
|
||
<CheckCheck className="w-4 h-4 text-green-500" />
|
||
) : (
|
||
<Copy className="w-4 h-4" />
|
||
)}
|
||
</button>
|
||
<button className={`p-1.5 rounded-lg transition-colors ${
|
||
isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
|
||
}`}>
|
||
<Download className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<pre className={`whitespace-pre-wrap text-sm font-mono leading-relaxed ${
|
||
isDark ? 'text-slate-300' : 'text-gray-600'
|
||
}`}>
|
||
{result}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-12">
|
||
<Clock className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
|
||
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||
暂无历史记录
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 提示信息 */}
|
||
{!selectedApp && (
|
||
<div className={`p-4 rounded-lg border ${
|
||
isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'
|
||
}`}>
|
||
<div className="flex items-start gap-3">
|
||
<Sparkles className={`w-5 h-5 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
|
||
<div>
|
||
<p className={`text-sm font-medium ${isDark ? 'text-blue-300' : 'text-blue-800'}`}>
|
||
关于轻应用中心
|
||
</p>
|
||
<p className={`mt-1 text-sm ${isDark ? 'text-blue-400/80' : 'text-blue-700'}`}>
|
||
轻应用中心提供了一系列快速分析工具，适合处理临时性的分析需求。相比完整的任务级应用，轻应用更加轻量便捷，可以快速调用多种工具完成分析工作。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LightAppCenter;
|