feat: logo 添加点击事件 (#188)

* feat: logo 添加点击事件

* feat: logo 添加点击事件

docs/reference/plugin/plugins/layout.md

@@ -1,7 +1,9 @@
 # @fesjs/plugin-layout
 
 ## 介绍
+
 为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
+
 -   侧边栏菜单数据根据路由中的配置自动生成。
 -   布局，提供 `side`、 `top`、`mixin` 三种布局。
 -   主题，提供 `light`、`dark` 两种主题。
@@ -11,44 +13,52 @@
 -   支持自定义头部区域。
 -   菜单支持配置 icon
 -   菜单标题支持国际化
-  
 -   可配置页面是否需要 layout。
 
 ## 启用方式
+
 在 `package.json` 中引入依赖：
+
 ```json
 {
     "dependencies": {
         "@fesjs/fes": "^2.0.0",
         "@fesjs/plugin-layout": "^4.0.0"
-    },
+    }
 }
 ```
 
 ## 布局类型
+
 配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
+
 ```js
 export default {
     layout: {
         navigation: 'side'
     }
-}
+};
 ```
 
 ### side
+
 <!-- ![side](/side.png) -->
 <img :src="$withBase('side.png')" alt="side">
 
 ### top
+
 <!-- ![top](/top.png) -->
 <img :src="$withBase('top.png')" alt="top">
 
 ### mixin
+
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">
 
 ### 页面禁用布局
+
 布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
+
 ```vue
 <config lang="json">
 {
@@ -56,7 +66,9 @@ export default {
 }
 </config>
 ```
+
 如果只是不想展示`sidebar`，则：
+
 ```
 <config lang="json">
 {
@@ -66,17 +78,18 @@ export default {
 }
 </config>
 ```
+
 `layout`的可选配置有：
 
 -   **sidebar**： 左侧区域，从 v4.0.0 开始，之前名称叫`side`
-  
 -   **header**： 头部区域，从 v4.0.0 开始，之前名称叫`top`
 
 -   **logo**：logo 和标题区域。
 
-
 ## keep-alive
+
 从 4.0.7 开始支持配置路由页面缓存：
+
 ```
 <config lang="json">
 {
@@ -86,7 +99,9 @@ export default {
 ```
 
 ## 编译时配置
+
 在 `.fes.js` 中配置：
+
 ```js
 export default {
     layout: {
@@ -124,65 +139,64 @@ export default {
 ```
 
 ### footer
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`null`
 
 -   **详情**：页面底部的文字。
 
 ### theme
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`dark`
 
 -   **详情**：主题，可选有 `dark`、`light`
 
 ### navigation
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`side`
 
 -   **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
 
 ### fixedHeader
-- **类型**：`Boolean`
 
+-   **类型**：`Boolean`
 -   **默认值**：`false`
 
 -   **详情**：是否固定头部，不跟随页面滚动。
 
 ### fixedSideBar
-- **类型**：`Boolean`
 
+-   **类型**：`Boolean`
 -   **默认值**：`true`
 
 -   **详情**：是否固定 sidebar，不跟随页面滚动。
 
 ### title
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`name` in package.json
 
 -   **详情**：产品名，会显示在 Logo 旁边。
 
 ### logo
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：默认提供 fes.js 的 Logo
 
 -   **详情**：Logo 的链接
 
-
 ### multiTabs
-- **类型**：`boolean`
 
+-   **类型**：`boolean`
 -   **默认值**：`false`
 
 -   **详情**：是否开启多页。
 
 ### menus
-- **类型**：`Array`
 
+-   **类型**：`Array`
 -   **默认值**：`[]`
 
 -   **详情**：菜单配置，子项具体配置如下：
@@ -204,23 +218,26 @@ export default {
 
 -   **icon**: 菜单的图标，只有一级标题展示图标。
     -   图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，在这里使用组件名称。
+
 ```js
 {
-    icon: "AppstoreOutlined"
+    icon: 'AppstoreOutlined';
 }
 ```
+
     - 图标使用本地或者远程svg图片。
+
 ```js
 {
-    icon: "/wine-outline.svg"
+    icon: '/wine-outline.svg';
 }
 ```
 
 -   **children**：子菜单配置。
 
 ### menusConfig
-- **类型**：`Object`
 
+-   **类型**：`Object`
 -   **默认值**：`{}`
 
 -   **详情**：菜单的配置：
@@ -232,38 +249,44 @@ export default {
     -   **accordion**：是否只保持一个子菜单的展开。
 
 ## 运行时配置
+
 在 `app.js` 中配置：
+
 ```js
 import UserCenter from '@/components/UserCenter';
 export const layout = {
     customHeader: <UserCenter />
 };
-
 ```
 
 ### menus
-- **类型**：`(defaultMenus: [] )=> Ref | []`
 
+-   **类型**：`(defaultMenus: [] )=> Ref | []`
 -   **详情**：运行时修改菜单，入参是默认菜单配置（.fes.js 中的 menu 配置），需要返回一个`Ref`或者数组。
 
 ```js
-import { ClusterOutlined } from '@fesjs/fes-design/icon'
+import { ClusterOutlined } from '@fesjs/fes-design/icon';
-export const layout = layoutConfig => ({
+export const layout = (layoutConfig) => ({
     ...layoutConfig,
     customHeader: <UserCenter />,
     menus: (defaultMenuData) => {
         const menusRef = ref(defaultMenuData);
-        watch(() => layoutConfig.initialState.userName, () => {
+        watch(
-            menusRef.value = [{
+            () => layoutConfig.initialState.userName,
+            () => {
+                menusRef.value = [
+                    {
                         name: 'store',
                         icon: <ClusterOutlined />
-            }];
+                    }
-        });
+                ];
+            }
+        );
         return menusRef;
     }
 });
-
 ```
+
 `layoutConfig.initialState` 是 `beforeRender.action`执行后创建的应用初始状态数据。
 
 如果菜单需要根据某些状态动态改变，则返回`Ref`，否则只需要返回数组。
@@ -272,43 +295,50 @@ export const layout = layoutConfig => ({
 在运行时配置菜单中的 icon，需要传组件本身，而不是组件的名称。
 :::
 
-
 ### header
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`true`
 
 -   **详情**：是否显示 header 区域。
 
 ### sidebar
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`true`
 
 -   **详情**：是否显示 sidebar 区域。
 
 ### logo
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：`true`
 
 -   **详情**：是否显示 logo 区域。
 
-### customHeader
+### onClickLogo
-- **类型**：Vue Component
 
+-   **类型**：`Function`
+-   **默认值**：`null`
+
+-   **详情**：logo 点击事件
+
+### customHeader
+
+-   **类型**：Vue Component
 -   **默认值**：`null`
 
 -   **详情**：top 的区域部分位置提供组件自定义功能。
 
 ### unAccessHandler
-- **类型**：`Function`
 
+-   **类型**：`Function`
 -   **默认值**：`null`
 
 -   **详情**：
 
     当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+
 -   **参数**
     -   router：createRouter 创建的路由实例
     -   to： 准备进入的路由
@@ -316,6 +346,7 @@ export const layout = layoutConfig => ({
     -   next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
 
 比如：
+
 ```js
 export const access = {
     unAccessHandler({ to, next }) {
@@ -330,17 +361,17 @@ export const access = {
         next('/403');
     }
 };
-
 ```
 
 ### noFoundHandler
-- **类型**：函数
 
+-   **类型**：函数
 -   **默认值**：null
 
 -   **详情**：
 
     当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
+
 -   **参数**
     -   router：createRouter 创建的路由实例
     -   to： 准备进入的路由
@@ -348,6 +379,7 @@ export const access = {
     -   next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
 
 比如：
+
 ```js
 export const access = {
     noFoundHandler({ next }) {
@@ -358,16 +390,15 @@ export const access = {
         next('/404');
     }
 };
-
 ```
 
 ### logoUrl
-- **类型**：`String`
 
+-   **类型**：`String`
 -   **默认值**：默认提供 fes.js 的 Logo
 
 -   **详情**：Logo 的链接。
 
-
 ### 其他运行时配置 (> 4.1.0)
+
 编译时配置的内容同样支持在运行时配置，但是`logo`除外，用`logoUrl`替代。

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -10,10 +10,18 @@
                 collapsible
                 :inverted="theme === 'dark'"
             >
-                <div v-if="routeLayout.logo" class="layout-logo">
+                <a
+                    v-if="routeLayout.logo"
+                    :class="[
+                        'layout-logo',
+                        routeLayout.onClickLogo && 'is-active'
+                    ]"
+                    @click="routeLayout.onClickLogo"
+                >
                     <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{title}}</div>
+                    <span class="logo-name">{{title}}</span>
-                </div>
+                </a>
+
                 <Menu
                     class="layout-menu"
                     :menus="menus"
@@ -25,10 +33,7 @@
                     :accordion="menuConfig?.accordion"
                 />
             </f-aside>
-            <f-layout
+            <f-layout :fixed="fixedSideBar" :style="sideStyleRef">
-                :fixed="fixedSideBar"
-                :style="sideStyleRef"
-            >
                 <f-header
                     v-if="routeLayout.header"
                     ref="headerRef"
@@ -64,10 +69,17 @@
                 :inverted="theme === 'dark'"
                 :fixed="currentFixedHeaderRef"
             >
-                <div v-if="routeLayout.logo" class="layout-logo">
+                <a
+                    v-if="routeLayout.logo"
+                    :class="[
+                        'layout-logo',
+                        routeLayout.onClickLogo && 'is-active'
+                    ]"
+                    @click="routeLayout.onClickLogo"
+                >
                     <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{title}}</div>
+                    <span class="logo-name">{{title}}</span>
-                </div>
+                </a>
                 <Menu
                     class="layout-menu"
                     :menus="menus"
@@ -105,10 +117,17 @@
                 :fixed="currentFixedHeaderRef"
                 :inverted="theme === 'dark'"
             >
-                <div v-if="routeLayout.logo" class="layout-logo">
+                <a
+                    v-if="routeLayout.logo"
+                    :class="[
+                        'layout-logo',
+                        routeLayout.onClickLogo && 'is-active'
+                    ]"
+                    @click="routeLayout.onClickLogo"
+                >
                     <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{title}}</div>
+                    <span class="logo-name">{{title}}</span>
-                </div>
+                </a>
                 <div class="layout-header-custom">
                     <slot name="customHeader"></slot>
                 </div>
@@ -160,8 +179,8 @@ import {
     FLayout, FAside, FMain, FFooter, FHeader
 } from '@fesjs/fes-design';
 import Menu from './Menu';
-import MultiTabProvider from './MultiTabProvider';
 import defaultLogo from '../assets/logo.png';
+import MultiTabProvider from './MultiTabProvider';
 import getRuntimeConfig from '../helpers/getRuntimeConfig';
 
 export default {
@@ -264,7 +283,9 @@ export default {
         const currentFixedHeaderRef = computed(
             () => props.fixedHeader || props.navigation === 'mixin'
         );
-        const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : null));
+        const headerStyleRef = computed(() => (currentFixedHeaderRef.value
+            ? { top: `${headerHeightRef.value}px` }
+            : null));
         const sideStyleRef = computed(() => (props.fixedSideBar
             ? {
                 left: collapsedRef.value ? '48px' : `${props.sideWidth}px`
@@ -286,6 +307,11 @@ export default {
 <style lang="less" scoped>
 .main-layout {
     height: 100vh;
+    .layout-logo {
+        &.is-active {
+            cursor: pointer;
+        }
+    }
     .layout-main {
         z-index: 0;
     }

packages/fes-template/src/app.js

@@ -1,6 +1,8 @@
 
 
-import { access as accessApi, pinia, createWatermark } from '@fesjs/fes';
+import {
+    access as accessApi, pinia, getRouter, createWatermark
+} from '@fesjs/fes';
 import PageLoading from '@/components/PageLoading';
 import UserCenter from '@/components/UserCenter';
 import { useStore } from '@/store/main';
@@ -29,6 +31,10 @@ export const beforeRender = {
 export const layout = layoutConfig => ({
     ...layoutConfig,
     customHeader: <UserCenter />,
+    onClickLogo() {
+        const router = getRouter();
+        router.push('/');
+    },
     menus: (defaultMenuData) => {
         const menusRef = ref(defaultMenuData);
         // watch(() => initialValue.initialState.userName, () => {