diff --git a/apps/mobile/lib/app/theme.dart b/apps/mobile/lib/app/theme.dart index 6d2fa5a..a27a5cd 100644 --- a/apps/mobile/lib/app/theme.dart +++ b/apps/mobile/lib/app/theme.dart @@ -10,9 +10,9 @@ /// 与内容不做反色处理,沿用跟随系统的深浅色切换。容器色(secondary/ /// primaryContainer 等)由种子色派生,与 #1A73E8 同系。 /// -/// 字阶(fontSize 走 TextScaler,随系统字体缩放):22 页面标题 / -/// 17 分组标题 / 16-14 正文 / 13-12 辅助。组件:主按钮高 48(区间 -/// 48-52)、输入框与按钮圆角 12、卡片圆角 16、Dialog 圆角 16、 +/// 字阶(fontSize 走 TextScaler,随系统字体缩放;UI-03 §3 校准):24 +/// 页面标题 / 17 分组标题 / 16-14 正文 / 13-12 辅助。组件:主按钮高 48 +/// (区间 48-52)、输入框与按钮圆角 12、卡片圆角 16、Dialog 圆角 16、 /// BottomSheet 顶部圆角 16。动效时长常量见 ui/tokens.dart。 library; @@ -211,7 +211,7 @@ abstract final class AppTheme { borderSide: BorderSide(color: color, width: width), ); - /// 字阶(方案 §3.1):22 页面标题 / 17 分组 / 16-14 正文 / 13-12 辅助。 + /// 字阶(UI-03 §3):24 页面标题 / 17 分组 / 16-14 正文 / 13-12 辅助。 /// /// 只声明 fontSize/字重/颜色,字体族与缩放交给默认排版 + TextScaler /// (fontSize 随系统字体大小缩放)。 @@ -220,7 +220,7 @@ abstract final class AppTheme { final onSecondaryText = scheme.onSurfaceVariant; return TextTheme( titleLarge: TextStyle( - fontSize: 22, + fontSize: 24, fontWeight: FontWeight.w600, color: onSurface, ), diff --git a/apps/mobile/lib/l10n/app_en.arb b/apps/mobile/lib/l10n/app_en.arb index ff35b9f..a8863e9 100644 --- a/apps/mobile/lib/l10n/app_en.arb +++ b/apps/mobile/lib/l10n/app_en.arb @@ -37,6 +37,16 @@ "albumUploadsOff": "Uploads off", "albumPublicOff": "Not public", "loginHint": "Sign in with your staff account", + "loginTitle": "Your event. In focus.", + "loginSubtitle": "Sign in to manage albums and photos", + "loginAskAdmin": "Ask admin for account", + "loginShowPassword": "Show password", + "loginHidePassword": "Hide password", + "languageDone": "Done", + "passwordSecurityHint": "Choose a new password with at least 8 characters.", + "passwordSave": "Save password", + "settingsSectionGeneral": "General", + "logoutConfirmBodyIdle": "You will be signed out on this device.", "fieldRequired": "This field is required", "passwordChangeTitle": "Change password", "currentPassword": "Current password", diff --git a/apps/mobile/lib/l10n/app_localizations.dart b/apps/mobile/lib/l10n/app_localizations.dart index b658397..656213a 100644 --- a/apps/mobile/lib/l10n/app_localizations.dart +++ b/apps/mobile/lib/l10n/app_localizations.dart @@ -314,6 +314,66 @@ abstract class AppLocalizations { /// **'使用工作人员账号登录'** String get loginHint; + /// No description provided for @loginTitle. + /// + /// In zh, this message translates to: + /// **'记录每个精彩瞬间。'** + String get loginTitle; + + /// No description provided for @loginSubtitle. + /// + /// In zh, this message translates to: + /// **'登录以管理相册和照片'** + String get loginSubtitle; + + /// No description provided for @loginAskAdmin. + /// + /// In zh, this message translates to: + /// **'请向管理员获取账号'** + String get loginAskAdmin; + + /// No description provided for @loginShowPassword. + /// + /// In zh, this message translates to: + /// **'显示密码'** + String get loginShowPassword; + + /// No description provided for @loginHidePassword. + /// + /// In zh, this message translates to: + /// **'隐藏密码'** + String get loginHidePassword; + + /// No description provided for @languageDone. + /// + /// In zh, this message translates to: + /// **'完成'** + String get languageDone; + + /// No description provided for @passwordSecurityHint. + /// + /// In zh, this message translates to: + /// **'请设置至少 8 个字符的新密码。'** + String get passwordSecurityHint; + + /// No description provided for @passwordSave. + /// + /// In zh, this message translates to: + /// **'保存密码'** + String get passwordSave; + + /// No description provided for @settingsSectionGeneral. + /// + /// In zh, this message translates to: + /// **'通用'** + String get settingsSectionGeneral; + + /// No description provided for @logoutConfirmBodyIdle. + /// + /// In zh, this message translates to: + /// **'将在此设备上退出登录。'** + String get logoutConfirmBodyIdle; + /// No description provided for @fieldRequired. /// /// In zh, this message translates to: diff --git a/apps/mobile/lib/l10n/app_localizations_en.dart b/apps/mobile/lib/l10n/app_localizations_en.dart index 265d55e..e53e7f5 100644 --- a/apps/mobile/lib/l10n/app_localizations_en.dart +++ b/apps/mobile/lib/l10n/app_localizations_en.dart @@ -120,6 +120,37 @@ class AppLocalizationsEn extends AppLocalizations { @override String get loginHint => 'Sign in with your staff account'; + @override + String get loginTitle => 'Your event. In focus.'; + + @override + String get loginSubtitle => 'Sign in to manage albums and photos'; + + @override + String get loginAskAdmin => 'Ask admin for account'; + + @override + String get loginShowPassword => 'Show password'; + + @override + String get loginHidePassword => 'Hide password'; + + @override + String get languageDone => 'Done'; + + @override + String get passwordSecurityHint => + 'Choose a new password with at least 8 characters.'; + + @override + String get passwordSave => 'Save password'; + + @override + String get settingsSectionGeneral => 'General'; + + @override + String get logoutConfirmBodyIdle => 'You will be signed out on this device.'; + @override String get fieldRequired => 'This field is required'; diff --git a/apps/mobile/lib/l10n/app_localizations_zh.dart b/apps/mobile/lib/l10n/app_localizations_zh.dart index 34d34f6..afacf19 100644 --- a/apps/mobile/lib/l10n/app_localizations_zh.dart +++ b/apps/mobile/lib/l10n/app_localizations_zh.dart @@ -119,6 +119,36 @@ class AppLocalizationsZh extends AppLocalizations { @override String get loginHint => '使用工作人员账号登录'; + @override + String get loginTitle => '记录每个精彩瞬间。'; + + @override + String get loginSubtitle => '登录以管理相册和照片'; + + @override + String get loginAskAdmin => '请向管理员获取账号'; + + @override + String get loginShowPassword => '显示密码'; + + @override + String get loginHidePassword => '隐藏密码'; + + @override + String get languageDone => '完成'; + + @override + String get passwordSecurityHint => '请设置至少 8 个字符的新密码。'; + + @override + String get passwordSave => '保存密码'; + + @override + String get settingsSectionGeneral => '通用'; + + @override + String get logoutConfirmBodyIdle => '将在此设备上退出登录。'; + @override String get fieldRequired => '此项为必填项'; diff --git a/apps/mobile/lib/l10n/app_zh.arb b/apps/mobile/lib/l10n/app_zh.arb index 886b361..326442f 100644 --- a/apps/mobile/lib/l10n/app_zh.arb +++ b/apps/mobile/lib/l10n/app_zh.arb @@ -37,6 +37,16 @@ "albumUploadsOff": "上传已关闭", "albumPublicOff": "未公开", "loginHint": "使用工作人员账号登录", + "loginTitle": "记录每个精彩瞬间。", + "loginSubtitle": "登录以管理相册和照片", + "loginAskAdmin": "请向管理员获取账号", + "loginShowPassword": "显示密码", + "loginHidePassword": "隐藏密码", + "languageDone": "完成", + "passwordSecurityHint": "请设置至少 8 个字符的新密码。", + "passwordSave": "保存密码", + "settingsSectionGeneral": "通用", + "logoutConfirmBodyIdle": "将在此设备上退出登录。", "fieldRequired": "此项为必填项", "passwordChangeTitle": "修改密码", "currentPassword": "当前密码", diff --git a/apps/mobile/lib/pages/home_page.dart b/apps/mobile/lib/pages/home_page.dart index 9ae4699..2860e05 100644 --- a/apps/mobile/lib/pages/home_page.dart +++ b/apps/mobile/lib/pages/home_page.dart @@ -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 _pickLocale( - BuildContext context, - WidgetRef ref, - AppLocaleChoice current, - ) { + /// 上传帮助面板(本地说明:网络等待/系统后台限制/强退恢复)。 + Future _showUploadHelp(BuildContext context) { + final l10n = AppLocalizations.of(context); + final theme = Theme.of(context); return showModalBottomSheet( context: context, showDragHandle: true, - builder: (sheetContext) { - final l10n = AppLocalizations.of(sheetContext); - // 打开时刻的快照即可:选中即 pop,无滞留期间的陈旧选中态。 - return SafeArea( - child: RadioGroup( - 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( - 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 _confirmLogout(BuildContext context, WidgetRef ref) async { + /// 退出确认:有进行中任务时明确本地任务保留、重新登录后继续 + /// (不承诺后台继续上传);无任务时为常规确认。 + Future _confirmLogout( + BuildContext context, + WidgetRef ref, + int unfinishedTasks, + ) async { final l10n = AppLocalizations.of(context); final confirmed = await showDialog( 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, + ), + ], + ], + ), + ), + ), + ); + } +} diff --git a/apps/mobile/lib/pages/login_page.dart b/apps/mobile/lib/pages/login_page.dart index 569134b..ad5afb4 100644 --- a/apps/mobile/lib/pages/login_page.dart +++ b/apps/mobile/lib/pages/login_page.dart @@ -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 { final _passwordController = TextEditingController(); bool _submitting = false; + bool _obscurePassword = true; /// 最近一次提交失败文案(内联 StateBadge 展示;null = 无错误)。 String? _errorText; @@ -72,69 +76,311 @@ class _LoginPageState extends ConsumerState { @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, + ), + ], ), ), ), diff --git a/apps/mobile/lib/pages/password_change_page.dart b/apps/mobile/lib/pages/password_change_page.dart index 34788fa..9e19a78 100644 --- a/apps/mobile/lib/pages/password_change_page.dart +++ b/apps/mobile/lib/pages/password_change_page.dart @@ -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 { 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 { @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 { 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 { 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 { 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 { 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 { width: 20, child: CircularProgressIndicator(strokeWidth: 2), ) - : Text(l10n.passwordChangeTitle), + : Text(l10n.passwordSave), ), ], ), @@ -189,4 +224,22 @@ class _PasswordChangePageState extends ConsumerState { ), ); } + + /// 显示/隐藏切换(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, + ), + ), + ); + } } diff --git a/apps/mobile/lib/ui/components/language_sheet.dart b/apps/mobile/lib/ui/components/language_sheet.dart new file mode 100644 index 0000000..0cfc424 --- /dev/null +++ b/apps/mobile/lib/ui/components/language_sheet.dart @@ -0,0 +1,168 @@ +/// 语言选择 BottomSheet(UI-03 页面 04,登录页与设置页复用)。 +/// +/// 带拖柄;「Follow device / English / 中文」各以自身语言书写。临时 +/// 选中(点击仅切换视觉标记)+ **Done 提交**——滑动关闭/点外部取消 +/// 不改动语言偏好;提交后经 [LocaleSettings.setChoice] 统一刷新 +/// (MaterialApp 重建,IndexedStack 页签状态不受影响)。 +/// +/// 选项行为自绘单选圆点(触控行高 ≥48,选中态主色填充),Semantics +/// 携带选中状态(读屏不依赖颜色)。 +library; + +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; + +import '../../app/locale_controller.dart'; +import '../../l10n/app_localizations.dart'; +import '../tokens.dart'; + +/// 打开语言选择面板(唯一入口,两处调用共用同一行为)。 +Future showLanguageSheet(BuildContext context) { + return showModalBottomSheet( + context: context, + showDragHandle: true, + builder: (sheetContext) => const LanguageSheet(), + ); +} + +/// 语言选择面板内容:临时选中 + Done 提交。 +class LanguageSheet extends ConsumerStatefulWidget { + const LanguageSheet({super.key}); + + @override + ConsumerState createState() => _LanguageSheetState(); +} + +class _LanguageSheetState extends ConsumerState { + /// 临时选中(打开时刻快照;未点 Done 离开即丢弃)。 + late AppLocaleChoice _selected = ref.read(localeSettingsProvider); + + /// 档位 → 展示名(语言名固定以自身语言书写,不随界面语言变化)。 + String _labelOf(AppLocalizations l10n, AppLocaleChoice choice) => + switch (choice) { + AppLocaleChoice.system => l10n.localeFollowSystem, + AppLocaleChoice.zh => l10n.localeChinese, + AppLocaleChoice.en => l10n.localeEnglish, + }; + + @override + Widget build(BuildContext context) { + final l10n = AppLocalizations.of(context); + return SafeArea( + top: false, + child: Padding( + padding: const EdgeInsets.fromLTRB( + kSpace16, 0, kSpace16, kSpace16, + ), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + for (final choice in AppLocaleChoice.values) + _LanguageOptionRow( + label: _labelOf(l10n, choice), + selected: choice == _selected, + onTap: () => setState(() => _selected = choice), + ), + const SizedBox(height: kSpace16), + FilledButton( + onPressed: _commit, + child: Text(l10n.languageDone), + ), + ], + ), + ), + ); + } + + /// Done 提交:写入档位后关闭(滑动关闭/取消路径不经过这里)。 + Future _commit() async { + final navigator = Navigator.of(context); + await ref + .read(localeSettingsProvider.notifier) + .setChoice(_selected); + navigator.pop(); + } +} + +/// 单个语言选项行:整行可点(≥48 触控高)+ 自绘单选圆点。 +class _LanguageOptionRow extends StatelessWidget { + const _LanguageOptionRow({ + required this.label, + required this.selected, + required this.onTap, + }); + + final String label; + final bool selected; + final VoidCallback onTap; + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + return Semantics( + selected: selected, + button: true, + child: InkWell( + onTap: onTap, + borderRadius: BorderRadius.circular(kRadiusInput), + child: Container( + constraints: const BoxConstraints(minHeight: 48), + padding: const EdgeInsets.symmetric(vertical: kSpace12), + child: Row( + children: [ + Expanded( + child: Text( + label, + style: theme.textTheme.bodyLarge?.copyWith( + fontWeight: selected ? FontWeight.w600 : null, + color: selected + ? theme.colorScheme.primary + : theme.colorScheme.onSurface, + ), + ), + ), + const SizedBox(width: kSpace12), + _RadioDot(selected: selected), + ], + ), + ), + ), + ); + } +} + +/// 自绘单选圆点(20dp):未选 = 分隔色描边空心,选中 = 主色描边 + +/// 主色内点;配 [Semantics.selected] 提供非视觉状态。 +class _RadioDot extends StatelessWidget { + const _RadioDot({required this.selected}); + + final bool selected; + + @override + Widget build(BuildContext context) { + final scheme = Theme.of(context).colorScheme; + final color = selected ? scheme.primary : scheme.outline; + return Container( + width: 20, + height: 20, + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.fromBorderSide( + BorderSide(color: color, width: 2), + ), + ), + alignment: Alignment.center, + child: selected + ? Container( + width: 10, + height: 10, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: scheme.primary, + ), + ) + : null, + ); + } +} diff --git a/apps/mobile/test/app/theme_test.dart b/apps/mobile/test/app/theme_test.dart index 7dea6ad..ffe933d 100644 --- a/apps/mobile/test/app/theme_test.dart +++ b/apps/mobile/test/app/theme_test.dart @@ -1,9 +1,9 @@ /// UI-01 主题一致性测试(Task 3)。 /// /// 覆盖:浅色 ColorScheme 方案 §3.1 精确值、深色语义对应值、字阶 -/// (22/17/16-14/13-12)、组件主题(按钮高 48/圆角 12、输入圆角 12、 -/// Dialog 圆角 16、BottomSheet 顶部圆角 16、AppBar titleLarge)、动效 -/// 令牌(含「减少动态效果」归零)。 +/// (UI-03 §3 校准:24/17/16-14/13-12)、组件主题(按钮高 48/圆角 12、 +/// 输入圆角 12、Dialog 圆角 16、BottomSheet 顶部圆角 16、AppBar +/// titleLarge)、动效令牌(含「减少动态效果」归零)。 library; import 'package:flutter/material.dart'; @@ -57,8 +57,8 @@ void main() { group('字阶(随系统缩放:fontSize 走 TextScaler)', () { final textTheme = AppTheme.light.textTheme; - test('22 页面标题 / 17 分组 / 16-14 正文 / 13-12 辅助', () { - expect(textTheme.titleLarge!.fontSize, 22); + test('24 页面标题 / 17 分组 / 16-14 正文 / 13-12 辅助', () { + expect(textTheme.titleLarge!.fontSize, 24); expect(textTheme.titleMedium!.fontSize, 17); expect(textTheme.bodyLarge!.fontSize, 16); expect(textTheme.bodyMedium!.fontSize, 14); @@ -67,7 +67,7 @@ void main() { }); test('AppBar 标题用 titleLarge', () { - expect(AppTheme.light.appBarTheme.titleTextStyle!.fontSize, 22); + expect(AppTheme.light.appBarTheme.titleTextStyle!.fontSize, 24); }); }); diff --git a/apps/mobile/test/pages/account_pages_ui03_test.dart b/apps/mobile/test/pages/account_pages_ui03_test.dart new file mode 100644 index 0000000..e846429 --- /dev/null +++ b/apps/mobile/test/pages/account_pages_ui03_test.dart @@ -0,0 +1,453 @@ +/// UI-03 页面 01-04(登录/设置/修改密码/语言选择)重设计回归。 +/// +/// 覆盖:登录拼贴占位与 l10n 文案、密码显示/隐藏切换、键盘压缩布局、 +/// 登录页右上语言入口复用共享面板;设置账号摘要卡(首字母头像)、分组 +/// 与真实版本号、上传帮助面板、退出确认(有任务/无任务两态);修改密码 +/// 确认不匹配即时提示(修正新密码即清除)、提交中防重复;语言面板 +/// Done 提交/取消不改(各语言以自身语言书写)。 +library; + +import 'dart:async'; + +import 'package:dio/dio.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:photo_live/app/locale_controller.dart'; +import 'package:photo_live/core/api_client.dart'; +import 'package:photo_live/core/error_codes.dart'; +import 'package:photo_live/core/session_store.dart'; +import 'package:photo_live/features/uploads/task_state.dart'; +import 'package:photo_live/features/uploads/task_store.dart'; +import 'package:photo_live/l10n/app_localizations.dart'; +import 'package:photo_live/pages/home_page.dart'; +import 'package:photo_live/pages/login_page.dart'; +import 'package:photo_live/pages/password_change_page.dart'; + +import '../helpers/fakes.dart'; + +void main() { + late FakeSessionStore session; + late TaskStore taskStore; + + setUp(() { + session = FakeSessionStore(); + taskStore = TaskStore.memory(); + }); + + ApiClient clientOf(FakeAdapter adapter) => ApiClient( + sessionStore: session, + dio: Dio(BaseOptions(baseUrl: 'http://test.local')) + ..httpClientAdapter = adapter, + ); + + /// 登录页(默认 en;不触网——未提交不发请求)。 + Future pumpLogin(WidgetTester tester, ApiClient client) async { + await tester.pumpWidget( + ProviderScope( + overrides: [...pageTestOverrides(session: session, client: client)], + child: MaterialApp( + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: const LoginPage(), + ), + ), + ); + await tester.pumpAndSettle(); + } + + /// 主壳设置页签(IndexedStack 三页签同建:相册列表走空页兜底)。 + Future pumpSettings( + WidgetTester tester, { + FakeLocaleStore? localeStore, + AppLocaleChoice initialLocale = AppLocaleChoice.system, + }) async { + final adapter = FakeAdapter( + (o) => o.path == '/v1/albums' + ? (200, cursorPageBody(>[])) + : throw StateError('unexpected ${o.path}'), + ); + final store = localeStore ?? FakeLocaleStore(); + await tester.pumpWidget( + ProviderScope( + overrides: [ + ...pageTestOverrides( + session: session, + taskStore: taskStore, + client: clientOf(adapter), + ), + localeSettingsProvider.overrideWith( + () => LocaleSettings(initial: initialLocale, store: store), + ), + ], + child: MaterialApp( + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: const HomePage(), + ), + ), + ); + await tester.pumpAndSettle(); + // 切到设置页签(底部导航第三项;IndexedStack 默认在相册页签)。 + await tester.tap(find.byIcon(Icons.settings_outlined)); + await tester.pumpAndSettle(); + return ProviderScope.containerOf( + tester.element(find.byType(HomePage)), + ); + } + + /// 修改密码页(推入命名路由,上级页面带 MARK)。 + Future pumpPasswordChange(WidgetTester tester, ApiClient client) async { + await tester.pumpWidget( + ProviderScope( + overrides: [apiClientProvider.overrideWith((ref) => client)], + child: MaterialApp( + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: const Scaffold(body: Center(child: Text('MARK'))), + routes: { + '/password-change': (context) => const PasswordChangePage(), + }, + ), + ), + ); + tester + .state(find.byType(Navigator).first) + .pushNamed('/password-change'); + await tester.pumpAndSettle(); + } + + UploadTaskDraft makeDraft(String id) => UploadTaskDraft( + id: id, + accountId: 'staff01', + albumId: 'alb-1', + clientTaskId: 'ct-$id', + sourceFilePath: '/tmp/$id.jpg', + filename: '$id.jpg', + bytes: 10, + contentType: 'image/jpeg', + ); + + /// 任务库写通知 → 200ms 防抖后角标计数生效。 + Future pumpCounts(WidgetTester tester) async { + await tester.pump(const Duration(milliseconds: 450)); + } + + group('页面 01 登录', () { + testWidgets('拼贴占位 + 主标题/说明/管理员提示均来自 l10n', (tester) async { + await pumpLogin(tester, clientOf(FakeAdapter( + (o) => throw StateError('不应发起请求: ${o.path}')))); + + expect(find.byKey(const Key('login-collage')), findsOneWidget, + reason: '拼贴渐变占位在场'); + expect(find.text('Your event. In focus.'), findsOneWidget); + expect( + find.text('Sign in to manage albums and photos'), + findsOneWidget, + ); + expect(find.text('Ask admin for account'), findsOneWidget); + }); + + testWidgets('密码显示/隐藏切换(Tooltip 语义 + obscureText 翻转)', + (tester) async { + await pumpLogin(tester, clientOf(FakeAdapter( + (o) => throw StateError('不应发起请求: ${o.path}')))); + + TextField passwordField() => tester.widget( + find.descendant( + of: find.widgetWithText(TextFormField, 'Password'), + matching: find.byType(TextField), + ), + ); + expect(passwordField().obscureText, isTrue); + expect(find.byTooltip('Show password'), findsOneWidget); + + await tester.tap(find.byTooltip('Show password')); + await tester.pump(); + expect(passwordField().obscureText, isFalse, + reason: '切换后明文可见'); + expect(find.byTooltip('Hide password'), findsOneWidget); + + await tester.tap(find.byTooltip('Hide password')); + await tester.pump(); + expect(passwordField().obscureText, isTrue); + }); + + testWidgets('键盘开启 → 拼贴压缩(高度显著缩小,整页可滚动)', (tester) async { + await pumpLogin(tester, clientOf(FakeAdapter( + (o) => throw StateError('不应发起请求: ${o.path}')))); + + final before = tester.getSize(find.byKey(const Key('login-collage'))); + tester.view.viewInsets = const FakeViewPadding(bottom: 420); + addTearDown(tester.view.resetViewInsets); + await tester.pumpAndSettle(); + + final after = tester.getSize(find.byKey(const Key('login-collage'))); + expect(after.height, lessThan(before.height), + reason: '键盘开启时拼贴压缩(28% → 10% 档)'); + expect(find.byKey(const Key('login-collage')), findsOneWidget, + reason: '压缩而非移除'); + + // 表单仍可达(滚动到密码字段并聚焦)。 + await tester.ensureVisible(find.text('Password')); + expect(find.text('Password'), findsOneWidget); + }); + + testWidgets('右上语言入口打开共享语言面板', (tester) async { + await pumpLogin(tester, clientOf(FakeAdapter( + (o) => throw StateError('不应发起请求: ${o.path}')))); + + await tester.tap(find.text('EN')); + await tester.pumpAndSettle(); + + expect(find.text('Follow system'), findsOneWidget); + expect(find.text('Done'), findsOneWidget); + }); + + testWidgets('失败 → 表单附近内联错误徽章', (tester) async { + final adapter = FakeAdapter( + (o) => o.path == '/v1/auth/password' + ? (401, errorBody(ErrorCodes.authInvalidCredentials)) + : throw StateError('unexpected ${o.path}'), + ); + await pumpLogin(tester, clientOf(adapter)); + + await tester.enterText( + find.widgetWithText(TextFormField, 'Account'), + 'staff01', + ); + await tester.enterText( + find.widgetWithText(TextFormField, 'Password'), + 'pw-123456', + ); + await tester.tap(find.text('Sign in')); + await tester.pumpAndSettle(); + + expect(find.text('Incorrect account or password'), findsOneWidget); + }); + }); + + group('页面 02 设置', () { + setUp(() { + session.session = Session( + token: 'tok-live-1', + expiresAt: DateTime.utc(2099, 1, 1), + account: 'staff01', + ); + }); + + testWidgets('账号摘要卡:首字母头像 + 账号(非编辑入口)', (tester) async { + await pumpSettings(tester); + + expect(find.text('staff01'), findsOneWidget); + expect(find.text('Currently signed-in account'), findsOneWidget); + // 首字母头像占位(staff01 → S)。 + final avatarText = find.descendant( + of: find.byType(CircleAvatar), + matching: find.text('S'), + ); + expect(avatarText, findsOneWidget); + }); + + testWidgets('分组标题在场 + 版本来自 kAppVersion', (tester) async { + await pumpSettings(tester); + + expect(find.text('Account'), findsOneWidget); + expect(find.text('General'), findsOneWidget); + expect(find.text(kAppVersion), findsOneWidget, reason: '真实版本号'); + expect(find.text('Language'), findsOneWidget); + expect(find.text('Change password'), findsOneWidget); + }); + + testWidgets('上传帮助 → 底部面板展示系统限制说明', (tester) async { + await pumpSettings(tester); + + await tester.tap(find.text('Upload help')); + await tester.pumpAndSettle(); + + expect(find.text('How background uploads work'), findsOneWidget); + expect( + find.textContaining('system keeps uploads running'), + findsOneWidget, + reason: '帮助正文说明系统限制,不承诺后台持续', + ); + }); + + testWidgets('有进行中任务 → 退出确认明确任务保留', (tester) async { + await pumpSettings(tester); + final task = await taskStore.create(makeDraft('t-1')); + await taskStore.updateState(task.id, UploadTaskState.queued); + await pumpCounts(tester); + + await tester.ensureVisible(find.text('Sign out')); + await tester.pumpAndSettle(); + await tester.tap(find.text('Sign out')); + await tester.pumpAndSettle(); + + expect( + find.text( + 'Local upload tasks are preserved on this device and will ' + 'resume when you sign back in.', + ), + findsOneWidget, + ); + await tester.tap(find.text('Cancel')); + await tester.pumpAndSettle(); + expect(session.session, isNotNull, reason: '取消不登出'); + }); + + testWidgets('无任务 → 退出确认为常规文案', (tester) async { + await pumpSettings(tester); + + await tester.ensureVisible(find.text('Sign out')); + await tester.pumpAndSettle(); + await tester.tap(find.text('Sign out')); + await tester.pumpAndSettle(); + + expect( + find.text('You will be signed out on this device.'), + findsOneWidget, + ); + }); + }); + + group('页面 03 修改密码', () { + setUp(() { + session.session = Session( + token: 'tok-live-1', + expiresAt: DateTime.utc(2099, 1, 1), + account: 'staff01', + ); + }); + + testWidgets('确认不匹配即时提示;修正新密码即清除', (tester) async { + await pumpPasswordChange( + tester, + clientOf(FakeAdapter((o) => throw StateError('不应发起请求'))), + ); + + await tester.enterText( + find.widgetWithText(TextFormField, 'New password'), + 'brand-new-pass-9', + ); + await tester.enterText( + find.widgetWithText(TextFormField, 'Confirm new password'), + 'different-pass-9', + ); + await tester.pump(); + + expect(find.text('New passwords do not match'), findsOneWidget, + reason: '输入即校验,不等提交'); + + // 修正新密码(与确认一致)→ 监听器复验清除错误。 + await tester.enterText( + find.widgetWithText(TextFormField, 'New password'), + 'different-pass-9', + ); + await tester.pump(); + expect(find.text('New passwords do not match'), findsNothing); + }); + + testWidgets('提交中按钮禁用(防重复提交)', (tester) async { + final gate = Completer(); + final adapter = FakeAdapter((o) async { + await gate.future; + return (204, null); + }); + await pumpPasswordChange(tester, clientOf(adapter)); + + await tester.enterText( + find.widgetWithText(TextFormField, 'Current password'), + 'old-pass-123', + ); + await tester.enterText( + find.widgetWithText(TextFormField, 'New password'), + 'brand-new-pass-9', + ); + await tester.enterText( + find.widgetWithText(TextFormField, 'Confirm new password'), + 'brand-new-pass-9', + ); + await tester.tap(find.widgetWithText(FilledButton, 'Save password')); + await tester.pump(const Duration(milliseconds: 50)); + + expect(find.byType(CircularProgressIndicator), findsOneWidget); + await tester.tap( + find.byType(FilledButton), + warnIfMissed: false, + ); + await tester.pump(const Duration(milliseconds: 50)); + expect(adapter.requests, hasLength(1), reason: '加载中不重复提交'); + + gate.complete(); + await tester.pumpAndSettle(); + expect(find.text('MARK'), findsOneWidget, reason: '成功后 pop 回上级'); + }); + }); + + group('页面 04 语言选择(共享面板)', () { + setUp(() { + session.session = Session( + token: 'tok-live-1', + expiresAt: DateTime.utc(2099, 1, 1), + account: 'staff01', + ); + }); + + testWidgets('各语言以自身语言书写 + Done 提交(持久化 + 即刻刷新)', + (tester) async { + final store = FakeLocaleStore(); + final container = await pumpSettings( + tester, + localeStore: store, + initialLocale: AppLocaleChoice.system, + ); + + await tester.tap(find.text('Language')); + await tester.pumpAndSettle(); + + // 各语言以自身语言书写(不随当前界面语言变化)。 + // 「Follow system」两次:语言行尾当前值 + 弹层选项。 + expect(find.text('Follow system'), findsNWidgets(2)); + expect(find.text('English'), findsOneWidget); + expect(find.text('中文'), findsOneWidget); + + await tester.tap(find.text('中文')); + await tester.pump(); + expect(store.writes, isEmpty, reason: 'Done 前不写持久层'); + await tester.tap(find.text('Done')); + await tester.pumpAndSettle(); + + expect(container.read(localeSettingsProvider), AppLocaleChoice.zh); + expect(store.writes, ['zh'], reason: 'Done 才写持久层'); + // 本 harness 的 MaterialApp 不随 provider 重接 locale(live 全 App + // 重建在 app/locale_test.dart 覆盖);此处断言行尾当前值更新。 + expect(find.text('中文'), findsOneWidget, reason: '语言行尾更新为中文'); + expect(find.byType(IndexedStack), findsOneWidget, + reason: '语言刷新不重建页签结构'); + }); + + testWidgets('取消(外部点击关闭)不改变语言偏好', (tester) async { + final store = FakeLocaleStore(); + final container = await pumpSettings( + tester, + localeStore: store, + initialLocale: AppLocaleChoice.system, + ); + + await tester.tap(find.text('Language')); + await tester.pumpAndSettle(); + await tester.tap(find.text('English')); + await tester.pump(); + + // 点击面板外(屏障)关闭 = 取消。 + await tester.tapAt(const Offset(20, 20)); + await tester.pumpAndSettle(); + + expect(container.read(localeSettingsProvider), AppLocaleChoice.system, + reason: '未提交不改档位'); + expect(store.writes, isEmpty, reason: '取消不写持久层'); + expect(find.text('设置'), findsNothing, reason: '界面保持英文'); + }); + }); +} diff --git a/apps/mobile/test/pages/password_change_page_test.dart b/apps/mobile/test/pages/password_change_page_test.dart index c9643bc..a99a400 100644 --- a/apps/mobile/test/pages/password_change_page_test.dart +++ b/apps/mobile/test/pages/password_change_page_test.dart @@ -86,7 +86,7 @@ void main() { await pumpOverMarker(tester, clientOf(adapter)); await fill(tester, newPw: 'short7', confirmPw: 'short7'); - await tester.tap(find.widgetWithText(FilledButton, 'Change password')); + await tester.tap(find.widgetWithText(FilledButton, 'Save password')); await tester.pump(); expect( @@ -102,7 +102,7 @@ void main() { await pumpOverMarker(tester, clientOf(adapter)); await fill(tester, confirmPw: 'different-pass-9'); - await tester.tap(find.widgetWithText(FilledButton, 'Change password')); + await tester.tap(find.widgetWithText(FilledButton, 'Save password')); await tester.pump(); expect( @@ -122,7 +122,7 @@ void main() { await pumpOverMarker(tester, clientOf(adapter)); await fill(tester); - await tester.tap(find.widgetWithText(FilledButton, 'Change password')); + await tester.tap(find.widgetWithText(FilledButton, 'Save password')); await tester.pumpAndSettle(); expect(find.text('Current password is incorrect'), findsOneWidget); @@ -141,7 +141,7 @@ void main() { await pumpOverMarker(tester, clientOf(adapter)); await fill(tester); - await tester.tap(find.widgetWithText(FilledButton, 'Change password')); + await tester.tap(find.widgetWithText(FilledButton, 'Save password')); await tester.pumpAndSettle(); final req = adapter.requests.single; diff --git a/apps/mobile/test/pages/settings_tab_test.dart b/apps/mobile/test/pages/settings_tab_test.dart index 6fb61d3..36af31f 100644 --- a/apps/mobile/test/pages/settings_tab_test.dart +++ b/apps/mobile/test/pages/settings_tab_test.dart @@ -1,7 +1,9 @@ -/// 设置页 widget 测试(P3 计划 Task 3)。 +/// 设置页 widget 测试(P3 Task 3;UI-03 页面 02 重设计后更新)。 /// -/// 覆盖:修改密码入口跳 /password-change;退出登录 → 调 api.logout -/// (尽力而为)→ 清空本地会话 → 清栈回 /login。 +/// 覆盖:修改密码入口跳 /password-change;退出登录(有进行中任务 → +/// 确认弹窗任务保留说明)→ 调 api.logout(尽力而为)→ 清空本地会话 → +/// 清栈回 /login;账号摘要卡 + 通用分组 + 上传帮助面板 + 版本; +/// 语言行打开共享面板 Done 提交。 library; import 'package:dio/dio.dart'; @@ -11,6 +13,8 @@ import 'package:flutter_test/flutter_test.dart'; import 'package:photo_live/app/locale_controller.dart'; import 'package:photo_live/core/api_client.dart'; import 'package:photo_live/core/session_store.dart'; +import 'package:photo_live/features/uploads/task_state.dart'; +import 'package:photo_live/features/uploads/task_store.dart'; import 'package:photo_live/l10n/app_localizations.dart'; import 'package:photo_live/pages/home_page.dart'; import 'package:photo_live/pages/login_page.dart'; @@ -39,6 +43,7 @@ void main() { Future pumpHome( WidgetTester tester, ApiClient client, { + TaskStore? taskStore, List extraOverrides = const [], }) async { await tester.pumpWidget( @@ -46,7 +51,11 @@ void main() { // Task 9 起主壳含队列页(触达 sessionAccountProvider/TaskStore), // 真实平台通道在测试环境挂起,必须注入替身。 overrides: [ - ...pageTestOverrides(session: store, client: client), + ...pageTestOverrides( + session: store, + taskStore: taskStore, + client: client, + ), ...extraOverrides, ], child: MaterialApp( @@ -85,9 +94,26 @@ void main() { if (o.path == '/v1/albums') return (500, errorBody('INTERNAL_ERROR')); throw StateError('unexpected ${o.path}'); }); - await pumpHome(tester, clientOf(adapter)); + // 一个排队中任务:退出确认走「任务保留」文案(UI-03 有任务分支)。 + final taskStore = TaskStore.memory(); + final task = await taskStore.create(UploadTaskDraft( + id: 't-1', + accountId: 'staff01', + albumId: 'alb-1', + clientTaskId: 'ct-t-1', + sourceFilePath: '/tmp/t-1.jpg', + filename: 't-1.jpg', + bytes: 10, + contentType: 'image/jpeg', + )); + await taskStore.updateState(task.id, UploadTaskState.queued); + await pumpHome(tester, clientOf(adapter), taskStore: taskStore); + // 等任务计数防抖载入(未结束任务 → 退出确认带保留说明)。 + await tester.pump(const Duration(milliseconds: 450)); - // 点列表项 → 先弹确认(§4.5:明确本机任务保留,不承诺后台继续)。 + // 点列表项 → 先弹确认(明确本机任务保留,不承诺后台继续)。 + await tester.ensureVisible(find.text('Sign out')); + await tester.pumpAndSettle(); await tester.tap(find.text('Sign out')); await tester.pumpAndSettle(); expect(find.text('Sign out?'), findsOneWidget); @@ -116,46 +142,44 @@ void main() { expect(find.byType(HomePage), findsNothing, reason: '主壳已出栈'); }); - testWidgets('设置分组:账号/语言/安全/上传帮助/关于(UI-01 §4.5)', + testWidgets('账号摘要卡 + 通用分组 + 上传帮助面板 + 版本(UI-03 页面 02)', (tester) async { final adapter = FakeAdapter((_) => throw StateError('不应发起请求')); - // 分组列表长于默认 800×600 视口(「关于」在折叠线下不可建树)。 - tester.view.physicalSize = const Size(800, 1600); - tester.view.devicePixelRatio = 1; - addTearDown(tester.view.reset); await pumpHome(tester, clientOf(adapter)); - // 五个分组标题(SectionHeader 文案)。 - for (final section in [ - 'Account', - 'Language', - 'Security', - 'Upload help', - 'About', - ]) { + // 两个分组标题(SectionHeader 文案)。 + for (final section in ['Account', 'General']) { expect(find.text(section), findsOneWidget, reason: '分组「$section」'); } - // 账号分组:当前账号 + 说明副标题。 + // 账号摘要卡:当前账号 + 说明副标题(非编辑入口)。 expect(find.text('staff01'), findsOneWidget); expect(find.text('Currently signed-in account'), findsOneWidget); + expect(find.descendant( + of: find.byType(CircleAvatar), + matching: find.text('S'), + ), findsOneWidget, reason: '首字母头像占位'); - // 上传帮助:展开后说明系统限制 / 强退 / 网络等待三分态(不承诺 + // 通用分组四行。 + expect(find.text('Language'), findsOneWidget); + expect(find.text('Change password'), findsOneWidget); + expect(find.text('Upload help'), findsOneWidget); + expect(find.text('Version'), findsOneWidget); + expect(find.text(kAppVersion), findsOneWidget); + + // 上传帮助:底部面板说明系统限制 / 强退 / 网络等待(不承诺 // 「后台上传已开启」)。 - await tester.tap(find.text('How background uploads work')); + await tester.tap(find.text('Upload help')); await tester.pumpAndSettle(); + expect(find.text('How background uploads work'), findsOneWidget); expect(find.textContaining('battery limits'), findsOneWidget); expect( find.textContaining('start automatically once a connection is available'), findsOneWidget, ); - - // 关于分组:版本 tile。 - expect(find.text('Version'), findsOneWidget); - expect(find.text(kAppVersion), findsOneWidget); }); - testWidgets('语言切换:底部弹层三选一 → 更新档位 + 持久化(P3 Task 10)', + testWidgets('语言切换:共享面板临时选中 + Done 提交 → 更新档位 + 持久化', (tester) async { final adapter = FakeAdapter((_) => throw StateError('不应发起请求')); final localeStore = FakeLocaleStore(); @@ -171,23 +195,32 @@ void main() { // 本 harness 的 MaterialApp 固定 en(live 全 App 重建在 // app/locale_test.dart 的 PhotoLiveApp 用例覆盖)。 - expect(find.text('Language'), findsOneWidget, reason: '语言分组标题'); - expect(find.text('Follow system'), findsOneWidget, reason: '默认档位行标题'); + expect(find.text('Language'), findsOneWidget, reason: '语言行标题'); + expect( + find.text('Follow system'), + findsOneWidget, + reason: '默认档位(行尾当前值)', + ); - // 行标题即当前档位,点它打开弹层。 - await tester.tap(find.text('Follow system')); + // 点语言行打开共享弹层。 + await tester.tap(find.text('Language')); await tester.pumpAndSettle(); // 弹层三选项(语言名以自身语言书写,跨 locale 不变)。 - // 「Follow system」出现两次:主档行标题 + 弹层选项。 + // 「Follow system」出现两次:语言行尾当前值 + 弹层选项。 expect(find.text('Follow system'), findsNWidgets(2)); expect(find.text('中文'), findsOneWidget); expect(find.text('English'), findsOneWidget); + expect(find.text('Done'), findsOneWidget); + // 临时选中 + Done 提交(未 Done 前不落档位)。 await tester.tap(find.text('中文')); + await tester.pump(); + expect(localeStore.writes, isEmpty, reason: 'Done 前不写持久层'); + await tester.tap(find.text('Done')); await tester.pumpAndSettle(); - expect(find.text('中文'), findsOneWidget, reason: '行标题更新为当前档位'); + expect(find.text('中文'), findsOneWidget, reason: '行尾更新为当前档位'); expect(localeStore.writes, ['zh'], reason: '选择写入 app.locale'); }); }