增加对 rollup 的处理

201910097080 · Jan 31, 2024 · f49525e · f49525e
1 parent 1c7cc48
commit f49525e
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
-> 将数据库中对应的主键的属性展示出来
 
-只是简单的将元数据展示出来
+只是简单的将元数据展示出来, 暂不涉及写入
 
 > 注意!: 该挂件没有任何判断异常的东西, 所以在给一个文档添加该挂件时得确保这个文档真的可以读取到数据库内容
 

diff --git a/index.html b/index.html
@@ -5,53 +5,53 @@
   <style>
     body {
       margin: 0;
+      position: relative;
+    }
+    .metadata-container {
+      display: table;
+      width: calc(150%);
     }
-
     .key-value-pair {
-      margin-bottom: 10px;
+      display: table-row;
     }
 
     .key {
-      float: left;
-      margin-right: 10px;
+      display: table-cell;
       font-weight: bold;
-      width: 200px;
-    }
-
-    .value-single-line:hover,
-    .value-multiple:hover,
-    .key:hover {
-      background-color: lightgrey;
-      border-radius: 10px;
-    }
+      position: relative;
+      width: calc(18%);
 
-    .value,
-    .value-multiple,
-    .value-single-line {
-      overflow: hidden;
-      width: 600px;
+      padding: calc(0.25%) calc(1%);
+      vertical-align: top;
     }
 
-    .key,
-    .value-multiple,
-    .value-single-line {
-      padding-left: 10px;
+    .value {
+      position: relative;
+      display: inline-block;
+      width: calc(70%);
+      margin-left: calc(1%);
+      padding: calc(0.25%) calc(1%);
     }
 
-    .value-multiple .value {
-      display: block;
-      margin-bottom: 6px;
+    .value:hover,
+    .key:hover {
+      background-color: lightgrey;
+      border-radius: 10px;
     }
 
-    .value-single-line .value {
-      display: inline;
-      margin-right: 10px;
+    .line {
+      margin: 0;
+      position: absolute;
     }
   </style>
 </head>
 
 <body>
-  <div class="metadata-container"/>
+  <div class="metadata-container">
+    <div class="line">
+      |
+    </div>
+  </div>
 
 </body>
 

diff --git a/js/common.js b/js/common.js
@@ -34,24 +34,18 @@ function createKey(data) {
 
 function createValue(mod, data) {
    let value = createDiv();
-   if (mod === 1) {
-      value.className = "value-single-line";
-   } else if (mod === 2) {
-      value.className = "value-multiple";
-   }
+   value.className = "value";
 
 
    if (Array.isArray(data)) {
    data.forEach(v => {
       let val = createDiv();
-      val.className = "value";
       val.innerHTML = v;
 
       value.appendChild(val);
    })
    } else {
       let val = createDiv();
-      val.className = "value";
       val.innerHTML = data;
 
       value.appendChild(val);
@@ -118,6 +112,18 @@ function createData(name, type, val) {
       value = createValue(2, val.contents)
    }
    break;
+   case "rollup": {
+      if (checkContents(val.contents)) {
+         return null;
+      }
+      let asset = val.contents.map(e => {
+         console.log(e)
+         let type = e.type;
+         return `${e[type].content}%`;
+      });
+      value = createValue(2, asset)
+   }
+   break;
    default: 
       if (checkContents(val.contents)) {
          return null;

diff --git a/js/main.js b/js/main.js
@@ -10,7 +10,7 @@ let meta = document.getElementsByClassName("metadata-container")[0];
 })();
 
 function processingData(data) {
-   data.forEach(e => {
+      data.forEach(e => {
       let key   = e.key.name;
       let type  = e.values[0].type
       if (type === 'select') type = 'mSelect'