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

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/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,9 +97,10 @@ 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;
@@ -111,11 +112,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/InputWithSelect.vue

@@ -217,6 +217,7 @@ export default {
 
       &.labeled-select {
         .selected {
+          background-color: var(--input-bg);
           color: var(--input-text);
           text-align: center;
           margin-right: 1em;
@@ -269,19 +270,19 @@ export default {
     margin-right: 0;
 
     &:hover:not(.focused):not(.disabled):not(.view) {
-      border: 1px solid var(--input-hover-border) !important;
+      border: 0px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 1px solid var(--outline) !important;
+      border: 0px solid var(--outline) !important;
     }
 
     &:hover:not(.focused):not(.disabled) {
-      border: 1px solid var(--input-hover-border) !important;
+      border: 0px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 1px solid var(--outline) !important;
+      border: 0px solid var(--outline) !important;
     }
 
     &.labeled-select.focused :deep(),
@@ -291,7 +292,8 @@ export default {
 
     &.labeled-select:not(.disabled):not(.view) :deep(),
     &.unlabeled-select:not(.disabled):not(.view) :deep() {
-      border: solid 1px var(--input-border);
+      /* border: solid 1px var(--input-border); */
+      height: 32px;
     }
 
     &.labeled-select :deep(),
@@ -302,6 +304,7 @@ 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 }, 1fr)${ gap };`;
+      return `grid-template-columns: repeat(${ size }, 400px)${ gap };`;
     },
     usedKeyOptions() {
       return this.rows.map((row) => row[this.keyName]);
@@ -330,7 +330,7 @@ export default {
     },
 
     getRows(value) {
-      const rows = [];
+      let rows = [];
 
       if ( this.asMap ) {
         const input = value || {};
@@ -403,6 +403,18 @@ 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(() => {
@@ -466,8 +478,11 @@ export default {
         const valueName = this.valueName;
 
         for ( const row of this.rows ) {
-          let value = (row[valueName] || '');
+          // let value = (row[valueName] || '');
+          // const key = (row[keyName] || '').trim();
+
           const key = (row[keyName] || '').trim();
+          let value = (row[valueName] || '').trim();
 
           if (value && typeOf(value) === 'object') {
             out[key] = JSON.parse(JSON.stringify(value));
@@ -588,6 +603,7 @@ export default {
 </script>
 <template>
   <div class="key-value">
+    <!-- 标题部分：如果传了 title 或者插槽 title 才显示 -->
     <div
       v-if="title || $slots.title"
       class="clearfix"
@@ -595,6 +611,7 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
+          <!-- 标题右侧提示信息 -->
           <i
             v-if="titleProtip"
             v-clean-tooltip="titleProtip"
@@ -603,6 +620,8 @@ export default {
         </h3>
       </slot>
     </div>
+    
+    <!-- 整个 Key-Value 表格容器 -->
     <div
       class="kv-container"
       role="grid"
@@ -611,6 +630,8 @@ export default {
       :aria-colcount="extraColumns.length + 2"
       :style="containerStyle"
     >
+
+      <!-- 表头：有数据或者处于 view 模式才显示 -->
       <template v-if="rows.length || isView">
         <div class="rowgroup">
           <div class="row">
@@ -660,6 +681,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 如果是 view 模式但没有数据，显示占位符 -->
       <template v-if="!rows.length && isView">
         <div class="rowgroup">
           <div class="row">
@@ -678,6 +701,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 遍历 rows 渲染每一行 -->
       <template
         v-for="(row,i) in rows"
         v-else
@@ -786,7 +811,7 @@ export default {
                     :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
-                    :min-height="40"
+                    :min-height="32"
                     :spellcheck="false"
                     :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @update:value="queueUpdate"
@@ -865,6 +890,8 @@ export default {
         </div>
       </template>
     </div>
+
+    <!-- 底部新增/从文件导入 -->
     <div
       v-if="(addAllowed || readAllowed) && !isView"
       class="footer mt-10"
@@ -873,6 +900,8 @@ export default {
         name="add"
         :add="add"
       >
+
+        <!-- 添加按钮 -->
         <button
           v-if="addAllowed"
           type="button"
@@ -889,6 +918,8 @@ export default {
             :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           /> {{ _addLabel }}
         </button>
+
+        <!-- 从文件读取 -->
         <FileSelector
           v-if="readAllowed"
           :aria-label="t('generic.ariaLabel.readKeyValue')"
@@ -913,8 +944,8 @@ export default {
   }
   .kv-container {
     display: grid;
-    align-items: center;
-    column-gap: 20px;
+    /* align-items: center; */
+    column-gap: 10px;
 
     .key-value-label {
       margin-bottom: 0;
@@ -939,6 +970,9 @@ 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) {
@@ -977,8 +1011,14 @@ export default {
     }
   }
   input {
-    height: 40px;
+    height: 32px;
     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 {