From f6c5ad589fa48cce2427f9e0877e5d094134ea8b Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Wed, 26 Aug 2026 21:12:18 +0800
Subject: [PATCH] feat(admin-ui): implement RuoYi sidebar shell

---
 .../src/components/layout/Sidebar.vue         | 280 ++++++++++++++++++
 .../src/components/layout/SidebarItem.vue     |  75 +++++
 .../src/components/layout/TopMenu.vue         |  44 +++
 3 files changed, 399 insertions(+)
 create mode 100644 WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
 create mode 100644 WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue
 create mode 100644 WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue

diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue b/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
new file mode 100644
index 0000000..d5f1369
--- /dev/null
+++ b/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
@@ -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>
diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue b/WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue
new file mode 100644
index 0000000..09a2c09
--- /dev/null
+++ b/WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue
@@ -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>
diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue b/WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue
new file mode 100644
index 0000000..80b2a8b
--- /dev/null
+++ b/WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue
@@ -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>