dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/form/LabeledSelect.vue

@@ -290,7 +290,7 @@ export default {
 </script>
 
 <template>
-   <div style="display: flex;">
+  <div style="display: flex;">
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
       :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
@@ -309,196 +309,196 @@ export default {
       </label>
     </div>
     <!-- label -->
-  <div
-    ref="select"
-    class="labeled-select"
-    :class="[
-      $attrs.class,
-      {
-        disabled: isView || disabled,
-        focused,
-        [mode]: true,
-        [status]: status,
-        taggable: $attrs.taggable,
-        taggable: $attrs.multiple,
-        hoverable: hoverTooltip,
-        'compact-input': isCompact,
-        'no-label': !hasLabel
-      }
-    ]"
-    :tabindex="isView || disabled ? -1 : 0"
-    role="listbox"
-    @click="focusSearch"
-    @keydown.enter="focusSearch"
-    @keydown.down.prevent="focusSearch"
-    @keydown.space.prevent="focusSearch"
-  >
-    <!-- <div
-      :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
-      :style="{ border: 'none' }"
+    <div
+      ref="select"
+      class="labeled-select"
+      :class="[
+        $attrs.class,
+        {
+          disabled: isView || disabled,
+          focused,
+          [mode]: true,
+          [status]: status,
+          taggable: $attrs.taggable,
+          taggable: $attrs.multiple,
+          hoverable: hoverTooltip,
+          'compact-input': isCompact,
+          'no-label': !hasLabel
+        }
+      ]"
+      :tabindex="isView || disabled ? -1 : 0"
+      role="listbox"
+      @click="focusSearch"
+      @keydown.enter="focusSearch"
+      @keydown.down.prevent="focusSearch"
+      @keydown.space.prevent="focusSearch"
     >
-      <label
-        v-if="hasLabel"
-        :id="`labeled-select-uid-${uid}`"
+      <!-- <div
+        :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
+        :style="{ border: 'none' }"
       >
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
-      </label>
-    </div> -->
-    <v-select
-      ref="select-input"
-      :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
-      v-bind="filteredAttrs"
-      class="inline"
-      :append-to-body="appendToBody"
-      :calculate-position="positionDropdown"
-      :class="{ 'no-label': !(label || '').length}"
-      :clearable="clearable"
-      :disabled="isView || disabled || loading"
-      :get-option-key="getOptionKey"
-      :get-option-label="(opt) => getOptionLabel(opt)"
-      :label="optionLabel"
-      :options="_options"
-      :map-keydown="mappedKeys"
-      :placeholder="placeholder"
-      :reduce="(x) => reduce(x)"
-      :filterable="isFilterable"
-      :searchable="isSearchable"
-      :selectable="selectable"
-      :modelValue="value != null && !loading ? value : ''"
-      :dropdown-should-open="dropdownShouldOpen"
-      :tabindex="-1"
-      role="listitem"
-      @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
-      @search:blur="onBlur"
-      @search:focus="onFocus"
-      @search="onSearch"
-      @open="onOpen"
-      @close="onClose"
-      @option:selecting="$emit('selecting', $event)"
-      @option:deselecting="$emit('deselecting', $event)"
-    >
-    
-      <template #option="option">
-        <template v-if="showTagPrompts">
-          <div class="only-user-opts">
-            {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
-          </div>
-        </template>
-        <template v-else-if="option.kind === 'group'">
-          <div class="vs__option-kind-group">
+        <label
+          v-if="hasLabel"
+          :id="`labeled-select-uid-${uid}`"
+        >
+          <t
+            v-if="labelKey"
+            :k="labelKey"
+          />
+          <template v-else-if="label">{{ label }}</template>
+
+          <span
+            v-if="requiredField"
+            class="required"
+          >*</span>
+        </label>
+      </div> -->
+      <v-select
+        ref="select-input"
+        :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
+        v-bind="filteredAttrs"
+        class="inline"
+        :append-to-body="appendToBody"
+        :calculate-position="positionDropdown"
+        :class="{ 'no-label': !(label || '').length}"
+        :clearable="clearable"
+        :disabled="isView || disabled || loading"
+        :get-option-key="getOptionKey"
+        :get-option-label="(opt) => getOptionLabel(opt)"
+        :label="optionLabel"
+        :options="_options"
+        :map-keydown="mappedKeys"
+        :placeholder="placeholder"
+        :reduce="(x) => reduce(x)"
+        :filterable="isFilterable"
+        :searchable="isSearchable"
+        :selectable="selectable"
+        :modelValue="value != null && !loading ? value : ''"
+        :dropdown-should-open="dropdownShouldOpen"
+        :tabindex="-1"
+        role="listitem"
+        @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
+        @search:blur="onBlur"
+        @search:focus="onFocus"
+        @search="onSearch"
+        @open="onOpen"
+        @close="onClose"
+        @option:selecting="$emit('selecting', $event)"
+        @option:deselecting="$emit('deselecting', $event)"
+      >
+      
+        <template #option="option">
+          <template v-if="showTagPrompts">
+            <div class="only-user-opts">
+              {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
+            </div>
+          </template>
+          <template v-else-if="option.kind === 'group'">
+            <div class="vs__option-kind-group">
+              <i
+                v-if="option.icon"
+                class="icon"
+                :class="{ [option.icon]: true}"
+              />
+              <b>{{ getOptionLabel(option) }}</b>
+              <div v-if="option.badge">
+                {{ option.badge }}
+              </div>
+            </div>
+          </template>
+          <!-- <template v-else-if="option.kind === 'divider'">
+            <hr role="none">
+          </template> -->
+          <template v-else-if="option.kind === 'highlighted'">
+            <div class="option-kind-highlighted">
+              {{ option.label }}
+            </div>
+          </template>
+          <div
+            v-else
+            class="vs__option-kind"
+            :class="{ 'has-icon' : hasGroupIcon}"
+            @mousedown="(e) => onClickOption(option, e)"
+          >
+            {{ getOptionLabel(option) }}
             <i
-              v-if="option.icon"
-              class="icon"
-              :class="{ [option.icon]: true}"
+              v-if="option.error"
+              class="icon icon-warning pull-right"
+              style="font-size: 20px;"
             />
-            <b>{{ getOptionLabel(option) }}</b>
-            <div v-if="option.badge">
-              {{ option.badge }}
-            </div>
           </div>
         </template>
-        <!-- <template v-else-if="option.kind === 'divider'">
-          <hr role="none">
-        </template> -->
-        <template v-else-if="option.kind === 'highlighted'">
-          <div class="option-kind-highlighted">
-            {{ option.label }}
-          </div>
-        </template>
-        <div
-          v-else
-          class="vs__option-kind"
-          :class="{ 'has-icon' : hasGroupIcon}"
-          @mousedown="(e) => onClickOption(option, e)"
+        <!-- Pass down templates provided by the caller -->
+        <template
+          v-for="(_, slot) of $slots"
+          :key="slot"
+          #[slot]="scope"
         >
-          {{ getOptionLabel(option) }}
-          <i
-            v-if="option.error"
-            class="icon icon-warning pull-right"
-            style="font-size: 20px;"
+          <slot
+            :name="slot"
+            v-bind="scope"
           />
-        </div>
-      </template>
-      <!-- Pass down templates provided by the caller -->
-      <template
-        v-for="(_, slot) of $slots"
-        :key="slot"
-        #[slot]="scope"
-      >
-        <slot
-          :name="slot"
-          v-bind="scope"
-        />
-      </template>
+        </template>
 
-      <template #list-footer>
-        <div
-          v-if="canPaginate && totalResults && pages > 1"
-          class="pagination-slot"
-        >
-          <div class="load-more">
-            <i
-              v-if="paginating"
-              class="icon icon-spinner icon-spin"
-            />
-            <div v-else>
-              <a
-                v-if="canLoadMore"
-                @click="loadMore"
-              > {{ t('labelSelect.pagination.more') }}</a>
+        <template #list-footer>
+          <div
+            v-if="canPaginate && totalResults && pages > 1"
+            class="pagination-slot"
+          >
+            <div class="load-more">
+              <i
+                v-if="paginating"
+                class="icon icon-spinner icon-spin"
+              />
+              <div v-else>
+                <a
+                  v-if="canLoadMore"
+                  @click="loadMore"
+                > {{ t('labelSelect.pagination.more') }}</a>
+              </div>
             </div>
-          </div>
 
-          <div class="count">
-            {{ optionCounts }}
+            <div class="count">
+              {{ optionCounts }}
+            </div>
           </div>
-        </div>
-      </template>
-      <template #no-options="{ search }">
-        <div class="no-options-slot">
-          <template v-if="showTagPrompts">
-            <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
-          </template>
-          <div
-            v-else-if="paginating"
-            class="paginating"
-          >
-            <i class="icon icon-spinner icon-spin" />
+        </template>
+        <template #no-options="{ search }">
+          <div class="no-options-slot">
+            <template v-if="showTagPrompts">
+              <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
+            </template>
+            <div
+              v-else-if="paginating"
+              class="paginating"
+            >
+              <i class="icon icon-spinner icon-spin" />
+            </div>
+            <template v-else-if="search">
+              {{ t('labelSelect.noOptions.noMatch') }}
+            </template>
+            <template v-else>
+              {{ t(noOptionsLabelKey) }}
+            </template>
           </div>
-          <template v-else-if="search">
-            {{ t('labelSelect.noOptions.noMatch') }}
-          </template>
-          <template v-else>
-            {{ t(noOptionsLabelKey) }}
-          </template>
-        </div>
-      </template>
-    </v-select>
-    <i
-      v-if="loading"
-      class="icon icon-spinner icon-spin icon-lg"
-    />
-    <LabeledTooltip
-      v-if="tooltip && !focused"
-      :hover="hoverTooltip"
-      :value="tooltip"
-      :status="status"
-    />
-    <LabeledTooltip
-      v-if="!!validationMessage"
-      :hover="hoverTooltip"
-      :value="validationMessage"
-    />
-  </div>
+        </template>
+      </v-select>
+      <i
+        v-if="loading"
+        class="icon icon-spinner icon-spin icon-lg"
+      />
+      <LabeledTooltip
+        v-if="tooltip && !focused"
+        :hover="hoverTooltip"
+        :value="tooltip"
+        :status="status"
+      />
+      <LabeledTooltip
+        v-if="!!validationMessage"
+        :hover="hoverTooltip"
+        :value="validationMessage"
+      />
+    </div>
   </div>
 </template>
 

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -232,11 +232,10 @@ export default {
     v-else
     class="cluster-permissions-editor"
   >
-    <div class="row mt-10">
+    <div class="row mt-10 mb-20">
       <div class="col span-12">
         <SelectPrincipal
           v-focus
-          class="mb-20"
           :mode="mode"
           :retain-selection="true"
           data-testid="cluster-member-select"

package/components/form/Members/MembershipEditor.vue

@@ -170,7 +170,7 @@ export default {
   >
     <template #column-headers>
       <div class="box mb-0">
-        <div class="column-headers row">
+        <div class="column-headers row" style="width: 95%;">
           <div class="col span-6">
             <label class="text-label">{{ t('membershipEditor.user') }}</label>
           </div>

package/components/form/NameNsDescription.vue

@@ -356,7 +356,7 @@ export default {
 
     colSpan() {
       if (!this.horizontal) {
-        return `span-6`;
+        return `span-5`;
       }
       // Name and namespace take up two columns.
       // let cols = (this.nameNsHidden ? 0 : 2) + (this.descriptionHidden ? 0 : 1) + this.extraColumns.length;
@@ -430,12 +430,17 @@ export default {
 
 <template>
   <div class="row">
+
+    <!-- 命名空间创建输入框 -->
     <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'"
+      class="col span-5"
+      :class=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
+      style="display: flex;"
     >
+
+      <!-- 输入命名空间名称 -->
       <LabeledInput
         ref="namespaceInput"
         v-model:value="namespace"
@@ -447,6 +452,8 @@ export default {
         :required="nameRequired"
         :rules="rules.namespace"
       />
+
+      <!-- 取消创建命名空间按钮 -->
       <button
         aria="Cancel create"
         @click="cancelCreateNamespace"
@@ -457,10 +464,12 @@ 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=" isDialog? 'namespace-item-row mb-20': 'col span-5'"
     >
       <LabeledSelect
         v-show="!createNamespace"
@@ -479,6 +488,7 @@ export default {
       />
     </div>
 
+    <!-- 名称输入框 -->
     <div
       v-if="!nameNsHidden"
       :data-testid="componentTestid + '-name'"
@@ -499,12 +509,15 @@ export default {
       />
     </div>
 
+    <!-- 自定义插槽，可插入额外内容 -->
     <slot name="customize" />
     <!-- <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
-      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-6']"
+      :class="['col', extraColumns.length > 0 ? 'span-3' : 'span-5']"
     > -->
+
+    <!-- 额外的动态列 -->
     <div
       v-for="(slot, i) in extraColumns"
       :key="i"
@@ -512,6 +525,8 @@ export default {
     >
       <slot :name="slot" />
     </div>
+
+    <!-- 描述输入框 -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"
@@ -529,12 +544,15 @@ export default {
       />
     </div>
 
+    <!-- 底部插槽 -->
     <div
       v-if="$slots.bottom"
       style="width: 100%;"
     >
       <slot name="bottom" />
     </div>
+
+    <!-- 间隔占位符 -->
     <div
       v-if="showSpacer"
       class="spacer"
@@ -545,13 +563,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;

package/components/form/Password.vue

@@ -153,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>
@@ -170,6 +171,9 @@ export default {
 
     .labeled-input {
       .addon {
+        position: absolute;
+        top: 6px;
+        right: 6px;
         /* display: flex;
         align-items: center;
         justify-content: center;

package/components/form/ResourceQuota/Namespace.vue

@@ -78,7 +78,7 @@ export default {
       <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div style="width: 500px;">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -190,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,6 +210,7 @@ export default {
     align-self: center;
   }
   .rowNew {
+    margin-bottom: 10px;
     display: flex;
     justify-content: space-between;
 

package/components/form/ResourceQuota/ProjectRow.vue

@@ -70,7 +70,6 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    style="justify-content: right;"
     class="rowNew"
   >
     <Select

package/components/form/Select.vue

@@ -372,8 +372,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/nav/Favorite.vue

@@ -44,9 +44,13 @@ export default {
 
 <style lang="scss" scoped>
   .favorite {
+    display: flex;
+    align-items: center;
     position: relative;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 22px;
+    margin-top: 4px;
+    margin-left: 10px;
     transform: ease-in-out-all 1s;
 
     &.icon-star-open {