802 lines
26 KiB
React
802 lines
26 KiB
React
import React, { useState, useEffect } from 'react';
|
||
import usePresetStore from '../../../../Store/SideBarLeft/PresetSlice';
|
||
import useSideBarLeftStore from '../../../../Store/SideBarLeft/SideBarLeftSlice';
|
||
import './Presets.css';
|
||
|
||
const PresetPanel = () => {
|
||
const {
|
||
selectedPreset,
|
||
parameters,
|
||
presets,
|
||
isLoadingPresets,
|
||
promptComponents,
|
||
setSelectedPreset,
|
||
updateParameter,
|
||
saveCurrentAsPreset,
|
||
editPresetName: updatePresetName,
|
||
isParametersExpanded,
|
||
toggleParametersExpanded,
|
||
fetchPresets,
|
||
setPromptComponents,
|
||
toggleComponentEnabled,
|
||
updateComponent,
|
||
addComponent,
|
||
removeComponent,
|
||
moveComponent
|
||
} = usePresetStore();
|
||
|
||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||
const [showEditDialog, setShowEditDialog] = useState(false);
|
||
const [showImportDialog, setShowImportDialog] = useState(false);
|
||
const [showComponentEditDialog, setShowComponentEditDialog] = useState(false);
|
||
const [newPresetName, setNewPresetName] = useState('');
|
||
const [editPresetId, setEditPresetId] = useState('');
|
||
const [editPresetName, setEditPresetName] = useState('');
|
||
const [importPresetData, setImportPresetData] = useState('');
|
||
const [tooltip, setTooltip] = useState({ visible: false, content: '', x: 0, y: 0 });
|
||
|
||
// 组件编辑状态
|
||
const [editingComponentIndex, setEditingComponentIndex] = useState(-1);
|
||
const [editComponentContent, setEditComponentContent] = useState('');
|
||
const [isEditing, setIsEditing] = useState(false);
|
||
|
||
// 拖拽状态
|
||
const [draggedItem, setDraggedItem] = useState(null);
|
||
const [dragOverItem, setDragOverItem] = useState(null);
|
||
|
||
// 获取当前激活的分页
|
||
const { activeTab } = useSideBarLeftStore();
|
||
|
||
// 记录上一次的分页状态
|
||
const prevActiveTabRef = React.useRef(activeTab);
|
||
|
||
// 参数描述映射
|
||
const parameterDescriptions = {
|
||
temperature: "生成温度，控制随机性(0-2)",
|
||
frequency_penalty: "频率惩罚，降低重复token概率",
|
||
presence_penalty: "存在惩罚，鼓励谈论新话题",
|
||
top_p: "核采样，控制词汇选择范围",
|
||
top_k: "随机采样范围，从概率最高的K个词中选择",
|
||
max_context: "上下文窗口大小(Token上限)",
|
||
max_tokens: "单次回复的最大长度",
|
||
max_context_unlocked: "是否允许超出限制的上下文",
|
||
stream_openai: "是否使用流式输出",
|
||
seed: "随机种子(-1为随机)",
|
||
n: "生成回复的数量"
|
||
};
|
||
|
||
// 显示工具提示
|
||
const showTooltip = (event, content) => {
|
||
setTooltip({
|
||
visible: true,
|
||
content,
|
||
x: event.clientX,
|
||
y: event.clientY
|
||
});
|
||
};
|
||
|
||
// 隐藏工具提示
|
||
const hideTooltip = () => {
|
||
setTooltip({ ...tooltip, visible: false });
|
||
};
|
||
|
||
// 处理参数更新
|
||
const handleParameterChange = (name, value) => {
|
||
let convertedValue = value;
|
||
if (name === 'temperature' || name === 'frequency_penalty' || name === 'presence_penalty' || name === 'top_p') {
|
||
convertedValue = parseFloat(value);
|
||
} else if (name === 'top_k' || name === 'max_context' || name === 'max_tokens' || name === 'seed' || name === 'n') {
|
||
convertedValue = parseInt(value, 10);
|
||
} else if (name === 'max_context_unlocked' || name === 'stream_openai') {
|
||
convertedValue = value;
|
||
}
|
||
|
||
updateParameter({ name, value: convertedValue });
|
||
};
|
||
|
||
// 加载预设列表 - 只在切换到预设分页时刷新
|
||
useEffect(() => {
|
||
// 检测是否从其他分页切换到预设分页
|
||
if (activeTab === 'presets' && prevActiveTabRef.current !== 'presets') {
|
||
fetchPresets();
|
||
}
|
||
// 更新上一次的分页状态
|
||
prevActiveTabRef.current = activeTab;
|
||
}, [activeTab, fetchPresets]);
|
||
|
||
// 保存当前设置为预设
|
||
const handleSavePreset = async () => {
|
||
if (newPresetName.trim()) {
|
||
try {
|
||
await saveCurrentAsPreset({ name: newPresetName });
|
||
setNewPresetName('');
|
||
setShowSaveDialog(false);
|
||
// 重新加载预设列表
|
||
fetchPresets();
|
||
} catch (error) {
|
||
console.error('保存预设失败:', error);
|
||
alert('保存预设失败: ' + error.message);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 编辑预设名称
|
||
const handleEditPreset = async () => {
|
||
if (editPresetId && editPresetName.trim()) {
|
||
try {
|
||
await updatePresetName(editPresetId, editPresetName);
|
||
setEditPresetId('');
|
||
setEditPresetName('');
|
||
setShowEditDialog(false);
|
||
// 重新加载预设列表
|
||
fetchPresets();
|
||
} catch (error) {
|
||
console.error('编辑预设名称失败:', error);
|
||
alert('编辑预设名称失败: ' + error.message);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 导入预设
|
||
const handleImportPreset = async () => {
|
||
try {
|
||
const importedPreset = JSON.parse(importPresetData);
|
||
if (importedPreset.name && importedPreset.parameters) {
|
||
await saveCurrentAsPreset({ name: importedPreset.name });
|
||
// 更新参数
|
||
Object.keys(importedPreset.parameters).forEach(key => {
|
||
updateParameter({ name: key, value: importedPreset.parameters[key] });
|
||
});
|
||
|
||
// 更新组件列表
|
||
if (importedPreset.promptComponents) {
|
||
setPromptComponents(importedPreset.promptComponents);
|
||
}
|
||
|
||
setImportPresetData('');
|
||
setShowImportDialog(false);
|
||
// 重新加载预设列表
|
||
fetchPresets();
|
||
}
|
||
} catch (error) {
|
||
console.error('导入预设失败:', error);
|
||
alert('导入预设失败: ' + error.message);
|
||
}
|
||
};
|
||
|
||
// 导出预设
|
||
const handleExportPreset = () => {
|
||
if (selectedPreset) {
|
||
const preset = presets.find(p => p.id === selectedPreset);
|
||
if (preset) {
|
||
const exportData = {
|
||
...preset,
|
||
parameters,
|
||
promptComponents
|
||
};
|
||
const dataStr = JSON.stringify(exportData, null, 2);
|
||
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
||
const url = URL.createObjectURL(dataBlob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = `${preset.name}.json`;
|
||
link.click();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加新组件
|
||
const handleAddNewComponent = () => {
|
||
const newComponent = {
|
||
identifier: `component_${Date.now()}`,
|
||
name: '新组件',
|
||
content: '',
|
||
role: 0,
|
||
system_prompt: false,
|
||
marker: false,
|
||
enabled: true
|
||
};
|
||
addComponent(newComponent);
|
||
};
|
||
|
||
// 开始编辑组件
|
||
const handleStartEditComponent = (index) => {
|
||
setEditingComponentIndex(index);
|
||
setEditComponentContent(promptComponents[index].content);
|
||
setIsEditing(true);
|
||
setShowComponentEditDialog(true);
|
||
};
|
||
|
||
// 查看组件内容
|
||
const handleViewComponent = (index) => {
|
||
setEditingComponentIndex(index);
|
||
setEditComponentContent(promptComponents[index].content);
|
||
setIsEditing(false);
|
||
setShowComponentEditDialog(true);
|
||
};
|
||
|
||
// 保存组件编辑
|
||
const handleSaveComponentEdit = () => {
|
||
if (editingComponentIndex >= 0 && isEditing) {
|
||
updateComponent(editingComponentIndex, { content: editComponentContent });
|
||
}
|
||
setEditingComponentIndex(-1);
|
||
setEditComponentContent('');
|
||
setShowComponentEditDialog(false);
|
||
};
|
||
|
||
// 取消组件编辑
|
||
const handleCancelComponentEdit = () => {
|
||
setEditingComponentIndex(-1);
|
||
setEditComponentContent('');
|
||
setShowComponentEditDialog(false);
|
||
};
|
||
|
||
// 关闭组件查看对话框
|
||
const handleCloseComponentView = () => {
|
||
setEditingComponentIndex(-1);
|
||
setEditComponentContent('');
|
||
setShowComponentEditDialog(false);
|
||
};
|
||
|
||
// 切换组件启用状态
|
||
const handleToggleComponentEnabled = (index) => {
|
||
toggleComponentEnabled(index);
|
||
};
|
||
|
||
// 删除组件
|
||
const handleDeleteComponent = (index) => {
|
||
if (window.confirm('确定要删除这个组件吗？')) {
|
||
removeComponent(index);
|
||
}
|
||
};
|
||
|
||
// 拖拽开始
|
||
const handleDragStart = (e, index) => {
|
||
setDraggedItem(index);
|
||
e.dataTransfer.effectAllowed = 'move';
|
||
e.dataTransfer.setData('text/plain', index.toString());
|
||
setTimeout(() => {
|
||
e.target.classList.add('dragging');
|
||
}, 0);
|
||
};
|
||
|
||
// 拖拽结束
|
||
const handleDragEnd = (e) => {
|
||
setDraggedItem(null);
|
||
setDragOverItem(null);
|
||
e.target.classList.remove('dragging');
|
||
};
|
||
|
||
// 拖拽经过
|
||
const handleDragOver = (e, index) => {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = 'move';
|
||
if (draggedItem === null || draggedItem === index) return;
|
||
setDragOverItem(index);
|
||
};
|
||
|
||
// 放置
|
||
const handleDrop = (e, index) => {
|
||
e.preventDefault();
|
||
if (draggedItem === null || draggedItem === index) return;
|
||
|
||
moveComponent(draggedItem, index);
|
||
|
||
setDraggedItem(null);
|
||
setDragOverItem(null);
|
||
};
|
||
|
||
return (
|
||
<div className="preset-panel">
|
||
{/* 工具提示 */}
|
||
{tooltip.visible && (
|
||
<div
|
||
className="tooltip"
|
||
style={{ left: `${tooltip.x}px`, top: `${tooltip.y}px` }}
|
||
>
|
||
{tooltip.content}
|
||
</div>
|
||
)}
|
||
|
||
{/* 顶部：预设选择与操作 */}
|
||
<div className="preset-header">
|
||
{/* 预设选择下拉框 */}
|
||
<div className="preset-select-container">
|
||
<label
|
||
className="preset-label"
|
||
onMouseEnter={(e) => showTooltip(e, "选择预设配置")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
预设:
|
||
</label>
|
||
<select
|
||
className="preset-select"
|
||
value={selectedPreset}
|
||
onChange={(e) => setSelectedPreset(e.target.value)}
|
||
disabled={isLoadingPresets}
|
||
>
|
||
<option value="">{isLoadingPresets ? "加载中..." : "选择预设..."}</option>
|
||
{presets.map(preset => (
|
||
<option key={preset.id} value={preset.id}>{preset.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="preset-actions">
|
||
<button
|
||
className="preset-action-btn"
|
||
onClick={() => setShowSaveDialog(true)}
|
||
onMouseEnter={(e) => showTooltip(e, "保存当前设置为新预设")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
💾
|
||
</button>
|
||
<button
|
||
className="preset-action-btn"
|
||
onClick={() => {
|
||
if (selectedPreset) {
|
||
const preset = presets.find(p => p.id === selectedPreset);
|
||
if (preset) {
|
||
setEditPresetId(selectedPreset);
|
||
setEditPresetName(preset.name);
|
||
setShowEditDialog(true);
|
||
}
|
||
}
|
||
}}
|
||
onMouseEnter={(e) => showTooltip(e, "编辑当前预设")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
className="preset-action-btn"
|
||
onClick={() => setShowImportDialog(true)}
|
||
onMouseEnter={(e) => showTooltip(e, "导入预设")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
📥
|
||
</button>
|
||
<button
|
||
className="preset-action-btn"
|
||
onClick={handleExportPreset}
|
||
onMouseEnter={(e) => showTooltip(e, "导出当前预设")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
📤
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 保存预设对话框 */}
|
||
{showSaveDialog && (
|
||
<div className="preset-save-dialog">
|
||
<input
|
||
type="text"
|
||
value={newPresetName}
|
||
onChange={(e) => setNewPresetName(e.target.value)}
|
||
placeholder="预设名称"
|
||
/>
|
||
<div className="dialog-buttons">
|
||
<button onClick={handleSavePreset}>保存</button>
|
||
<button onClick={() => setShowSaveDialog(false)}>取消</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 编辑预设对话框 */}
|
||
{showEditDialog && (
|
||
<div className="preset-edit-dialog">
|
||
<input
|
||
type="text"
|
||
value={editPresetName}
|
||
onChange={(e) => setEditPresetName(e.target.value)}
|
||
placeholder="预设名称"
|
||
/>
|
||
<div className="dialog-buttons">
|
||
<button onClick={handleEditPreset}>保存</button>
|
||
<button onClick={() => setShowEditDialog(false)}>取消</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 导入预设对话框 */}
|
||
{showImportDialog && (
|
||
<div className="preset-import-dialog">
|
||
<textarea
|
||
className="import-textarea"
|
||
value={importPresetData}
|
||
onChange={(e) => setImportPresetData(e.target.value)}
|
||
placeholder="粘贴预设JSON数据"
|
||
rows="5"
|
||
/>
|
||
<div className="dialog-buttons">
|
||
<button onClick={handleImportPreset}>导入</button>
|
||
<button onClick={() => setShowImportDialog(false)}>取消</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 编辑/查看组件内容对话框 */}
|
||
{showComponentEditDialog && (
|
||
<div className="component-edit-dialog">
|
||
<div className="dialog-header">
|
||
<h3>{isEditing ? '编辑' : '查看'}组件: {editingComponentIndex >= 0 && promptComponents[editingComponentIndex].name}</h3>
|
||
<button className="close-btn" onClick={handleCloseComponentView}>×</button>
|
||
</div>
|
||
<div className="dialog-content">
|
||
<textarea
|
||
value={editComponentContent}
|
||
onChange={(e) => setEditComponentContent(e.target.value)}
|
||
className="component-textarea"
|
||
readOnly={!isEditing}
|
||
rows={20}
|
||
/>
|
||
</div>
|
||
<div className="dialog-footer">
|
||
<span className="token-count">
|
||
{editComponentContent ? editComponentContent.length : 0}
|
||
</span>
|
||
{isEditing && (
|
||
<div className="dialog-buttons">
|
||
<button onClick={handleSaveComponentEdit}>保存</button>
|
||
<button onClick={handleCancelComponentEdit}>取消</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 参数设置区域 */}
|
||
<div className="preset-parameters-container">
|
||
<div
|
||
className="parameters-header"
|
||
onClick={toggleParametersExpanded}
|
||
>
|
||
<span>参数设置</span>
|
||
<span className={`expand-icon ${isParametersExpanded ? 'expanded' : ''}`}>▼</span>
|
||
</div>
|
||
|
||
{isParametersExpanded && (
|
||
<div className="preset-parameters">
|
||
{/* 温度滑块 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.temperature)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Temperature
|
||
</label>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="2"
|
||
step="0.1"
|
||
value={parameters.temperature}
|
||
onChange={(e) => handleParameterChange('temperature', e.target.value)}
|
||
className="parameter-slider"
|
||
/>
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
max="2"
|
||
step="0.1"
|
||
value={parameters.temperature}
|
||
onChange={(e) => handleParameterChange('temperature', e.target.value)}
|
||
className="parameter-number"
|
||
/>
|
||
</div>
|
||
|
||
{/* 频率惩罚滑块 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.frequency_penalty)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Frequency Penalty
|
||
</label>
|
||
<input
|
||
type="range"
|
||
min="-2"
|
||
max="2"
|
||
step="0.1"
|
||
value={parameters.frequency_penalty}
|
||
onChange={(e) => handleParameterChange('frequency_penalty', e.target.value)}
|
||
className="parameter-slider"
|
||
/>
|
||
<input
|
||
type="number"
|
||
min="-2"
|
||
max="2"
|
||
step="0.1"
|
||
value={parameters.frequency_penalty}
|
||
onChange={(e) => handleParameterChange('frequency_penalty', e.target.value)}
|
||
className="parameter-number"
|
||
/>
|
||
</div>
|
||
|
||
{/* 存在惩罚滑块 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.presence_penalty)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Presence Penalty
|
||
</label>
|
||
<input
|
||
type="range"
|
||
min="-2"
|
||
max="2"
|
||
step="0.1"
|
||
value={parameters.presence_penalty}
|
||
onChange={(e) => handleParameterChange('presence_penalty', e.target.value)}
|
||
className="parameter-slider"
|
||
/>
|
||
<input
|
||
type="number"
|
||
min="-2"
|
||
max="2"
|
||
step="0.1"
|
||
value={parameters.presence_penalty}
|
||
onChange={(e) => handleParameterChange('presence_penalty', e.target.value)}
|
||
className="parameter-number"
|
||
/>
|
||
</div>
|
||
|
||
{/* Top P 滑块 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.top_p)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Top P
|
||
</label>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="1"
|
||
step="0.05"
|
||
value={parameters.top_p}
|
||
onChange={(e) => handleParameterChange('top_p', e.target.value)}
|
||
className="parameter-slider"
|
||
/>
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
max="1"
|
||
step="0.05"
|
||
value={parameters.top_p}
|
||
onChange={(e) => handleParameterChange('top_p', e.target.value)}
|
||
className="parameter-number"
|
||
/>
|
||
</div>
|
||
|
||
{/* Top K 输入框 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.top_k)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Top K
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
value={parameters.top_k}
|
||
onChange={(e) => handleParameterChange('top_k', e.target.value)}
|
||
className="parameter-input"
|
||
/>
|
||
</div>
|
||
|
||
{/* 最大上下文输入框 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.max_context)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Max Context
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="10000000"
|
||
value={parameters.max_context}
|
||
onChange={(e) => handleParameterChange('max_context', e.target.value)}
|
||
className="parameter-input"
|
||
/>
|
||
</div>
|
||
|
||
{/* 最大Token输入框 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.max_tokens)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Max Tokens
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="100000"
|
||
value={parameters.max_tokens}
|
||
onChange={(e) => handleParameterChange('max_tokens', e.target.value)}
|
||
className="parameter-input"
|
||
/>
|
||
</div>
|
||
|
||
{/* 随机种子输入框 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.seed)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Seed
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={parameters.seed}
|
||
onChange={(e) => handleParameterChange('seed', e.target.value)}
|
||
className="parameter-input"
|
||
/>
|
||
</div>
|
||
|
||
{/* 生成数量输入框 */}
|
||
<div className="parameter-row">
|
||
<label
|
||
className="parameter-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.n)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
N (生成数量)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
value={parameters.n}
|
||
onChange={(e) => handleParameterChange('n', e.target.value)}
|
||
className="parameter-input"
|
||
/>
|
||
</div>
|
||
|
||
{/* 开关选项 */}
|
||
<div className="parameter-toggles">
|
||
<div className="toggle-row">
|
||
<label
|
||
className="toggle-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.max_context_unlocked)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Max Context Unlocked
|
||
</label>
|
||
<input
|
||
type="checkbox"
|
||
checked={parameters.max_context_unlocked}
|
||
onChange={(e) => handleParameterChange('max_context_unlocked', e.target.checked)}
|
||
className="toggle-checkbox"
|
||
/>
|
||
</div>
|
||
|
||
<div className="toggle-row">
|
||
<label
|
||
className="toggle-label"
|
||
onMouseEnter={(e) => showTooltip(e, parameterDescriptions.stream_openai)}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
Stream Output
|
||
</label>
|
||
<input
|
||
type="checkbox"
|
||
checked={parameters.stream_openai}
|
||
onChange={(e) => handleParameterChange('stream_openai', e.target.checked)}
|
||
className="toggle-checkbox"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 预设组件列表 */}
|
||
<div className="preset-components-section">
|
||
<div className="components-header">
|
||
<h3>预设组件</h3>
|
||
<button
|
||
onClick={handleAddNewComponent}
|
||
className="add-component-btn"
|
||
onMouseEnter={(e) => showTooltip(e, "添加新组件")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
+ 添加组件
|
||
</button>
|
||
</div>
|
||
|
||
<div className="components-list draggable-container">
|
||
{promptComponents.map((component, index) => (
|
||
<React.Fragment key={component.identifier}>
|
||
{/* 拖拽指示器 - 在组件上方 */}
|
||
<div
|
||
className={`drag-indicator ${dragOverItem === index ? 'visible' : ''}`}
|
||
onDragOver={(e) => handleDragOver(e, index)}
|
||
onDrop={(e) => handleDrop(e, index)}
|
||
/>
|
||
|
||
{/* 组件项 */}
|
||
<div
|
||
className={`prompt-component-item ${!component.enabled ? 'disabled' : ''} ${component.marker ? 'marker' : ''} ${draggedItem === index ? 'dragging' : ''}`}
|
||
draggable={!component.marker}
|
||
onDragStart={(e) => handleDragStart(e, index)}
|
||
onDragEnd={handleDragEnd}
|
||
onDragOver={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}}
|
||
>
|
||
<div className="component-header">
|
||
<div className="component-controls">
|
||
<div className="drag-handle">⋮⋮</div>
|
||
<button
|
||
className={`toggle-btn ${component.enabled ? 'enabled' : 'disabled'}`}
|
||
onClick={() => handleToggleComponentEnabled(index)}
|
||
onMouseEnter={(e) => showTooltip(e, component.enabled ? "禁用组件" : "启用组件")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
{component.enabled ? '✓' : '○'}
|
||
</button>
|
||
<span className="component-name">{component.name}</span>
|
||
{component.marker && (
|
||
<span className="component-marker-badge">🔒</span>
|
||
)}
|
||
</div>
|
||
<div className="component-actions">
|
||
<button
|
||
className="edit-btn"
|
||
onClick={() => handleStartEditComponent(index)}
|
||
onMouseEnter={(e) => showTooltip(e, "编辑/查看组件")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
✏️
|
||
</button>
|
||
<span className="token-count">
|
||
{component.content ? component.content.length : 0}
|
||
</span>
|
||
{!component.marker && (
|
||
<button
|
||
className="delete-btn"
|
||
onClick={() => handleDeleteComponent(index)}
|
||
onMouseEnter={(e) => showTooltip(e, "删除组件")}
|
||
onMouseLeave={hideTooltip}
|
||
>
|
||
🗑️
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
))}
|
||
|
||
{/* 最后一个拖拽指示器 - 在列表末尾 */}
|
||
<div
|
||
className={`drag-indicator ${dragOverItem === promptComponents.length ? 'visible' : ''}`}
|
||
onDragOver={(e) => handleDragOver(e, promptComponents.length)}
|
||
onDrop={(e) => handleDrop(e, promptComponents.length)}
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PresetPanel;
|