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

package/components/SortableTable/paging.js

@@ -15,7 +15,8 @@ export default {
     },
 
     indexTo() {
-      return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
+      // return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
+      return Math.min(this.totalRows, this.indexFrom + Number(this.perPage) - 1);
     },
 
     totalPages() {
@@ -23,17 +24,18 @@ 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 && havePages;
+      return !this.loading && this.paging && this.totalPages >= 1;
     },
 
     pagingDisplay() {
@@ -76,7 +78,9 @@ export default {
   },
 
   data() {
-    return { page: 1 };
+    // const perPage = this.getPerPage();
+
+    return { page: 1, perPage:10 };
   },
 
   watch: {
@@ -91,17 +95,23 @@ 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.querySelector('TABLE');
+    const table = this.$el && 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.querySelector('TABLE');
+    const table = this.$el && 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"
-          @click.prevent="select(tab.name, $event)"
-          @keyup.enter.space="select(tab.name, $event)"
+          role="tab"  
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -382,23 +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;
+    // border-bottom: 0;
     display: flex;
     flex-direction: row;
 
     + .tab-container {
       border: solid thin var(--border);
+      border-top: 0px;
     }
 
     .tab.active {
@@ -406,8 +398,12 @@ export default {
     }
   }
 
-  &:focus .tab.active a span {
-    text-decoration: underline;
+  &:focus {
+    outline: none;
+
+    & .tab.active a span {
+      text-decoration: none;
+    }
   }
 
   .tab {
@@ -424,7 +420,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: underline;
+          text-decoration: none;
         }
       }
     }
@@ -494,45 +490,70 @@ export default {
 
 .side-tabs {
   display: flex;
-  box-shadow: 0 0 20px var(--shadow);
+  flex-direction: column;
+  /* box-shadow: 0 0 20px var(--shadow);
   border-radius: calc(var(--border-radius) * 2);
-  background-color: var(--tabbed-sidebar-bg);
-
+  background-color: var(--tabbed-sidebar-bg); */
+margin: 0px -20px;
   .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;
-    flex: 1 0;
-    flex-direction: column;
+    border-bottom:1px solid #d7d7d7;
+    padding: 0 0 0 20px;
+    // overflow: auto;
+    // overflow-y: hidden;
+    /* flex: 1 0; */
+    /* flex-direction: column; */
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
-
     & .tab {
-      width: 100%;
-      border-left: solid 5px transparent;
+      /* 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;
 
       &.toggle A {
         color: var(--primary);
+        padding: 0px;
       }
 
       A {
-        color: var(--primary);
+        color: var(--input-label);
+        padding: 0px;
       }
 
       &.active {
         background-color: var(--body-bg);
-        border-left: solid 5px var(--primary);
+        border-top: solid 2px var(--primary);
+        position: relative;
+        &.active::before{
+          position: absolute;
+          right: 0;
+          left: 0;
+          top: 34px;
+          border-bottom: 1px solid #fff;
+          content: '';
 
+        }
         & A {
-          color: var(--input-label);
+          color: var(--primary);
         }
       }
 
@@ -553,6 +574,8 @@ export default {
       li {
         display: flex;
         flex: 1;
+        border-left: 1px solid var(--border);
+        border-right: 1px solid var(--border);
 
         .btn {
           flex: 1 1;
@@ -576,7 +599,7 @@ export default {
   &
 
   .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,7 +247,6 @@ export default {
       @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"
-      @validationChanged="$emit('validationChanged', $event)"
     />
     <FileDiff
       v-else

package/components/auth/Principal.vue

@@ -3,6 +3,10 @@ import { NORMAN } from '@shell/config/types';
 
 export default {
   props: {
+    userLogo: {
+      type:    Boolean,
+      default: false,
+    },
     value: {
       type:     String,
       required: true,
@@ -16,7 +20,15 @@ export default {
     showLabels: {
       type:    Boolean,
       default: false,
-    }
+    },
+    isShowPass: {
+      type:    Boolean,
+      default: false,
+    },
+    userLogoSize: {
+      type:    Number,
+      default: 20,
+    },
   },
 
   async fetch() {
@@ -86,9 +98,10 @@ export default {
     </template>
 
     <template v-else-if="principal">
-      <div class="avatar">
+      <div v-if="userLogo" :style="userLogoSize === 79 ? { width: '287px' } : {}" class="avatar">
         <img
-          :src="principal.avatarSrc"
+          :style="{ width: userLogoSize + 'px', height: userLogoSize + 'px', marginRight: '10px' }"
+          src="@shell/assets/images/user.png"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
         >
@@ -98,11 +111,19 @@ export default {
         class="name"
       >
         <table>
-          <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>
+          <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>
         </table>
       </div>
       <template v-else>
@@ -154,16 +175,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $size: 40px;
+  $size: 24px;
 
   .principal {
     display: grid;
     grid-template-areas:
       "avatar name"
       "avatar description";
-    grid-template-columns: $size auto;
-    grid-template-rows: auto math.div($size, 2);
-    column-gap: 10px;
+    grid-template-columns: min-content auto;
+    // grid-template-rows: auto math.div($size, 2);
 
     th {
       text-align: left;
@@ -172,23 +192,35 @@ export default {
     }
 
     &.showLabels {
-      grid-template-areas:
+      /* grid-template-areas:
         "avatar name";
       grid-template-columns: 60px auto;
       grid-template-rows: 60px;
-      column-gap: 0;
+      column-gap: 0; */
+      display: flex;
+      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;
+      /* grid-area: avatar;
+      text-align: center; */
+      // width: 287px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       DIV.empty {
         border: 1px solid var(--border);
@@ -207,13 +239,13 @@ export default {
 
     .name {
       grid-area: name;
-      line-height: math.div($size, 2);
+      line-height: 16px;
       overflow-wrap: anywhere;
     }
 
     .description {
       grid-area: description;
-      line-height: math.div($size, 2);
+      line-height: 16px;
     }
   }
 </style>

package/components/auth/RoleDetailEdit.vue

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