feat(docs): 删除过时的文档示例并更新首页内容

- 移除不再使用的 API 示例文档和 Markdown 示例文档
- 更新首页功能介绍，简化描述，提升可读性
- 调整样式以优化用户体验

Author: Encaik

packages/docs/.vitepress/config.mts

@@ -1,28 +1,29 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from 'vitepress';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "Simple-Notation Docs",
-  description: "Simple-Notation Docs",
+  title: '简音创作教程',
+  description: '简音创作网站使用教程，及SimpleNotation库使用教程',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
+      { text: '首页', link: '/' },
+      { text: '网站教程', link: '/site-tutorial/module' },
     ],
 
     sidebar: [
       {
-        text: 'Examples',
+        text: '网站教程',
         items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
+          { text: '模块介绍', link: '/site-tutorial/module' },
+          { text: '语法教程', link: '/site-tutorial/syntax' },
+        ],
+      },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
-  }
-})
+      { icon: 'github', link: 'https://github.com/Encaik/simple-notation' },
+      { icon: 'npm', link: 'https://www.npmjs.com/package/simple-notation' },
+    ],
+  },
+});

packages/docs/api-examples.md

@@ -16,90 +16,117 @@ hero:
 
 features:
   - icon: 🎼
-    title: 一键成谱，创作零门槛
+    title: 一键成谱
     details: |
-      - **文本转乐谱**: 输入文本，秒转专业乐谱，告别复杂操作。
-      - **多格式支持**: 自由选择生成简谱、六线谱（吉他/尤克里里）。
-      - **随心定制**: 和弦显示、谱面宽高、边距等细节由你掌控。
+      - 文本秒转乐谱，创作零门槛
+      - 支持简谱/六线谱，随心定制
   - icon: 🎹
-    title: 听见创作，看见演奏
+    title: 沉浸式演奏
     details: |
-      - **沉浸式播放**: 同步显示钢琴、吉他、口琴动态面板，直观学习。
-      - **音色与面板联动**: 切换音色，乐器面板自动匹配更新。
-      - **精准播放控制**: 支持移调、分轨播放与变速，是排练学习的助手。
+      - 动态乐器面板，音色联动
+      - 分轨、变速、移调，精准控制
   - icon: 🛠️
-    title: 高效创作工坊
+    title: 智能编辑
     details: |
-      - **流畅在线编辑器**: 轻松编辑音符、休止符、连音线等。
-      - **文件导入辅助**: 上传MIDI/MP3作为参考，辅助手动扒谱或改编。
-      - **音高检测与K歌**: 开启麦克风实时检测音高，K歌模式带音高反馈。
+      - 流畅编辑音符、连音线等
+      - 支持MIDI/MP3导入，音高检测
   - icon: 📚
-    title: 精选乐谱库
-    details: 内置精选实用乐谱（经典片段、练习曲等），点击即可编辑、播放、学习，助力日常练习与灵感激发。
+    title: 乐谱库
+    details: |
+      - 内置精选乐谱，点击即用
+      - 一键编辑、播放、学习
   - icon: 📥
-    title: 自由流转，轻松输出
+    title: 输出无忧
     details: |
-      - **无缝衔接**: 支持乐谱导入/导出，方便协作。
-      - **高清打印**: 一键高清打印，随时分享纸质乐谱。
+      - 导入导出，协作无缝
+      - 高清打印，随时分享
 ---
 
 <style>
+/* audience-section 区块整体渐变背景和居中 */
 .audience-section {
-  max-width: 960px;
-  margin: 40px auto;
+  max-width: 100vw;
+  margin: 48px 0 0 0;
+  padding: 48px 0 56px 0;
   text-align: center;
 }
+.audience-section h2 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 32px;
+  letter-spacing: 1px;
+}
 .audience-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 16px;
-  margin-top: 24px;
+  gap: 28px;
+  margin-top: 0;
 }
 .audience-card {
-  background-color: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 16px;
-  min-width: 180px;
-  flex: 1;
-  max-width: 220px;
-  transition: border-color 0.25s, background-color 0.25s;
+  background: #fff;
+  border: 2px solid #7b5aff;
+  border-radius: 18px;
+  padding: 28px 18px 22px 18px;
+  min-width: 200px;
+  max-width: 240px;
+  flex: 1 1 200px;
+  box-shadow: 0 2px 12px 0 rgba(123,90,255,0.08);
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  position: relative;
+  overflow: hidden;
 }
 .audience-card:hover {
-  border-color: var(--vp-c-brand);
+  transform: translateY(-8px) scale(1.04);
+  box-shadow: 0 8px 32px 0 rgba(255,107,61,0.18);
+  border-color: #ff6b3d;
+}
+.audience-card .icon {
+  font-size: 2.2rem;
+  margin-bottom: 10px;
+  display: block;
 }
 .audience-card h4 {
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0 0 4px 0;
-  color: var(--vp-c-brand-dark);
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 0 0 6px 0;
+  color: #7b5aff;
 }
 .audience-card p {
-  font-size: 14px;
+  font-size: 1rem;
   margin: 0;
-  color: var(--vp-c-text-2);
+  color: #444;
+  letter-spacing: 0.2px;
+}
+@media (max-width: 900px) {
+  .audience-grid { flex-direction: column; align-items: center; }
+  .audience-card { max-width: 320px; min-width: 0; }
 }
 </style>
 
+<!-- audience-section 用于突出目标用户，采用渐变背景和主题色卡片 -->
 <div class="audience-section">
   <h2>✨ 为热爱音乐的你而生</h2>
   <div class="audience-grid">
     <div class="audience-card">
+      <span class="icon">💡</span>
       <h4>创作者</h4>
-      <p>快速捕捉灵感，高效编辑试听。</p>
+      <p>灵感速记，乐谱即刻成型。</p>
     </div>
     <div class="audience-card">
+      <span class="icon">📖</span>
       <h4>学习者</h4>
-      <p>看谱+听音+学指法，三位一体突破瓶颈！</p>
+      <p>看谱、听音、学指法，三合一突破瓶颈。</p>
     </div>
     <div class="audience-card">
+      <span class="icon">👩‍🏫</span>
       <h4>教师</h4>
-      <p>便捷生成教学素材，直观演示演奏技法。</p>
+      <p>高效生成教学素材，直观演示技法。</p>
     </div>
     <div class="audience-card">
+      <span class="icon">🎤</span>
       <h4>爱好者</h4>
-      <p>玩转乐谱、K歌练唱，探索音乐乐趣！</p>
+      <p>K歌练唱，玩转乐谱，探索音乐乐趣！</p>
     </div>
   </div>
 </div>

packages/docs/index.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# 模块介绍
+
+本页面将介绍简音创作网站的主要功能模块，帮助用户快速了解各部分的用途和使用方法。
+
+## 1. 乐谱编辑模块
+
+- 支持简谱、五线谱等多种记谱方式。
+- 提供可视化编辑界面，支持拖拽、快捷键操作。
+- 可导入/导出多种格式（如 JSON、ABC 等）。
+
+## 2. 乐器选择与音色模块
+
+- 内置钢琴、吉他、手风琴等多种乐器音色。
+- 支持试听、切换乐器，适配不同演奏需求。
+- 音频采样高质量，支持多种格式（mp3、ogg、wav）。
+
+## 3. 音频播放与导出模块
+
+- 支持乐谱实时播放，自动滚动。
+- 可导出音频文件，便于分享和二次创作。
+- 支持节奏、速度、音量等参数调整。
+
+## 4. 歌词与注释编辑模块
+
+- 支持歌词同步编辑，自动对齐音符。
+- 可添加注释、标记，便于教学和交流。
+
+## 5. 其他辅助功能
+
+- 支持多平台浏览器访问，响应式设计。
+- 内置示例乐谱和教程，便于新手上手。
+- 支持自定义主题、快捷键等个性化设置。
+
+## 典型使用流程
+
+1. 选择或新建乐谱，编辑音符与歌词。
+2. 选择乐器音色，试听效果。
+3. 保存或导出乐谱/音频文件。
+4. 可将作品分享到社区或导入到其他音乐软件。
+
+## 相关链接
+
+- [语法教程](/site-tutorial/syntax)
+- [SimpleNotation 库文档](https://www.npmjs.com/package/simple-notation)
+- [项目源码](https://github.com/Encaik/simple-notation)