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.

3.9 KiB Raw Blame History