perf: layout组件文件目录调整

This commit is contained in:
rd
2025-08-18 10:09:41 +08:00
parent dade534122
commit 7c7704c078
23 changed files with 11 additions and 66 deletions

View File

@ -1,52 +0,0 @@
<!--
* @Author: 田鑫
* @Date: 2023-03-05 18:14:16
* @LastEditors: 田鑫
* @LastEditTime: 2023-03-05 19:17:52
* @Description:
-->
<script lang="ts" setup>
import type { RouteLocationNormalized } from 'vue-router';
const router = useRouter();
const route = useRoute();
const matched = computed(() => {
if (route.matched.length === 1 && route.matched[0].path === '/') {
return [];
} else {
return route.matched.reduce((t: RouteLocationNormalized[], o) => {
const isExist = t.find((c) => c.name === o.name);
return isExist ? t : [...t, router.resolve(o)];
}, []);
}
});
</script>
<template>
<view></view>
<!-- <a-breadcrumb class="container-breadcrumb">
<a-breadcrumb-item v-for="{ meta, name } in matched" :key="name">
<router-link v-slot="{ href, navigate }" :to="{ name }" custom>
<a-link v-if="meta.needNavigate" :href="href" @click="navigate">{{
meta.locale ? meta.locale : '主页'
}}</a-link>
<a-link v-else disabled>{{ meta.locale ? meta.locale : '主页' }}</a-link>
</router-link>
</a-breadcrumb-item>
</a-breadcrumb> -->
</template>
<style scoped lang="scss">
.container-breadcrumb {
margin: 16px 0;
:deep(.arco-breadcrumb-item) {
> a {
color: rgb(var(--gray-6));
}
&:last-child {
color: rgb(var(--gray-8));
}
}
}
</style>

View File

@ -1,5 +1,2 @@
export { default as Navbar } from './navbar/index.vue';
export { default as Menu } from './menu/index.vue';
export { default as TabBar } from './tab-bar/index.vue'; export { default as TabBar } from './tab-bar/index.vue';
export { default as Breadcrumb } from './breadcrumb/index.vue';
export { default as ModalSimple } from './modal/index.vue'; export { default as ModalSimple } from './modal/index.vue';

View File

@ -1,5 +1,7 @@
<script setup> <script setup>
import { Layout } from 'ant-design-vue'; import { Layout } from 'ant-design-vue';
import Navbar from "./components/navbar"
import SiderBar from "./components/siderBar"
import { useAppStore } from '@/stores'; import { useAppStore } from '@/stores';
import { useResponsive } from '@/hooks'; import { useResponsive } from '@/hooks';
@ -17,10 +19,6 @@ const userStore = useUserStore();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const Header = Layout.Header;
const Sider = Layout.Sider;
const Content = Layout.Content;
useResponsive(true); useResponsive(true);
const navbarHeight = `52px`; const navbarHeight = `52px`;
// const renderMenu = computed(() => appStore.menu && !appStore.topMenu); // const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
@ -59,11 +57,11 @@ const checkHasInviteCode = () => {
<template> <template>
<Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full"> <Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
<JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" /> <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
<Header class="layout-header-wrap"> <Layout.Header class="layout-header-wrap">
<base-navbar /> <Navbar />
</Header> </Layout.Header>
<Layout class="flex layout-content-wrap"> <Layout class="flex layout-content-wrap">
<Sider <Layout.Sider
v-if="showSider" v-if="showSider"
class="layout-sider" class="layout-sider"
v-model="collapsed" v-model="collapsed"
@ -73,9 +71,9 @@ const checkHasInviteCode = () => {
@collapse="setCollapsed" @collapse="setCollapsed"
> >
<section class="menu-wrapper"> <section class="menu-wrapper">
<base-menu /> <SiderBar />
</section> </section>
</Sider> </Layout.Sider>
<Layout class="flex-1 layout-content"> <Layout class="flex-1 layout-content">
<div class="px-24px py-16px"> <div class="px-24px py-16px">
<layout-page /> <layout-page />

View File

Before

Width:  |  Height:  |  Size: 639 B

After

Width:  |  Height:  |  Size: 639 B

View File

@ -84,7 +84,7 @@ import { useEnterpriseStore } from '@/stores/modules/enterprise';
import { useSidebarStore } from '@/stores/modules/side-bar'; import { useSidebarStore } from '@/stores/modules/side-bar';
import { useUserStore } from '@/stores'; import { useUserStore } from '@/stores';
import ExitAccountModal from '@/components/_base/exit-account-modal'; import ExitAccountModal from '../exit-account-modal';
import DownloadCenterModal from '../task-center-modal'; import DownloadCenterModal from '../task-center-modal';
import icon1 from '@/assets/option.svg'; import icon1 from '@/assets/option.svg';

View File

@ -1,4 +1,5 @@
<script lang="tsx"> <script lang="tsx">
import { Menu } from 'ant-design-vue';
import type { RouteMeta, RouteRecordRaw } from 'vue-router'; import type { RouteMeta, RouteRecordRaw } from 'vue-router';
import { useAppStore } from '@/stores'; import { useAppStore } from '@/stores';

View File

@ -9,6 +9,7 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
export default function useMenuTree() { export default function useMenuTree() {
const router = useRouter(); const router = useRouter();
const appRoutes = router.options?.routes ?? []; const appRoutes = router.options?.routes ?? [];
console.log({appRoutes})
const sidebarStore = useSidebarStore(); const sidebarStore = useSidebarStore();
const appRoute = computed(() => { const appRoute = computed(() => {