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

package/components/form/BannerSettings.vue

@@ -117,7 +117,7 @@ export default ({
 
 <template>
   <div>
-    <div class="row mb-20">
+    <div class="row">
       <div class="col span-6">
         <ColorInput
           v-model:value="value[bannerType].color"
@@ -137,7 +137,7 @@ export default ({
         />
       </div>
     </div>
-    <div class="row pb-10">
+    <div class="row mb-20">
       <ToggleSwitch
         v-model:value="isHtml"
         :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.toggleTextHtml')}`"
@@ -147,71 +147,76 @@ export default ({
         :on-label="t('banner.type.html')"
       />
     </div>
-    <div
-      v-if="!isHtml"
-      class="row"
-    >
-      <p
-        :id="bannerTitleId"
-        class="sr-only"
+    <div v-if="!isHtml">
+      <div
+        class="row"
       >
-        {{ t(`banner.${bannerType}`) }}
-      </p>
-      <div class="col span-6">
-        <LabeledInput
-          v-model:value="value[bannerType].text"
-          :disabled="isUiDisabled"
-          :label="t('banner.text')"
-          type="multiline"
-          :aria-describedby="bannerTitleId"
-        />
         <p
-          v-if="isConsentBanner"
-          class="banner-input-footnote mt-5 mb-20"
+          :id="bannerTitleId"
+          class="sr-only"
         >
-          {{ t('banner.consentFootnote') }}
+          {{ t(`banner.${bannerType}`) }}
         </p>
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="value[bannerType].text"
+            :disabled="isUiDisabled"
+            :label="t('banner.text')"
+            type="multiline"
+            :aria-describedby="bannerTitleId"
+          />
+          <p
+            v-if="isConsentBanner"
+            class="banner-input-footnote mt-5 mb-20"
+          >
+            {{ t('banner.consentFootnote') }}
+          </p>
+        </div>
+        <div class="col span-6">
+          <LabeledSelect
+            v-model:value="value[bannerType].fontSize"
+            :data-testid="`banner_font_size_options${bannerType}`"
+            :disabled="isUiDisabled"
+            :label="t('banner.bannerFontSize.label')"
+            :options="uiBannerFontSizeOptions"
+            :aria-describedby="bannerTitleId"
+          />
+        </div>
       </div>
-      <div class="col span-2">
-        <RadioGroup
-          v-model:value="value[bannerType].textAlignment"
-          name="bannerAlignment"
-          :data-testid="`banner_alignment_radio_options${bannerType}`"
-          :label="t('banner.bannerAlignment.label')"
-          :options="radioOptions.options"
-          :labels="radioOptions.labels"
-          :mode="mode"
-          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.bannerAlignment.label')}`"
-        />
-      </div>
-      <div class="col span-2">
-        <h3 id="decoration-banner-title-id">
-          {{ t('banner.bannerDecoration.label') }}
-        </h3>
-        <div
-          v-for="(o, i) in textDecorationOptions"
-          :key="i"
-        >
-          <Checkbox
-            v-model:value="value[bannerType][o.style]"
-            name="bannerDecoration"
-            :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
-            class="banner-decoration-checkbox"
+      <div class="row">
+        <div class="col span-6">
+          <RadioGroup
+            v-model:value="value[bannerType].textAlignment"
+            name="bannerAlignment"
+            :data-testid="`banner_alignment_radio_options${bannerType}`"
+            :label="t('banner.bannerAlignment.label')"
+            :options="radioOptions.options"
+            :labels="radioOptions.labels"
             :mode="mode"
-            :label="o.label"
-            :aria-describedby="`${bannerTitleId} decoration-banner-title-id`"
+            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.bannerAlignment.label')}`"
           />
         </div>
-      </div>
-      <div class="col span-2">
-        <LabeledSelect
-          v-model:value="value[bannerType].fontSize"
-          :data-testid="`banner_font_size_options${bannerType}`"
-          :disabled="isUiDisabled"
-          :label="t('banner.bannerFontSize.label')"
-          :options="uiBannerFontSizeOptions"
-          :aria-describedby="bannerTitleId"
-        />
+        <div style="display: flex;" class="col span-6">
+          <p style="width: 160px;" id="decoration-banner-title-id">
+            {{ t('banner.bannerDecoration.label') }}
+          </p>
+          <div style="display: flex;">
+            <div
+              v-for="(o, i) in textDecorationOptions"
+              :key="i"
+            >
+              <Checkbox
+                v-model:value="value[bannerType][o.style]"
+                name="bannerDecoration"
+                :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
+                class="banner-decoration-checkbox"
+                :mode="mode"
+                :label="o.label"
+                :aria-describedby="`${bannerTitleId} decoration-banner-title-id`"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div

package/components/form/ChangePassword.vue

@@ -355,7 +355,7 @@ export default {
           v-if="isRandomGenerated"
           :class="{'row': isCreateEdit}"
         >
-          <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-6': isCreateEdit}">
             <Password
               v-model:value="passwordGen"
               class="mt-10"
@@ -370,7 +370,7 @@ export default {
           class="userGen"
           :class="{'row': isCreateEdit}"
         >
-          <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-6': isCreateEdit}">
             <Password
               v-model:value="passwordNew"
               data-testid="account__new_password"
@@ -380,7 +380,7 @@ export default {
               :ignore-password-managers="!isChange"
             />
           </div>
-          <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-6': isCreateEdit}">
             <Password
               v-model:value="passwordConfirm"
               data-testid="account__confirm_password"
@@ -405,7 +405,7 @@ export default {
       class="text-error"
       :class="{'row': isCreateEdit}"
     >
-      <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
+      <div :class="{'col': isCreateEdit, 'span-6': isCreateEdit}">
         <Banner
           v-for="(err, i) in errorMessages"
           :key="i"
@@ -432,7 +432,7 @@ export default {
     }
 
     &.create, &.edit {
-      height: 185px;
+      height: 160px;
       .form {
         .fields {
           display: flex;

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

@@ -112,8 +112,7 @@ export default {
 
 <template>
   <div
-    class="color-input"
-    :class="{[mode]:mode, disabled: isDisabled}"
+    class="color-input-box"
     :data-testid="componentTestid + '-color-input'"
     :tabindex="isDisabled ? -1 : 0"
     @keydown.space.prevent
@@ -135,6 +134,7 @@ export default {
     </label>
     <div
       :data-testid="componentTestid + '-color-input_preview-container'"
+      :class="{[mode]:mode, disabled: isDisabled}"
       class="preview-container"
       @click.stop="$refs.input.click($event)"
     >
@@ -143,28 +143,31 @@ export default {
         class="color-display"
       >
         <input
+          style="margin-bottom: 6px;"
           ref="input"
           :aria-disabled="isDisabled ? 'true' : 'false'"
           :aria-label="ariaLabel"
           :aria-describedby="ariaDescribedBy"
           type="color"
+          class="color-input"
           :disabled="isDisabled"
           tabindex="-1"
           :value="inputValue"
           @input="$emit('update:value', $event.target.value)"
         >
       </span>
-      <span class="text-muted color-value">{{ inputValue }}</span>
+      <span class="color-value">{{ inputValue }}</span>
     </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
-.color-input {
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  padding: 10px;
-
+.color-input-box {
+  display: flex;
+  .text-label {
+    display: flex;
+    align-items: center;
+  }
   &:focus-visible {
     @include focus-outline;
   }
@@ -201,6 +204,26 @@ export default {
 
     .color-value {
       margin-left: 4px;
+      color: var(--input-label);
+    }
+    
+    &.disabled, &.disabled .selected, &[disabled], &[disabled]:hover {
+      color: var(--input-disabled-text);
+      outline-width: 0;
+      border-color: var(--input-disabled-border);
+      cursor: not-allowed;
+
+      label, span, div, input {
+        cursor: not-allowed !important;
+      }
+
+      .color-value {
+        color: var(--muted);
+      }
+
+      &::placeholder {
+          color: var(--input-disabled-placeholder);
+      }
     }
   }
 
@@ -226,4 +249,5 @@ export default {
     }
   }
 }
+
 </style>

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/Footer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
   <div v-if="!isView">
     <div class="spacer-small" />
 
-    <div
+    <!-- <div
       v-for="(err,idx) in errors"
       :key="idx"
     >
@@ -65,7 +65,7 @@ export default defineComponent({
         :closable="true"
         @close="closeError(idx)"
       />
-    </div>
+    </div> -->
     <div class="buttons">
       <div class="left">
         <slot name="left" />
@@ -97,13 +97,15 @@ export default defineComponent({
 
 <style lang='scss'>
   .buttons {
-    display: grid;
+    /* display: grid;
     grid-template-areas:  "left right";
-    grid-template-columns: "min-content auto";
+    grid-template-columns: "min-content auto"; */
+    display: flex;
 
     .left {
       grid-area: left;
       text-align: left;
+      margin-right: 10px;
 
       .btn, button {
         margin: 0 $column-gutter 0 0;
@@ -111,11 +113,13 @@ export default defineComponent({
     }
 
     .right {
-      grid-area: right;
-      text-align: right;
-
+      /* grid-area: right;
+      text-align: right; */
+      display: flex;
+      justify-content: flex-end;
       .btn, button {
-        margin: 0 0 0 $column-gutter;
+        /* margin: 0 0 0 $column-gutter; */
+        margin: 0 10px 0 0px;
       }
     }
   }

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>