Initial project

apps/im_app/lib/features/settings/view/widgets/settings_section_header.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../core/ui/base/context_theme_ext.dart';
+
+/// 设置页分组标题
+///
+/// 用于在列表中区分配置分组，如「外观」、「通知」。
+/// 文字颜色跟随 [ColorScheme.primary]，自带上下留白。
+///
+/// 用法：
+/// ```dart
+/// const SettingsSectionHeader(title: '外观')
+/// ```
+class SettingsSectionHeader extends StatelessWidget {
+  const SettingsSectionHeader({
+    super.key,
+    required this.title,
+  });
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    final s = context.styles;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16, 24, 16, 4),
+      child: Text(title, style: s.sectionLabel),
+    );
+  }
+}

apps/im_app/lib/features/settings/view/widgets/theme_option_tile.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../core/ui/base/context_theme_ext.dart';
+
+/// 单个主题选项行
+///
+/// 纯展示 + 事件透传，不感知任何 Provider。
+/// 由父级传入 [current] 判断选中状态，[onTap] 处理切换。
+///
+/// 用法：
+/// ```dart
+/// ThemeOptionTile(
+///   label: '黑色模式',
+///   mode: ThemeMode.dark,
+///   current: current,
+///   onTap: () => ref.read(themeViewModelProvider.notifier).setMode(ThemeMode.dark),
+/// )
+/// ```
+class ThemeOptionTile extends StatelessWidget {
+  const ThemeOptionTile({
+    super.key,
+    required this.label,
+    required this.mode,
+    required this.current,
+    required this.onTap,
+  });
+
+  final String label;
+  final ThemeMode mode;
+  final ThemeMode current;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final s = context.styles;
+    final isSelected = current == mode;
+
+    return ListTile(
+      title: Text(label),
+      trailing: isSelected ? Icon(Icons.check, color: s.primary) : null,
+      onTap: onTap,
+    );
+  }
+}