From 05bf9ad7e329156a77b0ba73f1a06b6c800c4281 Mon Sep 17 00:00:00 2001 From: shaoying Date: Wed, 15 Jul 2020 10:45:36 +0800 Subject: [PATCH] opt tree --- frame.js | 16 +++++- index.css | 99 +++++++++++++++++-------------------- pane/Header.js | 10 +++- pane/River.js | 32 ++++++++++-- pane/Storm.js | 10 ++++ plugin/local/code/inner.css | 4 ++ plugin/local/code/inner.js | 13 ++++- 7 files changed, 121 insertions(+), 63 deletions(-) diff --git a/frame.js b/frame.js index 03452cd7..37659b1b 100644 --- a/frame.js +++ b/frame.js @@ -95,7 +95,6 @@ Volcanos("onengine", { _init: function(can, meta, list, cb, target) { ]}, }}, }, - search: function(event, can, msg, pane, cmds, cb) { var chain = cmds[1] var sub, mod = can, key, fun = can; can.core.List(chain.split("."), function(value, index, array) { fun && (sub = mod, mod = fun, key = value, fun = mod[value]) @@ -112,7 +111,7 @@ Volcanos("onengine", { _init: function(can, meta, list, cb, target) { msg.Push("name", value.name) }) } - if (cmds.length != 1) { + if (cmds.length != 1 && cmds[1] != "storm") { break } case "Storm": @@ -377,6 +376,19 @@ Volcanos("onappend", { _init: function(can, meta, list, cb, target, field) { met }]) return ui.item.Meta = item, ui.item }, + tree: function(can, target, msg, cb) { + var list = {}; msg.Table(function(value) { + can.core.List(value.path.split("/"), function(item, index, array) { + var last = array.slice(0, index).join("/") + var name = array.slice(0, index+1).join("/") + list[name] || (list[name] = can.page.Append(can, list[last]||target, [{text: [item, "div", "item"], style: {"margin-left": "10px"}, onclick: function(event) { + var hide = list[name].style.display=="none" + can.page.Modify(can, list[name], {style: {display: hide? "": "none"}}) + !hide && typeof cb == "function" && cb(event, value) + }}, {view: "list", style: {"margin-left": "10px", display: "none"}}]).last) + }) + }) + }, menu: function(can, msg, value) { can.ondetail && can.ondetail.list && can.ondetail.list.length > 0 && (can._target.oncontextmenu = function(event) { can.user.carte(can, can.ondetail||{}, msg["_detail"] || can.Conf("detail"), function(ev, item, meta) { diff --git a/index.css b/index.css index a2a1cf48..3cb06529 100644 --- a/index.css +++ b/index.css @@ -254,80 +254,69 @@ fieldset.input.key { body.white { - padding:0; - margin:0; - background:gray; + margin:0; padding:0; background-color:#0dabda; } body.white fieldset.plugin { - margin:0; - border:0; + margin:0; border:0; border-top:solid 2px #CCCCFF; background-color:white; color:black; } -body.white fieldset.plugin.Header { + +body.white fieldset.Header { + border:solid 2px #1f2224; background-color:#2f3638; - border:solid 2px #1f2224; color:white; } -body.white fieldset.plugin.Footer { - margin:0; - border:0; - border:solid 2px #1f2224; - background-color:#1f2224; - color:white; -} -body.white fieldset.plugin.Header input { - color:white; - background:white; +body.white fieldset.Header input { border:2px solid #c4c7ce; border-radius:10px 10px 10px 10px; + background-color:white; + color:white; } -body.white fieldset.plugin.River { +body.white fieldset.Footer { border:solid 2px #1f2224; background-color:#1f2224; color:white; } -body.white fieldset.plugin.River>div.output div.item.select { - background-color:black; - border:solid 2px black; +body.white fieldset.River { + border:solid 2px #1f2224; + background-color:#1f2224; color:white; } -body.white fieldset.plugin.River>div.output div.item:hover { +body.white fieldset.River>div.output div.item:hover { background-color:black; border:solid 2px black; - color:white; } -body.white fieldset.plugin.River>div.output div.subitem.select { +body.white fieldset.River>div.output div.item.select { background-color:black; border:solid 2px black; - color:white; } -body.white fieldset.plugin.River>div.output div.subitem:hover { +body.white fieldset.River>div.output div.subitem:hover { background-color:black; border:solid 2px black; - color:white; } -body.white fieldset.plugin.Storm { +body.white fieldset.River>div.output div.subitem.select { + background-color:black; + border:solid 2px black; +} +body.white fieldset.Storm { border:solid 10px #1f2224; background-color:#1f2224; color:white; } -body.white fieldset.plugin.Storm>div.output>div.item.select { +body.white fieldset.Storm>div.output>div.item:hover { background-color:black; border:solid 2px black; - color:white; } -body.white fieldset.plugin.Storm>div.output>div.item:hover { +body.white fieldset.Storm>div.output>div.item.select { background-color:black; border:solid 2px black; - color:white; } - body.white fieldset.Action { - /* background-color:black; */ background-color:#0dabda; + border-top:0; } body.white fieldset.Action fieldset.plugin { border:0; @@ -339,69 +328,71 @@ body.white fieldset.Action fieldset.plugin:hover { border-top:solid 2px #6666FF; } body.white fieldset.Action fieldset.plugin legend { - border-top:solid black 2px; + padding:2px 20px; border-radius:10px 10px 10px 10px; border:2px solid #99CCFF; - background-color:#99CCFF; background-color:#339999; - padding:0 20px; color:white; } body.white fieldset.Action fieldset.plugin legend:hover { background-color:#6ee4e4; } -body.white fieldset.Action fieldset.plugin div.output { +body.white fieldset.Action fieldset.plugin div.output{ color:black; } - +body.white fieldset.Action fieldset.plugin div.item input[type=button] { + letter-spacing:4px; +} body.white fieldset.plugin div.item input[type=text] { - color:white; - background:0; border:2px solid #c4c7ce; border-radius:8px 8px 8px 8px; + background-color:white; color:black; } -body.white fieldset.plugin div.item input[type=button] { +body.white fieldset.plugin div.item input[type=text]:hover { background-color:cyan; - color:white; - background-color:#FF9900; - border:2px solid #FF9900; +} +body.white fieldset.plugin div.item input[type=button] { padding:0 20px; border-radius:10px 10px 10px 10px; + border:2px solid #FF9900; + background-color:#FF9900; + color:white; } body.white fieldset.plugin div.item input[type=button]:hover { - background-color:#FFCC33; + border-radius:10px 10px 10px 10px; border:2px solid #FFCC33; + background-color:#FFCC33; } body.white fieldset.plugin div.item select { - margin-top:2px; - background-color:cyan; - color:white; - background-color:#99CC66; - border:2px solid #99CC66; padding:0 20px; + margin-top:2px; border-radius:10px 10px 10px 10px; + border:2px solid #99CC66; + background-color:#99CC66; + color:white; } body.white fieldset.plugin div.item select:hover { } body.white fieldset.plugin table { - background:gray; + background:#9fb5bb; border:0; } body.white fieldset.plugin table tr { background-color:gray; } body.white fieldset.plugin table tr:hover { - background:gray; + background-color:gray; } body.white fieldset.plugin table th { + padding:4px; background-color:#99CCFF; color:black; } body.white fieldset.plugin table td { + padding:4px; background-color:white; color:black; - border:0; } body.white fieldset.plugin table td:hover { background-color:lightgray; diff --git a/pane/Header.js b/pane/Header.js index a5cf755d..30e25a82 100644 --- a/pane/Header.js +++ b/pane/Header.js @@ -81,9 +81,17 @@ Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg, }, }], }]).input) var height = document.body.offsetHeight - var ui = can.page.Append(can, can._output, can.core.List(["Search", "River", "Storm", "Footer"], function(item) { + var ui = can.page.Append(can, can._output, can.core.List(["Search", "River", "Storm", "Footer", "black", "white"], function(item) { return {view: "item", list: [{type: "input", data: {name: item, type: "button", value: item.toLowerCase()}, onclick: function(event) { + if (item == "white") { + can.page.Modify(can, document.body, {className: item}) + return + } + if (item == "black") { + can.page.Modify(can, document.body, {className: item}) + return + } if (item == "Footer") { can.page.Select(can, document.body, "fieldset.Action", function(item) { if (item.style.height) { height = document.body.offsetHeight diff --git a/pane/River.js b/pane/River.js index abfd237e..75f7236c 100644 --- a/pane/River.js +++ b/pane/River.js @@ -6,9 +6,9 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, meta, return can.page.Modify(can, list, {style: {display: hide? "": "none"}}) } - can.run(event, [river], function(msg) { var which = 0 + can.run({}, [river, "storm"], function(msg) { var which = 0 list = can.page.Append(can, can._output, [{view: "sublist", list: msg.Table(function(value, index) { - river == can.user.Search(can, "river") && value.name == can.user.Search(can, "storm") && (which = index) + river == can.user.Search(can, "river") && value.key == can.user.Search(can, "storm") && (which = index) return {text: [value.name, "div", "subitem"], onclick: function(event) { var msg = can.request(event) msg.Option("river", can.Conf("river", river)) @@ -19,9 +19,15 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, meta, can.page.ClassList.del(can, item, "select") }) can.page.ClassList.add(can, event.target, "select") + }, oncontextmenu: function(event) { + can.user.carte(can, {}, ["添加工具", "删除"], function(ev, item, meta) { + item == "删除" && can.run(event, [can.Conf("river"), value.key, "storm", "action", "remove"], function(msg) { + can.user.Search(can, {"river": can.Conf("river")}) + }) || can.ondetail[item](event, can, value) + }) }} })}]).sublist - list.children[which].click() + which < list.children.length && list.children[which].click() event.target.nextSibling && can._output.insertBefore(list, event.target.nextSibling) can.sublist[river] = list }) @@ -45,9 +51,27 @@ Volcanos("onaction", {help: "控件交互", list: ["创建", "刷新"], _init: f can.user.Search(can, {"river": can.Conf("river")}) }, }) -Volcanos("ondetail", {help: "菜单交互", list: ["添加用户", "重命名", "共享", "删除"], _init: function(can, msg, list, cb, target) { +Volcanos("ondetail", {help: "菜单交互", list: ["添加应用", "添加用户", "重命名", "共享", "删除"], _init: function(can, msg, list, cb, target) { can.onexport._init(can, msg, list, cb, target) }, + "添加工具": function(event, can, value) { + can.run(event, ["search", "Search.onimport.select", "command", "", ""], function(list) { + var args = []; can.core.List(list, function(item) { + args = args.concat([item[0], item[5], item[4], ""]) + }) + can.run(event, [can.Conf("river"), can.Conf("storm"), "storm", "action", "tool"].concat(args), function(msg) { + can.user.Search(can, {"river": can.Conf("river"), "storm": can.Conf("storm")}) + }) + }) + }, + "添加应用": function(event, can, river, button) { + can.user.input(event, can, [["type", "public", "protected", "private"], "name", "text"], function(event, button, meta, list) { + can.run(event, [can.Conf("river"), "storm", "action", "create"].concat(list), function(msg) { + can.user.Search(can, {"river": can.Conf("river"), "storm": msg.Result()}) + }) + return true + }) + }, "添加用户": function(event, can, river, button) { can.run(event, ["search", "Search.onimport.select", "user", "", ""], function(list) { var args = []; can.core.List(list, function(item) { diff --git a/pane/Storm.js b/pane/Storm.js index 2b797768..b9bb47ea 100644 --- a/pane/Storm.js +++ b/pane/Storm.js @@ -20,6 +20,16 @@ Volcanos("onaction", {help: "交互操作", list: ["创建", "刷新"], _init: f }, }) Volcanos("ondetail", {help: "交互菜单", list: ["添加工具", "重命名", "共享", "删除"], + insert: function(can) { + can.run(event, ["search", "Search.onimport.select", "command", "", ""], function(list) { + var args = []; can.core.List(list, function(item) { + args = args.concat([item[0], item[5], item[4], ""]) + }) + can.run(event, [can.Conf("river"), can.Conf("storm"), "action", "tool"].concat(args), function(msg) { + can.user.Search(can, {"river": can.Conf("river"), "storm": can.Conf("storm")}) + }) + }) + }, "添加工具": function(event, can, value) { can.run(event, ["search", "Search.onimport.select", "command", "", ""], function(list) { var args = []; can.core.List(list, function(item) { diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 4660c57c..eaa5dc8c 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -25,6 +25,10 @@ fieldset.editor>div.output>div.project { max-width:120px; color:white; } +fieldset.editor>div.output>div.project div.item0 { +} +fieldset.editor>div.output>div.project div.list0 { +} fieldset.editor>div.output>div.project div.item { cursor:pointer; } diff --git a/plugin/local/code/inner.js b/plugin/local/code/inner.js index 031073ab..0e7df3da 100644 --- a/plugin/local/code/inner.js +++ b/plugin/local/code/inner.js @@ -91,6 +91,14 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, list, cb, }, true) }, project: function(can, path) { can.Option({path: path}), can.ui.project.innerHTML = "" + can.run({}, ["action", "project", path+"/"], function(res) { + can.onappend.tree(can, can.ui.project, res, function(event, value) { + value.path.indexOf(can.Option("path")) == 0 && (value.path = value.path.slice(can.Option("path").length+1)) + value.path.endsWith("/")? can.onimport.project(can, can.base.Path(can.Option("path"), value.path)): + can.onimport.tabview(can, can.Option("path"), value.path) + }) + }, true) + return can.run({}, ["action", "project", path+"/"], function(res) { res.Table(function(value) { value.path = value.path.slice(can.Option("path").length+1) @@ -777,7 +785,7 @@ Volcanos("onaction", {help: "控件交互", list: [ } }], onfocus: function(event) { event.target.setSelectionRange(0, -1) - }, value: value}, + }, value: value||"main"}, {button: ["搜索", function(event) { can.onaction.searchLine(event, can, ui.word.value) }]}, @@ -794,6 +802,7 @@ Volcanos("onaction", {help: "控件交互", list: [ var msg = can.request(event); msg.Option("_path", can.Option("path")) value && can.run(event, ["action", "search", can.parse, value, ""], function(msg) { can.onappend.table(can, can.ui.search, "table", msg, function(value, key, index, line) { + can.Status("npos", index+1) value = value.replace("<", "<").replace(">", ">") value = value.replace("./", "") return {text: [value, "td"], onclick: function(event) { @@ -866,7 +875,7 @@ Volcanos("ondetail", {help: "菜单交互", list: [ can.onaction.appendLine(can) }, }) -Volcanos("onexport", {help: "导出数据", list: ["输入法", "输入值", "文件名", "解析器", "当前行", "ncmd"], +Volcanos("onexport", {help: "导出数据", list: ["输入法", "输入值", "文件名", "解析器", "当前行", "ncmd", "npos"], content: function(can) { return can.page.Select(can, can._output, "div.content>pre.item", function(item) { return can.current == item? can.editor.value: item.innerText