ylyx-cli 1.0.0

package/templates/vue-app/files/src/layout/components/Navbar.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="navbar">
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar" />
+
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+
+    <div class="right-menu">
+      <template v-if="device !== 'mobile'">
+        <search id="header-search" class="right-menu-item" />
+
+        <!-- <el-tooltip content="项目文档" effect="dark" placement="bottom">
+          <Doc class="right-menu-item hover-effect" />
+        </el-tooltip> -->
+
+        <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
+          <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip content="布局设置" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+      </template>
+
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+        <div class="avatar-wrapper">
+          <span style="font-size: 16px">{{ user.name }}</span>
+          <!-- <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> -->
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <span style="display: block" @click="show = true">
+            <el-dropdown-item> 布局设置 </el-dropdown-item>
+          </span>
+          <!-- <router-link to="/user/center"> -->
+          <!-- :href="VUE_APP_SYSLOGIN_URL" -->
+          <span @click="open(0)">
+            <el-dropdown-item>
+              <!-- 个人中心 -->
+              重选系统
+            </el-dropdown-item>
+          </span>
+          <span style="display: block" @click="open(1)">
+            <el-dropdown-item> 退出登录 </el-dropdown-item>
+          </span>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Breadcrumb from '@/components/Breadcrumb';
+import Hamburger from '@/components/Hamburger';
+import Doc from '@/components/Doc';
+import Screenfull from '@/components/Screenfull';
+import SizeSelect from '@/components/SizeSelect';
+import Search from '@/components/HeaderSearch';
+import Avatar from '@/assets/images/avatar.png';
+import Cookies from 'js-cookie';
+const { VUE_APP_LOGIN_URL, VUE_APP_SYSLOGIN_URL } = window.config;
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger,
+    Screenfull,
+    SizeSelect,
+    Search,
+    Doc,
+  },
+  data() {
+    return {
+      Avatar: Avatar,
+      dialogVisible: false,
+      VUE_APP_SYSLOGIN_URL: VUE_APP_SYSLOGIN_URL,
+    };
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'device', 'user', 'baseApi']),
+    show: {
+      get() {
+        return this.$store.state.settings.showSettings;
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val,
+        });
+      },
+    },
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar');
+    },
+    open(statu) {
+      if (statu == '0') {
+        Cookies.remove('homePageDefault');
+        window.location.href = VUE_APP_SYSLOGIN_URL;
+      } else {
+        this.$confirm('确定注销并退出系统吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }).then(() => {
+          this.logout();
+          // console.log('退出登录')
+        });
+      }
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        // location.reload()
+        // this.$router.push('/login')
+        Cookies.remove('homePageDefault');
+        window.location.href = VUE_APP_LOGIN_URL;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 17px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">系统布局设置</h3>
+
+      <div class="drawer-item">
+        <span>主题颜色</span>
+        <theme-picker
+          style="float: right; height: 26px; margin: -3px 8px 0 0"
+          @change="themeChange" />
+      </div>
+
+      <div class="drawer-item">
+        <span>显示标签</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>固定头部</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>显示LOGO</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>菜单UniqueOpened</span>
+        <el-switch v-model="uniqueOpened" class="drawer-switch" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemePicker from '@/components/ThemePicker';
+
+export default {
+  components: { ThemePicker },
+  data() {
+    return {};
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader;
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val,
+        });
+      },
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView;
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: val,
+        });
+      },
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo;
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val,
+        });
+      },
+    },
+    uniqueOpened: {
+      get() {
+        return this.$store.state.settings.uniqueOpened;
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'uniqueOpened',
+          value: val,
+        });
+      },
+    },
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right;
+  }
+}
+</style>

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

@@ -0,0 +1,26 @@
+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device;
+    },
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS();
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu;
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave;
+        $subMenu.handleMouseleave = e => {
+          if (this.device === 'mobile') {
+            return;
+          }
+          handleMouseleave(e);
+        };
+      }
+    },
+  },
+};

package/templates/vue-app/files/src/layout/components/Sidebar/Item.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  render(h, context) {
+    const { icon, title } = context.props;
+    const vnodes = [];
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon} />);
+    }
+
+    if (title) {
+      vnodes.push(<span slot="title">{title}</span>);
+    }
+    return vnodes;
+  },
+};
+</script>

package/templates/vue-app/files/src/layout/components/Sidebar/Link.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate';
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    linkProps(url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener',
+        };
+      }
+      return {
+        is: 'router-link',
+        to: url,
+      };
+    },
+  },
+};
+</script>

package/templates/vue-app/files/src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title">{{ title }}</h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title">{{ title }}</h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Logo from '@/assets/images/logo.png';
+let PUBLIC_URL = process.env['VUE_APP_PUBLIC_URL']; // 项目名
+const { VUE_PROJECT_TITLE } = window.config;
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      // PUBLIC_URL == "/IUCOST/" ? "费用结算系统" :
+      title: VUE_PROJECT_TITLE,
+      logo: Logo,
+    };
+  },
+  created() {
+    // this.title
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 6px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 15px;
+      font-family:
+        Avenir,
+        Helvetica Neue,
+        Arial,
+        Helvetica,
+        sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="!item.hidden" class="menu-wrapper">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.alwaysShow
+      ">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }">
+          <item
+            :icon="!item.meta ? onlyOneChild.meta.icon || (item.meta && item.meta.icon) : ''"
+            :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu" />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import path from 'path';
+import { isExternal } from '@/utils/validate';
+import Item from './Item';
+import AppLink from './Link';
+import FixiOSBug from './FixiOSBug';
+
+export default {
+  name: 'SidebarItem',
+  components: { Item, AppLink },
+  mixins: [FixiOSBug],
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true,
+    },
+    isNest: {
+      type: Boolean,
+      default: false,
+    },
+    basePath: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null;
+    return {};
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false;
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item;
+          return true;
+        }
+      });
+      // When there is only one child router, the child router is displayed by default
+      // 当只有一个子路由时，显示子路由
+      if (showingChildren.length === 1) {
+        return true;
+      }
+
+      // Show parent if there are no child router to display
+      // 如果没有要显示的子路由，则显示 parent
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true };
+        return true;
+      }
+
+      return false;
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath;
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath;
+      }
+      return path.resolve(this.basePath, routePath);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <div :class="{ 'has-logo': showLogo }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :unique-opened="$store.state.settings.uniqueOpened"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical">
+        <sidebar-item
+          v-for="route in sidebarOpen"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Logo from './Logo';
+import SidebarItem from './SidebarItem';
+import variables from '@/assets/styles/variables.scss';
+
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters(['sidebarRouters', 'sidebar']),
+    // routes() {
+    //   // return this.$router.options.routes
+    //   console.log(this.$store.getters.menusRoutes, 'this.$store.getters.menusRoutes')
+    //   return this.$store.getters.menusRoutes
+    // },
+    activeMenu() {
+      const route = this.$route;
+      const { meta, path } = route;
+      // 如果设置路径，侧边栏将突出显示您设置的路径
+      // console.log(this.$route.meta)
+      // if (meta.activeMenu) {
+      //   return meta.activeMenu
+      // }
+
+      // return path
+      return meta.guidePath ? meta.jumpPath : path;
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo;
+    },
+    variables() {
+      return variables;
+    },
+    isCollapse() {
+      return !this.sidebar.opened;
+    },
+  },
+  data() {
+    return {
+      sidebarOpen: [],
+    };
+  },
+  created() {
+    // let obj = {};
+    // if(location.hostname == 'localhost'){
+    //   this.sidebarOpen = this.sidebarRouters.reduce((cur,next) => {
+    //     obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
+    //     return cur;
+    //   },[]) //设置cur默认类型为数组，并且初始值为空的数组
+    // }else{
+    this.sidebarOpen = this.sidebarRouters;
+    // }
+    // console.log('this.sidebarOpen', this.sidebarOpen);
+  },
+};
+</script>