feat: 实现导航页基础功能

- 添加导航条目和分类数据模型
- 实现导航卡片网格展示
- 支持点击卡片打开链接
- 添加主题样式（渐变色、卡片阴影）
- 区分系统默认和自定义条目
- 添加分类统计信息"

frontend/lib/data/nav_data.dart

@@ -0,0 +1,94 @@
+import '../models/nav_item.dart';
+import '../models/category.dart';
+
+class NavData {
+  // 获取所有分类数据
+  static List<Category> getCategories() {
+    return [
+      Category(
+        id: 'default',
+        name: '常用导航',
+        isSystem: true,
+        entries: [
+          NavItem(
+            id: 'github',
+            title: 'GitHub',
+            url: 'https://github.com',
+            icon: '💻',
+            isSystem: true,
+          ),
+          NavItem(
+            id: 'google',
+            title: 'Google',
+            url: 'https://www.google.com',
+            icon: '🔍',
+            isSystem: true,
+          ),
+          NavItem(
+            id: 'stackoverflow',
+            title: 'Stack Overflow',
+            url: 'https://stackoverflow.com',
+            icon: '📚',
+            isSystem: true,
+          ),
+          NavItem(
+            id: 'bilibili',
+            title: 'B站',
+            url: 'https://www.bilibili.com',
+            icon: '📺',
+            isSystem: true,
+          ),
+        ],
+      ),
+      Category(
+        id: 'dev',
+        name: '开发工具',
+        isSystem: false,
+        entries: [
+          NavItem(
+            id: 'rust_doc',
+            title: 'Rust 文档',
+            url: 'https://doc.rust-lang.org',
+            icon: '🦀',
+            isSystem: false,
+          ),
+          NavItem(
+            id: 'flutter_doc',
+            title: 'Flutter 文档',
+            url: 'https://docs.flutter.dev',
+            icon: '📱',
+            isSystem: false,
+          ),
+          NavItem(
+            id: 'dartpad',
+            title: 'DartPad',
+            url: 'https://dartpad.dev',
+            icon: '🎯',
+            isSystem: false,
+          ),
+        ],
+      ),
+      Category(
+        id: 'ai',
+        name: 'AI 工具',
+        isSystem: false,
+        entries: [
+          NavItem(
+            id: 'chatgpt',
+            title: 'ChatGPT',
+            url: 'https://chat.openai.com',
+            icon: '🤖',
+            isSystem: false,
+          ),
+          NavItem(
+            id: 'claude',
+            title: 'Claude',
+            url: 'https://claude.ai',
+            icon: '🧠',
+            isSystem: false,
+          ),
+        ],
+      ),
+    ];
+  }
+}

frontend/lib/main.dart

@@ -1,5 +1,10 @@
 import 'package:flutter/material.dart';
-
+import 'models/nav_item.dart';
+import 'models/category.dart';
+import 'data/mock_data.dart';
+import 'package:web/web.dart' as web;
+import 'data/nav_data.dart';
+import 'theme/app_theme.dart';
 void main() {
   runApp(const MyApp());
 }
@@ -7,115 +12,233 @@ void main() {
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
 
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Demo',
+      title: 'Navius 导航',
-      theme: ThemeData(
+      theme: AppTheme.lightTheme,
-        // This is the theme of your application.
+      home: NaviusHomePage(),
-        //
-        // TRY THIS: Try running your application with "flutter run". You'll see
-        // the application has a purple toolbar. Then, without quitting the app,
-        // try changing the seedColor in the colorScheme below to Colors.green
-        // and then invoke "hot reload" (save your changes or press the "hot
-        // reload" button in a Flutter-supported IDE, or press "r" if you used
-        // the command line to start the app).
-        //
-        // Notice that the counter didn't reset back to zero; the application
-        // state is not lost during the reload. To reset the state, use hot
-        // restart instead.
-        //
-        // This works for code too, not just values: Most code changes can be
-        // tested with just a hot reload.
-        colorScheme: .fromSeed(seedColor: Colors.deepPurple),
-      ),
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }
 
-class MyHomePage extends StatefulWidget {
+class NaviusHomePage extends StatelessWidget {
-  const MyHomePage({super.key, required this.title});
+  const NaviusHomePage({super.key});
-
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
 
   @override
   Widget build(BuildContext context) {
-    // This method is rerun every time setState is called, for instance as done
+    // 获取分类数据
-    // by the _incrementCounter method above.
+    final categories = MockData.getCategories();
-    //
+
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
     return Scaffold(
-      appBar: AppBar(
+      appBar: PreferredSize(
-        // TRY THIS: Try changing the color here to a specific color (to
+        preferredSize: const Size.fromHeight(120),
-        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
+        child: Container(
-        // change color while the other colors stay the same.
+          decoration: BoxDecoration(
-        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+            gradient: AppTheme.appBarGradient,
-        // Here we take the value from the MyHomePage object that was created by
+            borderRadius: const BorderRadius.only(
-        // the App.build method, and use it to set our appbar title.
+              bottomLeft: Radius.circular(30),
-        title: Text(widget.title),
+              bottomRight: Radius.circular(30),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          //
-          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
-          // action in the IDE, or press "p" in the console), to see the
-          // wireframe for each widget.
-          mainAxisAlignment: .center,
-          children: [
-            const Text('You have pushed the button this many times:'),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headlineMedium,
             ),
-          ],
+          ),
+          child: SafeArea(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                // 标题
+                const Text(
+                  'Navius 导航',
+                  style: TextStyle(
+                    fontSize: 28,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.white,
+                    letterSpacing: 1.5,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  '${categories.length} 个分类 · ${_getTotalEntries(categories)} 个导航',
+                  style: const TextStyle(
+                    fontSize: 14,
+                    color: Colors.white70,
+                  ),
+                ),
+              ],
+            ),
+          ),
         ),
       ),
-      floatingActionButton: FloatingActionButton(
+      body: ListView.builder(
-        onPressed: _incrementCounter,
+        padding: const EdgeInsets.all(16),
-        tooltip: 'Increment',
+        itemCount: categories.length,
-        child: const Icon(Icons.add),
+        itemBuilder: (context, index) {
+          final category = categories[index];
+          return CategorySection(category: category);
+        },
+      ),
+    );
+  }
+  // 计算总导航数
+  static int _getTotalEntries(List<Category> categories) {
+    int total = 0;
+    for (var category in categories) {
+      total += category.entries.length;
+    }
+    return total;
+  }
+}
+
+// 分类区块组件
+class CategorySection extends StatelessWidget {
+  final Category category;
+
+  const CategorySection({super.key, required this.category});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children:  [
+        // 分类标题（美化版）
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 16),
+          child: Row(
+            children: [
+              // 分类名称
+              Text(
+                category.name,
+                style: const TextStyle(
+                  fontSize: 20,
+                  fontWeight: FontWeight.w700,
+                  color: Color(0xFF1E293B),
+                  letterSpacing: 0.5,
+                ),
+              ),
+              const SizedBox(width: 12),
+              // 条目数量
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
+                decoration: BoxDecoration(
+                  color: AppTheme.systemTagColor,
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: Text(
+                  '${category.entries.length}',
+                  style: const TextStyle(
+                    fontSize: 12,
+                    color: AppTheme.systemTagTextColor,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+              const Spacer(),
+              // 系统标签
+              if (category.isSystem)
+                Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+                  decoration: BoxDecoration(
+                    color: AppTheme.systemTagColor,
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  child: const Text(
+                    '系统分类',
+                    style: TextStyle(
+                      fontSize: 11,
+                      color: AppTheme.systemTagTextColor,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+        // 导航网格（4列）
+        GridView.builder(
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 4,
+            childAspectRatio: 1.0,
+            crossAxisSpacing: 16,
+            mainAxisSpacing: 16,
+          ),
+          itemCount: category.entries.length,
+          itemBuilder: (context, index) {
+            final item = category.entries[index];
+            return NavItemCard(item: item);
+          },
+        ),
+        const SizedBox(height: 8),
+      ],
+    );
+  }
+}
+
+// 单个导航卡片组件
+class NavItemCard extends StatelessWidget {
+  final NavItem item;
+
+  const NavItemCard({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: AppTheme.cardShadow,
+      ),
+      child: InkWell(
+        onTap: () {
+          web.window.open(item.url, '_blank');
+        },
+        borderRadius: BorderRadius.circular(16),
+        hoverColor: AppTheme.primaryColor.withOpacity(0.05),
+        splashColor: AppTheme.primaryColor.withOpacity(0.1),
+        child: Padding(
+          padding: const EdgeInsets.all(8),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              // 图标（增大）
+              Text(
+                item.icon,
+                style: const TextStyle(fontSize: 36),
+              ),
+              const SizedBox(height: 10),
+              // 标题
+              Text(
+                item.title,
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                  color: Color(0xFF1E293B),
+                ),
+                textAlign: TextAlign.center,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              const SizedBox(height: 4),
+              // 系统标签（改进样式）
+              if (item.isSystem)
+                Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+                  decoration: BoxDecoration(
+                    color: AppTheme.systemTagColor,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: Text(
+                    '默认',
+                    style: TextStyle(
+                      fontSize: 9,
+                      color: AppTheme.systemTagTextColor,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
       ),
     );
   }

frontend/lib/models/category.dart

@@ -0,0 +1,28 @@
+import 'nav_item.dart';
+
+// 导航分类模型
+class Category {
+  final String id;           // 分类唯一标识
+  final String name;         // 分类名称
+  final bool isSystem;       // 是否系统分类（true=不可修改）
+  final List<NavItem> entries; // 该分类下的导航条目
+
+  Category({
+    required this.id,
+    required this.name,
+    required this.isSystem,
+    required this.entries,
+  });
+
+  // 从 JSON 创建
+  factory Category.fromJson(Map<String, dynamic> json) {
+    return Category(
+      id: json['id'],
+      name: json['name'],
+      isSystem: json['isSystem'] ?? false,
+      entries: (json['entries'] as List)
+          .map((e) => NavItem.fromJson(e))
+          .toList(),
+    );
+  }
+}

frontend/lib/models/nav_item.dart

@@ -0,0 +1,28 @@
+// 导航条目模型
+class NavItem {
+  final String id;      // 唯一标识
+  final String title;   // 显示名称
+  final String url;     // 链接地址
+  final String icon;    // 图标（emoji 或文字）
+  final bool isSystem;  // 是否系统默认（true=不可修改）
+
+  // 构造函数
+  NavItem({
+    required this.id,
+    required this.title,
+    required this.url,
+    required this.icon,
+    required this.isSystem,
+  });
+
+  // 从 JSON 创建对象（后续从后端获取数据时使用）
+  factory NavItem.fromJson(Map<String, dynamic> json) {
+    return NavItem(
+      id: json['id'],
+      title: json['title'],
+      url: json['url'],
+      icon: json['icon'] ?? '🔗',
+      isSystem: json['isSystem'] ?? false,
+    );
+  }
+}

frontend/lib/theme/app_theme.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  // 颜色方案
+  static const Color primaryColor = Color(0xFF2563EB);
+  static const Color secondaryColor = Color(0xFF7C3AED);
+  static const Color backgroundColor = Color(0xFFF8FAFC);
+  static const Color cardColor = Colors.white;
+  static const Color systemTagColor = Color(0xFFE2E8F0);
+  static const Color systemTagTextColor = Color(0xFF64748B);
+
+  // 渐变背景
+  static final LinearGradient appBarGradient = LinearGradient(
+    colors: [primaryColor, secondaryColor],
+    begin: Alignment.centerLeft,
+    end: Alignment.centerRight,
+  );
+
+  // 卡片阴影
+  static final List<BoxShadow> cardShadow = [
+    BoxShadow(
+      color: Colors.grey.withOpacity(0.1),
+      spreadRadius: 2,
+      blurRadius: 8,
+      offset: const Offset(0, 2),
+    ),
+  ];
+
+  // 主题数据
+  static ThemeData lightTheme = ThemeData(
+    useMaterial3: true,
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: primaryColor,
+      primary: primaryColor,
+      secondary: secondaryColor,
+      background: backgroundColor,
+    ),
+    scaffoldBackgroundColor: backgroundColor,
+    cardTheme: CardThemeData(
+      elevation: 0,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+      ),
+      color: cardColor,
+      shadowColor: Colors.transparent,
+    ),
+    appBarTheme: const AppBarTheme(
+      elevation: 0,
+      centerTitle: true,
+      backgroundColor: Colors.transparent,
+      foregroundColor: Colors.white,
+    ),
+  );
+}

frontend/pubspec.yaml

@@ -34,7 +34,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.8
-
+  web: ^1.0.0
 dev_dependencies:
   flutter_test:
     sdk: flutter