Markdown Previewer SPA

项目介绍

这是一个基于完全浏览器端技术（无服务端解析）的纯静态单页面应用（SPA）。本应用允许用户通过拖拽本地的 Markdown 文件直接在浏览器中进行高质量预览。

该项目基于 Cloudflare Pages 架构，可以一键部署为全球加速的静态网页。

核心功能

1. 纯前端解析

   • 依赖 marked 进行 Markdown 语法解析为 HTML。
   • 依赖 highlight.js 实现包含多种主流语言的代码高亮。
   • 依赖 dompurify 提供 XSS 安全过滤，确保直接渲染拖拽传入或导入的文件依然安全可靠。

2. 强大的多标签系统与右键菜单

   • 采用顶部标签页（Tabs）导航，拖入自动全屏展示 Markdown 文件内容。
   • 打开多个文档自动支持换行（Wrap）显示，告别横向滚动的局限。
   • 所有标签默认标题截断超出20个字符部分以保证界面整洁，悬浮时可查看完整名称。
   • 标签栏支持在标题上右键唤出菜单，支持一键关闭全部以及关闭其他全部的聚合快捷操作。

3. 个性化主题切换 (Theme Selector)

   • 导航栏最左侧内置主题调色板按钮。
   • 支持实时切换 6 款精心打磨的风格（极客专属的幻彩深色、幻彩浅色、极简亮白、清新淡绿、优雅淡紫、极客深色等配色模板）。
   • 【优化设计】全新升级基于 data-mode 的双模架构层，全面修正代码高亮区域文字泛黑的阅读障碍，无论什么主题背景，正文和代码块始终保持极高对比度。
   • 用户所选主题会被自动缓存在本地 localStorage 中，系统会记住您的偏好。

4. 拖拽与进度自动保存记忆 (State Persistence)

   • 实现全局拖拽事件拦截（Drag & Drop）。
   • 用户将系统的 .md 文件拖拽至浏览器窗口释放，即可立刻加载（纯本地读取）。
   • 浏览器状态记忆：依托本地 IndexedDB 和原生 File System Access API 控制，系统会自动记住并序列化保存您所打开的文件句柄（File Handle）。刷新页面或下次访问时，只需点击文件重新激活授权，就能无缝查看底层最新修改内容！不会发生由于缓存内容导致的错误读取。

5. 现代化 UI 与交互设计

   • 界面整体采用 Vanilla CSS，应用大量毛玻璃材质（Glassmorphism）。
   • 代码一键复制：阅读任何带有长段代码的文档时，每一个代码块右上角均支持精简的复制（Copy）图标按钮，一键将代码上板，附带成功动画反馈。
   • 主页背景采用动态网格渐变，充满高级感与活力。
   • 为正文排版（Typography）加入精心调优的各类边距和字号设计（内联 Github-Like 轻简美学风格）。

本地开发指南

该项目基于 Vite + React + TypeScript 初始化。

# 1. 安装依赖
npm install

# 2. 启动本地开发服务器
npm run dev

# 3. 产成生产打包
npm run build

部署时，将打包后的 dist 文件夹上传至 Cloudflare Pages，前端单页面应用即可直接运行。