refactor:优化系统配置与版权显示

src/apis/system/type.ts

@@ -281,6 +281,7 @@ export interface BasicConfig {
   SITE_LOGO: string
   SITE_TITLE: string
   SITE_COPYRIGHT: string
+  SITE_BEIAN: string
 }
 
 /** 基础配置类型 */
@@ -288,7 +289,9 @@ export interface SiteConfig {
   SITE_FAVICON: OptionResp
   SITE_LOGO: OptionResp
   SITE_TITLE: OptionResp
+  SITE_DESCRIPTION: OptionResp
   SITE_COPYRIGHT: OptionResp
+  SITE_BEIAN: OptionResp
 }
 
 /** 邮箱配置类型 */

src/components/GiFooter/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gi-footer">{{ appStore.getCopyright() }}</div>
+  <div class="gi-footer">{{ appStore.getCopyright() }}{{ appStore.getForRecord() ? ` · ${appStore.getForRecord()}` : '' }}</div>
 </template>
 
 <script lang="ts" setup>

src/stores/modules/app.ts

@@ -69,6 +69,7 @@ const storeSetup = () => {
       siteConfig.SITE_LOGO = resMap.get('SITE_LOGO')
       siteConfig.SITE_TITLE = resMap.get('SITE_TITLE')
       siteConfig.SITE_COPYRIGHT = resMap.get('SITE_COPYRIGHT')
+      siteConfig.SITE_BEIAN = resMap.get('SITE_BEIAN')
       document.title = resMap.get('SITE_TITLE')
       document
         .querySelector('link[rel="shortcut icon"]')
@@ -99,6 +100,9 @@ const storeSetup = () => {
     return siteConfig.SITE_COPYRIGHT
   }
 
+  const getForRecord = () => {
+    return siteConfig.SITE_BEIAN
+  }
   return {
     ...toRefs(settingConfig),
     ...toRefs(siteConfig),
@@ -113,7 +117,8 @@ const storeSetup = () => {
     getFavicon,
     getLogo,
     getTitle,
-    getCopyright
+    getCopyright,
+    getForRecord
   }
 }
 

src/views/login/index.vue

@@ -43,7 +43,7 @@
 
     <div v-if="isDesktop" class="footer">
       <div class="beian">
-        <div class="below text" v-html="appStore.getCopyright()"></div>
+        <div class="below text">{{ appStore.getCopyright() }}{{ appStore.getForRecord() ? ` · ${appStore.getForRecord()}` : '' }}</div>
       </div>
     </div>
 
@@ -123,6 +123,7 @@ const onOauth = async (source: string) => {
     display: none !important;
     background-color: white !important;
   }
+
   .login {
     height: 100%;
     display: flex;
@@ -131,6 +132,7 @@ const onOauth = async (source: string) => {
     align-items: center;
     background-color: var(--color-bg-5);
     color: #121314;
+
     &-logo {
       width: 100%;
       height: 104px;
@@ -144,18 +146,21 @@ const onOauth = async (source: string) => {
       background-image: url('/src/assets/images/login_h5.jpg');
       background-size: 100% 100%;
       box-sizing: border-box;
+
       img {
         width: 34px;
         height: 34px;
         margin-right: 8px;
       }
     }
+
     &-box {
       width: 100%;
       display: flex;
       z-index: 999;
     }
   }
+
   .login-right {
     width: 100%;
     height: 100%;
@@ -163,6 +168,7 @@ const onOauth = async (source: string) => {
     flex-direction: column;
     padding: 30px 30px 0;
     box-sizing: border-box;
+
     &__title {
       color: var(--color-text-1);
       font-weight: 500;
@@ -170,41 +176,50 @@ const onOauth = async (source: string) => {
       line-height: 32px;
       margin-bottom: 20px;
     }
+
     &__form {
       :deep(.arco-tabs-nav-tab) {
         display: flex;
         justify-content: start;
         align-items: center;
       }
+
       :deep(.arco-tabs-tab) {
         color: var(--color-text-2);
         margin: 0 20px 0 0;
       }
+
       :deep(.arco-tabs-tab-title) {
         font-size: 16px;
         font-weight: 500;
         line-height: 22px;
       }
+
       :deep(.arco-tabs-content) {
         margin-top: 10px;
       }
+
       :deep(.arco-tabs-tab-active),
       :deep(.arco-tabs-tab-title:hover) {
         color: rgb(var(--arcoblue-6));
       }
+
       :deep(.arco-tabs-nav::before) {
         display: none;
       }
+
       :deep(.arco-tabs-tab-title:before) {
         display: none;
       }
     }
+
     &__oauth {
       width: 100%;
       position: fixed;
       bottom: 0;
       left: 0;
       padding-bottom: 20px;
+
       // margin-top: auto;
       // margin-bottom: 20px;
       :deep(.arco-divider-text) {
@@ -213,14 +228,17 @@ const onOauth = async (source: string) => {
         font-weight: 400;
         line-height: 20px;
       }
+
       .list {
         align-items: center;
         display: flex;
         justify-content: center;
         width: 100%;
+
         .item {
           margin-right: 15px;
         }
+
         .mode {
           color: var(--color-text-2);
           font-size: 12px;
@@ -235,15 +253,18 @@ const onOauth = async (source: string) => {
           height: 32px;
           justify-content: center;
           cursor: pointer;
+
           .icon {
             width: 21px;
             height: 20px;
           }
         }
+
         .mode svg {
           font-size: 16px;
           margin-right: 10px;
         }
+
         .mode:hover,
         .mode svg:hover {
           background: rgba(var(--primary-6), 0.05);
@@ -267,6 +288,7 @@ const onOauth = async (source: string) => {
     position: absolute;
     bottom: 10px;
     z-index: 999;
+
     .beian {
       .text {
         font-size: 12px;
@@ -275,6 +297,7 @@ const onOauth = async (source: string) => {
         line-height: 20px;
         text-align: center;
       }
+
       .below {
         align-items: center;
         display: flex;
@@ -282,10 +305,12 @@ const onOauth = async (source: string) => {
     }
   }
 }
+
 @media screen and (min-width: 571px) {
   .h5 {
     display: none !important;
   }
+
   .login {
     height: 100%;
     display: flex;
@@ -293,6 +318,7 @@ const onOauth = async (source: string) => {
     justify-content: center;
     align-items: center;
     background-color: var(--color-bg-5);
+
     &-logo {
       position: fixed;
       top: 20px;
@@ -306,12 +332,14 @@ const onOauth = async (source: string) => {
       display: flex;
       justify-content: center;
       align-items: center;
+
       img {
         width: 34px;
         height: 34px;
         margin-right: 8px;
       }
     }
+
     &-box {
       width: 86%;
       max-width: 850px;
@@ -331,6 +359,7 @@ const onOauth = async (source: string) => {
     position: relative;
     overflow: hidden;
     background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));
+
     &__img {
       width: 100%;
       position: absolute;
@@ -352,6 +381,7 @@ const onOauth = async (source: string) => {
     flex-direction: column;
     padding: 30px 30px 0;
     box-sizing: border-box;
+
     &__title {
       color: var(--color-text-1);
       font-weight: 500;
@@ -359,51 +389,63 @@ const onOauth = async (source: string) => {
       line-height: 32px;
       margin-bottom: 20px;
     }
+
     &__form {
       :deep(.arco-tabs-nav-tab) {
         display: flex;
         justify-content: center;
         align-items: center;
       }
+
       :deep(.arco-tabs-tab) {
         color: var(--color-text-2);
       }
+
       :deep(.arco-tabs-tab-title) {
         font-size: 16px;
         font-weight: 500;
         line-height: 22px;
       }
+
       :deep(.arco-tabs-content) {
         margin-top: 10px;
       }
+
       :deep(.arco-tabs-tab-active),
       :deep(.arco-tabs-tab-title:hover) {
         color: rgb(var(--arcoblue-6));
       }
+
       :deep(.arco-tabs-nav::before) {
         display: none;
       }
+
       :deep(.arco-tabs-tab-title:before) {
         display: none;
       }
     }
+
     &__oauth {
       margin-top: auto;
       margin-bottom: 20px;
+
       :deep(.arco-divider-text) {
         color: var(--color-text-4);
         font-size: 12px;
         font-weight: 400;
         line-height: 20px;
       }
+
       .list {
         align-items: center;
         display: flex;
         justify-content: center;
         width: 100%;
+
         .item {
           margin-right: 15px;
         }
+
         .mode {
           color: var(--color-text-2);
           font-size: 12px;
@@ -418,15 +460,18 @@ const onOauth = async (source: string) => {
           height: 32px;
           justify-content: center;
           cursor: pointer;
+
           .icon {
             width: 21px;
             height: 20px;
           }
         }
+
         .mode svg {
           font-size: 16px;
           margin-right: 10px;
         }
+
         .mode:hover,
         .mode svg:hover {
           background: rgba(var(--primary-6), 0.05);
@@ -450,6 +495,7 @@ const onOauth = async (source: string) => {
     position: absolute;
     bottom: 10px;
     z-index: 999;
+
     .beian {
       .text {
         font-size: 12px;
@@ -458,6 +504,7 @@ const onOauth = async (source: string) => {
         line-height: 20px;
         text-align: center;
       }
+
       .below {
         align-items: center;
         display: flex;

src/views/system/config/components/BasicSetting.vue

@@ -57,9 +57,15 @@
       <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
         <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
       </a-form-item>
+      <a-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name">
+        <a-input v-model.trim="form.SITE_DESCRIPTION" placeholder="请输入网站描述" :max-length="18" />
+      </a-form-item>
       <a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
         <a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" />
       </a-form-item>
+      <a-form-item class="input-item" field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
+        <a-input v-model.trim="form.SITE_BEIAN" placeholder="请输入备案信息" style="width: 100%;" />
+      </a-form-item>
       <div style="margin-top: 20px">
         <a-space>
           <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
@@ -125,7 +131,9 @@ const siteConfig = ref<SiteConfig>({
   SITE_FAVICON: {},
   SITE_LOGO: {},
   SITE_TITLE: {},
-  SITE_COPYRIGHT: {}
+  SITE_DESCRIPTION: {},
+  SITE_COPYRIGHT: {},
+  SITE_BEIAN: {}
 })
 const faviconFile = ref<FileItem>({ uid: '-1' })
 const logoFile = ref<FileItem>({ uid: '-2' })
@@ -135,7 +143,9 @@ const reset = () => {
   form.SITE_FAVICON = siteConfig.value.SITE_FAVICON.value || ''
   form.SITE_LOGO = siteConfig.value.SITE_LOGO.value || ''
   form.SITE_TITLE = siteConfig.value.SITE_TITLE.value || ''
+  form.SITE_DESCRIPTION = siteConfig.value.SITE_DESCRIPTION.value || ''
   form.SITE_COPYRIGHT = siteConfig.value.SITE_COPYRIGHT.value || ''
+  form.SITE_BEIAN = siteConfig.value.SITE_BEIAN.value || ''
   faviconFile.value.url = siteConfig.value.SITE_FAVICON.value
   logoFile.value.url = siteConfig.value.SITE_LOGO.value
 }
@@ -203,20 +213,20 @@ const onResetValue = () => {
 const handleUploadFavicon = (options: RequestOption) => {
   const controller = new AbortController()
     ; (async function requestWrap() {
-      const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
+    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
-      onProgress(20)
+    onProgress(20)
-      const formData = new FormData()
+    const formData = new FormData()
-      formData.append(name as string, fileItem.file as Blob)
+    formData.append(name as string, fileItem.file as Blob)
-      uploadFile(formData)
+    uploadFile(formData)
-        .then((res) => {
+      .then((res) => {
-          onSuccess(res)
+        onSuccess(res)
-          form.SITE_FAVICON = res.data.url
+        form.SITE_FAVICON = res.data.url
-          Message.success('上传成功')
+        Message.success('上传成功')
-        })
+      })
-        .catch((error) => {
+      .catch((error) => {
-          onError(error)
+        onError(error)
-        })
+      })
-    })()
+  })()
   return {
     abort() {
       controller.abort()
@@ -233,20 +243,20 @@ const handleChangeFavicon = (_: any, currentFile: any) => {
 const handleUploadLogo = (options: RequestOption) => {
   const controller = new AbortController()
     ; (async function requestWrap() {
-      const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
+    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
-      onProgress(20)
+    onProgress(20)
-      const formData = new FormData()
+    const formData = new FormData()
-      formData.append(name as string, fileItem.file as Blob)
+    formData.append(name as string, fileItem.file as Blob)
-      uploadFile(formData)
+    uploadFile(formData)
-        .then((res) => {
+      .then((res) => {
-          onSuccess(res)
+        onSuccess(res)
-          form.SITE_LOGO = res.data.url
+        form.SITE_LOGO = res.data.url
-          Message.success('上传成功')
+        Message.success('上传成功')
-        })
+      })
-        .catch((error) => {
+      .catch((error) => {
-          onError(error)
+        onError(error)
-        })
+      })
-    })()
+  })()
   return {
     abort() {
       controller.abort()
@@ -266,21 +276,21 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .form {
-  margin: 20px 0 0 20px;
+  // margin: 20px 0 0 20px;
 }
 
 .logo {
-  width: 33px;
+  width: 50px;
-  height: 33px;
+  height: 50px;
-  min-width: 33px;
+  min-width: 50px;
-  line-height: 33px;
+  line-height: 50px;
 }
 
 .favicon {
-  width: 16px;
+  width: 46px;
-  height: 16px;
+  height: 46px;
-  min-width: 16px;
+  min-width: 46px;
-  line-height: 16px;
+  line-height: 46px;
 }
 
 .arco-form .image-item,
@@ -294,6 +304,7 @@ onMounted(() => {
 }
 
 :deep(.arco-form-item-wrapper-col) {
-  width: 50%;
+  width: 100%;
+  max-width: 500px;
 }
 </style>

src/views/system/config/components/MailSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <a-space wrap :size="30">
     <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error>
       <a-list :bordered="false" :loading="loading">
         <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
           <a-select v-model.trim="form.MAIL_PROTOCOL">
@@ -169,10 +169,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.form {
-  margin: 20px 0 0 20px;
-}
-
 :deep(.arco-form-item.arco-form-item-has-help) {
   margin-bottom: 5px;
 }

src/views/system/config/components/SecuritySetting.vue

@@ -1,7 +1,7 @@
 <template>
   <a-space wrap :size="30">
     <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error>
       <a-list :bordered="false" :loading="loading">
         <a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
           :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
@@ -205,10 +205,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.form {
-  margin: 20px 0 0 20px;
-}
-
 .input-width {
   width: 196px;
 }

src/views/system/config/index.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="gi_page">
     <a-card class="general-card" title="系统配置">
-      <a-tabs v-model:active-key="activeKey" hide-content type="rounded" @change="change">
+      <a-tabs v-model:active-key="activeKey" position="right" @change="change">
-        <a-tab-pane key="1" title="基础配置" />
+        <a-tab-pane key="1" title="基础配置">
-        <a-tab-pane key="2" title="邮件配置" />
+          <BasicSetting />
-        <a-tab-pane key="3" title="安全配置" />
+        </a-tab-pane>
+        <a-tab-pane key="2" title="邮件配置">
+          <MailSetting />
+        </a-tab-pane>
+        <a-tab-pane key="3" title="安全配置">
+          <SecuritySetting />
+        </a-tab-pane>
       </a-tabs>
-      <keep-alive>
+      <!-- <keep-alive>
         <component :is="PanMap[activeKey]" />
-      </keep-alive>
+      </keep-alive> -->
     </a-card>
   </div>
 </template>
@@ -20,11 +26,11 @@ import MailSetting from './components/MailSetting.vue'
 import SecuritySetting from './components/SecuritySetting.vue'
 
 defineOptions({ name: 'SystemConfig' })
-const PanMap: Record<string, Component> = {
+// const PanMap: Record<string, Component> = {
-  1: BasicSetting,
+//   1: BasicSetting,
-  2: MailSetting,
+//   2: MailSetting,
-  3: SecuritySetting
+//   3: SecuritySetting
-}
+// }
 const route = useRoute()
 const router = useRouter()
 const activeKey = ref('1')