From cfe041d7d2c0750f82da693e756c21d68f90675d Mon Sep 17 00:00:00 2001 From: "Ray.Hao" <1490493387@qq.com> Date: Fri, 23 May 2025 15:26:37 +0800 Subject: [PATCH] =?UTF-8?q?wip:=20=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/README.md | 96 ------------------- .../{AppMain.vue => AppMain/index.vue} | 0 .../NavBar/components/NavbarActions.vue | 43 +++++++-- src/layouts/components/NavBar/index.vue | 4 + .../{Settings.vue => Settings/index.vue} | 0 .../Sidebar/components/SidebarLogo.vue | 2 +- .../{TagsView.vue => TagsView/index.vue} | 0 src/layouts/views/BaseLayout.vue | 2 +- src/layouts/views/LeftLayout.vue | 8 +- src/layouts/views/MixLayout.vue | 10 +- src/layouts/views/TopLayout.vue | 82 ++++++++++++++-- src/types/components.d.ts | 11 --- 12 files changed, 125 insertions(+), 133 deletions(-) delete mode 100644 src/layouts/README.md rename src/layouts/components/{AppMain.vue => AppMain/index.vue} (100%) rename src/layouts/components/{Settings.vue => Settings/index.vue} (100%) rename src/layouts/components/{TagsView.vue => TagsView/index.vue} (100%) diff --git a/src/layouts/README.md b/src/layouts/README.md deleted file mode 100644 index 9d36e764..00000000 --- a/src/layouts/README.md +++ /dev/null @@ -1,96 +0,0 @@ -# 布局系统 - -## 目录结构 - -``` -layouts/ -├── index.vue # 布局系统入口，根据设置动态加载布局 -├── BaseLayout.vue # 基础布局容器，提供通用功能 -├── LeftLayout.vue # 左侧菜单布局 -├── TopLayout.vue # 顶部菜单布局 -├── MixLayout.vue # 混合布局（顶部+左侧） -├── components/ # 布局相关组件 -│ ├── AppMain.vue # 主内容区域 -│ ├── NavBar.vue # 导航栏 -│ ├── NavbarActions.vue # 导航栏右侧操作区 -│ ├── TagsView.vue # 标签页视图 -│ ├── LayoutMenu.vue # 菜单组件 -│ ├── Sidebar/ # 侧边栏相关组件 -│ │ ├── SidebarLogo.vue # Logo 组件 -│ │ ├── SidebarMenu.vue # 菜单主体（未使用） -│ │ ├── SidebarMenuItem.vue # 菜单项 -│ │ ├── SidebarMenuItemTitle.vue # 菜单项标题 -│ │ └── SidebarMixTopMenu.vue # 混合布局顶部菜单 -│ ├── Settings/ # 设置面板 -│ │ └── index.vue # 设置面板主组件（包含布局选择） -│ └── common/ # 通用组件 -│ └── LayoutSidebar.vue # 侧边栏容器 -└── composables/ # 组合式函数 - ├── useLayout.ts # 布局相关逻辑 - ├── useLayoutMenu.ts # 菜单相关逻辑 - └── useLayoutResponsive.ts # 响应式处理 -``` - -## 布局说明 - -### 1. LeftLayout（左侧布局） -- 传统的左侧固定菜单布局 -- 支持菜单折叠/展开 -- 适合大多数管理系统 - -### 2. TopLayout（顶部布局） -- 菜单位于顶部横向排列 -- 适合一级菜单较少的系统 -- 节省横向空间 - -### 3. MixLayout（混合布局） -- 一级菜单在顶部，二级菜单在左侧 -- 适合菜单层级较多的大型系统 -- 提供更好的菜单组织方式 - -## 使用方式 - -布局系统会根据 `settings store` 中的 `layout` 配置自动切换： - -```typescript -// 在设置面板中切换布局 -// 或通过代码： -settingsStore.layout = LayoutMode.LEFT; // 'left' | 'top' | 'mix' -``` - -## 自定义布局 - -如需添加新布局： - -1. 在 `layouts/` 目录下创建新的布局组件（如 `CustomLayout.vue`） -2. 在 `index.vue` 中导入并添加到切换逻辑 -3. 在 `enums/settings/layout.enum.ts` 中添加新的布局类型 - -## 主要功能 - -1. **响应式适配**: 自动适配桌面端和移动端，移动端下自动收起侧边栏 -2. **多种布局模式**: 支持左侧菜单、顶部菜单、混合菜单三种模式 -3. **主题切换**: 支持明亮/暗黑主题 -4. **标签页**: 支持多标签页功能，可通过设置开启/关闭 - -## 可组合式API - -### useLayout - -提供布局相关的基础功能: -- 侧边栏展开/收起控制 -- 布局模式获取 -- 布局样式类计算 - -### useLayoutResponsive - -提供响应式布局功能: -- 根据屏幕尺寸自动调整设备类型 -- 根据设备类型自动调整侧边栏状态 - -### useLayoutMenu - -提供菜单相关功能: -- 获取菜单数据 -- 处理菜单激活状态 -- 混合布局下的菜单联动 \ No newline at end of file diff --git a/src/layouts/components/AppMain.vue b/src/layouts/components/AppMain/index.vue similarity index 100% rename from src/layouts/components/AppMain.vue rename to src/layouts/components/AppMain/index.vue diff --git a/src/layouts/components/NavBar/components/NavbarActions.vue b/src/layouts/components/NavBar/components/NavbarActions.vue index e22cc39b..ef21a064 100644 --- a/src/layouts/components/NavBar/components/NavbarActions.vue +++ b/src/layouts/components/NavBar/components/NavbarActions.vue @@ -138,15 +138,44 @@ function logout() { display: flex; align-items: center; justify-content: center; - min-width: 40px; - height: $navbar-height; + min-width: 36px; + height: 100%; + padding: 0 8px; text-align: center; cursor: pointer; transition: all 0.3s; + // 确保直接子元素也居中 + > * { + display: flex; + align-items: center; + justify-content: center; + } + + // 确保 el-dropdown 也居中 + :deep(.el-dropdown) { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + } + + // 修复可能的 SVG 图标容器 + :deep(.icon-container), + :deep(.action-icon) { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + } + // 默认图标样式（明亮模式 + 左侧布局） :deep([class^="i-svg:"]) { + display: inline-flex; + align-items: center; + justify-content: center; font-size: 18px; + line-height: 1; color: var(--el-text-color-regular); transition: color 0.3s; } @@ -165,18 +194,20 @@ function logout() { align-items: center; justify-content: center; height: 100%; - padding: 0 13px; + padding: 0 8px; &__avatar { - width: 32px; - height: 32px; + width: 28px; + height: 28px; border-radius: 50%; + flex-shrink: 0; } &__name { - margin-left: 10px; + margin-left: 8px; color: var(--el-text-color-regular); transition: color 0.3s; + white-space: nowrap; } } } diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue index b7b952f3..f455c6d9 100644 --- a/src/layouts/components/NavBar/index.vue +++ b/src/layouts/components/NavBar/index.vue @@ -37,12 +37,16 @@ function toggleSideBar() { .navbar { display: flex; justify-content: space-between; + align-items: center; height: $navbar-height; + padding: 0 20px; background: var(--el-bg-color); + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); &__actions { display: flex; align-items: center; + height: 100%; } } diff --git a/src/layouts/components/Settings.vue b/src/layouts/components/Settings/index.vue similarity index 100% rename from src/layouts/components/Settings.vue rename to src/layouts/components/Settings/index.vue diff --git a/src/layouts/components/Sidebar/components/SidebarLogo.vue b/src/layouts/components/Sidebar/components/SidebarLogo.vue index 5fa80e9c..841784ef 100644 --- a/src/layouts/components/Sidebar/components/SidebarLogo.vue +++ b/src/layouts/components/Sidebar/components/SidebarLogo.vue @@ -30,7 +30,7 @@ defineProps({ background-color: $sidebar-logo-background; .title { - flex-shrink: 0; /* 防止容器在空间不足时缩小 */ + flex-shrink: 0; margin-left: 10px; font-size: 14px; font-weight: bold; diff --git a/src/layouts/components/TagsView.vue b/src/layouts/components/TagsView/index.vue similarity index 100% rename from src/layouts/components/TagsView.vue rename to src/layouts/components/TagsView/index.vue diff --git a/src/layouts/views/BaseLayout.vue b/src/layouts/views/BaseLayout.vue index d8680eeb..218d57ff 100644 --- a/src/layouts/views/BaseLayout.vue +++ b/src/layouts/views/BaseLayout.vue @@ -19,7 +19,7 @@