dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

package/pages/c/_cluster/settings/performance.vue

@@ -198,14 +198,16 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
+    <!-- 面包屑 -->
+    <div class="excram-list">全局设置 / <span style="color: #1890FF;">性能</span></div>
     <h1 class="mb-20">
       {{ t('performance.label') }}
     </h1>
     <div>
-      <div class="ui-perf-setting">
-        <!-- Inactivity -->
-        <div class="mt-20">
-          <h2>{{ t('performance.inactivity.title') }}</h2>
+      <div class="ui-perf-setting pb-40">
+        <!-- 闲置状态 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.inactivity.title') }}</h2>
           <p>{{ t('performance.inactivity.description') }}</p>
           <Checkbox
             v-model:value="value.inactivity.enabled"
@@ -232,21 +234,21 @@ export default {
             />
           </div>
         </div>
-        <!-- Websocket Notifications -->
-        <div class="mt-40">
-          <h2>{{ t('performance.websocketNotification.label') }}</h2>
+        <!-- WebSocket 通知 -->
+        <div class="mb-40 p-20" style="border: 1px solid var(--nav-border);">
+          <h2  class="mb-20">{{ t('performance.websocketNotification.label') }}</h2>
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
             v-model:value="value.disableWebsocketNotification"
             :mode="mode"
             :label="t('performance.websocketNotification.checkboxLabel')"
-            class="mt-10 mb-20"
+            class="mt-10"
             :primary="true"
           />
         </div>
         <!-- Server Side Pagination -->
-        <div class="mt-20">
-          <h2 id="ssp-setting">
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20" id="ssp-setting">
             {{ t('performance.serverPagination.label') }}
           </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
@@ -267,9 +269,9 @@ export default {
             />
           </Collapse>
         </div>
-        <!-- Incremental Loading -->
-        <div class="mt-20">
-          <h2>{{ t('performance.incrementalLoad.label') }}</h2>
+        <!-- 增量加载 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.incrementalLoad.label') }}</h2>
           <Banner
             color="warning"
           >
@@ -299,9 +301,9 @@ export default {
             />
           </div>
         </div>
-        <!-- Enable manual refresh list views -->
-        <div class="mt-40">
-          <h2 v-t="'performance.manualRefresh.label'" />
+        <!-- 手动刷新 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20" v-t="'performance.manualRefresh.label'" />
           <Banner
             color="warning"
           >
@@ -331,9 +333,9 @@ export default {
             />
           </div>
         </div>
-        <!-- Enable GC of resources from store -->
-        <div class="mt-40">
-          <h2 v-t="'performance.gc.label'" />
+        <!-- 资源垃圾回收 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20" v-t="'performance.gc.label'" />
           <Banner
             color="warning"
           >
@@ -412,9 +414,9 @@ export default {
             </div>
           </div>
         </div>
-        <!-- Force NS filter -->
-        <div class="mt-40">
-          <h2>{{ t('performance.nsFiltering.label') }}</h2>
+        <!-- 要求资源组/项目过滤 -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.nsFiltering.label') }}</h2>
           <Banner
             color="warning"
           >
@@ -430,9 +432,9 @@ export default {
             @update:value="compatibleWarning('forceNsFilterV2', $event)"
           />
         </div>
-        <!-- Advanced Websocket Worker -->
-        <div class="mt-20">
-          <h2>{{ t('performance.advancedWorker.label') }}</h2>
+        <!-- Websocket Web Worker -->
+        <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+          <h2 class="mb-20">{{ t('performance.advancedWorker.label') }}</h2>
           <Banner
             color="warning"
           >
@@ -458,10 +460,10 @@ export default {
         :label="err"
       />
     </template>
-    <div v-if="mode === 'edit'">
+    <div class="action-btn" v-if="mode === 'edit'">
       <AsyncButton
         data-testid="performance__save-btn"
-        class="pull-right mt-20"
+        class="pull-right"
         mode="apply"
         :disabled="!canSave"
         @click="save"
@@ -471,6 +473,17 @@ export default {
 </template>
 
 <style scoped lang='scss'>
+.action-btn {
+  padding: 10px 30px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: var(--body-bg);
+  border-top: 1px solid var(--nav-border);
+}
+
+
 .overlay {
   width: 100%;
   height: 100%;
@@ -480,17 +493,27 @@ export default {
   background-color: var(--overlay-bg);
   z-index: 1;
 }
-  .ui-perf-setting {
-    P {
-      line-height: 1.25;
-      margin-bottom: 10px;
-    }
-
-    .underline {
-      text-decoration: underline;
-    }
+.ui-perf-setting {
+  P {
+    line-height: 1.25;
+    margin-bottom: 10px;
   }
-  .input {
-    max-width: 25%;
+
+  .underline {
+    text-decoration: underline;
   }
+}
+.input {
+  max-width: 25%;
+}
+h2{
+  font-size: 14px;
+}
+
+.excram-list{
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 20px;
+  font-family: 'Microsoft YaHei';
+}
 </style>

package/pages/home.vue

@@ -62,7 +62,12 @@ export default defineComponent({
       query: { [MODE]: _IMPORT }
     };
 
+    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
+
+    const topLevelPermissionsVis = topLevelPermissions && topLevelPermissions === 'superadmin'
+
     return {
+      topLevelPermissionsVis,
       HIDE_HOME_PAGE_CARDS,
       // Page actions don't change on the Home Page
       pageActions: [
@@ -473,17 +478,26 @@ export default defineComponent({
 </script>
 
 <template>
+   <!-- 当 managementReady 为 true 时才显示首页内容 -->
   <div
     v-if="managementReady"
     class="home-page"
   >
+
+    <!-- 页签标题组件，不显示子页面标题和面包屑 -->
     <TabTitle
+      v-if="topLevelPermissionsVis"
       :show-child="false"
       :breadcrumb="false"
     >
+
+      <!-- 页面标题：{vendor} - 首页 -->
       {{ `${vendor} - ${t('landing.homepage')}` }}
     </TabTitle>
+
+    <!-- 首页欢迎横幅 -->
     <BannerGraphic
+      v-if="topLevelPermissionsVis"
       :small="true"
       :title="t('landing.welcomeToRancher', {vendor})"
       :pref="HIDE_HOME_PAGE_CARDS"
@@ -491,13 +505,24 @@ export default defineComponent({
       data-testid="home-banner-graphic"
     />
     <IndentedPanel class="mt-20 mb-20">
+
+       <!-- 主面板布局 -->
       <div class="row home-panels">
         <div class="col main-panel">
+          <h2 class="mb-20">
+            {{ t('landing.clusters.title') }}
+          </h2>
+
+          <!-- 集群列表面板 -->
           <div class="row panel">
+
+            <!-- 如果是多集群模式（mcm = multi-cluster management） -->
             <div
               v-if="mcm"
               class="col span-12"
             >
+
+              <!-- 分页资源表格 -->
               <PaginatedResourceTable
                 v-if="provClusterSchema"
                 :schema="provClusterSchema"
@@ -517,27 +542,17 @@ export default defineComponent({
                 :fetchSecondaryResources="fetchSecondaryResources"
                 :fetchPageSecondaryResources="fetchPageSecondaryResources"
               >
-                <template #header-left>
-                  <div class="row table-heading">
-                    <h2 class="mb-0">
-                      {{ t('landing.clusters.title') }}
-                    </h2>
-                    <BadgeState
-                      v-if="clusterCount"
-                      :label="clusterCount.toString()"
-                      color="role-tertiary ml-20 mr-20"
-                    />
-                  </div>
-                </template>
+
+                <!-- 表头中间：管理、导入、创建按钮 -->
                 <template
                   v-if="canCreateCluster || !!provClusterSchema"
-                  #header-middle
+                  #header-right
                 >
-                  <div class="table-heading">
+                  <div v-if="topLevelPermissionsVis" class="table-heading">
                     <router-link
                       v-if="!!provClusterSchema"
                       :to="manageLocation"
-                      class="btn btn-sm role-secondary"
+                      class="btn btn-sm role-primary"
                       data-testid="cluster-management-manage-button"
                       role="button"
                       :aria-label="t('cluster.manageAction')"
@@ -569,6 +584,8 @@ export default defineComponent({
                     </router-link>
                   </div>
                 </template>
+
+                <!-- 列渲染：集群名称 -->
                 <template #col:name="{row}">
                   <td class="col-name">
                     <div class="list-cluster-name">
@@ -576,6 +593,8 @@ export default defineComponent({
                         v-if="row.mgmt"
                         class="cluster-name"
                       >
+
+                        <!-- 如果集群就绪且无错误，跳转到集群 Explorer 页面 -->
                         <router-link
                           v-if="row.mgmt.isReady && !row.hasError"
                           :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
@@ -584,18 +603,17 @@ export default defineComponent({
                         >
                           {{ row.nameDisplay }}
                         </router-link>
+
+                        <!-- 否则只显示名称 -->
                         <span v-else>{{ row.nameDisplay }}</span>
                         <i
                           v-if="row.unavailableMachines"
                           v-clean-tooltip="row.unavailableMachines"
                           class="conditions-alert-icon icon-alert icon"
                         />
-                        <i
-                          v-if="row.isRke1"
-                          v-clean-tooltip="t('cluster.rke1Unsupported')"
-                          class="rke1-unsupported-icon icon-warning icon"
-                        />
                       </p>
+
+                      <!-- 集群描述 -->
                       <p
                         v-if="row.description"
                         class="cluster-description"
@@ -605,6 +623,8 @@ export default defineComponent({
                     </div>
                   </td>
                 </template>
+
+                <!-- 列渲染：Kubernetes 版本 + 架构 -->
                 <template #col:kubernetesVersion="{row}">
                   <td class="col-name">
                     <span>
@@ -618,6 +638,8 @@ export default defineComponent({
                     </div>
                   </td>
                 </template>
+
+                <!-- 列渲染：CPU 核数 -->
                 <template #col:cpu="{row}">
                   <td v-if="row.mgmt && cpuAllocatable(row.mgmt)">
                     {{ `${cpuAllocatable(row.mgmt)} ${t('landing.clusters.cores', {count:cpuAllocatable(row.mgmt) })}` }}
@@ -626,6 +648,8 @@ export default defineComponent({
                     &mdash;
                   </td>
                 </template>
+
+                <!-- 列渲染：内存 -->
                 <template #col:memory="{row}">
                   <td v-if="row.mgmt && memoryAllocatable(row.mgmt) && !memoryAllocatable(row.mgmt).match(/^0 [a-zA-z]/)">
                     {{ memoryAllocatable(row.mgmt) }}
@@ -634,16 +658,20 @@ export default defineComponent({
                     &mdash;
                   </td>
                 </template>
-                <!-- <template #cell:explorer="{row}">
+
+                <!-- 列渲染：探索按钮 -->
+                <template #cell:explorer="{row}">
                   <router-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
                     {{ t('landing.clusters.explore') }}
                   </router-link>
                   <button v-else :disabled="true" class="btn btn-sm role-primary">
                     {{ t('landing.clusters.explore') }}
                   </button>
-                </template> -->
+                </template>
               </PaginatedResourceTable>
             </div>
+
+            <!-- 单集群模式 -->
             <div
               v-else
               class="col span-12"
@@ -652,7 +680,8 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        <CommunityLinks class="col span-3 side-panel" />
+        <!-- 右侧社区链接面板 -->
+        <!-- <CommunityLinks class="col span-3 side-panel" /> -->
       </div>
     </IndentedPanel>
   </div>
@@ -678,13 +707,29 @@ export default defineComponent({
     }
   }
 
+  .set-login-page, .whats-new {
+    > :deep() .banner__content {
+      display: flex;
+
+      > div {
+        flex: 1;
+      }
+      > a {
+        align-self: flex-end;
+      }
+    }
+  }
+
+  .banner.set-login-page {
+    border: 1px solid var(--border);
+  }
   .table-heading {
     align-items: center;
     display: flex;
     height: 39px;
 
     & > a {
-      margin-left: 10px;
+      margin-right: 10px;
     }
   }
   .panel:not(:first-child) {
@@ -715,7 +760,7 @@ export default defineComponent({
       align-items: center;
 
       // Ensure long cluster names truncate with ellipsis
-      > A, > span {
+      > A {
         overflow: hidden;
         text-overflow: ellipsis;
       }
@@ -732,11 +777,6 @@ export default defineComponent({
       color: var(--error);
       margin-left: 4px;
     }
-
-    .rke1-unsupported-icon {
-      color: var(--warning);
-      margin-left: 4px;
-    }
   }
 
   // Hide the side-panel showing links when the screen is small

package/pages/prefs.vue

@@ -17,6 +17,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
 import LocaleSelector from '@shell/components/LocaleSelector';
 import TabTitle from '@shell/components/TabTitle';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 
 export default {
   components: {
@@ -43,7 +44,7 @@ export default {
     ...mapGetters({ hasMultipleLocales: 'i18n/hasMultipleLocales' }),
 
     isHarvester() {
-      return this.isSingleProduct?.productName === 'harvester';
+      return this.isSingleProduct?.productName === HARVESTER;
     },
 
     theme: {
@@ -189,11 +190,13 @@ export default {
     <!-- Language -->
     <div
       v-if="hasMultipleLocales && !isHarvester"
-      class="mt-10 mb-10"
+      class="mb-20 p-20 pb-0"
+      style="border: 1px solid var(--nav-border);"
     >
       <h4
         id="prefs-language"
         v-t="'prefs.language'"
+        class="pb-20"
       />
       <div class="row">
         <div class="col span-4">
@@ -205,36 +208,35 @@ export default {
       </div>
     </div>
     <!-- Theme -->
-    <div class="mt-10 mb-10">
-      <h4 v-t="'prefs.theme.label'" />
+    <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.theme.label'" class="mb-20" />
       <ButtonGroup
         v-model:value="theme"
         data-testid="prefs__themeOptions"
         :options="themeOptions"
       />
-      <div class="mt-10">
+      <!-- <div class="mt-10">
         <t
           k="prefs.theme.autoDetail"
           :pm="pm"
           :am="am"
         />
-      </div>
+      </div> -->
     </div>
     <!-- Login landing page -->
     <div
       v-if="!isSingleProduct"
-      class="mt-10 mb-10"
+      class="mb-20 p-20"
+      style="border: 1px solid var(--nav-border);"
     >
-      <hr role="none">
-      <h4 v-t="'prefs.landing.label'" />
+      <h4 v-t="'prefs.landing.label'" class="mb-20" />
       <LandingPagePreference
         data-testid="prefs__landingPagePreference"
       />
     </div>
     <!-- Display Settings -->
-    <div class="mt-10 mb-10">
-      <hr role="none">
-      <h4 v-t="'prefs.displaySettings.title'" />
+    <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.displaySettings.title'" class="mb-20" />
       <p class="set-landing-leadin">
         {{ t('prefs.displaySettings.detail', {}, raw=true) }}
       </p>
@@ -275,10 +277,10 @@ export default {
     <!-- Confirmation setting -->
     <div
       v-if="!isSingleProduct"
-      class="col adv-features mt-10 mb-10"
+      class="col adv-features mb-20 p-20"
+      style="border: 1px solid var(--nav-border);"
     >
-      <hr role="none">
-      <h4 v-t="'prefs.confirmationSetting.title'" />
+      <h4 v-t="'prefs.confirmationSetting.title'" class="mb-20" />
       <Checkbox
         v-model:value="scalingDownPrompt"
         data-testid="prefs__scalingDownPrompt"
@@ -287,9 +289,8 @@ export default {
       />
     </div>
     <!-- Advanced Features -->
-    <div class="col adv-features mt-10 mb-10">
-      <hr role="none">
-      <h4 v-t="'prefs.advFeatures.title'" />
+    <div class="col adv-features mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.advFeatures.title'" class="mb-20" />
       <Checkbox
         v-model:value="viewInApi"
         data-testid="prefs__viewInApi"
@@ -325,15 +326,13 @@ export default {
         <Checkbox
           v-model:value="pluginDeveloper"
           :label="t('prefs.advFeatures.pluginDeveloper', {}, true)"
-          :tooltip="t('prefs.advFeatures.pluginDeveloperTooltip')"
           class="mt-20"
         />
       </template>
     </div>
     <!-- YAML editor key mapping -->
-    <div class="col mt-10 mb-10">
-      <hr role="none">
-      <h4 v-t="'prefs.keymap.label'" />
+    <div class="col mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.keymap.label'" class="mb-20" />
       <ButtonGroup
         v-model:value="keymap"
         data-testid="prefs__keymapOptions"
@@ -343,10 +342,10 @@ export default {
     <!-- Helm Charts -->
     <div
       v-if="!isSingleProduct"
-      class="col mt-10 mb-40"
+      class="col mb-40 p-20"
+      style="border: 1px solid var(--nav-border);"
     >
-      <hr role="none">
-      <h4 v-t="'prefs.helm.label'" />
+      <h4 v-t="'prefs.helm.label'" class="mb-20" />
       <ButtonGroup
         v-model:value="showPreRelease"
         data-testid="prefs__helmOptions"
@@ -365,4 +364,7 @@ export default {
     max-width: 80vw;
     color: var(--input-label);
   }
+  h4{
+    font-size: 14px;
+  }
 </style>

package/pkg/tsconfig.json

@@ -27,25 +27,25 @@
     ],
     "paths": {
       "@shell/core/*": [
-        "../../node_modules/@rancher/shell/core/*"
+        "../../node_modules/dashboard-shell-shell/core/*"
       ],
       "@shell/config/*": [
-        "../../node_modules/@rancher/shell/config/*"
+        "../../node_modules/dashboard-shell-shell/config/*"
       ],
       "@shell/store/*": [
-        "../../node_modules/@rancher/shell/store/*"
+        "../../node_modules/dashboard-shell-shell/store/*"
       ],
       "@shell/plugins/*": [
-        "../../node_modules/@rancher/shell/plugins/*"
+        "../../node_modules/dashboard-shell-shell/plugins/*"
       ],
       "@shell/utils/*": [
-        "../../node_modules/@rancher/shell/utils/*"
+        "../../node_modules/dashboard-shell-shell/utils/*"
       ],
       "@shell/models/*": [
-        "../../node_modules/@rancher/shell/models/*"
+        "../../node_modules/dashboard-shell-shell/models/*"
       ],
       "@shell/mixins/*": [
-        "../../node_modules/@rancher/shell/mixins/*"
+        "../../node_modules/dashboard-shell-shell/mixins/*"
       ],
       "@pkg/*": [
         "./*"
@@ -56,8 +56,8 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.vue",
-    "../../node_modules/@rancher/shell/types/*.d.ts",
-    "../../node_modules/@rancher/shell/core/types.ts"
+    "../../node_modules/dashboard-shell-shell/types/*.d.ts",
+    "../../node_modules/dashboard-shell-shell/core/types.ts"
   ],
   "exclude": [
     "node_modules"

package/pkg/vue.config.js

@@ -117,7 +117,7 @@ module.exports = function(dir) {
         if (p.use) {
           p.use.forEach((u) => {
             if (u.loader.includes('babel-loader')) {
-              p.exclude = /node_modules\/(?!@rancher\/shell\/).*/;
+              p.exclude = /node_modules\/(?!dashboard-shell-shell\/).*/;
             }
           });
         }