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

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, 'rgb(24, 144, 255)'),
-      uiLinkColorSetting:            fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, 'rgb(24, 144, 255)'),
+      uiColorSetting:                fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
+      uiLinkColorSetting:            fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
       uiFaviconSetting:              fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
@@ -249,358 +249,329 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else style="padding-bottom:60px;">
-    
-    <!-- 面包屑 -->
-    <div class="excram-list">全局设置 / <span style="color: #1890FF;">界面</span></div>
+  <div v-else>
     <h1 class="mb-20">
       <TabTitle>{{ t('branding.label') }}</TabTitle>
     </h1>
-    <div style="margin-bottom: 16px;">用于统一配置系统形象与视觉主题，可管理登录页与操作界面的Logo、背景、色彩等核心元素，实现全局自定义UI界面。</div>
-    <div data-v-d7fbd5e8="" style="width: 110%; height: 1px; background-color: rgb(215, 215, 215); margin-bottom: 16px; margin-left: -20px; margin-right: -20px;"></div>
     <TypeDescription resource="branding" />
     <div>
-      <!-- 系统名称 -->
-      <div class="row">
-        <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="'名称'"
+      <div class="row mb-20">
+        <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')"
               :mode="mode"
-              :maxlength="100"
+              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"
+          >
+            <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>
 
-      <!-- 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
-          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>
+      <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>
-          <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
+            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"
             >
-              <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
-              <img
-                class="img-preview"
-                data-testid="branding-logo-dark-preview"
-                :src="uiLogoDark ? uiLogoDark : uiLogoLight"
-              >
-            </SimpleBox>
+          </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>
 
-      <!-- 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')"
+      <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')"
               :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @update:value="updateBranding($event, 'uiLoginBackgroundLight')"
             />
           </div>
-          <div
-            v-if="customizeLinkColor"
-            class="row mt-20 mb-20"
+          <SimpleBox
+            v-if="uiLoginBackgroundLight || uiLoginBackgroundDark"
+            class="theme-light mb-10"
           >
-            <ColorInput
-              v-model:value="uiLinkColor"
-              class="col"
-              component-testid="link"
+            <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')"
             />
-            <span class="col link-example">
-              <a :style="customLinkColor">
-                {{ t('branding.linkColor.example') }}
-              </a>
-            </span>
           </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')"
+            />
+          </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"
@@ -611,10 +582,10 @@ export default {
         :label="err"
       />
     </template>
-    <div class="action-btn" v-if="mode === 'edit'">
+    <div v-if="mode === 'edit'">
       <AsyncButton
         component-testid="branding-apply"
-        class="pull-right"
+        class="pull-right mt-20"
         mode="apply"
         @click="save"
       />
@@ -623,16 +594,6 @@ 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;
@@ -684,13 +645,4 @@ export default {
     left: 10px;
   }
 }
-h3 {
-  font-size: 14px;
-}
-.excram-list{
-  font-size: 14px;
-  line-height: 22px;
-  margin-bottom: 20px;
-  font-family: 'Microsoft YaHei';
-}
 </style>