diff --git a/_server/css/FiraCode.ttf b/_server/css/FiraCode.ttf
new file mode 100644
index 0000000..bd73685
Binary files /dev/null and b/_server/css/FiraCode.ttf differ
diff --git a/_server/css/editor.css b/_server/css/editor.css
new file mode 100644
index 0000000..a4b0192
--- /dev/null
+++ b/_server/css/editor.css
@@ -0,0 +1,710 @@
+/** editor **/
+
+:root {
+    --pixel: 416px;
+}
+
+html, body, div, img {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;;
+}
+
+/* ::-webkit-scrollbar {
+    width: 5px;
+} */
+.main {
+    max-width: 100%;
+    min-height: 500px;
+    margin: 0 auto;
+}
+
+.cp-app {
+	z-index: 250;
+}
+
+#colorPanel {
+    position: fixed;
+    width: max-content;
+    height: 205px;
+    z-index: 240;
+    padding: 4px 6px;
+    margin-top: 6px;
+    box-sizing: border-box;
+}
+
+#colorPicker {
+    margin: 2px 0; 
+    border-radius: 3px;
+    width: 104px;
+}
+
+#left, #mid, #mid2, #right {
+    border-radius: 2px;
+    box-sizing: border-box;
+}
+
+#left {
+    position: absolute;
+    left: 5px;
+    top: 10px;
+    width: 435px;
+    height: 630px;
+}
+
+#mapEditArea {
+    position: absolute;
+    width: 100%;
+    height: 400px;
+    left: 0;
+    top: 0;
+    /* padding: 10px 5px; */
+    box-sizing: border-box;
+}
+
+#pout {
+    display: block;
+    width: 410px;
+    height: 380px;
+    box-sizing: border-box;
+    margin-left: 22px;
+    margin-top: 23px;
+    line-height: 20px;
+    font-size: 12.3px;
+    font-family: 'Lucida Console', Monaco, monospace;
+    white-space: pre;
+    border-radius: 2px;
+    overflow: auto;
+}
+
+#editTip {
+    position: absolute;
+    width: 100%;
+    left: 10px;
+    top: 430px;
+}
+
+#editBtns {
+    position: absolute;
+    width: 100%;
+    left: 10px;
+    top: 465px;
+}
+
+#newMaps {
+    position: absolute;
+    left: 10px;
+    top: 505px;
+}
+
+#newFloors {
+    position: absolute;
+    width: 100%;
+    left: 10px;
+    top: 530px;
+}
+
+#mapEditArea p {
+    margin: 10px;
+    display: block;
+    width: 70%;
+    line-height: 20px;
+    text-align: left;
+    font-size: 14px;
+}
+
+#editTip .btn {
+    float: right;
+    margin-right: 20px;
+    margin-top: 5px;
+}
+
+#mid {
+    position: absolute;
+    left: 448px;
+    top: 10px;
+    width: calc(24px + var(--pixel));
+    height: calc(422px + var(--pixel) / 2);
+}
+
+#mid2 {
+    position: absolute;
+    left: 448px;
+    top: calc(442px + var(--pixel) / 2);
+    width: calc(24px + var(--pixel));
+    bottom: 10px;
+}
+
+#mapEdit {
+    overflow: hidden;
+}
+
+.map {
+    position: absolute;
+    left: 20px;
+    top: 21px;
+    width: var(--pixel);
+    height: var(--pixel);
+}
+
+#lastUsedDiv {
+    height: auto;
+    bottom: 0;
+    margin-top: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+#mid .tools {
+    position: absolute;
+    width: calc(var(--pixel) + 9px);
+    height: calc(388px - var(--pixel) / 2);
+    left: 0;
+    bottom: 0;
+    padding: 10px 5px;
+    margin-left: 8px;;
+    box-sizing: border-box;
+}
+
+#tip {
+    float: right;
+    width: 48%;
+    height: 95%;
+    padding: 5px 10px 10px 10px;
+    margin-right: 0;
+    box-sizing: border-box;
+    border-radius: 2px;
+    font-size: 15px;
+    line-height: 18px;
+}
+
+#tip p {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.files {
+    width: 50%;
+    height: 120px;
+    /* padding: 10px; */
+    margin-top: 15px;
+}
+
+#bgSelect {
+    width: 50%;
+    height: 100px;
+    margin-top: 10px;
+}
+
+#bgSelect span {
+    /* display: block; */
+    font-size: 14px;
+    line-height: 30px;
+}
+
+#printOut {
+    margin-top: 10px;
+    height: 20px;
+}
+
+#right {
+    position: absolute;
+    left: calc(484px + var(--pixel));
+    top: 10px;
+    right: 0;
+    bottom: 0;
+    /* border: 1px solid rgb(238, 13, 13); */
+}
+
+#iconLib {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 5px;
+    top: 5px;
+    overflow: auto;
+}
+
+#iconImages {
+    z-index: 0;
+    overflow: hidden;
+}
+
+#iconImages img {
+    position: absolute;
+}
+
+.gameCanvas {
+    position: absolute;
+}
+
+#dataSelection, .appendSelection {
+    position: absolute;
+    /* top:0;
+    left:320px; */
+    z-index: 75;
+    width: 26px;
+    height: 26px;
+    margin: 3px 0 0 3px;
+    padding: 0;
+    /* display: none; */
+    box-sizing: border-box;
+}
+
+#iconExpandBtn {
+    position: absolute;
+    left: 20px;
+    bottom: 30px;
+    font-size: 15px;
+    padding: 6px;
+    display: none;
+}
+
+.warnText {
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1.2em;
+}
+
+.successText {
+    line-height: 1.2em;
+}
+
+#mapColMark, #mapRowMark {
+    cursor: crosshair;
+}
+
+table.col {
+    position: relative;
+    text-align: center;
+    border-collapse: collapse;
+}
+
+#arrColMark td {
+    width: 16px;
+}
+
+#arrColMark {
+    top: 2px;
+    left: 36px;
+    width: 385px;
+    height: 16px;
+    font-size: 13px;
+}
+
+#mapColMark {
+    top: 2px;
+    left: 19px;
+    width: var(--pixel);
+    height: 16px;
+    font-size: 13px;
+}
+
+#mapColMark td {
+    width: 29px;
+}
+
+#mapColMark td:hover .colBlock {
+    position: absolute;
+    top: 19px;
+    height: var(--pixel);
+    width: 32px;
+    z-index: 100;
+}
+
+table.row {
+    position: relative;
+    text-align: right;
+    vertical-align: middle;
+    border-collapse: collapse;
+}
+
+#arrRowMark {
+    top: 5px;
+    left: 2px;
+    width: 16px;
+    height: 262px;
+    font-size: 12px;
+}
+
+#mapRowMark {
+    top: 1px;
+    left: 2px;
+    width: 16px;
+    height: var(--pixel);
+    font-size: 12px;
+}
+
+#mapRowMark td {
+    height: 29px;
+}
+
+#mapRowMark td:hover .rowBlock {
+    position: absolute;
+    left: 18px;
+    height: 32px;
+    width: var(--pixel);
+    z-index: 100;
+}
+
+#menuDiv * { margin: 0; padding: 0; }
+#midMenu{
+    border-style: solid;
+    border-width: 1px;
+    cursor: default;
+    font: normal 13px Arial, sans-serif;
+    margin: 0;
+    outline: none;
+    padding: 4px 0;
+    position: absolute;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 100%;
+    z-index: 101;
+
+    border-radius: 4px;
+}
+#midMenu .menuitem{
+    font: normal 13px Arial, sans-serif;
+    list-style: none;
+    margin: 0;
+    padding: 4px 7em 4px 28px;
+    white-space: nowrap;
+
+    /* padding-left: 12px; */
+
+    /* padding-right: 20px; */
+}
+#midMenu .menuitem:hover{
+    border-style: dotted;
+    border-width: 1px 0;
+    padding-bottom: 3px;
+    padding-top: 3px;
+}
+#midMenu .menuitem-content{
+    font: normal 13px Arial, sans-serif;
+}
+
+#searchBlock {
+    width: 100px;
+    border-radius: 10px;
+    outline: none;
+    padding-left: 20px;
+    height: 14px;
+}
+
+.searchLogo {
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    background-image:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGJhc2VQcm9maWxlPSJmdWxsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpldj0iaHR0cDovL3d3dy53My5vcmcvMjAwMS94bWwtZXZlbnRzIj4KPGc%2BCgk8cG9seWdvbiBmaWxsPSIjNjY2IiBwb2ludHM9IjkuMjA3LDYuMTI2IDcuNzkzLDcuNTQxIDExLjc5MywxMS41NDEgMTMuMjA3LDEwLjEyNiIgLz4KCTxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik01LjkxNywyYzEuNjA4LDAsMi45MTcsMS4zMDgsMi45MTcsMi45MTdTNy41MjUsNy44MzMsNS45MTcsNy44MzNTMyw2LjUyNSwzLDQuOTE3UzQuMzA4LDIsNS45MTcsMgoJCSBNNS45MTcsMEMzLjIwMSwwLDEsMi4yMDEsMSw0LjkxN3MyLjIwMSw0LjkxNyw0LjkxNyw0LjkxN3M0LjkxNy0yLjIwMSw0LjkxNy00LjkxN0MxMC44MzMsMi4yMDEsOC42MzIsMCw1LjkxNywwTDUuOTE3LDB6IiAvPgo8L2c%2BCjwvc3ZnPgo%3D');
+}
+
+#uieventDiv {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2000
+}
+
+#uieventDialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -55%);
+    width: 560px;
+}
+
+#uieventHead {
+    margin: 10px 20px;
+}
+
+#uieventTitle {
+    font-weight: bold;
+}
+
+#uieventNo {
+    float: right;
+}
+
+#uieventYes {
+    display: none;
+    float: right;
+    margin-right: 15px;
+}
+
+#uieventBody {
+    width: 540px;
+    height: 540px;
+    position: relative;
+    margin-left: 10px;
+    margin-bottom: 5px;
+    overflow: hidden;
+}
+
+#uievent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+#selectPoint {
+    display: none;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+#selectPointFloor {
+    margin-right: 10px;
+}
+
+#selectPointButtons {
+    display: inline;
+}
+
+#selectPointBox {
+    position: absolute;
+    z-index: 75;
+    width: 26px;
+    height: 26px;
+    margin: 3px 0 0 3px;
+    padding: 0;
+    /* display: none; */
+    box-sizing: border-box;
+}
+
+/** editor_mode **/
+
+.leftTab {
+    border-radius: 2px;
+    box-sizing: border-box;
+    overflow: auto;
+    position: absolute;
+    bottom: 0;
+}
+
+.leftTab > * {
+    margin: 2.5px 5px;
+}
+
+.leftTab > :first-child {
+    margin-top: 5px;
+}
+
+.leftTab > :last-child {
+    margin-bottom: 5px;
+}
+
+.leftTab {
+    left: 5px;
+    top: 10px;
+    width: 435px;
+}
+
+.leftTab .leftTabHeader {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    z-index: 20;
+}
+
+.leftTab .leftTabContent {
+    padding-top: 50px;
+}
+
+#appendPicSelection span {
+    position: absolute;
+    font-size: 11px;
+    }
+
+#left6 {
+    left: 5px;
+    top: 5px;
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#left6 #blocklyArea {
+    float: left;
+    width: 60%;
+    height: 95%;
+}
+
+#left6 #blocklyDiv {
+    position: relative;
+}
+
+#left6 .CodeMirror {
+    float: left;
+    height: 95%;
+    width: 35%;
+}
+
+#left6 #codeArea {
+    width: 99.5%;
+    height: 15.4em;
+    overflow: y; /* resize:none; */
+}
+
+#left7 {
+    /* height: 440px; width: 375px;float:left; */
+    left: 5px;
+    top: 5px;
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+#left7 .CodeMirror {
+    /* border-top: 1px solid black;
+    border-bottom: 1px solid black; */
+    font-size: 14px;
+    height: 95%;
+    width: 95%;
+}
+
+.etable table, .etable table td {
+    cursor: auto;
+}
+
+/* copy from github-css https://github.com/sindresorhus/github-markdown-css  */
+.etable table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.etable table {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.etable table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: break-all;
+}
+
+.etable table th {
+    font-weight: 600;
+}
+
+.etable table th,
+.etable table td {
+    padding: 5px;
+}
+
+/* copy end ---------------------------------------------  */
+
+.etable tr {
+    width: 100%
+}
+
+.etable tr > :nth-child(1) {
+    width: 24%
+}
+
+.etable tr > :nth-child(2) {
+    width: 19%
+}
+
+.etable tr > :nth-child(3) {
+    width: 32%;
+}
+
+.etable tr > :nth-child(4) {
+    width: 25%;
+    padding: 0;
+}
+
+.etable table {
+    overflow: visible;
+}
+
+.etable tr:not(:first-child) > :nth-child(3) {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    position: relative;
+}
+
+.etable tr > :nth-child(4) {
+    text-align: center;
+}
+
+div.etableInputDiv {
+    position: absolute;
+    padding: 5px 0 0 5px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+div.checkboxSet {
+    position: relative !important;
+    max-height: 250px;
+    overflow: auto;
+}
+
+.etableInputDiv > * {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    border: none;
+    background: transparent;
+}
+
+.etableInputDiv .checkbox {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -8px;
+    margin-top: -8px;
+}
+
+.etableInputDiv .checkboxSetMember {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+
+.etableInputDiv textarea {
+    resize: none;
+}
+
+.etableInputDiv textarea:hover {
+    margin: -5px;
+}
+
+@font-face {
+    font-family: code;
+    src: url(./FiraCode.ttf);
+}
+
+.main .CodeMirror {
+    font-family: code, 微软雅黑, 黑体, 新宋体, Verdana;
+}
diff --git a/_server/css/editor_color.css b/_server/css/editor_color.css
new file mode 100644
index 0000000..095e922
--- /dev/null
+++ b/_server/css/editor_color.css
@@ -0,0 +1,587 @@
+/** 配色文件：此文件包含了整个编辑器的全部配色 **/
+
+/** ======== 编辑器主界面相关 ======== **/
+
+/** 全局属性 **/
+body {
+    background-color: #F5F5F5;
+}
+
+/** 可自行仿照添加更多的全局属性...... */
+
+/** 颜色选择器 */ 
+#colorPanel {
+    background-color: #F5F5F5;
+}
+
+/** 所有的阴影效果（颜色选择器、数据区、地图区、素材区等） */
+#colorPanel, #left, #mid, #mid2, #right, .leftTab {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+/** 地图编辑的输入框 */
+#pout {
+    border: 1px solid #ddd;
+}
+
+/** 中间的消息提示框 */
+#tip {
+    border: 1px solid #ccc;
+}
+
+/** 素材区背景 */
+#iconLib, #mapEdit {
+    background-color: #F5F5F5;
+}
+
+/** 选中素材区时的方框 */
+#dataSelection, .appendSelection, #selectPointBox {
+    background-color: rgba(255, 255, 255, 0.0);
+    border: 1px solid #000;
+    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000;
+}
+
+/** 错误消息（如保存失败） */
+.warnText {
+    color: #D00;
+}
+
+/** 提示消息（如告知当前图块信息） */
+.infoText {
+    color: #39F;
+}
+
+/** 成功消息（如保存成功） */
+.successText {
+    color: #098;
+}
+
+/** 数据库的表格相关 */
+table, td {
+    border: 1px solid #fff;
+    color: #fff;
+}
+
+.coltd, .rowtd {
+    border: 0.230vw solid #fff;
+    color: #fff;
+}
+
+/** 横向标尺背景色 */
+table.col td, div.col .coltd {
+    background-color: #398;
+}
+
+/** 横向标尺选中时的背景色 */
+#mapColMark td:hover .colBlock, #mapColMark .coltd:hover .colBlock {
+    background-color: rgba(85, 204, 187, 0.5);
+}
+
+/** 纵向标尺背景色 */
+table.row td, div.row .rowtd .rowtext {
+    background-color: #379;
+}
+
+/** 纵向标尺选中时的背景色 */
+#mapRowMark td:hover .rowBlock, #mapRowMark .rowtd:hover .rowBlock {
+    background-color: rgba(102, 170, 204, 0.5);
+}
+
+/** 右键菜单栏 */
+#midMenu{
+    color: #000;
+    background-color: #fff;
+    border-color: #ccc #666 #666 #ccc;
+}
+
+#mid .tools {
+    border-top: 1px solid #ccc;
+}
+
+/** 右键菜单栏的当前选中项 */
+#midMenu .menuitem:hover{
+    background-color: #cef;
+    border-color: #bde;
+}
+
+/** 禁用的输入方框（如ID）的背景色 */
+textarea[disabled] {
+    color: #999999;
+}
+
+/** 搜索事件块的输入框 */
+#searchBlock {
+    background-color: #eeeef4;
+}
+
+/** 打开浮层（变量搜索等）时页面背景 */
+#uieventDiv {
+    background: rgba(128,128,128,0.6);
+}
+
+/** 浮层的对话框 */
+#uieventDialog {
+    background: white;
+}
+
+/** 追加素材时的编号标记 */
+#appendPicSelection span {
+    -webkit-text-stroke: 1px red;
+    text-shadow: black 1px 0, black 0 1px, black -1px 0, black 0 -1px;
+}
+
+.leftTab {
+    background-color: #F5F5F5;
+}
+
+/** 整个事件编辑器 */
+#left6 {
+    background-color: rgb(245, 245, 245);
+}
+
+/** 事件编辑器右边的文本框 */
+#left6 .CodeMirror {
+    border: 1px solid #eee;
+}
+
+/** 脚本编辑器 */
+#left7 {
+    background-color: rgb(245, 245, 245);
+}
+
+#left7 .CodeMirror {
+    border: 1px solid #eee;
+}
+
+/** 数据区的表格 */
+.etable table, .etable table td {
+    color: #000;
+}
+
+/** 数据区每行效果；2n代表偶数行，以此类推 */
+.etable table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccccd4;
+}
+.etable table tr:nth-child(2n) {
+    background-color: #fafafa;
+}
+
+/** 数据区表格每列效果 */
+.etable table th, .etable table td {
+    border: 1px solid #ddd;
+}
+
+/** 鼠标悬停在数据区表格上的边框效果 */
+.etable tr:not(:first-child) > :nth-child(3):hover {
+    border: 1px solid rgb(87, 198, 232);
+    box-shadow: 0px 0px 3px rgb(87, 198, 232);
+}
+.etable tr:not(:first-child) > :nth-child(2):hover,
+.etable tr:not(:first-child) > :nth-child(1):hover {
+    border: 1px solid rgb(87, 232, 198);
+    box-shadow: 0px 0px 3px rgb(87, 232, 198);
+}
+
+/** 表格编辑的按钮颜色 */
+.editorTableEditBtn {
+    background-color: #ddf8ff;
+    border-color: #bbc9cc;
+    color: #445560;
+}
+.editorTableFoldBtn {
+    background-color: #fff4bb;
+    border-color: #d4ccbb;
+    color: #605544;
+}
+/** 保存地图的按钮颜色 */
+#saveFloor.highlight {
+    background-color: #ffd700;
+    border-color: #aa9944;
+    color: #430;
+}
+
+/** 解析按钮颜色 */
+#blocklyParse.highlight {
+    background-color: #ffd700;
+    border-color: #aa9944;
+    color: #430;
+}
+
+/** 大地图按钮颜色 */
+#bigmapBtn.highlight {
+    background-color: #ffd700;
+    border-color: #aa9944;
+    color: #430;
+}
+
+.popCheckboxItem {
+    color: black;
+}
+
+table.col td.highlight {
+    background-color: #77ddcc;
+}
+
+table.row td.highlight {
+    background-color: #88bbdd;
+}
+
+/** ======== blockly 相关 ======== */
+
+/*魔改*/
+
+.blocklyTreeLabel {
+    color: #0f0f0f !important;
+}
+
+.blocklyTreeLabel:hover {
+    /*background-color: #888 !important;*/
+    color: #0f0f0f !important;
+}
+
+.blocklyTreeSelected {
+    background-color: #5bf !important;
+    color: #fff !important;
+}
+
+.blocklyTreeRow {
+    color: #0f0f0f !important;
+}
+
+.blocklyTreeRow:hover {
+    background-color: #eee !important;
+    color: #0f0f0f !important;
+}
+/*魔改*/
+
+/** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */
+/*
+.blocklyToolboxDiv {
+    background-color: #ddd !important;
+    color: black;
+}
+
+.blocklySvg {
+    background-color: #000;
+}
+
+.blocklyNonEditableText>rect, .blocklyEditableText>rect {
+    fill: #000;
+    fill-opacity: .4;
+}
+
+.blocklyNonEditableText>text, .blocklyEditableText>text {
+    fill: #fff;
+}
+
+input.blocklyHtmlInput {
+    color: white;
+    background-color: black;
+}
+*/
+
+/** ======== Blockly中自动补全相关 ======== */
+.awesomplete > ul {
+    background: #fff;
+    background: hsla(0,0%,100%,.9);
+    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
+    border: 1px solid rgba(0,0,0,.3);
+    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
+}
+.awesomplete > ul:before {
+    background: white;
+}
+.awesomplete > ul > li:hover {
+    background: #cef/*hsl(200, 40%, 80%)*/;
+    color: black;
+}
+.awesomplete > ul > li[aria-selected="true"] {
+    background: #39f/*hsl(205, 40%, 40%)*/;
+    color: white;
+}
+.awesomplete mark {
+    background: #cef;
+}
+.awesomplete li:hover mark {
+    background: #39f;
+    color: white;
+}
+.awesomplete li[aria-selected="true"] mark {
+    background: #06c;
+    color: inherit;
+}
+
+/** ======== 脚本编辑相关 ======== **/
+/* 很多我也不知道是干嘛的，自行根据名字猜每一项作用吧 */
+
+.CodeMirror {
+    color: black;
+    background: white;
+}
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: white; 
+}
+.CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+}
+.CodeMirror-linenumber {
+    color: #999;
+}
+.CodeMirror-guttermarker {
+    color: black;
+}
+.CodeMirror-guttermarker-subtle {
+    color: #999;
+}
+.CodeMirror-cursor {
+    border-left: 1px solid black;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+    background: #7e7;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+}
+.cm-animate-fat-cursor {
+    background-color: #7e7;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+}
+/* DEFAULT THEME */
+.cm-s-default .cm-header {
+    color: blue;
+}  
+.cm-s-default .cm-quote {
+    color: #090;
+} 
+.cm-negative {
+    color: #d44;
+} 
+.cm-positive {
+    color: #292;
+}
+.cm-s-default .cm-keyword {
+    color: #819;
+}
+.cm-s-default .cm-atom {
+    color: #219;
+}
+.cm-s-default .cm-number {
+    color: #275;
+}
+.cm-s-default .cm-def {
+    color: #00f;
+}
+.cm-s-default .cm-variable-2 {
+    color: #05a;
+}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
+    color: #085;
+}
+.cm-s-default .cm-comment {
+    color: #960;
+}
+.cm-s-default .cm-string {
+    color: #a11;
+}
+.cm-s-default .cm-string-2 {
+    color: #f50;
+}
+.cm-s-default .cm-meta {
+    color: #555;
+}
+.cm-s-default .cm-qualifier {
+    color: #555;
+}
+.cm-s-default .cm-builtin {
+    color: #30a;
+}
+.cm-s-default .cm-bracket {
+    color: #997;
+}
+.cm-s-default .cm-tag {
+    color: #170;
+}
+.cm-s-default .cm-attribute {
+    color: #00c;
+}
+.cm-s-default .cm-hr {
+    color: #999;
+}
+.cm-s-default .cm-link {
+    color: #00c;
+}
+.cm-s-default .cm-error {
+    color: #f00;
+}
+.cm-invalidchar {
+    color: #f00;
+}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0b0;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #a22;
+}
+.CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, .3);
+}
+.CodeMirror-activeline-background {
+    background: #e8f2ff;
+}
+
+.CodeMirror-selected {
+    background: #d9d9d9;
+}
+.CodeMirror-focused .CodeMirror-selected {
+    background: #d7d4f0;
+}
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+    background: #d7d4f0;
+}
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+    background: #d7d4f0;
+}
+.cm-searching {
+    background-color: #ffa;
+    background-color: rgba(255, 255, 0, .4);
+}
+
+/* 代码补全提示相关 */
+
+.cm-matchhighlight {
+    background-color: #dedede
+}
+.CodeMirror-hints {
+    border: 1px solid silver;
+    background: white;
+    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+}
+.CodeMirror-hint {
+    color: black;
+}
+li.CodeMirror-hint-active {
+    background: #08f;
+    color: white;
+}
+
+/* 代码语法检查相关相关 */
+
+.CodeMirror-lint-tooltip {
+    background-color: #ffd;
+    border: 1px solid black;
+    color: black;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+}
+
+/* 代码补全的对话框（提供搜索功能）相关 */
+
+.CodeMirror-dialog-top {
+    border-bottom: 1px solid #eee;
+}
+  
+.CodeMirror-dialog-bottom {
+    border-top: 1px solid #eee;
+}
+
+/* 搜索项的背景色 */
+.CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+}
+.cm-matchhighlight {background-color: lightgreen}
+.CodeMirror-selection-highlight-scrollbar {background-color: yellowgreen}
+
+.CodeMirror-search-hint {
+    color: #888;
+}
+
+
+/* 增强的代码补全系统相关 */
+
+/* 变量类型 */
+.CodeMirror-Tern-completion:before {
+    color: white;
+}
+.CodeMirror-Tern-completion-unknown:before {
+  content: "?";
+  background: #4bb;
+}
+.CodeMirror-Tern-completion-object:before {
+  content: "O";
+  background: #77c;
+}
+.CodeMirror-Tern-completion-fn:before {
+  content: "F";
+  background: #7c7;
+}
+.CodeMirror-Tern-completion-array:before {
+  content: "A";
+  background: #c66;
+}
+.CodeMirror-Tern-completion-number:before {
+  content: "1";
+  background: #999;
+}
+.CodeMirror-Tern-completion-string:before {
+  content: "S";
+  background: #999;
+}
+.CodeMirror-Tern-completion-bool:before {
+  content: "B";
+  background: #999;
+}
+
+.CodeMirror-Tern-completion-guess {
+    color: #999;
+}
+/* 额外提示框（如文档） */
+.CodeMirror-Tern-tooltip {
+    border: 1px solid silver;
+    color: #444;
+    background-color: white;
+    -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+}
+
+.CodeMirror-Tern-fname { color: black; }
+.CodeMirror-Tern-farg { color: #70a; }
+.CodeMirror-Tern-type { color: #07c; }
+.CodeMirror-foldmarker {
+    color: blue;
+    text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+}  
+
diff --git a/_server/css/editor_color_dark.css b/_server/css/editor_color_dark.css
new file mode 100644
index 0000000..da0ba9c
--- /dev/null
+++ b/_server/css/editor_color_dark.css
@@ -0,0 +1,756 @@
+/** 配色文件：此文件包含了整个编辑器的全部配色 **/
+
+/** ======== 编辑器主界面相关 ======== **/
+
+/** 全局属性 **/
+body {
+    background-color: #242424;
+    color: #bbb;
+    filter: brightness(0.825);
+}
+
+input {
+    background-color: #404048;
+    color: #c0c0c0;
+}
+
+button {
+    background-color: #404048;
+	border-color: #aaa;
+    color: #c0c0c0;
+}
+
+/** 可自行仿照添加更多的全局属性...... */
+
+/** 颜色选择器 */ 
+#colorPanel {
+    background-color: #333;
+}
+
+/** 所有的阴影效果（颜色选择器、数据区、地图区、素材区等） */
+#colorPanel, #left, #mid, #mid2, #right, .leftTab {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+/** 地图编辑的输入框 */
+#pout {
+    border: 1px solid #ddd;
+}
+
+/** 中间的消息提示框 */
+#tip {
+    border: 1px solid #ccc;
+}
+
+/** 素材区背景 */
+#iconLib, #mapEdit {
+    background-color: #242424;
+}
+
+/** 选中素材区时的方框 */
+#dataSelection, .appendSelection, #selectPointBox {
+    background-color: rgba(255, 255, 255, 0.0);
+    border: 1px solid #aaa;
+    box-shadow: 0 0 0 2px #ddd, 0 0 0 3px #aaa;
+}
+
+/** 错误消息（如保存失败） */
+.warnText {
+    color: #e44;
+}
+
+/** 提示消息（如告知当前图块信息） */
+.infoText {
+    color: #7bd;
+}
+
+/** 成功消息（如保存成功） */
+.successText {
+    color: #8ca;
+}
+
+/** 数据库的表格相关 */
+table, td {
+    border: 1px solid #777;
+    color: #777;
+}
+
+.coltd, .rowtd {
+    border: 0.230vw solid #777;
+    color: #777;
+}
+
+/** 横向标尺背景色 */
+table.col td, div.col .coltd {
+    background-color: #287;
+	border-color: #ccc;
+	color: #ccc;
+}
+
+/** 横向标尺选中时的背景色 */
+#mapColMark td:hover .colBlock, #mapColMark .coltd:hover .colBlock {
+    background-color: rgba(68, 187, 170, 0.33);
+}
+
+/** 纵向标尺背景色 */
+table.row td, div.row .rowtd .rowtext {
+    background-color: #268;
+	border-color: #ccc;
+	color: #ccc;
+}
+
+/** 纵向标尺选中时的背景色 */
+#mapRowMark td:hover .rowBlock, #mapRowMark .rowtd:hover .rowBlock {
+    background-color: rgba(85, 153, 187, 0.33);
+}
+
+/** 右键菜单栏 */
+#midMenu{
+    color: #bbb;/*文字颜色*/
+    background-color: #33333c;
+    border-color: #888 #666 #666 #888;
+}
+
+#mid .tools {
+    border-top: 1px solid #555;
+}
+
+/** 右键菜单栏的当前选中项 */
+#midMenu .menuitem:hover{
+    background-color: #247;
+    border-color: #469;
+    color: #fff;
+}
+
+/*===============================自己加的东西======================================*/
+select {
+	background-color: #33333c;
+}
+
+option {
+	background-color: #33333c;
+}
+
+a {
+   color: #7bd;
+}
+
+textarea {
+   color: #bbb;
+}
+
+::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 8px;
+	background-color: #242424;
+}
+
+::-webkit-scrollbar
+{
+    width: 8px;
+    height: 10px;
+	background-color: #242424;
+}
+
+::-webkit-scrollbar-thumb
+{
+	border-radius: 8px;
+    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #bbb;
+}
+
+
+/** 禁用的输入方框（如ID）的背景色 */
+textarea[disabled] {
+    color: #888;
+}
+
+select {
+   color: #ccc;
+   background-color: #33333c;
+}
+
+option {
+    filter: brightness(0.8); 
+    background-color: #292930; 
+    color: #9a9a9a;
+
+}
+
+option:checked {
+    filter: brightness(0.8);
+    background-color: #555/*#358*/;
+    color: #ddd;
+}
+
+.gameCanvas, img {
+    filter: brightness(0.85);
+}
+
+/** 搜索事件块的输入框 */
+#searchBlock {
+    background-color: #bbb;
+	color: #444;
+}
+
+/** 打开浮层（变量搜索等）时页面背景 */
+#uieventDiv {
+    background: rgba(85,85,85,0.67);
+}
+
+/** 浮层的对话框 */
+#uieventDialog {
+    background: #101010;
+	color: #ccc;
+}
+
+/** 追加素材时的编号标记 */
+#appendPicSelection span {
+    -webkit-text-stroke: 1px gold;
+    text-shadow: black 1px 0, black 0 1px, black -1px 0, black 0 -1px;
+}
+
+.leftTab {
+    background-color: #242424;
+}
+
+/** 整个事件编辑器 */
+#left6 {
+    background-color: rgb(36, 36, 36);
+}
+
+/** 事件编辑器右边的文本框 */
+#left6 .CodeMirror {
+    /*border: 1px solid #eee;*/
+	border: 1px solid #666;
+	background-color: #242424;
+	/*color: #ccc;*/
+}
+
+/** 脚本编辑器 */
+#left7 {
+    background-color: rgb(36, 36, 36);
+}
+
+#left7 .CodeMirror {
+	border: 1px solid #666;
+	
+}
+
+/** 数据区的表格 */
+.etable table, .etable table td {
+    color: #bbb;
+}
+
+/** 数据区每行效果；2n代表偶数行，以此类推 */
+.etable table tr {
+    background-color: #3c3c3c;
+    border-top: 1px solid #ccccd4;
+}
+.etable table tr:nth-child(2n) {
+    background-color: #343434;
+}
+
+/** 数据区表格每列效果 */
+.etable table th, .etable table td {
+    border: 1px solid #777;
+}
+
+/** 鼠标悬停在数据区表格上的边框效果 */
+.etable tr:not(:first-child) > :nth-child(3):hover {
+    border: 1px solid #468;
+    box-shadow: 0px 0px 3px #468;
+}
+.etable tr:not(:first-child) > :nth-child(2):hover,
+.etable tr:not(:first-child) > :nth-child(1):hover {
+    border: 1px solid #375;
+    box-shadow: 0px 0px 3px #375;
+}
+
+/** 表格编辑的按钮颜色 */
+.editorTableEditBtn {
+    background-color: #389;
+	border-color: #bde;/*8cf和fd8*/
+	color: #cef;
+}
+.editorTableFoldBtn {
+    background-color: #a83;
+	border-color: #edb;	
+    color: #fec;
+    filter: brightness(0.95);
+	}
+
+/** 保存地图的按钮颜色 */
+#saveFloor {
+    background-color: #234;/*33333c*/
+	border-color: #abc;
+	color: #cdf;
+}
+#saveFloor.highlight {
+    background-color: #871;
+	border-color: #eda;
+	color: #fff4d0;
+}
+
+/** 解析按钮颜色 */
+#blocklyParse {
+    background-color: #404048;
+	color: #c0c0c0;
+}
+#blocklyParse.highlight {
+    background-color: #871;
+	border-color: #eda;
+	color: #fff4d0;
+}
+
+#bigmapBtn {
+    background-color: #234;/*33333c*/
+	border-color: #abc;
+	color: #cdf;
+}
+#bigmapBtn.highlight {
+    background-color: #871;
+	border-color: #eda;
+	color: #fff4d0;
+}
+
+.popCheckboxItem {
+    color: #bbbbbb;
+}
+
+table.col td.highlight {
+    background-color: #66ccbb;
+}
+
+table.row td.highlight {
+    background-color: #77aacc;
+}
+
+/** ======== blockly 相关 ======== */
+
+/** 
+blockly图块的的黑暗程度，用opacity表示，0到1之间；
+0表示表示纯亮色，1表示纯黑色 
+*/
+
+/** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */
+
+/*somethingSOMETHING*/
+/*.blocklyTreeLabel {
+    color: #ccc;
+}*/
+
+.blocklyTreeLabel:hover {
+    /*background-color: #888 !important;*/
+    color: #fff !important;
+}
+
+.blocklyTreeSelected {
+    background-color: #358 !important;
+    color: #fff !important;
+}
+
+/*.blocklyTreeSelected .blocklyTreeLabel {
+    background-color: #358 !important;
+    background: #358 !important;
+    color: #fff !important;
+ }*/
+
+ .blocklyTreeRow {
+    /*background-color: #888 !important;*/
+    color: #ccc !important;
+}
+
+.blocklyTreeRow:hover {
+    background-color: #666 !important;
+    color: #fff !important;
+}
+
+/*
+.blocklyFlyout {
+     background-color: rgba(0,0,0,1);
+}
+*/
+.blocklyFlyoutBackground {
+    fill: #666;
+    fill-opacity: 0.67;
+}
+/*somethingSOMETHING*/
+
+
+.blocklyToolboxDiv {
+    background-color: #2a2a2a !important;
+	border: 1px solid #666;
+    color: black;
+}
+
+.blocklySvg {
+    background-color: #242424;
+}
+
+.blocklyNonEditableText>rect, .blocklyEditableText>rect {
+    fill: #000;
+    fill-opacity: .3;
+}
+
+.blocklyNonEditableText>text, .blocklyEditableText>text {
+    fill: #fff;
+}
+
+input.blocklyHtmlInput {
+    color: white;
+    background-color: black;
+}
+
+.blocklyFieldRect:not(.blocklyColourFieldRect) {
+    fill: #242424 !important;
+}
+
+.blocklyEditableText > .blocklyText {
+    fill: #eee !important;
+}
+
+.blocklyHtmlInput {
+    background: rgba(36,36,36,0.6);
+    color: #eee;
+}
+
+.blocklyDropDownDiv {
+    background-color: #33333c;
+    border: 1px solid rgba(0,0,0,.3);
+	border-color: #666;
+    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
+}
+
+.blocklyDropDownDiv .goog-menuitem-content {
+    color: #eee;
+}
+
+.blocklyDropDownDiv .goog-menuitem-highlight {
+    background: #247/*hsl(200, 40%, 80%)*/;
+    color: #eee;
+}
+
+.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox, 
+.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon, 
+.blocklyDropDownDiv .goog-option-selected .goog-menuitem-checkbox, 
+.blocklyDropDownDiv .goog-option-selected .goog-menuitem-icon {
+    background: url(../blockly/media/sprites_white.png) no-repeat -48px -16px;
+}
+
+/** ======== Blockly中自动补全相关 ======== */
+.awesomplete > ul {
+    background: #33333c;
+    /*background: hsla(0,0%,100%,.9);
+    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));*/
+    border: 1px solid rgba(0,0,0,.3);
+	border-color: #666;
+    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
+}
+.awesomplete > ul:before {
+    background: white;
+}
+.awesomplete > ul > li:hover {
+    background: #247/*hsl(200, 40%, 80%)*/;
+    color: #fff;
+}
+.awesomplete > ul > li[aria-selected="true"] {
+    background: hsl(205, 40%, 40%);
+    color: white;
+}
+.awesomplete mark {
+    background: /*hsl(65, 100%, 50%);*/#278;
+	color: #cef;
+}
+.awesomplete li:hover mark {
+    background: /*hsl(68, 100%, 41%)*/#1a9;
+	color: #fff;
+}
+.awesomplete li[aria-selected="true"] mark {
+    background: /*hsl(86, 100%, 21%)*/#468;
+    color: inherit;
+}
+
+/** ======== 脚本编辑相关 ======== **/
+/* 很多我也不知道是干嘛的，自行根据名字猜每一项作用吧 */
+
+.CodeMirror {
+    color: #ddd;/*杨子默：我也不知道他是干啥用的*/
+    background: #242424;
+}
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: #242424; 
+}
+.CodeMirror-gutters {
+    border-right: 1px solid #666;
+    background-color: #2a2a2a;
+}
+.CodeMirror-linenumber {
+    color: #999;
+}
+.CodeMirror-guttermarker {
+    color: black;
+}
+.CodeMirror-guttermarker-subtle {
+    color: #999;
+}
+.CodeMirror-cursor {
+    border-left: 1px solid #f8f8f0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+    background: #7e7;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+}
+.cm-animate-fat-cursor {
+    background-color: #7e7;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+}
+/* DEFAULT THEME */
+.cm-s-default .cm-header {
+    color: #a8f;
+}  
+.cm-s-default .cm-quote {
+    color: #695;
+} 
+.cm-negative {
+    color: #f55;
+} 
+.cm-positive {
+    color: #5f5;
+}
+.cm-s-default .cm-keyword {
+    color: #d7a;
+}
+.cm-s-default .cm-atom {
+    color: #80c0ff;
+}
+.cm-s-default .cm-number {
+    color: #a0e0c0;
+}
+.cm-s-default .cm-def {
+    color: #db7; 
+}
+.cm-s-default .cm-variable-2 {
+    color: #8cd;
+}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
+    color: #8cd;
+}
+.cm-s-default .cm-comment {
+    color: #7a6;
+}
+.cm-s-default .cm-string {
+    color: #db7;
+}
+.cm-s-default .cm-string-2 {
+    color: #db7/*something?*/;
+}
+.cm-s-default .cm-meta {
+    color: #33333c;
+}
+.cm-s-default .cm-qualifier {
+    color: #33333c;
+}
+.cm-s-default .cm-builtin {
+    color: #66d9ef;
+}
+.cm-s-default .cm-bracket {
+    color: #f8f8f2;
+}
+.cm-s-default .cm-tag {
+    color: #f55;
+}
+.cm-s-default .cm-attribute {
+    color: #ab6;
+}
+.cm-s-default .cm-hr {
+    color: #999;
+}
+.cm-s-default .cm-link {
+    color: #a8f;
+}
+.cm-s-default .cm-error {
+	background: #f55;
+	color: #fff;
+}
+/*somethingsomething*/
+.cm-s-default .cm-matchhighlight {
+    background: #57a;
+    color: #eef8ff;
+}
+/*somethingsomething*/
+.cm-invalidchar {
+    color: #f55;
+}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #5f5;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #f55;
+}
+.CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, .3);
+}
+.CodeMirror-activeline-background {
+    background: #247;
+}
+
+.CodeMirror-selected {
+    background: #358;
+}
+.CodeMirror-focused .CodeMirror-selected {
+    background: #358;
+}
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+    background: #247;
+}
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+    background: #247;
+}
+.cm-searching {
+    background-color: #ffa;
+    background-color: rgba(255, 255, 0, .4);
+}
+
+/* 代码补全提示相关 */
+
+.cm-matchhighlight {
+    background-color: #247;
+}
+.CodeMirror-hints {
+    border: 1px solid #888;
+    background: #33333c;
+    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+}
+.CodeMirror-hint {
+    color: #ccc;
+}
+li.CodeMirror-hint-active {
+    background: #247;
+    color: #fff;
+}
+
+/* 代码语法检查相关相关 */
+
+.CodeMirror-lint-tooltip {
+    background-color: #247;
+    border: 1px solid #135;
+    color: #fff;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+}
+
+/* 代码补全的对话框（提供搜索功能）相关 */
+
+.CodeMirror-dialog-top {
+    border-bottom: 1px solid #eee;
+}
+  
+.CodeMirror-dialog-bottom {
+    border-top: 1px solid #eee;
+}
+
+/* 搜索项的背景色 */
+.CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+}
+.cm-matchhighlight {background-color: lightgreen}
+.CodeMirror-selection-highlight-scrollbar {background-color: yellowgreen}
+
+.CodeMirror-search-hint {
+    color: #888;
+}
+
+
+/* 增强的代码补全系统相关 */
+
+/* 变量类型 */
+.CodeMirror-Tern-completion:before {
+    color: white;
+}
+.CodeMirror-Tern-completion-unknown:before {
+  content: "?";
+  background: #4bb;
+}
+.CodeMirror-Tern-completion-object:before {
+  content: "O";
+  background: #77c;
+}
+.CodeMirror-Tern-completion-fn:before {
+  content: "F";
+  background: #7c7;
+}
+.CodeMirror-Tern-completion-array:before {
+  content: "A";
+  background: #c66;
+}
+.CodeMirror-Tern-completion-number:before {
+  content: "1";
+  background: #999;
+}
+.CodeMirror-Tern-completion-string:before {
+  content: "S";
+  background: #999;
+}
+.CodeMirror-Tern-completion-bool:before {
+  content: "B";
+  background: #999;
+}
+
+.CodeMirror-Tern-completion-guess {
+    color: #999;
+}
+/* 额外提示框（如文档） */
+.CodeMirror-Tern-tooltip {
+    border: 1px solid #aaa;
+    color: #ccc;
+    background-color: #33333c;
+    -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+}
+
+.CodeMirror-Tern-fname { color: #ddd; }
+.CodeMirror-Tern-farg { color: #d7a; }
+.CodeMirror-Tern-type { color: #db7; }
+.CodeMirror-foldmarker {
+    color: #ddd;
+    text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+}  
+
diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css
new file mode 100644
index 0000000..b3f134d
--- /dev/null
+++ b/_server/css/editor_mobile.css
@@ -0,0 +1,720 @@
+/** editor **/
+
+:root {
+    --size: 13;
+}
+
+html{
+    font-size: 4vw;
+}
+input, textarea, select, button {
+    font-size: 1rem;
+}
+
+html, body, div, img {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;;
+}
+
+/* ::-webkit-scrollbar {
+    width: 5px;
+} */
+.main {
+    max-width: 100%;
+    min-height: 500px;
+    margin: 0 auto;
+}
+
+#left, #mid, #right {
+    /* border-radius: 2px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
+    width: 100vw;
+    height: 100vw;
+}
+
+#left {
+    position: absolute;
+}
+
+#mapEditArea {
+    position: absolute;
+    width: 100%;
+    height: 70%;
+    left: 0;
+    top: 0;
+    /* padding: 10px 5px; */
+    box-sizing: border-box;
+    display: none;
+}
+
+#pout {
+    display: block;
+    width: 95vw;
+    height: 62vw;
+    box-sizing: border-box;
+    margin-left: 5vw;
+    margin-top: 23px;
+    line-height: 5vw;
+    font-size: 12px;
+    font-family: 'Lucida Console', Monaco, monospace;
+    white-space: pre;
+    border-radius: 2px;
+    overflow: auto;
+}
+
+#mapEditArea p {
+    margin: 10px;
+    display: block;
+    width: 70%;
+    line-height: 20px;
+    text-align: left;
+    font-size: 14px;
+}
+
+#editTip {
+    position: absolute;
+    width: 95vw;
+    left: 4vw;
+    top: 4vw;
+}
+
+#editTip .btn {
+    float: right;
+    margin-right: 20px;
+    margin-top: 5px;
+}
+
+#editBtns {
+    position: absolute;
+    width: 95vw;
+    left: 4vw;
+    top: 20vw;
+}
+
+#newMaps {
+    position: absolute;
+    left: 4vw;
+    top: 35vw;
+}
+
+#newFloors {
+    position: absolute;
+    width: 95vw;
+    left: 4vw;
+    top: 43vw;
+}
+
+#mid {
+    position: absolute;
+}
+
+#mid2 {
+    display: none;
+}
+
+#mapEdit {
+    overflow: hidden;
+}
+
+.map {
+    position: absolute;
+    left: 4vw;
+    top: 4vw;
+    width: 96vw;
+    height: 96vw;
+}
+.map canvas{
+    width: 96vw;
+    height: 96vw;
+}
+
+#mid .tools {
+    position: absolute;
+    width: 425px;
+    height: 180px;
+    left: 0;
+    bottom: 0;
+    padding: 10px 5px;
+    margin-left: 8px;;
+    box-sizing: border-box;
+}
+
+#tip {
+    float: right;
+    width: 45%;
+    /* height: 95%; */
+    min-height: 9rem;
+    padding: 5px 10px 10px 10px;
+    margin-right: 0;
+    box-sizing: border-box;
+    border-radius: 2px;
+    font-size: 1rem;
+    line-height: 1.2rem;
+}
+
+#tip p{
+    margin: 0.5rem
+}
+
+.files {
+    width: 50%;
+    height: 120px;
+    /* padding: 10px; */
+    margin-top: 15px;
+}
+
+#bgSelect {
+    width: 50%;
+    height: 100px;
+    margin-top: 10px;
+}
+
+#bgSelect span {
+    /* display: block; */
+    font-size: 14px;
+    line-height: 30px;
+}
+
+#printOut {
+    margin-top: 10px;
+    height: 20px;
+}
+
+#right {
+    position: absolute;
+    /* border: 1px solid rgb(238, 13, 13); */
+}
+
+#iconLib {
+    position: absolute;
+    width: 100vw;
+    height: 100vw;
+    top: 5px;
+    overflow: auto;
+}
+
+#iconImages {
+    z-index: 0;
+    overflow: hidden;
+}
+
+#iconImages img {
+    position: absolute;
+}
+
+.gameCanvas {
+    position: absolute;
+}
+
+#dataSelection, .appendSelection {
+    position: absolute;
+    /* top:0;
+    left:320px; */
+    z-index: 75;
+    width: 26px;
+    height: 26px;
+    margin: 3px 0 0 3px;
+    padding: 0;
+    /* display: none; */
+    box-sizing: border-box;
+}
+
+#iconExpandBtn {
+    position: absolute;
+    left: 20px;
+    bottom: 30px;
+    font-size: 15px;
+    padding: 6px;
+    display: none;
+}
+
+.warnText {
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1.2em;
+}
+
+.successText {
+    line-height: 1.2em;
+}
+
+td, .coltd, .rowtd {
+    cursor: crosshair;
+}
+
+table.col, div.col {
+    position: relative;
+
+    text-align: center;
+    border-collapse: collapse;
+}
+
+#arrColMark td {
+    width: 16px;
+}
+
+#arrColMark {
+    top: 2px;
+    left: 5vw;
+    width: 95vw;
+    height: 16px;
+    font-size: 13px;
+    display: none;
+}
+
+#mapColMark {
+    position: absolute;
+    top: 0;
+    left: 4vw;
+    width: 96vw;
+    height: 4vw;
+    font-size: 3vw;
+}
+
+
+#mapColMark .coltd,
+#mapColMark .coltd .coltext {
+    position: absolute;
+    width: calc(93vw / var(--size));
+    height: 4vw;
+    line-height: 4vw;
+    padding: 0;
+    border-bottom-width: 0px;
+    border-top-width: 0px;
+    border-left-width: calc(1.5vw / var(--size));
+    border-right-width: calc(1.5vw / var(--size));
+}
+
+#mapColMark .coltd:hover .colBlock {
+    position: absolute;
+    top: 4vw;
+    left:0;
+    height: 96vw;
+    width: calc(96vw / var(--size));
+    z-index: 100;
+}
+
+table.row,div.row,
+table.row,div.row .rowtext {
+    width:4vw;
+    position: relative;
+    text-align: right;
+    vertical-align: middle;
+    border-collapse: collapse;
+}
+
+#arrRowMark {
+    top: 5px;
+    left: 0;
+    width: 4vw;
+    height: 62vw;
+    font-size: 12px;
+    display: none;
+}
+
+#mapRowMark {
+    position: absolute;
+    top: 4vw;
+    left: 0;
+    width: 4vw;
+    height: 96vw;
+    font-size: 3vw;
+}
+
+#mapRowMark .rowtd{
+    position: absolute;
+}
+
+#mapRowMark .rowtd,
+#mapRowMark .rowtd .rowtext{
+    height: calc(93vw / var(--size));
+    line-height: calc(93vw / var(--size));
+    padding: 0;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    border-top-width: calc(1.5vw / var(--size));
+    border-bottom-width: calc(1.5vw / var(--size));
+}
+
+#mapRowMark .rowtd:hover .rowBlock {
+    position: absolute;
+    left: 4vw;
+    top: 0;
+    height: calc(96vw / var(--size));
+    width: 96vw;
+    z-index: 100;
+}
+
+#menuDiv * { margin: 0; padding: 0; }
+#midMenu{
+    border-style: solid;
+    border-width: 1px;
+    cursor: default;
+    font: normal 2.5vw Arial, sans-serif;
+    margin: 0;
+    outline: none;
+    padding: 4px 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 100%;
+    max-width: 40%;
+    z-index: 101;
+
+    border-radius: 4px;
+}
+#midMenu .menuitem{
+    font: normal 2.5vw Arial, sans-serif;
+    list-style: none;
+    margin: 0;
+    padding: 4px 7em 4px 4px;
+    white-space: nowrap;
+
+    /* padding-left: 12px; */
+
+    /* padding-right: 20px; */
+}
+#midMenu .menuitem:hover{
+    border-style: dotted;
+    border-width: 1px 0;
+    padding-bottom: 3px;
+    padding-top: 3px;
+}
+#midMenu .menuitem-content{
+    font: normal 2.5vw Arial, sans-serif;
+}
+
+#down{
+    position: absolute;
+    left:0;
+    top:100vw;
+    bottom: 0;
+    width: 100vw;
+}
+
+#colorPanel {
+    position: fixed;
+    width: max-content;
+    height: 205px;
+    z-index: 240;
+    padding: 4px 6px;
+    margin-top: 6px;
+    box-sizing: border-box;
+}
+
+#colorPicker {
+    margin: 2px 0;
+    border-radius: 3px;
+    width: 90px;
+}
+
+#uieventDiv {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2000
+}
+
+#uieventDialog {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100vw;
+}
+
+#uieventHead {
+    margin: 10px 20px;
+}
+
+#uieventTitle {
+    font-weight: bold;
+}
+
+#uieventNo {
+    float: right;
+}
+
+#uieventYes {
+    display: none;
+    float: right;
+    margin-right: 15px;
+}
+
+#uieventBody {
+    width: 100vw;
+    height: 100vw;
+    position: relative;
+    margin-left: 0;
+    margin-bottom: 5px;
+    overflow: hidden;
+}
+
+#uievent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+#selectPoint {
+    display: none;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+#selectPointFloor {
+    margin-right: 10px;
+}
+
+#selectPointButtons {
+    display: inline;
+}
+
+#selectPointBox {
+    position: absolute;
+    z-index: 75;
+    width: 26px;
+    height: 26px;
+    margin: 3px 0 0 3px;
+    padding: 0;
+    /* display: none; */
+    box-sizing: border-box;
+}
+
+/** editor_mode **/
+
+.leftTab {
+    width: 100vw;
+    height: 100vw;
+}
+
+.leftTab {
+    overflow: auto;
+    position: absolute;
+    height: 100vw;
+}
+
+.leftTab > * {
+    margin: 2.5px 5px;
+}
+
+.leftTab > :first-child {
+    margin-top: 5px;
+}
+
+.leftTab > :last-child {
+    margin-bottom: 5px;
+}
+
+.leftTab {
+    left: 0;
+    top: 0;
+    width: 100vw;
+}
+
+.leftTab .leftTabHeader {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+}
+
+.leftTab .leftTabContent {
+    padding-top: 50px;
+}
+
+#appendPicSelection span {
+    position: absolute;
+    font-size: 11px;
+}
+
+#left6 {
+    left: 0;
+    top: 0;
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+#left6 h3{
+    font-size: 6vw;
+    margin: 1.77vw 0;
+    
+}
+
+#left6 #blocklyArea {
+
+    width: 100vw;
+    height: 100vw;
+}
+
+#left6 #blocklyDiv {
+    position: relative;
+}
+
+#left6 .CodeMirror {
+    height: 38vw;
+    width: 100%;
+}
+
+#left6 #codeArea {
+    width: 99.5%;
+    height: 15.4em;
+    overflow: y; /* resize:none; */
+}
+
+#left6 #blocklyDiv .blocklyToolboxDiv{
+    width:6vw;
+}
+#left6 #blocklyDiv .blocklyTreeLabel{
+    margin-left:-4vw;
+}
+
+#left7 {
+    /* height: 440px; width: 375px;float:left; */
+    left: 0;
+    top: 0;
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+#left7 .CodeMirror {
+    font-size: 14px;
+    height: 95%;
+    width: 95%;
+}
+
+.etable table,
+.etable table td {
+    cursor: auto;
+}
+
+/* copy from github-css https://github.com/sindresorhus/github-markdown-css  */
+.etable table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.etable table {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.etable table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: break-all;
+}
+
+.etable table th {
+    font-weight: 600;
+}
+
+.etable table th,
+.etable table td {
+    padding: 5px;
+}
+
+/* copy end ---------------------------------------------  */
+
+.etable tr {
+    width: 100%
+}
+
+.etable tr > :nth-child(1) {
+    width: 20%
+}
+
+.etable tr > :nth-child(2) {
+    width: 20%
+}
+
+.etable tr > :nth-child(3) {
+    width: 38%;
+}
+
+.etable tr > :nth-child(4) {
+    width: 22%;
+    text-align: center;
+}
+
+.etable table {
+    overflow: visible;
+}
+
+.etable tr:not(:first-child) > :nth-child(3) {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    position: relative;
+}
+
+div.etableInputDiv {
+    position: absolute;
+    padding: 5px 0 0 5px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+div.checkboxSet {
+    position: relative !important;
+    max-height: 250px;
+    overflow: auto;
+}
+
+.etableInputDiv > * {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    border: none;
+    background: transparent;
+}
+
+.etableInputDiv .checkbox {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -8px;
+    margin-top: -8px;
+}
+
+.etableInputDiv .checkboxSetMember {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+
+.etableInputDiv textarea {
+    resize: none;
+}
+
+.etableInputDiv textarea:hover {
+    margin: -5px;
+}
+
+@font-face {
+    font-family: Fira;
+    src: url(./FiraCode.ttf);
+}
+
+.main .CodeMirror {
+    font-family: Fira, Menlo, Consolas, 'Courier New', Courier, monospace;
+}