dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/components/form/ClusterAppearance.vue

@@ -88,11 +88,12 @@ export default {
 <style lang="scss" scoped>
   .cluster-appearance {
     display: flex;
-    flex-direction: column;
-    margin: 3px 35px 0px 0px;
+    // flex-direction: column;
+    // align-items: center;
+    // margin: 3px 35px 0px 0px;
 
     label {
-      margin: 6px 0 0;
+      margin: 10px 10px 0 0;
     }
 
     &-preview {

package/components/form/ColorInput.vue

@@ -4,6 +4,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 export default {
   emits: ['update:value'],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:    String,
@@ -67,6 +69,23 @@ export default {
       const disabled = this.disabled;
 
       return this.mode !== this.editMode || disabled;
+    },
+
+    ariaLabel() {
+      // We allow override with $attrs['aria-label'] for more control
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'];
+      } else if (this.labelKey) {
+        return this.t(this.labelKey);
+      } else if (this.label) {
+        return this.label;
+      } else {
+        return this.t('generic.colorPicker');
+      }
+    },
+
+    ariaDescribedBy() {
+      return this.$attrs['aria-describedby'] || undefined;
     }
   },
 
@@ -99,11 +118,20 @@ export default {
     @keydown.space.prevent
     @keyup.enter.space.stop="handleKeyup($event)"
   >
-    <label class="text-label"><t
-      v-if="labelKey"
-      :k="labelKey"
-      :raw="true"
-    />{{ label }}</label>
+    <!-- let make "label" not to be picked up by screen readers -->
+    <!-- because it's already included in aria-label (sr's announced it twice) -->
+    <label
+      v-if="labelKey || label"
+      class="text-label"
+      aria-hidden="true"
+    >
+      <t
+        v-if="labelKey"
+        :k="labelKey"
+        :raw="true"
+      />
+      <template v-else-if="label">{{ label }}</template>
+    </label>
     <div
       :data-testid="componentTestid + '-color-input_preview-container'"
       :class="{[mode]:mode, disabled: isDisabled}"
@@ -118,7 +146,8 @@ export default {
           style="margin-bottom: 6px;"
           ref="input"
           :aria-disabled="isDisabled ? 'true' : 'false'"
-          :aria-label="t('generic.colorPicker')"
+          :aria-label="ariaLabel"
+          :aria-describedby="ariaDescribedBy"
           type="color"
           class="color-input"
           :disabled="isDisabled"

package/components/form/Command.vue

@@ -146,9 +146,9 @@ export default {
       </div>
     </div>
 
-    <div class="row mt-20">
+    <div class="row">
       <div
-        class="col span-6"
+        class="span-6"
         data-testid="input-command-workingDir"
       >
         <LabeledInput
@@ -159,13 +159,13 @@ export default {
           @update:value="update"
         />
       </div>
-      <div class="col span-6">
+      <div class="span-6">
         <div
           :style="{ 'align-items': 'center' }"
           class="row"
         >
           <div
-            class="col span-6"
+            class="col"
             data-testid="input-command-stdin"
           >
             <LabeledSelect
@@ -191,7 +191,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
     <h3>{{ t('workload.container.titles.env') }}</h3>
     <EnvVars
       :mode="mode"

package/components/form/Conditions.vue

@@ -68,6 +68,20 @@ export default {
         };
       });
     },
+  },
+  methods: {
+    hans(row) {
+      const conditionMap = {
+      'DiskPressure': '磁盘压力',
+      'MemoryPressure': '内存压力',
+      'PIDPressure': '进程数压力',
+      'Ready': '就绪状态',
+      'EtcdIsVoter': 'Etcd投票成员',
+      'NetworkUnavailable': '网络不可用',
+    };
+    
+      return conditionMap[row.condition] || row.condition;
+    }
   }
 };
 </script>
@@ -83,7 +97,7 @@ export default {
     :search="false"
   >
     <template #cell:condition="{row}">
-      <span :class="{'text-error': row.error}">{{ row.condition }}</span>
+      <span :class="{'text-error': row.error}">{{ hans(row) }}</span>
     </template>
 
     <template #cell:status="{row}">

package/components/form/FileImageSelector.vue

@@ -132,7 +132,7 @@ $logo: 60px;
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--overlay-bg);
+      background-color: var(--subtle-overlay-bg);
     }
 
   }

package/components/form/Footer.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
 import Banner from '@components/Banner/Banner.vue';
 
 export default defineComponent({
-  emits: ['save', 'done'],
+  emits: ['save', 'done', 'closeError'],
 
   components: { AsyncButton, Banner },
 
@@ -20,8 +20,8 @@ export default defineComponent({
     },
 
     errors: {
-      type:    Array,
-      default: null,
+      type:    Array as PropType<string[]>,
+      default: () => []
     },
 
     disableSave: {
@@ -37,6 +37,10 @@ export default defineComponent({
   },
 
   methods: {
+    closeError(index: number) {
+      this.$emit('closeError', index);
+    },
+
     save(buttonCb: AsyncButtonCallback) {
       this.$emit('save', buttonCb);
     },
@@ -58,6 +62,8 @@ export default defineComponent({
       <Banner
         color="error"
         :label="err"
+        :closable="true"
+        @close="closeError(idx)"
       />
     </div> -->
     <div class="buttons">
@@ -99,6 +105,7 @@ export default defineComponent({
     .left {
       grid-area: left;
       text-align: left;
+      margin-right: 10px;
 
       .btn, button {
         margin: 0 $column-gutter 0 0;

package/components/form/HealthCheck.vue

@@ -56,7 +56,6 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -70,7 +69,6 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
 
     <div class="row">
       <Probe

package/components/form/HookOption.vue

@@ -128,7 +128,7 @@ export default {
     </div>
 
     <template v-if="selectHook === 'exec'">
-      <div class="mb-20 single-value">
+      <div class="col single-value mt-20">
         <h4>{{ t('workload.container.lifecycleHook.exec.title') }}</h4>
         <div>
           <ShellInput
@@ -143,65 +143,61 @@ export default {
     </template>
 
     <template v-if="selectHook === 'httpGet'">
-      <h4>{{ t('workload.container.lifecycleHook.httpGet.title') }}</h4>
+      <div class="mt-20"></div>
+      <h4 class="mb-10">{{ t('workload.container.lifecycleHook.httpGet.title') }}</h4>
       <div class="var-row">
-        <LabeledInput
-          v-model:value="value.httpGet.host"
-          :label="t('workload.container.lifecycleHook.httpGet.host.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.host.placeholder')"
-          :mode="mode"
-          @update:value="update"
-        />
-        <LabeledInput
-          v-model:value="value.httpGet.path"
-          :label="t('workload.container.lifecycleHook.httpGet.path.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.path.placeholder')"
-          :mode="mode"
-          @update:value="update"
-        />
-        <LabeledInput
-          v-model:value.number="value.httpGet.port"
-          type="number"
-          :label="t('workload.container.lifecycleHook.httpGet.port.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.port.placeholder')"
-          :mode="mode"
-          required
-          @update:value="update"
-        />
-        <LabeledSelect
-          v-model:value="value.httpGet.scheme"
-          :label="t('workload.container.lifecycleHook.httpGet.scheme.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpGet.scheme.placeholder')"
-          :options="schemeOptions"
-          :mode="mode"
-          @update:value="update"
-        />
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.host"
+              :label="t('workload.container.lifecycleHook.httpGet.host.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.host.placeholder')"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.path"
+              :label="t('workload.container.lifecycleHook.httpGet.path.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.path.placeholder')"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value.number="value.httpGet.port"
+              type="number"
+              :label="t('workload.container.lifecycleHook.httpGet.port.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.port.placeholder')"
+              :mode="mode"
+              required
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.httpGet.scheme"
+              :label="t('workload.container.lifecycleHook.httpGet.scheme.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpGet.scheme.placeholder')"
+              :options="schemeOptions"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+        </div>
       </div>
 
-      <h4>{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
+      <h4 class="mb-10">{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
       <div
         v-for="(header, index) in value.httpGet.httpHeaders"
         :key="index"
         class="var-row"
         data-testid="hookoption-header-row"
       >
-        <LabeledInput
-          v-model:value="value.httpGet.httpHeaders[index].name"
-          :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
-          class="single-value"
-          :mode="mode"
-          required
-          @update:value="update"
-        />
-        <LabeledInput
-          v-model:value="value.httpGet.httpHeaders[index].value"
-          :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
-          :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
-          class="single-value"
-          :mode="mode"
-          @update:value="update"
-        />
         <div class="remove">
           <button
             v-if="!isView"
@@ -213,18 +209,41 @@ export default {
             <t k="generic.remove" />
           </button>
         </div>
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.httpHeaders[index].name"
+              :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
+              class="single-value"
+              :mode="mode"
+              required
+              @update:value="update"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="value.httpGet.httpHeaders[index].value"
+              :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
+              :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
+              class="single-value"
+              :mode="mode"
+              @update:value="update"
+            />
+          </div>
+        </div>
       </div>
 
       <div>
         <button
           v-if="!isView"
           type="button"
-          class="btn role-link mb-20"
+          class="btn role-link mb-20 httpAdd"
           :disabled="mode === 'view'"
           data-testid="hookoption-add-header-button"
           @click.stop="addHeader"
         >
-          Add Header
+          添加HTTP头
         </button>
       </div>
     </template>
@@ -233,11 +252,11 @@ export default {
 
 <style lang='scss' scoped>
 .var-row{
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 100px;
-  grid-column-gap: 20px;
-  margin-bottom: 20px;
-  align-items: center;
+  // display: grid;
+  // grid-template-columns: 1fr 1fr 1fr 1fr 100px;
+  // grid-column-gap: 20px;
+  // margin-bottom: 20px;
+  // align-items: center;
 
   .single-value {
     grid-column: span 2;
@@ -248,6 +267,16 @@ export default {
   }
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 }
+.httpAdd{
+  background: var(--accent-btn);
+  border: solid 1px var(--primary);
+  color: var(--primary);
+}
+
+H4{
+  font-size: 14px;
+}
 </style>

package/components/form/InputWithSelect.vue

@@ -30,7 +30,7 @@ export default {
 
     selectLabel: {
       type:    String,
-      default: '',
+      default: ' ',
     },
 
     selectValue: {
@@ -164,11 +164,12 @@ export default {
       :v-bind="$attrs"
       @update:value="change"
     />
+    <div style="width: 100%;height: 24px;"></div>
     <LabeledInput
       v-if="textLabel || textRules.length > 0"
       ref="text"
       v-model:value="string"
-      class="input-string col span-8"
+      class="input-string span-8"
       :label="textLabel"
       :placeholder="placeholder"
       :disabled="disabled || textDisabled"
@@ -204,7 +205,7 @@ export default {
 
   &.select-after {
     height: 100%;
-    flex-direction: row-reverse;
+    // flex-direction: row-reverse;
 
     & .input-string {
       border-radius: var(--border-radius) 0 0 var(--border-radius);
@@ -270,19 +271,19 @@ export default {
     margin-right: 0;
 
     &:hover:not(.focused):not(.disabled):not(.view) {
-      border: 0px solid var(--input-hover-border) !important;
+      border: 1px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 0px solid var(--outline) !important;
+      border: 1px solid var(--outline) !important;
     }
 
     &:hover:not(.focused):not(.disabled) {
-      border: 0px solid var(--input-hover-border) !important;
+      border: 1px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 0px solid var(--outline) !important;
+      border: 1px solid var(--outline) !important;
     }
 
     &.labeled-select.focused :deep(),