✨(component): 新增pageHeader组件 在页面路径不复杂的情况下可以使用该组件代替面包屑组件

ISSUES CLOSED: #I4V3VC

package/component/src/component/pageHeader/index.less

@@ -0,0 +1,37 @@
+.lay-page-header{
+  display: flex;
+  line-height: 24px;
+}
+.lay-page-header__left {
+  display: flex;
+  cursor: pointer;
+  margin-right: 40px;
+  position: relative;
+  color: var(--global-neutral-color-8);
+}
+.lay-page-header__left:after {
+  content: "";
+  position: absolute;
+  width: 1px;
+  height: 16px;
+  right: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--global-neutral-color-8);
+}
+.lay-page-header__left:hover .layui-icon-return ,.lay-page-header__left:hover .lay-page-header__title{
+  color: var(--global-checked-color) !important;
+}
+
+.lay-page-header__left .layui-icon-return {
+  font-size: 14px;
+  margin-right: 6px;
+  align-self: center;
+}
+.lay-page-header__title {
+  font-size: 14px;
+}
+.lay-page-header__content {
+  font-size: 18px;
+  color: #393D49;
+}

package/component/src/component/pageHeader/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

package/component/src/component/pageHeader/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="lay-page-header">
+    <div class="lay-page-header__left" @click="emits('back')">
+      <i class="layui-icon layui-icon-return"></i>
+      <div class="lay-page-header__title">{{ backText }}</div>
+    </div>
+    <div class="lay-page-header__content">{{ content }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayPageHeader",
+};
+</script>
+<script lang="ts" setup>
+import "./index.less";
+export interface LayPageHeaderProps {
+  content?: string;
+  backText?: string;
+}
+const props = withDefaults(defineProps<LayPageHeaderProps>(), {
+  content: "",
+  backText: "返回",
+});
+
+const emits = defineEmits(["back"]);
+</script>

package/component/src/index.ts

@@ -84,6 +84,7 @@ import LayTransition from "./component/transition/index";
 import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
 import LayNoticeBar from "./component/noticeBar/index";
+import LayPageHeader from "./component/pageHeader/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -166,6 +167,7 @@ const components: Record<string, Plugin> = {
   LayUpload,
   LayRipple,
   LayNoticeBar,
+  LayPageHeader,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -255,6 +257,7 @@ export {
   LayUpload,
   LayRipple,
   LayNoticeBar,
+  LayPageHeader,
   install,
 };
 

package/document/src/document/zh-CN/components/pageHeader.md

@@ -0,0 +1,66 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 如果页面的路径比较简单，则使用页头组件要比面包屑更直观一点。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-page-header` 标签
+
+<template>
+  <lay-page-header content="详情页面" @back="handleBack"></lay-page-header>
+</template>
+
+<script setup>
+const handleBack=()=>{
+  alert('点击返回回调')
+}
+</script>
+
+:::
+
+::: demo 使用 `backText` 属性  自定义返回文本
+
+<template>
+  <lay-page-header content="详情页面" backText="back" @back="handleBack"></lay-page-header>
+</template>
+
+<script setup>
+const handleBack=()=>{
+  alert('点击返回回调')
+}
+</script>
+
+:::
+
+
+::: title PageHeader 属性
+:::
+
+::: table
+
+| 属性   | 描述 | 可选值         |
+| ------ | ---- | -------------- |
+| content| 标题 | --             |
+| backText| 返回文本 | 默认 "返回"            |
+
+:::
+
+::: title PageHeader 事件
+:::
+
+::: table
+
+| 属性   | 描述 |
+| ------ | ---- | 
+| back| 点击返回回调 |
+
+:::
+
+::: previousNext pageHeader
+:::

package/document/src/router/zh-CN.ts

@@ -393,6 +393,11 @@ const zhCN = [
               import("../document/zh-CN/components/noticeBar.md"),
             meta: { title: "通告栏" },
           },
+          {
+            path: "/zh-CN/components/pageheader",
+            component: () =>import("../document/zh-CN/components/pageHeader.md"),
+            meta: { title: "页头" },
+          },
         ],
       },
     ],

package/document/src/view/utils/menus.ts

@@ -105,6 +105,12 @@ const menus = [
         subTitle: "breadcrumb",
         path: "/zh-CN/components/breadcrumb",
       },
+      {
+        id: 17,
+        title: "页头",
+        subTitle: "pageHeader",
+        path: "/zh-CN/components/pageheader",
+      },
       {
         id: 28,
         title: "选项卡",