dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

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

@@ -34,8 +34,8 @@ export default {
       uiBannerLightSetting:          fetchOrCreateSetting(this.$store, SETTING.BANNER_LIGHT, ''),
       uiLoginBackgroundDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGIN_BACKGROUND_DARK, ''),
       uiLoginBackgroundLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGIN_BACKGROUND_LIGHT, ''),
-      uiColorSetting:                fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
-      uiLinkColorSetting:            fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
+      uiColorSetting:                fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, 'rgb(24, 144, 255)'),
+      uiLinkColorSetting:            fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, 'rgb(24, 144, 255)'),
       uiFaviconSetting:              fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
@@ -249,329 +249,357 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
+  <div v-else style="padding-bottom:60px;">
+    
+    <!-- 面包屑 -->
+    <div class="excram-list">全局设置 / <span style="color: #1890FF;">界面</span></div>
     <h1 class="mb-20">
       <TabTitle>{{ t('branding.label') }}</TabTitle>
     </h1>
+    <div style="margin-bottom: 20px;">用于统一配置系统形象与视觉主题，可管理登录页与操作界面的Logo、背景、色彩等核心元素，实现全局自定义UI界面。</div>
     <TypeDescription resource="branding" />
     <div>
+      <!-- 系统名称 -->
       <div class="row">
-        <div class="col span-6">
-          <LabeledInput
-            v-model:value="uiPLSetting.value"
-            :label="t('branding.uiPL.label')"
-            :mode="mode"
-            :maxlength="100"
-          />
-        </div>
-      </div>
-      <h3 class="mt-20 mb-5 pb-5">
-        {{ t('branding.logos.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t('branding.logos.tip', {}, true) }}
-      </label>
-
-      <div class="row mt-10 mb-20">
-        <Checkbox
-          v-model:value="customizeLogo"
-          :label="t('branding.logos.useCustom')"
-          :mode="mode"
-        />
-      </div>
-
-      <div
-        v-if="customizeLogo"
-        class="row mb-20"
-      >
-        <div class="col preview-container logo span-6">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="20000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.logos.uploadLight')"
-              :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiLogoLight')"
-            />
-          </div>
-          <SimpleBox
-            v-if="uiLogoLight || uiLogoDark"
-            class="theme-light  mb-10"
-          >
-            <label class="text-muted">{{ t('branding.logos.lightPreview') }}</label>
-            <img
-              class="img-preview"
-              data-testid="branding-logo-light-preview"
-              :src="uiLogoLight ? uiLogoLight : uiLogoDark"
-            >
-          </SimpleBox>
-        </div>
-        <div class="col preview-container logo span-6">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="20000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.logos.uploadDark')"
+        <div class="mb-20 pl-20 pt-20" style="border: 1px solid var(--nav-border);width: 100%;">
+          <h3 class="mb-20">系统名称</h3>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="uiPLSetting.value"
+              :label="'名称'"
               :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiLogoDark')"
+              :maxlength="100"
             />
           </div>
-          <SimpleBox
-            v-if="uiLogoDark || uiLogoLight"
-            class="theme-dark  mb-10"
-          >
-            <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
-            <img
-              class="img-preview"
-              data-testid="branding-logo-dark-preview"
-              :src="uiLogoDark ? uiLogoDark : uiLogoLight"
-            >
-          </SimpleBox>
         </div>
       </div>
 
-      <h3 class="mt-20 mb-5 pb-5">
-        {{ t('branding.banner.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t('branding.banner.tip', {}, true) }}
-      </label>
-
-      <div class="row mt-10 mb-20">
-        <Checkbox
-          v-model:value="customizeBanner"
-          :label="t('branding.banner.useCustom')"
-          :mode="mode"
-        />
-      </div>
-
-      <div
-        v-if="customizeBanner"
-        class="row mb-20"
-      >
-        <div class="col preview-container banner span-6">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="200000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.banner.uploadLight')"
-              :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiBannerLight')"
-            />
-          </div>
-          <SimpleBox
-            v-if="uiBannerLight || uiBannerDark"
-            class="theme-light mb-10"
-          >
-            <label class="text-muted">{{ t('branding.banner.lightPreview') }}</label>
-            <img
-              class="img-preview"
-              data-testid="branding-banner-light-preview"
-              :src="uiBannerLight ? uiBannerLight : uiBannerDark"
-            >
-          </SimpleBox>
+      <!-- Logo -->
+      <div class="mb-20 pl-20" style="border: 1px solid var(--nav-border);">
+        <h3 class="mt-20 mb-20">
+          {{ t('branding.logos.label') }}
+        </h3>
+        <label class="text-label">
+          {{ t('branding.logos.tip', {}, true) }}
+        </label>
+  
+        <div class="row mt-10 mb-20">
+          <Checkbox
+            v-model:value="customizeLogo"
+            :label="t('branding.logos.useCustom')"
+            :mode="mode"
+          />
         </div>
-        <div class="col preview-container banner span-6">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="200000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.banner.uploadDark')"
-              :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiBannerDark')"
-            />
+  
+        <div
+          v-if="customizeLogo"
+          class="row mb-20"
+        >
+          <div class="col preview-container logo span-6">
+            <div class="mb-10">
+              <FileImageSelector
+                :byte-limit="20000"
+                :read-as-data-url="true"
+                class="role-secondary"
+                :label="t('branding.logos.uploadLight')"
+                :mode="mode"
+                accept="image/jpeg,image/png,image/svg+xml"
+                @error="setError"
+                @update:value="updateBranding($event, 'uiLogoLight')"
+              />
+            </div>
+            <SimpleBox
+              v-if="uiLogoLight || uiLogoDark"
+              class="theme-light  mb-10"
+            >
+              <label class="text-muted">{{ t('branding.logos.lightPreview') }}</label>
+              <img
+                class="img-preview"
+                data-testid="branding-logo-light-preview"
+                :src="uiLogoLight ? uiLogoLight : uiLogoDark"
+              >
+            </SimpleBox>
           </div>
-          <SimpleBox
-            v-if="uiBannerDark || uiBannerLight"
-            class="theme-dark  mb-10"
-          >
-            <label class="text-muted">{{ t('branding.banner.darkPreview') }}</label>
-            <img
-              class="img-preview"
-              data-testid="branding-banner-dark-preview"
-              :src="uiBannerDark ? uiBannerDark : uiBannerLight"
+          <div class="col preview-container logo span-6">
+            <div class="mb-10">
+              <FileImageSelector
+                :byte-limit="20000"
+                :read-as-data-url="true"
+                class="role-secondary"
+                :label="t('branding.logos.uploadDark')"
+                :mode="mode"
+                accept="image/jpeg,image/png,image/svg+xml"
+                @error="setError"
+                @update:value="updateBranding($event, 'uiLogoDark')"
+              />
+            </div>
+            <SimpleBox
+              v-if="uiLogoDark || uiLogoLight"
+              class="theme-dark  mb-10"
             >
-          </SimpleBox>
+              <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
+              <img
+                class="img-preview"
+                data-testid="branding-logo-dark-preview"
+                :src="uiLogoDark ? uiLogoDark : uiLogoLight"
+              >
+            </SimpleBox>
+          </div>
         </div>
       </div>
 
-      <h3 class="mt-20 mb-5 pb-5">
-        {{ t('branding.loginBackground.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t('branding.loginBackground.tip', {}, true) }}
-      </label>
-
-      <div class="row mt-10 mb-20">
-        <Checkbox
-          v-model:value="customizeLoginBackground"
-          :label="t('branding.loginBackground.useCustom')"
-          :mode="mode"
-        />
-      </div>
-
-      <div
-        v-if="customizeLoginBackground"
-        class="row mb-20"
-      >
-        <div class="col preview-container login-background span-6">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="200000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.loginBackground.uploadLight')"
+      <!-- Banner -->
+       <div class="mb-20 pl-20" style="border: 1px solid var(--nav-border);">
+         <h3 class="mt-20 mb-20">
+           {{ t('branding.banner.label') }}
+         </h3>
+         <label class="text-label">
+           {{ t('branding.banner.tip', {}, true) }}
+         </label>
+   
+         <div class="row mt-10 mb-20">
+           <Checkbox
+             v-model:value="customizeBanner"
+             :label="t('branding.banner.useCustom')"
+             :mode="mode"
+           />
+         </div>
+   
+         <div
+           v-if="customizeBanner"
+           class="row mb-20"
+         >
+           <div class="col preview-container banner span-6">
+             <div class="mb-10">
+               <FileImageSelector
+                 :byte-limit="200000"
+                 :read-as-data-url="true"
+                 class="role-secondary"
+                 :label="t('branding.banner.uploadLight')"
+                 :mode="mode"
+                 accept="image/jpeg,image/png,image/svg+xml"
+                 @error="setError"
+                 @update:value="updateBranding($event, 'uiBannerLight')"
+               />
+             </div>
+             <SimpleBox
+               v-if="uiBannerLight || uiBannerDark"
+               class="theme-light mb-10"
+             >
+               <label class="text-muted">{{ t('branding.banner.lightPreview') }}</label>
+               <img
+                 class="img-preview"
+                 data-testid="branding-banner-light-preview"
+                 :src="uiBannerLight ? uiBannerLight : uiBannerDark"
+               >
+             </SimpleBox>
+           </div>
+           <div class="col preview-container banner span-6">
+             <div class="mb-10">
+               <FileImageSelector
+                 :byte-limit="200000"
+                 :read-as-data-url="true"
+                 class="role-secondary"
+                 :label="t('branding.banner.uploadDark')"
+                 :mode="mode"
+                 accept="image/jpeg,image/png,image/svg+xml"
+                 @error="setError"
+                 @update:value="updateBranding($event, 'uiBannerDark')"
+               />
+             </div>
+             <SimpleBox
+               v-if="uiBannerDark || uiBannerLight"
+               class="theme-dark  mb-10"
+             >
+               <label class="text-muted">{{ t('branding.banner.darkPreview') }}</label>
+               <img
+                 class="img-preview"
+                 data-testid="branding-banner-dark-preview"
+                 :src="uiBannerDark ? uiBannerDark : uiBannerLight"
+               >
+             </SimpleBox>
+           </div>
+         </div>
+       </div>
+
+      <!-- Login Background -->
+       <div class="mb-20 pl-20" style="border: 1px solid var(--nav-border);">
+         <h3 class="mt-20 mb-20">
+           {{ t('branding.loginBackground.label') }}
+         </h3>
+         <label class="text-label">
+           {{ t('branding.loginBackground.tip', {}, true) }}
+         </label>
+   
+         <div class="row mt-10 mb-20">
+           <Checkbox
+             v-model:value="customizeLoginBackground"
+             :label="t('branding.loginBackground.useCustom')"
+             :mode="mode"
+           />
+         </div>
+   
+         <div
+           v-if="customizeLoginBackground"
+           class="row mb-20"
+         >
+           <div class="col preview-container login-background span-6">
+             <div class="mb-10">
+               <FileImageSelector
+                 :byte-limit="200000"
+                 :read-as-data-url="true"
+                 class="role-secondary"
+                 :label="t('branding.loginBackground.uploadLight')"
+                 :mode="mode"
+                 accept="image/jpeg,image/png,image/svg+xml"
+                 @error="setError"
+                 @update:value="updateBranding($event, 'uiLoginBackgroundLight')"
+               />
+             </div>
+             <SimpleBox
+               v-if="uiLoginBackgroundLight || uiLoginBackgroundDark"
+               class="theme-light mb-10"
+             >
+               <label class="text-muted">{{ t('branding.loginBackground.lightPreview') }}</label>
+               <img
+                 class="img-preview"
+                 data-testid="branding-login-background-light-preview"
+                 :src="uiLoginBackgroundLight ? uiLoginBackgroundLight : uiLoginBackgroundDark"
+               >
+             </SimpleBox>
+           </div>
+           <div class="col preview-container login-background span-6">
+             <div class="mb-10">
+               <FileImageSelector
+                 :byte-limit="200000"
+                 :read-as-data-url="true"
+                 class="role-secondary"
+                 :label="t('branding.loginBackground.uploadDark')"
+                 :mode="mode"
+                 accept="image/jpeg,image/png,image/svg+xml"
+                 @error="setError"
+                 @update:value="updateBranding($event, 'uiLoginBackgroundDark')"
+               />
+             </div>
+             <SimpleBox
+               v-if="uiLoginBackgroundDark || uiLoginBackgroundLight"
+               class="theme-dark  mb-10"
+             >
+               <label class="text-muted">{{ t('branding.loginBackground.darkPreview') }}</label>
+               <img
+                 class="img-preview"
+                 data-testid="branding-login-background-dark-preview"
+                 :src="uiLoginBackgroundDark ? uiLoginBackgroundDark : uiLoginBackgroundLight"
+               >
+             </SimpleBox>
+           </div>
+         </div>
+       </div>
+
+      <!-- 网站图标 -->
+       <div class="mb-20 pl-20" style="border: 1px solid var(--nav-border);">
+         <h3 class="mt-20 mb-20">
+           {{ t('branding.favicon.label') }}
+         </h3>
+         <label class="text-label">
+           {{ t('branding.favicon.tip', {}, true) }}
+         </label>
+   
+         <div class="row mt-10 mb-20">
+           <Checkbox
+             v-model:value="customizeFavicon"
+             :label="t('branding.favicon.useCustom')"
+             :mode="mode"
+           />
+         </div>
+   
+         <div
+           v-if="customizeFavicon"
+           class="row mb-20"
+         >
+           <div class="col favicon-container span-12">
+             <div class="mb-10">
+               <FileImageSelector
+                 :byte-limit="20000"
+                 :read-as-data-url="true"
+                 class="role-secondary"
+                 :label="t('branding.favicon.upload')"
+                 :mode="mode"
+                 accept="image/jpeg,image/png,image/svg+xml"
+                 @error="setError"
+                 @update:value="updateBranding($event, 'uiFavicon')"
+               />
+             </div>
+             <SimpleBox v-if="uiFavicon">
+               <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
+               <img
+                 class="favicon-preview"
+                 data-testid="branding-favicon-preview"
+                 :src="uiFavicon"
+               >
+             </SimpleBox>
+           </div>
+         </div>
+       </div>
+
+       <!-- 主题色 -->
+       <div class="mb-20 pl-20 pb-20" style="border: 1px solid var(--nav-border);">
+         <h3 class="mt-20 mb-20">
+           {{ t('branding.color.label') }}
+         </h3>
+         <label class="text-label">
+           {{ t('branding.color.tip', {}, true) }}
+         </label>
+         <div class="row mt-20">
+           <Checkbox
+             v-model:value="customizeColor"
+             :label="t('branding.color.useCustom')"
+             :mode="mode"
+           />
+         </div>
+         <div
+           v-if="customizeColor"
+           class="row mt-20 mb-20"
+         >
+           <ColorInput
+             v-model:value="uiColor"
+             component-testid="primary"
+           />
+         </div>
+       </div>
+
+       <!-- 链接颜色 -->
+        <div class="mb-20 pl-20 pb-20" style="border: 1px solid var(--nav-border);">
+          <h3 class="mt-20 mb-20">
+            {{ t('branding.linkColor.label') }}
+          </h3>
+          <label class="text-label">
+            {{ t('branding.linkColor.tip', {}, true) }}
+          </label>
+          <div class="row mt-20">
+            <Checkbox
+              v-model:value="customizeLinkColor"
+              :label="t('branding.linkColor.useCustom')"
               :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiLoginBackgroundLight')"
             />
           </div>
-          <SimpleBox
-            v-if="uiLoginBackgroundLight || uiLoginBackgroundDark"
-            class="theme-light mb-10"
+          <div
+            v-if="customizeLinkColor"
+            class="row mt-20 mb-20"
           >
-            <label class="text-muted">{{ t('branding.loginBackground.lightPreview') }}</label>
-            <img
-              class="img-preview"
-              data-testid="branding-login-background-light-preview"
-              :src="uiLoginBackgroundLight ? uiLoginBackgroundLight : uiLoginBackgroundDark"
-            >
-          </SimpleBox>
-        </div>
-        <div class="col preview-container login-background span-6">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="200000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.loginBackground.uploadDark')"
-              :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiLoginBackgroundDark')"
-            />
-          </div>
-          <SimpleBox
-            v-if="uiLoginBackgroundDark || uiLoginBackgroundLight"
-            class="theme-dark  mb-10"
-          >
-            <label class="text-muted">{{ t('branding.loginBackground.darkPreview') }}</label>
-            <img
-              class="img-preview"
-              data-testid="branding-login-background-dark-preview"
-              :src="uiLoginBackgroundDark ? uiLoginBackgroundDark : uiLoginBackgroundLight"
-            >
-          </SimpleBox>
-        </div>
-      </div>
-
-      <h3 class="mt-20 mb-5 pb-5">
-        {{ t('branding.favicon.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t('branding.favicon.tip', {}, true) }}
-      </label>
-
-      <div class="row mt-10 mb-20">
-        <Checkbox
-          v-model:value="customizeFavicon"
-          :label="t('branding.favicon.useCustom')"
-          :mode="mode"
-        />
-      </div>
-
-      <div
-        v-if="customizeFavicon"
-        class="row mb-20"
-      >
-        <div class="col favicon-container span-12">
-          <div class="mb-10">
-            <FileImageSelector
-              :byte-limit="20000"
-              :read-as-data-url="true"
-              class="role-secondary"
-              :label="t('branding.favicon.upload')"
-              :mode="mode"
-              accept="image/jpeg,image/png,image/svg+xml"
-              @error="setError"
-              @update:value="updateBranding($event, 'uiFavicon')"
+            <ColorInput
+              v-model:value="uiLinkColor"
+              class="col"
+              component-testid="link"
             />
+            <span class="col link-example">
+              <a :style="customLinkColor">
+                {{ t('branding.linkColor.example') }}
+              </a>
+            </span>
           </div>
-          <SimpleBox v-if="uiFavicon">
-            <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
-            <img
-              class="favicon-preview"
-              data-testid="branding-favicon-preview"
-              :src="uiFavicon"
-            >
-          </SimpleBox>
         </div>
-      </div>
 
-      <h3 class="mt-40 mb-5 pb-0">
-        {{ t('branding.color.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t('branding.color.tip', {}, true) }}
-      </label>
-      <div class="row mt-20">
-        <Checkbox
-          v-model:value="customizeColor"
-          :label="t('branding.color.useCustom')"
-          :mode="mode"
-        />
-      </div>
-      <div
-        v-if="customizeColor"
-        class="row mt-20 mb-20"
-      >
-        <ColorInput
-          v-model:value="uiColor"
-          component-testid="primary"
-        />
-      </div>
-
-      <!-- <h3 class="mt-40 mb-5 pb-0">
-        {{ t('branding.linkColor.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t('branding.linkColor.tip', {}, true) }}
-      </label>
-      <div class="row mt-20">
-        <Checkbox
-          v-model:value="customizeLinkColor"
-          :label="t('branding.linkColor.useCustom')"
-          :mode="mode"
-        />
-      </div>
-      <div
-        v-if="customizeLinkColor"
-        class="row mt-20 mb-20"
-      >
-        <ColorInput
-          v-model:value="uiLinkColor"
-          class="col"
-          component-testid="link"
-        />
-        <span class="col link-example">
-          <a :style="customLinkColor">
-            {{ t('branding.linkColor.example') }}
-          </a>
-        </span>
-      </div> -->
     </div>
     <template
       v-for="(err, i) in errors"
@@ -582,10 +610,10 @@ export default {
         :label="err"
       />
     </template>
-    <div v-if="mode === 'edit'">
+    <div class="action-btn" v-if="mode === 'edit'">
       <AsyncButton
         component-testid="branding-apply"
-        class="pull-right mt-20"
+        class="pull-right"
         mode="apply"
         @click="save"
       />
@@ -594,6 +622,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);
+}
+
 .link-example {
   display: flex;
   align-content: center;
@@ -645,4 +683,13 @@ export default {
     left: 10px;
   }
 }
+h3 {
+  font-size: 14px;
+}
+.excram-list{
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 20px;
+  font-family: 'Microsoft YaHei';
+}
 </style>