setting_view.dart 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter/services.dart';
  4. import 'package:flutter_screenutil/flutter_screenutil.dart';
  5. import 'package:get/get.dart';
  6. import 'package:nomo/app/base/base_view.dart';
  7. import 'package:nomo/app/constants/assets.dart';
  8. import 'package:nomo/app/dialog/all_dialog.dart';
  9. import 'package:nomo/app/widgets/click_opacity.dart';
  10. import 'package:nomo/app/widgets/ix_image.dart';
  11. import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';
  12. import '../../../../utils/system_helper.dart';
  13. import '../../../routes/app_pages.dart';
  14. import '../../../widgets/ix_app_bar.dart';
  15. import '../controllers/setting_controller.dart';
  16. class SettingView extends BaseView<SettingController> {
  17. const SettingView({super.key});
  18. @override
  19. PreferredSizeWidget? get appBar => IXAppBar(title: 'Settings');
  20. @override
  21. Widget buildContent(BuildContext context) {
  22. return CustomScrollView(
  23. slivers: [
  24. // Account Section
  25. _buildSectionHeader('Account'),
  26. _buildAccountSection(),
  27. // Network Section
  28. _buildSectionHeader('Network'),
  29. _buildNetworkSection(),
  30. // APP Section
  31. _buildSectionHeader('APP'),
  32. _buildAppSection(),
  33. // Security Section
  34. _buildSectionHeader('Security'),
  35. _buildSecuritySection(),
  36. // 底部间距
  37. SliverToBoxAdapter(child: 20.verticalSpaceFromWidth),
  38. ],
  39. );
  40. }
  41. /// 构建分组标题
  42. Widget _buildSectionHeader(String title) {
  43. return SliverToBoxAdapter(
  44. child: Padding(
  45. padding: EdgeInsets.fromLTRB(28.w, 20.w, 28.w, 12.w),
  46. child: Text(
  47. title,
  48. style: TextStyle(
  49. fontSize: 14.sp,
  50. color: Get.reactiveTheme.hintColor,
  51. fontWeight: FontWeight.w500,
  52. ),
  53. ),
  54. ),
  55. );
  56. }
  57. /// Account 分组
  58. Widget _buildAccountSection() {
  59. return SliverToBoxAdapter(
  60. child: Obx(() {
  61. final isPremium = controller.isPremium.value;
  62. return Container(
  63. margin: EdgeInsets.symmetric(horizontal: 14.w),
  64. decoration: BoxDecoration(
  65. color: Get.reactiveTheme.highlightColor,
  66. borderRadius: BorderRadius.circular(16.r),
  67. ),
  68. child: Column(
  69. children: [
  70. _buildSettingItem(
  71. icon: Icons.account_circle,
  72. iconColor: const Color(0xFF00A8E8),
  73. title: 'Account',
  74. trailing: IXImage(
  75. source: isPremium ? Assets.premium : Assets.free,
  76. width: isPremium ? 92.w : 64.w,
  77. height: 28.w,
  78. sourceType: ImageSourceType.asset,
  79. ),
  80. onTap: () {
  81. Get.toNamed(Routes.ACCOUNT);
  82. },
  83. ),
  84. _buildDivider(),
  85. _buildSettingItem(
  86. icon: Icons.badge_outlined,
  87. iconColor: const Color(0xFF00A8E8),
  88. title: 'UID 123-456-789-101',
  89. trailing: Icon(
  90. Icons.copy,
  91. size: 20.w,
  92. color: Get.reactiveTheme.hintColor,
  93. ),
  94. onTap: () {
  95. Clipboard.setData(
  96. const ClipboardData(text: '123-456-789-101'),
  97. );
  98. Get.snackbar('已复制', 'UID 已复制到剪贴板');
  99. },
  100. ),
  101. _buildDivider(),
  102. // 根据用户类型显示不同的时间信息
  103. if (isPremium) ...[
  104. _buildSettingItem(
  105. icon: Icons.workspace_premium,
  106. iconColor: const Color(0xFF00A8E8),
  107. title: 'My Pre Code',
  108. trailing: Row(
  109. mainAxisSize: MainAxisSize.min,
  110. children: [
  111. Text(
  112. '123***ADZ',
  113. style: TextStyle(
  114. fontSize: 14.sp,
  115. color: Get.reactiveTheme.hintColor,
  116. ),
  117. ),
  118. SizedBox(width: 4.w),
  119. Icon(
  120. Icons.arrow_forward_ios,
  121. size: 16.w,
  122. color: Get.reactiveTheme.hintColor,
  123. ),
  124. ],
  125. ),
  126. onTap: () {
  127. // TODO: 跳转到Pre Code页面
  128. Get.toNamed(Routes.PRECODE);
  129. },
  130. ),
  131. _buildDivider(),
  132. _buildSettingItem(
  133. icon: Icons.event,
  134. iconColor: const Color(0xFF00A8E8),
  135. title: 'Valid Term',
  136. trailing: Row(
  137. mainAxisSize: MainAxisSize.min,
  138. children: [
  139. Text(
  140. 'Year / 2026-12-12',
  141. style: TextStyle(
  142. fontSize: 14.sp,
  143. color: const Color(0xFF00A8E8),
  144. fontWeight: FontWeight.w500,
  145. ),
  146. ),
  147. SizedBox(width: 4.w),
  148. Icon(
  149. Icons.arrow_forward_ios,
  150. size: 16.w,
  151. color: Get.reactiveTheme.hintColor,
  152. ),
  153. ],
  154. ),
  155. onTap: () {
  156. // TODO: 跳转到有效期详情页面
  157. },
  158. ),
  159. ] else ...[
  160. _buildSettingItem(
  161. icon: Icons.access_time,
  162. iconColor: const Color(0xFF00A8E8),
  163. title: 'Free Time',
  164. trailing: Text(
  165. '01:60:59 / Days',
  166. style: TextStyle(
  167. fontSize: 14.sp,
  168. color: const Color(0xFFFF9500),
  169. fontWeight: FontWeight.w500,
  170. ),
  171. ),
  172. ),
  173. ],
  174. _buildDivider(),
  175. _buildSettingItem(
  176. icon: Icons.phone_iphone,
  177. iconColor: const Color(0xFF00A8E8),
  178. title: 'Device Authorization',
  179. trailing: Row(
  180. mainAxisSize: MainAxisSize.min,
  181. children: [
  182. Text(
  183. isPremium ? '1/4' : '0/1',
  184. style: TextStyle(
  185. fontSize: 14.sp,
  186. color: Get.reactiveTheme.hintColor,
  187. ),
  188. ),
  189. SizedBox(width: 4.w),
  190. Icon(
  191. Icons.arrow_forward_ios,
  192. size: 16.w,
  193. color: Get.reactiveTheme.hintColor,
  194. ),
  195. ],
  196. ),
  197. onTap: () {
  198. Get.toNamed(Routes.DEVICEAUTH);
  199. },
  200. ),
  201. ],
  202. ),
  203. );
  204. }),
  205. );
  206. }
  207. /// Network 分组
  208. Widget _buildNetworkSection() {
  209. return SliverToBoxAdapter(
  210. child: Container(
  211. margin: EdgeInsets.symmetric(horizontal: 14.w),
  212. decoration: BoxDecoration(
  213. color: Get.reactiveTheme.highlightColor,
  214. borderRadius: BorderRadius.circular(16.r),
  215. ),
  216. child: Column(
  217. children: [
  218. _buildSettingItem(
  219. icon: Icons.router,
  220. iconColor: const Color(0xFF00A8E8),
  221. title: 'Routing Mode',
  222. trailing: Icon(
  223. Icons.arrow_forward_ios,
  224. size: 16.w,
  225. color: Get.reactiveTheme.hintColor,
  226. ),
  227. onTap: () {
  228. // TODO: 跳转到路由模式页面
  229. Get.toNamed(Routes.ROUTINGMODE);
  230. },
  231. ),
  232. _buildDivider(),
  233. _buildSettingItem(
  234. icon: Icons.share,
  235. iconColor: const Color(0xFF00A8E8),
  236. title: 'Split Tunneling',
  237. trailing: Icon(
  238. Icons.arrow_forward_ios,
  239. size: 16.w,
  240. color: Get.reactiveTheme.hintColor,
  241. ),
  242. onTap: () {
  243. // TODO: 跳转到分流隧道页面
  244. Get.toNamed(Routes.SPLITTUNNELING);
  245. },
  246. ),
  247. _buildDivider(),
  248. _buildSettingItem(
  249. icon: Icons.flash_on,
  250. iconColor: const Color(0xFF00A8E8),
  251. title: 'Auto Reconnect',
  252. trailing: Obx(
  253. () => CupertinoSwitch(
  254. value: controller.autoReconnect.value,
  255. onChanged: (value) {
  256. controller.autoReconnect.value = value;
  257. },
  258. activeTrackColor: Get.reactiveTheme.shadowColor,
  259. thumbColor: Colors.white,
  260. inactiveThumbColor: Colors.white,
  261. inactiveTrackColor: Colors.grey,
  262. ),
  263. ),
  264. ),
  265. _buildDivider(),
  266. _buildSettingItem(
  267. icon: Icons.restart_alt,
  268. iconColor: const Color(0xFF00A8E8),
  269. title: 'Restore Default',
  270. trailing: Icon(
  271. Icons.arrow_forward_ios,
  272. size: 16.w,
  273. color: Get.reactiveTheme.hintColor,
  274. ),
  275. onTap: () {
  276. // TODO: 恢复默认设置
  277. },
  278. ),
  279. ],
  280. ),
  281. ),
  282. );
  283. }
  284. /// APP 分组
  285. Widget _buildAppSection() {
  286. return SliverToBoxAdapter(
  287. child: Container(
  288. margin: EdgeInsets.symmetric(horizontal: 14.w),
  289. decoration: BoxDecoration(
  290. color: Get.reactiveTheme.highlightColor,
  291. borderRadius: BorderRadius.circular(16.r),
  292. ),
  293. child: Column(
  294. children: [
  295. _buildSettingItem(
  296. icon: Icons.language,
  297. iconColor: const Color(0xFFFF9500),
  298. title: 'Language',
  299. trailing: Row(
  300. mainAxisSize: MainAxisSize.min,
  301. children: [
  302. Text(
  303. 'English',
  304. style: TextStyle(
  305. fontSize: 14.sp,
  306. color: Get.reactiveTheme.hintColor,
  307. ),
  308. ),
  309. 8.horizontalSpace,
  310. Icon(
  311. Icons.arrow_forward_ios,
  312. size: 16.w,
  313. color: Get.reactiveTheme.hintColor,
  314. ),
  315. ],
  316. ),
  317. onTap: () {
  318. // TODO: 跳转到语言选择页面
  319. Get.toNamed(Routes.LANGUAGE);
  320. },
  321. ),
  322. _buildDivider(),
  323. _buildSettingItem(
  324. icon: Icons.email,
  325. iconColor: const Color(0xFFFF9500),
  326. title: 'Feedback',
  327. trailing: Icon(
  328. Icons.arrow_forward_ios,
  329. size: 16.w,
  330. color: Get.reactiveTheme.hintColor,
  331. ),
  332. onTap: () {
  333. // TODO: 跳转到反馈页面
  334. Get.toNamed(Routes.FEEDBACK);
  335. },
  336. ),
  337. _buildDivider(),
  338. _buildSettingItem(
  339. icon: Icons.policy,
  340. iconColor: const Color(0xFFFF9500),
  341. title: 'Privacy Policy',
  342. trailing: Icon(
  343. Icons.arrow_forward_ios,
  344. size: 16.w,
  345. color: Get.reactiveTheme.hintColor,
  346. ),
  347. onTap: () {
  348. // TODO: 跳转到隐私政策页面
  349. SystemHelper.openPrivacyTerms();
  350. },
  351. ),
  352. _buildDivider(),
  353. _buildSettingItem(
  354. icon: Icons.description,
  355. iconColor: const Color(0xFFFF9500),
  356. title: 'Terms of Service',
  357. trailing: Icon(
  358. Icons.arrow_forward_ios,
  359. size: 16.w,
  360. color: Get.reactiveTheme.hintColor,
  361. ),
  362. onTap: () {
  363. // TODO: 跳转到服务条款页面
  364. SystemHelper.openTermsOfService();
  365. },
  366. ),
  367. _buildDivider(),
  368. _buildSettingItem(
  369. icon: Icons.apps,
  370. iconColor: const Color(0xFFFF9500),
  371. title: 'Version',
  372. trailing: Text(
  373. 'V1.0.0',
  374. style: TextStyle(
  375. fontSize: 14.sp,
  376. color: Get.reactiveTheme.hintColor,
  377. ),
  378. ),
  379. ),
  380. ],
  381. ),
  382. ),
  383. );
  384. }
  385. /// Security 分组
  386. Widget _buildSecuritySection() {
  387. return SliverToBoxAdapter(
  388. child: Container(
  389. margin: EdgeInsets.symmetric(horizontal: 14.w),
  390. decoration: BoxDecoration(
  391. color: Get.reactiveTheme.highlightColor,
  392. borderRadius: BorderRadius.circular(16.r),
  393. ),
  394. child: Column(
  395. children: [
  396. _buildSettingItem(
  397. icon: Icons.person_remove,
  398. iconColor: const Color(0xFFFF3B30),
  399. title: 'Delete Account',
  400. onTap: () {
  401. // TODO: 删除账户
  402. },
  403. ),
  404. _buildDivider(),
  405. _buildSettingItem(
  406. icon: Icons.logout,
  407. iconColor: const Color(0xFFFF3B30),
  408. title: 'logout',
  409. titleColor: const Color(0xFFFF3B30),
  410. onTap: () {
  411. // TODO: 退出登录
  412. AllDialog.showLogoutConfirm();
  413. },
  414. ),
  415. ],
  416. ),
  417. ),
  418. );
  419. }
  420. /// 构建设置项
  421. Widget _buildSettingItem({
  422. required IconData icon,
  423. required Color iconColor,
  424. required String title,
  425. Color? titleColor,
  426. Widget? trailing,
  427. VoidCallback? onTap,
  428. }) {
  429. return ClickOpacity(
  430. onTap: onTap,
  431. child: Container(
  432. height: 56.w,
  433. padding: EdgeInsets.symmetric(horizontal: 16.w),
  434. child: Row(
  435. children: [
  436. // 图标
  437. Container(
  438. width: 32.w,
  439. height: 32.w,
  440. decoration: BoxDecoration(
  441. color: iconColor,
  442. borderRadius: BorderRadius.circular(8.r),
  443. ),
  444. child: Icon(icon, size: 20.w, color: Colors.white),
  445. ),
  446. SizedBox(width: 12.w),
  447. // 标题
  448. Expanded(
  449. child: Text(
  450. title,
  451. style: TextStyle(
  452. fontSize: 16.sp,
  453. color:
  454. titleColor ??
  455. Get.reactiveTheme.textTheme.bodyLarge!.color,
  456. fontWeight: FontWeight.w400,
  457. ),
  458. ),
  459. ),
  460. // 右侧内容
  461. if (trailing != null) trailing,
  462. ],
  463. ),
  464. ),
  465. );
  466. }
  467. /// 构建分割线
  468. Widget _buildDivider() {
  469. return Padding(
  470. padding: EdgeInsets.only(left: 60.w),
  471. child: Divider(
  472. height: 1,
  473. color: Get.reactiveTheme.dividerColor.withOpacity(0.3),
  474. ),
  475. );
  476. }
  477. }