<!DOCTYPE html>
<html>
<head>
<title>文学意象深度解析系统</title>
<style>
/* 样式增强 */
.container { max-width: 1000px; margin: 20px auto; padding: 20px; }
.analysis-section {
margin: 20px 0;
padding: 15px;
border-left: 4px solid #007bff;
background: #f8f9fa;
}
.symbol-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.comparison-table td {
padding: 10px;
border: 1px solid #dee2e6;
vertical-align: top;
}
.theory-tag {
display: inline-block;
padding: 3px 8px;
background: #e9ecef;
border-radius: 3px;
margin: 5px 3px;
font-size: 0.9em;
}
.mind-map-node {
margin-left: 30px;
position: relative;
}
.mind-map-node::before {
content: "";
position: absolute;
left: -15px;
top: 10px;
width: 10px;
height: 1px;
background: #999;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="keyword" placeholder="输入文学意象关键词" style="width:300px; padding:8px">
<button onclick="showResult()" style="padding:8px 15px">深度解析</button>
<!-- 默认提示 -->
<div id="result" class="result">
<div class="default-prompt">
<h3>📖 文学意象解析指南</h3>
<p>请输入以下任意关键词体验深度解析：</p>
<div class="example-keywords">
<span class="example-keyword" onclick="fillInput('酒')">酒</span>
<span class="example-keyword" onclick="fillInput('黄河')">黄河</span>
<span class="example-keyword" onclick="fillInput('白发')">白发</span>
</div>
<p>支持功能：<br>
• 多维象征分析<br>
• 时空演变追踪<br>
• 对比诗学解读</p>
</div>
</div>
</div>
<script>
// 保留原有数据结构...
// 新增功能：示例关键词点击填充
function fillInput(word) {
document.getElementById("keyword").value = word;
showResult();
}
// 修改后的显示函数
function showResult() {
const keyword = document.getElementById("keyword").value.trim();
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (!keyword) {
// 保留默认提示
resultDiv.innerHTML = `
<div class="default-prompt">
<h3>📖 文学意象解析指南</h3>
<p>请输入以下任意关键词体验深度解析：</p>
<div class="example-keywords">
<span class="example-keyword" onclick="fillInput('酒')">酒</span>
<span class="example-keyword" onclick="fillInput('黄河')">黄河</span>
<span class="example-keyword" onclick="fillInput('白发')">白发</span>
</div>
</div>`;
return;
}
if (!data[keyword]) {
resultDiv.innerHTML = `
<div class="analysis-section">
<h3>⚠️ 未找到相关意象</h3>
<p>当前词库包含以下可解析意象：</p>
<div class="example-keywords">
${Object.keys(data).map(word => `
<span class="example-keyword" onclick="fillInput('${word}')">${word}</span>
`).join("")}
</div>
</div>`;
return;
}
// 保留原有解析逻辑...
}
</script>
<script>
// 增强后的数据结构
const data = {
"酒": {
meta: {
文学理论: ["抒情传统", "意象符号学", "狂欢理论"],
高频时期: ["魏晋南北朝", "盛唐", "宋代"]
},
象征体系: {
"解忧药": {
解析: "源自《诗经》'微我无酒，以敖以游'，发展至曹操'何以解忧，唯有杜康'确立疗愈功能",
例句: [
"岑参《凉州馆中与诸判官夜集》：一生大笑能几回，斗酒相逢须醉倒",
"白居易《问刘十九》：晚来天欲雪，能饮一杯无"
]
},
"豪情催化剂": {
解析: "结合游侠精神与酒神精神，在盛唐达到美学巅峰",
例句: [
"王翰《凉州词》：葡萄美酒夜光杯，欲饮琵琶马上催",
"李白《侠客行》：三杯吐然诺，五岳倒为轻"
]
}
},
时空演变: [
{ 时期: "先秦", 特点: "祭祀礼仪", 例句: "《楚辞·招魂》：瑶浆蜜勺，实羽觞些" },
{ 时期: "盛唐", 特点: "个性解放", 例句: "李白《将进酒》：钟鼓馔玉不足贵，但愿长醉不复醒" }
]
},
"黄河": {
mindMap: {
"自然母题": {
"力量崇拜": [
"李白《公无渡河》：黄河西来决昆仑，咆哮万里触龙门",
"刘禹锡《浪淘沙》：九曲黄河万里沙，浪淘风簸自天涯"
],
"时间隐喻": {
解析: "通过水的流动性构建线性时间观",
例句: "李白《将进酒》：君不见黄河之水天上来，奔流到海不复回"
}
},
"文化符号": {
"文明起源": "《左传》：江、汉、沮、漳，楚之望也",
"民族精神": "光未然《黄河颂》：啊！黄河！你是中华民族的摇篮"
}
},
美学特征: ["崇高美", "悲剧美", "沧桑美"]
},
"白发": {
对比分析: {
"空间呈现": {
"镜前突显": "李白《秋浦歌》：白发三千丈，缘愁似个长",
"战场惊现": "辛弃疾《破阵子》：了却君王天下事，赢得生前身后名。可怜白发生！"
},
"情感维度": {
"个体焦虑": "朝如青丝暮成雪（时间突变性）",
"历史焦虑": "杜牧《题禅院》：今日鬓丝禅榻畔，茶烟轻飏落花风"
}
},
修辞图谱: ["夸张", "借代", "意象并置"]
}
};
function showResult() {
const keyword = document.getElementById("keyword").value.trim();
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (!data[keyword]) {
resultDiv.innerHTML = `<div class="analysis-section">该意象暂未收录，可尝试：酒、黄河、白发</div>`;
return;
}
let html = `<h2 style="color:#2c3e50; border-bottom:2px solid #007bff">${keyword}意象深度解析</h2>`;
// 元数据分析
if (data[keyword].meta) {
html += `<div class="analysis-section">
<h3>📚 理论框架</h3>
${data[keyword].meta.文学理论.map(t => `<span class="theory-tag">${t}</span>`).join("")}
<p>高频出现时期：${data[keyword].meta.高频时期.join(" → ")}</p>
</div>`;
}
// 象征体系解析
if (data[keyword].象征体系) {
html += `<div class="analysis-section">
<h3>🔍 多维象征系统</h3>
<div class="symbol-grid">`;
for (const [symbol, details] of Object.entries(data[keyword].象征体系)) {
html += `<div>
<h4>${symbol}</h4>
<p>${details.解析}</p>
${details.例句 ? `<div class="poem">${details.例句.join("<br>")}</div>` : ""}
</div>`;
}
html += `</div></div>`;
}
// 思维导图增强版
if (keyword === "黄河") {
html += `<div class="analysis-section">
<h3>🌊 意象网络拓扑图</h3>`;
const buildMindMap = (node, depth=0) => {
let str = "";
for (const [key, value] of Object.entries(node)) {
str += `<div class="mind-map-node" style="margin-left:${depth*30}px">
<b>${key}</b>`;
if (typeof value === 'object') {
if (Array.isArray(value)) {
str += `<div class="poem">${value.join("<br>")}</div>`;
} else {
str += buildMindMap(value, depth+1);
}
} else {
str += `<div>${value}</div>`;
}
str += `</div>`;
}
return str;
}
html += buildMindMap(data[keyword].mindMap);
html += `</div>`;
}
// 对比分析表格
if (data[keyword].对比分析) {
html += `<div class="analysis-section">
<h3>⚖️ 对比诗学分析</h3>
<table class="comparison-table">`;
for (const [dimension, content] of Object.entries(data[keyword].对比分析)) {
html += `<tr>
<td width="120"><b>${dimension}</b></td>
<td>${typeof content === 'string' ? content :
Object.entries(content).map(([k,v]) =>
`<b>${k}</b>: ${v}`).join("<br>")}
</td>
</tr>`;
}
html += `</table></div>`;
}
resultDiv.innerHTML = html;
}
</script>
</body>
</html>
index.html
index.html