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-05-28 18:54:33 +08:00
parent de5fcb7765
commit 27afa2c5c5
3 changed files with 36 additions and 31 deletions

View File

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

View File

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

View File

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