Merge pull request #52 from WeBankFinTech/branch_joy

feat: 水平布局组件加参defaultExpandAll，版本更新至1.11.2

Author: mayinrain

docs/.vitepress/components/BHorizontalLayout/index.md

@@ -15,14 +15,22 @@ app.use(BHorizontalLayout);
 
 --CODE
 
+
+### 设置默认菜单项全部展开
+
+--USEEXPANDALL
+
+
 ## 参数说明
 ### BHorizontalLayout Props
 | 属性  | 说明                   | 类型                                    |  默认值                                 |是否必须|
 | ----- | ----------------------------- | ---------------------------------------- |------------------ |----- |
 | curPath | 当前路径 | String|''| 是
 | menus | 菜单列表 | Array(object)|[]| 是
+| defaultExpandAll | 是否默认展开全部菜单，当curPath有值时，defaultExpandAll将失效 | boolean|false| 否
 | isFoot | 是否展示页脚 | Boolean|true| 否
 | footText | 页脚内容 | String|WeDataSphere版权所有| 否
+
 ### BHorizontalLayout Events
 | 事件名称          | 说明                                                                                                                                            | 回调参数                                |
 | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |

docs/.vitepress/components/BHorizontalLayout/useExpandAll.vue

@@ -0,0 +1,131 @@
+<template>
+    <div style="height: 500px">
+        <BHorizontalLayout v-model:curPath="currentPath" :menus="menus" @menuChange="onMenuClick" @sideBarCollapse="onSideBarCollapse" footText="自定义注脚" :defaultExpandAll="true">
+            <template v-slot:top>
+                    顶部内容
+            </template>
+            <template v-slot:container>
+                <div>
+                    右侧容器内容使用slot插槽,
+                    当前选择菜单路径：{{currentPath}}
+                </div>
+            </template>
+        </BHorizontalLayout>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, h} from 'vue';
+import { BHorizontalLayout } from '@fesjs/traction-widget';
+import { AppstoreOutlined, DateOutlined,ClusterOutlined, SettingOutlined } from '@fesjs/fes-design/icon';
+
+const currentPath = ref<string>('');
+const menus = ref([{
+    label: '任务查询',
+    value: '/tasks',
+    icon: () => h(AppstoreOutlined),
+}, {
+    label: '我的项目',
+    value: '/rules',
+    icon: () => h(SettingOutlined),
+    children: [{
+        label: '规则查询一个很长想看下省略效果的标题',
+        value: '/rules/query1',
+        icon: () => h(DateOutlined),
+        children: [{
+            label: '规则查询一个很长想看下省略效果的标题',
+            value: '/rules/query2',
+            icon: () => h(DateOutlined),
+        }, {
+            label: '规则模板',
+            value: '/rules/template3',
+            icon: () => h(ClusterOutlined),
+            children: [{
+                label: '规则查询一个很长想看下省略效果的标题',
+                value: '/rules/query4',
+                icon: () => h(DateOutlined),
+                children: [{
+                    label: '规则查询一个很长想看下省略效果的标题',
+                    value: '/rules/query5',
+                    icon: () => h(DateOutlined),
+                }, {
+                    label: '规则模板',
+                    value: '/rules/template6',
+                    icon: () => h(ClusterOutlined),
+                }]
+            }, {
+                label: '规则模板',
+                value: '/rules/template7',
+                icon: () => h(ClusterOutlined),
+            }]
+        }]
+    }, {
+        label: '规则模板',
+        value: '/rules/template8',
+        icon: () => h(ClusterOutlined),
+    }]
+},{
+    label: '我的项目2',
+    value: '/rules2',
+    icon: () => h(SettingOutlined),
+    children: [{
+        label: '规则查询一个很长想看下省略效果的标题2',
+        value: '/rules2/query',
+        icon: () => h(DateOutlined),
+    }, {
+        label: '规则模板2',
+        value: '/rules2/template',
+        icon: () => h(ClusterOutlined),
+    }]
+},
+{
+    label: '任务查询1',
+    value: '/tasks1',
+    icon: () => h(AppstoreOutlined),
+},{
+    label: '任务查询2',
+    value: '/tasks2',
+    icon: () => h(AppstoreOutlined),
+},{
+    label: '任务查询3',
+    value: '/tasks3',
+    icon: () => h(AppstoreOutlined),
+},{
+    label: '任务查询4',
+    value: '/tasks4',
+    icon: () => h(AppstoreOutlined),
+},{
+    label: '任务查询5',
+    value: '/tasks5',
+    icon: () => h(AppstoreOutlined),
+},{
+    label: '任务查询6',
+    value: '/tasks6',
+    icon: () => h(AppstoreOutlined),
+},{    label: '任务查询7',
+    value: '/tasks7',
+    icon: () => h(AppstoreOutlined),
+},{    label: '任务查询8',
+    value: '/tasks8',
+    icon: () => h(AppstoreOutlined),
+},{    label: '任务查询9',
+    value: '/tasks9',
+    icon: () => h(AppstoreOutlined),
+},{
+    label: '任务查询10',
+    value: '/tasks10',
+    icon: () => h(AppstoreOutlined),
+}]);
+
+const onMenuClick = (v: any) => {
+    currentPath.value = v.value;
+    console.log('onMenuClick-菜单跳转', currentPath.value);
+};
+
+const onSideBarCollapse = (v:Boolean) => {
+    if (v) {
+        console.log('侧边栏折叠')
+    } else {
+        console.log('侧边栏展开')
+    }
+}
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/traction-widget",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "scripts": {
     "docs:dev": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress dev docs",

packages/traction-widget/components/HorizontalLayout/HorizontalLayout.vue

@@ -12,6 +12,7 @@
                     :collapsed="isSideBarCollapse"
                     @select="onMenuClick"
                     :expandedKeys="expandedKeys"
+                    :defaultExpandAll="defaultExpandAll"
                 ></FMenu>
             </div>
             <div class="collapse-btn" @click="toggleSideBar">
@@ -48,6 +49,14 @@ const props = defineProps({
         require: true,
         default: () => []
     },
+
+    // 是否默认展开全部菜单项
+    defaultExpandAll: {
+        type: Boolean,
+        require: false,
+        default: false
+    },
+
     // 是否展示注脚
     isFoot: {
         type: Boolean,

packages/traction-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/traction-widget",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "main": "dist/traction-widget.min.js",
   "module": "es/components/index.js",