fix: 优化重构结构

entry/src/main/ets/pages/VideoConfig/CheckBox.ets

@@ -0,0 +1,17 @@
+@Component
+export default struct CheckboxComponent {
+  @State value: boolean = false
+  change?: (value: boolean) => void
+
+  build() {
+    Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
+      .width(40)
+      .height(40)
+      .select(this.value)
+      .onChange((value: boolean) => {
+        console.info('Checkbox1 change is' + value)
+        this.value = value;
+        this.change?.(value);
+      })
+  }
+}

entry/src/main/ets/pages/VideoConfig/Config.ets

@@ -1,4 +1,9 @@
 import { VideoConfig } from '../../model';
+import CheckboxComponent from './CheckBox';
+import LabelComponent from './Label';
+import routeSettingComponent from './RouteSetting';
+import TextInputComponent from './TextInput';
+
 
 @CustomDialog
 export default struct VideoConfigComponent {
@@ -28,53 +33,53 @@ export default struct VideoConfigComponent {
       Column() {
         // 第一行
         Row() {
-          labelComponent({
+          LabelComponent({
             text: "视频路数",
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig?.videoNum,
             change: (value: string) => {
               this.videoConfig.videoNum = value;
             }
           })
           partitionSpace()
-          checkboxComponent({
+          CheckboxComponent({
             value: this.videoConfig.faceFlag,
             change: (value: boolean) => {
               this.videoConfig.faceFlag = value;
             }
           })
-          labelComponent({
+          LabelComponent({
             text: "启用人脸对比"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.rlls,
             change: (value: string) => {
               this.videoConfig.rlls = value;
             }
           })
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "拍照通道"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.pztd,
             change: (value: string) => {
               this.videoConfig.pztd = value;
             }
           })
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "设备类型"
           })
-          textInputComponent({
+          TextInputComponent({
             value: "海康"
           })
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "视频遮挡报警阈值"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.zdyz,
             change: (value: string) => {
               this.videoConfig.zdyz = value;
@@ -123,49 +128,49 @@ export default struct VideoConfigComponent {
 
         //   第三行
         Row() {
-          checkboxComponent({
+          CheckboxComponent({
             value: this.videoConfig.shuiying,
             change: (value: boolean) => {
               this.videoConfig.shuiying = value;
             }
           })
-          labelComponent({
+          LabelComponent({
             text: "照片叠加文字"
           })
 
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "位置"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.wz,
             change: (value: string) => {
               this.videoConfig.wz = value;
             }
           })
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "叠加内容"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.text1,
             change: (value: string) => {
               this.videoConfig.text1 = value;
             }
           })
-          labelComponent({
+          LabelComponent({
             text: "+"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.text2,
             change: (value: string) => {
               this.videoConfig.text2 = value;
             }
           })
-          labelComponent({
+          LabelComponent({
             text: "+"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.text3,
             change: (value: string) => {
               this.videoConfig.text3 = value;
@@ -173,20 +178,20 @@ export default struct VideoConfigComponent {
           })
           partitionSpace()
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "分隔符"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.dolt,
             change: (value: string) => {
               this.videoConfig.dolt = value;
             }
           })
           partitionSpace()
-          labelComponent({
+          LabelComponent({
             text: "文字大小"
           })
-          textInputComponent({
+          TextInputComponent({
             value: this.videoConfig.fontSize,
             change: (value: string) => {
               this.videoConfig.fontSize = value;
@@ -206,148 +211,6 @@ export default struct VideoConfigComponent {
   }
 }
 
-@Component
-struct routeSettingComponent {
-  @State title: string = "录像范围"
-  @Prop videoConfig: VideoConfig
-  change?: (value: VideoConfig) => void
-
-  build() {
-    Row() {
-      Row() {
-        Text(this.title).fontSize(24)
-      }.width(150).justifyContent(FlexAlign.End)
-
-      Flex({
-        wrap: FlexWrap.Wrap
-      }) {
-        if (this.title === "录像范围") {
-          Row() {
-            labelComponent({
-              text: "一路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.videoRecord1,
-              change: (value: boolean) => {
-                this.videoConfig.videoRecord1 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-
-          Row() {
-            labelComponent({
-              text: "二路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.videoRecord2,
-              change: (value: boolean) => {
-                this.videoConfig.videoRecord2 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-
-          Row() {
-            labelComponent({
-              text: "三路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.videoRecord3,
-              change: (value: boolean) => {
-                this.videoConfig.videoRecord3 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-
-          Row() {
-            labelComponent({
-              text: "四路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.videoRecord4,
-              change: (value: boolean) => {
-                this.videoConfig.videoRecord4 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-        } else {
-          Row() {
-            labelComponent({
-              text: "一路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.spzd1,
-              change: (value: boolean) => {
-                this.videoConfig.spzd1 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-
-          Row() {
-            labelComponent({
-              text: "二路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.spzd2,
-              change: (value: boolean) => {
-                this.videoConfig.spzd2 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-
-          Row() {
-            labelComponent({
-              text: "三路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.spzd3,
-              change: (value: boolean) => {
-                this.videoConfig.spzd3 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-
-          Row() {
-            labelComponent({
-              text: "四路"
-            })
-            checkboxComponent({
-              value: this.videoConfig.spzd4,
-              change: (value: boolean) => {
-                this.videoConfig.spzd4 = value;
-                this.change?.(this.videoConfig);
-              }
-            })
-          }
-        }
-      }.width(300)
-    }.justifyContent(FlexAlign.Start)
-  }
-}
-
-@Component
-struct checkboxComponent {
-  @State value: boolean = false
-  change?: (value: boolean) => void
-
-  build() {
-    Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-      .width(40)
-      .height(40)
-      .select(this.value)
-      .onChange((value: boolean) => {
-        console.info('Checkbox1 change is' + value)
-        this.value = value;
-        this.change?.(value);
-      })
-  }
-}
 
 @Component
 struct blockComponent {
@@ -360,27 +223,27 @@ struct blockComponent {
       }.width(100)
 
       // IP地址
-      textInputComponent({
+      TextInputComponent({
         value: "",
         widthValue: 200
       })
       // 通道号
-      textInputComponent({
+      TextInputComponent({
         value: "",
         widthValue: 100
       })
       // 用户名
-      textInputComponent({
+      TextInputComponent({
         value: "",
         widthValue: 200
       })
       // 密码
-      textInputComponent({
+      TextInputComponent({
         value: "",
         widthValue: 200
       })
       // 端口号
-      textInputComponent({
+      TextInputComponent({
         value: "",
         widthValue: 100
       })
@@ -390,39 +253,6 @@ struct blockComponent {
   }
 }
 
-@Component
-struct labelComponent {
-  @State text: string = "视频路数"
-
-  build() {
-    Text(this.text)
-      .fontSize(24)
-      .fontWeight(FontWeight.Bold)
-  }
-}
-
-@Component
-struct textInputComponent {
-  @Prop value: string
-  @State widthValue: number = 120
-  change?: (value: string) => void
-
-  build() {
-    TextInput({
-      text: this.value,
-    })
-      .type(InputType.Normal)
-      .borderRadius(0)
-      .fontSize(20)
-      .width(this.widthValue)
-      .height(50)
-      .margin({ left: 15, right: 15 })
-      .onChange((value) => {
-        this.value = value;
-        this.change?.(value);
-      })
-  }
-}
 
 @Component
 struct partitionSpace {

entry/src/main/ets/pages/VideoConfig/Label.ets

@@ -0,0 +1,11 @@
+@Component
+export default struct LabelComponent {
+  @State text: string = "视频路数"
+
+  build() {
+    Text(this.text)
+      .fontSize(24)
+      .fontWeight(FontWeight.Bold)
+  }
+}
+

entry/src/main/ets/pages/VideoConfig/RouteSetting.ets

@@ -0,0 +1,129 @@
+import { VideoConfig } from '../../model'
+import CheckboxComponent from './CheckBox'
+import LabelComponent from './Label'
+
+
+@Component
+export default struct routeSettingComponent {
+  @State title: string = "录像范围"
+  @Prop videoConfig: VideoConfig
+  change?: (value: VideoConfig) => void
+
+  build() {
+    Row() {
+      Row() {
+        Text(this.title).fontSize(24)
+      }.width(150).justifyContent(FlexAlign.End)
+
+      Flex({
+        wrap: FlexWrap.Wrap
+      }) {
+        if (this.title === "录像范围") {
+          Row() {
+            LabelComponent({
+              text: "一路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.videoRecord1,
+              change: (value: boolean) => {
+                this.videoConfig.videoRecord1 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+
+          Row() {
+            LabelComponent({
+              text: "二路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.videoRecord2,
+              change: (value: boolean) => {
+                this.videoConfig.videoRecord2 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+
+          Row() {
+            LabelComponent({
+              text: "三路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.videoRecord3,
+              change: (value: boolean) => {
+                this.videoConfig.videoRecord3 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+
+          Row() {
+            LabelComponent({
+              text: "四路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.videoRecord4,
+              change: (value: boolean) => {
+                this.videoConfig.videoRecord4 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+        } else {
+          Row() {
+            LabelComponent({
+              text: "一路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.spzd1,
+              change: (value: boolean) => {
+                this.videoConfig.spzd1 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+
+          Row() {
+            LabelComponent({
+              text: "二路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.spzd2,
+              change: (value: boolean) => {
+                this.videoConfig.spzd2 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+
+          Row() {
+            LabelComponent({
+              text: "三路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.spzd3,
+              change: (value: boolean) => {
+                this.videoConfig.spzd3 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+
+          Row() {
+            LabelComponent({
+              text: "四路"
+            })
+            CheckboxComponent({
+              value: this.videoConfig.spzd4,
+              change: (value: boolean) => {
+                this.videoConfig.spzd4 = value;
+                this.change?.(this.videoConfig);
+              }
+            })
+          }
+        }
+      }.width(300)
+    }.justifyContent(FlexAlign.Start)
+  }
+}

entry/src/main/ets/pages/VideoConfig/TextInput.ets

@@ -0,0 +1,22 @@
+@Component
+export default struct TextInputComponent {
+  @Prop value: string
+  @State widthValue: number = 120
+  change?: (value: string) => void
+
+  build() {
+    TextInput({
+      text: this.value,
+    })
+      .type(InputType.Normal)
+      .borderRadius(0)
+      .fontSize(20)
+      .width(this.widthValue)
+      .height(50)
+      .margin({ left: 15, right: 15 })
+      .onChange((value) => {
+        this.value = value;
+        this.change?.(value);
+      })
+  }
+}