feat: 实现导航页基础功能

- 添加导航条目和分类数据模型 - 实现导航卡片网格展示 - 支持点击卡片打开链接 - 添加主题样式（渐变色、卡片阴影） - 区分系统默认和自定义条目 - 添加分类统计信息"
2026-09-19 21:53:15 +08:00
parent e2cc3ac30f
commit 1c98340fc5
42 changed files with 6054 additions and 140 deletions
@@ -1,12 +1,22 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:frontend/core/constants/app_sizes.dart';
 import 'package:frontend/core/theme/app_colors.dart';
+import 'package:frontend/features/home/data/home_repository.dart';
+import 'package:frontend/features/home/data/mock_home_data.dart';
 import 'package:frontend/features/home/data/mock_home_repository.dart';
+import 'package:frontend/features/home/domain/models/home_data.dart';
+import 'package:frontend/features/home/domain/models/link_item.dart';
+import 'package:frontend/features/home/domain/models/link_section.dart';
+import 'package:frontend/features/home/domain/models/nav_node.dart';
+import 'package:frontend/features/home/domain/models/submit_site_draft.dart';
 import 'package:frontend/features/home/presentation/pages/home_page.dart';
 import 'package:frontend/features/home/presentation/widgets/link_card.dart';
 import 'package:frontend/features/home/presentation/widgets/link_section_view.dart';
 import 'package:frontend/features/home/presentation/widgets/sidebar_nav.dart';
+import 'package:frontend/features/home/presentation/widgets/site_form_dialog.dart';

 import '../../../helpers/fake_url_opener.dart';

@@ -22,6 +32,9 @@ void main() {
    // 高度取 420：原型只有两段内容，视口再高就滚不动了，
    // 「回到顶部」这类用例也就没有意义。
    Size size = const Size(900, 420),
+    HomeRepository repository = const MockHomeRepository(),
+    /// 加载中的用例要停在第一帧，不能等它 settle。
+    bool settle = true,
  }) async {
    tester.view.physicalSize = size;
    tester.view.devicePixelRatio = 1;
@@ -30,12 +43,17 @@ void main() {
    await tester.pumpWidget(
      MaterialApp(
        home: HomePage(
-          repository: const MockHomeRepository(),
+          repository: repository,
          urlOpener: urlOpener,
        ),
      ),
    );
-    await tester.pump();
+    // 数据现在来自 Future，等它落地后再断言。
+    if (settle) {
+      await tester.pumpAndSettle();
+    } else {
+      await tester.pump();
+    }
  }

  /// 侧栏里的导航文字（避免和内容区的分区标题同名而混淆）。
@@ -319,4 +337,297 @@ void main() {
      expect(find.byType(SnackBar), findsNothing);
    });
  });
+
+  group('加载状态', () {
+    testWidgets('数据没回来时显示加载提示', (WidgetTester tester) async {
+      final _PendingRepository repository = _PendingRepository();
+      await pumpPage(tester, repository: repository, settle: false);
+
+      expect(find.text('正在加载…'), findsOneWidget);
+      expect(find.byType(LinkSectionView), findsNothing);
+
+      repository.completer.complete(mockHomeData);
+      await tester.pumpAndSettle();
+
+      expect(find.text('正在加载…'), findsNothing);
+      expect(find.byType(LinkSectionView), findsNWidgets(2));
+    });
+
+    testWidgets('取数失败时显示原因和重试按钮', (WidgetTester tester) async {
+      await pumpPage(
+        tester,
+        repository: const _FailingRepository('连不上后端（http://127.0.0.1:8080）'),
+      );
+
+      expect(find.text('加载失败'), findsOneWidget);
+      expect(find.textContaining('连不上后端'), findsOneWidget);
+      expect(find.text('重试'), findsOneWidget);
+      expect(find.byType(LinkSectionView), findsNothing);
+    });
+
+    testWidgets('点重试会重新取数，成功后渲染内容', (WidgetTester tester) async {
+      final _FlakyRepository repository = _FlakyRepository();
+      await pumpPage(tester, repository: repository);
+
+      expect(find.text('加载失败'), findsOneWidget);
+
+      await tester.tap(find.text('重试'));
+      await tester.pumpAndSettle();
+
+      expect(repository.calls, 2);
+      expect(find.text('加载失败'), findsNothing);
+      expect(find.byType(LinkSectionView), findsNWidgets(2));
+      expect(find.byType(LinkCard), findsNWidgets(5));
+    });
+  });
+
+  group('提交网站', () {
+    testWidgets('点侧栏底部按钮打开表单；提交成功后刷新一次并提示', (WidgetTester tester) async {
+      final _RecordingRepository repository = _RecordingRepository();
+      // 表单比默认视口高，用大一点的窗口，免得字段在屏幕外点不到。
+      await pumpPage(
+        tester,
+        size: const Size(1000, 1200),
+        repository: repository,
+      );
+      expect(repository.fetches, 1);
+
+      await tester.tap(navText('提交网站'));
+      await tester.pumpAndSettle();
+      expect(find.text('网站名称'), findsOneWidget);
+      expect(find.text('提交的网站会放在你自己的分组里，不会进内置分类。'), findsOneWidget);
+
+      // 页面里除了表单还有顶部搜索框，这里限定在对话框内部找输入框。
+      Finder field(int index) => find
+          .descendant(
+            of: find.byType(SiteFormDialog),
+            matching: find.byType(TextField),
+          )
+          .at(index);
+
+      await tester.enterText(field(0), 'Hugging Face');
+      await tester.enterText(field(1), 'https://huggingface.co');
+      await tester.enterText(field(3), 'AI 工具');
+      await tester.pump();
+
+      await tester.tap(find.text('提交'));
+      await tester.pumpAndSettle();
+
+      expect(repository.submitted, hasLength(1));
+      expect(repository.submitted.single.group, 'AI 工具');
+      expect(repository.fetches, 2, reason: '提交成功后要重新拉一次数据');
+      expect(find.text('已提交，感谢'), findsOneWidget);
+      expect(find.text('网站名称'), findsNothing, reason: '对话框已经关掉');
+    });
+  });
+
+  group('编辑与删除', () {
+    testWidgets('可修改的条目能编辑，保存后刷新', (WidgetTester tester) async {
+      final _MutableRepository repository = _MutableRepository();
+      await pumpPage(
+        tester,
+        size: const Size(1000, 1200),
+        repository: repository,
+      );
+      expect(repository.fetches, 1);
+
+      await tester.tap(find.byTooltip('编辑'));
+      await tester.pumpAndSettle();
+
+      // 表单预填了现有内容，提交者字段不出现。
+      expect(find.text('编辑网站'), findsOneWidget);
+      expect(
+        tester
+            .widget<TextField>(
+              find
+                  .descendant(
+                    of: find.byType(SiteFormDialog),
+                    matching: find.byType(TextField),
+                  )
+                  .at(0),
+            )
+            .controller!
+            .text,
+        'Hugging Face',
+      );
+
+      await tester.tap(find.text('提交'));
+      await tester.pumpAndSettle();
+
+      expect(repository.updated, <String>['s-1']);
+      expect(repository.fetches, 2, reason: '保存成功后要重新拉一次数据');
+      expect(find.text('已保存'), findsOneWidget);
+    });
+
+    testWidgets('删除会先确认，确认后才真的删并刷新', (WidgetTester tester) async {
+      final _MutableRepository repository = _MutableRepository();
+      await pumpPage(
+        tester,
+        size: const Size(1000, 1200),
+        repository: repository,
+      );
+
+      await tester.tap(find.byTooltip('删除'));
+      await tester.pumpAndSettle();
+      expect(find.textContaining('确定要删除「Hugging Face」'), findsOneWidget);
+
+      // 先点取消：什么都不该发生。
+      await tester.tap(find.text('取消'));
+      await tester.pumpAndSettle();
+      expect(repository.deleted, isEmpty);
+
+      await tester.tap(find.byTooltip('删除'));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('删除'));
+      await tester.pumpAndSettle();
+
+      expect(repository.deleted, <String>['s-1']);
+      expect(repository.fetches, 2);
+      expect(find.text('已删除'), findsOneWidget);
+    });
+
+    testWidgets('内置条目没有编辑和删除入口', (WidgetTester tester) async {
+      await pumpPage(tester);
+
+      expect(find.byType(LinkCard), findsWidgets);
+      expect(find.byTooltip('编辑'), findsNothing);
+      expect(find.byTooltip('删除'), findsNothing);
+    });
+  });
+}
+
+/// 返回一条「用户提交」的站点（editable），并记录改删调用。
+class _MutableRepository implements HomeRepository {
+  int fetches = 0;
+  final List<String> updated = <String>[];
+  final List<String> deleted = <String>[];
+
+  static const HomeData _data = HomeData(
+    siteName: 'Suxing Nav',
+    searchHint: '输入关键字搜索全网资源...',
+    navNodes: <NavNode>[NavNode(id: 'g-1', title: 'AI 工具', editable: true)],
+    sections: <LinkSection>[
+      LinkSection(
+        id: 'g-1',
+        title: 'AI 工具',
+        items: <LinkItem>[
+          LinkItem(
+            id: 's-1',
+            title: 'Hugging Face',
+            url: 'https://huggingface.co',
+            description: '开源模型与数据集社区',
+            categoryId: 'g-1',
+            editable: true,
+          ),
+        ],
+      ),
+    ],
+  );
+
+  @override
+  Future<HomeData> fetchHomeData() async {
+    fetches++;
+    return _data;
+  }
+
+  @override
+  Future<void> submitSite(SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> updateSite(String id, SubmitSiteDraft draft) async {
+    updated.add(id);
+  }
+
+  @override
+  Future<void> deleteSite(String id) async {
+    deleted.add(id);
+  }
+}
+
+/// 记录取数次数与提交内容，用来验证页面的联调行为。
+class _RecordingRepository implements HomeRepository {
+  int fetches = 0;
+  final List<SubmitSiteDraft> submitted = <SubmitSiteDraft>[];
+  final List<String> updated = <String>[];
+  final List<String> deleted = <String>[];
+
+  @override
+  Future<HomeData> fetchHomeData() async {
+    fetches++;
+    return mockHomeData;
+  }
+
+  @override
+  Future<void> submitSite(SubmitSiteDraft draft) async {
+    submitted.add(draft);
+  }
+
+  @override
+  Future<void> updateSite(String id, SubmitSiteDraft draft) async {
+    updated.add(id);
+  }
+
+  @override
+  Future<void> deleteSite(String id) async {
+    deleted.add(id);
+  }
+}
+
+/// 数据一直不回来，用来测加载中的那一帧。
+class _PendingRepository implements HomeRepository {
+  final Completer<HomeData> completer = Completer<HomeData>();
+
+  @override
+  Future<HomeData> fetchHomeData() => completer.future;
+
+  @override
+  Future<void> submitSite(SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> updateSite(String id, SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> deleteSite(String id) async {}
+}
+
+/// 永远失败。
+class _FailingRepository implements HomeRepository {
+  const _FailingRepository(this.message);
+
+  final String message;
+
+  @override
+  Future<HomeData> fetchHomeData() async => throw HomeFailure(message);
+
+  @override
+  Future<void> submitSite(SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> updateSite(String id, SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> deleteSite(String id) async {}
+}
+
+/// 第一次失败、第二次成功，用来验证重试按钮真的重新取数。
+class _FlakyRepository implements HomeRepository {
+  int calls = 0;
+
+  @override
+  Future<HomeData> fetchHomeData() async {
+    calls++;
+    if (calls == 1) {
+      throw const HomeFailure('后端没起来');
+    }
+    return mockHomeData;
+  }
+
+  @override
+  Future<void> submitSite(SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> updateSite(String id, SubmitSiteDraft draft) async {}
+
+  @override
+  Future<void> deleteSite(String id) async {}
 }