feat: 添加视觉设计语言系统并重构认证页面UI
- 新增 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
@@ -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),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user