feat:新增版权显示控制

continew-org · Jun 2, 2024 · 0f3d927 · 0f3d927
1 parent 4765d8f
commit 0f3d927
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 50 deletions.
diff --git a/src/components/GiFooter/index.vue b/src/components/GiFooter/index.vue
@@ -12,10 +12,10 @@ const appStore = useAppStore()
 
 <style lang="scss" scoped>
 .gi-footer {
-  height: 50px;
-  font-size: 12px;
+  height: 40px;
+  font-size: 13px;
   color: var(--color-text-3);
-  margin-top: 12px;
+  background-color: var(--color-bg-1);
   border-top: 1px dashed var(--color-neutral-3);
   box-sizing: border-box;
   display: flex;

diff --git a/src/config/setting.json b/src/config/setting.json
@@ -8,5 +8,6 @@
   "menuCollapse": true,
   "menuAccordion": true,
   "menuDark": false,
+  "copyrightDisplay": false,
   "layout": "left"
 }
diff --git a/src/layout/LayoutDefault.vue b/src/layout/LayoutDefault.vue
@@ -5,6 +5,7 @@
       <Header></Header>
       <Tabs></Tabs>
       <Main></Main>
+      <GiFooter v-if="appStore.copyrightDisplay" />
     </a-layout>
   </a-layout>
 </template>
@@ -14,8 +15,11 @@ import Asider from './components/Asider/index.vue'
 import Header from './components/Header/index.vue'
 import Main from './components/Main.vue'
 import Tabs from './components/Tabs/index.vue'
+import GiFooter from '@/components/GiFooter/index.vue'
+import { useAppStore } from '@/stores'
 
 defineOptions({ name: 'LayoutDefault' })
+const appStore = useAppStore()
 </script>
 
 <style lang="scss" scoped>
@@ -25,6 +29,7 @@ defineOptions({ name: 'LayoutDefault' })
 
 .layout-default {
   flex-direction: row;
+
   &-right {
     overflow: hidden;
   }

diff --git a/src/layout/LayoutMix.vue b/src/layout/LayoutMix.vue
@@ -1,26 +1,16 @@
 <template>
   <div class="layout-mix">
-    <section
-      v-if="isDesktop"
-      class="layout-mix-left"
-      :class="{ 'app-menu-dark': appStore.menuDark }"
-      :style="appStore.menuDark ? appStore.themeCSSVar : undefined"
-    >
+    <section v-if="isDesktop" class="layout-mix-left" :class="{ 'app-menu-dark': appStore.menuDark }"
+      :style="appStore.menuDark ? appStore.themeCSSVar : undefined">
       <Logo :collapsed="appStore.menuCollapse"></Logo>
       <Menu :menus="leftMenus" :menu-style="{ width: '200px', flex: 1 }"></Menu>
     </section>
 
     <section class="layout-mix-right">
       <header class="header">
         <MenuFoldBtn></MenuFoldBtn>
-        <a-menu
-          v-if="isDesktop"
-          mode="horizontal"
-          :selected-keys="activeMenu"
-          :auto-open-selected="false"
-          :trigger-props="{ animationName: 'slide-dynamic-origin' }"
-          @menu-item-click="onMenuItemClick"
-        >
+        <a-menu v-if="isDesktop" mode="horizontal" :selected-keys="activeMenu" :auto-open-selected="false"
+          :trigger-props="{ animationName: 'slide-dynamic-origin' }" @menu-item-click="onMenuItemClick">
           <a-menu-item v-for="item in topMenus" :key="item.path">
             <template #icon>
               <GiSvgIcon :name="getMenuIcon(item)" :size="24" />
@@ -33,6 +23,7 @@
 
       <Tabs></Tabs>
       <Main></Main>
+      <GiFooter v-if="appStore.copyrightDisplay" />
     </section>
   </div>
 </template>
@@ -46,6 +37,7 @@ import Menu from './components/Menu/index.vue'
 import HeaderRightBar from './components/HeaderRightBar/index.vue'
 import Logo from './components/Logo.vue'
 import MenuFoldBtn from './components/MenuFoldBtn.vue'
+import GiFooter from '@/components/GiFooter/index.vue'
 import { useAppStore, useRouteStore } from '@/stores'
 import { isExternal } from '@/utils/validate'
 import { filterTree } from '@/utils'
@@ -111,15 +103,18 @@ watch(
 }
 
 :deep(.arco-menu.arco-menu-vertical.arco-menu-collapsed) {
+
   // Menu菜单组件修改
   .arco-menu-icon {
     margin-right: 0;
     padding: 10px 0;
   }
+
   .arco-menu-has-icon {
     padding: 0;
     justify-content: center;
   }
+
   .arco-menu-title {
     display: none;
   }
@@ -128,8 +123,10 @@ watch(
 :deep(.arco-menu-horizontal) {
   flex: 1;
   overflow: hidden;
+
   .arco-menu-inner {
     padding-left: 0;
+
     .arco-menu-overflow-wrap {
       white-space: nowrap;
     }
@@ -141,13 +138,15 @@ watch(
   display: flex;
   align-items: stretch;
   overflow: hidden;
+
   &-left {
     border-right: 1px solid var(--color-border);
     background-color: var(--color-bg-1);
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
+
   &-right {
     flex: 1;
     display: flex;

diff --git a/src/layout/components/HeaderRightBar/SettingDrawer.vue b/src/layout/components/HeaderRightBar/SettingDrawer.vue
@@ -6,22 +6,16 @@
         <a-space>
           <a-badge>
             <template #content>
-              <icon-check-circle-fill
-                v-if="appStore.layout === 'left'"
-                style="color: rgb(var(--success-6))"
-                :size="16"
-              ></icon-check-circle-fill>
+              <icon-check-circle-fill v-if="appStore.layout === 'left'" style="color: rgb(var(--success-6))"
+                :size="16"></icon-check-circle-fill>
             </template>
             <LayoutItem mode="left" @click="appStore.layout = 'left'"></LayoutItem>
             <p class="layout-text">默认布局</p>
           </a-badge>
           <a-badge>
             <template #content>
-              <icon-check-circle-fill
-                v-if="appStore.layout === 'mix'"
-                :size="16"
-                style="color: rgb(var(--success-6))"
-              ></icon-check-circle-fill>
+              <icon-check-circle-fill v-if="appStore.layout === 'mix'" :size="16"
+                style="color: rgb(var(--success-6))"></icon-check-circle-fill>
             </template>
             <LayoutItem mode="mix" @click="appStore.layout = 'mix'"></LayoutItem>
             <p class="layout-text">混合布局</p>
@@ -31,13 +25,8 @@
 
       <a-divider orientation="center">系统主题</a-divider>
       <a-row justify="center">
-        <ColorPicker
-          theme="dark"
-          :color="appStore.themeColor"
-          :sucker-hide="true"
-          :colors-default="defaultColorList"
-          @change-color="changeColor"
-        ></ColorPicker>
+        <ColorPicker theme="dark" :color="appStore.themeColor" :sucker-hide="true" :colors-default="defaultColorList"
+          @change-color="changeColor"></ColorPicker>
       </a-row>
 
       <a-divider orientation="center">界面显示</a-divider>
@@ -47,27 +36,16 @@
           <a-switch v-model="appStore.tab" />
         </a-descriptions-item>
         <a-descriptions-item label="页签风格">
-          <a-select
-            v-model="appStore.tabMode"
-            placeholder="请选择"
-            :options="tabModeList"
-            :disabled="!appStore.tab"
-            :trigger-props="{ autoFitPopupMinWidth: true }"
-            :style="{ width: '120px' }"
-          >
+          <a-select v-model="appStore.tabMode" placeholder="请选择" :options="tabModeList" :disabled="!appStore.tab"
+            :trigger-props="{ autoFitPopupMinWidth: true }" :style="{ width: '120px' }">
           </a-select>
         </a-descriptions-item>
         <a-descriptions-item label="动画显示">
           <a-switch v-model="appStore.animate" />
         </a-descriptions-item>
         <a-descriptions-item label="动画显示">
-          <a-select
-            v-model="appStore.animateMode"
-            placeholder="请选择"
-            :options="animateModeList"
-            :disabled="!appStore.animate"
-            :style="{ width: '120px' }"
-          >
+          <a-select v-model="appStore.animateMode" placeholder="请选择" :options="animateModeList"
+            :disabled="!appStore.animate" :style="{ width: '120px' }">
           </a-select>
         </a-descriptions-item>
         <a-descriptions-item label="深色菜单">
@@ -76,6 +54,9 @@
         <a-descriptions-item label="手风琴效果">
           <a-switch v-model="appStore.menuAccordion" />
         </a-descriptions-item>
+        <a-descriptions-item label="版权显示">
+          <a-switch v-model="appStore.copyrightDisplay" />
+        </a-descriptions-item>
       </a-descriptions>
     </a-space>
   </a-drawer>
@@ -139,7 +120,7 @@ type ColorObj = {
 
 // 改变主题色
 const changeColor = (colorObj: ColorObj) => {
-  if (!/^#[0-9A-Za-z]{6}/.test(colorObj.hex)) return
+  if (!/^#[0-9A-Z]{6}/i.test(colorObj.hex)) return
   appStore.setThemeColor(colorObj.hex)
 }
 </script>

diff --git a/src/types/app.d.ts b/src/types/app.d.ts
@@ -9,6 +9,7 @@ declare namespace App {
     animateMode: AnimateType // 动画类名
     menuCollapse: boolean // 左侧菜单折叠状态
     menuAccordion: boolean // 左侧菜单手风琴效果
+    copyrightDisplay: boolean // 是否显示底部版权信息
     menuDark: boolean // 菜单深色模式
     layout: 'left' | 'mix'
   }