<script setup>
import HelloWorld from './components/HelloWorld.vue'
import MarkdownRenderer from './components/MarkdownRenderer.vue'

const markdownContent = `
《三国演义》是中国古典四大名著之一，由元末明初小说家罗贯中所著，以东汉末年至西晋初年的历史为背景，描绘了魏、蜀、吴三国鼎立时期的政治、军事斗争和人物传奇。以下是其核心内容的总结：

---

### **一、背景与主线**
1. **时代背景**：  
   东汉末年，宦官专权、黄巾起义爆发，朝廷衰微，群雄割据。董卓乱政后，诸侯混战，最终形成曹操（魏）、刘备（蜀）、孙权（吴）三分天下的格局。

2. **主线脉络**：  
   - **群雄逐鹿**（1-40回）：从黄巾起义到官渡之战，曹操统一北方。  
   - **三国鼎立**（41-80回）：赤壁之战后三分天下，刘备取西川，关羽失荆州。  
   - **走向统一**（81-120回）：诸葛亮北伐，司马氏崛起，魏灭蜀、晋代魏，最终西晋统一。

---

### **二、核心人物与事件**
1. **蜀汉阵营**：  
   - **刘备**：以仁德立身，三顾茅庐得诸葛亮辅佐，建立蜀汉。  
   - **诸葛亮**：鞠躬尽瘁，六出祁山北伐，病逝五丈原（“出师未捷身先死”）。  
   - **关羽**：忠义无双，温酒斩华雄、千里走单骑，后败走麦城被杀。  
   - **张飞**：勇猛暴躁，长坂坡退敌，最终被部下所害。

2. **曹魏阵营**：  
   - **曹操**：枭雄形象，“宁教我负天下人”，挟天子以令诸侯，奠定魏国基业。  
   - **司马懿**：隐忍善谋，抵御诸葛亮北伐，家族最终篡魏建晋。

3. **东吴阵营**：  
   - **孙权**：少年继位，联刘抗曹（赤壁之战），晚年多疑。  
   - **周瑜**：风流儒将，“既生瑜何生亮”，主导赤壁火攻。  

4. **经典战役**：  
   - **官渡之战**（曹操以少胜多灭袁绍）。  
   - **赤壁之战**（孙刘联军火烧曹船，奠定三分天下）。  
   - **夷陵之战**（刘备伐吴惨败，火烧连营）。  

---

### **三、主题思想**
1. **天下大势，分久必合**：  
   通过三国兴衰，揭示历史循环与统一的必然性。  
2. **忠义与权谋**：  
   推崇关羽的“忠义”，批判曹操的“奸雄”，展现人性复杂性。  
3. **英雄悲歌**：  
   诸葛亮、周瑜等人物虽才华横溢，却难逃命运束缚，体现悲剧色彩”。

---

### **四、艺术特色**
1. **七实三虚**：  
   基于《三国志》史实，融合民间传说与艺术虚构（如“草船借箭”“空城计”）。  
2. **人物刻画鲜明**：  
   “智绝”诸葛亮、“奸绝”曹操、“义绝”关羽，成为文学经典形象。  
3. **战争描写宏大**：  
   注重战略与人物结合，如赤壁之战层层铺垫，波澜壮阔。

---

### **五、名句与典故**
- **名句**：  
  “天下大势，分久必合，合久必分。”  
  “鞠躬尽瘁，死而后已。”  
- **典故**：  
  三顾茅庐、刮骨疗毒、舌战群儒、乐不思蜀。

---

### **六、影响与地位**
《三国演义》是中国历史小说的巅峰之作，对东亚文化影响深远，衍生出大量戏曲、影视、游戏作品，其权谋智慧与人物精神至今被广泛传颂。

**总结**：一部英雄史诗，半部人间权谋。三国故事不仅是历史，更是人性与理想的永恒镜像。
`
</script>

<template>
  <main>
    <div class="markdown-demo">
      <MarkdownRenderer :content="markdownContent" />
    </div>
  </main>
</template>

<style scoped>
.markdown-demo {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: white;
}
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
