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

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

@@ -249,130 +249,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.bannerHeader') }}
-        <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.bannerFooter') }}
-        <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.bannerConsent') }}
-        <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')"
-        :hidden-aria-described-label="t('notifications.loginError.header')"
-      />
     </div>
+
+    <!-- 全局错误提示 -->
     <template
       v-for="(err, i) in errors"
       :key="i"
@@ -382,9 +432,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"
       />
@@ -393,6 +445,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%;
@@ -408,9 +470,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>