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/features/auth/ui/widgets/auth_field.dart
+79
View File
@@ -0,0 +1,79 @@
import 'package:flutter/material.dart';
import '../../../../core/theme/design_tokens.dart';
class AuthField extends StatelessWidget {
const AuthField({
super.key,
required this.label,
required this.hint,
required this.controller,
this.keyboardType,
this.obscureText = false,
this.suffixIcon,
this.onChanged,
});
final String label;
final String hint;
final TextEditingController controller;
final TextInputType? keyboardType;
final bool obscureText;
final Widget? suffixIcon;
final ValueChanged<String>? onChanged;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.slate700,
),
),
SizedBox(height: AppSpacing.sm),
Semantics(
label: label,
textField: true,
child: TextField(
controller: controller,
keyboardType: keyboardType,
obscureText: obscureText,
onChanged: onChanged,
style: const TextStyle(fontSize: 16, color: AppColors.slate900),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(
fontSize: 15,
color: AppColors.slate400,
),
filled: true,
fillColor: AppColors.authInputBackground,
contentPadding: const EdgeInsets.symmetric(
horizontal: AppSpacing.lg,
vertical: AppSpacing.lg,
),
suffixIcon: suffixIcon,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: const BorderSide(color: AppColors.authInputBorder),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: const BorderSide(color: AppColors.authInputFocus),
),
),
),
),
],
);
}
}
apps/lib/features/auth/ui/widgets/auth_page_scaffold.dart
+270 -36
View File
@@ -1,5 +1,3 @@
import 'dart:math' as math;
import 'package:flutter/material.dart';
import '../../../../core/theme/design_tokens.dart';
@@ -23,44 +21,280 @@ class AuthPageScaffold extends StatelessWidget {
final keyboardInset = MediaQuery.viewInsetsOf(context).bottom;
return Scaffold(
backgroundColor: AppColors.background,
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
final viewportHeight = math.max(
constraints.maxHeight - keyboardInset,
AppSpacing.none,
);
return SingleChildScrollView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
padding: EdgeInsets.fromLTRB(
AppSpacing.xxl,
AppSpacing.none,
AppSpacing.xxl,
keyboardInset + AppSpacing.xxl,
),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: viewportHeight),
child: IntrinsicHeight(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
key: mainContentKey,
child: Center(child: mainContent),
backgroundColor: AppColors.authBackgroundBottom,
body: DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
AppColors.authBackgroundTop,
AppColors.authBackgroundBottom,
],
),
),
child: Stack(
children: [
const _AuthBackgroundOrbs(),
SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
keyboardDismissBehavior:
ScrollViewKeyboardDismissBehavior.onDrag,
padding: EdgeInsets.fromLTRB(
AppSpacing.lg,
AppSpacing.md,
AppSpacing.lg,
keyboardInset + AppSpacing.md,
),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
if (footer != null)
Container(key: footerKey, child: footer),
SizedBox(height: AppSpacing.xxl),
],
),
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
KeyedSubtree(
key: mainContentKey,
child: mainContent,
),
if (footer != null) ...[
SizedBox(height: AppSpacing.md),
KeyedSubtree(key: footerKey, child: footer!),
],
],
),
),
),
);
},
),
);
},
),
],
),
),
);
}
}
class AuthHeroHeader extends StatelessWidget {
const AuthHeroHeader({
super.key,
this.title,
this.subtitle,
this.showBrand = false,
});
final String? title;
final String? subtitle;
final bool showBrand;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (showBrand) ...[
Container(
width: 88,
height: 88,
decoration: BoxDecoration(
color: AppColors.appIconRing,
borderRadius: BorderRadius.circular(AppRadius.full),
border: Border.all(color: AppColors.appIconBorder),
boxShadow: [
BoxShadow(
color: AppColors.blue300.withValues(alpha: 0.28),
blurRadius: 30,
offset: const Offset(0, 16),
),
],
),
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(AppRadius.full),
child: Image.asset(
'assets/images/logo.png',
width: 58,
height: 58,
fit: BoxFit.cover,
),
),
),
),
SizedBox(height: AppSpacing.lg),
const Text(
'linksy',
style: TextStyle(
fontFamily: 'Playfair Display',
fontSize: 34,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
color: AppColors.appTitle,
letterSpacing: 0.4,
),
),
],
if (title != null) ...[
if (showBrand) SizedBox(height: AppSpacing.lg),
Text(
title!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
letterSpacing: -0.2,
),
),
],
if (subtitle != null) ...[
SizedBox(height: AppSpacing.sm),
Text(
subtitle!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 14,
height: 1.45,
color: AppColors.authLinkMuted,
),
),
],
],
);
}
}
class AuthSurfaceCard extends StatelessWidget {
const AuthSurfaceCard({super.key, required this.child});
final Widget child;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(AppSpacing.xl),
decoration: BoxDecoration(
color: AppColors.authCardBackground,
borderRadius: BorderRadius.circular(AppRadius.xxl),
border: Border.all(color: AppColors.authCardBorder),
boxShadow: [
BoxShadow(
color: AppColors.blue200.withValues(alpha: 0.18),
blurRadius: 34,
offset: const Offset(0, 18),
),
BoxShadow(
color: AppColors.slate900.withValues(alpha: 0.06),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: child,
);
}
}
class AuthSection extends StatelessWidget {
const AuthSection({
super.key,
this.title,
this.description,
required this.child,
});
final String? title;
final String? description;
final Widget child;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (title != null) ...[
Text(
title!,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.slate800,
),
),
if (description != null) ...[
SizedBox(height: AppSpacing.xs),
Text(
description!,
style: const TextStyle(
fontSize: 13,
height: 1.4,
color: AppColors.authLinkMuted,
),
),
],
SizedBox(height: AppSpacing.md),
],
child,
],
);
}
}
class _AuthBackgroundOrbs extends StatelessWidget {
const _AuthBackgroundOrbs();
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: Stack(
children: [
Positioned(
top: -72,
left: -38,
child: _Orb(
size: 168,
color: AppColors.authBackgroundOrb.withValues(alpha: 0.42),
),
),
Positioned(
top: 108,
right: -32,
child: _Orb(
size: 120,
color: AppColors.blue100.withValues(alpha: 0.32),
),
),
Positioned(
bottom: 36,
left: 24,
child: _Orb(
size: 92,
color: AppColors.blue50.withValues(alpha: 0.7),
),
),
],
),
);
}
}
class _Orb extends StatelessWidget {
const _Orb({required this.size, required this.color});
final double size;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(shape: BoxShape.circle, color: color),
);
}
}
apps/lib/features/auth/ui/widgets/password_field.dart
+51
View File
@@ -0,0 +1,51 @@
import 'package:flutter/material.dart';
import '../../../../core/theme/design_tokens.dart';
import 'auth_field.dart';
class PasswordField extends StatefulWidget {
const PasswordField({
super.key,
required this.controller,
required this.label,
required this.hint,
this.onChanged,
});
final TextEditingController controller;
final String label;
final String hint;
final ValueChanged<String>? onChanged;
@override
State<PasswordField> createState() => _PasswordFieldState();
}
class _PasswordFieldState extends State<PasswordField> {
bool _obscured = true;
void _toggleVisibility() {
setState(() {
_obscured = !_obscured;
});
}
@override
Widget build(BuildContext context) {
return AuthField(
label: widget.label,
hint: widget.hint,
controller: widget.controller,
obscureText: _obscured,
onChanged: widget.onChanged,
suffixIcon: IconButton(
onPressed: _toggleVisibility,
tooltip: _obscured ? '显示密码' : '隐藏密码',
icon: Icon(
_obscured ? Icons.visibility_off_rounded : Icons.visibility_rounded,
color: AppColors.authInputIcon,
),
),
);
}
}