NEZ-3223 feat：根据设计稿调整页面

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

@@ -209,3 +209,92 @@
     color: $--color-text-regular;
   }
 }
+
+.backup-dialog{
+  .el-dialog__header{
+    padding: 16px 20px;
+    .el-dialog__title{
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+  .el-dialog__body{
+    padding: 20px;
+    padding-top: 10px;
+    .backup-text{
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: $--color-text-primary;
+      line-height: 20px;
+      font-weight: 400;
+    }
+    .backup-pre{
+      opacity: 0.9;
+      background: $--pre-background-color;
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      box-sizing: border-box;
+      padding: 8px 10px;
+      margin-top: 8px;
+      margin-bottom: 22px;
+      p{
+        margin-top: 6px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: $--color-text-primary;
+        line-height: 20px;
+        font-weight: 400;
+        display: flex;
+        span:first-of-type{
+          color: $--color-text-regular;
+        }
+        span:last-of-type{
+          flex: 1;
+        }
+      }
+      p:first-of-type{
+        margin-top: 0;
+      }
+    }
+    .el-input{
+      width: 348px;
+      margin-top: 8px;
+      margin-bottom: 20px;
+    }
+    .backup-tip{
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: $--color-text-primary;
+      line-height: 20px;
+      font-weight: 400;
+      display: flex;
+      word-break: break-word;
+      .nz-icon{
+        margin-right: 6px;
+      }
+      .nz-icon-jinggao{
+        font-size: 14px;
+        color: $--color-primary;
+      }
+      .nz-icon-jinggao1{
+        font-size: 13px;
+        color: $--color-danger;
+      }
+    }
+    .el-textarea{
+      textarea{
+        border-radius: 2px;
+        min-height: 164px !important;
+        max-height: 500px;
+      }
+    }
+  }
+  .el-dialog__footer{
+    padding: 20px;
+    .nz-btn.nz-btn-size-normal{
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+    }
+  }
+}

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

@@ -5,6 +5,13 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "124495",
+      "name": "警告",
+      "font_class": "jinggao1",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
     {
       "icon_id": "37668864",
       "name": "搜索列表",

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -166,7 +166,8 @@ export default {
     },
     nzTableHeightOffset: Number,
     searchRight: Boolean,
-    operationRecord: Boolean
+    operationRecord: Boolean,
+    hideDelete: Boolean
   },
   computed: {
     nzTableHeight () {
@@ -325,6 +326,9 @@ export default {
     },
     showDeleteTableRel (n) {
       if (n) {
+        if (this.hideDelete) {
+          return false
+        }
         this.delTableRelRow(this.deleteTableRel.url, this.deleteTableRel.row, this.deleteTableRel.forceDeleteShow, this.deleteTableRel.single, this.deleteTableRel.deleteTitle, this.deleteTableRel.from)
       }
     },

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

@@ -32,6 +32,7 @@
             {{ scope.row.size ? getNum(scope.row.size) : "" }}
           </span>
           <span v-if="item.prop === 'fileName'"> {{ scope.row.fileName }} </span>
+          <span v-if="item.prop === 'remark'"> {{ scope.row.remark }} </span>
         </template>
       </el-table-column>
       <el-table-column :resizable="false" fixed="right"
@@ -57,7 +58,7 @@
               </div>
               <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
                 <el-dropdown-item v-has="'backup_restore'" :command="['restore', scope.row]"><i class="nz-icon-shujubeifenhuifu nz-icon"></i><span>{{$t('backup.recovery')}}</span></el-dropdown-item>
-                <el-dropdown-item v-has="'backup_del'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true,from:'backups'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item v-has="'backup_del'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true,from:'backup'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
@@ -73,28 +74,73 @@
           <div v-else>&nbsp;</div>
         </template>
     </el-table>
-
+    <!-- backup -->
     <el-dialog
-      class="nz-dialog snapshot-dialog"
-      width="472px"
-      :title='$t("deleteButton.confirm")'
+      class="backup-dialog"
+      width="580px"
+      :title='$t("config.backup")'
+      destroy-on-close
+      :modal-append-to-body="false"
+      :visible.sync="backupDialog"
+      @close="closeBackup"
+    >
+      <div class="backup-tip">
+        <i class="nz-icon nz-icon-jinggao"></i>
+        <div>
+          <p>{{$t('backup.backupData')}}</p>
+          <p>{{$t('backup.backupWait')}}</p>
+        </div>
+      </div>
+      <p class="backup-text" style="margin-top:20px;margin-bottom:6px;">{{$t('overall.remark')}}</p>
+      <el-input
+        v-model="backupForm.remark"
+        maxlength="256"
+        size="small"
+        show-word-limit
+        type="textarea">
+      </el-input>
+      <div slot="footer">
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="closeBackup">{{$t("overall.cancel")}}</button>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="backupConfirm">{{$t('backup.backup')}}</button>
+      </div>
+    </el-dialog>
+    <!-- restore -->
+    <el-dialog
+      class="backup-dialog"
+      width="580px"
+      :title='$t("backup.confirmRecovery")'
       destroy-on-close
       :modal-append-to-body="false"
       :visible.sync="restoreDialog"
+      @close="closeRestore"
     >
-      <div style="display: flex; align-items: center">
-        <div style="width: 100px;flex-shrink: 1;text-transform: capitalize">{{$t('login.pin')}}</div>
-        <el-input v-model="restoreForm.pin" size="small" style="flex: 1"/>
+      <p class="backup-text">{{$t('backup.restorePoint')}}</p>
+      <div class="backup-pre">
+        <p>
+          <span>{{$t('overall.time')}}：</span>
+          <span>{{utcTimeToTimezoneStr(restoreForm.file.time)}}</span>
+        </p>
+        <p>
+          <span>{{$t('backup.File')}}：</span>
+          <span>{{restoreForm.file.fileName}}</span>
+        </p>
+        <p>
+          <span>{{$t('overall.remark')}}：</span>
+          <span>{{restoreForm.file.remark}}</span>
+        </p>
+      </div>
+      <p class="backup-text">{{$t('backup.enterPassword')}}</p>
+      <el-input :placeholder="$t('login.pin')" v-model="restoreForm.pin" show-password size="small"></el-input>
+      <div class="backup-tip">
+        <i class="nz-icon nz-icon-jinggao1"></i>
+        <div>
+          <p>{{$t('backup.restoreData')}}</p>
+          <p>{{$t('backup.restoreRestart')}}</p>
+        </div>
       </div>
       <div slot="footer">
-        <div class="el-message-box__btns">
-          <button class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
-            <span>{{$t('overall.cancel')}}</span>
-          </button>
-          <button class="nz-btn el-button--small nz-btn-style-normal" :class="{'nz-btn-disabled': prevent_opt.save}" :disabled="prevent_opt.save" @click="restoreConfirm">
-            <span style="text-transform:Capitalize">{{$t('backup.recovery')}}</span>
-          </button>
-        </div>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="closeRestore">{{$t("overall.cancel")}}</button>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': prevent_opt.save||!restoreForm.pin}" :disabled="prevent_opt.save||!restoreForm.pin" @click="restoreConfirm">{{$t('backup.recovery')}}</button>
       </div>
     </el-dialog>
   </div>
@@ -121,7 +167,11 @@ export default {
       restoreDialog: false,
       restoreForm: {
         pin: '',
-        filename: ''
+        file: {}
+      },
+      backupDialog: false,
+      backupForm: {
+        remark: ''
       }
       // tableData: [
       //   {
@@ -158,11 +208,37 @@ export default {
         return this.$t('backup.Monthly')
       }
     },
+    backupConfirm () {
+      this.$store.dispatch('dispatchHomeLoading', true)
+      this.$post('/sys/backup', this.backupForm).then((res) => {
+        this.$store.dispatch('dispatchHomeLoading', false)
+        if (res.code == 200) {
+          this.$message.success(this.$t('backup.backupNow'))
+          bus.$emit('backupNow')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+      this.closeBackup()
+    },
+    closeBackup () {
+      this.backupDialog = false
+      this.backupForm = {
+        remark: ''
+      }
+    },
+    backupNow () {
+      this.backupDialog = true
+    },
     restoreConfirm () {
       this.prevent_opt.save = true
-      put('/sys/backup/restore', this.restoreForm).then(res => {
+      const param = {
+        pin: this.restoreForm.pin,
+        filename: this.restoreForm.file.fileName
+      }
+      put('/sys/backup/restore', param).then(res => {
         if (res.code == 200) {
-          this.closeDialog()
+          this.closeRestore()
           this.$emit('getTableData', 'recent')
           this.$message.success(this.$t('backup.recoverySuccess'))
         } else {
@@ -171,16 +247,16 @@ export default {
         this.prevent_opt.save = false
       })
     },
-    closeDialog () {
+    closeRestore () {
       this.restoreDialog = false
       this.restoreForm = {
         pin: '',
-        filename: ''
+        file: {}
       }
     },
     restore (row) {
       this.restoreDialog = true
-      this.restoreForm.filename = row.fileName
+      this.restoreForm.file = row
     },
     changeDate (item) {
       const time = this.utcTimeToTimezoneStr(item)
@@ -190,31 +266,18 @@ export default {
     getNum (item) {
       return bus.getNumStr(item)
     },
-    backupNow (item) {
-      this.$store.dispatch('dispatchHomeLoading', true)
-      this.$post('/sys/backup').then((res) => {
-        this.$store.dispatch('dispatchHomeLoading', false)
-        if (res.code == 200) {
-          this.$message.success(this.$t('backup.backupNow'))
-          bus.$emit('backupNow')
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
-    },
     edit () {
       this.$emit('edit', this.tableData[0])
     },
-    tableOperation ([command, row]) {
+    tableOperation ([command, row, param]) {
       switch (command) {
-        case 'delete': {
-          this.$set(row, 'name', row.fileName)
-          if (this.singleDelete.length === 0) {
-            this.singleDelete.push(row)
-          } else {
-            this.singleDelete = []
-            this.singleDelete.push(row)
-          }
+        case 'delete-rel': {
+          row.name = row.fileName
+          this.$store.dispatch('deleteTableRel', {
+            row: row,
+            url: '/sys/backup',
+            ...param
+          })
           break
         }
         case 'restore': {

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

@@ -8,6 +8,7 @@
         :data="tableData"
         border
         from="backups"
+        :hideDelete="true"
       >
         <template v-slot="slotProps">
           <backups-table
@@ -80,7 +81,7 @@ export default {
         { label: this.$t('config.assetLabel.date'), prop: 'time', minwidth: 228 },
         { label: this.$t('backup.File'), prop: 'fileName', minwidth: 363 },
         { label: this.$t('backup.size'), prop: 'size', minwidth: 306 },
-        { label: this.$t('overall.remark'), prop: 'Description', minwidth: 569 }
+        { label: this.$t('overall.remark'), prop: 'remark', minwidth: 569 }
       ],
       tableData: [
         {