dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/ResourceDetail/Masthead.vue

@@ -47,6 +47,11 @@ export default {
       }
     },
 
+    isManuallyHide: {
+      type:    Boolean,
+      default: true
+    },
+
     mode: {
       type:    String,
       default: 'create'
@@ -250,7 +255,7 @@ export default {
     },
 
     parent() {
-      const displayName = this.value?.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
+      let displayName = this.value?.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
       const product = this.$store.getters['currentProduct'].name;
 
       const defaultLocation = {
@@ -268,6 +273,20 @@ export default {
       }
 
       const typeOptions = this.$store.getters[`type-map/optionsFor`]( this.resource );
+
+      // 转换为中文
+      const displayName_zh_hans = {
+        'GlobalRole': '全局角色',
+        'RoleTemplate': '集群角色',
+      }
+      if (displayName_zh_hans[displayName]) {
+        displayName = displayName_zh_hans[displayName]
+      }
+      
+      if (displayName == '集群角色' && (this.$route.query?.roleContext == 'NAMESPACE' || location.hash == '#NAMESPACE')) {
+        displayName = '项目或资源组角色'
+      }
+
       const out = {
         displayName, location, ...typeOptions
       };
@@ -318,12 +337,12 @@ export default {
         });
       }
 
-      if ( this.canViewYaml ) {
-        out.push({
-          labelKey: 'resourceDetail.masthead.yaml',
-          value:    _YAML,
-        });
-      }
+      // if ( this.canViewYaml ) {
+      //   out.push({
+      //     labelKey: 'resourceDetail.masthead.yaml',
+      //     value:    _YAML,
+      //   });
+      // }
 
       if ( out.length < 2 ) {
         return null;
@@ -422,7 +441,7 @@ export default {
     },
     menuIcon() {
       const product = this.$store.getters['productId'];
-      
+
       const resources = this.location?.params?.resource || ''
 
       return this.$store.getters['type-map/groupsForVirTypes'](product, resources);
@@ -473,263 +492,192 @@ export default {
 </script>
 
 <template>
+
+  <!-- 顶部区域的容器 -->
   <div class="masthead">
     <div class="title">
-      <!-- 创建api密钥不需要面包屑 -->
-      <div
+
+      <!-- 面包屑导航（创建 API 密钥时不显示） -->
+      <!-- <div
         v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
         class="excram-list"
       >
+
+        遍历 demoDisplay 生成面包屑路径
         <span
           v-for="(item,index) in demoDisplay"
           :key="index"
         >
-          <span>{{ item }}</span>
-          <span>/</span>
+          <span v-if="item">{{ item }}</span>
+          <span v-if="item">/</span>
         </span>
+
+        最后一个面包屑显示当前操作（查看/编辑/创建）+ 父资源名称
         <span class="excram-last-name">
           {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
         </span>
-      </div>
-    <header>
-      <div class="title">
-        <div class="primaryheader">
-          <span class="primary-title">
-              <!-- <nuxt-link
-                v-if="location"
-                :to="location"
-              >
-                {{ parent.displayName }}:
-              </nuxt-link> -->
-              <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>
-              <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
-              <span v-if="realMode !== 'create'">
-                <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
-                <t
-                  v-else
-                  :k="'resourceDetail.header.' + realMode"
-                  :subtype="resourceSubtype"
-                  :name="displayName"
-                  :escapehtml="false"
+      </div> -->
+
+      <header>
+        <div class="title">
+          <div class="primaryheader">
+            <span class="primary-title">
+                
+                <!-- 图标区 -->
+                <span v-if="menuIcon && !(parentRouteOverride === 'account' && resource=== 'token')" class="detailIcon-span">
+                  <!-- 如果是账户 API token，则显示图片，否则显示 icon -->
+                  <img
+                    v-if="parentRouteOverride === 'account' && resource=== 'token'"
+                    :src="Svg"
+                    style="margin-top: 4px; margin-left: 5px;"
+                  >
+                  <i
+                    v-else
+                    :class="'icon-'+ menuIcon + ' detailIcon'"
+                  />
+                </span>
+
+                <!-- 资源标题（创建时只显示“创建+名称”，否则显示“名称:”） -->
+                <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
+                
+                <!-- 如果不是创建模式，显示操作描述 -->
+                <span v-if="realMode !== 'create'">
+
+                  <!-- 如果有覆盖方法，优先显示覆盖内容 -->
+                  <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+                  
+                  <!-- 否则用 t 组件国际化显示 -->
+                  <t
+                    v-else
+                    :k="'resourceDetail.header.' + realMode"
+                    :subtype="resourceSubtype"
+                    :name="displayName"
+                    :escapehtml="false"
+                  />
+                </span>
+
+                <!-- 状态点（DotState 组件） -->
+                <DotState
+                  v-if="!isCreate && parent.showState"
+                  class="masthead-state"
+                  :value="value"
                 />
+
+                <!-- Istio 注入状态 -->
+                <span
+                  v-if="!isCreate && value.injectionEnabled"
+                  class="masthead-istio"
+                >
+                  <i
+                    v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                    class="icon icon-sm icon-istio"
+                  />
+                </span>
               </span>
-              <DotState
-                v-if="!isCreate && parent.showState"
-                class="masthead-state"
-                :value="value"
-              />
+
+              <!-- 如果有返回路径，显示分隔符和“返回”链接 -->
               <span
-                v-if="!isCreate && value.injectionEnabled"
-                class="masthead-istio"
+                v-if="location"
+                class="valid"
+              >|</span>
+              <router-link
+                v-if="location"
+                :to="location"
               >
-                <i
-                  v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
-                  class="icon icon-sm icon-istio"
-                />
-              </span>
-            </span>
-            <span
-              v-if="location"
-              class="valid"
-            >|</span>
-            <router-link
-              v-if="location"
-              :to="location"
-            >
-              返回
-            </router-link>
-          <!-- <h1>
-            <TabTitle
-              v-if="isCreate"
-              :showChild="false"
-            >
-              {{ parent.displayName }}
-            </TabTitle>
-            <TabTitle
-              v-else
-              :showChild="false"
-            >
-              {{ displayName }}
-            </TabTitle>
-            <router-link
-              v-if="location"
-              :to="location"
-              role="link"
-              class="masthead-resource-list-link"
-              :aria-label="parent.displayName"
-            >
-              {{ parent.displayName }}:
-            </router-link>
-            <span v-else>{{ parent.displayName }}:</span>
-            <span v-if="value?.detailPageHeaderActionOverride && value?.detailPageHeaderActionOverride(realMode)">{{ value?.detailPageHeaderActionOverride(realMode) }}</span>
-            <t
-              v-else
-              class="masthead-resource-title"
-              :k="'resourceDetail.header.' + realMode"
-              :subtype="resourceSubtype"
-              :name="displayName"
-              :escapehtml="false"
-            />
-            <BadgeState
-              v-if="!isCreate && parent.showState"
-              class="masthead-state"
-              :value="value"
-            />
-            <span
-              v-if="!isCreate && value.injectionEnabled"
-              class="masthead-istio"
-            >
-              <i
-                v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
-                class="icon icon-sm icon-istio"
-              />
-            </span>
-            <a
-              v-if="dev && !!resourceExternalLink"
-              v-clean-tooltip="t(resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
-              class="resource-external"
-              rel="nofollow noopener noreferrer"
-              target="_blank"
-              :href="resourceExternalLink.url"
-            >
-              <i class="icon icon-external-link" />
-            </a>
-          </h1> -->
+                返回
+              </router-link>
+          </div>
         </div>
-        <!-- <div
-          v-if="!isCreate"
-          class="subheader"
-        >
-          <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <router-link :to="project.detailLocation">{{ project.nameDisplay }}</router-link></span>
-          <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <router-link :to="workspaceLocation">{{ namespace }}</router-link></span>
-          <span v-else-if="namespace && !hasMultipleNamespaces">
-            {{ t("resourceDetail.masthead.namespace") }}:
-            <router-link
-              v-if="!hideNamespaceLocation"
-              :to="namespaceLocation"
-              data-testid="masthead-subheader-namespace"
-            >
-              {{ namespace }}
-            </router-link>
-            <span v-else>
-              {{ namespace }}
-            </span>
-          </span>
-          <span v-if="parent.showAge">
-            {{ t("resourceDetail.masthead.age") }}:
-            <LiveDate
-              class="live-date"
-              :value="value.creationTimestamp"
-            />
-          </span>
-          <span
-            v-if="value.showCreatedBy"
-            data-testid="masthead-subheader-createdBy"
-          >
-            {{ t("resourceDetail.masthead.createdBy") }}:
-            <router-link
-              v-if="value.createdBy.location"
-              :to="value.createdBy.location"
-              data-testid="masthead-subheader-createdBy-link"
-            >
-              {{ value.createdBy.displayName }}
-            </router-link>
-            <span
-              v-else
-              data-testid="masthead-subheader-createdBy_plain-text"
-            >
-              {{ value.createdBy.displayName }}
-            </span>
-          </span>
-          <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
-        </div> -->
-      </div>
-      <slot name="right">
-        <div class="actions-container align-start">
-          <div class="actions">
-            <button
-              v-if="detailsAction && currentView === DETAIL_VIEW && isView"
-              type="button"
-              class="btn role-primary actions mr-10"
-              :disabled="!detailsAction.enabled"
-              @click="invokeDetailsAction"
-            >
-              {{ detailsAction.label }}
-            </button>
-            <ButtonGroup
-              v-if="showSensitiveToggle"
-              :value="!!hideSensitiveData"
-              icon-size="lg"
-              :options="sensitiveOptions"
-              class="mr-10"
-              @update:value="toggleSensitiveData"
-            />
-
-            <ButtonGroup
-              v-if="viewOptions && isView"
-              v-model:value="currentView"
-              :options="viewOptions"
-              class="mr-10"
-            />
-
-            <template v-if="featureDropdownMenu">
-              <ActionMenu
-                v-if="isView"
-                button-role="multiAction"
-                button-size="compact"
-                :resource="value"
-                data-testid="masthead-action-menu"
-              />
-            </template>
-            <template v-else>
+
+        <!-- 右侧操作按钮区域（支持通过 slot 覆盖） -->
+        <slot name="right">
+          <div class="actions-container align-start" style="padding-right: 15px;">
+            <div class="actions">
+
+              <!-- 详情模式下的主操作按钮 -->
               <button
-                v-if="isView"
-                ref="actions"
-                data-testid="masthead-action-menu"
-                aria-haspopup="true"
+                v-if="detailsAction && currentView === DETAIL_VIEW && isView && isManuallyHide"
                 type="button"
-                class="btn role-multi-action actions"
-                @click="showActions"
+                class="btn role-primary actions mr-10"
+                :disabled="!detailsAction.enabled"
+                @click="invokeDetailsAction"
               >
-                <i class="icon icon-actions" />
+                {{ detailsAction.label }}
               </button>
-            </template>
+
+              <!-- 敏感信息显示/隐藏切换 -->
+              <ButtonGroup
+                v-if="showSensitiveToggle"
+                :value="!!hideSensitiveData"
+                icon-size="lg"
+                :options="sensitiveOptions"
+                class="mr-10"
+                @update:value="toggleSensitiveData"
+              />
+
+              <!-- 视图切换按钮 -->
+              <ButtonGroup
+                v-if="viewOptions && isView"
+                v-model:value="currentView"
+                :options="viewOptions"
+                class="mr-10"
+              />
+
+              <!-- 功能菜单：优先使用 ActionMenu 组件 -->
+              <template v-if="featureDropdownMenu">
+                <ActionMenu
+                  v-if="isView"
+                  button-role="multiAction"
+                  button-size="compact"
+                  :resource="value"
+                  data-testid="masthead-action-menu"
+                />
+              </template>
+
+              <!-- 如果没有 featureDropdownMenu，则使用普通的多操作按钮 -->
+              <template v-else>
+                <button
+                  v-if="isView"
+                  ref="actions"
+                  data-testid="masthead-action-menu"
+                  aria-haspopup="true"
+                  type="button"
+                  class="btn role-multi-action actions"
+                  @click="showActions"
+                >
+                  <i class="icon icon-actions" />
+                </button>
+              </template>
+            </div>
           </div>
-        </div>
-      </slot>
-    </header>
-
-    <!-- Extension area -->
-    <ExtensionPanel
-      :resource="value"
-      :type="extensionType"
-      :location="extensionLocation"
-    />
-
-    <Banner
-      v-if="banner && isView && !parent.hideBanner"
-      class="state-banner mb-10"
-      :color="banner.color"
-      :label="banner.message"
-    />
-    <Banner
-      v-if="managedWarning.show"
-      color="warning"
-      class="mb-20"
-      :label="t('resourceDetail.masthead.managedWarning', managedWarning)"
-    />
-
-    <slot />
+        </slot>
+      </header>
+
+      <!-- 扩展区域 -->
+      <ExtensionPanel
+        :resource="value"
+        :type="extensionType"
+        :location="extensionLocation"
+      />
+
+      <!-- 顶部状态 Banner -->
+      <Banner
+        v-if="banner && isView && !parent.hideBanner"
+        class="state-banner mb-10"
+        :color="banner.color"
+        :label="banner.message == 'Waiting for API to be available' ? '等待 API 可用' : banner.message"
+      />
+
+      <!-- 管理警告 Banner -->
+      <Banner
+        v-if="managedWarning.show"
+        color="warning"
+        class="mb-20"
+        :label="t('resourceDetail.masthead.managedWarning', managedWarning)"
+      />
+
+      <!-- 内容插槽 -->
+      <slot />
     </div>
   </div>
 </template>

package/components/ResourceDetail/index.vue

@@ -457,8 +457,13 @@ export default {
 </script>
 
 <template>
+
+  <!-- 如果数据还在加载中，或者资源未找到，则显示 Loading 组件 -->
   <Loading v-if="$fetchState.pending || notFound" />
-  <div v-else>
+
+  <!-- 数据加载完成且资源存在时 -->
+  <div style="padding: 20px 0 20px 20px;height: 100%;" v-else>
+    <!-- 顶部 Masthead 区域 -->
     <Masthead
       v-if="showMasthead"
       :resource="resourceType"
@@ -469,20 +474,25 @@ export default {
       :has-graph="hasGraph"
       :has-detail="hasCustomDetail"
       :has-edit="hasCustomEdit"
+      :can-view-yaml="canViewYaml"
       :resource-subtype="resourceSubtype"
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
+
+      :isManuallyHide="false"
     >
-      <!-- <DetailTop
-        v-if="isView && isDetail"
-        :value="liveModel"
-      /> -->
+
     </Masthead>
+
+
+    <!-- 错误信息显示区域 -->
     <div
       v-if="hasErrors"
       id="cru-errors"
       class="cru__errors"
     >
+
+      <!-- 循环渲染错误 Banner -->
       <Banner
         v-for="(err, i) in errors"
         :key="i"
@@ -495,12 +505,14 @@ export default {
       />
     </div>
 
+    <!-- 力导向图模式 -->
     <ForceDirectedTreeChart
       v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
 
+    <!-- YAML 查看/编辑模式 -->
     <ResourceYaml
       v-else-if="isYaml"
       ref="resourceyaml"
@@ -514,6 +526,7 @@ export default {
       @error="e=>errors.push(e)"
     />
 
+    <!-- 动态组件渲染，根据 showComponent 动态选择组件 -->
     <component
       :is="showComponent"
       v-else
@@ -532,6 +545,8 @@ export default {
       @set-subtype="setSubtype"
     />
 
+
+    <!-- 快捷键按钮（隐藏） -->
     <button
       v-if="isView"
       v-shortkey.once="['shift','d']"