v3.0.4，新增项目logo配置

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',
+  },
   /**
    *
    * 版权信息

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.0.3",
+  "version": "3.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

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;
+    }
+  }
+}

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 ? (
+          <div
+            class={[
+              'ray-menu__logo',
+              this.sideBarLogo.url ? 'ray-menu__logo-url' : '',
+            ]}
+            onClick={this.handleSideBarLogoClick.bind(this)}
+          >
+            <RayIcon name={this.sideBarLogo.icon as string} size="30" />
+            <h1
+              class={[
+                !this.modelCollapsed ? 'ray-menu__logo-title--open' : '',
+                'ray-menu__logo-title',
+              ]}
+            >
+              {this.sideBarLogo.title}
+            </h1>
+          </div>
+        ) : (
+          ''
+        )}
         <NMenu
           v-model:value={this.modelMenuKey}
           options={this.modelMenuOptions as NaiveMenuOptions[]}
           indent={24}
           collapsed={this.modelCollapsed}
           collapsedIconSize={22}
-          collapsedWidth={64}
+          collapsedWidth={this.collapsedWidth}
           onUpdateValue={this.menuModelValueChange.bind(this)}
         />
       </NLayoutSider>

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

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 = {

src/types/index.d.ts

@@ -16,6 +16,13 @@ import type { VNodeChild } from 'vue'
 export global {
   declare type Recordable<T = unknown> = Record<string, T>
 
+  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<string>
     }
     layout: {
-      copyright: string | number | VNodeChild
+      copyright?: string | number | VNodeChild
+      sideBarLogo?: SideBarLogo
     }
   }
 

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) => {

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,
   },
 }