feat(admin-ui): implement RuoYi sidebar shell
This commit is contained in:
duanshuwen
280
WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
Normal file
280
WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
import { useLayoutStore } from "@/stores/layout";
|
||||||
|
import { visibleNavigableMenus } from "@/lib/menu-display";
|
||||||
|
import type { NavigationType, SideTheme } from "@/lib/layout-settings";
|
||||||
|
import type { AdminMenu } from "@/types";
|
||||||
|
import SidebarItem from "@/components/layout/SidebarItem.vue";
|
||||||
|
|
||||||
|
type ThemeValue = SideTheme | "dark" | "light";
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
menus?: AdminMenu[];
|
||||||
|
collapsed?: boolean;
|
||||||
|
sideTheme?: ThemeValue;
|
||||||
|
sidebarLogo?: boolean;
|
||||||
|
showLogo?: boolean;
|
||||||
|
navigationType?: NavigationType;
|
||||||
|
}>(), {
|
||||||
|
collapsed: false,
|
||||||
|
sideTheme: "theme-dark",
|
||||||
|
sidebarLogo: true,
|
||||||
|
navigationType: "left",
|
||||||
|
});
|
||||||
|
|
||||||
|
const auth = useAuthStore();
|
||||||
|
const layout = useLayoutStore();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const activePath = computed(() => route.path);
|
||||||
|
const isMobile = computed(() => layout.device === "mobile");
|
||||||
|
const collapsedMenu = computed(() => !isMobile.value && props.collapsed);
|
||||||
|
const isDark = computed(() => props.sideTheme === "theme-dark" || props.sideTheme === "dark");
|
||||||
|
const isVisible = computed(() => props.navigationType !== "top");
|
||||||
|
const showLogo = computed(() => props.showLogo ?? props.sidebarLogo);
|
||||||
|
const menus = computed(() => visibleNavigableMenus<AdminMenu>(props.menus ?? auth.menus));
|
||||||
|
const menuBackgroundColor = computed(() => isDark.value ? "#304156" : "#ffffff");
|
||||||
|
const menuTextColor = computed(() => isDark.value ? "#bfcbd9" : "#303133");
|
||||||
|
const menuActiveTextColor = computed(() => isDark.value ? "#ffffff" : "#409eff");
|
||||||
|
|
||||||
|
const sidebarStyle = computed(() => {
|
||||||
|
const width = props.collapsed ? "54px" : "200px";
|
||||||
|
return {
|
||||||
|
width: isMobile.value ? undefined : width,
|
||||||
|
minWidth: isMobile.value ? undefined : width,
|
||||||
|
position: isMobile.value ? "fixed" : "relative",
|
||||||
|
top: isMobile.value ? "0" : undefined,
|
||||||
|
bottom: isMobile.value ? "0" : undefined,
|
||||||
|
left: isMobile.value ? "0" : undefined,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleMenuSelect() {
|
||||||
|
if (isMobile.value) layout.closeSidebar();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeSidebar() {
|
||||||
|
layout.closeSidebar();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-if="isVisible"
|
||||||
|
:class="[
|
||||||
|
'sidebar-shell',
|
||||||
|
`sidebar-shell--${props.navigationType}`,
|
||||||
|
{ 'sidebar-shell--mobile': isMobile, 'sidebar-shell--collapsed': collapsedMenu },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
v-if="isMobile && layout.sidebarOpened"
|
||||||
|
type="button"
|
||||||
|
class="sidebar-overlay"
|
||||||
|
aria-label="关闭侧边栏"
|
||||||
|
@click="closeSidebar"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<aside
|
||||||
|
:class="[
|
||||||
|
'sidebar-drawer',
|
||||||
|
isDark ? 'sidebar-drawer--dark' : 'sidebar-drawer--light',
|
||||||
|
{
|
||||||
|
'sidebar-drawer--mobile': isMobile,
|
||||||
|
'sidebar-drawer--open': isMobile && layout.sidebarOpened,
|
||||||
|
'sidebar-drawer--collapsed': collapsedMenu,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:style="sidebarStyle"
|
||||||
|
:inert="isMobile && !layout.sidebarOpened"
|
||||||
|
:aria-hidden="isMobile && !layout.sidebarOpened ? 'true' : undefined"
|
||||||
|
>
|
||||||
|
<div v-if="showLogo" class="sidebar-logo" :class="{ 'sidebar-logo--collapsed': collapsedMenu }">
|
||||||
|
<div class="sidebar-logo__mark" aria-hidden="true">WQ</div>
|
||||||
|
<div v-if="!collapsedMenu" class="sidebar-logo__copy">
|
||||||
|
<strong>WonderQ</strong>
|
||||||
|
<span>内容运营后台</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-scrollbar class="sidebar-scrollbar">
|
||||||
|
<el-menu
|
||||||
|
:default-active="activePath"
|
||||||
|
:collapse="collapsedMenu"
|
||||||
|
:collapse-transition="false"
|
||||||
|
:collapse-tooltip="true"
|
||||||
|
:unique-opened="true"
|
||||||
|
:router="true"
|
||||||
|
:background-color="menuBackgroundColor"
|
||||||
|
:text-color="menuTextColor"
|
||||||
|
:active-text-color="menuActiveTextColor"
|
||||||
|
class="sidebar-menu"
|
||||||
|
@select="handleMenuSelect"
|
||||||
|
>
|
||||||
|
<SidebarItem
|
||||||
|
v-for="menu in menus"
|
||||||
|
:key="menu.id"
|
||||||
|
:menu="menu"
|
||||||
|
base-path=""
|
||||||
|
:collapsed="collapsedMenu"
|
||||||
|
:navigation-type="props.navigationType"
|
||||||
|
/>
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sidebar-shell {
|
||||||
|
width: 200px;
|
||||||
|
min-width: 200px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-shell--collapsed {
|
||||||
|
width: 54px;
|
||||||
|
min-width: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-shell--mobile {
|
||||||
|
width: 200px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 200px;
|
||||||
|
min-width: 200px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer--collapsed {
|
||||||
|
width: 54px;
|
||||||
|
min-width: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer--dark {
|
||||||
|
--sidebar-background: #304156;
|
||||||
|
--sidebar-hover-background: #263445;
|
||||||
|
--sidebar-active-background: #1f2d3d;
|
||||||
|
--sidebar-text: #bfcbd9;
|
||||||
|
--sidebar-active-text: #409eff;
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
background: var(--sidebar-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer--light {
|
||||||
|
--sidebar-background: #ffffff;
|
||||||
|
--sidebar-hover-background: #f5f7fa;
|
||||||
|
--sidebar-active-background: #ecf5ff;
|
||||||
|
--sidebar-text: #303133;
|
||||||
|
--sidebar-active-text: #409eff;
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
background: var(--sidebar-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 64px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, .08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo--collapsed {
|
||||||
|
justify-content: center;
|
||||||
|
padding-right: 8px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo__mark {
|
||||||
|
display: grid;
|
||||||
|
flex: 0 0 32px;
|
||||||
|
place-items: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #ffffff;
|
||||||
|
background: #409eff;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: .08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo__copy strong,
|
||||||
|
.sidebar-logo__copy span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo__copy strong {
|
||||||
|
color: inherit;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: .02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo__copy span {
|
||||||
|
margin-top: 3px;
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-scrollbar {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu {
|
||||||
|
width: 200px;
|
||||||
|
min-height: 100%;
|
||||||
|
border-right: 0;
|
||||||
|
background: var(--sidebar-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer--collapsed .sidebar-menu,
|
||||||
|
.sidebar-drawer--collapsed :deep(.sidebar-menu.el-menu--collapse) {
|
||||||
|
width: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu :deep(.el-menu-item),
|
||||||
|
.sidebar-menu :deep(.el-sub-menu__title) {
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu :deep(.el-menu-item:hover),
|
||||||
|
.sidebar-menu :deep(.el-sub-menu__title:hover) {
|
||||||
|
background: var(--sidebar-hover-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu :deep(.el-menu-item.is-active) {
|
||||||
|
color: var(--sidebar-active-text);
|
||||||
|
background: var(--sidebar-active-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer--mobile {
|
||||||
|
width: 200px;
|
||||||
|
min-width: 200px;
|
||||||
|
z-index: 1001;
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
transition: transform 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-drawer--mobile.sidebar-drawer--open {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
75
WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue
Normal file
75
WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from "vue";
|
||||||
|
import LayoutIcon from "@/components/layout/LayoutIcon.vue";
|
||||||
|
import { getMenuIconName, visibleNavigableMenus } from "@/lib/menu-display";
|
||||||
|
import type { NavigationType } from "@/lib/layout-settings";
|
||||||
|
import type { AdminMenu } from "@/types";
|
||||||
|
|
||||||
|
type SidebarMenu = AdminMenu & { isVisible?: boolean };
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
menu: SidebarMenu;
|
||||||
|
basePath?: string;
|
||||||
|
collapsed?: boolean;
|
||||||
|
navigationType?: NavigationType;
|
||||||
|
}>(), {
|
||||||
|
basePath: "",
|
||||||
|
collapsed: false,
|
||||||
|
navigationType: "left",
|
||||||
|
});
|
||||||
|
|
||||||
|
function resolveMenuPath(basePath: string, menuPath: string | null | undefined): string | undefined {
|
||||||
|
if (!menuPath) return undefined;
|
||||||
|
if (menuPath.startsWith("/")) return menuPath;
|
||||||
|
|
||||||
|
const normalizedBasePath = basePath.replace(/^\/+|\/+$/g, "");
|
||||||
|
const normalizedMenuPath = menuPath.trim().replace(/^\/+/, "");
|
||||||
|
if (!normalizedMenuPath) return normalizedBasePath ? `/${normalizedBasePath}` : undefined;
|
||||||
|
|
||||||
|
return `/${[normalizedBasePath, normalizedMenuPath].filter(Boolean).join("/")}`.replace(/\/{2,}/g, "/");
|
||||||
|
}
|
||||||
|
|
||||||
|
const resolvedPath = computed(() => resolveMenuPath(props.basePath, props.menu.path));
|
||||||
|
const visibleChildren = computed(() => visibleNavigableMenus(props.menu.children ?? []));
|
||||||
|
const childBasePath = computed(() => resolvedPath.value || props.basePath || "/");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-sub-menu
|
||||||
|
v-if="menu.type === 'directory' && visibleChildren.length > 0"
|
||||||
|
:index="resolvedPath || menu.id"
|
||||||
|
:aria-label="menu.name"
|
||||||
|
:class="['sidebar-item', `sidebar-item--${navigationType}`]"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
|
||||||
|
<span class="sidebar-item__content">
|
||||||
|
<LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />
|
||||||
|
<span v-if="!collapsed" class="sidebar-item__label">{{ menu.name }}</span>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
<SidebarItem
|
||||||
|
v-for="child in visibleChildren"
|
||||||
|
:key="child.id"
|
||||||
|
:menu="child"
|
||||||
|
:base-path="childBasePath"
|
||||||
|
:collapsed="collapsed"
|
||||||
|
:navigation-type="navigationType"
|
||||||
|
/>
|
||||||
|
</el-sub-menu>
|
||||||
|
|
||||||
|
<el-menu-item
|
||||||
|
v-else-if="menu.type === 'page' && resolvedPath"
|
||||||
|
:index="resolvedPath"
|
||||||
|
:aria-label="menu.name"
|
||||||
|
:class="['sidebar-item', `sidebar-item--${navigationType}`]"
|
||||||
|
>
|
||||||
|
<el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
|
||||||
|
<span class="sidebar-item__content">
|
||||||
|
<LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />
|
||||||
|
<span v-if="!collapsed" class="sidebar-item__label">{{ menu.name }}</span>
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
44
WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue
Normal file
44
WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useAuthStore } from "@/stores/auth";
|
||||||
|
import { visibleNavigableMenus } from "@/lib/menu-display";
|
||||||
|
import type { NavigationType } from "@/lib/layout-settings";
|
||||||
|
import type { AdminMenu } from "@/types";
|
||||||
|
import SidebarItem from "@/components/layout/SidebarItem.vue";
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
menus?: AdminMenu[];
|
||||||
|
navigationType?: NavigationType;
|
||||||
|
}>(), {
|
||||||
|
navigationType: "top",
|
||||||
|
});
|
||||||
|
|
||||||
|
const auth = useAuthStore();
|
||||||
|
const route = useRoute();
|
||||||
|
const navigationType = computed(() => props.navigationType);
|
||||||
|
const activePath = computed(() => route.path);
|
||||||
|
const menus = computed(() => visibleNavigableMenus<AdminMenu>(props.menus ?? auth.menus));
|
||||||
|
const isVisible = computed(() => navigationType.value === "top" || navigationType.value === "mix");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav v-if="isVisible" class="top-menu" aria-label="顶部导航">
|
||||||
|
<el-menu
|
||||||
|
mode="horizontal"
|
||||||
|
:default-active="activePath"
|
||||||
|
:router="true"
|
||||||
|
:unique-opened="true"
|
||||||
|
class="top-menu__bar"
|
||||||
|
>
|
||||||
|
<SidebarItem
|
||||||
|
v-for="menu in menus"
|
||||||
|
:key="menu.id"
|
||||||
|
:menu="menu"
|
||||||
|
base-path=""
|
||||||
|
:collapsed="false"
|
||||||
|
:navigation-type="navigationType"
|
||||||
|
/>
|
||||||
|
</el-menu>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user