NEZ-1075 feat: state 样式调整

nezha-fronted/src/assets/css/common.scss

@@ -163,8 +163,8 @@
   }
 }
 .icon {
-  width: 1em;
+  width: 5rem;
-  height: 1em;
+  height: 5rem;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -482,3 +482,10 @@
 .fade-leave-active {
   transition: opacity 1s;
 }
+.right-no-data /deep/ .icon {
+  width: 5rem;
+  height: 5rem;
+}
+.right-no-data {
+  line-height: 21px;
+}

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=1634268820326') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1634874122349') format('woff2'),
-  url('./font/iconfont.woff?t=1634268820326') format('woff'),
+  url('./font/iconfont.woff?t=1634874122349') format('woff'),
-  url('./font/iconfont.ttf?t=1634268820326') format('truetype');
+  url('./font/iconfont.ttf?t=1634874122349') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,46 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-stop:before {
+  content: "\e74a";
+}
+
+.nz-icon-no-data-panel:before {
+  content: "\e748";
+}
+
+.nz-icon-no-data-project:before {
+  content: "\e74f";
+}
+
+.nz-icon-no-data-list:before {
+  content: "\e750";
+}
+
+.nz-icon-ZD:before {
+  content: "\e74e";
+}
+
+.nz-icon-failed:before {
+  content: "\e749";
+}
+
+.nz-icon-unknown-error:before {
+  content: "\e74c";
+}
+
+.nz-icon-over:before {
+  content: "\e74b";
+}
+
+.nz-icon-connecting:before {
+  content: "\e74d";
+}
+
+.nz-icon-label:before {
+  content: "\e747";
+}
+
 .nz-icon-language-change:before {
   content: "\e746";
 }
@@ -393,10 +433,6 @@
   content: "\e6f7";
 }
 
-.nz-icon-ZD:before {
-  content: "\e6f9";
-}
-
 .nz-icon-revoke1:before {
   content: "\e6ee";
 }

nezha-fronted/src/components/charts/chart-list.vue

@@ -5,13 +5,34 @@
     position:relative;
     box-sizing: border-box;
   }
-  .noData{
+  .no-data{
-    text-align: center
+    height: 1189px;
+    width: 100%;
+    position: relative;
+    .icon {
+      width: 5rem;
+      height: 5rem;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -52px;
+      margin-left: -40px;
+      text-align: center;
+    }
+    .no-data-div {
+      position: absolute;
+      font-size: 16px;
+      color: #333333;
+      font-weight: 400;
+      margin-left: -29px;
+      top: 52.5%;
+      left: 50%
+    }
   }
   .list-width{
     width: 100%;
     /*height: 100%;*/
-    padding: 0 10px 5px 20px;
+    padding: 0 10px 5px 10px;
     box-sizing: border-box;
     overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
 
@@ -241,7 +262,13 @@
                       :chart-index="index"></chart-group>
       </div>
    </draggable>
-    <el-row v-if="dataList.length === 0"  class="noData"></el-row>
+<!--    <el-row v-if="dataList.length === 0"  class="noData"></el-row>-->
+    <div v-if="dataList.length === 0" class="no-data">
+      <svg class="icon" aria-hidden="true">
+        <use xlink:href="#nz-icon-no-data-panel"></use>
+      </svg>
+      <div class="no-data-div">No data</div>
+    </div>
     <!--<div class="page-shadow" v-if="showShadow"></div>-->
   </div>
 </template>
@@ -683,7 +710,7 @@ export default {
         if (response.code === 200) {
           setTimeout(() => {
             this.finshGetData = false
-          }, 1000)
+          }, 100)
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
           })

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

@@ -157,7 +157,9 @@ const cn = {
     oid: 'OID格式校验错误',
     normal: '正常',
     unusual: '不正常',
-    AuthenticationFailed: '认证失败'
+    AuthenticationFailed: '认证失败',
+    disabled: '已禁用',
+    enabled: '启用'
   },
   setup: {
     step0: '欢迎',
@@ -718,6 +720,7 @@ const cn = {
     user: {
       userList: '用户列表',
       user: '用户',
+      state: '状态',
       name: '姓名', // "用户"
       username: '登录名', // 登录名
       roles: '角色',

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

@@ -162,7 +162,9 @@ const en = {
     oid: 'OID format check error',
     normal: 'Up',
     unusual: 'Down',
-    AuthenticationFailed: 'Authentication failed'
+    AuthenticationFailed: 'Authentication failed',
+    disabled: 'Disabled',
+    enabled: 'Enabled'
   },
   pageSize: '/page',
   setup: {
@@ -726,6 +728,7 @@ const en = {
     user: {
       userList: 'User list', // "用户列表"
       user: 'User',
+      state: 'State',
       // 列表表头
       name: 'Name', // "用户"
       username: 'Username', // 登录名

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -230,11 +230,9 @@
             </div>
             <div v-show="showNoData" class="topo-noData">
               <svg class="icon" aria-hidden="true">
-                <use xlink:href="#nz-icon-Projectkong"></use>
+                <use xlink:href="#nz-icon-no-data-project"></use>
               </svg>
-              <div style="text-align: center;font-size: 16px;
+              <div class="icon" style="font-size: 16px;color: #333333;font-weight: 400;top: 57%;left: 51%">No data</div>
-color: #333333;
-font-weight: 400;">No data</div>
             </div>
           </div>
           <!--endpoint-->

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

@@ -86,7 +86,7 @@
             </el-select>
           </el-form-item>
           <!--enable-->
-          <el-form-item :label="$t('config.user.enable')">
+          <el-form-item :label="$t('config.user.state')">
             <el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
                        inactive-value="0">
             </el-switch>

nezha-fronted/src/components/common/rightBox/alertRuleBox.vue

@@ -133,11 +133,11 @@
               size="small"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -168,11 +168,11 @@
               size="small"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -189,11 +189,11 @@
               size="small"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -258,11 +258,11 @@
               @change="receiverAndNotifyValidate"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -280,11 +280,11 @@
               @change="receiverAndNotifyValidate"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>

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

@@ -125,6 +125,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -152,7 +160,8 @@ export default {
       type: Boolean,
       default: true
     },
-    alertMessageTabNew: Boolean
+    alertMessageTabNew: Boolean,
+    loading: Boolean
   },
   mixins: [table, bus],
   data () {

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

@@ -90,15 +90,23 @@
                 <div ><i class="nz-icon nz-icon-dingshishijian"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
               </div>
             </div>
-            <el-switch
+<!--            <el-switch-->
-              slot="reference"
+<!--              slot="reference"-->
-              v-model="scope.row.state"
+<!--              v-model="scope.row.state"-->
-              :disabled="!hasButton('dc_edit') || !hasButton('dc_edit') || !!Number(scope.row.buildIn)"
+<!--              :disabled="!hasButton('dc_edit') || !hasButton('dc_edit') || !!Number(scope.row.buildIn)"-->
-              active-color="#ee9d3f"
+<!--              active-color="#ee9d3f"-->
-              :active-value="1"
+<!--              :active-value="1"-->
-              :inactive-value="0"
+<!--              :inactive-value="0"-->
-              @change="(val)=>{$emit('statusChange', scope.row)}"
+<!--              @change="(val)=>{$emit('statusChange', scope.row)}"-->
-            />
+<!--            />-->
+            <div slot="reference" v-if="scope.row[item.prop] === 1">
+              <div class="active-icon green-bg inline-block"></div>
+              {{ $t('overall.enabled') }}
+            </div>
+            <div slot="reference" v-else-if="scope.row[item.prop] === 0">
+              <div class="active-icon red-bg inline-block"></div>
+              {{ $t('overall.disabled') }}
+            </div>
           </el-popover>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -125,6 +133,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -134,6 +150,9 @@ import chartDataFormat from '@/components/charts/chartDataFormat'
 export default {
   name: 'alertRuleTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -102,6 +102,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -116,6 +124,9 @@ export default {
     nzAlertTag
   },
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       /* 表格相关 */

nezha-fronted/src/components/common/table/asset/assetMetaTable.vue

@@ -81,6 +81,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -89,6 +97,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'assetLabelTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -130,6 +130,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -149,7 +157,8 @@ export default {
       type: Boolean,
       default: true
     },
-    assetTab: Boolean
+    assetTab: Boolean,
+    loading: Boolean
   },
   data () {
     return {

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

@@ -69,6 +69,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -77,6 +85,9 @@ import table from '@/components/common/mixin/table'
 import { agent } from '@/components/common/js/constants'
 export default {
   name: 'agentTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table],
   data () {
     return {

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

@@ -83,6 +83,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -90,6 +98,9 @@
 import table from '@/components/common/mixin/table'
 export default {
   name: 'asstTypeTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table],
   data () {
     return {

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

@@ -50,6 +50,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -60,6 +68,9 @@ export default {
   name: 'cabinet Table',
   components: { Template },
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -64,6 +64,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -73,6 +81,9 @@ import { chart as chartConstant } from '@/components/common/js/constants'
 export default {
   name: 'chartTmplTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       chartTypeList: chartConstant.type,

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

@@ -83,6 +83,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -90,6 +98,9 @@
 import table from '@/components/common/mixin/table'
 export default {
   name: 'credentialsTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table],
   data () {
     return {

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

@@ -41,14 +41,14 @@
           <template v-else>-</template>
         </template>
         <template v-else-if="item.prop === 'state'">
-          <el-switch
+          <div v-if="scope.row[item.prop] === 'ON'">
-            v-model="scope.row.state"
+            <div class="active-icon green-bg inline-block"></div>
-            :disabled="!hasButton('dc_edit') || !hasButton('dc_edit')"
+            {{ $t('overall.enabled') }}
-            active-color="#ee9d3f"
+          </div>
-            active-value="ON"
+          <div v-else-if="scope.row[item.prop] === 'OFF'">
-            inactive-value="OFF"
+            <div class="active-icon red-bg inline-block"></div>
-            @change="(val)=>{$emit('statusChange', scope.row)}"
+            {{ $t('overall.disabled') }}
-          />
+          </div>
         </template>
         <template v-else-if="item.prop === 'longitude'">
           <template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
@@ -99,6 +99,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
+
   </el-table>
 </template>
 
@@ -108,6 +117,9 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
 export default {
   name: 'dcTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       regNum: /^[0-9]+.?[0-9]*/,

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

@@ -184,6 +184,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -201,7 +209,8 @@ export default {
       type: Boolean,
       default: true
     },
-    endpointTab: Boolean
+    endpointTab: Boolean,
+    loading: Boolean
   },
   data () {
     return {

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

@@ -56,6 +56,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -64,6 +72,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'exprTmplTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -72,6 +72,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -80,6 +88,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'menuTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原table列

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

@@ -89,6 +89,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -98,6 +106,9 @@ import axios from 'axios'
 export default {
   name: 'mibTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -76,6 +76,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -84,6 +92,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'modelTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原始table列

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

@@ -81,6 +81,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -89,6 +97,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'moduleTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原始table列

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

@@ -45,6 +45,14 @@
         <span v-else>-</span>
       </template>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -53,6 +61,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'operationLog',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -80,6 +80,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -88,6 +96,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'projectTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原始table列

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

@@ -64,6 +64,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -72,6 +80,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'roleTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原table列

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

@@ -103,6 +103,14 @@
         </template>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -116,7 +124,8 @@ export default {
   props: {
     nowTime: {},
     terminalLogTab: Boolean,
-    terminalLog: Boolean
+    terminalLog: Boolean,
+    loading: Boolean
   },
   data () {
     return {

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

@@ -54,14 +54,14 @@
           </template>
         </template>
         <template v-else-if="item.prop === 'status'">
-          <el-switch
+          <div v-if="scope.row[item.prop] === 1">
-            v-model="scope.row.status"
+            <div class="active-icon green-bg inline-block"></div>
-            :active-color="theme.themeColor"
+            {{ $t('overall.enabled') }}
-            :disabled="isCurrentUser(scope.row.username) || !hasButton('user_edit') || (scope.row.username === 'admin' && scope.row.id === 1)"
+          </div>
-            active-value="1"
+          <div v-else-if="scope.row[item.prop] === 0">
-            inactive-value="0"
+            <div class="active-icon red-bg inline-block"></div>
-            @change="val => {statusChange(scope.row)}">
+            {{ $t('overall.disabled') }}
-          </el-switch>
+          </div>
         </template>
         <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <span v-else-if="item.prop === 'lastLoginTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
@@ -93,6 +93,14 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template v-if="!loading" slot="empty">
+      <div class="right-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -101,6 +109,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'userTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原始table列
@@ -154,7 +165,7 @@ export default {
           show: true,
           width: 150
         }, {
-          label: this.$t('config.user.enable'),
+          label: this.$t('config.user.state'),
           prop: 'status',
           show: true,
           width: 100

nezha-fronted/src/components/page/asset/asset.vue

@@ -52,6 +52,7 @@
         <asset-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -23,6 +23,7 @@
         <agent-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -41,6 +41,7 @@
         <asset-meta-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -22,6 +22,7 @@
           id="role-list-table"
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :data="tableData"
           :height="mainTableHeight"
           border

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

@@ -20,6 +20,7 @@
         <asset-type-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -31,6 +31,7 @@
         <credentials-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -41,6 +41,7 @@
         <dc-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -18,6 +18,7 @@
         <menu-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -31,6 +31,7 @@
         <mib-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -41,6 +41,7 @@
         <model-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -12,6 +12,7 @@
         <operation-log-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -20,6 +20,7 @@
           v-if="profileShow"
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -20,6 +20,7 @@
         <role-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

nezha-fronted/src/components/page/config/system/apiKeyTab.vue

@@ -20,6 +20,7 @@
         <api-key-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :table-id="tableId"
           :api="url"
           :custom-table-title="tools.customTableTitle"

nezha-fronted/src/components/page/config/system/apiKeyTable.vue

@@ -98,6 +98,14 @@
           </template>
         </div>
       </el-table-column>
+      <template v-if="!loading" slot="empty">
+        <div class="right-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+        </div>
+      </template>
     </el-table>
 </template>
 
@@ -106,6 +114,9 @@ import { tableCommon } from './systemCommon'
 import table from '@/components/common/mixin/table'
 export default {
   name: 'apiKeyTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table, tableCommon],
   data () {
     return {

nezha-fronted/src/components/page/config/system/linkTab.vue

@@ -20,6 +20,7 @@
         <link-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :table-id="tableId"
           :api="url"
           :custom-table-title="tools.customTableTitle"

nezha-fronted/src/components/page/config/system/linkTable.vue

@@ -77,6 +77,14 @@
           </template>
         </div>
       </el-table-column>
+      <template v-if="!loading" slot="empty">
+        <div class="right-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+        </div>
+      </template>
     </el-table>
 </template>
 
@@ -86,6 +94,9 @@ import bus from '../../../../libs/bus'
 import table from '@/components/common/mixin/table'
 export default {
   name: 'linkTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table, tableCommon],
   data () {
     return {

nezha-fronted/src/components/page/config/system/notifyMethodTab.vue

@@ -21,6 +21,7 @@
         <notify-method-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :table-id="tableId"
           :api="url"
           :custom-table-title="tools.customTableTitle"

nezha-fronted/src/components/page/config/system/notifyMethodTable.vue

@@ -87,6 +87,14 @@
           </template>
         </div>
       </el-table-column>
+      <template v-if="!loading" slot="empty">
+        <div class="right-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div style="font-size: 16px;color: #333333;font-weight: 400;">No results found</div>
+        </div>
+      </template>
     </el-table>
 </template>
 
@@ -95,6 +103,9 @@ import table from '@/components/common/mixin/table'
 import { tableCommon } from './systemCommon'
 export default {
   name: 'notifyMethodTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table, tableCommon],
   data () {
     return {

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

@@ -12,6 +12,7 @@
         <terminal-log-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

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

@@ -20,6 +20,7 @@
         <user-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -79,7 +79,7 @@
           </template>
         </div>
         <div id="tableList" class="table-list">
-          <div ref="dashboardScrollbar" :class="overScroll10?'border-t-1-de':'border-t-1-tr'" id="dashboardScrollbar" style="height: calc(100% - 20px); overflow: auto;">
+          <div ref="dashboardScrollbar" id="dashboardScrollbar" class="border-t-1-de" style="height: calc(100% - 20px); overflow: auto;">
             <div class="box-content">
               <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @on-add-group-item-chart="addGroupItem"></chart-list>
             </div>
@@ -892,6 +892,7 @@ export default {
 <style lang="scss">
   .border-t-1-de{
     border-top: 1px solid #dedede;
+    padding-top: 10px;
   }
   .border-t-1-tr{
     border-top: 1px solid transparent;

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -54,6 +54,7 @@
         <endpoint-table
           ref="dataTable"
            v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -40,6 +40,7 @@
         <module-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :tableId="tableId"
           :custom-table-title="tools.customTableTitle"

nezha-fronted/src/components/page/monitor/project/projectList.vue

@@ -21,6 +21,7 @@
         <project-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="projectTableHeight"