- 升级 Ant 5.x.x， 实现亮白与暗黑主题切换，并自定义组件主题，且组合紧凑算法实现相关主题
- 基于 React 最新版本，拥抱 Hooks
- 基于 React Router V7, 实现嵌套路由更方便
- 基于 Webpack 最新版本，实现多环境打包部署，代码分割优化，结合官方分析工具，实时优化代码
- 同时 支持 vite 6.x.x, 极速构建
- 基于 Faker 实现 Mock Server，不依赖后端实现模拟数据更加方便
- 封装 Fetch, 实现 useFetch， 请求更加方便，取消请求，实现请求及响应拦截，方便数据处理及统一报错提示
- 支持 TypeScript 5.x.x, 一切变得可控，扼杀错误于摇篮之中
- 支持多页签，提升效率，支持国际化
- 代码风格统一，项目统一配置 ESLint/Prettier/Husky/EditorConfig
- 配置 Commit message， 使用标准 commit 生成 changelog 标准化
- 配置 Sentry，方便日志追踪，及时发现问题
- 实现 ErrorBoundary，方便定位问题，避免不可预知的问题导致系统崩溃
- 代码分割，组件懒加载，Loading 垂直水平居中
- 集成单元测试，通过编写全面的测试用例，可以发现代码中的潜在问题和漏洞，确保代码的质量和稳定性
- 集成Tailwindcss V4，高度可定制主题，响应式设计友好，灵活布局，提高开发效率
- 集成Moton，提供了简洁直观的Api，用于创建流畅、高性能动画，让动画更自自然流畅，方便实现复杂的交互动画
- 集成 Bit，跨项目复用组件，支持在多个仓库间隔离和复用代码，简化协作过程，可以共享、维护和同步来自不同项目的隔离组件
- 集成 Bookstory, 方便生成组件文档
- 更多特性请 fork 项目，相信我，你会有意想不到的收获
为了帮助开发者更好地理解和优化项目，我们提供了以下文档：
- 代码质量分析报告 - 详细的代码质量分析，包含问题和改进建议
- 优化建议方案 - 完整的优化实施方案，分 3 个阶段
- 实施清单 - 可执行的任务清单，逐项跟踪进度
- 快速参考指南 - 开发者速查手册，常见问题和最佳实践
快速开始优化：
# 1. 查看优化清单
cat IMPLEMENTATION_CHECKLIST.md
# 2. 从 Phase 1 开始实施
# 详见 OPTIMIZATION_RECOMMENDATIONS.md- 基于Vite 构建， 请参见 feature-vite 分支
- React: v19.x.x React
- React Router: v7.x.x React Router
- Webpack:v5.x.x Webpack
- Babel: v7.x.x Babel, Versions
- Antd: v5.x.x Ant Design
- TypeScript: v5.x.xTypeScript
- Vite: v6.x.x Vite
- Tailwindcss: v4.x.xTailwindcss
- Motion.dev: v12.x.xMotion.dev
- Testing: v16.x.xTesting Library React
1. git clone https://github.com/wkylin/pro-react-admin.git
2. cd pro-react-admin
3. 可以选择以下两种方式的任一方式启动项目, 其他 cli 参考 package.json 中的 scripts
- $ npm start
- $ npm run dev:faker
- $ npm run vite:dev:faker
4. Bit - Build composable software
- $ npm i -g @teambit/bvm
- $ bvm install
- $ bvm upgrade
- $ bit start
5. Storybook -- A tool for UI development
- npx storybook init
- npm run storybook所有无需登录即可访问的页面集中在 src/routers/config/publicRoutes.ts：
export const publicRoutes = ['/signin','/signup','/auth/callback','/404','/403','/500']
// 运行时动态管理（如活动期间临时开放某页）
addPublicRoute('/landing')
removePublicRoute('/signup')
listPublicRoutes() // 获取当前公开列表另外，在任意路由配置对象（如模块路由数组项）上添加 auth: false 也会被视为公开，优先级高于数组。适用于：
- 单个页面临时开放
- 希望和路由结构一起阅读维护
判断逻辑：
- 若
auth === false立即放行 - 否则匹配
publicRoutes（支持前缀，如/auth/callback下子路径）
用户已登录再访问 /signin 或其它公开页会被重定向到：
- 根路径
/（若有权限） - 否则其可访问路由列表的第一项
组件 src/pages/layout/proSecNav/index.jsx 在挂载时：
- 调用
permissionService.getPermissions()取回routes列表 - 用
generateMenuItems(routes)递归过滤所有候选菜单 - 支持父路径包含子页面权限：拥有
/coupons自动显示/coupons/add - 子菜单全部被过滤则不展示父菜单
扩展新菜单步骤：
- 在候选
allMenuItems增加{ label:'Xxx', key:'/new-path', icon:<Icon/> } - 将路径加入对应角色的路由数组（
mock/permission.ts内managerRoutes等） C630 - 可选：添加权限码到
routePermissionMap（若做按钮级校验）
authService.logout() 会清空 user_permissions 缓存并跳转 /signin，保证下次登录重新计算菜单。
在权限获取函数 mockGetUserPermissions 已插入日志，可在浏览器 DevTools Console 观察路由与角色匹配过程。
-
可以使用为此项目准备的脚手架开发--白泽 baize
> npm install baize --location=global > baize
"alias-skip.mappings": {
"@src": "/src",
"@stateless": "/src/components/stateless",
"@stateful": "/src/components/stateful",
"@hooks": "/src/components/hooks",
"@container": "/src/components/container",
"@assets": "/src/components/assets",
'@pages': path.resolve('./src/pages'),
'@routers': path.resolve('./src/routers'),
'@utils': path.resolve('./src/utils'),
}- Settings >> Languages & Frameworks >> Javascript >> Webpack: 指定 Configuration file: webpack\webpack.common.js
-
npm install
-
package.json
-
git commit
-
conventional-changelog-cli
-
standard-version
- changes
- git add . / git cz
- npm run release
npm install --save-dev commitizen npm install --save-dev cz-conventional-changelog "config": { "commitizen": { "path": "cz-conventional-changelog" } } git add . git cz or cz npm install -g conventional-changelog-cli conventional-changelog -p angular -i CHANGELOG.md -s npm install -g standard-version "release": "standard-version --tag-prefix \"publish/\""
-
The commit message should be structured as follows:
<type>[optional scope]: <description> <BLANK LINE> [optional body] <BLANK LINE> [optional footer(s)]
-
"type-enum": ["build", "chore", "ci", "docs", "feat", "fix", "perf", "refactor", "revert", "style", "test"]
-
type-enum 说明文档：
- build: 依赖调整 影响构建系统或外部依赖的更改 (示例作用域：gulp, broccoli, npm）
- chore: 杂务处理 其他不会修改源文件或者测试文件的更改
- ci: 脚本变更 对 CI 配置文件和脚本的更改（示例作用域： Travis, Circle, BrowserStack, SauceLabs)
- docs: 文档变更 添加或者更新文档
- feat: 添加功能 引入新的特性
- fix 错误修复 修复 bug
- perf: 性能优化 更改代码以提高性能
- refactor: 代码重构 即不是修复 Bug，也不是添加特性的代码更改
- revert: 恢复版本 恢复到上一个版本
- style: 格式调整 不会影响代码含义的更改（空格，格式缺少分号等）
- test: 更新测试 添加或者更新测试
-
https://theodorusclarence.com/library/conventional-commit-readme
// mock index.js
npm run dev:faker# Authorization callback URL
http://localhost:8080/auth/callback
-
Deployment: [Deployment] (https://create-react-app.dev/docs/deployment)
-
Deploy gh-pages:
"predeploy": "npm run build:production", "deploy": "gh-pages -d dist",
-
Vercel 提交后自动部署，预览地址：
[https://pro-react-admin.vercel.app/](https://pro-react-admin.vercel.app/)
- 配备比较完善的脚手架：
- 完善文档：
- CacheRoute: react-router-cache-route
- npm install -g snyk
- snyk auth
- snyk monitor- TypeScript: TypeScript
- Mock Server
- 单页面多页签参考
- Axios
- React SVGR
-
ESLint: ESLint
ESLint is a linter for the JavaScript language, written in Node.js. That helps you find and fix problems in your JavaScript code.
-
Prettier: Prettier
Prettier is an opinionated code formatter that formats the code with the help of rules we set.
-
Husky: Husky
Husky is an NPM package that lets you run a set of commands or script before any git action. For eg pre-push, pre-commit, pre-rebase.
-
Commit Lint: Commit Lint
CommitLint helps your team adhering to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy.
-
Editor Config: EditorConfig EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
-
Semantic Versioning: Semantic Versioning
-
Active hooks: https://typicode.github.io/husky/#/?id=install
-
Prettierrc http://json.schemastore.org/prettierrc
-
Conflict eslint prettier Conditional (ternary) operator
// lint-staged "lint-staged": { "**/*": [ "npm run prettier:fix" ], "src/**/*.{js, jsx, ts, tsx}": [ "npm run eslint:fix", "npm run prettier:fix" ], "src/**/*.less": [ "npm run stylelint:fix", "npm run prettier:fix" ], "*.md": [ "npm run markdownlint:fix", "npm run prettier:fix" ] }, // .eslintrc.json "extends": ["plugin:react/recommended", "standard", "prettier"], // package.json "prettier:fix": "prettier --write \"src/**/*\" --end-of-line auto --ignore-unknown",
以下为最近在仓库中完成的主要改动与改进，便于团队成员快速了解变更并在本地验证：
-
权限与导航
- 统一并强化了权限检查逻辑，
permissionService提供缓存、过期策略、强制刷新与单例获取，避免重复请求和竞态。 - 在侧边栏
src/pages/layout/proSecNav/index.jsx引入了基于权限的菜单过滤，确保首页/对所有账号可见，并避免在无权限时强制跳转或刷新。 - 引入“安全导航”封装（
useSafeNavigate/SafeLink等），在点击或程序化导航前检查权限，阻止越权访问并提供友好提示。
- 统一并强化了权限检查逻辑，
-
请求层重构
- 全新增强
src/service/request.js：基于axios，支持全局配置、可取消请求（AbortController）、上传/下载进度回调、并发/串行执行控制、重试机制以及每次请求可关闭错误弹窗（config.showError = false）。 - 新的请求模块向后兼容常见用法，同时提供
request.parallel/request.series/request.retry等工具函数，便于批量请求与限流。 - 为请求错误提示增加了统一处理，并与消息中心集成（消息去重，见下）。
- 全新增强
-
消息去重
- 修改了
src/utils/message.ts：对短时间（2s 窗口）内相同文本的消息进行去重，避免网络抖动或多处错误导致的重复弹窗。
- 修改了
-
文档与示例
- 新增
docs/REQUESTS.md，包含对新版request模块的使用示例：并发、串行、取消、上传/下载进度、重试、关闭错误提示等场景，用法清晰易懂，建议开发者参考并在新代码中使用。
- 新增
-
自动化测试与迁移提示
- 已配合 Playwright 增加部分 E2E 用例（授权/未授权场景），建议在变更请求或权限逻辑后运行
npm run test:e2e以回归验证。
- 已配合 Playwright 增加部分 E2E 用例（授权/未授权场景），建议在变更请求或权限逻辑后运行
如何验证本地改动（简要）
- 先安装依赖并构建：
npm install
npm run build:production- 本地调试：启动 dev 或 mock server：
npm start
# 或使用 faker mock
npm run dev:faker- 运行 E2E（如已配置 Playwright）：
npm run test:e2e如需我把项目中仍存在的直接重复请求点（例如多个组件在 mount 时各自向后端请求权限）替换为 permissionService.getPermissions() 的单点调用，我可以扫描并提供自动补丁或直接提交变更，请告知偏好工作方式。
- Sentry
- 遇到的问题：
- ERROR in Sentry CLI Plugin: spawn /Users/sheldon/Desktop/promotion-manage-web/node_modules/@sentry/cli/sentry-cli ENOENT
- 解决方案参考：https://juejin.cn/post/6961012856636571655
- "sentry:check": "node check-sentry.js
- Self-Hosted Sentry nightly -https://github.com/getsentry/self-hosted
- ErrorLens: ErrorLens
- SonarLint: https://www.sonarlint.org/
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
-
Windi CSS: Windi CSS
-
Tailwind CSS: TailWind CSS
- GitHub Actions
1. npm install jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer --save-dev
2. npm install --save-dev @testing-library/react
3. npm install cypress --save-dev
4. npm install --save-dev @testing-library/react-hookCopyright (c) 2021 Promotion Web Licensed under the Apache License.
npm version [| major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=[alpha, beta, rc]] | from-git]
- git tag -a v1.2.0 -m "version: 1.2.0"
- git push origin v1.2.0
- git push origin --tags
-
brew install nginx brew reinstall nginx /usr/local/var/www /usr/local/etc/nginx/nginx.conf /usr/local/etc/nginx/servers/ brew services list brew services start nginx brew services stop nginx brew services restart nginx
-
Nginx.conf
server { listen 8081; #server_name localhost; server_name www.pro.react.admin.com; # 静态资源 location / { root /usr/local/var/www/pro-react-admin; index index.html index.htm; try_files $uri $uri/ /index.html @rewrites; expires -1; add_header Cache-Control no-cache; # proxy_pass http://localhost:3000; } # API代理 location /api/ { proxy_pass https://api.example.com/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 允许跨域配置 add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; add_header Access-Control-Allow-Credentials 'true'; if ($request_method = 'OPTIONS') { add_header Access-Control-Max-Age 86400; add_header Content-Length 0; add_header Content-Type text/plain; return 204; } } location @rewrites { rewrite ^(.+)$ /index.html break; } # 不缓存 location ~ .*(htm|html|json)?$ { expires -1; } # 或者全部重定向 # return 301 https://$server_name$request_uri; } # SwitchHosts! 192.168.1.101 www.pro.react.admin.com # 第一个目录的配置 # C:\nginx-1.27.5\html\var\www\html\ # location /html/ { # root /var/www; # index index.html index.htm; # } # 第二个目录的配置 # C:\nginx-1.27.5\html\var\www\static\ # location /static/ { # root /var/www; # index index.html index.htm; #} -
Nginx for Windows
1. start nginx 2. nginx -s stop 3. nginx -s quit 4. nginx -s reload 5. nginx -s reopen
-
npm install -g tree-node-cli
-
Mac: tree -L 2 -I "node_modules" -r -F
-
Win: treee -L 2 -I "node_modules" -r -F
-
tree node
pro-react-admin/ ├── workspace.jsonc ├── webpack/ │ ├── webpack.prod.js │ ├── webpack.dev.js │ ├── webpack.common.js │ ├── process.js │ ├── paths.js │ └── dev.proxy.js ├── vite.config.js ├── typings/ │ ├── style.d.ts │ ├── declaration.d.ts │ └── asset.d.ts ├── tsconfig.json ├── src/ │ ├── utils/ │ ├── theme.tsx │ ├── theme/ │ ├── styles/ │ ├── store/ │ ├── service/ │ ├── routers/ │ ├── reducers/ │ ├── pages/ │ ├── index.tsx │ ├── components/ │ ├── assets/ │ ├── actions/ │ └── App.tsx ├── public/ │ ├── robots.txt │ ├── manifest.json │ ├── loading.svg │ ├── index.html │ └── favicon.ico ├── packagehash.txt ├── package.json ├── package-lock.json ├── index.html ├── faker/ │ ├── utils/ │ ├── shops/ │ ├── index.js │ └── app/ ├── docker-compose.yml ├── dist/ │ ├── static/ │ ├── react.bb194261542b956cd3ea.js.map │ ├── react.bb194261542b956cd3ea.js.gz │ ├── react.bb194261542b956cd3ea.js.LICENSE.txt │ ├── react.bb194261542b956cd3ea.js │ ├── index.html │ └── favicon.ico ├── compilation-stats.json ├── check-sentry.js ├── babel.config.js ├── api/ │ ├── server.js │ ├── package.json │ ├── package-lock.json ├── SECURITY.md ├── README.md ├── LICENSE ├── Dockerfile ├── CODE_OF_CONDUCT.md └── CHANGELOG.md
-
npm run analyze:build
-
依赖分析
npm run js-analyzer
- "lint:json": "jsonlint --quiet src/*/.json",
- "standard": "standard src/*/",
- "standard:fix": "standard --fix src/*/",
- rm -rf package-lock.json
npm install css-loader@5.2.7 --save-dev
"webpack-dev-server": "^4.1.1",
Uncaught TypeError: SocketClient is not a constructor-
首先确认自己 git 拉取代码的方式
git remote -v
-
设置代理
git config --global https.proxy 127.0.0.1:10808 git config --global http.proxy 127.0.0.1:10808 git config --global http.proxy 'socks5://127.0.0.1:10808' git config --global https.proxy 'socks5://127.0.0.1:10808'
-
查看代理是否成功
git config --get --global http.proxy
-
查看 git 配置
git config --global --list
-
取消代理
git config --global --unset http.proxy git config --global --unset https.proxy
参考官网：https://typicode.github.io/husky/#/ 按以下步骤进行设置：
-
删除 .git 目录下的 hooks 及 .husky
-
查看 git config 配置是否存在 core.hookspath=.husky
git config --list -
删除配置及卸载 Huksy:
npm uninstall husky && git config --unset core.hookspath -
再次安装 Husky:
npm install husky --save-dev // npm set-script prepare "husky install" npx husky-init -
新增 Hooks：
npx husky add .husky/pre-commit "npx lint-staged" npx husky add .husky/pre-commit "npx pretty-quick --staged" npx husky add .husky/commit-msg 'npx --no-install commitlint --edit' npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && npx cz --hook || true'
If you like the project, give it a star ⭐️, it will be a great encouragement to me.