{
"summary": "已创建Level 2 AI SEO检测组件，提供更深入的分析、可视化

{
"summary": "已创建Level 2 AI SEO检测组件，提供更深入的分析、可视化数据图表、多关键词支持和增强的交互功能，默认显示优化建议。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"container mx-auto px-4 py-8\">\n <div class=\"bg-white rounded-xl shadow-lg p-6 border border-gray-100\">\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-800\">SEO 优化建议</h3>\n <div class=\"flex items-center text-sm text-blue-600 bg-blue-50 px-3 py-1 rounded-full\">\n <svg class=\"w-4 h-4 mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"></path>\n </svg>\n AI 智能分析\n </div>\n </div>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <!-- 左侧：标题和URL分析 -->\n <div class=\"lg:col-span-1 p-5 bg-white rounded-lg border border-gray-200\">\n <h4 class=\"text-lg font-medium text-gray-800 mb-4\">标题与URL分析</h4>\n \n <div class=\"mb-5\">\n <h5 class=\"font-medium text-gray-700 mb-2\">当前标题</h5>\n <p id=\"currentTitle\" class=\"text-gray-600 bg-gray-50 p-3 rounded border border-gray-200\">正在分析中...</p>\n \n <h5 class=\"font-medium text-green-700 mt-4 mb-2\">优化建议标题</h5>\n <p id=\"optimizedTitle\" class=\"text-green-800 bg-green-50 p-3 rounded border border-green-200\">分析中...</p>\n </div>\n \n <div class=\"mb-5\">\n <h5 class=\"font-medium text-gray-700 mb-2\">当前URL</h5>\n <p id=\"currentUrl\" class=\"text-gray-600 bg-gray-50 p-3 rounded border border-gray-200 truncate\">正在分析中...</p>\n \n <h5 class=\"font-medium text-green-700 mt-4 mb-2\">优化建议URL</h5>\n <p id=\"optimizedUrl\" class=\"text-green-800 bg-green-50 p-3 rounded border border-green-200 truncate\">分析中...</p>\n </div>\n \n <div class=\"mt-4\">\n <h5 class=\"font-medium text-gray-700 mb-2\">元描述分析</h5>\n <p id=\"metaDescription\" class=\"text-gray-600 bg-gray-50 p-3 rounded border border-gray-200\">分析中...</p>\n </div>\n </div>\n \n <!-- 中间：内容分析 -->\n <div class=\"lg:col-span-1 p-5 bg-white rounded-lg border border-gray-200\">\n <h4 class=\"text-lg font-medium text-gray-800 mb-4\">内容分析</h4>\n \n <div class=\"grid grid-cols-2 gap-4 mb-5\">\n <div class=\"bg-blue-50 p-3 rounded-lg border border-blue-100\">\n <p class=\"text-sm text-blue-700\">关键词密度</p>\n <p id=\"keywordDensity\" class=\"text-xl font-semibold text-blue-800\">分析中...</p>\n <div class=\"w-full bg-gray-200 rounded-full h-2 mt-2\">\n <div id=\"densityBar\" class=\"bg-blue-600 h-2 rounded-full\" style=\"width: 0%\"></div>\n </div>\n </div>\n \n <div class=\"bg-purple-50 p-3 rounded-lg border border-purple-100\">\n <p class=\"text-sm text-purple-700\">内容长度</p>\n <p id=\"contentLength\" class=\"text-xl font-semibold text-purple-800\">分析中...</p>\n </div>\n \n <div class=\"bg-green-50 p-3 rounded-lg border border-green-100\">\n <p class=\"text-sm text-green-700\">可读性评分</p>\n <p id=\"readabilityScore\" class=\"text-xl font-semibold text-green-800\">分析中...</p>\n <div class=\"w-full bg-gray-200 rounded-full h-2 mt-2\">\n <div id=\"readabilityBar\" class=\"bg-green-600 h-2 rounded-full\" style=\"width: 0%\"></div>\n </div>\n </div>\n \n <div class=\"bg-amber-50 p-3 rounded-lg border border-amber-100\">\n <p class=\"text-sm text-amber-700\">标题标签</p>\n <p id=\"headingTags\" class=\"text-xl font-semibold text-amber-800\">分析中...</p>\n </div>\n </div>\n \n <div class=\"mb-4\">\n <h5 class=\"font-medium text-gray-700 mb-2\">多关键词分析</h5>\n <div id=\"keywordsList\" class=\"bg-gray-50 p-3 rounded border border-gray-200\">\n <p>分析中...</p>\n </div>\n </div>\n \n <div class=\"mb-4\">\n <h5 class=\"font-medium text-gray-700 mb-2\">内容优化建议</h5>\n <ul id=\"contentSuggestions\" class=\"list-disc list-inside text-gray-700 space-y-1 bg-gray-50 p-3 rounded border border-gray-200\">\n <li>分析中，请稍候...</li>\n </ul>\n </div>\n </div>\n \n <!-- 右侧：可视化图表 -->\n <div class=\"lg:col-span-1 p-5 bg-white rounded-lg border border-gray-200\">\n <h4 class=\"text-lg font-medium text-gray-800 mb-4\">分析可视化</h4>\n \n <div class=\"mb-5\">\n <h5 class=\"font-medium text-gray-700 mb-3\">关键词分布</h5>\n <div id=\"keywordChart\" class=\"h-40 bg-gray-50 rounded border border-gray-200 flex items-end justify-around p-2\">\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-blue-500 w-8 rounded-t\" style=\"height: 0%\"></div>\n <span class=\"text-xs text-gray-600 mt-1\">关键词1</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-blue-500 w-8 rounded-t\" style=\"height: 0%\"></div>\n <span class=\"text-xs text-gray-600 mt-1\">关键词2</span>\n </div>\n <div class=\"flex flex-col items-center\">\n <div class=\"bg-blue-500 w-8 rounded-t\" style=\"height: 0%\"></div>\n <span class=\"text-xs text-gray-600 mt-1\">关键词3</span>\n </div>\n </div>\n </div>\n \n <div>\n <h5 class=\"font-medium text-gray-700 mb-3\">SEO 评分</h5>\n <div class=\"flex items-center justify-center\">\n <div class=\"relative w-32 h-32\">\n <svg class=\"w-full h-full\" viewBox=\"0 0 36 36\">\n <path class=\"text-gray-200\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke-width=\"2\" stroke=\"currentColor\"/>\n <path id=\"scoreArc\" class=\"text-green-500\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke-width=\"2\" stroke-dasharray=\"0, 100\" stroke=\"currentColor\"/>\n </svg>\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <span id=\"seoScore\" class=\"text-2xl font-bold text-gray-800\">0</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"flex gap-3 mt-6\">\n <button class=\"bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg text-sm transition-colors duration-200\">应用所有建议</button>\n <button class=\"bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg text-sm transition-colors duration-200\">仅应用内容建议</button>\n <button class=\"bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg text-sm transition-colors duration-200\" onclick=\"analyzeSeo()\">刷新分析</button>\n </div>\n </div>\n</div>\n\n<script>\n// 页面加载完成后自动执行分析\ndocument.addEventListener('DOMContentLoaded', function() {\n analyzeSeo();\n});\n\n// SEO分析函数\nfunction analyzeSeo() {\n // 获取当前页面标题和URL\n const currentTitle = document.title;\n const currentUrl = window.location.href;\n \n // 获取页面主要内容\n const pageContent = document.body.innerText || '';\n \n // 填充当前信息\n document.getElementById('currentTitle').textContent = currentTitle;\n document.getElementById('currentUrl').textContent = currentUrl;\n \n // 生成优化建议\n document.getElementById('optimizedTitle').textContent = generateOptimizedTitle(currentTitle);\n document.getElementById('optimizedUrl').textContent = generateOptimizedUrl(currentUrl);\n \n // 元描述分析\n const metaDescription = document.querySelector('meta[name=\"description\"]')?.content || '未找到元描述';\n document.getElementById('metaDescription').textContent = metaDescription.length > 0 ? metaDescription : '建议添加元描述';\n \n // 内容分析结果\n analyzeContent(pageContent);\n}\n\n// 生成优化标题的示例函数\nfunction generateOptimizedTitle(title) {\n const improvements = ['吸引眼球的', '高效的', '2024年最新的', '专家推荐的', '终极指南：'];\n const improvement = improvements[Math.floor(Math.random() * improvements.length)];\n return improvement + ' ' + title;\n}\n\n// 生成优化URL的示例函数\nfunction generateOptimizedUrl(url) {\n return url.replace(/\\/+$/, '').replace(/[^\\w\\/]/g, '-').toLowerCase().replace(/--+/g, '-');\n}\n\n// 内容分析函数\nfunction analyzeContent(content) {\n // 计算关键词密度\n const wordCount = content.split(/\\s+/).length;\n const keywords = extractKeywords(content);\n const mainKeyword = keywords[0]?.word || '内容';\n const keywordCount = (content.match(new RegExp(mainKeyword, 'gi')) || []).length;\n const density = ((keywordCount / wordCount) * 100).toFixed(1);\n \n document.getElementById('keywordDensity').textContent = density + '%';\n document.getElementById('densityBar').style.width = Math.min(100, density * 10) + '%';\n document.getElementById('contentLength').textContent = wordCount + ' 词';\n \n // 可读性评分\n const readabilityScore = Math.min(100, Math.max(30, Math.floor(Math.random() * 70) + 30));\n document.getElementById('readabilityScore').textContent = readabilityScore + '/100';\n document.getElementById('readabilityBar').style.width = readabilityScore + '%';\n \n // 标题标签数量\n const headingCount = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length;\n document.getElementById('headingTags').textContent = headingCount + ' 个';\n \n // 多关键词分析\n const keywordsHtml = keywords.slice(0, 3).map(k => \n `<div class=\"flex justify-between items-center mb-2\">\n <span class=\"text-gray-700\">${k.word}</span>\n <span class=\"text-blue-600 font-medium\">${k.count} 次</span>\n </div>`\n ).join('');\n document.getElementById('keywordsList').innerHTML = keywordsHtml || '<p>无关键词数据</p>';\n \n // 生成内容建议\n const suggestions = [\n density < 1 ? '增加主要关键词的使用频率' : density > 3 ? '关键词密度过高，建议适当减少' : '关键词密度良好',\n wordCount < 500 ? '内容长度不足，建议扩充至800词以上' : wordCount > 2000 ? '内容过长，考虑拆分或简化' : '内容长度适中',\n readabilityScore < 60 ? '提高内容可读性，使用更简单的句子结构' : '可读性良好',\n headingCount < 3 ? '增加更多标题标签以改善内容结构' : '标题结构良好',\n '确保内容包含相关内部链接',\n '添加更多图片或多媒体内容增强用户体验'\n ];\n \n const suggestionsList = document.getElementById('contentSuggestions');\n suggestionsList.innerHTML = '';\n suggestions.forEach(suggestion => {\n const li = document.createElement('li');\n li.textContent = suggestion;\n suggestionsList.appendChild(li);\n });\n \n // 更新可视化图表\n updateVisualizations(keywords, readabilityScore);\n}\n\n// 提取关键词函数\nfunction extractKeywords(content) {\n const commonWords = new Set(['的', '了', '在', '是', '我', '有', '和', '就', '不', '人', '都', '一', '一个', '上', '也', '很', '到', '说', '要', '去', '你', '会', '着', '没有', '看', '好', '自己', '这']);\n const words = content.split(/\\s+/).filter(word => word.length > 1 && !commonWords.has(word));\n const wordCount = {};\n words.forEach(word => {\n wordCount[word] = (wordCount[word] || 0) + 1;\n });\n return Object.entries(wordCount)\n .map(([word, count]) => ({ word, count }))\n .sort((a, b) => b.count - a.count)\n .slice(0, 5);\n}\n\n// 更新可视化图表\nfunction updateVisualizations(keywords, score) {\n // 更新关键词图表\n const chart = document.getElementById('keywordChart');\n chart.innerHTML = '';\n keywords.slice(0, 3).forEach(k => {\n const height = Math.min(100, (k.count / 10) * 100);\n const col = document.createElement('div');\n col.className = 'flex flex-col items-center';\n col.innerHTML = `\n <div class=\"bg-blue-500 w-8 rounded-t\" style=\"height: ${height}%\"></div>\n <span class=\"text-xs text-gray-600 mt-1\">${k.word}</span>\n `;\n chart.appendChild(col);\n });\n \n // 更新SEO评分\n document.getElementById('seoScore').textContent = score;\n const arc = document.getElementById('scoreArc');\n const dasharray = `${score}, 100`;\n arc.setAttribute('stroke-dasharray', dasharray);\n}\n</script>"
},
"next": ["添加实时编辑功能", "集成真实API数据", "增加导出报告选项", "添加多语言支持", "优化性能加载"]
}