预设拖拽实现

2026-04-04 15:19:37 +08:00
parent 1abfaeda9d
commit 1fc0c43689
3 changed files with 701 additions and 19 deletions
--- a/frontend-react/src/components/SideBarLeft/tab/Presets.jsx
+++ b/frontend-react/src/components/SideBarLeft/tab/Presets.jsx
@@ -8,23 +8,41 @@ const PresetPanel = () => {
    parameters,
    presets,
    isLoadingPresets,
+    promptComponents,
    setSelectedPreset,
    updateParameter,
    saveCurrentAsPreset,
    editPresetName: updatePresetName,
    isParametersExpanded,
    toggleParametersExpanded,
-    fetchPresets
+    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 parameterDescriptions = {
    temperature: "生成温度，控制随机性(0-2)",
@@ -99,10 +117,16 @@ const PresetPanel = () => {
      const importedPreset = JSON.parse(importPresetData);
      if (importedPreset.name && importedPreset.parameters) {
        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);
      }
@@ -116,7 +140,12 @@ const PresetPanel = () => {
    if (selectedPreset) {
      const preset = presets.find(p => p.id === selectedPreset);
      if (preset) {
-        const dataStr = JSON.stringify(preset, null, 2);
+        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');
@@ -128,6 +157,111 @@ const PresetPanel = () => {
    }
  };

+  // 添加新组件
+  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">
      {/* 工具提示 */}
@@ -258,6 +392,36 @@ const PresetPanel = () => {
        </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
@@ -516,6 +680,98 @@ const PresetPanel = () => {
          </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>
+                    {!component.marker && (
+                      <button
+                        className="delete-btn"
+                        onClick={() => handleDeleteComponent(index)}
+                        onMouseEnter={(e) => showTooltip(e, "删除组件")}
+                        onMouseLeave={hideTooltip}
+                      >
+                        删除
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                <div className="component-footer">
+                  <span className="token-count">
+                    字符数: {component.content ? component.content.length : 0}
+                  </span>
+                </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>
  );
 };
--- a/frontend-react/src/components/SideBarLeft/tabcss/Presets.css
+++ b/frontend-react/src/components/SideBarLeft/tabcss/Presets.css
@@ -18,6 +18,7 @@
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaeaea;
+  flex-shrink: 0;
 }

 .preset-select-container {
@@ -54,6 +55,7 @@
 .preset-actions {
  display: flex;
  gap: 4px;
+  flex-shrink: 0;
 }

 .preset-action-btn {
@@ -82,6 +84,8 @@
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
+  z-index: 100;
+  position: relative;
 }

 .preset-save-dialog input,
@@ -154,6 +158,8 @@
  border: 1px solid #eaeaea;
  border-radius: 6px;
  overflow: hidden;
+  margin-bottom: 16px;
+  flex-shrink: 0;
 }

 .parameters-header {
@@ -187,6 +193,18 @@
  flex-direction: column;
  gap: 10px;
  padding: 12px;
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

 .parameter-row {
@@ -196,11 +214,12 @@
 }

 .parameter-label {
-  width: 140px;
+  width: 120px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  cursor: help;
+  flex-shrink: 0;
 }

 .parameter-slider {
@@ -239,6 +258,7 @@
  text-align: center;
  font-size: 13px;
  transition: border-color 0.2s;
+  flex-shrink: 0;
 }

 .parameter-number:focus {
@@ -300,3 +320,313 @@
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
 }
+
+/* 预设组件列表样式 */
+.preset-components-section {
+  margin-top: 20px;
+  border-top: 1px solid #e0e0e0;
+  padding-top: 20px;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.components-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.add-component-btn {
+  background-color: #4a90e2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.components-list {
+  width: 100%;
+  min-height: 100px;
+}
+
+.prompt-component-item {
+  background-color: #f9f9f9;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 8px; /* 减小间距 */
+  padding: 6px 8px; /* 减小内边距 */
+  transition: background-color 0.2s;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.prompt-component-item.dragging {
+  background-color: #e9e9e9;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  opacity: 0.5;
+}
+
+.prompt-component-item.disabled {
+  opacity: 0.6;
+}
+
+.prompt-component-item.marker {
+  border-left: 3px solid #4a90e2;
+}
+
+.component-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px; /* 减小底部边距 */
+}
+
+.component-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px; /* 减小间距 */
+  flex: 1;
+  overflow: hidden;
+}
+
+.drag-handle {
+  cursor: grab;
+  color: #999;
+  font-size: 14px; /* 减小字体 */
+  padding: 0 2px; /* 减小内边距 */
+  flex-shrink: 0;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.toggle-btn {
+  width: 18px; /* 减小尺寸 */
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  background-color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px; /* 减小字体 */
+  color: #4a90e2;
+  flex-shrink: 0;
+}
+
+.toggle-btn.enabled {
+  background-color: #4a90e2;
+  color: white;
+  border-color: #4a90e2;
+}
+
+.component-name {
+  font-weight: 500;
+  font-size: 13px; /* 减小字体 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.component-marker-badge {
+  background-color: #4a90e2;
+  color: white;
+  font-size: 10px; /* 减小字体 */
+  padding: 1px 4px; /* 减小内边距 */
+  border-radius: 8px;
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.component-actions {
+  display: flex;
+  gap: 4px; /* 减小间距 */
+  flex-shrink: 0;
+}
+
+.view-btn, .edit-btn, .delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 11px; /* 减小字体 */
+  padding: 2px 4px; /* 减小内边距 */
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.view-btn {
+  color: #5c6bc0;
+}
+
+.view-btn:hover {
+  background-color: rgba(92, 107, 192, 0.1);
+}
+
+.edit-btn {
+  color: #4a90e2;
+}
+
+.edit-btn:hover {
+  background-color: rgba(74, 144, 226, 0.1);
+}
+
+.delete-btn {
+  color: #e74c3c;
+}
+
+.delete-btn:hover {
+  background-color: rgba(231, 76, 60, 0.1);
+}
+
+.component-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2px; /* 减小顶部边距 */
+  font-size: 11px; /* 减小字体 */
+  color: #777;
+}
+
+/* 组件编辑/查看对话框 */
+.component-edit-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  max-width: 800px;
+  max-height: 80vh;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #999;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+}
+
+.close-btn:hover {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.dialog-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.component-textarea {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 12px;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  box-sizing: border-box;
+  min-height: 400px;
+}
+
+.component-textarea:read-only {
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+.dialog-footer {
+  padding: 12px 16px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.token-count {
+  font-size: 12px;
+  color: #777;
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.dialog-buttons button {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.dialog-buttons button:first-child {
+  background-color: #4a6cf7;
+  color: white;
+}
+
+.dialog-buttons button:first-child:hover {
+  background-color: #3a5ce5;
+}
+
+.dialog-buttons button:last-child {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.dialog-buttons button:last-child:hover {
+  background-color: #e0e0e0;
+}
+
+/* 拖拽相关样式 */
+.drag-indicator {
+  height: 4px;
+  background-color: transparent;
+  border-radius: 2px;
+  margin: 4px 0;
+  transition: all 0.2s ease;
+  opacity: 0;
+}
+
+.drag-indicator.visible {
+  background-color: #4a90e2;
+  height: 4px;
+  opacity: 1;
+  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+}