PromptSE
根据当前TODO列表，还需要完成以下功能： - 支持导入 .txt 格式的词库文件 - 实时搜索词库内容(支持中英文) - 点击词条直接插入到当前编辑的条目中 - 支持创建新的词库条目 数据结构: javascript { lexicon: [ { id: "uuid", english: "beautiful girl", chinese: "美丽女孩", category: "character", tags: ["beauty", "girl", "人物"], weight: 1.0 } ] } 组件设计: ┌─ 词库面板 (LexiconPanel) ─────────────────┐ │ ┌─ 导入按钮 ─┐ ┌─ 搜索框 ──────────────┐ │ │ │ 📁 Import │ │ 🔍 Search tags... │ │ │ └──────────┘ └─────────────────────┘ │ │ ┌─ 词条列表 ─────────────────────────┐ │ │ │ [character] beautiful girl 美丽女孩 │ │ │ │ [style] anime style 动漫风格 │ │ │ │ [quality] high quality 高质量 │ │ │ └─────────────────────────────────┘ │ │ ┌─ 创建新词条 ────────────────────────┐ │ │ │ EN: [ input ] CN: [ input ] [Add] │ │ │ └─────────────────────────────────┘ │ └────────────────────────────────────┘ 实现步骤: 1. 在工具栏添加"导入词库"按钮 2. 实现文件选择和解析逻辑 (支持CSV/TXT格式) 3. 在模态编辑器中添加词库搜索面板 4. 实现实时搜索和标签点击插入 5. 添加新词条创建功能 文件解析格式: beautiful girl,美丽女孩 anime style,动漫风格 high quality,高质量 - 通过拖拽手柄重新排列条目顺序 - 流畅的拖拽动画效果 - 支持键盘辅助操作 拖拽实现方案: javascript // 使用原生HTML5 Drag & Drop API class DragDropManager { constructor(entriesList, updateCallback) { this.entriesList = entriesList; this.updateCallback = updateCallback; this.draggedElement = null; this.draggedIndex = -1; } enableDragDrop() { // 为每个条目添加拖拽功能 } handleDragStart(e, index) { / 开始拖拽 / } handleDragOver(e) { / 拖拽悬停 / } handleDrop(e, targetIndex) { / 放置完成 / } } UI设计: ┌─ Entry Card ─────────────────────┐ │ ☑ [≡] Title [±] Weight [✕] │ ← [≡] 为拖拽手柄 │ Content preview... │ └─────────────────────────────────┘ 实现步骤: 1. 为每个条目添加拖拽手柄 [≡] 2. 实现HTML5 Drag & Drop事件处理 3. 添加拖拽时的视觉反馈效果 4. 更新数据数组顺序并重新渲染 5. 添加拖拽动画和…
PromptSE · entrées 0 · paramètres 0 · sortie 1
