Merge remote-tracking branch 'origin/main'

apps/heqi_design_system/.gitignore

@@ -0,0 +1,2 @@
+.dart_tool/
+build/

apps/heqi_design_system/README.md

@@ -0,0 +1,45 @@
+# Heqi Mobile Design System
+
+`heqi_design_system` 是用户端与服务人员端共用的 Flutter Design System。它只负责视觉 Token、Material 3 主题和无业务状态的基础组件，不包含 API、权限、金额、状态机或领域判断。
+
+## 使用方式
+
+业务 App 通过本地 path dependency 引用：
+
+```yaml
+dependencies:
+  heqi_design_system:
+    path: ../heqi_design_system
+```
+
+```dart
+import 'package:heqi_design_system/heqi_design_system.dart';
+
+MaterialApp.router(
+  theme: HeqiTheme.light(HeqiBrand.consumer),
+  darkTheme: HeqiTheme.dark(HeqiBrand.consumer),
+  themeMode: ThemeMode.system,
+);
+```
+
+## 公共 API
+
+- `HeqiColors`：品牌色与安全语义色。
+- `HeqiSpacing`：4dp 间距网格。
+- `HeqiRadius`：圆角层级。
+- `HeqiSize`：触控区、按钮、导航和内容宽度。
+- `HeqiMotion`：150/220/300ms 动效节奏。
+- `HeqiBreakpoints`：紧凑、中等、展开布局断点。
+- `HeqiTheme`：用户端与服务端的亮色/暗色 Material 3 主题。
+- `HeqiGutter`、`HeqiSurfaceSection`、`HeqiSectionHeader`：页面布局原语。
+- `HeqiStatusPill`、`HeqiMessageState`：语义状态与空/错状态。
+
+## 变更规则
+
+1. 新颜色、间距、圆角或动效必须先进入 Token，不得在业务页面直接写常量。
+2. 安全、资金、设备命令等业务状态仍由服务端决定；Design System 只负责展示映射。
+3. 公共组件不得依赖任一 App 的 Domain/Data 包。
+4. 破坏性 API 变更提升主版本；新增兼容 Token/组件提升次版本；视觉修复提升补丁版本。
+5. 更新后必须分别执行两个 App 的 `flutter analyze`、`flutter test` 和构建检查。
+
+完整设计规范见 [`docs/13-移动端Design-System.md`](../../docs/13-移动端Design-System.md)。

apps/heqi_design_system/analysis_options.yaml

@@ -0,0 +1 @@
+include: package:flutter_lints/flutter.yaml

apps/heqi_design_system/lib/heqi_design_system.dart

@@ -0,0 +1,5 @@
+library;
+
+export 'src/components.dart';
+export 'src/theme.dart';
+export 'src/tokens.dart';

apps/heqi_design_system/lib/src/components.dart

@@ -0,0 +1,204 @@
+import 'package:flutter/material.dart';
+
+import 'tokens.dart';
+
+enum HeqiStatusTone { neutral, info, success, warning, danger }
+
+class HeqiGutter extends StatelessWidget {
+  const HeqiGutter({required this.child, super.key});
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) => Center(
+    child: ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: HeqiSize.contentMaxWidth),
+      child: Padding(
+        padding: EdgeInsets.symmetric(
+          horizontal:
+              MediaQuery.sizeOf(context).width >= HeqiBreakpoints.compact
+              ? HeqiSpacing.x7
+              : HeqiSpacing.x5,
+        ),
+        child: child,
+      ),
+    ),
+  );
+}
+
+class HeqiSurfaceSection extends StatelessWidget {
+  const HeqiSurfaceSection({
+    required this.child,
+    this.padding = const EdgeInsets.all(HeqiSpacing.x5),
+    super.key,
+  });
+  final Widget child;
+  final EdgeInsetsGeometry padding;
+
+  @override
+  Widget build(BuildContext context) => DecoratedBox(
+    decoration: BoxDecoration(
+      color: Theme.of(context).colorScheme.surface,
+      borderRadius: BorderRadius.circular(HeqiRadius.large),
+      border: Border.all(color: Theme.of(context).colorScheme.outlineVariant),
+    ),
+    child: Padding(padding: padding, child: child),
+  );
+}
+
+class HeqiSectionHeader extends StatelessWidget {
+  const HeqiSectionHeader({
+    required this.title,
+    this.description,
+    this.trailing,
+    super.key,
+  });
+  final String title;
+  final String? description;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) => Row(
+    crossAxisAlignment: CrossAxisAlignment.end,
+    children: [
+      Expanded(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(title, style: Theme.of(context).textTheme.titleLarge),
+            if (description != null) ...[
+              const SizedBox(height: HeqiSpacing.x1),
+              Text(
+                description!,
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: Theme.of(context).colorScheme.onSurfaceVariant,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+      ?trailing,
+    ],
+  );
+}
+
+class HeqiStatusPill extends StatelessWidget {
+  const HeqiStatusPill({
+    required this.label,
+    this.tone = HeqiStatusTone.neutral,
+    this.icon,
+    super.key,
+  });
+  final String label;
+  final HeqiStatusTone tone;
+  final IconData? icon;
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final (foreground, background) = switch (tone) {
+      HeqiStatusTone.info => (
+        scheme.onPrimaryContainer,
+        scheme.primaryContainer,
+      ),
+      HeqiStatusTone.success => (
+        scheme.onSecondaryContainer,
+        scheme.secondaryContainer,
+      ),
+      HeqiStatusTone.warning => (
+        scheme.onTertiaryContainer,
+        scheme.tertiaryContainer,
+      ),
+      HeqiStatusTone.danger => (scheme.onErrorContainer, scheme.errorContainer),
+      HeqiStatusTone.neutral => (
+        scheme.onSurfaceVariant,
+        scheme.surfaceContainerHighest,
+      ),
+    };
+    return Semantics(
+      label: '状态：$label',
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+        decoration: BoxDecoration(
+          color: background,
+          borderRadius: BorderRadius.circular(HeqiRadius.small),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (icon != null) ...[
+              Icon(icon, size: HeqiSize.iconSmall, color: foreground),
+              const SizedBox(width: HeqiSpacing.x1),
+            ],
+            Text(
+              label,
+              style: Theme.of(
+                context,
+              ).textTheme.labelSmall?.copyWith(color: foreground),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class HeqiMessageState extends StatelessWidget {
+  const HeqiMessageState({
+    required this.title,
+    required this.description,
+    this.onRetry,
+    this.icon = Icons.info_outline_rounded,
+    super.key,
+  });
+  final String title;
+  final String description;
+  final VoidCallback? onRetry;
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) => Center(
+    child: Padding(
+      padding: const EdgeInsets.all(HeqiSpacing.x8),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            width: 64,
+            height: 64,
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
+              shape: BoxShape.circle,
+            ),
+            child: Icon(
+              icon,
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+          ),
+          const SizedBox(height: HeqiSpacing.x5),
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleLarge,
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: HeqiSpacing.x2),
+          Text(
+            description,
+            textAlign: TextAlign.center,
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+          ),
+          if (onRetry != null) ...[
+            const SizedBox(height: HeqiSpacing.x5),
+            OutlinedButton.icon(
+              onPressed: onRetry,
+              icon: const Icon(Icons.refresh_rounded),
+              label: const Text('重新加载'),
+            ),
+          ],
+        ],
+      ),
+    ),
+  );
+}

apps/heqi_design_system/lib/src/theme.dart

@@ -0,0 +1,209 @@
+import 'package:flutter/material.dart';
+
+import 'tokens.dart';
+
+/// 共享 Material 3 主题。业务 App 只能选择品牌，不应复制本主题后自行修改。
+abstract final class HeqiTheme {
+  static ThemeData light(HeqiBrand brand) => _theme(brand, Brightness.light);
+
+  static ThemeData dark(HeqiBrand brand) => _theme(brand, Brightness.dark);
+
+  static ThemeData _theme(HeqiBrand brand, Brightness brightness) {
+    final dark = brightness == Brightness.dark;
+    final seed = switch (brand) {
+      HeqiBrand.consumer => HeqiColors.consumerPrimary,
+      HeqiBrand.service => HeqiColors.servicePrimary,
+    };
+    final darkPrimary = switch (brand) {
+      HeqiBrand.consumer => const Color(0xFFAFC6FF),
+      HeqiBrand.service => const Color(0xFFC5C0FF),
+    };
+    final scheme = ColorScheme.fromSeed(
+      seedColor: seed,
+      brightness: brightness,
+      primary: dark ? darkPrimary : seed,
+      secondary: dark ? const Color(0xFF86D7B5) : HeqiColors.success,
+      error: dark ? const Color(0xFFFFB4AB) : HeqiColors.danger,
+      surface: dark ? HeqiColors.darkSurface : Colors.white,
+    );
+    final textTheme = _textTheme;
+    final radius = BorderRadius.circular(HeqiRadius.large);
+
+    return ThemeData(
+      brightness: brightness,
+      useMaterial3: true,
+      colorScheme: scheme,
+      scaffoldBackgroundColor: dark
+          ? HeqiColors.darkBackground
+          : HeqiColors.lightBackground,
+      textTheme: textTheme,
+      visualDensity: VisualDensity.standard,
+      appBarTheme: AppBarTheme(
+        backgroundColor: Colors.transparent,
+        foregroundColor: scheme.onSurface,
+        elevation: 0,
+        scrolledUnderElevation: 0,
+        centerTitle: false,
+        titleTextStyle: textTheme.titleLarge?.copyWith(color: scheme.onSurface),
+      ),
+      cardTheme: CardThemeData(
+        color: scheme.surface,
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: radius,
+          side: BorderSide(color: scheme.outlineVariant),
+        ),
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: dark ? scheme.surfaceContainerHigh : scheme.surface,
+        contentPadding: const EdgeInsets.symmetric(
+          horizontal: HeqiSpacing.x4,
+          vertical: HeqiSpacing.x4,
+        ),
+        border: OutlineInputBorder(
+          borderRadius: radius,
+          borderSide: BorderSide.none,
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: radius,
+          borderSide: BorderSide(color: scheme.outlineVariant),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: radius,
+          borderSide: BorderSide(color: scheme.primary, width: 2),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderRadius: radius,
+          borderSide: BorderSide(color: scheme.error),
+        ),
+      ),
+      filledButtonTheme: FilledButtonThemeData(
+        style: FilledButton.styleFrom(
+          minimumSize: const Size.fromHeight(HeqiSize.buttonHeight),
+          shape: RoundedRectangleBorder(borderRadius: radius),
+          textStyle: textTheme.labelLarge,
+        ),
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          minimumSize: const Size.fromHeight(HeqiSize.buttonHeight),
+          elevation: 0,
+          shape: RoundedRectangleBorder(borderRadius: radius),
+          textStyle: textTheme.labelLarge,
+        ),
+      ),
+      outlinedButtonTheme: OutlinedButtonThemeData(
+        style: OutlinedButton.styleFrom(
+          minimumSize: const Size.fromHeight(HeqiSize.buttonHeight),
+          shape: RoundedRectangleBorder(borderRadius: radius),
+          textStyle: textTheme.labelLarge,
+        ),
+      ),
+      textButtonTheme: TextButtonThemeData(
+        style: TextButton.styleFrom(
+          minimumSize: const Size.square(HeqiSize.minTouchTarget),
+          textStyle: textTheme.labelLarge,
+        ),
+      ),
+      navigationBarTheme: NavigationBarThemeData(
+        height: HeqiSize.navigationBarHeight,
+        elevation: 0,
+        backgroundColor: scheme.surface,
+        indicatorColor: scheme.primaryContainer,
+        labelTextStyle: WidgetStateProperty.resolveWith(
+          (states) => textTheme.labelSmall?.copyWith(
+            color: states.contains(WidgetState.selected)
+                ? scheme.primary
+                : scheme.onSurfaceVariant,
+            fontWeight: states.contains(WidgetState.selected)
+                ? FontWeight.w700
+                : FontWeight.w500,
+          ),
+        ),
+      ),
+      chipTheme: ChipThemeData(
+        side: BorderSide.none,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(HeqiRadius.small),
+        ),
+        labelStyle: textTheme.labelSmall,
+      ),
+      listTileTheme: const ListTileThemeData(
+        minTileHeight: 56,
+        contentPadding: EdgeInsets.symmetric(
+          horizontal: HeqiSpacing.x4,
+          vertical: HeqiSpacing.x1,
+        ),
+      ),
+      bottomSheetTheme: BottomSheetThemeData(
+        backgroundColor: scheme.surface,
+        modalBackgroundColor: scheme.surface,
+        showDragHandle: true,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.vertical(
+            top: Radius.circular(HeqiRadius.sheet),
+          ),
+        ),
+      ),
+      dialogTheme: DialogThemeData(
+        backgroundColor: scheme.surface,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(HeqiRadius.sheet),
+        ),
+      ),
+      dividerTheme: DividerThemeData(
+        color: scheme.outlineVariant,
+        thickness: 1,
+        space: 1,
+      ),
+      snackBarTheme: SnackBarThemeData(
+        behavior: SnackBarBehavior.floating,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(HeqiRadius.medium),
+        ),
+      ),
+    );
+  }
+
+  static const _textTheme = TextTheme(
+    displaySmall: TextStyle(
+      fontSize: 32,
+      height: 1.25,
+      fontWeight: FontWeight.w700,
+    ),
+    headlineMedium: TextStyle(
+      fontSize: 28,
+      height: 1.28,
+      fontWeight: FontWeight.w700,
+    ),
+    headlineSmall: TextStyle(
+      fontSize: 24,
+      height: 1.33,
+      fontWeight: FontWeight.w700,
+    ),
+    titleLarge: TextStyle(
+      fontSize: 22,
+      height: 1.27,
+      fontWeight: FontWeight.w600,
+    ),
+    titleMedium: TextStyle(
+      fontSize: 16,
+      height: 1.5,
+      fontWeight: FontWeight.w600,
+    ),
+    bodyLarge: TextStyle(fontSize: 16, height: 1.5),
+    bodyMedium: TextStyle(fontSize: 14, height: 1.55),
+    labelLarge: TextStyle(
+      fontSize: 14,
+      height: 1.4,
+      fontWeight: FontWeight.w600,
+    ),
+    labelSmall: TextStyle(
+      fontSize: 12,
+      height: 1.35,
+      fontWeight: FontWeight.w500,
+    ),
+  );
+}

apps/heqi_design_system/lib/src/tokens.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+/// 两端品牌主题。安全语义色始终共享，不能被品牌色覆盖。
+enum HeqiBrand { consumer, service }
+
+abstract final class HeqiColors {
+  static const consumerPrimary = Color(0xFF2563EB);
+  static const servicePrimary = Color(0xFF4F46E5);
+  static const success = Color(0xFF16875D);
+  static const warning = Color(0xFFB86400);
+  static const danger = Color(0xFFC7352A);
+
+  static const lightBackground = Color(0xFFF7F8FA);
+  static const darkBackground = Color(0xFF0B1220);
+  static const darkSurface = Color(0xFF111827);
+}
+
+/// 4dp 基础网格。页面不得新增不属于本表的随意间距。
+abstract final class HeqiSpacing {
+  static const x1 = 4.0;
+  static const x2 = 8.0;
+  static const x3 = 12.0;
+  static const x4 = 16.0;
+  static const x5 = 20.0;
+  static const x6 = 24.0;
+  static const x7 = 28.0;
+  static const x8 = 32.0;
+  static const x10 = 40.0;
+  static const x12 = 48.0;
+}
+
+abstract final class HeqiRadius {
+  static const small = 10.0;
+  static const medium = 12.0;
+  static const large = 16.0;
+  static const extraLarge = 20.0;
+  static const sheet = 24.0;
+}
+
+abstract final class HeqiSize {
+  static const minTouchTarget = 48.0;
+  static const buttonHeight = 52.0;
+  static const navigationBarHeight = 72.0;
+  static const contentMaxWidth = 720.0;
+  static const iconSmall = 16.0;
+  static const iconMedium = 24.0;
+  static const iconLarge = 32.0;
+}
+
+abstract final class HeqiMotion {
+  static const fast = Duration(milliseconds: 150);
+  static const standard = Duration(milliseconds: 220);
+  static const emphasized = Duration(milliseconds: 300);
+}
+
+abstract final class HeqiBreakpoints {
+  static const compact = 600.0;
+  static const medium = 840.0;
+  static const expanded = 1024.0;
+}

apps/heqi_design_system/pubspec.lock

@@ -0,0 +1,205 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: e2eb0491ba5ddb6177742d2da23904574082139b07c1e33b8503b9f46f3e1a37
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "2.13.1"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "2.1.2"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      sha256: faf38497bda5ead2a8c7615f4f7939df04333478bf32e4173fcb06d428b5716b
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.4.1"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.1.2"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.19.1"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.3.3"
+  flutter:
+    dependency: "direct main"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_lints:
+    dependency: "direct dev"
+    description:
+      name: flutter_lints
+      sha256: "3105dc8492f6183fb076ccf1f351ac3d60564bff92e20bfc4af9cc1651f4e7e1"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "6.0.0"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  leak_tracker:
+    dependency: transitive
+    description:
+      name: leak_tracker
+      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "11.0.2"
+  leak_tracker_flutter_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_flutter_testing
+      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "3.0.10"
+  leak_tracker_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_testing
+      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "3.0.2"
+  lints:
+    dependency: transitive
+    description:
+      name: lints
+      sha256: "12f842a479589fea194fe5c5a3095abc7be0c1f2ddfa9a0e76aed1dbd26a87df"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "6.1.0"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: dc0b7dc7651697ea4ff3e69ef44b0407ea32c487a39fff6a4004fa585e901861
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.12.19"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      sha256: "9c337007e82b1889149c82ed242ed1cb24a66044e30979c44912381e9be4c48b"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.13.0"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      sha256: "1741988757a65eb6b36abe716829688cf01910bbf91c34354ff7ec1c3de2b349"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.18.0"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.9.1"
+  sky_engine:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "56a02f1f4cd1a2d96303c0144c93bd6d909eea6bee6bf5a0e0b685edbd4c47ab"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.10.2"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.12.1"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "2.1.4"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.4.1"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.2.2"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "949a932224383300f01be9221c39180316445ecb8e7547f70a41a35bf421fb9e"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.7.11"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "2.2.0"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "0016aef94fc66495ac78af5859181e3f3bf2026bd8eecc72b9565601e19ab360"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "15.2.0"
+sdks:
+  dart: ">=3.12.2 <4.0.0"
+  flutter: ">=3.18.0-18.0.pre.54"

apps/heqi_design_system/pubspec.yaml

@@ -0,0 +1,19 @@
+name: heqi_design_system
+description: 和气物联网智能瓶阀移动端共享 Design System。
+version: 0.1.0
+publish_to: none
+
+environment:
+  sdk: ^3.12.2
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_lints: ^6.0.0
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true

apps/heqi_design_system/test/design_system_test.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:heqi_design_system/heqi_design_system.dart';
+
+void main() {
+  test('two brands share safety semantics but use distinct primary colors', () {
+    final consumer = HeqiTheme.light(HeqiBrand.consumer).colorScheme;
+    final service = HeqiTheme.light(HeqiBrand.service).colorScheme;
+
+    expect(consumer.primary, HeqiColors.consumerPrimary);
+    expect(service.primary, HeqiColors.servicePrimary);
+    expect(consumer.error, HeqiColors.danger);
+    expect(service.error, HeqiColors.danger);
+  });
+
+  testWidgets('status pill exposes a semantic status label', (tester) async {
+    final semantics = tester.ensureSemantics();
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: HeqiTheme.light(HeqiBrand.consumer),
+        home: const Scaffold(
+          body: HeqiStatusPill(label: '已通过', tone: HeqiStatusTone.success),
+        ),
+      ),
+    );
+
+    expect(
+      find.byWidgetPredicate(
+        (widget) => widget is Semantics && widget.properties.label == '状态：已通过',
+      ),
+      findsOneWidget,
+    );
+    semantics.dispose();
+  });
+
+  test('touch target follows Material mobile minimum', () {
+    expect(HeqiSize.minTouchTarget, greaterThanOrEqualTo(48));
+  });
+}

apps/service_app/lib/app/app.dart

@@ -21,6 +21,8 @@ class _ServiceClientAppState extends State<ServiceClientApp> {
     title: '瓶安芯服务工作台',
     debugShowCheckedModeBanner: false,
     theme: AppTheme.light(),
+    darkTheme: AppTheme.dark(),
+    themeMode: ThemeMode.system,
     routerConfig: _router,
   );
 }

apps/service_app/lib/ui/core/app_theme.dart

@@ -1,36 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:heqi_design_system/heqi_design_system.dart';
 
-class AppTheme {
-  static ThemeData light() {
-    final scheme = ColorScheme.fromSeed(
-      seedColor: const Color(0xFF6C4CF1),
-      primary: const Color(0xFF6C4CF1),
-      secondary: const Color(0xFF16A66A),
-      surface: Colors.white,
-    );
-    return ThemeData(
-      useMaterial3: true,
-      colorScheme: scheme,
-      scaffoldBackgroundColor: const Color(0xFFF5F4FA),
-      cardTheme: CardThemeData(
-        elevation: 0,
-        color: Colors.white,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
-      ),
-      inputDecorationTheme: InputDecorationTheme(
-        filled: true,
-        fillColor: Colors.white,
-        border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(16),
-          borderSide: BorderSide.none,
-        ),
-      ),
-      elevatedButtonTheme: ElevatedButtonThemeData(
-        style: ElevatedButton.styleFrom(
-          minimumSize: const Size.fromHeight(48),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-        ),
-      ),
-    );
-  }
+/// 服务人员端主题适配层；安全语义色与用户端共享，品牌主色独立。
+abstract final class AppTheme {
+  static const primary = HeqiColors.servicePrimary;
+  static const success = HeqiColors.success;
+  static const warning = HeqiColors.warning;
+  static const danger = HeqiColors.danger;
+
+  static ThemeData light() => HeqiTheme.light(HeqiBrand.service);
+
+  static ThemeData dark() => HeqiTheme.dark(HeqiBrand.service);
 }

apps/service_app/lib/ui/core/widgets.dart

@@ -0,0 +1,8 @@
+import 'package:heqi_design_system/heqi_design_system.dart';
+
+typedef AppGutter = HeqiGutter;
+typedef SurfaceSection = HeqiSurfaceSection;
+typedef SectionHeader = HeqiSectionHeader;
+typedef StatusPill = HeqiStatusPill;
+typedef StatusTone = HeqiStatusTone;
+typedef MessageState = HeqiMessageState;

apps/service_app/lib/ui/features/auth/login_page.dart

@@ -16,6 +16,7 @@ class _LoginPageState extends State<LoginPage> {
   final _password = TextEditingController();
   bool _busy = false;
   String? _error;
+  bool _obscurePassword = true;
 
   Future<void> _login() async {
     setState(() {
@@ -43,28 +44,43 @@ class _LoginPageState extends State<LoginPage> {
     body: SafeArea(
       child: Center(
         child: SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
+          padding: const EdgeInsets.fromLTRB(24, 32, 24, 24),
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 420),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                Icon(
-                  Icons.engineering_rounded,
-                  size: 72,
-                  color: Theme.of(context).colorScheme.primary,
+                Align(
+                  child: Container(
+                    width: 72,
+                    height: 72,
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).colorScheme.primaryContainer,
+                      borderRadius: BorderRadius.circular(24),
+                    ),
+                    child: Icon(
+                      Icons.engineering_rounded,
+                      size: 38,
+                      color: Theme.of(context).colorScheme.primary,
+                      semanticLabel: '服务工作台标识',
+                    ),
+                  ),
                 ),
-                const SizedBox(height: 20),
+                const SizedBox(height: 24),
                 Text(
                   '瓶安芯服务工作台',
                   textAlign: TextAlign.center,
-                  style: Theme.of(
-                    context,
-                  ).textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.w900),
+                  style: Theme.of(context).textTheme.headlineMedium,
                 ),
                 const SizedBox(height: 8),
-                const Text('配送、安装维修与安检共用入口', textAlign: TextAlign.center),
-                const SizedBox(height: 34),
+                Text(
+                  '配送、安装维修与安检共用入口',
+                  textAlign: TextAlign.center,
+                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                const SizedBox(height: 40),
                 TextField(
                   controller: _phone,
                   keyboardType: TextInputType.phone,
@@ -76,22 +92,50 @@ class _LoginPageState extends State<LoginPage> {
                 const SizedBox(height: 14),
                 TextField(
                   controller: _password,
-                  obscureText: true,
-                  decoration: const InputDecoration(
+                  obscureText: _obscurePassword,
+                  autofillHints: const [AutofillHints.password],
+                  decoration: InputDecoration(
                     labelText: '登录密码',
-                    prefixIcon: Icon(Icons.lock_outline),
+                    prefixIcon: const Icon(Icons.lock_outline),
+                    suffixIcon: IconButton(
+                      tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
+                      onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
+                      icon: Icon(
+                        _obscurePassword
+                            ? Icons.visibility_outlined
+                            : Icons.visibility_off_outlined,
+                      ),
+                    ),
                   ),
                 ),
                 if (_error != null)
                   Padding(
                     padding: const EdgeInsets.only(top: 12),
-                    child: Text(
-                      _error!,
-                      style: TextStyle(color: Theme.of(context).colorScheme.error),
+                    child: Semantics(
+                      liveRegion: true,
+                      child: Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Icon(
+                            Icons.error_outline,
+                            size: 20,
+                            color: Theme.of(context).colorScheme.error,
+                          ),
+                          const SizedBox(width: 8),
+                          Expanded(
+                            child: Text(
+                              _error!,
+                              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                color: Theme.of(context).colorScheme.error,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
                     ),
                   ),
-                const SizedBox(height: 20),
-                ElevatedButton(
+                const SizedBox(height: 24),
+                FilledButton(
                   onPressed: _busy ? null : _login,
                   child: _busy
                       ? const SizedBox.square(
@@ -100,11 +144,13 @@ class _LoginPageState extends State<LoginPage> {
                         )
                       : const Text('进入工作台'),
                 ),
-                const SizedBox(height: 12),
-                const Text(
+                const SizedBox(height: 16),
+                Text(
                   '账号与角色由平台审核分配，不提供自助注册',
                   textAlign: TextAlign.center,
-                  style: TextStyle(fontSize: 12),
+                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
                 ),
               ],
             ),

apps/service_app/lib/ui/features/evidence/evidence_page.dart

@@ -5,6 +5,7 @@ import 'package:uuid/uuid.dart';
 import '../../../app/dependencies.dart';
 import '../../../data/offline/encrypted_draft_store.dart';
 import '../../../data/repositories/service_repository.dart';
+import '../../core/widgets.dart';
 
 class EvidencePage extends StatefulWidget {
   const EvidencePage({
@@ -160,66 +161,108 @@ class _EvidencePageState extends State<EvidencePage> {
   @override
   Widget build(BuildContext context) => Scaffold(
     appBar: AppBar(title: const Text('现场取证')),
-    body: ListView(
-      padding: const EdgeInsets.all(18),
-      children: [
-        const Card(
-          child: Padding(
-            padding: EdgeInsets.all(18),
+    body: SafeArea(
+      top: false,
+      child: ListView(
+        padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
+        children: [
+          Container(
+            padding: const EdgeInsets.all(18),
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.primaryContainer,
+              borderRadius: BorderRadius.circular(16),
+            ),
             child: Row(
               children: [
-                Icon(Icons.lock_outline),
-                SizedBox(width: 12),
-                Expanded(child: Text('照片与签名先按当前账号加密暂存；上传成功前仅显示“已暂存”。')),
+                Icon(Icons.lock_outline, color: Theme.of(context).colorScheme.primary),
+                const SizedBox(width: 12),
+                const Expanded(child: Text('照片与签名先按当前账号加密暂存；上传成功前仅显示“已暂存”。')),
               ],
             ),
           ),
-        ),
-        const SizedBox(height: 10),
-        ..._requiredStages.map(
-          (stage) => Card(
-            child: ListTile(
-              leading: Icon(
-                _evidence.containsKey(stage) ? Icons.check_circle : Icons.camera_alt_outlined,
-                color: _evidence.containsKey(stage) ? Colors.green : null,
-              ),
-              title: Text(_stageName(stage)),
-              subtitle: Text(_evidence.containsKey(stage) ? '已加密暂存' : '尚未采集'),
-              trailing: TextButton(
-                onPressed: _busy ? null : () => _capture(stage),
-                child: Text(_evidence.containsKey(stage) ? '重拍' : '拍摄'),
-              ),
+          const SizedBox(height: 28),
+          SectionHeader(
+            title: '取证进度',
+            description: '已完成 ${_evidence.length}/${_requiredStages.length} 项必需材料',
+          ),
+          const SizedBox(height: 12),
+          LinearProgressIndicator(
+            value: _requiredStages.isEmpty ? 0 : _evidence.length / _requiredStages.length,
+            minHeight: 6,
+            borderRadius: BorderRadius.circular(3),
+          ),
+          const SizedBox(height: 16),
+          SurfaceSection(
+            padding: EdgeInsets.zero,
+            child: Column(
+              children: [
+                for (var index = 0; index < _requiredStages.length; index++) ...[
+                  ListTile(
+                    minTileHeight: 68,
+                    leading: Icon(
+                      _evidence.containsKey(_requiredStages[index])
+                          ? Icons.check_circle_outline
+                          : Icons.camera_alt_outlined,
+                      color: _evidence.containsKey(_requiredStages[index])
+                          ? Theme.of(context).colorScheme.secondary
+                          : Theme.of(context).colorScheme.onSurfaceVariant,
+                    ),
+                    title: Text(_stageName(_requiredStages[index])),
+                    subtitle: Text(
+                      _evidence.containsKey(_requiredStages[index]) ? '已加密暂存' : '尚未采集',
+                    ),
+                    trailing: TextButton(
+                      onPressed: _busy ? null : () => _capture(_requiredStages[index]),
+                      child: Text(_evidence.containsKey(_requiredStages[index]) ? '重拍' : '拍摄'),
+                    ),
+                  ),
+                  if (index < _requiredStages.length - 1) const Divider(indent: 56),
+                ],
+              ],
             ),
           ),
-        ),
-        const SizedBox(height: 12),
-        TextField(
-          controller: _result,
-          maxLines: 4,
-          onChanged: (_) => _save(),
-          decoration: const InputDecoration(labelText: '现场结果说明'),
-        ),
-        const SizedBox(height: 12),
-        DropdownButtonFormField<String>(
-          initialValue: _conclusion,
-          decoration: const InputDecoration(labelText: '结论'),
-          items: const [
-            DropdownMenuItem(value: 'qualified', child: Text('合格')),
-            DropdownMenuItem(value: 'noncompliant', child: Text('不合格')),
-            DropdownMenuItem(value: 'high_risk', child: Text('高风险')),
-          ],
-          onChanged: (value) {
-            if (value == null) return;
-            setState(() => _conclusion = value);
-            _save();
-          },
-        ),
-        const SizedBox(height: 22),
-        ElevatedButton(
-          onPressed: _busy ? null : _submit,
-          child: Text(_busy ? '正在上传并等待服务端确认…' : '在线提交结果'),
-        ),
-      ],
+          const SizedBox(height: 28),
+          const SectionHeader(title: '作业结论', description: '说明现场处理结果，并选择对应结论'),
+          const SizedBox(height: 12),
+          TextField(
+            controller: _result,
+            maxLines: 4,
+            minLines: 3,
+            onChanged: (_) => _save(),
+            decoration: const InputDecoration(
+              labelText: '现场结果说明',
+              helperText: '请填写处理过程、现场状态和后续建议',
+              alignLabelWithHint: true,
+            ),
+          ),
+          const SizedBox(height: 16),
+          DropdownButtonFormField<String>(
+            initialValue: _conclusion,
+            decoration: const InputDecoration(labelText: '结论'),
+            items: const [
+              DropdownMenuItem(value: 'qualified', child: Text('合格')),
+              DropdownMenuItem(value: 'noncompliant', child: Text('不合格')),
+              DropdownMenuItem(value: 'high_risk', child: Text('高风险')),
+            ],
+            onChanged: (value) {
+              if (value == null) return;
+              setState(() => _conclusion = value);
+              _save();
+            },
+          ),
+          const SizedBox(height: 28),
+          FilledButton.icon(
+            onPressed: _busy ? null : _submit,
+            icon: _busy
+                ? const SizedBox.square(
+                    dimension: 20,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  )
+                : const Icon(Icons.cloud_upload_outlined),
+            label: Text(_busy ? '正在上传并等待服务端确认…' : '在线提交结果'),
+          ),
+        ],
+      ),
     ),
   );
 

apps/service_app/lib/ui/features/preflight/preflight_page.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import '../../../app/dependencies.dart';
 import '../../../data/repositories/service_repository.dart';
 import '../../../domain/models/service_models.dart';
+import '../../core/widgets.dart';
 
 class PreflightPage extends StatefulWidget {
   const PreflightPage({required this.session, required this.repository, super.key});
@@ -46,84 +47,60 @@ class _PreflightPageState extends State<PreflightPage> {
       future: _future,
       builder: (context, snapshot) {
         if (!snapshot.hasData) {
-          if (snapshot.hasError) return Center(child: Text(snapshot.error.toString()));
+          if (snapshot.hasError) {
+            return MessageState(
+              title: '作业检查加载失败',
+              description: '请检查网络后重新加载',
+              onRetry: () => setState(() => _future = widget.repository.preflight()),
+            );
+          }
           return const Center(child: CircularProgressIndicator());
         }
         final result = snapshot.data!;
-        return ListView(
-          padding: const EdgeInsets.all(18),
-          children: [
-            Card(
-              color: Theme.of(context).colorScheme.primary,
-              child: Padding(
-                padding: const EdgeInsets.all(22),
+        final entries = result.checks.entries.toList();
+        return SafeArea(
+          top: false,
+          child: ListView(
+            padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
+            children: [
+              _PreflightBanner(result: result),
+              const SizedBox(height: 28),
+              SectionHeader(
+                title: '准入检查',
+                description: result.canWork ? '所有必需条件均已通过服务端校验' : '完成阻断项后才能进入工作台',
+              ),
+              const SizedBox(height: 12),
+              SurfaceSection(
+                padding: EdgeInsets.zero,
                 child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Text(roleName(result.roleCode), style: const TextStyle(color: Colors.white70)),
-                    const SizedBox(height: 6),
-                    Text(
-                      result.canWork ? '可以开始今日作业' : '仍有前置条件未完成',
-                      style: const TextStyle(
-                        color: Colors.white,
-                        fontWeight: FontWeight.w900,
-                        fontSize: 24,
-                      ),
-                    ),
+                    for (var index = 0; index < entries.length; index++) ...[
+                      _CheckRow(entry: entries[index], label: _label(entries[index].key)),
+                      if (index < entries.length - 1) const Divider(indent: 56),
+                    ],
                   ],
                 ),
               ),
-            ),
-            const SizedBox(height: 12),
-            ...result.checks.entries.map((entry) {
-              final detail = entry.value is Map
-                  ? Map<Object?, Object?>.from(entry.value as Map)
-                  : const <Object?, Object?>{};
-              final status = detail['status']?.toString() ?? 'blocked';
-              final passed = status == 'passed';
-              return Card(
-                child: ListTile(
-                  leading: Icon(
-                    passed
-                        ? Icons.check_circle
-                        : status == 'not_configured'
-                        ? Icons.info_outline
-                        : Icons.cancel,
-                    color: passed
-                        ? Colors.green
-                        : status == 'not_configured'
-                        ? Colors.orange
-                        : Colors.red,
-                  ),
-                  title: Text(_label(entry.key)),
-                  subtitle: Text(
-                    status == 'not_configured'
-                        ? '平台暂未启用，不冒充校验通过'
-                        : passed
-                        ? '已通过服务端校验'
-                        : '未通过',
-                  ),
+              const SizedBox(height: 28),
+              if (result.workStatus != 'on_duty')
+                FilledButton.icon(
+                  onPressed: _busy ? null : () => _attendance('clock_in'),
+                  icon: const Icon(Icons.location_on_outlined),
+                  label: Text(_busy ? '正在定位并打卡…' : '定位并上班打卡'),
+                )
+              else ...[
+                FilledButton(
+                  onPressed: result.canWork ? () => context.go('/work') : null,
+                  child: const Text('进入工作台'),
                 ),
-              );
-            }),
-            const SizedBox(height: 18),
-            if (result.workStatus != 'on_duty')
-              ElevatedButton.icon(
-                onPressed: _busy ? null : () => _attendance('clock_in'),
-                icon: const Icon(Icons.location_on),
-                label: const Text('定位并上班打卡'),
-              )
-            else ...[
-              ElevatedButton(
-                onPressed: result.canWork ? () => context.go('/work') : null,
-                child: const Text('进入工作台'),
-              ),
-              TextButton(
-                onPressed: _busy ? null : () => _attendance('clock_out'),
-                child: const Text('下班打卡'),
-              ),
+                const SizedBox(height: 8),
+                TextButton(
+                  onPressed: _busy ? null : () => _attendance('clock_out'),
+                  child: const Text('下班打卡'),
+                ),
+              ],
             ],
-          ],
+          ),
         );
       },
     ),
@@ -141,3 +118,83 @@ class _PreflightPageState extends State<PreflightPage> {
     _ => value,
   };
 }
+
+class _PreflightBanner extends StatelessWidget {
+  const _PreflightBanner({required this.result});
+  final PreflightResult result;
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final background = result.canWork ? scheme.secondaryContainer : scheme.tertiaryContainer;
+    final foreground = result.canWork ? scheme.onSecondaryContainer : scheme.onTertiaryContainer;
+    return Semantics(
+      liveRegion: true,
+      label: result.canWork ? '作业检查通过，可以开始今日作业' : '作业检查未通过，仍有前置条件未完成',
+      child: Container(
+        padding: const EdgeInsets.all(20),
+        decoration: BoxDecoration(
+          color: background,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Icon(
+              result.canWork ? Icons.verified_rounded : Icons.warning_amber_rounded,
+              color: foreground,
+              size: 32,
+            ),
+            const SizedBox(width: 16),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    roleName(result.roleCode),
+                    style: Theme.of(context).textTheme.labelLarge?.copyWith(color: foreground),
+                  ),
+                  const SizedBox(height: 6),
+                  Text(
+                    result.canWork ? '可以开始今日作业' : '仍有前置条件未完成',
+                    style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: foreground),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _CheckRow extends StatelessWidget {
+  const _CheckRow({required this.entry, required this.label});
+  final MapEntry<String, Object?> entry;
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    final detail = entry.value is Map
+        ? Map<Object?, Object?>.from(entry.value as Map)
+        : const <Object?, Object?>{};
+    final status = detail['status']?.toString() ?? 'blocked';
+    final passed = status == 'passed';
+    final tone = passed
+        ? StatusTone.success
+        : status == 'not_configured'
+        ? StatusTone.warning
+        : StatusTone.danger;
+    final text = status == 'not_configured'
+        ? '平台暂未启用'
+        : passed
+        ? '已通过'
+        : '未通过';
+    return ListTile(
+      leading: Icon(passed ? Icons.check_circle_outline : Icons.info_outline_rounded),
+      title: Text(label),
+      trailing: StatusPill(label: text, tone: tone),
+    );
+  }
+}

apps/service_app/lib/ui/features/profile/profile_page.dart

@@ -5,6 +5,7 @@ import '../../../app/dependencies.dart';
 import '../../../data/offline/encrypted_draft_store.dart';
 import '../../../data/repositories/service_repository.dart';
 import '../../../domain/models/service_models.dart';
+import '../../core/widgets.dart';
 
 class ProfilePage extends StatefulWidget {
   const ProfilePage({
@@ -64,76 +65,101 @@ class _ProfilePageState extends State<ProfilePage> {
       future: _future,
       builder: (context, snapshot) {
         if (!snapshot.hasData) {
-          if (snapshot.hasError) return Center(child: Text(snapshot.error.toString()));
+          if (snapshot.hasError) {
+            return MessageState(
+              title: '工作台信息加载失败',
+              description: '请检查网络后重新加载',
+              onRetry: () => setState(() => _future = _load()),
+            );
+          }
           return const Center(child: CircularProgressIndicator());
         }
         final (profile, wallet, drafts) = snapshot.data!;
         final balance = (wallet['balance'] as num?)?.toInt() ?? 0;
         return ListView(
-          padding: const EdgeInsets.all(16),
+          padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
           children: [
-            Card(
-              child: Padding(
-                padding: const EdgeInsets.all(20),
-                child: Row(
-                  children: [
-                    CircleAvatar(
-                      radius: 30,
-                      child: Text(profile.name.isEmpty ? '工' : profile.name.substring(0, 1)),
-                    ),
-                    const SizedBox(width: 14),
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            profile.name,
-                            style: Theme.of(
-                              context,
-                            ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w900),
+            SurfaceSection(
+              child: Row(
+                children: [
+                  CircleAvatar(
+                    radius: 28,
+                    backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+                    foregroundColor: Theme.of(context).colorScheme.primary,
+                    child: Text(profile.name.isEmpty ? '工' : profile.name.substring(0, 1)),
+                  ),
+                  const SizedBox(width: 16),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(profile.name, style: Theme.of(context).textTheme.titleLarge),
+                        const SizedBox(height: 4),
+                        Text(
+                          '${roleName(profile.roleCode)} · ${profile.phone}',
+                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                            color: Theme.of(context).colorScheme.onSurfaceVariant,
                           ),
-                          Text('${roleName(profile.roleCode)} · ${profile.phone}'),
-                        ],
+                        ),
+                      ],
+                    ),
+                  ),
+                  StatusPill(
+                    label: profile.workStatus == 'on_duty' ? '在岗' : '离岗',
+                    tone: profile.workStatus == 'on_duty' ? StatusTone.success : StatusTone.neutral,
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 28),
+            const SectionHeader(title: '工作概览'),
+            const SizedBox(height: 12),
+            SurfaceSection(
+              padding: EdgeInsets.zero,
+              child: Column(
+                children: [
+                  ListTile(
+                    leading: const Icon(Icons.account_balance_wallet_outlined),
+                    title: const Text('钱包余额'),
+                    trailing: Text(
+                      '¥${(balance / 100).toStringAsFixed(2)}',
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                        color: Theme.of(context).colorScheme.primary,
                       ),
                     ),
-                    Chip(label: Text(profile.workStatus == 'on_duty' ? '在岗' : '离岗')),
-                  ],
-                ),
+                  ),
+                  const Divider(indent: 56),
+                  ListTile(
+                    leading: const Icon(Icons.lock_outline),
+                    title: const Text('加密现场草稿'),
+                    subtitle: const Text('仅当前账号重新认证后可恢复'),
+                    trailing: StatusPill(
+                      label: '$drafts 份',
+                      tone: drafts > 0 ? StatusTone.warning : StatusTone.neutral,
+                    ),
+                  ),
+                ],
               ),
             ),
-            Card(
-              child: ListTile(
-                leading: const Icon(Icons.account_balance_wallet_outlined),
-                title: const Text('钱包余额'),
-                trailing: Text(
-                  '¥${(balance / 100).toStringAsFixed(2)}',
-                  style: const TextStyle(fontWeight: FontWeight.w900),
-                ),
-              ),
-            ),
-            Card(
-              child: ListTile(
-                leading: const Icon(Icons.lock_outline),
-                title: const Text('加密现场草稿'),
-                subtitle: const Text('仅当前账号重新认证后可恢复'),
-                trailing: Text('$drafts 份'),
-              ),
-            ),
-            Card(
+            const SizedBox(height: 28),
+            const SectionHeader(title: '账户操作'),
+            const SizedBox(height: 12),
+            SurfaceSection(
+              padding: EdgeInsets.zero,
               child: ListTile(
                 leading: const Icon(Icons.verified_user_outlined),
                 title: const Text('重新执行作业前检查'),
+                subtitle: const Text('检查岗位、资质、在岗与设备授权状态'),
                 trailing: const Icon(Icons.chevron_right),
                 onTap: () => context.go('/preflight'),
               ),
             ),
-            Card(
-              child: ListTile(
-                leading: const Icon(Icons.logout),
-                title: const Text('退出登录'),
-                trailing: const Icon(Icons.chevron_right),
-                onTap: () => _logout(drafts),
-              ),
+            const SizedBox(height: 24),
+            TextButton.icon(
+              style: TextButton.styleFrom(foregroundColor: Theme.of(context).colorScheme.error),
+              onPressed: () => _logout(drafts),
+              icon: const Icon(Icons.logout),
+              label: const Text('退出登录'),
             ),
           ],
         );

apps/service_app/lib/ui/features/work/work_detail_page.dart

@@ -7,6 +7,7 @@ import '../../../app/dependencies.dart';
 import '../../../data/offline/encrypted_draft_store.dart';
 import '../../../data/repositories/service_repository.dart';
 import '../../../domain/models/service_models.dart';
+import '../../core/widgets.dart';
 
 class WorkDetailPage extends StatefulWidget {
   const WorkDetailPage({
@@ -173,150 +174,183 @@ class _WorkDetailPageState extends State<WorkDetailPage> {
       future: _future,
       builder: (context, snapshot) {
         if (!snapshot.hasData) {
-          if (snapshot.hasError) return Center(child: Text(snapshot.error.toString()));
+          if (snapshot.hasError) {
+            return MessageState(
+              title: '任务详情加载失败',
+              description: '请检查网络后重新加载',
+              onRetry: () => setState(() => _future = _load()),
+            );
+          }
           return const Center(child: CircularProgressIndicator());
         }
         final item = snapshot.data!;
-        return ListView(
-          padding: const EdgeInsets.all(18),
-          children: [
-            Card(
-              color: Theme.of(context).colorScheme.primary,
-              child: Padding(
-                padding: const EdgeInsets.all(22),
+        return SafeArea(
+          top: false,
+          child: ListView(
+            padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
+            children: [
+              Container(
+                padding: const EdgeInsets.all(20),
+                decoration: BoxDecoration(
+                  color: Theme.of(context).colorScheme.primaryContainer,
+                  borderRadius: BorderRadius.circular(20),
+                ),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
                       item.number,
-                      style: const TextStyle(color: Colors.white70),
+                      style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                        color: Theme.of(context).colorScheme.onPrimaryContainer,
+                      ),
                     ),
                     const SizedBox(height: 8),
                     Text(
                       item.title,
-                      style: const TextStyle(
-                        color: Colors.white,
-                        fontSize: 26,
-                        fontWeight: FontWeight.w900,
+                      style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                        color: Theme.of(context).colorScheme.onPrimaryContainer,
                       ),
                     ),
-                    const SizedBox(height: 12),
-                    Chip(label: Text(statusName(item.status))),
+                    const SizedBox(height: 16),
+                    StatusPill(label: statusName(item.status), tone: StatusTone.info),
                   ],
                 ),
               ),
-            ),
-            Card(
-              child: ListTile(
-                leading: const Icon(Icons.location_on_outlined),
-                title: const Text('服务地址'),
-                subtitle: Text(item.address.isEmpty ? '未提供地址' : item.address),
+              const SizedBox(height: 28),
+              const SectionHeader(title: '服务信息'),
+              const SizedBox(height: 12),
+              SurfaceSection(
+                padding: EdgeInsets.zero,
+                child: Column(
+                  children: [
+                    ListTile(
+                      leading: const Icon(Icons.location_on_outlined),
+                      title: const Text('服务地址'),
+                      subtitle: Text(item.address.isEmpty ? '未提供地址' : item.address),
+                    ),
+                    const Divider(indent: 56),
+                    ListTile(
+                      leading: const Icon(Icons.person_outline),
+                      title: Text(item.raw['contact_name'] as String? ?? '服务用户'),
+                      subtitle: Text(item.raw['contact_phone'] as String? ?? '未提供联系电话'),
+                    ),
+                  ],
+                ),
               ),
-            ),
-            Card(
-              child: ListTile(
-                leading: const Icon(Icons.person_outline),
-                title: Text(item.raw['contact_name'] as String? ?? '服务用户'),
-                subtitle: Text(item.raw['contact_phone'] as String? ?? ''),
-              ),
-            ),
-            const SizedBox(height: 18),
-            if (item.allowedActions.contains('start'))
-              ElevatedButton(
-                onPressed: _busy
-                    ? null
-                    : () => _run(
-                        (value) => widget.repository.start(
-                          value,
-                          widget.session.roleCode,
+              const SizedBox(height: 28),
+              const SectionHeader(title: '任务操作', description: '操作结果以服务端状态与现场凭证为准'),
+              const SizedBox(height: 12),
+              if (item.allowedActions.isEmpty) const SurfaceSection(child: Text('当前状态没有可执行操作')),
+              if (item.allowedActions.contains('start'))
+                FilledButton.icon(
+                  onPressed: _busy
+                      ? null
+                      : () => _run(
+                          (value) => widget.repository.start(value, widget.session.roleCode),
+                          item,
                         ),
-                        item,
-                      ),
-                child: const Text('开始处理'),
-              ),
-            if (item.allowedActions.contains('append_tracks'))
-              OutlinedButton(
-                onPressed: _busy
-                    ? null
-                    : () => _run(
-                        (value) => widget.repository.appendCurrentTrack(
-                          value.identity,
+                  icon: const Icon(Icons.play_arrow_rounded),
+                  label: const Text('开始处理'),
+                ),
+              if (item.allowedActions.contains('append_tracks')) ...[
+                if (item.allowedActions.contains('start')) const SizedBox(height: 12),
+                OutlinedButton.icon(
+                  onPressed: _busy
+                      ? null
+                      : () => _run(
+                          (value) => widget.repository.appendCurrentTrack(value.identity),
+                          item,
                         ),
-                        item,
-                      ),
-                child: const Text('上报当前位置'),
-              ),
-            if (item.allowedActions.contains('arrive'))
-              ElevatedButton(
-                onPressed: _busy
-                    ? null
-                    : () => _run(
-                        (value) => widget.repository.arrive(value.identity),
-                        item,
-                      ),
-                child: const Text('到达并校验围栏'),
-              ),
-            if (item.allowedActions.contains('submit_receipt'))
-              ElevatedButton(
-                onPressed: _busy ? null : () => _receipt(item),
-                child: const Text('拍摄签收凭证并提交'),
-              ),
-            if (item.allowedActions.contains('submit_result'))
-              ElevatedButton(
-                onPressed: _busy
-                    ? null
-                    : () async {
-                        final changed = await context.push<bool>(
-                          '/tasks/${item.identity}/evidence',
-                        );
-                        if (changed == true) setState(() => _future = _load());
-                      },
-                child: const Text('现场取证与提交'),
-              ),
-            if (item.allowedActions.contains('exception'))
-              TextButton(
-                onPressed: _busy
-                    ? null
-                    : () async {
-                        final reason = await _reason();
-                        if (reason != null && reason.isNotEmpty) {
-                          await _run(
-                            (value) => widget.repository.exception(
-                              value,
-                              widget.session.roleCode,
-                              reason,
-                            ),
-                            item,
+                  icon: const Icon(Icons.my_location_outlined),
+                  label: const Text('上报当前位置'),
+                ),
+              ],
+              if (item.allowedActions.contains('arrive')) ...[
+                const SizedBox(height: 12),
+                FilledButton.icon(
+                  onPressed: _busy
+                      ? null
+                      : () => _run((value) => widget.repository.arrive(value.identity), item),
+                  icon: const Icon(Icons.location_on_outlined),
+                  label: const Text('到达并校验围栏'),
+                ),
+              ],
+              if (item.allowedActions.contains('submit_receipt')) ...[
+                const SizedBox(height: 12),
+                FilledButton.icon(
+                  onPressed: _busy ? null : () => _receipt(item),
+                  icon: const Icon(Icons.photo_camera_outlined),
+                  label: const Text('拍摄签收凭证并提交'),
+                ),
+              ],
+              if (item.allowedActions.contains('submit_result')) ...[
+                const SizedBox(height: 12),
+                FilledButton.icon(
+                  onPressed: _busy
+                      ? null
+                      : () async {
+                          final changed = await context.push<bool>(
+                            '/tasks/${item.identity}/evidence',
                           );
-                        }
-                      },
-                child: const Text('标记异常'),
-              ),
-            if (item.allowedActions.contains('recover'))
-              ElevatedButton(
-                onPressed: _busy
-                    ? null
-                    : () async {
-                        final reason = await _reason();
-                        if (reason != null && reason.isNotEmpty) {
-                          await _run(
-                            (value) => widget.repository.recover(
-                              value,
-                              widget.session.roleCode,
-                              reason,
-                            ),
-                            item,
-                          );
-                        }
-                      },
-                child: const Text('恢复任务'),
-              ),
-            if (_busy)
-              const Padding(
-                padding: EdgeInsets.all(16),
-                child: Center(child: CircularProgressIndicator()),
-              ),
-          ],
+                          if (changed == true) setState(() => _future = _load());
+                        },
+                  icon: const Icon(Icons.fact_check_outlined),
+                  label: const Text('现场取证与提交'),
+                ),
+              ],
+              if (item.allowedActions.contains('recover')) ...[
+                const SizedBox(height: 12),
+                OutlinedButton.icon(
+                  onPressed: _busy
+                      ? null
+                      : () async {
+                          final reason = await _reason();
+                          if (reason != null && reason.isNotEmpty) {
+                            await _run(
+                              (value) =>
+                                  widget.repository.recover(value, widget.session.roleCode, reason),
+                              item,
+                            );
+                          }
+                        },
+                  icon: const Icon(Icons.restart_alt_rounded),
+                  label: const Text('恢复任务'),
+                ),
+              ],
+              if (item.allowedActions.contains('exception')) ...[
+                const SizedBox(height: 20),
+                TextButton.icon(
+                  style: TextButton.styleFrom(foregroundColor: Theme.of(context).colorScheme.error),
+                  onPressed: _busy
+                      ? null
+                      : () async {
+                          final reason = await _reason();
+                          if (reason != null && reason.isNotEmpty) {
+                            await _run(
+                              (value) => widget.repository.exception(
+                                value,
+                                widget.session.roleCode,
+                                reason,
+                              ),
+                              item,
+                            );
+                          }
+                        },
+                  icon: const Icon(Icons.report_problem_outlined),
+                  label: const Text('标记异常'),
+                ),
+              ],
+              if (_busy)
+                Padding(
+                  padding: const EdgeInsets.only(top: 16),
+                  child: Semantics(
+                    liveRegion: true,
+                    label: '正在处理任务操作',
+                    child: const LinearProgressIndicator(),
+                  ),
+                ),
+            ],
+          ),
         );
       },
     ),

apps/service_app/lib/ui/features/work/work_list_page.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import '../../../app/dependencies.dart';
 import '../../../data/repositories/service_repository.dart';
 import '../../../domain/models/service_models.dart';
+import '../../core/widgets.dart';
 import 'work_list_view_model.dart';
 
 class WorkListPage extends StatefulWidget {
@@ -53,59 +54,88 @@ class _WorkListPageState extends State<WorkListPage> {
           return const Center(child: CircularProgressIndicator());
         }
         if (_viewModel.error != null && _viewModel.items.isEmpty) {
-          return Center(child: Text(_viewModel.error.toString()));
+          return MessageState(
+            title: '任务加载失败',
+            description: '请检查网络后重新加载',
+            onRetry: _viewModel.load,
+          );
         }
         return RefreshIndicator(
           onRefresh: _viewModel.load,
           child: ListView(
             physics: const AlwaysScrollableScrollPhysics(),
-            padding: const EdgeInsets.fromLTRB(16, 10, 16, 28),
+            padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
             children: [
-              Card(
-                color: widget.session.roleCode == 'operations'
-                    ? const Color(0xFFE9F8F0)
-                    : const Color(0xFFEEEAFE),
-                child: Padding(
-                  padding: const EdgeInsets.all(20),
-                  child: Row(
-                    children: [
-                      Icon(
+              Container(
+                padding: const EdgeInsets.all(20),
+                decoration: BoxDecoration(
+                  color: Theme.of(context).colorScheme.primaryContainer,
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: Row(
+                  children: [
+                    Container(
+                      width: 48,
+                      height: 48,
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.72),
+                        borderRadius: BorderRadius.circular(16),
+                      ),
+                      child: Icon(
                         widget.session.roleCode == 'delivery'
-                            ? Icons.local_shipping
+                            ? Icons.local_shipping_outlined
                             : widget.session.roleCode == 'installer'
-                            ? Icons.handyman
-                            : Icons.health_and_safety,
-                        size: 38,
+                            ? Icons.handyman_outlined
+                            : Icons.health_and_safety_outlined,
+                        color: Theme.of(context).colorScheme.primary,
                       ),
-                      const SizedBox(width: 14),
-                      Expanded(
-                        child: Text(
-                          widget.completed ? '服务端确认完成的历史记录' : '仅展示服务端分派给本账号的任务',
-                          style: const TextStyle(fontWeight: FontWeight.w800),
-                        ),
+                    ),
+                    const SizedBox(width: 16),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            widget.completed ? '作业历史' : '${roleName(widget.session.roleCode)}任务',
+                            style: Theme.of(context).textTheme.titleLarge,
+                          ),
+                          const SizedBox(height: 4),
+                          Text(
+                            widget.completed ? '服务端确认完成的历史记录' : '仅展示服务端分派给本账号的任务',
+                            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              color: Theme.of(context).colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                        ],
                       ),
-                    ],
-                  ),
+                    ),
+                  ],
                 ),
               ),
+              const SizedBox(height: 28),
+              SectionHeader(
+                title: widget.completed ? '全部记录' : '待处理任务',
+                description: _viewModel.items.isEmpty
+                    ? '当前没有需要展示的任务'
+                    : '共 ${_viewModel.items.length} 项',
+              ),
+              const SizedBox(height: 12),
               if (_viewModel.items.isEmpty)
-                const Padding(
-                  padding: EdgeInsets.all(42),
-                  child: Center(child: Text('暂无任务')),
-                )
+                const MessageState(title: '暂无任务', description: '新的服务端分派任务会显示在这里')
               else
-                ..._viewModel.items.map(
-                  (item) => Card(
-                    child: ListTile(
-                      contentPadding: const EdgeInsets.all(16),
-                      title: Text(item.title, style: const TextStyle(fontWeight: FontWeight.w800)),
-                      subtitle: Padding(
-                        padding: const EdgeInsets.only(top: 8),
-                        child: Text('${item.number}\n${item.address}'),
-                      ),
-                      trailing: Chip(label: Text(statusName(item.status))),
-                      onTap: () => context.push('/tasks/${item.identity}'),
-                    ),
+                SurfaceSection(
+                  padding: EdgeInsets.zero,
+                  child: Column(
+                    children: [
+                      for (var index = 0; index < _viewModel.items.length; index++) ...[
+                        _TaskRow(
+                          item: _viewModel.items[index],
+                          onTap: () => context.push('/tasks/${_viewModel.items[index].identity}'),
+                        ),
+                        if (index < _viewModel.items.length - 1)
+                          const Divider(indent: 16, endIndent: 16),
+                      ],
+                    ],
                   ),
                 ),
             ],
@@ -115,3 +145,28 @@ class _WorkListPageState extends State<WorkListPage> {
     ),
   );
 }
+
+class _TaskRow extends StatelessWidget {
+  const _TaskRow({required this.item, required this.onTap});
+  final WorkItem item;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) => ListTile(
+    minTileHeight: 88,
+    title: Text(item.title, maxLines: 2, overflow: TextOverflow.ellipsis),
+    titleTextStyle: Theme.of(
+      context,
+    ).textTheme.titleMedium?.copyWith(color: Theme.of(context).colorScheme.onSurface),
+    subtitle: Padding(
+      padding: const EdgeInsets.only(top: 6),
+      child: Text(
+        '${item.number}${item.address.isEmpty ? '' : ' · ${item.address}'}',
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+      ),
+    ),
+    trailing: StatusPill(label: statusName(item.status), tone: StatusTone.info),
+    onTap: onTap,
+  );
+}

apps/service_app/pubspec.lock

@@ -336,6 +336,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.2.8"
+  heqi_design_system:
+    dependency: "direct main"
+    description:
+      path: "../heqi_design_system"
+      relative: true
+    source: path
+    version: "0.1.0"
   hooks:
     dependency: transitive
     description:

apps/service_app/pubspec.yaml

@@ -30,6 +30,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  heqi_design_system:
+    path: ../heqi_design_system
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.

apps/user_app/lib/app/app.dart

@@ -21,6 +21,8 @@ class _UserClientAppState extends State<UserClientApp> {
     title: '瓶安芯',
     debugShowCheckedModeBanner: false,
     theme: AppTheme.light(),
+    darkTheme: AppTheme.dark(),
+    themeMode: ThemeMode.system,
     routerConfig: _router,
   );
 }

apps/user_app/lib/data/services/payment_jsapi_web.dart

@@ -7,7 +7,8 @@ external void _invoke(String name, JSAny? arguments, JSFunction callback);
 
 Future<void> invokeWechatJsapi(String clientArgs) {
   final completer = Completer<void>();
-  final arguments = jsonDecode(clientArgs).jsify();
+  final Object? decoded = jsonDecode(clientArgs);
+  final JSAny? arguments = decoded.jsify();
   _invoke(
     'getBrandWCPayRequest',
     arguments,

apps/user_app/lib/ui/core/app_theme.dart

@@ -1,45 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:heqi_design_system/heqi_design_system.dart';
 
-class AppTheme {
-  static const safetyBlue = Color(0xFF246BFD);
-  static const ink = Color(0xFF14213D);
-  static const canvas = Color(0xFFF4F7FB);
+/// 用户端主题适配层；Token 与组件实现统一来自 heqi_design_system。
+abstract final class AppTheme {
+  static const primary = HeqiColors.consumerPrimary;
+  static const success = HeqiColors.success;
+  static const warning = HeqiColors.warning;
+  static const danger = HeqiColors.danger;
 
-  static ThemeData light() {
-    final scheme = ColorScheme.fromSeed(
-      seedColor: safetyBlue,
-      primary: safetyBlue,
-      surface: Colors.white,
-      error: const Color(0xFFD92D20),
-    );
-    return ThemeData(
-      colorScheme: scheme,
-      scaffoldBackgroundColor: canvas,
-      useMaterial3: true,
-      appBarTheme: const AppBarTheme(
-        backgroundColor: Colors.transparent,
-        foregroundColor: ink,
-        centerTitle: false,
-      ),
-      cardTheme: CardThemeData(
-        color: Colors.white,
-        elevation: 0,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
-      ),
-      inputDecorationTheme: InputDecorationTheme(
-        filled: true,
-        fillColor: Colors.white,
-        border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(16),
-          borderSide: BorderSide.none,
-        ),
-      ),
-      elevatedButtonTheme: ElevatedButtonThemeData(
-        style: ElevatedButton.styleFrom(
-          minimumSize: const Size.fromHeight(48),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-        ),
-      ),
-    );
-  }
+  static ThemeData light() => HeqiTheme.light(HeqiBrand.consumer);
+
+  static ThemeData dark() => HeqiTheme.dark(HeqiBrand.consumer);
 }

apps/user_app/lib/ui/core/widgets.dart

@@ -1,7 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:heqi_design_system/heqi_design_system.dart';
 
 import '../../domain/models/client_models.dart';
 
+typedef AppGutter = HeqiGutter;
+typedef SurfaceSection = HeqiSurfaceSection;
+typedef SectionHeader = HeqiSectionHeader;
+typedef StatusPill = HeqiStatusPill;
+typedef StatusTone = HeqiStatusTone;
+
 class PageIntro extends StatelessWidget {
   const PageIntro({required this.eyebrow, required this.title, this.description, super.key});
 
@@ -10,29 +17,31 @@ class PageIntro extends StatelessWidget {
   final String? description;
 
   @override
-  Widget build(BuildContext context) => Padding(
-    padding: const EdgeInsets.fromLTRB(20, 12, 20, 16),
-    child: Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          eyebrow,
-          style: TextStyle(
-            color: Theme.of(context).colorScheme.primary,
-            fontWeight: FontWeight.w700,
-            letterSpacing: 1,
+  Widget build(BuildContext context) => AppGutter(
+    child: Padding(
+      padding: const EdgeInsets.only(top: HeqiSpacing.x4, bottom: HeqiSpacing.x6),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            eyebrow,
+            style: Theme.of(context).textTheme.labelLarge?.copyWith(
+              color: Theme.of(context).colorScheme.primary,
+            ),
           ),
-        ),
-        const SizedBox(height: 6),
-        Text(
-          title,
-          style: Theme.of(context).textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.w800),
-        ),
-        if (description != null) ...[
-          const SizedBox(height: 6),
-          Text(description!, style: Theme.of(context).textTheme.bodyMedium),
+          const SizedBox(height: HeqiSpacing.x2),
+          Text(title, style: Theme.of(context).textTheme.headlineMedium),
+          if (description != null) ...[
+            const SizedBox(height: HeqiSpacing.x2),
+            Text(
+              description!,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onSurfaceVariant,
+              ),
+            ),
+          ],
         ],
-      ],
+      ),
     ),
   );
 }
@@ -44,20 +53,18 @@ class RecordCard extends StatelessWidget {
   final VoidCallback? onTap;
 
   @override
-  Widget build(BuildContext context) => Card(
-    margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
+  Widget build(BuildContext context) => Material(
+    color: Theme.of(context).colorScheme.surface,
     child: ListTile(
-      contentPadding: const EdgeInsets.symmetric(horizontal: 18, vertical: 10),
-      title: Text(
-        record.title.isEmpty ? '未命名记录' : record.title,
-        style: const TextStyle(fontWeight: FontWeight.w700),
+      minTileHeight: 72,
+      title: Text(record.title.isEmpty ? '未命名记录' : record.title),
+      titleTextStyle: Theme.of(context).textTheme.titleMedium?.copyWith(
+        color: Theme.of(context).colorScheme.onSurface,
       ),
-      subtitle: record.subtitle.isEmpty
-          ? null
-          : Padding(padding: const EdgeInsets.only(top: 6), child: Text(record.subtitle)),
+      subtitle: record.subtitle.isEmpty ? null : Text(record.subtitle),
       trailing: record.status == null
-          ? const Icon(Icons.chevron_right)
-          : Chip(label: Text('状态 ${record.status}'), visualDensity: VisualDensity.compact),
+          ? const Icon(Icons.chevron_right_rounded)
+          : StatusPill(label: '状态 ${record.status}', tone: StatusTone.info),
       onTap: onTap,
     ),
   );
@@ -71,26 +78,10 @@ class EmptyState extends StatelessWidget {
   final VoidCallback? onRetry;
 
   @override
-  Widget build(BuildContext context) => Center(
-    child: Padding(
-      padding: const EdgeInsets.all(32),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Icon(Icons.inbox_outlined, size: 52, color: Theme.of(context).colorScheme.outline),
-          const SizedBox(height: 16),
-          Text(
-            title,
-            style: Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
-          ),
-          const SizedBox(height: 8),
-          Text(description, textAlign: TextAlign.center),
-          if (onRetry != null) ...[
-            const SizedBox(height: 18),
-            OutlinedButton(onPressed: onRetry, child: const Text('重新加载')),
-          ],
-        ],
-      ),
-    ),
+  Widget build(BuildContext context) => HeqiMessageState(
+    title: title,
+    description: description,
+    onRetry: onRetry,
+    icon: Icons.inbox_outlined,
   );
 }

apps/user_app/lib/ui/features/auth/login_page.dart

@@ -17,6 +17,7 @@ class _LoginPageState extends State<LoginPage> {
   final _password = TextEditingController();
   bool _submitting = false;
   String? _error;
+  bool _obscurePassword = true;
 
   @override
   void dispose() {
@@ -44,28 +45,43 @@ class _LoginPageState extends State<LoginPage> {
     body: SafeArea(
       child: Center(
         child: SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
+          padding: const EdgeInsets.fromLTRB(24, 32, 24, 24),
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 420),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                Icon(
-                  Icons.health_and_safety_rounded,
-                  size: 68,
-                  color: Theme.of(context).colorScheme.primary,
+                Align(
+                  child: Container(
+                    width: 72,
+                    height: 72,
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).colorScheme.primaryContainer,
+                      borderRadius: BorderRadius.circular(24),
+                    ),
+                    child: Icon(
+                      Icons.health_and_safety_rounded,
+                      size: 38,
+                      color: Theme.of(context).colorScheme.primary,
+                      semanticLabel: '瓶安芯安全标识',
+                    ),
+                  ),
                 ),
-                const SizedBox(height: 20),
+                const SizedBox(height: 24),
                 Text(
                   '瓶安芯',
                   textAlign: TextAlign.center,
-                  style: Theme.of(
-                    context,
-                  ).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.w900),
+                  style: Theme.of(context).textTheme.headlineMedium,
                 ),
                 const SizedBox(height: 8),
-                const Text('安全服务与生活采购', textAlign: TextAlign.center),
-                const SizedBox(height: 36),
+                Text(
+                  '安全服务与生活采购',
+                  textAlign: TextAlign.center,
+                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                const SizedBox(height: 40),
                 TextField(
                   controller: _phone,
                   keyboardType: TextInputType.phone,
@@ -78,19 +94,50 @@ class _LoginPageState extends State<LoginPage> {
                 const SizedBox(height: 14),
                 TextField(
                   controller: _password,
-                  obscureText: true,
+                  obscureText: _obscurePassword,
                   autofillHints: const [AutofillHints.password],
-                  decoration: const InputDecoration(
+                  onSubmitted: (_) => _submitting ? null : _login(),
+                  decoration: InputDecoration(
                     labelText: '密码',
-                    prefixIcon: Icon(Icons.lock_outline),
+                    prefixIcon: const Icon(Icons.lock_outline),
+                    suffixIcon: IconButton(
+                      tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
+                      onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
+                      icon: Icon(
+                        _obscurePassword
+                            ? Icons.visibility_outlined
+                            : Icons.visibility_off_outlined,
+                      ),
+                    ),
                   ),
                 ),
                 if (_error != null) ...[
                   const SizedBox(height: 12),
-                  Text(_error!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
+                  Semantics(
+                    liveRegion: true,
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Icon(
+                          Icons.error_outline,
+                          size: 20,
+                          color: Theme.of(context).colorScheme.error,
+                        ),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: Text(
+                            _error!,
+                            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              color: Theme.of(context).colorScheme.error,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
                 ],
-                const SizedBox(height: 20),
-                ElevatedButton(
+                const SizedBox(height: 24),
+                FilledButton(
                   onPressed: _submitting ? null : _login,
                   child: _submitting
                       ? const SizedBox.square(
@@ -103,11 +150,13 @@ class _LoginPageState extends State<LoginPage> {
                   onPressed: () => context.push('/register'),
                   child: const Text('首次使用？注册账号'),
                 ),
-                const SizedBox(height: 12),
-                const Text(
-                  '登录即表示同意用户协议和隐私政策',
+                const SizedBox(height: 8),
+                Text(
+                  '登录即表示你已阅读并同意《用户协议》和《隐私政策》',
                   textAlign: TextAlign.center,
-                  style: TextStyle(fontSize: 12),
+                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
                 ),
               ],
             ),

apps/user_app/lib/ui/features/auth/register_page.dart

@@ -21,6 +21,7 @@ class _RegisterPageState extends State<RegisterPage> {
   String _requestIdentity = '';
   bool _busy = false;
   String? _message;
+  bool _obscurePassword = true;
 
   Future<void> _sendCode() async {
     try {
@@ -70,53 +71,103 @@ class _RegisterPageState extends State<RegisterPage> {
 
   @override
   Widget build(BuildContext context) => Scaffold(
-    appBar: AppBar(title: const Text('注册用户')),
-    body: ListView(
-      padding: const EdgeInsets.all(20),
-      children: [
-        TextField(
-          controller: _phone,
-          keyboardType: TextInputType.phone,
-          decoration: const InputDecoration(labelText: '手机号'),
-        ),
-        const SizedBox(height: 12),
-        TextField(
-          controller: _name,
-          decoration: const InputDecoration(labelText: '姓名'),
-        ),
-        const SizedBox(height: 12),
-        TextField(
-          controller: _address,
-          decoration: const InputDecoration(labelText: '服务地址'),
-        ),
-        const SizedBox(height: 12),
-        TextField(
-          controller: _password,
-          obscureText: true,
-          decoration: const InputDecoration(labelText: '登录密码'),
-        ),
-        const SizedBox(height: 12),
-        Row(
-          children: [
-            Expanded(
-              child: TextField(
-                controller: _code,
-                keyboardType: TextInputType.number,
-                decoration: const InputDecoration(labelText: '验证码'),
+    appBar: AppBar(title: const Text('创建账号')),
+    body: SafeArea(
+      top: false,
+      child: ListView(
+        padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
+        children: [
+          Text('开始使用瓶安芯', style: Theme.of(context).textTheme.headlineSmall),
+          const SizedBox(height: 8),
+          Text(
+            '填写真实服务信息，便于校验所属服务区域。',
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+          ),
+          const SizedBox(height: 28),
+          TextField(
+            controller: _phone,
+            keyboardType: TextInputType.phone,
+            autofillHints: const [AutofillHints.telephoneNumber],
+            decoration: const InputDecoration(
+              labelText: '手机号',
+              prefixIcon: Icon(Icons.phone_outlined),
+            ),
+          ),
+          const SizedBox(height: 16),
+          TextField(
+            controller: _name,
+            autofillHints: const [AutofillHints.name],
+            decoration: const InputDecoration(
+              labelText: '姓名',
+              prefixIcon: Icon(Icons.person_outline),
+            ),
+          ),
+          const SizedBox(height: 16),
+          TextField(
+            controller: _address,
+            autofillHints: const [AutofillHints.fullStreetAddress],
+            decoration: const InputDecoration(
+              labelText: '服务地址',
+              helperText: '用于匹配气站与配送服务范围',
+              prefixIcon: Icon(Icons.location_on_outlined),
+            ),
+          ),
+          const SizedBox(height: 16),
+          TextField(
+            controller: _password,
+            obscureText: _obscurePassword,
+            autofillHints: const [AutofillHints.newPassword],
+            decoration: InputDecoration(
+              labelText: '登录密码',
+              prefixIcon: const Icon(Icons.lock_outline),
+              suffixIcon: IconButton(
+                tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
+                onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
+                icon: Icon(
+                  _obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined,
+                ),
               ),
             ),
-            const SizedBox(width: 10),
-            OutlinedButton(onPressed: _sendCode, child: const Text('获取验证码')),
-          ],
-        ),
-        if (_message != null)
-          Padding(padding: const EdgeInsets.only(top: 12), child: Text(_message!)),
-        const SizedBox(height: 24),
-        ElevatedButton(
-          onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
-          child: const Text('创建账号'),
-        ),
-      ],
+          ),
+          const SizedBox(height: 16),
+          Row(
+            children: [
+              Expanded(
+                child: TextField(
+                  controller: _code,
+                  keyboardType: TextInputType.number,
+                  decoration: const InputDecoration(labelText: '验证码'),
+                ),
+              ),
+              const SizedBox(width: 10),
+              SizedBox(
+                width: 120,
+                child: OutlinedButton(
+                  onPressed: _busy ? null : _sendCode,
+                  child: const Text('获取验证码'),
+                ),
+              ),
+            ],
+          ),
+          if (_message != null)
+            Padding(
+              padding: const EdgeInsets.only(top: 12),
+              child: Semantics(liveRegion: true, child: Text(_message!)),
+            ),
+          const SizedBox(height: 28),
+          FilledButton(
+            onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
+            child: _busy
+                ? const SizedBox.square(
+                    dimension: 22,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  )
+                : const Text('创建账号'),
+          ),
+        ],
+      ),
     ),
   );
 }

apps/user_app/lib/ui/features/home/home_page.dart

@@ -58,28 +58,37 @@ class _HomePageState extends State<HomePage> {
                   title: '今天也要安心用气',
                   description: '设备控制能力尚未开放，本页只展示真实服务与安全内容。',
                 ),
-                Card(
-                  margin: const EdgeInsets.symmetric(horizontal: 16),
-                  child: Padding(
-                    padding: const EdgeInsets.all(20),
+                AppGutter(
+                  child: SurfaceSection(
                     child: Row(
                       children: [
-                        Icon(
-                          Icons.store_mall_directory_outlined,
-                          size: 38,
-                          color: Theme.of(context).colorScheme.primary,
+                        Container(
+                          width: 52,
+                          height: 52,
+                          decoration: BoxDecoration(
+                            color: Theme.of(context).colorScheme.primaryContainer,
+                            borderRadius: BorderRadius.circular(16),
+                          ),
+                          child: Icon(
+                            Icons.store_mall_directory_outlined,
+                            color: Theme.of(context).colorScheme.primary,
+                            semanticLabel: '服务归属',
+                          ),
                         ),
-                        const SizedBox(width: 14),
+                        const SizedBox(width: 16),
                         Expanded(
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                              const Text('当前服务归属', style: TextStyle(fontWeight: FontWeight.w800)),
+                              Text('当前服务归属', style: Theme.of(context).textTheme.titleMedium),
                               const SizedBox(height: 4),
                               Text(
                                 relation == null
                                     ? '尚未建立服务关系'
                                     : '${relation['gas_name'] ?? ''} ${relation['delivery_name'] ?? ''}',
+                                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                  color: Theme.of(context).colorScheme.onSurfaceVariant,
+                                ),
                               ),
                             ],
                           ),
@@ -88,17 +97,30 @@ class _HomePageState extends State<HomePage> {
                     ),
                   ),
                 ),
-                const Padding(
-                  padding: EdgeInsets.fromLTRB(20, 26, 20, 8),
-                  child: Text('安全公告', style: TextStyle(fontWeight: FontWeight.w800, fontSize: 18)),
+                const SizedBox(height: 32),
+                const AppGutter(
+                  child: SectionHeader(title: '安全公告', description: '来自平台的最新安全提醒与服务信息'),
                 ),
+                const SizedBox(height: 12),
                 if (contents.isEmpty)
-                  const Padding(
-                    padding: EdgeInsets.all(20),
-                    child: Text('暂无已发布内容'),
+                  const AppGutter(
+                    child: SurfaceSection(child: Text('暂无已发布内容')),
                   )
                 else
-                  ...contents.take(6).map((item) => RecordCard(record: item)),
+                  AppGutter(
+                    child: SurfaceSection(
+                      padding: EdgeInsets.zero,
+                      child: Column(
+                        children: [
+                          for (var index = 0; index < contents.take(6).length; index++) ...[
+                            RecordCard(record: contents[index]),
+                            if (index < contents.take(6).length - 1)
+                              const Divider(indent: 16, endIndent: 16),
+                          ],
+                        ],
+                      ),
+                    ),
+                  ),
               ],
             ),
           );

apps/user_app/lib/ui/features/orders/orders_page.dart

@@ -22,9 +22,17 @@ class OrdersPage extends StatelessWidget {
     final action = await showModalBottomSheet<String>(
       context: context,
       builder: (context) => SafeArea(
+        top: false,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(20, 4, 20, 12),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: Text('订单操作', style: Theme.of(context).textTheme.titleLarge),
+              ),
+            ),
             if (record.status == 16 || record.status == 18) ...[
               ListTile(
                 title: const Text('支付宝支付'),
@@ -75,12 +83,8 @@ class OrdersPage extends StatelessWidget {
         identity: record.identity,
         requestNo: const Uuid().v7(),
         channel: action,
-        payType: kIsWeb
-            ? (action == 'alipay' ? 'wap' : 'jsapi')
-            : 'app',
-        openid: kIsWeb && action == 'wechat'
-            ? Uri.base.queryParameters['openid'] ?? ''
-            : '',
+        payType: kIsWeb ? (action == 'alipay' ? 'wap' : 'jsapi') : 'app',
+        openid: kIsWeb && action == 'wechat' ? Uri.base.queryParameters['openid'] ?? '' : '',
       );
       await _launcher.launch(payment);
       if (context.mounted) {
@@ -126,47 +130,53 @@ class OrdersPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => DefaultTabController(
-        length: 4,
-        child: Scaffold(
-          appBar: AppBar(
-            title: const Text('我的订单'),
-            bottom: const TabBar(
-              tabs: [
-                Tab(text: '商城'),
-                Tab(text: '供气'),
-                Tab(text: '退款'),
-                Tab(text: '工单'),
-              ],
-            ),
-          ),
-          body: TabBarView(
-            children: [
-              RecordListPage(
-                title: '商城订单',
-                eyebrow: '交易',
-                viewModel: RecordListViewModel(repository.shopOrders),
-                onRecordTap: (record) =>
-                    _openActions(context, record, 'shop'),
-              ),
-              RecordListPage(
-                title: '供气订单',
-                eyebrow: '履约',
-                viewModel: RecordListViewModel(repository.gasOrders),
-                onRecordTap: (record) =>
-                    _openActions(context, record, 'gas'),
-              ),
-              RecordListPage(
-                title: '退款记录',
-                eyebrow: '资金',
-                viewModel: RecordListViewModel(repository.refunds),
-              ),
-              RecordListPage(
-                title: '服务工单',
-                eyebrow: '服务',
-                viewModel: RecordListViewModel(repository.tickets),
-              ),
-            ],
-          ),
+    length: 4,
+    child: Scaffold(
+      appBar: AppBar(
+        title: const Text('我的订单'),
+        bottom: const TabBar(
+          tabs: [
+            Tab(text: '商城'),
+            Tab(text: '供气'),
+            Tab(text: '退款'),
+            Tab(text: '工单'),
+          ],
         ),
-      );
+      ),
+      body: TabBarView(
+        children: [
+          RecordListPage(
+            title: '商城订单',
+            eyebrow: '交易',
+            description: '查看商城订单并处理待支付或退款事项',
+            embedded: true,
+            viewModel: RecordListViewModel(repository.shopOrders),
+            onRecordTap: (record) => _openActions(context, record, 'shop'),
+          ),
+          RecordListPage(
+            title: '供气订单',
+            eyebrow: '履约',
+            description: '查看供气订单与当前履约状态',
+            embedded: true,
+            viewModel: RecordListViewModel(repository.gasOrders),
+            onRecordTap: (record) => _openActions(context, record, 'gas'),
+          ),
+          RecordListPage(
+            title: '退款记录',
+            eyebrow: '资金',
+            description: '退款结果以服务端审核和资金流水为准',
+            embedded: true,
+            viewModel: RecordListViewModel(repository.refunds),
+          ),
+          RecordListPage(
+            title: '服务工单',
+            eyebrow: '服务',
+            description: '查看维修、安装与其他服务工单',
+            embedded: true,
+            viewModel: RecordListViewModel(repository.tickets),
+          ),
+        ],
+      ),
+    ),
+  );
 }

apps/user_app/lib/ui/features/profile/profile_page.dart

@@ -5,6 +5,7 @@ import 'package:uuid/uuid.dart';
 import '../../../app/dependencies.dart';
 import '../../../data/repositories/client_repository.dart';
 import '../../../domain/models/client_models.dart';
+import '../../core/widgets.dart';
 
 class ProfilePage extends StatefulWidget {
   const ProfilePage({required this.session, required this.repository, super.key});
@@ -90,86 +91,118 @@ class _ProfilePageState extends State<ProfilePage> {
       future: _future,
       builder: (context, snapshot) {
         if (!snapshot.hasData) {
-          if (snapshot.hasError) return Center(child: Text(snapshot.error.toString()));
+          if (snapshot.hasError) {
+            return EmptyState(
+              title: '个人信息加载失败',
+              description: '请检查网络后重新进入本页',
+              onRetry: () => setState(() => _future = _load()),
+            );
+          }
           return const Center(child: CircularProgressIndicator());
         }
         final (profile, wallet) = snapshot.data!;
         return ListView(
-          padding: const EdgeInsets.all(16),
+          padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
           children: [
-            Card(
-              child: Padding(
-                padding: const EdgeInsets.all(20),
-                child: Row(
-                  children: [
-                    CircleAvatar(
-                      radius: 30,
-                      child: Text(profile.name.isEmpty ? '用' : profile.name.substring(0, 1)),
-                    ),
-                    const SizedBox(width: 14),
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            profile.name,
-                            style: Theme.of(
-                              context,
-                            ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w800),
-                          ),
-                          Text(profile.phone),
-                        ],
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-            ),
-            Card(
-              child: Padding(
-                padding: const EdgeInsets.all(20),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    const Column(
+            SurfaceSection(
+              child: Row(
+                children: [
+                  CircleAvatar(
+                    radius: 28,
+                    backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+                    foregroundColor: Theme.of(context).colorScheme.primary,
+                    child: Text(profile.name.isEmpty ? '用' : profile.name.substring(0, 1)),
+                  ),
+                  const SizedBox(width: 16),
+                  Expanded(
+                    child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        Text('钱包余额'),
-                        SizedBox(height: 4),
-                        Text('充值结果以服务端确认为准', style: TextStyle(fontSize: 12)),
+                        Text(profile.name, style: Theme.of(context).textTheme.titleLarge),
+                        const SizedBox(height: 4),
+                        Text(
+                          profile.phone,
+                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                            color: Theme.of(context).colorScheme.onSurfaceVariant,
+                          ),
+                        ),
                       ],
                     ),
-                    Text(
-                      moneyText(wallet.balance),
-                      style: Theme.of(
-                        context,
-                      ).textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.w900),
-                    ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
-            _item(Icons.location_on_outlined, '地址管理', _addAddress),
-            _item(Icons.description_outlined, '供气合同', () => context.push('/records/contracts')),
-            _item(
-              Icons.account_balance_wallet_outlined,
-              '钱包流水',
-              () => context.push('/records/wallet'),
+            const SizedBox(height: 28),
+            Text('资产概览', style: Theme.of(context).textTheme.titleMedium),
+            const SizedBox(height: 12),
+            SurfaceSection(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text('钱包余额', style: Theme.of(context).textTheme.titleMedium),
+                      const SizedBox(height: 4),
+                      Text(
+                        '以服务端资金流水为准',
+                        style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    ],
+                  ),
+                  Text(
+                    moneyText(wallet.balance),
+                    style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                      color: Theme.of(context).colorScheme.primary,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 28),
+            Text('账户与服务', style: Theme.of(context).textTheme.titleMedium),
+            const SizedBox(height: 12),
+            SurfaceSection(
+              padding: EdgeInsets.zero,
+              child: Column(
+                children: [
+                  _item(Icons.location_on_outlined, '地址管理', _addAddress),
+                  const Divider(indent: 56),
+                  _item(
+                    Icons.description_outlined,
+                    '供气合同',
+                    () => context.push('/records/contracts'),
+                  ),
+                  const Divider(indent: 56),
+                  _item(
+                    Icons.account_balance_wallet_outlined,
+                    '钱包流水',
+                    () => context.push('/records/wallet'),
+                  ),
+                  const Divider(indent: 56),
+                  _item(Icons.build_outlined, '申请维修', _createTicket),
+                ],
+              ),
+            ),
+            const SizedBox(height: 24),
+            TextButton.icon(
+              style: TextButton.styleFrom(foregroundColor: Theme.of(context).colorScheme.error),
+              onPressed: widget.session.logout,
+              icon: const Icon(Icons.logout),
+              label: const Text('退出登录'),
             ),
-            _item(Icons.build_outlined, '申请维修', _createTicket),
-            _item(Icons.logout, '退出登录', widget.session.logout),
           ],
         );
       },
     ),
   );
 
-  Widget _item(IconData icon, String title, VoidCallback onTap) => Card(
-    child: ListTile(
-      leading: Icon(icon),
-      title: Text(title),
-      trailing: const Icon(Icons.chevron_right),
-      onTap: onTap,
-    ),
+  Widget _item(IconData icon, String title, VoidCallback onTap) => ListTile(
+    leading: Icon(icon),
+    title: Text(title),
+    trailing: const Icon(Icons.chevron_right),
+    onTap: onTap,
   );
 }

apps/user_app/lib/ui/features/shared/record_list_page.dart

@@ -12,6 +12,7 @@ class RecordListPage extends StatefulWidget {
     this.description,
     this.floatingActionButton,
     this.onRecordTap,
+    this.embedded = false,
     super.key,
   });
 
@@ -21,6 +22,7 @@ class RecordListPage extends StatefulWidget {
   final RecordListViewModel viewModel;
   final Widget? floatingActionButton;
   final ValueChanged<ClientRecord>? onRecordTap;
+  final bool embedded;
 
   @override
   State<RecordListPage> createState() => _RecordListPageState();
@@ -40,10 +42,8 @@ class _RecordListPageState extends State<RecordListPage> {
   }
 
   @override
-  Widget build(BuildContext context) => Scaffold(
-    appBar: AppBar(title: Text(widget.title)),
-    floatingActionButton: widget.floatingActionButton,
-    body: ListenableBuilder(
+  Widget build(BuildContext context) {
+    final content = ListenableBuilder(
       listenable: widget.viewModel,
       builder: (context, _) {
         final state = widget.viewModel;
@@ -62,24 +62,52 @@ class _RecordListPageState extends State<RecordListPage> {
           child: CustomScrollView(
             physics: const AlwaysScrollableScrollPhysics(),
             slivers: [
-              SliverToBoxAdapter(
-                child: PageIntro(
-                  eyebrow: widget.eyebrow,
-                  title: widget.title,
-                  description: widget.description,
+              if (!widget.embedded)
+                SliverToBoxAdapter(
+                  child: PageIntro(
+                    eyebrow: widget.eyebrow,
+                    title: widget.title,
+                    description: widget.description,
+                  ),
+                )
+              else
+                SliverToBoxAdapter(
+                  child: Padding(
+                    padding: const EdgeInsets.fromLTRB(20, 20, 20, 12),
+                    child: Text(
+                      widget.description ?? widget.title,
+                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                    ),
+                  ),
                 ),
-              ),
               if (state.records.isEmpty)
                 const SliverFillRemaining(
                   hasScrollBody: false,
                   child: EmptyState(title: '暂无记录', description: '服务端还没有可展示的数据'),
                 )
               else
-                SliverList.builder(
-                  itemCount: state.records.length,
-                  itemBuilder: (context, index) => RecordCard(
-                    record: state.records[index],
-                    onTap: widget.onRecordTap == null ? null : () => widget.onRecordTap!(state.records[index]),
+                SliverPadding(
+                  padding: const EdgeInsets.symmetric(horizontal: 20),
+                  sliver: SliverToBoxAdapter(
+                    child: SurfaceSection(
+                      padding: EdgeInsets.zero,
+                      child: Column(
+                        children: [
+                          for (var index = 0; index < state.records.length; index++) ...[
+                            RecordCard(
+                              record: state.records[index],
+                              onTap: widget.onRecordTap == null
+                                  ? null
+                                  : () => widget.onRecordTap!(state.records[index]),
+                            ),
+                            if (index < state.records.length - 1)
+                              const Divider(indent: 16, endIndent: 16),
+                          ],
+                        ],
+                      ),
+                    ),
                   ),
                 ),
               const SliverPadding(padding: EdgeInsets.only(bottom: 24)),
@@ -87,6 +115,12 @@ class _RecordListPageState extends State<RecordListPage> {
           ),
         );
       },
-    ),
-  );
+    );
+    if (widget.embedded) return content;
+    return Scaffold(
+      appBar: AppBar(title: Text(widget.title)),
+      floatingActionButton: widget.floatingActionButton,
+      body: content,
+    );
+  }
 }

apps/user_app/lib/ui/features/shop/shop_page.dart

@@ -33,26 +33,37 @@ class _ShopPageState extends State<ShopPage> {
     }
     final confirmed = await showModalBottomSheet<bool>(
       context: context,
+      isScrollControlled: true,
       showDragHandle: true,
-      builder: (context) => Padding(
-        padding: const EdgeInsets.fromLTRB(20, 4, 20, 30),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            Text(
-              '确认下单',
-              style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w800),
-            ),
-            const SizedBox(height: 12),
-            Text(product.title),
-            Text(addresses.first.title),
-            const SizedBox(height: 18),
-            ElevatedButton(
-              onPressed: () => Navigator.pop(context, true),
-              child: const Text('提交订单'),
-            ),
-          ],
+      builder: (context) => SafeArea(
+        top: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(20, 4, 20, 20),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Text('确认下单', style: Theme.of(context).textTheme.titleLarge),
+              const SizedBox(height: 20),
+              ListTile(
+                contentPadding: EdgeInsets.zero,
+                leading: const Icon(Icons.shopping_bag_outlined),
+                title: Text(product.title),
+                subtitle: Text(product.subtitle),
+              ),
+              ListTile(
+                contentPadding: EdgeInsets.zero,
+                leading: const Icon(Icons.location_on_outlined),
+                title: const Text('配送地址'),
+                subtitle: Text(addresses.first.title),
+              ),
+              const SizedBox(height: 20),
+              FilledButton(
+                onPressed: () => Navigator.pop(context, true),
+                child: const Text('提交订单'),
+              ),
+            ],
+          ),
         ),
       ),
     );
@@ -89,48 +100,22 @@ class _ShopPageState extends State<ShopPage> {
         }
         final products = snapshot.data ?? const [];
         return ListView(
-          padding: const EdgeInsets.only(bottom: 24),
+          padding: const EdgeInsets.only(bottom: 32),
           children: [
             const PageIntro(eyebrow: '品质保障', title: '燃气安全商城', description: '价格和库存以服务端结算为准'),
             if (products.isEmpty)
               const EmptyState(title: '暂无商品', description: '目前没有上架且有库存的商品')
             else
-              ...products.map(
-                (product) => Card(
-                  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 7),
-                  child: Padding(
-                    padding: const EdgeInsets.all(18),
-                    child: Row(
-                      children: [
-                        Container(
-                          width: 60,
-                          height: 60,
-                          decoration: BoxDecoration(
-                            color: const Color(0xFFEAF1FF),
-                            borderRadius: BorderRadius.circular(16),
-                          ),
-                          child: const Icon(Icons.local_fire_department_outlined),
-                        ),
-                        const SizedBox(width: 14),
-                        Expanded(
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                product.title,
-                                style: const TextStyle(fontWeight: FontWeight.w800),
-                              ),
-                              const SizedBox(height: 6),
-                              Text(product.subtitle),
-                            ],
-                          ),
-                        ),
-                        IconButton.filled(
-                          onPressed: () => _buy(product),
-                          icon: const Icon(Icons.add_shopping_cart),
-                        ),
+              AppGutter(
+                child: SurfaceSection(
+                  padding: EdgeInsets.zero,
+                  child: Column(
+                    children: [
+                      for (var index = 0; index < products.length; index++) ...[
+                        _ProductRow(product: products[index], onBuy: () => _buy(products[index])),
+                        if (index < products.length - 1) const Divider(indent: 92, endIndent: 16),
                       ],
-                    ),
+                    ],
                   ),
                 ),
               ),
@@ -140,3 +125,56 @@ class _ShopPageState extends State<ShopPage> {
     ),
   );
 }
+
+class _ProductRow extends StatelessWidget {
+  const _ProductRow({required this.product, required this.onBuy});
+
+  final ClientRecord product;
+  final VoidCallback onBuy;
+
+  @override
+  Widget build(BuildContext context) => Padding(
+    padding: const EdgeInsets.fromLTRB(16, 16, 12, 16),
+    child: Row(
+      children: [
+        Container(
+          width: 60,
+          height: 60,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.primaryContainer,
+            borderRadius: BorderRadius.circular(16),
+          ),
+          child: Icon(
+            Icons.local_fire_department_outlined,
+            color: Theme.of(context).colorScheme.primary,
+            semanticLabel: '燃气安全商品',
+          ),
+        ),
+        const SizedBox(width: 16),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(product.title, style: Theme.of(context).textTheme.titleMedium),
+              if (product.subtitle.isNotEmpty) ...[
+                const SizedBox(height: 4),
+                Text(
+                  product.subtitle,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+        const SizedBox(width: 8),
+        IconButton.filled(
+          tooltip: '购买 ${product.title}',
+          onPressed: onBuy,
+          icon: const Icon(Icons.add_shopping_cart_outlined),
+        ),
+      ],
+    ),
+  );
+}

apps/user_app/pubspec.lock

@@ -192,6 +192,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "17.3.0"
+  heqi_design_system:
+    dependency: "direct main"
+    description:
+      path: "../heqi_design_system"
+      relative: true
+    source: path
+    version: "0.1.0"
   hooks:
     dependency: transitive
     description:

apps/user_app/pubspec.yaml

@@ -30,6 +30,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  heqi_design_system:
+    path: ../heqi_design_system
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.