135 lines
3.7 KiB
HTML
135 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
|
||
<meta name="google" content="notranslate"/>
|
||
<title>{{.title}}</title>
|
||
<style>
|
||
|
||
body {
|
||
background: #111;
|
||
font-size: 12px;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.keyHint {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 4px;
|
||
color: #999;
|
||
}
|
||
|
||
.keyHint b {
|
||
color: #aaa;
|
||
}
|
||
|
||
.group {
|
||
background: #222;
|
||
border-radius: 10px;
|
||
margin: 40px 10px 10px 10px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.group > .title {
|
||
color: #999;
|
||
position: absolute;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 10px;
|
||
top: -30px;
|
||
}
|
||
|
||
.table {
|
||
background: #000;
|
||
color: #ccc;
|
||
margin: 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.table > .title {
|
||
text-align: center;
|
||
border-bottom: 1px solid #999;
|
||
}
|
||
|
||
.table > .fields {
|
||
border-top: 1px solid #999;
|
||
}
|
||
|
||
.table > div {
|
||
padding: 3px 5px;
|
||
}
|
||
|
||
em {
|
||
font-style: normal;
|
||
color: #999;
|
||
}
|
||
</style>
|
||
<script>
|
||
let modeIndex = parseInt(localStorage.erMode || '1')
|
||
let modeNames = ['简约', '物理视图', '逻辑视图']
|
||
function switchMode(index){
|
||
modeIndex = index
|
||
localStorage.erMode = modeIndex
|
||
for (let node of document.querySelectorAll('[text' + modeIndex + ']')) {
|
||
node.innerHTML = node.getAttribute('text' + modeIndex)
|
||
}
|
||
document.querySelector('.keyHint').innerHTML = '当前模式：<b>'+modeNames[modeIndex-1]+'</b>（按下Tab键切换）'
|
||
}
|
||
window.addEventListener('load', function (){
|
||
switchMode(modeIndex)
|
||
})
|
||
window.addEventListener('keydown', function switchText(event) {
|
||
if (event.code === 'Tab') {
|
||
event.preventDefault()
|
||
modeIndex++
|
||
if (modeIndex > 3) modeIndex = 1
|
||
switchMode(modeIndex)
|
||
return false
|
||
}
|
||
})
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="keyHint"></div>
|
||
|
||
{{range .groups}}
|
||
<div class="group">
|
||
<div class="title" text1="{{.Group}}" text2="{{.Group}}" text3="{{.Comment}}">{{.Group}}</div>
|
||
{{range .Tables}}
|
||
<div class="table">
|
||
<div class="title" text1="{{.Name}}" text2="{{.Name}}" text3="{{.Comment}}">{{.Name}}</div>
|
||
<div class="keys">
|
||
{{range .Fields}}
|
||
{{if eq .Index "pk"}}
|
||
<div comment="{{.Comment}}">{{.Name}} <em
|
||
text1=""
|
||
text2="{{.Type}} {{.Index}}{{.IndexGroup}} {{short .Null}} {{short .Extra}}"
|
||
text3="{{.Comment}}"></em></div>
|
||
{{end}}
|
||
{{end}}
|
||
</div>
|
||
<div class="fields">
|
||
{{range .Fields}}
|
||
{{if ne .Index "pk"}}
|
||
<div comment="{{.Comment}}">{{.Name}} <em
|
||
text1=""
|
||
text2="{{.Type}} {{.Index}}{{.IndexGroup}} {{short .Null}} {{short .Extra}}"
|
||
text3="{{.Comment}}"></em></div>
|
||
{{end}}
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
</body>
|
||
</html>
|