MockPilot项目1复盘
📦 项目初始化与环境配置
- 使用
Next.js App Router 初始化项目结构
- 安装并配置 Tailwind CSS（含
postcss.config.js、tailwind.config.js）
- 配置
globals.css、并实现暗黑模式支持
- 修复 Turbopack 环境下 Tailwind 插件识别问题（手动安装
@tailwindcss/postcss）
🧱 项目结构与路由设计
- 理解并使用
app/ 下的 嵌套路由机制
- 单独为
auth/ 页面创建 layout.tsx 实现登录注册页面专属布局
- 配置
metadata 与 RootLayout，提升页面结构清晰度
🎨 UI 框架与组件系统
- 使用
shadcn/ui 组件库自动化安装并生成按钮、表单、输入框等组件
- 引入 Google 字体（Mona Sans），配置全局字体与抗锯齿渲染
- 使用 Tailwind + shadcn 实现响应式设计与现代视觉风格
🔐 登录/注册功能搭建
- 引入并配置
react-hook-form 和 zod 完成表单状态管理与验证
- 使用
<FormField />、<Input /> 等封装表单结构
- 实现
AuthForm.tsx，接收 type 参数动态渲染 Sign-in / Sign-up 表单
🧠 技术理解与架构提升
