hbte-saas-ui 0.0.1

package/packages/top-bar/src/main.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="hb-topbar">
+    <div class="hb-topbar__top">
+      <div class="hb-topbar__wrap">
+        <div class="hb-topbar__block">
+          <img
+            :src="userInfo.companyLogo || defaultAvatar.companyLogo"
+            alt=""
+            class="hb-topbar-logo"
+          />
+        </div>
+        <div class="hb-topbar__text">
+          {{ userInfo.companyName || "杭州永谐科技有限公司" }}
+        </div>
+      </div>
+      <div class="hb-topbar__right">
+        <el-dropdown trigger="click" @command="tabMicroApp">
+          <span class="pointer">
+            {{ activeAppLabel }}
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="el-dropdown-choose-system">
+            <el-dropdown-item
+              v-for="item in microApps"
+              :key="item.name"
+              :command="item.path"
+              :disabled="item.disabled"
+            >
+              <div class="wrapper">
+                <i :class="item.icon"></i>{{ item.label }}
+              </div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <div class="hb-topbar-icon">
+          <i
+            v-for="item in activeTools"
+            :key="item.name"
+            :class="item.icon"
+            :title="item.label"
+            class="hb-topbar-icon__item"
+            @click="chooseTool(item)"
+          ></i>
+          <slot name="spTools"></slot>
+          <!-- <el-dropdown trigger="click" @command="chooseRoute()">
+            <i class="el-icon-files hb-topbar-icon__item"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="route in microRoutes"
+                :key="route.fullPath"
+                :command="route.fullPath"
+                :class="[
+                  route.fullPath === $route.fullPath
+                    ? 'hb-topbar-icon--active'
+                    : '',
+                ]"
+              >
+                {{ route.label + route.labelName }}
+              </el-dropdown-item>
+              <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown> -->
+        </div>
+        <el-dropdown trigger="click" @command="userSetting">
+          <span class="pointer">
+            {{ userInfo.name }}<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item
+              class="hb-topbar__right--dropdown-item"
+              v-for="item in activeSettings"
+              :key="item.name"
+              :command="item"
+              >{{ item.label }}</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </el-dropdown>
+        <div class="hb-topbar-avatar">
+          <img :src="userInfo.logo || defaultAvatar.userLogo" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="hb-topbar__bottom">
+      <div
+        class="hb-topbar-routetab"
+        :class="{
+          'hb-topbar-routetab--active': item.active,
+        }"
+        v-for="item in microRoutes"
+        :key="item.fullPath"
+        :title="item.label + item.labelName"
+        @contextmenu.prevent.stop="awakeContextMenu(item, $event)"
+        @click="activeRoute(item)"
+      >
+        <div class="hb-topbar-routetab__line"></div>
+        <i
+          class="icon-i-yiruku home"
+          v-if="item.fullPath === '/micro-platform'"
+        ></i>
+        <div class="hb-topbar-routetab__title">
+          {{ item.label + item.labelName }}
+        </div>
+        <i
+          class="el-icon-close hb-topbar-routetab__close"
+          v-if="item.fullPath !== '/micro-platform'"
+          :class="{
+            active: item.active,
+          }"
+          @click.stop="closeRoute(item)"
+        ></i>
+      </div>
+    </div>
+    <div
+      :style="{ top: currentTop, left: currentLeft, zIndex: 10000 }"
+      class="hb-topbar__event"
+      v-if="contextMenuFlag && contextMenu"
+    >
+      <div
+        class="hb-topbar-routetab__event"
+        v-show="contextMenuRightTab"
+        @click="closeRightTabs"
+      >
+        关闭右侧标签页
+      </div>
+      <div
+        class="hb-topbar-routetab__event"
+        v-show="contextMenuLeftTab"
+        @click="closeLeftTabs"
+      >
+        关闭左侧标签页
+      </div>
+      <div
+        class="hb-topbar-routetab__event"
+        v-show="contextMenuOtherTab"
+        @click="closeOtherTabs"
+      >
+        关闭其他标签页
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters, mapMutations } from "vuex";
+import companyLogo from "../../theme-chalk/images/company-logo--default.png";
+import userlogo from "../../theme-chalk/images/user-logo--default.png";
+
+export default {
+  name: "HbTopBar", // 使用时 <hb-topbar> </hb-topbar>
+  componentName: "HbTopBar", // Vue.use() 的时候传入的名称
+  data() {
+    return {
+      base: this.$router.options.base,
+      rightClickRoute: null,
+      currentTop: "",
+      currentLeft: "",
+      contextMenuFlag: false,
+      defaultAvatar: {
+        userlogo,
+        companyLogo,
+      },
+    };
+  },
+  computed: {
+    ...mapState(["activeApp", "microRoutes", "microApps", "userInfo"]),
+    ...mapGetters(["activeTools", "activeSettings", "activeAppLabel"]),
+    contextMenuRightTab() {
+      let index = this.microRoutes.findIndex(
+        (item) => item === this.rightClickRoute
+      );
+      return index + 1 < this.microRoutes.length;
+    },
+    contextMenuLeftTab() {
+      let index = this.microRoutes.findIndex(
+        (item) => item === this.rightClickRoute
+      );
+      if (this.microRoutes.length <= 2) {
+        return false;
+      } else if (this.rightClickRoute.fullPath === "/micro-platform") {
+        return false;
+      } else if (index === 1) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    contextMenuOtherTab() {
+      if (this.microRoutes.length <= 1) {
+        return false;
+      } else if (
+        this.microRoutes.length === 2 &&
+        this.rightClickRoute.fullPath !== "/micro-platform"
+      ) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    contextMenu() {
+      return (
+        this.contextMenuRightTab ||
+        this.contextMenuLeftTab ||
+        this.contextMenuOtherTab
+      );
+    },
+  },
+  methods: {
+    ...mapMutations(["removeRoutes"]),
+    //切换微应用
+    tabMicroApp(path) {
+      this.$router.push(path);
+      this.$emit("tabMicroApp", path);
+    },
+    //路由选项卡集合下拉选项操作
+    chooseRoute(fullPath) {
+      if (fullPath !== "closeAll") {
+        this.$router.push(fullPath);
+      } else {
+        this.removeRoutes({ type: "all" });
+      }
+    },
+    //点击操作图标抛出事件
+    chooseTool(tool) {
+      window.dispatchEvent(tool.event);
+    },
+    //选择不同的用户相关操作
+    userSetting(setting) {
+      window.dispatchEvent(setting.event);
+    },
+    //唤醒右键菜单
+    awakeContextMenu(route, e) {
+      this.rightClickRoute = route;
+      if (this.contextMenu) {
+        let totalWidth = document.documentElement.clientWidth;
+        document.addEventListener("click", this.closeContestMenu, true);
+        this.currentTop = e.clientY + "px";
+        if (e.clientX + 136 <= totalWidth) {
+          this.currentLeft = e.clientX + "px";
+        } else {
+          this.currentLeft = e.clientX - 126 + "px";
+        }
+        this.contextMenuFlag = true;
+      }
+    },
+    closeContestMenu(e) {
+      this.contextMenuFlag = false;
+      document.removeEventListener("click", this.closeContestMenu, true);
+      e.preventDefault();
+    },
+    //关闭右侧标签页
+    closeRightTabs() {
+      this.removeRoutes({
+        route: this.rightClickRoute,
+        type: "right",
+      });
+    },
+    //关闭左侧标签页
+    closeLeftTabs() {
+      this.removeRoutes({
+        route: this.rightClickRoute,
+        type: "left",
+      });
+    },
+    //关闭其他标签页
+    closeOtherTabs() {
+      this.removeRoutes({
+        route: this.rightClickRoute,
+        type: "other",
+      });
+    },
+    //点击小叉关闭标签页
+    closeRoute(item) {
+      this.removeRoutes({ route: item });
+    },
+    //激活标签页路由
+    activeRoute(item) {
+      !item.active && this.$router.push(item.fullPath);
+    },
+  },
+};
+</script>

package/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

package/vue.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  configureWebpack:{
+    entry:'./examples/main.js'
+  },
+  productionSourceMap: false
+}