diff --git a/cfg.ts b/cfg.ts index 166c330c..18932305 100644 --- a/cfg.ts +++ b/cfg.ts @@ -10,15 +10,38 @@ export interface HTMLTitle { transformIndexHtml: (title: string) => string } +export interface SideBarLogo { + icon?: string + title?: string + url?: string + jumpType?: 'station' | 'outsideStation' +} + export interface Config { server: ServerOptions buildOptions: (mode: string) => BuildOptions alias: AliasOptions title: HTMLTitle copyright?: string | number | VNodeChild + sideBarLogo: SideBarLogo } const config: Config = { + /** + * + * icon: LOGO 图标, 依赖 `RayIcon` 实现 + * title: LOGO 标题 + * url: 点击跳转地址, 如果不配置该属性, 则不会触发跳转 + * jumpType: 跳转类型(station: 项目内跳转, outsideStation: 新页面打开) + * + * 如果不设置该属性或者为空, 则不会渲染 LOGO + */ + sideBarLogo: { + icon: 'ray', + title: 'Ray Template', + url: '/dashboard', + jumpType: 'station', + }, /** * * 版权信息 diff --git a/package.json b/package.json index e2bb96e6..bdbb98f1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": true, - "version": "3.0.3", + "version": "3.0.4", "type": "module", "scripts": { "dev": "vite", diff --git a/src/layout/components/Menu/index.scss b/src/layout/components/Menu/index.scss new file mode 100644 index 00000000..8a4842e2 --- /dev/null +++ b/src/layout/components/Menu/index.scss @@ -0,0 +1,27 @@ +.ray-menu__logo { + height: 50px; + padding: 0 18px 0 24px; + display: flex; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + gap: 8px 12px; + font-weight: 600; + overflow: hidden; + + &.ray-menu__logo-url { + cursor: pointer; + } + + & .ray-menu__logo-title { + opacity: 0; + display: none; + flex: 1; + white-space: nowrap; + + &.ray-menu__logo-title--open { + opacity: 1; + display: inline-block; + } + } +} diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx index fba5acdc..f4ee8526 100644 --- a/src/layout/components/Menu/index.tsx +++ b/src/layout/components/Menu/index.tsx @@ -1,10 +1,16 @@ +import './index.scss' + import { NMenu, NLayoutSider } from 'naive-ui' +import RayIcon from '@/components/RayIcon/index' + import { useMenu } from '@/store' const LayoutMenu = defineComponent({ name: 'LayoutMenu', setup() { const menuStore = useMenu() + const router = useRouter() + const { menuModelValueChange, setupAppRoutes, collapsedMenu } = menuStore const modelMenuKey = computed({ get: () => menuStore.menuKey, @@ -13,6 +19,18 @@ const LayoutMenu = defineComponent({ }) const modelMenuOptions = computed(() => menuStore.options) const modelCollapsed = computed(() => menuStore.collapsed) + const collapsedWidth = 64 + const { + layout: { sideBarLogo }, + } = __APP_CFG__ + + const handleSideBarLogoClick = () => { + if (sideBarLogo && sideBarLogo.url) { + sideBarLogo.jumpType === 'station' + ? router.push(sideBarLogo.url) + : window.open(sideBarLogo.url) + } + } setupAppRoutes() @@ -22,6 +40,9 @@ const LayoutMenu = defineComponent({ modelMenuOptions, modelCollapsed, collapsedMenu, + collapsedWidth, + sideBarLogo, + handleSideBarLogoClick, } }, render() { @@ -30,16 +51,37 @@ const LayoutMenu = defineComponent({ bordered showTrigger collapseMode="width" - collapsedWidth={64} + collapsedWidth={this.collapsedWidth} onUpdateCollapsed={this.collapsedMenu.bind(this)} > + {this.sideBarLogo ? ( +
+ +

+ {this.sideBarLogo.title} +

+
+ ) : ( + '' + )} diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 7894a275..e7ff5488 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -98,7 +98,7 @@ const SiderBar = defineComponent({ onPositiveClick: () => { window.$message.info('账号退出中...') removeCache('all-sessionStorage') - setTimeout(() => window.location.reload(), 2 * 1000) + setTimeout(() => window.location.reload(), 300) }, }) } else { @@ -112,7 +112,7 @@ const SiderBar = defineComponent({ reload: () => { changeSwitcher(false, 'reloadRouteSwitch') - setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch')) + setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'), 1.5 * 1000) }, setting: () => { showSettings.value = true diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 49379717..bd9696fa 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -1,6 +1,6 @@ import './index.scss' -import { NLayout, NLayoutContent, NLayoutFooter } from 'naive-ui' +import { NLayout, NLayoutContent } from 'naive-ui' import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' import LayoutMenu from './components/Menu/index' import SiderBar from './components/SiderBar/index' @@ -20,7 +20,7 @@ const Layout = defineComponent({ if (menuStore.menuTagSwitch) { cssVar = { - '--layout-content-height': 'calc(100% - 110px)', + '--layout-content-height': 'calc(100% - 109px)', } } else { cssVar = { diff --git a/src/types/index.d.ts b/src/types/index.d.ts index fa681899..76f4415b 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -16,6 +16,13 @@ import type { VNodeChild } from 'vue' export global { declare type Recordable = Record + export declare interface SideBarLogo { + icon?: string + title?: string + url?: string + jumpType?: 'station' | 'outsideStation' + } + declare const __APP_CFG__: { pkg: { name: string @@ -24,7 +31,8 @@ export global { devDependencies: Recordable } layout: { - copyright: string | number | VNodeChild + copyright?: string | number | VNodeChild + sideBarLogo?: SideBarLogo } } diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts index a9f28061..3642c64a 100644 --- a/vite-plugin/index.ts +++ b/vite-plugin/index.ts @@ -93,7 +93,7 @@ export const useVueI18nPlugin = () => * * @param title 浏览器 title 名称 */ -export const HTMLTitlePlugin = (title = 'ray template') => { +export const HTMLTitlePlugin = (title: string) => { return { name: 'html-transform', transformIndexHtml: (html: string) => { diff --git a/vite.config.ts b/vite.config.ts index 5903b657..d498de05 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,12 +4,13 @@ import config from './cfg' const pkg = require('./package.json') const { dependencies, devDependencies, name, version } = pkg -const { server, buildOptions, alias, title, copyright } = config +const { server, buildOptions, alias, title, copyright, sideBarLogo } = config const __APP_CFG__ = { pkg: { dependencies, devDependencies, name, version }, layout: { copyright, + sideBarLogo, }, }