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

package/components/ExplorerMembers.vue

@@ -115,6 +115,10 @@ export default {
           labelKey: 'tableHeaders.role',
           value:    'roleTemplate.nameDisplay'
         },
+        {
+          name:     '操作',
+          labelKey: 'tableHeaders.action',
+        },
       ],
       loadingProjectBindings: true,
       loadingClusterBindings: true
@@ -293,6 +297,7 @@ export default {
       :create-button-label="t('members.createActionLabel')"
       :is-creatable="false"
       :type-display="t('members.clusterAndProject')"
+      
     />
     <Banner
       v-if="isLocal"
@@ -304,7 +309,7 @@ export default {
         name="cluster-membership"
         :label="t('members.clusterMembership')"
       >
-        <div
+        <!-- <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
@@ -314,7 +319,7 @@ export default {
           >
             {{ t('members.createActionLabel') }}
           </router-link>
-        </div>
+        </div> -->
         <ResourceTable
           :schema="schema"
           :headers="headers"
@@ -325,7 +330,21 @@ export default {
           :loading="$fetchState.pending || !currentCluster || loadingClusterBindings"
           sub-search="subSearch"
           :sub-fields="['nameDisplay']"
-        />
+        >
+          <template #header-right>
+            <div
+              v-if="canEditClusterMembers"
+              class="row mb-10 mr-10 cluster-add"
+            >
+              <router-link
+                :to="createLocation"
+                class="btn role-primary pull-right"
+              >
+                {{ t('members.createActionLabel') }}
+              </router-link>
+            </div>
+          </template>
+        </ResourceTable>
       </Tab>
       <Tab
         v-if="canManageProjectMembers && !isHarvester"
@@ -346,12 +365,13 @@ export default {
                 v-trim-whitespace
                 class="group-tab"
               >
+
                 <div
                   v-clean-html="getProjectLabel(group)"
                   class="project-name"
                 />
               </div>
-              <div class="right">
+              <div class="right" style="margin-right: 80px;">
                 <button
                   v-if="canEditProjectMembers"
                   type="button"
@@ -445,8 +465,12 @@ export default {
   & :deep() .group-bar{
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 }
+.role-secondary.btn-sm:focus, .role-secondary.btn-sm.focused{
+  border: 1px solid #d7d7d7;
+}
 .cluster-add {
   justify-content: flex-end;
 }

package/components/GlobalRoleBindings.vue

@@ -108,12 +108,7 @@ export default {
     } catch (e) { }
   },
   data() {
-
-    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
-
     return {
-      topLevelPermissions,
-
       // This not only identifies global roles but the order here is the order we want to display them in the UI
       globalPermissions: [
         'admin',
@@ -333,119 +328,60 @@ export default {
 
   <div v-else>
     <form v-if="selectedRoles">
-      <template v-if="topLevelPermissions && topLevelPermissions !== 'superadmin'">
-        <div
-          v-for="(sortedRole, roleType) in sortedRoles"
-          :key="roleType"
-          class="role-group mb-10"
-        >
-          <Card
-            v-if="Object.keys(sortedRole).length"
-            :show-highlight-border="false"
-            :show-actions="false"
-          >
-            <template v-slot:title>
-              <div class="type-title">
-                <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
-                <div class="type-description">
-                  {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
-                </div>
-              </div>
-            </template>
-            <template v-slot:body>
-              <div
-                class="checkbox-section"
-                :class="'checkbox-section--' + roleType"
-              >
-                <div
-                  v-for="(role, i) in sortedRoles[roleType]"
-                  :key="i"
-                  class="checkbox mb-10 mr-10"
-                >
-                  <Checkbox
-                    v-model:value="selectedRoles"
-                    :value-when-true="role.id"
-                    :disabled="!!assignOnlyRoles[role.id]"
-                    :label="role.nameDisplay"
-                    :description="role.descriptionDisplay"
-                    :mode="mode"
-                    :data-testId="'grb-checkbox-' + role.id"
-                    @update:value="checkboxChanged"
-                  >
-                    <template #label>
-                      <div class="checkbox-label-slot">
-                        <span class="checkbox-label">{{ role.nameDisplay }}</span>
-                        <i
-                          v-if="!!assignOnlyRoles[role.id]"
-                          v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
-                          class="checkbox-info icon icon-info icon-lg"
-                        />
-                      </div>
-                    </template>
-                  </Checkbox>
-                </div>
-              </div>
-            </template>
-          </Card>
-        </div>
-      </template>
-
-      <template v-else>
-        <div
-          v-for="(sortedRole, roleType) in { global: sortedRoles['global'] }"
-          :key="roleType"
-          class="role-group mb-10"
+      <div
+        v-for="(sortedRole, roleType) in sortedRoles"
+        :key="roleType"
+        class="role-group mb-10"
+      >
+        <Card
+          v-if="Object.keys(sortedRole).length"
+          :show-highlight-border="false"
+          :show-actions="false"
         >
-          <Card
-            v-if="Object.keys(sortedRole).length"
-            :show-highlight-border="false"
-            :show-actions="false"
-          >
-            <template v-slot:title>
-              <div class="type-title">
-                <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
-                <div class="type-description">
-                  {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
-                </div>
+          <template v-slot:title>
+            <div class="type-title">
+              <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
+              <div class="type-description">
+                {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
               </div>
-            </template>
-            <template v-slot:body>
+            </div>
+          </template>
+          <template v-slot:body>
+            <div
+              class="checkbox-section"
+              :class="'checkbox-section--' + roleType"
+            >
               <div
-                class="checkbox-section"
-                :class="'checkbox-section--' + roleType"
+                v-for="(role, i) in sortedRoles[roleType]"
+                :key="i"
+                class="checkbox mb-10 mr-10"
               >
-                <div
-                  v-for="(role, i) in sortedRoles[roleType]"
-                  :key="i"
-                  class="checkbox mb-10 mr-10"
+                <Checkbox
+                  v-model:value="selectedRoles"
+                  :value-when-true="role.id"
+                  :disabled="!!assignOnlyRoles[role.id]"
+                  :label="role.nameDisplay"
+                  :description="role.descriptionDisplay"
+                  :mode="mode"
+                  :data-testId="'grb-checkbox-' + role.id"
+                  @update:value="checkboxChanged"
                 >
-                  <Checkbox
-                    v-model:value="selectedRoles"
-                    :value-when-true="role.id"
-                    :disabled="!!assignOnlyRoles[role.id]"
-                    :label="role.nameDisplay"
-                    :description="role.descriptionDisplay"
-                    :mode="mode"
-                    :data-testId="'grb-checkbox-' + role.id"
-                    @update:value="checkboxChanged"
-                  >
-                    <template #label>
-                      <div class="checkbox-label-slot">
-                        <span class="checkbox-label">{{ role.nameDisplay }}</span>
-                        <i
-                          v-if="!!assignOnlyRoles[role.id]"
-                          v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
-                          class="checkbox-info icon icon-info icon-lg"
-                        />
-                      </div>
-                    </template>
-                  </Checkbox>
-                </div>
+                  <template #label>
+                    <div class="checkbox-label-slot">
+                      <span class="checkbox-label">{{ role.nameDisplay }}</span>
+                      <i
+                        v-if="!!assignOnlyRoles[role.id]"
+                        v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
+                        class="checkbox-info icon icon-info icon-lg"
+                      />
+                    </div>
+                  </template>
+                </Checkbox>
               </div>
-            </template>
-          </Card>
-        </div>
-      </template>
+            </div>
+          </template>
+        </Card>
+      </div>
     </form>
   </div>
 </template>

package/components/PodSecurityAdmission.vue

@@ -218,7 +218,7 @@ export default defineComponent({
       :key="i"
       class="row row--y-center mb-20"
     >
-      <span class="col">
+      <span class="col span-1">
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -89,12 +89,10 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
-      margin-bottom: 8px;
-
+      min-height: 40px;
       .value {
         display: flex;
         flex-direction: row;
-        align-items: center;
 
         &, & * {
           max-width: 100%;

package/components/Resource/Detail/Metadata/KeyValue.vue

@@ -53,13 +53,13 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
 
 <template>
   <div class="key-value">
-    <div class="heading">
+    <div class="heading h40">
       <span class="title text-deemphasized">{{ propertyName }}</span>
       <span class="count">{{ rows.length }}</span>
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty mmt-2 text-deemphasized"
+      class="empty text-deemphasized"
     >
       <div class="no-rows">
         {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
@@ -78,7 +78,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     <div
       v-for="row in visibleRows"
       :key="displayValue(row)"
-      class="row"
+      class="row h40"
     >
       <Rectangle
         v-clean-tooltip="displayValue(row)"
@@ -104,18 +104,22 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    
+    .h40 {
+        min-height: 40px;
+    }
 
     .count {
         margin-left: 24px;
     }
 
     .heading {
-        margin-bottom: 8px;
     }
 
     .row {
         display: block;
         width: 100%;
+        line-height: 40px;
 
         &:not(:nth-child(2)) {
             margin-top: 4px;

package/components/Resource/Detail/Metadata/index.vue

@@ -31,10 +31,12 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
 
 <template>
   <SpacedRow
-    class="metadata ppb-3"
+    v-if="false"
+    class="metadata ppb-5"
     v-bind="$attrs"
   >
     <div
+      v-if="identifyingInformation?.length > 0"
       class="identifying-info"
     >
       <IdentifyingInformation :rows="identifyingInformation" />

package/components/Resource/Detail/TitleBar/Title.vue

@@ -1,14 +1,15 @@
 <template>
-  <h1 class="title">
+  <div class="title">
     <slot name="default" />
-  </h1>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-  h1.title {
+  .title {
     display: inline-block;
     align-items: center;
     display: flex;
     flex-direction: row;
+    font-size: 14px;
   }
 </style>

package/components/Resource/Detail/TitleBar/Top.vue

@@ -10,5 +10,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    height: 50px;
+    margin-bottom: 20px;
   }
 </style>

package/components/Resource/Detail/TitleBar/composables.ts

@@ -14,7 +14,22 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
     const resourceSubtypeValue = toValue(resourceSubtype);
     const currentStore = store.getters['currentStore'](resourceValue.type);
     const schema = store.getters[`${ currentStore }/schemaFor`](resourceValue.type);
-    const resourceTypeLabel = resourceValue.parentNameOverride || store.getters['type-map/labelFor'](schema);
+    let resourceTypeLabel = resourceValue.parentNameOverride || store.getters['type-map/labelFor'](schema);
+
+    // 转换为中文
+    const displayName_zh_hans: Record<string, string> = {
+      'GlobalRole': '全局角色',
+      'RoleTemplate': '集群角色',
+    }
+
+    if (displayName_zh_hans[resourceTypeLabel]) {
+      resourceTypeLabel = displayName_zh_hans[resourceTypeLabel]
+    }
+    
+    if (resourceTypeLabel == '集群角色' && (route.query?.roleContext == 'NAMESPACE' || resource?.parentLocationOverride?.hash == '#NAMESPACE')) {
+      resourceTypeLabel = '项目或资源组角色'
+    }
+    
     const resourceName = resourceSubtypeValue ? `${ resourceSubtypeValue } - ${ resourceValue.nameDisplay }` : resourceValue.nameDisplay;
     const resourceTo = resourceValue.listLocation || {
       name:   'c-cluster-product-resource',

package/components/Resource/Detail/TitleBar/index.vue

@@ -13,6 +13,8 @@ import { _CONFIG, _GRAPH, AS } from '@shell/config/query-params';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
+import breadcrumb from '@shell/components/breadcrumb/index.vue'
+import { useDefaultConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
@@ -36,6 +38,7 @@ export interface TitleBarProps {
   showViewOptions?: boolean;
 
   onShowConfiguration?: (returnFocusSelector: string) => void;
+  parentRouteOverride?: string;
 }
 
 const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
@@ -43,9 +46,10 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
+  parentRouteOverride, resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
+
 const store = useStore();
 const i18n = useI18n(store);
 const router = useRouter();
@@ -54,6 +58,10 @@ const emit = defineEmits(['show-configuration']);
 const showConfigurationDataTestId = 'show-configuration-cta';
 const showConfigurationReturnFocusSelector = computed(() => `[data-testid="${ showConfigurationDataTestId }"]`);
 
+
+const configTabProps = useDefaultConfigTabProps(resource);
+
+
 const currentView = ref(router?.currentRoute?.value?.query?.as || _CONFIG);
 const viewOptions = computed(() => {
   if (!showViewOptions) {
@@ -72,6 +80,35 @@ const viewOptions = computed(() => {
   ];
 });
 
+const Svg = require('~shell/assets/images/API.svg')
+
+const parent = computed(() => {
+
+  const product = store.getters['currentProduct'].name;
+
+  const defaultLocation = {
+    name: 'c-cluster-product-resource',
+    params: {
+      resource,
+      product,
+    }
+  };
+
+  const location = resource?.parentLocationOverride || defaultLocation;
+
+  if (parentRouteOverride) {
+    location.name = parentRouteOverride;
+  }
+
+  return { location };
+});
+
+const menuIcon = computed(() => {
+  const product = store.getters['productId'];
+  const resources = parent.value.location?.params?.resource || '';
+  return store.getters['type-map/groupsForVirTypes'](product, resources) || 'default menuIcon';
+});
+
 watch(
   () => currentView.value,
   () => {
@@ -82,33 +119,58 @@ watch(
 
 <template>
   <div class="title-bar">
+    <breadcrumb :resourceTypeLabel="resourceTypeLabel" :resource="resource"/>
     <Top>
       <Title class="title">
+        <span class="detailIcon-span">
+          <img
+            v-if="parentRouteOverride === 'account' && resource=== 'token'"
+            :src="Svg"
+            style="margin-top: 4px; margin-left: 5px;"
+          >
+          <i
+            v-else
+            :class="'icon-'+ menuIcon + ' detailIcon'"
+          />
+        </span>
+        <div class="resourceTypeLabelCls">
+          {{ resourceTypeLabel }}名称:
+        </div>
+        <span class="resource-name masthead-resource-title">
+          {{ resourceName }}
+        </span>
+        <BadgeState
+          v-if="badge"
+          class="badge-state"
+          :color="badge.color"
+          :label="badge.label"
+        />
+        <span
+          class="valid"
+        >|</span>
         <TabTitle :show-child="false">
-          {{ resourceTypeLabel }}
+          返回
         </TabTitle>
         <router-link
           v-if="resourceTo"
           :to="resourceTo"
           class="resource-link"
         >
-          {{ resourceTypeLabel }}:
+          返回
         </router-link>
         <span
           v-else
           class="resource-text"
         >
-          {{ resourceTypeLabel }}:
-        </span>
-        <span class="resource-name masthead-resource-title">
-          {{ resourceName }}
+          返回
         </span>
-        <BadgeState
-          v-if="badge"
-          class="badge-state"
-          :color="badge.color"
-          :label="badge.label"
-        />
+        <div
+          v-if="description"
+          style="font-size: 12px;margin-left: 16px;"
+          class="bottom description text-deemphasized"
+        >
+          ( {{ description }} )
+        </div>
       </Title>
       <div class="actions">
         <!-- Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet. -->
@@ -118,7 +180,7 @@ watch(
           :options="viewOptions"
         />
         <RcButton
-          v-if="onShowConfiguration"
+          v-if="onShowConfiguration && configTabProps"
           :data-testid="showConfigurationDataTestId"
           class="show-configuration"
           :primary="true"
@@ -134,6 +196,7 @@ watch(
         </RcButton>
         <ActionMenu
           v-if="actionMenuResource"
+          :showIcon="true"
           button-role="multiAction"
           :resource="actionMenuResource"
           data-testid="masthead-action-menu"
@@ -141,12 +204,6 @@ watch(
         />
       </div>
     </Top>
-    <div
-      v-if="description"
-      class="bottom description text-deemphasized"
-    >
-      {{ description }}
-    </div>
     <ExtensionPanel
       :resource="resource"
       :type="ExtensionPoint.PANEL"
@@ -156,12 +213,39 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+
+.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;
+}
+
+.detailIcon-span-title{
+  font-weight: bold;
+}
+.resourceTypeLabelCls {
+  font-weight: 700;
+}
+.valid{
+  color: #d7d7d7;
+  margin: 0px 10px;
+}
 .title-bar {
   min-width: 740px;
 
   .badge-state {
     font-size: 16px;
-    margin-left: 12px;
+    margin-left: 5px;
     position: relative;
   }
 
@@ -170,15 +254,19 @@ watch(
   }
 
   &:deep() button[data-testid="masthead-action-menu"] {
-    border-radius: 4px;
-    width: 35px;
-    height: 40px;
-    margin-left: 16px;
+    border-radius: 2px;
+    width: 32px;
+    height: 32px;
+    margin-left: 10px;
 
     display: inline-flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
+
+    a{
+      color: #fff;
+    }
   }
 
   .description {

package/components/ResourceDetail/Masthead/index.vue

@@ -60,6 +60,6 @@ const showLatestMasthead = computed(() => isNewDetailPageEnabled.value && isView
 <style lang="scss" scoped>
 .new.state-banner {
   margin: 0;
-  margin-top: 16px;
+  margin-bottom: 20px;
 }
 </style>

package/components/ResourceDetail/Masthead/latest.vue

@@ -39,6 +39,6 @@ const bannerProps = useResourceDetailBannerProps(props.value);
 <style lang="scss" scoped>
 .new.state-banner {
   margin: 0;
-  margin-top: 16px;
+  margin-bottom: 20px;
 }
 </style>