perf: layout组件文件目录调整
This commit is contained in:
@ -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>
|
|
||||||
@ -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';
|
||||||
|
|||||||
@ -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 />
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 639 B After Width: | Height: | Size: 639 B |
@ -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';
|
||||||
@ -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';
|
||||||
@ -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(() => {
|
||||||
Reference in New Issue
Block a user