lw-cdp-ui 1.0.19 → 1.0.21

package/dist/components/lwLayout/components/aside.vue

@@ -1,295 +1,291 @@
-<template>
-  <div class="layout-aside">
-
-    <img class="logo"
-         :src="logo"
-         alt="">
-
-    <el-popover placement="right"
-                :width="180"
-                trigger="click"
-                :show-arrow="false"
-                :offset="3"
-                popper-class="app-popper"
-                ref="popoverRef">
-      <template #reference>
-        <p>
-          <el-icon class="menu-btn">
-            <component is="el-icon-grid" />
-          </el-icon>
-        </p>
-      </template>
-      <div class="app-content">
-        <div class="app-title">
-          应用中心
-          <el-icon class="iconClose"
-                   @click="closePopover">
-            <el-icon-close />
-          </el-icon>
-        </div>
-        <el-divider style="margin: 5px 0;" />
-        <template v-if="grantedApplications.length > 0">
-          <div class="menu-item"
-               @click="switchMenu(item)"
-               v-for="item in grantedApplications"
-               :key="item.resourceId">
-            <i class="iconfont"
-               :class="item.icon"
-               style="margin-right: 5px;"></i>
-            {{ item.name}}
-          </div>
-        </template>
-
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<script>
-import logo from '/images/logo.jpg';
-export default {
-  name: 'layoutAside',
-  props: {
-  },
-  data() {
-    return {
-      logo,
-      popVisible: false,
-      grantedApplications: [],
-    };
-  },
-  mounted() {
-    let { grantedApplications } = this.$tool.data.get('userAuthInfo');
-    this.grantedApplications = grantedApplications
-    document.addEventListener('click', this.handleDocumentClick);
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.handleDocumentClick);
-  },
-  methods: {
-    handleDocumentClick(ev) {
-      let popover = document.getElementById('popover');
-      if (this.popVisible && (ev.target !== popover) && !popover.contains(ev.target)) {
-        this.popVisible = false;
-      }
-    },
-    switchMenu(menuItem) {
-      window.location.href = menuItem.url;
-    },
-    closePopover() {
-      this.$refs.popoverRef.hide(); // 关闭 popover
-    },
-  }
-};
-</script>
-<style lang="scss">
-.layout-aside {
-  width: 100%;
-  height: 100%;
-  border-bottom: 1px solid var(--el-mask-color-extra-light);
-  .logo {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-
-  .menu-btn {
-    font-size: 24px;
-    color: #95989d;
-  }
-  .el-tooltip__trigger {
-    text-align: center;
-    padding: 10px;
-    cursor: pointer;
-    &:hover {
-      background-color: var(--el-menu-hover-bg-color);
-      .menu-btn {
-        color: var(--el-menu-active-color);
-      }
-    }
-  }
-
-  .menu-container {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    width: inherit;
-
-    .logo {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: inherit;
-      height: 50px;
-      cursor: pointer;
-      margin: 0;
-      padding: 0;
-    }
-
-    .fixed-menu-list {
-      flex: 1;
-      width: inherit;
-      height: 100%;
-    }
-    .app-box {
-      width: 50px;
-      height: 50px;
-      color: #95989d;
-    }
-    .app-box:hover {
-      background: #eeeefc;
-      color: #3d3ad9;
-    }
-  }
-
-  .menu-container,
-  .footer {
-    p {
-      width: 50px;
-      height: 50px;
-      margin: auto;
-      line-height: 50px;
-      text-align: center;
-      cursor: pointer;
-    }
-
-    .iconfont {
-      color: inherit;
-      font-size: 18px;
-      padding: 15px;
-    }
-  }
-
-  .setting {
-    transform: rotate(180deg);
-    cursor: pointer;
-  }
-}
-
-.pop-menu {
-  min-width: 104px;
-  height: fit-content;
-  padding: 10px 0;
-  overflow-y: auto;
-  border: 1px solid #eaeaeb;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(39, 40, 42, 0.15);
-
-  // &.side-popover {
-  //     top: 50px !important;
-  //     left: 50px !important;
-  //     max-height: calc(100vh - 80px);
-  // }
-
-  // &.header-popover {
-  //     top: 35px !important;
-  //     right: 76px !important;
-  //     left: auto !important;
-  //     max-height: calc(100vh - 80px);
-  // }
-}
-
-.menu-item {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-  color: #6a6d73;
-  cursor: pointer;
-
-  &.fixed {
-    color: #27282a;
-    font-weight: bold;
-
-    .iconfont {
-      color: #3d3ad9;
-      font-weight: normal;
-    }
-
-    .iconfont.iconMinus-Circle {
-      color: #ccccf5;
-    }
-  }
-
-  &:hover {
-    background: #eeeefc;
-    color: #3d3ad9;
-
-    &.fixed .iconfont.iconFixed {
-      display: none !important;
-    }
-
-    .iconfont {
-      display: block !important;
-
-      color: #3d3ad9;
-    }
-  }
-
-  .iconfont {
-    width: 16px;
-    height: 16px;
-    color: #95989d;
-    line-height: 15px;
-
-    &.iconFixed {
-      display: none;
-      color: #9a98eb;
-      font-size: 14px;
-      cursor: pointer;
-    }
-
-    &.iconDrag1 {
-      display: none;
-      margin-left: 8px;
-      color: #9a98eb;
-      font-size: 14px;
-      cursor: grab;
-    }
-  }
-
-  .name {
-    flex: 1;
-    margin-left: 8px;
-    overflow: hidden;
-    color: inherit;
-    font-size: 12px;
-    line-height: 32px;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.app-popper {
-  padding: 10px 0 !important;
-  top: 50px !important;
-  .app-title {
-    font-size: 12px;
-    font-weight: bold;
-    line-height: 19px;
-    height: 19px;
-    padding: 0 10px 2px;
-    .iconClose {
-      position: absolute;
-      top: 10px;
-      right: 8px;
-      color: #d5d6d8;
-      font-weight: normal;
-      cursor: pointer;
-      font-size: 16px;
-      &:hover {
-        color: #3d3ad9;
-      }
-    }
-  }
-}
-
-.icon-mmc-s {
-  margin-right: 10px !important;
-  margin-left: -4px;
-}
-</style>
-
+<template>
+  <div class="layout-aside">
+
+    <img class="logo"
+         :src="logo"
+         alt="">
+
+    <el-popover placement="right"
+                :width="180"
+                trigger="click"
+                :show-arrow="false"
+                :offset="3"
+                popper-class="app-popper"
+                ref="popoverRef">
+      <template #reference>
+        <p>
+          <el-icon class="menu-btn">
+            <component is="el-icon-grid" />
+          </el-icon>
+        </p>
+      </template>
+      <div class="app-content">
+        <div class="app-title">
+          应用中心
+          <el-icon class="iconClose"
+                   @click="closePopover">
+            <el-icon-close />
+          </el-icon>
+        </div>
+        <el-divider style="margin: 5px 0;" />
+        <template v-if="grantedApplications.length > 0">
+          <div class="menu-item"
+               @click="switchMenu(item)"
+               v-for="item in grantedApplications"
+               :key="item.resourceId">
+            <i class="iconfont"
+               :class="item.icon"
+               style="margin-right: 5px;"></i>
+            {{ item.name}}
+          </div>
+        </template>
+
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import logo from '/images/logo.jpg';
+export default {
+  name: 'layoutAside',
+  props: {
+  },
+  data() {
+    return {
+      logo,
+      popVisible: false,
+      grantedApplications: [],
+    };
+  },
+  mounted() {
+    let { grantedApplications } = this.$tool.data.get('userAuthInfo');
+    this.grantedApplications = grantedApplications
+    document.addEventListener('click', this.handleDocumentClick);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
+  },
+  methods: {
+    handleDocumentClick(ev) {
+      let popover = document.getElementById('popover');
+      if (this.popVisible && (ev.target !== popover) && !popover.contains(ev.target)) {
+        this.popVisible = false;
+      }
+    },
+    switchMenu(menuItem) {
+      window.location.href = menuItem.url;
+    },
+    closePopover() {
+      this.$refs.popoverRef.hide(); // 关闭 popover
+    },
+  }
+};
+</script>
+<style lang="scss">
+.layout-aside {
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid var(--el-mask-color-extra-light);
+  .logo {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .menu-btn {
+    font-size: 24px;
+    color: #95989d;
+  }
+  .el-tooltip__trigger {
+    text-align: center;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--el-menu-hover-bg-color);
+      .menu-btn {
+        color: var(--el-menu-active-color);
+      }
+    }
+  }
+
+  .menu-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    width: inherit;
+
+    .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: inherit;
+      height: 50px;
+      cursor: pointer;
+      margin: 0;
+      padding: 0;
+    }
+
+    .fixed-menu-list {
+      flex: 1;
+      width: inherit;
+      height: 100%;
+    }
+    .app-box {
+      width: 50px;
+      height: 50px;
+      color: #95989d;
+    }
+    .app-box:hover {
+      background: #eeeefc;
+      color: #3d3ad9;
+    }
+  }
+
+  .menu-container,
+  .footer {
+    p {
+      width: 50px;
+      height: 50px;
+      margin: auto;
+      line-height: 50px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .iconfont {
+      color: inherit;
+      font-size: 18px;
+      padding: 15px;
+    }
+  }
+
+  .setting {
+    transform: rotate(180deg);
+    cursor: pointer;
+  }
+}
+
+.pop-menu {
+  min-width: 104px;
+  height: fit-content;
+  padding: 10px 0;
+  overflow-y: auto;
+  border: 1px solid #eaeaeb;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(39, 40, 42, 0.15);
+
+  // &.side-popover {
+  //     top: 50px !important;
+  //     left: 50px !important;
+  //     max-height: calc(100vh - 80px);
+  // }
+
+  // &.header-popover {
+  //     top: 35px !important;
+  //     right: 76px !important;
+  //     left: auto !important;
+  //     max-height: calc(100vh - 80px);
+  // }
+}
+
+.menu-item {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  color: #6a6d73;
+  cursor: pointer;
+
+  &.fixed {
+    color: #27282a;
+    font-weight: bold;
+
+    .iconfont {
+      color: #3d3ad9;
+      font-weight: normal;
+    }
+
+    .iconfont.iconMinus-Circle {
+      color: #ccccf5;
+    }
+  }
+
+  &:hover {
+    background: #eeeefc;
+    color: #3d3ad9;
+
+    &.fixed .iconfont.iconFixed {
+      display: none !important;
+    }
+
+    .iconfont {
+      display: block !important;
+
+      color: #3d3ad9;
+    }
+  }
+
+  .iconfont {
+    width: 16px;
+    height: 16px;
+    color: #95989d;
+    line-height: 15px;
+
+    &.iconFixed {
+      display: none;
+      color: #9a98eb;
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    &.iconDrag1 {
+      display: none;
+      margin-left: 8px;
+      color: #9a98eb;
+      font-size: 14px;
+      cursor: grab;
+    }
+  }
+
+  .name {
+    flex: 1;
+    margin-left: 8px;
+    overflow: hidden;
+    color: inherit;
+    font-size: 12px;
+    line-height: 32px;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.app-popper {
+  padding: 10px 0 !important;
+  top: 50px !important;
+  .app-title {
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 19px;
+    height: 19px;
+    padding: 0 10px 2px;
+    .iconClose {
+      position: absolute;
+      top: 10px;
+      right: 8px;
+      color: #d5d6d8;
+      font-weight: normal;
+      cursor: pointer;
+      font-size: 16px;
+      &:hover {
+        color: #3d3ad9;
+      }
+    }
+  }
+}
+
+</style>
+