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

package/components/SortableTable/paging.js

@@ -15,8 +15,7 @@ export default {
     },
 
     indexTo() {
-      // return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
-      return Math.min(this.totalRows, this.indexFrom + Number(this.perPage) - 1);
+      return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
     },
 
     totalPages() {
@@ -24,18 +23,17 @@ export default {
     },
 
     showPaging() {
-      // if (!this.paging) {
-      //   return false;
-      // }
+      if (!this.paging) {
+        return false;
+      }
 
-      // const havePages = this.totalPages > 1;
+      const havePages = this.totalPages > 1;
 
-      // if (this.altLoading) {
-      //   return havePages;
-      // }
+      if (this.altLoading) {
+        return havePages;
+      }
 
-      // return !this.loading && havePages;
-      return !this.loading && this.paging && this.totalPages >= 1;
+      return !this.loading && havePages;
     },
 
     pagingDisplay() {
@@ -78,9 +76,7 @@ export default {
   },
 
   data() {
-    // const perPage = this.getPerPage();
-
-    return { page: 1, perPage:10 };
+    return { page: 1 };
   },
 
   watch: {
@@ -95,23 +91,17 @@ export default {
       }
     },
 
-    // page() {
-    //   this.debouncedPaginationChanged();
-    // },
+    page() {
+      this.debouncedPaginationChanged();
+    },
 
-    // perPage() {
-    //   this.debouncedPaginationChanged();
-    // },
+    perPage() {
+      this.debouncedPaginationChanged();
+    },
 
   },
 
   methods: {
-
-    setgetPerPage(num) {
-      this.setPage(1);
-      this.perPage = num;
-    },
-
     setPage(num) {
       if (this.page === num) {
         return;

package/components/SortableTable/selection.js

@@ -10,7 +10,7 @@ export const NONE = 'none';
 
 export default {
   mounted() {
-    const table = this.$el && this.$el.querySelector('TABLE');
+    const table = this.$el.querySelector('TABLE');
 
     this._onRowClickBound = this.onRowClick.bind(this);
     this._onRowMousedownBound = this.onRowMousedown.bind(this);
@@ -22,7 +22,7 @@ export default {
   },
 
   beforeUnmount() {
-    const table = this.$el && this.$el.querySelector('TABLE');
+    const table = this.$el.querySelector('TABLE');
 
     table.removeEventListener('click', this._onRowClickBound);
     table.removeEventListener('mousedown', this._onRowMousedownBound);

package/components/Tabbed/Tab.vue

@@ -100,14 +100,14 @@ export default {
       v-if="shouldShowHeader"
       class="tab-header"
     >
-      <!-- <h2>
+      <h2>
         {{ labelDisplay }}
         <i
           v-if="tooltip"
           v-clean-tooltip="tooltip"
           class="icon icon-info icon-lg"
         />
-      </h2> -->
+      </h2>
       <slot name="tab-header-right" />
     </div>
     <slot v-bind="{active}" />
@@ -118,7 +118,7 @@ export default {
 .tab-header {
   display: flex;
   justify-content: space-between;
-  /* margin-bottom: 15px; */
+  margin-bottom: 15px;
   align-items: center;
 
   h2 {

package/components/Tabbed/index.vue

@@ -285,15 +285,15 @@ export default {
         :data-testid="tab.name"
         :class="{tab: true, active: tab.active, disabled: tab.disabled, error: (tab.error)}"
         role="presentation"
-        @click.prevent="select(tab.name, $event)"
-        @keyup.enter.space="select(tab.name, $event)"
       >
         <a
           :data-testid="`btn-${tab.name}`"
           :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
-          role="tab"  
+          role="tab"
+          @click.prevent="select(tab.name, $event)"
+          @keyup.enter.space="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -382,6 +382,15 @@ export default {
   margin: 0;
   padding: 0;
 
+  &:focus-visible {
+    outline: none;
+
+    .tab.active {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
+  }
+
   &.horizontal {
     border: solid thin var(--border);
     border-bottom: 0;
@@ -389,7 +398,7 @@ export default {
     flex-direction: row;
 
     + .tab-container {
-      // border: solid thin var(--border);
+      border: solid thin var(--border);
     }
 
     .tab.active {
@@ -397,12 +406,8 @@ export default {
     }
   }
 
-  &:focus {
-    outline: none;
-
-    & .tab.active a span {
-      text-decoration: none;
-    }
+  &:focus .tab.active a span {
+    text-decoration: underline;
   }
 
   .tab {
@@ -419,7 +424,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: none;
+          text-decoration: underline;
         }
       }
     }
@@ -489,68 +494,45 @@ export default {
 
 .side-tabs {
   display: flex;
-  flex-direction: column;
-  /* box-shadow: 0 0 20px var(--shadow);
+  box-shadow: 0 0 20px var(--shadow);
   border-radius: calc(var(--border-radius) * 2);
-  background-color: var(--tabbed-sidebar-bg); */
-margin: 0px -20px;
+  background-color: var(--tabbed-sidebar-bg);
+
   .tab-container {
     padding: 20px;
   }
 
   & .tabs {
-    /* width: $sideways-tabs-width; */
-    /* min-width: $sideways-tabs-width; */
+    width: $sideways-tabs-width;
+    min-width: $sideways-tabs-width;
     display: flex;
-    border-bottom:1px solid #d7d7d7;
-    padding: 0 0 0 20px;
-    /* flex: 1 0; */
-    /* flex-direction: column; */
+    flex: 1 0;
+    flex-direction: column;
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
+
     & .tab {
-      /* width: 100%; */
-      min-width: 120px;
-      height: 36px;
-      /* border-top: solid 5px transparent; */
-      display: flex;
-      justify-content: center;
-      padding: 8px 16px;
-      box-sizing: border-box;
-      border: 1px solid #d7d7d7;
-      border-bottom: 0px;
-      margin-right: 5px;
-      border-radius: 2px;
+      width: 100%;
+      border-left: solid 5px transparent;
 
       &.toggle A {
         color: var(--primary);
-        padding: 0px;
       }
 
       A {
-        color: var(--input-label);
-        padding: 0px;
+        color: var(--primary);
       }
 
       &.active {
         background-color: var(--body-bg);
-        border-top: solid 2px var(--primary);
-        position: relative;
-        &.active::before{
-          position: absolute;
-          right: 0;
-          left: 0;
-          top: 34px;
-          border-bottom: 1px solid #fff;
-          content: '';
+        border-left: solid 5px var(--primary);
 
-        }
         & A {
-          color: var(--primary);
+          color: var(--input-label);
         }
       }
 
@@ -594,7 +576,7 @@ margin: 0px -20px;
   &
 
   .tab-container {
-    /* width: calc(100% - #{$sideways-tabs-width}); */
+    width: calc(100% - #{$sideways-tabs-width});
     flex-grow: 1;
     background-color: var(--body-bg);
   }

package/components/YamlEditor.vue

@@ -247,6 +247,7 @@ export default {
       @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"
+      @validationChanged="$emit('validationChanged', $event)"
     />
     <FileDiff
       v-else

package/components/auth/Principal.vue

@@ -16,10 +16,6 @@ export default {
     showLabels: {
       type:    Boolean,
       default: false,
-    },
-    isShowPass: {
-      type:    Boolean,
-      default: false,
     }
   },
 
@@ -92,7 +88,7 @@ export default {
     <template v-else-if="principal">
       <div class="avatar">
         <img
-          src="@shell/assets/images/user.png"
+          :src="principal.avatarSrc"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
         >
@@ -102,19 +98,11 @@ export default {
         class="name"
       >
         <table>
-          <tr class="mb-10">
-            <td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td>
-          </tr>
-          <tr class="mb-10">
-            <td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td>
-          </tr>
-          <tr
-            v-if="isShowPass"
-            class="mb-10"
-          >
-            <td>修改密码: </td><td>****** <slot name="edit" /></td>
-          </tr>
-          <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
+          <tbody>
+            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
+            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
+            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
+          </tbody>
         </table>
       </div>
       <template v-else>
@@ -166,7 +154,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $size: 20px;
+  $size: 40px;
 
   .principal {
     display: grid;
@@ -174,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 {
@@ -184,35 +172,23 @@ export default {
     }
 
     &.showLabels {
-      /* grid-template-areas:
+      grid-template-areas:
         "avatar name";
       grid-template-columns: 60px auto;
       grid-template-rows: 60px;
-      column-gap: 0; */
-      display: flex;
-      column-gap:0;
+      column-gap: 0;
       .name {
-        display: flex;
         line-height: unset;
       }
-      table tr {
-        display: block;
-      }
+
       table tr td:not(:first-of-type) {
         padding-left: 10px;
       }
-      table tr td:not(:last-of-type) {
-        width: 100px;
-      }
     }
 
     .avatar {
-      /* grid-area: avatar;
-      text-align: center; */
-      width: 287px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      grid-area: avatar;
+      text-align: center;
 
       DIV.empty {
         border: 1px solid var(--border);

package/components/auth/RoleDetailEdit.vue

@@ -333,7 +333,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() {
@@ -546,11 +546,7 @@ export default {
 </script>
 
 <template>
-
-  <!-- 加载状态下显示 Loading 组件 -->
   <Loading v-if="$fetchState.pending" />
-
-  <!-- 主表单容器，基于 CruResource 封装 -->
   <CruResource
     v-else
     class="receiver"
@@ -564,10 +560,7 @@ export default {
     @finish="save"
     @cancel="cancel"
   >
-    <!-- ========== 详情模式显示规则表 ========== -->
     <template v-if="isDetail">
-      
-      <!-- 当前规则列表 -->
       <SortableTable
         key-field="index"
         :rows="rules"
@@ -618,11 +611,7 @@ export default {
         />
       </div>
     </template>
-
-    <!-- ========== 表单编辑/创建模式 ========== -->
     <template v-else>
-
-      <!-- 名称 & 命名空间 & 描述输入 -->
       <NameNsDescription
         :value="value"
         :namespaced="isNamespaced"
@@ -633,15 +622,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"
@@ -652,8 +637,6 @@ export default {
             :mode="mode"
           />
         </div>
-
-        <!-- 锁定角色模板选项 -->
         <div
           v-if="isRancherRoleTemplate"
           class="col span-6"
@@ -670,25 +653,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"
@@ -698,11 +673,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">
@@ -734,12 +707,8 @@ export default {
                 </div>
               </div>
             </template>
-
-            <!-- 列内容渲染 -->
             <template #columns="props">
               <div class="columns row mr-20">
-
-                <!-- 动作（verbs）选择 -->
                 <div :class="ruleClass">
                   <!-- Select verbs -->
                   <Select
@@ -756,11 +725,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"
@@ -774,8 +740,6 @@ export default {
                     @createdListItem="setRule('resources', props.row.value, $event)"
                   />
                 </div>
-
-                <!-- API Groups 输入 -->
                 <div :class="ruleClass">
                   <LabeledInput
                     :value="getRule('apiGroups', props.row.value)"
@@ -785,8 +749,6 @@ export default {
                     @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   />
                 </div>
-
-                <!-- 非命名空间 URL 输入（仅非命名空间模式显示） -->
                 <div
                   v-if="!isNamespaced"
                   :class="ruleClass"
@@ -814,12 +776,10 @@ export default {
             </template>
           </ArrayList>
         </Tab>
-
-        <!-- ---------- 继承角色模板 Tab（仅 Rancher 角色模板可用） ---------- -->
         <Tab
           v-if="isRancherRoleTemplate"
           name="inherit-from"
-          label="继承表单"
+          label="Inherit From"
           :weight="0"
         >
           <ArrayList
@@ -828,7 +788,7 @@ export default {
             :remove-allowed="!isBuiltin"
             :add-allowed="!isBuiltin"
             label="Resources"
-            add-label="添加资源"
+            add-label="Add Resource"
             :mode="mode"
           >
             <template #columns="props">
@@ -859,16 +819,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;
     }
 
@@ -878,6 +835,7 @@ export default {
       .remove {
         display: flex;
         flex-direction: column;
+        justify-content: center;
         align-items: flex-end;
       }
     }
@@ -885,17 +843,8 @@ export default {
     .columns {
       .col > .unlabeled-select:not(.taggable) {
         // override the odd padding-top from shell/assets/styles/global/_select.scss
-        /* padding: $unlabaled-select-padding */
-      }
-    }
-  }
-
-  .columns {
-    :deep() {
-      .unlabeled-select {
-        width: auto;
+        padding: $unlabaled-select-padding
       }
     }
-
   }
 </style>

package/components/auth/SelectPrincipal.vue

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