fix: 修复一些样式问题

nezha-fronted/src/components/common/popBox/guide.vue

@@ -12,52 +12,52 @@
            @mouseenter="enter(index)"  @mouseleave="leave(index)"
       >
         <div class="item__title">{{guide.title}}</div>
-        <div class="item__icon" @click="jump(guide.route)"><i :class="guide.icon"></i></div>
+        <div :class="{'item__icon--disabled': !hasButton(guide.permissionCode)}" class="item__icon" @click="jump(guide.route)"><i :class="guide.icon"></i></div>
       </div>
     </div>
     <div class="guide-desc">
       <template v-if="activeIndex === 0">
         <div class="desc-text">{{$t('guide.dcTip')}}</div>
         <div class="guide__btn-group">
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('dc_add')}" @click="jumpAndOpen('dc')">{{$t('guide.addDc')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('dc_add')}" @click="jumpAndOpen('cabinet')">{{$t('guide.addCabinet')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('dc_add')}" class="guide__btn" type="button" @click="jumpAndOpen('dc')">{{$t('guide.addDc')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('dc_add')}" class="guide__btn" type="button" @click="jumpAndOpen('cabinet')">{{$t('guide.addCabinet')}}</button>
         </div>
       </template>
       <template v-if="activeIndex === 1">
         <div class="desc-text">{{$t('guide.agentTip')}}</div>
         <div class="guide__btn-group">
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('agent_add')}" @click="jumpAndOpen('agent')">{{$t('guide.addAgent')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('agent_add')}" @click="downloadAgent">{{$t('guide.downloadAgent')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('agent_add')}" class="guide__btn" type="button" @click="jumpAndOpen('agent')">{{$t('guide.addAgent')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('agent_add')}" class="guide__btn" type="button" @click="downloadAgent">{{$t('guide.downloadAgent')}}</button>
         </div>
       </template>
       <template v-if="activeIndex === 2">
         <div class="desc-text">{{$t('guide.assetTip')}}</div>
         <div class="guide__btn-group">
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('asset_add')}" @click="jumpAndOpen('asset')">{{$t('guide.addAsset')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('asset_add')}" @click="jumpAndOpen('importAsset')">{{$t('guide.importAsset')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('asset_add')}" @click="openTerminal">{{$t('guide.webTerminal')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('asset_add')}" class="guide__btn" type="button" @click="jumpAndOpen('asset')">{{$t('guide.addAsset')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('asset_add')}" class="guide__btn" type="button" @click="jumpAndOpen('importAsset')">{{$t('guide.importAsset')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('asset_add')}" class="guide__btn" type="button" @click="openTerminal">{{$t('guide.webTerminal')}}</button>
         </div>
       </template>
       <template v-if="activeIndex === 3">
         <div class="desc-text">{{$t('guide.monitorTip')}}</div>
         <div class="guide__btn-group">
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('project_add')}" @click="jumpAndOpen('project')">{{$t('guide.addProject')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('monitor_module_add')}" @click="jumpAndOpen('module')">{{$t('guide.addModule')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('monitor_endpoint_add')}" @click="jumpAndOpen('endpoint')">{{$t('guide.addEndpoint')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('monitor_endpoint_add')}" @click="jumpAndOpen('importEndpoint')">{{$t('guide.importEndpoint')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('project_add')}" class="guide__btn" type="button" @click="jumpAndOpen('project')">{{$t('guide.addProject')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('monitor_module_add')}" class="guide__btn" type="button" @click="jumpAndOpen('module')">{{$t('guide.addModule')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('monitor_endpoint_add')}" class="guide__btn" type="button" @click="jumpAndOpen('endpoint')">{{$t('guide.addEndpoint')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('monitor_endpoint_add')}" class="guide__btn" type="button" @click="jumpAndOpen('importEndpoint')">{{$t('guide.importEndpoint')}}</button>
         </div>
       </template>
       <template v-if="activeIndex === 4">
         <div class="desc-text">{{$t('guide.visualizationTip')}}</div>
         <div class="guide__btn-group">
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('panel_add')}" @click="jumpAndOpen('panel')">{{$t('guide.addPanel')}}</button>
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('panel_chart_add')}" @click="jumpAndOpen('chart')">{{$t('guide.addChart')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('panel_add')}" class="guide__btn" type="button" @click="jumpAndOpen('panel')">{{$t('guide.addPanel')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('panel_chart_add')}" class="guide__btn" type="button" @click="jumpAndOpen('chart')">{{$t('guide.addChart')}}</button>
         </div>
       </template>
       <template v-if="activeIndex === 5">
         <div class="desc-text">{{$t('guide.alertTip')}}</div>
         <div class="guide__btn-group">
-          <button class="guide__btn" type="button" :class="{'nz-btn-permissions': !hasButton('alertRule_add')}" @click="jumpAndOpen('alertRule')">{{$t('guide.addAlertRule')}}</button>
+          <button :class="{'guide__btn--disabled': !hasButton('alertRule_add')}" class="guide__btn" type="button" @click="jumpAndOpen('alertRule')">{{$t('guide.addAlertRule')}}</button>
         </div>
       </template>
     </div>
@@ -83,42 +83,42 @@ export default {
           title: this.$t('guide.dc'),
           icon: 'nz-icon nz-icon-datacenter1',
           tip: this.$t('guide.dcTip'),
-          buttonPermissions: 'dc_add'
+          permissionCode: 'dc_view'
         },
         {
           route: '/agent',
           title: this.$t('guide.agent'),
           icon: 'nz-icon nz-icon-agent',
           tip: this.$t('guide.agentTip'),
-          buttonPermissions: 'agent_add'
+          permissionCode: 'agent_view'
         },
         {
           route: '/asset',
           title: this.$t('guide.asset'),
           icon: 'nz-icon nz-icon-menu-assets',
           tip: this.$t('guide.assetTip'),
-          buttonPermissions: 'asset_add'
+          permissionCode: 'asset_view'
         },
         {
           route: '/monitor/project',
           title: this.$t('guide.monitor'),
           icon: 'nz-icon nz-icon-menu-project',
           tip: this.$t('guide.monitorTip'),
-          buttonPermissions: 'project_add'
+          permissionCode: 'project_view'
         },
         {
           route: '/panel',
           title: this.$t('guide.visualization'),
           icon: 'nz-icon nz-icon-visualization',
           tip: this.$t('guide.visualizationTip'),
-          buttonPermissions: 'panel_add'
+          permissionCode: 'panel_view'
         },
         {
           route: '/alertRule',
           title: this.$t('guide.alert'),
           icon: 'nz-icon nz-icon-menu-alert',
           tip: this.$t('guide.alertTip'),
-          buttonPermissions: "alertRule_add"
+          permissionCode: 'alertRule_view'
         }
       ],
       interval: null
@@ -157,13 +157,13 @@ export default {
       this.$store.commit('openConsole')
     },
     jump (route) {
-      let buttonPermissions = true
+      let allowed = false
       this.guideList.forEach(ele => {
-        if (!this.hasButton(ele.buttonPermissions)){
-          buttonPermissions = false
+        if (this.hasButton(ele.permissionCode)) {
+          allowed = true
         }
       })
-      if (!buttonPermissions){
+      if (!allowed) {
         return
       }
       this.$emit('close')
@@ -407,6 +407,9 @@ export default {
               color: #ABABAB;
             }
           }
+          .item__icon.item__icon--disabled {
+            cursor: not-allowed;
+          }
         }
         .item__title {
           padding-top: 20px;
@@ -483,9 +486,8 @@ export default {
         .guide__btn:hover {
           opacity: .9;
         }
-        .nz-btn-permissions {
-          pointer-events: none;
-          cursor: default;
+        .guide__btn.guide__btn--disabled {
+          cursor: not-allowed;
           opacity: 0.4;
         }
       }