efront 3.32.0 → 3.33.1

package/coms/frame/chat.less

@@ -1,10 +1,17 @@
 @height: 420px;
 @width: 480px;
-@margin-top: -160px;
-@margin-left: -180px;
+@margintop: -210px;
+@marginleft: -180px;
+@leftwidth: 200px;
 
 & {
-    margin: @margin-top @margin-left;
+    box-sizing: content-box;
+    margin: @margintop @marginleft;
+
+    &:not([resizing], [dragging]) {
+        transition: padding .2s, margin .2s;
+    }
+
     top: 50%;
     left: 50%;
     width: @width;
@@ -18,6 +25,81 @@
     max-height: 100%;
 }
 
+>list {
+    width: @leftwidth;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .id {
+        opacity: .6;
+        transform: scale(.8);
+        transform-origin: left center;
+        font-size: 10px;
+    }
+
+    .local(@color) {
+        font-size: 14px;
+        transform: scale(.6) rotate(-45deg);
+        text-align: center;
+        padding: 0 6px;
+        position: absolute;
+        left: -6px;
+        top: 4px;
+
+        &:after,
+        &:before {
+            display: block;
+            content: "";
+            border: 8px solid transparent;
+            position: absolute;
+            top: 50%;
+            margin: -8px 0;
+            transform: scaleX(.6);
+        }
+
+        &:before {
+            left: -8px;
+            border-left: 0;
+            border-right: 12px solid @color;
+
+        }
+
+        &:after {
+            right: -8px;
+            border-right: 0;
+            border-left: 12px solid @color;
+        }
+
+        background-color: @color;
+        color: #fff;
+    }
+
+    .local {
+        .local(#082);
+    }
+
+    >.button {
+        text-align: left;
+        display: block;
+        border-radius: 0;
+        width: 100%;
+
+        &[type=white].hover {
+            color: #09c;
+
+            >.track {
+                background: #09c1;
+            }
+        }
+    }
+}
+
+&.showList {
+    margin: @margintop -380px;
+    padding-left: @leftwidth;
+}
+
 padding {
     display: block;
     position: relative;
@@ -29,6 +111,22 @@ padding {
     }
 }
 
+.user {
+    padding: 10px 20px 10px 56px;
+    line-height: 20px;
+    box-shadow: none;
+
+    >avatar {
+        width: 42px;
+        height: 42px;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: inline-block;
+        position: absolute;
+        left: 10px;
+    }
+}
+
 msg {
     display: block;
     border-radius: 4px;
@@ -40,18 +138,18 @@ msg {
     position: relative;
     margin: 0 10px;
     float: left;
+    user-select: text;
 
     &:before {
         content: "";
         display: block;
         position: absolute;
-        border: 6px solid transparent;
+        border: 8px solid transparent;
         top: 22px;
-        margin: -12px;
+        margin: -14px;
     }
 
     &:not([self]):before {
-        display: block;
         left: 0;
         border-right-color: #fff;
     }
@@ -70,10 +168,77 @@ msg {
     }
 }
 
+msg[files] {
+
+    a {
+        display: block;
+        border: 1px solid transparent;
+        border-left: 0;
+        border-right: 0;
+        margin: 0 -6px;
+        background-color: #fff;
+        padding: 0 14px 0 10px;
+        text-align: left;
+        border-radius: 0;
+
+        &:hover {
+            border-color: #c80;
+            background-color: #ffe;
+        }
+
+        &:active {
+            background-color: #ffc;
+        }
+
+        &:first-child {
+            border-top-color: transparent;
+            border-radius: 3px 3px 0 0;
+        }
+
+        &:last-child {
+            border-bottom-color: transparent;
+            border-radius: 0 0 3px 3px;
+        }
+    }
+}
 
 >[head] {
     padding: 9px 16px;
     line-height: 24px;
+    text-align: center;
+
+    >span {
+        display: inline-block;
+    }
+
+    &:before {
+        display: none;
+    }
+
+    .id {
+        font-size: 10px;
+        color: #0009;
+    }
+
+    .menubtn {
+        border-radius: 50%;
+        width: 36px;
+        height: 36px;
+        text-align: center;
+        padding: 9px 0;
+        margin-right: 6px;
+        margin: -6px 6px -6px -6px;
+        box-shadow: none;
+        float: left;
+
+        >i {
+            margin: 0 auto;
+            display: block;
+            width: 14px;
+            border-top: 3px solid transparent;
+            border-bottom: 2px solid;
+        }
+    }
 }
 
 >grid {
@@ -143,12 +308,41 @@ chat {
     box-shadow: none;
     box-shadow: none;
     border-top: none;
+    margin-top: -34px;
+}
 
-    >btn {
-        pointer-events: all;
-    }
+>[foot]>.button {
+    pointer-events: all;
+    bottom: 0;
+    margin: 0;
+    top: 0;
+    padding: 0;
+    border-radius: 0;
+    min-width: 52px;
+}
+
+.unread {
+    position: absolute;
+    background: #c00;
+    color: #fff;
+    border-radius: 8px;
+    font-size: 10px;
+    padding: 0;
+    line-height: 1;
+    right: 10px;
+    top: 10px;
+    border: 2px solid #c00;
+    min-width: 16px;
+    text-align: center;
 }
 
+.file>svg {
+    line-height: 1;
+    vertical-align: top;
+    width: 1em;
+    height: 1em;
+    margin: 7px 2px 0 0;
+}
 
 .max-size() {
     margin-top: 0 !important;
@@ -156,18 +350,66 @@ chat {
     height: 100% !important;
     margin-left: 0 !important;
     left: 0 !important;
-    width: 100% !important;
+    right: 0;
+    width: auto !important;
     border: none;
-    .editor-height(36px);
+    .editor-height(42px);
+
+    &.showList {
+        >grid:after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            background: #0002;
+
+        }
+
+        // margin-left: -@leftwidth !important;
+    }
 
     [textarea] {
         border-bottom: none;
         outline: none;
+        background: #fff;
 
         >div {
-            min-height: 30px;
-            padding-right: 110px;
+            background-color: #eee;
+            background-clip: padding-box;
+            border: 4px solid transparent;
+            border-right-width: 52px;
+            border-left-width: 12px;
+            min-height: 32px;
+            padding: 6px;
         }
+
+    }
+
+    >[foot] {
+        padding: 0;
+
+        >.button {
+            height: 42px;
+            line-height: 42px;
+        }
+
+        .file {
+            min-width: 40px;
+
+            >svg {
+                margin-top: 14px;
+            }
+
+            >span {
+                display: none;
+            }
+        }
+
     }
 }
 

package/coms/kugou/loading.less

@@ -1,3 +1,3 @@
 &{
-    color: #1f4a3bd4;
+    color: #dfec;
 }

package/coms/reptile/colored_console.js

@@ -30,10 +30,10 @@ var getColor = function (c) {
     }
     return '';
 };
-var colorReg = /<(\/?)([a-z][\w]*)[^\/\\\>]*\>/ig;
-var write = function (hasNewLine, str) {
+var colorReg = /<(\/?)([a-z][\w]*)[^\/\\\>\s]*\>/ig;
+var renderColor = function (obj) {
     var colorpath = [];
-    str = String(str).replace(colorReg, function (_, e, c) {
+    return String(obj).replace(colorReg, function (_, e, c) {
         if (e) {
             colorpath.pop();
             c = colorpath[colorpath.length - 1];
@@ -43,8 +43,12 @@ var write = function (hasNewLine, str) {
         var res = [];
         if (e) res.push(colors.Reset);
         if (color) res.push(color);
-        return res.join('');
+        if (res.length) return res.join('');
+        return _;
     });
+};
+
+var write = function (hasNewLine, str) {
     process.stdout.cork();
     var hasNextLine = /[\r\n\u2028\u2029]$/.test(str);
     if (process.stdout.isTTY) {
@@ -74,7 +78,7 @@ var write = function (hasNewLine, str) {
     if (hasNewLine) {
         lastLogLength = 0;
     } else {
-        str = str.replace(/\x1b\[\d+m/g, '').replace(/\b/g, '');
+        str = String(str).replace(/\x1b\[\d+m/g, '').replace(/\b/g, '');
         lastLogLength = str.length + str.replace(/[\x20-\xff]/g, "").length;
     }
     process.stdout.uncork();
@@ -95,13 +99,14 @@ var write = function (hasNewLine, str) {
     var logger = function (...args) {
         var label = fgColor + bgColor + info + reset;
         var time_stamp = '';
-        var str = [time_stamp, label, ...args.map(a => format(a))].join(" ");
+        var str = [time_stamp, label, ...args.map(a => renderColor(a))].join(" ");
         write1(hasNewLine, str);
     };
     colored[log] = logger;
 });
 var write1 = function (hasNewLine, str) {
     drop.cancel();
+    str = renderColor(str);
     write(hasNewLine, str);
 };
 var formatRows = function (arg, rows, deep, entry, leave) {
@@ -113,10 +118,15 @@ var formatRows = function (arg, rows, deep, entry, leave) {
     if (deepobjs.length === 0) circleobjs.splice(0, circleobjs.length);
     var space = new Array(deep).join("    ");
     var deepspace = new Array(deep + 1).join("    ");
-    var lens = rows.map(r => r.replace(colorReg, '').replace(/[\u00ff-\uffff]/g, '00').length);
+    var lens = rows.slice(0, 100).map(r => r.replace(colorReg, '').replace(/[\u00ff-\uffff]/g, '00').length);
     var maxLength = Math.max(...lens) + 2;
     var itemcount = (process.stdout.columns - deepspace.length - 10) / maxLength | 0;
-    if (itemcount * itemcount > rows.length) itemcount = Math.ceil(Math.sqrt(rows.length));
+    if (rows.length > itemcount) {
+        if (itemcount * itemcount > rows.length + process.stdout.columns) itemcount = Math.ceil(Math.sqrt(rows.length + process.stdout.columns));
+        if (itemcount > 20) itemcount = 20;
+        else if (itemcount > 10) itemcount = 10;
+        else if (itemcount > 5) itemcount = 5;
+    }
     if (itemcount < 1) itemcount = 1;
     var hasNextLine = false;
     var isArray = arg instanceof Array;
@@ -163,7 +173,7 @@ var deepobjs = [];
 var circleobjs = [];
 var format = function (arg, deep = 0) {
     deep++;
-    if (arg === null) return arg;
+    if (arg === null) return String(arg);
     if (typeof arg === 'string') {
         if (deep > 1) return "<green>" + strings.encode(arg) + "</green>";
         return arg;
@@ -177,14 +187,25 @@ var format = function (arg, deep = 0) {
             if (ci < 0) ci = circleobjs.length, circleobjs.push(arg);
             return `<cyan>[循环点 *${ci + 1}]</cyan>`;
         }
-        if (arg instanceof Array) {
-            if (arg.length === 0) return '[]';
-            if (deep > 3) return `${arg.__proto__.constructor.name}(${arg.length})[ ... ]`;
+        if (arg instanceof Error) {
+            if (deep === 1) return String(arg.message);
+            return String(arg.stack || arg.message);
+        }
+        if (arg instanceof Buffer || arg instanceof ArrayBuffer || arg instanceof SharedArrayBuffer) {
+            var data = new Uint8Array(arg.buffer || arg, arg.byteOffset || 0, arg.byteLength);
+            return `<magenta><${arg.__proto__.constructor.name} ${Array.prototype.slice.call(data, 0, 20).map(a => a < 16 ? "0" + a.toString(16) : a.toString(16)).join(' ')}${arg.byteLength > 20 ? ` ... 其他 ${arg.byteLength - 20} 字节` : ''}></megenta>`;
+        }
+        else if (isFinite(arg.length)) {
+            var entry = "[";
+            var leave = "]";
+            entry = `${arg.__proto__.constructor.name}(${arg.length})${entry}`;
+            if (arg.length === 0) return entry + leave;
+            if (deep > 3 && deep + arg.length > 5) return `${entry} ... ${leave}`;
             deepobjs.push(arg);
-            var res = arg.slice(0, 100).map(a => format(a, deep));
+            var res = Array.prototype.slice.call(arg, 0, 100).map(a => format(a, deep));
             deepobjs.pop();
             if (arg.length > res.length) res.push(`<gray>.. 其他 ${arg.length - res.length} 项</gray>`);
-            return formatRows(arg, res, deep, '[', ']');
+            return formatRows(arg, res, deep, entry, leave);
         }
         if (arg.constructor === Date) {
             return '<purple>' + formatDate.call(arg) + "</purple>";
@@ -194,7 +215,7 @@ var format = function (arg, deep = 0) {
         }
         var keys = Object.keys(arg);
         var ks = keys.slice(0, 100);
-        if (deep > 3) {
+        if (deep > 3 && deep + keys.length > 5) {
             var kvs = [];
             if (keys.length > 0) kvs.push(`<gray>.. 共 ${keys.length} 个属性</gray>`);
         }
@@ -269,4 +290,9 @@ colored.clear = function (tag) {
     write1(false, '');
     if (tag) write1(true, tag);
 };
+colored.format = function (a) {
+    a = format(a);
+    a = renderColor(a);
+    return a;
+};
 module.exports = colored;

package/coms/reptile/colored_console_test.js

@@ -47,9 +47,11 @@ var data = [
         }()
     },
     /Abcdefg/gimuy,
+    new Error("错误信息"),
     new Date,
     { "循环对象": null },
 ];
 data[data.length - 1].循环对象 = data[data.length - 1];
 console.log(data);
-console.line(data);
+console.line(data);
+throw new Error(2);

package/coms/shapes/file.html

@@ -1,6 +1,5 @@
 <svg width="92" height="92" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-    style="fill: #666;" overflow="hidden" viewBox="12 135 92 92">
-
+    style="fill: currentColor" overflow="hidden" viewBox="12 135 92 92">
     <g>
         <path
             d="M32 215 32 147 60 147 60 168 82 168 82 215 32 215ZM66 149.5 78.5 162 66 162 66 149.5ZM66 141 26 141 26 221 88 221 88 163 66 141Z"

package/coms/zimoli/autofocus.js

@@ -3,10 +3,10 @@ function autofocus(e) {
     var savedElement;
     e.renders.push(function () {
         var parent = rootElements[rootElements.length - 1] || document.body;
-        if (savedElement === parent) {
+        if (savedElement === this) {
             if (this !== parent || getTargetIn(parent, document.activeElement)) return;
         }
-        savedElement = parent;
+        savedElement = this;
         if (/^(input|textarea)$/i.test(this.tagName) || /^true$/.test(this.contentEditable)) {
             if (getTargetIn(parent, this)) {
                 this.focus();

package/coms/zimoli/chooseFile.js

@@ -8,7 +8,7 @@ function chooseFile(accept, multiple, extra) {
             // focus 事件比change事件早40-80毫秒
             if (opened && document.hasFocus()) {
                 remove(input);
-                setTimeout(oh, 210);
+                setTimeout(oh, 610);
             }
         };
         on("change")(input, function () {

package/coms/zimoli/drag.js

@@ -82,6 +82,7 @@ function drag(target, initialEvent, preventOverflow, isMovingSource) {
             extraClones.map(c => document.body.appendChild(c));
             saved_delta.x += clone_left - target_left;
             saved_delta.y += clone_top - target_top;
+            target.setAttribute("dragging", '');
             dispatch("dragstart", target);
         }
         event.moveLocked = true;
@@ -106,7 +107,7 @@ function drag(target, initialEvent, preventOverflow, isMovingSource) {
         if (clone !== target) remove(clone), css(target, { opacity: saved_opacity, filter: saved_filter });
         remove(extraClones);
         extraTargets.map((target, cx) => css(target, extraStyles[cx]));
-        if (saved_delta.ing) dispatch("dragend", target);
+        if (saved_delta.ing) target.removeAttribute("dragging"), dispatch("dragend", target);
         drag.target = null;
         saved_delta = null;
     };

package/coms/zimoli/loading.less

@@ -67,7 +67,7 @@
     content: "";
     border-radius: 50%;
     color: inherit;
-    border: 1em solid ;
+    border: 2px solid ;
     border-right-color: transparent;
     border-top-color: transparent;
     overflow: hidden;

package/coms/zimoli/maps.js

@@ -182,7 +182,6 @@ function maps(config = {}) {
     var reshape = function () {
         canvas.width = canvas.offsetWidth;
         canvas.height = canvas.offsetHeight;
-        console.log(canvas.map)
         canvas.map.refresh();
         canvas._default = canvas.map.defaultImage();
     };

package/coms/zimoli/render.js

@@ -14,7 +14,9 @@ var copyAttribute = function (node, copys) {
             node[name] = value;
             break;
         default:
-            node.setAttribute(name, value);
+            if (isFunction(node.setAttribute)) {
+                node.setAttribute(name, value);
+            }
     }
 }
 var createTemplateNodes = function (text) {

package/coms/zimoli/resize.js

@@ -41,6 +41,9 @@ var getResizer = function (event) {
     if (fringe.cursor || getTargetIn(rect.dragHandle, event.target)) {
         var { resize } = fringe;
         extend(resize, getScreenPosition(rect));
+        var computedStyle = getComputedStyle(rect);
+        resize.width = parseFloat(computedStyle.width);
+        resize.height = parseFloat(computedStyle.height);
         resize.rect = rect;
         resize.cursor = fringe.cursor;
         return resize;
@@ -53,6 +56,7 @@ var handle = {
         dragging = getResizer(event);
         if (!dragging) return;
         var elem = dragging.rect;
+        if (elem.setAttribute) elem.setAttribute("resizing", '');
         if (elem.offsetParent && /^(absolute|fixed|relative)$/i.test(getComputedStyle(elem.offsetParent).position)) {
             var parent = elem.offsetParent;
             var pos = getScreenPosition(parent);
@@ -131,6 +135,9 @@ var handle = {
         resizingList.hit(rect);
     },
     end(e) {
+        if (dragging && dragging.rect.removeAttribute) {
+            dragging.rect.removeAttribute("resizing");
+        }
         dragging = null;
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.32.0",
+    "version": "3.33.1",
     "description": "简化前端开发，优化web性能",
     "main": "public/efront.js",
     "directories": {