ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/components/icons/element-icons.js

@@ -0,0 +1,74 @@
+const elementIcons = [
+  'info',
+  'error',
+  'success',
+  'warning',
+  'question',
+  'back',
+  'arrow-left',
+  'arrow-down',
+  'arrow-right',
+  'arrow-up',
+  'caret-left',
+  'caret-bottom',
+  'caret-top',
+  'caret-right',
+  'd-arrow-left',
+  'd-arrow-right',
+  'minus',
+  'plus',
+  'remove',
+  'circle-plus',
+  'remove-outline',
+  'circle-plus-outline',
+  'close',
+  'check',
+  'circle-close',
+  'circle-check',
+  'circle-close-outline',
+  'circle-check-outline',
+  'zoom-out',
+  'zoom-in',
+  'd-caret',
+  'sort',
+  'sort-down',
+  'sort-up',
+  'tickets',
+  'document',
+  'goods',
+  'sold-out',
+  'news',
+  'message',
+  'date',
+  'printer',
+  'time',
+  'bell',
+  'mobile-phone',
+  'service',
+  'view',
+  'menu',
+  'more',
+  'more-outline',
+  'star-on',
+  'star-off',
+  'location',
+  'location-outline',
+  'phone',
+  'phone-outline',
+  'picture',
+  'picture-outline',
+  'delete',
+  'search',
+  'edit',
+  'edit-outline',
+  'rank',
+  'refresh',
+  'share',
+  'setting',
+  'upload',
+  'upload2',
+  'download',
+  'loading',
+];
+
+export default elementIcons;

package/templates/vue-app/files/src/views/components/icons/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a
+        href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
+        target="_blank"
+        >Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div class="grid">
+          <div
+            v-for="item of svgIcons"
+            :key="item"
+            @click="handleClipboard(generateIconCode(item), $event)">
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <svg-icon :icon-class="item" class-name="disabled" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div class="grid">
+          <div
+            v-for="item of elementIcons"
+            :key="item"
+            @click="handleClipboard(generateElementIconCode(item), $event)">
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateElementIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <i :class="'el-icon-' + item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import clipboard from '@/utils/clipboard';
+import svgIcons from './svg-icons';
+import elementIcons from './element-icons';
+export default {
+  name: 'Icons',
+  data() {
+    return {
+      svgIcons,
+      elementIcons,
+    };
+  },
+  methods: {
+    generateIconCode(symbol) {
+      return `<svg-icon icon-class="${symbol}" />`;
+    },
+    generateElementIconCode(symbol) {
+      return `<i class="el-icon-${symbol}" />`;
+    },
+    handleClipboard(text, event) {
+      clipboard(text, event);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>

package/templates/vue-app/files/src/views/components/icons/svg-icons.js

@@ -0,0 +1,10 @@
+const req = require.context('../../../assets/icons/svg', false, /\.svg$/);
+const requireAll = requireContext => requireContext.keys();
+
+const re = /\.\/(.*)\.svg/;
+
+const svgIcons = requireAll(req).map(i => {
+  return i.match(re)[1];
+});
+
+export default svgIcons;

package/templates/vue-app/files/src/views/components/scroll/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="number">
+    <ul id="dataNums">
+      <li v-for="(item, index) in list" :key="index" :class="{ douhao: item === ',' }">
+        <div class="dataBoc">
+          <div
+            class="tt"
+            :style="{ transition: 'all 2.5s ease-in-out 0s', top: '-' + item.top + 'px' }">
+            <em v-for="(item2, index2) in numList" :key="index2">{{ item2 }} </em>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    number: {
+      type: Number,
+      require: true,
+    },
+  },
+  data() {
+    return {
+      list: [],
+      numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ','],
+    };
+  },
+  watch: {
+    //
+    number(val) {
+      // console.log(val, '[1,2,3,4,5,6,7,8,9,0]')
+      this.scroll();
+    },
+  },
+  methods: {
+    scroll() {
+      this.list = this.number
+        .toString()
+        .replace(/\B(?=(\d{3})+$)/g, ',')
+        .split('');
+
+      let arr = [];
+      this.list.forEach(value => {
+        arr.push({ num: value, top: 0 });
+      });
+      this.list = arr;
+      let Hei = parseFloat(getComputedStyle(document.getElementById('dataNums')).height);
+      this.list.forEach((value, index) => {
+        if (value.num == ',') {
+          value.top = parseFloat(20 * Hei);
+        } else {
+          setTimeout(() => {
+            value.top = parseFloat(value.num * Hei + Hei * 10);
+          }, index * 300);
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.number {
+  text-align: center;
+  display: inline-block;
+  ul {
+    display: inline-block;
+    height: 50px;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    top: 7px;
+    li {
+      float: left;
+      width: 13px;
+      height: 50px;
+      text-align: center;
+      list-style: none;
+      .dataBoc {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        .tt {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          em {
+            width: 100%;
+            height: 100%;
+            float: left;
+            line-height: 50px;
+            font-style: normal;
+            text-align: center;
+            font-size: 22px;
+            color: #66e8e5;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/views/components/scrollFull/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="number">
+    <ul id="dataNums">
+      <li v-for="(item, index) in list" :key="index">
+        <div class="dataBoc">
+          <div
+            class="tt"
+            :style="{ transition: 'all 2.5s ease-in-out 0s', top: '-' + item.top + 'px' }">
+            <em v-for="(item2, index2) in numList" :key="index2">{{ item2 }} </em>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    number: {
+      type: Number,
+      require: true,
+    },
+  },
+  data() {
+    return {
+      list: [],
+      numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.'],
+    };
+  },
+  watch: {
+    //
+    number(val) {
+      // console.log(val, '[1,2,3,4,5,6,7,8,9,0]')
+      this.scroll();
+    },
+  },
+  methods: {
+    scroll() {
+      this.list = this.number.toString().split('');
+      let arr = [];
+      this.list.forEach(value => {
+        arr.push({ num: value, top: 0 });
+      });
+      this.list = arr;
+      let Hei = parseFloat(getComputedStyle(document.getElementById('dataNums')).height);
+      this.list.forEach((value, index) => {
+        setTimeout(() => {
+          value.top = parseFloat(value.num * Hei + Hei * 10);
+        }, index * 300);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.number {
+  text-align: center;
+  display: inline-block;
+  ul {
+    display: inline-block;
+    height: 50px;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    top: 7px;
+    li {
+      float: left;
+      width: 13px;
+      height: 50px;
+      text-align: center;
+      list-style: none;
+      .dataBoc {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        .tt {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          em {
+            width: 100%;
+            height: 100%;
+            float: left;
+            line-height: 50px;
+            font-style: normal;
+            text-align: center;
+            font-size: 22px;
+            color: #66e8e5;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/views/dashboard/LineChart.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from './mixins/resize';
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '350px',
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.setOptions(this.chartData);
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+          padding: [5, 10],
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+        },
+        legend: {
+          data: ['expected', 'actual'],
+        },
+        series: [
+          {
+            name: 'expected',
+            itemStyle: {
+              normal: {
+                color: '#FF005A',
+                lineStyle: {
+                  color: '#FF005A',
+                  width: 2,
+                },
+              },
+            },
+            smooth: true,
+            type: 'line',
+            data: expectedData,
+            animationDuration: 2800,
+            animationEasing: 'cubicInOut',
+          },
+          {
+            name: 'actual',
+            smooth: true,
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#3888fa',
+                lineStyle: {
+                  color: '#3888fa',
+                  width: 2,
+                },
+                areaStyle: {
+                  color: '#f3f8ff',
+                },
+              },
+            },
+            data: actualData,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut',
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

package/templates/vue-app/files/src/views/dashboard/PanelGroup.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">New Visits</div>
+          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">Messages</div>
+          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="money" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">Purchases</div>
+          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">Shoppings</div>
+          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to';
+
+export default {
+  components: {
+    CountTo,
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3;
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3;
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>