feat： alertRuletooltip 样式调整

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=1629768382494') format('woff2'),
+  src: url('iconfont.woff2?t=1631239483571') format('woff2'),
-       url('iconfont.woff?t=1629768382494') format('woff'),
+       url('iconfont.woff?t=1631239483571') format('woff'),
-       url('iconfont.ttf?t=1629768382494') format('truetype');
+       url('iconfont.ttf?t=1631239483571') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-dingshishijian:before {
+  content: "\e73f";
+}
+
+.nz-icon-a-rilizhou:before {
+  content: "\e740";
+}
+
+.nz-icon-guzhangshuju:before {
+  content: "\e741";
+}
+
 .nz-icon-Metrics:before {
   content: "\e73d";
 }

nezha-fronted/src/assets/css/nzIcon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1629768382494') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1631239483571') format('woff2'),
-  url('./font/iconfont.woff?t=1629768382494') format('woff'),
+  url('./font/iconfont.woff?t=1631239483571') format('woff'),
-  url('./font/iconfont.ttf?t=1629768382494') format('truetype');
+  url('./font/iconfont.ttf?t=1631239483571') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-dingshishijian:before {
+  content: "\e73f";
+}
+
+.nz-icon-a-rilizhou:before {
+  content: "\e740";
+}
+
+.nz-icon-guzhangshuju:before {
+  content: "\e741";
+}
+
 .nz-icon-Metrics:before {
   content: "\e73d";
 }

nezha-fronted/src/components/common/language/cn.js

@@ -1806,14 +1806,21 @@ const cn = {
     source: '来源',
     twoFactorAuthentication: '双因子认证'
   },
-  week:{
+  week: {
     Mon: '周一',
     Tue: '周二',
     Wed: '周三',
     Thu: '周四',
     Fri: '周五',
     Sat: '周六',
-    Sun: '周日'
+    Sun: '周日',
+    MonAbbreviation: '周一',
+    TueAbbreviation: '周二',
+    WedAbbreviation: '周三',
+    ThuAbbreviation: '周四',
+    FriAbbreviation: '周五',
+    SatAbbreviation: '周六',
+    SunAbbreviation: '周日'
   },
   ...zhLocale
 }

nezha-fronted/src/components/common/language/en.js

@@ -1695,7 +1695,14 @@ const en = {
     Thu: 'Thursday',
     Fri: 'Friday',
     Sat: 'Saturday',
-    Sun: 'Sunday'
+    Sun: 'Sunday',
+    MonAbbreviation: 'Mon',
+    TueAbbreviation: 'Tue',
+    WedAbbreviation: 'Wed',
+    ThuAbbreviation: 'Thu',
+    FriAbbreviation: 'Fri',
+    SatAbbreviation: 'Sat',
+    SunAbbreviation: 'Sun'
   },
   ...enLocale
 }

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -114,8 +114,8 @@
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertMessage_expired'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-text1"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -65,13 +65,29 @@
             placement="right"
             trigger="hover"
             :open-delay="300"
+            :width="225"
+            popper-class="schedEnableTitle"
           >
             <div>
-              <div>Schedule : <span class="active-icon inline-block" :class="scope.row.schedEnable ? 'green-bg' : 'red-bg'"></span>{{scope.row.schedEnable ? $t('dashboard.panel.chartForm.lockList.on') : $t('dashboard.panel.chartForm.lockList.off')}}</div>
+              <div class="margin-b-10">
+                Schedule :
+                <el-switch
+                  style="margin-left: 14px"
+                  slot="reference"
+                  v-model="scope.row.schedEnable"
+                  active-color="#ee9d3f"
+                  :active-value="1"
+                  :inactive-value="0"
+                  @change="(val)=>{$emit('statusChange', scope.row)}"
+                />
+              </div>
               <div>
-                <div>Effective configuration：</div>
+                <div class="margin-b-10">Effective configuration：</div>
-                <div>{{weekStr(scope.row.schedDays)}}</div>
+                <div class="margin-b-5" style="display: flex">
-                <div>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
+                  <i class="nz-icon nz-icon-a-rilizhou"/>
+                  <span v-html="weekStr(scope.row.schedDays)"></span>
+                </div>
+                <div ><i class="nz-icon nz-icon-dingshishijian"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
               </div>
             </div>
             <el-switch
@@ -203,25 +219,25 @@ export default {
       weekList: [
         {
           value: 1,
-          label: this.$t('week.Sun')
+          label: this.$t('week.SunAbbreviation')
         }, {
           value: 2,
-          label: this.$t('week.Mon')
+          label: this.$t('week.MonAbbreviation')
         }, {
           value: 3,
-          label: this.$t('week.Tue')
+          label: this.$t('week.TueAbbreviation')
         }, {
           value: 4,
-          label: this.$t('week.Wed')
+          label: this.$t('week.WedAbbreviation')
         }, {
           value: 5,
-          label: this.$t('week.Thu')
+          label: this.$t('week.ThuAbbreviation')
         }, {
           value: 6,
-          label: this.$t('week.Fri')
+          label: this.$t('week.FriAbbreviation')
         }, {
           value: 7,
-          label: this.$t('week.Sat')
+          label: this.$t('week.SatAbbreviation')
         }
       ]
     }
@@ -243,11 +259,7 @@ export default {
       let str = ''
       arr.forEach((item, index) => {
         if (!item) return
-        if (index === arr.length - 1) {
+        str += `<span class="week-item">${this.weekList[item - 1].label}</span>`
-          str += this.weekList[item - 1].label
-        } else {
-          str += this.weekList[item - 1].label + ', '
-        }
       })
       return str
     }
@@ -287,4 +299,28 @@ export default {
   color: #FFFFFF;
   padding: 2px 6px;
 }
+.schedEnableTitle{
+  padding: 15px 20px;
+}
+.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
+  font-size: 14px;
+  color: #FA901C;
+  margin-right: 12px;
+}
+.schedEnableTitle .week-item{
+  width: 32px;
+  height: 22px;
+  line-height: 22px;
+  opacity: 0.9;
+  background: #F7F7FA;
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 12px;
+  color: #666666;
+  letter-spacing: 0;
+  font-weight: 400;
+  padding-left: 3px;
+  margin-right: 12px;
+  margin-bottom: 6px;
+  }
 </style>