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

package/components/ResourceDetail/Masthead/legacy.vue

@@ -254,7 +254,7 @@ export default {
     },
 
     parent() {
-      let displayName = this.value?.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
+      const displayName = this.value?.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
       const product = this.$store.getters['currentProduct'].name;
 
       const defaultLocation = {
@@ -491,192 +491,263 @@ 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 v-if="item">{{ item }}</span>
-          <span v-if="item">/</span>
+          <span>{{ item }}</span>
+          <span>/</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">
-                
-                <!-- 图标区 -->
-                <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"
+      </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-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
-                    class="icon icon-sm icon-istio"
-                  />
-                </span>
+                <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"
+                />
+              </span>
+              <DotState
+                v-if="!isCreate && parent.showState"
+                class="masthead-state"
+                :value="value"
+              />
               <span
-                v-if="location"
-                class="valid"
-              >|</span>
-              <router-link
-                v-if="location"
-                :to="location"
+                v-if="!isCreate && value.injectionEnabled"
+                class="masthead-istio"
               >
-                返回
-              </router-link>
-          </div>
+                <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> -->
         </div>
-
-        <!-- 右侧操作按钮区域（支持通过 slot 覆盖） -->
-        <slot name="right">
-          <div class="actions-container align-start" style="padding-right: 15px;">
-            <div class="actions">
-
-              <!-- 详情模式下的主操作按钮 -->
+        <!-- <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>
               <button
-                v-if="detailsAction && currentView === DETAIL_VIEW && isView && isManuallyHide"
+                v-if="isView"
+                ref="actions"
+                data-testid="masthead-action-menu"
+                aria-haspopup="true"
                 type="button"
-                class="btn role-primary actions mr-10"
-                :disabled="!detailsAction.enabled"
-                @click="invokeDetailsAction"
+                class="btn role-multi-action actions"
+                @click="showActions"
               >
-                {{ detailsAction.label }}
+                <i class="icon icon-actions" />
               </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"
-              />
-
-              <!-- 功能菜单：优先使用 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>
+            </template>
           </div>
-        </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>
+      </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 />
     </div>
   </div>
 </template>

package/components/ResourceDetail/legacy.vue

@@ -6,13 +6,14 @@ import {
   _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
   AS, _YAML, _DETAIL, _CONFIG, _GRAPH, PREVIEW, MODE,
 } from '@shell/config/query-params';
-import { SCHEMA } from '@shell/config/types';
+import { FLEET, SCHEMA } from '@shell/config/types';
 import { createYaml } from '@shell/utils/create-yaml';
 import Masthead from '@shell/components/ResourceDetail/Masthead';
 import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
 
@@ -171,6 +172,28 @@ export default {
         yaml = createYaml(schemas, resourceType, data);
       }
     } else {
+      if ( as === _GRAPH ) {
+        const graphSchema = await checkSchemasForFindAllHash({
+          cluster: {
+            inStoreType: 'management',
+            type:        FLEET.CLUSTER
+          },
+          bundle: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE,
+            opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
+          },
+
+          bundleDeployment: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE_DEPLOYMENT
+          }
+
+        }, this.$store);
+
+        this.canViewChart = graphSchema.cluster && graphSchema.bundle && graphSchema.bundleDeployment;
+      }
+
       let fqid = id;
 
       if ( schema.attributes?.namespaced && namespace ) {
@@ -273,6 +296,7 @@ export default {
       value:           null,
       model:           null,
       notFound:        null,
+      canViewChart:    true,
       canViewYaml:     null,
       errors:          []
     };
@@ -440,7 +464,7 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending || notFound" />
-  <div style="padding: 20px;height: 100%;" v-else>
+  <div v-else>
     <Masthead
       v-if="showMasthead"
       :resource="resourceType"
@@ -451,17 +475,14 @@ 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
+      <!-- <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
-      />
+      /> -->
     </Masthead>
     <div
       v-if="hasErrors"
@@ -481,7 +502,7 @@ export default {
     </div>
 
     <ForceDirectedTreeChart
-      v-if="isGraph"
+      v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
@@ -495,9 +516,8 @@ export default {
       :offer-preview="offerPreview"
       :done-route="doneRoute"
       :done-override="value ? value.doneOverride : null"
-      :show-errors="false"
       @update:value="$emit('input', $event)"
-      @error="onYamlError"
+      @error="e=>errors.push(e)"
     />
 
     <component
@@ -555,10 +575,4 @@ export default {
   flex-direction: column;
   flex-grow: 1;
 }
-.cru__errors {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: var(--header-bg);
-}
 </style>

package/components/auth/Principal.vue

@@ -16,6 +16,10 @@ export default {
     showLabels: {
       type:    Boolean,
       default: false,
+    },
+    isShowPass: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -88,7 +92,7 @@ export default {
     <template v-else-if="principal">
       <div class="avatar">
         <img
-          :src="principal.avatarSrc"
+          src="@shell/assets/images/user.png"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
         >
@@ -98,11 +102,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,7 +166,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $size: 20px;
+  $size: 79px;
 
   .principal {
     display: grid;
@@ -162,7 +174,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 {
@@ -172,23 +184,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard-shell-shell",
-  "version": "3.0.5-test.3",
+  "version": "3.0.5-test.4",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/account/index.vue

@@ -3,8 +3,7 @@ import BackLink from '@shell/components/BackLink';
 import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import Loading from '@shell/components/Loading';
-// import Principal from '@shell/components/auth/Principal';
-import Principal from './pri.vue';
+import Principal from '@shell/components/auth/Principal';
 import BackRoute from '@shell/mixins/back-link';
 import { mapGetters } from 'vuex';
 
@@ -17,7 +16,7 @@ const API_ENDPOINT = '/v3';
 
 export default {
   components: {
-    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal, TabTitle
+    CopyToClipboardText, BackLink, Banner, Loading, ResourceTable, Principal, TabTitle
   },
   mixins: [BackRoute],
   async fetch() {
@@ -190,13 +189,12 @@ export default {
           type="button"
           class="btn role-primary"
           data-testid="account_change_password"
-          @click="$refs.promptChangePassword.show(true)"
+          @click="showChangePasswordDialog"
         >
           {{ t("accountAndKeys.account.change") }}
         </button>
       </div> -->
     </div>
-    <PromptChangePassword ref="promptChangePassword" />
 
     <!-- <hr role="none"> -->
      <div  
@@ -217,6 +215,16 @@ export default {
           />
         </div>
       </div>
+      <button
+        v-if="apiKeySchema"
+        role="button"
+        :aria-label="t('accountAndKeys.apiKeys.add.label')"
+        class="btn role-primary add mb-20"
+        data-testid="account_create_api_keys"
+        @click="addKey"
+      >
+        {{ t('accountAndKeys.apiKeys.add.label') }}
+      </button>
     </div>
     <div
       v-if="apiKeySchema"

package/pages/auth/login.vue

@@ -32,7 +32,6 @@ import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import TabTitle from '@shell/components/TabTitle.vue';
-import { AFTER_LOGIN_ROUTE } from '@shell/store/prefs';
 
 export default {
   name:       'Login',
@@ -64,10 +63,6 @@ export default {
     };
   },
 
-  created () {
-    // this.$store.dispatch('i18n/switchTo', 'zh-hans');
-  },
-
   computed: {
     ...mapGetters(['isSingleProduct']),
     ...mapGetters({ t: 'i18n/t', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
@@ -173,7 +168,7 @@ export default {
       this.focusSomething();
     });
   },
-  
+
   methods: {
     async loadInitialSettings() {
       let firstLoginSetting, plSetting, brand;

package/pages/c/_cluster/_product/namespaces.vue

@@ -29,8 +29,8 @@ export default {
   computed: {
     headers() {
       return [
-        NAME,
         STATE,
+        NAME,
         AGE
       ];
     },

package/pages/account/pri.vue

@@ -1,229 +0,0 @@
-<script>
-import { NORMAN } from '@shell/config/types';
-
-export default {
-  props: {
-    value: {
-      type:     String,
-      required: true,
-    },
-
-    useMuted: {
-      type:    Boolean,
-      default: true,
-    },
-
-    showLabels: {
-      type:    Boolean,
-      default: false,
-    },
-    isShowPass: {
-      type:    Boolean,
-      default: false,
-    }
-  },
-
-  async fetch() {
-    this.principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.value);
-
-    if ( this.principal ) {
-      return;
-    }
-
-    const principalId = escape(this.value).replace(/\//g, '%2F');
-
-    try {
-      this.principal = await this.$store.dispatch('rancher/find', {
-        type: NORMAN.PRINCIPAL,
-        id:   this.value,
-        opt:  { url: `/v3/principals/${ principalId }` }
-      });
-    } catch (e) {
-      console.error('Failed to fetch principal', this.value, principalId); // eslint-disable-line no-console
-    }
-  },
-
-  data() {
-    // Load from cache immediately if possible
-    return { principal: null };
-  },
-
-  computed: {
-    showBoth() {
-      const p = this.principal;
-
-      return p.name && p.loginName && p.name.trim().toLowerCase() !== p.loginName.trim().toLowerCase();
-    }
-  },
-};
-</script>
-
-<template>
-  <div
-    class="principal"
-    :class="{'showLabels': showLabels}"
-  >
-    <template v-if="!principal && $fetchState.pending">
-      <div class="avatar">
-        <div class="empty">
-          <i class="icon icon-spinner icon-lg" />
-        </div>
-      </div>
-      <div
-        v-clean-html="t('principal.loading', null, true)"
-        class="name"
-        :class="{'text-muted': useMuted}"
-      />
-      <div class="description" />
-    </template>
-
-    <template v-else-if="principal">
-      <div class="avatar">
-        <img
-          src="@shell/assets/images/user.png"
-        >
-      </div>
-      <div
-        v-if="showLabels"
-        class="name"
-      >
-        <table>
-          <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>
-        <div class="name">
-          <template v-if="showBoth">
-            {{ principal.name }}
-            <span
-              v-if="principal.loginName"
-              :class="{'text-muted': useMuted}"
-            >({{ principal.loginName }})</span>
-          </template>
-          <template v-else-if="principal.name">
-            {{ principal.name }}
-          </template>
-          <template v-else>
-            {{ principal.loginName }}
-          </template>
-        </div>
-        <div
-          class="description"
-          :class="{'text-muted': useMuted}"
-        >
-          {{ principal.displayType }}
-        </div>
-      </template>
-    </template>
-
-    <template v-else>
-      <div class="avatar">
-        <div
-          class="empty"
-          :class="{'text-muted': useMuted}"
-        >
-          <i class="icon icon-warning icon-lg" />
-        </div>
-      </div>
-      <div
-        v-t="'principal.error'"
-        class="name text-error"
-      />
-      <div
-        class="description"
-        :class="{'text-muted': useMuted}"
-      >
-        {{ value }}
-      </div>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  $size: 79px;
-
-  .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;
-
-    th {
-      text-align: left;
-      font-weight: normal;
-      padding-right: 10px;
-    }
-
-    &.showLabels {
-      /* grid-template-areas:
-        "avatar name";
-      grid-template-columns: 60px auto;
-      grid-template-rows: 60px;
-      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; */
-      width: 287px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      DIV.empty {
-        border: 1px solid var(--border);
-        line-height: $size;
-      }
-
-      IMG {
-        width: $size;
-        height: $size;
-      }
-
-      DIV.round, IMG.round {
-        border-radius: 50%;
-      }
-    }
-
-    .name {
-      grid-area: name;
-      line-height: math.div($size, 2);
-      overflow-wrap: anywhere;
-    }
-
-    .description {
-      grid-area: description;
-      line-height: math.div($size, 2);
-    }
-  }
-</style>