dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

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

@@ -156,20 +156,11 @@ export default {
   <div v-else>
     <header>
       <div class="title">
+        <div class="excram-list">用户 & 认证 / <span style="color: #1890FF;">角色模板</span></div>
         <h1 class="m-0">
           {{ 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 style="margin: 20px 0;">支持管理员创建与管理不同角色‌，每个角色可预设特定权限集合，可简化用户权限分配流程，提升权限管理的灵活性与安全性。</div>
       </div>
     </header>
     <Tabbed>
@@ -182,7 +173,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 +201,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,8 +229,34 @@ 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>
 </template>
+
+<style lang="scss" scoped>
+
+  .excram-list{
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 20px;
+    font-family: 'Microsoft YaHei';
+  }
+
+</style>

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

@@ -195,129 +195,180 @@ export default {
 </script>
 
 <template>
+
+  <!-- 如果正在获取数据，显示加载组件 -->
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
+
+  <!-- 否则显示主要内容 -->
+  <div style="padding: 20px 20px 100px;" v-else>
+
+    <!-- 面包屑 -->
+    <div class="excram-list">全局设置 / <span style="color: #1890FF;">横幅</span></div>
+    <!-- 页面主标题 -->
     <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 +378,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 +391,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,9 +416,19 @@ export default {
 h2.setting-title {
   align-items: center;
   display: flex;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
 
   > i {
     padding-left: 5px;
   }
 }
+
+.excram-list{
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 20px;
+  font-family: 'Microsoft YaHei';
+}
 </style>