diff --git a/frame.js b/frame.js
index 3772126d..ef0952c9 100644
--- a/frame.js
+++ b/frame.js
@@ -11,8 +11,9 @@ var can = Volcanos("chat", {
 
             run: function(event, option, cmds, cb) {ctx.Run(event, option, cmds, cb)},
         }, Config.libs.concat(["page/"+name]), function(page) {
+            page.onimport._init && page.onimport._init(page, conf, body)
             can.core.Next(conf.pane, function(item, cb) {
-                page[item.name] = can.Pane(page, item.name, item, cb, can.page.Select(can, body, "fieldset."+item.name)[0] ||
+                page[item.pos] = page[item.name] = can.Pane(page, item.name, item, cb, can.page.Select(can, body, "fieldset."+item.name)[0] ||
                     can.page.AppendField(can, body, item.name+" dialog", item))
             }, function() {typeof cb == "function" && cb(page)})
         }, conf)
@@ -32,6 +33,22 @@ var can = Volcanos("chat", {
                 typeof cb == "function" && cb(event, pane, value, key, pane.output);
             },
 
+            Size: function(event, width, height) {var cb = pane.onimport["size"];
+                if (width > 0) {
+                    field.style.width = width + "px"
+                } else if (width == -1) {
+                    field.style.width = document.body.offsetWidth + "px"
+                }
+
+                if (height > 0) {
+                    field.style.height = height + "px"
+                } else if (height == -1) {
+                    field.style.height = document.body.offsetHeight + "px"
+                }
+
+                typeof cb == "function" && cb(event, pane, {width: width, height: height}, "size", pane.output)
+            },
+
             Show: function(width, height) {field.style.display = "block";
                 if (width < 0) {field.style.left = -width / 2 + "px";
                     field.style.width = (document.body.offsetWidth + width) / 2 + "px";
diff --git a/order.js b/order.js
index 38694406..b1c35e39 100644
--- a/order.js
+++ b/order.js
@@ -1,22 +1,33 @@
 var Config = {
-    main: "chat", list: [
-        "page/chat",
-        "pane/Toast", "pane/Carte", "pane/Debug",
-        "pane/River", "pane/Storm", "pane/Action",
-        "pane/Ocean", "pane/Steam",
+    main: "chat", list: ["page/chat",
+        "pane/Toast", "pane/Carte", "pane/Debug", "pane/Login",
+
+        "pane/Header",
+        "pane/Ocean", "pane/River", "pane/Storm", "pane/Steam",
+        "pane/Target", "pane/Source", "pane/Action",
+        "pane/Footer",
+
         "plugin/state", "plugin/input", "plugin/table", "plugin/inner",
     ],
     libs: ["lib/base", "lib/core", "lib/misc", "lib/page", "lib/user"],
     pane: [
-        {group: "index", name: "Toast"},
-        {group: "index", name: "Carte"},
-        {group: "index", name: "Debug"},
+        {group: "index", name: "Toast", pos: "float"},
+        {group: "index", name: "Carte", pos: "float"},
+        {group: "index", name: "Debug", pos: "float"},
+        {group: "index", name: "Login", pos: "float"},
 
-        {group: "index", name: "River"},
-        {group: "index", name: "Storm"},
-        {group: "index", name: "Action"},
+        {group: "index", name: "Header", pos: "head"},
+        {group: "index", name: "Ocean", pos: "float"},
+        {group: "index", name: "River", pos: "left"},
+        {group: "index", name: "Storm", pos: "right"},
+        {group: "index", name: "Steam", pos: "float"},
 
-        {group: "index", name: "Steam"},
-        {group: "index", name: "Ocean"},
+        {group: "index", name: "Target", pos: "top"},
+        {group: "index", name: "Source", pos: "center"},
+        {group: "index", name: "Action", pos: "bottom"},
+        {group: "index", name: "Footer", pos: "foot"},
     ],
+    layout: {
+        border: 4,
+    },
 }
diff --git a/page/chat.js b/page/chat.js
index 2ace0898..78b1ef4b 100644
--- a/page/chat.js
+++ b/page/chat.js
@@ -1,63 +1,49 @@
 Volcanos("onimport", {help: "导入数据", list: [],
-    init: function(can, msg, cb, output, option) {output.innerHTML = "";
-        output.innerHTML = msg.Result()
-        output.onclick = function(event) {
-            switch (event.target.tagName) {
-                case "text":
-                    alert(event.target.innerHTML)
-                    break
-                case "rect":
-                    break
-            }
+    _init: function(can, conf, body) {
+        window.onresize = function(event) {
+            can.onlayout["刷新"](event, can, conf, null, body)
         }
-    },
+    }
 })
-Volcanos("onaction", {help: "组件交互", list: [],
-})
-Volcanos("onchoice", {help: "组件菜单", list: ["返回", "清空", "复制", "下载", "表格", "绘图", "媒体"],
-    "返回": function(event, can, msg, value, target) {
-        can.run(event, ["", "Last"])
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onlayout", {help: "组件布局", list: ["刷新"], 
+    "刷新": function(event, can, conf, layout, body) {layout = layout || {};
+        var height = body.clientHeight-conf.layout.border;
+        var width = body.clientWidth-conf.layout.border;
+        can.user.isWindows && (body.style.overflow = "hidden");
+
+        layout.head == undefined && (layout.head = can.head.target.clientHeight)
+        layout.foot == undefined && (layout.foot = can.foot.target.clientHeight)
+        can.head.Size(event, width, layout.head)
+        can.foot.Size(event, width, layout.foot)
+        height -= can.head.target.offsetHeight+can.foot.target.offsetHeight
+
+        layout.left == undefined && (layout.left = can.left.target.clientWidth)
+        layout.right == undefined && (layout.right = can.right.target.clientWidth)
+        can.left.Size(event, layout.left, height)
+        can.right.Size(event, layout.right, height)
+        width -= can.left.target.offsetWidth+can.right.target.offsetWidth
+
+        layout.bottom == -1 && (layout.bottom = can.user.isMobile? "": height, layout.top = 0, layout.center = 0)
+        layout.bottom == undefined && (layout.bottom = can.bottom.target.offsetHeight-conf.layout.border)
+        layout.center == undefined && (layout.center = can.center.target.clientHeight)
+        layout.top == undefined && (layout.top = can.top.target.clientHeight)
+        layout.center == 0 && layout.top == 0 && !can.user.isMobile && (layout.bottom = height)
+        can.bottom.Size(event, width, layout.bottom)
+        can.center.Size(event, width, layout.center)
+
+        height -= layout.top==0? height: can.center.target.offsetHeight+can.bottom.target.offsetHeight
+        can.top.Size(event, width, height)
     },
-    "清空": function(event, can, msg, value, target) {
+
+})
+Volcanos("onchoice", {help: "组件菜单", list: ["刷新", "登出"],
+    "刷新": function(event, can, conf, key, body) {
+    },
+    "登出": function(event, can, conf, value, target) {
         can.target.innerHTML = "";
     },
-    "复制": function(event, can, msg, value, target) {
-        var list = can.onexport.Format(can, msg, "data");
-        can.user.toast(can.page.CopyText(can, list[2]), "复制成功")
-    },
-    "下载": function(event, can, msg, value, target) {
-        var list = can.onexport.Format(can, msg, msg._plugin_name||"data");
-        can.page.Download(can, list[0]+list[1], list[2]);
-    },
-})
-Volcanos("ondetail", {help: "组件详情", list: ["选择", "修改", "删除", "复制", "下载"],
-    "选择": "select",
-    "删除": "delete",
-    "修改": function(event, can, msg, value, index, key, td) {
-        var text = td.innerHTML;
-        can.page.Appends(can, td, [{type: "input", style: {width: td.clientWidth+"px"}, data: {onkeydown: function(event) {
-            if (event.key != "Enter") {return}
-            can.run(event, [index, "modify", key == "value" && msg.key? msg[key][index]: key, event.target.value,], function(msg) {
-                td.innerHTML = event.target.value;
-                can.user.toast("修改成功")
-            }, true)
-        }}}])
-    },
-    "复制": function(event, can, msg, value, index, key, target) {
-        can.user.toast(can.page.CopyText(can, target.innerHTML), "复制成功")
-    },
-    "下载": function(event, can, msg, value, index, key, target) {
-        can.page.Download(can, key, target.innerHTML);
-    },
-})
-Volcanos("onexport", {help: "导出数据", list: [],
-    Format: function(can, msg, name) {
-        var ext = ".csv", txt = can.page.Select(can, can.target, "tr", function(tr) {
-            return can.page.Select(can, tr, "td,th", function(td) {return td.innerText}).join(",")
-        }).join("\n");
-
-        !txt && (ext = ".txt", txt = msg.result && msg.result.join("") || "");
-        return [name, ext, txt]
-    },
 })
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
 
diff --git a/pane/Action.js b/pane/Action.js
index 6fb38a99..f0948c46 100644
--- a/pane/Action.js
+++ b/pane/Action.js
@@ -6,6 +6,8 @@ Volcanos("onimport", {help: "导入数据", list: [],
             }, can.page.AppendField(can, output, "item "+item.group+" "+item.name, item))
         })
     },
+    size: function(event, can, value, key, output) {
+    },
     river: function(event, can, value, key, output) {
         if (value == "update") {return}
         can.Conf("temp_river", value)
diff --git a/pane/Footer.js b/pane/Footer.js
new file mode 100644
index 00000000..e552a251
--- /dev/null
+++ b/pane/Footer.js
@@ -0,0 +1,25 @@
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, output, action, option, field) {
+    can.user.carte = function(event, cb) {if (!cb || !cb.list || cb.list.length == 0) {return}
+        output.innerHTML = "", can.page.AppendItem(can, output, can.core.List(cb.list, function(item) {
+            return {key: item};
+        }), false, function(event, line, item) {
+            typeof cb == "function" && cb(event, line.key, cb.meta)
+        })
+
+        var pos = {display: "block", left: event.x, top: event.y}
+        if (document.body.clientWidth - event.x < 60) {
+            var pos = {display: "block", right: event.x, top: event.y}
+        }
+        pos.left += "px"; pos.top += "px";
+        can.page.Modify(can, field, {style: pos})
+
+        event.stopPropagation()
+        event.preventDefault()
+        can.Show()
+    }
+}})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
diff --git a/pane/Header.js b/pane/Header.js
new file mode 100644
index 00000000..e552a251
--- /dev/null
+++ b/pane/Header.js
@@ -0,0 +1,25 @@
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, output, action, option, field) {
+    can.user.carte = function(event, cb) {if (!cb || !cb.list || cb.list.length == 0) {return}
+        output.innerHTML = "", can.page.AppendItem(can, output, can.core.List(cb.list, function(item) {
+            return {key: item};
+        }), false, function(event, line, item) {
+            typeof cb == "function" && cb(event, line.key, cb.meta)
+        })
+
+        var pos = {display: "block", left: event.x, top: event.y}
+        if (document.body.clientWidth - event.x < 60) {
+            var pos = {display: "block", right: event.x, top: event.y}
+        }
+        pos.left += "px"; pos.top += "px";
+        can.page.Modify(can, field, {style: pos})
+
+        event.stopPropagation()
+        event.preventDefault()
+        can.Show()
+    }
+}})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
diff --git a/pane/Login.js b/pane/Login.js
new file mode 100644
index 00000000..e552a251
--- /dev/null
+++ b/pane/Login.js
@@ -0,0 +1,25 @@
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, output, action, option, field) {
+    can.user.carte = function(event, cb) {if (!cb || !cb.list || cb.list.length == 0) {return}
+        output.innerHTML = "", can.page.AppendItem(can, output, can.core.List(cb.list, function(item) {
+            return {key: item};
+        }), false, function(event, line, item) {
+            typeof cb == "function" && cb(event, line.key, cb.meta)
+        })
+
+        var pos = {display: "block", left: event.x, top: event.y}
+        if (document.body.clientWidth - event.x < 60) {
+            var pos = {display: "block", right: event.x, top: event.y}
+        }
+        pos.left += "px"; pos.top += "px";
+        can.page.Modify(can, field, {style: pos})
+
+        event.stopPropagation()
+        event.preventDefault()
+        can.Show()
+    }
+}})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
diff --git a/pane/Source.js b/pane/Source.js
new file mode 100644
index 00000000..1dd1e3d9
--- /dev/null
+++ b/pane/Source.js
@@ -0,0 +1,26 @@
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, output, action, option, field) {
+    can.user.carte = function(event, cb) {if (!cb || !cb.list || cb.list.length == 0) {return}
+        output.innerHTML = "", can.page.AppendItem(can, output, can.core.List(cb.list, function(item) {
+            return {key: item};
+        }), false, function(event, line, item) {
+            typeof cb == "function" && cb(event, line.key, cb.meta)
+        })
+
+        var pos = {display: "block", left: event.x, top: event.y}
+        if (document.body.clientWidth - event.x < 60) {
+            var pos = {display: "block", right: event.x, top: event.y}
+        }
+        pos.left += "px"; pos.top += "px";
+        can.page.Modify(can, field, {style: pos})
+
+        event.stopPropagation()
+        event.preventDefault()
+        can.Show()
+    }
+}})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
+
diff --git a/pane/Target.js b/pane/Target.js
new file mode 100644
index 00000000..1dd1e3d9
--- /dev/null
+++ b/pane/Target.js
@@ -0,0 +1,26 @@
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, output, action, option, field) {
+    can.user.carte = function(event, cb) {if (!cb || !cb.list || cb.list.length == 0) {return}
+        output.innerHTML = "", can.page.AppendItem(can, output, can.core.List(cb.list, function(item) {
+            return {key: item};
+        }), false, function(event, line, item) {
+            typeof cb == "function" && cb(event, line.key, cb.meta)
+        })
+
+        var pos = {display: "block", left: event.x, top: event.y}
+        if (document.body.clientWidth - event.x < 60) {
+            var pos = {display: "block", right: event.x, top: event.y}
+        }
+        pos.left += "px"; pos.top += "px";
+        can.page.Modify(can, field, {style: pos})
+
+        event.stopPropagation()
+        event.preventDefault()
+        can.Show()
+    }
+}})
+Volcanos("onaction", {help: "组件交互", list: []})
+Volcanos("onchoice", {help: "组件菜单", list: []})
+Volcanos("ondetail", {help: "组件详情", list: []})
+Volcanos("onexport", {help: "导出数据", list: []})
+
+
diff --git a/proto.js b/proto.js
index 6e3732de..3d438acd 100644
--- a/proto.js
+++ b/proto.js
@@ -19,6 +19,9 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
         create_time: new Date(), path: "/static/volcanos/", index: 1, cache: {},
     };
 
+    can = can || {};
+    can.name = name;
+
     // 定义原型
     var id = 1, conf = {}, conf_cb = {}, sync = {}, cache = {};
     can[name] || list.push({name: name, can: can, create_time: new Date()}) && (can.__proto__ = {