From a9381ab9142d6f8dcf90f4f04b49647ca4408a51 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 11 Jun 2025 17:41:53 +0800
Subject: [PATCH] feat: system-setting

---
 .../auth-setting.ts                           |   0
 .../email-setting.ts                          |   0
 .../platform-source.ts                        |   0
 .../theme.ts                                  |   0
 .../layout/components/sidebar/SidebarItem.vue |   2 +-
 ui/src/router/modules/system.ts               |  32 +-
 ui/src/stores/modules/theme.ts                |   2 +-
 ui/src/stores/modules/user.ts                 |   4 +-
 ui/src/styles/app.scss                        |   4 +
 ui/src/styles/component.scss                  |  23 +
 ui/src/views/authentication/component/CAS.vue |   2 +-
 .../authentication/component/EditModal.vue    |   2 +-
 .../views/authentication/component/LDAP.vue   |   2 +-
 .../views/authentication/component/OAuth2.vue |   2 +-
 .../views/authentication/component/OIDC.vue   |   2 +-
 .../views/authentication/component/SCAN.vue   |   2 +-
 ui/src/views/authentication/index.vue         |  15 +-
 ui/src/views/email/index.vue                  | 155 +++---
 ui/src/views/login/index.vue                  |   2 +-
 ui/src/views/theme/LoginPreview.vue           |   2 +-
 ui/src/views/theme/index.vue                  | 510 +++++++++---------
 21 files changed, 393 insertions(+), 370 deletions(-)
 rename ui/src/api/{systemSettings => system-settings}/auth-setting.ts (100%)
 rename ui/src/api/{systemSettings => system-settings}/email-setting.ts (100%)
 rename ui/src/api/{systemSettings => system-settings}/platform-source.ts (100%)
 rename ui/src/api/{systemSettings => system-settings}/theme.ts (100%)

diff --git a/ui/src/api/systemSettings/auth-setting.ts b/ui/src/api/system-settings/auth-setting.ts
similarity index 100%
rename from ui/src/api/systemSettings/auth-setting.ts
rename to ui/src/api/system-settings/auth-setting.ts
diff --git a/ui/src/api/systemSettings/email-setting.ts b/ui/src/api/system-settings/email-setting.ts
similarity index 100%
rename from ui/src/api/systemSettings/email-setting.ts
rename to ui/src/api/system-settings/email-setting.ts
diff --git a/ui/src/api/systemSettings/platform-source.ts b/ui/src/api/system-settings/platform-source.ts
similarity index 100%
rename from ui/src/api/systemSettings/platform-source.ts
rename to ui/src/api/system-settings/platform-source.ts
diff --git a/ui/src/api/systemSettings/theme.ts b/ui/src/api/system-settings/theme.ts
similarity index 100%
rename from ui/src/api/systemSettings/theme.ts
rename to ui/src/api/system-settings/theme.ts
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index 7632de1b3..04ca08a7f 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -88,7 +88,7 @@ const menuIcon = computed(() => {
     }
   }
   :deep(.el-sub-menu__title) {
-    padding: 13px 12px 13px 16px !important;
+    padding: 13px 12px 13px 10px !important;
     &:hover {
       background: none;
       color: var(--el-color-primary);
diff --git a/ui/src/router/modules/system.ts b/ui/src/router/modules/system.ts
index 1e6bd7858..d3917f93f 100644
--- a/ui/src/router/modules/system.ts
+++ b/ui/src/router/modules/system.ts
@@ -46,7 +46,7 @@ const systemRouter = {
       component: () => import('@/views/role/index.vue'),
     },
     {
-      path:'/system/setting',
+      path: '/system/setting',
       name: 'setting',
       meta: {
         icon: 'app-setting',
@@ -58,13 +58,13 @@ const systemRouter = {
       },
       children: [
         {
-          path: '/system/theme',
+          path: '/system/setting/theme',
           name: 'theme',
           meta: {
             title: 'views.system.theme.title',
-            activeMenu: '/setting',
-            parentPath: '/setting',
-            parentName: 'setting',
+            activeMenu: '/system',
+            parentPath: '/system',
+            parentName: 'system',
             //permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
           },
           component: () => import('@/views/theme/index.vue'),
@@ -74,27 +74,27 @@ const systemRouter = {
           name: 'authentication',
           meta: {
             title: 'views.system.authentication.title',
-            activeMenu: '/setting',
-            parentPath: '/setting',
-            parentName: 'setting',
+            activeMenu: '/system',
+            parentPath: '/system',
+            parentName: 'system',
             //permission: new ComplexPermission(['ADMIN'], ['x-pack'], 'AND')
           },
-          component: () => import('@/views/authentication/index.vue')
+          component: () => import('@/views/authentication/index.vue'),
         },
         {
           path: '/system/email',
           name: 'email',
           meta: {
             title: 'views.system.email.title',
-            activeMenu: '/setting',
-            parentPath: '/setting',
-            parentName: 'setting',
+            activeMenu: '/system',
+            parentPath: '/system',
+            parentName: 'system',
             //permission: new Role('ADMIN')
           },
-          component: () => import('@/views/email/index.vue')
-        }
-      ]
-    }
+          component: () => import('@/views/email/index.vue'),
+        },
+      ],
+    },
   ],
 }
 
diff --git a/ui/src/stores/modules/theme.ts b/ui/src/stores/modules/theme.ts
index 82a444aa7..b3158205a 100644
--- a/ui/src/stores/modules/theme.ts
+++ b/ui/src/stores/modules/theme.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { cloneDeep } from 'lodash'
 import { useElementPlusTheme } from 'use-element-plus-theme'
-import ThemeApi from '@/api/systemSettings/theme'
+import ThemeApi from '@/api/system-settings/theme'
 import type {Ref} from "vue";
 export interface themeStateTypes {
   themeInfo: any
diff --git a/ui/src/stores/modules/user.ts b/ui/src/stores/modules/user.ts
index a1e27a27a..871c4a50d 100644
--- a/ui/src/stores/modules/user.ts
+++ b/ui/src/stores/modules/user.ts
@@ -3,8 +3,8 @@ import { type Ref } from 'vue'
 import type { User } from '@/api/type/user'
 import UserApi from '@/api/user/user'
 import LoginApi from '@/api/user/login'
-import { cloneDeep } from 'lodash'
-import ThemeApi from '@/api/systemSettings/theme'
+import {cloneDeep} from 'lodash'
+import ThemeApi from '@/api/system-settings/theme'
 // import { defaultPlatformSetting } from '@/utils/theme'
 import { useLocalStorage } from '@vueuse/core'
 import { localeConfigKey, getBrowserLang } from '@/locales/index'
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index c7e2a684e..935fceaae 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -395,6 +395,10 @@ h5 {
   background: var(--el-color-success);
 }
 
+.layout-bg {
+  background: var(--app-layout-bg-color);
+}
+
 /*
   标题前带竖线样式
 */
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
index 03e0a0bbe..cc3d8343a 100644
--- a/ui/src/styles/component.scss
+++ b/ui/src/styles/component.scss
@@ -150,3 +150,26 @@
     padding: calc(var(--app-base-px) + 4px) calc(var(--app-base-px) * 2);
   }
 }
+
+// radio-button-group
+.app-radio-button-group {
+  border: 1px solid var(--app-border-color-dark);
+  border-radius: var(--el-border-radius-base);
+  .el-radio-button {
+    padding: 3px;
+  }
+  .el-radio-button__inner {
+    border: none !important;
+    border-radius: var(--el-border-radius-base) !important;
+    padding: 5px 8px;
+    font-weight: 400;
+  }
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: var(--el-color-primary) !important;
+    background: var(--el-color-primary-light-9) !important;
+    border: none !important;
+    box-shadow: none !important;
+    font-weight: 500;
+  }
+}
+
diff --git a/ui/src/views/authentication/component/CAS.vue b/ui/src/views/authentication/component/CAS.vue
index 3a0381b84..f870b9138 100644
--- a/ui/src/views/authentication/component/CAS.vue
+++ b/ui/src/views/authentication/component/CAS.vue
@@ -54,7 +54,7 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
-import authApi from '@/api/systemSettings/auth-setting'
+import authApi from '@/api/system-settings/auth-setting'
 import type { FormInstance, FormRules } from 'element-plus'
 import { t } from '@/locales'
 import { MsgSuccess } from '@/utils/message'
diff --git a/ui/src/views/authentication/component/EditModal.vue b/ui/src/views/authentication/component/EditModal.vue
index 28246a05f..1a75ba9e5 100644
--- a/ui/src/views/authentication/component/EditModal.vue
+++ b/ui/src/views/authentication/component/EditModal.vue
@@ -52,7 +52,7 @@ template
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { ElForm } from 'element-plus'
-import platformApi from '@/api/systemSettings/platform-source'
+import platformApi from '@/api/system-settings/platform-source'
 import { MsgError, MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
 
diff --git a/ui/src/views/authentication/component/LDAP.vue b/ui/src/views/authentication/component/LDAP.vue
index 57e51ddae..23630020b 100644
--- a/ui/src/views/authentication/component/LDAP.vue
+++ b/ui/src/views/authentication/component/LDAP.vue
@@ -79,7 +79,7 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
-import authApi from '@/api/systemSettings/auth-setting'
+import authApi from '@/api/system-settings/auth-setting'
 import type { FormInstance, FormRules } from 'element-plus'
 import { t } from '@/locales'
 import { MsgSuccess } from '@/utils/message'
diff --git a/ui/src/views/authentication/component/OAuth2.vue b/ui/src/views/authentication/component/OAuth2.vue
index ccc65a849..e2c5d0b7d 100644
--- a/ui/src/views/authentication/component/OAuth2.vue
+++ b/ui/src/views/authentication/component/OAuth2.vue
@@ -100,7 +100,7 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue'
-import authApi from '@/api/systemSettings/auth-setting'
+import authApi from '@/api/system-settings/auth-setting'
 import type { FormInstance, FormRules } from 'element-plus'
 import { t } from '@/locales'
 import { MsgSuccess } from '@/utils/message'
diff --git a/ui/src/views/authentication/component/OIDC.vue b/ui/src/views/authentication/component/OIDC.vue
index b8279235e..37c42b179 100644
--- a/ui/src/views/authentication/component/OIDC.vue
+++ b/ui/src/views/authentication/component/OIDC.vue
@@ -97,7 +97,7 @@
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from 'vue'
-import authApi from '@/api/systemSettings/auth-setting'
+import authApi from '@/api/system-settings/auth-setting'
 import type { FormInstance, FormRules } from 'element-plus'
 import { t } from '@/locales'
 import { MsgSuccess } from '@/utils/message'
diff --git a/ui/src/views/authentication/component/SCAN.vue b/ui/src/views/authentication/component/SCAN.vue
index c0ea40655..0246e3d0f 100644
--- a/ui/src/views/authentication/component/SCAN.vue
+++ b/ui/src/views/authentication/component/SCAN.vue
@@ -89,7 +89,7 @@
 import { reactive, ref, onMounted } from 'vue'
 import { copyClick } from '@/utils/clipboard'
 import EditModel from './EditModal.vue'
-import platformApi from '@/api/systemSettings/platform-source'
+import platformApi from '@/api/system-settings/platform-source'
 import { MsgError, MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
 
diff --git a/ui/src/views/authentication/index.vue b/ui/src/views/authentication/index.vue
index 178b9730f..19e8bdd1f 100644
--- a/ui/src/views/authentication/index.vue
+++ b/ui/src/views/authentication/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="authentication-setting p-16-24">
-    <h4>{{ $t('views.system.authentication.title') }}</h4>
+    <h4 class="mb-16">{{ $t('views.system.authentication.title') }}</h4>
+
     <el-tabs v-model="activeName" class="mt-4" @tab-click="handleClick">
       <template v-for="(item, index) in tabList" :key="index">
         <el-tab-pane :label="item.label" :name="item.name">
@@ -29,28 +30,28 @@ const tabList = [
   {
     label: t('views.system.authentication.ldap.title'),
     name: 'LDAP',
-    component: LDAP
+    component: LDAP,
   },
   {
     label: t('views.system.authentication.cas.title'),
     name: 'CAS',
-    component: CAS
+    component: CAS,
   },
   {
     label: t('views.system.authentication.oidc.title'),
     name: 'OIDC',
-    component: OIDC
+    component: OIDC,
   },
   {
     label: t('views.system.authentication.oauth2.title'),
     name: 'OAuth2',
-    component: OAuth2
+    component: OAuth2,
   },
   {
     label: t('views.system.authentication.scanTheQRCode.title'),
     name: 'SCAN',
-    component: SCAN
-  }
+    component: SCAN,
+  },
 ]
 
 function handleClick() {}
diff --git a/ui/src/views/email/index.vue b/ui/src/views/email/index.vue
index 4ba86f837..fb8a243a4 100644
--- a/ui/src/views/email/index.vue
+++ b/ui/src/views/email/index.vue
@@ -1,77 +1,76 @@
 <template>
-  <div class="email-setting">
-    <h4 class="p-16-24">{{ $t('views.system.email.title') }}</h4>
-    <el-scrollbar>
-      <div class="p-24" v-loading="loading">
-        <el-form
-          ref="emailFormRef"
-          :rules="rules"
-          :model="form"
-          label-position="top"
-          require-asterisk-position="right"
-        >
-          <el-form-item :label="$t('views.system.email.smtpHost')" prop="email_host">
-            <el-input
-              v-model="form.email_host"
-              :placeholder="$t('views.system.email.smtpHostPlaceholder')"
-            />
-          </el-form-item>
-          <el-form-item :label="$t('views.system.email.smtpPort')" prop="email_port">
-            <el-input
-              v-model="form.email_port"
-              :placeholder="$t('views.system.email.smtpPortPlaceholder')"
-            />
-          </el-form-item>
-          <el-form-item :label="$t('views.system.email.smtpUser')" prop="email_host_user">
-            <el-input
-              v-model="form.email_host_user"
-              :placeholder="$t('views.system.email.smtpUserPlaceholder')"
-            />
-          </el-form-item>
-          <el-form-item :label="$t('views.system.email.sendEmail')" prop="from_email">
-            <el-input
-              v-model="form.from_email"
-              :placeholder="$t('views.system.email.sendEmailPlaceholder')"
-            />
-          </el-form-item>
-          <el-form-item :label="$t('views.system.password')" prop="email_host_password">
-            <el-input
-              v-model="form.email_host_password"
-              :placeholder="$t('views.system.email.smtpPasswordPlaceholder')"
-              show-password
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox v-model="form.email_use_ssl"
-            >{{ $t('views.system.email.enableSSL') }}
-            </el-checkbox>
-          </el-form-item>
-          <el-form-item>
-            <el-checkbox v-model="form.email_use_tls"
-            >{{ $t('views.system.email.enableTLS') }}
-            </el-checkbox>
-          </el-form-item>
-          <el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
-            {{ $t('views.system.test') }}
-          </el-button>
-        </el-form>
-
-        <div class="text-right">
-          <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
-            {{ $t('common.save') }}
-          </el-button>
+  <div class="email-setting p-16-24">
+    <h4 class="mb-16">{{ $t('views.system.email.title') }}</h4>
+    <el-card style="--el-card-padding: 16px" v-loading="loading">
+      <el-scrollbar>
+        <div class="email-setting__main p-16">
+          <el-form
+            ref="emailFormRef"
+            :rules="rules"
+            :model="form"
+            label-position="top"
+            require-asterisk-position="right"
+          >
+            <el-form-item :label="$t('views.system.email.smtpHost')" prop="email_host">
+              <el-input
+                v-model="form.email_host"
+                :placeholder="$t('views.system.email.smtpHostPlaceholder')"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('views.system.email.smtpPort')" prop="email_port">
+              <el-input
+                v-model="form.email_port"
+                :placeholder="$t('views.system.email.smtpPortPlaceholder')"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('views.system.email.smtpUser')" prop="email_host_user">
+              <el-input
+                v-model="form.email_host_user"
+                :placeholder="$t('views.system.email.smtpUserPlaceholder')"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('views.system.email.sendEmail')" prop="from_email">
+              <el-input
+                v-model="form.from_email"
+                :placeholder="$t('views.system.email.sendEmailPlaceholder')"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('views.system.password')" prop="email_host_password">
+              <el-input
+                v-model="form.email_host_password"
+                :placeholder="$t('views.system.email.smtpPasswordPlaceholder')"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="form.email_use_ssl"
+                >{{ $t('views.system.email.enableSSL') }}
+              </el-checkbox>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="form.email_use_tls"
+                >{{ $t('views.system.email.enableTLS') }}
+              </el-checkbox>
+            </el-form-item>
+            <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading">
+              {{ $t('common.save') }}
+            </el-button>
+            <el-button @click="submit(emailFormRef, 'test')" :disabled="loading">
+              {{ $t('views.system.test') }}
+            </el-button>
+          </el-form>
         </div>
-      </div>
-    </el-scrollbar>
+      </el-scrollbar>
+    </el-card>
   </div>
 </template>
 <script setup lang="ts">
-import {reactive, ref, watch, onMounted} from 'vue'
-import emailApi from '@/api/systemSettings/email-setting'
-import type {FormInstance, FormRules} from 'element-plus'
+import { reactive, ref, watch, onMounted } from 'vue'
+import emailApi from '@/api/system-settings/email-setting'
+import type { FormInstance, FormRules } from 'element-plus'
 
-import {MsgSuccess} from '@/utils/message'
-import {t} from '@/locales'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
 
 const form = ref<any>({
   email_host: '',
@@ -80,7 +79,7 @@ const form = ref<any>({
   email_host_password: '',
   email_use_tls: false,
   email_use_ssl: false,
-  from_email: ''
+  from_email: '',
 })
 
 const emailFormRef = ref()
@@ -89,20 +88,20 @@ const loading = ref(false)
 
 const rules = reactive<FormRules<any>>({
   email_host: [
-    {required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur'}
+    { required: true, message: t('views.system.email.smtpHostPlaceholder'), trigger: 'blur' },
   ],
   email_port: [
-    {required: true, message: t('views.system.email.smtpPortPlaceholder'), trigger: 'blur'}
+    { required: true, message: t('views.system.email.smtpPortPlaceholder'), trigger: 'blur' },
   ],
   email_host_user: [
-    {required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur'}
+    { required: true, message: t('views.system.email.smtpUserPlaceholder'), trigger: 'blur' },
   ],
   email_host_password: [
-    {required: true, message: t('views.system.email.smtpPasswordPlaceholder'), trigger: 'blur'}
+    { required: true, message: t('views.system.email.smtpPasswordPlaceholder'), trigger: 'blur' },
   ],
   from_email: [
-    {required: true, message: t('views.system.email.sendEmailPlaceholder'), trigger: 'blur'}
-  ]
+    { required: true, message: t('views.system.email.sendEmailPlaceholder'), trigger: 'blur' },
+  ],
 })
 
 const submit = async (formEl: FormInstance | undefined, test?: string) => {
@@ -136,8 +135,10 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .email-setting {
-  width: 70%;
-  margin: 0 auto;
+  &__main {
+    width: 70%;
+    margin: 0 auto;
+  }
 
   :deep(.el-checkbox__label) {
     font-weight: 400;
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index d258cf359..fed3086c3 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -127,7 +127,7 @@ import type {LoginRequest} from '@/api/type/login'
 import LoginContainer from '@/views/login/components/LoginContainer.vue'
 import LoginLayout from '@/views/login/components/LoginLayout.vue'
 import loginApi from '@/api/user/login'
-import authApi from '@/api/systemSettings/auth-setting'
+import authApi from '@/api/system-settings/auth-setting'
 import {t, getBrowserLang} from '@/locales'
 import useStore from '@/stores'
 import {useI18n} from 'vue-i18n'
diff --git a/ui/src/views/theme/LoginPreview.vue b/ui/src/views/theme/LoginPreview.vue
index 9de9cae3f..f174bde72 100644
--- a/ui/src/views/theme/LoginPreview.vue
+++ b/ui/src/views/theme/LoginPreview.vue
@@ -95,7 +95,7 @@ const fileURL = computed(() => {
   }
 
   .header {
-    background: var(--el-disabled-bg-color);
+    background: #eceeef;
     height: 38px;
     border-radius: 4px 4px 0 0;
     position: relative;
diff --git a/ui/src/views/theme/index.vue b/ui/src/views/theme/index.vue
index e425692b2..e2e70f80f 100644
--- a/ui/src/views/theme/index.vue
+++ b/ui/src/views/theme/index.vue
@@ -1,275 +1,269 @@
 <template>
-  <div class="theme-setting" v-loading="loading">
-    <h4 class="p-16-24">{{ $t('views.system.theme.title') }}</h4>
+  <div class="theme-setting p-16-24" v-loading="loading">
+    <h4 class="mb-16">{{ $t('views.system.theme.title') }}</h4>
     <el-scrollbar>
-      <div class="p-24 pt-0">
-        <div class="app-card p-24">
-          <h5 class="mb-16">{{ $t('views.system.theme.platformDisplayTheme') }}</h5>
-          <el-radio-group
-            v-model="themeRadio"
-            class="app-radio-button-group"
-            @change="changeThemeHandle"
-          >
-            <template v-for="(item, index) in themeList" :key="index">
-              <el-radio-button :label="item.label" :value="item.value"/>
-            </template>
-            <el-radio-button :label="$t('views.system.theme.custom')" value="custom"/>
-          </el-radio-group>
-          <div v-if="themeRadio === 'custom'">
-            <h5 class="mt-16 mb-8">{{ $t('views.system.theme.customTheme') }}</h5>
-            <el-color-picker v-model="customColor" @change="customColorHandle"/>
-          </div>
+      <el-card style="--el-card-padding: 16px">
+        <h5 class="mb-16">{{ $t('views.system.theme.platformDisplayTheme') }}</h5>
+        <el-radio-group
+          v-model="themeRadio"
+          class="app-radio-button-group"
+          @change="changeThemeHandle"
+        >
+          <template v-for="(item, index) in themeList" :key="index">
+            <el-radio-button :label="item.label" :value="item.value" />
+          </template>
+          <el-radio-button :label="$t('views.system.theme.custom')" value="custom" />
+        </el-radio-group>
+        <div v-if="themeRadio === 'custom'">
+          <h5 class="mt-16 mb-8">{{ $t('views.system.theme.customTheme') }}</h5>
+          <el-color-picker v-model="customColor" @change="customColorHandle" />
         </div>
-        <div class="app-card p-24 mt-16">
-          <h5 class="mb-16">{{ $t('views.system.theme.platformLoginSettings') }}</h5>
-          <el-card shadow="never" class="layout-bg">
-            <div class="flex-between">
-              <h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
-              <el-button type="primary" link @click="resetForm('login')">
-                {{ $t('views.system.theme.restoreDefaults') }}
-              </el-button>
-            </div>
-            <el-scrollbar>
-              <div class="theme-preview">
-                <el-row :gutter="8">
-                  <el-col :span="16">
-                    <LoginPreview :data="themeForm"/>
-                  </el-col>
-                  <el-col :span="8">
-                    <div class="theme-form">
-                      <el-card shadow="never" class="mb-8">
-                        <div class="flex-between mb-8">
-                          <span class="lighter">{{ $t('views.system.theme.websiteLogo') }}</span>
-                          <el-upload
-                            ref="uploadRef"
-                            action="#"
-                            :auto-upload="false"
-                            :show-file-list="false"
-                            accept="image/jpeg, image/png, image/gif"
-                            :on-change="
-                              (file: any, fileList: any) => onChange(file, fileList, 'icon')
-                            "
-                          >
-                            <el-button size="small">
-                              {{ $t('views.system.theme.replacePicture') }}
-                            </el-button>
-                          </el-upload>
-                        </div>
-                        <el-text type="info" size="small"
-                        >{{ $t('views.system.theme.websiteLogoTip') }}
-                        </el-text>
-                      </el-card>
-                      <el-card shadow="never" class="mb-8">
-                        <div class="flex-between mb-8">
-                          <span class="lighter"> {{ $t('views.system.theme.loginLogo') }}</span>
-                          <el-upload
-                            ref="uploadRef"
-                            action="#"
-                            :auto-upload="false"
-                            :show-file-list="false"
-                            accept="image/jpeg, image/png, image/gif"
-                            :on-change="
-                              (file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
-                            "
-                          >
-                            <el-button size="small">
-                              {{ $t('views.system.theme.replacePicture') }}
-                            </el-button>
-                          </el-upload>
-                        </div>
-                        <el-text type="info" size="small"
-                        >{{ $t('views.system.theme.loginLogoTip') }}
-                        </el-text>
-                      </el-card>
-                      <el-card shadow="never" class="mb-8">
-                        <div class="flex-between mb-8">
-                          <span class="lighter">{{
-                              $t('views.system.theme.loginBackground')
-                            }}</span>
-                          <el-upload
-                            ref="uploadRef"
-                            action="#"
-                            :auto-upload="false"
-                            :show-file-list="false"
-                            accept="image/jpeg, image/png, image/gif"
-                            :on-change="
-                              (file: any, fileList: any) => onChange(file, fileList, 'loginImage')
-                            "
-                          >
-                            <el-button size="small">
-                              {{ $t('views.system.theme.replacePicture') }}
-                            </el-button>
-                          </el-upload>
-                        </div>
-                        <el-text type="info" size="small">
-                          {{ $t('views.system.theme.loginBackgroundTip') }}
-                        </el-text>
-                      </el-card>
+      </el-card>
 
-                      <el-form
-                        ref="themeFormRef"
-                        :model="themeForm"
-                        label-position="top"
-                        require-asterisk-position="right"
-                        :rules="rules"
-                        @submit.prevent
-                      >
-                        <el-form-item :label="$t('views.system.theme.websiteName')" prop="title">
-                          <el-input
-                            v-model="themeForm.title"
-                            :placeholder="$t('views.system.theme.websiteNamePlaceholder')"
-                          >
-                          </el-input>
-                          <el-text type="info">{{
-                              $t('views.system.theme.websiteNameTip')
-                            }}
-                          </el-text>
-                        </el-form-item>
-                        <el-form-item :label="$t('views.system.theme.websiteSlogan')" prop="slogan">
-                          <el-input
-                            v-model="themeForm.slogan"
-                            :placeholder="$t('views.system.theme.websiteSloganPlaceholder')"
-                            maxlength="64"
-                            show-word-limit
-                          >
-                          </el-input>
-                          <el-text type="info">{{
-                              $t('views.system.theme.websiteSloganTip')
-                            }}
-                          </el-text>
-                        </el-form-item>
-                      </el-form>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-scrollbar>
-            <div class="mt-16">
-              <el-text type="info">{{ $t('views.system.theme.logoDefaultTip') }}</el-text>
+      <el-card style="--el-card-padding: 16px" class="mt-16">
+        <h5 class="mb-16">{{ $t('views.system.theme.platformLoginSettings') }}</h5>
+        <el-card shadow="never" class="layout-bg">
+          <div class="flex-between">
+            <h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
+            <el-button type="primary" link @click="resetForm('login')">
+              {{ $t('views.system.theme.restoreDefaults') }}
+            </el-button>
+          </div>
+          <el-scrollbar>
+            <div class="theme-preview">
+              <el-row :gutter="8">
+                <el-col :span="16">
+                  <LoginPreview :data="themeForm" />
+                </el-col>
+                <el-col :span="8">
+                  <div class="theme-form">
+                    <el-card shadow="never" class="mb-8">
+                      <div class="flex-between mb-8">
+                        <span class="lighter">{{ $t('views.system.theme.websiteLogo') }}</span>
+                        <el-upload
+                          ref="uploadRef"
+                          action="#"
+                          :auto-upload="false"
+                          :show-file-list="false"
+                          accept="image/jpeg, image/png, image/gif"
+                          :on-change="
+                            (file: any, fileList: any) => onChange(file, fileList, 'icon')
+                          "
+                        >
+                          <el-button size="small">
+                            {{ $t('views.system.theme.replacePicture') }}
+                          </el-button>
+                        </el-upload>
+                      </div>
+                      <el-text type="info" size="small"
+                        >{{ $t('views.system.theme.websiteLogoTip') }}
+                      </el-text>
+                    </el-card>
+                    <el-card shadow="never" class="mb-8">
+                      <div class="flex-between mb-8">
+                        <span class="lighter"> {{ $t('views.system.theme.loginLogo') }}</span>
+                        <el-upload
+                          ref="uploadRef"
+                          action="#"
+                          :auto-upload="false"
+                          :show-file-list="false"
+                          accept="image/jpeg, image/png, image/gif"
+                          :on-change="
+                            (file: any, fileList: any) => onChange(file, fileList, 'loginLogo')
+                          "
+                        >
+                          <el-button size="small">
+                            {{ $t('views.system.theme.replacePicture') }}
+                          </el-button>
+                        </el-upload>
+                      </div>
+                      <el-text type="info" size="small"
+                        >{{ $t('views.system.theme.loginLogoTip') }}
+                      </el-text>
+                    </el-card>
+                    <el-card shadow="never" class="mb-8">
+                      <div class="flex-between mb-8">
+                        <span class="lighter">{{ $t('views.system.theme.loginBackground') }}</span>
+                        <el-upload
+                          ref="uploadRef"
+                          action="#"
+                          :auto-upload="false"
+                          :show-file-list="false"
+                          accept="image/jpeg, image/png, image/gif"
+                          :on-change="
+                            (file: any, fileList: any) => onChange(file, fileList, 'loginImage')
+                          "
+                        >
+                          <el-button size="small">
+                            {{ $t('views.system.theme.replacePicture') }}
+                          </el-button>
+                        </el-upload>
+                      </div>
+                      <el-text type="info" size="small">
+                        {{ $t('views.system.theme.loginBackgroundTip') }}
+                      </el-text>
+                    </el-card>
+
+                    <el-form
+                      ref="themeFormRef"
+                      :model="themeForm"
+                      label-position="top"
+                      require-asterisk-position="right"
+                      :rules="rules"
+                      @submit.prevent
+                    >
+                      <el-form-item :label="$t('views.system.theme.websiteName')" prop="title">
+                        <el-input
+                          v-model="themeForm.title"
+                          :placeholder="$t('views.system.theme.websiteNamePlaceholder')"
+                        >
+                        </el-input>
+                        <el-text type="info"
+                          >{{ $t('views.system.theme.websiteNameTip') }}
+                        </el-text>
+                      </el-form-item>
+                      <el-form-item :label="$t('views.system.theme.websiteSlogan')" prop="slogan">
+                        <el-input
+                          v-model="themeForm.slogan"
+                          :placeholder="$t('views.system.theme.websiteSloganPlaceholder')"
+                          maxlength="64"
+                          show-word-limit
+                        >
+                        </el-input>
+                        <el-text type="info"
+                          >{{ $t('views.system.theme.websiteSloganTip') }}
+                        </el-text>
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                </el-col>
+              </el-row>
             </div>
-          </el-card>
-        </div>
-        <div class="app-card p-24 mt-16">
-          <h5 class="mb-16">{{ $t('views.system.theme.platformSetting') }}</h5>
-          <el-card shadow="never" class="layout-bg">
-            <div class="flex-between">
-              <h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
-              <el-button type="primary" link @click="resetForm('platform')">
-                {{ $t('views.system.theme.restoreDefaults') }}
-              </el-button>
-            </div>
-            <el-scrollbar>
-              <div class="theme-preview">
-                <el-row :gutter="8">
-                  <el-col :span="16">
-                    <div class="theme-platform mr-16">
-                      <div
-                        class="theme-platform-header border-b flex-between"
-                        :class="!isDefaultTheme ? 'custom-header' : ''"
-                      >
-                        <div class="flex-center h-full">
-                          <div class="app-title-container cursor">
-                            <div class="logo flex-center">
-                              <LogoFull height="25px"/>
-                            </div>
+          </el-scrollbar>
+          <div class="mt-16">
+            <el-text type="info">{{ $t('views.system.theme.logoDefaultTip') }}</el-text>
+          </div>
+        </el-card>
+      </el-card>
+      <el-card style="--el-card-padding: 16px" class="mt-16">
+        <h5 class="mb-16">{{ $t('views.system.theme.platformSetting') }}</h5>
+        <el-card shadow="never" class="layout-bg">
+          <div class="flex-between">
+            <h5 class="mb-16">{{ $t('views.system.theme.pagePreview') }}</h5>
+            <el-button type="primary" link @click="resetForm('platform')">
+              {{ $t('views.system.theme.restoreDefaults') }}
+            </el-button>
+          </div>
+          <el-scrollbar>
+            <div class="theme-preview">
+              <el-row :gutter="8">
+                <el-col :span="16">
+                  <div class="theme-platform mr-16">
+                    <div
+                      class="theme-platform-header border-b flex-between"
+                      :class="!isDefaultTheme ? 'custom-header' : ''"
+                    >
+                      <div class="flex-center h-full">
+                        <div class="app-title-container cursor">
+                          <div class="logo flex-center">
+                            <LogoFull height="25px" />
                           </div>
                         </div>
-                        <div class="flex-center">
-                          <AppIcon
-                            iconName="app-github"
-                            class="cursor color-secondary mr-8 ml-8"
-                            style="font-size: 20px"
-                            v-if="themeForm.showProject"
-                          ></AppIcon>
-                          <AppIcon
-                            iconName="app-user-manual"
-                            class="cursor color-secondary mr-8 ml-8"
-                            style="font-size: 20px"
-                            v-if="themeForm.showUserManual"
-                          ></AppIcon>
-                          <AppIcon
-                            iconName="app-help"
-                            class="cursor color-secondary ml-8"
-                            style="font-size: 20px"
-                            v-if="themeForm.showForum"
-                          ></AppIcon>
-                        </div>
+                      </div>
+                      <div class="flex-center">
+                        <AppIcon
+                          iconName="app-github"
+                          class="cursor color-secondary mr-8 ml-8"
+                          style="font-size: 20px"
+                          v-if="themeForm.showProject"
+                        ></AppIcon>
+                        <AppIcon
+                          iconName="app-user-manual"
+                          class="cursor color-secondary mr-8 ml-8"
+                          style="font-size: 20px"
+                          v-if="themeForm.showUserManual"
+                        ></AppIcon>
+                        <AppIcon
+                          iconName="app-help"
+                          class="cursor color-secondary ml-8"
+                          style="font-size: 20px"
+                          v-if="themeForm.showForum"
+                        ></AppIcon>
                       </div>
                     </div>
-                  </el-col>
-                  <el-col :span="8">
-                    <div class="theme-form">
-                      <div>
-                        <el-checkbox
-                          v-model="themeForm.showUserManual"
-                          :label="$t('views.system.theme.showUserManual')"
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="theme-form">
+                    <div>
+                      <el-checkbox
+                        v-model="themeForm.showUserManual"
+                        :label="$t('views.system.theme.showUserManual')"
+                      />
+                      <div class="ml-24">
+                        <el-input
+                          v-model="themeForm.userManualUrl"
+                          :placeholder="$t('views.system.theme.urlPlaceholder')"
                         />
-                        <div class="ml-24">
-                          <el-input
-                            v-model="themeForm.userManualUrl"
-                            :placeholder="$t('views.system.theme.urlPlaceholder')"
-                          />
-                        </div>
-                      </div>
-                      <div class="mt-4">
-                        <el-checkbox
-                          v-model="themeForm.showForum"
-                          :label="$t('views.system.theme.showForum')"
-                        />
-                        <div class="ml-24">
-                          <el-input
-                            v-model="themeForm.forumUrl"
-                            :placeholder="$t('views.system.theme.urlPlaceholder')"
-                          />
-                        </div>
-                      </div>
-                      <div class="mt-4">
-                        <el-checkbox
-                          v-model="themeForm.showProject"
-                          :label="$t('views.system.theme.showProject')"
-                        />
-                        <div class="ml-24">
-                          <el-input
-                            v-model="themeForm.projectUrl"
-                            :placeholder="$t('views.system.theme.urlPlaceholder')"
-                          />
-                        </div>
                       </div>
                     </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </el-scrollbar>
-            <div class="mt-16">
-              <el-text type="info">{{ $t('views.system.theme.defaultTip') }}</el-text>
+                    <div class="mt-4">
+                      <el-checkbox
+                        v-model="themeForm.showForum"
+                        :label="$t('views.system.theme.showForum')"
+                      />
+                      <div class="ml-24">
+                        <el-input
+                          v-model="themeForm.forumUrl"
+                          :placeholder="$t('views.system.theme.urlPlaceholder')"
+                        />
+                      </div>
+                    </div>
+                    <div class="mt-4">
+                      <el-checkbox
+                        v-model="themeForm.showProject"
+                        :label="$t('views.system.theme.showProject')"
+                      />
+                      <div class="ml-24">
+                        <el-input
+                          v-model="themeForm.projectUrl"
+                          :placeholder="$t('views.system.theme.urlPlaceholder')"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
             </div>
-          </el-card>
-        </div>
-      </div>
+          </el-scrollbar>
+          <div class="mt-16">
+            <el-text type="info">{{ $t('views.system.theme.defaultTip') }}</el-text>
+          </div>
+        </el-card>
+      </el-card>
     </el-scrollbar>
     <div class="theme-setting__operate w-full p-16-24">
       <el-button @click="resetTheme">{{ $t('views.system.theme.abandonUpdate') }}</el-button>
       <el-button type="primary" @click="updateTheme(themeFormRef)">
         {{ $t('views.system.theme.saveAndApply') }}
-      </el-button
-      >
+      </el-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, onMounted, computed} from 'vue'
-import {useRouter, onBeforeRouteLeave} from 'vue-router'
-import type {FormInstance, FormRules, UploadFiles} from 'element-plus'
-import {cloneDeep} from 'lodash'
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter, onBeforeRouteLeave } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import { cloneDeep } from 'lodash'
 import LoginPreview from './LoginPreview.vue'
-import {themeList, defaultSetting, defaultPlatformSetting} from '@/utils/theme'
-import ThemeApi from '@/api/systemSettings/theme'
-import {MsgSuccess, MsgError} from '@/utils/message'
+import { themeList, defaultSetting, defaultPlatformSetting } from '@/utils/theme'
+import ThemeApi from '@/api/system-settings/theme'
+import { MsgSuccess, MsgError } from '@/utils/message'
 import useStore from '@/stores'
-import {t} from '@/locales'
+import { t } from '@/locales'
 
-const {user} = useStore()
+const { user } = useStore()
 const router = useRouter()
 
 onBeforeRouteLeave((to, from) => {
@@ -291,18 +285,18 @@ const themeForm = ref<any>({
   loginImage: '',
   title: 'MaxKB',
   slogan: t('views.system.theme.defaultSlogan'),
-  ...defaultPlatformSetting
+  ...defaultPlatformSetting,
 })
 const themeRadio = ref('')
 const customColor = ref('')
 
 const rules = reactive<FormRules>({
   title: [
-    {required: true, message: t('views.system.theme.websiteNamePlaceholder'), trigger: 'blur'}
+    { required: true, message: t('views.system.theme.websiteNamePlaceholder'), trigger: 'blur' },
   ],
   slogan: [
-    {required: true, message: t('views.system.theme.websiteSloganPlaceholder'), trigger: 'blur'}
-  ]
+    { required: true, message: t('views.system.theme.websiteSloganPlaceholder'), trigger: 'blur' },
+  ],
 })
 
 const onChange = (file: any, fileList: UploadFiles, attr: string) => {
@@ -338,15 +332,15 @@ function resetForm(val: string) {
   themeForm.value =
     val === 'login'
       ? {
-        ...themeForm.value,
-        theme: themeForm.value.theme,
-        ...defaultSetting
-      }
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultSetting,
+        }
       : {
-        ...themeForm.value,
-        theme: themeForm.value.theme,
-        ...defaultPlatformSetting
-      }
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultPlatformSetting,
+        }
 
   user.setTheme(themeForm.value)
 }