更新了很多东西
This commit is contained in:
171696257
@@ -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不增加总宽度
|
||||
|
||||
// 添加拖动区域 - 改为在面板边缘创建多个拖动区域
|
||||
|
||||
Reference in New Issue
Block a user