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

package/components/ActionDropdown.vue

@@ -212,6 +212,7 @@ export default {
       border: 1px solid var(--dropdown-border);
       padding: 0px;
       text-align: left;
+      border-radius: 2px;
 
       LI {
         padding: 10px;
@@ -222,7 +223,7 @@ export default {
 
           > .divider-inner {
             padding: 0;
-            border-bottom: 1px solid var(--dropdown-divider);
+            border-bottom: 0px solid var(--dropdown-divider);
             width: 125%;
             margin: 0 auto;
           }

package/components/ActionMenu.vue

@@ -305,7 +305,7 @@ export default {
     color: var(--dropdown-text);
     background-color: var(--dropdown-bg);
     border: 1px solid var(--dropdown-border);
-    border-radius: 5px;
+    border-radius: 3px;
     box-shadow: 0 5px 20px var(--shadow);
 
     LI {
@@ -326,7 +326,7 @@ export default {
 
       &.divider {
         padding: 0;
-        border-bottom: 1px solid var(--dropdown-divider);
+        border-bottom: 0px solid var(--dropdown-divider);
       }
 
       &:not(.divider):hover {

package/components/ActionMenuShell.vue

@@ -18,6 +18,7 @@ type RcDropdownMenuComponentProps = {
   dataTestid?: string;
   resource: Object;
   customActions?: DropdownOption[];
+  showIcon: Boolean;
 }
 
 const props = defineProps <RcDropdownMenuComponentProps>();
@@ -101,5 +102,6 @@ const menuOptions = () => {
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"
+    :showIcon="showIcon"
   />
 </template>

package/components/AppModal.vue

@@ -30,7 +30,7 @@ export default defineComponent({
      */
     width: {
       type:    [Number, String],
-      default: 600,
+      default: 610,
       validator(value) {
         if (typeof value === 'number') {
           return value > 0;
@@ -101,7 +101,7 @@ export default defineComponent({
         return `${ this.width }${ uom }`;
       }
 
-      return '600px';
+      return '610px';
     },
     stylesPropToObj(): object {
       return this.styles.split(';')
@@ -164,6 +164,14 @@ export default defineComponent({
         this.$emit('close');
       }
     },
+    close(event: MouseEvent) {
+      if (
+        this.$refs.modalRef
+      ) {
+        this.$emit('close');
+      }
+      // this.$emit('close');
+    },
     handleEscapeKey(event: KeyboardEvent) {
       if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
@@ -206,8 +214,20 @@ export default defineComponent({
           aria-modal="true"
           @click.stop
         >
+        <div
+            class="close-dailog-icon"
+          >
+            <button
+              class="btn btn-sm role-link hide-bar"
+              @click="close"
+            >
+              <i class="icon icon-x" />
+            </button>
+          </div>
+        <div>
           <slot><!--Empty content--></slot>
         </div>
+        </div>
       </div>
     </transition>
   </teleport>
@@ -220,18 +240,21 @@ export default defineComponent({
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: var(--overlay-bg);
+    /* background-color: var(--overlay-bg); */
+    background-color: var(--overlay-model-bg);
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: z-index('modalOverlay');
+    /* z-index: z-index('modalOverlay'); */
+    z-index: 50;
 
     .modal-container {
       background-color: var(--modal-bg);
       border-radius: var(--border-radius);
       max-height: 95vh;
       overflow: auto;
-      border: 2px solid var(--modal-border);
+      border: 0px;
+      position: relative;
     }
   }
 
@@ -244,4 +267,22 @@ export default defineComponent({
   .modal-fade-leave-to {
     opacity: 0;
   }
+  .hide-bar{
+    width: 32px;
+    min-width: 32px !important;
+  }
+  .close-dailog-icon{
+    position: absolute;
+    right: 13px;
+    top: 18px;
+    & > button{
+      color:var(--body-text) !important;
+      min-width: 32px !important;
+      width: 32px !important;
+      & > button:hover{
+        color:var(--body-text) !important;
+      }
+    }
+
+  }
 </style>

package/components/BrandImage.vue

@@ -131,5 +131,6 @@ export default {
   <img
     v-bind="$attrs"
     :src="pathToBrandedImage"
+    style="height: 50px;"
   >
 </template>

package/components/ButtonDropdown.vue

@@ -196,7 +196,8 @@ export default {
     @update:modelValue="$emit('click-action', $event)"
   >
     <template #no-options>
-      <slot name="no-options" />
+      暂无数据
+      <!-- <slot name="no-options" /> -->
     </template>
 
     <template #selected-option="option">
@@ -247,16 +248,35 @@ export default {
   }
 }
 .button-dropdown {
-  background: var(--accent-btn);
+  /* background: var(--accent-btn); */
+  background: var(--accent-btn-hover);
   border: solid 1px var(--link);
   color: var(--link);
   padding: 0;
 
+  &{
+    :deep() .vs__dropdown-toggle .vs__actions,
+    :deep() .vs__selected-options {
+      background: var(--accent-btn-hover);
+    }
+    :deep() .vs__selected-options .vs__selected button {
+      background-color: transparent;
+      color: var(--accent-btn-hover-text);
+    }
+    :deep() .vs__dropdown-toggle .vs__actions {
+      &:after {
+        color: var(--accent-btn-hover-text);
+        padding-top: 10px;
+      }
+    }
+  }
+
   &.vs--open :deep() {
     outline: none;
     box-shadow: none;
   }
 
+
   &:hover {
     :deep() .vs__dropdown-toggle .vs__actions,
     :deep() .vs__selected-options {
@@ -275,6 +295,7 @@ export default {
 
   :deep() > .vs__dropdown-toggle {
     width: 100%;
+    width: 100px;
     display: grid;
     grid-template-columns: 75% 25%;
     border: none;
@@ -283,7 +304,7 @@ export default {
     .vs__actions {
 
       &:after {
-        color: var(--link);
+        color: var(--accent-btn-hover-text);
         line-height: 1;
       }
     }
@@ -297,7 +318,8 @@ export default {
       button {
         border: none;
         background: transparent;
-        color: var(--link);
+        color: var(--accent-btn-hover-text);
+        min-width: 83px;
       }
     }
     .vs__search {

package/components/ButtonMultiAction.vue

@@ -30,6 +30,7 @@ const buttonClass = computed(() => {
       class="icon icon-actions"
       :alt="t('sortableTable.tableActionsImgAlt')"
     />
+    <!-- <i style="font-style: normal;">操作</i> -->
   </button>
 </template>
 

package/components/ClusterIconMenu.vue

@@ -159,7 +159,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--default-active-text);
+    color: var(--primary);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--border);

package/components/CodeMirror.vue

@@ -5,7 +5,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 export default {
   name: 'CodeMirror',
 
-  emits: ['onReady', 'onInput', 'onChanges', 'onFocus', 'validationChanged'],
+  emits: ['onReady', 'onInput', 'onChanges', 'onFocus'],
 
   props: {
     /**
@@ -140,9 +140,9 @@ export default {
   },
 
   watch: {
-    hasLintErrors(neu) {
-      this.$emit('validationChanged', !neu);
-    },
+    // hasLintErrors(neu) {
+    //   this.$emit('validationChanged', !neu);
+    // },
 
     isCodeMirrorContainerFocused: {
       handler(neu) {
@@ -209,7 +209,7 @@ export default {
     },
 
     onReady(codeMirrorRef) {
-      this.$emit('validationChanged', true);
+      // this.$emit('validationChanged', true);
 
       this.$nextTick(() => {
         codeMirrorRef.refresh();
@@ -279,7 +279,7 @@ export default {
         id="code-mirror-el"
         ref="codeMirrorRef"
         :value="value"
-        :options="combinedOptions"
+
         :disabled="isDisabled"
         :original-style="true"
         @ready="onReady"
@@ -288,6 +288,19 @@ export default {
         @focus="onFocus"
         @blur="onBlur"
       />
+      <!-- <Codemirror
+        id="code-mirror-el"
+        ref="codeMirrorRef"
+        :value="value"
+        :options="combinedOptions"
+        :disabled="isDisabled"
+        :original-style="true"
+        @ready="onReady"
+        @input="onInput"
+        @changes="onChanges"
+        @focus="onFocus"
+        @blur="onBlur"
+      /> -->
       <span
         v-show="isCodeMirrorFocused"
         class="escape-text"
@@ -356,6 +369,7 @@ export default {
       }
 
       .CodeMirror-lines {
+        background-color: var(--input-bg);
         color: var(--input-text);
         padding: 0;
 

package/components/ConsumptionGauge.vue

@@ -59,7 +59,11 @@ export default {
     usedAsResourceName: {
       type:   Boolean,
       defaut: false
-    }
+    },
+    reserveText: {
+      type:   String,
+      defaut: '预留'
+    },
   },
   computed: {
     displayUnits() {
@@ -91,13 +95,13 @@ export default {
 </script>
 
 <template>
-  <div class="consumption-gauge">
+  <!-- <div class="consumption-gauge">
     <h3 v-if="resourceName && !usedAsResourceName">
       {{ resourceName }}
     </h3>
-    <div class="numbers">
+    <div class="numbers"> -->
       <!-- @slot Optional slot to use as the title rather than showing the resource name -->
-      <slot
+      <!-- <slot
         name="title"
         :amountTemplateValues="amountTemplateValues"
         :formattedPercentage="formattedPercentage"
@@ -118,7 +122,22 @@ export default {
         :color-stops="colorStops"
       />
     </div>
-  </div>
+  </div> -->
+  <div class="consumption-gauge">
+    <div
+      v-if="resourceName && !usedAsResourceName"
+      class="mb-20"
+    >
+      {{ resourceName }}
+    </div>
+    <slot
+      name="content"
+      :amountTemplateValues="amountTemplateValues"
+      :formattedPercentage="formattedPercentage"
+    >
+      <p>{{ formattedPercentage + '(共' + amountTemplateValues.total + ' ' + amountTemplateValues.unit + '，' + reserveText + ' ' + amountTemplateValues.used + ' ' + amountTemplateValues.unit + '）' }}</p>
+    </slot>
+    </div>
 </template>
 
 <style lang="scss">

package/components/CopyToClipboard.vue

@@ -42,3 +42,18 @@ export default {
     @click="clicked"
   />
 </template>
+
+<style lang="scss"scoped>
+button {
+  min-width: auto;
+}
+
+.bg-success{
+  background-color: var(--success-hover-text) !important;
+  color: #333 !important;
+}
+.bg-success:hover{
+  background-color: var(--success-hover-text) !important;
+  color: var(--primary) !important;
+}
+</style>

package/components/CruResource.vue

@@ -711,14 +711,14 @@ export default {
                   </template>
                 </template>
                 <div class="controls-steps">
-                  <button
+                  <!-- <button
                     v-if="showYaml"
                     type="button"
                     class="btn role-secondary"
                     @click="showPreviewYaml"
                   >
                     <t k="cruResource.previewYaml" />
-                  </button>
+                  </button> -->
                   <template
                     v-if="showPrevious"
                     name="back"
@@ -798,7 +798,7 @@ export default {
               #default
             >
               <div>
-                <button
+                <!-- <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"
                   type="button"
@@ -806,7 +806,7 @@ export default {
                   @click="showPreviewYaml"
                 >
                   <t k="cruResource.previewYaml" />
-                </button>
+                </button> -->
                 <AsyncButton
                   v-if="!showSubtypeSelection"
                   ref="save"
@@ -822,7 +822,7 @@ export default {
       </template>
       <!------ YAML ------>
       <!-- Hide this section until it's needed. This means we don't need to upfront create initialYaml -->
-      <section
+      <!-- <section
         v-else-if="showYaml && !showAsForm"
         class="cru-resource-yaml-container resource-container cru__content"
       >
@@ -835,7 +835,7 @@ export default {
           :offer-preview="isEdit"
           :done-route="doneRoute"
           :done-override="resource.doneOverride"
-          :show-errors="false"
+          :errors="errors"
           :apply-hooks="applyHooks"
           class="resource-container cru__content"
           @error="e=>$emit('error', e)"
@@ -896,7 +896,7 @@ export default {
             </slot>
           </template>
         </ResourceYaml>
-      </section>
+      </section> -->
     </component>
   </section>
 </template>
@@ -910,7 +910,6 @@ export default {
   }
 }
 .create-resource-container {
-
   .resource-container {
     display: flex; // Ensures content grows in child CruResources
     flex-direction: column;
@@ -974,6 +973,7 @@ form.create-resource-container .cru {
   }
 }
 .cru {
+  height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -982,6 +982,7 @@ form.create-resource-container .cru {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    height: 100%;
   }
 
   &__content {

package/components/CruResourceFooter.vue

@@ -115,12 +115,12 @@ export default {
 <style lang="scss">
 .cru-resource-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   margin-top: 20px;
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-left: 20px;
+    margin-left: 10px;
   }
 }
 

package/components/DashboardOptions.vue

@@ -102,26 +102,35 @@ export default {
 
 <template>
   <div class="graph-options">
-    <div v-if="hasSummaryAndDetail">
-      <ButtonGroup
-        v-model:value="value.type"
-        :options="detailSummaryOptions"
+    <div v-if="hasSummaryAndDetail" class="mr-10">
+      <ButtonGroup
+        v-model:value="value.type"
+        :options="detailSummaryOptions"
       />
     </div>
     <div v-else>
       <div />
     </div>
     <div class="range-refresh">
-      <LabeledSelect
-        v-model:value="value.range"
-        :options="rangeOptions"
-        :label="t('graphOptions.range')"
-      />
-      <LabeledSelect
-        v-model:value="value.refreshRate"
-        :options="refreshOptions"
-        :label="t('graphOptions.refresh')"
+      <div class="mr-10">
+        <LabeledSelect
+          v-model:value="value.range"
+          :options="rangeOptions"
+          class="gafanana-select"
+          :selectWidth="'60px'"
+          :label="t('graphOptions.range')"
+        />
+      </div>
+      <div class="mr-10">
+        <LabeledSelect
+        v-model:value="value.refreshRate"
+        :options="refreshOptions"
+        class="gafanana-select"
+         :selectWidth="'60px'"
+        :label="t('graphOptions.refresh')"
       />
+      </div>
+      
     </div>
   </div>
 </template>
@@ -131,17 +140,20 @@ export default {
     &, .range-refresh {
       display: flex;
       flex-direction: row;
-      justify-content: flex-end;
+      /* justify-content: flex-end; */
     }
 
     & {
-      justify-content: space-between;
+      /* justify-content: space-between; */
       align-items: center;
     }
 
-    .labeled-select {
+    /* .labeled-select {
         width: 100px;
         margin-left: 10px;
-    }
+    } */
+}
+.gafanana-select{
+  width: 300px;
 }
 </style>

package/components/DotState.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+import Vue, { PropType, defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+
+interface Dot {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+export default defineComponent({
+
+  name: 'DotState',
+
+  props:      {
+    value: {
+      type:    Object as PropType<Dot>,
+      default: null
+    },
+    color: {
+      type:    String,
+      default: null
+    },
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+  
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      let text = this.value?.stateDisplay || this.label;
+      let zhText = this.t(`stateLabel.${ text }`)
+      return zhText ? zhText : text
+    }
+    
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex;flex-direction: row;align-items: center;">
+    <div :class="{ [bg]: true }"></div>
+    <span style="margin-left: 5px;">{{ msg }}</span>
+    
+  </div>
+  
+</template>
+<style lang="scss" scoped>
+  .bg-error {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DD0C17; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-darker {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DD0C17; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-success {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #95F204 !important; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-warning {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DAC342; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-info {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #1890FF; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+</style>

package/components/Drawer/Chrome.vue

@@ -35,7 +35,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
         </div>
       </slot>
     </div>
-    <div class="body pp-4">
+    <div class="body">
       <slot name="body" />
     </div>
     <div class="footer pp-4">
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
     }
 
     .body {
-      background-color: var(--drawer-body-bg);
+      background-color: var(--body-bg);
       flex: 1;
       overflow-y: scroll;
     }