| | |
| | | } |
| | | |
| | | .layout-aside { |
| | | position: relative; |
| | | flex-shrink: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | border-radius: 16px; |
| | | background: linear-gradient(180deg, #16324d 0%, #0d2237 100%); |
| | | box-shadow: 0 14px 32px rgba(22, 50, 77, 0.18); |
| | | transform: translateZ(0); |
| | | backface-visibility: hidden; |
| | | will-change: width; |
| | | transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), |
| | | box-shadow 0.22s ease; |
| | | } |
| | | |
| | | .layout-aside.is-animating { |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .layout-panel { |
| | |
| | | background: #f5f7fa; |
| | | box-shadow: 0 14px 32px rgba(83, 104, 129, 0.12); |
| | | border: 1px solid #e4eaf2; |
| | | transform: translateZ(0); |
| | | backface-visibility: hidden; |
| | | } |
| | | |
| | | .aside-logo { |
| | |
| | | box-sizing: border-box; |
| | | color: #fff; |
| | | border-bottom: 1px solid rgba(255, 255, 255, 0.08); |
| | | transition: min-height 0.22s cubic-bezier(0.22, 1, 0.36, 1), |
| | | padding 0.22s cubic-bezier(0.22, 1, 0.36, 1); |
| | | } |
| | | |
| | | .aside-logo-image { |
| | |
| | | max-width: 178px; |
| | | height: auto; |
| | | object-fit: contain; |
| | | transform: translateZ(0); |
| | | transition: max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1); |
| | | } |
| | | |
| | | .aside-logo.is-collapse { |
| | |
| | | .aside-search { |
| | | padding: 12px 12px 8px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .aside-fade-enter-active, |
| | | .aside-fade-leave-active { |
| | | transition: opacity 0.14s ease, transform 0.18s ease; |
| | | } |
| | | |
| | | .aside-fade-enter, |
| | | .aside-fade-leave-to { |
| | | opacity: 0; |
| | | transform: translate3d(-10px, 0, 0); |
| | | } |
| | | |
| | | .aside-search .el-input__inner { |
| | |
| | | .aside-scroll { |
| | | flex: 1; |
| | | min-height: 0; |
| | | transform: translateZ(0); |
| | | } |
| | | |
| | | .aside-scroll .el-scrollbar__wrap { |
| | |
| | | .side-menu { |
| | | border-right: none; |
| | | background: transparent; |
| | | transform: translateZ(0); |
| | | } |
| | | |
| | | .side-menu .el-submenu__title, |
| | |
| | | margin: 0 10px 6px; |
| | | border-radius: 10px; |
| | | box-sizing: border-box; |
| | | backface-visibility: hidden; |
| | | } |
| | | |
| | | .side-menu .el-submenu__title:hover, |
| | |
| | | <body> |
| | | <div id="app" v-cloak> |
| | | <el-container class="shell-container"> |
| | | <el-aside class="layout-aside" :width="asideWidth"> |
| | | <div class="aside-logo" :class="{ 'is-collapse': isCollapse }"> |
| | | <el-aside |
| | | class="layout-aside" |
| | | :class="{ 'is-animating': collapseAnimating }" |
| | | :width="asideWidth"> |
| | | <div class="aside-logo" :class="{ 'is-collapse': asideCompact }"> |
| | | <img class="aside-logo-image" src="../static/images/zy-logo.png" alt="浙江中扬"> |
| | | </div> |
| | | |
| | | <div class="aside-search" v-show="!isCollapse"> |
| | | <transition name="aside-fade"> |
| | | <div class="aside-search" v-show="showAsideExtras"> |
| | | <el-input |
| | | v-model.trim="menuKeyword" |
| | | size="small" |
| | |
| | | :placeholder="t('index.searchMenu')"> |
| | | </el-input> |
| | | </div> |
| | | </transition> |
| | | |
| | | <el-scrollbar class="aside-scroll"> |
| | | <div v-if="menuLoading" class="aside-loading" aria-hidden="true"> |
| | |
| | | ref="sideMenu" |
| | | class="side-menu" |
| | | :default-active="activeMenuKey" |
| | | :collapse="isCollapse" |
| | | :collapse="menuCollapse" |
| | | :collapse-transition="false" |
| | | :default-openeds="defaultOpeneds" |
| | | unique-opened |
| | |
| | | </template> |
| | | </el-scrollbar> |
| | | |
| | | <div class="aside-footer" v-show="!isCollapse"> |
| | | <transition name="aside-fade"> |
| | | <div class="aside-footer" v-show="showAsideExtras"> |
| | | <div class="aside-footer-copy">© 2026 {{ t('app.company') }}</div> |
| | | <div class="aside-footer-version"> |
| | | <span class="aside-footer-version-text">{{ versionText }}</span> |
| | |
| | | </el-tag> |
| | | </div> |
| | | </div> |
| | | </transition> |
| | | </el-aside> |
| | | |
| | | <el-container class="layout-panel"> |
| | |
| | | group: "账户中心", |
| | | menuKey: "" |
| | | }; |
| | | var SIDEBAR_TRANSITION_MS = 220; |
| | | var SIDEBAR_EXPAND_CONTENT_DELAY = 180; |
| | | var TAB_STORAGE_KEY = "wcs-element-home-tabs"; |
| | | var USER_STORAGE_KEY = "username"; |
| | | var INDEX_I18N_FALLBACKS = { |
| | |
| | | data: function () { |
| | | return { |
| | | isCollapse: false, |
| | | asideCompact: false, |
| | | menuCollapse: false, |
| | | showAsideExtras: true, |
| | | collapseAnimating: false, |
| | | collapseTimer: null, |
| | | menuLoading: true, |
| | | pageLoading: true, |
| | | loadingText: window.WCS_I18N ? window.WCS_I18N.tl("正在加载页面...") : "正在加载页面...", |
| | |
| | | }, |
| | | computed: { |
| | | asideWidth: function () { |
| | | return this.isCollapse ? "72px" : "248px"; |
| | | return this.asideCompact ? "72px" : "248px"; |
| | | }, |
| | | filteredMenus: function () { |
| | | var keyword = (this.menuKeyword || "").toLowerCase(); |
| | |
| | | if (this.menuSyncTimer) { |
| | | clearTimeout(this.menuSyncTimer); |
| | | this.menuSyncTimer = null; |
| | | } |
| | | if (this.collapseTimer) { |
| | | clearTimeout(this.collapseTimer); |
| | | this.collapseTimer = null; |
| | | } |
| | | if (this.aiTipIndex) { |
| | | layer.close(this.aiTipIndex); |
| | |
| | | this.syncFrameI18n(this.tabs[i].name); |
| | | } |
| | | }, |
| | | clearCollapseTimer: function () { |
| | | if (this.collapseTimer) { |
| | | clearTimeout(this.collapseTimer); |
| | | this.collapseTimer = null; |
| | | } |
| | | }, |
| | | nextFrame: function (callback) { |
| | | if (window.requestAnimationFrame) { |
| | | window.requestAnimationFrame(function () { |
| | | callback(); |
| | | }); |
| | | return; |
| | | } |
| | | setTimeout(callback, 16); |
| | | }, |
| | | finishCollapseStage: function (callback, delay) { |
| | | var that = this; |
| | | this.clearCollapseTimer(); |
| | | this.collapseTimer = setTimeout(function () { |
| | | that.collapseTimer = null; |
| | | callback(); |
| | | }, delay); |
| | | }, |
| | | toggleCollapse: function () { |
| | | this.isCollapse = !this.isCollapse; |
| | | var that = this; |
| | | |
| | | if (this.collapseAnimating) { |
| | | return; |
| | | } |
| | | |
| | | this.collapseAnimating = true; |
| | | |
| | | if (this.isCollapse) { |
| | | this.isCollapse = false; |
| | | this.asideCompact = false; |
| | | this.nextFrame(function () { |
| | | that.finishCollapseStage(function () { |
| | | that.menuCollapse = false; |
| | | that.showAsideExtras = true; |
| | | that.collapseAnimating = false; |
| | | that.$nextTick(function () { |
| | | that.syncMenuStateByUrl(that.activeTabUrl); |
| | | }); |
| | | }, SIDEBAR_EXPAND_CONTENT_DELAY); |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | this.isCollapse = true; |
| | | this.showAsideExtras = false; |
| | | this.menuCollapse = true; |
| | | this.$nextTick(function () { |
| | | that.nextFrame(function () { |
| | | that.asideCompact = true; |
| | | that.finishCollapseStage(function () { |
| | | that.collapseAnimating = false; |
| | | }, SIDEBAR_TRANSITION_MS); |
| | | }); |
| | | }); |
| | | }, |
| | | handleMenuSelect: function (group, item) { |
| | | this.addOrActivateTab({ |
| | |
| | | if (!menu) { |
| | | return; |
| | | } |
| | | if (that.menuCollapse) { |
| | | return; |
| | | } |
| | | openedMenus = menu.openedMenus ? menu.openedMenus.slice() : []; |
| | | if (!groupIndex) { |
| | | if (openedMenus.length) { |