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

package/components/nav/Group.vue

@@ -8,11 +8,6 @@ export default {
   emits: ['expand', 'close'],
 
   props: {
-    loginName: {
-      type:    String,
-      default: '',
-    },
-
     depth: {
       type:    Number,
       default: 0,
@@ -51,16 +46,8 @@ 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, icons };
+    return { id, expanded: false };
   },
 
   computed: {
@@ -237,51 +224,41 @@ 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"
-      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()"
+      v-if="showHeader || (!onlyHasOverview && canCollapse)"
+      class="accordion-item"
     >
-      
-    <!-- 具名插槽 header，允许外部自定义标题内容 -->
-      <slot name="header">
-
-        <!-- 如果分组有概览页（overview） 跳转到第一个子路由 -->
-        <h6 v-if="hasOverview">
+      <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">
           <router-link
-            class="menuRouterLink"
+            v-if="hasOverview"
             :to="group.children[0].route"
             :exact="group.children[0].exact"
             :tabindex="-1"
           >
-            <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>
+              <span v-clean-html="group.labelDisplay || group.label" />
+            </h6>
           </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>
-      
-      <!-- 折叠/展开图标 -->
+          <h6
+            v-else
+          >
+            <span v-clean-html="group.labelDisplay || group.label" />
+          </h6>
+        </slot>
+      </div>
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle toggle-accordion"
@@ -294,8 +271,6 @@ export default {
         @keyup.space="peek($event, true)"
       />
     </div>
-
-    <!-- 子列表（Accordion 内容） -->
     <ul
       v-if="isExpanded"
       class="list-unstyled body"
@@ -305,7 +280,6 @@ 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"
@@ -351,20 +325,21 @@ export default {
     position: relative;
     cursor: pointer;
     color: var(--body-text);
-    height: 50px;
+    height: 33px;
+    outline: none;
 
     H6 {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
       font-size: 14px;
-      .menuRouterLink {
-        color: var(--body-text);
-        user-select: none;
+    }
+
+    > H6 {
         text-transform: none;
-        font-size: 14px;
+        height: 100%;
+        padding: 8px 0 8px 16px;
       }
-    }
 
     > A {
       display: block;
@@ -384,6 +359,19 @@ 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 {
@@ -391,40 +379,30 @@ export default {
           outline-offset: 2px;
         }
       }
-      .toggle-accordion:focus-visible {
-        @include focus-outline;
-        outline-offset: -6px;
-      }
 
       &.active {
-        color: var(--nav-hover-color);
-        background-color: var(--nav-active);
+        color: var(--primary-hover-text);
+        background-color: var(--primary-hover-bg);
 
         h6 {
-          /* padding: 8px 0 8px 16px;
-          font-weight: bold; */
-          color: var(--nav-hover-color);
-          .menuRouterLink {
-            color: var(--nav-hover-color);
-          }
-        }
-        I{
-          color: var(--nav-hover-color);
+          padding: 8px 0 8px 16px;
+          font-weight: bold;
+          color: var(--primary-hover-text);
         }
 
-        /* &:hover {
+        &:hover {
           background-color: var(--primary-hover-bg);
-        } */
+        }
+
+        ~ I {
+          color: var(--primary-hover-text);
+        }
       }
       &:hover:not(.active) {
-        background-color: var(--nav-active);
-        color: var(--nav-hover-color);
-        h6{
-          color: var(--nav-hover-color);
-          .menuRouterLink {
-            color: var(--nav-hover-color);
-          }
-        }
+        background-color: var(--nav-hover);
+      }
+      &:hover:not(.active).noHover {
+        background-color: inherit;
       }
     }
   }
@@ -432,92 +410,83 @@ 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;
-          line-height: 50px;
-          display: flex;
-          align-items: center;
+          padding: 8px 0 8px 16px;
         }
+      }
 
-        > I {
-          position: absolute;
-          right: 0;
-          top: 0;
-          padding: 0px 20px 0px 0px;
-          user-select: none;
-          line-height: 50px;
-        }
+      .accordion-item > I {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 10px 10px 9px 7px;
+        user-select: none;
       }
 
       > .body {
         margin-left: 0;
       }
+
+      &.group-highlight {
+        background: var(--nav-active);
+      }
     }
 
     &.depth-1 {
       > .header {
-        line-height: 50px;
+        padding-left: 20px;
         > H6 {
-          font-size: 13px;
-          line-height: 16px;
+          line-height: 18px;
           padding: 8px 0 7px 5px !important;
         }
-        > I {
-          padding: 9px 7px 8px 7px !important;
-        }
+
       }
 
+      .accordion-item > I {
+        padding: 10px 7px 9px 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;
         }
+      }
 
-        > I {
-          position: absolute;
-          right: 0;
-          top: 0;
-          padding: 0px 20px 0px 0px !important;
-          user-select: none;
-          line-height: 50px;
-        }
+      .accordion-item > I {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 6px 8px 6px 8px;
       }
     }
   }
 
   .body :deep() > .child.router-link-active,
-  .header :deep() > .child.router-link-exact-active {
+  .accordion-item :deep() > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {
-      /* color: var(--primary-hover-text); */
-      color: var(--nav-hover-color);
-      .menuRouterLink {
-        color: var(--nav-hover-color);
-      }
+      color: var(--primary-hover-text);
     }
 
     A {
-      background-color: var(--nav-active);
-      ::v-deep .icon {
-          /* color: var(--body-text); */
-          color: var(--nav-hover-color);
-        }
+      color: var(--primary-hover-text);
+      background-color: var(--primary-hover-bg);
+      font-weight: bold;
     }
   }
 
@@ -526,6 +495,9 @@ export default {
       border-left: solid 5px transparent;
       line-height: 16px;
       font-size: 14px;
+      padding-left: 24px;
+      display: flex;
+      justify-content: space-between;
     }
 
     A:focus {
@@ -535,13 +507,8 @@ export default {
     &.root {
       background: transparent;
       A {
-        padding-left: 19px;
+        padding-left: 14px;
       }
     }
   }
-
-  .init_icon{
-    font-size: 32px;
-    padding-left: 0px;
-  }
 </style>