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

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);
@@ -217,6 +218,7 @@ export default {
 
       &.labeled-select {
         .selected {
+          background-color: var(--input-bg);
           color: var(--input-text);
           text-align: center;
           margin-right: 1em;
@@ -291,7 +293,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 +305,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 || {};
@@ -390,6 +390,17 @@ export default {
         });
       }
 
+      rows = rows.map((item) => {
+        if (item?.key?.includes('harvester')) {
+          item.key = item.key?.replace('harvester', 'cloud');
+        }
+        if (item?.value?.includes('harvester')) {
+          item.value = item.value?.replace('harvester', 'cloud');
+        }
+
+        return item;
+      });
+
       return rows;
     },
 
@@ -400,9 +411,23 @@ export default {
         [this.valueName]: value,
       };
 
+      obj.key = obj.key?.replace('harvester', 'cloud');
+      obj.value = obj.value?.replace('harvester', 'cloud');
       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 +491,11 @@ 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();
+
+          const key = (row[keyName]?.replace('cloud', 'harvester') || '').trim();
+          let value = (row[valueName]?.replace('cloud', 'harvester') || '').trim();
 
           if (value && typeOf(value) === 'object') {
             out[key] = JSON.parse(JSON.stringify(value));
@@ -588,6 +616,7 @@ export default {
 </script>
 <template>
   <div class="key-value">
+    <!-- 标题部分：如果传了 title 或者插槽 title 才显示 -->
     <div
       v-if="title || $slots.title"
       class="clearfix"
@@ -595,6 +624,7 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
+          <!-- 标题右侧提示信息 -->
           <i
             v-if="titleProtip"
             v-clean-tooltip="titleProtip"
@@ -603,6 +633,8 @@ export default {
         </h3>
       </slot>
     </div>
+    
+    <!-- 整个 Key-Value 表格容器 -->
     <div
       class="kv-container"
       role="grid"
@@ -611,6 +643,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 +694,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 如果是 view 模式但没有数据，显示占位符 -->
       <template v-if="!rows.length && isView">
         <div class="rowgroup">
           <div class="row">
@@ -678,6 +714,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 遍历 rows 渲染每一行 -->
       <template
         v-for="(row,i) in rows"
         v-else
@@ -786,7 +824,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 +903,8 @@ export default {
         </div>
       </template>
     </div>
+
+    <!-- 底部新增/从文件导入 -->
     <div
       v-if="(addAllowed || readAllowed) && !isView"
       class="footer mt-10"
@@ -873,6 +913,8 @@ export default {
         name="add"
         :add="add"
       >
+
+        <!-- 添加按钮 -->
         <button
           v-if="addAllowed"
           type="button"
@@ -889,6 +931,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 +957,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 +983,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) {
@@ -967,6 +1014,7 @@ export default {
   .remove {
     text-align: center;
     BUTTON {
+      min-width: auto;
       padding: 0px;
     }
   }
@@ -977,8 +1025,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 {
@@ -1000,4 +1054,8 @@ export default {
   border-collapse: separate;
   z-index: 0; // Prevent label from cover other elements outside of the input
 }
+
+h3{
+  font-size: 14px;
+}
 </style>