1- 项目需求

我想创建一个叫做 “PPTify” 的项目,主要的功能是将上传的 markdown 文档,使用 ppt 格式来进行预览,要求操作简单,界面美观,我现在在 PPTify 的空目录中

2- 项目效果

2.1- 在主页上

1. 可以上传 Markdown 文件
2. 可以查看文件列表
3. 可以切换主题（亮色/暗色）
4. 点击文件列表中的 " 预览 " 按钮：
5. 会在新标签页打开预览页面
6. 可以看到 Markdown 转换后的幻灯片效果

2.2- 可以使用 Reveal.js 的所有功能

1. 使用方向键或点击控制切换幻灯片
2. 使用 ESC 键进入概览模式
3. 使用右上角的设置按钮切换主题和过渡效果
4. 支持全屏模式

3- 代码组织遵循的原则

项目应用主页的主题和 ppt 预览的主题做好完全的分离,完全分离主应用和 Reveal.js 的代码; 客户端和服务端的代码做好分离; 在功能上还是要实现原来拥有的效果;ppt 预览页采用原生的 reveal.js 的原生实现

3.1- 目录结构已经清晰分离

src/
├── client/           # 客户端代码
│   ├── components/
│   │   ├── app/     # 主应用组件
│   │   │   └── ThemeToggle.tsx
│   │   ├── file/    # 文件相关组件
│   │   │   ├── FileList.tsx
│   │   │   └── FileUploader.tsx
│   │   └── reveal/  # Reveal.js 组件
│   │       ├── RevealPreview.tsx
│   │       ├── RevealConfig.ts
│   │       ├── RevealControls.tsx
│   │       └── PreviewWrapper.tsx
│   ├── hooks/
│   │   ├── app/     # 主应用 hooks
│   │   │   └── useTheme.ts
│   │   ├── file/    # 文件相关 hooks
│   │   │   └── useFileStorage.ts
│   │   └── reveal/  # Reveal.js hooks
│   │       ├── useReveal.ts
│   │       └── useRevealTheme.ts
│   └── styles/
│       └── app/     # 主应用样式
│           └── theme.css
├── server/          # 服务端代码
│   ├── services/    # 服务端服务
│   │   ├── markdown.ts
│   │   └── storage.ts
│   └── utils/       # 服务端工具
└── shared/          # 共享代码
    ├── types/       # 共享类型
    ├── constants/   # 共享常量
    └── utils/       # 共享工具

3.2- 代码分离情况

✅ 客户端和服务端代码完全分离
✅ 主应用和 Reveal.js 代码分离
✅ 类型定义集中管理
✅ 常量集中管理
✅ 工具函数分类管理
✅ 样式分离管理

3.3- 导入路径

✅ 使用 @/client 导入客户端代码
✅ 使用 @/server 导入服务端代码
✅ 使用 @/shared 导入共享代码

3.4- 代码结构

✅ 完全分离了客户端和服务端代码
✅ 清理了所有旧的组件和样式文件
✅ 使用了清晰的目录结构
✅ 保持了类型安全
✅ 遵循了关注点分离原则

3.5- 代码效果

✅ 主应用和 Reveal.js 完全分离
✅ 客户端和服务端代码分离
✅ 类型定义集中管理
✅ 常量集中管理
✅ 工具函数分类管理
✅ 样式分离管理

3.6- 更新

1. 使用了正确的导入路径
2. 添加了正确的类型导入
3. 保持了代码分离的原则
4. 使用了更清晰的类型定义
5. 删除了不必要的文件
6. 优化了组件的实现
7. 使用了正确的目录结构
8. 保持了类型安全
9. 使导入路径更加清晰和一致

4- 命名

在使用 pnpm（或任何其他包管理工具，如 npm、yarn 等）创建项目时，项目名称通常遵循一些命名规范和最佳实践。虽然 pnpm 本身并不严格限制项目名称的大小写，但有一些常见的约定和注意事项：

4.1- 命名规范和最佳实践

1. 小写：项目名称通常使用小写字母。这是 Node.js 社区的常见约定，也是 npm 的推荐做法。使用小写字母可以避免在不同文件系统（如 Windows 和 Unix）之间出现大小写敏感性问题。
2. 无特殊字符：项目名称应避免使用特殊字符，如空格、点号、下划线等。使用连字符（-）或驼峰命名法（camelCase）是更常见的选择。
3. 简洁明了：项目名称应简洁且具有描述性，方便其他人理解和记忆。
4. 唯一性：确保项目名称在 npm 注册表中是唯一的，以避免命名冲突。

4.2- 示例

假设你选择的项目名称是 PPTify，在 pnpm 中使用时，建议将其转换为小写：

pnpm create @vitejs/app pptify

4.3- 为什么推荐小写

1. 跨平台兼容性：不同的文件系统对大小写的处理方式不同。Windows 文件系统是大小写不敏感的，而 Unix 文件系统是大小写敏感的。使用小写字母可以避免这些差异带来的问题。
2. 社区惯例：Node.js 和 npm 社区普遍使用小写字母，遵循这一惯例可以使项目更容易被其他开发者理解和接受。
3. 避免命名冲突：使用小写字母可以减少因大小写不同导致的命名冲突。

4.4- 总结

虽然 pnpm 允许使用大写字母，但为了遵循最佳实践和社区惯例，建议将项目名称转换为小写。因此，如果你选择 PPTify 作为项目名称，建议在 pnpm 中使用 pptify。

5- 操作

5.1- 首先确保我们在一个完全空的 Pptify 目录下

5.1.1- 首先清空当前目录（如果有文件的话）

# 在 PowerShell 中执行
Remove-Item -Recurse -Force * -ErrorAction SilentlyContinue

5.2- 然后创建新的 Next.js 项目

pnpm create next-app@latest .

5.3- 在创建过程中，会出现以下选项，建议按以下选择

√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? ... Yes
√ Would you like to customize the default import alias? ... No

请确保每个选项都按照上面的选择来选（都选 Yes，最后一个选 No）。

5.4- 现在让我们安装项目所需的核心依赖

# 安装 Markdown 处理相关依赖
pnpm add marked remark remark-html rehype-highlight rehype-stringify unified @types/marked

# 安装文件处理相关依赖
pnpm add @uploadthing/react uploadthing

# 安装 UI 组件库 (我们使用 antd，因为它更稳定且容易集成)
pnpm add antd @ant-design/icons

# 安装一些工具库
pnpm add clsx tailwind-merge

5.5- 首先，让我们创建必要的目录结构

5.5.1- 完整的目录结构应该是这样的

src/
├── app/
├── components/    # 用于存放可复用组件
├── lib/          # 用于存放工具函数
├── types/        # 用于存放 TypeScript 类型定义
├── hooks/        # 用于存放自定义 React Hooks
└── utils/        # 用于存放通用工具函数

然后，我们需要配置 Tailwind 和 Antd 的样式。修改以下文件：
修改全局样式文件：
创建一个基础的首页：
创建一个工具函数文件：
这些是基础的设置。完成后，你可以运行开发服务器来查看效果：
然后在浏览器中访问 http://localhost:3000 查看效果。

5.6- 执行命令

不需要暂停开发服务器。Next.js 的开发服务器会自动检测依赖的变化并重新编译。你可以直接在新的命令窗口中执行这些命令：

6- 类型检查和 ESLint 错误