dashboard-shell-shell 1.0.1000000117 → 1.0.1000000118

package/components/Tabbed/index.vue

@@ -368,12 +368,13 @@ export default {
   padding: 0;
 
   &.horizontal {
-    border-bottom: solid 1px var(--border);
+    border: solid thin var(--border);
+    border-bottom: 0;
     display: flex;
     flex-direction: row;
 
     + .tab-container {
-      // border: solid thin var(--border);
+      border: solid thin var(--border);
     }
 
     .tab.active {
@@ -442,7 +443,7 @@ export default {
 }
 
 .tab-container {
-  padding: 20px 0;
+  padding: 20px;
 
   &.no-content {
     padding: 0 0 3px 0;
@@ -498,7 +499,7 @@ margin: 0px -20px;
     // }
     & .tab {
       /* width: 100%; */
-      min-width: 130px !important;
+      min-width: 120px;
       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: 20px;
+  $size: 40px;
 
   .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,7 +189,6 @@ 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 `ruleCls col ${ this.isNamespaced ? 'span-3' : 'span-3' }`;
+      return `col ${ this.isNamespaced ? 'span-4' : 'span-3' }`;
     },
     // Detail View
     rules() {
@@ -536,11 +536,7 @@ export default {
 </script>
 
 <template>
-
-  <!-- 加载状态下显示 Loading 组件 -->
   <Loading v-if="$fetchState.pending" />
-
-  <!-- 主表单容器，基于 CruResource 封装 -->
   <CruResource
     v-else
     class="receiver"
@@ -554,10 +550,7 @@ export default {
     @finish="save"
     @cancel="cancel"
   >
-    <!-- ========== 详情模式显示规则表 ========== -->
     <template v-if="isDetail">
-      
-      <!-- 当前规则列表 -->
       <SortableTable
         key-field="index"
         :rows="rules"
@@ -566,8 +559,6 @@ export default {
         :row-actions="false"
         :search="false"
       />
-
-      <!-- 继承的规则列表 -->
       <div
         v-for="(inherited, index) of inheritedRules"
         :key="index"
@@ -589,11 +580,7 @@ export default {
         />
       </div>
     </template>
-
-    <!-- ========== 表单编辑/创建模式 ========== -->
     <template v-else>
-
-      <!-- 名称 & 命名空间 & 描述输入 -->
       <NameNsDescription
         :value="value"
         :namespaced="isNamespaced"
@@ -604,15 +591,11 @@ 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"
@@ -623,8 +606,6 @@ export default {
             :mode="mode"
           />
         </div>
-
-        <!-- 锁定角色模板选项 -->
         <div
           v-if="isRancherRoleTemplate"
           class="col span-6"
@@ -641,25 +622,17 @@ 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"
@@ -669,11 +642,9 @@ export default {
             :default-add-value="defaultRule"
             :initial-empty-row="true"
             :show-header="true"
-            add-label="添加资源"
+            add-label="Add Resource"
             :mode="mode"
           >
-
-            <!-- 列表头部 -->
             <template #column-headers>
               <div class="column-headers row">
                 <div :class="ruleClass">
@@ -705,12 +676,8 @@ export default {
                 </div>
               </div>
             </template>
-
-            <!-- 列内容渲染 -->
             <template #columns="props">
               <div class="columns row mr-20">
-
-                <!-- 动作（verbs）选择 -->
                 <div :class="ruleClass">
                   <!-- Select verbs -->
                   <Select
@@ -727,11 +694,8 @@ 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"
@@ -745,8 +709,6 @@ export default {
                     @createdListItem="setRule('resources', props.row.value, $event)"
                   />
                 </div>
-
-                <!-- API Groups 输入 -->
                 <div :class="ruleClass">
                   <LabeledInput
                     :value="getRule('apiGroups', props.row.value)"
@@ -756,8 +718,6 @@ export default {
                     @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   />
                 </div>
-
-                <!-- 非命名空间 URL 输入（仅非命名空间模式显示） -->
                 <div
                   v-if="!isNamespaced"
                   :class="ruleClass"
@@ -774,8 +734,6 @@ export default {
             </template>
           </ArrayList>
         </Tab>
-
-        <!-- ---------- 继承角色模板 Tab（仅 Rancher 角色模板可用） ---------- -->
         <Tab
           v-if="isRancherRoleTemplate"
           name="inherit-from"
@@ -788,7 +746,7 @@ export default {
             :remove-allowed="!isBuiltin"
             :add-allowed="!isBuiltin"
             label="Resources"
-            add-label="添加资源"
+            add-label="Add Resource"
             :mode="mode"
           >
             <template #columns="props">
@@ -819,16 +777,13 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .ruleCls {
-    margin-right: 10px;
-  }
   .required {
     color: var(--error);
   }
 
   :deep() {
     .column-headers {
-      margin-right: 95px;
+      margin-right: 75px;
       margin-bottom: 5px;
     }
 
@@ -838,6 +793,7 @@ export default {
       .remove {
         display: flex;
         flex-direction: column;
+        justify-content: center;
         align-items: flex-end;
       }
     }
@@ -849,13 +805,4 @@ export default {
       }
     }
   }
-
-  .columns {
-    :deep() {
-      .unlabeled-select {
-        width: auto;
-      }
-    }
-
-  }
 </style>

package/components/auth/SelectPrincipal.vue

@@ -212,7 +212,6 @@ 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">
+  <div class="row mb-20">
     <div class="col span-12">
       <div class="row">
-        <div class="col span-5">
+        <div class="col span-6">
           <LabeledInput
             v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
@@ -154,20 +154,18 @@ export default ({
           <h3>
             {{ t('banner.bannerDecoration.label') }}
           </h3>
-          <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
+            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 class="col span-2">
@@ -181,7 +179,7 @@ export default ({
         </div>
       </div>
       <div class="row mt-10">
-        <div class="col span-5">
+        <div class="col span-6">
           <ColorInput
             v-model:value="value[bannerType].color"
             :default-value="themeVars.bannerTextColor"
@@ -189,7 +187,7 @@ export default ({
             :mode="mode"
           />
         </div>
-        <div class="col span-7">
+        <div class="col span-6">
           <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-6': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-8': 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-6': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-4': 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-6': isCreateEdit}">
+          <div :class="{'col': isCreateEdit, 'span-4': 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-6': isCreateEdit}">
+      <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
         <Banner
           v-for="(err, i) in errorMessages"
           :key="i"

package/components/form/ColorInput.vue

@@ -93,7 +93,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
@@ -106,7 +107,6 @@ 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,30 +115,27 @@ 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="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;
   }
@@ -175,26 +172,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);
-      }
     }
   }
 
@@ -220,5 +197,4 @@ 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,7 +217,6 @@ export default {
 
       &.labeled-select {
         .selected {
-          background-color: var(--input-bg);
           color: var(--input-text);
           text-align: center;
           margin-right: 1em;
@@ -304,7 +303,6 @@ 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 && item.key.includes('harvester')) {
+        if (item.key.includes('harvester')) {
           item.key = item.key.replace('harvester', 'cloud');
         }
-        if (item.key && item.value.includes('harvester')) {
+        if (item.value.includes('harvester')) {
           item.value = item.value.replace('harvester', 'cloud');
         }
 
@@ -409,22 +409,14 @@ 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 为空，直接保留
-        if (!item.key || !obj.key) {
-          return true;
-        }
-        // 两者都有值时才比较
-        return item.key !== obj.key;
-      });
-      this.rows = s;
+       // 上传镜像问题
+      const s = this.rows.filter(item => item.key !== obj.key);
+      this.rows = s
 
       this.rows.push(obj);
       this.queueUpdate();
@@ -608,7 +600,6 @@ export default {
 </script>
 <template>
   <div class="key-value">
-    <!-- 标题部分：如果传了 title 或者插槽 title 才显示 -->
     <div
       v-if="title || $slots.title"
       class="clearfix"
@@ -616,7 +607,6 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
-          <!-- 标题右侧提示信息 -->
           <i
             v-if="titleProtip"
             v-clean-tooltip="titleProtip"
@@ -625,8 +615,6 @@ export default {
         </h3>
       </slot>
     </div>
-
-    <!-- 整个 Key-Value 表格容器 -->
     <div
       class="kv-container"
       role="grid"
@@ -634,8 +622,6 @@ export default {
       :aria-colcount="extraColumns.length + 2"
       :style="containerStyle"
     >
-
-      <!-- 表头：有数据或者处于 view 模式才显示 -->
       <template v-if="rows.length || isView">
         <div class="rowgroup">
           <div class="row">
@@ -674,8 +660,6 @@ export default {
           </div>
         </div>
       </template>
-
-      <!-- 如果是 view 模式但没有数据，显示占位符 -->
       <template v-if="!rows.length && isView">
         <div class="rowgroup">
           <div class="row">
@@ -694,8 +678,6 @@ export default {
           </div>
         </div>
       </template>
-
-      <!-- 遍历 rows 渲染每一行 -->
       <template
         v-for="(row,i) in rows"
         v-else
@@ -873,8 +855,6 @@ export default {
         </div>
       </template>
     </div>
-
-    <!-- 底部新增/从文件导入 -->
     <div
       v-if="(addAllowed || readAllowed) && !isView"
       class="footer mt-10"
@@ -883,8 +863,6 @@ export default {
         name="add"
         :add="add"
       >
-
-        <!-- 添加按钮 -->
         <button
           v-if="addAllowed"
           type="button"
@@ -900,8 +878,6 @@ export default {
             :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           /> {{ _addLabel }}
         </button>
-
-        <!-- 从文件读取 -->
         <FileSelector
           v-if="readAllowed"
           :disabled="isView"