dashboard-shell-shell 3.0.5-test.1 → 3.0.5-test.2

package/components/ResourceList/Masthead.vue

@@ -154,21 +154,18 @@ export default {
       return this.$store.getters['i18n/t'](`typeDescription."${ key.toLowerCase() }"`);
     },
     demoDisplay() {
+
+      const product = this.$store.getters['productId'];
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
+      const parts = productId?.split('::');
+      const newString = 'root';
+
       // const product = this.$store.getters['productId'];
       // const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
 
       // const parts = productId?.split('::') || [];
       // const newString = 'root';
 
-      // if (!parts.includes(newString)) {
-      //   parts.unshift(newString); // 将字符串添加到数组第一位
-      // }
-      
-      // const partsEn = parts.map((item) => {  
-      //   return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
-      // });
-
-      // return partsEn;
       
       const breadcrumbList = {
         'harvesterhci.io.management.cluster': {
@@ -198,9 +195,19 @@ export default {
       if (breadcrumbList[resourcePath] && Object.keys(breadcrumbList[resourcePath]).length > 0) {
         breadcrumb.push(...breadcrumbList[resourcePath].bread)
         this.description = breadcrumbList[resourcePath].description
+        return breadcrumb
+      } else {
+        if (!parts?.includes(newString)) {
+          parts?.unshift(newString); // 将字符串添加到数组第一位
+        }
+        
+        const partsEn = parts?.map((item) => {  
+          return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+        });
+
+        return partsEn;
       }
 
-      return breadcrumb
     },
 
     _isYamlCreatable() {
@@ -253,6 +260,9 @@ export default {
       this.resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const width = entry?.contentRect?.width && entry.contentRect.width > 0 ? entry.contentRect.width + 10 : 0
+
+          console.log(width, ' width----------------------------')
+
           this.$store.commit('type-map/setActionsWidth', width)
         }
       })
@@ -265,7 +275,6 @@ export default {
 </script>
 
 <template>
-  <!-- 顶部 header，带有子标题（subheader）样式类 -->
   <header class="with-subheader">
     <div style="display: flex;width: 100%;">
       <div style="flex: 1;">
@@ -354,7 +363,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-
   .title {
     /* align-items: center;
     display: flex; */

package/components/Tabbed/Tab.vue

@@ -118,7 +118,7 @@ export default {
 .tab-header {
   display: flex;
   justify-content: space-between;
-  // margin-bottom: 15px;
+  /* margin-bottom: 15px; */
   align-items: center;
 
   h2 {

package/components/Tabbed/index.vue

@@ -293,7 +293,7 @@ export default {
           :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
-          role="tab"
+          role="tab"  
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -382,22 +382,14 @@ export default {
   margin: 0;
   padding: 0;
 
-  &:focus-visible {
-    outline: none;
-
-    .tab.active {
-      @include focus-outline;
-      outline-offset: -2px;
-    }
-  }
-
   &.horizontal {
-    border-bottom: solid 1px var(--border);
+    border: solid thin var(--border);
+    border-bottom: 0;
     display: flex;
     flex-direction: row;
 
     + .tab-container {
-      // border: solid thin var(--border);
+      border: solid thin var(--border);
     }
 
     .tab.active {
@@ -405,13 +397,18 @@ export default {
     }
   }
 
-  &:focus .tab.active a span {
-    text-decoration: underline;
+  &:focus {
+    outline: none;
+
+    & .tab.active a span {
+      text-decoration: none;
+    }
   }
 
   .tab {
     position: relative;
     float: left;
+    padding: 0 8px 0 0;
     cursor: pointer;
 
     A {
@@ -422,7 +419,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: underline;
+          text-decoration: none;
         }
       }
     }
@@ -461,7 +458,7 @@ export default {
 }
 
 .tab-container {
-  padding: 20px 0;
+  padding: 20px;
 
   &.no-content {
     padding: 0 0 3px 0;
@@ -492,49 +489,71 @@ export default {
 
 .side-tabs {
   display: flex;
-  border: 1px solid var(--border);
-
+  flex-direction: column;
+  /* box-shadow: 0 0 20px var(--shadow);
+  border-radius: calc(var(--border-radius) * 2);
+  background-color: var(--tabbed-sidebar-bg); */
+margin: 0px -20px;
   .tab-container {
     padding: 20px;
   }
 
   & .tabs {
-    width: $sideways-tabs-width;
-    min-width: $sideways-tabs-width;
+    /* width: $sideways-tabs-width; */
+    /* min-width: $sideways-tabs-width; */
     display: flex;
-    flex: 1 0;
-    flex-direction: column;
-    border-right: 1px solid var(--border);
+    border-bottom:1px solid #d7d7d7;
+    padding: 0 0 0 20px;
+    /* flex: 1 0; */
+    /* flex-direction: column; */
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
-
     & .tab {
-      min-width: 130px !important;
+      /* width: 100%; */
+      min-width: 120px;
+      height: 36px;
+      /* border-top: solid 5px transparent; */
+      display: flex;
+      justify-content: center;
+      padding: 8px 16px;
+      box-sizing: border-box;
+      border: 1px solid #d7d7d7;
+      border-bottom: 0px;
+      margin-right: 5px;
+      border-radius: 2px;
 
       &.toggle A {
         color: var(--primary);
+        padding: 0px;
       }
 
       A {
-        color: var(--primary);
+        color: var(--input-label);
+        padding: 0px;
       }
 
       &.active {
-        background-color: var(--nav-active);
+        background-color: var(--body-bg);
+        border-top: solid 2px var(--primary);
+        position: relative;
+        &.active::before{
+          position: absolute;
+          right: 0;
+          left: 0;
+          top: 34px;
+          border-bottom: 1px solid #fff;
+          content: '';
 
+        }
         & A {
           color: var(--primary);
         }
       }
 
-      :hover {
-        background-color: var(--nav-active);
-      }
-
       &.disabled {
         background-color: var(--disabled-bg);
 
@@ -575,7 +594,7 @@ export default {
   &
 
   .tab-container {
-    width: calc(100% - #{$sideways-tabs-width});
+    /* width: calc(100% - #{$sideways-tabs-width}); */
     flex-grow: 1;
     background-color: var(--body-bg);
   }

package/components/form/NameNsDescription.vue

@@ -360,7 +360,7 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-5`;
+        return `span-6`;
       }
       // Name and namespace take up two columns.
       // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
@@ -439,8 +439,8 @@ export default {
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-5"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
+      class="col span-6"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
       style="display: flex;"
     >
 
@@ -473,7 +473,7 @@ export default {
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -518,7 +518,7 @@ export default {
     <!-- <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
-      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-5']"
+      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
     > -->
 
     <!-- 额外的动态列 -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard-shell-shell",
-  "version": "3.0.5-test.1",
+  "version": "3.0.5-test.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",