dashboard-shell-shell 3.0.5-test.4 → 3.0.5-test.40

package/components/SortableTable/index.vue

@@ -1074,12 +1074,22 @@ export default {
       if ( col.labelKey ) {
         return this.t(col.labelKey, undefined, true);
       } else if ( col.label ) {
-        return col.label;
+        // 判断 label 是否为中文
+        if (this.isChinese(col.label)) {
+          return col.label;
+        } else {
+          return this.t(`tableHeaders.${col.label.replace(/\s+/g, '').toLowerCase()}`, undefined, true);
+        }
       }
 
       return ucFirst(col.name);
     },
 
+    // 判断字符串是否包含中文
+    isChinese(str) {
+      return /[\u4e00-\u9fa5]/.test(str);
+    },
+
     valueFor(row, col, isLabel) {
       if (typeof col.value === 'function') {
         return col.value(row);
@@ -1259,15 +1269,15 @@ export default {
   >
      <!-- 主标题和过滤器区域 -->
     <div
-      :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel}"
-      class="sortable-table-header  mb-20"
+      :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel }"
+      class="sortable-table-header"
     >
       <slot name="title" />
 
       <!-- 顶部功能行区域 -->
       <div
         v-if="showHeaderRow"
-        class="fixed-header-table-actions"
+        class="fixed-header-table-actions mb-20"
         :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering, }"
         style="display: flex;"
       >
@@ -1280,6 +1290,8 @@ export default {
           style="max-height: 32px;"
         >
 
+          <slot name="search-main-button" />
+
           <!-- 已应用的高级筛选 -->
           <ul
             v-if="hasAdvancedFiltering"
@@ -1367,9 +1379,6 @@ export default {
           <slot name="header-button" />
 
           <div style="display: flex;">
-
-            <slot name="search-main-button" />
-
             <!-- 搜索输入框 -->
             <input
               v-if="search"
@@ -1398,14 +1407,18 @@ export default {
          
         </div>
 
-        <!-- 中间区域插槽 -->
-        <div
-          v-if="!hasAdvancedFiltering && $slots['header-middle']"
-          class="middle"
-          style="margin-left: 10px;"
-        >
-          <slot name="header-middle" />
-        </div>
+        <div style="display: flex;">
+          <slot name="header-button-left" />
+          
+          <!-- 中间区域插槽 -->
+          <div
+             v-if="!hasAdvancedFiltering && $slots['header-middle']"
+             class="middle"
+             style="margin-left: 10px;"
+           >
+             <slot name="header-middle" />
+           </div>
+         </div>
       </div>
     </div>
 
@@ -1841,7 +1854,7 @@ export default {
         class="paging"
       >
         <div style="height: 100%; align-content: center;">
-          共 {{ filteredRows.length }} 条
+          共 {{ filteredRows ? filteredRows.length : 0 }} 条
         </div>
 
         <button
@@ -2186,7 +2199,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 +2214,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,8 +2233,9 @@ 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);
+        height: 60px;
 
         &.main-row.has-sub-row {
           border-bottom: 0;
@@ -2282,6 +2299,7 @@ export default {
 
         &:first-child {
           border-bottom: 2px solid var(--sortable-table-row-bg);
+          height: 40px;
         }
 
         &:not(:first-child) {
@@ -2658,13 +2676,15 @@ export default {
 
   .pageSelect{
     &:deep() .vs__actions:after{
-      padding-top: 10px;
+      // padding-top: 10px;
+      display: flex;
+      align-items: center;
     }
   } 
   .sort-table-div{
       width:100%;
       white-space:nowrap;
-      overflow-x: auto;
+      // overflow-x: auto;
   }
 
   /* 滚动阴影左边 */

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

@@ -20,7 +20,11 @@ export default {
     isShowPass: {
       type:    Boolean,
       default: false,
-    }
+    },
+    userLogoSize: {
+      type:    Number,
+      default: 20,
+    },
   },
 
   async fetch() {
@@ -90,8 +94,9 @@ export default {
     </template>
 
     <template v-else-if="principal">
-      <div class="avatar">
+      <div :style="userLogoSize === 79 ? { width: '287px' } : {}" class="avatar">
         <img
+          :style="{ width: userLogoSize + 'px', height: userLogoSize + 'px' }"
           src="@shell/assets/images/user.png"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
@@ -166,7 +171,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $size: 79px;
+  $size: 20px;
 
   .principal {
     display: grid;
@@ -174,7 +179,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 {
@@ -209,7 +214,7 @@ export default {
     .avatar {
       /* grid-area: avatar;
       text-align: center; */
-      width: 287px;
+      // width: 287px;
       display: flex;
       justify-content: center;
       align-items: center;

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,119 @@
+<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 || ''
+
+      let productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
+      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>