opt studio

2025-04-25 16:58:06 +08:00 · 2023-08-27 21:06:17 +08:00 · 2023-08-27 21:06:17 +08:00 · 4c70281715
commit 4c70281715
parent 6ce3d264f5
13 changed files with 161 additions and 52 deletions
--- a/const.js
+++ b/const.js
@ -89,6 +89,7 @@ var web = {CHAT: "chat",
 	GET: "GET", PUT: "PUT", POST: "POST", DELETE: "DELETE",
 	Accept: "Accept", ContentType: "Content-Type", ContentJSON: "application/json", ContentFORM: "application/x-www-form-urlencoded",
 	IMAGE_PNG: "image/png", VIDEO_WEBM: "video/webm",
+	URL: "url",
 	
 	CODE_GIT_STATUS: "web.code.git.status",
 	CODE_GIT_REPOS: "web.code.git.repos",
@ -108,6 +109,7 @@ var web = {CHAT: "chat",
 }
 var aaa = {
 	SESS: "sess",
+	AUTH: "auth",
 	USER: "user",
 	EMAIL: "email",
 	LOGIN: "login", LOGOUT: "logout", INVITE: "invite", TOKEN: "token",
@ -239,6 +241,13 @@ var mall = {
 	ASSET: "asset", SALARY: "salary",
 }

+var http = {
+	ContentType: "Content-Type",
+}
+var mime = {
+	TextPlain: "text/plain",
+	ApplicationJSON: "application/json",
+}
 var html = {PLUGIN_MARGIN: 10, ACTION_HEIGHT: 32, ACTION_MARGIN: 200,
 	FIELDSET: "fieldset", LEGEND: "legend", OPTION: "option", ACTION: "action", OUTPUT: "output", STATUS: "status",
 	OPTION_ARGS: "select.args,input.args,textarea.args", INPUT_ARGS: "input.args,textarea.args", INPUT_BUTTON: "input[type=button]", INPUT_FILE: "input[type=file]",
@ -266,6 +275,7 @@ var html = {PLUGIN_MARGIN: 10, ACTION_HEIGHT: 32, ACTION_MARGIN: 200,
 	SCROLLBAR: "scrollbar",
 	VISIBILITY: "visibility",
 	VERTICAL: "vertical", HORIZON: "horizon",
+	NOTICE: "notice", DANGER: "danger",

 	SIZE: "size", OPACITY: "opacity", VISIBLE: "visible", 
 	CLASS: "class", LIGHT: "light", DARK: "dark",
@ -283,6 +293,7 @@ var html = {PLUGIN_MARGIN: 10, ACTION_HEIGHT: 32, ACTION_MARGIN: 200,
 	DIV_FLOAT: "div.float", DIV_TOAST: "div.toast", DIV_CARTE: "div.carte",
 	DESKTOP: "desktop", DIV_DESKTOP: "div.desktop", DIV_EXPAND: "div.expand",
 	DIV_ITEM_SELECT: "div.item.select",
+	DIV_TABS_SELECT: "div.tabs.select",
 }
 var svg = {
 	GROUP: "group", PID: "pid", GRID: "grid",
--- a/frame.js
+++ b/frame.js
@ -1,9 +1,10 @@
 Volcanos(chat.ONENGINE, {_init: function(can, meta, list, cb, target) {
+		console.log(can.misc._time())
 		if (!can.user.isMailMaster) { if (can.misc.Search(can, ice.MSG_SESSID)) { can.misc.CookieSessid(can, can.misc.Search(can, ice.MSG_SESSID)); return can.misc.Search(can, ice.MSG_SESSID, "") } }
 		can.Option = function() {}, can.run = function(event, cmds, cb) { var msg = can.request(event); cmds = cmds||[]; return (can.onengine[cmds[0]]||can.onengine._remote)(event, can, msg, can, cmds, cb) }
 		can.user.title(can.misc.SearchOrConf(can, chat.TITLE)||can.misc.Search(can, ice.POD)||location.host)
 		can.core.Next(list, function(item, next) { item.type = chat.PANEL
-			can.onappend._init(can, item, item.list, function(sub) { can[item.name] = sub
+			can.onappend._init(can, item, item.list, function(sub) { can[item.name] = sub, sub.db = {}, sub.ui = {}, sub.db._boot = can.misc._time()
 				sub.run = function(event, cmds, cb) { var msg = sub.request(event); cmds = cmds||[]; return (can.onengine[cmds[0]]||can.onengine._remote)(event, can, msg, sub, cmds, cb) }
 				can.core.Item(sub.onplugin, function(key, cmd) { sub.onplugin.hasOwnProperty(key) && can.base.isFunc(cmd) && can.onengine.plugin(sub, can.core.Keys(ice.CAN, key), cmd) })
 				can.core.ItemCB(sub.onaction, function(key, cb) { can.onengine.listen(can, key, function(msg) { can.core.CallFunc(cb, {event: msg._event, can: sub, msg: msg}) }) })
@ -107,7 +108,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 		var output = can.page.SelectOne(can, field, html.DIV_OUTPUT)
 		var status = can.page.SelectOne(can, field, html.DIV_STATUS)
 		legend.innerHTML = legend.innerHTML || meta.index
-		can.base.isIn(meta.index, web.WIKI_PORTAL) && can.onappend.style(can, html.OUTPUT, field)
+		(can.base.isIn(meta.index, web.WIKI_PORTAL) || meta.style == html.OUTPUT) && can.onappend.style(can, html.OUTPUT, field)
 		var sub = Volcanos(meta.name, {_root: can._root||can, _follow: can.core.Keys(can._follow, meta.name), _target: field,
 			_legend: legend, _option: option, _action: action, _output: output, _status: status, _history: [],
 			Status: function(key, value) { if (can.base.isObject(key)) { return can.core.Item(key, sub.Status), key } try {
@ -178,9 +179,10 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			})
 		}; var auto; can.core.Next(can.core.Value(can, [chat.ONIMPORT, mdb.LIST])||meta.inputs, add, function() { skip || can.Conf(ice.AUTO) == "delay" || auto && auto.click() })
 	},
-	_action: function(can, list, action, meta) { meta = meta||can.onaction||{}, action = action||can._action, can.onmotion.clear(can, action)
+	_action: function(can, list, action, meta, hold) { meta = meta||can.onaction||{}, action = action||can._action, hold || can.onmotion.clear(can, action)
 		function run(event, button) { can.misc.Event(event, can, function(msg) { var _can = can._fields? can.sup: can; can.requestAction(event, button)
-			var cb = meta[button]||meta[chat._ENGINE]; cb? can.core.CallFunc(cb, {event: event, can: can, button: button}): can.run(event, button == mdb.LIST? []: [ctx.ACTION, button].concat(_can.Input()))
+			var cb = meta[button]||meta[chat._ENGINE]; cb? can.core.CallFunc(cb, {event: event, can: can, button: button}):
+				can.run(event, button == mdb.LIST? []: [ctx.ACTION, button].concat(_can.Input()))
 		}) }
 		return can.core.List(can.page.inputs(can, can.base.getValid(can.base.Obj(list), can.core.Value(can, [chat.ONACTION, mdb.LIST]), meta != can.onaction? can.core.Item(meta): [])||[]), function(item) {
 			can.base.isUndefined(item) || can.onappend.input(can, item == ""? /* 1.空白 */ {type: html.BR}:
@ -189,7 +191,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 				}}: item.length > 0? /* 3.列表 */ {type: html.SELECT, name: item[0], values: item.slice(1), onchange: function(event) { can.misc.Event(event, can, function(msg) {
 					var button = event.target.value; meta[item[0]]? can.core.CallFunc(meta[item[0]], [event, can, item[0], button]): meta[button] && can.core.CallFunc(meta[button], [event, can, button])
 				}) }}: /* 4.其它 */(item.type == html.BUTTON && (item.value = item.value||can.user.trans(can, item.name, meta._trans), item.onclick = item.onclick||function(event) {
-					run(event, item.name)
+					run(event, item.name||item.value)
 				}, item._init = item._init||function(target) { item.action && can.onappend.figure(sub, item, target, function(_sub, value) { can.Update() })
 					if (can.base.isIn(item.name, mdb.CREATE, mdb.INSERT)) { can.onappend.style(can, "icons", target.parentNode)
 						can.page.Append(can, target.parentNode, [{icon: item.name, onclick: function(event) { can.Update(event, [ctx.ACTION, item.name]) }}])
@ -213,10 +215,10 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			can.onappend._output(can, msg, meta.display||msg.Option(ice.MSG_DISPLAY)||meta.feature.display)
 		})
 	},
-	_output: function(can, msg, display, output, action, cb) { display = display||chat.PLUGIN_TABLE_JS, output = output||can._output
+	_output: function(can, msg, display, cb, output, status, action) { display = display||chat.PLUGIN_TABLE_JS, output = output||can._output
 		can.misc.Search(can, log.DEBUG) == ice.TRUE && can.base.beginWith(display, "/require/src/") && delete(Volcanos.meta.cache[display])
 		Volcanos(display, {_root: can._root, _follow: can.core.Keys(can._follow, display), _fields: can._target, _target: output, _path: display||chat.PLUGIN_TABLE_JS,
-			_legend: can._legend, _option: can._option, _action: can._action, _output: output, _status: can._status,
+			_legend: can._legend, _option: can._option, _action: action||can._action, _output: output, _status: status||can._status,
 			Update: can.Update, Option: can.Option, Action: can.Action, Status: can.Status, db: {}, ui: {},
 		}, [display, chat.PLUGIN_TABLE_JS], function(sub) { sub.Conf(can.Conf())
 			var last = can.sub; last && can.core.CallFunc([last, "onaction.hidden"], {can: last})
@ -229,7 +231,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 				can.onmotion.clear(can, can._option), can.onappend._option(can, {inputs: can.page.inputs(can, sub.onimport.list, html.TEXT) })
 			}
 			can.core.CallFunc([sub, chat.ONIMPORT, chat._INIT], {can: sub, msg: msg, cb: function(msg) {
-				if (action !== false) {
+				if (action !== false) { can.onkeymap._build(sub)
 					can.onmotion.clear(can, can._action), sub.onappend._action(sub, can.Conf(ice.MSG_ACTION)||msg.Option(ice.MSG_ACTION), action||can._action)
 					sub.onappend._status(sub, sub.onexport&&sub.onexport.list||msg.Option(ice.MSG_STATUS)), can.user.isMobile || sub.onappend.tools(sub, msg)
 				}
@ -312,7 +314,9 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			target.onclick = function(event) { can.misc.Event(event, can, function(msg) { can.run(can.request(event, can.Option()), [ctx.ACTION, target.name]) }) }
 		}) } return code.scrollBy && code.scrollBy(0, 10000), code 
 	},
-	tools: function(can, msg, cb, target) { can.onimport.tool(can, can.base.Obj(msg.Option(ice.MSG_TOOLKIT), []), cb, target) },
+	tools: function(can, msg, cb, target) {
+		can.onimport.tool(can, can.base.Obj(msg.Option(ice.MSG_TOOLKIT), can.misc.sessionStorage(can, [can.ConfIndex(), "tool"]))||[], cb, target)
+	},

 	style: function(can, style, target) { target = target||can._fields||can._target
 		if (can.base.endWith(style, ".css")) { return can.require([style]) }
@ -391,6 +395,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 				can.page.style(can, target, html.HEIGHT, h, html.WIDTH, w), width -= w
 			}
 		}), can.core.List(list, function(item) { if (can.base.isArray(item)) { layout(type == FLOW? FLEX: FLOW, item, height, width) } }) }
+		ui.profile && can.onmotion.hidden(can, ui.profile), ui.display && can.onmotion.hidden(can, ui.display)
 		if (can.onimport.filter) { ui.filter = can.onimport.filter(can, ui.project) }
 		ui.layout = function(height, width, delay, cb) { can.onmotion.delay(can, function() { defer = [], layout(type, ui.list, height, width), defer.forEach(function(cb) { cb() }), cb && cb(content_height, content_width) }, delay||0) }; return ui
 	},
@ -480,7 +485,10 @@ Volcanos(chat.ONLAYOUT, {_init: function(can, target) { target = target||can._ro
 				}
 			}
 			if (layout.left+target.offsetWidth > left+width) { layout.left = (right? rect.left: left+width)-target.offsetWidth-1 }
-		}); return can.onmotion.move(can, target, layout), layout
+		}); 
+		can.onmotion.move(can, target, layout)
+		can.onmotion.slideDown(can, target)
+		return layout
 	},
 })
 Volcanos(chat.ONMOTION, {_init: function(can, target) {
@ -596,7 +604,9 @@ Volcanos(chat.ONMOTION, {_init: function(can, target) {
 	},
 	clear: function(can, target) { return can.page.Modify(can, target||can._output, ""), target },
 	cache: function(can, next) { var list = can.base.getValid(can.base.Obj(can.core.List(arguments).slice(2)), [can._output])
-		var key = next(can._cache_data = can._cache_data||{}, list[0]._cache_key); if (key == list[0]._cache_key) { return true }
+		var data = can._cache_data = can._cache_data||{}, old = list[0]._cache_key
+		var key = next(function(save) { if (old) { data[old] = save } }, function(hash, load) { var bak = data[hash]; if (bak) { load(bak) } return hash })
+		if (key == old) { return true }
 		can.core.List(list, function(target) { target && target._cache_key && can.page.Cache(target._cache_key, target, target.scrollTop+1) })
 		return key && can.core.List(list, function(target) { if (!target) { return }
 			var pos = can.page.Cache(target._cache_key = key, target); if (pos) { target.scrollTo && target.scrollTo(0, pos-1); return target }
@ -648,7 +658,14 @@ Volcanos(chat.ONMOTION, {_init: function(can, target) {
 			}
 		}
 	},
-	touch: function() {
+	slideDown: function(can, target) {
+		var top = target.offsetTop, offset = 32, begin = top - offset
+		can.page.style(can, target, html.TOP, begin)
+		can.core.Timer({interval: 1, length: 30}, function(timer, interval, index, list) {
+			can.page.style(can, target, html.TOP, begin += offset/list.length)
+		}, function() {
+			can.page.style(can, target, html.TOP, top)
+		})
 	},
 })
 Volcanos(chat.ONKEYMAP, {_init: function(can, target) { target = target||document.body
--- a/index.css
+++ b/index.css
@ -166,6 +166,7 @@ body {
 	--code-constant:gray; --code-string:brown; --code-object:purple;

 	--box-border:var(--plugin-border-color) solid 1px;
+	--box-notice:var(--notice-bg-color) solid 1px;
 	--box-shadow:var(--body-fg-color) 2px 2px 8px;
 	--svg-stroke-width:2;
 }
@ -213,13 +214,6 @@ fieldset>form.option>div.item.select { border-radius:5px; }
 fieldset>div.action>div.item.select { border-radius:5px; }
 fieldset>div.action>div.item.button { border-radius:5px; }
 fieldset>div.action>div.item { margin-right:10px; box-shadow:var(--box-shadow); }
-
-fieldset.web.code.docker.studio>div.action>div.item { font-style:italic; height:32px; padding:5px 10px; }
-fieldset.web.code.docker.studio>div.output>fieldset { margin:0; }
-fieldset.web.code.docker.studio>div.output>fieldset>legend { display:none; }
-fieldset.web.code.docker.studio>div.output>fieldset>form.option>div:first-child { margin-left:10px; }
-fieldset.web.code.docker.studio>div.output { padding:10px; }
-
 fieldset>div.output { width:100%; }
 fieldset>div.output table.content input { margin-right:10px; box-shadow:var(--box-shadow); }
 fieldset>div.status { width:100%; }
@ -279,7 +273,7 @@ select, input { font-size:1rem; height:32px; }  input::placeholder, textarea::pl
 textarea { font-size:1rem; tab-size:2; padding:5px; height:96px; width:100%; resize:vertical; }
 table.content, div.code, div.story[data-type=spark] { white-space:pre; margin:0; }
 div.story[data-type=spark] { padding:0 5px; border-left:var(--notice-bg-color) solid 5px; }
-fieldset>div.action>div.tabs { font-style:italic; padding:0 10px;}
+fieldset>div.action>div.tabs { font-style:italic; padding-left:10px; box-shadow:var(--box-shadow); margin-left:5px; }
 fieldset>div.output>div.code { font-size:14px; }
 fieldset>div.status>div.item { padding:5px; height:31px; }
 fieldset>div.status>div.item>label { font-size:0.6rem; }
@ -405,9 +399,19 @@ fieldset.full { position:fixed; left:0; top:0; }
 fieldset>div.output>div.code { position:sticky; left:0; }
 legend, select, input[type=button], th, table.content td, h1, h2, h3, div.item, div.tabs { cursor:pointer; }
 div.story[data-type=spark] { cursor:copy; }
-fieldset>div.status>legend { margin-right:10px; float:right; clear:none; }
-fieldset>div.status>legend:not(:hover):not(.select) { background-color:unset; box-shadow: var(--box-shadow); }
+fieldset>div.status>legend {
+	font-style:italic; margin-right:5px; float:right; clear:none;
+	border-radius: 0; border-bottom-left-radius:10px; border-bottom-right-radius:10px;
+	box-shadow: var(--box-shadow);
+}
+fieldset>div.status>legend>span.remove { margin-left:10px; }
+fieldset>div.status>legend>span.remove:hover { background-color:var(--hover-bg-color); }
+fieldset>div.status>legend:not(:hover)>span.remove { visibility:hidden; }
+fieldset>div.status>legend:not(:hover):not(.select) { background-color:unset; border-radius: 0; }
 /* hover */
+div.item.notice input:hover[type=button] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
+div.item.danger input:hover[type=button] { background-color:var(--danger-bg-color); color:var(--danger-fg-color); }
+input:hover[type=button][name=create] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
 input:hover[type=button][name=create] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
 input:hover[type=button][name=insert] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
 input:hover[type=button][name=restart] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
@ -451,7 +455,18 @@ span.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-c
 span.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
 span.icon:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
 div.action div.tabs:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
-div.action div.tabs.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+/* div.action div.tabs.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } */
+div.action div.tabs {
+	/* border-top-left-radius:10px; border-top-right-radius:10px; */
+}
+div.action div.tabs:hover {
+	background-color:var(--output-bg-color); color:var(--hover-fg-color);
+	border-top-left-radius:10px; border-top-right-radius:10px;
+}
+div.action div.tabs.select {
+	background-color:var(--output-bg-color); color:var(--hover-fg-color);
+	border-top-left-radius:10px; border-top-right-radius:10px;
+}
 fieldset>div.output { background-color:var(--output-bg-color); }
 fieldset>div.status { border-top:var(--status-border); max-height:32px; }
 fieldset:not(.panel):not(.cmd) { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); }
@ -482,6 +497,7 @@ body.light fieldset.panel:not(.main):not(.auto) div.item.select { background-col
 body.light fieldset.panel:not(.main):not(.auto) input { background-color:var(--panel-input-bg-color); color:var(--panel-input-fg-color); border-radius:var(--input-radius); }
 body.light fieldset.panel:not(.main)>div.output>div.item>input::placeholder { background-color:var(--panel-input-bg-color); color:var(--panel-fg-color); }
 body.light fieldset.panel:not(.main) label { color:var(--panel-fg-color); }
+body.light fieldset.panel:not(.main) a { color:var(--panel-fg-color); }
 body.light span.keyword { color:darkblue; } body.light span.function { color:darkcyan; }
 body.dark span.keyword { color:royalblue; } body.dark span.function { color:lightgreen; }
 /* print */
@ -531,7 +547,17 @@ fieldset.draw.trend div.output { overflow:hidden; }
 fieldset.draw.spide div.output { overflow-y:hidden; }
 fieldset.draw.spide div.output svg text { cursor:pointer; }
 fieldset.draw.spide div.output svg path { stroke-width:1; }
+fieldset.web.code.docker.studio>div.action>div.item { font-style:italic; height:32px; padding:5px 10px; }
+fieldset.web.code.docker.studio>div.output>fieldset { margin:0; }
+fieldset.web.code.docker.studio>div.output>fieldset>legend { display:none; }
+fieldset.web.code.docker.studio>div.output>fieldset>form.option>div:first-child { margin-left:10px; }
+fieldset.web.code.docker.studio>div.output { padding:10px; }
 fieldset.web.code.git.status>div.output table.content { width:100%; }
+fieldset.cmd>legend { background-color:var(--ui-blue-8); }
+fieldset.cmd>div.action>div.tabs.select { border-bottom:var(--notice-bg-color) solid 2px; height:32px; }
+fieldset.cmd>div.status>legend.select { border-top:var(--notice-bg-color) solid 2px; }
+fieldset.cmd>div.output>div.project div.item.select { border-right:var(--notice-bg-color) solid 4px; }
+fieldset.cmd>div.output>div.project div.item { line-height:32px; }
 fieldset.can.view { font-size:14px; }
 fieldset.can.data { font-size:14px; }
 img, iframe { margin-bottom:-3px; }
--- a/lib/base.js
+++ b/lib/base.js
@ -117,6 +117,7 @@ Volcanos("base", {
 		if (arg[i] && str.replace) { while (str.indexOf(arg[i]) > -1) { str = str.replace(arg[i], arg[i+1]) } }
 	} return str },
 	contains: function(str) { var arg = arguments; for (var i = 1; i < arg.length; i++) { if (!arg[i] || str.indexOf(arg[i]) > -1) { return true } } },
+	capital: function(str) { return str.slice(0, 1).toUpperCase()+str.slice(1) },
 	beginWith: function(str) {
 		for (var i = 1; i < arguments.length; i++) {
 			if (typeof str == code.STRING && str.trim().indexOf(arguments[i]) == 0) { return true }
--- a/lib/page.js
+++ b/lib/page.js
@ -206,7 +206,8 @@ Volcanos("page", {
 	Format: function(type) { var arg = arguments; switch (type) {
 		case html.A: return "<a href='"+arg[1]+"' target='_blank'>"+(arg[2]||arg[1])+"</a>"
 		case html.IMG: return arg[2]? "<img src='"+arg[1]+"' height="+arg[2]+">": "<img src='"+arg[1]+"'>"
-		case html.SPAN: return arg[2]? "<span class='"+arg[2]+"'>"+arg[1]+"</span>": arg[1]
+		case html.SPAN:
+			return arg[2]? "<span class='"+arg[2]+"'>"+arg[1]+"</span>": arg[1]
 		default: /* type inner arg... */
 			var list = ["<"+type]; for (var i = 2; i < arg.length; i += 2) { list.push(lex.SP+arg[i]+mdb.EQ+arg[i+1]) }
 			return list.concat(">", arg[1], "</", type, ">").join("")
--- a/panel/action.js
+++ b/panel/action.js
@ -48,8 +48,8 @@ Volcanos(chat.ONACTION, {_init: function(can, target) {
 		})
 	},
 	onstorm_select: function(can, msg, river, storm) {
-		if (can.onmotion.cache(can, function(cache, old) { old && (cache[old] = can._plugins)
-			var key = can.core.Keys(can.Conf(chat.RIVER, river), can.Conf(chat.STORM, storm)); return can._plugins = cache[key]||[], key
+		if (can.onmotion.cache(can, function(save, load) { save({plugins: can._plugins})
+			return load(can.core.Keys(can.Conf(chat.RIVER, river), can.Conf(chat.STORM, storm)), function(bak) { can._plugins = bak.plugins })
 		}, can._output, can._action, can._header_tabs)) { if (msg.Option("refresh") != "true") { return can.onaction.layout(can) } }
 		can.run(can.request({}, {_method: web.GET}), [river, storm], function(msg) {
 			if (msg.Length() == 0) { return can.user.isLocalFile? can.user.toastFailure(can, "miss data"): can.onengine.signal(can, chat.ONACTION_NOTOOL, can.request({}, {river: river, storm: storm})) }
--- a/panel/footer.js
+++ b/panel/footer.js
@ -29,7 +29,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.Conf(NKEY, can.
 	ncmd: function(can, msg, _follow, _cmds) { can.onimport._data(can, NCMD, {time: can.base.Time(), follow: _follow, cmds: _cmds}), can.onimport.nlog(can, NLOG) },
 	nlog: function(can, name) { can.onimport.count(can, name) },
 })
-Volcanos(chat.ONACTION, {_init: function(can) { can.ui = {}, can.db = {} },
+Volcanos(chat.ONACTION, {_init: function(can) {},
 	onsize: function(can) { can.ConfHeight(can._target.offsetHeight), can.ConfWidth(can._target.offsetWidth) },
 	onlogin: function(can, msg) { can.run(can.request({}, {_method: web.GET}), [], function(msg) { can.onmotion.clear(can), can.onimport._init(can, msg, can._output) }) },
 	ontoast: function(can, msg) { can.core.CallFunc(can.onimport.ntip, {can: can, msg: msg}) },
@ -112,5 +112,15 @@ Volcanos(chat.ONPLUGIN, {
 			], true)]); can.onmotion.delay(can, function() { can.page.Select(can, ui._target, "div.item.head,div.item.body", function(target) { target.click() }) })
 		}
 	}),
+	runtime: shy("网页环境", [mdb.KEY], function(can, msg, arg) {
+		msg.Echo(JSON.stringify({
+			href: location.href,
+			height: can.page.height(), width: can.page.width(),
+			userAgent: navigator.userAgent,
+			history: history.length,
+			boot: can.db._boot,
+			version: window._version,
+		})).Display("/plugin/story/json.js")
+	})
 })
 })()
--- a/panel/search.js
+++ b/panel/search.js
@ -5,7 +5,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onmotion.clear(can, can
 		can.onmotion.toggle(can, can._status, can.db.type != mdb.FOREACH) && can.onappend._status(can, can.base.Obj(msg.Option(ice.MSG_STATUS), []).concat({name: mdb.SELECT, value: "0"}))
 		can.onmotion.focus(can, can.ui.filter), msg.Length() == 1 && can.ui.profile.innerHTML == "" && can.page.Select(can, table, html.TD)[0].click()
 	},
-	_size: function(can) { can.ui && can.getActionSize(function(left, top, width, height) {
+	_size: function(can) { can.ui && can.ui.content && can.getActionSize(function(left, top, width, height) {
 		can.page.style(can, can._target, {left: left||0, top: top||0, width: width}), can.page.style(can, can._output, html.MAX_HEIGHT, height -= 2*html.PLUGIN_MARGIN+html.ACTION_HEIGHT+can.onexport.statusHeight(can))
 		can.core.List([can.ui.content, can.ui.display], function(target) { can.page.style(can, target, html.MAX_WIDTH, can.ConfWidth(width-2*html.PLUGIN_MARGIN)) })
 		can.ConfHeight(can.base.Min(height-can.ui.content.offsetHeight-can.ui.display.offsetHeight-1, height/2))
--- a/plugin/local/code/inner.css
+++ b/plugin/local/code/inner.css
@ -44,9 +44,10 @@ fieldset.inner>div.output>div.project>div.zone>div.item>span.icon { font-style:n
 fieldset.inner.cmd>div.output>div.layout>div.tabs { height:38px; display:block; overflow:hidden; background-color:var(--plugin-bg-color); }
 fieldset.inner.cmd>div.output>div.layout>div.tabs.hide { display:none; }
 fieldset.inner.cmd>div.output>div.layout>div.tabs>div { padding:10px; height:38px; float:left; }
+fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs { padding-right:0; margin-left:5px; box-shadow:var(--box-shadow); }
 fieldset.inner.cmd>div.output>div.layout>div.tabs>div.icon { font-size:26px; line-height:32px; padding:2px 5px; position:sticky; top:0; }
-fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs.select { background-color:var(--output-bg-color); box-shadow:var(--box-shadow); }
-fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs:hover { background-color:var(--output-bg-color); }
+fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs.select { background-color:var(--output-bg-color); border-top-left-radius:10px; border-top-right-radius:10px; }
+fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs:hover { background-color:var(--output-bg-color); border-top-left-radius:10px; border-top-right-radius:10px; }
 fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs>span { font-style:italic; }
 fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs>span.icon { padding:0 5px; }
 fieldset.inner.cmd>div.output>div.layout>div.tabs>div.usernick { float:right; position:sticky; top:0; }
--- a/plugin/local/code/inner.js
+++ b/plugin/local/code/inner.js
@ -6,6 +6,7 @@ const PROFILE_ARGS = "profile:args:", DISPLAY_ARGS = "display:args:"
 const CURRENT_FILE = "web.code.inner:currentFile", SELECT_LINE = "selectLine"
 const VIEW_CREATE = "tabview.view.create", VIEW_REMOVE = "tabview.view.remove", LINE_SELECT = "tabview.line.select"	
 Volcanos(chat.ONIMPORT, {_init: function(can, msg, cb) { var paths = can.core.Split(can.Option(nfs.PATH), mdb.FS); can.Option(nfs.PATH, paths[0])
+		can.Mode(msg.Option("mode")||can.Mode()), can.Option(nfs.FILE) == " " && can.Option(nfs.FILE, "")
 		if (can.Mode() == ice.MSG_RESULT) { msg.result = msg.result||[can._output.innerHTML], can.Mode(chat.SIMPLE) }
 		can.core.List(paths.concat(can.core.Split(msg.Option(nfs.REPOS))), function(p) { if (can.base.beginWith(p, nfs.USR_LOCAL_WORK) || can.base.endWith(p, "-dict/")) { return }
 			if (p && paths.indexOf(p) == -1 && p[0] != nfs.PS) { paths.push(p) }
@ -221,7 +222,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, cb) { var paths = can.core.Sp
 				}, target)
 			})
 		} else if (msg.Option(ice.MSG_DISPLAY) != "") {
-			can.onappend._output(can, msg, msg.Option(ice.MSG_DISPLAY), target, false, function(msg) { can.onimport.layout(can) })
+			can.onappend._output(can, msg, msg.Option(ice.MSG_DISPLAY), function(msg) { can.onimport.layout(can) }, target)
 		} else if (msg.Result().indexOf("<iframe src=") > -1) {
 			var src = can.page.Select(can, can.page.Create(can, html.DIV, msg.Result()), html.IFRAME, function(target) { return target.src })[0]
 			can.page.Append(can, target, [{type: html.IFRAME, src: src, style: {height: height, width: width}}])
@ -262,7 +263,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, cb) { var paths = can.core.Sp
 		can.onimport.toolkit(can, {index: ice.CAN_PLUGIN, display: (url[0] == nfs.PS || url.indexOf(web.HTTP) == 0? "": can.base.Dir(can._path))+url}, function(sub) {
 			sub.run = function(event, cmds, cb) {
 				if (cmds.length > 0 && cmds[0] == ctx.ACTION) {
-					can.run(can.request(event, can.Option()), cmds, cb||function(msg) { can.onappend._output(sub, msg, sub.Conf(ctx.DISPLAY)) }, true)
+					can.run(can.request(event, can.Option()), cmds, cb||function(msg) { can.onappend._output(sub, msg, sub.Conf(ctx.DISPLAY)) })
 				} else { can.onappend._output(sub, can.request(event), sub.Conf(ctx.DISPLAY)) }
 			}, can.db.toolkit[url.split(web.QS)[0]] = sub, can.base.isFunc(cb)? cb(sub): sub.select(), can.page.Modify(can, sub._legend, can.base.trimPrefix(url, "inner/"))
 		})
@ -316,17 +317,16 @@ Volcanos(chat.ONLAYOUT, {
 	},
 })
 Volcanos(chat.ONSYNTAX, {_init: function(can, msg, cb) { var key = can.onexport.keys(can), path = msg.Option(nfs.PATH, can.Option(nfs.PATH)), file = msg.Option(nfs.FILE, can.Option(nfs.FILE))
-		can.onmotion.cache(can, function(cache_data, cache_key) {
-			if (cache_key) { cache_data[cache_key] = {profile: can.ui.profile.className, display: can.ui.display.className} }
-			var back = cache_data[key]; if (back) { can.ui.profile.className = back.profile, can.ui.display.className = back.display } else { can.onmotion.hidden(can, can.ui.profile), can.onmotion.hidden(can, can.ui.display) }
-			return key
+		can.onmotion.cache(can, function(save, load) { save({profile: can.ui.profile.className, display: can.ui.display.className})
+			can.onmotion.hidden(can, can.ui.profile), can.onmotion.hidden(can, can.ui.display)
+			return load(key, function(bak) { can.ui.profile.className = bak.profile, can.ui.display.className = bak.display })
 		}, can.ui.profile, can.ui.display)
 		if (msg._content) { var list = can.page.Select(can, msg._content, html.DIV_CONTENT, function(target) { if (target._cache_key == key) { return target } })
 			if (list.length > 0) { can.onmotion.select(can, msg._content, html.DIV_CONTENT, list[0]) } else {
 				var list = can.page.Select(can, msg._content, html.DIV_CONTENT, function(target) { if (target._cache && target._cache[key]) { return target } })
-				if (list.length > 0) { can.onmotion.cache(can, function(cache_data) { return key }, list[0]) }
+				if (list.length > 0) { can.onmotion.cache(can, function() { return key }, list[0]) }
 			} return can.ui.content = list[0]||msg._content, cb(msg._content)
-		} var content = can.ui.content; if (content._root) { can.onmotion.cache(can, function(cache_data) { return key }, content) }
+		} var content = can.ui.content; if (content._root) { can.onmotion.cache(can, function() { return key }, content) }
 		if (can.onexport.parse(can) == nfs.SVG) { msg.Option(ctx.INDEX, web.WIKI_DRAW+mdb.FS+path+file) }
 		if (msg.Option(ctx.INDEX)) { return can.onsyntax._index(can, msg, function(target) { can.ui.content = target, cb(msg._content = content._root? (target._root = content._root): target) }, content._root? content: can.ui._profile.parentNode) }
 		function show(p) {
--- a/plugin/local/team/plan.js
+++ b/plugin/local/team/plan.js
@ -41,11 +41,8 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 		}]) }), can.onmotion.story.auto(can, can.ui.profile)
 	},
 	_display: function(can, task) { can.onmotion.toggle(can, can.ui.display, true)
-		if (can.onmotion.cache(can, function(data, old) {
-			if (old) { data[old] = {_plugin_display: can._plugin_display} }
-			var key = [task.space, task.zone, task.id].join(nfs.PT)
-			var last = data[key]; if (last) { can._plugin_display = last._plugin_display }
-			return can.sup.task = task, can.Status(task), key
+		if (can.onmotion.cache(can, function(save, load) { save({_plugin_display: can._plugin_display}), can.sup.task = task, can.Status(task)
+			return load([task.space, task.zone, task.id].join(nfs.PT), function(bak) { can._plugin_display = bak._plugin_display })
 		}, can.ui.display)) { return }
 		task[ctx.EXTRA_INDEX] && can.onappend.plugin(can, {space: task.space, index: task[ctx.EXTRA_INDEX], args: task[ctx.EXTRA_ARGS], height: can.ConfHeight()/2-2*html.ACTION_HEIGHT}, function(sub, meta) {
 			sub.run = function(event, cmds, cb) { can.request(event, kit.Dict(team.TASK_POD, task.space, team.TASK_ZONE, task.zone, team.TASK_ID, task.id))
--- a/plugin/state.js
+++ b/plugin/state.js
@ -62,7 +62,7 @@ Volcanos(chat.ONACTION, {list: [
 		"生成脚本", "生成图片",
 		["视图", "参数", "操作", "状态", "专注", "项目", "预览", "演示"],
 		["数据", "保存参数", "清空参数", "复制数据", "下载数据", "清空数据", "删除工具"],
-		["调试", "打包页面", "查看文档", "查看脚本", "查看源码", "查看配置", "查看日志"],
+		["调试", "打包页面", "查看文档", "查看脚本", "查看源码", "查看配置", "查看日志", "添加工具"],
 	],
 	_engine: function(event, can, button) { can.Update(event, [ctx.ACTION, button].concat(can.Input())) },
 	_switch: function(can, sub, mode, save, load) {
@ -124,6 +124,11 @@ Volcanos(chat.ONACTION, {list: [
 	"查看源码": function(event, can) { can.request(event).Option(ctx.ACTION, nfs.SOURCE), can.onengine.signal(can, "ondebugs", can.requestPodCmd(event)) },
 	"查看配置": function(event, can) { can.request(event).Option(ctx.ACTION, ctx.CONFIG), can.onengine.signal(can, "ondebugs", can.requestPodCmd(event)) },
 	"查看日志": function(event, can) { var sub = can.sub; sub.onimport.tool(sub, ["can.debug"], function(sub) { sub.select() }) },
+	"添加工具": function(event, can) {
+		can.user.input(event, can, [ctx.INDEX, ctx.ARGS], function(data) {
+			var sub = can.sub; sub.onimport.tool(sub, [data], function(sub) { sub.select() })
+		})
+	},

 	refresh: function(event, can) { can.onimport.size(can, can.ConfHeight(), can.ConfWidth(), true, can.Mode()) },
 	close: function(event, can) {
--- a/plugin/table.js
+++ b/plugin/table.js
@ -100,9 +100,16 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 	},
 	filter: function(can, target) {
 		return can.onappend.input(can, {type: html.TEXT, name: web.FILTER, placeholder: "search in n items", onkeydown: function() {}, onkeyup: function(event) {
+			if (event.key == code.ENTER) {
+				can.page.Select(can, target, html.DIV_ITEM+":not(.hide)", function(target) { target.click() })
+			} else if (event.key == code.ESCAPE) { event.currentTarget.value = "", event.currentTarget.blur()
+				can.page.Select(can, target, html.DIV_ITEM, function(target) { can.onmotion.toggle(can, target, true) })
+			} else {
+				if (can.onkeymap.selectCtrlN(event, can, target, html.DIV_ITEM+":not(.filter):not(.hide)")) { return }
 				can.page.Select(can, target, html.DIV_ITEM, function(target) {
 					can.onmotion.toggle(can, target, target.innerText.indexOf(event.currentTarget.value) > -1 || target == event.currentTarget.parentNode)
 				})
+			}
 		}}, "", target)
 	},
 	item: function(can, item, cb, cbs, target) { target = target||(can.ui && can.ui.project? can.ui.project: can._output)
@ -141,7 +148,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 			can.onmotion.select(can, action, html.DIV_TABS, tabs._target), can.base.isFunc(cb) && cb(event, tabs)
 		}, _init: function(target) { var menu = tabs._menu||shy(function(event, button) { can.Update(event, [ctx.ACTION, button]) })
 			target._item = tabs, tabs._target = target, target._close = function() { close(target) }
-			var action = can.page.parseAction(can, tabs)
+			var _action = can.page.parseAction(can, tabs)
 			can.page.Modify(can, target, {draggable: true, _close: function() { close(target) },
 				ondragstart: function(event) { action._drop = function(before) { before.parentNode == action && action.insertBefore(target, before) } },
 				ondragover: function(event) { event.preventDefault(), action._drop(event.target) },
@ -151,7 +158,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 					"Rename Tabs", function(event) { can.user.input(event, can, [mdb.NAME], function(list) {
 						can.page.Select(can, target, "span.name", function(target) { can.page.Modify(can, target, list[0]||tabs.name) })
 					}) }, menu.meta,
-				), ["Close", "Close Other", "Rename Tabs", ""].concat(can.base.getValid(menu.list, can.core.Item(menu.meta)), action), function(event, button, meta) {
+				), ["Close", "Close Other", "Rename Tabs", ""].concat(can.base.getValid(menu.list, can.core.Item(menu.meta)), _action), function(event, button, meta) {
 					(meta[button]||menu)(can.request(event, tabs), button, meta)
 				}) },
 			}), target.click()
@ -159,7 +166,10 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 	}))._target },
 	tool: function(can, list, cb, target, status) { target = target||can._output, status = status||can._status
 		can.core.List(list.reverse(), function(meta) { can.base.isString(meta) && (meta = {index: meta}), meta.mode = html.FLOAT
-			can.onimport.plug(can, meta, function(sub) { can.onmotion.hidden(can, sub._target), sub._legend._target = sub._target
+			can.onimport.plug(can, meta, function(sub) { can.onmotion.hidden(can, sub._target), sub._legend._target = sub._target, sub._legend._meta = {index: meta.index}
+				can.page.Append(can, sub._legend,[{text: [can.page.unicode.remove, "", "remove"], onclick: function(event) {
+					can.page.Remove(can, sub._target), can.page.Remove(can, sub._legend), can.onexport.tool(can), can.onkeymap.prevent(event)
+				}}])
 				status.appendChild(sub._legend), sub._legend.oncontextmenu = sub._legend.onclick, sub._legend.onclick = function(event) { can.misc.Event(event, can, function(msg) {
 					if (can.page.SelectOne(can, status, nfs.PT+html.SELECT, function(target) { can.onmotion.hidden(can, target._target), can.page.ClassList.del(can, target, html.SELECT); return target }) == sub._legend) { return }
 					sub.onimport.size(sub, can.ConfHeight()/2, (can.ConfWidth()-(can.ui && can.ui.project? can.ui.project.offsetWidth: 0))/2)
@ -167,8 +177,10 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 					if (sub._delay_init || meta.msg) { sub._delay_init = false, meta.msg = false, sub.Update() }
 				}) }, sub._delay_init = true, sub.onaction.close = function() { sub.select() }, sub.select = function() { return sub._legend.click(), sub }
 				sub.hidden = function() { can.onmotion.hidden(can, sub._target), can.page.ClassList.del(can, sub._legend, html.SELECT) }
-				sub.onaction._close = function() { can.page.Remove(can, sub._target), can.page.Remove(can, sub._legend) }
-				can.base.isFunc(cb) && cb(sub)
+				sub.onaction._close = function() {
+					can.page.Remove(can, sub._target), can.page.Remove(can, sub._legend), can.onexport.tool(can)
+				}
+				can.base.isFunc(cb) && cb(sub), can.onexport.tool(can)
 			}, target)
 		})
 	},
@ -180,6 +192,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear(
 			}, sub.onaction.close = function() { can.onmotion.hidden(can, target) }, can.base.isFunc(cb) && cb(sub)
 		}, target, field)
 	},
+	layout: function(can) { can.ui && can.ui.layout && can.ui.layout(can.ConfHeight(), can.ConfWidth()) },
 })
 Volcanos(chat.ONLAYOUT, {
 	_init: function(can, height, width) { can.core.CallFunc([can.onimport, html.LAYOUT], {can: can, height: height, width: width}) },
@ -202,4 +215,31 @@ Volcanos(chat.ONEXPORT, {
 	board: function(can) { var msg = can._msg; return msg.Result() },
 	session: function(can, key, value) { return can.misc[can.user.isWebview? "localStorage": "sessionStorage"](can, [can.Conf(ctx.INDEX), key, location.pathname].join(":"), value == ""? "": JSON.stringify(value)) },
 	action_value: function(can, key, def) { var value = can.Action(key); return can.base.isIn(value, ice.AUTO, key)? def: value },
+	tool: function(can) { can.misc.sessionStorage(can, [can.ConfIndex(), "tool"], JSON.stringify(can.page.Select(can, can._status, html.LEGEND, function(target) { return target._meta }))) },
+})
+Volcanos(chat.ONACTION, {
+	onkeydown: function(event, can) {
+		if (can.onkeymap.selectCtrlN(event, can, can._action, html.DIV_TABS)) { return }
+		can._keylist = can.onkeymap._parse(event, can, mdb.PLUGIN, can._keylist||[], can._output)
+	},
+	enter: function(event, can) {},
+})
+Volcanos(chat.ONKEYMAP, {
+	_mode: {
+		plugin: {
+			Enter: shy("执行操作", function(event, can) { can.onaction.enter(event, can) }),
+			" ": shy("搜索项目", function(event, can) { can.ui.filter && (can.ui.filter.focus(), can.onkeymap.prevent(event)) }),
+			f: shy("搜索项目", function(event, can) { can.ui.filter && (can.ui.filter.focus(), can.onkeymap.prevent(event)) }),
+			v: shy("展示预览", function(event, can) { can.ui && can.ui.profile && (can.onmotion.toggle(can, can.ui.profile), can.onimport.layout(can)) }),
+			r: shy("展示输出", function(event, can) { can.ui && can.ui.display && (can.onmotion.toggle(can, can.ui.display), can.onimport.layout(can)) }),
+			p: shy("添加插件", function(event, can) { can.sup.onaction["添加工具"](event, can.sup) }),
+			x: shy("关闭标签", function(event, can) { can.page.Select(can, can._action, html.DIV_TABS_SELECT, function(target) { target._close() }) }),
+			l: shy("打开右边标签", function(event, can) { can.page.Select(can, can._action, html.DIV_TABS_SELECT, function(target) {
+				var next = target.nextSibling; next && can.page.ClassList.has(can, next, html.TABS) && next.click()
+			}) }),
+			h: shy("打开左边标签", function(event, can) { can.page.Select(can, can._action, html.DIV_TABS_SELECT, function(target) {
+				var prev = target.previousSibling; prev && can.page.ClassList.has(can, prev, html.TABS) && prev.click()
+			}) }),
+		},
+	}, _engine: {},
 })