3.7 KiB
EasyCode Profile Center Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: Build the lightweight /profile personal center for EasyCode front users.
Architecture: Reuse existing front project, source purchase, and AI quota APIs. Add only the missing front-account profile update and password update APIs, then compose a single Vue 3 + Element Plus profile page.
Tech Stack: Spring Boot, MyBatis, JUnit 4, Mockito, Vue 3, Vue Router 4, Element Plus, Node node:test.
Task 1: Backend Account Update APIs
Files:
-
Modify:
ruoyi-admin/src/test/java/com/ruoyi/web/service/front/FrontAuthServiceTest.java -
Modify:
ruoyi-admin/src/main/java/com/ruoyi/web/controller/front/FrontAuthController.java -
Modify:
ruoyi-admin/src/main/java/com/ruoyi/web/service/front/FrontAuthService.java -
Modify:
ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/IFrontUserService.java -
Modify:
ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/FrontUserServiceImpl.java -
Create:
ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/FrontProfileUpdateBody.java -
Create:
ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/FrontPasswordUpdateBody.java -
Step 1: Write failing backend tests
Add tests proving profile update returns a password-free profile and password update rejects the wrong old password.
- Step 2: Run backend tests and verify RED
Run: mvn -pl ruoyi-admin -Dtest=FrontAuthServiceTest test
Expected: compilation/test failure because new DTOs and service methods do not exist yet.
- Step 3: Add DTOs and service methods
Add request DTOs and implement updateProfile / updatePassword using current front user id, existing password matching, and FrontUserMapper.updateFrontUser.
- Step 4: Run backend tests and verify GREEN
Run: mvn -pl ruoyi-admin -Dtest=FrontAuthServiceTest test
Expected: tests pass.
Task 2: Frontend Route, API, Header, and Page
Files:
-
Create:
easycode-web/src/views/profileView.test.mjs -
Create:
easycode-web/src/views/ProfileView.vue -
Modify:
easycode-web/src/api/auth.js -
Modify:
easycode-web/src/router/index.js -
Modify:
easycode-web/src/components/AppHeader.vue -
Step 1: Write failing frontend tests
Add a source-level node:test file that asserts /profile is protected, the header links to it, and ProfileView.vue imports and uses the required APIs.
- Step 2: Run frontend tests and verify RED
Run: node src/views/profileView.test.mjs from easycode-web.
Expected: failure because ProfileView.vue does not exist and route/header/API entries are missing.
- Step 3: Implement route, API helpers, header entry, and page
Add the protected route, auth API helpers, clickable profile entry in the header, and a tabbed profile center page with independent loading states.
- Step 4: Run frontend tests and verify GREEN
Run: node src/views/profileView.test.mjs from easycode-web.
Expected: tests pass.
Task 3: Verification
Files:
-
Verify all changed backend, frontend, and doc files.
-
Step 1: Run focused backend test
Run: mvn -pl ruoyi-admin -Dtest=FrontAuthServiceTest test
Expected: build success with FrontAuthServiceTest passing.
- Step 2: Run focused frontend source test
Run: node src/views/profileView.test.mjs from easycode-web.
Expected: all assertions pass.
- Step 3: Run frontend production build
Run: npm run build from easycode-web.
Expected: Vite build completes successfully.