dashboard-shell-shell 3.0.5-test.2 → 3.0.5-test.21

package/components/SortableTable/index.vue

@@ -1841,7 +1841,7 @@ export default {
         class="paging"
       >
         <div style="height: 100%; align-content: center;">
-          共 {{ filteredRows.length }} 条
+          共 {{ filteredRows ? filteredRows.length : 0 }} 条
         </div>
 
         <button
@@ -2186,7 +2186,7 @@ export default {
     border-collapse: collapse;
     min-width: 400px;
     border-radius: 5px 5px 0 0;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border) !important;
     /* outline: 1px solid var(--border); */
     background: var(--sortable-table-bg);
     border-radius: 4px;
@@ -2201,6 +2201,9 @@ export default {
     td {
       padding: 8px 5px;
       border: 0;
+      white-space: normal;
+      word-break: break-all;
+      overflow-wrap: break-word;
 
       &:first-child {
         padding-left: 10px;
@@ -2217,7 +2220,7 @@ export default {
 
     tbody {
       tr {
-        border-bottom: 1px solid var(--sortable-table-top-divider);
+        border-bottom: 1px solid var(--sortable-table-top-divider) !important;
         background-color: var(--sortable-table-row-bg);
 
         &.main-row.has-sub-row {
@@ -2658,7 +2661,9 @@ export default {
 
   .pageSelect{
     &:deep() .vs__actions:after{
-      padding-top: 10px;
+      // padding-top: 10px;
+      display: flex;
+      align-items: center;
     }
   } 
   .sort-table-div{

package/components/Tabbed/index.vue

@@ -384,12 +384,13 @@ export default {
 
   &.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 {
@@ -504,6 +505,8 @@ margin: 0px -20px;
     display: flex;
     border-bottom:1px solid #d7d7d7;
     padding: 0 0 0 20px;
+    // overflow: auto;
+    // overflow-y: hidden;
     /* flex: 1 0; */
     /* flex-direction: column; */
 
@@ -571,6 +574,8 @@ margin: 0px -20px;
       li {
         display: flex;
         flex: 1;
+        border-left: 1px solid var(--border);
+        border-right: 1px solid var(--border);
 
         .btn {
           flex: 1 1;

package/components/auth/Principal.vue

@@ -16,7 +16,15 @@ export default {
     showLabels: {
       type:    Boolean,
       default: false,
-    }
+    },
+    isShowPass: {
+      type:    Boolean,
+      default: false,
+    },
+    userLogoSize: {
+      type:    Number,
+      default: 20,
+    },
   },
 
   async fetch() {
@@ -86,9 +94,10 @@ export default {
     </template>
 
     <template v-else-if="principal">
-      <div class="avatar">
+      <div :style="userLogoSize === 79 ? { width: '287px' } : {}" class="avatar">
         <img
-          :src="principal.avatarSrc"
+          :style="{ width: userLogoSize + 'px', height: userLogoSize + 'px' }"
+          src="@shell/assets/images/user.png"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
         >
@@ -98,11 +107,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>
@@ -172,23 +189,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);

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;
     }
 
@@ -705,12 +705,12 @@ export default {
             <!-- 列表头部 -->
             <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
@@ -723,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
@@ -740,7 +740,7 @@ export default {
               <div class="columns row mr-20">
 
                 <!-- 动作（verbs）选择 -->
-                <div :class="ruleClass">
+                <div class="arrayListCls" :class="ruleClass">
                   <!-- Select verbs -->
                   <Select
                     :value="props.row.value.verbs"
@@ -758,7 +758,7 @@ export default {
                 </div>
 
                 <!-- 资源（resources）选择 -->
-                <div :class="ruleClass">
+                <div class="arrayListCls" :class="ruleClass">
                   <Select
                     style="width: auto;"
                     :value="getRule('resources', props.row.value)"
@@ -776,7 +776,7 @@ export default {
                 </div>
 
                 <!-- API Groups 输入 -->
-                <div :class="ruleClass">
+                <div class="arrayListCls" :class="ruleClass">
                   <LabeledInput
                     :value="getRule('apiGroups', props.row.value)"
                     :disabled="isBuiltin"
@@ -788,6 +788,7 @@ export default {
 
                 <!-- 非命名空间 URL 输入（仅非命名空间模式显示） -->
                 <div
+                  class="arrayListCls"
                   v-if="!isNamespaced"
                   :class="ruleClass"
                 >
@@ -859,6 +860,9 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .arrayListCls {
+    min-width: 360px;
+  }
   .ruleCls {
     margin-right: 10px;
   }

package/components/breadcrumb/index.vue

@@ -0,0 +1,124 @@
+<script>
+import { get } from '@shell/utils/object';;
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import { useStore } from 'vuex';
+
+export default {
+
+  name: 'MastheadBreadcrumb',
+
+  components: {
+  },
+  props: {
+    resourceTypeLabel: {
+      type:    String,
+      default: ''
+    },
+
+    resource: {
+      type:    String,
+      default: null,
+    },
+
+    realMode: {
+      type:    String,
+      default: 'view',
+    }
+
+  },
+
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+
+    demoDisplay() {
+
+      const resources = this.$route.params?.resource || ''
+      console.log(resources, 'resources')
+      
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
+      
+      if (productId === undefined) {
+        return '';
+      }
+      const parts = productId.split('::');
+      const newString = 'root';
+
+      if (!parts?.includes(newString)) {
+        parts.unshift(newString); // 将字符串添加到数组第一位
+      }
+
+      const partsEn = parts.map((item) => {
+        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+      });
+
+      return partsEn;
+    },
+
+  },
+
+  methods: {
+    get,
+  }
+};
+</script>
+
+<template>
+  <div class="masthead">
+    <div class="title">
+      <!-- 标题区域 -->
+      <div
+        class="excram-list"
+      >
+        <span
+          v-for="(item,index) in demoDisplay"
+          :key="index"
+        >
+          <span>{{ item }}</span>
+          <span>/</span>
+        </span>
+        <span class="excram-last-name">
+          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + resourceTypeLabel }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+  .excram-list{
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .excram-last-name{
+    color: var(--link);
+  }
+
+  .detailIcon-span{
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    position: relative;
+    background: var(--primary);
+    margin-right: 10px;
+  }
+  .detailIcon{
+    position: absolute;
+    color: #fff;
+    font-size: 38px;
+    left: 4px;
+    top: -2px;
+  }
+
+</style>