590 lines
17 KiB
JavaScript
590 lines
17 KiB
JavaScript
// ========================================
|
|
// Claude Code SEO Assistant - Dashboard Logic
|
|
// ========================================
|
|
|
|
// Global State
|
|
const state = {
|
|
currentView: 'overview',
|
|
currentDomain: 'yoursite.com',
|
|
isLoading: false,
|
|
data: null,
|
|
charts: {}
|
|
};
|
|
|
|
// Initialize Dashboard
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initializeNavigation();
|
|
initializeCharts();
|
|
initializeRefreshButton();
|
|
initializeDomainSelect();
|
|
loadDashboardData();
|
|
});
|
|
|
|
// Navigation
|
|
function initializeNavigation() {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const view = item.dataset.view;
|
|
switchView(view);
|
|
});
|
|
});
|
|
}
|
|
|
|
function switchView(viewName) {
|
|
// Update navigation
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
if (item.dataset.view === viewName) {
|
|
item.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Update views
|
|
document.querySelectorAll('.view').forEach(view => {
|
|
view.classList.remove('active');
|
|
});
|
|
|
|
const targetView = document.getElementById(`${viewName}-view`);
|
|
if (targetView) {
|
|
targetView.classList.add('active');
|
|
state.currentView = viewName;
|
|
}
|
|
}
|
|
|
|
// Charts Initialization
|
|
function initializeCharts() {
|
|
initializeCitationTrendChart();
|
|
initializeEngineComparisonChart();
|
|
initializeGeoRadarChart();
|
|
initializeContentTypeChart();
|
|
}
|
|
|
|
function initializeCitationTrendChart() {
|
|
const ctx = document.getElementById('citationTrendChart');
|
|
if (!ctx) return;
|
|
|
|
state.charts.citationTrend = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: generateDateLabels(30),
|
|
datasets: [
|
|
{
|
|
label: 'ChatGPT',
|
|
data: generateRandomData(30, 200, 234),
|
|
borderColor: '#10A37F',
|
|
backgroundColor: 'rgba(16, 163, 127, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Claude',
|
|
data: generateRandomData(30, 150, 189),
|
|
borderColor: '#8B5CF6',
|
|
backgroundColor: 'rgba(139, 92, 246, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Perplexity',
|
|
data: generateRandomData(30, 130, 156),
|
|
borderColor: '#1DB954',
|
|
backgroundColor: 'rgba(29, 185, 84, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Google SGE',
|
|
data: generateRandomData(30, 80, 98),
|
|
borderColor: '#4285F4',
|
|
backgroundColor: 'rgba(66, 133, 244, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + ' 次';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
mode: 'nearest',
|
|
axis: 'x',
|
|
intersect: false
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeEngineComparisonChart() {
|
|
const ctx = document.getElementById('engineComparisonChart');
|
|
if (!ctx) return;
|
|
|
|
state.charts.engineComparison = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['ChatGPT', 'Claude', 'Perplexity', 'Google SGE'],
|
|
datasets: [
|
|
{
|
|
label: '可见性评分',
|
|
data: [68, 75, 70, 55],
|
|
backgroundColor: [
|
|
'rgba(16, 163, 127, 0.8)',
|
|
'rgba(139, 92, 246, 0.8)',
|
|
'rgba(29, 185, 84, 0.8)',
|
|
'rgba(66, 133, 244, 0.8)'
|
|
],
|
|
borderWidth: 0
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `评分: ${context.parsed.y}/100`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeGeoRadarChart() {
|
|
const ctx = document.getElementById('geoRadarChart');
|
|
if (!ctx) return;
|
|
|
|
state.charts.geoRadar = new Chart(ctx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['权威性', '实体关系', '内容结构', '数据质量', '引用密度', '技术优化'],
|
|
datasets: [
|
|
{
|
|
label: '当前评分',
|
|
data: [78, 82, 75, 80, 72, 68],
|
|
backgroundColor: 'rgba(79, 70, 229, 0.2)',
|
|
borderColor: 'rgba(79, 70, 229, 1)',
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: '目标评分',
|
|
data: [85, 85, 85, 85, 85, 85],
|
|
backgroundColor: 'rgba(16, 185, 129, 0.2)',
|
|
borderColor: 'rgba(16, 185, 129, 1)',
|
|
borderWidth: 2
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top'
|
|
}
|
|
},
|
|
scales: {
|
|
r: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
stepSize: 20
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeContentTypeChart() {
|
|
const ctx = document.getElementById('contentTypeChart');
|
|
if (!ctx) return;
|
|
|
|
state.charts.contentType = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['指南教程', '案例分析', '对比分析', '列表文章', '博客文章'],
|
|
datasets: [{
|
|
data: [45, 25, 18, 12, 20],
|
|
backgroundColor: [
|
|
'rgba(16, 163, 127, 0.8)',
|
|
'rgba(139, 92, 246, 0.8)',
|
|
'rgba(29, 185, 84, 0.8)',
|
|
'rgba(66, 133, 244, 0.8)',
|
|
'rgba(245, 158, 11, 0.8)'
|
|
],
|
|
borderWidth: 2,
|
|
borderColor: '#fff'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right'
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.label || '';
|
|
const value = context.parsed || 0;
|
|
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
|
const percentage = ((value / total) * 100).toFixed(1);
|
|
return `${label}: ${value} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Data Loading
|
|
function loadDashboardData() {
|
|
showLoading();
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
// In real implementation, this would fetch from API
|
|
state.data = generateMockData();
|
|
updateDashboard();
|
|
hideLoading();
|
|
updateLastRefresh();
|
|
}, 1000);
|
|
}
|
|
|
|
function generateMockData() {
|
|
return {
|
|
geoScore: 72,
|
|
citations: {
|
|
chatgpt: 234,
|
|
claude: 189,
|
|
perplexity: 156,
|
|
googleSge: 98,
|
|
total: 677
|
|
},
|
|
ranking: {
|
|
current: 1,
|
|
total: 15,
|
|
trend: 'up'
|
|
},
|
|
traffic: {
|
|
organic: 12500,
|
|
trend: '+28%'
|
|
},
|
|
engines: {
|
|
chatgpt: { score: 68, citations: 234, rank: 4.2, trend: '+18%' },
|
|
claude: { score: 75, citations: 189, rank: 3.8, trend: '+22%' },
|
|
perplexity: { score: 70, citations: 156, rank: 4.5, trend: '+15%' },
|
|
googleSge: { score: 55, citations: 98, rank: 7.2, trend: '稳定' }
|
|
},
|
|
content: {
|
|
total: 156,
|
|
avgScore: 68,
|
|
highCitations: 23,
|
|
needsOptimization: 18
|
|
},
|
|
competitors: [
|
|
{ name: '你们', chatgpt: 68, claude: 75, perplexity: 70, googleSge: 55, total: 268, trend: 'up' },
|
|
{ name: 'competitor-a.com', chatgpt: 45, claude: 52, perplexity: 48, googleSge: 62, total: 207, trend: 'up' },
|
|
{ name: 'competitor-b.com', chatgpt: 38, claude: 41, perplexity: 35, googleSge: 48, total: 162, trend: 'stable' },
|
|
{ name: 'competitor-c.com', chatgpt: 28, claude: 32, perplexity: 30, googleSge: 35, total: 125, trend: 'down' }
|
|
],
|
|
alerts: {
|
|
critical: 0,
|
|
warning: 2,
|
|
info: 12
|
|
},
|
|
automation: {
|
|
weeklyAudit: { active: true, executions: 24, successRate: 96, avgTime: 845 },
|
|
monthlyReport: { active: true, executions: 6, successRate: 100, avgTime: 420 },
|
|
competitorMonitor: { active: false, executions: 45, successRate: 100, avgTime: 180 }
|
|
}
|
|
};
|
|
}
|
|
|
|
function updateDashboard() {
|
|
if (!state.data) return;
|
|
|
|
updateMetrics();
|
|
updateCharts();
|
|
updateCompetitorsTable();
|
|
updateAutomationStatus();
|
|
updateAlerts();
|
|
}
|
|
|
|
function updateMetrics() {
|
|
// Metrics are static in HTML, but could be updated dynamically
|
|
console.log('Metrics updated');
|
|
}
|
|
|
|
function updateCharts() {
|
|
// Update chart data if needed
|
|
console.log('Charts updated');
|
|
}
|
|
|
|
function updateCompetitorsTable() {
|
|
// Table is static in HTML, but could be updated dynamically
|
|
console.log('Competitors table updated');
|
|
}
|
|
|
|
function updateAutomationStatus() {
|
|
// Automation status is static in HTML, but could be updated dynamically
|
|
console.log('Automation status updated');
|
|
}
|
|
|
|
function updateAlerts() {
|
|
// Alerts are static in HTML, but could be updated dynamically
|
|
console.log('Alerts updated');
|
|
}
|
|
|
|
// Refresh Button
|
|
function initializeRefreshButton() {
|
|
const refreshBtn = document.getElementById('refreshBtn');
|
|
if (!refreshBtn) return;
|
|
|
|
refreshBtn.addEventListener('click', () => {
|
|
loadDashboardData();
|
|
showNotification('数据已刷新', 'success');
|
|
});
|
|
}
|
|
|
|
function initializeDomainSelect() {
|
|
const domainSelect = document.getElementById('domainSelect');
|
|
if (!domainSelect) return;
|
|
|
|
domainSelect.addEventListener('change', (e) => {
|
|
state.currentDomain = e.target.value;
|
|
loadDashboardData();
|
|
showNotification(`已切换到域名: ${state.currentDomain}`, 'info');
|
|
});
|
|
}
|
|
|
|
// Utility Functions
|
|
function showLoading() {
|
|
const loadingIndicator = document.getElementById('loadingIndicator');
|
|
if (loadingIndicator) {
|
|
loadingIndicator.classList.remove('hidden');
|
|
}
|
|
state.isLoading = true;
|
|
}
|
|
|
|
function hideLoading() {
|
|
const loadingIndicator = document.getElementById('loadingIndicator');
|
|
if (loadingIndicator) {
|
|
loadingIndicator.classList.add('hidden');
|
|
}
|
|
state.isLoading = false;
|
|
}
|
|
|
|
function showNotification(message, type = 'info') {
|
|
const notification = document.getElementById('notification');
|
|
if (!notification) return;
|
|
|
|
const messageEl = notification.querySelector('.message');
|
|
if (messageEl) {
|
|
messageEl.textContent = message;
|
|
}
|
|
|
|
notification.classList.remove('hidden');
|
|
|
|
// Auto-hide after 3 seconds
|
|
setTimeout(() => {
|
|
hideNotification();
|
|
}, 3000);
|
|
}
|
|
|
|
function hideNotification() {
|
|
const notification = document.getElementById('notification');
|
|
if (notification) {
|
|
notification.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function updateLastRefresh() {
|
|
const lastUpdateEl = document.getElementById('lastUpdate');
|
|
if (lastUpdateEl) {
|
|
const now = new Date();
|
|
const formatted = now.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
lastUpdateEl.textContent = formatted;
|
|
}
|
|
}
|
|
|
|
function generateDateLabels(days) {
|
|
const labels = [];
|
|
const now = new Date();
|
|
|
|
for (let i = days - 1; i >= 0; i--) {
|
|
const date = new Date(now);
|
|
date.setDate(date.getDate() - i);
|
|
labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
|
|
}
|
|
|
|
return labels;
|
|
}
|
|
|
|
function generateRandomData(count, min, max) {
|
|
const data = [];
|
|
let current = Math.floor((min + max) / 2);
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const change = Math.floor(Math.random() * 20) - 10;
|
|
current = Math.max(min, Math.min(max, current + change));
|
|
data.push(current);
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
// Command Execution (Integration with CLI)
|
|
function runCommand(command) {
|
|
showNotification(`执行命令: ${command}`, 'info');
|
|
|
|
// In a real implementation, this would execute the actual command
|
|
// For now, just simulate the action
|
|
console.log(`Executing command: ${command}`);
|
|
|
|
// Simulate command completion
|
|
setTimeout(() => {
|
|
showNotification(`命令完成: ${command}`, 'success');
|
|
}, 2000);
|
|
}
|
|
|
|
// Filter Buttons (for chart time periods)
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('filter-btn')) {
|
|
const period = e.target.dataset.period;
|
|
|
|
// Update active state
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
e.target.classList.add('active');
|
|
|
|
// Update chart data based on period
|
|
if (state.charts.citationTrend) {
|
|
const labels = generateDateLabels(parseInt(period));
|
|
state.charts.citationTrend.data.labels = labels;
|
|
state.charts.citationTrend.data.datasets.forEach(dataset => {
|
|
dataset.data = generateRandomData(parseInt(period), 100, 250);
|
|
});
|
|
state.charts.citationTrend.update();
|
|
}
|
|
|
|
showNotification(`已切换到 ${period} 天视图`, 'info');
|
|
}
|
|
});
|
|
|
|
// Keyboard Shortcuts
|
|
document.addEventListener('keydown', (e) => {
|
|
// Ctrl/Cmd + R to refresh
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
|
|
e.preventDefault();
|
|
loadDashboardData();
|
|
showNotification('数据已刷新', 'success');
|
|
}
|
|
|
|
// Number keys to switch views
|
|
if (e.key >= '1' && e.key <= '6') {
|
|
const views = ['overview', 'geo', 'competitors', 'content', 'automation', 'alerts'];
|
|
const viewIndex = parseInt(e.key) - 1;
|
|
if (views[viewIndex]) {
|
|
switchView(views[viewIndex]);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Auto-refresh (optional)
|
|
// setInterval(() => {
|
|
// loadDashboardData();
|
|
// }, 300000); // Refresh every 5 minutes
|
|
|
|
// Export functions (for future implementation)
|
|
function exportDashboard() {
|
|
console.log('Exporting dashboard...');
|
|
showNotification('导出功能开发中', 'info');
|
|
}
|
|
|
|
function printDashboard() {
|
|
window.print();
|
|
}
|
|
|
|
// Responsive chart resize
|
|
window.addEventListener('resize', () => {
|
|
Object.values(state.charts).forEach(chart => {
|
|
if (chart) {
|
|
chart.resize();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Service Worker registration (for PWA support - future)
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
// navigator.serviceWorker.register('/sw.js')
|
|
// .then(registration => console.log('SW registered'))
|
|
// .catch(error => console.log('SW registration failed'));
|
|
});
|
|
}
|
|
|
|
// Performance monitoring
|
|
window.addEventListener('load', () => {
|
|
const perfData = performance.timing;
|
|
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
|
|
console.log(`Page load time: ${pageLoadTime}ms`);
|
|
});
|
|
|
|
// Error handling
|
|
window.addEventListener('error', (e) => {
|
|
console.error('Dashboard error:', e);
|
|
showNotification('发生错误，请刷新页面', 'error');
|
|
});
|
|
|
|
// Export for debugging
|
|
window.dashboardDebug = {
|
|
state,
|
|
charts: state.charts,
|
|
loadData: loadDashboardData,
|
|
switchView,
|
|
runCommand
|
|
};
|