feat(component): Add Footer component

src/components/Footer/index.ts

@@ -0,0 +1,3 @@
+import Footer from './src/Footer.vue'
+
+export { Footer }

src/components/Footer/src/Footer.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app'
+import { computed } from 'vue'
+
+const appStore = useAppStore()
+
+const title = computed(() => appStore.getTitle)
+</script>
+
+<template>
+  <div class="text-center text-[var(--el-text-color-placeholder)]">Copyright ©2021 {{ title }}</div>
+</template>

src/components/Menu/src/Menu.vue

@@ -220,8 +220,8 @@ export default defineComponent({
       }
 
       .v-menu__title {
-        max-height: calc(~'var( - -top-tool-height)') !important;
-        line-height: calc(~'var( - -top-tool-height)');
+        max-height: calc(~'var( - -top-tool-height) - 2px') !important;
+        line-height: calc(~'var( - -top-tool-height) - 2px');
       }
     }
   }

src/components/Setting/src/Setting.vue

@@ -32,7 +32,7 @@ const setSystemTheme = (color: string) => {
 }
 
 // 头部主题相关
-const headerTheme = ref(appStore.getTheme.topHeaderBgColor)
+const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '')
 
 const setHeaderTheme = (color: string) => {
   const isDarkColor = colorIsDark(color)
@@ -55,7 +55,7 @@ const setHeaderTheme = (color: string) => {
 }
 
 // 菜单主题相关
-const menuTheme = ref(appStore.getTheme.leftMenuBgColor)
+const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')
 
 const setMenuTheme = (color: string) => {
   const primaryColor = useCssVar('--el-color-primary', document.documentElement)
@@ -91,13 +91,11 @@ const setMenuTheme = (color: string) => {
 // 监听layout变化，重置一些主题色
 watch(
   () => layout.value,
-  (n, o) => {
-    if (o === 'top') {
-      menuTheme.value = '#fff'
-      setMenuTheme('#fff')
-    }
-    if ((o === 'classic' || o === 'topLeft') && n === 'top') {
-      menuTheme.value = headerTheme.value
+  (n) => {
+    if (n === 'top') {
+      headerTheme.value = '#fff'
+      setHeaderTheme('#fff')
+    } else {
       setMenuTheme(unref(menuTheme))
     }
   }
@@ -125,6 +123,8 @@ tagsView: ${appStore.getTagsView},
 logo: ${appStore.getLogo},
 // 固定header
 fixedHeader: ${appStore.getFixedHeader},
+// 页脚
+footer: ${appStore.getFooter},
 // 灰色模式
 greyMode: ${appStore.getGreyMode},
 // layout布局

src/components/Setting/src/components/InterfaceDisplay.vue

@@ -71,6 +71,13 @@ const fixedHeaderChange = (show: boolean) => {
   appStore.setFixedHeader(show)
 }
 
+// 页脚
+const footer = ref(appStore.getFooter)
+
+const footerChange = (show: boolean) => {
+  appStore.setFooter(show)
+}
+
 // 灰色模式
 const greyMode = ref(appStore.getGreyMode)
 
@@ -137,6 +144,11 @@ watch(
       <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
     </div>
 
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.footer') }}</span>
+      <ElSwitch v-model="footer" @change="footerChange" />
+    </div>
+
     <div class="flex justify-between items-center">
       <span class="text-14px">{{ t('setting.greyMode') }}</span>
       <ElSwitch v-model="greyMode" @change="greyModeChange" />

src/config/app.ts

@@ -4,6 +4,22 @@ const { wsCache } = useCache()
 
 export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
 
+export type ThemeTypes = {
+  elColorPrimary?: string
+  leftMenuBorderColor?: string
+  leftMenuBgColor?: string
+  leftMenuBgLightColor?: string
+  leftMenuBgActiveColor?: string
+  leftMenuCollapseBgActiveColor?: string
+  leftMenuTextColor?: string
+  leftMenuTextActiveColor?: string
+  logoTitleTextColor?: string
+  logoBorderColor?: string
+  topHeaderBgColor?: string
+  topHeaderTextColor?: string
+  topHeaderHoverColor?: string
+  topToolBorderColor?: string
+}
 export interface AppState {
   breadcrumb: boolean
   breadcrumbIcon: boolean
@@ -24,7 +40,8 @@ export interface AppState {
   currentSize: ElememtPlusSzie
   sizeMap: ElememtPlusSzie[]
   mobile: boolean
-  theme: Recordable
+  footer: boolean
+  theme: ThemeTypes
 }
 
 export const appModules: AppState = {
@@ -44,6 +61,7 @@ export const appModules: AppState = {
   tagsView: true, // 标签页
   logo: true, // logo
   fixedHeader: true, // 固定toolheader
+  footer: true, // 显示页脚
   greyMode: false, // 是否开始灰色模式，用于特殊悼念日
 
   layout: wsCache.get('layout') || 'classic', // layout布局

src/hooks/web/usePageLoading.ts

@@ -8,7 +8,9 @@ export const usePageLoading = () => {
   }
 
   const loadDone = () => {
-    appStore.setPageLoading(false)
+    setTimeout(() => {
+      appStore.setPageLoading(false)
+    }, 1000)
   }
 
   return {

src/layout/Layout.vue

@@ -63,4 +63,10 @@ export default defineComponent({
 
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-app';
+
+:deep(.@{namespace}-content) {
+  .el-scrollbar__view {
+    height: 100%;
+  }
+}
 </style>

src/layout/components/AppView.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useAppStore } from '@/store/modules/app'
+import { Footer } from '@/components/Footer'
 import { computed } from 'vue'
 
+const appStore = useAppStore()
+
+const layout = computed(() => appStore.getLayout)
+
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+const footer = computed(() => appStore.getFooter)
+
 const tagsViewStore = useTagsViewStore()
 
 const getCaches = computed((): string[] => {
@@ -10,7 +20,24 @@ const getCaches = computed((): string[] => {
 </script>
 
 <template>
-  <section class="p-[var(--app-content-padding)] w-[100%]">
+  <section
+    :class="[
+      'p-[var(--app-content-padding)] w-[100%]',
+      {
+        '!min-h-[calc(100%-calc(var(--app-content-padding)*2))]':
+          fixedHeader && layout === 'classic' && footer,
+        '!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-calc(var(--app-content-padding)*2))]':
+          ((!fixedHeader && layout === 'classic') || layout === 'top') && footer,
+        '!min-h-[calc(100%-var(--tags-view-height))]':
+          fixedHeader && layout === 'topLeft' && footer,
+        '!min-h-[calc(100%-var(--tags-view-height)-calc(var(--app-content-padding)*2))]':
+          !fixedHeader && layout === 'topLeft' && footer,
+        '!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer,
+        '!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]':
+          !fixedHeader && layout === 'cutMenu' && footer
+      }
+    ]"
+  >
     <router-view>
       <template #default="{ Component, route }">
         <keep-alive :include="getCaches">
@@ -19,4 +46,5 @@ const getCaches = computed((): string[] => {
       </template>
     </router-view>
   </section>
+  <Footer v-if="footer" />
 </template>

src/layout/components/useRenderLayout.tsx

@@ -143,7 +143,7 @@ export const useRenderLayout = () => {
                         !collapse.value && fixedHeader.value
                     }
                   ]}
-                  style="transition: all var(--transition-time-02);"
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
                 ></TagsView>
               ) : undefined}
 
@@ -181,7 +181,7 @@ export const useRenderLayout = () => {
                     '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
                   }
                 ]}
-                style="transition: all var(--transition-time-02);"
+                style="transition: width var(--transition-time-02), left var(--transition-time-02);"
               ></TagsView>
             ) : undefined}
 

src/locales/en.ts

@@ -41,7 +41,8 @@ export default {
     cutMenu: 'Cut Menu',
     copy: 'Copy',
     clearAndReset: 'Clear cache and reset',
-    copySuccess: 'Copy success'
+    copySuccess: 'Copy success',
+    footer: 'Footer'
   },
   size: {
     default: 'Default',

src/locales/zh-CN.ts

@@ -41,7 +41,8 @@ export default {
     cutMenu: '切割菜单',
     copy: '拷贝',
     clearAndReset: '清除缓存并且重置',
-    copySuccess: '拷贝成功'
+    copySuccess: '拷贝成功',
+    footer: '页脚'
   },
   size: {
     default: '默认',

src/store/modules/app.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import { useCache } from '@/hooks/web/useCache'
 import { appModules } from '@/config/app'
-import type { AppState, LayoutType } from '@/config/app'
+import type { AppState, LayoutType, ThemeTypes } from '@/config/app'
 import { setCssVar, humpToUnderline } from '@/utils'
 import { ElMessage } from 'element-plus'
 
@@ -69,8 +69,11 @@ export const useAppStore = defineStore({
     getMobile(): boolean {
       return this.mobile
     },
-    getTheme(): Recordable {
+    getTheme(): ThemeTypes {
       return this.theme
+    },
+    getFooter(): boolean {
+      return this.footer
     }
   },
   actions: {
@@ -139,7 +142,7 @@ export const useAppStore = defineStore({
     setMobile(mobile: boolean) {
       this.mobile = mobile
     },
-    setTheme(theme: Recordable) {
+    setTheme(theme: ThemeTypes) {
       this.theme = Object.assign(this.theme, theme)
       wsCache.set('theme', this.theme)
     },
@@ -147,6 +150,9 @@ export const useAppStore = defineStore({
       for (const key in this.theme) {
         setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
       }
+    },
+    setFooter(footer: boolean) {
+      this.footer = footer
     }
   }
 })

src/styles/common.less

@@ -1,33 +0,0 @@
-.hover-tigger {
-  @apply flex h-full pt-1px px-10px cursor-pointer items-center;
-  transition: background var(--transition-time-02);
-  &:hover {
-    background-color: var(--top-header-hover-color);
-  }
-}
-
-.border-bottom {
-  border-bottom: 1px solid var(--top-tool-border-color);
-}
-
-.border-bottom--after {
-  @apply relative;
-  &:after {
-    content: '';
-    border-top: 1px solid var(--top-tool-border-color);
-    @apply absolute bottom-0 left-0 w-full h-1px;
-  }
-}
-
-.border-top {
-  border-top: 1px solid var(--top-tool-border-color);
-}
-
-.border-top--before {
-  @apply relative;
-  &:before {
-    content: '';
-    border-top: 1px solid var(--top-tool-border-color);
-    @apply absolute top-0 left-0 w-full h-1px;
-  }
-}

src/styles/index.less

@@ -1,2 +1 @@
 @import './var.css';
-// @import './common.less';