ylyx-cli 1.0.0

package/templates/vue-app/files/src/components/Echarts/WordCloud.vue

@@ -0,0 +1,201 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+require('echarts-wordcloud');
+require('echarts/theme/macarons'); // echarts theme
+import { debounce } from '@/utils';
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '300px',
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener('resize', this.__resizeHandler);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener('resize', this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      const data = [
+        {
+          name: '花鸟市场',
+          value: 1446,
+        },
+        {
+          name: '汽车',
+          value: 928,
+        },
+        {
+          name: '视频',
+          value: 906,
+        },
+        {
+          name: '电视',
+          value: 825,
+        },
+        {
+          name: 'Lover Boy',
+          value: 514,
+        },
+        {
+          name: '动漫',
+          value: 486,
+        },
+        {
+          name: '音乐',
+          value: 53,
+        },
+        {
+          name: '直播',
+          value: 163,
+        },
+        {
+          name: '广播电台',
+          value: 86,
+        },
+        {
+          name: '戏曲曲艺',
+          value: 17,
+        },
+        {
+          name: '演出票务',
+          value: 6,
+        },
+        {
+          name: '给陌生的你听',
+          value: 1,
+        },
+        {
+          name: '资讯',
+          value: 1437,
+        },
+        {
+          name: '商业财经',
+          value: 422,
+        },
+        {
+          name: '娱乐八卦',
+          value: 353,
+        },
+        {
+          name: '军事',
+          value: 331,
+        },
+        {
+          name: '科技资讯',
+          value: 313,
+        },
+        {
+          name: '社会时政',
+          value: 307,
+        },
+        {
+          name: '时尚',
+          value: 43,
+        },
+        {
+          name: '网络奇闻',
+          value: 15,
+        },
+        {
+          name: '旅游出行',
+          value: 438,
+        },
+        {
+          name: '景点类型',
+          value: 957,
+        },
+        {
+          name: '国内游',
+          value: 927,
+        },
+        {
+          name: '远途出行方式',
+          value: 908,
+        },
+        {
+          name: '酒店',
+          value: 693,
+        },
+        {
+          name: '关注景点',
+          value: 611,
+        },
+        {
+          name: '旅游网站偏好',
+          value: 512,
+        },
+        {
+          name: '出国游',
+          value: 382,
+        },
+      ];
+      this.chart.setOption({
+        backgroundColor: '#fff',
+        tooltip: {
+          show: false,
+        },
+        series: [
+          {
+            type: 'wordCloud',
+            gridSize: 1,
+            sizeRange: [12, 55],
+            rotationRange: [-45, 0, 45, 90],
+            textStyle: {
+              normal: {
+                color: function () {
+                  return (
+                    'rgb(' +
+                    Math.round(Math.random() * 255) +
+                    ', ' +
+                    Math.round(Math.random() * 255) +
+                    ', ' +
+                    Math.round(Math.random() * 255) +
+                    ')'
+                  );
+                },
+              },
+            },
+            left: 'center',
+            top: 'center',
+            right: null,
+            bottom: null,
+            data: data,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

package/templates/vue-app/files/src/components/GithubCorner/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <a
+    href="https://github.com/elunez/eladmin"
+    target="_blank"
+    class="github-corner"
+    aria-label="View source on Github">
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill: #40c9c6; color: #fff"
+      aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px"
+        class="octo-arm" />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body" />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+</style>

package/templates/vue-app/files/src/components/Hamburger/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="padding: 0 15px" @click="toggleClick">
+    <svg
+      :class="{ 'is-active': isActive }"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64">
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

package/templates/vue-app/files/src/components/HeaderSearch/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div :class="{ show: show }" class="header-search">
+    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <el-select
+      ref="headerSearchSelect"
+      v-model="search"
+      :remote-method="querySearch"
+      filterable
+      default-first-option
+      remote
+      placeholder="Search"
+      class="header-search-select"
+      @change="change">
+      <el-option
+        v-for="item in options"
+        :key="item.path"
+        :value="item"
+        :label="item.title.join(' > ')" />
+    </el-select>
+  </div>
+</template>
+
+<script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
+import Fuse from 'fuse.js';
+import path from 'path';
+
+export default {
+  name: 'HeaderSearch',
+  data() {
+    return {
+      search: '',
+      options: [],
+      searchPool: [],
+      show: false,
+      fuse: undefined,
+    };
+  },
+  computed: {
+    routes() {
+      return this.$store.state.permission.routers;
+    },
+  },
+  watch: {
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes);
+    },
+    searchPool(list) {
+      this.initFuse(list);
+    },
+    show(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close);
+      } else {
+        document.body.removeEventListener('click', this.close);
+      }
+    },
+  },
+  mounted() {
+    this.searchPool = this.generateRoutes(this.routes);
+  },
+  methods: {
+    click() {
+      this.show = !this.show;
+      if (this.show) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus();
+      }
+    },
+    close() {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur();
+      this.options = [];
+      this.show = false;
+    },
+    change(val) {
+      if (this.ishttp(val.path)) {
+        // http(s):// 路径新窗口打开
+        window.open(val.path, '_blank');
+      } else {
+        this.$router.push(val.path);
+      }
+      this.search = '';
+      this.options = [];
+      this.$nextTick(() => {
+        this.show = false;
+      });
+    },
+    initFuse(list) {
+      this.fuse = new Fuse(list, {
+        shouldSort: true,
+        threshold: 0.4,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: [
+          {
+            name: 'title',
+            weight: 0.7,
+          },
+          {
+            name: 'path',
+            weight: 0.3,
+          },
+        ],
+      });
+    },
+    // Filter out the routes that can be displayed in the sidebar
+    // And generate the internationalized title
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
+      let res = [];
+
+      for (const router of routes) {
+        // skip hidden router
+        if (router.hidden) {
+          continue;
+        }
+
+        const data = {
+          path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
+          title: [...prefixTitle],
+        };
+
+        if (router.meta && router.meta.title) {
+          data.title = [...data.title, router.meta.title];
+
+          if (router.redirect !== 'noRedirect') {
+            // only push the routes with title
+            // special case: need to exclude parent router without redirect
+            res.push(data);
+          }
+        }
+
+        // recursive child routes
+        if (router.children) {
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title);
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes];
+          }
+        }
+      }
+      return res;
+    },
+    querySearch(query) {
+      if (query !== '') {
+        this.options = this.fuse.search(query);
+      } else {
+        this.options = [];
+      }
+    },
+    ishttp(url) {
+      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.header-search {
+  font-size: 0 !important;
+
+  .search-icon {
+    cursor: pointer;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+
+  .header-search-select {
+    font-size: 18px;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
+
+    ::v-deep .el-input__inner {
+      border-radius: 0;
+      border: 0;
+      padding-left: 0;
+      padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
+      vertical-align: middle;
+    }
+  }
+
+  &.show {
+    .header-search-select {
+      width: 210px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/components/IconSelect/index.vue

@@ -0,0 +1,74 @@
+<!-- @author zhengjie -->
+<template>
+  <div class="icon-body">
+    <el-input
+      v-model="name"
+      style="position: relative"
+      clearable
+      placeholder="请输入图标名称"
+      @clear="filterIcons"
+      @input.native="filterIcons">
+      <i slot="suffix" class="el-icon-search el-input__icon" />
+    </el-input>
+    <div class="icon-list">
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+        <svg-icon :icon-class="item" style="height: 30px; width: 16px" />
+        <span>{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import icons from './requireIcons';
+export default {
+  name: 'IconSelect',
+  data() {
+    return {
+      name: '',
+      iconList: icons,
+    };
+  },
+  methods: {
+    filterIcons() {
+      this.iconList = icons;
+      if (this.name) {
+        this.iconList = this.iconList.filter(item => item.includes(this.name));
+      }
+    },
+    selectedIcon(name) {
+      this.$emit('selected', name);
+      document.body.click();
+    },
+    reset() {
+      this.name = '';
+      this.iconList = icons;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.icon-body {
+  width: 100%;
+  padding: 10px;
+  .icon-list {
+    height: 200px;
+    overflow-y: scroll;
+    div {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: -5px;
+      cursor: pointer;
+      width: 33%;
+      float: left;
+    }
+    span {
+      display: inline-block;
+      vertical-align: -0.15em;
+      fill: currentColor;
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/templates/vue-app/files/src/components/IconSelect/requireIcons.js

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

package/templates/vue-app/files/src/components/Iframe/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe :src="src" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 94.5 + 'px;',
+      loading: true,
+    };
+  },
+  mounted: function () {
+    setTimeout(() => {
+      this.loading = false;
+    }, 230);
+    const that = this;
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 94.5 + 'px;';
+    };
+  },
+};
+</script>

package/templates/vue-app/files/src/components/JavaEdit/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="json-editor">
+    <textarea ref="textarea" />
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+// 替换主题这里需修改名称
+import 'codemirror/theme/idea.css';
+import 'codemirror/mode/clike/clike';
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    height: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      editor: false,
+    };
+  },
+  watch: {
+    value(value) {
+      const editorValue = this.editor.getValue();
+      if (value !== editorValue) {
+        this.editor.setValue(this.value);
+      }
+    },
+    height(value) {
+      this.editor.setSize('auto', this.height);
+    },
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: 'text/x-java',
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 0.9,
+      // 替换主题这里需修改名称
+      theme: 'idea',
+      readOnly: true,
+    });
+    this.editor.setSize('auto', this.height);
+    this.editor.setValue(this.value);
+  },
+  methods: {
+    getValue() {
+      return this.editor.getValue();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.json-editor {
+  height: 100%;
+  margin-bottom: 10px;
+}
+.json-editor >>> .CodeMirror {
+  font-size: 14px;
+  overflow-y: auto;
+  font-weight: normal;
+}
+.json-editor >>> .CodeMirror-scroll {
+}
+.json-editor >>> .cm-s-rubyblue span.cm-string {
+  color: #f08047;
+}
+</style>