leipayne18/customer-im-client-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mine): 我的 Tab UI 重设计（#39~#41）

Browse Source 
- ProfileHeroCard：72pt 渐变头像（8色 uid%8 主题）、@J{uid} handle、bio 简介、掩码手机号
- AppBar：compact，右侧 QR 图标 + 编辑铅笔
- 彩色图标行（_IconBox 36pt 圆角）+ 4 卡片组对齐 iOS SettingsView
  - 账户：我的钱包 / 账户安全
  - 工具：收藏 / 最近呼叫 / 链接设备 / 聊天文件夹
  - 偏好设置：通知和声音 / 隐私设置 / 黑名单 / 语言 / 主题
  - 关于：用户协议 / 隐私政策 / 版本号
- SettingsState 增加 bio 字段（#41），loadProfile 同步赋值
- Doc/mine_tab_architecture.md 补充 UI 重设计章节（§7）

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
pp-bot
2026-03-24 20:14:34 +09:00
parent 2eb2299709
commit db10d1fcd2
3 changed files with 327 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/im_app/lib/features/settings/presentation/settings_view_model.dart
View File

@@ -12,6 +12,7 @@ class SettingsState {
final String? avatarUrl;
final String maskedContact;
final int uid;
final String bio;
final bool isLoading;
final bool isLoggingOut;
final String? error;
@@ -21,6 +22,7 @@ class SettingsState {
this.avatarUrl,
this.maskedContact = '',
this.uid = 0,
this.bio = '',
this.isLoading = false,
this.isLoggingOut = false,
this.error,
@@ -32,6 +34,7 @@ class SettingsState {
bool clearAvatarUrl = false,
String? maskedContact,
int? uid,
String? bio,
bool? isLoading,
bool? isLoggingOut,
String? error,
@@ -42,6 +45,7 @@ class SettingsState {
avatarUrl: clearAvatarUrl ? null : (avatarUrl ?? this.avatarUrl),
maskedContact: maskedContact ?? this.maskedContact,
uid: uid ?? this.uid,
bio: bio ?? this.bio,
isLoading: isLoading ?? this.isLoading,
isLoggingOut: isLoggingOut ?? this.isLoggingOut,
error: clearError ? null : (error ?? this.error),
@@ -84,6 +88,7 @@ class SettingsViewModel extends Notifier<SettingsState> {
avatarUrl: profile.profilePic.isEmpty ? null : profile.profilePic,
maskedContact: _maskContact(profile.contact, profile.countryCode),
uid: profile.uid,
bio: profile.bio,
);
} catch (e) {
state = state.copyWith(isLoading: false, error: e.toString());

353
apps/im_app/lib/features/settings/view/settings_page.dart
View File

@@ -1,22 +1,36 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:im_app/core/foundation/config.dart';
import 'package:im_app/features/settings/presentation/settings_view_model.dart';
/// 我的页面（原设置页）
/// 我的页（#39 / #40 / #41）
///
/// 结构：
/// ┌─ 个人资料卡 ──────────────────────────────────────────┐
/// │ 头像 昵称 │
/// │ 手机号（掩码） UID: xxx │
/// └──────────────────────────────────────────────────────┘
/// 偏好设置 → 主题 / 语言 / 通知
/// 工具 → 黑名单 / 网络诊断
/// 关于 → 关于本应用
/// [退出登录]
/// ## 结构（iOS SettingsView.swift 对齐）
///
/// - ProfileHeroCard：72pt 渐变头像 + 昵称 + @J{uid} handle + 手机号 + bio
/// - AppBar：compact，右侧 QR 图标 + 编辑铅笔
/// - 卡片组 1（账户）：我的钱包 / 账户安全
/// - 卡片组 2（工具）：收藏 / 最近呼叫 / 链接设备 / 聊天文件夹
/// - 卡片组 3「偏好设置」：通知和声音 / 隐私设置 / 黑名单 / 语言 / 主题
/// - 卡片组 4「关于」：用户协议 / 隐私政策 / 版本号
/// - 退出登录（全宽红色按钮）
class SettingsPage extends ConsumerWidget {
const SettingsPage({super.key});
// ── iOS 色板 ──────────────────────────────────────────────────────────────
static const Color _walletColor = Color(0xFFFFAA5B);
static const Color _securityColor = Color(0xFF8A5CF6);
static const Color _favoriteColor = Color(0xFFFFAF45);
static const Color _callColor = Color(0xFF4CB050);
static const Color _deviceColor = Color(0xFF5667FF);
static const Color _folderColor = Color(0xFFF2994A);
static const Color _notifColor = Color(0xFFFF8B5E);
static const Color _privacyColor = Color(0xFF0BB8A9);
static const Color _blockColor = Color(0xFFFF4B4B);
static const Color _langColor = Color(0xFF5667FF);
static const Color _themeColor = Color(0xFF8A5CF6);
@override
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(settingsViewModelProvider);
@@ -26,75 +40,158 @@ class SettingsPage extends ConsumerWidget {
backgroundColor: Theme.of(context).colorScheme.surfaceContainerLowest,
body: CustomScrollView(
slivers: [
SliverAppBar.large(
// ── AppBar（compact，QR + edit） ────────────────────────────────────
SliverAppBar(
title: const Text('我的'),
pinned: true,
automaticallyImplyLeading: false,
actions: [
IconButton(
icon: const Icon(Icons.qr_code_scanner_rounded),
tooltip: '我的二维码',
onPressed: () {}, // TODO: QR code page
),
IconButton(
icon: const Icon(Icons.edit_outlined),
tooltip: '编辑资料',
onPressed: () => vm.navigateToEditProfile(context),
),
const SizedBox(width: 4),
],
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: _ProfileCard(state: state, onTap: () => vm.navigateToEditProfile(context)),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ── ProfileHeroCard ───────────────────────────────────────
_ProfileHeroCard(
state: state,
onTap: () => vm.navigateToEditProfile(context),
),
const SizedBox(height: 16),
// ── 卡片组 1：账户 ────────────────────────────────────────
_SettingsCard(
items: [
_RowConfig(
icon: Icons.credit_card_rounded,
iconColor: _walletColor,
title: '我的钱包',
onTap: () {}, // TODO: 钱包页
),
_RowConfig(
icon: Icons.shield_rounded,
iconColor: _securityColor,
title: '账户安全',
onTap: () {}, // TODO: 账户安全页
),
],
),
const SizedBox(height: 16),
// ── 卡片组 2：工具 ────────────────────────────────────────
_SettingsCard(
items: [
_RowConfig(
icon: Icons.star_rounded,
iconColor: _favoriteColor,
title: '收藏',
onTap: () {}, // TODO: 收藏页
),
_RowConfig(
icon: Icons.phone_rounded,
iconColor: _callColor,
title: '最近呼叫',
onTap: () {}, // TODO: 呼叫记录页
),
_RowConfig(
icon: Icons.laptop_rounded,
iconColor: _deviceColor,
title: '链接设备',
onTap: () {}, // TODO: 设备管理页
),
_RowConfig(
icon: Icons.folder_rounded,
iconColor: _folderColor,
title: '聊天文件夹',
onTap: () {}, // TODO: Issue #11
),
],
),
const SizedBox(height: 16),
// ── 卡片组 3：偏好设置 ────────────────────────────────────
_SectionLabel('偏好设置'),
_SettingsCard(
items: [
_RowConfig(
icon: Icons.palette_outlined,
title: '主题',
onTap: () => vm.navigateToTheme(context),
),
_RowConfig(
icon: Icons.language,
title: '语言',
onTap: () => vm.navigateToLanguage(context),
),
_RowConfig(
icon: Icons.notifications_outlined,
title: '通知',
icon: Icons.notifications_rounded,
iconColor: _notifColor,
title: '通知和声音',
onTap: () {}, // TODO: 通知设置页
),
],
),
const SizedBox(height: 16),
_SectionLabel('工具'),
_SettingsCard(
items: [
_RowConfig(
icon: Icons.folder_outlined,
title: '聊天文件夹',
onTap: () {}, // TODO: Issue #11
icon: Icons.lock_rounded,
iconColor: _privacyColor,
title: '隐私设置',
onTap: () {}, // TODO: 隐私设置页
),
_RowConfig(
icon: Icons.block,
icon: Icons.block_rounded,
iconColor: _blockColor,
title: '黑名单',
onTap: () => vm.navigateToBlocklist(context),
),
_RowConfig(
icon: Icons.network_check,
title: '网络诊断',
onTap: () => vm.navigateToNetworkDiagnostics(context),
icon: Icons.language_rounded,
iconColor: _langColor,
title: '语言',
onTap: () => vm.navigateToLanguage(context),
),
_RowConfig(
icon: Icons.palette_rounded,
iconColor: _themeColor,
title: '主题',
onTap: () => vm.navigateToTheme(context),
),
],
),
const SizedBox(height: 16),
// ── 卡片组 4：关于 ────────────────────────────────────────
_SectionLabel('关于'),
_SettingsCard(
items: [
_RowConfig(
icon: Icons.info_outline,
title: '关于本应用',
icon: Icons.description_outlined,
iconColor: Colors.grey,
title: '用户协议',
onTap: () => vm.navigateToAbout(context),
),
_RowConfig(
icon: Icons.privacy_tip_outlined,
iconColor: Colors.grey,
title: '隐私政策',
onTap: () => vm.navigateToAbout(context),
),
_RowConfig(
icon: Icons.info_outline_rounded,
iconColor: Colors.grey,
title: '版本号',
subtitle: AppConfig.appVersion.isEmpty
? '1.0.0'
: AppConfig.appVersion,
onTap: () {},
showChevron: false,
),
],
),
const SizedBox(height: 24),
// ── 退出登录 ───────────────────────────────────────────────
_LogoutButton(
isLoading: state.isLoggingOut,
onTap: () => _confirmLogout(context, ref),
@@ -134,16 +231,32 @@ class SettingsPage extends ConsumerWidget {
}
}
// ── 个人资料卡 ─────────────────────────────────────────────────────────────────
// ── ProfileHeroCard (#39 / #41) ───────────────────────────────────────────────
class _ProfileCard extends StatelessWidget {
const _ProfileCard({required this.state, required this.onTap});
/// iOS SettingsView.swift ProfileHeroCard 对齐
///
/// 8 色渐变占位（uid % 8）+ 昵称 + @J{uid} handle + 手机号 + bio
class _ProfileHeroCard extends StatelessWidget {
const _ProfileHeroCard({required this.state, required this.onTap});
final SettingsState state;
final VoidCallback onTap;
// 8 色渐变方案（iOS 端 ProfileHeroCard 同款）
static const _gradients = [
[Color(0xFF4776E6), Color(0xFF8E54E9)], // 0: 蓝紫
[Color(0xFF11998E), Color(0xFF38EF7D)], // 1: 青绿
[Color(0xFFFC466B), Color(0xFF3F5EFB)], // 2: 粉蓝
[Color(0xFFF7971E), Color(0xFFFFD200)], // 3: 橙黄
[Color(0xFF56CCF2), Color(0xFF2F80ED)], // 4: 天蓝
[Color(0xFFEB3349), Color(0xFFF45C43)], // 5: 红橙
[Color(0xFF1FA2FF), Color(0xFF12D8FA)], // 6: 蓝青
[Color(0xFF9D50BB), Color(0xFF6E48AA)], // 7: 深紫
];
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
return Card(
child: InkWell(
onTap: onTap,
@@ -151,8 +264,13 @@ class _ProfileCard extends StatelessWidget {
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_Avatar(avatarUrl: state.avatarUrl, isLoading: state.isLoading),
_HeroAvatar(
avatarUrl: state.avatarUrl,
uid: state.uid,
isLoading: state.isLoading,
),
const SizedBox(width: 16),
Expanded(
child: state.isLoading
@@ -162,26 +280,45 @@ class _ProfileCard extends StatelessWidget {
children: [
Text(
state.nickname.isEmpty ? '加载中…' : state.nickname,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
style: Theme.of(context)
.textTheme
.titleMedium
?.copyWith(fontWeight: FontWeight.w700),
),
const SizedBox(height: 4),
Text(
state.maskedContact.isNotEmpty
? state.maskedContact
: 'UID: ${state.uid}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.grey,
),
),
if (state.maskedContact.isNotEmpty && state.uid > 0)
const SizedBox(height: 2),
if (state.uid > 0)
Text(
'UID: ${state.uid}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.grey,
),
'@J${state.uid}',
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: cs.onSurfaceVariant),
),
if (state.maskedContact.isNotEmpty)
Text(
state.maskedContact,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: cs.onSurfaceVariant),
),
const SizedBox(height: 2),
Text(
state.bio.isNotEmpty ? state.bio : '添加一句话简介',
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
color: state.bio.isNotEmpty
? cs.onSurfaceVariant
: cs.onSurfaceVariant.withOpacity(0.5),
fontStyle: state.bio.isEmpty
? FontStyle.italic
: FontStyle.normal,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
@@ -194,33 +331,51 @@ class _ProfileCard extends StatelessWidget {
}
}
class _Avatar extends StatelessWidget {
const _Avatar({required this.avatarUrl, required this.isLoading});
class _HeroAvatar extends StatelessWidget {
const _HeroAvatar({
required this.avatarUrl,
required this.uid,
required this.isLoading,
});
final String? avatarUrl;
final int uid;
final bool isLoading;
@override
Widget build(BuildContext context) {
const radius = 36.0; // 72pt diameter
if (isLoading) {
return const CircleAvatar(
radius: 28,
radius: radius,
child: SizedBox(
width: 20,
height: 20,
width: 24,
height: 24,
child: CircularProgressIndicator(strokeWidth: 2),
),
);
}
if (avatarUrl != null && avatarUrl!.isNotEmpty) {
return CircleAvatar(
radius: 28,
radius: radius,
backgroundImage: NetworkImage(avatarUrl!),
);
}
return const CircleAvatar(
radius: 28,
child: Icon(Icons.person, size: 28),
// 渐变占位（uid % 8）
final colors = _ProfileHeroCard._gradients[uid.abs() % 8];
return Container(
width: radius * 2,
height: radius * 2,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: colors,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Icon(Icons.person, size: 36, color: Colors.white),
);
}
}
@@ -253,11 +408,10 @@ class _ProfileSkeleton extends StatelessWidget {
}
}
// ── 设置分组 ───────────────────────────────────────────────────────────────────
// ── 设置分组 (#40) ─────────────────────────────────────────────────────────────
class _SectionLabel extends StatelessWidget {
const _SectionLabel(this.text);
final String text;
@override
@@ -278,20 +432,23 @@ class _SectionLabel extends StatelessWidget {
class _RowConfig {
const _RowConfig({
required this.icon,
required this.iconColor,
required this.title,
this.subtitle,
required this.onTap,
this.showChevron = true,
});
final IconData icon;
final Color iconColor;
final String title;
final String? subtitle;
final VoidCallback onTap;
final bool showChevron;
}
class _SettingsCard extends StatelessWidget {
const _SettingsCard({required this.items});
final List<_RowConfig> items;
@override
@@ -303,7 +460,7 @@ class _SettingsCard extends StatelessWidget {
if (i > 0)
Divider(
height: 1,
indent: 52,
indent: 60,
color: Theme.of(context).dividerColor.withOpacity(0.5),
),
_SettingsRow(config: items[i]),
@@ -314,28 +471,58 @@ class _SettingsCard extends StatelessWidget {
}
}
/// iOS 风格行：36pt 彩色圆角正方形图标 + 标题 + 可选副标题 + chevron
class _SettingsRow extends StatelessWidget {
const _SettingsRow({required this.config});
final _RowConfig config;
@override
Widget build(BuildContext context) {
return ListTile(
leading: Icon(config.icon, size: 22),
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
leading: _IconBox(icon: config.icon, color: config.iconColor),
title: Text(config.title),
subtitle: config.subtitle != null ? Text(config.subtitle!) : null,
trailing: const Icon(Icons.chevron_right, size: 18, color: Colors.grey),
subtitle: config.subtitle != null
? Text(
config.subtitle!,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: Colors.grey),
)
: null,
trailing: config.showChevron
? const Icon(Icons.chevron_right, size: 18, color: Colors.grey)
: null,
onTap: config.onTap,
);
}
}
/// 36pt 圆角正方形彩色图标盒（iOS Settings icon style）
class _IconBox extends StatelessWidget {
const _IconBox({required this.icon, required this.color});
final IconData icon;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: Colors.white, size: 20),
);
}
}
// ── 退出登录 ───────────────────────────────────────────────────────────────────
class _LogoutButton extends StatelessWidget {
const _LogoutButton({required this.isLoading, required this.onTap});
final bool isLoading;
final VoidCallback onTap;