优化代码块

src/code/colorful.js

@@ -9,7 +9,12 @@ const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
 const TAG_END_EXP = /<\/([\w\-]+)>/g
 const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g
 const TAG_CM_EXP = /<!--([\w\W]*?)-->/g
-// const TAGS = 'a,b,i'
+const KEYWOWRD1 = /\b(var|const|let|function|for|switch|with|if|else|export|import|async|await|break|continue|return|class|try|catch|throw|new|while|this|super|default|case|debugger|delete|do|goto|in|public|private|protected|package|typeof)\b/g
+const KEYWOWRD2 = /\b\s(=|-|\+|\/|\*|<|>|%)\s\b/g
+const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|==|===)/g
+const STR = /(['"`])(.*?)\1/g
+const NUM = /\b(\d+)\b/g
+const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
 
 export function colorHtml(code) {
   code = code
@@ -54,3 +59,19 @@ export function colorCss(code) {
     .replace(/&/g, '<i class="r">&</i>')
   return code
 }
+
+export function colorJs(code) {
+  code = code
+    .replace(FN, '$1[fn]$2[/fn]$3')
+    .replace(KEYWOWRD1, '[key]$1[/key]')
+    .replace(KEYWOWRD2, '[key] $1 [/key]')
+    .replace(KEYWOWRD3, '[key]$1[/key]')
+    .replace(STR, '[str]$1$2$1[/str]')
+    .replace(NUM, '[num]$1[/num]')
+
+  return code
+    .replace(/\[(\/?)key\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
+    .replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
+    .replace(/\[(\/?)num\]/g, (m, s) => (s ? '</i>' : '<i class="pp">'))
+    .replace(/\[(\/?)fn\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
+}

src/code/index.wc

@@ -15,10 +15,10 @@
 <style lang="scss">
 :host {
   display: flex;
+  border-radius: 3px;
 }
 
 .code-box {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -26,10 +26,10 @@
   max-height: 610px;
   margin: 10px 0;
   padding-bottom: 8px;
-  border-radius: 6px;
+  border-radius: 3px;
   background: #f7f8fb;
   color: var(--color-dark-1);
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
 
   .title {
     display: flex;
@@ -121,6 +121,9 @@
       .o {
         color: var(--color-orange-2);
       }
+      .pp {
+        color: #6a1ea8;
+      }
     }
   }
 }
@@ -154,7 +157,7 @@
 import '../scroll/index'
 import '../layer/index'
 import $ from '../utils'
-import { colorHtml, colorCss } from './colorful'
+import { colorHtml, colorCss, colorJs } from './colorful'
 
 export default class Code {
   props = {
@@ -186,7 +189,10 @@ export default class Code {
   }
 
   set code(txt) {
-    txt = txt.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+    txt = txt
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
 
     this.state.content = txt
 
@@ -201,6 +207,13 @@ export default class Code {
         txt = colorCss(txt)
         break
 
+      case 'js':
+      case 'ts':
+      case 'javascript':
+      case 'typescript':
+        txt = colorJs(txt)
+        break
+
       default:
         txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
         break
@@ -221,13 +234,13 @@ export default class Code {
       txt = txt.slice(5, -6).trim()
     }
     if (txt) {
-      this.value = txt
+      this.code = txt
       this.textContent = ''
     }
 
     this._cpFN = $.bind(this.__CP__, 'click', ev => {
       try {
-        navigator.clipboard.writeText(this.value)
+        navigator.clipboard.writeText(this.code)
         layer.toast('复制到粘贴板成功', 'success')
       } catch (err) {
         layer.toast('复制到粘贴板失败', 'error')
@@ -237,7 +250,7 @@ export default class Code {
     this._runFN = $.bind(this.__RUN__, 'click', ev => {
       this.dispatchEvent(
         new CustomEvent('run', {
-          detail: this.value
+          detail: this.code
         })
       )
     })

src/form/button.wc

@@ -1,7 +1,7 @@
 <template>
   <button>
     <wc-icon class="icon"></wc-icon>
-    <slot></slot>
+    <slot />
   </button>
 </template>
 
@@ -21,7 +21,7 @@
 
   button {
     display: flex;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
     width: 100%;
     height: inherit;
@@ -45,7 +45,6 @@
 
   .icon {
     --size: var(--icon-size, 18px);
-    margin-right: 3px;
   }
 }
 

src/form/checkbox.wc

@@ -23,9 +23,14 @@ export default class CheckboxGroup {
     /* render */
   }
 
-  _updateChildrenStat() {
+  _updateChildrenStat(checkAll) {
     Array.from(this.children).forEach(it => {
       if (it.tagName === 'WC-CHECKBOX' && it.root) {
+        if (checkAll) {
+          it.disabled = this.disabled
+          it.readOnly = this.readOnly
+        }
+
         if (this.value.includes(it.value)) {
           it.checked = true
         } else {
@@ -64,6 +69,7 @@ export default class CheckboxGroup {
       this.props.readonly = false
       this.removeAttribute('readonly')
     }
+    this._updateChildrenStat(true)
   }
 
   get disabled() {
@@ -83,6 +89,7 @@ export default class CheckboxGroup {
       this.props.disabled = false
       this.removeAttribute('disabled')
     }
+    this._updateChildrenStat(true)
   }
 
   mounted() {
@@ -101,10 +108,20 @@ export default class CheckboxGroup {
       this.value = tmp
       this.dispatchEvent(new CustomEvent('input'))
     })
+
+    this.__observer = new MutationObserver(_ => {
+      this._updateChildrenStat(true)
+    })
+
+    this.__observer.observe(this, {
+      childList: true,
+      subtree: true
+    })
   }
 
   unmount() {
     $.unbind(this, 'child-picked', this._pickedFn)
+    this.__observer.disconnect()
   }
 
   watch() {
@@ -121,11 +138,7 @@ export default class CheckboxGroup {
         if (k === 'readonly') {
           k = 'readOnly'
         }
-        Array.from(this.children).forEach(it => {
-          if (it.tagName === 'WC-CHECKBOX' && it.root) {
-            it[k] = val !== null
-          }
-        })
+        this[k] = val !== null
         break
     }
   }

src/markd/core.js

@@ -506,6 +506,7 @@ class Tool {
         }
       }
     }
+    // console.log(html)
     delete this.list
     delete this.__LINKS__
     return html