feat: 查看及修改 mapping (#8)

* feat: 加载 mapping & 保存 mapping * feat: 新增保存时写入文件 * pref: mapping 修改
orzyyyy · Jan 29, 2019 · 3bf5fa1 · 3bf5fa1
1 parent 8954c76
commit 3bf5fa1
Show file tree

Hide file tree

Showing 18 changed files with 170 additions and 147 deletions.
diff --git a/dist/assets/mapping.css b/dist/assets/mapping.css
@@ -1 +1,4 @@
-.mapping {}
+.mapping .canvas {
+  width: 100%;
+  height: 100vh;
+}
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="/dist/ninoninoni.js?c013f720fb82d65f1405"></script></body></html>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="/dist/ninoninoni.js?0d1b443654a083ee76e2"></script></body></html>
diff --git a/dist/layout/122a14c4ab646d5a612d74ceaddd20a0.json b/dist/layout/122a14c4ab646d5a612d74ceaddd20a0.json
@@ -0,0 +1 @@
+{"BlockGroup":{"block-623187":{"x":158,"y":256,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-624018":{"x":367,"y":368,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-73377":{"x":253,"y":525,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-66174":{"x":80,"y":657,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-74386":{"x":426,"y":477,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}}},"TagGroup":{"tag-626505":{"x":167,"y":284,"style":{"width":100,"height":32},"editable":false,"input":"test"},"tag-629962":{"x":405,"y":398,"style":{"width":100,"height":32},"editable":false,"input":"test2"},"tag-80986":{"x":286,"y":555,"style":{"width":100,"height":32},"editable":false,"input":"test3"},"tag-67933":{"x":110,"y":689,"style":{"width":100,"height":32},"editable":false,"input":"测试"},"tag-76032":{"x":438,"y":508,"style":{"width":100,"height":32},"editable":false,"input":"托尔斯泰"}}}
diff --git a/dist/layout/1a79a4d60de6718e8e5b326e338ae534.json b/dist/layout/1a79a4d60de6718e8e5b326e338ae534.json
diff --git a/dist/lib/main/assets/mapping.css b/dist/lib/main/assets/mapping.css
@@ -1 +1,4 @@
-.mapping {}
+.mapping .canvas {
+  width: 100%;
+  height: 100vh;
+}
diff --git a/dist/mapping.json b/dist/mapping.json
@@ -1 +1 @@
-[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548647900804,"modifyTime":1548647900804},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548647900804,"modifyTime":1548647900804}]
+[{"id":"122a14c4ab646d5a612d74ceaddd20a0","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-122a14c4ab646d5a612d74ceaddd20a0.json","createTime":1548761194017,"modifyTime":1548761194017},{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548761194017,"modifyTime":1548761194017}]
diff --git a/dist/ninoninoni.js b/dist/ninoninoni.js
diff --git a/dist/vendor/1.js b/dist/vendor/1.js
diff --git a/dist/vendor/2.js b/dist/vendor/2.js
diff --git a/dist/vendor/3.js b/dist/vendor/3.js
diff --git a/dist/vendor/4.js b/dist/vendor/4.js
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "koa-router": "^7.4.0"
   },
   "devDependencies": {
+    "blueimp-md5": "^2.10.0",
     "date-fns": "^2.0.0-alpha.27",
     "eslint": "^5.12.1",
     "husky": "^1.3.1",

diff --git a/server/controller/save.js b/server/controller/save.js
@@ -1,6 +1,20 @@
-const saveLayout = async (ctx, next) => {
+const fs = require('fs');
+const md5 = require('blueimp-md5');
+const path = require('path');
+
+const saveLayout = async ctx => {
   const body = ctx.request.body;
-  ctx.response.body = body.layout;
+  const layout = body.layout;
+  const id = body.id || md5(new Date().getTime());
+  const writeFiles = [`src/layout/${id}.json`, `dist/layout/${id}.json`];
+  try {
+    for (let item of writeFiles) {
+      fs.writeFileSync(path.join(process.cwd(), item), JSON.stringify(layout));
+    }
+    ctx.response.body = true;
+  } catch (error) {
+    ctx.response.body = false;
+  }
 };
 
 module.exports = {

diff --git a/src/assets/mapping.css b/src/assets/mapping.css
@@ -1 +1,4 @@
-.mapping {}
+.mapping .canvas {
+  width: 100%;
+  height: 100vh;
+}
diff --git a/src/layout/122a14c4ab646d5a612d74ceaddd20a0.json b/src/layout/122a14c4ab646d5a612d74ceaddd20a0.json
@@ -0,0 +1 @@
+{"BlockGroup":{"block-623187":{"x":158,"y":256,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-624018":{"x":367,"y":368,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-73377":{"x":253,"y":525,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-66174":{"x":80,"y":657,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}},"block-74386":{"x":426,"y":477,"style":{"width":100,"height":80,"background":"#F96","borderRadius":"10px","border":"1px solid #aaa"}}},"TagGroup":{"tag-626505":{"x":167,"y":284,"style":{"width":100,"height":32},"editable":false,"input":"test"},"tag-629962":{"x":405,"y":398,"style":{"width":100,"height":32},"editable":false,"input":"test2"},"tag-80986":{"x":286,"y":555,"style":{"width":100,"height":32},"editable":false,"input":"test3"},"tag-67933":{"x":110,"y":689,"style":{"width":100,"height":32},"editable":false,"input":"测试"},"tag-76032":{"x":438,"y":508,"style":{"width":100,"height":32},"editable":false,"input":"托尔斯泰"}}}