更新了很多东西
This commit is contained in:
171696257
+13
-10
@@ -16,8 +16,6 @@ Intelligent prompt embedding and management system that provides powerful prompt
|
||||
**Core Features:**
|
||||
- 🔍 **Prompt Search**: Search prompt names and content for quick location and filtering
|
||||
- 📁 **Import/Export**: JSON format prompt backup and sharing - share your prompts with others and import community prompts
|
||||
- 🏷️ **Tag System**: Organize prompts with up to 4 tags per prompt for easy categorization
|
||||
- 💾 **Auto Backup**: All prompt operations automatically save to JSON files for data persistence
|
||||
|
||||
**Use Cases:**
|
||||
- Manage commonly used positive/negative prompt templates
|
||||
@@ -26,6 +24,8 @@ Intelligent prompt embedding and management system that provides powerful prompt
|
||||
- Improve workflow creation efficiency
|
||||
- Efficiently manage LORA model prompts
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
@@ -105,12 +105,12 @@ High-performance model loading optimizer with multiple optimization modes:
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>DD Interface Layout</summary>
|
||||
<details> <summary>DD Interface Layout</summary>
|
||||
|
||||
- Beta version implemented, can randomly or specifically color node titles, and quickly organize messy workflows.
|
||||
- Beautified UI, added theme system, each theme has two different styles to switch between, supports custom themes.
|
||||
- Added modular presets, you can preset your own layouts and apply them with one click.
|
||||
- Can randomly or specifically set node title colors, quickly organize messy nodes
|
||||
- Beautify UI, add theme system, each theme has two different styles to switch between, click the coin animation to switch
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
@@ -121,6 +121,8 @@ Provides various cool animation effects for ComfyUI node connections, supporting
|
||||
- Supports "Flow", "Wave", "Rhythm", "Pulse" and other animation styles
|
||||
- Animation parameters are customizable (line width, speed, effects, etc.)
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
## Installation
|
||||
@@ -144,6 +146,10 @@ This extension now supports ComfyUI's native internationalization (i18n) system,
|
||||
3. Currently only supports node translation, frontend functionality translation is not yet supported
|
||||
|
||||
## Version History
|
||||
- v2.6.0 (2025-06-23)
|
||||
- Complete reconstruction of the prompt management panel with many new features
|
||||
- Improved interface layout panel custom color functionality, now with a dedicated color preset panel
|
||||
|
||||
- v2.5.0 (2025-06-20)
|
||||
- 🔄 **Prompt Manager New Features**:
|
||||
- Added intelligent backup system - all prompt operations automatically save to extensions\Prompt_Manager\prompts.json
|
||||
@@ -265,6 +271,3 @@ This is a growing collection of nodes, primarily for sharing practical ComfyUI e
|
||||
|
||||
Your support is the motivation for the author to continue coding! ╭(●｀∀´●)╯
|
||||
|
||||
|
||||
Your support is the motivation for the author to continue development! ╭(●｀∀´●)╯
|
||||
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
<details>
|
||||
<summary>DD 界面布局</summary>
|
||||
|
||||
- 已实现Alpha版本，可以随机或指定节点标题的颜色，可以对杂乱节点做快速整理
|
||||
- 可以随机或指定节点标题的颜色，可以对杂乱节点做快速整理
|
||||
- 美化UI，添加主题系统，每一种主题有两种不同风格可以切换，点击硬币动画即可切换
|
||||
|
||||
|
||||
@@ -149,6 +149,10 @@
|
||||
3. 暂时只支持节点翻译，暂不支持前端功能翻译切换
|
||||
|
||||
## 版本历史
|
||||
- v2.6.0 （2025-06-23）
|
||||
- 完善提示词管理面板做了完全重构，多了很多新特性
|
||||
- 完善界面布局面板的自定义颜色功能，现在有了单独的颜色预设面板
|
||||
|
||||
- v2.5.0 （2025-06-20）
|
||||
- 🔄 **提示词管理器新功能**：
|
||||
- 新增智能备份功能，所有提示词操作自动保存到插件的extensions\Prompt_Manager\prompts.json文件中
|
||||
|
||||
@@ -36,6 +36,9 @@ import {
|
||||
alignNodes
|
||||
} from './styles/UIUtils.js';
|
||||
|
||||
// 导入内嵌颜色选择器组件
|
||||
import { InlineColorPicker } from './styles/InlineColorPicker.js';
|
||||
|
||||
// 跟踪鼠标位置
|
||||
let mousePosition = { x: 0, y: 0 };
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
@@ -49,8 +52,8 @@ export class LayoutPanel {
|
||||
this.container = null;
|
||||
this.buttonsContainer = null;
|
||||
this.colorMode = '完全随机'; // 默认为完全随机模式
|
||||
this.currentTheme = null;
|
||||
this.coinElement = null;
|
||||
this.currentTheme = null; this.coinElement = null;
|
||||
this.inlineColorPicker = null; // 内嵌颜色选择器实例
|
||||
}
|
||||
|
||||
setEnabled() {
|
||||
@@ -118,9 +121,11 @@ export class LayoutPanel {
|
||||
|
||||
this.visible = true;
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (!this.container) return;
|
||||
hide() {
|
||||
if (!this.container) return; // 隐藏颜色选择器（如果存在且可见）
|
||||
if (this.inlineColorPicker && typeof this.inlineColorPicker.isVisible === 'function' && this.inlineColorPicker.isVisible()) {
|
||||
this.inlineColorPicker.hide();
|
||||
}
|
||||
|
||||
// 只淡出，不修改 transform
|
||||
this.container.style.opacity = '0';
|
||||
@@ -215,12 +220,11 @@ export class LayoutPanel {
|
||||
e.stopPropagation();
|
||||
this._setRandomNodeColor();
|
||||
});
|
||||
|
||||
// 创建自定义颜色按钮
|
||||
// 创建自定义颜色按钮
|
||||
const customColorBtn = createButton('自定义颜色', 'normal');
|
||||
customColorBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this._openCustomColorPicker();
|
||||
this._toggleInlineColorPicker();
|
||||
});
|
||||
|
||||
// 创建节点同步按钮
|
||||
@@ -260,16 +264,45 @@ export class LayoutPanel {
|
||||
this.colorMode = e.target.value;
|
||||
});
|
||||
modeContainer.appendChild(modeSelect);
|
||||
|
||||
// 添加按钮到容器
|
||||
// 添加按钮到容器
|
||||
this.buttonsContainer.appendChild(randomColorBtn);
|
||||
this.buttonsContainer.appendChild(customColorBtn);
|
||||
this.buttonsContainer.appendChild(syncBtn);
|
||||
|
||||
// 添加按钮容器和模式选择器到主容器
|
||||
this.container.appendChild(this.buttonsContainer);
|
||||
this.container.appendChild(modeContainer);
|
||||
this.container.appendChild(syncModeContainer);
|
||||
// 创建控制区域容器（包含按钮和下拉框）
|
||||
this.controlsContainer = document.createElement('div');
|
||||
this.controlsContainer.className = 'layout-controls-container';
|
||||
this.controlsContainer.appendChild(this.buttonsContainer);
|
||||
this.controlsContainer.appendChild(modeContainer);
|
||||
this.controlsContainer.appendChild(syncModeContainer); // 创建并添加内嵌颜色选择器
|
||||
this.inlineColorPicker = new InlineColorPicker({
|
||||
title: '选择节点颜色',
|
||||
defaultColor: '#3355aa',
|
||||
onColorSelect: (color) => {
|
||||
// 获取选中的节点和组
|
||||
const app = getComfyUIApp();
|
||||
if (app) {
|
||||
const selectedNodes = getSelectedNodes(app);
|
||||
const selectedGroups = getSelectedGroups(app);
|
||||
this._applyColorToSelectedNodes(color, selectedNodes, selectedGroups, app);
|
||||
// 应用颜色后恢复控制区域
|
||||
this._showControls();
|
||||
}
|
||||
},
|
||||
onCancel: () => {
|
||||
// 取消时恢复控制区域
|
||||
this._showControls();
|
||||
}
|
||||
});
|
||||
|
||||
const colorPickerElement = this.inlineColorPicker.createInlineColorPicker();
|
||||
|
||||
// 将控制区域和颜色选择器都添加到主容器
|
||||
this.container.appendChild(this.controlsContainer);
|
||||
this.container.appendChild(colorPickerElement);
|
||||
|
||||
// 确保初始状态：显示控制区域，隐藏颜色选择器
|
||||
this._showControls();
|
||||
|
||||
// 添加面板调整大小时重新调整按钮文字大小的功能
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
@@ -398,9 +431,8 @@ export class LayoutPanel {
|
||||
showNotification(`设置随机颜色失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 打开自定义颜色选择器
|
||||
_openCustomColorPicker() {
|
||||
// 打开自定义颜色选择器 // 切换内嵌颜色选择器显示/隐藏
|
||||
_toggleInlineColorPicker() {
|
||||
try {
|
||||
// 获取ComfyUI应用实例
|
||||
const app = getComfyUIApp();
|
||||
@@ -416,48 +448,64 @@ export class LayoutPanel {
|
||||
if (selectedNodes.length === 0 && selectedGroups.length === 0) {
|
||||
showNotification("请先选择要应用颜色的节点或组");
|
||||
return;
|
||||
} // 获取默认颜色
|
||||
const defaultColor = selectedNodes.length > 0 ?
|
||||
(selectedNodes[0].color || '#3355aa') :
|
||||
(selectedGroups.length > 0 ? (selectedGroups[0].color || '#3355aa') : '#3355aa');
|
||||
|
||||
// 切换颜色选择器显示状态
|
||||
if (this.inlineColorPicker && typeof this.inlineColorPicker.isVisible === 'function') {
|
||||
if (this.inlineColorPicker.isVisible()) {
|
||||
this._showControls();
|
||||
} else {
|
||||
this._showColorPicker(defaultColor);
|
||||
}
|
||||
} else {
|
||||
showNotification("颜色选择器未正确初始化");
|
||||
}
|
||||
|
||||
// 创建颜色选择器
|
||||
setTimeout(() => {
|
||||
const defaultColor = selectedNodes.length > 0 ?
|
||||
(selectedNodes[0].color || '#3355aa') :
|
||||
(selectedGroups.length > 0 ? (selectedGroups[0].color || '#3355aa') : '#3355aa');
|
||||
|
||||
const colorInput = document.createElement('input');
|
||||
colorInput.type = 'color';
|
||||
colorInput.value = defaultColor.replace(/rgba?\(.*\)/, '#000000');
|
||||
colorInput.style.position = 'absolute';
|
||||
colorInput.style.visibility = 'hidden';
|
||||
document.body.appendChild(colorInput);
|
||||
|
||||
// 处理颜色变化
|
||||
colorInput.addEventListener('input', (e) => {
|
||||
const color = e.target.value;
|
||||
|
||||
// 应用颜色到节点和组
|
||||
selectedNodes.forEach(node => {
|
||||
node.color = color;
|
||||
});
|
||||
|
||||
selectedGroups.forEach(group => {
|
||||
group.color = color;
|
||||
});
|
||||
|
||||
app.graph.setDirtyCanvas(true, true);
|
||||
});
|
||||
|
||||
colorInput.addEventListener('change', (e) => {
|
||||
showNotification("已应用自定义颜色", "info");
|
||||
document.body.removeChild(colorInput);
|
||||
});
|
||||
|
||||
// 模拟点击打开颜色选择器
|
||||
colorInput.click();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error("打开颜色选择器失败:", error);
|
||||
showNotification(`打开颜色选择器失败: ${error.message}`);
|
||||
console.error("切换颜色选择器失败:", error);
|
||||
showNotification(`切换颜色选择器失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示控制区域，隐藏颜色选择器
|
||||
_showControls() {
|
||||
if (this.controlsContainer) {
|
||||
this.controlsContainer.style.display = 'block';
|
||||
}
|
||||
if (this.inlineColorPicker && typeof this.inlineColorPicker.hide === 'function') {
|
||||
this.inlineColorPicker.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示颜色选择器，隐藏控制区域
|
||||
_showColorPicker(defaultColor) {
|
||||
if (this.controlsContainer) {
|
||||
this.controlsContainer.style.display = 'none';
|
||||
}
|
||||
if (this.inlineColorPicker && typeof this.inlineColorPicker.show === 'function') {
|
||||
this.inlineColorPicker.show(defaultColor);
|
||||
}
|
||||
}
|
||||
|
||||
// 应用颜色到选中的节点和组
|
||||
_applyColorToSelectedNodes(color, selectedNodes, selectedGroups, app) {
|
||||
try {
|
||||
// 应用颜色到节点和组
|
||||
selectedNodes.forEach(node => {
|
||||
node.color = color;
|
||||
});
|
||||
|
||||
selectedGroups.forEach(group => {
|
||||
group.color = color;
|
||||
});
|
||||
|
||||
app.graph.setDirtyCanvas(true, true);
|
||||
showNotification("已应用自定义颜色", "info");
|
||||
} catch (error) {
|
||||
console.error("应用颜色失败:", error);
|
||||
showNotification(`应用颜色失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -501,6 +549,33 @@ export class LayoutPanel {
|
||||
showNotification('节点同步失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 清理资源
|
||||
destroy() {
|
||||
// 隐藏面板
|
||||
if (this.visible) {
|
||||
this.hide();
|
||||
}
|
||||
// 销毁颜色选择器
|
||||
if (this.inlineColorPicker) {
|
||||
this.inlineColorPicker.destroy();
|
||||
this.inlineColorPicker = null;
|
||||
}
|
||||
|
||||
// 移除面板元素
|
||||
if (this.container && this.container.parentNode) {
|
||||
this.container.parentNode.removeChild(this.container);
|
||||
}
|
||||
|
||||
// 清理样式
|
||||
removeStyles('layout-panel-styles');
|
||||
|
||||
// 重置状态
|
||||
this.container = null;
|
||||
this.buttonsContainer = null;
|
||||
this.coinElement = null;
|
||||
this.visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
export const DEFAULT_CONFIG = {
|
||||
|
||||
@@ -0,0 +1,432 @@
|
||||
// 智能布局内嵌颜色选择器组件 - 修正版
|
||||
export class InlineColorPicker {
|
||||
constructor(options = {}) {
|
||||
this.onColorSelect = options.onColorSelect || null;
|
||||
this.onCancel = options.onCancel || null;
|
||||
this.defaultColor = options.defaultColor || '#3355aa';
|
||||
this.title = options.title || '选择颜色';
|
||||
|
||||
this.container = null;
|
||||
this.selectedColor = this.defaultColor;
|
||||
this._isVisible = false; // 使用 _isVisible 避免方法名冲突
|
||||
|
||||
// 自动创建样式
|
||||
this.addStyles();
|
||||
}
|
||||
|
||||
// 创建内嵌式颜色选择器 DOM 元素
|
||||
createInlineColorPicker() {
|
||||
this.container = document.createElement('div');
|
||||
this.container.className = 'layout-inline-color-picker';
|
||||
this.container.style.display = 'none';
|
||||
this.container.innerHTML = `
|
||||
<div class="inline-color-picker-header">
|
||||
<div class="picker-title">
|
||||
<span class="title-icon">🎨</span>
|
||||
<span class="title-text">${this.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-color-picker-content">
|
||||
<div class="preset-colors-section">
|
||||
<div class="section-label">预设颜色</div>
|
||||
<div class="preset-colors-grid">
|
||||
<div class="color-option" data-color="#2a82e4" style="background: #2a82e4" title="蓝色"></div>
|
||||
<div class="color-option" data-color="#e74c3c" style="background: #e74c3c" title="红色"></div>
|
||||
<div class="color-option" data-color="#27ae60" style="background: #27ae60" title="绿色"></div>
|
||||
<div class="color-option" data-color="#f39c12" style="background: #f39c12" title="橙色"></div>
|
||||
<div class="color-option" data-color="#9b59b6" style="background: #9b59b6" title="紫色"></div>
|
||||
<div class="color-option" data-color="#1abc9c" style="background: #1abc9c" title="青色"></div>
|
||||
<div class="color-option" data-color="#e67e22" style="background: #e67e22" title="深橙"></div>
|
||||
<div class="color-option" data-color="#34495e" style="background: #34495e" title="深蓝灰"></div>
|
||||
<div class="color-option" data-color="#e91e63" style="background: #e91e63" title="粉红"></div>
|
||||
<div class="color-option" data-color="#00bcd4" style="background: #00bcd4" title="蓝绿"></div>
|
||||
<div class="color-option" data-color="#ff5722" style="background: #ff5722" title="深橙红"></div>
|
||||
<div class="color-option" data-color="#607d8b" style="background: #607d8b" title="蓝灰"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-color-section">
|
||||
<div class="section-label">自定义颜色</div>
|
||||
<div class="custom-color-row">
|
||||
<input type="color" class="color-input" value="${this.defaultColor}">
|
||||
<div class="color-preview"></div>
|
||||
<input type="text" class="color-hex-input" value="${this.defaultColor}" placeholder="#000000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="picker-buttons">
|
||||
<button class="cancel-btn" type="button">取消</button>
|
||||
<button class="apply-btn" type="button">应用颜色</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加事件监听器
|
||||
this.addEventListeners();
|
||||
|
||||
// 设置默认选中颜色
|
||||
this.setSelectedColor(this.defaultColor);
|
||||
|
||||
return this.container;
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
if (!this.container) return;
|
||||
|
||||
// 预设颜色点击事件
|
||||
const colorOptions = this.container.querySelectorAll('.color-option');
|
||||
colorOptions.forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
const color = option.dataset.color;
|
||||
this.setSelectedColor(color);
|
||||
});
|
||||
});
|
||||
|
||||
// 自定义颜色输入事件
|
||||
const colorInput = this.container.querySelector('.color-input');
|
||||
const hexInput = this.container.querySelector('.color-hex-input');
|
||||
|
||||
if (colorInput) {
|
||||
colorInput.addEventListener('input', (e) => {
|
||||
const color = e.target.value;
|
||||
this.setSelectedColor(color);
|
||||
if (hexInput) hexInput.value = color;
|
||||
});
|
||||
}
|
||||
|
||||
if (hexInput) {
|
||||
hexInput.addEventListener('input', (e) => {
|
||||
const color = e.target.value;
|
||||
if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
|
||||
this.setSelectedColor(color);
|
||||
if (colorInput) colorInput.value = color;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 按钮事件
|
||||
const applyBtn = this.container.querySelector('.apply-btn');
|
||||
const cancelBtn = this.container.querySelector('.cancel-btn');
|
||||
|
||||
if (applyBtn) {
|
||||
applyBtn.addEventListener('click', () => {
|
||||
this.handleConfirm();
|
||||
});
|
||||
} if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
this.hide();
|
||||
// 在取消按钮点击时调用onCancel回调
|
||||
if (this.onCancel) {
|
||||
this.onCancel();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedColor(color) {
|
||||
this.selectedColor = color;
|
||||
|
||||
// 更新预览
|
||||
const preview = this.container?.querySelector('.color-preview');
|
||||
if (preview) {
|
||||
preview.style.background = color;
|
||||
}
|
||||
|
||||
// 更新输入框
|
||||
const colorInput = this.container?.querySelector('.color-input');
|
||||
const hexInput = this.container?.querySelector('.color-hex-input');
|
||||
if (colorInput) colorInput.value = color;
|
||||
if (hexInput) hexInput.value = color;
|
||||
|
||||
// 更新选中状态
|
||||
const colorOptions = this.container?.querySelectorAll('.color-option');
|
||||
colorOptions?.forEach(option => {
|
||||
option.classList.remove('selected');
|
||||
if (option.dataset.color === color) {
|
||||
option.classList.add('selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
show(defaultColor) {
|
||||
if (!this.container) return;
|
||||
|
||||
if (defaultColor) {
|
||||
this.setSelectedColor(defaultColor);
|
||||
}
|
||||
|
||||
this.container.style.display = 'block';
|
||||
this._isVisible = true;
|
||||
|
||||
// 添加显示动画
|
||||
requestAnimationFrame(() => {
|
||||
this.container.style.opacity = '1';
|
||||
this.container.style.transform = 'translateY(0)';
|
||||
});
|
||||
} hide() {
|
||||
if (!this.container) return;
|
||||
|
||||
// 添加隐藏动画
|
||||
this.container.style.opacity = '0';
|
||||
this.container.style.transform = 'translateY(-10px)';
|
||||
|
||||
setTimeout(() => {
|
||||
this.container.style.display = 'none';
|
||||
this._isVisible = false;
|
||||
}, 200);
|
||||
|
||||
// 注意：不在hide方法中调用onCancel，避免循环调用
|
||||
// onCancel应该只在用户点击取消按钮时调用
|
||||
}
|
||||
|
||||
handleConfirm() {
|
||||
if (this.onColorSelect) {
|
||||
this.onColorSelect(this.selectedColor);
|
||||
}
|
||||
this.hide();
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
return this._isVisible;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.container && this.container.parentNode) {
|
||||
this.container.parentNode.removeChild(this.container);
|
||||
}
|
||||
}
|
||||
|
||||
addStyles() {
|
||||
// 检查是否已经添加了样式
|
||||
if (document.querySelector('#inline-color-picker-styles')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = 'inline-color-picker-styles';
|
||||
style.textContent = ` /* ========== 智能布局内嵌颜色选择器样式 ========== */
|
||||
.layout-inline-color-picker {
|
||||
width: 100%;
|
||||
margin-top: 0px; /* 移除上边距，因为要替换显示 */
|
||||
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
|
||||
border: 1px solid rgba(176, 141, 225, 0.3);
|
||||
border-radius: 10px;
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.4),
|
||||
0 0 15px rgba(138, 43, 226, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.layout-inline-color-picker::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(176, 141, 225, 0.7), transparent);
|
||||
}
|
||||
|
||||
/* ========== 头部样式 ========== */
|
||||
.inline-color-picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px 8px;
|
||||
border-bottom: 1px solid rgba(176, 141, 225, 0.2);
|
||||
background: linear-gradient(135deg, rgba(176, 141, 225, 0.1), rgba(138, 43, 226, 0.05));
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #e1e1e1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ========== 内容区域 ========== */
|
||||
.inline-color-picker-content {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.section-label::before {
|
||||
content: '●';
|
||||
color: rgba(176, 141, 225, 0.7);
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
/* ========== 预设颜色区域 ========== */
|
||||
.preset-colors-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.preset-colors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 6px;
|
||||
padding: 10px;
|
||||
background: linear-gradient(145deg, rgba(0, 0, 0, 0.2), rgba(42, 30, 74, 0.15));
|
||||
border: 1px solid rgba(176, 141, 225, 0.15);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.color-option {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.color-option:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow:
|
||||
0 3px 12px rgba(0, 0, 0, 0.4),
|
||||
0 0 8px rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.color-option.selected {
|
||||
border-color: rgba(176, 141, 225, 0.8);
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(138, 43, 226, 0.4),
|
||||
0 3px 12px rgba(0, 0, 0, 0.4),
|
||||
0 0 15px rgba(138, 43, 226, 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.color-option.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #ffffff;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
text-shadow:
|
||||
0 0 3px rgba(0, 0, 0, 0.8),
|
||||
0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* ========== 自定义颜色区域 ========== */
|
||||
.custom-color-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.custom-color-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: linear-gradient(145deg, rgba(0, 0, 0, 0.2), rgba(42, 30, 74, 0.15));
|
||||
border: 1px solid rgba(176, 141, 225, 0.15);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid rgba(176, 141, 225, 0.3);
|
||||
background: #3355aa;
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.color-hex-input {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(176, 141, 225, 0.2);
|
||||
border-radius: 4px;
|
||||
color: #e1e1e1;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.color-hex-input:focus {
|
||||
border-color: rgba(176, 141, 225, 0.5);
|
||||
box-shadow: 0 0 8px rgba(138, 43, 226, 0.2);
|
||||
}
|
||||
|
||||
/* ========== 按钮区域 ========== */
|
||||
.picker-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cancel-btn, .apply-btn {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid rgba(176, 141, 225, 0.3);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(145deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
|
||||
color: #e1e1e1;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: linear-gradient(145deg, rgba(120, 120, 120, 0.2), rgba(80, 80, 80, 0.2));
|
||||
border-color: rgba(176, 141, 225, 0.5);
|
||||
box-shadow: 0 0 8px rgba(138, 43, 226, 0.2);
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
background: linear-gradient(145deg, rgba(176, 141, 225, 0.3), rgba(138, 43, 226, 0.3));
|
||||
border-color: rgba(176, 141, 225, 0.5);
|
||||
}
|
||||
|
||||
.apply-btn:hover {
|
||||
background: linear-gradient(145deg, rgba(176, 141, 225, 0.4), rgba(138, 43, 226, 0.4));
|
||||
border-color: rgba(176, 141, 225, 0.7);
|
||||
box-shadow: 0 0 12px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
@@ -162,6 +162,12 @@ export const layoutPanelStyles = `
|
||||
transition: opacity 0.3s;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* 控制区域容器样式 */
|
||||
.layout-controls-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
// ==========================================================
|
||||
@@ -179,9 +185,8 @@ export function createPanelElement(mousePosition) {
|
||||
container.style.transform = 'none';
|
||||
container.style.display = 'none';
|
||||
container.style.pointerEvents = 'none';
|
||||
container.style.opacity = '0';
|
||||
container.style.padding = '30px'; // 增加内边距适应大尺寸硬币
|
||||
container.style.width = '360px'; // 设置基础宽度
|
||||
container.style.opacity = '0'; container.style.padding = '30px'; // 增加内边距适应大尺寸硬币
|
||||
container.style.width = '360px'; // 恢复原始宽度
|
||||
container.style.boxSizing = 'border-box'; // 确保padding不增加总宽度
|
||||
|
||||
// 添加拖动区域 - 改为在面板边缘创建多个拖动区域
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// 提示词管理器核心模块，只包含业务逻辑和数据管理
|
||||
import { PromptManagerUI } from './styles/PromptManagerUI.js';
|
||||
import { globalTagColorManager } from './styles/components/TagColorManager.js';
|
||||
|
||||
export class PromptManager {
|
||||
constructor() {
|
||||
@@ -7,95 +8,71 @@ export class PromptManager {
|
||||
this.loadPrompts();
|
||||
} async loadPrompts() {
|
||||
try {
|
||||
// 首先尝试从后端API加载最新数据
|
||||
// 从后端API加载最新数据
|
||||
const response = await fetch('/dd_nodes/load_prompts');
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success && result.prompts && result.prompts.length > 0) {
|
||||
this.prompts = result.prompts;
|
||||
if (result.success && result.data && result.data.prompts) {
|
||||
this.prompts = result.data.prompts;
|
||||
// 确保所有提示词都有标签属性（向后兼容）
|
||||
this.prompts.forEach(prompt => {
|
||||
if (!prompt.tags) {
|
||||
prompt.tags = [];
|
||||
}
|
||||
});
|
||||
// 同步到本地存储作为缓存
|
||||
localStorage.setItem('comfyui_dd_prompts', JSON.stringify(this.prompts));
|
||||
|
||||
// 加载标签颜色数据（如果存在）
|
||||
if (result.data.tags && typeof result.data.tags === 'object') {
|
||||
console.log('从后端加载标签颜色数据:', result.data.tags);
|
||||
// 恢复标签颜色到全局标签颜色管理器
|
||||
Object.entries(result.data.tags).forEach(([tagName, color]) => {
|
||||
globalTagColorManager.setTagColor(tagName, color);
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`从后端API加载了 ${this.prompts.length} 个提示词`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果API失败，尝试从本地存储加载
|
||||
const localData = localStorage.getItem('comfyui_dd_prompts');
|
||||
if (localData) {
|
||||
this.prompts = JSON.parse(localData);
|
||||
// 确保所有提示词都有标签属性（向后兼容）
|
||||
this.prompts.forEach(prompt => {
|
||||
if (!prompt.tags) {
|
||||
prompt.tags = [];
|
||||
}
|
||||
});
|
||||
console.log(`从本地存储加载了 ${this.prompts.length} 个提示词`);
|
||||
// 尝试同步到后端
|
||||
this.syncToBackend();
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果都没有数据，使用空列表
|
||||
// 如果API失败，使用空列表
|
||||
this.prompts = [];
|
||||
console.log('初始化空的提示词列表');
|
||||
} catch (error) {
|
||||
console.log('加载提示词失败，尝试从本地存储加载:', error);
|
||||
// 错误处理：从本地存储加载
|
||||
try {
|
||||
const localData = localStorage.getItem('comfyui_dd_prompts');
|
||||
if (localData) {
|
||||
this.prompts = JSON.parse(localData);
|
||||
this.prompts.forEach(prompt => {
|
||||
if (!prompt.tags) {
|
||||
prompt.tags = [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.prompts = [];
|
||||
}
|
||||
} catch (localError) {
|
||||
console.error('本地存储也加载失败:', localError);
|
||||
this.prompts = [];
|
||||
}
|
||||
console.error('加载提示词失败:', error);
|
||||
this.prompts = [];
|
||||
}
|
||||
} savePrompts() {
|
||||
}savePrompts() {
|
||||
try {
|
||||
// 1. 保存到本地存储（作为缓存）
|
||||
localStorage.setItem('comfyui_dd_prompts', JSON.stringify(this.prompts));
|
||||
|
||||
// 2. 自动同步到后端API（主要存储）
|
||||
// 直接同步到后端API
|
||||
this.syncToBackend();
|
||||
|
||||
console.log('提示词已保存并自动同步到后端');
|
||||
console.log('提示词已自动同步到后端');
|
||||
} catch (error) {
|
||||
console.error('保存提示词失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 同步数据到后端API
|
||||
} // 同步数据到后端API
|
||||
async syncToBackend() {
|
||||
try {
|
||||
// 获取标签数据 - 直接从标签颜色管理器获取最新数据
|
||||
const tagsData = Object.fromEntries(globalTagColorManager.colorMap);
|
||||
|
||||
console.log('同步标签数据到后端:', tagsData);
|
||||
|
||||
const response = await fetch('/dd_nodes/save_prompts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
prompts: this.prompts
|
||||
prompts: this.prompts,
|
||||
tags: tagsData // 包含标签数据
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
console.log(`成功同步 ${result.count} 个提示词到后端`);
|
||||
console.log(`成功同步 ${result.count} 个提示词和 ${Object.keys(tagsData).length} 个标签到后端`);
|
||||
} else {
|
||||
console.error('后端同步失败:', result.error);
|
||||
}
|
||||
@@ -103,9 +80,9 @@ export class PromptManager {
|
||||
console.error('后端同步请求失败:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('后端同步失败，仅保存到本地存储:', error);
|
||||
console.error('后端同步失败:', error);
|
||||
}
|
||||
} // 已弃用：自动同步功能已转移到后端API
|
||||
}// 已弃用：自动同步功能已转移到后端API
|
||||
// 保留此方法仅为向后兼容
|
||||
autoSyncToJsonFile() {
|
||||
// 现在通过syncToBackend()方法同步到后端
|
||||
@@ -320,13 +297,17 @@ export class PromptManager {
|
||||
return searchResults;
|
||||
} // 导出提示词到 JSON 格式
|
||||
exportPrompts() {
|
||||
// 获取标签颜色数据
|
||||
const tagsData = Object.fromEntries(globalTagColorManager.colorMap);
|
||||
|
||||
// 使用当前最新的提示词数据
|
||||
const promptsData = {
|
||||
version: "2.4.0",
|
||||
exportTime: new Date().toISOString(),
|
||||
description: "ComfyUI-DD-Nodes 提示词管理器导出的提示词数据",
|
||||
totalCount: this.prompts.length,
|
||||
prompts: this.prompts
|
||||
prompts: this.prompts,
|
||||
tags: tagsData // 添加标签颜色数据
|
||||
};
|
||||
|
||||
const dataStr = JSON.stringify(promptsData, null, 2);
|
||||
@@ -341,18 +322,26 @@ export class PromptManager {
|
||||
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} // 从 JSON 文件导入提示词（兼容新旧格式）
|
||||
}// 从 JSON 文件导入提示词（兼容新旧格式）
|
||||
importPrompts(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
reader.onload = (e) => { try {
|
||||
const imported = JSON.parse(e.target.result);
|
||||
let promptsToImport = [];
|
||||
|
||||
// 检查是否是新格式（包含metadata）
|
||||
if (imported.prompts && Array.isArray(imported.prompts)) {
|
||||
promptsToImport = imported.prompts;
|
||||
|
||||
// 导入标签颜色数据（如果存在）
|
||||
if (imported.tags && typeof imported.tags === 'object') {
|
||||
console.log('导入标签颜色数据:', imported.tags);
|
||||
// 合并标签颜色到全局标签颜色管理器
|
||||
Object.entries(imported.tags).forEach(([tagName, color]) => {
|
||||
globalTagColorManager.setTagColor(tagName, color);
|
||||
});
|
||||
}
|
||||
}
|
||||
// 兼容旧格式（直接是数组）
|
||||
else if (Array.isArray(imported)) {
|
||||
@@ -507,13 +496,33 @@ export class PromptEmbedder {
|
||||
}
|
||||
|
||||
return false;
|
||||
} applyPromptToWidget(prompt, widget) {
|
||||
} applyPromptToWidget(prompt, widget, insertMode = null) {
|
||||
if (!widget) return;
|
||||
|
||||
// 检查是否需要处理现有内容
|
||||
const currentValue = widget.value || '';
|
||||
const hasContent = currentValue.trim().length > 0;
|
||||
|
||||
// 如果指定了插入模式，直接使用
|
||||
if (insertMode) {
|
||||
let newValue;
|
||||
if (insertMode === 'insert') {
|
||||
// 插入到选中位置或开头
|
||||
newValue = this.insertPromptAtCursor(widget, prompt.content);
|
||||
} else if (insertMode === 'append') {
|
||||
// 追加到内容末尾
|
||||
newValue = currentValue + (currentValue ? ', ' : '') + prompt.content;
|
||||
} else if (insertMode === 'replace') {
|
||||
// 替换全部内容
|
||||
newValue = prompt.content;
|
||||
}
|
||||
|
||||
if (newValue !== undefined) {
|
||||
this.setWidgetValue(widget, newValue);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果没有指定插入模式且有内容，显示对话框
|
||||
if (hasContent) {
|
||||
// 显示自定义确认对话框
|
||||
this.ui.showInsertDialog(
|
||||
@@ -524,6 +533,9 @@ export class PromptEmbedder {
|
||||
if (action === 'insert') {
|
||||
// 插入到选中位置或开头
|
||||
newValue = this.insertPromptAtCursor(widget, prompt.content);
|
||||
} else if (action === 'append') {
|
||||
// 追加到内容末尾
|
||||
newValue = currentValue + (currentValue ? ', ' : '') + prompt.content;
|
||||
} else if (action === 'replace') {
|
||||
// 替换全部内容
|
||||
newValue = prompt.content;
|
||||
@@ -536,7 +548,7 @@ export class PromptEmbedder {
|
||||
} else {
|
||||
this.setWidgetValue(widget, prompt.content);
|
||||
}
|
||||
} insertPromptAtCursor(widget, promptText) {
|
||||
}insertPromptAtCursor(widget, promptText) {
|
||||
const currentValue = widget.value || '';
|
||||
let cursorPosition = 0;
|
||||
|
||||
|
||||
@@ -50,13 +50,17 @@ class PromptManagerAPI:
|
||||
data = await request.json()
|
||||
prompts = data.get('prompts', [])
|
||||
|
||||
# 获取标签数据（如果有的话）
|
||||
tags = data.get('tags', {})
|
||||
|
||||
# 准备要保存的数据
|
||||
prompts_data = {
|
||||
"version": "2.4.0",
|
||||
"exportTime": datetime.now().isoformat(),
|
||||
"description": "ComfyUI-DD-Nodes 提示词管理器数据文件 - 自动同步",
|
||||
"totalCount": len(prompts),
|
||||
"prompts": prompts
|
||||
"prompts": prompts,
|
||||
"tags": tags # 添加标签数据
|
||||
}
|
||||
|
||||
# 写入JSON文件
|
||||
@@ -89,11 +93,13 @@ class PromptManagerAPI:
|
||||
|
||||
if prompts_data:
|
||||
prompts = prompts_data.get('prompts', [])
|
||||
tags = prompts_data.get('tags', {}) # 获取标签数据
|
||||
logger.info(f"成功加载 {len(prompts)} 个提示词从JSON文件")
|
||||
return web.json_response({
|
||||
"success": True,
|
||||
"data": prompts_data,
|
||||
"prompts": prompts,
|
||||
"tags": tags, # 返回标签数据
|
||||
"count": len(prompts)
|
||||
})
|
||||
else:
|
||||
@@ -101,6 +107,7 @@ class PromptManagerAPI:
|
||||
"success": True,
|
||||
"data": None,
|
||||
"prompts": [],
|
||||
"tags": {}, # 空标签数据
|
||||
"count": 0
|
||||
})
|
||||
|
||||
@@ -117,6 +124,7 @@ class PromptManagerAPI:
|
||||
try:
|
||||
data = await request.json()
|
||||
prompts = data.get('prompts', [])
|
||||
tags = data.get('tags', {})
|
||||
operation = data.get('operation', 'full_sync') # full_sync, add, update, delete
|
||||
|
||||
if operation == 'full_sync':
|
||||
@@ -126,10 +134,11 @@ class PromptManagerAPI:
|
||||
"exportTime": datetime.now().isoformat(),
|
||||
"description": "ComfyUI-DD-Nodes 提示词管理器数据文件 - 自动同步",
|
||||
"totalCount": len(prompts),
|
||||
"prompts": prompts
|
||||
"prompts": prompts,
|
||||
"tags": tags
|
||||
}
|
||||
success = await self.write_prompts_file(prompts_data)
|
||||
message = f"全量同步 {len(prompts)} 个提示词"
|
||||
message = f"全量同步 {len(prompts)} 个提示词和 {len(tags)} 个标签"
|
||||
|
||||
else:
|
||||
# 增量更新（预留接口）
|
||||
@@ -160,6 +169,81 @@ class PromptManagerAPI:
|
||||
"success": False,
|
||||
"error": str(e)
|
||||
}, status=500)
|
||||
|
||||
@PromptServer.instance.routes.post("/dd_nodes/save_tags")
|
||||
async def save_tags(request):
|
||||
"""保存标签数据到JSON文件"""
|
||||
try:
|
||||
data = await request.json()
|
||||
tags = data.get('tags', {})
|
||||
|
||||
# 读取现有的数据
|
||||
current_data = await self.read_prompts_file()
|
||||
if current_data:
|
||||
# 更新标签数据，保留现有提示词
|
||||
current_data['tags'] = tags
|
||||
current_data['exportTime'] = datetime.now().isoformat()
|
||||
else:
|
||||
# 创建新的数据结构
|
||||
current_data = {
|
||||
"version": "2.4.0",
|
||||
"exportTime": datetime.now().isoformat(),
|
||||
"description": "ComfyUI-DD-Nodes 提示词管理器数据文件 - 标签更新",
|
||||
"totalCount": 0,
|
||||
"prompts": [],
|
||||
"tags": tags
|
||||
}
|
||||
|
||||
# 写入JSON文件
|
||||
success = await self.write_prompts_file(current_data)
|
||||
|
||||
if success:
|
||||
logger.info(f"成功保存 {len(tags)} 个标签到JSON文件")
|
||||
return web.json_response({
|
||||
"success": True,
|
||||
"message": f"成功保存 {len(tags)} 个标签",
|
||||
"count": len(tags)
|
||||
})
|
||||
else:
|
||||
return web.json_response({
|
||||
"success": False,
|
||||
"error": "写入文件失败"
|
||||
}, status=500)
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"保存标签失败: {e}")
|
||||
return web.json_response({
|
||||
"success": False,
|
||||
"error": str(e)
|
||||
}, status=500)
|
||||
|
||||
@PromptServer.instance.routes.get("/dd_nodes/load_tags")
|
||||
async def load_tags(request):
|
||||
"""从JSON文件加载标签数据"""
|
||||
try:
|
||||
prompts_data = await self.read_prompts_file()
|
||||
|
||||
if prompts_data:
|
||||
tags = prompts_data.get('tags', {})
|
||||
logger.info(f"成功加载 {len(tags)} 个标签从JSON文件")
|
||||
return web.json_response({
|
||||
"success": True,
|
||||
"tags": tags,
|
||||
"count": len(tags)
|
||||
})
|
||||
else:
|
||||
return web.json_response({
|
||||
"success": True,
|
||||
"tags": {},
|
||||
"count": 0
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"加载标签失败: {e}")
|
||||
return web.json_response({
|
||||
"success": False,
|
||||
"error": str(e)
|
||||
}, status=500)
|
||||
|
||||
async def read_prompts_file(self):
|
||||
"""读取提示词JSON文件"""
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,705 @@
|
||||
// 对话框组件 - 负责各种确认对话框和选择器
|
||||
|
||||
export class DialogComponents {
|
||||
constructor() {
|
||||
this.addStyles();
|
||||
}
|
||||
|
||||
// 删除确认对话框
|
||||
showDeleteConfirm(promptName, onConfirm) {
|
||||
return new Promise((resolve) => {
|
||||
const modal = this.createModal('delete-confirm-modal');
|
||||
modal.innerHTML = `
|
||||
<div class="dialog-overlay">
|
||||
<div class="dialog-container delete-confirm">
|
||||
<div class="dialog-header">
|
||||
<h4>⚠️ 确认删除</h4>
|
||||
<button class="dialog-close-btn">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p>确定要删除提示词 "<strong>${this.escapeHtml(promptName)}</strong>" 吗？</p>
|
||||
<p class="warning-text">此操作不可撤销！</p>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn-danger delete-confirm-btn">确定删除</button>
|
||||
<button class="btn-secondary delete-cancel-btn">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindDialogEvents(modal, {
|
||||
'.delete-confirm-btn': () => {
|
||||
if (onConfirm) onConfirm();
|
||||
resolve(true);
|
||||
this.closeModal(modal);
|
||||
},
|
||||
'.delete-cancel-btn': () => {
|
||||
resolve(false);
|
||||
this.closeModal(modal);
|
||||
}
|
||||
});
|
||||
|
||||
this.showModal(modal);
|
||||
});
|
||||
} // 插入模式选择对话框
|
||||
showInsertModeDialog(title = '选择插入模式', message = '检测到输入框中已有内容，请选择插入模式：') {
|
||||
return new Promise((resolve) => {
|
||||
let resolved = false; // 防止多次resolve
|
||||
|
||||
const modal = this.createModal('insert-mode-modal');
|
||||
modal.innerHTML = `
|
||||
<div class="dialog-overlay">
|
||||
<div class="dialog-container insert-mode">
|
||||
<div class="dialog-header">
|
||||
<h4>${title}</h4>
|
||||
<button class="dialog-close-btn">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p>${message}</p>
|
||||
<div class="option-cards">
|
||||
<div class="option-card" data-action="insert">
|
||||
<div class="option-icon">📝</div>
|
||||
<div class="option-title">插入模式</div>
|
||||
<div class="option-description">在光标位置或文本开头插入提示词</div>
|
||||
</div>
|
||||
<div class="option-card" data-action="append">
|
||||
<div class="option-icon">➕</div>
|
||||
<div class="option-title">追加模式</div>
|
||||
<div class="option-description">在现有内容后面添加提示词</div>
|
||||
</div>
|
||||
<div class="option-card" data-action="replace">
|
||||
<div class="option-icon">🔄</div>
|
||||
<div class="option-title">替换模式</div>
|
||||
<div class="option-description">删除原有内容，使用新提示词替换</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const resolveOnce = (value) => {
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
this.closeModal(modal);
|
||||
resolve(value);
|
||||
}
|
||||
};
|
||||
|
||||
this.bindDialogEvents(modal, {
|
||||
'.option-card': (e) => {
|
||||
const action = e.currentTarget.getAttribute('data-action');
|
||||
console.log('插入模式选择:', action); // 调试信息
|
||||
resolveOnce(action);
|
||||
},
|
||||
'.dialog-close-btn': () => {
|
||||
console.log('对话框关闭按钮点击'); // 调试信息
|
||||
resolveOnce(null);
|
||||
}
|
||||
});
|
||||
|
||||
this.showModal(modal);
|
||||
});
|
||||
}
|
||||
|
||||
// 文本组件选择器对话框
|
||||
showWidgetSelector(widgets, getDisplayName) {
|
||||
return new Promise((resolve) => {
|
||||
if (!Array.isArray(widgets) || widgets.length <= 1) {
|
||||
resolve(widgets[0] || null);
|
||||
return;
|
||||
}
|
||||
|
||||
const modal = this.createModal('widget-selector-modal');
|
||||
modal.innerHTML = `
|
||||
<div class="dialog-overlay">
|
||||
<div class="dialog-container widget-selector">
|
||||
<div class="dialog-header">
|
||||
<h4>🎯 选择文本输入框</h4>
|
||||
<button class="dialog-close-btn">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p>该节点有多个文本输入框，请选择要应用提示词的输入框：</p>
|
||||
<div class="widget-list">
|
||||
${widgets.map((widget, index) => `
|
||||
<button class="widget-option" data-index="${index}">
|
||||
<div class="widget-info">
|
||||
<div class="widget-name">${getDisplayName ? getDisplayName(widget) : `输入框 ${index + 1}`}</div>
|
||||
<div class="widget-preview">${widget.value ? this.truncateText(widget.value, 50) : '(空)'}</div>
|
||||
</div>
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindDialogEvents(modal, {
|
||||
'.widget-option': (e) => {
|
||||
const index = parseInt(e.currentTarget.getAttribute('data-index'));
|
||||
resolve(widgets[index]);
|
||||
this.closeModal(modal);
|
||||
}
|
||||
});
|
||||
|
||||
this.showModal(modal);
|
||||
});
|
||||
}
|
||||
|
||||
// 导入文件选择对话框
|
||||
showFileImportDialog(accept = '.json') {
|
||||
return new Promise((resolve) => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = accept;
|
||||
input.style.display = 'none';
|
||||
|
||||
input.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
resolve(file);
|
||||
document.body.removeChild(input);
|
||||
});
|
||||
|
||||
input.addEventListener('cancel', () => {
|
||||
resolve(null);
|
||||
document.body.removeChild(input);
|
||||
});
|
||||
|
||||
document.body.appendChild(input);
|
||||
input.click();
|
||||
});
|
||||
}
|
||||
|
||||
// 成功提示对话框
|
||||
showSuccessDialog(title, message, autoClose = 3000) {
|
||||
return new Promise((resolve) => {
|
||||
const modal = this.createModal('success-dialog-modal');
|
||||
modal.innerHTML = `
|
||||
<div class="dialog-overlay">
|
||||
<div class="dialog-container success-dialog">
|
||||
<div class="dialog-header success">
|
||||
<h4>✅ ${title}</h4>
|
||||
<button class="dialog-close-btn">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p>${message}</p>
|
||||
${autoClose ? `<div class="auto-close-indicator">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="animation-duration: ${autoClose}ms;"></div>
|
||||
</div>
|
||||
<small>对话框将在 ${Math.ceil(autoClose / 1000)} 秒后自动关闭</small>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindDialogEvents(modal, {
|
||||
'.dialog-close-btn': () => {
|
||||
resolve();
|
||||
this.closeModal(modal);
|
||||
}
|
||||
});
|
||||
|
||||
this.showModal(modal);
|
||||
|
||||
// 自动关闭
|
||||
if (autoClose) {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
this.closeModal(modal);
|
||||
}, autoClose);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 错误提示对话框
|
||||
showErrorDialog(title, message) {
|
||||
return new Promise((resolve) => {
|
||||
const modal = this.createModal('error-dialog-modal');
|
||||
modal.innerHTML = `
|
||||
<div class="dialog-overlay">
|
||||
<div class="dialog-container error-dialog">
|
||||
<div class="dialog-header error">
|
||||
<h4>❌ ${title}</h4>
|
||||
<button class="dialog-close-btn">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p>${message}</p>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn-primary error-ok-btn">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindDialogEvents(modal, {
|
||||
'.error-ok-btn': () => {
|
||||
resolve();
|
||||
this.closeModal(modal);
|
||||
}
|
||||
});
|
||||
|
||||
this.showModal(modal);
|
||||
});
|
||||
}
|
||||
|
||||
// 通用确认对话框
|
||||
showConfirmDialog(title, message, confirmText = '确定', cancelText = '取消') {
|
||||
return new Promise((resolve) => {
|
||||
const modal = this.createModal('confirm-dialog-modal');
|
||||
modal.innerHTML = `
|
||||
<div class="dialog-overlay">
|
||||
<div class="dialog-container confirm-dialog">
|
||||
<div class="dialog-header">
|
||||
<h4>${title}</h4>
|
||||
<button class="dialog-close-btn">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<p>${message}</p>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn-primary confirm-ok-btn">${confirmText}</button>
|
||||
<button class="btn-secondary confirm-cancel-btn">${cancelText}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindDialogEvents(modal, {
|
||||
'.confirm-ok-btn': () => {
|
||||
resolve(true);
|
||||
this.closeModal(modal);
|
||||
},
|
||||
'.confirm-cancel-btn': () => {
|
||||
resolve(false);
|
||||
this.closeModal(modal);
|
||||
}
|
||||
});
|
||||
|
||||
this.showModal(modal);
|
||||
});
|
||||
}
|
||||
|
||||
// 工具方法
|
||||
createModal(className) {
|
||||
// 移除已存在的相同类型对话框
|
||||
const existing = document.querySelector(`.${className}`);
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
}
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = className;
|
||||
return modal;
|
||||
}
|
||||
|
||||
showModal(modal) {
|
||||
document.body.appendChild(modal);
|
||||
// 添加显示动画
|
||||
requestAnimationFrame(() => {
|
||||
modal.classList.add('show');
|
||||
});
|
||||
}
|
||||
|
||||
closeModal(modal) {
|
||||
modal.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
if (modal.parentNode) {
|
||||
modal.parentNode.removeChild(modal);
|
||||
}
|
||||
}, 300);
|
||||
} bindDialogEvents(modal, eventMap) {
|
||||
// 绑定自定义事件
|
||||
Object.entries(eventMap).forEach(([selector, handler]) => {
|
||||
const elements = modal.querySelectorAll(selector);
|
||||
elements.forEach(element => {
|
||||
element.addEventListener('click', handler);
|
||||
});
|
||||
});
|
||||
|
||||
// 只有在没有自定义关闭按钮处理时才绑定通用关闭事件
|
||||
if (!eventMap['.dialog-close-btn']) {
|
||||
const closeBtn = modal.querySelector('.dialog-close-btn');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => this.closeModal(modal));
|
||||
}
|
||||
}
|
||||
const handleKeydown = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
// 如果有自定义关闭处理，使用它；否则直接关闭
|
||||
if (eventMap['.dialog-close-btn']) {
|
||||
eventMap['.dialog-close-btn']();
|
||||
} else {
|
||||
this.closeModal(modal);
|
||||
}
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
truncateText(text, maxLength) {
|
||||
if (!text || text.length <= maxLength) return text;
|
||||
return text.substring(0, maxLength) + '...';
|
||||
}
|
||||
|
||||
addStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
/* 通用对话框样式 */
|
||||
.delete-confirm-modal,
|
||||
.insert-mode-modal,
|
||||
.widget-selector-modal,
|
||||
.success-dialog-modal,
|
||||
.error-dialog-modal,
|
||||
.confirm-dialog-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 20000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.delete-confirm-modal.show,
|
||||
.insert-mode-modal.show,
|
||||
.widget-selector-modal.show,
|
||||
.success-dialog-modal.show,
|
||||
.error-dialog-modal.show,
|
||||
.confirm-dialog-modal.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
background: #2b2b2b;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.delete-confirm-modal.show .dialog-container,
|
||||
.insert-mode-modal.show .dialog-container,
|
||||
.widget-selector-modal.show .dialog-container,
|
||||
.success-dialog-modal.show .dialog-container,
|
||||
.error-dialog-modal.show .dialog-container,
|
||||
.confirm-dialog-modal.show .dialog-container {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #404040;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%);
|
||||
}
|
||||
|
||||
.dialog-header.success {
|
||||
background: linear-gradient(135deg, #43cf7c 0%, #38b86a 100%);
|
||||
}
|
||||
|
||||
.dialog-header.error {
|
||||
background: linear-gradient(135deg, #ff5733 0%, #e04929 100%);
|
||||
}
|
||||
|
||||
.dialog-header h4 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dialog-close-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 24px;
|
||||
color: #e0e0e0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.dialog-content p {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #ff8c42;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #2a82e4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #1c6bb7;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ff5733;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #e04929;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 选项卡片样式 */
|
||||
.option-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #404040;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.option-card:hover {
|
||||
border-color: #2a82e4;
|
||||
background: #262626;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.option-description {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 组件选择器样式 */
|
||||
.widget-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.widget-option {
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #404040;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.widget-option:hover {
|
||||
border-color: #2a82e4;
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.widget-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.widget-name {
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.widget-preview {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* 自动关闭指示器 */
|
||||
.auto-close-indicator {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #404040;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #404040;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #43cf7c;
|
||||
width: 100%;
|
||||
animation: shrink linear forwards;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@keyframes shrink {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.dialog-container {
|
||||
margin: 20px;
|
||||
max-width: none;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.option-cards {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
padding: 12px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
if (!document.head.querySelector('style[data-component="dialog-components"]')) {
|
||||
style.setAttribute('data-component', 'dialog-components');
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// 移除所有对话框
|
||||
const dialogs = document.querySelectorAll(`
|
||||
.delete-confirm-modal,
|
||||
.insert-mode-modal,
|
||||
.widget-selector-modal,
|
||||
.success-dialog-modal,
|
||||
.error-dialog-modal,
|
||||
.confirm-dialog-modal
|
||||
`);
|
||||
|
||||
dialogs.forEach(dialog => {
|
||||
if (dialog.parentNode) {
|
||||
dialog.parentNode.removeChild(dialog);
|
||||
}
|
||||
});
|
||||
|
||||
// 移除样式
|
||||
const style = document.head.querySelector('style[data-component="dialog-components"]');
|
||||
if (style) {
|
||||
style.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
// 主模态框组件 - 负责整体模态框结构和基础样式
|
||||
|
||||
export class MainModal {
|
||||
constructor(title = '嵌入提示词管理') {
|
||||
this.title = title;
|
||||
this.modal = null;
|
||||
this.isVisible = false;
|
||||
this.createModal();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
createModal() {
|
||||
this.modal = document.createElement('div');
|
||||
this.modal.className = 'prompt-embedder-modal';
|
||||
this.modal.innerHTML = `
|
||||
<div class="prompt-embedder-overlay">
|
||||
<div class="prompt-embedder-container">
|
||||
<div class="prompt-embedder-header">
|
||||
<h3>${this.title}</h3>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="prompt-embedder-content">
|
||||
<!-- 内容将由其他组件填充 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加基础样式
|
||||
this.addStyles();
|
||||
|
||||
// 隐藏模态框
|
||||
this.modal.style.display = 'none';
|
||||
document.body.appendChild(this.modal);
|
||||
} bindEvents() {
|
||||
// 关闭按钮事件
|
||||
const closeBtn = this.modal.querySelector('.close-btn');
|
||||
closeBtn.addEventListener('click', () => this.hide());
|
||||
|
||||
// 移除点击遮罩层关闭功能，防止误点击
|
||||
// const overlay = this.modal.querySelector('.prompt-embedder-overlay');
|
||||
// overlay.addEventListener('click', (e) => {
|
||||
// if (e.target === overlay) {
|
||||
// this.hide();
|
||||
// }
|
||||
// });
|
||||
|
||||
// ESC键关闭（保留快捷键）
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && this.isVisible) {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
this.modal.style.display = 'block';
|
||||
this.isVisible = true;
|
||||
|
||||
// 添加显示动画
|
||||
requestAnimationFrame(() => {
|
||||
this.modal.classList.add('show');
|
||||
});
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.modal.classList.remove('show');
|
||||
this.isVisible = false;
|
||||
|
||||
// 等待动画完成后隐藏
|
||||
setTimeout(() => {
|
||||
this.modal.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.isVisible) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
getContentContainer() {
|
||||
return this.modal.querySelector('.prompt-embedder-content');
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
this.title = title;
|
||||
const titleElement = this.modal.querySelector('.prompt-embedder-header h3');
|
||||
if (titleElement) {
|
||||
titleElement.textContent = title;
|
||||
}
|
||||
}
|
||||
|
||||
addStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.prompt-embedder-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.prompt-embedder-modal.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
} .prompt-embedder-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
} .prompt-embedder-container {
|
||||
background: linear-gradient(145deg, #2d2d30, #252528);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
max-height: calc(100vh - 40px);
|
||||
box-shadow:
|
||||
0 32px 64px rgba(0, 0, 0, 0.4),
|
||||
0 16px 32px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
transition: all 0.4s ease-out;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
}.prompt-embedder-modal.show .prompt-embedder-container {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.prompt-embedder-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px 20px;
|
||||
background: linear-gradient(135deg, #3a3a3d, #2d2d30);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.prompt-embedder-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
} .prompt-embedder-header h3 {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.close-btn:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
transform: scale(0.95);
|
||||
} .prompt-embedder-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #1e1e1e;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prompt-embedder-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
if (!document.head.querySelector('style[data-component="main-modal"]')) {
|
||||
style.setAttribute('data-component', 'main-modal');
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.modal && this.modal.parentNode) {
|
||||
this.modal.parentNode.removeChild(this.modal);
|
||||
}
|
||||
|
||||
// 移除样式
|
||||
const style = document.head.querySelector('style[data-component="main-modal"]');
|
||||
if (style) {
|
||||
style.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,812 @@
|
||||
// 列表组件 - 负责提示词列表的显示和交互
|
||||
|
||||
import { globalTagColorManager } from './TagColorManager.js';
|
||||
|
||||
export class PromptList { constructor(options = {}) {
|
||||
this.prompts = [];
|
||||
this.filteredPrompts = [];
|
||||
this.currentSearchKeyword = ''; // 存储当前搜索关键词
|
||||
this.currentSelectedTags = []; // 存储当前选中的标签
|
||||
this.onEdit = options.onEdit || null;
|
||||
this.onDelete = options.onDelete || null;
|
||||
this.onApply = options.onApply || null;
|
||||
this.onTagClick = options.onTagClick || null;
|
||||
|
||||
this.container = null;
|
||||
this.listContainer = null;
|
||||
this.headerContainer = null;
|
||||
this.createList();
|
||||
}
|
||||
|
||||
createList() {
|
||||
this.container = document.createElement('div');
|
||||
this.container.className = 'prompt-list-section'; this.container.innerHTML = `
|
||||
<div class="prompt-list-header">
|
||||
<div class="header-title">
|
||||
<h4>提示词列表</h4>
|
||||
<div class="list-stats">
|
||||
<span class="total-count">0 个项目</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="action-group primary">
|
||||
<button class="add-prompt-btn primary-btn">
|
||||
<span class="btn-icon">✨</span>
|
||||
<span class="btn-text">添加提示词</span>
|
||||
</button>
|
||||
<button class="tag-manager-btn secondary-btn">
|
||||
<span class="btn-icon">🏷️</span>
|
||||
<span class="btn-text">标签管理</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="action-group secondary">
|
||||
<button class="import-btn tertiary-btn">
|
||||
<span class="btn-icon">📥</span>
|
||||
<span class="btn-text">导入</span>
|
||||
</button>
|
||||
<button class="export-btn tertiary-btn">
|
||||
<span class="btn-icon">📤</span>
|
||||
<span class="btn-text">导出</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prompt-list"></div>
|
||||
`;
|
||||
|
||||
this.headerContainer = this.container.querySelector('.prompt-list-header');
|
||||
this.listContainer = this.container.querySelector('.prompt-list');
|
||||
|
||||
this.bindEvents();
|
||||
this.addStyles();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 头部操作按钮事件将在主控制器中绑定
|
||||
// 这里只处理列表项的交互事件
|
||||
} setPrompts(prompts) {
|
||||
this.prompts = Array.isArray(prompts) ? prompts : [];
|
||||
// 重新应用当前搜索关键词和标签筛选
|
||||
if (this.currentSearchKeyword && this.currentSearchKeyword.trim() !== '') {
|
||||
this.filterPrompts(this.currentSearchKeyword, this.currentSelectedTags);
|
||||
} else if (this.currentSelectedTags && this.currentSelectedTags.length > 0) {
|
||||
this.filterPrompts('', this.currentSelectedTags);
|
||||
} else {
|
||||
this.filteredPrompts = [...this.prompts];
|
||||
this.render();
|
||||
}
|
||||
this.updateStats();
|
||||
} addPrompt(prompt) {
|
||||
if (prompt && typeof prompt === 'object') {
|
||||
this.prompts.push(prompt);
|
||||
// 重新应用当前搜索关键词和标签筛选
|
||||
if (this.currentSearchKeyword && this.currentSearchKeyword.trim() !== '') {
|
||||
this.filterPrompts(this.currentSearchKeyword, this.currentSelectedTags);
|
||||
} else if (this.currentSelectedTags && this.currentSelectedTags.length > 0) {
|
||||
this.filterPrompts('', this.currentSelectedTags);
|
||||
} else {
|
||||
this.filteredPrompts = [...this.prompts];
|
||||
this.render();
|
||||
}
|
||||
this.updateStats();
|
||||
}
|
||||
} updatePrompt(index, prompt) {
|
||||
if (index >= 0 && index < this.prompts.length && prompt) {
|
||||
this.prompts[index] = prompt;
|
||||
// 重新应用当前搜索关键词和标签筛选
|
||||
if (this.currentSearchKeyword && this.currentSearchKeyword.trim() !== '') {
|
||||
this.filterPrompts(this.currentSearchKeyword, this.currentSelectedTags);
|
||||
} else if (this.currentSelectedTags && this.currentSelectedTags.length > 0) {
|
||||
this.filterPrompts('', this.currentSelectedTags);
|
||||
} else {
|
||||
this.filteredPrompts = [...this.prompts];
|
||||
this.render();
|
||||
}
|
||||
this.updateStats();
|
||||
}
|
||||
}
|
||||
|
||||
removePrompt(index) {
|
||||
if (index >= 0 && index < this.prompts.length) {
|
||||
this.prompts.splice(index, 1); // 重新应用当前搜索关键词和标签筛选
|
||||
if (this.currentSearchKeyword && this.currentSearchKeyword.trim() !== '') {
|
||||
this.filterPrompts(this.currentSearchKeyword, this.currentSelectedTags);
|
||||
} else if (this.currentSelectedTags && this.currentSelectedTags.length > 0) {
|
||||
this.filterPrompts('', this.currentSelectedTags);
|
||||
} else {
|
||||
this.filteredPrompts = [...this.prompts];
|
||||
this.render();
|
||||
}
|
||||
this.updateStats();
|
||||
} }filterPrompts(keyword, selectedTags = []) {
|
||||
// 存储当前搜索关键词
|
||||
this.currentSearchKeyword = keyword || '';
|
||||
this.currentSelectedTags = selectedTags || [];
|
||||
|
||||
// 应用关键词筛选和标签筛选
|
||||
this.filteredPrompts = this.prompts.filter(prompt => {
|
||||
let keywordMatch = true;
|
||||
let tagMatch = true;
|
||||
|
||||
// 关键词筛选
|
||||
if (keyword && keyword.trim() !== '') {
|
||||
const searchKeyword = keyword.toLowerCase();
|
||||
keywordMatch = false;
|
||||
|
||||
// 搜索名称
|
||||
if (prompt.name && prompt.name.toLowerCase().includes(searchKeyword)) {
|
||||
keywordMatch = true;
|
||||
}
|
||||
|
||||
// 搜索内容
|
||||
if (!keywordMatch && prompt.content && prompt.content.toLowerCase().includes(searchKeyword)) {
|
||||
keywordMatch = true;
|
||||
}
|
||||
|
||||
// 搜索标签
|
||||
if (!keywordMatch && prompt.tags && Array.isArray(prompt.tags)) {
|
||||
keywordMatch = prompt.tags.some(tag =>
|
||||
tag.toLowerCase().includes(searchKeyword)
|
||||
);
|
||||
}
|
||||
}
|
||||
// 标签筛选 - 修复为AND逻辑（必须包含所有选中的标签）
|
||||
if (selectedTags && selectedTags.length > 0) {
|
||||
tagMatch = false;
|
||||
if (prompt.tags && Array.isArray(prompt.tags)) {
|
||||
// 检查是否包含所有选中的标签（AND逻辑）
|
||||
tagMatch = selectedTags.every(selectedTag =>
|
||||
prompt.tags.includes(selectedTag)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return keywordMatch && tagMatch;
|
||||
});
|
||||
|
||||
this.render();
|
||||
this.updateStats();
|
||||
return this.filteredPrompts.length;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.filteredPrompts.length === 0) {
|
||||
this.renderEmptyState();
|
||||
} else {
|
||||
this.renderPrompts();
|
||||
}
|
||||
} renderEmptyState() {
|
||||
// 判断是否在搜索状态
|
||||
const isSearching = this.currentSearchKeyword && this.currentSearchKeyword.trim() !== '';
|
||||
const hasPrompts = this.prompts.length > 0;
|
||||
|
||||
let emptyIcon, emptyTitle, emptyDescription;
|
||||
|
||||
if (isSearching && hasPrompts) {
|
||||
// 有提示词但搜索无结果
|
||||
emptyIcon = '🔍';
|
||||
emptyTitle = '未找到相关内容';
|
||||
emptyDescription = `未找到包含"${this.currentSearchKeyword}"的提示词`;
|
||||
} else {
|
||||
// 没有提示词
|
||||
emptyIcon = '📝';
|
||||
emptyTitle = '暂无提示词';
|
||||
emptyDescription = '点击"+ 添加提示词"开始添加';
|
||||
}
|
||||
|
||||
this.listContainer.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">${emptyIcon}</div>
|
||||
<p>${emptyTitle}</p>
|
||||
<p>${emptyDescription}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderPrompts() {
|
||||
this.listContainer.innerHTML = this.filteredPrompts.map((prompt, index) => {
|
||||
const actualIndex = this.prompts.indexOf(prompt);
|
||||
return this.createPromptItemHTML(prompt, actualIndex);
|
||||
}).join('');
|
||||
|
||||
// 绑定列表项事件
|
||||
this.bindPromptItemEvents();
|
||||
}
|
||||
|
||||
createPromptItemHTML(prompt, index) { const tagsHTML = prompt.tags && prompt.tags.length > 0
|
||||
? `<div class="prompt-item-tags">
|
||||
${prompt.tags.map(tag => {
|
||||
const color = globalTagColorManager.getTagColor(tag);
|
||||
const colorRGB = globalTagColorManager.getTagColorRGB(tag);
|
||||
return `<span class="tag" data-tag="${this.escapeHtml(tag)}" style="--tag-color: ${color}; --tag-color-rgb: ${colorRGB};">${this.escapeHtml(tag)}</span>`;
|
||||
}).join('')}
|
||||
</div>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="prompt-item" data-index="${index}">
|
||||
<div class="prompt-item-header">
|
||||
<div class="prompt-item-title-section">
|
||||
<div class="prompt-item-name">${this.escapeHtml(prompt.name || '')}</div>
|
||||
${tagsHTML}
|
||||
</div>
|
||||
<div class="prompt-item-actions">
|
||||
<button class="edit-btn" data-index="${index}">编辑</button>
|
||||
<button class="apply-btn" data-index="${index}">应用</button>
|
||||
<button class="delete-btn" data-index="${index}">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prompt-item-content">${this.escapeHtml(prompt.content || '')}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
bindPromptItemEvents() {
|
||||
// 编辑按钮
|
||||
this.listContainer.querySelectorAll('.edit-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const index = parseInt(e.target.dataset.index);
|
||||
if (this.onEdit && index >= 0) {
|
||||
this.onEdit(index, this.prompts[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 应用按钮
|
||||
this.listContainer.querySelectorAll('.apply-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const index = parseInt(e.target.dataset.index);
|
||||
if (this.onApply && index >= 0) {
|
||||
this.onApply(index, this.prompts[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 删除按钮
|
||||
this.listContainer.querySelectorAll('.delete-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const index = parseInt(e.target.dataset.index);
|
||||
if (this.onDelete && index >= 0) {
|
||||
this.onDelete(index, this.prompts[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 标签点击事件
|
||||
this.listContainer.querySelectorAll('.tag').forEach(tag => {
|
||||
tag.addEventListener('click', (e) => {
|
||||
const tagName = e.target.dataset.tag;
|
||||
if (this.onTagClick && tagName) {
|
||||
this.onTagClick(tagName);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
getElement() {
|
||||
return this.container;
|
||||
} getHeaderActions() {
|
||||
return {
|
||||
importBtn: this.container.querySelector('.import-btn'),
|
||||
exportBtn: this.container.querySelector('.export-btn'),
|
||||
tagManagerBtn: this.container.querySelector('.tag-manager-btn'),
|
||||
addBtn: this.container.querySelector('.add-prompt-btn')
|
||||
};
|
||||
}
|
||||
|
||||
// 设置回调函数
|
||||
setOnEdit(callback) {
|
||||
this.onEdit = callback;
|
||||
}
|
||||
|
||||
setOnDelete(callback) {
|
||||
this.onDelete = callback;
|
||||
}
|
||||
|
||||
setOnApply(callback) {
|
||||
this.onApply = callback;
|
||||
}
|
||||
|
||||
setOnTagClick(callback) {
|
||||
this.onTagClick = callback;
|
||||
}
|
||||
|
||||
addStyles() {
|
||||
const style = document.createElement('style'); style.textContent = `
|
||||
.prompt-list-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #1e1e1e;
|
||||
} .prompt-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px 20px;
|
||||
background: linear-gradient(135deg, #2d2d30, #232326);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.prompt-list-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.header-title h4 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.list-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.total-count {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-group.primary {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.action-group.secondary {
|
||||
order: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.action-group.secondary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 按钮基础样式 */
|
||||
.prompt-list-header button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
.prompt-list-header button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.prompt-list-header button:hover::before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
white-space: nowrap;
|
||||
} /* 主要按钮样式 */
|
||||
.primary-btn {
|
||||
background: linear-gradient(135deg, #0078d4, #106ebe);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
min-height: 40px;
|
||||
box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.primary-btn:hover {
|
||||
background: linear-gradient(135deg, #106ebe, #005a9e);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 120, 212, 0.4);
|
||||
}
|
||||
|
||||
.primary-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
|
||||
}
|
||||
|
||||
/* 次要按钮样式 */
|
||||
.secondary-btn {
|
||||
background: linear-gradient(135deg, #404044, #35353a);
|
||||
color: #e0e0e0;
|
||||
padding: 10px 16px;
|
||||
min-height: 40px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
background: linear-gradient(135deg, #4a4a4e, #3f3f44);
|
||||
color: #ffffff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 三级按钮样式 */
|
||||
.tertiary-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ccc;
|
||||
padding: 10px 14px;
|
||||
min-height: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tertiary-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}.tertiary-btn:active {
|
||||
transform: translateY(0);
|
||||
} /* 列表区域样式 */
|
||||
.prompt-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px 32px 24px 40px;
|
||||
background: #1e1e1e;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
} .prompt-list::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: #888;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent);
|
||||
border-radius: 12px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.6;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 12px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-state p:first-of-type {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.prompt-item {
|
||||
background: linear-gradient(145deg, #2a2a2a, #232323);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prompt-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.prompt-item:hover {
|
||||
border-color: rgba(0, 120, 212, 0.4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 2px 8px rgba(0, 120, 212, 0.1);
|
||||
background: linear-gradient(145deg, #2e2e2e, #272727);
|
||||
}
|
||||
|
||||
.prompt-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.prompt-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.prompt-item-title-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.prompt-item-name {
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
.prompt-item-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
} .tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--tag-color, #2a82e4);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
min-width: 60px;
|
||||
max-width: 90px;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
user-select: none;
|
||||
position: relative;
|
||||
letter-spacing: 0.25px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1);
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000,
|
||||
0 -1px 0 #000,
|
||||
0 1px 0 #000,
|
||||
-1px 0 0 #000,
|
||||
1px 0 0 #000;
|
||||
}.tag::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
} .tag:hover {
|
||||
box-shadow:
|
||||
0 0 10px rgba(var(--tag-color-rgb), 0.3),
|
||||
0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
border-color: rgba(var(--tag-color-rgb), 0.4);
|
||||
filter: brightness(1.1) saturate(1.05);
|
||||
}.tag:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.prompt-item-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-btn, .apply-btn, .delete-btn {
|
||||
background: #383838;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background: #ffc300;
|
||||
color: #000;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.apply-btn:hover {
|
||||
background: #43cf7c;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #8b3a3a;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #ff5733;
|
||||
transform: translateY(-1px);
|
||||
} .prompt-item-content {
|
||||
color: #c4c4c4;
|
||||
line-height: 1.5;
|
||||
background: linear-gradient(145deg, #1a1a1a, #232323);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.prompt-list-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.prompt-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.prompt-item-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.prompt-item-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
if (!document.head.querySelector('style[data-component="prompt-list"]')) {
|
||||
style.setAttribute('data-component', 'prompt-list');
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
updateStats() {
|
||||
const totalElement = this.container.querySelector('.total-count');
|
||||
if (totalElement) {
|
||||
totalElement.textContent = `${this.filteredPrompts.length} 个项目`;
|
||||
}
|
||||
} // 新增：刷新所有标签的颜色
|
||||
refreshTagColors() {
|
||||
console.log('PromptList: 刷新标签颜色和删除无效标签...');
|
||||
|
||||
// 重新渲染整个列表以确保已删除的标签被正确移除
|
||||
// 这比仅仅更新颜色更可靠，能够处理标签删除的情况
|
||||
this.render();
|
||||
|
||||
console.log('PromptList: 标签颜色刷新和无效标签清理完成');
|
||||
}
|
||||
|
||||
// 新增：完全重新渲染列表（保持当前筛选状态）
|
||||
forceRefresh() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
// 清除所有筛选条件
|
||||
clearFilters() {
|
||||
this.currentSearchKeyword = '';
|
||||
this.currentSelectedTags = [];
|
||||
this.filteredPrompts = [...this.prompts];
|
||||
this.render();
|
||||
this.updateStats();
|
||||
}
|
||||
|
||||
// 获取当前筛选状态
|
||||
getFilterState() {
|
||||
return {
|
||||
keyword: this.currentSearchKeyword,
|
||||
selectedTags: this.currentSelectedTags
|
||||
};
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.container && this.container.parentNode) {
|
||||
this.container.parentNode.removeChild(this.container);
|
||||
}
|
||||
|
||||
// 移除样式
|
||||
const style = document.head.querySelector('style[data-component="prompt-list"]');
|
||||
if (style) {
|
||||
style.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,700 @@
|
||||
// 搜索栏组件 - 负责提示词搜索功能和标签筛选
|
||||
|
||||
import { globalTagColorManager } from './TagColorManager.js';
|
||||
|
||||
export class SearchBar {
|
||||
constructor(onSearch = null, onTagFilter = null) {
|
||||
this.onSearch = onSearch;
|
||||
this.onTagFilter = onTagFilter; // 标签筛选回调
|
||||
this.currentKeyword = '';
|
||||
this.selectedTags = new Set(); // 选中的标签
|
||||
this.allTags = new Set(); // 所有可用标签
|
||||
this.searchInput = null;
|
||||
this.container = null; this.tagsContainer = null;
|
||||
this.debounceTimer = null;
|
||||
this.createSearchBar();
|
||||
}createSearchBar() {
|
||||
this.container = document.createElement('div');
|
||||
this.container.className = 'search-section';
|
||||
this.container.innerHTML = `
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="搜索提示词名称、内容或标签（多标签用逗号分隔）..." />
|
||||
<div class="search-icon">🔍</div>
|
||||
<button class="clear-search-btn" style="display: none;" title="清除搜索">×</button>
|
||||
</div>
|
||||
<div class="tags-filter-container">
|
||||
<!-- 标签筛选区域将在这里动态生成 -->
|
||||
</div>
|
||||
<div class="search-stats" style="display: none;">
|
||||
<span class="search-results-count">找到 0 个结果</span>
|
||||
<span class="active-filters-count" style="display: none;">筛选: <span class="filter-count">0</span> 个标签</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.searchInput = this.container.querySelector('.search-input');
|
||||
this.clearBtn = this.container.querySelector('.clear-search-btn');
|
||||
this.statsContainer = this.container.querySelector('.search-stats');
|
||||
this.resultsCount = this.container.querySelector('.search-results-count');
|
||||
this.tagsContainer = this.container.querySelector('.tags-filter-container');
|
||||
this.activeFiltersCount = this.container.querySelector('.active-filters-count');
|
||||
this.filterCount = this.container.querySelector('.filter-count');
|
||||
|
||||
this.bindEvents();
|
||||
this.addStyles();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 搜索输入事件（带防抖）
|
||||
this.searchInput.addEventListener('input', (e) => {
|
||||
const keyword = e.target.value.trim();
|
||||
this.updateClearButton(keyword);
|
||||
|
||||
// 防抖处理
|
||||
if (this.debounceTimer) {
|
||||
clearTimeout(this.debounceTimer);
|
||||
}
|
||||
|
||||
this.debounceTimer = setTimeout(() => {
|
||||
this.handleSearch(keyword);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// 回车键搜索
|
||||
this.searchInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (this.debounceTimer) {
|
||||
clearTimeout(this.debounceTimer);
|
||||
}
|
||||
this.handleSearch(this.searchInput.value.trim());
|
||||
}
|
||||
});
|
||||
|
||||
// 清除搜索
|
||||
this.clearBtn.addEventListener('click', () => {
|
||||
this.clearSearch();
|
||||
});
|
||||
|
||||
// 聚焦输入框时的样式
|
||||
this.searchInput.addEventListener('focus', () => {
|
||||
this.container.querySelector('.search-container').classList.add('focused');
|
||||
});
|
||||
|
||||
this.searchInput.addEventListener('blur', () => {
|
||||
this.container.querySelector('.search-container').classList.remove('focused');
|
||||
});
|
||||
} handleSearch(keyword) {
|
||||
this.currentKeyword = keyword;
|
||||
|
||||
// 同时应用搜索和标签筛选
|
||||
if (this.onTagFilter && typeof this.onTagFilter === 'function') {
|
||||
const results = this.onTagFilter(keyword, Array.from(this.selectedTags));
|
||||
this.updateSearchStats(results);
|
||||
} else if (this.onSearch && typeof this.onSearch === 'function') {
|
||||
// 兼容旧的搜索回调
|
||||
const results = this.onSearch(keyword);
|
||||
this.updateSearchStats(results);
|
||||
}
|
||||
}
|
||||
|
||||
updateClearButton(keyword) {
|
||||
if (keyword) {
|
||||
this.clearBtn.style.display = 'block';
|
||||
} else {
|
||||
this.clearBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
updateSearchStats(results) {
|
||||
if (this.currentKeyword) {
|
||||
this.statsContainer.style.display = 'block';
|
||||
const count = Array.isArray(results) ? results.length : (results || 0);
|
||||
this.resultsCount.textContent = `找到 ${count} 个结果`;
|
||||
} else {
|
||||
this.statsContainer.style.display = 'none';
|
||||
}
|
||||
} clearSearch() {
|
||||
this.searchInput.value = '';
|
||||
this.currentKeyword = '';
|
||||
this.clearBtn.style.display = 'none';
|
||||
this.statsContainer.style.display = 'none';
|
||||
this.selectedTags.clear(); // 同时清除标签筛选
|
||||
this.renderTags();
|
||||
this.updateActiveFiltersDisplay();
|
||||
this.handleFilter();
|
||||
this.searchInput.focus();
|
||||
}
|
||||
|
||||
setKeyword(keyword) {
|
||||
this.searchInput.value = keyword;
|
||||
this.currentKeyword = keyword;
|
||||
this.updateClearButton(keyword);
|
||||
this.handleSearch(keyword);
|
||||
}
|
||||
|
||||
getKeyword() {
|
||||
return this.currentKeyword;
|
||||
}
|
||||
|
||||
setOnSearch(callback) {
|
||||
this.onSearch = callback;
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.searchInput.focus();
|
||||
}
|
||||
|
||||
addStyles() { const style = document.createElement('style');
|
||||
style.textContent = ` .search-section {
|
||||
padding: 24px 32px 20px;
|
||||
background: linear-gradient(135deg, #2d2d30, #232326);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
box-shadow:
|
||||
inset 0 1px 3px rgba(0, 0, 0, 0.2),
|
||||
0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.search-container.focused {
|
||||
border-color: rgba(0, 120, 212, 0.6);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(0, 120, 212, 0.15),
|
||||
inset 0 1px 3px rgba(0, 0, 0, 0.2),
|
||||
0 4px 12px rgba(0, 120, 212, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.search-container.focused::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #888;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: #888;
|
||||
padding: 0 16px 0 16px;
|
||||
font-size: 16px;
|
||||
pointer-events: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-container.focused .search-icon {
|
||||
color: #0078d4;
|
||||
}
|
||||
|
||||
.clear-search-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
margin-right: 4px;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.clear-search-btn.visible {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.clear-search-btn:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: scale(1.1);
|
||||
} .clear-search-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.search-stats {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.search-results-count {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.25px;
|
||||
}
|
||||
|
||||
.active-filters-count {
|
||||
color: #4a9eff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(74, 158, 255, 0.2);
|
||||
} /* 标签筛选样式 */
|
||||
.tags-filter-container {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tags-filter-container:empty {
|
||||
display: none;
|
||||
} .tags-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tags-title {
|
||||
color: #e0e0e0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tags-title::before {
|
||||
content: '🏷️';
|
||||
font-size: 12px;
|
||||
} .clear-tags-btn {
|
||||
background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.25px;
|
||||
height: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.clear-tags-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, #3a3a3a, #2e2e2e);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.clear-tags-btn:active {
|
||||
transform: translateY(0);
|
||||
} .tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
} .filter-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--tag-color, #2a82e4);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
user-select: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
min-width: 60px;
|
||||
max-width: 90px;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
letter-spacing: 0.25px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
transform: scale(1);
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000,
|
||||
0 -1px 0 #000,
|
||||
0 1px 0 #000,
|
||||
-1px 0 0 #000,
|
||||
1px 0 0 #000;
|
||||
}.filter-tag::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
} .filter-tag:hover {
|
||||
box-shadow:
|
||||
0 0 10px rgba(var(--tag-color-rgb), 0.3),
|
||||
0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
border-color: rgba(var(--tag-color-rgb), 0.4);
|
||||
filter: brightness(1.1) saturate(1.05);
|
||||
}.filter-tag:hover::before {
|
||||
opacity: 1;
|
||||
} .filter-tag.selected {
|
||||
background: var(--tag-color, #2a82e4);
|
||||
box-shadow:
|
||||
0 0 12px rgba(var(--tag-color-rgb), 0.4),
|
||||
0 4px 15px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 2px rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(var(--tag-color-rgb), 0.8);
|
||||
transform: scale(1.08);
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000,
|
||||
0 -1px 0 #000,
|
||||
0 1px 0 #000,
|
||||
-1px 0 0 #000,
|
||||
1px 0 0 #000;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
filter: brightness(1.15) saturate(1.1);
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
animation: tagSelectPulse 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
} .filter-tag.selected:hover {
|
||||
background: var(--tag-color, #2a82e4);
|
||||
box-shadow:
|
||||
0 0 16px rgba(var(--tag-color-rgb), 0.5),
|
||||
0 6px 20px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 2px rgba(255, 255, 255, 0.9);
|
||||
transform: scale(1.12);
|
||||
filter: brightness(1.25) saturate(1.15);
|
||||
}
|
||||
|
||||
@keyframes tagSelectPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow:
|
||||
0 0 8px rgba(var(--tag-color-rgb), 0.3),
|
||||
0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
box-shadow:
|
||||
0 0 20px rgba(var(--tag-color-rgb), 0.6),
|
||||
0 6px 20px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 3px rgba(255, 255, 255, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.08);
|
||||
box-shadow:
|
||||
0 0 12px rgba(var(--tag-color-rgb), 0.4),
|
||||
0 4px 15px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 2px rgba(255, 255, 255, 0.8);
|
||||
} }
|
||||
|
||||
.no-tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.search-input {
|
||||
padding: 10px 12px;
|
||||
font-size: 16px; /* 防止iOS缩放 */
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
if (!document.head.querySelector('style[data-component="search-bar"]')) {
|
||||
style.setAttribute('data-component', 'search-bar');
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
} // 标签相关方法
|
||||
updateTags(prompts) {
|
||||
// 收集所有标签
|
||||
this.allTags.clear();
|
||||
|
||||
// 1. 从提示词中收集标签
|
||||
prompts.forEach(prompt => {
|
||||
if (prompt.tags && Array.isArray(prompt.tags)) {
|
||||
prompt.tags.forEach(tag => {
|
||||
if (tag && tag.trim()) {
|
||||
this.allTags.add(tag.trim());
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 从TagColorManager中获取所有手动创建的标签（包括未使用的）
|
||||
const allManagedTags = globalTagColorManager.getAllTags();
|
||||
allManagedTags.forEach(tag => {
|
||||
this.allTags.add(tag);
|
||||
});
|
||||
|
||||
// 更新全局标签颜色管理器
|
||||
globalTagColorManager.updateFromPrompts(prompts);
|
||||
|
||||
this.renderTags();
|
||||
}
|
||||
|
||||
generateRandomColor() {
|
||||
// 使用全局标签颜色管理器
|
||||
return globalTagColorManager.generateRandomColor();
|
||||
} renderTags() {
|
||||
if (!this.tagsContainer) return;
|
||||
|
||||
if (this.allTags.size === 0) {
|
||||
this.tagsContainer.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const sortedTags = Array.from(this.allTags).sort();
|
||||
|
||||
// 如果有选中的标签，在标签列表前添加清除按钮
|
||||
const clearButton = this.selectedTags.size > 0
|
||||
? `<button class="clear-tags-btn" title="清除所有标签筛选">清除筛选</button>`
|
||||
: '';
|
||||
|
||||
this.tagsContainer.innerHTML = `
|
||||
${clearButton}
|
||||
${sortedTags.map(tag => this.createTagElement(tag)).join('')}
|
||||
`;
|
||||
|
||||
this.bindTagEvents();
|
||||
}createTagElement(tag) {
|
||||
const isSelected = this.selectedTags.has(tag);
|
||||
const color = globalTagColorManager.getTagColor(tag);
|
||||
const colorRGB = globalTagColorManager.getTagColorRGB(tag);
|
||||
|
||||
return `
|
||||
<span class="filter-tag ${isSelected ? 'selected' : ''}"
|
||||
data-tag="${this.escapeHtml(tag)}"
|
||||
style="--tag-color: ${color}; --tag-color-rgb: ${colorRGB};"
|
||||
title="点击选择/取消选择标签">
|
||||
${this.escapeHtml(tag)}
|
||||
</span>
|
||||
`;
|
||||
} bindTagEvents() {
|
||||
// 标签点击事件
|
||||
this.tagsContainer.querySelectorAll('.filter-tag').forEach(tagElement => {
|
||||
tagElement.addEventListener('click', () => {
|
||||
const tag = tagElement.dataset.tag;
|
||||
this.toggleTag(tag);
|
||||
});
|
||||
});
|
||||
|
||||
// 清除标签筛选
|
||||
const clearTagsBtn = this.tagsContainer.querySelector('.clear-tags-btn');
|
||||
if (clearTagsBtn) {
|
||||
clearTagsBtn.addEventListener('click', () => {
|
||||
this.clearTagFilters();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toggleTag(tag) {
|
||||
if (this.selectedTags.has(tag)) {
|
||||
this.selectedTags.delete(tag);
|
||||
} else {
|
||||
this.selectedTags.add(tag);
|
||||
}
|
||||
|
||||
this.renderTags();
|
||||
this.updateActiveFiltersDisplay();
|
||||
this.handleFilter();
|
||||
}
|
||||
|
||||
clearTagFilters() {
|
||||
this.selectedTags.clear();
|
||||
this.renderTags();
|
||||
this.updateActiveFiltersDisplay();
|
||||
this.handleFilter();
|
||||
}
|
||||
|
||||
updateActiveFiltersDisplay() {
|
||||
if (this.selectedTags.size > 0) {
|
||||
this.activeFiltersCount.style.display = 'inline';
|
||||
this.filterCount.textContent = this.selectedTags.size;
|
||||
} else {
|
||||
this.activeFiltersCount.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
handleFilter() {
|
||||
// 同时应用搜索和标签筛选
|
||||
if (this.onTagFilter && typeof this.onTagFilter === 'function') {
|
||||
const results = this.onTagFilter(this.currentKeyword, Array.from(this.selectedTags));
|
||||
this.updateSearchStats(results);
|
||||
}
|
||||
}
|
||||
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.debounceTimer) {
|
||||
clearTimeout(this.debounceTimer);
|
||||
}
|
||||
|
||||
if (this.container && this.container.parentNode) {
|
||||
this.container.parentNode.removeChild(this.container);
|
||||
}
|
||||
|
||||
// 移除样式
|
||||
const style = document.head.querySelector('style[data-component="search-bar"]');
|
||||
if (style) {
|
||||
style.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 公开方法
|
||||
getSelectedTags() {
|
||||
return Array.from(this.selectedTags);
|
||||
}
|
||||
|
||||
hasTagsSelected() {
|
||||
return this.selectedTags.size > 0;
|
||||
}
|
||||
|
||||
selectTag(tag) {
|
||||
if (this.allTags.has(tag) && !this.selectedTags.has(tag)) {
|
||||
this.selectedTags.add(tag);
|
||||
this.renderTags();
|
||||
this.updateActiveFiltersDisplay();
|
||||
this.handleFilter();
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentKeyword() {
|
||||
return this.currentKeyword;
|
||||
}
|
||||
|
||||
// 获取组件元素
|
||||
getElement() {
|
||||
return this.container;
|
||||
} // 刷新标签筛选区域（从TagColorManager获取所有标签）
|
||||
refreshTags() {
|
||||
console.log('SearchBar: 开始刷新标签列表...');
|
||||
|
||||
// 从全局标签颜色管理器获取最新的标签列表
|
||||
const allTags = globalTagColorManager.getAllTags();
|
||||
console.log('SearchBar: 从TagColorManager获取到的标签:', allTags);
|
||||
|
||||
// 更新本地标签集合
|
||||
this.allTags = new Set(allTags);
|
||||
|
||||
// 清理已删除的标签选择状态
|
||||
const deletedTags = [];
|
||||
this.selectedTags.forEach(selectedTag => {
|
||||
if (!this.allTags.has(selectedTag)) {
|
||||
deletedTags.push(selectedTag);
|
||||
}
|
||||
});
|
||||
|
||||
// 移除已删除标签的选择状态
|
||||
deletedTags.forEach(tag => {
|
||||
console.log(`SearchBar: 移除已删除标签的选择状态: ${tag}`);
|
||||
this.selectedTags.delete(tag);
|
||||
});
|
||||
|
||||
// 重新渲染标签UI
|
||||
console.log('SearchBar: 重新渲染标签UI...');
|
||||
this.renderTags();
|
||||
|
||||
// 如果有选中状态变化，重新应用筛选
|
||||
if (deletedTags.length > 0) {
|
||||
console.log('SearchBar: 检测到标签删除，重新应用筛选...');
|
||||
this.updateActiveFiltersDisplay();
|
||||
this.handleFilter();
|
||||
}
|
||||
|
||||
console.log('SearchBar: 标签列表刷新完成，当前标签:', Array.from(this.allTags));
|
||||
}
|
||||
|
||||
// 新增：刷新所有标签的颜色
|
||||
refreshTagColors() {
|
||||
// 重新渲染所有标签的颜色
|
||||
this.tagsContainer.querySelectorAll('.filter-tag').forEach(tagElement => {
|
||||
const tagName = tagElement.dataset.tag;
|
||||
if (tagName) {
|
||||
const color = globalTagColorManager.getTagColor(tagName);
|
||||
const colorRGB = globalTagColorManager.getTagColorRGB(tagName);
|
||||
tagElement.style.setProperty('--tag-color', color);
|
||||
tagElement.style.setProperty('--tag-color-rgb', colorRGB);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
// 标签颜色管理器 - 完全基于后端JSON文件同步，移除localStorage逻辑
|
||||
|
||||
export class TagColorManager {
|
||||
constructor() {
|
||||
this.colorMap = new Map(); // 标签名 -> 颜色映射
|
||||
this.usedColors = new Set(); // 已使用的颜色
|
||||
this.loadFromBackend(); // 启动时从后端加载
|
||||
}
|
||||
|
||||
// 从后端API加载标签数据
|
||||
async loadFromBackend() {
|
||||
try {
|
||||
const response = await fetch('/dd_nodes/load_tags');
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success && result.tags) {
|
||||
// 更新颜色映射
|
||||
this.colorMap = new Map(Object.entries(result.tags));
|
||||
this.usedColors = new Set(Object.values(result.tags));
|
||||
|
||||
console.log(`从后端加载了 ${Object.keys(result.tags).length} 个标签颜色`);
|
||||
} else {
|
||||
console.log('后端没有标签数据，使用空映射');
|
||||
}
|
||||
} else {
|
||||
console.warn('从后端加载标签失败，使用空映射');
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('从后端加载标签失败，使用空映射:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 直接同步到后端，移除localStorage逻辑
|
||||
async saveToBackend() {
|
||||
try {
|
||||
const colorData = Object.fromEntries(this.colorMap);
|
||||
const response = await fetch('/dd_nodes/save_tags', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
tags: colorData
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
console.log('标签数据已同步到后端:', colorData);
|
||||
return true;
|
||||
} else {
|
||||
console.error('后端同步失败:', result.error);
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
console.error('后端同步请求失败:', response.status);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('同步标签到后端失败:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取标签颜色（只读取，不自动创建）
|
||||
getTagColor(tagName) {
|
||||
if (!tagName || typeof tagName !== 'string') {
|
||||
return '#666'; // 默认颜色
|
||||
}
|
||||
|
||||
const normalizedTag = tagName.trim();
|
||||
|
||||
// 如果标签存在，返回其颜色
|
||||
if (this.colorMap.has(normalizedTag)) {
|
||||
return this.colorMap.get(normalizedTag);
|
||||
}
|
||||
|
||||
// 如果标签不存在，返回默认颜色，但不自动创建标签
|
||||
return '#666'; // 默认颜色，用于预览
|
||||
}
|
||||
|
||||
// 获取或创建标签颜色（用于实际保存标签时）
|
||||
async getOrCreateTagColor(tagName) {
|
||||
if (!tagName || typeof tagName !== 'string') {
|
||||
return '#666'; // 默认颜色
|
||||
}
|
||||
|
||||
const normalizedTag = tagName.trim();
|
||||
|
||||
// 如果标签已存在，直接返回颜色
|
||||
if (this.colorMap.has(normalizedTag)) {
|
||||
return this.colorMap.get(normalizedTag);
|
||||
}
|
||||
|
||||
// 标签不存在时，创建新颜色
|
||||
const newColor = this.generateUniqueColor();
|
||||
this.colorMap.set(normalizedTag, newColor);
|
||||
this.usedColors.add(newColor);
|
||||
|
||||
console.log(`为新标签 "${normalizedTag}" 生成颜色: ${newColor}`);
|
||||
|
||||
return newColor;
|
||||
}
|
||||
|
||||
// 设置标签颜色（用于标签管理功能）
|
||||
setTagColor(tagName, color) {
|
||||
if (!tagName || typeof tagName !== 'string') return false;
|
||||
|
||||
const normalizedTag = tagName.trim();
|
||||
const oldColor = this.colorMap.get(normalizedTag);
|
||||
|
||||
console.log(`设置标签颜色: ${normalizedTag} -> ${color}`);
|
||||
|
||||
// 移除旧颜色
|
||||
if (oldColor) {
|
||||
this.usedColors.delete(oldColor);
|
||||
}
|
||||
|
||||
// 设置新颜色
|
||||
this.colorMap.set(normalizedTag, color);
|
||||
this.usedColors.add(color);
|
||||
|
||||
return true; // 不立即同步，由调用方统一处理
|
||||
}
|
||||
|
||||
// 获取标签的RGB值（用于CSS动画中的rgba()）
|
||||
getTagColorRGB(tagName) {
|
||||
const hslColor = this.getTagColor(tagName);
|
||||
return this.hslToRgb(hslColor);
|
||||
}
|
||||
|
||||
// 将HSL颜色转换为RGB值字符串（如："255, 100, 50"）
|
||||
hslToRgb(hslString) {
|
||||
// 解析HSL字符串，如 "hsl(120, 75%, 50%)"
|
||||
const match = hslString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
|
||||
if (!match) return '102, 102, 102'; // 默认灰色的RGB
|
||||
|
||||
const h = parseInt(match[1]) / 360;
|
||||
const s = parseInt(match[2]) / 100;
|
||||
const l = parseInt(match[3]) / 100;
|
||||
|
||||
const hue2rgb = (p, q, t) => {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
|
||||
let r, g, b;
|
||||
|
||||
if (s === 0) {
|
||||
r = g = b = l; // 无饱和度时为灰色
|
||||
} else {
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
}
|
||||
|
||||
return `${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}`;
|
||||
}
|
||||
|
||||
// 生成唯一的随机颜色
|
||||
generateUniqueColor() {
|
||||
let attempts = 0;
|
||||
let color;
|
||||
|
||||
do {
|
||||
color = this.generateRandomColor();
|
||||
attempts++;
|
||||
} while (this.usedColors.has(color) && attempts < 50);
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
// 生成较明亮的随机颜色
|
||||
generateRandomColor() {
|
||||
const hue = Math.floor(Math.random() * 360);
|
||||
const saturation = 65 + Math.floor(Math.random() * 25); // 65-90%
|
||||
const lightness = 45 + Math.floor(Math.random() * 15); // 45-60%
|
||||
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||
}
|
||||
|
||||
// 获取所有标签颜色映射
|
||||
getAllColors() {
|
||||
return new Map(this.colorMap);
|
||||
}
|
||||
|
||||
// 获取所有标签名称
|
||||
getAllTags() {
|
||||
const tags = Array.from(this.colorMap.keys()).sort();
|
||||
console.log('获取所有标签:', tags);
|
||||
return tags;
|
||||
}
|
||||
|
||||
// 删除标签
|
||||
deleteTag(tagName) {
|
||||
if (!tagName || typeof tagName !== 'string') return false;
|
||||
|
||||
const normalizedTag = tagName.trim();
|
||||
const color = this.colorMap.get(normalizedTag);
|
||||
|
||||
console.log(`尝试删除标签: ${normalizedTag}，当前颜色映射:`, Object.fromEntries(this.colorMap));
|
||||
|
||||
if (color) {
|
||||
this.colorMap.delete(normalizedTag);
|
||||
this.usedColors.delete(color);
|
||||
|
||||
console.log(`标签 ${normalizedTag} 已删除，剩余标签:`, Object.fromEntries(this.colorMap));
|
||||
return true;
|
||||
}
|
||||
|
||||
console.log(`标签 ${normalizedTag} 不存在，无法删除`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清除所有颜色映射
|
||||
async clear() {
|
||||
this.colorMap.clear();
|
||||
this.usedColors.clear();
|
||||
await this.saveToBackend();
|
||||
}
|
||||
|
||||
// 更新颜色映射（从现有提示词中收集标签）
|
||||
updateFromPrompts(prompts) {
|
||||
if (!Array.isArray(prompts)) return;
|
||||
|
||||
const allTags = new Set();
|
||||
|
||||
prompts.forEach(prompt => {
|
||||
if (prompt.tags && Array.isArray(prompt.tags)) {
|
||||
prompt.tags.forEach(tag => {
|
||||
if (tag && tag.trim()) {
|
||||
allTags.add(tag.trim());
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 只为新发现的标签生成颜色
|
||||
for (const tag of allTags) {
|
||||
if (!this.colorMap.has(tag)) {
|
||||
this.getOrCreateTagColor(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 清理未使用的标签
|
||||
cleanupUnusedTags(prompts) {
|
||||
if (!Array.isArray(prompts)) return;
|
||||
|
||||
const usedTags = new Set();
|
||||
|
||||
// 收集所有正在使用的标签
|
||||
prompts.forEach(prompt => {
|
||||
if (prompt.tags && Array.isArray(prompt.tags)) {
|
||||
prompt.tags.forEach(tag => {
|
||||
if (tag && tag.trim()) {
|
||||
usedTags.add(tag.trim());
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 删除不再使用的标签
|
||||
const tagsToDelete = [];
|
||||
for (const [tagName] of this.colorMap) {
|
||||
if (!usedTags.has(tagName)) {
|
||||
tagsToDelete.push(tagName);
|
||||
}
|
||||
}
|
||||
|
||||
tagsToDelete.forEach(tagName => {
|
||||
this.deleteTag(tagName);
|
||||
});
|
||||
|
||||
if (tagsToDelete.length > 0) {
|
||||
console.log(`清理了 ${tagsToDelete.length} 个未使用的标签:`, tagsToDelete);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建全局单例实例
|
||||
export const globalTagColorManager = new TagColorManager();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,80 @@
|
||||
// 组件统一导出文件
|
||||
// 方便在其他地方统一导入所有UI组件
|
||||
|
||||
export { MainModal } from './MainModal.js';
|
||||
export { SearchBar } from './SearchBar.js';
|
||||
export { PromptList } from './PromptList.js';
|
||||
export { PromptForm } from './PromptForm.js';
|
||||
export { DialogComponents } from './DialogComponents.js';
|
||||
export { TagColorManager, globalTagColorManager } from './TagColorManager.js';
|
||||
export { TagManager } from './TagManager.js';
|
||||
|
||||
// 组件版本信息
|
||||
export const COMPONENT_VERSION = '1.0.0';
|
||||
|
||||
// 组件元数据
|
||||
export const COMPONENT_METADATA = {
|
||||
MainModal: {
|
||||
version: '1.0.0',
|
||||
description: '主模态框组件，负责整体模态框结构和基础样式',
|
||||
dependencies: []
|
||||
},
|
||||
SearchBar: {
|
||||
version: '1.0.0',
|
||||
description: '搜索栏组件，负责提示词搜索功能',
|
||||
dependencies: []
|
||||
},
|
||||
PromptList: {
|
||||
version: '1.0.0',
|
||||
description: '列表组件，负责提示词列表的显示和交互',
|
||||
dependencies: []
|
||||
},
|
||||
PromptForm: {
|
||||
version: '1.0.0',
|
||||
description: '表单组件，负责添加/编辑提示词的表单',
|
||||
dependencies: []
|
||||
},
|
||||
DialogComponents: {
|
||||
version: '1.0.0',
|
||||
description: '对话框组件，负责各种确认对话框和选择器',
|
||||
dependencies: []
|
||||
}
|
||||
};
|
||||
|
||||
// 验证所有组件是否正确加载
|
||||
export function validateComponents() {
|
||||
const components = [
|
||||
'MainModal',
|
||||
'SearchBar',
|
||||
'PromptList',
|
||||
'PromptForm',
|
||||
'DialogComponents'
|
||||
];
|
||||
|
||||
const results = {};
|
||||
let allValid = true;
|
||||
|
||||
components.forEach(componentName => {
|
||||
try {
|
||||
const Component = eval(componentName);
|
||||
results[componentName] = {
|
||||
loaded: true,
|
||||
constructor: typeof Component === 'function',
|
||||
metadata: COMPONENT_METADATA[componentName]
|
||||
};
|
||||
} catch (error) {
|
||||
results[componentName] = {
|
||||
loaded: false,
|
||||
error: error.message,
|
||||
metadata: COMPONENT_METADATA[componentName]
|
||||
};
|
||||
allValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
allValid,
|
||||
components: results,
|
||||
version: COMPONENT_VERSION
|
||||
};
|
||||
}
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
[project]
|
||||
name = "comfyui-dd-nodes"
|
||||
description = "Advanced utility nodes for ComfyUI with intelligent layout and animation features."
|
||||
version = "2.5.0"
|
||||
version = "2.6.0"
|
||||
license = {file = "LICENSE"}
|
||||
dependencies = ["git+https://github.com/Dontdrunk/ComfyUI-DD-Nodes.git"]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user