push

lib/saas/component/index.ts

@@ -0,0 +1 @@
+export { NsPageHeader } from './page-header';

lib/saas/component/page-header/index.ts

@@ -0,0 +1,4 @@
+import nsPageHeader from './page-header.vue';
+import { withInstall } from '/nerv-lib/util';
+
+export const NsPageHeader = withInstall(nsPageHeader);

lib/saas/component/page-header/page-header.vue

@@ -0,0 +1,62 @@
+<!-- @format -->
+
+<template>
+  <a-page-header
+    class="ns-page-header"
+    v-bind="$attrs"
+    :class="{ 'ns-page-header-sticky': sticky }">
+    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+      <slot :name="item" v-bind="data || {}"> </slot>
+    </template>
+  </a-page-header>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NsPageHeader',
+    props: {
+      sticky: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    setup(props) {
+      return {};
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .ant-page-header.ns-page-header {
+    padding: 20px 24px;
+    margin-bottom: 24px;
+    border-bottom: 1px solid #f0f2f5;
+
+    &.ns-page-header-sticky {
+      position: sticky;
+      z-index: 200;
+      top: 0;
+      background-color: @white;
+    }
+
+    :deep(.ant-page-header-heading) {
+      height: 32px;
+    }
+
+    :deep(.ant-page-header-heading-left) {
+      margin: 0 0;
+    }
+
+    :deep(.ant-page-header-heading-extra) {
+      margin: 0 0;
+    }
+    :deep(.ant-btn) {
+      margin-left: 12px !important;
+    }
+    .ant-page-header-heading-title {
+      font-size: 18px;
+      line-height: 32px;
+    }
+  }
+</style>