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

package/components/form/NameNsDescription.vue

@@ -156,10 +156,6 @@ export default {
       type:    Boolean,
       default: true,
     },
-    isDialog: {
-      type:    Boolean,
-      default: false
-    },
     rules: {
       default: () => ({
         namespace:   [],
@@ -280,10 +276,10 @@ export default {
         kind:     'divider'
       };
 
-      // const createOverhead = canCreateNamespace.value || props.createNamespaceOverride ? [createButton, divider] : [];
+      const createOverhead = canCreateNamespace.value || props.createNamespaceOverride ? [createButton, divider] : [];
 
       return [
-        // ...createOverhead,
+        ...createOverhead,
         ...sortedByLabel
       ];
     });
@@ -360,11 +356,10 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-6`;
+        return `span-8`;
       }
       // Name and namespace take up two columns.
-      // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
-      let cols = 2;
+      let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
 
       cols = Math.max(2, cols); // If there's only one column, make it render half-width as if there were two
       const span = 12 / cols; // If there's 5, 7, or more columns this will break; don't do that.
@@ -433,18 +428,13 @@ export default {
 </script>
 
 <template>
-  <div class="row">
-
-    <!-- 命名空间创建输入框 -->
+  <div class="row mb-20">
+    <slot name="project-selector" />
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-6"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
-      style="display: flex;"
+      class="col span-3"
     >
-
-      <!-- 输入命名空间名称 -->
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
@@ -456,8 +446,6 @@ export default {
         :required="nameRequired"
         :rules="rules.namespace"
       />
-
-      <!-- 取消创建命名空间按钮 -->
       <button
         :aria-label="t('namespace.cancelCreateAriaLabel')"
         @click="cancelCreateNamespace"
@@ -468,12 +456,10 @@ export default {
         />
       </button>
     </div>
-
-    <!-- 命名空间选择下拉框 -->
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
+      class="col span-3"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -492,11 +478,10 @@ export default {
       />
     </div>
 
-    <!-- 名称输入框 -->
     <div
       v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
-      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
+      class="col span-3"
     >
       <LabeledInput
         ref="nameInput"
@@ -513,28 +498,11 @@ export default {
       />
     </div>
 
-    <!-- 自定义插槽，可插入额外内容 -->
     <slot name="customize" />
-    <!-- <div
-      v-show="!descriptionHidden"
-      :data-testid="componentTestid + '-description'"
-      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
-    > -->
-
-    <!-- 额外的动态列 -->
-    <div
-      v-for="(slot, i) in extraColumns"
-      :key="i"
-      :class="{ col: true, [colSpan]: true }"
-    >
-      <slot :name="slot" />
-    </div>
-
-    <!-- 描述输入框 -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
-       :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
+      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
     >
       <LabeledInput
         key="description"
@@ -548,15 +516,13 @@ export default {
       />
     </div>
 
-    <!-- 底部插槽 -->
     <div
-      v-if="$slots.bottom"
-      style="width: 100%;"
+      v-for="(slot, i) in extraColumns"
+      :key="i"
+      :class="{ col: true, [colSpan]: true }"
     >
-      <slot name="bottom" />
+      <slot :name="slot" />
     </div>
-
-    <!-- 间隔占位符 -->
     <div
       v-if="showSpacer"
       class="spacer"
@@ -567,8 +533,13 @@ export default {
 <style lang="scss" scoped>
 button {
   all: unset;
+  height: 0;
+  position: relative;
+  top: -35px;
+  float: right;
+  margin-right: 7px;
+
   cursor: pointer;
-  margin-left: 10px;
 
   .align-value {
     padding-top: 7px;
@@ -605,14 +576,4 @@ button {
   }
 
 }
-.namespace-item-row{
-  width: 100%;
-  margin-bottom: 4px;
-  position:relative;
-  display: flex;
-}
-.namespace-item-row ::v-deep textarea{
-    width: 400px;
-  }
-
 </style>

package/components/form/Password.vue

@@ -41,10 +41,6 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
-    },
-    placeholder: {
-      type:    String,
-      default: '',
     }
   },
   data() {
@@ -120,7 +116,6 @@ export default {
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
       :mode="mode"
-      :placeholder="placeholder"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
@@ -153,13 +148,12 @@ export default {
     </LabeledInput>
     <div
       v-if="isRandom"
-      class="genPassword"
+      class="mt-10 genPassword"
     >
       <a
         href="#"
         @click.prevent.stop="generatePassword"
-        style="height: 32px;display: flex;align-items: center;"
-      ><i class="icon icon-refresh mr-5 pl-5" /> {{ t('changePassword.newGeneratedPassword') }}</a>
+      ><i class="icon icon-refresh" /> {{ t('changePassword.newGeneratedPassword') }}</a>
     </div>
   </div>
 </template>
@@ -167,23 +161,20 @@ export default {
 <style lang="scss" scoped>
   .password {
     display: flex;
-    /* flex-direction: column; */
+    flex-direction: column;
 
     .labeled-input {
       .addon {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        /* display: flex;
+        display: flex;
         align-items: center;
         justify-content: center;
         padding-left: 12px;
-        min-width: 65px; */
+        min-width: 65px;
 
-        /* .hide-show:focus-visible {
+        .hide-show:focus-visible {
           @include focus-outline;
           outline-offset: 4px;
-        } */
+        }
       }
     }
     .genPassword {

package/components/form/PodAffinity.vue

@@ -364,13 +364,14 @@ export default {
     <div class="col span-12">
       <ArrayListGrouped
         v-model:value="allSelectorTerms"
+        class="mt-20"
         :default-add-value="defaultAddValue"
         :mode="mode"
         :add-label="addLabel"
         @remove="remove"
       >
         <template #default="props">
-          <div class="row mt-20">
+          <div class="row mt-20 mb-20">
             <div class="col span-6">
               <LabeledSelect
                 :mode="mode"
@@ -392,7 +393,7 @@ export default {
               />
             </div>
           </div>
-          <div class="row mb-20">
+          <div class="row">
             <RadioGroup
               :options="namespaceSelectionOptions"
               :labels="namespaceSelectionLabels"
@@ -438,7 +439,7 @@ export default {
             @update:value="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
-            <div class="col span-6">
+            <div class="col span-9">
               <LabeledSelect
                 v-if="hasNodes"
                 v-model:value="props.row.value.topologyKey"
@@ -468,7 +469,7 @@ export default {
             </div>
             <div
               v-if="'weight' in props.row.value"
-              class="col span-6"
+              class="col span-3"
             >
               <LabeledInput
                 v-model:value.number="props.row.value.weight"

package/components/form/ResourceQuota/Namespace.vue

@@ -72,13 +72,13 @@ export default {
 <template>
   <div>
     <div class="headers mb-10">
-      <div style="width: 400px;">
+      <div class="mr-10">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div class="mr-10">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div style="width: 500px;">
+      <div class="mr-20">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>
@@ -101,7 +101,7 @@ export default {
 .headers {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-evenly;
     align-items: center;
     border-bottom: 1px solid var(--border);
     height: 30px;

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -173,15 +173,16 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="rowNew"
+    class="row"
   >
     <Select
+      class="mr-10"
       :mode="mode"
       :value="type"
       :disabled="true"
       :options="types"
     />
-    <div class="resource-availability">
+    <div class="resource-availability mr-10">
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
@@ -190,18 +191,16 @@ export default {
         :color-stops="{'100': '--primary'}"
       />
     </div>
-    <div style="width: 500px;">
-      <UnitInput
-        :value="value.limit[type]"
-        :mode="mode"
-        :placeholder="typeOption.placeholder"
-        :increment="typeOption.increment"
-        :input-exponent="typeOption.inputExponent"
-        :base-unit="typeOption.baseUnit"
-        :output-modifier="true"
-        @update:value="update"
-      />
-    </div>
+    <UnitInput
+      :value="value.limit[type]"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      @update:value="update"
+    />
   </div>
 </template>
 
@@ -209,13 +208,13 @@ export default {
   .resource-availability {
     align-self: center;
   }
-  .rowNew {
-    margin-bottom: 10px;
+  .row {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row;
+    justify-content: space-evenly;
 
     & > * {
-      width: 400px;
+      width: 100%;
     }
   }
 </style>

package/components/form/ResourceQuota/Project.vue

@@ -57,14 +57,14 @@ export default {
 </script>
 <template>
   <div>
-    <div style="justify-content: right;" class="headers mb-10">
-      <div style="width: 400px;">
+    <div class="headers mb-10">
+      <div class="mr-10">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div class="mr-20">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div class="mr-10">
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -70,10 +70,11 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="rowNew"
+    class="row"
   >
     <Select
       :value="type"
+      class="mr-10"
       :mode="mode"
       :options="types"
       data-testid="projectrow-type-input"
@@ -81,6 +82,7 @@ export default {
     />
     <UnitInput
       :value="resourceQuotaLimit[type]"
+      class="mr-10"
       :mode="mode"
       :placeholder="typeOption.placeholder"
       :increment="typeOption.increment"
@@ -105,8 +107,9 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .rowNew {
+  .row {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row;
+    justify-content: space-evenly;
   }
 </style>

package/components/form/Select.vue

@@ -349,9 +349,6 @@ export default {
       @option:selected="closeOnSelect && close"
       @keydown.enter.stop
     >
-      <template #no-options>
-        暂无数据
-      </template>
       <template
         #option="option"
       >
@@ -403,8 +400,8 @@ export default {
     }
 
     :deep() .labeled-tooltip.error .status-icon {
-      top: 7px !important;
-      right: 2px !important;
+      top: 7px;
+      right: 2px;
     }
 
     :deep() .vs__selected-options {

package/components/form/SimpleSecretSelector.vue

@@ -24,14 +24,13 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 const NONE = '__[[NONE]]__';
 
 export default {
   emits: ['updateSecretName', 'updateSecretKey'],
 
-  components: { LabeledSelect, ResourceLabeledSelect, LabeledInput },
+  components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {
     test:        { type: String, default: '' },
@@ -200,18 +199,10 @@ export default {
 
 <template>
   <div class="secret-selector show-key-selector">
-    <div class="input-container row">
-      <div class="col span-6">
-        <LabeledInput
-          v-model:value="name"
-          :mode="mode"
-          :label="secretNameLabel"
-          @update:value="$emit('updateSecretName', $event)"
-          :placeholder="'请输入'+secretNameLabel"
-        />
-        <!-- <ResourceLabeledSelect
+    <div class="input-container">
+      <ResourceLabeledSelect
         v-model:value="name"
-       
+        class="col span-6"
         :disabled="!isView && disabled"
         :loading="$fetchState.pending"
         :label="secretNameLabel"
@@ -220,27 +211,16 @@ export default {
         :paginated-resource-settings="paginateSecretsSetting"
         :all-resources-settings="allSecretsSettings"
         @selecting="updateSecretName"
-      /> -->
-      </div>
-      <div class="col span-6">
-        <LabeledInput
-          v-model:value="key"
-          :disabled="isKeyDisabled"
-          :mode="mode"
-          :label="keyNameLabel"
-          @update:value="$emit('updateSecretKey', $event)"
-        />
-      <!-- <LabeledSelect
+      />
+      <LabeledSelect
         v-model:value="key"
-       
+        class="col span-6"
         :disabled="isKeyDisabled"
         :options="keys"
         :label="keyNameLabel"
         :mode="mode"
         @selecting="updateSecretKey"
-      /> -->
-     </div>
-     
+      />
     </div>
   </div>
 </template>
@@ -267,7 +247,7 @@ export default {
   &.show-key-selector {
     .input-container > * {
       display: inline-block;
-      /* width: 50%; */
+      width: 50%;
 
       &.labeled-select.focused {
         z-index: 10;

package/components/form/Taints.vue

@@ -112,7 +112,6 @@ export default {
 
 <style lang="scss" scoped>
   .compact-select {
-    height: 32px;
-    overflow: hidden;
+    height: 40px;
   }
 </style>

package/components/form/UnitInput.vue

@@ -258,11 +258,11 @@ export default {
     @update:value="update"
     @blur="update($event.target.value)"
   >
-    <template #suffixNew>
+    <template #suffix>
       <div
         v-if="displayUnit"
         :id="describedById"
-        class="addonNew"
+        class="addon"
         :class="{'with-tooltip': tooltip || tooltipKey}"
       >
         {{ displayUnit }}
@@ -272,12 +272,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .addonNew.with-tooltip {
+  .addon.with-tooltip {
     padding-right: 42px;
   }
-  .addonNew {
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-  }
 </style>