dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

package/components/nav/Group.vue

@@ -8,6 +8,11 @@ export default {
   emits: ['expand', 'close'],
 
   props: {
+    loginName: {
+      type:    String,
+      default: '',
+    },
+
     depth: {
       type:    Number,
       default: 0,
@@ -46,8 +51,16 @@ export default {
 
   data() {
     const id = (this.idPrefix || '') + this.group.name;
+    const icons = {
+      '虚拟机管理': 'icon-backupandsnapshot',
+      '网络管理': 'icon-networks',
+      '镜像管理': 'icon-imagelist',
+      '资源管理': 'icon-sorcetype',
+      '运维管理': 'icon-monitoringandlogging'
+    }
+    
 
-    return { id, expanded: false };
+    return { id, expanded: false, icons };
   },
 
   computed: {
@@ -224,41 +237,51 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive }"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive}"
   >
+    <!-- 分组标题区 -->
     <div
-      v-if="showHeader || (!onlyHasOverview && canCollapse)"
-      class="accordion-item"
+      v-if="showHeader"
+      class="header"
+      :class="{'active': isOverview, 'noHover': !canCollapse}"
+      role="button"
+      tabindex="0"
+      :aria-label="group.labelDisplay || group.label || ''"
+      @click="groupSelected()"
+      @keyup.enter="groupSelected()"
+      @keyup.space="groupSelected()"
     >
-      <div
-        v-if="showHeader"
-        class="header"
-        :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
-        role="button"
-        :tabindex="fixedOpen ? -1 : 0"
-        :aria-label="group.labelDisplay || group.label || ''"
-        @click="groupSelected()"
-        @keyup.enter="groupSelected()"
-        @keyup.space="groupSelected()"
-      >
-        <slot name="header">
+      
+    <!-- 具名插槽 header，允许外部自定义标题内容 -->
+      <slot name="header">
+
+        <!-- 如果分组有概览页（overview） 跳转到第一个子路由 -->
+        <h6 v-if="hasOverview">
           <router-link
-            v-if="hasOverview"
+            class="menuRouterLink"
             :to="group.children[0].route"
             :exact="group.children[0].exact"
             :tabindex="-1"
           >
-            <h6>
-              <span v-clean-html="group.labelDisplay || group.label" />
-            </h6>
-          </router-link>
-          <h6
-            v-else
-          >
+            <i v-if="!group.labelDisplay || (group.labelDisplay && group.labelDisplay.indexOf('</i>') === -1)" class="icon" :class="icons[group.label] ? icons[group.label] + ' init_icon' : 'icon-globe'" style="color: var(--muted);width: 32px;" />
             <span v-clean-html="group.labelDisplay || group.label" />
-          </h6>
-        </slot>
-      </div>
+          </router-link>
+        </h6>
+        <!-- 虚拟机管理：icon-backupandsnapshot -->
+        <!-- 网络管理：icon-networks -->
+        <!-- 镜像管理：icon-imagelist -->
+        <!-- 资源管理：icon-sorcetype -->
+        <!-- 运维管理：icon-monitoringandlogging -->
+        <!-- 没有概览页的情况 -->
+        <h6
+          v-else
+        >
+          <i v-if="!group.labelDisplay || (group.labelDisplay && group.labelDisplay.indexOf('</i>') === -1)" class="icon" :class="icons[group.label] ? icons[group.label] + ' init_icon' : 'icon-globe'" style="color: var(--muted);width: 32px;" />
+          <span v-clean-html="group.labelDisplay || group.label" />
+        </h6>
+      </slot>
+      
+      <!-- 折叠/展开图标 -->
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle toggle-accordion"
@@ -271,6 +294,8 @@ export default {
         @keyup.space="peek($event, true)"
       />
     </div>
+
+    <!-- 子列表（Accordion 内容） -->
     <ul
       v-if="isExpanded"
       class="list-unstyled body"
@@ -280,6 +305,7 @@ export default {
         v-for="(child, idx) in group[childrenKey]"
         :key="idx"
       >
+        <!-- <template v-if="!(loginName && loginName !== 'admin' && child.label === '资源大盘')"></template> -->
         <li
           v-if="child.divider"
           :key="idx"
@@ -325,21 +351,20 @@ export default {
     position: relative;
     cursor: pointer;
     color: var(--body-text);
-    height: 33px;
-    outline: none;
+    height: 50px;
 
     H6 {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
       font-size: 14px;
-    }
-
-    > H6 {
+      .menuRouterLink {
+        color: var(--body-text);
+        user-select: none;
         text-transform: none;
-        height: 100%;
-        padding: 8px 0 8px 16px;
+        font-size: 14px;
       }
+    }
 
     > A {
       display: block;
@@ -359,19 +384,6 @@ export default {
   }
 
   .accordion {
-    .accordion-item {
-      position: relative;
-      cursor: pointer;
-      color: var(--body-text);
-      height: 33px;
-      outline: none;
-
-      .toggle-accordion:focus-visible {
-        @include focus-outline;
-        outline-offset: -6px;
-      }
-    }
-
     .header {
       &:focus-visible {
         h6 span {
@@ -379,30 +391,40 @@ export default {
           outline-offset: 2px;
         }
       }
+      .toggle-accordion:focus-visible {
+        @include focus-outline;
+        outline-offset: -6px;
+      }
 
       &.active {
-        color: var(--primary-hover-text);
-        background-color: var(--primary-hover-bg);
+        color: var(--nav-hover-color);
+        background-color: var(--nav-active);
 
         h6 {
-          padding: 8px 0 8px 16px;
-          font-weight: bold;
-          color: var(--primary-hover-text);
+          /* padding: 8px 0 8px 16px;
+          font-weight: bold; */
+          color: var(--nav-hover-color);
+          .menuRouterLink {
+            color: var(--nav-hover-color);
+          }
         }
-
-        &:hover {
-          background-color: var(--primary-hover-bg);
+        I{
+          color: var(--nav-hover-color);
         }
 
-        ~ I {
-          color: var(--primary-hover-text);
-        }
+        /* &:hover {
+          background-color: var(--primary-hover-bg);
+        } */
       }
       &:hover:not(.active) {
-        background-color: var(--nav-hover);
-      }
-      &:hover:not(.active).noHover {
-        background-color: inherit;
+        background-color: var(--nav-active);
+        color: var(--nav-hover-color);
+        h6{
+          color: var(--nav-hover-color);
+          .menuRouterLink {
+            color: var(--nav-hover-color);
+          }
+        }
       }
     }
   }
@@ -410,83 +432,92 @@ export default {
   .accordion {
     &.depth-0 {
       > .header {
+        /* padding: 8px 0; */
+        padding: 0px 0px 0px 20px;
+        height: 50px;
 
         &.noHover {
           cursor: default;
         }
 
         > H6 {
+          font-size: 14px;
           text-transform: none;
-          padding: 8px 0 8px 16px;
+          line-height: 50px;
+          display: flex;
+          align-items: center;
         }
-      }
 
-      .accordion-item > I {
-        position: absolute;
-        right: 0;
-        top: 0;
-        padding: 10px 10px 9px 7px;
-        user-select: none;
+        > I {
+          position: absolute;
+          right: 0;
+          top: 0;
+          padding: 0px 20px 0px 0px;
+          user-select: none;
+          line-height: 50px;
+        }
       }
 
       > .body {
         margin-left: 0;
       }
-
-      &.group-highlight {
-        background: var(--nav-active);
-      }
     }
 
     &.depth-1 {
       > .header {
-        padding-left: 20px;
+        line-height: 50px;
         > H6 {
-          line-height: 18px;
+          font-size: 13px;
+          line-height: 16px;
           padding: 8px 0 7px 5px !important;
         }
-
-      }
-
-      .accordion-item > I {
-        padding: 10px 7px 9px 7px !important;
+        > I {
+          padding: 9px 7px 8px 7px !important;
+        }
       }
 
-      &:deep() .type-link > .label {
-        padding-left: 10px;
-      }
     }
 
     &:not(.depth-0) {
       > .header {
+        padding-left: 30px;
+        line-height: 50px;
         > H6 {
           // Child groups that aren't linked themselves
           display: inline-block;
           padding: 5px 0 5px 5px;
         }
-      }
 
-      .accordion-item > I {
-        position: absolute;
-        right: 0;
-        top: 0;
-        padding: 6px 8px 6px 8px;
+        > I {
+          position: absolute;
+          right: 0;
+          top: 0;
+          padding: 0px 20px 0px 0px !important;
+          user-select: none;
+          line-height: 50px;
+        }
       }
     }
   }
 
   .body :deep() > .child.router-link-active,
-  .accordion-item :deep() > .child.router-link-exact-active {
+  .header :deep() > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {
-      color: var(--primary-hover-text);
+      /* color: var(--primary-hover-text); */
+      color: var(--nav-hover-color);
+      .menuRouterLink {
+        color: var(--nav-hover-color);
+      }
     }
 
     A {
-      color: var(--primary-hover-text);
-      background-color: var(--primary-hover-bg);
-      font-weight: bold;
+      background-color: var(--nav-active);
+      ::v-deep .icon {
+          /* color: var(--body-text); */
+          color: var(--nav-hover-color);
+        }
     }
   }
 
@@ -495,9 +526,6 @@ export default {
       border-left: solid 5px transparent;
       line-height: 16px;
       font-size: 14px;
-      padding-left: 24px;
-      display: flex;
-      justify-content: space-between;
     }
 
     A:focus {
@@ -507,8 +535,13 @@ export default {
     &.root {
       background: transparent;
       A {
-        padding-left: 14px;
+        padding-left: 19px;
       }
     }
   }
+
+  .init_icon{
+    font-size: 32px;
+    padding-left: 0px;
+  }
 </style>