efront 3.31.2 → 3.33.0

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

@@ -2,7 +2,9 @@
 var colored = Object.create(null);
 var lazy = require("../basic/lazy");
 var colors = require("./colors");
+var strings = require("../basic/strings");
 var lastLogLength = 0;
+var needNextLine = false;
 var getColor = function (c) {
     switch (c) {
         case "red":
@@ -28,14 +30,27 @@ var getColor = function (c) {
     }
     return '';
 };
-var write = function (hasNewLine, str) {
-    str = String(str).replace(/<([a-z][\w]*)[^\>]*\>([\s\S]*?)<\/\1\>/ig, function (_, c, s) {
-        var color = getColor(c);
-        if (color) return color + s + colors.Reset;
-        return s;
+var colorReg = /<(\/?)([a-z][\w]*)[^\/\\\>\s]*\>/ig;
+var renderColor = function (obj) {
+    var colorpath = [];
+    return String(obj).replace(colorReg, function (_, e, c) {
+        if (e) {
+            colorpath.pop();
+            c = colorpath[colorpath.length - 1];
+        }
+        else colorpath.push(c);
+        if (c) var color = getColor(c);
+        var res = [];
+        if (e) res.push(colors.Reset);
+        if (color) res.push(color);
+        if (res.length) return res.join('');
+        return _;
     });
+};
+
+var write = function (hasNewLine, str) {
     process.stdout.cork();
-    var hasNextLine = /[\r\n\u2028\u2029]/.test(str);
+    var hasNextLine = /[\r\n\u2028\u2029]$/.test(str);
     if (process.stdout.isTTY) {
         if (lastLogLength) {
             var width = process.stdout.columns;
@@ -48,12 +63,22 @@ var write = function (hasNewLine, str) {
     else {
         if (!hasNewLine && !hasNextLine) str = '';
     }
-    hasNewLine && !hasNextLine ? process.stdout.write(str + "\r\n") : process.stdout.write("\r" + str);
+    if (needNextLine && !/^[\r\n\u2028\u2029]/.test(str)) {
+        process.stdout.write("\r\n");
+    }
+    if (hasNewLine && !hasNextLine) {
+        process.stdout.write(str)
+        needNextLine = true;
+    }
+    else {
+        process.stdout.write("\r" + str);
+        needNextLine = false;
+    }
     if (hasNextLine) hasNewLine = true;
     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();
@@ -74,44 +99,190 @@ var write = function (hasNewLine, str) {
     var logger = function (...args) {
         var label = fgColor + bgColor + info + reset;
         var time_stamp = '';
-        var str = [time_stamp, label, ...args].join(" ");
-        if (queue.length > 1 && !queue[queue.length - 2] && !/[\r\n\u2028\u2029]/.test(queue[queue.length - 1])) {
-            queue.pop();
-            queue.pop();
-        }
+        var str = [time_stamp, label, ...args.map(a => renderColor(a))].join(" ");
         write1(hasNewLine, str);
     };
     colored[log] = logger;
 });
-var queue = [];
-var flush = function () {
-    while (queue.length) write(queue.shift(), queue.shift());
-};
-// var write0 = lazy(flush, -60);
 var write1 = function (hasNewLine, str) {
-    writeid++;
-    // queue.push(hasNewLine, str);
+    drop.cancel();
+    str = renderColor(str);
     write(hasNewLine, str);
 };
-colored.flush = flush;
+var formatRows = function (arg, rows, deep, entry, leave) {
+    if (rows.length === 0) return entry + leave;
+    var ci = circleobjs.indexOf(arg);
+    if (ci >= 0) {
+        entry = `<cyan><引用点 *${ci + 1}></cyan> ` + entry;
+    }
+    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.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 (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;
+    for (var r of rows) {
+        if (/[\r\n\u2028\u2029]/.test(r)) {
+            itemcount = 1;
+            hasNextLine = true;
+            break;
+        }
+    }
+    if (!hasNextLine && deepspace.length + maxLength * rows.length < process.stdout.columns)
+        return `${entry} ${rows.join(", ")} ${leave}`;
+    var res;
+    if (itemcount <= 1) {
+        res = rows;
+    }
+    else {
+        var maxLength = Array(itemcount).fill(0);
+        for (var cy = 0, dy = itemcount; cy < dy; cy++) {
+            for (var cx = cy, dx = rows.length - 1; cx < dx; cx += itemcount) {
+                if (maxLength[cy] < lens[cx]) maxLength[cy] = lens[cx];
+            }
+        }
+        maxLength = maxLength.map(i => i + 2);
+        res = [];
+        if (isArray) {
+            for (var cx = 0, dx = rows.length; cx < dx; cx += itemcount) {
+                res.push(rows.slice(cx, cx + itemcount).map((r, i) => {
+                    return Array(maxLength[i] - lens[cx + i]).join(" ") + r;
+                }).join(', '));
+            }
+        }
+        else {
+            for (var cx = 0, dx = rows.length; cx < dx; cx += itemcount) {
+                res.push([rows[cx], ...rows.slice(cx + 1, cx + itemcount).map((r, i) => {
+                    return Array(maxLength[i] - lens[cx + i]).join(" ") + r;
+                })].join(', '));
+            }
+        }
+    }
+    return `${entry}\r\n${deepspace + res.join(",\r\n" + deepspace)}\r\n${space}${leave}`
+};
+var deepobjs = [];
+var circleobjs = [];
+var format = function (arg, deep = 0) {
+    deep++;
+    if (arg === null) return String(arg);
+    if (typeof arg === 'string') {
+        if (deep > 1) return "<green>" + strings.encode(arg) + "</green>";
+        return arg;
+    }
+    if (typeof arg === 'function') return `<cyan>[${arg.__proto__.constructor.name}${arg.name ? ": " + arg.name : " (匿名)"}]</cyan>`;
+    if (/^(number|boolean)$/.test(typeof arg)) return '<yellow>' + arg + "</yellow>";
+    if (arg === undefined) return "<gray>undefined</gray>";
+    if (typeof arg === "object") {
+        if (deepobjs.indexOf(arg) >= 0) {
+            var ci = circleobjs.indexOf(arg);
+            if (ci < 0) ci = circleobjs.length, circleobjs.push(arg);
+            return `<cyan>[循环点 *${ci + 1}]</cyan>`;
+        }
+        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 = 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, entry, leave);
+        }
+        if (arg.constructor === Date) {
+            return '<purple>' + formatDate.call(arg) + "</purple>";
+        }
+        if (arg.constructor === RegExp) {
+            return `<red2>/${arg.source}/</red2><cyan>${arg.flags}</cyan>`;
+        }
+        var keys = Object.keys(arg);
+        var ks = keys.slice(0, 100);
+        if (deep > 3 && deep + keys.length > 5) {
+            var kvs = [];
+            if (keys.length > 0) kvs.push(`<gray>.. 共 ${keys.length} 个属性</gray>`);
+        }
+        else {
+            deepobjs.push(arg);
+            var kvs = ks.map(k => `${/[\:'"`\[\{\(\r\n\u2028\u2029]|^\s|\s$/.test(k) ? format(k, deep) : k}: ${format(arg[k], deep)}`);
+            deepobjs.pop();
+            if (keys.length > ks.length) kvs.push(`<gray>.. 其他 ${keys.length - ks.length} 个属性</gray>`);
+        }
+        var entry = '{';
+        if (arg.constructor && arg.constructor !== Object) entry = arg.constructor.name + entry;
+        return formatRows(arg, kvs, deep, entry, '}');
+    }
+    return String(arg);
+};
+var toLength = function (n, a = -1) {
+    n = String(n);
+    if (n.length < 2) {
+        n = '0' + n;
+    }
+    if (a === -1 && n.length < 3) {
+        n = '0' + n;
+    }
+    return n;
+};
+
+var formatDate = function () {
+    var year = this.getFullYear();
+    var month = this.getMonth() + 1;
+    var date = this.getDate();
+    var hours = this.getHours();
+    var minutes = this.getMinutes();
+    var seconds = this.getSeconds();
+    var milli = this.getMilliseconds();
+    milli = toLength(milli);
+    var offset = -this.getTimezoneOffset();
+    if (offset >= 0) {
+        offset = '+' + toLength(offset / 60 | 0, 0) + toLength(offset % 60, 0);
+    } else {
+        offset = '-' + toLength(-offset / 60 | 0, 0) + toLength(-offset % 60, 0);
+    }
+    return `${[year, month, date].map(toLength).join('-')} ${[hours, minutes, seconds].map(toLength).join(':')}.${milli} ${offset}`;
+};
+
+colored.time = function (date = new Date, str) {
+    write1(true, colors.BgGray + colors.FgWhite2 + formatDate.call(date) + str + colors.Reset);
+};
+
 colored.type = function (...args) {
-    write1(false, args.join(' '));
+    write1(false, args.map(a => format(a)).join(' '));
+};
+colored.line = function (...args) {
+    write1(true, args.map(a => format(a)).join(' '));
 };
 var _log = console.log;
 colored.log = function () {
-    flush();
+    if (lastLogLength > 0) write1(false, '');
+    if (needNextLine) needNextLine = false;
     _log.apply(console, arguments);
 };
 colored.begin = function (c) {
     return write1(false, getColor(c));
 };
-var writeid = 0;
-var drop = lazy(function (dropid) {
-    if (dropid === writeid) write1(false, "");
+var drop = lazy(function () {
+    write(false, "");
 }, 160);
-colored.drop = function () {
-    drop(++writeid);
-};
+colored.drop = drop;
 colored.end = function () {
     return write1(false, colors.Reset);
 };
@@ -119,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

@@ -0,0 +1,57 @@
+var console = require("./colored_console");
+var data = [
+    { a: 1 },
+    { b: [2] },
+    { c: null },
+    class c { },
+    { 匿名函数: function () { } },
+    { "arraw function": e => { } },
+    { "function a(){}": function a() { } },
+    { "astar function": function* b() { } },
+    { "async function": async function* d() { } },
+    { "二层对象": { c: 2, "三层对象": { d: 3 } } },
+    {
+        "多属性节点": {
+            a: 1,
+            b: 2,
+            c: 3,
+        }
+    },
+    {
+        "多属性节点": {
+            "属性1": 1,
+            "属性2": 1,
+            "属性3": 1,
+            "属性4": 1,
+            "属性5": 1,
+            "属性6": 1,
+            "属性7": 1,
+            "属性8": 1,
+            "属性10": 1,
+            "属性11": 1,
+            "属性12": 1,
+            "属性13": 1,
+            "属性14": 1,
+            "属性15": 1,
+            "属性16": 1,
+            "属性17": 1,
+        }
+    },
+    {
+        "多属性节点": function () {
+            var a = {};
+            for (var cx = 1; cx <= 101; cx++) {
+                a["属性" + cx] = cx;
+            }
+            return a;
+        }()
+    },
+    /Abcdefg/gimuy,
+    new Error("错误信息"),
+    new Date,
+    { "循环对象": null },
+];
+data[data.length - 1].循环对象 = data[data.length - 1];
+console.log(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"