diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx index 650b9becc14896fabe89b6ea32623a7abf5ae174..d4d1047b42c035b84502e6101ee5c87691bd9d85 100644 --- a/src/components/Menu/src/BasicMenu.tsx +++ b/src/components/Menu/src/BasicMenu.tsx @@ -145,6 +145,15 @@ export default defineComponent({ resetKeys(); } } + + const showTitle = computed(() => { + if (!props.isAppMenu) return true; + if (!props.collapsedShowTitle) { + return !menuStore.getCollapsedState; + } + return true; + }); + // render menu item function renderMenuItem(menuList?: MenuType[], index = 1) { if (!menuList) { @@ -153,13 +162,6 @@ export default defineComponent({ const { appendClass } = props; const levelCls = `basic-menu-item__level${index} ${menuState.theme} `; - const showTitle = computed(() => { - if (!props.isAppMenu) return true; - if (!props.collapsedShowTitle) { - return !menuStore.getCollapsedState; - } - return true; - }); return menuList.map((menu) => { if (!menu) { return null; @@ -249,7 +251,7 @@ export default defineComponent({ return mode === MenuModeEnum.HORIZONTAL ? ( renderMenu() ) : ( -
+
{getSlot(slots, 'header')} li > .ant-menu-submenu-title { display: flex; margin-top: 12px; font-size: 12px; flex-direction: column; + line-height: 24px; } & > li[role='menuitem']:not(.ant-menu-submenu) { @@ -106,7 +118,7 @@ .ant-menu-submenu-open, .ant-menu-item-selected, .ant-menu-submenu-selected { - color: @primary-color; + color: @white !important; border-bottom: 3px solid @primary-color; } @@ -115,7 +127,7 @@ .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover { - color: @primary-color; + color: @white !important; border-bottom: 3px solid @primary-color; } @@ -194,12 +206,12 @@ } .basic-menu-item__level1 { + margin-bottom: 0; + > .ant-menu-sub > li { background-color: @sub-menu-item-dark-bg-color; } - margin-bottom: 0; - &.top-active-menu { color: @white; background: @top-menu-active-bg-color; @@ -236,6 +248,11 @@ } &.ant-menu-inline-collapsed { + .ant-menu-submenu-selected, + .ant-menu-item-selected { + .active-style(); + } + .ant-menu-item-selected { background: unset !important; box-shadow: none; diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts index 6436c0f9d646e5b0e566b7ac6ae3dac75681d0a6..60193c9ae26e480a33248129444cbafe667840cb 100644 --- a/src/components/Menu/src/props.ts +++ b/src/components/Menu/src/props.ts @@ -31,7 +31,7 @@ export const basicProps = { }, // 菜单组件的mode属性 mode: { - type: String as PropType, + type: String as PropType, default: MenuModeEnum.INLINE, }, type: { diff --git a/src/enums/appEnum.ts b/src/enums/appEnum.ts index f74656572ceb198247b9932b53439a2535ed7e64..f424bdcfbb415bec78015ad6a379a2b5bb61fcad 100644 --- a/src/enums/appEnum.ts +++ b/src/enums/appEnum.ts @@ -1,3 +1,6 @@ +export const SIDE_BAR_MINI_WIDTH = 58; +export const SIDE_BAR_SHOW_TIT_MINI_WIDTH = 80; + export enum ContentEnum { // auto width FULL = 'full', diff --git a/src/hooks/core/useSetting.ts b/src/hooks/core/useSetting.ts index daca42416795385d6c975a4d65f0246176ab9fcf..741f19a13d6c971b2b2bd61a1726cd6e2d009116 100644 --- a/src/hooks/core/useSetting.ts +++ b/src/hooks/core/useSetting.ts @@ -4,6 +4,9 @@ import getProjectSetting from '/@/settings/projectSetting'; import { getGlobEnvConfig, isDevMode } from '/@/utils/env'; import { getShortName } from '../../../build/getShortName'; +import { warn } from '/@/utils/log'; + +const reg = /[a-zA-Z\_]*/; const ENV_NAME = getShortName(import.meta.env); const ENV = ((isDevMode() @@ -16,6 +19,10 @@ const { VITE_GLOB_API_URL_PREFIX, } = ENV; +if (!reg.test(VITE_GLOB_APP_SHORT_NAME)) { + warn(`VITE_GLOB_APP_SHORT_NAME 变量只能是字符/下划线,请在环境变量中修改并重新运行。`); +} + export const useSetting = (): SettingWrap => { // Take global configuration const glob: Readonly = { diff --git a/src/layouts/default/LayoutSideBar.tsx b/src/layouts/default/LayoutSideBar.tsx index 8deb7a0d94efad6d3a377f391e0f0b189f557b40..d5c8ed17435899206e8315aec63b8e92c73f463c 100644 --- a/src/layouts/default/LayoutSideBar.tsx +++ b/src/layouts/default/LayoutSideBar.tsx @@ -10,8 +10,10 @@ import darkImg from '/@/assets/images/sidebar/dark.png'; import lightImg from '/@/assets/images/sidebar/light.png'; import { appStore } from '/@/store/modules/app'; import { MenuModeEnum, MenuSplitTyeEnum, MenuThemeEnum } from '/@/enums/menuEnum'; +import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum'; import { useDebounce } from '/@/hooks/core/useDebounce'; import LayoutMenu from './LayoutMenu'; + export default defineComponent({ name: 'DefaultLayoutSideBar', setup() { @@ -25,6 +27,13 @@ export default defineComponent({ return appStore.getProjectConfig; }); + const getMiniWidth = computed(() => { + const { + menuSetting: { collapsedShowTitle }, + } = unref(getProjectConfigRef); + return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH; + }); + // 根据展开状态设置背景图片 const getStyle = computed((): any => { // const collapse = unref(collapseRef); @@ -62,7 +71,7 @@ export default defineComponent({ innerE = innerE || window.event; // let tarnameb = innerE.target || innerE.srcElement; const maxT = 600; - const minT = 80; + const minT = unref(getMiniWidth); iT < 0 && (iT = 0); iT > maxT && (iT = maxT); iT < minT && (iT = minT); @@ -80,13 +89,13 @@ export default defineComponent({ const width = parseInt(wrap.style.width); menuStore.commitDragStartState(false); if (!menuStore.getCollapsedState) { - if (width > 100) { + if (width > unref(getMiniWidth) + 20) { setMenuWidth(width); } else { menuStore.commitCollapsedState(true); } } else { - if (width > 80) { + if (width > unref(getMiniWidth)) { setMenuWidth(width); menuStore.commitCollapsedState(false); } @@ -135,13 +144,13 @@ export default defineComponent({ const getDragBarStyle = computed(() => { if (menuStore.getCollapsedState) { - return { left: '80px' }; + return { left: `${unref(getMiniWidth)}px` }; } return {}; }); const getCollapsedWidth = computed(() => { - return unref(brokenRef) ? 0 : 80; + return unref(brokenRef) ? 0 : unref(getMiniWidth); }); function renderDragLine() { diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less index c1bdfeacc68b2bd485cccfbbaad1e3021320be77..9b368ef71c55ab835c75354317ffd20214e810ad 100644 --- a/src/layouts/default/index.less +++ b/src/layouts/default/index.less @@ -422,3 +422,17 @@ height: 30px; line-height: 30px; } + +.hide-title { + .ant-menu-inline-collapsed > .ant-menu-item, + .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, + .ant-menu-inline-collapsed + > .ant-menu-item-group + > .ant-menu-item-group-list + > .ant-menu-submenu + > .ant-menu-submenu-title, + .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title { + padding-right: 20px !important; + padding-left: 20px !important; + } +} diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index e05bae3fc2b0caedf5659cc885e626af27d923f1..ccd62bd88bec0a4e9fc3d40a90a3a4b0ac4890fd 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -19,7 +19,8 @@ import { genRouteModule, transformObjToRoute } from '/@/utils/helper/routeHelper import { transformRouteToMenu } from '/@/utils/helper/menuHelper'; import { useMessage } from '/@/hooks/web/useMessage'; -import { warn } from 'vue'; +import { warn } from '/@/utils/log'; + const { createMessage } = useMessage(); const NAME = 'permission'; hotModuleUnregisterModule(NAME); diff --git a/src/utils/log.ts b/src/utils/log.ts new file mode 100644 index 0000000000000000000000000000000000000000..d5cc50418e510881d04c11282634e669b816635c --- /dev/null +++ b/src/utils/log.ts @@ -0,0 +1,4 @@ +const projectName = import.meta.env.VITE_GLOB_APP_TITLE; +export function warn(message: string) { + console.warn(`[${projectName} warn]:${message}`); +} diff --git a/vite.config.ts b/vite.config.ts index 21789ff35a6ed2e2fac3fd1337d562e3f97ef39c..516d18dae3cf7b814de3cc717a77d3002dca503d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -80,7 +80,7 @@ const viteConfig: UserConfig = { * boolean | 'terser' | 'esbuild' * @default 'terser' */ - minify: 'terser', + minify: isDevFn() ? 'esbuild' : 'terser', /** * 基本公共路径 * @default '/'