93 lines
3.9 KiB
Markdown
93 lines
3.9 KiB
Markdown
|
# EasyCode Profile Center Design
|
||
|
|
|
||
|
|
## Goal
|
||
|
|
|
||
|
|
Add a lightweight personal center to the EasyCode front-end app. The page gives logged-in front users one place to view and edit account data, change password, review recent generated projects, review source purchases, and check AI quota.
|
||
|
|
|
||
|
|
## Scope
|
||
|
|
|
||
|
|
This work targets `easycode-web`, the Vue 3 + Element Plus front app. The existing `ruoyi-ui` admin app already has the standard RuoYi profile center and is not changed.
|
||
|
|
|
||
|
|
The first version is a single protected `/profile` route. It does not introduce nested profile routes, membership management, payment flows, invoices, or avatar upload.
|
||
|
|
|
||
|
|
## User Experience
|
||
|
|
|
||
|
|
The header shows a profile entry when the user is logged in. Clicking the displayed user name opens `/profile`.
|
||
|
|
|
||
|
|
The profile page uses one account summary area and tabbed detail sections:
|
||
|
|
|
||
|
|
- Basic profile: username, nickname, email, phone, created time, last login time.
|
||
|
|
- Edit profile: update nickname, email, and phone.
|
||
|
|
- Change password: old password, new password, confirm password.
|
||
|
|
- My projects: recent generated projects from the existing front project list API.
|
||
|
|
- Source purchases: existing source purchase records.
|
||
|
|
- AI quota: today's task usage, running task usage, and monthly cost usage.
|
||
|
|
|
||
|
|
Each tab has its own loading and empty state so one failing data source does not block the rest of the page.
|
||
|
|
|
||
|
|
## Backend Design
|
||
|
|
|
||
|
|
Existing APIs are reused:
|
||
|
|
|
||
|
|
- `GET /front/auth/profile`
|
||
|
|
- `GET /front/project/list`
|
||
|
|
- `GET /front/project/ai-quota`
|
||
|
|
- `GET /front/source/purchases`
|
||
|
|
|
||
|
|
Two authenticated front-account APIs are added:
|
||
|
|
|
||
|
|
- `PUT /front/auth/profile`
|
||
|
|
- Reads the current user id from `SecurityUtils.getUserId()`.
|
||
|
|
- Accepts nickname, email, and phone.
|
||
|
|
- Validates basic length and format.
|
||
|
|
- Updates only the current `front_user` row.
|
||
|
|
- Returns the refreshed profile without password.
|
||
|
|
|
||
|
|
- `PUT /front/auth/password`
|
||
|
|
- Reads the current user id from `SecurityUtils.getUserId()`.
|
||
|
|
- Verifies the old password against the stored encoded password.
|
||
|
|
- Requires the new password and confirmation to match.
|
||
|
|
- Reuses the existing 5-50 character password rule.
|
||
|
|
- Stores the encrypted new password.
|
||
|
|
|
||
|
|
## Frontend Design
|
||
|
|
|
||
|
|
New and changed files:
|
||
|
|
|
||
|
|
- `easycode-web/src/api/auth.js`: add `updateProfile` and `updatePassword`.
|
||
|
|
- `easycode-web/src/router/index.js`: add protected `/profile`.
|
||
|
|
- `easycode-web/src/components/AppHeader.vue`: make the logged-in user name a profile entry.
|
||
|
|
- `easycode-web/src/views/ProfileView.vue`: implement the single-page profile center.
|
||
|
|
- `easycode-web/src/views/profileView.test.mjs`: protect the expected route, API usage, and page sections.
|
||
|
|
|
||
|
|
The page updates local `easycode_web_user` after a successful profile save so the header reflects the new nickname immediately.
|
||
|
|
|
||
|
|
## Error Handling
|
||
|
|
|
||
|
|
Backend service exceptions return standard RuoYi `AjaxResult` error responses through existing exception handling. Frontend API errors use the existing axios interceptor and show local tab empty/error states where appropriate.
|
||
|
|
|
||
|
|
Password update success prompts the user to log in again. The page clears the local token after successful password change and routes to `/login`.
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
|
||
|
|
Backend tests cover:
|
||
|
|
|
||
|
|
- Profile update trims and persists editable fields for the current front user.
|
||
|
|
- Profile update returns a password-free refreshed profile.
|
||
|
|
- Password update rejects an incorrect old password.
|
||
|
|
- Password update encrypts the accepted new password.
|
||
|
|
|
||
|
|
Frontend tests cover:
|
||
|
|
|
||
|
|
- `/profile` is a protected route.
|
||
|
|
- The header exposes a profile navigation entry when logged in.
|
||
|
|
- `ProfileView.vue` uses the profile, update profile, update password, projects, purchases, and quota APIs.
|
||
|
|
|
||
|
|
## Acceptance Criteria
|
||
|
|
|
||
|
|
- Logged-in front users can open `/profile` from the header.
|
||
|
|
- Users can edit nickname, email, and phone.
|
||
|
|
- Users can change password only with the correct old password.
|
||
|
|
- Projects, source purchases, and AI quota are visible in the profile center.
|
||
|
|
- Existing admin profile behavior is unchanged.
|