File size: 6,845 Bytes
9eb1c55 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
'use client';
import { useState } from 'react';
interface BasicSettingsProps {
data: any;
onChange: (data: any) => void;
}
export default function BasicSettings({ data, onChange }: BasicSettingsProps) {
const [tags, setTags] = useState(data.tags || []);
const [newTag, setNewTag] = useState('');
const agentTypes = [
{ value: 'chat', label: '对话型Agent', desc: '专注于多轮对话和问答' },
{ value: 'analysis', label: '分析型Agent', desc: '数据分析和报告生成' },
{ value: 'generation', label: '生成型Agent', desc: '内容创作和代码生成' },
{ value: 'workflow', label: '工作流型Agent', desc: '复杂任务自动化处理' }
];
const avatars = ['🤖', '🎯', '📊', '💻', '📝', '🔍', '⚡', '🚀', '💡', '🎨'];
const handleInputChange = (field: string, value: any) => {
onChange({ ...data, [field]: value });
};
const addTag = () => {
if (newTag && !tags.includes(newTag)) {
const updatedTags = [...tags, newTag];
setTags(updatedTags);
onChange({ ...data, tags: updatedTags });
setNewTag('');
}
};
const removeTag = (tagToRemove: string) => {
const updatedTags = tags.filter(tag => tag !== tagToRemove);
setTags(updatedTags);
onChange({ ...data, tags: updatedTags });
};
return (
<div className="space-y-8">
<div>
<h3 className="text-lg font-semibold text-gray-900 mb-6">基本信息</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Agent名称</label>
<input
type="text"
placeholder="输入Agent名称"
value={data.name}
onChange={(e) => handleInputChange('name', e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">描述</label>
<textarea
placeholder="描述Agent的功能和用途"
rows={4}
maxLength={500}
value={data.description}
onChange={(e) => handleInputChange('description', e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
/>
<div className="text-xs text-gray-500 mt-1">{data.description.length}/500</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">标签</label>
<div className="flex flex-wrap gap-2 mb-3">
{tags.map((tag, index) => (
<span
key={index}
className="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full"
>
{tag}
<button
onClick={() => removeTag(tag)}
className="ml-2 w-4 h-4 flex items-center justify-center hover:bg-blue-200 rounded-full cursor-pointer"
>
<i className="ri-close-line text-xs"></i>
</button>
</span>
))}
</div>
<div className="flex space-x-2">
<input
type="text"
placeholder="添加标签"
value={newTag}
onChange={(e) => setNewTag(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTag()}
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
/>
<button
onClick={addTag}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap text-sm"
>
添加
</button>
</div>
</div>
</div>
<div className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">选择头像</label>
<div className="grid grid-cols-5 gap-3">
{avatars.map((avatar) => (
<button
key={avatar}
onClick={() => handleInputChange('avatar', avatar)}
className={`w-12 h-12 rounded-xl flex items-center justify-center text-xl cursor-pointer transition-colors ${
data.avatar === avatar
? 'bg-blue-100 border-2 border-blue-500'
: 'bg-gray-100 hover:bg-gray-200 border-2 border-transparent'
}`}
>
{avatar}
</button>
))}
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Agent类型</label>
<div className="space-y-3">
{agentTypes.map((type) => (
<div
key={type.value}
onClick={() => handleInputChange('type', type.value)}
className={`p-4 border rounded-lg cursor-pointer transition-colors ${
data.type === type.value
? 'border-blue-500 bg-blue-50'
: 'border-gray-300 hover:border-gray-400'
}`}
>
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-gray-900">{type.label}</h4>
<p className="text-sm text-gray-600 mt-1">{type.desc}</p>
</div>
<div className={`w-4 h-4 rounded-full border-2 ${
data.type === type.value
? 'border-blue-500 bg-blue-500'
: 'border-gray-300'
}`}>
{data.type === type.value && (
<div className="w-2 h-2 bg-white rounded-full mx-auto mt-0.5"></div>
)}
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
|