Feat. Quick support, ui (#7267)

* Feat. QS ui Signed-off-by: fufesou <shuanglongchen@yeah.net> * Remove 'Quick support' Signed-off-by: fufesou <shuanglongchen@yeah.net> * add help card Signed-off-by: fufesou <shuanglongchen@yeah.net> * use addPostFrameCallback to get child size Signed-off-by: fufesou <shuanglongchen@yeah.net> * Fix. qs, set home window size Signed-off-by: fufesou <shuanglongchen@yeah.net> * Qs, set setResizable for settings page Signed-off-by: fufesou <shuanglongchen@yeah.net> * Qs, help cards margin bottom Signed-off-by: fufesou <shuanglongchen@yeah.net> * Qs, online status, padding Signed-off-by: fufesou <shuanglongchen@yeah.net> * Qs, online status, padding Signed-off-by: fufesou <shuanglongchen@yeah.net> * Qs, online status, use margin instead of padding Signed-off-by: fufesou <shuanglongchen@yeah.net> * Qs, fix, start cm window Signed-off-by: fufesou <shuanglongchen@yeah.net> --------- Signed-off-by: fufesou <shuanglongchen@yeah.net>
2025-10-29 17:00:05 +00:00 · 2024-02-27 17:02:10 +08:00
parent 1d9b1781d4
commit e6953c8883
11 changed files with 328 additions and 200 deletions
--- a/flutter/lib/desktop/pages/connection_page.dart
+++ b/flutter/lib/desktop/pages/connection_page.dart
@@ -20,6 +20,144 @@ import '../../common/widgets/autocomplete.dart';
 import '../../models/platform_model.dart';
 import '../widgets/button.dart';

+class OnlineStatusWidget extends StatefulWidget {
+  const OnlineStatusWidget({Key? key}) : super(key: key);
+
+  @override
+  State<OnlineStatusWidget> createState() => _OnlineStatusWidgetState();
+}
+
+/// State for the connection page.
+class _OnlineStatusWidgetState extends State<OnlineStatusWidget> {
+  final _svcStopped = Get.find<RxBool>(tag: 'stop-service');
+  final _svcIsUsingPublicServer = true.obs;
+  Timer? _updateTimer;
+
+  double get em => 14.0;
+  double get height => em * 3;
+
+  void onUsePublicServerGuide() {
+    const url = "https://rustdesk.com/pricing.html";
+    canLaunchUrlString(url).then((can) {
+      if (can) {
+        launchUrlString(url);
+      }
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _updateTimer = periodic_immediate(Duration(seconds: 1), () async {
+      updateStatus();
+    });
+  }
+
+  @override
+  void dispose() {
+    _updateTimer?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: height,
+      child: Obx(() => Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Container(
+                height: 8,
+                width: 8,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(4),
+                  color: _svcStopped.value ||
+                          stateGlobal.svcStatus.value == SvcStatus.connecting
+                      ? kColorWarn
+                      : (stateGlobal.svcStatus.value == SvcStatus.ready
+                          ? Color.fromARGB(255, 50, 190, 166)
+                          : Color.fromARGB(255, 224, 79, 95)),
+                ),
+              ).marginSymmetric(horizontal: em),
+              Text(
+                  _svcStopped.value
+                      ? translate("Service is not running")
+                      : stateGlobal.svcStatus.value == SvcStatus.connecting
+                          ? translate("connecting_status")
+                          : stateGlobal.svcStatus.value == SvcStatus.notReady
+                              ? translate("not_ready_status")
+                              : translate('Ready'),
+                  style: TextStyle(fontSize: em)),
+              // stop
+              Offstage(
+                offstage: !_svcStopped.value,
+                child: InkWell(
+                        onTap: () async {
+                          await start_service(true);
+                        },
+                        child: Text(translate("Start service"),
+                            style: TextStyle(
+                                decoration: TextDecoration.underline,
+                                fontSize: em)))
+                    .marginOnly(left: em),
+              ),
+              // ready && public
+              Flexible(
+                child: Offstage(
+                  offstage: !(!_svcStopped.value &&
+                      stateGlobal.svcStatus.value == SvcStatus.ready &&
+                      _svcIsUsingPublicServer.value),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      Text(', ', style: TextStyle(fontSize: em)),
+                      Flexible(
+                        child: InkWell(
+                          onTap: onUsePublicServerGuide,
+                          child: Row(
+                            children: [
+                              Flexible(
+                                child: Text(
+                                  translate('setup_server_tip'),
+                                  style: TextStyle(
+                                      decoration: TextDecoration.underline,
+                                      fontSize: em),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              )
+            ],
+          )),
+    ).paddingOnly(right: bind.isQs() ? 8 : 0);
+  }
+
+  updateStatus() async {
+    final status =
+        jsonDecode(await bind.mainGetConnectStatus()) as Map<String, dynamic>;
+    final statusNum = status['status_num'] as int;
+    final preStatus = stateGlobal.svcStatus.value;
+    if (statusNum == 0) {
+      stateGlobal.svcStatus.value = SvcStatus.connecting;
+    } else if (statusNum == -1) {
+      stateGlobal.svcStatus.value = SvcStatus.notReady;
+    } else if (statusNum == 1) {
+      stateGlobal.svcStatus.value = SvcStatus.ready;
+      if (preStatus != SvcStatus.ready) {
+        gFFI.userModel.refreshCurrentUser();
+      }
+    } else {
+      stateGlobal.svcStatus.value = SvcStatus.notReady;
+    }
+    _svcIsUsingPublicServer.value = await bind.mainIsUsingPublicServer();
+  }
+}
+
 /// Connection page for connecting to a remote peer.
 class ConnectionPage extends StatefulWidget {
  const ConnectionPage({Key? key}) : super(key: key);
@@ -34,13 +172,8 @@ class _ConnectionPageState extends State<ConnectionPage>
  /// Controller for the id input bar.
  final _idController = IDTextEditingController();

-  Timer? _updateTimer;
-
  final RxBool _idInputFocused = false.obs;

-  var svcStopped = Get.find<RxBool>(tag: 'stop-service');
-  var svcIsUsingPublicServer = true.obs;
-
  bool isWindowMinimized = false;
  List<Peer> peers = [];

@@ -60,9 +193,6 @@ class _ConnectionPageState extends State<ConnectionPage>
        }
      }();
    }
-    _updateTimer = periodic_immediate(Duration(seconds: 1), () async {
-      updateStatus();
-    });
    Get.put<IDTextEditingController>(_idController);
    windowManager.addListener(this);
  }
@@ -70,7 +200,6 @@ class _ConnectionPageState extends State<ConnectionPage>
  @override
  void dispose() {
    _idController.dispose();
-    _updateTimer?.cancel();
    windowManager.removeListener(this);
    if (Get.isRegistered<IDTextEditingController>()) {
      Get.delete<IDTextEditingController>();
@@ -132,7 +261,7 @@ class _ConnectionPageState extends State<ConnectionPage>
          ],
        ).paddingOnly(left: 12.0)),
        const Divider(height: 1),
-        buildStatus()
+        OnlineStatusWidget()
      ],
    );
  }
@@ -383,111 +512,4 @@ class _ConnectionPageState extends State<ConnectionPage>
    return Container(
        constraints: const BoxConstraints(maxWidth: 600), child: w);
  }
-
-  Widget buildStatus() {
-    final em = 14.0;
-    return Container(
-      height: 3 * em,
-      child: Obx(() => Row(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Container(
-                height: 8,
-                width: 8,
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(4),
-                  color: svcStopped.value ||
-                          stateGlobal.svcStatus.value == SvcStatus.connecting
-                      ? kColorWarn
-                      : (stateGlobal.svcStatus.value == SvcStatus.ready
-                          ? Color.fromARGB(255, 50, 190, 166)
-                          : Color.fromARGB(255, 224, 79, 95)),
-                ),
-              ).marginSymmetric(horizontal: em),
-              Text(
-                  svcStopped.value
-                      ? translate("Service is not running")
-                      : stateGlobal.svcStatus.value == SvcStatus.connecting
-                          ? translate("connecting_status")
-                          : stateGlobal.svcStatus.value == SvcStatus.notReady
-                              ? translate("not_ready_status")
-                              : translate('Ready'),
-                  style: TextStyle(fontSize: em)),
-              // stop
-              Offstage(
-                offstage: !svcStopped.value,
-                child: InkWell(
-                        onTap: () async {
-                          await start_service(true);
-                        },
-                        child: Text(translate("Start service"),
-                            style: TextStyle(
-                                decoration: TextDecoration.underline,
-                                fontSize: em)))
-                    .marginOnly(left: em),
-              ),
-              // ready && public
-              Flexible(
-                child: Offstage(
-                  offstage: !(!svcStopped.value &&
-                      stateGlobal.svcStatus.value == SvcStatus.ready &&
-                      svcIsUsingPublicServer.value),
-                  child: Row(
-                    crossAxisAlignment: CrossAxisAlignment.center,
-                    children: [
-                      Text(', ', style: TextStyle(fontSize: em)),
-                      Flexible(
-                        child: InkWell(
-                          onTap: onUsePublicServerGuide,
-                          child: Row(
-                            children: [
-                              Flexible(
-                                child: Text(
-                                  translate('setup_server_tip'),
-                                  style: TextStyle(
-                                      decoration: TextDecoration.underline,
-                                      fontSize: em),
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
-                      )
-                    ],
-                  ),
-                ),
-              )
-            ],
-          )),
-    );
-  }
-
-  void onUsePublicServerGuide() {
-    const url = "https://rustdesk.com/pricing.html";
-    canLaunchUrlString(url).then((can) {
-      if (can) {
-        launchUrlString(url);
-      }
-    });
-  }
-
-  updateStatus() async {
-    final status =
-        jsonDecode(await bind.mainGetConnectStatus()) as Map<String, dynamic>;
-    final statusNum = status['status_num'] as int;
-    final preStatus = stateGlobal.svcStatus.value;
-    if (statusNum == 0) {
-      stateGlobal.svcStatus.value = SvcStatus.connecting;
-    } else if (statusNum == -1) {
-      stateGlobal.svcStatus.value = SvcStatus.notReady;
-    } else if (statusNum == 1) {
-      stateGlobal.svcStatus.value = SvcStatus.ready;
-      if (preStatus != SvcStatus.ready) {
-        gFFI.userModel.refreshCurrentUser();
-      }
-    } else {
-      stateGlobal.svcStatus.value = SvcStatus.notReady;
-    }
-    svcIsUsingPublicServer.value = await bind.mainIsUsingPublicServer();
-  }
 }
--- a/flutter/lib/desktop/pages/desktop_home_page.dart
+++ b/flutter/lib/desktop/pages/desktop_home_page.dart
@@ -20,6 +20,7 @@ import 'package:flutter_hbb/utils/multi_window_manager.dart';
 import 'package:get/get.dart';
 import 'package:provider/provider.dart';
 import 'package:url_launcher/url_launcher.dart';
+import 'package:window_manager/window_manager.dart';
 import 'package:window_size/window_size.dart' as window_size;

 import '../widgets/button.dart';
@@ -50,26 +51,60 @@ class _DesktopHomePageState extends State<DesktopHomePage>
  Timer? _updateTimer;
  bool isCardClosed = false;

+  final GlobalKey _childKey = GlobalKey();
+
  @override
  Widget build(BuildContext context) {
    super.build(context);
+
+    final children = [buildLeftPane(context)];
+    if (!bind.isQs()) {
+      children.addAll([
+        const VerticalDivider(width: 1),
+        Expanded(child: buildRightPane(context)),
+      ]);
+    }
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        buildLeftPane(context),
-        const VerticalDivider(width: 1),
-        Expanded(
-          child: buildRightPane(context),
-        ),
-      ],
+      children: children,
    );
  }

  Widget buildLeftPane(BuildContext context) {
+    final children = <Widget>[
+      buildTip(context),
+      buildIDBoard(context),
+      buildPasswordBoard(context),
+      FutureBuilder<Widget>(
+        future: buildHelpCards(),
+        builder: (_, data) {
+          if (data.hasData) {
+            if (bind.isQs()) {
+              Future.delayed(Duration(milliseconds: 300), () {
+                _updateWindowSize();
+              });
+            }
+            return data.data!;
+          } else {
+            return const Offstage();
+          }
+        },
+      ),
+      buildPluginEntry(),
+    ];
+    if (bind.isQs()) {
+      children.addAll([
+        Divider(),
+        Container(
+          margin: EdgeInsets.fromLTRB(0, 0, 8, 6),
+          child: OnlineStatusWidget(),
+        ),
+      ]);
+    }
    return ChangeNotifierProvider.value(
      value: gFFI.serverModel,
      child: Container(
-        width: 200,
+        width: bind.isQs() ? 280.0 : 200.0,
        color: Theme.of(context).colorScheme.background,
        child: DesktopScrollWrapper(
          scrollController: _leftPaneScrollController,
@@ -77,22 +112,8 @@ class _DesktopHomePageState extends State<DesktopHomePage>
            controller: _leftPaneScrollController,
            physics: DraggableNeverScrollableScrollPhysics(),
            child: Column(
-              children: [
-                buildTip(context),
-                buildIDBoard(context),
-                buildPasswordBoard(context),
-                FutureBuilder<Widget>(
-                  future: buildHelpCards(),
-                  builder: (_, data) {
-                    if (data.hasData) {
-                      return data.data!;
-                    } else {
-                      return const Offstage();
-                    }
-                  },
-                ),
-                buildPluginEntry()
-              ],
+              key: _childKey,
+              children: children,
            ),
          ),
        ),
@@ -452,7 +473,8 @@ class _DesktopHomePageState extends State<DesktopHomePage>
    return Stack(
      children: [
        Container(
-          margin: EdgeInsets.only(top: marginTop),
+          margin:
+              EdgeInsets.fromLTRB(0, marginTop, 0, bind.isQs() ? marginTop : 0),
          child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
@@ -670,6 +692,19 @@ class _DesktopHomePageState extends State<DesktopHomePage>
      }
    });
    _uniLinksSubscription = listenUniLinks();
+
+    if (bind.isQs()) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _updateWindowSize();
+      });
+    }
+  }
+
+  _updateWindowSize() {
+    RenderBox renderBox =
+        _childKey.currentContext?.findRenderObject() as RenderBox;
+    desktopQsHomeLeftPaneSize = renderBox.size;
+    windowManager.setSize(getDesktopQsHomeSize());
  }

  @override
--- a/flutter/lib/desktop/pages/desktop_setting_page.dart
+++ b/flutter/lib/desktop/pages/desktop_setting_page.dart
@@ -109,14 +109,18 @@ class _DesktopSettingPageState extends State<DesktopSettingPage>
      _TabInfo('Security', Icons.enhanced_encryption_outlined,
          Icons.enhanced_encryption),
      _TabInfo('Network', Icons.link_outlined, Icons.link),
-      _TabInfo(
-          'Display', Icons.desktop_windows_outlined, Icons.desktop_windows),
      _TabInfo('Account', Icons.person_outline, Icons.person),
      _TabInfo('About', Icons.info_outline, Icons.info)
    ];
-    if (bind.pluginFeatureIsEnabled()) {
+    if (!bind.isQs()) {
      settingTabs.insert(
-          4, _TabInfo('Plugin', Icons.extension_outlined, Icons.extension));
+          3,
+          _TabInfo('Display', Icons.desktop_windows_outlined,
+              Icons.desktop_windows));
+      if (bind.pluginFeatureIsEnabled()) {
+        settingTabs.insert(
+            4, _TabInfo('Plugin', Icons.extension_outlined, Icons.extension));
+      }
    }
    return settingTabs;
  }
@@ -126,12 +130,14 @@ class _DesktopSettingPageState extends State<DesktopSettingPage>
      _General(),
      _Safety(),
      _Network(),
-      _Display(),
      _Account(),
      _About(),
    ];
-    if (bind.pluginFeatureIsEnabled()) {
-      children.insert(4, _Plugin());
+    if (!bind.isQs()) {
+      children.insert(3, _Display());
+      if (bind.pluginFeatureIsEnabled()) {
+        children.insert(4, _Plugin());
+      }
    }
    return children;
  }
@@ -318,31 +324,38 @@ class _GeneralState extends State<_General> {
  }

  Widget other() {
-    final children = [
-      _OptionCheckBox(context, 'Confirm before closing multiple tabs',
-          'enable-confirm-closing-tabs',
-          isServer: false),
+    final children = <Widget>[];
+    if (!bind.isQs()) {
+      children.add(_OptionCheckBox(context,
+          'Confirm before closing multiple tabs', 'enable-confirm-closing-tabs',
+          isServer: false));
+    }
+    children.addAll([
      _OptionCheckBox(context, 'Adaptive bitrate', 'enable-abr'),
-      wallpaper(),
-      _OptionCheckBox(
-        context,
-        'Open connection in new tab',
-        kOptionOpenNewConnInTabs,
-        isServer: false,
-      ),
-    ];
-    // though this is related to GUI, but opengl problem affects all users, so put in config rather than local
-    children.add(Tooltip(
-      message: translate('software_render_tip'),
-      child: _OptionCheckBox(context, "Always use software rendering",
-          'allow-always-software-render'),
-    ));
-    children.add(_OptionCheckBox(
-      context,
-      'Check for software update on startup',
-      'enable-check-update',
-      isServer: false,
-    ));
+      wallpaper()
+    ]);
+    if (!bind.isQs()) {
+      children.addAll([
+        _OptionCheckBox(
+          context,
+          'Open connection in new tab',
+          kOptionOpenNewConnInTabs,
+          isServer: false,
+        ),
+        // though this is related to GUI, but opengl problem affects all users, so put in config rather than local
+        Tooltip(
+          message: translate('software_render_tip'),
+          child: _OptionCheckBox(context, "Always use software rendering",
+              'allow-always-software-render'),
+        ),
+        _OptionCheckBox(
+          context,
+          'Check for software update on startup',
+          'enable-check-update',
+          isServer: false,
+        )
+      ]);
+    }
    if (bind.mainShowOption(key: 'allow-linux-headless')) {
      children.add(_OptionCheckBox(
          context, 'Allow linux headless', 'allow-linux-headless'));
--- a/flutter/lib/desktop/pages/desktop_tab_page.dart
+++ b/flutter/lib/desktop/pages/desktop_tab_page.dart
@@ -6,6 +6,7 @@ import 'package:flutter_hbb/consts.dart';
 import 'package:flutter_hbb/desktop/pages/desktop_home_page.dart';
 import 'package:flutter_hbb/desktop/pages/desktop_setting_page.dart';
 import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:flutter_hbb/models/platform_model.dart';
 import 'package:flutter_hbb/models/state_model.dart';
 import 'package:get/get.dart';
 import 'package:window_manager/window_manager.dart';
@@ -53,6 +54,17 @@ class _DesktopTabPageState extends State<DesktopTabPage> {
        page: DesktopHomePage(
          key: const ValueKey(kTabLabelHomePage),
        )));
+    if (bind.isQs()) {
+      tabController.onSelected = (key) {
+        if (key == kTabLabelHomePage) {
+          windowManager.setSize(getDesktopQsHomeSize());
+          windowManager.setResizable(false);
+        } else {
+          windowManager.setSize(getDesktopQsSettingsSize());
+          windowManager.setResizable(true);
+        }
+      };
+    }
  }

  @override
@@ -68,11 +80,14 @@ class _DesktopTabPageState extends State<DesktopTabPage> {
            backgroundColor: Theme.of(context).colorScheme.background,
            body: DesktopTab(
              controller: tabController,
-              tail: ActionIcon(
-                message: 'Settings',
-                icon: IconFont.menu,
-                onTap: DesktopTabPage.onAddSetting,
-                isClose: false,
+              tail: Offstage(
+                offstage: bind.isQs(),
+                child: ActionIcon(
+                  message: 'Settings',
+                  icon: IconFont.menu,
+                  onTap: DesktopTabPage.onAddSetting,
+                  isClose: false,
+                ),
              ),
            )));
    return Platform.isMacOS || kUseCompatibleUiMode
--- a/flutter/lib/desktop/widgets/tabbar_widget.dart
+++ b/flutter/lib/desktop/widgets/tabbar_widget.dart
@@ -13,7 +13,6 @@ import 'package:flutter_hbb/desktop/pages/remote_page.dart';
 import 'package:flutter_hbb/main.dart';
 import 'package:flutter_hbb/models/platform_model.dart';
 import 'package:flutter_hbb/models/state_model.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:get/get_rx/src/rx_workers/utils/debouncer.dart';
 import 'package:scroll_pos/scroll_pos.dart';
@@ -166,7 +165,7 @@ class DesktopTabController {
        }));
      }
    });
-    if (callOnSelected) {
+    if ((isDesktop && bind.isQs()) || callOnSelected) {
      if (state.value.tabs.length > index) {
        final key = state.value.tabs[index].key;
        onSelected?.call(key);