component_ryl_v3 1.1.20 → 1.1.40

package/README.md

@@ -28,8 +28,6 @@ Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://
     {Function} getMenu() - 处理传入的导航菜单
     {Function} setMenuActive(path) - 设置菜单选中状态，参数 path 为菜单路径
     {Function} setNormal(value) - 判断是否在 content inner_content 类名上添加 normal 类名
-    {Function} loadImg(content) - 等待图片加载完成后获取主容器高度，参数 content 为 HTML 内容
-    {Function} getMainHeight(flag) - 获取内容模块的滚动条状态，参数 flag 为是否跳过滚动条置顶
 
 
 # 询问窗口组件
@@ -162,3 +160,6 @@ Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://
     <el-input v-model="inputMoney" v-money="{max:100,min:0}" placeholder="请输入"></el-input>
     # 数字格式指令
     <el-input v-model="inputNumber" v-number="{max:100,min:0}" placeholder="请输入"></el-input>
+
+# 更新版本的信息
+    # 1.1.40 handHeader 组件布局更改，去掉了 getMainHeight 和 loadImg 方法，不需要了

package/dist/component_ryl_v3.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@charset "UTF-8";*:not(svg),#app,html,body{margin:0;padding:0;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;font-size:12px}a{text-decoration:none;color:#5a5a5a}li{list-style:none}.flex{display:-webkit-flex;display:flex;display:-moz-box;display:-ms-flexbox}.flex_row{flex-direction:row}.flex_col{flex-direction:column}.initTextarea>.el-textarea__inner{resize:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent;border-radius:4px}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#c2c2c2}::-webkit-scrollbar-corner{background:transparent}.common_show_scroll::-webkit-scrollbar-thumb{background:#c2c2c2}.tinymce-editor-JustOne *:not(h1,h2,h3,h4,h5,h6){font-size:inherit}.tinymce-editor-JustOne h1{font-size:32px}.tinymce-editor-JustOne h2{font-size:28px}.tinymce-editor-JustOne h3{font-size:24px}.tinymce-editor-JustOne h4{font-size:20px}.tinymce-editor-JustOne h5{font-size:16px}.tinymce-editor-JustOne h6{font-size:12px}.jddsDialog.el-dialog{border-radius:4px}.jddsDialog .el-dialog__title,.jddsDialog .zbt{font-size:16px;color:#272727;line-height:normal}.jddsDialog .el-dialog__body .el-form-item:last-child{margin-bottom:0}.jddsDialog .el-dialog__headerbtn{top:5px;right:0}.jddsDialog .btn{min-width:68px;height:32px;line-height:32px;border-radius:4px;padding:0}.jddsDialog .exit{font-size:14px}.jddsDialog .header-title{display:flex;align-items:center}.jddsDialog.el-dialog--center .header-title{justify-content:center}.JD_table.el-table:before{height:0!important}.JD_table.el-table{width:100%}.JD_table.el-table th,.JD_table.el-table th.el-table__cell{background-color:#eff2f580;padding:0;height:40px;line-height:40px;border-bottom:none!important}.JD_table.el-table th .cell,.JD_table.el-table th.el-table__cell .cell{font-weight:400;color:#999;text-align:left;white-space:nowrap}.JD_table.el-table td,.JD_table.el-table td.el-table__cell{padding:0;height:48px;line-height:48px}.JD_table.el-table td .cell,.JD_table.el-table td.el-table__cell .cell{line-height:normal}.el-table--group,.el-table--border{border:none!important}.el-table--group:after,.el-table--border:after{width:0!important}.el-table--border .el-table__cell,.el-table--border td{border-right:none!important}.el-table--border th.el-table__cell{border-right:1px solid #ebeef5!important}.el-table .cell{text-align:center!important}.el-table__header,.el-table__empty-block,.el-table__body{width:100%!important}.el-sub-menu__title{text-align:left!important}.el-sub-menu .el-menu-item{min-width:auto!important;padding-left:46px!important;position:relative}.el-sub-menu .el-menu-item:after{content:"";width:4px;height:4px;background:#7c878e;border-radius:50%;position:absolute;top:17px;left:26px}.el-sub-menu .el-menu .el-sub-menu .el-sub-menu__title{padding-left:46px!important}.el-sub-menu .el-menu .el-menu .el-menu-item{padding-left:60px!important}.el-sub-menu .el-menu .el-menu .el-menu-item:after{left:46px!important}.el-menu{border-right:none!important}.el-menu-item,.el-sub-menu__title{height:38px!important;line-height:38px!important;margin-top:2px}.el-menu-item *,.el-sub-menu__title *{vertical-align:middle}.el-submenu__title i.el-sub-menu__icon-arrow{color:#c0c5c7;font-weight:700}.el-message-box{width:400px!important}.initMsg_in{padding:20px 0!important}.initMsg_in .el-message-box__header{padding:0!important}.initMsg_in .el-message-box__header .el-message-box__headerbtn{display:none}.initMsg_in .el-message-box__header .el-message-box__status{font-size:50px!important}.initMsg_in .el-message-box__content{padding:20px 30px!important}.initMsg_in .el-message-box__content .el-message-box__message{letter-spacing:1px}.initMsg_in .el-message-box__btns{padding:0!important}.initMsg_in .el-message-box__btns button{min-width:100px;height:40px;border-radius:4px}.initMsg_in .el-message-box__btns button:nth-child(2){margin-left:20px!important}.defaultMsg_in .el-message-box__container{align-items:flex-start}.defaultMsg_in .el-message-box__title span{font-size:14px;font-weight:700}.defaultMsg_in .el-message-box__headerbtn{top:7px}.defaultMsg_in .el-message-box__status{top:0;transform:none;font-size:24px!important}.defaultMsg_in .el-message-box__btns button{min-width:68px;height:32px;border-radius:4px;border:none}.ieBro{position:fixed;padding:10px;z-index:9999;top:0;left:0;right:0;background:#fffade;border:1px solid #f9d878;justify-content:space-between}.ieBro span,.ieBro a{font-size:12px}.ieBro .color{text-decoration:underline}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks):before{content:""!important}.mainMenu[data-v-e79ba81c]{display:inline-block;position:relative}.mainMenu .elbadge[data-v-e79ba81c]{color:red;font-style:normal}.mainMenu .elbadge.hot[data-v-e79ba81c]:after{display:inline-block;content:"";width:8px;height:8px;background-color:red;border-radius:100%;transform:scale(.9);position:absolute;top:10px;right:-10px}.mainMenu .elbadge.new[data-v-e79ba81c]:after{display:inline-block;content:"new";background-color:red;color:#fff;padding:0 4px 1px;line-height:16px;border-radius:4px;transform:scale(.9);position:absolute;top:6px;right:-32px}.mainMenu .elbadge.run[data-v-e79ba81c]{display:inline-block;color:#fff;background-color:red;min-width:20px;padding:0 2px;text-align:center;height:16px;line-height:16px;border-radius:4px;animation:changeRun 1.5s ease-in-out 0s infinite}.mainMenu .elbadge.num[data-v-e79ba81c]{display:inline-block;background-color:red;color:#fff;width:20px;text-align:center;height:16px;line-height:16px;border-radius:4px;transform:scale(.9);position:absolute;top:6px;right:-22px}.mainMenu .elbadge.num.nine[data-v-e79ba81c]{width:26px;right:-28px}.mainMenu .elbadge.num.nine em[data-v-e79ba81c]{position:relative;top:-4px}.el-menu-item span[data-v-e79ba81c],.el-sub-menu__title span[data-v-e79ba81c]{font-size:14px}.handHeaderContent{position:relative;z-index:999;height:100vh}.handHeaderContent .el-container.is-vertical{position:relative}.handHeaderContent .inner_header{padding:0;background:#fff;justify-content:space-between;align-items:center;height:50px!important}.handHeaderContent .inner_header .colSpan{width:60px;background-color:transparent;justify-content:center;align-items:center}.handHeaderContent .inner_header .colSpan .hide{width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA2hJREFUeF7t3Vtu5DAMRFFlZ9nZzKwsS0ugTBswGnnYLkqkVddAkC+1Q9YBrXb68dJae28cth14AYBt9p+FA8A7fwCY5w8AALAJtDbAHsA6fjaB5vEDAADcB/A2wB7AO3+eBprnDwAAcB/A2gB7AOv4eRpoHv9/AK/2XTBuQAfAYdwBABiHv70gxLwF3uUzAbzz/9wEchh3AADG4bMHMA8fAABgD+BugD2AuQAAAMC8A+blMwEAYN4B8/IrTIC/rbX+w5HQgWwAW/AASAg/+0ZQD/1Pa+0fEyAp/cfnA2ScfQu/nxsAGQk8zplxCdiHD4DE8DMuAc/hKwB4LWMAnpkT4KvwVQBvAT2wfohZAL4LHwDJ/GYA+Cl8ACwO4LfwAbAwgCPhA2BRAEfDB8CCAM6ED4DFAJwNHwALAbgSPgAWAXA1fAAsAEAJHwA3B6CGD4AbA4gIHwA3BRAVPgBuCCAyfADcDEB0+AC4EYAR4SsAklu3xumP/jt4VPgASHZ0BMDI8AFQHMDo8AFQGMCM8AFQFMCs8AFQEMDM8AFQDMDs8AFQCEBG+AAoAiArfAAUAJAZPgAAwLuDMw1sdwIzpwBvD08UsL8VnIUAAEUA9D8jAwEACgHIQACAYgBmIwBAQQAzEQCgKIBZCABQGMAMBAAoDmA0AgDcAMBIBFcB9E8J40OiRDxHXhO4P8WI+wQAEENUlp8FMGISAEBJUFx7BUA0AgCIISrLrwKIRAAAJUFxrQIgCgEAxBCV5SqACAQAUBIU10YAUBEAQAxRWR4FQEEAACVBcW0kgKsIACCGqCyPBnAFAQCUBMW1IwCcRQAAMURl+SgAZxAAQElQXDsSwFEEABBDVJaPBnAEAQCUBMW1MwD8hgAAYojK8lkAfkKgAFBqZ23CF0dGfm0cAQZ0YOYE2P7cZwRXJ0BA+TxEBoDnywEAEh1mAdgjAIApgA3B/ndiKzxPnTkB9nuCvi/gSOhABQAJZXPKrQMAMLcAAACYd8C8fCYAAMw7YF4+EwAA5h0wL58JAADzDpiXzwQAgHkHzMtnAgDAvAPm5fcJ0D9sicO0Ax3Au2ntlP14VTAAjCkwAYzD76UDAADsAZwNMAGc0+cSYJ4+AADAJcDcAAAAwLMAZwNMAOf02QSapw8AAHAJMDcAAHMAH9uzwUGCPXdSAAAAAElFTkSuQmCC) no-repeat;background-size:contain;cursor:pointer;transition:all .2s}.handHeaderContent .inner_header .colSpan .hide.rotate{transform:rotate(180deg)}.handHeaderContent .inner_header .saasInfo .img{align-items:center;justify-content:center;height:50px;margin-right:20px;cursor:pointer}.handHeaderContent .inner_header .saasInfo .img:hover .dropDown{display:block}.handHeaderContent .inner_header .saasInfo .img img{width:33px;height:33px;border-radius:50%;margin-right:5px;border:1px solid #eff2f5}.handHeaderContent .dropDown{position:absolute;right:10px;top:50px;width:170px;background:#fff;box-shadow:0 0 4px #1919191a;border-radius:2px;display:none;z-index:999}.handHeaderContent .dropDown .san{display:inline-block;width:10px;height:10px;border:1px solid #fff;border-top-style:none;border-right-style:none;transform:rotate(135deg);position:absolute;top:-4px;right:38px;background:#fff}.handHeaderContent .dropDown .user{padding:11px;align-items:center;border-bottom:1px solid #f5f5f5}.handHeaderContent .dropDown .user span{line-height:normal;font-size:14px}.handHeaderContent .dropDown .exit{font-size:14px;line-height:39px;height:39px;border-top:1px solid #EFF2F5;text-align:center;padding:0;color:#5a5a5a}.handHeaderContent .aside{height:100%;transition:all .2s;overflow:overlay;z-index:999;position:relative}.handHeaderContent .aside .init-el-menu{padding-bottom:38px}.handHeaderContent .aside.hideMenu .el-tooltip{text-align:center}.handHeaderContent .aside.hideMenu .el-submenu__title{text-align:center!important}.handHeaderContent .aside.hideMenu i.iconfont{margin-right:0}.handHeaderContent .aside.hideMenu .deldom,.handHeaderContent .aside.hideMenu .el-submenu__icon-arrow{display:none}.handHeaderContent .aside i.iconfont{font-size:18px;display:inline-block;width:18px;margin-right:8px;color:#747c81}.handHeaderContent .main{padding:0;background-color:#eff2f5}.handHeaderContent .main.scroll{overflow-y:scroll}.handHeaderContent .main.scroll .inner_content,.handHeaderContent .main.scroll .inner_content.normal{height:auto}.handHeaderContent .main.scrollX{overflow-x:scroll}.handHeaderContent .main .content_mar{padding:18px}.handHeaderContent .main .inner_content{background-color:#fff;height:calc(100vh - 86px);border-radius:4px}.handHeaderContent .main .inner_content.normal{background-color:transparent}.handHeaderContent .inner_footer{color:#666;text-align:center;padding-top:18px;justify-content:center}@keyframes changeRun{0%{transform:translateY(0) scale(.9)}25%{transform:translateY(-6px) scale(.9)}50%{transform:translateY(0) scale(.9)}75%{transform:translateY(-2px) scale(.9)}to{transform:translateY(0) scale(.9)}}.initNoData[data-v-0b0e3718]{width:100%;align-items:center;justify-content:center}.initNoData .inner[data-v-0b0e3718]{text-align:center}.initNoData .inner p[data-v-0b0e3718]{color:#666;margin-top:12px;line-height:normal}.initPaging[data-v-1d8ef8c9] .el-select__placeholder{text-align:center}.previewFix[data-v-14d38dc6]{width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;background-color:#00000080;display:flex;justify-content:center;align-items:center}.previewFix img[data-v-14d38dc6]{max-width:98%;max-height:98%}.status_search[data-v-e6bbcf18]{display:inline-block}.status_search span[data-v-e6bbcf18]{min-width:40px;height:30px;padding:0 10px;display:inline-block;text-align:center;line-height:30px;border:1px solid #d9d9d9;border-right:1px solid transparent;cursor:pointer}.status_search span[data-v-e6bbcf18]:first-child{border-radius:2px 0 0 2px}.status_search span[data-v-e6bbcf18]:last-child{border-radius:0 2px 2px 0;border-right:1px solid #d9d9d9}.status_search .active[data-v-e6bbcf18]{background:#06f;color:#fff;border-color:#06f}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@charset "UTF-8";*:not(svg),#app,html,body{margin:0;padding:0;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;font-size:12px}a{text-decoration:none;color:#5a5a5a}li{list-style:none}.flex{display:-webkit-flex;display:flex;display:-moz-box;display:-ms-flexbox}.flex_row{flex-direction:row}.flex_col{flex-direction:column}.initTextarea>.el-textarea__inner{resize:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent;border-radius:4px}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#c2c2c2}::-webkit-scrollbar-corner{background:transparent}.common_show_scroll::-webkit-scrollbar-thumb{background:#c2c2c2}.tinymce-editor-JustOne *:not(h1,h2,h3,h4,h5,h6){font-size:inherit}.tinymce-editor-JustOne h1{font-size:32px}.tinymce-editor-JustOne h2{font-size:28px}.tinymce-editor-JustOne h3{font-size:24px}.tinymce-editor-JustOne h4{font-size:20px}.tinymce-editor-JustOne h5{font-size:16px}.tinymce-editor-JustOne h6{font-size:12px}.jddsDialog.el-dialog{border-radius:4px}.jddsDialog .el-dialog__title,.jddsDialog .zbt{font-size:16px;color:#272727;line-height:normal}.jddsDialog .el-dialog__body .el-form-item:last-child{margin-bottom:0}.jddsDialog .el-dialog__headerbtn{top:5px;right:0}.jddsDialog .btn{min-width:68px;height:32px;line-height:32px;border-radius:4px;padding:0}.jddsDialog .exit{font-size:14px}.jddsDialog .header-title{display:flex;align-items:center}.jddsDialog.el-dialog--center .header-title{justify-content:center}.JD_table.el-table:before{height:0!important}.JD_table.el-table{width:100%}.JD_table.el-table th,.JD_table.el-table th.el-table__cell{background-color:#eff2f580;padding:0;height:40px;line-height:40px;border-bottom:none!important}.JD_table.el-table th .cell,.JD_table.el-table th.el-table__cell .cell{font-weight:400;color:#999;text-align:left;white-space:nowrap}.JD_table.el-table td,.JD_table.el-table td.el-table__cell{padding:0;height:48px;line-height:48px}.JD_table.el-table td .cell,.JD_table.el-table td.el-table__cell .cell{line-height:normal}.el-table--group,.el-table--border{border:none!important}.el-table--group:after,.el-table--border:after{width:0!important}.el-table--border .el-table__cell,.el-table--border td{border-right:none!important}.el-table--border th.el-table__cell{border-right:1px solid #ebeef5!important}.el-table .cell{text-align:center!important}.el-table__header,.el-table__empty-block,.el-table__body{width:100%!important}.el-sub-menu__title{text-align:left!important}.el-sub-menu .el-menu-item{min-width:auto!important;padding-left:46px!important;position:relative}.el-sub-menu .el-menu-item:after{content:"";width:4px;height:4px;background:#7c878e;border-radius:50%;position:absolute;top:17px;left:26px}.el-sub-menu .el-menu .el-sub-menu .el-sub-menu__title{padding-left:46px!important}.el-sub-menu .el-menu .el-menu .el-menu-item{padding-left:60px!important}.el-sub-menu .el-menu .el-menu .el-menu-item:after{left:46px!important}.el-menu{border-right:none!important}.el-menu-item,.el-sub-menu__title{height:38px!important;line-height:38px!important;margin-top:2px}.el-menu-item *,.el-sub-menu__title *{vertical-align:middle}.el-submenu__title i.el-sub-menu__icon-arrow{color:#c0c5c7;font-weight:700}.el-message-box{width:400px!important}.initMsg_in{padding:20px 0!important}.initMsg_in .el-message-box__header{padding:0!important}.initMsg_in .el-message-box__header .el-message-box__headerbtn{display:none}.initMsg_in .el-message-box__header .el-message-box__status{font-size:50px!important}.initMsg_in .el-message-box__content{padding:20px 30px!important}.initMsg_in .el-message-box__content .el-message-box__message{letter-spacing:1px}.initMsg_in .el-message-box__btns{padding:0!important}.initMsg_in .el-message-box__btns button{min-width:100px;height:40px;border-radius:4px}.initMsg_in .el-message-box__btns button:nth-child(2){margin-left:20px!important}.defaultMsg_in .el-message-box__container{align-items:flex-start}.defaultMsg_in .el-message-box__title span{font-size:14px;font-weight:700}.defaultMsg_in .el-message-box__headerbtn{top:7px}.defaultMsg_in .el-message-box__status{top:0;transform:none;font-size:24px!important}.defaultMsg_in .el-message-box__btns button{min-width:68px;height:32px;border-radius:4px;border:none}.ieBro{position:fixed;padding:10px;z-index:9999;top:0;left:0;right:0;background:#fffade;border:1px solid #f9d878;justify-content:space-between}.ieBro span,.ieBro a{font-size:12px}.ieBro .color{text-decoration:underline}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks):before{content:""!important}.mainMenu[data-v-e79ba81c]{display:inline-block;position:relative}.mainMenu .elbadge[data-v-e79ba81c]{color:red;font-style:normal}.mainMenu .elbadge.hot[data-v-e79ba81c]:after{display:inline-block;content:"";width:8px;height:8px;background-color:red;border-radius:100%;transform:scale(.9);position:absolute;top:10px;right:-10px}.mainMenu .elbadge.new[data-v-e79ba81c]:after{display:inline-block;content:"new";background-color:red;color:#fff;padding:0 4px 1px;line-height:16px;border-radius:4px;transform:scale(.9);position:absolute;top:6px;right:-32px}.mainMenu .elbadge.run[data-v-e79ba81c]{display:inline-block;color:#fff;background-color:red;min-width:20px;padding:0 2px;text-align:center;height:16px;line-height:16px;border-radius:4px;animation:changeRun 1.5s ease-in-out 0s infinite}.mainMenu .elbadge.num[data-v-e79ba81c]{display:inline-block;background-color:red;color:#fff;width:20px;text-align:center;height:16px;line-height:16px;border-radius:4px;transform:scale(.9);position:absolute;top:6px;right:-22px}.mainMenu .elbadge.num.nine[data-v-e79ba81c]{width:26px;right:-28px}.mainMenu .elbadge.num.nine em[data-v-e79ba81c]{position:relative;top:-4px}.el-menu-item span[data-v-e79ba81c],.el-sub-menu__title span[data-v-e79ba81c]{font-size:14px}.handHeaderContent{position:relative;z-index:999;height:100vh}.handHeaderContent .el-container.is-vertical{position:relative}.handHeaderContent .inner_header{padding:0;background:#fff;justify-content:space-between;align-items:center;height:50px!important}.handHeaderContent .inner_header .colSpan{width:60px;background-color:transparent;justify-content:center;align-items:center}.handHeaderContent .inner_header .colSpan .hide{width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA2hJREFUeF7t3Vtu5DAMRFFlZ9nZzKwsS0ugTBswGnnYLkqkVddAkC+1Q9YBrXb68dJae28cth14AYBt9p+FA8A7fwCY5w8AALAJtDbAHsA6fjaB5vEDAADcB/A2wB7AO3+eBprnDwAAcB/A2gB7AOv4eRpoHv9/AK/2XTBuQAfAYdwBABiHv70gxLwF3uUzAbzz/9wEchh3AADG4bMHMA8fAABgD+BugD2AuQAAAMC8A+blMwEAYN4B8/IrTIC/rbX+w5HQgWwAW/AASAg/+0ZQD/1Pa+0fEyAp/cfnA2ScfQu/nxsAGQk8zplxCdiHD4DE8DMuAc/hKwB4LWMAnpkT4KvwVQBvAT2wfohZAL4LHwDJ/GYA+Cl8ACwO4LfwAbAwgCPhA2BRAEfDB8CCAM6ED4DFAJwNHwALAbgSPgAWAXA1fAAsAEAJHwA3B6CGD4AbA4gIHwA3BRAVPgBuCCAyfADcDEB0+AC4EYAR4SsAklu3xumP/jt4VPgASHZ0BMDI8AFQHMDo8AFQGMCM8AFQFMCs8AFQEMDM8AFQDMDs8AFQCEBG+AAoAiArfAAUAJAZPgAAwLuDMw1sdwIzpwBvD08UsL8VnIUAAEUA9D8jAwEACgHIQACAYgBmIwBAQQAzEQCgKIBZCABQGMAMBAAoDmA0AgDcAMBIBFcB9E8J40OiRDxHXhO4P8WI+wQAEENUlp8FMGISAEBJUFx7BUA0AgCIISrLrwKIRAAAJUFxrQIgCgEAxBCV5SqACAQAUBIU10YAUBEAQAxRWR4FQEEAACVBcW0kgKsIACCGqCyPBnAFAQCUBMW1IwCcRQAAMURl+SgAZxAAQElQXDsSwFEEABBDVJaPBnAEAQCUBMW1MwD8hgAAYojK8lkAfkKgAFBqZ23CF0dGfm0cAQZ0YOYE2P7cZwRXJ0BA+TxEBoDnywEAEh1mAdgjAIApgA3B/ndiKzxPnTkB9nuCvi/gSOhABQAJZXPKrQMAMLcAAACYd8C8fCYAAMw7YF4+EwAA5h0wL58JAADzDpiXzwQAgHkHzMtnAgDAvAPm5fcJ0D9sicO0Ax3Au2ntlP14VTAAjCkwAYzD76UDAADsAZwNMAGc0+cSYJ4+AADAJcDcAAAAwLMAZwNMAOf02QSapw8AAHAJMDcAAHMAH9uzwUGCPXdSAAAAAElFTkSuQmCC) no-repeat;background-size:contain;cursor:pointer;transition:all .2s}.handHeaderContent .inner_header .colSpan .hide.rotate{transform:rotate(180deg)}.handHeaderContent .inner_header .saasInfo .img{align-items:center;justify-content:center;height:50px;margin-right:20px;cursor:pointer}.handHeaderContent .inner_header .saasInfo .img:hover .dropDown{display:block}.handHeaderContent .inner_header .saasInfo .img img{width:33px;height:33px;border-radius:50%;margin-right:5px;border:1px solid #eff2f5}.handHeaderContent .dropDown{position:absolute;right:10px;top:50px;width:170px;background:#fff;box-shadow:0 0 4px #1919191a;border-radius:2px;display:none;z-index:999}.handHeaderContent .dropDown .san{display:inline-block;width:10px;height:10px;border:1px solid #fff;border-top-style:none;border-right-style:none;transform:rotate(135deg);position:absolute;top:-4px;right:38px;background:#fff}.handHeaderContent .dropDown .user{padding:11px;align-items:center;border-bottom:1px solid #f5f5f5}.handHeaderContent .dropDown .user span{line-height:normal;font-size:14px}.handHeaderContent .dropDown .exit{font-size:14px;line-height:39px;height:39px;border-top:1px solid #EFF2F5;text-align:center;padding:0;color:#5a5a5a}.handHeaderContent .aside{height:100%;transition:all .2s;overflow:overlay;z-index:999;position:relative}.handHeaderContent .aside .init-el-menu{padding-bottom:38px}.handHeaderContent .aside.hideMenu .el-tooltip{text-align:center}.handHeaderContent .aside.hideMenu .el-submenu__title{text-align:center!important}.handHeaderContent .aside.hideMenu i.iconfont{margin-right:0}.handHeaderContent .aside.hideMenu .deldom,.handHeaderContent .aside.hideMenu .el-submenu__icon-arrow{display:none}.handHeaderContent .aside i.iconfont{font-size:18px;display:inline-block;width:18px;margin-right:8px;color:#747c81}.handHeaderContent .main{padding:0;background-color:#eff2f5}.handHeaderContent .main.scrollX{overflow-x:scroll}.handHeaderContent .main .content_mar{padding:18px 18px 0;display:flex;flex-direction:column;height:calc(100vh - 18px)}.handHeaderContent .main .contentTop{flex-shrink:0}.handHeaderContent .main .inner_content{background-color:#fff;flex:1;border-radius:4px}.handHeaderContent .main .inner_content.normal{background-color:transparent}.handHeaderContent .inner_footer{flex-shrink:0;color:#666;text-align:center;padding:18px 0;height:32px;justify-content:center}@keyframes changeRun{0%{transform:translateY(0) scale(.9)}25%{transform:translateY(-6px) scale(.9)}50%{transform:translateY(0) scale(.9)}75%{transform:translateY(-2px) scale(.9)}to{transform:translateY(0) scale(.9)}}.initNoData[data-v-0b0e3718]{width:100%;align-items:center;justify-content:center}.initNoData .inner[data-v-0b0e3718]{text-align:center}.initNoData .inner p[data-v-0b0e3718]{color:#666;margin-top:12px;line-height:normal}.initPaging[data-v-1d8ef8c9] .el-select__placeholder{text-align:center}.previewFix[data-v-14d38dc6]{width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;background-color:#00000080;display:flex;justify-content:center;align-items:center}.previewFix img[data-v-14d38dc6]{max-width:98%;max-height:98%}.status_search[data-v-e6bbcf18]{display:inline-block}.status_search span[data-v-e6bbcf18]{min-width:40px;height:30px;padding:0 10px;display:inline-block;text-align:center;line-height:30px;border:1px solid #d9d9d9;border-right:1px solid transparent;cursor:pointer}.status_search span[data-v-e6bbcf18]:first-child{border-radius:2px 0 0 2px}.status_search span[data-v-e6bbcf18]:last-child{border-radius:0 2px 2px 0;border-right:1px solid #d9d9d9}.status_search .active[data-v-e6bbcf18]{background:#06f;color:#fff;border-color:#06f}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 import { ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, renderSlot, Fragment, normalizeStyle, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, createBlock, createElementVNode, resolveComponent, renderList, computed, onMounted, nextTick } from "vue";
 import { ElDialog, ElButton, ElMenuItem, ElSubMenu, ElContainer, ElAside, ElMenu, ElMain, ElHeader, ElIcon, ElConfigProvider, ElPagination, ElMessageBox } from "element-plus";
 import { ArrowDown } from "@element-plus/icons-vue";
@@ -201,7 +201,7 @@ const _hoisted_8$1 = {
   key: 0,
   class: "elbadge hot"
 };
-const _hoisted_9 = {
+const _hoisted_9$1 = {
   key: 1,
   class: "elbadge new"
 };
@@ -294,7 +294,7 @@ const _sfc_main$5 = {
           !__props.hideMenu ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
             createElementVNode("span", null, toDisplayString(__props.item.meta.title), 1),
             __props.item.tips && __props.item.tips.name === "hot" ? (openBlock(), createElementBlock("em", _hoisted_8$1)) : createCommentVNode("", true),
-            __props.item.tips && __props.item.tips.name === "new" ? (openBlock(), createElementBlock("em", _hoisted_9)) : createCommentVNode("", true),
+            __props.item.tips && __props.item.tips.name === "new" ? (openBlock(), createElementBlock("em", _hoisted_9$1)) : createCommentVNode("", true),
             __props.item.tips && __props.item.tips.name === "run" ? (openBlock(), createElementBlock("em", _hoisted_10, toDisplayString(__props.item.tips.value), 1)) : createCommentVNode("", true),
             __props.item.tips && __props.item.tips.name === "num" && Number(__props.item.tips.value) < 100 ? (openBlock(), createElementBlock("em", _hoisted_11, toDisplayString(__props.item.tips.value), 1)) : createCommentVNode("", true),
             __props.item.tips && __props.item.tips.name === "num" && Number(__props.item.tips.value) >= 100 ? (openBlock(), createElementBlock("em", _hoisted_12, [..._cache[1] || (_cache[1] = [
@@ -354,7 +354,8 @@ const _hoisted_4 = { class: "img flex flex_row" };
 const _hoisted_5 = { class: "dropDown" };
 const _hoisted_6 = { class: "user flex flex_row" };
 const _hoisted_7 = { class: "content_mar" };
-const _hoisted_8 = ["innerHTML"];
+const _hoisted_8 = { class: "contentTop" };
+const _hoisted_9 = ["innerHTML"];
 const _sfc_main$4 = {
   __name: "handHeader",
   props: {
@@ -391,17 +392,14 @@ const _sfc_main$4 = {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const addClass = ref(false);
     const isScrollX = ref(false);
     const newMenuList = ref([]);
     const defaultOpen = ref([]);
     const isIE = ref(false);
     const hideMenu = ref(false);
-    const showFooter = ref(false);
     const isNormal = ref(false);
     const minWidth = ref(props.contentWidth);
     const localDefaultActive = ref(props.defaultActive);
-    const mainRef = ref(null);
     const completeWidth = computed(() => {
       return hideMenu.value ? "64px" : `${props.width}px`;
     });
@@ -445,51 +443,6 @@ const _sfc_main$4 = {
         }
       }
     };
-    const loadImg = (content) => {
-      let mulitImg = [];
-      if (content.includes("<img")) {
-        content.replace(
-          /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
-          (matcherStr, capture) => {
-            mulitImg.push(capture);
-          }
-        );
-        let promiseAll = [], img = [];
-        for (let i = 0; i < mulitImg.length; i++) {
-          promiseAll[i] = new Promise((resolve) => {
-            img[i] = new Image();
-            img[i].src = mulitImg[i];
-            img[i].onload = function() {
-              resolve(img[i]);
-            };
-          });
-        }
-        Promise.all(promiseAll).then(() => {
-          getMainHeight();
-        });
-      } else {
-        getMainHeight();
-      }
-    };
-    const getMainHeight = (flag) => {
-      addClass.value = false;
-      setTimeout(() => {
-        const mainContainer = document.querySelector(".main_container");
-        if (mainContainer) {
-          const innerContent = document.querySelector(".main_container .inner_content");
-          const contentDiv = document.querySelector(".main_container .inner_content>div");
-          if (innerContent && contentDiv) {
-            const mainHeight = innerContent.offsetHeight;
-            const conHeight = contentDiv.offsetHeight;
-            addClass.value = conHeight > mainHeight;
-            showFooter.value = true;
-            if (!flag && addClass.value && mainRef.value) {
-              mainRef.value.scrollTop = 0;
-            }
-          }
-        }
-      }, 0);
-    };
     const setMinWidth = (width) => {
       isScrollX.value = width < minWidth.value;
       const innerHeader = document.querySelector(".main_container .inner_header");
@@ -533,23 +486,17 @@ const _sfc_main$4 = {
       minWidth.value = windowWidth > minWidth.value ? minWidth.value - props.width : windowWidth - props.width;
       browser();
       nextTick(() => {
-        getMenu();
         setMinWidth(mainDefalutWidth);
         window.addEventListener("resize", debounce2(() => {
           mainDefalutWidth = document.body.clientWidth - props.width;
           setMinWidth(mainDefalutWidth);
-          setTimeout(() => {
-            getMainHeight();
-          }, 0);
         }));
       });
     });
     __expose({
       getMenu,
       setMenuActive,
-      setNormal,
-      loadImg,
-      getMainHeight
+      setNormal
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElContainer), { class: "handHeaderContent" }, {
@@ -599,9 +546,7 @@ const _sfc_main$4 = {
             _: 3
           }, 8, ["class", "width"]),
           createVNode(unref(ElMain), {
-            class: normalizeClass(["main main_container", { scroll: addClass.value, scrollX: isScrollX.value }]),
-            ref_key: "mainRef",
-            ref: mainRef
+            class: normalizeClass(["main main_container", { scrollX: isScrollX.value }])
           }, {
             default: withCtx(() => [
               createVNode(unref(ElHeader), { class: "header flex flex_row inner_header" }, {
@@ -652,6 +597,9 @@ const _sfc_main$4 = {
                 _: 3
               }),
               createElementVNode("div", _hoisted_7, [
+                createElementVNode("div", _hoisted_8, [
+                  renderSlot(_ctx.$slots, "contentTop")
+                ]),
                 createElementVNode("div", {
                   class: normalizeClass(["content inner_content", { normal: isNormal.value }])
                 }, [
@@ -659,11 +607,10 @@ const _sfc_main$4 = {
                     renderSlot(_ctx.$slots, "content")
                   ])
                 ], 2),
-                showFooter.value ? (openBlock(), createElementBlock("div", {
-                  key: 0,
+                createElementVNode("div", {
                   class: "footer flex flex_col inner_footer",
                   innerHTML: __props.userInfo.copyRight
-                }, null, 8, _hoisted_8)) : createCommentVNode("", true)
+                }, null, 8, _hoisted_9)
               ])
             ]),
             _: 3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "component_ryl_v3",
   "private": false,
-  "version": "1.1.20",
+  "version": "1.1.40",
   "type": "module",
   "description": "Vue3 login form component with Element Plus",
   "main": "./dist/component_ryl_v3.js",

package/src/App.vue

@@ -32,6 +32,13 @@
         <li>2</li>
       </ul>
     </template>
+    <template #contentTop>
+      <div class="ttt" style="background-color: red;margin-bottom:18px;">
+        <h6>内容展示区域头部</h6>
+        <h6>内容展示区域头部</h6>
+        <h6>内容展示区域头部</h6>
+      </div>
+    </template>
     <template #content>
       <div class="lll">
       <h6>Tab</h6>
@@ -43,7 +50,12 @@
       <div>
         <hand-paging :currentPage="handPagingRef.page" :total="handPagingRef.total" :pageSize="handPagingRef.pageSize" :size="handPagingRef.size" @page-change="handlePageChange" />
       </div>
-      <!-- <div v-for="(item,index) in 100">{{index}}</div> -->
+      <div v-if="showImg">
+        <div v-for="(item,index) in 10" :key="index">
+        <p>{{index}}+ {{new Date().toLocaleString()}}</p>
+        <img src="https://v2-saas-1259468876.cos.ap-shanghai.myqcloud.com/system/admin/3c82217d4753dd50ccd9ae19d939f1b9.jpg" alt="" style="width:120px;height: 120px;">
+      </div>
+      </div>
       <h6>空数据提示</h6>
       <hand-no-data title="暂无数据" />
       <h6>弹窗</h6>
@@ -229,8 +241,14 @@ const copyBack = (err, success) => {
 //#endregion 自定义指令
 //#region 菜单组件
 const menuRef = ref(null)
+
+const showImg = ref(false)
 onMounted(() => {
-  menuRef.value.getMainHeight()
+  menuRef.value.getMenu()
+  // menuRef.value.setNormal(true)
+  // setTimeout(() => {
+  //   showImg.value = true
+  // }, 3000)
 })
 //#endregion 菜单组件
 const inputNumber = ref('')

package/src/packages/handHeader/handHeader-/345/216/237/346/235/245/347/232/204/346/250/241/345/274/217.vue

@@ -0,0 +1,565 @@
+<template>
+  <ElContainer class="handHeaderContent">
+    <!-- 左右两边分 -->
+    <div class="ieBro flex flex_row" v-if="isIE">
+      <span>
+        当前浏览器版本过低，使用效果可能欠佳，建议前往下载
+        <a href="http://chrome.wlxb49.cn/" target="_blank" class="color"
+          >谷歌浏览器</a
+        ></span
+      >
+      <span>
+        <a href="javascript:;" @click="closeIETips">x</a>
+      </span>
+    </div>
+    <!-- el-aside -->
+    <ElAside class="aside" :class="{'hideMenu': hideMenu}" :width="completeWidth">
+      <!-- 侧边栏系统名称展示区域 -->
+      <slot name="headElseTitle"></slot>
+      <ElMenu
+        class="el-menu-vertical-demo init-el-menu"
+        :default-active="localDefaultActive"
+        router
+        :default-openeds="defaultOpen"
+        :collapse="hideMenu"
+        :collapse-transition="false"
+      >
+        <sidebar-item v-for="menu in newMenuList" :key="menu.path" :item="menu" :hideMenu="hideMenu" />
+      </ElMenu>
+    </ElAside>
+    <ElMain :class="['main main_container',{ scroll: addClass, scrollX: isScrollX}]" ref="mainRef">
+      <ElHeader class="header flex flex_row inner_header">
+        <div class="imLeft flex flex_row">
+          <template v-if="collapse">
+            <div class="colSpan flex flex_row" @click="toggleHide">
+              <i :class="['hide', { rotate: hideMenu }]"></i>
+            </div>
+          </template>
+          <!-- 头部信息补充展示区域 -- 左边 -->
+          <slot name="headElseInfo"></slot>
+        </div>
+        <ul class="saasInfo flex flex_row">
+          <!-- 头部信息补充展示区域 -- 右边 -->
+          <slot name="headElseInfoRight"></slot>
+          <li class="img flex flex_row">
+            <img src="@/assets/img/portrait.jpg" alt />
+            <el-icon size="14"><ArrowDown /></el-icon>
+            <!-- 下拉框 -->
+            <div class="dropDown">
+              <em class="san"></em>
+              <div class="user flex flex_row">
+                <img src="@/assets/img/portrait.jpg" alt />
+                <span>{{ userInfo.name }}</span>
+              </div>
+              <!-- 头部信息操作展示区域 -->
+              <slot name="headElseHand"></slot>
+              <div class="exit" @click="outSystem">退出</div>
+            </div>
+          </li>
+        </ul>
+      </ElHeader>
+      <div class="content_mar">
+        <div class="content inner_content" :class="{ normal: isNormal }">
+          <!-- 内容展示区域 -->
+          <div>
+            <slot name="content"></slot>
+          </div>
+        </div>
+        <div class="footer flex flex_col inner_footer" v-html="userInfo.copyRight" v-if="showFooter"></div>
+      </div>
+    </ElMain>
+  </ElContainer>
+</template>
+
+<script setup>
+/**
+ * 头部布局组件
+ * 功能：包含侧边栏菜单、头部导航、用户信息和内容区域的完整布局
+ */
+
+// 导入Vue响应式API
+import { ref, computed, onMounted, nextTick } from 'vue'
+// 导入Element Plus组件
+import { ElContainer, ElAside, ElMenu, ElMain, ElHeader ,ElIcon} from 'element-plus'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+// 导入子组件
+import sidebarItem from './sidebarItem.vue'
+
+/**
+ * 组件属性定义
+ * @property {Object} menuList - 导航列表（包含name系统名称和list菜单列表）
+ * @property {string} defaultActive - 默认选中的菜单路径
+ * @property {boolean} collapse - 是否启用折叠功能
+ * @property {number} width - 侧边栏宽度
+ * @property {number} contentWidth - 内容模块宽度
+ * @property {Object} userInfo - 用户信息
+ * @property {boolean} showDefaltOpen - 是否默认展开所有菜单项
+ */
+const props = defineProps({
+  menuList: {
+    type: Object,
+    default: () => ({})
+  },
+  defaultActive: {
+    type: String,
+    default: "/"
+  },
+  collapse: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 180
+  },
+  contentWidth: {
+    type: Number,
+    default: 1200
+  },
+  userInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  showDefaltOpen: {
+    type: Boolean,
+    default: true
+  }
+})
+
+/**
+ * 事件定义
+ * @event toggleHide - 折叠/展开事件
+ * @event exitSystem - 退出系统事件
+ */
+const emit = defineEmits(['toggleHide', 'exitSystem'])
+
+// 响应式数据定义
+const addClass = ref(false)           // 动态添加是否有滚动
+const isScrollX = ref(false)          // 判断是否出现横向滚动条
+const newMenuList = ref([])           // 获取新的菜单
+const defaultOpen = ref([])           // 默认打开的菜单
+const isIE = ref(false)               // 是否是ie浏览器
+const hideMenu = ref(false)           // 是否隐藏菜单
+const showFooter = ref(false)         // 效果展示优化
+const isNormal = ref(false)           // 是否需要透明背景
+const minWidth = ref(props.contentWidth)               // 内容模块的默认最小宽度
+const localDefaultActive = ref(props.defaultActive)  // 本地默认选中菜单
+const mainRef = ref(null)             // main容器引用
+
+/**
+ * 收起和展开时 aside 的宽度
+ * @returns {string} 宽度值
+ */
+const completeWidth = computed(() => {
+  return hideMenu.value ? '64px' : `${props.width}px`
+})
+
+/**
+ * 主模块默认宽度
+ * @type {number}
+ */
+let mainDefalutWidth = document.body.clientWidth - props.width
+
+/**
+ * 函数防抖
+ * @param {Function} fn - 需要防抖的函数
+ * @param {number} delay - 延迟时间（默认200ms）
+ * @returns {Function} 防抖后的函数
+ */
+const debounce = (fn, delay = 200) => {
+  let timer = null
+  return function () {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn.apply(this, arguments)
+    }, delay)
+  }
+}
+
+/**
+ * 过滤隐藏的菜单项并递归处理子菜单
+ * @param {Array} datas - 菜单数据
+ * @returns {Array} 过滤后的菜单列表
+ */
+const getAllName = (datas) => {
+  return datas.filter(item => !item.hidden).map(item => {
+    item = Object.assign({}, item)
+    if (item.children) {
+      item.children = getAllName(item.children)
+    }
+    return item
+  })
+}
+
+/**
+ * 处理传入的导航菜单
+ */
+const getMenu = () => {
+  newMenuList.value = getAllName(props.menuList.list || [])
+  defaultOpen.value = []
+  getOpen()
+}
+
+/**
+ * 折叠/展开菜单
+ */
+const toggleHide = () => {
+  hideMenu.value = !hideMenu.value
+  defaultOpen.value = []
+  getOpen()
+  emit('toggleHide', hideMenu.value)
+}
+
+/**
+ * 获取默认打开的菜单项
+ * @param {Array} datas - 菜单数据（默认为newMenuList）
+ */
+const getOpen = (datas = newMenuList.value) => {
+  if (props.showDefaltOpen) {
+    for (const i in datas) {
+      defaultOpen.value.push(datas[i].path)
+      if (datas[i].children) {
+        getOpen(datas[i].children)
+      }
+    }
+  }
+}
+
+/**
+ * 等待图片加载完成后获取主容器高度
+ * @param {string} content - HTML内容
+ */
+const loadImg = (content) => {
+  let mulitImg = []
+  if (content.includes("<img")) {
+    content.replace(
+      /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
+      (matcherStr, capture) => {
+        mulitImg.push(capture)
+      }
+    )
+    let promiseAll = [], img = []
+    for (let i = 0; i < mulitImg.length; i++) {
+      promiseAll[i] = new Promise((resolve) => {
+        img[i] = new Image()
+        img[i].src = mulitImg[i]
+        img[i].onload = function () {
+          resolve(img[i])
+        }
+      })
+    }
+    Promise.all(promiseAll).then(() => {
+      getMainHeight()
+    })
+  } else {
+    getMainHeight()
+  }
+}
+
+/**
+ * 获取内容模块的滚动条状态
+ * @param {boolean} flag - 是否跳过滚动条置顶
+ */
+const getMainHeight = (flag) => {
+  addClass.value = false
+  setTimeout(() => {
+    const mainContainer = document.querySelector(".main_container")
+    if (mainContainer) {
+      const innerContent = document.querySelector(".main_container .inner_content")
+      const contentDiv = document.querySelector(".main_container .inner_content>div")
+      
+      if (innerContent && contentDiv) {
+        const mainHeight = innerContent.offsetHeight
+        const conHeight = contentDiv.offsetHeight
+        
+        addClass.value = conHeight > mainHeight
+        showFooter.value = true
+        
+        if (!flag && addClass.value && mainRef.value) {
+          mainRef.value.scrollTop = 0
+        }
+      }
+    }
+  }, 0)
+}
+
+/**
+ * 设置内容模块最小宽度
+ * @param {number} width - 当前窗口宽度
+ */
+const setMinWidth = (width) => {
+  isScrollX.value = width < minWidth.value
+  
+  const innerHeader = document.querySelector(".main_container .inner_header")
+  const contentMar = document.querySelector(".main_container .content_mar")
+  
+  if (isScrollX.value) {
+    if (innerHeader) {
+      innerHeader.setAttribute("style", `min-width:${minWidth.value}px;`)
+    }
+    if (contentMar) {
+      contentMar.setAttribute("style", `min-width:${minWidth.value - 36}px;`)
+    }
+  } else {
+    if (innerHeader) {
+      innerHeader.removeAttribute("style")
+    }
+    if (contentMar) {
+      contentMar.removeAttribute("style")
+    }
+  }
+}
+
+/**
+ * 设置菜单选中状态
+ * @param {string} path - 菜单路径
+ */
+const setMenuActive = (path) => {
+  localDefaultActive.value = ''
+  nextTick(() => {
+    localDefaultActive.value = path
+  })
+}
+
+/**
+ * 判断是否在 content inner_content 类名上添加 normal 类名
+ */
+const setNormal = (value) => {
+  isNormal.value = value
+}
+
+/**
+ * 退出系统
+ */
+const outSystem = () => {
+  emit('exitSystem')
+}
+
+/**
+ * 判断是否是 IE 浏览器
+ */
+const browser = () => {
+  isIE.value = !!window.ActiveXObject || "ActiveXObject" in window
+}
+
+/**
+ * 关闭 IE 提示
+ */
+const closeIETips = () => {
+  isIE.value = false
+}
+
+/**
+ * 组件挂载时初始化
+ */
+onMounted(() => {
+  const windowWidth = window.screen.availWidth
+  minWidth.value = windowWidth > minWidth.value ? (minWidth.value - props.width) : (windowWidth - props.width)
+  
+  browser()
+  
+  nextTick(() => {
+    getMenu()
+    setMinWidth(mainDefalutWidth)
+    // 监听窗口大小变化
+    window.addEventListener('resize', debounce(() => {
+      mainDefalutWidth = document.body.clientWidth - props.width
+      setMinWidth(mainDefalutWidth)
+      setTimeout(() => {
+        getMainHeight()
+      }, 0)
+    }))
+  })
+})
+
+/**
+ * 暴露方法给父组件调用
+ */
+defineExpose({
+  getMenu,
+  setMenuActive,
+  setNormal,
+  loadImg,
+  getMainHeight
+})
+</script>
+
+<style lang="scss">
+.handHeaderContent {
+  position: relative;
+  z-index: 999;
+  height: 100vh;
+  .el-container.is-vertical{
+    position: relative;
+  }
+  .inner_header {
+    padding: 0;
+    background: #fff;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px !important;
+    .colSpan {
+      width: 60px;
+      background-color: transparent;
+      justify-content: center;
+      align-items: center;
+      .hide {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/img/hide.png") no-repeat;
+        background-size: contain;
+        cursor: pointer;
+        transition: all 0.2s;
+        &.rotate {
+          transform: rotateZ(180deg);
+        }
+      }
+    }
+    .saasInfo {
+      .img {
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover .dropDown {
+          display: block;
+        }
+        img {
+          width: 33px;
+          height: 33px;
+          border-radius: 50%;
+          margin-right: 5px;
+          border: 1px solid #eff2f5;
+        }
+      }
+    }
+  }
+  .dropDown {
+    position: absolute;
+    right: 10px;
+    top: 50px;
+    width: 170px;
+    background: #ffffff;
+    box-shadow: 0px 0px 4px 0px rgba(25, 25, 25, 0.1);
+    border-radius: 2px;
+    display: none;
+    z-index: 999;
+    .san {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border: 1px solid #fff;
+      border-top-style: none;
+      border-right-style: none;
+      transform: rotate(135deg);
+      position: absolute;
+      top: -4px;
+      right: 38px;
+      background: #fff;
+    }
+    .user {
+      padding: 11px;
+      align-items: center;
+      border-bottom: 1px solid #f5f5f5;
+      span {
+        line-height: normal;
+        font-size: 14px;
+      }
+    }
+    .exit {
+      font-size: 14px;
+      line-height: 39px;
+      height: 39px;
+      border-top: 1px solid #EFF2F5;
+      text-align: center;
+      padding: 0;
+      color: #5a5a5a;
+    }
+  }
+  .aside {
+    height: 100%;
+    transition: all .2s;
+    overflow: overlay;
+    // background-color: #0d1829;
+    z-index: 999;
+    position: relative;
+    .init-el-menu{
+      padding-bottom: 38px;
+    }
+    &.hideMenu{
+      .el-tooltip{
+        text-align: center;
+      }
+      .el-submenu__title{
+        text-align: center !important;
+      }
+      i.iconfont{
+        margin-right: 0;
+      }
+      .deldom,.el-submenu__icon-arrow{
+        display: none;
+      }
+    }
+    i.iconfont {
+      font-size: 18px;
+      display: inline-block;
+      width: 18px;
+      margin-right: 8px;
+      color: #747C81;
+    }
+  }
+  .main {
+    padding: 0;
+    background-color: #eff2f5;
+    &.scroll {
+      overflow-y: scroll;
+      .inner_content {
+        height: auto;
+        &.normal {
+          height: auto;
+        }
+      }
+    }
+    &.scrollX {
+      overflow-x: scroll;
+    }
+    .content_mar{
+      padding: 18px;
+    }
+    .inner_content {
+      background-color: #fff;
+      height: calc(100vh - 50px - 36px);
+      border-radius: 4px;
+      &.normal {
+        background-color: transparent;
+      }
+    }
+  }
+  .inner_footer {
+    color: #666666;
+    text-align: center;
+    padding-top: 18px;
+    justify-content: center;
+  }
+}
+
+@keyframes changeRun {
+	0% {
+		transform: translateY(0) scale(.9);
+	}
+  25% {
+		transform: translateY(-6px) scale(.9);
+	}
+	50% {
+		transform: translateY(0) scale(.9);
+	}
+  75% {
+		transform: translateY(-2px) scale(.9);
+	}
+	100% {
+		transform: translateY(0) scale(.9);
+	}
+}
+</style>

package/src/packages/handHeader/handHeader.vue

@@ -27,7 +27,7 @@
         <sidebar-item v-for="menu in newMenuList" :key="menu.path" :item="menu" :hideMenu="hideMenu" />
       </ElMenu>
     </ElAside>
-    <ElMain :class="['main main_container',{ scroll: addClass, scrollX: isScrollX}]" ref="mainRef">
+    <ElMain :class="['main main_container',{ scrollX: isScrollX}]">
       <ElHeader class="header flex flex_row inner_header">
         <div class="imLeft flex flex_row">
           <template v-if="collapse">
@@ -59,13 +59,17 @@
         </ul>
       </ElHeader>
       <div class="content_mar">
+        <!-- 内容展示区域头部 -->
+        <div class="contentTop">
+          <slot name="contentTop"></slot>
+        </div>
         <div class="content inner_content" :class="{ normal: isNormal }">
           <!-- 内容展示区域 -->
           <div>
             <slot name="content"></slot>
           </div>
         </div>
-        <div class="footer flex flex_col inner_footer" v-html="userInfo.copyRight" v-if="showFooter"></div>
+        <div class="footer flex flex_col inner_footer" v-html="userInfo.copyRight"></div>
       </div>
     </ElMain>
   </ElContainer>
@@ -135,17 +139,14 @@ const props = defineProps({
 const emit = defineEmits(['toggleHide', 'exitSystem'])
 
 // 响应式数据定义
-const addClass = ref(false)           // 动态添加是否有滚动
 const isScrollX = ref(false)          // 判断是否出现横向滚动条
 const newMenuList = ref([])           // 获取新的菜单
 const defaultOpen = ref([])           // 默认打开的菜单
 const isIE = ref(false)               // 是否是ie浏览器
 const hideMenu = ref(false)           // 是否隐藏菜单
-const showFooter = ref(false)         // 效果展示优化
 const isNormal = ref(false)           // 是否需要透明背景
 const minWidth = ref(props.contentWidth)               // 内容模块的默认最小宽度
 const localDefaultActive = ref(props.defaultActive)  // 本地默认选中菜单
-const mainRef = ref(null)             // main容器引用
 
 /**
  * 收起和展开时 aside 的宽度
@@ -226,64 +227,6 @@ const getOpen = (datas = newMenuList.value) => {
   }
 }
 
-/**
- * 等待图片加载完成后获取主容器高度
- * @param {string} content - HTML内容
- */
-const loadImg = (content) => {
-  let mulitImg = []
-  if (content.includes("<img")) {
-    content.replace(
-      /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
-      (matcherStr, capture) => {
-        mulitImg.push(capture)
-      }
-    )
-    let promiseAll = [], img = []
-    for (let i = 0; i < mulitImg.length; i++) {
-      promiseAll[i] = new Promise((resolve) => {
-        img[i] = new Image()
-        img[i].src = mulitImg[i]
-        img[i].onload = function () {
-          resolve(img[i])
-        }
-      })
-    }
-    Promise.all(promiseAll).then(() => {
-      getMainHeight()
-    })
-  } else {
-    getMainHeight()
-  }
-}
-
-/**
- * 获取内容模块的滚动条状态
- * @param {boolean} flag - 是否跳过滚动条置顶
- */
-const getMainHeight = (flag) => {
-  addClass.value = false
-  setTimeout(() => {
-    const mainContainer = document.querySelector(".main_container")
-    if (mainContainer) {
-      const innerContent = document.querySelector(".main_container .inner_content")
-      const contentDiv = document.querySelector(".main_container .inner_content>div")
-      
-      if (innerContent && contentDiv) {
-        const mainHeight = innerContent.offsetHeight
-        const conHeight = contentDiv.offsetHeight
-        
-        addClass.value = conHeight > mainHeight
-        showFooter.value = true
-        
-        if (!flag && addClass.value && mainRef.value) {
-          mainRef.value.scrollTop = 0
-        }
-      }
-    }
-  }, 0)
-}
-
 /**
  * 设置内容模块最小宽度
  * @param {number} width - 当前窗口宽度
@@ -360,15 +303,11 @@ onMounted(() => {
   browser()
   
   nextTick(() => {
-    getMenu()
     setMinWidth(mainDefalutWidth)
     // 监听窗口大小变化
     window.addEventListener('resize', debounce(() => {
       mainDefalutWidth = document.body.clientWidth - props.width
       setMinWidth(mainDefalutWidth)
-      setTimeout(() => {
-        getMainHeight()
-      }, 0)
     }))
   })
 })
@@ -379,9 +318,7 @@ onMounted(() => {
 defineExpose({
   getMenu,
   setMenuActive,
-  setNormal,
-  loadImg,
-  getMainHeight
+  setNormal
 })
 </script>
 
@@ -513,24 +450,22 @@ defineExpose({
   .main {
     padding: 0;
     background-color: #eff2f5;
-    &.scroll {
-      overflow-y: scroll;
-      .inner_content {
-        height: auto;
-        &.normal {
-          height: auto;
-        }
-      }
-    }
     &.scrollX {
       overflow-x: scroll;
     }
     .content_mar{
-      padding: 18px;
+      padding: 18px 18px 0;
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - 18px);
+    }
+    .contentTop {
+      flex-shrink: 0;
     }
     .inner_content {
       background-color: #fff;
-      height: calc(100vh - 50px - 36px);
+      flex: 1;
+      // overflow-y: auto;
       border-radius: 4px;
       &.normal {
         background-color: transparent;
@@ -538,9 +473,11 @@ defineExpose({
     }
   }
   .inner_footer {
+    flex-shrink: 0;
     color: #666666;
     text-align: center;
-    padding-top: 18px;
+    padding: 18px 0;
+    height: 32px;
     justify-content: center;
   }
 }