mirror of
https://shylinux.com/x/ContextOS
synced 2025-04-25 16:58:06 +08:00
fix ssh
This commit is contained in:
shaoying
parent
7d27b56595
commit
3631a04bc5
@ -1,3 +1,5 @@
|
||||
~aaa
|
||||
role root user shy
|
||||
~mdb
|
||||
note model favor spirit spirit relate relate
|
||||
note model money expend expend amount amount
|
||||
|
||||
@ -906,7 +906,7 @@ func (m *Message) Magic(begin string, chain interface{}, args ...interface{}) in
|
||||
func (m *Message) Current(text string) string {
|
||||
cs := []string{}
|
||||
if pod := kit.Format(m.Magic("session", "current.pod")); pod != "" {
|
||||
cs = append(cs, "context", "ssh", "sh", "node", "'"+pod+"'")
|
||||
cs = append(cs, "context", "ssh", "remote", "'"+pod+"'")
|
||||
}
|
||||
if ctx := kit.Format(m.Magic("session", "current.ctx")); ctx != "" {
|
||||
cs = append(cs, "context", ctx)
|
||||
@ -1540,7 +1540,7 @@ func (m *Message) Cmdm(args ...interface{}) *Message {
|
||||
|
||||
arg := []string{}
|
||||
if pod := kit.Format(m.Magic("session", "current.pod")); pod != "" {
|
||||
arg = append(arg, "context", "ssh", "sh", "node", pod)
|
||||
arg = append(arg, "context", "ssh", "remote", pod)
|
||||
}
|
||||
if ctx := kit.Format(m.Magic("session", "current.ctx")); ctx != "" {
|
||||
arg = append(arg, "context", ctx)
|
||||
@ -1793,7 +1793,9 @@ func (m *Message) Confv(key string, args ...interface{}) interface{} {
|
||||
defer func() { m.target = target }()
|
||||
|
||||
ps := strings.Split(key, ".")
|
||||
m.target, key = m.Sess(ps[0], false).target, ps[1]
|
||||
if msg := m.Sess(ps[0], false); msg != nil {
|
||||
m.target, key = msg.target, ps[1]
|
||||
}
|
||||
}
|
||||
|
||||
var config *Config
|
||||
|
||||
@ -982,7 +982,7 @@ var Index = &ctx.Context{Name: "web", Help: "应用中心",
|
||||
// 添加设备
|
||||
arg = arg[:0]
|
||||
if kit.Right(val["componet_pod"]) {
|
||||
arg = append(arg, "sh", "node", kit.Format(m.Magic("session", "current.pod")))
|
||||
arg = append(arg, "remote", kit.Format(m.Magic("session", "current.pod")))
|
||||
}
|
||||
// 添加命令
|
||||
if kit.Right(val["componet_cmd"]) {
|
||||
|
||||
@ -160,7 +160,7 @@ var Index = &ctx.Context{Name: "code", Help: "代码中心",
|
||||
},
|
||||
map[string]interface{}{"componet_name": "pod", "componet_help": "pod", "componet_tmpl": "componet",
|
||||
"componet_view": "PodList", "componet_init": "initPodList",
|
||||
"componet_ctx": "ssh", "componet_cmd": "remote", "inputs": []interface{}{
|
||||
"componet_ctx": "ssh", "componet_cmd": "node", "inputs": []interface{}{
|
||||
map[string]interface{}{"type": "text", "name": "pod", "value": "@current.pod"},
|
||||
map[string]interface{}{"type": "button", "value": "refresh"},
|
||||
},
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
|
||||
fieldset.Ocean {
|
||||
position:absolute;
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
display:none;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
@ -1,26 +1,36 @@
|
||||
var pane = {}
|
||||
var page = Page({
|
||||
initOcean: function(page, field, option) {
|
||||
page.panes.ocean = field
|
||||
ctx.Run(page, option.dataset, ["ocean"], function(msg) {
|
||||
kit.Log(msg.result)
|
||||
})
|
||||
return [{"text": ["ocean"]}]
|
||||
pane: pane,
|
||||
initOcean: function(page, field, option, output) {
|
||||
return {"button": ["关闭"], "action": function(event) {
|
||||
pane.ocean.showDialog()
|
||||
}}
|
||||
},
|
||||
|
||||
initRiver: function(page, field, option, output) {
|
||||
page.panes.river = field
|
||||
page.panes.channel = output
|
||||
pane.channel = output
|
||||
page.showRiver(page, option)
|
||||
return {"button": ["添加"], "action": function(value) {
|
||||
ctx.Run(page, option.dataset, ["river", "create", prompt("name")], function(msg) {
|
||||
page.showRiver(page, option)
|
||||
})
|
||||
return {"button": ["添加", "查找"], "action": function(value) {
|
||||
switch (value) {
|
||||
case "添加":
|
||||
var name = prompt("name")
|
||||
if (name) {
|
||||
ctx.Run(page, option.dataset, ["river", "create", name], function(msg) {
|
||||
page.showRiver(page, option)
|
||||
})
|
||||
}
|
||||
break
|
||||
case "查找":
|
||||
kit.showDialog(pane.ocean)
|
||||
break
|
||||
}
|
||||
}}
|
||||
},
|
||||
showRiver: function(page, option) {
|
||||
page.panes.channel.innerHTML = ""
|
||||
pane.channel.innerHTML = ""
|
||||
page.getRiver(page, option, function(line, index) {
|
||||
page.conf.river = page.conf.river || page.showTarget(page, option, line.key) || line.key
|
||||
kit.AppendChild(page.panes.channel, [{view: ["item", "div", line.name+"("+line.count+")"], click: function(event) {
|
||||
kit.AppendChild(pane.channel, [{view: ["item", "div", line.name+"("+line.count+")"], click: function(event) {
|
||||
if (page.conf.river == line.key) {
|
||||
return
|
||||
}
|
||||
@ -37,17 +47,16 @@ var page = Page({
|
||||
})
|
||||
},
|
||||
initTarget: function(page, field, option) {
|
||||
page.panes.target = field
|
||||
page.panes.output = field.querySelector("div.target.output")
|
||||
pane.output = field.querySelector("div.target.output")
|
||||
ctx.Run(page, option.dataset, ["river"], function(msg) {
|
||||
kit.Log(msg.result)
|
||||
})
|
||||
return [{"text": ["target"]}]
|
||||
},
|
||||
showTarget: function(page, option, id) {
|
||||
page.panes.output.innerHTML = ""
|
||||
pane.output.innerHTML = ""
|
||||
page.getTarget(page, option, id, function(line, index) {
|
||||
kit.AppendChild(page.panes.output, [{"view": ["item", "div", line.text]}])
|
||||
kit.AppendChild(pane.output, [{"view": ["item", "div", line.text]}])
|
||||
})
|
||||
},
|
||||
getTarget: function(page, option, id, cb) {
|
||||
@ -61,8 +70,8 @@ var page = Page({
|
||||
var ui = kit.AppendChild(option, [{"view": ["input", "textarea"], "name": "input", "data": {"onkeyup": function(event){
|
||||
if (event.key == "Enter" && !event.shiftKey) {
|
||||
var value = event.target.value
|
||||
kit.AppendChild(page.panes.output, [{"text" :[value, "div"]}])
|
||||
page.panes.output.scrollBy(0,100)
|
||||
kit.AppendChild(pane.output, [{"text" :[value, "div"]}])
|
||||
pane.output.scrollBy(0,100)
|
||||
// event.target.value = ""
|
||||
ctx.Run(page, option.dataset, ["river", "wave", page.conf.river, "text", value], function(msg) {
|
||||
kit.Log(msg.result)
|
||||
@ -73,9 +82,8 @@ var page = Page({
|
||||
event.preventDefault()
|
||||
}
|
||||
}}}])
|
||||
page.panes.input = ui.input
|
||||
pane.input = ui.input
|
||||
|
||||
page.panes.source = field
|
||||
ctx.Run(page, option.dataset, ["river"], function(msg) {
|
||||
msg.Table(function(index, line) {
|
||||
console.log(index)
|
||||
@ -86,14 +94,12 @@ var page = Page({
|
||||
return
|
||||
},
|
||||
initStorm: function(page, field, option) {
|
||||
page.panes.storm = field
|
||||
ctx.Run(page, option.dataset, ["river"], function(msg) {
|
||||
kit.Log(msg.result)
|
||||
})
|
||||
return [{"text": ["storm"]}]
|
||||
},
|
||||
initSteam: function(page, field, option) {
|
||||
page.panes.steam = field
|
||||
ctx.Run(page, option.dataset, ["river"], function(msg) {
|
||||
kit.Log(msg.result)
|
||||
})
|
||||
@ -104,46 +110,46 @@ var page = Page({
|
||||
range: function(sizes) {
|
||||
sizes = sizes || {}
|
||||
var width = document.body.offsetWidth
|
||||
var river_width = page.panes.river.offsetWidth
|
||||
var storm_width = page.panes.storm.offsetWidth
|
||||
var source_width = page.panes.source.offsetWidth
|
||||
var source_height = page.panes.source.offsetHeight
|
||||
var river_width = pane.river.offsetWidth
|
||||
var storm_width = pane.storm.offsetWidth
|
||||
var source_width = pane.source.offsetWidth
|
||||
var source_height = pane.source.offsetHeight
|
||||
var height = document.body.offsetHeight-80
|
||||
|
||||
|
||||
page.panes.river.style.height = height+"px"
|
||||
page.panes.storm.style.height = height+"px"
|
||||
page.panes.target.style.height = (height-source_height)+"px"
|
||||
pane.river.style.height = height+"px"
|
||||
pane.storm.style.height = height+"px"
|
||||
pane.target.style.height = (height-source_height)+"px"
|
||||
if (sizes.left != undefined) {
|
||||
if (sizes.left == 0) {
|
||||
page.panes.river.style.display = "none"
|
||||
pane.river.style.display = "none"
|
||||
} else {
|
||||
page.panes.river.style.display = "block"
|
||||
page.panes.river.style.width = sizes.left+"px"
|
||||
pane.river.style.display = "block"
|
||||
pane.river.style.width = sizes.left+"px"
|
||||
}
|
||||
}
|
||||
if (sizes.right != undefined) {
|
||||
if (sizes.right == 0) {
|
||||
page.panes.storm.style.display = "none"
|
||||
pane.storm.style.display = "none"
|
||||
} else {
|
||||
page.panes.storm.style.display = "block"
|
||||
page.panes.storm.style.width = sizes.right+"px"
|
||||
pane.storm.style.display = "block"
|
||||
pane.storm.style.width = sizes.right+"px"
|
||||
}
|
||||
}
|
||||
if (sizes.middle != undefined) {
|
||||
page.panes.source.style.height = sizes.middle+"px"
|
||||
page.panes.target.style.height = (height-sizes.middle-4)+"px"
|
||||
page.panes.output.style.height = (height-sizes.middle-8)+"px"
|
||||
page.panes.input.style.height = (sizes.middle-7)+"px"
|
||||
pane.source.style.height = sizes.middle+"px"
|
||||
pane.target.style.height = (height-sizes.middle-4)+"px"
|
||||
pane.output.style.height = (height-sizes.middle-8)+"px"
|
||||
pane.input.style.height = (sizes.middle-7)+"px"
|
||||
} else {
|
||||
var source_height = page.panes.source.offsetHeight-10
|
||||
page.panes.input.style.height = source_height+"px"
|
||||
page.panes.output.style.height = source_height+"px"
|
||||
var source_height = pane.source.offsetHeight-10
|
||||
pane.input.style.height = source_height+"px"
|
||||
pane.output.style.height = source_height+"px"
|
||||
}
|
||||
|
||||
var source_width = page.panes.source.offsetWidth-10
|
||||
page.panes.input.style.width = source_width+"px"
|
||||
page.panes.output.style.width = source_width+"px"
|
||||
var source_width = pane.source.offsetWidth-10
|
||||
pane.input.style.width = source_width+"px"
|
||||
pane.output.style.width = source_width+"px"
|
||||
},
|
||||
|
||||
init: function(exp) {
|
||||
@ -152,6 +158,7 @@ var page = Page({
|
||||
document.querySelectorAll("body>fieldset").forEach(function(field) {
|
||||
var option = field.querySelector("form.option")
|
||||
var output = field.querySelector("div.output")
|
||||
pane[option.dataset.componet_name] = field
|
||||
|
||||
var init = page[field.dataset.init]
|
||||
if (typeof init == "function") {
|
||||
|
||||
@ -13,7 +13,6 @@ exp = example = {
|
||||
return [{"text": ["shycontext", "div", "title"]}]
|
||||
},
|
||||
initField: function(page, field, option, output) {
|
||||
ctx.Runs(page, option)
|
||||
return
|
||||
},
|
||||
initBanner: function(page, field, option, output) {
|
||||
@ -30,6 +29,7 @@ exp = example = {
|
||||
initFooter: function(page, field, option) {
|
||||
return [{"view": ["title", "div", "<a href='mailto:shylinux@163.com'>shylinux@163.com</>"]}]
|
||||
},
|
||||
|
||||
onscroll: function(event, target, action) {
|
||||
var page = this
|
||||
switch (action) {
|
||||
@ -40,6 +40,7 @@ exp = example = {
|
||||
break
|
||||
}
|
||||
},
|
||||
onresize: function(event) {},
|
||||
reload: function() {
|
||||
location.reload()
|
||||
},
|
||||
@ -51,3 +52,8 @@ function Page(page) {
|
||||
}
|
||||
return page
|
||||
}
|
||||
function Pane(pane) {
|
||||
pane.showDialog = function(width, height) {
|
||||
kit.showDialog(this, width, height)
|
||||
}
|
||||
}
|
||||
|
||||
@ -420,6 +420,64 @@ kit = toolkit = {
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
setView: function(target, args) {
|
||||
var width = document.body.offsetWidth-10
|
||||
var height = document.body.offsetHeight-10
|
||||
for (var k in args) {
|
||||
switch (k) {
|
||||
case "dialog":
|
||||
var w = h = args[k]
|
||||
if (typeof(args[k]) == "object") {
|
||||
w = args[k][0]
|
||||
h = args[k][1]
|
||||
}
|
||||
if (w > width) {
|
||||
w = width
|
||||
}
|
||||
|
||||
args["top"] = (height-h)/2
|
||||
args["left"] = (width-w)/2
|
||||
args["width"] = w
|
||||
args["height"] = h
|
||||
break
|
||||
case "window":
|
||||
var w = h = args[k]
|
||||
if (typeof(args[k]) == "object") {
|
||||
w = args[k][0]
|
||||
h = args[k][1]
|
||||
}
|
||||
|
||||
args["top"] = h/2
|
||||
args["left"] = w/2
|
||||
args["width"] = width-w
|
||||
args["height"] = height-h
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
for (var k in args) {
|
||||
switch (k) {
|
||||
case "top":
|
||||
case "left":
|
||||
case "width":
|
||||
case "height":
|
||||
target.style[k] = args[k]+"px"
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
showDialog: function(pane, width, height) {
|
||||
if (pane.style.display == "none") {
|
||||
pane.style.display = "block"
|
||||
this.setView(pane, {dialog: [width||800, height||400]})
|
||||
} else {
|
||||
pane.style.display = "none"
|
||||
}
|
||||
},
|
||||
showWindow: function(pane, width, height) {
|
||||
this.setView(pane, {window: [width||80, height||40]})
|
||||
},
|
||||
}
|
||||
|
||||
function right(arg) {
|
||||
|
||||
1
usr/wiki/自然/编程/ctx.md
Symbolic link
1
usr/wiki/自然/编程/ctx.md
Symbolic link
@ -0,0 +1 @@
|
||||
终端工具链/context.md
|
||||
@ -1,136 +1 @@
|
||||
<canvas id="heart" width="400" height="400"></canvas>
|
||||
|
||||
## 简介
|
||||
|
||||
- 文档: <https://developer.mozilla.org/en-US/docs/Learn>
|
||||
- 文档: <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/>
|
||||
|
||||
### miniCAD在线绘图
|
||||
<div class="cmd_shape bar"></div>
|
||||
<div class="cmd_stroke bar"></div>
|
||||
<div class="cmd_color bar"></div>
|
||||
<div class="ctrl_show bar"></div>
|
||||
<canvas id="draw" width="400" height="400"
|
||||
onmousemove="draw_move(event)"
|
||||
onmouseup="draw_point(event)"
|
||||
></canvas>
|
||||
<div class="ctrl_status bar"></div>
|
||||
<div class="debug_info"></div>
|
||||
<div class="ctrl_data bar"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>stroke</th>
|
||||
<th>shape</th>
|
||||
<th>x1</th>
|
||||
<th>y1</th>
|
||||
<th>x2</th>
|
||||
<th>y2</th>
|
||||
<th>text</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="draw_history"></tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### canvas绘图
|
||||
<canvas id="demo0" class="demo" width="120" height="120"></canvas>
|
||||
```
|
||||
<canvas id="canvas"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fillRect(10,10,100,100);
|
||||
</script>
|
||||
```
|
||||
|
||||
### 画矩形
|
||||
|
||||
```
|
||||
fillRect(x, y, width, height)
|
||||
strokeRect(x, y, width, height)
|
||||
clearRect(x, y, width, height)
|
||||
```
|
||||
|
||||
### 画路径
|
||||
<canvas id="demo2" class="demo" width="120" height="120"></canvas>
|
||||
```
|
||||
<canvas id="demo2" width="120" height="120"></canvas>
|
||||
<script>
|
||||
var ctx2 = document.getElementById("demo2").getContext("2d");
|
||||
ctx2.beginPath();
|
||||
ctx2.moveTo(60,10);
|
||||
ctx2.lineTo(10,110);
|
||||
ctx2.lineTo(110,110);
|
||||
ctx2.fill();
|
||||
</script>
|
||||
```
|
||||
|
||||
```
|
||||
beginPath()
|
||||
moveTo(x, y)
|
||||
LineTo(x, y)
|
||||
closePath()
|
||||
stroke()
|
||||
fill()
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise)
|
||||
arcTo(x1, y1, x2, y2, radius)
|
||||
quadraticCurveTo(cp1x, cp1y, x, y)
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
|
||||
new Path2D()
|
||||
```
|
||||
### 设置样式
|
||||
<canvas id="demo3" class="demo" width="120" height="120"></canvas>
|
||||
```
|
||||
fillStyle = "red"
|
||||
fillStyle = "#FF0000"
|
||||
fillStyle = "rgb(255,0,0)"
|
||||
fillStyle = "rgb(255,0,0,1)"
|
||||
strokeStyle =
|
||||
|
||||
var img = new Image();
|
||||
img.src = "img.png";
|
||||
img.onLoad = function() {}
|
||||
createPattern(img, style)
|
||||
|
||||
createLinearGradient(x1, y1, x2, y2)
|
||||
createRadialGradient(x1, y1, r1, x2, y2, r2)
|
||||
addColorStop(position, color)
|
||||
|
||||
shadowOffsetX
|
||||
shadowOffsetY
|
||||
shadowBlur
|
||||
shadowColor
|
||||
|
||||
lineWidth
|
||||
lineCap
|
||||
lineJoin
|
||||
```
|
||||
### 输出文字
|
||||
```
|
||||
font
|
||||
textAlign
|
||||
textBaseline
|
||||
direction
|
||||
measureText()
|
||||
fillText(text, x, y[, maxWidth])
|
||||
strokeText(text, x, y[, maxWidth])
|
||||
```
|
||||
|
||||
### 坐标变换
|
||||
```
|
||||
save()
|
||||
restore()
|
||||
translate(x,y)
|
||||
rotate(angle)
|
||||
scale(x, y)
|
||||
transform(a,b,c,d,e,f)
|
||||
setTransform(a,b,c,d,e,f)
|
||||
resetTransform()
|
||||
```
|
||||
|
||||
<link rel="stylesheet" href="/wiki/html5.css" type="text/css"></link>
|
||||
<script src="/wiki/html5.js"></script>
|
||||
## html5
|
||||
|
||||
@ -0,0 +1 @@
|
||||
## javascript
|
||||
136
usr/wiki/自然/编程/前端小程序/miniCAD/html5.md
Normal file
136
usr/wiki/自然/编程/前端小程序/miniCAD/html5.md
Normal file
@ -0,0 +1,136 @@
|
||||
<canvas id="heart" width="400" height="400"></canvas>
|
||||
|
||||
## 简介
|
||||
|
||||
- 文档: <https://developer.mozilla.org/en-US/docs/Learn>
|
||||
- 文档: <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/>
|
||||
|
||||
### miniCAD在线绘图
|
||||
<div class="cmd_shape bar"></div>
|
||||
<div class="cmd_stroke bar"></div>
|
||||
<div class="cmd_color bar"></div>
|
||||
<div class="ctrl_show bar"></div>
|
||||
<canvas id="draw" width="400" height="400"
|
||||
onmousemove="draw_move(event)"
|
||||
onmouseup="draw_point(event)"
|
||||
></canvas>
|
||||
<div class="ctrl_status bar"></div>
|
||||
<div class="debug_info"></div>
|
||||
<div class="ctrl_data bar"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>stroke</th>
|
||||
<th>shape</th>
|
||||
<th>x1</th>
|
||||
<th>y1</th>
|
||||
<th>x2</th>
|
||||
<th>y2</th>
|
||||
<th>text</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="draw_history"></tbody>
|
||||
</table>
|
||||
|
||||
|
||||
### canvas绘图
|
||||
<canvas id="demo0" class="demo" width="120" height="120"></canvas>
|
||||
```
|
||||
<canvas id="canvas"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fillRect(10,10,100,100);
|
||||
</script>
|
||||
```
|
||||
|
||||
### 画矩形
|
||||
|
||||
```
|
||||
fillRect(x, y, width, height)
|
||||
strokeRect(x, y, width, height)
|
||||
clearRect(x, y, width, height)
|
||||
```
|
||||
|
||||
### 画路径
|
||||
<canvas id="demo2" class="demo" width="120" height="120"></canvas>
|
||||
```
|
||||
<canvas id="demo2" width="120" height="120"></canvas>
|
||||
<script>
|
||||
var ctx2 = document.getElementById("demo2").getContext("2d");
|
||||
ctx2.beginPath();
|
||||
ctx2.moveTo(60,10);
|
||||
ctx2.lineTo(10,110);
|
||||
ctx2.lineTo(110,110);
|
||||
ctx2.fill();
|
||||
</script>
|
||||
```
|
||||
|
||||
```
|
||||
beginPath()
|
||||
moveTo(x, y)
|
||||
LineTo(x, y)
|
||||
closePath()
|
||||
stroke()
|
||||
fill()
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise)
|
||||
arcTo(x1, y1, x2, y2, radius)
|
||||
quadraticCurveTo(cp1x, cp1y, x, y)
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
|
||||
new Path2D()
|
||||
```
|
||||
### 设置样式
|
||||
<canvas id="demo3" class="demo" width="120" height="120"></canvas>
|
||||
```
|
||||
fillStyle = "red"
|
||||
fillStyle = "#FF0000"
|
||||
fillStyle = "rgb(255,0,0)"
|
||||
fillStyle = "rgb(255,0,0,1)"
|
||||
strokeStyle =
|
||||
|
||||
var img = new Image();
|
||||
img.src = "img.png";
|
||||
img.onLoad = function() {}
|
||||
createPattern(img, style)
|
||||
|
||||
createLinearGradient(x1, y1, x2, y2)
|
||||
createRadialGradient(x1, y1, r1, x2, y2, r2)
|
||||
addColorStop(position, color)
|
||||
|
||||
shadowOffsetX
|
||||
shadowOffsetY
|
||||
shadowBlur
|
||||
shadowColor
|
||||
|
||||
lineWidth
|
||||
lineCap
|
||||
lineJoin
|
||||
```
|
||||
### 输出文字
|
||||
```
|
||||
font
|
||||
textAlign
|
||||
textBaseline
|
||||
direction
|
||||
measureText()
|
||||
fillText(text, x, y[, maxWidth])
|
||||
strokeText(text, x, y[, maxWidth])
|
||||
```
|
||||
|
||||
### 坐标变换
|
||||
```
|
||||
save()
|
||||
restore()
|
||||
translate(x,y)
|
||||
rotate(angle)
|
||||
scale(x, y)
|
||||
transform(a,b,c,d,e,f)
|
||||
setTransform(a,b,c,d,e,f)
|
||||
resetTransform()
|
||||
```
|
||||
|
||||
<link rel="stylesheet" href="/wiki/html5.css" type="text/css"></link>
|
||||
<script src="/wiki/html5.js"></script>
|
||||
@ -327,10 +327,76 @@ chat模块提供了信息管理。
|
||||
- iOS
|
||||
- Android
|
||||
|
||||
### 应用接口
|
||||
|
||||
context的应用模块都是web的子模块，在web模块启动HTTP服务后，会根据模块名与命令名自动生成路由。
|
||||
web模块会将所有的HTTP请求转换成context的命令调用，所以HTTP的应用接口和普通命令，除了名字必须以"/"开头，其它没有太大区别。
|
||||
|
||||
当web接收到HTTP请求后，可以调用单个命令如 http://shylinux.com/code/consul 就会调用code模块下的/consul命令
|
||||
|
||||
可以调用多个命令如 http://shylinux.com/code/?componet_group=login 就会调用web模块下的/render命令，
|
||||
根据code的componet下的login组件，依次调用每个接口的命令，然后将执行结果与参数一起，调用golang的template，渲染生成HTML。
|
||||
|
||||
所有命令都解析完成后就可以生成一个完整的网页。当然如果Accept是application/json，则会跳过模块渲染，直接返回多条命令的执行结果。
|
||||
所以componet就是接口的集合，统一提供参数配置、权限检查、命令执行、模板渲染，降低内部命令与外部应用的耦合性，但又将前后端完全融合在一起。
|
||||
|
||||
|
||||
如下，是web.code模块的应用接口定义。配置componet下定义了多个组件，每个组件下定义了多个接口。
|
||||
|
||||
login就是登录页面，下面定义了三个接口code、login、tail，
|
||||
其中code，使用模板head生成网页头，会包括一些配置，如favicon可以指定图标文件，styles指定引用模式表。
|
||||
其中tail，使用模板tail生成网页尾，会包括一些配置，如scripts指定引用脚本文件。
|
||||
|
||||
login就是网页组件了，生成一个网页登录的输入表单，并接收表单请求调用aaa模块的auth命令，进行用户身份的验证。
|
||||
其中arguments指定了Form表单字段的列表。
|
||||
```
|
||||
...
|
||||
var Index = &ctx.Context{Name: "code", Help: "代码中心",
|
||||
Caches: map[string]*ctx.Cache{},
|
||||
Configs: map[string]*ctx.Config{
|
||||
"skip_login": &ctx.Config{Name: "skip_login", Value: map[string]interface{}{"/consul": "true"}, Help: "免密登录"},
|
||||
"componet": &ctx.Config{Name: "componet", Value: map[string]interface{}{
|
||||
"login": []interface{}{
|
||||
map[string]interface{}{"componet_name": "code", "componet_tmpl": "head", "metas": []interface{}{
|
||||
map[string]interface{}{"name": "viewport", "content": "width=device-width, initial-scale=0.7, user-scalable=no"},
|
||||
}, "favicon": "favicon.ico", "styles": []interface{}{"example.css", "code.css"}},
|
||||
|
||||
map[string]interface{}{"componet_name": "login", "componet_help": "login", "componet_tmpl": "componet",
|
||||
"componet_ctx": "aaa", "componet_cmd": "auth", "componet_args": []interface{}{"@sessid", "ship", "username", "@username", "password", "@password"}, "inputs": []interface{}{
|
||||
map[string]interface{}{"type": "text", "name": "username", "value": "", "label": "username"},
|
||||
map[string]interface{}{"type": "password", "name": "password", "value": "", "label": "password"},
|
||||
map[string]interface{}{"type": "button", "value": "login"},
|
||||
},
|
||||
"display_append": "", "display_result": "",
|
||||
},
|
||||
|
||||
map[string]interface{}{"componet_name": "tail", "componet_tmpl": "tail",
|
||||
"scripts": []interface{}{"toolkit.js", "context.js", "example.js", "code.js"},
|
||||
},
|
||||
},
|
||||
...
|
||||
```
|
||||
### 网页开发
|
||||
|
||||
#### 模板
|
||||
|
||||
usr/template 存放了网页的模板文件，context会调用golang的template接口进行后端渲染，生成html文件。
|
||||
|
||||
componet下每一个接口都会指定一个模板，web模块下的/render命令会依次渲染，从而生成一个完整的网页。
|
||||
|
||||
|
||||
- usr/template/common.tmpl 公共模板
|
||||
- usr/template/code/ code模块的模板
|
||||
- usr/template/wiki/ wiki
|
||||
- usr/template/chat/
|
||||
|
||||
usr/librarys 存放了css与js
|
||||
|
||||
### 小程序
|
||||
### 开发板
|
||||
|
||||
## 接口开发
|
||||
### componet
|
||||
### python
|
||||
### java
|
||||
### c
|
||||
|
||||
1
usr/wiki/自然/编程/终端工具链/前端小程序
Symbolic link
1
usr/wiki/自然/编程/终端工具链/前端小程序
Symbolic link
@ -0,0 +1 @@
|
||||
usr/wiki/自然/编程/前端小程序
|
||||
Loading…
x
Reference in New Issue
Block a user