From 4ffb1eac05dbf7eaaecdf210a101a7fd947063c8 Mon Sep 17 00:00:00 2001 From: purocean Date: Wed, 10 Nov 2021 09:59:00 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=9D=97=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/plugins/markdown-code-copy.ts | 27 ++++++--- src/renderer/plugins/markdown-code-run.ts | 68 ++++++++++++++++++---- 2 files changed, 75 insertions(+), 20 deletions(-) diff --git a/src/renderer/plugins/markdown-code-copy.ts b/src/renderer/plugins/markdown-code-copy.ts index c59d589a..ecea3ae9 100644 --- a/src/renderer/plugins/markdown-code-copy.ts +++ b/src/renderer/plugins/markdown-code-copy.ts @@ -6,12 +6,21 @@ export default { name: 'markdown-code-copy', register: ctx => { ctx.theme.addStyles(` - .markdown-view .markdown-body .p-mcc-copy-code-btn { + .markdown-view .markdown-body .p-mcc-copy-btn-wrapper { + width: 0; + height: 0; + position: sticky; + left: 100%; + top: 0; + float: right; + } + + .markdown-view .markdown-body .p-mcc-copy-btn { width: 20px; height: 20px; - position: absolute; - right: 10px; - top: 10px; + position: relative; + right: 12px; + top: -10px; padding: 6px; border-radius: 50%; opacity: 0; @@ -21,11 +30,11 @@ export default { color: var(--g-color-30) } - .markdown-view .markdown-body pre:hover > .p-mcc-copy-code-btn { + .markdown-view .markdown-body pre:hover .p-mcc-copy-btn { opacity: 1; } - .markdown-view .markdown-body .p-mcc-copy-code-btn:hover { + .markdown-view .markdown-body .p-mcc-copy-btn:hover { background: var(--g-color-80); } `) @@ -50,11 +59,11 @@ export default { } if (codeNode && Array.isArray(codeNode.children)) { - codeNode.children.push(h( + codeNode.children.unshift(h('div', { class: 'p-mcc-copy-btn-wrapper no-print' }, h( 'div', - { class: 'p-mcc-copy-code-btn copy-text no-print', 'data-text': code, title: '复制代码' }, + { class: 'p-mcc-copy-btn copy-text', 'data-text': code, title: '复制代码' }, h(SvgIcon, { name: 'clipboard', style: 'pointer-events: none' })) - ) + )) } return codeNode as any diff --git a/src/renderer/plugins/markdown-code-run.ts b/src/renderer/plugins/markdown-code-run.ts index 510faa67..42c03bb6 100644 --- a/src/renderer/plugins/markdown-code-run.ts +++ b/src/renderer/plugins/markdown-code-run.ts @@ -81,26 +81,27 @@ const RunCode = defineComponent({ const runResult = result.value || cache[hash.value] return [ - h('div', { class: 'run-code-action', style: 'position: sticky; left: 0; border-top: dashed 1px #888; margin: 1em 0' }, [ + h('div', { class: 'p-mcr-run-code-action' }, [ h('div', { title: '运行代码', - style: 'position: absolute; top: -.7em; height: 0; width: 0; border-left: .7em #b7b3b3 solid; border-top: .6em #dddddd00 solid; border-bottom: .6em #dddddd00 solid; border-right: 0; background: rgba(0, 0, 0, 0); cursor: pointer; outline: none', + class: 'p-mcr-run-btn', onClick: run }), h('div', { title: `在终端中运行代码，${getKeyLabel(CtrlCmd)} + 单击不退出解释器`, - class: 'no-print', + class: 'p-mcr-run-xterm-btn no-print', hidden: isJs.value, - style: 'position: absolute; top: -.5em; right: -0; height: 0; width: 0; border-left: .7em #b7b3b3 solid; border-top: .6em #dddddd00 solid; border-bottom: .6em #dddddd00 solid; border-right: 0; background: rgba(0, 0, 0, 0); cursor: pointer; outline: none;transform: rotate(90deg);', onClick: runInXterm }), ]), h('div', { class: 'p-mcr-run-code-result', style: 'padding: .5em 0 0 0', innerHTML: runResult }), - h( - 'div', - { class: 'p-mcr-clear-btn no-print', style: { display: runResult ? 'flex' : 'none' }, title: '清空运行结果', onClick: clearResult }, - h(SvgIcon, { name: 'times', style: 'pointer-events: none' }) - ), + h('div', { class: 'p-mcr-clear-btn-wrapper no-print' }, h( + h( + 'div', + { class: 'p-mcr-clear-btn', style: { display: runResult ? 'flex' : 'none' }, title: '清空运行结果', onClick: clearResult }, + h(SvgIcon, { name: 'times', style: 'pointer-events: none' }) + ), + )), ] } } @@ -134,11 +135,56 @@ export default { name: 'markdown-code-run', register: ctx => { ctx.theme.addStyles(` + .markdown-view .markdown-body .p-mcr-run-code-action { + position: sticky; + left: 0; + border-top: dashed 1px #888; + margin: 1em 0; + } + + .markdown-view .markdown-body .p-mcr-run-btn { + position: absolute; + top: -.7em; + height: 0; + width: 0; + border-left: .7em #b7b3b3 solid; + border-top: .6em #dddddd00 solid; + border-bottom: .6em #dddddd00 solid; + border-right: 0; + background: rgba(0, 0, 0, 0); + cursor: pointer; + outline: none; + } + + .markdown-view .markdown-body .p-mcr-run-xterm-btn { + position: absolute; + top: -.5em; + right: -0; + height: 0; + width: 0; + border-left: .7em #b7b3b3 solid; + border-top: .6em #dddddd00 solid; + border-bottom: .6em #dddddd00 solid; + border-right: 0; + background: rgba(0, 0, 0, 0); + cursor: pointer; + outline: none;transform: rotate(90deg); + } + + .markdown-view .markdown-body .p-mcr-clear-btn-wrapper { + width: 0; + height: 0; + position: sticky; + left: 100%; + bottom: 0; + float: right; + } + .markdown-view .markdown-body .p-mcr-clear-btn { width: 20px; height: 20px; - position: absolute; - right: 10px; + position: relative; + right: 12px; bottom: 10px; padding: 6px; border-radius: 50%;