From 4ad77504cb22d1c025614641fa0938ad4fb320ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B6=82=E4=BD=B3=E4=BF=8A?= Date: Thu, 23 Nov 2023 14:33:48 +0800 Subject: [PATCH] =?UTF-8?q?[Feature]:=20=E4=BC=98=E5=8C=96=E6=89=8B?= =?UTF-8?q?=E6=9C=BA=E7=AB=AFTab=E6=A0=B7=E5=BC=8F=20#503?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/amis/AmisGlobalFooter.less | 54 +--- .../amis-object/src/amis/AmisGlobalFooter.tsx | 251 +++++++++++------- 2 files changed, 173 insertions(+), 132 deletions(-) diff --git a/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.less b/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.less index d0428208c..22d925130 100644 --- a/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.less +++ b/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.less @@ -1,4 +1,4 @@ -#steedosGlobalFooterRoot .antd-Nav{ +#steedosGlobalFooterRoot .steedos-global-footer{ height: 4rem; position: fixed; bottom: 0; @@ -46,53 +46,13 @@ background: transparent; } -.steedos-global-footer-popup .antd-Nav-Menu-item-wrap{ - align-items: center; -} - -.steedos-global-footer-popup .antd-Nav-Menu-item-link{ - max-width: unset; -} - .steedos-global-footer .antd-Nav-Menu-submenu-title{ height: 100% !important; display: flex; align-items: center; } -.steedos-global-footer-popup .nav-label{ - flex-direction: unset !important; -} - -.steedos-global-footer-popup{ - width: 100%; - top: 54px !important; - bottom: 64px !important; - left: 0 !important; - position: fixed !important; -} - -.steedos-global-footer-popup .antd-Nav-Menu{ - height: 100%; - overflow: auto; - box-shadow: none; -} - -.steedos-global-footer-popup .antd-Nav-Menu-item{ - padding-bottom: 10px; - padding-top: 10px; - border-bottom: 0.5px solid #e5e7eb; -} - -.steedos-global-footer-popup .antd-Nav-Menu-item svg{ - margin-right: 12px; -} - -.steedos-global-footer-popup .nav-label{ - font-size: 17px; -} - -.steedos-global-footer-popup .antd-Nav-Menu-item-label-subTitle{ +ç .antd-Nav-Menu-item-label-subTitle{ max-width: 100% !important; } @@ -114,3 +74,13 @@ order:unset !important } +.steedos-global-footer-menu-page{ + position: fixed; + bottom: 64px; + top: 53px; + overflow: auto; + height: unset; + z-index: 1000; + background-color: white; +} + diff --git a/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.tsx b/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.tsx index 7b2187f6c..13067b42c 100644 --- a/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.tsx +++ b/packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.tsx @@ -1,8 +1,8 @@ /* * @Author: baozhoutao@steedos.com * @Date: 2022-09-01 14:44:57 - * @LastEditors: baozhoutao@steedos.com - * @LastEditTime: 2023-04-27 13:26:12 + * @LastEditors: 涂佳俊 tujiajun@steedos.com + * @LastEditTime: 2023-11-23 14:33:45 * @Description: */ @@ -16,7 +16,103 @@ export const AmisGlobalFooter = async (props) => { } const isMobile = window.innerWidth <= 768; const className = 'steedos-global-footer'; - + const footerNavEach = ` + const classIcon = tab.icon.replace(/_/g,"-"); + if(locationPathname == tab.path){ + customTabId = tab.id; + }else if(locationPathname.startsWith(tab.path + "/")){ + objectTabId = tab.id; + } + data.nav.push({ + "label": { + type: 'tpl', + tpl: \`\${tab.name}\`, + className:'h-full flex items-center' + }, + "to": tab.path, + "target":tab.target, + "id": tab.id, + "activeOn": "\\\\\${tabId == '"+ tab.id +"' && !isMenuNavVisible}" + }); + `; + const footerNavScript = ` + if(payload.children.length <= 4){ + //若tab长度在四个以内，只显示在底部 + _.each(payload.children, (tab,index)=>{ + ${footerNavEach} + }) + }else{ + //若tab长度超过四个，留下前三个tab在底部，然后再增加一个菜单tab + _.each(_.slice(payload.children, 0, 3), (tab,index)=>{ + ${footerNavEach} + }) + data.nav.push({ + "label": { + type: 'tpl', + tpl: \`${i18next.t('frontend_menu')}\`, + className:'h-full flex items-center' + }, + "id": "__menu__", + "activeOn": "\\\\\${isMenuNavVisible}", + "isMenu": true, + "menuReRengder": "\${isMenuNavVisible}"//为了menu能正常显示高亮，触发重新渲染 + }); + } + `; + const menuNavScript = ` + _.each(_.groupBy(payload.children, 'group'), (tabs, groupName) => { + if (groupName === 'undefined' || groupName === '') { + _.each(tabs, function(tab){ + const classIcon = tab.icon.replace(/_/g, "-"); + data.links.push({ + "label": { + type: 'tpl', + tpl: \`\` + tab.name +\`\`, + className: 'h-full flex items-center' + }, + "to": tab.path, + "target": tab.target, + "id": tab.id, + "activeOn": "false", + "className": "border-b border-gray-200 py-2.5" + }); + }) + } else { + var tabGroup = _.find(tab_groups, { "group_name": groupName }); + data.links.push({ + "label": groupName, + "unfolded": tabGroup && tabGroup.default_open != false, + "isGroup": true, + "mode": "group", + "children": _.sortBy(_.map(tabs, (tab) => { + const classIcon = tab.icon.replace(/_/g, "-"); + return { + "label": { + type: 'tpl', + tpl: \`\` + tab.name +\`\`, + className: 'h-full flex items-center' + }, + "to": tab.path, + "target": tab.target, + "id": tab.id, + "activeOn": "false", + "className": "border-b border-gray-200 py-2.5" + } + }), function (tab){ return tab.index }) + }) + } + }); + data.links = _.sortBy(data.links, function (tab) { + if (tab.isGroup) { + return _.findIndex(payload.tab_groups, function (group) { + return group.group_name === tab.label; + }); + } else { + // 没有分组的选项卡按index排列在有分组的选项卡前方 + return (tab.index || 0) - 1000; + } + }) + `; let schema = {} if (links) { schema = { @@ -43,114 +139,88 @@ export const AmisGlobalFooter = async (props) => { "url": `\${context.rootUrl}/service/api/apps/${appId}/menus?mobile=true`, "adaptor": ` try { - if(payload.children.length == 0){ + if(payload.children && payload.children.length == 0){ payload.data = {}; return payload } - const data = { nav: [] }; + const data = { nav: [],links: [] }; const stacked = ${stacked}; const showIcon = ${showIcon}; const selectedId = '${selectedId}'; const locationPathname = window.location.pathname; var customTabId = ""; var objectTabId = ""; - let sum = 0; + const tab_groups = payload.tab_groups; payload.children = _.sortBy(payload.children, function(tab){ return tab.index; }) - _.each(payload.children, (tab)=>{ - sum++; - const classIcon = tab.icon.replace(/_/g,"-"); - if(locationPathname == tab.path){ - customTabId = tab.id; - }else if(locationPathname.startsWith(tab.path + "/")){ - objectTabId = tab.id; - } - if(sum >= 5){ - data.nav.push({ - "label": { - type: 'tpl', - tpl: \`\${tab.name}\`, - className:'h-full flex items-center' - }, - "to": tab.path, - "target":tab.target, - "id": tab.id, - "activeOn": "\\\\\${tabId == '"+ tab.id +"'}", - "index": tab.index - }); - }else{ - data.nav.push({ - "label": { - type: 'tpl', - tpl: \`\${tab.name}\`, - className:'h-full flex items-center' - }, - "to": tab.path, - "target":tab.target, - "id": tab.id, - "activeOn": "\\\\\${tabId == '"+ tab.id +"'}", - "index": tab.index - }); - } - }) + ${footerNavScript} + ${menuNavScript} payload.data = { "type": "service", "data":{ "tabId": customTabId || objectTabId, - "items": data.nav + "items": data.nav, + "isMenuNavVisible": false }, - "id": "footerService", - "body": { - "type": "nav", - className: "${className}", - "stacked": ${stacked}, - "overflow": { - "enable": true, - "maxVisibleCount": 4, - "overflowPopoverClassName": "steedos-global-footer-popup", - "overflowLabel":{ - "type": 'tpl', - "tpl": \`${i18next.t('frontend_menu')}\`, - "className":'h-full flex items-center' - }, - "overflowIndicator":"" + "id": "steedosMobileFooterService", + "body": [ + { + "type": "nav", + className: "${className}", + "stacked": ${stacked}, + "indentSize": ${indentSize}, + "source": "\${items}", + "onEvent": { + "click": { + "actions": [ + { + "actionType": "setValue", + "componentId": "steedosMobileFooterService", + "args": { + "value": { + "isMenuNavVisible": "\${event.data.item.isMenu}", + "tabId": "\${event.data.item.id}", + "items": data.nav + } + }, + "expression":"\${event.data.item.id}" + } + ] + } + } }, - "indentSize": ${indentSize}, - "source": "\${items}", - "onEvent": { - "click": { - "actions": [ - { - "actionType": "setValue", - "componentId": "footerService", - "args": { - "value": { - "tabId": "\${event.data.item.id}", - "items": data.nav - } - }, - "expression":"\${event.data.item.id}" - } - ] - }, - "@tabId.changed":{ - "actions":[ - { - "actionType": "setValue", - "componentId": "footerService", - "args": { - "value": { - "tabId": "\${event.data.tabId}", - "items": data.nav - } - }, - "expression":"\${event.data.tabId}" + { + "type": "page", + "bodyClassName": "p-0", + "className": "steedos-global-footer-menu-page", + "visibleOn": "\${isMenuNavVisible}", + "body": { + "type": "nav", + "id": "u:58c2a9249e9d", + "stacked": true, + "links": data.links, + "onEvent": { + "click": { + "actions": [ + { + "actionType": "setValue", + "componentId": "steedosMobileFooterService", + "args": { + "value": { + "isMenuNavVisible": false, + "tabId": "\${event.data.item.id}", + "items": data.nav + } + }, + "expression":"\${event.data.item.id}" + } + ] } - ] + } } } - } + ] }; } catch (error) { @@ -164,5 +234,6 @@ export const AmisGlobalFooter = async (props) => { } } } + console.log("payload===>",schema); return schema; } \ No newline at end of file