ylyx-cli 1.0.0

package/templates/vue-app/files/src/assets/styles/publicStyle.scss

@@ -0,0 +1,224 @@
+// 原始标签默认的样式
+article,
+aside,
+blockquote,
+body,
+button,
+code,
+dd,
+details,
+div,
+dl,
+dt,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+input,
+legend,
+li,
+menu,
+nav,
+ol,
+p,
+pre,
+section,
+td,
+textarea,
+th,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+// 设置单选按钮组样式
+.el-radio-group {
+  margin-bottom: 8px !important;
+  .el-radio-button.is-active {
+    .el-radio-button__inner {
+      background: #e6f1fc;
+      color: #1989fa;
+      border-color: #a3d0fd;
+    }
+  }
+}
+// 设置卡片切换组件切换样式
+.el-tabs {
+  margin-bottom: 0px;
+  .el-tabs__header {
+    margin-bottom: 8px;
+  }
+}
+// 设置行表单 el-form-item 间距
+.searchFormStyle.el-form {
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    margin-right: 8px;
+    margin-bottom: 15px;
+    display: flex;
+    .el-form-item__content {
+      display: flex;
+      & > .el-input {
+        width: 160px;
+      }
+      & > .el-select {
+        width: 140px;
+      }
+      & > .el-button + .el-button {
+        margin-left: 8px;
+        display: inline-block;
+      }
+    }
+    .el-input {
+      .el-input__inner {
+        padding: 0 28px 0 12px !important;
+      }
+    }
+    .el-input--suffix {
+      right: 0 !important;
+    }
+  }
+}
+.isDisabledDate {
+  .available.today {
+    div {
+      background-color: #f5f7fa;
+      opacity: 1;
+      cursor: not-allowed;
+      color: #c0c4cc;
+
+      span {
+        color: #c0c4cc;
+      }
+    }
+  }
+  .available.today.in-range.end-date div {
+    background-color: #f5f7fa;
+    opacity: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: 0;
+    cursor: not-allowed;
+    color: #c0c4cc;
+
+    span {
+      background-color: #f5f7fa;
+      color: #c0c4cc;
+    }
+  }
+}
+// 查询
+.queryBtn.el-button {
+  background: #008df6;
+  border: 1px solid #008df6;
+  color: #fff;
+  height: 32px;
+  &:hover {
+    background: #008df6;
+    border: 1px solid #008df6;
+    color: #fff;
+  }
+  &:active {
+    background: #008df6;
+    border: 1px solid #008df6;
+    color: #fff;
+  }
+  &:focus {
+    background: #008df6;
+    border: 1px solid #008df6;
+    color: #fff;
+  }
+}
+// 重置
+.resetBtn.el-button {
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  height: 32px;
+  &:hover {
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+  }
+  &:active {
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+  }
+  &:focus {
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+  }
+}
+.el-table--fit {
+  border: 1px solid #f0f0f0 !important;
+}
+// 默认
+.el-table {
+  .el-table__cell {
+    padding: 7px 0;
+    .el-button--text {
+      padding: 0 !important;
+    }
+  }
+  thead tr th {
+    background: rgba(0, 0, 0, 0.02) !important;
+    color: #111111 !important;
+    padding: 8px 0 !important;
+  }
+  tbody tr td {
+    color: #606266;
+  }
+}
+// 大号
+.el-table--bigger {
+  font-size: 16px !important;
+}
+// 默认
+.el-table--medium {
+  font-size: 14px !important;
+}
+// 小号
+.el-table--small {
+  font-size: 12px !important;
+  .el-table__cell {
+    padding: 5px 0;
+    .el-button--text {
+      padding: 0 !important;
+    }
+  }
+}
+// 弹框
+.el-dialog {
+  .el-dialog__header {
+    border-bottom: 1px solid #eee;
+    padding: 10px 16px;
+    .el-dialog__close {
+      position: relative;
+      right: -3px;
+    }
+  }
+  .el-dialog__body {
+    padding: 14px 16px 20px;
+  }
+  .el-dialog__footer {
+    border-top: 1px solid #eee;
+    padding: 14px 16px;
+  }
+}

package/templates/vue-app/files/src/assets/styles/sidebar.scss

@@ -0,0 +1,239 @@
+#app {
+  .main-container {
+    min-height: 100%;
+    transition: margin-left 0.28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition:
+        0s width ease-in-out,
+        0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 10px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      height: 50px;
+      line-height: 50px;
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+    .el-menu-item {
+      &.is-active {
+        background: $subMenuActive !important;
+        border-left: 4px solid $menuActiveText;
+        color: #fff !important;
+      }
+    }
+
+    .is-opened > .el-submenu__title {
+      color: $subMenuActiveText !important;
+      background: $subMenuActive !important;
+      border-bottom: 3px solid $menuBg;
+    }
+
+    & .nest-menu .el-submenu > .el-submenu__title,
+    & .el-submenu .el-menu-item {
+      height: 50px;
+      line-height: 50px;
+      min-width: $sideBarWidth !important;
+      background: $menuBg !important;
+      &:hover {
+        background: $subMenuActive !important;
+      }
+      &.is-active {
+        background: $subMenuActive !important;
+        border-left: 4px solid $menuActiveText;
+        color: #fff !important;
+        // padding-left: 36px !important;
+      }
+    }
+  }
+  .router-link-exact-active {
+    // 单独菜单
+    .submenu-title-noDropdown {
+      &.is-active {
+        background: $subMenuActive !important;
+        border-left: 4px solid $menuActiveText;
+        color: #fff !important;
+        // padding-left: 36px !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      & > .el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        & > .el-submenu__title {
+          & > span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0;
+    }
+
+    .sidebar-container {
+      transition: transform 0.28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  & > .el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu > .el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  > .el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

package/templates/vue-app/files/src/assets/styles/transition.scss

@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all 0.5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

package/templates/vue-app/files/src/assets/styles/variables.scss

@@ -0,0 +1,44 @@
+// base color
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
+
+// sidebar
+$menuText: #bfcbd9;
+$menuActiveText: #0081e3; //#409EFF;
+$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg: #081926; // #304156;
+$menuHover: #263445;
+
+$subMenuBg: #1f2d3d;
+
+$subMenuActive: linear-gradient(
+  91deg,
+  rgba(12, 110, 184, 0.3) 0%,
+  rgba(12, 110, 184, 0.26) 23%,
+  rgba(12, 110, 184, 0.22) 53%,
+  rgba(12, 110, 184, 0.11) 88%,
+  rgba(12, 110, 184, 0) 100%
+);
+$subMenuHover: #001528;
+
+$sideBarWidth: 200px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

package/templates/vue-app/files/src/common/flexible.js

@@ -0,0 +1,145 @@
+(function (win, lib) {
+  var doc = win.document;
+  var docEl = doc.documentElement;
+  var metaEl = doc.querySelector('meta[name="viewport"]');
+  var flexibleEl = doc.querySelector('meta[name="flexible"]');
+  var dpr = 0;
+  var scale = 0;
+  var tid;
+  var flexible = lib.flexible || (lib.flexible = {});
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例');
+    var match = metaEl
+      .getAttribute('content')
+      // eslint-disable-next-line no-useless-escape
+      .match(/initial\-scale=([\d\.]+)/);
+    if (match) {
+      scale = parseFloat(match[1]);
+      dpr = parseInt(1 / scale);
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content');
+    if (content) {
+      // eslint-disable-next-line no-useless-escape
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+      // eslint-disable-next-line no-useless-escape
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    // eslint-disable-next-line no-unused-vars
+    var isAndroid = win.navigator.appVersion.match(/android/gi);
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+    var devicePixelRatio = win.devicePixelRatio;
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3;
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2;
+      } else {
+        dpr = 1;
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1;
+    }
+    scale = 1 / dpr;
+  }
+
+  docEl.setAttribute('data-dpr', dpr);
+  if (!metaEl) {
+    metaEl = doc.createElement('meta');
+    metaEl.setAttribute('name', 'viewport');
+    metaEl.setAttribute(
+      'content',
+      'initial-scale=' +
+        scale +
+        ', maximum-scale=' +
+        scale +
+        ', minimum-scale=' +
+        scale +
+        ', user-scalable=no'
+    );
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl);
+    } else {
+      var wrap = doc.createElement('div');
+      wrap.appendChild(metaEl);
+      doc.write(wrap.innerHTML);
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width;
+    // 最小1366px，最大适配2560px
+    if (width / dpr > 540) {
+      width = width * dpr;
+    }
+    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
+    var rem = width / 10;
+    docEl.style.fontSize = rem + 'px';
+    flexible.rem = win.rem = rem;
+  }
+
+  win.addEventListener(
+    'resize',
+    function () {
+      clearTimeout(tid);
+      tid = setTimeout(refreshRem, 300);
+    },
+    false
+  );
+  win.addEventListener(
+    'pageshow',
+    function (e) {
+      if (e.persisted) {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+      }
+    },
+    false
+  );
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px';
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      // eslint-disable-next-line no-unused-vars
+      function (e) {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+      },
+      false
+    );
+  }
+
+  refreshRem();
+
+  flexible.dpr = win.dpr = dpr;
+  flexible.refreshRem = refreshRem;
+  flexible.rem2px = function (d) {
+    var val = parseFloat(d) * this.rem;
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px';
+    }
+    return val;
+  };
+  flexible.px2rem = function (d) {
+    var val = parseFloat(d) / this.rem;
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem';
+    }
+    return val;
+  };
+})(window, window['lib'] || (window['lib'] = {}));