feat(apps): establish shared mobile design system

This commit is contained in:
2026-08-10 23:31:44 +08:00
parent 7242048abf
commit a2383fc8a1
34 changed files with 2007 additions and 751 deletions

View File

@@ -17,6 +17,7 @@ class _LoginPageState extends State<LoginPage> {
final _password = TextEditingController();
bool _submitting = false;
String? _error;
bool _obscurePassword = true;
@override
void dispose() {
@@ -44,28 +45,43 @@ class _LoginPageState extends State<LoginPage> {
body: SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
padding: const EdgeInsets.fromLTRB(24, 32, 24, 24),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Icon(
Icons.health_and_safety_rounded,
size: 68,
color: Theme.of(context).colorScheme.primary,
Align(
child: Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(24),
),
child: Icon(
Icons.health_and_safety_rounded,
size: 38,
color: Theme.of(context).colorScheme.primary,
semanticLabel: '瓶安芯安全标识',
),
),
),
const SizedBox(height: 20),
const SizedBox(height: 24),
Text(
'瓶安芯',
textAlign: TextAlign.center,
style: Theme.of(
context,
).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.w900),
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 8),
const Text('安全服务与生活采购', textAlign: TextAlign.center),
const SizedBox(height: 36),
Text(
'安全服务与生活采购',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 40),
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
@@ -78,19 +94,50 @@ class _LoginPageState extends State<LoginPage> {
const SizedBox(height: 14),
TextField(
controller: _password,
obscureText: true,
obscureText: _obscurePassword,
autofillHints: const [AutofillHints.password],
decoration: const InputDecoration(
onSubmitted: (_) => _submitting ? null : _login(),
decoration: InputDecoration(
labelText: '密码',
prefixIcon: Icon(Icons.lock_outline),
prefixIcon: const Icon(Icons.lock_outline),
suffixIcon: IconButton(
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
icon: Icon(
_obscurePassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
),
),
),
),
if (_error != null) ...[
const SizedBox(height: 12),
Text(_error!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
Semantics(
liveRegion: true,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.error_outline,
size: 20,
color: Theme.of(context).colorScheme.error,
),
const SizedBox(width: 8),
Expanded(
child: Text(
_error!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.error,
),
),
),
],
),
),
],
const SizedBox(height: 20),
ElevatedButton(
const SizedBox(height: 24),
FilledButton(
onPressed: _submitting ? null : _login,
child: _submitting
? const SizedBox.square(
@@ -103,11 +150,13 @@ class _LoginPageState extends State<LoginPage> {
onPressed: () => context.push('/register'),
child: const Text('首次使用?注册账号'),
),
const SizedBox(height: 12),
const Text(
'登录即表示同意用户协议隐私政策',
const SizedBox(height: 8),
Text(
'登录即表示你已阅读并同意用户协议》和《隐私政策',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),

View File

@@ -21,6 +21,7 @@ class _RegisterPageState extends State<RegisterPage> {
String _requestIdentity = '';
bool _busy = false;
String? _message;
bool _obscurePassword = true;
Future<void> _sendCode() async {
try {
@@ -70,53 +71,103 @@ class _RegisterPageState extends State<RegisterPage> {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text('注册用户')),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
decoration: const InputDecoration(labelText: '手机号'),
),
const SizedBox(height: 12),
TextField(
controller: _name,
decoration: const InputDecoration(labelText: '姓名'),
),
const SizedBox(height: 12),
TextField(
controller: _address,
decoration: const InputDecoration(labelText: '服务地址'),
),
const SizedBox(height: 12),
TextField(
controller: _password,
obscureText: true,
decoration: const InputDecoration(labelText: '登录密码'),
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: TextField(
controller: _code,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: '验证码'),
appBar: AppBar(title: const Text('创建账号')),
body: SafeArea(
top: false,
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
children: [
Text('开始使用瓶安芯', style: Theme.of(context).textTheme.headlineSmall),
const SizedBox(height: 8),
Text(
'填写真实服务信息,便于校验所属服务区域。',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 28),
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
autofillHints: const [AutofillHints.telephoneNumber],
decoration: const InputDecoration(
labelText: '手机号',
prefixIcon: Icon(Icons.phone_outlined),
),
),
const SizedBox(height: 16),
TextField(
controller: _name,
autofillHints: const [AutofillHints.name],
decoration: const InputDecoration(
labelText: '姓名',
prefixIcon: Icon(Icons.person_outline),
),
),
const SizedBox(height: 16),
TextField(
controller: _address,
autofillHints: const [AutofillHints.fullStreetAddress],
decoration: const InputDecoration(
labelText: '服务地址',
helperText: '用于匹配气站与配送服务范围',
prefixIcon: Icon(Icons.location_on_outlined),
),
),
const SizedBox(height: 16),
TextField(
controller: _password,
obscureText: _obscurePassword,
autofillHints: const [AutofillHints.newPassword],
decoration: InputDecoration(
labelText: '登录密码',
prefixIcon: const Icon(Icons.lock_outline),
suffixIcon: IconButton(
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
icon: Icon(
_obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined,
),
),
),
const SizedBox(width: 10),
OutlinedButton(onPressed: _sendCode, child: const Text('获取验证码')),
],
),
if (_message != null)
Padding(padding: const EdgeInsets.only(top: 12), child: Text(_message!)),
const SizedBox(height: 24),
ElevatedButton(
onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
child: const Text('创建账号'),
),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: TextField(
controller: _code,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: '验证码'),
),
),
const SizedBox(width: 10),
SizedBox(
width: 120,
child: OutlinedButton(
onPressed: _busy ? null : _sendCode,
child: const Text('获取验证码'),
),
),
],
),
if (_message != null)
Padding(
padding: const EdgeInsets.only(top: 12),
child: Semantics(liveRegion: true, child: Text(_message!)),
),
const SizedBox(height: 28),
FilledButton(
onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
child: _busy
? const SizedBox.square(
dimension: 22,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Text('创建账号'),
),
],
),
),
);
}