feat(my): 我的表盘

@@ -2,9 +2,11 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:doublefeel_flutter/app/models/input_dialog_meta_data.dart';
 import 'package:doublefeel_flutter/app/models/input_dialog_meta_data.dart';
 import 'package:doublefeel_flutter/app/modules/home/controllers/my_controller.dart';
 import 'package:doublefeel_flutter/app/modules/home/controllers/my_controller.dart';
 import 'package:doublefeel_flutter/app/modules/home/widgets/my/account_setting_view.dart';
 import 'package:doublefeel_flutter/app/modules/home/widgets/my/account_setting_view.dart';
+import 'package:doublefeel_flutter/app/modules/watch_theme/models/watch_theme_models.dart';
 import 'package:doublefeel_flutter/app/routes/app_pages.dart';
 import 'package:doublefeel_flutter/app/routes/app_pages.dart';
 import 'package:doublefeel_flutter/app/utils/dialog_utils.dart';
 import 'package:doublefeel_flutter/app/utils/dialog_utils.dart';
 import 'package:doublefeel_flutter/core/theme/app_theme.dart';
 import 'package:doublefeel_flutter/core/theme/app_theme.dart';
+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
 import 'package:doublefeel_flutter/data/local/user_preferences_storage.dart';
 import 'package:doublefeel_flutter/data/local/user_preferences_storage.dart';
 import 'package:doublefeel_flutter/data/models/local/user_preferences.dart';
 import 'package:doublefeel_flutter/data/models/local/user_preferences.dart';
 import 'package:doublefeel_flutter/data/models/user/user_models.dart';
 import 'package:doublefeel_flutter/data/models/user/user_models.dart';
@@ -12,6 +14,8 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:get/get.dart';
 
 
+import '../../../../../core/theme/app_colors.dart';
+
 class MyTab extends GetView<MyController> {
 class MyTab extends GetView<MyController> {
   const MyTab({super.key});
   const MyTab({super.key});
 
 
@@ -46,7 +50,12 @@ class MyTab extends GetView<MyController> {
               const SizedBox(height: 28),
               const SizedBox(height: 28),
               _ProCard(vipInfo: vipInfo),
               _ProCard(vipInfo: vipInfo),
               const SizedBox(height: 12),
               const SizedBox(height: 12),
-              const _WatchThemeCard(),
+              _WatchThemeCard(
+                onTap: () => Get.toNamed(
+                  Routes.WATCH_THEME,
+                  arguments: {'isPremium': false, 'hasCustomThemes': false},
+                ),
+              ),
               const SizedBox(height: 12),
               const SizedBox(height: 12),
               _SettingsRow(
               _SettingsRow(
                 title: '账号信息',
                 title: '账号信息',
@@ -73,6 +82,51 @@ class MyTab extends GetView<MyController> {
     );
     );
   }
   }
 }
 }
+class _SettingsRow extends StatelessWidget {
+  const _SettingsRow({required this.title, required this.onTap});
+
+  final String title;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: Container(
+        height: 56,
+        padding: const EdgeInsets.symmetric(horizontal: 20),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(16),
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Text(
+                title,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  color: context.colors.textPrimary,
+                  fontSize: 14,
+                  fontWeight: FontWeight.w400,
+                  height: 1.4,
+                ),
+              ),
+            ),
+            Image.asset(
+              'assets/images/common/ic_more_gray.png',
+              width: 16,
+              height: 16,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 
 
 class _ProfileHeader extends StatelessWidget {
 class _ProfileHeader extends StatelessWidget {
   const _ProfileHeader({required this.user});
   const _ProfileHeader({required this.user});
@@ -303,59 +357,94 @@ class _ProCard extends StatelessWidget {
   }
   }
 }
 }
 
 
-class _WatchThemeCard extends StatelessWidget {
-  const _WatchThemeCard();
+// class _WatchThemeCard extends StatelessWidget {
+//   const _WatchThemeCard();
+//
+//   @override
+//   Widget build(BuildContext context) {
+//     return Container(
+//       height: 145,
+//       decoration: BoxDecoration(
+//         color: Colors.white,
+//         borderRadius: BorderRadius.circular(16),
+//       ),
+//       child: Image.asset('assets/images/my/ic_my_watch_theme.png'),
+//     );
+//   }
+// }
 
 
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      height: 145,
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(16),
-      ),
-      child: Image.asset('assets/images/my/ic_my_watch_theme.png'),
-    );
-  }
-}
-
-class _SettingsRow extends StatelessWidget {
-  const _SettingsRow({required this.title, required this.onTap});
+class _WatchThemeCard extends StatelessWidget {
+  const _WatchThemeCard({required this.onTap});
 
 
-  final String title;
   final VoidCallback onTap;
   final VoidCallback onTap;
 
 
+  final double _itemSize = 64;
+  final double _overlap = 8;
+
   @override
   @override
   Widget build(BuildContext context) {
   Widget build(BuildContext context) {
     return GestureDetector(
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
       behavior: HitTestBehavior.opaque,
       onTap: onTap,
       onTap: onTap,
       child: Container(
       child: Container(
-        height: 56,
-        padding: const EdgeInsets.symmetric(horizontal: 20),
+        padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 20.dp, 18.dp),
         decoration: BoxDecoration(
         decoration: BoxDecoration(
           color: Colors.white,
           color: Colors.white,
-          borderRadius: BorderRadius.circular(16),
+          borderRadius: BorderRadius.circular(16.dp),
         ),
         ),
-        child: Row(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
           children: [
-            Expanded(
-              child: Text(
-                title,
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                style: TextStyle(
-                  color: context.colors.textPrimary,
-                  fontSize: 14,
-                  fontWeight: FontWeight.w400,
-                  height: 1.4,
+            Row(
+              children: [
+                Text(
+                  'Watch主题',
+                  style: TextStyle(
+                    color: AppColors.textPrimary,
+                    fontSize: 16.dp,
+                    fontWeight: FontWeight.w600,
+                    height: 1.25,
+                  ),
+                ),
+                const Spacer(),
+                Icon(
+                  Icons.chevron_right,
+                  color: AppColors.textTertiary,
+                  size: 20.dp,
                 ),
                 ),
+              ],
+            ),
+            SizedBox(height: 17.dp),
+            SizedBox(
+              height: _itemSize,
+              child: ListView.builder(
+                scrollDirection: Axis.horizontal,
+                clipBehavior: Clip.none,
+                itemCount: officialThemes.length,
+                itemBuilder: (context, index) {
+                  return Transform.translate(
+                      offset: Offset(index == 0 ? 0 : -_overlap * index, 0),
+                      child: _ThemeBubble(
+                        size: _itemSize,
+                        assetPath: officialThemes[index]
+                            .infoList
+                            .firstOrNull
+                            ?.assetPath ??
+                            '',
+                      ));
+                },
+
               ),
               ),
             ),
             ),
-            Image.asset(
-              'assets/images/common/ic_more_gray.png',
-              width: 16,
-              height: 16,
+            SizedBox(height: 10.dp),
+            Text(
+              '支持自定义创作主题哦～',
+              style: TextStyle(
+                color: AppColors.primary,
+                fontSize: 12.dp,
+                fontWeight: FontWeight.w500,
+                height: 1.25,
+              ),
             ),
             ),
           ],
           ],
         ),
         ),
@@ -363,3 +452,29 @@ class _SettingsRow extends StatelessWidget {
     );
     );
   }
   }
 }
 }
+class _ThemeBubble extends StatelessWidget {
+  const _ThemeBubble({required this.size, required this.assetPath});
+
+  final double size;
+  final String assetPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        color: const Color(0xFFEDE8FF),
+        shape: BoxShape.circle,
+        border: Border.all(color: Colors.white, width: 4),
+      ),
+      alignment: Alignment.center,
+      child: Image.asset(
+        assetPath,
+        width: 36,
+        height: 36,
+        fit: BoxFit.fill,
+      ),
+    );
+  }
+}