为CC98用户添加可持久化的多标签功能
// ==UserScript==
// @name CC98-TAGs
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 为CC98用户添加可持久化的多标签功能
// @license MIT
// @author 萌萌人
// @match http://www-cc98-org-s.webvpn.zju.edu.cn:8001/*
// @match https://www.cc98.org/*
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_listValues
// @grant GM_deleteValue
// ==/UserScript==
(function () {
'use strict';
// 自定义样式
const css = `
.user-tags-container {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
width: 100%; /* 让容器宽度跟随父容器 */
}
.user-tag {
display: inline-flex;
align-items: center;
padding: 2px 6px; /* 上下左右的内边距 */
border-radius: 4px;
font-size: 0.75rem;
color: white;
cursor: pointer;
position: relative;
max-width: 90%; /* 限制最大宽度 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: normal; /* 允许换行 */
flex-shrink: 0; /* 允许缩小 */
box-sizing: border-box; /* 确保 padding 不影响宽度计算 */
word-wrap: break-word; /* 允许长单词换行 */
overflow-wrap: break-word; /* 确保长单词和字符串在必要时换行 */
}
.user-tag:hover::after {
content: '×';
margin-left: 4px;
font-size: 0.9em;
}
.add-tag-btn {
background: #ddd;
color: #666;
border: 1px dashed #999;
cursor: pointer;
max-width: 100%; /* 限制最大宽度 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: nowrap; /* 不换行 */
}
.add-tag-btn:hover {
background: #eee;
}
.import-export-menu {
position: relative; /* 使用绝对定位 */
right: 0; /* 对齐到页面最右边 */
top: 55%; /* 垂直居中 */
transform: translateY(-50%); /* 通过 transform 微调垂直居中 */
display: inline-block;
margin-left: 10px;
padding-bottom: 5px; /* 增加底部 padding，扩展悬停区域 */
}
.import-export-menu button {
background: none;
border: none;
color: white; /* 文字颜色为白色 */
cursor: pointer;
font-size: 16px;
display: flex; /* 使用 flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100%; /* 确保按钮高度与父容器一致 */
}
.import-export-menu button:hover {
color: #ccc; /* 鼠标悬停时文字颜色变为浅灰色 */
}
.import-export-dropdown {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%; /* 宽度与按钮对齐 */
min-width: 80pt;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: 0; /* 下拉菜单也对齐到最右边 */
top: 100%; /* 下拉菜单在按钮下方 */
margin-top: 0;
text-align: center; /* 下拉菜单文字居中 */
}
.import-export-dropdown a {
color: black;
padding: 8px 16px; /* 调整下拉菜单项的内边距 */
text-decoration: none;
display: block;
text-align: center; /* 下拉菜单文字居中 */
}
.import-export-dropdown a:hover {
background-color: #f1f1f1;
}
.import-export-menu:hover .import-export-dropdown {
display: block;
}
`;
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
// 获取UID
const getUidFromLink = (link) => {
const match = link.href.match(/\/user\/id\/(\d+)/);
return match ? match[1] : null;
};
// 固定颜色数组
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D5', '#54C6EB', '#6BFF6B', '#FFD166', '#A06CD5'];
// 根据UID获取颜色
const getColorByUid = (uid, index) => {
const uidNumber = parseInt(uid, 10); // 将UID转换为数字
const colorIndex = (uidNumber + index) % colors.length; // 对颜色数组长度取模
return colors[colorIndex];
};
// 创建标签
const createTag = (uid, tag, index) => {
const tagElem = document.createElement('div');
tagElem.className = 'user-tag';
tagElem.textContent = tag;
tagElem.style.backgroundColor = getColorByUid(uid, index); // 使用UID确定颜色
tagElem.onclick = () => {
if (confirm(`确定要删除标签 "${tag}" 吗？`)) {
const tags = GM_getValue(`tags_${uid}`, []);
tags.splice(index, 1);
GM_setValue(`tags_${uid}`, tags);
updateTags(uid);
}
};
return tagElem;
};
// 创建添加标签按钮
const createAddButton = (uid) => {
const btn = document.createElement('div');
btn.className = 'user-tag add-tag-btn';
btn.textContent = '+';
btn.style.backgroundColor = '#FFFFFF'; // 使用UID确定颜色
btn.onclick = () => {
const tag = prompt('请输入新标签:');
if (tag && tag.trim()) {
const tags = GM_getValue(`tags_${uid}`, []);
tags.push(tag.trim());
GM_setValue(`tags_${uid}`, tags);
updateTags(uid);
}
};
return btn;
};
// 更新标签显示
const updateTags = (uid) => {
const containers = document.querySelectorAll(`.user-tags-container[data-uid="${uid}"]`);
containers.forEach(container => {
container.innerHTML = '';
const tags = GM_getValue(`tags_${uid}`, []);
tags.forEach((tag, index) => {
container.appendChild(createTag(uid, tag, index));
});
container.appendChild(createAddButton(uid));
// 动态调整标签宽度
const userMessage = container.closest('.userMessage');
if (userMessage) {
const userMessageWidth = userMessage.offsetWidth * 0.75;
container.style.width = `${userMessageWidth}px`; // 设置标签容器宽度
}
});
};
// 初始化标签容器
const initTagsContainer = (uid, postId) => {
const container = document.createElement('div');
container.className = 'user-tags-container';
container.setAttribute('data-uid', uid);
container.setAttribute('data-post-id', postId); // 添加帖子ID作为唯一标识
return container;
};
// 检查是否需要刷新标签
const shouldUpdateTags = () => {
const currentUrl = window.location.href;
// 检查URL是否以 /topic/数字 结尾
return /\/topic\/\d+(\/.+)?$/.test(currentUrl);
};
// 主更新函数
const updateAllTags = () => {
if (!shouldUpdateTags()) return; // 如果不需要刷新标签，则直接返回
document.querySelectorAll('.userMessage-left').forEach(container => {
const link = container.querySelector('a[href*="/user/id/"]');
if (!link) return;
const uid = getUidFromLink(link);
const postId = container.closest('.reply').id; // 获取当前楼层的ID
const existingContainer = container.querySelector(`.user-tags-container[data-post-id="${postId}"]`);
if (existingContainer) existingContainer.remove();
const tagsContainer = initTagsContainer(uid, postId);
const infoContainer = container.querySelector('.column[style*="padding-left: 1.5rem"]');
if (infoContainer) {
infoContainer.appendChild(tagsContainer);
updateTags(uid);
}
});
};
// 导出标签数据（明文或Base64编码）
const exportTags = (encode = false, copyToClipboard = false) => {
const allTags = {};
const allKeys = GM_listValues();
allKeys.forEach(key => {
if (key.startsWith('tags_')) {
const uid = key.replace('tags_', '');
allTags[uid] = GM_getValue(key, []);
}
});
const jsonData = JSON.stringify(allTags, null, 2);
const outputData = encode ? btoa(unescape(encodeURIComponent(jsonData))) : jsonData;
if (copyToClipboard) {
// 创建一个文本框用于显示导出的数据
const textarea = document.createElement('textarea');
textarea.style.position = 'fixed';
textarea.style.top = '0';
textarea.style.left = '0';
textarea.style.width = '100%';
textarea.style.height = '200px';
textarea.style.zIndex = '10000';
textarea.style.backgroundColor = '#fff';
textarea.style.border = '1px solid #ccc';
textarea.style.padding = '10px';
textarea.style.boxSizing = 'border-box';
textarea.style.fontFamily = 'monospace';
textarea.style.fontSize = '14px';
textarea.value = outputData;
// 添加一个关闭按钮
const closeButton = document.createElement('button');
closeButton.textContent = '关闭';
closeButton.style.position = 'fixed';
closeButton.style.top = '210px';
closeButton.style.left = '50%';
closeButton.style.zIndex = '10001';
closeButton.style.backgroundColor = '#f44336';
closeButton.style.color = '#fff';
closeButton.style.border = 'none';
closeButton.style.padding = '5px 10px';
closeButton.style.cursor = 'pointer';
closeButton.onclick = () => {
document.body.removeChild(textarea);
document.body.removeChild(closeButton);
};
// 将文本框和按钮添加到页面
document.body.appendChild(textarea);
document.body.appendChild(closeButton);
// 自动选中文本框内容
textarea.select();
} else {
const blob = new Blob([outputData], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = encode ? 'cc98_tags_export_base64.txt' : 'cc98_tags_export.json';
a.click();
URL.revokeObjectURL(url);
}
};
// 导入标签数据（明文或Base64编码）
const importTags = (encoded = false, useTextInput = false) => {
if (useTextInput) {
// 创建一个大文本框
const textarea = document.createElement('textarea');
textarea.style.position = 'fixed';
textarea.style.top = '0';
textarea.style.left = '0';
textarea.style.width = '100%';
textarea.style.height = '200px';
textarea.style.zIndex = '10000';
textarea.style.backgroundColor = '#fff';
textarea.style.border = '1px solid #ccc';
textarea.style.padding = '10px';
textarea.style.boxSizing = 'border-box';
textarea.style.fontFamily = 'monospace';
textarea.style.fontSize = '14px';
textarea.placeholder = '请在此粘贴要导入的标签数据...';
// 创建导入按钮
const importButton = document.createElement('button');
importButton.textContent = '导入';
importButton.style.position = 'fixed';
importButton.style.top = '210px';
importButton.style.left = '50%';
importButton.style.transform = 'translateX(-100%)'; // 向左偏移 50% 的宽度
importButton.style.zIndex = '10001';
importButton.style.backgroundColor = '#4CAF50';
importButton.style.color = '#fff';
importButton.style.border = 'none';
importButton.style.padding = '5px 10px';
importButton.style.cursor = 'pointer';
importButton.onclick = () => {
const jsonData = textarea.value.trim();
if (!jsonData) {
alert('请输入要导入的数据！');
return;
}
try {
let parsedData = jsonData;
if (encoded) {
parsedData = decodeURIComponent(escape(atob(jsonData)));
}
const tagsData = JSON.parse(parsedData);
for (const uid in tagsData) {
if (tagsData.hasOwnProperty(uid)) {
GM_setValue(`tags_${uid}`, tagsData[uid]);
}
}
alert('标签导入成功！');
updateAllTags();
document.body.removeChild(textarea);
document.body.removeChild(importButton);
document.body.removeChild(closeButton);
} catch (error) {
alert('导入失败：数据格式不正确！');
}
};
// 创建关闭按钮
const closeButton = document.createElement('button');
closeButton.textContent = '关闭';
closeButton.style.position = 'fixed';
closeButton.style.top = '210px';
closeButton.style.left = '50%';
closeButton.style.zIndex = '10001';
closeButton.style.backgroundColor = '#f44336';
closeButton.style.color = '#fff';
closeButton.style.border = 'none';
closeButton.style.padding = '5px 10px';
closeButton.style.cursor = 'pointer';
closeButton.onclick = () => {
document.body.removeChild(textarea);
document.body.removeChild(importButton);
document.body.removeChild(closeButton);
};
// 将文本框和按钮添加到页面
document.body.appendChild(textarea);
document.body.appendChild(importButton);
document.body.appendChild(closeButton);
// 自动聚焦文本框
textarea.focus();
} else {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.txt,.json';
input.onchange = (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
let jsonData = e.target.result;
if (encoded) {
jsonData = decodeURIComponent(escape(atob(jsonData)));
}
const tagsData = JSON.parse(jsonData);
for (const uid in tagsData) {
if (tagsData.hasOwnProperty(uid)) {
GM_setValue(`tags_${uid}`, tagsData[uid]);
}
}
alert('标签导入成功！');
updateAllTags();
} catch (error) {
alert('导入失败：文件格式不正确！');
}
};
reader.readAsText(file);
};
input.click();
}
};
const clearTags = () => {
if (confirm("确定要清除所有用户的标签吗？")) {
GM_listValues().forEach(key => {
if (key.startsWith('tags_')) GM_deleteValue(key);
});
updateAllTags();
}
}
// 创建导入导出菜单
const createImportExportMenu = () => {
const menuContainer = document.createElement('div');
menuContainer.className = 'import-export-menu';
const menuButton = document.createElement('button');
menuButton.textContent = '导入/导出';
menuContainer.appendChild(menuButton);
const dropdown = document.createElement('div');
dropdown.className = 'import-export-dropdown';
const exportBase64 = document.createElement('a');
exportBase64.textContent = '导出标签';
exportBase64.onclick = () => exportTags(true, true);
dropdown.appendChild(exportBase64);
const importBase64 = document.createElement('a');
importBase64.textContent = '导入标签';
importBase64.onclick = () => importTags(true, true);
dropdown.appendChild(importBase64);
const clearAllTags = document.createElement('a');
clearAllTags.textContent = '清除所有';
clearAllTags.onclick = () => clearTags();
dropdown.appendChild(clearAllTags);
menuContainer.appendChild(dropdown);
// 将菜单插入到页面左上方
const topBar = document.querySelector('.topBar');
if (topBar) {
topBar.appendChild(menuContainer);
}
};
// 初始化
const init = () => {
updateAllTags();
createImportExportMenu();
setInterval(updateAllTags, 1000); // 每1000ms更新一次tag
};
// 延迟初始化，确保页面加载完成
setTimeout(init, 1000);
// Tampermonkey菜单命令
GM_registerMenuCommand("清除所有用户标签", () => {
if (confirm("确定要清除所有用户的标签吗？")) {
GM_listValues().forEach(key => {
if (key.startsWith('tags_')) GM_deleteValue(key);
});
updateAllTags();
}
});
GM_registerMenuCommand("导出标签（json）", () => exportTags(false));
GM_registerMenuCommand("导入标签（json）", () => importTags(false));
})();