[shaohuzhang1]

feat: useI18n

[shaohuzhang1]

Code Review

Overall this is a solid i18n refactor. Below are the issues I found, grouped by severity.

🔴 Potential Bugs / Correctness

1. el-form rules switched from reactive to computed — validate reactivity

Switching forgotPasswordRules from reactive(...) to computed(() => ({...})) means a new object identity is created whenever any t() dependency changes (e.g. locale switch). Element Plus copies rules at init; combined with :validate-on-rule-change="false" the form will not auto-revalidate. Your manual watch(locale, ...) handles that case, which is good — but verify:

• The watch fires only on locale, yet the rules also depend on any message change (rare, acceptable).
• If a field's value has never been blurred/validated, switching language won't reveal localized errors until re-blur — expected behavior, fine.

2. Validator closure captures stale t

validateConfirmPassword uses t(...) directly, not the computed rules. That's fine because it runs at validation time and reads the current t. ✅ No bug, just noting it doesn't need to be inside the computed.

3. validateField return handling

if (field.prop) void form.validateField(field.prop).catch(() => undefined)

• form.fields is an internal-ish array in Element Plus; iterating it is supported but slightly fragile across versions. Acceptable.
• void expr.catch(...) — the void is redundant since .catch() returns a Promise you're already discarding. Minor.

4. Watch could cause focus loss / flicker

Re-validating all errored fields synchronously on locale change may cause visual churn if many fields error. Usually fine for a small form.

🟡 Minor Issues

5. Redundant useScope: 'global'

useI18n({ useScope: 'global' }) is the default when no useScope given, but explicit is fine if intentional for clarity.

6. Inconsistent translation keys

• emailRequired/emailInvalid → auth.forgotPassword.validation.* ✅
• passwordRequired → auth.credentials.validation.passwordRequired ⚠️ (different namespace — acceptable if shared, but ensure it exists in the locale files; otherwise falls back to the key string).
• Others use auth.forgotPassword... — the mixed namespace is worth documenting or aligning.

7. min-w-35 vs w-35

Changed w-35 → min-w-35 to accommodate longer localized text ("重新发送 (60s)" vs "Resend (60s)"). 👍 Good call, but confirm min-w-35 is a valid Tailwind class in your config (arbitrary numeric spacing requires Tailwind v3.4+ min-w-* spacing scale support, or a custom config entry).

8. Placeholder accessibility

Placeholders are now translated — good. But ensure aria-label or visible <label> exists elsewhere; placeholders alone are not accessible labels.

9. autocomplete unchanged

Email/verification code inputs don't set autocomplete="one-time-code" for the code input. Consider adding it for OTP UX on mobile.

🟢 Suggestions

10. Extract inline validator or memoize

No action needed; validateConfirmPassword reading live t is correct.

11. Consider flush: 'post' justification

flush: 'post' waits until DOM updates — correct here so form.fields reflect rendered state. Add a comment if not already present (you added comments elsewhere).

12. Type safety for _rule

(_rule: unknown, ...) — Element Plus types this as InternalRuleItem. Using unknown forwards-compat safe but loses hints; acceptable.

13. Untranslated UI remnant

Check the whole file for leftover hard-coded Chinese strings beyond this diff (e.g., error handlers, catch blocks, aria-labels). The diff only translates happy-path messages.

14. Test coverage

Add a test that switches locale while an error is shown and asserts the message updates — this is the riskiest new behavior.

Summary

No blocking bugs. Main risks: (a) rules-object identity change + relying on manual revalidation, (b) cross-namespace translation key auth.credentials.validation.passwordRequired must exist. Everything else is stylistic or minor UX polish.