dashboard-shell-shell 3.0.5-test.9 → 3.0.5-tsh.10

package/components/breadcrumb/index.vue

@@ -1,54 +1,18 @@
 <script>
-import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';;
-import {
-  AS, _DETAIL, _CONFIG, _YAML, MODE, _CREATE, _EDIT, _VIEW, _UNFLAG, _GRAPH
-} from '@shell/config/query-params';
-import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 import { useStore } from 'vuex';
 
-// i18n-uses resourceDetail.header.*
-
-/**
- * Resource Detail Masthead component.
- *
- * ToDo: this component seem to be picking up a lot of logic from special cases, could be simplified down to parameters and then customized per use-case via wrapper component
- */
 export default {
 
-  name: 'MastheadResourceDetail',
+  name: 'MastheadBreadcrumb',
 
   components: {
-    // BadgeState,
-    Banner,
   },
   props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    },
-
-    mode: {
-      type:    String,
-      default: 'view'
-    },
-
-    realMode: {
-      type:    String,
-      default: 'view'
-    },
-
-    as: {
+    resourceTypeLabel: {
       type:    String,
-      default: _YAML,
-    },
-
-    storeOverride: {
-      type:    String,
-      default: null,
+      default: ''
     },
 
     resource: {
@@ -56,15 +20,10 @@ export default {
       default: null,
     },
 
-    resourceSubtype: {
-      type:    String,
-      default: null,
-    },
-
-    parentRouteOverride: {
+    realMode: {
       type:    String,
-      default: null,
-    },
+      default: 'view',
+    }
 
   },
 
@@ -77,97 +36,21 @@ export default {
 
   data() {
     return {
-      DETAIL_VIEW:       _DETAIL,
-      extensionType:     ExtensionPoint.PANEL,
-      extensionLocation: PanelLocation.DETAILS_MASTHEAD,
-      Svg:               require('~shell/assets/images/API.svg')
     };
   },
 
   computed: {
-    dev() {
-      return this.$store.getters['prefs/dev'];
-    },
-
-    schema() {
-      const inStore = this.storeOverride || this.$store.getters['currentStore'](this.resource);
-
-      return this.$store.getters[`${ inStore }/schemaFor`]( this.resource );
-    },
-
-    isProjectHelmChart() {
-      return this.schema?.id === HELM.PROJECTHELMCHART;
-    },
-
-    shouldHifenize() {
-      return (this.mode === 'view' || this.mode === 'edit') && this.resourceSubtype?.length && this.value?.nameDisplay?.length;
-    },
-
-    parent() {
-      const displayName = this.value?.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
-      const product = this.$store.getters['currentProduct'].name;
-
-      const defaultLocation = {
-        name:   'c-cluster-product-resource',
-        params: {
-          resource: this.resource,
-          product,
-        }
-      };
-
-      const location = this.value?.parentLocationOverride || defaultLocation;
-
-      if (this.parentRouteOverride) {
-        location.name = this.parentRouteOverride;
-      }
-
-      const typeOptions = this.$store.getters[`type-map/optionsFor`]( this.resource );
-
-      // 转换为中文
-      const displayName_zh_hans = {
-        'GlobalRole': '全局角色',
-        'RoleTemplate': '集群角色',
-      }
-      if (displayName_zh_hans[displayName]) {
-        displayName = displayName_zh_hans[displayName]
-      }
-      
-      if (displayName == '集群角色' && (this.$route.query?.roleContext == 'NAMESPACE' || location.hash == '#NAMESPACE')) {
-        displayName = '项目或资源组角色'
-      }
-
-      const out = {
-        displayName, location, ...typeOptions
-      };
-
-      return out;
-    },
-
-
-    displayName() {
-      let displayName = this.value.nameDisplay;
-
-      if (this.isProjectHelmChart) {
-        displayName = this.value.projectDisplayName;
-      }
-
-      return this.shouldHifenize ? ` - ${ displayName }` : displayName;
-    },
 
     demoDisplay() {
 
       const resources = this.$route.params?.resource || ''
-      
-      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
-      
-      if (productId === undefined) {
-        return '';
-      }
-      const parts = productId.split('::');
+
+      let productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
+      const parts = productId?.split('::') || [];
       const newString = 'root';
 
       if (!parts?.includes(newString)) {
-        parts.unshift(newString); // 将字符串添加到数组第一位
+        parts?.unshift(newString); // 将字符串添加到数组第一位
       }
 
       const partsEn = parts.map((item) => {
@@ -177,12 +60,6 @@ export default {
       return partsEn;
     },
 
-    location() {
-      const { parent } = this;
-
-      return parent?.location;
-    },
-
   },
 
   methods: {
@@ -206,7 +83,7 @@ export default {
           <span>/</span>
         </span>
         <span class="excram-last-name">
-          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
+          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + resourceTypeLabel }}
         </span>
       </div>
     </div>
@@ -215,71 +92,6 @@ export default {
 
 <style lang='scss' scoped>
 
-  HEADER {
-    margin: 0;
-  }
-
-  .primaryheader {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size:14px;
-    height: 50px;
-
-    h1 {
-      margin: 0;
-    }
-  }
-
-  .subheader{
-    display: flex;
-    flex-direction: row;
-    color: var(--input-label);
-    & > * {
-      margin: 5px 20px 5px 0px;
-    }
-
-    .live-data {
-      color: var(--body-text)
-    }
-  }
-
-  .state-banner {
-    margin: 3px 0 0 0;
-  }
-
-  .masthead-state {
-    font-size: initial;
-    display: inline-block;
-    position: relative;
-    /* top: -2px; */
-    font-size: 12px;
-    margin-left: 5px;
-  }
-
-  .masthead-istio {
-    .icon {
-      vertical-align: middle;
-      color: var(--primary);
-    }
-  }
-
-  .left-right-split {
-    display: grid;
-    align-items: center;
-
-    .left-half {
-      grid-column: 1;
-    }
-
-    .right-half {
-      grid-column: 2;
-    }
-  }
-
-  .resource-external {
-    font-size: 18px;
-  }
   .excram-list{
     font-size: 14px;
     margin-bottom: 20px;
@@ -287,10 +99,7 @@ export default {
   .excram-last-name{
     color: var(--link);
   }
-  .valid{
-    color: #d7d7d7;
-    margin: 0px 10px;
-  }
+
   .detailIcon-span{
     width: 24px;
     height: 24px;
@@ -306,11 +115,5 @@ export default {
     left: 4px;
     top: -2px;
   }
-  .primary-title{
-    display: flex;
-    align-items: center;
-  }
-  .detailIcon-span-title{
-    font-weight: bold;
-  }
+
 </style>

package/components/form/ArrayList.vue

@@ -263,174 +263,180 @@ export default {
     role="group"
     :aria-label="title || t('generic.ariaLabel.arrayList')"
   >
-    <div
-      v-if="title"
-      class="clearfix"
-      role="group"
-    >
-      <slot name="title">
-        <h3>
-          {{ title }}
-          <span
-            v-if="required"
-            class="required"
-            aria-hidden="true"
-          >*</span>
-          <i
-            v-if="showProtip"
-            v-clean-tooltip="{content: protip, triggers: ['hover', 'touch', 'focus'] }"
-            class="icon icon-info"
-            tabindex="0"
-          />
-        </h3>
-      </slot>
-    </div>
 
-    <div>
-      <div
-        v-if="showAdd && !isView"
-        class="footer mmt-6"
-      >
-        <slot
-          v-if="showAdd"
-          name="add"
-          :add="add"
-        >
-          <button
-            type="button"
-            class="btn role-tertiary add"
-            :class="[addClass]"
-            :disabled="loading || disableAdd"
-            :data-testid="`${componentTestid}-button`"
-            :aria-label="_addLabel"
-            role="button"
-            @click="add()"
-          >
-            <i
-              class="mr-5 icon"
-              :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
-            />
-            {{ _addLabel }}
-          </button>
-        </slot>
-      </div>
-      <template v-if="rows.length">
+    <div class="row">
+      <div v-if="title" style="width: 100%;" class="col">
         <div
-          v-if="showHeader"
-          class="array-list-header-group"
+          class="clearfix"
           role="group"
         >
-          <slot name="column-headers">
-            <label class="value text-label mb-10">
-              {{ valueLabel }}
-            </label>
+          <slot name="title">
+            <h3>
+              {{ title }}
+              <span
+                v-if="required"
+                class="required"
+                aria-hidden="true"
+              >*</span>
+              <i
+                v-if="showProtip"
+                v-clean-tooltip="{content: protip, triggers: ['hover', 'touch', 'focus'] }"
+                class="icon icon-info"
+                tabindex="0"
+              />
+            </h3>
           </slot>
         </div>
-        <div
-          v-for="(row, idx) in rows"
-          :key="idx"
-          :data-testid="`${componentTestid}-box${ idx }`"
-          class="box"
-          :class="{'hide-remove-is-view': isView}"
-          role="group"
-        >
-          <slot
-            name="columns"
-            :queueUpdate="queueUpdate"
-            :i="idx"
-            :rows="rows"
-            :row="row"
-            :mode="mode"
-            :isView="isView"
-          >
-            <div class="value">
+      </div>
+      <div style="width: 100%;" class="col">
+        <div>
+          <template v-if="rows.length">
+            <div
+              v-if="showHeader"
+              class="array-list-header-group"
+              role="group"
+            >
+              <slot name="column-headers">
+                <label class="value text-label mb-10">
+                  {{ valueLabel }}
+                </label>
+              </slot>
+            </div>
+            <div
+              v-for="(row, idx) in rows"
+              :key="idx"
+              :data-testid="`${componentTestid}-box${ idx }`"
+              class="box"
+              :class="{'hide-remove-is-view': isView}"
+              role="group"
+            >
               <slot
-                name="value"
+                name="columns"
+                :queueUpdate="queueUpdate"
+                :i="idx"
+                :rows="rows"
                 :row="row"
                 :mode="mode"
                 :isView="isView"
-                :queue-update="queueUpdate"
               >
-                <TextAreaAutoGrow
-                  v-if="valueMultiline"
-                  ref="value"
-                  v-model:value="row.value"
-                  :data-testid="`${componentTestid}-textarea-${idx}`"
-                  :placeholder="valuePlaceholder"
-                  :mode="mode"
-                  :disabled="disabled"
-                  :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
-                  @paste="onPaste(idx, $event)"
-                  @update:value="queueUpdate"
-                />
-                <LabeledInput
-                  v-else-if="rules.length > 0"
-                  ref="value"
-                  v-model:value="row.value"
-                  :data-testid="`${componentTestid}-labeled-input-${idx}`"
-                  :placeholder="valuePlaceholder"
-                  :disabled="isView || disabled"
-                  :rules="rules"
-                  :compact="false"
-                  :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
-                  @paste="onPaste(idx, $event)"
-                  @update:value="queueUpdate"
-                />
-                <input
-                  v-else
-                  ref="value"
-                  v-model="row.value"
-                  :data-testid="`${componentTestid}-input-${idx}`"
-                  :placeholder="valuePlaceholder"
-                  :disabled="isView || disabled"
-                  :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
-                  @paste="onPaste(idx, $event)"
-                >
+                <div class="value">
+                  <slot
+                    name="value"
+                    :row="row"
+                    :mode="mode"
+                    :isView="isView"
+                    :queue-update="queueUpdate"
+                  >
+                    <TextAreaAutoGrow
+                      v-if="valueMultiline"
+                      ref="value" 
+                      v-model:value="row.value"
+                      :data-testid="`${componentTestid}-textarea-${idx}`"
+                      :placeholder="valuePlaceholder"
+                      :mode="mode"
+                      :disabled="disabled"
+                      :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
+                      @paste="onPaste(idx, $event)"
+                      @update:value="queueUpdate"
+                    />
+                    <LabeledInput
+                      v-else-if="rules.length > 0"
+                      ref="value"
+                      v-model:value="row.value"
+                      :data-testid="`${componentTestid}-labeled-input-${idx}`"
+                      :placeholder="valuePlaceholder"
+                      :disabled="isView || disabled"
+                      :rules="rules"
+                      :compact="false"
+                      :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
+                      @paste="onPaste(idx, $event)"
+                      @update:value="queueUpdate"
+                    />
+                    <input
+                      v-else
+                      ref="value"
+                      v-model="row.value"
+                      :data-testid="`${componentTestid}-input-${idx}`"
+                      :placeholder="valuePlaceholder"
+                      :disabled="isView || disabled"
+                      :aria-label="a11yLabel ? `${a11yLabel} ${t('generic.ariaLabel.genericRow', {index: idx+1})}` : undefined"
+                      @paste="onPaste(idx, $event)"
+                    >
+                  </slot>
+                </div>
               </slot>
+              <div
+                v-if="showRemove && !isView"
+                class="remove"
+              >
+                <slot
+                  name="remove-button"
+                  :remove="() => remove(row, idx)"
+                  :i="idx"
+                  :row="row"
+                >
+                  <button
+                    type="button"
+                    :disabled="isView"
+                    class="btn role-link"
+                    :data-testid="`${componentTestid}-remove-item-${idx}`"
+                    :aria-label="t('generic.ariaLabel.remove', {index: idx+1})"
+                    role="button"
+                    @click="remove(row, idx)"
+                  >
+                    {{ _removeLabel }}
+                  </button>
+                </slot>
+              </div>
+              <slot
+                name="value-sub-row"
+                :row="row"
+                :mode="mode"
+                :isView="isView"
+              />
             </div>
-          </slot>
+          </template>
+          <div v-else>
+            <slot name="empty">
+              <div
+                v-if="mode==='view'"
+                class="text-muted"
+              >
+                &mdash;
+              </div>
+            </slot>
+          </div>
           <div
-            v-if="showRemove && !isView"
-            class="remove"
+            v-if="showAdd && !isView"
+            class="footer"
           >
             <slot
-              name="remove-button"
-              :remove="() => remove(row, idx)"
-              :i="idx"
-              :row="row"
+              v-if="showAdd"
+              name="add"
+              :add="add"
             >
               <button
                 type="button"
-                :disabled="isView"
-                class="btn role-link"
-                :data-testid="`${componentTestid}-remove-item-${idx}`"
-                :aria-label="t('generic.ariaLabel.remove', {index: idx+1})"
+                class="btn role-tertiary add"
+                :class="[addClass]"
+                :disabled="loading || disableAdd"
+                :data-testid="`${componentTestid}-button`"
+                :aria-label="_addLabel"
                 role="button"
-                @click="remove(row, idx)"
+                @click="add()"
               >
-                {{ _removeLabel }}
+                <i
+                  class="mr-5 icon"
+                  :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
+                />
+                {{ _addLabel }}
               </button>
             </slot>
           </div>
-          <slot
-            name="value-sub-row"
-            :row="row"
-            :mode="mode"
-            :isView="isView"
-          />
         </div>
-      </template>
-      <div v-else>
-        <slot name="empty">
-          <div
-            v-if="mode==='view'"
-            class="text-muted"
-          >
-            &mdash;
-          </div>
-        </slot>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -444,13 +450,15 @@ export default {
   }
 
   .box {
-    display: grid;
-    grid-template-columns: auto $array-list-remove-margin;
-    align-items: center;
-    margin-bottom: 10px;
+    // display: grid;
+    // grid-template-columns: auto $array-list-remove-margin;
+    // align-items: center;
+    // margin-bottom: 10px;
+    display: flex;
     .value {
-      flex: 1;
+      // flex: 1;
       INPUT {
+        width: $input-width;
         height: $input-height;
         border: solid var(--border-width) var(--input-border);
         padding: 4px 11px;
@@ -462,9 +470,15 @@ export default {
   }
   .remove {
     text-align: right;
+    display: flex;
+    align-items: center;
+
+    button{
+      min-width: auto;
+    }
   }
   .footer {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
     .protip {
       float: right;
       padding: 5px 0;
@@ -481,4 +495,7 @@ export default {
     margin-bottom: 10px;
   }
     
+  H3{
+    width: 160px;
+  }
 </style>

package/components/form/ArrayListGrouped.vue

@@ -120,15 +120,16 @@ export default {
 
 <style lang="scss">
 .array-list-grouped {
-    & > .box {
+    .box {
+      border: 0px solid var(--tabbed-border) !important;
       position: relative;
       display: block;
 
       & > .remove {
         position: absolute;
 
-        top: 10px;
-        right: 10px;
+        top: 0px !important;
+        right: 0px !important;
         & > .close{
           width: 32px;
           min-width: 32px !important;
@@ -140,6 +141,7 @@ export default {
       }
 
       & > .info-box {
+        border: 1px solid var(--tabbed-border) !important;
         margin-bottom: 0;
         padding-right: 25px;
       }