agilebuilder-ui 1.1.24 → 1.1.25

package/src/styles/theme/tiffany-blue-mobile/sidebar.scss

@@ -7,7 +7,7 @@
     .main-container {
       height: 100%;
       transition: margin-left .28s;
-      margin-left: 224px;
+      margin-left: var(--admin-layout-left-menu-expand, 224px);
       // padding-left: 24px;
       position: relative;
       background: #F8F9FA;
@@ -16,7 +16,7 @@
     // 侧边栏
     .sidebar-container {
       transition: width 0.28s;
-      width: 224px !important;
+      width: var(--admin-layout-left-menu-expand, 224px) !important;
       height: 100%;
       position: fixed;
       top: 0;
@@ -32,6 +32,18 @@
       color: rgba(0, 13, 31, 0.85);
       background: #FFF;
       box-shadow: 0px 2px 8px 0px rgba(164, 178, 201, 0.4);
+      
+      & {
+        display: flex;
+        flex-direction: column;
+
+        & > .el-scrollbar {
+          flex: 1 1 auto;
+          .el-menu {
+            margin-top: 5px;
+          }
+        }
+      }
 
       //reset element-ui css
       .horizontal-collapse-transition {
@@ -45,10 +57,6 @@
       .scrollbar-wrapper {
         overflow-x: hidden !important;
 
-        .el-scrollbar__view {
-          height: calc(100vh - 70px);
-        }
-
         .system-item {
           padding-left: 10px;
           font-size: medium;
@@ -59,15 +67,12 @@
       }
 
       .hamburger-container {
-        position: absolute;
-        bottom: 0px;
         width: 100%;
         line-height: 48px;
         height: 48px;
         background: #FFFFFF;
         box-shadow: 0px 1px 8px 0px #00000019;
         border: 1px solid #EAEAEA;
-        padding: 0 24px;
       }
 
       .is-horizontal {
@@ -80,15 +85,10 @@
         overflow: hidden;
       }
 
-      .svg-icon {
-        margin-right: 16px;
-      }
-
       .el-menu {
         border: none;
         height: 100%;
         width: 100% !important;
-        margin-top: 5px;
         background-color: #FFF;
         color: #000D1F;
         font-weight: 400;
@@ -96,6 +96,7 @@
 
 
       .el-menu-item {
+        position: relative;
         height: 46px;
         color: #525A6C;
         line-height: 46px;
@@ -108,7 +109,15 @@
         letter-spacing: 0px;
         text-align: left;
         box-sizing: border-box;
-        border-left: 4px solid #1A6BF3
+        &::after {
+          content: " ";
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          background-color: #1A6BF3;
+        }
       }
 
       .el-submenu__title {
@@ -120,20 +129,18 @@
 
     .hideSidebar {
       .sidebar-container {
-        width: 54px !important;
+        width: var(--admin-layout-left-menu-collapse, 54px) !important;
+        .smb-sidebar-menu-item {
+          .smb-sidebar-menu-item-icon {
+            & ~ * {
+              display: none !important;
+            }
+          }
+        }
       }
 
       .main-container {
-        margin-left: 54px;
-      }
-
-      .submenu-title-noDropdown {
-        padding-left: 20px !important;
-        position: relative;
-
-        .el-tooltip {
-          padding: 0 20px !important;
-        }
+        margin-left: var(--admin-layout-left-menu-collapse, 54px);
       }
 
       .el-submenu {
@@ -251,13 +258,6 @@
     text-align: left;
   }
 
-  .el-menu--vertical {
-    & > .el-menu {
-      .svg-icon {
-        margin-right: 16px;
-      }
-    }
-  }
   .router-link-active >.is-active{
     color: $--menu-dont-color;
   }

package/src/utils/common-util.js

@@ -127,32 +127,36 @@ export function getLoginUrl() {
     } else {
       systemPath = null
     }
-    getPortalFrontendUrl()
-      .then((portalUrl) => {
-        let loginUrl = portalUrl + '#/login'
-        if (systemPath) {
-          loginUrl = loginUrl + '?systemPath=' + systemPath
-        }
-        if (routerPath) {
-          if (loginUrl.indexOf('?') > 0) {
-            loginUrl = loginUrl + '&routerPath=' + routerPath
-          } else {
-            loginUrl = loginUrl + '?routerPath=' + routerPath
-          }
+    const buildLoginUrl = (portalUrl = '') => {
+      let loginUrl = portalUrl + '#/login'
+      if (systemPath) {
+        loginUrl = loginUrl + '?systemPath=' + systemPath
+      }
+      if (routerPath) {
+        if (loginUrl.indexOf('?') > 0) {
+          loginUrl = loginUrl + '&routerPath=' + routerPath
+        } else {
+          loginUrl = loginUrl + '?routerPath=' + routerPath
         }
-        if (param) {
-          if (loginUrl.indexOf('?') > 0) {
-            loginUrl = loginUrl + '&' + param
-          } else {
-            loginUrl = loginUrl + '?' + param
-          }
+      }
+      if (param) {
+        if (loginUrl.indexOf('?') > 0) {
+          loginUrl = loginUrl + '&' + param
+        } else {
+          loginUrl = loginUrl + '?' + param
         }
-        loginUrl = replacePrefix(loginUrl)
-        resolve(loginUrl)
-      })
-      .catch((error) => {
-        reject(error)
-      })
+      }
+      return replacePrefix(loginUrl)
+    }
+    if (import.meta.env.DEV) {
+      resolve(buildLoginUrl())
+    } else {
+      getPortalFrontendUrl()
+        .then((portalUrl) => resolve(buildLoginUrl(portalUrl)))
+        .catch((error) => {
+          reject(error)
+        })
+    }
   })
 }
 

package/src/utils/iframe-communicator.js

@@ -93,17 +93,17 @@ import store from '../store';
 
     // 处理iframe准备就绪
     handleIframeReady(iframeWindow, origin) {
-      if (this.pendingIframes.has(iframeWindow)) {
-        const { resolve } = this.pendingIframes.get(iframeWindow);
+      if (this.pendingIframes?.has(iframeWindow)) {
+        const { resolve } = this.pendingIframes?.get(iframeWindow);
         this.registerIframe(iframeWindow, origin);
         resolve(iframeWindow);
-        this.pendingIframes.delete(iframeWindow);
+        this.pendingIframes?.delete?.(iframeWindow);
       }
     }
 
     // 注册iframe
     registerIframe(iframeWindow, origin) {
-      this.iframeRegistry.set(iframeWindow, origin);
+      this.iframeRegistry?.set(iframeWindow, origin);
       this.sendStateTo(iframeWindow, origin);
     }
 
@@ -126,7 +126,7 @@ import store from '../store';
     // 广播状态到所有已注册的iframe和父窗口
     broadcastState() {
       // 发送给子iframe
-      this.iframeRegistry.forEach((origin, iframeWindow) => {
+      this.iframeRegistry?.forEach?.((origin, iframeWindow) => {
         this.sendStateTo(iframeWindow, origin);
       });
       
@@ -150,12 +150,12 @@ import store from '../store';
         iframe.onload = () => {
           try {
             // 存储为待处理iframe，等待IFRAME_READY消息
-            this.pendingIframes.set(iframe.contentWindow, { resolve, reject });
+            this.pendingIframes?.set(iframe.contentWindow, { resolve, reject });
             
             // 设置超时拒绝
             setTimeout(() => {
-              if (this.pendingIframes.has(iframe.contentWindow)) {
-                this.pendingIframes.delete(iframe.contentWindow);
+              if (this.pendingIframes?.has(iframe.contentWindow)) {
+                this.pendingIframes?.delete?.(iframe.contentWindow);
                 reject(new Error('Iframe ready timeout'));
               }
             }, 5000);
@@ -189,8 +189,8 @@ import store from '../store';
 
     // 清理连接
     cleanupConnection(targetWindow) {
-      this.iframeRegistry.delete(targetWindow);
-      this.pendingIframes.delete(targetWindow);
+      this.iframeRegistry?.delete?.(targetWindow);
+      this.pendingIframes?.delete?.(targetWindow);
     }
 
     // 销毁实例

package/src/views/dsc-component/Sidebar/Item.vue

@@ -25,57 +25,41 @@ export default defineComponent ({
 	},
 	render(props) {
 		const { title, hasChildren, isRoot } = props
-		let icon = props.icon
+		const icon = props.icon
 		const vnodes = []
+		let iconsData = [h(SvgIcon,{'icon-class': 'meun_post' })]
 		if (icon) {
 			if (icon.indexOf('fa-') === 0) {
-				// 表示以“fa-”开头，使用font-awesome中的图标
-				icon = 'fa ' + icon
-				vnodes.push(h('div', {style: {display: 'flex'}}, [h('i', {class: icon, style: {marginRight: '16px'}})]))
-				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
+				iconsData = [h('i',{class: 'fa ' + icon})]
 			} else if (icon.indexOf('svg-') === 0) {
-				icon = icon.substring(icon.indexOf('svg-') + 4)
-				vnodes.push(h('div', {style: {display: 'flex'}}, [h(SvgIcon, {'icon-class': icon})]))
-				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
+				iconsData = [h(SvgIcon,{'icon-class': icon.substring(icon.indexOf('svg-') + 4)})]
 			} else {
-				icon += ' svg-icon'
-				vnodes.push(h('div', {style: {display: 'flex'}}, [h('i', {class: icon, style: {marginRight: '16px'}})]))
-				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
+				iconsData = [h('i',{class: icon + ' svg-icon'})]
 			}
 		}
+		vnodes.push(h('div', {class: ["smb-sidebar-menu-item-icon"]},iconsData))
 		if (title) {
-			let width = '130px'
-			if (hasChildren) {
-			// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
-			// width = '100px'
-			// boe 反应左侧菜单栏无法展示全部文字，调整
-			width = '130px'
-			}
 			if (isRoot) {
 				// 是否是根目录，没有子菜单时
-				vnodes.push(h('div', {style:{display:'inline-block'}},
+				vnodes.push(h('div', {class: ["smb-sidebar-menu-item-title"] },
 						[h('div',{
-							title:title,
-							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+							title:title
 						}, title)])
 				)
-				// vnodes.push(<div style='display: inline-block'>
-				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-				// </div>)
 			} else {
 				// 有子菜单时
-				vnodes.push(h('div', {style:{display:'inline-block'}},
+				vnodes.push(h('div', {class: ["smb-sidebar-menu-item-title"] },
 						[h('div',{
-							title:title,
-							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+							title:title
 						}, title)])
 				)
-				// vnodes.push(<div slot='title' style='display: inline-block'>
-				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-				// </div>)
 			}
 		}
 		return vnodes
 	}
 })
 </script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/views/dsc-component/Sidebar/SidebarItem.vue

@@ -4,6 +4,7 @@
       <app-link :to="toPath(item)" @click="clickMenu(toPath(item))">
         <el-menu-item
           :index="resolvePath(item.code, item.path, item.pageType, item.newPage)"
+          class="smb-sidebar-menu-item"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
           <item :icon="item.iconName" :title="getI18nName(item)" :is-root="true" />
@@ -17,6 +18,7 @@
       :show-timeout="0"
       :hide-timeout="50"
       popper-class="sidebar-container-popper"
+      class="smb-sidebar-menu-item"
     >
       <template v-slot:title>
         <item
@@ -34,7 +36,7 @@
           class="nest-menu"
         />
         <app-link v-else :to="toPath(child)" @click="clickMenu(toPath(child))">
-          <el-menu-item :index="resolvePath(child.code, child.path, child.pageType, child.newPage)">
+          <el-menu-item :index="resolvePath(child.code, child.path, child.pageType, child.newPage)" class="smb-sidebar-menu-item">
             <item :icon="child.iconName" :title="getI18nName(child)" />
           </el-menu-item>
         </app-link>
@@ -186,3 +188,41 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.smb-sidebar-menu-item {
+  position: relative;
+  &.el-menu-item, &.el-sub-menu {
+    padding: 0 !important;
+    &:not(:has(> .el-tooltip__trigger)) {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+  & > :deep(.el-tooltip__trigger) {
+    display: flex;
+    flex-direction: row;
+    padding: 0 !important;
+  }
+  :deep(.smb-sidebar-menu-item-icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--admin-layout-left-menu-collapse, 54px);
+  }
+  :deep(.smb-sidebar-menu-item-title) {
+    flex: 0 0 calc(100% - var(--admin-layout-left-menu-collapse, 54px) - 35px);
+    overflow: hidden;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    & > div {
+      overflow: hidden;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>
+

package/src/views/layout/components/AppMain.vue

@@ -32,14 +32,15 @@ export default {
 
 <style lang="scss" scoped>
 .app-main ::v-deep{
-  padding: var(--app-main-padding, 20px);
-  height: calc(100vh - (var(--app-main-padding, 20px) * 2));
+  padding: var(--app-main-padding, 15px);
+  height: calc(100vh - (var(--app-main-padding, 15px) * 2));
   position: relative;
   overflow: hidden;
-
-  & > .app-container:not(:has( > .three-column-layout, > .el-container)) {
-    max-height: calc(100vh - (var(--app-main-padding, 20px) * 2));
-    height: calc(100vh - (var(--app-main-padding, 20px) * 2));
+  // :not(:has( > .three-column-layout, > .el-container))
+  & > .app-container {
+    max-height: calc(100vh - (var(--app-main-padding, 15px) * 2));
+    height: calc(100vh - (var(--app-main-padding, 15px) * 2));
+    overflow: auto;
   }
 }
 </style>

package/src/views/layout/components/Menubar/Item.vue

@@ -33,67 +33,41 @@ export default defineComponent ({
 	},
 	render(props) {
 		const { title, hasChildren, isRoot,code, backlogTotal } = props
-			let icon = props.icon
+		const icon = props.icon
 		const vnodes = []
+		let iconsData = [h(SvgIcon,{'icon-class': 'meun_post' })]
 		if (icon) {
 			if (icon.indexOf('fa-') === 0) {
-				// 表示以“fa-”开头，使用font-awesome中的图标
-				icon = 'fa ' + icon
-				vnodes.push(h('div', {style:{display:'inline-block'}},[h('i',{class:icon})]))
-				// vnodes.push(<div style='display: inline-block;'><i class={icon}/></div>)
+				iconsData = [h('i',{class: 'fa ' + icon})]
 			} else if (icon.indexOf('svg-') === 0) {
-				icon = icon.substring(icon.indexOf('svg-') + 4)
-				vnodes.push(h('div', {style:{display:'inline-block'}},[h(SvgIcon,{'icon-class':icon})]))
-				// vnodes.push(<div style='display: inline-block;'><svg-icon icon-class={icon}/></div>)
+				iconsData = [h(SvgIcon,{'icon-class': icon.substring(icon.indexOf('svg-') + 4)})]
 			} else {
-				icon += ' svg-icon'
-				vnodes.push(h('div', {style:{display:'inline-block'}},[h('i',{class:icon})]))
-				// vnodes.push(<div style='display: inline-block;'><i class={icon} /></div>)
+				iconsData = [h('i',{class: icon + ' svg-icon'})]
 			}
 		}
-
+		vnodes.push(h('div', {class: ["smb-sidebar-menu-item-icon"]},iconsData))
 		if (title) {
-			let width = '130px'
-			if (hasChildren) {
-				// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
-				width = '100px'
-			}
 			if (isRoot) {
 				// 是否是根目录，没有子菜单时
-				vnodes.push(h('div', {style:{display:'inline-block',}},
+				vnodes.push(h('div', {class: ["smb-sidebar-menu-item-title"]},
 						[h('div',{
-							title:title,
-							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+							title:title
 						}, title)])
 				)
-				// vnodes.push(<div style='display: inline-block'>
-				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-				// </div>)
 			}else if (code === 'undoneTask') {
 					// 有子菜单时
-					vnodes.push(h('div', {style:{display:'inline-block'}},
+					vnodes.push(h('div', {class: ["smb-sidebar-menu-item-title"]},
 							[h('div',{
-									title:title,
-									style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+									title:title
 							}, [h(ElBadge,{value:backlogTotal,style:{display:'inline'}},title)])])
 					)
-					// vnodes.push(<div slot='title' style='display: inline-block'>
-					// 		<div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>
-					// 				{(title)}
-					// 				<el-badge value={backlogTotal}></el-badge>
-					// 		</div>
-					// </div>)
 			} else {
 				// 有子菜单时
-				vnodes.push(h('div', {style:{display:'inline-block'}},
+				vnodes.push(h('div', {class: ["smb-sidebar-menu-item-title"]},
 						[h('div',{
-							title:title,
-							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+							title:title
 						}, title)])
 				)
-				// vnodes.push(<div slot='title' style='display: inline-block'>
-				//   <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-				// </div>)
 			}
 		}
 		return vnodes

package/src/views/layout/components/Menubar/SidebarItem.vue

@@ -4,6 +4,7 @@
       <app-link :to="toPath(item)" @click="clickMenu(toPath(item))">
         <el-menu-item
           :index="item.code + '~~' + item.i18nValue"
+          class="smb-sidebar-menu-item"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
           <item
@@ -15,7 +16,7 @@
       </app-link>
     </template>
 
-    <el-sub-menu v-else :index="item.code + '~~' + item.i18nValue">
+    <el-sub-menu v-else :index="item.code + '~~' + item.i18nValue" class="smb-sidebar-menu-item">
       <template v-slot:title>
         <item
           :icon="item.iconName"
@@ -30,10 +31,10 @@
           v-if="child.children && child.children.length > 0"
           :is-nest="true"
           :item="child"
-          class="nest-menu"
+          class="nest-menu smb-sidebar-menu-item"
         />
         <app-link :key="child.code" v-else :to="toPath(child)" @click="clickMenu(toPath(child))">
-          <el-menu-item :index="child.code + '~~' + child.i18nValue">
+          <el-menu-item :index="child.code + '~~' + child.i18nValue" class="smb-sidebar-menu-item">
             <item :backlog-total="backlogTotal" :code="child.code" :icon="child.iconName" :title="getI18nName(child)" />
           </el-menu-item>
         </app-link>
@@ -249,3 +250,40 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.smb-sidebar-menu-item {
+  position: relative;
+  &.el-menu-item, &.el-sub-menu {
+    padding: 0 !important;
+    &:not(:has(> .el-tooltip__trigger)) {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+  & > :deep(.el-tooltip__trigger) {
+    display: flex;
+    flex-direction: row;
+    padding: 0 !important;
+  }
+  :deep(.smb-sidebar-menu-item-icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--admin-layout-left-menu-collapse, 54px);
+  }
+  :deep(.smb-sidebar-menu-item-title) {
+    flex: 0 0 calc(100% - var(--admin-layout-left-menu-collapse, 54px) - 35px);
+    overflow: hidden;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    & > div {
+      overflow: hidden;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

package/src/views/layout/components/Menubar/index.vue

@@ -11,7 +11,7 @@
 				<el-menu-item
 						v-if="systemName"
 						:title="systemName"
-						class="system-item"
+						class="system-item smb-sidebar-menu-item"
 						disabled
 						index="1"
 						style="padding-left: 10px"
@@ -253,8 +253,3 @@ export default {
 	},
 }
 </script>
-<style>
-.aa{
-		background-color: red;
-}
-</style>

package/src/views/layout/components/Sidebar/Item.vue

@@ -9,43 +9,20 @@ export default function render(_props, _context) {
 	}
 	const { icon, title, hasChildren } = context.props
 	const vnodes = []
+	let iconsData = <svg-icon icon-class={ icon || 'meun_post'} />
 
-	if (icon) {
-		vnodes.push(
-				<div style="display: inline-block;">
-					<svg-icon icon-class={icon} />
-				</div>
-		)
-	}
+	vnodes.push(<div class="smb-sidebar-menu-item-icon">{ iconsData }</div>)
 
 	if (title) {
-		let width = '130px'
-		if (hasChildren) {
-			// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
-			width = '100px'
-		}
-		const className = window.$vueApp.config.globalProperties.className
-		if (className && className === 'blue2') {
-			// blue2样式的左侧菜单宽度为240px
-			width = '230px'
-			if (hasChildren) {
-				// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
-				width = '200px'
-			}
-		}
 		vnodes.push(
-				<div slot="title" style="display: inline-block">
+				<template slot="title">
 					<div
 							title={title}
-							style={
-								'display: inline-block;width:' +
-								width +
-								';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'
-							}
+							class="smb-sidebar-menu-item-title"
 					>
 						{title}
 					</div>
-				</div>
+				</template>
 		)
 	}
 	return vnodes