opt some

page/index.css

@@ -14,15 +14,17 @@ input[name=line] { width:40px; }
 input[name=text] { width:160px; }
 input[name=url] { width:320px; }
 
+fieldset.plugin.config form.option input[name=key] { width:240px; }
 table.layout { border-spacing:0; }
 table.layout td { vertical-align:top; }
 table.layout td.content { position:relative; }
-table.layout div.toggle { background-color:#e1aeae45; height:100px; top:20%; position:absolute; }
+table.layout div.toggle { font-size:24px; background-color:#e1aeae45; position:absolute; }
-table.layout div.toggle>div { color:white; height:95px; display:table-cell; vertical-align:middle; }
+table.layout div.toggle>div { color:white; display:table-cell; }
-table.layout div.toggle.project { left:0px; min-width:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; }
+table.layout div.toggle.project { padding-top: 50px; height:100px; width:15px; top:20%; left:0px; border-top-right-radius:10px; border-bottom-right-radius:10px; }
-table.layout div.toggle.profile { right:0px; min-width:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; }
+table.layout div.toggle.profile { padding-top: 50px; height:100px; width:15px; top:20%; right:0px; border-top-left-radius:10px; border-bottom-left-radius:10px; }
-table.layout div.toggle.display { overflow:hidden; margin-top:-12px; height:10px; width:100px; position:sticky; left:20%; border-top-left-radius:10px; border-top-right-radius:10px; }
+table.layout div.toggle.display { overflow:hidden; margin-top:-17px; height:15px; width:100px; position:sticky; left:40%; border-top-left-radius:10px; border-top-right-radius:10px; }
-table.layout div.toggle.display>div { color:white; text-align:center; height:10px; width:100px; }
+table.layout div.toggle.display>div { color:white; text-align:center; height:15px; width:100px; }
+fieldset.Action.cmd>div.toggle.project { display:none; }
 
 table.content tr { background-color:#04272f45; }
 table.content tr.show { background-color:red; }
@@ -99,6 +101,7 @@ body>div.carte { background-color:#295b61; color:white; padding:4px; min-width:8
 body>div.carte div.item { padding:3px 12px; }
 body>div.input { background-color:#0d4142a6; }
 body>div.input div.item { float:left; }
+body>div.input select { width:183px; }
 body>div.input input[type=text] { width:171px; }
 body>div.input input[name=username] { width:171px; }
 body>div.input input[name=password] { width:171px; }
@@ -246,3 +249,4 @@ body.white table.content th:hover, body.white table.content td.select, body.whit
 body.white table.content tr:hover { background-color:#4682b46b; }
 body.white div.item.select, body.white div.item:hover { background-color:steelblue; }
 body.white fieldset.float table { color:white; }
+

panel/action.css

@@ -17,10 +17,17 @@ fieldset.Action div.output fieldset.plugin.Full>legend { float:left; }
 fieldset.Action div.output fieldset.story.Full { background-color:#073947f2; padding:0; margin:0; position:fixed; left:0; top:0; overflow:auto; z-index:1; }
 fieldset.Action div.output fieldset.story.Full>legend { float:left; }
 fieldset.Action>div.project.toggle {
-	background-color:cornsilk; opacity:0.8; color:teal; font-size: 28px; padding-top: 50px; height: 100px; width:20px; position: fixed; top: 200px;
+	background-color:cornsilk; opacity:0.4; color:teal; font-size: 28px; padding-top: 50px; height: 100px; width:20px; position: fixed; top: 200px;
 	border-top-right-radius:20px; border-bottom-right-radius:20px;
 }
 
 fieldset.panel.cmd>div.output>fieldset.plugin { padding:0; margin:0; }
 fieldset.panel.cmd>div.output>fieldset.plugin>legend { background-color:darkcyan; padding:0 10px; margin-right:3px; height:30px; float:left; }
 body.mobile fieldset.panel.cmd>div.output>fieldset.plugin>legend { height:42px; }
+
+div.output.form div.item {
+	margin:10px 40px;
+}
+div.output.form div.item div.label {
+	margin:5px 0px;
+}

panel/action.js

@@ -90,8 +90,8 @@ Volcanos("onengine", {help: "解析引擎", list: [], _engine: function(event, p
 Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, cb, target) {
 		can.Conf(html.MARGIN_Y, 4*html.PLUGIN_MARGIN+2*html.ACTION_HEIGHT+html.ACTION_MARGIN)
 		can.Conf(html.MARGIN_X, 4*html.PLUGIN_MARGIN)
-		function toggle(view) { return !can.setRiver("display") }
+
-		var gt = "❯", lt = "❮", down = "˅", up = "˄"
+		var gt = "❯", lt = "❮"; function toggle(view) { return !can.setRiver("display") }
 		can.page.Append(can, target, [{view: [[html.TOGGLE, chat.PROJECT]], list: [{text: [gt, html.DIV]}], onclick: function(event) {
 			event.target.innerHTML = toggle()? gt: lt
 		}}])

plugin/local/code/inner.css

@@ -5,10 +5,6 @@ fieldset.inner>div.action>div.tabs:hover { background-color:#013b675c; }
 fieldset.inner>div.action>div.tabs.select { background-color:#013b675c; }
 
 fieldset.inner>div.output { color:white; }
-fieldset.inner>div.output>table.layout div.toggle.project { font-size:24px; min-width:15px; }
-fieldset.inner>div.output>table.layout div.toggle.profile { font-size:24px; min-width:15px; }
-fieldset.inner>div.output>table.layout div.toggle.display { font-size:24px; height:15px; margin-top:-17px; }
-
 fieldset.inner>div.output div.content { color:white; font-size:1.2rem; font-family:monospace; position:relative; }
 fieldset.inner>div.output div.content tr.select { background-color:#0000ff6b; }
 fieldset.inner>div.output div.content tr.select td.line { background-color:blue; border:solid 1px red; border-right:solid 2px red; }

plugin/story/form.css

@@ -0,0 +1,3 @@
+div.output.form div.item {
+	padding:40px;
+}

plugin/story/form.js

@@ -0,0 +1,62 @@
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, cb, target) {
+		can.page.ClassList.add(can, target, "form")
+		msg.Push("type", "text")
+		msg.Push("name", "name")
+		msg.Push("value", "harveyshao")
+		msg.Push("action", "key")
+
+		msg.Push("type", "text")
+		msg.Push("name", "age")
+		msg.Push("value", "18")
+		msg.Push("action", "")
+
+		msg.Push("type", "select")
+		msg.Push("name", "male")
+		msg.Push("value", "male,female")
+		msg.Push("action", "")
+
+		msg.Push("type", "textarea")
+		msg.Push("name", "intro")
+		msg.Push("value", "program")
+		msg.Push("action", "")
+
+		msg.Push("type", "button")
+		msg.Push("name", "submit")
+		msg.Push("value", "提交")
+		msg.Push("action", "")
+
+		var action = ""; msg.Table(function(value, index, array) {
+			switch (value.type) {
+				case html.BUTTON: action = action||value.name
+					can.page.Append(can, target, [{view: "item", list: [
+						{view: ["input"], list: [{type: html.INPUT, style: {width: (can.ConfWidth()-90)/2}, data: {type: value.type, value: value.value}, onclick: function(event) {
+							var args = [ctx.ACTION, action]
+							can.page.Select(can, target, ".args", function(item) { args.push(item.name, item.value)})
+							can.run(event, args)
+						}}]},
+					]}])
+					break
+				case html.SELECT:
+					can.page.Append(can, target, [{view: "item", list: [
+						{view: ["label"], list: [{text: value.name}]},
+						{view: ["input"], list: [{type: html.SELECT, className: "args", style: {width: can.ConfWidth()-100},
+							data: value, list: can.core.List(can.core.Split(value.value), function(v) { return {type: html.OPTION, name: v, value: v, inner: v} }) }]},
+					]}])
+					break
+				case html.TEXTAREA:
+					can.page.Append(can, target, [{view: "item", list: [
+						{view: ["label"], list: [{text: value.name}]},
+						{view: ["input"], list: [{type: html.TEXTAREA, className: "args", style: {width: can.ConfWidth()-100}, data: value}]},
+					]}])
+					break
+				default:
+					can.page.Append(can, target, [{view: "item", list: [
+						{view: ["label"], list: [{text: value.name}]},
+						{view: ["input"], list: [{type: "input", className: "args", style: {width: can.ConfWidth()-100}, data: value}]},
+					]}])
+			}
+		})
+	},
+}, [""])
+
+

plugin/story/trend.js

@@ -5,7 +5,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
 		can.Conf(html.HEIGHT, can.Conf(html.HEIGHT)||200)
 
 		can.msg = msg, can.data = msg.Table(), can.onimport._sum(can)
-		can.Action(html.HEIGHT, msg.Option(html.HEIGHT)||"max")
+		can.Action(html.HEIGHT, msg.Option(html.HEIGHT)||"auto")
 		can.Action("speed", parseInt(msg.Option("speed")||"100"))
 
 		can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() {
@@ -43,13 +43,13 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
 		can.onaction[can.Action("view")]({}, can)
 	},
 }, [""])
-Volcanos("onaction", {help: "组件菜单", list: ["edit", ["view", "趋势图", "柱状图", "数据源"], ["height", "100", "200", "400", "600", "800", "max"], ["speed", "10", "20", "50", "100"]],
+Volcanos("onaction", {help: "组件菜单", list: ["edit", ["view", "趋势图", "柱状图", "数据源"], ["height", "100", "200", "400", "600", "800", "auto"], ["speed", "10", "20", "50", "100"]],
 	"edit": function(event, can) {
 		can.onmotion.toggle(can, can._action)
 		can.onmotion.toggle(can, can._status)
 	},
 	"趋势图": function(event, can) { var height = can.Action(html.HEIGHT)
-		if (height == "max") {
+		if (height == "auto") {
 			height = can.Conf(html.HEIGHT)
 		}
 		height = parseInt(height)