feat(component): Add Footer component

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}