Phase 3.5: Implemented adaptive navigation (BottomBar/Rail) and My Stream console

frontend/lib/main.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:fvp/fvp.dart' as fvp; // 使用 as fvp 别名
+import 'package:fvp/fvp.dart' as fvp;
 import 'providers/auth_provider.dart';
 import 'providers/settings_provider.dart';
 import 'pages/home_page.dart';
 import 'pages/login_page.dart';
 
 void main() {
-  // 初始化播放器引擎
   fvp.registerWith();
   
   runApp(
@@ -28,10 +27,22 @@ class HightubeApp extends StatelessWidget {
 
     return MaterialApp(
       title: 'Hightube',
+      // 设置深色主题为主，更符合视频类应用的审美
       theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
         useMaterial3: true,
+        colorScheme: ColorScheme.fromSeed(
+          seedColor: Colors.deepPurple,
+          brightness: Brightness.light,
+        ),
       ),
+      darkTheme: ThemeData(
+        useMaterial3: true,
+        colorScheme: ColorScheme.fromSeed(
+          seedColor: Colors.deepPurple,
+          brightness: Brightness.dark,
+        ),
+      ),
+      themeMode: ThemeMode.system, // 跟随系统切换深浅色
       home: auth.isAuthenticated ? HomePage() : LoginPage(),
       debugShowCheckedModeBanner: false,
     );

frontend/lib/pages/home_page.dart

@@ -7,6 +7,7 @@ import '../providers/settings_provider.dart';
 import '../services/api_service.dart';
 import 'settings_page.dart';
 import 'player_page.dart';
+import 'my_stream_page.dart';
 
 class HomePage extends StatefulWidget {
   @override
@@ -14,6 +15,66 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
+  int _selectedIndex = 0;
+
+  // 根据当前选择的索引返回对应的页面
+  final List<Widget> _pages = [
+    _ExploreView(),
+    MyStreamPage(),
+    SettingsPage(),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    // 检查是否为桌面/宽屏环境
+    bool isWide = MediaQuery.of(context).size.width > 600;
+
+    return Scaffold(
+      body: Row(
+        children: [
+          // 桌面端侧边导航
+          if (isWide)
+            NavigationRail(
+              selectedIndex: _selectedIndex,
+              onDestinationSelected: (int index) {
+                setState(() => _selectedIndex = index);
+              },
+              labelType: NavigationRailLabelType.all,
+              destinations: const [
+                NavigationRailDestination(icon: Icon(Icons.explore), label: Text('Explore')),
+                NavigationRailDestination(icon: Icon(Icons.videocam), label: Text('Stream')),
+                NavigationRailDestination(icon: Icon(Icons.settings), label: Text('Settings')),
+              ],
+            ),
+          // 主内容区
+          Expanded(child: _pages[_selectedIndex]),
+        ],
+      ),
+      // 移动端底部导航
+      bottomNavigationBar: !isWide
+          ? NavigationBar(
+              selectedIndex: _selectedIndex,
+              onDestinationSelected: (int index) {
+                setState(() => _selectedIndex = index);
+              },
+              destinations: const [
+                NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
+                NavigationDestination(icon: Icon(Icons.videocam), label: 'Stream'),
+                NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
+              ],
+            )
+          : null,
+    );
+  }
+}
+
+// 将原本的直播列表逻辑封装为一个内部 View
+class _ExploreView extends StatefulWidget {
+  @override
+  _ExploreViewState createState() => _ExploreViewState();
+}
+
+class _ExploreViewState extends State<_ExploreView> {
   List<dynamic> _activeRooms = [];
   bool _isLoading = false;
   Timer? _refreshTimer;
@@ -22,7 +83,6 @@ class _HomePageState extends State<HomePage> {
   void initState() {
     super.initState();
     _refreshRooms();
-    // 启动自动刷新定时器 (每 10 秒自动更新列表)
     _refreshTimer = Timer.periodic(Duration(seconds: 10), (timer) {
       if (mounted) _refreshRooms(isAuto: true);
     });
@@ -35,7 +95,7 @@ class _HomePageState extends State<HomePage> {
   }
 
   Future<void> _refreshRooms({bool isAuto = false}) async {
-    if (!isAuto) setState(() => _isLoading = true);
+    if (!isAuto && mounted) setState(() => _isLoading = true);
     
     final settings = context.read<SettingsProvider>();
     final auth = context.read<AuthProvider>();
@@ -64,21 +124,12 @@ class _HomePageState extends State<HomePage> {
 
     return Scaffold(
       appBar: AppBar(
-        title: Text("Hightube Live"),
+        title: Text("Hightube Live", style: TextStyle(fontWeight: FontWeight.bold)),
+        centerTitle: true,
         actions: [
-          IconButton(
+          IconButton(icon: Icon(Icons.refresh), onPressed: () => _refreshRooms()),
-            icon: Icon(Icons.refresh),
-            tooltip: "Manual Refresh",
-            onPressed: () => _refreshRooms(),
-          ),
-          IconButton(
-            icon: Icon(Icons.settings),
-            tooltip: "Settings",
-            onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => SettingsPage())),
-          ),
           IconButton(
             icon: Icon(Icons.logout),
-            tooltip: "Logout",
             onPressed: () => context.read<AuthProvider>().logout(),
           ),
         ],
@@ -88,33 +139,107 @@ class _HomePageState extends State<HomePage> {
         child: _isLoading && _activeRooms.isEmpty
             ? Center(child: CircularProgressIndicator())
             : _activeRooms.isEmpty
-                ? ListView(children: [Padding(padding: EdgeInsets.only(top: 50), child: Center(child: Text("No active rooms. Be the first!")))])
+                ? ListView(children: [
-                : ListView.builder(
+                    Padding(
+                      padding: EdgeInsets.only(top: 100),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Icon(Icons.live_tv_outlined, size: 80, color: Colors.grey),
+                          SizedBox(height: 16),
+                          Text("No active rooms. Be the first!", style: TextStyle(color: Colors.grey, fontSize: 16)),
+                        ],
+                      ),
+                    )
+                  ])
+                : GridView.builder(
+                    padding: EdgeInsets.all(12),
+                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                      maxCrossAxisExtent: 400,
+                      childAspectRatio: 1.2,
+                      crossAxisSpacing: 12,
+                      mainAxisSpacing: 12,
+                    ),
                     itemCount: _activeRooms.length,
                     itemBuilder: (context, index) {
                       final room = _activeRooms[index];
-                      return ListTile(
+                      return _buildRoomCard(room, settings);
-                        leading: CircleAvatar(child: Icon(Icons.live_tv)),
-                        title: Text(room['title']),
-                        subtitle: Text("User ID: ${room['user_id']} (Streaming now)"),
-                        trailing: Icon(Icons.play_circle_filled, color: Colors.blue),
-                        onTap: () {
-                          // 动态构建播放链接：rtmp://{host}:1935/live/{room_id}
-                          final rtmpUrl = "${settings.rtmpUrl}/${room['room_id']}";
-                          Navigator.push(
-                            context,
-                            MaterialPageRoute(
-                              builder: (_) => PlayerPage(
-                                title: room['title'],
-                                rtmpUrl: rtmpUrl,
-                              ),
-                            ),
-                          );
-                        },
-                      );
                     },
                   ),
       ),
     );
   }
+
+  Widget _buildRoomCard(dynamic room, SettingsProvider settings) {
+    return Card(
+      elevation: 4,
+      clipBehavior: Clip.antiAlias,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      child: InkWell(
+        onTap: () {
+          final rtmpUrl = "${settings.rtmpUrl}/${room['room_id']}";
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (_) => PlayerPage(
+                title: room['title'],
+                rtmpUrl: rtmpUrl,
+              ),
+            ),
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Expanded(
+              flex: 3,
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  Container(
+                    color: Theme.of(context).colorScheme.primaryContainer,
+                    child: Center(child: Icon(Icons.live_tv, size: 50, color: Theme.of(context).colorScheme.primary)),
+                  ),
+                  Positioned(
+                    top: 8, left: 8,
+                    child: Container(
+                      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                      decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(4)),
+                      child: Row(children: [
+                        Icon(Icons.circle, size: 8, color: Colors.white),
+                        SizedBox(width: 4),
+                        Text("LIVE", style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold)),
+                      ]),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Expanded(
+              flex: 1,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                child: Row(
+                  children: [
+                    CircleAvatar(radius: 16, child: Text(room['user_id'].toString().substring(0, 1))),
+                    SizedBox(width: 12),
+                    Expanded(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(room['title'], maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14)),
+                          Text("Host ID: ${room['user_id']}", style: TextStyle(fontSize: 12, color: Colors.grey)),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
 }

frontend/lib/pages/my_stream_page.dart

@@ -0,0 +1,125 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:flutter/services.dart';
+import '../providers/auth_provider.dart';
+import '../providers/settings_provider.dart';
+import '../services/api_service.dart';
+
+class MyStreamPage extends StatefulWidget {
+  @override
+  _MyStreamPageState createState() => _MyStreamPageState();
+}
+
+class _MyStreamPageState extends State<MyStreamPage> {
+  Map<String, dynamic>? _roomInfo;
+  bool _isLoading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _fetchMyRoom();
+  }
+
+  Future<void> _fetchMyRoom() async {
+    setState(() => _isLoading = true);
+    final settings = context.read<SettingsProvider>();
+    final auth = context.read<AuthProvider>();
+    final api = ApiService(settings, auth.token);
+
+    try {
+      final response = await api.getMyRoom();
+      if (response.statusCode == 200) {
+        setState(() => _roomInfo = jsonDecode(response.body));
+      }
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Failed to fetch room info")));
+    } finally {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final settings = context.watch<SettingsProvider>();
+
+    return Scaffold(
+      appBar: AppBar(title: Text("My Stream Console")),
+      body: _isLoading
+          ? Center(child: CircularProgressIndicator())
+          : _roomInfo == null
+              ? Center(child: Text("No room info found."))
+              : SingleChildScrollView(
+                  padding: EdgeInsets.all(20),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      _buildInfoCard(
+                        title: "Room Title",
+                        value: _roomInfo!['title'],
+                        icon: Icons.edit,
+                        onTap: () {
+                          // TODO: Implement title update API later
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Title editing coming soon!")));
+                        },
+                      ),
+                      SizedBox(height: 20),
+                      _buildInfoCard(
+                        title: "RTMP Server URL",
+                        value: settings.rtmpUrl,
+                        icon: Icons.copy,
+                        onTap: () {
+                          Clipboard.setData(ClipboardData(text: settings.rtmpUrl));
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Server URL copied to clipboard")));
+                        },
+                      ),
+                      SizedBox(height: 20),
+                      _buildInfoCard(
+                        title: "Stream Key (Keep Secret!)",
+                        value: _roomInfo!['stream_key'],
+                        icon: Icons.copy,
+                        isSecret: true,
+                        onTap: () {
+                          Clipboard.setData(ClipboardData(text: _roomInfo!['stream_key']));
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Stream Key copied to clipboard")));
+                        },
+                      ),
+                      SizedBox(height: 30),
+                      Center(
+                        child: Column(
+                          children: [
+                            Icon(Icons.info_outline, color: Colors.grey),
+                            SizedBox(height: 8),
+                            Text(
+                              "Use OBS or other tools to stream to this address.",
+                              textAlign: TextAlign.center,
+                              style: TextStyle(color: Colors.grey, fontSize: 12),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+    );
+  }
+
+  Widget _buildInfoCard({
+    required String title,
+    required String value,
+    required IconData icon,
+    bool isSecret = false,
+    VoidCallback? onTap,
+  }) {
+    return Card(
+      child: ListTile(
+        title: Text(title, style: TextStyle(fontSize: 12, color: Colors.grey)),
+        subtitle: Text(
+          isSecret ? "••••••••••••••••" : value,
+          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+        ),
+        trailing: IconButton(icon: Icon(icon), onPressed: onTap),
+      ),
+    );
+  }
+}