feat: web 输入支持

lib/ui/home/input_method/server_qr_dialog_ui.dart

@@ -0,0 +1,95 @@
+import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:qr_flutter/qr_flutter.dart';
+
+import 'server.dart';
+
+class ServerQrDialogUI extends HookConsumerWidget {
+  const ServerQrDialogUI({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final serverState = ref.watch(inputMethodServerProvider);
+
+    final urls = serverState.serverAddressText?.split(",") ?? [""];
+
+    final hasMultipleUrls = urls.length > 1;
+
+    final index = useState(0);
+
+    return ContentDialog(
+      constraints: BoxConstraints(
+        maxWidth: MediaQuery.of(context).size.width * .4,
+      ),
+      title: makeTitle(context),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          SizedBox(width: double.infinity, height: 12),
+          if (hasMultipleUrls) ...[
+            Text("我们没能找到合适的 ip 地址来访问服务，请您尝试以下地址（左右切换）"),
+          ] else
+            Text(
+              "请使用您的移动设备扫描以下二维码，或手动访问连接",
+              style: TextStyle(color: Colors.white.withOpacity(.8)),
+            ),
+          SizedBox(height: 24),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              if (hasMultipleUrls)
+                IconButton(
+                    icon: Icon(FluentIcons.chevron_left),
+                    onPressed: () {
+                      index.value = (index.value - 1) % urls.length;
+                    }),
+              SizedBox(width: 24),
+              Container(
+                color: Colors.white,
+                child: QrImageView(
+                  data: urls[index.value],
+                  size: 200,
+                  padding: EdgeInsets.all(12),
+                ),
+              ),
+              SizedBox(width: 24),
+              if (hasMultipleUrls)
+                IconButton(
+                    icon: Icon(FluentIcons.chevron_right),
+                    onPressed: () {
+                      index.value = (index.value + 1) % urls.length;
+                    }),
+            ],
+          ),
+          SizedBox(height: 12),
+          Text(
+            hasMultipleUrls
+                ? "(${index.value + 1} / ${urls.length})"
+                : urls[index.value],
+            style: TextStyle(fontSize: 13, color: Colors.white.withOpacity(.6)),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget makeTitle(BuildContext context) {
+    return Row(
+      children: [
+        IconButton(
+            icon: const Icon(
+              FluentIcons.back,
+              size: 22,
+            ),
+            onPressed: () {
+              context.pop();
+            }),
+        const SizedBox(width: 12),
+        Text("服务二维码"),
+      ],
+    );
+  }
+}