feat(ui):增加我的-watch主题

@@ -8,8 +8,7 @@
             "name": "Flutter",
             "name": "Flutter",
             "type": "dart",
             "type": "dart",
             "request": "launch",
             "request": "launch",
-            "program": "lib/main.dart",
-            "flutterMode": "profile"
+            "program": "lib/main.dart"
         },
         },
     ]
     ]
 }
 }

@@ -172,7 +172,6 @@
 				2ECF3C9772810B1582D524F4 /* Pods-RunnerTests.release.xcconfig */,
 				2ECF3C9772810B1582D524F4 /* Pods-RunnerTests.release.xcconfig */,
 				5620C49637B3BA24A7B2A069 /* Pods-RunnerTests.profile.xcconfig */,
 				5620C49637B3BA24A7B2A069 /* Pods-RunnerTests.profile.xcconfig */,
 			);
 			);
-			name = Pods;
 			path = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 			sourceTree = "<group>";
 		};
 		};
@@ -524,7 +523,7 @@
 					"$(inherited)",
 					"$(inherited)",
 					"@executable_path/Frameworks",
 					"@executable_path/Frameworks",
 				);
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.luiz.doublefeel;
+				PRODUCT_BUNDLE_IDENTIFIER = com.luiz.doublefeel.flutter;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				SWIFT_VERSION = 5.0;
@@ -707,7 +706,7 @@
 					"$(inherited)",
 					"$(inherited)",
 					"@executable_path/Frameworks",
 					"@executable_path/Frameworks",
 				);
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.luiz.doublefeel;
+				PRODUCT_BUNDLE_IDENTIFIER = com.luiz.doublefeel.flutter;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -730,7 +729,7 @@
 					"$(inherited)",
 					"$(inherited)",
 					"@executable_path/Frameworks",
 					"@executable_path/Frameworks",
 				);
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.luiz.doublefeel;
+				PRODUCT_BUNDLE_IDENTIFIER = com.luiz.doublefeel.flutter;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				SWIFT_VERSION = 5.0;

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <plist version="1.0">
 <dict>
 <dict>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
 	<key>CFBundleDevelopmentRegion</key>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>CFBundleDisplayName</key>
 	<key>CFBundleDisplayName</key>
@@ -24,6 +26,10 @@
 	<string>$(FLUTTER_BUILD_NUMBER)</string>
 	<string>$(FLUTTER_BUILD_NUMBER)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<true/>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>用于选择图片并生成自定义 Watch 表盘主题。</string>
+	<key>UIApplicationSupportsIndirectInputEvents</key>
+	<true/>
 	<key>UILaunchStoryboardName</key>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
 	<key>UIMainStoryboardFile</key>
@@ -41,9 +47,5 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	</array>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-	<key>UIApplicationSupportsIndirectInputEvents</key>
-	<true/>
 </dict>
 </dict>
 </plist>
 </plist>

-import Foundation
 import Flutter
 import Flutter
+import Foundation
+import PhotosUI
+import UIKit
+import Vision
 
 
 private let unsupported = "HealthKit / WearEngine / Alipay are not supported on iOS in this build."
 private let unsupported = "HealthKit / WearEngine / Alipay are not supported on iOS in this build."
 
 
@@ -19,6 +22,12 @@ final class WearEngineHostApiStub: WearEngineHostApi {
   func registerMessageReceiver() throws -> Bool { false }
   func registerMessageReceiver() throws -> Bool { false }
   func sendTextMessage(message: String) throws -> Bool { false }
   func sendTextMessage(message: String) throws -> Bool { false }
   func sendWatchSyncPayload(jsonPayload: String) throws -> Bool { false }
   func sendWatchSyncPayload(jsonPayload: String) throws -> Bool { false }
+  func pickImageAndRemoveBackground() throws -> String? {
+    if #available(iOS 14.0, *) {
+      return WatchThemeImagePicker().pickImageAndRemoveBackground()
+    }
+    return nil
+  }
 }
 }
 
 
 final class AlipayHostApiStub: AlipayHostApi {
 final class AlipayHostApiStub: AlipayHostApi {
@@ -32,3 +41,197 @@ enum NativePigeonRegistrar {
     AlipayHostApiSetup.setUp(binaryMessenger: binaryMessenger, api: AlipayHostApiStub())
     AlipayHostApiSetup.setUp(binaryMessenger: binaryMessenger, api: AlipayHostApiStub())
   }
   }
 }
 }
+
+@available(iOS 14.0, *)
+private final class WatchThemeImagePicker: NSObject, PHPickerViewControllerDelegate {
+  private var continuation: CheckedContinuation<String?, Never>?
+
+  func pickImageAndRemoveBackground() -> String? {
+    if Thread.isMainThread {
+      return runOnMain()
+    }
+
+    var result: String?
+    let semaphore = DispatchSemaphore(value: 0)
+    DispatchQueue.main.async {
+      result = self.runOnMain()
+      semaphore.signal()
+    }
+    semaphore.wait()
+    return result
+  }
+
+  private func runOnMain() -> String? {
+    var configuration = PHPickerConfiguration(photoLibrary: .shared())
+    configuration.filter = .images
+    configuration.selectionLimit = 1
+
+    guard let presenter = UIApplication.shared.topMostViewController else {
+      return nil
+    }
+
+    let picker = PHPickerViewController(configuration: configuration)
+    picker.delegate = self
+
+    return waitForPickerResult(picker: picker, presenter: presenter)
+  }
+
+  private func waitForPickerResult(
+    picker: PHPickerViewController,
+    presenter: UIViewController
+  ) -> String? {
+    var pickedPath: String?
+    let semaphore = DispatchSemaphore(value: 0)
+
+    Task { @MainActor in
+      pickedPath = await withCheckedContinuation { continuation in
+        self.continuation = continuation
+        presenter.present(picker, animated: true)
+      }
+      semaphore.signal()
+    }
+
+    while semaphore.wait(timeout: .now() + 0.05) == .timedOut {
+      RunLoop.main.run(mode: .default, before: Date(timeIntervalSinceNow: 0.05))
+    }
+    return pickedPath
+  }
+
+  nonisolated func picker(
+    _ picker: PHPickerViewController,
+    didFinishPicking results: [PHPickerResult]
+  ) {
+    Task { @MainActor in
+      picker.dismiss(animated: true)
+
+      guard let provider = results.first?.itemProvider,
+            provider.canLoadObject(ofClass: UIImage.self) else {
+        continuation?.resume(returning: nil)
+        continuation = nil
+        return
+      }
+
+      provider.loadObject(ofClass: UIImage.self) { object, _ in
+        Task { @MainActor in
+          guard let image = object as? UIImage else {
+            self.continuation?.resume(returning: nil)
+            self.continuation = nil
+            return
+          }
+          let processed = await WatchThemeImageProcessor.removeBackground(from: image)
+          let path = WatchThemeImageProcessor.savePNG(processed)
+          self.continuation?.resume(returning: path)
+          self.continuation = nil
+        }
+      }
+    }
+  }
+}
+
+private enum WatchThemeImageProcessor {
+  static func removeBackground(from image: UIImage) async -> UIImage {
+    guard #available(iOS 17.0, *),
+          let cgImage = image.normalizedCGImage else {
+      return image
+    }
+
+    return await Task.detached(priority: .userInitiated) {
+      let request = VNGenerateForegroundInstanceMaskRequest()
+      let handler = VNImageRequestHandler(cgImage: cgImage)
+
+      do {
+        try handler.perform([request])
+        guard let observation = request.results?.first else {
+          return image
+        }
+
+        let mask = try observation.generateScaledMaskForImage(
+          forInstances: observation.allInstances,
+          from: handler
+        )
+        return composite(image: cgImage, mask: mask) ?? image
+      } catch {
+        return image
+      }
+    }.value
+  }
+
+  static func savePNG(_ image: UIImage) -> String? {
+    guard let data = image.pngData() else { return nil }
+    let directory = FileManager.default.temporaryDirectory
+      .appendingPathComponent("watch_theme", isDirectory: true)
+
+    do {
+      try FileManager.default.createDirectory(
+        at: directory,
+        withIntermediateDirectories: true
+      )
+      let file = directory.appendingPathComponent("\(UUID().uuidString).png")
+      try data.write(to: file, options: .atomic)
+      return file.path
+    } catch {
+      return nil
+    }
+  }
+
+  private static func composite(image: CGImage, mask: CVPixelBuffer) -> UIImage? {
+    let ciImage = CIImage(cgImage: image)
+    let ciMask = CIImage(cvPixelBuffer: mask)
+    guard let filter = CIFilter(name: "CIBlendWithMask") else {
+      return nil
+    }
+    filter.setValue(ciImage, forKey: kCIInputImageKey)
+    filter.setValue(ciMask, forKey: kCIInputMaskImageKey)
+    filter.setValue(
+      CIImage(color: .clear).cropped(to: ciImage.extent),
+      forKey: kCIInputBackgroundImageKey
+    )
+
+    guard let output = filter.outputImage,
+          let cgOutput = CIContext().createCGImage(output, from: ciImage.extent) else {
+      return nil
+    }
+    return UIImage(cgImage: cgOutput, scale: 1, orientation: .up)
+  }
+}
+
+private extension UIImage {
+  var normalizedCGImage: CGImage? {
+    if imageOrientation == .up, let cgImage {
+      return cgImage
+    }
+
+    let format = UIGraphicsImageRendererFormat.default()
+    format.scale = scale
+    let renderer = UIGraphicsImageRenderer(size: size, format: format)
+    return renderer.image { _ in
+      draw(in: CGRect(origin: .zero, size: size))
+    }.cgImage
+  }
+}
+
+private extension UIApplication {
+  var topMostViewController: UIViewController? {
+    connectedScenes
+      .compactMap { $0 as? UIWindowScene }
+      .flatMap(\.windows)
+      .first { $0.isKeyWindow }?
+      .rootViewController?
+      .topMostPresented
+  }
+}
+
+private extension UIViewController {
+  var topMostPresented: UIViewController {
+    if let presentedViewController {
+      return presentedViewController.topMostPresented
+    }
+    if let navigationController = self as? UINavigationController {
+      return navigationController.visibleViewController?.topMostPresented ?? navigationController
+    }
+    if let tabBarController = self as? UITabBarController {
+      return tabBarController.selectedViewController?.topMostPresented ?? tabBarController
+    }
+    return self
+  }
+}

@@ -188,6 +188,7 @@ protocol WearEngineHostApi {
   func registerMessageReceiver() throws -> Bool
   func registerMessageReceiver() throws -> Bool
   func sendTextMessage(message: String) throws -> Bool
   func sendTextMessage(message: String) throws -> Bool
   func sendWatchSyncPayload(jsonPayload: String) throws -> Bool
   func sendWatchSyncPayload(jsonPayload: String) throws -> Bool
+  func pickImageAndRemoveBackground() throws -> String?
 }
 }
 
 
 /// Generated setup class from Pigeon to handle messages through the `binaryMessenger`.
 /// Generated setup class from Pigeon to handle messages through the `binaryMessenger`.
@@ -265,5 +266,18 @@ class WearEngineHostApiSetup {
     } else {
     } else {
       sendWatchSyncPayloadChannel.setMessageHandler(nil)
       sendWatchSyncPayloadChannel.setMessageHandler(nil)
     }
     }
+    let pickImageAndRemoveBackgroundChannel = FlutterBasicMessageChannel(name: "dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.pickImageAndRemoveBackground\(channelSuffix)", binaryMessenger: binaryMessenger, codec: codec)
+    if let api = api {
+      pickImageAndRemoveBackgroundChannel.setMessageHandler { _, reply in
+        do {
+          let result = try api.pickImageAndRemoveBackground()
+          reply(wrapResult(result))
+        } catch {
+          reply(wrapError(error))
+        }
+      }
+    } else {
+      pickImageAndRemoveBackgroundChannel.setMessageHandler(nil)
+    }
   }
   }
 }
 }

+import 'package:get/get.dart';
+
+import '../controllers/account_settings_controller.dart';
+
+class AccountSettingsBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut<AccountSettingsController>(() => AccountSettingsController());
+  }
+}

+import 'package:doublefeel_flutter/app/routes/app_pages.dart';
+import 'package:doublefeel_flutter/core/services/user_state_service.dart';
+import 'package:doublefeel_flutter/data/local/user_preferences_storage.dart';
+import 'package:get/get.dart';
+
+class AccountSettingsController extends GetxController {
+  final UserPreferencesStorage _userPrefs = Get.find<UserPreferencesStorage>();
+  final UserStateService _userStateService = Get.find<UserStateService>();
+
+  UserPreferencesStorage get userPrefs => _userPrefs;
+
+  void executeBackLogic() {
+    Get.back();
+  }
+
+  Future<void> logout() async {
+    await _userStateService.onLogout();
+    Get.offAllNamed(AppRoutes.initial);
+  }
+
+  void openOnboarding() {
+    Get.offAllNamed(AppRoutes.userOnboarding);
+  }
+}

+import 'package:doublefeel_flutter/core/theme/app_colors.dart';
+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:doublefeel_flutter/data/models/user/user_models.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+
+import '../controllers/account_settings_controller.dart';
+
+class AccountSettingsView extends GetView<AccountSettingsController> {
+  const AccountSettingsView({super.key});
+
+  static const _background = Color(0xFFF5F2FF);
+  static const _danger = Color(0xFFFC4447);
+
+  @override
+  Widget build(BuildContext context) {
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: const SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        statusBarIconBrightness: Brightness.dark,
+        statusBarBrightness: Brightness.light,
+        systemNavigationBarColor: _background,
+        systemNavigationBarIconBrightness: Brightness.dark,
+      ),
+      child: Scaffold(
+        backgroundColor: _background,
+        appBar: AppBar(
+          backgroundColor: Colors.transparent,
+          surfaceTintColor: Colors.transparent,
+          toolbarHeight: 44.dp,
+          centerTitle: true,
+          title: Text(
+            '账号设置',
+            style: TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: 16.dp,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          leading: IconButton(
+            highlightColor: Colors.transparent,
+            splashColor: Colors.transparent,
+            padding: EdgeInsets.zero,
+            onPressed: controller.executeBackLogic,
+            icon: Image.asset(
+              R.assetsImagesNavBackIcon,
+              width: 28.dp,
+              height: 28.dp,
+            ),
+          ),
+        ),
+        body: Obx(() {
+          final user = controller.userPrefs.preferences.value.meUserInfo;
+          return Column(
+            children: [
+              SizedBox(height: 16.dp),
+              _AccountCard(user: user, onLogout: controller.logout),
+              SizedBox(height: 17.dp),
+              GestureDetector(
+                behavior: HitTestBehavior.opaque,
+                onTap: controller.openOnboarding,
+                child: Padding(
+                  padding: EdgeInsets.symmetric(
+                    horizontal: 32.dp,
+                    vertical: 8.dp,
+                  ),
+                  child: Text(
+                    '注销账号',
+                    style: TextStyle(
+                      color: _danger,
+                      fontSize: 12.dp,
+                      fontWeight: FontWeight.w400,
+                      height: 1.25,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          );
+        }),
+      ),
+    );
+  }
+}
+
+class _AccountCard extends StatelessWidget {
+  const _AccountCard({
+    required this.user,
+    required this.onLogout,
+  });
+
+  final UserInfoResponse? user;
+  final VoidCallback onLogout;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 110.dp,
+      margin: EdgeInsets.symmetric(horizontal: 15.dp),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16.dp),
+      ),
+      child: Column(
+        children: [
+          SizedBox(
+            height: 54.dp,
+            child: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 20.dp),
+              child: Row(
+                children: [
+                  Text(
+                    '手机号',
+                    style: TextStyle(
+                      color: AppColors.textPrimary,
+                      fontSize: 14.dp,
+                      fontWeight: FontWeight.w400,
+                      height: 1.25,
+                    ),
+                  ),
+                  const Spacer(),
+                  Text(
+                    _formatPhone(user?.telephone),
+                    style: TextStyle(
+                      color: AppColors.textSecondary,
+                      fontSize: 14.dp,
+                      fontWeight: FontWeight.w400,
+                      height: 1.25,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: 20.dp),
+            child: Divider(
+              height: 1.dp,
+              thickness: 1.dp,
+              color: const Color(0xFFF3F3F3),
+            ),
+          ),
+          Expanded(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: onLogout,
+              child: Center(
+                child: Text(
+                  '退出登录',
+                  style: TextStyle(
+                    color: AppColors.primary,
+                    fontSize: 14.dp,
+                    fontWeight: FontWeight.w500,
+                    height: 1.25,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _formatPhone(String? phone) {
+    final normalized = phone?.replaceAll(' ', '').trim();
+    if (normalized == null || normalized.isEmpty) {
+      return '130 1478 9632';
+    }
+    if (normalized.length == 11) {
+      return '${normalized.substring(0, 3)} '
+          '${normalized.substring(3, 7)} '
+          '${normalized.substring(7)}';
+    }
+    return normalized;
+  }
+}

+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/core/services/user_state_service.dart';
+import 'package:doublefeel_flutter/core/theme/app_colors.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/models/user/user_models.dart';
+import 'package:doublefeel_flutter/r.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:get/get.dart';
 
 
 class MyTab extends StatelessWidget {
 class MyTab extends StatelessWidget {
   const MyTab({super.key});
   const MyTab({super.key});
 
 
+  static const _background = Color(0xFFF5F2FF);
+  static const _proPurple = Color(0xFF916DF5);
+  static const _proGold = Color(0xFFFFDF51);
+
+  @override
+  Widget build(BuildContext context) {
+    final userPrefs = Get.find<UserPreferencesStorage>();
+    return Container(
+      color: _background,
+      child: SafeArea(
+        bottom: false,
+        child: Obx(() {
+          final user = userPrefs.preferences.value.meUserInfo;
+          return ListView(
+            physics: const ClampingScrollPhysics(),
+            padding: EdgeInsets.fromLTRB(16.dp, 59.dp, 16.dp, 112.dp),
+            children: [
+              _ProfileHeader(
+                user: user,
+                onTap: () => Get.toNamed(Routes.ACCOUNT_SETTINGS),
+              ),
+              SizedBox(height: 28.dp),
+              const _PremiumCard(),
+              SizedBox(height: 12.dp),
+              _WatchThemeCard(
+                onTap: () => Get.toNamed(
+                  Routes.WATCH_THEME,
+                  arguments: {'isPremium': false, 'hasCustomThemes': false},
+                ),
+              ),
+              SizedBox(height: 12.dp),
+              _MenuTile(
+                title: '账号信息',
+                onTap: () => Get.toNamed(Routes.ACCOUNT_SETTINGS),
+              ),
+              SizedBox(height: 12.dp),
+              _MenuTile(title: '帮助', onTap: () {}),
+            ],
+          );
+        }),
+      ),
+    );
+  }
+}
+
+class _ProfileHeader extends StatelessWidget {
+  const _ProfileHeader({
+    required this.user,
+    required this.onTap,
+  });
+
+  final UserInfoResponse? user;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: SizedBox(
+        height: 80.dp,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            _Avatar(avatarUrl: user?.avatar),
+            SizedBox(width: 12.dp),
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Row(
+                    children: [
+                      Flexible(
+                        child: Text(
+                          _displayName(user),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style: TextStyle(
+                            color: AppColors.textPrimary,
+                            fontSize: 20.dp,
+                            fontWeight: FontWeight.w500,
+                            height: 1.25,
+                          ),
+                        ),
+                      ),
+                      SizedBox(width: 8.dp),
+                      Icon(
+                        Icons.edit_outlined,
+                        color: const Color(0xFFA084EF),
+                        size: 16.dp,
+                      ),
+                    ],
+                  ),
+                  SizedBox(height: 6.dp),
+                  Text(
+                    'ID：${user?.id ?? 738293}',
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(
+                      color: AppColors.textSecondary,
+                      fontSize: 14.dp,
+                      fontWeight: FontWeight.w400,
+                      height: 1.25,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  String _displayName(UserInfoResponse? user) {
+    final name = user?.nickname?.trim();
+    if (name != null && name.isNotEmpty) {
+      return name;
+    }
+    return '不爱吃热干面';
+  }
+}
+
+class _Avatar extends StatelessWidget {
+  const _Avatar({this.avatarUrl});
+
+  final String? avatarUrl;
+
   @override
   @override
   Widget build(BuildContext context) {
   Widget build(BuildContext context) {
-    return Center(
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
+    final url = avatarUrl?.trim();
+    final imageProvider = url == null || url.isEmpty
+        ? AssetImage(R.assetsImagesMyAvatarDefault) as ImageProvider
+        : NetworkImage(url);
+
+    return SizedBox(
+      width: 80.dp,
+      height: 80.dp,
+      child: Stack(
         children: [
         children: [
-          GestureDetector(
-              onTap: () async {
-                var userStateService = Get.find<UserStateService>();
-                await userStateService.onLogout();
-                Get.offAllNamed(AppRoutes.initial);
-              },
-              child: Container(
-                padding: const EdgeInsets.all(10),
-                margin: const EdgeInsets.only(top: 10),
-                decoration: BoxDecoration(
-                  color: Colors.red,
-                  borderRadius: BorderRadius.circular(10),
+          ClipOval(
+            child: Image(
+              image: imageProvider,
+              width: 80.dp,
+              height: 80.dp,
+              fit: BoxFit.cover,
+            ),
+          ),
+          Positioned(
+            right: 0,
+            bottom: 0,
+            child: Container(
+              width: 24.dp,
+              height: 24.dp,
+              decoration: BoxDecoration(
+                color: const Color(0xFFE8E0FF),
+                shape: BoxShape.circle,
+                border: Border.all(color: MyTab._background, width: 2.dp),
+              ),
+              child: Icon(
+                Icons.photo_camera_outlined,
+                color: const Color(0xFFA084EF),
+                size: 14.dp,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PremiumCard extends StatelessWidget {
+  const _PremiumCard();
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: () => Get.toNamed(Routes.PURCHASE),
+      child: Container(
+        height: 128.dp,
+        decoration: BoxDecoration(
+          color: MyTab._proPurple,
+          borderRadius: BorderRadius.circular(16.dp),
+        ),
+        clipBehavior: Clip.antiAlias,
+        child: Stack(
+          children: [
+            Positioned(
+              right: 0,
+              bottom: 0,
+              child: SizedBox(
+                width: 151.dp,
+                height: 114.dp,
+                child: Stack(
+                  alignment: Alignment.bottomRight,
+                  children: [
+                    Positioned(
+                      left: 0,
+                      bottom: -14.dp,
+                      child: Container(
+                        width: 86.dp,
+                        height: 110.dp,
+                        decoration: const BoxDecoration(
+                          color: Color(0xFFD8CFF7),
+                          borderRadius: BorderRadius.only(
+                            topLeft: Radius.circular(12),
+                            topRight: Radius.circular(12),
+                          ),
+                        ),
+                      ),
+                    ),
+                    Container(
+                      width: 80.dp,
+                      height: 120.dp,
+                      decoration: BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.only(
+                          topLeft: Radius.circular(8.dp),
+                          topRight: Radius.circular(8.dp),
+                        ),
+                      ),
+                    ),
+                  ],
                 ),
                 ),
-                child: const Text('Logout'),
-              )),
-          GestureDetector(
-              onTap: () async {
-                Get.offAllNamed(AppRoutes.userOnboarding);
-              },
-              child: Container(
-                padding: const EdgeInsets.all(10),
-                margin: const EdgeInsets.only(top: 10),
-                decoration: BoxDecoration(
-                  color: Colors.blue,
-                  borderRadius: BorderRadius.circular(10),
+              ),
+            ),
+            Padding(
+              padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 20.dp, 20.dp),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  ShaderMask(
+                    blendMode: BlendMode.srcIn,
+                    shaderCallback: (bounds) => const LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        Color(0xFFFFE8AE),
+                        Color(0xFFFFFAED),
+                        Colors.white,
+                      ],
+                    ).createShader(bounds),
+                    child: Text(
+                      '解锁专业版',
+                      style: TextStyle(
+                        fontSize: 16.dp,
+                        fontWeight: FontWeight.w600,
+                        height: 1.25,
+                      ),
+                    ),
+                  ),
+                  SizedBox(height: 5.dp),
+                  Text(
+                    '开启压力预警与健康陪伴之旅',
+                    style: TextStyle(
+                      color: const Color(0xFFC6B3FF),
+                      fontSize: 12.dp,
+                      fontWeight: FontWeight.w500,
+                      height: 1.25,
+                    ),
+                  ),
+                  const Spacer(),
+                  Container(
+                    height: 32.dp,
+                    width: 129.dp,
+                    alignment: Alignment.center,
+                    decoration: BoxDecoration(
+                      color: MyTab._proGold,
+                      borderRadius: BorderRadius.circular(24.dp),
+                    ),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Icon(
+                          Icons.workspace_premium,
+                          color: AppColors.textPrimary,
+                          size: 16.dp,
+                        ),
+                        SizedBox(width: 4.dp),
+                        Text(
+                          '立即解锁',
+                          style: TextStyle(
+                            color: AppColors.textPrimary,
+                            fontSize: 14.dp,
+                            fontWeight: FontWeight.w500,
+                            height: 1.25,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _WatchThemeCard extends StatelessWidget {
+  const _WatchThemeCard({required this.onTap});
+
+  final VoidCallback onTap;
+
+  final double _itemSize = 64;
+  final double _overlap = 8;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: Container(
+        padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 20.dp, 18.dp),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(16.dp),
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Text(
+                  'Watch主题',
+                  style: TextStyle(
+                    color: AppColors.textPrimary,
+                    fontSize: 16.dp,
+                    fontWeight: FontWeight.w600,
+                    height: 1.25,
+                  ),
                 ),
                 ),
-                child: const Text('Onboarding'),
-              )),
-        ],
+                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 ??
+                            '',
+                      ));
+                },
+
+              ),
+            ),
+            SizedBox(height: 10.dp),
+            Text(
+              '支持自定义创作主题哦～',
+              style: TextStyle(
+                color: AppColors.primary,
+                fontSize: 12.dp,
+                fontWeight: FontWeight.w500,
+                height: 1.25,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+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,
+      ),
+    );
+  }
+}
+
+class _MenuTile extends StatelessWidget {
+  const _MenuTile({
+    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.dp,
+        padding: EdgeInsets.symmetric(horizontal: 20.dp),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(16.dp),
+        ),
+        child: Row(
+          children: [
+            Text(
+              title,
+              style: TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: 14.dp,
+                fontWeight: FontWeight.w400,
+                height: 1.25,
+              ),
+            ),
+            const Spacer(),
+            Icon(
+              Icons.chevron_right,
+              color: AppColors.textTertiary,
+              size: 20.dp,
+            ),
+          ],
+        ),
       ),
       ),
     );
     );
   }
   }

+import 'package:get/get.dart';
+
+import '../controllers/watch_theme_controller.dart';
+
+class WatchThemeBinding extends Bindings {
+  @override
+  void dependencies() {
+    if (!Get.isRegistered<WatchThemeController>()) {
+      Get.lazyPut<WatchThemeController>(() => WatchThemeController());
+    }
+  }
+}

+import 'package:doublefeel_flutter/app/routes/app_pages.dart';
+import 'package:doublefeel_flutter/core/util/app_toast.dart';
+import 'package:doublefeel_flutter/pigeon/wear_engine_api.g.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../models/watch_theme_models.dart';
+
+class WatchThemeController extends GetxController {
+  final selectedOfficialIndex = 0.obs;
+  final hasCustomThemes = false.obs;
+  final isPremium = false.obs;
+  final customThemeName = ''.obs;
+  final agreedToSubmission = true.obs;
+  final customStatusNames = ['状态优秀', '状态正常', '注意压力', '压力过载'].obs;
+  final customImagePaths = RxList<String?>.filled(4, null);
+  late final TextEditingController themeNameController;
+
+  @override
+  void onInit() {
+    super.onInit();
+    themeNameController = TextEditingController();
+    themeNameController.addListener(() {
+      customThemeName.value = themeNameController.text.trim();
+    });
+    final args = Get.arguments;
+    if (args is Map) {
+      hasCustomThemes.value = args['hasCustomThemes'] == true;
+      isPremium.value = args['isPremium'] == true || hasCustomThemes.value;
+    }
+  }
+
+  @override
+  void onClose() {
+    themeNameController.dispose();
+    super.onClose();
+  }
+
+  bool get canSaveCustomTheme =>
+      customThemeName.value.isNotEmpty &&
+      agreedToSubmission.value &&
+      customImagePaths.any((path) => path != null && path.isNotEmpty);
+
+  void executeBackLogic() {
+    Get.back();
+  }
+
+  void selectOfficialTheme(int index) {
+    selectedOfficialIndex.value = index;
+    Get.toNamed(Routes.WATCH_THEME_PREVIEW);
+  }
+
+  void createCustomTheme() {
+    Get.toNamed(Routes.WATCH_THEME_CREATE);
+  }
+
+  void previewCustomTheme() {
+    Get.toNamed(Routes.WATCH_THEME_CUSTOM_PREVIEW);
+  }
+
+  Future<void> pickCustomImage(int index) async {
+    try {
+      final path = await WearEngineHostApi().pickImageAndRemoveBackground();
+      if (path == null || path.isEmpty) {
+        return;
+      }
+      customImagePaths[index] = path;
+    } catch (error) {
+      AppToast.show('图片选择失败');
+    }
+  }
+
+  Future<void> showRenameStatusDialog(int index) async {
+    final result = await Get.dialog<String>(
+      WatchThemeRenameDialog(initialValue: customStatusNames[index]),
+      barrierDismissible: true,
+    );
+    if (result == null || result.trim().isEmpty) {
+      return;
+    }
+    customStatusNames[index] = result.trim();
+  }
+
+  Future<void> handleCreateBack() async {
+    if (!customThemeName.value.isNotEmpty &&
+        !customImagePaths.any((path) => path != null && path.isNotEmpty)) {
+      Get.back();
+      return;
+    }
+    final abandon = await Get.dialog<bool>(
+      const WatchThemeConfirmDialog(
+        title: '放弃编辑',
+        message: '关闭此页面后，已编辑的内容不会保留，是否放弃编辑？',
+        primaryText: '放弃编辑',
+        secondaryText: '继续编辑',
+      ),
+      barrierDismissible: true,
+    );
+    if (abandon == true) {
+      Get.back();
+    }
+  }
+
+  void toggleAgreement() {
+    agreedToSubmission.toggle();
+  }
+
+  void saveCustomTheme() {
+    if (!canSaveCustomTheme) {
+      return;
+    }
+    hasCustomThemes.value = true;
+    isPremium.value = true;
+    previewCustomTheme();
+  }
+
+  Future<void> confirmDeleteCustomTheme() async {
+    final shouldDelete = await Get.dialog<bool>(
+      const WatchThemeConfirmDialog(
+        title: '删除主题',
+        message: '主题删除后无法恢复，确认删除该主题吗？',
+        primaryText: '删除',
+        secondaryText: '取消',
+      ),
+      barrierDismissible: true,
+    );
+    if (shouldDelete == true) {
+      Get.back();
+    }
+  }
+
+  void addWatchFace() {
+    // Hook to NativeHostApiStubs when the native watch-face install flow is ready.
+  }
+}
+
+class WatchThemeRenameDialog extends StatefulWidget {
+  const WatchThemeRenameDialog({super.key, required this.initialValue});
+
+  final String initialValue;
+
+  @override
+  State<WatchThemeRenameDialog> createState() => _WatchThemeRenameDialogState();
+}
+
+class _WatchThemeRenameDialogState extends State<WatchThemeRenameDialog> {
+  late final TextEditingController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.initialValue);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      insetPadding: EdgeInsets.zero,
+      child: Container(
+        width: 300,
+        padding: const EdgeInsets.fromLTRB(24, 24, 24, 20),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(24),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Text(
+              '修改状态名称',
+              style: TextStyle(
+                color: Color(0xFF141414),
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+            const SizedBox(height: 16),
+            ValueListenableBuilder<TextEditingValue>(
+              valueListenable: _controller,
+              builder: (context, value, _) {
+                return Container(
+                  height: 52,
+                  width: 252,
+                  padding: const EdgeInsets.symmetric(horizontal: 22),
+                  decoration: BoxDecoration(
+                    color: const Color(0xFFF3F3F3),
+                    borderRadius: BorderRadius.circular(27),
+                  ),
+                  child: Row(
+                    children: [
+                      Expanded(
+                        child: TextField(
+                          controller: _controller,
+                          maxLength: 4,
+                          decoration: const InputDecoration(
+                            counterText: '',
+                            hintText: '请输入昵称',
+                            hintStyle: TextStyle(color: Color(0xFFB0B0B6)),
+                            border: InputBorder.none,
+                            isCollapsed: true,
+                          ),
+                          style: const TextStyle(fontSize: 16),
+                        ),
+                      ),
+                      Text(
+                        '${value.text.characters.length}/4',
+                        style: const TextStyle(
+                          color: Color(0xFFD9D9D9),
+                          fontSize: 16,
+                        ),
+                      ),
+                    ],
+                  ),
+                );
+              },
+            ),
+            const SizedBox(height: 24),
+            ValueListenableBuilder<TextEditingValue>(
+              valueListenable: _controller,
+              builder: (context, value, _) {
+                final enabled = value.text.trim().isNotEmpty;
+                return Opacity(
+                  opacity: enabled ? 1 : 0.4,
+                  child: GestureDetector(
+                    onTap: enabled ? () => Get.back(result: value.text) : null,
+                    child: Container(
+                      width: 220,
+                      height: 48,
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                        color: const Color(0xFF845EEE),
+                        borderRadius: BorderRadius.circular(24),
+                      ),
+                      child: const Text(
+                        '保存',
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontSize: 14,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ),
+                  ),
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class WatchThemeConfirmDialog extends StatelessWidget {
+  const WatchThemeConfirmDialog({
+    super.key,
+    required this.title,
+    required this.message,
+    required this.primaryText,
+    required this.secondaryText,
+  });
+
+  final String title;
+  final String message;
+  final String primaryText;
+  final String secondaryText;
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      insetPadding: EdgeInsets.zero,
+      child: Container(
+        width: 300,
+        padding: const EdgeInsets.fromLTRB(24, 24, 24, 20),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(24),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              title,
+              style: const TextStyle(
+                color: Color(0xFF141414),
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+            const SizedBox(height: 16),
+            Text(
+              message,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                color: Color(0xFF6E6D80),
+                fontSize: 15,
+                height: 1.35,
+              ),
+            ),
+            const SizedBox(height: 20),
+            GestureDetector(
+              onTap: () => Get.back(result: true),
+              child: Container(
+                width: 220,
+                height: 48,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: const Color(0xFF845EEE),
+                  borderRadius: BorderRadius.circular(24),
+                ),
+                child: Text(
+                  primaryText,
+                  style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 4),
+            GestureDetector(
+              onTap: () => Get.back(result: false),
+              child: SizedBox(
+                width: 220,
+                height: 48,
+                child: Center(
+                  child: Text(
+                    secondaryText,
+                    style: const TextStyle(
+                      color: Color(0xFF6E6D80),
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/foundation.dart';
+
+class WatchThemeItem {
+  const WatchThemeItem({
+    this.id,
+    this.isCustomTheme = false,
+    this.isDefaultCharacter = false,
+    required this.title,
+    required this.infoList,
+  });
+
+  final int? id;
+  final bool isDefaultCharacter;
+  final bool isCustomTheme;
+  final String title;
+  final List<WatchThemeItemInfo> infoList;
+}
+
+class WatchThemeItemInfo {
+  final String title;
+  final String? imgUrl;
+  final String? assetPath;
+
+  WatchThemeItemInfo({required this.title, this.imgUrl, this.assetPath});
+}
+
+final officialThemes = <WatchThemeItem>[
+  WatchThemeItem(
+    title: '默认主题',
+    isDefaultCharacter: true,
+    infoList: [
+      WatchThemeItemInfo(
+        title: '状态优秀',
+        assetPath: 'assets/images/watch_theme/official_default_green.png',
+      ),
+      WatchThemeItemInfo(
+        title: '状态正常',
+        assetPath: 'assets/images/watch_theme/official_default_blue.png',
+      ),
+      WatchThemeItemInfo(
+        title: '注意压力',
+        assetPath: 'assets/images/watch_theme/official_default_orange.png',
+      ),
+      WatchThemeItemInfo(
+        title: '压力过载',
+        assetPath: 'assets/images/watch_theme/official_default_red.png',
+      ),
+    ],
+  ),
+  WatchThemeItem(
+    title: '垂耳粉兔',
+    infoList: [
+      WatchThemeItemInfo(
+        title: '状态优秀',
+        assetPath: 'assets/images/watch_theme/official_rabbit_pink.png',
+      ),
+      WatchThemeItemInfo(
+        title: '状态正常',
+        assetPath: 'assets/images/watch_theme/official_rabbit_pink.png',
+      ),
+      WatchThemeItemInfo(
+        title: '注意压力',
+        assetPath: 'assets/images/watch_theme/official_rabbit_pink.png',
+      ),
+      WatchThemeItemInfo(
+        title: '压力过载',
+        assetPath: 'assets/images/watch_theme/official_rabbit_pink.png',
+      ),
+    ],
+  ),
+  WatchThemeItem(
+    title: '蓝象哥哥',
+    infoList: [
+      WatchThemeItemInfo(
+        title: '状态优秀',
+        assetPath: 'assets/images/watch_theme/official_elephant_blue.png',
+      ),
+      WatchThemeItemInfo(
+        title: '状态正常',
+        assetPath: 'assets/images/watch_theme/official_elephant_blue.png',
+      ),
+      WatchThemeItemInfo(
+        title: '注意压力',
+        assetPath: 'assets/images/watch_theme/official_elephant_blue.png',
+      ),
+      WatchThemeItemInfo(
+        title: '压力过载',
+        assetPath: 'assets/images/watch_theme/official_elephant_blue.png',
+      ),
+    ],
+  ),
+  WatchThemeItem(
+    title: '小狗白白',
+    infoList: [
+      WatchThemeItemInfo(
+        title: '状态优秀',
+        assetPath: 'assets/images/watch_theme/official_dog_white.png',
+      ),
+      WatchThemeItemInfo(
+        title: '状态正常',
+        assetPath: 'assets/images/watch_theme/official_dog_white.png',
+      ),
+      WatchThemeItemInfo(
+        title: '注意压力',
+        assetPath: 'assets/images/watch_theme/official_dog_white.png',
+      ),
+      WatchThemeItemInfo(
+        title: '压力过载',
+        assetPath: 'assets/images/watch_theme/official_dog_white.png',
+      ),
+    ],
+  ),
+  WatchThemeItem(
+    title: '猫猫狗狗',
+    infoList: [
+      WatchThemeItemInfo(
+        title: '状态优秀',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+      WatchThemeItemInfo(
+        title: '状态正常',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+      WatchThemeItemInfo(
+        title: '注意压力',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+      WatchThemeItemInfo(
+        title: '压力过载',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+    ],
+  ),
+];
+
+final customThemes = <WatchThemeItem>[
+  WatchThemeItem(
+    title: '猫猫狗狗-AAA',
+    infoList: [
+      WatchThemeItemInfo(
+        title: '状态优秀',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+      WatchThemeItemInfo(
+        title: '状态正常',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+      WatchThemeItemInfo(
+        title: '注意压力',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+      WatchThemeItemInfo(
+        title: '压力过载',
+        assetPath: 'assets/images/watch_theme/custom_cat_dog.png',
+      ),
+    ],
+  ),
+];

+import 'dart:io';
+
+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+
+import '../controllers/watch_theme_controller.dart';
+import '../widgets/watch_face_preview.dart';
+import '../widgets/watch_theme_colors.dart';
+import '../widgets/watch_theme_nav_bar.dart';
+
+class CreateWatchThemeView extends GetView<WatchThemeController> {
+  const CreateWatchThemeView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: const SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        statusBarIconBrightness: Brightness.dark,
+        statusBarBrightness: Brightness.light,
+        systemNavigationBarColor: WatchThemeColors.background,
+        systemNavigationBarIconBrightness: Brightness.dark,
+      ),
+      child: PopScope(
+        canPop: false,
+        onPopInvokedWithResult: (_, __) => controller.handleCreateBack(),
+        child: Scaffold(
+          backgroundColor: WatchThemeColors.background,
+          body: Stack(
+            children: [
+              const Positioned(
+                left: 0,
+                right: 0,
+                top: 0,
+                height: 300,
+                child: DecoratedBox(
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        WatchThemeColors.gradientTop,
+                        WatchThemeColors.background,
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+              SafeArea(
+                bottom: false,
+                child: Column(
+                  children: [
+                    WatchThemeNavBar(
+                      title: '创作主题',
+                      onBack: controller.handleCreateBack,
+                    ),
+                    Expanded(
+                      child: SingleChildScrollView(
+                        physics: const ClampingScrollPhysics(),
+                        padding: EdgeInsets.only(bottom: 28.dp),
+                        child: Column(
+                          children: [
+                            SizedBox(height: 12.dp),
+                            WatchFacePreview(
+                              faceAsset:
+                                  R.assetsImagesWatchThemeCustomFaceCreate,
+                            ),
+                            SizedBox(height: 20.dp),
+                            _EditorCard(controller: controller),
+                            SizedBox(height: 26.dp),
+                            _AgreementRow(controller: controller),
+                            SizedBox(height: 18.dp),
+                            _SaveButton(controller: controller),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _EditorCard extends StatelessWidget {
+  const _EditorCard({required this.controller});
+
+  final WatchThemeController controller;
+
+  static const _statusColors = [
+    WatchThemeColors.excellent,
+    WatchThemeColors.normal,
+    WatchThemeColors.stress,
+    WatchThemeColors.overload,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 16.dp),
+      padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 20.dp, 20.dp),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16.dp),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            '自定义主题',
+            style: TextStyle(
+              color: WatchThemeColors.textPrimary,
+              fontSize: 16.dp,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          SizedBox(height: 4.dp),
+          Text(
+            '支持上传图片、视频、Live图、Gif、最长5秒',
+            style: TextStyle(
+              color: WatchThemeColors.textSecondary,
+              fontSize: 12.dp,
+            ),
+          ),
+          SizedBox(height: 14.dp),
+          Obx(
+            () => GridView.builder(
+              shrinkWrap: true,
+              padding: EdgeInsets.zero,
+              physics: const NeverScrollableScrollPhysics(),
+              itemCount: 4,
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 2,
+                crossAxisSpacing: 23.dp,
+                mainAxisSpacing: 14.dp,
+                mainAxisExtent: 170.dp,
+              ),
+              itemBuilder: (context, index) {
+                return _UploadTile(
+                  index: index,
+                  color: _statusColors[index],
+                  label: controller.customStatusNames[index],
+                  path: controller.customImagePaths[index],
+                  onPick: () => controller.pickCustomImage(index),
+                  onRename: () => controller.showRenameStatusDialog(index),
+                );
+              },
+            ),
+          ),
+          SizedBox(height: 14.dp),
+          Text(
+            '主题名称',
+            style: TextStyle(
+              color: WatchThemeColors.textPrimary,
+              fontSize: 16.dp,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          SizedBox(height: 14.dp),
+          Container(
+            height: 52.dp,
+            padding: EdgeInsets.symmetric(horizontal: 26.dp),
+            decoration: BoxDecoration(
+              color: WatchThemeColors.background,
+              borderRadius: BorderRadius.circular(16.dp),
+            ),
+            alignment: Alignment.center,
+            child: TextField(
+              controller: controller.themeNameController,
+              maxLength: 10,
+              decoration: InputDecoration(
+                counterText: '',
+                hintText: '最多10个字符',
+                hintStyle: TextStyle(
+                  color: WatchThemeColors.textTertiary,
+                  fontSize: 14.dp,
+                ),
+                border: InputBorder.none,
+                isCollapsed: true,
+              ),
+              style: TextStyle(
+                color: WatchThemeColors.textPrimary,
+                fontSize: 14.dp,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _UploadTile extends StatelessWidget {
+  const _UploadTile({
+    required this.index,
+    required this.color,
+    required this.label,
+    required this.path,
+    required this.onPick,
+    required this.onRename,
+  });
+
+  final int index;
+  final Color color;
+  final String label;
+  final String? path;
+  final VoidCallback onPick;
+  final VoidCallback onRename;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: onPick,
+          child: Container(
+            width: 140.dp,
+            height: 140.dp,
+            decoration: BoxDecoration(
+              color: WatchThemeColors.background,
+              borderRadius: BorderRadius.circular(18.667.dp),
+            ),
+            clipBehavior: Clip.antiAlias,
+            child: path == null
+                ? Icon(Icons.add, size: 34.dp, color: color)
+                : Image.file(File(path!), fit: BoxFit.cover),
+          ),
+        ),
+        SizedBox(height: 10.dp),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              label,
+              style: TextStyle(
+                color: WatchThemeColors.textPrimary,
+                fontSize: 12.dp,
+              ),
+            ),
+            SizedBox(width: 4.dp),
+            GestureDetector(
+              onTap: onRename,
+              child: Icon(
+                Icons.edit_outlined,
+                color: const Color(0xFFA084EF),
+                size: 14.dp,
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class _AgreementRow extends StatelessWidget {
+  const _AgreementRow({required this.controller});
+
+  final WatchThemeController controller;
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(
+      () => GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: controller.toggleAgreement,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              width: 16.dp,
+              height: 16.dp,
+              decoration: BoxDecoration(
+                color: controller.agreedToSubmission.value
+                    ? WatchThemeColors.brand
+                    : Colors.transparent,
+                border: Border.all(color: WatchThemeColors.brand, width: 1.dp),
+                shape: BoxShape.circle,
+              ),
+              child: controller.agreedToSubmission.value
+                  ? Icon(Icons.check, color: Colors.white, size: 12.dp)
+                  : null,
+            ),
+            SizedBox(width: 4.dp),
+            Text(
+              '我已阅读并同意用户投稿协议',
+              style: TextStyle(
+                color: WatchThemeColors.textSecondary,
+                fontSize: 12.dp,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SaveButton extends StatelessWidget {
+  const _SaveButton({required this.controller});
+
+  final WatchThemeController controller;
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(
+      () {
+        final enabled = controller.canSaveCustomTheme;
+        return Opacity(
+          opacity: enabled ? 1 : 0.4,
+          child: GestureDetector(
+            onTap: enabled ? controller.saveCustomTheme : null,
+            child: Container(
+              width: 280.dp,
+              height: 48.dp,
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: WatchThemeColors.brand,
+                borderRadius: BorderRadius.circular(24.dp),
+              ),
+              child: Text(
+                '保存主题',
+                style: TextStyle(
+                  color: Colors.white,
+                  fontSize: 16.dp,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+
+import '../controllers/watch_theme_controller.dart';
+import '../widgets/watch_face_preview.dart';
+import '../widgets/watch_theme_bottom_actions.dart';
+import '../widgets/watch_theme_colors.dart';
+import '../widgets/watch_theme_header.dart';
+import '../widgets/watch_theme_nav_bar.dart';
+import '../widgets/watch_theme_section_card.dart';
+
+class CustomWatchThemePreviewView extends GetView<WatchThemeController> {
+  const CustomWatchThemePreviewView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: const SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        statusBarIconBrightness: Brightness.dark,
+        statusBarBrightness: Brightness.light,
+        systemNavigationBarColor: WatchThemeColors.background,
+        systemNavigationBarIconBrightness: Brightness.dark,
+      ),
+      child: Scaffold(
+        backgroundColor: WatchThemeColors.background,
+        body: Stack(
+          children: [
+            const Positioned(
+              left: 0,
+              right: 0,
+              top: 0,
+              height: 300,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      WatchThemeColors.gradientTop,
+                      WatchThemeColors.background,
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            SafeArea(
+              bottom: false,
+              child: Column(
+                children: [
+                  WatchThemeNavBar(
+                    title: '预览',
+                    onBack: controller.executeBackLogic,
+                    trailing: GestureDetector(
+                      onTap: controller.confirmDeleteCustomTheme,
+                      child: Text(
+                        '删除',
+                        style: TextStyle(
+                          color: const Color(0xFFFC4447),
+                          fontSize: 14.dp,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    child: SingleChildScrollView(
+                      physics: const ClampingScrollPhysics(),
+                      padding: EdgeInsets.only(bottom: 96.dp),
+                      child: Obx(
+                        () => Column(
+                          children: [
+                            WatchThemeHeader(
+                              title: controller.customThemeName.value.isEmpty
+                                  ? '默认主题'
+                                  : controller.customThemeName.value,
+                              faceAsset:
+                                  R.assetsImagesWatchThemeCustomFacePreview,
+                            ),
+                            SizedBox(height: 26.dp),
+                            _CustomStatusPreviewCard(controller: controller),
+                            SizedBox(height: 12.dp),
+                            const _CustomDialPreviewCard(),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+        bottomNavigationBar: WatchThemeBottomActions(
+          onAddTap: controller.addWatchFace,
+          secondaryLabel: '立即使用',
+          onSecondaryTap: controller.addWatchFace,
+          secondaryDisabled: false,
+        ),
+      ),
+    );
+  }
+}
+
+class _CustomStatusPreviewCard extends StatelessWidget {
+  const _CustomStatusPreviewCard({required this.controller});
+
+  final WatchThemeController controller;
+
+  static final _assets = [
+    R.assetsImagesWatchThemeCustomStatusExcellent,
+    R.assetsImagesWatchThemeCustomStatusNormal,
+    R.assetsImagesWatchThemeCustomStatusStress,
+    R.assetsImagesWatchThemeCustomStatusOverload,
+  ];
+
+  static const _colors = [
+    WatchThemeColors.excellent,
+    WatchThemeColors.normal,
+    WatchThemeColors.stress,
+    WatchThemeColors.overload,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return WatchThemeSectionCard(
+      padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 20.dp, 17.dp),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const WatchThemeSectionTitle('状态预览'),
+          SizedBox(height: 24.dp),
+          Obx(
+            () => Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                for (var i = 0; i < 4; i++)
+                  Column(
+                    children: [
+                      ClipRRect(
+                        borderRadius: BorderRadius.circular(16.dp),
+                        child: Image.asset(
+                          _assets[i],
+                          width: 60.dp,
+                          height: 60.dp,
+                          fit: BoxFit.cover,
+                        ),
+                      ),
+                      SizedBox(height: 4.dp),
+                      Text(
+                        controller.customStatusNames[i],
+                        style: TextStyle(
+                          color: _colors[i],
+                          fontSize: 12.dp,
+                        ),
+                      ),
+                    ],
+                  ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _CustomDialPreviewCard extends StatelessWidget {
+  const _CustomDialPreviewCard();
+
+  @override
+  Widget build(BuildContext context) {
+    return WatchThemeSectionCard(
+      padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 0, 27.dp),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const WatchThemeSectionTitle('表盘预览'),
+          SizedBox(height: 16.dp),
+          Row(
+            children: [
+              WatchFacePreview(
+                width: 114,
+                height: 136,
+                faceAsset: R.assetsImagesWatchThemeCustomPreviewAlt,
+              ),
+              SizedBox(width: 18.dp),
+              WatchFacePreview(
+                width: 114,
+                height: 136,
+                faceAsset: R.assetsImagesWatchThemeCustomFacePreview,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+
+import '../controllers/watch_theme_controller.dart';
+import '../widgets/dial_preview_card.dart';
+import '../widgets/status_preview_card.dart';
+import '../widgets/watch_theme_bottom_actions.dart';
+import '../widgets/watch_theme_colors.dart';
+import '../widgets/watch_theme_header.dart';
+import '../widgets/watch_theme_nav_bar.dart';
+
+class WatchThemePreviewView extends GetView<WatchThemeController> {
+  const WatchThemePreviewView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: const SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        statusBarIconBrightness: Brightness.dark,
+        statusBarBrightness: Brightness.light,
+        systemNavigationBarColor: WatchThemeColors.background,
+        systemNavigationBarIconBrightness: Brightness.dark,
+      ),
+      child: Scaffold(
+        backgroundColor: WatchThemeColors.background,
+        body: Stack(
+          children: [
+            const Positioned(
+              left: 0,
+              right: 0,
+              top: 0,
+              height: 300,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      WatchThemeColors.gradientTop,
+                      WatchThemeColors.background,
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            SafeArea(
+              bottom: false,
+              child: Column(
+                children: [
+                  WatchThemeNavBar(
+                    title: '预览',
+                    onBack: controller.executeBackLogic,
+                  ),
+                  Expanded(
+                    child: SingleChildScrollView(
+                      physics: const ClampingScrollPhysics(),
+                      padding: const EdgeInsets.only(bottom: 96),
+                      child: Column(
+                        children: const [
+                          WatchThemeHeader(),
+                          SizedBox(height: 26),
+                          StatusPreviewCard(),
+                          SizedBox(height: 12),
+                          DialPreviewCard(),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+        bottomNavigationBar: WatchThemeBottomActions(
+          onAddTap: controller.addWatchFace,
+        ),
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/app/modules/watch_theme/models/watch_theme_models.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+
+import '../controllers/watch_theme_controller.dart';
+import '../widgets/custom_theme_card.dart';
+import '../widgets/official_theme_grid.dart';
+import '../widgets/watch_theme_colors.dart';
+import '../widgets/watch_theme_header.dart';
+import '../widgets/watch_theme_nav_bar.dart';
+
+class WatchThemeView extends GetView<WatchThemeController> {
+  const WatchThemeView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: const SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        statusBarIconBrightness: Brightness.dark,
+        statusBarBrightness: Brightness.light,
+        systemNavigationBarColor: WatchThemeColors.background,
+        systemNavigationBarIconBrightness: Brightness.dark,
+      ),
+      child: Scaffold(
+        backgroundColor: WatchThemeColors.background,
+        body: Stack(
+          children: [
+            const Positioned(
+              left: 0,
+              right: 0,
+              top: 0,
+              height: 300,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      WatchThemeColors.gradientTop,
+                      WatchThemeColors.background,
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            SafeArea(
+              bottom: false,
+              child: Column(
+                children: [
+                  WatchThemeNavBar(
+                    title: 'Watch主题',
+                    onBack: controller.executeBackLogic,
+                  ),
+                  Expanded(
+                    child: Obx(
+                      () => SingleChildScrollView(
+                        physics: const BouncingScrollPhysics(),
+                        padding: const EdgeInsets.only(bottom: 24),
+                        child: Column(
+                          children: [
+                            const WatchThemeHeader(),
+                            const SizedBox(height: 26),
+                            OfficialThemeGrid(
+                              themes: officialThemes,
+                              selectedIndex:
+                                  controller.selectedOfficialIndex.value,
+                              onThemeTap: controller.selectOfficialTheme,
+                            ),
+                            const SizedBox(height: 12),
+                            CustomThemeCard(
+                              isPremium: controller.isPremium.value,
+                              hasCustomThemes: controller.hasCustomThemes.value,
+                              customThemes: customThemes,
+                              onCreateTap: controller.createCustomTheme,
+                              onThemeTap: (_) =>
+                                  controller.previewCustomTheme(),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import '../models/watch_theme_models.dart';
+import 'watch_theme_character_avatar.dart';
+import 'watch_theme_colors.dart';
+import 'watch_theme_pro_badge.dart';
+import 'watch_theme_section_card.dart';
+
+class CustomThemeCard extends StatelessWidget {
+  const CustomThemeCard({
+    super.key,
+    required this.isPremium,
+    required this.hasCustomThemes,
+    required this.customThemes,
+    required this.onCreateTap,
+    this.onThemeTap,
+  });
+
+  final bool isPremium;
+  final bool hasCustomThemes;
+  final List<WatchThemeItem> customThemes;
+  final VoidCallback onCreateTap;
+  final ValueChanged<WatchThemeItem>? onThemeTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return WatchThemeSectionCard(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          WatchThemeSectionTitle(
+            '自定义主题',
+            trailing: isPremium ? null : const WatchThemeProBadge(),
+          ),
+          SizedBox(height: 4.dp),
+          Text(
+            '用创意记录每一次情绪波动，打造懂你的专属表盘吧～',
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              color: WatchThemeColors.textSecondary,
+              fontSize: 12.dp,
+              fontWeight: FontWeight.w400,
+              height: 1.25,
+            ),
+          ),
+          SizedBox(height: 14.dp),
+          _CreateThemeButton(onTap: onCreateTap),
+          if (hasCustomThemes) ...[
+            SizedBox(height: 12.dp),
+            Row(
+              children: [
+                for (var index = 0; index < customThemes.length; index++) ...[
+                  _CustomThemeItem(
+                    item: customThemes[index],
+                    onTap: onThemeTap == null
+                        ? null
+                        : () => onThemeTap!(customThemes[index]),
+                  ),
+                  if (index != customThemes.length - 1) SizedBox(width: 20.dp),
+                ],
+              ],
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+class _CreateThemeButton extends StatelessWidget {
+  const _CreateThemeButton({required this.onTap});
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: Container(
+        height: 48.dp,
+        padding: EdgeInsets.symmetric(horizontal: 20.dp),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(12.dp),
+          gradient: const LinearGradient(
+            begin: Alignment.centerLeft,
+            end: Alignment.centerRight,
+            colors: [
+              Color(0xFFFFFFD0),
+              Color(0xFFFFD1DB),
+              Color(0xFFF0CDFF),
+              Color(0xFFCFE8FF),
+            ],
+            stops: [0, 0.4, 0.7, 1],
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(
+              Icons.palette_outlined,
+              color: WatchThemeColors.overload,
+              size: 28.dp,
+            ),
+            SizedBox(width: 8.dp),
+            Text(
+              '创作主题',
+              style: TextStyle(
+                color: WatchThemeColors.textPrimary,
+                fontSize: 14.dp,
+                fontWeight: FontWeight.w500,
+                height: 1.25,
+              ),
+            ),
+            const Spacer(),
+            Icon(
+              Icons.chevron_right,
+              color: WatchThemeColors.textSecondary,
+              size: 20.dp,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _CustomThemeItem extends StatelessWidget {
+  const _CustomThemeItem({required this.item, this.onTap});
+
+  final WatchThemeItem item;
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: SizedBox(
+        width: 88.dp,
+        child: Column(
+          children: [
+            WatchThemeCharacterAvatar(
+              size: 88,
+              assetPath: item.infoList.firstOrNull?.assetPath,
+              empty: item.infoList.firstOrNull?.assetPath == null,
+            ),
+            SizedBox(height: 8.dp),
+            Text(
+              item.title,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(
+                color: WatchThemeColors.textPrimary,
+                fontSize: 12.dp,
+                fontWeight: FontWeight.w400,
+                height: 1.25,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_face_preview.dart';
+import 'watch_theme_section_card.dart';
+
+class DialPreviewCard extends StatelessWidget {
+  const DialPreviewCard({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return WatchThemeSectionCard(
+      padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 0, 27.dp),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const WatchThemeSectionTitle('表盘预览'),
+          SizedBox(height: 16.dp),
+          SizedBox(
+            height: 136.dp,
+            child: ListView.separated(
+              padding: EdgeInsets.zero,
+              scrollDirection: Axis.horizontal,
+              physics: const ClampingScrollPhysics(),
+              itemBuilder: (context, index) {
+                return WatchFacePreview(
+                  width: 114,
+                  height: 136,
+                  faceAsset: index == 0
+                      ? R.assetsImagesWatchThemeFacePreviewAlt
+                      : R.assetsImagesWatchThemeFaceDefault,
+                );
+              },
+              separatorBuilder: (context, index) => SizedBox(width: 18.dp),
+              itemCount: 2,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import '../models/watch_theme_models.dart';
+import 'watch_theme_character_avatar.dart';
+import 'watch_theme_colors.dart';
+import 'watch_theme_section_card.dart';
+
+class OfficialThemeGrid extends StatelessWidget {
+  const OfficialThemeGrid({
+    super.key,
+    required this.themes,
+    required this.selectedIndex,
+    required this.onThemeTap,
+  });
+
+  final List<WatchThemeItem> themes;
+  final int selectedIndex;
+  final ValueChanged<int> onThemeTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return WatchThemeSectionCard(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const WatchThemeSectionTitle('官方主题'),
+          SizedBox(height: 22.dp),
+          GridView.builder(
+            shrinkWrap: true,
+            padding: EdgeInsets.zero,
+            physics: const NeverScrollableScrollPhysics(),
+            itemCount: themes.length,
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 3,
+              mainAxisSpacing: 21.dp,
+              crossAxisSpacing: 19.dp,
+              mainAxisExtent: 106.dp,
+            ),
+            itemBuilder: (context, index) {
+              final theme = themes[index];
+              return GestureDetector(
+                behavior: HitTestBehavior.opaque,
+                onTap: () => onThemeTap(index),
+                child: Column(
+                  children: [
+                    WatchThemeCharacterAvatar(
+                      size: 88,
+                      selected: index == selectedIndex,
+                      useDefaultCharacter: theme.isDefaultCharacter,
+                      assetPath: theme.infoList.firstOrNull?.assetPath,
+                    ),
+                    SizedBox(height: 8.dp),
+                    Text(
+                      theme.title,
+                      textAlign: TextAlign.center,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                        color: WatchThemeColors.textPrimary,
+                        fontSize: 12.dp,
+                        fontWeight: FontWeight.w400,
+                        height: 1.25,
+                      ),
+                    ),
+                  ],
+                ),
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_theme_character_avatar.dart';
+import 'watch_theme_colors.dart';
+import 'watch_theme_section_card.dart';
+
+class StatusPreviewCard extends StatelessWidget {
+  const StatusPreviewCard({super.key});
+
+  static const _items = [
+    _StatusPreviewItem('状态优秀', WatchThemeColors.excellent,
+        icon: 'assets/images/watch_theme/official_default_green.png'),
+    _StatusPreviewItem('状态正常', WatchThemeColors.normal,
+        icon: 'assets/images/watch_theme/official_default_blue.png'),
+    _StatusPreviewItem('注意压力', WatchThemeColors.stress,
+        icon: 'assets/images/watch_theme/official_default_orange.png'),
+    _StatusPreviewItem('压力过载', WatchThemeColors.overload,
+        icon: 'assets/images/watch_theme/official_default_red.png'),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return WatchThemeSectionCard(
+      padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 20.dp, 17.dp),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const WatchThemeSectionTitle('状态预览'),
+          SizedBox(height: 24.dp),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              for (final item in _items)
+                Column(
+                  children: [
+                    WatchThemeCharacterAvatar(
+                      size: 60,
+                      useDefaultCharacter: true,
+                      backgroundColor: item.color,
+                      assetPath: item.icon,
+                    ),
+                    SizedBox(height: 4.dp),
+                    Text(
+                      item.title,
+                      style: TextStyle(
+                        color: item.color,
+                        fontSize: 12.dp,
+                        fontWeight: FontWeight.w400,
+                        height: 1.25,
+                      ),
+                    ),
+                  ],
+                ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _StatusPreviewItem {
+  const _StatusPreviewItem(this.title, this.color, {required this.icon});
+
+  final String title;
+  final Color color;
+  final String icon;
+}

+import 'dart:io';
+
+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_theme_colors.dart';
+
+class WatchFacePreview extends StatelessWidget {
+  const WatchFacePreview({
+    super.key,
+    this.width = 134,
+    this.height = 160,
+    this.faceAsset,
+    this.faceFilePath,
+  });
+
+  final double width;
+  final double height;
+  final String? faceAsset;
+  final String? faceFilePath;
+
+  @override
+  Widget build(BuildContext context) {
+    final w = width.dp;
+    final h = height.dp;
+    final inset = 6.dp;
+    final knobWidth = (width * 0.067).dp;
+    final knobHeight = (height * 0.156).dp;
+
+    return SizedBox(
+      width: w + knobWidth,
+      height: h,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned(
+            left: 0,
+            top: 0,
+            child: Container(
+              width: w,
+              height: h,
+              decoration: BoxDecoration(
+                color: WatchThemeColors.watchShell,
+                borderRadius: BorderRadius.circular((width * 0.239).dp),
+              ),
+            ),
+          ),
+          Positioned(
+            left: inset,
+            top: inset,
+            child: Container(
+              width: w - inset * 2,
+              height: h - inset * 2,
+              decoration: BoxDecoration(
+                color: WatchThemeColors.watchScreen,
+                borderRadius: BorderRadius.circular((width * 0.209).dp),
+              ),
+              clipBehavior: Clip.antiAlias,
+              child: _buildFaceImage(),
+            ),
+          ),
+          Positioned(
+            left: w - 4.dp,
+            top: (height * 0.2375).dp,
+            child: Container(
+              width: knobWidth,
+              height: knobHeight,
+              decoration: BoxDecoration(
+                color: WatchThemeColors.watchShell,
+                borderRadius: BorderRadius.horizontal(
+                  right: Radius.circular(5.dp),
+                ),
+              ),
+            ),
+          ),
+          Positioned(
+            left: w - 1.dp,
+            top: (height * 0.5125).dp,
+            child: Container(
+              width: 3.dp,
+              height: (height * 0.256).dp,
+              decoration: BoxDecoration(
+                color: WatchThemeColors.watchShell,
+                borderRadius: BorderRadius.horizontal(
+                  right: Radius.circular(2.dp),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildFaceImage() {
+    if (faceFilePath != null && faceFilePath!.isNotEmpty) {
+      return Image.file(File(faceFilePath!), fit: BoxFit.cover);
+    }
+    return Image.asset(
+      faceAsset ?? R.assetsImagesWatchThemeFaceDefault,
+      fit: BoxFit.cover,
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_theme_colors.dart';
+
+class WatchThemeBottomActions extends StatelessWidget {
+  const WatchThemeBottomActions({
+    super.key,
+    required this.onAddTap,
+    this.secondaryLabel = '正在使用',
+    this.onSecondaryTap,
+    this.secondaryDisabled = true,
+  });
+
+  final VoidCallback onAddTap;
+  final String secondaryLabel;
+  final VoidCallback? onSecondaryTap;
+  final bool secondaryDisabled;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      top: false,
+      child: Container(
+        padding: EdgeInsets.fromLTRB(21.dp, 8.dp, 21.dp, 7.dp),
+        color: WatchThemeColors.background,
+        child: Row(
+          children: [
+            Expanded(
+              child: _ActionButton(
+                label: '添加表盘',
+                color: WatchThemeColors.brand,
+                textColor: Colors.white,
+                onTap: onAddTap,
+              ),
+            ),
+            SizedBox(width: 12.dp),
+            Expanded(
+              child: _ActionButton(
+                label: secondaryLabel,
+                color: secondaryDisabled
+                    ? WatchThemeColors.brand.withValues(alpha: 0.4)
+                    : WatchThemeColors.brand,
+                textColor:
+                    secondaryDisabled ? WatchThemeColors.brand : Colors.white,
+                onTap: onSecondaryTap,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _ActionButton extends StatelessWidget {
+  const _ActionButton({
+    required this.label,
+    required this.color,
+    required this.textColor,
+    required this.onTap,
+  });
+
+  final String label;
+  final Color color;
+  final Color textColor;
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: Container(
+        height: 48.dp,
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          color: color,
+          borderRadius: BorderRadius.circular(24.dp),
+        ),
+        child: Text(
+          label,
+          style: TextStyle(
+            color: textColor,
+            fontSize: 16.dp,
+            fontWeight: FontWeight.w600,
+            height: 1.25,
+          ),
+        ),
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_theme_colors.dart';
+
+class WatchThemeCharacterAvatar extends StatelessWidget {
+  const WatchThemeCharacterAvatar({
+    super.key,
+    required this.size,
+    this.assetPath,
+    this.selected = false,
+    this.empty = false,
+    this.useDefaultCharacter = false,
+    this.backgroundColor = Colors.transparent,
+  });
+
+  final double size;
+  final String? assetPath;
+  final bool selected;
+  final bool empty;
+  final bool useDefaultCharacter;
+  final Color backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final avatarSize = size.dp;
+    return SizedBox(
+      width: avatarSize,
+      height: avatarSize,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Container(
+            width: avatarSize,
+            height: avatarSize,
+            decoration: BoxDecoration(
+              color: backgroundColor,
+              shape: BoxShape.circle,
+              border: selected
+                  ? Border.all(color: WatchThemeColors.brand, width: 2.dp)
+                  : null,
+            ),
+            alignment: Alignment.center,
+            child: empty
+                ? const SizedBox.shrink()
+                : useDefaultCharacter
+                    ? assetPath == null
+                        ? CustomPaint(
+                            size: Size(avatarSize * 0.68, avatarSize * 0.68),
+                            painter: const _DefaultCharacterPainter(),
+                          )
+                        : Image.asset(
+                            assetPath!,
+                            width: avatarSize * 0.82,
+                            height: avatarSize * 0.82,
+                            fit: BoxFit.contain,
+                          )
+                    : Image.asset(
+                        assetPath!,
+                        width: avatarSize * 0.82,
+                        height: avatarSize * 0.82,
+                        fit: BoxFit.contain,
+                      ),
+          ),
+          if (selected)
+            Positioned(
+              right: -1.dp,
+              bottom: 9.dp,
+              child: Container(
+                width: 16.dp,
+                height: 16.dp,
+                decoration: const BoxDecoration(
+                  color: WatchThemeColors.brand,
+                  shape: BoxShape.circle,
+                ),
+                child: Icon(
+                  Icons.check,
+                  color: Colors.white,
+                  size: 12.dp,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _DefaultCharacterPainter extends CustomPainter {
+  const _DefaultCharacterPainter();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final body = Paint()..color = const Color(0xFF3DD79E);
+    final blush = Paint()..color = const Color(0xFFFF9A6E);
+    final dark = Paint()
+      ..color = const Color(0xFF153D2A)
+      ..strokeWidth = size.width * 0.045
+      ..strokeCap = StrokeCap.round
+      ..style = PaintingStyle.stroke;
+
+    final path = Path()
+      ..moveTo(size.width * 0.32, size.height * 0.08)
+      ..cubicTo(size.width * 0.74, size.height * 0.02, size.width * 0.92,
+          size.height * 0.35, size.width * 0.82, size.height * 0.76)
+      ..cubicTo(size.width * 0.62, size.height * 1.03, size.width * 0.12,
+          size.height * 0.92, size.width * 0.10, size.height * 0.52)
+      ..cubicTo(size.width * 0.08, size.height * 0.28, size.width * 0.16,
+          size.height * 0.15, size.width * 0.32, size.height * 0.08)
+      ..close();
+    canvas.drawPath(path, body);
+    canvas.drawCircle(
+      Offset(size.width * 0.54, size.height * 0.55),
+      size.width * 0.09,
+      blush,
+    );
+    canvas.drawLine(
+      Offset(size.width * 0.28, size.height * 0.38),
+      Offset(size.width * 0.38, size.height * 0.36),
+      dark,
+    );
+    canvas.drawLine(
+      Offset(size.width * 0.59, size.height * 0.34),
+      Offset(size.width * 0.68, size.height * 0.31),
+      dark,
+    );
+    canvas.drawArc(
+      Rect.fromCenter(
+        center: Offset(size.width * 0.50, size.height * 0.55),
+        width: size.width * 0.22,
+        height: size.height * 0.14,
+      ),
+      0.2,
+      2.2,
+      false,
+      dark,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}

+import 'package:flutter/material.dart';
+
+class WatchThemeColors {
+  WatchThemeColors._();
+
+  static const background = Color(0xFFF5F2FF);
+  static const gradientTop = Color(0xFFC5B0FF);
+  static const textPrimary = Color(0xFF0F0F11);
+  static const textSecondary = Color(0xFF78787D);
+  static const textTertiary = Color(0xFFB0B0B6);
+  static const brand = Color(0xFF845EEE);
+  static const card = Colors.white;
+  static const avatarBackground = Color(0xFFF4F1FE);
+  static const watchShell = Color(0xFF9388B3);
+  static const watchScreen = Color(0xFF0F0F11);
+  static const pro = Color(0xFFFFDF51);
+  static const excellent = Color(0xFF3BD49D);
+  static const normal = Color(0xFF7B9BFB);
+  static const stress = Color(0xFFFF9A6E);
+  static const overload = Color(0xFFFF5279);
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_face_preview.dart';
+import 'watch_theme_colors.dart';
+
+class WatchThemeHeader extends StatelessWidget {
+  const WatchThemeHeader({
+    super.key,
+    this.title = '默认主题',
+    this.faceAsset,
+    this.faceFilePath,
+  });
+
+  final String title;
+  final String? faceAsset;
+  final String? faceFilePath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SizedBox(height: 12.dp),
+        Center(
+          child: WatchFacePreview(
+            faceAsset: faceAsset,
+            faceFilePath: faceFilePath,
+          ),
+        ),
+        SizedBox(height: 12.dp),
+        Text(
+          title,
+          style: TextStyle(
+            color: WatchThemeColors.textPrimary,
+            fontSize: 20.dp,
+            fontWeight: FontWeight.w600,
+            height: 1.25,
+          ),
+        ),
+      ],
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:doublefeel_flutter/r.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import 'watch_theme_colors.dart';
+
+class WatchThemeNavBar extends StatelessWidget {
+  const WatchThemeNavBar({
+    super.key,
+    required this.title,
+    required this.onBack,
+    this.trailing,
+  });
+
+  final String title;
+  final VoidCallback onBack;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 44.dp,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          IconButton(
+            highlightColor: Colors.transparent,
+            splashColor: Colors.transparent,
+            padding: EdgeInsets.zero,
+            onPressed: onBack,
+            icon: Image.asset(
+              R.assetsImagesNavBackIcon,
+              width: 28.dp,
+              height: 28.dp,
+            ),
+          ),
+          Text(
+            title,
+            style: TextStyle(
+              color: WatchThemeColors.textPrimary,
+              fontSize: 16.dp,
+              fontWeight: FontWeight.w600,
+              height: 1.25,
+            ),
+          ),
+          trailing == null
+              ? SizedBox(
+                  width: 8.dp,
+                )
+              : Center(child: trailing)
+        ],
+      ).paddingOnly(left: 8.dp, right: 8.dp),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_theme_colors.dart';
+
+class WatchThemeProBadge extends StatelessWidget {
+  const WatchThemeProBadge({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 16.dp,
+      padding: EdgeInsets.only(left: 5.dp, right: 6.dp),
+      decoration: BoxDecoration(
+        color: WatchThemeColors.pro,
+        borderRadius: BorderRadius.circular(26.dp),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            Icons.workspace_premium,
+            color: WatchThemeColors.textPrimary,
+            size: 10.dp,
+          ),
+          SizedBox(width: 1.dp),
+          Text(
+            'PRO',
+            style: TextStyle(
+              color: WatchThemeColors.textPrimary,
+              fontSize: 10.dp,
+              fontWeight: FontWeight.w600,
+              height: 1.1,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

+import 'package:doublefeel_flutter/core/util/size_extensions.dart';
+import 'package:flutter/material.dart';
+
+import 'watch_theme_colors.dart';
+
+class WatchThemeSectionCard extends StatelessWidget {
+  const WatchThemeSectionCard({
+    super.key,
+    required this.child,
+    this.padding,
+  });
+
+  final Widget child;
+  final EdgeInsetsGeometry? padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      margin: EdgeInsets.symmetric(horizontal: 16.dp),
+      padding: padding ?? EdgeInsets.all(20.dp),
+      decoration: BoxDecoration(
+        color: WatchThemeColors.card,
+        borderRadius: BorderRadius.circular(16.dp),
+      ),
+      child: child,
+    );
+  }
+}
+
+class WatchThemeSectionTitle extends StatelessWidget {
+  const WatchThemeSectionTitle(this.title, {super.key, this.trailing});
+
+  final String title;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Text(
+          title,
+          style: TextStyle(
+            color: WatchThemeColors.textPrimary,
+            fontSize: 16.dp,
+            fontWeight: FontWeight.w500,
+            height: 1.25,
+          ),
+        ),
+        if (trailing != null) ...[
+          SizedBox(width: 4.dp),
+          trailing!,
+        ],
+      ],
+    );
+  }
+}

@@ -24,6 +24,13 @@ import '../modules/splash/bindings/splash_binding.dart';
 import '../modules/splash/views/splash_page.dart';
 import '../modules/splash/views/splash_page.dart';
 import '../modules/user_onboarding/bindings/user_onboarding_binding.dart';
 import '../modules/user_onboarding/bindings/user_onboarding_binding.dart';
 import '../modules/user_onboarding/views/user_onboarding_view.dart';
 import '../modules/user_onboarding/views/user_onboarding_view.dart';
+import '../modules/watch_theme/bindings/watch_theme_binding.dart';
+import '../modules/watch_theme/views/custom_watch_theme_preview_view.dart';
+import '../modules/watch_theme/views/create_watch_theme_view.dart';
+import '../modules/watch_theme/views/watch_theme_preview_view.dart';
+import '../modules/watch_theme/views/watch_theme_view.dart';
+import '../modules/account_settings/bindings/account_settings_binding.dart';
+import '../modules/account_settings/views/account_settings_view.dart';
 import '../modules/webview/bindings/webview_binding.dart';
 import '../modules/webview/bindings/webview_binding.dart';
 import '../modules/webview/views/webview_page.dart';
 import '../modules/webview/views/webview_page.dart';
 
 
@@ -116,5 +123,30 @@ abstract final class AppPages {
       page: () => const PrivacySettingsView(),
       page: () => const PrivacySettingsView(),
       binding: PrivacySettingsBinding(),
       binding: PrivacySettingsBinding(),
     ),
     ),
+    GetPage(
+      name: Routes.WATCH_THEME,
+      page: () => const WatchThemeView(),
+      binding: WatchThemeBinding(),
+    ),
+    GetPage(
+      name: Routes.WATCH_THEME_PREVIEW,
+      page: () => const WatchThemePreviewView(),
+      binding: WatchThemeBinding(),
+    ),
+    GetPage(
+      name: Routes.WATCH_THEME_CREATE,
+      page: () => const CreateWatchThemeView(),
+      binding: WatchThemeBinding(),
+    ),
+    GetPage(
+      name: Routes.WATCH_THEME_CUSTOM_PREVIEW,
+      page: () => const CustomWatchThemePreviewView(),
+      binding: WatchThemeBinding(),
+    ),
+    GetPage(
+      name: Routes.ACCOUNT_SETTINGS,
+      page: () => const AccountSettingsView(),
+      binding: AccountSettingsBinding(),
+    ),
   ];
   ];
 }
 }

@@ -11,6 +11,11 @@ abstract class Routes {
   static const SELECT_FRIEND = _Paths.SELECT_FRIEND;
   static const SELECT_FRIEND = _Paths.SELECT_FRIEND;
   static const PREMIUM_ACTIVATED = _Paths.PREMIUM_ACTIVATED;
   static const PREMIUM_ACTIVATED = _Paths.PREMIUM_ACTIVATED;
   static const PRIVACY_SETTINGS = _Paths.PRIVACY_SETTINGS;
   static const PRIVACY_SETTINGS = _Paths.PRIVACY_SETTINGS;
+  static const WATCH_THEME = _Paths.WATCH_THEME;
+  static const WATCH_THEME_PREVIEW = _Paths.WATCH_THEME_PREVIEW;
+  static const WATCH_THEME_CREATE = _Paths.WATCH_THEME_CREATE;
+  static const WATCH_THEME_CUSTOM_PREVIEW = _Paths.WATCH_THEME_CUSTOM_PREVIEW;
+  static const ACCOUNT_SETTINGS = _Paths.ACCOUNT_SETTINGS;
 }
 }
 
 
 abstract class _Paths {
 abstract class _Paths {
@@ -23,4 +28,9 @@ abstract class _Paths {
   static const SELECT_FRIEND = '/select-friend';
   static const SELECT_FRIEND = '/select-friend';
   static const PREMIUM_ACTIVATED = '/premium-activated';
   static const PREMIUM_ACTIVATED = '/premium-activated';
   static const PRIVACY_SETTINGS = '/privacy-settings';
   static const PRIVACY_SETTINGS = '/privacy-settings';
+  static const WATCH_THEME = '/watch-theme';
+  static const WATCH_THEME_PREVIEW = '/watch-theme/preview';
+  static const WATCH_THEME_CREATE = '/watch-theme/create';
+  static const WATCH_THEME_CUSTOM_PREVIEW = '/watch-theme/custom-preview';
+  static const ACCOUNT_SETTINGS = '/account-settings';
 }
 }

@@ -15,21 +15,22 @@ PlatformException _createConnectionError(String channelName) {
     message: 'Unable to establish connection on channel: "$channelName".',
     message: 'Unable to establish connection on channel: "$channelName".',
   );
   );
 }
 }
+
 bool _deepEquals(Object? a, Object? b) {
 bool _deepEquals(Object? a, Object? b) {
   if (a is List && b is List) {
   if (a is List && b is List) {
     return a.length == b.length &&
     return a.length == b.length &&
         a.indexed
         a.indexed
-        .every(((int, dynamic) item) => _deepEquals(item.$2, b[item.$1]));
+            .every(((int, dynamic) item) => _deepEquals(item.$2, b[item.$1]));
   }
   }
   if (a is Map && b is Map) {
   if (a is Map && b is Map) {
-    return a.length == b.length && a.entries.every((MapEntry<Object?, Object?> entry) =>
-        (b as Map<Object?, Object?>).containsKey(entry.key) &&
-        _deepEquals(entry.value, b[entry.key]));
+    return a.length == b.length &&
+        a.entries.every((MapEntry<Object?, Object?> entry) =>
+            (b as Map<Object?, Object?>).containsKey(entry.key) &&
+            _deepEquals(entry.value, b[entry.key]));
   }
   }
   return a == b;
   return a == b;
 }
 }
 
 
-
 class WearDeviceInfo {
 class WearDeviceInfo {
   WearDeviceInfo({
   WearDeviceInfo({
     this.deviceId,
     this.deviceId,
@@ -52,7 +53,8 @@ class WearDeviceInfo {
   }
   }
 
 
   Object encode() {
   Object encode() {
-    return _toList();  }
+    return _toList();
+  }
 
 
   static WearDeviceInfo decode(Object result) {
   static WearDeviceInfo decode(Object result) {
     result as List<Object?>;
     result as List<Object?>;
@@ -77,11 +79,9 @@ class WearDeviceInfo {
 
 
   @override
   @override
   // ignore: avoid_equals_and_hash_code_on_mutable_classes
   // ignore: avoid_equals_and_hash_code_on_mutable_classes
-  int get hashCode => Object.hashAll(_toList())
-;
+  int get hashCode => Object.hashAll(_toList());
 }
 }
 
 
-
 class _PigeonCodec extends StandardMessageCodec {
 class _PigeonCodec extends StandardMessageCodec {
   const _PigeonCodec();
   const _PigeonCodec();
   @override
   @override
@@ -89,7 +89,7 @@ class _PigeonCodec extends StandardMessageCodec {
     if (value is int) {
     if (value is int) {
       buffer.putUint8(4);
       buffer.putUint8(4);
       buffer.putInt64(value);
       buffer.putInt64(value);
-    }    else if (value is WearDeviceInfo) {
+    } else if (value is WearDeviceInfo) {
       buffer.putUint8(129);
       buffer.putUint8(129);
       writeValue(buffer, value.encode());
       writeValue(buffer, value.encode());
     } else {
     } else {
@@ -100,7 +100,7 @@ class _PigeonCodec extends StandardMessageCodec {
   @override
   @override
   Object? readValueOfType(int type, ReadBuffer buffer) {
   Object? readValueOfType(int type, ReadBuffer buffer) {
     switch (type) {
     switch (type) {
-      case 129: 
+      case 129:
         return WearDeviceInfo.decode(readValue(buffer)!);
         return WearDeviceInfo.decode(readValue(buffer)!);
       default:
       default:
         return super.readValueOfType(type, buffer);
         return super.readValueOfType(type, buffer);
@@ -112,9 +112,11 @@ class WearEngineHostApi {
   /// Constructor for [WearEngineHostApi].  The [binaryMessenger] named argument is
   /// Constructor for [WearEngineHostApi].  The [binaryMessenger] named argument is
   /// available for dependency injection.  If it is left null, the default
   /// available for dependency injection.  If it is left null, the default
   /// BinaryMessenger will be used which routes to the host platform.
   /// BinaryMessenger will be used which routes to the host platform.
-  WearEngineHostApi({BinaryMessenger? binaryMessenger, String messageChannelSuffix = ''})
+  WearEngineHostApi(
+      {BinaryMessenger? binaryMessenger, String messageChannelSuffix = ''})
       : pigeonVar_binaryMessenger = binaryMessenger,
       : pigeonVar_binaryMessenger = binaryMessenger,
-        pigeonVar_messageChannelSuffix = messageChannelSuffix.isNotEmpty ? '.$messageChannelSuffix' : '';
+        pigeonVar_messageChannelSuffix =
+            messageChannelSuffix.isNotEmpty ? '.$messageChannelSuffix' : '';
   final BinaryMessenger? pigeonVar_binaryMessenger;
   final BinaryMessenger? pigeonVar_binaryMessenger;
 
 
   static const MessageCodec<Object?> pigeonChannelCodec = _PigeonCodec();
   static const MessageCodec<Object?> pigeonChannelCodec = _PigeonCodec();
@@ -122,8 +124,10 @@ class WearEngineHostApi {
   final String pigeonVar_messageChannelSuffix;
   final String pigeonVar_messageChannelSuffix;
 
 
   Future<bool> hasAvailableDevices() async {
   Future<bool> hasAvailableDevices() async {
-    final String pigeonVar_channelName = 'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.hasAvailableDevices$pigeonVar_messageChannelSuffix';
-    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.hasAvailableDevices$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel =
+        BasicMessageChannel<Object?>(
       pigeonVar_channelName,
       pigeonVar_channelName,
       pigeonChannelCodec,
       pigeonChannelCodec,
       binaryMessenger: pigeonVar_binaryMessenger,
       binaryMessenger: pigeonVar_binaryMessenger,
@@ -150,8 +154,10 @@ class WearEngineHostApi {
   }
   }
 
 
   Future<WearDeviceInfo?> checkConnectedDevice() async {
   Future<WearDeviceInfo?> checkConnectedDevice() async {
-    final String pigeonVar_channelName = 'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.checkConnectedDevice$pigeonVar_messageChannelSuffix';
-    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.checkConnectedDevice$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel =
+        BasicMessageChannel<Object?>(
       pigeonVar_channelName,
       pigeonVar_channelName,
       pigeonChannelCodec,
       pigeonChannelCodec,
       binaryMessenger: pigeonVar_binaryMessenger,
       binaryMessenger: pigeonVar_binaryMessenger,
@@ -173,8 +179,10 @@ class WearEngineHostApi {
   }
   }
 
 
   Future<bool> registerMessageReceiver() async {
   Future<bool> registerMessageReceiver() async {
-    final String pigeonVar_channelName = 'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.registerMessageReceiver$pigeonVar_messageChannelSuffix';
-    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.registerMessageReceiver$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel =
+        BasicMessageChannel<Object?>(
       pigeonVar_channelName,
       pigeonVar_channelName,
       pigeonChannelCodec,
       pigeonChannelCodec,
       binaryMessenger: pigeonVar_binaryMessenger,
       binaryMessenger: pigeonVar_binaryMessenger,
@@ -201,13 +209,16 @@ class WearEngineHostApi {
   }
   }
 
 
   Future<bool> sendTextMessage(String message) async {
   Future<bool> sendTextMessage(String message) async {
-    final String pigeonVar_channelName = 'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.sendTextMessage$pigeonVar_messageChannelSuffix';
-    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.sendTextMessage$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel =
+        BasicMessageChannel<Object?>(
       pigeonVar_channelName,
       pigeonVar_channelName,
       pigeonChannelCodec,
       pigeonChannelCodec,
       binaryMessenger: pigeonVar_binaryMessenger,
       binaryMessenger: pigeonVar_binaryMessenger,
     );
     );
-    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[message]);
+    final Future<Object?> pigeonVar_sendFuture =
+        pigeonVar_channel.send(<Object?>[message]);
     final List<Object?>? pigeonVar_replyList =
     final List<Object?>? pigeonVar_replyList =
         await pigeonVar_sendFuture as List<Object?>?;
         await pigeonVar_sendFuture as List<Object?>?;
     if (pigeonVar_replyList == null) {
     if (pigeonVar_replyList == null) {
@@ -229,13 +240,16 @@ class WearEngineHostApi {
   }
   }
 
 
   Future<bool> sendWatchSyncPayload(String jsonPayload) async {
   Future<bool> sendWatchSyncPayload(String jsonPayload) async {
-    final String pigeonVar_channelName = 'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.sendWatchSyncPayload$pigeonVar_messageChannelSuffix';
-    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.sendWatchSyncPayload$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel =
+        BasicMessageChannel<Object?>(
       pigeonVar_channelName,
       pigeonVar_channelName,
       pigeonChannelCodec,
       pigeonChannelCodec,
       binaryMessenger: pigeonVar_binaryMessenger,
       binaryMessenger: pigeonVar_binaryMessenger,
     );
     );
-    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[jsonPayload]);
+    final Future<Object?> pigeonVar_sendFuture =
+        pigeonVar_channel.send(<Object?>[jsonPayload]);
     final List<Object?>? pigeonVar_replyList =
     final List<Object?>? pigeonVar_replyList =
         await pigeonVar_sendFuture as List<Object?>?;
         await pigeonVar_sendFuture as List<Object?>?;
     if (pigeonVar_replyList == null) {
     if (pigeonVar_replyList == null) {
@@ -255,4 +269,29 @@ class WearEngineHostApi {
       return (pigeonVar_replyList[0] as bool?)!;
       return (pigeonVar_replyList[0] as bool?)!;
     }
     }
   }
   }
+
+  Future<String?> pickImageAndRemoveBackground() async {
+    final String pigeonVar_channelName =
+        'dev.flutter.pigeon.doublefeel_flutter.WearEngineHostApi.pickImageAndRemoveBackground$pigeonVar_messageChannelSuffix';
+    final BasicMessageChannel<Object?> pigeonVar_channel =
+        BasicMessageChannel<Object?>(
+      pigeonVar_channelName,
+      pigeonChannelCodec,
+      binaryMessenger: pigeonVar_binaryMessenger,
+    );
+    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(null);
+    final List<Object?>? pigeonVar_replyList =
+        await pigeonVar_sendFuture as List<Object?>?;
+    if (pigeonVar_replyList == null) {
+      throw _createConnectionError(pigeonVar_channelName);
+    } else if (pigeonVar_replyList.length > 1) {
+      throw PlatformException(
+        code: pigeonVar_replyList[0]! as String,
+        message: pigeonVar_replyList[1] as String?,
+        details: pigeonVar_replyList[2],
+      );
+    } else {
+      return (pigeonVar_replyList[0] as String?);
+    }
+  }
 }
 }

 class R {
 class R {
-  static final String assetsImagesNavBackIcon = 'assets/images/common/ic_nav_back.webp';
-  static final String assetsImagesHealthGoodArrow = 'assets/images/common/ic_health_good_arrow.webp';
-  static final String assetsImagesHealthBadArrow = 'assets/images/common/ic_health_bad_arrow.webp';
-  static final String assetsImagesHealthTrendUp = 'assets/images/common/ic_health_trend_up.webp';
-  static final String assetsImagesHealthTrendDown = 'assets/images/common/ic_health_trend_down.webp';
-  static final String assetsImagesHealthFriendSleepQuality = 'assets/images/common/ic_health_friend_sleep_quality.webp';
-  static final String assetsImagesHealthFriendSteps = 'assets/images/common/ic_health_friend_steps.webp';
-  static final String assetsImagesSettings = 'assets/images/common/ic_settings.png';
-  static final String assetsImagesCopyPurple = 'assets/images/common/ic_copy_purple.webp';
+  static final String assetsImagesNavBackIcon =
+      'assets/images/common/ic_nav_back.webp';
+  static final String assetsImagesHealthGoodArrow =
+      'assets/images/common/ic_health_good_arrow.webp';
+  static final String assetsImagesHealthBadArrow =
+      'assets/images/common/ic_health_bad_arrow.webp';
+  static final String assetsImagesHealthTrendUp =
+      'assets/images/common/ic_health_trend_up.webp';
+  static final String assetsImagesHealthTrendDown =
+      'assets/images/common/ic_health_trend_down.webp';
+  static final String assetsImagesHealthFriendSleepQuality =
+      'assets/images/common/ic_health_friend_sleep_quality.webp';
+  static final String assetsImagesHealthFriendSteps =
+      'assets/images/common/ic_health_friend_steps.webp';
+  static final String assetsImagesSettings =
+      'assets/images/common/ic_settings.png';
+  static final String assetsImagesCopyPurple =
+      'assets/images/common/ic_copy_purple.webp';
   static final String assetsImagesProIcon = 'assets/images/common/ic_pro.webp';
   static final String assetsImagesProIcon = 'assets/images/common/ic_pro.webp';
 
 
   // friends
   // friends
-  static final String assetsImagesFriendsFriendAddMeIllustration = 'assets/images/friends/ic_friend_add_me_illustration.webp';
-  static final String assetsImagesFriendsFriendAddOtherIllustration = 'assets/images/friends/ic_friend_add_other_illustration.webp';
-  static final String assetsImagesFriendsFriendAddSubtractBg = 'assets/images/friends/bg_friend_add_subtract.webp';
-  static final String assetsImagesFriendsFriendAddVectorIcon = 'assets/images/friends/ic_friend_add_vector.webp';
+  static final String assetsImagesFriendsFriendAddMeIllustration =
+      'assets/images/friends/ic_friend_add_me_illustration.webp';
+  static final String assetsImagesFriendsFriendAddOtherIllustration =
+      'assets/images/friends/ic_friend_add_other_illustration.webp';
+  static final String assetsImagesFriendsFriendAddSubtractBg =
+      'assets/images/friends/bg_friend_add_subtract.webp';
+  static final String assetsImagesFriendsFriendAddVectorIcon =
+      'assets/images/friends/ic_friend_add_vector.webp';
+
+  // my
+  static final String assetsImagesMyAvatarDefault =
+      'assets/images/my/avatar_default.png';
+
+  // watch theme
+  static final String assetsImagesWatchThemeFaceDefault =
+      'assets/images/watch_theme/watch_face_default.png';
+  static final String assetsImagesWatchThemeFacePreviewAlt =
+      'assets/images/watch_theme/watch_face_preview_alt.png';
+  static final String assetsImagesWatchThemeCustomFaceCreate =
+      'assets/images/watch_theme/custom_watch_face_create.png';
+  static final String assetsImagesWatchThemeCustomFacePreview =
+      'assets/images/watch_theme/custom_watch_face_preview.png';
+  static final String assetsImagesWatchThemeCustomPreviewAlt =
+      'assets/images/watch_theme/custom_preview_alt.png';
+  static final String assetsImagesWatchThemeCustomStatusExcellent =
+      'assets/images/watch_theme/custom_status_excellent.png';
+  static final String assetsImagesWatchThemeCustomStatusNormal =
+      'assets/images/watch_theme/custom_status_normal.png';
+  static final String assetsImagesWatchThemeCustomStatusStress =
+      'assets/images/watch_theme/custom_status_stress.png';
+  static final String assetsImagesWatchThemeCustomStatusOverload =
+      'assets/images/watch_theme/custom_status_overload.png';
+  static final String assetsImagesWatchThemeOfficialDogWhite =
+      'assets/images/watch_theme/official_dog_white.png';
+  static final String assetsImagesWatchThemeOfficialRabbitPink =
+      'assets/images/watch_theme/official_rabbit_pink.png';
+  static final String assetsImagesWatchThemeOfficialCatOrange =
+      'assets/images/watch_theme/official_cat_orange.png';
+  static final String assetsImagesWatchThemeOfficialElephantBlue =
+      'assets/images/watch_theme/official_elephant_blue.png';
+  static final String assetsImagesWatchThemeCustomCatDog =
+      'assets/images/watch_theme/custom_cat_dog.png';
 }
 }

@@ -39,4 +39,8 @@ abstract class WearEngineHostApi {
   bool sendTextMessage(String message);
   bool sendTextMessage(String message);
 
 
   bool sendWatchSyncPayload(String jsonPayload);
   bool sendWatchSyncPayload(String jsonPayload);
+
+  /// Opens the system photo picker and returns a local PNG file path after
+  /// removing the image background on the host platform.
+  String? pickImageAndRemoveBackground();
 }
 }

@@ -69,3 +69,5 @@ flutter:
     - assets/images/tabbar/
     - assets/images/tabbar/
     - assets/images/today/
     - assets/images/today/
     - assets/images/friends/
     - assets/images/friends/
+    - assets/images/my/
+    - assets/images/watch_theme/