Skip to content

Commit

Permalink
[Feature]: 优化手机端Tab样式 #503
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujiajun
tujiajun committed Nov 23, 2023
1 parent e99fdbe commit 4ad7750
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 132 deletions.
54 changes: 12 additions & 42 deletions packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#steedosGlobalFooterRoot .antd-Nav{
#steedosGlobalFooterRoot .steedos-global-footer{
height: 4rem;
position: fixed;
bottom: 0;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}

251 changes: 161 additions & 90 deletions packages/@steedos-widgets/amis-object/src/amis/AmisGlobalFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*
* @Author: [email protected]
* @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:
*/

Expand All @@ -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: \`<span class='fill-slate-500 truncate text-gray-700 block -ml-px no-underline group flex items-center text-[11px] rounded-md flex-col leading-3 nav-label'><svg class="slds-icon slds-icon_container slds-icon-standard-\`+classIcon+\` flex-shrink-0 h-10 w-10"><use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#\${tab.icon || 'account'}"></use></svg><span class="truncate" style="max-width: 20vw">\${tab.name}</span></span>\`,
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: \`<span class=' truncate text-gray-700 block -ml-px no-underline group flex items-center text-[11px] rounded-md flex-col leading-3 nav-label'><svg class="fill-slate-500 flex-shrink-0 !h-10 !w-10" style="padding:7px"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows"></use></svg><span class="truncate" style="max-width: 20vw">${i18next.t('frontend_menu')}</span></span>\`,
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: \`<span class='fill-slate-500 text-gray-700 block -ml-px no-underline group flex items-center text-lg font-medium rounded-md flex-row leading-3 nav-label'><svg class="mr-3 slds-icon slds-icon_container slds-icon-standard-\` + classIcon + \` flex-shrink-0 h-10 w-10"><use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#\` + tab.icon + \`"></use></svg><span>\` + tab.name +\`</span><i class="fa fa-angle-right" aria-hidden="true" style="position: absolute;right: 20px;color: #bababa;"></i></span>\`,
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: \`<span class='fill-slate-500 text-gray-700 block -ml-px no-underline group flex items-center text-lg font-medium rounded-md flex-row leading-3 nav-label'><svg class="mr-3 slds-icon slds-icon_container slds-icon-standard-\` + classIcon + \` flex-shrink-0 h-10 w-10"><use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#\` + tab.icon + \`"></use></svg><span>\` + tab.name +\`</span><i class="fa fa-angle-right" aria-hidden="true" style="position: absolute;right: 20px;color: #bababa;"></i></span>\`,
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 = {
Expand All @@ -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: \`<span class='fill-slate-500 text-gray-700 block -ml-px no-underline group flex items-center text-[12px] font-medium rounded-md flex-col leading-3 nav-label'><svg class="slds-icon slds-icon_container slds-icon-standard-\`+classIcon+\` flex-shrink-0 h-10 w-10"><use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#\${tab.icon || 'account'}"></use></svg><span>\${tab.name}</span><i class="fa fa-angle-right" aria-hidden="true" style="position: absolute;right: 20px;color: #bababa;"></i></span>\`,
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: \`<span class='fill-slate-500 truncate text-gray-700 block -ml-px no-underline group flex items-center text-[11px] rounded-md flex-col leading-3 nav-label'><svg class="slds-icon slds-icon_container slds-icon-standard-\`+classIcon+\` flex-shrink-0 h-10 w-10"><use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#\${tab.icon || 'account'}"></use></svg><span class="truncate" style="max-width: 20vw">\${tab.name}</span></span>\`,
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": \`<span class=' truncate text-gray-700 block -ml-px no-underline group flex items-center text-[11px] rounded-md flex-col leading-3 nav-label'><svg class="!fill-slate-500 flex-shrink-0 !h-10 !w-10" style="padding:7px"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows"></use></svg><span class="truncate" style="max-width: 20vw">${i18next.t('frontend_menu')}</span></span>\`,
"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) {
Expand All @@ -164,5 +234,6 @@ export const AmisGlobalFooter = async (props) => {
}
}
}
console.log("payload===>",schema);
return schema;
}

0 comments on commit 4ad7750

Please sign in to comment.