Merge pull request #12 from nancyzhan/master

1.7.5版本更新
WeBankFinTech · Dec 25, 2023 · 27924c0 · 27924c0
2 parents a4d223d + 69b4639
commit 27924c0
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 7 deletions.
diff --git a/docs/.vitepress/components/BHorizontalLayout/index.md b/docs/.vitepress/components/BHorizontalLayout/index.md
@@ -34,4 +34,5 @@ app.use(BHorizontalLayout);
 | container | 布局右侧主要内容                                                                                                                          | -                        |
 ## 注意事项
 1. BHorizontalLayout为根元素，组件会占满屏幕高度。
-2. 布局组件，html的height为100%。
+2. 布局组件，html的height为100%。
+3. 菜单支持根据路径匹配到根菜单进行展开，根菜单需配置路径value
diff --git a/docs/.vitepress/components/BNavHeader/index.md b/docs/.vitepress/components/BNavHeader/index.md
@@ -0,0 +1,31 @@
+# BNavHeader
+提供页面顶部的标题返回栏
+
+## 组件注册
+
+```js
+import { BNavHeader } from '@fesjs/traction-widget';
+app.use(BNavHeader);
+```
+## 代码演示
+### 基础用法
+传入导航栏数据，生成导航。
+
+--USE
+
+--CODE
+
+## 参数说明
+### BNavHeader Props
+| 属性  | 说明                   | 类型                                    |  默认值                                 |是否必须|
+| ----- | ----------------------------- | ---------------------------------------- |------------------ |----- |
+| title | 顶部栏标题 | String | - | 是
+| isShowArrow | 是否显示返回箭头 | Boolean | true | 否
+### BNavHeader Events
+| 事件名称          | 说明                                                                                                                                            | 回调参数                                |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| back | 点击返回箭头时触发的回调函数                                                                                                                                          | -
+### BNavHeader Slots
+| 名称          | 说明                                                                                                                                            | 参数                                |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| suffix | 后缀内容                                                                                                                                          | -                        |
diff --git a/docs/.vitepress/components/BNavHeader/use.vue b/docs/.vitepress/components/BNavHeader/use.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <BNavHeader title="顶部栏标题" @back="handleBack">
+            <template v-slot:suffix>
+                <div>后缀内容</div>
+            </template>
+        </BNavHeader>
+        <div class="eg-page">页面内容</div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, h } from 'vue';
+import { BNavHeader } from '@fesjs/traction-widget';
+import { FMessage } from '@fesjs/fes-design';
+const handleBack = () => {
+    FMessage.info('自定义返回逻辑');
+};
+</script>
+<style lang='less' scoped>
+.eg-page {
+    padding: 24px;
+    background: #fff;
+    border-radius: 4px;
+}
+</style>
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -100,6 +100,7 @@ export default defineConfig({
                         { text: 'BVerticalLayout', link: '/components/BVerticalLayout' },
                         { text: 'BTablePage', link: '/components/BTablePage' },
                         { text: 'BNavBar', link: '/components/BNavBar'},
+                        { text: 'BNavHeader', link: '/components/BNavHeader'},
                     ]
                 }
             ],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/traction-widget",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "scripts": {
     "docs:dev": "npm run build && vitepress dev docs",
@@ -28,7 +28,8 @@
     "url": "[email protected]:WeBankFinTech/TractionWidget.git"
   },
   "keywords": [
-    "traction","widget"
+    "traction",
+    "widget"
   ],
   "author": "[email protected]",
   "license": "MIT",

diff --git a/packages/traction-widget/components/NavHeader/NavHeader.vue b/packages/traction-widget/components/NavHeader/NavHeader.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="wd-nav-header">
+        <LeftOutlined v-if="isShowArrow" class="back" @click="handleArrowClick" />
+        <div class="name">{{title}}</div>
+        <div v-if="isSlot" class="suffix">
+            <slot name="suffix"></slot>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { defineProps, defineEmits, useSlots } from 'vue';
+import { LeftOutlined } from '@fesjs/fes-design/icon';
+
+const isSlot = !!useSlots().suffix;
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    isShowArrow: {
+        type: Boolean,
+        required: false,
+        default: true
+    }
+});
+
+const emit = defineEmits(['back']);
+
+const handleArrowClick = () => {
+    emit('back');
+};
+
+</script>
+<script lang="ts">
+export default {
+    name: 'BNavHeader'
+};
+</script>
diff --git a/packages/traction-widget/components/NavHeader/index.ts b/packages/traction-widget/components/NavHeader/index.ts
@@ -0,0 +1,9 @@
+import { withInstall } from '../_util/withInstall';
+import NavHeader from './NavHeader.vue';
+
+import type { SFCWithInstall } from '../_util/interface';
+
+type NavHeaderType = SFCWithInstall<typeof NavHeader>;
+export const BNavHeader = withInstall<NavHeaderType>(NavHeader as NavHeaderType);
+
+export default BNavHeader;
diff --git a/packages/traction-widget/components/NavHeader/style/index.less b/packages/traction-widget/components/NavHeader/style/index.less
@@ -0,0 +1,19 @@
+.wd-nav-header {
+    display: flex;
+    align-items: center;
+    padding-bottom: 16px;
+    .back {
+        color: #93949B;
+        height: 24px;
+        width: 24px;
+        transform: scale(1.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .name {
+        font-size: 24px;
+        color: #0F1222;
+        margin: 0 12px;
+    }
+}
diff --git a/packages/traction-widget/components/NavHeader/style/index.ts b/packages/traction-widget/components/NavHeader/style/index.ts
@@ -0,0 +1 @@
+import './index.less';
diff --git a/packages/traction-widget/components/index.ts b/packages/traction-widget/components/index.ts
@@ -8,6 +8,7 @@ import { BVerticalLayout } from './VerticalLayout';
 import { BSearch } from './Search';
 import { BTablePage } from './TablePage';
 import { BNavBar } from './NavBar';
+import { BNavHeader } from './NavHeader';
 
 const components = [
     BTagsPanel,
@@ -17,7 +18,8 @@ const components = [
     BVerticalLayout,
     BSearch,
     BTablePage,
-    BNavBar
+    BNavBar,
+    BNavHeader
 ];
 
 const install = (app: any): any => {
@@ -42,7 +44,8 @@ export {
     BVerticalLayout,
     BSearch,
     BTablePage,
-    BNavBar
+    BNavBar,
+    BNavHeader
 };
 
 export default {
@@ -60,5 +63,6 @@ export default {
     BVerticalLayout,
     BSearch,
     BTablePage,
-    BNavBar
+    BNavBar,
+    BNavHeader
 };
diff --git a/packages/traction-widget/package.json b/packages/traction-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/traction-widget",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "main": "dist/traction-widget.min.js",
   "module": "es/components/index.js",