refactor/layout tsx to sfc

src/layouts/components/Header.vue

@@ -79,7 +79,7 @@ import LogoFull from '@/assets/assets-logo-full.svg';
 
 import Notice from './Notice.vue';
 import Search from './Search.vue';
-import MenuContent from './MenuContent';
+import MenuContent from './MenuContent.vue';
 
 export default Vue.extend({
   components: {

src/layouts/components/LayoutContent.vue

@@ -0,0 +1,136 @@
+<template>
+  <t-layout :class="[`${prefix}-layout`]">
+    <t-tabs
+      v-if="isUseTabsRouter"
+      theme="card"
+      :class="`${prefix}-layout-tabs-nav`"
+      :value="$route.path"
+      @change="handleChangeCurrentTab"
+      :style="{ position: 'sticky', top: 0, width: '100%' }"
+    >
+      <t-tab-panel
+        v-for="(route, idx) in tabRouterList"
+        :value="route.path"
+        :key="`${route.path}_${idx}`"
+        :removable="!route.isHome"
+        @remove="() => this.handleRemove(route.path, idx)"
+      >
+        <template #label>
+          <t-dropdown
+            trigger="context-menu"
+            :minColumnWidth="128"
+            :popupProps="{ overlayClassName: 'route-tabs-dropdown' }"
+          >
+            <template v-if="!route.isHome">
+              {{ route.title }}
+            </template>
+            <home-icon v-else />
+            <template #dropdown>
+              <t-dropdown-menu v-if="this.$route.path === route.path">
+                <t-dropdown-item @click="() => this.handleRefresh(route.path, idx)">
+                  <refresh-icon />
+                  刷新
+                </t-dropdown-item>
+                <t-dropdown-item v-if="idx > 0" @lick="() => this.handleCloseAhead(route.path, idx)">
+                  <arrow-left-icon />
+                  关闭左侧
+                </t-dropdown-item>
+                <t-dropdown-item
+                  v-if="idx < this.tabRouterList.length - 1"
+                  @click="() => this.handleCloseBehind(route.path, idx)"
+                >
+                  <arrow-right-icon />
+                  关闭右侧
+                </t-dropdown-item>
+                <t-dropdown-item @click="() => this.handleCloseOther(route.path, idx)">
+                  <close-circle-icon />
+                  关闭其它
+                </t-dropdown-item>
+              </t-dropdown-menu>
+            </template>
+          </t-dropdown>
+        </template>
+      </t-tab-panel>
+    </t-tabs>
+    <t-content :class="`${prefix}-content-layout`">
+      <l-breadcrumb v-if="setting.showBreadcrumb" />
+      <l-content />
+    </t-content>
+    <t-footer v-if="showFooter" :class="`${prefix}-footer-layout`">
+      <l-footer />
+    </t-footer>
+  </t-layout>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import { RefreshIcon, ArrowLeftIcon, ArrowRightIcon, HomeIcon, CloseCircleIcon } from 'tdesign-icons-vue';
+
+import LContent from './Content.vue';
+import LBreadcrumb from './Breadcrumb.vue';
+import LFooter from './Footer.vue';
+
+import { prefix } from '@/config/global';
+import { SettingType } from '@/interface';
+
+export default Vue.extend({
+  name: 'LayoutContent',
+  components: {
+    LContent,
+    LFooter,
+    LBreadcrumb,
+    RefreshIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    HomeIcon,
+    CloseCircleIcon,
+  },
+  data() {
+    return {
+      prefix,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      showFooter: 'setting/showFooter',
+      mode: 'setting/mode',
+      isUseTabsRouter: 'setting/isUseTabsRouter',
+      menuRouters: 'permission/routers',
+      tabRouterList: 'tabRouter/tabRouterList',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+  },
+  methods: {
+    handleRemove(path: string, routeIdx: number) {
+      const nextRouter = this.tabRouterList[routeIdx + 1] || this.tabRouterList[routeIdx - 1];
+
+      this.$store.commit('tabRouter/subtractCurrentTabRouter', { path, routeIdx });
+      if (path === this.$router.history?.current?.path) {
+        this.$router.push(nextRouter.path);
+      }
+    },
+    handleChangeCurrentTab(path: string) {
+      this.$router.push(path);
+    },
+    handleRefresh(currentPath: string, routeIdx: number) {
+      this.$store.commit('tabRouter/toggleTabRouterAlive', routeIdx);
+      this.$nextTick(() => {
+        this.$store.commit('tabRouter/toggleTabRouterAlive', routeIdx);
+        this.$router.replace({ path: currentPath });
+      });
+    },
+    handleCloseAhead(path: string, routeIdx: number) {
+      this.$store.commit('tabRouter/subtractTabRouterAhead', { path, routeIdx });
+    },
+    handleCloseBehind(path: string, routeIdx: number) {
+      this.$store.commit('tabRouter/subtractTabRouterBehind', { path, routeIdx });
+    },
+    handleCloseOther(path: string, routeIdx: number) {
+      this.$store.commit('tabRouter/subtractTabRouterOther', { path, routeIdx });
+    },
+  },
+});
+</script>

src/layouts/components/LayoutHeader.vue

@@ -0,0 +1,52 @@
+<template>
+  <l-header
+    v-if="showHeader"
+    :showLogo="showHeaderLogo"
+    :theme="mode"
+    :layout="setting.layout"
+    :isFixed="setting.isHeaderFixed"
+    :menu="headerMenu"
+    :isCompact="setting.isSidebarCompact"
+    :maxLevel="setting.splitMenu ? 1 : 3"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import LHeader from './Header.vue';
+
+import { SettingType } from '@/interface';
+
+export default Vue.extend({
+  name: 'LayoutHeader',
+  components: {
+    LHeader,
+  },
+  computed: {
+    ...mapGetters({
+      showHeader: 'setting/showHeader',
+      showHeaderLogo: 'setting/showHeaderLogo',
+      mode: 'setting/mode',
+      menuRouters: 'permission/routers',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+    headerMenu() {
+      const { layout, splitMenu } = this.$store.state.setting;
+      const { menuRouters } = this;
+      if (layout === 'mix') {
+        if (splitMenu) {
+          return menuRouters.map((menu) => ({
+            ...menu,
+            children: [],
+          }));
+        }
+        return [];
+      }
+      return menuRouters;
+    },
+  },
+});
+</script>

src/layouts/components/LayoutSidebar.vue

@@ -0,0 +1,51 @@
+<template>
+  <l-side-nav
+    v-if="showSidebar"
+    :showLogo="showSidebarLogo"
+    :layout="setting.layout"
+    :isFixed="setting.isSidebarFixed"
+    :menu="sideMenu"
+    :theme="mode"
+    :isCompact="setting.isSidebarCompact"
+    :maxLevel="setting.splitMenu ? 2 : 3"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import LSideNav from './SideNav.vue';
+
+import { SettingType } from '@/interface';
+
+export default Vue.extend({
+  name: 'LayoutSidebar',
+  components: {
+    LSideNav,
+  },
+  computed: {
+    ...mapGetters({
+      showSidebar: 'setting/showSidebar',
+      showSidebarLogo: 'setting/showSidebarLogo',
+      mode: 'setting/mode',
+      menuRouters: 'permission/routers',
+    }),
+    setting(): SettingType {
+      return this.$store.state.setting;
+    },
+    sideMenu() {
+      const { layout, splitMenu } = this.$store.state.setting;
+      let { menuRouters } = this;
+      if (layout === 'mix' && splitMenu) {
+        menuRouters.forEach((menu) => {
+          if (this.$route.path.indexOf(menu.path) === 0) {
+            menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
+          }
+        });
+      }
+      return menuRouters;
+    },
+  },
+});
+</script>
+<style lang="less" scoped></style>