优化样式

src/code/colorful.js

@@ -18,7 +18,7 @@ const BUILDIN2 = /\b(Object|String|Array|Boolean|Number|Function|class)\b/g
 const STR = /(['"`])(.*?)\1/g
 const NUM = /\b(\d+)\b/g
 const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
-const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
+const CM = /(?=\s)?([ ]*\/\/.*)|(^\/\/.*)/g
 const INLINE = {
   code: /`([^`]*?[^`\\\s])`/g,
   codeBlock: /^```(.*?)$/gm,
@@ -46,9 +46,13 @@ function parseJs(code) {
     .replace(BUILDIN2, '[type]<strong><em>$1</em></strong>[/type]')
     .replace(NUM, '[num]$1[/num]')
     .replace(STR, (m, q, str) => {
-      return `[str]${q}${str.replace(/\[\/?num\]/g, '')}${q}[/str]`
+      str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2')
+      return `[str]${q}${str}${q}[/str]`
+    })
+    .replace(CM, (m, str) => {
+      str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2')
+      return `[cm]${str}[/cm]`
     })
-    .replace(CM, '[cm]$1[/cm]')
 }
 
 function rebuild(code) {

src/css/reset-basic.css

@@ -40,42 +40,42 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
 
 :root {
   /* primary */
-  --color-teal-a: rgba(72, 201, 176, 0.5);
+  --color-teal-a: rgba(72, 201, 176, 0.35);
   --color-teal-1: rgb(72, 201, 176);
   --color-teal-2: rgb(26, 188, 156);
   --color-teal-3: rgb(22, 160, 133);
   /* success */
-  --color-green-a: rgba(88, 214, 141, 0.5);
+  --color-green-a: rgba(88, 214, 141, 0.35);
   --color-green-1: rgb(88, 214, 141);
   --color-green-2: rgb(46, 204, 113);
   --color-green-3: rgb(39, 173, 96);
   /* info */
-  --color-blue-a: rgba(100, 181, 246, 0.5);
+  --color-blue-a: rgba(100, 181, 246, 0.35);
   --color-blue-1: rgb(100, 181, 246);
   --color-blue-2: rgb(66, 165, 245);
   --color-blue-3: rgb(33, 150, 243);
   /* danger */
-  --color-red-a: rgba(255, 107, 129, 0.5);
+  --color-red-a: rgba(255, 107, 129, 0.35);
   --color-red-1: rgb(255, 107, 129);
   --color-red-2: rgb(255, 71, 87);
   --color-red-3: rgb(230, 52, 67);
   /* warning */
-  --color-orange-a: rgba(244, 211, 19, 0.5);
+  --color-orange-a: rgba(244, 211, 19, 0.35);
   --color-orange-1: rgb(244, 211, 19);
   --color-orange-2: rgb(241, 196, 15);
   --color-orange-3: rgb(205, 167, 13);
   /* default1 */
-  --color-plain-a: rgba(150, 204, 248, 0.5);
+  --color-plain-a: rgba(150, 204, 248, 0.35);
   --color-plain-1: rgb(242, 245, 252);
   --color-plain-2: rgb(232, 235, 244);
   --color-plain-3: rgb(218, 225, 233);
   /* default2 */
-  --color-grey-a: rgba(206, 214, 224, 0.5);
+  --color-grey-a: rgba(206, 214, 224, 0.35);
   --color-grey-1: rgb(206, 214, 224);
   --color-grey-2: rgb(164, 176, 190);
   --color-grey-3: rgb(134, 144, 155);
   /* inverse */
-  --color-dark-a: rgba(87, 96, 111, 0.5);
+  --color-dark-a: rgba(87, 96, 111, 0.35);
   --color-dark-1: rgb(87, 96, 111);
   --color-dark-2: rgb(52, 73, 94);
   --color-dark-3: rgb(44, 62, 80);

src/layer/index.wc

@@ -5,6 +5,7 @@
     <div class="layer__ctrl noselect"></div>
   </div>
 </template>
+
 <style lang="scss">
 :host {
   display: none;
@@ -114,32 +115,32 @@
       align-items: center;
       width: 300px;
       padding: 0 10px !important;
-      border-radius: 2px;
+      border-radius: 3px;
       font-weight: normal;
-
+      text-indent: 8px;
       --size: 16px;
-      --pad: 0 8px 0 0;
+      color: var(--color-dark-1);
     }
 
     ::slotted(&__toast.style-info) {
-      border: 1px solid var(--color-plain-3);
-      background: var(--color-plain-1);
-      color: var(--color-grey-3);
+      // border: 1px solid var(--color-plain-3);
+      background: var(--color-plain-a);
+      // color: var(--color-grey-3);
     }
     ::slotted(&__toast.style-success) {
-      border: 1px solid #b3e19d;
-      background: #f0f9eb;
-      color: var(--color-green-2);
+      // border: 1px solid #b3e19d;
+      background: var(--color-green-a);
+      // color: var(--color-green-3);
     }
     ::slotted(&__toast.style-warn) {
-      border: 1px solid #faebb4;
-      background: #fffbed;
-      color: var(--color-orange-3);
+      // border: 1px solid #faebb4;
+      background: var(--color-orange-a);
+      // color: var(--color-orange-3);
     }
     ::slotted(&__toast.style-error) {
-      border: 1px solid #f5c4c4;
-      background: #fef0f0;
-      color: var(--color-red-1);
+      // border: 1px solid #f5c4c4;
+      background: var(--color-red-a);
+      // color: var(--color-red-3);
     }
   }
 
@@ -251,14 +252,14 @@ const LANGUAGES = {
     TITLE: 'Dialog',
     BTNS: ['Cancel', 'OK']
   },
-  zh: {
+  cn: {
     TITLE: '提示',
     BTNS: ['取消', '确定']
   }
 }
-LANGUAGES['zh-CN'] = LANGUAGES.zh
+LANGUAGES['zh-CN'] = LANGUAGES.cn
 const lang =
-  LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
+  LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn
 
 let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
 let toastInstance = null // 缓存toast的实例
@@ -574,7 +575,7 @@ export default class Layer {
       this.timer = setTimeout(() => {
         toastInstance = null
         this.close()
-      }, 3000)
+      }, 3000000)
     }
 
     if (this.props.type === 'notify') {
@@ -795,7 +796,7 @@ Object.assign(_layer, {
       content: `
       <div class="layer__content__toast style-${type}">
         <wc-icon is="${ico}"></wc-icon>
-        <span>${txt}</span>
+        <span class="toast-txt">${txt}</span>
       </div>`,
       type: 'toast'
     })