feat(web): align assistant homepage with app layout
This commit is contained in:
Haitao Pan
parent
bb1fe0cbab
commit
bcb9d5d39b
@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
|
||||
import '../i18n/app_language.dart';
|
||||
import '../models/app_models.dart';
|
||||
import '../theme/app_palette.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
import '../web/web_assistant_page.dart';
|
||||
import '../web/web_settings_page.dart';
|
||||
import '../widgets/app_brand_logo.dart';
|
||||
@ -32,6 +31,7 @@ class AppShell extends StatelessWidget {
|
||||
: (availableDestinations.isEmpty
|
||||
? WorkspaceDestination.assistant
|
||||
: availableDestinations.first);
|
||||
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
bottom: false,
|
||||
@ -79,68 +79,43 @@ class AppShell extends StatelessWidget {
|
||||
return Row(
|
||||
children: [
|
||||
Container(
|
||||
width: currentDestination == WorkspaceDestination.settings
|
||||
? 248
|
||||
: 236,
|
||||
margin: const EdgeInsets.fromLTRB(4, 4, 4, 0),
|
||||
width: 76,
|
||||
margin: const EdgeInsets.fromLTRB(4, 4, 0, 4),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
palette.chromeHighlight.withValues(alpha: 0.9),
|
||||
palette.chromeHighlight.withValues(alpha: 0.94),
|
||||
palette.chromeSurface.withValues(alpha: 0.92),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(AppRadius.sidebar),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
border: Border.all(color: palette.chromeStroke),
|
||||
boxShadow: [palette.chromeShadowAmbient],
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
padding: const EdgeInsets.fromLTRB(10, 12, 10, 10),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const AppBrandLogo(size: 32, borderRadius: 10),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'XWorkmate',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.titleMedium
|
||||
?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
appText(
|
||||
'Web Workspace',
|
||||
'Web Workspace',
|
||||
),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodySmall
|
||||
?.copyWith(
|
||||
color: palette.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
Container(
|
||||
width: 52,
|
||||
height: 52,
|
||||
decoration: BoxDecoration(
|
||||
color: palette.surfacePrimary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: palette.strokeSoft),
|
||||
),
|
||||
child: const Center(
|
||||
child: AppBrandLogo(size: 28, borderRadius: 8),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
...availableDestinations.map(
|
||||
(destination) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: _WebNavItem(
|
||||
child: _WebNavRailButton(
|
||||
key: Key('web-shell-nav-${destination.name}'),
|
||||
destination: destination,
|
||||
selected: currentDestination == destination,
|
||||
onTap: () =>
|
||||
@ -149,34 +124,25 @@ class AppShell extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: palette.surfacePrimary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: palette.strokeSoft),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
appText('平台', 'Platform'),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelMedium
|
||||
?.copyWith(color: palette.textMuted),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
appText(
|
||||
'Web 仅保留 Assistant / Settings',
|
||||
'Web keeps only Assistant / Settings',
|
||||
),
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodySmall,
|
||||
),
|
||||
],
|
||||
_WebUtilityButton(
|
||||
key: const Key('web-shell-language-toggle'),
|
||||
tooltip: controller.appLanguage == AppLanguage.zh
|
||||
? '中文'
|
||||
: 'English',
|
||||
icon: Icons.translate_rounded,
|
||||
onTap: controller.toggleAppLanguage,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_WebUtilityButton(
|
||||
key: const Key('web-shell-theme-toggle'),
|
||||
tooltip: _themeLabel(controller.themeMode),
|
||||
icon: controller.themeMode == ThemeMode.dark
|
||||
? Icons.dark_mode_rounded
|
||||
: Icons.light_mode_rounded,
|
||||
onTap: () => controller.setThemeMode(
|
||||
controller.themeMode == ThemeMode.dark
|
||||
? ThemeMode.light
|
||||
: ThemeMode.dark,
|
||||
),
|
||||
),
|
||||
],
|
||||
@ -210,8 +176,9 @@ class AppShell extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class _WebNavItem extends StatelessWidget {
|
||||
const _WebNavItem({
|
||||
class _WebNavRailButton extends StatelessWidget {
|
||||
const _WebNavRailButton({
|
||||
super.key,
|
||||
required this.destination,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
@ -224,35 +191,76 @@ class _WebNavItem extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final palette = context.palette;
|
||||
return InkWell(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? palette.accentMuted : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(
|
||||
color: selected
|
||||
? palette.accent.withValues(alpha: 0.26)
|
||||
: palette.strokeSoft,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(destination.icon, size: 18),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
destination.label,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
|
||||
),
|
||||
return Tooltip(
|
||||
message: destination.label,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
onTap: onTap,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 180),
|
||||
curve: Curves.easeOutCubic,
|
||||
width: 52,
|
||||
height: 52,
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? palette.accentMuted : palette.surfacePrimary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(
|
||||
color: selected
|
||||
? palette.accent.withValues(alpha: 0.28)
|
||||
: palette.strokeSoft,
|
||||
),
|
||||
],
|
||||
boxShadow: selected ? [palette.chromeShadowLift] : null,
|
||||
),
|
||||
child: Icon(
|
||||
destination.icon,
|
||||
size: 22,
|
||||
color: selected ? palette.accent : palette.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WebUtilityButton extends StatelessWidget {
|
||||
const _WebUtilityButton({
|
||||
super.key,
|
||||
required this.tooltip,
|
||||
required this.icon,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final String tooltip;
|
||||
final IconData icon;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final palette = context.palette;
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: 52,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: palette.surfacePrimary,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(color: palette.strokeSoft),
|
||||
),
|
||||
child: Icon(icon, size: 20, color: palette.textSecondary),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
String _themeLabel(ThemeMode mode) {
|
||||
return switch (mode) {
|
||||
ThemeMode.dark => appText('深色', 'Dark'),
|
||||
ThemeMode.system => appText('跟随系统', 'System'),
|
||||
ThemeMode.light => appText('浅色', 'Light'),
|
||||
};
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -21,10 +21,14 @@ void main() {
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('助手'), findsWidgets);
|
||||
expect(find.text('设置'), findsWidgets);
|
||||
expect(find.byKey(const Key('web-shell-nav-assistant')), findsOneWidget);
|
||||
expect(find.byKey(const Key('web-shell-nav-settings')), findsOneWidget);
|
||||
expect(find.text('Tasks'), findsNothing);
|
||||
expect(find.byKey(const Key('assistant-task-rail')), findsOneWidget);
|
||||
expect(find.byKey(const Key('assistant-attachment-menu-button')), findsOneWidget);
|
||||
expect(
|
||||
find.byKey(const Key('assistant-attachment-menu-button')),
|
||||
findsOneWidget,
|
||||
);
|
||||
|
||||
await tester.tap(find.text('连接设置'));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user