bf1942/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-12-26 06:40:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 菜单数据及组件接入

Browse Source
This commit is contained in:
Soybean
2021-09-15 07:35:38 +08:00
parent 57e00e6417
commit 3226a724be
25 changed files with 361 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/layouts/BasicLayout/components/common/GlobalLogo.vue
View File

@@ -1,18 +1,21 @@
<template>
<router-link to="/" class="nowrap-hidden flex-center h-64px">
<a :href="homePath" class="nowrap-hidden flex-center h-64px cursor-pointer">
<img src="@/assets/img/common/logo.png" alt="" class="w-32px h-32px" />
<h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
</router-link>
</a>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { useAppStore, useThemeStore } from '@/store';
import { useAppTitle } from '@/hooks';
import { EnumRoutePath } from '@/enum';
const app = useAppStore();
const theme = useThemeStore();
const showTitle = computed(() => !app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix');
const title = useAppTitle();
const showTitle = computed(() => !app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix');
const homePath = EnumRoutePath['dashboard-analysis'];
</script>
<style scoped></style>

38
src/layouts/BasicLayout/components/common/GlobalMenu.vue
View File

@@ -1,11 +1,35 @@
<template>
<div>
<h3 class="text-center text-18px text-error">菜单</h3>
<div class="flex-center h-48px">
<router-link to="/login" class="text-primary text-18px">登录页</router-link>
</div>
</div>
<n-menu
:value="activeKey"
:collapsed="app.menu.collapsed"
:collapsed-width="theme.menuStyle.collapsedWidth"
:collapsed-icon-size="22"
:options="menus"
@update:value="handleUpdateMenu"
/>
</template>
<script lang="ts" setup></script>
<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NMenu } from 'naive-ui';
import { useThemeStore, useAppStore } from '@/store';
import { menus } from '@/router';
import { GlobalMenuOption } from '@/interface';
const theme = useThemeStore();
const app = useAppStore();
const router = useRouter();
const route = useRoute();
const activeKey = computed(() => getActiveKey());
function getActiveKey() {
return route.name as string;
}
function handleUpdateMenu(key: string, menuItem: GlobalMenuOption) {
router.push(menuItem.routePath);
}
</script>
<style scoped></style>