优化tree组件,表单组件的复选框样式;marked增加安全编译模式,同时优化主题样式

src/js/form/style.scss

@@ -167,9 +167,7 @@
 .do-checkbox {position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
 
 
-  &__box {float:left;width:20px;height:20px;margin:5px;margin-left:0;line-height:18px;border:1px solid nth($cgr, 2);border-radius:3px;font-size:18px;text-align:center;
-    
-  }
+  &__box {float:left;width:18px;height:18px;margin:6px;margin-left:0;line-height:16px;border:1px solid nth($cgr, 2);border-radius:3px;font-size:16px;text-align:center;}
   &.checked &__box {color:#fff;font-weight:bold;}
 
   &.grey {color:nth($cgr, 2);}

src/js/marked/index.js

@@ -837,24 +837,25 @@ Renderer.prototype.blockquote = function(quote) {
   return '<blockquote class="md-quote">\n' + quote + '</blockquote>\n'
 }
 Renderer.prototype.mark = function(mark, t) {
-  return (
-    '<section><mark class="' +
-    (t ? 'md-warn' : 'md-mark') +
-    '">\n' +
-    mark +
-    '</mark></section>\n'
-  )
+  return `<section>
+    <mark class="${t ? 'md-warn' : 'md-mark'}">
+      <i class="do-icon-${t ? 'warn' : 'unmute'}"></i>
+      ${mark}
+    </mark>
+  </section>
+  `
 }
 
 Renderer.prototype.task = function(task, t) {
-  task = t ? '<del>' + task + '</del>' : task
-  return (
-    '<section><label class="do-ui-checkbox"><input type="checkbox" ' +
-    (t ? 'checked' : '') +
-    ' disabled />' +
-    task +
-    '</label></section>\n'
-  )
+  return `<section>
+    <label class="md-task ${t ? 'done' : ''}">
+      <span class="md-task__box">
+        ${t ? '<i class="do-icon-get"></i>' : ''}
+      </span>
+      <span class="md-task__text">${task}</span>
+    </label>
+  </section>
+  `
 }
 
 Renderer.prototype.html = function(html) {
@@ -1366,6 +1367,14 @@ marked.inlineLexer = InlineLexer.output
 
 marked.parse = marked
 
+marked.safe = function(txt) {
+  txt = txt
+    .trim()
+    .replace(/<script([^>]*?)>/g, '&lt;script$1&gt;')
+    .replace(/<\/script>/g, '&lt;/script&gt;')
+  return marked(txt)
+}
+
 window.marked = marked
 
 export default marked

src/js/marked/theme.scss

@@ -30,17 +30,28 @@
   a {text-decoration:underline;}
   a:hover {color:nth($co, 2)}
   p {margin:15px 0;}
-  blockquote.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid nth($cp, 3);background:nth($cp, 1)}
-  blockquote.md-quote p {margin:0;}
+  blockquote {
+    &.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid nth($cp, 3);background:nth($cp, 1);
+
+      p {margin:0;}
+    }
+  }
   /* 提醒文本 */
-  .md-warn,.md-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 2);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
+  .md-warn,.md-mark {display:inline-block;position:relative;padding:3px 8px 3px 35px;border:1px solid nth($co, 2);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
 
     p {margin:0!important;}
-    &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 2);content:"\e6f6";}
+    i {position:absolute;left:8px;top:7px;line-height:1;font-size:20px;color:nth($cr, 2);}
   }
   .md-mark {border-color:nth($ct, 1);color:nth($ct, 3);background:#edfbf8;
+    i {color:nth($ct, 3);}
+  }
+  .md-task {position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
 
-    &::before {color:nth($ct, 3);content:"\e657";}
+    &__box {float:left;width:18px;height:18px;margin:6px;margin-left:0;line-height:1;border:1px solid nth($cgr, 1);border-radius:3px;font-size:16px;text-align:center;}
+    &.done {
+      .md-task__box {color:nth($cgr, 1);border-color:nth($cp, 3);background:nth($cp, 3);}
+      .md-task__text {color:nth($cgr, 1);text-decoration:line-through;}
+    }
   }
   table {width:100%;
     thead tr {height:45px;line-height:45px;background:#f7f7f7}

src/js/tree/main.scss

@@ -9,9 +9,9 @@
 @import '../../css/var.scss';
 
 
-.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:block;width:100%;height:100%;line-height:34px;font-size:15px;color:nth($cd, 2);
+.do-tree {overflow:hidden;overflow-y:auto;position:relative;display:block;width:100%;height:100%;line-height:30px;font-size:15px;color:nth($cd, 2);
   
-  &__item {overflow:hidden; min-height:34px;
+  &__item {overflow:hidden; min-height:30px;
  
     .sub-tree {display:none;width:100%;padding-left:20px;}
 
@@ -22,7 +22,7 @@
 
       &:hover {color:nth($cd, 1);}
       &.active {color:nth($cd, 3);font-weight:bold;}
-      &.checkbox {float:left;position:relative;width:18px;height:18px;margin:8px 5px 8px 0;line-height:16px;border:1px solid nth($cd, 2);border-radius:3px; font-size:16px;text-align:center;}
+      &.checkbox {float:left;position:relative;width:18px;height:18px;margin:6px 5px 6px 0;line-height:16px;border:1px solid nth($cd, 2);border-radius:3px; font-size:16px;text-align:center;}
       &.label { white-space:nowrap; text-overflow:ellipsis;}
     }
   }