1.0

lib/app/app_widget.dart

@@ -6,7 +6,7 @@ class AppWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // Modular.routerDelegate.setNavigatorKey(alice.getNavigatorKey());
+    //Modular.routerDelegate.setNavigatorKey(alice.getNavigatorKey());
     return MaterialApp.router(
       title: 'Flutter Slidy',
       theme: ThemeData(
@@ -16,3 +16,5 @@ class AppWidget extends StatelessWidget {
     );
   }
 }
+
+

lib/app/pages/home/home_page.dart

@@ -1,6 +1,12 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_modular/flutter_modular.dart';
+enum ImageType {
+  CUSTOMER,
+  PROMOTION,
+  TUTORIAL,
+  RENEWAL,
+}
 
 class HomePage extends StatefulWidget {
   const HomePage({super.key});
@@ -10,17 +16,257 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
+
+
+
+  final Map<ImageType, String> imageMap = {
+    ImageType.CUSTOMER: "images/main/customer.png",
+    ImageType.PROMOTION: "images/main/promotion.png",
+    ImageType.TUTORIAL: "images/main/tutorial.png",
+    ImageType.RENEWAL: "images/main/renewal.png",
+  };
+
+
+  void onImageTap(ImageType type) {
+    print("${imageMap[type]} tapped as ${type.toString().split('.').last}");
+  }
+
+
+  ConnectionStatus _status = ConnectionStatus.disconnected;
+
+  void _simulateStatusChange() {
+    setState(() {
+      switch (_status) {
+        case ConnectionStatus.disconnected:
+          _status = ConnectionStatus.connecting;
+          break;
+        case ConnectionStatus.connecting:
+          _status = ConnectionStatus.stopped;
+          break;
+        case ConnectionStatus.stopped:
+          _status = ConnectionStatus.disconnected;
+          break;
+      }
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     // TODO: implement build
-    return  TextButton(
-      child: const Text("to login"),
-      onPressed: () {
-        print('跳转login');
-        //Modular.to.popUntil(ModalRoute.withName('/'));
-        Modular.to.navigate("/");
-      },
+    return  Scaffold(
+      body: Container(
+        decoration: const BoxDecoration(
+            image: DecorationImage(
+              image: AssetImage("images/main/main.png"),
+              fit: BoxFit.fill,
+            )
+        ),
+        child: Column(
+
+          children: [
+            const UserStatusWidget(isActive: true),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(20, 25, 0, 0),
+              child: Row(
+                children: imageMap.entries.expand((entry) {
+                  return [
+                    GestureDetector(
+                      onTap: () => onImageTap(entry.key),
+                      child: Image(
+                        image: AssetImage(entry.value),
+                        width: 60,
+                        height: 60,
+                      ),
+                    ),
+                    //Spacer(), // 平均分配间隔
+                    SizedBox(width: 30),
+                  ];
+                }).toList()..removeLast(), // 删除最后一个Spacer
+              )
+
+            ),
+            const SizedBox(height: 30,),
+            const Padding(
+              padding: EdgeInsets.fromLTRB(30, 0 , 30, 0),
+              child: Row(
+                children: [
+
+                    Text("http://127.0.0.1:5336"),
+                    Spacer(),
+                    Text("socks://127.0.0.1:5337"),
+                ],
+              ),
+            ),
+            ConnectionWidget(status: ConnectionStatus.disconnected,onStatusChange: (con) {
+
+            },)
+          ],
+        )
+      ),
     );
   }
 
-}
+}
+
+
+
+
+class UserStatusWidget extends StatefulWidget {
+  final bool isActive;
+
+  const UserStatusWidget({Key? key, required this.isActive}) : super(key: key);
+
+  @override
+  _UserStatusWidgetState createState() => _UserStatusWidgetState();
+}
+
+class _UserStatusWidgetState extends State<UserStatusWidget> {
+  @override
+  Widget build(BuildContext context) {
+    String imagePath = widget.isActive ? "images/main/userstatus.png" : "images/main/userstatusoff.png";
+
+    return Align(
+      alignment: Alignment.topCenter,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(10.0, 40.0, 10.0, 10.0),
+        child:
+            Row(
+              children: [
+                const SizedBox(
+                  width: 80,
+                  height: 20,
+                ),
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,  // 这将使子组件从左边开始对齐
+                  children: [
+                    Row(
+                      children: [
+                        const Text("用户名: xxxxx"),
+                        const SizedBox(width: 10,),
+                        Image(
+                          image: AssetImage(imagePath),
+                          width: 100,
+                          height: 30,
+                        ),
+                        const SizedBox(width: 10,),
+                        IconButton(
+                          icon: Image.asset("images/main/refresh.png"),
+                          onPressed: () {
+                            // 刷新操作
+                          },
+                        )
+                      ],
+                    ),
+                    const Text(
+                      '到期时间: xxx-xx-xx',
+                      style: TextStyle(
+                        fontSize: 8.0,  // 设置字体大小为20像素
+                      ),
+                    ),
+                    const Text(
+                      '用户流量: 5G',
+                      style: TextStyle(
+                        fontSize: 8.0,  // 设置字体大小为20像素
+                      ),
+                    )
+                  ],
+                ),
+              ],
+            ),
+           // const SizedBox(height: 10,),  // 可调整间隔
+      ),
+    );
+
+  }
+}
+
+
+enum ConnectionStatus { disconnected, connecting, stopped }
+ 
+
+class ConnectionWidget extends StatefulWidget {
+
+  final ConnectionStatus status;
+  final Function(ConnectionStatus) onStatusChange;
+  ConnectionWidget({required this.status, required this.onStatusChange});
+
+  @override
+  _ConnectionWidgetState createState() => _ConnectionWidgetState();
+}
+
+class _ConnectionWidgetState extends State<ConnectionWidget> {
+
+  ConnectionStatus _currentStatus = ConnectionStatus.disconnected;
+  late AssetImage currentImage;
+
+  @override
+  void initState() {
+    super.initState();
+    _updateImage();
+  }
+
+  void _updateStatus() {
+    setState(() {
+      switch (_currentStatus) {
+        case ConnectionStatus.disconnected:
+          _currentStatus = ConnectionStatus.connecting;
+          Future.delayed(const Duration(seconds: 5), () {
+            if (mounted) { // 确保Widget仍然在Widget树中
+              setState(() {
+                _currentStatus = ConnectionStatus.stopped;
+                _updateImage();
+              });
+            }
+          });
+          break;
+        case ConnectionStatus.connecting:
+        // 在"connecting"状态时加入延迟
+
+          //_currentStatus = ConnectionStatus.stopped;
+          break;
+        case ConnectionStatus.stopped:
+          _currentStatus = ConnectionStatus.disconnected;
+          break;
+      }
+      _updateImage();
+    });
+  }
+
+  @override
+  void didUpdateWidget(ConnectionWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _updateImage();
+  }
+
+  void _updateImage() {
+    switch (_currentStatus) {
+      case ConnectionStatus.disconnected:
+        currentImage = const AssetImage('images/main/disconnected.gif');
+        break;
+      case ConnectionStatus.connecting:
+        currentImage = const AssetImage('images/main/connecting.gif');
+        break;
+      case ConnectionStatus.stopped:
+        currentImage = const AssetImage('images/main/stopped.gif');
+        break;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        _updateStatus();
+        // Add your action on tap here
+        // ScaffoldMessenger.of(context).showSnackBar(
+        //   SnackBar(content: Text('Status: ${widget.status.toString()}')),
+        // );
+      },
+      child: Image(
+          image: currentImage,
+        width: 250,
+        height: 250,
+      ),
+    );
+  }
+}

lib/app/pages/login/login.dart

@@ -10,69 +10,77 @@ class LoginPage extends StatefulWidget {
 }
 
 class _LoginPageState extends State<LoginPage> {
+  // final width = 375.0;
+  // final height = 680.0;
+
   @override
   Widget build(BuildContext context) {
     // TODO: implement build
-    return  Scaffold(
-      body: Container(
-        decoration: const BoxDecoration(
+    return Container(
+      decoration: const BoxDecoration(
           image: DecorationImage(
             image: AssetImage("images/login/login.png"),
             fit: BoxFit.fill,
-          )
-        ),
-        child:   Padding(
-          padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
-          child: Form(
-            child: Column(
-              children: [
-                const SizedBox(
-                  width: 200,
-                  height: 200,
-                ),
-
-                Padding(
-                  padding: const EdgeInsets.fromLTRB(40, 30, 0, 0),
-                  child: TextFormField(
-                    decoration: const InputDecoration(
-                      border: InputBorder.none,
-                      labelText: "输入账号",
-                      hintText: "输入账号",
-                    ),
-                  ),
-                ),
-
-                Padding(
-                  padding: const EdgeInsets.fromLTRB(40, 0, 0, 0),
-                  child: TextFormField(
-                    decoration: const InputDecoration(
-                      border: InputBorder.none,
-                      labelText: "输入密码",
-                      hintText: "输入密码",
-                    ),
-                  ),
-                ),
-                 const SizedBox(
-                  width: 200,
-                  height: 150,
-                ),
-                ElevatedButton(
-                    child: const Text("登录"),
-                  onPressed: (){
-
-                  },
-                  style: ButtonStyle(
-                    //minimumSize: Meta
-                  ),
-                )
-              ],
-            ),
-          ),
-
-        ),
-      ),
+          )),
+      child: const Text("11111"),
     );
 
   }
+}
+
 
-}
+// Padding(
+// padding: const EdgeInsets.fromLTRB(20, 20, 20, 20),
+// child: Form(
+// child: SingleChildScrollView(
+// physics: const NeverScrollableScrollPhysics(),  // 禁用滚动
+// child: Align(
+// alignment: Alignment.center,
+// child: Column(
+// mainAxisAlignment: MainAxisAlignment.center,
+// mainAxisSize: MainAxisSize.min,  // 设置为最小
+// children: [
+// const SizedBox(
+// width: 200,
+// height: 200,
+// ),
+// Padding(
+// padding: const EdgeInsets.fromLTRB(40, 40, 0, 0),
+// child: TextFormField(
+// decoration: const InputDecoration(
+// border: InputBorder.none,
+// labelText: "输入账号",
+// hintText: "输入账号",
+// ),
+// ),
+// ),
+// Padding(
+// padding: const EdgeInsets.fromLTRB(40, 10, 0, 0),
+// child: TextFormField(
+// decoration: const InputDecoration(
+// border: InputBorder.none,
+// labelText: "输入密码",
+// hintText: "输入密码",
+// ),
+// ),
+// ),
+// const SizedBox(
+// width: 200,
+// height: 50,
+// ),
+// Container(
+// width: 150,
+// height: 40,
+// child: ElevatedButton(
+// onPressed: () {
+// Modular.to.navigate("/home/main");
+// },
+// child: const Text("登录"),
+// ),
+// )
+// ],
+// ),
+// ),
+// ),
+// ),
+// ),

lib/main.dart

@@ -7,11 +7,12 @@ import 'app/app_widget.dart';
 
 void main() async {
   const width = 375.0;
-  const height = 666.0;
+  const height = 680.0;
   WidgetsFlutterBinding.ensureInitialized();
   await windowManager.ensureInitialized();
   WindowOptions windowOptions = const WindowOptions(
     minimumSize: Size(width, height),
+    maximumSize: Size(width, height),
     size: Size(width, height),
     center: true,
     backgroundColor: Colors.transparent,
@@ -24,5 +25,14 @@ void main() async {
     await windowManager.focus();
   });
 
-  runApp(ModularApp(module: AppModule(), child: const AppWidget()));
+  runApp(ModularApp(
+      module: AppModule(),
+      child: ConstrainedBox(
+          constraints: const BoxConstraints(
+            maxWidth: width,
+            maxHeight: height,
+          ),
+          child: const AppWidget()),
+      )
+      );
 }

pubspec.yaml

@@ -62,7 +62,17 @@ flutter:
 
   assets:
     - images/login/login.png
-    - images/login/bgbutton.png
+    - images/main/main.png
+    - images/main/refresh.png
+    - images/main/userstatus.png
+    - images/main/userstatusoff.png
+    - images/main/customer.png
+    - images/main/promotion.png
+    - images/main/tutorial.png
+    - images/main/renewal.png
+    - images/main/disconnected.gif
+    - images/main/connecting.gif
+    - images/main/stopped.gif
   # To add assets to your application, add an assets section, like this:
   # assets:
   #   - images/a_dot_burr.jpeg