dashboard-shell-shell 0.0.4 → 0.0.1000000000001124

package/package.json

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

package/pages/auth/login.vue

@@ -328,15 +328,9 @@ export default {
       {{ `${vendor} - ${t('login.login')}` }}
     </TabTitle> -->
     <div class="row gutless mb-20">
-      <!-- <img :src="imgLeft" alt="" class="col span-7"/> -->
       <div class="col span-7 img-left"></div>
       <div class="col span-5 p-20">
-        <!-- <p class="text-center">
-          {{ t('login.howdy') }}
-        </p>
-        <h1 class="text-center login-welcome">
-          {{ t('login.welcome', {vendor}) }}
-        </h1> -->
+
         <div class="logo-login" :style="{ 'marginBottom': errorToDisplay? '0px': '30px'}">
           <img
           src="../../assets/images/login-logo.svg"
@@ -353,18 +347,6 @@ export default {
             :label="errorToDisplay"
             color="error"
           />
-          <!-- <h4
-            v-else-if="loggedOut"
-            class="text-success text-center"
-          >
-            {{ loggedOutSuccessMsg }}
-          </h4>
-          <h4
-            v-else-if="timedOut"
-            class="text-error text-center"
-          >
-            {{ t('login.loginAgain') }}
-          </h4> -->
         </div>
         <div
           v-if="firstLogin"
@@ -537,9 +519,9 @@ export default {
           v-if="showLocaleSelector && hasMultipleLocales && !isHarvester"
           class="locale-selector"
         >
-          <LocaleSelector
+          <!-- <LocaleSelector
             mode="login"
-          />
+          /> -->
         </div>
         <div class="copyright">Copyright 2019-2025 HCI</div>
       </div>
@@ -548,6 +530,9 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .login-username {
+    
+  }
   .login {
     overflow: hidden;
     padding: 0px 10%;
@@ -664,7 +649,7 @@ export default {
     }
     &:deep() .addon{
       position: absolute;
-      top: 16px;
+      top: 16px !important;
       right: 24px;
     }
   }
@@ -682,6 +667,7 @@ export default {
     height: 50px;
     padding-left: 50px;
     font-size: 14px;
+    color: #333;
     background-color: #fff;
   }
 }

package/pages/c/_cluster/auth/roles/index.vue

@@ -160,17 +160,6 @@ export default {
           {{ t('auth.roleTemplate') }}
         </h1>
       </div>
-      <div class="actions-container">
-        <div class="actions">
-          <router-link
-            v-if="canCreate"
-            :to="createLocation"
-            class="btn role-primary"
-          >
-            {{ createLabel }}
-          </router-link>
-        </div>
-      </div>
     </header>
     <Tabbed>
       <Tab
@@ -182,7 +171,22 @@ export default {
         <ResourceTable
           :schema="tabs[GLOBAL].schema"
           :rows="globalResources"
-        />
+          :main-button-visible="true"
+        >
+          <template #extraActions>
+            <div class="actions-container">
+              <div class="actions">
+                <router-link
+                  v-if="canCreate"
+                  :to="createLocation"
+                  class="btn role-primary"
+                >
+                  {{ createLabel }}
+                </router-link>
+              </div>
+            </div>
+          </template>
+        </ResourceTable>
       </Tab>
 
       <Tab
@@ -195,7 +199,22 @@ export default {
           :schema="tabs[CLUSTER].schema"
           :headers="tabs[CLUSTER].headers"
           :rows="clusterResources"
-        />
+          :main-button-visible="true"
+        >
+          <template #extraActions>
+            <div class="actions-container">
+              <div class="actions">
+                <router-link
+                  v-if="canCreate"
+                  :to="createLocation"
+                  class="btn role-primary"
+                >
+                  {{ createLabel }}
+                </router-link>
+              </div>
+            </div>
+          </template>
+        </ ResourceTable>
       </Tab>
 
       <Tab
@@ -208,7 +227,22 @@ export default {
           :schema="tabs[PROJECT].schema"
           :headers="tabs[PROJECT].headers"
           :rows="namespaceResources"
-        />
+          :main-button-visible="true"
+        >
+          <template #extraActions>
+            <div class="actions-container">
+              <div class="actions">
+                <router-link
+                  v-if="canCreate"
+                  :to="createLocation"
+                  class="btn role-primary"
+                >
+                  {{ createLabel }}
+                </router-link>
+              </div>
+            </div>
+          </template>
+        </ ResourceTable>
       </Tab>
     </Tabbed>
   </div>

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

@@ -195,129 +195,177 @@ export default {
 </script>
 
 <template>
+
+  <!-- 如果正在获取数据，显示加载组件 -->
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
+
+  <!-- 否则显示主要内容 -->
+  <div style="padding: 20px 20px 100px;" v-else>
+    <!-- 页面主标题 -->
     <h1 class="mb-20">
       {{ t('banner.label') }}
     </h1>
     <div>
+
+      <!-- 描述标签 -->
       <label class="text-label">
         {{ t(`advancedSettings.descriptions.${ 'ui-banners' }`, {}, true) }}
       </label>
 
-      <!-- Header Settings -->
-      <h2 class="mt-40 mb-10 setting-title">
-        {{ t('banner.headerBanner') }}
-        <i
+      <!-- ===============================
+           Header Banner（页头横幅设置）
+           =============================== -->
+      <div class="mt-20" style="padding: 20px;border: 1px solid var(--nav-border);">
+        <h2 class="mb-20 setting-title">
+          {{ t('banner.headerBanner') }}
+
+          <!-- 如果是单独配置的横幅，则显示锁图标 -->
+          <i
+            v-if="!!uiBannerIndividual.bannerHeader"
+            class="icon icon-lock"
+          />
+        </h2>
+
+        <!-- 如果是单独配置，提示用户这是个独立设置 -->
+        <div
           v-if="!!uiBannerIndividual.bannerHeader"
-          class="icon icon-lock"
-        />
-      </h2>
-      <div
-        v-if="!!uiBannerIndividual.bannerHeader"
-        class="row mb-10"
-      >
-        <Banner
-          color="warning"
-          class="mt-0"
-          :label="t('banner.individualSetting', {name: 'ui-banner-header'}, true)"
-        />
-      </div>
-      <div class="row mb-20">
-        <div class="col span-6">
-          <Checkbox
-            :disabled="!!uiBannerIndividual.bannerHeader"
-            :value="bannerVal.showHeader === 'true'"
-            :label="t('banner.showHeader')"
-            :mode="mode"
-            @update:value="e=> bannerVal.showHeader=e.toString()"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-header'}, true)"
           />
         </div>
-      </div>
-      <BannerSettings
-        v-model:value="bannerVal"
-        banner-type="bannerHeader"
-        :mode="headerMode"
-      />
 
-      <!-- Footer settings -->
-      <h2 class="mt-40 mb-10 setting-title">
-        {{ t('banner.footerBanner') }}
-        <i
-          v-if="!!uiBannerIndividual.bannerFooter"
-          class="icon icon-lock"
-        />
-      </h2>
-      <div
-        v-if="!!uiBannerIndividual.bannerFooter"
-        class="row mb-10"
-      >
-        <Banner
-          color="warning"
-          class="mt-0"
-          :label="t('banner.individualSetting', {name: 'ui-banner-footer'}, true)"
+        <!-- 是否显示 Header Banner 的开关 -->
+        <div class="row mb-20">
+          <div class="col span-6">
+            <Checkbox
+              :disabled="!!uiBannerIndividual.bannerHeader"
+              :value="bannerVal.showHeader === 'true'"
+              :label="t('banner.showHeader')"
+              :mode="mode"
+              @update:value="e=> bannerVal.showHeader=e.toString()"
+            />
+          </div>
+        </div>
+
+        <!-- 头部横幅的详细设置组件 -->
+        <BannerSettings
+          v-model:value="bannerVal"
+          banner-type="bannerHeader"
+          :mode="headerMode"
         />
       </div>
-      <div class="row mb-20">
-        <div class="col span-6">
-          <Checkbox
-            :disabled="!!uiBannerIndividual.bannerFooter"
-            :value="bannerVal.showFooter === 'true'"
-            :label="t('banner.showFooter')"
-            :mode="mode"
-            @update:value="e=>bannerVal.showFooter = e.toString()"
+       <!-- ===============================
+           Footer Banner（页脚横幅设置）
+           =============================== -->
+      <div class="mt-20" style="padding: 20px;border: 1px solid var(--nav-border);">
+        <h2 class="mb-20 setting-title">
+          {{ t('banner.footerBanner') }}
+
+          <!-- 如果是单独配置的横幅，则显示锁图标 -->
+          <i
+            v-if="!!uiBannerIndividual.bannerFooter"
+            class="icon icon-lock"
+          />
+        </h2>
+
+        <!-- 如果是单独配置，提示用户这是个独立设置 -->
+        <div
+          v-if="!!uiBannerIndividual.bannerFooter"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-footer'}, true)"
           />
         </div>
-      </div>
-      <BannerSettings
-        v-model:value="bannerVal"
-        banner-type="bannerFooter"
-        :mode="footerMode"
-      />
 
-      <!-- Consent settings -->
-      <h2 class="mt-40 mb-10 setting-title">
-        {{ t('banner.loginScreenBanner') }}
-        <i
-          v-if="!!uiBannerIndividual.bannerConsent"
-          class="icon icon-lock"
-        />
-      </h2>
-      <div
-        v-if="!!uiBannerIndividual.bannerConsent"
-        class="row mb-10"
-      >
-        <Banner
-          color="warning"
-          class="mt-0"
-          :label="t('banner.individualSetting', {name: 'ui-banner-login-consent'}, true)"
+        <!-- 是否显示 Footer Banner 的开关 -->
+        <div class="row">
+          <div class="col span-6">
+            <Checkbox
+              :disabled="!!uiBannerIndividual.bannerFooter"
+              :value="bannerVal.showFooter === 'true'"
+              :label="t('banner.showFooter')"
+              :mode="mode"
+              @update:value="e=>bannerVal.showFooter = e.toString()"
+            />
+          </div>
+        </div>
+
+        <!-- 页脚横幅的详细设置组件 -->
+        <BannerSettings
+          v-model:value="bannerVal"
+          banner-type="bannerFooter"
+          :mode="footerMode"
         />
       </div>
-      <div class="row mb-20">
-        <div class="col span-6">
-          <Checkbox
-            :disabled="!!uiBannerIndividual.bannerConsent"
-            :value="bannerVal.showConsent === 'true'"
-            :label="t('banner.showConsent')"
-            :mode="mode"
-            @update:value="e => bannerVal.showConsent = e.toString()"
+
+      <div class="mt-20" style="padding: 20px;border: 1px solid var(--nav-border);">
+      <!-- ===============================
+           Consent Banner（登录界面同意横幅设置）
+           =============================== -->
+        <h2 class="mb-20 setting-title">
+          {{ t('banner.loginScreenBanner') }}
+          <i
+            v-if="!!uiBannerIndividual.bannerConsent"
+            class="icon icon-lock"
+          />
+        </h2>
+
+        <!-- 如果是单独配置，提示用户这是个独立设置 -->
+        <div
+          v-if="!!uiBannerIndividual.bannerConsent"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-login-consent'}, true)"
           />
         </div>
+
+        <!-- 是否显示 Consent Banner 的开关 -->
+        <div class="row mb-20">
+          <div class="col span-6">
+            <Checkbox
+              :disabled="!!uiBannerIndividual.bannerConsent"
+              :value="bannerVal.showConsent === 'true'"
+              :label="t('banner.showConsent')"
+              :mode="mode"
+              @update:value="e => bannerVal.showConsent = e.toString()"
+            />
+          </div>
+        </div>
+
+        <!-- 登录界面同意横幅的详细设置组件 -->
+        <BannerSettings
+          v-model:value="bannerVal"
+          banner-type="bannerConsent"
+          :mode="consentMode"
+        />
+      </div>
+
+      <!-- ===============================
+           登录错误通知设置
+           =============================== -->
+      <div class="mt-20" style="padding: 20px;border: 1px solid var(--nav-border);">
+        <h2 class="mb-20 setting-title">
+          {{ t('notifications.loginError.header') }}
+        </h2>
+        <NotificationSettings
+          v-model:value="bannerVal.loginError"
+          :mode="mode"
+          :label="t('notifications.loginError.messageLabel')"
+        />
       </div>
-      <BannerSettings
-        v-model:value="bannerVal"
-        banner-type="bannerConsent"
-        :mode="consentMode"
-      />
-      <h2 class="mt-40 mb-40">
-        {{ t('notifications.loginError.header') }}
-      </h2>
-      <NotificationSettings
-        v-model:value="bannerVal.loginError"
-        :mode="mode"
-        :label="t('notifications.loginError.messageLabel')"
-      />
     </div>
+
+    <!-- 全局错误提示 -->
     <template
       v-for="(err, i) in errors"
       :key="i"
@@ -327,9 +375,11 @@ export default {
         :label="err"
       />
     </template>
-    <div v-if="mode === 'edit'">
+
+    <!-- 编辑模式下显示“应用”按钮 -->
+    <div class="action-btn" v-if="mode === 'edit'">
       <AsyncButton
-        class="pull-right mt-20"
+        class="pull-right"
         mode="apply"
         @click="save"
       />
@@ -338,6 +388,16 @@ 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%;
@@ -353,6 +413,9 @@ export default {
 h2.setting-title {
   align-items: center;
   display: flex;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
 
   > i {
     padding-left: 5px;