simple-frame-unit 1.0.2

package/src/layouts/components/Header.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="headerWrapper">
+    <header ref="header" class="header">
+      <div class="container">
+        <h1 class="header-logo">
+          <router-link to="/">
+            <!-- logo -->
+            <slot>
+              <img alt="ed-logo" class="nav-logo" src="@/assets/images/weplus-logo.png"/>
+            </slot>
+          </router-link>
+        </h1>
+
+        <!-- nav -->
+        <ul class="nav">
+          <li class="nav-item">
+            <router-link active-class="active" to="/ed">{{ langConfig.edbase }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link active-class="active" to="/ef">{{ langConfig.edframe }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link active-class="active" to="/el">{{ langConfig.element }}</router-link>
+          </li>
+        </ul>
+      </div>
+    </header>
+  </div>
+</template>
+<script>
+export default {
+  name: "Header",
+  data() {
+    return {
+      active: '',
+      versions: [],
+      verDropdownVisible: true,
+      langDropdownVisible: true,
+    };
+  },
+  computed: {
+    langConfig() {
+      return {
+        element: "Element UI",
+        edbase: "Ed 基础组件",
+        edframe: "Ed 业务组件",
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.headerWrapper {
+  height: 80px;
+}
+
+
+.header {
+  height: 80px;
+  background-color: #fff;
+  color: #fff;
+  top: 0;
+  left: 0;
+  width: 100%;
+  line-height: 80px;
+  z-index: 100;
+  position: relative;
+
+  .container {
+    height: 100%;
+    box-sizing: border-box;
+    border-bottom: 1px solid #DCDFE6;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header-logo {
+    margin: 0;
+    width: 20vw;
+    font-size: 32px;
+    font-weight: normal;
+
+    a {
+      color: #333;
+      text-decoration: none;
+      display: block;
+    }
+
+    span {
+      font-size: 12px;
+      display: inline-block;
+      width: 34px;
+      height: 18px;
+      border: 1px solid rgba(255, 255, 255, .5);
+      text-align: center;
+      line-height: 18px;
+      vertical-align: middle;
+      margin-left: 10px;
+      border-radius: 3px;
+    }
+  }
+
+  .nav {
+    height: 100%;
+    line-height: 80px;
+    background: transparent;
+    padding: 0 50px;
+    margin: 0;
+
+    &::before, &::after {
+      display: table;
+      content: "";
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  .nav-gap {
+    position: relative;
+    width: 1px;
+    height: 80px;
+    padding: 0 20px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: calc(50% - 8px);
+      width: 1px;
+      height: 16px;
+      background: #ebebeb;
+    }
+  }
+
+  .nav-logo,
+  .nav-logo-small {
+    width: 150px;
+    vertical-align: sub;
+  }
+
+  .nav-logo-small {
+    display: none;
+  }
+
+  .nav-item {
+    margin: 0;
+    float: left;
+    list-style: none;
+    position: relative;
+    cursor: pointer;
+
+    &.nav-algolia-search {
+      cursor: default;
+    }
+
+    &.lang-item,
+    &:last-child {
+      cursor: default;
+
+      span {
+        opacity: .8;
+      }
+
+      .nav-lang {
+        cursor: pointer;
+        display: inline-block;
+        height: 100%;
+        color: #888;
+
+        &:hover {
+          color: #409EFF;
+        }
+
+        &.active {
+          font-weight: bold;
+          color: #409EFF;
+        }
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: #1989FA;
+      opacity: 0.5;
+      display: block;
+      padding: 0 22px;
+
+      &.active,
+      &:hover {
+        opacity: 1;
+      }
+
+      &.active::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        bottom: 0;
+        left: calc(50% - 15px);
+        width: 30px;
+        height: 2px;
+        background: #409EFF;
+      }
+    }
+  }
+}
+
+.nav-dropdown {
+  margin-bottom: 6px;
+  padding-left: 18px;
+  width: 100%;
+
+  span {
+    display: block;
+    width: 100%;
+    font-size: 16px;
+    color: #888;
+    line-height: 40px;
+    transition: .2s;
+    padding-bottom: 6px;
+    user-select: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  i {
+    transition: .2s;
+    font-size: 12px;
+    color: #979797;
+    transform: translateY(-2px);
+  }
+
+  .is-active {
+    span, i {
+      color: #409EFF;
+    }
+
+    i {
+      transform: rotateZ(180deg) translateY(3px);
+    }
+  }
+
+  &:hover {
+    span, i {
+      color: #409EFF;
+    }
+  }
+}
+
+.nav-dropdown-list {
+  width: auto;
+}
+</style>

package/src/layouts/components/Logo.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="layout-logo" :style="{'justify-content': !isCollapse ? 'space-between' : 'center' }">
+    <img v-if="!isCollapse" alt="" class="logo-img" src="@/assets/Vue.png">
+    <div v-if="!isCollapse" class="website-name">{{ title }}</div>
+<!--    <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" style="font-size: 26px; color: rgb(64, 158, 255);"-->
+<!--       @click="handleFold"></i>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Logo",
+  props: {
+    isCollapse: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: "ed-base-vue"
+    }
+  },
+  model: {
+    prop: "isCollapse",
+    event: "input"
+  },
+  methods: {
+    handleFold() {
+      this.$emit('input', !this.isCollapse)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.layout-logo {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #fff;
+  padding: 5px;
+
+  .logo-img {
+    width: 28px;
+  }
+
+  .website-name {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 10px;
+  }
+}
+</style>

package/src/layouts/components/Navbar.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="navbar">
+    <div class="hamburger-container"><i class="el-icon-s-fold"></i></div>
+    <div class="navbar-breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <template v-for="(item, index) in breadcrumb">
+          <el-breadcrumb-item :key="index" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
+        </template>
+      </el-breadcrumb>
+    </div>
+
+    <!--  用户信息  -->
+    <el-popover placement="bottom" popper-class="admin-popover" trigger="click" width="200">
+      <div slot="reference" class="user-info">
+        <el-avatar :src="admin.avatar" size="small"></el-avatar>
+        <div class="user-info--name">{{ admin.userName }}</div>
+      </div>
+
+      <div class="admin-info">
+        <el-avatar :src="admin.avatar" class="admin-info--avatar" size="large"></el-avatar>
+        <div class="admin-info--name">{{ admin.userName }}</div>
+        <div class="admin-info--time">
+          <ed-date :date="admin.loginTime"></ed-date>
+        </div>
+
+
+        <div class="admin-info--btn">
+          <el-button plain size="mini" type="primary">个人资料</el-button>
+          <el-button plain size="mini" type="danger" @click="loginOut">退出登录</el-button>
+        </div>
+      </div>
+    </el-popover>
+
+  </div>
+</template>
+
+<script>
+import {routes} from "@/router"
+
+export default {
+  name: "Navbar",
+  data() {
+    return {
+      breadcrumb: [],
+      admin: {
+        userName: "admin",
+        loginTime: ""
+      }
+    }
+  },
+  watch: {
+    "$route": {
+      deep: true,
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          console.log(newVal)
+          this.breadcrumb = []
+
+          let matched = routes.find(i => i.path === newVal.matched[0].path)
+          console.log(matched)
+
+          if (matched) {
+            this.breadcrumb.push({
+              path: matched.path,
+              title: matched.title
+            })
+
+            matched.children.map(route => {
+              if (newVal.meta.title === route.meta.title) {
+                this.breadcrumb.push({
+                  path: route.path,
+                  title: route.title
+                })
+              }
+            })
+          }
+
+
+        }
+      }
+    }
+  },
+  mounted() {
+    let userInfo = window.localStorage.getItem('FRAME_VUE_USER')
+    this.admin = JSON.parse(userInfo)
+  },
+  methods: {
+    loginOut() {
+      window.localStorage.clear();
+      this.$router.push({path: "/login"})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+
+  .hamburger-container {
+    height: 100%;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color: transparent;
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar-breadcrumb {
+    margin-left: 30px;
+    width: 100%;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 10px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+
+    .user-info--name {
+      padding-left: 6px;
+      white-space: nowrap;
+    }
+
+
+  }
+
+
+}
+
+.admin-popover {
+  .admin-info {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    .admin-info--avatar {
+      margin-bottom: 10px;
+    }
+
+    .admin-info--name {
+      margin-bottom: 10px;
+    }
+
+    .admin-info--time {
+      margin-bottom: 10px;
+    }
+
+    .admin-info--btn {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+</style>

package/src/layouts/components/SideBar.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :style="{width: isCollapse ? 'auto' : '200px'}">
+    <el-scrollbar class="theme-dark" wrap-class="scrollbar-wrapper">
+      <Logo v-model="isCollapse"></Logo>
+
+      <el-menu :collapse="isCollapse"
+               :collapse-transition="false"
+               :default-active="activeMenu"
+               :unique-opened="true"
+               active-text-color="#409EFF"
+               background-color="#304156"
+               class="el-menu-vertical-demo"
+               text-color="#bfcbd9">
+
+        <template v-for="(item, index) in MenuList">
+          <!--  多子级 -->
+          <el-submenu v-if="isSubmenu(item)" :key="'menu'+index" :index="item.path">
+            <template slot="title">
+              <i :class="item.icons"></i>
+              <span>{{ item.title }}</span>
+            </template>
+            <template v-for="(menu, i) in item.children">
+              <router-link v-if="!menu.hidden" :key="i" :to="menu.path">
+                <el-menu-item :index="menu.path">
+                  <i :class="menu.icons"></i>
+                  <span slot="title">{{ menu.title }}</span>
+                </el-menu-item>
+              </router-link>
+            </template>
+          </el-submenu>
+
+          <!--  单子级 -->
+          <template v-if="isOneMenu(item)">
+            <router-link v-for="(menu, i) in item.children" :key="i" :to="menu.path">
+              <el-menu-item :index="menu.path">
+                <i :class="menu.icons"></i>
+                <span>{{ menu.title }}</span>
+              </el-menu-item>
+            </router-link>
+          </template>
+
+          <!--  无子级 -->
+          <router-link v-if="!item.children" :key="'item'+index" :to="item.path">
+            <el-menu-item :index="item.path">
+              <i :class="item.icons"></i>
+              <span slot="title">{{ item.title }}</span>
+            </el-menu-item>
+          </router-link>
+
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import Logo     from "./Logo"
+import {routes} from "@/router/index.js";
+
+export default {
+  name: "SideBar",
+  components: {Logo},
+  props: {
+    data: Array,
+    base: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    MenuList() {
+      return routes.filter(i => !i.hidden)
+    },
+    activeMenu() {
+      const {path} = this.$route;
+      return path;
+    },
+    isSubmenu() {
+      return (item) => {
+        return item.children && item.children.length > 1
+      }
+    },
+    isOneMenu() {
+      return (item) => {
+        return item.children && item.children.length === 1
+      }
+    }
+  },
+  data() {
+    return {
+      isCollapse: false
+    };
+  },
+};
+</script>
+<style lang="scss">
+.theme-dark {
+  .el-menu-vertical-demo {
+    color: rgb(191, 203, 217);
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/src/layouts/components/index.js

@@ -0,0 +1,5 @@
+export {default as AppMain} from "./AppMain"
+export {default as SideBar}  from "./SideBar"
+export {default as Header}  from "./Header"
+export {default as Logo}  from "./Logo"
+export {default as Navbar}  from "./Navbar"

package/src/layouts/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ed-app">
+    <!--  菜单栏  -->
+    <div class="ed-app-left">
+      <SideBar :data="routes"></SideBar>
+    </div>
+    <!--  内容层  -->
+    <el-scrollbar class="ed-app--right">
+      <Navbar></Navbar>
+
+      <div class="ed-app--right-main">
+        <AppMain></AppMain>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+
+import {AppMain, Navbar, SideBar} from "./components"
+import {routes}                   from "@/router/index.js";
+
+export default {
+  name: "index",
+  components: {AppMain, SideBar, Navbar},
+  data() {
+    return {
+      routes
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="scss">
+.ed-app {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  .ed-app-left {
+    height: 100vh;
+    background: #304156 !important;
+    padding: 0;
+    border: none !important;
+  }
+
+  .ed-app--right {
+    height: 100vh;
+    width: 100%;
+
+    .ed-app--right-main {
+      padding: 10px 10px 0 10px;
+    }
+  }
+}
+
+
+</style>

package/src/main.js

@@ -0,0 +1,42 @@
+import Vue             from 'vue'
+import App             from './App.vue'
+import router          from "./router";
+import request         from './request'
+import {getBaseHeader} from "./request/request";
+
+Vue.prototype.$axios = request
+
+import ElementUI  from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+
+// ed-base-vue
+// import EdBaseVue from 'ed-base-vue'
+import EdBaseVue  from '@/components/ed-base-vue'
+import "@/components/ed-base-vue/style/index.scss"
+// ed-frame-vue
+import EdFrameVue from '../lib/index'
+
+// 组件
+import './assets/styles/common.scss';
+import './assets/styles/ele-docs.css';
+import './assets/styles/higtlightEle.css';
+
+import Popups from "@/components/Popups"
+
+Vue.config.productionTip = false
+
+
+Vue.use(Popups)
+Vue.use(ElementUI)
+Vue.use(EdBaseVue)
+Vue.use(EdFrameVue, {
+    request: request.requestAxios,
+    BASE_API: process.env.VUE_APP_BASE_API,
+    BASE_HEADERS: getBaseHeader,
+    FILE_PREVIEW_URL: process.env.VUE_APP_FILE_PREVIEW_URL
+})
+new Vue({
+    router,
+    render: h => h(App),
+}).$mount('#app')

package/src/request/config.js

@@ -0,0 +1,6 @@
+export default {
+    TITLE: '微流水分析系统',
+    BASE_API: 'https://eddev.myweplus.com/api/',
+    FILE_PREVIEW_URL: 'http://47.108.166.206:8012/onlinePreview?url=',
+    captchaVerification: "p5zlOVXZYfgh22bcDRkMqILwTKSg7IiMiQN2h9um7jfGXe5Vo/QrvcVsBCB5rg8DAFMQJTtIzZlDCtyWHjR7jg==",
+}