fix：按照shadcn_ui对着demo_shadcn对齐

2026-06-05 15:04:39 +08:00
parent 9727b906c6
commit c5288f397d
29 changed files with 1425 additions and 642 deletions
@@ -1,16 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';

 import '../../../data/api/report_data_source.dart';
 import '../../../data/models/models.dart';
 import '../../../theme/app_icons.dart';
 import '../../../theme/yanting_text.dart';
 import '../../../theme/yanting_tokens.dart';
-import '../../../theme/wise_tokens.dart';
+import '../../../widgets/app_buttons.dart';
 import '../../../widgets/app_card.dart';
 import '../../../widgets/badges.dart';
 import '../../../widgets/mini_player.dart';
+import '../../../widgets/states.dart';

 typedef StartModuleAudio =
    void Function(
@@ -53,7 +55,7 @@ class ModuleRendererRegistry {
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _ModuleHeader(module: module),
-          const SizedBox(height: WiseSpacing.x3),
+          const SizedBox(height: YantingSpacing.x3),
          _contentFor(
            context,
            type: module.type,
@@ -69,13 +71,14 @@ class ModuleRendererRegistry {
            compact: module.renderMode != 'inline',
          ),
          if (module.hasDetailPage) ...[
-            const SizedBox(height: WiseSpacing.x3),
+            const SizedBox(height: YantingSpacing.x3),
            Align(
              alignment: Alignment.centerLeft,
-              child: TextButton.icon(
+              child: AppButton(
                onPressed: openDetail,
-                icon: const Icon(AppIcons.externalLink),
-                label: const Text('查看详情'),
+                icon: AppIcons.externalLink,
+                kind: AppButtonKind.ghost,
+                label: '查看详情',
              ),
            ),
          ],
@@ -180,19 +183,31 @@ class ModuleDetailPage extends HookConsumerWidget {
      [dataSource, reportId, module.id, retryCount.value],
    );
    final snapshot = useFuture(future);
+    final theme = ShadTheme.of(context);

    return Scaffold(
-      appBar: AppBar(title: Text(module.titleCn)),
+      backgroundColor: theme.colorScheme.background,
+      appBar: AppBar(
+        backgroundColor: theme.colorScheme.background,
+        surfaceTintColor: Colors.transparent,
+        elevation: 0,
+        title: Text(module.titleCn),
+        bottom: PreferredSize(
+          preferredSize: const Size.fromHeight(1),
+          child: ColoredBox(
+            color: theme.colorScheme.border,
+            child: const SizedBox(height: 1, width: double.infinity),
+          ),
+        ),
+      ),
      body: snapshot.connectionState != ConnectionState.done
-          ? const Center(child: CircularProgressIndicator())
+          ? const LoadingState()
          : snapshot.hasError
          ? Center(
-              child: TextButton(
+              child: AppButton(
                onPressed: () => retryCount.value++,
-                child: Text(
-                  snapshot.error.toString(),
-                  textAlign: TextAlign.center,
-                ),
+                kind: AppButtonKind.ghost,
+                label: snapshot.error.toString(),
              ),
            )
          : _ModuleDetailContent(
@@ -218,13 +233,18 @@ class _ModuleDetailContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
-      padding: const EdgeInsets.fromLTRB(WiseSpacing.x4, 4, WiseSpacing.x4, 16),
+      padding: const EdgeInsets.fromLTRB(
+        YantingSpacing.x4,
+        4,
+        YantingSpacing.x4,
+        16,
+      ),
      children: [
        Text(
          detail.titleCn,
          style: YantingText.sectionTitle.copyWith(fontSize: 21),
        ),
-        const SizedBox(height: WiseSpacing.x2),
+        const SizedBox(height: YantingSpacing.x2),
        AppCard(
          child: registry.page(
            context,
@@ -233,7 +253,7 @@ class _ModuleDetailContent extends StatelessWidget {
            report: report,
          ),
        ),
-        const SizedBox(height: WiseSpacing.x3),
+        const SizedBox(height: YantingSpacing.x3),
        Text('缓存版本 ${detail.cacheVersion}', style: YantingText.meta),
      ],
    );
@@ -283,10 +303,10 @@ class _BasicInfo extends StatelessWidget {
          ),
          style: YantingText.body,
        ),
-        const SizedBox(height: WiseSpacing.x2),
+        const SizedBox(height: YantingSpacing.x2),
        Wrap(
-          spacing: WiseSpacing.x2,
-          runSpacing: WiseSpacing.x2,
+          spacing: YantingSpacing.x2,
+          runSpacing: YantingSpacing.x2,
          children: [
            for (final topic in topics) AppBadge(text: topic),
            if (report?.releasedAt != null)
@@ -312,8 +332,8 @@ class _CoreInsights extends StatelessWidget {
      children: [
        for (final point in points)
          Container(
-            margin: const EdgeInsets.only(bottom: WiseSpacing.x3),
-            padding: const EdgeInsets.all(WiseSpacing.x3),
+            margin: const EdgeInsets.only(bottom: YantingSpacing.x3),
+            padding: const EdgeInsets.all(YantingSpacing.x3),
            decoration: BoxDecoration(
              color: YantingColors.background,
              border: Border.all(color: YantingColors.border),
@@ -326,7 +346,7 @@ class _CoreInsights extends StatelessWidget {
                  text: _kindLabel(asString(point['kind'])),
                  kind: _kindBadge(asString(point['kind'])),
                ),
-                const SizedBox(height: WiseSpacing.x1),
+                const SizedBox(height: YantingSpacing.x1),
                Text(asString(point['text']), style: YantingText.body),
              ],
            ),
@@ -351,9 +371,9 @@ class _SourceCompliance extends StatelessWidget {
        if (asString(payload['source_note']).isNotEmpty)
          Text(asString(payload['source_note']), style: YantingText.body),
        if (institution != null) ...[
-          const SizedBox(height: WiseSpacing.x4),
+          const SizedBox(height: YantingSpacing.x4),
          Text('发布机构', style: YantingText.cardTitle.copyWith(fontSize: 17)),
-          const SizedBox(height: WiseSpacing.x2),
+          const SizedBox(height: YantingSpacing.x2),
          _InfoLine(label: '机构名称', value: institution.nameCn),
          if (institution.nameEn.isNotEmpty)
            _InfoLine(label: '英文名称', value: institution.nameEn),
@@ -377,10 +397,10 @@ class _SourceCompliance extends StatelessWidget {
            _InfoLine(label: '说明', value: institution.introCn),
        ],
        if (asString(payload['copyright_cn']).isNotEmpty) ...[
-          const SizedBox(height: WiseSpacing.x4),
+          const SizedBox(height: YantingSpacing.x4),
          Text(asString(payload['copyright_cn']), style: YantingText.meta),
        ],
-        const SizedBox(height: WiseSpacing.x3),
+        const SizedBox(height: YantingSpacing.x3),
        DecoratedBox(
          decoration: BoxDecoration(
            color: YantingColors.background,
@@ -388,7 +408,7 @@ class _SourceCompliance extends StatelessWidget {
            borderRadius: BorderRadius.circular(YantingRadius.md),
          ),
          child: Padding(
-            padding: const EdgeInsets.all(WiseSpacing.x3),
+            padding: const EdgeInsets.all(YantingSpacing.x3),
            child: Text(
              asString(payload['disclaimer'], '本内容为公开/授权研报的结构化解读，不构成投资建议。'),
              style: YantingText.meta.copyWith(color: YantingColors.warning),
@@ -410,7 +430,7 @@ class _InfoLine extends StatelessWidget {
  Widget build(BuildContext context) {
    if (value.isEmpty) return const SizedBox.shrink();
    return Padding(
-      padding: const EdgeInsets.only(bottom: WiseSpacing.x2),
+      padding: const EdgeInsets.only(bottom: YantingSpacing.x2),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
@@ -420,7 +440,7 @@ class _InfoLine extends StatelessWidget {
              color: YantingColors.mutedForeground,
            ),
          ),
-          const SizedBox(height: WiseSpacing.x1),
+          const SizedBox(height: YantingSpacing.x1),
          Text(value, style: YantingText.body),
        ],
      ),
@@ -480,7 +500,7 @@ class _InstitutionModule extends StatelessWidget {
    return Row(
      children: [
        const Icon(AppIcons.bank, color: YantingColors.foreground),
-        const SizedBox(width: WiseSpacing.x2),
+        const SizedBox(width: YantingSpacing.x2),
        Expanded(child: Text(name, style: YantingText.body)),
        Text(
          '${asInt(payload['report_count'], report?.institution.reportCount ?? 0)} 份',
@@ -510,12 +530,12 @@ class _SectionsModule extends StatelessWidget {
      children: [
        if (summary.isNotEmpty) Text(summary, style: YantingText.body),
        for (final section in sections) ...[
-          const SizedBox(height: WiseSpacing.x3),
+          const SizedBox(height: YantingSpacing.x3),
          Text(
            asString(section['heading']),
            style: YantingText.cardTitle.copyWith(fontSize: 17),
          ),
-          const SizedBox(height: WiseSpacing.x1),
+          const SizedBox(height: YantingSpacing.x1),
          Text(asString(section['body']), style: YantingText.body),
        ],
      ],
@@ -538,8 +558,8 @@ class _KeyDataModule extends StatelessWidget {
      children: [
        for (final row in rows)
          Container(
-            margin: const EdgeInsets.only(bottom: WiseSpacing.x3),
-            padding: const EdgeInsets.all(WiseSpacing.x3),
+            margin: const EdgeInsets.only(bottom: YantingSpacing.x3),
+            padding: const EdgeInsets.all(YantingSpacing.x3),
            decoration: BoxDecoration(
              color: YantingColors.secondary,
              borderRadius: BorderRadius.circular(YantingRadius.md),
@@ -562,7 +582,7 @@ class _KeyDataModule extends StatelessWidget {
                    ],
                  ),
                ),
-                const SizedBox(width: WiseSpacing.x2),
+                const SizedBox(width: YantingSpacing.x2),
                Text(
                  _valueWithUnit(row),
                  textAlign: TextAlign.right,
@@ -635,10 +655,10 @@ class _TimelineEntry extends StatelessWidget {
                ),
            ],
          ),
-          const SizedBox(width: WiseSpacing.x2),
+          const SizedBox(width: YantingSpacing.x2),
          Expanded(
            child: Padding(
-              padding: const EdgeInsets.only(bottom: WiseSpacing.x3),
+              padding: const EdgeInsets.only(bottom: YantingSpacing.x3),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
@@ -650,12 +670,12 @@ class _TimelineEntry extends StatelessWidget {
                        fontWeight: FontWeight.w600,
                      ),
                    ),
-                  const SizedBox(height: WiseSpacing.x1),
+                  const SizedBox(height: YantingSpacing.x1),
                  Text(
                    asString(event['event']),
                    style: YantingText.cardTitle.copyWith(fontSize: 17),
                  ),
-                  const SizedBox(height: WiseSpacing.x1),
+                  const SizedBox(height: YantingSpacing.x1),
                  Text(asString(event['impact']), style: YantingText.body),
                ],
              ),
@@ -695,10 +715,10 @@ class _StudyGuideModule extends StatelessWidget {
            ],
          ),
        if (glossary.isNotEmpty) ...[
-          const SizedBox(height: WiseSpacing.x3),
+          const SizedBox(height: YantingSpacing.x3),
          Wrap(
-            spacing: WiseSpacing.x2,
-            runSpacing: WiseSpacing.x2,
+            spacing: YantingSpacing.x2,
+            runSpacing: YantingSpacing.x2,
            children: [
              for (final item in glossary)
                AppBadge(
@@ -730,10 +750,10 @@ class _StructureGraphModule extends StatelessWidget {
          asString(payload['root']),
          style: YantingText.cardTitle.copyWith(fontSize: 17),
        ),
-        const SizedBox(height: WiseSpacing.x3),
+        const SizedBox(height: YantingSpacing.x3),
        for (final node in nodes)
          Padding(
-            padding: const EdgeInsets.only(bottom: WiseSpacing.x4),
+            padding: const EdgeInsets.only(bottom: YantingSpacing.x4),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
@@ -741,10 +761,10 @@ class _StructureGraphModule extends StatelessWidget {
                  asString(node['label']),
                  style: YantingText.cardTitle.copyWith(fontSize: 17),
                ),
-                const SizedBox(height: WiseSpacing.x1),
+                const SizedBox(height: YantingSpacing.x1),
                for (final child in asStringList(node['children']))
                  Padding(
-                    padding: const EdgeInsets.only(bottom: WiseSpacing.x1),
+                    padding: const EdgeInsets.only(bottom: YantingSpacing.x1),
                    child: Text(child, style: YantingText.body),
                  ),
              ],
@@ -770,7 +790,7 @@ class _RelatedSourcesModule extends StatelessWidget {
      children: [
        for (final item in items)
          Padding(
-            padding: const EdgeInsets.only(bottom: WiseSpacing.x4),
+            padding: const EdgeInsets.only(bottom: YantingSpacing.x4),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
@@ -778,7 +798,7 @@ class _RelatedSourcesModule extends StatelessWidget {
                  asString(item['title']),
                  style: YantingText.cardTitle.copyWith(fontSize: 17),
                ),
-                const SizedBox(height: WiseSpacing.x1),
+                const SizedBox(height: YantingSpacing.x1),
                Text(
                  asString(item['summary_cn'], asString(item['source_name'])),
                  style: YantingText.body,
@@ -809,7 +829,7 @@ class _DifferentiatedViewModule extends StatelessWidget {
      children: [
        for (final item in items)
          Padding(
-            padding: const EdgeInsets.only(bottom: WiseSpacing.x4),
+            padding: const EdgeInsets.only(bottom: YantingSpacing.x4),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
@@ -817,7 +837,7 @@ class _DifferentiatedViewModule extends StatelessWidget {
                  asString(item['topic']),
                  style: YantingText.cardTitle.copyWith(fontSize: 17),
                ),
-                const SizedBox(height: WiseSpacing.x2),
+                const SizedBox(height: YantingSpacing.x2),
                if (asString(item['consensus_view']).isNotEmpty) ...[
                  Text(
                    '常见观点',
@@ -825,12 +845,12 @@ class _DifferentiatedViewModule extends StatelessWidget {
                      color: YantingColors.mutedForeground,
                    ),
                  ),
-                  const SizedBox(height: WiseSpacing.x1),
+                  const SizedBox(height: YantingSpacing.x1),
                  Text(
                    asString(item['consensus_view']),
                    style: YantingText.body,
                  ),
-                  const SizedBox(height: WiseSpacing.x2),
+                  const SizedBox(height: YantingSpacing.x2),
                ],
                if (asString(item['report_position']).isNotEmpty) ...[
                  Text(
@@ -839,7 +859,7 @@ class _DifferentiatedViewModule extends StatelessWidget {
                      color: YantingColors.foreground,
                    ),
                  ),
-                  const SizedBox(height: WiseSpacing.x1),
+                  const SizedBox(height: YantingSpacing.x1),
                  Text(
                    asString(item['report_position']),
                    style: YantingText.body,
@@ -877,8 +897,8 @@ class _WeaknessesModule extends StatelessWidget {
        for (final item in items)
          Padding(
            padding: const EdgeInsets.only(
-              top: WiseSpacing.x3,
-              bottom: WiseSpacing.x2,
+              top: YantingSpacing.x3,
+              bottom: YantingSpacing.x2,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
@@ -887,20 +907,20 @@ class _WeaknessesModule extends StatelessWidget {
                  asString(item['topic']),
                  style: YantingText.cardTitle.copyWith(fontSize: 17),
                ),
-                const SizedBox(height: WiseSpacing.x1),
+                const SizedBox(height: YantingSpacing.x1),
                Text(asString(item['weakness']), style: YantingText.body),
              ],
            ),
          ),
        if (verificationNotes.isNotEmpty || counterEvidence.isNotEmpty) ...[
-          const SizedBox(height: WiseSpacing.x2),
+          const SizedBox(height: YantingSpacing.x2),
          DecoratedBox(
            decoration: BoxDecoration(
              color: const Color(0x109A6500),
-              borderRadius: BorderRadius.circular(WiseRadius.sm),
+              borderRadius: BorderRadius.circular(YantingRadius.sm),
            ),
            child: Padding(
-              padding: const EdgeInsets.all(WiseSpacing.x3),
+              padding: const EdgeInsets.all(YantingSpacing.x3),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
@@ -910,13 +930,13 @@ class _WeaknessesModule extends StatelessWidget {
                      color: YantingColors.warning,
                    ),
                  ),
-                  const SizedBox(height: WiseSpacing.x1),
+                  const SizedBox(height: YantingSpacing.x1),
                  for (final note
                      in verificationNotes.isNotEmpty
                          ? verificationNotes
                          : counterEvidence)
                    Padding(
-                      padding: const EdgeInsets.only(bottom: WiseSpacing.x1),
+                      padding: const EdgeInsets.only(bottom: YantingSpacing.x1),
                      child: Text(note, style: YantingText.meta),
                    ),
                ],
@@ -947,7 +967,7 @@ class _Preview extends StatelessWidget {
        if (headline.isNotEmpty) Text(headline, style: YantingText.body),
        for (final item in highlights.take(3))
          Padding(
-            padding: const EdgeInsets.only(top: WiseSpacing.x1),
+            padding: const EdgeInsets.only(top: YantingSpacing.x1),
            child: Text('• $item', style: YantingText.meta),
          ),
      ],
@@ -988,7 +1008,7 @@ class _FallbackModule extends StatelessWidget {
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AppBadge(text: '未知模块：$type', kind: BadgeKind.warning),
-        const SizedBox(height: WiseSpacing.x2),
+        const SizedBox(height: YantingSpacing.x2),
        _Preview(payload: payload),
      ],
    );
@@ -1,13 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';

 import '../../data/api/report_data_source.dart';
 import '../../data/models/models.dart';
 import '../../theme/app_icons.dart';
 import '../../theme/yanting_text.dart';
 import '../../theme/yanting_tokens.dart';
-import '../../theme/wise_tokens.dart';
 import '../../widgets/app_buttons.dart';
 import '../../widgets/app_card.dart';
 import '../../widgets/badges.dart';
@@ -52,9 +52,23 @@ class ReportDetailPage extends HookConsumerWidget {
    ]);
    final snapshot = useFuture(detailFuture);
    const registry = ModuleRendererRegistry();
+    final theme = ShadTheme.of(context);

    return Scaffold(
-      appBar: AppBar(title: const Text('研报详情')),
+      backgroundColor: theme.colorScheme.background,
+      appBar: AppBar(
+        backgroundColor: theme.colorScheme.background,
+        surfaceTintColor: Colors.transparent,
+        elevation: 0,
+        title: const Text('研报详情'),
+        bottom: PreferredSize(
+          preferredSize: const Size.fromHeight(1),
+          child: ColoredBox(
+            color: theme.colorScheme.border,
+            child: const SizedBox(height: 1, width: double.infinity),
+          ),
+        ),
+      ),
      body: snapshot.connectionState != ConnectionState.done
          ? const LoadingState()
          : snapshot.hasError
@@ -106,7 +120,12 @@ class _ReportDetailContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
-      padding: const EdgeInsets.fromLTRB(WiseSpacing.x4, 4, WiseSpacing.x4, 16),
+      padding: const EdgeInsets.fromLTRB(
+        YantingSpacing.x4,
+        4,
+        YantingSpacing.x4,
+        16,
+      ),
      children: [
        AppCard(
          color: YantingColors.brandSoft,
@@ -115,8 +134,8 @@ class _ReportDetailContent extends StatelessWidget {
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Wrap(
-                spacing: WiseSpacing.x2,
-                runSpacing: WiseSpacing.x2,
+                spacing: YantingSpacing.x2,
+                runSpacing: YantingSpacing.x2,
                children: [
                  AppBadge(
                    text: detail.interpretationLabel,
@@ -134,7 +153,7 @@ class _ReportDetailContent extends StatelessWidget {
                  ),
                ],
              ),
-              const SizedBox(height: WiseSpacing.x3),
+              const SizedBox(height: YantingSpacing.x3),
              Text(
                detail.titleCn,
                maxLines: 3,
@@ -142,10 +161,10 @@ class _ReportDetailContent extends StatelessWidget {
                style: YantingText.sectionTitle.copyWith(fontSize: 21),
              ),
              if (detail.oneLiner.isNotEmpty) ...[
-                const SizedBox(height: WiseSpacing.x2),
+                const SizedBox(height: YantingSpacing.x2),
                Text(detail.oneLiner, style: YantingText.body),
              ],
-              const SizedBox(height: WiseSpacing.x3),
+              const SizedBox(height: YantingSpacing.x3),
              Text(
                '${detail.institution.nameCn} · ${formatDate(detail.releasedAt)}',
                style: YantingText.meta,
@@ -153,11 +172,11 @@ class _ReportDetailContent extends StatelessWidget {
            ],
          ),
        ),
-        const SizedBox(height: WiseSpacing.x4),
+        const SizedBox(height: YantingSpacing.x4),
        _ActionBar(detail: detail),
-        const SizedBox(height: WiseSpacing.x4),
+        const SizedBox(height: YantingSpacing.x4),
        _Toc(modules: detail.modules),
-        const SizedBox(height: WiseSpacing.x4),
+        const SizedBox(height: YantingSpacing.x4),
        for (final module in detail.modules) ...[
          registry.card(
            context: context,
@@ -170,7 +189,7 @@ class _ReportDetailContent extends StatelessWidget {
            onSeekAudio: onSeekAudio,
            onSpeed: onSpeed,
          ),
-          const SizedBox(height: WiseSpacing.x4),
+          const SizedBox(height: YantingSpacing.x4),
        ],
      ],
    );
@@ -194,7 +213,7 @@ class _ActionBar extends StatelessWidget {
            onPressed: () => showLoginSheet(context, reason: '登录后保存到你的收藏'),
          ),
        ),
-        const SizedBox(width: WiseSpacing.x2),
+        const SizedBox(width: YantingSpacing.x2),
        Expanded(
          child: AppButton(
            label: '原文',
@@ -222,7 +241,7 @@ class _Toc extends StatelessWidget {
        children: [
          for (final module in modules)
            Padding(
-              padding: const EdgeInsets.only(right: WiseSpacing.x2),
+              padding: const EdgeInsets.only(right: YantingSpacing.x2),
              child: AppBadge(text: module.titleCn, kind: BadgeKind.brand),
            ),
        ],