✨(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,
 };