xinyouhe/photo-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/lib/pages/home_page.dart
+231 -97
View File
@@ -6,6 +6,7 @@ import '../core/api_client.dart';
import '../features/uploads/engine_scope.dart';
import '../features/uploads/queue_controller.dart';
import '../l10n/app_localizations.dart';
import '../ui/components/language_sheet.dart';
import '../ui/components/section_header.dart';
import '../ui/tokens.dart';
import 'albums_tab.dart';
@@ -92,9 +93,15 @@ class _UploadTabIcon extends StatelessWidget {
}
}
/// 设置页（UI-01 §4.5 分组重构）：账号 / 语言 / 安全（改密 + 退出）/
/// 上传帮助 / 关于（版本）。退出登录确认弹窗明确「本机任务保留，重新
/// 登录后继续」——不承诺退出后后台继续上传。
/// 设置页（UI-03 页面 02 重设计，图01）：账号摘要卡（首字母头像 + 账号）
/// → 通用分组（Language / Change password / Upload help / App version）
/// → 退出登录（低强调红色，单独分离）。
///
/// 账号卡不是「编辑资料」入口（无编辑功能，无导航箭头）；会话契约无
/// 自身显示名/角色字段，卡片只展示真实可得的账号。语言行显示档位
/// 自身名称；版本取 [kAppVersion]。上传帮助为本地说明面板（不承诺
/// 后台百分百持续）。退出若存在进行中任务，确认弹窗明确任务保留、
/// 重新登录后继续——不承诺退出后后台继续上传。
class SettingsTab extends ConsumerWidget {
const SettingsTab({super.key});
@@ -106,49 +113,67 @@ class SettingsTab extends ConsumerWidget {
AppLocaleChoice.en => l10n.localeEnglish,
};
Future<void> _pickLocale(
BuildContext context,
WidgetRef ref,
AppLocaleChoice current,
) {
/// 上传帮助面板（本地说明：网络等待/系统后台限制/强退恢复）。
Future<void> _showUploadHelp(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
return showModalBottomSheet<void>(
context: context,
showDragHandle: true,
builder: (sheetContext) {
final l10n = AppLocalizations.of(sheetContext);
// 打开时刻的快照即可：选中即 pop，无滞留期间的陈旧选中态。
return SafeArea(
child: RadioGroup<AppLocaleChoice>(
groupValue: current,
onChanged: (choice) {
if (choice == null) return;
ref.read(localeSettingsProvider.notifier).setChoice(choice);
Navigator.of(sheetContext).pop();
},
builder: (sheetContext) => SafeArea(
top: false,
child: SingleChildScrollView(
// 长文案/大字体下允许滚动，面板不做固定高度。
child: Padding(
padding: const EdgeInsets.fromLTRB(
kSpace24, 0, kSpace24, kSpace24,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (final choice in AppLocaleChoice.values)
RadioListTile<AppLocaleChoice>(
value: choice,
title: Text(_choiceLabel(l10n, choice)),
Text(
l10n.settingsUploadHelpTitle,
style: theme.textTheme.titleMedium,
),
const SizedBox(height: kSpace12),
Text(
l10n.settingsUploadHelpBody,
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
height: 1.5,
),
),
const SizedBox(height: kSpace16),
FilledButton(
onPressed: () => Navigator.of(sheetContext).pop(),
child: Text(l10n.ok),
),
],
),
),
);
},
),
),
);
}
/// 退出确认：明确本地任务保留、重新登录后继续（不承诺后台继续上传）。
Future<void> _confirmLogout(BuildContext context, WidgetRef ref) async {
/// 退出确认：有进行中任务时明确本地任务保留、重新登录后继续
/// （不承诺后台继续上传）；无任务时为常规确认。
Future<void> _confirmLogout(
BuildContext context,
WidgetRef ref,
int unfinishedTasks,
) async {
final l10n = AppLocalizations.of(context);
final confirmed = await showDialog<bool>(
context: context,
builder: (dialogContext) => AlertDialog(
title: Text(l10n.logoutConfirmTitle),
content: Text(l10n.logoutConfirmBody),
content: Text(
unfinishedTasks > 0
? l10n.logoutConfirmBody
: l10n.logoutConfirmBodyIdle,
),
actions: [
TextButton(
onPressed: () => Navigator.of(dialogContext).pop(false),
@@ -177,96 +202,119 @@ class SettingsTab extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
final choice = ref.watch(localeSettingsProvider);
final account = ref.watch(sessionAccountProvider).value;
// 进行中任务数（底部导航角标同口径）：退出确认文案分流。
final unfinishedTasks = ref.watch(uploadBadgeCountProvider);
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(title: Text(l10n.settings)),
body: ListView(
padding: const EdgeInsets.symmetric(vertical: kSpace8)
.copyWith(bottom: kSpace16),
padding: const EdgeInsets.fromLTRB(0, kSpace8, 0, kSpace24),
children: [
// ── 账号 ────────────────────────────────────────────────
// ── 账号摘要卡（只读展示，非编辑入口） ─────────────────
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, kSpace16, kSpace16, kSpace8,
kSpace16, kSpace8, kSpace16, kSpace8,
),
child: SectionHeader(title: l10n.settingsSectionAccount),
),
ListTile(
leading: const Icon(Icons.person_outline),
title: Text(account ?? l10n.notSet),
subtitle: Text(l10n.settingsSignedInAccount),
Card(
margin: const EdgeInsets.symmetric(horizontal: kSpace16),
child: Padding(
padding: const EdgeInsets.all(kSpace16),
child: Row(
children: [
_AccountAvatar(account: account),
const SizedBox(width: kSpace16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
account ?? l10n.notSet,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.titleSmall,
),
const SizedBox(height: kSpace4),
Text(
l10n.settingsSignedInAccount,
style: theme.textTheme.bodySmall,
),
],
),
),
],
),
),
),
// ── 语言 ────────────────────────────────────────────────
// ── 通用：语言 / 改密 / 上传帮助 / 版本 ──────────────────
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, kSpace16, kSpace16, kSpace8,
kSpace16, kSpace24, kSpace16, kSpace8,
),
child: SectionHeader(title: l10n.settingsSectionLanguage),
child: SectionHeader(title: l10n.settingsSectionGeneral),
),
// 分组已名「语言」，行标题直接显示当前档位（避免同名重复）。
ListTile(
leading: const Icon(Icons.language),
title: Text(_choiceLabel(l10n, choice)),
trailing: const Icon(Icons.chevron_right),
onTap: () => _pickLocale(context, ref, choice),
),
// ── 安全：改密 + 退出（确认后清会话） ────────────────────
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, kSpace16, kSpace16, kSpace8,
),
child: SectionHeader(title: l10n.settingsSectionSecurity),
),
ListTile(
leading: const Icon(Icons.password_outlined),
title: Text(l10n.passwordChangeTitle),
onTap: () => Navigator.of(context).pushNamed('/password-change'),
),
ListTile(
leading: const Icon(Icons.logout),
title: Text(l10n.logout),
onTap: () => _confirmLogout(context, ref),
),
// ── 上传帮助：系统限制 / 强退 / 网络等待三分态说明 ────────
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, kSpace16, kSpace16, kSpace8,
),
child: SectionHeader(title: l10n.settingsSectionUploadHelp),
),
ExpansionTile(
leading: const Icon(Icons.help_outline),
title: Text(l10n.settingsUploadHelpTitle),
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, 0, kSpace16, kSpace16,
Card(
margin: const EdgeInsets.symmetric(horizontal: kSpace16),
clipBehavior: Clip.antiAlias,
child: Column(
children: [
_SettingsRow(
icon: Icons.language,
label: l10n.language,
trailing: Text(
_choiceLabel(l10n, choice),
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
chevron: true,
onTap: () => showLanguageSheet(context),
),
child: Text(
l10n.settingsUploadHelpBody,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
const Divider(indent: kSpace16, endIndent: kSpace16),
_SettingsRow(
icon: Icons.password_outlined,
label: l10n.passwordChangeTitle,
chevron: true,
onTap: () =>
Navigator.of(context).pushNamed('/password-change'),
),
const Divider(indent: kSpace16, endIndent: kSpace16),
_SettingsRow(
icon: Icons.help_outline,
label: l10n.settingsSectionUploadHelp,
chevron: true,
onTap: () => _showUploadHelp(context),
),
const Divider(indent: kSpace16, endIndent: kSpace16),
_SettingsRow(
icon: Icons.info_outline,
label: l10n.settingsVersion,
trailing: Text(
kAppVersion,
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
),
),
],
),
// ── 关于：版本 ──────────────────────────────────────────
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace16, kSpace16, kSpace16, kSpace8,
],
),
child: SectionHeader(title: l10n.settingsSectionAbout),
),
ListTile(
leading: const Icon(Icons.info_outline),
title: Text(l10n.settingsVersion),
trailing: Text(
kAppVersion,
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
// ── 退出登录：低强调红色，与常规分组分离 ─────────────────
Padding(
padding: const EdgeInsets.only(top: kSpace24),
child: Align(
alignment: Alignment.center,
child: TextButton(
style: TextButton.styleFrom(
foregroundColor: theme.colorScheme.error,
minimumSize: const Size(48, 48),
),
onPressed: () =>
_confirmLogout(context, ref, unfinishedTasks),
child: Text(l10n.logout),
),
),
),
@@ -275,3 +323,89 @@ class SettingsTab extends ConsumerWidget {
);
}
}
/// 账号首字母头像占位（无真实头像数据；缺失回退「?」）。
class _AccountAvatar extends StatelessWidget {
const _AccountAvatar({required this.account});
final String? account;
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final initial = (account == null || account!.isEmpty)
? '?'
: account!.characters.first.toUpperCase();
return CircleAvatar(
radius: 24,
backgroundColor: scheme.primary,
foregroundColor: scheme.onPrimary,
child: Text(
initial,
style: Theme.of(context).textTheme.titleMedium,
),
);
}
}
/// 设置行：图标 + 标题 + 可选尾值/箭头，触控高 ≥48。
class _SettingsRow extends StatelessWidget {
const _SettingsRow({
required this.icon,
required this.label,
this.trailing,
this.chevron = false,
this.onTap,
});
final IconData icon;
final String label;
final Widget? trailing;
/// 是否显示导航箭头（仅可进入的行显示）。
final bool chevron;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return InkWell(
onTap: onTap,
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 56),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: kSpace16,
vertical: kSpace12,
),
child: Row(
children: [
Icon(icon, size: 24, color: scheme.onSurfaceVariant),
const SizedBox(width: kSpace16),
Expanded(
child: Text(
label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyLarge,
),
),
if (trailing != null) ...[
const SizedBox(width: kSpace8),
trailing!,
],
if (chevron) ...[
const SizedBox(width: kSpace4),
Icon(
Icons.chevron_right,
size: 24,
color: scheme.onSurfaceVariant,
),
],
],
),
),
),
);
}
}
apps/mobile/lib/pages/login_page.dart
+310 -64
View File
@@ -1,10 +1,12 @@
/// 登录页（UI-01 §4.5 主题统一，P3 计划 Task 3 基础）。
/// 登录页（UI-03 页面 01 重设计，图01）。
///
/// 账号/密码表单 → [ApiClient.login]（会话由客户端自动持久化到
/// SessionStore）→ 成功 pushReplacement /home；失败以内联 StateBadge
/// （图标 + 文案 + 错误色）展示错误码本地化文案（AUTH_RATE_LIMITED 文案
/// 自带「稍后再试」；网络/校验错误各有专属文案）。提交期间按钮进入
/// 加载态防重复提交。
/// 结构：摄影拼贴顶部（渐变占位）→ 品牌 → 主标题（l10n `loginTitle`）
/// → 简短说明 → 账号/密码（显示/隐藏切换）→ Sign in → 管理员提供账号
/// 说明；右上角语言选择（复用 [showLanguageSheet]）。
///
/// 拼贴高度随可用高度自适应（正常 25%-32%；短屏/键盘开启时压缩），
/// 整页可滚动；提交期间禁用防重复，失败在表单附近以 StateBadge 展示
/// 错误码本地化文案。无注册/飞书/找回密码入口。
library;
import 'package:flutter/material.dart';
@@ -15,6 +17,7 @@ import '../core/app_exception.dart';
import '../core/error_l10n.dart';
import '../features/uploads/engine_scope.dart';
import '../l10n/app_localizations.dart';
import '../ui/components/language_sheet.dart';
import '../ui/components/state_badge.dart';
import '../ui/tokens.dart';
@@ -32,6 +35,7 @@ class _LoginPageState extends ConsumerState<LoginPage> {
final _passwordController = TextEditingController();
bool _submitting = false;
bool _obscurePassword = true;
/// 最近一次提交失败文案（内联 StateBadge 展示；null = 无错误）。
String? _errorText;
@@ -72,69 +76,311 @@ class _LoginPageState extends ConsumerState<LoginPage> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final l10n = AppLocalizations.of(context);
return Scaffold(
appBar: AppBar(title: Text(l10n.appName)),
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Padding(
padding: const EdgeInsets.all(kSpace24),
child: Form(
key: _formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
controller: _accountController,
autofillHints: const [AutofillHints.username],
decoration: InputDecoration(labelText: l10n.username),
validator: (value) =>
(value == null || value.trim().isEmpty)
? l10n.fieldRequired
: null,
),
const SizedBox(height: kSpace16),
TextFormField(
controller: _passwordController,
obscureText: true,
enableSuggestions: false,
autocorrect: false,
autofillHints: const [AutofillHints.password],
onFieldSubmitted: (_) => _submitting ? null : _submit(),
decoration: InputDecoration(labelText: l10n.password),
validator: (value) => (value == null || value.isEmpty)
? l10n.fieldRequired
: null,
),
if (_errorText != null) ...[
const SizedBox(height: kSpace16),
StateBadge(
variant: BadgeVariant.error,
label: _errorText!,
// 顶部拼贴通到状态栏后（无 AppBar）；键盘由 Scaffold 默认压缩 body。
body: SafeArea(
top: false,
child: LayoutBuilder(
builder: (context, constraints) {
final keyboardOpen =
MediaQuery.of(context).viewInsets.bottom > 0;
// 正常高度 28%（25%-32% 区间）；键盘/短屏压缩至 10%。
final headerHeight = (constraints.maxHeight *
(keyboardOpen ? 0.10 : 0.28))
.clamp(96.0, 320.0);
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
_CollageHeader(height: headerHeight),
Padding(
padding: const EdgeInsets.fromLTRB(
kSpace24, kSpace24, kSpace24, kSpace24,
),
child: ConstrainedBox(
constraints:
const BoxConstraints(maxWidth: 460),
child: Form(
key: _formKey,
autovalidateMode:
AutovalidateMode.onUserInteraction,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
_BrandRow(),
const SizedBox(height: kSpace16),
Text(
l10n.loginTitle,
style: theme.textTheme.titleLarge,
),
const SizedBox(height: kSpace8),
Text(
l10n.loginSubtitle,
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: kSpace24),
TextFormField(
controller: _accountController,
autofillHints: const [
AutofillHints.username,
],
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: l10n.username,
),
validator: (value) => (value == null ||
value.trim().isEmpty)
? l10n.fieldRequired
: null,
),
const SizedBox(height: kSpace16),
TextFormField(
controller: _passwordController,
obscureText: _obscurePassword,
enableSuggestions: false,
autocorrect: false,
autofillHints: const [
AutofillHints.password,
],
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) =>
_submitting ? null : _submit(),
decoration: InputDecoration(
labelText: l10n.password,
suffixIcon: Tooltip(
message: _obscurePassword
? l10n.loginShowPassword
: l10n.loginHidePassword,
child: IconButton(
onPressed: () => setState(
() => _obscurePassword =
!_obscurePassword,
),
icon: Icon(
_obscurePassword
? Icons.visibility_outlined
: Icons
.visibility_off_outlined,
size: 24,
),
),
),
),
validator: (value) => (value == null ||
value.isEmpty)
? l10n.fieldRequired
: null,
),
if (_errorText != null) ...[
const SizedBox(height: kSpace16),
StateBadge(
variant: BadgeVariant.error,
label: _errorText!,
),
],
const SizedBox(height: kSpace24),
FilledButton(
onPressed: _submitting ? null : _submit,
child: _submitting
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: Text(l10n.login),
),
const SizedBox(height: kSpace12),
Text(
l10n.loginAskAdmin,
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(
color:
theme.colorScheme.onSurfaceVariant,
),
),
],
),
),
),
),
],
const SizedBox(height: kSpace24),
FilledButton(
onPressed: _submitting ? null : _submit,
child: _submitting
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(strokeWidth: 2),
)
: Text(l10n.login),
),
const SizedBox(height: kSpace12),
Text(
l10n.loginHint,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
);
},
),
),
);
}
}
/// 摄影拼贴顶部（渐变 + 半透明照片色块占位）+ 右上语言选择入口。
///
/// TODO(brand-asset): 换用项目正式品牌/摄影素材（UI-03 §3.1：不得裁切
/// 设计板图片作背景；当前为可替换的中性渐变占位，不依赖远程图库）。
class _CollageHeader extends StatelessWidget {
const _CollageHeader({required this.height});
/// 占位高度（调用方按可用高度/键盘状态计算）。
final double height;
/// 拼贴占位（测试定位用）。
static const Key collageKey = Key('login-collage');
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final soft = Color.lerp(scheme.primary, scheme.surface, 0.55);
return SizedBox(
height: height,
child: Stack(
children: [
// 渐变拼贴占位（浅深色均由语义色派生，不硬编码白 token）。
Container(
key: collageKey,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [scheme.primary, soft!],
),
),
),
// 半透明「照片」色块（模拟拼贴节奏的装饰，可整体替换）。
Positioned(
left: 28,
top: 24,
child: _tile(120, 84, Colors.white.withValues(alpha: 0.16),
rotate: -0.08),
),
Positioned(
right: 44,
top: 40,
child: _tile(132, 92, Colors.white.withValues(alpha: 0.12),
rotate: 0.06),
),
Positioned(
left: 96,
bottom: 18,
child: _tile(150, 72, Colors.white.withValues(alpha: 0.10),
rotate: -0.04),
),
// 右上语言选择（浮于拼贴之上）。
Positioned(
top: MediaQuery.paddingOf(context).top + 8,
right: kSpace12,
child: const _LanguagePill(),
),
],
),
);
}
Widget _tile(double width, double height, Color color,
{double rotate = 0}) {
return Transform.rotate(
angle: rotate,
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(kRadiusInput),
),
),
);
}
}
/// 品牌行：小 logo 点 + 产品名（沿用现有 appName，不新增 slogan）。
class _BrandRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(10),
),
child: Icon(
Icons.photo_camera_outlined,
size: 18,
color: theme.colorScheme.onPrimary,
),
),
const SizedBox(width: kSpace12),
Text(
AppLocalizations.of(context).appName,
style: theme.textTheme.titleSmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
],
);
}
}
/// 语言选择胶囊（显示当前生效语言简称，点开共享语言面板）。
class _LanguagePill extends StatelessWidget {
const _LanguagePill();
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final l10n = AppLocalizations.of(context);
final isZh =
Localizations.maybeLocaleOf(context)?.languageCode == 'zh';
return Semantics(
label: l10n.language,
button: true,
child: Material(
color: theme.colorScheme.surface.withValues(alpha: 0.92),
borderRadius: BorderRadius.circular(20),
child: InkWell(
onTap: () => showLanguageSheet(context),
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: kSpace12,
vertical: kSpace8,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.language,
size: 18,
color: theme.colorScheme.onSurface,
),
const SizedBox(width: kSpace4),
Text(
isZh ? '中文' : 'EN',
style: theme.textTheme.labelMedium?.copyWith(
color: theme.colorScheme.onSurface,
),
),
Icon(
Icons.arrow_drop_down,
size: 18,
color: theme.colorScheme.onSurfaceVariant,
),
],
),
),
),
apps/mobile/lib/pages/password_change_page.dart
+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,
),
),
);
}
}