perf: perf component

src/components/Application/index.ts

@@ -1,8 +1,7 @@
 import AppLocalePicker from './src/AppLocalePicker.vue';
-import AppPageFooter from './src/AppPageFooter.vue';
 import AppLogo from './src/AppLogo.vue';
 import { withInstall } from '../util';
 
-export { AppLocalePicker, AppPageFooter, AppLogo };
+export { AppLocalePicker, AppLogo };
 
-export default withInstall(AppLocalePicker, AppPageFooter, AppLogo);
+export default withInstall(AppLocalePicker, AppLogo);

src/components/Application/src/AppLocalePicker.vue

@@ -23,18 +23,16 @@
 
   import { LocaleType } from '/@/locales/types';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppLocalPicker',
     components: { GlobalOutlined, Dropdown },
     props: {
-      showText: {
-        type: Boolean,
-        default: true,
-      },
-      reload: {
-        type: Boolean,
-        default: false,
-      },
+      // Whether to display text
+      showText: propTypes.bool.def(true),
+      // Whether to refresh the interface when changing
+      reload: propTypes.bool,
     },
     setup(props) {
       const { localeList } = useLocaleSetting();

src/components/Application/src/AppLogo.vue

@@ -9,7 +9,6 @@
   </div>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
   import { defineComponent } from 'vue';
 
   import { useGlobSetting } from '/@/hooks/setting';
@@ -18,23 +17,23 @@
 
   import { PageEnum } from '/@/enums/pageEnum';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppLogo',
     props: {
       /**
        * The theme of the current parent component
        */
-      theme: {
-        type: String as PropType<string>,
-      },
-      showTitle: {
-        type: Boolean,
-        default: true,
-      },
+      theme: propTypes.oneOf(['light', 'dark']),
+      // Whether to show title
+      showTitle: propTypes.bool.def(true),
     },
     setup() {
       const { getCollapsedShowTitle } = useMenuSetting();
+
       const globSetting = useGlobSetting();
+
       const go = useGo();
 
       function handleGoHome(): void {

src/components/Application/src/AppPageFooter.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="app-footer" :style="{ width: getCalcContentWidth }">
-    <div class="app-footer__left">
-      <slot name="left" />
-    </div>
-    <div class="app-footer__right">
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-
-  export default defineComponent({
-    name: 'AppFooterToolbar',
-    setup() {
-      const { getCalcContentWidth } = useMenuSetting();
-
-      return { getCalcContentWidth };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .app-footer {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    z-index: 99;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    padding: 0 24px;
-    line-height: 44px;
-    background: #fff;
-    border-top: 1px solid #f0f0f0;
-    box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
-      0 -12px 48px 16px rgba(0, 0, 0, 0.03);
-    transition: width 0.4s;
-
-    &__left {
-      flex: 1 1;
-    }
-  }
-</style>