qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加视觉设计语言系统并重构认证页面UI

Browse Source 
- 新增 visual_design_language.md 设计规范文档
- 新增 auth 设计 tokens (authBackground, authCard, authInput, feedback 系列等)
- 重构登录/注册/验证码/重置密码页面为新设计系统
- 新增 AuthHeroHeader, AuthSurfaceCard, AuthSection, AuthField, PasswordField 组件
- 重构 AppBanner 和 Toast 支持多类型配置 (info/success/warning/error)
- 后端 AgentScope: 重整 schemas/prompts/tools 作用域, 新增协议文档
- 更新 AGENTS.md 集成视觉设计语言约束
This commit is contained in:
qzl
2026-03-13 14:10:13 +08:00
parent fb3c649db7
commit a10a2db27a
100 changed files with 6333 additions and 4800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/shared/widgets/app_button.dart
+104 -38
View File
@@ -1,74 +1,140 @@
import 'package:flutter/material.dart';
import '../../core/theme/design_tokens.dart';
class AppButton extends StatelessWidget {
const AppButton({
super.key,
required this.text,
this.onPressed,
this.isOutlined = false,
this.height = 52,
this.isLoading = false,
});
final String text;
final VoidCallback? onPressed;
final bool isOutlined;
final double height;
final bool isLoading;
const AppButton({
super.key,
required this.text,
this.onPressed,
this.isOutlined = false,
this.height = 44,
this.isLoading = false,
});
@override
Widget build(BuildContext context) {
final isDisabled = onPressed == null || isLoading;
if (isOutlined) {
return SizedBox(
height: height,
child: OutlinedButton(
onPressed: isLoading ? null : onPressed,
style: OutlinedButton.styleFrom(
backgroundColor: AppColors.background,
foregroundColor: AppColors.slate500,
side: const BorderSide(color: AppColors.input),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.sm),
backgroundColor: isDisabled
? AppColors.authSecondaryButtonBackground.withValues(
alpha: 0.55,
)
: AppColors.authSecondaryButtonBackground,
foregroundColor: isDisabled
? AppColors.authLinkMuted
: AppColors.authSecondaryButtonText,
side: BorderSide(
color: isDisabled
? AppColors.authSecondaryButtonBorder.withValues(alpha: 0.7)
: AppColors.authSecondaryButtonBorder,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.full),
),
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
),
child: isLoading
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
? SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2.2,
color: AppColors.authSecondaryButtonText,
),
)
: Text(
text,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
fontSize: 15,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
),
),
),
);
}
return SizedBox(
height: height,
child: ElevatedButton(
onPressed: isLoading ? null : onPressed,
child: isLoading
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColors.primaryForeground,
),
)
: Text(
text,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
return DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppRadius.full),
boxShadow: isDisabled
? const []
: [
BoxShadow(
color: AppColors.blue300.withValues(alpha: 0.24),
blurRadius: 18,
offset: const Offset(0, 10),
),
],
),
child: SizedBox(
height: height,
width: double.infinity,
child: ElevatedButton(
onPressed: isLoading ? null : onPressed,
style: ButtonStyle(
elevation: const WidgetStatePropertyAll(0),
backgroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return AppColors.authPrimaryButtonDisabled;
}
if (states.contains(WidgetState.pressed)) {
return AppColors.authPrimaryButtonPressed;
}
return AppColors.authPrimaryButton;
}),
foregroundColor: const WidgetStatePropertyAll(
AppColors.authPrimaryButtonText,
),
overlayColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return AppColors.white.withValues(alpha: 0.08);
}
return null;
}),
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.full),
),
),
padding: const WidgetStatePropertyAll(
EdgeInsets.symmetric(horizontal: AppSpacing.xl),
),
),
child: isLoading
? const SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
strokeWidth: 2.2,
color: AppColors.authPrimaryButtonText,
),
)
: Text(
text,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
color: isDisabled
? AppColors.authLinkMuted
: AppColors.authPrimaryButtonText,
),
),
),
),
);
}
apps/lib/shared/widgets/banner/app_banner.dart
+37 -7
View File
@@ -7,12 +7,14 @@ class AppBanner extends StatelessWidget {
final String message;
final ToastType type;
final bool visible;
final String? title;
const AppBanner({
super.key,
required this.message,
this.type = ToastType.warning,
this.visible = true,
this.title,
});
@override
@@ -23,19 +25,47 @@ class AppBanner extends StatelessWidget {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
decoration: BoxDecoration(
color: config.backgroundColor,
borderRadius: BorderRadius.circular(AppRadius.sm),
color: config.surfaceColor,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(color: config.borderColor),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(config.icon, size: 16, color: config.iconColor),
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: config.iconColor.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(AppRadius.full),
),
child: Icon(config.icon, size: 16, color: config.iconColor),
),
const SizedBox(width: 8),
Expanded(
child: Text(
message,
style: TextStyle(fontSize: 13, color: config.textColor),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title ?? config.label,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: config.textColor,
),
),
const SizedBox(height: 2),
Text(
message,
style: TextStyle(
fontSize: 13,
height: 1.35,
color: config.textColor,
),
),
],
),
),
],
apps/lib/shared/widgets/fixed_length_code_input.dart
+84 -44
View File
@@ -60,7 +60,9 @@ class _FixedLengthCodeInputState extends State<FixedLengthCodeInput> {
void _onFocusChanged() {
if (_isFocused != _focusNode.hasFocus) {
_isFocused = _focusNode.hasFocus;
setState(() {
_isFocused = _focusNode.hasFocus;
});
}
}
@@ -98,56 +100,80 @@ class _FixedLengthCodeInputState extends State<FixedLengthCodeInput> {
@override
Widget build(BuildContext context) {
final chars = widget.controller.text.split('');
final slotHeight = AppSpacing.xl * 2;
final slotHeight = AppSpacing.xl * 2 + AppSpacing.sm;
final slotSpacing = AppSpacing.sm;
final isComplete = chars.length == widget.length;
return Semantics(
label: widget.semanticLabel,
child: GestureDetector(
onTap: () => _focusNode.requestFocus(),
behavior: HitTestBehavior.opaque,
child: SizedBox(
height: slotHeight,
child: Stack(
alignment: Alignment.center,
children: [
Opacity(
opacity: 0,
child: SizedBox(
width: double.infinity,
height: slotHeight,
child: TextField(
controller: widget.controller,
focusNode: _focusNode,
keyboardType: widget.keyboardType,
inputFormatters: [
LengthLimitingTextInputFormatter(widget.length),
],
onChanged: _handleRawChanged,
autofillHints: const [AutofillHints.oneTimeCode],
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
padding: const EdgeInsets.all(AppSpacing.sm),
decoration: BoxDecoration(
color: AppColors.authSectionBackground,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(
color: _isFocused
? AppColors.authInputFocus
: AppColors.authSectionBorder,
),
boxShadow: _isFocused
? [
BoxShadow(
color: AppColors.blue200.withValues(alpha: 0.28),
blurRadius: 18,
offset: const Offset(0, 8),
),
]
: const [],
),
child: SizedBox(
height: slotHeight,
child: Stack(
alignment: Alignment.center,
children: [
Opacity(
opacity: 0,
child: SizedBox(
width: double.infinity,
height: slotHeight,
child: TextField(
controller: widget.controller,
focusNode: _focusNode,
keyboardType: widget.keyboardType,
inputFormatters: [
LengthLimitingTextInputFormatter(widget.length),
],
onChanged: _handleRawChanged,
autofillHints: const [AutofillHints.oneTimeCode],
),
),
),
),
IgnorePointer(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (var index = 0; index < widget.length; index++) ...[
Expanded(
child: _buildCodeCell(
index: index,
chars: chars,
slotHeight: slotHeight,
IgnorePointer(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (var index = 0; index < widget.length; index++) ...[
Expanded(
child: _buildCodeCell(
index: index,
chars: chars,
slotHeight: slotHeight,
isComplete: isComplete,
),
),
),
if (index != widget.length - 1)
SizedBox(width: slotSpacing),
if (index != widget.length - 1)
SizedBox(width: slotSpacing),
],
],
],
),
),
),
],
],
),
),
),
),
@@ -158,6 +184,7 @@ class _FixedLengthCodeInputState extends State<FixedLengthCodeInput> {
required int index,
required List<String> chars,
required double slotHeight,
required bool isComplete,
}) {
final hasChar = index < chars.length;
final isActive =
@@ -168,18 +195,31 @@ class _FixedLengthCodeInputState extends State<FixedLengthCodeInput> {
height: slotHeight,
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(AppRadius.sm),
color: hasChar ? AppColors.white : AppColors.authInputBackground,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: isActive ? AppColors.primary : AppColors.slate300,
color: isActive
? AppColors.authPrimaryButton
: isComplete
? AppColors.authSecondaryButtonBorder
: AppColors.authInputBorder,
),
boxShadow: isActive
? [
BoxShadow(
color: AppColors.blue200.withValues(alpha: 0.32),
blurRadius: 14,
offset: const Offset(0, 6),
),
]
: const [],
),
child: Text(
hasChar ? chars[index] : '',
style: const TextStyle(
style: TextStyle(
fontSize: AppSpacing.xl,
fontWeight: FontWeight.w600,
color: AppColors.slate900,
color: hasChar ? AppColors.slate900 : AppColors.authLinkMuted,
),
),
);
apps/lib/shared/widgets/link_button.dart
+23 -18
View File
@@ -20,28 +20,33 @@ class LinkButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final effectiveColor = foregroundColor ?? AppColors.slate500;
final color = enabled
? (foregroundColor ?? AppColors.authLinkText)
: AppColors.slate300;
return SizedBox(
height: 44,
child: TextButton(
onPressed: enabled ? onTap : null,
style: TextButton.styleFrom(
foregroundColor: enabled ? effectiveColor : AppColors.slate300,
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.sm),
),
return TextButton(
onPressed: enabled ? onTap : null,
style: TextButton.styleFrom(
minimumSize: const Size(0, 40),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
foregroundColor: color,
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
child: Text(
text,
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
textAlign: textAlign,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.full),
),
),
child: Text(
text,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: color,
),
textAlign: textAlign,
),
);
}
}
apps/lib/shared/widgets/toast/toast.dart
+82 -29
View File
@@ -48,21 +48,25 @@ class _ToastWidgetState extends State<_ToastWidget>
late AnimationController _controller;
late Animation<Offset> _slideAnimation;
late Animation<double> _fadeAnimation;
bool _dismissed = false;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 250),
duration: const Duration(milliseconds: 280),
vsync: this,
);
_slideAnimation = Tween<Offset>(
begin: const Offset(0, -1),
begin: const Offset(0, -0.18),
end: Offset.zero,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOutCubic));
_fadeAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);
_fadeAnimation = Tween<double>(
begin: 0,
end: 1,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
_controller.forward();
@@ -70,8 +74,13 @@ class _ToastWidgetState extends State<_ToastWidget>
}
void _dismiss() {
if (!mounted) return;
_controller.reverse().then((_) => widget.onDismiss());
if (!mounted || _dismissed) return;
_dismissed = true;
_controller.reverse().then((_) {
if (mounted) {
widget.onDismiss();
}
});
}
@override
@@ -85,7 +94,7 @@ class _ToastWidgetState extends State<_ToastWidget>
final config = ToastTypeConfig.fromType(widget.type);
return Positioned(
top: MediaQuery.of(context).padding.top + 16,
top: MediaQuery.of(context).padding.top + 12,
left: 16,
right: 16,
child: SlideTransition(
@@ -94,30 +103,74 @@ class _ToastWidgetState extends State<_ToastWidget>
opacity: _fadeAnimation,
child: Material(
color: Colors.transparent,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: config.backgroundColor,
borderRadius: BorderRadius.circular(AppRadius.md),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
child: SafeArea(
bottom: false,
child: GestureDetector(
onTap: _dismiss,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: config.surfaceColor,
borderRadius: BorderRadius.circular(AppRadius.lg),
border: Border.all(color: config.borderColor),
boxShadow: [
BoxShadow(
color: AppColors.slate900.withValues(alpha: 0.08),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
],
),
child: Row(
children: [
Icon(config.icon, size: 20, color: config.iconColor),
const SizedBox(width: 12),
Expanded(
child: Text(
widget.message,
style: TextStyle(fontSize: 14, color: config.textColor),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 34,
height: 34,
decoration: BoxDecoration(
color: config.iconColor.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(AppRadius.full),
),
child: Icon(
config.icon,
size: 18,
color: config.iconColor,
),
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
config.label,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: config.textColor,
),
),
const SizedBox(height: 2),
Text(
widget.message,
style: TextStyle(
fontSize: 14,
height: 1.35,
color: config.textColor,
),
),
],
),
),
const SizedBox(width: 8),
Icon(
Icons.close_rounded,
size: 18,
color: config.textColor.withValues(alpha: 0.72),
),
],
),
],
),
),
),
),
apps/lib/shared/widgets/toast/toast_type_config.dart
+26 -14
View File
@@ -3,41 +3,53 @@ import 'toast_type.dart';
import '../../../core/theme/design_tokens.dart';
class ToastTypeConfig {
final Color backgroundColor;
final Color surfaceColor;
final Color borderColor;
final Color iconColor;
final Color textColor;
final String label;
final IconData icon;
const ToastTypeConfig({
required this.backgroundColor,
required this.surfaceColor,
required this.borderColor,
required this.iconColor,
required this.textColor,
required this.label,
required this.icon,
});
static ToastTypeConfig fromType(ToastType type) => switch (type) {
ToastType.success => const ToastTypeConfig(
backgroundColor: Color(0xFFECFDF5),
iconColor: AppColors.success,
textColor: Color(0xFF065F46),
surfaceColor: AppColors.feedbackSuccessSurface,
borderColor: AppColors.feedbackSuccessBorder,
iconColor: AppColors.feedbackSuccessIcon,
textColor: AppColors.feedbackSuccessText,
label: '成功',
icon: Icons.check_circle_outline,
),
ToastType.warning => const ToastTypeConfig(
backgroundColor: Color(0xFFFFFBEB),
iconColor: AppColors.warning,
textColor: Color(0xFF92400E),
surfaceColor: AppColors.feedbackWarningSurface,
borderColor: AppColors.feedbackWarningBorder,
iconColor: AppColors.feedbackWarningIcon,
textColor: AppColors.feedbackWarningText,
label: '提醒',
icon: Icons.warning_amber_rounded,
),
ToastType.error => const ToastTypeConfig(
backgroundColor: Color(0xFFFEF2F2),
iconColor: AppColors.error,
textColor: Color(0xFF991B1B),
surfaceColor: AppColors.feedbackErrorSurface,
borderColor: AppColors.feedbackErrorBorder,
iconColor: AppColors.feedbackErrorIcon,
textColor: AppColors.feedbackErrorText,
label: '错误',
icon: Icons.error_outline,
),
ToastType.info => const ToastTypeConfig(
backgroundColor: Color(0xFFEFF6FF),
iconColor: Color(0xFF3B82F6),
textColor: Color(0xFF1E40AF),
surfaceColor: AppColors.feedbackInfoSurface,
borderColor: AppColors.feedbackInfoBorder,
iconColor: AppColors.feedbackInfoIcon,
textColor: AppColors.feedbackInfoText,
label: '提示',
icon: Icons.info_outline,
),
};