From b8063b8d47eb18562f0000c92407d2ab3d7c7bb7 Mon Sep 17 00:00:00 2001
From: chuan_wuhao <443547225@qq.com>
Date: Sat, 31 Dec 2022 21:49:35 +0800
Subject: [PATCH] =?UTF-8?q?v3.0.4=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=A1=B9?=
=?UTF-8?q?=E7=9B=AElogo=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
cfg.ts | 23 ++++++++++++
package.json | 2 +-
src/layout/components/Menu/index.scss | 27 ++++++++++++++
src/layout/components/Menu/index.tsx | 46 ++++++++++++++++++++++--
src/layout/components/SiderBar/index.tsx | 4 +--
src/layout/index.tsx | 4 +--
src/types/index.d.ts | 10 +++++-
vite-plugin/index.ts | 2 +-
vite.config.ts | 3 +-
9 files changed, 111 insertions(+), 10 deletions(-)
create mode 100644 src/layout/components/Menu/index.scss
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,
},
}