feat: add search page

src/layouts/default/content/index.less

@@ -1,18 +0,0 @@
-@import (reference) '../../../design/index.less';
-
-.layout-content {
-  position: relative;
-  flex: 1 1 auto;
-  min-height: 0;
-
-  &.fixed {
-    width: 1200px;
-    margin: 0 auto;
-  }
-
-  &__loading {
-    position: absolute;
-    top: 200px;
-    z-index: @page-loading-z-index;
-  }
-}

src/layouts/default/content/index.tsx

@@ -1,31 +0,0 @@
-import './index.less';
-
-import { defineComponent, unref } from 'vue';
-import { Loading } from '/@/components/Loading';
-
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-import PageLayout from '/@/layouts/page/index';
-export default defineComponent({
-  name: 'LayoutContent',
-  setup() {
-    const { getOpenPageLoading } = useTransitionSetting();
-    const { getLayoutContentMode, getPageLoading } = useRootSetting();
-
-    return () => {
-      return (
-        <div class={['layout-content', unref(getLayoutContentMode)]}>
-          {unref(getOpenPageLoading) && (
-            <Loading
-              loading={unref(getPageLoading)}
-              background="rgba(240, 242, 245, 0.6)"
-              absolute
-              class="layout-content__loading"
-            />
-          )}
-          <PageLayout />
-        </div>
-      );
-    };
-  },
-});

src/layouts/default/content/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="[prefixCls, getLayoutContentMode]">
+    <transition name="fade">
+      <Loading
+        v-if="getOpenPageLoading"
+        :loading="getPageLoading"
+        background="rgba(240, 242, 245, 0.6)"
+        absolute
+        :class="`${prefixCls}__loading`"
+      />
+    </transition>
+    <PageLayout />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import PageLayout from '/@/layouts/page/index';
+  import { Loading } from '/@/components/Loading';
+  import Transition from '/@/views/demo/comp/lazy/Transition.vue';
+
+  export default defineComponent({
+    name: 'LayoutContent',
+    components: { PageLayout, Loading, Transition },
+    setup() {
+      const { prefixCls } = useDesign('layout-content');
+      const { getOpenPageLoading } = useTransitionSetting();
+      const { getLayoutContentMode, getPageLoading } = useRootSetting();
+
+      return {
+        prefixCls,
+        getOpenPageLoading,
+        getLayoutContentMode,
+        getPageLoading,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-layout-content';
+
+  .@{prefix-cls} {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    &.fixed {
+      width: 1200px;
+      margin: 0 auto;
+    }
+
+    &__loading {
+      position: absolute;
+      top: 200px;
+      z-index: @page-loading-z-index;
+    }
+  }
+</style>

src/layouts/default/header/LayoutHeader.tsx

@@ -18,7 +18,7 @@ import { AppLogo } from '/@/components/Application';
 import UserDropdown from './UserDropdown';
 import LayoutMenu from '../menu';
 import LayoutBreadcrumb from './LayoutBreadcrumb.vue';
-import LockAction from '../lock/LockAction';
+import LockAction from './actions/LockAction';
 import LayoutTrigger from '../LayoutTrigger';
 import NoticeAction from './notice/NoticeActionItem.vue';
 import {
@@ -28,6 +28,8 @@ import {
   LockOutlined,
   BugOutlined,
 } from '@ant-design/icons-vue';
+
+import { AppSearch } from '/@/components/Application';
 import { useModal } from '/@/components/Modal';
 
 import { useFullscreen } from '/@/hooks/web/useFullScreen';
@@ -200,6 +202,8 @@ export default defineComponent({
     function renderAction() {
       return (
         <div class={`layout-header__action`}>
+          {unref(isPc) && <AppSearch class="layout-header__action-item" />}
+
           {unref(getUseErrorHandle) && unref(isPc) && (
             <TooltipItem title={t('layout.header.tooltipErrorLog')}>
               {() => (

src/layouts/default/header/LayoutMultipleHeader.less

@@ -1,5 +1,6 @@
 .multiple-tab-header {
   flex: 0 0 auto;
+  transition: width 0.2s;
 
   &.dark {
     margin-left: -1px;

src/layouts/default/header/index.less

@@ -131,7 +131,8 @@
         }
       }
 
-      &-icon {
+      &-icon,
+      span[role='img'] {
         color: @text-color-base;
       }
     }

src/layouts/default/index.tsx

@@ -4,9 +4,9 @@ import { defineComponent, unref, computed, ref } from 'vue';
 import { Layout, BackTop } from 'ant-design-vue';
 import LayoutHeader from './header/LayoutHeader';
 
-import LayoutContent from './content';
+import LayoutContent from './content/index.vue';
 import LayoutFooter from './footer';
-import LayoutLockPage from './lock/index.vue';
+import LayoutLockPage from '/@/views/sys/lock/index.vue';
 import LayoutSideBar from './sider';
 import SettingBtn from './setting/index.vue';
 import LayoutMultipleHeader from './header/LayoutMultipleHeader';

src/layouts/default/lock/index.vue

@@ -1,17 +0,0 @@
-<template>
-  <transition name="fade-bottom">
-    <LockPage v-if="getIsLock" />
-  </transition>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import LockPage from '/@/views/sys/lock/index.vue';
-  import { getIsLock } from '/@/hooks/web/useLockPage';
-  export default defineComponent({
-    name: 'LayoutLockPage',
-    components: { LockPage },
-    setup() {
-      return { getIsLock };
-    },
-  });
-</script>

src/layouts/default/setting/SettingDrawer.tsx

@@ -204,7 +204,6 @@ export default defineComponent({
       getCollapsedShowTitle,
       getMenuFixed,
       getCollapsed,
-      getShowSearch,
       getCanDrag,
       getTopMenuAlign,
       getAccordion,
@@ -214,7 +213,12 @@ export default defineComponent({
       getSplit,
     } = useMenuSetting();
 
-    const { getShowHeader, getFixed: getHeaderFixed, getHeaderBgColor } = useHeaderSetting();
+    const {
+      getShowHeader,
+      getFixed: getHeaderFixed,
+      getHeaderBgColor,
+      getShowSearch,
+    } = useHeaderSetting();
 
     const { getShowMultipleTab, getShowQuick } = useMultipleTabSetting();
 
@@ -274,10 +278,10 @@ export default defineComponent({
         }),
         renderSwitchItem(t('layout.setting.menuSearch'), {
           handler: (e) => {
-            baseHandler(HandlerEnum.MENU_SHOW_SEARCH, e);
+            baseHandler(HandlerEnum.HEADER_SEARCH, e);
           },
           def: unref(getShowSearch),
-          disabled: !unref(getShowMenuRef),
+          disabled: !unref(getShowHeader),
         }),
         renderSwitchItem(t('layout.setting.menuAccordion'), {
           handler: (e) => {

src/layouts/default/setting/enum.ts

@@ -28,6 +28,8 @@ export enum HandlerEnum {
   HEADER_THEME,
   HEADER_FIXED,
 
+  HEADER_SEARCH,
+
   TABS_SHOW_QUICK,
   TABS_SHOW,
 
@@ -94,6 +96,7 @@ export const routerTransitionOptions = [
   RouterTransitionEnum.ZOOM_OUT,
   RouterTransitionEnum.FADE_SIDE,
   RouterTransitionEnum.FADE_BOTTOM,
+  RouterTransitionEnum.FADE_SCALE,
 ].map((item) => {
   return {
     label: item,

src/layouts/default/setting/handler.ts

@@ -119,6 +119,9 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
       updateHeaderBgColor(value);
       return { headerSetting: { bgColor: value } };
 
+    case HandlerEnum.HEADER_SEARCH:
+      return { headerSetting: { showSearch: value } };
+
     case HandlerEnum.HEADER_FIXED:
       return { headerSetting: { fixed: value } };
 

src/layouts/default/sider/index.tsx

@@ -100,7 +100,7 @@ export default defineComponent({
           flex: `0 0 ${width}`,
           maxWidth: width,
           minWidth: width,
-          transition: 'all 0.15s',
+          transition: 'all 0.2s',
         };
       }
     );