From e90775fae95f880a425f4bcaa89b8f96506253cf Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Thu, 22 May 2025 14:29:45 +0800 Subject: [PATCH 01/27] =?UTF-8?q?chore:=20:hammer:=20=E7=A7=BB=E9=99=A4=20?= =?UTF-8?q?console.log=20=E6=89=93=E5=8D=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/permission.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/plugins/permission.ts b/src/plugins/permission.ts index dbce0a03..162c49f2 100644 --- a/src/plugins/permission.ts +++ b/src/plugins/permission.ts @@ -14,16 +14,13 @@ export function setupPermission() { console.log("to.path", to.path); const isLogin = Auth.isLoggedIn(); - console.log("isLogin", isLogin); if (isLogin) { - console.log("to.path", to.path); if (to.path === "/login") { // 如果已登录，跳转到首页 next({ path: "/" }); } else { // 未登录 const permissionStore = usePermissionStore(); - console.log("permissionStore.routesLoaded", permissionStore.routesLoaded); // 判断路由是否加载完成 if (permissionStore.routesLoaded) { if (to.matched.length === 0) { @@ -39,7 +36,7 @@ export function setupPermission() { } } else { try { - // 生成动态路由 + // 生成路由 const dynamicRoutes = await permissionStore.generateRoutes(); dynamicRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route)); next({ ...to, replace: true }); From 54b2164d251db75cbabebb5423e878c5c610b307 Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Thu, 22 May 2025 14:33:28 +0800 Subject: [PATCH 02/27] =?UTF-8?q?refactor:=20:recycle:=20=E9=87=8D?= =?UTF-8?q?=E6=9E=84=E4=BC=98=E5=8C=96=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Notification/index.vue | 156 +++++++-------- src/components/SizeSelect/index.vue | 4 +- .../NavBar/components/NavbarActions.vue | 178 ++++++++++++++++++ .../NavBar/components/NavbarRight.vue | 150 --------------- src/layout/components/NavBar/index.vue | 21 ++- src/layout/components/Sidebar/index.vue | 8 +- src/types/components.d.ts | 3 +- src/views/login/components/Login.vue | 16 +- 8 files changed, 281 insertions(+), 255 deletions(-) create mode 100644 src/layout/components/NavBar/components/NavbarActions.vue delete mode 100644 src/layout/components/NavBar/components/NavbarRight.vue diff --git a/src/components/Notification/index.vue b/src/components/Notification/index.vue index 39af1cff..49f636cd 100644 --- a/src/components/Notification/index.vue +++ b/src/components/Notification/index.vue @@ -1,83 +1,81 @@ - + diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue index 7d49bc5b..de58d3cf 100644 --- a/src/components/SizeSelect/index.vue +++ b/src/components/SizeSelect/index.vue @@ -2,9 +2,7 @@ -
-
-
+
+ + + + diff --git a/src/layout/components/NavBar/components/NavbarRight.vue b/src/layout/components/NavBar/components/NavbarRight.vue deleted file mode 100644 index 596277c9..00000000 --- a/src/layout/components/NavBar/components/NavbarRight.vue +++ /dev/null @@ -1,150 +0,0 @@ - - - - diff --git a/src/layout/components/NavBar/index.vue b/src/layout/components/NavBar/index.vue index 5a4a73e1..d4d32c5b 100644 --- a/src/layout/components/NavBar/index.vue +++ b/src/layout/components/NavBar/index.vue @@ -1,25 +1,30 @@ - diff --git a/src/layouts/README.md b/src/layouts/README.md new file mode 100644 index 00000000..f31eb7b5 --- /dev/null +++ b/src/layouts/README.md @@ -0,0 +1,59 @@ +# 布局系统 + +本项目的布局系统采用模块化、可组合式API的架构，支持三种不同的布局模式: + +1. **左侧菜单布局 (LeftSideLayout)**: 传统的管理系统布局，左侧为菜单栏，顶部为导航栏 +2. **顶部菜单布局 (TopMenuLayout)**: 顶部为主菜单栏，适合菜单项较少的应用 +3. **混合菜单布局 (MixMenuLayout)**: 顶部为一级菜单，左侧为对应的子菜单，适合菜单层级较多的复杂应用 + +## 目录结构 + +``` +layouts/ +├── README.md # 文档说明 +├── index.vue # 布局入口，根据设置选择对应的布局组件 +├── composables/ # 可组合式API +│ ├── useLayout.ts # 布局通用逻辑 +│ ├── useLayoutResponsive.ts # 响应式布局逻辑 +│ └── useLayoutMenu.ts # 菜单处理逻辑 +└── components/ # 布局组件 + ├── LayoutBase.vue # 基础布局组件 + ├── SidebarMenu.vue # 菜单组件 + ├── common/ # 公共组件 + │ └── LayoutSidebar.vue # 侧边栏公共组件 + ├── LeftSideLayout/ # 左侧菜单布局 + │ └── index.vue + ├── TopMenuLayout/ # 顶部菜单布局 + │ └── index.vue + └── MixMenuLayout/ # 混合菜单布局 + └── index.vue +``` + +## 主要功能 + +1. **响应式适配**: 自动适配桌面端和移动端，移动端下自动收起侧边栏 +2. **多种布局模式**: 支持左侧菜单、顶部菜单、混合菜单三种模式 +3. **主题切换**: 支持明亮/暗黑主题 +4. **标签页**: 支持多标签页功能，可通过设置开启/关闭 + +## 可组合式API + +### useLayout + +提供布局相关的基础功能: +- 侧边栏展开/收起控制 +- 布局模式获取 +- 布局样式类计算 + +### useLayoutResponsive + +提供响应式布局功能: +- 根据屏幕尺寸自动调整设备类型 +- 根据设备类型自动调整侧边栏状态 + +### useLayoutMenu + +提供菜单相关功能: +- 获取菜单数据 +- 处理菜单激活状态 +- 混合布局下的菜单联动 \ No newline at end of file diff --git a/src/layouts/components/LayoutBase.vue b/src/layouts/components/LayoutBase.vue new file mode 100644 index 00000000..bcd43332 --- /dev/null +++ b/src/layouts/components/LayoutBase.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/layouts/components/LayoutMenu.vue b/src/layouts/components/LayoutMenu.vue new file mode 100644 index 00000000..2c5ae936 --- /dev/null +++ b/src/layouts/components/LayoutMenu.vue @@ -0,0 +1,130 @@ + + + + diff --git a/src/layouts/components/LeftSideLayout/index.vue b/src/layouts/components/LeftSideLayout/index.vue new file mode 100644 index 00000000..429f9eb6 --- /dev/null +++ b/src/layouts/components/LeftSideLayout/index.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/src/layouts/components/MixMenuLayout/index.vue b/src/layouts/components/MixMenuLayout/index.vue new file mode 100644 index 00000000..aa78e9a2 --- /dev/null +++ b/src/layouts/components/MixMenuLayout/index.vue @@ -0,0 +1,143 @@ + + + + + diff --git a/src/layouts/components/TopMenuLayout/index.vue b/src/layouts/components/TopMenuLayout/index.vue new file mode 100644 index 00000000..9f7607c0 --- /dev/null +++ b/src/layouts/components/TopMenuLayout/index.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/layouts/components/common/LayoutSidebar.vue b/src/layouts/components/common/LayoutSidebar.vue new file mode 100644 index 00000000..6933bd30 --- /dev/null +++ b/src/layouts/components/common/LayoutSidebar.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/layouts/composables/useLayout.ts b/src/layouts/composables/useLayout.ts new file mode 100644 index 00000000..9fec35dd --- /dev/null +++ b/src/layouts/composables/useLayout.ts @@ -0,0 +1,66 @@ +import { computed, watchEffect } from "vue"; +import { useAppStore, useSettingsStore } from "@/store"; +import defaultSettings from "@/settings"; + +/** + * 布局相关的通用逻辑 + */ +export function useLayout() { + const appStore = useAppStore(); + const settingsStore = useSettingsStore(); + + // 计算当前布局模式 + const currentLayout = computed(() => settingsStore.layout); + + // 侧边栏展开状态 + const isSidebarOpen = computed(() => appStore.sidebar.opened); + + // 是否显示标签视图 + const isShowTagsView = computed(() => settingsStore.tagsView); + + // 是否显示设置面板 + const isShowSettings = computed(() => defaultSettings.showSettings); + + // 是否显示Logo + const isShowLogo = computed(() => settingsStore.sidebarLogo); + + // 布局CSS类 + const layoutClass = computed(() => ({ + hideSidebar: !appStore.sidebar.opened, + openSidebar: appStore.sidebar.opened, + mobile: appStore.device === "mobile", + [`layout-${settingsStore.layout}`]: true, + })); + + /** + * 处理切换侧边栏的展开/收起状态 + */ + function toggleSidebar() { + appStore.toggleSidebar(); + } + + /** + * 关闭侧边栏（移动端） + */ + function closeSidebar() { + appStore.closeSideBar(); + } + + // 监听路由变化，在移动端自动关闭侧边栏 + watchEffect(() => { + if (appStore.device === "mobile" && appStore.sidebar.opened) { + appStore.closeSideBar(); + } + }); + + return { + currentLayout, + isSidebarOpen, + isShowTagsView, + isShowSettings, + isShowLogo, + layoutClass, + toggleSidebar, + closeSidebar, + }; +} diff --git a/src/layouts/composables/useLayoutMenu.ts b/src/layouts/composables/useLayoutMenu.ts new file mode 100644 index 00000000..68d35e9a --- /dev/null +++ b/src/layouts/composables/useLayoutMenu.ts @@ -0,0 +1,58 @@ +import { computed, watch } from "vue"; +import { useRoute } from "vue-router"; +import { useAppStore, usePermissionStore } from "@/store"; + +/** + * 布局菜单处理逻辑 + */ +export function useLayoutMenu() { + const route = useRoute(); + const appStore = useAppStore(); + const permissionStore = usePermissionStore(); + + // 顶部菜单激活路径 + const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); + + // 常规路由（左侧菜单或顶部菜单） + const routes = computed(() => permissionStore.routes); + + // 混合布局左侧菜单路由 + const sideMenuRoutes = computed(() => permissionStore.sideMenuRoutes); + + // 当前激活的菜单 + const activeMenu = computed(() => { + const { meta, path } = route; + + // 如果设置了activeMenu，则使用 + if (meta?.activeMenu) { + return meta.activeMenu; + } + + return path; + }); + + // 监听顶部菜单路径变化，更新侧边菜单 + watch( + () => activeTopMenuPath.value, + (newPath) => { + permissionStore.updateSideMenu(newPath); + }, + { immediate: true } + ); + + /** + * 处理顶部菜单点击 + * @param path 菜单路径 + */ + function handleTopMenuClick(path: string) { + appStore.activeTopMenu(path); + } + + return { + routes, + sideMenuRoutes, + activeMenu, + activeTopMenuPath, + handleTopMenuClick, + }; +} diff --git a/src/layouts/composables/useLayoutResponsive.ts b/src/layouts/composables/useLayoutResponsive.ts new file mode 100644 index 00000000..b8dd9ada --- /dev/null +++ b/src/layouts/composables/useLayoutResponsive.ts @@ -0,0 +1,36 @@ +import { watchEffect, computed } from "vue"; +import { useWindowSize } from "@vueuse/core"; +import { useAppStore } from "@/store"; +import { DeviceEnum } from "@/enums/settings/device.enum"; + +/** + * 布局响应式处理逻辑 + */ +export function useLayoutResponsive() { + const appStore = useAppStore(); + const { width } = useWindowSize(); + + // 定义响应式断点 + const WIDTH_DESKTOP = 992; // 桌面设备断点 (>=992px) + + // 设置当前设备类型并调整侧边栏状态 + watchEffect(() => { + const isDesktop = width.value >= WIDTH_DESKTOP; + const deviceType = isDesktop ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE; + + // 更新设备类型 + appStore.toggleDevice(deviceType); + + // 根据设备类型调整侧边栏状态 + if (isDesktop) { + appStore.openSideBar(); + } else { + appStore.closeSideBar(); + } + }); + + return { + isDesktop: computed(() => width.value >= WIDTH_DESKTOP), + isMobile: computed(() => appStore.device === DeviceEnum.MOBILE), + }; +} diff --git a/src/layouts/index.vue b/src/layouts/index.vue new file mode 100644 index 00000000..6c7209a3 --- /dev/null +++ b/src/layouts/index.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/router/index.ts b/src/router/index.ts index 57058ee4..38bf3e60 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,7 +1,7 @@ import type { App } from "vue"; import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router"; -export const Layout = () => import("@/layout/index.vue"); +export const Layout = () => import("@/layouts/index.vue"); // 静态路由 export const constantRoutes: RouteRecordRaw[] = [ diff --git a/src/store/modules/permission.store.ts b/src/store/modules/permission.store.ts index 968eb08a..007e786e 100644 --- a/src/store/modules/permission.store.ts +++ b/src/store/modules/permission.store.ts @@ -5,7 +5,7 @@ import router from "@/router"; import MenuAPI, { type RouteVO } from "@/api/system/menu.api"; const modules = import.meta.glob("../../views/**/**.vue"); -const Layout = () => import("@/layout/index.vue"); +const Layout = () => import("@/layouts/index.vue"); export const usePermissionStore = defineStore("permission", () => { // 存储所有路由，包括静态路由和动态路由 From b5b766487cfa2b4c9b7e511ccd84c3aa51281487 Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Fri, 23 May 2025 13:16:56 +0800 Subject: [PATCH 04/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NavBar/components/NavbarActions.vue | 73 ++++++--- src/layout/components/NavBar/index.vue | 3 + .../Sidebar/components/SidebarMixTopMenu.vue | 92 ++++++----- .../components/LeftSideLayout/index.vue | 30 ++-- .../components/MixMenuLayout/index.vue | 143 ++++++++++++++++-- src/layouts/composables/useLayout.ts | 17 ++- 6 files changed, 274 insertions(+), 84 deletions(-) diff --git a/src/layout/components/NavBar/components/NavbarActions.vue b/src/layout/components/NavBar/components/NavbarActions.vue index aa06f578..e22cc39b 100644 --- a/src/layout/components/NavBar/components/NavbarActions.vue +++ b/src/layout/components/NavBar/components/NavbarActions.vue @@ -88,15 +88,27 @@ function handleProfileClick() { // 根据主题和侧边栏配色方案选择样式类 const navbarActionsClass = computed(() => { - // 暗黑主题 - if (settingStore.theme === ThemeMode.DARK) { + const { theme, sidebarColorScheme, layout } = settingStore; + + // 暗黑主题下，所有布局都使用白色文字 + if (theme === ThemeMode.DARK) { return "navbar-actions--white-text"; } - // 经典蓝侧边栏 - if (settingStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE) { - return "navbar-actions--white-text"; + // 明亮主题下 + if (theme === ThemeMode.LIGHT) { + // 顶部布局和混合布局的顶部区域使用深色背景，需要白色文字 + if (layout === "top" || layout === "mix") { + return "navbar-actions--white-text"; + } + + // 左侧布局下，如果侧边栏是经典蓝色，顶部导航栏仍使用默认颜色 + if (layout === "left" && sidebarColorScheme === SidebarColor.CLASSIC_BLUE) { + return ""; // 使用默认的深色文字 + } } + + return ""; }); /** @@ -130,18 +142,21 @@ function logout() { height: $navbar-height; text-align: center; cursor: pointer; + transition: all 0.3s; + // 默认图标样式（明亮模式 + 左侧布局） :deep([class^="i-svg:"]) { - color: var(--el-text-color); - - &:hover { - color: var(--el-text-color-primary); - } + font-size: 18px; + color: var(--el-text-color-regular); + transition: color 0.3s; } &:hover { - color: var(--el-text-color-primary); - background: rgb(0 0 0 / 10%); + background: rgba(0, 0, 0, 0.04); + + :deep([class^="i-svg:"]) { + color: var(--el-color-primary); + } } } @@ -160,19 +175,41 @@ function logout() { &__name { margin-left: 10px; + color: var(--el-text-color-regular); + transition: color 0.3s; } } } -.layout-top, -.layout-mix { +// 白色文字样式（用于深色背景：暗黑主题、顶部布局、混合布局） +.navbar-actions--white-text { + .navbar-actions__item { + :deep([class^="i-svg:"]) { + color: rgba(255, 255, 255, 0.85); + } + + &:hover { + background: rgba(255, 255, 255, 0.1); + + :deep([class^="i-svg:"]) { + color: #fff; + } + } + } + .user-profile__name { - color: #fff !important; + color: rgba(255, 255, 255, 0.85); } } -.layout-top .navbar-actions--white-text :deep([class^="i-svg:"]), -.layout-mix .navbar-actions--white-text :deep([class^="i-svg:"]) { - color: #fff !important; +// 确保下拉菜单中的图标不受影响 +:deep(.el-dropdown-menu) { + [class^="i-svg:"] { + color: var(--el-text-color-regular) !important; + + &:hover { + color: var(--el-color-primary) !important; + } + } } diff --git a/src/layout/components/NavBar/index.vue b/src/layout/components/NavBar/index.vue index d4d32c5b..b7b952f3 100644 --- a/src/layout/components/NavBar/index.vue +++ b/src/layout/components/NavBar/index.vue @@ -26,7 +26,10 @@ const isSidebarOpened = computed(() => appStore.sidebar.opened); // 切换侧边栏展开/折叠状态 function toggleSideBar() { + console.log("🔄 Hamburger clicked! Current state:", isSidebarOpened.value); + console.log("🔄 Device type:", appStore.device); appStore.toggleSidebar(); + console.log("🔄 New state:", appStore.sidebar.opened); } diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue index 2fd657d1..643d719e 100644 --- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue +++ b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue @@ -1,42 +1,40 @@ diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue index ace91a2a..cddab0a8 100644 --- a/src/components/CURD/PageContent.vue +++ b/src/components/CURD/PageContent.vue @@ -8,9 +8,10 @@
diff --git a/src/composables/useOnlineCount.ts b/src/composables/useOnlineCount.ts index 086a8d75..906278c6 100644 --- a/src/composables/useOnlineCount.ts +++ b/src/composables/useOnlineCount.ts @@ -1,6 +1,5 @@ import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue"; import { useStomp } from "./useStomp"; -import { ElMessage } from "element-plus"; import { registerWebSocketInstance } from "@/plugins/websocket"; import { Auth } from "@/utils/auth"; diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 97944db1..2a863c73 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -76,5 +76,21 @@ export default { showWatermark: "Show Watermark", classicBlue: "Classic Blue", minimalWhite: "Minimal White", + copyConfig: "Copy Config", + resetConfig: "Reset Default", + copySuccess: "Configuration copied to clipboard", + resetSuccess: "Reset to default configuration", + copyDescription: + "Copy config will generate current settings code, reset will restore all settings to default", + confirmReset: "Are you sure to reset all settings to default? This operation cannot be undone.", + applyToFile: "Apply to File", + onlyCopy: "Only Copy", + leftLayout: "Left Mode", + topLayout: "Top Mode", + mixLayout: "Mix Mode", + configManagement: "Config Management", + copyConfigDescription: + "Generate current settings code and copy to clipboard, then overwrite src/settings.ts file", + resetConfigDescription: "Restore all settings to system default values", }, }; diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 429cc8e6..f1f9cb2e 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -79,5 +79,19 @@ export default { showWatermark: "显示水印", classicBlue: "经典蓝", minimalWhite: "极简白", + copyConfig: "复制配置", + resetConfig: "重置默认", + copySuccess: "配置已复制到剪贴板", + resetSuccess: "已重置为默认配置", + copyDescription: "复制配置将生成当前设置的代码，重置将恢复所有设置为默认值", + confirmReset: "确定要重置所有设置为默认值吗？此操作不可恢复。", + applyToFile: "应用到文件", + onlyCopy: "仅复制", + leftLayout: "左侧模式", + topLayout: "顶部模式", + mixLayout: "混合模式", + configManagement: "配置管理", + copyConfigDescription: "生成当前设置的代码并复制到剪贴板，然后覆盖 src/settings.ts 文件", + resetConfigDescription: "恢复所有设置为系统默认值", }, }; diff --git a/src/layouts/components/AppMain/index.vue b/src/layouts/components/AppMain/index.vue index 398ee216..8510dc64 100644 --- a/src/layouts/components/AppMain/index.vue +++ b/src/layouts/components/AppMain/index.vue @@ -19,7 +19,7 @@ import variables from "@/styles/variables.module.scss"; // 缓存页面集合 const cachedViews = computed(() => useTagsViewStore().cachedViews); const appMainHeight = computed(() => { - if (useSettingsStore().tagsView) { + if (useSettingsStore().showTagsView) { return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`; } else { return `calc(100vh - ${variables["navbar-height"]})`; @@ -32,5 +32,19 @@ const appMainHeight = computed(() => { position: relative; overflow-y: auto; background-color: var(--el-bg-color-page); + + /* 布局切换动画优化 */ + &.animate__animated { + animation-duration: 0.4s; + animation-fill-mode: forwards; + } + + &.animate__fadeOut { + animation-timing-function: ease-in; + } + + &.animate__fadeIn { + animation-timing-function: ease-out; + } } diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue index b5241645..2df32403 100644 --- a/src/layouts/components/Settings/index.vue +++ b/src/layouts/components/Settings/index.vue @@ -1,102 +1,167 @@ diff --git a/src/layouts/index.vue b/src/layouts/index.vue index 2c382e7b..c3524030 100644 --- a/src/layouts/index.vue +++ b/src/layouts/index.vue @@ -1,5 +1,10 @@ + + diff --git a/src/layouts/views/BaseLayout.vue b/src/layouts/views/BaseLayout.vue index 218d57ff..3e305016 100644 --- a/src/layouts/views/BaseLayout.vue +++ b/src/layouts/views/BaseLayout.vue @@ -6,9 +6,6 @@ - - -
@@ -19,10 +16,9 @@ From dfb9a735d6adcca3f9742393ce1b0c527e7752dc Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Mon, 26 May 2025 23:21:14 +0800 Subject: [PATCH 18/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/components/AppLogo/index.vue | 52 +++++++++++++++++-- .../Menu/components/MenuItemTitle.vue | 4 +- .../NavBar/components/NavbarActions.vue | 42 ++++++++------- src/layouts/components/NavBar/index.vue | 5 +- src/layouts/views/MixLayout.vue | 9 ---- src/layouts/views/TopLayout.vue | 9 +--- 6 files changed, 76 insertions(+), 45 deletions(-) diff --git a/src/layouts/components/AppLogo/index.vue b/src/layouts/components/AppLogo/index.vue index 841784ef..a7a6370a 100644 --- a/src/layouts/components/AppLogo/index.vue +++ b/src/layouts/components/AppLogo/index.vue @@ -37,16 +37,58 @@ defineProps({ color: $sidebar-logo-text-color; } } + + diff --git a/src/layouts/components/NavBar/components/NavbarActions.vue b/src/layouts/components/NavBar/components/NavbarActions.vue index 87ca259f..ef3386ce 100644 --- a/src/layouts/components/NavBar/components/NavbarActions.vue +++ b/src/layouts/components/NavBar/components/NavbarActions.vue @@ -52,7 +52,7 @@
@@ -68,6 +68,13 @@ import { useAppStore, useSettingsStore, useUserStore } from "@/store"; import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum"; import { LayoutMode } from "@/enums"; +// 导入子组件 +import MenuSearch from "@/components/MenuSearch/index.vue"; +import Fullscreen from "@/components/Fullscreen/index.vue"; +import SizeSelect from "@/components/SizeSelect/index.vue"; +import LangSelect from "@/components/LangSelect/index.vue"; +import Notification from "@/components/Notification/index.vue"; + const { t } = useI18n(); const appStore = useAppStore(); const settingStore = useSettingsStore(); @@ -127,6 +134,13 @@ function logout() { }); }); } + +/** + * 打开系统设置页面 + */ +function handleSettingsClick() { + settingStore.settingsVisible = true; +} diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue index 9cda8927..1ee93513 100644 --- a/src/layouts/views/MixLayout.vue +++ b/src/layouts/views/MixLayout.vue @@ -127,7 +127,6 @@ console.log("🎨 MixLayout rendered"); &-content { display: flex; align-items: center; - min-width: 768px; height: 100%; padding: 0; } diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue index 57bdd295..a7e82c76 100644 --- a/src/layouts/views/TopLayout.vue +++ b/src/layouts/views/TopLayout.vue @@ -57,7 +57,6 @@ const isLogoCollapsed = computed(() => width.value < 768); align-items: center; justify-content: space-between; width: 100%; - min-width: 768px; // 设置最小宽度，防止过度压缩 height: $navbar-height; background-color: $menu-background; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); @@ -181,7 +180,6 @@ const isLogoCollapsed = computed(() => width.value < 768); @media (max-width: 767px) { .layout { &__header { - min-width: 600px; // 小屏设备的最小宽度 padding: 0 4px; } } From 5e7cb0ad1cf6d19680d6e2af7a97f83d6a9011c4 Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Tue, 27 May 2025 00:04:06 +0800 Subject: [PATCH 20/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/components/Menu/components/MenuItem.vue | 5 ----- src/styles/element-plus.scss | 2 -- 2 files changed, 7 deletions(-) diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue index 0be3c3b3..87cc6d25 100644 --- a/src/layouts/components/Menu/components/MenuItem.vue +++ b/src/layouts/components/Menu/components/MenuItem.vue @@ -139,11 +139,8 @@ function resolvePath(routePath: string) { .hideSidebar { .submenu-title-noDropdown { position: relative; - padding: 0 !important; .el-tooltip { - padding: 0 !important; - .sub-el-icon { margin-left: 19px; } @@ -162,8 +159,6 @@ function resolvePath(routePath: string) { overflow: hidden; & > .el-sub-menu__title { - padding: 0 !important; - .sub-el-icon { margin-left: 19px; } diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss index 79361e5f..fc5b729b 100644 --- a/src/styles/element-plus.scss +++ b/src/styles/element-plus.scss @@ -2,8 +2,6 @@ $border: 1px solid var(--el-border-color-light); /* el-dialog */ .el-dialog { - padding: 0 !important; - .el-dialog__header { padding: 15px 20px; margin: 0; From a193965dfe106532f32b6e02c7d5b7a95de3098c Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Tue, 27 May 2025 08:10:36 +0800 Subject: [PATCH 21/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/views/MixLayout.vue | 10 ------- src/layouts/views/TopLayout.vue | 50 +-------------------------------- 2 files changed, 1 insertion(+), 59 deletions(-) diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue index 1ee93513..c84f05e2 100644 --- a/src/layouts/views/MixLayout.vue +++ b/src/layouts/views/MixLayout.vue @@ -139,16 +139,6 @@ console.log("🎨 MixLayout rendered"); width: $sidebar-width; // 默认宽度：显示logo+文字 height: 100%; - // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字 - @media (min-width: 768px) and (max-width: 1100px) { - width: 180px; // 缩小到180px，为菜单腾出空间 - } - - // 小屏设备：只显示logo，使用收缩宽度 - @media (max-width: 767px) { - width: $sidebar-width-collapsed; // 只显示logo：54px - } - :deep(.logo) { height: 100%; diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue index a7e82c76..5001e7dd 100644 --- a/src/layouts/views/TopLayout.vue +++ b/src/layouts/views/TopLayout.vue @@ -59,7 +59,6 @@ const isLogoCollapsed = computed(() => width.value < 768); width: 100%; height: $navbar-height; background-color: $menu-background; - box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); &-left { display: flex; @@ -74,24 +73,10 @@ const isLogoCollapsed = computed(() => width.value < 768); flex-shrink: 0; // 防止Logo被压缩 width: $sidebar-width; // 默认宽度：显示logo+文字 height: $navbar-height; - padding: 0; - margin-right: 20px; - background: transparent; - - // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字 - @media (min-width: 768px) and (max-width: 1100px) { - width: 180px; // 缩小到180px，为菜单腾出空间 - margin-right: 16px; // 减少右边距 - } // 小屏设备：只显示logo，使用收缩宽度 - @media (max-width: 767px) { + @media (max-width: 768px) { width: $sidebar-width-collapsed; // 只显示logo：54px - margin-right: 12px; // 减少右边距 - } - - a { - height: 100%; } } } @@ -134,23 +119,8 @@ const isLogoCollapsed = computed(() => width.value < 768); .el-sub-menu__title { height: $navbar-height; line-height: $navbar-height; - - @media (min-width: 768px) and (max-width: 1200px) { - padding: 0 12px; - font-size: 14px; - } - - @media (max-width: 767px) { - padding: 0 8px; - font-size: 13px; - } } } - - // 修复子菜单弹出位置 - .el-menu--popup { - min-width: 160px; - } } } @@ -166,22 +136,4 @@ const isLogoCollapsed = computed(() => width.value < 768); height: calc(100vh - $navbar-height - $tags-view-height) !important; } } - -// 中屏设备的特殊优化 -@media (min-width: 768px) and (max-width: 1200px) { - .layout { - &__header { - padding: 0 8px; // 添加少量内边距 - } - } -} - -// 小屏设备的特殊优化 -@media (max-width: 767px) { - .layout { - &__header { - padding: 0 4px; - } - } -} From 5defc7e9ea6ebb17ef4775431a1182b35de143d5 Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Tue, 27 May 2025 08:21:47 +0800 Subject: [PATCH 22/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/views/MixLayout.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue index c84f05e2..007016fa 100644 --- a/src/layouts/views/MixLayout.vue +++ b/src/layouts/views/MixLayout.vue @@ -139,6 +139,11 @@ console.log("🎨 MixLayout rendered"); width: $sidebar-width; // 默认宽度：显示logo+文字 height: 100%; + // 小屏设备：只显示logo，使用收缩宽度 + @media (max-width: 767px) { + width: $sidebar-width-collapsed; // 只显示logo：54px + } + :deep(.logo) { height: 100%; From 264961ce08b17f5e639e284aff5cdc97b5f4c1b5 Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Tue, 27 May 2025 11:29:30 +0800 Subject: [PATCH 23/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/components/AppLogo/index.vue | 50 +++++--------- .../components/Menu/components/MenuItem.vue | 6 -- .../Menu/components/MenuItemTitle.vue | 56 ++++++++++++---- src/layouts/components/Settings/index.vue | 3 +- src/layouts/composables/useLayout.ts | 9 --- src/layouts/views/LeftLayout.vue | 2 +- src/layouts/views/MixLayout.vue | 42 +----------- src/layouts/views/TopLayout.vue | 65 +------------------ 8 files changed, 64 insertions(+), 169 deletions(-) diff --git a/src/layouts/components/AppLogo/index.vue b/src/layouts/components/AppLogo/index.vue index a7a6370a..003f209a 100644 --- a/src/layouts/components/AppLogo/index.vue +++ b/src/layouts/components/AppLogo/index.vue @@ -40,56 +40,36 @@ defineProps({ diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue index 87cc6d25..4fa3e52d 100644 --- a/src/layouts/components/Menu/components/MenuItem.vue +++ b/src/layouts/components/Menu/components/MenuItem.vue @@ -140,12 +140,6 @@ function resolvePath(routePath: string) { .submenu-title-noDropdown { position: relative; - .el-tooltip { - .sub-el-icon { - margin-left: 19px; - } - } - & > span { display: inline-block; visibility: hidden; diff --git a/src/layouts/components/Menu/components/MenuItemTitle.vue b/src/layouts/components/Menu/components/MenuItemTitle.vue index 5fa71c96..b9d49364 100644 --- a/src/layouts/components/Menu/components/MenuItemTitle.vue +++ b/src/layouts/components/Menu/components/MenuItemTitle.vue @@ -1,16 +1,16 @@ diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue index 2df32403..fd074573 100644 --- a/src/layouts/components/Settings/index.vue +++ b/src/layouts/components/Settings/index.vue @@ -146,7 +146,6 @@ + + From 783eff2be501f55fd17d412b0e0803ad198135ed Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Tue, 27 May 2025 17:31:44 +0800 Subject: [PATCH 25/27] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 +- src/layouts/components/AppLogo/index.vue | 2 +- .../NavBar/components/NavbarActions.vue | 2 +- src/layouts/components/Settings/index.vue | 19 ++++--------------- src/layouts/composables/useLayout.ts | 2 +- src/layouts/index.vue | 2 +- src/settings.ts | 19 ++++++++++++++++--- src/store/modules/app.store.ts | 2 +- src/store/modules/settings.store.ts | 2 +- src/styles/variables.scss | 1 + src/utils/theme.ts | 6 ++++++ src/views/login/index.vue | 2 +- 12 files changed, 35 insertions(+), 26 deletions(-) diff --git a/src/App.vue b/src/App.vue index bb0263fd..7a5f3ff6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,7 +14,7 @@ diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue index 2f39454e..8734383c 100644 --- a/src/layouts/components/Menu/components/MenuItem.vue +++ b/src/layouts/components/Menu/components/MenuItem.vue @@ -190,4 +190,41 @@ html.sidebar-color-blue { background-color: $menu-hover; } } + +// 父菜单激活状态样式 - 当子菜单激活时，父菜单显示激活状态 +.el-sub-menu { + // 当父菜单包含激活子菜单时的样式 + &.has-active-child .el-sub-menu__title { + color: var(--el-color-primary) !important; + background-color: var(--el-color-primary-light-9) !important; + + .menu-icon { + color: var(--el-color-primary) !important; + } + } + + // 深色主题下的父菜单激活状态 + html.dark & { + &.has-active-child .el-sub-menu__title { + color: var(--el-color-primary-light-3) !important; + background-color: rgba(64, 128, 255, 0.15) !important; + + .menu-icon { + color: var(--el-color-primary-light-3) !important; + } + } + } + + // 深蓝色侧边栏配色下的父菜单激活状态 + html.sidebar-color-blue & { + &.has-active-child .el-sub-menu__title { + color: var(--el-color-primary-light-3) !important; + background-color: rgba(64, 128, 255, 0.2) !important; + + .menu-icon { + color: var(--el-color-primary-light-3) !important; + } + } + } +}