This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化代码块

old
宇天 2021-04-25 19:15:53 +08:00
parent ea505b8ef8
commit 59076f2c54
5 changed files with 65 additions and 18 deletions

View File

@ -9,7 +9,12 @@ const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
const TAG_END_EXP = /<\/([\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_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 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) { export function colorHtml(code) {
code = code code = code
@ -54,3 +59,19 @@ export function colorCss(code) {
.replace(/&/g, '<i class="r">&</i>') .replace(/&/g, '<i class="r">&</i>')
return code 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">'))
}

View File

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

View File

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

View File

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

View File

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