wip: refactor layout

src/components/Application/index.ts

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

src/components/Application/src/AppFooterToolbar.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="app-footer" :style="{ width: getWidth }">
-    <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, computed, unref } from 'vue';
-
-  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
-
-  import { appStore } from '/@/store/modules/app';
-  import { menuStore } from '/@/store/modules/menu';
-
-  export default defineComponent({
-    name: 'AppFooterToolbar',
-    setup() {
-      const getMiniWidth = computed(() => {
-        const {
-          menuSetting: { collapsedShowTitle },
-        } = appStore.getProjectConfig;
-        return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
-      });
-
-      const getWidth = computed(() => {
-        const { getCollapsedState, getMenuWidthState } = menuStore;
-        const width = getCollapsedState ? unref(getMiniWidth) : getMenuWidthState;
-        return `calc(100% - ${width}px)`;
-      });
-
-      return { getWidth };
-    },
-  });
-</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.3s;
-
-    &__left {
-      flex: 1 1;
-    }
-  }
-</style>

src/components/Application/src/AppLocalPicker.vue

@@ -5,29 +5,44 @@
     :selectedKeys="selectedKeys"
     @menuEvent="handleMenuEvent"
   >
-    <GlobalOutlined class="app-locale" />
+    <span class="app-local-picker">
+      <GlobalOutlined class="app-local-picker__icon" />
+      <span v-if="showText">{{ getLangText }}</span>
+    </span>
   </Dropdown>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watchEffect, unref } from 'vue';
+  import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
 
   import { Dropdown, DropMenu } from '/@/components/Dropdown';
   import { GlobalOutlined } from '@ant-design/icons-vue';
 
   import { useLocale } from '/@/hooks/web/useLocale';
-  import { useLocaleSetting } from '/@/settings/use/useLocaleSetting';
+  import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
 
   import { LocaleType } from '/@/locales/types';
 
   export default defineComponent({
     name: 'AppLocalPicker',
     components: { GlobalOutlined, Dropdown },
+    props: {
+      showText: {
+        type: Boolean,
+        default: true,
+      },
+    },
     setup() {
       const { localeList } = useLocaleSetting();
       const selectedKeys = ref<string[]>([]);
 
       const { changeLocale, getLang } = useLocale();
 
+      const getLangText = computed(() => {
+        const key = selectedKeys.value[0];
+        if (!key) return '';
+        return localeList.find((item) => item.event === key)?.text;
+      });
+
       watchEffect(() => {
         selectedKeys.value = [unref(getLang)];
       });
@@ -41,13 +56,19 @@
         toggleLocale(menu.event as string);
       }
 
-      return { localeList, handleMenuEvent, selectedKeys };
+      return { localeList, handleMenuEvent, selectedKeys, getLangText };
     },
   });
 </script>
 
 <style lang="less" scoped>
-  .app-locale {
+  .app-local-picker {
+    display: flex;
+    align-items: center;
     cursor: pointer;
+
+    &__icon {
+      margin-right: 4px;
+    }
   }
 </style>

src/components/Application/src/AppLogo.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="app-logo anticon" :class="theme" @click="handleGoHome">
+    <img src="/@/assets/images/logo.png" />
+    <div class="app-logo__title ml-2 ellipsis">{{ globSetting.title }}</div>
+  </div>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent } from 'vue';
+
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  export default defineComponent({
+    name: 'AppLogo',
+    props: {
+      /**
+       * The theme of the current parent component
+       */
+      theme: {
+        type: String as PropType<string>,
+      },
+    },
+    setup() {
+      const globSetting = useGlobSetting();
+      const go = useGo();
+
+      function handleGoHome(): void {
+        go(PageEnum.BASE_HOME);
+      }
+
+      return {
+        handleGoHome,
+        globSetting,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
+  .app-logo {
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+    cursor: pointer;
+
+    &.light {
+      border-bottom: 1px solid @border-color-base;
+    }
+
+    &.light &__title {
+      color: @primary-color;
+    }
+
+    &.dark &__title {
+      color: @white;
+    }
+
+    &__title {
+      font-size: 18px;
+      font-weight: 700;
+      opacity: 0;
+      transition: all 0.5s;
+      .respond-to(medium,{
+       opacity: 1;
+      });
+    }
+  }
+</style>

src/components/Application/src/AppPageFooter.vue

@@ -0,0 +1,46 @@
+<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>