dashboard-shell-shell 0.0.3 → 0.0.1000000000001124

package/components/nav/TopLevelMenu.vue

@@ -460,12 +460,14 @@ export default {
 
 <template>
   <div>
-    <!-- Overlay -->
+    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
+
+    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -476,8 +478,11 @@ export default {
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
       >
-        <!-- Logo and name -->
+        
+        <!-- ====================== 菜单头部（Logo + 菜单按钮） ====================== -->
         <div class="title">
+          
+          <!-- 菜单按钮（汉堡图标） -->
           <div
             data-testid="top-level-menu"
             :aria-label="t('nav.expandCollapseAppBar')"
@@ -488,6 +493,8 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
+
+            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -500,6 +507,8 @@ export default {
               fill="none"
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
+
+          <!-- 品牌Logo -->
           <div class="side-menu-logo">
             <BrandImage
               data-testid="side-menu__brand-img"
@@ -509,10 +518,11 @@ export default {
           </div>
         </div>
 
-        <!-- Menu body -->
+        <!-- ====================== 菜单内容区 ====================== -->
         <div class="body">
           <div>
-            <!-- Home button -->
+            
+            <!-- 首页按钮 -->
             <div @click="hide()">
               <router-link
                 class="option cluster selector home"
@@ -520,6 +530,8 @@ export default {
                 role="link"
                 :aria-label="t('nav.ariaLabel.homePage')"
               >
+
+                <!-- 首页图标 -->
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   class="top-menu-icon"
@@ -536,12 +548,14 @@ export default {
                 </div>
               </router-link>
             </div>
-            <!-- Search bar -->
+            
+            <!-- 集群搜索框 -->
             <div
               v-if="showClusterSearch"
               class="clusters-search"
             >
               <div class="clusters-search-count">
+                <!-- 当前搜索到的集群数量 -->
                 <span>{{ clusterFilterCount }}</span>
                 {{ t('nav.search.clusters') }}
                 <i
@@ -560,10 +574,14 @@ export default {
                   :tabindex="!shown ? -1 : 0"
                   :aria-label="t('nav.search.ariaLabel')"
                 >
+
+                <!-- 搜索图标 -->
                 <i
                   class="magnifier icon icon-search"
                   :class="{ active: clusterFilter }"
                 />
+
+                <!-- 清空按钮 -->
                 <i
                   v-if="clusterFilter"
                   class="icon icon-close"
@@ -573,9 +591,11 @@ export default {
             </div>
           </div>
 
-          <!-- Harvester extras -->
+          <!-- ====================== Harvester 相关功能区 ====================== -->
           <template v-if="hciApps.length">
             <div class="category" />
+
+            <!-- 跳转 Harvester Dashboard -->
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -591,6 +611,8 @@ export default {
                 </div>
               </a>
             </div>
+
+            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -613,14 +635,14 @@ export default {
             </div>
           </template>
 
-          <!-- Cluster menu -->
+          <!-- ====================== 集群列表 ====================== -->
           <template v-if="!!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
               :style="pinnedClustersHeight"
             >
-              <!-- Pinned Clusters -->
+              <!-- 已固定集群 -->
               <div
                 v-if="showPinClusters && pinFiltered.length"
                 class="clustersPinned"
@@ -631,11 +653,13 @@ export default {
                   :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
-                  <button
+
+                  <!-- 可用集群按钮 -->
+                  <span
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`pinned-menu-cluster-${ c.id }`"
-                    class="cluster selector option"
+                    class="clusterBtn cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -665,7 +689,9 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -694,6 +720,8 @@ export default {
                     />
                   </span>
                 </div>
+
+                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -702,7 +730,7 @@ export default {
                 </div>
               </div>
 
-              <!-- Clusters Search result -->
+              <!-- 搜索结果集群列表 -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -710,11 +738,13 @@ export default {
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
-                  <button
+                  
+                  <!-- 可用集群 -->
+                  <span
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`menu-cluster-${ c.id }`"
-                    class="cluster selector option"
+                    class="cluster selector option clusterBtn"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -745,7 +775,9 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -777,7 +809,7 @@ export default {
                 </div>
               </div>
 
-              <!-- No clusters message -->
+              <!-- 无匹配集群提示 -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -787,7 +819,7 @@ export default {
               </div>
             </div>
 
-            <!-- See all clusters -->
+            <!-- 查看所有集群按钮 -->
             <router-link
               v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
@@ -806,8 +838,9 @@ export default {
             </router-link>
           </template>
 
-          <!-- MULTI CLUSTER APPS -->
+          <!-- ====================== 多集群应用区 ====================== -->
           <div class="category">
+            <!-- 多集群应用 -->
             <template v-if="multiClusterApps.length">
               <div
                 class="category-title"
@@ -840,7 +873,7 @@ export default {
               </div>
             </template>
 
-            <!-- Configuration apps menu -->
+            <!-- 配置类应用 -->
             <template v-if="configurationApps.length">
               <div
                 class="category-title"
@@ -875,10 +908,11 @@ export default {
           </div>
         </div>
 
-        <!-- Footer -->
+        <!-- ====================== 底部区域 ====================== -->
         <div
           class="footer"
         >
+          <!-- 支持页面链接 -->
           <div
             v-if="canEditSettings"
             class="support"
@@ -892,6 +926,8 @@ export default {
               {{ t('nav.support', {hasSupport}) }}
             </router-link>
           </div>
+
+          <!-- 关于页面链接 -->
           <div
             class="version"
             :class="{'version-small': largeAboutText}"
@@ -962,6 +998,10 @@ export default {
   $option-padding-left: 14px;
   $option-height: $icon-size + $option-padding + $option-padding;
 
+  .clusterBtn {
+    background-color: var(--nav-icon-badge-bg);
+  }
+
   .side-menu {
     .menu {
       position: absolute;
@@ -1066,7 +1106,7 @@ export default {
         align-items: center;
         cursor: pointer;
         display: flex;
-        color: var(--link);
+        color: var(--primary);
         font-size: 14px;
         height: $option-height;
         white-space: nowrap;
@@ -1076,7 +1116,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--default-active-text);
+          color: var(--primary);
           font-weight: 500;
         }
 
@@ -1148,7 +1188,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--link);
+          fill: var(--primary);
         }
 
         .top-menu-icon {

package/components/nav/Type.vue

@@ -109,6 +109,7 @@ export default {
 </script>
 
 <template>
+  <!-- 当 type 有 route 时，渲染一个 Vue Router 自定义链接 -->
   <router-link
     v-if="type.route"
     :key="type.name"
@@ -116,18 +117,24 @@ export default {
     custom
     :to="type.route"
   >
+
+    <!-- 导航项容器 -->
     <li
       class="child nav-type"
       :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
       @click="navigate"
       @keypress.enter="navigate"
     >
+
+      <!-- 如果是精确匹配激活状态，则显示 TabTitle 组件 -->
       <TabTitle
         v-if="isExactActive"
         :show-child="false"
       >
         {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
       </TabTitle>
+
+      <!-- 链接主体 -->
       <a
         role="link"
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
@@ -138,30 +145,38 @@ export default {
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"
       >
+        <!-- 文本标签：优先使用多语言 key -->
         <span
           v-if="type.labelKey"
           class="label"
         ><t :k="type.labelKey" /></span>
+
+        <!-- 没有 labelKey 时，直接使用 HTML 文本 -->
         <span
           v-else
           v-clean-html="type.labelDisplay || type.label"
           class="label"
           :class="{'no-icon': !type.icon}"
         />
+
+        <!-- 右侧附加信息（收藏按钮 / 命名空间图标 / 计数） -->
         <!-- <span
           v-if="showFavorite || namespaceIcon || showCount"
           class="count"
         >
+
           <Favorite
             v-if="showFavorite"
             :resource="type.name"
           />
+
           <i
             v-if="namespaceIcon"
             class="icon icon-namespace"
             :class="{'ns-and-icon': showCount}"
             data-testid="type-namespaced"
           />
+
           <span
             v-if="showCount"
             data-testid="type-count"
@@ -170,6 +185,8 @@ export default {
       </a>
     </li>
   </router-link>
+
+  <!-- 当 type 没有 route 但有外部 link 时 -->
   <li
     v-else-if="type.link"
     class="child nav-type nav-link"
@@ -185,6 +202,8 @@ export default {
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
   </li>
+
+  <!-- 兜底情况：既没有 route，也没有 link -->
   <li v-else>
     {{ type }}?
   </li>
@@ -234,12 +253,12 @@ export default {
     A {
       display: grid;
       grid-template-areas: "label count";
-      grid-template-columns: auto auto;
+      grid-template-columns: auto 20px;
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
       /* padding: 7.5px 7px 7.5px 10px; */
-      padding: 0px 16px 0px 40px;
+      padding: 0px 16px 0px 30px;
       height: 50px;
       margin: 0 0 0 -3px;
       overflow: hidden;
@@ -248,7 +267,7 @@ export default {
       color: var(--body-text);
 
       &:hover {
-        background: var(--nav-active);
+        background: var(--nav-active) !important;
         color: var(--nav-hover-color);
         /* background: var(--nav-hover); */
         text-decoration: none;
@@ -271,13 +290,13 @@ export default {
       font-size: 12px;
       text-align: right;
       justify-items: center;
-      padding-right: 4px;
+      line-height: 50px;
     }
 
     &.nav-type:not(.depth-0) {
       A {
         font-size: 13px;
-        padding: 5.5px 7px 5.5px 10px;
+        padding: 5.5px 7px 5.5px 40px;
       }
 
       ::v-deep .label I {

package/composables/useClickOutside.ts

@@ -76,6 +76,6 @@ export const useClickOutside = <T extends OnClickOutsideOptions>(
 
   onBeforeUnmount(() => {
     window.removeEventListener('click', listener as any);
-    window.removeEventListener('pointerDown', setShouldListen);
+    window.removeEventListener('pointerdown', setShouldListen);
   });
 };

package/config/product/auth.js

@@ -28,7 +28,7 @@ export function init(store) {
   product({
     ifHaveType:          new RegExp(`${ MANAGEMENT.USER }|${ MANAGEMENT.AUTH_CONFIG }`, 'i'),
     ifHaveVerb:          'GET',
-    ifFeature:           MULTI_CLUSTER,
+    // ifFeature:           MULTI_CLUSTER,
     inStore:             'management',
     icon:                'user',
     removable:           false,

package/config/product/explorer.js

@@ -64,7 +64,7 @@ export function init(store) {
       [NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING]:     'rancher',
       [NORMAN.PROJECT_ROLE_TEMPLATE_BINDING]:     'rancher',
       [CAPI.RANCHER_CLUSTER]:                     'management',
-    }
+    },
   });
 
   basicType(['cluster-dashboard', 'cluster-tools']);

package/config/product/settings.js

@@ -92,15 +92,15 @@ export function init(store) {
     route:      { name: 'c-cluster-settings-performance' }
   });
 
-  virtualType({
-    ifHaveType: MANAGEMENT.SETTING,
-    labelKey:   'customLinks.label',
-    name:       'links',
-    namespaced: false,
-    weight:     96,
-    icon:       'folder',
-    route:      { name: 'c-cluster-settings-links' }
-  });
+  // virtualType({
+  //   ifHaveType: MANAGEMENT.SETTING,
+  //   labelKey:   'customLinks.label',
+  //   name:       'links',
+  //   namespaced: false,
+  //   weight:     96,
+  //   icon:       'folder',
+  //   route:      { name: 'c-cluster-settings-links' }
+  // });
 
   basicType([
     'settings',
@@ -108,7 +108,7 @@ export function init(store) {
     'brand',
     'banners',
     'performance',
-    'links'
+    // 'links'
   ]);
 
   configureType(MANAGEMENT.SETTING, {

package/detail/management.cattle.io.user.vue

@@ -228,6 +228,7 @@ export default {
 </script>
 
 <template>
+  编辑页面1-----------------------------------------------------------
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <ResourceTabs

package/edit/management.cattle.io.user.vue

@@ -214,7 +214,11 @@ export default {
 </script>
 
 <template>
+
+  <!-- 如果没有获取到 value 数据，则显示加载组件 -->
   <Loading v-if="!value" />
+
+  <!-- 如果有数据，则进入资源编辑/创建的表单界面 -->
   <CruResource
     v-else
     :done-route="doneRoute"
@@ -226,10 +230,14 @@ export default {
     class="create-edit"
     @finish="save"
   >
+
+    <!-- 账户凭据区域 -->
     <div class="credentials">
       <h2> {{ t("user.edit.credentials.label") }}</h2>
+
+      <!-- 用户名 & 显示名 -->
       <div class="row">
-        <div class="col span-4">
+        <div class="col span-6">
           <LabeledInput
             ref="name"
             v-model:value="form.username"
@@ -241,7 +249,7 @@ export default {
             :ignore-password-managers="!isCreate"
           />
         </div>
-        <div class="col span-4">
+        <div class="col span-6">
           <LabeledInput
             v-model:value="form.displayName"
             label-key="user.edit.credentials.displayName.label"
@@ -250,8 +258,10 @@ export default {
           />
         </div>
       </div>
-      <div class="row mt-20 mb-10">
-        <div class="col span-8">
+
+      <!-- 用户描述 -->
+      <div class="row">
+        <div class="col span-6">
           <LabeledInput
             v-model:value="form.description"
             label-key="user.edit.credentials.userDescription.label"
@@ -261,6 +271,7 @@ export default {
         </div>
       </div>
 
+      <!-- 修改密码（仅非查看模式显示） -->
       <ChangePassword
         v-if="!isView"
         ref="changePassword"
@@ -270,6 +281,8 @@ export default {
         @valid="validation.password = $event"
       />
     </div>
+
+    <!-- 全局角色绑定区域（仅当 showGlobalRoles 为 true 时显示） -->
     <div
       v-if="showGlobalRoles"
       class="global-permissions"

package/list/management.cattle.io.user.vue

@@ -122,18 +122,9 @@ export default {
       :show-incremental-loading-indicator="incrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
+      :main-button-visible="false"
     >
-      <template #extraActions>
-        <AsyncButton
-          v-if="canRefreshAccess"
-          mode="refresh"
-          :action-label="t('authGroups.actions.refresh')"
-          :waiting-label="t('authGroups.actions.refresh')"
-          :success-label="t('authGroups.actions.refresh')"
-          :error-label="t('authGroups.actions.refresh')"
-          @click="refreshGroupMemberships"
-        />
-      </template>
+
       <template
         v-if="isAdmin"
         #subHeader
@@ -142,6 +133,7 @@ export default {
           :to="{ name: 'c-cluster-auth-user.retention'}"
           class="btn role-link btn-sm btn-user-retention"
           data-testid="router-link-user-retention"
+          style="text-align: left;"
         >
           <i class="icon icon-gear" />
           {{ t('user.retention.button.label') }}
@@ -156,7 +148,23 @@ export default {
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+
+      :resource="resource"
+      :main-button-visible="true"
     >
+      <template #extraActions>
+        <AsyncButton
+          v-if="canRefreshAccess"
+          style="margin-right: 6px;"
+          mode="refresh"
+          :action-label="t('authGroups.actions.refresh')"
+          :waiting-label="t('authGroups.actions.refresh')"
+          :success-label="t('authGroups.actions.refresh')"
+          :error-label="t('authGroups.actions.refresh')"
+          @click="refreshGroupMemberships"
+        />
+      </template>
+
       <template #col:user-state="{row}">
         <td>
           <TableDataUserIcon
@@ -171,8 +179,11 @@ export default {
 
 <style lang="scss">
   .btn-user-retention {
-    display: flex;
+    display: block;
     gap: 0.25rem;
     padding: 0;
   }
+  .btn-user-retention:hover {
+    color: #333 !important;
+  }
 </style>

package/list/provisioning.cattle.io.cluster.vue

@@ -307,19 +307,18 @@ export default {
         <router-link
           v-if="row.mgmt && row.mgmt.isReady && !row.hasError"
           data-testid="cluster-manager-list-explore-management"
-          class="btn btn-sm role-secondary"
           :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"
         >
-          {{ t('cluster.explore') }}
+          <a href="javascript:;">
+            {{ t('cluster.explore') }}
+          </a>
         </router-link>
-        <button
-          v-else
+        <span
           data-testid="cluster-manager-list-explore"
-          :disabled="true"
-          class="btn btn-sm role-secondary"
+          v-else
         >
           {{ t('cluster.explore') }}
-        </button>
+        </span>
       </template>
     </ResourceTable>
   </div>

package/mixins/brand.js

@@ -176,7 +176,24 @@ export default {
       const vars = createCssVars(color, this.theme, name);
 
       for (const prop in vars) {
+
         document.body.style.setProperty(prop, vars[prop]);
+
+        // 主色调hover值动态
+        if (prop === '--primary-hover-bg') {
+          // 如果是你要设置透明度的变量，比如 hover
+          let value = '#E8F4FF';
+          if (vars[prop]) {
+            const match = vars[prop].match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+            if (match) {
+              const [_, r, g, b] = match;
+              value = `rgba(${r}, ${g}, ${b}, 0.15)`;
+            }
+          }
+
+          document.body.style.setProperty('--nav-hover-color', vars[prop]);
+          document.body.style.setProperty('--nav-active', value);
+        }
       }
     },