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

package/components/form/ArrayList.vue

@@ -287,33 +287,6 @@ export default {
     </div>
 
     <div>
-      <div
-        v-if="showAdd && !isView"
-        class="footer mmt-6"
-      >
-        <slot
-          v-if="showAdd"
-          name="add"
-          :add="add"
-        >
-          <button
-            type="button"
-            class="btn role-tertiary add"
-            :class="[addClass]"
-            :disabled="loading || disableAdd"
-            :data-testid="`${componentTestid}-button`"
-            :aria-label="_addLabel"
-            role="button"
-            @click="add()"
-          >
-            <i
-              class="mr-5 icon"
-              :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
-            />
-            {{ _addLabel }}
-          </button>
-        </slot>
-      </div>
       <template v-if="rows.length">
         <div
           v-if="showHeader"
@@ -430,6 +403,33 @@ export default {
           </div>
         </slot>
       </div>
+      <div
+        v-if="showAdd && !isView"
+        class="footer mmt-6"
+      >
+        <slot
+          v-if="showAdd"
+          name="add"
+          :add="add"
+        >
+          <button
+            type="button"
+            class="btn role-tertiary add"
+            :class="[addClass]"
+            :disabled="loading || disableAdd"
+            :data-testid="`${componentTestid}-button`"
+            :aria-label="_addLabel"
+            role="button"
+            @click="add()"
+          >
+            <i
+              class="mr-5 icon"
+              :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
+            />
+            {{ _addLabel }}
+          </button>
+        </slot>
+      </div>
     </div>
   </div>
 </template>
@@ -451,20 +451,19 @@ export default {
     .value {
       flex: 1;
       INPUT {
-        height: $input-height;
-        border: solid var(--border-width) var(--input-border);
-        padding: 4px 11px;
-        &:hover{
-          box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-        }
+        height: $unlabeled-input-height;
       }
     }
   }
+
+  .box.hide-remove-is-view {
+    grid-template-columns: auto;
+  }
+
   .remove {
     text-align: right;
   }
   .footer {
-    margin-bottom: 24px;
     .protip {
       float: right;
       padding: 5px 0;
@@ -474,11 +473,4 @@ export default {
   .required {
     color: var(--error);
   }
-  :deep() .labeled-input.compact-input{
-    padding: 0px;
-  }
-  :deep() .box{
-    margin-bottom: 10px;
-  }
-    
 </style>

package/components/form/ArrayListGrouped.vue

@@ -127,16 +127,8 @@ export default {
       & > .remove {
         position: absolute;
 
-        top: 10px;
-        right: 10px;
-        & > .close{
-          width: 32px;
-          min-width: 32px !important;
-          color: var(--body-text);
-          &:hover{
-            color: var(--link);
-          }
-        }
+        top: 0;
+        right: 0;
       }
 
       & > .info-box {

package/components/form/ArrayListSelect.vue

@@ -98,6 +98,6 @@ export default {
 
 <style lang="scss" scoped>
 :deep() .unlabeled-select {
-  height: 30px;
+  height: 61px;
   }
 </style>

package/components/form/BannerSettings.vue

@@ -117,7 +117,7 @@ export default ({
 
 <template>
   <div>
-    <div class="row">
+    <div class="row mb-20">
       <div class="col span-6">
         <ColorInput
           v-model:value="value[bannerType].color"
@@ -137,7 +137,7 @@ export default ({
         />
       </div>
     </div>
-    <div class="row mb-20">
+    <div class="row pb-10">
       <ToggleSwitch
         v-model:value="isHtml"
         :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.toggleTextHtml')}`"
@@ -147,76 +147,71 @@ export default ({
         :on-label="t('banner.type.html')"
       />
     </div>
-    <div v-if="!isHtml">
-      <div
-        class="row"
+    <div
+      v-if="!isHtml"
+      class="row"
+    >
+      <p
+        :id="bannerTitleId"
+        class="sr-only"
       >
+        {{ 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
-          :id="bannerTitleId"
-          class="sr-only"
+          v-if="isConsentBanner"
+          class="banner-input-footnote mt-5 mb-20"
         >
-          {{ t(`banner.${bannerType}`) }}
+          {{ t('banner.consentFootnote') }}
         </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="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"
+      <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"
             :mode="mode"
-            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.bannerAlignment.label')}`"
+            :label="o.label"
+            :aria-describedby="`${bannerTitleId} decoration-banner-title-id`"
           />
         </div>
-        <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 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>
     </div>
     <div

package/components/form/ChangePassword.vue

@@ -355,7 +355,7 @@ export default {
           v-if="isRandomGenerated"
           :class="{'row': isCreateEdit}"
         >
-          <div :class="{'col': isCreateEdit, 'span-6': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-8': 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-6': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-4': 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-6': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-4': 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-6': isCreateEdit}">
+      <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
         <Banner
           v-for="(err, i) in errorMessages"
           :key="i"

package/components/form/ColorInput.vue

@@ -112,7 +112,8 @@ export default {
 
 <template>
   <div
-    class="color-input-box"
+    class="color-input"
+    :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
     :tabindex="isDisabled ? -1 : 0"
     @keydown.space.prevent
@@ -134,7 +135,6 @@ 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,31 +143,28 @@ 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="color-value">{{ inputValue }}</span>
+      <span class="text-muted color-value">{{ inputValue }}</span>
     </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
-.color-input-box {
-  display: flex;
-  .text-label {
-    display: flex;
-    align-items: center;
-  }
+.color-input {
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
+  padding: 10px;
+
   &:focus-visible {
     @include focus-outline;
   }
@@ -204,26 +201,6 @@ 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);
-      }
     }
   }
 
@@ -249,5 +226,4 @@ export default {
     }
   }
 }
-
 </style>

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,10 +97,9 @@ export default defineComponent({
 
 <style lang='scss'>
   .buttons {
-    /* display: grid;
+    display: grid;
     grid-template-areas:  "left right";
-    grid-template-columns: "min-content auto"; */
-    display: flex;
+    grid-template-columns: "min-content auto";
 
     .left {
       grid-area: left;
@@ -112,13 +111,11 @@ export default defineComponent({
     }
 
     .right {
-      /* grid-area: right;
-      text-align: right; */
-      display: flex;
-      justify-content: flex-end;
+      grid-area: right;
+      text-align: right;
+
       .btn, button {
-        /* margin: 0 0 0 $column-gutter; */
-        margin: 0 10px 0 0px;
+        margin: 0 0 0 $column-gutter;
       }
     }
   }

package/components/form/InputWithSelect.vue

@@ -217,7 +217,6 @@ export default {
 
       &.labeled-select {
         .selected {
-          background-color: var(--input-bg);
           color: var(--input-text);
           text-align: center;
           margin-right: 1em;
@@ -270,19 +269,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(),
@@ -292,8 +291,7 @@ export default {
 
     &.labeled-select:not(.disabled):not(.view) :deep(),
     &.unlabeled-select:not(.disabled):not(.view) :deep() {
-      /* border: solid 1px var(--input-border); */
-      height: 32px;
+      border: solid 1px var(--input-border);
     }
 
     &.labeled-select :deep(),
@@ -304,7 +302,6 @@ export default {
       // position: relative;
 
       .vs__selected {
-        background-color: var(--input-bg);
         color: var(--input-text);
       }
 

package/components/form/KeyValue.vue

@@ -283,7 +283,7 @@ export default {
       const gap = this.canRemove ? ' 50px' : '';
       const size = 2 + this.extraColumns.length;
 
-      return `grid-template-columns: repeat(${ size }, 400px)${ gap };`;
+      return `grid-template-columns: repeat(${ size }, 1fr)${ gap };`;
     },
     usedKeyOptions() {
       return this.rows.map((row) => row[this.keyName]);
@@ -330,7 +330,7 @@ export default {
     },
 
     getRows(value) {
-      let rows = [];
+      const rows = [];
 
       if ( this.asMap ) {
         const input = value || {};
@@ -403,18 +403,6 @@ export default {
       obj.binary = false;
       obj.canEncode = this.handleBase64;
       obj.supported = true;
-
-      // 上传镜像问题
-      const s = this.rows.filter(item => {
-        // 如果 item.key 或 obj.key 为空，直接保留
-        if (!item.key || !obj.key) {
-          return true;
-        }
-        // 两者都有值时才比较
-        return item.key !== obj.key;
-      });
-      this.rows = s;
-
       this.rows.push(obj);
       this.queueUpdate();
       this.$nextTick(() => {
@@ -478,11 +466,8 @@ export default {
         const valueName = this.valueName;
 
         for ( const row of this.rows ) {
-          // let value = (row[valueName] || '');
-          // const key = (row[keyName] || '').trim();
-
+          let value = (row[valueName] || '');
           const key = (row[keyName] || '').trim();
-          let value = (row[valueName] || '').trim();
 
           if (value && typeOf(value) === 'object') {
             out[key] = JSON.parse(JSON.stringify(value));
@@ -603,7 +588,6 @@ export default {
 </script>
 <template>
   <div class="key-value">
-    <!-- 标题部分：如果传了 title 或者插槽 title 才显示 -->
     <div
       v-if="title || $slots.title"
       class="clearfix"
@@ -611,7 +595,6 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
-          <!-- 标题右侧提示信息 -->
           <i
             v-if="titleProtip"
             v-clean-tooltip="titleProtip"
@@ -620,8 +603,6 @@ export default {
         </h3>
       </slot>
     </div>
-    
-    <!-- 整个 Key-Value 表格容器 -->
     <div
       class="kv-container"
       role="grid"
@@ -630,8 +611,6 @@ export default {
       :aria-colcount="extraColumns.length + 2"
       :style="containerStyle"
     >
-
-      <!-- 表头：有数据或者处于 view 模式才显示 -->
       <template v-if="rows.length || isView">
         <div class="rowgroup">
           <div class="row">
@@ -681,8 +660,6 @@ export default {
           </div>
         </div>
       </template>
-
-      <!-- 如果是 view 模式但没有数据，显示占位符 -->
       <template v-if="!rows.length && isView">
         <div class="rowgroup">
           <div class="row">
@@ -701,8 +678,6 @@ export default {
           </div>
         </div>
       </template>
-
-      <!-- 遍历 rows 渲染每一行 -->
       <template
         v-for="(row,i) in rows"
         v-else
@@ -811,7 +786,7 @@ export default {
                     :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
-                    :min-height="32"
+                    :min-height="40"
                     :spellcheck="false"
                     :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @update:value="queueUpdate"
@@ -890,8 +865,6 @@ export default {
         </div>
       </template>
     </div>
-
-    <!-- 底部新增/从文件导入 -->
     <div
       v-if="(addAllowed || readAllowed) && !isView"
       class="footer mt-10"
@@ -900,8 +873,6 @@ export default {
         name="add"
         :add="add"
       >
-
-        <!-- 添加按钮 -->
         <button
           v-if="addAllowed"
           type="button"
@@ -918,8 +889,6 @@ export default {
             :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           /> {{ _addLabel }}
         </button>
-
-        <!-- 从文件读取 -->
         <FileSelector
           v-if="readAllowed"
           :aria-label="t('generic.ariaLabel.readKeyValue')"
@@ -944,8 +913,8 @@ export default {
   }
   .kv-container {
     display: grid;
-    /* align-items: center; */
-    column-gap: 10px;
+    align-items: center;
+    column-gap: 20px;
 
     .key-value-label {
       margin-bottom: 0;
@@ -970,9 +939,6 @@ export default {
       }
       &.value textarea {
         padding: 10px 10px 10px 10px;
-        min-height:32px;
-        line-height: 12px; 
-        border: solid var(--border-width) var(--input-border); 
       }
 
       .text-monospace:not(.conceal) {
@@ -1011,14 +977,8 @@ export default {
     }
   }
   input {
-    height: 32px;
+    height: 40px;
     line-height: 1;
-    border: solid var(--border-width) var(--input-border);
-    padding: 4px 11px;
-    &:hover{
-      border: solid var(--border-width) var(--input-border);
-      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-    }
   }
   .footer {
     .protip {