682 lines
24 KiB
TypeScript
682 lines
24 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react';
|
|
import { useTheme } from '../contexts/ThemeContext';
|
|
import {
|
|
Search,
|
|
ChevronRight,
|
|
PlayCircle,
|
|
Clock,
|
|
Star,
|
|
FileText,
|
|
User,
|
|
Zap,
|
|
BookOpen,
|
|
TrendingUp,
|
|
MessageSquare,
|
|
Network,
|
|
Link2,
|
|
Filter,
|
|
Layout,
|
|
Sparkles,
|
|
BarChart3,
|
|
Users,
|
|
Target,
|
|
PieChart,
|
|
Send,
|
|
Plus,
|
|
} from 'lucide-react';
|
|
import { Button, Dialog, Radio, Upload, Input, MessagePlugin, Row, Col, Textarea } from 'tdesign-react';
|
|
import { get } from '../lib/api';
|
|
import type { UploadFile, UploadProps } from 'tdesign-react';
|
|
import { requestCrudService } from '@/service/request-axios-service';
|
|
|
|
interface LightAppSquareProps {
|
|
onNavigate: (page: string, appId?: string) => void;
|
|
}
|
|
|
|
// 定义轻应用类型
|
|
export type LightAppType =
|
|
| 'info-ty' // 信息TY
|
|
| 'info-pg' // 信息PG
|
|
| 'info-spread' // 信息传播分析
|
|
| 'account-pg' // 账号PG
|
|
| 'sentiment' // 三情分析
|
|
| 'event' // 事件分析
|
|
| 'topic'; // 专题分析
|
|
|
|
// 应用分类
|
|
type AppCategory = 'info' | 'account' | 'event' | 'topic';
|
|
|
|
interface LightApp {
|
|
id: LightAppType;
|
|
name: string;
|
|
description: string;
|
|
category: AppCategory;
|
|
categoryName: string;
|
|
input: string;
|
|
output: string;
|
|
icon: React.ElementType;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
iconColor: string;
|
|
dimensions?: string[]; // 可选的额外分析维度
|
|
}
|
|
|
|
interface analysisDataItem {
|
|
appName: string;
|
|
appDesc: string;
|
|
appIcon: string;
|
|
jumpUrl: string;
|
|
appType: number
|
|
}
|
|
|
|
interface analysisListItem {
|
|
categoryName: string;
|
|
category: string;
|
|
appName: string;
|
|
appDesc: string;
|
|
appIcon: string;
|
|
jumpUrl: string;
|
|
appType: number
|
|
}
|
|
|
|
interface analysisListData {
|
|
internalList: analysisListItem[];
|
|
externalList: analysisListItem[];
|
|
}
|
|
|
|
// 应用数据
|
|
const lightApps: LightApp[] = [
|
|
// 信息分析类
|
|
{
|
|
id: 'info-ty',
|
|
name: '信息TY',
|
|
description: '围绕单条或多条信息进行TY向分析',
|
|
category: 'info',
|
|
categoryName: '信息分析类',
|
|
input: '信息文本/链接/素材',
|
|
output: '信息特征、重点摘要、分析判断',
|
|
icon: FileText,
|
|
color: 'blue',
|
|
bgColor: 'bg-blue-500/10',
|
|
borderColor: 'border-blue-500/30',
|
|
iconColor: 'text-blue-500',
|
|
dimensions: ['基础分析', '风险提示', '摘要结论'],
|
|
},
|
|
{
|
|
id: 'info-pg',
|
|
name: '信息PG',
|
|
description: '围绕单条或多条信息进行PG向分析',
|
|
category: 'info',
|
|
categoryName: '信息分析类',
|
|
input: '信息文本/链接/素材',
|
|
output: '画像特征、相关判断',
|
|
icon: User,
|
|
color: 'cyan',
|
|
bgColor: 'bg-cyan-500/10',
|
|
borderColor: 'border-cyan-500/30',
|
|
iconColor: 'text-cyan-500',
|
|
dimensions: ['账号画像', '内容倾向', '行为特征'],
|
|
},
|
|
{
|
|
id: 'info-spread',
|
|
name: '信息传播分析',
|
|
description: '分析信息传播路径、传播范围与传播表现',
|
|
category: 'info',
|
|
categoryName: '信息分析类',
|
|
input: '信息链接/信息集合',
|
|
output: '传播过程、传播节点、传播影响',
|
|
icon: Network,
|
|
color: 'teal',
|
|
bgColor: 'bg-teal-500/10',
|
|
borderColor: 'border-teal-500/30',
|
|
iconColor: 'text-teal-500',
|
|
dimensions: ['传播路径', '传播节点', '传播表现', '影响摘要'],
|
|
},
|
|
// 账号分析类
|
|
{
|
|
id: 'account-pg',
|
|
name: '账号PG',
|
|
description: '围绕账号内容与行为特征进行PG分析',
|
|
category: 'account',
|
|
categoryName: '账号分析类',
|
|
input: '账号ID/账号链接/内容集合',
|
|
output: '账号画像、内容倾向、行为特征',
|
|
icon: Users,
|
|
color: 'purple',
|
|
bgColor: 'bg-purple-500/10',
|
|
borderColor: 'border-purple-500/30',
|
|
iconColor: 'text-purple-500',
|
|
dimensions: ['账号画像', '内容倾向', '行为特征', '影响判断'],
|
|
},
|
|
// 事件分析类
|
|
{
|
|
id: 'sentiment',
|
|
name: '三情分析',
|
|
description: '对事件进行舆情、社情、民情综合分析',
|
|
category: 'event',
|
|
categoryName: '事件分析类',
|
|
input: '事件关键词/事件链接/素材',
|
|
output: '情绪概览、关注焦点、风险提示',
|
|
icon: MessageSquare,
|
|
color: 'orange',
|
|
bgColor: 'bg-orange-500/10',
|
|
borderColor: 'border-orange-500/30',
|
|
iconColor: 'text-orange-500',
|
|
dimensions: ['舆情分析', '社情分析', '民情分析', '风险提示'],
|
|
},
|
|
{
|
|
id: 'event',
|
|
name: '事件分析',
|
|
description: '围绕某个事件进行整体分析',
|
|
category: 'event',
|
|
categoryName: '事件分析类',
|
|
input: '事件名称/事件材料/事件链接',
|
|
output: '事件脉络、关键节点、风险判断',
|
|
icon: Target,
|
|
color: 'red',
|
|
bgColor: 'bg-red-500/10',
|
|
borderColor: 'border-red-500/30',
|
|
iconColor: 'text-red-500',
|
|
dimensions: ['事件脉络', '关键节点', '风险判断', '初步建议'],
|
|
},
|
|
// 专题分析类
|
|
{
|
|
id: 'topic',
|
|
name: '专题分析',
|
|
description: '对某专题做集中分析',
|
|
category: 'topic',
|
|
categoryName: '专题分析类',
|
|
input: '专题名称/专题材料/文本集合',
|
|
output: '专题结构、核心问题、观点聚合、结论建议',
|
|
icon: BookOpen,
|
|
color: 'green',
|
|
bgColor: 'bg-green-500/10',
|
|
borderColor: 'border-green-500/30',
|
|
iconColor: 'text-green-500',
|
|
dimensions: ['专题结构', '核心问题', '观点聚合', '结论建议'],
|
|
},
|
|
];
|
|
|
|
const categoryOrder: AppCategory[] = ['info', 'account', 'event', 'topic'];
|
|
const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
|
|
|
|
const LightAppSquare: React.FC<LightAppSquareProps> = ({ onNavigate }) => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [categoryFilter, setCategoryFilter] = useState<AppCategory | 'all'>('all');
|
|
const [recentApps, setRecentApps] = useState<LightAppType[]>(['sentiment', 'event', 'account-pg']);
|
|
const [visible, setVisible] = useState(false);
|
|
const [analysisData, setAnalysisData] = useState<analysisDataItem>({
|
|
appName: '',
|
|
appDesc: '',
|
|
appIcon: '',
|
|
jumpUrl: '',
|
|
appType: 2,
|
|
});
|
|
const [analysisList, setAnalysisList] = useState<analysisListData>(
|
|
{
|
|
internalList: [], // 内部应用
|
|
externalList: [], // 外部应用
|
|
})
|
|
const [fileFail, setFileFail] = useState<UploadFile[]>([
|
|
// 如果需要默认回显图片，可以在这里初始化
|
|
// { name: '默认图片.png', url: 'https://tdesign.gtimg.com/site/avatar.jpg', status: 'fail' }
|
|
]);
|
|
const showImageFileName = true;
|
|
const service = requestCrudService;
|
|
// 解构出 Group 和 Button，方便使用
|
|
const { Group: RadioGroup, Button: RadioButton } = Radio;
|
|
// 用于格式化接口返回的数据，使其符合 TDesign 的要求
|
|
const formatResponse = (res: any) => {
|
|
// 假设接口返回 { code: 0, data: { url: '...' } }
|
|
// 如果接口报错，可以在这里处理，让组件显示失败状态
|
|
if (res.code !== 0) {
|
|
return {
|
|
error: res.message || '上传失败',
|
|
url: '',
|
|
name: ''
|
|
};
|
|
}
|
|
|
|
return {
|
|
url: res.data.url,
|
|
name: res.data.name,
|
|
};
|
|
};
|
|
|
|
const handleChange: UploadProps['onChange'] = (files) => {
|
|
setFileFail(files);
|
|
console.log('当前文件列表:', files);
|
|
};
|
|
|
|
// 过滤应用
|
|
const filteredApps = useMemo(() => {
|
|
return lightApps.filter(app => {
|
|
const matchesSearch = searchQuery === '' ||
|
|
app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
app.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
app.input.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesCategory = categoryFilter === 'all' || app.category === categoryFilter;
|
|
return matchesSearch && matchesCategory;
|
|
});
|
|
}, [searchQuery, categoryFilter]);
|
|
|
|
// 按分类分组
|
|
const groupedApps = useMemo(() => {
|
|
const groups: Record<AppCategory, LightApp[]> = {
|
|
info: [],
|
|
account: [],
|
|
event: [],
|
|
topic: [],
|
|
};
|
|
filteredApps.forEach(app => {
|
|
groups[app.category].push(app);
|
|
});
|
|
return groups;
|
|
}, [filteredApps]);
|
|
|
|
// 处理应用启动
|
|
const handleLaunchApp = (app: LightApp) => {
|
|
console.log('启动应用:', app);
|
|
|
|
// 更新最近使用
|
|
setRecentApps(prev => {
|
|
const filtered = prev.filter(id => id !== app.id);
|
|
return [app.id, ...filtered].slice(0, 5);
|
|
});
|
|
onNavigate('light-app-run', app.id);
|
|
};
|
|
|
|
// 获取分类颜色
|
|
const getCategoryColor = (category: AppCategory) => {
|
|
const colors: Record<AppCategory, { text: string; bg: string }> = {
|
|
info: { text: isDark ? 'text-blue-400' : 'text-blue-600', bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50' },
|
|
account: { text: isDark ? 'text-purple-400' : 'text-purple-600', bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50' },
|
|
event: { text: isDark ? 'text-orange-400' : 'text-orange-600', bg: isDark ? 'bg-orange-500/20' : 'bg-orange-50' },
|
|
topic: { text: isDark ? 'text-green-400' : 'text-green-600', bg: isDark ? 'bg-green-500/20' : 'bg-green-50' },
|
|
};
|
|
return colors[category];
|
|
};
|
|
|
|
// 获取应用列表
|
|
const analysisListSearch = async () => {
|
|
const parmy = {
|
|
appName: '',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
|
|
const res = await service.post(`${zncmUrl}/app/analysis/list`, parmy)
|
|
console.log(res);
|
|
const result = res.data;
|
|
const listData: analysisListData = {
|
|
internalList: [],
|
|
externalList: [],
|
|
}
|
|
result.records.map((item: analysisListItem) => {
|
|
if (item.appType === 1) {
|
|
item.category = 'info';
|
|
item.categoryName = '内部应用';
|
|
listData.internalList.push(item)
|
|
} else if (item.appType === 2) {
|
|
item.category = 'account';
|
|
item.categoryName = '外部应用';
|
|
listData.internalList.push(item)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 添加应用
|
|
const analysieAddListChange = async () => {
|
|
const res = await service.post(`${zncmUrl}/app/analysis/add`, analysisData);
|
|
console.log(res);
|
|
MessagePlugin.success('添加成功');
|
|
}
|
|
|
|
const showDialog = () => {
|
|
setAnalysisData({
|
|
appName: '',
|
|
appDesc: '',
|
|
appIcon: '',
|
|
jumpUrl: '',
|
|
appType: 2,
|
|
})
|
|
setVisible(true);
|
|
};
|
|
|
|
const handleOk = async () => {
|
|
await analysieAddListChange();
|
|
setVisible(false);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setVisible(false);
|
|
};
|
|
|
|
const getBase64 = (file: File): Promise<string> => {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result as string);
|
|
reader.onerror = (error) => reject(error);
|
|
});
|
|
};
|
|
|
|
const imgUpload: UploadProps['requestMethod'] = async (file: any) => {
|
|
console.log('file', file);
|
|
const base64 = await getBase64(file.raw)
|
|
handleDataChange('appIcon', base64);
|
|
return {
|
|
status: 'success',
|
|
// response 对象里的数据会传给 formatResponse
|
|
response: {
|
|
url: '',
|
|
name: '',
|
|
},
|
|
}
|
|
}
|
|
|
|
// 通用的处理函数
|
|
const handleDataChange = (key: keyof typeof analysisData, value: string | number) => {
|
|
setAnalysisData((prev) => ({
|
|
...prev,
|
|
[key]: value,
|
|
}));
|
|
};
|
|
|
|
// 发送请求
|
|
useEffect(() => {
|
|
analysisListSearch();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* 顶部工具栏 */}
|
|
<div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<div className="flex flex-col lg:flex-row lg:items-center gap-4">
|
|
{/* 面包屑和标题 */}
|
|
<div className="flex items-center gap-2 flex-1">
|
|
<Layout className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
|
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>轻应用中心 /</span>
|
|
<span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>应用广场</span>
|
|
</div>
|
|
|
|
{/* 搜索框 */}
|
|
<div className="flex-1 max-w-md">
|
|
<div className="relative">
|
|
<Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="搜索应用名称或分析对象..."
|
|
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 ${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>
|
|
|
|
{/* 筛选和操作 */}
|
|
<div className="flex items-center gap-3">
|
|
<select
|
|
value={categoryFilter}
|
|
onChange={(e) => setCategoryFilter(e.target.value as AppCategory | 'all')}
|
|
className={`px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${isDark
|
|
? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
|
|
: 'bg-gray-50 border-gray-300 text-gray-700 focus:border-red-500'
|
|
}`}
|
|
>
|
|
<option value="all">全部分类</option>
|
|
<option value="info">信息分析类</option>
|
|
<option value="account">账号分析类</option>
|
|
<option value="event">事件分析类</option>
|
|
<option value="topic">专题分析类</option>
|
|
</select>
|
|
<button
|
|
onClick={() => onNavigate('light-app-records')}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${isDark
|
|
? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
<Clock className="w-4 h-4" />
|
|
运行记录
|
|
</button>
|
|
<Button theme="primary" onClick={showDialog}>
|
|
<span className="flex items-center">
|
|
<Plus className="w-4 h-4 mr-[10px]" />
|
|
添加
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 最近使用 */}
|
|
{recentApps.length > 0 && searchQuery === '' && categoryFilter === 'all' && (
|
|
<div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Clock className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
|
<h3 className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>最近使用</h3>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{recentApps.map(appId => {
|
|
const app = lightApps.find(a => a.id === appId);
|
|
if (!app) return null;
|
|
const Icon = app.icon;
|
|
return (
|
|
<button
|
|
key={app.id}
|
|
onClick={() => handleLaunchApp(app)}
|
|
className={`px-4 py-2 rounded-lg border text-sm font-medium flex items-center gap-2 transition-all hover:scale-105 ${isDark
|
|
? `bg-slate-700/50 border-slate-600 text-slate-300 hover:bg-slate-700`
|
|
: `bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100`
|
|
}`}
|
|
>
|
|
<Icon className={`w-4 h-4 ${app.iconColor}`} />
|
|
{app.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 应用分组区 */}
|
|
<div className="space-y-6">
|
|
{categoryOrder.map(category => {
|
|
const apps = groupedApps[category];
|
|
if (apps.length === 0) return null;
|
|
const categoryInfo = lightApps.find(a => a.category === category);
|
|
const catColor = getCategoryColor(category);
|
|
|
|
return (
|
|
<div key={category} className="space-y-4">
|
|
{/* 分类标题 */}
|
|
<div className="flex items-center gap-2">
|
|
<h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{categoryInfo?.categoryName}
|
|
</h2>
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${catColor.bg} ${catColor.text}`}>
|
|
{apps.length} 个应用
|
|
</span>
|
|
</div>
|
|
|
|
{/* 应用卡片网格 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{apps.map(app => {
|
|
const Icon = app.icon;
|
|
return (
|
|
<div
|
|
key={app.id}
|
|
className={`rounded-xl border p-5 transition-all duration-200 hover:shadow-lg group ${isDark
|
|
? 'bg-slate-800/50 border-slate-700 hover:border-slate-600'
|
|
: 'bg-white border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
{/* 应用头部 */}
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className={`p-3 rounded-lg ${app.bgColor}`}>
|
|
<Icon className={`w-6 h-6 ${app.iconColor}`} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className={`font-semibold group-hover:${app.iconColor} ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{app.name}
|
|
</h3>
|
|
<p className={`mt-1 text-sm line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{app.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 输入输出 */}
|
|
<div className={`text-xs space-y-1 mb-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
|
|
<div className="flex items-start gap-2">
|
|
<span className="font-medium">输入：</span>
|
|
<span>{app.input}</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<span className="font-medium">输出：</span>
|
|
<span>{app.output}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 立即使用按钮 */}
|
|
<button
|
|
onClick={() => handleLaunchApp(app)}
|
|
className={`w-full py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 transition-all ${isDark
|
|
? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/30'
|
|
: 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200'
|
|
}`}
|
|
>
|
|
<PlayCircle className="w-4 h-4" />
|
|
立即使用
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* 空状态 */}
|
|
{filteredApps.length === 0 && (
|
|
<div className={`text-center py-12 rounded-xl border ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
|
|
}`}>
|
|
<Search 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 className={`p-4 rounded-xl 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>
|
|
|
|
<Dialog
|
|
header="添加应用"
|
|
visible={visible}
|
|
onClose={handleClose} // 监听关闭事件
|
|
onConfirm={handleOk} // 点击确定按钮
|
|
onCancel={handleClose} // 点击取消按钮
|
|
closeOnOverlayClick={true} // 点击遮罩层是否关闭
|
|
>
|
|
<div className='mb-[10px]'>
|
|
<Upload
|
|
// 对应 v-model
|
|
files={fileFail}
|
|
onChange={handleChange}
|
|
// 对应 theme="image"
|
|
theme="image"
|
|
requestMethod={imgUpload}
|
|
// 对应 accept
|
|
accept="image/*"
|
|
tips="系统logo"
|
|
// 对应 :show-image-file-name
|
|
showImageFileName={showImageFileName}
|
|
// 对应 :format-response
|
|
formatResponse={formatResponse}
|
|
// 可选：限制上传数量（演示单张）
|
|
multiple={false}
|
|
// 可选：上传失败时的提示（如果接口直接返回 4xx/5xx）
|
|
onFail={({ e, file }) => {
|
|
MessagePlugin.error(`文件 ${file.name} 上传失败`);
|
|
}} />
|
|
</div>
|
|
<div className='mb-[10px] overflow-hidden'>
|
|
<Row>
|
|
<Col span={2}>
|
|
<div>名称：</div>
|
|
</Col>
|
|
<Col span={9}>
|
|
<Input placeholder="请输入应用名称" value={analysisData.appName} onChange={(val) => handleDataChange('appName', val)} clearable />
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
<div className='mb-[10px] overflow-hidden'>
|
|
<Row>
|
|
<Col span={2}>
|
|
<div>详情：</div>
|
|
</Col>
|
|
<Col span={9}>
|
|
<Textarea placeholder="请输入应用详情" value={analysisData.appDesc} onChange={(val) => handleDataChange('appDesc', val)} autosize />
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
<div className='mb-[10px] overflow-hidden'>
|
|
<Row>
|
|
<Col span={2}>
|
|
<div>类型：</div>
|
|
</Col>
|
|
<Col span={9}>
|
|
<RadioGroup
|
|
variant="primary-filled" // 对应 variant="primary-filled"
|
|
value={analysisData.appType} // 绑定状态值
|
|
onChange={(value) => handleDataChange('appType', Number(value))}
|
|
>
|
|
{/* 3. 使用 RadioButton */}
|
|
<RadioButton value={1}>内部应用</RadioButton>
|
|
<RadioButton value={2}>外部应用</RadioButton>
|
|
<RadioButton value={3}>第三方集成</RadioButton>
|
|
</RadioGroup>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
<div className='mb-[10px] overflow-hidden'>
|
|
<Row>
|
|
<Col span={2}>
|
|
<div>链接：</div>
|
|
</Col>
|
|
<Col span={9}>
|
|
<Input placeholder="请输入链接" value={analysisData.jumpUrl} onChange={(val) => handleDataChange('jumpUrl', val)} clearable />
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LightAppSquare;
|