feat(theme): update color scheme with new Slate theme and improved surface hierarchy

Updated the app's color scheme to implement a new "Slate" theme with refined dark and light variants. Changed background colors from #0A0E14 to #0B1120 for dark mode and updated surface layer colors to follow Material Design 3 specifications. Modified text colors and outline variants for better contrast and accessibility. Updated font sizes in transaction details screen from 11px to 12px for improved readability.
2026-04-05 22:24:04 +08:00
parent e2624b845a
commit d8cd38c4de
17 changed files with 3980 additions and 2922 deletions
--- a/flutter_monisuo/lib/ui/pages/home/header_bar.dart
+++ b/flutter_monisuo/lib/ui/pages/home/header_bar.dart
@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:provider/provider.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+import '../../../providers/auth_provider.dart';
+
+/// 首页顶栏 - Logo + 搜索/通知/头像
+class HeaderBar extends StatelessWidget {
+  const HeaderBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: 16,
+        vertical: 8,
+      ),
+      child: Row(
+        children: [
+          // Logo
+          Text(
+            'MONISUO',
+            style: GoogleFonts.inter(
+              fontSize: 18,
+              fontWeight: FontWeight.w700,
+              letterSpacing: 1,
+              color: colorScheme.onSurface,
+            ),
+          ),
+          const Spacer(),
+          // Search button
+          _IconButton(
+            icon: LucideIcons.search,
+            colorScheme: colorScheme,
+            onTap: () {},
+          ),
+          const SizedBox(width: 8),
+          // Bell button
+          _IconButton(
+            icon: LucideIcons.bell,
+            colorScheme: colorScheme,
+            onTap: () {},
+          ),
+          const SizedBox(width: 8),
+          // Avatar
+          Consumer<AuthProvider>(
+            builder: (context, auth, _) {
+              final username = auth.user?.username ?? '';
+              final initial = username.isNotEmpty ? username[0].toUpperCase() : '?';
+              return Container(
+                width: 32,
+                height: 32,
+                decoration: BoxDecoration(
+                  color: colorScheme.primary,
+                  shape: BoxShape.circle,
+                ),
+                alignment: Alignment.center,
+                child: Text(
+                  initial,
+                  style: GoogleFonts.inter(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w600,
+                    color: Colors.white,
+                  ),
+                ),
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _IconButton extends StatelessWidget {
+  const _IconButton({
+    required this.icon,
+    required this.colorScheme,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final ColorScheme colorScheme;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        width: 32,
+        height: 32,
+        decoration: BoxDecoration(
+          color: colorScheme.surfaceContainerHigh,
+          borderRadius: BorderRadius.circular(16),
+        ),
+        alignment: Alignment.center,
+        child: Icon(
+          icon,
+          size: 16,
+          color: colorScheme.onSurfaceVariant,
+        ),
+      ),
+    );
+  }
+}