simple-frame-unit 1.0.2

package/src/components/ed-base-vue/style/custom.scss

@@ -0,0 +1,107 @@
+.ed-drag--cursor_move {
+  cursor: move;
+}
+
+.es-form--action {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.el-dropdown-link {
+  color: #409EFF;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.es-dialog--operate {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  div:last-child{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 20px;
+  }
+}
+
+.es-box-card {
+  .es-box-card--header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div:last-child, .es-card-header-operate{
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .view-list-card.active {
+    background-color: rgb(225, 243, 216);
+  }
+}
+
+.es-box-card--top {
+  margin-top: 10px;
+}
+
+
+.es-row, .es-row--col{
+  height: 100%;
+  .es-box-card {
+    height: 100% ;
+  }
+}
+
+
+// ed-upload-list__item
+.ed-upload-list__item {
+  transition: all .5s cubic-bezier(.55, 0, .1, 1);
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.8;
+  margin-top: 5px;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 4px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+
+  &:hover {
+    background-color: #f5f7fa;
+
+    .el-icon-circle-close {
+      opacity: 1
+    }
+  }
+
+  .ed-upload-list__item-name {
+    color: #606266;
+    display: block;
+    margin-right: 40px;
+    overflow: hidden;
+    padding-left: 4px;
+    text-overflow: ellipsis;
+    transition: color .3s;
+    white-space: nowrap;
+    width: 100%;
+
+    &:hover {
+      color: #409eff;
+      cursor: pointer;
+    }
+  }
+
+  .ed-upload-list__item-extra {
+    margin-right: 5px;
+  }
+
+  .el-icon-circle-close {
+    color: #606266;
+    opacity: 0;
+  }
+}

package/src/components/ed-base-vue/style/deep.scss

@@ -0,0 +1,100 @@
+/**
+ * vue样式穿透 ::v-deep
+ * 修改element样式
+ */
+::v-deep {
+
+  // el-card 默认样式修改
+  .el-card {
+    .el-card__header {
+      font-size: 18px;
+      padding: 10px;
+    }
+  }
+
+  .el-card.is-never-shadow {
+    .el-card__header {
+      opacity: 0.5;
+    }
+  }
+
+  // el-drawer 默认样式修改
+  .ed-drawer {
+    .el-drawer__header {
+      position: relative;
+      padding: 16px 24px;
+      border-bottom: 1px solid #e8e8e8;
+      border-radius: 4px 4px 0 0;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      font-size: 18px;
+      margin-bottom: 0;
+    }
+
+    .el-drawer__body {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+
+      .ed-drawer__content {
+        padding: 15px;
+        flex: 1;
+        overflow: auto;
+      }
+
+      .ed-drawer__footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        border-top: 1px solid #e8e8e8;
+        padding: 0 16px;
+        background: #fff;
+        border-radius: 0 0 2px 2px;
+        width: 100%;
+
+        .el-button {
+          width: 100px;
+        }
+
+        .el-button:last-child {
+          margin-left: 30px;
+        }
+      }
+    }
+  }
+
+  .ed-dialog {
+    .el-dialog__header {
+      position: relative;
+      padding: 16px 24px;
+      border-bottom: 1px solid #e8e8e8;
+      border-radius: 4px 4px 0 0;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      font-size: 18px;
+      margin-bottom: 0;
+    }
+
+    .el-dialog__body {
+      flex: 1;
+      padding: 0
+    }
+
+    .el-dialog__footer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      border-top: 1px solid #e8e8e8;
+      padding: 0;
+      background: #fff;
+      border-radius: 0 0 2px 2px;
+      width: 100%;
+
+      .el-button {
+        width: 100px;
+      }
+
+    }
+  }
+}

package/src/components/ed-base-vue/style/index.scss

@@ -0,0 +1,4 @@
+@import "./deep.scss";
+@import "./custom.scss";
+
+

package/src/components/ed-base-vue/tools/date-format.js

@@ -0,0 +1,315 @@
+// yyyy-MM-dd hh:mm:ss.SSS 所有支持的类型
+function pad(str, length = 2) {
+    str += ''
+    while (str.length < length) {
+        str = '0' + str
+    }
+    return str.slice(-length)
+}
+
+const parser = {
+    yyyy: (dateObj) => {
+        return pad(dateObj.year, 4)
+    },
+    yy: (dateObj) => {
+        return pad(dateObj.year)
+    },
+    MM: (dateObj) => {
+        return pad(dateObj.month)
+    },
+    M: (dateObj) => {
+        return dateObj.month
+    },
+    dd: (dateObj) => {
+        return pad(dateObj.day)
+    },
+    d: (dateObj) => {
+        return dateObj.day
+    },
+    hh: (dateObj) => {
+        return pad(dateObj.hour)
+    },
+    h: (dateObj) => {
+        return dateObj.hour
+    },
+    mm: (dateObj) => {
+        return pad(dateObj.minute)
+    },
+    m: (dateObj) => {
+        return dateObj.minute
+    },
+    ss: (dateObj) => {
+        return pad(dateObj.second)
+    },
+    s: (dateObj) => {
+        return dateObj.second
+    },
+    SSS: (dateObj) => {
+        return pad(dateObj.millisecond, 3)
+    },
+    S: (dateObj) => {
+        return dateObj.millisecond
+    },
+}
+
+// 这都n年了iOS依然不认识2020-12-12，需要转换为2020/12/12
+export function getDate(time) {
+    if (time instanceof Date) {
+        return time
+    }
+    switch (typeof time) {
+        case 'string': {
+            // 2020-12-12T12:12:12.000Z、2020-12-12T12:12:12.000
+            if (time.indexOf('T') > -1) {
+                return new Date(time)
+            }
+
+            // ios时间格式转换
+            if (time.includes('-')) {
+                return new Date(time.replace(/-/g, '/'))
+            }
+
+            // yyyyMMdd
+            if (isNumeric(time) && isDate(time)) {
+                return parse(time)
+            }
+
+            // 时间戳
+            if (isNumeric(time) && /^\d{10}$|^\d{13}$/.test(time)) {
+                let t = time.length === 10 ? time * 1000 : Number(time)
+                return new Date(t)
+            }
+        }
+        default:
+            return new Date(time)
+    }
+}
+
+export function formatDate(date, format = 'yyyy/MM/dd hh:mm:ss') {
+    if (!date && date !== 0) {
+        return ''
+    }
+    date = getDate(date)
+    const dateObj = {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        day: date.getDate(),
+        hour: date.getHours(),
+        minute: date.getMinutes(),
+        second: date.getSeconds(),
+        millisecond: date.getMilliseconds()
+    }
+    const tokenRegExp = /yyyy|yy|MM|M|dd|d|hh|h|mm|m|ss|s|SSS|SS|S/
+    let flag = true
+    let result = format
+    while (flag) {
+        flag = false
+        result = result.replace(tokenRegExp, function (matched) {
+            flag = true
+            return parser[matched](dateObj)
+        })
+    }
+    return result
+}
+
+export function friendlyDate(time, {locale = 'zh', threshold = [60000, 3600000], format = 'yyyy/MM/dd hh:mm:ss'}) {
+    if (!time && time !== 0) {
+        return ''
+    }
+
+    if (time === '-') {
+        time = new Date().getTime()
+    }
+
+    const localeText = {
+        zh: {
+            year: '年',
+            month: '月',
+            day: '天',
+            hour: '小时',
+            minute: '分钟',
+            second: '秒',
+            ago: '前',
+            later: '后',
+            justNow: '刚刚',
+            soon: '马上',
+            template: '{num}{unit}{suffix}'
+        },
+        en: {
+            year: 'year',
+            month: 'month',
+            day: 'day',
+            hour: 'hour',
+            minute: 'minute',
+            second: 'second',
+            ago: 'ago',
+            later: 'later',
+            justNow: 'just now',
+            soon: 'soon',
+            template: '{num} {unit} {suffix}'
+        }
+    }
+    const text = localeText[locale] || localeText.zh
+    let date = getDate(time)
+    let ms = date.getTime() - Date.now()
+    let absMs = Math.abs(ms)
+    if (absMs < threshold[0]) {
+        return ms < 0 ? text.justNow : text.soon
+    }
+    if (absMs >= threshold[1]) {
+        return formatDate(date, format)
+    }
+    let num
+    let unit
+    let suffix = text.later
+    if (ms < 0) {
+        suffix = text.ago
+        ms = -ms
+    }
+    const seconds = Math.floor((ms) / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+    const months = Math.floor(days / 30)
+    const years = Math.floor(months / 12)
+    switch (true) {
+        case years > 0:
+            num = years
+            unit = text.year
+            break
+        case months > 0:
+            num = months
+            unit = text.month
+            break
+        case days > 0:
+            num = days
+            unit = text.day
+            break
+        case hours > 0:
+            num = hours
+            unit = text.hour
+            break
+        case minutes > 0:
+            num = minutes
+            unit = text.minute
+            break
+        default:
+            num = seconds
+            unit = text.second
+            break
+    }
+
+    if (locale === 'en') {
+        if (num === 1) {
+            num = 'a'
+        } else {
+            unit += 's'
+        }
+    }
+
+    return text.template.replace(/{\s*num\s*}/g, num + '').replace(/{\s*unit\s*}/g, unit).replace(/{\s*suffix\s*}/g,
+        suffix)
+}
+
+export function getNowDate() {
+    let date = new Date()
+    let y = date.getFullYear()
+    let m = date.getMonth() + 1
+    let d = date.getDate()
+    m = m < 10 ? "0" + m : m
+    d = d < 10 ? "0" + d : d
+    return y + "" + m + "" + d
+}
+
+export function getFullYear(time) {
+    return getDate(time).getFullYear()
+}
+
+export function getMonth(time) {
+    return getDate(time).getMonth() + 1
+}
+
+
+export function getDay(time) {
+    return getDate(time).getDate()
+}
+
+// 获取yyymmdd或者yyymm时间
+export function parse(str) {
+    var y = str.substr(0, 4),
+        m = str.substr(4, 2) - 1,
+        d = str.substr(6, 2) ? str.substr(6, 2) : 1;
+    var D = new Date(y, m, d);
+    return (D.getFullYear() == y && D.getMonth() == m && D.getDate() == d) ? D : 'invalid date';
+}
+
+// 判断字符串是否为6or8
+export function isDate(sDate) {
+    if (!/^\d{6}$|^\d{8}$/.test(sDate)) {
+        return false;
+    }
+    var year, month, day;
+    year = sDate.substring(0, 4);
+    month = sDate.substring(4, 6);
+    day = sDate.substring(6, 8);
+    var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+    if (year < 1700 || year > 2500) return false
+    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1] = 29;
+    if (month < 1 || month > 12) return false
+    if (/^\d{8}$/.test(sDate) && (day < 1 || day > iaMonthDays[month - 1])) return false
+    return true
+}
+
+// 判断字符串是否为数字
+function isNumeric(str) {
+    return /^\d+$/.test(str);
+}
+
+/**
+ *
+ * @param {Date or String} date1 日期1
+ * @param {Date or String} date2 日期2
+ * @returns number
+ */
+export function monthNumber(date1, date2) {
+    const dateOne = getDate(date1);
+    const dateTwo = getDate(date2);
+    // 第一个日期的年和月
+    const yearOne = dateOne.getFullYear();
+    const monthOne = dateOne.getMonth() + 1;
+    // 第二个日期的年和月
+    const yearTwo = dateTwo.getFullYear();
+    const monthTwo = dateTwo.getMonth() + 1;
+    // 两个日期的月份数
+    const oneMonthNum = yearOne * 12 + monthOne;
+    const twoMonthNum = yearTwo * 12 + monthTwo;
+    return (yearTwo - yearOne) * 12 + (monthTwo - monthOne) + (yearTwo - yearOne + 1)
+}
+
+
+/**
+ * 获取下一个月
+ *
+ * @date 格式为yyyy-mm-dd的日期，如：2014-01-25
+ */
+export function getNextMonth(date) {
+    const year = getDate(date).getFullYear(); //获取当前日期的年份
+    const month = getDate(date).getMonth() + 1; //获取当前日期的月份
+    const day = getDate(date).getDate(); //获取当前日期的日
+    let year2 = year;
+    let month2 = month + 1;
+    if (month2 === 13) {
+        year2 = year2 + 1;
+        month2 = 1;
+    }
+    let day2 = day;
+    let days2 = new Date(year2, month2, 0);
+    days2 = days2.getDate();
+    if (day2 > days2) {
+        day2 = days2;
+    }
+    if (month2 < 10) {
+        month2 = '0' + month2;
+    }
+    return getDate(year2 + '-' + month2 + '-' + day2);
+}

package/src/components/ed-base-vue/tools/utils.js

@@ -0,0 +1,124 @@
+/**
+ * 获取变量数据类型，包括ES6 新类型Symbol
+ * @param n
+ * @returns {string}
+ */
+import {typeList} from "../global/variable";
+
+export function getVarType(n) {
+    const typeStr = Object.prototype.toString.call(n);
+    let typeName = '';
+    switch (typeStr) {
+        case '[object String]':
+            typeName = 'string';
+            break;
+        case '[object Number]':
+            typeName = 'number';
+            break;
+        case '[object Boolean]':
+            typeName = 'boolean';
+            break;
+        case '[object Undefined]':
+            typeName = 'undefined';
+            break;
+
+        case '[object Object]':
+            typeName = 'object';
+            break;
+        case '[object Array]':
+            typeName = 'array';
+            break;
+        case '[object Null]':
+            typeName = 'null';
+            break;
+        case '[object RegExp]':
+            typeName = 'RegExp';
+            break;
+
+        case '[object Symbol]':
+            typeName = 'symbol';
+            break;
+        case '[object JSON]':
+            typeName = 'json';
+            break;
+        case '[object Math]':
+            typeName = 'math';
+            break;
+
+        default:
+            typeName = 'object';
+    }
+
+    return typeName;
+}
+
+/**
+ * @name isMediaType
+ * @param url
+ * @param type
+ * @return {string}
+ * @desc 根据文件类型返回dom元素
+ */
+export const isMediaType = (url, type) => {
+    if (validateNull(url)) return
+    if (typeList.audio.test(url) || type === 'audio') {
+        return 'audio'
+    } else if (typeList.video.test(url) || type === 'video') {
+        return 'video'
+    } else if (typeList.img.test(url) || type === 'img') {
+        return 'img'
+    } else if (typeList.iframe.test(url) || typeList.words.test(type)) {
+        return 'iframe'
+    }
+}
+
+/**
+ * 判断是否为空
+ */
+export function validateNull(val) {
+    if (val instanceof Date || typeof val === 'boolean' || typeof val === 'number') return false;
+    if (val instanceof Array) {
+        if (val.length === 0) return true;
+    } else if (val instanceof Object) {
+        for (var o in val) {
+            return false;
+        }
+        return true;
+    } else {
+        return val === 'null' ||
+            val == null ||
+            val === 'undefined' ||
+            val === undefined ||
+            val === '';
+
+    }
+    return false;
+}
+
+/**
+ * 设置px像素
+ */
+export const setPx = (val, defval = '') => {
+    if (validateNull(val)) val = defval;
+    if (validateNull(val)) return '';
+    val = val + '';
+    if (val.indexOf('%') === -1) {
+        val = val + 'px';
+    }
+    return val;
+};
+
+/**
+ * 判断元素是否是 VNode对象
+ * @param _this
+ * @param node
+ * @return {boolean}
+ */
+export function isVNode(_this, node) {
+    // 获取 vnode 实例
+    const vnode = _this.$createElement('span', '')
+    // VNode 构造函数
+    const VNode = vnode.constructor;
+    // 所以通过 obj instanceof VNode 即可判断
+    return node instanceof VNode
+}

package/src/layouts/components/AppMain.vue

@@ -0,0 +1,17 @@
+<template>
+  <transition mode="out-in" name="fade-transform">
+<!--    <keep-alive>-->
+      <router-view/>
+<!--    </keep-alive>-->
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "AppMain"
+}
+</script>
+
+<style scoped>
+
+</style>