ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/components/Editor.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      富文本基于
+      <el-link
+        type="primary"
+        href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599"
+        target="_blank"
+        >wangEditor</el-link
+      >
+    </p>
+    <el-row :gutter="10">
+      <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
+        <div ref="editor" class="text" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
+        <div v-html="editorContent" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { upload } from '@/utils/upload';
+import E from 'wangeditor';
+export default {
+  name: 'Editor',
+  data() {
+    return {
+      editorContent: `
+        <ul>
+          <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">wangEditor</a></li>
+        </ul>
+        `,
+    };
+  },
+  computed: {
+    ...mapGetters(['imagesUploadApi', 'baseApi']),
+  },
+  mounted() {
+    const _this = this;
+    var editor = new E(this.$refs.editor);
+    // 自定义菜单配置
+    editor.customConfig.zIndex = 10;
+    // 文件上传
+    editor.customConfig.customUploadImg = function (files, insert) {
+      // files 是 input 中选中的文件列表
+      // insert 是获取图片 url 后，插入到编辑器的方法
+      files.forEach(image => {
+        upload(_this.imagesUploadApi, image).then(res => {
+          const data = res.data;
+          const url = _this.baseApi + '/file/' + data.type + '/' + data.realName;
+          insert(url);
+        });
+      });
+    };
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+    };
+    editor.create();
+    // 初始化数据
+    editor.txt.html(this.editorContent);
+  },
+};
+</script>
+
+<style scoped>
+.text {
+  text-align: left;
+}
+::v-deep .w-e-text-container {
+  height: 420px !important;
+}
+</style>

package/templates/vue-app/files/src/views/components/MarkDown.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      Markdown 基于
+      <el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank"
+        >MavonEditor</el-link
+      >
+    </p>
+    <mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
+  </div>
+</template>
+
+<script>
+import { upload } from '@/utils/upload';
+import { mapGetters } from 'vuex';
+export default {
+  name: 'Markdown',
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 200 + 'px',
+    };
+  },
+  computed: {
+    ...mapGetters(['imagesUploadApi', 'baseApi']),
+  },
+  mounted() {
+    const that = this;
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 200 + 'px';
+    };
+  },
+  methods: {
+    imgAdd(pos, $file) {
+      upload(this.imagesUploadApi, $file).then(res => {
+        const data = res.data;
+        const url = this.baseApi + '/file/' + data.type + '/' + data.realName;
+        this.$refs.md.$img2Url(pos, url);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/templates/vue-app/files/src/views/components/UVideo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      视频播放器 基于
+      <el-link type="primary" href="https://github.com/bytedance/xgplayer-vue" target="_blank"
+        >xgplayer</el-link
+      >
+    </p>
+    <xgplayer :option="option" />
+  </div>
+</template>
+
+<script>
+import xgplayer from '@/components/Xgplayer/index';
+export default {
+  name: 'UVideo',
+  components: {
+    xgplayer,
+  },
+  data() {
+    return {
+      option: {
+        url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
+        id: 'video1',
+        poster: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
+        thumbnail: {
+          urls: ['https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg'],
+        },
+        width: '100%',
+        height: '100%',
+      },
+    };
+  },
+};
+</script>
+
+<style scoped></style>

package/templates/vue-app/files/src/views/components/YamlEdit.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="app-container">
+    <p class="warn-content">
+      Yaml编辑器 基于
+      <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>，
+      主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>
+    </p>
+    <Yaml :value="value" :height="height" />
+  </div>
+</template>
+
+<script>
+import Yaml from '@/components/YamlEdit/index';
+export default {
+  name: 'YamlEdit',
+  components: { Yaml },
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 210 + 'px',
+      value:
+        '# 展示数据，如需更换主题，请在src/components/YamlEdit 目录中搜索原主题名称进行替换\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# Spring Boot configuration.\n' +
+        '#\n' +
+        '# This configuration will be overridden by the Spring profile you use,\n' +
+        '# for example application-dev.yml if you use the "dev" profile.\n' +
+        '#\n' +
+        '# More information on profiles: https://www.jhipster.tech/profiles/\n' +
+        '# More information on configuration properties: https://www.jhipster.tech/common-application-properties/\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# Standard Spring Boot properties.\n' +
+        '# Full reference is available at:\n' +
+        '# http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        'eureka:\n' +
+        '    client:\n' +
+        '        enabled: true\n' +
+        '        healthcheck:\n' +
+        '            enabled: true\n' +
+        '        fetch-registry: true\n' +
+        '        register-with-eureka: true\n' +
+        '        instance-info-replication-interval-seconds: 10\n' +
+        '        registry-fetch-interval-seconds: 10\n' +
+        '    instance:\n' +
+        '        appname: product\n' +
+        '        instanceId: product:${spring.application.instance-id:${random.value}}\n' +
+        '        #instanceId: 127.0.0.1:9080\n' +
+        '        lease-renewal-interval-in-seconds: 5\n' +
+        '        lease-expiration-duration-in-seconds: 10\n' +
+        '        status-page-url-path: ${management.endpoints.web.base-path}/info\n' +
+        '        health-check-url-path: ${management.endpoints.web.base-path}/health\n' +
+        '        metadata-map:\n' +
+        '            zone: primary # This is needed for the load balancer\n' +
+        '            profile: ${spring.profiles.active}\n' +
+        '            version: ${info.project.version:}\n' +
+        '            git-version: ${git.commit.id.describe:}\n' +
+        '            git-commit: ${git.commit.id.abbrev:}\n' +
+        '            git-branch: ${git.branch:}\n' +
+        'ribbon:\n' +
+        '    ReadTimeout: 120000\n' +
+        '    ConnectTimeout: 300000\n' +
+        '    eureka:\n' +
+        '        enabled: true\n' +
+        'zuul:\n' +
+        '  host:\n' +
+        '    connect-timeout-millis: 5000\n' +
+        '    max-per-route-connections: 10000\n' +
+        '    max-total-connections: 5000\n' +
+        '    socket-timeout-millis: 60000\n' +
+        '  semaphore:\n' +
+        '    max-semaphores: 500\n' +
+        '\n' +
+        'feign:\n' +
+        '    hystrix:\n' +
+        '        enabled: true\n' +
+        '    client:\n' +
+        '        config:\n' +
+        '            default:\n' +
+        '                connectTimeout: 500000\n' +
+        '                readTimeout: 500000\n' +
+        '\n' +
+        '# See https://github.com/Netflix/Hystrix/wiki/Configuration\n' +
+        'hystrix:\n' +
+        '    command:\n' +
+        '        default:\n' +
+        '            circuitBreaker:\n' +
+        '                sleepWindowInMilliseconds: 100000\n' +
+        '                forceClosed: true\n' +
+        '            execution:\n' +
+        '                isolation:\n' +
+        '#                    strategy: SEMAPHORE\n' +
+        '# See https://github.com/spring-cloud/spring-cloud-netflix/issues/1330\n' +
+        '                    thread:\n' +
+        '                        timeoutInMilliseconds: 60000\n' +
+        '    shareSecurityContext: true\n' +
+        '\n' +
+        'management:\n' +
+        '    endpoints:\n' +
+        '        web:\n' +
+        '            base-path: /management\n' +
+        '            exposure:\n' +
+        '                include: ["configprops", "env", "health", "info", "threaddump"]\n' +
+        '    endpoint:\n' +
+        '        health:\n' +
+        '            show-details: when_authorized\n' +
+        '    info:\n' +
+        '        git:\n' +
+        '            mode: full\n' +
+        '    health:\n' +
+        '        mail:\n' +
+        '            enabled: false # When using the MailService, configure an SMTP server and set this to true\n' +
+        '    metrics:\n' +
+        '        enabled: false # http://micrometer.io/ is disabled by default, as we use http://metrics.dropwizard.io/ instead\n' +
+        '\n' +
+        'spring:\n' +
+        '    application:\n' +
+        '        name: product\n' +
+        '    jpa:\n' +
+        '        open-in-view: false\n' +
+        '        hibernate:\n' +
+        '            ddl-auto: update\n' +
+        '            naming:\n' +
+        '                physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy\n' +
+        '                implicit-strategy: org.springframework.boot.orm.jpa.hibernate.SpringImplicitNamingStrategy\n' +
+        '    messages:\n' +
+        '        basename: i18n/messages\n' +
+        '    mvc:\n' +
+        '        favicon:\n' +
+        '            enabled: false\n' +
+        '    thymeleaf:\n' +
+        '        mode: HTML\n' +
+        'security:\n' +
+        '    oauth2:\n' +
+        '        resource:\n' +
+        '            filter-order: 3\n' +
+        '\n' +
+        'server:\n' +
+        '    servlet:\n' +
+        '        session:\n' +
+        '            cookie:\n' +
+        '                http-only: true\n' +
+        '\n' +
+        '# Properties to be exposed on the /info management endpoint\n' +
+        'info:\n' +
+        '    # Comma separated list of profiles that will trigger the ribbon to show\n' +
+        '    display-ribbon-on-profiles: "dev"\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# JHipster specific properties\n' +
+        '#\n' +
+        '# Full reference is available at: https://www.jhipster.tech/common-application-properties/\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        'jhipster:\n' +
+        '    async:\n' +
+        '        core-pool-size: 2\n' +
+        '        max-pool-size: 50\n' +
+        '        queue-capacity: 10000\n' +
+        '    # By default CORS is disabled. Uncomment to enable.\n' +
+        '    #cors:\n' +
+        '        #allowed-origins: "*"\n' +
+        '        #allowed-methods: "*"\n' +
+        '        #allowed-headers: "*"\n' +
+        '        #exposed-headers: "Authorization,Link,X-Total-Count"\n' +
+        '        #allow-credentials: true\n' +
+        '        #max-age: 1800\n' +
+        '    mail:\n' +
+        '        from: product@localhost\n' +
+        '    swagger:\n' +
+        '        default-include-pattern: /api/.*\n' +
+        '        title: product API\n' +
+        '        description: product API documentation\n' +
+        '        version: 0.0.1\n' +
+        '        terms-of-service-url:\n' +
+        '        contact-name:\n' +
+        '        contact-url:\n' +
+        '        contact-email:\n' +
+        '        license:\n' +
+        '        license-url:\n' +
+        '\n' +
+        '# ===================================================================\n' +
+        '# Application specific properties\n' +
+        '# Add your own application properties here, see the ApplicationProperties class\n' +
+        '# to have type-safe configuration, like in the JHipsterProperties above\n' +
+        '#\n' +
+        '# More documentation is available at:\n' +
+        '# https://www.jhipster.tech/common-application-properties/\n' +
+        '# ===================================================================\n' +
+        '\n' +
+        '# application:\n',
+    };
+  },
+  mounted() {
+    const that = this;
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 210 + 'px';
+    };
+  },
+};
+</script>
+
+<style scoped></style>

package/templates/vue-app/files/src/views/components/camera/camera.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <video id="video" width="640" height="480" autoplay="autoplay"></video>
+    <!--拍照按钮-->
+    <div>
+      <button @click="action" id="capture">拍照</button>
+    </div>
+    <!--描绘video截图-->
+    <canvas v-show="false" id="canvas" width="640" height="480"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  data() {
+    return {
+      fileName: '点击Vue拍照',
+      base64ImgData: null,
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        let canvas = document.getElementById('canvas');
+        let video = document.getElementById('video');
+        let context = canvas.getContext('2d');
+        let capture = document.getElementById('capture');
+      });
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function (constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+          }
+
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function (resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+
+      //默认使用前摄像头，强制使用后置摄像头如下设置
+      // let constraints = {video: { facingMode: { exact: "environment" } }};
+      let constraints = { video: true };
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(function (stream) {
+          // 旧的浏览器可能没有srcObject
+          if ('srcObject' in video) {
+            video.srcObject = stream;
+          } else {
+            // 防止在新的浏览器里使用它，应为它已经不再支持了
+            video.src = window.URL.createObjectURL(stream);
+          }
+          video.onloadedmetadata = function (e) {
+            video.play();
+          };
+        })
+        .catch(function (err) {
+          console.log(err.name + ': ' + err.message);
+        });
+    },
+    action() {
+      this.$nextTick(() => {
+        let canvas = document.getElementById('canvas');
+        let context = canvas.getContext('2d');
+        context.drawImage(video, 0, 0, 640, 480);
+        var dataURL = canvas.toDataURL('image/jpg');
+        this.$emit('sentDataURL', dataURL);
+      });
+    },
+  },
+  components: {},
+};
+</script>
+
+<style scope>
+.home {
+  width: 200px;
+  margin: 0 auto;
+  position: relative;
+}
+.home input[type='file'] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: 200px;
+  z-index: 9;
+  opacity: 0;
+}
+.home p {
+  font-size: 13px;
+  color: #8d8d8d;
+}
+.preview img {
+  width: 100%;
+}
+</style>

package/templates/vue-app/files/src/views/components/camera/cameraTest.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <!--开启摄像头-->
+    <!-- <Button  type="primary"  @click="callCamera" style="margin-right: 10px;">开启摄像头</Button> -->
+    <!-- <Button @click = 'changePhoto' style="margin-right: 10px;">切换摄像头</Button> -->
+    <!--关闭摄像头-->
+    <!-- <Button  type="primary"  @click="closeCamera">关闭摄像头</Button> -->
+
+    <el-row>
+      <el-col :span="18">
+        <!--图片展示-->
+        <video ref="video" width="640" height="480" autoplay></video>
+      </el-col>
+      <el-col :span="6">
+        <!--canvas截取流-->
+        <canvas ref="canvas" width="200" height="150"></canvas>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="6">
+        <el-select v-model="modelSel" @change="changeSel" placeholder="请选择视频源">
+          <el-option
+            v-for="item in videoArr"
+            :key="item.index"
+            :label="item.label"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="6"><el-button type="primary" @click="photograph">拍照</el-button></el-col>
+    </el-row>
+    <!-- <Select v-model="modelSel" style="width:200px" @on-change="changeSel">
+            <Option v-for="(item,index) in videoArr" :value="item.id" :key="index">{{ item.label }}</Option>
+        </Select> -->
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      videoArr: [], //所有的摄像头
+      modelSel: '', //
+      myInterval: null,
+    };
+  },
+  created() {
+    this.changePhoto();
+  },
+  methods: {
+    // 调用摄像头
+    callCamera() {
+      // H5调用电脑摄像头API
+      navigator.mediaDevices
+        .getUserMedia({
+          video: true,
+        })
+        .then(success => {
+          // 摄像头开启成功
+          this.$refs['video'].srcObject = success;
+          // 实时拍照效果
+          this.$refs['video'].play();
+        })
+        .catch(error => {
+          console.error('摄像头开启失败，请检查摄像头是否可用！');
+        });
+    },
+    // 拍照
+    photograph() {
+      let ctx = this.$refs['canvas'].getContext('2d');
+      // 把当前视频帧内容渲染到canvas上
+      ctx.drawImage(this.$refs['video'], 0, 0, 200, 150);
+      // 转base64格式、图片格式转换、图片质量压缩---支持两种格式image/jpeg+image/png
+      let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg');
+      console.log(imgBase64);
+      this.$emit('sentDataURL', imgBase64);
+    },
+    // 关闭摄像头
+    closeCamera() {
+      if (!this.$refs['video'].srcObject) return;
+      let stream = this.$refs['video'].srcObject;
+      let tracks = stream.getTracks();
+      tracks.forEach(track => {
+        track.stop();
+      });
+      this.$refs['video'].srcObject = null;
+    },
+
+    //切换本地摄像头
+    changePhoto() {
+      /**得到所有的设备*/
+      navigator.mediaDevices
+        .enumerateDevices()
+        .then(devices => {
+          console.log(devices);
+          this.videoArr = [];
+          devices.forEach(device => {
+            if (device.kind == 'videoinput') {
+              this.videoArr.push({
+                label: device.label,
+                id: device.deviceId,
+              });
+            }
+          });
+          for (var i = 0; i < this.videoArr.length; i++) {
+            if (this.videoArr[i].label != '') {
+            }
+            this.modelSel = this.videoArr[i].label;
+            break;
+          }
+        })
+        .catch(function (err) {
+          layer.msg(err.name + ': ' + err.message);
+        });
+      this.callCamera();
+    },
+    //切换下拉
+    changeSel(val) {
+      const videoConstraints = {};
+      if (val === '') {
+        videoConstraints.facingMode = 'environment';
+      } else {
+        videoConstraints.deviceId = { exact: val };
+      }
+      var constraints = {
+        video: videoConstraints,
+      };
+      console.log(constraints);
+      this.getUserMedia(constraints);
+    },
+
+    /**打开摄像头*/
+    getUserMedia(constraints, success, error) {
+      if (navigator.mediaDevices.getUserMedia) {
+        //最新的标准API
+        navigator.mediaDevices
+          .getUserMedia(constraints)
+          .then(success => {
+            // 摄像头开启成功
+            this.$refs['video'].srcObject = success;
+            // 实时拍照效果
+            this.$refs['video'].play();
+          })
+          .catch(error);
+      } else if (navigator.webkitGetUserMedia) {
+        //webkit核心浏览器
+        navigator.webkitGetUserMedia(constraints, success, error);
+      } else if (navigator.mozGetUserMedia) {
+        //firfox浏览器
+        navigator.mozGetUserMedia(constraints, success, error);
+      } else if (navigator.getUserMedia) {
+        //旧版API
+        navigator.getUserMedia(constraints, success, error);
+      }
+    },
+  },
+};
+</script>

package/templates/vue-app/files/src/views/components/excel/upload-excel.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="app-container">
+    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
+    <el-table :data="tableData" border highlight-current-row style="width: 100%; margin-top: 20px">
+      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import UploadExcelComponent from '@/components/UploadExcel/index.vue';
+
+export default {
+  name: 'UploadExcel',
+  components: { UploadExcelComponent },
+  data() {
+    return {
+      tableData: [],
+      tableHeader: [],
+    };
+  },
+  methods: {
+    beforeUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1;
+      if (isLt1M) {
+        return true;
+      }
+
+      this.$message({
+        message: '请不要上传大于1m的文件.',
+        type: 'warning',
+      });
+      return false;
+    },
+    handleSuccess({ results, header }) {
+      this.tableData = results;
+      this.tableHeader = header;
+    },
+  },
+};
+</script>