KJL后台-编缉器属性栏添加更新商品名称
// ==UserScript==
// @name KJL后台-编缉器属性栏添加更新商品名称
// @namespace Violentmonkey Scripts
// @match https://www.kujiale.com/vc/modeleditor/new*
// @grant none
// @version 1.0
// @author hejie13250
// @description 2024/12/01 17:20:43
// ==/UserScript==
(function() {
'use strict';
// 添加样式到文档
var style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(`
/* 可视化按钮样式 */
.auto-update-button {
width: 40px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
border: none;
outline: none;
margin-left: 5px;
}
.auto-update-button::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
background-color: white;
border-radius: 50%;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
.auto-update-button.active {
background-color: #4caf50;
}
.auto-update-button.active::before {
transform: translateX(20px);
}
/* 文本标签样式 */
.mode-label {
font-size: 16px;
margin-left: 10px;
margin-right: 5px;
cursor: pointer; /* 手动模式时显示手形光标 */
color: #007bff;
transition: color 0.3s;
}
.mode-label:hover {
color: #fd00fd;
}
/* 按钮容器样式 */
.button-container {
display: flex;
margin-left: 10px;
align-items: center; /* 垂直居中对齐 */
justify-content: flex-start; /* 水平左对齐 */
height: 30px; /* 固定高度 */
gap: 5px; /* 按钮之间的间距 */
}
`));
// 设置默认更新方式
let autoUpdate = false;
// 设置检测间隔时间（毫秒）
const checkInterval = 100;
// 添加自动/手动切换按钮和文本标签
function addButtons() {
const sidebarHeader = document.querySelector('.sidebar-container .sidebar-header');
if (sidebarHeader && !document.querySelector('.button-container')) {
// 创建按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
// 创建文本标签
const modeLabel = document.createElement('span');
modeLabel.classList.add('mode-label');
modeLabel.textContent = autoUpdate ? '自动更新名称' : '手动更新名称';
// 根据模式设置文本标签的样式和点击事件
if (!autoUpdate) {
modeLabel.classList.add('manual'); // 手动模式时添加样式
modeLabel.addEventListener('click', updateName); // 绑定点击事件
}
// 创建自动/手动切换按钮
const autoUpdateButton = document.createElement('button');
autoUpdateButton.classList.add('auto-update-button');
autoUpdateButton.title = autoUpdate ? '自动更新已开启' : '自动更新已关闭'; // 鼠标悬停提示
// 根据 autoUpdate 状态设置初始样式
if (autoUpdate) {
autoUpdateButton.classList.add('active');
}
// 为按钮添加点击事件
autoUpdateButton.addEventListener('click', function() {
autoUpdate = !autoUpdate;
autoUpdateButton.classList.toggle('active');
autoUpdateButton.title = autoUpdate ? '自动更新已开启' : '自动更新已关闭'; // 更新鼠标悬停提示
modeLabel.textContent = autoUpdate ? '自动更新名称' : '手动更新名称'; // 更新文本标签
// 切换文本标签的样式和点击事件
if (autoUpdate) {
modeLabel.classList.remove('manual');
modeLabel.removeEventListener('click', updateName); // 移除点击事件
} else {
modeLabel.classList.add('manual');
modeLabel.addEventListener('click', updateName); // 绑定点击事件
}
});
// 创建“查打详情”按钮
const modelDetail = document.createElement('span');
modelDetail.classList.add('mode-label');
modelDetail.textContent = '查看详情';
modelDetail.addEventListener('click', function() {
const productNameDiv = document.querySelector('button.tui-btn--primary:nth-child(1)');
if (productNameDiv) {
productNameDiv.click();
}
});
// 创建“打开模型”按钮
const openModel = document.createElement('span');
openModel.classList.add('mode-label');
openModel.textContent = '打开模型';
openModel.addEventListener('click', function() {
const openModelIcon = document.querySelector('.option-button > button:nth-child(2)');
if (openModelIcon) {
openModelIcon.click();
}
});
// 将文本标签和按钮添加到容器中
buttonContainer.appendChild(autoUpdateButton);
buttonContainer.appendChild(modeLabel);
buttonContainer.appendChild(modelDetail);
buttonContainer.appendChild(openModel);
// 将按钮容器插入到.sidebar-header的前面
sidebarHeader.parentNode.insertBefore(buttonContainer, sidebarHeader);
}
}
// 手动更新名称
function updateName() {
const nameLinkDiv = document.querySelector('.tui-text-overflow-multiple-line');
const nameContent = document.querySelector('.name-editor p.name-content');
const changeButton = document.querySelector('.name-change-button');
if (nameLinkDiv && nameContent && changeButton) {
const nameLinkText = nameLinkDiv.textContent.trim();
const nameContentText = nameContent.textContent.trim();
if (nameLinkText !== nameContentText) {
changeButton.click();
// 等待.name-editor > input出现
setTimeout(() => {
const input = document.querySelector('.name-editor > input');
if (input) {
input.value = nameLinkText;
// 使输入框失去焦点
input.blur();
}
}, 100); // 延迟100毫秒确保输入框已经加载
}
}
}
// 自动更新名称
function autoCheckAndUpdateName() {
const nameLinkDiv = document.querySelector('.tui-text-overflow-multiple-line');
const nameContent = document.querySelector('.name-editor p.name-content');
const changeButton = document.querySelector('.name-change-button');
// 确保所有元素都已加载
if (nameLinkDiv && nameContent && changeButton && autoUpdate == true) {
// 获取两个元素的文本内容
const nameLinkText = nameLinkDiv.textContent.trim();
const nameContentText = nameContent.textContent.trim();
// 比较文本内容
if (nameLinkText !== nameContentText) {
// 文本不同，点击.name-change-button
changeButton.click();
// 等待.name-editor > input出现
setTimeout(() => {
const input = document.querySelector('.name-editor > input');
if (input) {
// 更新.name-editor > input内的文本
input.value = nameLinkText;
// 使输入框失去焦点
input.blur();
}
}, 100); // 延迟500毫秒确保输入框已经加载
}
}
}
// 检测并添加按钮
function checkAndAddButton() {
const nameEditor = document.querySelector('.name-editor');
if (nameEditor && nameEditor.offsetParent !== null) {
addButtons();
autoCheckAndUpdateName();
}
}
// 使用setInterval来周期性检测
setInterval(checkAndAddButton, checkInterval);
})();