add 20200202

frame.js

@@ -112,6 +112,7 @@ var can = Volcanos("chat", {
         var option = field.querySelector("form.option");
         var action = field.querySelector("div.action");
         var output = field.querySelector("div.output");
+        var status = field.querySelector("div.status");
 
         var history = []
 
@@ -190,7 +191,7 @@ var can = Volcanos("chat", {
                 })
             },
             Show: function(type, msg, cb) {plugin.msg = msg, msg._plugin_name = name;
-                return plugin._output = plugin[type] = can.Output(plugin, feature, type, msg, cb, output, option)
+                return plugin._output = plugin[type] = can.Output(plugin, feature, type, msg, cb, output, action, option, status)
             },
             Clone: function(event, cb) {meta.nick = meta.name + can.ID()
                 meta.args = can.page.Select(can, plugin.option, ".args", function(item) {return item.value})
@@ -199,6 +200,31 @@ var can = Volcanos("chat", {
             },
             Delete: function(event) {field.parentNode.removeChild(field)},
         }, Config.libs.concat(["plugin/"+(meta.type||feature.active||"state")]), function(plugin) {plugin.Conf(meta);
+            var resize = false, last, size, change;
+            can.page.Select(can, field, "div.border-bottom", function(item) {
+                item.onmousedown = function(event) {resize = !resize;
+                    can.escape = function(event) {resize = false
+                        plugin._output.onaction && plugin._output.onaction.resize && plugin._output.onaction.resize(event, plugin._output, change, "y")
+                    }
+                    can.resize = plugin.resize = function(event) {change = event.clientY - last;
+                        if (resize) {field.style.height = size + change + "px"}
+                    }
+                    size = field.offsetHeight;
+                    last = event.clientY;
+                }
+                item.onmousemove = function(event) {plugin.resize && plugin.resize(event)}
+            })
+            can.page.Select(can, field, "div.border-right", function(item) {
+                item.onmousedown = function(event) {resize = !resize;
+                    can.escape = function(event) {resize = false}
+                    can.resize = plugin.resize = function(event) {
+                        if (resize) {field.style.width = size + event.clientX - last + "px"}
+                    }
+                    size = field.offsetWidth;
+                    last = event.clientX;
+                }
+                item.onmousemove = function(event) {plugin.resize && plugin.resize(event)}
+            })
             var list = JSON.parse(meta.inputs||"[]");
             plugin.onimport._init? plugin.onimport._init(plugin, feature, plugin.output, plugin.action, plugin.option):
             can.core.Next(list.length>0? list: [{type: "text"}, {type: "button", value: "执行"}], plugin.Append, function() {
@@ -229,24 +255,37 @@ var can = Volcanos("chat", {
         })
         return input
     }),
-    Output: shy("构造组件", function(can, feature, type, msg, cb, target, option) {
+    Output: shy("构造组件", function(can, feature, type, msg, cb, target, action, option, status) {
         if (type == "inner" && (!msg.result || msg.result.length == 0)) {type = "table"}
-        var output = Volcanos(type, {_type: "local", msg: msg, feature: feature,
+
+        var output = Volcanos(type, {_type: "local", action: action, msg: msg, feature: feature,
+            Option: function(key, value) {
+                can.page.Select(can, can.option, "input[name="+key+"],select[name="+key+"]", function(item) {
+                    value != undefined && (item.value = value), value = item.value
+                })
+                return value
+            },
             Import: function(event, value, key) {var cb = output.onimport[key];
                 typeof cb == "function" && cb(event, output, value, key, target);
             },
+            Status: function(event, value, key) {var cb = output.onstatus[key];
+                typeof cb == "function"? cb(event, output, value, key, can.page.Select(can, status, "div."+key)[0]): false && output.run(event, ["status", key, value], function(msg) {
+                    output.Export(event, msg, key)
+                }, true)
+            },
+            Export: function(event, value, key, index) {var cb = output.onexport[key];
+                typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index)
+            },
 
-            Export: function(event, value, key, index) {can.Report(event, value, key, index)},
+            run: function(event, cmd, cb, silent) {var msg = can.Event(event);
-            run: function(event, cmd, cb, silent) {
-                var msg = can.Event(event);
                 can.page.Select(can, option, "input,select", function(item) {
                     item.name && item.value && msg.Option(item.name, item.value)
                 });
                 (output[cmd[1]] || can[cmd[1]] || can.Run)(event, cmd, cb, silent);
             },
-        }, Config.libs.concat(["plugin/"+type]), function(output) {
+        }, Config.libs.concat([(type.startsWith("/")? "": "plugin/")+type]), function(output) {
-
+            status.innerHTML = "", output.onstatus && can.page.AppendStatus(output, status, output.onstatus.list)
-            output.onimport.init(output, msg, cb, target, option);
+            output.onimport.init(output, msg, cb, target, action, option);
         }, msg)
         return output.target = target, target.Output = output
     }),

lib/page.js

@@ -86,12 +86,13 @@ Volcanos("page", {help: "网页模块",
             } else if (item.select) {var list = item.select;
                 type = "select", name = name || list[0][0];
                 data.onchange = function(event) {
-                    typeof list[1] == "function" && list[1](event, event.target.value);
+                    typeof list[1] == "function" && list[1](event, event.target.value, name);
                 }
                 item.list = list[0].slice(1).map(function(value) {
                     return {type: "option", value: value, inner: value};
                 })
                 data.className = list[0][0] || "";
+                data.title = data.title || name;
 
             } else if (item.input) {var list = can.core.List(item.input);
                 type = "input", name = name || list[0] || "";
@@ -129,6 +130,10 @@ Volcanos("page", {help: "网页模块",
 
             } else if (item.row) {type = "tr";
                 item.list = item.row.map(function(text) {return {text: [text, item.sub||"td"]}});
+            } else if (item.include) {var list = can.core.List(item.include);
+                type = "script";
+                data.src = list[0];
+                data.onload = list[1];
             }
 
 
@@ -145,7 +150,7 @@ Volcanos("page", {help: "网页模块",
         return target.innerHTML = "", can.page.Append(can, target, key, value)
     }),
     Remove: shy("删除节点", function(can, target, key, value) {
-        target.parentNode.removeChild(target)
+        target.parentNode && target.parentNode.removeChild(target)
     }),
 
     CopySub: shy("复制节点", function(can, target, source) {
@@ -184,10 +189,11 @@ Volcanos("page", {help: "网页模块",
     AppendField: shy("添加插件", function(can, target, type, item) {
         var dataset = {}; item && item.name && (dataset.names = item.name);
         var field = can.page.Append(can, target, [{view: [type, "fieldset"], list: [
+            {view: ["border-left"]}, {view: ["border-right"]},
             item.pos? undefined: {text: [(item.nick||item.name||"")+"("+(item.help||"")+")", "legend"]},
             {view: ["option", "form"], dataset: dataset, list: [{type: "input", style: {display: "none"}}]},
-            {view: ["action"]},
+            {view: ["action"]}, {view: ["output"]}, {view: ["status"]},
-            {view: ["output"]},
+            {view: ["border-bottom"]},
         ]}]).first;
         return field;
     }),
@@ -253,6 +259,17 @@ Volcanos("page", {help: "网页模块",
         })
     },
 
+    AppendAction: shy("添加控件", function(can, action, list, cb) {
+        can.page.Append(can, action, can.core.List(list, function(line) {
+            return typeof line == "string"? {button: [line, cb]}: line.length > 0? {select: [line, cb]}: line
+        }))
+    }),
+    AppendStatus: shy("添加控件", function(can, status, list, cb) {
+        can.page.Append(can, status, can.core.List(list, function(line) {
+            return {view: [line]}
+        }))
+    }),
+
     Display: function(text) {
         if (text.startsWith("http")) {return "<a href='"+text+"' target='_blank'>"+text+"</a>"}
         text = text.replace(/\033\[31m/g, "<span style='color:#f00'>")

lib/user.js

@@ -1,7 +1,7 @@
 Volcanos("user", {help: "用户模块",
     alert: function(text) {alert(JSON.stringify(text))},
     confirm: function(text) {return confirm(JSON.stringify(text))},
-    prompt: function(text, cb) {(text = prompt(text)) != undefined && typeof cb == "function" && cb(text); return text},
+    prompt: function(text, cb, def) {(text = prompt(text, def||"")) != undefined && typeof cb == "function" && cb(text); return text},
     reload: function(force) {(force || confirm("重新加载页面？")) && location.reload()},
     title: function(text) {document.title = text},
 

order.js

@@ -31,6 +31,7 @@ var Config = {context: "/chat/",
         {group: "index", name: "Footer", pos: "foot", state: ["ntxt", "ncmd"], title: '<a href="mailto:shylinux@163.com">shylinux@163.com</a>'},
 
     ], layout: {def: "办公", list: ["工作", "办公", "聊天"], size: {
+        "最大": {head: 0, foot: 0, left: 0, right: 0, bottom: -1, center: 0, top: 0},
         "工作": {head: 30, foot: 30, left: 0, right: 100, bottom: -1, center: 0, top: 0},
         "办公": {head: 30, foot: 30, left: 100, right: 100, bottom: -1, center: 0, top: 0},
         "聊天": {head: 30, foot: 30, left: 100, right: 100, bottom: 300, center: 40, top: -2},

page/chat.js

@@ -18,6 +18,7 @@ Volcanos("onaction", {help: "组件交互", list: [],
                 can.Report(event, {x: 0, y: 30}, "scroll")
                 break
             case "Escape":
+                can.Action.escape && can.Action.escape(event)
                 break
             case " ":
                 can.Favor && can.page.Select(can, can.Favor.Show(), "input.cmd", function(item) {

pane/Action.js

@@ -50,18 +50,14 @@ Volcanos("onimport", {help: "导入数据", list: [],
         can._plugin && can._plugin.Import(event, msg, cmd)
     },
 })
-Volcanos("onaction", {help: "组件交互", list: [["layout", "工作", "办公", "聊天"], "清屏", "刷新", "串行", "并行",
+Volcanos("onaction", {help: "组件交互", list: [["layout", "最大", "工作", "办公", "聊天"], "清屏", "刷新", "串行", "并行",
     {input: "pod"}, {input: "you"}, {input: "hot"}, {input: "top"},
 ],
-    "工作": function(event, can, msg, cmd, output) {
+    onmousemove: function(event, can, msg, cmd, output) {
-
+        can.resize && can.resize(event)
-        can.Export(event, cmd, "layout")
     },
-    "办公": function(event, can, msg, cmd, output) {
+    layout: function(event, can, value, cmd, output) {
-        can.Export(event, cmd, "layout")
+        can.Export(event, value, cmd)
-    },
-    "聊天": function(event, can, msg, cmd, output) {
-        can.Export(event, cmd, "layout")
     },
     "清屏": function(event, can, msg, cmd, output) {
         can.page.Select(can, output, "fieldset.item>div.output", function(item) {

plugin/china.js

@@ -0,0 +1,133 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+        // can.page.Append(can, action, [{type: "script", src: "https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"}]);
+        can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/echarts.js", function(event) {
+            can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/china.js", function(event) {
+                var china_chart = echarts.init(can.page.Append(can, output, [{type: "div", style: {width: "600px", height: "400px"}}]).last);
+                var data = msg.Table()
+
+                var yData = [];
+                var barData = [];
+                for (var i = 0; i < (data.length>10? 10: data.length); i++) {
+                    yData.push(i + data[i].name);
+                    barData.push(data[i]);
+                }
+
+                var option = {
+                    title: [{
+                        text: msg.Option("title"),
+                        show: true, right: 250, top: 10,
+                        textStyle: {color: '#2D3E53', fontSize: 18},
+                    }],
+                    tooltip: {
+                        show: true, formatter: function(params) {
+                            return params.name + "<br/>"
+                                + ' 确认病例:' + params.data['confirm'] + '人<br/>'
+                                + ' 死亡病例:' + params.data['dead'] + '人<br/>'
+                        },
+                    },
+                    visualMap: {
+                        type: 'continuous',
+                        orient: 'horizontal',
+                        itemWidth: 10,
+                        itemHeight: 80,
+                        text: ['高', '低'],
+                        showLabel: true,
+                        seriesIndex: [0],
+                        min: 0,
+                        max: data[1].value,
+                        inRange: {
+                            color: ['#6FCF6A', '#FFFD64', '#FF5000']
+                        },
+                        textStyle: {
+                            color: '#7B93A7'
+                        },
+                        bottom: 30,
+                        left: 'left',
+                    },
+                    grid: {right: 10, top: 135, bottom: 100, width: '20%'},
+                    xAxis: {show: false},
+                    yAxis: {
+                        type: 'category',
+                        inverse: true,
+                        nameGap: 16,
+                        axisLine: {show: false, lineStyle: {color: '#ddd'}},
+                        axisTick: {show: false, lineStyle: {color: '#ddd'}},
+                        axisLabel: {
+                            margin: 0,
+                            interval: 0,
+                            textStyle: {color: '#455A74', align: 'left', fontSize: 14},
+                            rich: {
+                                a: {
+                                    color: '#fff',
+                                    backgroundColor: '#FAAA39',
+                                    width: 20,
+                                    height: 20,
+                                    align: 'center',
+                                    borderRadius: 2
+                                },
+                                b: {
+                                    color: '#fff',
+                                    backgroundColor: '#4197FD',
+                                    width: 20,
+                                    height: 20,
+                                    align: 'center',
+                                    borderRadius: 2
+                                }
+                            },
+                            formatter: function(params) {
+                                if (parseInt(params.slice(0, 1)) < 3) {
+                                    return [
+                                        '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
+                                    ].join('\n')
+                                } else {
+                                    return [
+                                        '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
+                                    ].join('\n')
+                                }
+                            }
+                        },
+                        data: yData
+                    },
+                    geo: {
+                        map: 'china', left: 'left', right: '100',
+                        label: {emphasis: {show: false}},
+                        itemStyle: {emphasis: {areaColor: '#fff464'}},
+                    },
+                    series: [{
+                        roam: false, type: 'map', name: 'mapSer',
+                        geoIndex: 0, label: {show: false},
+                        data: data
+                    }, {
+                        roam: false, type: 'bar', name: 'barSer',
+                        visualMap: false, barGap: 0, barMaxWidth: 8,
+                        zlevel: 100, itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [{colorStops: [
+                                        {offset: 0, color: '#FFD119'}, // 0% 处的颜色
+                                        {offset: 1, color: '#FFAC4C'}, // 100% 处的颜色
+                                    ]}, {colorStops: [
+                                        {offset: 0, color: '#00C0FA'}, // 0% 处的颜色
+                                        {offset: 1, color: '#2F95FA'}, // 100% 处的颜色
+                                    ]}];
+                                    return params.dataIndex < 3? colorList[0]: colorList[1]
+                                },
+                                barBorderRadius: 15
+                            }
+                        },
+                        data: barData
+                    }]
+                };
+                china_chart.setOption(option);
+            }]}]);
+        }]}]);
+    },
+})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
+

plugin/inner.js

@@ -1,5 +1,5 @@
 Volcanos("onimport", {help: "导入数据", list: [],
-    init: function(can, msg, cb, output, option) {output.innerHTML = msg.Result();
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = msg.Result();
         can.page.Select(can, output, "table", function(table) {can.page.OrderTable(can, table)})
         can.page.Select(can, output, ".story", function(story) {var data = story.dataset||{};
             story.oncontextmenu = function(event) {var detail = can.feature.detail || can.ondetail.list;

plugin/media.js

@@ -2,7 +2,7 @@ Volcanos("onimport", {help: "导入数据", list: [],
     _init: function(can, output, action, option, field) {
         output.innerHTML = msg.Result();
     },
-    init: function(can, msg, cb, output, option) {output.innerHTML = msg.Result();
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = msg.Result();
     },
     favor: function(event, can, msg, cmd, output) {var key = msg.detail[0];
         var cb = can.onaction[key]; if (typeof cb == "function") {cb(event, can, msg, cmd, output); return msg.Echo(can._name, " onaction ", key), msg._hand = true}

plugin/table.js

@@ -1,5 +1,5 @@
 Volcanos("onimport", {help: "导入数据", list: [],
-    init: function(can, msg, cb, output, option) {output.innerHTML = "";
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
         if (!msg.append || msg.append.length == 0) {
             var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()]}]).code;
             return typeof cb == "function" && cb(msg), code;

plugin/template.js

@@ -0,0 +1,10 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+    },
+})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
+

plugin/wiki/data.js

@@ -0,0 +1,85 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+        var isData = msg.result && msg.result.length > 0;
+        if (msg.append && msg.append.length > 0) {
+            var table = can.page.AppendTable(can, output, msg, msg.append);
+            table.onclick = function(event) {switch (event.target.tagName) {
+                case "TD":
+                    if (isData) {
+                        var target = event.target;
+                        can.page.Appends(can, event.target, [{type: "input", value: target.innerHTML, onkeydown: function(event) {
+                            if (event.key == "Enter") {
+                                target.innerHTML = event.target.value
+                            }
+                        }}])
+                        break
+                    }
+
+                    can.onimport.which(event, table, msg.append, function(index, key) {
+                        can.Option("name", event.target.innerHTML.trim())
+                        can.run(event, [event.target.innerHTML.trim()], function(msg) {})
+                    })
+                    break
+                case "TH":
+                    break
+                case "TR":
+                case "TABLE":
+            }}
+            return typeof cb == "function" && cb(msg), table;
+        }
+    },
+    which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
+        can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")}
+            can.page.Select(can, tr, "th,td", function(td, order) {
+                if (event.target == td) {return cb(index-1, list[order])}
+            })
+        })
+    },
+})
+Volcanos("onaction", {help: "组件菜单", list: ["保存",
+    ],
+    "保存": function(event, can, msg, cmd, target) {
+        can.run(event, ["action", cmd, can.Option("name"), can.page.Select(can, target, "tr", function(tr) {return can.page.Select(can, tr, "th,td", function(td) {return td.innerHTML}).join(",")}).join("\n")], function() {
+            can.user.toast("保存成功")
+        }, true)
+    },
+})
+Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]],
+    "清空": function(event, can, msg, cmd, target) {
+        console.log("choice", cmd)
+    },
+})
+Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
+    "编辑": function(event, can, msg, index, key, cmd, target) {
+        can.user.prompt("文字", function(text) {
+            if (target.tagName == "text") {return target.innerHTML = text}
+
+            var data = {"text-anchor": "middle", "dominant-baseline": "middle"}
+            var figure = can.onfigure[target.tagName]
+            figure.text(event, can, data, target)
+
+            var p = can.onaction.push(event, can, data, "text", can.svg)
+            p.innerHTML = text;
+
+            target.Text && can.page.Remove(can, target.Text) && delete(target.Text)
+            target.Text = p
+        }, target.Text && target.Text.innerText || "")
+    },
+    "复制": function(event, can, msg, index, key, cmd, target) {
+        var figure = can.onfigure[target.tagName]
+        figure.copy(event, can, target)
+    },
+    "删除": function(event, can, msg, index, key, cmd, target) {
+        can.page.Remove(can, target)
+    },
+})
+Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"],
+    "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""},
+    "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""},
+    "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y},
+    "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName];
+        target.innerHTML = figure? figure.show(event, can, value, target): value.tagName;
+    },
+})
+Volcanos("onexport", {help: "导出数据", list: []})
+

plugin/wiki/feel.js

@@ -0,0 +1,90 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+        if (msg.append && msg.append.length > 0) {
+            var table = can.page.AppendTable(can, output, msg, msg.append);
+            var prefix = can.page.Append(can, output, [{view: ["prefix"], list: msg.Table(function(item) {
+                var items = item.path.split(".")
+                switch (items[items.length-1]) {
+                    case "JPG":
+                        return {img: "/share/local/"+item.path, width: "200"}
+                    case "MOV":
+                        return {type: "video", width: "200",
+                            data: {controls: "controls", autoplay: false, loop: true, src: "/share/local/"+item.path}}
+                    default:
+                        return
+                }
+            })}]);
+
+            table.onclick = function(event) {switch (event.target.tagName) {
+                case "TD":
+                    can.onimport.which(event, table, msg.append, function(index, key) {
+                        var name = event.target.innerHTML.trim()
+                        if (name.endsWith("/")) {
+                            can.Option("name", name)
+                            can.run(event, [name], function(msg) {})
+                        }
+                    })
+                    break
+                case "TH":
+                    break
+                case "TR":
+                case "TABLE":
+            }}
+            return typeof cb == "function" && cb(msg), table;
+        }
+    },
+    which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
+        can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")}
+            can.page.Select(can, tr, "th,td", function(td, order) {
+                if (event.target == td) {return cb(index-1, list[order])}
+            })
+        })
+    },
+})
+Volcanos("onaction", {help: "组件菜单", list: ["保存",
+    ],
+    "保存": function(event, can, msg, cmd, target) {
+        can.run(event, ["action", cmd, can.Option("name"), can.page.Select(can, target, "tr", function(tr) {return can.page.Select(can, tr, "th,td", function(td) {return td.innerHTML}).join(",")}).join("\n")], function() {
+            can.user.toast("保存成功")
+        }, true)
+    },
+})
+Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]],
+    "清空": function(event, can, msg, cmd, target) {
+        console.log("choice", cmd)
+    },
+})
+Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
+    "编辑": function(event, can, msg, index, key, cmd, target) {
+        can.user.prompt("文字", function(text) {
+            if (target.tagName == "text") {return target.innerHTML = text}
+
+            var data = {"text-anchor": "middle", "dominant-baseline": "middle"}
+            var figure = can.onfigure[target.tagName]
+            figure.text(event, can, data, target)
+
+            var p = can.onaction.push(event, can, data, "text", can.svg)
+            p.innerHTML = text;
+
+            target.Text && can.page.Remove(can, target.Text) && delete(target.Text)
+            target.Text = p
+        }, target.Text && target.Text.innerText || "")
+    },
+    "复制": function(event, can, msg, index, key, cmd, target) {
+        var figure = can.onfigure[target.tagName]
+        figure.copy(event, can, target)
+    },
+    "删除": function(event, can, msg, index, key, cmd, target) {
+        can.page.Remove(can, target)
+    },
+})
+Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"],
+    "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""},
+    "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""},
+    "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y},
+    "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName];
+        target.innerHTML = figure? figure.show(event, can, value, target): value.tagName;
+    },
+})
+Volcanos("onexport", {help: "导出数据", list: []})
+

plugin/wiki/mind.js

@@ -0,0 +1,315 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+        if (msg.append && msg.append.length > 0) {
+            var table = can.page.AppendTable(can, output, msg, msg.append);
+            table.onclick = function(event) {switch (event.target.tagName) {
+                case "TD":
+                    can.onimport.which(event, table, msg.append, function(index, key) {
+                        can.Option("name", event.target.innerHTML.trim())
+                        can.run(event, [event.target.innerHTML.trim()], function(msg) {})
+                    })
+                    break
+                case "TH":
+                    break
+                case "TR":
+                case "TABLE":
+            }}
+            return typeof cb == "function" && cb(msg), table;
+        }
+
+        var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()]}]).code;
+        can.page.Select(can, output, "svg", function(item) {can.svg = item, item.Value = function(key) {return item[key].baseVal.value}});
+        can.page.Select(can, output, "svg *", function(item, index) {
+            can.onaction.init(event, can, msg, index, item);
+        })
+        can.point = []
+        return typeof cb == "function" && cb(msg), code;
+    },
+    which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
+        can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")}
+            can.page.Select(can, tr, "th,td", function(td, order) {
+                if (event.target == td) {return cb(index-1, list[order])}
+            })
+        })
+    },
+})
+Volcanos("onfigure", {help: "图形绘制", list: [],
+    rect: {
+        data: {rx: 4, ry: 4}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+        draw: function(event, can, point, color) {
+            var p0 = point[0], p1 = point[1];
+            var data = {
+                "x": p0.x > p1.x? p1.x: p0.x,
+                "y": p0.y > p1.y? p1.y: p0.y,
+                "width": Math.abs(p0.x-p1.x),
+                "height": Math.abs(p0.y-p1.y),
+            }
+            can.core.Item(can.onfigure.rect.data, function(key, value) {
+                data[key] = value
+            }), data.fill = color
+            can.Status(event, data, "width");
+            event.type == "click" && point.length == 2 && (can.point = [])
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = target.x.baseVal.value+target.width.baseVal.value/2
+            data.y = target.y.baseVal.value+target.height.baseVal.value/2
+            return data
+        },
+        copy: function(event, can) {
+
+        },
+        show: function(event, can, value, target) {
+            return value.tagName
+                + ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")"
+                + " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")"
+        },
+    },
+    circle: {
+        data: {}, // <circle cx="25" cy="75" r="20"/>
+        draw: function(event, can, point, color) {
+            var p0 = point[0], p1 = point[1];
+            var data = {
+                "cx": p0.x, "cy": p0.y,
+                "r": Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)),
+                "fill": color,
+            }
+            event.type == "click" && point.length == 2 && (can.point = [])
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = target.cx.baseVal.value
+            data.y = target.cy.baseVal.value
+            return data
+        },
+        show: function(event, can, value, target) {
+            return value.tagName
+                + ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")"
+                + " > (" + parseInt(value.r.baseVal.value) + ")"
+        },
+    },
+    ellipse: {
+        data: {}, // <ellipse cx="75" cy="75" rx="20" ry="5"/>
+        draw: function(event, can, point, color) {
+            var p0 = point[0], p1 = point[1];
+            var data = {
+                "cx": p0.x, "cy": p0.y,
+                "rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y),
+                "fill": color,
+            }
+            event.type == "click" && point.length == 2 && (can.point = [])
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = target.cx.baseVal.value
+            data.y = target.cy.baseVal.value
+            return data
+        },
+        show: function(event, can, value, target) {
+            return value.tagName
+                + ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")"
+                + " > (" + parseInt(value.rx.baseVal.value) + parseInt(value.ry.baseVal.value) + ")"
+        },
+    },
+    line: {
+        data: {},  // <line x1="10" x2="50" y1="110" y2="150"/>
+        draw: function(event, can, point, color) {
+            var p0 = point[0], p1 = point[1];
+            var data = {
+                "x1": p0.x, "y1": p0.y,
+                "x2": p1.x, "y2": p1.y,
+                "stroke": color,
+            }
+            event.type == "click" && point.length == 2 && (can.point = [])
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2
+            data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2
+            return data
+        },
+        show: function(event, can, value, target) {
+            return value.tagName
+                + ": (" + value.x1.baseVal.value + "," + value.y1.baseVal.value+ ")"
+                + " - (" + value.x2.baseVal.value + "," + value.y2.baseVal.value+ ")"
+        },
+    },
+    path: {
+        data: {},  //  <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+        draw: function(event, can, point, color) {
+            var data = {
+                d: can.core.List(point, function(p, i) {
+                    switch (i) {
+                        case 0: return "M " + p.x + " " + p.y; break
+                        case 1: return "H " + p.x; break
+                        case 2: return "V " + p.y; break
+                        case 3: return "H " + p.x + " Z"; break
+                    }
+                }).join(" ")
+            }
+            console.log(data)
+            event.type == "click" && point.length == 4 && (can.point = [])
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2
+            data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2
+            return data
+        },
+        show: function(event, can, value, target) {
+            return value.tagName
+                + ": (" + value.x1.baseVal.value + "," + value.y1.baseVal.value+ ")"
+                + " - (" + value.x2.baseVal.value + "," + value.y2.baseVal.value+ ")"
+        },
+    },
+    polyline: {
+        data: {},  // <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+        draw: function(event, can, point, color) {if (point.length < 2) {return}
+            var data = {
+                points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ")
+            }
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2
+            data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2
+            return data
+        },
+        show: function(event, can, value, target) {
+            return value.tagName + ": (" + value.points.baseVal.value + ")"
+        },
+    },
+    polygon: {
+        data: {},  // <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+        draw: function(event, can, point, color) {if (point.length < 2) {return}
+            var data = {
+                points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ")
+            }
+            return data;
+        },
+        text: function(event, can, data, target) {
+            data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2
+            data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2
+            return data
+        },
+        show: function(event, can, value, target) {
+            return value.tagName + ": (" + value.points.baseVal.value + ")"
+        },
+    },
+})
+Volcanos("onaction", {help: "组件菜单", list: ["保存",
+        ["color", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
+        ["shape", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"],
+    ],
+    "保存": function(event, can, msg, cmd, target) {
+        can.run(event, ["action", cmd, can.Option("name"),
+            '<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" width="'+can.svg.Value("width")+'" height="'+can.svg.Value("height")+'">',
+            can.svg.innerHTML,
+            "</svg>",
+            ], function() {
+            can.user.toast("保存成功")
+        }, true)
+    },
+    color: function(event, can, value, cmd, target) {can.color = value},
+    shape: function(event, can, value, cmd, target) {can.shape = value},
+
+    resize: function(event, can, value, cmd, item) {var target = can.target.firstChild;
+        if (cmd == "x") {target.style.width = target.offsetHeight + value + "px"}
+        if (cmd == "y") {target.style.height = target.offsetHeight + value + "px"}
+    },
+
+    init: function(event, can, msg, cmd, item) {
+        item.ondblclick = item.oncontextmenu = function(event) {can.user.carte(event, shy("", can.ondetail, can.ondetail.list, function(event, key, meta) {var cb = meta[key];
+            typeof cb == "function" && cb(event, can, msg, cmd, key, key, item);
+        }), can), event.stopPropagation(), event.preventDefault()}
+        item.onclick = function() {
+        }
+        return item;
+    },
+    push: function(event, can, msg, cmd, target) {
+        var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd);
+        can.core.Item(msg, function(key, value) {rect.setAttribute(key, value)});
+        target.appendChild(can.onaction.init(event, can, msg, cmd, rect));
+        return rect;
+    },
+    draw: function(event, can, point) {
+        can.Status(event, null, "width");
+        can.Status(event, null, "begin");
+        if (point.length == 1) {return}
+        can.Status(event, point[0], "begin")
+
+        var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0]
+
+        var shape = can.page.Select(can, can.action, "select.shape", function(item) {return item.value})[0]
+        var figure = can.onfigure[shape];
+        var data = figure && figure.draw(event, can, point, color);
+        return data && can.onaction.push(event, can, data, shape, can.svg)
+    },
+
+    onclick: function(event, can) {if (!can.svg) {return}
+        var p = can.svg.getBoundingClientRect()
+        var point = {x: event.clientX-p.x, y: event.clientY-p.y}
+
+        can.point = (can.point || []).concat([point])
+        can.onaction.draw(event, can, can.point)
+    },
+    onmouseover: function(event, can) {
+        can.Status(event, event.target, "which")
+    },
+    onmousemove: function(event, can) {if (!can.svg) {return}
+        var p = can.svg.getBoundingClientRect()
+        var point = {x: event.clientX-p.x, y: event.clientY-p.y}
+
+        can.temp && can.page.Remove(can, can.temp) && delete(can.temp)
+        can.temp = can.onaction.draw(event, can, can.point.concat(point))
+
+        can.Status(event, point, "point")
+    },
+    onkeydown: function(event, can) {
+        if (event.key == "Enter") {
+            can.point = []
+            return
+        }
+    },
+})
+Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]],
+    "清空": function(event, can, msg, cmd, target) {
+        console.log("choice", cmd)
+    },
+})
+Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
+    "编辑": function(event, can, msg, index, key, cmd, target) {
+        can.user.prompt("文字", function(text) {
+            if (target.tagName == "text") {return target.innerHTML = text}
+
+            var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0]
+
+            var data = {"text-anchor": "middle", "dominant-baseline": "middle", "stroke": color}
+            var figure = can.onfigure[target.tagName]
+            figure.text(event, can, data, target)
+
+            var p = can.onaction.push(event, can, data, "text", can.svg)
+            p.innerHTML = text;
+
+            target.Text && can.page.Remove(can, target.Text) && delete(target.Text)
+            target.Text = p
+        }, target.Text && target.Text.innerText || "")
+    },
+    "复制": function(event, can, msg, index, key, cmd, target) {
+        var figure = can.onfigure[target.tagName]
+        figure.copy(event, can, target)
+    },
+    "删除": function(event, can, msg, index, key, cmd, target) {
+        can.page.Remove(can, target)
+    },
+})
+Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"],
+    "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""},
+    "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""},
+    "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y},
+    "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName];
+        target.innerHTML = figure? figure.show(event, can, value, target): value.tagName;
+    },
+})
+Volcanos("onexport", {help: "导出数据", list: []})
+

plugin/wiki/walk.js

@@ -0,0 +1,155 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+        if (!msg.result || msg.result.length == 0) {
+            var table = can.page.AppendTable(can, output, msg, msg.append);
+            table.onclick = function(event) {switch (event.target.tagName) {
+                case "TD":
+                    can.onimport.which(event, table, msg.append, function(index, key) {
+                        can.Option("file", event.target.innerHTML.trim())
+                        can.run(event, [event.target.innerHTML.trim()], function(msg) {})
+                    })
+                    break
+                case "TH":
+                    break
+                case "TR":
+                case "TABLE":
+            }}
+            return typeof cb == "function" && cb(msg), table;
+        }
+
+        // can.page.Append(can, action, [{type: "script", src: "https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"}]);
+        can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/echarts.js", function(event) {
+            can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/china.js", function(event) {
+                var china_chart = echarts.init(can.page.Append(can, output, [{type: "div", style: {width: "600px", height: "400px"}}]).last);
+                var data = msg.Table()
+
+                var yData = [];
+                var barData = [];
+                for (var i = 0; i < (data.length>10? 10: data.length); i++) {
+                    yData.push(i + data[i].name);
+                    barData.push(data[i]);
+                }
+
+                var option = {
+                    title: [{
+                        text: msg.Option("title"),
+                        show: true, right: 250, top: 10,
+                        textStyle: {color: '#2D3E53', fontSize: 18},
+                    }],
+                    tooltip: {
+                        show: true, formatter: function(params) {
+                            return params.name +": "+params.value
+                        },
+                    },
+                    visualMap: {
+                        type: 'continuous',
+                        orient: 'horizontal',
+                        itemWidth: 10,
+                        itemHeight: 80,
+                        text: ['高', '低'],
+                        showLabel: true,
+                        seriesIndex: [0],
+                        min: 0,
+                        max: data[1].value,
+                        inRange: {
+                            color: ['#6FCF6A', '#FFFD64', '#FF5000']
+                        },
+                        textStyle: {
+                            color: '#7B93A7'
+                        },
+                        bottom: 30,
+                        left: 'left',
+                    },
+                    grid: {right: 10, top: 135, bottom: 100, width: '20%'},
+                    xAxis: {show: false},
+                    yAxis: {
+                        type: 'category',
+                        inverse: true,
+                        nameGap: 16,
+                        axisLine: {show: false, lineStyle: {color: '#ddd'}},
+                        axisTick: {show: false, lineStyle: {color: '#ddd'}},
+                        axisLabel: {
+                            margin: 0,
+                            interval: 0,
+                            textStyle: {color: '#455A74', align: 'left', fontSize: 14},
+                            rich: {
+                                a: {
+                                    color: '#fff',
+                                    backgroundColor: '#FAAA39',
+                                    width: 20,
+                                    height: 20,
+                                    align: 'center',
+                                    borderRadius: 2
+                                },
+                                b: {
+                                    color: '#fff',
+                                    backgroundColor: '#4197FD',
+                                    width: 20,
+                                    height: 20,
+                                    align: 'center',
+                                    borderRadius: 2
+                                }
+                            },
+                            formatter: function(params) {
+                                if (parseInt(params.slice(0, 1)) < 3) {
+                                    return [
+                                        '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
+                                    ].join('\n')
+                                } else {
+                                    return [
+                                        '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
+                                    ].join('\n')
+                                }
+                            }
+                        },
+                        data: yData
+                    },
+                    geo: {
+                        map: 'china', left: 'left', right: '100',
+                        label: {emphasis: {show: false}},
+                        itemStyle: {emphasis: {areaColor: '#fff464'}},
+                    },
+                    series: [{
+                        roam: false, type: 'map', name: 'mapSer',
+                        geoIndex: 0, label: {show: false},
+                        data: data
+                    }, {
+                        roam: false, type: 'bar', name: 'barSer',
+                        visualMap: false, barGap: 0, barMaxWidth: 8,
+                        zlevel: 100, itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [{colorStops: [
+                                        {offset: 0, color: '#FFD119'}, // 0% 处的颜色
+                                        {offset: 1, color: '#FFAC4C'}, // 100% 处的颜色
+                                    ]}, {colorStops: [
+                                        {offset: 0, color: '#00C0FA'}, // 0% 处的颜色
+                                        {offset: 1, color: '#2F95FA'}, // 100% 处的颜色
+                                    ]}];
+                                    return params.dataIndex < 3? colorList[0]: colorList[1]
+                                },
+                                barBorderRadius: 15
+                            }
+                        },
+                        data: barData
+                    }]
+                };
+                china_chart.setOption(option);
+            }]}]);
+        }]}]);
+    },
+    which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
+        can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")}
+            can.page.Select(can, tr, "th,td", function(td, order) {
+                if (event.target == td) {return cb(index-1, list[order])}
+            })
+        })
+    },
+})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
+

plugin/wiki/word.js

@@ -0,0 +1,76 @@
+Volcanos("onimport", {help: "导入数据", list: [],
+    init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
+        if (msg.append && msg.append.length > 0) {
+            var table = can.page.AppendTable(can, output, msg, msg.append);
+            table.onclick = function(event) {switch (event.target.tagName) {
+                case "TD":
+                    can.onimport.which(event, table, msg.append, function(index, key) {
+                        can.Option("name", event.target.innerHTML.trim())
+                        can.run(event, [event.target.innerHTML.trim()], function(msg) {})
+                    })
+                    break
+                case "TH":
+                    break
+                case "TR":
+                case "TABLE":
+            }}
+            return typeof cb == "function" && cb(msg), table;
+        }
+
+        var last = can.page.Append(can, output, [{type: "textarea", cols: 40, rows: 18, inner: msg.Result()}]).last;
+        return typeof cb == "function" && cb(msg), can.view = last;
+    },
+    which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
+        can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")}
+            can.page.Select(can, tr, "th,td", function(td, order) {
+                if (event.target == td) {return cb(index-1, list[order])}
+            })
+        })
+    },
+})
+Volcanos("onaction", {help: "组件菜单", list: ["保存"],
+    "保存": function(event, can, msg, cmd, target) {
+        can.run(event, ["action", cmd, can.Option("name"), can.view.value], function() {
+            can.user.toast("保存成功")
+        }, true)
+    },
+})
+Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]],
+    "清空": function(event, can, msg, cmd, target) {
+        console.log("choice", cmd)
+    },
+})
+Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
+    "编辑": function(event, can, msg, index, key, cmd, target) {
+        can.user.prompt("文字", function(text) {
+            if (target.tagName == "text") {return target.innerHTML = text}
+
+            var data = {"text-anchor": "middle", "dominant-baseline": "middle"}
+            var figure = can.onfigure[target.tagName]
+            figure.text(event, can, data, target)
+
+            var p = can.onaction.push(event, can, data, "text", can.svg)
+            p.innerHTML = text;
+
+            target.Text && can.page.Remove(can, target.Text) && delete(target.Text)
+            target.Text = p
+        }, target.Text && target.Text.innerText || "")
+    },
+    "复制": function(event, can, msg, index, key, cmd, target) {
+        var figure = can.onfigure[target.tagName]
+        figure.copy(event, can, target)
+    },
+    "删除": function(event, can, msg, index, key, cmd, target) {
+        can.page.Remove(can, target)
+    },
+})
+Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"],
+    "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""},
+    "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""},
+    "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y},
+    "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName];
+        target.innerHTML = figure? figure.show(event, can, value, target): value.tagName;
+    },
+})
+Volcanos("onexport", {help: "导出数据", list: []})
+

proto.js

@@ -101,6 +101,9 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
                     res.append && (msg.append = res.append) && res.append.forEach(function(item) {
                         res[item] && (msg[item] = res[item])
                     })
+                    res.option && (msg.option = res.option) && res.option.forEach(function(item) {
+                        res[item] && (msg[item] = res[item])
+                    })
                     return msg
                 },
                 Table: shy("遍历数据", function(cb) {if (!msg.append || !msg.append.length || !msg[msg.append[0]]) {return}
@@ -132,14 +135,14 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
             if (type.endsWith(".css")) {
                 var style = document.createElement("link");
                 style.rel = "stylesheet", style.type = "text/css";
-                style.href = (can._path||meta.path)+type
+                style.href = (type.startsWith("/")? "": (can._path||meta.path))+type
                 style.onload = line;
                 target.appendChild(style);
                 return style
             }
             if (type.endsWith(".js")) {
                 var script = document.createElement("script");
-                script.src = (can._path||meta.path)+type,
+                script.src = (type.startsWith("/")? "": (can._path||meta.path))+type,
                 script.onload = line;
                 target.appendChild(script);
                 return script
@@ -182,22 +185,27 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
 
     // 加载模块
     function next() {
-        libs && libs.length > 1? Volcanos(name, can, libs.slice(1), cb):
+        libs && libs.length > 1? Volcanos(name, can, libs.slice(1), cb): typeof cb == "function" && setTimeout(function() {cb(can); if (can.target) {
-            typeof cb == "function" && setTimeout(function() {cb(can);
+            function run(event, msg, key, cb) {
-                if (!can.target) {return}
+                if (typeof cb == "function") {
-                can.core.Item(can.onaction, function(key, cb) {key.indexOf("on") == 0 && (can.target[key] = function(event) {
+                    // 本地命令
-                    cb(event, can);
+                    cb(event, can, msg, key, can.target)
-                })});
+                } else {
-
+                    // 本地命令
-                can.target.oncontextmenu = function(event) {
+                    can.run(event, ["action", key], function(msg) {can.Import(event, msg, key)}, true)
-                    can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, key, meta) {var cb = meta[key];
-                        typeof cb == "function"? cb(event, can, msg, key, event.target):
-                            can.run(event, [typeof cb == "string"? cb: key, event.target], null, true)
-                    }), can)
-                    event.stopPropagation()
-                    event.preventDefault()
                 }
-            }, 10);
+            }
+            // 注册event
+            can.core.Item(can.onaction, function(key, cb) {key.indexOf("on") == 0 && (can.target[key] = function(event) {cb(event, can)})});
+            // 注册action
+            can.action && (can.action.innerHTML = ""), can.onaction && can.page.AppendAction(can, can.action, can.onaction.list, function(event, value, key) {
+                key? run(event, value, key, can.onaction[key]): run(event, msg, value, can.onaction[value]);
+            })
+            // 注册choice
+            can.target.oncontextmenu = function(event) {can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, key, meta) {
+                run(event, msg, key, can.onchoice[key] || can.onaction[key]);
+            }), can), event.stopPropagation(), event.preventDefault()}
+        }}, 10);
     }
     if (libs && libs.length > 0) {
         if (can[libs[0]]) {

style.css

@@ -61,6 +61,7 @@ fieldset>form.option div.item.textarea {
 }
 fieldset>div.action {
     padding:6px;
+    clear:both;
 }
 fieldset>div.action div.space {
     display:inline-block;
@@ -178,6 +179,36 @@ fieldset.item>div.output>div.status>input.cmd {
     width:250px;
 }
 
+fieldset.item>div.output>div.code svg {
+    border: solid 2px red;
+}
+
+fieldset.item div.border-left {
+    position:absolute;
+    width:2px;
+    height:inherit;
+    height:-webkit-fill-available;
+    background:green;
+    cursor:ew-resize;
+}
+fieldset.item div.border-right {
+    position:absolute;
+    right:0px;
+    width:2px;
+    height:inherit;
+    height:-webkit-fill-available;
+    background:green;
+    cursor:ew-resize;
+}
+fieldset.item div.border-bottom {
+    position:absolute;
+    bottom:0px;
+    height:2px;
+    width:-webkit-fill-available;
+    background:green;
+    cursor:ns-resize;
+}
+
 fieldset table {
     font-size:14px;
     overflow: auto;