{"id":29536919,"url":"https://github.com/ethanz-code/monostart-react-dashboard","last_synced_at":"2025-09-02T08:36:24.926Z","repository":{"id":304451089,"uuid":"1014614252","full_name":"ethanz-code/monostart-react-dashboard","owner":"ethanz-code","description":"基于现代化 Monorepo 架构的 React 起手项目创建的 偏产品型 Dashboard 模版","archived":false,"fork":false,"pushed_at":"2025-07-13T12:52:32.000Z","size":200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-29T09:55:28.707Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ethanz-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-06T04:19:44.000Z","updated_at":"2025-07-13T12:52:35.000Z","dependencies_parsed_at":"2025-07-13T08:37:32.284Z","dependency_job_id":"3600355a-5d65-4a20-bfb7-df920961ec27","html_url":"https://github.com/ethanz-code/monostart-react-dashboard","commit_stats":null,"previous_names":["ethanz-code/monostart-react-dashboard"],"tags_count":0,"template":true,"template_full_name":"ethanz-code/monorepo-react-starter","purl":"pkg:github/ethanz-code/monostart-react-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fmonostart-react-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fmonostart-react-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fmonostart-react-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fmonostart-react-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ethanz-code","download_url":"https://codeload.github.com/ethanz-code/monostart-react-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanz-code%2Fmonostart-react-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273257109,"owners_count":25073528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-17T03:38:44.002Z","updated_at":"2025-09-02T08:36:24.883Z","avatar_url":"https://github.com/ethanz-code.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dashboard Starter\n\n现代化的 React 仪表盘起始项目，基于 Vite、React 19、TypeScript 构建，内置完整的认证系统和响应式仪表盘布局，采用 TailwindCSS v4 和 pnpm 包管理，适合快速搭建管理后台和数据分析平台。\n\n## 项目亮点\n\n- **完整仪表盘解决方案**：内置响应式侧边栏、主题切换、多页面布局\n- **现代化认证系统**：登录、注册、忘记密码页面，包含验证码功能\n- **React 19 + Vite**：极速开发体验，支持最新 React 特性和 SWC 编译\n- **TailwindCSS v4**：全新原子化 CSS 方案，支持 CSS 变量和主题系统\n- **TypeScript 全量支持**：完整类型定义，开发体验更佳\n- **双重代码检查**：oxlint + ESLint 双重保障，Prettier 统一格式化\n- **状态管理**：集成 Zustand 轻量级状态管理方案\n\n## 目录结构\n\n```text\nreact-dashboard-starter/\n├── src/                       # 主应用源码\n│   ├── components/            # 可复用组件\n│   │   ├── ui/               # 基础 UI 组件\n│   │   ├── layout/           # 布局组件\n│   │   ├── theme/            # 主题相关组件\n│   │   └── home/             # 首页组件\n│   ├── views/                # 页面组件\n│   │   ├── auth/             # 认证相关页面\n│   │   └── dashboard/        # 仪表盘页面\n│   ├── router/               # 路由配置\n│   ├── store/                # 状态管理\n│   ├── utils/                # 工具函数\n│   ├── lib/                  # 第三方库配置\n│   ├── assets/               # 静态资源\n│   └── main.tsx              # 应用入口\n├── public/                   # 公共资源\n├── packages/                 # 扩展包（可选）\n├── package.json              # 依赖配置\n├── vite.config.ts            # Vite 配置\n└── tsconfig.json             # TypeScript 配置\n```\n\n## 快速开始\n\n### 环境要求\n\n- Node.js 18 及以上\n- [pnpm](https://pnpm.io/) 10 及以上\n\n### 安装依赖\n\n```sh\npnpm install\n```\n\n### 启动开发服务器\n\n```sh\npnpm dev          # 启动开发服务器（自动打开浏览器）\n```\n\n### 构建和预览\n\n```sh\npnpm build        # 构建生产版本\npnpm preview      # 预览生产版本\n```\n\n### 代码检查与格式化\n\n```sh\npnpm lint         # 运行所有代码检查\npnpm format       # 格式化代码\npnpm format-watch # 监听文件变化并自动格式化\n```\n\n## 功能特性\n\n### 🎨 主题系统\n\n- 支持浅色/深色/系统自动主题切换\n- 基于 CSS 变量的主题系统\n- 渐变背景效果适配主题\n\n### 🔐 认证系统\n\n- 登录/注册/忘记密码页面\n- 验证码倒计时功能\n- 表单验证和错误处理\n\n### 📱 响应式仪表盘\n\n- 自适应侧边栏布局\n- 移动端汉堡菜单\n- 多个仪表盘页面（概览、分析、使用统计、项目、个人资料、设置）\n\n### 🛠 开发体验\n\n- 热重载开发环境\n- TypeScript 类型安全\n- 代码自动格式化和检查\n- Git 提交规范化\n\n## 推荐开发工具\n\n- [VSCode](https://code.visualstudio.com/) + TypeScript 支持\n- [TailwindCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 扩展\n\n## 技术栈\n\n### 核心框架\n\n- **React 19**：最新 React 版本，支持并发特性\n- **React Router 7**：现代化路由管理\n- **TypeScript**：类型安全的 JavaScript 超集\n- **Vite**：极速构建工具\n\n### UI 和样式\n\n- **TailwindCSS v4**：新一代原子化 CSS 框架\n- **Radix UI**：无障碍访问的组件基础库\n- **Lucide React**：现代化图标库\n- **class-variance-authority**：类变体管理\n\n### 状态管理和工具\n\n- **Zustand**：轻量级状态管理（通过 @ethan-utils/zustand）\n- **Axios**：HTTP 客户端（通过 @ethan-utils/axios）\n- **QR Code**：二维码生成\n\n### 开发工具\n\n- **ESLint + oxlint**：双重代码检查\n- **Prettier**：代码格式化\n- **Husky + lint-staged**：Git 钩子和预提交检查\n- **Commitlint**：提交信息规范化\n\n## 代码规范与提交\n\n- 双重代码检查：oxlint（快速）+ ESLint（全面）\n- Prettier 自动格式化代码\n- Husky 预提交钩子自动检查和格式化\n- Commitlint 强制规范化提交信息\n- 使用 `pnpm commit` 获得交互式提交体验\n\n## 项目结构说明\n\n### 路由系统\n\n- 使用 React Router 7 的 `createBrowserRouter`\n- 支持懒加载的仪表盘路由\n- 认证页面和仪表盘页面分离\n\n### 组件架构\n\n- `components/ui/`：基于 Radix UI 的基础组件\n- `components/layout/`：布局相关组件\n- `components/theme/`：主题切换组件\n- `views/`：页面级组件\n\n### 状态管理\n\n- 使用 Zustand 进行轻量级状态管理\n- 支持 localStorage 持久化\n- 模块化的 store 设计\n\n## 扩展指南\n\n### 添加新页面\n\n1. 在 `src/views/` 下创建新组件\n2. 在 `src/router/index.ts` 中添加路由配置\n3. 如需侧边栏菜单，更新 `DashboardLayout.tsx`\n\n### 自定义主题\n\n- 修改 CSS 变量定义\n- 在 `theme-provider.tsx` 中调整主题逻辑\n- TailwindCSS 配置支持自定义扩展\n\n### 添加新的 UI 组件\n\n- 参考 `components/ui/` 中现有组件\n- 使用 Radix UI 作为无障碍访问基础\n- 配合 TailwindCSS 和 CVA 进行样式管理\n\n## 参考文档\n\n- [React 19 官方文档](https://react.dev/)\n- [React Router 7 官方文档](https://reactrouter.com/)\n- [Vite 官方文档](https://vitejs.dev/)\n- [TailwindCSS v4 官方文档](https://tailwindcss.com/)\n- [Radix UI 官方文档](https://www.radix-ui.com/)\n- [Zustand 官方文档](https://zustand-demo.pmnd.rs/)\n- [pnpm 官方文档](https://pnpm.io/)\n\n## 许可证\n\n本项目基于 MIT 许可证开源。\n\n---\n\n⚡ 由 React 19、Vite、TailwindCSS v4 强力驱动，为现代化仪表盘开发而生。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethanz-code%2Fmonostart-react-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fethanz-code%2Fmonostart-react-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethanz-code%2Fmonostart-react-dashboard/lists"}