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>
|