ylyx-cli 1.0.0

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

@@ -0,0 +1,100 @@
+<template>
+  <div :class="{ hidden: hidden }" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to';
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 20,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50];
+      },
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper',
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit('update:page', val);
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit('update:limit', val);
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <div :style="{ zIndex: zIndex, height: height, width: width }" class="pan-item">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <img :src="image" class="pan-thumb" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true,
+    },
+    zIndex: {
+      type: Number,
+      default: 1,
+    },
+    width: {
+      type: String,
+      default: '150px',
+    },
+    height: {
+      type: String,
+      default: '150px',
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.pan-info-roles-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
+}
+
+.pan-thumb:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  border-radius: 50%;
+  top: 40%;
+  left: 95%;
+  margin: -4px 0 0 -4px;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(14, 14, 14, 1) 0%,
+    rgba(125, 126, 125, 1) 100%
+  );
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+}
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.pan-info h3 {
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow:
+    0 0 1px #fff,
+    0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pan-info p {
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pan-info p a {
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition:
+    transform 0.3s ease-in-out 0.2s,
+    opacity 0.3s ease-in-out 0.2s,
+    background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
+}
+
+.pan-info p a:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.pan-item:hover .pan-thumb {
+  transform: rotate(-110deg);
+}
+
+.pan-item:hover .pan-info p a {
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
+}
+</style>

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

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/templates/vue-app/files/src/components/Permission/index.js

@@ -0,0 +1,13 @@
+import permission from './permission';
+
+const install = function (Vue) {
+  Vue.directive('permission', permission);
+};
+
+if (window.Vue) {
+  window['permission'] = permission;
+  Vue.use(install); // eslint-disable-line
+}
+
+permission.install = install;
+export default permission;

package/templates/vue-app/files/src/components/Permission/permission.js

@@ -0,0 +1,21 @@
+import store from '@/store';
+
+export default {
+  inserted(el, binding) {
+    const { value } = binding;
+    const roles = store.getters && store.getters.roles;
+    if (value && value instanceof Array) {
+      if (value.length > 0) {
+        const permissionRoles = value;
+        const hasPermission = roles.some(role => {
+          return permissionRoles.includes(role);
+        });
+        if (!hasPermission) {
+          el.parentNode && el.parentNode.removeChild(el);
+        }
+      }
+    } else {
+      throw new Error(`使用方式： v-permission="['admin','editor']"`);
+    }
+  },
+};

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

@@ -0,0 +1,149 @@
+<template>
+  <div ref="rightPanel" :class="{ show: show }" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils';
+
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean,
+    },
+    buttonTop: {
+      default: 250,
+      type: Number,
+    },
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.settings.showSettings;
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val,
+        });
+      },
+    },
+    theme() {
+      return this.$store.state.settings.theme;
+    },
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick();
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel');
+      } else {
+        removeClass(document.body, 'showRightPanel');
+      }
+    },
+  },
+  mounted() {
+    this.insertToBody();
+    this.addEventClick();
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel;
+    elx.remove();
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar);
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel');
+      if (!parent) {
+        this.show = false;
+        window.removeEventListener('click', this.closeSidebar);
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel;
+      const body = document.querySelector('body');
+      body.insertBefore(elx, body.firstChild);
+    },
+  },
+};
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+  background: rgba(0, 0, 0, 0.2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull';
+
+export default {
+  name: 'Screenfull',
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.destroy();
+  },
+  methods: {
+    click() {
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning',
+        });
+        return false;
+      }
+      screenfull.toggle();
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen;
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change);
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.screenfull-svg {
+  display: inline-block;
+  cursor: pointer;
+  fill: #5a5e66;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <el-dropdown trigger="click" @command="handleSetSize">
+    <div>
+      <svg-icon class-name="size-icon" icon-class="size" />
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+        v-for="item of sizeOptions"
+        :key="item.value"
+        :disabled="size === item.value"
+        :command="item.value">
+        {{ item.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sizeOptions: [
+        { label: '大号', value: 'bigger' },
+        { label: '默认', value: 'default' },
+        // { label: 'Medium', value: 'medium'},
+        { label: '小号', value: 'small' },
+        // { label: 'Mini', value: 'mini'}
+      ],
+    };
+  },
+  computed: {
+    size() {
+      return this.$store.getters.size;
+    },
+  },
+  methods: {
+    handleSetSize(size) {
+      this.$ELEMENT.size = size;
+      this.$store.dispatch('app/setSize', size);
+      this.refreshView();
+      this.$message({
+        message: '布局设置成功',
+        type: 'success',
+      });
+    },
+    refreshView() {
+      // In order to make the cached page re-rendered
+      this.$store.dispatch('tagsView/delAllCachedViews', this.$route);
+
+      const { fullPath } = this.$route;
+
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: '/redirect' + fullPath,
+        });
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate';
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass);
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className;
+      } else {
+        return 'svg-icon';
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>