修改菜单

src/common/components/firstMenu/index.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
+import { defineComponent, PropType, computed, ref } from 'vue';
 
 interface Key {
     [propName: string]: string;
@@ -35,10 +35,17 @@ export default defineComponent({
             default: '',
             type: String,
         },
+        selectedKey: {
+            default: ['0'],
+            type: Array as PropType<string[]>,
+        },
     },
     components: {},
     setup(props, context) {
         const current = ref<string[]>(['0']);
+        computed(() => {
+            current.value = props.selectedKey;
+        });
         function menuClick(value: any) {
             const index = +value.key;
             context.emit('selectMenu', props.list[index]);

src/layout/components/header.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <img src="../../assets/images/logoHeader.png" />
+    <span>深圳市多元世纪信息技术股份有限公司</span>
+  </div>
+  <div class="m-layout-header-right">
+    <div @click="openDrawer">
+      <span>{{ username }}，您好！</span>
+    </div>
+    <div class="relative">
+      <!-- <a-input-search ref="userNameInput"
+                          class="searchInput"
+                          readonly
+                          placeholder="请输入代码/名称"
+                          @pressEnter="search">
+          </a-input-search> -->
+      <!-- <a-icon type="search" /> -->
+    </div>
+    <div class="news-container">
+      <a-badge @click="openNotice">
+        <svg class="icon svg-icon"
+             aria-hidden="true">
+          <use xlink:href="#icon-xiaoxi"></use>
+        </svg>
+      </a-badge>
+    </div>
+    <div>
+      <a-popover v-model:visible="visible"
+                 trigger="click"
+                 placement="bottomRight">
+        <template #content>
+          <div v-for="item in setMenu"
+               @click="chooseSetMenu(item.path)"
+               :key="item.path">{{ item.name }}</div>
+        </template>
+        <a-avatar :size="24">
+          <template #icon>
+            <UserOutlined />
+          </template>
+        </a-avatar>
+      </a-popover>
+      <Setting />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, provide } from 'vue';
+import APP from '@/services';
+import { openModal } from '@/common/setup/modal/index';
+
+// 设置
+const setFn = () => {
+    const visible = ref<boolean>(false);
+    const chooseSetupItem = ref<string>('');
+    provide('ControlModal', chooseSetupItem);
+    const setMenu = [
+        // { name: '修改密码', path: 'password' },
+        // { name: '收货地址', path: 'addresss' },
+        // // {name: '发票', path: 'setup-password'},
+        // { name: '手机号码绑定/解绑', path: 'phone' },
+        // { name: '关于我们', path: 'aboutUs' },
+        { name: '退出', path: 'logout' },
+    ];
+    const { openAction } = openModal('logout');
+    function chooseSetMenu(path: string) {
+        // chooseSetupItem.value = path;
+        openAction();
+        console.log(path);
+        visible.value = false;
+    }
+
+    return { visible, setMenu, chooseSetMenu };
+};
+
+// 搜索
+const onSearch = () => {
+    function search(value: string) {
+        console.log(value);
+    }
+    return { search };
+};
+export default defineComponent({
+    props: {
+        collapsed: {
+            default: true,
+            type: Boolean,
+        },
+    },
+    setup() {
+        const username = APP.get('username');
+        const { openAction: openNotice } = openModal('notice');
+        return {
+            username,
+            openNotice,
+            ...setFn(),
+            ...onSearch(),
+        };
+    },
+});
+</script>

src/layout/components/main.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="exposure">
+    <firstMenu :list="list"
+               :value="'title'"
+               :selectedKey="selectedKey"
+               @selectMenu="selectMenu" />
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, ref, Ref, watchEffect } from 'vue';
+import firstMenu from '@/common/components/firstMenu/index.vue';
+import { useRouter } from 'vue-router';
+import { OperationTabMenu } from '@/services/go/commonService/interface';
+
+export default defineComponent({
+    name: 'main',
+    components: {
+        firstMenu,
+    },
+    setup() {
+        const router = useRouter();
+        const list = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
+        const selectedKey = ref<string[]>(['0']);
+        // watchEffect(() => {
+        //     list.value.forEach((e, i) => {
+        //         if (router.currentRoute.value.fullPath.includes(e.code)) {
+        //             console.log('i', i);
+
+        //             selectedKey.value = [`${i}`];
+        //         }
+        //     });
+        // });
+        // 切换路由
+        function selectMenu(item: OperationTabMenu) {
+            router.push({ name: item.code });
+        }
+
+        return { selectMenu, list, selectedKey };
+    },
+});
+</script>
+
+<style lang="less">
+.sexposure {
+}
+</style
+>;

src/layout/components/menu.vue

@@ -0,0 +1,118 @@
+<template>
+  <a-menu theme="dark"
+          mode="inline"
+          class="left-menu"
+          v-model:selectedKeys="selectedKeys"
+          v-model:openKeys="openKeys"
+          @click="menuClick">
+    <a-sub-menu v-for="item in menuList"
+                :key="item.code">
+      <template #title>
+        <span>
+          <svg class="icon svg-icon"
+               aria-hidden="true">
+            <use :xlink:href="fontIcon(item.code)"></use>
+          </svg>
+          <span class="menu-item_title"
+                v-show="!collapsed">{{ item.title }}</span>
+        </span>
+      </template>
+      <a-menu-item :key="subItem.code"
+                   v-for="subItem in item.children">
+        <span>{{ subItem.title }}</span>
+      </a-menu-item>
+    </a-sub-menu>
+  </a-menu>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, SetupContext, unref, watchEffect } from 'vue';
+import APP from '@/services';
+import { initData } from '@/common/methods';
+import { OperationTabMenu } from '@/services/go/commonService/interface';
+
+function handleMenu(context: SetupContext) {
+    const selectedKeys = ref<string[]>(['1-1']);
+    const openKeys = ref<string[]>(['1']);
+    const preOpenKeys = ref<string[]>(['1']);
+    const menuList = APP.getRef('menus');
+    function menuClick(value: any) {
+        const arr = value.keyPath.reverse();
+        const first = menuList.value.find((e: OperationTabMenu) => e.code === arr[0]);
+        if (first) {
+            const seconde = first.children.find((e: OperationTabMenu) => e.code === arr[1]);
+            seconde && context.emit('chooseMenu', seconde);
+        }
+    }
+    // 一级菜单图标
+    function fontIcon(code: string): string {
+        let result = 'icon-jinrongfenxi';
+        switch (code) {
+            case 'market':
+                result = 'icon-jinrongfenxi';
+                break;
+            case 'info':
+                result = 'icon-zhangdan';
+                break;
+            case 'business':
+                result = 'icon-renwu';
+                break;
+            case 'manage':
+                result = 'icon-quanxian';
+                break;
+            case 'search':
+                result = 'icon-chazhaojilu';
+                break;
+            case 'report':
+                result = 'icon-bingtu';
+                break;
+        }
+        return '#' + result;
+    }
+    return { selectedKeys, menuList, openKeys, preOpenKeys, menuClick, fontIcon };
+}
+
+export default defineComponent({
+    props: {
+        collapsed: {
+            default: true,
+            type: Boolean,
+        },
+    },
+    setup(props, context) {
+        const { selectedKeys, openKeys, menuList, menuClick, preOpenKeys, fontIcon } = handleMenu(context);
+        watchEffect(() => {
+            if (props.collapsed) {
+                preOpenKeys.value = openKeys.value;
+                openKeys.value = [];
+            } else {
+                openKeys.value = preOpenKeys.value;
+            }
+        });
+        initData(() => {
+            // 处理路由跳转到菜单栏里第一个对应的页面
+            const list = unref(menuList);
+            if (list.length && list[0].children && list[0].children.length) {
+                // 处理修改具体某个菜单栏，主要处理页面刷新
+                let firstIndex = 0,
+                    secondeIndex = 0;
+                for (let i = 0; i < list.length; i++) {
+                    for (let j = 0; j < list[i].children.length; j++) {
+                        if (window.location.hash.includes(list[i].children[j].code)) {
+                            firstIndex = i;
+                            secondeIndex = j;
+                            break;
+                        }
+                    }
+                }
+                const temp = list[firstIndex].children[secondeIndex];
+                const code = temp.code;
+                selectedKeys.value = [code];
+                openKeys.value = [list[firstIndex].code];
+                context.emit('chooseMenu', temp);
+            }
+        });
+        return { selectedKeys, openKeys, menuList, menuClick, fontIcon };
+    },
+});
+</script>

src/layout/components/top.vue

@@ -0,0 +1,244 @@
+<template>
+  <a-layout class="layout-top">
+    <a-layout-header class="m-layout-header">
+      <Header />
+    </a-layout-header>
+    <a-layout class="middleLayout">
+      <a-layout-sider class="m-layout-left"
+                      width="180"
+                      v-model:collapsed="collapsed"
+                      @collapse="collapse"
+                      collapsible>
+        <Menu @chooseMenu="chooseMenu"
+              :collapsed="collapsed" />
+      </a-layout-sider>
+      <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
+        <!-- <Drawer :title="'挂牌'"
+                :visible="visible"></Drawer> -->
+        <!-- <Main /> -->
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+<script lang="ts">
+import { UserOutlined } from '@ant-design/icons-vue';
+import { defineComponent, ref, provide, unref } from 'vue';
+import Setting from '@/views/setting/index.vue';
+import CapitalInfo from '@/common/components/capitalInfo/index.vue';
+import SecondMenu from '@/common/components/secondeMenu/index.vue';
+import APP from '@/services';
+import { initData } from '@/common/methods';
+import { useRouter } from 'vue-router';
+import Drawer from '@/common/components/drawer/index.vue';
+import Header from './header.vue';
+import Menu from './menu.vue';
+import Main from './main.vue';
+import { OperationTabMenu } from '@/services/go/commonService/interface';
+
+//     // 配置是否显示下半部分
+//     function setShowBottomPart(code: string): boolean {
+//         // 显示下半部分 这里保存的是市场对应的 code
+//         const show: string[] = [''];
+//         return show.includes(code);
+//     }
+
+export default defineComponent({
+    name: 'layout-top',
+    components: {
+        Setting,
+        UserOutlined,
+        CapitalInfo,
+        SecondMenu,
+        Drawer,
+        Main,
+        Menu,
+        Header,
+    },
+    setup(props, context) {
+        const router = useRouter();
+        const list = ref<OperationTabMenu[]>([]);
+        // 配置是否显示下半部分
+        function setShowBottomPart(code: string) {
+            // 显示下半部分 这里保存的是市场对应的 code
+            const show: string[] = [''];
+            context.emit('chooseMenu', show.includes(code));
+        }
+        // 选中菜单
+        function chooseMenu(value: OperationTabMenu) {
+            list.value = value.children;
+            setShowBottomPart(value.code);
+            router.push({ name: value.code as string });
+        }
+        // 选中菜单的数据
+        provide('thirdMenuList', list);
+        // 控制菜单是否隐藏
+        const collapsed = ref<boolean>(false);
+        function collapse(show: boolean) {
+            collapsed.value = show;
+        }
+
+        return {
+            collapsed,
+            collapse,
+            chooseMenu,
+        };
+    },
+});
+</script>
+<style lang="less">
+.layout-top {
+    .flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    .m-layout-header {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        background: @m-grey0;
+        color: @m-grey1;
+        padding: 0 20px;
+        .flex();
+        justify-content: space-between;
+        img {
+            margin-right: 16px;
+            width: 20px;
+            height: 20px;
+        }
+        .searchInput.ant-input-affix-wrapper {
+            width: 240px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            background: @m-grey9;
+            border: 0;
+            vertical-align: middle;
+            padding-left: 40px;
+            position: relative;
+            .rounded-corners(15px);
+            .ant-input {
+                background: @m-grey9;
+                color: @m-white0;
+            }
+            .ant-input-suffix {
+                margin-left: -215px;
+                .ant-input-search-icon {
+                    color: @m-grey10;
+                }
+            }
+        }
+        .m-layout-header-right {
+            .flex();
+            .news-container {
+                padding-left: 10px;
+                padding-right: 16px;
+                .ant-badge {
+                    margin-top: 7px;
+                    cursor: pointer;
+                    > svg {
+                        font-size: 24px;
+                    }
+                    .ant-badge-dot {
+                        box-shadow: 0 0 0 1px @m-red0;
+                    }
+                }
+            }
+
+            .ant-avatar-icon {
+                margin-top: -3px;
+            }
+        }
+    }
+
+    .middleLayout {
+        flex: 1;
+        width: 100%;
+        .inlineflex;
+        border-bottom: 1px solid @m-black2;
+        .m-layout-left {
+            height: 100%;
+            background: @m-black4;
+            .ant-layout-sider-children {
+                ul.ant-menu.ant-menu-inline {
+                    li.ant-menu-submenu {
+                        padding-bottom: 0;
+                        .ant-menu-submenu-title {
+                            color: @m-grey2;
+                            font-size: 16px;
+                            height: 60px;
+                            line-height: 60px;
+                            margin-top: 0;
+                            margin-bottom: 0;
+                            padding: 5px 0;
+                            .icon {
+                                font-size: 20px;
+                            }
+                            .menu-item_title {
+                                display: inline-block;
+                                font-size: 16px;
+                                margin-left: 15px;
+                            }
+                        }
+                        .ant-menu-sub {
+                            .ant-menu-item {
+                                padding-left: 60px !important;
+                                margin-top: 5px;
+                                margin-bottom: 5px;
+                            }
+                        }
+                    }
+                    li.ant-menu-submenu-open {
+                        .ant-menu-submenu-title {
+                            color: @m-white0;
+                            .icon {
+                                color: @m-white0;
+                            }
+                        }
+                        .ant-menu-sub {
+                            .ant-menu-item.ant-menu-item-selected {
+                                background-color: @m-blue0;
+                            }
+                        }
+                    }
+                }
+            }
+            .ant-layout-sider-trigger {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                background: @m-black0;
+                position: absolute;
+            }
+        }
+        .ant-menu-vertical {
+            .ant-menu-submenu-vertical {
+                height: 60px;
+                line-height: 60px;
+                padding: 5px 0;
+                .ant-menu-submenu-title {
+                    height: 50px;
+                    line-height: 50px;
+                    .icon {
+                        font-size: 20px;
+                    }
+                }
+            }
+            .ant-menu-submenu {
+                .ant-menu-submenu-title {
+                    .menu-item_title {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .bottomLayout {
+        width: 100%;
+        flex: none;
+        height: @bottomHeight;
+        .inlineflex;
+    }
+}
+</style>

src/layout/index.vue

@@ -1,64 +1,63 @@
 <template>
-    <div class="layout">
-        <LayoutTop @chooseMenu="chooseMenu" />
-        <template v-if="isShowBottomPart">
-            <div class="sliderLayout">
-                <div class="shortLine"></div>
-            </div>
-            <LayoutBottom />
-        </template>
-    </div>
+  <div class="layout">
+    <LayoutTop @chooseMenu="chooseMenu" />
+    <template v-if="isShowBottomPart">
+      <div class="sliderLayout">
+        <div class="shortLine"></div>
+      </div>
+      <LayoutBottom />
+    </template>
+  </div>
 </template>
 <script lang="ts">
-    import LayoutTop from './top.vue';
-    import LayoutBottom from './bottom.vue';
+import LayoutTop from './components/top.vue';
+import LayoutBottom from './components/bottom.vue';
+import { defineComponent, ref } from 'vue';
 
-    import { defineComponent, ref } from 'vue';
-
-    // 控制下半部分是否显示
-    function submitBottomIsShow() {
-        const isShowBottomPart = ref<boolean>(false);
-        function chooseMenu(value: boolean) {
-            isShowBottomPart.value = value;
-        }
-        return { isShowBottomPart, chooseMenu };
+// 控制下半部分是否显示
+function submitBottomIsShow() {
+    const isShowBottomPart = ref<boolean>(false);
+    function chooseMenu(value: boolean) {
+        isShowBottomPart.value = value;
     }
+    return { isShowBottomPart, chooseMenu };
+}
 
-    export default defineComponent({
-        name: 'layout',
-        components: {
-            LayoutTop,
-            LayoutBottom,
-        },
-        setup() {
-            const { isShowBottomPart, chooseMenu } = submitBottomIsShow();
-            const visible = ref<boolean>(true);
+export default defineComponent({
+    name: 'layout',
+    components: {
+        LayoutTop,
+        LayoutBottom,
+    },
+    setup() {
+        const { isShowBottomPart, chooseMenu } = submitBottomIsShow();
+        const visible = ref<boolean>(true);
 
-            return { isShowBottomPart, chooseMenu, visible };
-        },
-    });
+        return { isShowBottomPart, chooseMenu, visible };
+    },
+});
 </script>
 <style lang="less">
-    .layout {
-        .flex;
+.layout {
+    .flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    .sliderLayout {
         width: 100%;
-        height: 100%;
-        flex-direction: column;
-        .sliderLayout {
-            width: 100%;
-            height: 4px;
-            background: #242a2e;
-            border-top: 1px solid @m-grey5;
-            border-bottom: 1px solid @m-grey5;
-            position: relative;
-            .shortLine {
-                width: 30px;
-                height: 2px;
-                background: #4b5861;
-                border-radius: 1px;
-                .position(absolute, 50%, auto, auto, 50%);
-                transform: translate(-50%, -50%);
-            }
+        height: 4px;
+        background: #242a2e;
+        border-top: 1px solid @m-grey5;
+        border-bottom: 1px solid @m-grey5;
+        position: relative;
+        .shortLine {
+            width: 30px;
+            height: 2px;
+            background: #4b5861;
+            border-radius: 1px;
+            .position(absolute, 50%, auto, auto, 50%);
+            transform: translate(-50%, -50%);
         }
     }
+}
 </style>

src/layout/main.vue

@@ -1,34 +0,0 @@
-<template>
-    <!-- 采购 -->
-    <div class="exposure">
-        <firstMenu :list="list" :value="'title'" @selectMenu="selectMenu" />
-        <router-view />
-    </div>
-</template>
-
-<script lang="ts">
-    import { defineComponent } from 'vue';
-    import firstMenu from '@/common/components/firstMenu/index.vue';
-    import { handleRouterMenu } from '@/common/setup/router/index';
-    import { initData } from '@/common/methods';
-
-    export default defineComponent({
-        name: 'exposure',
-        components: {
-            firstMenu,
-        },
-        setup() {
-            const { list, selectMenu, getMenuList } = handleRouterMenu();
-            initData(() => {
-                getMenuList();
-                console.log('list', list);
-            });
-            return { list, selectMenu };
-        },
-    });
-</script>
-
-<style lang="less">
-    .sexposure {
-    }</style
->;

src/layout/top.vue

@@ -1,465 +0,0 @@
-<template>
-    <a-layout class="layout-top">
-        <a-layout-header class="m-layout-header">
-            <div>
-                <img src="../assets/images/logoHeader.png" />
-                <span>深圳市多元世纪信息技术股份有限公司</span>
-            </div>
-            <div class="m-layout-header-right">
-                <div @click="openDrawer">
-                    <span>{{ username }}，您好！</span>
-                </div>
-                <div class="relative">
-                    <!-- <a-input-search ref="userNameInput"
-                          class="searchInput"
-                          readonly
-                          placeholder="请输入代码/名称"
-                          @pressEnter="search">
-          </a-input-search> -->
-                    <!-- <a-icon type="search" /> -->
-                </div>
-                <div class="news-container">
-                    <a-badge @click="openNotice">
-                        <svg class="icon svg-icon" aria-hidden="true">
-                            <use xlink:href="#icon-xiaoxi"></use>
-                        </svg>
-                    </a-badge>
-                </div>
-                <div>
-                    <a-popover v-model:visible="visible" trigger="click" placement="bottomRight">
-                        <template #content>
-                            <div v-for="item in setMenu" @click="chooseSetMenu(item.path)" :key="item.path">{{ item.name }}</div>
-                        </template>
-                        <a-avatar :size="24">
-                            <template #icon>
-                                <UserOutlined />
-                            </template>
-                        </a-avatar>
-                    </a-popover>
-                    <Setting />
-                </div>
-            </div>
-        </a-layout-header>
-        <a-layout class="middleLayout">
-            <a-layout-sider class="m-layout-left" width="180" v-model:collapsed="collapsed" @collapse="collapse" collapsible>
-                <a-menu theme="dark" mode="inline" class="left-menu" v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" @click="menuClick">
-                    <a-sub-menu v-for="item in menuList" :key="item.code">
-                        <template #title>
-                            <span>
-                                <svg class="icon svg-icon" aria-hidden="true">
-                                    <use :xlink:href="fontIcon(item.code)"></use>
-                                </svg>
-                                <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
-                            </span>
-                        </template>
-                        <a-menu-item :key="subItem.code" v-for="subItem in item.children">
-                            <span>{{ subItem.title }}</span>
-                        </a-menu-item>
-                    </a-sub-menu>
-                </a-menu>
-            </a-layout-sider>
-            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
-                <Drawer :title="'挂牌'" :visible="visible"></Drawer>
-                <!-- <Main /> -->
-                <router-view />
-            </a-layout-content>
-        </a-layout>
-    </a-layout>
-</template>
-<script lang="ts">
-    import { UserOutlined } from '@ant-design/icons-vue';
-    import { defineComponent, ref, provide, unref } from 'vue';
-    import Setting from '@/views/setting/index.vue';
-    import CapitalInfo from '@/common/components/capitalInfo/index.vue';
-    import SecondMenu from '@/common/components/secondeMenu/index.vue';
-    import APP from '@/services';
-    import { initData } from '@/common/methods';
-    import { useRouter } from 'vue-router';
-    import { openModal } from '@/common/setup/modal/index';
-    import Drawer from '@/common/components/drawer/index.vue';
-    import Main from './main.vue';
-
-    // 菜单栏
-    const handleMenu = () => {
-        const collapsed = ref<boolean>(false);
-        const selectedKeys = ref<string[]>(['1-1']);
-        const openKeys = ref<string[]>(['1']);
-        const preOpenKeys = ref<string[]>(['1']);
-        const menuList = APP.getRef('menus');
-        // const menuList = [
-        //     {
-        //       key: '1',
-        //       title: '市场',
-        //       code: 'market',
-        //       children: [
-        //         {
-        //           key: '1-1',
-        //           title: '现货贸易',
-        //           code: ''
-        //         },
-        //       ],
-        //     },
-        //     {
-        //       key: '2',
-        //       title: '查询',
-        //       code: 'search',
-        //       children: [
-        //         {
-        //           key: '2-1',
-        //           title: '单据记录',
-        //           code: ''
-        //         },
-        //         {
-        //           key: '2-2',
-        //           title: '资金流水',
-        //           code: ''
-        //         },
-        //         {
-        //           key: '2-3',
-        //           title: '出入库',
-        //           code: ''
-        //         },
-        //         {
-        //           key: '2-4',
-        //           title: '登录日志',
-        //           code: ''
-        //         },
-        //       ],
-        //     },
-        //     {
-        //       key: '3',
-        //       title: '报表',
-        //       code: 'report'
-        //     },
-        //   ];
-        const router = useRouter();
-        // 控制菜单是否隐藏
-        function collapse(collapsed: boolean) {
-            if (collapsed) {
-                preOpenKeys.value = openKeys.value;
-                openKeys.value = [];
-            } else {
-                openKeys.value = preOpenKeys.value;
-            }
-        }
-        // 配置是否显示下半部分
-        function setShowBottomPart(code: string): boolean {
-            // 显示下半部分 这里保存的是市场对应的 code
-            const show: string[] = [''];
-            return show.includes(code);
-        }
-        function menuClick(value: any) {
-            console.log('菜单： ', value);
-            const key = value.key;
-            setShowBottomPart(key);
-            router.push({ name: key });
-        }
-        // 一级菜单图标
-        function fontIcon(code: string): string {
-            let result = 'icon-jinrongfenxi';
-            switch (code) {
-                case 'market':
-                    result = 'icon-jinrongfenxi';
-                    break;
-                case 'info':
-                    result = 'icon-zhangdan';
-                    break;
-                case 'business':
-                    result = 'icon-renwu';
-                    break;
-                case 'manage':
-                    result = 'icon-quanxian';
-                    break;
-                case 'search':
-                    result = 'icon-chazhaojilu';
-                    break;
-                case 'report':
-                    result = 'icon-bingtu';
-                    break;
-            }
-            return '#' + result;
-        }
-        return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, setShowBottomPart, fontIcon };
-    };
-
-    function testAction() {
-        const { openAction } = openModal('drawer');
-        return { openDrawer: openAction };
-    }
-
-    // 设置
-    const setFn = () => {
-        const visible = ref<boolean>(false);
-        const chooseSetupItem = ref<string>('');
-        provide('ControlModal', chooseSetupItem);
-        const setMenu = [
-            // { name: '修改密码', path: 'password' },
-            // { name: '收货地址', path: 'addresss' },
-            // // {name: '发票', path: 'setup-password'},
-            // { name: '手机号码绑定/解绑', path: 'phone' },
-            // { name: '关于我们', path: 'aboutUs' },
-            { name: '退出', path: 'logout' },
-        ];
-        const { openAction } = openModal('logout');
-        function chooseSetMenu(path: string) {
-            // chooseSetupItem.value = path;
-            openAction();
-            console.log(path);
-            visible.value = false;
-        }
-
-        return { visible, setMenu, chooseSetMenu };
-    };
-    // 搜索
-    const onSearch = () => {
-        function search(value: string) {
-            console.log(value);
-        }
-        return { search };
-    };
-
-    // 控制消息弹窗
-    function controlNotice() {
-        const { openAction } = openModal('notice');
-        return { openNotice: openAction };
-    }
-    export default defineComponent({
-        name: 'layout-top',
-        components: {
-            Setting,
-            UserOutlined,
-            CapitalInfo,
-            SecondMenu,
-            Drawer,
-            Main,
-        },
-        setup(props, context) {
-            const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, setShowBottomPart, fontIcon } = handleMenu();
-            const router = useRouter();
-            // 控制消息弹窗
-            const { openNotice } = controlNotice();
-
-            initData(() => {
-                // 处理路由跳转到菜单栏里第一个对应的页面
-                const list = unref(menuList);
-                if (list.length && list[0].children && list[0].children.length) {
-                    // 处理修改具体某个菜单栏，主要处理页面刷新
-                    let firstIndex = 0,
-                        secondeIndex = 0;
-                    for (let i = 0; i < list.length; i++) {
-                        for (let j = 0; j < list[i].children.length; j++) {
-                            if (window.location.hash.includes(list[i].children[j].code)) {
-                                firstIndex = i;
-                                secondeIndex = j;
-                                break;
-                            }
-                        }
-                    }
-                    const code = list[firstIndex].children[secondeIndex].code;
-                    // selectedKeys.value.length = 0;
-                    // selectedKeys.value.push(code);
-                    // openKeys.value.length = 0;
-                    // openKeys.value.push(list[firstIndex].code);
-                    selectedKeys.value = [code];
-                    openKeys.value = [list[firstIndex].code];
-                    context.emit('chooseMenu', setShowBottomPart(code));
-                    // 处理页面刷新时候 引发路由乱跳的bug
-                    if (router.currentRoute.value.fullPath === '/home') {
-                        router.push(code);
-                    } else {
-                    }
-                }
-            });
-
-            const { openDrawer } = testAction();
-
-            const { visible, setMenu, chooseSetMenu } = setFn();
-            const username = APP.get('username');
-            const { search } = onSearch();
-            const searchName = ref<string[]>(['']);
-            return {
-                collapsed,
-                collapse,
-                selectedKeys,
-                openKeys,
-                menuClick,
-                username,
-                menuList,
-                visible,
-                setMenu,
-                chooseSetMenu,
-                fontIcon,
-
-                openNotice,
-
-                openDrawer,
-            };
-        },
-    });
-</script>
-<style lang="less">
-    .layout-top {
-        .flex;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        .m-layout-header {
-            width: 100%;
-            height: 40px;
-            line-height: 40px;
-            background: @m-grey0;
-            color: @m-grey1;
-            padding: 0 20px;
-            .flex();
-            justify-content: space-between;
-            img {
-                margin-right: 16px;
-                width: 20px;
-                height: 20px;
-            }
-            .searchInput.ant-input-affix-wrapper {
-                width: 240px;
-                height: 30px;
-                line-height: 30px;
-                font-size: 14px;
-                background: @m-grey9;
-                border: 0;
-                vertical-align: middle;
-                padding-left: 40px;
-                position: relative;
-                .rounded-corners(15px);
-                .ant-input {
-                    background: @m-grey9;
-                    color: @m-white0;
-                }
-                .ant-input-suffix {
-                    margin-left: -215px;
-                    .ant-input-search-icon {
-                        color: @m-grey10;
-                    }
-                }
-            }
-            // .relative {
-            //     position: relative;
-            //     .a-icon {
-            //         font-size: 14px;
-            //         .position(absolute, 50%, auto, auto, 10px);
-            //         margin-top: -7px;
-            //         color: @m-grey10;
-            //         z-index: 10;
-            //     }
-            // }
-            .m-layout-header-right {
-                .flex();
-                .news-container {
-                    padding-left: 10px;
-                    padding-right: 16px;
-                    .ant-badge {
-                        margin-top: 7px;
-                        cursor: pointer;
-                        > svg {
-                            font-size: 24px;
-                        }
-                        .ant-badge-dot {
-                            box-shadow: 0 0 0 1px @m-red0;
-                        }
-                    }
-                }
-
-                .ant-avatar-icon {
-                    margin-top: -3px;
-                }
-            }
-        }
-
-        .middleLayout {
-            flex: 1;
-            width: 100%;
-            .inlineflex;
-            border-bottom: 1px solid @m-black2;
-            .m-layout-left {
-                height: 100%;
-                background: @m-black4;
-                .ant-layout-sider-children {
-                    ul.ant-menu.ant-menu-inline {
-                        li.ant-menu-submenu {
-                            padding-bottom: 0;
-                            .ant-menu-submenu-title {
-                                color: @m-grey2;
-                                font-size: 16px;
-                                height: 60px;
-                                line-height: 60px;
-                                margin-top: 0;
-                                margin-bottom: 0;
-                                padding: 5px 0;
-                                .icon {
-                                    font-size: 20px;
-                                }
-                                .menu-item_title {
-                                    display: inline-block;
-                                    font-size: 16px;
-                                    margin-left: 15px;
-                                }
-                            }
-                            .ant-menu-sub {
-                                .ant-menu-item {
-                                    padding-left: 60px !important;
-                                    margin-top: 5px;
-                                    margin-bottom: 5px;
-                                }
-                            }
-                        }
-                        li.ant-menu-submenu-open {
-                            .ant-menu-submenu-title {
-                                color: @m-white0;
-                                .icon {
-                                    color: @m-white0;
-                                }
-                            }
-                            .ant-menu-sub {
-                                .ant-menu-item.ant-menu-item-selected {
-                                    background-color: @m-blue0;
-                                }
-                            }
-                        }
-                    }
-                }
-                .ant-layout-sider-trigger {
-                    width: 100%;
-                    height: 40px;
-                    line-height: 40px;
-                    background: @m-black0;
-                    position: absolute;
-                }
-            }
-            .ant-menu-vertical {
-                .ant-menu-submenu-vertical {
-                    height: 60px;
-                    line-height: 60px;
-                    padding: 5px 0;
-                    .ant-menu-submenu-title {
-                        height: 50px;
-                        line-height: 50px;
-                        .icon {
-                            font-size: 20px;
-                        }
-                    }
-                }
-                .ant-menu-submenu {
-                    .ant-menu-submenu-title {
-                        .menu-item_title {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-
-        .bottomLayout {
-            width: 100%;
-            flex: none;
-            height: @bottomHeight;
-            .inlineflex;
-        }
-    }
-</style>

src/router/index.ts

@@ -1,6 +1,6 @@
 import * as EnumType from '@/common/constants/routerName';
+import Main from '@/layout/components/main.vue';
 import Layout from '@/layout/index.vue';
-import Main from '@/layout/main.vue';
 import { isLogin } from '@/services/bus/login';
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import eventBus from '../utils/eventBus';