feat(mobile): UI-03 theme calibration and account pages (01-04)

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-22 00:28:39 +08:00
parent 9d521ff9da
commit 95e8417553
14 changed files with 1462 additions and 234 deletions
+78 -25
View File
@@ -1,10 +1,12 @@
/// 修改密码页(UI-01 §4.5 主题统一,P3 计划 Task 3 基础;入口在设置页)。
/// 修改密码页(UI-03 页面 03 重设计,图01;入口在设置页)。
///
/// 当前/新/确认三字段;客户端校验(新密码 ≥8 位、两次一致)先行,
/// 服务端 [ApiClient.changePassword] 成功后 204——当前会话被服务端保留,
/// 返回标题 + 简短安全提示 + 当前/新/确认三字段 + Save password。
/// 客户端校验(新密码 ≥8 位、两次一致)先行——新密码变更时若确认字段
/// 已填写会即时复验(不匹配当场提示);服务端
/// [ApiClient.changePassword] 成功后 204——当前会话被服务端保留,
/// 无需重登录:toast 提示后直接 pop 回设置页。失败以内联 StateBadge
/// (图标 + 文案 + 错误色)展示;AUTH_INVALID_CREDENTIALS 在本页语义为
/// 「当前密码错误」(覆写通用映射)。
/// 「当前密码错误」(覆写通用映射)。提交中防重复。
library;
import 'package:flutter/material.dart';
@@ -33,14 +35,29 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
final _newController = TextEditingController();
final _confirmController = TextEditingController();
bool _obscureAll = true;
bool _obscureOld = true;
bool _obscureNew = true;
bool _obscureConfirm = true;
bool _submitting = false;
/// 最近一次提交失败文案(内联 StateBadge 展示;null = 无错误)。
String? _errorText;
@override
void initState() {
super.initState();
// 新密码变更 → 确认字段已填写时即时复验(不匹配当场提示,不等提交)。
_newController.addListener(_revalidateConfirm);
}
void _revalidateConfirm() {
if (_confirmController.text.isEmpty) return;
_formKey.currentState?.validate();
}
@override
void dispose() {
_newController.removeListener(_revalidateConfirm);
_oldController.dispose();
_newController.dispose();
_confirmController.dispose();
@@ -85,6 +102,7 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(title: Text(l10n.passwordChangeTitle)),
body: Center(
@@ -97,16 +115,30 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
key: _formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
l10n.passwordSecurityHint,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: kSpace16),
TextFormField(
controller: _oldController,
obscureText: _obscureAll,
obscureText: _obscureOld,
enableSuggestions: false,
autocorrect: false,
textInputAction: TextInputAction.next,
autofillHints: const [AutofillHints.password],
decoration: InputDecoration(
labelText: l10n.currentPassword,
suffixIcon: _visibilityToggle(
obscure: _obscureOld,
onPressed: () => setState(
() => _obscureOld = !_obscureOld,
),
),
),
validator: (value) => (value == null || value.isEmpty)
? l10n.fieldRequired
@@ -115,11 +147,19 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
const SizedBox(height: kSpace16),
TextFormField(
controller: _newController,
obscureText: _obscureAll,
obscureText: _obscureNew,
enableSuggestions: false,
autocorrect: false,
textInputAction: TextInputAction.next,
autofillHints: const [AutofillHints.newPassword],
decoration: InputDecoration(
labelText: l10n.newPassword,
suffixIcon: _visibilityToggle(
obscure: _obscureNew,
onPressed: () => setState(
() => _obscureNew = !_obscureNew,
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
@@ -132,12 +172,20 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
const SizedBox(height: kSpace16),
TextFormField(
controller: _confirmController,
obscureText: _obscureAll,
obscureText: _obscureConfirm,
enableSuggestions: false,
autocorrect: false,
textInputAction: TextInputAction.done,
autofillHints: const [AutofillHints.newPassword],
onFieldSubmitted: (_) => _submitting ? null : _submit(),
decoration: InputDecoration(
labelText: l10n.confirmNewPassword,
suffixIcon: _visibilityToggle(
obscure: _obscureConfirm,
onPressed: () => setState(
() => _obscureConfirm = !_obscureConfirm,
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
@@ -149,27 +197,14 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
return null;
},
),
const SizedBox(height: kSpace8),
Align(
alignment: Alignment.centerRight,
child: IconButton(
onPressed: () =>
setState(() => _obscureAll = !_obscureAll),
icon: Icon(
_obscureAll
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
),
),
),
if (_errorText != null) ...[
const SizedBox(height: kSpace8),
const SizedBox(height: kSpace16),
StateBadge(
variant: BadgeVariant.error,
label: _errorText!,
),
],
const SizedBox(height: kSpace16),
const SizedBox(height: kSpace24),
FilledButton(
onPressed: _submitting ? null : _submit,
child: _submitting
@@ -178,7 +213,7 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
width: 20,
child: CircularProgressIndicator(strokeWidth: 2),
)
: Text(l10n.passwordChangeTitle),
: Text(l10n.passwordSave),
),
],
),
@@ -189,4 +224,22 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
),
);
}
/// 显示/隐藏切换(Tooltip 提供语义标签;触控目标 48)。
Widget _visibilityToggle({
required bool obscure,
required VoidCallback onPressed,
}) {
final l10n = AppLocalizations.of(context);
return Tooltip(
message: obscure ? l10n.loginShowPassword : l10n.loginHidePassword,
child: IconButton(
onPressed: onPressed,
icon: Icon(
obscure ? Icons.visibility_outlined : Icons.visibility_off_outlined,
size: 24,
),
),
);
}
}