@v2coding/ui 0.1.0

package/src/components/head-menu/menu-item.vue

@@ -0,0 +1,84 @@
+<script type="text/jsx">
+  export default {
+    name: 'head-menu-submenu',
+    inject: ['headMenu'],
+    props: {
+      item: Object,
+    },
+    computed: {
+      isLeaf() {
+        const {children} = this.item;
+        return !Array.isArray(children) || children.length <= 0;
+      },
+      index() {
+        const {url, id} = this.item;
+        if (this.isRouter) {
+          return url || id + '';
+        }
+        return id + '';
+      },
+      route() {
+        const {url} = this.item;
+        return url;
+      },
+      isRouter() {
+        return this.headMenu.router;
+      },
+      theme() {
+        return this.headMenu.theme;
+      },
+      popperClass() {
+        return ['nav-menu-submenu-popup', this.theme].join(' ');
+      },
+    },
+    render() {
+      if (this.isLeaf) {
+        return (
+          <el-menu-item index={this.index} route={this.route}>
+            <template slot="title">{this.item.name}</template>
+          </el-menu-item>
+        );
+      }
+      return (
+        <el-submenu index={this.index} popperClass={this.popperClass} popper-append-to-body={false}>
+          <template slot="title">{this.item.name}</template>
+          {this.item.children.map(child => <head-menu-submenu key={child.id} item={child}/>)}
+        </el-submenu>
+      );
+    },
+  };
+</script>
+<style lang="less">
+  .el-menu--collapse .el-menu-item [class^=el-icon-],
+  .el-menu--collapse .el-submenu .el-submenu__title [class^=el-icon-] {
+    margin: 0;
+    vertical-align: middle;
+    width: 24px;
+    text-align: center
+  }
+
+  .el-menu--collapse .el-menu-item .el-submenu__icon-arrow,
+  .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
+    display: none
+  }
+
+  .el-menu--collapse .el-menu-item span,
+  .el-menu--collapse .el-submenu .el-submenu__title span {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    visibility: hidden;
+    display: inline-block
+  }
+
+  .nav-menu-submenu-popup {
+
+    .el-menu-item,
+    .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+    }
+  }
+
+</style>

package/src/components/history/index.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="history" v-show="visible">
+    <scroll-nav ref="menus" class="history-tabs">
+      <div
+        v-for="item in items"
+        :key="item.path"
+        :class="['history-menu', current === item.path ? 'is-active' : '']"
+        @click="onTabClick(item.path)"
+      >
+        <span class="ellipsis" :title="item.title">{{ item.title }}</span>
+        <i class="el-icon-close" @click.stop="onTabRemove(item.path)"></i>
+      </div>
+    </scroll-nav>
+    <div class="contextmenu" :style="contextmenu">
+      <div
+        class="modal"
+        ref="modal"
+        :style="{ display: activeContextMenu ? 'block' : 'none' }"
+        @click="hideContextMenu"
+      ></div>
+      <el-dropdown
+        @command="contextmenuClose"
+        trigger="click"
+        ref="context"
+        placement="top-start"
+        class="history-dropdown"
+      >
+        <span></span>
+        <el-dropdown-menu
+          class="history-contextmenu"
+          slot="dropdown"
+          :visible-arrow="false"
+        >
+          <el-dropdown-item command="left">
+            <i class="el-icon-arrow-left"></i>
+            关闭左侧
+          </el-dropdown-item>
+          <el-dropdown-item command="right">
+            <i class="el-icon-arrow-right"></i>
+            关闭右侧
+          </el-dropdown-item>
+          <el-dropdown-item command="other">
+            <i class="el-icon-close"></i>
+            关闭其它
+          </el-dropdown-item>
+          <el-dropdown-item command="all">
+            <i class="el-icon-circle-close"></i>
+            全部关闭
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "History",
+  props: {
+    items: Array,
+    current: null,
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      activeContextMenu: "",
+      contextmenu: {
+        width: "0px",
+        left: "0px",
+      },
+    };
+  },
+  watch: {
+    async current() {
+      if (!this.$refs.menus) {
+        return;
+      }
+      await this.$nextTick();
+      await this.$refs.menus.$nextTick();
+      this.$refs.menus.scrollToActiveItem();
+    },
+  },
+  mounted() {
+    document.addEventListener("contextmenu", this.onContextMenu);
+  },
+  beforeDestroy() {
+    document.removeEventListener("contextmenu", this.onContextMenu);
+  },
+  methods: {
+    showContextMenu() {
+      setTimeout(() => {
+        this.$refs.context.broadcast("ElDropdownMenu", "visible", true);
+      });
+    },
+    hideContextMenu() {
+      this.$refs.context.broadcast("ElDropdownMenu", "visible", false);
+      this.activeContextMenu = "";
+    },
+    onTabClick(path) {
+      this.$router.push({ path });
+    },
+    onTabRemove(path) {
+      this.$emit("remove-history", { type: "current", name: path });
+    },
+    onContextMenu(event) {
+      const container = this.$el.querySelector(".scroll-nav__nav");
+      const index = this.getChildContainIndex(container, event.target);
+      const rect = this.$el.getBoundingClientRect();
+      if (index !== -1) {
+        this.activeContextMenu = this.items[index]?.path;
+        this.contextmenu.left = `${event.clientX - rect.left}px`;
+        this.contextmenu.top = `${event.clientY - rect.top}px`;
+        this.showContextMenu();
+        event.preventDefault();
+        return false;
+      }
+      const modal = this.$el.querySelector(".modal");
+      if (event.target === modal) {
+        event.preventDefault();
+        return false;
+      }
+      return true;
+    },
+    contextmenuClose(command) {
+      this.$emit("remove-history", {
+        type: command,
+        name: this.activeContextMenu,
+      });
+      this.hideContextMenu();
+    },
+    getChildContainIndex(container, target) {
+      return Array.from(container.childNodes).findIndex((child) => {
+        return this.isContains(child, target);
+      });
+    },
+    isContains(container, target) {
+      if (container === target) {
+        return true;
+      }
+      const fn = (childNodes, _target) => {
+        return Array.from(childNodes).find((item) => {
+          const isEq = item === _target;
+          if (isEq) {
+            return true;
+          }
+          if (!item.childNodes.length) {
+            return false;
+          }
+          return fn(item.childNodes, _target);
+        });
+      };
+      return fn(container.childNodes, target);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/style/var";
+
+.history {
+  flex: none;
+  height: 40px;
+  position: relative;
+  margin: 10px 0 0;
+
+  .history-tabs.scroll-nav__nav-wrap {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    align-items: flex-end;
+
+    .scroll-nav__nav-scroll {
+      flex: 1;
+    }
+
+    .scroll-nav__nav-control {
+      width: 20px;
+      height: 30px;
+
+      &.is-disabled {
+        .menu-nav-control {
+          &::before,
+          &::after {
+            background: var(--color-primary-light-3);
+          }
+        }
+      }
+    }
+
+    .scroll-nav__nav {
+      align-items: flex-end;
+    }
+
+    .menu-nav-control {
+      height: 30px;
+
+      &::before,
+      &::after {
+        width: 3px;
+        height: 12px;
+        background: var(--color-primary-light-6);
+      }
+
+      &::before {
+        bottom: -2px;
+      }
+
+      &::after {
+        top: -2px;
+      }
+    }
+  }
+
+  .contextmenu {
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 99;
+    }
+  }
+
+  .history-menu {
+    height: 30px;
+    color: #fff;
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    background: rgba(83,109,139,.6);
+    border-radius: 5px 5px 0 0;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+    background: var(--color-primary-light-9);
+
+    & + .history-menu {
+      border-left: 1px solid var(--color-darken-primary-2);
+    }
+
+    &.is-active {
+      height: 40px;
+      color: #ffffff;
+      background: var(--color-darken-primary-2);
+      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.95);
+      box-shadow: 7px 5px 5px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+    }
+
+    &:hover {
+      i {
+        opacity: 1;
+      }
+    }
+
+    > span {
+      flex: 1;
+      padding: 0 25px;
+    }
+
+    > i {
+      position: absolute;
+      top: 2px;
+      right: 3px;
+      opacity: 0.3;
+      width: 14px;
+      height: 14px;
+      font-size: 12px;
+      border-radius: 50%;
+      transition: opacity 0.3s ease-in-out;
+
+      &:hover {
+        background-color: var(--color-primary);
+      }
+    }
+  }
+
+  .el-tabs {
+    background: transparent;
+
+    > .el-tabs__header {
+      background: transparent;
+      border-bottom: none;
+
+      .el-tabs__nav {
+        border: none;
+      }
+
+      .el-tabs__nav-wrap::after {
+        content: unset;
+      }
+    }
+
+    > .el-tabs__content {
+      padding: 0;
+    }
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      color: #536d8b;
+      width: 20px;
+      line-height: 39px;
+      text-align: center;
+      font-size: 18px;
+    }
+
+    .el-tabs__nav-prev {
+      border-right: 1px solid #ddd;
+    }
+
+    .el-tabs__nav-next {
+      border-left: 1px solid #ddd;
+    }
+
+    .el-tabs__item {
+      margin: 8px;
+      border: none;
+      height: 34px;
+      line-height: 34px;
+      background: #2e557e;
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+      color: #fff;
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  .history-tab-title {
+    width: 6em;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.history-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.history-contextmenu.el-popper {
+  margin-top: 0;
+}
+</style>

package/src/components/icon/icon.vue

@@ -0,0 +1,63 @@
+<template>
+  <svg :class="['ui-icon', 'ui-icon-' + realName]" aria-hidden="true">
+    <use :xlink:href="`#icon-${realName}`"/>
+  </svg>
+</template>
+
+<script>
+import Iconfont from '../../config/config.iconfont';
+
+export default {
+  name: 'ui-icon',
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      icons: [],
+    };
+  },
+  computed: {
+    realName({name, icons}) {
+      const isIncludes = icons.includes(name);
+      if (isIncludes) {
+        return name;
+      }
+      return 'unknown';
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      this.icons = await Iconfont.getIcons();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ui-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.ui-icon.ui-icon-loading {
+  animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg)
+  }
+
+  to {
+    transform: rotate(1turn)
+  }
+}
+</style>