feat: 进行功能分区方便后期维护

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

frontend/lib/core/constants/app_breakpoints.dart

@@ -0,0 +1,24 @@
+/// 网格列数计算。
+///
+/// `index3.html` 的 `.grid` 用的是 CSS Grid 的
+/// `repeat(auto-fill, minmax(220px, 1fr))`；Flutter 没有等价写法，
+/// 这里把它的规则换算成「给定可用宽度能放几列」，写成纯函数便于单测。
+///
+/// 原型没有媒体查询，所以这里也不做断点分支——宽度由调用方传入。
+abstract final class AppBreakpoints {
+  /// 给定可用宽度与最小单元宽度，算出网格能放几列。
+  ///
+  /// 等价于 CSS：`列数 = floor((可用宽度 + 间距) / (最小单元 + 间距))`。
+  static int gridColumnsFor(
+    double availableWidth, {
+    double minItemWidth = 220,
+    double gap = 16,
+  }) {
+    if (availableWidth <= minItemWidth) {
+      return 1;
+    }
+    final int columns =
+        ((availableWidth + gap) / (minItemWidth + gap)).floor();
+    return columns < 1 ? 1 : columns;
+  }
+}