dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/Tabbed/index.vue

@@ -368,13 +368,12 @@ export default {
   padding: 0;
 
   &.horizontal {
-    border: solid thin var(--border);
-    border-bottom: 0;
+    border-bottom: solid 1px var(--border);
     display: flex;
     flex-direction: row;
 
     + .tab-container {
-      border: solid thin var(--border);
+      // border: solid thin var(--border);
     }
 
     .tab.active {
@@ -443,7 +442,7 @@ export default {
 }
 
 .tab-container {
-  padding: 20px;
+  padding: 20px 0;
 
   &.no-content {
     padding: 0 0 3px 0;
@@ -499,7 +498,7 @@ margin: 0px -20px;
     // }
     & .tab {
       /* width: 100%; */
-      min-width: 120px;
+      min-width: 130px !important;
       height: 36px;
       /* border-top: solid 5px transparent; */
       display: flex;

package/components/auth/Principal.vue

@@ -154,7 +154,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $size: 40px;
+  $size: 20px;
 
   .principal {
     display: grid;
@@ -162,7 +162,7 @@ export default {
       "avatar name"
       "avatar description";
     grid-template-columns: $size auto;
-    grid-template-rows: auto math.div($size, 2);
+    // grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
     th {
@@ -189,6 +189,7 @@ export default {
     .avatar {
       grid-area: avatar;
       text-align: center;
+      
 
       DIV.empty {
         border: 1px solid var(--border);

package/components/auth/RoleDetailEdit.vue

@@ -331,7 +331,7 @@ export default {
       return this.value.listLocation;
     },
     ruleClass() {
-      return `col ${ this.isNamespaced ? 'span-4' : 'span-3' }`;
+      return `ruleCls col ${ this.isNamespaced ? 'span-3' : 'span-3' }`;
     },
     // Detail View
     rules() {
@@ -536,7 +536,11 @@ export default {
 </script>
 
 <template>
+
+  <!-- 加载状态下显示 Loading 组件 -->
   <Loading v-if="$fetchState.pending" />
+
+  <!-- 主表单容器，基于 CruResource 封装 -->
   <CruResource
     v-else
     class="receiver"
@@ -550,7 +554,10 @@ export default {
     @finish="save"
     @cancel="cancel"
   >
+    <!-- ========== 详情模式显示规则表 ========== -->
     <template v-if="isDetail">
+      
+      <!-- 当前规则列表 -->
       <SortableTable
         key-field="index"
         :rows="rules"
@@ -559,6 +566,8 @@ export default {
         :row-actions="false"
         :search="false"
       />
+
+      <!-- 继承的规则列表 -->
       <div
         v-for="(inherited, index) of inheritedRules"
         :key="index"
@@ -580,7 +589,11 @@ export default {
         />
       </div>
     </template>
+
+    <!-- ========== 表单编辑/创建模式 ========== -->
     <template v-else>
+
+      <!-- 名称 & 命名空间 & 描述输入 -->
       <NameNsDescription
         :value="value"
         :namespaced="isNamespaced"
@@ -591,11 +604,15 @@ export default {
         :rules="{ name: fvGetAndReportPathRules('displayName') }"
         @update:value="$emit('input', $event)"
       />
+
+      <!-- Rancher 相关的默认选项设置 -->
       <div
         v-if="isRancherType"
         class="row"
       >
         <div class="col span-6">
+
+          <!-- 默认角色选项 -->
           <RadioGroup
             v-model:value="defaultValue"
             name="storageSource"
@@ -606,6 +623,8 @@ export default {
             :mode="mode"
           />
         </div>
+
+        <!-- 锁定角色模板选项 -->
         <div
           v-if="isRancherRoleTemplate"
           class="col span-6"
@@ -622,17 +641,25 @@ export default {
         </div>
       </div>
       <div class="spacer" />
+
+      <!-- ========== 选项卡容器 ========== -->
       <Tabbed :side-tabs="true">
+
+        <!-- ---------- 授权资源 Tab ---------- -->
         <Tab
           name="grant-resources"
           :label="t('rbac.roletemplate.tabs.grantResources.label')"
           :weight="1"
         >
+
+          <!-- 校验错误展示 -->
           <Error
             :value="value.rules"
             :rules="fvGetAndReportPathRules('rules')"
             as-banner
           />
+
+          <!-- 规则编辑列表 -->
           <ArrayList
             v-model:value="value.rules"
             label="Resources"
@@ -642,9 +669,11 @@ export default {
             :default-add-value="defaultRule"
             :initial-empty-row="true"
             :show-header="true"
-            add-label="Add Resource"
+            add-label="添加资源"
             :mode="mode"
           >
+
+            <!-- 列表头部 -->
             <template #column-headers>
               <div class="column-headers row">
                 <div :class="ruleClass">
@@ -676,8 +705,12 @@ export default {
                 </div>
               </div>
             </template>
+
+            <!-- 列内容渲染 -->
             <template #columns="props">
               <div class="columns row mr-20">
+
+                <!-- 动作（verbs）选择 -->
                 <div :class="ruleClass">
                   <!-- Select verbs -->
                   <Select
@@ -694,8 +727,11 @@ export default {
                     @update:value="updateSelectValue(props.row.value, 'verbs', $event)"
                   />
                 </div>
+
+                <!-- 资源（resources）选择 -->
                 <div :class="ruleClass">
                   <Select
+                    style="width: auto;"
                     :value="getRule('resources', props.row.value)"
                     :disabled="isBuiltin"
                     :options="resourceOptions"
@@ -709,6 +745,8 @@ export default {
                     @createdListItem="setRule('resources', props.row.value, $event)"
                   />
                 </div>
+
+                <!-- API Groups 输入 -->
                 <div :class="ruleClass">
                   <LabeledInput
                     :value="getRule('apiGroups', props.row.value)"
@@ -718,6 +756,8 @@ export default {
                     @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   />
                 </div>
+
+                <!-- 非命名空间 URL 输入（仅非命名空间模式显示） -->
                 <div
                   v-if="!isNamespaced"
                   :class="ruleClass"
@@ -734,6 +774,8 @@ export default {
             </template>
           </ArrayList>
         </Tab>
+
+        <!-- ---------- 继承角色模板 Tab（仅 Rancher 角色模板可用） ---------- -->
         <Tab
           v-if="isRancherRoleTemplate"
           name="inherit-from"
@@ -746,7 +788,7 @@ export default {
             :remove-allowed="!isBuiltin"
             :add-allowed="!isBuiltin"
             label="Resources"
-            add-label="Add Resource"
+            add-label="添加资源"
             :mode="mode"
           >
             <template #columns="props">
@@ -777,13 +819,16 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .ruleCls {
+    margin-right: 10px;
+  }
   .required {
     color: var(--error);
   }
 
   :deep() {
     .column-headers {
-      margin-right: 75px;
+      margin-right: 95px;
       margin-bottom: 5px;
     }
 
@@ -793,7 +838,6 @@ export default {
       .remove {
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: flex-end;
       }
     }
@@ -805,4 +849,13 @@ export default {
       }
     }
   }
+
+  .columns {
+    :deep() {
+      .unlabeled-select {
+        width: auto;
+      }
+    }
+
+  }
 </style>

package/components/auth/SelectPrincipal.vue

@@ -212,6 +212,7 @@ export default {
       <Principal
         :value="option.label"
         :use-muted="false"
+        style="padding-top: 6px;"
       />
     </template>
 

package/components/form/BannerSettings.vue

@@ -104,10 +104,10 @@ export default ({
 </script>
 
 <template>
-  <div class="row mb-20">
+  <div class="row">
     <div class="col span-12">
       <div class="row">
-        <div class="col span-6">
+        <div class="col span-5">
           <LabeledInput
             v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
@@ -154,18 +154,20 @@ export default ({
           <h3>
             {{ 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"
-              :label="o.label"
-            />
+          <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"
+              />
+            </div>
           </div>
         </div>
         <div class="col span-2">
@@ -179,7 +181,7 @@ export default ({
         </div>
       </div>
       <div class="row mt-10">
-        <div class="col span-6">
+        <div class="col span-5">
           <ColorInput
             v-model:value="value[bannerType].color"
             :default-value="themeVars.bannerTextColor"
@@ -187,7 +189,7 @@ export default ({
             :mode="mode"
           />
         </div>
-        <div class="col span-6">
+        <div class="col span-7">
           <ColorInput
             v-model:value="value[bannerType].background"
             :default-value="themeVars.bannerBgColor"

package/components/form/ChangePassword.vue

@@ -353,7 +353,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"
@@ -368,7 +368,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"
@@ -378,7 +378,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"
@@ -403,7 +403,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"

package/components/form/ColorInput.vue

@@ -93,8 +93,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
@@ -107,6 +106,7 @@ export default {
     />{{ label }}</label>
     <div
       :data-testid="componentTestid + '-color-input_preview-container'"
+      :class="{[mode]:mode, disabled: isDisabled}"
       class="preview-container"
       @click.stop="$refs.input.click($event)"
     >
@@ -115,27 +115,30 @@ export default {
         class="color-display"
       >
         <input
+          style="margin-bottom: 6px;"
           ref="input"
           :aria-disabled="isDisabled ? 'true' : 'false'"
           :aria-label="t('generic.colorPicker')"
           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;
   }
@@ -172,6 +175,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);
+      }
     }
   }
 
@@ -197,4 +220,5 @@ export default {
     }
   }
 }
+
 </style>

package/components/form/Footer.vue

@@ -109,7 +109,7 @@ export default defineComponent({
       /* grid-area: right;
       text-align: right; */
       display: flex;
-
+      justify-content: flex-end;
       .btn, button {
         /* 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;
@@ -303,6 +304,7 @@ export default {
       // position: relative;
 
       .vs__selected {
+        background-color: var(--input-bg);
         color: var(--input-text);
       }
 

package/components/form/KeyValue.vue

@@ -389,10 +389,10 @@ export default {
       }
 
       rows = rows.map((item) => {
-        if (item.key.includes('harvester')) {
+        if (item.key && item.key.includes('harvester')) {
           item.key = item.key.replace('harvester', 'cloud');
         }
-        if (item.value.includes('harvester')) {
+        if (item.key && item.value.includes('harvester')) {
           item.value = item.value.replace('harvester', 'cloud');
         }
 
@@ -409,14 +409,22 @@ export default {
         [this.valueName]: value,
       };
 
-      obj.key = obj.key.replace('harvester', 'cloud');
-      obj.value = obj.value.replace('harvester', 'cloud');
+      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);
-      this.rows = s
+
+      // 上传镜像问题
+      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();
@@ -600,6 +608,7 @@ export default {
 </script>
 <template>
   <div class="key-value">
+    <!-- 标题部分：如果传了 title 或者插槽 title 才显示 -->
     <div
       v-if="title || $slots.title"
       class="clearfix"
@@ -607,6 +616,7 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
+          <!-- 标题右侧提示信息 -->
           <i
             v-if="titleProtip"
             v-clean-tooltip="titleProtip"
@@ -615,6 +625,8 @@ export default {
         </h3>
       </slot>
     </div>
+
+    <!-- 整个 Key-Value 表格容器 -->
     <div
       class="kv-container"
       role="grid"
@@ -622,6 +634,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 +674,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 如果是 view 模式但没有数据，显示占位符 -->
       <template v-if="!rows.length && isView">
         <div class="rowgroup">
           <div class="row">
@@ -678,6 +694,8 @@ export default {
           </div>
         </div>
       </template>
+
+      <!-- 遍历 rows 渲染每一行 -->
       <template
         v-for="(row,i) in rows"
         v-else
@@ -855,6 +873,8 @@ export default {
         </div>
       </template>
     </div>
+
+    <!-- 底部新增/从文件导入 -->
     <div
       v-if="(addAllowed || readAllowed) && !isView"
       class="footer mt-10"
@@ -863,6 +883,8 @@ export default {
         name="add"
         :add="add"
       >
+
+        <!-- 添加按钮 -->
         <button
           v-if="addAllowed"
           type="button"
@@ -878,6 +900,8 @@ export default {
             :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           /> {{ _addLabel }}
         </button>
+
+        <!-- 从文件读取 -->
         <FileSelector
           v-if="readAllowed"
           :disabled="isView"