ylyx-cli 1.0.0

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

@@ -0,0 +1,177 @@
+<template>
+  <el-color-picker
+    v-model="theme"
+    :predefine="[
+      '#409EFF',
+      '#1890ff',
+      '#304156',
+      '#212121',
+      '#11a983',
+      '#13c2c2',
+      '#6959CD',
+      '#f5222d',
+    ]"
+    class="theme-picker"
+    popper-class="theme-picker-dropdown" />
+</template>
+
+<script>
+const version = require('element-ui/package.json').version; // element-ui version from node_modules
+const ORIGINAL_THEME = '#409EFF'; // default color
+import Cookies from 'js-cookie';
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      theme: '',
+    };
+  },
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme;
+    },
+  },
+  watch: {
+    defaultTheme: {
+      handler: function (val, oldVal) {
+        this.theme = val;
+      },
+      immediate: true,
+    },
+    async theme(val) {
+      Cookies.set('theme', val, { expires: 365 });
+      const oldVal = this.chalk
+        ? this.theme
+        : Cookies.get('theme')
+          ? Cookies.get('theme')
+          : ORIGINAL_THEME;
+      if (typeof val !== 'string') return;
+      const themeCluster = this.getThemeCluster(val.replace('#', ''));
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
+
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
+          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster);
+
+          let styleTag = document.getElementById(id);
+          if (!styleTag) {
+            styleTag = document.createElement('style');
+            styleTag.setAttribute('id', id);
+            document.head.appendChild(styleTag);
+          }
+          styleTag.innerText = newStyle;
+        };
+      };
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+        await this.getCSSString(url, 'chalk');
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style');
+
+      chalkHandler();
+
+      const styles = [].slice.call(document.querySelectorAll('style')).filter(style => {
+        const text = style.innerText;
+        return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
+      });
+      styles.forEach(style => {
+        const { innerText } = style;
+        if (typeof innerText !== 'string') return;
+        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
+      });
+
+      this.$emit('change', val);
+    },
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style;
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
+      });
+      return newStyle;
+    },
+
+    getCSSString(url, variable) {
+      return new Promise(resolve => {
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
+            resolve();
+          }
+        };
+        xhr.open('GET', url);
+        xhr.send();
+      });
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        if (tint === 0) {
+          // when primary color is in its rgb space
+          return [red, green, blue].join(',');
+        } else {
+          red += Math.round(tint * (255 - red));
+          green += Math.round(tint * (255 - green));
+          blue += Math.round(tint * (255 - blue));
+
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
+
+          return `#${red}${green}${blue}`;
+        }
+      };
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        red = Math.round((1 - shade) * red);
+        green = Math.round((1 - shade) * green);
+        blue = Math.round((1 - shade) * blue);
+
+        red = red.toString(16);
+        green = green.toString(16);
+        blue = blue.toString(16);
+
+        return `#${red}${green}${blue}`;
+      };
+
+      const clusters = [theme];
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+      }
+      clusters.push(shadeColor(theme, 0.1));
+      return clusters;
+    },
+  },
+};
+</script>
+
+<style>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
+.theme-picker .el-color-picker__trigger {
+  height: 26px !important;
+  width: 26px !important;
+  padding: 2px;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <input
+      ref="excel-upload-input"
+      class="excel-upload-input"
+      type="file"
+      accept=".xlsx, .xls"
+      @change="handleClick" />
+    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+      拖拽excel文件到此处 或者
+      <el-button
+        :loading="loading"
+        style="margin-left: 16px"
+        size="mini"
+        type="primary"
+        @click="handleUpload">
+        浏览
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx';
+
+export default {
+  props: {
+    beforeUpload: Function, // eslint-disable-line
+    onSuccess: Function, // eslint-disable-line
+  },
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null,
+      },
+    };
+  },
+  methods: {
+    generateData({ header, results }) {
+      this.excelData.header = header;
+      this.excelData.results = results;
+      this.onSuccess && this.onSuccess(this.excelData);
+    },
+    handleDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (this.loading) return;
+      const files = e.dataTransfer.files;
+      if (files.length !== 1) {
+        this.$message.error('只支持单个文件上传!');
+        return;
+      }
+      const rawFile = files[0];
+
+      if (!this.isExcel(rawFile)) {
+        this.$message.error('只支持.xlsx, .xls, .csv 格式文件');
+        return false;
+      }
+      this.upload(rawFile);
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    handleDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+    },
+    handleUpload() {
+      this.$refs['excel-upload-input'].click();
+    },
+    handleClick(e) {
+      const files = e.target.files;
+      const rawFile = files[0]; // only use files[0]
+      if (!rawFile) return;
+      this.upload(rawFile);
+    },
+    upload(rawFile) {
+      this.$refs['excel-upload-input'].value = null; // fix can't select the same excel
+
+      if (!this.beforeUpload) {
+        this.readerData(rawFile);
+        return;
+      }
+      const before = this.beforeUpload(rawFile);
+      if (before) {
+        this.readerData(rawFile);
+      }
+    },
+    readerData(rawFile) {
+      this.loading = true;
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = e => {
+          const data = e.target.result;
+          const workbook = XLSX.read(data, { type: 'array' });
+          const firstSheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[firstSheetName];
+          const header = this.getHeaderRow(worksheet);
+          const results = XLSX.utils.sheet_to_json(worksheet);
+          this.generateData({ header, results });
+          this.loading = false;
+          resolve();
+        };
+        reader.readAsArrayBuffer(rawFile);
+      });
+    },
+    getHeaderRow(sheet) {
+      const headers = [];
+      const range = XLSX.utils.decode_range(sheet['!ref']);
+      let C;
+      const R = range.s.r;
+      /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) {
+        /* walk every column in the range */
+        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
+        /* find the cell in the first row */
+        let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
+        headers.push(hdr);
+      }
+      return headers;
+    },
+    isExcel(file) {
+      return /\.(xlsx|xls|csv)$/.test(file.name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.excel-upload-input {
+  display: none;
+  z-index: -9999;
+}
+.drop {
+  border: 2px dashed #bbb;
+  width: 600px;
+  height: 160px;
+  line-height: 160px;
+  margin: 0 auto;
+  font-size: 24px;
+  border-radius: 5px;
+  text-align: center;
+  color: #bbb;
+  position: relative;
+}
+</style>

package/templates/vue-app/files/src/components/WaterMark/setWaterMark.js

@@ -0,0 +1,68 @@
+import moment from 'moment';
+const initProps = {
+  width: 700, // canvas 的大小
+  height: 550,
+  font: '40px arial,sans-serif', // 如果水印是文字
+  text: '',
+  // img: { // 如果水印是图片
+  //   src: require('@/assets/images/logo-white.png'),
+  //   imgWidth: 200,
+  //   imgHeight: 50
+  // },
+  zIndex: 1, // 水印所在层index
+  devicePixelRatio: 1, // 图像缩放比例
+};
+
+const setMark = (parentDom, waterMarkProp) => {
+  const props = Object.assign({ ...initProps }, { ...waterMarkProp });
+  let dataUrlType = ''; // 转为 base64 的格式
+  let styleSize = props.width / props.devicePixelRatio;
+  const canvas = document.createElement('canvas');
+  let context = canvas.getContext('2d');
+  canvas.width = props.width;
+  canvas.height = props.height;
+  canvas.style.border = '1px solid red';
+  context.translate(props.width / 3, props.height / 2);
+  context.rotate((Math.PI / 180) * -25);
+
+  // 之所以要动态添加一个div，是因为后面界面要监听这个dom元素
+  const div = document.createElement('div');
+  div.style.backgroundSize = `${styleSize}px ${styleSize}px`;
+  div.style.backgroundRepeat = 'repeat';
+  div.style.width = '100%';
+  div.style.height = 'calc(100% - 200px)';
+  div.style.zIndex = props.zIndex;
+  div.style.opacity = '0.3';
+  div.style.position = 'absolute';
+  div.style.top = '200px';
+
+  div.className = 'water-mark-bg';
+
+  if (initProps.img) {
+    let img = new Image();
+    img.src = initProps.img.src;
+    img.style.border = '1px solid #000';
+    const { imgWidth, imgHeight } = props.img;
+    dataUrlType = 'image/png';
+    img.onload = function () {
+      // 如果是图片，要等待图片加载完才可以
+      context.drawImage(img, 0, 0, imgWidth / 2, imgHeight / 2);
+      // context.fillRect(0,0,imgWidth / 2,imgHeight / 2);
+      div.style.backgroundImage = `url("${canvas.toDataURL(dataUrlType)}")`;
+      parentDom.appendChild(div);
+    };
+  } else {
+    context.fillStyle = 'rgba(0, 0, 0, 0.3)';
+    context.font = props.font;
+    context.textAlign = 'center';
+    context.fillText(props.text, props.width / 3, 0);
+    if (props.showTime && props.text != '') {
+      context.fillStyle = 'rgba(0, 0, 0, 0.3)';
+      context.fillText(moment().format('YYYY-MM-DD HH:mm:ss'), props.width / 3, 50);
+    }
+    context.textBaseline = 'middle';
+    div.style.backgroundImage = `url("${canvas.toDataURL(dataUrlType)}")`;
+    parentDom.appendChild(div);
+  }
+};
+export { setMark };

package/templates/vue-app/files/src/components/WaterMark/waterMark.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="water-box" ref="waterMarkRef">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { setMark } from './setWaterMark';
+export default {
+  props: {
+    waterMarkProp: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+
+  watch: {
+    waterMarkProp: {
+      handler(newVlaue) {
+        this.waterMarkRefFn();
+      },
+      deep: true,
+    },
+  },
+
+  updated() {},
+  mounted() {
+    setTimeout(() => {
+      this.waterMarkRefFn();
+    }, 0);
+  },
+
+  methods: {
+    waterMarkRefFn() {
+      const waterMarkRef = this.$refs.waterMarkRef;
+      setMark(waterMarkRef, this.waterMarkProp);
+      var MutationObserver =
+        window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+      let ob = new MutationObserver(function (mutationRecoards, observer) {
+        // observer 观察者实例
+        mutationRecoards.forEach(record => {
+          (record.removedNodes || []).forEach(element => {
+            if (element.className === 'water-mark-bg') {
+              setMark(waterMarkRef);
+            }
+          });
+        });
+      });
+      ob.observe(this.$refs.waterMarkRef, {
+        cattributes: true,
+        childList: true,
+        subtree: true,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.water-box {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+}
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+  <player :config="config" @player="Player = $event" />
+</template>
+
+<script>
+import player from 'xgplayer-vue';
+export default {
+  name: 'Xgplayer',
+  components: {
+    player,
+  },
+  props: {
+    option: {
+      url: {
+        type: String,
+        required: true,
+      },
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+  },
+  data() {
+    return {
+      defaultConfig: {
+        autoplay: true,
+        volume: 0.3,
+        playsinline: true,
+        height: '100%',
+        width: '100%',
+        whitelist: [''],
+      },
+      Player: null,
+    };
+  },
+  computed: {
+    config() {
+      return Object.assign(this.defaultConfig, this.option);
+    },
+  },
+};
+</script>
+
+<style>
+.xgplayer-skin-default .xgplayer-poster {
+  background-position: 50% 100% !important;
+}
+</style>

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

@@ -0,0 +1,81 @@
+<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/yaml/yaml';
+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-yaml',
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 0.9,
+      // 替换主题这里需修改名称
+      theme: 'idea',
+    });
+    this.editor.setSize('auto', this.height);
+    this.editor.setValue(this.value);
+    this.editor.on('change', cm => {
+      this.$emit('changed', cm.getValue());
+      this.$emit('input', cm.getValue());
+    });
+  },
+  methods: {
+    getValue() {
+      return this.editor.getValue();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.json-editor {
+  height: 100%;
+  margin-bottom: 10px;
+}
+.json-editor >>> .CodeMirror {
+  font-size: 13px;
+  overflow-y: auto;
+  font-weight: normal;
+}
+.json-editor >>> .CodeMirror-scroll {
+}
+.json-editor >>> .cm-s-rubyblue span.cm-string {
+  color: #f08047;
+}
+</style>

package/templates/vue-app/files/src/layout/components/AppMain.vue

@@ -0,0 +1,67 @@
+<template>
+  <section class="app-main">
+    <div class="container">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive :include="cachedViews">
+          <router-view :key="key" />
+        </keep-alive>
+      </transition>
+      <div v-if="$store.state.settings.showFooter" id="el-main-footer">
+        <p v-html="$store.state.settings.footerTxt" />
+        <p>
+          <span v-html="$store.state.settings.caseNumber" style="padding-right: 15px"></span>
+          <img :src="gongan" width="12" />
+          <span v-html="$store.state.settings.gonganNumber"></span>
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews;
+    },
+    key() {
+      return this.$route.path;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.fixed-header + .app-main {
+  padding-top: 50px;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header + .app-main {
+    padding-top: 84px;
+  }
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>