has error

README.md

@@ -0,0 +1,97 @@
+# MDX Dynamic Content Preview
+
+一个基于 Vite + React 的 MDX 动态内容预览器，支持实时编译和热重载。
+
+## 功能特性
+
+- ✅ **实时 MDX 编译** - 使用 @mdx-js/mdx 进行编译
+- ✅ **热重载** - MDX 文件修改后自动刷新预览
+- ✅ **TypeScript 支持** - 完整的类型安全
+- ✅ **组件自定义** - 支持自定义 React 组件样式
+- ✅ **开发体验** - Vite 提供的快速 HMR 和构建
+- ✅ **错误处理** - 友好的错误显示和加载状态
+
+## 快速开始
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 启动开发服务器
+
+```bash
+pnpm dev
+```
+
+访问 http://localhost:3000 查看预览效果。
+
+### 构建生产版本
+
+```bash
+pnpm build
+```
+
+## 项目结构
+
+```
+test-mdx/
+├── public/
+│   └── example.mdx          # 示例 MDX 文件
+├── src/
+│   ├── app.tsx              # 主应用组件
+│   └── main.tsx             # 应用入口
+├── index.html               # HTML 模板
+├── package.json             # 项目配置
+├── tsconfig.json            # TypeScript 配置
+├── tsconfig.node.json       # Node.js TypeScript 配置
+└── vite.config.ts           # Vite 构建配置
+```
+
+## 使用方法
+
+1. 将你的 MDX 文件放在 `public/` 目录下
+2. 修改 `src/app.tsx` 中的文件路径：
+   ```typescript
+   const response = await fetch('/your-file.mdx?t=' + Date.now());
+   ```
+3. 运行开发服务器即可看到预览效果
+
+## 自定义组件样式
+
+在 `src/app.tsx` 中的 `components` 对象中自定义各种 Markdown 元素的样式：
+
+```typescript
+const components = {
+  h1: (props) => <h1 style={{ color: 'blue' }} {...props} />,
+  p: (props) => <p style={{ fontSize: '16px' }} {...props} />,
+  // 添加更多组件...
+};
+```
+
+## 热重载机制
+
+- 开发模式下每 2 秒自动检查 MDX 文件变化
+- 使用时间戳参数避免缓存问题
+- 显示重载状态指示器
+- 修改后即时更新预览
+
+## 技术栈
+
+- **Vite** - 构建工具和开发服务器
+- **React** - UI 框架
+- **TypeScript** - 类型安全
+- **@mdx-js/mdx** - MDX 编译器
+- **@mdx-js/react** - React 集成
+- **vite-plugin-static-copy** - 静态文件复制
+
+## 开发脚本
+
+- `pnpm dev` - 启动开发服务器
+- `pnpm build` - 构建生产版本
+- `pnpm preview` - 预览构建结果
+
+## 许可证
+
+MIT License