vue2-client 0.1.0 → 1.1.0

package/src/components/Trend/index.less

@@ -0,0 +1,42 @@
+@import "../index";
+
+@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
+
+.@{trend-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+
+  .item-text {
+    display: inline-block;
+    margin-left: 8px;
+    color: rgba(0,0,0,.85);
+  }
+
+  .up {
+    color: @red-6;
+  }
+  .down {
+    color: @green-6;
+    top: -1px;
+  }
+
+  &.reverse-color .up {
+    color: @green-6;
+  }
+  &.reverse-color .down {
+    color: @red-6;
+  }
+}

package/src/components/Trend/index.md

@@ -0,0 +1,45 @@
+# Trend 趋势标记
+
+趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
+
+
+
+引用方式：
+
+```javascript
+import Trend from '@/components/Trend'
+
+export default {
+    components: {
+        Trend
+    }
+}
+```
+
+
+
+## 代码演示  [demo](https://pro.loacg.com/test/home)
+
+```html
+<trend flag="up">5%</trend>
+```
+或
+```html
+<trend flag="up">
+    <span slot="term">工资</span>
+    5%
+</trend>
+```
+或
+```html
+<trend flag="up" term="工资">5%</trend>
+```
+
+
+## API
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| flag | 上升下降标识：`up|down` | string | - |
+| reverseColor | 颜色反转 | Boolean | false |
+

package/src/components/_util/util.js

@@ -0,0 +1,46 @@
+/**
+ * components util
+ */
+
+/**
+ * 清理空值，对象
+ * @param children
+ * @returns {*[]}
+ */
+export function filterEmpty (children = []) {
+  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+}
+
+/**
+ * 获取字符串长度，英文字符 长度1，中文字符长度2
+ * @param {*} str
+ */
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1
+    }
+    return pre + 2
+  }, 0)
+
+/**
+ * 截取字符串，根据 maxLength 截取后返回
+ * @param {*} str
+ * @param {*} maxLength
+ */
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1
+    } else {
+      showLength += 2
+    }
+    if (showLength <= maxLength) {
+      return pre + cur
+    }
+    return pre
+  }, '')
+}

package/src/components/cache/AKeepAlive.js

@@ -0,0 +1,172 @@
+import { isDef, isRegExp, remove } from '@/utils/util'
+
+const patternTypes = [String, RegExp, Array]
+
+function matches (pattern, name) {
+  if (Array.isArray(pattern)) {
+    if (pattern.indexOf(name) > -1) {
+      return true
+    } else {
+      for (const item of pattern) {
+        if (isRegExp(item) && item.test(name)) {
+          return true
+        }
+      }
+      return false
+    }
+  } else if (typeof pattern === 'string') {
+    return pattern.split(',').indexOf(name) > -1
+  } else if (isRegExp(pattern)) {
+    return pattern.test(name)
+  }
+  /* istanbul ignore next */
+  return false
+}
+
+function getComponentName (opts) {
+  return opts && (opts.Ctor.options.name || opts.tag)
+}
+
+function getComponentKey (vnode) {
+  const { componentOptions, key } = vnode
+  return key == null
+    ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
+    : key + componentOptions.Ctor.cid
+}
+
+function getFirstComponentChild (children) {
+  if (Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const c = children[i]
+      if (isDef(c) && (isDef(c.componentOptions) || c.isAsyncPlaceholder)) {
+        return c
+      }
+    }
+  }
+}
+
+function pruneCache (keepAliveInstance, filter) {
+  const { cache, keys, _vnode } = keepAliveInstance
+  for (const key in cache) {
+    const cachedNode = cache[key]
+    if (cachedNode) {
+      const name = getComponentName(cachedNode.componentOptions)
+      const componentKey = getComponentKey(cachedNode)
+      if (name && !filter(name, componentKey)) {
+        pruneCacheEntry(cache, key, keys, _vnode)
+      }
+    }
+  }
+}
+
+function pruneCacheEntry2 (cache, key, keys) {
+  const cached = cache[key]
+  if (cached) {
+    cached.componentInstance.$destroy()
+  }
+  cache[key] = null
+  remove(keys, key)
+}
+
+function pruneCacheEntry (cache, key, keys, current) {
+  const cached = cache[key]
+  if (cached && (!current || cached.tag !== current.tag)) {
+    cached.componentInstance.$destroy()
+  }
+  cache[key] = null
+  remove(keys, key)
+}
+
+export default {
+  name: 'AKeepAlive',
+  abstract: true,
+  model: {
+    prop: 'clearCaches',
+    event: 'clear'
+  },
+  props: {
+    include: patternTypes,
+    exclude: patternTypes,
+    excludeKeys: patternTypes,
+    max: [String, Number],
+    clearCaches: Array
+  },
+  watch: {
+    clearCaches: function (val) {
+      if (val && val.length > 0) {
+        const { cache, keys } = this
+        val.forEach(key => {
+          pruneCacheEntry2(cache, key, keys)
+        })
+        this.$emit('clear', [])
+      }
+    }
+  },
+
+  created () {
+    this.cache = Object.create(null)
+    this.keys = []
+  },
+
+  destroyed () {
+    for (const key in this.cache) {
+      pruneCacheEntry(this.cache, key, this.keys)
+    }
+  },
+
+  mounted () {
+    this.$watch('include', val => {
+      pruneCache(this, (name) => matches(val, name))
+    })
+    this.$watch('exclude', val => {
+      pruneCache(this, (name) => !matches(val, name))
+    })
+    this.$watch('excludeKeys', val => {
+      pruneCache(this, (name, key) => !matches(val, key))
+    })
+  },
+
+  render () {
+    const slot = this.$slots.default
+    const vnode = getFirstComponentChild(slot)
+    const componentOptions = vnode && vnode.componentOptions
+    if (componentOptions) {
+      // check pattern
+      const name = getComponentName(componentOptions)
+      const componentKey = getComponentKey(vnode)
+      const { include, exclude, excludeKeys } = this
+      if (
+        // not included
+        (include && (!name || !matches(include, name))) ||
+        // excluded
+        (exclude && name && matches(exclude, name)) ||
+        (excludeKeys && componentKey && matches(excludeKeys, componentKey))
+      ) {
+        return vnode
+      }
+
+      const { cache, keys } = this
+      const key = vnode.key == null
+        // same constructor may get registered as different local components
+        // so cid alone is not enough (#3269)
+        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
+        : vnode.key + componentOptions.Ctor.cid
+      if (cache[key]) {
+        vnode.componentInstance = cache[key].componentInstance
+        // make current key freshest
+        remove(keys, key)
+        keys.push(key)
+      } else {
+        cache[key] = vnode
+        keys.push(key)
+        // prune oldest entry
+        if (this.max && keys.length > parseInt(this.max)) {
+          pruneCacheEntry(cache, keys[0], keys, this._vnode)
+        }
+      }
+
+      vnode.data.keepAlive = true
+    }
+    return vnode || (slot && slot[0])
+  }
+}

package/src/components/card/ChartCard.vue

@@ -0,0 +1,79 @@
+<template>
+  <a-card :loading="loading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">{{ title }}</span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total"><span>{{ total }}</span></div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <slot name="footer"></slot>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title', 'total', 'loading']
+}
+</script>
+
+<style scoped lang="less">
+  .chart-card-header{
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+  .chart-card-header .meta{
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: @text-color-second;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  .chart-card-action{
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+  .chart-card-footer{
+    border-top: 1px solid @border-color-base;
+    padding-top: 9px;
+    margin-top: 8px;
+  }
+  .chart-card-content{
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
+  }
+  .chart-card-content .content-fix{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+</style>

package/src/components/chart/Bar.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="bar">
+    <h4>{{ title }}</h4>
+    <div class="chart">
+      <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
+        <v-tooltip />
+        <v-axis />
+        <v-bar position="x*y"/>
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+
+const data = []
+for (let i = 0; i < 12; i += 1) {
+  data.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+export default {
+  name: 'Bar',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['title'],
+  data () {
+    return {
+      data,
+      scale,
+      tooltip
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .bar{
+    position: relative;
+    .chart{
+    }
+  }
+</style>

package/src/components/chart/MiniArea.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniArea',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .mini-chart {
+    position: relative;
+    width: 100%
+  }
+  .mini-chart .chart-content{
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+  }
+</style>

package/src/components/chart/MiniBar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-bar position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>

package/src/components/chart/MiniProgress.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="mini-progress">
+    <a-tooltip :title="'目标值：' + target + '%'">
+      <div class="target" :style="{left: target + '%'}">
+        <span :style="{backgroundColor: color}" />
+        <span :style="{backgroundColor: color}" />
+      </div>
+    </a-tooltip>
+    <div class="wrap">
+      <div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['target', 'color', 'percent', 'height']
+}
+</script>
+
+<style lang="less"  scoped>
+  .mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+    .wrap {
+      background-color: @layout-bg-color;
+      position: relative;
+    }
+    .progress {
+      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+      border-radius: 1px 0 0 1px;
+      background-color: #13C2C2;
+      width: 0;
+      height: 100%;
+    }
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+      }
+      span:last-child {
+        top: auto;
+        bottom: 0;
+      }
+    }
+  }
+</style>

package/src/components/chart/Radar.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+    <v-tooltip />
+    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
+    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
+    <v-legend dataKey="user" marker="circle" :offset="30" />
+    <v-coord type="polar" radius="0.8" />
+    <v-line position="item*score" color="user" :size="2" />
+    <v-point position="item*score" color="user" :size="4" shape="circle" />
+  </v-chart>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '引用', a: 70, b: 30, c: 40 },
+  { item: '口碑', a: 60, b: 70, c: 40 },
+  { item: '产量', a: 50, b: 60, c: 40 },
+  { item: '贡献', a: 40, b: 50, c: 40 },
+  { item: '热度', a: 60, b: 70, c: 40 },
+  { item: '引用', a: 70, b: 50, c: 40 }
+]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'fold',
+  fields: ['a', 'b', 'c'],
+  key: 'user',
+  value: 'score'
+})
+
+const scale = [{
+  dataKey: 'score',
+  min: 0,
+  max: 80
+}]
+
+const data = dv.rows
+
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+export default {
+  name: 'Radar',
+  data () {
+    return {
+      sourceData,
+      data,
+      axis1Opts,
+      axis2Opts,
+      scale
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>