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

package/components/form/NameNsDescription.vue

@@ -156,6 +156,10 @@ export default {
       type:    Boolean,
       default: true,
     },
+    isDialog: {
+      type:    Boolean,
+      default: false
+    },
     rules: {
       default: () => ({
         namespace:   [],
@@ -276,10 +280,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
       ];
     });
@@ -356,10 +360,11 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-8`;
+        return `span-6`;
       }
       // Name and namespace take up two columns.
-      let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
+      // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
+      let cols = 2;
 
       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.
@@ -428,13 +433,18 @@ export default {
 </script>
 
 <template>
-  <div class="row mb-20">
-    <slot name="project-selector" />
+  <div class="row">
+
+    <!-- 命名空间创建输入框 -->
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"
-      class="col span-3"
+      class="col span-6"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
+      style="display: flex;"
     >
+
+      <!-- 输入命名空间名称 -->
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
@@ -446,6 +456,8 @@ export default {
         :required="nameRequired"
         :rules="rules.namespace"
       />
+
+      <!-- 取消创建命名空间按钮 -->
       <button
         :aria-label="t('namespace.cancelCreateAriaLabel')"
         @click="cancelCreateNamespace"
@@ -456,10 +468,12 @@ export default {
         />
       </button>
     </div>
+
+    <!-- 命名空间选择下拉框 -->
     <div
       v-if="namespaced && !nameNsHidden && !createNamespace"
       :data-testid="componentTestid + '-namespace'"
-      class="col span-3"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -478,10 +492,11 @@ export default {
       />
     </div>
 
+    <!-- 名称输入框 -->
     <div
       v-if="!nameHidden && !nameNsHidden"
       :data-testid="componentTestid + '-name'"
-      class="col span-3"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-6'"
     >
       <LabeledInput
         ref="nameInput"
@@ -498,11 +513,28 @@ export default {
       />
     </div>
 
+    <!-- 自定义插槽，可插入额外内容 -->
     <slot name="customize" />
-    <div
+    <!-- <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'"
     >
       <LabeledInput
         key="description"
@@ -516,13 +548,15 @@ export default {
       />
     </div>
 
+    <!-- 底部插槽 -->
     <div
-      v-for="(slot, i) in extraColumns"
-      :key="i"
-      :class="{ col: true, [colSpan]: true }"
+      v-if="$slots.bottom"
+      style="width: 100%;"
     >
-      <slot :name="slot" />
+      <slot name="bottom" />
     </div>
+
+    <!-- 间隔占位符 -->
     <div
       v-if="showSpacer"
       class="spacer"
@@ -533,13 +567,8 @@ 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;
@@ -576,4 +605,14 @@ 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,6 +41,10 @@ export default {
     mode: {
       type:    String,
       default: _CREATE,
+    },
+    placeholder: {
+      type:    String,
+      default: '',
     }
   },
   data() {
@@ -116,6 +120,7 @@ export default {
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
       :mode="mode"
+      :placeholder="placeholder"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>
@@ -148,12 +153,13 @@ export default {
     </LabeledInput>
     <div
       v-if="isRandom"
-      class="mt-10 genPassword"
+      class="genPassword"
     >
       <a
         href="#"
         @click.prevent.stop="generatePassword"
-      ><i class="icon icon-refresh" /> {{ t('changePassword.newGeneratedPassword') }}</a>
+        style="height: 32px;display: flex;align-items: center;"
+      ><i class="icon icon-refresh mr-5 pl-5" /> {{ t('changePassword.newGeneratedPassword') }}</a>
     </div>
   </div>
 </template>
@@ -161,20 +167,23 @@ export default {
 <style lang="scss" scoped>
   .password {
     display: flex;
-    flex-direction: column;
+    /* flex-direction: column; */
 
     .labeled-input {
       .addon {
-        display: flex;
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        /* 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,14 +364,13 @@ 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 mb-20">
+          <div class="row mt-20">
             <div class="col span-6">
               <LabeledSelect
                 :mode="mode"
@@ -393,7 +392,7 @@ export default {
               />
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-20">
             <RadioGroup
               :options="namespaceSelectionOptions"
               :labels="namespaceSelectionLabels"
@@ -439,7 +438,7 @@ export default {
             @update:value="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
-            <div class="col span-9">
+            <div class="col span-6">
               <LabeledSelect
                 v-if="hasNodes"
                 v-model:value="props.row.value.topologyKey"
@@ -469,7 +468,7 @@ export default {
             </div>
             <div
               v-if="'weight' in props.row.value"
-              class="col span-3"
+              class="col span-6"
             >
               <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 class="mr-10">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div class="mr-10">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div class="mr-20">
+      <div style="width: 500px;">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>
@@ -101,7 +101,7 @@ export default {
 .headers {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--border);
     height: 30px;

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -173,16 +173,15 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="row"
+    class="rowNew"
   >
     <Select
-      class="mr-10"
       :mode="mode"
       :value="type"
       :disabled="true"
       :options="types"
     />
-    <div class="resource-availability mr-10">
+    <div class="resource-availability">
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
@@ -191,16 +190,18 @@ export default {
         :color-stops="{'100': '--primary'}"
       />
     </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 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>
   </div>
 </template>
 
@@ -208,13 +209,13 @@ export default {
   .resource-availability {
     align-self: center;
   }
-  .row {
+  .rowNew {
+    margin-bottom: 10px;
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
 
     & > * {
-      width: 100%;
+      width: 400px;
     }
   }
 </style>

package/components/form/ResourceQuota/Project.vue

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

package/components/form/ResourceQuota/ProjectRow.vue

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

package/components/form/Select.vue

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

package/components/form/SimpleSecretSelector.vue

@@ -24,13 +24,14 @@ 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 },
+  components: { LabeledSelect, ResourceLabeledSelect, LabeledInput },
 
   props: {
     test:        { type: String, default: '' },
@@ -199,10 +200,18 @@ export default {
 
 <template>
   <div class="secret-selector show-key-selector">
-    <div class="input-container">
-      <ResourceLabeledSelect
+    <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
         v-model:value="name"
-        class="col span-6"
+       
         :disabled="!isView && disabled"
         :loading="$fetchState.pending"
         :label="secretNameLabel"
@@ -211,16 +220,27 @@ export default {
         :paginated-resource-settings="paginateSecretsSetting"
         :all-resources-settings="allSecretsSettings"
         @selecting="updateSecretName"
-      />
-      <LabeledSelect
+      /> -->
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model:value="key"
+          :disabled="isKeyDisabled"
+          :mode="mode"
+          :label="keyNameLabel"
+          @update:value="$emit('updateSecretKey', $event)"
+        />
+      <!-- <LabeledSelect
         v-model:value="key"
-        class="col span-6"
+       
         :disabled="isKeyDisabled"
         :options="keys"
         :label="keyNameLabel"
         :mode="mode"
         @selecting="updateSecretKey"
-      />
+      /> -->
+     </div>
+     
     </div>
   </div>
 </template>
@@ -247,7 +267,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,6 +112,7 @@ export default {
 
 <style lang="scss" scoped>
   .compact-select {
-    height: 40px;
+    height: 32px;
+    overflow: hidden;
   }
 </style>

package/components/form/UnitInput.vue

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