vue2-client 0.1.1 → 1.2.0

package/src/components/index.js

@@ -0,0 +1,36 @@
+// chart
+import Bar from '@vue2-client/components/Charts/Bar'
+import ChartCard from '@vue2-client/components/Charts/ChartCard'
+import Liquid from '@vue2-client/components/Charts/Liquid'
+import MiniArea from '@vue2-client/components/Charts/MiniArea'
+import MiniSmoothArea from '@vue2-client/components/Charts/MiniSmoothArea'
+import MiniBar from '@vue2-client/components/Charts/MiniBar'
+import MiniProgress from '@vue2-client/components/Charts/MiniProgress'
+import Radar from '@vue2-client/components/Charts/Radar'
+import RankList from '@vue2-client/components/Charts/RankList'
+import TransferBar from '@vue2-client/components/Charts/TransferBar'
+import TagCloud from '@vue2-client/components/Charts/TagCloud'
+
+// pro components
+import Ellipsis from '@vue2-client/components/Ellipsis'
+import NumberInfo from '@vue2-client/components/NumberInfo'
+import STable from '@vue2-client/components/STable'
+import Trend from '@vue2-client/components/Trend'
+
+export {
+  Bar,
+  ChartCard,
+  Liquid,
+  MiniArea,
+  MiniSmoothArea,
+  MiniBar,
+  MiniProgress,
+  Radar,
+  TagCloud,
+  RankList,
+  TransferBar,
+  Ellipsis,
+  NumberInfo,
+  STable,
+  Trend
+}

package/src/components/index.less

@@ -0,0 +1,6 @@
+@import "~ant-design-vue/lib/style/index";
+
+// The prefix to use on all css classes from ant-pro.
+@ant-pro-prefix             : ant-pro;
+@ant-global-sider-zindex    : 106;
+@ant-global-header-zindex   : 105;

package/src/components/input/IInput.vue

@@ -0,0 +1,66 @@
+<template>
+  <a-input
+    :addon-after="addonAfter"
+    :addon-before="addonBefore"
+    :default-value="defaultValue"
+    :disabled="disabled"
+    :id="id"
+    :max-length="maxLength"
+    :prefix="prefix"
+    :size="size"
+    :suffix="suffix || lenSuffix"
+    :type="type"
+    :allow-clear="allowClear"
+    v-model="sValue"
+    :value="value"
+    @change="onChange"
+    @input="onInput"
+    @pressEnter="onPressEnter"
+    @keydown="onKeydown"
+  >
+    <template :slot="slot" v-for="slot in Object.keys($slots)">
+      <slot :name="slot"></slot>
+    </template>
+  </a-input>
+</template>
+
+<script>
+  export default {
+    name: 'IInput',
+    model: {
+      prop: 'value',
+      event: 'change.value'
+    },
+    props: ['addonAfter', 'addonBefore', 'defaultValue', 'disabled', 'id', 'maxLength', 'prefix', 'size', 'suffix', 'type', 'value', 'allowClear'],
+    data () {
+      return {
+        sValue: this.value || this.defaultValue || ''
+      }
+    },
+    watch: {
+      value (val) {
+        this.sValue = val
+      }
+    },
+    computed: {
+      lenSuffix () {
+        return this.maxLength && `${(this.sValue + '').length}/${this.maxLength}`
+      }
+    },
+    methods: {
+      onChange (e) {
+        this.$emit('change', e)
+        this.$emit('change.value', e.target.value)
+      },
+      onInput (e) {
+        this.$emit('input', e)
+      },
+      onPressEnter (e) {
+        this.$emit('pressEnter', e)
+      },
+      onKeydown (e) {
+        this.$emit('keydown', e)
+      }
+    }
+  }
+</script>

package/src/components/menu/Contextmenu.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-menu
+    v-show="visible"
+    class="contextmenu"
+    :style="style"
+    :selectedKeys="selectedKeys"
+    @click="handleClick"
+  >
+    <a-menu-item :key="item.key" v-for="item in itemList">
+      <a-icon v-if="item.icon" :type="item.icon" />
+      <span>{{ item.text }}</span>
+    </a-menu-item>
+  </a-menu>
+</template>
+
+<script>
+export default {
+  name: 'Contextmenu',
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    itemList: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      left: 0,
+      top: 0,
+      target: null,
+      meta: null,
+      selectedKeys: []
+    }
+  },
+  computed: {
+    style () {
+      return {
+        left: this.left + 'px',
+        top: this.top + 'px'
+      }
+    }
+  },
+  created () {
+    window.addEventListener('click', this.closeMenu)
+    window.addEventListener('contextmenu', this.setPosition)
+  },
+  beforeDestroy () {
+    window.removeEventListener('click', this.closeMenu)
+    window.removeEventListener('contextmenu', this.setPosition)
+  },
+  methods: {
+    closeMenu () {
+      this.$emit('update:visible', false)
+    },
+    setPosition (e) {
+      this.left = e.clientX
+      this.top = e.clientY
+      this.target = e.target
+      this.meta = e.meta
+    },
+    handleClick ({ key }) {
+      this.$emit('select', key, this.target, this.meta)
+      this.closeMenu()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .contextmenu{
+    position: fixed;
+    z-index: 1000;
+    border-radius: 4px;
+    box-shadow: -4px 4px 16px 1px @shadow-color !important;
+  }
+  .ant-menu-item {
+    margin: 0 !important // 菜单项之间的缝隙会影响点击
+  }
+</style>

package/src/components/menu/SideMenu.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-layout-sider
+    :theme="sideTheme"
+    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
+    width="256px"
+    :collapsible="collapsible"
+    v-model="collapsed"
+    :trigger="null">
+    <div :class="['logo', theme]">
+      <router-link to="/dashboard/workplace">
+        <img src="@/assets/img/logo.png">
+        <h1 style="font-weight: bold">{{ systemName }}</h1>
+      </router-link>
+    </div>
+    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
+  </a-layout-sider>
+</template>
+
+<script>
+import IMenu from './menu'
+import { mapState } from 'vuex'
+export default {
+  name: 'SideMenu',
+  components: { IMenu },
+  props: {
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menuData: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    }
+  },
+  computed: {
+    sideTheme () {
+      return this.theme == 'light' ? this.theme : 'dark'
+    },
+    ...mapState('setting', ['isMobile', 'systemName'])
+  },
+  methods: {
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>

package/src/components/menu/index.less

@@ -0,0 +1,38 @@
+.shadow{
+  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+}
+.side-menu{
+  min-height: 100vh;
+  overflow-y: auto;
+  z-index: 10;
+  .logo{
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    padding-left: 24px;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+    overflow: hidden;
+    background-color: @layout-trigger-background;
+    &.light{
+      background-color: #fff;
+      h1{
+        color: @primary-color;
+      }
+    }
+    h1{
+      color: @menu-dark-highlight-color;
+      font-size: 20px;
+      margin: 0 0 0 12px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    img{
+      width: 32px;
+      vertical-align: middle;
+    }
+  }
+}
+.menu{
+  padding: 16px 0;
+}

package/src/components/menu/menu.js

@@ -0,0 +1,273 @@
+/**
+ * 该插件可根据菜单配置自动生成 ANTD menu组件
+ * menuOptions示例：
+ * [
+ *  {
+ *    name: '菜单名称',
+ *    path: '菜单路由',
+ *    meta: {
+ *      icon: '菜单图标',
+ *      invisible: 'boolean, 是否不可见, 默认 false',
+ *    },
+ *    children: [子菜单配置]
+ *  },
+ *  {
+ *    name: '菜单名称',
+ *    path: '菜单路由',
+ *    meta: {
+ *      icon: '菜单图标',
+ *      invisible: 'boolean, 是否不可见, 默认 false',
+ *    },
+ *    children: [子菜单配置]
+ *  }
+ * ]
+ *
+ * i18n: 国际化配置。系统默认会根据 options route配置的 path 和 name 生成英文以及中文的国际化配置，如需自定义或增加其他语言，配置
+ * 此项即可。如：
+ * i18n: {
+ *   messages: {
+ *     CN: {dashboard: {name: '监控中心'}}
+ *     HK: {dashboard: {name: '監控中心'}}
+ *   }
+ * }
+ **/
+import Menu from 'ant-design-vue/es/menu'
+import Icon from 'ant-design-vue/es/icon'
+import fastEqual from 'fast-deep-equal'
+import { getI18nKey } from '@vue2-client/utils/routerUtil'
+import { mapMutations } from 'vuex'
+
+const { Item, SubMenu } = Menu
+
+const resolvePath = (path, params = {}) => {
+  let _path = path
+  Object.entries(params).forEach(([key, value]) => {
+    _path = _path.replace(new RegExp(`:${key}`, 'g'), value)
+  })
+  return _path
+}
+
+const toRoutesMap = (routes) => {
+  const map = {}
+  routes.forEach(route => {
+    map[route.fullPath] = route
+    if (route.children && route.children.length > 0) {
+      const childrenMap = toRoutesMap(route.children)
+      Object.assign(map, childrenMap)
+    }
+  })
+  return map
+}
+
+export default {
+  name: 'IMenu',
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    i18n: Object,
+    openKeys: Array
+  },
+  data () {
+    return {
+      selectedKeys: [],
+      sOpenKeys: [],
+      cachedOpenKeys: []
+    }
+  },
+  computed: {
+    menuTheme () {
+      return this.theme == 'light' ? this.theme : 'dark'
+    },
+    routesMap () {
+      return toRoutesMap(this.options)
+    }
+  },
+  created () {
+    this.updateMenu()
+    if (this.options.length > 0 && !this.options[0].fullPath) {
+      this.formatOptions(this.options, '')
+    }
+    // 自定义国际化配置
+    if (this.i18n && this.i18n.messages) {
+      const messages = this.i18n.messages
+      Object.keys(messages).forEach(key => {
+        this.$i18n.mergeLocaleMessage(key, messages[key])
+      })
+    }
+  },
+  watch: {
+    options (val) {
+      if (val.length > 0 && !val[0].fullPath) {
+        this.formatOptions(this.options, '')
+      }
+    },
+    i18n (val) {
+      if (val && val.messages) {
+        const messages = this.i18n.messages
+        Object.keys(messages).forEach(key => {
+          this.$i18n.mergeLocaleMessage(key, messages[key])
+        })
+      }
+    },
+    collapsed (val) {
+      if (val) {
+        this.cachedOpenKeys = this.sOpenKeys
+        this.sOpenKeys = []
+      } else {
+        this.sOpenKeys = this.cachedOpenKeys
+      }
+    },
+    '$route': function () {
+      if (this.$route.meta && this.$route.meta.singlePage) {
+        this.setSingle(this.$route)
+      }
+      this.updateMenu()
+    },
+    sOpenKeys (val) {
+      this.$emit('openChange', val)
+      this.$emit('update:openKeys', val)
+    }
+  },
+  methods: {
+    ...mapMutations('account', ['setSingle']),
+    renderIcon: function (h, icon, key) {
+      if (this.$scopedSlots.icon && icon && icon !== 'none') {
+        const vnodes = this.$scopedSlots.icon({ icon, key })
+        vnodes.forEach(vnode => {
+          vnode.data.class = vnode.data.class ? vnode.data.class : []
+          vnode.data.class.push('anticon')
+        })
+        return vnodes
+      }
+      return !icon || icon == 'none' ? null : h(Icon, { props: { type: icon } })
+    },
+    renderMenuItem: function (h, menu) {
+      let tag = 'router-link'
+      const path = resolvePath(menu.fullPath, menu.meta.params)
+      let config = { props: { to: { path, query: menu.meta.query } }, attrs: { style: 'overflow:hidden;white-space:normal;text-overflow:clip;' } }
+      if (menu.meta && menu.meta.link) {
+        tag = 'a'
+        config = { attrs: { style: 'overflow:hidden;white-space:normal;text-overflow:clip;', href: menu.meta.link, target: '_blank' } }
+      }
+      return h(
+        Item, { key: menu.fullPath },
+        [
+          h(tag, config,
+            [
+              this.renderIcon(h, menu.meta ? menu.meta.icon : 'none', menu.fullPath),
+              this.$t(getI18nKey(menu.fullPath))
+            ]
+          )
+        ]
+      )
+    },
+    renderSubMenu: function (h, menu) {
+      const this_ = this
+      const subItem = [h('span', { slot: 'title', attrs: { style: 'overflow:hidden;white-space:normal;text-overflow:clip;' } },
+        [
+          this.renderIcon(h, menu.meta ? menu.meta.icon : 'none', menu.fullPath),
+          this.$t(getI18nKey(menu.fullPath))
+        ]
+      )]
+      const itemArr = []
+      menu.children.forEach(function (item) {
+        itemArr.push(this_.renderItem(h, item))
+      })
+      return h(SubMenu, { key: menu.fullPath },
+        subItem.concat(itemArr)
+      )
+    },
+    renderItem: function (h, menu) {
+      const meta = menu.meta
+      if (!meta || !meta.invisible) {
+        let renderChildren = false
+        const children = menu.children
+        if (children != undefined) {
+          for (let i = 0; i < children.length; i++) {
+            const childMeta = children[i].meta
+            if (!childMeta || !childMeta.invisible) {
+              renderChildren = true
+              break
+            }
+          }
+        }
+        return (menu.children && renderChildren) ? this.renderSubMenu(h, menu) : this.renderMenuItem(h, menu)
+      }
+    },
+    renderMenu: function (h, menuTree) {
+      const this_ = this
+      const menuArr = []
+      menuTree.forEach(function (menu, i) {
+        menuArr.push(this_.renderItem(h, menu, '0', i))
+      })
+      return menuArr
+    },
+    formatOptions (options, parentPath) {
+      options.forEach(route => {
+        const isFullPath = route.path.substring(0, 1) == '/'
+        route.fullPath = isFullPath ? route.path : parentPath + '/' + route.path
+        if (route.children) {
+          this.formatOptions(route.children, route.fullPath)
+        }
+      })
+    },
+    updateMenu () {
+      this.selectedKeys = this.getSelectedKeys()
+      let openKeys = this.selectedKeys.filter(item => item !== '')
+      openKeys = openKeys.slice(0, openKeys.length - 1)
+      if (!fastEqual(openKeys, this.sOpenKeys)) {
+        this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.sOpenKeys = openKeys
+      }
+    },
+    getSelectedKeys () {
+      let matches = this.$route.matched
+      const route = matches[matches.length - 1]
+      let chose = this.routesMap[route.path]
+      if (chose.meta && chose.meta.highlight) {
+        chose = this.routesMap[chose.meta.highlight]
+        const resolve = this.$router.resolve({ path: chose.fullPath })
+        matches = (resolve.resolved && resolve.resolved.matched) || matches
+      }
+      return matches.map(item => item.path)
+    }
+  },
+  render (h) {
+    return h(
+      Menu,
+      {
+        props: {
+          theme: this.menuTheme,
+          mode: this.$props.mode,
+          selectedKeys: this.selectedKeys,
+          openKeys: this.openKeys ? this.openKeys : this.sOpenKeys
+        },
+        on: {
+          'update:openKeys': (val) => {
+            this.sOpenKeys = val
+          },
+          click: (obj) => {
+            obj.selectedKeys = [obj.key]
+            this.$emit('select', obj)
+          }
+        }
+      }, this.renderMenu(h, this.options)
+    )
+  }
+}

package/src/components/page/header/PageHeader.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :class="['page-header', layout, pageWidth]">
+    <div class="page-header-wide">
+      <div class="breadcrumb">
+        <a-breadcrumb>
+          <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
+            <span>{{ item }}</span>
+          </a-breadcrumb-item>
+        </a-breadcrumb>
+      </div>
+      <div class="detail">
+        <div class="main">
+          <div class="row">
+            <h1 v-if="showPageTitle && title" class="title">{{ title }}</h1>
+            <div class="action"><slot name="action"></slot></div>
+          </div>
+          <div class="row">
+            <div v-if="this.$slots.content" class="content">
+              <div v-if="avatar" class="avatar"><a-avatar :src="avatar" :size="72" /></div>
+              <slot name="content"></slot>
+            </div>
+            <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'PageHeader',
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    title: {
+      type: [String, Boolean],
+      required: false
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    breadcrumb: {
+      type: Array,
+      required: false
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    logo: {
+      type: String,
+      required: false
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    avatar: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['layout', 'showPageTitle', 'pageWidth'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

package/src/components/page/header/index.less

@@ -0,0 +1,40 @@
+.page-header{
+  background: @base-bg-color;
+  padding: 16px 24px;
+  &.head.fixed{
+    margin: auto;
+    max-width: 1400px;
+  }
+  .page-header-wide{
+    .breadcrumb{
+      margin-bottom: 20px;
+    }
+    .detail{
+      display: flex;
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+      .avatar {
+        margin:0 24px 0 0;
+      }
+      .main{
+        width: 100%;
+        .title{
+          font-size: 20px;
+          color: @title-color;
+          margin-bottom: 16px;
+        }
+        .content{
+          display: flex;
+          flex-wrap: wrap;
+          color: @text-color-second;
+        }
+        .extra{
+          display: flex;
+        }
+      }
+    }
+  }
+}