update

dbsyncer-web/src/main/resources/public/system/system.html

@@ -33,33 +33,35 @@
                 </div>
             </div>
             <div class="form-group">
-                <label class="col-sm-2 control-label">记录同步成功数据</label>
+                <label class="col-sm-2 control-label">CDN静态资源</label>
                 <div class="col-sm-4">
-                    <input class="dbsyncer_switch" name="enableStorageWriteSuccess" th:checked="${config?.enableStorageWriteSuccess}" type="checkbox" />
+                    <input class="dbsyncer_switch" name="enableCDN" th:checked="${config?.enableCDN}" type="checkbox" />
                 </div>
-                <label class="col-sm-2 control-label">记录同步失败数据</label>
+                <label class="col-sm-2 control-label">刷新监控频率(秒)<strong class="text-primary">*</strong></label>
                 <div class="col-sm-4">
-                    <input class="dbsyncer_switch" name="enableStorageWriteFail" th:checked="${config?.enableStorageWriteFail}" type="checkbox" />
+                    <input type="number" class="form-control" min="1" max="60" dbsyncer-valid="require" name="refreshIntervalSeconds" th:value="${config?.refreshIntervalSeconds}"/>
                 </div>
             </div>
             <div class="form-group">
-                <label class="col-sm-2 control-label">刷新监控频率(秒)<strong class="text-primary">*</strong></label>
+                <label class="col-sm-2 control-label">记录同步成功数据</label>
                 <div class="col-sm-4">
-                    <input type="number" class="form-control" min="1" max="60" dbsyncer-valid="require" name="refreshIntervalSeconds" th:value="${config?.refreshIntervalSeconds}"/>
+                    <input class="dbsyncer_switch" name="enableStorageWriteSuccess" th:checked="${config?.enableStorageWriteSuccess}" type="checkbox" />
                 </div>
-                <label class="col-sm-2 control-label">记录同步失败日志长度<strong class="text-primary">*</strong></label>
+                <label class="col-sm-2 control-label">记录全量数据<i class="fa fa-question-circle fa_gray" aria-hidden="true" title="不推荐在生产环境下开启，可在源库数据量较少时使用，一般用于测试"></i></label>
                 <div class="col-sm-4">
-                    <input type="number" class="form-control" min="1024" max="8192" dbsyncer-valid="require" name="maxStorageErrorLength" th:value="${config?.maxStorageErrorLength}"/>
+                    <input class="dbsyncer_switch" name="enableStorageWriteFull" th:checked="${config?.enableStorageWriteFull}" type="checkbox" />
                 </div>
             </div>
             <div class="form-group">
-                <label class="col-sm-2 control-label">记录全量数据<i class="fa fa-question-circle fa_gray" aria-hidden="true" title="不推荐在生产环境下开启，可在源库数据量较少时使用，一般用于测试"></i></label>
+                <label class="col-sm-2 control-label">记录同步失败数据</label>
                 <div class="col-sm-4">
-                    <input class="dbsyncer_switch" name="enableStorageWriteFull" th:checked="${config?.enableStorageWriteFull}" type="checkbox" />
+                    <input id="enableStorageWriteFail" name="enableStorageWriteFail" th:checked="${config?.enableStorageWriteFail}" type="checkbox" />
                 </div>
-                <label class="col-sm-2 control-label">CDN静态资源</label>
-                <div class="col-sm-4">
-                    <input class="dbsyncer_switch" name="enableCDN" th:checked="${config?.enableCDN}" type="checkbox" />
+                <div id="maxStorageErrorLength" class="hidden">
+                    <label class="col-sm-2 control-label">记录同步失败日志长度<strong class="text-primary">*</strong></label>
+                    <div class="col-sm-4">
+                        <input type="number" class="form-control" min="1024" max="8192" dbsyncer-valid="require" name="maxStorageErrorLength" th:value="${config?.maxStorageErrorLength}"/>
+                    </div>
                 </div>
             </div>
             <div class="form-group">

dbsyncer-web/src/main/resources/static/js/system/index.js

@@ -9,10 +9,9 @@ function submit(data) {
     });
 }
 
-// 绑定水印开关切换事件
-function bindWatermarkSwitch() {
-    const $watermark = $("#watermark");
-    let $switch = $("#enableWatermark").bootstrapSwitch({
+// 绑定开关切换事件
+function bindToggleSwitch($switch, $toggle) {
+    let $s = $switch.bootstrapSwitch({
         onText: "Yes",
         offText: "No",
         onColor: "success",
@@ -20,20 +19,21 @@ function bindWatermarkSwitch() {
         size: "normal",
         onSwitchChange: function (event, state) {
             if (state) {
-                $watermark.removeClass("hidden");
+                $toggle.removeClass("hidden");
             } else {
-                $watermark.addClass("hidden");
+                $toggle.addClass("hidden");
             }
         }
     });
-    if ($switch.bootstrapSwitch('state')) {
-        $watermark.removeClass("hidden");
+    if ($s.bootstrapSwitch('state')) {
+        $toggle.removeClass("hidden");
     }
 }
 
 $(function () {
     initSwitch();
-    bindWatermarkSwitch();
+    bindToggleSwitch($("#enableStorageWriteFail"), $("#maxStorageErrorLength"));
+    bindToggleSwitch($("#enableWatermark"), $("#watermark"));
     //保存
     $("#updateSystemSubBtn").click(function () {
         const $form = $("#configEditForm");