|
|
// Idea House JavaScript - 处理数据字段选择和Coze API处理
|
|
|
|
|
|
// 全局变量
|
|
|
let dataFields = [];
|
|
|
let filteredDataFields = [];
|
|
|
let selectedFields = new Map(); // 字段ID -> 描述的映射
|
|
|
|
|
|
// 筛选状态变量
|
|
|
let columnFilters = {
|
|
|
id: '',
|
|
|
description: '',
|
|
|
type: '',
|
|
|
coverage: { min: null, max: null },
|
|
|
userCount: null,
|
|
|
alphaCount: null
|
|
|
};
|
|
|
let sortColumn = null;
|
|
|
let sortOrder = 'asc';
|
|
|
|
|
|
// DOM加载完成后初始化
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
// 设置事件监听器
|
|
|
document.getElementById('loadDataFieldsBtn').addEventListener('click', loadDataFields);
|
|
|
document.getElementById('clearSelectionBtn').addEventListener('click', clearSelection);
|
|
|
document.getElementById('processFieldsBtn').addEventListener('click', processSelectedFields);
|
|
|
|
|
|
// 设置API令牌切换按钮
|
|
|
const toggleBtn = document.getElementById('toggleApiTokenBtn');
|
|
|
const tokenInput = document.getElementById('cozeApiTokenInput');
|
|
|
|
|
|
toggleBtn.addEventListener('click', function() {
|
|
|
if (tokenInput.type === 'password') {
|
|
|
tokenInput.type = 'text';
|
|
|
toggleBtn.textContent = '隐藏';
|
|
|
} else {
|
|
|
tokenInput.type = 'password';
|
|
|
toggleBtn.textContent = '显示';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 加载保存的配置
|
|
|
loadSavedCozeConfig();
|
|
|
|
|
|
// 设置保存配置按钮
|
|
|
document.getElementById('saveCozeConfigBtn').addEventListener('click', saveCozeConfig);
|
|
|
|
|
|
// 设置清除配置按钮
|
|
|
document.getElementById('clearCozeConfigBtn').addEventListener('click', clearCozeConfig);
|
|
|
|
|
|
// 设置筛选事件监听器
|
|
|
setupFilterEventListeners();
|
|
|
});
|
|
|
|
|
|
// 从BRAIN API加载数据字段
|
|
|
async function loadDataFields() {
|
|
|
const region = document.getElementById('regionInput').value;
|
|
|
const delay = document.getElementById('delayInput').value;
|
|
|
const universe = document.getElementById('universeInput').value;
|
|
|
const datasetId = document.getElementById('datasetInput').value;
|
|
|
|
|
|
// 显示加载状态
|
|
|
document.getElementById('dataFieldsStats').textContent = '正在加载数据字段...';
|
|
|
document.getElementById('tableContainer').style.display = 'none';
|
|
|
|
|
|
try {
|
|
|
// 从localStorage或cookie获取会话ID
|
|
|
const sessionId = localStorage.getItem('brain_session_id');
|
|
|
|
|
|
if (!sessionId) {
|
|
|
alert('请先从主页面连接到BRAIN');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 调用代理端点
|
|
|
const params = new URLSearchParams({
|
|
|
region: region,
|
|
|
delay: delay,
|
|
|
universe: universe,
|
|
|
dataset_id: datasetId
|
|
|
});
|
|
|
|
|
|
// 记录API调用
|
|
|
console.log('🚀 正在调用API获取数据字段和数据集描述');
|
|
|
console.log('📋 参数:', {
|
|
|
region: region,
|
|
|
delay: delay,
|
|
|
universe: universe,
|
|
|
dataset_id: datasetId
|
|
|
});
|
|
|
|
|
|
// 并行获取数据字段和数据集描述
|
|
|
const [dataFieldsResponse, descriptionResponse] = await Promise.all([
|
|
|
fetch(`/idea-house/api/get-datafields-proxy?${params}`, {
|
|
|
method: 'GET',
|
|
|
headers: {
|
|
|
'Session-ID': sessionId
|
|
|
}
|
|
|
}),
|
|
|
fetch(`/idea-house/api/get-dataset-description?${params}`, {
|
|
|
method: 'GET',
|
|
|
headers: {
|
|
|
'Session-ID': sessionId
|
|
|
}
|
|
|
})
|
|
|
]);
|
|
|
|
|
|
console.log('📥 收到响应:');
|
|
|
console.log(' 数据字段状态:', dataFieldsResponse.status);
|
|
|
console.log(' 数据集描述状态:', descriptionResponse.status);
|
|
|
|
|
|
if (!dataFieldsResponse.ok) {
|
|
|
const errorData = await dataFieldsResponse.json();
|
|
|
throw new Error(errorData.error || '获取数据字段失败');
|
|
|
}
|
|
|
|
|
|
dataFields = await dataFieldsResponse.json();
|
|
|
|
|
|
// 获取数据集描述（如果可用）
|
|
|
let datasetDescription = '';
|
|
|
if (descriptionResponse.ok) {
|
|
|
console.log('✅ 数据集描述响应正常，正在解析JSON...');
|
|
|
const descriptionData = await descriptionResponse.json();
|
|
|
console.log('📄 描述数据:', descriptionData);
|
|
|
|
|
|
if (descriptionData.success) {
|
|
|
datasetDescription = descriptionData.description;
|
|
|
// 将其存储在全局中供后续使用
|
|
|
window.currentDatasetDescription = datasetDescription;
|
|
|
console.log('✅ 数据集描述已存储:', datasetDescription);
|
|
|
} else {
|
|
|
console.log('⚠️ 描述响应success=false');
|
|
|
}
|
|
|
} else {
|
|
|
console.log('❌ 数据集描述响应不正常:', descriptionResponse.status);
|
|
|
try {
|
|
|
const errorData = await descriptionResponse.json();
|
|
|
console.log('❌ 错误详情:', errorData);
|
|
|
} catch (e) {
|
|
|
console.log('❌ 无法解析错误响应');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 更新统计信息
|
|
|
document.getElementById('dataFieldsStats').textContent = `已加载 ${dataFields.length} 个数据字段`;
|
|
|
|
|
|
// 使用数据集描述填充表格
|
|
|
populateDataFieldsTable(datasetDescription);
|
|
|
|
|
|
// 显示表格
|
|
|
document.getElementById('tableContainer').style.display = 'block';
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('加载数据字段失败:', error);
|
|
|
document.getElementById('dataFieldsStats').textContent = `错误: ${error.message}`;
|
|
|
alert(`加载数据字段失败: ${error.message}`);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 使用筛选和排序填充数据字段表格
|
|
|
function populateDataFieldsTable(datasetDescription) {
|
|
|
console.log('📊 populateDataFieldsTable 被调用，描述:', datasetDescription);
|
|
|
|
|
|
const tableBody = document.getElementById('dataFieldsTableBody');
|
|
|
const highCoverageFilter = document.getElementById('filterHighCoverage')?.checked || false;
|
|
|
const popularFilter = document.getElementById('filterPopular')?.checked || false;
|
|
|
const matrixOnlyFilter = document.getElementById('filterMatrixOnly')?.checked || false;
|
|
|
|
|
|
// 显示数据集描述（如果可用）
|
|
|
if (datasetDescription) {
|
|
|
console.log('🎯 显示传入的数据集描述');
|
|
|
displayDatasetDescription(datasetDescription);
|
|
|
} else if (window.currentDatasetDescription) {
|
|
|
console.log('🎯 显示已存储的数据集描述');
|
|
|
displayDatasetDescription(window.currentDatasetDescription);
|
|
|
} else {
|
|
|
console.log('⚠️ 无数据集描述可用');
|
|
|
}
|
|
|
|
|
|
// 应用筛选器
|
|
|
filteredDataFields = dataFields.filter(field => {
|
|
|
// 列特定筛选器
|
|
|
// ID筛选器
|
|
|
if (columnFilters.id && !field.id.toLowerCase().includes(columnFilters.id.toLowerCase())) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 描述筛选器
|
|
|
if (columnFilters.description && !field.description.toLowerCase().includes(columnFilters.description.toLowerCase())) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 类型筛选器
|
|
|
if (columnFilters.type && field.type !== columnFilters.type) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 覆盖率范围筛选器
|
|
|
if (columnFilters.coverage.min !== null && field.coverage * 100 < columnFilters.coverage.min) {
|
|
|
return false;
|
|
|
}
|
|
|
if (columnFilters.coverage.max !== null && field.coverage * 100 > columnFilters.coverage.max) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 用户数量筛选器
|
|
|
if (columnFilters.userCount !== null && field.userCount < columnFilters.userCount) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// Alpha数量筛选器
|
|
|
if (columnFilters.alphaCount !== null && field.alphaCount < columnFilters.alphaCount) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 高覆盖率筛选器
|
|
|
if (highCoverageFilter && field.coverage < 0.9) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 流行度筛选器
|
|
|
if (popularFilter && field.userCount < 1000) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 矩阵类型筛选器
|
|
|
if (matrixOnlyFilter && field.type !== 'MATRIX') {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
});
|
|
|
|
|
|
// 对筛选后的数据字段排序
|
|
|
if (sortColumn) {
|
|
|
filteredDataFields.sort((a, b) => {
|
|
|
let aVal = a[sortColumn];
|
|
|
let bVal = b[sortColumn];
|
|
|
|
|
|
// 处理数值
|
|
|
if (sortColumn === 'coverage' || sortColumn === 'userCount' || sortColumn === 'alphaCount') {
|
|
|
aVal = Number(aVal);
|
|
|
bVal = Number(bVal);
|
|
|
} else {
|
|
|
// 字符串比较
|
|
|
aVal = String(aVal).toLowerCase();
|
|
|
bVal = String(bVal).toLowerCase();
|
|
|
}
|
|
|
|
|
|
if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
|
|
|
if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
|
|
|
return 0;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 清空表格
|
|
|
tableBody.innerHTML = '';
|
|
|
|
|
|
if (filteredDataFields.length === 0) {
|
|
|
tableBody.innerHTML = '<tr><td colspan="7" style="text-align: center; color: #666; padding: 40px;">未找到符合筛选条件的数据字段</td></tr>';
|
|
|
updateDataFieldsStats();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 创建表格行
|
|
|
filteredDataFields.forEach(field => {
|
|
|
const row = document.createElement('tr');
|
|
|
row.dataset.fieldId = field.id;
|
|
|
row.dataset.fieldDescription = field.description;
|
|
|
|
|
|
if (selectedFields.has(field.id)) {
|
|
|
row.classList.add('selected');
|
|
|
}
|
|
|
|
|
|
row.innerHTML = `
|
|
|
<td>
|
|
|
<input type="checkbox" class="field-checkbox" data-field-id="${field.id}" data-field-description="${field.description}" ${selectedFields.has(field.id) ? 'checked' : ''}>
|
|
|
</td>
|
|
|
<td><span class="data-field-id">${field.id}</span></td>
|
|
|
<td><span class="data-field-description">${field.description}</span></td>
|
|
|
<td><span class="data-field-type">${field.type || 'N/A'}</span></td>
|
|
|
<td><span class="data-field-coverage">${field.coverage ? (field.coverage * 100).toFixed(1) + '%' : 'N/A'}</span></td>
|
|
|
<td><span class="data-field-count">${field.userCount ? field.userCount.toLocaleString() : 'N/A'}</span></td>
|
|
|
<td><span class="data-field-count">${field.alphaCount ? field.alphaCount.toLocaleString() : 'N/A'}</span></td>
|
|
|
`;
|
|
|
|
|
|
// 为行添加点击处理程序
|
|
|
row.addEventListener('click', function(e) {
|
|
|
if (e.target.type !== 'checkbox') {
|
|
|
const checkbox = row.querySelector('.field-checkbox');
|
|
|
checkbox.checked = !checkbox.checked;
|
|
|
handleFieldSelection(checkbox);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 为复选框添加变更处理程序
|
|
|
const checkbox = row.querySelector('.field-checkbox');
|
|
|
checkbox.addEventListener('change', function() {
|
|
|
handleFieldSelection(this);
|
|
|
});
|
|
|
|
|
|
tableBody.appendChild(row);
|
|
|
});
|
|
|
|
|
|
// 更新统计信息并填充类型筛选器
|
|
|
updateDataFieldsStats();
|
|
|
populateTypeFilter();
|
|
|
updateSelectAllCheckbox();
|
|
|
}
|
|
|
|
|
|
// 处理字段选择
|
|
|
function handleFieldSelection(checkbox) {
|
|
|
const fieldId = checkbox.dataset.fieldId;
|
|
|
const fieldDescription = checkbox.dataset.fieldDescription;
|
|
|
const row = checkbox.closest('tr');
|
|
|
|
|
|
if (checkbox.checked) {
|
|
|
selectedFields.set(fieldId, fieldDescription);
|
|
|
row.classList.add('selected');
|
|
|
} else {
|
|
|
selectedFields.delete(fieldId);
|
|
|
row.classList.remove('selected');
|
|
|
}
|
|
|
|
|
|
updateSelectedFieldsDisplay();
|
|
|
updateDataFieldsStats();
|
|
|
updateSelectAllCheckbox();
|
|
|
}
|
|
|
|
|
|
// 更新选中字段的显示
|
|
|
function updateSelectedFieldsDisplay() {
|
|
|
const selectedFieldsList = document.getElementById('selectedFieldsList');
|
|
|
const selectedFieldsSection = document.getElementById('selectedFieldsSection');
|
|
|
|
|
|
if (selectedFields.size === 0) {
|
|
|
selectedFieldsSection.style.display = 'none';
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
selectedFieldsSection.style.display = 'block';
|
|
|
selectedFieldsList.innerHTML = '';
|
|
|
|
|
|
selectedFields.forEach((description, fieldId) => {
|
|
|
const fieldItem = document.createElement('div');
|
|
|
fieldItem.className = 'selected-field-item';
|
|
|
fieldItem.textContent = `${fieldId}: ${description}`;
|
|
|
selectedFieldsList.appendChild(fieldItem);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 清除所有选择
|
|
|
function clearSelection() {
|
|
|
selectedFields.clear();
|
|
|
|
|
|
// 取消选中所有复选框并移除选中类
|
|
|
document.querySelectorAll('.field-checkbox').forEach(checkbox => {
|
|
|
checkbox.checked = false;
|
|
|
checkbox.closest('tr').classList.remove('selected');
|
|
|
});
|
|
|
|
|
|
updateSelectedFieldsDisplay();
|
|
|
updateDataFieldsStats();
|
|
|
updateSelectAllCheckbox();
|
|
|
}
|
|
|
|
|
|
// 使用Coze API处理选中的字段
|
|
|
async function processSelectedFields() {
|
|
|
if (selectedFields.size === 0) {
|
|
|
alert('请至少选择一个字段');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 显示加载覆盖层，包含Coze API特定消息
|
|
|
const loadingOverlay = document.getElementById('loadingOverlay');
|
|
|
const loadingContent = loadingOverlay.querySelector('.loading-content');
|
|
|
loadingContent.innerHTML = `
|
|
|
<h3>🚀 正在向Coze API发送请求...</h3>
|
|
|
<p>正在通过Coze工作流处理 ${selectedFields.size} 个选中的字段</p>
|
|
|
<p style="font-size: 14px; color: #666; margin-top: 10px;">
|
|
|
📡 正在连接到Coze API...<br>
|
|
|
⚙️ 正在运行工作流分析...<br>
|
|
|
📊 正在生成洞察...
|
|
|
</p>
|
|
|
`;
|
|
|
loadingOverlay.style.display = 'flex';
|
|
|
|
|
|
try {
|
|
|
// 准备所需格式的数据 {"id":"description"}
|
|
|
const selectedFieldsObject = {};
|
|
|
selectedFields.forEach((description, fieldId) => {
|
|
|
selectedFieldsObject[fieldId] = description;
|
|
|
});
|
|
|
|
|
|
// 获取Coze API配置
|
|
|
const cozeApiToken = document.getElementById('cozeApiTokenInput').value;
|
|
|
const workflowId = document.getElementById('workflowIdInput').value;
|
|
|
|
|
|
// 验证输入
|
|
|
if (!cozeApiToken) {
|
|
|
alert('请输入Coze API令牌');
|
|
|
document.getElementById('loadingOverlay').style.display = 'none';
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!workflowId) {
|
|
|
alert('请输入工作流ID');
|
|
|
document.getElementById('loadingOverlay').style.display = 'none';
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 更新加载消息以显示API调用正在进行
|
|
|
loadingContent.innerHTML = `
|
|
|
<h3>📡 Coze API请求进行中...</h3>
|
|
|
<p>工作流ID: ${workflowId}</p>
|
|
|
<p>选中的字段: ${Object.keys(selectedFieldsObject).join(', ')}</p>
|
|
|
<p style="font-size: 14px; color: #4caf50; margin-top: 10px;">
|
|
|
✅ API凭据已验证<br>
|
|
|
🔄 正在向Coze服务器发送请求...<br>
|
|
|
⏳ 请等待响应...
|
|
|
</p>
|
|
|
`;
|
|
|
|
|
|
console.log('🚀 开始Coze API请求...');
|
|
|
console.log('📋 选中的字段:', selectedFieldsObject);
|
|
|
console.log('🔑 使用以以下结尾的API令牌:', cozeApiToken.slice(-10));
|
|
|
console.log('⚙️ 工作流ID:', workflowId);
|
|
|
|
|
|
// 调用处理端点
|
|
|
const response = await fetch('/idea-house/api/process-fields', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify({
|
|
|
selected_fields: selectedFieldsObject,
|
|
|
coze_api_token: cozeApiToken,
|
|
|
workflow_id: workflowId,
|
|
|
dataset_description: window.currentDatasetDescription || ''
|
|
|
})
|
|
|
});
|
|
|
|
|
|
console.log('📡 收到服务器响应');
|
|
|
|
|
|
const result = await response.json();
|
|
|
|
|
|
if (!response.ok) {
|
|
|
console.error('❌ Coze API请求失败:', result.error);
|
|
|
throw new Error(result.error || '处理字段失败');
|
|
|
}
|
|
|
|
|
|
console.log('✅ Coze API请求成功!');
|
|
|
console.log('📊 结果:', result);
|
|
|
|
|
|
// 更新加载消息以显示成功
|
|
|
loadingContent.innerHTML = `
|
|
|
<h3>✅ 收到Coze API响应!</h3>
|
|
|
<p style="color: #4caf50;">已成功通过工作流处理</p>
|
|
|
<p style="font-size: 14px; margin-top: 10px;">
|
|
|
📥 收到来自Coze的响应<br>
|
|
|
🎉 正在格式化结果...
|
|
|
</p>
|
|
|
`;
|
|
|
|
|
|
// 短暂延迟以显示成功消息
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
|
|
// 显示结果
|
|
|
displayResults(result);
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('💥 通过Coze API处理字段失败:', error);
|
|
|
alert(`通过Coze API处理字段失败: ${error.message}`);
|
|
|
} finally {
|
|
|
// 隐藏加载覆盖层
|
|
|
document.getElementById('loadingOverlay').style.display = 'none';
|
|
|
|
|
|
// 为下次使用重置加载内容
|
|
|
loadingContent.innerHTML = `
|
|
|
<h3>处理中...</h3>
|
|
|
<p>请等待我们分析您选中的字段...</p>
|
|
|
`;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 以markdown格式显示结果
|
|
|
function displayResults(result) {
|
|
|
const resultsSection = document.getElementById('resultsSection');
|
|
|
const resultsContent = document.getElementById('resultsContent');
|
|
|
|
|
|
// 显示结果部分
|
|
|
resultsSection.style.display = 'block';
|
|
|
|
|
|
// 将结果格式化为markdown - 简化版本
|
|
|
let markdown = '# 分析结果\n\n';
|
|
|
|
|
|
// 添加选中字段部分
|
|
|
markdown += '## 选中的字段\n\n';
|
|
|
Object.entries(result.selected_fields).forEach(([fieldId, description]) => {
|
|
|
markdown += `- **${fieldId}**: ${description}\n`;
|
|
|
});
|
|
|
markdown += '\n';
|
|
|
|
|
|
// 添加输出部分 - 仅显示实际分析输出
|
|
|
markdown += '## 分析输出\n\n';
|
|
|
if (result.output) {
|
|
|
// 如果输出已经是格式化文本，直接使用
|
|
|
if (typeof result.output === 'string') {
|
|
|
markdown += result.output;
|
|
|
} else {
|
|
|
// 如果是对象，尝试美观地显示
|
|
|
markdown += '```json\n';
|
|
|
markdown += JSON.stringify(result.output, null, 2);
|
|
|
markdown += '\n```\n';
|
|
|
}
|
|
|
} else {
|
|
|
markdown += '_无输出数据可用_';
|
|
|
}
|
|
|
|
|
|
// 将markdown渲染为HTML
|
|
|
resultsContent.innerHTML = renderMarkdown(markdown);
|
|
|
|
|
|
// 滚动到结果部分
|
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' });
|
|
|
}
|
|
|
|
|
|
// 辅助函数格式化markdown（可选增强功能）
|
|
|
function renderMarkdown(markdown) {
|
|
|
// 这是一个改进的markdown渲染器，能更好地处理列表
|
|
|
let html = markdown;
|
|
|
|
|
|
// 首先，转义HTML以防止XSS
|
|
|
html = html.replace(/&/g, '&')
|
|
|
.replace(/</g, '<')
|
|
|
.replace(/>/g, '>');
|
|
|
|
|
|
// 代码块（必须在行内代码之前）
|
|
|
html = html.replace(/```([\s\S]*?)```/g, function(match, code) {
|
|
|
return '<pre><code>' + code.trim() + '</code></pre>';
|
|
|
});
|
|
|
|
|
|
// 标题
|
|
|
html = html.replace(/^#### (.*$)/gim, '<h4>$1</h4>');
|
|
|
html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
|
|
|
html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
|
|
|
html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
|
|
|
|
|
|
// 粗体（必须在斜体之前）
|
|
|
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
|
|
|
|
// 斜体
|
|
|
html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
|
|
|
|
|
|
// 行内代码
|
|
|
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
|
|
|
|
// 更仔细地处理列表
|
|
|
// 为了更好的列表处理，分割成行
|
|
|
const lines = html.split('\n');
|
|
|
let inList = false;
|
|
|
let processedLines = [];
|
|
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
|
let line = lines[i];
|
|
|
|
|
|
// 检查行是否是列表项
|
|
|
if (line.match(/^[\*\-\+] /)) {
|
|
|
// 用适当的HTML替换列表标记
|
|
|
line = line.replace(/^[\*\-\+] (.*)$/, '<li>$1</li>');
|
|
|
|
|
|
// 如果不在列表中，开始一个列表
|
|
|
if (!inList) {
|
|
|
processedLines.push('<ul>');
|
|
|
inList = true;
|
|
|
}
|
|
|
processedLines.push(line);
|
|
|
} else if (line.match(/^\d+\. /)) {
|
|
|
// 有序列表
|
|
|
line = line.replace(/^\d+\. (.*)$/, '<li>$1</li>');
|
|
|
|
|
|
// 如果不在列表中或前一个是无序列表，开始有序列表
|
|
|
if (!inList || (i > 0 && lines[i-1].match(/^[\*\-\+] /))) {
|
|
|
if (inList) processedLines.push('</ul>');
|
|
|
processedLines.push('<ol>');
|
|
|
inList = true;
|
|
|
}
|
|
|
processedLines.push(line);
|
|
|
} else {
|
|
|
// 不是列表项
|
|
|
if (inList) {
|
|
|
// 关闭列表
|
|
|
if (i > 0 && lines[i-1].match(/^\d+\. /)) {
|
|
|
processedLines.push('</ol>');
|
|
|
} else {
|
|
|
processedLines.push('</ul>');
|
|
|
}
|
|
|
inList = false;
|
|
|
}
|
|
|
processedLines.push(line);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 关闭任何剩余的列表
|
|
|
if (inList) {
|
|
|
if (lines[lines.length - 1].match(/^\d+\. /)) {
|
|
|
processedLines.push('</ol>');
|
|
|
} else {
|
|
|
processedLines.push('</ul>');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
html = processedLines.join('\n');
|
|
|
|
|
|
// 换行 - 将双换行符转换为段落
|
|
|
html = html.replace(/\n\n/g, '</p><p>');
|
|
|
html = '<p>' + html + '</p>';
|
|
|
|
|
|
// 清理空段落
|
|
|
html = html.replace(/<p>\s*<\/p>/g, '');
|
|
|
html = html.replace(/<p>(<h[1-6]>)/g, '$1');
|
|
|
html = html.replace(/(<\/h[1-6]>)<\/p>/g, '$1');
|
|
|
html = html.replace(/<p>(<ul>|<ol>|<pre>)/g, '$1');
|
|
|
html = html.replace(/(<\/ul>|<\/ol>|<\/pre>)<\/p>/g, '$1');
|
|
|
|
|
|
// 段落内的单换行符
|
|
|
html = html.replace(/\n/g, '<br>');
|
|
|
|
|
|
return html;
|
|
|
}
|
|
|
|
|
|
// 将Coze配置保存到localStorage
|
|
|
function saveCozeConfig() {
|
|
|
const cozeApiToken = document.getElementById('cozeApiTokenInput').value;
|
|
|
const workflowId = document.getElementById('workflowIdInput').value;
|
|
|
|
|
|
// 保存到localStorage
|
|
|
localStorage.setItem('coze_api_token', cozeApiToken);
|
|
|
localStorage.setItem('coze_workflow_id', workflowId);
|
|
|
|
|
|
// 显示成功消息
|
|
|
const messageElement = document.getElementById('saveConfigMessage');
|
|
|
messageElement.style.display = 'inline';
|
|
|
|
|
|
// 3秒后隐藏消息
|
|
|
setTimeout(() => {
|
|
|
messageElement.style.display = 'none';
|
|
|
}, 3000);
|
|
|
}
|
|
|
|
|
|
// 从localStorage加载保存的Coze配置
|
|
|
function loadSavedCozeConfig() {
|
|
|
const savedToken = localStorage.getItem('coze_api_token');
|
|
|
const savedWorkflowId = localStorage.getItem('coze_workflow_id');
|
|
|
|
|
|
if (savedToken) {
|
|
|
document.getElementById('cozeApiTokenInput').value = savedToken;
|
|
|
}
|
|
|
|
|
|
if (savedWorkflowId) {
|
|
|
document.getElementById('workflowIdInput').value = savedWorkflowId;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 清除Coze配置并重置为默认值
|
|
|
function clearCozeConfig() {
|
|
|
// 从localStorage移除
|
|
|
localStorage.removeItem('coze_api_token');
|
|
|
localStorage.removeItem('coze_workflow_id');
|
|
|
|
|
|
// 重置为默认值
|
|
|
document.getElementById('cozeApiTokenInput').value = 'pat_OCxUpnmL7hCvUxEWwcKL5XwUOdoiA3eWLzwY6L8W9sQVN1saJnoMrDNyhFhEn63l';
|
|
|
document.getElementById('workflowIdInput').value = '7522912027267956786';
|
|
|
|
|
|
// 显示消息
|
|
|
const messageElement = document.getElementById('saveConfigMessage');
|
|
|
messageElement.textContent = '配置已重置为默认值!';
|
|
|
messageElement.style.color = '#ff9800';
|
|
|
messageElement.style.display = 'inline';
|
|
|
|
|
|
// 3秒后隐藏消息
|
|
|
setTimeout(() => {
|
|
|
messageElement.style.display = 'none';
|
|
|
messageElement.textContent = '配置已保存!';
|
|
|
messageElement.style.color = '#4caf50';
|
|
|
}, 3000);
|
|
|
}
|
|
|
|
|
|
// 设置筛选事件监听器
|
|
|
function setupFilterEventListeners() {
|
|
|
// 快速筛选复选框
|
|
|
const highCoverageFilter = document.getElementById('filterHighCoverage');
|
|
|
const popularFilter = document.getElementById('filterPopular');
|
|
|
const matrixOnlyFilter = document.getElementById('filterMatrixOnly');
|
|
|
|
|
|
// 筛选操作按钮
|
|
|
const selectAllBtn = document.getElementById('selectAllFiltered');
|
|
|
const clearAllBtn = document.getElementById('clearAllSelected');
|
|
|
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
|
|
|
|
|
// 设置快速筛选监听器
|
|
|
if (highCoverageFilter) highCoverageFilter.onchange = () => populateDataFieldsTable();
|
|
|
if (popularFilter) popularFilter.onchange = () => populateDataFieldsTable();
|
|
|
if (matrixOnlyFilter) matrixOnlyFilter.onchange = () => populateDataFieldsTable();
|
|
|
|
|
|
// 设置操作按钮监听器
|
|
|
if (selectAllBtn) selectAllBtn.onclick = selectAllFilteredFields;
|
|
|
if (clearAllBtn) clearAllBtn.onclick = clearAllSelectedFields;
|
|
|
|
|
|
if (selectAllCheckbox) {
|
|
|
selectAllCheckbox.onclick = (e) => {
|
|
|
e.stopPropagation();
|
|
|
if (selectAllCheckbox.checked) {
|
|
|
selectAllFilteredFields();
|
|
|
} else {
|
|
|
clearAllFilteredFields();
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
|
|
|
// 列筛选监听器
|
|
|
document.querySelectorAll('.column-filter').forEach(filter => {
|
|
|
filter.addEventListener('input', (e) => {
|
|
|
const column = e.target.dataset.column;
|
|
|
const value = e.target.value;
|
|
|
|
|
|
if (column === 'userCount' || column === 'alphaCount') {
|
|
|
columnFilters[column] = value ? parseInt(value) : null;
|
|
|
} else {
|
|
|
columnFilters[column] = value;
|
|
|
}
|
|
|
|
|
|
// 添加/移除活动类
|
|
|
if (value) {
|
|
|
e.target.classList.add('active');
|
|
|
} else {
|
|
|
e.target.classList.remove('active');
|
|
|
}
|
|
|
|
|
|
populateDataFieldsTable();
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 覆盖率范围筛选器
|
|
|
document.querySelectorAll('.column-filter-min, .column-filter-max').forEach(filter => {
|
|
|
filter.addEventListener('input', (e) => {
|
|
|
const isMin = e.target.classList.contains('column-filter-min');
|
|
|
const value = e.target.value;
|
|
|
|
|
|
if (isMin) {
|
|
|
columnFilters.coverage.min = value ? parseFloat(value) : null;
|
|
|
} else {
|
|
|
columnFilters.coverage.max = value ? parseFloat(value) : null;
|
|
|
}
|
|
|
|
|
|
// 添加/移除活动类
|
|
|
const minInput = e.target.parentElement.querySelector('.column-filter-min');
|
|
|
const maxInput = e.target.parentElement.querySelector('.column-filter-max');
|
|
|
|
|
|
if (minInput.value || maxInput.value) {
|
|
|
minInput.classList.add('active');
|
|
|
maxInput.classList.add('active');
|
|
|
} else {
|
|
|
minInput.classList.remove('active');
|
|
|
maxInput.classList.remove('active');
|
|
|
}
|
|
|
|
|
|
populateDataFieldsTable();
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 排序按钮监听器
|
|
|
document.querySelectorAll('.sort-btn').forEach(btn => {
|
|
|
btn.addEventListener('click', (e) => {
|
|
|
const column = e.target.dataset.column;
|
|
|
|
|
|
// 重置所有其他排序按钮
|
|
|
document.querySelectorAll('.sort-btn').forEach(b => {
|
|
|
if (b !== e.target) {
|
|
|
b.classList.remove('asc', 'desc');
|
|
|
b.dataset.order = 'asc';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 切换排序顺序
|
|
|
if (sortColumn === column) {
|
|
|
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
|
|
|
} else {
|
|
|
sortColumn = column;
|
|
|
sortOrder = 'asc';
|
|
|
}
|
|
|
|
|
|
e.target.dataset.order = sortOrder;
|
|
|
e.target.classList.remove('asc', 'desc');
|
|
|
e.target.classList.add(sortOrder);
|
|
|
|
|
|
populateDataFieldsTable();
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 更新数据字段统计信息
|
|
|
function updateDataFieldsStats() {
|
|
|
const dataFieldsCountEl = document.getElementById('dataFieldsCount');
|
|
|
const filteredCountEl = document.getElementById('filteredCount');
|
|
|
const selectedCountEl = document.getElementById('selectedFieldsCount');
|
|
|
|
|
|
if (dataFieldsCountEl) dataFieldsCountEl.textContent = `已加载 ${dataFields.length} 个字段`;
|
|
|
if (filteredCountEl) filteredCountEl.textContent = `${filteredDataFields.length} 个已筛选`;
|
|
|
if (selectedCountEl) selectedCountEl.textContent = `${selectedFields.size} 个已选中`;
|
|
|
}
|
|
|
|
|
|
// 填充类型筛选下拉菜单
|
|
|
function populateTypeFilter() {
|
|
|
const typeFilter = document.getElementById('typeFilter');
|
|
|
if (!typeFilter) return;
|
|
|
|
|
|
// 从当前数据字段获取唯一类型
|
|
|
const uniqueTypes = [...new Set(dataFields.map(field => field.type))].sort();
|
|
|
|
|
|
// 清除现有选项，除了"所有类型"
|
|
|
typeFilter.innerHTML = '<option value="">所有类型</option>';
|
|
|
|
|
|
uniqueTypes.forEach(type => {
|
|
|
const option = document.createElement('option');
|
|
|
option.value = type;
|
|
|
option.textContent = type;
|
|
|
typeFilter.appendChild(option);
|
|
|
});
|
|
|
|
|
|
// 如果存在选中的值，恢复它
|
|
|
if (columnFilters.type && uniqueTypes.includes(columnFilters.type)) {
|
|
|
typeFilter.value = columnFilters.type;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 选中所有筛选后的字段
|
|
|
function selectAllFilteredFields() {
|
|
|
filteredDataFields.forEach(field => {
|
|
|
selectedFields.set(field.id, field.description);
|
|
|
const row = document.querySelector(`tr[data-field-id="${field.id}"]`);
|
|
|
if (row) {
|
|
|
const checkbox = row.querySelector('.field-checkbox');
|
|
|
checkbox.checked = true;
|
|
|
row.classList.add('selected');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
updateSelectedFieldsDisplay();
|
|
|
updateDataFieldsStats();
|
|
|
updateSelectAllCheckbox();
|
|
|
}
|
|
|
|
|
|
// 清除所有选中的字段
|
|
|
function clearAllSelectedFields() {
|
|
|
selectedFields.clear();
|
|
|
|
|
|
// 更新所有复选框
|
|
|
document.querySelectorAll('.field-checkbox').forEach(checkbox => {
|
|
|
checkbox.checked = false;
|
|
|
checkbox.closest('tr').classList.remove('selected');
|
|
|
});
|
|
|
|
|
|
updateSelectedFieldsDisplay();
|
|
|
updateDataFieldsStats();
|
|
|
updateSelectAllCheckbox();
|
|
|
}
|
|
|
|
|
|
// 仅清除筛选后的字段
|
|
|
function clearAllFilteredFields() {
|
|
|
filteredDataFields.forEach(field => {
|
|
|
selectedFields.delete(field.id);
|
|
|
const row = document.querySelector(`tr[data-field-id="${field.id}"]`);
|
|
|
if (row) {
|
|
|
const checkbox = row.querySelector('.field-checkbox');
|
|
|
checkbox.checked = false;
|
|
|
row.classList.remove('selected');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
updateSelectedFieldsDisplay();
|
|
|
updateDataFieldsStats();
|
|
|
updateSelectAllCheckbox();
|
|
|
}
|
|
|
|
|
|
// 更新全选复选框状态
|
|
|
function updateSelectAllCheckbox() {
|
|
|
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
|
|
if (!selectAllCheckbox) return;
|
|
|
|
|
|
const allFilteredSelected = filteredDataFields.length > 0 &&
|
|
|
filteredDataFields.every(field => selectedFields.has(field.id));
|
|
|
|
|
|
selectAllCheckbox.checked = allFilteredSelected;
|
|
|
selectAllCheckbox.indeterminate = !allFilteredSelected &&
|
|
|
filteredDataFields.some(field => selectedFields.has(field.id));
|
|
|
}
|
|
|
|
|
|
// 显示数据集描述
|
|
|
function displayDatasetDescription(description) {
|
|
|
console.log('🎨 显示数据集描述:', description);
|
|
|
|
|
|
// 检查数据集描述元素是否已存在
|
|
|
let descriptionElement = document.getElementById('datasetDescription');
|
|
|
|
|
|
if (!descriptionElement) {
|
|
|
console.log('📌 创建新的数据集描述元素');
|
|
|
|
|
|
// 如果元素不存在则创建它
|
|
|
const tableContainer = document.getElementById('tableContainer');
|
|
|
const dataFieldsControls = tableContainer.querySelector('.data-fields-controls');
|
|
|
|
|
|
// 为数据集描述创建一个新的div
|
|
|
descriptionElement = document.createElement('div');
|
|
|
descriptionElement.id = 'datasetDescription';
|
|
|
descriptionElement.className = 'dataset-description';
|
|
|
descriptionElement.style.cssText = `
|
|
|
padding: 15px;
|
|
|
background: #e8f5e9;
|
|
|
border: 1px solid #4caf50;
|
|
|
border-radius: 4px;
|
|
|
margin-bottom: 15px;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
`;
|
|
|
|
|
|
// 将其插入到控件之前
|
|
|
tableContainer.insertBefore(descriptionElement, dataFieldsControls);
|
|
|
console.log('✅ 数据集描述元素已创建并插入');
|
|
|
} else {
|
|
|
console.log('📌 使用现有的数据集描述元素');
|
|
|
}
|
|
|
|
|
|
// 更新内容
|
|
|
descriptionElement.innerHTML = `
|
|
|
<strong>数据集描述:</strong><br>
|
|
|
${description}
|
|
|
`;
|
|
|
console.log('✅ 数据集描述内容已更新');
|
|
|
} |
