feat(component): Add Footer component

package.json

@@ -25,11 +25,11 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.1.0",
+    "@iconify/iconify": "^2.1.1",
-    "@vueuse/core": "^7.5.3",
+    "@vueuse/core": "^7.5.4",
     "@zxcvbn-ts/core": "^1.2.0",
     "animate.css": "^4.1.1",
-    "axios": "^0.24.0",
+    "axios": "^0.25.0",
     "element-plus": "1.3.0-beta.5",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
@@ -43,29 +43,29 @@
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.0.2",
+    "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^16.0.0",
-    "@iconify/json": "^1.1.454",
+    "@iconify/json": "^1.1.459",
     "@intlify/vite-plugin-vue-i18n": "^3.2.1",
     "@purge-icons/generated": "^0.7.0",
     "@types/lodash-es": "^4.17.5",
-    "@types/node": "^17.0.8",
+    "@types/node": "^17.0.10",
     "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@typescript-eslint/parser": "^5.10.0",
-    "@vitejs/plugin-vue": "^2.0.1",
+    "@vitejs/plugin-vue": "^2.1.0",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "autoprefixer": "^10.4.2",
     "commitizen": "^4.2.4",
-    "eslint": "^8.6.0",
+    "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-define-config": "^1.2.2",
+    "eslint-define-config": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.3.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
-    "lint-staged": "^12.1.7",
+    "lint-staged": "^12.2.2",
     "postcss": "^8.4.5",
     "postcss-html": "^1.3.0",
     "postcss-less": "^6.0.0",
@@ -77,17 +77,17 @@
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
-    "typescript": "4.5.4",
+    "typescript": "4.5.5",
-    "vite": "2.7.10",
+    "vite": "2.7.13",
     "vite-plugin-eslint": "^1.3.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-style-import": "^1.4.1",
     "vite-plugin-svg-icons": "^1.1.0",
     "vite-plugin-vue-setup-extend": "^0.3.0",
-    "vite-plugin-windicss": "^1.6.2",
+    "vite-plugin-windicss": "^1.6.3",
-    "vue-tsc": "^0.30.2",
+    "vue-tsc": "^0.30.6",
-    "windicss": "^3.4.2",
+    "windicss": "^3.4.3",
     "windicss-analysis": "^0.3.5"
   },
   "engines": {

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;
+        max-height: calc(~'var( - -top-tool-height) - 2px') !important;
-        line-height: calc(~'var( - -top-tool-height)');
+        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) => {
+  (n) => {
-    if (o === 'top') {
+    if (n === 'top') {
-      menuTheme.value = '#fff'
+      headerTheme.value = '#fff'
-      setMenuTheme('#fff')
+      setHeaderTheme('#fff')
-    }
+    } else {
-    if ((o === 'classic' || o === 'topLeft') && n === 'top') {
-      menuTheme.value = headerTheme.value
       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 = () => {
+    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';

types/router.d.ts

@@ -30,8 +30,6 @@ import { defineComponent } from 'vue'
     followAuth: '/dashboard'  跟随哪个路由进行权限过滤
 
     canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
-
-    followRoute: '/dashboard' 为路由设置跟随其他路由的权限
   }
 **/
 declare module 'vue-router' {
@@ -47,7 +45,6 @@ declare module 'vue-router' {
     noTagsView?: boolean
     followAuth?: string
     canTo?: boolean
-    followRoute?: string
   }
 }