开发指南
开发环境搭建
快速搭建本地开发环境，开始贡献代码
环境要求
快速开始
1克隆代码仓库
git clone https://github.com/tobetterxian/slm-system.git
cd slm-system克隆项目到本地，进入项目目录
2安装依赖
npm install安装所有项目依赖，这可能需要几分钟时间
💡 提示：项目使用 Turbo Monorepo，会自动安装所有 workspace 的依赖
3配置环境变量
在项目根目录创建 .env.local 文件：
NEXT_PUBLIC_SUPABASE_URL=你的_Supabase_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的_Supabase_密钥⚠️ 注意：Supabase 配置信息可以从项目管理员获取，或者自己创建 Supabase 项目
4启动开发服务器
npm run dev启动开发服务器，默认运行在 http://localhost:3000
✅ 成功：看到 "Ready in XXms" 表示启动成功，可以在浏览器中访问了
项目结构
slm-system/ ├── apps/ │ └── web/ # Next.js 主应用 │ ├── src/ │ │ ├── app/ # App Router 页面 │ │ │ ├── pm/ # 项目经理仪表板 │ │ │ ├── pl/ # 项目负责人仪表板 │ │ │ ├── ic/ # 个人贡献者工作台 │ │ │ ├── vp/ # 副总裁仪表板 │ │ │ └── docs/ # 文档中心 │ │ ├── components/ # React 组件 │ │ ├── hooks/ # 自定义 Hooks │ │ ├── lib/ # 工具函数 │ │ └── store/ # Zustand 状态管理 │ └── public/ # 静态资源 ├── packages/ │ ├── ui-components/ # 共享 UI 组件库 │ └── database/ # 数据库配置和迁移 └── docs/ # 项目文档
apps/web：主应用代码，包含所有页面和业务逻辑
packages/ui-components：可复用的 UI 组件库
packages/database：数据库迁移脚本和配置
常用命令
npm run dev开发启动开发服务器，支持热更新
npm run build构建构建生产版本
npm run lint检查运行 ESLint 代码检查
npm run format格式化使用 Prettier 格式化代码
VS Code 推荐配置
推荐扩展
ESLint
代码质量检查
Prettier
代码格式化
Tailwind CSS IntelliSense
Tailwind 自动补全
TypeScript Vue Plugin
TypeScript 支持
推荐设置
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}💡 开发技巧
- •使用
npm run dev时，修改代码会自动热更新 - •提交代码前运行
npm run lint检查代码质量 - •使用 TypeScript 严格模式，避免类型错误
- •遵循项目的代码规范和命名约定
- •数据库字段使用 snake_case，TypeScript 使用 camelCase