refactor(style): remove tailwind css

src/layouts/Logo.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="flex justify-items-center items-center cursor-pointer" @click="handleGoHome">
+  <div class="app-logo" @click="handleGoHome">
     <img :src="logo" />
-    <div v-if="show" class="logo-title ml-2 text-xl hidden md:block font-logo ellipsis">{{
-      globSetting.title
-    }}</div>
+    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -52,3 +50,22 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  @import (reference) '../design/index.less';
+
+  .app-logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .logo-title {
+      display: none;
+      font-family: Georgia, serif;
+      font-size: 18px;
+      .respond-to(medium,{
+       display: block;
+     });
+    }
+  }
+</style>

src/layouts/default/LayoutBreadcrumb.tsx

@@ -65,7 +65,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <Breadcrumb class="layout-breadcrumb flex-grow">
+        <Breadcrumb class="layout-breadcrumb ">
           {() => (
             <>
               <TransitionGroup name="breadcrumb">

src/layouts/default/LayoutHeader.tsx

@@ -55,23 +55,17 @@ export default defineComponent({
 
       const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
       return (
-        <Layout.Header
-          class={[
-            'layout-header',
-            'bg-white flex p-0 px-4 justify-items-center',
-            unref(headerClass),
-          ]}
-        >
+        <Layout.Header class={['layout-header', 'flex p-0 px-4 ', unref(headerClass)]}>
           {() => (
             <>
-              <div class="flex-grow flex justify-center items-center">
+              <div class="layout-header__content ">
                 {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
 
                 {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
                   <LayoutBreadcrumb />
                 )}
                 {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && (
-                  <div class={[`layout-header__menu flex-grow `, `justify-${topMenuAlign}`]}>
+                  <div class={[`layout-header__menu `, `justify-${topMenuAlign}`]}>
                     <LayoutMenu
                       theme={headerTheme}
                       splitType={splitMenu ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE}

src/layouts/default/index.less

@@ -191,9 +191,17 @@
   height: @header-height;
   padding: 0 20px 0 0;
   color: @white;
+  background: @white;
   align-items: center;
   justify-content: space-between;
 
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   &__header--light {
     background: @white;
     border-bottom: 1px solid @header-light-bottom-border-color;
@@ -334,6 +342,7 @@
     margin-left: 20px;
     overflow: hidden;
     align-items: center;
+    flex-grow: 1;
   }
 
   &__user-dropdown {
@@ -398,4 +407,5 @@
 
 .layout-breadcrumb {
   padding: 0 16px;
+  flex-grow: 1;
 }

src/layouts/default/setting/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    @click="openDrawer"
-    class="setting-button bg-primary flex justify-center items-center text-white p-4 absolute z-10 cursor-pointer"
-  >
+  <div @click="openDrawer" class="setting-button">
     <SettingOutlined :spin="true" />
     <SettingDrawer @register="register" />
   </div>
@@ -26,3 +23,18 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
+  .setting-button {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    background: @primary-color;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/layouts/iframe/useFrameKeepAlive.ts

@@ -6,12 +6,13 @@ import { appStore } from '/@/store/modules/app';
 import { AppRouteRecordRaw } from '/@/router/types';
 import { useRouter } from 'vue-router';
 import router from '/@/router';
+import { unique } from '/@/utils';
 
 export function useFrameKeepAlive() {
   const { currentRoute } = useRouter();
 
   function getAllFramePages(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
-    const res: AppRouteRecordRaw[] = [];
+    let res: AppRouteRecordRaw[] = [];
     for (const route of routes) {
       const { meta: { frameSrc } = {}, children } = route;
       if (frameSrc) {
@@ -21,6 +22,7 @@ export function useFrameKeepAlive() {
         res.push(...getAllFramePages(children));
       }
     }
+    res = unique(res, 'name');
     return res;
   }
 
@@ -30,6 +32,9 @@ export function useFrameKeepAlive() {
   const getFramePages = computed(() => {
     const ret =
       getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
+    console.log('======================');
+    console.log(ret);
+    console.log('======================');
     return ret;
   });