// 古诗词智能查询与解析器 - 主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.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.content}
现代汉语翻译:
${getTranslation(poetry)}
简要赏析:
${getBriefAnalysis(poetry)}
`;
// 更新按钮事件
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.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演示版本中,此功能需要连接到实际的背诵算法服务。');
}