feat(Core UI): 基础定义

apps/im_app/lib/core/ui/base/app_theme_ext.dart

@@ -0,0 +1,7 @@
+import 'package:flutter/material.dart';
+import 'package:im_app/core/ui/base/shadows.dart';
+
+
+extension AppThemeExt on BuildContext {
+  AppShadows get shadows => AppShadows(this);
+}

apps/im_app/lib/core/ui/base/colors.dart

@@ -37,4 +37,21 @@ class AppColors {
   static const gray800 = Color(0xFF3C4043);
   static const gray900 = Color(0xFF202124);
   static const black = Color(0xFF000000);
+
+  // ── Neutral black Scale ─────────────────────────────────────────────────────
+  static const black12 = Color(0x1F000000); // 12% opacity
+  static const black60 = Color(0x99000000); // 60% opacity
+
+  /// 阴影颜色 Token
+  static Color shadow(BuildContext context) {
+    final brightness = Theme
+        .of(context)
+        .brightness;
+
+    if (brightness == Brightness.dark) {
+      return black60;
+    }
+
+    return black12;
+  }
 }

apps/im_app/lib/core/ui/base/shadows.dart

@@ -1,104 +1,118 @@
 import 'package:flutter/material.dart';
+import 'colors.dart';
 
-/// 阴影设计 Token
+/// 阴影 Design Token
 ///
-/// 统一管理项目中的阴影规范，避免在业务代码中直接写 BoxShadow。
+/// 统一管理项目中的阴影规范，避免在业务代码中直接书写 `BoxShadow`。
+/// 所有阴影通过 Design Token 提供，保证：
 ///
-/// 使用示例：
+/// - UI 风格统一
+/// - 支持 Dark / Light Mode
+/// - 与设计稿（Figma）保持一致
+///
+/// ## 数据流位置
+///
+/// ```
+/// AppColors（颜色常量）
+///   → AppShadows（阴影 Token）
+///     → Context Extension（context.shadows）
+///       → View 层消费
+/// ```
+///
+/// ## 使用示例
 ///
 /// ```dart
 /// Container(
 ///   decoration: BoxDecoration(
 ///     color: Colors.white,
-///     boxShadow: AppShadows.bs8,
+///     boxShadow: context.shadows.bs8,
 ///   ),
 /// )
 /// ```
 ///
-/// 阴影一般用于：
+/// ## Elevation 体系
-/// - Card 卡片
-/// - Dialog 弹窗
-/// - Floating Button
-/// - 悬浮面板
 ///
-/// 设计通常遵循 UI 设计系统的 elevation 规则，例如：
+/// 阴影遵循常见 UI 设计系统的层级规范：
-/// 4 / 8 / 12 / 16
+///
+/// - **4**  : 小卡片 / List Item
+/// - **8**  : Card / 商品卡片
+/// - **12** : Dropdown / Popover
+/// - **16** : Dialog / Modal / 悬浮面板
 class AppShadows {
-  /// 私有构造函数，防止实例化
+  /// 构造函数，通过 BuildContext 获取当前主题
-  AppShadows._();
+  AppShadows(this.context);
 
-  // ================================
+  /// 当前 Widget 的 BuildContext
-  // 轻量阴影
-  // ================================
-  // 适用于轻微层级，例如小卡片
-
-  /// 轻阴影（4）
   ///
-  /// 常用于：
+  /// 用于根据 Theme 判断 Light / Dark Mode，
-  /// - 小卡片
+  /// 从而动态获取阴影颜色。
-  /// - List item
+  final BuildContext context;
-  static const List<BoxShadow> bs4 = [
-    BoxShadow(
-      /// 阴影颜色（透明黑）
-      color: Color(0x14000000),
 
-      /// 模糊半径
+  /// 内部统一阴影生成方法
-      blurRadius: 4,
+  ///
+  /// 避免重复创建 `BoxShadow` 逻辑，
+  /// 所有阴影 Token 都通过该方法生成。
+  List<BoxShadow> _shadow({
+    required double blur,
+    required double dy,
+  }) {
+    return [
+      BoxShadow(
+
+        /// 阴影颜色来自 Design Token
+        color: AppColors.shadow(context),
+
+        /// 模糊半径（影响阴影扩散范围）
+        blurRadius: blur,
 
         /// 阴影偏移
-      offset: Offset(0, 2),
+        offset: Offset(0, dy),
       )
     ];
+  }
 
-  // ================================
+  /// Elevation 4
-  // 中等阴影
-  // ================================
-
-  /// 中等阴影（8）
   ///
-  /// 常用于：
+  /// 适用场景：
+  /// - List Item
+  /// - 小卡片
+  List<BoxShadow> get bs4 =>
+      _shadow(
+        blur: 4,
+        dy: 2,
+      );
+
+  /// Elevation 8
+  ///
+  /// 适用场景：
   /// - Card
   /// - 商品卡片
-  static const List<BoxShadow> bs8 = [
+  List<BoxShadow> get bs8 =>
-    BoxShadow(
+      _shadow(
-      color: Color(0x1F000000),
+        blur: 8,
-      blurRadius: 8,
+        dy: 4,
-      offset: Offset(0, 4),
+      );
-    )
-  ];
 
-  // ================================
+  /// Elevation 12
-  // 强阴影
-  // ================================
-
-  /// 强阴影（12）
   ///
-  /// 常用于：
+  /// 适用场景：
-  /// - 悬浮卡片
   /// - Dropdown
-  static const List<BoxShadow> bs12 = [
+  /// - Popover
-    BoxShadow(
+  List<BoxShadow> get bs12 =>
-      color: Color(0x26000000),
+      _shadow(
-      blurRadius: 12,
+        blur: 12,
-      offset: Offset(0, 8),
+        dy: 8,
-    )
+      );
-  ];
 
-  // ================================
+  /// Elevation 16
-  // 高层级阴影
-  // ================================
-
-  /// 高层级阴影（16）
   ///
-  /// 常用于：
+  /// 适用场景：
   /// - Dialog
   /// - Modal
   /// - Floating Panel
-  static const List<BoxShadow> bs16 = [
+  List<BoxShadow> get bs16 =>
-    BoxShadow(
+      _shadow(
-      color: Color(0x26000000),
+        blur: 16,
-      blurRadius: 16,
+        dy: 8,
-      offset: Offset(0, 8),
+      );
-    )
-  ];
 }