NEZ-1869 perf : 系统备份页面调整

nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss

@@ -16,7 +16,7 @@
           background: $--background-color-2;
           border: 1px solid $--border-color-base;
           border-radius: 2px;
-          width: 22px;
+          width: 30px;
           height: 22px;
           i{
             font-size: 12px !important;
@@ -42,13 +42,18 @@
           justify-content: center;
           align-items: center;
           height: 22px;
-          // width: 130px;
-          max-width: 98px;
-          min-width: 74px;
+          width: 30px;
           padding: 0 5px 0 5px;
           margin-right: 10px;
           cursor: pointer;
+          i.nz-icon-beifen.nz-icon::before {
+            font-size: 12px;
           }
         }
       }
+    }
+
+    .nz-icon-shujubeifenhuifu::before{
+      font-size: 12px;
+    }
 }

nezha-fronted/src/assets/css/components/page/config/backups.scss

@@ -1,16 +1,18 @@
 .system {
   padding-top: 40px;
-    .system-config-backup{
+  .system-config-backup {
     width: 100% !important;
   }
   .system-config-form {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
     .system-title {
       font-family: Roboto-Medium;
       font-size: 14px;
       color: $--license-left-title-color;
       letter-spacing: 0;
-      font-weight: 500;
+      font-weight: 700;
+      margin-top: 20px;
+      margin-left: 10px;
       margin-bottom: -2px;
     }
 
@@ -31,15 +33,57 @@
                 font-weight: 400;
               }
             }
-
           }
         }
       }
     }
   }
-  .backup_box{
+  .backup_box {
+    .el-form.el-form--label-top {
+      padding-left: 0px;
+    }
+    .el-input__prefix,.el-input__icon.el-icon-date{
+      display: inline-block;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .el-input__icon.el-icon-date::before {
+      font-size: 14px;
+    }
+    .el-tabs__nav.is-top,
+    .my-datetime-picker,
+    .el-form-item__content {
+      width: 640px;
+      height: 32px;
+    }
+    .my-datetime-picker,
+    .el-input.el-input--small,
+    .el-tabs__nav.is-top {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .my-datetime-picker .el-input__inner {
+      height: 32px;
+    }
+    .el-tabs__item.is-top {
+      width: 160px;
+      height: 31px;
+      line-height: 32px;
+      border-bottom: 1px solid $--scrollbar-background-color;
+    }
+    .el-form-item.is-required {
+      margin-bottom: 20px;
+      .el-input.el-input--small{
+      width: 640px;
+      height: 32px;
+      }
+    }
+    .start_at {
+      margin-bottom: 20px;
+    }
     .el-form-item:last-of-type {
-
       .el-form-item__content {
         margin-left: 0 !important;
         text-align: unset !important;
@@ -48,5 +92,68 @@
         margin: 0 10px;
       }
     }
+    .el-switch__core {
+      display: inline-block;
+      margin-left: 9px;
+    }
+    .el-checkbox-group,.el-checkbox-button{
+      height: 36px;
+    }
+    .el-checkbox-button__inner{
+      display: inline-block;
+      height: 36px;
+    }
+    .el-input-group__append{
+      width: 66px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: $--color-text-regular;
+    }
+    #week-on {
+      margin-bottom: 26px !important;
+    }
+    #DayOfMonth{
+      height: 202px;
+      margin-bottom: 25px;
+      position: relative;
+      .el-form-item__content{
+        width: 638px;
+          .el-form-item__error{
+            position: absolute;
+            top: 181px;
+            left: 10px;
+          }
+        .el-checkbox-group{
+          display: flex;
+          justify-content: start;
+          align-items: center;
+          flex-wrap: wrap;
+          .el-checkbox-button{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 91px;
+            height: 36px;
+            .el-checkbox-button__inner{
+              display: block;
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+      
+    }
+  }
+  .el-table_1_column_1 .cell{
+    padding-left: 20px !important;
+  }
+  .el-table_2_column_6 .cell{
+    padding-left: 20px !important;
+  }
+  .el-table--border th:first-child .cell {
+    padding-left: 20px !important;
   }
 }

nezha-fronted/src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1652772229392') format('woff2'),
-       url('iconfont.woff?t=1652772229392') format('woff'),
-       url('iconfont.ttf?t=1652772229392') format('truetype');
+  src: url('iconfont.woff2?t=1653383698922') format('woff2'),
+       url('iconfont.woff?t=1653383698922') format('woff'),
+       url('iconfont.ttf?t=1653383698922') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-shujubeifenhuifu:before {
+  content: "\e6ba";
+}
+
+.nz-icon-beifen:before {
+  content: "\e686";
+}
+
 .nz-icon-mimakejian:before {
   content: "\e77a";
 }

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "2781697",
+      "name": "数据备份恢复",
+      "font_class": "shujubeifenhuifu",
+      "unicode": "e6ba",
+      "unicode_decimal": 59066
+    },
+    {
+      "icon_id": "6537208",
+      "name": "备份",
+      "font_class": "beifen",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
     {
       "icon_id": "29755584",
       "name": "密码可见",

nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue

@@ -37,25 +37,27 @@
           </el-form-item>
           <el-form-item
             :label="$t('backup.start')"
-            prop="datepicker"
+            prop="schedule.datepicker"
             v-if="whoshow"
             class="start_at"
           >
             <my-date-picker
-              v-model="editBackup.datepicker[0]"
-              type="date"
+              v-model="editBackup.schedule.datepicker"
+              class="my-datetime-picker"
+              type="datetime"
+              prefix-icon="el-icon-date"
               :format="timeFormatStrToDatePickFormat(dateFormatStr)"
               :placeholder="$t('backup.SelectData')"
             >
             </my-date-picker>
 
-            <el-time-picker
+            <!-- <el-time-picker
               :value-format="'HH:mm:ss'"
               :format="'HH:mm:ss'"
               v-model="editBackup.datepicker[1]"
               :placeholder="$t('backup.SelectTime')"
             >
-            </el-time-picker>
+            </el-time-picker> -->
           </el-form-item>
           <el-form-item
             :label="$t('backup.RepeatEvery')"
@@ -86,6 +88,7 @@
             prop="checkDays"
             v-if="whoshow === 4 ? true : false"
             class="check-month_box"
+            id="DayOfMonth"
           >
             <el-checkbox-group
               v-model="editBackup.checkDays"
@@ -104,6 +107,7 @@
             prop="checkDay"
             v-if="whoshow === 3 ? true : false"
             class="check_box"
+            id="week-on"
           >
             <el-checkbox-group
               v-model="editBackup.checkDay"
@@ -120,7 +124,6 @@
           <el-form-item
             :label="$t('backup.backupRetention')"
             prop="retention"
-            v-if="whoshow !== 2 ? true : false"
           >
             <el-input
               maxlength="64"
@@ -135,7 +138,6 @@
             :label="$t('backup.Enable')"
             prop="status"
             class="form-item__switch"
-            v-if="whoshow !== 2 ? true : false"
           >
             <el-switch
               class="switch"
@@ -188,14 +190,15 @@ export default {
         checkDays: [],
         checkDay: [],
         timepicker: '',
-        datepicker: '',
+        // datepicker: '',
         retention: '',
         state: '',
         schedule: {
           repeat: '',
           stime: '',
           type: '',
-          nums: []
+          nums: [],
+          datepicker: ''
         }
       },
       whoshow: '',
@@ -211,7 +214,12 @@ export default {
             trigger: 'change'
           }
         ],
-        datepicker: [{ validator: datePicker, trigger: 'blur' }],
+        "schedule.datepicker": [{
+          required: true,
+          message: this.$t('validate.required')
+          // trigger: 'change'
+        },
+        { validator: datePicker, trigger: 'blur' }],
         checkDays: [
           {
             required: true,
@@ -227,7 +235,7 @@ export default {
             trigger: ['blur', 'change']
           }
         ],
-        Status: [
+        status: [
           {
             required: true,
             message: this.$t('validate.required'),
@@ -241,7 +249,14 @@ export default {
             trigger: 'blur'
           }
         ],
-        checkDay: [{ validator: arrLength, trigger: 'blur' }]
+        checkDay: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'change'
+          },
+          { validator: arrLength, trigger: 'blur' }
+        ]
       },
       week: [
         this.$t('week.Mon'),
@@ -295,11 +310,12 @@ export default {
 
   created () {
     const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
-    if (dateFormatStr) {
-      this.dateFormatStr = dateFormatStr.split(' ')[0]
-    } else {
-      this.dateFormatStr = 'YYYY-MM-DD'
-    }
+    this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
+    // if (dateFormatStr) {
+    //   this.dateFormatStr = dateFormatStr.split(' ')[0]
+    // } else {
+    //   this.dateFormatStr = 'YYYY-MM-DD'
+    // }
   },
 
   beforeMount () {},
@@ -343,8 +359,8 @@ export default {
           this.editBackup.datepicker[0] = bus
             .timeFormate(this.editBackup.datepicker[0])
             .split(' ')[0]
-
-          this.editBackup.stime = this.editBackup.datepicker.join(' ')
+          // this.editBackup.stime = this.editBackup.datepicker.join(' ')
+          this.editBackup.stime = this.editBackup.schedule.datepicker
           let offset = localStorage.getItem('nz-sys-timezone')
           offset = moment.tz(offset).format('Z')
           this.editBackup.stime = new Date(this.editBackup.stime).getTime()
@@ -357,7 +373,8 @@ export default {
               type: Number(this.editBackup.type),
               stime: this.editBackup.stime,
               repeat: Number(this.editBackup.repeat),
-              nums: this.editBackup.nums
+              nums: this.editBackup.nums,
+              datepicker: this.editBackup.schedule.datepicker
             },
             retention: Number(this.editBackup.retention)
           }).then((res) => {
@@ -475,12 +492,14 @@ export default {
         }
       }
     },
-    'editBackup.datepicker': {
+    'editBackup.schedule.datepicker': {
       deep: true,
       handler (n) {
-        this.editBackup.datepicker[0] = bus
-          .timeFormate(new Date(n[0]))
-          .split(' ')[0]
+        // this.editBackup.datepicker[0] = bus
+        //   .timeFormate(new Date(n[0]))
+        //   .split(' ')[0]
+        this.editBackup.schedule.datepicker = bus
+          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
       }
     }
   }

nezha-fronted/src/components/common/table/settings/backupsTable.vue

@@ -5,6 +5,7 @@
       class="table-column__head"
       v-for="(item, index) in customTableTitle"
       :key="`col-${index}`"
+      :width="`${item.width}`"
       :label="item.label"
       :prop="item.prop"
       :resizable="true"
@@ -44,7 +45,7 @@
         v-if="isConfigurations"
       >
         <button class="table-operation-button" @click="backupNow(scope.row)">
-          {{$t('backup.backupNow')}}
+         <i class="nz-icon-beifen nz-icon"></i>
         </button>
         <button class="table-operation-edit" @click="edit(scope.row)">
          <i class="nz-icon-gear nz-icon"></i>
@@ -53,7 +54,7 @@
 
       <div slot-scope="scope" v-else class="table-operation-items">
         <button class="table-operation-button" @click="Restore(scope.row)">
-          {{$t('backup.Restore')}}
+         <i class="nz-icon-shujubeifenhuifu nz-icon"></i>
         </button>
         <button class="table-operation-edit" @click="del(scope.row)">
           <i class="nz-icon nz-icon-delete" style="font-size='12px'"></i>
@@ -82,7 +83,6 @@ export default {
   },
   data () {
     return {
-
       // tableData: [
       //   {
       //     retention: '',

nezha-fronted/src/components/page/config/backups.vue

@@ -69,16 +69,16 @@ export default {
 
       url: '/sys/backup',
       customTableTitle: [
-        { label: this.$t('backup.schedule'), prop: 'schedule' },
-        { label: this.$t('backup.backupRetention'), prop: 'retention' },
-        { label: this.$t('backup.last'), prop: 'last' },
-        { label: this.$t('backup.Enable'), prop: 'state' }
+        { label: this.$t('backup.schedule'), prop: 'schedule', width: 288 },
+        { label: this.$t('backup.backupRetention'), prop: 'retention', width: 303 },
+        { label: this.$t('backup.last'), prop: 'last', width: 306 },
+        { label: this.$t('backup.Enable'), prop: 'state', width: 569 }
       ],
       customTableTitle2: [
-        { label: this.$t('backup.Date'), prop: 'time' },
-        { label: this.$t('backup.File'), prop: 'fileName' },
-        { label: this.$t('backup.size'), prop: 'size' },
-        { label: this.$t('backup.Description'), prop: 'Description' }
+        { label: this.$t('backup.Date'), prop: 'time', width: 228 },
+        { label: this.$t('backup.File'), prop: 'fileName', width: 363 },
+        { label: this.$t('backup.size'), prop: 'size', width: 306 },
+        { label: this.$t('backup.Description'), prop: 'Description', width: 569 }
       ],
       tableData: [
         {