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

Co-Authored-By: Claude Code <noreply@anthropic.com>

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<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,
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}