就绪 - 点击"应用筛选"开始
`;
document.body.appendChild(floatingPanel);
bindPanelEvents();
return floatingPanel;
}
// 创建悬浮球
function createFloatingBall() {
floatingBall = document.createElement('div');
floatingBall.id = 'tfd-floating-ball';
floatingBall.innerHTML = 'TFD';
floatingBall.title = '打开筛选面板';
floatingBall.addEventListener('click', () => {
if (!floatingPanel) createFloatingPanel();
floatingPanel.classList.remove('hidden');
floatingBall.classList.add('hidden');
CONFIG.panelVisible = true;
saveConfig();
floatingPanel.style.top = '100px';
floatingPanel.style.right = '20px';
});
document.body.appendChild(floatingBall);
if (CONFIG.panelVisible && floatingPanel) {
floatingBall.classList.add('hidden');
}
}
// 绑定面板事件
function bindPanelEvents() {
if (!floatingPanel) return;
// 拖拽功能
const header = floatingPanel.querySelector('.panel-header');
header.addEventListener('mousedown', startDrag);
header.addEventListener('touchstart', startDragTouch, { passive: false });
function startDrag(e) {
e.preventDefault();
isDragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
const rect = floatingPanel.getBoundingClientRect();
panelStartX = rect.left;
panelStartY = rect.top;
document.addEventListener('mousemove', doDrag);
document.addEventListener('mouseup', stopDrag);
}
function startDragTouch(e) {
if (e.touches.length === 1) {
e.preventDefault();
isDragging = true;
dragStartX = e.touches[0].clientX;
dragStartY = e.touches[0].clientY;
const rect = floatingPanel.getBoundingClientRect();
panelStartX = rect.left;
panelStartY = rect.top;
document.addEventListener('touchmove', doDragTouch, { passive: false });
document.addEventListener('touchend', stopDragTouch);
}
}
function doDrag(e) {
if (!isDragging) return;
e.preventDefault();
const deltaX = e.clientX - dragStartX;
const deltaY = e.clientY - dragStartY;
let newX = panelStartX + deltaX;
let newY = panelStartY + deltaY;
const maxX = window.innerWidth - floatingPanel.offsetWidth;
const maxY = window.innerHeight - floatingPanel.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
floatingPanel.style.right = 'auto';
floatingPanel.style.left = `${newX}px`;
floatingPanel.style.top = `${newY}px`;
}
function doDragTouch(e) {
if (!isDragging || e.touches.length !== 1) return;
e.preventDefault();
const deltaX = e.touches[0].clientX - dragStartX;
const deltaY = e.touches[0].clientY - dragStartY;
let newX = panelStartX + deltaX;
let newY = panelStartY + deltaY;
const maxX = window.innerWidth - floatingPanel.offsetWidth;
const maxY = window.innerHeight - floatingPanel.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
floatingPanel.style.right = 'auto';
floatingPanel.style.left = `${newX}px`;
floatingPanel.style.top = `${newY}px`;
}
function stopDrag() {
isDragging = false;
document.removeEventListener('mousemove', doDrag);
document.removeEventListener('mouseup', stopDrag);
}
function stopDragTouch() {
isDragging = false;
document.removeEventListener('touchmove', doDragTouch);
document.removeEventListener('touchend', stopDragTouch);
}
// 关闭按钮
const closeBtn = floatingPanel.querySelector('#tfd-close-btn');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
CONFIG.panelVisible = false;
floatingPanel.classList.add('hidden');
floatingBall.classList.remove('hidden');
saveConfig();
});
}
// 应用筛选按钮
const applyBtn = floatingPanel.querySelector('#tfd-apply-filter');
if (applyBtn) {
applyBtn.addEventListener('click', () => {
updateConfigFromControls();
const visibleCount = applyFilters();
showMessage(`已筛选，显示 ${visibleCount} 个卡片`);
});
}
// 保存配置按钮
const saveBtn = floatingPanel.querySelector('#tfd-save-config');
if (saveBtn) {
saveBtn.addEventListener('click', () => {
updateConfigFromControls();
saveConfig();
showMessage('配置已保存');
});
}
// 重置筛选按钮
const resetBtn = floatingPanel.querySelector('#tfd-reset-filter');
if (resetBtn) {
resetBtn.addEventListener('click', () => {
const panelVisible = CONFIG.panelVisible;
CONFIG = { ...DEFAULT_CONFIG, panelVisible };
saveConfig();
loadConfigToControls();
applyFilters();
showMessage('筛选已重置');
});
}
// 添加卖家按钮
const addSellerBtn = floatingPanel.querySelector('#tfd-add-seller');
const newSellerInput = floatingPanel.querySelector('#tfd-new-seller');
if (addSellerBtn && newSellerInput) {
addSellerBtn.addEventListener('click', () => addTag('seller'));
newSellerInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTag('seller');
});
}
// 添加决意类型按钮
const addModuleBtn = floatingPanel.querySelector('#tfd-add-module');
const newModuleInput = floatingPanel.querySelector('#tfd-new-module');
if (addModuleBtn && newModuleInput) {
addModuleBtn.addEventListener('click', () => addTag('module'));
newModuleInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTag('module');
});
}
// 添加关键词按钮
const addKeywordBtn = floatingPanel.querySelector('#tfd-add-keyword');
const newKeywordInput = floatingPanel.querySelector('#tfd-new-keyword');
if (addKeywordBtn && newKeywordInput) {
addKeywordBtn.addEventListener('click', () => addTag('keyword'));
newKeywordInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTag('keyword');
});
}
// 添加数值筛选按钮
const addValueBtn = floatingPanel.querySelector('#tfd-add-value-filter');
const valueKeywordInput = floatingPanel.querySelector('#tfd-value-keyword');
if (addValueBtn) {
addValueBtn.addEventListener('click', () => addValueFilter());
// 为词条名称输入框也添加回车键支持
if (valueKeywordInput) {
valueKeywordInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addValueFilter();
});
}
}
// 关键词匹配模式选择
const keywordModeInputs = floatingPanel.querySelectorAll('input[name="keyword-mode"]');
keywordModeInputs.forEach(input => {
input.addEventListener('change', function() {
CONFIG.requireAllKeywords = (this.value === 'all');
});
});
// 标签点击事件
bindTagEvents();
}
// 绑定标签事件
function bindTagEvents() {
['#tfd-seller-tags', '#tfd-module-tags', '#tfd-keyword-tags'].forEach(selector => {
document.querySelectorAll(`${selector} .filter-tag`).forEach(tag => {
tag.addEventListener('click', function(e) {
if (e.target === this) this.classList.toggle('selected');
});
});
});
// 数值筛选标签
document.querySelectorAll('#tfd-value-tags .filter-tag').forEach(tag => {
tag.addEventListener('click', function(e) {
if (e.target === this) {
this.remove();
const keyword = this.dataset.keyword;
CONFIG.valueFilters = CONFIG.valueFilters.filter(f => f.keyword !== keyword);
}
});
});
}
// 添加标签
function addTag(type) {
const inputMap = {
'seller': '#tfd-new-seller',
'module': '#tfd-new-module',
'keyword': '#tfd-new-keyword'
};
const tagsMap = {
'seller': '#tfd-seller-tags',
'module': '#tfd-module-tags',
'keyword': '#tfd-keyword-tags'
};
const input = floatingPanel.querySelector(inputMap[type]);
const value = input.value.trim();
if (!value) return;
const tagsContainer = floatingPanel.querySelector(tagsMap[type]);
const existingTags = Array.from(tagsContainer.querySelectorAll('.filter-tag'));
if (existingTags.some(tag => tag.dataset[type] === value)) {
showMessage('已存在');
input.value = '';
return;
}
const tag = document.createElement('span');
tag.className = 'filter-tag selected';
tag.dataset[type] = value;
tag.textContent = value;
tag.addEventListener('click', function(e) {
if (e.target === this) this.classList.toggle('selected');
});
tagsContainer.appendChild(tag);
input.value = '';
showMessage('已添加');
}
// 添加数值筛选
function addValueFilter() {
const keywordInput = floatingPanel.querySelector('#tfd-value-keyword');
const minInput = floatingPanel.querySelector('#tfd-value-min');
const maxInput = floatingPanel.querySelector('#tfd-value-max');
const keyword = keywordInput.value.trim();
const min = minInput.value ? parseFloat(minInput.value) : undefined;
const max = maxInput.value ? parseFloat(maxInput.value) : undefined;
if (!keyword) {
showMessage('请输入词条名称');
return;
}
if (CONFIG.valueFilters.some(f => f.keyword === keyword)) {
showMessage('该词条已存在');
return;
}
const filter = { keyword, min, max };
CONFIG.valueFilters.push(filter);
const tagsContainer = floatingPanel.querySelector('#tfd-value-tags');
const tag = document.createElement('span');
tag.className = 'filter-tag selected';
tag.dataset.keyword = keyword;
tag.dataset.min = min || '';
tag.dataset.max = max || '';
tag.textContent = `${keyword}: ${min || '任何'}~${max || '任何'}`;
tag.addEventListener('click', function(e) {
if (e.target === this) {
this.remove();
CONFIG.valueFilters = CONFIG.valueFilters.filter(f => f.keyword !== keyword);
}
});
tagsContainer.appendChild(tag);
keywordInput.value = '';
minInput.value = '';
maxInput.value = '';
showMessage('数值筛选已添加');
}
// 从控件更新配置
function updateConfigFromControls() {
if (!floatingPanel) return;
const minPriceInput = floatingPanel.querySelector('#tfd-min-price');
const maxPriceInput = floatingPanel.querySelector('#tfd-max-price');
const sellerFilterCheckbox = floatingPanel.querySelector('#tfd-seller-filter');
const moduleFilterCheckbox = floatingPanel.querySelector('#tfd-module-filter');
const keywordFilterCheckbox = floatingPanel.querySelector('#tfd-keyword-filter');
const valueFilterCheckbox = floatingPanel.querySelector('#tfd-value-filter');
const keywordModeAll = floatingPanel.querySelector('input[name="keyword-mode"][value="all"]');
if (minPriceInput) CONFIG.minPrice = parseInt(minPriceInput.value) || 0;
if (maxPriceInput) CONFIG.maxPrice = parseInt(maxPriceInput.value) || 5000;
if (sellerFilterCheckbox) CONFIG.sellerFilterEnabled = sellerFilterCheckbox.checked;
if (moduleFilterCheckbox) CONFIG.moduleFilterEnabled = moduleFilterCheckbox.checked;
if (keywordFilterCheckbox) CONFIG.keywordFilterEnabled = keywordFilterCheckbox.checked;
if (valueFilterCheckbox) CONFIG.valueFilterEnabled = valueFilterCheckbox.checked;
if (keywordModeAll) CONFIG.requireAllKeywords = keywordModeAll.checked;
// 更新卖家列表
CONFIG.sellerNames = [];
const sellerTags = floatingPanel.querySelectorAll('#tfd-seller-tags .filter-tag.selected');
sellerTags.forEach(tag => CONFIG.sellerNames.push(tag.dataset.seller));
// 更新决意类型列表
CONFIG.selectedModuleNames = [];
const moduleTags = floatingPanel.querySelectorAll('#tfd-module-tags .filter-tag.selected');
moduleTags.forEach(tag => CONFIG.selectedModuleNames.push(tag.dataset.module));
// 更新关键词列表
CONFIG.selectedKeywords = [];
const keywordTags = floatingPanel.querySelectorAll('#tfd-keyword-tags .filter-tag.selected');
keywordTags.forEach(tag => CONFIG.selectedKeywords.push(tag.dataset.keyword));
}
// 加载配置到控件
function loadConfigToControls() {
if (!floatingPanel) return;
const minPriceInput = floatingPanel.querySelector('#tfd-min-price');
const maxPriceInput = floatingPanel.querySelector('#tfd-max-price');
const sellerFilterCheckbox = floatingPanel.querySelector('#tfd-seller-filter');
const moduleFilterCheckbox = floatingPanel.querySelector('#tfd-module-filter');
const keywordFilterCheckbox = floatingPanel.querySelector('#tfd-keyword-filter');
const valueFilterCheckbox = floatingPanel.querySelector('#tfd-value-filter');
const keywordModeAny = floatingPanel.querySelector('input[name="keyword-mode"][value="any"]');
const keywordModeAll = floatingPanel.querySelector('input[name="keyword-mode"][value="all"]');
if (minPriceInput) minPriceInput.value = CONFIG.minPrice;
if (maxPriceInput) maxPriceInput.value = CONFIG.maxPrice;
if (sellerFilterCheckbox) sellerFilterCheckbox.checked = CONFIG.sellerFilterEnabled;
if (moduleFilterCheckbox) moduleFilterCheckbox.checked = CONFIG.moduleFilterEnabled;
if (keywordFilterCheckbox) keywordFilterCheckbox.checked = CONFIG.keywordFilterEnabled;
if (valueFilterCheckbox) valueFilterCheckbox.checked = CONFIG.valueFilterEnabled;
if (keywordModeAny) keywordModeAny.checked = !CONFIG.requireAllKeywords;
if (keywordModeAll) keywordModeAll.checked = CONFIG.requireAllKeywords;
['seller', 'module', 'keyword'].forEach(type => {
const tags = floatingPanel.querySelectorAll(`#tfd-${type}-tags .filter-tag`);
const configArray = CONFIG[type === 'seller' ? 'sellerNames' : type === 'module' ? 'selectedModuleNames' : 'selectedKeywords'];
tags.forEach(tag => {
tag.classList.toggle('selected', configArray.includes(tag.dataset[type]));
});
});
}
// 显示消息
function showMessage(text) {
const stats = floatingPanel.querySelector('#tfd-stats');
if (stats) {
stats.innerHTML = `