From 6350056a3d93066fda51a099d8d84c16868c2067 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 13:02:32 +0800
Subject: [PATCH] 1.样式修改
---
src/assets/styles/sidebar.scss | 139 ++++++++-----
src/layout/components/Sidebar/Logo.vue | 285 ++++++++++++++--------------
src/layout/index.vue | 6
src/layout/components/Sidebar/index.vue | 150 +++++++-------
4 files changed, 311 insertions(+), 269 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 5cdd71c..5dd7d5e 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -88,11 +88,11 @@
}
// menu hover
- .sub-menu-title-noDropdown,
- .el-sub-menu__title {
- &:hover {
- background-color: var(--menu-hover) !important;
- }
+ .submenu-title-noDropdown,
+ .el-sub-menu__title {
+ &:hover {
+ background-color: var(--menu-hover) !important;
+ }
}
& .theme-light .is-active > .el-sub-menu__title {
color: var(--current-color) !important;
@@ -120,47 +120,86 @@
}
}
- .hideSidebar {
- .sidebar-container {
- width: 54px !important;
- }
+ .hideSidebar {
+ .sidebar-container {
+ width: 68px !important;
+ padding-left: 12px;
+ padding-right: 0;
+ }
+
+ .main-container {
+ margin-left: 84px;
+ }
- .main-container {
- margin-left: 54px;
- }
-
- .sub-menu-title-noDropdown {
- padding: 0 !important;
- position: relative;
-
- .el-tooltip {
- padding: 0 !important;
-
- .svg-icon {
- margin-left: 20px;
- }
- }
- }
- .el-sub-menu {
- overflow: hidden;
-
- & > .el-sub-menu__title {
- padding: 0 !important;
-
- .svg-icon {
- margin-left: 20px;
- }
- }
- }
-
- .el-menu--collapse {
- .el-sub-menu {
- & > .el-sub-menu__title {
- & > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
+ .submenu-title-noDropdown {
+ padding: 0 !important;
+ position: relative;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+
+ .el-tooltip {
+ padding: 0 !important;
+ display: inline-flex !important;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+
+ .svg-icon {
+ margin-left: 0;
+ }
+ }
+
+ .el-menu-tooltip__trigger {
+ width: 100%;
+ display: inline-flex !important;
+ align-items: center;
+ justify-content: center;
+
+ .svg-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 0;
+ flex-shrink: 0;
+ }
+ }
+ }
+ .el-sub-menu {
+ overflow: hidden;
+
+ & > .el-sub-menu__title {
+ padding: 0 !important;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+
+ .svg-icon {
+ margin-left: 0;
+ }
+ }
+ }
+
+ .el-menu--collapse {
+ > .el-menu-item,
+ .el-sub-menu {
+ & > .el-sub-menu__title,
+ &.el-menu-item {
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+
+ .svg-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 0;
+ flex-shrink: 0;
+ }
+
+ & > span {
+ height: 0;
+ width: 0;
+ overflow: hidden;
+ visibility: hidden;
display: inline-block;
}
& > i {
@@ -169,11 +208,11 @@
overflow: hidden;
visibility: hidden;
display: inline-block;
- }
- }
- }
- }
- }
+ }
+ }
+ }
+ }
+ }
.el-menu--collapse .el-menu .el-sub-menu {
min-width: $base-sidebar-width !important;
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index cc193d4..a25d2a3 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,143 +1,142 @@
-<template>
- <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
- <transition name="sidebarLogoFade">
- <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
- <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" />
- <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1>
- </router-link>
- <router-link v-else key="expand" class="sidebar-logo-link" to="/">
- <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" />
- <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1>
- </router-link>
- </transition>
- </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import useUserStore from '@/store/modules/user'
-import defaultLogo from '@/assets/logo/logo.png' // 瀵煎叆榛樿logo
-
-defineProps({
- collapse: {
- type: Boolean,
- required: true
- }
-})
-
-const title = import.meta.env.VITE_APP_TITLE
-const userStore = useUserStore()
-
-// 澶勭悊宸ュ巶鍚嶇О锛岀敓鎴愬悎娉曠殑鏂囦欢鍚�
-const cleanFactoryName = computed(() => {
- if (!userStore.currentFactoryName) return ''
- return userStore.currentFactoryName.trim()
-})
-
-// 鍔ㄦ�乴ogo璺緞
-const logoUrl = ref('')
-
-// 妫�鏌ogo鏄惁瀛樺湪骞惰缃畊rl
-const updateLogoUrl = () => {
- if (!cleanFactoryName.value) {
- logoUrl.value = defaultLogo
- return
- }
-
- // 浣跨敤Vite鐨勫姩鎬佸鍏�
- try {
- const dynamicLogo = import.meta.glob('/src/assets/logo/*.png', { eager: true })
- const logoPath = `/src/assets/logo/${cleanFactoryName.value}.png`
-
- if (dynamicLogo[logoPath]) {
- logoUrl.value = dynamicLogo[logoPath].default
- } else {
- logoUrl.value = defaultLogo
- }
- } catch (error) {
- console.error('鍔犺浇宸ュ巶Logo澶辫触:', error)
- logoUrl.value = defaultLogo
- }
-}
-
-// 鍒濆鍖栧拰鐩戝惉鍙樺寲
-onMounted(() => {
- updateLogoUrl()
-
- // 鐩戝惉宸ュ巶鍚嶇О鍙樺寲
- watch(() => userStore.currentFactoryName, updateLogoUrl)
-})
-
-// 鍥剧墖鍔犺浇閿欒澶勭悊
-const handleImageError = (event) => {
- console.warn('Logo鍔犺浇澶辫触锛屼娇鐢ㄩ粯璁ogo')
- logoUrl.value = defaultLogo
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/variables.module.scss';
-
-.sidebarLogoFade-enter-active {
- transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
- opacity: 0;
-}
-
-.sidebar-logo-container {
- position: relative;
- width: 100% !important;
- height: 56px !important;
- line-height: 56px;
- background: rgba(255, 255, 255, 0.78);
- border: 1px solid var(--surface-border);
- border-radius: 0 22px 22px 0;
- text-align: center;
- overflow: hidden;
- box-shadow: var(--shadow-sm);
-
- & .sidebar-logo-link {
- height: 100%;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 18px 0 14px;
-
- & .sidebar-logo {
- width: auto;
- max-width: 250px;
- max-height: 50px;
- height: auto;
- vertical-align: middle;
- object-fit: contain;
- object-position: center;
- }
-
- & .sidebar-title {
- display: inline-block;
- margin: 0;
- color: var(--text-primary);
- font-weight: 600;
- line-height: 1.2;
- font-size: 14px;
- font-family: "Segoe UI", "PingFang SC", sans-serif;
- vertical-align: middle;
- }
- }
-
- &.collapse {
- .sidebar-logo-link {
- padding: 0;
- }
-
- .sidebar-logo {
- max-width: 30px;
- max-height: 30px;
- }
- }
-}
-</style>
+<template>
+ <div class="sidebar-logo-container" :class="{ collapse }">
+ <transition name="sidebarLogoFade">
+ <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+ <img :src="faviconUrl" class="sidebar-logo sidebar-favicon" alt="绔欑偣鍥炬爣" />
+ </router-link>
+ <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+ <img v-if="logoUrl" :src="logoUrl" class="sidebar-logo" @error="handleImageError" alt="鍏徃Logo" />
+ <h1 v-if="!logoUrl" class="sidebar-title">{{ title }}</h1>
+ </router-link>
+ </transition>
+ </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import useUserStore from '@/store/modules/user'
+import defaultLogo from '@/assets/logo/logo.png'
+
+defineProps({
+ collapse: {
+ type: Boolean,
+ required: true
+ }
+})
+
+const title = import.meta.env.VITE_APP_TITLE
+const userStore = useUserStore()
+const baseUrl = import.meta.env.BASE_URL || '/'
+const faviconUrl = `${baseUrl.replace(/\/?$/, '/') }favicon.ico`.replace(/([^:]\/)\/+/g, '$1')
+
+const cleanFactoryName = computed(() => {
+ if (!userStore.currentFactoryName) return ''
+ return userStore.currentFactoryName.trim()
+})
+
+const logoUrl = ref('')
+
+const updateLogoUrl = () => {
+ if (!cleanFactoryName.value) {
+ logoUrl.value = defaultLogo
+ return
+ }
+
+ try {
+ const dynamicLogo = import.meta.glob('/src/assets/logo/*.png', { eager: true })
+ const logoPath = `/src/assets/logo/${cleanFactoryName.value}.png`
+
+ if (dynamicLogo[logoPath]) {
+ logoUrl.value = dynamicLogo[logoPath].default
+ } else {
+ logoUrl.value = defaultLogo
+ }
+ } catch (error) {
+ console.error('鍔犺浇宸ュ巶 Logo 澶辫触:', error)
+ logoUrl.value = defaultLogo
+ }
+}
+
+onMounted(() => {
+ updateLogoUrl()
+ watch(() => userStore.currentFactoryName, updateLogoUrl)
+})
+
+const handleImageError = () => {
+ logoUrl.value = defaultLogo
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.module.scss';
+
+.sidebarLogoFade-enter-active {
+ transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+ opacity: 0;
+}
+
+.sidebar-logo-container {
+ position: relative;
+ width: 100% !important;
+ height: 56px !important;
+ line-height: 56px;
+ background: rgba(255, 255, 255, 0.78);
+ border: 1px solid var(--surface-border);
+ border-radius: 0 22px 22px 0;
+ text-align: center;
+ overflow: hidden;
+ box-shadow: var(--shadow-sm);
+
+ .sidebar-logo-link {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 18px 0 14px;
+ }
+
+ .sidebar-logo {
+ width: auto;
+ max-width: 250px;
+ max-height: 50px;
+ height: auto;
+ vertical-align: middle;
+ object-fit: contain;
+ object-position: center;
+ }
+
+ .sidebar-title {
+ display: inline-block;
+ margin: 0;
+ color: var(--text-primary);
+ font-weight: 600;
+ line-height: 1.2;
+ font-size: 14px;
+ font-family: "Segoe UI", "PingFang SC", sans-serif;
+ vertical-align: middle;
+ }
+
+ &.collapse {
+ .sidebar-logo-link {
+ padding: 0;
+ }
+
+ .sidebar-logo {
+ max-width: 30px;
+ max-height: 30px;
+ }
+
+ .sidebar-favicon {
+ width: 24px;
+ height: 24px;
+ max-width: 24px;
+ max-height: 24px;
+ }
+ }
+}
+</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 92f49c4..6ce06de 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,75 +1,79 @@
-<template>
- <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
- <logo v-if="showLogo" :collapse="isCollapse" />
- <el-scrollbar wrap-class="scrollbar-wrapper">
- <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground"
- :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false"
- mode="vertical" :class="sideTheme">
- <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
- :base-path="route.path" />
- </el-menu>
- </el-scrollbar>
- </div>
-</template>
-
-<script setup>
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
-
-const route = useRoute()
-const appStore = useAppStore()
-const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
-
-const sidebarRouters = computed(() => permissionStore.sidebarRouters)
-const showLogo = computed(() => settingsStore.sidebarLogo)
-const sideTheme = computed(() => settingsStore.sideTheme)
-const theme = computed(() => settingsStore.theme)
-const isCollapse = computed(() => !appStore.sidebar.opened)
-
-// 鑾峰彇鑿滃崟鑳屾櫙鑹�
-const getMenuBackground = computed(() => {
- if (settingsStore.isDark) {
- return 'var(--sidebar-bg)'
- }
- // 娴呰壊涓婚鏃讹紝鐩存帴鐢ㄤ富棰樿壊
- return sideTheme.value === 'theme-dark' ? variables.menuBg : settingsStore.theme
-})
-
-// 鑾峰彇鑿滃崟鏂囧瓧棰滆壊
-const getMenuTextColor = computed(() => {
- if (settingsStore.isDark) {
- return 'var(--sidebar-text)'
- }
- return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
-})
-
-const activeMenu = computed(() => {
- const { meta, path } = route
- if (meta.activeMenu) {
- return meta.activeMenu
- }
- return path
-})
-</script>
-
-<style lang="scss" scoped>
-.sidebar-container {
- background-color: v-bind(getMenuBackground);
-
- .scrollbar-wrapper {
- background-color: v-bind(getMenuBackground);
- }
-
- .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
-
+<template>
+ <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
+ <logo v-if="showLogo" :collapse="isCollapse" />
+ <el-scrollbar wrap-class="scrollbar-wrapper">
+ <el-menu
+ :default-active="activeMenu"
+ :collapse="isCollapse"
+ :background-color="getMenuBackground"
+ :text-color="getMenuTextColor"
+ :unique-opened="true"
+ :active-text-color="theme"
+ :collapse-transition="false"
+ mode="vertical"
+ :class="sideTheme"
+ >
+ <sidebar-item
+ v-for="(route, index) in sidebarRouters"
+ :key="route.path + index"
+ :item="route"
+ :base-path="route.path"
+ />
+ </el-menu>
+ </el-scrollbar>
+ </div>
+</template>
+
+<script setup>
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/assets/styles/variables.module.scss'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
+
+const route = useRoute()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
+
+const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const showLogo = computed(() => settingsStore.sidebarLogo)
+const sideTheme = computed(() => settingsStore.sideTheme)
+const theme = computed(() => settingsStore.theme)
+const isCollapse = computed(() => !appStore.sidebar.opened)
+
+const getMenuBackground = computed(() => 'var(--sidebar-bg)')
+
+const getMenuTextColor = computed(() => {
+ if (settingsStore.isDark) {
+ return 'var(--sidebar-text)'
+ }
+ return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
+})
+
+const activeMenu = computed(() => {
+ const { meta, path } = route
+ if (meta.activeMenu) {
+ return meta.activeMenu
+ }
+ return path
+})
+</script>
+
+<style lang="scss" scoped>
+.sidebar-container {
+ background-color: v-bind(getMenuBackground);
+
+ .scrollbar-wrapper {
+ background-color: v-bind(getMenuBackground);
+ }
+
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
+
.el-menu-item,
.el-sub-menu__title {
margin-bottom: 6px;
@@ -88,7 +92,7 @@
font-weight: 600;
}
}
-
+
.el-sub-menu__title {
color: v-bind(getMenuTextColor);
}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3610250..2d4bf01 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -104,9 +104,9 @@
padding-bottom: 8px;
}
-.hideSidebar .fixed-header {
- width: calc(100% - 70px);
-}
+.hideSidebar .fixed-header {
+ width: calc(100% - 100px);
+}
.sidebarHide .fixed-header {
width: calc(100% - 32px);
--
Gitblit v1.9.3