@cloudbase/weda-ui 2.0.28 → 3.1.2

package/dist/web/components/navigationBar/horizontalMenu.js

@@ -0,0 +1,99 @@
+/* eslint-disable react/jsx-key */
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { NavMenu, List, Dropdown } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import { renderMenuTitle, renderMenuIcon, renderLogo, renderTitle, navigateTo, } from './common';
+const CLASS_PREFIX = 'weda-menu';
+/**
+ * pc端横向导航
+ */
+const HorizontalMenu = ({ menuData, navigationStyle, selected, setSelected }) => {
+    // 导航样式
+    const { isHorizontal = false, showMenuIcon } = navigationStyle;
+    // 菜单背景色
+    const menuStyle = {
+        background: navigationStyle.menuBackgroundColor || '#fff',
+    };
+    // 平台
+    const platform = usePlatform();
+    // 横向导航， 判断是否出现右侧的滚动按钮
+    const [showButton, setShowButton] = useState(true);
+    // 横行导航移动
+    const [position, setPosition] = useState({ index: 0, offset: 0 });
+    const [menuOffset, setMenuOffset] = useState({});
+    const navWrapRef = useRef();
+    const getMenuOffset = useCallback(() => {
+        var _a, _b, _c, _d;
+        const parentWidth = (_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth;
+        const contentWidth = (_c = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth;
+        const menuItem = (_d = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _d === void 0 ? void 0 : _d.children;
+        const data = { 0: 0, 1: 0 };
+        let index = 1;
+        for (const i of menuItem) {
+            if (data[index] + (i === null || i === void 0 ? void 0 : i.clientWidth) + 8 > parentWidth) {
+                index = index + 1;
+                data[index] = (i === null || i === void 0 ? void 0 : i.clientWidth) + 8;
+            }
+            else {
+                data[index] += (i === null || i === void 0 ? void 0 : i.clientWidth) + 8;
+            }
+        }
+        setMenuOffset(data);
+        const showButton = contentWidth > parentWidth;
+        setShowButton(showButton);
+    }, [navWrapRef]);
+    useEffect(() => {
+        var _a;
+        if (platform !== 'h5' && isHorizontal && ((_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.children)) {
+            getMenuOffset();
+        }
+    }, [platform, isHorizontal, navWrapRef]);
+    // 渲染下拉菜单
+    const renderMenuList = (item, navigationStyle) => {
+        return (React.createElement(List, { type: "option", className: `${CLASS_PREFIX}__dropdown-menu-list`, style: { background: navigationStyle.menuBackgroundColor } }, item === null || item === void 0 ? void 0 : item.map((menu) => {
+            const { title, children, key } = menu;
+            return !(children === null || children === void 0 ? void 0 : children.length) ? (React.createElement(List.Item, { key: key, className: `${CLASS_PREFIX}__dropdown-list-item`, selected: key === selected, onClick: () => {
+                    if (key !== selected) {
+                        setSelected(key);
+                        navigateTo(menu);
+                    }
+                } }, renderMenuTitle(navigationStyle, { title }, false))) : (React.createElement(List.SubMenu, { key: key, className: `${CLASS_PREFIX}__dropdown-list-item`, label: renderMenuTitle(navigationStyle, { title }, false) }, renderMenuList(children, navigationStyle)));
+        })));
+    };
+    return (React.createElement(NavMenu, { style: menuStyle, className: `${CLASS_PREFIX}__nav`, left: React.createElement(React.Fragment, null,
+            React.createElement(NavMenu.Item, { type: "logo", className: `${CLASS_PREFIX}__nav-logo` }, renderLogo(navigationStyle, `${CLASS_PREFIX}__nav-logo--img`)),
+            React.createElement(NavMenu.Item, { className: `${CLASS_PREFIX}__nav-title` },
+                React.createElement("span", { className: `${CLASS_PREFIX}__title` }, renderTitle(navigationStyle)))), right: React.createElement("div", { className: `${CLASS_PREFIX}__nav-wrap` },
+            showButton && position.index > 0 && (React.createElement("div", { className: `${CLASS_PREFIX}__nav-shadow leftButton`, onClick: () => {
+                    const result = position.offset + menuOffset[position.index];
+                    setPosition({ index: position.index - 1, offset: result });
+                } },
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--icon` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--white` }))),
+            React.createElement("div", { className: `${CLASS_PREFIX}__nav-content box` },
+                React.createElement("div", { ref: navWrapRef, className: `${CLASS_PREFIX}__nav-content`, style: { transform: `translate(${position.offset}px, 0px)` } }, menuData === null || menuData === void 0 ? void 0 : menuData.map((i) => {
+                    var _a;
+                    return (React.createElement("div", { className: classNames(`${CLASS_PREFIX}__nav-item`, i.key === selected && i.level === 0
+                            ? `${CLASS_PREFIX}__item-open`
+                            : ''), key: i.key, onClick: () => {
+                            var _a;
+                            if (!((_a = i === null || i === void 0 ? void 0 : i.children) === null || _a === void 0 ? void 0 : _a.length) && i.key !== selected) {
+                                setSelected(i.key);
+                                navigateTo(i);
+                            }
+                        } },
+                        showMenuIcon &&
+                            renderMenuIcon(i === null || i === void 0 ? void 0 : i.iconUrl, i === null || i === void 0 ? void 0 : i.iconPath, navigationStyle),
+                        ((_a = i === null || i === void 0 ? void 0 : i.children) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(Dropdown, { trigger: 'hover', overlayClassName: `${CLASS_PREFIX}__dropdown`, button: renderMenuTitle(navigationStyle, i, false) }, renderMenuList(i.children, navigationStyle))) : (React.createElement(NavMenu.Item, { className: `${CLASS_PREFIX}__item-val`, selected: i.key === selected }, renderMenuTitle(navigationStyle, i, false)))));
+                }))),
+            showButton && position.index + 2 < Object.keys(menuOffset).length && (React.createElement("div", { className: `${CLASS_PREFIX}__nav-shadow`, onClick: () => {
+                    const result = position.offset - menuOffset[position.index + 1];
+                    setPosition({ index: position.index + 1, offset: result });
+                } },
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--white` }),
+                React.createElement("div", { className: `${CLASS_PREFIX}__shadow--icon` })))) }));
+};
+export default HorizontalMenu;

package/{src → dist}/web/components/navigationBar/index.css

@@ -9,11 +9,11 @@
 }
 
 .weda-menu .weda-menu__wrapper {
-  box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0.14286rem 0 0.42857rem rgba(0, 0, 0, 0.05);
 }
 
 .weda-menu .weda-menu__wrapper .weda-menu__menu-content {
-  width: 232px;
+  width: 16.57143rem;
   border-right: none;
 }
 
@@ -40,7 +40,7 @@
   .wedatea2td-menu__title {
   width: 100%;
   display: flex;
-  padding: 20px;
+  padding: 1.42857rem;
   height: auto;
 }
 
@@ -52,7 +52,7 @@
   display: block;
   width: 2.28571em;
   height: 2.28571em;
-  margin-right: 12px;
+  margin-right: 0.85714rem;
 }
 
 .weda-menu
@@ -69,14 +69,14 @@
 
 .weda-menu .weda-menu__wrapper .weda-menu__menu-content .wedatea2td-menu__body {
   width: 100%;
-  padding: 0 8px 30px 8px;
+  padding: 0 0.57143rem 2.14286rem 0.57143rem;
 }
 
 .weda-menu
   .weda-menu__menu-content
   .wedatea2td-menu__body
   .wedatea2td-menu__item {
-  padding: 7px 0 7px 12px;
+  padding: 0.5rem 0 0.5rem 0.85714rem;
   align-items: center;
 }
 
@@ -132,7 +132,7 @@
   .is-selected
   .wedatea2td-menu__item {
   background: var(--weda-navigation-menu-selected-color);
-  border-radius: 3px;
+  border-radius: 0.21429rem;
 }
 .wedatea2td-drawer
   .wedatea2td-menu--light
@@ -147,7 +147,7 @@
   li
   .wedatea2td-menu__item:hover {
   background-color: var(--weda-navigation-menu-hover-color);
-  border-radius: 3px;
+  border-radius: 0.21429rem;
 }
 
 .weda-menu
@@ -170,7 +170,7 @@
   .wedatea2td-menu__submenu
   .wedatea2td-menu__list
   .wedatea2td-menu__item {
-  padding-left: 40px;
+  padding-left: 2.85714rem;
 }
 
 .weda-menu
@@ -179,7 +179,7 @@
   .weda-menu__submenu
   .wedatea2td-menu__list
   .wedatea2td-menu__item {
-  padding-left: 56px;
+  padding-left: 4rem;
 }
 
 .weda-menu
@@ -275,9 +275,9 @@
 
 .weda-menu-horizontal .weda-menu__nav {
   background: #ffffff;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
-  height: 64px;
-  padding: 0 16px 0 16px;
+  box-shadow: 0 0.14286rem 0.42857rem rgba(0, 0, 0, 0.05);
+  height: 4.57143rem;
+  padding: 0 1.14286rem 0 1.14286rem;
 }
 
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-logo {
@@ -299,13 +299,13 @@
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-title .weda-menu__title {
   font-weight: normal;
   font-size: 1.14285em;
-  line-height: 18px;
+  line-height: 1.28571rem;
   color: #000000;
-  margin-left: 12px;
+  margin-left: 0.85714rem;
 }
 
 .weda-menu-horizontal .weda-menu__nav .wedatea2td-nav__flex-end {
-  margin-left: 20px;
+  margin-left: 1.42857rem;
 }
 
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-wrap {
@@ -313,20 +313,20 @@
   height: 100%;
   display: flex;
   align-items: center;
-  width: calc(100vw - 300px);
-  margin: 0 40px;
+  width: calc(100vw - 21.42857rem);
+  margin: 0 2.85714rem;
 }
 
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-shadow {
   position: absolute;
   height: 100%;
-  right: -36px;
-  width: 36px;
+  right: -2.57143rem;
+  width: 2.57143rem;
   background: unset;
   cursor: pointer;
 }
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-shadow.leftButton {
-  left: -12px;
+  left: -0.85714rem;
 }
 .weda-menu-horizontal
   .weda-menu__nav
@@ -336,10 +336,10 @@
 }
 .weda-menu-horizontal .weda-menu__nav .weda-menu__shadow {
   position: absolute;
-  width: 31px;
-  height: 52px;
+  width: 2.21429rem;
+  height: 3.71429rem;
   left: 0;
-  top: 6px;
+  top: 0.42857rem;
   background: radial-gradient(
     50% 50% at 50% 50%,
     rgba(0, 0, 0, 0.05) 0%,
@@ -347,25 +347,25 @@
   );
 }
 .weda-menu-horizontal .weda-menu__nav .leftButton .weda-menu__shadow--white {
-  left: 14px;
+  left: 1rem;
 }
 .weda-menu-horizontal .weda-menu__nav .weda-menu__shadow--white {
   position: absolute;
-  width: 17px;
-  left: 14px;
+  width: 1.21429rem;
+  left: 1rem;
   height: 100%;
   background-color: unset;
 }
 .weda-menu-horizontal .weda-menu__nav .leftButton .weda-menu__shadow--icon {
-  left: -4px;
+  left: -0.28571rem;
 }
 .weda-menu-horizontal .weda-menu__nav .weda-menu__shadow--icon {
   position: absolute;
-  background-image: url('./chevron-right--double.svg');
-  width: 16px;
-  height: 16px;
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuOTU4OTggMTEuNTQwNUwzLjg3ODIyIDEyLjQ1OTdMOC4zMzc4NCA4LjAwMDFMMy44NzgyMiAzLjU0MDQ4TDIuOTU4OTggNC40NTk3Mkw2LjQ5OTM2IDguMDAwMUwyLjk1ODk4IDExLjU0MDVaTTcuOTU4OTIgMTEuNTQwNUw4Ljg3ODE1IDEyLjQ1OTdMMTMuMzM3OCA4LjAwMDFMOC44NzgxNSAzLjU0MDQ4TDcuOTU4OTIgNC40NTk3MkwxMS40OTkzIDguMDAwMUw3Ljk1ODkyIDExLjU0MDVaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI2Ii8+Cjwvc3ZnPgo=);
+  width: 1.14286rem;
+  height: 1.14286rem;
   right: 0;
-  top: calc((100% - 16px) / 2);
+  top: calc((100% - 1.14286rem) / 2);
 }
 
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-content {
@@ -377,9 +377,9 @@
   overflow: hidden;
 }
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-item {
-  margin: 0 4px;
-  padding: 7px 12px;
-  height: 40px;
+  margin: 0 0.28571rem;
+  padding: 0.5rem 0.85714rem;
+  height: 2.85714rem;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -388,13 +388,13 @@
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-item:hover,
 .weda-menu-horizontal .weda-menu__nav .weda-menu__item-open {
   background-color: var(--weda-navigation-menu-selected-color);
-  border-radius: 3px;
+  border-radius: 0.21429rem;
 }
 
 .weda-menu-horizontal .weda-menu__nav-item .weda-menu__item-icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 4px;
+  width: 1.42857rem;
+  height: 1.42857rem;
+  margin-right: 0.28571rem;
 }
 .weda-menu-horizontal .weda-menu__item-val.wedatea2td-nav__dropdown {
   height: auto;
@@ -404,7 +404,7 @@
   padding: 0;
 }
 .weda-menu-horizontal .wedatea2td-dropdown__header.wedatea2td-dropdown-default {
-  padding: 0 23px 0 0;
+  padding: 0 1.64286rem 0 0;
   height: auto;
 }
 
@@ -424,7 +424,7 @@
   .wedatea2td-dropdown__header:hover
   .wedatea2td-icon-arrowdown {
   right: 0;
-  top: calc((100% - 16px) / 2);
+  top: calc((100% - 1.14286rem) / 2);
   background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4d3251a2-2fcd-4810-99a6-c8f69a258e09.svg');
 }
 
@@ -449,7 +449,7 @@
   .weda-menu__dropdown
   .wedatea2td-dropdown__header {
   padding-left: 0;
-  padding-right: 23px;
+  padding-right: 1.64286rem;
   height: 21.5714em;
 }
 
@@ -465,7 +465,7 @@
   .weda-menu__dropdown
   .wedatea2td-icon {
   right: 0;
-  top: calc((100% - 16px) / 2);
+  top: calc((100% - 1.14286rem) / 2);
 }
 
 .weda-menu__nav-content::-webkit-scrollbar {
@@ -477,7 +477,7 @@
 /* 横向导航栏dropdown */
 .weda-menu__dropdown .wedatea2td-dropdown-box {
   padding: 0;
-  min-width: 200px;
+  min-width: 14.28571rem;
   background-color: var(--weda-navigation-menu-background-color);
 }
 .weda-menu__dropdown
@@ -488,10 +488,10 @@
 }
 .weda-menu__dropdown .weda-menu__dropdown-menu-list {
   background: #ffffff;
-  border-radius: 3px;
-  padding: 8px;
-  border: 0.5px solid var(--weda-navigation-menu-background-color);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  border-radius: 0.21429rem;
+  padding: 0.57143rem;
+  border: 0.03571rem solid var(--weda-navigation-menu-background-color);
+  box-shadow: 0 0.57143rem 1.42857rem rgba(0, 0, 0, 0.15);
 }
 
 .wedatea2td-nav__dropdown-box
@@ -503,16 +503,16 @@
 .weda-menu__dropdown .weda-menu__dropdown-list-item:hover,
 .weda-menu__dropdown .wedatea2td-list__submenu:hover {
   background: var(--weda-navigation-menu-hover-color);
-  border-radius: 3px;
+  border-radius: 0.21429rem;
 }
 
 .weda-menu__dropdown .weda-menu__dropdown-list-item,
 .weda-menu__dropdown .wedatea2td-list__submenu {
-  padding: 9px 32px 9px 16px;
+  padding: 0.64286rem 2.28571rem 0.64286rem 1.14286rem;
 }
 
 .weda-menu__dropdown-menu-list .weda-menu__dropdown-list-item {
-  margin-bottom: 4px;
+  margin-bottom: 0.28571rem;
   color: rgba(0, 0, 0, 0.9);
   font-weight: 400;
   font-size: 1em;
@@ -525,7 +525,7 @@
 
 .weda-menu__dropdown .weda-menu__dropdown-list-item::after,
 .weda-menu__dropdown .wedatea2td-list__submenu::after {
-  right: 24px;
+  right: 1.71429rem;
 }
 
 /** PC 端顶部导航菜单 end*/
@@ -542,11 +542,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px 0 16px;
+  padding: 0 1.42857rem 0 1.14286rem;
   height: 4.5714em;
   background-color: #fff;
   position: relative;
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0.14286rem 0.14286rem rgba(0, 0, 0, 0.05);
 }
 
 .weda-menu-mobile .weda-menu__bar-main {
@@ -568,7 +568,7 @@
 .weda-menu-mobile .weda-menu__bar-main .weda-menu__main-icon {
   width: 2.2857em;
   height: 2.2857em;
-  margin-right: 12px;
+  margin-right: 0.85714rem;
 }
 
 .weda-menu-mobile .weda-menu__bar-extra {
@@ -621,8 +621,8 @@
   background-color: transparent;
 }
 .weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__item {
-  padding: 14px 16px 16px 16px;
-  border-bottom: 1px solid;
+  padding: 1rem 1.14286rem 1.14286rem 1.14286rem;
+  border-bottom: 0.07143rem solid;
   border-color: rgba(160, 160, 160, 0.2);
 }
 
@@ -639,7 +639,7 @@
   .wedatea2td-menu__submenu
   .wedatea2td-menu__list
   .wedatea2td-menu__item {
-  padding-left: 50px;
+  padding-left: 3.57143rem;
 }
 
 .weda-menu__drawer
@@ -647,13 +647,13 @@
   .weda-menu__submenu
   .wedatea2td-menu__list
   .wedatea2td-menu__item {
-  padding-left: 70px;
+  padding-left: 5rem;
 }
 
 .weda-menu__drawer .weda-menu__drawer-menu .wedatea2td-menu__list-icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 4px;
+  width: 1.42857rem;
+  height: 1.42857rem;
+  margin-right: 0.28571rem;
   margin-top: 0;
 }
 
@@ -692,12 +692,12 @@
   font-weight: normal;
 }
 .weda-menu__drawer .wedatea2td-menu .wedatea2td-icon-arrowdown {
-  top: 15px;
+  top: 1.07143rem;
 }
 /** mobile 端顶部导航菜单 end*/
 
 .wedatea2td-menu__title .weda-menu__main-icon {
-  margin-right: 10px;
+  margin-right: 0.71429rem;
 }
 
 .weda-menu .menu-solt {
@@ -718,7 +718,7 @@
 }
 .weda-menu__fonticon.lcap-icon,
 .weda-menu__fonticon.t-icon {
-  margin: 0 4px 0 0;
+  margin: 0 0.28571rem 0 0;
   font-size: 1em;
 }
 .weda-menu__fonticon.lcap-icon:hover {
@@ -736,7 +736,7 @@
   align-items: center;
 }
 .weda-menu-mobile .weda-menu__wrapper .weda-menu__bar-main {
-  height: 64px;
+  height: 4.57143rem;
 }
 .weda-menu__wrapper {
   z-index: 1000;

package/dist/web/components/navigationBar/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import type { IMenuItem, INavigationStyle } from './type';
+import './index.css';
+export default function NavigationBar({ navigationbar, contentSlot, className, style, callApi, }: PropsType): JSX.Element;
+export interface PropsType extends CommonPropsType {
+    contentSlot?: string;
+    navigationbar: {
+        navigationStyle: INavigationStyle;
+        menuData: IMenuItem[];
+    };
+    callApi: any;
+}

package/dist/web/components/navigationBar/index.js

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import classNames from '../../utils/classnames';
+import { ConfigProvider } from 'tea-component';
+import { usePlatform, isInIde } from '../../utils/platform';
+import { getAppCustomNav } from '../../utils/tcb';
+import './index.css';
+import VerticalMenu from './verticalMenu';
+import HorizontalMenu from './horizontalMenu';
+import H5Menu from './h5Menu';
+import { expandMenu, findMenuItemByPath } from './common';
+import destr from 'destr';
+/**
+ * Web端
+ */
+const CLASS_PREFIX = 'weda-menu';
+// 默认导航数据
+const defaultNavigationBar = {
+    menuData: [],
+    navigationStyle: {
+        isHorizontal: false,
+        showMenuIcon: true,
+        menuFontSize: 16,
+        menuBackgroundColor: '#fff',
+        menuColor: '#000',
+        menuHoverColor: '#f3f3f3',
+        showTitle: true,
+        title: '菜单标题',
+        showLogo: true,
+        logoPath: '',
+        logoUrl: 'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg',
+        titleFontSize: 18,
+        titleColor: '#000',
+        logoWidth: 32,
+        logoHeight: 32,
+    },
+};
+// 默认高亮当前路由对应的菜单
+const defaultSelectedMenu = (menu) => {
+    try {
+        const url = window.location.href;
+        let selectedKey = url.substring(url.lastIndexOf('/'));
+        const targetMenu = findMenuItemByPath(menu, selectedKey);
+        if (targetMenu) {
+            selectedKey = targetMenu.key;
+        }
+        return selectedKey;
+    }
+    catch (error) {
+        return '';
+    }
+};
+/**
+ * 导航菜单
+ */
+const defaultCallApi = { getAppCustomNav };
+export default function NavigationBar({ navigationbar, contentSlot, className, style, callApi = defaultCallApi, }) {
+    const platform = usePlatform();
+    const [menuData, setMenuData] = useState([]);
+    const [mobileMenuData, setMobileMenuData] = useState([]);
+    // 是否启用多端
+    const [isMultiTerminal, setIsMultiTerminal] = useState(false);
+    const [navigationStyle, setNavigationStyle] = useState(defaultNavigationBar.navigationStyle);
+    // 菜单选中
+    const [selected, setSelected] = useState('');
+    // 导航样式
+    const { isHorizontal = false } = navigationStyle;
+    const cls = classNames({
+        [CLASS_PREFIX]: true,
+        [className]: className,
+        [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
+        [`${CLASS_PREFIX}-horizontal`]: isHorizontal,
+    });
+    // 导航容器样式
+    const navigationWrapStyle = {
+        display: 'flex',
+        height: '100vh',
+        flexDirection: isHorizontal || platform === 'h5' ? 'column' : 'row',
+        position: 'relative',
+        ...style,
+    };
+    // 更新导航菜单
+    const updateNavigationData = () => {
+        callApi
+            .getAppCustomNav()
+            .then((res) => {
+            var _a;
+            const { Content } = res;
+            const navigationData = destr(Content);
+            if (navigationData === null || navigationData === void 0 ? void 0 : navigationData.navigationStyle) {
+                // 设置默认选中
+                let selectedKey = '';
+                if ((_a = navigationData === null || navigationData === void 0 ? void 0 : navigationData.menuData) === null || _a === void 0 ? void 0 : _a.length) {
+                    selectedKey = defaultSelectedMenu(navigationData === null || navigationData === void 0 ? void 0 : navigationData.menuData);
+                }
+                setSelected(selectedKey);
+                // 设置默认展开状态
+                let menus = (navigationData === null || navigationData === void 0 ? void 0 : navigationData.menuData) || [];
+                menus = expandMenu(menus, { key: selectedKey }, true);
+                setMenuData(menus);
+                setNavigationStyle({
+                    ...defaultNavigationBar.navigationStyle,
+                    ...navigationData === null || navigationData === void 0 ? void 0 : navigationData.navigationStyle,
+                });
+                // 如果启用多端独立菜单导航，则设置移动端数据
+                if (navigationData === null || navigationData === void 0 ? void 0 : navigationData.isMultiTerminal) {
+                    let mobileMenus = (navigationData === null || navigationData === void 0 ? void 0 : navigationData.mobileMenuData) || [];
+                    mobileMenus = expandMenu(mobileMenus, { key: selectedKey }, true);
+                    setMobileMenuData(mobileMenus);
+                    setIsMultiTerminal(true);
+                }
+            }
+        })
+            .catch((error) => {
+            console.log(error);
+        });
+    };
+    /**
+     * 每次渲染组件通过接口拉取数据
+     */
+    useEffect(() => {
+        updateNavigationData();
+    }, []);
+    useEffect(() => {
+        if (isInIde()) {
+            // setMenuData(navigationbar?.menuData);
+            // setNavigationStyle(navigationbar?.navigationStyle);
+            updateNavigationData();
+        }
+    }, [navigationbar]);
+    // 初始化css变量
+    useEffect(() => {
+        if (navigationStyle.menuHoverColor) {
+            const body = document.getElementsByTagName('body')[0];
+            if (body) {
+                body.style.setProperty('--weda-navigation-menu-hover-color', navigationStyle.menuHoverColor);
+                body.style.setProperty('--weda-navigation-menu-selected-color', navigationStyle.menuHoverColor);
+                body.style.setProperty('--weda-navigation-menu-background-color', navigationStyle.menuBackgroundColor);
+            }
+        }
+    }, [navigationStyle.menuHoverColor, navigationStyle.menuBackgroundColor]);
+    const renderMenu = () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cls, style: navigationWrapStyle, "data-testid": "navigationBar" },
+                React.createElement("div", { className: `${CLASS_PREFIX}__wrapper`, style: {
+                        background: (navigationStyle === null || navigationStyle === void 0 ? void 0 : navigationStyle.menuBackgroundColor) || '#fff',
+                    } },
+                    platform !== 'h5' && !isHorizontal && (React.createElement(VerticalMenu, { menuData: menuData, navigationStyle: navigationStyle, setMenuData: setMenuData, selected: selected, setSelected: setSelected })),
+                    platform !== 'h5' && isHorizontal && (React.createElement(HorizontalMenu, { menuData: menuData, navigationStyle: navigationStyle, selected: selected, setSelected: setSelected })),
+                    platform === 'h5' && (React.createElement(H5Menu, { menuData: isMultiTerminal ? mobileMenuData : menuData, navigationStyle: navigationStyle, setMenuData: setMenuData, className: className, selected: selected, setSelected: setSelected }))),
+                React.createElement("div", { className: "menu-solt" }, contentSlot))));
+    };
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        !isInIde() &&
+            ((menuData === null || menuData === void 0 ? void 0 : menuData.length) > 0 || (mobileMenuData === null || mobileMenuData === void 0 ? void 0 : mobileMenuData.length) > 0) &&
+            renderMenu(),
+        isInIde() && renderMenu()));
+}

package/dist/web/components/navigationBar/verticalMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { IMenuItem, INavigationStyle } from './type';
+/**
+ * pc端纵向导航
+ */
+declare const VerticalMenu: React.FC<{
+    menuData: IMenuItem[];
+    navigationStyle: INavigationStyle;
+    setMenuData: (menus: IMenuItem[]) => void;
+    selected: string;
+    setSelected: (selectedKey: string) => void;
+}>;
+export default VerticalMenu;