refactor(admin): modernize admin module with clean architecture and React frontend #864
Conversation
React frontend - Migrate frontend from Vue.js 2 to React 18 + TypeScript + Vite - Restructure backend with clean architecture (app/internal/pkg layers) - Add CI workflow for frontend lint/typecheck and backend lint/test - Add CD workflow for GitHub Release with multi-platform binaries - Update docker-compose.yml for React development environment - Update README documentation for new admin UI port
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #864 +/- ##
===========================================
+ Coverage 19.69% 20.01% +0.31%
===========================================
Files 255 253 -2
Lines 18360 19597 +1237
===========================================
+ Hits 3616 3922 +306
- Misses 14377 15289 +912
- Partials 367 386 +19
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR modernizes the admin module by migrating from Vue.js 2 to React 18, restructuring the backend with clean architecture, and adding comprehensive CI/CD workflows.
Changes:
- Frontend completely rewritten in React 18 + TypeScript with Vite for faster builds
- Backend refactored with clean architecture (handler/store/model separation) using dependency injection
- Added GitHub Actions workflows for automated testing and multi-platform releases
Reviewed changes
Copilot reviewed 95 out of 206 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| admin/web/src/components/*.vue | Removed legacy Vue.js components (InputGroup, EmptyTip, CustomMenu) |
| admin/web/src/components/*.tsx | Added React TypeScript components (DualModeEditor, ClusterWizard, AuthGuard) |
| admin/web/src/api/*.ts | New TypeScript API client layer with React Query hooks |
| admin/web/package.json | Updated dependencies from Vue.js ecosystem to React ecosystem |
| admin/web/index.html | New Vite-based HTML entry point |
| admin/internal/* | Backend restructured with handler/store/model layers |
| admin/pkg/config/* | New configuration and i18n support |
| admin/web/public/* | Removed legacy static assets |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| // checkPassword verifies a password against a hash. | ||
| // Supports both bcrypt (new) and legacy MD5 hashes for migration. | ||
| func checkPassword(password, hash string) bool { |
There was a problem hiding this comment.
The function checkPassword is defined at line 328 but used at line 167. Consider moving the helper functions (hashPassword, checkPassword, isLegacyMD5Hash, checkLegacyMD5Password) to the top of the file or to a separate helpers section for better code organization.
| return result.Error | ||
| } | ||
| } | ||
| // Note: Removed automatic password reset on startup for security |
There was a problem hiding this comment.
This comment references removed code that isn't visible in the diff. While the comment provides context, it may confuse future readers. Consider removing it or clarifying that this is a design decision rather than a reference to deleted code.
| // Note: Removed automatic password reset on startup for security | |
| // Note: For security reasons, the admin password is not automatically reset on startup |
| // eslint-disable-next-line react-hooks/set-state-in-effect -- resetting error state on prop change | ||
| setSyncError(null); |
There was a problem hiding this comment.
Setting state directly in useEffect based on prop changes can lead to unnecessary re-renders. Consider using a ref or restructuring to avoid the eslint override. If the current approach is intentional, the comment justification is acceptable.
| files: ['**/*.{ts,tsx}'], | ||
| extends: [ | ||
| js.configs.recommended, | ||
| tseslint.configs.recommended, |
There was a problem hiding this comment.
The eslint config uses tseslint.configs.recommended without importing it from a configs object. Verify this is the correct API for typescript-eslint v8. The typical import is ...tseslint.configs.recommended when extending configs.
| tseslint.configs.recommended, | |
| ...tseslint.configs.recommended, |
| ) | ||
|
|
||
| const Version = "1.0.0" |
There was a problem hiding this comment.
pixiu 的 const 里面有 version这个常量
4 participants
refactor(admin): modernize admin module with clean architecture and React frontend
Summary
Modernize the admin module with:
Changes
Frontend (admin/web)
Backend (admin/)
CI/CD
admin.yml: Lint and test for frontend (ESLint, TypeScript) and backend (golangci-lint, go test)admin-release.yml: Build and release multi-platform binaries onadmin-v*tagsDockerfile: Multi-stage build for containerized deploymentDocumentation
Breaking Changes
/api/prefixChecklist