ylyx-cli 1.0.0

package/templates/vue-app/files/src/layout/components/TagsView/ScrollPane.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-scrollbar
+    ref="scrollContainer"
+    :vertical="false"
+    class="scroll-container"
+    @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4; // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0,
+    };
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap;
+    },
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40;
+      const $scrollWrapper = this.scrollWrapper;
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el;
+      const $containerWidth = $container.offsetWidth;
+      const $scrollWrapper = this.scrollWrapper;
+      const tagList = this.$parent.$refs.tag;
+
+      let firstTag = null;
+      let lastTag = null;
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0];
+        lastTag = tagList[tagList.length - 1];
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0;
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag);
+        const prevTag = tagList[currentIndex - 1];
+        const nextTag = tagList[currentIndex + 1];
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft =
+          nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing;
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  ::v-deep {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/layout/components/TagsView/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag) ? 'active' : ''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="closeSelectedTag(tag)"
+        @contextmenu.prevent.native="openMenu(tag, $event)">
+        {{ tag.title }}
+        <span
+          v-if="!tag.meta.affix"
+          class="el-icon-close"
+          @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
+      <li
+        v-if="!(selectedTag.meta && selectedTag.meta.affix)"
+        @click="closeSelectedTag(selectedTag)">
+        关闭
+      </li>
+      <li @click="closeOthersTags">关闭其他</li>
+      <li @click="closeAllTags(selectedTag)">关闭全部</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import ScrollPane from './ScrollPane';
+import path from 'path';
+
+export default {
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: [],
+    };
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.state.tagsView.visitedViews;
+    },
+    routes() {
+      return this.$store.state.permission.routers;
+    },
+  },
+  watch: {
+    $route() {
+      this.addTags();
+      this.moveToCurrentTag();
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu);
+      } else {
+        document.body.removeEventListener('click', this.closeMenu);
+      }
+    },
+  },
+  mounted() {
+    // this.visitedViews.forEach((item,index)=>{
+    //  if(item.fullPath === '/dashboard') this.visitedViews.splice(index,1)
+    // })
+    this.initTags();
+    this.addTags();
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path;
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = [];
+      routes = routes || [];
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path);
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta },
+          });
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path);
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags];
+          }
+        }
+      });
+      return tags;
+    },
+    initTags() {
+      const affixTags = (this.affixTags = this.filterAffixTags(this.routes));
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('tagsView/addVisitedView', tag);
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route;
+      if (name) {
+        this.$store.dispatch('tagsView/addView', this.$route);
+      }
+      return false;
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag;
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag);
+            // when query is different then update
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.dispatch('tagsView/updateVisitedView', this.$route);
+            }
+            break;
+          }
+        }
+      });
+    },
+    refreshSelectedTag(view) {
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        const { fullPath } = view;
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath,
+          });
+        });
+      });
+    },
+    closeSelectedTag(view) {
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view);
+        }
+      });
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag);
+      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
+        this.moveToCurrentTag();
+      });
+    },
+    closeAllTags(view) {
+      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return;
+        }
+        this.toLastView(visitedViews, view);
+      });
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0];
+      if (latestView) {
+        this.$router.push(latestView);
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        //去掉首页
+        // if (view.name === 'Dashboard') {
+        //   // to reload home page
+        //   this.$router.replace({ path: '/redirect' + view.fullPath })
+        // } else {
+        //   this.$router.push('/')
+        // }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105;
+      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
+      const offsetWidth = this.$el.offsetWidth; // container width
+      const maxLeft = offsetWidth - menuMinWidth; // left boundary
+      const left = e.clientX - offsetLeft + 15; // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft;
+      } else {
+        this.left = left;
+      }
+
+      this.top = e.clientY;
+      this.visible = true;
+      this.selectedTag = tag;
+    },
+    closeMenu() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  height: 34px;
+  width: 100%;
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 0 3px 0 rgba(0, 0, 0, 0.04);
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      &:last-of-type {
+        margin-right: 15px;
+      }
+      &.active {
+        background-color: #42b983;
+        color: #fff;
+        border-color: #42b983;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(0.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/layout/components/index.js

@@ -0,0 +1,5 @@
+export { default as AppMain } from './AppMain';
+export { default as Navbar } from './Navbar';
+export { default as Settings } from './Settings';
+export { default as Sidebar } from './Sidebar/index.vue';
+export { default as TagsView } from './TagsView/index.vue';

package/templates/vue-app/files/src/layout/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main />
+      <right-panel v-if="showSettings">
+        <settings />
+      </right-panel>
+    </div>
+    <!--  防止刷新后主题丢失  -->
+    <Theme v-show="false" ref="theme" />
+  </div>
+</template>
+
+<script>
+import RightPanel from '@/components/RightPanel';
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components';
+import ResizeMixin from './mixin/ResizeHandler';
+import { mapState } from 'vuex';
+import Theme from '@/components/ThemePicker';
+import Cookies from 'js-cookie';
+export default {
+  name: 'Layout',
+  components: {
+    AppMain,
+    Navbar,
+    RightPanel,
+    Settings,
+    Sidebar,
+    TagsView,
+    Theme,
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader,
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile',
+      };
+    },
+  },
+  mounted() {
+    if (Cookies.get('theme')) {
+      this.$refs.theme.theme = Cookies.get('theme');
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: Cookies.get('theme'),
+      });
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/mixin.scss';
+@import '~@/assets/styles/variables.scss';
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+  padding: 0;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>

package/templates/vue-app/files/src/layout/mixin/ResizeHandler.js

@@ -0,0 +1,45 @@
+import store from '@/store';
+
+const { body } = document;
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false });
+      }
+    },
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.$_resizeHandler);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$_resizeHandler);
+  },
+  mounted() {
+    const isMobile = this.$_isMobile();
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile');
+      store.dispatch('app/closeSideBar', { withoutAnimation: true });
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile() {
+      const rect = body.getBoundingClientRect();
+      return rect.width - 1 < WIDTH;
+    },
+    $_resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile();
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop');
+
+        if (isMobile) {
+          store.dispatch('app/closeSideBar', { withoutAnimation: true });
+        }
+      }
+    },
+  },
+};

package/templates/vue-app/files/src/main.js

@@ -0,0 +1,89 @@
+import Vue from 'vue';
+
+import axios from 'axios';
+
+import Cookies from 'js-cookie';
+
+import 'normalize.css/normalize.css';
+
+import Element from 'element-ui';
+//
+import mavonEditor from 'mavon-editor';
+import 'mavon-editor/dist/css/index.css';
+
+// 数据字典
+import dict from './components/Dict';
+
+// 权限指令
+import checkPer from '@/utils/permission';
+import permission from './components/Permission';
+import './assets/styles/element-variables.scss';
+// global css
+import './assets/styles/index.scss';
+import './assets/styles/global.scss';
+// 代码高亮
+import VueHighlightJS from 'vue-highlightjs';
+import 'highlight.js/styles/atom-one-dark.css';
+
+import App from './App';
+import store from './store';
+import router from './router/routers';
+
+import './assets/css/font-awesome.min.css';
+import './assets/icons'; // icon
+import './router/index'; // permission control
+import 'echarts-gl';
+
+import dataV from '@jiaminghi/data-view';
+// eLement-ui-table- 新件，容列露自适应
+import AFTableColumn from 'af-table-column';
+
+Vue.use(dataV);
+
+import 'default-passive-events';
+// import * as Echarts5 from 'echarts5'
+// Vue.prototype.$Echarts5 = Echarts5
+
+// import echarts from 'echarts'
+// Vue.prototype.$echarts = echarts
+
+// 自适应适配flex
+// import "@/common/flexible.js";
+
+Vue.use(checkPer);
+Vue.use(VueHighlightJS);
+Vue.use(mavonEditor);
+Vue.use(permission);
+Vue.use(dict);
+Vue.use(AFTableColumn);
+
+Vue.prototype.$axios = axios;
+// 弹窗取消点击空白关闭
+Element.Dialog.props.closeOnClickModal.default = false;
+// 下拉框添加搜索
+Element.Select.props.filterable = {
+  type: Boolean,
+  default: true,
+};
+// 下拉框添加清除
+Element.Select.props.clearable = {
+  type: Boolean,
+  default: true,
+};
+// 搜索框添加清除
+Element.Input.props.clearable = {
+  type: Boolean,
+  default: true,
+};
+Vue.use(Element, {
+  size: Cookies.get('size') || 'small', // set element-ui default size
+});
+
+Vue.config.productionTip = false;
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App),
+});