${groupsHTML}
`;
}
bindPanelEvents() {
// 关闭按钮
const closeBtn = this.panel.querySelector('.summoner-close-btn');
closeBtn.addEventListener('click', () => this.hidePanel());
// 用户提示条关闭按钮
const hintCloseBtn = this.panel.querySelector('.summoner-user-hint-close');
if (hintCloseBtn) {
hintCloseBtn.addEventListener('click', () => {
this.pendingUsername = null;
this.hidePanel();
setTimeout(() => this.showPanel(), 100);
});
}
// 快速添加用户按钮
this.panel.querySelectorAll('.summoner-quick-add-user').forEach(btn => {
btn.addEventListener('click', (e) => {
const username = e.target.dataset.username || e.target.closest('.summoner-quick-add-user').dataset.username;
const groupDiv = e.target.closest('.summoner-group');
const groupName = groupDiv.dataset.group;
// 添加成员
this.config.groups[groupName].members.push({
username: username,
displayName: username
});
// 清除待添加用户
this.pendingUsername = null;
// 保存配置
this.onConfigChange(this.config);
// 刷新面板
this.hidePanel();
setTimeout(() => {
this.showPanel();
this.showToast(`已将 @${username} 添加到"${groupName}"`, 'success');
}, 100);
});
});
// 分组开关
const toggles = this.panel.querySelectorAll('.summoner-group-toggle');
toggles.forEach(toggle => {
toggle.addEventListener('click', (e) => {
const groupName = e.target.dataset.group;
e.target.classList.toggle('active');
this.config.groups[groupName].enabled = e.target.classList.contains('active');
});
});
// 编辑分组名
this.panel.querySelectorAll('.edit-group').forEach(btn => {
btn.addEventListener('click', (e) => {
const groupDiv = e.target.closest('.summoner-group');
const nameSpan = groupDiv.querySelector('.summoner-group-name');
const nameInput = groupDiv.querySelector('.summoner-group-name-input');
if (nameSpan.classList.contains('editing')) {
// 保存编辑
const oldName = nameSpan.textContent;
const newName = nameInput.value.trim();
if (newName && newName !== oldName) {
if (this.config.groups[newName]) {
this.showToast('分组名已存在', 'error');
return;
}
this.config.groups[newName] = this.config.groups[oldName];
delete this.config.groups[oldName];
nameSpan.textContent = newName;
groupDiv.dataset.group = newName;
}
nameSpan.classList.remove('editing');
nameInput.classList.remove('editing');
} else {
// 进入编辑
nameSpan.classList.add('editing');
nameInput.classList.add('editing');
nameInput.focus();
nameInput.select();
}
});
});
// 删除分组
this.panel.querySelectorAll('.delete-group').forEach(btn => {
btn.addEventListener('click', (e) => {
const groupDiv = e.target.closest('.summoner-group');
const groupName = groupDiv.dataset.group;
if (confirm(`确定要删除分组"${groupName}"吗？`)) {
delete this.config.groups[groupName];
groupDiv.remove();
this.showToast('分组已删除', 'success');
}
});
});
// 添加成员按钮
this.panel.querySelectorAll('.summoner-add-member').forEach(btn => {
btn.addEventListener('click', (e) => {
const groupDiv = e.target.closest('.summoner-group');
const inputArea = groupDiv.querySelector('.summoner-member-input-area');
inputArea.classList.add('active');
inputArea.querySelector('.member-username-input').focus();
});
});
// 确认添加成员
this.panel.querySelectorAll('.summoner-member-input-area .confirm-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const groupDiv = e.target.closest('.summoner-group');
const groupName = groupDiv.dataset.group;
const inputArea = groupDiv.querySelector('.summoner-member-input-area');
const input = inputArea.querySelector('.member-username-input');
const username = input.value.trim();
if (!username) {
this.showToast('请输入用户名', 'error');
return;
}
// 检查是否已存在
if (this.config.groups[groupName].members.some(m => m.username === username)) {
this.showToast('该用户已在分组中', 'error');
return;
}
this.config.groups[groupName].members.push({
username: username,
displayName: username
});
input.value = '';
inputArea.classList.remove('active');
// 刷新面板
this.hidePanel();
setTimeout(() => this.showPanel(), 100);
});
});
// 取消添加成员
this.panel.querySelectorAll('.summoner-member-input-area .cancel-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const inputArea = e.target.closest('.summoner-member-input-area');
inputArea.classList.remove('active');
inputArea.querySelector('.member-username-input').value = '';
});
});
// 批量导入按钮
this.panel.querySelectorAll('.summoner-batch-import').forEach(btn => {
btn.addEventListener('click', (e) => {
const groupDiv = e.target.closest('.summoner-group');
const batchArea = groupDiv.querySelector('.summoner-batch-input-area');
batchArea.classList.add('active');
batchArea.querySelector('.batch-textarea').focus();
});
});
// 确认批量导入
this.panel.querySelectorAll('.summoner-batch-input-area .import-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const groupDiv = e.target.closest('.summoner-group');
const groupName = groupDiv.dataset.group;
const batchArea = groupDiv.querySelector('.summoner-batch-input-area');
const textarea = batchArea.querySelector('.batch-textarea');
const text = textarea.value;
if (!text.trim()) {
this.showToast('请输入用户名或链接', 'error');
return;
}
// 解析用户名列表
const usernames = this.parseBatchUsernames(text);
if (usernames.length === 0) {
this.showToast('未能识别到有效的用户名', 'error');
return;
}
// 添加用户到分组（去重）
let addedCount = 0;
let skippedCount = 0;
usernames.forEach(username => {
// 检查是否已存在
if (this.config.groups[groupName].members.some(m => m.username === username)) {
skippedCount++;
} else {
this.config.groups[groupName].members.push({
username: username,
displayName: username
});
addedCount++;
}
});
textarea.value = '';
batchArea.classList.remove('active');
// 保存并刷新
this.hidePanel();
setTimeout(() => {
this.showPanel();
const message = `成功导入 ${addedCount} 个用户` +
(skippedCount > 0 ? `，跳过 ${skippedCount} 个重复` : '');
this.showToast(message, 'success');
}, 100);
});
});
// 取消批量导入
this.panel.querySelectorAll('.summoner-batch-input-area .cancel-batch-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const batchArea = e.target.closest('.summoner-batch-input-area');
batchArea.classList.remove('active');
batchArea.querySelector('.batch-textarea').value = '';
});
});
// 移除成员
this.panel.querySelectorAll('.summoner-member-remove').forEach(btn => {
btn.addEventListener('click', (e) => {
const memberSpan = e.target.closest('.summoner-member');
const username = memberSpan.dataset.username;
const groupDiv = memberSpan.closest('.summoner-group');
const groupName = groupDiv.dataset.group;
this.config.groups[groupName].members =
this.config.groups[groupName].members.filter(m => m.username !== username);
memberSpan.remove();
this.showToast('成员已移除', 'success');
});
});
// 添加新分组
const addGroupBtn = this.panel.querySelector('.summoner-add-group');
addGroupBtn.addEventListener('click', () => {
const defaultName = this.pendingUsername ? `${this.pendingUsername}的分组` : '';
const groupName = prompt('请输入新分组名称：', defaultName);
if (!groupName || !groupName.trim()) return;
const trimmedName = groupName.trim();
if (this.config.groups[trimmedName]) {
this.showToast('分组名已存在', 'error');
return;
}
// 创建新分组
const members = this.pendingUsername ? [{
username: this.pendingUsername,
displayName: this.pendingUsername
}] : [];
this.config.groups[trimmedName] = {
id: `group-${Date.now()}`,
members: members,
enabled: true
};
// 如果添加了用户，清除待添加状态
const addedUser = this.pendingUsername;
if (this.pendingUsername) {
this.pendingUsername = null;
}
// 刷新面板
this.hidePanel();
setTimeout(() => {
this.showPanel();
if (addedUser) {
this.showToast(`已创建"${trimmedName}"并添加 @${addedUser}`, 'success');
}
}, 100);
});
// 保存按钮
const saveBtn = this.panel.querySelector('[data-action="save"]');
saveBtn.addEventListener('click', () => {
if (this.onConfigChange(this.config)) {
this.showToast('配置已保存', 'success');
this.hidePanel();
} else {
this.showToast('保存失败', 'error');
}
});
// 重置按钮
const resetBtn = this.panel.querySelector('[data-action="reset"]');
resetBtn.addEventListener('click', () => {
if (confirm('确定要重置所有配置吗？')) {
this.config = { ...DEFAULT_CONFIG };
this.hidePanel();
setTimeout(() => this.showPanel(), 100);
}
});
}
hidePanel() {
if (this.panel) {
this.panel.remove();
this.panel = null;
}
if (this.overlay) {
this.overlay.remove();
this.overlay = null;
}
// 注意：不在这里清除 pendingUsername，因为可能需要刷新面板
}
showSummonMenu() {
if (this.menu) {
this.hideSummonMenu();
return;
}
// 使用保存的编辑器，如果没有则尝试查找
if (!this.savedActiveEditor) {
this.savedActiveEditor = document.querySelector('textarea.d-editor-input:focus, .reply-area textarea:focus');
}
// 检查是否有编辑器
if (!this.savedActiveEditor) {
this.showToast('请先聚焦到编辑器', 'warning');
return;
}
this.menu = document.createElement('div');
this.menu.className = 'summoner-menu';
const enabledGroups = Object.entries(this.config.groups)
.filter(([_, group]) => group.enabled && group.members.length > 0);
if (enabledGroups.length === 0) {
this.menu.innerHTML = `
`;
} else {
const itemsHTML = enabledGroups.map(([name, group]) => `
`).join('');
this.menu.innerHTML = `
${itemsHTML}
`;
}
document.body.appendChild(this.menu);
// 绑定事件
this.menu.querySelectorAll('.summoner-menu-item:not(.disabled)').forEach(item => {
item.addEventListener('click', (e) => {
const groupName = e.currentTarget.dataset.group;
this.insertMentions(groupName);
this.hideSummonMenu();
});
});
// 点击外部关闭
setTimeout(() => {
document.addEventListener('click', this.handleClickOutsideMenu);
}, 100);
}
handleClickOutsideMenu = (e) => {
if (this.menu && !this.menu.contains(e.target) && !this.fab.contains(e.target)) {
this.hideSummonMenu();
}
}
hideSummonMenu() {
if (this.menu) {
this.menu.remove();
this.menu = null;
document.removeEventListener('click', this.handleClickOutsideMenu);
}
}
insertMentions(groupName) {
const generator = new MentionGenerator(this.config);
const mentions = generator.generate(groupName);
if (!mentions) {
this.showToast('分组不可用', 'error');
return;
}
// 使用保存的编辑器
const activeEditor = this.savedActiveEditor || document.querySelector('textarea.d-editor-input, .reply-area textarea');
if (!activeEditor) {
this.showToast('未找到编辑器', 'error');
return;
}
const start = activeEditor.selectionStart;
const end = activeEditor.selectionEnd;
const text = activeEditor.value;
activeEditor.value = text.substring(0, start) + mentions + ' ' + text.substring(end);
activeEditor.selectionStart = activeEditor.selectionEnd = start + mentions.length + 1;
activeEditor.dispatchEvent(new Event('input', { bubbles: true }));
activeEditor.focus(); // 重新聚焦编辑器
const group = this.config.groups[groupName];
this.showToast(`已召唤 ${group.members.length} 人`, 'success');
// 清除保存的编辑器引用
this.savedActiveEditor = null;
}
showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `summoner-toast ${type}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'summoner-toast-in 0.3s reverse';
setTimeout(() => toast.remove(), 300);
}, 2000);
}
// 在用户卡片上添加按钮（简化版，避免焦点循环）
injectUserCardButton(cardElement) {
// 避免重复注入
if (cardElement.querySelector('.summoner-usercard-btn')) {
return;
}
// 获取用户名
const usernameLink = cardElement.querySelector('.user-profile-link') ||
cardElement.querySelector('a[href^="/u/"]');
if (!usernameLink) return;
const username = usernameLink.textContent.trim();
if (!username) return;
// 找到控制按钮区域
const controls = cardElement.querySelector('.usercard-controls');
if (!controls) return;
// 创建按钮
const li = document.createElement('li');
li.className = 'summoner-usercard-item';
const btn = document.createElement('button');
btn.className = 'summoner-usercard-btn btn btn-icon-text btn-default';
btn.innerHTML = '