// 古诗词智能查询与解析器 - 主JavaScript文件 document.addEventListener('DOMContentLoaded', function() { // 初始化应用 initApp(); // 加载示例诗词数据 loadSamplePoetryData(); // 设置事件监听器 setupEventListeners(); }); // 应用初始化 function initApp() { console.log('古诗词智能解析器应用已启动'); // 设置当前年份 document.querySelector('.footer-bottom p').innerHTML = `© ${new Date().getFullYear()} 古诗词智能解析器 | 基于H5技术开发 | PWA支持`; // 初始化导航栏 initNavigation(); // 初始化模态框 initModal(); // 检查PWA支持 checkPWASupport(); } // 初始化导航栏 function initNavigation() { const menuToggle = document.getElementById('menuToggle'); const navLinks = document.querySelector('.nav-links'); if (menuToggle) { menuToggle.addEventListener('click', function() { navLinks.classList.toggle('active'); }); } // 平滑滚动到锚点 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { // 关闭移动端菜单 navLinks.classList.remove('active'); // 平滑滚动 window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // 更新活动链接 document.querySelectorAll('.nav-links a').forEach(link => { link.classList.remove('active'); }); this.classList.add('active'); } }); }); } // 初始化模态框 function initModal() { const modal = document.getElementById('poetryDetailModal'); const closeModalBtn = document.querySelector('.close-modal'); if (closeModalBtn) { closeModalBtn.addEventListener('click', function() { modal.classList.remove('active'); }); } // 点击模态框外部关闭 modal.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.remove('active'); } }); // ESC键关闭模态框 document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && modal.classList.contains('active')) { modal.classList.remove('active'); } }); } // 检查PWA支持 function checkPWASupport() { if ('serviceWorker' in navigator) { console.log('支持Service Worker,PWA功能可用'); // 注册Service Worker navigator.serviceWorker.register('/static/js/service-worker.js') .then(registration => { console.log('Service Worker 注册成功:', registration); }) .catch(error => { console.log('Service Worker 注册失败:', error); }); } } // 加载示例诗词数据 function loadSamplePoetryData() { const samplePoetry = [ { id: 1, title: "静夜思", author: "李白", dynasty: "唐", content: "床前明月光,疑是地上霜。\n举头望明月,低头思故乡。", type: "抒情", wordCount: "五言", tags: ["思乡", "月亮", "夜晚"], popularity: 95 }, { id: 2, title: "春晓", author: "孟浩然", dynasty: "唐", content: "春眠不觉晓,处处闻啼鸟。\n夜来风雨声,花落知多少。", type: "山水", wordCount: "五言", tags: ["春天", "自然", "风景"], popularity: 88 }, { id: 3, title: "水调歌头·明月几时有", author: "苏轼", dynasty: "宋", content: "明月几时有?把酒问青天。\n不知天上宫阙,今夕是何年。\n我欲乘风归去,又恐琼楼玉宇,高处不胜寒。\n起舞弄清影,何似在人间。", type: "抒情", wordCount: "词", tags: ["中秋", "月亮", "思念"], popularity: 92 }, { id: 4, title: "登鹳雀楼", author: "王之涣", dynasty: "唐", content: "白日依山尽,黄河入海流。\n欲穷千里目,更上一层楼。", type: "哲理", wordCount: "五言", tags: ["登高", "哲理", "壮丽"], popularity: 85 }, { id: 5, title: "望庐山瀑布", author: "李白", dynasty: "唐", content: "日照香炉生紫烟,遥看瀑布挂前川。\n飞流直下三千尺,疑是银河落九天。", type: "山水", wordCount: "七言", tags: ["瀑布", "自然", "壮丽"], popularity: 90 }, { id: 6, title: "江雪", author: "柳宗元", dynasty: "唐", content: "千山鸟飞绝,万径人踪灭。\n孤舟蓑笠翁,独钓寒江雪。", type: "山水", wordCount: "五言", tags: ["冬天", "孤独", "自然"], popularity: 87 } ]; // 渲染诗词卡片 renderPoetryCards(samplePoetry); } // 渲染诗词卡片 function renderPoetryCards(poetryList) { const poetryGrid = document.getElementById('poetryGrid'); if (!poetryGrid) return; poetryGrid.innerHTML = ''; poetryList.forEach(poetry => { const card = createPoetryCard(poetry); poetryGrid.appendChild(card); }); // 隐藏加载指示器 const loadingIndicator = document.getElementById('loadingIndicator'); if (loadingIndicator) { loadingIndicator.style.display = 'none'; } } // 创建诗词卡片 function createPoetryCard(poetry) { const card = document.createElement('div'); card.className = 'poetry-card fade-in'; card.dataset.id = poetry.id; card.innerHTML = `

${poetry.title}

${poetry.author} ${poetry.dynasty}
${poetry.content.replace(/\n/g, '
')}
${poetry.tags.map(tag => `${tag}`).join('')}
`; // 添加点击事件 card.addEventListener('click', function() { showPoetryDetail(poetry); }); return card; } // 显示诗词详情 function showPoetryDetail(poetry) { const modal = document.getElementById('poetryDetailModal'); const modalTitle = document.getElementById('modalTitle'); const modalBody = document.getElementById('modalBody'); if (!modal || !modalTitle || !modalBody) return; modalTitle.textContent = poetry.title; modalBody.innerHTML = `

${poetry.title}

${poetry.author} ${poetry.dynasty} ${poetry.type} ${poetry.wordCount}
原文:
${poetry.content}
现代汉语翻译:

${getTranslation(poetry)}

简要赏析:

${getBriefAnalysis(poetry)}

标签:
${poetry.tags.map(tag => `${tag}`).join('')}
`; // 更新按钮事件 const favoriteBtn = document.getElementById('favoriteBtn'); const analyzeBtn = document.getElementById('analyzeBtn'); const shareBtn = document.getElementById('shareBtn'); if (favoriteBtn) { favoriteBtn.onclick = function() { toggleFavorite(poetry.id); }; } if (analyzeBtn) { analyzeBtn.onclick = function() { startAIAnalysis(poetry); }; } if (shareBtn) { shareBtn.onclick = function() { sharePoetry(poetry); }; } // 显示模态框 modal.classList.add('active'); } // 获取翻译(示例) function getTranslation(poetry) { const translations = { 1: "明亮的月光洒在床前,好像地上泛起了一层白霜。\n我抬起头来,看那窗外天空中的明月,不由得低头沉思,想起远方的家乡。", 2: "春日里贪睡不知不觉天已破晓,搅乱我酣眠的是那啁啾的小鸟。\n昨天夜里风声雨声一直不断,那娇美的春花不知被吹落了多少?", 3: "明月从什么时候才开始出现的?我端起酒杯遥问苍天。\n不知道在天上的宫殿,今天晚上是何年何月。\n我想要乘御清风回到天上,又恐怕在美玉砌成的楼宇,受不住高耸九天的寒冷。\n翩翩起舞玩赏着月下清影,哪像是在人间。", 4: "夕阳依傍着西山慢慢地沉没,滔滔黄河朝着东海汹涌奔流。\n若想把千里的风光景物看够,那就要登上更高的一层城楼。", 5: "香炉峰在阳光的照射下生起紫色烟霞,从远处看去瀑布好似白色绢绸悬挂山前。\n高崖上飞腾直落的瀑布好像有几千尺,让人怀疑是银河从天上泻落到人间。", 6: "所有的山上,飞鸟的身影已经绝迹,所有道路都不见人的踪迹。\n江面孤舟上,一位披戴着蓑笠的老翁,独自在漫天风雪中垂钓。" }; return translations[poetry.id] || "翻译加载中..."; } // 获取简要赏析(示例) function getBriefAnalysis(poetry) { const analyses = { 1: "这首诗写的是在寂静的月夜思念家乡的感受。诗的前两句,是写诗人在作客他乡的特定环境中一刹那间所产生的错觉。后两句通过动作神态的刻画,深化思乡之情。", 2: "这首诗是唐代诗人孟浩然隐居鹿门山时所作。诗人抓住春天的早晨刚刚醒来时的一瞬间展开联想,描绘了一幅春天早晨绚丽的图景,抒发了诗人热爱春天、珍惜春光的美好心情。", 3: "此词是中秋望月怀人之作,表达了对胞弟苏辙的无限怀念。词人运用形象描绘手法,勾勒出一种皓月当空、亲人千里、孤高旷远的境界氛围,反衬自己遗世独立的意绪和往昔的神话传说融合一处,在月的阴晴圆缺当中,渗进浓厚的哲学意味。", 4: "这首诗写诗人在登高望远中表现出来的不凡的胸襟抱负,反映了盛唐时期人们积极向上的进取精神。前两句写所见,后两句写所感,把哲理与景物、情势溶化得天衣无缝。", 5: "这首诗形象地描绘了庐山瀑布雄奇壮丽的景色,反映了诗人对祖国大好河山的无限热爱。诗人用夸张的比喻和浪漫的想象,把瀑布的气势写得出神入化,给人以美的享受。", 6: "这首诗描绘了一幅江乡雪景图。山山是雪,路路皆白。飞鸟绝迹,人踪湮没。遐景苍茫,迩景孤冷。意境幽僻,情调凄寂。渔翁形象,精雕细琢,清晰明朗,完整突出。" }; return analyses[poetry.id] || "赏析加载中..."; } // 设置事件监听器 function setupEventListeners() { // 快速搜索按钮 const quickSearchBtn = document.getElementById('quickSearchBtn'); if (quickSearchBtn) { quickSearchBtn.addEventListener('click', performQuickSearch); } // 快速搜索输入框回车键 const quickSearchInput = document.getElementById('quickSearch'); if (quickSearchInput) { quickSearchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { performQuickSearch(); } }); } // 高级搜索按钮 const advancedSearchBtn = document.getElementById('advancedSearchBtn'); if (advancedSearchBtn) { advancedSearchBtn.addEventListener('click', performAdvancedSearch); } // 重置搜索按钮 const resetSearchBtn = document.getElementById('resetSearchBtn'); if (resetSearchBtn) { resetSearchBtn.addEventListener('click', resetSearch); } // 生成AI解析按钮 const generateAnalysisBtn = document.getElementById('generateAnalysisBtn'); if (generateAnalysisBtn) { generateAnalysisBtn.addEventListener('click', generateAIAnalysis); } // 快速筛选按钮 document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', function() { const dynasty = this.dataset.dynasty; const type = this.dataset.type; filterPoetry(dynasty, type); }); }); // 视图切换按钮 document.querySelectorAll('.view-btn').forEach(btn => { btn.addEventListener('click', function() { const view = this.dataset.view; switchView(view); }); }); // 排序选择 const sortBySelect = document.getElementById('sortBy'); if (sortBySelect) { sortBySelect.addEventListener('change', function() { sortPoetry(this.value); }); } // 学习功能按钮 document.getElementById('compareBtn')?.addEventListener('click', startComparison); document.getElementById('recommendBtn')?.addEventListener('click', getRecommendations); document.getElementById('qaBtn')?.addEventListener('click', startQA); document.getElementById('memorizeBtn')?.addEventListener('click', startMemorization); } // 执行快速搜索 function performQuickSearch() { const query = document.getElementById('quickSearch').value.trim(); if (!query) { alert('请输入搜索内容'); return; } showLoading(true); // 模拟API调用 setTimeout(() => { // 这里应该是实际的API调用 console.log('执行快速搜索:', query); // 显示搜索结果 showSearchResults(query); showLoading(false); }, 1000); } // 执行高级搜索 function performAdvancedSearch() { const title = document.getElementById('poetryTitle').value.trim(); const author = document.getElementById('author').value.trim(); const dynasty = document.getElementById('dynasty').value; const keywords = document.getElementById('keywords').value.trim(); const poetryType = document.getElementById('poetryType').value; const wordCount = document.getElementById('wordCount').value; // 构建搜索条件 const searchCriteria = { title, author, dynasty, keywords, poetryType, wordCount }; console.log('高级搜索条件:', searchCriteria); showLoading(true); // 模拟API调用 setTimeout(() => { // 这里应该是实际的API调用 showSearchResults('高级搜索'); showLoading(false); }, 1500); } // 重置搜索 function resetSearch() { document.getElementById('poetryTitle').value = ''; document.getElementById('author').value = ''; document.getElementById('dynasty').value = ''; document.getElementById('keywords').value = ''; document.getElementById('poetryType').value = ''; document.getElementById('wordCount').value = ''; // 重新加载所有诗词 loadSamplePoetryData(); } // 显示搜索结果 function showSearchResults(query) { const analysisResult = document.getElementById('analysisResult'); if (!analysisResult) return; analysisResult.innerHTML = `

搜索结果:${query}

找到 6 首相关诗词

1. 静夜思 - 李白 (唐代)

2. 春晓 - 孟浩然 (唐代)

3. 水调歌头·明月几时有 - 苏轼 (宋代)

4. 登鹳雀楼 - 王之涣 (唐代)

5. 望庐山瀑布 - 李白 (唐代)

6. 江雪 - 柳宗元 (唐代)

注:这是演示数据,实际应用中会连接到真实的诗词数据库和AI解析服务。

`; // 滚动到结果区域 document.getElementById('ai-analysis').scrollIntoView({ behavior: 'smooth' }); } // 显示/隐藏加载指示器 function showLoading(show) { const loadingIndicator = document.getElementById('loadingIndicator'); if (loadingIndicator) { loadingIndicator.style.display = show ? 'block' : 'none'; } } // 过滤诗词 function filterPoetry(dynasty, type) { showLoading(true); setTimeout(() => { console.log(`过滤诗词: 朝代=${dynasty}, 类型=${type}`); // 这里应该是实际的过滤逻辑 // 暂时重新加载所有数据 loadSamplePoetryData(); showLoading(false); }, 800); } // 切换视图 function switchView(view) { const poetryGrid = document.getElementById('poetryGrid'); if (!poetryGrid) return; // 更新按钮状态 document.querySelectorAll('.view-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.view === view); }); // 切换视图类 poetryGrid.className = view === 'list' ? 'poetry-list' : 'poetry-grid'; console.log(`切换到${view === 'list' ? '列表' : '网格'}视图`); } // 排序诗词 function sortPoetry(sortBy) { console.log(`按${sortBy}排序诗词`); // 这里应该是实际的排序逻辑 // 暂时只是重新加载 loadSamplePoetryData(); } // 生成AI解析 function generateAIAnalysis() { const purpose = document.getElementById('purpose').value; const usage = document.getElementById('usage').value; const targetAudience = document.getElementById('targetAudience').value; const depth = document.getElementById('depth').value; const focus = document.getElementById('focus').value; // 获取当前选中的诗词(如果有) const selectedPoetry = getSelectedPoetry(); if (!selectedPoetry) { alert('请先选择一首诗词(点击诗词卡片)'); return; } showLoading(true); // 模拟AI解析生成 setTimeout(() => { const analysisResult = document.getElementById('analysisResult'); if (!analysisResult) return; analysisResult.innerHTML = `

AI深度解析结果

${selectedPoetry.title} - ${selectedPoetry.author} (${selectedPoetry.dynasty})

目的: ${purpose} 场景: ${usage} 读者: ${targetAudience} 深度: ${depth} 重点: ${focus}
📖 诗词原文
${selectedPoetry.content}
🔍 ${focus}分析

${generateAIAnalysisContent(selectedPoetry, focus, depth)}

🎯 针对${targetAudience}的解读建议

${generateAudienceSpecificAdvice(targetAudience, selectedPoetry)}

💡 教学/学习建议

${generateLearningSuggestions(usage, purpose)}

📊 文学价值评估
艺术成就:
历史地位:
文化影响:
`; showLoading(false); // 滚动到结果区域 analysisResult.scrollIntoView({ behavior: 'smooth' }); }, 2000); } // 获取选中的诗词 function getSelectedPoetry() { // 这里应该从状态管理获取当前选中的诗词 // 暂时返回第一首作为示例 return { id: 1, title: "静夜思", author: "李白", dynasty: "唐", content: "床前明月光,疑是地上霜。\n举头望明月,低头思故乡。", type: "抒情", wordCount: "五言", tags: ["思乡", "月亮", "夜晚"] }; } // 生成AI分析内容 function generateAIAnalysisContent(poetry, focus, depth) { const focusTemplates = { "意境分析": `《${poetry.title}》通过${poetry.content.split(',')[0]}等意象,营造出一种${poetry.tags[0]}的意境。诗人巧妙运用空间对比和时间流逝的描写,使读者感受到${poetry.author}独特的情感表达方式。`, "修辞手法": `本诗运用了比喻、对仗等修辞手法。如"${poetry.content.split('。')[0]}"一句,通过${poetry.tags[1]}的比喻,增强了诗歌的形象性和感染力。`, "格律分析": `作为一首${poetry.wordCount}诗,本诗严格遵守古典诗歌的格律要求。平仄搭配得当,押韵工整,体现了${poetry.dynasty}时期诗歌的形式美。`, "历史背景": `创作于${poetry.dynasty}时期,反映了当时的社会文化背景。${poetry.author}在${poetry.tags[2]}的背景下,通过这首诗表达了...`, "文学价值": `《${poetry.title}》在中国文学史上具有重要地位,对后世诗歌创作产生了深远影响。其${depth}的文学价值体现在...`, "综合解析": `从多个角度分析,《${poetry.title}》展现了${poetry.author}高超的艺术造诣。在意境营造、修辞运用、格律把握等方面都达到了很高水平。` }; return focusTemplates[focus] || "AI解析内容生成中..."; } // 生成读者特定建议 function generateAudienceSpecificAdvice(audience, poetry) { const adviceTemplates = { "中小学生": `对于中小学生,建议重点理解诗词的字面意思和基本情感。可以通过绘画、朗诵等方式增强对"${poetry.tags[0]}"主题的理解。`, "大学生": `大学生可以深入分析诗词的文学技巧和历史背景,探讨${poetry.author}的创作风格及其在文学史上的地位。`, "文学爱好者": `建议对比阅读${poetry.author}的其他作品,研究其艺术特色的发展变化,深入探讨${poetry.dynasty}诗歌的特点。`, "研究人员": `可以从学术角度进行深入研究,关注版本校勘、注释考证、文学批评等多个维度,挖掘诗词的深层文化内涵。`, "普通读者": `建议从情感共鸣入手,欣赏诗词的意境美和语言美,不必过于追求学术性的分析。` }; return adviceTemplates[audience] || "根据读者特点提供个性化解读建议。"; } // 生成学习建议 function generateLearningSuggestions(usage, purpose) { const suggestionTemplates = { "课堂教学": `1. 课前预习:了解诗人生平和创作背景\n2. 课堂讲解:重点分析诗词意象和情感\n3. 课后拓展:相关诗词对比阅读\n4. 实践活动:诗词朗诵或创作练习`, "自学研究": `1. 建立知识框架:了解${purpose}的基本方法\n2. 深度阅读:查阅相关文献和注释\n3. 笔记整理:记录关键见解和疑问\n4. 实践应用:尝试撰写小论文或赏析文章`, "文学创作": `1. 模仿练习:学习诗词的意象运用\n2. 技巧分析:研究修辞手法和格律\n3. 创作实践:尝试创作类似主题的诗歌\n4. 修改完善:反复推敲字句和意境`, "文化传播": `1. 通俗化解读:用现代语言解释古典诗词\n2. 多媒体呈现:结合图片、音频等媒介\n3. 互动设计:设计问答、游戏等互动环节\n4. 社交媒体:制作易于传播的诗词卡片`, "考试备考": `1. 考点梳理:明确常考知识点\n2. 真题练习:熟悉题型和答题技巧\n3. 记忆方法:使用联想记忆等技巧\n4. 模拟测试:进行限时练习和评估` }; return suggestionTemplates[usage] || "根据使用场景提供具体的学习建议。"; } // 切换收藏状态 function toggleFavorite(poetryId) { const favoriteBtn = document.getElementById('favoriteBtn'); const isFavorite = favoriteBtn.classList.contains('favorited'); if (isFavorite) { favoriteBtn.innerHTML = ' 收藏'; favoriteBtn.classList.remove('favorited'); alert('已取消收藏'); } else { favoriteBtn.innerHTML = ' 已收藏'; favoriteBtn.classList.add('favorited'); alert('已添加到收藏夹'); } console.log(`诗词ID ${poetryId} 收藏状态: ${!isFavorite ? '已收藏' : '已取消'}`); } // 开始AI分析 function startAIAnalysis(poetry) { // 设置当前诗词 console.log('开始AI分析:', poetry.title); // 滚动到AI分析区域 document.getElementById('ai-analysis').scrollIntoView({ behavior: 'smooth' }); // 显示提示 alert(`已选择《${poetry.title}》,请在AI解析区域设置参数并点击"生成AI解析"按钮。`); } // 分享诗词 function sharePoetry(poetry) { const shareText = `分享一首古诗词:《${poetry.title}》 - ${poetry.author} (${poetry.dynasty})\n\n${poetry.content}\n\n来自古诗词智能解析器`; if (navigator.share) { navigator.share({ title: poetry.title, text: shareText, url: window.location.href }); } else { // 复制到剪贴板 navigator.clipboard.writeText(shareText).then(() => { alert('诗词内容已复制到剪贴板,可以粘贴到其他应用分享!'); }); } } // 开始对比分析 function startComparison() { alert('对比分析功能:请选择两首诗词进行对比。\n\n演示版本中,此功能需要连接到实际的AI对比分析服务。'); } // 获取推荐 function getRecommendations() { alert('相似推荐功能:基于当前诗词推荐主题、风格相似的作品。\n\n演示版本中,此功能需要连接到实际的推荐算法服务。'); } // 开始问答 function startQA() { alert('知识问答功能:AI问答关于诗词的各类问题。\n\n演示版本中,此功能需要连接到实际的AI问答服务。'); } // 开始背诵 function startMemorization() { alert('背诵助手功能:提供填空测试、顺序排序等背诵辅助。\n\n演示版本中,此功能需要连接到实际的背诵算法服务。'); }